717 lines
No EOL
20 KiB
HTML
717 lines
No EOL
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Deep Petrol – Community Portal</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
|
||
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
|
||
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
|
||
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
|
||
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.2rem);
|
||
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
|
||
|
||
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
|
||
--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
|
||
--space-12: 3rem; --space-16: 4rem;
|
||
|
||
--radius-sm: 0.4rem; --radius-md: 0.8rem;
|
||
--radius-lg: 1rem; --radius-xl: 1.4rem;
|
||
|
||
--font-body: "Inter", system-ui, sans-serif;
|
||
--font-display: "Instrument Serif", Georgia, serif;
|
||
|
||
--shadow-sm: 0 2px 8px rgba(14, 37, 43, 0.09);
|
||
--shadow-md: 0 18px 42px rgba(14, 37, 43, 0.14);
|
||
--transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
||
/* Light theme – full palette */
|
||
--color-bg: #f4f6f5;
|
||
--color-surface: #ffffff;
|
||
--color-surface-2: #edf3f2;
|
||
--color-surface-3: #dde7e5;
|
||
--color-border: #bfd0cd;
|
||
--color-divider: #d6e0de;
|
||
|
||
--color-text: #19353a;
|
||
--color-text-muted: #4b666a;
|
||
--color-text-faint: #6f8689;
|
||
|
||
--color-primary: #0f5c63; /* deep petrol */
|
||
--color-primary-soft: #e2eef0;
|
||
--color-primary-strong: #0b4b51;
|
||
--color-on-primary: #f7fbfb;
|
||
|
||
--color-secondary: #327087; /* cooler support */
|
||
--color-secondary-soft: #e1edf2;
|
||
--color-on-secondary: #f7fbfb;
|
||
|
||
--color-accent: #c46f34; /* warm complement */
|
||
--color-accent-soft: #f7e5d8;
|
||
--color-accent-strong: #9a5328;
|
||
--color-on-accent: #201510;
|
||
|
||
--color-support: #7d4bb3; /* tertiary for tags/charts */
|
||
--color-support-soft: #efe6fa;
|
||
--color-on-support: #1e102f;
|
||
|
||
--color-link: #0b6d7c;
|
||
|
||
--color-success: #2f7d57;
|
||
--color-success-soft: #e1f1e7;
|
||
--color-warning: #9a6a12;
|
||
--color-warning-soft: #f6ecd2;
|
||
--color-danger: #9b3f54;
|
||
--color-danger-soft: #f4dde2;
|
||
--color-info: #3c6ca8;
|
||
--color-info-soft: #e0ebf8;
|
||
|
||
--hero-a: rgba(15, 92, 99, 0.10);
|
||
--hero-b: rgba(196, 111, 52, 0.12);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
line-height: 1.6;
|
||
color: var(--color-text);
|
||
background:
|
||
radial-gradient(circle at top left, var(--hero-a), transparent 30%),
|
||
radial-gradient(circle at top right, var(--hero-b), transparent 28%),
|
||
var(--color-bg);
|
||
}
|
||
|
||
a {
|
||
color: var(--color-link);
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
img, svg {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.shell {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.wrap {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: var(--space-6) var(--space-8);
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
header.topbar {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
border-bottom: 1px solid var(--color-divider);
|
||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||
}
|
||
|
||
header .inner {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: var(--space-5) var(--space-8) var(--space-5);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.logo {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 12px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||
color: var(--color-on-primary);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.brand strong {
|
||
display: block;
|
||
font-size: var(--text-sm);
|
||
}
|
||
.brand span {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
nav.topnav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
font-size: var(--text-sm);
|
||
}
|
||
nav.topnav a {
|
||
color: var(--color-text-muted);
|
||
}
|
||
nav.topnav a[aria-current="page"] {
|
||
color: var(--color-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
main.layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
|
||
gap: var(--space-8);
|
||
align-items: stretch;
|
||
margin-top: var(--space-6);
|
||
}
|
||
|
||
.hero-panel {
|
||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-8);
|
||
box-shadow: var(--shadow-md);
|
||
border: 1px solid var(--color-border);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
margin-bottom: var(--space-4);
|
||
padding: 0.35rem 0.7rem;
|
||
border-radius: 999px;
|
||
background: var(--color-primary-soft);
|
||
color: var(--color-primary-strong);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero-eyebrow span.dot {
|
||
width: 9px;
|
||
height: 9px;
|
||
border-radius: 999px;
|
||
background: var(--color-primary);
|
||
}
|
||
|
||
h1 {
|
||
margin: 0 0 var(--space-4);
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-2xl);
|
||
line-height: 1.05;
|
||
max-width: 15ch;
|
||
}
|
||
|
||
p.lead {
|
||
margin: 0 0 var(--space-5);
|
||
color: var(--color-text-muted);
|
||
max-width: 60ch;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.btn {
|
||
font: inherit;
|
||
border-radius: 999px;
|
||
padding: 0.9rem 1.2rem;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition:
|
||
transform var(--transition),
|
||
background var(--transition),
|
||
border-color var(--transition),
|
||
color var(--transition);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--color-primary);
|
||
color: var(--color-on-primary);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--color-surface-2);
|
||
color: var(--color-text);
|
||
border-color: var(--color-border);
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: var(--color-accent-soft);
|
||
color: var(--color-accent-strong);
|
||
}
|
||
|
||
.hero-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-3);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.hero-meta span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
.hero-meta span i {
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 999px;
|
||
background: var(--color-divider);
|
||
}
|
||
|
||
.aside-panel {
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-6);
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--color-border);
|
||
display: grid;
|
||
grid-template-rows: auto auto 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.aside-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.badge {
|
||
padding: 0.2rem 0.6rem;
|
||
border-radius: 999px;
|
||
background: var(--color-support-soft);
|
||
color: var(--color-support);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.aside-header span.small {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.login-tabs {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.login-tab {
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
color: var(--color-text-faint);
|
||
background: transparent;
|
||
}
|
||
|
||
.login-tab[data-active="true"] {
|
||
background: var(--color-primary-soft);
|
||
color: var(--color-primary-strong);
|
||
border-color: var(--color-border);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
label {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.hint {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
input[type="email"],
|
||
input[type="password"],
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 0.9rem 1rem;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--color-border);
|
||
background: var(--color-surface-2);
|
||
color: var(--color-text);
|
||
font: inherit;
|
||
}
|
||
|
||
input::placeholder {
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
input:focus-visible,
|
||
button:focus-visible {
|
||
outline: 3px solid color-mix(in srgb, var(--color-accent) 65%, white 35%);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.field-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.field-row label.checkbox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
cursor: pointer;
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.field-row input[type="checkbox"] {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.login-footer {
|
||
display: grid;
|
||
gap: var(--space-3);
|
||
margin-top: var(--space-4);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.login-footer a {
|
||
color: var(--color-link);
|
||
}
|
||
|
||
.status-row {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
flex-wrap: wrap;
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.pill {
|
||
padding: 0.35rem 0.7rem;
|
||
border-radius: 999px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pill.success {
|
||
background: var(--color-success-soft);
|
||
color: var(--color-success);
|
||
}
|
||
|
||
.pill.warning {
|
||
background: var(--color-warning-soft);
|
||
color: var(--color-warning);
|
||
}
|
||
|
||
.pill.info {
|
||
background: var(--color-info-soft);
|
||
color: var(--color-info);
|
||
}
|
||
|
||
section.digest {
|
||
margin-top: var(--space-8);
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.card {
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-5);
|
||
border: 1px solid var(--color-border);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.card h2 {
|
||
margin: 0 0 var(--space-3);
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
.card h3 {
|
||
margin: 0 0 var(--space-3);
|
||
font-size: var(--text-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.card p {
|
||
margin: 0 0 var(--space-3);
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
ul.events {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
li.event {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.event-date {
|
||
padding: 0.35rem 0.75rem;
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-primary-soft);
|
||
color: var(--color-primary-strong);
|
||
font-size: var(--text-xs);
|
||
text-align: center;
|
||
min-width: 4.5rem;
|
||
}
|
||
|
||
.event-title {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.event-meta {
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--space-2);
|
||
margin-top: var(--space-3);
|
||
}
|
||
|
||
.tag {
|
||
padding: 0.25rem 0.6rem;
|
||
border-radius: 999px;
|
||
font-size: var(--text-xs);
|
||
background: var(--color-support-soft);
|
||
color: var(--color-support);
|
||
}
|
||
|
||
footer.site-footer {
|
||
padding: 0 var(--space-8) var(--space-6);
|
||
font-size: var(--text-xs);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
footer.site-footer .row {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--space-4);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
footer.site-footer a {
|
||
color: var(--color-link);
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
main.layout { grid-template-columns: 1fr; }
|
||
section.digest { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.wrap { padding: var(--space-5) var(--space-4); }
|
||
header .inner {
|
||
padding: var(--space-4) var(--space-4);
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<header class="topbar">
|
||
<div class="inner">
|
||
<div class="brand">
|
||
<div class="logo" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 18c4-1 8-6 12-12" />
|
||
<path d="M7 7h10v10" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<strong>Petrol Commons</strong>
|
||
<span>Community portal for events & volunteers</span>
|
||
</div>
|
||
</div>
|
||
<nav class="topnav" aria-label="Main">
|
||
<a href="#" aria-current="page">Home</a>
|
||
<a href="#events">Events</a>
|
||
<a href="#community">Community</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="wrap">
|
||
<main class="layout">
|
||
<section class="hero-panel">
|
||
<div class="hero-eyebrow">
|
||
<span class="dot"></span>
|
||
<span>Inclusive spaces in deep petrol</span>
|
||
</div>
|
||
<h1>Coordinate volunteers and events with a calm, readable interface.</h1>
|
||
<p class="lead">
|
||
This one-page preview shows how deep petrol, a warm complementary accent, and a small set of support colours behave in a realistic layout with login, events, and community context.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary" type="button">Login to portal</button>
|
||
<button class="btn btn-secondary" type="button">Browse public events</button>
|
||
<button class="btn btn-ghost" type="button">Learn about the colour system</button>
|
||
</div>
|
||
|
||
<div class="hero-meta">
|
||
<span><i></i> Primary: deep petrol for key actions and brand.</span>
|
||
<span><i></i> Accent: warm clay for emphasis and highlights.</span>
|
||
<span><i></i> Support: muted violet for tags and tertiary UI.</span>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="aside-panel" aria-label="Login">
|
||
<div class="aside-header">
|
||
<div>
|
||
<h2 style="margin:0 0 var(--space-2); font-size:var(--text-lg);">Login to your space</h2>
|
||
<span class="small">Secure access to organiser tools and volunteer coordination.</span>
|
||
</div>
|
||
<span class="badge">Petrol theme</span>
|
||
</div>
|
||
|
||
<div class="login-tabs" aria-label="Login mode">
|
||
<button class="login-tab" type="button" data-active="true">Email</button>
|
||
<button class="login-tab" type="button">Access code</button>
|
||
</div>
|
||
|
||
<form novalidate>
|
||
<div class="field">
|
||
<label for="email">Email address</label>
|
||
<input id="email" type="email" autocomplete="email" placeholder="you@example.org" />
|
||
<p class="hint">Use the email you registered for events or volunteering.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password">Password</label>
|
||
<input id="password" type="password" autocomplete="current-password" placeholder="••••••••" />
|
||
<p class="hint">We never store your password in plain text.</p>
|
||
</div>
|
||
|
||
<div class="field-row">
|
||
<label class="checkbox">
|
||
<input type="checkbox" />
|
||
<span>Remember this device</span>
|
||
</label>
|
||
<a href="#">Forgot password?</a>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" type="submit" style="width:100%; justify-content:center;">
|
||
Login
|
||
</button>
|
||
|
||
<div class="login-footer">
|
||
<span>By logging in you agree to our community guidelines and privacy notice.</span>
|
||
<span>New here? <a href="#">Request an organiser account</a>.</span>
|
||
<div class="status-row">
|
||
<span class="pill success">Encrypted connection</span>
|
||
<span class="pill info">GDPR-aligned data handling</span>
|
||
<span class="pill warning">Never share your password with others</span>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</aside>
|
||
</main>
|
||
|
||
<section class="digest" id="events">
|
||
<article class="card">
|
||
<h3>Upcoming</h3>
|
||
<h2>Events and meetups</h2>
|
||
<p>This section shows how petrol and its supporting colours work in a more content-heavy context with lists, dates, and tags.</p>
|
||
<ul class="events">
|
||
<li class="event">
|
||
<div class="event-date">21 Jul · 19:00</div>
|
||
<div>
|
||
<div class="event-title">Queer Tech & Privacy Meetup</div>
|
||
<div class="event-meta">Köln · Hybrid · Organised by Petrol Commons</div>
|
||
<div class="tags">
|
||
<span class="tag">Tech</span>
|
||
<span class="tag">Privacy</span>
|
||
<span class="tag">Community</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="event">
|
||
<div class="event-date">28 Jul · 17:30</div>
|
||
<div>
|
||
<div class="event-title">Volunteer Onboarding</div>
|
||
<div class="event-meta">Köln · In person · Accessibility-first</div>
|
||
<div class="tags">
|
||
<span class="tag">Onboarding</span>
|
||
<span class="tag">Training</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<aside class="card" id="community">
|
||
<h3>Palette notes</h3>
|
||
<h2>How this colour system works</h2>
|
||
<p>Deep petrol is reserved for brand anchors and primary actions. Secondary uses a cooler, slightly brighter tone for navigation and support buttons, while accent and support colours cover emphasis, tags, and highlights.</p>
|
||
<p>The neutral ramp handles most surfaces and text, keeping the interface calm and readable. Semantic colours remain distinct so success, warning, and danger states are never confused with the brand palette.</p>
|
||
</aside>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="site-footer">
|
||
<div class="row">
|
||
<span>© 2026 Petrol Commons. Built with an accessible deep-petrol colour system.</span>
|
||
<span>
|
||
<a href="#">Accessibility statement</a> ·
|
||
<a href="#">Privacy notice</a>
|
||
</span>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html> |