/* ============================================================ Umely App Shell: gedeelde stijl voor dashboard + feature-pagina's Donker standaard, licht/donker via [data-theme] op . ============================================================ */ :root{ --amber:#FF8514;--flame:#FF4D00;--gold:#FFD964;--magenta:#E63E5E;--violet:#7C3AED; --gradient:linear-gradient(135deg,#FF8514,#FF4D00); --gradient-rich:linear-gradient(135deg,#FF8514 0%,#FF4D00 45%,#E63E5E 100%); --font-h:'Arimo',sans-serif;--font-b:'Montserrat',sans-serif;--green:#34d399; /* dark (default) */ --bg:#0B0C0F;--panel:#15171C;--panel-2:#1C1F26;--line:rgba(255,255,255,.08); --tx:#F3F1EE;--tx-dim:rgba(255,255,255,.55);--track:rgba(255,255,255,.08); } html[data-theme="light"]{ --bg:#FFF8F2;--panel:#FFFFFF;--panel-2:#FFF3E9;--line:#E8D9CC; --tx:#27292D;--tx-dim:#5A5550;--track:#F0E6DB; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font-b);color:var(--tx);background:var(--bg);transition:background .25s,color .25s} a{text-decoration:none;color:inherit} img{max-width:100%} .layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh} /* Grid-items krijgen anders min-width:auto en blazen de 1fr-track op tot hun min-content (3px horizontale overflow op mobiel). */ .layout>*{min-width:0} /* ── sidebar ── */ .side{background:var(--panel);border-right:1px solid var(--line);padding:0 14px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto} /* Logo blijft altijd in beeld: sticky binnen de scrollende zijbalk, met eigen panel-achtergrond zodat nav-items er netjes onderdoor scrollen (was: logo scrolde mee uit beeld en leek "afgekapt" zodra de zijbalk een scrollbar kreeg). */ .side .brand{display:block;flex:none;position:sticky;top:0;z-index:5;background:var(--panel);margin:0 -14px;padding:28px 24px 18px;overflow:hidden} .side .brand img{height:30px;width:auto;max-width:100%;display:block;object-fit:contain} /* volledig logo (brein + Umely) is wit; in lichte modus zwart maken */ html[data-theme="light"] .side .brand img{filter:brightness(0)} .side .navg{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dim);opacity:.7;padding:14px 12px 8px} .side .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--tx-dim)} .side .nav a:hover{background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx)} .side .nav a.on{background:var(--gradient-rich);color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(255,77,0,.35)} .side .nav a .ic{width:18px;height:18px;flex:none} .side .nav a .tag{margin-left:auto;background:var(--gold);color:#27292D;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px} .side .nav a .cnt{margin-left:auto;font-size:11px;font-weight:800;color:var(--tx-dim)} /* Feature-gated nav-items standaard verborgen; alleen tonen als de feature AAN is. Voorkomt dat een uitgezette feature (bv. Skills Store) kort flitst bij het laden. */ .side .nav a[data-feature]{display:none} .side .nav a[data-feature].feat-on{display:flex} .side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px} .side .foot .ava{width:38px;height:38px;border-radius:50%;background:var(--gradient-rich);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:#fff} .side .foot .foot-txt{min-width:0;flex:1} .side .foot .nm{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side .foot .pl{font-size:11px;color:var(--tx-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side .foot .logout-btn{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--tx-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s,background .15s} .side .foot .logout-btn:hover{color:var(--flame);border-color:var(--flame);background:rgba(255,77,0,.08)} .side .foot .logout-btn .ic{width:18px;height:18px} .side .foot .logout-btn:disabled{opacity:.5;cursor:default} /* ── main + topbar ── */ .main{padding:24px 40px 60px;max-width:1340px;width:100%;margin:0 auto} .topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px} .topbar-right{display:flex;align-items:center;gap:12px} .search{flex:1;max-width:420px;position:relative} .search input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--tx);font-family:var(--font-b);font-size:14px;outline:none} .search input::placeholder{color:var(--tx-dim)} .search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--tx-dim)} .topbar .spacer{flex:1} .streak{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-weight:800;font-size:14px;color:var(--tx)} .tt{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px} .tt button{width:34px;height:30px;border:none;background:none;border-radius:999px;cursor:pointer;color:var(--tx-dim);display:flex;align-items:center;justify-content:center} .tt button.on{background:var(--gradient-rich);color:#fff}.tt button svg{width:16px;height:16px} .ib{width:42px;height:42px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--tx)} .ib svg{width:18px;height:18px} .ib .badge{position:absolute;top:-3px;right:-3px;background:var(--flame);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)} /* ── page head / greeting ── */ .hi{margin-bottom:18px} .hi .date{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:6px} .hi h1{font-family:var(--font-h);font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.05} .hi h1 .g{background:var(--gradient-rich);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hi p{font-size:14px;color:var(--tx-dim);margin-top:8px;max-width:640px;line-height:1.5} /* ── card ── */ .card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 24px} .card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .card-h h2{font-family:var(--font-h);font-size:17px} .card-h .sub{font-size:12px;color:var(--tx-dim);font-weight:600} .card-h a{font-size:13px;font-weight:700;color:var(--amber)} .card-h h2 .new{background:var(--gold);color:#27292D;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle} /* ── buttons ── */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--gradient-rich);color:#fff;padding:13px 26px;border:none;border-radius:999px;font-family:var(--font-b);font-weight:800;font-size:14px;cursor:pointer;transition:transform .1s} .btn:hover{transform:translateY(-2px);color:#fff} .btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--tx)} .btn.ghost:hover{background:color-mix(in srgb,var(--tx) 8%,transparent)} /* ── grids ── */ .grid{display:grid;grid-template-columns:1fr 322px;gap:18px;align-items:start} /* ── hero ── */ .hero{position:relative;border-radius:24px;padding:32px 36px;overflow:hidden;min-height:200px;display:flex;align-items:center;margin-bottom:18px;background:linear-gradient(120deg,#2a1208,#190f1a)} .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(700px circle at 88% 8%,rgba(255,77,0,.6),transparent 50%),radial-gradient(540px circle at 8% 100%,rgba(255,133,20,.4),transparent 55%)} .hero .ct{position:relative;z-index:1;max-width:64%;color:#fff} .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:14px} .hero .eyebrow .b{background:var(--gradient-rich);padding:3px 9px;border-radius:7px;font-family:var(--font-h);color:#fff} .hero h3{font-family:var(--font-h);font-size:25px;line-height:1.18;margin-bottom:14px} .hprog{height:7px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden;max-width:320px;margin-bottom:7px} .hprog>div{height:100%;background:var(--gradient-rich);border-radius:999px} .hprog-l{font-size:12px;color:rgba(255,255,255,.7);font-weight:600;margin-bottom:16px} .hbtn{display:inline-flex;align-items:center;gap:8px;background:var(--gradient-rich);color:#fff;padding:13px 26px;border-radius:999px;font-weight:800;font-size:14px} .hbtn:hover{color:#fff} .hero>img{position:absolute;right:18px;bottom:-6px;height:210px;z-index:1;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));animation:bob 5s ease-in-out infinite;transform-origin:center bottom} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* ── tools grid ── */ .tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .tool{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:15px;transition:transform .12s,border-color .2s;cursor:pointer;display:block} .tool:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--amber) 45%,var(--line))} .tool .mono{width:38px;height:38px;border-radius:10px;background:var(--gradient-rich);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:14px;margin-bottom:10px} .tool .nm{font-family:var(--font-h);font-size:14.5px;margin-bottom:4px} .tool .ds{font-size:11.5px;color:var(--tx-dim);line-height:1.4} /* ── nieuws feed ── */ .feed{display:flex;flex-direction:column} .art{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer} .art:first-of-type{padding-top:0}.art:last-child{border-bottom:none;padding-bottom:0} .art .ph{width:92px;height:68px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:#fff;font-size:12px;text-align:center;padding:6px} .art .ab{flex:1} .art .cat{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin-bottom:5px} .art h4{font-family:var(--font-h);font-size:15px;line-height:1.3;margin-bottom:5px} .art p{font-size:12px;color:var(--tx-dim);line-height:1.45} .art .when{font-size:11px;color:var(--tx-dim);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px} .art .when .dot{width:5px;height:5px;border-radius:50%;background:var(--tx-dim)} .art .when .new{color:var(--green);font-weight:800} /* ── rail widgets ── */ .rail{display:flex;flex-direction:column;gap:18px} .donut-wrap{display:flex;align-items:center;gap:16px} .donut{position:relative;flex:none}.donut svg{transform:rotate(-90deg)} .donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .donut .mid .p{font-family:var(--font-h);font-size:26px;font-weight:700;line-height:1} .donut .mid .l{font-size:10px;color:var(--tx-dim);font-weight:700;text-transform:uppercase} .legend{display:flex;flex-direction:column;gap:7px} .legend .li{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600} .legend .li .sw{width:10px;height:10px;border-radius:3px}.legend .li b{margin-left:auto;font-family:var(--font-h)} .streakline{display:flex;align-items:center;gap:10px;row-gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:16px;padding-top:14px} .streakline .f{font-size:26px}.streakline b{font-family:var(--font-h);font-size:19px} .streakline span{font-size:11px;color:var(--tx-dim);font-weight:600} /* Teller ("0 modules deze week") blijft één regel; past hij niet naast de dag-chips, dan klapt de hele chips-rij eronder in plaats van dat de zin halverwege breekt. */ .streakline .cnt{display:flex;align-items:baseline;gap:5px;white-space:nowrap} .wdays{display:flex;gap:5px} .wdays span{width:23px;height:23px;border-radius:6px;background:var(--track);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--tx-dim)} .wdays span.on{background:var(--gradient-rich);color:#fff}.wdays span.now{border:2px solid var(--amber);color:var(--amber)} /* ── tip van Umie ── */ .tip{position:relative;background:linear-gradient(120deg,#1a0f08,#1d1020);border:1px solid var(--line);overflow:hidden;min-height:168px;display:flex;flex-direction:column;justify-content:center} html[data-theme="light"] .tip{background:linear-gradient(120deg,#FFF3E6,#fff)} .tip .lab{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;display:flex;align-items:center;gap:6px} .tip .lab .dot{width:6px;height:6px;border-radius:50%;background:var(--flame);box-shadow:0 0 10px var(--flame)} .tip .q{font-size:14px;line-height:1.5;font-weight:500;max-width:72%} .tip .hint{font-size:11px;color:var(--tx-dim);font-style:italic;margin-top:10px} .tip img{position:absolute;right:6px;bottom:-4px;height:118px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))} /* ── badges (rapport) ── */ .badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .bdg{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:15px;background:var(--track);color:var(--tx-dim);position:relative} .bdg.done{background:var(--gradient-rich);color:#fff} .bdg.busy{background:transparent;border:2px solid var(--amber);color:var(--amber)} .bdg.done::after{content:'✓';position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--green);color:#0B0C0F;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)} .bdg-l{font-size:12px;color:var(--tx-dim);font-weight:600}.bdg-l b{color:var(--tx)} /* ── volgende stap ── */ .next-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px;transition:border-color .2s;cursor:pointer} .next-row:hover{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))} .next-row .rk{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#27292D,#3A3D42);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;flex:none} html[data-theme="light"] .next-row .rk{background:linear-gradient(135deg,#FFD964,#FF8514);color:#27292D} .next-row .t b{font-family:var(--font-h);font-size:14px;line-height:1.25;display:block} .next-row .t span{font-size:11.5px;color:var(--tx-dim);font-weight:600} .next-row .arr{margin-left:auto;color:var(--tx-dim)}.next-row .arr svg{width:18px;height:18px} /* ── page header (feature-pagina's) ── */ .phead{margin-bottom:22px} .crumb{font-size:12px;font-weight:700;color:var(--tx-dim);margin-bottom:8px;display:flex;align-items:center;gap:7px} .crumb .pillx{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;background:var(--gold);color:#27292D} .phead h1{font-family:var(--font-h);font-size:clamp(26px,3.6vw,36px);letter-spacing:-.02em;line-height:1.06} .phead p{font-size:14px;color:var(--tx-dim);margin-top:8px;max-width:640px;line-height:1.55} /* ── chips/filters ── */ .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .chip{background:var(--panel);border:1px solid var(--line);color:var(--tx-dim);font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer} .chip.on{background:var(--gradient-rich);color:#fff;border-color:transparent} /* ── store ── */ .store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sk{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;transition:transform .12s,border-color .2s} .sk:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--amber) 45%,var(--line))} .sk .ico{width:46px;height:46px;border-radius:12px;background:var(--gradient-rich);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .sk .ico svg{width:23px;height:23px;color:#fff} .sk .cat{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:6px} .sk h4{font-family:var(--font-h);font-size:16.5px;margin-bottom:6px} .sk p{font-size:12.5px;color:var(--tx-dim);line-height:1.5;flex:1;margin-bottom:14px} .sk .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px} .sk .price{font-family:var(--font-h);font-weight:700;font-size:19px} .sk .price small{font-size:12px;color:var(--tx-dim);font-weight:600} .sk .buy{background:var(--gradient-rich);color:#fff;font-size:12.5px;font-weight:800;padding:10px 18px;border-radius:999px;cursor:pointer;border:none} .sk .owned{background:rgba(52,211,153,.16);color:var(--green);font-size:12px;font-weight:800;padding:9px 16px;border-radius:999px} /* ── grade-tabel ── */ table.grade{width:100%;border-collapse:collapse} table.grade thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);padding:0 0 12px} table.grade thead th:last-child,table.grade tbody td:last-child{text-align:right} table.grade tbody td{padding:13px 0;border-top:1px solid var(--line);font-size:14px;vertical-align:middle} .reekspill{display:inline-flex;align-items:center;gap:9px;font-weight:700} .reekspill .rk{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:#fff;font-size:12px} .muted{font-size:12.5px;color:var(--tx-dim);font-weight:600} .gnum{font-family:var(--font-h);font-weight:700;font-size:16px}.gnum.hi{color:var(--green)} .pillstate{font-size:11px;font-weight:800;padding:4px 11px;border-radius:999px} .pillstate.done{background:rgba(52,211,153,.14);color:var(--green)} .pillstate.busy{background:rgba(255,133,20,.16);color:var(--flame)} .pillstate.todo{background:var(--track);color:var(--tx-dim)} /* ── glossarium grid ── */ .gloss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .term{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .2s} .term:hover{border-color:color-mix(in srgb,var(--amber) 45%,var(--line))} .term h4{font-family:var(--font-h);font-size:15px;margin-bottom:5px;display:flex;align-items:center;gap:8px} .term .ab{font-size:10px;font-weight:800;color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);padding:2px 7px;border-radius:6px} .term p{font-size:12.5px;color:var(--tx-dim);line-height:1.5} /* ── generieke 2-koloms info ── */ .cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* ── notificatie-bel ── */ .bell-wrap{position:relative} .notif-panel{position:absolute;right:0;top:52px;width:340px;max-height:460px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);z-index:200;padding:8px} .notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px} .notif-head b{font-family:var(--font-h);font-size:15px} .notif-head button{background:none;border:none;color:var(--amber);font-weight:700;font-size:12px;cursor:pointer;font-family:var(--font-b)} .notif-list{display:flex;flex-direction:column;gap:4px} .notif-empty{padding:18px 12px;color:var(--tx-dim);font-size:13px;text-align:center} .ni{display:block;padding:11px 12px;border-radius:12px;color:inherit;text-decoration:none} .ni:hover{background:color-mix(in srgb,var(--tx) 7%,transparent)} .ni.unread{background:color-mix(in srgb,var(--amber) 9%,transparent)} .ni-cat{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin-bottom:3px} .ni-title{font-family:var(--font-h);font-size:13.5px;margin-bottom:3px;display:flex;align-items:center;gap:7px} .ni-title .nd{width:7px;height:7px;border-radius:50%;background:var(--flame);flex:none} .ni-body{font-size:12px;color:var(--tx-dim);line-height:1.45} /* ── responsive ── */ /* Hamburger + drawer: onder 1080px wordt de sidebar een off-canvas menu i.p.v. display:none (dat liet gebruikers zonder enige navigatie achter). */ .shell-burger{display:none} .shell-overlay{display:none} @media(max-width:1080px){ .layout{grid-template-columns:1fr} .side{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:70;transform:translateX(-105%);transition:transform .22s ease;border-right:1px solid var(--line)} .side.open{transform:translateX(0);box-shadow:0 0 44px rgba(0,0,0,.45)} .shell-burger{display:flex;position:fixed;top:14px;left:14px;z-index:80;width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px} .shell-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--tx)} body.side-open .shell-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60} .grid{grid-template-columns:1fr} .main{padding:18px 16px 48px} .topbar{padding-left:52px;flex-wrap:wrap} } @media(max-width:760px){ .tools-grid,.store-grid,.cols3{grid-template-columns:1fr 1fr} .gloss-grid,.cols2{grid-template-columns:1fr} } @media(max-width:520px){ .tools-grid,.store-grid,.cols3{grid-template-columns:1fr} }