/* ===== global base (from homepage) ===== */ /* ===== Expressive tweak layers (driven by data-attrs on ) ===== */ /* ─ MOOD · remaps the master accent across hero, buttons, CTA ─ */ html[data-mood="twilight"] { --o:#6A5685; --o-deep:#4733A8; --oT:#ECE8F0; } html[data-mood="meadow"] { --o:#2E8873; --o-deep:#1F8A77; --oT:#E7EEE9; } html[data-mood="warm"] .cta-band { background: linear-gradient(135deg,#E8704A,#C64F2C) !important; } html[data-mood="twilight"] .cta-band { background: linear-gradient(135deg,#6A5685,#4733A8) !important; } html[data-mood="meadow"] .cta-band { background: linear-gradient(135deg,#2E8873,#1F8A77) !important; } /* ─ SHAPE · reshapes the pebble / card radius vocabulary everywhere ─ */ html[data-shape="rounded"] { --peb1:34px; --peb2:34px; --peb3:34px; } html[data-shape="rounded"] .door { border-radius:30px; } html[data-shape="rounded"] .finder-band { border-radius:34px; } html[data-shape="crisp"] { --peb1:10px; --peb2:10px; --peb3:10px; } html[data-shape="crisp"] .door { border-radius:12px; } html[data-shape="crisp"] .finder-band { border-radius:14px; } html[data-shape="crisp"] .finder-card { border-radius:12px; } html[data-shape="crisp"] .finder-row { border-radius:9px; } html[data-shape="crisp"] .btn { border-radius:12px; } html[data-shape="crisp"] .pill { border-radius:12px; } /* ─ ATMOSPHERE · shadow depth + hero glow wash ─ */ html[data-atmo="calm"] .door, html[data-atmo="calm"] .finder-card, html[data-atmo="calm"] .peb-main { box-shadow:none !important; } html[data-atmo="calm"] .door { border:1.5px solid var(--line); } html[data-atmo="bold"] body { background: radial-gradient(60% 45% at 82% 2%, color-mix(in oklab, var(--o) 22%, transparent) 0%, transparent 55%), radial-gradient(50% 40% at 8% 96%, color-mix(in oklab, var(--p) 18%, transparent) 0%, transparent 55%), var(--bg); } html[data-atmo="bold"] .peb-main { box-shadow: 0 54px 110px -30px var(--o), inset 0 -16px 46px rgba(0,0,0,0.18) !important; } html[data-atmo="bold"] .door { box-shadow: 0 36px 62px -26px rgba(46,42,38,0.5) !important; } html[data-atmo="bold"] .door:hover { box-shadow: 0 48px 80px -30px rgba(46,42,38,0.55) !important; } html[data-atmo="bold"] .finder-card { box-shadow: 0 40px 80px -30px rgba(46,42,38,0.55) !important; } /* Homepage — the Pebble concept, promoted to the live umbrella page. Orange = master brand. */ .hero h1 .ac { color: var(--o); } .quote .qm, .quote .em { color: var(--o); } /* ── Pebble hero stage: big brand pebble + satellites ── */ .peb-stage { position: relative; display: grid; place-items: center; min-height: 480px; } .peb-main { width: 340px; height: 340px; background: var(--o); border-radius: var(--peb1); display: grid; place-items: center; box-shadow: 0 34px 66px -30px var(--o); } .peb-sat { position: absolute; display: grid; place-items: center; } .peb-pill { position: absolute; background: #fff; border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 14px 30px -14px rgba(23,23,23,0.32); } .peb-pill b { font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; } /* ── Three little doors ── */ .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .door { border: 2px solid transparent; border-radius: 40px; padding: 28px; display: flex; flex-direction: column; min-height: 258px; box-shadow: 0 14px 30px -22px rgba(23,23,23,0.3); transition: transform .2s ease, box-shadow .2s ease; } .door:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -28px rgba(23,23,23,0.32); } /* saturated "chunky toy" door variant */ .door.solid { box-shadow: 0 20px 40px -22px rgba(23,23,23,0.5); } .door.solid .d-ico { background: rgba(255,255,255,0.22) !important; } .door.solid .d-name { color: #fff !important; } .door.solid p { color: rgba(255,255,255,0.86) !important; } .door.solid .d-tag, .door.solid .d-link { color: rgba(255,255,255,0.82) !important; } /* ── Playful hero tile-cluster ── */ .toy-stage { position: relative; display: grid; place-items: center; min-height: 480px; } .toy { position: absolute; display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(23,23,23,0.4); } @keyframes toy-bob { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-9px) rotate(var(--r,0deg)); } } @media (prefers-reduced-motion: no-preference) { .toy { animation: toy-bob 4.5s ease-in-out infinite; } } /* ── Fun stat strip ── */ .funstats { background: var(--ink); border-radius: 34px; padding: 30px 20px; display: grid; grid-template-columns: repeat(4, 1fr); } .funstats .m { text-align: center; position: relative; } .funstats .m + .m::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: rgba(255,255,255,0.14); } .funstats .v { font-weight: 900; font-size: 44px; letter-spacing: -0.04em; line-height: 1; } .funstats .l { font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,0.62); margin-top: 8px; } .door .d-ico { width: 72px; height: 72px; border-radius: var(--peb1); display: grid; place-items: center; margin-bottom: 18px; background: #fff; } .door .d-tag { font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } .door .d-name { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin-top: 2px; } .door p { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink2); margin: 8px 0 16px; flex: 1; } .door .d-link { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; } .door:hover .d-link .arr { transform: translateX(4px); } .door .d-link .arr { transition: transform .2s ease; } /* ── Pebble stat chips ── */ .peb-stats { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .peb-stat { padding: 22px 34px; text-align: center; min-width: 158px; } .peb-stat .v { font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; } .peb-stat .l { font-weight: 700; font-size: 14px; color: var(--ink2); margin-top: 6px; } /* ── Parent-app band ── */ .finder-band { background: var(--tT); border-radius: 44px; padding: 48px 52px; display: grid; grid-template-columns: 1fr 0.9fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } .finder-card { background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 24px 50px -30px rgba(23,23,23,0.4); } .finder-row { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 15px; padding: 11px 14px; } .pa-feats { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 440px; } .pa-feats li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 14px; color: var(--ink); } .pa-feats li svg { flex-shrink: 0; margin-top: 1px; } .finder-row + .finder-row { margin-top: 9px; } @media (max-width: 980px) { .doors { grid-template-columns: 1fr; } .finder-band { grid-template-columns: 1fr; } .peb-main { width: 280px; height: 280px; } } .lang-switch { display:inline-flex; background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:2px; gap:2px; } .lang-switch button { font-family:var(--font); font-weight:800; font-size:12px; letter-spacing:0.02em; color:var(--mute); background:transparent; border:none; border-radius:999px; padding:5px 11px; cursor:pointer; transition:background .15s, color .15s; } .lang-switch button.active { background:var(--o); color:#fff; } .lang-switch button:not(.active):hover { color:var(--ink); } /* ===== MAVIE Marketing.html ===== */ #pg-home /* ===== Expressive tweak layers (driven by data-attrs on ) ===== */ /* ─ MOOD · remaps the master accent across hero, #pg-home buttons, #pg-home CTA ─ */ html[data-mood="twilight"] { --o:#6A5685; --o-deep:#4733A8; --oT:#ECE8F0; } html[data-mood="meadow"] #pg-home { --o:#2E8873; --o-deep:#1F8A77; --oT:#E7EEE9; } html[data-mood="warm"] #pg-home .cta-band { background: linear-gradient(135deg,#E8704A,#C64F2C) !important; } html[data-mood="twilight"] #pg-home .cta-band { background: linear-gradient(135deg,#6A5685,#4733A8) !important; } html[data-mood="meadow"] #pg-home .cta-band { background: linear-gradient(135deg,#2E8873,#1F8A77) !important; } #pg-home /* ─ SHAPE · reshapes the pebble / card radius vocabulary everywhere ─ */ html[data-shape="rounded"] { --peb1:34px; --peb2:34px; --peb3:34px; } html[data-shape="rounded"] #pg-home .door { border-radius:30px; } html[data-shape="rounded"] #pg-home .finder-band { border-radius:34px; } html[data-shape="crisp"] #pg-home { --peb1:10px; --peb2:10px; --peb3:10px; } html[data-shape="crisp"] #pg-home .door { border-radius:12px; } html[data-shape="crisp"] #pg-home .finder-band { border-radius:14px; } html[data-shape="crisp"] #pg-home .finder-card { border-radius:12px; } html[data-shape="crisp"] #pg-home .finder-row { border-radius:9px; } html[data-shape="crisp"] #pg-home .btn { border-radius:12px; } html[data-shape="crisp"] #pg-home .pill { border-radius:12px; } #pg-home /* ─ ATMOSPHERE · shadow depth + hero glow wash ─ */ html[data-atmo="calm"] .door, html[data-atmo="calm"] #pg-home .finder-card, html[data-atmo="calm"] #pg-home .peb-main { box-shadow:none !important; } html[data-atmo="calm"] #pg-home .door { border:1.5px solid var(--line); } html[data-atmo="bold"] #pg-home body { background: radial-gradient(60% 45% at 82% 2%, color-mix(in oklab, var(--o) 22%, transparent) 0%, transparent 55%), radial-gradient(50% 40% at 8% 96%, color-mix(in oklab, var(--p) 18%, transparent) 0%, transparent 55%), var(--bg); } html[data-atmo="bold"] #pg-home .peb-main { box-shadow: 0 54px 110px -30px var(--o), inset 0 -16px 46px rgba(0,0,0,0.18) !important; } html[data-atmo="bold"] #pg-home .door { box-shadow: 0 36px 62px -26px rgba(46,42,38,0.5) !important; } html[data-atmo="bold"] #pg-home .door:hover { box-shadow: 0 48px 80px -30px rgba(46,42,38,0.55) !important; } html[data-atmo="bold"] #pg-home .finder-card { box-shadow: 0 40px 80px -30px rgba(46,42,38,0.55) !important; } #pg-home /* Homepage — the Pebble concept, #pg-home promoted to the live umbrella page. Orange = master brand. */ .hero h1 .ac { color: var(--o); } #pg-home .quote .qm, #pg-home .quote .em { color: var(--o); } #pg-home /* ── Pebble hero stage: big brand pebble + satellites ── */ .peb-stage { position: relative; display: grid; place-items: center; min-height: 480px; } #pg-home .peb-main { width: 340px; height: 340px; background: var(--o); border-radius: var(--peb1); display: grid; place-items: center; box-shadow: 0 34px 66px -30px var(--o); } #pg-home .peb-sat { position: absolute; display: grid; place-items: center; } #pg-home .peb-pill { position: absolute; background: #fff; border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 14px 30px -14px rgba(23,23,23,0.32); } #pg-home .peb-pill b { font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; } #pg-home /* ── Three little doors ── */ .doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #pg-home .door { border: 2px solid transparent; border-radius: 40px; padding: 28px; display: flex; flex-direction: column; min-height: 258px; box-shadow: 0 14px 30px -22px rgba(23,23,23,0.3); transition: transform .2s ease, box-shadow .2s ease; } #pg-home .door:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -28px rgba(23,23,23,0.32); } #pg-home /* saturated "chunky toy" door variant */ .door.solid { box-shadow: 0 20px 40px -22px rgba(23,23,23,0.5); } #pg-home .door.solid .d-ico { background: rgba(255,255,255,0.22) !important; } #pg-home .door.solid .d-name { color: #fff !important; } #pg-home .door.solid p { color: rgba(255,255,255,0.86) !important; } #pg-home .door.solid .d-tag, #pg-home .door.solid .d-link { color: rgba(255,255,255,0.82) !important; } #pg-home /* ── Playful hero tile-cluster ── */ .toy-stage { position: relative; display: grid; place-items: center; min-height: 480px; } #pg-home .toy { position: absolute; display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(23,23,23,0.4); } @keyframes toy-bob { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-9px) rotate(var(--r,0deg)); } } @media (prefers-reduced-motion: no-preference) { #pg-home .toy { animation: toy-bob 4.5s ease-in-out infinite; } } #pg-home /* ── Fun stat strip ── */ .funstats { background: var(--ink); border-radius: 34px; padding: 30px 20px; display: grid; grid-template-columns: repeat(4, 1fr); } #pg-home .funstats .m { text-align: center; position: relative; } #pg-home .funstats .m + .m::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: rgba(255,255,255,0.14); } #pg-home .funstats .v { font-weight: 900; font-size: 44px; letter-spacing: -0.04em; line-height: 1; } #pg-home .funstats .l { font-weight: 700; font-size: 13.5px; color: rgba(255,255,255,0.62); margin-top: 8px; } #pg-home .door .d-ico { width: 72px; height: 72px; border-radius: var(--peb1); display: grid; place-items: center; margin-bottom: 18px; background: #fff; } #pg-home .door .d-tag { font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; } #pg-home .door .d-name { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin-top: 2px; } #pg-home .door p { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink2); margin: 8px 0 16px; flex: 1; } #pg-home .door .d-link { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; } #pg-home .door:hover .d-link .arr { transform: translateX(4px); } #pg-home .door .d-link .arr { transition: transform .2s ease; } #pg-home /* ── Pebble stat chips ── */ .peb-stats { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } #pg-home .peb-stat { padding: 22px 34px; text-align: center; min-width: 158px; } #pg-home .peb-stat .v { font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; } #pg-home .peb-stat .l { font-weight: 700; font-size: 14px; color: var(--ink2); margin-top: 6px; } #pg-home /* ── Parent-app band ── */ .finder-band { background: var(--tT); border-radius: 44px; padding: 48px 52px; display: grid; grid-template-columns: 1fr 0.9fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } #pg-home .finder-card { background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 24px 50px -30px rgba(23,23,23,0.4); } #pg-home .finder-row { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 15px; padding: 11px 14px; } #pg-home .pa-feats { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; max-width: 440px; } #pg-home .pa-feats li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 14px; color: var(--ink); } #pg-home .pa-feats li svg { flex-shrink: 0; margin-top: 1px; } #pg-home .finder-row + .finder-row { margin-top: 9px; } @media (max-width: 980px) { #pg-home .doors { grid-template-columns: 1fr; } #pg-home .finder-band { grid-template-columns: 1fr; } #pg-home .peb-main { width: 280px; height: 280px; } } #pg-home .lang-switch { display:inline-flex; background:var(--bg); border:1.5px solid var(--line); border-radius:999px; padding:2px; gap:2px; } #pg-home .lang-switch button { font-family:var(--font); font-weight:800; font-size:12px; letter-spacing:0.02em; color:var(--mute); background:transparent; border:none; border-radius:999px; padding:5px 11px; cursor:pointer; transition:background .15s, color .15s; } #pg-home .lang-switch button.active { background:var(--o); color:#fff; } #pg-home .lang-switch button:not(.active):hover { color:var(--ink); } /* ===== MAVIE For Kitas.html ===== */ #pg-kitas /* page-specific: purple operator theme */ .hero h1 .ac { color: var(--p); } #pg-kitas .quote .qm, #pg-kitas .quote .em { color: var(--p); } #pg-kitas /* desktop dashboard mock */ .winframe { width: 100%; max-width: 540px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 40px 80px -40px rgba(23,23,23,0.45); overflow: hidden; } #pg-kitas .wintop { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; } #pg-kitas .wintop .tl { width: 11px; height: 11px; border-radius: 999px; } #pg-kitas .winbar { margin-left: 12px; flex: 1; height: 24px; border-radius: 999px; background: var(--bg); display: flex; align-items: center; padding: 0 12px; font-weight: 700; font-size: 11px; color: var(--mute); } #pg-kitas .winbody { padding: 18px; } #pg-kitas .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } #pg-kitas .stat { border: 1.5px solid var(--line); border-radius: 16px; padding: 13px 14px; } #pg-kitas .stat .s-l { font-weight: 700; font-size: 11px; color: var(--mute); } #pg-kitas .stat .s-v { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; margin-top: 2px; } #pg-kitas /* suite module grid (extends .areas-grid) */ .mod h3 { font-size: 20px; } #pg-kitas .mod .ico { width: 54px; height: 54px; margin-bottom: 14px; } #pg-kitas /* pay teaser */ .pay-teaser { background: linear-gradient(135deg, #21283A 0%, #2E2A26 60%); color: #fff; border-radius: 44px; padding: 56px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; } #pg-kitas .pay-teaser .glow { position: absolute; border-radius: 999px; filter: blur(8px); } #pg-kitas .pay-teaser h2 { color: #fff; font-size: 44px; } #pg-kitas .pay-teaser .money { font-family: var(--hand); font-weight: 700; font-size: 28px; color: var(--green); } #pg-kitas /* solutions chips */ .sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } #pg-kitas .sol { background: #fff; border: 2px solid var(--line); border-radius: 24px; padding: 22px; transition: transform .2s, box-shadow .2s; } #pg-kitas .sol:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(23,23,23,0.25); } #pg-kitas .sol .s-ico { width: 46px; height: 46px; border-radius: var(--peb1); display: grid; place-items: center; margin-bottom: 14px; } #pg-kitas .sol h3 { font-size: 19px; } #pg-kitas .sol p { font-weight: 500; font-size: 14px; color: var(--ink2); margin: 6px 0 0; line-height: 1.45; } #pg-kitas /* pricing teaser */ .price-card { background: #fff; border: 2px solid var(--line); border-radius: 36px; padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } #pg-kitas .price-card .amount { font-weight: 900; font-size: 64px; letter-spacing: -0.04em; line-height: 1; } #pg-kitas .price-card .per { font-weight: 700; font-size: 17px; color: var(--mute); } #pg-kitas .price-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; } #pg-kitas .price-list li { display: flex; gap: 9px; align-items: center; font-weight: 700; font-size: 14.5px; color: var(--ink2); } #pg-kitas .price-list li svg { flex-shrink: 0; } @media (max-width: 980px) { #pg-kitas .pay-teaser, #pg-kitas .price-card, #pg-kitas .sol-grid, #pg-kitas .stat-row, #pg-kitas .areas-grid { grid-template-columns: 1fr; } } /* ===== MAVIE Built for Germany.html ===== */ #pg-germany .hero h1 .ac { color: var(--p); } #pg-germany .quote .qm, #pg-germany .quote .em { color: var(--p); } #pg-germany /* ── Bundesland map studio ── */ .map-studio { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 40px; align-items: stretch; } #pg-germany .map-wrap { background: #fff; border: 2px solid var(--line); border-radius: 32px; padding: 26px; position: relative; } #pg-germany .map-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(7, 1fr); gap: 8px; aspect-ratio: 5 / 7; max-width: 420px; margin: 0 auto; } #pg-germany .tile { border: none; border-radius: 14px 12px 15px 11px; cursor: pointer; font-family: var(--font); font-weight: 800; font-size: 15px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transition: transform .14s ease, box-shadow .2s ease, outline-color .15s; outline: 3px solid transparent; outline-offset: 2px; position: relative; padding: 0; } #pg-germany .tile small { font-weight: 700; font-size: 8.5px; opacity: 0.82; letter-spacing: 0.02em; } #pg-germany .tile:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 22px -10px rgba(23,23,23,0.4); z-index: 2; } #pg-germany .tile.sel { outline-color: var(--ink); transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 26px -10px rgba(23,23,23,0.45); z-index: 3; } #pg-germany .map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; justify-content: center; } #pg-germany .map-legend span { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; color: var(--ink2); } #pg-germany .map-legend i { width: 13px; height: 13px; border-radius: 5px 4px 5px 3px; flex-shrink: 0; } #pg-germany /* detail panel */ .land-panel { background: #fff; border: 2px solid var(--line); border-radius: 32px; padding: 32px; display: flex; flex-direction: column; } #pg-germany .lp-top { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--line); } #pg-germany .lp-badge { width: 60px; height: 60px; border-radius: var(--peb1); display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; flex-shrink: 0; } #pg-germany .lp-name { font-weight: 900; font-size: 27px; letter-spacing: -0.03em; line-height: 1; } #pg-germany .lp-sub { font-weight: 700; font-size: 13.5px; color: var(--mute); margin-top: 4px; } #pg-germany .lp-rows { display: flex; flex-direction: column; gap: 0; margin-top: 4px; } #pg-germany .lp-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: start; } #pg-germany .lp-k { font-weight: 800; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding-top: 2px; } #pg-germany .lp-v { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.4; } #pg-germany .lp-v .pill-tag { display: inline-flex; align-items: center; font-weight: 800; font-size: 12px; padding: 4px 11px; border-radius: 999px; } #pg-germany .lp-impact { margin-top: 18px; background: var(--pT); border-radius: 18px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start; } #pg-germany .lp-impact .ii { width: 34px; height: 34px; border-radius: 10px; background: var(--p); display: grid; place-items: center; flex-shrink: 0; } #pg-germany .lp-impact .il { font-weight: 800; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--p); } #pg-germany .lp-impact .it { font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.45; margin-top: 2px; } #pg-germany .lp-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--mute); } #pg-germany .lp-foot b { color: var(--p); font-weight: 800; } #pg-germany /* stat band */ .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #pg-germany .sb-stat { text-align: center; } #pg-germany .sb-stat .v { font-weight: 900; font-size: 56px; letter-spacing: -0.04em; line-height: 1; color: var(--p); } #pg-germany .sb-stat .l { font-weight: 700; font-size: 14.5px; color: var(--ink2); margin-top: 8px; } #pg-germany /* how it adapts */ .adapt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #pg-germany .adapt .step { background: #fff; border: 2px solid var(--line); border-radius: 26px; padding: 26px; } #pg-germany .adapt .step .n { width: 38px; height: 38px; border-radius: var(--peb2); background: var(--pT); color: var(--p); display: grid; place-items: center; font-weight: 900; font-size: 16px; margin-bottom: 16px; } #pg-germany .adapt .step h3 { font-size: 19px; } #pg-germany .adapt .step p { font-weight: 500; font-size: 14.5px; color: var(--ink2); line-height: 1.5; margin: 8px 0 0; } @media (max-width: 980px) { #pg-germany .map-studio, #pg-germany .stat-band, #pg-germany .adapt { grid-template-columns: 1fr; gap: 28px; } #pg-germany .stat-band { grid-template-columns: 1fr 1fr; } } /* ===== MAVIE Parents Page.html ===== */ #pg-parents { --o: #E8704A; --o-deep: #D15A36; --p: #6A5685; --t: #4C6B5B; --t-deep: #1F8A77; --m: #4C6E94; --amber: #BFA25C; --oT: #FAE9E1; --pT: #ECE8F0; --tT: #E7EEE9; --mT: #E8EEF4; --amberT: #FBEBD2; --ink: #2E2A26; --ink2: #6B6358; --mute: #847B6E; --line: #EAE5DC; --line2: #D8D2C7; --bg: #FAF9F7; --card: #FFFFFF; --green: #4C6B5B; --greenT: #E7EEE9; --peb1: 60% 40% 55% 45% / 55% 50% 50% 45%; --peb2: 42% 58% 45% 55% / 52% 44% 56% 48%; --peb3: 55% 45% 60% 40% / 45% 55% 45% 55%; --font: "Hanken Grotesk", ui-rounded, system-ui, sans-serif; --hand: "Caveat", cursive; } * { box-sizing: border-box; } html #pg-parents, #pg-parents { margin: 0; padding: 0; } #pg-parents { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; } #pg-parents a { color: inherit; text-decoration: none; } #pg-parents .wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; } #pg-parents .wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 40px; } #pg-parents /* buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-weight: 800; font-size: 16px; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: none; transition: transform .12s ease, box-shadow .2s ease; white-space: nowrap; } #pg-parents .btn:active { transform: translateY(1px); } #pg-parents .btn-o { background: var(--o); color: #fff; box-shadow: 0 12px 24px -12px var(--o); } #pg-parents .btn-o:hover { background: var(--o-deep); } #pg-parents .btn-t { background: var(--t); color: #fff; box-shadow: 0 12px 24px -12px var(--t); } #pg-parents .btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line2); } #pg-parents .btn-ghost:hover { border-color: var(--ink); } #pg-parents .btn-sm { padding: 11px 20px; font-size: 15px; } #pg-parents .pill { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; } #pg-parents .dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; } #pg-parents /* logo */ .logo { display: inline-flex; align-items: flex-end; gap: 1px; line-height: 1; } #pg-parents .logo .word { font-weight: 800; letter-spacing: -0.02em; } #pg-parents /* nav */ nav.top { position: sticky; top: 0; z-index: 40; background: rgba(250,249,247,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(23,23,23,0.07); } #pg-parents nav.top .row { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; } #pg-parents nav.top .links { display: flex; align-items: center; gap: 4px; } #pg-parents nav.top .links a { font-weight: 700; font-size: 15px; color: var(--ink2); padding: 8px 14px; border-radius: 999px; } #pg-parents nav.top .links a:hover { background: #fff; color: var(--ink); } #pg-parents nav.top .links a.active { color: var(--t-deep); background: var(--tT); } #pg-parents /* section rhythm */ section { padding: 86px 0; } #pg-parents .eyebrow { font-weight: 800; font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; } #pg-parents h1, #pg-parents h2, #pg-parents h3 { margin: 0; letter-spacing: -0.03em; } #pg-parents h1 { font-weight: 900; font-size: 72px; line-height: 0.98; } #pg-parents h2 { font-weight: 900; font-size: 46px; line-height: 1.02; } #pg-parents h3 { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; } #pg-parents .lede { font-weight: 500; font-size: 19px; line-height: 1.55; color: var(--ink2); } #pg-parents /* ── hero ── */ .hero { padding: 56px 0 64px; position: relative; overflow: hidden; } #pg-parents .hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; } #pg-parents .hero h1 .ac { color: var(--t); } #pg-parents .hero h1 .em { font-style: italic; font-weight: 400; } #pg-parents .hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } #pg-parents .hero-note { margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--mute); display: flex; align-items: center; gap: 8px; } #pg-parents /* phone frame */ .phone { width: 300px; border-radius: 44px; background: #1c1c1c; padding: 10px; box-shadow: 0 40px 80px -36px rgba(23,23,23,0.5); position: relative; } #pg-parents .phone .screen { border-radius: 36px; background: var(--bg); overflow: hidden; position: relative; } #pg-parents .phone .notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #1c1c1c; border-radius: 999px; z-index: 5; } #pg-parents .scr-pad { padding: 44px 16px 18px; } #pg-parents .scr-top { display: flex; align-items: center; justify-content: space-between; } #pg-parents .scr-h-greet { font-weight: 700; font-size: 12px; color: var(--mute); } #pg-parents .scr-h-name { font-weight: 900; font-size: 22px; letter-spacing: -0.02em; } #pg-parents /* hero pebble stage */ .pebble-stage { position: relative; display: grid; place-items: center; min-height: 560px; } #pg-parents .sat { position: absolute; display: grid; place-items: center; box-shadow: 0 16px 30px -16px rgba(23,23,23,0.3); } #pg-parents .float-card { position: absolute; background: #fff; border-radius: 18px; padding: 11px 15px; display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 32px -14px rgba(23,23,23,0.28); } #pg-parents .float-card .fc-t { font-weight: 800; font-size: 13.5px; color: var(--ink); white-space: nowrap; } #pg-parents .float-card .fc-s { font-weight: 600; font-size: 11px; color: var(--mute); white-space: nowrap; } #pg-parents /* generic app card bits (used in mockups) */ .ac-card { background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 13px; } #pg-parents .av { border-radius: 999px; object-fit: cover; background: var(--tT); flex-shrink: 0; } #pg-parents .av-sq { border-radius: 12px; } #pg-parents /* trust strip */ .trust { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; } #pg-parents .trust .badge { background: #fff; border: 1.5px solid var(--line); padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--ink2); display: inline-flex; align-items: center; gap: 9px; } #pg-parents /* five areas */ .areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } #pg-parents .area { background: #fff; border: 2px solid var(--line); border-radius: 30px; padding: 26px; display: flex; flex-direction: column; min-height: 230px; transition: transform .2s ease, box-shadow .2s ease; } #pg-parents .area:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -26px rgba(23,23,23,0.28); } #pg-parents .area .ico { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 18px; } #pg-parents .area .a-tag { font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } #pg-parents .area h3 { margin-top: 3px; } #pg-parents .area p { font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--ink2); margin: 8px 0 0; } #pg-parents .area .feats { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 7px; } #pg-parents .area .feats li { display: flex; gap: 9px; align-items: flex-start; font-weight: 700; font-size: 13.5px; color: var(--ink2); } #pg-parents .area .feats li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; margin-top: 7px; flex-shrink: 0; background: var(--accent); } #pg-parents /* deep-dive rows */ .dive { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } #pg-parents .dive.flip .dive-art { order: -1; } #pg-parents .dive-copy .eyebrow { margin-bottom: 14px; } #pg-parents .dive-copy h2 { margin-bottom: 16px; } #pg-parents .dive-copy .lede { max-width: 480px; } #pg-parents .dive-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 16px; } #pg-parents .dive-list li { display: flex; gap: 14px; align-items: flex-start; } #pg-parents .dive-list .di { width: 40px; height: 40px; border-radius: var(--peb1); display: grid; place-items: center; flex-shrink: 0; } #pg-parents .dive-list b { display: block; font-weight: 800; font-size: 16px; color: var(--ink); } #pg-parents .dive-list span { font-weight: 600; font-size: 14.5px; color: var(--ink2); line-height: 1.45; } #pg-parents .dive-art { display: grid; place-items: center; position: relative; } #pg-parents /* soft tinted panel behind mockups */ .art-panel { border-radius: 44px; width: 100%; padding: 44px 0; display: grid; place-items: center; position: relative; overflow: hidden; } #pg-parents .art-panel .blob { position: absolute; border-radius: var(--peb1); } #pg-parents /* co-managed explainer */ .comanage { background: var(--ink); color: #fff; border-radius: 40px; padding: 48px; position: relative; overflow: hidden; } #pg-parents .comanage .deco { position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: var(--peb2); background: rgba(43,174,152,0.16); } #pg-parents .comanage h2 { color: #fff; } #pg-parents .flow { display: flex; align-items: center; gap: 0; margin-top: 30px; flex-wrap: wrap; } #pg-parents .flow-step { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 16px 20px; } #pg-parents .flow-step .fs-n { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-weight: 900; font-size: 14px; flex-shrink: 0; } #pg-parents .flow-step .fs-t { font-weight: 800; font-size: 15.5px; } #pg-parents .flow-step .fs-s { font-weight: 600; font-size: 12.5px; color: rgba(255,255,255,0.6); } #pg-parents .flow-arrow { color: rgba(255,255,255,0.4); font-weight: 900; padding: 0 14px; } #pg-parents /* languages band */ .lang-band { background: var(--tT); border-radius: 40px; padding: 48px 52px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } #pg-parents .lang-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 360px; } #pg-parents .lang-chips span { background: #fff; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 14px; color: var(--t-deep); } #pg-parents /* quote */ .quote { text-align: left; } #pg-parents .quote blockquote { font-weight: 800; font-size: 40px; line-height: 1.18; letter-spacing: -0.025em; margin: 0; max-width: 860px; } #pg-parents .quote .qm { color: var(--t); } #pg-parents .quote .em { font-style: italic; font-weight: 400; color: var(--t); } #pg-parents .quote .who { margin-top: 30px; display: flex; align-items: center; gap: 14px; } #pg-parents /* app CTA */ .app-cta { background: var(--t); color: #fff; border-radius: 48px; padding: 64px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; overflow: hidden; } #pg-parents .app-cta .deco { position: absolute; left: -80px; bottom: -100px; width: 320px; height: 320px; border-radius: var(--peb1); background: rgba(255,255,255,0.10); } #pg-parents .app-cta h2 { color: #fff; font-size: 50px; } #pg-parents .app-cta p { font-weight: 600; font-size: 18px; color: rgba(255,255,255,0.92); margin: 14px 0 26px; max-width: 420px; } #pg-parents .btn-soon { background: rgba(23,23,23,0.07); color: var(--mute); box-shadow: none; cursor: default; pointer-events: none; } #pg-parents .soon-note { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 999px; padding: 12px 22px; font-weight: 800; font-size: 15px; color: #fff; } #pg-parents .soon-note .dot { background: #fff; } #pg-parents /* footer */ footer.foot { padding: 80px 0 44px; border-top: 2px solid var(--line); } #pg-parents footer .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 64px; align-items: start; } #pg-parents footer h5 { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; } #pg-parents footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } #pg-parents footer ul a { font-weight: 600; font-size: 14.5px; color: var(--mute); } #pg-parents footer ul a:hover { color: var(--ink); } #pg-parents footer .legal { display: flex; justify-content: space-between; padding-top: 32px; margin-top: 44px; border-top: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--mute); } @media (max-width: 980px) { #pg-parents .hero-grid, #pg-parents .dive, #pg-parents .areas-grid, #pg-parents .lang-band, #pg-parents .download, #pg-parents footer .grid { grid-template-columns: 1fr; gap: 40px; } #pg-parents h1 { font-size: 52px; } #pg-parents h2 { font-size: 38px; } #pg-parents .dive.flip .dive-art { order: 0; } #pg-parents nav.top .links { display: none; } } #pg-parents .cd { text-align:center; font-weight:800; font-size:11px; color:var(--ink); padding:6px 0; border-radius:9px; } #pg-parents .cd.dim { color:var(--line2); } #pg-parents .cd.on-o { background:var(--o); color:#fff; } #pg-parents .cd.on-p { background:var(--p); color:#fff; } /* ===== MAVIE Pay.html ===== */ #pg-pay /* MAVIE Pay theme: green money accent on the operator purple base */ .hero h1 .ac { color: var(--green); } #pg-pay .quote .qm, #pg-pay .quote .em { color: var(--green); } #pg-pay nav.top .links a.active { color: var(--green); background: var(--greenT); } #pg-pay /* breadcrumb */ .crumb { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--mute); margin-bottom: 16px; white-space: nowrap; } #pg-pay .crumb a:hover { color: var(--ink); } #pg-pay .crumb .sep { opacity: 0.5; } #pg-pay /* hero direction toggle */ .dir-toggle { position: fixed; bottom: 22px; right: 22px; z-index: 60; background: var(--ink); color: #fff; border-radius: 999px; padding: 6px; display: flex; gap: 4px; box-shadow: 0 18px 36px -16px rgba(23,23,23,0.6); align-items: center; } #pg-pay .dir-toggle .lbl { font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding: 0 8px 0 12px; } #pg-pay .dir-toggle button { font-family: var(--font); font-weight: 800; font-size: 13px; color: rgba(255,255,255,0.7); background: transparent; border: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .15s; } #pg-pay .dir-toggle button.on { background: var(--green); color: #fff; } #pg-pay .hero-variant { display: none; } #pg-pay .hero-variant.show { display: block; } #pg-pay /* big win/finance frame reused from for-kitas */ .winframe { width: 100%; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 40px 80px -40px rgba(23,23,23,0.45); overflow: hidden; } #pg-pay .wintop { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; } #pg-pay .wintop .tl { width: 11px; height: 11px; border-radius: 999px; } #pg-pay .winbar { margin-left: 12px; flex: 1; height: 24px; border-radius: 999px; background: var(--bg); display: flex; align-items: center; padding: 0 12px; font-weight: 700; font-size: 11px; color: var(--mute); } #pg-pay .winbody { padding: 18px; } #pg-pay /* feature blocks (Famly-style: heading + 2 sub-features) */ .fblock { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } #pg-pay .fblock.flip .fb-art { order: -1; } #pg-pay .fb-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; } #pg-pay .fb-sub .fs-ico { width: 46px; height: 46px; border-radius: var(--peb1); display: grid; place-items: center; margin-bottom: 12px; } #pg-pay .fb-sub b { display: block; font-weight: 800; font-size: 16.5px; color: var(--ink); margin-bottom: 4px; } #pg-pay .fb-sub span { font-weight: 600; font-size: 14px; color: var(--ink2); line-height: 1.45; } #pg-pay /* checklist grid */ .check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 28px; margin-top: 36px; } #pg-pay .check-grid .ci { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 15.5px; color: var(--ink); } #pg-pay .check-grid .ci svg { flex-shrink: 0; } #pg-pay /* flat-fee honesty band */ .honesty { background: var(--greenT); border-radius: 40px; padding: 52px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: center; position: relative; overflow: hidden; } #pg-pay .honesty .vs { display: flex; flex-direction: column; gap: 12px; } #pg-pay .vs-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 16px 18px; } #pg-pay .vs-row > div:last-child { display: flex; flex-direction: column; gap: 3px; } #pg-pay .vs-row .vs-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; } #pg-pay .vs-row .vs-t { font-weight: 800; font-size: 15px; line-height: 1.25; } #pg-pay .vs-row .vs-s { font-weight: 600; font-size: 12.5px; color: var(--mute); line-height: 1.2; } #pg-pay .vs-row.bad { opacity: 0.7; } #pg-pay .vs-row.bad .vs-t { text-decoration: line-through; text-decoration-color: var(--o); } #pg-pay /* proof metrics */ .proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #pg-pay .proof .m { text-align: center; } #pg-pay .proof .m .pv { font-weight: 900; font-size: 52px; letter-spacing: -0.04em; line-height: 1; color: var(--green); } #pg-pay .proof .m .pl { font-weight: 700; font-size: 14px; color: var(--ink2); margin-top: 8px; } @media (max-width: 980px) { #pg-pay .fblock, #pg-pay .fb-subs, #pg-pay .honesty, #pg-pay .hero-grid { grid-template-columns: 1fr; gap: 36px; } #pg-pay .fblock.flip .fb-art { order: 0; } #pg-pay .check-grid, #pg-pay .proof { grid-template-columns: 1fr 1fr; } #pg-pay .dir-toggle { bottom: 14px; right: 14px; } } #pg-parents .comanage.light { background: #F5F3ED; color: var(--ink); } #pg-parents .comanage.light h2 { color: var(--ink); } #pg-parents .comanage.light .flow-step { background: #fff; border: 1px solid var(--line); } #pg-parents .comanage.light .flow-step .fs-s { color: var(--mute); } #pg-parents .comanage.light .flow-arrow { color: var(--mute); }