/* ═══════════════════════════════════════════════════════════ BOSCHKOO.DEV — SHARED THEME "LIVE OPS TERMINAL" Eine Quelle der Wahrheit für die gesamte Site. Warm ink · bone · single lime signal · Bricolage + JetBrains Mono. Eingebunden via: Fonts im der Seite laden: Bricolage+Grotesque:opsz,wght@12..96,300;400;700;800 & JetBrains+Mono:wght@400;500;600 ═══════════════════════════════════════════════════════════ */ :root{ --ink:#0b0b0c; --ink-2:#111113; --panel:#151517; --panel-2:#1b1b1e; --bone:#ece7dd; --bone-dim:#9a948a; --bone-faint:#56524b; --hair:rgba(236,231,221,0.10); --hair-2:rgba(236,231,221,0.18); --signal:#c8ff3c; /* electric lime — "live" */ --signal-dim:rgba(200,255,60,0.55); --signal-glow:rgba(200,255,60,0.22); --amber:#f4b03c; --red:#ff5a4d; --r:2px; --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; --disp:'Bricolage Grotesque','Helvetica Neue',system-ui,sans-serif; --rail-h:30px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--bone); font-family:var(--disp);font-weight:400; font-size:16px;line-height:1.55;letter-spacing:-0.01em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden;min-height:100vh; } a{color:inherit} ::selection{background:var(--signal);color:var(--ink)} img{max-width:100%;display:block} code,kbd,pre{font-family:var(--mono)} /* ─── ATMOSPHERE (shared bg layers) ──────── */ .bg-grid{ position:fixed;inset:0;z-index:-3;pointer-events:none; background: linear-gradient(var(--hair) 1px,transparent 1px) 0 0/100% 4.2rem, radial-gradient(120% 80% at 50% -10%, rgba(200,255,60,0.05), transparent 60%); opacity:0.6;mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 100%); } .bg-grain{ position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .bg-vig{ position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%); } /* ─── STATUS RAIL ────────────────────────── */ .rail{ position:fixed;top:0;left:0;right:0;z-index:120; height:auto;min-height:var(--rail-h); display:flex;align-items:center; background:var(--ink-2);border-bottom:1px solid var(--hair); font-family:var(--mono);font-size:11px;letter-spacing:0.12em; color:var(--bone-dim);overflow:hidden; padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right); } .rail-tick{display:flex;align-items:center;gap:0.55rem;padding:0 1rem;white-space:nowrap;border-right:1px solid var(--hair);min-height:var(--rail-h)} .rail-tick .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal-glow);animation:pulse 2.4s infinite} .rail-tick b{color:var(--bone);font-weight:500} .rail-tick--grow{flex:1;justify-content:flex-end;border-right:0;color:var(--bone-faint)} .rail-clock{color:var(--signal-dim)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}} @media (max-width:820px){.rail-tick.opt{display:none}} /* ─── NAV ────────────────────────────────── */ .nav{ position:fixed;top:var(--rail-h);top:calc(var(--rail-h) + env(safe-area-inset-top)); left:0;right:0;z-index:110; display:grid;grid-template-columns:auto 1fr auto;align-items:center; padding:0.8rem max(1.6rem,env(safe-area-inset-left)); background:linear-gradient(180deg,rgba(11,11,12,0.92),rgba(11,11,12,0.4)); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); } .brand{ font-family:var(--disp);font-weight:800;font-size:1.12rem; letter-spacing:-0.03em;text-decoration:none;color:var(--bone); display:flex;align-items:center;gap:0.5rem; } .brand b{color:var(--signal);font-weight:800} .nav-links{display:flex;gap:0.4rem;justify-content:center;flex-wrap:wrap} .nav-links a{ font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em; color:var(--bone-dim);text-decoration:none;padding:0.4rem 0.7rem; border:1px solid transparent;border-radius:var(--r);transition:.18s; } .nav-links a:hover,.nav-links a.active{color:var(--bone);border-color:var(--hair-2)} .nav-links a.active{color:var(--signal)} .nav-cta{ font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em; text-decoration:none;color:var(--ink);background:var(--signal); padding:0.5rem 0.95rem;border-radius:var(--r);font-weight:500;transition:.18s; } .nav-cta:hover{box-shadow:0 0 0 3px var(--signal-glow)} @media (max-width:820px){.nav{grid-template-columns:auto auto}.nav-links{display:none}} /* ─── PAGE WRAPPER + HEADER (sub-pages) ──── */ .wrap{max-width:1180px;margin:0 auto;padding:0 max(1.6rem,env(safe-area-inset-left))} .wrap--narrow{max-width:820px} .page-head{ max-width:1180px;margin:0 auto; padding:calc(var(--rail-h) + 6.5rem) max(1.6rem,env(safe-area-inset-left)) 2.5rem; } .page-kick{ font-family:var(--mono);font-size:0.78rem;letter-spacing:0.28em; color:var(--signal);margin:0 0 1.1rem;display:flex;align-items:center;gap:0.7rem; } .page-kick::before{content:'';width:34px;height:1px;background:var(--signal)} .page-title{ font-family:var(--disp);font-weight:800;letter-spacing:-0.045em; font-size:clamp(2.6rem,8vw,5.5rem);line-height:0.9;margin:0 0 1rem;text-transform:lowercase; } .page-title .accent{color:var(--signal)} .page-title .stroke{color:transparent;-webkit-text-stroke:1.4px var(--bone)} .page-sub{max-width:54ch;color:var(--bone-dim);font-size:1.05rem;line-height:1.6;margin:0} /* ─── SECTIONS ───────────────────────────── */ .section{max-width:1180px;margin:0 auto;padding:3.5rem max(1.6rem,env(safe-area-inset-left))} .sec-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem; margin-bottom:2.5rem;border-bottom:1px solid var(--hair-2);padding-bottom:1.1rem; } .sec-id{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.24em;color:var(--signal);margin:0 0 0.5rem} .sec-head h2{ font-family:var(--disp);font-weight:800;letter-spacing:-0.035em; font-size:clamp(1.6rem,4vw,2.6rem);line-height:1;margin:0;text-transform:lowercase; } .sec-note{font-family:var(--mono);font-size:0.72rem;color:var(--bone-faint);letter-spacing:0.08em;text-align:right;white-space:nowrap} @media (max-width:600px){.sec-note{display:none}} /* ─── BUTTONS ────────────────────────────── */ .btn,.btn-primary,.btn-ghost{ font-family:var(--mono);font-size:0.82rem;letter-spacing:0.1em; text-decoration:none;padding:0.85rem 1.5rem;border-radius:var(--r); transition:.18s;display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;border:0; } .btn-primary{background:var(--signal);color:var(--ink);font-weight:600} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--signal-glow)} .btn-ghost{border:1px solid var(--hair-2);color:var(--bone);background:transparent} .btn-ghost:hover{border-color:var(--signal);color:var(--signal)} .btn-row{display:flex;gap:0.8rem;flex-wrap:wrap} .back-link{ font-family:var(--mono);font-size:0.76rem;letter-spacing:0.1em;color:var(--bone-dim); text-decoration:none;display:inline-flex;align-items:center;gap:0.45rem;transition:.18s; } .back-link:hover{color:var(--signal)} /* ─── CARDS / PANELS ─────────────────────── */ .card{ background:var(--ink-2);border:1px solid var(--hair);border-radius:var(--r); padding:1.4rem;transition:.2s; } .card:hover{border-color:var(--hair-2)} .card--hover:hover{border-color:var(--signal-dim);transform:translateY(-3px)} .panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:1.5rem} .grid{display:grid;gap:1rem} .grid--auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:760px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}} /* ─── TAGS / PILLS / STATUS DOTS ─────────── */ .tag{ font-family:var(--mono);font-size:0.6rem;letter-spacing:0.16em;color:var(--bone-dim); border:1px solid var(--hair-2);padding:0.18rem 0.45rem;border-radius:var(--r);display:inline-block; } .pill{ font-family:var(--mono);font-size:0.66rem;letter-spacing:0.14em; display:inline-flex;align-items:center;gap:0.45rem;white-space:nowrap;color:var(--bone-dim); } .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--bone-faint)} .pill.live{color:var(--signal-dim)}.pill.live .dot{background:var(--signal);box-shadow:0 0 8px var(--signal-glow);animation:pulse 2.4s infinite} .pill.warn{color:var(--amber)}.pill.warn .dot{background:var(--amber)} .pill.down{color:var(--red)}.pill.down .dot{background:var(--red)} /* ─── STATS ──────────────────────────────── */ .stat{font-family:var(--mono)} .stat-val{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1;letter-spacing:-0.03em;color:var(--bone)} .stat-val.good{color:var(--signal)}.stat-val.bad{color:var(--red)} .stat-label{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.2em;color:var(--bone-faint);margin-top:0.4rem;text-transform:uppercase} /* ─── TABLES / KEY-VALUE ─────────────────── */ .kv{display:flex;justify-content:space-between;gap:1rem;padding:0.7rem 0;border-bottom:1px dashed var(--hair);font-family:var(--mono);font-size:0.82rem} .kv span:first-child{color:var(--bone-faint);letter-spacing:0.14em;font-size:0.68rem;align-self:center} .kv span:last-child{color:var(--signal-dim);text-align:right} table.t{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:0.8rem} table.t th{text-align:left;color:var(--bone-faint);font-weight:500;letter-spacing:0.12em;font-size:0.66rem;text-transform:uppercase;padding:0.6rem 0.8rem;border-bottom:1px solid var(--hair-2)} table.t td{padding:0.6rem 0.8rem;border-bottom:1px solid var(--hair);color:var(--bone-dim)} table.t tr:hover td{background:rgba(236,231,221,0.02)} /* code / pre blocks (universe-style terminals, diagrams) */ pre.term,.term{ background:var(--ink-2);border:1px solid var(--hair);border-left:2px solid var(--signal-dim); border-radius:var(--r);padding:1.2rem 1.4rem;overflow:auto; font-family:var(--mono);font-size:0.82rem;line-height:1.5;color:var(--bone-dim); } .term .prompt,pre.term .prompt{color:var(--signal)} /* ─── FOOTER ─────────────────────────────── */ .foot{ border-top:1px solid var(--hair-2);margin-top:3rem; padding:2.2rem max(1.6rem,env(safe-area-inset-left)) calc(2.2rem + env(safe-area-inset-bottom)); max-width:1180px;margin-left:auto;margin-right:auto; display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem; font-family:var(--mono);font-size:0.72rem;color:var(--bone-faint);letter-spacing:0.08em; } .foot a{color:var(--bone-dim);text-decoration:none} .foot a:hover{color:var(--signal)} .foot-links{display:flex;gap:1.2rem;flex-wrap:wrap} /* ─── SCROLL REVEAL ──────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* ─── UTILITIES ──────────────────────────── */ .mono{font-family:var(--mono)} .dim{color:var(--bone-dim)}.faint{color:var(--bone-faint)}.lime{color:var(--signal)} .center{text-align:center} .spacer{height:3rem} /* ─── MOBILE / FOLDABLES / SAFE-AREA ─────── */ @media (max-width:600px){ .nav,.page-head,.section,.foot,.wrap{padding-left:max(1.1rem,env(safe-area-inset-left));padding-right:max(1.1rem,env(safe-area-inset-right))} .page-head{padding-top:calc(var(--rail-h) + 5.5rem)} } @media (max-width:400px){ .rail{font-size:10px}.rail-tick{padding:0 0.7rem;gap:0.4rem} .brand{font-size:1rem} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation:none!important;scroll-behavior:auto!important} }