/* ============================================================ MUDLARK MEDIA — shared site stylesheet Linked by all pages except home.html (self-contained) and mindmap.html (separate app). Palette and font vars can be overridden by the user's saved theme (home editor → localStorage). ============================================================ */ /* ── FONTS ── */ @font-face { font-family: 'Michroma'; src: url('Style Guide/Fonts/Michroma/Michroma-Regular.ttf') format('truetype'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('Style Guide/Fonts/Public_Sans/static/PublicSans-Regular.ttf') format('truetype'); font-weight: 100 1000; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('Style Guide/Fonts/Public_Sans/static/PublicSans-Italic.ttf') format('truetype'); font-weight: 100 1000; font-style: italic; font-display: swap; } @font-face { font-family: 'Orbitron'; src: url('Style Guide/Fonts/Orbitron/static/Orbitron-Regular.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Azeret Mono'; src: url('Style Guide/Fonts/Azeret_Mono/static/AzeretMono-Regular.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; } /* ── DESIGN TOKENS ── */ :root { /* Palette defaults — match home.html. Overridden live by localStorage when the user has customised the theme via the home page editor. */ --c-1: #c0835e; --c-2: #9e5c34; --c-3: #8d6e5b; --c-4: #d2b3a1; --c-5: #875a3f; --c-6: #74665e; --c-7: #211d1b; --c-8: #4d4540; --c-9: #ece5d2; --c-10: #9c9583; /* Semantic aliases */ --bg: var(--c-7); --bg-surf: var(--c-8); --bg-up: color-mix(in srgb, var(--c-7) 88%, var(--c-9) 12%); --rule: color-mix(in srgb, var(--c-7) 88%, var(--c-9) 12%); --rule-on: color-mix(in srgb, var(--c-7) 78%, var(--c-9) 22%); --ink: var(--c-9); --ink-soft: var(--c-10); --ink-mute: color-mix(in srgb, var(--c-7) 40%, var(--c-10) 60%); --gold: var(--c-1); --rust: var(--c-2); --teal: var(--c-3); --blue: var(--c-4); --pink: var(--c-5); --green: var(--c-6); /* Per-page accent color — overridden inline on each page's element. Default is rust so pages without an explicit accent still look sensible. */ --accent: var(--c-2); /* Font stacks — overridden by localStorage when user has changed fonts */ --serif-d: 'Michroma', 'Georgia', serif; --serif-b: 'Public Sans', 'Georgia', serif; --sans: 'Orbitron', system-ui, sans-serif; --mono: 'Azeret Mono', ui-monospace, monospace; /* Layout */ --pad-x: clamp(20px, 4vw, 56px); --max-w: 1360px; /* Background pattern defaults — match home.html */ --bg-pattern-color: var(--c-2); --bg-pattern-alpha: 0.11; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: var(--serif-b); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--bg); } /* ── BACKGROUND PATTERN ── */ .bg-pattern { position: fixed; inset: 0; z-index: 0; pointer-events: none; color: var(--bg-pattern-color); opacity: var(--bg-pattern-alpha); } body > * { position: relative; z-index: 1; } body > .bg-pattern { z-index: 0; } /* ── MASTHEAD ── */ .masthead-row { padding: 36px var(--pad-x); text-align: center; } .brand { display: inline-flex; align-items: center; gap: 16px; color: var(--ink); line-height: 1; } .brand-name { font-family: var(--serif-d); font-weight: 500; font-size: clamp(41px, 5.95vw, 75px); letter-spacing: -0.022em; line-height: 0.95; } /* ── PRIMARY NAV ── */ .nav { padding: 18px var(--pad-x); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 30px; font-family: var(--sans); font-size: 14.5px; } .nav a { display: inline-flex; align-items: baseline; gap: 9px; padding: 6px 0; transition: color 0.15s; } .nav a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--accent); } .nav a:hover::before { transform: translateY(-2px) scale(1.4); box-shadow: 0 0 12px var(--accent); } /* ── LAYOUT ── */ main { flex: 1; padding: 0 var(--pad-x) 96px; } .wrap { max-width: var(--max-w); margin: 0 auto; } /* ── FOOTER (simple two-column strip) ── */ footer { border-top: 1px solid var(--rule); padding: 40px var(--pad-x); margin-top: auto; } .foot-inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .foot-brand { font-family: var(--sans); font-size: 16px; letter-spacing: -0.01em; } .foot-brand .brand { gap: 0; } .foot-brand .brand-name { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.018em; font-family: var(--sans); } .foot-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } /* ── PAGE HEAD (articles-style titled section header) ── */ .page-head { padding: 33px 0 37px; border-bottom: 1px solid var(--rule); } .page-head-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.5vw, 26px); } .ph-rule { position: relative; flex: 0 0 auto; width: clamp(22px, 7vw, 80px); height: 1px; background: var(--rule); } .ph-rule::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } .ph-rule.l::after { right: -2px; } .ph-rule.r::after { left: -2px; } .page-h1 { font-family: var(--serif-d); font-weight: 500; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: 0.08em; word-spacing: -0.12em; text-indent: 0.08em; line-height: 1.1; text-transform: uppercase; white-space: nowrap; text-align: center; color: var(--ink); } .page-h1 em { font-style: italic; color: var(--accent); } /* ── UNDER-CONSTRUCTION / PRE-LAUNCH SECTION ── */ .uc { display: flex; flex-direction: column; align-items: flex-start; padding: 96px 0; border-bottom: 1px solid var(--rule); } .uc-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; } .uc-head { font-family: var(--serif-d); font-weight: 500; font-size: clamp(36px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.022em; margin-bottom: 24px; max-width: 18ch; } .uc-head em { font-style: italic; color: var(--accent); } .uc-deck { font-family: var(--serif-b); font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; margin-bottom: 28px; } .uc-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 32px; } .uc-meta b { color: var(--ink-soft); font-weight: 400; } .uc-list { list-style: none; margin: 0 0 32px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); } .uc-list li { display: flex; gap: 14px; align-items: baseline; } .uc-list .marker { color: var(--accent); font-weight: 700; } .uc-list a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 0.15s, border-color 0.15s; } .uc-list a:hover { color: var(--accent); border-bottom-color: var(--accent); } .uc-back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; padding: 12px 22px; background: var(--accent); color: var(--bg); transition: background 0.15s, color 0.15s; } .uc-back:hover { background: var(--ink); color: var(--bg); } /* ── RESPONSIVE ── */ @media (max-width: 640px) { .nav { gap: 4px 22px; font-size: 13.5px; } } @media (max-width: 560px) { .ph-rule { display: none; } .page-h1 { white-space: normal; letter-spacing: 0.05em; word-spacing: normal; } }