/* tinux.dev — midnight line */ :root { --bg: #13131e; --ink: #cdcbe9; --dim: #807ea8; --faint: #4e4c72; --line: #2c2b4a; --amber: #ffb454; --amber-ink: #161020; --panel: rgba(11, 11, 20, 0.78); --accent: var(--amber); } * { box-sizing: border-box; } html { scrollbar-color: var(--faint) var(--bg); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; line-height: 1.6; } ::selection { background: var(--amber); color: var(--amber-ink); } /* ----- first-visit audio intro ----- */ /* set pre-paint by the inline script; .ready arrives once the intro (or page boot) finishes, and everything below fades in from there */ html.first-visit:not(.ready) main { opacity: 0; } #intro { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #000; /* the black backdrop leaves last, after the parts have gone */ transition: opacity 0.95s ease 1.05s; } #intro.out { opacity: 0; pointer-events: none; } /* parts leave one by one, the way they arrived */ #intro.out .intro-text { animation: intro-out 0.7s steps(5) forwards; } #intro.out .intro-icon { animation: intro-out 0.7s steps(5) 0.35s forwards; } .intro-icon { width: 88px; height: 88px; animation: intro-in 1.4s steps(7) 0.4s backwards; } .intro-text { margin: 0; font-family: "Silkscreen", monospace; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); animation: intro-in 1.2s steps(6) 1.2s backwards; } @keyframes intro-in { from { opacity: 0; transform: translateY(6px); } } @keyframes intro-out { to { opacity: 0; transform: translateY(-6px); } } /* ----- entrance fades ----- */ html.ready .masthead h1 { animation: rise 0.5s steps(4) backwards; } html.ready .tagline { animation: rise 0.5s steps(4) 0.15s backwards; } html.ready footer { animation: rise 0.5s steps(4) 0.45s backwards; } /* ----- sound toggle ----- */ #snd { position: fixed; right: 18px; bottom: 16px; z-index: 5; padding: 8px 12px; font-family: "Silkscreen", monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: color 0.15s steps(2), border-color 0.15s steps(2); } #snd:hover, #snd:focus-visible { color: var(--amber); border-color: var(--amber); outline: none; } #snd[aria-pressed="false"] { color: var(--faint); } /* deploy stamp — bump in index.html on every push */ #ver { position: fixed; right: 98px; bottom: 25px; z-index: 5; font-family: "Silkscreen", monospace; font-size: 9px; letter-spacing: 0.08em; color: var(--faint); pointer-events: none; } /* ----- scene ----- */ #scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; pointer-events: none; } /* foreground plane — near ridge, ground and train render above the text, so the page scrolls away behind the mountains */ #front { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; image-rendering: pixelated; pointer-events: none; } /* readability veil — keeps the scene visible at the edges, calm behind text */ .veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 18, 0.72) 0%, rgba(10, 10, 18, 0.38) 38%, rgba(10, 10, 18, 0.20) 70%, rgba(10, 10, 18, 0.05) 100%); } /* ----- layout ----- */ main { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: clamp(56px, 10vh, 110px) 28px 200px; } .masthead h1 { margin: 0; font-family: "Silkscreen", monospace; font-weight: 700; font-size: clamp(42px, 7vw, 76px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-shadow: 0 0 28px rgba(124, 122, 168, 0.35); } .tagline { margin: 14px 0 0; color: var(--dim); font-size: 14px; letter-spacing: 0.04em; } .tagline b { color: var(--amber); font-weight: 500; } /* ----- sections ----- */ .block { margin-top: 76px; animation: rise 0.4s steps(4) backwards; } .block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; } .block-num { font-family: "Silkscreen", monospace; font-size: 12px; color: var(--amber); } .block-label { margin: 0; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } /* dithered rule — square dots, no anti-aliased lines here */ .block-rule { flex: 1; height: 2px; align-self: center; background-image: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px); } .block-blurb { color: var(--faint); font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; } /* ----- link rows ----- */ .row { display: flex; align-items: baseline; gap: 18px; padding: 15px 14px; color: var(--ink); text-decoration: none; border: 1px solid transparent; border-bottom: 1px dashed var(--line); transition: transform 0.18s steps(3), background-color 0.18s steps(3), border-color 0.18s steps(3); animation: rise 0.4s steps(4) backwards; } .row-name { display: flex; align-items: center; gap: 12px; font-family: "Silkscreen", monospace; font-size: 15px; white-space: nowrap; } .tick { width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); } .row-desc { color: var(--dim); font-size: 13px; flex: 1; } .row-go { font-family: "Silkscreen", monospace; font-size: 13px; color: var(--amber); opacity: 0; transform: translateX(-6px); transition: opacity 0.18s steps(3), transform 0.18s steps(3); } .row:hover, .row:focus-visible { background: rgba(44, 43, 74, 0.28); border-color: var(--line); transform: translateX(6px); outline: none; } .row:hover .row-go, .row:focus-visible .row-go { opacity: 1; transform: translateX(0); } /* ----- expanding rows ----- */ .row-toggle { width: 100%; margin: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; } /* the +/− is the affordance — always visible, unlike link arrows */ .row-toggle .row-go { opacity: 1; transform: none; font-size: 15px; } /* the dashed separator lives on the wrapper, fixed in place, so the sliding panel never makes a line pop in and out; hovering the toggle slides the whole wrapper — underline included — like plain rows */ .expand { border-bottom: 1px dashed var(--line); transition: transform 0.18s steps(3); } .expand:has(> .row-toggle:hover), .expand:has(> .row-toggle:focus-visible) { transform: translateX(6px); } .expand .row-toggle:hover, .expand .row-toggle:focus-visible { transform: none; } .expand .row-toggle, .expand .row-toggle:hover, .expand .row-toggle:focus-visible { border-bottom-color: transparent; } .expand.open .row-toggle { background: rgba(44, 43, 74, 0.28); border-color: var(--line); border-bottom-color: transparent; } /* slides open and shut — height is measured and driven from JS, so the wrapper's dashed line rides the motion in every browser */ .expand-detail { overflow: hidden; transition: height 0.3s ease; } .expand-detail[hidden] { display: none; } .expand-inner { padding: 4px 14px 26px; } .detail-label { margin: 22px 0 10px; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); } .how-list { margin: 0; padding: 0; list-style: none; } .how-list li { position: relative; margin: 5px 0; padding-left: 18px; color: var(--dim); font-size: 13.5px; } .how-list li::before { content: "+"; position: absolute; left: 0; top: 1px; color: var(--amber); font-family: "Silkscreen", monospace; font-size: 11px; } .detail-links { margin-top: 18px; display: flex; gap: 14px; } /* ----- install panel ----- */ .panel { position: relative; margin-top: 6px; padding: 24px 26px; border: 1px solid var(--line); background: var(--panel); animation: rise 0.4s steps(4) backwards; } .corner { position: absolute; width: 5px; height: 5px; background: var(--amber); } .corner.tl { top: -3px; left: -3px; } .corner.tr { top: -3px; right: -3px; } .corner.bl { bottom: -3px; left: -3px; } .corner.br { bottom: -3px; right: -3px; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .panel-name { margin: 0; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 19px; } .panel-links { display: flex; gap: 14px; } .plink { color: var(--dim); text-decoration: none; font-size: 13px; letter-spacing: 0.02em; transition: color 0.15s steps(2); } .plink:hover, .plink:focus-visible { color: var(--amber); outline: none; } .panel-desc { margin: 10px 0 18px; color: var(--dim); font-size: 13.5px; max-width: 56ch; } .term { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); background: #0a0a13; } .term-lines { flex: 1; padding: 13px 16px; overflow-x: auto; white-space: nowrap; } .term-line { display: block; font-family: inherit; font-size: 13px; line-height: 2; color: var(--ink); } .term-line::before { content: "$ "; color: var(--amber); } .copy-btn { flex: 0 0 auto; align-self: center; margin: 0 12px; padding: 9px 14px; font-family: "Silkscreen", monospace; font-size: 11px; color: var(--amber-ink); background: var(--amber); border: 0; cursor: pointer; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transition: transform 0.1s steps(2), box-shadow 0.1s steps(2); } .copy-btn:hover { filter: brightness(1.08); } .copy-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } .copy-btn.done { background: #7de8b8; } .copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .panel-note { margin: 14px 0 0; color: var(--faint); font-size: 12px; max-width: 64ch; } /* ----- footer ----- */ footer { position: relative; z-index: 2; margin-top: 110px; color: var(--faint); font-size: 12px; letter-spacing: 0.04em; } footer a { color: var(--dim); text-decoration: none; } footer a:hover, footer a:focus-visible { color: var(--amber); outline: none; } /* ----- motion & small screens ----- */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } } a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } @media (max-width: 640px) { main { padding-bottom: 170px; } .row { flex-wrap: wrap; gap: 6px 18px; } .row-desc { flex-basis: 100%; order: 3; } .block-blurb { display: none; } .term { flex-direction: column; } .copy-btn { align-self: stretch; margin: 0; padding: 12px; } } @media (prefers-reduced-motion: reduce) { .block, .row, .panel { animation: none; } .intro-icon, .intro-text, #intro.out .intro-icon, #intro.out .intro-text { animation: none; } #intro { transition-delay: 0s; } html.ready .masthead h1, html.ready .tagline, html.ready footer { animation: none; } .row, .row-go, .copy-btn, .plink, #snd, .expand-detail, .expand { transition: none; } }