302 lines
6.8 KiB
CSS
302 lines
6.8 KiB
CSS
/**
|
|
* UGH.im — Bloodlust Edition
|
|
* NESticle / Genecyst / Bloodlust Software aesthetic
|
|
* Dark, polarizing, 90s emulator skin vibe
|
|
*/
|
|
|
|
:root {
|
|
--bl-bg: #0a0808;
|
|
--bl-bg-panel: #0d0a0a;
|
|
--bl-bg-inner: #0f0c0c;
|
|
--bl-border-light: #2a2525;
|
|
--bl-border-dark: #1a1616;
|
|
--bl-green: #00cc66;
|
|
--bl-green-dim: #008844;
|
|
--bl-red: #cc3333;
|
|
--bl-red-dim: #991111;
|
|
--bl-text: #c0c0c0;
|
|
--bl-text-dim: #808080;
|
|
--bl-mono: "Share Tech Mono", "VT323", "Courier New", monospace;
|
|
--bl-display: "VT323", "Share Tech Mono", monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background: var(--bl-bg);
|
|
color: var(--bl-text);
|
|
font-family: var(--bl-mono);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a {
|
|
color: var(--bl-green);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover { color: #33ff99; }
|
|
|
|
/* CRT / Scanline overlay */
|
|
.scanlines {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(0, 0, 0, 0.15) 2px,
|
|
rgba(0, 0, 0, 0.15) 4px
|
|
);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.crt-glow {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
|
|
}
|
|
|
|
/* Main frame - window border */
|
|
.frame {
|
|
max-width: 680px;
|
|
margin: 1rem auto;
|
|
border: 4px solid var(--bl-border-light);
|
|
border-style: outset;
|
|
box-shadow:
|
|
inset 2px 2px 0 rgba(255, 255, 255, 0.05),
|
|
inset -2px -2px 0 rgba(0, 0, 0, 0.5),
|
|
0 0 0 2px var(--bl-border-dark);
|
|
background: var(--bl-bg-panel);
|
|
}
|
|
|
|
/* Title bar - NESticle-style */
|
|
.title-bar {
|
|
background: linear-gradient(180deg, #1a1616 0%, #0d0a0a 100%);
|
|
border-bottom: 2px solid var(--bl-red-dim);
|
|
padding: 0.4rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-family: var(--bl-display);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.title-text { color: var(--bl-green); letter-spacing: 0.05em; }
|
|
.title-ver { color: var(--bl-text-dim); font-size: 0.9rem; }
|
|
.title-skull { color: var(--bl-red); }
|
|
|
|
/* Window panels - chunky 3D inset */
|
|
.win-panel {
|
|
margin: 0.5rem;
|
|
border: 3px solid var(--bl-border-light);
|
|
border-style: inset;
|
|
background: var(--bl-bg-inner);
|
|
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.panel-title {
|
|
background: linear-gradient(90deg, var(--bl-red-dim), #1a1010);
|
|
color: var(--bl-green);
|
|
font-family: var(--bl-display);
|
|
font-size: 1rem;
|
|
padding: 0.3rem 0.75rem;
|
|
border-bottom: 1px solid var(--bl-border-dark);
|
|
}
|
|
|
|
.panel-inner { padding: 1rem; }
|
|
|
|
/* Header */
|
|
header.win-panel .panel-inner { text-align: center; }
|
|
|
|
header h1 {
|
|
font-family: var(--bl-display);
|
|
font-size: 2.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.bl-red { color: var(--bl-red); }
|
|
.bl-green { color: var(--bl-green); }
|
|
.bl-skull { color: var(--bl-red); }
|
|
|
|
.tagline { color: var(--bl-text-dim); font-size: 0.95rem; margin: 0.2rem 0; }
|
|
.tagline.sub { font-style: italic; }
|
|
|
|
.header-buttons { margin-top: 0.75rem; }
|
|
.header-buttons .bl-btn { margin: 0 0.25rem; }
|
|
|
|
/* Nav */
|
|
.nav-panel .panel-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-link {
|
|
color: var(--bl-text-dim);
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.nav-link:hover { color: var(--bl-green); }
|
|
|
|
/* Meter / stats bar */
|
|
.meter-panel .panel-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-family: var(--bl-mono);
|
|
}
|
|
|
|
.meter-date { color: var(--bl-text-dim); font-size: 0.9rem; }
|
|
|
|
/* Bl box - info panels */
|
|
.bl-box {
|
|
border: 2px solid var(--bl-border-light);
|
|
border-style: inset;
|
|
padding: 0.75rem;
|
|
margin: 1rem 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.box-title {
|
|
color: var(--bl-red);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.bl-big { color: var(--bl-green); font-size: 1.05rem; margin-bottom: 0.5rem; }
|
|
|
|
.bl-list { margin: 0.5rem 0 0 1rem; }
|
|
.bl-list li { margin: 0.25rem 0; }
|
|
|
|
.bl-code {
|
|
background: #000;
|
|
padding: 0.1rem 0.3rem;
|
|
color: var(--bl-green);
|
|
}
|
|
|
|
.bl-code.small { font-size: 0.75rem; word-break: break-all; }
|
|
|
|
.bl-note { font-size: 0.8rem; color: var(--bl-text-dim); margin-top: 0.5rem; }
|
|
|
|
.bl-label { color: var(--bl-text-dim); }
|
|
|
|
/* Two column layout */
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.two-col { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Link list */
|
|
.bl-link-list { list-style: none; }
|
|
.bl-link-list li { margin: 0.4rem 0; }
|
|
|
|
.bl-link {
|
|
display: block;
|
|
padding: 0.4rem;
|
|
border: 1px solid transparent;
|
|
color: var(--bl-green);
|
|
background: transparent;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.bl-link:hover { background: rgba(0, 204, 102, 0.1); }
|
|
.bl-link.danger { color: var(--bl-red); }
|
|
.bl-link.danger:hover { background: rgba(204, 51, 51, 0.1); }
|
|
|
|
.contact-row { margin: 0.35rem 0; font-size: 0.9rem; }
|
|
|
|
/* Services grid - from renderServicesForUGH */
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.service-group {
|
|
border: 2px solid var(--bl-border-light);
|
|
border-style: inset;
|
|
padding: 0.6rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.service-group:hover { border-color: var(--bl-green-dim); }
|
|
|
|
.service-group h3 {
|
|
font-size: 0.85rem;
|
|
color: var(--bl-green);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.service-group ul li { margin: 0.2rem 0; font-size: 0.85rem; }
|
|
.service-group a { color: var(--bl-text); }
|
|
.service-group a:hover { color: var(--bl-green); }
|
|
.service-group .alt { color: var(--bl-text-dim); font-size: 0.8rem; }
|
|
|
|
/* Donate */
|
|
.donate-col { text-align: center; }
|
|
.donate-col .bl-btn { margin: 0.25rem; display: inline-block; }
|
|
|
|
.crypto-row { margin: 0.5rem 0; text-align: left; font-size: 0.85rem; }
|
|
|
|
/* Bl button - 3D raised */
|
|
.bl-btn {
|
|
background: linear-gradient(180deg, #2a2525 0%, #1a1616 100%);
|
|
border: 2px solid var(--bl-border-light);
|
|
border-style: outset;
|
|
color: var(--bl-green);
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
padding: 0.35rem 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bl-btn:hover {
|
|
background: linear-gradient(180deg, #1a1616 0%, #2a2525 100%);
|
|
border-style: inset;
|
|
}
|
|
|
|
/* Links wrap */
|
|
.links-wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.bl-chip {
|
|
padding: 0.25rem 0.5rem;
|
|
border: 1px solid var(--bl-border-light);
|
|
color: var(--bl-text);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.bl-chip:hover {
|
|
border-color: var(--bl-green);
|
|
color: var(--bl-green);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer-panel .panel-inner {
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
color: var(--bl-text-dim);
|
|
}
|
|
|