rtosure/footer.html

<!-- ============================================================
     RTOSure — footer.html
     Standalone footer component.
     Include in every page via:
       <div id="site-footer"></div>
       <script>
         fetch('footer.html').then(r=>r.text()).then(h=>{
           document.getElementById('site-footer').innerHTML=h;
         });
       </script>
     ============================================================ -->

<link rel="stylesheet" href="styles.css">

<style>
/* ── Site Footer Styles ───────────────────────────────────── */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.75);
  padding-top: var(--space-3xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 280px repeat(3, 1fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Brand column */
.footer-brand .logo-wordmark {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.03em;
  display: inline-block;
  margin-bottom: var(--space-md);
}
.footer-brand .logo-wordmark span { color: var(--color-teal); }

.footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-lg);
  max-width: 240px;
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  transition: background 200ms, color 200ms;
}
.footer-social a:hover {
  background: var(--color-teal);
  color: var(--color-white);
}

/* Link columns */
.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--space-md);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 150ms;
}
.footer-links a:hover { color: var(--color-white); }

/* Sub-brands */
.footer-sub-brands {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-sub-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 200ms;
  width: fit-content;
}
.footer-sub-brand-pill:hover { opacity: 0.85; }
.pill-rtosure  { background: rgba(0,168,150,.25); border: 1px solid rgba(0,168,150,.4); }
.pill-cricos   { background: rgba(37,99,235,.25);  border: 1px solid rgba(37,99,235,.4); }
.pill-elicos   { background: rgba(124,58,237,.25); border: 1px solid rgba(124,58,237,.4); }

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xl);
  flex-wrap: wrap;
  gap: var(--space-md);
}
.footer-bottom-left {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}
.footer-bottom-links {
  display: flex;
  gap: var(--space-lg);
}
.footer-bottom-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 150ms;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

/* Australian compliance note */
.footer-compliance-note {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  padding-bottom: var(--space-xl);
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: var(--space-md);
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

<footer class="site-footer" role="contentinfo">
  <div class="container">
    <div class="footer-grid">
      <!-- Brand column -->
      <div class="footer-brand">
        <a href="index.html" class="logo-wordmark">RTO<span>Sure</span></a>
        <p class="footer-tagline">Compliance management built specifically for Australian RTOs — NVR, ESOS, National Code, and ELICOS.</p>
        <div class="footer-social" aria-label="Social media">
          <a href="#" aria-label="LinkedIn">in</a>
          <a href="#" aria-label="Twitter/X">𝕏</a>
          <a href="#" aria-label="YouTube">▶</a>
        </div>
      </div>

      <!-- Product column -->
      <div>
        <p class="footer-col-title">Product</p>
        <ul class="footer-links">
          <li><a href="features.html">Features</a></li>
          <li><a href="features.html#dashboard">Compliance Dashboard</a></li>
          <li><a href="features.html#workflows">Guided Workflows</a></li>
          <li><a href="features.html#evidence">Evidence Register</a></li>
          <li><a href="features.html#alerts">Monitoring &amp; Alerts</a></li>
          <li><a href="integrations.html">TEAMS Integration</a></li>
          <li><a href="pricing.html">Pricing</a></li>
        </ul>
        <div class="footer-sub-brands mt-lg">
          <a href="rtosure.html"   class="footer-sub-brand-pill pill-rtosure">RTOSure</a>
          <a href="cricossure.html" class="footer-sub-brand-pill pill-cricos">CRICOSSure</a>
          <a href="elicossure.html" class="footer-sub-brand-pill pill-elicos">ELICOSSure</a>
        </div>
      </div>

      <!-- Compliance column -->
      <div>
        <p class="footer-col-title">Compliance Areas</p>
        <ul class="footer-links">
          <li><a href="compliance.html#nvr">NVR Standards 2025</a></li>
          <li><a href="compliance.html#esos">ESOS Act &amp; National Code</a></li>
          <li><a href="compliance.html#elicos">ELICOS Standards 2018</a></li>
          <li><a href="compliance.html#fppr">FPPR Obligations</a></li>
          <li><a href="compliance.html#avetmiss">AVETMISS Compliance</a></li>
          <li><a href="resources.html">Free Tools &amp; Resources</a></li>
        </ul>
      </div>

      <!-- Company column -->
      <div>
        <p class="footer-col-title">Company</p>
        <ul class="footer-links">
          <li><a href="about.html">About RTOSure</a></li>
          <li><a href="about.html#team">Our Team</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="demo.html">Book a Demo</a></li>
          <li><a href="support.html">Support</a></li>
          <li><a href="security.html">Security</a></li>
          <li><a href="mailto:hello@rtosure.com.au">hello@rtosure.com.au</a></li>
        </ul>
      </div>
    </div>

    <!-- Bottom bar -->
    <div class="footer-bottom">
      <p class="footer-bottom-left">
        &copy; 2026 RTO Software Pty Ltd. All rights reserved. RTOSure is a product of RTO Software.
      </p>
      <nav class="footer-bottom-links" aria-label="Legal">
        <a href="privacy.html">Privacy Policy</a>
        <a href="terms.html">Terms of Service</a>
        <a href="cookies.html">Cookie Policy</a>
      </nav>
    </div>

    <!-- Regulatory note -->
    <p class="footer-compliance-note">
      RTOSure is designed to support compliance management for Australian Registered Training Organisations (RTOs) regulated under the National Vocational Regulation Act 2011 and associated standards. RTOSure does not constitute legal advice. RTO operators are responsible for ensuring their own compliance with applicable legislation and regulatory requirements. ASQA, CRICOS, ESOS, and ELICOS are regulatory frameworks administered by Australian Government agencies.
    </p>
  </div>
</footer>