/* ============================================================ PIMP-AREA — shared front-end stylesheet Used by login.php, register.php and index.php (in-game shell). THEMES. index.php puts data-theme on from accounts.theme; the player picks it in modules/17.php. Everything below :root is written in tokens only, so a theme is nothing but a new set of values. Each token has exactly ONE job. That matters: --ink and --cream used to carry two each (border AND dark text; light surface AND light text), which made a dark theme impossible - one value cannot be both the dark text and the light text. They were split 2026-07-26. surfaces, light to dark ..... --sage --sage2 --sage3 content surface ............. --cream (light in classic, dark elsewhere) row / button hover .......... --hover borders, shadows, form dots .. --ink (dark in every theme) accent ...................... --gold semantic .................... --win --loss --alert body text, and text on ...... --text (dark in classic, light elsewhere) --cream / --hover / --sage text on a --gold chip ....... --on-accent (gold is light everywhere -> always dark) light text on a dark or ..... --text-lt (light in every theme) saturated surface secondary text .............. --muted accent-coloured text ........ --gold-ink hover variants .............. --link-hover --btn-hover --gold-hover phone-frame bezel ........... --bezel Contrast note: --sage3 has to carry BOTH --text and --text-lt, so it can never be pushed to an extreme. Classic sits at 4.0:1 for cream-on-sage3; the dark themes reach roughly 7-9:1 because their text and surface move apart instead of towards each other. ============================================================ */ :root, :root[data-theme="classic"]{ --sage:#899A8A; --sage2:#7c8e7c; --sage3:#6d806d; --cream:#FAFBCF; --hover:#9bb19d; --ink:#14180f; --gold:#d9c46a; --win:#3f8a3a; --loss:#c1402f; --text:#14180f; --on-accent:#14180f; --text-lt:#FAFBCF; --muted:#2a2f22; --gold-ink:#5a4d18; --alert:#e02020; --on-semantic:#FAFBCF; --admin-bg:var(--hover); --admin-fg:#3a5f8a; --boss-bg:var(--hover); --boss-fg:#4a2a6b; --admin-text:#3a5f8a; --rule-soft:rgba(20,24,15,.25); --rule:rgba(20,24,15,.30); --rule-strong:rgba(20,24,15,.50); --link-hover:#000; --btn-hover:#a9bfaa; --gold-hover:#e2cf7d; --bezel:#0d0f0a; } /* After hours - midnight blue, amber neon accent. */ :root[data-theme="midnight"]{ --sage:#3a4560; --sage2:#2f3850; --sage3:#252c40; --cream:#1b2030; --hover:#4a5878; --ink:#0d1018; --gold:#ffb340; --win:#35c46a; --loss:#ff5b52; --text:#e9e7f2; --on-accent:#0d1018; --text-lt:#e9e7f2; --muted:#a6adc4; --gold-ink:#ffb340; --alert:#ff5b52; --on-semantic:#0d1018; --admin-bg:#2a5a9c; --admin-fg:#e9e7f2; --boss-bg:#6b46a8; --boss-fg:#e9e7f2; --admin-text:#9cc6ff; --rule-soft:rgba(233,231,242,.14); --rule:rgba(233,231,242,.18); --rule-strong:rgba(233,231,242,.30); --link-hover:#ffb340; --btn-hover:#5a6a8c; --gold-hover:#ffc76e; --bezel:#05070c; } /* Blood money - oxblood and parchment, brass accent. */ :root[data-theme="oxblood"]{ --sage:#6e3234; --sage2:#5c2a2c; --sage3:#4a2224; --cream:#3a1a1b; --hover:#8a4143; --ink:#1a0f10; --gold:#c9a227; --win:#6bbf63; --loss:#ff7a63; --text:#f3e6cf; --on-accent:#1a0f10; --text-lt:#f3e6cf; --muted:#c9b49a; --gold-ink:#c9a227; --alert:#ff7a63; --on-semantic:#1a0f10; --admin-bg:#3f5f8a; --admin-fg:#f3e6cf; --boss-bg:#7a3f7a; --boss-fg:#f3e6cf; --admin-text:#a8c8f0; --rule-soft:rgba(243,230,207,.14); --rule:rgba(243,230,207,.18); --rule-strong:rgba(243,230,207,.30); --link-hover:#c9a227; --btn-hover:#9c4b4d; --gold-hover:#dcb63c; --bezel:#120809; } /* Concrete - cool slate, safety orange accent. */ :root[data-theme="slate"]{ --sage:#646b78; --sage2:#565e6b; --sage3:#434a56; --cream:#31363f; --hover:#6b7280; --ink:#16181c; --gold:#ff7a1a; --win:#3fbf74; --loss:#ff6b5e; --text:#ffffff; --on-accent:#16181c; --text-lt:#ffffff; --muted:#d5d8dd; --gold-ink:#ff7a1a; --alert:#ff6b5e; --on-semantic:#16181c; --admin-bg:#2f5f8f; --admin-fg:#ffffff; --boss-bg:#6a4a9c; --boss-fg:#ffffff; --admin-text:#c9e0fb; --rule-soft:rgba(255,255,255,.14); --rule:rgba(255,255,255,.18); --rule-strong:rgba(255,255,255,.30); --link-hover:#ff7a1a; --btn-hover:#8d95a3; --gold-hover:#ff934a; --bezel:#0c0d10; } :root{ --shadow:3px 3px 0 var(--ink); --shadow-sm:2px 2px 0 var(--ink); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:Verdana,Geneva,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; background:var(--sage); color:var(--text); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } a{color:var(--text);text-decoration:none;} a:hover{color:var(--link-hover);text-decoration:underline;} .mono{font-family:"Courier New",Courier,monospace;font-variant-numeric:tabular-nums;} button{font-family:inherit;cursor:pointer;} /* ---------- shared building blocks ---------- */ .heavy{ font-family:Verdana,Tahoma,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.08em; } .btn{ display:inline-block; font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase; letter-spacing:.05em;font-size:13px; padding:12px 18px; border:2px solid var(--ink); background:var(--hover); color:var(--text); box-shadow:var(--shadow-sm); transition:transform .05s ease, box-shadow .05s ease; text-align:center; } .btn:hover{text-decoration:none;background:var(--btn-hover);} .btn:active{transform:translate(2px,2px);box-shadow:none;} .btn--primary{background:var(--gold);color:var(--on-accent);} .btn--primary:hover{background:var(--gold-hover);} .btn--block{display:block;width:100%;} .btn--gold{background:var(--gold);color:var(--on-accent);} .btn--danger{background:var(--loss);color:var(--on-semantic);} /* panel = cream header + ink border + green body (reused everywhere) */ .panel{border:2px solid var(--ink);background:var(--sage2);box-shadow:var(--shadow);margin-bottom:16px;} .panel__head{ background:var(--cream);color:var(--text); font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.06em; font-size:13px;padding:8px 12px;border-bottom:2px solid var(--ink); display:flex;align-items:center;justify-content:space-between;gap:8px; } .panel__body{padding:14px;} .field{display:block;margin-bottom:14px;} .field > label{display:block;font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin-bottom:5px;} .field input[type=text],.field input[type=password],.field input[type=email]{ width:100%;padding:11px 12px;border:2px solid var(--ink);background:var(--cream); font-family:"Courier New",monospace;font-size:14px;color:var(--text); } .field input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gold);} /* inline notices (errors / success / info) */ .notice{border:2px solid var(--ink);padding:10px 12px;margin-bottom:16px;font-weight:bold;box-shadow:var(--shadow-sm);} .notice--error{background:var(--loss);color:var(--on-semantic);} .notice--ok{background:var(--win);color:var(--on-semantic);} .notice--info{background:var(--gold);color:var(--on-accent);} /* CRT scanline overlay removed (horizontal lines) */ /* ============================================================ auth (login / register) ============================================================ */ .auth{ min-height:100vh; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:40px 16px;position:relative; } .brand{text-align:center;margin-bottom:26px;} .brand__logo{ font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase; font-size:clamp(44px,9vw,84px);letter-spacing:.04em;color:var(--text-lt); text-shadow:var(--shadow), 6px 6px 0 rgba(20,24,15,.35); margin:0;line-height:.95; } .brand__tag{ margin-top:12px;font-family:"Courier New",monospace;font-weight:bold; color:var(--on-accent);background:var(--gold);display:inline-block; padding:5px 14px;border:2px solid var(--ink);box-shadow:var(--shadow-sm); text-transform:uppercase;letter-spacing:.14em;font-size:13px; } .card{ width:100%;max-width:380px; border:2px solid var(--ink);background:var(--sage2);box-shadow:5px 5px 0 var(--ink); } .card__head{ background:var(--cream);border-bottom:2px solid var(--ink); padding:12px 16px;font-family:Verdana,Tahoma,sans-serif;font-weight:900; text-transform:uppercase;letter-spacing:.08em;font-size:16px;text-align:center; } .card__body{padding:20px;} .card__foot{border-top:2px solid var(--ink);padding:14px 20px;background:var(--sage3);text-align:center;} .muted{color:var(--muted);font-size:12px;} .linkrow{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:22px;font-size:12px;} .linkrow a{font-weight:bold;} .backlink{display:inline-block;margin-bottom:14px;font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.05em;} .backlink::before{content:"\25C4 ";} /* remember-me row */ .remember{display:flex;align-items:center;gap:8px;margin:2px 0 16px;font-size:12px;font-weight:bold;} .remember input{width:16px;height:16px;accent-color:var(--ink);} /* radio / gender pills */ .pillset{display:flex;flex-wrap:wrap;gap:8px;} .pill{position:relative;} .pill input{position:absolute;opacity:0;inset:0;cursor:pointer;} .pill span{ display:block;padding:9px 12px;border:2px solid var(--ink);background:var(--cream); font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.04em;text-align:center; } .pill input:checked + span{background:var(--gold);color:var(--on-accent);box-shadow:inset 0 0 0 2px var(--ink);} .pill input:focus + span{outline:2px dashed var(--ink);outline-offset:2px;} /* news ticker */ .ticker{ margin-top:30px;width:100%;max-width:760px; border:2px solid var(--ink);background:var(--sage3);box-shadow:var(--shadow-sm); display:flex;align-items:stretch;overflow:hidden; } .ticker__tag{background:var(--gold);color:var(--on-accent);font-weight:900;text-transform:uppercase; letter-spacing:.06em;font-size:11px;padding:8px 12px;border-right:2px solid var(--ink);white-space:nowrap;display:flex;align-items:center;} .ticker__track{overflow:hidden;flex:1;display:flex;align-items:center;} .ticker__move{white-space:nowrap;font-family:"Courier New",monospace;font-size:13px;padding-left:100%; animation:tick 26s linear infinite;} .ticker__move span{margin:0 30px;} @keyframes tick{to{transform:translateX(-100%);}} .onlinecount{margin-top:14px;font-family:"Courier New",monospace;font-size:12px;color:var(--text);} /* ============================================================ in-game desktop ============================================================ */ .game{max-width:1680px;margin:0 auto;padding:16px;} .hud{ border:2px solid var(--ink);background:var(--sage2);box-shadow:var(--shadow); display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap; padding:10px 14px;margin-bottom:16px; } .hud__logo{font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase; letter-spacing:.06em;font-size:20px;color:var(--text-lt);text-shadow:var(--shadow-sm);margin-right:6px;} .stat{display:flex;flex-direction:column;line-height:1.1;} .stat b{font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.85;} .stat .val{font-family:"Courier New",monospace;font-weight:bold;font-size:15px;} .stat .val.gold{color:var(--gold-ink);} .gold-chip{background:var(--gold);color:var(--on-accent);border:2px solid var(--ink);padding:4px 10px;box-shadow:var(--shadow-sm);} .healthbar-row{display:flex;align-items:center;gap:6px;} .healthbar{width:150px;height:16px;border:2px solid var(--ink);background:var(--cream);position:relative;overflow:hidden;} .healthbar > i{position:absolute;inset:0;width:78%;background:var(--win);display:block;} .healthbar > u{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:"Courier New",monospace;font-size:11px;font-weight:bold;font-style:normal;} .hud__spacer{flex:1;} .hud__dev-notice{color:var(--alert);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:13px;white-space:nowrap;} .hud__dev-logo{height:28px;width:auto;border:1.5px solid var(--ink);box-shadow:var(--shadow-sm);} .cols{display:grid;grid-template-columns:220px 1fr 220px;gap:16px;align-items:start;} .menu .panel__body{padding:8px;} .menu-group{margin-bottom:6px;} .menu-group > h4{ margin:0;font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase; font-size:11px;letter-spacing:.08em;color:var(--text-lt); background:var(--sage3);border:2px solid var(--ink);padding:6px 10px; } .menu-group ul{list-style:none;margin:0 0 0 0;padding:4px 0;} .menu-group li a{ display:flex;align-items:center;justify-content:space-between;gap:6px; padding:6px 10px;font-size:13px;font-weight:bold; } .menu-group li a:hover{background:var(--hover);text-decoration:none;} .badge{ background:var(--loss);color:var(--text-lt);font-family:"Courier New",monospace; font-size:11px;font-weight:bold;border:1px solid var(--ink);border-radius:2px;padding:0 6px;min-width:20px;text-align:center; } .welcome__row{display:flex;gap:14px;flex-wrap:wrap;} .welcome__row .kpi{flex:1;min-width:120px;border:2px solid var(--ink);background:var(--sage3);padding:10px 12px;box-shadow:var(--shadow-sm);} .kpi b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;} .kpi .val{font-family:"Courier New",monospace;font-weight:bold;font-size:20px;} .crime-list{display:flex;flex-direction:column;gap:8px;} .crime{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);background:var(--sage3);padding:9px 12px;box-shadow:var(--shadow-sm);} .crime__info{flex:1;} .crime__info b{display:block;font-size:14px;} .crime__info small{font-size:11px;opacity:.85;} .pips{display:flex;gap:3px;margin-top:4px;} .pip{width:11px;height:11px;border:1.5px solid var(--ink);background:var(--cream);} .pip.on{background:var(--gold);} .stocks{display:flex;gap:0;overflow:hidden;border:2px solid var(--ink);background:var(--sage3);box-shadow:var(--shadow-sm);flex-wrap:wrap;} .stock{flex:1;min-width:110px;padding:8px 12px;border-right:2px solid var(--ink);} .stock:last-child{border-right:0;} .stock b{font-size:12px;letter-spacing:.04em;} .stock .price{font-family:"Courier New",monospace;font-weight:bold;font-size:16px;display:block;} .stock .chg{font-family:"Courier New",monospace;font-size:12px;font-weight:bold;} .up{color:var(--win);} .down{color:var(--loss);} .pimpcard{display:flex;gap:12px;align-items:center;} .avatar{width:64px;height:64px;border:2px solid var(--ink);background: repeating-linear-gradient(45deg,var(--sage3) 0 6px,var(--sage2) 6px 12px); box-shadow:var(--shadow-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center; font-family:"Courier New",monospace;font-size:9px;color:var(--text-lt);text-align:center;} .pimpcard__meta b{font-size:15px;display:block;} .pimpcard__meta .mono{display:block;font-size:12px;} .online-list{list-style:none;margin:0;padding:0;font-family:"Courier New",monospace;font-size:13px;} .online-list li{padding:3px 0;display:flex;align-items:center;gap:7px;} .dot{width:8px;height:8px;background:var(--win);border:1px solid var(--ink);border-radius:50%;flex-shrink:0;} .shout{display:flex;flex-direction:column;gap:6px;} .shout__log{max-height:150px;overflow:auto;font-size:12px;display:flex;flex-direction:column;gap:5px;} .shout__log p{margin:0;} .shout__log b{font-family:Verdana,sans-serif;} .shout__form{display:flex;gap:6px;} .shout__form input{flex:1;min-width:0;padding:8px;border:2px solid var(--ink);background:var(--cream);font-family:"Courier New",monospace;font-size:12px;} /* Formuliervelden erven GEEN tekstkleur van hun omgeving - de browser zet er zelf `color:fieldtext` (zwart) op. Op het lichte classic-vlak viel dat niet op, maar in de drie donkere thema's is --cream een DONKER vlak en typte de speler zwart op zwart. De velden in modules hadden dit niet: die vallen onder `main input[...]` in pimp-area-modules.css, dat wel een kleur zet. De shoutbox staat buiten main. Alleen voor de niet-classic thema's gezet, zodat classic exact blijft zoals hij is (het zou daar #000 naar #14180f schuiven - onzichtbaar, maar wel een wijziging). */ :root:not([data-theme="classic"]) .shout__form input{color:var(--text);} :root:not([data-theme="classic"]) .shout__form input::placeholder{color:var(--muted);opacity:1;} .shout__send{flex-shrink:0;padding:8px 12px;font-size:14px;line-height:1;} .news-item{border-top:1px dashed var(--ink);padding:7px 0;font-size:12px;} .news-item:first-child{border-top:0;padding-top:0;} .news-item time{font-family:"Courier New",monospace;font-size:11px;opacity:.8;display:block;} /* ============================================================ in-game mobile (phone frame + responsive) ============================================================ */ .phonewrap{display:flex;justify-content:center;padding:30px 16px 60px;} .phone{ width:390px;max-width:100%;height:800px; border:14px solid var(--bezel);border-radius:44px; box-shadow:8px 8px 0 var(--ink),0 0 0 2px var(--ink); background:var(--sage);position:relative;overflow:hidden; } .phone__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px; background:var(--bezel);border-radius:0 0 16px 16px;z-index:9;} .ms015{position:absolute;inset:0;display:flex;flex-direction:column;} .appbar{ background:var(--sage2);border-bottom:2px solid var(--ink); display:flex;align-items:center;gap:10px;padding:34px 12px 10px;flex-shrink:0; } .iconbtn{width:40px;height:40px;border:2px solid var(--ink);background:var(--cream); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);flex-shrink:0;} .iconbtn:active{transform:translate(2px,2px);box-shadow:none;} .iconbtn svg{width:20px;height:20px;} .appbar__logo{flex:1;font-family:Verdana,Tahoma,sans-serif;font-weight:900;text-transform:uppercase; letter-spacing:.05em;font-size:16px;color:var(--text-lt);text-shadow:var(--shadow-sm);} .money-badge{background:var(--gold);color:var(--on-accent);border:2px solid var(--ink);box-shadow:var(--shadow-sm); font-family:"Courier New",monospace;font-weight:bold;font-size:12px;padding:6px 9px;white-space:nowrap;} .mbody{flex:1;overflow:auto;padding:12px;} .mbody .panel{box-shadow:var(--shadow-sm);} .mhealth{display:flex;align-items:center;gap:8px;margin-bottom:12px;} .mhealth .healthbar{flex:1;width:auto;} .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .mtile{border:2px solid var(--ink);background:var(--sage3);box-shadow:var(--shadow-sm);padding:12px;text-align:center;} .mtile b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;} .mtile .val{font-family:"Courier New",monospace;font-weight:bold;font-size:18px;} .botnav{ display:flex;background:var(--sage2);border-top:2px solid var(--ink);flex-shrink:0; } .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 12px; font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;} .botnav a svg{width:22px;height:22px;} .botnav a:hover{text-decoration:none;background:var(--hover);} .botnav a.on{background:var(--gold);color:var(--on-accent);} .drawer{position:absolute;top:0;bottom:0;width:78%;max-width:300px;background:var(--sage2);z-index:20; border-right:2px solid var(--ink);box-shadow:var(--shadow);transition:transform .22s ease;overflow:auto;} .drawer--left{left:0;transform:translateX(-105%);} .drawer--right{right:0;left:auto;border-right:0;border-left:2px solid var(--ink);transform:translateX(105%);} .drawer.open{transform:translateX(0);} .drawer__head{background:var(--cream);border-bottom:2px solid var(--ink);padding:12px; display:flex;justify-content:space-between;align-items:center;font-weight:900;text-transform:uppercase;letter-spacing:.05em;} .drawer__head button{background:none;border:2px solid var(--ink);width:28px;height:28px;font-weight:900;} .scrim{position:absolute;inset:0;background:rgba(20,24,15,.5);z-index:15;opacity:0;pointer-events:none;transition:opacity .2s;} .scrim.show{opacity:1;pointer-events:auto;} .footnote{max-width:1680px;margin:6px auto 30px;padding:0 16px;font-size:11px;color:var(--muted);} @media(max-width:960px){ .cols{grid-template-columns:1fr;} .game .menu,.game .rail{max-width:520px;margin-left:auto;margin-right:auto;width:100%;} } @media(prefers-reduced-motion:reduce){ .ticker__move{animation:none;padding-left:0;} .drawer,.scrim{transition:none;} }