/* Theme Name: Hello Elementor Child — Finanzen im Griff Theme URI: https://finanzen-im-griff.eu Description: Child theme for Hello Elementor — Finanzen im Griff! / Golden Harvest Ltd. Author: Webweezl Author URI: https://webweezl.de Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* Theme Name: Hello Elementor Child — Finanzen im Griff Theme URI: https://finanzen-im-griff.eu Description: Child theme for Hello Elementor — Finanzen im Griff! / Golden Harvest Ltd. Author: Webweezl Author URI: https://webweezl.de Template: hello-elementor Version: 1.1.0 Text Domain: hello-elementor-child */ /* ════════════════════════════════════════════════════════════════ FINANZEN IM GRIFF! — DESIGN SYSTEM These classes are applied to Elementor containers/widgets via the "CSS Classes" field on each element. Edit page content via Elementor visual editor — layout/styling stays driven from this stylesheet. ════════════════════════════════════════════════════════════════ */ :root { /* Dark hero palette (book stage only) */ --fp-navy: #0A1628; --fp-navy-deep: #061021; /* Light body palette */ --fp-bg: #F8F4EC; --fp-bg-card: #FFFFFF; --fp-bg-soft: #F0EAE0; --fp-ink: #0E4D5E; --fp-text: #2A3441; --fp-text-muted: #5A6776; --fp-text-dim: #8A95A4; --fp-border: #E5DFD2; --fp-border-strong: #C9C0AE; /* Accents */ --fp-accent: #F5B81B; --fp-accent-soft: #FCEBB4; /* Teal (icon pills, secondary blocks) */ --fp-teal: #6FA8A2; --fp-teal-pill: #B6D7D2; --fp-teal-pill-soft: #DDEDEA; --fp-teal-deep: #114954; /* Quiz module mirror — needed because quiz modal renders to , outside .fp-page */ --q-accent: #F5B81B; --q-bg: #0A1628; --q-bg-elev: #122340; --q-bg-panel: #16294a; --q-text: #FFFFFF; --q-text-muted: #C8D2E2; --q-text-dim: #8A9AB2; --q-border: rgba(255, 255, 255, 0.08); --q-border-strong: rgba(255, 255, 255, 0.18); --q-radius: 4px; --q-radius-lg: 12px; } /* Body base */ body { background: var(--fp-bg); color: var(--fp-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ─── Hero (dark, book stage) ─── */ /* Apply class "fp-hero-dark" to a container */ .fp-hero-dark { background: radial-gradient(ellipse 80% 50% at 70% 60%, rgba(245, 184, 27, 0.10), transparent 60%), radial-gradient(ellipse 100% 60% at 30% 100%, rgba(50, 110, 200, 0.16), transparent 70%), var(--fp-navy) !important; color: white !important; padding: 96px 0 120px !important; position: relative; overflow: hidden; } .fp-hero-dark .elementor-heading-title, .fp-hero-dark h1, .fp-hero-dark h2, .fp-hero-dark h3 { color: white !important; } .fp-hero-dark p, .fp-hero-dark .elementor-widget-text-editor { color: rgba(255, 255, 255, 0.78) !important; } /* Hero headline (apply to heading widget) */ .fp-hero-headline { font-family: 'Archivo', sans-serif !important; font-weight: 900 !important; font-size: clamp(40px, 4.8vw, 76px) !important; line-height: 1.08 !important; letter-spacing: -0.018em !important; color: white !important; margin-bottom: 36px !important; } .fp-hero-headline .fp-accent { color: var(--fp-accent) !important; } /* Hero sub */ .fp-hero-sub { font-size: 21px !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.78) !important; font-weight: 300 !important; max-width: 600px !important; } /* Hero microcopy row */ .fp-hero-microcopy { font-size: 14px !important; color: rgba(255, 255, 255, 0.55) !important; display: flex; gap: 18px; flex-wrap: wrap; } .fp-hero-microcopy span { display: flex; align-items: center; gap: 8px; } .fp-hero-microcopy span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--fp-accent); } /* Eyebrow (small uppercase label) */ .fp-eyebrow { font-size: 12px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--fp-ink) !important; font-weight: 700 !important; } .fp-eyebrow.on-dark { color: var(--fp-accent) !important; } /* Brand wordmark (top of hero) */ .fp-brand-mark { font-weight: 600 !important; font-size: 17px !important; color: white !important; display: flex !important; align-items: center !important; gap: 12px !important; } .fp-brand-mark::before { content: ""; width: 8px; height: 8px; background: var(--fp-accent); border-radius: 50%; display: inline-block; } /* ─── Buttons (Elementor button widget with css_class fp-btn) ─── */ .fp-btn .elementor-button, .fp-btn-yellow .elementor-button { background: var(--fp-accent) !important; color: var(--fp-navy) !important; padding: 20px 36px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: 0.01em !important; border: none !important; box-shadow: 0 14px 36px rgba(245, 184, 27, 0.28); transition: transform 0.15s, box-shadow 0.15s; } .fp-btn .elementor-button:hover, .fp-btn-yellow .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(245, 184, 27, 0.4); } /* ─── Light intro section ─── */ .fp-light-section { background: var(--fp-bg) !important; padding: 120px 0 !important; } .fp-intro-block h3, .fp-intro-headline { font-family: 'Archivo', sans-serif !important; font-weight: 800 !important; font-size: clamp(32px, 3.6vw, 48px) !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; color: var(--fp-ink) !important; } .fp-intro-text p, .fp-intro-text { font-size: 19px !important; line-height: 1.75 !important; color: var(--fp-text) !important; } .fp-intro-list ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .fp-intro-list li { color: var(--fp-text) !important; padding: 14px 0 14px 36px !important; position: relative; font-size: 18px !important; line-height: 1.6 !important; } .fp-intro-list li::before { content: ""; position: absolute; left: 0; top: 26px; width: 22px; height: 1px; background: var(--fp-accent); } /* Pull-out (Nach dem Test haben Sie...) */ .fp-pullout { color: var(--fp-ink) !important; font-weight: 600 !important; font-size: 19px !important; } /* Quiz section wrapper */ .fp-quiz-section { background: var(--fp-bg) !important; padding: 80px 0 120px !important; } /* Footer */ .fp-footer { background: var(--fp-bg-soft) !important; border-top: 1px solid var(--fp-border); padding: 56px 0 !important; font-size: 13px !important; color: var(--fp-text-muted) !important; line-height: 1.7 !important; } .fp-footer a { color: var(--fp-ink) !important; text-decoration: none !important; font-weight: 500 !important; } /* Mobile */ @media (max-width: 960px) { body { font-size: 17px; } .fp-light-section { padding: 80px 0 !important; } .fp-quiz-section { padding: 56px 0 80px !important; } } /* ════════════════════════════════════════════════════════════════ QUIZ MODULE STYLES — applied inside the HTML widget Scoped to .fig-quiz and .fig-quiz-modal-backdrop ════════════════════════════════════════════════════════════════ */ .fig-quiz, .fig-quiz-modal-backdrop { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--q-text); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .fig-quiz *, .fig-quiz-modal-backdrop * { box-sizing: border-box; } .fig-quiz { background: radial-gradient(ellipse 80% 50% at 50% 60%, rgba(245, 184, 27, 0.06), transparent 60%), radial-gradient(ellipse 100% 60% at 50% 100%, rgba(50, 110, 200, 0.10), transparent 70%), var(--q-bg); border-radius: var(--q-radius-lg); overflow: hidden; min-height: 560px; position: relative; box-shadow: 0 40px 80px rgba(14, 77, 94, 0.18); max-width: 1100px; margin: 0 auto; } .fig-quiz-stage { padding: 64px 56px 80px; min-height: 760px; display: flex; flex-direction: column; } @media (max-width: 720px) { .fig-quiz-stage { min-height: 640px; padding: 40px 24px 56px; } } .fig-quiz-view { animation: figFadeIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes figFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fig-quiz-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .fig-quiz .btn, .fig-quiz-modal-backdrop .btn { display: inline-flex; align-items: center; gap: 12px; background: var(--q-accent); color: #0A1628; padding: 18px 32px; border-radius: var(--q-radius); font-weight: 700; text-decoration: none; font-size: 15px; letter-spacing: 0.01em; border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 12px 30px rgba(245, 184, 27, 0.22); font-family: inherit; } .fig-quiz .btn:hover, .fig-quiz-modal-backdrop .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(245, 184, 27, 0.32); } .fig-quiz .btn:disabled, .fig-quiz-modal-backdrop .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .fig-quiz .btn-link, .fig-quiz-modal-backdrop .btn-link { background: transparent; color: var(--q-text-dim); text-decoration: none; font-size: 14px; padding: 8px 0; cursor: pointer; border: none; font-family: inherit; } .fig-quiz .btn-link:hover, .fig-quiz-modal-backdrop .btn-link:hover { color: var(--q-text); } /* Intro view */ .fig-quiz-intro h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 24px; color: white; } .fig-quiz-intro p { font-size: 18px; line-height: 1.65; color: var(--q-text-muted); margin: 0 0 16px; max-width: 640px; } .fig-quiz-intro .meta { margin: 36px 0; display: flex; gap: 18px; font-size: 14px; color: var(--q-text-dim); flex-wrap: wrap; } .fig-quiz-intro .meta span { display: flex; align-items: center; gap: 8px; } .fig-quiz-intro .meta span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--q-accent); } .fig-quiz-resume-banner { background: rgba(245, 184, 27, 0.08); border: 1px solid rgba(245, 184, 27, 0.25); border-radius: var(--q-radius); padding: 16px 20px; margin-bottom: 28px; font-size: 14px; color: var(--q-text-muted); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .fig-quiz-resume-banner b { color: var(--q-accent); font-weight: 600; } .fig-quiz-resume-banner .actions { display: flex; gap: 12px; } /* Quiz view */ .fig-quiz-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; font-size: 14px; color: var(--q-text-muted); letter-spacing: 0.04em; gap: 28px; } .fig-quiz-progress-bar { flex: 1; height: 2px; background: rgba(255,255,255,0.08); border-radius: 1px; overflow: hidden; } .fig-quiz-progress-fill { height: 100%; background: var(--q-accent); transition: width 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); } .fig-quiz-q-num { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; color: var(--q-accent); letter-spacing: 0.18em; margin-bottom: 22px; text-transform: uppercase; } .fig-quiz-q-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 48px; max-width: 720px; color: white; } .fig-quiz-options { display: flex; flex-direction: column; gap: 12px; } .fig-quiz-option { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; background: var(--q-bg-elev); border: 1px solid var(--q-border); border-radius: var(--q-radius); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; color: var(--q-text); font-size: 17px; line-height: 1.5; font-family: inherit; text-align: left; width: 100%; } .fig-quiz-option:hover { border-color: var(--q-accent); background: var(--q-bg-panel); } .fig-quiz-option-marker { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--q-border-strong); flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; transition: border-color 0.15s; } .fig-quiz-option:hover .fig-quiz-option-marker { border-color: var(--q-accent); } .fig-quiz-option.selected { border-color: var(--q-accent); background: var(--q-bg-panel); } .fig-quiz-option.selected .fig-quiz-option-marker { border-color: var(--q-accent); } .fig-quiz-option.selected .fig-quiz-option-marker::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--q-accent); } .fig-quiz-foot { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } /* Loading */ .fig-quiz-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; padding: 64px 24px; } .fig-quiz-loading-spin { width: 48px; height: 48px; border: 2px solid rgba(245, 184, 27, 0.15); border-top-color: var(--q-accent); border-radius: 50%; animation: figSpin 0.9s linear infinite; margin-bottom: 32px; } @keyframes figSpin { to { transform: rotate(360deg); } } .fig-quiz-loading p { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 22px; color: var(--q-text-muted); } /* Result view */ .fig-quiz-result-eyebrow { margin-bottom: 20px; color: var(--q-text-muted); font-size: 14px; letter-spacing: 0.04em; } .fig-quiz-result-eyebrow .role-name { color: var(--q-accent); font-weight: 600; } .fig-quiz-result-headline-row { display: flex; align-items: center; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; } .fig-quiz-result-icon-pill { width: 96px; height: 96px; border-radius: 22px; background: var(--fp-teal-pill); display: grid; place-items: center; flex-shrink: 0; color: var(--fp-teal-deep); } .fig-quiz-result-icon-pill svg { width: 52px; height: 52px; } .fig-quiz-result-headline { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(44px, 5.8vw, 72px); line-height: 1.0; letter-spacing: -0.025em; margin: 0; color: white; } .fig-quiz-result-lead { font-size: 21px; color: var(--q-text-muted); line-height: 1.55; margin: 0 0 48px; max-width: 820px; font-weight: 300; } .fig-quiz-result-lead strong { color: white; font-weight: 500; } .fig-quiz-result-block { padding: 36px 0; border-top: 1px solid var(--q-border); } .fig-quiz-result-label { font-size: 12px; letter-spacing: 0.22em; color: var(--q-accent); text-transform: uppercase; font-weight: 600; margin-bottom: 18px; } .fig-quiz-result-block h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 18px; max-width: 800px; color: white; } .fig-quiz-result-block p { font-size: 18px; color: var(--q-text-muted); line-height: 1.7; margin: 0 0 14px; max-width: 760px; } /* Four roles overview */ .fig-quiz-four-roles { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--q-border); } .fig-quiz-four-roles-head { margin-bottom: 24px; } .fig-quiz-four-roles-head .label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--q-text-dim); font-weight: 700; margin-bottom: 6px; } .fig-quiz-four-roles-head h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(18px, 2vw, 22px); color: white; line-height: 1.3; } .fig-quiz-four-roles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 720px) { .fig-quiz-four-roles-grid { grid-template-columns: repeat(2, 1fr); } } .fig-quiz-role-card { padding: 22px 16px; background: var(--q-bg-elev); border: 1px solid var(--q-border); border-radius: 12px; text-align: center; } .fig-quiz-role-card.is-active { border-color: var(--q-accent); box-shadow: 0 12px 32px rgba(245, 184, 27, 0.18); } .fig-quiz-role-card-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(111, 168, 162, 0.18); display: grid; place-items: center; margin: 0 auto 12px; color: var(--fp-teal-pill); } .fig-quiz-role-card.is-active .fig-quiz-role-card-icon { background: var(--fp-teal-pill); color: var(--fp-teal-deep); } .fig-quiz-role-card-icon svg { width: 28px; height: 28px; } .fig-quiz-role-card h5 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; color: white; margin: 0 0 2px; } .fig-quiz-role-card-sub { font-size: 10px; color: var(--q-text-dim); letter-spacing: 0.05em; } .fig-quiz-result-cta { margin-top: 48px; background: var(--q-bg-panel); border: 1px solid var(--q-border-strong); border-radius: var(--q-radius-lg); padding: 36px 40px; display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; } @media (max-width: 720px) { .fig-quiz-result-cta { grid-template-columns: 1fr; padding: 28px; gap: 20px; } } .fig-quiz-result-cta h4 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; color: white; } .fig-quiz-result-cta p { color: var(--q-text-muted); font-size: 15px; line-height: 1.55; margin: 0; } .fig-quiz-result-cta.completed h4 { color: var(--q-accent); } /* Modal */ .fig-quiz-modal-backdrop { position: fixed; inset: 0; background: rgba(5, 11, 22, 0.78); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; animation: figBackdropIn 0.25s ease; } @keyframes figBackdropIn { from { opacity: 0; } to { opacity: 1; } } .fig-quiz-modal { background: var(--q-bg); border: 1px solid var(--q-border-strong); border-radius: var(--q-radius-lg); box-shadow: 0 60px 120px rgba(0,0,0,0.6); max-width: 640px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; position: relative; animation: figModalIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes figModalIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .fig-quiz-modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--q-border); color: var(--q-text-muted); cursor: pointer; font-size: 18px; display: grid; place-items: center; transition: background 0.15s, color 0.15s; z-index: 2; } .fig-quiz-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--q-text); } .fig-quiz-modal-body { padding: 56px 48px 48px; } @media (max-width: 720px) { .fig-quiz-modal-body { padding: 40px 24px 32px; } } .fig-quiz-form-eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--q-accent); font-weight: 600; margin-bottom: 20px; } .fig-quiz-form-headline { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; color: white; } .fig-quiz-form-intro { color: var(--q-text-muted); font-size: 16px; line-height: 1.6; margin: 0 0 32px; } .fig-quiz-form-row { display: grid; gap: 18px; margin-bottom: 18px; } .fig-quiz-form-row.two { grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .fig-quiz-form-row.two { grid-template-columns: 1fr; } } .fig-quiz-form-field { display: flex; flex-direction: column; gap: 8px; } .fig-quiz-form-field label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--q-text-dim); font-weight: 600; } .fig-quiz-form-field input { background: rgba(0, 0, 0, 0.25); border: 1px solid var(--q-border); border-radius: var(--q-radius); padding: 14px 16px; color: var(--q-text); font-family: inherit; font-size: 16px; transition: border-color 0.15s; } .fig-quiz-form-field input:focus { outline: none; border-color: var(--q-accent); } .fig-quiz-form-checkbox { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0; font-size: 13px; color: var(--q-text-muted); line-height: 1.55; cursor: pointer; } .fig-quiz-form-checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--q-accent); flex-shrink: 0; } .fig-quiz-form-checkbox a { color: var(--q-accent); text-decoration: underline; text-underline-offset: 3px; } .fig-quiz-form-error { background: rgba(245, 101, 101, 0.1); border: 1px solid rgba(245, 101, 101, 0.3); border-radius: var(--q-radius); padding: 12px 16px; color: #f56565; font-size: 14px; margin-bottom: 18px; } .fig-quiz-modal-thanks { text-align: center; padding: 24px 0; } .fig-quiz-modal-thanks-icon { width: 56px; height: 56px; margin: 0 auto 28px; border: 1.5px solid var(--q-accent); border-radius: 50%; display: grid; place-items: center; color: var(--q-accent); font-size: 26px; } .fig-quiz-modal-thanks h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; color: white; } .fig-quiz-modal-thanks p { font-size: 16px; color: var(--q-text-muted); line-height: 1.6; margin: 0 0 28px; font-weight: 300; } .fig-quiz-modal-thanks .small { margin-top: 28px; font-size: 12px; color: var(--q-text-dim); line-height: 1.55; }