/*
* Twin Eagles Radio — Facebook-Style Theme
* Scarlet #D00000 · Blue #1877F2 · Black #1A1A1A · White #FFFFFF
*
* Add to every page :
*
*
* Layout class reference at bottom of this file.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap');
/* ── 1. CUSTOM PROPERTIES ──────────────────────────────────── */
:root {
/* Scarlet — station brand */
--red: #D00000;
--red-dk: #A30000;
--red-lt: #E83535;
--red-bg: rgba(208,0,0,0.07);
--red-bdr: rgba(208,0,0,0.22);
--red-glow: rgba(208,0,0,0.3);
/* Blue — interactive / links (Facebook convention) */
--blue: #1877F2;
--blue-dk: #1558B0;
--blue-lt: #E7F0FD;
--blue-bg: rgba(24,119,242,0.08);
--blue-bdr: rgba(24,119,242,0.3);
/* Black / neutrals */
--black: #1A1A1A;
--black-soft: #2D2D2D;
--white: #FFFFFF;
/* Facebook's page background */
--bg: #F0F2F5;
--surface: #FFFFFF;
--surface-2: #F0F2F5;
--border: #CED0D4;
--border-lt: #E4E6EB;
/* Text scale */
--text: #1A1A1A;
--text-mid: #65676B;
--text-dim: #8A8D91;
/* Semantic */
--success-c: #2a7a2a;
--success-bg: rgba(42,122,42,0.07);
--success-bdr: #2a7a2a;
--error-c: #A30000;
--error-bg: rgba(163,0,0,0.07);
--error-bdr: #D00000;
--info-c: #1558B0;
--info-bg: rgba(24,119,242,0.07);
--info-bdr: #1877F2;
/* Layout */
--topbar-h: 56px;
--sidebar-w: 260px;
--content-max: 680px;
--rail-w: 320px;
--card-radius: 8px;
--card-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
--card-shadow-hover: 0 2px 8px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
/* Fonts */
--font-head: 'Lora', Georgia, 'Times New Roman', serif;
--font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}
/* ── 2. BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
color: var(--text);
line-height: 1.25;
}
a {
color: var(--blue);
text-decoration: none;
transition: color 0.15s;
}
a:hover { color: var(--blue-dk); text-decoration: underline; }
img { max-width: 100%; }
::selection { background: var(--red); color: #fff; }
/* ── 3. TOP NAVIGATION BAR ──────────────────────────────────── */
.ter-topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: var(--topbar-h);
background: var(--black);
display: flex;
align-items: center;
padding: 0 12px;
gap: 8px;
z-index: 1000;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.ter-topbar-left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.ter-logo {
font-family: var(--font-head);
font-size: 1.15rem;
font-weight: 700;
font-style: italic;
color: var(--red);
text-decoration: none;
white-space: nowrap;
transition: opacity 0.15s;
}
.ter-logo:hover { opacity: 0.85; text-decoration: none; color: var(--red); }
.ter-topbar-search {
flex-shrink: 0;
width: 220px;
}
.ter-search-input {
width: 100%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
padding: 7px 16px;
color: #fff;
font-family: var(--font-body);
font-size: 0.88rem;
outline: none;
transition: background 0.2s, border-color 0.2s;
}
.ter-search-input::placeholder { color: rgba(255,255,255,0.45); }
.ter-search-input:focus {
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.25);
}
.ter-topbar-center {
flex: 1;
display: flex;
justify-content: center;
gap: 4px;
}
.ter-topbar-tab {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 28px;
border-radius: 8px;
color: rgba(255,255,255,0.6);
cursor: pointer;
text-decoration: none;
font-size: 0.88rem;
font-weight: 500;
border-bottom: 3px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.ter-topbar-tab:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.88);
text-decoration: none;
}
.ter-topbar-tab.active {
color: var(--red);
border-bottom-color: var(--red);
}
.ter-topbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.ter-topbar-icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.15s;
text-decoration: none;
}
.ter-topbar-icon-btn:hover {
background: rgba(255,255,255,0.18);
color: #fff;
}
.ter-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--red);
border: 2px solid rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 0.9rem;
font-weight: 700;
color: #fff;
cursor: pointer;
flex-shrink: 0;
text-decoration: none;
}
/* ── 4. PAGE BODY OFFSET ────────────────────────────────────── */
.ter-page {
padding-top: var(--topbar-h);
min-height: 100vh;
background: var(--bg);
}
/* ── 5. LAYOUT ──────────────────────────────────────────────── */
.ter-layout {
display: flex;
gap: 16px;
max-width: 1280px;
margin: 0 auto;
padding: 16px 16px 40px;
align-items: flex-start;
}
.ter-sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
position: sticky;
top: calc(var(--topbar-h) + 16px);
max-height: calc(100vh - var(--topbar-h) - 32px);
overflow-y: auto;
}
/* Hide scrollbar on sidebar */
.ter-sidebar::-webkit-scrollbar { display: none; }
.ter-sidebar { -ms-overflow-style: none; scrollbar-width: none; }
.ter-main {
flex: 1;
min-width: 0;
max-width: var(--content-max);
}
.ter-right-rail {
width: var(--rail-w);
flex-shrink: 0;
position: sticky;
top: calc(var(--topbar-h) + 16px);
}
/* ── 6. SIDEBAR NAVIGATION ──────────────────────────────────── */
.ter-nav-section {
background: var(--surface);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
padding: 8px;
margin-bottom: 12px;
}
.ter-nav-section-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
padding: 8px 12px 4px;
font-family: var(--font-body);
}
.ter-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
color: var(--text);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
transition: background 0.12s;
font-family: var(--font-body);
}
.ter-nav-item:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
.ter-nav-item.active {
background: var(--red-bg);
color: var(--red);
font-weight: 600;
}
.ter-nav-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-mid);
transition: background 0.12s, color 0.12s;
}
.ter-nav-item.active .ter-nav-icon {
background: var(--red-bg);
color: var(--red);
}
.ter-nav-item:hover .ter-nav-icon {
background: var(--border-lt);
}
/* ── 7. CARDS ───────────────────────────────────────────────── */
.ter-card {
background: var(--surface);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
margin-bottom: 16px;
overflow: hidden;
transition: box-shadow 0.2s;
}
.ter-card:hover { box-shadow: var(--card-shadow-hover); }
.ter-card-header {
padding: 16px 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.ter-card-title {
font-family: var(--font-head);
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.ter-card-body { padding: 16px; }
.ter-card-divider {
height: 1px;
background: var(--border-lt);
margin: 0 16px;
}
/* Player card — dark variant */
.ter-card-dark {
background: var(--black);
border-top: 3px solid var(--red);
}
.ter-card-dark .ter-card-title { color: #fff; }
.ter-card-dark .ter-card-body { color: rgba(255,255,255,0.85); }
/* Accent card — scarlet */
.ter-card-accent {
background: var(--red);
color: #fff;
}
.ter-card-accent .ter-card-title { color: #fff; }
.ter-card-accent .ter-card-body { color: rgba(255,255,255,0.9); }
/* ── 8. BUTTONS ─────────────────────────────────────────────── */
.ter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border-radius: 6px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
border: none;
transition: background 0.15s, box-shadow 0.2s, transform 0.1s;
text-decoration: none;
white-space: nowrap;
}
.ter-btn:active { transform: scale(0.98); }
.ter-btn-red {
background: var(--red);
color: #fff;
}
.ter-btn-red:hover {
background: var(--red-dk);
box-shadow: 0 2px 8px var(--red-glow);
color: #fff;
text-decoration: none;
}
.ter-btn-blue {
background: var(--blue);
color: #fff;
}
.ter-btn-blue:hover {
background: var(--blue-dk);
color: #fff;
text-decoration: none;
}
.ter-btn-ghost {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
}
.ter-btn-ghost:hover {
background: var(--border-lt);
color: var(--text);
text-decoration: none;
}
.ter-btn-outline-red {
background: transparent;
color: var(--red);
border: 1.5px solid var(--red);
}
.ter-btn-outline-red:hover {
background: var(--red-bg);
color: var(--red);
text-decoration: none;
}
.ter-btn-lg { padding: 12px 24px; font-size: 1rem; border-radius: 6px; }
.ter-btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.ter-btn-full { width: 100%; }
/* ── 9. FORMS ───────────────────────────────────────────────── */
.ter-form-group { margin-bottom: 12px; }
.ter-label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-mid);
margin-bottom: 6px;
}
.ter-input {
width: 100%;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
font-family: var(--font-body);
font-size: 0.93rem;
color: var(--text);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.ter-input::placeholder { color: var(--text-dim); }
.ter-input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-bg);
}
.ter-input:focus.ter-input-red { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
/* ── 10. ALERTS ─────────────────────────────────────────────── */
.ter-alert {
padding: 12px 16px;
border-radius: 6px;
font-size: 0.88rem;
border-left: 3px solid;
line-height: 1.5;
margin-bottom: 12px;
}
.ter-alert-error { background: var(--error-bg); color: var(--error-c); border-color: var(--error-bdr); }
.ter-alert-success { background: var(--success-bg); color: var(--success-c); border-color: var(--success-bdr); }
.ter-alert-info { background: var(--info-bg); color: var(--info-c); border-color: var(--info-bdr); }
/* ── 11. TABLES ─────────────────────────────────────────────── */
.ter-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 0.9rem;
}
.ter-table thead th {
background: var(--black);
color: #fff;
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.ter-table thead th:first-child { border-radius: 8px 0 0 0; }
.ter-table thead th:last-child { border-radius: 0 8px 0 0; }
.ter-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-lt); }
.ter-table tbody tr:last-child td { border-bottom: none; }
.ter-table tbody tr:hover { background: var(--blue-lt); }
/* ── 12. RADIO PLAYER BAR ───────────────────────────────────── */
#player-bar, .player-bar, #radio-player {
background: var(--black);
border-top: 2px solid var(--red);
color: #fff;
font-family: var(--font-body);
}
#player-bar a, .player-bar a { color: rgba(255,255,255,0.85); }
#player-bar a:hover, .player-bar a:hover { color: #fff; text-decoration: none; }
/* ── 13. ADMIN STYLES ───────────────────────────────────────── */
.admin-nav, .admin-sidebar, #admin-nav {
background: #111111;
color: #fff;
font-family: var(--font-body);
}
.admin-nav a, .admin-sidebar a, #admin-nav a { color: rgba(255,255,255,0.78); font-family: var(--font-body); }
.admin-nav a:hover, .admin-sidebar a:hover, #admin-nav a:hover {
color: #fff;
text-decoration: none;
}
.admin-nav .active, .admin-sidebar .active, #admin-nav .active {
color: var(--red);
background: rgba(208,0,0,0.12);
border-left: 3px solid var(--red);
}
/* Admin top bar override */
.admin-header, #admin-header {
background: var(--black);
border-bottom: 2px solid var(--red);
font-family: var(--font-body);
color: #fff;
}
/* ── 14. GAME STYLES ────────────────────────────────────────── */
.game-card, .game-tile {
background: var(--surface);
border: 1px solid var(--border-lt);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.game-score, .score-display {
color: var(--red);
font-family: var(--font-head);
}
.leaderboard-rank-1 { color: var(--red); }
.leaderboard-rank-2 { color: var(--text-mid); }
.leaderboard-rank-3 { color: var(--blue); }
/* ── 15. UNIVERSAL OVERRIDES ─────────────────────────────────── */
/* Legacy classes from previous themes — remapped */
.card, .panel {
background: var(--surface);
border: 1px solid var(--border-lt);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
nav, .nav, .navbar {
background: var(--black);
color: #fff;
font-family: var(--font-body);
}
nav a, .nav a, .navbar a { color: rgba(255,255,255,0.8); }
nav a:hover, .nav a:hover { color: #fff; text-decoration: none; }
nav a.active, .nav a.active { color: var(--red); }
table { font-family: var(--font-body); border-collapse: collapse; }
thead th { background: var(--black); color: #fff; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--blue-lt); }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-bg);
outline: none;
}
button[type="submit"], input[type="submit"], .btn-primary {
background: var(--red);
color: #fff;
font-family: var(--font-body);
border: none;
cursor: pointer;
border-radius: 6px;
}
button[type="submit"]:hover, input[type="submit"]:hover, .btn-primary:hover {
background: var(--red-dk);
}
/* ── 16. SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
/* ── 17. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
.ter-right-rail { display: none; }
}
@media (max-width: 768px) {
.ter-sidebar { display: none; }
.ter-topbar-center { display: none; }
.ter-topbar-search { display: none; }
.ter-layout { padding: 12px 8px 40px; }
}
/* ── LAYOUT QUICK REFERENCE ──────────────────────────────────
Paste this structure into your page templates:
─────────────────────────────────────────────────────────── */