/* ============================================================ CODEX OF... — global stylesheet Aesthetic: blueprint / schematic codex 3 style variants on ============================================================ */ :root{ --gold: #d4a24c; --gold-soft: #b88a3d; --gold-dim: #6f5223; --crimson: #8b1f1f; --crimson-dim: #4a1212; --ink: #0c0a07; --ink-2: #15110a; --paper: #ece4cf; --paper-dim: #b5ac95; --line: rgba(212,162,76,.32); --line-strong: rgba(212,162,76,.55); --rule: rgba(212,162,76,.16); --grid: rgba(212,162,76,.07); --shadow-page: 0 12px 28px -14px rgba(0,0,0,.8); --font-sans: "Liberation Sans","Helvetica Neue",Arial,sans-serif; --font-mono: "Liberation Mono","JetBrains Mono",ui-monospace,Menlo,monospace; --font-display: "Liberation Sans","Helvetica Neue",Arial,sans-serif; --pad-page: clamp(20px, 3vw, 48px); --maxw: 1280px; } /* ---------- Variant: Manuscript (warm parchment-black, gilded) ---------- */ html[data-style="manuscript"]{ --gold: #e0b25a; --gold-soft: #c3933e; --crimson: #7a1a1a; --ink: #100a05; --ink-2: #1a1108; --line: rgba(224,178,90,.36); --line-strong: rgba(224,178,90,.62); --grid: rgba(224,178,90,.05); } /* ---------- Variant: Schema (slate, recipe-card hatch) ---------- */ html[data-style="schema"]{ --gold: #c9a14a; --crimson: #913030; --ink: #0a0d10; --ink-2: #11161b; --line: rgba(201,161,74,.28); --line-strong: rgba(201,161,74,.55); --grid: rgba(201,161,74,.05); } /* ---------- reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ background: var(--ink); color: var(--paper); font-family: var(--font-sans); } body{ min-height: 100vh; background: linear-gradient(var(--ink), var(--ink-2)); font-size: 15px; line-height: 1.55; letter-spacing: .005em; color: var(--paper); } /* fixed atmosphere layer: radial glows + blueprint grid. CPU-friendly: no mask/filter/forced layer — edge fade is baked into an ink vignette gradient instead of an expensive mask-image */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; background-image: radial-gradient(1200px 700px at 20% -10%, rgba(212,162,76,.06), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(139,31,31,.05), transparent 60%), radial-gradient(ellipse 90% 85% at center, transparent 45%, var(--ink) 100%), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px; z-index: 0; } html[data-style="schema"] body::before{ background-image: radial-gradient(1200px 700px at 20% -10%, rgba(212,162,76,.06), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(139,31,31,.05), transparent 60%), radial-gradient(ellipse 90% 85% at center, transparent 45%, var(--ink) 100%), repeating-linear-gradient(45deg, var(--grid) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, var(--grid) 0 1px, transparent 1px 8px); background-size: 100% 100%, 100% 100%, 100% 100%, auto, auto; } /* ---------- typography ---------- */ h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; color: var(--paper); margin:0; letter-spacing:.01em; } h1{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; } h2{ font-size: 22px; line-height: 1.25; } h3{ font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); } h4{ font-size: 14px; text-transform: uppercase; letter-spacing: .18em; color: var(--gold-soft); font-weight:600;} p{ margin: 0 0 1em; color: var(--paper); } a{ color: var(--gold); text-decoration: none; } a:hover{ color: var(--paper); } small{ font-size: 12px; color: var(--paper-dim); } .mono{ font-family: var(--font-mono); } .label{ font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--gold-soft); } .hr-rule{ border:0; border-top:1px solid var(--rule); margin: 24px 0; } /* ---------- layout shell ---------- */ .shell{ position:relative; z-index:1; max-width: var(--maxw); margin:0 auto; padding: 0 var(--pad-page); } /* top bar */ .topbar{ position: sticky; top:0; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--rule); } .topbar-inner{ display:flex; align-items:center; gap: 28px; padding: 14px var(--pad-page); max-width: var(--maxw); margin: 0 auto; } .brand{ display:flex; align-items:center; gap: 12px; } .brand-mark{ width: 34px; height: 34px; background: url("logo-sm.png") center/contain no-repeat; } .brand-name{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); } nav.nav{ display:flex; gap: 4px; margin-left: auto; flex-wrap:wrap; } nav.nav a{ display:inline-flex; align-items:center; gap:8px; padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); border: 1px solid transparent; border-radius: 2px; transition: color .15s, border-color .15s, background .15s; } nav.nav a:hover{ color: var(--paper); border-color: var(--rule); } nav.nav a[aria-current="page"]{ color: var(--gold); border-color: var(--line-strong); background: rgba(212,162,76,.06); } /* page frame with corner brackets */ .frame{ position: relative; margin: 36px 0 80px; padding: 28px clamp(20px, 3vw, 44px); border: 1px solid var(--line); background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)); border-radius: 2px; } .frame::before, .frame::after, .frame > .br-tl, .frame > .br-tr, .frame > .br-bl, .frame > .br-br{ position:absolute; width: 14px; height: 14px; border-color: var(--gold); } .frame > .br-tl{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; } .frame > .br-tr{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; } .frame > .br-bl{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; } .frame > .br-br{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; } .frame > .br-tl, .frame > .br-tr, .frame > .br-bl, .frame > .br-br{ content:""; display:block; } /* page header */ .page-head{ display:flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; } .page-head .page-meta{ font-family: var(--font-mono); color: var(--paper-dim); font-size: 11px; letter-spacing:.2em; text-transform:uppercase;} .page-head h1{ display:flex; align-items: baseline; gap: 16px; } .page-head h1 .num{ color: var(--gold); font-family: var(--font-mono); font-size: .5em; letter-spacing:.2em; } /* breadcrumb chip */ .crumbs{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); } .crumbs a{ color: var(--paper-dim); } .crumbs a:hover{ color: var(--gold); } /* ---------- two-column rules layout ---------- */ .rules-grid{ display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; } @media (max-width: 900px){ .rules-grid{ grid-template-columns: 1fr; } .toc{ position: static !important; } } .toc{ position: sticky; top: 88px; border-left: 1px solid var(--line); padding: 8px 0 8px 16px; max-height: calc(100vh - 110px); overflow:auto; } .toc h4{ margin-bottom: 12px; } .toc ol{ list-style:none; padding:0; margin:0; counter-reset: toc; } .toc li{ counter-increment: toc; margin: 0; } .toc li > a{ display:flex; gap:10px; align-items:baseline; padding: 6px 0; font-size: 13px; color: var(--paper-dim); border-bottom: 1px dashed transparent; transition: color .15s; } .toc li > a::before{ content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; color: var(--gold-dim); flex: 0 0 auto; } .toc li > a:hover{ color: var(--paper); } .toc li > a.active{ color: var(--gold); } .toc ul{ list-style:none; padding: 4px 0 6px 22px; margin:0; } .toc ul li a{ font-size: 12px; padding: 3px 0; } .content{ min-width:0; } .content section{ scroll-margin-top: 80px; padding-bottom: 28px; } .content section + section{ border-top: 1px solid var(--rule); padding-top: 28px; } .content h2{ display:flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .content h2 .num{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .25em; color: var(--gold); padding: 4px 8px; border:1px solid var(--line); align-self:center; } .content h3{ margin: 22px 0 8px; } .content p{ max-width: 70ch; } .content ul{ padding-left: 20px; max-width: 72ch; } .content ul li{ margin: 4px 0; } .content ul li::marker{ color: var(--gold-soft); } /* callout block — schematic note */ .note{ margin: 18px 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-left: 2px solid var(--gold); background: rgba(212,162,76,.04); font-size: 13px; position: relative; } .note::before{ content: attr(data-tag); position:absolute; top:-9px; left:14px; background: var(--ink-2); padding: 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing:.22em; color: var(--gold); text-transform: uppercase; } .warn{ border-left-color: var(--crimson); } .warn::before{ color: var(--crimson); } /* schematic table */ table.schematic{ width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; margin: 14px 0; } table.schematic th, table.schematic td{ text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule); } table.schematic th{ font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; border-bottom: 1px solid var(--line-strong); } table.schematic tr:hover td{ background: rgba(212,162,76,.04); } /* ---------- tweaks panel ---------- */ .tweaks{ position: fixed; right: 18px; bottom: 18px; z-index: 100; width: 280px; background: rgba(20,15,8,.98); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 11px; color: var(--paper); display: none; } .tweaks.open{ display:block; } .tweaks .head{ display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; border-bottom: 1px solid var(--rule); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); } .tweaks .head button{ background: none; border:0; color: var(--paper-dim); cursor:pointer; font-family: inherit; font-size: 16px; line-height: 1; } .tweaks .body{ padding: 14px; display:flex; flex-direction: column; gap: 14px; } .tweaks label.tlabel{ display:block; color: var(--paper-dim); letter-spacing:.2em; text-transform: uppercase; margin-bottom: 8px; font-size: 10px; } .tweaks .seg{ display:flex; gap: 6px; } .tweaks .seg button{ flex:1; padding: 8px 10px; background: transparent; border:1px solid var(--rule); color: var(--paper-dim); font-family: inherit; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: all .15s; } .tweaks .seg button:hover{ color: var(--paper); border-color: var(--line); } .tweaks .seg button.on{ color: var(--ink); background: var(--gold); border-color: var(--gold); } /* ---------- footer ---------- */ .foot{ margin-top: 60px; padding: 24px var(--pad-page) 40px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; text-transform: uppercase; color: var(--paper-dim); display:flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* ---------- utility ---------- */ .row{ display:flex; gap: 16px; flex-wrap: wrap; } .col{ display:flex; flex-direction: column; gap: 16px; } .spread{ display:flex; justify-content:space-between; align-items: center; gap: 16px; } .tag{ display:inline-block; padding: 3px 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform:uppercase; border: 1px solid var(--line); color: var(--gold-soft); } .tag.crimson{ color: var(--crimson); border-color: rgba(139,31,31,.55); } /* ---------- bookshelf landing (index page) ---------- */ .shelf-stage{ position: relative; padding: 56px 0 24px; } .shelf-stage .quill-line{ text-align:center; color: var(--paper-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .35em; text-transform: uppercase; margin-bottom: 28px; } .shelf-stage .stage-title{ text-align:center; font-size: clamp(36px, 5vw, 64px); letter-spacing: .04em; margin-bottom: 8px; } .shelf-stage .stage-sub{ text-align:center; max-width: 600px; margin: 0 auto 40px; color: var(--paper-dim); } .shelf{ position: relative; display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); justify-content: center; gap: 14px; padding: 36px 24px 8px; margin: 0 auto; max-width: 880px; perspective: 1200px; } .shelf::after{ content:""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 14px; border-top: 1px solid var(--line-strong); background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 12px); } .shelf::before{ /* dimension annotation under the shelf */ content: "SHELF · 03 VOLUMES · INDEX A"; position: absolute; left:0; right:0; bottom: -22px; text-align:center; font-family: var(--font-mono); font-size: 10px; letter-spacing:.35em; color: var(--gold-dim); text-transform:uppercase; } .book{ position: relative; display:flex; flex-direction:column; height: 360px; padding: 22px 18px 18px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(20,15,8,.85), rgba(10,8,5,.95)); color: var(--paper); text-decoration: none; transform-origin: bottom center; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .35s; overflow: hidden; } .book::before{ content:""; position:absolute; inset: 6px; border: 1px dashed var(--line); pointer-events:none; } .book::after{ /* spine highlight — gilt edge on the left */ content:""; position:absolute; left:0; top:0; bottom:0; width: 4px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .55; } .book .b-num{ font-family: var(--font-mono); font-size:10px; letter-spacing:.3em; color: var(--gold-dim); } .book .b-title{ margin-top: 14px; font-size: 24px; line-height: 1.05; letter-spacing: .02em; color: var(--paper); text-transform: uppercase; } .book .b-sub{ margin-top: 6px; color: var(--gold); font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform:uppercase; } .book .b-glyph{ margin: 22px auto 18px; flex: 1 1 auto; display:flex; align-items:center; justify-content:center; } .book .b-glyph svg{ width: 90px; height: 90px; } .book .b-foot{ display:flex; justify-content:space-between; align-items:flex-end; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform:uppercase; color: var(--paper-dim); } .book .b-foot .arrow{ display:inline-block; padding: 4px 8px; border:1px solid var(--gold); color: var(--gold); } /* fan: tilt each book slightly */ .shelf .book:nth-child(1){ transform: rotate(-2.6deg) translateY(6px); } .shelf .book:nth-child(2){ transform: rotate(0deg) translateY(-4px); } .shelf .book:nth-child(3){ transform: rotate(2.6deg) translateY(6px); } .shelf .book:hover{ transform: rotate(0deg) translateY(-14px); border-color: var(--gold); box-shadow: 0 10px 20px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(212,162,76,.35) inset; } .shelf .book.crimson::after{ background: linear-gradient(180deg, transparent, var(--crimson), transparent); } .shelf .book.crimson .b-sub{ color: var(--crimson); } .shelf .book.crimson .b-foot .arrow{ border-color: var(--crimson); color: var(--crimson); } /* secondary chips below shelf */ .aux-shelf{ margin: 90px auto 0; max-width: 880px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .aux-tile{ display:flex; align-items:center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); background: rgba(0,0,0,.25); transition: border-color .15s, background .15s; } .aux-tile:hover{ border-color: var(--gold); background: rgba(212,162,76,.05); } .aux-tile .at-icon{ width: 28px; height: 28px; border:1px solid var(--gold-soft); display:grid; place-items:center; color: var(--gold); font-family: var(--font-mono); font-size: 11px; } .aux-tile .at-meta{ display:flex; flex-direction: column; gap: 2px; } .aux-tile .at-meta b{ color: var(--paper); font-weight: 600; letter-spacing: .04em; font-size: 13px; } .aux-tile .at-meta span{ color: var(--paper-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; } /* annotation marks (decorative) */ .annot{ position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim); pointer-events: none; } .annot::before{ content:""; display:inline-block; vertical-align: middle; width: 24px; height: 1px; background: var(--gold-dim); margin-right: 8px; } /* news / changelog cards */ .timeline{ display:flex; flex-direction:column; } .entry{ display: grid; grid-template-columns: 160px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .entry .when{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); } .entry h2{ font-size: 18px; } .entry .badges{ margin-top: 8px; display:flex; gap: 8px; flex-wrap:wrap; } /* paragraphs index */ .paras{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; } .para{ padding: 18px; border: 1px solid var(--line); background: rgba(0,0,0,.25); display:flex; flex-direction:column; gap: 8px; transition: border-color .15s, background .15s; position: relative; } .para:hover{ border-color: var(--gold); background: rgba(212,162,76,.04);} .para .pid{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.25em; color: var(--gold); } .para h3{ color: var(--paper); text-transform: none; letter-spacing: 0; font-size: 16px; } .para p{ color: var(--paper-dim); font-size: 13px; margin: 0; } .para .ptag{ position:absolute; top: 14px; right: 14px; } /* pager (prev/next on rule pages) */ .pager{ display:flex; gap: 14px; margin-top: 36px; } .pager a{ flex:1; padding: 14px 18px; border: 1px solid var(--line); display:flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; } .pager a:hover{ border-color: var(--gold); background: rgba(212,162,76,.04); } .pager a.next{ text-align:right; align-items: flex-end; } .pager a .dir{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-soft); } .pager a .ttl{ color: var(--paper); font-weight: 600; } /* progress bar at top of rule pages */ .read-prog{ position: sticky; top: 64px; z-index: 5; height: 2px; background: transparent; margin: 0 calc(-1 * var(--pad-page)); } .read-prog > div{ height: 100%; width: 0; background: var(--gold); transition: width .1s linear; } /* selection */ ::selection{ background: rgba(212,162,76,.35); color: var(--paper); } /* scrollbar */ ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-thumb{ background: rgba(212,162,76,.25); border-radius: 0;} ::-webkit-scrollbar-thumb:hover{ background: rgba(212,162,76,.45); } ::-webkit-scrollbar-track{ background: transparent; } /* topbar tweaks toggle button */ .tweaks-btn{ margin-left: 8px; background: none; border: 1px solid transparent; color: var(--gold-dim); padding: 8px 12px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; cursor: pointer; transition: color .15s, border-color .15s, background .15s; border-radius: 2px; flex-shrink: 0; line-height: 1; } .tweaks-btn:hover{ color: var(--gold); border-color: var(--rule); } .tweaks-btn.active{ color: var(--gold); border-color: var(--line-strong); background: rgba(212,162,76,.06); }