/* Verde Esperança - Main Stylesheet Modern, Responsive, and Accessible (WCAG Compliant) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* UI Colors (Light Mode) */ --color-primary: #1B5E20; /* Verde Escuro */ --color-primary-hover: #2E7D32; --color-secondary: #D4AF37; /* Amarelo Dourado */ --color-secondary-hover: #B8962E; --color-bg: #FAFAFA; /* Fundo geral claro */ --color-surface: #FFFFFF; /* Fundo de cards branco */ --color-text: #000000; /* Texto Preto */ --color-text-muted: #4B5563; --color-border: #E5E7EB; --color-error: #EF4444; --color-error-bg: #FEE2E2; --color-success: #10B981; --color-success-bg: #D1FAE5; --color-warning: #F59E0B; --color-warning-bg: #FEF3C7; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius-md: 8px; --radius-sm: 4px; } /* High Contrast Mode (Dark & Accessible) */ body.high-contrast { --color-primary: #D4AF37; /* Dourado */ --color-primary-hover: #FCE68B; --color-secondary: #4CAF50; /* Verde Claro */ --color-secondary-hover: #6EE7B7; --color-bg: #000000; /* Preto Puro */ --color-surface: #1A1A1A; /* Quase Preto */ --color-text: #FFFFFF; /* Branco Puro */ --color-text-muted: #D1D5DB; --color-border: #374151; --color-error: #FCA5A5; --color-error-bg: #7F1D1D; --shadow-sm: none; --shadow-md: none; } /* Base Reset & Typography */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 100%; } /* Accessibility font scaling classes (applied to by a11y.js) */ html.font-scale-80 { font-size: 80% !important; } html.font-scale-90 { font-size: 90% !important; } html.font-scale-100 { font-size: 100% !important; } html.font-scale-110 { font-size: 110% !important; } html.font-scale-120 { font-size: 120% !important; } html.font-scale-130 { font-size: 130% !important; } html.font-scale-140 { font-size: 140% !important; } html.font-scale-150 { font-size: 150% !important; } html.font-scale-160 { font-size: 160% !important; } html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; transition: background-color 0.3s, color 0.3s; } a { color: var(--color-primary); /* Link em verde escuro para melhor legibilidade */ text-decoration: none; transition: color 0.2s; } a:hover, a:focus { color: var(--color-secondary); /* Hover dourado */ text-decoration: underline; } a:focus, button:focus, input:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; } h1, h2, h3, h4, h5, h6 { color: var(--color-primary); line-height: 1.2; margin-bottom: 1rem; font-weight: 700; } /* Skip Link for Screen Readers */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: white; padding: 8px; z-index: 1000; transition: top 0.2s; } .skip-link:focus { top: 0; } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Header & Accesibility Bar */ .a11y-bar { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; display: flex; justify-content: flex-end; gap: 1rem; font-size: 0.85rem; } .a11y-bar button { background: none; border: 1px solid var(--color-border); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); font-family: inherit; transition: all 0.2s; } .a11y-bar button:hover { background-color: var(--color-bg); border-color: var(--color-primary); } .main-header { background-color: var(--color-surface); box-shadow: var(--shadow-sm); padding: 1.5rem 0; } .header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .bra-logo { display: flex; align-items: center; gap: 1rem; } .bra-logo img { max-width: 120px; height: auto; } .bra-logo h1 { font-size: 1.5rem; margin: 0; color: var(--color-primary); } .user-panel { display: flex; align-items: center; gap: 1.5rem; } .user-profile-info { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; } .user-profile-info img { border-radius: 50%; border: 2px solid var(--color-primary); } .user-stats { display: flex; flex-direction: column; } /* Navigation */ .main-nav { background-color: var(--color-primary); color: white; } .main-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; } .main-nav a { color: white; display: block; padding: 1rem 1.5rem; font-weight: 600; transition: background-color 0.2s; } .main-nav a:hover, .main-nav a:focus { background-color: var(--color-primary-hover); text-decoration: none; } /* Main Content Area */ .site-content { margin-top: 2rem; margin-bottom: 4rem; min-height: 50vh; } /* Forms & Inputs */ input[type="text"], input[type="password"], input[type="email"], select, textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-bg); color: var(--color-text); font-family: inherit; margin-bottom: 1rem; } button, input[type="submit"], .btn { background-color: var(--color-primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; font-family: inherit; transition: background-color 0.2s; } button:hover, input[type="submit"]:hover, .btn:hover { background-color: var(--color-primary-hover); } .btn-secondary { background-color: var(--color-secondary) !important; color: var(--color-text) !important; } .btn-secondary:hover { background-color: var(--color-secondary-hover) !important; color: var(--color-text) !important; } /* Lists and Tables (VMS Core overrides) */ table.tablesorter { width: 100%; border-collapse: collapse; margin-bottom: 2rem; background-color: var(--color-surface); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); overflow: hidden; } table.tablesorter th, table.tablesorter td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } table.tablesorter th { background-color: var(--color-bg); font-weight: 700; } /* Alerts */ #messagebox, #error, #success { padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-weight: 500; } #messagebox { background-color: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); } #error { background-color: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); } #success { background-color: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); } /* Footer & Discord Widget */ .main-footer { background-color: var(--color-surface); border-top: 1px solid var(--color-border); padding: 3rem 0; margin-top: auto; } .footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .footer-widget h4 { color: var(--color-text); margin-bottom: 1rem; } .footer-widget ul { list-style: none; } .footer-widget a { color: var(--color-text-muted); } .footer-widget a:hover { color: var(--color-primary); } .footer-bottom { text-align: center; border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 2rem; font-size: 0.9rem; color: var(--color-text-muted); } /* Responsive */ #mobile-menu-toggle { display: none; background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.5); padding: 0.5rem 1rem; font-size: 1rem; border-radius: var(--radius-sm); cursor: pointer; margin: 0.5rem 0; width: 100%; } #mobile-menu-toggle:hover { background: rgba(255, 255, 255, 0.1); } @media screen and (max-width: 768px) { .header-inner { flex-direction: column; align-items: center; text-align: center; } .user-panel { flex-direction: column; width: 100%; } #mobile-menu-toggle { display: block; } #primary-menu { display: none; flex-direction: column; width: 100%; } #primary-menu.active { display: flex; } .main-nav a { text-align: center; } } /* ============================================================ FORUM STYLES ============================================================ */ .forum-container { max-width: 900px; margin: 0 auto; } .forum-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .forum-header h2 { margin-bottom: 0; } .forum-header-actions { display: flex; gap: 0.75rem; align-items: center; } .forum-subtitle { color: var(--color-text-muted); margin-top: -0.5rem; margin-bottom: 1.5rem; } .forum-search { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .forum-search-input { flex: 1; margin-bottom: 0 !important; } .forum-admin-bar { margin-bottom: 1.5rem; } .topic-card { display: flex; gap: 1rem; padding: 1.25rem; margin-bottom: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; } .topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .topic-card.topic-pinned { border-left: 4px solid var(--color-primary); background: linear-gradient(135deg, var(--color-surface) 0%, rgba(76,175,80,0.03) 100%); } .topic-card.topic-closed { opacity: 0.8; } .topic-card-avatar img { border-radius: 50%; border: 2px solid var(--color-border); width: 48px; height: 48px; object-fit: cover; flex-shrink: 0; } .topic-card-body { flex: 1; min-width: 0; } .topic-card-meta-top { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .topic-card-title { font-size: 1.1rem; margin-bottom: 0.25rem; } .topic-card-title a { color: var(--color-text); text-decoration: none; } .topic-card-title a:hover { color: var(--color-primary); } .topic-card-preview { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.5rem; line-height: 1.4; } .topic-card-meta { font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 1rem; } .topic-card-stats { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; justify-content: center; font-size: 0.85rem; color: var(--color-text-muted); flex-shrink: 0; min-width: 60px; } .stat-item { white-space: nowrap; } .badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; } .badge-pinned { background: var(--color-success-bg); color: var(--color-success); } .badge-closed { background: var(--color-error-bg); color: var(--color-error); } .badge-public { background: #E0F2FE; color: #0369A1; } body.high-contrast .badge-public { background: #0C4A6E; color: #BAE6FD; } .badge-private { background: var(--color-warning-bg); color: var(--color-warning); } .badge-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-error); color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 0.7rem; font-weight: 700; margin-left: 0.25rem; } .forum-topic-detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm); } .topic-detail-header { margin-bottom: 1.5rem; } .topic-detail-badges { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .topic-detail-title { font-size: 1.5rem; color: var(--color-text); margin-bottom: 0; } .topic-detail-author { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; } .topic-avatar { border-radius: 50%; border: 3px solid var(--color-primary); width: 56px; height: 56px; object-fit: cover; } .topic-author-info { display: flex; flex-direction: column; gap: 0.15rem; } .topic-date, .topic-stats-inline { font-size: 0.85rem; color: var(--color-text-muted); } .topic-detail-content { line-height: 1.7; margin-bottom: 1.5rem; word-wrap: break-word; } .topic-attachments { border-top: 1px solid var(--color-border); padding-top: 1rem; margin-bottom: 1.5rem; } .topic-attachments h4 { margin-bottom: 0.75rem; color: var(--color-text); } .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .attachment-image img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); transition: transform 0.2s; } .attachment-image img:hover { transform: scale(1.03); } .attachment-name { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.25rem; text-align: center; } .attachment-file { display: flex; align-items: center; padding: 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.9rem; transition: background 0.2s; text-decoration: none; } .attachment-file:hover { background: var(--color-border); text-decoration: none; } .topic-actions-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--color-border); } .btn-action { padding: 0.5rem 1rem; font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: all 0.2s; text-decoration: none; } .btn-action:hover { background: var(--color-border); text-decoration: none; } .like-btn.liked { background: #FEE2E2; border-color: var(--color-error); color: var(--color-error); } body.high-contrast .like-btn.liked { background: #7F1D1D; } .btn-danger, .btn-action.btn-danger { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); } .btn-danger:hover, .btn-action.btn-danger:hover { background: var(--color-error); color: white; } .forum-report-form { margin-top: 1rem; padding: 1rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .forum-report-form textarea { margin-bottom: 0.5rem; } .hidden { display: none !important; } .forum-comments-section { margin-bottom: 2rem; } .comments-title { color: var(--color-text); padding-bottom: 1rem; border-bottom: 2px solid var(--color-primary); margin-bottom: 1.5rem; } .comment-item { display: flex; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: background 0.15s; } .comment-item:hover { background: var(--color-bg); } .comment-avatar img { border-radius: 50%; border: 2px solid var(--color-border); width: 40px; height: 40px; object-fit: cover; } .comment-body { flex: 1; min-width: 0; } .comment-meta { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 0.5rem; } .comment-date { font-size: 0.8rem; color: var(--color-text-muted); } .comment-content { line-height: 1.6; word-wrap: break-word; } .comment-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } .btn-inline { background: none; border: none; padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer; color: var(--color-text-muted); transition: color 0.2s; text-decoration: none; } .btn-inline:hover { color: var(--color-primary); text-decoration: none; } .btn-inline.liked { color: var(--color-error); } .btn-danger-inline:hover { color: var(--color-error) !important; } .forum-comment-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; margin-top: 1.5rem; } .forum-comment-form h4 { color: var(--color-text); margin-bottom: 1rem; } .comment-form-options { margin-bottom: 1rem; } .forum-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; } .forum-checkbox input[type="checkbox"] { width: auto; margin-bottom: 0; } .forum-form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; box-shadow: var(--shadow-sm); } .forum-form-card h2 { color: var(--color-text); margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; } .form-help { font-size: 0.8rem; color: var(--color-text-muted); margin-top: -0.5rem; } .form-actions { display: flex; gap: 1rem; margin-top: 1.5rem; } .btn-primary { background-color: var(--color-primary); color: white; } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .btn-outline:hover { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); } .btn-lg { padding: 1rem 2rem; font-size: 1rem; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; } .notifications-list { display: flex; flex-direction: column; gap: 0.5rem; } .notification-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); border-left: 4px solid var(--color-primary); transition: background 0.15s; } .notification-item:hover { background: var(--color-bg); } .notification-comment { border-left-color: var(--color-secondary); } .notification-like { border-left-color: var(--color-error); } .notification-report { border-left-color: var(--color-warning); } .notification-icon { font-size: 1.5rem; flex-shrink: 0; } .notification-body { flex: 1; } .notification-message { margin-bottom: 0.25rem; } .notification-meta { font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 1rem; } .forum-notif-btn { position: relative; } .admin-section { margin-bottom: 2rem; } .admin-section h3 { color: var(--color-text); border-bottom: 2px solid var(--color-border); padding-bottom: 0.75rem; margin-bottom: 1rem; } .admin-report-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.25rem; margin-bottom: 0.75rem; border-left: 4px solid var(--color-warning); } .admin-report-card.report-reviewed { opacity: 0.7; border-left-color: var(--color-text-muted); } .report-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .report-date { font-size: 0.8rem; color: var(--color-text-muted); } .report-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; } .forum-alert { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; } .forum-alert-error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); } .forum-alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); } .forum-alert-info { background: #E0F2FE; color: #0369A1; border: 1px solid #0369A1; } body.high-contrast .forum-alert-info { background: #0C4A6E; color: #BAE6FD; border-color: #BAE6FD; } .forum-breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } .forum-breadcrumb a { color: var(--color-secondary); } .forum-empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } /* Global paginador inspirado em DataTables */ .pagination { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem; margin: 1.5rem auto; list-style: none; background: rgba(255, 255, 255, 0.08); border-radius: 1rem; } .pagination li { display: inline-flex; } .pagination li a, .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0.55rem 0.9rem; border-radius: 0.75rem; border: 1px solid transparent; font-weight: 600; color: var(--color-text); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pagination li a:hover, .pagination li a:focus { background: rgba(0, 123, 255, 0.12); border-color: rgba(0, 123, 255, 0.25); color: var(--color-primary); } .pagination li.active span { background: var(--color-primary); color: #fff; border-color: transparent; } .pagination li.disabled span, .pagination li.disabled a { color: var(--color-text-muted); opacity: 0.65; cursor: not-allowed; background: transparent; } .pagination li.ellipsis span { padding: 0 0.65rem; min-width: auto; background: transparent; } .pagination li.nav-button a, .pagination li.nav-button span { min-width: auto; padding: 0.55rem 1rem; } @media screen and (max-width: 640px) { .pagination { gap: 0.15rem; } .pagination li a, .pagination li span { min-width: 2rem; padding: 0.45rem 0.75rem; font-size: 0.92rem; } } .forum-pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; flex-wrap: wrap; } .paginator-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .paginator-controls-left { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .paginator-sort, .paginator-page-size { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } .paginator-sort label, .paginator-page-size label { white-space: nowrap; } .paginator-summary { flex: 1 1 100%; font-size: 0.95rem; color: var(--color-text-muted); min-width: 240px; } .paginator-nav { display: flex; justify-content: center; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.75rem; } .paginator-nav .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: 0.55rem 0.9rem; border-radius: 0.75rem; border: 1px solid transparent; color: var(--color-text); text-decoration: none; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .paginator-nav .page-link:hover:not(.disabled), .paginator-nav .page-link:focus-visible:not(.disabled) { background: rgba(0, 123, 255, 0.12); border-color: rgba(0, 123, 255, 0.25); color: var(--color-primary); } .paginator-nav .page-link.active { background: var(--color-primary); color: #fff; } .paginator-nav .page-link.disabled { color: var(--color-text-muted); opacity: 0.6; pointer-events: none; } .paginator-nav .page-numbers .page-link { min-width: auto; padding: 0.55rem 0.85rem; } .paginator-nav .ellipsis { display: inline-flex; align-items: center; padding: 0 0.5rem; color: var(--color-text-muted); } .paginator-info-text { text-align: center; font-size: 0.9rem; color: var(--color-text-muted); margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } @media screen and (max-width: 720px) { .paginator-controls { flex-direction: column; align-items: stretch; } .paginator-summary { order: 3; } } .forum-footer-info { text-align: center; font-size: 0.85rem; color: var(--color-text-muted); } @media screen and (max-width: 768px) { .forum-header { flex-direction: column; align-items: flex-start; } .topic-card { flex-direction: column; } .topic-card-stats { flex-direction: row; justify-content: flex-start; } .topic-detail-author { flex-direction: column; align-items: flex-start; } .topic-actions-bar { flex-direction: column; } .topic-actions-bar .btn-action { width: 100%; text-align: center; } .comment-item { flex-direction: column; } .attachments-grid { grid-template-columns: 1fr; } .form-actions { flex-direction: column; } .report-header { flex-direction: column; align-items: flex-start; } .post-item { flex-direction: column; } .post-header { flex-direction: column; gap: 0.5rem; } } /* Posts Section */ .posts-section-title { color: var(--color-text); padding-bottom: 1rem; border-bottom: 2px solid var(--color-primary); margin-bottom: 1.5rem; } .post-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); } .post-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .post-avatar img { border-radius: 50%; border: 2px solid var(--color-primary); width: 44px; height: 44px; object-fit: cover; } .post-meta { display: flex; flex-direction: column; gap: 0.1rem; } .post-title-label { font-weight: 600; color: var(--color-text); font-size: 0.95rem; } .post-date { font-size: 0.8rem; color: var(--color-text-muted); } .post-content { line-height: 1.7; margin-bottom: 1rem; word-wrap: break-word; } .post-actions { display: flex; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); margin-bottom: 0.5rem; } .post-comments { margin-top: 0.75rem; padding-left: 1rem; border-left: 3px solid var(--color-border); } .post-comments .comment-item { border: none; border-bottom: 1px solid var(--color-border); border-radius: 0; margin-bottom: 0; padding: 0.75rem 0; } .post-comments .comment-item:last-child { border-bottom: none; } .post-comments .comment-avatar img { width: 32px; height: 32px; } .forum-inline-comment-form { margin-top: 0.75rem; padding: 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .forum-inline-comment-form textarea { margin-bottom: 0.5rem; } .inline-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .forum-new-post-section { margin-top: 1.5rem; } .topic-view-link { margin-top: 0.5rem; text-align: center; } .topic-card-stats { align-items: center; } /* Pilot Profile Avatar */ .pilot-avatar-profile { border-radius: 50%; width: 200px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 4px solid var(--color-primary); box-shadow: var(--shadow-md); } @media screen and (max-width: 768px) { .pilot-avatar-profile { width: 150px; } } /* ============================================================ UTILITY CLASSES — replacing inline styles across templates ============================================================ */ /* --- Card / Panel --- */ .card-panel { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 1.5rem; } .card-panel--padded { padding: 2rem; } .card-panel--narrow { max-width: 600px; margin: 0 auto; } .card-panel--centered-text { text-align: center; } /* --- Section headings --- */ .section-heading { margin-bottom: 1rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 0.5rem; } .section-heading--border-muted { border-bottom: 2px solid var(--color-border); padding-bottom: 0.5rem; } /* --- Field / form error messages --- */ .field-error { color: var(--color-error); font-size: 0.85rem; margin-top: -0.5rem; } .field-error--bold { font-weight: 600; } /* --- Grid layouts --- */ .grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .full-span { grid-column: 1 / -1; } @media screen and (max-width: 768px) { .grid-2col { grid-template-columns: 1fr; } } /* --- Flex utilities --- */ .flex-col { display: flex; flex-direction: column; } .flex-col--gap-sm { gap: 0.75rem; } .flex-col--gap-md { gap: 1.5rem; } .flex-wrap-row { display: flex; flex-wrap: wrap; gap: 1rem; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-center { display: flex; align-items: center; justify-content: center; } /* --- Stat rows (key-value pairs) --- */ .stat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .stat-row { display: flex; justify-content: space-between; } .stat-row--separator { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--color-border); } /* --- Profile card header (avatar + info) --- */ .profile-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1.5rem; flex-wrap: wrap; } .profile-header__name { margin-bottom: 0.25rem; color: var(--color-text); } .profile-header__code { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; } .profile-header__rank-badge { margin-top: 0.75rem; } .rank-badge-img { max-height: 25px; } /* --- Highlight values --- */ .value-primary { color: var(--color-primary); font-weight: 600; } .value-secondary { color: var(--color-secondary); } .value-primary--lg { color: var(--color-primary); font-size: 1.3rem; } .value-secondary--lg { color: var(--color-secondary); font-size: 1.3rem; } /* --- Info / promotion box --- */ .info-box { margin-top: 1.5rem; padding: 1rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 0.9rem; text-align: center; } .info-box p { margin: 0; } /* --- Action button blocks --- */ .btn-block { text-align: center; display: block; } .btn-ghost { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); } .btn-ghost:hover { background: var(--color-border); } .btn--submit { padding: 1rem 3rem; font-size: 1.1rem; } .btn--submit-lg { margin-top: 1.5rem; padding: 1.2rem 3rem; font-size: 1.15rem; box-shadow: var(--shadow-md); } .btn--full-width { width: 100%; } /* --- Action bar (bottom nav buttons) --- */ .action-bar { margin-top: 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-muted { background-color: var(--color-text-muted) !important; } /* --- Checkbox / toggle rows --- */ .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .checkbox-row input[type="checkbox"] { width: auto; margin: 0; } .checkbox-row label { font-size: 0.9rem; } /* --- Login card --- */ .login-card { max-width: 400px; margin: 4rem auto; padding: 2rem; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .login-card h2 { text-align: center; color: var(--color-primary); } .login-subtitle { color: var(--color-text-muted); margin-bottom: 2rem; text-align: center; } .login-footer { text-align: center; font-size: 0.95rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .text-muted { color: var(--color-text-muted); } .text-error { color: var(--color-error); } /* --- Registration form --- */ .registration-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: 2rem; max-width: 900px; margin: 0 auto; } .registration-intro { margin-bottom: 2rem; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; } .registration-intro ul { margin-left: 1.5rem; margin-top: 0.5rem; } .section-divider { grid-column: 1 / -1; margin-bottom: 0.5rem; } .section-divider--top { margin-top: 1rem; } .section-divider--separator { grid-column: 1 / -1; margin-top: 1rem; border-top: 1px dashed var(--color-border); padding-top: 1rem; } /* --- Recaptcha / captcha area --- */ .captcha-area { grid-column: 1 / -1; margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; background: var(--color-bg); padding: 1.5rem; border-radius: var(--radius-sm); } .captcha-error { color: var(--color-error); margin-bottom: 1rem; font-weight: 600; } .submit-area { grid-column: 1 / -1; text-align: center; margin-top: 1.5rem; font-size: 0.95rem; } /* --- Contact form --- */ .readonly-field { padding: 0.75rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .flex-form { display: flex; flex-direction: column; gap: 1.25rem; } .contact-footer { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; } /* --- Frontpage: live flights section --- */ .live-flights-card { margin-bottom: 2rem; } .live-flights-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; } .live-stat { font-weight: 600; font-size: 1.1rem; } .live-flights-list { list-style: none; margin-bottom: 1.5rem; font-size: 0.95rem; max-height: 120px; overflow-y: auto; padding: 0.5rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .live-flights-list li { margin-bottom: 0.5rem; border-bottom: 1px dashed var(--color-border); padding-bottom: 0.25rem; } .empty-state { padding: 2.5rem 1rem; text-align: center; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px dashed var(--color-border); color: var(--color-text-muted); } /* --- Users online sidebar --- */ .users-online-count { background-color: #0a0; color: #2bffed; padding: 0 0.3rem; } .listusersonline { list-style-type: none; color: darkgreen; } /* --- Map wrapper --- */ .map-wrapper { position: relative; width: 100%; height: 350px; border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; } .map-wrapper__inner { width: 100%; height: 100%; z-index: 1; } .map-wrapper__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; cursor: pointer; } /* --- Cookie consent popup --- */ .cookieConsentContainer { position: fixed; bottom: 20px; right: 20px; background: var(--color-surface); color: var(--color-text); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-width: 350px; border: 1px solid var(--color-border); z-index: 9999; display: none; } .cookieConsentContainer h3 { margin-bottom: 10px; } .cookieConsentContainer p { font-size: 0.9rem; margin-bottom: 15px; } /* --- Accessibility bar inner --- */ .a11y-bar .container { display: flex; justify-content: flex-end; gap: 0.5rem; } /* --- User quick-links bar in header --- */ .user-quicklinks { margin-top: 0.5rem; font-size: 0.8rem; display: flex; gap: 0.5rem; } .user-quicklinks .logout-link { color: var(--color-error); } /* --- SR-only (visually hidden) --- */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Transfer info panel (fltbook) --- */ .transfer-info { background-color: var(--color-surface); padding: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin: 1rem 0; } /* --- Fltbook wrapper / location accent --- */ .fltbook-location { color: var(--color-error); } .fltbook-separator { margin: 2rem 0; border: none; border-top: 1px solid var(--color-border); } /* --- Chart / stats containers --- */ .chart-container { width: 100%; text-align: center; } /* --- Awards grid --- */ .award-item { text-align: center; max-width: 100px; margin: 0 auto; } .award-item img { max-width: 100%; height: auto; } .award-item__name { font-size: 0.8rem; font-weight: 600; margin-top: 0.5rem; line-height: 1.2; color: var(--color-text-muted); } .responsive-img { max-width: 100%; height: auto; } /* --- Flag / icon with shadow --- */ .flag-img { box-shadow: 0 1px 2px rgba(0,0,0,0.15); } /* --- FAQ legacy table centering --- */ .faq-table-wrap { text-align: center; } .faq-table-wrap table { margin: 0 auto; } /* --- Spoiler toggle (career page) --- */ .spoiler-content { display: none; } /* --- Notification audio player --- */ #audioPlayerContainer { display: none; } #playMusicButton { display: none; } /* --- PIREP Report View --- */ .card-heading { border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; margin-top: 0; margin-bottom: 1rem; color: var(--color-text); } .pirep-status-badge { padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; color: #fff; } .pirep-status-badge--accepted { background: var(--color-success); } .pirep-status-badge--rejected { background: var(--color-error); } .pirep-status-badge--pending { background: var(--color-warning); color: #000; } .pirep-status-badge--inprogress { background: var(--color-primary); } .finance-value--positive { color: var(--color-success); font-weight: 600; font-size: 1.1rem; } .finance-value--negative { color: var(--color-error); font-weight: 600; font-size: 1.1rem; } .finance-detail { font-size: 0.85rem; color: var(--color-text-muted); } .flight-log-terminal { margin-top: 1rem; background: #111; color: #0f0; padding: 1rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem; max-height: 400px; overflow-y: auto; line-height: 1.4; } .pirep-comment { background: var(--color-bg); padding: 1rem; border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); } .pirep-comment__author { font-weight: 600; margin-bottom: 0.25rem; color: var(--color-primary); } .pirep-comment__text { color: var(--color-text); line-height: 1.4; } /* --- Finance tables --- */ .balancesheet-divider { border-bottom: 1px dotted; } .balancesheet-divider td { padding: 1px; } /* --- Cookie consent link --- */ .cookie-privacy-link { text-decoration: underline; } /* --- Leaflet plane icon --- */ .leaflet-plane-icon { font-size: 18px; color: #1B5E20; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } /* --- Briefing / boarding pass page --- */ .metar-box { background: var(--color-bg); padding: 0.75rem; border-radius: var(--radius-sm); font-family: monospace; color: var(--color-primary); font-size: 0.9rem; } .metar-label { font-weight: 600; margin-bottom: 0.25rem; } .metar-section { margin-bottom: 1.5rem; } .metar-link { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; display: inline-block; } .route-box { background: var(--color-bg); padding: 1rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 1.1rem; line-height: 1.5; color: var(--color-text); } .warning-box { background: rgba(255,193,7,0.1); border-left: 4px solid var(--color-warning); padding: 1rem; color: var(--color-text); } .chart-card-link { display: block; border: 1px solid var(--color-border); padding: 0.5rem; background: var(--color-bg); border-radius: var(--radius-sm); } .chart-card-link img { max-width: 100%; height: auto; } .wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; text-align: center; } .wx-grid img { max-width: 100%; height: auto; border: 1px solid var(--color-border); } .wx-subtitle { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem; } .h4-muted { margin-bottom: 1rem; color: var(--color-text-muted); } .notam-link { font-size: 0.85rem; color: var(--color-text-muted); } /* --- Boarding pass --- */ .boarding-pass { max-width: 700px; margin: 2rem auto; } .bp-container { font-family: 'Inter', 'Segoe UI', Tahoma, Verdana, sans-serif; max-width: 800px; margin: 0 auto; background: var(--color-surface, #fff); color: var(--color-text, #333); border: 2px dashed var(--color-border, #ccc); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .bp-header { background: var(--color-primary, #005f30); color: #fff; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; } .bp-header__left { display: flex; align-items: center; gap: 1rem; } .bp-header__logo { height: 40px; background: #fff; padding: 2px; border-radius: 4px; } .bp-header__title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; } .bp-header__right { text-align: right; } .bp-header__label { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; opacity: 0.8; } .bp-header__type { font-size: 1.25rem; font-weight: 700; } .bp-body { padding: 2rem; } .bp-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } .bp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .bp-field-label { font-size: 0.75rem; text-transform: uppercase; color: var(--color-text-muted, #666); font-weight: 600; } .bp-field-value { font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid var(--color-border, #eee); padding-bottom: 0.25rem; } .bp-field-value--flight { font-size: 1.5rem; font-weight: 700; color: var(--color-primary, #005f30); } .bp-field-value--pad { font-size: 1.1rem; font-weight: 700; padding-top: 0.4rem; } .bp-route-row { display: flex; justify-content: space-between; align-items: center; background: var(--color-bg, #f8f9fa); padding: 1rem; border-radius: 8px; } .bp-airport-code { font-size: 1.25rem; font-weight: 700; } .bp-airport-name { font-size: 0.85rem; color: var(--color-text-muted, #666); } .bp-airport-time { font-weight: 700; color: var(--color-error, #d32f2f); margin-top: 0.25rem; } .bp-plane-icon { color: var(--color-border, #ccc); font-size: 2rem; } .bp-sidebar { border-left: 2px dashed var(--color-border, #ccc); padding-left: 2rem; display: flex; flex-direction: column; justify-content: space-between; } .bp-gate-value { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--color-primary, #005f30); } .bp-pnr-value { font-size: 1.25rem; font-weight: 700; letter-spacing: 2px; } .bp-loyalty-value { font-size: 0.9rem; font-weight: 600; } .bp-sidebar-section { margin-top: 1rem; } @media screen and (max-width: 768px) { .bp-grid { grid-template-columns: 1fr; } .bp-sidebar { border-left: none; padding-left: 0; border-top: 2px dashed var(--color-border, #ccc); padding-top: 1.5rem; } } #fleet-table { width: 100%; border-collapse: collapse; margin-top: 1rem; text-align: center; } .fleet-page { display: grid; gap: 1.5rem; } .fleet-intro { color: var(--color-text-muted, #555); max-width: 760px; margin-bottom: 1rem; } .fleet-card { background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 18px; padding: 1.75rem; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05); } .fleet-hero { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; } .fleet-hero-copy { min-width: 280px; flex: 1 1 420px; } .fleet-registration { margin: 0.25rem 0 0.75rem; font-size: clamp(1.75rem, 2.2vw, 2.5rem); letter-spacing: 0.02em; } .fleet-type { margin: 0; color: var(--color-text-muted, #555); font-size: 1rem; } .fleet-hero-visual { min-width: 240px; max-width: 280px; width: 100%; } .fleet-hero-visual img, .fleet-hero-placeholder { width: 100%; border-radius: 18px; min-height: 190px; object-fit: cover; } .fleet-hero-placeholder { display: grid; place-items: center; background: var(--color-border, #f5f5f5); color: var(--color-text-muted, #7a7a7a); text-align: center; padding: 1.5rem; } .fleet-callout { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 0; } .fleet-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; padding: 0.65rem 1rem; background: var(--color-primary, #005f30); color: #ffffff; font-size: 0.9rem; font-weight: 700; } .fleet-meta-grid, .fleet-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; } .fleet-meta-grid div, .fleet-history-grid div { display: grid; gap: 0.25rem; } .fleet-meta-grid dt, .fleet-history-grid dt { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted, #6b7280); text-transform: uppercase; } .fleet-meta-grid dd, .fleet-history-grid dd { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text, #111827); line-height: 1.4; } .fleet-section { margin-top: 1.5rem; } .fleet-section h3 { margin-bottom: 1rem; } .fleet-table { width: 100%; border-collapse: collapse; margin-top: 1rem; text-align: left; } .fleet-table th, .fleet-table td { padding: 0.95rem 1rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .fleet-table th { color: var(--color-text, #111827); font-weight: 700; background: var(--color-bg, #f8fafc); } .fleet-table tbody tr:hover { background: rgba(0, 0, 0, 0.03); } .fleet-revenue.positive { color: var(--color-success, #047857); } .fleet-revenue.negative { color: var(--color-danger, #b91c1c); } .fleet-chart-holder { width: 100%; min-height: 320px; margin-top: 1rem; } .fleet-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .fleet-actions input { border: none; border-radius: 999px; background: var(--color-primary, #005f30); color: #ffffff; padding: 0.85rem 1.25rem; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease; } .fleet-actions input:hover { transform: translateY(-1px); background: var(--color-primary-dark, #044a24); } .fleet-schedule-list { list-style: none; padding: 0; margin: 0; } .fleet-schedule-list li { padding: 1rem; margin-bottom: 0.75rem; background: var(--color-bg, #f8fafc); border-radius: 8px; border-left: 4px solid var(--color-primary, #005f30); line-height: 1.6; color: var(--color-text, #111827); }