/* v2025-10-05 — esmgm about page styles */ :root{ --bg: #0f0f12; --text: #e8e8ea; --muted: #b0b3b8; --accent: #d3a85a; /* Pathfinder-esque gold */ --accent-2: #6e1e22; /* deep red */ --card: #17171b; --border: #2a2a2f; --maxw: 920px; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35); } /* Pro GM palette (light) toggled via .theme-pro on */ body.theme-pro{ --bg: #f8f7f4; --text: #202024; --muted: #595b60; --card: #ffffff; --border: #e8e6e0; --accent: #1f5b98; /* confident blue */ --accent-2: #0f3a62; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; display:flex; flex-direction:column; } .header{ background: linear-gradient(135deg, var(--accent-2), var(--accent)); color:white; padding: 56px 24px; } .header .inner{max-width:var(--maxw); margin:0 auto; display:flex; gap:24px; align-items:center} .brand{ width:84px;height:84px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);flex:0 0 auto;border:2px solid rgba(255,255,255,.25); } .brand img{width:100%;height:100%;display:block} .title-block h1{margin:0;font-size: clamp(28px, 4vw, 44px)} .title-block p{margin:6px 0 0;opacity:.9} .container{max-width:var(--maxw); margin: 24px auto; padding: 0 24px 48px} .toolbar{ display:flex; gap:12px; flex-wrap:wrap; margin: -28px 24px 24px; justify-content:flex-end; } .toolbar a, .toolbar button{ background:var(--card); border:1px solid var(--border); color:var(--text); padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none; } .toolbar button:hover, .toolbar a:hover{border-color: var(--accent)} .grid{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:880px){ .grid{grid-template-columns: 1fr 1fr} } .card{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:20px; box-shadow:var(--shadow); } .card h2{margin-top:0; font-size: 22px} .badge{ display:inline-block; border:1px solid var(--border); padding:4px 8px; border-radius:999px; margin:0 8px 8px 0; font-size:12px; color:var(--muted); background:rgba(255,255,255,.02); } .hero{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); } .hero img{display:block; width:100%; height:auto} blockquote{ margin:12px 0; padding:12px 14px; border-left:4px solid var(--accent); background:rgba(0,0,0,.04); border-radius:8px; } small.muted{color:var(--muted)} .footer{color:var(--muted); text-align:center; padding:24px 16px; border-top:1px dashed var(--border)} .code{font-family: ui-monospace,SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background:rgba(127,127,127,.08); padding:2px 6px; border-radius:6px; border:1px solid var(--border);} /* LibraryThing embed card */ .embed-card .embed-wrap{ position: relative; border:1px solid var(--border); border-radius: var(--radius); padding:16px; background: rgba(0,0,0,.03); overflow:auto; } .embed-card .embed-wrap > div{ /* LibraryThing injects dynamic content into this div; allow it to expand */ } /* center the main container and cards */ .container { max-width: 1100px; margin: 0 auto; padding: 24px; } .card { width: 100%; } /* Two-column: LibraryThing left, content right */ .layout-2col { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; } .left-col { position: sticky; top: 16px; } @media (max-width: 900px) { .layout-2col { grid-template-columns: 1fr; } .left-col { position: static; } } .embed-card .embed-wrap { min-height: 300px; } /* v2025-10-07 — Canonical header, QR, tooltips removed; Appendix N (iframe) */ /* Header contrast still uses the lighter --muted in the hero area */ .header { --muted:#d1dae4; } /* === HEADER LAYOUT ======================================================= */ /* Grid: [left cluster] [spacer auto] [actions] */ .header .inner{ max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; /* left cluster + actions */ align-items: center; gap: 16px; } /* Left cluster (brand + titles) */ .left-head{ display:flex; align-items:center; gap:14px; } /* Brand tile image fills its box */ .brand-tile{ width:72px; height:72px; border-radius:14px; overflow:hidden; display:block; border:2px solid rgba(255,255,255,.25); box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15); } .brand-tile img{ width:100%; height:100%; object-fit:cover; display:block; } /* Small caps helper */ .sc{ font-variant-caps: small-caps; letter-spacing:.04em; } /* Titles */ .site-title{ margin:0; font-weight:800; letter-spacing:.2px; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.05; color:#fff; white-space: nowrap; /* tight on desktop */ } .site-subtitle{ margin:6px 0 0; font-weight:800; line-height:1.15; font-size: clamp(18px, 3.2vw, 24px); color:#fff; } /* Status pill variants preserved */ .status-pill{ display:inline-block; margin-top:10px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.95rem; line-height:1; color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:var(--shadow); } .status-pill.open{ background:linear-gradient(135deg,#1f7a3a,#28a745); } .status-pill.waitlist{ background:linear-gradient(135deg,#8a5a12,#c48a2c); } .status-pill.soldout{ background:linear-gradient(135deg,#6e1e22,#b83a3f); } .status-pill.paused{ background:linear-gradient(135deg,#4b4f57,#6b7079); } /* RIGHT: actions = button stacked above QR */ .header .actions{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; } /* Buttons always look like buttons even as links */ .btn, .btn:link, .btn:visited{ display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); font-weight:600; line-height:1.1; text-decoration:none; } .btn:hover{ border-color:var(--accent); text-decoration:none; } .header .btn-cta{ background:linear-gradient(to bottom,#ffffff,#eaeaea); color:#121212 !important; border-color:#d7d7db; box-shadow:0 10px 20px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.06); transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease; } .header .btn-cta:hover{ transform: translateY(-1px); } /* QR tile + caption (no tooltips) */ .qr-stack{ display:flex; flex-direction:column; align-items:center; gap:6px; } .qr-mini{ width:108px; height:108px; border-radius:12px; background:#fff; border:1px solid var(--border); padding:8px; box-shadow:0 12px 24px rgba(0,0,0,.18); } .qr-mini img{ width:100%; height:100%; display:block; } .qr-hint{ font-size:.85rem; color:var(--muted); } /* Nuke any tooltip system that might sneak in */ .has-tip::before, .has-tip::after{ display:none !important; } .qr-stack [title], .qr-stack [data-tip]{ pointer-events:none; } /* === MOBILE (<= 820px) — Stack & scale down ============================= */ @media (max-width: 820px){ .header .inner{ grid-template-columns: 1fr; /* stack left + right */ gap: 14px; text-align:center; } .left-head{ justify-content:center; } .header .actions{ align-items:center; } .brand-tile{ width:64px; height:64px; } .site-title{ font-size: clamp(22px, 7vw, 32px); line-height: 1.1; white-space: normal; /* allow wrap */ } .site-subtitle{ font-size: clamp(14px, 4vw, 18px); } .status-pill{ margin: 6px auto 0; } .qr-mini{ width:96px; height:96px; } } /* === APPENDIX N (iframe approach) ======================================= */ #appendix-n .embed-wrap{ display:block; margin:12px auto 0; width:max-content; /* shrink to widget width on desktop */ max-width:100%; /* never overflow on phones */ padding:10px 12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); min-height:0 !important; overflow:visible; } #appendix-n .lt-embed{ display:block; width:100%; height:620px; /* adjust 600–700 if needed */ border:0; background:#fff; } @media (max-width:700px){ #appendix-n .embed-wrap{ width:100%; } #appendix-n .lt-embed{ width:100% !important; } } /* === Header alignment fixes (authoritative) === */ /* 1) Make both columns align from the same top */ .header .inner{ align-items: flex-start !important; /* right column won’t float high */ gap: 20px; } /* 2) Left cluster: brand aligns with title top */ .left-head{ align-items: flex-start !important; gap: 16px; } .brand-tile{ width: 80px; /* slightly larger so it doesn’t feel tiny */ height: 80px; margin-top: .15em; /* nudge to match cap-height of H1 */ } /* 3) Right cluster: center the button & QR with each other */ .actions{ display: grid !important; /* nice, simple centering */ grid-auto-flow: row; justify-items: center; /* button & QR centered together */ align-self: flex-start; /* align to top of header row */ gap: 10px; } .actions .btn-cta{ margin: 0; } /* remove any stray margins */ .qr-stack{ display: grid; justify-items: center; gap: 6px; } /* keep QR tile size you like; if you want it a tad bigger, uncomment: .qr-mini{ width: 120px; height: 120px; } */ /* 4) Mobile — keep it centered, not cramped */ @media (max-width: 820px){ .header .inner{ align-items: center !important; } .left-head{ align-items: center !important; } .brand-tile{ margin-top: 0; } .actions{ align-self: center; } } /* === Canonical brand icon — no outline/ring (wins over earlier rules) === */ .brand, .brand-tile { /* sizing stays as you’ve set elsewhere – only kill the “ring” */ border: none !important; box-shadow: none !important; background: transparent !important; } /* ensure the image fills the tile cleanly */ .brand img, .brand-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; /* keeps the rounded corners without a border */ } /* === Canonical brand icon — no outline/ring (wins over earlier rules) === */ .brand, .brand-tile { /* sizing stays as you’ve set elsewhere – only kill the “ring” */ border: none !important; box-shadow: none !important; /* subtle drop only */ background: transparent !important; } /* ensure the image fills the tile cleanly */ .brand img, .brand-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; /* keeps the rounded corners without a border */ } /* === Mobile portrait balance: center CTA+QR under the text, not brand+text === */ @media (max-width: 640px){ /* stack everything in one column, centered */ .header .inner{ display: flex !important; flex-direction: column; align-items: center; /* common vertical axis */ gap: 14px; } /* put the brand above the text so it doesn't shift the visual center left */ .left-head{ display: flex !important; flex-direction: column; align-items: center; /* brand + titles share the same center line */ gap: 10px; } /* small, tidy brand tile that won't dominate */ .brand-tile{ width: 64px; height: 64px; margin: 0; /* no lateral bias */ } /* make the text block the anchor */ .title-block{ text-align: center; } /* center the button + QR under the title block */ .actions{ align-self: center !important; display: grid !important; grid-auto-flow: row; justify-items: center; /* button and QR centered with each other */ gap: 10px; } } /* === Applications Section (2025-10-12) === */ .applications{ background: var(--panel); border-block: 1px solid var(--edge); } .applications .inner{ max-width: var(--wrap, 1100px); margin: 0 auto; padding: clamp(16px,2vw,24px); } .applications h2{ margin: 0 0 12px; font-size: clamp(20px,2.6vw,28px); letter-spacing:.02em; } .apps-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px,2vw,20px); } .app-card{ background: var(--card); border: 1px solid var(--edge); border-radius: 14px; padding: clamp(14px,2.2vw,18px); box-shadow: var(--shadow-1); display:flex; flex-direction:column; align-items:center; text-align:center; } .app-card h3{ margin: 0 0 6px; font-size: clamp(18px,2.2vw,22px); } .app-card .status-pill{ margin: 4px 0 10px; } .qr-large{ width:min(260px, 60vw); aspect-ratio:1/1; display:grid; place-items:center; margin: 10px auto 14px; background: #fff; border-radius: 8px; padding: 10px; border:1px solid var(--edge); } .qr-large img{ width:100%; height:auto; display:block; image-rendering: pixelated; } @media (max-width: 720px){ .apps-grid{ grid-template-columns: 1fr; } } /* v2 tweaks (2025-10-12) */ .applications h2{ text-align:center; } /* Make the group boxes smaller and centered */ .apps-grid{ display:flex; flex-wrap:wrap; gap: clamp(12px,2vw,20px); justify-content:center; } .app-card{ width: min(300px, 92vw); } .qr-large{ width: min(220px, 70vw); padding: 8px; }