/* 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); } .forum-pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; flex-wrap: wrap; } .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: 620px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 4px solid var(--color-primary); box-shadow: var(--shadow-md); height: auto; cursor: pointer; transition: opacity 0.2s ease; } .pilot-avatar-profile:hover { opacity: 0.9; } @media screen and (max-width: 1024px) { .pilot-avatar-profile { width: 250px; } } @media screen and (max-width: 480px) { .pilot-avatar-profile { width: 50vw; min-width: 160px; } } .avatar-lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; } /* Lightbox body container */ .lightbox-body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Expanded image */ .lightbox-content { max-width: 90%; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); animation: zoomIn 0.25s ease; } /* Close button (X) */ button.lightbox-close { background: none; border: none; position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s; line-height: 1; z-index: 10000; } button.lightbox-close:hover { color: var(--color-primary, #ddd); } button.lightbox-close:focus { outline: 2px solid var(--color-primary, #bbb); } /* Smooth zoom animation */ @keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ============================================================ 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 */ .fleet-intro { color: var(--color-text-muted); margin-bottom: 2rem; max-width: 800px; line-height: 1.6; } /* Cards */ .fleet-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-md); } /* Hero Section */ .fleet-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; } .fleet-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--color-primary); margin-bottom: 0.5rem; } .fleet-registration { font-size: 2.2rem; font-weight: 800; margin-bottom: 0.5rem; } .fleet-type { color: var(--color-text-muted); margin-bottom: 1rem; font-size: 1rem; } .fleet-callout { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .fleet-pill { display: inline-flex; align-items: center; padding: 0.75rem 1.25rem; border-radius: 999px; background: rgba(27, 94, 32, 0.08); color: var(--color-primary); font-weight: 600; font-size: 0.95rem; } .fleet-hero-visual img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-sm); display: block; } .fleet-hero-placeholder { min-height: 260px; border: 2px dashed var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: #fcfcfc; color: var(--color-text-muted); text-align: center; padding: 1rem; } /* Meta Grid */ .fleet-meta-grid, .fleet-history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .fleet-meta-grid div, .fleet-history-grid div { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; background: #fcfcfc; } dt { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.5rem; } dd { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text); } /* Table */ .fleet-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-md); overflow: hidden; } .fleet-table thead { background: rgba(27, 94, 32, 0.04); } .fleet-table th { text-align: left; padding: 1rem; font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .fleet-table td { padding: 1rem; border-bottom: 1px solid #f1f1f1; font-size: 0.95rem; vertical-align: middle; } .fleet-table tr:hover { background: rgba(27, 94, 32, 0.02); } .fleet-table a { color: var(--color-primary); text-decoration: none; font-weight: 600; } .fleet-table a:hover { color: var(--color-primary-hover); text-decoration: underline; } /* Revenue */ .fleet-revenue.positive { color: var(--color-success); font-weight: 700; } .fleet-revenue.negative { color: var(--color-error); font-weight: 700; } /* Schedule List */ .fleet-schedule-list { list-style: none; padding: 0; margin: 0; } .fleet-schedule-list li { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fcfcfc; margin-bottom: 1rem; line-height: 1.6; } /* Chart */ .fleet-chart-holder { min-height: 320px; margin-top: 1.5rem; border-radius: var(--radius-md); overflow: hidden; } /* Actions */ .fleet-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .fleet-actions input[type="button"] { border: none; background: var(--color-primary); color: white; padding: 0.9rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; cursor: pointer; transition: 0.2s ease; box-shadow: var(--shadow-sm); } .fleet-actions input[type="button"]:hover { background: var(--color-primary-hover); transform: translateY(-1px); } /* Responsive */ @media (max-width: 992px) { .fleet-hero { grid-template-columns: 1fr; } .fleet-registration { font-size: 1.8rem; } } @media (max-width: 768px) { .fleet-card { padding: 1.25rem; } .fleet-table { display: block; overflow-x: auto; white-space: nowrap; } .fleet-actions { flex-direction: column; } .fleet-actions input[type="button"] { width: 100%; } } @media (max-width: 480px) { .fleet-meta-grid, .fleet-history-grid { grid-template-columns: 1fr; } .fleet-registration { font-size: 1.5rem; } .fleet-pill { width: 100%; justify-content: center; } } /* ========================================================================= NEWS SHARE ICONS & IMAGES ========================================================================= */ .news-share-section { margin: 1.5rem 0; padding: 1rem; background-color: var(--card-bg, #ffffff); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .news-share-container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .share-label { font-weight: 600; color: var(--text-color, #333); margin-right: 8px; font-size: 0.95rem; } .share-btn { background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease-in-out; } .share-btn:hover, .share-btn:focus { transform: scale(1.15); outline: none; } .share-btn img { width: 32px; height: 32px; object-fit: contain; display: block; } /* For Meta icons only */ .share-btn.meta-icon img { width: 48px; height: 48px; } /* Limit images inside the news body so they don't break the layout */ #newsBody img { max-height: 300px; width: 100%; object-fit: cover; border-radius: 8px; margin: 1rem 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } @media (max-width: 576px) { .news-share-container { justify-content: center; } #newsBody img { max-height: 250px; } }