/* ========================================================================== Zonne Gids — stylesheet Direction taken from meervoordeel.nl and nationalerijschool.nl: one warm humanist sans, generous 20px roundness, and content delivered as alternating full-width bands rather than a uniform grid. Warm and reassuring, because the reader is deciding on a €7,000 purchase. ========================================================================== */ /* Source Sans 3 is loaded via in the document head — an @import here would block rendering until the CSS itself had parsed. */ :root { /* surfaces */ --white: #FFFFFF; --ground: #FFFFFF; --soft: #F5F8FA; /* alternating band */ --warm: #FFF6EC; /* tinted band, ties to the sun */ --navy: #16324F; /* dark band + headings */ --navy-2: #0F2439; /* ink */ --ink: #16324F; --ink-soft: #51677E; --ink-mut: #5E7387; /* 4.91:1 on white */ --rule: #E2E9EF; --rule-2: #CBD6E0; /* brand — warm, friendly, a richer orange than the stock Tailwind one */ --primary: #ED7B16; /* decorative fills only - fails contrast with text */ --primary-dark: #9A4708; /* 6.40:1 on white */ --primary-tint: #FEF4E9; /* lightened so --primary-ink passes on it */ --primary-ink: #B45309; /* 5.02:1 both ways - text, buttons, links */ --accent: #1E7A5A; /* savings / positive */ --accent-tint: #E6F3EE; /* type */ --sans: "DM Sans", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Cabin", "DM Sans", "Source Sans 3", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* shape — soft and generous, the thing both reference sites share */ --r: 20px; --r-md: 12px; --r-sm: 8px; --pill: 999px; --shadow: 0 2px 4px rgba(22,50,79,.04), 0 12px 28px -14px rgba(22,50,79,.16); --shadow-lg: 0 4px 8px rgba(22,50,79,.05), 0 26px 50px -22px rgba(22,50,79,.26); --wrap: 1200px; --measure: 70ch; --header-h: 76px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.62; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--primary-ink); text-underline-offset: 3px; } a:hover { color: var(--primary-dark); } :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); } h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; margin: 0 0 .5em; text-wrap: balance; color: var(--ink); } h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; } h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; } h3 { font-size: clamp(19px, 2vw, 23px); } p { margin: 0 0 1.15em; text-wrap: pretty; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 4vw, 36px); } .measure { max-width: var(--measure); } .center { text-align: center; margin-inline: auto; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-dark); background: var(--primary-tint); padding: 6px 14px; border-radius: var(--pill); margin: 0 0 18px; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 14px; top: 14px; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); z-index: 300; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--rule); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .logo svg { width: 34px; height: 34px; flex: none; } .logo b { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; display: block; } .logo b span { color: var(--primary-ink); } .logo small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-mut); } .nav { display: flex; gap: 2px; align-items: center; } .nav a { font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ink-soft); padding: 9px 13px; border-radius: var(--pill); } .nav a:hover { color: var(--ink); background: var(--soft); } .nav a[aria-current="page"] { color: var(--primary-dark); background: var(--primary-tint); } .menu-btn { display: none; background: none; border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; color: var(--ink); min-width: 44px; min-height: 44px; } @media (max-width: 980px) { .menu-btn { display: grid; place-items: center; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--white); border-bottom: 1px solid var(--rule); padding: 12px; display: none; box-shadow: var(--shadow); } .nav.open { display: flex; } .nav a { padding: 14px 16px; font-size: 17px; border-radius: var(--r-md); } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-size: 16px; font-weight: 700; padding: 14px 28px; border-radius: var(--pill); text-decoration: none; border: 2px solid transparent; cursor: pointer; min-height: 48px; } .btn--primary { background: var(--primary-ink); color: #fff; box-shadow: 0 10px 22px -12px rgba(180,83,9,.85); } .btn--primary:hover { background: var(--primary-dark); color: #fff; } .btn--ghost, .btn--outline { background: var(--white); border-color: var(--rule-2); color: var(--ink); } .btn--ghost:hover, .btn--outline:hover { border-color: var(--primary); color: var(--primary-dark); } .btn--sm { font-size: 14.5px; padding: 10px 20px; min-height: 42px; } /* ---------- bands ---------- */ .band { padding: clamp(56px, 8vw, 104px) 0; } .band--soft { background: var(--soft); } .band--warm { background: var(--warm); } .band--navy { background: var(--navy); color: #fff; } .band--navy h2, .band--navy h3 { color: #fff; } .band--navy p { color: rgba(255,255,255,.76); } .band--navy .eyebrow { background: rgba(255,255,255,.12); color: #FFCB8E; } .band-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); } .band-head.center { text-align: center; } .band-head p { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--ink-soft); margin: 0; } /* ---------- hero ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #fff; display: grid; align-items: center; min-height: min(88vh, 780px); } .hero-bg { position: absolute; inset: 0; z-index: -3; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; } .hero-veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(15,36,57,.94) 0%, rgba(15,36,57,.80) 46%, rgba(15,36,57,.42) 100%), radial-gradient(60% 55% at 84% 18%, rgba(237,123,22,.34) 0%, transparent 70%); } #hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; } .hero-inner { padding: clamp(84px, 13vh, 132px) 0 clamp(56px, 9vh, 92px); position: relative; } .hero .eyebrow { background: rgba(255,255,255,.13); color: #FFCB8E; } .hero h1 { color: #fff; max-width: 16ch; font-size: clamp(38px, 6.6vw, 78px); font-weight: 800; line-height: 1.03; letter-spacing: -0.032em; margin-bottom: 22px; } .hero h1 em { font-style: normal; color: #FFA94D; } .hero .lede { font-size: clamp(17px, 1.8vw, 21px); color: rgba(255,255,255,.8); max-width: 52ch; margin-bottom: 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(40px, 7vh, 64px); } .hero .btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; } .hero .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; } .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; } .word > span { display: inline-block; transform: translateY(105%); } .hero-stats { display: flex; flex-wrap: wrap; gap: 14px; } .hero-stat { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 18px 26px; backdrop-filter: blur(6px); } .hero-stat b { display: block; font-size: clamp(23px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; } .hero-stat span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62); } .scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); display: flex; flex-direction: column; align-items: center; gap: 9px; } .scroll-cue i { display: block; width: 2px; height: 36px; border-radius: 2px; background: linear-gradient(rgba(255,255,255,.6), transparent); } @media (max-width: 900px) { .hero { min-height: auto; } .hero-inner { padding-block: 92px 56px; } .scroll-cue { display: none; } } /* ---------- USP strip ---------- */ .usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 40px); } .usp { display: flex; gap: 15px; align-items: flex-start; } .usp-ic { flex: none; width: 46px; height: 46px; border-radius: var(--pill); background: var(--primary-tint); color: var(--primary-dark); display: grid; place-items: center; } .band--navy .usp-ic { background: rgba(255,255,255,.12); color: #FFCB8E; } .usp b { display: block; font-size: 17px; font-weight: 700; margin-bottom: 3px; } .usp p { font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.5; } .band--navy .usp p { color: rgba(255,255,255,.7); } /* ---------- cards ---------- */ .grid { display: grid; gap: clamp(18px, 2.2vw, 28px); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .card { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: var(--shadow); } .card:hover { box-shadow: var(--shadow-lg); border-color: var(--rule-2); } .card:hover .card-title { color: var(--primary-dark); } .card-media { aspect-ratio: 16/10; overflow: hidden; background: var(--soft); } .card-media img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .card-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--primary-ink); } .card-title { font-size: 20px; font-weight: 700; line-height: 1.26; letter-spacing: -0.02em; margin: 0; } .card-excerpt { font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; } .card-meta { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--ink-mut); } .tile { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px 24px; text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow); } .tile:hover { box-shadow: var(--shadow-lg); } .tile-name { font-weight: 700; font-size: 19px; margin: 0 0 5px; letter-spacing: -0.02em; } .tile:hover .tile-name { color: var(--primary-dark); } .tile-count { font-size: 14px; color: var(--ink-mut); } /* ---------- alternating image banner ---------- */ .banner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .banner--reverse .banner-media { order: 2; } .banner-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow-lg); } .banner-body h2 { margin-bottom: .45em; } .banner-body p { color: var(--ink-soft); font-size: 17.5px; } .band--navy .banner-body p { color: rgba(255,255,255,.76); } .checks { list-style: none; margin: 0 0 28px; padding: 0; } .checks li { position: relative; padding-left: 34px; margin-bottom: 12px; font-size: 16.5px; } .checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: var(--pill); background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A5A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; } .band--navy .checks li::before { background-color: rgba(255,255,255,.14); } @media (max-width: 860px) { .banner { grid-template-columns: 1fr; } .banner--reverse .banner-media { order: 0; } } /* ---------- CTA banner ---------- */ .cta { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); border-radius: var(--r); padding: clamp(36px, 5vw, 64px); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } .cta h2 { color: #fff; margin-bottom: .3em; } .cta p { color: rgba(255,255,255,.76); margin: 0; max-width: 52ch; } @media (max-width: 780px) { .cta { grid-template-columns: 1fr; } } /* ---------- article ---------- */ .article-head { padding: clamp(40px, 5vw, 68px) 0 32px; } .breadcrumbs { font-size: 14.5px; color: var(--ink-mut); margin-bottom: 20px; } .breadcrumbs a { color: var(--ink-soft); text-decoration: none; } .breadcrumbs a:hover { color: var(--primary-dark); } .article-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; color: var(--ink-mut); margin-top: 18px; } .article-figure { margin: 0 0 8px; } .article-figure img { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--r); } .prose { font-size: 18.5px; line-height: 1.75; max-width: var(--measure); padding: 36px 0 52px; color: #23405C; } .prose h2 { font-size: clamp(24px, 2.6vw, 31px); margin: 1.9em 0 .55em; } .prose h3 { font-size: 21px; margin: 1.7em 0 .5em; } .prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.35em; } .prose li { margin-bottom: .55em; } .prose img { margin: 2em 0; border-radius: var(--r-md); } .prose blockquote { margin: 2em 0; padding: 22px 26px; background: var(--warm); border-radius: var(--r-md); border-left: 4px solid var(--primary); color: var(--ink); } .prose blockquote p:last-child { margin-bottom: 0; } .prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 2em 0; } .prose th { text-align: left; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mut); font-weight: 700; padding: 12px 16px 12px 0; border-bottom: 2px solid var(--rule-2); } .prose td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } .table-scroll { overflow-x: auto; margin: 2em 0; border: 1px solid var(--rule); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; } .table-scroll .prose table, .prose .table-scroll table { min-width: 560px; margin: 0; } .table-scroll th, .table-scroll td { padding-left: 14px; } .author { display: flex; gap: 18px; align-items: flex-start; border-radius: var(--r); background: var(--soft); padding: 26px 28px; margin: 0 0 48px; max-width: var(--measure); } .author-avatar { width: 52px; height: 52px; border-radius: var(--pill); flex: none; background: var(--primary-ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; } .author-name { font-weight: 700; margin: 0; font-size: 18px; } .author-role { font-size: 13.5px; font-weight: 600; color: var(--primary-dark); margin: 1px 0 9px; } .author-text { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.58; } /* ---------- calculator ---------- */ .zg-calc { border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); max-width: 780px; box-shadow: var(--shadow); overflow: hidden; } .zg-calc__progress { display: flex; border-bottom: 1px solid var(--rule); background: var(--soft); } .zg-calc__step { flex: 1; padding: 16px 10px; text-align: center; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--ink-mut); border: none; background: none; border-bottom: 3px solid transparent; } .zg-calc__step--active { color: var(--primary-dark); border-bottom-color: var(--primary); background: var(--white); } .zg-calc__panel { padding: 32px 30px; } .zg-calc__panel[hidden] { display: none; } .zg-calc__panel-title { font-size: 21px; margin: 0 0 22px; } .zg-calc__field { margin-bottom: 22px; } .zg-calc__field > label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; } .zg-calc__input-wrap { display: flex; align-items: stretch; border: 2px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; background: var(--white); } .zg-calc__input-wrap:focus-within { border-color: var(--primary); } .zg-calc__input-wrap input, .zg-calc__field select { flex: 1; border: none; padding: 13px 15px; font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; background: none; color: var(--ink); min-width: 0; } .zg-calc__field select { border: 2px solid var(--rule-2); border-radius: var(--r-md); width: 100%; } .zg-calc__input-wrap input:focus, .zg-calc__field select:focus { outline: none; } .zg-calc__input-prefix, .zg-calc__input-unit { font-size: 14px; font-weight: 600; color: var(--ink-mut); padding: 0 15px; background: var(--soft); display: grid; place-items: center; } .zg-calc__hint { font-size: 13.5px; color: var(--ink-mut); margin: 7px 0 0; } .zg-calc__optional { font-weight: 400; color: var(--ink-mut); font-size: 13.5px; } .zg-calc__toggle { border: 2px solid var(--rule-2); background: var(--white); color: var(--ink-soft); padding: 9px 18px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border-radius: var(--pill); } .zg-calc__toggle--active { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; } .zg-calc__radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; } .zg-calc__radio-card { position: relative; border: 2px solid var(--rule-2); border-radius: var(--r-md); padding: 15px 10px; text-align: center; cursor: pointer; background: var(--white); } .zg-calc__radio-card:hover { border-color: var(--ink-mut); } .zg-calc__radio-card.is-checked { border-color: var(--primary); background: var(--primary-tint); } .zg-calc__radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .zg-calc__radio-icon { font-size: 21px; } .zg-calc__radio-label { display: block; font-size: 14px; font-weight: 700; margin-top: 5px; } .zg-calc__radio-factor { display: block; font-size: 12.5px; color: var(--ink-mut); } .zg-calc__actions { display: flex; gap: 12px; padding-top: 8px; } .zg-calc__actions--split { justify-content: space-between; } .zg-calc__panel--results { background: var(--soft); } .zg-calc__results-header { margin-bottom: 24px; } .zg-calc__results-subtitle { color: var(--ink-soft); font-size: 15.5px; margin: 0; } .zg-calc__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .zg-calc__metric { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 20px 18px; } .zg-calc__metric--primary { background: var(--primary-ink); border-color: var(--primary-ink); } .zg-calc__metric--primary .zg-calc__metric-value { color: #fff; } .zg-calc__metric--primary .zg-calc__metric-label, .zg-calc__metric--primary .zg-calc__metric-sub { color: rgba(255,255,255,.82); } .zg-calc__metric-label { font-size: 13px; font-weight: 700; color: var(--ink-mut); display: block; } .zg-calc__metric-value { font-size: 31px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; display: block; margin: 6px 0 2px; } .zg-calc__metric-sub { font-size: 13.5px; color: var(--ink-mut); } .zg-calc__coverage { margin-bottom: 22px; } .zg-calc__coverage-header { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; margin-bottom: 9px; } .zg-calc__coverage-bar { height: 12px; background: var(--rule); border-radius: var(--pill); overflow: hidden; } .zg-calc__coverage-fill { height: 100%; background: var(--accent); border-radius: var(--pill); transition: width .6s cubic-bezier(.22,.7,.3,1); } .zg-calc__details { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white); margin-bottom: 20px; overflow: hidden; } .zg-calc__detail-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 18px; font-size: 15.5px; border-bottom: 1px solid var(--rule); } .zg-calc__detail-row:last-child { border-bottom: none; } .zg-calc__detail-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; } .zg-calc__disclaimer { font-size: 13.5px; color: var(--ink-mut); line-height: 1.55; } /* The assumptions behind the payback figure. Collapsed by default so it does not compete with the result, but present on the page rather than buried in an article — the number is only defensible if its basis is one click away. */ .zg-calc__assume { margin: 18px 0 4px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-2, #F7F9FB); } .zg-calc__assume > summary { cursor: pointer; padding: 13px 18px; font-size: 14.5px; font-weight: 700; color: var(--primary-ink); list-style: none; } .zg-calc__assume > summary::-webkit-details-marker { display: none; } .zg-calc__assume > summary::after { content: '+'; float: right; font-size: 18px; line-height: 1; } .zg-calc__assume[open] > summary::after { content: '\2212'; } .zg-calc__assume > summary:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: -2px; } .zg-calc__assume p { margin: 0; padding: 13px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-mut); border-top: 1px solid var(--rule); } .zg-calc__assume .zg-calc__detail-row { font-size: 14px; } .zg-calc__sources { font-size: 13px; line-height: 1.6; } /* ---------- forms ---------- */ .field { margin-bottom: 20px; max-width: 540px; } .field label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 7px; } .field input, .field textarea { width: 100%; font: inherit; font-size: 17px; padding: 13px 15px; border: 2px solid var(--rule-2); border-radius: var(--r-md); background: var(--white); color: var(--ink); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); } .field textarea { min-height: 160px; resize: vertical; } /* ---------- internal AI connection test ---------- */ .ai-test { max-width: 900px; } .ai-test__intro { max-width: 66ch; margin-bottom: 30px; } .ai-test__intro > p:last-child { color: var(--ink-soft); font-size: 18px; } .ai-test__panel { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 38px); } .ai-test__panel .field { margin-bottom: 22px; } .ai-test__panel .field label { display: block; font-weight: 700; margin-bottom: 7px; } .ai-test__panel .field small { display: block; color: var(--ink-mut); margin-top: 6px; } .ai-test__panel .field input { font-family: var(--mono); } .ai-test__status { min-height: 1.6em; margin: 18px 0 0; color: var(--ink-soft); } .ai-test__status--error { color: #9B1C1C; font-weight: 700; } .ai-test__result-wrap { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 24px; } .ai-test__result-wrap h2 { font-size: 22px; } .ai-test__result { min-height: 170px; margin: 0; padding: 20px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--soft); color: var(--ink); font: 15px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; } .ai-test__panel button:disabled { opacity: .65; cursor: wait; } /* ========================================================================== ZonneGids cinematic system — homepage + calculator ========================================================================== */ .page-transition { position: fixed; z-index: 9999; inset: 0; pointer-events: none; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,#050807 0 46%,#FFD84D 49%,#B8FF57 51%,#050807 54%); } .is-leaving .page-transition { animation: energy-sweep .42s cubic-bezier(.7,0,.2,1) both; } @keyframes energy-sweep { 0%{transform:scaleX(0)} 75%,100%{transform:scaleX(1)} } .scroll-energy-meter { position:fixed; z-index:210; left:0; top:var(--header-h); width:100%; height:2px; transform:scaleX(0); transform-origin:left; pointer-events:none; background:linear-gradient(90deg,#FFD84D,#B8FF57,#8FD8FF); box-shadow:0 0 12px #FFD84D88; } .motion-enabled main { animation:page-arrive .7s cubic-bezier(.16,1,.3,1) both; } @keyframes page-arrive { from{opacity:.15;transform:translateY(10px)} to{opacity:1;transform:none} } .motion-enabled .motion-reveal { opacity:0; transform:translateY(34px) scale(.992); filter:blur(5px); transition:opacity .85s ease var(--motion-delay,0ms),transform .9s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms),filter .75s ease var(--motion-delay,0ms); } .motion-enabled .motion-reveal.motion-visible { opacity:1; transform:none; filter:none; } .motion-depth-image { --depth-y:0; transform:scale(1.045) translate3d(0,calc(var(--depth-y) * -11px),0)!important; transition:transform .18s linear,filter .45s ease; will-change:transform; } .article-figure,.banner-media,.card-media { position:relative; isolation:isolate; overflow:hidden; } .article-figure::after,.banner-media::after,.card-media::after { content:""; position:absolute; inset:-50% -80%; pointer-events:none; background:linear-gradient(110deg,transparent 42%,rgba(255,216,77,.14) 49%,rgba(143,216,255,.1) 52%,transparent 59%); transform:translateX(-45%) rotate(3deg); transition:transform 1.1s cubic-bezier(.16,1,.3,1); mix-blend-mode:screen; } .article-figure:hover::after,.banner-media:hover::after,.card:hover .card-media::after { transform:translateX(45%) rotate(3deg); } .motion-surface { --pointer-x:50%; --pointer-y:50%; --tilt-x:0deg; --tilt-y:0deg; transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s; isolation:isolate; } .motion-surface::after { content:""; position:absolute; z-index:-1; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; background:radial-gradient(260px circle at var(--pointer-x) var(--pointer-y),rgba(255,216,77,.13),transparent 66%); transition:opacity .3s; } .motion-surface:hover::after { opacity:1; } .prose>h2.motion-reveal { position:relative; } .prose>h2.motion-reveal::before { content:""; position:absolute; left:-24px; top:.1em; width:2px; height:.85em; background:linear-gradient(#FFD84D,#B8FF57); transform:scaleY(0); transform-origin:top; box-shadow:0 0 9px #FFD84D88; transition:transform .55s ease calc(var(--motion-delay,0ms) + .22s); } .prose>h2.motion-visible::before { transform:scaleY(1); } .home-cinematic { --night:#050807; --night-2:#090D0C; --night-3:#101513; --solar:#FFD84D; --energy:#B8FF57; --electric:#8FD8FF; --light:#F7F7F2; background:var(--night); color:var(--light); } .home-cinematic .site-header { position:fixed; width:100%; color:var(--light); background:linear-gradient(#050807b8,transparent); border:0; transition:background .3s,border-color .3s; } .home-cinematic.has-scrolled .site-header { background:#050807dc; border-bottom:1px solid #ffffff14; backdrop-filter:blur(18px); } .home-cinematic .site-header .logo,.home-cinematic .site-header .nav a,.home-cinematic .menu-btn { color:var(--light); } .home-cinematic .site-header .logo small { color:#b7c0bb; } .home-cinematic .site-header .nav a:hover { background:#ffffff10; color:#fff; } .home-cinematic .site-header .nav a[aria-current="page"],.calculator-cinematic .site-header .nav a[aria-current="page"] { background:var(--solar,#FFD84D); color:#101510; } .home-cinematic main { overflow:hidden; } .home-cinematic h1,.home-cinematic h2,.home-cinematic h3 { color:var(--light); } .home-cinematic .site-footer { background:#030504; border-top:1px solid #ffffff10; } .cine-kicker { display:flex; align-items:center; gap:18px; margin:0 0 26px; color:var(--energy); font:600 11px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.17em; } .cine-kicker::before { content:""; width:34px; height:1px; background:currentColor; box-shadow:0 0 10px currentColor; } .cine-kicker span { color:#87928d; margin-left:auto; } .tech-grid { position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(#8fd8ff18 1px,transparent 1px),linear-gradient(90deg,#8fd8ff18 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 82%); } .cine-hero { position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:#050807; --mx:0; --my:0; } .cinematic-media,.cine-hero__shade { position:absolute; inset:0; z-index:-4; overflow:hidden; } .cinematic-media img,.cinematic-media video { width:100%; height:100%; object-fit:cover; transform:scale(1.09) translate3d(calc(var(--mx) * -5px),calc(var(--my) * -3px + var(--hero-scroll,0) * .055px),0); transition:transform .8s cubic-bezier(.2,.7,.2,1); filter:saturate(.75) contrast(1.1); } .cinematic-media::after { content:""; position:absolute; inset:-15% -30%; pointer-events:none; background:linear-gradient(112deg,transparent 37%,rgba(255,216,77,.08) 46%,rgba(255,244,190,.22) 49%,rgba(143,216,255,.08) 53%,transparent 62%); mix-blend-mode:screen; animation:roof-light 9s ease-in-out infinite; } @keyframes roof-light { 0%,18%{transform:translateX(-38%)} 72%,100%{transform:translateX(38%)} } .cinematic-media__video { position:absolute; opacity:0; transition:opacity 1s; }.cinematic-media.has-video .cinematic-media__video{opacity:1}.cinematic-media.has-video .cinematic-media__poster{opacity:0} .cine-hero__shade { z-index:-3; background:linear-gradient(90deg,#050807f5 0%,#050807d9 40%,#05080773 72%,#050807b5),linear-gradient(0deg,#050807 0%,transparent 35%),radial-gradient(circle at 73% 25%,#ffd84d34,transparent 23%); } .cine-hero #hero-canvas { z-index:-1; opacity:.58; }.cine-hero .tech-grid{z-index:-2} .cine-hero__inner { width:100%; padding-top:clamp(130px,18vh,200px); padding-bottom:clamp(170px,20vh,230px); } .cine-hero h1 { max-width:12ch; font-size:clamp(58px,8.2vw,118px); font-weight:700; line-height:.88; letter-spacing:-.065em; margin:0 0 34px; } .hero-line { display:block; overflow:hidden; padding:.06em 0 .1em; }.hero-line>span{display:block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)} .cine-ready .hero-line>span{transform:none}.cine-ready .hero-line:nth-child(2)>span{transition-delay:.11s}.cine-hero h1 em{font-style:normal;color:var(--solar);text-shadow:0 0 40px #ffd84d35} .cine-hero__lede { max-width:52ch; color:#c0c8c3; font-size:clamp(17px,1.5vw,21px); line-height:1.6; margin:0 0 34px; } [data-reveal],.knowledge-card,.latest-editorial>a{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}.is-visible{opacity:1!important;transform:none!important} .cine-actions{display:flex;flex-wrap:wrap;gap:13px}.cine-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:220px;min-height:58px;padding:0 20px 0 25px;border:1px solid #ffffff28;text-decoration:none;color:var(--light);font-weight:700;letter-spacing:-.01em;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}.cine-button b{display:grid;place-items:center;width:31px;height:31px;border:1px solid currentColor;border-radius:50%;font-weight:400}.cine-button--solar{background:var(--solar);color:#11150f;border-color:var(--solar);box-shadow:0 0 0 0 #ffd84d00}.cine-button--solar:hover{color:#11150f;box-shadow:0 0 36px #ffd84d45}.cine-button--line:hover{color:#fff;border-color:#ffffff88;background:#ffffff0a} .energy-orbit{position:absolute;z-index:-1;right:8%;top:18%;width:min(38vw,560px);aspect-ratio:1;border:1px solid #ffd84d26;border-radius:50%;transform:translate(calc(var(--mx)*8px),calc(var(--my)*6px))}.energy-orbit::before,.energy-orbit::after{content:"";position:absolute;border:1px solid #8fd8ff1e;border-radius:50%;inset:13%}.energy-orbit::after{inset:31%}.energy-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--solar);box-shadow:0 0 22px 7px #ffd84d;top:12%;left:18%;animation:orbit-pulse 2.8s ease-in-out infinite}@keyframes orbit-pulse{50%{opacity:.45;transform:scale(.65)}} .hero-telemetry{position:absolute;right:clamp(20px,5vw,78px);top:29%;width:min(285px,24vw);display:grid;gap:10px}.telemetry{position:relative;padding:14px 18px 14px 30px;background:#07100db8;border:1px solid #ffffff18;backdrop-filter:blur(12px);clip-path:polygon(0 0,96% 0,100% 22%,100% 100%,4% 100%,0 78%)}.telemetry__pulse{position:absolute;left:13px;top:20px;width:5px;height:5px;border-radius:50%;background:var(--energy);box-shadow:0 0 9px var(--energy)}.telemetry b{display:block;color:#fff;font:600 22px/1.1 var(--mono)}.telemetry small{color:#89958f;font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}.cine-scroll{position:absolute;bottom:30px;left:50%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#8b9690;text-decoration:none;font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.15em}.cine-scroll i{width:1px;height:44px;background:linear-gradient(var(--solar),transparent);animation:scroll-line 1.8s ease-in-out infinite}@keyframes scroll-line{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1)}} .energy-story{position:relative;background:var(--night);padding:clamp(90px,13vw,190px) 0}.energy-story__head{max-width:1000px;margin-bottom:clamp(80px,10vw,140px)}.energy-story h2,.solar-lab h2,.calculator-stage h2,.knowledge-stage h2{font-size:clamp(45px,7vw,92px);line-height:.96;letter-spacing:-.055em}.energy-story__head>p:last-child{color:#828d87;font-size:20px}.energy-track{position:relative;max-width:1020px}.energy-line{position:absolute;left:22px;top:0;bottom:0;width:1px;background:#ffffff16}.energy-line i{display:block;width:100%;height:100%;background:linear-gradient(var(--solar),var(--energy));transform:scaleY(0);transform-origin:top;box-shadow:0 0 18px var(--solar)}.energy-step{min-height:240px;display:grid;grid-template-columns:46px 1fr 10px;gap:32px;align-items:start;color:#59615d;transition:color .5s}.energy-step>span{font:500 11px/1 var(--mono);padding-top:10px}.energy-step h3{font-size:clamp(35px,5vw,68px);color:inherit;margin:0}.energy-step p{max-width:46ch;color:inherit;font-size:18px}.energy-step>i{width:7px;height:7px;border-radius:50%;background:currentColor;margin-top:18px}.energy-step.is-active{color:var(--light)}.energy-step.is-active>span{color:var(--energy)}.energy-step.is-active>i{background:var(--solar);box-shadow:0 0 16px var(--solar)} .solar-lab{background:var(--night-2);padding:clamp(90px,12vw,170px) 0}.solar-lab__grid,.calculator-stage__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);gap:clamp(48px,8vw,120px);align-items:center}.solar-lab__copy>p:not(.cine-kicker),.calculator-stage__grid>div>p:not(.cine-kicker){color:#96a19b;font-size:18px;max-width:47ch}.orientation-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:32px 0}.orientation-tabs button{border:1px solid #ffffff1c;background:transparent;color:#8f9a94;padding:10px 13px;font:600 12px/1 var(--mono);cursor:pointer}.orientation-tabs button[aria-pressed="true"]{color:#111;background:var(--solar);border-color:var(--solar);box-shadow:0 0 24px #ffd84d30}.lab-output{border-top:1px solid #ffffff16;padding-top:25px;display:grid}.lab-output b{font:600 clamp(38px,5vw,64px)/1 var(--mono);color:#fff}.lab-output>span{color:#9aa59f}.lab-output small{color:var(--energy);font:500 11px var(--mono);margin-top:14px}.house-stage{position:relative;min-height:580px;background:radial-gradient(circle at 35% 25%,#ffd84d12,transparent 30%),linear-gradient(#0f1814,#080c0a);border:1px solid #ffffff13;overflow:hidden;perspective:1000px}.house-stage::after{content:"";position:absolute;inset:auto -20% 7% -20%;height:1px;background:#8fd8ff4d;box-shadow:0 0 30px #8fd8ff}.lab-sun{position:absolute;left:18%;top:13%;width:68px;height:68px;border-radius:50%;background:var(--solar);box-shadow:0 0 70px 20px #ffd84d55;transition:left .7s cubic-bezier(.2,.8,.2,1)}.lab-rays{position:absolute;left:21%;top:20%;width:360px;height:1px;background:linear-gradient(90deg,#ffd84dcc,transparent);transform:rotate(35deg);transform-origin:left;box-shadow:0 12px 35px #ffd84d}.iso-house{position:absolute;left:49%;top:50%;width:300px;height:220px;transform:translate(-50%,-35%) rotateX(58deg) rotateZ(-35deg);transform-style:preserve-3d}.iso-roof{position:absolute;width:310px;height:205px;background:#17211d;border:1px solid #8fd8ff55;box-shadow:0 30px 80px #000;transform:translateZ(70px)}.solar-array{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:28px}.solar-array i{height:61px;background:linear-gradient(135deg,#173447,#081923);border:1px solid #8fd8ff66;box-shadow:inset 0 0 18px #8fd8ff20}.iso-wall{position:absolute;width:310px;height:155px;background:#1c2823;transform:rotateX(-90deg) translateY(127px) translateZ(128px);transform-origin:bottom}.iso-wall span{display:block;width:62px;height:84px;background:#ffd84d20;border:1px solid #ffd84d60;margin:35px auto}.power-flow{position:absolute;inset:0;width:100%;height:100%}.power-flow path{fill:none;stroke:var(--solar);stroke-width:2;stroke-dasharray:8 13;animation:power-flow 1.1s linear infinite;filter:drop-shadow(0 0 5px var(--solar))}.power-flow circle{fill:var(--energy);filter:drop-shadow(0 0 8px var(--energy))}@keyframes power-flow{to{stroke-dashoffset:-21}}.lab-label{position:absolute;color:#8fd8ff;font:500 9px/1 var(--mono);letter-spacing:.13em}.lab-label--roof{right:6%;top:10%}.lab-label--grid{right:6%;bottom:8%} .calculator-stage{background:#0e1412;padding:clamp(90px,12vw,170px) 0}.calc-preview{position:relative;min-height:480px;padding:44px;background:linear-gradient(145deg,#141c19,#080c0a);border:1px solid #ffffff17;box-shadow:0 40px 100px #0008}.calc-preview::before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,var(--solar),transparent 25%,transparent 75%,var(--electric));z-index:-1;opacity:.45}.calc-preview__top{display:flex;align-items:center;gap:10px;color:#88938d;font:500 10px var(--mono);letter-spacing:.13em}.calc-preview__top i{width:6px;height:6px;border-radius:50%;background:var(--energy);box-shadow:0 0 10px var(--energy)}.calc-preview>p{color:#b8c1bc;font-size:21px;margin:70px 0 0}.calc-preview>strong{display:block;color:var(--solar);font:600 clamp(74px,9vw,126px)/1 var(--mono);letter-spacing:-.08em}.calc-preview>strong+p{margin:0}.calc-preview__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff15;margin-top:65px}.calc-preview__stats span{background:#0d1310;padding:16px;color:#7f8b85;font:500 10px var(--mono);text-transform:uppercase}.calc-preview__stats b{display:block;color:#fff;font-size:16px;margin-bottom:4px} .trust-stage{position:relative;background:#050807;padding:clamp(100px,14vw,200px) 0}.trust-stage h2{font-size:clamp(48px,8vw,106px);line-height:.93;letter-spacing:-.06em;max-width:12ch;margin-bottom:90px}.trust-stage h2 em,.final-stage h2 em{font-style:normal;color:var(--solar)}.trust-list{border-top:1px solid #ffffff20}.trust-list article{display:grid;grid-template-columns:75px minmax(180px,.7fr) 1fr;gap:25px;padding:30px 0;border-bottom:1px solid #ffffff16;align-items:baseline}.trust-list article>span{color:var(--energy);font:500 11px var(--mono)}.trust-list h3{font-size:26px}.trust-list p{color:#8d9792;margin:0;max-width:52ch} .knowledge-stage{background:#f4f5f1;color:#121713;padding:clamp(90px,12vw,160px) 0}.knowledge-stage h2,.latest-stage h2{color:#121713}.knowledge-stage .cine-kicker,.latest-stage .cine-kicker{color:#526456}.knowledge-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:60px}.knowledge-head>a{color:#121713;text-decoration:none;font-weight:700;border-bottom:1px solid #88918c;padding-bottom:8px}.knowledge-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.knowledge-card{position:relative;min-height:460px;grid-column:span 4;display:flex;flex-direction:column;justify-content:end;overflow:hidden;color:#fff;text-decoration:none;padding:28px}.knowledge-card:nth-child(1),.knowledge-card:nth-child(5){grid-column:span 7}.knowledge-card:nth-child(2),.knowledge-card:nth-child(6){grid-column:span 5}.knowledge-card__media{position:absolute;inset:0;z-index:-2;background:#101513}.knowledge-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,#050807e8)}.knowledge-card__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}.knowledge-card:hover img{transform:scale(1.045);filter:saturate(1)}.knowledge-card>span{font:500 10px var(--mono);letter-spacing:.12em;color:#c4cec8}.knowledge-card h3{font-size:clamp(27px,3vw,42px);margin:10px 45px 0 0}.knowledge-card>b{position:absolute;right:25px;bottom:30px;color:var(--solar);font-size:27px;transition:transform .3s}.knowledge-card:hover>b{transform:translate(4px,-4px)} .latest-stage{background:#f4f5f1;color:#121713;padding:0 0 clamp(90px,12vw,160px)}.latest-editorial{border-top:1px solid #ccd1cc}.latest-editorial>a{display:grid;grid-template-columns:60px 1fr 35px;gap:25px;align-items:center;color:#121713;text-decoration:none;padding:28px 0;border-bottom:1px solid #ccd1cc}.latest-editorial>a>span{font:500 11px var(--mono);color:#657068}.latest-editorial small{color:#667169;text-transform:uppercase;letter-spacing:.08em}.latest-editorial h3{color:#121713;margin:5px 0 0;font-size:clamp(21px,3vw,36px)}.latest-editorial>a>b{font-size:24px}.latest-editorial>a:hover h3{color:#556c18} .final-stage{position:relative;min-height:90svh;display:grid;place-items:center;text-align:center;background:#050807;overflow:hidden}.final-stage .wrap{position:relative}.final-stage .cine-kicker{justify-content:center}.final-stage .cine-kicker::before{display:none}.final-stage h2{font-size:clamp(53px,8.5vw,112px);line-height:.92;letter-spacing:-.06em;margin-bottom:45px}.final-stage .cine-button{margin:auto}.final-energy{position:absolute;width:min(70vw,900px);height:min(70vw,900px);border:1px solid #ffd84d22;border-radius:50%;box-shadow:0 0 140px #b8ff570d,inset 0 0 90px #ffd84d09}.final-energy::before{content:"";position:absolute;left:50%;top:-30%;height:160%;width:1px;background:linear-gradient(transparent,var(--solar),var(--energy),transparent);box-shadow:0 0 25px var(--solar);animation:final-pulse 3s ease-in-out infinite}@keyframes final-pulse{50%{opacity:.35;transform:scaleY(.8)}} .calculator-cinematic{background:#090d0c}.calculator-cinematic .article-head{background:#050807;padding-top:110px}.calculator-cinematic .article-head h1{color:#f7f7f2;font-size:clamp(48px,7vw,86px)}.calculator-cinematic .article-head p:not(.eyebrow),.calculator-cinematic .breadcrumbs{color:#93a099!important}.calculator-cinematic>.site-header{background:#050807e8;border-color:#ffffff12}.calculator-cinematic>.site-header .logo,.calculator-cinematic>.site-header .nav a{color:#f7f7f2}.calculator-cinematic main>.band{background:#090d0c}.calculator-cinematic .zg-calc{max-width:1000px;border-color:#ffffff18;background:#101513;color:#f7f7f2;box-shadow:0 35px 90px #0008}.calculator-cinematic .zg-calc__progress{background:#090d0c;border-color:#ffffff14}.calculator-cinematic .zg-calc__step{color:#718079}.calculator-cinematic .zg-calc__step--active{background:#101513;color:#ffd84d;border-color:#ffd84d}.calculator-cinematic .zg-calc__panel{padding:clamp(26px,5vw,56px)}.calculator-cinematic .zg-calc__panel-title{color:#f7f7f2;font-size:clamp(26px,3vw,38px)}.calculator-cinematic .zg-calc__input-wrap,.calculator-cinematic .zg-calc__field select,.calculator-cinematic .zg-calc__radio-card,.calculator-cinematic .zg-calc__metric,.calculator-cinematic .zg-calc__details,.calculator-cinematic .zg-calc__assume{background:#090d0c;border-color:#ffffff1e;color:#f7f7f2}.calculator-cinematic .zg-calc__input-wrap input,.calculator-cinematic .zg-calc__field select{color:#f7f7f2}.calculator-cinematic .zg-calc__input-prefix,.calculator-cinematic .zg-calc__input-unit,.calculator-cinematic .zg-calc__progress{background:#090d0c}.calculator-cinematic .zg-calc__radio-card.is-checked{border-color:#ffd84d;background:#ffd84d10}.calculator-cinematic .zg-calc__toggle--active,.calculator-cinematic .zg-calc__metric--primary{background:#ffd84d;border-color:#ffd84d;color:#101510}.calculator-cinematic .zg-calc__metric--primary *{color:#101510!important}.calculator-cinematic .zg-calc__panel--results{background:#0c1210}.calculator-cinematic .lead{background:#101513;color:#f7f7f2;border-color:#ffffff18} @media(max-width:980px){.hero-telemetry{right:18px;top:auto;bottom:90px;width:250px}.telemetry:nth-child(n+3){display:none}.solar-lab__grid,.calculator-stage__grid{grid-template-columns:1fr}.house-stage{min-height:500px}.knowledge-card,.knowledge-card:nth-child(n){grid-column:span 6}.home-cinematic .nav{background:#050807}.trust-list article{grid-template-columns:55px 1fr}.trust-list article p{grid-column:2}} @media(max-width:700px){.cine-hero{min-height:820px;align-items:start}.cine-hero__inner{padding-top:140px}.cine-hero h1{font-size:clamp(52px,16vw,74px)}.cine-hero__lede{font-size:17px}.hero-telemetry{position:relative;inset:auto;width:auto;margin:0 18px 75px;grid-template-columns:1fr 1fr}.telemetry:nth-child(n){display:block}.cine-scroll{display:none}.energy-story h2,.solar-lab h2,.calculator-stage h2,.knowledge-stage h2{font-size:clamp(40px,13vw,60px)}.energy-step{grid-template-columns:32px 1fr;gap:16px;min-height:190px}.energy-step>i{display:none}.energy-line{left:16px}.energy-step h3{font-size:38px}.solar-lab__grid,.calculator-stage__grid{gap:50px}.house-stage{min-height:390px}.iso-house{transform:translate(-50%,-35%) scale(.72) rotateX(58deg) rotateZ(-35deg)}.calc-preview{min-height:390px;padding:28px}.calc-preview>p{margin-top:45px}.calc-preview__stats{margin-top:45px}.trust-stage h2,.final-stage h2{font-size:clamp(47px,14vw,68px)}.trust-list article{grid-template-columns:40px 1fr;padding:24px 0}.trust-list h3{font-size:22px}.knowledge-head{align-items:start;flex-direction:column}.knowledge-card,.knowledge-card:nth-child(n){grid-column:1/-1;min-height:390px}.latest-editorial>a{grid-template-columns:35px 1fr 24px;gap:12px}.final-stage{min-height:720px}.cine-button{width:100%}.calculator-cinematic .zg-calc__panel{padding:24px 18px}.calculator-cinematic .zg-calc__step{font-size:11px;padding:13px 4px}} @media(prefers-reduced-motion:reduce){.hero-line>span,[data-reveal],.knowledge-card,.latest-editorial>a,.motion-reveal{opacity:1;transform:none;filter:none;transition:none}.energy-orbit i,.cine-scroll i,.power-flow path,.final-energy::before,.cinematic-media::after{animation:none}.cinematic-media img,.cinematic-media video,.motion-depth-image,.motion-surface{transform:none!important}.page-transition,.scroll-energy-meter{display:none}.motion-enabled main{animation:none}} .notice { border-radius: var(--r-md); background: var(--warm); border-left: 4px solid var(--primary); padding: 18px 22px; margin: 0 0 30px; font-size: 16px; max-width: var(--measure); } .notice p:last-child { margin-bottom: 0; } /* ---------- index listing ---------- */ .index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px 34px; } .index-group h2 { font-size: 18px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 3px solid var(--primary); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .index-group h2 span { font-size: 13.5px; font-weight: 600; color: var(--ink-mut); } .index-group ul { list-style: none; margin: 0; padding: 0; } .index-group li { margin-bottom: 10px; line-height: 1.45; } .index-group a { font-size: 16px; text-decoration: none; color: var(--ink-soft); } .index-group a:hover { color: var(--primary-dark); text-decoration: underline; } /* ---------- footer ---------- */ .site-footer { background: var(--navy); color: #A9BCCE; margin-top: 0; padding: clamp(44px, 5vw, 60px) 0 24px; font-size: 15px; } /* Explicit tracks. `repeat(auto-fit, …)` alongside a fixed first column collapses to a single column, which made the footer enormously tall. */ .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px 32px; } .site-footer h3 { color: #fff; font-size: 15px; margin: 0 0 12px; font-weight: 700; } .site-footer a { color: #A9BCCE; text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 7px; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer .logo b { color: #fff; } .site-footer .logo small { color: #7E93A8; } .site-footer p { color: #90A5B9; line-height: 1.6; } .footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: 14.5px; color: #90A5B9; } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 22px; } /* ---------- motion ---------- */ @media (prefers-reduced-motion: no-preference) { .rise { opacity: 0; transform: translateY(18px); } .rise.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1); } .rise-1.in { transition-delay: .07s; } .rise-2.in { transition-delay: .14s; } .rise-3.in { transition-delay: .21s; } .rise-4.in { transition-delay: .28s; } .card, .tile { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card:hover, .tile:hover { transform: translateY(-5px); } .card-media img { transition: transform .5s cubic-bezier(.22,.7,.3,1); } .card:hover .card-media img { transform: scale(1.05); } .btn { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .nav a { transition: background .16s ease, color .16s ease; } .zg-calc__panel { animation: panel .3s ease both; } @keyframes panel { from { opacity: 0; transform: translateY(10px); } } .word > span { transition: transform .86s cubic-bezier(.16,.84,.28,1); } .hero.ready .word > span { transform: none; } .hero.ready .word:nth-child(1) > span { transition-delay: .06s; } .hero.ready .word:nth-child(2) > span { transition-delay: .14s; } .hero.ready .word:nth-child(3) > span { transition-delay: .22s; } .hero.ready .word:nth-child(4) > span { transition-delay: .30s; } .hero .eyebrow, .hero .lede, .hero-actions, .hero-stats, .scroll-cue { opacity: 0; transform: translateY(18px); transition: opacity .72s ease, transform .72s cubic-bezier(.16,.84,.28,1); } .hero.ready .eyebrow { opacity: 1; transform: none; transition-delay: .02s; } .hero.ready .lede { opacity: 1; transform: none; transition-delay: .42s; } .hero.ready .hero-actions { opacity: 1; transform: none; transition-delay: .5s; } .hero.ready .hero-stats { opacity: 1; transform: none; transition-delay: .58s; } .hero.ready .scroll-cue { opacity: 1; transform: none; transition-delay: .95s; } .scroll-cue i { animation: cue 2.4s ease-in-out infinite; transform-origin: top; } @keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .35 } 50% { transform: scaleY(1); opacity: 1 } } } @media (prefers-reduced-motion: reduce) { .word > span { transform: none !important; } .hero .eyebrow, .hero .lede, .hero-actions, .hero-stats { opacity: 1 !important; transform: none !important; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* is a wrapper only; the inside keeps the layout it had. */ picture { display: contents; } /* ---------- lead capture ---------- Shown only after the calculator produces a result. Asking for contact details before delivering value is the fastest way to lose the lead. */ .lead { max-width: 780px; margin: 28px 0 0; border: 2px solid var(--primary); border-radius: var(--r); background: var(--white); overflow: hidden; box-shadow: var(--shadow-lg); } .lead-head { padding: 30px 30px 0; } .lead-head h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 10px; } .lead-head p { color: var(--ink-soft); font-size: 16px; margin: 0; } .lead-usps { list-style: none; margin: 22px 0 0; padding: 0 30px; display: grid; gap: 9px; } .lead-usps li { position: relative; padding-left: 30px; font-size: 15.5px; font-weight: 600; } .lead-usps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: var(--pill); background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A5A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; } .lead-form { padding: 24px 30px 30px; } .lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .lead-grid .field { max-width: none; margin-bottom: 16px; } .lead-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-soft); margin: 6px 0 20px; line-height: 1.5; cursor: pointer; } .lead-consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--primary-ink); } .lead-submit { width: 100%; font-size: 17px; } .lead-note { font-size: 13.5px; color: var(--ink-mut); margin: 14px 0 0; text-align: center; } .lead-error { color: var(--primary-dark); font-size: 14.5px; font-weight: 600; margin: 14px 0 0; } .lead-done { padding: 34px 30px; text-align: center; } .lead-done h3 { color: var(--accent); margin-bottom: 8px; } .lead-done p { color: var(--ink-soft); margin: 0; } @media (max-width: 620px) { .lead-grid { grid-template-columns: 1fr; } .lead-head, .lead-form, .lead-usps { padding-inline: 20px; } } /* ---------- table of contents ---------- On the old domain these anchors ranked at positions 11-13 while the parent article sat at 38: Google rated the sections above the page. */ .toc { max-width: var(--measure); margin: 0 0 32px; border: 1px solid var(--rule); border-left: 4px solid var(--primary); border-radius: var(--r-md); background: var(--soft); padding: 22px 26px; } .toc-title { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mut); margin: 0 0 12px; } .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; } .toc li { margin-bottom: 8px; break-inside: avoid; font-size: 15.5px; line-height: 1.4; } .toc a { color: var(--ink-soft); text-decoration: none; } .toc a:hover { color: var(--primary-ink); text-decoration: underline; } @media (max-width: 700px) { .toc ol { columns: 1; } } /* anchored headings sit clear of the sticky header */ .prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + 20px); } /* ---------- inline CTA ---------- */ .inline-cta { max-width: var(--measure); margin: 0 0 44px; display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-radius: var(--r); padding: 28px 30px; background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; } .inline-cta h3 { color: #fff; margin: 0 0 6px; font-size: 22px; } .inline-cta p { color: rgba(255,255,255,.78); margin: 0; font-size: 15.5px; max-width: 46ch; } .inline-cta .eyebrow { background: rgba(255,255,255,.13); color: #FFCB8E; margin-bottom: 10px; } .inline-cta .btn { flex: none; } /* ---------- approved article design: controlled first rollout ---------- */ .article-redesign .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(30px, 4vw, 56px); align-items: start; } .article-redesign .article-main { min-width: 0; } .article-redesign .article-head { padding: 42px 0 26px; } .article-redesign .article-head h1 { max-width: 18ch; font-size: clamp(38px, 5vw, 58px); } .article-dek { max-width: 60ch; color: var(--ink-soft); font-size: 19px; line-height: 1.55; margin: 16px 0 0; } .article-redesign .article-meta span { display: inline-flex; align-items: center; } .article-redesign .article-meta span + span::before { content: "•"; color: var(--primary); margin-right: 20px; } .article-redesign .article-figure { margin: 0 0 18px; aspect-ratio: 8 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--soft); box-shadow: var(--shadow); } .article-redesign .article-figure picture { display: block; width: 100%; height: 100%; } .article-redesign .article-figure img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; } .article-redesign .toc { max-width: none; margin: 0 0 26px; padding: 20px 24px; } .article-redesign .prose { max-width: none; padding: 0 0 34px; font-size: 17.5px; line-height: 1.7; } .article-redesign .prose > .lead:first-child { font-size: 18px; border: 0; box-shadow: none; margin-top: 0; } .article-redesign .prose .notice { background: var(--warm); border-left: 4px solid var(--primary); border-radius: var(--r-md); padding: 18px 22px; margin: 24px 0; } .article-redesign .prose .notice p { margin: 0; } .article-redesign .prose table { font-size: 14.5px; } .article-redesign .prose th { background: var(--navy); color: #fff; padding: 11px 13px; text-transform: none; letter-spacing: 0; } .article-redesign .prose td { padding: 12px 13px; } .article-redesign .prose tbody tr:nth-child(even) { background: var(--soft); } .article-redesign .inline-cta { max-width: none; background: var(--warm); color: var(--ink); border: 1px solid #F2DEC8; padding: 22px 24px; } .article-redesign .inline-cta h3 { color: var(--ink); } .article-redesign .inline-cta p { color: var(--ink-soft); } .article-redesign .inline-cta .eyebrow { color: var(--primary-dark); background: #fff; } .article-redesign .author { max-width: none; } .article-sidebar { position: sticky; top: calc(var(--header-h) + 22px); display: grid; gap: 18px; padding-top: 96px; } .side-card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 24px; background: var(--white); box-shadow: var(--shadow); } .side-card--warm { background: linear-gradient(145deg, #FFF8F0, #FFF1E3); } .side-card--source { background: var(--soft); } .side-card h2 { font-size: 21px; margin-bottom: 10px; } .side-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; } .side-card .btn { width: 100%; padding-inline: 16px; border-radius: var(--r-sm); margin-top: 8px; } .side-card small { display: block; color: var(--ink-mut); font-size: 12.5px; line-height: 1.4; margin-top: 12px; } .side-icon { width: 42px; height: 42px; border: 2px solid var(--primary); color: var(--primary-dark); border-radius: var(--r-sm); display: grid; place-items: center; font-weight: 800; margin-bottom: 14px; } .side-checks, .takeaways { list-style: none; margin: 0 0 14px; padding: 0; } .side-checks li, .takeaways li { position: relative; padding-left: 25px; margin: 11px 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; } .side-checks li::before, .takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary-dark); font-weight: 800; } .article-related { padding-top: 44px; } @media (max-width: 940px) { .article-redesign .article-layout { grid-template-columns: 1fr; } .article-sidebar { position: static; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 42px; } .side-card--warm { grid-column: 1 / -1; } } @media (max-width: 620px) { .article-redesign .article-head { padding-top: 28px; } .article-redesign .article-head h1 { font-size: clamp(34px, 10vw, 44px); } .article-dek { font-size: 17px; } .article-redesign .article-meta { gap: 8px 14px; } .article-redesign .article-meta span + span::before { display: none; } .article-redesign .article-figure { aspect-ratio: 4 / 3; } .article-sidebar { grid-template-columns: 1fr; } .side-card--warm { grid-column: auto; } .article-redesign .inline-cta { align-items: stretch; } .article-redesign .inline-cta .btn { width: 100%; } } /* ---------- analytics consent ---------- */ .consent-banner{position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:720px;margin:auto;padding:18px 20px;background:#fff;border:1px solid #d9e2ea;border-radius:12px;box-shadow:0 10px 40px rgba(22,50,79,.2);color:var(--ink)} .consent-banner[hidden]{display:none} .consent-banner p{margin:0 0 8px} .consent-banner div{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} .consent-banner .btn{border:1px solid transparent;cursor:pointer} .consent-banner a{font-weight:600} /* Shared Sun / Earth template finish */ .category-editorial .article-head{background:linear-gradient(145deg,#e8efdf,#f8e6bd);color:#173a3a}.category-editorial .article-head::after{background:radial-gradient(circle,#f6a91d45,transparent 66%)}.category-editorial .article-head h1{color:#173a3a}.category-editorial .article-head p{color:#526b65!important}.category-editorial .breadcrumbs,.category-editorial .breadcrumbs a{color:#8a4b00}.category-editorial .band{background:#fbfaf5} .about-editorial .article-head{background:linear-gradient(140deg,#edf2e8,#fff0d2)}.article-head{background:linear-gradient(180deg,#fbfaf5,#f1f4ec)}.article-figure{box-shadow:0 30px 80px #36564d22}.card{border-color:#dce4da;background:#fffdf8;box-shadow:0 15px 45px #36564d12}.card:hover{box-shadow:0 25px 65px #36564d22}.toc{background:#eef3e9;border-color:#cbd9cb}.inline-cta{background:linear-gradient(135deg,#fff0d2,#e6f0e6)} .calculator-cinematic{background:#f1f4ec}.calculator-cinematic .article-head{background:linear-gradient(145deg,#e6f0e6,#fff0d2)}.calculator-cinematic .article-head h1{color:#173a3a}.calculator-cinematic .zg-calc{background:#fffdf8;border-color:#d5dfd3;box-shadow:0 30px 80px #36564d22}.calculator-cinematic .zg-calc__panel{background:#fffdf8}.calculator-cinematic .zg-calc__step{color:#526b65}.calculator-cinematic .zg-calc__step.active{color:#8a4b00;border-color:#f0a126} /* Simple, static ZonneGids direction */ *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important} .home-cinematic{background:#fbfaf6;color:#173a3a} .home-cinematic .site-header,.home-cinematic.has-scrolled .site-header{position:sticky;background:rgba(251,250,246,.97);border-bottom:1px solid #dfe5df;backdrop-filter:none;color:#173a3a} .home-cinematic .site-header .logo,.home-cinematic .site-header .nav a,.home-cinematic .menu-btn{color:#173a3a} .simple-home-hero{padding:clamp(46px,7vw,100px) 0 clamp(64px,8vw,118px);background:#fbfaf6;border-bottom:1px solid #e1e6df} .simple-home-hero__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);gap:clamp(42px,6vw,92px);align-items:center} .simple-home-hero__copy{padding-block:24px} .simple-eyebrow{margin:0 0 20px;color:#a65300;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.13em} .simple-home-hero h1{max-width:9ch;margin:0 0 26px;color:#173a3a;font-family:var(--display);font-size:clamp(50px,6vw,88px);font-weight:750;line-height:.96;letter-spacing:-.055em} .simple-home-hero h1 em{color:#bd6200;font-style:normal} .simple-home-hero__copy>p:not(.simple-eyebrow){max-width:50ch;margin:0 0 30px;color:#526762;font-size:clamp(17px,1.35vw,20px);line-height:1.65} .simple-home-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-bottom:34px} .simple-home-actions .btn-primary{background:#f2a51a;border-color:#f2a51a;color:#172f2e;box-shadow:none} .simple-text-link{color:#173a3a;font-weight:750;text-decoration:none;border-bottom:1px solid #9ba9a4;padding:8px 0} .simple-proof{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none;color:#526762;font-size:13px;font-weight:650} .simple-proof li::before{content:"✓";margin-right:7px;color:#3c7b56;font-weight:900} .simple-home-hero__image{margin:0;overflow:hidden;border-radius:12px;background:#e8efeb;box-shadow:0 20px 55px rgba(43,72,66,.13)} .simple-home-hero__image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .home-cinematic [data-reveal],.home-cinematic .motion-reveal,.home-cinematic .hero-line>span{opacity:1!important;transform:none!important;filter:none!important} @media(max-width:900px){.simple-home-hero__grid{grid-template-columns:1fr}.simple-home-hero__copy{padding:0}.simple-home-hero__image{order:-1}.simple-home-hero h1{max-width:11ch}.simple-home-hero__image img{aspect-ratio:16/10}} @media(max-width:620px){.simple-home-hero{padding-top:24px}.simple-home-hero__grid{gap:30px}.simple-home-hero h1{font-size:clamp(43px,13vw,58px)}.simple-home-actions{align-items:stretch;flex-direction:column}.simple-home-actions .btn{text-align:center}.simple-home-hero__image{border-radius:8px}.simple-proof{display:grid;gap:8px}} /* Static editorial homepage inspired by the reference's scale and restraint. */ .home-cinematic main{overflow:visible} .home-cinematic h1,.home-cinematic h2,.home-cinematic h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.045em} .home-cinematic .simple-home-hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:.92;max-width:10ch} .home-cinematic .simple-home-hero h1 em{color:#b75219} .home-cinematic .tech-grid,.home-cinematic .energy-reactor,.home-cinematic .house-stage,.home-cinematic .calc-preview,.home-cinematic .final-energy,.home-cinematic .roof-scanner{display:none!important} .home-cinematic .energy-story,.home-cinematic .solar-lab,.home-cinematic .calculator-stage,.home-cinematic .trust-stage,.home-cinematic .knowledge-stage,.home-cinematic .latest-stage,.home-cinematic .final-stage{min-height:0;padding:clamp(78px,10vw,150px) 0;position:relative;color:#16211d} .home-cinematic .energy-story{background:#e9eee9} .home-cinematic .energy-story::before{display:none} .home-cinematic .energy-story__head{position:static;width:auto;max-width:840px;margin:0 0 clamp(52px,7vw,90px);padding:0} .home-cinematic .energy-story h2,.home-cinematic .solar-lab h2,.home-cinematic .calculator-stage h2,.home-cinematic .knowledge-stage h2{color:#16211d;font-size:clamp(48px,7vw,96px);line-height:.92} .home-cinematic .energy-story__head>p:last-child{color:#53645d} .home-cinematic .energy-track{position:static;width:auto;max-width:none;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;border-top:1px solid #aebbb4} .home-cinematic .energy-line{display:none} .home-cinematic .energy-step,.home-cinematic .energy-step.is-active{min-height:260px;display:block;padding:26px 20px 30px 0;border:0;border-right:1px solid #c4cdc8;background:transparent;color:#25342e;opacity:1;transform:none} .home-cinematic .energy-step:last-child{border-right:0;padding-right:0;padding-left:20px}.home-cinematic .energy-step:not(:first-of-type){padding-left:20px} .home-cinematic .energy-step>span{color:#a65019}.home-cinematic .energy-step h3{color:#16211d;font-family:var(--sans);font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;margin:28px 0 12px}.home-cinematic .energy-step p{color:#596a63;font-size:15px}.home-cinematic .energy-step>i{display:none} .home-cinematic .solar-lab{background:#f9f7f1}.home-cinematic .solar-lab__grid,.home-cinematic .calculator-stage__grid{grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);align-items:start}.home-cinematic .solar-lab__copy{grid-column:1/-1}.home-cinematic .orientation-tabs button{border:1px solid #9eaaa4;color:#25342e;background:#fff}.home-cinematic .orientation-tabs button[aria-pressed=true]{background:#f1ad31;border-color:#f1ad31}.home-cinematic .lab-output{border-color:#cbd2ce;max-width:620px}.home-cinematic .lab-output b{color:#16211d}.home-cinematic .lab-output>span{color:#596a63}.home-cinematic .lab-output small{color:#3d7654} .home-cinematic .calculator-stage{background:#d8e2db}.home-cinematic .calculator-stage__grid>div{grid-column:1/-1;max-width:900px}.home-cinematic .calculator-stage__grid>div>p:not(.cine-kicker){color:#53645d}.home-cinematic .calculator-stage .cine-button{display:inline-flex;width:auto} .home-cinematic .trust-stage{background:#173b34;color:#f8f5ed}.home-cinematic .trust-stage h2,.home-cinematic .trust-list h3{color:#f8f5ed}.home-cinematic .trust-stage h2{font-weight:500}.home-cinematic .trust-stage h2 em{color:#f2aa31}.home-cinematic .trust-list{border-color:#ffffff40}.home-cinematic .trust-list article{opacity:1!important;transform:none!important;border-color:#ffffff2e}.home-cinematic .trust-list p{color:#c2cec8} .home-cinematic .knowledge-stage{background:#f9f7f1}.home-cinematic .knowledge-head{margin-bottom:45px}.home-cinematic .knowledge-card{isolation:isolate;opacity:1!important;transform:none!important;filter:none!important;background:#173b34}.home-cinematic .knowledge-card__media{z-index:-1}.home-cinematic .knowledge-card__media::after{background:linear-gradient(transparent 20%,rgba(11,24,20,.9))}.home-cinematic .knowledge-card h3{color:#fff;font-family:Georgia,"Times New Roman",serif}.home-cinematic .knowledge-card>b{color:#f1ad31} .home-cinematic .latest-stage{background:#f9f7f1}.home-cinematic .latest-editorial>a{opacity:1!important;transform:none!important}.home-cinematic .latest-editorial h3{font-family:Georgia,"Times New Roman",serif;font-weight:500} .home-cinematic .final-stage{display:block;text-align:left;background:#f1ad31;color:#16211d}.home-cinematic .final-grid{display:block}.home-cinematic .final-stage h2{max-width:11ch;color:#16211d;font-size:clamp(56px,8vw,112px);font-weight:500}.home-cinematic .final-stage h2 em{color:#fff9e9}.home-cinematic .final-lede{color:#384b43}.home-cinematic .final-stage .cine-kicker{justify-content:flex-start}.home-cinematic .final-stage .cine-button{margin:0;background:#173b34;color:#fff;border-color:#173b34} @media(max-width:900px){.home-cinematic .energy-track{grid-template-columns:1fr 1fr}.home-cinematic .energy-step{border-bottom:1px solid #c4cdc8}.home-cinematic .energy-step:nth-child(even){border-right:0}.home-cinematic .solar-lab__grid,.home-cinematic .calculator-stage__grid{grid-template-columns:1fr}.home-cinematic .nav{background:#fbfaf6}} @media(max-width:620px){.home-cinematic .energy-track{grid-template-columns:1fr}.home-cinematic .energy-step,.home-cinematic .energy-step:not(:first-of-type),.home-cinematic .energy-step:last-child{min-height:0;padding:25px 0;border-right:0;border-bottom:1px solid #c4cdc8}.home-cinematic .energy-step h3{margin-top:14px}.home-cinematic .trust-list article{grid-template-columns:34px 1fr}.home-cinematic .trust-list article p{grid-column:2}.home-cinematic .knowledge-card,.home-cinematic .knowledge-card:nth-child(n){min-height:320px}} .home-cinematic .energy-story__head>p:last-child,.home-cinematic .solar-lab__copy>p:not(.cine-kicker){font-size:0} .home-cinematic .solar-lab__copy>p:not(.cine-kicker){width:100%;max-width:520px} .home-cinematic .energy-story__head>p:last-child::after{content:"In vijf heldere stappen ziet u hoe zonne-energie door uw woning stroomt.";font-size:20px} .home-cinematic .solar-lab__copy>p:not(.cine-kicker)::after{content:"De ligging van uw dak bepaalt een belangrijk deel van de verwachte opbrengst.";font-size:18px} .home-cinematic .solar-lab{position:relative;overflow:hidden}.home-cinematic .solar-lab::after{content:"";position:absolute;right:0;top:0;width:43%;height:100%;background:linear-gradient(90deg,#f9f7f1 0%,transparent 30%),url('/wp-content/uploads/2026/08/zg-home-energy.png') center/cover no-repeat;opacity:.82}.home-cinematic .solar-lab__grid{position:relative;z-index:1}.home-cinematic .solar-lab__copy{grid-column:1;max-width:700px}.home-cinematic .orientation-tabs{display:none}.home-cinematic .lab-output{margin-top:34px} @media(max-width:900px){.home-cinematic .solar-lab::after{position:relative;display:block;width:100%;height:360px;background:linear-gradient(180deg,#f9f7f1 0%,transparent 28%),url('/wp-content/uploads/2026/08/zg-home-energy.png') center/cover no-repeat}.home-cinematic .solar-lab__copy{grid-column:1/-1}} /* Nicolaipalmkvist-inspired measured design system: Prata + Cabin. */ @font-face{font-family:"Prata";src:url('/assets/fonts/prata-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap} :root{--sans:"Cabin",sans-serif;--display:"Prata",serif;--ref-ink:#173330;--ref-coral:#ef5a33;--ref-paper:#f8f9fa;--ref-black:#000;--wrap:1440px} body{font-family:var(--sans);font-size:16px;line-height:1.6;color:rgba(23,51,48,.72);background:var(--ref-paper)} h1,h2,h3,.article-title,.card-title{font-family:var(--display);font-weight:400;letter-spacing:0} .home-cinematic .site-header,.home-cinematic.has-scrolled .site-header{position:sticky;top:0;padding:16px 22px;background:var(--ref-black);border:0;color:#fff} .home-cinematic .header-inner{max-width:1380px;height:56px;padding-inline:26px;background:#000;border-radius:10px} .home-cinematic .site-header .logo,.home-cinematic .site-header .nav a,.home-cinematic .menu-btn{color:#fff}.home-cinematic .site-header .logo small{color:#ffffff8f}.home-cinematic .site-header .nav a{font-size:15px;font-weight:500;padding:9px 12px}.home-cinematic .site-header .nav a[aria-current=page]{background:transparent;color:var(--ref-coral)} .simple-home-hero{padding:0;background:#000;border:0;color:#fff} .simple-home-hero__grid{min-height:690px;max-width:1440px;padding-inline:36px;grid-template-columns:44% 56%;gap:0} .simple-home-hero__copy{position:relative;z-index:2;padding:70px 52px 70px 18px;background:linear-gradient(90deg,#000 83%,transparent)} .simple-eyebrow{color:var(--ref-coral);font-size:15px;font-weight:500;text-transform:none;letter-spacing:0} .home-cinematic .simple-home-hero h1{max-width:9ch;margin-bottom:35px;color:#fff;font-family:var(--display);font-size:clamp(48px,4.25vw,68px);font-weight:400;line-height:1.1;letter-spacing:0}.home-cinematic .simple-home-hero h1 em{color:var(--ref-coral)} .simple-home-hero__copy>p:not(.simple-eyebrow){color:#ffffffb8;font-size:18px;line-height:1.6;max-width:44ch}.simple-home-actions .btn-primary{height:52px;display:inline-flex;align-items:center;background:var(--ref-coral);border-color:var(--ref-coral);border-radius:10px;color:#fff;padding:9px 28px}.simple-text-link{color:#fff;border-color:#ffffff73}.simple-proof{color:#ffffff9c} .simple-home-hero__image{height:100%;align-self:stretch;border-radius:0;box-shadow:none;background:#111}.simple-home-hero__image img{height:100%;aspect-ratio:auto;object-fit:cover;filter:brightness(.72) saturate(.72)} .home-cinematic .energy-story,.home-cinematic .solar-lab,.home-cinematic .calculator-stage,.home-cinematic .trust-stage,.home-cinematic .knowledge-stage,.home-cinematic .latest-stage,.home-cinematic .final-stage{padding:clamp(90px,9vw,145px) 0} .home-cinematic .energy-story{background:var(--ref-paper)}.home-cinematic .energy-story__head{max-width:760px;margin:0 auto 72px}.home-cinematic .energy-story h2,.home-cinematic .solar-lab h2,.home-cinematic .calculator-stage h2,.home-cinematic .knowledge-stage h2,.home-cinematic .trust-stage h2,.home-cinematic .final-stage h2{font-family:var(--display);font-size:clamp(42px,3.6vw,60px);font-weight:400;line-height:1.1;letter-spacing:0}.home-cinematic .energy-track{max-width:1368px;margin-inline:auto;padding-inline:36px}.home-cinematic .energy-step{min-height:250px}.home-cinematic .energy-step h3{font-size:24px;font-weight:500} .home-cinematic .solar-lab{background:#fff}.home-cinematic .solar-lab__grid{min-height:620px;align-items:center}.home-cinematic .solar-lab::after{width:50%;background:linear-gradient(90deg,#fff 0%,transparent 20%),url('/wp-content/uploads/2026/08/zg-home-energy.png') center/cover no-repeat}.home-cinematic .solar-lab__copy{max-width:570px}.home-cinematic .lab-output b{font-family:var(--display);font-weight:400} .home-cinematic .calculator-stage{background:var(--ref-paper)}.home-cinematic .trust-stage{background:#000}.home-cinematic .trust-stage h2,.home-cinematic .trust-list h3{color:#fff}.home-cinematic .trust-stage h2 em{color:var(--ref-coral)}.home-cinematic .trust-list article>span{color:var(--ref-coral)} .home-cinematic .knowledge-stage,.home-cinematic .latest-stage{background:#fff}.home-cinematic .knowledge-head{max-width:1100px;margin-inline:auto}.home-cinematic .knowledge-grid,.home-cinematic .latest-editorial{max-width:1100px;margin-inline:auto}.home-cinematic .knowledge-card{background:#000}.home-cinematic .knowledge-card>b{color:var(--ref-coral)} .home-cinematic .final-stage{background:var(--ref-coral)}.home-cinematic .final-stage h2 em{color:#fff}.home-cinematic .final-stage .cine-button{height:52px;border-radius:10px;background:#000;color:#fff} .site-footer{background:#000}.site-footer,.site-footer a{color:#ffffffb5}.site-footer h3{color:#fff} .article-head h1,.article-title{font-family:var(--display);font-size:clamp(42px,5vw,68px);font-weight:400;line-height:1.12;letter-spacing:0}.prose h2{font-family:var(--display);font-size:clamp(30px,3.2vw,45px);font-weight:400;line-height:1.2;letter-spacing:0}.prose h3{font-family:var(--display);font-weight:400;letter-spacing:0} @media(max-width:980px){.home-cinematic .site-header{padding:0;background:#000}.home-cinematic .header-inner{border-radius:0}.home-cinematic .nav{background:#000}.simple-home-hero__grid{grid-template-columns:1fr;padding:0}.simple-home-hero__copy{padding:70px 36px;background:#000}.simple-home-hero__image{height:430px}.home-cinematic .energy-story__head{margin-inline:auto;padding-inline:36px}.home-cinematic .solar-lab::after{position:relative;width:100%;height:430px;background:url('/wp-content/uploads/2026/08/zg-home-energy.png') center/cover no-repeat}} @media(max-width:620px){.home-cinematic .header-inner{height:66px;padding-inline:18px}.simple-home-hero__copy{padding:60px 22px}.home-cinematic .simple-home-hero h1{font-size:45px}.simple-home-hero__image{height:320px}.home-cinematic .energy-story h2,.home-cinematic .solar-lab h2,.home-cinematic .calculator-stage h2,.home-cinematic .knowledge-stage h2,.home-cinematic .trust-stage h2,.home-cinematic .final-stage h2{font-size:42px}.home-cinematic .energy-track{padding-inline:22px}} /* Hero refinement: one photographic composition, no artificial split. */ .simple-home-hero{position:relative;isolation:isolate;overflow:hidden;background:#000} .simple-home-hero__grid{position:relative;isolation:isolate;display:block;min-height:650px;padding-inline:36px} .simple-home-hero__grid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.97) 26%,rgba(0,0,0,.78) 46%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.06) 100%)} .simple-home-hero__copy{width:min(620px,48%);padding:84px 18px;background:none} .simple-home-hero__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0} .simple-home-hero__image img{width:100%;height:100%;object-fit:cover;object-position:center 56%;filter:brightness(.8) saturate(.78) contrast(1.04)} .home-cinematic .simple-home-hero h1{max-width:10ch;font-size:clamp(50px,4vw,64px);line-height:1.08}.home-cinematic .simple-home-hero h1 em{display:block} .simple-home-hero__copy>p:not(.simple-eyebrow){max-width:40ch}.simple-proof{gap:10px 20px} @media(max-width:900px){.simple-home-hero__grid{min-height:720px;padding:0 24px}.simple-home-hero__grid::after{background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 54%,rgba(0,0,0,.38) 78%,rgba(0,0,0,.12))}.simple-home-hero__copy{width:100%;max-width:620px;padding:68px 0}.simple-home-hero__image{height:100%}.simple-home-hero__image img{object-position:62% center}} @media(max-width:620px){.simple-home-hero__grid{min-height:700px;padding:0 22px}.simple-home-hero__copy{padding:52px 0}.home-cinematic .simple-home-hero h1{font-size:43px}.simple-home-hero__copy>p:not(.simple-eyebrow){font-size:16px}.simple-proof{display:grid}.simple-home-hero__image{height:100%}} /* PHOTON — one continuous solar narrative */ .home-cinematic{--ph-night:#0b1020;--ph-stage:#111832;--ph-panel:#0a2d56;--ph-blue:#56c8ff;--ph-sun:#ffb020;--ph-core:#ffe69a;--ph-paper:#f5f7fb;--ph-status:#51cc94;background:var(--ph-night)} .home-cinematic .site-header{background:rgba(11,16,32,.76);border-color:#ffffff12}.home-cinematic .logo,.home-cinematic .nav a{color:#eef4ff}.home-cinematic .nav a:hover{background:#ffffff10}.home-cinematic .menu-btn{color:#fff;border-color:#ffffff30} .cine-hero{background:radial-gradient(circle at 75% 25%,#28345e 0,#121a34 34%,#0b1020 74%)} .cinematic-media{opacity:.18;mix-blend-mode:luminosity}.cine-hero__shade{background:linear-gradient(90deg,rgba(11,16,32,.98) 0%,rgba(11,16,32,.82) 42%,rgba(11,16,32,.25) 78%,rgba(11,16,32,.72))!important} .cine-hero__inner{z-index:8;max-width:1320px}.cine-hero h1{font-size:clamp(64px,7vw,108px);max-width:9.6ch}.cine-hero h1 em{color:var(--ph-core);text-shadow:0 0 42px #ffb02055}.cine-kicker{color:#8dd9ff!important}.cine-button--solar{background:linear-gradient(120deg,var(--ph-sun),var(--ph-core));border:0;box-shadow:0 18px 45px #ffb0202b}.hero-telemetry{z-index:9} .photon-hero{position:absolute;z-index:5;right:3vw;top:12%;width:min(54vw,760px);height:72%;perspective:1100px;pointer-events:none}.photon-sun{position:absolute;right:10%;top:1%;width:112px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fffce6 0 10%,#ffe69a 22%,#ffb020 62%,#ff783d);box-shadow:0 0 35px #ffcf65,0 0 120px #ff9d304f;animation:sunBreathe 3.6s ease-in-out infinite}.photon-sun i{position:absolute;inset:-28%;border:1px solid #ffcf6540;border-radius:50%;animation:solarOrbit 10s linear infinite}.photon-sun i:nth-child(2){inset:-55%;animation-duration:16s}.photon-sun i:nth-child(3){inset:-88%;animation-duration:24s} .photon-beam{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 7px #ffd166)}.photon-beam path{fill:none;stroke:#ffd166;stroke-width:1.6;stroke-dasharray:8 13;opacity:.72}.photon-beam circle{fill:#fff6b0;filter:drop-shadow(0 0 8px #ffb020)} .panel-machine{position:absolute;left:12%;top:39%;width:430px;height:270px;transform-style:preserve-3d;transform:rotateX(61deg) rotateZ(-32deg)}.panel-machine>div{position:absolute;inset:0;border-radius:8px}.panel-back{background:#111b31;border:2px solid #526782;transform:translateZ(-24px)}.panel-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:13px;transform:translateZ(2px)}.panel-cells i{background:linear-gradient(145deg,#1c72ab,#071b43 65%);border:1px solid #65cfff75;box-shadow:inset 0 0 12px #56c8ff28;opacity:0;transform:translate3d(calc((var(--cell) - 7)*13px),-160px,100px) scale(.55);animation:cellAssemble .85s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.55s + var(--cell)*.055s)}.panel-glass{border:1px solid #b8e7ff80;background:linear-gradient(115deg,transparent 25%,#e9f8ff24 48%,transparent 68%);transform:translateZ(16px);opacity:0;animation:layerLand .8s 1.55s forwards}.panel-frame{border:7px solid #a9bac8;transform:translateZ(22px);opacity:0;animation:layerLand .8s 1.75s forwards}.panel-machine>span{position:absolute;left:10px;top:calc(100% + 20px);color:#8dd9ff;font:700 11px var(--mono);letter-spacing:.12em;transform:rotateZ(32deg) rotateX(-61deg);white-space:nowrap} @keyframes cellAssemble{to{opacity:1;transform:translate3d(0,0,2px) scale(1)}}@keyframes layerLand{to{opacity:1;transform:translateZ(16px)}}@keyframes sunBreathe{50%{transform:scale(1.06);box-shadow:0 0 50px #ffcf65,0 0 150px #ff9d3065}} .energy-story{background:var(--ph-stage);min-height:3300px;position:relative}.energy-story::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,#26325a 0,transparent 32%),linear-gradient(90deg,transparent 49.9%,#ffffff0d 50%,transparent 50.1%)}.energy-story__head{position:sticky;top:110px;z-index:2;margin-left:max(5vw,calc((100vw - 1280px)/2));width:43%;padding-top:90px}.energy-story__head h2{color:#fff;font-size:clamp(58px,7vw,112px);line-height:.88}.energy-story__head p{color:#aab7cf}.energy-track{position:relative;z-index:4;margin-left:54%;width:42%;padding-top:10vh}.energy-step{min-height:560px;border-top:1px solid #ffffff18;opacity:.28;transition:opacity .45s,transform .45s,background .45s;padding:60px 30px}.energy-step.is-active{opacity:1;transform:translateX(-12px);background:linear-gradient(90deg,#56c8ff0c,transparent)}.energy-step h3{color:#fff;font-size:clamp(38px,4vw,64px)}.energy-step p{color:#b9c6da;font-size:18px}.energy-step>span{color:var(--ph-sun)}.energy-line{left:-45px;background:#ffffff15}.energy-line i{background:linear-gradient(var(--ph-sun),var(--ph-blue));box-shadow:0 0 18px var(--ph-blue)} .energy-reactor{position:sticky;z-index:3;top:28vh;margin-left:5vw;width:45vw;height:66vh;pointer-events:none}.energy-reactor svg{width:100%;height:100%;overflow:visible}.reactor-route{fill:none;stroke:#384363;stroke-width:5;stroke-linecap:round}.reactor-photon{fill:var(--ph-core);filter:drop-shadow(0 0 14px var(--ph-sun));transform:translate3d(var(--rx,0),var(--ry,0),0)}.reactor-icons path,.reactor-icons rect{fill:#152442;stroke:#56c8ff;stroke-width:2;transition:fill .4s,filter .4s}.energy-reactor>span{position:absolute;left:8%;bottom:3%;font:700 11px var(--mono);letter-spacing:.14em;color:#8dd9ff}.reactor-sun{position:absolute;left:6%;top:3%;width:70px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbd6,var(--ph-sun));box-shadow:0 0 60px #ffb02070} .solar-lab{background:var(--ph-paper);color:#17213b}.solar-lab h2,.solar-lab h3{color:#10182e}.house-stage{background:linear-gradient(145deg,#10182e,#172342);border-color:#2e4168;box-shadow:0 30px 90px #16213d2c}.orientation-tabs button[aria-pressed=true]{background:var(--ph-sun);color:#241600;border-color:var(--ph-sun)} .final-stage{background:radial-gradient(circle at 72% 45%,#342249 0,#171026 42%,#0b1020 100%);min-height:940px}.final-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:7vw}.final-stage h2{font-size:clamp(62px,7vw,108px);line-height:.9}.final-lede{color:#b9bfd1;max-width:45ch;font-size:19px}.roof-scanner{position:relative;min-height:610px;border:1px solid #ffffff18;background:linear-gradient(145deg,#ffffff08,#ffffff02);overflow:hidden;box-shadow:0 35px 100px #0008}.scan-sun{position:absolute;right:11%;top:10%;width:82px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fffbd6,var(--ph-sun));box-shadow:0 0 80px #ffb02080}.scan-roof{position:absolute;left:12%;top:35%;width:76%;height:250px;background:#10182e;clip-path:polygon(50% 0,100% 38%,84% 100%,16% 100%,0 38%);transform:perspective(800px) rotateX(55deg);border:1px solid #56c8ff}.scan-roof>div{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;width:66%;margin:72px auto}.scan-roof i{height:52px;background:linear-gradient(145deg,#206b9d,#0a2147);border:1px solid #65d4ff;box-shadow:0 0 16px #56c8ff24}.scan-line{position:absolute;left:5%;right:5%;top:24%;height:2px;background:linear-gradient(90deg,transparent,var(--ph-sun),#fff,transparent);box-shadow:0 0 20px var(--ph-sun);animation:roofScan 3.2s ease-in-out infinite}.scan-results{position:absolute;left:8%;right:8%;bottom:6%;display:grid;grid-template-columns:1fr 1fr;gap:5px 24px;padding:20px;border-top:1px solid #56c8ff55;background:#0b1020cc}.scan-results span{grid-column:1/-1;color:#8dd9ff;font:700 10px var(--mono);letter-spacing:.14em}.scan-results strong{font:700 29px var(--display);color:#fff}.scan-results b{font:600 19px var(--mono);color:var(--ph-core)}.scan-results small{grid-column:1/-1;color:#9fa9bd}@keyframes roofScan{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(330px);opacity:1}} @media(max-width:900px){.photon-hero{width:70vw;right:-19vw;opacity:.65}.panel-machine{transform:scale(.72) rotateX(61deg) rotateZ(-32deg)}.hero-telemetry{display:none}.energy-story{min-height:auto;padding-bottom:100px}.energy-story__head,.energy-reactor,.energy-track{position:relative;top:auto;margin:0 auto;width:auto}.energy-reactor{height:520px;width:min(92%,620px)}.energy-track{padding-top:0}.energy-step{min-height:340px}.final-grid{grid-template-columns:1fr}.roof-scanner{min-height:540px}} @media(max-width:620px){.photon-hero{top:25%;right:-48%;width:135vw;height:54%;opacity:.5}.photon-sun{width:76px}.panel-machine{left:10%;top:47%;transform:scale(.58) rotateX(61deg) rotateZ(-32deg)}.cine-hero__inner{padding-top:110px}.cine-hero h1{max-width:8ch}.energy-story__head{padding:95px 20px 35px}.energy-story__head h2{font-size:52px}.energy-reactor{height:410px}.energy-step{padding:42px 20px;min-height:300px}.energy-step h3{font-size:40px}.final-stage{min-height:1050px;padding-block:100px}.final-stage h2{font-size:56px}.roof-scanner{min-height:510px}.scan-results{grid-template-columns:1fr}.scan-results b,.scan-results strong{font-size:20px}} @media(prefers-reduced-motion:reduce){.panel-cells i,.panel-glass,.panel-frame{animation:none;opacity:1;transform:translateZ(2px)}.photon-sun,.scan-line{animation:none}.scan-line{top:55%}} .final-stage{isolation:isolate}.final-stage::before{content:"";position:absolute;inset:0;z-index:-2;background:url('/wp-content/uploads/2026/08/zg-future-solar-home.png') center/cover no-repeat;opacity:.22;filter:saturate(.85)}.final-stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1020 0%,#0b1020e8 40%,#0b102070 72%,#0b1020cc)} /* SUN / EARTH identity — warm daylight replaces the rejected black prototype */ :root{--ground:#fbfaf5;--soft:#f1f4ec;--warm:#fff0d5;--navy:#183c43;--navy-2:#102f35;--ink:#173a3a;--ink-soft:#506a65;--ink-mut:#60766f;--rule:#dce4da;--rule-2:#c8d5ca;--primary:#f0a126;--primary-dark:#8a4b00;--primary-tint:#fff0d2;--primary-ink:#8a4b00;--accent:#3f745c;--accent-tint:#e6f0e6} .site-header{background:rgba(251,250,245,.9);border-color:#dce4da}.site-footer{background:#173a3a}.btn--primary{background:#9a5500} .home-cinematic{background:#fbfaf5;--ph-night:#183c43;--ph-stage:#234b4e;--ph-panel:#0b4169;--ph-blue:#55bde4;--ph-sun:#f6a91d;--ph-core:#ffe3a0;--ph-paper:#fbfaf5;--ph-status:#4a8a65} .home-cinematic .site-header{background:rgba(250,246,235,.82);border-color:#173a3a18}.home-cinematic .logo,.home-cinematic .nav a{color:#173a3a}.home-cinematic .nav a:hover{background:#173a3a0b}.home-cinematic .menu-btn{color:#173a3a;border-color:#173a3a30} .cine-hero{background:linear-gradient(145deg,#f8d999 0%,#f3ebd9 37%,#b9d8d0 100%);color:#173a3a}.cinematic-media{opacity:.2;mix-blend-mode:multiply}.cine-hero__shade{background:linear-gradient(90deg,rgba(250,246,235,.98) 0%,rgba(250,246,235,.9) 42%,rgba(250,246,235,.18) 76%)!important}.cine-hero h1{color:#173a3a}.cine-hero h1 em{color:#b65f00;text-shadow:none}.cine-hero__lede{color:#465f5b}.cine-kicker{color:#266b75!important}.cine-button--line{color:#173a3a;border-color:#173a3a55}.cine-button--line:hover{color:#173a3a;background:#fff8;border-color:#173a3a}.telemetry{background:#fffaf0dd;border-color:#173a3a18;color:#173a3a;box-shadow:0 15px 40px #36564d1c}.telemetry small{color:#60766f}.telemetry__pulse{background:#e68d13}.energy-orbit{border-color:#8a6d321f} .solar-product{position:absolute;z-index:7;right:1.5vw;top:8%;width:min(57vw,900px);height:78%;pointer-events:none}.solar-product canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 34px 35px rgba(34,67,63,.24))}.solar-product.is-webgl+.photon-hero{opacity:0;visibility:hidden}.solar-product:not(.is-webgl){display:none} .energy-story{background:linear-gradient(180deg,#21494c,#2d5b56);color:#fff}.energy-story::before{background:radial-gradient(circle at 15% 5%,#f6a91d35,transparent 30%),linear-gradient(90deg,transparent 49.9%,#ffffff12 50%,transparent 50.1%)}.energy-step.is-active{background:linear-gradient(90deg,#f6a91d16,transparent)}.reactor-icons path,.reactor-icons rect{fill:#264f53;stroke:#9fdddc}.reactor-route{stroke:#ffffff30}.energy-story__head .cine-kicker{color:#ffdb8b!important} .calculator-stage{background:#f6eedc;color:#173a3a}.calculator-stage h2{color:#173a3a}.calculator-stage p{color:#526b65}.calc-preview{background:linear-gradient(145deg,#fffaf0,#edf3e8);border-color:#173a3a1c;color:#173a3a;box-shadow:0 28px 80px #36564d20}.calc-preview strong{color:#a65700}.calc-preview__stats{border-color:#173a3a1c}.calc-preview__stats span{color:#526b65}.calc-preview__stats b{color:#173a3a} .trust-stage{background:#dce9df;color:#173a3a}.trust-stage h2,.trust-list h3{color:#173a3a}.trust-stage h2 em{color:#8a4b00}.trust-list p{color:#526b65}.trust-list article{border-color:#173a3a20}.knowledge-stage{background:#fbfaf5}.latest-stage{background:#f1f4ec}.final-stage{background:#dce9df;color:#173a3a}.final-stage::before{opacity:.34}.final-stage::after{background:linear-gradient(90deg,#eef4e8f5 0%,#eef4e8df 42%,#eef4e84d 75%,#eef4e8d0)}.final-stage h2{color:#173a3a}.final-stage h2 em{color:#a65700}.final-lede{color:#526b65}.roof-scanner{background:#fff8e9c9;border-color:#173a3a28;box-shadow:0 35px 100px #36564d28}.scan-results{background:#173a3ae8}.final-energy{opacity:.22} @media(max-width:900px){.solar-product{right:-14vw;width:76vw;opacity:.7}} @media(max-width:720px){.solar-product{display:none}.solar-product+.photon-hero{visibility:visible;opacity:.48}.cine-hero{background:linear-gradient(160deg,#f6deb0,#c6ddd5)}} /* 2026 solar editorial hero — real product imagery, daylight brand system */ .home-cinematic .cine-hero{background:#dce7e3;min-height:100svh} .home-cinematic .cinematic-media{opacity:1;mix-blend-mode:normal;inset:0 0 0 37%;z-index:-3} .home-cinematic .cinematic-media img{object-position:58% center;filter:saturate(.94) contrast(1.02);transform:scale(1.035) translate3d(calc(var(--mx) * -7px),calc(var(--my) * -5px + var(--hero-scroll,0) * .04px),0)} .home-cinematic .cine-hero__shade{z-index:-2;background:linear-gradient(90deg,#fbfaf5 0%,#fbfaf5 34%,rgba(251,250,245,.91) 43%,rgba(251,250,245,.12) 67%,rgba(251,250,245,.08))!important} .home-cinematic .tech-grid{opacity:.22;mask-image:linear-gradient(90deg,#000,transparent 42%)} .home-cinematic .cine-hero__inner{max-width:1420px;padding-top:clamp(120px,16vh,176px);padding-bottom:clamp(130px,17vh,190px)} .home-cinematic .cine-hero h1{max-width:8.5ch;font-size:clamp(62px,7.6vw,112px);line-height:.89;letter-spacing:-.067em} .home-cinematic .cine-hero__lede{max-width:43ch;color:#3f5956} .home-cinematic .hero-telemetry{top:auto;bottom:5.5vh;right:clamp(18px,4vw,68px);width:min(690px,55vw);grid-template-columns:repeat(4,1fr);gap:7px} .home-cinematic .telemetry{padding:13px 13px 13px 25px;background:rgba(255,253,247,.82);box-shadow:0 16px 45px rgba(41,71,66,.09)} .home-cinematic .telemetry b{font-size:clamp(17px,1.6vw,23px);color:#173a3a} .hero-science{position:absolute;right:3.5vw;top:18%;z-index:2;display:grid;gap:clamp(42px,8vh,88px);color:#173a3a;font:700 9px/1 var(--mono);letter-spacing:.14em;pointer-events:none} .hero-science span{display:flex;align-items:center;gap:10px;opacity:.74}.hero-science span::before{content:"";width:44px;height:1px;background:#b46b17} .home-cinematic .cine-scroll{left:5vw;color:#365d58;align-items:flex-start} @media(max-width:980px){.home-cinematic .cinematic-media{inset:36% -16% 0 10%;opacity:.7}.home-cinematic .cine-hero__shade{background:linear-gradient(180deg,#fbfaf5 0%,#fbfaf5 43%,rgba(251,250,245,.7) 64%,rgba(251,250,245,.22))!important}.hero-science{display:none}.home-cinematic .hero-telemetry{position:absolute;left:18px;right:18px;bottom:20px;width:auto;grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.home-cinematic .cine-hero{min-height:920px}.home-cinematic .cinematic-media{inset:43% -55% 8% -4%;opacity:.78}.home-cinematic .cine-hero__inner{padding-top:104px;padding-bottom:430px}.home-cinematic .cine-hero h1{font-size:clamp(50px,14.5vw,68px)}.home-cinematic .cine-hero__lede{font-size:16px}.home-cinematic .hero-telemetry{grid-template-columns:1fr 1fr}.home-cinematic .telemetry:nth-child(n){display:block}} /* ---------- 2026 editorial page language ---------- */ .category-editorial .article-head { min-height: 42vh; display: grid; align-items: end; padding-block: clamp(70px,10vw,128px) 54px; background: #07110d; color: #f7faf7; position: relative; overflow: hidden; } .category-editorial .article-head::after { content:""; position:absolute; width:48vw; aspect-ratio:1; right:-12vw; top:-25vw; border-radius:50%; background:radial-gradient(circle,rgba(191,255,65,.17),transparent 66%); } .category-editorial .article-head h1 { color:#fff; font-size:clamp(48px,8vw,104px); max-width:10ch; } .category-editorial .article-head p { color:rgba(255,255,255,.68)!important; } .category-editorial .breadcrumbs, .category-editorial .breadcrumbs a { color:#bfff41; } .category-editorial .band { background:#f6f7f3; } .about-editorial .article-head { background:#f3f4ef; padding-bottom:clamp(38px,6vw,74px); } .about-editorial .article-head h1 { font-size:clamp(54px,9vw,112px); } .about-hero { width:min(1380px,calc(100% - 36px)); height:min(68vh,760px); margin:-18px auto clamp(48px,7vw,90px); overflow:hidden; border-radius:4px; background:#07110d; } .about-hero img { width:100%; height:100%; object-fit:cover; } .about-editorial .prose > h2 { margin-top:2.2em; } .cine-hero h1, .energy-story h2, .knowledge-head h2, .final-stage h2 { font-family:var(--display); } .card-media img, .knowledge-card__media img, .article-figure img, .about-hero img { transition:transform .8s cubic-bezier(.2,.75,.25,1),filter .5s ease; } .card:hover .card-media img, .knowledge-card:hover .knowledge-card__media img { transform:scale(1.045); filter:saturate(1.06) contrast(1.03); } @media (max-width:620px) { .category-editorial .article-head { min-height:34vh; padding-block:54px 38px; } .category-editorial .article-head h1 { font-size:clamp(42px,14vw,64px); } .about-hero { width:100%; height:46vh; margin-top:0; border-radius:0; } .about-editorial .article-head h1 { font-size:clamp(48px,15vw,72px); } .cine-hero__inner { padding-top:88px; } .cine-hero h1 { font-size:clamp(43px,12.2vw,52px); line-height:.94; letter-spacing:-.055em; } .cine-hero .hero-line { overflow:visible; } .cine-hero .hero-line + .hero-line { margin-top:.12em; } .cine-hero__lede { max-width:31ch; } .consent-banner { left:12px; right:12px; padding:18px 20px; } .consent-banner div { align-items:stretch; } .consent-banner .btn { flex:1 1 145px; } } /* Final cross-template palette overrides */ .category-editorial .article-head{background:linear-gradient(145deg,#e8efdf,#f8e6bd);color:#173a3a}.category-editorial .article-head::after{background:radial-gradient(circle,#f6a91d45,transparent 66%)}.category-editorial .article-head h1{color:#173a3a}.category-editorial .article-head p{color:#526b65!important}.category-editorial .breadcrumbs,.category-editorial .breadcrumbs a{color:#8a4b00}.category-editorial .band{background:#fbfaf5} .about-editorial .article-head{background:linear-gradient(140deg,#edf2e8,#fff0d2)}.article-head{background:linear-gradient(180deg,#fbfaf5,#f1f4ec)}.article-figure{box-shadow:0 30px 80px #36564d22}.card{border-color:#dce4da;background:#fffdf8;box-shadow:0 15px 45px #36564d12}.card:hover{box-shadow:0 25px 65px #36564d22}.toc{background:#eef3e9;border-color:#cbd9cb}.inline-cta{background:linear-gradient(135deg,#fff0d2,#e6f0e6)} .calculator-cinematic{background:#f1f4ec}.calculator-cinematic .article-head{background:linear-gradient(145deg,#e6f0e6,#fff0d2)}.calculator-cinematic .article-head h1{color:#173a3a}.calculator-cinematic .zg-calc{background:#fffdf8;border-color:#d5dfd3;box-shadow:0 30px 80px #36564d22}.calculator-cinematic .zg-calc__panel{background:#fffdf8}.calculator-cinematic .zg-calc__step{color:#526b65}.calculator-cinematic .zg-calc__step.active{color:#8a4b00;border-color:#f0a126}