/* ====== Local Fonts ====== */ /* VT323 */ @font-face { font-family: "VT323"; src: url("../fonts/VT323/VT323-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Orbitron (Regular only for body; weights available in /static) */ @font-face { font-family: "Orbitron"; src: url("../fonts/Orbitron/static/Orbitron-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Exo (Regular/Italic from /static to keep it simple) */ @font-face { font-family: "Exo"; src: url("../fonts/Exo/static/Exo-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Exo"; src: url("../fonts/Exo/static/Exo-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } /* Intel One Mono */ @font-face { font-family: "Intel One Mono"; src: url("../fonts/Intel_One_Mono/static/IntelOneMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Days One */ @font-face { font-family: "Days One"; src: url("../fonts/Days_One/DaysOne-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Press Start 2P */ @font-face { font-family: "Press Start 2P"; src: url("../fonts/Press_Start_2P/PressStart2P-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* ====== Easy Font Switching ====== Change the font without editing CSS rules. Option 1: In HTML, set (or vt323|exo|intel|days|press2p) Option 2: Change --font-ui here in :root. */ :root{ --matrix-bg: #000; --matrix-text: #00ff00; --matrix-soft: #0a1a0a; --matrix-glow: rgba(0,255,0,.75); --border: #072007; --muted: #6df36d; --maxw: 1200px; /* Default UI font */ --font-ui: "VT323", monospace; } /* Attribute-based overrides (no CSS edit needed; just change data-font on ) */ body[data-font="vt323"] { --font-ui: "VT323", monospace; } body[data-font="orbitron"]{ --font-ui: "Orbitron", "Intel One Mono", monospace; } body[data-font="exo"] { --font-ui: "Exo", "Intel One Mono", system-ui, sans-serif; } body[data-font="intel"] { --font-ui: "Intel One Mono", monospace; } body[data-font="days"] { --font-ui: "Days One", system-ui, sans-serif; } body[data-font="press2p"] { --font-ui: "Press Start 2P", monospace; } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; background:var(--matrix-bg); color:var(--matrix-text); font-family: var(--font-ui); font-size:22px; line-height:1.6; overflow-x:hidden; } /* Subtle background glow */ body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 30% 20%, rgba(0,255,0,.10), transparent 45%), radial-gradient(circle at 70% 80%, rgba(0,255,0,.08), transparent 50%); animation: pulse 5s linear infinite; pointer-events:none; z-index:0; } @keyframes pulse { 0%,100%{opacity:.7} 50%{opacity:.35} } .container{ width:min(var(--maxw), 96%); margin-inline:auto; position:relative; z-index:2; } .containerTop{ width: 100%; margin-inline:auto; position:relative; z-index:2; padding-top:1rem; } .btn{ display:inline-block; padding:.7rem 1rem; background:var(--matrix-text); color:#001700; border-radius:10px; border:1px solid var(--border); box-shadow:0 0 12px 0 var(--matrix-glow); text-decoration:none; font-weight:700; font-size:1.1em; } /* ====== Hero (video confined here) ====== */ .hero{ position: relative; min-height: 100vh; display: grid; place-items: center; border-bottom:1px solid var(--border); overflow:hidden; } .hero .bg{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35; mix-blend-mode:screen; } .hero .bg video{ width:100%; height:100%; object-fit:cover; } .hero .overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25) 40%, rgba(0,0,0,.75)); } .hero .inner{ position:relative; z-index:2; text-align:center; } .title{ font-size: clamp(32px, 6vw, 64px); margin:0 0 .5rem 0; letter-spacing:.08em; text-shadow: 0 0 12px var(--matrix-glow), 0 0 24px rgba(0,255,0,.35); } .subtitle{ color:var(--muted); font-size: clamp(16px, 2.2vw, 22px); margin:0 0 1.2rem 0; }