/* ========================= NOTE REQUIRES: add class="ledge-page" to on The Ledge HTML page. This isolates the styling and prevents conflicts with /style.css. ========================= */ /* The Ledge Page Overrides (hybrid mode) */ .ledge-page{ --navy: #031726; --gold: #f0c674; --offwhite: #f7f5f0; } .ledge-page * { box-sizing: border-box; } .ledge-page{ margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top, #102538 0, #020915 55%, #000000 100%); color: var(--offwhite); line-height: 1.6; } .ledge-page .page { max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; } .ledge-page header{ text-align: center; margin-bottom: 2rem; } .ledge-page header h1 { font-size: 2.5rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.5rem; color: var(--gold); } .ledge-page header p.subtitle { margin: 0; font-size: 1rem; max-width: 540px; margin-inline: auto; color: #d9d4c3; } .ledge-page .hero, .ledge-page .book-hero { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.5rem; align-items: flex-start; justify-content: center; } .ledge-page .cover-wrapper { /* Responsive cover sizing: never oversized, stays proportional */ flex: 0 1 clamp(160px, 32vw, 230px); max-width: 100%; margin-inline: auto; } .ledge-page .cover-wrapper img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7); } .ledge-page .hero-content { flex: 1 1 300px; max-width: 600px; background: rgba(3, 15, 30, 0.85); border-radius: 10px; padding: 1.75rem 1.5rem; border: 1px solid rgba(240, 198, 116, 0.25); } .ledge-page .hero-content h2 { margin-top: 0; font-size: 1.3rem; color: var(--gold); } .ledge-page .hero-content p { margin: 0 0 0.75rem; font-size: 0.98rem; color: #ece7da; } .ledge-page .cta-block { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .ledge-page .cta-button { display: inline-block; padding: 0.9rem 1.9rem; border-radius: 999px; border: none; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.9rem; background: linear-gradient(135deg, var(--gold), #ffe6a8); color: #1a1204; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; cursor: pointer; white-space: nowrap; } .ledge-page .cta-button:hover, .ledge-page .cta-button:focus { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); } .ledge-page .cta-note { font-size: 0.85rem; color: #cabfa7; } .ledge-page section{ margin-top: 3rem; background: rgba(2, 11, 22, 0.9); padding: 1.75rem 1.5rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.04); } .ledge-page section h3 { margin-top: 0; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold); } .ledge-page section p { font-size: 0.96rem; color: #e7e0cf; margin-bottom: 0.9rem; } .ledge-page .about-author { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .ledge-page footer{ text-align: center; margin-top: 3rem; font-size: 0.8rem; color: #9b9280; } @media (max-width: 520px) { .ledge-page .book-hero, .ledge-page .hero { gap: 1.25rem; } .ledge-page .cover-wrapper { flex-basis: auto; width: min(72vw, 220px); } } @media (min-width: 720px) { .ledge-page .about-author { grid-template-columns: 2.2fr 1.4fr; } } .ledge-page .mt-125 { margin-top: 1.25rem; }