/* ========================================================================== Zion's Ecosystem — stylesheet Sections: tokens · base · masthead · cover · toc · essay · modules · strip · footer · responsive · diagrams ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens Light palettes (classic, sage, glacier, sakura). Dark palettes (midnight, matrix, abyss, dracula). Follows system preference unless explicitly set; stored on . -------------------------------------------------------------------------- */ /* Light: Glacier Frost (Default Light - Blue) */ :root, :root[data-theme="light"], :root[data-palette="glacier"], :root[data-theme="light"][data-palette="glacier"] { color-scheme: light; --bg: #e2ebf2; --panel: #f0f6fa; --tile: #c8d8e4; --ink: #13202e; --dim: #4f6578; --gold: #1d72a2; --pink: #b8345c; --cyan: #158b99; --lime: #3a9448; --shadow: var(--ink); --text-shadow: rgba(19, 32, 46, .18); --scanline: rgba(19, 32, 46, .06); --grid: rgba(29, 114, 162, .05); --sky: #a4daf2; --ground: #71a998; --ground-dot: #487869; --art-light: #f0f6fa; --art-dark: #13202e; --art-text: #13202e; --sun-display: block; } /* Light: Classic Parchment */ :root[data-palette="classic"], :root[data-theme="light"][data-palette="classic"] { color-scheme: light; --bg: #f3ead4; --panel: #fff8ea; --tile: #e4d7c0; --ink: #1a1628; --dim: #5c5470; --gold: #c48a12; --pink: #c42d6a; --cyan: #1a8f8f; --lime: #4a9a22; --shadow: var(--ink); /* hard drop shadows */ --text-shadow: rgba(26, 22, 40, .18); /* logo / headline offsets */ --scanline: rgba(26, 22, 40, .06); --grid: rgba(196, 45, 106, .05); /* overworld artwork */ --sky: #9fd4ee; --ground: #7cb86a; --ground-dot: #4e8a42; --art-light: #fff8ea; --art-dark: #1a1628; --art-text: #1a1628; --sun-display: block; } /* Light: Sage Botanical */ :root[data-palette="sage"], :root[data-theme="light"][data-palette="sage"] { color-scheme: light; --bg: #e5ece2; --panel: #f2f7f0; --tile: #cadbc8; --ink: #15241b; --dim: #4d6656; --gold: #2b7a4b; --pink: #b84343; --cyan: #1f7a82; --lime: #52992b; --shadow: var(--ink); --text-shadow: rgba(21, 36, 27, .18); --scanline: rgba(21, 36, 27, .06); --grid: rgba(43, 122, 75, .05); --sky: #a8dbe6; --ground: #6ea85e; --ground-dot: #467a3a; --art-light: #f2f7f0; --art-dark: #15241b; --art-text: #15241b; --sun-display: block; } /* Light: Sakura Rose */ :root[data-palette="sakura"], :root[data-theme="light"][data-palette="sakura"] { color-scheme: light; --bg: #f4e7ec; --panel: #fcf1f5; --tile: #e5cbd5; --ink: #2b1320; --dim: #734e62; --gold: #b33264; --pink: #bd3a72; --cyan: #268791; --lime: #54962c; --shadow: var(--ink); --text-shadow: rgba(43, 19, 32, .18); --scanline: rgba(43, 19, 32, .06); --grid: rgba(179, 50, 100, .05); --sky: #ebd2de; --ground: #b67692; --ground-dot: #854b66; --art-light: #fcf1f5; --art-dark: #2b1320; --art-text: #2b1320; --sun-display: block; } /* Dark: Abyss Ocean (Default Dark - Blue) */ :root[data-theme="dark"], :root[data-theme="dark"][data-palette="abyss"] { color-scheme: dark; --bg: #0b131f; --panel: #111e30; --tile: #1a2d47; --ink: #e0f2fe; --dim: #7ea3c8; --gold: #38bdf8; --pink: #f43f5e; --cyan: #22d3ee; --lime: #4ade80; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(56, 189, 248, .04); --sky: #060c14; --ground: #122238; --ground-dot: #1e395c; --art-light: #e0f2fe; --art-dark: #060c14; --art-text: #e0f2fe; --sun-display: none; } /* Dark: Midnight Synthwave */ :root[data-theme="dark"][data-palette="midnight"] { color-scheme: dark; --bg: #14101f; --panel: #1e1830; --tile: #2a2342; --ink: #f3ead4; --dim: #a498b8; --gold: #f0c14a; --pink: #e84d8a; --cyan: #3ec8c8; --lime: #8fd94a; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .18); --grid: rgba(232, 77, 138, .04); --sky: #0b0a16; --ground: #16122a; --ground-dot: #2a2342; --art-light: #f3ead4; --art-dark: #0b0a16; --art-text: #f3ead4; --sun-display: none; } /* Dark: Matrix Neon */ :root[data-theme="dark"][data-palette="matrix"] { color-scheme: dark; --bg: #0b140f; --panel: #122119; --tile: #1a3327; --ink: #dcf7e6; --dim: #7dae90; --gold: #38ef7d; --pink: #ff3e7f; --cyan: #11f0d4; --lime: #76ff03; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(56, 239, 125, .04); --sky: #050d09; --ground: #11261b; --ground-dot: #1d422f; --art-light: #dcf7e6; --art-dark: #050d09; --art-text: #dcf7e6; --sun-display: none; } /* Dark: Dracula Crimson */ :root[data-theme="dark"][data-palette="dracula"] { color-scheme: dark; --bg: #170d17; --panel: #261526; --tile: #381f38; --ink: #fceef8; --dim: #b88eb0; --gold: #ff6078; --pink: #ff4888; --cyan: #9d7dfa; --lime: #facc15; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(255, 96, 120, .04); --sky: #0d070e; --ground: #2d142b; --ground-dot: #451d42; --art-light: #fceef8; --art-dark: #0d070e; --art-text: #fceef8; --sun-display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"])[data-palette="abyss"] { color-scheme: dark; --bg: #0b131f; --panel: #111e30; --tile: #1a2d47; --ink: #e0f2fe; --dim: #7ea3c8; --gold: #38bdf8; --pink: #f43f5e; --cyan: #22d3ee; --lime: #4ade80; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(56, 189, 248, .04); --sky: #060c14; --ground: #122238; --ground-dot: #1e395c; --art-light: #e0f2fe; --art-dark: #060c14; --art-text: #e0f2fe; --sun-display: none; } :root:not([data-theme="light"])[data-palette="midnight"] { color-scheme: dark; --bg: #14101f; --panel: #1e1830; --tile: #2a2342; --ink: #f3ead4; --dim: #a498b8; --gold: #f0c14a; --pink: #e84d8a; --cyan: #3ec8c8; --lime: #8fd94a; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .18); --grid: rgba(232, 77, 138, .04); --sky: #0b0a16; --ground: #16122a; --ground-dot: #2a2342; --art-light: #f3ead4; --art-dark: #0b0a16; --art-text: #f3ead4; --sun-display: none; } :root:not([data-theme="light"])[data-palette="matrix"] { color-scheme: dark; --bg: #0b140f; --panel: #122119; --tile: #1a3327; --ink: #dcf7e6; --dim: #7dae90; --gold: #38ef7d; --pink: #ff3e7f; --cyan: #11f0d4; --lime: #76ff03; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(56, 239, 125, .04); --sky: #050d09; --ground: #11261b; --ground-dot: #1d422f; --art-light: #dcf7e6; --art-dark: #050d09; --art-text: #dcf7e6; --sun-display: none; } :root:not([data-theme="light"])[data-palette="dracula"] { color-scheme: dark; --bg: #170d17; --panel: #261526; --tile: #381f38; --ink: #fceef8; --dim: #b88eb0; --gold: #ff6078; --pink: #ff4888; --cyan: #9d7dfa; --lime: #facc15; --shadow: #000; --text-shadow: #000; --scanline: rgba(0, 0, 0, .22); --grid: rgba(255, 96, 120, .04); --sky: #0d070e; --ground: #2d142b; --ground-dot: #451d42; --art-light: #fceef8; --art-dark: #0d070e; --art-text: #fceef8; --sun-display: none; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); } body { font-family: Literata, Georgia, serif; font-size: 18px; line-height: 1.55; background-image: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, transparent 0 15px, var(--grid) 15px 16px); background-size: 100% 3px, 16px 16px; } img, svg, canvas { image-rendering: pixelated; image-rendering: crisp-edges; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--cyan); } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } .page { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 80px; } .mono { font-family: "Pixelify Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; } code { font-family: "Pixelify Sans", sans-serif; font-size: .9em; color: var(--gold); } /* -------------------------------------------------------------------------- 3. Masthead -------------------------------------------------------------------------- */ .mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding: 18px 0 14px; border-bottom: 4px solid var(--gold); } .mast .issue { font-family: "Pixelify Sans", sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .mast .logo { font-family: "Jersey 15", sans-serif; font-size: 42px; line-height: .85; letter-spacing: .06em; text-align: center; color: var(--ink); text-shadow: 4px 0 0 var(--pink), 0 4px 0 var(--text-shadow); } .mast .logo span { display: block; font-size: 22px; letter-spacing: .22em; color: var(--gold); text-shadow: none; } .mast .folio { display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-family: "Pixelify Sans", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-align: right; flex-wrap: wrap; } /* theme toggle */ .theme-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); background: var(--panel); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); padding: 4px 8px; cursor: pointer; line-height: 1; } .theme-toggle:hover { background: var(--gold); color: #1a1408; } .theme-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); } .theme-toggle .when-dark { display: none; } :root[data-theme="dark"] .theme-toggle .when-dark { display: inline; } :root[data-theme="dark"] .theme-toggle .when-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .when-dark { display: inline; } :root:not([data-theme="light"]) .theme-toggle .when-light { display: none; } } /* Palette picker */ .palette-picker { display: inline-flex; align-items: center; gap: 5px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); padding: 3px 5px; } .palette-swatch { width: 16px; height: 16px; border: 2px solid var(--ink); padding: 0; cursor: pointer; display: inline-block; position: relative; box-sizing: border-box; background: transparent; flex: 0 0 16px; line-height: 0; transition: transform .08s steps(2); } .palette-swatch:hover { transform: scale(1.2); z-index: 1; } .palette-swatch:active { transform: translate(1px, 1px); } .palette-swatch[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 1px; } .palette-swatch[aria-checked="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background: var(--ink); } /* Palette swatch colors */ .palette-swatch[data-palette-id="glacier"] { background-color: #1d72a2; } .palette-swatch[data-palette-id="classic"] { background-color: #c48a12; } .palette-swatch[data-palette-id="sage"] { background-color: #2b7a4b; } .palette-swatch[data-palette-id="sakura"] { background-color: #b33264; } .palette-swatch[data-palette-id="abyss"] { background-color: #38bdf8; } .palette-swatch[data-palette-id="midnight"] { background-color: #f0c14a; } .palette-swatch[data-palette-id="matrix"] { background-color: #38ef7d; } .palette-swatch[data-palette-id="dracula"] { background-color: #ff6078; } /* -------------------------------------------------------------------------- 4. Cover -------------------------------------------------------------------------- */ .cover { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; padding: 36px 0 40px; border-bottom: 4px solid var(--tile); } .cover h2 { font-family: "Jersey 15", sans-serif; font-size: clamp(42px, 6vw, 72px); line-height: .92; letter-spacing: .02em; margin: 10px 0 18px; color: var(--gold); text-shadow: 3px 3px 0 var(--text-shadow); } .kicker { font-family: "Pixelify Sans", sans-serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); } .deck { font-size: 20px; font-style: italic; color: var(--dim); max-width: 34ch; } .overworld { background: var(--panel); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--shadow); } .overworld .bar { font-family: "Pixelify Sans", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; background: var(--pink); color: #1a0e16; padding: 6px 10px; border-bottom: 4px solid var(--ink); } .overworld svg { display: block; width: 100%; height: auto; background: var(--sky); } /* artwork fills that change with the theme */ .overworld .sky { fill: var(--sky); } .overworld .ground { fill: var(--ground); } .overworld .ground-dot { fill: var(--ground-dot); } .overworld .art-light { fill: var(--art-light); } .overworld .art-dark { fill: var(--art-dark); } .overworld .art-text { fill: var(--art-text); } .overworld .sun { display: var(--sun-display); } /* animation — one 8s cycle: provision → boot → watch → meet → hold data. Elements default to the "finished" frame so a paused scene still reads. */ .overworld .ow-cursor { display: inline-block; margin-left: 2px; animation: ow-blink 1s steps(1) infinite; } .overworld .ow-blink { animation: ow-blink 1s steps(1) infinite; } .overworld .ow-beacon { animation: ow-blink 1.2s steps(1) infinite; } .overworld .ow-star { animation: ow-twinkle 3s steps(2) infinite; } .overworld .ow-star:nth-child(2) { animation-delay: -.7s; } .overworld .ow-star:nth-child(3) { animation-delay: -1.9s; } .overworld .ow-star:nth-child(4) { animation-delay: -1.1s; } .overworld .ow-star:nth-child(5) { animation-delay: -2.4s; } .overworld .ow-star:nth-child(6) { animation-delay: -.3s; } .overworld .ow-packet { animation: ow-packet 8s steps(12) infinite; } .overworld .ow-win1 { animation: ow-boot1 8s steps(1) infinite; } .overworld .ow-win2 { animation: ow-boot2 8s steps(1) infinite; } .overworld .ow-win3 { animation: ow-boot3 8s steps(1) infinite; } .overworld .ow-win2.ow-beacon, .overworld .ow-win3.ow-blink { animation: ow-boot2 8s steps(1) infinite, ow-blink 1s steps(1) infinite; } .overworld .ow-belt { animation: ow-belt .9s steps(4) infinite; } .overworld .ow-pipe { animation: ow-pipe 1.8s steps(12) infinite; } .overworld .ow-ping { fill: none; stroke: var(--cyan); stroke-width: 2; transform-origin: 300px 60px; animation: ow-ping 2s steps(6) infinite; } .overworld .ow-ping2 { animation-delay: -1s; } .overworld .ow-trace { animation: ow-trace 2.1s steps(14) infinite, ow-after 8s steps(1) infinite; } .overworld .ow-trace2 { animation-delay: -.7s, 0s; } .overworld .ow-trace3 { animation-delay: -1.4s, 0s; } .overworld .ow-bots { animation: ow-bots 8s steps(14) infinite; } .overworld .ow-door { fill: var(--art-dark); animation: ow-door 8s steps(1) infinite; } .overworld .ow-seal { fill: none; stroke: var(--gold); stroke-width: 4; opacity: 0; animation: ow-seal 8s steps(1) infinite; } @keyframes ow-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes ow-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } @keyframes ow-packet { 0% { transform: translateX(0); opacity: 1; } 26% { transform: translateX(84px); opacity: 1; } 26.1%, 100% { transform: translateX(84px); opacity: 0; } } @keyframes ow-boot1 { 0%, 27.9% { opacity: 0; } 28%, 96% { opacity: 1; } 96.1%, 100% { opacity: 0; } } @keyframes ow-boot2 { 0%, 33.9% { opacity: 0; } 34%, 96% { opacity: 1; } 96.1%, 100% { opacity: 0; } } @keyframes ow-boot3 { 0%, 39.9% { opacity: 0; } 40%, 96% { opacity: 1; } 96.1%, 100% { opacity: 0; } } @keyframes ow-after { 0%, 41.9% { opacity: 0; } 42%, 96% { opacity: 1; } 96.1%, 100% { opacity: 0; } } @keyframes ow-belt { from { transform: translateX(0); } to { transform: translateX(16px); } } @keyframes ow-pipe { from { transform: translateX(0); } to { transform: translateX(48px); } } @keyframes ow-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.5); opacity: 0; } } @keyframes ow-trace { from { transform: translate(0, 0); } to { transform: translate(100px, -12px); } } @keyframes ow-bots { 0%, 45.9% { transform: translateX(0); opacity: 0; } 46% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(88px); opacity: 1; } 60.1%, 79.9% { transform: translateX(88px); opacity: 0; } 80% { transform: translateX(88px); opacity: 1; } 94% { transform: translateX(0); opacity: 1; } 94.1%, 100% { transform: translateX(0); opacity: 0; } } @keyframes ow-door { 0%, 43.9% { fill: var(--art-dark); } 44%, 62% { fill: var(--gold); } 62.1%, 77.9% { fill: var(--art-dark); } 78%, 96% { fill: var(--gold); } 96.1%, 100% { fill: var(--art-dark); } } @keyframes ow-seal { 0%, 61.9% { opacity: 0; } 62%, 64% { opacity: 1; } 65% { opacity: .2; } 67% { opacity: 1; } 68% { opacity: .2; } 70%, 78% { opacity: 1; } 78.1%, 100% { opacity: 0; } } /* -------------------------------------------------------------------------- 5. Table of contents -------------------------------------------------------------------------- */ .toc { display: grid; grid-template-columns: repeat(5, 1fr); border: 4px solid var(--ink); margin: 28px 0 48px; background: var(--panel); } .toc a { padding: 12px 10px; color: var(--ink); border-right: 4px solid var(--ink); font-family: "Pixelify Sans", sans-serif; font-size: 13px; letter-spacing: .04em; } .toc a:last-child { border-right: 0; } .toc a:hover { background: var(--gold); color: #1a1408; } .toc small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; } .toc a:hover small { color: #1a1408; } /* -------------------------------------------------------------------------- 6. Essay -------------------------------------------------------------------------- */ .essay { columns: 2; column-gap: 36px; margin-bottom: 56px; } .essay p { margin: 0 0 14px; color: var(--ink); } .essay p.lead { font-size: 22px; font-style: italic; color: var(--gold); column-span: all; margin-bottom: 18px; } .drop::first-letter { font-family: "Jersey 15", sans-serif; font-size: 68px; float: left; line-height: .75; padding: 8px 8px 0 0; color: var(--pink); } /* -------------------------------------------------------------------------- 7. Modules — staggered, not identical cards -------------------------------------------------------------------------- */ .spread { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .mod { background: var(--panel); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow); } .mod.wide { grid-column: 1 / -1; } .mod .hd { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 4px solid var(--ink); font-family: "Jersey 15", sans-serif; font-size: 32px; letter-spacing: .04em; } .mod .hd.os { background: var(--gold); color: #1a1408; } .mod .hd.hub { background: var(--cyan); color: #0a1c1c; } .mod .hd.room { background: var(--pink); color: #1a0e16; } .mod .hd.loom { background: var(--lime); color: #102008; } .mod .hd.syn { background: var(--tile); color: var(--ink); } .px { width: 32px; height: 32px; image-rendering: pixelated; flex: 0 0 32px; } .mod .bd { padding: 16px 18px 20px; color: var(--dim); font-size: 16px; } .mod .bd p + p { margin-top: 10px; } .mod .bd strong { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------------------- 8. Comic strip -------------------------------------------------------------------------- */ .strip-label { font-family: "Pixelify Sans", sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin: 48px 0 10px; } .strip h3 { font-family: "Jersey 15", sans-serif; font-size: 40px; margin-bottom: 16px; color: var(--ink); } .panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 4px solid var(--ink); background: var(--ink); } .panel { background: var(--bg); padding: 14px 14px 16px; border-right: 4px solid var(--ink); min-height: 200px; } .panel:last-child { border-right: 0; } .panel .n { font-family: "Pixelify Sans", sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .panel h4 { font-family: "Jersey 15", sans-serif; font-size: 26px; line-height: 1; margin-bottom: 8px; } .panel p { font-size: 15px; color: var(--dim); } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ footer { margin-top: 40px; padding-top: 14px; border-top: 4px solid var(--gold); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: "Pixelify Sans", sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } /* -------------------------------------------------------------------------- 10. Responsive -------------------------------------------------------------------------- */ @media (max-width: 820px) { .mast { grid-template-columns: 1fr; text-align: left; } .mast .logo { text-align: left; } .mast .folio { justify-content: flex-start; text-align: left; } .cover, .spread, .essay, .toc, .panels { grid-template-columns: 1fr; columns: 1; } .toc a, .panel { border-right: 0; border-bottom: 4px solid var(--ink); } .toc a:last-child, .panel:last-child { border-bottom: 0; } .essay p.lead { column-span: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .overworld [class*="ow-"] { animation: none !important; } .overworld .ow-packet, .overworld .ow-seal { display: none; } } /* -------------------------------------------------------------------------- 11. Module header links (main page → architecture pages) -------------------------------------------------------------------------- */ .mod .hd a { color: inherit; text-decoration: none; } .mod .hd a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; } /* -------------------------------------------------------------------------- 12. Architecture pages (zion-os.html, os-hub.html, …) -------------------------------------------------------------------------- */ .mast .issue a { color: inherit; } .mast .issue a:hover { color: var(--cyan); } .hero { padding: 36px 0 32px; border-bottom: 4px solid var(--tile); } .hero h2 { font-family: "Jersey 15", sans-serif; font-size: clamp(42px, 6vw, 72px); line-height: .92; letter-spacing: .02em; margin: 10px 0 18px; color: var(--gold); text-shadow: 3px 3px 0 var(--text-shadow); } .prose { max-width: 72ch; margin: 32px 0 40px; } .prose p { margin: 0 0 14px; color: var(--ink); } .prose code { white-space: nowrap; } .diagram { background: var(--panel); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--shadow); margin-bottom: 20px; } .diagram .bar { font-family: "Pixelify Sans", sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-bottom: 4px solid var(--ink); } .diagram .bar-os { background: var(--gold); color: #1a1408; } .diagram .bar-hub { background: var(--cyan); color: #0a1c1c; } .diagram .bar-room { background: var(--pink); color: #1a0e16; } .diagram .bar-loom { background: var(--lime); color: #102008; } .diagram .bar-syn { background: var(--tile); color: var(--ink); } /* Diagrams are rendered externally with dark text, so they sit on a fixed light field in both themes. */ .diagram .body { padding: 14px; background: #fff8ea; overflow-x: auto; } .diagram .body img { display: block; width: 100%; height: auto; image-rendering: auto; } .toc.sub { margin: 28px 0 0; } .toc a[aria-current="page"] { background: var(--tile); }