Live Dates
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CYBERPUNK PHILOSOPHICA // TAROT SYSTEM v2.0</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;600;700;900&family=VT323&display=swap" rel="stylesheet" />
<style>
/* ══════════════════════════════════════════════════
RESET & BASE
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 4px; background: #000; }
::-webkit-scrollbar-thumb { background: #00ff41; }
html { scroll-behavior: smooth; }
/* ══════════════════════════════════════════════════
BRAND TOKENS
══════════════════════════════════════════════════ */
:root {
--black: #000000;
--deep: #030a03;
--terminal: #001400;
--green: #00ff41; /* primary — Socrates electric */
--green-dim: #00aa2a;
--green-dark: #004a10;
--amber: #ffb000; /* Ovid */
--blue: #00cfff; /* Socrates alt */
--acid: #a8ff00; /* Nietzsche */
--purple: #cc44ff; /* Epicurus */
--red: #ff2244; /* danger / warning */
--white: #e8ffe8;
--dim: #3a5a3a;
--scan: rgba(0,255,65,0.03);
}
body {
min-height: 100vh;
background: var(--black);
font-family: 'Share Tech Mono', monospace;
color: var(--green);
overflow-x: hidden;
cursor: crosshair;
}
/* ══════════════════════════════════════════════════
CRT SCANLINES OVERLAY
══════════════════════════════════════════════════ */
body::before {
content: '';
position: fixed; inset: 0; z-index: 9999;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.15) 2px,
rgba(0,0,0,0.15) 4px
);
}
/* ══════════════════════════════════════════════════
NOISE / STATIC TEXTURE
══════════════════════════════════════════════════ */
body::after {
content: '';
position: fixed; inset: 0; z-index: 9998;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 256px 256px;
}
/* ══════════════════════════════════════════════════
AMBIENT GLOW ORBS
══════════════════════════════════════════════════ */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.orb {
position: absolute; border-radius: 50%;
animation: orbPulse 8s ease-in-out infinite;
}
.orb-1 {
top: -15%; right: -10%; width: 500px; height: 500px;
background: radial-gradient(circle, rgba(0,255,65,0.07) 0%, transparent 70%);
animation-delay: 0s;
}
.orb-2 {
bottom: 5%; left: -15%; width: 400px; height: 400px;
background: radial-gradient(circle, rgba(0,207,255,0.05) 0%, transparent 70%);
animation-delay: -3s;
}
.orb-3 {
top: 45%; left: 35%; width: 300px; height: 300px;
background: radial-gradient(circle, rgba(168,255,0,0.04) 0%, transparent 70%);
animation-delay: -6s;
}
@keyframes orbPulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
/* ══════════════════════════════════════════════════
GRID BACKGROUND
══════════════════════════════════════════════════ */
.grid-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(0,255,65,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,65,0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
/* ══════════════════════════════════════════════════
GLITCH ANIMATION
══════════════════════════════════════════════════ */
@keyframes glitch {
0%, 90%, 100% { transform: none; clip-path: none; opacity: 1; }
91% { transform: skewX(-2deg) translateX(3px); clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); color: var(--blue); }
92% { transform: skewX(1deg) translateX(-2px); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); color: var(--red); }
93% { transform: none; clip-path: none; color: var(--green); }
}
@keyframes glitchText {
0%, 85%, 100% { text-shadow: 0 0 10px var(--green); }
86% { text-shadow: 3px 0 0 var(--red), -3px 0 0 var(--blue); transform: translateX(2px); }
87% { text-shadow: -3px 0 0 var(--red), 3px 0 0 var(--blue); transform: translateX(-2px); }
88% { text-shadow: 0 0 10px var(--green); transform: none; }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100vh); }
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@keyframes typeIn {
from { width: 0; }
to { width: 100%; }
}
@keyframes flicker {
0%, 95%, 100% { opacity: 1; }
96% { opacity: 0.7; }
97% { opacity: 1; }
98% { opacity: 0.5; }
99% { opacity: 0.9; }
}
@keyframes matrixRain {
0% { transform: translateY(-100%); opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
@keyframes borderPulse {
0%, 100% { box-shadow: 0 0 4px var(--green), inset 0 0 4px rgba(0,255,65,0.1); }
50% { box-shadow: 0 0 12px var(--green), inset 0 0 8px rgba(0,255,65,0.2); }
}
.fade-in { animation: fadeInUp 0.4s ease forwards; }
/* ══════════════════════════════════════════════════
MOVING SCANLINE
══════════════════════════════════════════════════ */
.scanline-anim {
position: fixed; top: 0; left: 0; right: 0;
height: 3px; z-index: 9997; pointer-events: none;
background: linear-gradient(transparent, rgba(0,255,65,0.15), transparent);
animation: scanline 6s linear infinite;
}
/* ══════════════════════════════════════════════════
HEADER
══════════════════════════════════════════════════ */
.header {
position: sticky; top: 0; z-index: 100;
background: rgba(0,0,0,0.95);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--green-dim);
height: 56px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
animation: flicker 12s infinite;
}
.header::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.logo-area { display: flex; align-items: center; gap: 10px; }
.logo-icon {
width: 32px; height: 32px;
border: 1px solid var(--green-dim);
display: flex; align-items: center; justify-content: center;
font-family: 'VT323', monospace; font-size: 18px; color: var(--green);
box-shadow: 0 0 8px rgba(0,255,65,0.3);
animation: borderPulse 3s ease-in-out infinite;
}
.logo-main {
font-family: 'Orbitron', sans-serif;
font-size: 13px; font-weight: 700;
color: var(--green);
text-shadow: 0 0 10px var(--green);
animation: glitchText 10s infinite;
letter-spacing: 2px;
}
.logo-sub {
font-size: 9px; color: var(--green-dim);
letter-spacing: 3px; line-height: 1;
margin-top: 2px;
}
.cart-btn {
background: transparent;
border: 1px solid var(--green-dim);
padding: 6px 12px; cursor: pointer;
color: var(--green); font-family: 'Share Tech Mono', monospace;
font-size: 12px; letter-spacing: 1px;
display: flex; align-items: center; gap: 6px;
transition: all 0.2s;
}
.cart-btn:hover {
background: rgba(0,255,65,0.08);
border-color: var(--green);
box-shadow: 0 0 8px rgba(0,255,65,0.3);
}
.cart-badge {
background: var(--green); color: var(--black);
font-size: 9px; font-weight: 700;
width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
}
/* ══════════════════════════════════════════════════
SYSTEM STATUS BAR
══════════════════════════════════════════════════ */
.status-bar {
background: var(--terminal);
border-bottom: 1px solid var(--green-dark);
padding: 5px 16px;
display: flex; align-items: center; gap: 16px;
overflow-x: auto; scrollbar-width: none;
font-size: 10px; letter-spacing: 1px;
}
.status-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.status-dot {
width: 6px; height: 6px; border-radius: 50%;
animation: blink 1.5s infinite;
}
.status-dot.green { background: var(--green); box-shadow: 0 0 4px var(--green); }
.status-dot.amber { background: var(--amber); box-shadow: 0 0 4px var(--amber); animation-delay: 0.5s; }
.status-dot.blue { background: var(--blue); box-shadow: 0 0 4px var(--blue); animation-delay: 1s; }
.status-text { color: var(--green-dim); }
.status-val { color: var(--green); }
/* ══════════════════════════════════════════════════
TAB NAV
══════════════════════════════════════════════════ */
.tab-nav {
display: flex; overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid var(--green-dark);
background: rgba(0,0,0,0.8);
}
.tab-btn {
flex: none; padding: 12px 18px;
background: none; border: none; border-bottom: 2px solid transparent;
cursor: pointer; font-size: 11px; font-weight: 500; letter-spacing: 2px;
color: var(--dim); font-family: 'Share Tech Mono', monospace;
transition: all 0.2s; white-space: nowrap; text-transform: uppercase;
}
.tab-btn:hover { color: var(--green-dim); }
.tab-btn.active {
color: var(--green); border-bottom-color: var(--green);
text-shadow: 0 0 8px var(--green);
}
.tab-btn.active::before { content: '> '; }
/* ══════════════════════════════════════════════════
CONTENT
══════════════════════════════════════════════════ */
.content {
padding: 20px 16px 100px;
max-width: 620px; margin: 0 auto;
position: relative; z-index: 1;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ══════════════════════════════════════════════════
SECTION HEADINGS
══════════════════════════════════════════════════ */
.section-title {
font-family: 'Orbitron', sans-serif;
font-size: 18px; font-weight: 700;
color: var(--green);
text-shadow: 0 0 12px var(--green);
letter-spacing: 3px; text-transform: uppercase;
margin-bottom: 4px;
}
.section-sub {
font-size: 11px; color: var(--green-dim);
letter-spacing: 2px;
}
.section-head { margin-bottom: 20px; }
/* ══════════════════════════════════════════════════
TERMINAL PROMPT
══════════════════════════════════════════════════ */
.prompt {
font-size: 11px; color: var(--green-dim); letter-spacing: 1px;
margin-bottom: 16px;
}
.prompt::before { content: '> '; color: var(--green); }
.cursor { display: inline-block; animation: blink 1s infinite; }
/* ══════════════════════════════════════════════════
CARD FLIP SYSTEM
══════════════════════════════════════════════════ */
.card-wrap {
perspective: 1000px;
width: 200px; height: 340px;
margin: 0 auto 20px;
}
.card-inner {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.25,0.8,0.25,1);
cursor: pointer;
}
.card-inner.flipped { transform: rotateY(180deg); cursor: default; }
.card-face {
position: absolute; width: 100%; height: 100%;
backface-visibility: hidden;
border: 1px solid var(--green-dim);
box-shadow: 0 0 20px rgba(0,255,65,0.2), inset 0 0 20px rgba(0,0,0,0.8);
}
/* Card back */
.card-back {
background: var(--terminal);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.card-back-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0,255,65,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,65,0.06) 1px, transparent 1px);
background-size: 20px 20px;
}
.card-back-hex {
font-family: 'VT323', monospace;
font-size: 11px; color: var(--green-dim);
text-align: center; line-height: 1.4;
opacity: 0.4; position: absolute;
top: 10px; left: 10px; right: 10px;
overflow: hidden; max-height: 60px;
}
.card-back-logo {
font-family: 'Orbitron', sans-serif;
font-size: 28px; font-weight: 900;
color: var(--green);
text-shadow: 0 0 20px var(--green), 0 0 40px rgba(0,255,65,0.5);
animation: glitchText 7s infinite;
z-index: 1;
}
.card-back-sub {
font-size: 9px; color: var(--green-dim);
letter-spacing: 4px; margin-top: 6px; z-index: 1;
}
.card-back-tap {
position: absolute; bottom: 14px;
font-size: 10px; letter-spacing: 2px; color: var(--green-dim);
animation: blink 2s infinite;
}
.card-back-corner {
position: absolute; width: 14px; height: 14px;
border-color: var(--green-dim); border-style: solid;
opacity: 0.6;
}
.card-back-corner.tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.card-back-corner.tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.card-back-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.card-back-corner.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
/* Card front */
.card-front {
transform: rotateY(180deg);
background: #000;
display: flex; flex-direction: column;
align-items: center; justify-content: space-between;
padding: 14px 12px;
position: relative; overflow: hidden;
}
.card-front-scan {
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,0.02) 3px, rgba(0,255,65,0.02) 4px);
}
.cf-top {
display: flex; justify-content: space-between; align-items: flex-start;
width: 100%;
}
.cf-num {
font-family: 'VT323', monospace;
font-size: 22px; line-height: 1;
}
.cf-suit {
font-size: 9px; letter-spacing: 2px; text-align: right; line-height: 1.4;
}
.cf-icon {
font-family: 'VT323', monospace;
font-size: 64px; line-height: 1;
text-shadow: 0 0 20px currentColor;
animation: glitchText 9s infinite;
}
.cf-name-wrap { text-align: center; width: 100%; }
.cf-name {
font-family: 'Orbitron', sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; line-height: 1.3;
}
.cf-trad { font-size: 9px; color: var(--dim); letter-spacing: 1px; margin-top: 2px; }
.cf-keyword {
font-size: 9px; letter-spacing: 2px; margin-top: 3px;
text-transform: uppercase;
}
.cf-meaning {
background: rgba(0,255,65,0.04);
border: 1px solid rgba(0,255,65,0.15);
padding: 8px; text-align: center; width: 100%;
font-size: 10px; line-height: 1.5; color: #aaccaa;
font-style: italic;
}
.cf-brand { font-size: 8px; letter-spacing: 3px; color: var(--dim); }
/* ══════════════════════════════════════════════════
REVEAL DETAIL
══════════════════════════════════════════════════ */
.reveal-detail { display: none; }
.reveal-detail.visible { display: block; }
.terminal-box {
border: 1px solid var(--green-dark);
background: var(--terminal);
padding: 16px; margin-bottom: 14px;
position: relative;
animation: borderPulse 4s ease-in-out infinite;
}
.terminal-box::before {
content: attr(data-label);
position: absolute; top: -1px; left: 12px;
background: var(--black); padding: 0 6px;
font-size: 9px; letter-spacing: 2px; color: var(--green-dim);
transform: translateY(-50%);
}
.tb-name {
font-family: 'Orbitron', sans-serif;
font-size: 14px; font-weight: 700;
color: var(--green); text-shadow: 0 0 8px var(--green);
letter-spacing: 2px; margin-bottom: 4px;
}
.tb-sub { font-size: 9px; letter-spacing: 3px; color: var(--green-dim); margin-bottom: 10px; }
.tb-text { font-size: 12px; color: #9abba0; line-height: 1.7; font-style: italic; margin-bottom: 10px; }
.tb-divider { height: 1px; background: var(--green-dark); margin: 10px 0; }
.tb-note { font-size: 11px; color: #7a9a7a; line-height: 1.6; }
.tb-note .hl { color: var(--green); }
.phil-box {
border: 1px solid;
padding: 14px; margin-bottom: 14px;
display: flex; gap: 12px; align-items: flex-start;
}
.phil-label { font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; }
.phil-text { font-size: 11px; line-height: 1.6; }
.journal-box {
border: 1px solid var(--green-dark);
background: rgba(0,255,65,0.03);
padding: 14px;
}
.journal-label { font-size: 9px; letter-spacing: 2px; color: var(--green-dim); margin-bottom: 8px; }
.journal-label::before { content: '// '; }
.journal-text { font-size: 12px; color: #9abba0; line-height: 1.6; font-style: italic; }
.tap-hint {
text-align: center; color: var(--dim);
font-size: 10px; letter-spacing: 2px; margin-top: 14px;
animation: blink 2s infinite;
}
/* ══════════════════════════════════════════════════
PHILOSOPHER TABS (daily pull info bar)
══════════════════════════════════════════════════ */
.phil-tags {
display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.phil-tag {
padding: 4px 10px; border: 1px solid; font-size: 9px;
letter-spacing: 2px; text-transform: uppercase; cursor: default;
}
.phil-tag.ovid { border-color: var(--amber); color: var(--amber); }
.phil-tag.soc { border-color: var(--blue); color: var(--blue); }
.phil-tag.nietz { border-color: var(--acid); color: var(--acid); }
.phil-tag.epic { border-color: var(--purple); color: var(--purple); }
/* ══════════════════════════════════════════════════
SPREAD GRID
══════════════════════════════════════════════════ */
.spread-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spread-card {
border: 1px solid var(--green-dark);
background: var(--terminal);
padding: 14px; cursor: pointer;
transition: border-color 0.3s, box-shadow 0.3s;
position: relative;
}
.spread-card::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,0.01) 3px, rgba(0,255,65,0.01) 4px);
pointer-events: none;
}
.spread-card:hover:not(.revealed) {
border-color: var(--green-dim);
box-shadow: 0 0 10px rgba(0,255,65,0.15);
}
.spread-card.revealed { border-color: var(--green-dim); cursor: default; }
.sp-num { font-size: 8px; letter-spacing: 3px; color: var(--green-dim); margin-bottom: 4px; }
.sp-num::before { content: '// '; }
.sp-name {
font-family: 'Orbitron', sans-serif;
font-size: 12px; font-weight: 600;
color: var(--green); letter-spacing: 1px; margin-bottom: 2px;
}
.sp-question { font-size: 10px; color: var(--dim); font-style: italic; margin-bottom: 10px; line-height: 1.4; }
.sp-placeholder {
height: 80px; border: 1px dashed var(--green-dark);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 4px;
}
.sp-ph-num {
font-family: 'Orbitron', sans-serif;
font-size: 18px; color: var(--green-dim); opacity: 0.5;
}
.sp-ph-tap { font-size: 8px; letter-spacing: 2px; color: var(--dim); animation: blink 2s infinite; }
.sp-result {
background: rgba(0,255,65,0.04);
border: 1px solid var(--green-dark);
padding: 10px;
}
.sp-card-icon { font-family: 'VT323',monospace; font-size: 28px; line-height: 1; margin-bottom: 3px; }
.sp-card-name { font-family:'Orbitron',sans-serif; font-size:10px; font-weight:600; letter-spacing:1px; margin-bottom:2px; }
.sp-card-kw { font-size:9px; letter-spacing:2px; color:var(--dim); margin-bottom:5px; }
.sp-card-meaning { font-size:10px; color:#8aaa8a; font-style:italic; line-height:1.5; }
.spread-complete {
margin-top: 16px; padding: 16px;
border: 1px solid var(--green-dim);
background: rgba(0,255,65,0.04);
text-align: center; display: none;
box-shadow: 0 0 20px rgba(0,255,65,0.1);
}
.spread-complete.visible { display: block; }
.sc-title {
font-family: 'Orbitron', sans-serif;
font-size: 14px; color: var(--green);
text-shadow: 0 0 10px var(--green);
letter-spacing: 2px; margin-bottom: 8px;
}
.sc-text { font-size: 11px; color: #7a9a7a; line-height: 1.6; margin-bottom: 12px; }
.reset-btn {
padding: 8px 20px; background: transparent;
border: 1px solid var(--green-dim); cursor: pointer;
color: var(--green); font-size: 10px; letter-spacing: 2px;
font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
transition: all 0.2s;
}
.reset-btn:hover {
background: rgba(0,255,65,0.08);
box-shadow: 0 0 10px rgba(0,255,65,0.3);
}
.reset-btn::before { content: '> '; }
/* ══════════════════════════════════════════════════
STORE
══════════════════════════════════════════════════ */
.product-list { display: flex; flex-direction: column; gap: 14px; }
.product-card {
border: 1px solid var(--green-dark);
background: var(--terminal);
display: flex; overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.product-card::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,0.01) 3px, rgba(0,255,65,0.01) 4px);
pointer-events: none;
}
.product-card:hover {
border-color: var(--green-dim);
box-shadow: 0 0 14px rgba(0,255,65,0.15);
}
.product-accent { width: 4px; flex-shrink: 0; }
.product-body { padding: 14px; flex: 1; }
.product-badge {
display: inline-block; font-size: 8px; letter-spacing: 2px;
padding: 2px 8px; margin-bottom: 6px;
border: 1px solid; text-transform: uppercase;
}
.product-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.product-name {
font-family: 'Orbitron', sans-serif;
font-size: 13px; font-weight: 600; color: var(--green);
letter-spacing: 1px; line-height: 1.3; text-transform: uppercase;
}
.product-price {
font-family: 'VT323', monospace;
font-size: 26px; color: var(--green);
text-shadow: 0 0 8px var(--green); margin-left: 10px; flex-shrink: 0;
}
.product-desc { font-size: 11px; color: #6a8a6a; line-height: 1.6; margin-bottom: 12px; }
.add-btn {
padding: 7px 16px; background: transparent;
border: 1px solid var(--green-dim); cursor: pointer;
color: var(--green); font-size: 10px; letter-spacing: 2px;
font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
transition: all 0.2s;
}
.add-btn:hover {
background: rgba(0,255,65,0.1);
box-shadow: 0 0 8px rgba(0,255,65,0.3);
}
.add-btn::before { content: '+ '; }
.store-callout {
margin-top: 20px; padding: 16px;
border: 1px solid var(--green-dark);
background: var(--terminal);
position: relative;
}
.store-callout::before {
content: '// DECK SPECS';
position: absolute; top: -1px; left: 12px;
background: var(--black); padding: 0 6px;
font-size: 9px; letter-spacing: 2px; color: var(--green-dim);
transform: translateY(-50%);
}
.store-callout-title {
font-family: 'Orbitron', sans-serif;
font-size: 13px; color: var(--green); letter-spacing: 1px; margin-bottom: 8px;
}
.store-callout-text { font-size: 11px; color: #6a8a6a; line-height: 1.7; margin-bottom: 12px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
font-size: 9px; letter-spacing: 2px; padding: 3px 8px;
border: 1px solid var(--green-dark); color: var(--green-dim);
}
/* ══════════════════════════════════════════════════
SUBSCRIBE / PLANS
══════════════════════════════════════════════════ */
.plans-intro { text-align: center; margin-bottom: 24px; }
.plans-list { display: flex; flex-direction: column; gap: 14px; }
.plan-card {
border: 1px solid var(--green-dark);
background: var(--terminal);
padding: 18px; position: relative; overflow: hidden;
}
.plan-card.highlight {
border-color: var(--green-dim);
box-shadow: 0 0 20px rgba(0,255,65,0.1);
}
.plan-card.highlight::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0,255,65,0.015) 4px, rgba(0,255,65,0.015) 5px);
pointer-events: none;
}
.plan-popular {
position: absolute; top: 0; right: 0;
background: var(--green); color: var(--black);
font-size: 8px; letter-spacing: 2px; padding: 3px 10px;
font-family: 'Share Tech Mono', monospace;
}
.plan-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.plan-tier { font-size: 8px; letter-spacing: 3px; color: var(--dim); margin-bottom: 3px; }
.plan-name {
font-family: 'Orbitron', sans-serif;
font-size: 16px; font-weight: 700;
color: var(--green); text-shadow: 0 0 8px var(--green); letter-spacing: 2px;
}
.plan-price { font-family: 'VT323', monospace; font-size: 36px; color: var(--green); text-shadow: 0 0 10px var(--green); }
.plan-period { font-size: 11px; color: var(--dim); }
.plan-features { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.plan-feature { display: flex; align-items: flex-start; gap: 8px; }
.plan-feature::before { content: '>'; color: var(--green); font-size: 11px; margin-top: 1px; flex-shrink: 0; }
.plan-feature-text { font-size: 12px; color: #8aaa8a; line-height: 1.4; }
.plan-btn {
width: 100%; padding: 10px 0;
background: transparent; border: 1px solid var(--green-dim);
cursor: pointer; color: var(--green);
font-size: 10px; letter-spacing: 3px;
font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
transition: all 0.2s;
}
.plan-btn:hover, .plan-card.highlight .plan-btn {
background: rgba(0,255,65,0.08);
box-shadow: 0 0 12px rgba(0,255,65,0.2);
}
.plan-btn::before { content: '>> '; }
.guarantee {
margin-top: 16px; padding: 12px;
border: 1px solid var(--green-dark);
background: rgba(0,255,65,0.02); text-align: center;
}
.guarantee-label { font-size: 9px; letter-spacing: 2px; color: var(--green-dim); margin-bottom: 4px; }
.guarantee-label::before { content: '// '; }
.guarantee-text { font-size: 11px; color: #5a7a5a; line-height: 1.6; }
/* ══════════════════════════════════════════════════
LIBRARY
══════════════════════════════════════════════════ */
.filter-bar {
display: flex; gap: 6px; overflow-x: auto;
scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px;
}
.filter-btn {
flex: none; padding: 5px 12px;
background: transparent; border: 1px solid var(--green-dark);
color: var(--dim); font-size: 9px; letter-spacing: 2px;
cursor: pointer; font-family: 'Share Tech Mono', monospace;
text-transform: uppercase; transition: all 0.2s;
}
.filter-btn.active {
border-color: var(--green-dim); color: var(--green);
background: rgba(0,255,65,0.06);
box-shadow: 0 0 6px rgba(0,255,65,0.2);
}
.library-list { display: flex; flex-direction: column; gap: 10px; }
.library-item {
border: 1px solid var(--green-dark);
background: var(--terminal);
padding: 12px 14px; display: flex; align-items: center; gap: 12px;
transition: border-color 0.2s;
}
.library-item:hover { border-color: var(--green-dim); }
.lib-icon {
width: 40px; height: 40px;
border: 1px solid var(--green-dark);
display: flex; align-items: center; justify-content: center;
font-family: 'VT323', monospace; font-size: 22px;
flex-shrink: 0;
}
.lib-name {
font-family: 'Orbitron', sans-serif;
font-size: 11px; font-weight: 600; letter-spacing: 1px;
margin-bottom: 2px; text-transform: uppercase;
}
.lib-kw { font-size: 9px; letter-spacing: 2px; color: var(--dim); margin-bottom: 4px; }
.lib-meaning { font-size: 10px; color: #6a8a6a; font-style: italic; line-height: 1.5; }
.lib-locked {
margin-top: 10px; padding: 18px;
border: 1px dashed var(--green-dark);
text-align: center;
}
.lib-locked-title { font-family:'Orbitron',sans-serif; font-size:13px; color:var(--dim); margin-bottom:6px; }
.lib-locked-sub { font-size:11px; color:#3a5a3a; margin-bottom:14px; }
.view-plans-btn {
padding: 7px 18px; background: transparent;
border: 1px solid var(--green-dark); cursor: pointer;
color: var(--green-dim); font-size: 9px; letter-spacing: 2px;
font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
transition: all 0.2s;
}
.view-plans-btn:hover { border-color: var(--green-dim); color: var(--green); }
.view-plans-btn::before { content: '> '; }
/* ══════════════════════════════════════════════════
CART DRAWER
══════════════════════════════════════════════════ */
.cart-overlay {
position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,0.8); display: none;
}
.cart-overlay.open { display: block; }
.cart-drawer {
position: absolute; right: 0; top: 0; bottom: 0;
width: min(340px,90vw);
background: #000; border-left: 1px solid var(--green-dim);
padding: 20px; display: flex; flex-direction: column; gap: 14px;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -10px 0 40px rgba(0,255,65,0.1);
}
.cart-overlay.open .cart-drawer { transform: translateX(0); }
.cart-header { display: flex; justify-content: space-between; align-items: center; }
.cart-title {
font-family: 'Orbitron', sans-serif;
font-size: 14px; color: var(--green);
text-shadow: 0 0 8px var(--green); letter-spacing: 2px;
}
.cart-close {
background: none; border: 1px solid var(--green-dark);
color: var(--green); font-size: 14px; cursor: pointer;
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.cart-close:hover { border-color: var(--green); box-shadow: 0 0 8px rgba(0,255,65,0.3); }
.cart-empty { color: var(--dim); font-size: 12px; text-align: center; margin-top: 40px; line-height: 1.7; }
.cart-empty::before { content: '> '; color: var(--green-dim); }
.cart-items { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.cart-item {
background: var(--terminal); border: 1px solid var(--green-dark);
padding: 10px 12px; display: flex; justify-content: space-between; align-items: center;
}
.cart-item-name { font-size: 11px; color: var(--green); letter-spacing: 1px; text-transform: uppercase; }
.cart-item-qty { font-size: 10px; color: var(--dim); margin-top: 2px; }
.cart-item-price { font-family: 'VT323', monospace; color: var(--green); font-size: 20px; }
.cart-footer { border-top: 1px solid var(--green-dark); padding-top: 14px; }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 12px; }
.cart-total-label { font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:2px; }
.cart-total-amount { font-family:'VT323',monospace; font-size:24px; color:var(--green); text-shadow: 0 0 8px var(--green); }
.checkout-btn {
width: 100%; padding: 12px 0;
background: rgba(0,255,65,0.1); border: 1px solid var(--green);
color: var(--green); font-family: 'Share Tech Mono', monospace;
font-size: 11px; letter-spacing: 3px; cursor: pointer; text-transform: uppercase;
box-shadow: 0 0 12px rgba(0,255,65,0.2);
transition: all 0.2s;
}
.checkout-btn:hover { background: rgba(0,255,65,0.18); box-shadow: 0 0 20px rgba(0,255,65,0.4); }
.checkout-btn::before { content: '>> '; }
/* ══════════════════════════════════════════════════
TOAST
══════════════════════════════════════════════════ */
.toast {
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
background: var(--terminal); border: 1px solid var(--green);
color: var(--green); padding: 8px 18px; font-size: 11px;
z-index: 1000; box-shadow: 0 0 20px rgba(0,255,65,0.4);
opacity: 0; pointer-events: none; transition: opacity 0.2s;
letter-spacing: 1px;
}
.toast::before { content: '> '; }
.toast.show { opacity: 1; }
/* ══════════════════════════════════════════════════
BOTTOM NAV
══════════════════════════════════════════════════ */
.bottom-nav {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
background: rgba(0,0,0,0.97);
border-top: 1px solid var(--green-dark);
display: flex; justify-content: space-around;
padding: 8px 0 10px;
}
.bottom-nav::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--green-dim), transparent);
}
.nav-btn {
background: none; border: none; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 3px;
color: var(--dim); transition: color 0.2s;
font-family: 'Share Tech Mono', monospace;
}
.nav-btn.active { color: var(--green); }
.nav-btn.active .nav-icon { text-shadow: 0 0 8px var(--green); }
.nav-icon { font-size: 16px; line-height: 1; font-family: 'VT323', monospace; }
.nav-label { font-size: 7px; letter-spacing: 2px; text-transform: uppercase; }
</style>
</head>
<body>
<!-- Ambient effects -->
<div class="bg-orbs">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="grid-bg"></div>
<div class="scanline-anim"></div>
<!-- Toast -->
<div class="toast" id="toast"></div>
<!-- ══ CART DRAWER ══════════════════════════════════════════════ -->
<div class="cart-overlay" id="cartOverlay">
<div class="cart-drawer">
<div class="cart-header">
<div class="cart-title">ACQUIRE</div>
<button class="cart-close" onclick="closeCart()">✕</button>
</div>
<div id="cartBody">
<div class="cart-empty">no items in queue. load something.</div>
</div>
</div>
</div>
<!-- ══ HEADER ═══════════════════════════════════════════════════ -->
<header class="header">
<div class="logo-area">
<div class="logo-icon">CP</div>
<div>
<div class="logo-main">CYBERPUNK PHILOSOPHICA</div>
<div class="logo-sub">TAROT.SYS v2.0 // ONLINE</div>
</div>
</div>
<button class="cart-btn" onclick="openCart()">
[CART] <span class="cart-badge" id="cartCount" style="display:none">0</span>
</button>
</header>
<!-- ══ STATUS BAR ════════════════════════════════════════════════ -->
<div class="status-bar">
<div class="status-item">
<div class="status-dot green"></div>
<span class="status-text">SYSTEM:</span>
<span class="status-val">NOMINAL</span>
</div>
<div class="status-item">
<div class="status-dot amber"></div>
<span class="status-text">ORACLE:</span>
<span class="status-val">ACTIVE</span>
</div>
<div class="status-item">
<div class="status-dot blue"></div>
<span class="status-text">PHILOSOPHERS:</span>
<span class="status-val">4 LOADED</span>
</div>
<div class="status-item">
<div class="status-dot green"></div>
<span class="status-text">DATE:</span>
<span class="status-val" id="statusDate"></span>
</div>
</div>
<!-- ══ TAB NAV ═══════════════════════════════════════════════════ -->
<nav class="tab-nav">
<button class="tab-btn active" onclick="switchTab('home',this)">Daily Pull</button>
<button class="tab-btn" onclick="switchTab('spread',this)">4-Card Spread</button>
<button class="tab-btn" onclick="switchTab('store',this)">Acquire</button>
<button class="tab-btn" onclick="switchTab('subscribe',this)">Access</button>
<button class="tab-btn" onclick="switchTab('library',this)">Archive</button>
</nav>
<!-- ══ CONTENT ════════════════════════════════════════════════════ -->
<main class="content">
<!-- ── DAILY PULL ──────────────────────────────────────────── -->
<div class="tab-panel active" id="panel-home">
<div class="section-head">
<div class="prompt">initializing daily oracle sequence<span class="cursor">_</span></div>
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
<div class="section-title">DAILY TRANSMISSION</div>
<div style="font-size:9px; color:var(--dim); letter-spacing:1px;" id="todayDate"></div>
</div>
<div class="section-sub">One card. One philosopher. One moment of clarity.</div>
</div>
```
<div class="phil-tags" id="philTags">
<div class="phil-tag ovid">OVID // METAMORPHOSIS</div>
<div class="phil-tag soc">SOCRATES // DIALECTIC</div>
<div class="phil-tag nietz">NIETZSCHE // WILL</div>
<div class="phil-tag epic">EPICURUS // ATARAXIA</div>
</div>
<!-- Flip card -->
<div class="card-wrap">
<div class="card-inner" id="dailyCard" onclick="flipCard()">
<!-- Back -->
<div class="card-face card-back">
<div class="card-back-grid"></div>
<div class="card-back-hex" id="hexText"></div>
<div class="card-back-logo">CP</div>
<div class="card-back-sub">PHILOSOPHICA</div>
<div class="card-back-tap">[ TAP TO DECRYPT ]</div>
<div class="card-back-corner tl"></div>
<div class="card-back-corner tr"></div>
<div class="card-back-corner bl"></div>
<div class="card-back-corner br"></div>
</div>
<!-- Front -->
<div class="card-face card-front" id="cardFront">
<div class="card-front-scan"></div>
<div class="cf-top">
<div class="cf-num" id="cfNum"></div>
<div class="cf-suit" id="cfSuit"></div>
</div>
<div class="cf-icon" id="cfIcon"></div>
<div class="cf-name-wrap">
<div class="cf-name" id="cfName"></div>
<div class="cf-trad" id="cfTrad"></div>
<div class="cf-keyword" id="cfKeyword"></div>
</div>
<div class="cf-meaning" id="cfMeaning"></div>
<div class="cf-brand">CYBERPUNK PHILOSOPHICA</div>
</div>
</div>
</div>
<!-- Reveal detail -->
<div class="reveal-detail" id="revealDetail">
<div class="terminal-box" data-label="// CARD ANALYSIS">
<div class="tb-name" id="tbName"></div>
<div class="tb-sub" id="tbSub"></div>
<div class="tb-text" id="tbText"></div>
<div class="tb-divider"></div>
<div class="tb-note">
<span class="hl">SYS MSG:</span> Transmission confirmed. The oracle has spoken. Process this data with the discipline of all four schools.
</div>
</div>
<div class="phil-box" id="philBox">
<div style="font-size:28px; font-family:'VT323',monospace; line-height:1; flex-shrink:0;" id="pbIcon"></div>
<div>
<div class="phil-label" id="pbLabel"></div>
<div class="phil-text" id="pbText"></div>
</div>
</div>
<div class="journal-box">
<div class="journal-label">REFLECTION PROMPT</div>
<div class="journal-text" id="journalText"></div>
</div>
</div>
<div class="tap-hint" id="tapHint">[ TAP CARD TO RECEIVE TODAY'S TRANSMISSION ]</div>
```
</div>
<!-- ── 4-CARD SPREAD ────────────────────────────────────────── -->
<div class="tab-panel" id="panel-spread">
<div class="section-head" style="text-align:center;">
<div class="section-title">DIALECTIC SPREAD</div>
<div class="section-sub">The 4-node philosophical query system</div>
</div>
<div class="spread-grid" id="spreadGrid"></div>
<div class="spread-complete" id="spreadComplete">
<div class="sc-title">SEQUENCE COMPLETE</div>
<div class="sc-text">All four philosophical nodes resolved. The pattern is visible. What does the system tell you?</div>
<button class="reset-btn" onclick="initSpread()">FLUSH AND REDRAW</button>
</div>
</div>
<!-- ── STORE ─────────────────────────────────────────────────── -->
<div class="tab-panel" id="panel-store">
<div class="section-head">
<div class="prompt">browsing acquisition catalog<span class="cursor">_</span></div>
<div class="section-title">ACQUIRE</div>
<div class="section-sub">Physical artifacts. Digital transmissions. All authenticated.</div>
</div>
<div class="product-list" id="productList"></div>
<div class="store-callout">
<div class="store-callout-title">PRINT SPEC // BLACK-CORE MATTE</div>
<div class="store-callout-text">78 cards. Philosopher color-coded by suit. Ovid in amber, Socrates in electric blue, Nietzsche in acid green, Epicurus in deep purple. 320gsm black-core matte stock. Neo-noir iconography throughout.</div>
<div class="tags">
<span class="tag">78 CARDS</span>
<span class="tag">300 DPI</span>
<span class="tag">4 PHILOSOPHERS</span>
<span class="tag">NEO-NOIR</span>
<span class="tag">BLACK-CORE</span>
</div>
</div>
</div>
<!-- ── ACCESS / SUBSCRIBE ────────────────────────────────────── -->
<div class="tab-panel" id="panel-subscribe">
<div class="plans-intro">
<div style="font-family:'VT323',monospace; font-size:48px; color:var(--green); text-shadow:0 0 20px var(--green); margin-bottom:8px; animation:glitchText 8s infinite;">ACCESS</div>
<div class="section-title" style="font-size:14px;">SELECT YOUR NODE</div>
<div class="section-sub" style="margin-top:4px;">Authenticate. Subscribe. Transmit daily.</div>
</div>
<div class="plans-list" id="plansList"></div>
<div class="guarantee">
<div class="guarantee-label">PROTOCOL GUARANTEE</div>
<div class="guarantee-text">Cancel any cycle. No lockout. 14-day free trial on Foundation and Master nodes. The examined life begins when you do.</div>
</div>
</div>
<!-- ── ARCHIVE / LIBRARY ─────────────────────────────────────── -->
<div class="tab-panel" id="panel-library">
<div class="section-head">
<div class="prompt">querying card database<span class="cursor">_</span></div>
<div class="section-title">ARCHIVE</div>
<div class="section-sub">78 philosophical nodes // partial access</div>
</div>
<div class="filter-bar">
<button class="filter-btn active" onclick="filterLib('All',this)">ALL</button>
<button class="filter-btn" onclick="filterLib('Major Arcana',this)">MAJOR</button>
<button class="filter-btn" onclick="filterLib('Circuits',this)">CIRCUITS</button>
<button class="filter-btn" onclick="filterLib('Blades',this)">BLADES</button>
<button class="filter-btn" onclick="filterLib('Conduits',this)">CONDUITS</button>
<button class="filter-btn" onclick="filterLib('Vessels',this)">VESSELS</button>
</div>
<div class="library-list" id="libraryList"></div>
<div class="lib-locked">
<div class="lib-locked-title">// 72 NODES ENCRYPTED</div>
<div class="lib-locked-sub">Authenticate to access the full 78-card archive</div>
<button class="view-plans-btn" onclick="switchTabByName('subscribe')">AUTHENTICATE</button>
</div>
</div>
</main>
<!-- ══ BOTTOM NAV ════════════════════════════════════════════════ -->
<nav class="bottom-nav">
<button class="nav-btn active" id="nav-home" onclick="switchTab('home',null,'nav-home')">
<span class="nav-icon">◎</span><span class="nav-label">DAILY</span>
</button>
<button class="nav-btn" id="nav-spread" onclick="switchTab('spread',null,'nav-spread')">
<span class="nav-icon">⊞</span><span class="nav-label">SPREAD</span>
</button>
<button class="nav-btn" id="nav-store" onclick="switchTab('store',null,'nav-store')">
<span class="nav-icon">⟁</span><span class="nav-label">ACQUIRE</span>
</button>
<button class="nav-btn" id="nav-subscribe" onclick="switchTab('subscribe',null,'nav-subscribe')">
<span class="nav-icon">⬡</span><span class="nav-label">ACCESS</span>
</button>
<button class="nav-btn" id="nav-library" onclick="switchTab('library',null,'nav-library')">
<span class="nav-icon">≡</span><span class="nav-label">ARCHIVE</span>
</button>
</nav>
<!-- ══════════════════════════════════════════════════════════════
JAVASCRIPT
══════════════════════════════════════════════════════════════ -->
<script>
// ── Philosopher color map ──────────────────────────────────────
const PHIL_COLORS = {
ovid: { color:'#ffb000', label:'OVID // CIRCUITS', boxBorder:'rgba(255,176,0,0.4)', boxBg:'rgba(255,176,0,0.05)' },
soc: { color:'#00cfff', label:'SOCRATES // BLADES', boxBorder:'rgba(0,207,255,0.4)', boxBg:'rgba(0,207,255,0.05)' },
nietz: { color:'#a8ff00', label:'NIETZSCHE // CONDUITS', boxBorder:'rgba(168,255,0,0.4)', boxBg:'rgba(168,255,0,0.05)' },
epic: { color:'#cc44ff', label:'EPICURUS // VESSELS', boxBorder:'rgba(204,68,255,0.4)', boxBg:'rgba(204,68,255,0.05)' },
};
// ── Card data ──────────────────────────────────────────────────
const CARDS = [
{
num:'VIII', name:'THE OVERRIDE', trad:'Strength (VIII)',
keyword:'PATIENT POWER', suit:'MAJOR ARCANA', icon:'∞',
phil:'nietz', philText:'Nietzsche\'s will to power is not brute force. It is the quiet capacity to master the self before mastering anything else. Override the weak signal within.',
upright:'The inner system overpowers the glitch. Gentle discipline rewrites even the most corrupted code.',
journal:'What force within you has been running as background process for too long? Name it. Override it.',
},
{
num:'ACE', name:'KERNEL OF CIRCUITS', trad:'Ace of Pentacles',
keyword:'MATERIAL SEED', suit:'CIRCUITS // OVID',icon:'◈',
phil:'ovid', philText:'In Ovid\'s cosmology, every material thing contains its own metamorphosis. This seed is not stable — it is already becoming something else.',
upright:'A new material form is offered. The flesh is ready to be rewritten. Take the node.',
journal:'What tangible thing are you being given the chance to transform right now?',
},
{
num:'IX', name:'THE SIGNAL', trad:'The Hermit (IX)',
keyword:'SOLITARY CLARITY', suit:'MAJOR ARCANA', icon:'⊙',
phil:'soc', philText:'Socrates withdrew from the agora not to escape but to think more clearly about it. The Signal does not broadcast to everyone. It waits for those who know how to listen.',
upright:'Go dark. Sever external input. The clearest frequency is the one you find in silence.',
journal:'What truth have you been unable to hear because the noise level is too high?',
},
{
num:'FOUR', name:'FOUR OF VESSELS', trad:'Four of Cups',
keyword:'REEVALUATION', suit:'VESSELS // EPICURUS', icon:'◐',
phil:'epic', philText:'Epicurus distinguished between what we need and what we are told we need. The four cups before you include one you have not examined. Is your dissatisfaction genuine, or manufactured?',
upright:'Something is being offered that your current configuration is ignoring. Look again.',
journal:'What simple pleasure are you overlooking because you are focused on what you lack?',
},
{
num:'XVI', name:'CASCADE FAILURE', trad:'The Tower (XVI)',
keyword:'NECESSARY COLLAPSE', suit:'MAJOR ARCANA', icon:'△',
phil:'ovid', philText:'Every collapse in the Metamorphoses reveals what was underneath. Daphne becomes a laurel. The tower falls and shows you the ground. What was built on false architecture had to go.',
upright:'The infrastructure was corrupted. The cascade was inevitable. What is revealed in the wreckage?',
journal:'What have you been maintaining that was already a ruin?',
},
{
num:'VIII', name:'EIGHT OF CONDUITS', trad:'Eight of Wands',
keyword:'SWIFT MOMENTUM', suit:'CONDUITS // NIETZSCHE', icon:'⟁',
phil:'nietz', philText:'The Nietzschean will does not wait for permission. When the foundations are solid enough to move fast, you move fast. Eight conduits in purposeful flight.',
upright:'The system is ready. The signal is clear. Execute without hesitation.',
journal:'What action have you been delaying that the current momentum is ready to carry?',
},
{
num:'XVII', name:'THE UPLINK', trad:'The Star (XVII)',
keyword:'LONG SIGNAL', suit:'MAJOR ARCANA', icon:'✦',
phil:'epic', philText:'Epicurus said: do not spoil what you have by desiring what you have not. The Uplink connects you not to everything but to exactly what you need. A quiet transmission from a distant source.',
upright:'Hope is not a system error. Maintain the connection. The long signal is reaching you.',
journal:'What source of quiet hope have you been dismissing as noise?',
},
{
num:'II', name:'TWO OF BLADES', trad:'Two of Swords',
keyword:'FORCED DECISION', suit:'BLADES // SOCRATES', icon:'✕',
phil:'soc', philText:'Socrates spent his life at exactly this crossroads — the moment where you must choose which truth you will defend. Both blades are yours. The blindfold is not protection. It is delay.',
upright:'Aporia. The impasse is real. Remove the blindfold and look at both options with Socratic clarity.',
journal:'What uncomfortable truth are you avoiding by pretending the decision is too difficult to make?',
},
];
const PRODUCTS = [
{ id:1, name:'PHILOSOPHICA DECK', desc:'78-card full deck. Philosopher-coded suits. Black-core matte 320gsm. Neo-noir iconography. Standard 2.75" x 4.75".', price:48, badge:'PRIMARY', badgeColor:'#00ff41', accentColor:'#00aa2a' },
{ id:2, name:'THE EXAMINED JOURNAL', desc:'90-day Socratic reflection journal. Daily prompts drawn from all four philosophical schools. Dialectic tracking pages.', price:29, badge:'NEW NODE', badgeColor:'#00cfff', accentColor:'#00cfff' },
{ id:3, name:'SYSTEM GUIDE PDF', desc:'Full 78-card philosophical interpretations. Upright and reversed meanings. Complete spread system. Instant decryption.', price:22, badge:null, badgeColor:'', accentColor:'#a8ff00' },
{ id:4, name:'FULL STACK BUNDLE', desc:'Deck + Journal + PDF at 15% compression. The complete philosopher\'s operating system. One acquisition, total access.', price:79, badge:'BUNDLE', badgeColor:'#cc44ff', accentColor:'#cc44ff' },
];
const PLANS = [
{ name:'NODE', price:9, highlight:false, features:['Daily 1-card transmission','Philosopher context note','Card meaning access','Basic archive access'] },
{ name:'FOUNDATION', price:19, highlight:true, features:['Daily 4-card dialectic spread','Full philosophical context','Monthly system analysis','Complete reading history','Priority queue access'] },
{ name:'ARCHITECT', price:44, highlight:false, features:['Everything in Foundation','Weekly live group query','Deck discount 20% off','Full course access','Direct philosopher Q&A channel'] },
];
const SPREAD_POSITIONS = ['Foundation','Dialectic','Transmission','Execute'];
const SPREAD_QUESTIONS = ['What node am I building on?','Where does rigorous inquiry point?','What is the system transmitting?','One action to execute now?'];
// ── State ──────────────────────────────────────────────────────
let cart = [];
let spreadCards = [];
let spreadRevealed = [false,false,false,false];
// ── Init ───────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
setDate();
generateHexText();
setDailyCard();
renderProducts();
renderPlans();
renderLibrary();
initSpread();
});
function setDate() {
const d = new Date();
const str = d.toLocaleDateString('en-US',{weekday:'short',year:'numeric',month:'short',day:'numeric'}).toUpperCase();
document.getElementById('statusDate').textContent = str;
document.getElementById('todayDate').textContent = str;
}
// Generate hex-looking background text for card back
function generateHexText() {
const chars = '0123456789ABCDEF';
let hex = '';
for (let i = 0; i < 80; i++) {
if (i % 8 === 0 && i > 0) hex += '\n';
hex += chars[Math.floor(Math.random() * 16)];
if (i % 2 === 1) hex += ' ';
}
document.getElementById('hexText').textContent = hex;
}
// ── Daily card ─────────────────────────────────────────────────
function setDailyCard() {
const card = CARDS[new Date().getDate() % CARDS.length];
const pc = PHIL_COLORS[card.phil];
// Card front elements
document.getElementById('cfNum').textContent = card.num;
document.getElementById('cfNum').style.color = pc.color;
document.getElementById('cfSuit').textContent = card.suit;
document.getElementById('cfSuit').style.color = pc.color;
document.getElementById('cfIcon').textContent = card.icon;
document.getElementById('cfIcon').style.color = pc.color;
document.getElementById('cfName').textContent = card.name;
document.getElementById('cfName').style.color = pc.color;
document.getElementById('cfTrad').textContent = card.trad;
document.getElementById('cfKeyword').textContent = '// ' + card.keyword;
document.getElementById('cfKeyword').style.color = pc.color;
document.getElementById('cfMeaning').textContent = card.upright;
// Detail panel
document.getElementById('tbName').textContent = card.name;
document.getElementById('tbName').style.color = pc.color;
document.getElementById('tbName').style.textShadow = `0 0 10px ${pc.color}`;
document.getElementById('tbSub').textContent = card.keyword + ' // ' + card.suit;
document.getElementById('tbSub').style.color = pc.color;
document.getElementById('tbText').textContent = card.upright;
const pbBox = document.getElementById('philBox');
pbBox.style.border = `1px solid ${pc.boxBorder}`;
pbBox.style.background = pc.boxBg;
document.getElementById('pbIcon').textContent = card.icon;
document.getElementById('pbIcon').style.color = pc.color;
document.getElementById('pbLabel').textContent = pc.label;
document.getElementById('pbLabel').style.color = pc.color;
document.getElementById('pbText').textContent = card.philText;
document.getElementById('pbText').style.color = '#9aaa9a';
document.getElementById('journalText').textContent = card.journal;
}
function flipCard() {
const el = document.getElementById('dailyCard');
if (el.classList.contains('flipped')) return;
el.classList.add('flipped');
document.getElementById('tapHint').style.display = 'none';
setTimeout(() => {
const d = document.getElementById('revealDetail');
d.classList.add('visible','fade-in');
}, 700);
}
// ── Spread ─────────────────────────────────────────────────────
function initSpread() {
spreadCards = [...CARDS].sort(() => Math.random() - 0.5).slice(0,4);
spreadRevealed = [false,false,false,false];
document.getElementById('spreadComplete').classList.remove('visible');
renderSpread();
}
function renderSpread() {
const grid = document.getElementById('spreadGrid');
grid.innerHTML = '';
SPREAD_POSITIONS.forEach((pos,i) => {
const card = spreadCards[i];
const revealed = spreadRevealed[i];
const pc = card ? PHIL_COLORS[card.phil] : null;
const div = document.createElement('div');
div.className = 'spread-card' + (revealed ? ' revealed' : '');
div.id = 'sc-'+i;
if (!revealed) div.onclick = () => revealSpreadCard(i);
div.innerHTML = `
<div class="sp-num">POSITION ${i+1}</div>
<div class="sp-name">${pos}</div>
<div class="sp-question">${SPREAD_QUESTIONS[i]}</div>
${revealed && card ? `
<div class="sp-result" style="border-color:${pc.boxBorder}; background:${pc.boxBg};">
<div class="sp-card-icon" style="color:${pc.color};">${card.icon}</div>
<div class="sp-card-name" style="color:${pc.color};">${card.name}</div>
<div class="sp-card-kw" style="color:${pc.color};">${card.keyword}</div>
<div class="sp-card-meaning">${card.upright}</div>
</div>
` : `
<div class="sp-placeholder">
<div class="sp-ph-num">CP</div>
<div class="sp-ph-tap">[ TAP TO DECRYPT ]</div>
</div>
`}
`;
grid.appendChild(div);
});
}
function revealSpreadCard(i) {
if (spreadRevealed[i]) return;
spreadRevealed[i] = true;
renderSpread();
if (spreadRevealed.every(Boolean)) {
setTimeout(() => document.getElementById('spreadComplete').classList.add('visible'), 300);
}
}
// ── Products ───────────────────────────────────────────────────
function renderProducts() {
const list = document.getElementById('productList');
PRODUCTS.forEach(p => {
const div = document.createElement('div');
div.className = 'product-card';
div.innerHTML = `
<div class="product-accent" style="background:${p.accentColor};box-shadow:0 0 6px ${p.accentColor};"></div>
<div class="product-body">
${p.badge ? `<div class="product-badge" style="border-color:${p.badgeColor};color:${p.badgeColor};">${p.badge}</div>` : ''}
<div class="product-header">
<div class="product-name" style="color:${p.accentColor};text-shadow:0 0 8px ${p.accentColor};">${p.name}</div>
<div class="product-price" style="color:${p.accentColor};text-shadow:0 0 8px ${p.accentColor};">$${p.price}</div>
</div>
<div class="product-desc">${p.desc}</div>
<button class="add-btn" style="border-color:${p.accentColor};color:${p.accentColor};" onclick="addToCart(${p.id})">ADD TO QUEUE</button>
</div>
`;
list.appendChild(div);
});
}
// ── Plans ──────────────────────────────────────────────────────
function renderPlans() {
const list = document.getElementById('plansList');
PLANS.forEach(plan => {
const div = document.createElement('div');
div.className = 'plan-card' + (plan.highlight ? ' highlight' : '');
div.innerHTML = `
${plan.highlight ? '<div class="plan-popular">// OPTIMAL NODE</div>' : ''}
<div class="plan-header">
<div>
<div class="plan-tier">// CYBERPUNK PHILOSOPHICA</div>
<div class="plan-name">${plan.name}</div>
</div>
<div style="text-align:right;">
<div class="plan-price">$${plan.price}</div>
<div class="plan-period">/ cycle</div>
</div>
</div>
<div class="plan-features">
${plan.features.map(f=>`<div class="plan-feature"><span class="plan-feature-text">${f}</span></div>`).join('')}
</div>
<button class="plan-btn">${plan.highlight ? 'AUTHENTICATE NOW' : 'INITIALIZE'}</button>
`;
list.appendChild(div);
});
}
// ── Library ────────────────────────────────────────────────────
function renderLibrary(filter) {
const list = document.getElementById('libraryList');
list.innerHTML = '';
const filtered = filter && filter !== 'All'
? CARDS.filter(c => c.suit.toUpperCase().includes(filter.toUpperCase()))
: CARDS;
filtered.forEach(card => {
const pc = PHIL_COLORS[card.phil];
const div = document.createElement('div');
div.className = 'library-item fade-in';
div.innerHTML = `
<div class="lib-icon" style="border-color:${pc.boxBorder};color:${pc.color};box-shadow:0 0 6px ${pc.boxBorder};">${card.icon}</div>
<div>
<div class="lib-name" style="color:${pc.color};text-shadow:0 0 6px ${pc.color};">${card.name}</div>
<div class="lib-kw">${card.keyword} // ${card.suit}</div>
<div class="lib-meaning">${card.upright}</div>
</div>
`;
list.appendChild(div);
});
}
function filterLib(filter, btn) {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
renderLibrary(filter);
}
// ── Cart ───────────────────────────────────────────────────────
function addToCart(id) {
const product = PRODUCTS.find(p => p.id === id);
const existing = cart.find(i => i.id === id);
if (existing) { existing.qty++; } else { cart.push({...product, qty:1}); }
updateCartUI();
showToast(product.name + ' added to queue');
}
function updateCartUI() {
const count = cart.reduce((s,i)=>s+i.qty,0);
const badge = document.getElementById('cartCount');
badge.textContent = count;
badge.style.display = count > 0 ? 'flex' : 'none';
renderCartBody();
}
function renderCartBody() {
const body = document.getElementById('cartBody');
if (cart.length === 0) {
body.innerHTML = '<div class="cart-empty">no items in queue. load something.</div>';
return;
}
const total = cart.reduce((s,i)=>s+(i.price*i.qty),0);
body.innerHTML = `
<div class="cart-items">
${cart.map(item=>`
<div class="cart-item">
<div>
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-qty">QTY: ${item.qty} × $${item.price}</div>
</div>
<div class="cart-item-price">$${item.price*item.qty}</div>
</div>
`).join('')}
</div>
<div class="cart-footer">
<div class="cart-total">
<span class="cart-total-label">TOTAL</span>
<span class="cart-total-amount">$${total}</span>
</div>
<button class="checkout-btn">EXECUTE TRANSACTION</button>
</div>
`;
}
function openCart() { document.getElementById('cartOverlay').classList.add('open'); }
function closeCart() { document.getElementById('cartOverlay').classList.remove('open'); }
document.getElementById('cartOverlay').addEventListener('click', function(e) {
if (e.target === this) closeCart();
});
// ── Toast ──────────────────────────────────────────────────────
function showToast(msg) {
const t = document.getElementById('toast');
t.textContent = msg;
t.classList.add('show');
setTimeout(() => t.classList.remove('show'), 2500);
}
// ── Tab switching ──────────────────────────────────────────────
function switchTab(tabId, topBtn, navId) {
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
document.getElementById('panel-' + tabId).classList.add('active');
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
if (topBtn) topBtn.classList.add('active');
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
const navTarget = navId || 'nav-' + tabId;
if (document.getElementById(navTarget)) document.getElementById(navTarget).classList.add('active');
if (navId) {
const tabIndex = ['home','spread','store','subscribe','library'].indexOf(tabId);
const topBtns = document.querySelectorAll('.tab-btn');
if (topBtns[tabIndex]) topBtns[tabIndex].classList.add('active');
}
if (tabId === 'spread' && spreadCards.length === 0) initSpread();
window.scrollTo(0,0);
}
function switchTabByName(tabId) {
const idx = ['home','spread','store','subscribe','library'].indexOf(tabId);
const topBtns = document.querySelectorAll('.tab-btn');
switchTab(tabId, topBtns[idx] || null, 'nav-'+tabId);
}
</script>
</body>
</html>Upcoming Events
Paul Peavey – Online Concerts
Click on the picture for more info and availability
23 Mar
Phoneix, AR
Vivamus magna justo, lacinia eget consectetur sed
15 Jun
Denver, CO
Vivamus magna justo, lacinia eget consectetur sed
08 Jul
Chicago, MI
Vivamus magna justo, lacinia eget consectetur sed
09 Aug
Detroit, MI
Vivamus magna justo, lacinia eget consectetur sed
21 Sep
Dallas, TX
Vivamus magna justo, lacinia eget consectetur sed
15 Oct
Toronto, CA
Vivamus magna justo, lacinia eget consectetur sed