619 lines
15 KiB
CSS
619 lines
15 KiB
CSS
/* ============================================================
|
|
MERZ-HATER CLUB — design tokens
|
|
tactical-HUD scrapbook: void black, signal red, chamfered
|
|
panels, torn/jagged edges, chromatic-ghost display type.
|
|
built for a friend book, not a shooter menu -- so the ASCII
|
|
emotes and warm copy stay untouched underneath the armor.
|
|
|
|
void: #0a0a0d page background, recessed wells
|
|
panel: #131316 raised panel / window surface
|
|
ink: #ece7db warm bone text (was "ink")
|
|
ink-soft: #8b8b95 muted secondary text
|
|
signal: #ff3b3f primary red accent (css var --coral)
|
|
ember: #c23616 secondary rust-red (css var --tape)
|
|
maroon: #7a1d1f tertiary deep red (css var --lilac)
|
|
confirm: #5c1417 deep maroon, admin "approve" only (css var --sky)
|
|
line: #2a2a30 hairline borders
|
|
|
|
display font: Anton (title + card names only — spend it once)
|
|
tech font: Chakra Petch (labels, buttons, readouts)
|
|
body font: Rajdhani (paragraph text)
|
|
============================================================ */
|
|
|
|
:root {
|
|
--paper: #0a0a0d;
|
|
--paper-deep: #131316;
|
|
--ink: #ece7db;
|
|
--ink-soft: #8b8b95;
|
|
--lilac: #7a1d1f;
|
|
--sky: #5c1417;
|
|
--coral: #ff3b3f;
|
|
--tape: #c23616;
|
|
--line: #2a2a30;
|
|
--font-display: "Anton", sans-serif;
|
|
--font-mono: "Chakra Petch", sans-serif;
|
|
--font-body: "Rajdhani", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--font-body);
|
|
font-size: 17px;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-image:
|
|
repeating-linear-gradient(to right, rgba(236, 231, 219, 0.035) 0 1px, transparent 1px 64px),
|
|
repeating-linear-gradient(to bottom, rgba(236, 231, 219, 0.035) 0 1px, transparent 1px 64px),
|
|
radial-gradient(circle at 8% 0%, rgba(255, 59, 63, 0.14), transparent 40%),
|
|
radial-gradient(circle at 96% 12%, rgba(122, 29, 31, 0.22), transparent 45%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
::selection { background: var(--coral); color: var(--paper); }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--coral);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
a { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
|
|
a:hover { text-decoration-color: var(--tape); }
|
|
|
|
/* faint CRT grain -- decorative, non-interactive */
|
|
.scanlines {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 50;
|
|
opacity: 0.35;
|
|
background-image: radial-gradient(rgba(255, 59, 63, 0.09) 1px, transparent 1px);
|
|
background-size: 3px 3px;
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
/* ---------------- hero / title ---------------- */
|
|
|
|
.hero {
|
|
padding: 60px 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero__glitchbox {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.glitch {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: clamp(2.6rem, 9vw, 5.2rem);
|
|
line-height: 0.95;
|
|
letter-spacing: 0.01em;
|
|
margin: 0;
|
|
padding: 0.05em 0.2em;
|
|
color: var(--ink);
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
z-index: 1;
|
|
animation: flicker-in 0.7s ease-out 1;
|
|
}
|
|
|
|
/* chromatic-ghost duplicates, sliced like a torn broadcast signal */
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 0.05em 0.2em;
|
|
pointer-events: none;
|
|
}
|
|
.glitch::before {
|
|
color: var(--coral);
|
|
transform: translate(3px, -2px);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.65;
|
|
clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%);
|
|
}
|
|
.glitch::after {
|
|
color: var(--tape);
|
|
transform: translate(-3px, 2px);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.55;
|
|
clip-path: polygon(0 58%, 100% 58%, 100% 100%, 0 100%);
|
|
}
|
|
|
|
@keyframes flicker-in {
|
|
0% { opacity: 0; }
|
|
8% { opacity: 1; }
|
|
11% { opacity: 0.15; }
|
|
16% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
64% { opacity: 0.4; }
|
|
68% { opacity: 1; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
/* jagged red backing behind the title */
|
|
.hero__glitchbox::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -12px;
|
|
right: -12px;
|
|
bottom: 0.16em;
|
|
height: 0.46em;
|
|
background: var(--coral);
|
|
opacity: 0.16;
|
|
z-index: 0;
|
|
clip-path: polygon(
|
|
0 35%, 6% 0, 13% 42%, 20% 6%, 28% 46%, 36% 4%, 44% 42%,
|
|
52% 8%, 60% 46%, 68% 2%, 76% 42%, 84% 8%, 92% 44%, 100% 12%,
|
|
100% 100%, 0 100%
|
|
);
|
|
}
|
|
|
|
.hero__tagline {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 24px 0 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
color: var(--ink-soft);
|
|
background: var(--paper-deep);
|
|
border: 1px solid var(--line);
|
|
padding: 8px 16px 8px 30px;
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
}
|
|
.hero__tagline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 13px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--coral);
|
|
box-shadow: 0 0 6px 1px var(--coral);
|
|
}
|
|
|
|
/* jagged divider closing out the hero, torn black/red edge */
|
|
.hero::after {
|
|
content: "";
|
|
display: block;
|
|
height: 14px;
|
|
margin: 32px 0 0;
|
|
opacity: 0.55;
|
|
background:
|
|
linear-gradient(135deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px,
|
|
linear-gradient(225deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px,
|
|
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 0 0 / 14px 14px,
|
|
linear-gradient(45deg, var(--paper) 25%, var(--coral) 25%) 0 0 / 14px 14px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.glitch { animation: none; }
|
|
}
|
|
|
|
/* ---------------- tabs ---------------- */
|
|
|
|
.tabs {
|
|
display: inline-flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 22px 0 0;
|
|
}
|
|
|
|
.tab-btn {
|
|
font-family: var(--font-mono);
|
|
background: var(--paper-deep);
|
|
color: var(--ink-soft);
|
|
border: 1px solid var(--line);
|
|
border-bottom: none;
|
|
padding: 10px 20px 8px;
|
|
cursor: pointer;
|
|
letter-spacing: 0.03em;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.tab-btn__index { color: var(--coral); margin-right: 6px; font-weight: 700; }
|
|
|
|
.tab-btn:hover { color: var(--ink); border-color: var(--coral); }
|
|
|
|
.tab-btn.is-active {
|
|
background: var(--paper-deep);
|
|
color: var(--ink);
|
|
border-color: var(--coral);
|
|
box-shadow: 0 -3px 0 0 var(--coral) inset;
|
|
}
|
|
|
|
.tab-btn.is-active .tab-btn__index { color: var(--coral); }
|
|
|
|
/* ---------------- window chrome (a tactical readout panel) ---------------- */
|
|
|
|
main {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 0 20px 60px;
|
|
}
|
|
|
|
.window {
|
|
position: relative;
|
|
background: var(--paper-deep);
|
|
border: 1px solid var(--line);
|
|
box-shadow: 10px 10px 0 0 rgba(255, 59, 63, 0.15);
|
|
margin-top: 20px;
|
|
padding-left: 26px;
|
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
|
|
}
|
|
|
|
#panel-gallery.window { box-shadow: 10px 10px 0 0 rgba(194, 54, 22, 0.2); }
|
|
|
|
.window.is-hidden { display: none; }
|
|
|
|
/* diagonal hazard stripe standing in for the old spiral holes */
|
|
.window::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 26px;
|
|
border-right: 1px solid var(--line);
|
|
background-image: repeating-linear-gradient(-45deg, var(--coral) 0 6px, transparent 6px 12px);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* torn red teeth capping every panel */
|
|
.window::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 6px;
|
|
background:
|
|
linear-gradient(135deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
|
|
linear-gradient(225deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
|
|
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 6px 0 / 12px 12px,
|
|
linear-gradient(45deg, var(--paper) 25%, var(--coral) 25%) 6px 0 / 12px 12px;
|
|
}
|
|
|
|
#panel-gallery.window::after {
|
|
background:
|
|
linear-gradient(135deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
|
|
linear-gradient(225deg, var(--paper) 25%, transparent 25%) 0 0 / 12px 12px,
|
|
linear-gradient(315deg, var(--paper) 25%, transparent 25%) 6px 0 / 12px 12px,
|
|
linear-gradient(45deg, var(--paper) 25%, var(--tape) 25%) 6px 0 / 12px 12px;
|
|
}
|
|
|
|
.window__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px 10px 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(255, 59, 63, 0.04);
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
display: inline-block;
|
|
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
|
|
}
|
|
.dot--blue { background: var(--tape); }
|
|
.dot--pink { background: var(--coral); }
|
|
.dot--white { background: var(--ink-soft); }
|
|
|
|
.window__title {
|
|
margin-left: 6px;
|
|
color: var(--ink-soft);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.window__body { padding: 28px; }
|
|
|
|
/* ---------------- form ---------------- */
|
|
|
|
.form { display: flex; flex-direction: column; gap: 20px; }
|
|
|
|
.field-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.field-row { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
|
|
.field label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--ink-soft);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.field .req { color: var(--coral); }
|
|
.field .hint { color: var(--ink-soft); text-transform: none; font-family: var(--font-body); font-style: italic; font-size: 0.8rem; }
|
|
|
|
input[type="text"],
|
|
textarea {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
color: var(--ink);
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
padding: 11px 13px;
|
|
resize: vertical;
|
|
clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
input[type="text"]::placeholder,
|
|
textarea::placeholder { color: #55555e; font-style: normal; }
|
|
|
|
input[type="text"]:focus,
|
|
textarea:focus {
|
|
border-color: var(--coral);
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(255, 59, 63, 0.22);
|
|
}
|
|
|
|
input[type="file"] {
|
|
font-family: var(--font-body);
|
|
color: var(--ink-soft);
|
|
border: 1px dashed var(--line);
|
|
padding: 14px;
|
|
background: rgba(236, 231, 219, 0.02);
|
|
clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
|
|
}
|
|
|
|
/* mood picker */
|
|
|
|
.mood-picker {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mood-btn {
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
width: 44px;
|
|
height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.mood-btn:hover { border-color: var(--coral); }
|
|
|
|
.mood-btn[aria-pressed="true"] {
|
|
border-color: var(--coral);
|
|
background: rgba(255, 59, 63, 0.14);
|
|
box-shadow: 0 0 0 1px var(--coral);
|
|
}
|
|
|
|
/* badge preview thumbnails in the form */
|
|
|
|
.badge-preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.badge-preview img {
|
|
width: 52px;
|
|
height: 52px;
|
|
object-fit: cover;
|
|
background: var(--paper);
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
|
|
}
|
|
|
|
.form-error {
|
|
color: var(--coral);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
border: 1px solid var(--coral);
|
|
padding: 9px 12px;
|
|
background: rgba(255, 59, 63, 0.08);
|
|
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
|
|
}
|
|
|
|
.form-success {
|
|
color: var(--ink);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
border: 1px solid var(--line);
|
|
padding: 9px 12px;
|
|
background: rgba(236, 231, 219, 0.04);
|
|
clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
|
|
}
|
|
|
|
.btn-submit {
|
|
align-self: flex-start;
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
background: transparent;
|
|
color: var(--coral);
|
|
border: 2px solid var(--coral);
|
|
padding: 13px 24px;
|
|
cursor: pointer;
|
|
font-size: 0.88rem;
|
|
text-transform: uppercase;
|
|
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
|
|
transition: background 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
.btn-submit:hover { background: var(--coral); color: var(--paper); }
|
|
.btn-submit:active { transform: scale(0.98); }
|
|
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
|
|
|
|
/* ---------------- gallery ---------------- */
|
|
|
|
.gallery-status {
|
|
color: var(--ink-soft);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
|
|
gap: 30px 22px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.entry-card {
|
|
position: relative;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-left: 3px solid var(--coral);
|
|
padding: 22px 18px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
|
|
transition: transform 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.gallery-grid .entry-card:nth-child(3n) { border-left-color: var(--lilac); }
|
|
.gallery-grid .entry-card:nth-child(4n) { border-left-color: var(--tape); }
|
|
|
|
.entry-card:hover { transform: translateY(-3px); }
|
|
|
|
/* target-lock corner bracket, replaces the old washi tape */
|
|
.entry-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-top: 2px solid var(--coral);
|
|
border-left: 2px solid var(--coral);
|
|
}
|
|
.gallery-grid .entry-card:nth-child(3n)::before { border-color: var(--lilac); }
|
|
.gallery-grid .entry-card:nth-child(4n)::before { border-color: var(--tape); }
|
|
|
|
.entry-card__mood {
|
|
position: absolute;
|
|
top: -13px;
|
|
right: -10px;
|
|
font-size: 1.2rem;
|
|
background: var(--paper);
|
|
border: 1px solid var(--coral);
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
|
|
}
|
|
|
|
.entry-card__name {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
font-size: 1.4rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.01em;
|
|
color: var(--ink);
|
|
margin: 0;
|
|
padding: 0 20px 8px 0;
|
|
border-bottom: 2px solid var(--coral);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.entry-card__row { font-size: 0.86rem; line-height: 1.45; }
|
|
|
|
.entry-card__row .k {
|
|
color: var(--coral);
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-size: 0.64rem;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.entry-card__row .v { color: var(--ink); word-break: break-word; }
|
|
|
|
.entry-card__link { font-size: 0.85rem; word-break: break-all; }
|
|
|
|
.entry-card__badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.entry-card__badges img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
background: var(--paper);
|
|
padding: 2px;
|
|
border: 1px solid var(--line);
|
|
clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
|
|
}
|
|
|
|
.entry-card__time {
|
|
margin-top: auto;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--ink-soft);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.entry-card,
|
|
.tab-btn,
|
|
.btn-submit,
|
|
.mood-btn,
|
|
input[type="text"],
|
|
textarea { transition: none; }
|
|
}
|
|
|
|
/* ---------------- footer ---------------- */
|
|
|
|
.site-footer {
|
|
text-align: center;
|
|
color: var(--ink-soft);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.03em;
|
|
padding: 18px 20px 34px;
|
|
}
|
|
|
|
.site-footer p::before { content: "> "; color: var(--coral); }
|