/* ============================================================================ IGC POWER — login page styling. Upload to: /web/gate.css ---------------------------------------------------------------------------- THIS FILE IS THE WHOLE LOOK OF THE LOGIN PAGE. Change it, re-upload it, done — nothing to rebuild, nothing to restart. LAYOUT: card at the BOTTOM CENTRE, compact 300px — matching keystone.phoenicianindustries.com, at Ken's instruction 2026-08-11. The numbers below are copied from Keystone's own stylesheet, not estimated. TO CHANGE THE BACKGROUND PICTURE Replace web/gate-bg.jpg. `[Ken, 2026-08-11]` the black-hole image is THE image, used on every demo login — so this should rarely change. TO PUT THE CARD BACK IN THE MIDDLE In `body`, change align-items:flex-end to align-items:center and drop the extra bottom padding. One line. COLOURS are the same seven values this page has always used. ============================================================================ */ :root{ --cyan:#2bd4e8; /* IGC accent — button, focus ring, the "IGC" in the wordmark */ --bg:#0a0b0d; /* page behind everything */ --panel:#0e1114; /* the login card */ --bout:#262c32; /* borders */ --body:#cfd6db; /* ordinary text */ --muted:#6b757d; /* labels and the subtitle */ --bright:#eef3f6; /* input text, "POWER" in the wordmark */ } *{box-sizing:border-box} html,body{margin:0;height:100%} body{ min-height:100vh; min-height:100dvh; /* dvh keeps it right on mobile when the URL bar hides */ /* Card placement: BOTTOM, CENTRED — Keystone's 28/28/44 padding. */ display:flex; align-items:flex-end; justify-content:center; padding:28px 28px 44px; color:var(--body); font-family:'Segoe UI',system-ui,-apple-system,sans-serif; /* Layered top-to-bottom: 1. scrim — same colour as the page, so it is invisible with no image, and keeps the card readable over a busy photo 2. the cyan glow this page has always had 3. the background image */ /* Flat colour first, as the FALLBACK: if the image ever fails to load the page is still a legible dark panel. */ background-color:var(--bg); /* 🔄 CORRECTED 2026-08-11. This was a FLAT veil — linear-gradient(rgba(10,11,13,.58),.42) — which dimmed every pixel of the photograph by 42–58%, including the bright disc. `[Ken]`: "keystone image is much brighter white than igc… igc isn't sharp and crisp like keystone." He was right and it was the stylesheet, not the image: the two sites serve a byte-identical file. Lost contrast is what reads as "not sharp". These are now KEYSTONE'S EXACT SCRIM VALUES, copied from its stylesheet — a soft vignette that is FULLY TRANSPARENT in the centre and only darkens toward the edges, plus a top-and-bottom darkening. The middle of the picture is left completely alone, so text contrast comes from where the card sits rather than from veiling the whole image. Also dropped: `background-attachment:fixed` (it rescales the image to the viewport and resamples it — Keystone paints it normally) and a cyan haze layer Keystone does not have. */ background-image: radial-gradient(78% 62% at 50% 34%, rgba(5,8,13,0), rgba(5,8,13,.20) 60%, rgba(5,8,13,.72) 100%), linear-gradient(180deg, rgba(5,8,13,.42), rgba(5,8,13,0) 34%, rgba(5,8,13,.55)), url("/gate-bg.jpg"); background-size:cover,cover,cover; background-position:center,center,center; background-repeat:no-repeat,no-repeat,no-repeat; } /* Compact card — Keystone's 300px and its 20/20/22 padding. */ .card{ width:300px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--bout); border-radius:12px; padding:20px 20px 22px; box-shadow:0 24px 60px rgba(0,0,0,.55); /* lifts the card off the photo */ } .wm{font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:2.5px;font-size:16px;margin-bottom:3px} .wm .c{color:var(--cyan)} .wm .p{color:var(--bright)} .sub{color:var(--muted);font-size:11px;line-height:1.4;margin-bottom:14px} label{display:block;font-size:11px;color:var(--muted);margin:9px 0 3px} input{ width:100%; padding:7px 9px; background:#0c0e11; border:1px solid var(--bout); border-radius:6px; color:var(--bright); font-size:13px; /* matches Keystone. See the note at the foot of this file. */ } input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(43,212,232,.18)} button{ width:100%; margin-top:16px; padding:9px; border:0; border-radius:6px; background:var(--cyan); color:#04181c; font-weight:700; font-family:ui-monospace,monospace; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; font-size:12.5px; } button:hover{filter:brightness(1.08)} button:active{transform:translateY(1px)} .err{ background:#2a1215; color:#ff8a80; border:1px solid #5c2b2e; padding:8px 10px; border-radius:6px; font-size:12px; margin-bottom:12px; } /* The route back to the parent site, matching Keystone's login. Same 10.5px centred treatment. */ .foot{margin:13px 0 0;font-size:10.5px;line-height:1.45;text-align:center;color:var(--muted)} .foot a{color:var(--body);text-decoration:none} .foot a:hover{color:var(--cyan);text-decoration:underline} /* On a short screen — a phone in landscape, or a small laptop viewport — pinning the card to the bottom crowds it against the edge. Centre it instead. Keystone does the same, and the design floor is a constrained device, so this is a real case not a hypothetical. */ @media (max-height:560px){ body{align-items:center;padding-bottom:28px} } @media (max-width:420px){ body{padding:16px 16px 32px} } /* ---------------------------------------------------------------------------- ⚠️ ONE KNOWN TRADE-OFF, recorded so it is not rediscovered as a bug: the 13px input font matches Keystone, and any size below 16px makes iOS zoom the page in when a field is tapped. Keystone already behaves this way. If that ever becomes annoying on a phone, the fix is font-size:16px on `input` — which makes the fields slightly taller and the card slightly less compact. ---------------------------------------------------------------------------- */