:root { --blue:#163c70; --orange:#bf570c; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; color:#121a27; background:#05070b; background-image:radial-gradient(circle at 8% 21%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 29% 8%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 61% 18%,#b7d0ff 0 1px,transparent 1.5px),radial-gradient(circle at 88% 35%,#fff 0 1px,transparent 1.5px); background-size:180px 160px,250px 200px,270px 220px,240px 260px; font:13px/1.55 Verdana,Geneva,sans-serif; }
.construction-page { width:650px; margin:24px; border:3px ridge #e5e5db; background:#e7e4d6; box-shadow:0 0 0 3px #0c1423,0 10px 28px #000; }
header { padding:5px 9px; display:flex; justify-content:space-between; color:#fff; background:var(--blue); font:bold 10px "Courier New",monospace; letter-spacing:.7px; }
main { padding:15px 24px 18px; text-align:center; } h1 { margin:0 0 3px; color:#b84408; font:bold 30px/1 Georgia,"Times New Roman",serif; letter-spacing:1px; text-shadow:1px 1px #fff; } .subtitle { margin:0 0 15px; color:#565b62; font:11px "Courier New",monospace; }
.construction-gif { position:relative; overflow:hidden; margin:0 auto 14px; width:220px; height:52px; display:flex; align-items:center; justify-content:center; border:3px inset #d4d3c8; color:#1f2733; background:repeating-linear-gradient(-45deg,#ffc928 0 14px,#292929 14px 28px); font-size:25px; box-shadow:inset 0 0 0 4px #e8e2c1; }
.construction-gif::after { content:"WORK IN PROGRESS"; position:absolute; inset:12px 20px; display:grid; place-items:center; color:#fff; background:#17365f; border:1px solid #fff; font:bold 10px "Courier New",monospace; letter-spacing:1px; animation:blink 1s steps(2,end) infinite; }.construction-gif span { animation:bounce .75s ease-in-out infinite alternate; z-index:1; } @keyframes blink { 50% { opacity:.28; } } @keyframes bounce { to { transform:translateY(-4px) rotate(-5deg); } }
.message { max-width:470px; margin:0 auto 15px; }.status { margin:0 auto 16px; max-width:440px; border:2px groove #c7c7bd; text-align:left; background:#f6f3e7; }.status h2 { margin:0; padding:3px 6px; color:#fff; background:linear-gradient(90deg,#163c70,#2b66aa); font:bold 11px "Courier New",monospace; }.status-content { padding:7px 10px; font:12px/1.8 "Courier New",monospace; }.status-row { display:flex; justify-content:space-between; border-bottom:1px dotted #9b9f90; }.status-row:last-child { border-bottom:0; }.ok { color:#187116; font-weight:bold; }.error { color:#b01212; font-weight:bold; }.completion { margin:12px 0 0; }.date { font-size:10px; color:#5a5f68; }.return { display:inline-block; margin-top:7px; padding:5px 8px; color:#fff; background:#214e8a; border:2px outset #9eb3cf; text-decoration:none; font:bold 11px "Courier New",monospace; }.return:active { border-style:inset; } footer { padding:6px 9px; color:#d7ddea; background:#111f35; font:9px "Courier New",monospace; text-align:center; }
@media (max-width:700px) { .construction-page { width:calc(100% - 20px); margin:10px; } main { padding:14px; } h1 { font-size:25px; } }