/* ========================================================= CrowGoal — Design System Dark-first glassmorphism. Original tokens — do not copy the visual language of Goal / ESPN / SofaScore / FotMob / Flashscore / OneFootball / Transfermarkt / The Athletic. ========================================================= */ :root { /* Color */ --cg-bg: #0a0b14; --cg-bg-elevated: #10121e; --cg-glass: rgba(255, 255, 255, 0.045); --cg-glass-strong: rgba(255, 255, 255, 0.075); --cg-border: rgba(255, 255, 255, 0.09); --cg-border-strong: rgba(255, 255, 255, 0.16); --cg-violet: #7c6ff0; --cg-violet-dim: rgba(124, 111, 240, 0.16); --cg-blue: #4ea8de; --cg-teal: #2fd8b6; --cg-teal-dim: rgba(47, 216, 182, 0.14); --cg-amber: #f0a93a; --cg-amber-dim: rgba(240, 169, 58, 0.14); --cg-red: #f0605c; --cg-text-1: #f4f5fa; --cg-text-2: #9a9cb5; --cg-text-3: #5f6180; /* Light theme override (applied via [data-theme="light"] on ) */ --cg-radius-lg: 20px; --cg-radius-md: 14px; --cg-radius-sm: 10px; --cg-font-heading: 'Sora', sans-serif; --cg-font-body: 'Inter', 'IBM Plex Sans Arabic', sans-serif; } [data-theme="light"] { --cg-bg: #f5f6fb; --cg-bg-elevated: #ffffff; --cg-glass: rgba(10, 11, 20, 0.03); --cg-glass-strong: rgba(10, 11, 20, 0.05); --cg-border: rgba(10, 11, 20, 0.08); --cg-border-strong: rgba(10, 11, 20, 0.14); --cg-text-1: #14151f; --cg-text-2: #55576e; --cg-text-3: #8688a0; } * { box-sizing: border-box; } body { background: var(--cg-bg); background-image: radial-gradient(circle at 15% 0%, rgba(124, 111, 240, 0.16), transparent 40%), radial-gradient(circle at 85% 15%, rgba(78, 168, 222, 0.10), transparent 45%); color: var(--cg-text-1); font-family: var(--cg-font-body); margin: 0; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--cg-font-heading); font-weight: 600; margin: 0; } a { color: inherit; text-decoration: none; } /* ---------- Glass card (core building block) ---------- */ .cg-card { background: var(--cg-glass); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-md); padding: 1.25rem 1.5rem; } .cg-card--strong { background: var(--cg-glass-strong); border-color: var(--cg-border-strong); } /* Real glass blur — use sparingly (Core Web Vitals note: backdrop-filter is expensive on low-end mobile; test before shipping widely) */ .cg-card--blur { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ---------- Buttons ---------- */ .cg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--cg-radius-sm); border: 1px solid var(--cg-border); background: var(--cg-glass); color: var(--cg-text-1); font-family: var(--cg-font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .cg-btn:hover { background: var(--cg-glass-strong); border-color: var(--cg-border-strong); } .cg-btn:active { transform: scale(0.98); } .cg-btn--primary { background: linear-gradient(135deg, var(--cg-violet), var(--cg-blue)); border: none; color: #0a0b14; font-weight: 600; } .cg-btn--primary:hover { filter: brightness(1.08); } /* ---------- Badges ---------- */ .cg-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; } .cg-badge--live { color: var(--cg-red); background: rgba(240, 96, 92, 0.12); } .cg-badge--review { color: var(--cg-amber); background: var(--cg-amber-dim); } .cg-badge--published { color: var(--cg-teal); background: var(--cg-teal-dim); } .cg-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cg-red); display: inline-block; box-shadow: 0 0 0 3px rgba(240, 96, 92, 0.18); animation: cg-pulse 1.6s infinite; } @keyframes cg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* ---------- Layout helpers ---------- */ .cg-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .cg-grid { display: grid; gap: 14px; } .cg-grid--2 { grid-template-columns: repeat(2, 1fr); } .cg-grid--3 { grid-template-columns: repeat(3, 1fr); } .cg-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Skeleton loading ---------- */ .cg-skeleton { background: linear-gradient(90deg, var(--cg-glass) 25%, var(--cg-glass-strong) 50%, var(--cg-glass) 75%); background-size: 200% 100%; animation: cg-shimmer 1.4s infinite; border-radius: var(--cg-radius-sm); } @keyframes cg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 900px) { .cg-grid--2, .cg-grid--3, .cg-grid--4 { grid-template-columns: 1fr; } } /* ========================================================= Icons ========================================================= */ .cg-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; } /* ========================================================= Admin shell (sidebar + topbar) — used by every admin page ========================================================= */ .cg-admin-shell { display: flex; min-height: 100vh; } .cg-sidebar { width: 232px; flex-shrink: 0; padding: 24px 16px; border-left: 1px solid var(--cg-border); display: flex; flex-direction: column; gap: 28px; height: 100vh; position: sticky; top: 0; overflow-y: auto; } .cg-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; } .cg-brand-mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--cg-violet), var(--cg-blue)); display: flex; align-items: center; justify-content: center; font-family: var(--cg-font-heading); font-weight: 700; font-size: 15px; color: #0a0b14; } .cg-brand-name { font-family: var(--cg-font-heading); font-weight: 600; font-size: 14.5px; } .cg-brand-tag { font-size: 11px; color: var(--cg-text-3); } .cg-nav-label { font-size: 11px; color: var(--cg-text-3); padding: 0 12px 6px; letter-spacing: .3px; } .cg-nav-group { display: flex; flex-direction: column; gap: 3px; } .cg-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cg-radius-sm); color: var(--cg-text-2); font-size: 13.5px; cursor: pointer; transition: background .15s ease, color .15s ease; } .cg-nav-item:hover { background: var(--cg-glass); color: var(--cg-text-1); } .cg-nav-item.is-active { background: var(--cg-glass-strong); color: var(--cg-text-1); font-weight: 500; } .cg-sidebar-foot { margin-top: auto; border-top: 1px solid var(--cg-border); padding-top: 14px; display: flex; align-items: center; gap: 10px; } .cg-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--cg-teal), var(--cg-blue)); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #0a0b14; font-family: var(--cg-font-heading); } .cg-admin-main { flex: 1; padding: 26px 32px 60px; min-width: 0; } .cg-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .cg-topbar h1 { font-size: 19px; } .cg-topbar .cg-sub { font-size: 12.5px; color: var(--cg-text-2); margin-top: 3px; } .cg-search { display: flex; align-items: center; gap: 8px; background: var(--cg-glass); border: 1px solid var(--cg-border); border-radius: 999px; padding: 8px 14px; width: 240px; color: var(--cg-text-2); } .cg-search input { background: transparent; border: none; outline: none; color: var(--cg-text-1); font-size: 13px; width: 100%; font-family: inherit; } .cg-icon-btn { width: 36px; height: 36px; border-radius: var(--cg-radius-sm); background: var(--cg-glass); border: 1px solid var(--cg-border); display: flex; align-items: center; justify-content: center; color: var(--cg-text-2); cursor: pointer; } @media (max-width: 980px) { .cg-sidebar { display: none; } } /* ========================================================= Form fields (shared by article editor, login, etc.) ========================================================= */ .cg-field { width: 100%; padding: 10px 12px; background: var(--cg-glass); border: 1px solid var(--cg-border); border-radius: 8px; color: var(--cg-text-1); font-family: inherit; font-size: 13.5px; margin-bottom: 10px; } .cg-field:focus { outline: none; border-color: var(--cg-border-strong); } .cg-field-label { font-size: 12px; color: var(--cg-text-2); margin-bottom: 6px; display: block; } /* ========================================================= Toolbar (rich text editor) ========================================================= */ .cg-editor-toolbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .cg-editor-toolbar button { display: flex; align-items: center; gap: 6px; background: var(--cg-glass); border: 1px solid var(--cg-border); color: var(--cg-text-1); border-radius: 8px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; } .cg-editor-toolbar button:hover { background: var(--cg-glass-strong); } .cg-content-editable { min-height: 320px; background: var(--cg-glass); border: 1px solid var(--cg-border); border-radius: var(--cg-radius-md); padding: 18px; font-size: 15px; line-height: 1.75; outline: none; } .cg-content-editable h2 { font-size: 19px; margin: 18px 0 8px; } .cg-content-editable h3 { font-size: 16px; margin: 14px 0 6px; } .cg-content-editable img { max-width: 100%; border-radius: 10px; margin: 10px 0; } .cg-content-editable:empty:before { content: attr(data-placeholder); color: var(--cg-text-3); } /* ========================================================= Cover image dropzone ========================================================= */ .cg-dropzone { border: 1.5px dashed var(--cg-border-strong); border-radius: var(--cg-radius-md); padding: 20px; text-align: center; cursor: pointer; color: var(--cg-text-2); font-size: 13px; transition: border-color .15s ease, background .15s ease; margin-bottom: 12px; } .cg-dropzone:hover, .cg-dropzone.is-dragover { border-color: var(--cg-violet); background: var(--cg-violet-dim); } .cg-dropzone img { max-width: 100%; border-radius: 10px; margin-top: 10px; display: block; }