cryptorugmunch
2512a730ec
- Ghost container deployed on Talos for corporate blog - blog.cryptorugmunch.com DNS + nginx configured - Removed Docusaurus built-in blog (now links to Ghost) - Fixed /build page crash (removed undefined infra reference) - Color palette sampled from actual logos: deep indigo-black + neon green - Premium design: glass navbar, glow shadows, bold headers
256 lines
11 KiB
CSS
256 lines
11 KiB
CSS
/* ── Rug Munch Media — $100K Dark Design System ──────────── */
|
|
/* Palette sampled from actual logos: deep indigo-black + neon green */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
|
|
|
:root {
|
|
--rmi-bg-deepest: #060510;
|
|
--rmi-bg-primary: #08081A;
|
|
--rmi-bg-secondary: #0C0A1E;
|
|
--rmi-bg-card: #0F0D24;
|
|
--rmi-bg-elevated: #12102C;
|
|
--rmi-bg-glass: rgba(8, 8, 26, 0.85);
|
|
--rmi-border: #1A1738;
|
|
--rmi-border-light: #221F44;
|
|
--rmi-text-primary: #F0EEFA;
|
|
--rmi-text-secondary: #8A86A8;
|
|
--rmi-text-muted: #4E4A6E;
|
|
--rmi-accent: #00FF88;
|
|
--rmi-accent-alt: #0DFA84;
|
|
--rmi-accent-glow: rgba(0, 255, 136, 0.15);
|
|
--rmi-accent-subtle: rgba(0, 255, 136, 0.04);
|
|
--rmi-purple-glow: rgba(100, 60, 255, 0.08);
|
|
--rmi-red: #FF4466;
|
|
--rmi-font-body: 'Inter', system-ui, sans-serif;
|
|
--rmi-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
--rmi-radius: 14px;
|
|
--rmi-radius-sm: 8px;
|
|
--rmi-shadow: 0 4px 24px rgba(0,0,0,0.5);
|
|
--rmi-shadow-lg: 0 12px 48px rgba(0,0,0,0.7);
|
|
--rmi-shadow-glow: 0 0 40px rgba(0,255,136,0.06);
|
|
--rmi-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* ── Base ────────────────────────────────────────────────── */
|
|
html {
|
|
background: var(--rmi-bg-deepest);
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
body {
|
|
background: var(--rmi-bg-deepest);
|
|
color: var(--rmi-text-primary);
|
|
font-family: var(--rmi-font-body);
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
/* ── Navbar — Deep Glass ────────────────────────────────── */
|
|
.navbar {
|
|
background: var(--rmi-bg-glass);
|
|
backdrop-filter: blur(28px) saturate(200%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(200%);
|
|
border-bottom: 1px solid rgba(0, 255, 136, 0.04);
|
|
height: 58px;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
.navbar__brand { font-weight: 700; letter-spacing: -0.02em; }
|
|
.navbar__title { font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; }
|
|
.navbar__link {
|
|
font-weight: 500; font-size: 0.84rem; color: var(--rmi-text-secondary) !important;
|
|
padding: 8px 14px; border-radius: 6px; transition: all var(--rmi-transition);
|
|
}
|
|
.navbar__link:hover, .navbar__link--active {
|
|
color: var(--rmi-accent) !important;
|
|
background: var(--rmi-accent-subtle);
|
|
}
|
|
|
|
/* ── Typography — Bold, Modern ──────────────────────────── */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--rmi-font-body);
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
color: var(--rmi-text-primary);
|
|
line-height: 1.12;
|
|
}
|
|
h1 { font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; }
|
|
h2 { font-size: 2rem; font-weight: 800; }
|
|
h3 { font-size: 1.35rem; font-weight: 700; }
|
|
h4 { font-size: 1.1rem; font-weight: 600; }
|
|
p { color: var(--rmi-text-secondary); line-height: 1.7; }
|
|
|
|
/* ── Links ─────────────────────────────────────────────── */
|
|
a { color: var(--rmi-accent); text-decoration: none; transition: all var(--rmi-transition); }
|
|
a:hover { color: var(--rmi-accent-alt); text-decoration: underline; text-underline-offset: 4px; }
|
|
|
|
/* ── Code ──────────────────────────────────────────────── */
|
|
code {
|
|
font-family: var(--rmi-font-mono) !important;
|
|
background: var(--rmi-bg-elevated);
|
|
border: 1px solid var(--rmi-border);
|
|
border-radius: 5px; padding: 2px 8px;
|
|
font-size: 0.85em; color: var(--rmi-accent);
|
|
}
|
|
pre {
|
|
background: var(--rmi-bg-elevated) !important;
|
|
border: 1px solid var(--rmi-border);
|
|
border-radius: var(--rmi-radius);
|
|
box-shadow: var(--rmi-shadow);
|
|
}
|
|
pre code { background: none; border: none; padding: 0; color: var(--rmi-text-primary); }
|
|
|
|
/* ── Cards — Glass Elevated ────────────────────────────── */
|
|
.article-card {
|
|
background: var(--rmi-bg-card);
|
|
border: 1px solid var(--rmi-border);
|
|
border-radius: var(--rmi-radius);
|
|
transition: all var(--rmi-transition);
|
|
box-shadow: var(--rmi-shadow);
|
|
}
|
|
.article-card:hover {
|
|
border-color: var(--rmi-accent);
|
|
box-shadow: var(--rmi-shadow-lg), var(--rmi-shadow-glow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ── Tables ────────────────────────────────────────────── */
|
|
table {
|
|
border-collapse: separate; border-spacing: 0; width: 100%;
|
|
border: 1px solid var(--rmi-border); border-radius: var(--rmi-radius); overflow: hidden;
|
|
}
|
|
thead th {
|
|
background: var(--rmi-bg-elevated); color: var(--rmi-text-primary);
|
|
font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
|
|
letter-spacing: 0.07em; padding: 14px 20px; border-bottom: 1px solid var(--rmi-border);
|
|
}
|
|
tbody td {
|
|
background: var(--rmi-bg-card); color: var(--rmi-text-secondary);
|
|
padding: 13px 20px; border-bottom: 1px solid rgba(26,23,56,0.4); font-size: 0.88rem;
|
|
}
|
|
tbody tr:last-child td { border-bottom: none; }
|
|
tbody tr:hover td { background: var(--rmi-bg-elevated); }
|
|
|
|
/* ── Footer ────────────────────────────────────────────── */
|
|
.footer {
|
|
background: var(--rmi-bg-secondary) !important;
|
|
border-top: 1px solid rgba(0,255,136,0.03);
|
|
padding: 60px 0 40px;
|
|
}
|
|
.footer__title {
|
|
font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
|
|
letter-spacing: 0.09em; color: var(--rmi-text-primary); margin-bottom: 18px;
|
|
}
|
|
.footer__item { margin-bottom: 8px; }
|
|
.footer__link-item {
|
|
color: var(--rmi-text-secondary); font-size: 0.82rem; transition: color var(--rmi-transition);
|
|
}
|
|
.footer__link-item:hover { color: var(--rmi-accent); text-decoration: none; }
|
|
.footer__copyright {
|
|
color: var(--rmi-text-muted); font-size: 0.76rem;
|
|
margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rmi-border);
|
|
}
|
|
|
|
/* ── Scrollbar ──────────────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 5px; }
|
|
::-webkit-scrollbar-track { background: var(--rmi-bg-deepest); }
|
|
::-webkit-scrollbar-thumb { background: var(--rmi-border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--rmi-accent); }
|
|
|
|
/* ── Selection / Focus ──────────────────────────────────── */
|
|
::selection { background: rgba(0,255,136,0.22); color: #fff; }
|
|
:focus-visible { outline: 2px solid var(--rmi-accent); outline-offset: 4px; border-radius: 4px; }
|
|
|
|
/* ── Reduced Motion ─────────────────────────────────────── */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
|
}
|
|
|
|
/* ── Sidebar ────────────────────────────────────────────── */
|
|
.menu__link {
|
|
color: var(--rmi-text-secondary); font-size: 0.85rem; border-radius: 6px;
|
|
transition: all var(--rmi-transition);
|
|
}
|
|
.menu__link:hover { color: var(--rmi-text-primary); background: var(--rmi-bg-elevated); }
|
|
.menu__link--active { color: var(--rmi-accent) !important; background: var(--rmi-accent-subtle); }
|
|
.theme-doc-sidebar-container { border-right: 1px solid var(--rmi-border) !important; }
|
|
|
|
/* ── Buttons — Premium Feel ─────────────────────────────── */
|
|
.rmi-btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
font-weight: 600; font-size: 0.88rem;
|
|
padding: 14px 32px; border-radius: var(--rmi-radius-sm);
|
|
cursor: pointer; transition: all var(--rmi-transition);
|
|
text-decoration: none !important; font-family: var(--rmi-font-body);
|
|
letter-spacing: -0.01em; position: relative; overflow: hidden;
|
|
}
|
|
.rmi-btn--primary {
|
|
background: var(--rmi-accent); color: #000 !important; border: none;
|
|
box-shadow: 0 0 0 0 rgba(0,255,136,0);
|
|
}
|
|
.rmi-btn--primary:hover {
|
|
background: #1aff94; transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(0,255,136,0.28);
|
|
}
|
|
.rmi-btn--primary:active { transform: translateY(0); box-shadow: 0 2px 12px rgba(0,255,136,0.2); }
|
|
.rmi-btn--secondary {
|
|
background: transparent; color: var(--rmi-text-primary);
|
|
border: 1px solid var(--rmi-border-light);
|
|
}
|
|
.rmi-btn--secondary:hover {
|
|
border-color: var(--rmi-accent); color: var(--rmi-accent);
|
|
box-shadow: 0 0 20px rgba(0,255,136,0.06);
|
|
}
|
|
.rmi-btn--ghost {
|
|
background: transparent; color: var(--rmi-text-secondary);
|
|
border: none; padding: 8px 16px;
|
|
}
|
|
.rmi-btn--ghost:hover { color: var(--rmi-accent); }
|
|
|
|
/* ── Badges ──────────────────────────────────────────────── */
|
|
.rmi-badge {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: 0.09em; padding: 5px 12px; border-radius: 5px;
|
|
}
|
|
.rmi-badge--live {
|
|
background: rgba(0,255,136,0.06); color: var(--rmi-accent);
|
|
border: 1px solid rgba(0,255,136,0.15);
|
|
}
|
|
.rmi-badge--coming {
|
|
background: rgba(0,255,136,0.03); color: var(--rmi-accent);
|
|
border: 1px solid rgba(0,255,136,0.10);
|
|
}
|
|
|
|
/* ── Live Dot ───────────────────────────────────────────── */
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.3; transform: scale(0.75); }
|
|
}
|
|
.rmi-status-live {
|
|
display: inline-block; width: 6px; height: 6px;
|
|
background: var(--rmi-accent); border-radius: 50%;
|
|
box-shadow: 0 0 10px var(--rmi-accent);
|
|
animation: pulse 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Nav Icon ────────────────────────────────────────────── */
|
|
.navbar-forgejo-link::before { content: '⊞'; margin-right: 5px; font-weight: 700; }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────── */
|
|
@media (max-width: 996px) {
|
|
h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; }
|
|
.navbar { height: 52px; } .footer { padding: 44px 0 32px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; }
|
|
body { font-size: 14px; }
|
|
.rmi-btn { padding: 11px 22px; font-size: 0.82rem; }
|
|
}
|
|
|
|
/* ── Print ──────────────────────────────────────────────── */
|
|
@media print {
|
|
.navbar, .footer, .theme-doc-sidebar-container { display: none; }
|
|
body { background: #fff; color: #000; }
|
|
}
|