/* D-Day — single stylesheet for every page. * * Loaded by index.html (relative href, so it also works on GitHub Pages and * over file://), privacy.html and the server-rendered templates in * templates.go. Only the tokens, the reset and the page shell are global; the * rest is scoped by a class on , because the three page families size * things differently (container width, heading scale, button width): * * body.landing index.html * body.page server-rendered pages (form, success, panel, admin, message) * body.privacy privacy.html */ /* ---------------------------------------------------------------- tokens */ :root{ --bg:#0a0e14; --bg2:#0d1420; --fg:#e6edf3; --muted:#8b98a5; --accent:#39d353; --accent2:#2dd4bf; --card:rgba(255,255,255,.04); --border:rgba(255,255,255,.09); } /* ------------------------------------------------------------------ base */ *{box-sizing:border-box;margin:0;padding:0} body{ font-family:'Courier New',ui-monospace,SFMono-Regular,Menlo,monospace; background:radial-gradient(1100px 700px at 50% -15%,#12203a 0%,var(--bg) 60%); color:var(--fg); min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* --------------------------------------------------------------- landing */ body.landing{line-height:1.45} body.landing .wrap{max-width:900px;margin:0 auto;padding:clamp(1.5rem,4vw,2.75rem) 1.25rem 2.5rem} /* header row: title left, badge right — compact */ body.landing .head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem} body.landing .brand{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap} body.landing h1{ font-size:clamp(2.2rem,7vw,3.4rem); font-weight:900;letter-spacing:-.03em;line-height:1; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.landing .brand .sub{font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} body.landing .badge{ font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent); border:1px solid var(--border);padding:.35rem .8rem;border-radius:999px;background:var(--card);white-space:nowrap; } /* countdown — first, prominent */ body.landing .live{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.4rem 1.25rem 1.5rem;margin-bottom:1.25rem} body.landing .count-label{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:1rem} body.landing .count-label b{color:var(--accent)} body.landing .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;max-width:440px;margin:0 auto} body.landing .unit{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.9rem .35rem;min-width:0;text-align:center} body.landing .unit .num{font-size:clamp(1.6rem,8vw,2.7rem);font-weight:900;line-height:1;font-variant-numeric:tabular-nums} body.landing .unit .lbl{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.45rem} body.landing .cta{text-align:center;margin-top:1.25rem} /* The landing button hugs its label; the server pages' .btn is full-width. */ body.landing .btn{ display:inline-block;font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.04em; padding:.85rem 2rem;border-radius:11px;border:1px solid transparent;cursor:pointer;text-decoration:none; transition:transform .12s ease,box-shadow .12s ease; } body.landing .btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04140a;box-shadow:0 8px 26px rgba(57,211,83,.22)} body.landing .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(57,211,83,.32)} body.landing .btn-primary[disabled]{background:var(--card);color:var(--muted);border:1px solid var(--border);box-shadow:none;cursor:not-allowed;transform:none} /* registered-seats counter — big, eye-catching, separate from countdown */ body.landing .seats{ background:linear-gradient(160deg,rgba(57,211,83,.08),rgba(45,212,191,.05)); border:1px solid var(--border);border-radius:16px; padding:1.6rem 1.25rem 1.7rem;margin-bottom:1.25rem;text-align:center; } body.landing .seats-head{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem} body.landing .seats-num{ font-size:clamp(3.6rem,18vw,6.5rem);font-weight:900;line-height:.9;letter-spacing:-.04em; font-variant-numeric:tabular-nums; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.landing .seats.full .seats-num{ font-size:clamp(2.4rem,11vw,4rem); background:linear-gradient(120deg,#f85149,#ff8a3d); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.landing .seats-of{font-size:1.02rem;font-weight:700;color:var(--fg);margin-top:.4rem} body.landing .seats-of b{color:var(--accent);font-size:1.15rem} body.landing .seats.full .seats-of b{color:#f85149} body.landing .bar{height:12px;border-radius:999px;background:var(--bg2);border:1px solid var(--border); overflow:hidden;max-width:440px;margin:1.05rem auto .85rem} body.landing .bar-fill{height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .9s cubic-bezier(.22,1,.36,1)} body.landing .seats.full .bar-fill{background:linear-gradient(90deg,#f85149,#ff8a3d)} body.landing .seats-note{font-size:.78rem;letter-spacing:.06em;color:var(--muted)} body.landing .seats.full .seats-note{color:#f85149;font-weight:700;letter-spacing:.12em;text-transform:uppercase} body.landing .seats-waitlist{font-size:.9rem;letter-spacing:.04em;color:var(--accent2);margin:-.35rem 0 .7rem;font-weight:700} body.landing .seats-waitlist b{color:var(--accent2);font-variant-numeric:tabular-nums} /* how-to-register instructions — visible before and after registration opens */ body.landing .howto{background:var(--card);border:1px solid var(--border);border-radius:16px; padding:1.25rem 1.35rem;margin-bottom:1.25rem} body.landing .howto-head{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem} body.landing .howto ol{list-style:none;counter-reset:step;display:grid;gap:.6rem} body.landing .howto li{counter-increment:step;position:relative;padding-left:2.1rem;font-size:.9rem;line-height:1.5;color:var(--fg)} body.landing .howto li::before{content:counter(step);position:absolute;left:0;top:0; width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:.78rem;font-weight:700;color:#04140a;background:linear-gradient(120deg,var(--accent),var(--accent2))} body.landing .howto code{font-family:inherit;font-weight:700;color:var(--accent);background:var(--bg2); border:1px solid var(--border);border-radius:6px;padding:.05rem .4rem} body.landing .howto a{color:var(--accent2);text-decoration:none;border-bottom:1px solid rgba(45,212,191,.35)} body.landing .howto a:hover{color:var(--accent)} body.landing .howto .limit{margin-top:.75rem;font-size:.78rem;letter-spacing:.06em;color:var(--muted)} /* info grid — dense */ body.landing .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1.25rem} body.landing .cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.85rem .95rem} body.landing .cell .k{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem} body.landing .cell .v{font-size:1.02rem;font-weight:700} body.landing .cell .v small{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:.15rem} /* footer / chat row — a card here, a plain link line on the server pages */ body.landing .foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:.95rem 1.1rem;background:var(--card);border:1px solid var(--border);border-radius:12px} body.landing .foot .desc{font-size:.85rem;color:var(--muted);line-height:1.5;flex:1 1 260px} body.landing .chat{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-size:.95rem;font-weight:700; color:var(--accent2);text-decoration:none;border:1px solid var(--border);border-radius:10px;padding:.7rem 1.1rem;background:var(--bg2)} body.landing .chat:hover{border-color:var(--accent2)} body.landing .tags{margin-top:1rem;text-align:center;font-size:.75rem;color:var(--muted);opacity:.6;letter-spacing:.05em} body.landing .legal{margin-top:.55rem;text-align:center;font-size:.8rem} body.landing .legal a{color:var(--accent2);text-decoration:none;border-bottom:1px solid rgba(45,212,191,.35)} body.landing .legal a:hover{color:var(--accent)} @media (max-width:480px){body.landing .unit{padding:.75rem .3rem}} /* ----------------------------------------------- forms & server pages */ body.page{line-height:1.5} body.page .wrap{max-width:560px;margin:0 auto;padding:clamp(1.5rem,5vw,3rem) 1.25rem 2.5rem} body.page .wrap-wide{max-width:1080px} body.page .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:clamp(1.35rem,4vw,2.1rem)} body.page h1{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:.35rem; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body.page .sub{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem} body.page p{margin-bottom:.8rem;font-size:.95rem} body.page .big{font-size:clamp(2.4rem,12vw,3.6rem);font-weight:900;line-height:1;color:var(--accent); font-variant-numeric:tabular-nums;margin:.6rem 0 1rem;text-align:center} body.page label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .35rem} body.page input{width:100%;font-family:inherit;font-size:1rem;color:var(--fg);background:var(--bg2); border:1px solid var(--border);border-radius:10px;padding:.75rem .85rem} body.page input:focus{outline:none;border-color:var(--accent2)} body.page input[readonly]{color:var(--muted);cursor:not-allowed} body.page .btn{display:inline-block;width:100%;font-family:inherit;font-size:1rem;font-weight:700;letter-spacing:.04em; margin-top:1.4rem;padding:.85rem 2rem;border-radius:11px;border:1px solid transparent;cursor:pointer;text-align:center; text-decoration:none;background:linear-gradient(120deg,var(--accent),var(--accent2));color:#04140a} body.page .btn:hover{filter:brightness(1.05)} body.page .btn-danger{background:none;border-color:rgba(255,80,80,.45);color:#ff8a8a} body.page .btn-danger:hover{background:rgba(255,80,80,.1);filter:none} body.page .status{text-align:center;font-size:.95rem;color:var(--muted);margin-bottom:.4rem} body.page .status b{color:var(--fg)} body.page .err{color:#ff8a8a;font-size:.9rem;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.25); border-radius:10px;padding:.7rem .85rem;margin-bottom:.6rem} body.page .foot{margin-top:1.6rem;font-size:.78rem;color:var(--muted)} body.page .foot a{color:var(--accent2);text-decoration:none} body.page .foot a:hover{text-decoration:underline} /* --------------------------------------------------------- admin table */ body.page .tablewrap{overflow-x:auto;margin-top:1.2rem;border:1px solid var(--border);border-radius:12px} body.page table{border-collapse:collapse;width:100%;font-size:.82rem} body.page th,body.page td{padding:.55rem .7rem;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border)} body.page th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); background:rgba(255,255,255,.03);position:sticky;top:0} body.page tbody tr:last-child td{border-bottom:none} body.page tbody tr:hover{background:rgba(255,255,255,.03)} body.page td.num{font-variant-numeric:tabular-nums;color:var(--muted)} body.page .tag{display:inline-block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase; padding:.18rem .5rem;border-radius:999px;border:1px solid var(--border)} body.page .tag-ok{color:var(--accent);border-color:rgba(57,211,83,.35);background:rgba(57,211,83,.1)} body.page .tag-wait{color:#ffcf70;border-color:rgba(255,180,60,.35);background:rgba(255,180,60,.1)} body.page .sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-top:.4rem} body.page .sumcell{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.75rem .85rem} body.page .sumcell .k{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} body.page .sumcell .v{font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums;margin-top:.15rem} /* --------------------------------------------------------------- privacy */ body.privacy{line-height:1.55} body.privacy .wrap{max-width:760px;margin:0 auto;padding:clamp(1.5rem,4vw,2.75rem) 1.25rem 2.5rem} body.privacy h1{ font-size:clamp(1.7rem,5vw,2.4rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:.4rem; background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.privacy .sub{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem} body.privacy .updated{font-size:.78rem;color:var(--muted);margin-bottom:1.75rem} body.privacy h2{font-size:1.05rem;color:var(--accent2);margin:1.6rem 0 .4rem} body.privacy p,body.privacy li{color:var(--fg);font-size:.95rem;margin-bottom:.55rem} body.privacy ul{padding-left:1.4rem} body.privacy a{color:var(--accent2);text-decoration:none} body.privacy a:hover{text-decoration:underline} body.privacy strong{color:var(--fg)} body.privacy .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:clamp(1.25rem,4vw,2rem)} body.privacy .note{background:rgba(45,212,191,.07);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;margin:.7rem 0} body.privacy .back{display:inline-block;margin-top:1.75rem;font-size:.85rem;color:var(--muted)}