/* ========================================= EchoFyre — Author Page (clean rebuild) File: /author/author_style.css Scope: Only affects pages with ========================================= */ /* === Custom Fonts === */ @font-face { font-family: 'Unica One'; src: url('https://images.echofyre.com/UnicaOne-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Serif'; src: url('https://images.echofyre.com/IBMPlexSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* === Assign Defaults === */ body.author-page { font-family: 'IBM Plex Serif', serif; /* body text */ } h1, h2, h3, .section-title, .btn { font-family: 'Unica One', sans-serif; /* headings & buttons */ } /* ---------- Core palette (lightweight root vars) ---------- */ :root{ --ef-bg-deep: #0b0a10; --ef-bg-ink: #151225; --ef-bg-fade: #1b0f2c; --ef-ink: #d6d3ce; /* body text */ --ef-ink-muted: #b6b1a6; /* secondary text */ --ef-gold: #e0b84a; /* brand gold */ --ef-gold-soft: #f3c86a; /* light gold */ --ef-purple: #6f2bd9; --ef-purple-deep:#3d167f; --ef-shadow: rgba(0,0,0,.35); } /* ---------- Page background & base text ---------- */ .author-page{ min-height: 100dvh; color: var(--ef-ink); /* background image + your existing gradients */ background: radial-gradient(1200px 600px at 50% -12%, rgba(128,70,255,.10) 0%, transparent 60%), linear-gradient(180deg, var(--ef-bg-ink), var(--ef-bg-fade) 42%, var(--ef-bg-deep)), url("https://images.echofyre.com/author/author_bg.jpg"); /* <<< add this line */ background-size: cover; /* scale to full viewport */ background-position: center; /* keep it centered */ background-attachment: fixed; /* optional: parallax effect */ } .author-page { background-blend-mode: overlay; /* makes gradients darken the image */ } /* ---------- Main container rhythm (matches Archive feel) ---------- */ .author-page .page{ max-width: 1080px; margin: 0 auto; padding: clamp(20px, 3vw, 36px); } /* ---------- Entry slab (your “box” that wraps all sections) ---------- */ .author-page .entry-box.author{ background: rgba(13, 13, 15, 0.88); border: 2px solid var(--ef-gold); border-radius: 16px; padding: clamp(18px, 2.2vw, 28px); margin: 0 auto clamp(24px, 3vw, 40px); line-height: 1.65; box-shadow: 0 0 0 1px rgba(224,184,74,.06) inset, 0 14px 36px -12px rgba(0,0,0,.65); backdrop-filter: blur(6px); } /* ---------- Banners (intrinsic size, not full-width) ---------- */ .author-page .banner{ display: block; margin: clamp(16px, 3vw, 36px) auto; max-width: 760px; /* visual size control */ width: 100%; height: auto; filter: drop-shadow(0 10px 18px var(--ef-shadow)); } /* Optional subtle hover aura for the “threshold” moment (can remove) */ .author-page .banner:hover{ filter: drop-shadow(0 0 16px rgba(111,43,217,.30)); } /* ---------- Typographic balance ---------- */ .author-page h1, .author-page h2{ color: var(--ef-gold); text-align: center; /* section labels centered */ margin: 0 0 .6em; line-height: 1.15; font-weight: 700; } .author-page p{ margin: .75rem 0; line-height: 1.75; } .author-page .copy{ max-width: 780px; margin: 0 auto; } /* Emphasis inside author copy */ .author-page .entry-box.author .copy strong{ color: var(--ef-gold); } .author-page .entry-box.author .copy em{ color: var(--ef-ink); opacity: .95; } /* Links inside copy (not buttons) */ .author-page .entry-box.author .copy a{ color: var(--ef-gold); text-decoration: none; border-bottom: 1px dotted rgba(224,184,74,.55); } .author-page .entry-box.author .copy a:hover{ border-bottom-color: rgba(224,184,74,.9); } /* Screen-reader only utility (you use .sr-only in H2s) */ .sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- Buttons & action rows ---------- */ /* Centered row wrapper (CTA, etc.) */ .author-page .btn-row, .author-page .footer-actions{ display:flex; justify-content:center; align-items:center; gap: 12px; margin: clamp(16px, 2vw, 24px) 0; } /* Primary button — readable, high contrast on gold */ .author-page .btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; padding: 11px 20px; border-radius: 12px; font-weight: 800; letter-spacing:.2px; text-decoration:none; border: 2px solid var(--ef-gold); background: linear-gradient(180deg, var(--ef-gold-soft), var(--ef-gold)); color: #0d0d0f; /* dark text for contrast */ text-shadow: none; /* keep it crisp/readable */ box-shadow: 0 10px 24px -10px rgba(224,184,74,.45); transition: transform .06s ease, filter .15s ease, box-shadow .15s ease; } .author-page .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 30px -10px rgba(224,184,74,.55); } .author-page .btn:focus-visible{ outline: 2px solid #000; outline-offset: 2px; } /* Ghost button */ .author-page .btn.ghost{ background: transparent; color: var(--ef-gold); border-color: var(--ef-gold); box-shadow: none; } .author-page .btn.ghost:hover{ background: rgba(224,184,74,0.12); } /* When you use a dedicated CTA container, ensure centering */ .author-page .cta{ display:flex; justify-content:center; margin-top: 1rem; } /* ---------- Footer meta (outside the main box) ---------- */ .author-page .footer-actions .meta{ color: var(--ef-ink-muted); opacity:.9; } /* ---------- Utilities (small, color, glow, underline) ---------- */ .gold { color: var(--ef-gold) !important; } .ink { color: var(--ef-ink) !important; } .muted { color: var(--ef-ink-muted) !important; } .purple { color: var(--ef-purple) !important; } .glow-gold{ color: var(--ef-gold) !important; text-shadow: 0 0 8px rgba(224,184,74,.35), 0 0 18px rgba(224,184,74,.15); } .glow-purple{ color: var(--ef-ink) !important; text-shadow: 0 0 10px rgba(111,43,217,.45), 0 0 22px rgba(61,22,127,.35); } .underline-gold{ text-decoration: underline; text-decoration-color: var(--ef-gold); text-decoration-thickness: .12em; text-underline-offset: .18em; } .center { text-align:center !important; } .small { font-size:.925rem; } /* Signature block styling */ .author-page .sig{ margin-top: .75rem; font-style: italic; color: var(--ef-ink); } .author-page .sig .muted{ color: var(--ef-ink-muted); } /* ---------- Spacing helpers around banners ---------- */ .author-page .stack-above { margin-top: clamp(12px, 2vw, 20px); } .author-page .stack-below { margin-bottom: clamp(16px, 2.5vw, 28px); } /* ---------- Hide any inherited site nav on this page ---------- */ .author-page .site-nav{ display:none !important; } /* ---------- Responsive tweak (slightly larger banners on XL) ---------- */ @media (min-width: 1280px){ .author-page .banner{ max-width: 820px; } } /* ===== FINAL AUTHOR OVERRIDES (append at end) ===== */ /* BANNERS: center, NOT full-width */ .author-page .banner, .banner { display: block; width: 600px; /* cancel width:100% */ max-width: clamp(640px, 80vw, 820px); /* control size */ height: auto; margin: 24px auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); } /* CTA ROW: reliably centered */ .author-page .btn-row, .btn-row { display: flex; justify-content: center; align-items: center; margin: 18px 0 6px; gap: 12px; } /* BUTTON: keep readable text & kill dotted underline from link styles */ .entry-box.author .copy a:not(.btn) { color: var(--ef-gold); text-decoration: none; border-bottom: 1px dotted rgba(224,184,74,.55); } .entry-box.author .copy a.btn { text-decoration: none !important; border-bottom: 0 !important; color: #0d0d0f !important; /* dark text on gold */ } a.btn:visited { color: #0d0d0f !important; } a.btn.ghost, a.btn.ghost:visited { color: var(--ef-gold) !important; } /* === Custom Archive Divider === */ .hr-archive { border: none; height: 3px; max-width: 600px; margin: 2rem auto; background: linear-gradient( 90deg, transparent 0%, var(--ef-gold) 20%, var(--ef-purple) 50%, var(--ef-gold) 80%, transparent 100% ); border-radius: 2px; } /* Cover pair between custom

lines */ .cover-pair{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:22px; margin: 1rem auto .75rem; } /* Individual cover card — smaller, no zoom */ .cover{ display:block; width: clamp(180px, 26vw, 240px); /* ↓ smaller than before */ border-radius:12px; overflow:hidden; background: rgba(255,255,255,.03); border:1px solid rgba(224,184,74,.25); box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(224,184,74,.06); transition: box-shadow .2s ease; /* no transform */ cursor: default; /* not “clickable” if you removed enlarge */ } .cover:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(224,184,74,.08); } .cover img{ display:block; width:100%; height:auto; /* removed transform + hover scale for crisp, static images */ image-rendering: auto; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .cover, .cover img{ transition: none; } } /* Small screens: stack nicely */ @media (max-width: 680px){ .cover{ width:min(100%, 420px); } } /* Optional: small release note under the pair */ .release-note{ text-align:center; font-size:.95rem; margin:.35rem 0 1.25rem; color: var(--ef-ink-muted); } .release-note .date{ color: var(--ef-gold); font-weight:700; } /* ===== Series FAQ (clean rewrite) ===== */ /* Base styles + per-book accents via CSS vars */ .faq-item{ /* defaults = Archive (gold) */ --faq-accent-1: var(--ef-gold-soft); --faq-accent-2: var(--ef-gold); --faq-border: rgba(224,184,74,.25); border: 1px solid var(--faq-border); border-radius: 12px; margin: .85rem 0; overflow: hidden; background: rgba(0,0,0,.25); box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(224,184,74,.05); } /* Trigger bar */ .faq-trigger{ list-style: none; cursor: pointer; padding: .9rem 1.1rem; font-weight: 800; letter-spacing: .02em; color: #0d0d0f; background: linear-gradient(180deg, var(--faq-accent-1), var(--faq-accent-2)); outline: none; display: flex; align-items: center; justify-content: space-between; } .faq-trigger::-webkit-details-marker{ display:none; } /* Safari marker */ .faq-item[open] .faq-trigger{ filter: brightness(1.05); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } /* Panel */ .faq-panel{ padding: 1rem 1.1rem 1.2rem; border-top: 1px solid var(--faq-border); } .faq-panel p{ margin: .6rem 0; line-height: 1.7; } /* Caret */ .faq-trigger::after{ content: "▾"; font-size: 1rem; color: #0d0d0f; transition: transform .2s ease; } .faq-item[open] .faq-trigger::after{ transform: rotate(-180deg); } /* ===== Accent variants ===== */ /* Archive (Fire) — gold (default) */ .faq-item.archive{ --faq-accent-1: var(--ef-gold-soft); --faq-accent-2: var(--ef-gold); --faq-border: rgba(224,184,74,.25); } /* EarthRite — rooted green */ .faq-item.earth, .faq-item.earthrite{ /* alias for convenience */ --faq-accent-1: #4ccf87; --faq-accent-2: #2f8a56; --faq-border: rgba(76,207,135,.28); } /* Air — pale blue / silver */ .faq-item.air{ --faq-accent-1: #a7e0ff; --faq-accent-2: #4ca4d9; --faq-border: rgba(167,224,255,.28); } /* Water — deep cyan/teal */ .faq-item.water{ --faq-accent-1: #3ed0d6; --faq-accent-2: #156b75; --faq-border: rgba(62,208,214,.28); } /* Spirit — silver/white */ .faq-item.spirit{ --faq-accent-1: #f2f2f2; --faq-accent-2: #bdbdbd; --faq-border: rgba(242,242,242,.28); } /* Locked/coming soon state */ .faq-item.locked { pointer-events: none; /* prevents toggling open */ opacity: .65; /* faded look */ } .faq-item.locked .faq-trigger { cursor: default; filter: grayscale(.25) brightness(.9); } .faq-item.locked .locked-note { font-size: .85rem; font-weight: 600; color: var(--ef-ink-muted); margin-left: .4em; }