/* * Standalone page (no global layout): these variables reuse the same names/values as app.css's --bb-* where relevant, but are redeclared here rather than loading all of app.css, which would redefine /
styling and break this design. * * Contrast checked (WCAG, on --term-bg #0A2A22, L=0.018): * --term-fg (body text) : 12.2:1 (AAA) * --term-green (accent) : 7.7:1 (AAA) * --term-red (red accents) : 5.2:1 (AA, see note below) * Verified under protanopia/deuteranopia/tritanopia/achromatopsia simulation: everything stays readable, since the distinction relies on LIGHTNESS (very dark background / light text), never on hue alone. */ :root { --bb-green-deep: #0F352C; --bb-green-mid: #1F6652; --bb-white: #FFFFFF; --term-bg: #0A2A22; --term-bg-panel: #0D3229; /* Body text: a white barely tinted with green rather than the saturated green below. Vivid green on a green background is technically contrasted but tiring and "blurry" to read (two shades of the same hue); this light tone fixes that while keeping the green mood. */ --term-fg: #D9E8E4; /* Phosphor green, same hue as --bb-green-mid, lightened and saturated like an old CRT screen. Reserved for small accents (bullets, borders, cursor, "$" prompts) rather than body text, to avoid an "everything is green" look. */ --term-green: #3CDCAF; /* Red accent, replacing the gold used on the main navbar. Deliberately lighter than the brand red (--bb-red, ~1.2:1 on this background, unreadable): a saturated brand red can't pass on such a dark background without turning pink once lightened enough to be readable. --term-red is the most saturated compromise that still holds 5.2:1 (AA) while staying recognizably red. */ --term-red: #EB7070; /* Original brand red: used ONLY as a solid fill behind white text, never as a text color on a dark background. */ --term-red-deep: #BC2727; /* Keyboard focus ring: always pure white, independent of the red/green content palette, to stay visible in every circumstance (WCAG 2.4.11). */ --term-focus: #FFFFFF; /* "Desktop" behind the terminal window: a gradient rather than an image, free to adjust and consistent with the site palette. */ --desktop-a: #163F33; --desktop-b: #081D17; --taskbar-bg: #06140F; } * { box-sizing: border-box; } /* Scrollbar themed to the terminal colors rather than the browser's default gray. Firefox only takes 2 colors (track/thumb), the WebKit rules below can be more detailed. */ * { scrollbar-width: thin; scrollbar-color: var(--term-green) var(--term-bg-panel); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--term-bg-panel); } ::-webkit-scrollbar-thumb { background: var(--term-green); border: 3px solid var(--term-bg-panel); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--term-red); } ::-webkit-scrollbar-corner { background: var(--term-bg-panel); } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--term-bg); color: var(--term-fg); font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 16px; line-height: 1.6; } body { display: flex; flex-direction: column; } ::selection { background: var(--term-green); color: var(--term-bg); } /* Site navbar + note, shown only when this page is opened directly (redirected from /story on mobile), never when displayed in the #miniSite iframe on the 3D screen (desktop), to avoid a "page inside a page" duplication. .is-standalone/.is-embedded is set in , before the first render. */ .site-nav { display: none; } html.is-standalone .site-nav { flex: 0 0 auto; display: block; padding: 0.6rem 1rem; background: var(--taskbar-bg); border-bottom: 1px solid var(--bb-green-mid); } .site-nav-note { margin: 0 0 0.5rem; font-size: 0.8rem; font-style: italic; color: var(--term-fg); opacity: 0.75; } .site-nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } .site-nav-links a { padding: 0.3rem 0.1rem; color: var(--term-green); text-decoration: none; font-size: 0.9rem; font-weight: 600; } .site-nav-links a:hover, .site-nav-links a:focus-visible { color: var(--term-red); text-decoration: underline; } .site-nav-links a:focus-visible { outline: 2px solid var(--term-focus); outline-offset: 2px; } /* "Desktop": the visible background around the terminal window (~20% of the screen, the window takes 80%), with a few icons and a taskbar to read clearly as "an open computer" rather than just a colored border. */ .desktop { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-bottom: 2.5rem; background: linear-gradient(160deg, var(--desktop-a) 0%, var(--desktop-b) 100%); } .desktop-icons { position: absolute; top: 1.5rem; left: 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; z-index: 1; } .desktop-icon { display: block; width: 2.25rem; height: 1.9rem; opacity: 0.55; } .desktop-icon--folder { background: var(--term-green); clip-path: polygon(0 22%, 38% 22%, 46% 4%, 100% 4%, 100% 100%, 0 100%); } .desktop-icon--trash { position: relative; border: 0.15rem solid var(--term-fg); border-radius: 2px; } .desktop-icon--trash::before { content: ""; position: absolute; top: -0.4rem; left: -0.2rem; right: -0.2rem; height: 0.25rem; background: var(--term-fg); } .taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.85rem; background: var(--taskbar-bg); border-top: 1px solid var(--bb-green-mid); z-index: 1; } .taskbar-start { width: 1.5rem; height: 1.5rem; border-radius: 3px; background: var(--term-green); opacity: 0.85; } .taskbar-status { display: flex; align-items: center; gap: 0.7rem; } .taskbar-battery { position: relative; display: inline-block; width: 1.4rem; height: 0.75rem; border: 1.5px solid var(--term-fg); border-radius: 2px; opacity: 0.85; } .taskbar-battery::after { content: ""; position: absolute; top: 50%; right: -0.3rem; transform: translateY(-50%); width: 0.18rem; height: 0.4rem; background: var(--term-fg); border-radius: 0 1px 1px 0; } .taskbar-battery-fill { display: block; height: 100%; width: 82%; background: var(--term-green); } .taskbar-clock { font-size: 0.85rem; letter-spacing: 0.05em; color: var(--term-fg); opacity: 0.85; } /* The terminal window itself: 80% of the screen to let the "desktop" show around it, app-window style rather than full screen. */ .term-window { position: relative; width: 80%; height: 80%; max-width: 1400px; display: flex; flex-direction: column; background: var(--term-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55); z-index: 1; } a { color: var(--term-fg); } a:hover, a:focus-visible { color: var(--term-red); } /* Old-terminal-style title bar with a blinking red cursor. The 3 dots are pure window-chrome decoration, not functional buttons, so their exact hue doesn't need to be distinguishable by everyone the way the rest of the page does. */ .term-titlebar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 1.1rem; background: var(--bb-green-deep); border-bottom: 2px solid var(--term-green); font-family: "VT323", "Courier New", monospace; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--term-fg); } .term-dots { display: inline-flex; gap: 0.4rem; } .term-dots span { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; } .term-dots span:nth-child(1) { background: var(--term-red); } .term-dots span:nth-child(2) { background: var(--term-fg); opacity: 0.7; } .term-dots span:nth-child(3) { background: var(--term-green); } .term-cursor { display: inline-block; color: var(--term-red); animation: term-blink 1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } } @keyframes term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Anchor menu: direct links to sections, no JS required */ .term-nav { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; padding: 0.4rem 0.9rem; background: var(--bb-green-mid); font-size: 0.95rem; } /* Generous vertical padding: a comfortable tap target, since the text alone is only ~22px tall, below the recommended 24px minimum. */ .term-nav a { display: inline-block; padding: 0.55rem 0.2rem; color: var(--term-fg); text-decoration: none; white-space: nowrap; border-radius: 2px; } .term-nav a::before { content: "> "; color: var(--term-green); } .term-nav a:hover, .term-nav a:focus-visible { color: var(--term-red); text-decoration: underline; } .term-nav a:focus-visible { outline: 2px solid var(--term-focus); outline-offset: 2px; } main { flex: 1 1 auto; overflow-y: auto; max-width: 1000px; width: 100%; margin: 0 auto; padding: 1.75rem 3rem 3rem; scroll-behavior: smooth; } section { padding-top: 1.5rem; scroll-margin-top: 1rem; } section + section { margin-top: 1.5rem; border-top: 1px dashed rgba(60, 220, 175, 0.35); } h1, h2, h3 { font-family: "VT323", "Courier New", monospace; font-weight: normal; letter-spacing: 0.03em; color: var(--term-fg); margin: 0 0 0.75rem; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h2::before { content: "## "; color: var(--term-red); } h3 { font-size: 1.25rem; } h3::before { content: "# "; color: var(--term-green); } p { margin: 0 0 1rem; } /* Strikethrough text (~~text~~ in Markdown, editable StorySection content) is used as a recurring joke/self-correction in the original text: a subtle red reinforces that rather than decorating at random. */ s, del { color: var(--term-red); opacity: 0.85; } ul { margin: 0 0 1rem; padding-left: 1.4rem; } li { margin-bottom: 0.35rem; } li::marker { color: var(--term-green); } /* Contact form styled like a command prompt */ .term-form { margin-top: 1rem; padding: 1.25rem; background: var(--term-bg-panel); border: 1px solid var(--term-green); border-radius: 4px; } .term-field { margin-bottom: 1rem; } .term-field label { display: block; margin-bottom: 0.35rem; color: var(--term-fg); } .term-field label::before { content: "$ "; color: var(--term-red); } .term-field input, .term-field textarea { width: 100%; padding: 0.5rem 0.6rem; background: var(--term-bg); border: 1px solid var(--bb-green-mid); border-radius: 3px; color: var(--term-fg); font-family: inherit; font-size: 1rem; } .term-field input:focus-visible, .term-field textarea:focus-visible { outline: 2px solid var(--term-focus); outline-offset: 1px; border-color: var(--term-focus); } .term-submit { padding: 0.6rem 1.4rem; background: var(--term-red-deep); color: var(--bb-white); border: none; border-radius: 3px; font-family: inherit; font-size: 1rem; font-weight: bold; cursor: pointer; } .term-submit:disabled { opacity: 0.6; cursor: default; } /* Anti-spam honeypot: moved off-screen rather than display:none, since some bots specifically ignore that. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --term-fg in both cases (12.2:1 AAA): the success/error distinction comes from the text itself and this left border, never from text color alone. */ .contact-status { margin: 0.75rem 0 0; color: var(--term-fg); font-weight: 600; min-height: 1.2em; } .contact-status.is-error { border-left: 3px solid var(--term-red); padding-left: 0.5rem; } .term-submit:hover { background: var(--term-green); color: var(--term-bg); } .term-submit:focus-visible { outline: 2px solid var(--term-focus); outline-offset: 2px; } @media (max-width: 700px) { /* The desktop behind no longer makes sense on a small screen, so the window takes the full space instead, app-style. */ .desktop { padding-bottom: 0; display: block; } .desktop-icons, .taskbar { display: none; } .term-window { width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; } } @media (max-width: 480px) { .term-titlebar { font-size: 1.15rem; } .term-nav { gap: 0.25rem 0.85rem; font-size: 0.85rem; } }