/* HyperFollow public pages. One markup structure, twelve looks — every design below is a set of overrides keyed by `.design-` on , so a new design is CSS only and never touches the template or the route. */ *{box-sizing:border-box} .follow-body{ margin:0;min-height:100vh;background:var(--f-bg);color:#eaf2ff; font:16px/1.5 Inter,system-ui,sans-serif; display:flex;align-items:center;justify-content:center;padding:2rem 1rem; position:relative;overflow-x:hidden; } .follow-page{width:100%;max-width:420px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .follow-bgimg{position:fixed;inset:0;background-size:cover;background-position:center;z-index:0;filter:saturate(1.1)} .follow-bgdim{position:fixed;inset:0;background:var(--f-bg);opacity:.55;z-index:0} .follow-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem} .follow-cover-wrap{width:220px;height:220px;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)} .follow-cover{width:100%;height:100%;object-fit:cover;display:block} .follow-title{font-family:var(--f-font);font-weight:700;font-size:1.7rem;margin:0;letter-spacing:-.01em} .follow-subtitle{margin:.2rem 0 0;color:var(--f-accent);font-size:.95rem;font-weight:600} .follow-by{margin:.1rem 0 0;font-size:.88rem;color:#8ba0c9} .follow-by a{color:#8ba0c9;text-decoration:none} .follow-by a:hover{color:#eaf2ff} .follow-presave-note{margin:0;font-size:.82rem;color:var(--f-accent);background:rgba(255,255,255,.06); padding:.4rem .9rem;border-radius:999px} .follow-links{width:100%;display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem} .follow-link{display:flex;align-items:center;gap:.7rem;width:100%;padding:.85rem 1.1rem;border-radius:14px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#eaf2ff;text-decoration:none; font-weight:600;font-size:.95rem;transition:transform .12s,background .12s} .follow-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.11)} .follow-link svg{flex:0 0 auto;color:var(--svc-color,var(--f-accent))} .follow-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .follow-subscribe{width:100%;display:flex;gap:.5rem;margin-top:.6rem} .follow-subscribe input{flex:1;min-width:0;padding:.8rem .9rem;border-radius:12px;border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);color:#fff;font:inherit} .follow-subscribe button{padding:.8rem 1.2rem;border-radius:12px;border:0;cursor:pointer;font:600 .9rem/1 inherit; background:linear-gradient(135deg,var(--f-accent),var(--f-accent2));color:#00142b;white-space:nowrap} .follow-fineprint{margin:0;font-size:.72rem;color:#5f7099} .follow-thanks{margin:0;font-weight:600;color:var(--f-accent)} .follow-credit{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;margin:2rem auto 0; padding:.4rem .8rem;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08); font-size:.75rem;color:#c3cee6;text-decoration:none;width:fit-content} .follow-credit img{border-radius:3px;display:block} .follow-credit:hover{background:rgba(255,255,255,.1);color:#fff} .follow-credit a{color:#5f7099;text-decoration:none} .follow-credit a:hover{color:#8ba0c9} /* ============================= 1. Aurora (default) ============================= */ .design-aurora .follow-body, .design-aurora.follow-body{ background: radial-gradient(60% 50% at 20% 10%, color-mix(in srgb, var(--f-accent) 35%, transparent), transparent 70%), radial-gradient(55% 45% at 85% 85%, color-mix(in srgb, var(--f-accent2) 30%, transparent), transparent 70%), var(--f-bg); } .design-aurora .follow-cover-wrap{border:2px solid rgba(255,255,255,.15)} /* ============================= 2. Minimal ============================= */ .design-minimal .follow-cover-wrap{width:150px;height:150px;border-radius:12px;box-shadow:none} .design-minimal .follow-title{font-size:1.3rem} .design-minimal .follow-link{background:transparent;border:1px solid rgba(255,255,255,.14)} /* ============================= 3. Poster ============================= */ .design-poster .follow-card{padding-top:2rem} .design-poster .follow-cover-wrap{width:280px;height:280px;border-radius:16px} .design-poster.follow-body{background:var(--f-bg)} .design-poster .follow-title{font-size:2rem} /* ============================= 4. Split (desktop) ============================= */ @media (min-width:760px){ .design-split .follow-page{max-width:760px} .design-split .follow-card{flex-direction:row;text-align:left;align-items:center;gap:2.5rem} .design-split .follow-cover-wrap{width:260px;height:260px;flex:0 0 auto} .design-split .follow-copy,.design-split .follow-links,.design-split .follow-subscribe, .design-split .follow-presave-note,.design-split .follow-fineprint,.design-split .follow-thanks{align-self:flex-start} .design-split .follow-links{max-width:320px} } /* ============================= 5. Vinyl ============================= */ .design-vinyl .follow-cover-wrap{border-radius:50%;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.5)} .design-vinyl .follow-cover-wrap::before{content:"";position:absolute;inset:-14px;border-radius:50%; background:repeating-radial-gradient(circle,#0a0a0f 0 2px,#141419 2px 4px);z-index:-1} .design-vinyl .follow-cover-wrap::after{content:"";position:absolute;inset:42%;border-radius:50%;background:var(--f-bg); border:3px solid rgba(255,255,255,.2)} /* ============================= 6. Polaroid ============================= */ .design-polaroid .follow-cover-wrap{width:230px;height:230px;border-radius:2px;padding:14px 14px 46px; background:#f3f3f3;box-shadow:0 20px 40px rgba(0,0,0,.5);transform:rotate(-3deg)} .design-polaroid .follow-cover{border-radius:1px} .design-polaroid .follow-title{color:#1a1a1a;text-shadow:none} .design-polaroid.follow-body{background:var(--f-bg)} .design-polaroid .follow-card{gap:1.4rem} /* ============================= 7. Neon (PRO) ============================= */ .design-neon.follow-body{background:#050506} .design-neon .follow-cover-wrap{box-shadow:0 0 0 2px var(--f-accent),0 0 40px color-mix(in srgb,var(--f-accent) 60%,transparent)} .design-neon .follow-title{text-shadow:0 0 18px color-mix(in srgb,var(--f-accent) 70%,transparent)} .design-neon .follow-link{border-color:color-mix(in srgb,var(--f-accent) 40%,transparent)} /* ============================= 8. Grid (PRO) ============================= */ .design-grid.follow-body{position:relative} .design-grid .follow-bgimg{display:block !important;opacity:.14;filter:blur(1px) saturate(1.3)} .design-grid .follow-bgdim{opacity:.75} .design-grid .follow-cover-wrap{border:2px solid rgba(255,255,255,.2)} /* ============================= 9. Magazine (PRO) ============================= */ @media (min-width:760px){ .design-mag .follow-page{max-width:820px} .design-mag .follow-card{flex-direction:row-reverse;text-align:left;align-items:stretch;gap:2rem} .design-mag .follow-cover-wrap{width:230px;height:auto;aspect-ratio:1;flex:0 0 auto;border-radius:6px} .design-mag .follow-copy{align-self:flex-start} .design-mag .follow-title{font-size:2.6rem;line-height:1.05} .design-mag .follow-links,.design-mag .follow-subscribe{max-width:340px} } .design-mag .follow-title{font-family:"Playfair Display",serif} /* ============================= 10. Gradient Wave (PRO) ============================= */ .design-gradient.follow-body{ background:linear-gradient(120deg,var(--f-bg),color-mix(in srgb,var(--f-accent) 22%,var(--f-bg)), color-mix(in srgb,var(--f-accent2) 22%,var(--f-bg)),var(--f-bg)); background-size:300% 300%;animation:followWave 14s ease infinite; } @keyframes followWave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} @media (prefers-reduced-motion:reduce){.design-gradient.follow-body{animation:none}} /* ============================= 11. Monochrome (PRO) ============================= */ .design-mono .follow-cover{filter:grayscale(1) contrast(1.05)} .design-mono.follow-body{background:#0a0a0a} .design-mono .follow-link svg{color:var(--f-accent) !important} .design-mono .follow-subtitle{color:var(--f-accent)} /* ============================= 12. Film Strip (PRO) ============================= */ .design-film .follow-cover-wrap{border-radius:4px;position:relative;padding:0 16px} .design-film .follow-cover-wrap::before,.design-film .follow-cover-wrap::after{ content:"";position:absolute;top:0;bottom:0;width:16px; background:repeating-linear-gradient(#0a0a0a 0 8px,transparent 8px 16px);background-color:#161616} .design-film .follow-cover-wrap::before{left:0} .design-film .follow-cover-wrap::after{right:0} .design-film.follow-body{background:#0d0d0d} /* ============================= Cover shape ============================= */ .shape-square .follow-cover-wrap{border-radius:2px} .shape-pill .follow-cover-wrap{border-radius:28px;height:280px} .shape-circle .follow-cover-wrap{border-radius:50%} /* Designs with a structural cover shape of their own (vinyl, polaroid, film) opt out — forcing a circle onto a polaroid frame would break the design. */ .design-vinyl.shape-square .follow-cover-wrap, .design-polaroid .follow-cover-wrap, .design-film .follow-cover-wrap{border-radius:inherit} /* ============================= Motion presets ============================= */ .anim-float .follow-cover-wrap{animation:hfFloat 5s ease-in-out infinite} @keyframes hfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .anim-pulse .follow-cover-wrap{animation:hfPulse 2.2s ease-in-out infinite} @keyframes hfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} .anim-shimmer .follow-cover-wrap{position:relative;overflow:hidden} .anim-shimmer .follow-cover-wrap::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%); background-size:250% 250%;animation:hfShimmer 3.2s ease-in-out infinite; } @keyframes hfShimmer{0%{background-position:200% 0}100%{background-position:-50% 0}} @media (prefers-reduced-motion:reduce){ .anim-float .follow-cover-wrap,.anim-pulse .follow-cover-wrap,.anim-shimmer .follow-cover-wrap::after{animation:none} }