Embed

<section class="fmgv-staff-portal fmgv-typography" aria-labelledby="fmgv-staff-portal-title">
  <style>
    /* ----------------------------------------------------------
       Font loading (kept local to this section for portability)
       If your site already loads these fonts, delete @import lines.
       ---------------------------------------------------------- */
    @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&family=Yeseva+One&display=swap');

    /* =========================================
       FMGV Staff Portal — Typography-Aligned
       ========================================= */

    :root {
      /* ---- FMGV Brand Colors (from your brand sheet) ---- */
      --fmgv-dark: #4D4D4D;   /* Dark Gray (section background) */
      --fmgv-gold: #F1C586;   /* Gold (primary / buttons) */
      --fmgv-warm: #D2CFCD;   /* Warm Gray (cards) */
      --fmgv-light: #F7F7F7;  /* Very Light Gray (icon tiles) */

      /* ---- Typography ---- */
      --font-heading: "Yeseva One", Georgia, serif;
      --font-body: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

      /* Type scale & rhythm */
      --lh-tight: 1.12;
      --lh-normal: 1.5;
      --fs-title: clamp(28px, 3.6vw, 44px);
      --fs-sub: clamp(14px, 1.7vw, 18px);
      --fs-h3: 18px;
      --fs-body: 14px;
      --fs-btn: 14px;

      /* Spacing & layout */
      --radius: 14px;
      --gap: 18px;
      --maxw: 1100px;

      /* Buttons */
      --btn-bg: var(--fmgv-gold);
      --btn-fg: #000; /* Good contrast on gold */
      --btn-bg-hover: #E2B06F;
      --focus: var(--fmgv-gold);
    }

    .fmgv-typography {
      font-family: var(--font-body);
      background: var(--fmgv-dark);  /* dark band for the portal */
      color: #fff;
      padding: clamp(36px, 5vw, 72px) 18px;
    }

    .fmgv-wrap {
      margin: 0 auto;
      max-width: var(--maxw);
    }

    /* Header */
    .fmgv-header { text-align: center; margin-bottom: clamp(18px, 3vw, 28px); }
    .fmgv-title {
      font-family: var(--font-heading);
      font-size: var(--fs-title);
      line-height: var(--lh-tight);
      letter-spacing: 0.2px;
      margin: 0 0 10px 0;
      color: #fff;
    }
    .fmgv-subtitle {
      font-family: var(--font-body);
      font-size: var(--fs-sub);
      line-height: var(--lh-normal);
      color: var(--fmgv-light);
      max-width: 760px;
      margin: 0 auto;
    }

    /* Grid */
    .fmgv-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gap);
      margin-top: clamp(18px, 3vw, 28px);
    }

    /* Cards */
    .fmgv-card {
      grid-column: span 12;
      background: var(--fmgv-warm);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: var(--radius);
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      color: #000;
    }
    .fmgv-card:hover {
      transform: translateY(-2px);
      background: #cbc8c6;
      box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    }

    .fmgv-icon {
      width: 42px; height: 42px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: var(--fmgv-light);
      color: var(--fmgv-dark);
      font-size: 22px;
      flex: 0 0 42px;
    }

    .fmgv-card h3 {
      font-family: var(--font-heading);
      font-size: var(--fs-h3);
      line-height: var(--lh-tight);
      margin: 0 0 2px 0;
      color: #000;
      letter-spacing: 0.2px;
    }
    .fmgv-card p {
      font-family: var(--font-body);
      font-size: var(--fs-body);
      line-height: var(--lh-normal);
      color: #333;
      margin: 0;
    }

    .fmgv-spacer { flex: 1; }

    /* Buttons — UPPERCASE with tracked lettering */
    .fmgv-btn {
      font-family: var(--font-body);
      font-size: var(--fs-btn);
      font-weight: 700;
      text-transform: uppercase;        /* Uppercase */
      letter-spacing: 0.6px;            /* Tracking */
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      color: var(--btn-fg);
      background: var(--btn-bg);
      text-decoration: none;
      border: 1px solid rgba(0,0,0,0.08);
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      white-space: nowrap;
    }
    .fmgv-btn:hover {
      background: var(--btn-bg-hover);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    }
    .fmgv-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .fmgv-btn .arrow { font-size: 16px; line-height: 1; }

    /* Responsive columns */
    @media (min-width: 700px) { .fmgv-card { grid-column: span 6; } }
    @media (min-width: 1024px) { .fmgv-card { grid-column: span 4; } }
  </style>

  <div class="fmgv-wrap">
    <header class="fmgv-header">
      <h2 id="fmgv-staff-portal-title" class="fmgv-title">FMGV Staff Portal</h2>
      <p class="fmgv-subtitle">
        Quick access to staff email, scheduling, media uploads, forms, and internal resources.
      </p>
    </header>

    <div class="fmgv-grid" role="list">
      
      <article class="fmgv-card" role="listitem">
        <div class="fmgv-icon" aria-hidden="true">✉️</div>
        <div>
          <h3>Staff Email</h3>
          <p>Sign in to your @fmgv.org mailbox.</p>
        </div>
        <div class="fmgv-spacer"></div>
        <a class="fmgv-btn" href="https://outlook.office.com/mail" target="_blank" rel="noopener">
          Open Mail <span class="arrow">↗</span>
        </a>
      </article>

      
      <article class="fmgv-card" role="listitem">
        <div class="fmgv-icon" aria-hidden="true">📅</div>
        <div>
          <h3>Calendar & Scheduling</h3>
          <p>View service plans, rehearsals, and events.</p>
        </div>
        <div class="fmgv-spacer"></div>
        
        <a class="fmgv-btn" href="#" target="_blank" rel="noopener">
          Open Calendar <span class="arrow">↗</span>
        </a>
      </article>

      
      <article class="fmgv-card" role="listitem">
        <div class="fmgv-icon" aria-hidden="true">📤</div>
        <div>
          <h3>Media Uploads</h3>
          <p>Upload announcements, slides, graphics, or videos.</p>
        </div>
        <div class="fmgv-spacer"></div>
        
        <a class="fmgv-btn" href="#" target="_blank" rel="noopener">
          Upload Files <span class="arrow">↗</span>
        </a>
      </article>

      
      <article class="fmgv-card" role="listitem">
        <div class="fmgv-icon" aria-hidden="true">📝</div>
        <div>
          <h3>Staff Forms</h3>
          <p>Submit planning, announcements, and request forms.</p>
        </div>
        <div class="fmgv-spacer"></div>
        
        <a class="fmgv-btn" href="#" target="_blank" rel="noopener">
          Open Forms <span class="arrow">↗</span>
        </a>
      </article>

      
      <article class="fmgv-card" role="listitem">
        <div class="fmgv-icon" aria-hidden="true">🧩</div>
        <div>
          <h3>Teams & Resources</h3>
          <p>Access Teams, SharePoint, or shared documents.</p>
        </div>
        <div class="fmgv-spacer"></div>
        
        <a class="fmgv-btn" href="#" target="_blank" rel="noopener">
          Open Resources <span class="arrow">↗</span>
        </a>
      </article>
    </div>
  </div>
</section>

Greater Victory Faith Ministries

Greater Victory Faith Ministries is a church based in the Lorain, OH, dedicated to spreading the word of God and serving their community. With a focus on faith, hope, and love, they strive to create a welcoming and supportive environment for all who seek spiritual guidance.

Through their various outreach programs and services, Greater Victory Faith Ministries aims to make a positive impact on the lives of those around them. Whether it's through worship services, counseling, or community events, they are committed to helping people find their way and live their best lives.