Make seperate css & js
This commit is contained in:
@@ -13,114 +13,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<style>
|
||||
/* ---- Terms page specific styles ---- */
|
||||
.terms-hero {
|
||||
background: linear-gradient(145deg, var(--purple-deep) 0%, var(--purple-mid) 55%, #5B21B6 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 140px 0 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.terms-hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.terms-hero-content .hero-eyebrow { margin-bottom: 16px; }
|
||||
.terms-hero-title {
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(2.4rem, 5vw, 3.8rem);
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.terms-hero-title span {
|
||||
background: linear-gradient(135deg, var(--orange), var(--gold));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.terms-hero-lead {
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.terms-hero-wave {
|
||||
position: absolute;
|
||||
bottom: -1px; left: 0; right: 0;
|
||||
z-index: 3;
|
||||
line-height: 0;
|
||||
}
|
||||
.terms-hero-wave svg { display: block; width: 100%; height: 80px; }
|
||||
|
||||
.terms-body {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.terms-updated {
|
||||
display: inline-block;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--purple-bright);
|
||||
background: var(--purple-light);
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.terms-section { margin-bottom: 40px; }
|
||||
.terms-section h2 {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
color: var(--purple-deep);
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
.terms-section h2 .terms-num {
|
||||
font-size: 1rem;
|
||||
color: var(--orange);
|
||||
font-weight: 800;
|
||||
}
|
||||
.terms-section p { margin-bottom: 14px; line-height: 1.8; color: var(--text); }
|
||||
.terms-section ul {
|
||||
list-style: none;
|
||||
margin: 0 0 14px;
|
||||
padding: 0;
|
||||
}
|
||||
.terms-section ul li {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.terms-section ul li::before {
|
||||
content: "\2728";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.terms-section a { color: var(--purple-bright); text-decoration: underline; }
|
||||
.terms-section a:hover { color: var(--orange); }
|
||||
.terms-note {
|
||||
background: var(--gray-50);
|
||||
border: 1px solid var(--gray-200);
|
||||
border-left: 4px solid var(--orange);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 18px 22px;
|
||||
margin-top: 50px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--gray-600);
|
||||
line-height: 1.7;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/terms.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -240,7 +133,7 @@
|
||||
</div>
|
||||
|
||||
<div class="terms-note">
|
||||
<i class="fas fa-circle-info"></i> These terms are provided as a friendly, plain-English summary and don't constitute legal advice. For anything business-critical, it's always worth checking with a qualified professional. Got a question? Drop us a line at <a href="mailto:wizard@fraxle.net" style="color:var(--purple-bright);">wizard@fraxle.net</a>.
|
||||
<i class="fas fa-circle-info"></i> These terms are provided as a friendly, plain-English summary and don't constitute legal advice. For anything business-critical, it's always worth checking with a qualified professional. Got a question? Drop us a line at <a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user