football2801
828332f740
CI / test (push) Has been cancelled
Overlay was 0.72 multiply with very dark color-bg, which crushed the photo to invisible. Dropped to 0.48 + bumped photo brightness 0.42→0.60. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
183 lines
6.3 KiB
CSS
183 lines
6.3 KiB
CSS
/* ─── WeVisto · shared design tokens + base v2 overrides ────────────────
|
|
* Single source of truth for design tokens across Twig + Vue SPA.
|
|
* Loaded by every standalone Twig template AND by the SPA's main bundle.
|
|
* SPA-specific component styling lives in frontend/src/styles/design-v2.scss.
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&display=swap');
|
|
|
|
/* ─── Brand constants — never change with theme/design ──────────────── */
|
|
:root {
|
|
--brand-yellow: #f0d000;
|
|
--brand-yellow-soft: #c4a700;
|
|
--brand-navy: #0e2740;
|
|
|
|
/* v2 font stack — applied via [data-design="v2"] selectors below */
|
|
--font-display-v2: 'Marcellus', Georgia, serif;
|
|
--font-accent-v2: 'Cormorant Garamond', Georgia, serif;
|
|
--font-mono-v2: 'DM Mono', ui-monospace, monospace;
|
|
}
|
|
|
|
/* ─── v2 tokens — per-theme overrides ────────────────────────────────
|
|
* Each theme keeps its existing enum value; v2 just maps it to a "dusk".
|
|
* Twig templates and SPA components both read these via var(--color-*).
|
|
*/
|
|
[data-design="v2"] {
|
|
/* Default = warm-craft → "amber dusk" */
|
|
--color-bg: #1a0d05;
|
|
--color-surface: #2a1810;
|
|
--color-surface-2: #3a241a;
|
|
--color-border: rgba(230, 180, 130, 0.22);
|
|
--color-text: #faecd0;
|
|
--color-text-muted: #c8a880;
|
|
--color-primary: #e89048;
|
|
--color-primary-fg: #1a0d05;
|
|
--color-secondary: #3a241a;
|
|
--color-secondary-fg:#faecd0;
|
|
--color-destructive: #e08070;
|
|
--color-destructive-fg: #ffffff;
|
|
--color-focus-ring: var(--brand-yellow);
|
|
}
|
|
|
|
[data-design="v2"][data-theme="ocean-dusk"],
|
|
[data-design="v2"]:not([data-theme]) {
|
|
/* ocean-dusk is the default for unauthenticated visitors (login/register) */
|
|
--color-bg: #06121f;
|
|
--color-surface: #0e2030;
|
|
--color-surface-2: #142a40;
|
|
--color-border: rgba(180,210,235,0.22);
|
|
--color-text: #f4eed8;
|
|
--color-text-muted: #b8c8d8;
|
|
--color-primary: #4e9fc8;
|
|
--color-primary-fg: #06121f;
|
|
--color-secondary: #142a40;
|
|
}
|
|
|
|
[data-design="v2"][data-theme="warm-craft"] {
|
|
--color-bg: #1a0d05; --color-surface: #2a1810; --color-surface-2: #3a241a;
|
|
--color-border: rgba(230,180,130,0.22);
|
|
--color-text: #faecd0; --color-text-muted: #c8a880;
|
|
--color-primary: #e89048; --color-primary-fg: #1a0d05;
|
|
--color-secondary: #3a241a;
|
|
}
|
|
|
|
[data-design="v2"][data-theme="sage-cream"] {
|
|
--color-bg: #081208; --color-surface: #142418; --color-surface-2: #1c3022;
|
|
--color-border: rgba(180,220,180,0.20);
|
|
--color-text: #ecf3e0; --color-text-muted: #a8c0a0;
|
|
--color-primary: #88c068; --color-primary-fg: #081208;
|
|
--color-secondary: #1c3022;
|
|
}
|
|
|
|
[data-design="v2"][data-theme="playful-pop"] {
|
|
--color-bg: #1a060f; --color-surface: #281020; --color-surface-2: #381a30;
|
|
--color-border: rgba(230,180,200,0.20);
|
|
--color-text: #f8e8ec; --color-text-muted: #d0a0b8;
|
|
--color-primary: #d878a0; --color-primary-fg: #1a060f;
|
|
--color-secondary: #381a30;
|
|
}
|
|
|
|
[data-design="v2"][data-theme="dusty-mauve"] {
|
|
--color-bg: #100618; --color-surface: #1c1028; --color-surface-2: #281a3a;
|
|
--color-border: rgba(210,190,230,0.20);
|
|
--color-text: #f0e8f8; --color-text-muted: #c0b0d0;
|
|
--color-primary: #b890d8; --color-primary-fg: #100618;
|
|
--color-secondary: #281a3a;
|
|
}
|
|
|
|
[data-design="v2"][data-theme="honey-slate"] {
|
|
--color-bg: #18120a; --color-surface: #281e10; --color-surface-2: #3a2c1a;
|
|
--color-border: rgba(232,200,130,0.22);
|
|
--color-text: #faf0d8; --color-text-muted: #d0b888;
|
|
--color-primary: #e8c050; --color-primary-fg: #18120a;
|
|
--color-secondary: #3a2c1a;
|
|
}
|
|
|
|
/* ─── v2 base body — Camogli harbor backdrop with theme-tinted overlay
|
|
* Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
|
|
*/
|
|
[data-design="v2"] body {
|
|
color: var(--color-text);
|
|
background: var(--color-bg);
|
|
position: relative;
|
|
min-height: 100dvh;
|
|
}
|
|
[data-design="v2"] body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: url('/build/assets/harbor.jpg') center/cover no-repeat;
|
|
filter: brightness(0.6) saturate(0.9);
|
|
z-index: -3;
|
|
}
|
|
[data-design="v2"] body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 90% 75% at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 100%),
|
|
var(--color-bg);
|
|
opacity: 0.48;
|
|
mix-blend-mode: multiply;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ─── v2 typography defaults — h1/h2/h3 become editorial display ──── */
|
|
[data-design="v2"] h1,
|
|
[data-design="v2"] h2,
|
|
[data-design="v2"] h3 {
|
|
font-family: var(--font-display-v2);
|
|
font-weight: 400;
|
|
letter-spacing: 0.005em;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ─── v2 base overrides for the standalone Twig template patterns
|
|
* Every Twig template uses .card / .btn / .field-error / .logo-badge.
|
|
* These rules give them dusk styling automatically.
|
|
*/
|
|
[data-design="v2"] .card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
|
|
color: var(--color-text);
|
|
}
|
|
[data-design="v2"] .card label {
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-mono-v2);
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
[data-design="v2"] .card input[type="email"],
|
|
[data-design="v2"] .card input[type="password"],
|
|
[data-design="v2"] .card input[type="text"] {
|
|
background: rgba(0,0,0,0.3);
|
|
border-color: var(--color-border);
|
|
color: var(--color-text);
|
|
}
|
|
[data-design="v2"] .card input:focus {
|
|
border-color: var(--brand-yellow);
|
|
}
|
|
[data-design="v2"] .btn {
|
|
background: var(--color-primary);
|
|
color: var(--color-primary-fg);
|
|
font-weight: 700;
|
|
}
|
|
[data-design="v2"] .field-error { color: var(--color-destructive); }
|
|
[data-design="v2"] .register-link {
|
|
color: var(--color-text-muted);
|
|
font-family: var(--font-accent-v2);
|
|
font-style: italic;
|
|
}
|
|
[data-design="v2"] .register-link a {
|
|
color: var(--brand-yellow);
|
|
font-style: normal;
|
|
font-family: inherit;
|
|
}
|
|
[data-design="v2"] .logo-badge {
|
|
border-color: var(--color-border);
|
|
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
|
|
}
|