/* ============================================================ filo-chrome-terminal.css ------------------------------------------------------------ Upload as a new CSS Asset (don't overwrite shared.css/generic.css). Include it in layout.html, inside , AFTER shared.css and generic.css so these rules win: Design note: this file intentionally avoids guessing Exo's internal class names (e.g. ".package-card"), since those aren't publicly documented and may not match your actual template build. Instead it: 1. Restyles real HTML elements (body, a, button, footer, etc.) that exist on every Tebex page regardless of template internals. 2. Defines new utility classes (.term-panel, .phosphor-text, etc.) that YOU apply directly inside package.html / category.html / cms/page.html — so nothing here can silently fail to match. If you want to also restyle Exo's package cards or sidebar specifically, open a page in your browser, right-click the element > Inspect, find its real class name, and add a rule for it at the bottom of this file. ============================================================ */ :root { --filo-bg: #030402; --filo-bg-raised: #0a0d09; --filo-chrome-1: #eef2f7; --filo-chrome-2: #c9d6e8; --filo-steel: #8b9bb4; --filo-phosphor: #6dffb3; --filo-phosphor-dim: #1c4a34; --filo-amber: #ffb84d; --filo-line: rgba(109, 255, 179, 0.14); } /* ---------- Base page ---------- */ html, body { /*background: var(--filo-bg) !important;*/ color: var(--filo-chrome-1) !important; } body { font-family: "JetBrains Mono", "Courier New", monospace !important; } a { color: var(--filo-phosphor); text-decoration: none; } a:hover { color: var(--filo-chrome-1); } /* Generic buttons/inputs of type=submit/button — safe, standard selectors */ button, input[type="submit"], input[type="button"], a.button, a[class*="btn"] { font-family: "JetBrains Mono", monospace !important; letter-spacing: 0.04em; border-radius: 4px !important; } footer { border-top: 1px solid var(--filo-line) !important; color: var(--filo-steel) !important; } /* Fixed CRT scanline + vignette overlay, added via footer.twig — see filo-crt-overlay.twig. Kept here so the visual rule lives with the rest of the theme. */ .filo-crt-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.16) 1px, rgba(0, 0, 0, 0) 2px ); mix-blend-mode: multiply; } .filo-crt-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } /* ---------- Utility classes — apply these directly in page Twig files ---------- */ .chrome-btn { display: inline-block; font-family: "JetBrains Mono", monospace; letter-spacing: 0.05em; border-radius: 4px; padding: 0.75rem 1.5rem; background: linear-gradient(180deg, #f4f7fb 0%, #c3cfdf 45%, #8d9ab0 50%, #dde5ee 100%); color: #0a0c10 !important; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -2px 4px rgba(0, 0, 0, 0.25) inset, 0 6px 16px -6px rgba(0, 0, 0, 0.7); transition: transform 0.15s ease, filter 0.15s ease; } .chrome-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #0a0c10 !important; } .term-btn { display: inline-block; font-family: "JetBrains Mono", monospace; letter-spacing: 0.04em; border-radius: 4px; padding: 0.75rem 1.5rem; background: rgba(109, 255, 179, 0.06); color: var(--filo-phosphor) !important; border: 1px solid var(--filo-phosphor-dim); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .term-btn:hover { background: rgba(109, 255, 179, 0.12); border-color: var(--filo-phosphor); box-shadow: 0 0 18px -4px rgba(109, 255, 179, 0.5); } .term-panel { background: linear-gradient(160deg, rgba(109, 255, 179, 0.05), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.3)); border: 1px solid var(--filo-line); border-radius: 6px; padding: 1.25rem; } .bevel-panel { background: linear-gradient(155deg, rgba(109, 255, 179, 0.05), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.25)); border: 1px solid var(--filo-line); border-radius: 6px; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.7); padding: 1.25rem; } .phosphor-text { color: var(--filo-phosphor); text-shadow: 0 0 6px rgba(109, 255, 179, 0.55), 0 0 16px rgba(109, 255, 179, 0.2); } .mono-label { font-family: "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; color: var(--filo-steel); } .cursor-blink::after { content: "\2588"; display: inline-block; margin-left: 0.15em; color: var(--filo-phosphor); animation: filo-blink 1.1s steps(1) infinite; } @keyframes filo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .crt-bezel { background: linear-gradient(155deg, #e7ecf2 0%, #9aa7ba 22%, #4b5566 48%, #cdd6e3 60%, #6b7688 78%, #eef2f7 100%); border-radius: 12px; padding: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.85); } .crt-screen { background: var(--filo-bg-raised); border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.5); overflow: hidden; } @media (prefers-reduced-motion: reduce) { .cursor-blink::after { animation: none !important; } } /* ---------- Add your own Exo-specific overrides below ---------- */ /* Example, once you've confirmed the real class name via Inspect: .package-card { background: linear-gradient(155deg, rgba(109,255,179,0.05), rgba(0,0,0,0.25)) !important; border: 1px solid var(--filo-line) !important; } */