/* ────────────────────────────────────────────────────────────── Nebula Styles — Global theme, components, RibbonFlash, ribbons ────────────────────────────────────────────────────────────── */ /* ==== Global tokens (combined) ==== */ :root{ /* RibbonFlash tokens */ --rf-flash:#ffda5c; --rf-flash-soft:rgba(255,218,92,.35); --rf-flash-width:2.6px; --rf-open-ms:1000ms; --rf-close-ms:1000ms; --rf-glow-size:16px; /* Brand/theme tokens */ --bg:#0c0726; --bg2:#0f0a2e; --glass:#1a1446; --edge:#2b1f75; --line:#3c328a; --text:#cfe2ff; --dim:#96a2c9; --muted:#bfc3ff; --accent:#61d3ff; --btn:#3a2aa0; --btn2:#2d1e7c; --ok:#3ad97a; --warn:#ffda5c; --bad:#ff6b6b; --card:#16103c; --shadow:0 18px 55px rgba(0,0,0,.55); --container-max:1200px; --iframe-gutter:2px; --scrollbar-w:16px; --chrome-rail-w:var(--scrollbar-w); --chrome-rail-gap:12px; --windshield-clear: calc( (var(--chrome-rail-w) + var(--chrome-rail-gap)) * 2 + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) ); --fold-time:260ms; --orbs-fallback-h:1100px; --logo-zoom:1.18; --windshield-h:240px; /* Ribbon/card geometry */ --ribbon-radius:16px; --ribbon-min-h:54px; --ribbon-pad-v:14px; --ribbon-pad-h:18px; /* Nested insets: deeper ribbons get narrower */ --rib-inset-1:8px; --rib-inset-2:14px; --rib-inset-3:18px; font-synthesis-weight:none; } /* ==== Base reset & page background ==== */ *{ box-sizing:border-box; } html,body{ height:100%; overflow-x:hidden; } body{ margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:linear-gradient(180deg,#3f1c6f 0%, #2b0e4f 60%, #1a0a3a 75%, #0f0a2b 90%, #0c0826 100%); background-repeat:no-repeat; background-attachment:fixed; min-height:100vh; position:relative; } /* ────────────────────────────────────────────────────────────── Decorative chrome rails (landing.html only) - Render rails ONLY when the page contains #windStage - Prevents rails from appearing in iframes and other pages - If you ever need an explicit hook, you can also add .neb-index to ────────────────────────────────────────────────────────────── */ html::before{ content:none !important; display:none !important; } :is(body.neb-index, body:has(#windStage))::before{ content:""; position:fixed; left:0; top:0; width:var(--chrome-rail-w); height:100vh; background:linear-gradient(180deg,#a9b2bd,#7f8892); box-shadow: inset 1px 0 rgba(0,0,0,.45), inset -1px 0 rgba(255,255,255,.12); border-top-left-radius:14px; border-top-right-radius:14px; pointer-events:none; z-index:0; } :is(body.neb-index, body:has(#windStage))::after{ content:""; position:fixed; top:0; height:100vh; width:var(--chrome-rail-w); /* Align flush to the viewport edge, regardless of scrollbar width */ right: 0; background:linear-gradient(180deg,#a9b2bd,#7f8892); box-shadow: inset 1px 0 rgba(0,0,0,.45), inset -1px 0 rgba(255,255,255,.12); border-top-left-radius:14px; border-top-right-radius:14px; pointer-events:none; z-index:0; } /* ==== Common UI elements ==== */ button{ appearance:none; border:1px solid var(--line); background:linear-gradient(180deg,#1b114a,#171042); color:var(--text); border-radius:10px; padding:10px 12px; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.25); } button.primary{ border-color:#6a61d3; background:linear-gradient(180deg,#3a2aa5,#2d1e7c); font-weight:800; } button:disabled{ opacity:.6; cursor:not-allowed; } input,select,textarea{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#120a36; color:var(--text); } label{ display:block; font-size:12px; color:var(--dim); margin:0 0 6px; } .hint{ font-size:12px; color:var(--dim); } .row{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; } table{ width:100%; border-collapse:collapse; } th,td{ border-bottom:1px solid rgba(255,255,255,.08); text-align:left; padding:10px 8px; } th{ color:var(--dim); font-weight:600; } .pill{ display:inline-block; padding:8px 12px; border-radius:999px; background:#130d35; border:1px solid rgba(255,255,255,.08); } /* ===== RibbonFlash (header-only) — styles only ===== */ .card.fold > .fold-hdr, details.fold > summary{ position: relative; overflow: visible; } .rf-overlay{ position: absolute; inset: 0; border-radius: inherit; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255,218,92,.22)); isolation: isolate; contain: paint; } .rf-svg{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* Baseline: strokes are invisible and "hidden" via large dash */ .rf-stroke{ fill: none; stroke: var(--rf-flash); stroke-width: var(--rf-flash-width); stroke-linecap: round; stroke-linejoin: round; opacity: 0; stroke-dasharray: 99999; stroke-dashoffset: 99999; will-change: stroke-dashoffset, opacity; } .rf-stroke.soft{ stroke: var(--rf-flash-soft); stroke-width: calc(var(--rf-flash-width) + 1.6px); stroke-dasharray: 99999; stroke-dashoffset: 99999; } .rf-glow{ position: absolute; width: var(--rf-glow-size); height: var(--rf-glow-size); left: 50%; transform: translateX(-50%); bottom: 4px; border-radius: 999px; background: radial-gradient(circle at 50% 50%, rgba(255,218,92,.85), rgba(255,218,92,.25) 55%, rgba(255,218,92,0) 70%); opacity: 0; pointer-events: none; } /* Optional fallback flash (if JS binder isn’t present) */ @keyframes nebRibbonFlash{ 0%{ box-shadow:0 0 0 0 rgba(168,139,255,.0), 0 0 0 rgba(168,139,255,0); } 30%{ box-shadow:0 0 0 2px rgba(168,139,255,.8), 0 0 28px rgba(168,139,255,.55); } 100%{ box-shadow:0 0 0 0 rgba(168,139,255,0), 0 0 0 rgba(168,139,255,0); } } .card .fold-hdr.neb-flash{ animation: nebRibbonFlash 420ms ease-out; } /* ────────────────────────────────────────────────────────────── Cards, ribbons, iframes, and nested ribbon geometry (matches landing.html + initDashboard.html) ────────────────────────────────────────────────────────────── */ /* Cards */ .card{ background:linear-gradient(180deg,#16103c,#130d34); border:1px solid var(--edge); border-radius:var(--ribbon-radius); padding:14px; box-shadow:var(--shadow); margin:12px auto; max-width:var(--container-max); } .fold{ padding:0; } /* Ribbon header — stays rounded even when expanded */ .fold-hdr{ position:relative; display:flex; align-items:center; gap:8px; min-height:var(--ribbon-min-h); padding:var(--ribbon-pad-v) var(--ribbon-pad-h); border-bottom:1px solid rgba(255,255,255,.06); font-weight:900; letter-spacing:.3px; background:linear-gradient(180deg,#1b114a,#151042); user-select:none; cursor:pointer; border-radius:var(--ribbon-radius); overflow:visible; } /* Closed: keep bottom rounding */ .card.fold:not(.open) > .fold-hdr{ border-bottom-left-radius:var(--ribbon-radius); border-bottom-right-radius:var(--ribbon-radius); } /* Open: ALSO keep bottom rounding (header remains a pill) */ .card.fold.open > .fold-hdr{ border-bottom-left-radius:var(--ribbon-radius); border-bottom-right-radius:var(--ribbon-radius); } /* Ribbon body */ .fold-body{ padding:16px 18px 18px; } .card.fold .fold-body{ display:block; } .card.fold:not(.open) .fold-body{ display:none; } /* Card rounding + body bottom rounding */ .card.fold{ border-radius:var(--ribbon-radius); } .card.fold .fold-body{ border-bottom-left-radius:var(--ribbon-radius); border-bottom-right-radius:var(--ribbon-radius); } /* Ribbon icons */ .ribbon-icon{ display:inline-grid; place-items:center; width:18px; height:18px; margin-left:8px; } .ribbon-icon svg{ width:18px; height:18px; stroke:#7b5cff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Card-style iframe shells (blank interiors) */ .frameWrap{ border-radius:12px; overflow:hidden; display:grid; place-items:center; } iframe.fluid{ display:block; width:calc(100% - (var(--iframe-gutter) * 2)); margin:0 var(--iframe-gutter); border:0; border-radius:12px; max-width:var(--container-max); background:transparent; /* keep iframe interior blank */ } /* Hide inner scrollbars (child should post height) */ iframe.fluid::-webkit-scrollbar{ display:none; } iframe.fluid{ scrollbar-width:none; } /* Ribbons-within-ribbons: auto-narrow deeper levels */ .card.fold > .fold-body > .card{ width:calc(100% - (var(--rib-inset-1) * 2)); margin-left:var(--rib-inset-1); margin-right:var(--rib-inset-1); } .card.fold > .fold-body > .card > .fold-body > .card{ width:calc(100% - (var(--rib-inset-2) * 2)); margin-left:var(--rib-inset-2); margin-right:var(--rib-inset-2); } .card.fold > .fold-body > .card > .fold-body > .card > .fold-body > .card{ width:calc(100% - (var(--rib-inset-3) * 2)); margin-left:var(--rib-inset-3); margin-right:var(--rib-inset-3); } /* Keep iframe frames visually aligned within narrowed cards */ .card.fold > .fold-body > .card .frameWrap{ border-radius:12px; } .card.fold > .fold-body > .card > .fold-body > .card .frameWrap{ border-radius:12px; } .card.fold > .fold-body > .card > .fold-body > .card > .fold-body > .card .frameWrap{ border-radius:12px; } /* Optional: blank shells used by initDashboard "bare" mode */ .bare body, body.bare{ background:transparent !important; padding:0; } body.bare .card.bare-shell{ background:transparent; border:0; box-shadow:none; margin:0; padding:0; } body.bare .card.bare-shell > .fold-body{ background:transparent; outline:0; border-radius:0; padding:10px 16px 14px; } /* IDs used by initDashboard to ensure inner dashboards are blank */ #employeesRibbon, #timekeeperDash, #auditorDash{ background:transparent !important; border:0 !important; box-shadow:none !important; } #employeesRibbon .fold-body, #timekeeperDash .fold-body, #auditorDash .fold-body{ background:transparent !important; outline:0 !important; }