/* =================================================================== HOME-E · Steven Solbach Homepage-Redesign ("System E") Warm near-black + ein Amber-Akzent. Newsreader/Albert Sans/Mono/Pacifico. --------------------------------------------------------------- WICHTIG: Alles ist unter `.home-e` gescopt, damit die globalen core.css-Tokens (Portal/Admin/Header/Footer) unberührt bleiben. Nur die fixierten Hintergrund-Layer (.home-e-bg/-grain/-glow/-scrim, #heroFluid) und der Preloader (#home-preloader) liegen außerhalb von .home-e (werden von home.js an gehängt) und bringen ihre Werte selbst mit. =================================================================== */ /* ===== Design-Tokens (gescopt auf die Homepage) ===== */ .home-e { /* Warm near-black surfaces */ --bg: #0e0d0b; --bg-1: #08070a; --surface: #17150f; --surface-2: #221f18; --panel: #17150f; --panel-2: #221f18; --border: rgba(232,180,103,0.16); --border-2: rgba(232,180,103,0.30); /* Text ramp */ --text: #efe9df; --text-2: #bcb3a2; --text-3: #8f887b; --faint: #5f5849; /* Ein Akzent: Amber */ --amber: #e8b467; --amber-bright: #f2c778; --amber-deep: #8a5a22; --success: #5fbf7f; --mint: var(--amber); --gold: var(--amber); --violet: var(--amber); --pink: var(--text-3); --amber-rgb: 232,180,103; --mint-rgb: 232,180,103; --gold-rgb: 232,180,103; --violet-rgb: 232,180,103; --pink-rgb: 143,136,123; --success-rgb: 95,191,127; --on-mint: #100f0d; --on-gold: #100f0d; --bg-rgb: 14,13,11; --shell-rgb: 8,7,10; /* Fonts */ --serif: 'Newsreader', Georgia, serif; --sans: 'Albert Sans', system-ui, sans-serif; --mono: ui-monospace, Menlo, monospace; --fancy: 'Newsreader', Georgia, serif; --maxw: 1200px; --radius: 20px; --radius-btn: 11px; --radius-pill: 100px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow-card: 0 30px 70px -40px rgba(0,0,0,.9); --shadow-hover: 0 8px 24px rgba(0,0,0,.2); --glow-amber: 0 14px 40px -12px rgba(232,180,103,.6); /* Typo-Skala */ --fs-display: clamp(1.6rem, 8.5vw, 6rem); --fs-h2: clamp(1.75rem, 5vw, 3.4rem); --fs-title: 1.8rem; --fs-subtitle:1.2rem; --fs-quote: clamp(1.5rem, 3.6vw, 2.6rem); --fs-lead: clamp(1.15rem, 1.8vw, 1.45rem); --fs-body: 19px; --fs-small: 17px; --fs-eyebrow: 16px; --fs-label: 15px; --fs-label-sm:13px; --fs-logo: 17px; --fs-btn: 14px; --fs-data-xl: clamp(2.4rem, 5vw, 3.6rem); --fs-data-lg: 2.1rem; --fs-data: 13px; /* Wrapper-Basis */ position: relative; z-index: 1; font-family: var(--sans); font-weight: 400; font-size: var(--fs-body); color: var(--text-2); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ===== Fixierte Hintergrund-Layer (außerhalb .home-e, an ) ===== */ .home-e-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #0e0d0b; } .home-e-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 48% at 100% 0%, rgba(232,180,103,0.10), transparent 68%); } .home-e-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } #heroFluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; } .home-e-scrim { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgba(14,13,11,0.25); } /* Inhalt + Footer über die Hintergrund-Layer heben, solange die Homepage aktiv ist */ body.home-e-active #app { background: transparent; } body.home-e-active #site-footer { position: relative; z-index: 1; } /* Homepage full-bleed: Header-Spacer weg (Glas-Header schwebt über der Hero) */ body.home-e-active #header-spacer { display: none; } /* System E bringt eigenes Grain/Glow/Fluid mit -> globale SPA-Effektebenen auf der Homepage stumm schalten */ body.home-e-active #particles-bg, body.home-e-active #particles-fg, body.home-e-active #glow, body.home-e-active #cursor-ring, body.home-e-active .noise-overlay { display: none !important; } /* ===== Basis-Elemente innerhalb der Homepage ===== */ .home-e img, .home-e svg { display: block; max-width: 100%; } .home-e a { color: inherit; text-decoration: none; } .home-e ul { list-style: none; } .home-e em { font-style: italic; } .home-e .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .home-e .center { text-align: center; } .home-e .mint { color: var(--mint); } .home-e .gold { color: var(--gold); } .home-e .violet { color: var(--violet); } .home-e .pink { color: var(--pink); } /* ===== Shared Typografie ===== */ .home-e .eyebrow { font-family: var(--sans); font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--amber); opacity: 0.9; margin-bottom: 22px; } .home-e .eyebrow.center { display: block; } .home-e .section-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em; color: var(--text); margin-bottom: 20px; } .home-e .section-title em { font-style: italic; } /* ===== Buttons ===== */ .home-e .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: var(--fs-btn); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 28px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap; } .home-e .btn-sm { padding: 9px 18px; font-size: var(--fs-label-sm); letter-spacing: 0.1em; } .home-e .btn.full { width: 100%; } .home-e .btn-outline { border-color: var(--border-2); color: var(--text); background: rgba(255,255,255,0.015); } .home-e .btn-outline:hover { border-color: var(--amber); color: var(--amber); } .home-e .btn-ghost { color: var(--text-2); } .home-e .btn-ghost:hover { color: var(--text); } /* Iris-CTA: Glaskern + rotierender Spektrum-Ring */ @property --sp-hue { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes irisSpin { to { --sp-hue: 360deg; } } .home-e .btn-iris { color: #fff; border: 1.5px solid transparent; background: linear-gradient(rgba(22,19,13,0.92), rgba(22,19,13,0.92)) padding-box, conic-gradient(from var(--sp-hue), #ff5d5d, #ffd166, #8dff9e, #57e0ff, #9b8cff, #ff8cf0, #ff5d5d) border-box; text-shadow: 0 1px 2px rgba(0,0,0,0.45); box-shadow: 0 14px 40px -18px rgba(0,0,0,0.85), 0 0 34px -10px hsl(var(--sp-hue) 80% 62% / 0.38); animation: irisSpin 9s linear infinite; } .home-e .btn-iris:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -18px rgba(0,0,0,0.9), 0 0 46px -8px hsl(var(--sp-hue) 85% 64% / 0.6); } /* ===== HERO ===== */ .home-e .hero { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; display: grid; place-items: center; } .home-e .hero-scrim { position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none; background: radial-gradient(125% 56% at 50% 42%, rgba(var(--bg-rgb),0.30) 0%, rgba(var(--bg-rgb),0.12) 44%, rgba(var(--bg-rgb),0) 80%); } .home-e .hero.fx-on .hero-scrim { display: block; } /* In the flow, not absolute. An absolutely positioned block cannot make .hero grow, so min-height:100vh stayed at exactly 100vh and overflow:hidden cut the content off: in landscape that swallowed the subtitle and both CTAs and even sliced through the headline. As a normal grid item the content centres exactly as before while it fits, and pushes the hero taller when it does not. The paddings below stay: they keep the content clear of the fixed header. */ .home-e .hero-content { position: relative; z-index: 3; width: 100%; display: grid; place-items: center; } .home-e .hero .hero-title, .home-e .hero .hero-sub, .home-e .hero .hero-eyebrow { text-shadow: 0 2px 30px rgba(0,0,0,0.55), 0 1px 5px rgba(0,0,0,0.5); } .home-e .hero-inner { position: relative; z-index: 3; text-align: center; padding-top: 80px; } .home-e .hero-eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 38px; display: flex; justify-content: center; flex-wrap: wrap; } .home-e .hero-eyebrow .he-line { text-align: center; } .home-e .hero-eyebrow .he-em { color: var(--amber-bright); } .home-e .hero-title { font-family: var(--serif); font-weight: 300; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; color: var(--text); margin-bottom: 28px; } .home-e .hero-title em { font-style: italic; color: var(--text); } .home-e .hero-word-wrap { display: inline-grid; position: relative; overflow: hidden; vertical-align: baseline; line-height: 1.15; } .home-e .hero-word-wrap .hero-word { grid-area: 1 / 1; text-align: center; white-space: nowrap; line-height: 1.15; font-style: normal; text-decoration: none; color: var(--gold); opacity: 0; transform: translateY(-100%); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .home-e .hero-word-wrap .hero-word.active { opacity: 1; transform: translateY(0); } .home-e .hero-word-wrap .hero-word.exit-down { opacity: 0; transform: translateY(100%); } .home-e .hero-word .hero-suffix { color: #fff; } .home-e .hero-sub { max-width: 620px; margin: 0 auto 40px; font-size: var(--fs-lead); color: var(--text-2); } .home-e .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .home-e .scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; text-transform: uppercase; font-size: var(--fs-label-sm); letter-spacing: 0.3em; color: var(--text-3); } .home-e .scroll-cue i { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: cue 2s ease-in-out infinite; } @keyframes cue { 0%,100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } /* ===== Optionale Musik in der Hero ===== Reduziert auf die minimierte SoundCloud-Leiste, oben mittig zwischen Header und Eyebrow. Kein eigenes Bedienelement drumherum. */ /* In the flow above the eyebrow. Absolutely positioned it sat at 22% of the viewport height while the centred hero text moves at 50% of it - below about 820px window height the two crossed and the eyebrow landed on the bar. The note sits BESIDE the bar, not above it: above, it cost 57px of height in exactly the place where there is none - it pushed the bar too far down on desktop and crowded everything on mobile. --hm-label reserves its column. */ .home-e .hero-music { --hm-label: 108px; position: relative; z-index: 4; /* Bind the width to the container, not to 100vw: .hero-inner has its own side padding, and 100vw additionally includes the scrollbar. Both made the bar wider than the space it has - and since .hero-inner is a grid item that sizes to its widest child, the whole hero block grew past the screen and .hero{overflow:hidden} cut it off on the right. */ width: min(432px, 100%); padding-left: var(--hm-label); box-sizing: border-box; margin: 0 auto clamp(30px, 8.4vh, 92px); } .home-e .hm-frame { width: 100%; line-height: 0; } .home-e .hm-frame iframe { display: block; width: 100%; height: 20px; border: 0; } /* Click shield over the bar. Every click toggles playback through the widget API instead of following the title/logo links out to soundcloud.com. It only takes over once the API can answer; until then the native button stays live. */ /* Reaches above and below the 20px bar so the tap target is 44px tall. The space around the bar is empty, so nothing else gets covered. */ .home-e .hm-shield { position: absolute; inset: -12px 0 -12px var(--hm-label); z-index: 1; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; pointer-events: none; } .home-e .hm-shield.is-armed { pointer-events: auto; } /* Handwritten aside above the bar, with a drawn arrow down to the play button. */ .home-e .hm-note { position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(-4deg); display: flex; align-items: center; gap: 4px; font-family: 'Allison', 'Snell Roundhand', 'Apple Chancery', Georgia, serif; font-size: 31px; font-weight: 400; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: var(--amber); opacity: 0.72; pointer-events: none; user-select: none; } .home-e .hm-arrow { width: 32px; height: 17px; flex: none; overflow: visible; } @media (max-width: 680px) { .home-e .hero-music { --hm-label: 90px; width: min(400px, 100%); } .home-e .hm-note { font-size: 19px; } .home-e .hm-arrow { width: 27px; height: 15px; } } /* Short desktop windows (~720px laptops). The hero simply does not fit there: 140px header + 550px hero block + the scroll cue exceed the window. So stop centring in the whole hero and centre in the space below the header instead, and drop the cue - it would otherwise land on the buttons (it did before). Phones are exempt, their header is small enough. */ @media (min-width: 681px) and (max-height: 880px) { .home-e .hero-content { padding-top: 140px; } .home-e .hero-inner { padding-top: 0; } .home-e .scroll-cue { display: none; } } .home-e .hm-shield:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } /* ===== Section-Basis-Spacing ===== */ .home-e section { position: relative; } .home-e .transmutation { padding: clamp(80px, 11vw, 150px) 0; } /* ===== INTRO · ÜBER STEVEN ===== */ .home-e .intro { padding: clamp(80px,11vw,150px) 0; background: var(--bg); border-block: 1px solid var(--border); } .home-e .intro-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(40px,6vw,88px); align-items: stretch; } .home-e .intro-copy { max-width: 680px; } .home-e .intro-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin-bottom: 30px; } .home-e .intro-title em { font-style: italic; } .home-e .intro-copy p { font-size: var(--fs-body); color: var(--text-2); line-height: 1.7; margin-bottom: 20px; } .home-e .intro-copy p:last-child { margin-bottom: 0; } .home-e .intro-copy p.intro-q { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--text); line-height: 1.35; } .home-e .intro-mission { margin-top: 34px; } .home-e .intro-mission .mission-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12.5px; color: var(--amber); } .home-e .intro-mission .mission-kicker::before { content: ""; width: 36px; height: 1px; background: var(--amber); opacity: 0.75; } .home-e .intro-mission .mission-text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); } .home-e .intro-photo { display: flex; flex-direction: column; } .home-e .intro-more { max-width: 500px; width: 100%; margin: 28px auto 0; margin-top: auto; padding-top: 28px; display: flex; justify-content: center; } /* Polaroid-Cluster */ .home-e .polaroid-wrap { width: 100%; max-width: 500px; margin-left: auto; } .home-e .polaroid-cluster { position: relative; width: 100%; aspect-ratio: 1 / 1.78; } .home-e .polaroid-slot { position: absolute; will-change: transform; transform: translateY(var(--par, 0px)); } .home-e .polaroid-slot.p1 { top: 0%; left: -2%; width: 66%; z-index: 2; } .home-e .polaroid-slot.p2 { top: 23%; left: 36%; width: 66%; z-index: 3; } .home-e .polaroid-slot.p3 { top: 46%; left: -2%; width: 66%; z-index: 4; } .home-e .polaroid-slot:hover { z-index: 20; } .home-e .polaroid { position: relative; width: 100%; background: #FAF7F2; padding: 7px 7px 22px; border-radius: 3px; box-shadow: 0 24px 40px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.30); transition: transform 0.55s var(--ease), box-shadow 0.45s ease; will-change: transform; } .home-e .p1 .polaroid { transform: rotate(-6deg); } .home-e .p2 .polaroid { transform: rotate(5deg); } .home-e .p3 .polaroid { transform: rotate(-3deg); } .home-e .polaroid:hover { transform: translateY(-8px) rotate(0deg); box-shadow: 0 32px 56px rgba(0,0,0,0.55), 0 10px 24px rgba(0,0,0,0.40); } .home-e .polaroid-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #2a2620 0%, #1c1a16 100%); border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .home-e .polaroid-photo::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 38%, rgba(232,180,103,0.22) 0%, transparent 35%), radial-gradient(circle at 50% 78%, rgba(232,180,103,0.10) 0%, transparent 50%); } .home-e .polaroid-photo img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; object-fit: cover; } .home-e .polaroid-photo .polaroid-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(239,233,223,0.4); } /* ===== WIN3 · STORY-TIMELINE ===== */ .home-e .win3 .story-header { text-align: center; max-width: 900px; margin: 0 auto; } .home-e .story-subtitle { font-family: var(--sans); font-weight: 400; font-size: var(--fs-lead); color: var(--text-3); margin-top: 14px; } .home-e .story-flow { width: 100%; max-width: 1080px; margin: 0 auto; padding: 76px 20px 20px; position: relative; } .home-e .story-flow-line { position: absolute; left: 50%; top: 0; width: 2px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(232,180,103,0.28) 40px, rgba(232,180,103,0.5) 10%, rgba(232,180,103,0.5) 90%, rgba(232,180,103,0.28) calc(100% - 40px), transparent 100%); } .home-e .story-flow-line::after { content: ''; position: absolute; left: 50%; top: 0; width: 6px; height: 40px; border-radius: 3px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--amber), transparent); box-shadow: 0 0 14px rgba(232,180,103,0.6); animation: storyFlowPulse 8s ease-in-out infinite; } @keyframes storyFlowPulse { 0% { top: 0%; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { top: calc(100% - 40px); opacity: 0; } } .home-e .story-flow-items { display: flex; flex-direction: column; position: relative; z-index: 2; } .home-e .story-item { display: grid; grid-template-columns: 1fr 58px 1fr; align-items: center; min-height: 120px; opacity: 0; transition: opacity 0.7s var(--ease); } .home-e .story-item.visible { opacity: 1; } .home-e .story-content { padding: 28px 8px; } .home-e .story-item.left .story-content { grid-column: 1; text-align: right; padding-right: 18px; transform: translateX(-30px); transition: transform 0.7s var(--ease); } .home-e .story-item.right .story-content { grid-column: 3; text-align: left; padding-left: 18px; transform: translateX(30px); transition: transform 0.7s var(--ease); } .home-e .story-item.visible .story-content { transform: translateX(0); } .home-e .story-spacer { display: flex; align-items: center; } .home-e .story-item.left .story-spacer { grid-column: 3; justify-content: flex-start; padding-left: 20px; } .home-e .story-item.right .story-spacer { grid-column: 1; justify-content: flex-end; padding-right: 20px; } .home-e .story-aside { font-family: var(--serif); font-weight: 300; text-transform: uppercase; line-height: 1.08; font-size: clamp(1.5rem, 2.8vw, 2.5rem); letter-spacing: 0.08em; color: rgba(232,180,103,0.22); max-width: 6.5em; } .home-e .story-item.left .story-aside { text-align: left; } .home-e .story-item.right .story-aside { text-align: right; } .home-e .story-node { grid-column: 2; width: 58px; height: 80px; display: flex; align-items: center; justify-content: center; position: relative; } .home-e .story-node-dot { width: 14px; height: 14px; background: var(--amber); border-radius: 50%; position: relative; z-index: 2; transition: box-shadow 0.4s var(--ease); } .home-e .story-item.visible .story-node-dot { box-shadow: 0 0 15px rgba(232,180,103,0.5); } .home-e .story-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-title); color: var(--text); margin: 0 0 14px; line-height: 1.3; } .home-e .story-text { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.75; font-weight: 400; color: var(--text-2); margin: 0; } .home-e .story-text em { font-style: normal; color: var(--amber); } .home-e .story-subtext { font-family: var(--sans); font-style: normal; font-weight: 400; font-size: var(--fs-lead); color: var(--text-3); margin-top: 12px; display: block; } /* ===== WIN3 · SYNTHESE ===== */ .home-e .synthese { text-align: center; max-width: 1100px; margin: 0 auto; padding: 48px 20px 10px; } .home-e .synthese-node { display: flex; justify-content: center; margin-bottom: 34px; } .home-e .synthese-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 22px rgba(232,180,103,0.6); } .home-e .syn-title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--text); margin: 0 0 16px; letter-spacing: -0.01em; } .home-e .syn-lead { max-width: 660px; margin: 0 auto 32px; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); } /* ===== WIN3 · VENN ===== */ .home-e .venn-inline { max-width: 760px; margin: 6px auto 0; } .home-e .win3-container { width: 100%; } .home-e .win3-section { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 20px 0; } .home-e .win3-animation-container { position: relative; width: 100%; max-width: 760px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 0 auto; -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); } .home-e .win3-circles-svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; isolation: isolate; } .home-e .win3-circle { fill: rgba(232,180,103,0.045); stroke: var(--amber); stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(232,180,103,0.4)); } .home-e .win3-flow { display: none; } .home-e .win3-circles-svg.assembled .win3-flow { opacity: 0.9; } .home-e .win3-flow-1 { offset-path: path('M160,185 a140,140 0 1,1 280,0 a140,140 0 1,1 -280,0'); animation: win3Flow 9s linear infinite; } .home-e .win3-flow-2 { offset-path: path('M60.4,357.5 a140,140 0 1,1 280,0 a140,140 0 1,1 -280,0'); animation: win3Flow 9s linear infinite; animation-delay: -3s; } .home-e .win3-flow-3 { offset-path: path('M259.6,357.5 a140,140 0 1,1 280,0 a140,140 0 1,1 -280,0'); animation: win3Flow 9s linear infinite; animation-delay: -6s; } @keyframes win3Flow { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .home-e .win3-center-core { filter: drop-shadow(0 0 10px rgba(232,180,103,0.7)); } .home-e .win3-label-group { opacity: 0; transition: opacity 0.6s var(--ease); } .home-e .win3-label-group.visible { opacity: 1; } .home-e .win3-label-icon { font-size: 26px; fill: var(--amber); } .home-e .win3-label-title { font-family: var(--serif); font-size: 18px; font-weight: 500; fill: var(--text); } .home-e .win3-label-desc { font-family: var(--sans); font-size: 12px; font-weight: 400; fill: rgba(239,233,223,0.7); } .home-e .win3-center-symbol { opacity: 0; transition: opacity 0.7s var(--ease); } .home-e .win3-center-symbol.visible { opacity: 1; } .home-e .gold-gradient-stop1 { stop-color: #f2c778; } .home-e .gold-gradient-stop2 { stop-color: #e8b467; } .home-e .gold-gradient-stop3 { stop-color: #8a5a22; } /* ===== ANGEBOTE · ZWEI WEGE (kartenlose Baender) ===================== Loest die alte Preistabellen-Optik (.dw-*) ab. Zwei volle Baender, gegenlaeufig gesetzt, jedes mit seinem Zeichen als ruhige Zeichnung: konzentrische Ringe (UNDividuum) und das Win3-Venn (Ikigai-Prinzip). =================================================================== */ .home-e .wg-section { font-family: var(--sans); color: var(--text); position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: clamp(50px,8vw,110px) clamp(20px,5vw,40px) clamp(40px,6vw,80px); /* UNDividuum brand tokens - source: 10_Projects/UNDividuum Website/index-max.html */ --und-coral: oklch(68% .19 35); --und-gold: oklch(80% .16 84); --und-teal: oklch(64% .095 198); } .home-e .wg-lead { padding: 0 0 clamp(26px,4vw,42px); } /* Labels nutzen die Seiten-Klasse .eyebrow unveraendert - nur der Abstand kommt hier aus dem Grid-Gap statt aus margin-bottom. */ .home-e .wg-section .eyebrow { margin-bottom: 0; } /* Ebene 1 - identisch zu .section-title / .intro-title / .fcta-headline */ .home-e .wg-h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.01em; color: var(--text); margin: 14px 0 0; max-width: 17ch; } .home-e .wg-h2 em { font-style: italic; } /* UNDividuums Dreiklang-Band als Haarlinie - ihr Signature-Element */ .home-e .wg-triband { height: 2px; border: 0; margin: 0; opacity: 0.62; background: linear-gradient(90deg, var(--und-coral) 0 33.333%, var(--und-gold) 33.333% 66.666%, var(--und-teal) 66.666%); } .home-e .wg-band { position: relative; overflow: hidden; padding: clamp(40px,6vw,76px) 0; } .home-e .wg-band + .wg-band { border-top: 1px solid var(--border); } .home-e .wg-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.55; } .home-e .wg-art svg { position: absolute; height: 126%; top: -13%; } .home-e .wg-band-und .wg-art svg { right: -3%; } .home-e .wg-band-w3 .wg-art svg { left: -3%; } .home-e .wg-body { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 52ch; } /* Weg 02 sitzt in der rechten Haelfte, bleibt aber linksbuendig */ .home-e .wg-band-w3 .wg-body { margin-left: auto; text-align: left; } /* Level 2 - same scale and weight as .syn-title / .story-title. The wordmarks stand out through typeface and colour, not through weight. */ .home-e .wg-t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem,3.2vw,2.4rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--text); margin: 0; } /* Real UNDividuum wordmark (image asset, not a font lookalike). Height matched to the cap height of the surrounding headline. */ .home-e .wg-und-logo { height: 0.78em; width: auto; display: inline-block; vertical-align: -0.04em; } .home-e .wg-w3 { font-family: 'PacificaCondensed', 'Pacifico', cursive; font-weight: 400; letter-spacing: 0.5px; } .home-e .wg-w3 sup { color: var(--amber); font-size: 0.62em; vertical-align: super; } .home-e .wg-form { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-size: 15.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--text-3); } .home-e .wg-form i { width: 3px; height: 3px; border-radius: 50%; background: var(--amber-deep); flex: none; } .home-e .wg-band-und .wg-form i { background: var(--und-coral); opacity: 0.8; } /* Fliesstext exakt wie .intro-copy p / .story-text auf dem Rest der Seite */ .home-e .wg-p { margin: 0; color: var(--text-2); font-size: var(--fs-body); line-height: 1.7; max-width: 50ch; text-wrap: pretty; } .home-e .wg-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; max-width: 50ch; } .home-e .wg-pts li { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); } .home-e .wg-pts li::before { content: ''; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: rgba(232,180,103,0.55); } .home-e .wg-band-und .wg-pts li::before { background: color-mix(in oklch, var(--und-coral), transparent 45%); } .home-e .wg-pts b { color: var(--text); font-weight: 500; } .home-e .wg-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* Buttons nutzen .btn/.btn-outline aus der Hero unveraendert */ .home-e .wg-ext { font-size: 0.9em; opacity: 0.75; } .home-e .wg-seats { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-3); } .home-e .wg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(232,180,103,0.14); } .home-e .wg-band-und .wg-dot { background: var(--und-coral); box-shadow: 0 0 0 4px color-mix(in oklch, var(--und-coral), transparent 84%); } .home-e .wg-seats b { color: var(--text-2); font-weight: 600; } /* ===== TESTIMONIALS (aus Prototyp-Inline, gescopt) ===== */ .home-e .testimonial-section { --bg-surface: var(--surface); --accent-gold: var(--amber); --text-primary: var(--text); --text-muted: var(--text-2); --font-main: var(--sans); --ease-brand: var(--ease); font-family: var(--font-main); background: transparent; color: var(--text-primary); padding: 60px 0px; width: 100%; max-width: 100%; margin: 0; } .home-e .testimonial-container { width: 100%; max-width: 1600px; margin: 0 auto; } .home-e .testimonial-grid { column-count: 3; column-gap: 20px; width: 100%; } .home-e .title-card { background: transparent; padding: 25px; display: flex; flex-direction: column; justify-content: center; min-width: 0; opacity: 0; transform: translateY(30px); break-inside: avoid; margin-bottom: 20px; } .home-e .title-card.visible { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--ease-brand), transform 0.7s var(--ease-brand); } .home-e .testimonial-section .section-label { font-family: var(--font-main); font-size: var(--fs-eyebrow); line-height: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent-gold); margin-bottom: 22px; } .home-e .testimonial-section .section-title { font-family: 'Newsreader', Georgia, serif; font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 0; } .home-e .testimonial-section .section-title .light { font-weight: 300; display: block; } .home-e .testimonial-section .section-title .bold { font-weight: 500; display: block; } .home-e .title-arrow { display: flex; align-items: center; margin-top: 20px; color: var(--accent-gold); } .home-e .title-arrow svg { width: 40px; height: 40px; animation: arrowBounce 1.5s ease-in-out infinite; } @keyframes arrowBounce { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(10px); opacity: 1; } } .home-e .testimonial-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 30px; display: flex; flex-direction: column; min-width: 0; transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(30px); break-inside: avoid; margin-bottom: 20px; } .home-e .testimonial-card.visible { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--ease-brand), transform 0.7s var(--ease-brand), box-shadow 0.3s ease; } .home-e .testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .home-e .testimonial-card.visible:hover { transform: translateY(-3px); } .home-e .testimonial-card.highlighted { background: var(--bg); color: var(--text-primary); border: 1px solid var(--border); border-top: 3px solid var(--accent-gold); padding: 35px; margin-bottom: 20px; position: relative; z-index: 1; } .home-e .testimonial-card.highlighted .testimonial-role { color: var(--text-primary); opacity: 0.5; } .home-e .testimonial-card.highlighted .testimonial-quote { color: var(--text-primary); opacity: 1; } .home-e .testimonial-card.highlighted .star { color: var(--accent-gold); } .home-e .testimonial-author { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .home-e .testimonial-avatar { width: 150px; height: 100px; border-radius: var(--radius-btn); object-fit: cover; background: var(--bg-surface); flex-shrink: 0; } .home-e .testimonial-card.highlighted .testimonial-avatar { background: rgba(var(--amber-rgb),0.08); } .home-e .testimonial-info { display: flex; flex-direction: column; gap: 2px; padding-top: 5px; } .home-e .testimonial-name { font-weight: 600; font-size: var(--fs-body); color: var(--text-primary); } .home-e .testimonial-role { font-size: var(--fs-small); font-weight: 300; opacity: 0.85; color: var(--text-primary); } .home-e .testimonial-stars { display: flex; gap: 3px; margin-top: 8px; } .home-e .star { color: var(--accent-gold); width: 18px; height: 18px; } .home-e .testimonial-quote { font-size: var(--fs-body); line-height: 1.6; font-weight: 300; opacity: 1; } .home-e .swipe-indicator { display: none; align-items: center; justify-content: center; margin-top: 25px; color: var(--text-primary); opacity: 0.6; font-size: 14px; width: 100%; } .home-e .swipe-indicator-inner { display: flex; align-items: center; justify-content: center; gap: 0; } .home-e .swipe-arrow { font-size: 18px; width: 24px; text-align: center; display: inline-block; } .home-e .swipe-text { padding: 0 4px; } .home-e .swipe-arrow.left { animation: swipeOutLeft 1.5s ease-in-out infinite; } .home-e .swipe-arrow.right { animation: swipeOutRight 1.5s ease-in-out infinite; } @keyframes swipeOutLeft { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(-8px); opacity: 1; } } @keyframes swipeOutRight { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(8px); opacity: 1; } } .home-e .swipe-dots { display: none; justify-content: center; gap: 8px; margin-top: 15px; } .home-e .swipe-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-surface); transition: background 0.3s ease, transform 0.3s ease; } .home-e .swipe-dot.active { background: var(--accent-gold); transform: scale(1.2); } /* ===== FINAL CTA (aus Prototyp-Inline, gescopt) ===== */ .home-e .w3-logo { font-family: 'PacificaCondensed', 'Pacifico', cursive; font-weight: normal; font-size: 0.95em; letter-spacing: 2px; white-space: nowrap; color: var(--text); } .home-e .w3-logo-sup { color: var(--amber); font-size: 0.7em; margin-left: 1px; vertical-align: super; } /* overflow:hidden keeps the glow inside. Without it the section widened the document, and since is overflow-x:visible that widens the containing block of every position:fixed element too - the header grew past the screen and took the hamburger button off it. */ .home-e .fcta-wrap { position: relative; margin-bottom: 0; overflow: hidden; } .home-e .fcta-fade { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .home-e .fcta-fade.visible { opacity: 1; transform: translateY(0); } .home-e .fcta-section { font-family: 'Albert Sans', system-ui, sans-serif; color: var(--text); padding: clamp(80px, 11vw, 150px) 0; width: 100%; position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; background: transparent; } .home-e .fcta-container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 40px; text-align: left; position: relative; z-index: 2; } /* The page's one other light source besides the hero fluid: the close is lit from the right, so the eye lands there after reading the block on the left. */ .home-e .fcta-glow { position: absolute; z-index: 1; pointer-events: none; right: max(-140px, calc(50% - 640px)); top: 50%; transform: translateY(-50%); width: min(760px, 78vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(var(--amber-rgb), 0.15), rgba(var(--amber-rgb), 0.04) 52%, transparent 72%); } .home-e .fcta-body { max-width: 58ch; } .home-e .fcta-label { font-family: 'Albert Sans', system-ui, sans-serif; font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); opacity: 0.9; margin-bottom: 22px; } .home-e .fcta-headline { font-family: 'Newsreader', Georgia, serif; font-size: var(--fs-h2); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--text); max-width: 20ch; margin-bottom: 24px; } .home-e .fcta-headline em { font-style: italic; color: var(--amber); } .home-e .fcta-text { font-family: 'Albert Sans', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); margin: 0; } .home-e .fcta-text + .fcta-text { margin-top: 22px; } /* Signed off, so the block reads as written by a person rather than a section. Same treatment as .mission-text further up the page. */ .home-e .fcta-sign { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); margin: 28px 0 0; } /* The threshold: one line to step over. It draws itself in from the left. */ /* Draws itself in from the left. Runs on background-size, not on transform - .fcta-fade already owns this element's transform for the fade-up. */ .home-e .fcta-threshold { height: 1px; margin: clamp(34px, 5vw, 52px) 0 clamp(28px, 4vw, 40px); background-image: linear-gradient(90deg, rgba(var(--amber-rgb), 0.55), rgba(var(--amber-rgb), 0.14) 38%, rgba(var(--amber-rgb), 0) 78%); background-repeat: no-repeat; background-size: 12% 100%; transition: background-size 1s cubic-bezier(0.16, 1, 0.3, 1); } .home-e .fcta-threshold.visible { background-size: 100% 100%; } .home-e .fcta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; } .home-e .fcta-hint { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-3); max-width: 34ch; line-height: 1.5; margin: 0; } .home-e .fcta-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 34px; border-radius: var(--radius-btn); font-family: 'Albert Sans', system-ui, sans-serif; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); min-height: 48px; line-height: 1; box-sizing: border-box; } .home-e .fcta-cta:hover { transform: translateY(-2px); } .home-e .fcta-cta-primary { background: var(--amber); color: var(--on-gold); border: none; box-shadow: 0 10px 34px rgba(var(--amber-rgb), 0.16); } .home-e .fcta-cta-primary:hover { box-shadow: 0 14px 44px rgba(var(--amber-rgb), 0.32); } .home-e .fcta-cta-arrow { width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease); } .home-e .fcta-cta:hover .fcta-cta-arrow { transform: translateX(4px); } .home-e .fcta-mailto { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-2); text-align: left; margin: clamp(30px, 4vw, 44px) 0 0; } .home-e .fcta-mailto a { color: var(--amber); text-decoration: none; border-bottom: 1px solid rgba(var(--amber-rgb), 0.35); transition: border-color .3s; } .home-e .fcta-mailto a:hover { border-bottom-color: var(--amber); } /* ===== Well-filled lines: balance headings, avoid last-line orphans ===== */ .home-e .section-title, .home-e .intro-title, .home-e .dw-title, .home-e .dw-card-title, .home-e .story-title, .home-e .syn-title, .home-e .fcta-headline, .home-e .testimonial-section .section-title, .home-e .mission-text, .home-e .story-subtitle { text-wrap: balance; } .home-e .hero-sub, .home-e .intro-copy p, .home-e .intro-q, .home-e .syn-lead, .home-e .story-text, .home-e .story-subtext, .home-e .fcta-text, .home-e .testimonial-quote, .home-e .dw-price-note, .home-e .dw-card-subtitle { text-wrap: pretty; } /* ===== REVEAL ===== */ .home-e .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .home-e .reveal.in { opacity: 1; transform: none; } /* ===== PRELOADER (außerhalb .home-e, an ) ===== */ #home-preloader { --amber:#e8b467; --amber-rgb:232,180,103; --bg:#0e0d0b; --text-3:#8f887b; --mono: ui-monospace, Menlo, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; transition: opacity 0.8s var(--ease), visibility 0.8s; } #home-preloader.done { opacity: 0; visibility: hidden; } #home-preloader .pl-glow { position: absolute; width: min(620px, 92vw); height: min(620px, 92vw); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--amber-rgb),0.14), transparent 62%); } #home-preloader .pl-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 42px; transition: transform 0.8s var(--ease), opacity 0.8s var(--ease); } #home-preloader.done .pl-wrap { transform: translateY(-16px); opacity: 0; } #home-preloader .pl-logo { width: min(352px, 70vw); height: min(352px, 70vw); object-fit: contain; animation: plBreathe 5200ms ease-in-out infinite; } @keyframes plBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232,180,103,0)); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 18px rgba(232,180,103,0.22)); } } #home-preloader .pl-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; } #home-preloader .pl-track { width: 210px; height: 1px; background: rgba(var(--amber-rgb),0.14); position: relative; overflow: hidden; } #home-preloader .pl-track i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--amber); box-shadow: 0 0 10px rgba(var(--amber-rgb),0.7); } #home-preloader .pl-cap { font-family: var(--mono); font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-3); } #home-preloader .pl-cap b { color: var(--amber); font-weight: 400; font-variant-numeric: tabular-nums; } /* =================================================================== RESPONSIVE =================================================================== */ @media (max-width: 1080px) { .home-e .wg-body { max-width: 60ch; } } @media (max-width: 1024px) { .home-e .testimonial-grid { column-count: 2; } .home-e .fcta-section { padding: 80px 0; min-height: auto; } .home-e .fcta-container { padding: 0 30px; } } @media (max-width: 860px) { .home-e .intro-grid { grid-template-columns: 1fr; gap: 48px; } .home-e .intro-photo { position: static; } .home-e .polaroid-wrap { margin: 0 auto; } } @media (max-width: 768px) { /* Story-Timeline */ .home-e .story-item { grid-template-columns: 50px 1fr; gap: 0 12px; min-height: auto; padding: 18px 0; } .home-e .story-node { grid-column: 1; grid-row: 1; width: 50px; height: 50px; align-self: start; margin-top: 6px; } .home-e .story-node-dot { width: 12px; height: 12px; } .home-e .story-item.left .story-content, .home-e .story-item.right .story-content { grid-column: 2; text-align: left; padding: 0; transform: translateX(20px); } .home-e .story-item.visible .story-content { transform: translateX(0); } .home-e .story-spacer { display: none; } .home-e .story-title { font-size: 1.2rem; margin-bottom: 8px; } .home-e .story-text { font-size: var(--fs-small); line-height: 1.65; } .home-e .story-subtext { font-size: var(--fs-lead); margin-top: 10px; } /* Venn */ .home-e .win3-animation-container { max-width: 460px; } /* Synthese */ .home-e .synthese-node { display: none; } .home-e .syn-title { font-size: 1.6rem; } /* Testimonials -> Slider */ .home-e .testimonial-section { padding: 50px 0; } .home-e .testimonial-grid { column-count: unset; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding: 0 16px 30px; } .home-e .testimonial-grid::-webkit-scrollbar { display: none; } .home-e .title-card { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; opacity: 1; transform: none; margin-bottom: 0; order: 0; } .home-e .testimonial-card { flex: 0 0 100%; scroll-snap-align: center; opacity: 1; transform: none; margin-bottom: 0; } .home-e .testimonial-card.highlighted { flex: 0 0 100%; padding: 28px; } .home-e .testimonial-avatar { width: 100px; height: 100px; } .home-e .swipe-indicator { display: flex; } .home-e .swipe-dots { display: flex; } /* Final CTA */ .home-e .fcta-section { padding: 60px 0; } .home-e .fcta-container { padding: 0 12px; } .home-e .fcta-label { letter-spacing: 0.28em; margin-bottom: 12px; } .home-e .fcta-headline { margin-bottom: 14px; } .home-e .fcta-sign { font-size: 18px; margin-top: 18px; } .home-e .fcta-actions { flex-direction: column; align-items: flex-start; gap: 14px; } .home-e .fcta-cta { padding: 15px 28px; font-size: 15px; letter-spacing: 0.02em; } .home-e .fcta-hint { max-width: none; } .home-e .fcta-glow { width: min(560px, 120vw); right: -30%; opacity: 0.8; } } @media (max-width: 680px) { /* stacked bands: drawing steps back, text takes the full width */ .home-e .wg-body { max-width: none; } .home-e .wg-band-w3 .wg-body { margin-left: 0; } .home-e .wg-art { opacity: 0.2; } .home-e .wg-art svg { height: 100%; top: 0; } .home-e .wg-band-und .wg-art svg { right: -18%; } .home-e .wg-band-w3 .wg-art svg { left: -18%; } .home-e .wg-foot { gap: 14px; } .home-e .wg-cta { padding: 13px 22px; font-size: 14px; } /* compact bands on phones */ .home-e .wg-band { padding: clamp(32px,7vw,48px) 0; } .home-e .wg-body { gap: 18px; } .home-e .wg-pts li { font-size: 15px; } } @media (max-width: 560px) { .home-e .hero-actions { flex-direction: column; align-items: center; gap: 12px; } .home-e .btn { padding: 11px 20px; font-size: 13px; letter-spacing: 0.04em; } .home-e .hero-actions .btn { width: auto; } .home-e .hero-inner { padding-top: clamp(12px, 3vh, 34px); padding-left: 14px; padding-right: 14px; } .home-e .hero-title { font-size: min(2.9rem, calc(11.2vw - 4px)); } /* as large as possible while staying 2 lines */ .home-e .hero-eyebrow { display: block; text-align: center; text-wrap: balance; font-size: 12px; letter-spacing: 0.25em; margin-bottom: 28px; } /* Centre below the header, not in the whole hero: the header is fixed at 100px, the hero block is centred, so on shorter phones the block rises faster than the header and the music bar ran into it. */ .home-e .hero-content { padding-top: 100px; padding-bottom: 96px; } .home-e .scroll-cue { bottom: 24px; } } /* Same on short phones (iPhone SE and friends): there the cue sat 55px ON the hero buttons. Without it the reserved space at the bottom can go too. MUST stay after the max-width:560px block above - it overrides the 96px padding-bottom declared there, and equal specificity means source order decides. It sat before that block for a while and simply never applied. */ @media (max-width: 768px) and (max-height: 780px) { .home-e .scroll-cue { display: none; } .home-e .hero-content { padding-bottom: 28px; } } @media (max-width: 480px) { .home-e .polaroid-wrap { max-width: 300px; } .home-e .polaroid { padding: 5px 5px 17px; } } /* =================================================================== Unified mobile type scale (<=768px) - one value per role. Derived from the offer cards. Hero is intentionally excluded. Section-H2 keeps its responsive clamp (28px -> up). =================================================================== */ @media (max-width: 768px) { /* Title / sub-heading */ .home-e .wg-t, .home-e .story-title, .home-e .syn-title, .home-e .fcta-sign, .home-e .intro-mission .mission-text { font-size: 22px; } /* Lead / subtitle */ .home-e .story-subtitle, .home-e .syn-lead, .home-e .intro-copy p.intro-q { font-size: 18px; } /* Body */ .home-e .intro-copy p, .home-e .story-text, .home-e .wg-p, .home-e .wg-pts li, .home-e .wg-form, .home-e .fcta-text, .home-e .fcta-hint, .home-e .fcta-mailto, .home-e .testimonial-quote { font-size: 15px; } /* Label (incl. all section eyebrows/kickers) */ .home-e .wg-seats, .home-e .testimonial-role, .home-e .fcta-label, .home-e .eyebrow, .home-e .testimonial-section .section-label { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .home-e *, .home-e *::before, .home-e *::after { animation: none !important; transition: none !important; } .home-e .reveal { opacity: 1; transform: none; } .home-e .story-item { opacity: 1; } .home-e .story-item .story-content { transform: none; } .home-e .story-flow-line::after { display: none; } .home-e .polaroid { transition: none; } .home-e .polaroid:hover { transform: none !important; } .home-e .win3-flow { display: none; } }