Files
rtosure/index.html
T
2026-07-20 22:13:21 +10:00

816 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="RTOSure is the only compliance management system built around the regulatory frameworks Australian RTOs are actually governed by — NVR Standards 2025, ESOS Act, National Code 2018, and ELICOS Standards 2018.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="RTOSure — Compliance Managed. Audit Ready. Every Framework Covered.">
<meta property="og:description" content="Purpose-built compliance management for Australian RTOs. NVR Standards 2025, ESOS, National Code, and ELICOS — mapped in, not configured in.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://rtosure.com.au">
<title>RTOSure — Compliance Management for Australian RTOs</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
/* ================================================================
HOME PAGE — page-specific styles
All shared/design-system styles live in styles.css.
No raw hex or rgba colour values — CSS variables only.
================================================================ */
body { padding-top: 68px; }
/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
position: relative;
overflow: hidden;
background: var(--color-navy);
padding-top: clamp(60px, 8vw, 100px);
padding-bottom: clamp(60px, 8vw, 100px);
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse 80% 60% at 70% 50%, var(--color-teal-on-dark-bg) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 90% 80%, var(--color-teal-on-dark-bg) 0%, transparent 60%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(var(--color-on-dark-surface) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.hero-content { max-width: 580px; }
/* Eyebrow pill — light teal background, reads clearly on navy */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-teal-light);
border: 1px solid var(--color-teal-mid);
border-radius: 100px;
padding: 5px 14px;
margin-bottom: var(--space-lg);
}
.hero-eyebrow .dot {
width: 6px; height: 6px;
background: var(--color-teal);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
.hero-eyebrow span {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--color-teal-dark);
}
.hero-headline {
font-family: var(--font-display);
font-size: clamp(40px, 5.5vw, 68px);
line-height: 1.05; letter-spacing: -0.025em;
color: var(--color-white); margin-bottom: var(--space-lg);
}
.hero-headline .accent { color: var(--color-teal); }
.hero-subheadline {
font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;
color: var(--color-on-dark-text); margin-bottom: var(--space-xl); font-weight: 400;
}
.hero-ctas { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); }
.hero-trust-note { font-size: 13px; color: var(--color-on-dark-muted); font-style: italic; }
/* Dashboard mockup */
.hero-visual { position: relative; }
.hero-dashboard {
background: var(--color-on-dark-surface);
border: 1px solid var(--color-on-dark-border);
border-radius: var(--radius-xl); padding: 24px;
backdrop-filter: blur(4px); box-shadow: var(--shadow-lg);
}
.dashboard-topbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; padding-bottom: 16px;
border-bottom: 1px solid var(--color-on-dark-border);
}
.dashboard-title { font-size: 13px; font-weight: 600; color: var(--color-on-dark-text); }
.dashboard-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-teal); font-weight: 600; }
.dashboard-status::before { content: ''; width: 6px; height: 6px; background: var(--color-teal); border-radius: 50%; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.dash-stat { background: var(--color-on-dark-surface); border-radius: 10px; padding: 14px 12px; text-align: center; border: 1px solid var(--color-on-dark-border); }
.dash-stat-num { font-size: 26px; font-weight: 700; color: var(--color-white); line-height: 1; margin-bottom: 4px; }
.dash-stat-num.teal { color: var(--color-teal); }
.dash-stat-num.amber { color: var(--color-amber); }
.dash-stat-num.green { color: var(--color-green-success); }
.dash-stat-label { font-size: 11px; color: var(--color-on-dark-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.dashboard-frameworks { display: flex; flex-direction: column; gap: 8px; }
.framework-row { display: flex; align-items: center; gap: 12px; background: var(--color-on-dark-surface); border-radius: 8px; padding: 10px 12px; }
.fw-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fw-dot-teal { background: var(--color-teal); }
.fw-dot-cricos { background: var(--color-cricos); }
.fw-dot-elicos { background: var(--color-elicos); }
.fw-dot-amber { background: var(--color-amber); }
.fw-name { flex: 1; font-size: 12px; color: var(--color-on-dark-text); font-weight: 500; }
.fw-bar-track { width: 100px; height: 5px; background: var(--color-on-dark-border); border-radius: 3px; overflow: hidden; }
.fw-bar-fill { height: 100%; border-radius: 3px; }
.fw-bar-teal { background: var(--color-teal); }
.fw-bar-cricos { background: var(--color-cricos); }
.fw-bar-elicos { background: var(--color-elicos); }
.fw-bar-amber { background: var(--color-amber); }
.fw-pct { font-size: 12px; font-weight: 600; color: var(--color-on-dark-secondary); width: 32px; text-align: right; }
.hero-badge {
position: absolute; bottom: -16px; left: -20px;
background: var(--color-white); border-radius: 12px; padding: 12px 16px;
box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; z-index: 2;
}
.hero-badge-icon {
width: 36px; height: 36px; background: var(--color-teal-light);
border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-badge-icon svg { width: 20px; height: 20px; color: var(--color-teal); }
.hero-badge-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--color-navy); line-height: 1.2; }
.hero-badge-text span { font-size: 11.5px; color: var(--color-slate); }
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { display: none; }
.hero-content { max-width: 100%; }
}
/* ── PAIN STRIP — LIGHT ───────────────────────────────────────── */
.pain-strip {
background: var(--color-surface);
padding-block: var(--space-3xl);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.pain-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-teal); text-align: center; margin-bottom: var(--space-md); }
.pain-headline { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 42px); color: var(--color-navy); text-align: center; margin-bottom: var(--space-2xl); line-height: 1.1; letter-spacing: -0.02em; }
.pain-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
.pain-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg); padding: var(--space-xl);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.pain-card:hover { border-color: var(--color-teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pain-card-icon {
width: 72px; height: 72px;
background: var(--color-teal-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-lg);
border: 1px solid var(--color-teal-mid);
}
.pain-card-icon svg { width: 36px; height: 36px; color: var(--color-teal-dark); }
.pain-card h3 { font-size: 17px; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-sm); }
.pain-card p { font-size: 14.5px; line-height: 1.65; color: var(--color-slate); }
.pain-resolution {
text-align: center; padding: var(--space-lg) var(--space-xl);
background: var(--color-teal-light); border: 1.5px solid var(--color-teal-mid); border-radius: var(--radius-md);
}
.pain-resolution p { font-size: 17px; font-weight: 600; color: var(--color-navy); }
.pain-resolution .teal { color: var(--color-teal); }
@media (max-width: 768px) { .pain-cards { grid-template-columns: 1fr; } }
/* ── FRAMEWORKS STRIP ─────────────────────────────────────────── */
.frameworks { background: var(--color-teal-light); padding-block: var(--space-3xl); border-top: 1px solid var(--color-teal-mid); border-bottom: 1px solid var(--color-teal-mid); }
.frameworks-header { text-align: center; margin-bottom: var(--space-2xl); }
.frameworks-header .section-subheading { margin-inline: auto; }
.framework-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.framework-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border-top: 4px solid transparent; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); display: flex; flex-direction: column; }
.framework-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fw-card-rtosure { border-top-color: var(--color-teal); }
.fw-card-cricos { border-top-color: var(--color-cricos); }
.fw-card-elicos { border-top-color: var(--color-elicos); }
.fw-card-brand { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.fw-card-brand.teal { color: var(--color-teal); }
.fw-card-brand.blue { color: var(--color-cricos); }
.fw-card-brand.purple { color: var(--color-elicos); }
.fw-card-audience { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-md); }
.fw-card-framework { font-size: 14px; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-sm); }
.fw-card-desc { font-size: 14px; color: var(--color-slate); line-height: 1.6; margin-bottom: var(--space-lg); }
.fw-checklist { list-style: none; margin-bottom: var(--space-xl); flex: 1; }
.fw-checklist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--color-charcoal); padding: 5px 0; border-bottom: 1px solid var(--color-surface); line-height: 1.45; }
.fw-checklist li:last-child { border-bottom: none; }
.fw-check { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--color-white); flex-shrink: 0; margin-top: 2px; }
.check-teal { background: var(--color-teal); }
.check-blue { background: var(--color-cricos); }
.check-purple { background: var(--color-elicos); }
.fw-link { font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 150ms; }
.fw-link:hover { gap: 8px; }
.fw-link.teal { color: var(--color-teal); }
.fw-link.blue { color: var(--color-cricos); }
.fw-link.purple { color: var(--color-elicos); }
@media (max-width: 900px) { .framework-cards { grid-template-columns: 1fr; } }
/* ── FEATURES ─────────────────────────────────────────────────── */
.features { padding-block: var(--space-3xl); }
.features-header { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--space-2xl); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.feature-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); background: var(--color-white); }
.feature-card:hover { border-color: var(--color-teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-num { font-size: 12px; font-weight: 700; color: var(--color-teal); letter-spacing: 0.06em; margin-bottom: var(--space-sm); }
.feature-icon { width: 48px; height: 48px; background: var(--color-teal-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); border: 1px solid var(--color-teal-mid); }
.feature-icon svg { width: 24px; height: 24px; color: var(--color-teal-dark); }
.feature-card h3 { font-size: 16px; font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-sm); }
.feature-card p { font-size: 14px; line-height: 1.65; color: var(--color-slate); }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
/* ── SOCIAL PROOF ─────────────────────────────────────────────── */
.social-proof { background: var(--color-surface); padding-block: var(--space-3xl); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.proof-header { text-align: center; margin-bottom: var(--space-2xl); }
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.quote-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.quote-stars { color: var(--color-amber); font-size: 14px; letter-spacing: 2px; margin-bottom: var(--space-md); }
.quote-text { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--color-charcoal); margin-bottom: var(--space-lg); }
.quote-attr { display: flex; align-items: center; gap: 12px; }
.quote-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-teal-light); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--color-teal-dark); flex-shrink: 0; border: 2px solid var(--color-teal-mid); }
.quote-name { font-size: 13.5px; font-weight: 700; color: var(--color-navy); display: block; }
.quote-role { font-size: 12.5px; color: var(--color-muted); display: block; }
.proof-placeholder { text-align: center; padding: var(--space-xl); background: var(--color-teal-light); border: 1.5px dashed var(--color-teal-mid); border-radius: var(--radius-lg); margin-top: var(--space-lg); }
.proof-placeholder p { font-size: 14px; color: var(--color-slate); font-style: italic; }
@media (max-width: 900px) { .quotes-grid { grid-template-columns: 1fr; } }
/* ── TEAMS — navy card island on white ────────────────────────── */
.teams-callout { padding-block: var(--space-2xl); }
.teams-inner { background: var(--color-navy); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-3xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); position: relative; overflow: hidden; }
.teams-inner::before { content: ''; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; background: radial-gradient(circle, var(--color-teal-on-dark-bg), transparent 70%); pointer-events: none; }
.teams-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-teal-on-dark-bg); border: 1px solid var(--color-teal-on-dark-border); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-teal); margin-bottom: var(--space-md); }
.teams-content h2 { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 36px); color: var(--color-white); margin-bottom: var(--space-md); letter-spacing: -0.02em; }
.teams-content p { font-size: 15.5px; color: var(--color-on-dark-secondary); line-height: 1.65; max-width: 520px; }
.teams-cta { flex-shrink: 0; }
@media (max-width: 768px) { .teams-inner { flex-direction: column; padding: var(--space-xl); text-align: center; } .teams-badge { margin-inline: auto; } .teams-cta { width: 100%; text-align: center; } }
/* ── SUB-BRAND SELECTOR — LIGHT ───────────────────────────────── */
.sub-brands { background: var(--color-white); padding-block: var(--space-3xl); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.sub-brands-header { text-align: center; margin-bottom: var(--space-2xl); }
.sub-brands-header .section-subheading { margin-inline: auto; }
.sub-brand-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.sub-brand-card { background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); display: flex; flex-direction: column; }
.sub-brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sub-brand-card.rtosure { border-top: 4px solid var(--color-teal); }
.sub-brand-card.cricos { border-top: 4px solid var(--color-cricos); }
.sub-brand-card.elicos { border-top: 4px solid var(--color-elicos); }
.sub-brand-card.rtosure:hover { border-color: var(--color-teal); }
.sub-brand-card.cricos:hover { border-color: var(--color-cricos); }
.sub-brand-card.elicos:hover { border-color: var(--color-elicos); }
.sb-product-name { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 2px; }
.sb-product-name.teal { color: var(--color-teal); }
.sb-product-name.blue { color: var(--color-cricos); }
.sb-product-name.purple { color: var(--color-elicos); }
.sb-audience { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-md); }
.sb-framework-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 4px; margin-bottom: var(--space-md); }
.sb-framework-tag.teal { background: var(--color-teal-light); color: var(--color-teal-dark); }
.sb-framework-tag.blue { background: var(--color-cricos-light); color: var(--color-cricos); }
.sb-framework-tag.purple { background: var(--color-elicos-light); color: var(--color-elicos); }
.sb-desc { font-size: 14px; line-height: 1.65; color: var(--color-slate); margin-bottom: var(--space-lg); flex: 1; }
.sb-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; text-decoration: none; transition: gap 150ms; }
.sb-link:hover { gap: 8px; }
.sb-link.teal { color: var(--color-teal); }
.sb-link.blue { color: var(--color-cricos); }
.sb-link.purple { color: var(--color-elicos); }
.sub-brands-footnote { text-align: center; font-size: 14px; color: var(--color-slate); padding: var(--space-lg) var(--space-xl); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.sub-brands-footnote strong { color: var(--color-charcoal); }
@media (max-width: 900px) { .sub-brand-cards { grid-template-columns: 1fr; } }
/* ── FINAL CTA — teal ─────────────────────────────────────────── */
.final-cta { background: var(--color-teal); padding-block: var(--space-3xl); position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 60% 80% at 10% 50%, var(--color-on-dark-surface-hover) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 30%, var(--color-on-dark-surface) 0%, transparent 60%); pointer-events: none; }
.final-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 680px; margin-inline: auto; }
.final-cta-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-on-dark-text); margin-bottom: var(--space-md); }
.final-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 52px); color: var(--color-white); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.final-cta p { font-size: 17px; color: var(--color-on-dark-text); line-height: 1.65; margin-bottom: var(--space-xl); }
.final-cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.btn-cta-white { background: var(--color-white); color: var(--color-teal-dark); box-shadow: var(--shadow-md); }
.btn-cta-white:hover { background: var(--color-surface); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.final-trust-notes { display: flex; align-items: center; justify-content: center; gap: var(--space-xl); margin-top: var(--space-xl); flex-wrap: wrap; }
.trust-note-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-on-dark-text); }
.trust-check { width: 18px; height: 18px; background: var(--color-on-dark-surface-hover); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--color-white); flex-shrink: 0; }
/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fadeUp 0.65s var(--ease) both; }
.anim-delay-1 { animation-delay: 0.10s; }
.anim-delay-2 { animation-delay: 0.22s; }
.anim-delay-3 { animation-delay: 0.34s; }
.anim-delay-4 { animation-delay: 0.46s; }
</style>
</head>
<body>
<div id="site-header"></div>
<!-- ══════════════════════════════════════════════════════════
SECTION 1 — HERO
══════════════════════════════════════════════════════════ -->
<section class="hero" aria-label="Hero">
<div class="container">
<div class="hero-inner">
<div class="hero-content">
<div class="hero-eyebrow anim-fade-up">
<span class="dot" aria-hidden="true"></span>
<span>Purpose-built for Australian RTOs</span>
</div>
<h1 class="hero-headline anim-fade-up anim-delay-1">
Compliance managed.<br>
Audit ready.<br>
<span class="accent">Every framework covered.</span>
</h1>
<p class="hero-subheadline anim-fade-up anim-delay-2">
RTOSure maps your NVR Standards 2025, ESOS obligations, and National Code requirements into a single compliance management system — with dashboards, risk indicators, evidence registers, and guided workflows built around the frameworks your college is actually regulated by.
</p>
<div class="hero-ctas anim-fade-up anim-delay-3">
<a href="demo.html" class="btn btn-primary btn-lg">Book a Demo</a>
<a href="features.html" class="btn btn-outline-white btn-lg">Watch a walkthrough →</a>
</div>
<p class="hero-trust-note anim-fade-up anim-delay-4">
30-45 minutes. Tailored to your framework. No hard sell.
</p>
</div>
<div class="hero-visual anim-fade-up anim-delay-3" aria-hidden="true">
<div class="hero-dashboard">
<div class="dashboard-topbar">
<span class="dashboard-title">Compliance Dashboard</span>
<span class="dashboard-status">All systems monitored</span>
</div>
<div class="dashboard-stats">
<div class="dash-stat"><div class="dash-stat-num green">94%</div><div class="dash-stat-label">NVR Compliant</div></div>
<div class="dash-stat"><div class="dash-stat-num amber">3</div><div class="dash-stat-label">Items Due</div></div>
<div class="dash-stat"><div class="dash-stat-num teal">147</div><div class="dash-stat-label">Evidence Items</div></div>
</div>
<div class="dashboard-frameworks">
<div class="framework-row"><span class="fw-dot fw-dot-teal"></span><span class="fw-name">NVR Standards 2025</span><div class="fw-bar-track"><div class="fw-bar-fill fw-bar-teal" style="width:94%"></div></div><span class="fw-pct">94%</span></div>
<div class="framework-row"><span class="fw-dot fw-dot-cricos"></span><span class="fw-name">National Code 2018</span><div class="fw-bar-track"><div class="fw-bar-fill fw-bar-cricos" style="width:88%"></div></div><span class="fw-pct">88%</span></div>
<div class="framework-row"><span class="fw-dot fw-dot-elicos"></span><span class="fw-name">ELICOS Standards</span><div class="fw-bar-track"><div class="fw-bar-fill fw-bar-elicos" style="width:100%"></div></div><span class="fw-pct">100%</span></div>
<div class="framework-row"><span class="fw-dot fw-dot-amber"></span><span class="fw-name">ESOS Act Obligations</span><div class="fw-bar-track"><div class="fw-bar-fill fw-bar-amber" style="width:76%"></div></div><span class="fw-pct">76%</span></div>
</div>
</div>
<div class="hero-badge">
<div class="hero-badge-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<polyline points="9 12 11 14 15 10"/>
</svg>
</div>
<div class="hero-badge-text">
<strong>Audit-ready evidence</strong>
<span>Mapped to Standard level</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 2 — PAIN STATEMENT
══════════════════════════════════════════════════════════ -->
<section class="pain-strip" aria-labelledby="pain-heading">
<div class="container">
<p class="pain-label">Sound familiar?</p>
<h2 class="pain-headline" id="pain-heading">
The three problems every RTO<br>compliance manager knows too well.
</h2>
<div class="pain-cards">
<!-- Card 1: Audit deadline pressure -->
<div class="pain-card">
<div class="pain-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<!-- Clock face -->
<circle cx="12" cy="13" r="8"/>
<!-- Clock hands showing urgency — near-deadline position -->
<polyline points="12 9 12 13 15 16"/>
<!-- Warning triangle above clock -->
<path d="M12 2L14.5 6H9.5L12 2Z" fill="currentColor" stroke="none"/>
<!-- Exclamation in triangle -->
<line x1="12" y1="3.5" x2="12" y2="5" stroke="var(--color-white)" stroke-width="1"/>
</svg>
</div>
<h3>ASQA audit risk</h3>
<p>Your next audit notice gives you 30 days. Will your evidence be ready in time? Or will you be pulling files from inboxes and shared drives? How dependable is your strategy?</p>
</div>
<!-- Card 2: Single-person dependency -->
<div class="pain-card">
<div class="pain-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<!-- Person silhouette -->
<circle cx="9" cy="6" r="3"/>
<path d="M4 20v-2a5 5 0 0 1 10 0v2"/>
<!-- Lock / key symbol — knowledge locked to one person -->
<rect x="14.5" y="13" width="6" height="5" rx="1"/>
<path d="M16 13v-2a2 2 0 0 1 4 0v2"/>
<circle cx="17.5" cy="15.5" r="0.75" fill="currentColor" stroke="none"/>
<line x1="17.5" y1="16.25" x2="17.5" y2="17.5"/>
</svg>
</div>
<h3>Compliance lives in one person</h3>
<p>When your compliance manager is sick, on leave, or moves on — does your college's regulatory knowledge go with them? How do you safeguard against this risk?</p>
</div>
<!-- Card 3: Fragmented spreadsheets -->
<div class="pain-card">
<div class="pain-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<!-- Base table grid -->
<rect x="2" y="3" width="20" height="18" rx="2"/>
<line x1="2" y1="8" x2="22" y2="8"/>
<line x1="2" y1="13" x2="22" y2="13"/>
<line x1="8" y1="8" x2="8" y2="21"/>
<line x1="15" y1="8" x2="15" y2="21"/>
<!-- Broken / missing cell — represents fragmentation -->
<!-- Red X in bottom-right cell -->
<line x1="17" y1="15" x2="20" y2="18" stroke="var(--color-amber)" stroke-width="1.8"/>
<line x1="20" y1="15" x2="17" y2="18" stroke="var(--color-amber)" stroke-width="1.8"/>
<!-- Scatter dots outside grid — data living elsewhere -->
<circle cx="1" cy="13" r="1" fill="var(--color-teal-dark)" stroke="none"/>
<circle cx="23" cy="8" r="1" fill="var(--color-teal-dark)" stroke="none"/>
</svg>
</div>
<h3>Spreadsheets and guesswork</h3>
<p>Trainer currency records in email. Processes and Checklists in shared drives. <b>Registers in someone's desktop folder!</b> This is not compliance management. This is compliance risk.</p>
</div>
</div>
<div class="pain-resolution">
<p>RTOSure was built <span class="teal">to address exactly this problem.</span></p>
<p><span class="teal">Solve your compliance headaches. </span><b>For good this time!</b></p>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 3 — COMPLIANCE FRAMEWORKS
══════════════════════════════════════════════════════════ -->
<section class="frameworks" aria-labelledby="frameworks-heading">
<div class="container">
<div class="frameworks-header">
<span class="section-label">Regulatory coverage</span>
<h2 class="section-heading" id="frameworks-heading">
Built around the frameworks you're<br>actually regulated by.
</h2>
<p class="section-subheading">Not configured. Not adapted. Built in — from the regulatory text up.</p>
</div>
<div class="framework-cards">
<div class="framework-card fw-card-rtosure">
<div class="fw-card-brand teal">RTOSure</div>
<div class="fw-card-audience">Domestic RTOs</div>
<div class="fw-card-framework">NVR Standards 2025</div>
<p class="fw-card-desc">Full coverage of all 4 Quality Areas, 19 Standards, and 3 Compliance Requirement Divisions — including FPPR obligations.</p>
<ul class="fw-checklist">
<li><span class="fw-check check-teal" aria-hidden="true"></span>All 19 NVR Standards mapped</li>
<li><span class="fw-check check-teal" aria-hidden="true"></span>Compliance Requirements Divisions 13</li>
<li><span class="fw-check check-teal" aria-hidden="true"></span>Fit and Proper Person Requirements</li>
<li><span class="fw-check check-teal" aria-hidden="true"></span>Risk indicators built to Standard level</li>
<li><span class="fw-check check-teal" aria-hidden="true"></span>AVETMISS reporting compliance</li>
</ul>
<a href="rtosure.html" class="fw-link teal">Explore NVR compliance →</a>
</div>
<div class="framework-card fw-card-cricos">
<div class="fw-card-brand blue">CRICOSSure</div>
<div class="fw-card-audience">CRICOS Providers</div>
<div class="fw-card-framework">ESOS Act &amp; National Code 2018</div>
<p class="fw-card-desc">Complete coverage of the ESOS framework and all 11 National Code 2018 Standards for CRICOS-registered providers.</p>
<ul class="fw-checklist">
<li><span class="fw-check check-blue" aria-hidden="true"></span>All 11 National Code Standards</li>
<li><span class="fw-check check-blue" aria-hidden="true"></span>ESOS Act obligations</li>
<li><span class="fw-check check-blue" aria-hidden="true"></span>PRISMS reporting workflows</li>
<li><span class="fw-check check-blue" aria-hidden="true"></span>CoE management</li>
<li><span class="fw-check check-blue" aria-hidden="true"></span>Student welfare &amp; support obligations</li>
</ul>
<a href="cricossure.html" class="fw-link blue">Explore CRICOS compliance →</a>
</div>
<div class="framework-card fw-card-elicos">
<div class="fw-card-brand purple">ELICOSSure</div>
<div class="fw-card-audience">ELICOS Colleges</div>
<div class="fw-card-framework">ELICOS Standards 2018</div>
<p class="fw-card-desc">Purpose-built for English Language Intensive Courses for Overseas Students — Parts A through E, with course-type-specific compliance built in.</p>
<ul class="fw-checklist">
<li><span class="fw-check check-purple" aria-hidden="true"></span>Parts AE fully mapped</li>
<li><span class="fw-check check-purple" aria-hidden="true"></span>GE, EAP, EHSP and IELTS Prep compliance</li>
<li><span class="fw-check check-purple" aria-hidden="true"></span>Teacher qualification tracking</li>
<li><span class="fw-check check-purple" aria-hidden="true"></span>Contact hours and class size compliance</li>
<li><span class="fw-check check-purple" aria-hidden="true"></span>Under-18 welfare obligations</li>
</ul>
<a href="elicossure.html" class="fw-link purple">Explore ELICOS compliance →</a>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 4 — FEATURES OVERVIEW
══════════════════════════════════════════════════════════ -->
<section class="features section" aria-labelledby="features-heading">
<div class="container">
<div class="features-header">
<span class="section-label">Platform capabilities</span>
<h2 class="section-heading" id="features-heading">
Everything a compliance-managed RTO needs.<br>Nothing it doesn't.
</h2>
<p class="section-subheading">Specific capabilities, each built around a compliance problem your team deals with every day.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-num">01</div>
<div class="feature-icon" aria-hidden="true">
<!-- Dashboard / gauge -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 12a9 9 0 1 1 9 9"/>
<path d="M12 3v3M3 12H6M19.8 7.2l-2.1 2.1"/>
<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>
<line x1="12" y1="12" x2="15.5" y2="8.5" stroke-width="2"/>
</svg>
</div>
<h3>Compliance Dashboards</h3>
<p>Know your compliance status without asking anyone. A live dashboard maps every obligation across your registered frameworks — filter by Standard, Quality Area, Staff Member or Document Type.</p>
</div>
<div class="feature-card">
<div class="feature-num">02</div>
<div class="feature-icon" aria-hidden="true">
<!-- Checklist with tick -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 11 12 14 22 4"/>
<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
</svg>
</div>
<h3>Processes, Checklists &amp; Workflows</h3>
<p>Compliance tasks done correctly, every time, by anyone. Guided process workflows walk your team through compliance tasks step by step — built around the specific Standards that apply to your college.</p>
</div>
<div class="feature-card">
<div class="feature-num">03</div>
<div class="feature-icon" aria-hidden="true">
<!-- Document form -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="16" y1="13" x2="8" y2="13"/>
<line x1="16" y1="17" x2="8" y2="17"/>
<line x1="10" y1="9" x2="8" y2="9"/>
</svg>
</div>
<h3>Forms &amp; Feedback Captured</h3>
<p>Evidence captured at the point it's created. Built-in, customisable feedback forms and survey inputs capture evidence directly against the relevant Standard — at the moment the activity happens. No manual filing or copying from one place to another.</p>
</div>
<div class="feature-card">
<div class="feature-num">04</div>
<div class="feature-icon" aria-hidden="true">
<!-- Folder with plus -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
</div>
<h3>Evidence Registers &amp; Logs </h3>
<p>Your audit response starts here. Documents, policies, and evidence stored, mapped, and retrievable in the format auditors expect — linked to the exact Standard they support.</p>
</div>
<div class="feature-card">
<div class="feature-num">05</div>
<div class="feature-icon" aria-hidden="true">
<!-- Bell with alert dot -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 01-3.46 0"/>
<circle cx="18" cy="5" r="2.5" fill="var(--color-amber)" stroke="none"/>
</svg>
</div>
<h3>Monitoring &amp; Actionable Alerts</h3>
<p>Stop things falling through the cracks. Automated actions and alerts for upcoming deadlines, expiring records, and compliance gaps — before they become audit findings.</p>
</div>
<div class="feature-card">
<div class="feature-num">06</div>
<div class="feature-icon" aria-hidden="true">
<!-- Bar chart with trend line -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="20" x2="18" y2="10"/>
<line x1="12" y1="20" x2="12" y2="4"/>
<line x1="6" y1="20" x2="6" y2="14"/>
<line x1="2" y1="20" x2="22" y2="20"/>
<polyline points="6 14 12 9 18 12" stroke="currentColor" stroke-width="1.5"/>
<circle cx="6" cy="14" r="1.5" fill="currentColor" stroke="none"/>
<circle cx="12" cy="9" r="1.5" fill="currentColor" stroke="none"/>
<circle cx="18" cy="12" r="1.5" fill="currentColor" stroke="none"/>
</svg>
</div>
<h3>Risk Indicators</h3>
<p>Know your risks before ASQA does. Purpose-built risk indicator frameworks — mapped to NVR, ESOS, National Code, and ELICOS — give you structured visibility into compliance exposure.</p>
</div>
</div>
<div style="text-align:center;margin-top:var(--space-2xl)">
<a href="features.html" class="btn btn-outline btn-lg">See all features →</a>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 5 — SOCIAL PROOF
══════════════════════════════════════════════════════════ -->
<section class="social-proof" aria-labelledby="proof-heading">
<div class="container">
<div class="proof-header">
<span class="section-label">What our clients say</span>
<h2 class="section-heading" id="proof-heading">Built by people who understand<br>the sector. Trusted by those who run it.</h2>
</div>
<div class="quotes-grid">
<div class="quote-card">
<div class="quote-stars" aria-label="5 stars">★★★★★</div>
<p class="quote-text">"We can see how this will help us go into our ASQA audit with confidence for the first time. Everything the auditor asks for is already in RTOSure."</p>
<div class="quote-attr">
<div class="quote-avatar" aria-hidden="true">CM</div>
<div><span class="quote-name">Compliance Manager</span><span class="quote-role">Australian RTO, Victoria</span></div>
</div>
</div>
<div class="quote-card">
<div class="quote-stars" aria-label="5 stars">★★★★★</div>
<p class="quote-text">"Our trainer currency records live in four different places. Now they can be in the one system, mapped to Standard 1.4. It's a week to set up and will save us hours every month."</p>
<div class="quote-attr">
<div class="quote-avatar" aria-hidden="true">RD</div>
<div><span class="quote-name">RTO Director</span><span class="quote-role">CRICOS Provider, NSW</span></div>
</div>
</div>
<div class="quote-card">
<div class="quote-stars" aria-label="5 stars">★★★★★</div>
<p class="quote-text">"We're a small RTO. We don't have a dedicated compliance team. RTOSure effectively gave us the ability to act like one of those bigger colleges that have a lot more resources at hand. What a great equaliser!"</p>
<div class="quote-attr">
<div class="quote-avatar" aria-hidden="true">CE</div>
<div><span class="quote-name">Chief Executive</span><span class="quote-role">ELICOS College, QLD</span></div>
</div>
</div>
</div>
<div class="proof-placeholder">
<p>Customer case studies and verified outcomes are being finalised for launch. <br>Quotes above are illustrative of the outcome language we are getting from our early adopters.</p>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 6 — TEAMS INTEGRATION (dark card on white)
══════════════════════════════════════════════════════════ -->
<section class="teams-callout section-sm" aria-label="TEAMS integration">
<div class="container">
<div class="teams-inner">
<div class="teams-content">
<div class="teams-badge">Already using TEAMS?</div>
<h2>RTOSure connects directly <br>with your data in TEAMS.</h2>
<p>Students and their Enrolments, Staff records, Employer relationships and Agent details flow through automatically — no double entry, no manual imports. Your existing data. Your new compliance system. Zero friction.</p>
</div>
<div class="teams-cta">
<a href="integrations.html" class="btn btn-outline-white btn-lg">See how the integration works →</a>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 7 — SUB-BRAND SELECTOR
══════════════════════════════════════════════════════════ -->
<section class="sub-brands section" aria-labelledby="subbrands-heading">
<div class="container">
<div class="sub-brands-header">
<span class="section-label">Which frameworks apply to your college?</span>
<h2 class="section-heading" id="subbrands-heading">RTOSure covers all three.</h2>
<p class="section-subheading">Each compliance layer is purpose-mapped — not configured in. Choose the combination that matches your registration.</p>
</div>
<div class="sub-brand-cards">
<div class="sub-brand-card rtosure">
<div class="sb-product-name teal">RTOSure</div>
<div class="sb-audience">Domestic RTOs</div>
<div class="sb-framework-tag teal">NVR Standards 2025</div>
<p class="sb-desc">ASQA audits, trainer currency, AVETMISS, FPPR compliance. The complete NVR Standards 2025 framework — mapped to your obligations from day one.</p>
<a href="rtosure.html" class="sb-link teal">Explore RTOSure →</a>
</div>
<div class="sub-brand-card cricos">
<div class="sb-product-name blue">CRICOSSure</div>
<div class="sb-audience">CRICOS Providers</div>
<div class="sb-framework-tag blue">ESOS Act + National Code 2018</div>
<p class="sb-desc">International student compliance, PRISMS reporting, CoE management, welfare obligations. Every ESOS and National Code requirement in one place.</p>
<a href="cricossure.html" class="sb-link blue">Explore CRICOSSure →</a>
</div>
<div class="sub-brand-card elicos">
<div class="sb-product-name purple">ELICOSSure</div>
<div class="sb-audience">ELICOS Colleges</div>
<div class="sb-framework-tag purple">ELICOS Standards 2018</div>
<p class="sb-desc">English Language course compliance, teacher qualifications, contact hours, under-18 welfare. Parts AE of the ELICOS Standards — fully mapped and monitored.</p>
<a href="elicossure.html" class="sb-link purple">Explore ELICOSSure →</a>
</div>
</div>
<div class="sub-brands-footnote">
<strong>Many Australian colleges operate under two or all three frameworks simultaneously.</strong> <br>RTOSure covers them all in one system — with clean, separate compliance layers for each regulatory obligation.
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 8 — FINAL CTA
══════════════════════════════════════════════════════════ -->
<section class="final-cta" aria-labelledby="cta-heading">
<div class="container">
<div class="final-cta-inner">
<p class="final-cta-label">Get started</p>
<h2 id="cta-heading">Stop compliance chaos in spreadsheets <br>and shared drives.<br><br>Start managing it like a pro using RTOSure.</h2>
<p>Book a 30-45 minute demo and we'll show you RTOSure mapped to the frameworks your college actually operates under — NVR, ESOS, National Code, or ELICOS. No generic walkthrough. No hard sell.</p>
<div class="final-cta-actions">
<a href="demo.html" class="btn btn-cta-white btn-lg">Book a Demo</a>
<a href="features.html" class="btn btn-outline-white btn-lg">Explore the platform →</a>
</div>
<div class="final-trust-notes">
<div class="trust-note-item"><span class="trust-check" aria-hidden="true"></span>30-45 minute session</div>
<div class="trust-note-item"><span class="trust-check" aria-hidden="true"></span>Tailored to your frameworks</div>
<div class="trust-note-item"><span class="trust-check" aria-hidden="true"></span>No commitment required</div>
<div class="trust-note-item"><span class="trust-check" aria-hidden="true"></span>Australian-based team</div>
</div>
</div>
</div>
</section>
<div id="site-footer"></div>
<script>
(function() {
function loadComponent(id, file) {
var el = document.getElementById(id);
if (!el) return;
fetch(file)
.then(function(r) { if (!r.ok) throw new Error(file); return r.text(); })
.then(function(html) {
el.innerHTML = html;
el.querySelectorAll('script').forEach(function(s) {
var n = document.createElement('script');
n.textContent = s.textContent;
document.head.appendChild(n);
});
})
.catch(function(e) { console.warn('Component load failed:', e.message); });
}
loadComponent('site-header', 'header.html');
loadComponent('site-footer', 'footer.html');
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.pain-card, .framework-card, .feature-card, .quote-card, .sub-brand-card').forEach(function(el) {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(el);
});
})();
</script>
</body>
</html>