Startseite ruhiger, Otterpohl mit Montage, Marken-Bilder und Farbwelt-Entwurf
- Hinweisleiste per B2IN_ANNOUNCEMENT_BAR ausgeblendet (Standard aus) - Hero: „Räume aus einer Hand.“ als neue Überschrift, zweiter Button entfernt - Projekttext mit zentralem deutschen Vertragspartner (Punkt statt Gedankenstrich) - Otterpohl als vierte Kernmarke: Text v2, Abschnitt „Montage“, Titelbild getauscht - Markenabschnitte: Absätze mit „- “ als Liste mit fetter Einleitung - Titelbilder und Galerien für CABINET, Rotpunkt, Febrü und Otterpohl (WebP) - Feedback 17.09. in den Markentexten, Demobilder entfernt, WhatsApp-Nummer - Palette „Modern“ fest ohne Schalter, Entwurf /entwurf mit Hero-Slideshow - Seeder-Liste fürs Deployment im Entwicklungsplan Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
3211569fee
commit
4b07bbdcae
124 changed files with 3618 additions and 496 deletions
|
|
@ -151,6 +151,102 @@
|
|||
|
||||
--font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Interior, Variante „Modern“ (Nachtrag 18) ──────────────────────
|
||||
Marcels Rückmeldung vom 23.09.: die Creme-Flächen wirken altbacken. Diese
|
||||
Variante lässt Tanne und Ocker aus dem Logo unangetastet und hellt nur die
|
||||
Flächen auf: Grund fast weiß, Karten weiß, Sektionswechsel in hellem Grau-
|
||||
Beige, Footer in Tanne. Aktiv, sobald der Farb-Schalter (palette-switch)
|
||||
`palette-modern` an <html> setzt; die Wahl liegt im localStorage. */
|
||||
.palette-modern .world-interior {
|
||||
--background: 40 25% 98%; /* #fbfaf8 fast weiß, leicht warm */
|
||||
--card: 0 0% 100%; /* Karten reinweiß */
|
||||
--popover: 0 0% 100%;
|
||||
|
||||
--muted: 40 12% 94%; /* #f2f0ed */
|
||||
--muted-foreground: 24 8% 38%;
|
||||
|
||||
--accent: 36 14% 93%; /* #efece7 Sektionswechsel, klar statt Sand */
|
||||
--accent-dark: 36 14% 88%;
|
||||
|
||||
--border: 36 12% 88%; /* #e6e2dc */
|
||||
--input: 0 0% 100%;
|
||||
|
||||
--hero-container: 40 14% 95%;
|
||||
--hero-container-dark: 40 12% 90%;
|
||||
--hero-container-light: 40 25% 98%;
|
||||
|
||||
/* Footer dunkel in Tanne – gibt der hellen Seite unten einen klaren Abschluss */
|
||||
--footer-bg: 175 16% 15%;
|
||||
--footer-fg: 38 33% 95%;
|
||||
--footer-muted: 38 20% 76%;
|
||||
--footer-line: 38 20% 76%;
|
||||
|
||||
/* Karten sind jetzt weiß auf fast weiß: etwas mehr Schatten, damit sie sich lösen */
|
||||
--shadow-card: 0 6px 24px -10px hsl(var(--foreground) / 0.14);
|
||||
--shadow-elevated: 0 24px 48px -20px hsl(var(--foreground) / 0.2);
|
||||
}
|
||||
|
||||
/* ── Interior, Entwurf „Greige“ (Nachtrag 19, Briefing Marcel 24.09.) ─────
|
||||
Heller, leicht kühler Grundton (Greige statt Creme), deutlich präsenteres
|
||||
Tannengrün, Gold nur als feine Linie. Liegt als Klasse am <body> der
|
||||
Entwurfsseite /entwurf – nicht am <html> wie der Browser-Schalter, damit
|
||||
sich beide nicht überlagern. */
|
||||
.world-interior.palette-greige {
|
||||
--background: 45 14% 93%; /* #f0eeeb Greige, Off-White */
|
||||
--foreground: 166 25% 13%; /* Tannengrau für Text */
|
||||
|
||||
--card: 40 20% 97%; /* #f8f7f4 – hell, aber kein steriles Weiß */
|
||||
--card-foreground: 166 25% 13%;
|
||||
--popover: 40 20% 97%;
|
||||
--popover-foreground: 166 25% 13%;
|
||||
|
||||
--primary: 165 44% 14%; /* #14342c Tannengrün, klar und dunkel */
|
||||
--primary-light: 165 32% 22%;
|
||||
--primary-lighter: 165 12% 82%;
|
||||
--primary-dark: 165 50% 10%;
|
||||
--primary-foreground: 45 20% 95%;
|
||||
|
||||
--secondary: 38 45% 46%; /* #aa8341 gedecktes Gold */
|
||||
--secondary-light: 38 45% 56%;
|
||||
--secondary-lighter: 40 40% 80%;
|
||||
--secondary-dark: 38 48% 38%;
|
||||
--secondary-deep: 38 55% 34%; /* Gold als Textfarbe auf hellem Grund */
|
||||
--cta-band-line: 38 45% 46%;
|
||||
--secondary-foreground: 45 20% 95%;
|
||||
|
||||
--clay: 30 8% 50%;
|
||||
|
||||
--muted: 45 12% 90%;
|
||||
--muted-foreground: 160 8% 36%;
|
||||
|
||||
--accent: 45 12% 89%; /* #e8e6e0 Sektionswechsel */
|
||||
--accent-dark: 45 12% 84%;
|
||||
--accent-foreground: 166 25% 13%;
|
||||
|
||||
--dark-bg: 165 44% 14%;
|
||||
--dark-text: 45 20% 95%;
|
||||
--dark-muted: 45 15% 78%;
|
||||
|
||||
/* Footer in Tannengrün, Haarlinie in Gold */
|
||||
--footer-bg: 165 44% 14%;
|
||||
--footer-fg: 45 20% 95%;
|
||||
--footer-muted: 45 15% 78%;
|
||||
--footer-line: 38 45% 46%;
|
||||
|
||||
--cta-band-end: 165 30% 22%;
|
||||
|
||||
--border: 40 10% 84%;
|
||||
--input: 40 20% 98%;
|
||||
--ring: 165 44% 14%;
|
||||
|
||||
--hero-container: 40 20% 97%;
|
||||
--hero-container-dark: 45 12% 90%;
|
||||
--hero-container-light: 40 25% 98%;
|
||||
|
||||
--shadow-card: 0 6px 24px -10px hsl(var(--foreground) / 0.14);
|
||||
--shadow-elevated: 0 30px 60px -28px hsl(var(--primary) / 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
/* Interior: Ocker ist Akzent, kein Flächenton unter Text – Creme auf Ocker erreicht
|
||||
|
|
@ -173,4 +269,202 @@
|
|||
color: hsl(var(--secondary-deep));
|
||||
}
|
||||
|
||||
/* Variante „Modern“: auf dem dunklen Footer trägt Ocker in voller Stärke. */
|
||||
.palette-modern .world-interior .section-footer .text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
/* Variante „Modern“: Abschlussband und Footer sind beide dunkel – eine helle Haarlinie trennt sie. */
|
||||
.palette-modern .world-interior .section-footer {
|
||||
border-top: 1px solid hsl(var(--footer-muted) / 0.35);
|
||||
}
|
||||
|
||||
/* Der schwebende Termin-Button liegt über Bildern und weißen Karten: er bekommt eine
|
||||
Fläche in Kartenfarbe, damit die Kontur nicht im Hintergrund verschwindet. */
|
||||
.world-interior .appointment-toggle.btn-secondary-accent {
|
||||
background: hsl(var(--card)) !important;
|
||||
}
|
||||
|
||||
.world-interior .appointment-toggle.btn-secondary-accent:hover {
|
||||
background: hsl(var(--primary)) !important;
|
||||
}
|
||||
|
||||
/* Cookie-Manager (acme/cookie-consent) in der Interior-Welt: die Paketfarben aus
|
||||
config/cookie-consent.php sind das Blau der Immobilien-Welt. Hier folgt der schwebende
|
||||
Button dem Akzent-Button der Seite (Tanne, Hover heller), Icon, Schalter und Link-Hover
|
||||
tragen Ocker, „Speichern“ liegt in Tanne. Die Immobilien-Welt behält ihr Blau. */
|
||||
.world-interior .cookie-consent-wrapper {
|
||||
--cc-primary: hsl(var(--secondary));
|
||||
--cc-primary-hover: hsl(var(--secondary-dark));
|
||||
--cc-save: hsl(var(--primary));
|
||||
--cc-save-hover: hsl(var(--primary-light));
|
||||
--cc-button-bg: hsl(var(--primary));
|
||||
--cc-button-hover: hsl(var(--primary-light));
|
||||
}
|
||||
|
||||
.world-interior .cookie-consent-wrapper .cc-floating-btn {
|
||||
--tw-ring-color: hsl(var(--secondary)) !important;
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
|
||||
}
|
||||
|
||||
.world-interior .cookie-consent-wrapper .cc-floating-btn:hover {
|
||||
background: linear-gradient(145deg, hsl(var(--primary-light)) 0%, hsl(var(--primary)) 100%);
|
||||
}
|
||||
|
||||
/* Variante „Modern“: der Footer ist dunkel, also das negative Logo statt des positiven. */
|
||||
.footer-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.palette-modern .world-interior .footer-logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.palette-modern .world-interior .footer-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* ── Entwurf „Greige“: Footer dunkel mit Goldlinie und negativem Logo ─────── */
|
||||
.world-interior.palette-greige .section-footer {
|
||||
border-top: 1px solid hsl(var(--secondary) / 0.6);
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .section-footer .text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .footer-logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.world-interior.palette-greige .footer-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Hero des Entwurfs: Rahmen mit Goldkante, grüne Flanken, Slider ────────
|
||||
Goldkanten als Verlaufs-Border: transparenter Rand, Fläche auf padding-box,
|
||||
Goldverlauf auf border-box. Kein Pseudo-Rand mit Maske mehr – der ließ an
|
||||
der gerundeten Kante eine helle Linie durchscheinen. Die grünen Flanken sind
|
||||
Inline-SVGs (components/web/hero-flank-*), skaliert über die Rahmenhöhe. */
|
||||
.hero-draft .hero-frame {
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(hsl(var(--hero-container)), hsl(var(--hero-container))) padding-box,
|
||||
linear-gradient(
|
||||
125deg,
|
||||
hsl(var(--secondary-light)) 0%,
|
||||
hsl(var(--secondary)) 28%,
|
||||
hsl(var(--secondary) / 0.35) 62%,
|
||||
hsl(var(--secondary-light)) 100%
|
||||
) border-box;
|
||||
box-shadow: var(--shadow-elevated);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-draft .hero-flank-left {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 46%;
|
||||
}
|
||||
|
||||
.hero-draft .hero-image {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Goldkante um das Bild, gleiche Technik wie am Rahmen */
|
||||
.hero-draft .hero-image-frame {
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 1.25rem;
|
||||
background:
|
||||
linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
|
||||
linear-gradient(
|
||||
135deg,
|
||||
hsl(var(--secondary-light)) 0%,
|
||||
hsl(var(--secondary)) 40%,
|
||||
hsl(var(--secondary) / 0.4) 100%
|
||||
) border-box;
|
||||
box-shadow: var(--shadow-elevated);
|
||||
}
|
||||
|
||||
.hero-draft .hero-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.28em;
|
||||
text-transform: uppercase;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
.hero-draft .hero-eyebrow::after {
|
||||
content: "";
|
||||
width: 3.5rem;
|
||||
height: 1px;
|
||||
background: hsl(var(--secondary));
|
||||
}
|
||||
|
||||
.hero-draft .hero-title {
|
||||
font-family: var(--font-secondary);
|
||||
font-size: clamp(2rem, 3.1vw, 3.3rem);
|
||||
line-height: 1.12;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.01em;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.hero-draft .hero-title em {
|
||||
font-style: normal;
|
||||
color: hsl(var(--secondary-deep));
|
||||
}
|
||||
|
||||
/* Button: Goldrand rundum, unten kräftiger, Pfeil in Gold */
|
||||
.hero-draft .btn-hero {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.75rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: linear-gradient(145deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
|
||||
border: 1px solid hsl(var(--secondary));
|
||||
border-bottom-width: 3px;
|
||||
box-shadow: 0 14px 30px -14px hsl(var(--primary) / 0.6);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.hero-draft .btn-hero svg {
|
||||
color: hsl(var(--secondary-light));
|
||||
}
|
||||
|
||||
.hero-draft .btn-hero:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 18px 34px -14px hsl(var(--primary) / 0.7);
|
||||
}
|
||||
|
||||
.hero-draft .hero-slide {
|
||||
transition: opacity 1.4s ease-in-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-draft .hero-slide {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue