football2801
3bd0b9a5a1
CI / test (push) Has been cancelled
Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
165 lines
5.7 KiB
CSS
165 lines
5.7 KiB
CSS
/* Atmospheric design tokens — themes as dusks layered over the harbor photo.
|
|
The whole app shares the login's surface vocabulary. */
|
|
|
|
:root {
|
|
/* Type — same recipe as login */
|
|
--font-family: 'Nunito', system-ui, sans-serif;
|
|
--font-display: 'Marcellus', Georgia, serif;
|
|
--font-accent: 'Cormorant Garamond', Georgia, serif;
|
|
--font-mono: 'DM Mono', ui-monospace, monospace;
|
|
|
|
--text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
|
|
--text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 36px;
|
|
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
|
--space-5: 20px; --space-6: 24px; --space-8: 32px;
|
|
--radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
|
|
--duration-fast: 150ms; --duration-base: 250ms;
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
/* Brand layer — fixed regardless of theme. */
|
|
--brand-yellow: #f0d000;
|
|
--brand-yellow-soft: #c4a700;
|
|
|
|
/* Editorial recipes */
|
|
--type-display-xl: 400 var(--text-3xl)/1.05 var(--font-display);
|
|
--type-display-lg: 400 var(--text-2xl)/1.1 var(--font-display);
|
|
--type-display-md: 400 var(--text-xl)/1.15 var(--font-display);
|
|
--type-accent-md: 400 italic var(--text-md)/1.4 var(--font-accent);
|
|
--type-label: 700 var(--text-xs)/1 var(--font-mono);
|
|
}
|
|
|
|
/* ─── DUSKS ──────────────────────────────────────────────────────────────
|
|
Each dusk is:
|
|
--bg-base : the deep base color behind everything
|
|
--bg-tint : an rgba multiplied over the harbor photo (the "filter")
|
|
--glass : rgba background of cards (frosted, sits on photo)
|
|
--glass-2 : a more opaque variant for nav strips
|
|
--glass-bord : hairline border on glass surfaces
|
|
--accent : theme accent (was --color-primary) — CTAs that aren't brand
|
|
--accent-fg : text on accent
|
|
--text : main text on glass (always light)
|
|
--text-muted : muted text on glass
|
|
|
|
The yellow V brand constant survives across all dusks.
|
|
*/
|
|
|
|
/* OCEAN DUSK — default, closest to login */
|
|
[data-theme="ocean-dusk"], :root {
|
|
--bg-base: #06121f;
|
|
--bg-tint: rgba(8, 22, 38, 0.45);
|
|
--glass: rgba(10, 28, 48, 0.55);
|
|
--glass-2: rgba(8, 22, 38, 0.72);
|
|
--glass-bord: rgba(180, 210, 235, 0.18);
|
|
--accent: #4e9fc8;
|
|
--accent-fg: #06121f;
|
|
--text: #f4eed8;
|
|
--text-muted: #b8c8d8;
|
|
}
|
|
|
|
/* AMBER DUSK — successor to warm-craft */
|
|
[data-theme="amber-dusk"] {
|
|
--bg-base: #1a0d05;
|
|
--bg-tint: rgba(60, 25, 8, 0.45);
|
|
--glass: rgba(50, 22, 8, 0.55);
|
|
--glass-2: rgba(35, 14, 5, 0.72);
|
|
--glass-bord: rgba(230, 180, 130, 0.2);
|
|
--accent: #e89048;
|
|
--accent-fg: #1a0d05;
|
|
--text: #faecd0;
|
|
--text-muted: #d8b890;
|
|
}
|
|
|
|
/* SAGE DUSK — successor to sage-cream */
|
|
[data-theme="sage-dusk"] {
|
|
--bg-base: #081208;
|
|
--bg-tint: rgba(20, 40, 22, 0.45);
|
|
--glass: rgba(18, 38, 22, 0.55);
|
|
--glass-2: rgba(12, 26, 14, 0.72);
|
|
--glass-bord: rgba(180, 220, 180, 0.18);
|
|
--accent: #88c068;
|
|
--accent-fg: #081208;
|
|
--text: #ecf3e0;
|
|
--text-muted: #a8c0a0;
|
|
}
|
|
|
|
/* ROSE DUSK — warmer, classier replacement for playful-pop */
|
|
[data-theme="rose-dusk"] {
|
|
--bg-base: #1a060f;
|
|
--bg-tint: rgba(56, 16, 38, 0.45);
|
|
--glass: rgba(48, 14, 36, 0.55);
|
|
--glass-2: rgba(32, 8, 22, 0.72);
|
|
--glass-bord: rgba(230, 180, 200, 0.2);
|
|
--accent: #d878a0;
|
|
--accent-fg: #1a060f;
|
|
--text: #f8e8ec;
|
|
--text-muted: #c898ac;
|
|
}
|
|
|
|
/* MAUVE DUSK — replaces dusty-mauve */
|
|
[data-theme="mauve-dusk"] {
|
|
--bg-base: #100618;
|
|
--bg-tint: rgba(40, 18, 56, 0.45);
|
|
--glass: rgba(36, 14, 50, 0.55);
|
|
--glass-2: rgba(24, 10, 34, 0.72);
|
|
--glass-bord: rgba(210, 190, 230, 0.18);
|
|
--accent: #b890d8;
|
|
--accent-fg: #100618;
|
|
--text: #f0e8f8;
|
|
--text-muted: #b8a8c8;
|
|
}
|
|
|
|
/* HONEY DUSK — replaces honey-slate */
|
|
[data-theme="honey-dusk"] {
|
|
--bg-base: #18120a;
|
|
--bg-tint: rgba(48, 36, 14, 0.45);
|
|
--glass: rgba(42, 32, 12, 0.55);
|
|
--glass-2: rgba(28, 22, 8, 0.72);
|
|
--glass-bord: rgba(232, 200, 130, 0.22);
|
|
--accent: #e8c050;
|
|
--accent-fg: #18120a;
|
|
--text: #faf0d8;
|
|
--text-muted: #c8b888;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { background: var(--bg-base); color: var(--text); }
|
|
body {
|
|
font-family: var(--font-family);
|
|
font-size: var(--text-base);
|
|
line-height: 1.5;
|
|
min-height: 100dvh;
|
|
position: relative;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ─── PERMANENT ATMOSPHERIC BACKDROP ──────────────────────────────────── */
|
|
/* harbor photo fixed under everything */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: url('../assets/harbor.jpg') center/cover no-repeat;
|
|
filter: brightness(0.6) saturate(0.85);
|
|
z-index: -3;
|
|
}
|
|
/* theme tint multiplied over photo */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg-tint);
|
|
mix-blend-mode: multiply;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
}
|
|
/* global vignette + film grain via one extra layer */
|
|
.atmosphere {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
background:
|
|
radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.65) 100%),
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
|
|
}
|