/* ============================================================ Custom presentation styles (placed inside per spec) ============================================================ */ /* Atmospheric parchment-noise grain over the whole page — adds that subtle "illuminated manuscript" tactility without harming readability. Lives behind everything (z-1) and won't catch clicks. */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 2; } /* Hero ember particle rising from the bottom of the hero card */ @keyframes hero-ember-float { 0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; } 10% { opacity: 1; transform: translateY(-40px) translateX(4px) scale(1); } 50% { opacity: 0.9; } 100% { transform: translateY(-720px) translateX(60px) scale(0.4); opacity: 0; } } .hero-ember { position: absolute; bottom: -8px; width: 4px; height: 4px; background: radial-gradient( circle, rgba(234, 212, 159, 0.95) 0%, rgba(207, 164, 91, 0.5) 50%, transparent 75% ); border-radius: 50%; box-shadow: 0 0 10px rgba(220, 191, 123, 0.7), 0 0 4px rgba(255, 220, 150, 0.9); animation: hero-ember-float linear infinite; will-change: transform, opacity; } .hero-ember-lg { width: 5px; height: 5px; } /* Slow cinematic Ken-Burns on hero background */ @keyframes hero-pan { 0% { transform: scale(1.08) translate(0, 0); } 50% { transform: scale(1.12) translate(-1%, -1%); } 100% { transform: scale(1.08) translate(0, 0); } } .hero-pan { animation: hero-pan 30s ease-in-out infinite; } /* Polished molten-gold shimmer animation for primary CTAs */ @keyframes gold-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .gold-cta-bg { background: linear-gradient( 110deg, #b88946 0%, #dcbf7b 25%, #fcefd9 50%, #dcbf7b 75%, #b88946 100% ); background-size: 220% 100%; animation: gold-shimmer 7s ease-in-out infinite; } /* Subtle inner-highlight + drop shadow used on all premium cards to give them that "leather-bound + brass-rivet" tome quality */ .card-edge { box-shadow: inset 0 1px 0 0 rgba(245, 227, 191, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 8px 30px -10px rgba(0, 0, 0, 0.5); } .card-edge-hover:hover { box-shadow: inset 0 1px 0 0 rgba(245, 227, 191, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 22px 55px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(207, 164, 91, 0.18); } /* Fleuron rule: ornament-flanked thin gradient divider */ .fleuron-rule { display: flex; align-items: center; gap: 0.75rem; } .fleuron-rule::before, .fleuron-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(207, 164, 91, 0.4), transparent ); } /* Sidebar custom scrollbars in muted brand */ aside::-webkit-scrollbar { width: 6px; } aside::-webkit-scrollbar-track { background: transparent; } aside::-webkit-scrollbar-thumb { background: #2f3942; border-radius: 3px; } aside::-webkit-scrollbar-thumb:hover { background: #43525d; } /* Slow shimmer streak that drifts across the event-strip pennant */ @keyframes pennant-shimmer { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } .pennant-shimmer { position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70% ); animation: pennant-shimmer 14s linear infinite; pointer-events: none; } /* Subtle damascene quatrefoil pattern for the event strip */ .damascene-pattern { background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.18' d='M20 4 Q28 12 20 20 Q12 28 20 36 Q28 28 20 20 Q12 12 20 4 Z M4 20 Q12 12 20 20 Q28 28 36 20 Q28 12 20 20 Q12 28 4 20 Z'/%3E%3C/svg%3E"); background-size: 40px 40px; } /* Mini "rivet" used on corners of premium tomes */ .rivet { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient( circle at 30% 30%, #ead49f 0%, #b88946 50%, #5a4020 100% ); box-shadow: 0 0 0 1px rgba(61, 43, 22, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5); }