/* ===================================================== Ethobyte File Share — Stylesheet Default: dark mode | Toggle: .light-mode on Brand colour: #3fa460 ===================================================== */ /* ── CSS Variables (dark mode defaults) ────────────── */ :root { --eb-primary: #3fa460; --eb-primary-dk: #2d8048; --eb-primary-lt: #5dcc82; --bg-a: #0d1117; --bg-b: #161b22; --card: #1c2433; --card-inner: #202c3d; --border: rgba(63, 164, 96, 0.18); --text: #cdd9e5; --text-strong: #e6edf3; --muted: #7d8b97; --input-bg: #151c27; --input-border: rgba(63, 164, 96, 0.3); --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --transition: 0.25s ease; } html.light-mode { --bg-a: #f4fcf7; --bg-b: #e6f7ec; --card: #ffffff; --card-inner: #f0faf4; --border: rgba(63, 164, 96, 0.22); --text: #1a2e1f; --text-strong: #0e1f13; --muted: #50705a; --input-bg: #ffffff; --input-border: rgba(63, 164, 96, 0.4); --shadow: 0 4px 20px rgba(20, 50, 30, 0.1); } /* ── Smooth theme transitions ───────────────────────── */ body, .glass-card, .site-nav, .site-footer, #gdpr-banner, .file-list-item, .form-control, .btn, .alert { transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } /* ── Layout ─────────────────────────────────────────── */ body { min-height: 100vh; color: var(--text); background: linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%); display: flex; flex-direction: column; } main { flex: 1; } /* ── Typography ─────────────────────────────────────── */ .page-title { font-weight: 700; letter-spacing: 0.02em; color: var(--text-strong); } /* ── Navbar ──────────────────────────────────────────── */ .site-nav { background: rgba(13, 17, 23, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 0.7rem 0; position: sticky; top: 0; z-index: 100; } html.light-mode .site-nav { background: rgba(244, 252, 247, 0.92); } .nav-brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text-strong); font-weight: 700; font-size: 1.05rem; } .nav-brand:hover { color: var(--eb-primary); } .nav-brand .brand-name { color: var(--text-strong); transition: color var(--transition); } .nav-brand:hover .brand-name { color: var(--eb-primary); } .nav-brand .brand-tag { font-size: 0.68rem; font-weight: 500; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; border-left: 1px solid var(--border); padding-left: 0.55rem; } /* ── Theme toggle button ─────────────────────────────── */ .theme-toggle { width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.875rem; line-height: 1; flex-shrink: 0; transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s ease; } .theme-toggle:hover { background: var(--eb-primary); color: #fff; border-color: var(--eb-primary); transform: scale(1.08); } /* ── Glass card ──────────────────────────────────────── */ .glass-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); } /* ── Section icon ────────────────────────────────────── */ .section-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--eb-primary), var(--eb-primary-dk)); flex-shrink: 0; } /* ── Bootstrap primary overrides ────────────────────── */ .btn-primary { --bs-btn-bg: var(--eb-primary); --bs-btn-border-color: var(--eb-primary); --bs-btn-hover-bg: var(--eb-primary-dk); --bs-btn-hover-border-color: var(--eb-primary-dk); --bs-btn-active-bg: var(--eb-primary-dk); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--eb-primary); --bs-btn-border-color: var(--eb-primary); --bs-btn-hover-bg: var(--eb-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--eb-primary); --bs-btn-active-bg: var(--eb-primary-dk); } /* ── Form controls ───────────────────────────────────── */ .form-control { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text); } .form-control:focus { background-color: var(--input-bg); border-color: var(--eb-primary); color: var(--text-strong); box-shadow: 0 0 0 0.2rem rgba(63, 164, 96, 0.22); } .form-control::placeholder { color: var(--muted); opacity: 0.7; } .form-label { color: var(--text); } /* ── File list items ─────────────────────────────────── */ .file-list-item { background: var(--card-inner); border: 1px solid var(--border); border-radius: 0.75rem; } /* ── Mono code ───────────────────────────────────────── */ .mono-code { font-family: "JetBrains Mono", "Consolas", monospace; font-weight: 600; letter-spacing: 0.03em; color: var(--eb-primary-lt); } /* ── Alert overrides ─────────────────────────────────── */ .alert-success { --bs-alert-bg: rgba(63, 164, 96, 0.12); --bs-alert-border-color: rgba(63, 164, 96, 0.35); --bs-alert-color: var(--text-strong); } .alert-danger { --bs-alert-bg: rgba(220, 53, 69, 0.1); --bs-alert-border-color: rgba(220, 53, 69, 0.3); --bs-alert-color: var(--text-strong); } .alert-warning { --bs-alert-bg: rgba(255, 193, 7, 0.1); --bs-alert-border-color: rgba(255, 193, 7, 0.3); --bs-alert-color: var(--text-strong); } /* ── Dividers ────────────────────────────────────────── */ .border-top { border-top-color: var(--border) !important; } /* ── Footer ──────────────────────────────────────────── */ .site-footer { background: var(--bg-a); border-top: 1px solid var(--border); padding: 1.1rem 0; font-size: 0.82rem; color: var(--muted); } .site-footer a { color: var(--eb-primary); text-decoration: none; font-weight: 600; } .site-footer a:hover { color: var(--eb-primary-lt); text-decoration: underline; } .powered-logo { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; } /* ── GDPR consent banner ─────────────────────────────── */ #gdpr-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: var(--card); border-top: 2px solid var(--eb-primary); box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.4); padding: 1rem 0; animation: ebSlideUp 0.3s ease; } #gdpr-banner.hidden { display: none; } @keyframes ebSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }