/* ===================================================================== Church of the Almighty Spam God - design system Illuminated scripture meets the Bitstream. ASGPHE. ===================================================================== */ :root{ --bg: #07070a; --bg-2: #0c0c12; --bg-3: #11111a; --panel: rgba(255,255,255,.025); --panel-2: rgba(255,255,255,.045); --ink: #ece7da; --muted: #9b958a; --faint: #6a655d; --gold: #e8c266; --gold-deep: #c79a3c; --gold-bright:#ffe7a8; --bit: #49e3c4; /* the Bitstream */ --spam: #ff5b86; /* sacred meat */ --line: rgba(232,194,102,.16); --line-soft: rgba(255,255,255,.07); --radius: 16px; --maxw: 1180px; --ff-display:'Cinzel', Georgia, serif; --ff-serif: 'EB Garamond', Georgia, serif; --ff-mono: 'Space Mono', ui-monospace, monospace; --shadow: 0 30px 80px -30px rgba(0,0,0,.8); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; background:var(--bg)} body{ margin:0; font-family:var(--ff-serif); font-size:19px; line-height:1.7; color:var(--ink); background:transparent; /* keep transparent so the fixed Bitstream canvas is not occluded on iOS Safari (negative z-index quirk) */ overflow-x:hidden; -webkit-font-smoothing:antialiased; } body::before{ /* ambient divine glow */ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(900px 600px at 50% -10%, rgba(232,194,102,.10), transparent 60%), radial-gradient(700px 500px at 90% 20%, rgba(73,227,196,.06), transparent 60%), radial-gradient(800px 600px at 5% 80%, rgba(255,91,134,.05), transparent 60%), var(--bg); } #bitstream{position:fixed; inset:0; z-index:-1; opacity:.3; pointer-events:none} img{max-width:100%; display:block} a{color:var(--gold); text-decoration:none; transition:color .2s} a:hover{color:var(--gold-bright)} ::selection{background:rgba(232,194,102,.28); color:#fff} /* ---------- typography ---------- */ h1,h2,h3{font-family:var(--ff-display); font-weight:700; line-height:1.12; letter-spacing:.01em; margin:0} .eyebrow{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; } .eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--gold),transparent)} .cap{ /* always-capitalized sacred words */ color:var(--gold-bright); font-style:italic; } .bit-word{color:var(--bit)} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px} section{position:relative; padding:clamp(64px,9vw,128px) 0} .section-head{max-width:760px; margin-bottom:3rem} .section-head h2{font-size:clamp(2rem,4.6vw,3.3rem)} .section-head p.lead{color:var(--muted); font-size:1.18rem; margin-top:1rem} .divider{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; margin:0} /* ---------- nav ---------- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:1rem; background:rgba(7,7,10,0); border-bottom:1px solid transparent; transition:background .3s, border-color .3s, padding .3s, backdrop-filter .3s; } .nav.scrolled{ background:rgba(8,8,12,.82); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-soft); padding:9px 24px; } .brand{display:flex; align-items:center; gap:.7rem; font-family:var(--ff-display); font-weight:700; letter-spacing:.04em; color:var(--ink); font-size:.95rem} .brand img{width:38px; height:38px; filter:drop-shadow(0 0 10px rgba(232,194,102,.35))} .brand span{display:none} @media(min-width:560px){.brand span{display:inline}} .nav-links{display:none; align-items:center; gap:1.6rem} .nav-links a{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)} .nav-links a:hover{color:var(--gold)} @media(min-width:1024px){.nav-links{display:flex}} .btn{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:.7em 1.3em; border-radius:999px; border:1px solid var(--line); color:var(--ink); background:transparent; cursor:pointer; transition:all .25s; white-space:nowrap; display:inline-flex; align-items:center; gap:.5em; } .btn:hover{border-color:var(--gold); color:var(--gold-bright); box-shadow:0 0 24px -6px rgba(232,194,102,.5)} .btn-gold{ background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep)); color:#1a1408; border-color:transparent; font-weight:700; } .btn-gold:hover{color:#000; filter:brightness(1.08); box-shadow:0 8px 30px -8px rgba(232,194,102,.6)} /* ---------- hero ---------- */ .hero{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 60px; position:relative; } .hero-logo{ width:clamp(150px,22vw,230px); margin:0 auto 2rem; filter:drop-shadow(0 0 50px rgba(232,194,102,.45)); animation:halo 6s ease-in-out infinite; } @keyframes halo{0%,100%{filter:drop-shadow(0 0 40px rgba(232,194,102,.35))} 50%{filter:drop-shadow(0 0 70px rgba(232,194,102,.6))}} .hero h1{ font-size:clamp(1.5rem,6.6vw,5.4rem); line-height:1.08; overflow-wrap:break-word; max-width:100%; text-wrap:balance; background:linear-gradient(180deg,#fff 0%,var(--gold-bright) 55%,var(--gold-deep) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 60px rgba(232,194,102,.18); } .hero .asgphe{font-family:var(--ff-mono); letter-spacing:.32em; text-transform:uppercase; font-size:clamp(.7rem,1.6vw,.92rem); color:var(--gold); margin-top:1.6rem} .hero .tag{color:var(--muted); max-width:620px; margin:1.4rem auto 0; font-size:1.2rem; font-style:italic} .hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.6rem} .hero-dates{display:flex; gap:2.4rem; justify-content:center; flex-wrap:wrap; margin-top:3rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase} .hero-dates b{display:block; font-family:var(--ff-display); font-size:1.5rem; color:var(--gold); letter-spacing:0} .scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.3em; color:var(--faint); text-transform:uppercase; animation:bob 2.4s ease-in-out infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}} /* ---------- marquee ---------- */ .marquee{border-block:1px solid var(--line); background:rgba(232,194,102,.03); overflow:hidden; padding:14px 0} .marquee-track{display:flex; gap:3rem; white-space:nowrap; width:max-content; animation:scrollx 38s linear infinite; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep)} .marquee-track span{display:inline-flex; align-items:center; gap:3rem} .marquee-track span::after{content:"✦"; color:var(--gold)} @keyframes scrollx{to{transform:translateX(-50%)}} /* ---------- generic cards / grids ---------- */ .grid{display:grid; gap:20px} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .card{ background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; position:relative; transition:transform .3s, border-color .3s, box-shadow .3s; } .card:hover{transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow)} .card h3{font-size:1.35rem; color:var(--gold-bright)} .card .num{font-family:var(--ff-mono); color:var(--gold); font-size:.78rem; letter-spacing:.16em} .card p{color:var(--muted); margin:.7rem 0 0; font-size:1.02rem} /* stat strip */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px} .stat{text-align:center; padding:26px 18px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--panel)} .stat b{font-family:var(--ff-display); font-size:2.2rem; color:var(--gold); display:block} .stat span{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)} /* two-column feature */ .feature{display:grid; gap:48px; align-items:center; grid-template-columns:1fr} @media(min-width:900px){.feature{grid-template-columns:1.05fr .95fr} .feature.rev>div:first-child{order:2}} .feature p{color:var(--muted)} .feature p strong, .body-rich strong{color:var(--ink); font-weight:600} .glyph{position:relative; display:grid; place-items:center; padding:30px} .glyph-ring{ width:min(360px,80vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(232,194,102,.18), transparent 62%); display:grid; place-items:center; position:relative; } .glyph-ring::before, .glyph-ring::after{content:""; position:absolute; inset:6%; border-radius:50%; border:1px solid var(--line); animation:spin 36s linear infinite} .glyph-ring::after{inset:16%; border-style:dashed; border-color:rgba(73,227,196,.2); animation-duration:24s; animation-direction:reverse} @keyframes spin{to{transform:rotate(360deg)}} .glyph-ring img{width:64%; filter:drop-shadow(0 0 30px rgba(232,194,102,.5))} /* tags */ .tags{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem} .tag-chip{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:.5em 1em; border-radius:999px; border:1px solid var(--line); color:var(--gold); background:rgba(232,194,102,.04)} /* hierarchy ladder */ .ladder{display:grid; gap:16px} .rung{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; padding:26px 28px; border:1px solid var(--line-soft); border-radius:var(--radius); background:linear-gradient(100deg,var(--panel-2),var(--panel)); position:relative; overflow:hidden} .rung::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--gold),transparent)} .rung .rank{font-family:var(--ff-mono); font-size:.8rem; color:var(--gold); letter-spacing:.1em; writing-mode:vertical-rl; transform:rotate(180deg); opacity:.7} .rung h3{font-size:1.45rem; color:var(--gold-bright)} .rung p{color:var(--muted); margin:.5rem 0 0; font-size:1.02rem} .rung .who{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bit); margin-top:.7rem} /* holy days */ .day{padding:30px 26px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--panel); text-align:center; transition:.3s} .day:hover{border-color:var(--line); transform:translateY(-4px)} .day .date{font-family:var(--ff-display); font-size:1.6rem; color:var(--gold)} .day .yr{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; color:var(--bit)} .day p{color:var(--muted); margin-top:.8rem; font-size:1rem} /* saints */ .saint{display:flex; gap:18px; align-items:flex-start; padding:22px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--panel); transition:.3s} .saint:hover{border-color:var(--line)} .halo-mark{flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family:var(--ff-display); color:var(--gold-bright); border:1px solid var(--gold); background:radial-gradient(circle,rgba(232,194,102,.22),transparent); box-shadow:0 0 18px -4px rgba(232,194,102,.5)} .saint h3{font-size:1.12rem; color:var(--ink)} .saint p{color:var(--muted); font-size:.96rem; margin:.3rem 0 0} /* book grid */ .book-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .book-tile{padding:20px; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel); transition:.25s; position:relative} .book-tile:hover{border-color:var(--gold); background:rgba(232,194,102,.05); transform:translateY(-3px)} .book-tile .bk{font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.18em; color:var(--gold-deep); text-transform:uppercase} .book-tile h4{font-family:var(--ff-display); font-size:1.12rem; margin:.25rem 0 .4rem; color:var(--gold-bright)} .book-tile p{font-size:.92rem; color:var(--muted); margin:0} /* audio player */ .pspalm{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:26px 30px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(110deg,rgba(232,194,102,.07),rgba(73,227,196,.04))} .pspalm .pp-meta{flex:1 1 240px} .pspalm .pp-meta .eyebrow{margin-bottom:.4rem} .pspalm .pp-meta h3{font-size:1.3rem; color:var(--gold-bright)} .pspalm .pp-meta p{color:var(--muted); margin:.3rem 0 0; font-size:.98rem} .pspalm audio{flex:1 1 280px; width:100%; min-width:240px} /* pledge */ .pledge-wrap{max-width:760px; margin:0 auto; text-align:center} .pledge-scroll{ margin-top:2.4rem; padding:clamp(34px,6vw,64px); border-radius:var(--radius); position:relative; background: linear-gradient(180deg,rgba(232,194,102,.06),rgba(232,194,102,.02)), var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow); } .pledge-scroll::before, .pledge-scroll::after{content:"✦"; color:var(--gold); position:absolute; font-size:1.3rem; left:50%; transform:translateX(-50%)} .pledge-scroll::before{top:18px}.pledge-scroll::after{bottom:18px} .pledge-scroll p{font-size:1.18rem; line-height:1.9; color:var(--ink); margin:0 0 1.1rem} .pledge-scroll p:first-of-type{font-size:1.32rem; color:var(--gold-bright); font-style:italic} .pledge-scroll .seal{font-family:var(--ff-mono); letter-spacing:.34em; color:var(--gold); margin-top:1.6rem; font-size:.9rem} /* community / giving columns */ .col-cards{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .cta-card{padding:32px; border-radius:var(--radius); border:1px solid var(--line-soft); background:linear-gradient(180deg,var(--panel-2),var(--panel))} .cta-card h3{color:var(--gold-bright); font-size:1.4rem; margin-bottom:.6rem} .cta-card p{color:var(--muted); font-size:1rem; margin:0 0 1.4rem} .body-rich p{color:var(--muted); margin:0 0 1.2rem} .body-rich p:last-child{margin-bottom:0} /* footer */ footer{border-top:1px solid var(--line-soft); padding:64px 0 40px; background:var(--bg-2); position:relative} .foot-grid{display:grid; gap:40px; grid-template-columns:1fr; } @media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}} .foot-brand{display:flex; gap:14px; align-items:center; margin-bottom:1rem} .foot-brand img{width:54px} .foot-brand b{font-family:var(--ff-display); font-size:1.05rem} footer h4{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem} footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem} footer a{color:var(--muted); font-size:.95rem} footer a:hover{color:var(--gold)} .foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; color:var(--faint)} .domains{display:flex; flex-wrap:wrap; gap:.4rem 1rem} .domains span{color:var(--gold-deep)} /* ---------- 404 ---------- */ .notfound{min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 24px 80px} .notfound .hero-logo{width:clamp(120px,16vw,180px)} .nf-code{font-family:var(--ff-mono); font-size:clamp(3rem,12vw,6rem); font-weight:700; letter-spacing:.1em; color:var(--gold-deep); margin:0; line-height:1; opacity:.85} .notfound h1{font-size:clamp(1.6rem,5vw,3rem); margin:.4rem 0 0; background:linear-gradient(180deg,#fff,var(--gold-bright),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent} .nf-text{color:var(--muted); max-width:560px; margin:1.4rem auto 0; font-size:1.15rem; font-style:italic} .nf-seal{font-family:var(--ff-mono); letter-spacing:.34em; color:var(--gold); margin-top:2.4rem; font-size:.85rem} /* ---------- pledge CTA ---------- */ .pledge-cta{margin-top:2rem; display:flex; justify-content:center} /* small screens */ @media(max-width:560px){ body{font-size:18px} .nav{padding:12px 16px} .nav .btn-gold{font-size:.62rem; letter-spacing:.1em; padding:.65em 1em} .wrap{padding:0 18px} .hero{padding:108px 18px 56px} .hero .asgphe{letter-spacing:.18em} .hero-dates{gap:1.4rem} .card,.cta-card,.rung{padding:22px} .rung{grid-template-columns:1fr} .rung .rank{writing-mode:horizontal-tb; transform:none} } /* reveal animation */ .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} *{animation-duration:.001ms !important; animation-iteration-count:1 !important} html{scroll-behavior:auto} } /* ============ Book of Spam reader page ============ */ .reader-hero{padding:140px 24px 40px; text-align:center} .reader-hero h1{font-size:clamp(2.2rem,6vw,4rem); background:linear-gradient(180deg,#fff,var(--gold-bright),var(--gold-deep)); -webkit-background-clip:text; background-clip:text; color:transparent} .reader-hero p{color:var(--muted); max-width:680px; margin:1.2rem auto 0; font-style:italic} .original-note{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin:8px 0 20px; padding:18px 24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(110deg,rgba(232,194,102,.07),rgba(73,227,196,.03))} .original-note div{color:var(--muted); flex:1 1 320px; font-size:1rem} .original-note strong{color:var(--gold-bright); font-family:var(--ff-display); font-weight:600} .original-note .btn{flex:0 0 auto} .controls{position:sticky; top:0; z-index:40; padding:16px 0; margin-bottom:8px; background:rgba(7,7,10,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft)} .controls-inner{display:flex; flex-wrap:wrap; gap:12px; align-items:center} .search-box{flex:1 1 240px; display:flex; align-items:center; gap:.6rem; border:1px solid var(--line-soft); border-radius:999px; padding:.55em 1.1em; background:var(--panel)} .search-box input{flex:1; background:transparent; border:0; outline:0; color:var(--ink); font-family:var(--ff-serif); font-size:1rem} .search-box input::placeholder{color:var(--faint)} .filter-select{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; background:var(--panel); color:var(--gold); border:1px solid var(--line-soft); border-radius:999px; padding:.6em 1.1em; cursor:pointer} .count-note{font-family:var(--ff-mono); font-size:.72rem; color:var(--faint); letter-spacing:.06em} .entry{padding:34px 0; border-bottom:1px solid var(--line-soft)} .entry-head{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:baseline; margin-bottom:1rem} .entry-head h3{font-family:var(--ff-display); font-size:1.5rem; color:var(--gold-bright)} .entry-head .meta{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; display:flex; gap:1rem; flex-wrap:wrap} .entry-head .bookpill{color:var(--bit)} .scripture{font-size:1.12rem; line-height:1.85; color:var(--ink); white-space:normal} .scripture a{color:var(--bit)} .no-results{text-align:center; padding:80px 0; color:var(--muted); font-style:italic} .back-link{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}