*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} /* ── THEMES ────────────────────────────────────────────────────────────── Palette lives entirely in CSS vars, switched by . Components read the vars (and color-mix(... var(--g) X%) for tints), so the whole site re-themes from these three blocks. See docs/website_theming_plan.md. */ :root, :root[data-theme="stech"]{ --g:#00ff41; --gd:#00c832; --bg:#060906; --s1:#0c140c; --s2:#111f11; --t1:#e8f5e8; --t2:#7aaa7a; --t3:#3d6b3d; --bd:rgba(0,255,65,.12); --bar-bg:#060906; --on-accent:#060906; --warn:#ffaa00; --danger:#ff5555; } :root[data-theme="light"], :root[data-theme="auto"]{ /* auto = Light by day; Dark at night (data-tod, set by JS) */ --g:#00a884; --gd:#008f72; --bg:#eae6df; --s1:#ffffff; --s2:#f0f2f5; --t1:#111b21; --t2:#3b4a54; --t3:#667781; --bd:rgba(0,0,0,.10); --bar-bg:#f6f5f3; --on-accent:#ffffff; --warn:#b8791a; --danger:#d3402f; } :root[data-theme="dark"]{ --g:#00a884; --gd:#06cf9c; --bg:#0b141a; --s1:#202c33; --s2:#2a3942; --t1:#e9edef; --t2:#aebac1; --t3:#8696a0; --bd:rgba(255,255,255,.10); --bar-bg:#202c33; --on-accent:#ffffff; --warn:#ffb454; --danger:#f15c6d; } /* Auto = day/night by the user's local clock: Dark palette at night. A tiny inline head script sets data-tod="night" (19:00–06:59). No JS → stays Light. */ :root[data-theme="auto"][data-tod="night"]{ --g:#00a884; --gd:#06cf9c; --bg:#0b141a; --s1:#202c33; --s2:#2a3942; --t1:#e9edef; --t2:#aebac1; --t3:#8696a0; --bd:rgba(255,255,255,.10); --bar-bg:#202c33; --on-accent:#ffffff; --warn:#ffb454; --danger:#f15c6d; } html,body{min-height:100%;background:var(--bg);color:var(--t1);font-family:'JetBrains Mono',monospace;overflow-x:hidden;} body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 50% at 15% 50%,color-mix(in srgb,var(--g) 4%,transparent) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 85% 30%,color-mix(in srgb,var(--g) 3%,transparent) 0%,transparent 70%);pointer-events:none;z-index:0;} body::after{content:'';position:fixed;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--g) 2%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--g) 2%,transparent) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;} /* NAV */ /* Universal top bar — opaque + self-contained so it renders identically on EVERY page, regardless of the page background (immersive workout vs flat pages). Pin font/line-height so a page body can't change its size (see docs/s-tech_pm.md top-bar RULE). */ .bar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1rem 2.5rem;border-bottom:none;background:var(--bar-bg);line-height:normal;font-family:'JetBrains Mono',monospace;} .bar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--g) 70%,transparent) 50%,transparent 96%);box-shadow:0 0 9px color-mix(in srgb,var(--g) 30%,transparent);pointer-events:none;} .bar-logo{font-family:'Raleway',sans-serif;font-weight:800;font-size:.9rem;letter-spacing:.14em;color:var(--g);text-decoration:none;text-transform:uppercase;} .bar-logo b{color:var(--t1);font-weight:800;} .bar-nav{display:flex;gap:2rem;align-items:center;} .bar-link{font-size:.68rem;letter-spacing:.12em;color:var(--t3);text-decoration:none;text-transform:uppercase;transition:color .2s;font-family:'Raleway',sans-serif;font-weight:700;} .bar-link:hover,.bar-link.active{color:var(--g);} .bar-status{display:flex;align-items:center;gap:.5rem;font-size:.65rem;letter-spacing:.15em;color:var(--t3);text-decoration:none;transition:color .2s;cursor:pointer;} .bar-status:hover{color:var(--t1);} .bar-status-offline{color:color-mix(in srgb,var(--warn) 75%,transparent);} .bar-status-offline:hover{color:var(--warn);} .bar-mobile-only{display:none;} .pulse{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 40%,transparent);animation:pulse 2s ease-out infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g) 40%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}} .pulse-offline{background:var(--warn);animation:pulse-offline 2s ease-out infinite;} @keyframes pulse-offline{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 40%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}} .ham{display:none;flex-direction:column;gap:4px;cursor:pointer;background:none;border:none;padding:4px;} .ham span{display:block;width:18px;height:1.5px;background:var(--t2);} @media(max-width:680px){ .ham{display:flex;} .bar-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bar-bg);border-bottom:1px solid var(--bd);z-index:200;} .bar-nav.open{display:flex;} .bar-link{padding:.8rem 1.5rem;border-bottom:1px solid var(--bd);width:100%;} .bar-status{display:none;} .bar-mobile-only{display:block;} .bar{padding:.9rem 1.2rem;} } /* LAYOUT */ .wrap{position:relative;z-index:5;max-width:1080px;margin:0 auto;padding:0 2rem 6rem;} @media(max-width:680px){.wrap{padding:0 1.2rem 5rem;}} /* FOOTER */ .site-footer{position:relative;z-index:5;border-top:1px solid var(--bd);background:var(--bg);padding:3rem 2.5rem 2rem;margin-top:5rem;} .footer-inner{max-width:1080px;margin:0 auto;} .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:2.5rem;margin-bottom:2.5rem;} .footer-col h4{font-family:'Raleway',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;color:var(--g);margin-bottom:1rem;text-transform:uppercase;} .footer-col p,.footer-col a{font-size:.75rem;color:var(--t3);line-height:2.1;text-decoration:none;display:block;transition:color .2s;} .footer-col a:hover{color:var(--g);} .footer-bottom{border-top:1px solid var(--bd);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.65rem;color:var(--t3);letter-spacing:.08em;flex-wrap:wrap;gap:.5rem;} .footer-bottom a{color:var(--t3);text-decoration:none;} .footer-bottom a:hover{color:var(--g);} /* BUTTONS */ .btn{font-family:'Raleway',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:.75rem 1.6rem;border-radius:4px;border:1px solid var(--bd);transition:all .2s;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;background:transparent;color:var(--t1);} .btn-primary{background:var(--g);color:var(--on-accent);border-color:var(--g);} .btn-primary:hover{filter:brightness(1.08);box-shadow:0 0 20px color-mix(in srgb,var(--g) 30%,transparent);transform:translateY(-1px);} .btn-ghost{background:transparent;color:var(--t2);} .btn-ghost:hover{border-color:color-mix(in srgb,var(--g) 30%,transparent);color:var(--g);transform:translateY(-1px);} .btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent);} .btn-danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent);} .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;} /* CARDS */ .card{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:2rem;} .card-top{border-top:2px solid var(--g);} /* FORMS */ .form-group{margin-bottom:1.4rem;} .form-label{display:block;font-size:.68rem;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;margin-bottom:.5rem;font-family:'Raleway',sans-serif;font-weight:700;} .form-input{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:4px;padding:.75rem 1rem;color:var(--t1);font-family:'JetBrains Mono',monospace;font-size:.85rem;transition:border-color .2s;outline:none;} .form-input:focus{border-color:color-mix(in srgb,var(--g) 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 6%,transparent);} .form-input::placeholder{color:var(--t3);} .form-hint{font-size:.7rem;color:var(--t3);margin-top:.35rem;line-height:1.5;} /* ALERTS */ .alert{padding:.85rem 1.1rem;border-radius:4px;font-size:.78rem;margin-bottom:1.4rem;border:1px solid;} .alert-error{background:color-mix(in srgb,var(--danger) 8%,transparent);border-color:color-mix(in srgb,var(--danger) 28%,transparent);color:var(--danger);} .alert-success{background:color-mix(in srgb,var(--g) 7%,transparent);border-color:color-mix(in srgb,var(--g) 22%,transparent);color:var(--g);} .alert-info{background:color-mix(in srgb,var(--g) 4%,transparent);border-color:var(--bd);color:var(--t2);} /* SECTION */ .sec-tag{font-size:.65rem;letter-spacing:.28em;color:var(--g);text-transform:uppercase;margin-bottom:.5rem;opacity:.8;} .sec-title{font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--t1);letter-spacing:-.015em;margin-bottom:.6rem;line-height:1.1;} .sec-sub{font-size:.82rem;color:var(--t2);line-height:1.9;max-width:520px;margin-bottom:2.5rem;font-weight:300;} .page-title{font-family:'Raleway',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,2rem);color:var(--t1);letter-spacing:-.015em;margin-bottom:1.8rem;line-height:1.1;} .divider{height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--g) 15%,transparent),transparent);margin:2rem 0;} /* THEME PICKER (profile) */ .theme-pick{display:inline-flex;border:1px solid var(--bd);border-radius:6px;overflow:hidden;} .theme-pick button{font-family:'Raleway',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.6rem 1.1rem;background:var(--s2);color:var(--t3);border:none;border-right:1px solid var(--bd);cursor:pointer;transition:all .2s;} .theme-pick button:last-child{border-right:none;} .theme-pick button:hover{color:var(--t1);} .theme-pick button.active{background:var(--g);color:var(--on-accent);} /* TERMINAL */ .term{background:var(--s1);border:1px solid var(--bd);border-radius:8px;overflow:hidden;} .term-head{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--bd);background:var(--s2);} .td{width:10px;height:10px;border-radius:50%;} .td-r{background:#ff5f57;}.td-y{background:#febc2e;}.td-g{background:#28c840;} .term-title{font-size:.65rem;color:var(--t3);margin-left:.3rem;letter-spacing:.05em;} .term-body{padding:1.2rem 1.4rem;font-size:.78rem;line-height:2;} .tp{color:var(--g);margin-right:.4rem;} .tc{color:var(--t1);} .to{color:var(--t2);} .te{color:var(--danger);} .ts{color:var(--g);} .cur{display:inline-block;width:7px;height:.85em;background:var(--g);vertical-align:middle;animation:blink .9s step-start infinite;} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} .warn{color:var(--warn);} /* ANIMATE IN */ .fade-up{animation:rise .5s cubic-bezier(.16,1,.3,1) both;} .fade-up:nth-child(2){animation-delay:.08s;} .fade-up:nth-child(3){animation-delay:.16s;} .fade-up:nth-child(4){animation-delay:.24s;} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* DASHBOARD */ .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2rem;} .dash-card{background:var(--s1);border:1px solid var(--bd);border-radius:8px;padding:1.5rem;text-decoration:none;color:var(--t1);transition:border-color .2s,transform .2s;} .dash-card:hover{border-color:color-mix(in srgb,var(--g) 30%,transparent);transform:translateY(-2px);} .dash-card-icon{font-size:1.4rem;margin-bottom:.8rem;} .dash-card-title{font-family:'Raleway',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.06em;margin-bottom:.4rem;} .dash-card-desc{font-size:.72rem;color:var(--t3);line-height:1.7;} .dash-card-badge{display:inline-block;font-size:.6rem;letter-spacing:.1em;padding:.2rem .5rem;border-radius:3px;margin-top:.8rem;text-transform:uppercase;} .badge-active{background:color-mix(in srgb,var(--g) 10%,transparent);color:var(--g);border:1px solid color-mix(in srgb,var(--g) 20%,transparent);} .badge-pending{background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);} .badge-none{background:var(--s2);color:var(--t3);border:1px solid var(--bd);} /* TABLE */ .tbl{width:100%;border-collapse:collapse;font-size:.78rem;} .tbl th{font-family:'Raleway',sans-serif;font-size:.65rem;letter-spacing:.12em;color:var(--t3);text-transform:uppercase;padding:.6rem .8rem;border-bottom:1px solid var(--bd);text-align:left;} .tbl td{padding:.75rem .8rem;border-bottom:1px solid color-mix(in srgb,var(--g) 5%,transparent);color:var(--t2);} .tbl tr:last-child td{border-bottom:none;} .tbl td code{background:var(--s2);padding:.15rem .4rem;border-radius:3px;color:var(--g);font-size:.75rem;}