/* dobbscoin.info — CSS-grid mirror of the classic table layout.
Goal: preserve the look. The 900px canvas is fixed; phones zoom-to-fit
via , identical to how the old
tables-for-layout site renders on mobile today. */
html, body {
margin: 0;
padding: 0;
}
/* Page background lives on , NOT , so positioned descendants of
can use z-index:-1 to slip behind in-flow content while still
rendering in front of the page tile. (UFO swarm depends on this.) */
html {
background-color: #fff;
background-image: url('../images/bg.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: center top;
min-height: 100vh;
}
body {
background: transparent;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
}
a { color: #0000EE; text-decoration: none; }
a:visited { color: #551A8B; }
a:active { color: #EE0000; }
.canvas {
width: 900px;
margin: 0 auto;
padding: 30px 20px 5px;
}
/* ── Band 1: hero (title, tagline, button row, quote) ───────────── */
.hero {
text-align: center;
padding: 5px;
}
.hero .title-img { width: 640px; height: 90px; }
.hero .tagline {
font-weight: bold;
display: block;
margin: 6px 0;
white-space: nowrap;
font-size: 14.5px;
letter-spacing: 0.2px;
}
.hero hr.rule {
width: 640px;
height: 5px;
border: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background: transparent;
box-shadow: none;
margin: 14px auto;
}
.hero .nav { display: flex; justify-content: center; gap: 0; margin-top: 4px; }
.hero .nav img { display: block; }
.hero .quote { font-size: 0.83em; display: block; margin-top: 6px; }
/* ── Band 2: scare-copy (left) + SETTLE UP card (right) ─────────── */
.band-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 5px;
align-items: start;
}
.scare {
text-align: center;
padding: 5px;
font-family: Georgia, "Times New Roman", serif;
}
.scare .alert {
color: #cc0000;
font-size: 1.1em;
font-weight: bold;
letter-spacing: 1px;
display: block;
white-space: nowrap;
margin-bottom: 8px;
}
.scare .questions { display: block; margin: 10px 0 22px; font-style: italic; }
.scare .questions b { display: block; color: #000; font-weight: bold; white-space: nowrap; }
.scare .about-img { width: 378px; height: 225px; }
.scare .repent {
display: block;
font-style: italic;
color: #cc0000;
font-size: 2.4em;
line-height: 1;
margin: 8px 0;
letter-spacing: 2px;
}
.scare .repent::after {
content: "REPENT";
font-style: normal;
font-weight: bold;
}
.scare .legal {
color: #555;
display: block;
margin-top: 8px;
font-size: 0.82em;
font-style: italic;
}
/* Mandatory v0.11.0 hard-fork notice — GitHub OG image of the release page,
sized to the scare column, tilted + tape strip to fit the SubGenius pamphlet vibe. */
.scare .fork-notice {
display: block;
position: relative;
margin: 24px auto 8px;
max-width: 75%;
line-height: 0;
transform: rotate(-1deg);
box-shadow:
0 1px 0 rgba(0,0,0,0.10),
0 8px 18px rgba(0,0,0,0.30);
transition: transform 0.15s ease, box-shadow 0.15s ease;
border: 2px solid #000;
}
.scare .fork-notice img {
display: block;
width: 100%;
height: auto;
}
.scare .fork-notice:hover {
transform: rotate(-1deg) translateY(-2px);
box-shadow:
0 1px 0 rgba(0,0,0,0.10),
0 12px 22px rgba(0,0,0,0.38);
}
/* Masking tape across the top */
.scare .fork-notice::before {
content: "";
position: absolute;
top: -11px;
left: 50%;
width: 50px;
height: 14px;
transform: translateX(-50%) rotate(3deg);
background: rgba(225, 205, 140, 0.78);
border-left: 1px dashed rgba(0,0,0,0.12);
border-right: 1px dashed rgba(0,0,0,0.12);
box-shadow: 0 1px 2px rgba(0,0,0,0.20);
z-index: 1;
}
.settle {
text-align: center;
}
.settle h2.eschaton {
font-size: 1.8em;
font-weight: bold;
margin: 0 0 22px;
line-height: 1.1;
}
.settle .card {
display: grid;
grid-template-columns: 1fr 190px;
column-gap: 10px;
row-gap: 10px;
align-items: start;
margin: 0 auto;
max-width: 512px;
}
.settle .links {
font-family: Georgia, serif;
display: grid;
grid-template-columns: max-content max-content;
column-gap: 8px;
row-gap: 2px;
text-align: left;
justify-content: center;
}
.settle .links .label { text-align: right; }
.settle .links .label.accent { color: #990000; }
.settle .anibob {
text-align: center;
}
.settle .anibob .settle-up {
color: #990000;
font-style: italic;
font-weight: bold;
font-size: 1.5em;
display: block;
line-height: 1;
}
.settle .anibob .with-bob {
color: #990000;
font-style: italic;
font-weight: bold;
font-size: 0.95em;
display: block;
}
.settle .row2 {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px;
margin-top: 10px;
align-items: start;
text-align: left;
}
.settle .row2 ul { margin: 0 0 0 18px; padding: 0; }
.settle .row2 .exchanges b { display: block; text-align: center; }
.settle .socials {
margin-top: 22px;
font-size: 0.95em;
text-align: center;
}
.settle .socials .quit {
font-style: italic;
font-weight: 900;
font-size: 1.6em;
display: block;
margin-top: 18px;
}
/* Hard-fork pointer — sits inside the .settle column, fixed-width grid so
it never bleeds outside its grid cell. Arrow nudges left toward the fork
notice in the .scare column. */
.settle .socials .fork-pointer {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
margin: 14px 0 0;
padding: 10px 12px;
background: #fffce8;
border: 1px solid #cc0000;
border-radius: 6px;
text-align: center;
text-decoration: none;
color: #000;
font-style: normal;
font-weight: normal;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.82em;
line-height: 1.4;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.settle .socials .fork-pointer:visited { color: #000; }
.settle .socials .fork-pointer:hover {
background: #fff6cc;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.settle .socials .fork-pointer .fp-arrow {
display: inline-block;
font-size: 4em;
line-height: 1;
color: #cc0000;
font-weight: 900;
will-change: transform;
animation: fork-pointer-nudge 1.1s ease-in-out infinite;
}
.settle .socials .fork-pointer .fp-text { display: block; }
.settle .socials .fork-pointer .fp-must-line {
display: block;
text-align: center;
margin-top: 4px;
}
.settle .socials .fork-pointer b { color: #cc0000; font-weight: 900; }
@keyframes fork-pointer-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.settle .socials .fork-pointer .fp-arrow { animation: none; }
}
/* ── Band 3: long-form footer copy ──────────────────────────────── */
.about {
font-family: Georgia, "Times New Roman", serif;
font-size: 1em;
line-height: 1.5;
text-align: center;
padding: 14px 28px;
color: #000;
}
.about .conspiracy { font-size: 1.05em; }
.about .conspiracy i { font-style: italic; }
.about .red { color: #cc0000; font-weight: bold; }
.about .more {
display: block;
text-align: right;
font-size: 0.85em;
font-style: italic;
margin-top: 8px;
}
/* ── Band 3.5: Bootstrap CTA ─────────────────────────────────────── */
.bootstrap-cta {
text-align: center;
padding: 14px 20px;
background: #fff7cc;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
.bootstrap-cta .cta-headline {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 1.5em;
color: #cc0000;
letter-spacing: 2px;
}
.bootstrap-cta .cta-sub {
display: block;
font-family: Georgia, serif;
font-style: italic;
font-size: 0.95em;
margin: 4px 0 10px;
color: #000;
}
.bootstrap-cta .cta-btn {
display: inline-block;
padding: 9px 18px;
background: #fffce8;
color: #cc0000;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 16px;
letter-spacing: 1.5px;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 0 2px 0 #000, 0 4px 8px rgba(0,0,0,0.2);
text-decoration: none;
transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
}
.bootstrap-cta .cta-btn:visited { color: #cc0000; }
.bootstrap-cta .cta-btn:hover {
background: #ffcc00;
color: #000;
transform: translateY(-1px);
box-shadow: 0 3px 0 #000, 0 6px 12px rgba(0,0,0,0.25);
}
.bootstrap-cta .cta-btn:active {
transform: translateY(2px);
box-shadow: 0 0 0 #000, 0 1px 2px rgba(0,0,0,0.3);
}
/* ── Band 4: UFO/SEX cult — two-up promo ────────────────────────── */
.cult {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px 8px;
align-items: center;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
}
.cult .left big { color: #cc0000; font-weight: bold; font-size: 1.5em; letter-spacing: 1px; display: inline-block; margin-bottom: 6px; }
.cult .right .so { font-size: 1.9em; font-weight: bold; letter-spacing: 1px; display: block; margin-bottom: 6px; color: #cc0000; }
.cult .low-diff { color: #000; font-style: italic; display: block; margin-top: 8px; font-size: 0.95em; }
.cult .monetize { display: block; text-align: center; font-family: Georgia, serif; font-style: italic; margin-top: 6px; }
.cult .monetize i { font-size: 0.85em; }
/* ── Band 5: pull-quote ─────────────────────────────────────────── */
.slack-quote {
text-align: center;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-size: 16px;
line-height: 1.6;
color: #000;
padding: 18px 60px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin: 8px 20px;
background: rgba(255,247,200,0.5);
}
.slack-quote .blue { color: #cc0000; font-weight: bold; }
/* ── Band 6: splash + social/quote/youtube ──────────────────────── */
.splash {
display: grid;
grid-template-columns: 320px 1fr;
gap: 12px;
padding: 12px 4px;
align-items: center;
}
.splash .left { text-align: center; }
.splash .left .splash-tagline {
font-family: Georgia, serif;
color: #cc0000;
display: block;
margin-top: 6px;
}
.splash .right { text-align: center; }
.splash .right .social-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 8px;
align-items: center;
margin-bottom: 10px;
}
.splash .right .social-row ul {
list-style: disc;
text-align: left;
margin: 0 0 0 18px;
padding: 0;
}
.splash .right .compare {
color: #000066;
font-size: 1em;
line-height: 1.4;
display: block;
margin: 6px 0;
}
.splash .right .worthless {
font-size: 1.4em;
display: block;
margin: 8px 0;
}
/* ── Band 7: YouTube duo ────────────────────────────────────────── */
.videos {
text-align: center;
padding: 8px 4px;
}
.videos hr { border: 0; height: 2px; background: #999; margin: 8px 0; }
.videos .pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 8px 0;
}
.videos .pair iframe { margin: 0 auto; }
.videos .versus { color: #990000; display: block; margin-top: 4px; margin-bottom: 32px; }
/* ── Band 8: footer ─────────────────────────────────────────────── */
.tm {
font-family: Georgia, serif;
text-align: center;
padding: 8px;
}
.coin-footer {
text-align: center;
padding: 12px;
}
.coin-footer .econocolypse {
color: #000099;
font-weight: bold;
display: block;
}
.coin-footer .reward {
display: block;
font-weight: bold;
margin: 6px 0;
}
.coin-footer .links a { margin: 0 4px; }
/* ── Peekabob — fixed corner sticker, hidden below 950 (we are at 900 but
the viewport=900 zoom keeps it visible at scale; mirrors prod logic) */
img#bob {
position: fixed;
bottom: -113px;
right: 0;
margin: 0;
transition-property: bottom;
transition-duration: 0.7s;
transition-timing-function: ease-out;
}
img#bob:hover { bottom: 5px; }
/* Hero nav buttons (replaces the old image-link row). Black + yellow,
red drop-shadow — leans into the SubGenius warning-sticker vibe. */
.hero .nav {
gap: 6px;
flex-wrap: nowrap;
white-space: nowrap;
margin-top: 8px;
justify-content: center;
}
.hero .nav .btn {
display: inline-block;
padding: 7px 12px;
background: #fffce8;
color: #cc0000;
font-family: 'Anton', Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
font-weight: 400; /* Anton ships as a single weight; explicit so fallbacks behave */
font-size: 16px;
letter-spacing: 1.5px;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 0 2px 0 #000, 0 4px 8px rgba(0,0,0,0.2);
text-decoration: none;
white-space: nowrap;
transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
}
.hero .nav .btn:visited { color: #cc0000; }
.hero .nav .btn:hover {
background: #ffcc00;
color: #000;
transform: translateY(-1px);
box-shadow: 0 3px 0 #000, 0 6px 12px rgba(0,0,0,0.25);
}
.hero .nav .btn:active {
transform: translateY(2px);
box-shadow: 0 0 0 #000, 0 1px 2px rgba(0,0,0,0.3);
}
/* wBOB live-price card — cream/red palette to match buttons + bridge */
.wbob-price {
text-align: center;
background: #fffce8;
color: #000;
border: 2px solid #000;
padding: 12px 14px;
border-radius: 12px;
box-shadow: 0 3px 0 #000, 0 6px 12px rgba(0,0,0,0.18);
font-family: Georgia, serif;
position: relative;
}
.wbob-price .lbl {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 12px;
letter-spacing: 2px;
color: #000;
}
.wbob-price .val {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 28px;
margin: 4px 0;
color: #cc0000;
letter-spacing: 1px;
}
.wbob-price .src {
display: block;
font-size: 11px;
color: #444;
margin-bottom: 8px;
}
.wbob-price .src b { color: #000; }
.wbob-price .trade-btn {
display: inline-block;
padding: 7px 16px;
background: #fffce8;
color: #cc0000;
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
font-size: 13px;
letter-spacing: 1.5px;
border: 2px solid #000;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 2px 0 #000, 0 3px 6px rgba(0,0,0,0.18);
transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s;
}
.wbob-price .trade-btn:visited { color: #cc0000; }
.wbob-price .trade-btn:hover {
background: #ffcc00;
color: #000;
transform: translateY(-1px);
box-shadow: 0 3px 0 #000, 0 5px 10px rgba(0,0,0,0.22);
}
.wbob-price .trade-btn:active {
transform: translateY(2px);
box-shadow: 0 0 0 #000, 0 1px 2px rgba(0,0,0,0.3);
}
.wbob-price .nfa {
display: block;
margin-top: 8px;
font-size: 9px;
color: #777;
letter-spacing: 0.5px;
}
/* Bottom-left companion to peekabob — relocated "stupider it looks" line */
/* Boldened hero quote (was ) */
.hero .quote {
display: block;
margin: 24px auto 22px;
font-size: 12px;
font-weight: bold;
color: #000;
white-space: nowrap;
max-width: none;
}
.hero .quote b { font-weight: 900; }
/* Pleasure-Saucer swarm — JS-spawned, fixed-position, drifts in front of the
canvas at low opacity. Hard-capped at 5 in script; pointer-events:none. */
.ufo {
position: fixed;
top: 0;
left: 0;
z-index: 5;
pointer-events: none;
user-select: none;
will-change: transform, opacity;
filter: drop-shadow(0 0 8px rgba(140, 200, 255, 0.35));
}
/* Standard (BOB) 3-line footer — matches pool/explorer house style */
.dobbs-copyright {
text-align: center;
padding: 0 8px 20px;
font-family: Georgia, serif;
font-size: 13px;
color: #333;
line-height: 1.5;
}
.dobbs-copyright div { margin: 2px 0; }
.dobbs-copyright a { color: #990000; }
.dobbs-copyright a:visited { color: #551A8B; }
/* (Halftone-dot overlay removed — was making everything look like a pamphlet
with imposed dots; user wanted cleaner surface.) */
body::after {
content: none;
background-image: none;
background-size: auto;
pointer-events: none;
z-index: 1;
mix-blend-mode: multiply;
}
/* Hover lift on price card too */
.wbob-price:hover {
transform: translateY(-2px);
box-shadow: 0 5px 0 #cc0000, 0 11px 22px rgba(0,0,0,0.4);
transition: transform 0.12s, box-shadow 0.12s;
}
/* ─── socials.js stack overrides — relocate to bottom-LEFT + centered stack ─── */
#bottomstack {
right: auto !important;
left: 18px !important;
bottom: 14px !important;
align-items: center !important; /* socials centered over Become Ordained button */
}
/* "Stupider it looks…" quote restyled as a paper note stuck on with masking tape.
The default JS-injected quote is invisible cream-on-cream; this turns it into
a slightly-skewed sticky note so the ugliness becomes the point. */
#bottomstack .dobbs-quote {
background: #fffbe0;
color: #2a1e0c !important;
padding: 12px 16px 14px;
border-radius: 1px;
border: 0;
text-shadow: none !important;
font-family: "Marker Felt", "Comic Sans MS", "Bradley Hand", cursive !important;
font-size: 13px !important;
font-style: normal !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
max-width: 240px !important;
transform: rotate(-2.4deg);
box-shadow:
0 1px 0 rgba(0,0,0,0.08),
0 8px 16px rgba(0,0,0,0.35),
inset 0 0 30px rgba(180,140,40,0.10);
position: relative;
margin-top: 16px; /* room for the tape strip */
}
/* Masking-tape strip across the top of the note */
#bottomstack .dobbs-quote::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 68px;
height: 18px;
transform: translateX(-50%) rotate(-4deg);
background: rgba(225, 205, 140, 0.62);
border-left: 1px dashed rgba(0,0,0,0.10);
border-right: 1px dashed rgba(0,0,0,0.10);
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
pointer-events: none;
}
/* Ordained button gets a subtle backdrop too so it pops on the cream bg */
#bottomstack .dobbs-ordain {
box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 0 1px #000;
}
/* Row 2 of SETTLE UP card: lookup image + releases list, aligned with wBOB price card on the right */
.settle .card .lookup-block {
display: flex;
align-items: flex-start;
gap: 10px;
text-align: left;
}
.settle .card .lookup-block img {
flex-shrink: 0;
}
.settle .card .lookup-block .releases ul {
margin: 0 0 0 18px;
padding: 0;
}
/* Bridge button spans the full .card grid as a third row */
.settle .card .bridge-btn {
grid-column: 1 / -1;
margin-top: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 12px;
background: #fffce8;
color: #cc0000;
text-decoration: none;
border: 3px solid #000;
border-radius: 14px;
box-shadow: 0 3px 0 #000, 0 6px 12px rgba(0,0,0,0.22);
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 1px;
white-space: nowrap;
transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.settle .card .bridge-btn:visited { color: #cc0000; }
.settle .card .bridge-btn .bn-headline {
font-size: 17px;
font-weight: bold;
line-height: 1.1;
}
.settle .card .bridge-btn:hover {
background: #ffcc00;
color: #000;
transform: translateY(-1px);
box-shadow: 0 3px 0 #000, 0 7px 14px rgba(0,0,0,0.25);
}
.settle .card .bridge-btn:active {
transform: translateY(2px);
box-shadow: 0 0 0 #000, 0 1px 2px rgba(0,0,0,0.3);
}
/* wBOB price card inside the .card grid — keep narrow column tidy */
.settle .card .wbob-price {
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
}
.settle .card .wbob-price .val { font-size: 18px; }
.settle .card .wbob-price .lbl { font-size: 10px; }
.settle .card .wbob-price .src { font-size: 10px; }
.settle .card .wbob-price .nfa { font-size: 8px; }