:root{ --accent: #00b7c6; --bg: #000000; --glass: rgba(18, 20, 26, 0.72); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.70); --shadow: 0 18px 55px rgba(0,0,0,0.55); --radius: 18px; --taskbar: rgba(15, 16, 20, 0.78); --taskbar-h: 52px; /* base height (desktop) */ --wallpaper: none; /* set via JS: url('assets/...') */ } *{ box-sizing:border-box; } html,body{ height:100%; } html{ scroll-padding-bottom: env(safe-area-inset-bottom, 0px); } body.no-scroll{ overflow: hidden; } body{ margin:0; /* Always keep enough scroll space so the fixed taskbar never overlaps content */ padding-bottom: env(safe-area-inset-bottom, 0px); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--text); background-color: var(--bg); overflow: auto; position: relative; z-index: 0; /* create stacking context for ::before */ } /* Wallpaper layer (more reliable than background-image on across browsers) */ body::before{ content:""; position: fixed; inset: 0; background-image: var(--wallpaper); background-size: cover; background-position: left bottom; background-repeat: no-repeat; pointer-events: none; z-index: 0; transform: translateZ(0); } main, .window{ position: relative; z-index: 2; } /* Later: jij kan ook gewoon 1 vaste wallpaper zetten: body{ --wallpaper: url('assets/jouw-wallpaper.jpg'); } */ a{ color: inherit; } .wallpaper-dim{ position:fixed; inset:0; background: radial-gradient(1200px 700px at 35% 25%, rgba(0,183,198,0.14), transparent 55%), radial-gradient(900px 600px at 75% 70%, rgba(255,255,255,0.08), transparent 60%); pointer-events:none; z-index: 1; } .taskbar{ position:fixed; left:0; right:0; bottom:0; min-height: var(--taskbar-h); padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; justify-content:space-between; background: var(--taskbar); border-top: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(10px); z-index: 50; } .taskbar .left, .taskbar .right{ display:flex; align-items:center; gap:10px; } .start-btn{ display:flex; align-items:center; gap:10px; padding:6px 9px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); cursor:pointer; user-select:none; transition: transform .08s ease, background .12s ease; text-decoration:none; } .start-btn:hover{ background: rgba(255,255,255,0.10); } .start-btn:active{ transform: translateY(1px); } .start-btn img{ width:24px; height:24px; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45)); } .badge{ font-size:12px; color: var(--muted); } .clock{ font-variant-numeric: tabular-nums; font-size: 13px; color: rgba(255,255,255,0.85); padding: 6px 9px; border-radius: 13px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); } .btn{ border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text); padding: 10px 12px; border-radius: 14px; cursor:pointer; user-select:none; transition: background .12s ease, transform .08s ease; text-decoration:none; display:inline-flex; align-items:center; gap:10px; } .btn:hover{ background: rgba(255,255,255,0.10); } .btn:active{ transform: translateY(1px); } .window{ position: relative; width: min(1020px, calc(100% - 26px)); margin: 26px auto 28px; border-radius: var(--radius); background: var(--glass); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow); backdrop-filter: blur(14px); overflow: hidden; } .titlebar{ display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; background: rgba(0,0,0,0.28); border-bottom: 1px solid rgba(255,255,255,0.10); } .titlebar .title{ display:flex; align-items:center; gap:12px; min-width: 0; } .titlebar .title img{ width:28px; height:28px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)); } .titlebar h1{ font-size: 14px; margin:0; letter-spacing: .2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .window .content{ padding: 18px 18px 22px; color: rgba(255,255,255,0.90); } .hr{ height:1px; background: rgba(255,255,255,0.10); margin: 16px 0; } .small{ font-size: 13px; color: var(--muted); line-height: 1.6; } /* Content components (pages) */ .hero{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap:wrap; } .hero-left{ min-width: min(520px, 100%); } .hero h2{ margin: 10px 0 8px; font-size: 26px; letter-spacing: .2px; } .hero p{ margin: 0; color: rgba(255,255,255,0.82); line-height: 1.7; } .kicker{ display:inline-flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.80); font-size: 13px; } .pills{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; } .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.82); font-size: 13px; } .pill b{ font-weight: 600; color: rgba(255,255,255,0.92); } .card{ border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); border-radius: 16px; padding: 14px; } .card h3{ margin: 0 0 8px; font-size: 15px; } .card p{ margin: 0; color: var(--muted); line-height: 1.55; } .note{ border-radius: 16px; border: 1px dashed rgba(0,183,198,0.35); background: rgba(0,183,198,0.08); padding: 12px 12px; color: rgba(255,255,255,0.82); line-height: 1.6; } .split{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; } details.accordion{ border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); border-radius: 16px; padding: 12px 12px; } details.accordion + details.accordion{ margin-top: 10px; } details.accordion summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap: 10px; font-weight: 650; } details.accordion summary::-webkit-details-marker{ display:none; } details.accordion summary .meta{ font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.72); } details.accordion .body{ margin-top: 10px; color: rgba(255,255,255,0.78); line-height: 1.65; font-size: 13px; } .kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; } .kpi{ border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.16); padding: 12px; } .kpi b{ display:block; margin-bottom: 6px; font-size: 13px; } .kpi span{ color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.55; } .steps{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } .step{ border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); border-radius: 16px; padding: 12px; } .step .n{ width: 28px; height: 28px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,183,198,0.14); border: 1px solid rgba(0,183,198,0.35); color: rgba(255,255,255,0.90); font-weight: 700; margin-bottom: 8px; } .step h4{ margin: 0 0 6px; font-size: 14px; } .step p{ margin: 0; color: rgba(255,255,255,0.72); font-size: 13px; line-height: 1.55; } .mock{ border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10)); padding: 12px; overflow:hidden; } .mock .bar{ display:flex; align-items:center; gap:8px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 12px; } .dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,0.22); } .dot.ac{ background: rgba(0,183,198,0.65); } .mock .line{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.10); margin-top: 10px; } .mock .line.w60{ width: 60%; } .mock .line.w80{ width: 80%; } .mock .line.w40{ width: 40%; } /* Mobile: allow scroll and make layouts stack nicely */ @media (max-width: 900px){ .split{ grid-template-columns: 1fr; } .kpis{ grid-template-columns: 1fr; } .steps{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .steps{ grid-template-columns: 1fr; } } @media (max-width: 760px){ :root{ --taskbar-h: 46px; } body{ overflow:auto; } .taskbar{ padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); } .clock{ font-size: 12px; } .window{ margin: 14px auto 24px; } .hero h2{ font-size: 22px; } } @media (max-width: 420px){ :root{ --taskbar-h: 44px; } .badge{ display:none; } } /* Gallery */ .gallery{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } @media (max-width: 900px){ .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .gallery{ grid-template-columns: 1fr; } } .shot{ border-radius: 16px; overflow:hidden; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.16); } .shot img{ width: 100%; height: auto; display:block; } .shot .cap{ padding: 10px 10px; font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.45; border-top: 1px solid rgba(255,255,255,0.10); } /* --- Gallery popup (Apps voorbeelden) --- */ .shot-btn{ padding: 0; border: 0; background: transparent; text-align: left; width: 100%; cursor: pointer; } .shot-btn:focus-visible{ outline: 2px solid rgba(255,255,255,0.55); outline-offset: 3px; border-radius: 18px; } @media (max-width: 900px){ .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px){ .gallery{ grid-template-columns: 1fr; } } .examples-title{ font-weight: 700; letter-spacing: .2px; margin: 6px 0 10px; } .imgmodal{ position: fixed; inset: 0; z-index: 9999; display: none; } .imgmodal[aria-hidden="false"]{ display:block; } .imgmodal-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); } .imgmodal-dialog{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 90px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); background: rgba(10,10,10,0.78); box-shadow: 0 18px 70px rgba(0,0,0,0.55); display: grid; grid-template-rows: auto 1fr auto; } .imgmodal-img{ width: 100%; height: 100%; object-fit: contain; background: rgba(0,0,0,0.35); display: block; } .imgmodal-cap{ padding: 10px 14px 12px; color: rgba(255,255,255,0.92); font-size: 13px; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.10); } .imgmodal-close{ position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.92); font-size: 22px; cursor: pointer; z-index: 2; } .imgmodal-nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.92); font-size: 28px; line-height: 44px; cursor: pointer; z-index: 2; user-select: none; } .imgmodal-nav.prev{ left: 10px; } .imgmodal-nav.next{ right: 10px; } @media (max-width: 600px){ .imgmodal-nav{ width: 40px; height: 40px; font-size: 26px; line-height: 40px; } .imgmodal-close{ width: 36px; height: 36px; font-size: 20px; } }