source: Klonkt/src/views/pages/fan-gate.ejs@ d774679

<div class="container fg-navwrap">
  <%# Same post navigation (Newer/Older) as on a regular post, so a visitor
      on the fan gate can still browse rather than getting stuck. Same
      dimensions as .post-page (720px / padding 0 1rem) for pixel-perfect alignment. %>
  <%- include('../partials/post-nav', { newerPost: (typeof newerPost !== 'undefined' ? newerPost : null), olderPost: (typeof olderPost !== 'undefined' ? olderPost : null) }) %>
</div>

<section class="fg">
  <div class="fg-card">
    <div class="fg-lock">🔒</div>
    <h1 class="fg-h1"><%= t('fgate.title') %></h1>
    <% if (typeof fgTitle !== 'undefined' && fgTitle) { %><p class="fg-which">"<%= fgTitle %>"</p><% } %>
    <p class="fg-sub"><%= t('fgate.sub') %></p>
    <p><a class="fg-btn" href="/auth/login?next=<%= encodeURIComponent(fgNext || '/') %>"><%= t('fgate.login') %></a></p>
  </div>
</section>

<style>
  /* EXACT same class combination (.container + override) and values as
     .post-page in post.ejs, so the post-nav aligns identically in the cascade. */
  .fg-navwrap { max-width: 720px; margin: 0.5rem auto 2rem; padding: 0 1rem; }
  .fg { max-width: 480px; margin: 0 auto; padding: 56px 18px; text-align: center; }
  .fg-card { border: 1px solid rgba(128,128,128,.2); border-radius: 18px; padding: 36px 28px; }
  .fg-lock { font-size: 40px; margin-bottom: 8px; }
  .fg-h1 { font-size: 26px; margin: 0 0 6px; }
  .fg-which { font-style: italic; opacity: .8; margin: 0 0 12px; }
  .fg-sub { opacity: .85; line-height: 1.6; margin: 0 0 20px; }
  .fg-btn { display: inline-block; padding: 12px 22px; border-radius: 10px; background: var(--accent,#6b8f71); color: #fff; text-decoration: none; font-weight: 600; }
</style>