Files
fraxlenet/terms.php
T

261 lines
12 KiB
PHP

<?php
// Terms and Conditions page
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms &amp; Conditions - Fraxle.net</title>
<meta name="description" content="The terms and conditions for using the Fraxle.net website and the web design, tech support and maintenance services provided by Fraxle.net.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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>
</head>
<body>
<!-- ===================== NAV ===================== -->
<header class="site-header" id="site-header">
<nav class="nav-container">
<a href="index.php" class="nav-logo">
<span class="logo-icon">🧙</span>
<span class="logo-text">Fraxle<span class="logo-dot">.net</span></span>
</a>
<ul class="nav-links" id="nav-links">
<li><a href="index.php#services">Services</a></li>
<li><a href="index.php#about">About</a></li>
<li><a href="index.php#projects">Projects</a></li>
<li><a href="estimates.php">Estimates</a></li>
<li><a href="index.php#contact" class="btn nav-cta">Get in Touch</a></li>
</ul>
<button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</nav>
</header>
<!-- ===================== HERO ===================== -->
<section class="terms-hero">
<div class="hero-orbs">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="terms-hero-content">
<p class="hero-eyebrow">✦ The Fine Print ✦</p>
<h1 class="terms-hero-title">Terms &amp; <span>Conditions</span></h1>
<p class="terms-hero-lead">The everyday rules of the realm - covering how this website works and the services Fraxle.net provides. Plain English, no jargon spells.</p>
</div>
<div class="terms-hero-wave">
<svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0,40 C300,80 900,0 1440,50 L1440,80 L0,80 Z" fill="var(--white)"/>
</svg>
</div>
</section>
<!-- ===================== TERMS CONTENT ===================== -->
<section class="section-pad">
<div class="terms-body">
<span class="terms-updated"><i class="fas fa-calendar-day"></i> Last updated: <?= date('j F Y') ?></span>
<div class="terms-section">
<h2><span class="terms-num">01</span> Who We Are</h2>
<p>This website (fraxle.net) and the services described on it are operated by <strong>Fraxle.net</strong> ("we", "us", "our"), a small independent web &amp; technology business based in Oxfordshire, United Kingdom. You can reach us any time at <a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>.</p>
<p>By using this website or engaging our services, you agree to these Terms &amp; Conditions. If you don't agree with them, please don't use the site or services.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">02</span> Using This Website</h2>
<p>You're welcome to browse and use this website for lawful purposes. In return, you agree not to:</p>
<ul>
<li>Use the site in any way that breaks UK law or infringes anyone else's rights.</li>
<li>Attempt to gain unauthorised access to the site, its server, or any connected systems.</li>
<li>Introduce viruses, malware, or any other harmful or disruptive code.</li>
<li>Misuse the contact form to send spam, abusive, or fraudulent messages.</li>
</ul>
<p>We may update, change, or withdraw any part of the website at any time without notice.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">03</span> Our Services</h2>
<p>Fraxle.net provides web design and build, technology support, and ongoing maintenance services. Details of typical packages and pricing are shown on our <a href="estimates.php">Estimates</a> page.</p>
<ul>
<li>All prices and estimates shown are guides only and may vary depending on the specifics of your project.</li>
<li>A formal quote will be provided and agreed before any chargeable work begins.</li>
<li>The exact scope, deliverables, and timescales for each project will be confirmed in writing (for example by email) before we start.</li>
</ul>
</div>
<div class="terms-section">
<h2><span class="terms-num">04</span> Quotes, Payment &amp; Cancellation</h2>
<ul>
<li>Quotes are valid for 30 days from the date they are issued unless stated otherwise.</li>
<li>For larger projects we may ask for a deposit before work begins, with the balance due on completion.</li>
<li>Hourly support is charged at the rate agreed beforehand, with a minimum of one hour.</li>
<li>Monthly care plans ("Protection Charms") are billed monthly and can be cancelled with 30 days' notice.</li>
<li>Invoices are payable within 14 days unless otherwise agreed.</li>
</ul>
</div>
<div class="terms-section">
<h2><span class="terms-num">05</span> Intellectual Property</h2>
<p>The content, branding, mascots, and design of this website belong to Fraxle.net and may not be copied or reused without permission.</p>
<p>Once a project is completed and paid for in full, you own the final deliverables we create specifically for you. Third-party assets (such as stock images, fonts, plugins, or software) remain subject to their own licences.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">06</span> Third-Party Services</h2>
<p>Some projects rely on third-party platforms and services - for example web hosting, domain registrars, WordPress, Shopify, or payment providers. These are governed by their own terms, and we aren't responsible for changes, outages, or issues caused by those third parties.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">07</span> Liability</h2>
<p>We take great care in the work we do, but we can't guarantee that the website or any service will always be uninterrupted or completely error-free.</p>
<p>To the extent permitted by law, Fraxle.net is not liable for any indirect or consequential loss arising from use of this website or our services. Nothing in these terms limits our liability for anything that cannot lawfully be limited.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">08</span> Privacy</h2>
<p>Any personal details you share with us (for example through the contact form) are used only to respond to your enquiry and provide the services you've requested. We don't sell your data, and we keep it only as long as needed. If you'd like your details removed, just email us at <a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">09</span> Changes to These Terms</h2>
<p>We may update these Terms &amp; Conditions from time to time. The latest version will always be available on this page, with the "last updated" date shown above.</p>
</div>
<div class="terms-section">
<h2><span class="terms-num">10</span> Governing Law</h2>
<p>These terms are governed by the laws of England and Wales, and any disputes will be subject to the exclusive jurisdiction of the courts of England and Wales.</p>
</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>.
</div>
</div>
</section>
<!-- ===================== FOOTER ===================== -->
<footer class="site-footer">
<div class="container">
<p class="footer-logo">Fraxle<span>.net</span></p>
<p class="footer-tagline">Friendly web &amp; tech for small businesses</p>
<p class="footer-links"><a href="terms.php">Terms &amp; Conditions</a></p>
<p class="footer-copy">&copy; <?= date('Y') ?> Fraxle.net All rights reserved.</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>