/* ========================================================= FONT SETUP (safe to add – does not affect layout rules) NOTE: You still need the tags in your to load these fonts from Google Fonts (CSS can't load them alone). ========================================================= */ /* Reset */ * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at top, #161616 0%, #090909 58%, #060606 100%); color: #f3f0e8; /* Body text: readable "book" serif */ font-family: "Crimson Text", Georgia, "Times New Roman", serif; } /* Title / heading font: more "tome-like" */ .hero h1, .book h2 { font-family: "IM Fell DW Pica", "Crimson Text", Georgia, "Times New Roman", serif; font-weight: 700; } /* Page container */ .page { width: 800px; max-width: 100%; margin: 0 auto; padding: 0 12px; } /* Nav image */ .topnav__img { display: block; width: 100%; height: auto; } /* Hero */ .hero { text-align: center; padding: 24px 10px 8px; } .hero h1 { margin: 0; font-size: 1.8rem; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 200, 80, 0.07); } .hero p { margin: 12px auto 0; line-height: 1.6; opacity: 0.9; } /* Library grid */ .library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px 0 60px; } /* Book cards */ .book { position: relative; border-radius: 16px; padding: 16px; /* Leather-ish texture using layered gradients */ background: radial-gradient(circle at top left, rgba(255, 200, 80, 0.06), transparent 45%), radial-gradient(circle at bottom right, rgba(255, 200, 80, 0.04), transparent 55%), repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015) 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 6px ), rgba(10, 10, 10, 0.85); border: 1px solid rgba(243, 240, 232, 0.16); /* Depth */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03); transition: 0.25s ease; } /* Spine + top sheen + inner filigree line */ .book::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 210, 120, 0.10), transparent 18%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%); mix-blend-mode: screen; opacity: 0.55; } .book::after { content: ""; position: absolute; inset: 10px; border-radius: 12px; pointer-events: none; border: 1px solid rgba(255, 210, 120, 0.10); opacity: 0.35; } .book:hover { transform: translateY(-3px); border-color: rgba(255, 210, 120, 0.35); /* Gold glow */ box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 190, 70, 0.15), 0 0 40px rgba(255, 190, 70, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .book h2 { margin: 0; font-size: 1.1rem; text-align: center; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 200, 80, 0.07); } /* Book text */ .book p { margin: 10px 0 0; opacity: 0.9; line-height: 1.5; } /* Make all book titles take the same vertical space so covers line up */ .book h2 { min-height: 2.6em; /* adjust 2.2–3.0em if needed */ display: flex; align-items: center; justify-content: center; line-height: 1.2; } /* Normalize the description line so tracklists start at the same height */ .book > p:not(.tracklist) { min-height: 3.2em; /* tweak if you change wording */ } /* Cover images */ .cover { display: block; width: 100%; height: auto; border-radius: 12px; margin-top: 12px; /* Makes art pop slightly */ box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); } /* Tracklist spacing */ .tracklist { margin-top: 12px; line-height: 1.8; } /* Tracklist links */ .video-link { color: #f3f0e8; text-decoration: underline; text-underline-offset: 3px; font-weight: bold; cursor: pointer; transition: 0.2s ease; /* Bigger click target */ display: inline-block; padding: 4px 6px; border-radius: 8px; } .video-link:hover { color: #ffd27a; text-shadow: 0 0 10px rgba(255, 200, 80, 0.25); } /* Active / selected */ .video-link.is-active { color: #ffd27a; text-shadow: 0 0 12px rgba(255, 200, 80, 0.28); background: rgba(255, 210, 120, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.18); } /* Keyboard focus */ .video-link:focus-visible { outline: 2px solid rgba(255, 210, 120, 0.55); outline-offset: 2px; } /* Video area */ .video-wrap { margin: 22px auto 0; width: 100%; max-width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(243, 240, 232, 0.16); background: radial-gradient(circle at top, rgba(255, 200, 80, 0.05), transparent 55%), rgba(0, 0, 0, 0.6); box-shadow: 0 18px 35px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 190, 70, 0.06); } /* Responsive iframe */ .video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; } /* Mobile */ @media (max-width: 750px) { .library { grid-template-columns: 1fr; } }