/* ============================================================================ ET3 Media — sitewide TERMINAL MODE (high-contrast amber-phosphor accessibility theme). Extracted from terminal-mode.html (S34 Task 6). Active when . Color mode is left 100% untouched. Two layers: 1. Self-contained injected UI (toggle / scanlines / CRT / boot) — terminal-mode.js appends these to ; they carry the marker class `.et3tm` so the override layer below never touches them. 2. An aggressive override layer that flips ANY page's markup to amber-on-black monospace (the real pages don't use the prototype's design tokens, so we override their concrete styles directly). ========================================================================== */ /* ── 1. Injected UI: floating ◐ toggle ─────────────────────────────────── */ .et3tm-toggle{ position:fixed; right:26px; bottom:26px; z-index:2147483600; width:54px; height:54px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(8,13,26,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(41,171,226,.5); color:#29ABE2; font-size:24px; line-height:1; transition:transform .2s ease, border-color .2s ease, background-color .3s ease; animation:et3tmPulse 3.4s ease-in-out infinite; } .et3tm-toggle:hover{ transform:scale(1.08); } .et3tm-toggle:focus-visible{ outline:2px solid #29ABE2; outline-offset:3px; } @keyframes et3tmPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(41,171,226,0); } 50%{ box-shadow:0 0 18px 1px rgba(41,171,226,.45); } } .et3tm-icon{ display:inline-block; transform:rotate(0deg); transition:transform .5s cubic-bezier(.6,0,.2,1); } .et3tm-lbl{ position:absolute; right:64px; white-space:nowrap; font-family:"Space Mono",ui-monospace,monospace; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#29ABE2; pointer-events:none; opacity:0; transform:translateX(6px); transition:opacity .2s ease, transform .2s ease; background:rgba(0,0,0,.55); padding:5px 9px; border:1px solid rgba(41,171,226,.5); border-radius:3px; } .et3tm-toggle:hover .et3tm-lbl{ opacity:1; transform:translateX(0); } /* ── Injected UI: CRT scanline overlay (off in color mode) ─────────────── */ .et3tm-scanlines{ position:fixed; inset:0; z-index:2147483500; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,176,0,.06) 0 1px, transparent 1px 3px); opacity:0; transition:opacity .4s ease; mix-blend-mode:screen; } /* ── Injected UI: CRT power-cycle overlay ──────────────────────────────── */ .et3tm-crt{ position:fixed; inset:0; z-index:2147483550; pointer-events:none; display:none; } .et3tm-crt.run{ display:block; } .et3tm-crt-line{ position:absolute; left:0; right:0; top:50%; height:100vh; transform:translateY(-50%); background:#000; } .et3tm-crt.run .et3tm-crt-line{ animation:et3tmCrt 720ms cubic-bezier(.7,0,.3,1) forwards; } @keyframes et3tmCrt{ 0%{ height:100vh; background:#000; } 34%{ height:100vh; background:#000; } 52%{ height:3px; background:#fff; } 60%{ height:3px; background:#fff; box-shadow:0 0 30px 6px rgba(255,255,255,.9); } 100%{ height:0; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,0); } } .et3tm-crt.to-terminal.run .et3tm-crt-line{ animation:et3tmCrtAmber 720ms cubic-bezier(.7,0,.3,1) forwards; } @keyframes et3tmCrtAmber{ 0%{ height:100vh; background:#000; } 34%{ height:100vh; background:#000; } 52%{ height:3px; background:#FFB000; } 60%{ height:3px; background:#FFE08A; box-shadow:0 0 34px 7px rgba(255,176,0,.9); } 100%{ height:0; background:#FFB000; box-shadow:0 0 0 0 rgba(255,176,0,0); } } /* ── Injected UI: boot message ─────────────────────────────────────────── */ .et3tm-boot{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2147483560; pointer-events:none; display:none; font-family:"Share Tech Mono",monospace; font-size:clamp(15px,2.2vw,22px); letter-spacing:.12em; color:#FFB000; text-transform:uppercase; white-space:nowrap; text-shadow:0 0 12px rgba(255,176,0,.6); } .et3tm-boot.show{ display:block; animation:et3tmBoot 1.8s ease forwards; } .et3tm-bcur{ display:inline-block; width:.55em; animation:et3tmBlink .5s steps(1,end) infinite; } @keyframes et3tmBoot{ 0%{opacity:0;} 12%{opacity:1;} 76%{opacity:1;} 100%{opacity:0;} } @keyframes et3tmBlink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} } /* ============================================================================ 2. TERMINAL MODE OVERRIDE LAYER — amber phosphor on black, applied sitewide. Everything except the injected UI (.et3tm) is forced monochrome amber. ========================================================================== */ html[data-mode="terminal"]{ background:#000 !important; } html[data-mode="terminal"] body{ background:#000 !important; } /* kill page background art (grid overlays, glows, gradients) */ html[data-mode="terminal"] body::before, html[data-mode="terminal"] body::after{ display:none !important; } /* flatten every page element: black bg, amber text, amber borders, no glow */ html[data-mode="terminal"] body *:not(.et3tm){ background:#000 !important; background-image:none !important; color:#FFB000 !important; border-color:rgba(255,176,0,.45) !important; box-shadow:none !important; text-shadow:none !important; outline-color:#FFB000 !important; font-family:"Share Tech Mono",ui-monospace,"Courier New",monospace !important; border-radius:0 !important; } /* page pseudo-elements (// kickers, corner brackets, etc.) → amber, no fill */ html[data-mode="terminal"] body *:not(.et3tm)::before, html[data-mode="terminal"] body *:not(.et3tm)::after{ color:#FFB000 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; border-color:rgba(255,176,0,.45) !important; } /* inputs/textareas/selects: faint amber tint + a clear amber border */ html[data-mode="terminal"] body input:not(.et3tm), html[data-mode="terminal"] body textarea:not(.et3tm), html[data-mode="terminal"] body select:not(.et3tm){ background:rgba(255,176,0,.05) !important; border:1px solid rgba(255,176,0,.5) !important; color:#FFB000 !important; } html[data-mode="terminal"] body input:not(.et3tm)::placeholder, html[data-mode="terminal"] body textarea:not(.et3tm)::placeholder{ color:rgba(255,176,0,.45) !important; } /* buttons / CTAs: amber outline; invert on hover */ html[data-mode="terminal"] body button:not(.et3tm), html[data-mode="terminal"] body .btn:not(.et3tm), html[data-mode="terminal"] body [class*="btn"]:not(.et3tm), html[data-mode="terminal"] body [class*="cta"]:not(.et3tm), html[data-mode="terminal"] body [class*="pill"]:not(.et3tm){ background:#000 !important; border:1px solid #FFB000 !important; color:#FFB000 !important; } html[data-mode="terminal"] body button:not(.et3tm):hover, html[data-mode="terminal"] body .btn:not(.et3tm):hover, html[data-mode="terminal"] body [class*="btn"]:not(.et3tm):hover{ background:#FFB000 !important; color:#000 !important; } html[data-mode="terminal"] body button:not(.et3tm):hover *, html[data-mode="terminal"] body .btn:not(.et3tm):hover *{ color:#000 !important; background:transparent !important; } /* selected pill state stays readable (amber fill, black text) */ html[data-mode="terminal"] body [class*="pill"].is-on:not(.et3tm), html[data-mode="terminal"] body [class*="pill"].is-selected:not(.et3tm){ background:#FFB000 !important; color:#000 !important; } /* accent tag pills (e.g. service-card .svc__tag, styled by the JS enhancer with a higher-specificity !important rule) — force back to amber outline */ html[data-mode="terminal"] body .svc__tag:not(.et3tm), html[data-mode="terminal"] body [class*="__tag"]:not(.et3tm), html[data-mode="terminal"] body [class*="-tag"]:not(.et3tm){ background:#000 !important; color:#FFB000 !important; border:1px solid rgba(255,176,0,.5) !important; } /* images / svg / video → amber-tinted phosphor */ html[data-mode="terminal"] body img:not(.et3tm), html[data-mode="terminal"] body svg:not(.et3tm), html[data-mode="terminal"] body video:not(.et3tm), html[data-mode="terminal"] body canvas:not(.et3tm){ background:transparent !important; filter:grayscale(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(.92) contrast(1.05) !important; } /* S41 — header logo: tint to the terminal amber (#FFB000) so it matches the body text instead of the dull generic image tint above. Higher specificity (.lp-logo img + :not(.et3tm)) beats the body-img rule. */ html[data-mode="terminal"] .lp-logo img:not(.et3tm){ filter:brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(500%) hue-rotate(355deg) !important; } /* brand logo grid: the blanket img amber filter above hides dark logos on the dark cells. Restore the one-color silhouette by default + full-color reveal on hover. */ html[data-mode="terminal"] body .logo-cell img:not(.et3tm){ filter:brightness(0) invert(1) !important; } html[data-mode="terminal"] body .logo-cell:hover img:not(.et3tm){ filter:none !important; } /* scanlines on; toggle goes amber */ html[data-mode="terminal"] .et3tm-scanlines{ opacity:1 !important; } html[data-mode="terminal"] .et3tm-toggle{ background:#000 !important; border-color:#FFB000 !important; color:#FFB000 !important; animation:none !important; box-shadow:0 0 14px rgba(255,176,0,.25) !important; } html[data-mode="terminal"] .et3tm-icon{ transform:rotate(180deg); } html[data-mode="terminal"] .et3tm-lbl{ color:#FFB000 !important; border-color:#FFB000 !important; } /* ── Reduced motion: keep the modes, drop the theatrics ────────────────── */ @media (prefers-reduced-motion:reduce){ .et3tm-toggle{ animation:none !important; } .et3tm-crt, .et3tm-boot{ display:none !important; } .et3tm-bcur, .et3tm-icon{ animation:none !important; transition:none !important; } } /* S40 — footer WEB/PRINT/SIGNAGE nav links (site-wide via this shared sheet). Inherit the footer color by default (cyan; amber in terminal mode), pink on hover. */ .lp-footer__tags a{ color:inherit; text-decoration:none; letter-spacing:inherit; cursor:pointer; transition:color .15s ease; } .lp-footer__tags a:hover{ color:#FF2D8B; } html[data-mode="terminal"] .lp-footer__tags a:hover{ color:#FF2D8B !important; }