Body uses the harbor as a fixed full-page photo with brightness 0.42 + the theme's color overlay at 0.72 opacity (multiply blend) for the dusk tint. Applies via the shared wevisto-design.css so both Twig pages and the SPA get it in one go. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -93,16 +93,34 @@
|
|||||||
--color-secondary: #3a2c1a;
|
--color-secondary: #3a2c1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── v2 base body — solid navy with subtle gradient, no full-page photo
|
/* ─── v2 base body — Camogli harbor backdrop with theme-tinted overlay
|
||||||
* Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
|
* Applies to BOTH Twig pages and the SPA. Component styles live elsewhere.
|
||||||
*/
|
*/
|
||||||
[data-design="v2"] body {
|
[data-design="v2"] body {
|
||||||
background:
|
|
||||||
radial-gradient(ellipse 90% 70% at 50% 30%,
|
|
||||||
color-mix(in srgb, var(--color-surface-2) 80%, transparent) 0%,
|
|
||||||
transparent 70%),
|
|
||||||
var(--color-bg);
|
|
||||||
color: var(--color-text);
|
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.42) saturate(0.85);
|
||||||
|
z-index: -3;
|
||||||
|
}
|
||||||
|
[data-design="v2"] body::after {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.45) 100%),
|
||||||
|
var(--color-bg);
|
||||||
|
opacity: 0.72;
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
z-index: -2;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── v2 typography defaults — h1/h2/h3 become editorial display ──── */
|
/* ─── v2 typography defaults — h1/h2/h3 become editorial display ──── */
|
||||||
|
|||||||
Reference in New Issue
Block a user