4.2.3 - CTA footer, How it works

This commit is contained in:
2026-05-06 17:42:43 +12:00
parent 6d021e05ea
commit ad9df7578a
19 changed files with 621 additions and 86 deletions
+64 -30
View File
@@ -9,51 +9,21 @@
<link rel="apple-touch-icon" href="/images/goodwalk-favicon-192.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Readex+Pro:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap"
/>
<link
href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Readex+Pro:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap"
rel="stylesheet"
media="print"
onload="this.media='all'"
/>
<noscript>
<link
href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Readex+Pro:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
</noscript>
<link
rel="preconnect"
href="https://cdnjs.cloudflare.com"
crossorigin="anonymous"
/>
<link
rel="preload"
as="style"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
media="print"
onload="this.media='all'"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<noscript>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</noscript>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K7TLSFJVP1"></script>
<script>
@@ -62,9 +32,73 @@
gtag('js', new Date());
gtag('config', 'G-K7TLSFJVP1');
</script>
<style>
.no-js-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(17, 20, 24, 0.58);
}
.no-js-card {
width: min(100%, 560px);
padding: 32px 28px;
border-radius: 24px;
background: #fff;
box-shadow: 0 24px 60px rgba(17, 20, 24, 0.2);
text-align: left;
font-family: 'Readex Pro', system-ui, sans-serif;
color: #213021;
}
.no-js-kicker {
display: inline-block;
margin-bottom: 14px;
padding: 6px 10px;
border-radius: 999px;
background: #f3ecd9;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #213021;
}
.no-js-card h1 {
margin: 0 0 12px;
font-family: 'Unbounded', system-ui, sans-serif;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.05;
letter-spacing: -0.04em;
color: #213021;
}
.no-js-card p {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: #4c5056;
}
</style>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<noscript>
<div class="no-js-overlay" role="alertdialog" aria-labelledby="no-js-title" aria-describedby="no-js-copy">
<div class="no-js-card">
<span class="no-js-kicker">JavaScript Required</span>
<h1 id="no-js-title">Please enable JavaScript to use this site.</h1>
<p id="no-js-copy">
Goodwalk relies on JavaScript for key parts of the site, including the booking and contact forms.
Please turn JavaScript back on in your browser settings and reload the page.
</p>
</div>
</div>
</noscript>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>