/* * Terminal / hacker skin — OPTIONAL overlay. * ------------------------------------------------------------------ * Activates ONLY when has the class "tf-terminal". * Toggle with the ">_" button in the header (persisted per browser). * Remove the class => the original design is back, untouched. * * This file changes ONLY colors / fonts / borders. It never touches * layout, markup, pages or any logic. Safe to delete to fully revert. * ------------------------------------------------------------------ */ /* ---- skin toggle button (visible in BOTH modes) ---- */ .tf-skin-toggle { display: inline-grid; place-items: center; min-width: 40px; height: 38px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--tf-border); background: transparent; color: var(--tf-text-soft); font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .tf-skin-toggle:hover, .tf-skin-toggle:focus-visible { border-color: var(--tf-gold); color: var(--tf-text); } /* =================================================================== TERMINAL MODE — everything below applies only when active =================================================================== */ /* palette: override the theme variables so the WHOLE site adapts */ html.tf-terminal, html.tf-terminal[data-theme="dark"], html.tf-terminal[data-theme="light"] { --tf-font: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", "DejaVu Sans Mono", monospace; --tf-bg: #000600; --tf-bg-soft: #000600; --tf-surface: rgba(0, 24, 7, 0.55); --tf-surface-strong: #021a08; --tf-surface-muted: rgba(0, 30, 9, 0.5); --tf-text: #b6ffc4; --tf-text-soft: #4fbf6a; --tf-border: rgba(57, 255, 110, 0.30); --tf-gold: #39ff6e; --tf-gold-soft: rgba(57, 255, 110, 0.12); --tf-gold-strong: #7dff9f; --tf-shadow: none; --tf-glow: none; } /* base canvas */ html.tf-terminal body { background: #000600 !important; color: var(--tf-text); font-weight: 400; letter-spacing: 0; text-shadow: 0 0 1px rgba(57, 255, 110, 0.22); } /* square everything → terminal panels (kept inside .tf-terminal only) */ html.tf-terminal * { border-radius: 0 !important; } /* ...but keep the theme switch + its knob round */ html.tf-terminal .tf-theme-toggle, html.tf-terminal .tf-theme-toggle-thumb { border-radius: 999px !important; } /* flatten decorative gradients to flat terminal surfaces */ html.tf-terminal .tf-site-header, html.tf-terminal .tf-site-main, html.tf-terminal [class*="-card"], html.tf-terminal [class*="-panel"], html.tf-terminal [class*="-hero"], html.tf-terminal [class*="-shell"] { background-image: none; } /* headings */ html.tf-terminal h1, html.tf-terminal h2, html.tf-terminal h3, html.tf-terminal h4, html.tf-terminal h5, html.tf-terminal h6 { color: var(--tf-gold-strong); letter-spacing: 0; text-transform: none; } html.tf-terminal a { color: var(--tf-gold); } /* blinking cursor signature after the brand name */ html.tf-terminal .tf-brand-text strong::after { content: "_"; margin-left: 2px; color: var(--tf-gold); animation: tf-term-blink 1.1s steps(1) infinite; } @keyframes tf-term-blink { 50% { opacity: 0; } } /* header buttons */ html.tf-terminal .tf-site-header .tf-button-primary { color: #001505; background: var(--tf-gold); border: 1px solid var(--tf-gold); box-shadow: none; } html.tf-terminal .tf-site-header .tf-button-primary:hover, html.tf-terminal .tf-site-header .tf-button-primary:focus-visible { background: var(--tf-gold-strong); } html.tf-terminal .tf-site-header .tf-button-ghost, html.tf-terminal .tf-site-header .tf-button-secondary { color: var(--tf-gold); border: 1px solid var(--tf-border); background: transparent; } html.tf-terminal .tf-skin-toggle { border-color: var(--tf-gold); color: var(--tf-gold); background: var(--tf-gold-soft); } /* form fields */ html.tf-terminal input, html.tf-terminal textarea, html.tf-terminal select { background: #000600; color: var(--tf-text); border: 1px solid var(--tf-border); } html.tf-terminal ::placeholder { color: rgba(79, 191, 106, 0.6); } html.tf-terminal ::selection { background: rgba(57, 255, 110, 0.3); color: #eaffef; } /* subtle CRT scanlines (purely visual, never blocks clicks) */ html.tf-terminal body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.18) 3px ); } @media (prefers-reduced-motion: reduce) { html.tf-terminal .tf-brand-text strong::after { animation: none; } }