oliver
174 lines
7.3 KiB
HTML
174 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Legal | my-biz.app</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
:root {
|
|
--bg: #efebe9;
|
|
--surf1: #e8e0da;
|
|
--card: #fff3e0;
|
|
--lift: #f5ece4;
|
|
--bg-deep: #3e2723;
|
|
--border: rgba(93, 64, 55, 0.25);
|
|
--grey: #a1887f;
|
|
--silver: #6d4c41;
|
|
--light: #5d4037;
|
|
--gold: #e65100;
|
|
--gold-hi: #fb8c00;
|
|
--gold-lo: #bf360c;
|
|
--gold-glow: rgba(230, 81, 0, 0.18);
|
|
--white: #3e2723;
|
|
}
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--light);
|
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
line-height: 1.7;
|
|
}
|
|
a { color: inherit; text-decoration: none; }
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 62px;
|
|
padding: 0 8vw;
|
|
background: rgba(255, 243, 224, 0.94);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.nav-logo img { height: 36px; width: auto; display: block; }
|
|
.nav-links { display: flex; gap: 18px; align-items: center; }
|
|
.nav-links a { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); }
|
|
.hero, section, footer { padding: 84px 8vw; }
|
|
.wrap { max-width: 980px; margin: 0 auto; }
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
background: rgba(230, 81, 0, 0.08);
|
|
border: 1px solid rgba(230, 81, 0, 0.18);
|
|
color: var(--gold);
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
h1, h2 {
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
color: var(--white);
|
|
line-height: 1.1;
|
|
}
|
|
h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 80%; margin-top: 18px; }
|
|
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
|
|
.lead { color: var(--silver); max-width: 62ch; margin-top: 18px; }
|
|
.legal-stack { display: grid; gap: 20px; }
|
|
.legal-card {
|
|
padding: 28px;
|
|
border-radius: 28px;
|
|
background: rgba(255, 243, 224, 0.86);
|
|
border: 1px solid rgba(93, 64, 55, 0.12);
|
|
box-shadow: 0 18px 44px rgba(62, 39, 35, 0.08);
|
|
}
|
|
.legal-card p, .legal-card li { color: var(--silver); }
|
|
.legal-card ul { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
|
|
.legal-card li { position: relative; padding-left: 18px; }
|
|
.legal-card li::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.65em;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--gold-lo), var(--gold), var(--gold-hi));
|
|
}
|
|
footer { background: var(--bg-deep); border-top: 3px solid var(--gold); }
|
|
.footer-row {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.footer-logo img { height: 34px; width: auto; display: block; }
|
|
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
|
|
.footer-links a, .footer-row span { color: var(--grey); font-size: 0.84rem; }
|
|
@media (max-width: 900px) {
|
|
nav, .hero, section, footer { padding-left: 5vw; padding-right: 5vw; }
|
|
h1 { max-width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a class="nav-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
|
<div class="nav-links">
|
|
<a href="about.html">About Us</a>
|
|
<a href="legal.html">Legal</a>
|
|
<a href="index.html">Home</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="hero">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Legal</span>
|
|
<h1>We reorganized the legal area.</h1>
|
|
<p class="lead">
|
|
This page brings together the core legal and policy information for my-biz.app in one place.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap legal-stack">
|
|
<div class="legal-card" id="imprint">
|
|
<h2>Imprint</h2>
|
|
<p>
|
|
Placeholder company information for my-biz.app. Replace this block with the legal entity name, registered address, company registration details, and official contact details required for your jurisdiction.
|
|
</p>
|
|
</div>
|
|
<div class="legal-card" id="terms">
|
|
<h2>Terms of Service</h2>
|
|
<p>
|
|
These terms describe the use of the my-biz.app website, trial flows, and service interactions. Final legal language should be reviewed and approved before publication.
|
|
</p>
|
|
<ul>
|
|
<li>Use of the platform and site materials.</li>
|
|
<li>Service availability and support expectations.</li>
|
|
<li>Responsibilities for customer-managed environments.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="legal-card" id="privacy">
|
|
<h2>Privacy and Cookies</h2>
|
|
<p>
|
|
This section covers how contact form submissions, trial requests, analytics-related activity, and cookies are handled across the site.
|
|
</p>
|
|
<ul>
|
|
<li>Information collected through contact and trial forms.</li>
|
|
<li>How operational and communication data is used.</li>
|
|
<li>How cookies and similar technologies support the site experience.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="footer-row">
|
|
<a class="footer-logo" href="index.html"><img src="img/logo.svg" alt="my-biz.app" /></a>
|
|
<div class="footer-links">
|
|
<a href="legal.html#privacy">Privacy</a>
|
|
<a href="legal.html#terms">Terms</a>
|
|
<a href="legal.html#imprint">Imprint</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|