/* Layout knobs for the gutters that flank the content column. --gutter : width of each side gutter (also the image width) --gutter-gap : breathing room between the column and the gutter */ :root { --gutter: 300px; --gutter-gap: 1.5rem; /* Theme colours (light) */ --bg: #f0f5dd; --text: #1f3318; --h1: #123608; --h2: #1d5512; --h3: #2c6a1d; --link: #b44e24; /* orange */ --ttbtn: #4087a2; /* tooltip-button blue */ --action: #a40043; /* action button purple */ --action-fill: #f6dce8; /* pale-purple fill */ --toggle-bg: #2c6a1d; /* theme-toggle green */ --toggle-fg: #f0f5dd; } /* Theme colours (dark) — toggled by adding .dark to */ :root.dark { --bg: #161d14; --text: #d7e4c8; --h1: #a6e58a; --h2: #8ed26f; --h3: #79bd5e; --link: #e8924f; --ttbtn: #6cb6d6; --action: #f175a4; --action-fill: #4a1830; --toggle-bg: #6aae57; --toggle-fg: #161d14; } /* Self-hosted IBM Plex Sans — variable font (any weight 100–700) */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); } /* Positioning context for the page-pinned music dock. Anchored on (not ) on purpose: spans the full document and has no margin, so absolutely-positioned helpers appended to (tooltips, the ant overlay) still resolve against the document origin — putting the context on the centered would shift them all right by its auto margin. */ html { position: relative; } body { font-family: "IBM Plex Sans", Helvetica, sans-serif; font-weight: 440; /* base text, marginally heavier than normal (400) */ background-color: var(--bg); color: var(--text); /* Center the content in a comfortable reading column */ max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 6rem; /* extra buffer space at the bottom */ /* Easier-to-read body text */ line-height: 1.6; } h1 { color: var(--h1); margin-top: 0; margin-bottom: 0.5rem; } h2 { color: var(--h2); margin-top: 2rem; margin-bottom: 0.5rem; } h3 { color: var(--h3); margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 500; /* semi-bold — see note about font support */ } p { margin-top: 0; margin-bottom: 1rem; } a { color: var(--link); text-decoration: none; font-weight: 500; /* links: marginally heavier than base text (440) */ } a:hover { text-decoration: underline; } /* TOOLTIP BUTTONS — inline, look like links (in the action blue), and just reveal a definition tooltip. These hide while the ants are out. */ .tooltip-button { background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; font-weight: 500; /* same marginal bump as links */ color: var(--ttbtn); text-decoration: none; cursor: pointer; } .tooltip-button:hover, .tooltip-button.pinned { /* underline on hover / while a tooltip is pinned */ text-decoration: underline; } /* THE action button — the boxed, purple launcher that releases the ants. Two looks, never underlined: transparent normally, pale-purple fill when its tooltip is showing (hover/pinned) OR the ants are out. */ .action-button { display: inline-block; padding: 0.6rem 1.1rem; border: 1px solid var(--action); border-radius: 4px; color: var(--action); background: transparent; font-family: inherit; font-size: 1.05rem; font-weight: 600; text-align: center; line-height: 1.25; white-space: nowrap; /* keep each
line intact; sizes to the widest line */ text-decoration: none; cursor: pointer; } .action-button:hover, .action-button.pinned, body.ants-active .action-button { background-color: var(--action-fill); text-decoration: none; } /* While the ants are out, the tooltip buttons fade away entirely. */ body.ants-active .tooltip-button { opacity: 0; pointer-events: none; } /* Small green dark-mode toggle, sitting to the left of the title. */ #theme-toggle { position: absolute; left: 0; top: 0.2em; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: var(--toggle-bg); color: var(--toggle-fg); font-size: 0.95rem; line-height: 1; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; } #theme-toggle::before { content: "\263E"; } /* ☾ moon (switch to dark) */ :root.dark #theme-toggle::before { content: "\2600"; } /* ☀ sun (switch to light) */ #theme-toggle:hover { filter: brightness(1.1); } /* The music dock is pinned to the bottom-right of the PAGE (absolute inside the position:relative body), so it scrolls with the content rather than floating over the screen. The Music button sits to the left of the record player. */ #music-dock { position: absolute; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 1rem; z-index: 40; pointer-events: none; /* dead space lets clicks/selection through... */ } #music-dock button { pointer-events: auto; } /* ...only the buttons are live */ /* Music button — the action button's purple colour scheme. Starts dormant: its label is hidden and it ignores hover until the "Music" word has flown into it (.activated), at which point the label shows and hovering reveals the current song (handled in JS). The bottom margin leaves room for that tooltip below. */ #music-toggle { margin-bottom: 5rem; padding: 0.4rem 0.9rem; border: 1px solid transparent; /* frame is invisible until the word arrives */ border-radius: 4px; color: transparent; background: transparent; font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.25; cursor: pointer; } #music-toggle.activated { color: var(--action); border-color: var(--action); } #music-toggle.activated:hover { background-color: var(--action-fill); } /* Record player: a fixed window onto a taller turntable, so the turntable is mostly off-screen below and only a wide, short strip peeks in. */ #record-player { position: relative; width: 432px; height: 144px; /* the peeking strip — wider than it is tall */ overflow: hidden; } /* The turntable itself, parked fully below the window; pops up on .popped. */ #rp-inner { position: relative; width: 432px; transform: translateY(168px); transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); /* spring up */ } #rp-inner.popped { transform: translateY(0); } /* Mirrored left-to-right: record toward the corner, tonearm/controls inward. */ #record-svg { display: block; width: 432px; height: auto; transform: scaleX(-1); } /* The tonearm rotates about its pivot (250,40 in the viewBox); JS sets the angle for edge / inner / lifted-away, and the transition smooths the motion. */ #tonearm { transform-box: view-box; transform-origin: 250px 40px; transition: transform 0.4s ease; } /* The Pause/Play and Next buttons sit on the deck (left side, after the flip), at the same scale as the Music button, in beige/brown with a translucent background at all times. */ .rp-btn { position: absolute; box-sizing: border-box; padding: 0.4rem 0.9rem; border: 1px solid #4a3526; border-radius: 4px; background: rgba(238, 228, 206, 0.7); /* light cream — lighter than the deck */ color: #4a3526; font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.25; cursor: pointer; } .rp-btn:hover { background: rgba(238, 228, 206, 0.92); } .rp-btn:active { background: rgba(106, 78, 48, 0.95); color: #efe6d2; } /* darken while pressed */ /* Play/Pause is fixed-width with centred text so it doesn't reshape on toggle. */ #play-toggle { left: 50px; top: 90px; width: 5.4rem; text-align: center; } #next-btn { left: 144px; top: 90px; } /* The "music" word in the prose wears the action-button colour (purple, bold) so it reads as a launch point, underlining only on hover, until it has been clicked and flown away (.spent). The flying copy inherits this look. */ .music-word { cursor: pointer; color: var(--action); font-weight: 600; } .music-word:hover { text-decoration: underline; } /* Once flown (button active), the word reads as normal text, not the purple "clickable" colour. It returns to purple when the player is dismissed. */ .music-word.spent { cursor: default; color: var(--text); } .music-word.spent:hover { text-decoration: none; } /* On desktop the flying word is live; the mobile fallback button is hidden. */ .music-mobile { display: none; } /* The copy that flies along the S-curve to the music button. */ .music-fly { position: absolute; /* pinned to the PAGE, so it scrolls with content mid-flight */ left: 0; top: 0; margin: 0; z-index: 1100; white-space: nowrap; pointer-events: none; offset-rotate: auto; /* spin to follow the path's tangent as it travels */ } /* Centered block (used for the living-document button + its tooltip) */ .centered { text-align: center; } /* Justification helpers — apply to a div (or any block) to align its contents. Affects text and inline/inline-block children. */ .align-left, .align-center, .align-right { max-width: 82%; /* narrower than the column, so text doesn't span the full width */ } .align-left { text-align: left; margin-right: auto; } /* block hugs the left */ .align-center { text-align: center; margin: 0 auto; } /* block stays centered */ .align-right { text-align: right; margin-left: auto; } /* block hugs the right */ /* Side divs / the abstract are positioning contexts for their flanking elements (images, the action-button launcher). */ .align-left, .align-right, #abstract { position: relative; } /* The abstract spans the full column (its text is centered anyway), so the launcher's 100% lands on the column edge — the same reference the images use, keeping the button and images on one gutter centre-line. */ #abstract { max-width: none; } /* Images that flank a side column. Pinned just outside the div's edge and vertically centered against the div, so they stay centered as text is added or removed. */ .side-img { position: absolute; top: 50%; transform: translateY(-50%); width: var(--gutter); height: auto; border-radius: 6px; } /* Image fills its gutter, sitting --gutter-gap clear of the text column. */ .side-img-left { right: calc(100% + var(--gutter-gap)); } .side-img-right { left: calc(100% + var(--gutter-gap)); } /* The action button lives in the right gutter. It still anchors to the abstract (which spans the full column, so the horizontal gutter maths below works), but sits well BELOW it — roughly in line with the first paragraph after the intro. Tune the `+ 7rem` to nudge it up/down. */ .ant-launcher { position: absolute; top: calc(100% + 7rem); /* Center the button on the right gutter's centre-line — the SAME line the flanking images sit on. The abstract spans the full column (below), so 100% is the column's right edge; +gap+gutter/2 reaches the gutter centre. translate(-50%) keeps it centered whatever its width. */ left: calc(100% + var(--gutter-gap) + var(--gutter) / 2); transform: translate(-50%, -50%); } /* Tooltip floats above all other content. Blue by default (tooltip buttons); purple variant for the ant action button. */ .action-tooltip { position: absolute; z-index: 1000; max-width: 240px; padding: 0.4rem 0.6rem; background-color: #4087a2; color: #e6f0f5; border-radius: 4px; font-size: 0.9rem; line-height: 1.4; white-space: pre-line; /* honour \n in the text as line breaks (still wraps long lines) */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .action-tooltip.ant-tooltip { background-color: #a40043; /* dark purple */ color: #f6dce8; /* pale purple */ } /* The Music button's tooltip centres its text (title + song note). */ .action-tooltip.song-tooltip { text-align: center; } /* URL link tooltip: pale text on a mid-orange background (matches the accent-bg + light-text spirit of the other two tooltip variants). */ .action-tooltip.link-tooltip { background-color: #b44e24; /* the link orange (--link, light) */ color: #f7e4d6; /* pale orange */ font-weight: 500; } /* ---- "Release the ants" effect (triggered by the living-document button) ---- */ #pher { position: fixed; inset: 0; z-index: 1; pointer-events: none; } /* Word wrappers sit in normal flow. They fade out (rather than detach) while the ants are active, so the page layout never changes. */ .ant-word { display: inline-block; } body.ants-active .ant-word { opacity: 0; /* vanish instantly the moment the ants appear */ } /* While the ants are out, disable links (tooltip buttons are already hidden + disabled above). The action button stays live so it can recall the ants. */ body.ants-active a { pointer-events: none; } /* Overlay holding the ant clones — absolutely positioned at the document origin so the ants scroll WITH the page. Transparent to clicks so the action button underneath stays usable. */ #ant-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 30; pointer-events: none; } .ant-clone { position: absolute; top: 0; left: 0; white-space: nowrap; will-change: transform; } /* A piece of image being carried by an ant / piled at the nest. */ .ant-piece { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform; } /* ============================================================ MOBILE / NARROW LAYOUT The 300px side gutters only fit above ~1380px. Below that, stack everything into a single reading column: gutter images flow inline (above their section), the living-document button is removed, and the ant effect therefore never runs. Desktop (>1380px) is unaffected. ============================================================ */ @media (max-width: 1380px) { /* Gutter images become normal-flow, constrained, centered blocks. They're already the first child of each section, so they land above the heading. */ .side-img { position: static; transform: none; display: block; width: min(300px, 100%); height: auto; margin: 0 auto 1rem; /* centered, with breathing room below */ } /* Cancel the gutter offsets (they reference the column edge + gutter). */ .side-img-left, .side-img-right { right: auto; left: auto; } /* Let the section blocks use the full reading column. */ .align-left, .align-center, .align-right { max-width: 100%; margin-left: 0; margin-right: 0; } .align-center { margin: 0 auto; } /* abstract text stays centered */ /* Remove the living-document launcher entirely (not just hidden visually): display:none makes it untappable, so the ant effect can never start. */ .ant-launcher { display: none; } /* The record-player dock is desktop-oriented (and too wide for a phone column), so hide it on narrow screens, along with the flying word. In its place a plain blue tooltip-button explains the feature is desktop-only. */ #music-dock { display: none; } .music-word { display: none; } .music-mobile { display: inline-block; } }