/* the lighthouse project — vertical-timeline styles. Layers on top of the shared /style.css lineart base (Roboto Mono, white text, 1px rgba(255,255,255,0.3) borders). Loaded after it, so rules here win. */ /* the shared base only sets border-box on ; the timeline math (padding + border on cards inside percentage-width nodes) needs it everywhere or cards overflow their column and run off-screen on narrow viewports. */ * { box-sizing: border-box; } :root { --bg: #000000; /* deep space navy — the flat page fill */ --line: rgba(255,255,255,0.3); /* home-page lineart border color */ --line-soft: rgba(255,255,255,0.18); --spine-w: 1px; --text: #00df52; /* green text; opacity-dimmed elements darken naturally over the black bg */ } body { background-color: var(--bg); color: var(--text); } /* shared /style.css sets `a` color explicitly (not just inherited) — override it here */ a { color: var(--text); } /* ---- page header + nav ---- */ .lh-header { margin: 10px auto 6px auto; } .lh-nav { display: flex; justify-content: center; gap: 24px; margin-bottom: 40px; } .lh-nav a { opacity: 0.75; } .lh-nav a:hover { opacity: 1; } /* ---- timeline shell ---- */ .timeline { position: relative; width: min(1100px, 92%); margin: 0 auto 80px auto; padding: 20px 0 40px 0; } /* the central spine running down the middle of the screen */ .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--spine-w); background: var(--line); transform: translateX(-50%); } /* a small terminal cap at the very bottom of the spine */ .timeline::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--line); transform: translate(-50%, 50%) rotate(45deg); } /* ---- a node = one log section ---- */ .node { position: relative; width: 50%; padding: 14px 16px; box-sizing: border-box; } .node.left { left: 0; } .node.right { left: 50%; } /* diamond marker that sits on the spine */ .node::after { content: ''; position: absolute; top: 26px; width: 11px; height: 11px; background: var(--bg); /* cuts the spine behind it */ border: 1px solid var(--line); transform: rotate(45deg); z-index: 2; } .node.left::after { right: -6px; } .node.right::after { left: -6px; } /* the Earth phonecall gets a filled marker — a quiet tell that the POV shifted */ .node.human::after { background: var(--line); } /* ---- card (the "description box") ---- */ .card { position: relative; border: 1px solid var(--line); background: rgba(255,255,255,0.02); padding: 18px 22px; } /* thin crossbar connecting the card to the spine — length tracks .node's horizontal padding above (leaves the same small reveal for the marker) */ .card::after { content: ''; position: absolute; top: 31px; width: 12px; height: 1px; background: var(--line); } .node.left .card::after { right: -12px; } .node.right .card::after { left: -12px; } .card-head { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .log-title { font-family: 'Roboto Mono', monospace; font-size: 0.5rem; font-weight: 600; letter-spacing: 1px; margin: 0; } .log-meta { font-family: 'Roboto Mono', monospace; font-size: 0.4rem; font-weight: 300; opacity: 0.6; margin-top: 4px; line-height: 1.5; } .card-body { /* lets our own pinch handler (mobile) own 2-finger gestures instead of the browser's native page zoom, while normal 1-finger scroll still works */ touch-action: pan-y; } .card-body p { font-family: 'Roboto Mono', monospace; font-weight: 300; font-size: 0.48rem; line-height: 1.75; margin: 0 0 0.9em 0; text-align: left; } .card-body p:last-child { margin-bottom: 0; } /* dialogue speaker label */ .dialogue .speaker { font-weight: 600; opacity: 0.9; letter-spacing: 0.4px; } /* the prime-number signal transmission — centered dots */ .card.signal .card-body p { text-align: left; letter-spacing: 6px; opacity: 0.85; margin: 3px 0; } /* ---- end-of-transmission cap, centered below the whole timeline ---- */ .lh-end { text-align: center; margin: 12px auto 120px auto; font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 0.85rem; letter-spacing: 5px; opacity: 0.7; color: var(--text); } /* ---- scroll reveal (progressive enhancement; JS adds .reveal) ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } /* ---- load / error states ---- */ .lh-status { text-align: center; opacity: 0.7; margin: 60px auto; font-size: 0.5rem; } /* ---- mobile: no timeline at all — just each message as a stacked box, scrolling straight down. Text is centered and hyphenated (readability at narrow widths) and pinch-resizable, mirroring blog/blog-post.php's Kindle-style --reader-scale reading-size gesture. ---- */ @media (max-width: 976px), (pointer: coarse) { .timeline { width: 100%; padding: 4px 4px 0 4px; } /* no spine, no terminal cap, no diamond markers, no card-to-spine crossbar */ .timeline::before, .timeline::after, .node::after, .card::after { display: none; } .node, .node.left, .node.right { width: 100%; left: 0; padding: 0; margin-bottom: 16px; } /* header centers too, so the box reads as one cohesive, symmetric unit now that there's no spine on one side to align against */ .card-head { text-align: justify; } .log-title { font-size: 0.65rem; } .log-meta { font-size: 0.5rem; } .card-body p { text-align: justify; font-size: calc(0.62rem * var(--lh-scale, 1)); /* break long words so centered lines don't rag as hard at narrow widths */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphenate-limit-chars: 3 2 2; -webkit-hyphenate-limit-before: 2; -webkit-hyphenate-limit-after: 2; overflow-wrap: break-word; word-break: break-word; } .card.signal .card-body p { letter-spacing: 8px; } .lh-end { font-size: 0.75rem; letter-spacing: 3px; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }