/* ═══════════════════════════════════════════════════════════ HUB — shared design system Tokens + reusable components for all areas. Based on the TERMINAL·X look (dark glassmorphism). ═══════════════════════════════════════════════════════════ */ :root{ /* base palette (identical to TERMINAL·X) */ --bg:#07090e; --bg2:#0b0f17; --panel:rgba(18,24,38,.62); --panel-solid:#111726; --glass-border:rgba(120,150,200,.14); --glass-hi:rgba(140,170,255,.07); --txt:#dbe4f5; --txt-dim:#8b98b8; --txt-faint:#5a6685; --up:#00e5a0; --up-dim:rgba(0,229,160,.12); --up-glow:rgba(0,229,160,.35); --dn:#ff4d6a; --dn-dim:rgba(255,77,106,.12); --dn-glow:rgba(255,77,106,.35); --acc:#57a8ff; --acc-dim:rgba(87,168,255,.12);--acc-glow:rgba(87,168,255,.35); --warn:#ffc24d;--warn-dim:rgba(255,194,77,.12);--warn-glow:rgba(255,194,77,.35); /* area accents — one per hub category */ --c-trading:#00e5a0; --c-trading-dim:rgba(0,229,160,.12); --c-trading-glow:rgba(0,229,160,.35); --c-fitness:#ff4d6a; --c-fitness-dim:rgba(255,77,106,.12); --c-fitness-glow:rgba(255,77,106,.35); --c-business:#57a8ff; --c-business-dim:rgba(87,168,255,.12); --c-business-glow:rgba(87,168,255,.35); --c-portfolio:#ffc24d; --c-portfolio-dim:rgba(255,194,77,.12);--c-portfolio-glow:rgba(255,194,77,.35); /* current area accent — overridden per */ --area:var(--acc); --area-dim:var(--acc-dim); --area-glow:var(--acc-glow); --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --rad:16px; --rad-s:10px; --nav-h:64px; } body.area-trading {--area:var(--c-trading); --area-dim:var(--c-trading-dim); --area-glow:var(--c-trading-glow)} body.area-fitness {--area:var(--c-fitness); --area-dim:var(--c-fitness-dim); --area-glow:var(--c-fitness-glow)} body.area-business {--area:var(--c-business); --area-dim:var(--c-business-dim); --area-glow:var(--c-business-glow)} body.area-portfolio{--area:var(--c-portfolio);--area-dim:var(--c-portfolio-dim);--area-glow:var(--c-portfolio-glow)} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--bg); color:var(--txt); min-height:100dvh; overflow-x:hidden; padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); background-image: radial-gradient(900px 500px at 85% -10%, rgba(87,168,255,.07), transparent 60%), radial-gradient(700px 400px at -10% 30%, rgba(0,229,160,.05), transparent 60%), radial-gradient(800px 500px at 50% 110%, rgba(255,77,106,.04), transparent 60%); } .num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .up{color:var(--up)} .dn{color:var(--dn)} .flat{color:var(--txt-dim)} a{color:var(--area)} ::selection{background:var(--area-dim)} /* ── App header ─────────────────────────────── */ header.app{ position:sticky;top:0;z-index:55; display:flex;align-items:center;gap:10px;padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:rgba(7,9,14,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-border); } header.app .logo{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--txt);text-decoration:none} header.app .logo b{color:var(--area);text-shadow:0 0 14px var(--area-glow)} header.app .spacer{flex:1} .icon-btn{ width:36px;height:36px;border-radius:11px;border:1px solid var(--glass-border); background:var(--glass-hi);color:var(--txt-dim);font-size:16px;cursor:pointer; display:grid;place-items:center;transition:.2s;text-decoration:none;flex-shrink:0; } .icon-btn:active{transform:scale(.93)} .icon-btn:hover{color:var(--txt);border-color:rgba(120,150,200,.3)} /* ── Layout / views ─────────────────────────────── */ main{max-width:960px;margin:0 auto;padding:14px 16px 24px} section.view{display:none;animation:fadein .28s ease} section.view.active{display:block} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} h2.vt{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:8px 0 4px} p.vs{color:var(--txt-dim);font-size:12.5px;margin-bottom:14px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.grid2{grid-template-columns:1fr}} /* ── Card ─────────────────────────────── */ .card{ background:var(--panel);border:1px solid var(--glass-border);border-radius:var(--rad); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); padding:14px;margin-bottom:14px;position:relative;overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); } .card::before{content:"";position:absolute;inset:0 0 auto;height:1px; background:linear-gradient(90deg,transparent,rgba(140,170,255,.25),transparent);pointer-events:none} .card h3{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:12px;display:flex;align-items:center;gap:8px} .card h3 .dot{width:6px;height:6px;border-radius:50%;background:var(--area);box-shadow:0 0 8px var(--area);flex-shrink:0} .card h3 .end{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500} /* ── Buttons ─────────────────────────────── */ .btn{ font-family:var(--sans);font-weight:700;font-size:13px;color:var(--txt); background:linear-gradient(180deg,var(--area-dim),rgba(255,255,255,.02)); border:1px solid var(--area-glow);border-radius:11px;padding:10px 16px;cursor:pointer; transition:.18s;display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none; } .btn:hover{box-shadow:0 0 18px var(--area-dim)} .btn:active{transform:scale(.97)} .btn.ghost{background:var(--glass-hi);border-color:var(--glass-border);color:var(--txt-dim)} .btn.ghost:hover{color:var(--txt)} .btn.danger{background:var(--dn-dim);border-color:var(--dn-glow);color:var(--dn)} .btn.small{padding:6px 11px;font-size:12px;border-radius:9px} .btn.wide{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} /* ── Inputs ─────────────────────────────── */ label.f{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faint);margin:12px 0 5px} .in,input.in,select.in,textarea.in{ width:100%;padding:10px 12px;border-radius:var(--rad-s); border:1px solid var(--glass-border);background:rgba(255,255,255,.03); color:var(--txt);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .15s; } .in:focus{border-color:var(--area-glow)} textarea.in{resize:vertical;min-height:80px;line-height:1.5} select.in{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} .in-row{display:flex;gap:8px} .in-row .in{flex:1;min-width:0} /* segmented control */ .seg{display:flex;gap:4px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:11px;padding:4px} .seg button{ flex:1;padding:7px 4px;font-size:12px;font-weight:700;color:var(--txt-dim); background:none;border:none;border-radius:8px;cursor:pointer;transition:.15s;font-family:var(--sans); } .seg button.on{background:var(--area-dim);color:var(--area)} /* ── Pills / chips ─────────────────────────────── */ .pill{ font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em; padding:4px 9px;border-radius:999px;border:1px solid var(--glass-border); background:var(--area-dim);color:var(--area);display:inline-block; } .chip{ font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--txt-dim);display:inline-block; } /* ── KPI boxes ─────────────────────────────── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .kpi{padding:12px;border-radius:var(--rad-s);background:rgba(255,255,255,.03);border:1px solid var(--glass-border)} .kpi .lbl{font-size:10.5px;letter-spacing:.08em;color:var(--txt-faint);text-transform:uppercase;font-weight:700} .kpi .val{font-family:var(--mono);font-size:20px;font-weight:700;margin-top:4px} .kpi .sub{font-family:var(--mono);font-size:11px;margin-top:2px;color:var(--txt-dim)} /* ── Progress bar ─────────────────────────────── */ .bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden} .bar>i{display:block;height:100%;border-radius:99px;background:var(--area);box-shadow:0 0 10px var(--area-glow);transition:width .4s ease;max-width:100%} .bar>i.over{background:var(--dn);box-shadow:0 0 10px var(--dn-glow)} .bar-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--txt-dim);margin:8px 0 5px;font-family:var(--mono)} /* ── List rows ─────────────────────────────── */ .lrow{ display:flex;align-items:center;gap:10px;padding:10px 4px; border-bottom:1px solid rgba(120,150,200,.08);border-radius:8px;transition:background .15s; } .lrow:last-child{border-bottom:none} .lrow.click{cursor:pointer} .lrow.click:hover{background:rgba(140,170,255,.05)} .lrow .l-main{flex:1;min-width:0} .lrow .l-t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrow .l-s{font-size:11.5px;color:var(--txt-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrow .l-end{font-family:var(--mono);font-size:12.5px;text-align:right;flex-shrink:0} .x-btn{color:var(--txt-faint);font-size:15px;background:none;border:none;cursor:pointer;padding:4px;flex-shrink:0} .x-btn:hover{color:var(--dn)} .empty{color:var(--txt-faint);font-size:12.5px;text-align:center;padding:18px 8px} /* ── Bottom nav ─────────────────────────────── */ nav.tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:rgba(9,12,19,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid var(--glass-border);display:flex; } nav.tabbar button{ flex:1;background:none;border:none;color:var(--txt-faint);font-family:var(--sans); font-size:10px;font-weight:600;letter-spacing:.02em;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;transition:.2s; } nav.tabbar button .nico{font-size:19px;line-height:1;transition:.2s} nav.tabbar button.on{color:var(--area)} nav.tabbar button.on .nico{transform:translateY(-1px);filter:drop-shadow(0 0 8px var(--area-glow))} nav.tabbar button.on::before{content:"";position:absolute;top:0;width:26px;height:2px;border-radius:2px;background:var(--area);box-shadow:0 0 10px var(--area-glow)} /* ── Modal ─────────────────────────────── */ .modal-bg{ position:fixed;inset:0;z-index:100;background:rgba(4,6,10,.7); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:none;align-items:flex-end;justify-content:center; } .modal-bg.open{display:flex;animation:fadein .2s ease} .modal{ width:100%;max-width:560px;max-height:88dvh;overflow-y:auto; background:var(--bg2);border:1px solid var(--glass-border); border-radius:var(--rad) var(--rad) 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom)); position:relative;animation:slideup .25s ease; } @media(min-width:640px){ .modal-bg.open{align-items:center;padding:20px} .modal{border-radius:var(--rad)} } @keyframes slideup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} .modal h3{font-size:16px;font-weight:800;margin-bottom:4px} .modal .msub{color:var(--txt-dim);font-size:12px;margin-bottom:10px} .modal-x{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--txt-faint);font-size:17px;cursor:pointer;padding:4px} .modal-x:hover{color:var(--txt)} .modal-actions{display:flex;gap:10px;margin-top:18px} .modal-actions .btn{flex:1} /* ── Toast ─────────────────────────────── */ #toastWrap{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none} .toast{ max-width:86vw;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600; background:rgba(17,23,38,.95);border:1px solid var(--glass-border);color:var(--txt); box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toastin .25s ease; } .toast.ok{border-color:var(--up-glow);color:var(--up)} .toast.err{border-color:var(--dn-glow);color:var(--dn)} @keyframes toastin{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} .toast.out{animation:toastout .3s ease forwards} @keyframes toastout{to{opacity:0;transform:translateY(8px)}} /* ── Scroll reveal ─────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.001s !important;animation-iteration-count:1 !important} html{scroll-behavior:auto} } /* ── Utilities ─────────────────────────────── */ .mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px} .dim{color:var(--txt-dim)}.faint{color:var(--txt-faint)} .small{font-size:12px} .row{display:flex;align-items:center;gap:10px} .row .grow{flex:1;min-width:0} .right{text-align:right} .hide{display:none !important} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* footer note */ footer.area{ max-width:960px;margin:0 auto;padding:8px 16px 20px; color:var(--txt-faint);font-size:11px;text-align:center; } /* ═══════════════════════════════════════════════════════════ LUXURY LAYER — feiner Schliff für alle Bereiche (nur Optik: Grain, Glanz, weichere Kurven, tiefere Schatten) ═══════════════════════════════════════════════════════════ */ :root{ --ease-lux:cubic-bezier(.16,1,.3,1); --gold:#e8c37a; } /* film grain over everything — barely visible, makes gradients "expensive" */ body::after{ content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } /* cards: shine sweep + deeper hover shadow (pointer devices only) */ .card{transition:box-shadow .5s var(--ease-lux), border-color .5s var(--ease-lux)} @media (hover:hover) and (pointer:fine){ .card:hover{ border-color:rgba(140,170,255,.22); box-shadow:0 14px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(140,170,255,.05) inset, inset 0 1px 0 rgba(255,255,255,.05); } } /* buttons: light sweep on hover */ .btn{position:relative;overflow:hidden;transition:.28s var(--ease-lux)} .btn::after{ content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent); transform:skewX(-18deg);transition:left .55s var(--ease-lux); } .btn:hover::after{left:125%} /* inputs: soft focus ring */ .in:focus{box-shadow:0 0 0 3px var(--area-dim)} /* modal: springier entrance, richer backdrop */ .modal-bg{backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15)} .modal{animation:slideup .45s var(--ease-lux)} /* KPI numbers get a subtle metallic sheen */ .kpi .val{ background:linear-gradient(180deg,#fff 0%,var(--txt) 55%,var(--txt-dim) 130%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* section headers: hairline flourish */ h2.vt{position:relative;display:inline-block} h2.vt::after{ content:"";position:absolute;left:0;bottom:-4px;height:2px;width:34px;border-radius:2px; background:linear-gradient(90deg,var(--area),transparent);box-shadow:0 0 12px var(--area-glow); } @media (prefers-reduced-motion: reduce){ .btn::after{display:none} }