/* ─────────────────────────────────────────────── BASE SETTINGS ─────────────────────────────────────────────── */ html { font-size: 16px; } body { margin: 0; font-size: 1rem; font-family: 'IBM Plex Serif', Georgia, serif; background-color: #1b1a17; color: #f4f1e8; line-height: 1.6; } a { color: #ffecc7; text-decoration: none; transition: color .3s ease; } a:hover { color: #ffffff; } .center-text { text-align: center; } .small { font-size: .92rem; } .muted { opacity: .85; } /* Page layout (sticky footer) — ensure and main uses .scroll-container */ .page { min-height: 100vh; display: flex; flex-direction: column; } .scroll-container { flex: 1; } /* ─────────────────────────────────────────────── ANIMATION ─────────────────────────────────────────────── */ .fade-in { animation: fadeIn 1.2s ease-in-out both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ─────────────────────────────────────────────── CONTAINERS ─────────────────────────────────────────────── */ .scroll-container { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 3.5rem; /* room above footer */ } .scroll-container h1 { text-align: center; color: #ffecc7; } /* Move the tagline style to page header only (so stays inline elsewhere) */ .page-header em { display: block; text-align: center; font-size: 1.05rem; color: #c9c3b3; margin-bottom: 2rem; } /* Cards (home.php sections & general) */ .card { background:#231f19; border:1px solid #444; border-radius:14px; padding:1.1rem 1.2rem; margin:1rem 0; } /* Generic boxes used across pages */ .content-box, .codex-box, .seal-box { background: rgba(255,255,255,0.05); border: 1px solid #3c3c3c; border-radius: 8px; padding: 1.5rem; margin: 2rem 0; transition: transform 0.2s ease; } .content-box:hover, .codex-box:hover, .seal-box:hover { transform: scale(1.01); box-shadow: 0 0 8px rgba(255, 255, 200, 0.1); } .codex-box h3 { margin-top: 0; color: #ffecc7; } .codex-box p { font-size: 0.95rem; } /* Narrow page header (matches .scroll-container width) */ .page-header { max-width: 900px; /* or match your .scroll-container max-width */ margin: 0 auto; padding: 1.25rem 1rem 0; text-align: center; } /* Legacy layout helpers (used by older pages) */ .row { display: flex; gap: .8rem; flex-wrap: wrap; } .grow { flex: 1 1 320px; } /* ─────────────────────────────────────────────── Edition Note on Home Page ─────────────────────────────────────────────── */ .edition-note { margin: 1.25rem auto; max-width: 46rem; border: 1px solid rgba(209,180,100,.35); border-radius: 12px; padding: 0.9rem 1rem; background: rgba(0,0,0,.30); color: #e7e1d7; text-align: center; font-family: Georgia, serif; font-size: 1rem; line-height: 1.55; } @media (max-width: 560px) { .edition-note { padding: 0.8rem 0.85rem; font-size: 0.95rem; line-height: 1.5; } .edition-note br { display:none; } /* reduce forced line breaks on mobile */ } /* ─────────────────────────────────────────────── About Page On Hone.php ─────────────────────────────────────────────── */ .on-this-page { display:flex; flex-wrap:wrap; gap:.5rem .75rem; justify-content:center; margin: .6rem auto 1rem; max-width: 760px; font-size:.95rem; } .on-this-page a { color:#fceacb; text-decoration:none; border-bottom:1px dotted rgba(252,234,187,.5); } .on-this-page a:hover { text-decoration:underline; } .manifesto { text-align:center; } .manifesto h2 { margin: .2rem 0 .4rem; color:#fceabb; } .manifesto p { margin:.35rem 0; } /* ─────────────────────────────────────────────── FOOTER (ORB VERSION) ─────────────────────────────────────────────── */ .footer-core { text-align: center; margin: 2rem 0 1.2rem; } .footer-orb { display:inline-block; background-color: rgba(255,255,255,.06); border-radius: 999px; padding:.5rem 1rem; margin:.3rem; font-size:.9rem; color:#ccc; transition: background-color .3s ease; } .footer-orb:hover { background-color: rgba(255,255,255,.15); color:#fff; } @media (max-width: 768px) { .footer-orb { font-size:.85rem; padding:.4rem .8rem; } } /* ─────────────────────────────────────────────── HERO / GATEWAY (page-wide background option) Use on any page by adding: body.has-page-hero { --page-hero: url("..."); } ─────────────────────────────────────────────── */ .has-page-hero { background-color:#1d1b16; position: relative; } .has-page-hero::before { content: ""; position: fixed; /* “stays put” while content scrolls */ top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--page-hero, none); background-position: center; background-size: cover; background-repeat: no-repeat; } /* Transparent header band so the page hero shows through */ #gateway-arch { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 40vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem 1rem; } .gateway-content { max-width: 720px; /* Fallback without blur (validator-friendly) */ background: rgba(0,0,0,0.65); padding: 2rem 1.2rem; border-radius: 10px; } /* Progressive enhancement: enable blur where supported */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .gateway-content { background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } } .gateway-content h1 { font-size: 2rem; margin: .6rem 0 .2rem; color:#fceabb; } .gateway-content .lead { font-size: 1.05rem; opacity:.9; font-style: italic; } /* Seal/logo in hero & header glyphs */ .seal { max-width: 120px; margin: 0 auto .6rem; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,.55)); } .codex-glyph{width:86px;height:auto;opacity:.95;margin-bottom:.35rem} /* ─────────────────────────────────────────────── ORB + CONSTELLATION (home, utilities) ─────────────────────────────────────────────── */ .constellation { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 0 auto; max-width: 900px; padding: 1.2rem; background-color: rgba(30,28,25,.55); border-radius: 12px; border: 1px solid rgba(220,210,192,.35); } .codex-orb { background-color: rgba(255,255,255,.07); border-radius: 50%; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem; color: #fceacb; font-size: 1rem; transition: all .3s ease; box-shadow: 0 0 8px rgba(255,255,255,.05); } .codex-orb:hover { background-color: rgba(255,255,255,.15); transform: scale(1.05); box-shadow: 0 0 12px rgba(255,255,255,.2); } .codex-orb span { font-size: 2rem; margin-bottom: .3rem; } .codex-orb small { font-size: .75rem; color: #d9c8aa; text-align: center; } @media (max-width: 600px) { .codex-orb { width: 90px; height: 90px; font-size: .85rem; } .codex-orb span { font-size: 1.5rem; } } /* ─────────────────────────────────────────────── ABOUT PAGE hooks (new, with legacy aliases) ─────────────────────────────────────────────── */ .founder-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; background-color: rgba(255,255,255,0.02); border-left: 4px solid #777; } /* Legacy alias: .founder -> .founder-card */ .founder { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; border-left: 4px solid #777; } .founder-portrait { flex: 0 0 120px; max-width: 120px; } .founder-portrait img { width: 100%; height: auto; border-radius: 50%; opacity: 0.9; display: block; border:1px solid #3a342d; background:#2b2620; } /* Legacy alias: .founder .portrait -> .founder-portrait */ .founder .portrait { flex: 0 0 120px; max-width: 120px; } .founder .portrait img { width: 100%; height: auto; border-radius: 50%; opacity: .95; border:1px solid #3a342d; background:#2b2620; } .founder-bio { flex: 1 1 260px; min-width: 260px; } /* Legacy alias: .founder .bio -> .founder-bio */ .founder .bio { flex: 1 1 260px; min-width: 260px; } /* Pillar list */ .pillar-list { list-style: none; padding-left: 0; margin: 0; } .pillar-list li { margin: 1rem 0; } .about-container { max-width: 980px; margin: 0 auto; } /* ─────────────────────────────────────────────── ACCORDIONS (legacy & new) Use:
or
─────────────────────────────────────────────── */ details.acdn, details.accordion { border:1px solid #3a342d; border-radius:12px; margin:.8rem 0; background:#1f1b16; } details.acdn[open], details.accordion[open] { background:#221e19; } details.acdn > summary, details.accordion > summary { cursor:pointer; list-style:none; padding:.75rem 1rem; border-radius:12px; font-weight:700; display:flex; align-items:center; gap:.6rem; } details.acdn > summary::before, details.accordion > summary::before { content:'▸'; display:inline-block; transform:translateY(-1px); font-size:1.2rem; line-height:1; opacity:.9; /* larger twisty */ } details.acdn[open] > summary::before, details.accordion[open] > summary::before { content:'▾'; } details.acdn .content, details.accordion .content { padding:.2rem 1rem 1rem 1rem } .acdn summary { cursor: pointer; } .acdn summary:focus-visible { outline: 2px solid #fceabb; outline-offset: 3px; border-radius: 6px; } /* ─────────────────────────────────────────────── FORMS / TABLES / MEDIA (legacy compat) ─────────────────────────────────────────────── */ input, textarea { width: 100%; padding: .6rem; margin-top: .5rem; border:1px solid #6a5b46; border-radius:8px; background:#2e2b26; color:#f7f4e9; font-family: 'IBM Plex Serif', Georgia, serif; } .table { width:100%; border-collapse:collapse; } .table th, .table td { border-bottom:1px solid #3a342d; padding:.5rem .4rem; vertical-align:top; } .table th { color:#fceabb; text-align:left; } /* Buttons (legacy look) */ .btn { cursor:pointer; background:#524632; color:#fceabb; border:none; padding:.55rem 1rem; border-radius:999px; text-decoration:none; display:inline-block; } .btn:hover { opacity:.92; } .btn-ghost { background:transparent; border:1px solid #6a5b46; color:#fceabb; } /* Herb/thumb images */ img.herb-thumb { width:140px; height:140px; object-fit:cover; border-radius:12px; border:1px solid #3a342d; background:#2b2620; } /* ─────────────────────────────────────────────── The Eight Pillars Domains (brand-consistent) ─────────────────────────────────────────────── */ .pillar-head h1 { margin:.2rem 0 .3rem; color:#fceabb; } .grip-status { margin:.3rem 0 1rem; color:#e7e1d7; } .module { margin:1.1rem 0; } .module > h2 { color:#fceabb; border-bottom:1px solid rgba(209,180,100,.3); padding-bottom:.25rem; } .card { margin:.8rem 0; padding:1rem; border:1px solid rgba(209,180,100,.35); border-radius:12px; background:rgba(0,0,0,.30); } .card header { display:flex; justify-content:space-between; align-items:center; gap:.6rem; } .card h3 { margin:0; color:#fceabb; } .card .mark { border:1px solid #c7a85a; background:rgba(0,0,0,.5); color:#fceabb; border-radius:999px; padding:.35rem .7rem; cursor:pointer; } .card.completed { outline:2px solid #7fbf7f; } .card.completed .mark { border-color:#7fbf7f; color:#d9f3d9; } .purpose { color:#e7e1d7; } .questions { margin:.5rem 0; padding-left:1.1rem; } .tiny { color:#bdb3a3; } .askway { margin-top:.6rem; } .askway-title { margin:.1rem 0; color:#fceabb; } .askway-out { width:100%; padding:.6rem .7rem; border-radius:10px; border:1px solid #5c5345; background:rgba(0,0,0,.42); color:#fcf9f2; font:inherit; } .askway-actions { display:flex; gap:.5rem; align-items:center; margin-top:.4rem; } .askway-btn { padding:.45rem .8rem; border-radius:10px; cursor:pointer; border:1px solid #c7a85a; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6)); color:#fceabb; } .askway-status { color:#bdb3a3; } /* Level header polish */ .module > h2 { margin: .2rem 0 .15rem; } .module > p.muted { margin: 0 0 .5rem; opacity: .9; } /* Accordion spacing for topics / prompts */ details.acdn > summary { cursor: pointer; margin: .25rem 0; } details.acdn .questions { margin:.35rem 0 .2rem; padding-left:1.1rem; } .askway-block textarea { width:100%; border-radius:10px; border:1px solid #5c5345; background:rgba(0,0,0,.42); color:#fcf9f2; padding:.6rem .7rem; } /* AskWay mode selector */ .askway-mode { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.5rem 0 .75rem; } .askway-mode label { font-weight:600; } .askway-select { border:1px solid #5c5345; background:rgba(0,0,0,.42); color:#fcf9f2; border-radius:10px; padding:.4rem .6rem; font:inherit; } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_jumbledwords.php ─────────────────────────────────────────────── */ .jumble-box { background: rgba(38, 35, 30, 0.6); border: 1px solid #444; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; } .jumble-box h3 { margin-top: 0; color: #ffecc7; } .jumble-box p { margin: 0.6rem 0; } .example { font-style: italic; color: #bbb; margin-top: 0.3rem; } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_mirror_glyph.php ─────────────────────────────────────────────── */ .glyph-row { display: flex; justify-content: center; gap: 1.5rem; font-size: 2.5rem; margin-top: 2rem; flex-wrap: wrap; } .glyph-choice { cursor: pointer; padding: 0.6rem 1rem; border: 2px solid transparent; border-radius: 8px; transition: 0.3s ease; font-size: 2.2rem; background-color: rgba(255, 255, 255, 0.04); } .glyph-choice:hover { border-color: #ffecc7; background-color: rgba(255, 255, 200, 0.1); } .mirror-output { margin-top: 2rem; font-size: 1.1rem; text-align: center; padding: 1rem; color: #ccc; border-top: 1px dashed #888; } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_mirror_test.php ─────────────────────────────────────────────── */ .glyph-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 2.5rem; font-size: 2.5rem; } .glyph-option { padding: 1rem 1.2rem; cursor: pointer; background-color: rgba(255, 255, 255, 0.05); border-radius: 12px; transition: all 0.3s ease; border: 2px solid transparent; font-size: 2.3rem; } .glyph-option:hover { border-color: #fff0c2; background-color: rgba(255, 255, 255, 0.1); } .result-message { margin-top: 2rem; text-align: center; font-size: 1.1rem; color: #ccc; } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_neural_massage1.php ─────────────────────────────────────────────── */ /* Page-local, gentle typography to “slow” the read */ .massage-box { font-size: 1.08rem; line-height: 1.9; letter-spacing: .12px; background: rgba(255,255,255,.05); border: 1px solid #3c3c3c; border-radius: 10px; padding: 1.4rem 1.2rem; margin: 1.2rem 0 2rem; } .massage-box em { color: #d9c8aa; display:block; margin-bottom: .8rem; } .massage-box ul { margin: .6rem 0 .6rem 1.2rem; } .massage-box li { margin: .4rem 0; } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_neural_massage2.php ─────────────────────────────────────────────── */ .massage-box2 { background: rgba(38, 35, 30, 0.6); border: 1px solid #444; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; text-align: center; } .massage-box2 p { margin-top: 0.5rem; line-height: 1.8; } .pause { display: inline-block; width: 12px; height: 12px; background-color: #fff4cc; border-radius: 50%; margin: 0 4px; animation: pulse 1.4s infinite ease-in-out alternate; } @keyframes pulse { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } /* ─────────────────────────────────────────────── codex_curiositas/curiosities_puzzles.php ─────────────────────────────────────────────── */ .hidden-answer { display: none; font-size: 0.9rem; color: #ccc; margin-top: 0.5rem; } button { background-color: rgba(255, 255, 255, 0.1); border: 1px solid #888; color: #eee; padding: 0.4rem 1rem; border-radius: 5px; cursor: pointer; font-size: 1rem; margin-bottom: 0.5rem; } button:hover { background-color: rgba(255, 255, 255, 0.2); } /* ─────────────────────────────────────────────── codex_runarum/codex_runarum.php ─────────────────────────────────────────────── */ /*-- Flip animation + mirror styles (scoped-ish) --*/ .mirror-card { text-align:center; } .reveal-btn { display:inline-block; padding:.8rem 1.2rem; border-radius:999px; border:1px solid #6a5f4c; background:#524632; color:#fceabb; cursor:pointer; transition: transform .08s ease-in-out; } .reveal-btn:active { transform: scale(.98); } .flip-stage { perspective: 900px; width:100%; display:flex; justify-content:center; } .rune-glyph { font-size:4rem; line-height:1; margin:.25rem auto .75rem; user-select:none; display:inline-block; transform-style:preserve-3d; } .rune-glyph.flip { animation: coinflip .45s ease-in-out both; } @keyframes coinflip { 0% { transform: rotateY(0deg) scale(1); filter:brightness(1); } 50% { transform: rotateY(90deg) scale(0.98); filter:brightness(1.15); } 100% { transform: rotateY(180deg) scale(1); filter:brightness(1); } } .mirror-meta { opacity:.85; font-size:.95rem; } .save-box { margin-top:1rem; text-align:left; } .save-box textarea { width:100%; min-height:88px; resize:vertical; background:#15130f; color:#f7f4e9; border:1px solid #555; border-radius:10px; padding:.6rem; font-family:Georgia,serif; } .save-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:.6rem; } .save-row .btn { cursor:pointer; background:#524632; color:#fceabb; border:1px solid #6a5f4c; padding:.55rem .9rem; border-radius:999px; white-space:nowrap; } .btn.btn-ghost { background:transparent; } .toast { position:fixed; left:50%; transform:translateX(-50%); bottom:1.2rem; background:#2c2520; color:#f7f4e9; border:1px solid #5a5146; padding:.55rem .8rem; border-radius:9px; display:none; z-index:9999; } @media (max-width:640px){ .rune-glyph{ font-size:3.25rem; } .save-row .btn{ width:100%; text-align:center; } } /* ─────────────────────────────────────────────── /codex_legatum/codex_legatum.php ─────────────────────────────────────────────── */ /* Codex Legatum – make legacy action buttons wrap nicely on small screens */ .legatum-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } /* Buttons adapt and wrap; counters stay natural width */ .legatum-actions .btn, .legatum-actions .btn-ghost { flex: 1 1 140px; /* grow & shrink; minimum sensible width */ text-align: center; } /* Score / “Saved” / icons don’t get stretched */ .legatum-actions .score, .legatum-actions .kindness { flex: 0 0 auto; } /* On very small screens, let buttons take full width if needed */ @media (max-width: 600px) { .legatum-actions .btn, .legatum-actions .btn-ghost { flex: 1 1 100%; } } /* ─────────────────────────────────────────────── Slow-read utilities (brand-consistent) ─────────────────────────────────────────────── */ .slow-read { font-size: 1.08rem; /* a notch larger */ line-height: 1.9; /* taller rhythm */ letter-spacing: 0.12px; /* micro letterspace for calm scanning */ } .reading-measure { max-width: 65ch; /* ideal line length */ margin-left: auto; margin-right: auto; } .quiet-emphasis em { color: #d9c8aa; /* warm highlight for opening lines */ } /* ===== My Codex: readability & calmer accordion ===== */ /* Subtle separators between list records */ .list-separated li + li { border-top: 1px solid rgba(255,255,255,0.12); margin-top: .45rem; padding-top: .45rem; } /* Reduce accordion jank: avoid transform pops, contain layout, tidy summary */ details.accordion { border: 1px solid #3a342d; border-radius: 10px; background: #1f1b16; overflow: hidden; /* was 'clip' — use hidden for broad support */ } details.accordion[open] { background: #221e19; } details.accordion > summary { cursor: pointer; list-style: none; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; display: flex; align-items: center; gap: .6rem; user-select: none; } details.accordion > summary .caret { font-size: 1.25rem; line-height: 1; opacity: .9; } details.accordion .row-actions { margin-top: .35rem; display: flex; gap: .4rem; flex-wrap: wrap; } details.acdn summary::marker, details.accordion summary::marker { transition: transform 0.3s ease; } details.acdn[open] summary::marker, details.accordion[open] summary::marker { transform: rotate(90deg); } /* Gentle fade/slide for restored accordions */ details.acdn[open], details.accordion[open] { animation: detailsFadeIn 0.4s ease-out; } @keyframes detailsFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* ===== Readability & html tweaks ===== */ /* Let remain inline by default (no overrides needed) */ em { font-style: italic; } /* If you also style , keep it italic without forcing display */ .content-box i, .card i, .scroll-container i { font-style: italic; } /* Optional helper: prevent wraps for specific phrases */ .nowrap { white-space: nowrap; }