/* Theme Name: ZAN KLIMA — HVAC Konsult Theme URI: https://hvackonsult.tech Author: ZAN KLIMA Author URI: https://hvackonsult.tech Description: Bilingual (EN/DE) theme for hvackonsult.tech — ZAN KLIMA, HVAC Engineering & Technical Consulting. The theme carries the visual design only; all page content lives in the block editor as editable patterns. Charts, the experience matrix and the enquiry form are provided as shortcodes. Version: 1.4.0 Requires at least: 6.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: hvackonsult Tags: two-columns, block-patterns, custom-colors, custom-logo, custom-menu, dark-mode, editor-style, translation-ready, wide-blocks */ /* Self-hosted webfonts — no third-party requests, no consent required. Satoshi (c) Indian Type Foundry, IBM Plex Mono (c) IBM — both SIL Open Font License 1.1 */ @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('assets/fonts/satoshi-900.woff2') format('woff2'); font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem); --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem); --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem); --text-lg:clamp(1.125rem,1rem + 0.5vw,1.375rem); --text-xl:clamp(1.375rem,1.15rem + 1vw,1.875rem); --text-2xl:clamp(1.75rem,1.3rem + 2vw,2.75rem); --text-hero:clamp(2rem,1.4rem + 3vw,3.75rem); --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem; --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem; --radius:14px;--radius-sm:9px; --font-body:'Satoshi','Inter',system-ui,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; } :root,[data-theme="light"]{ --bg:#eefaf8;--surface:#ffffff;--surface-2:#e3f4f4;--border:#c9dcdb; --text:#08232b;--text-muted:#54676d; --accent:#008693;--accent-soft:#c3eef0;--on-accent:#fcfcfc; --sand:#d29754;--coral:#d55a44;--rain:#3275b4;--leaf:#419363;--violet:#8062b0; --shadow:0 1px 2px #001a220f,0 8px 24px -12px #001a2224; --deep:#08232b; } [data-theme="dark"]{ --bg:#06161f;--surface:#0e212a;--surface-2:#152b35;--border:#253842; --text:#e6f1f3;--text-muted:#97a8ac; --accent:#3dc8c8;--accent-soft:#05373c;--on-accent:#061821; --sand:#e7b375;--coral:#ef8168;--rain:#6da9e7;--leaf:#6ebf8c;--violet:#af95df; --shadow:0 1px 2px #0000004c,0 10px 30px -14px #0000008c; --deep:#04121a; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body); font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700} p{margin:0} img{display:block;max-width:100%} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums} .wrap{max-width:1320px;margin:0 auto;padding:0 clamp(var(--space-4),3vw,var(--space-10))} a{color:var(--accent)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px); background:color-mix(in oklch,var(--bg) 84%,transparent);border-bottom:1px solid var(--border)} .hrow{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 0} .brand{display:flex;align-items:center;gap:var(--space-3);min-width:0;text-decoration:none;color:inherit} .brand .logo{height:30px;width:auto;flex:none} .brand .bd{font-size:.7rem;color:var(--text-muted);letter-spacing:.04em;font-weight:500; white-space:nowrap;padding-left:var(--space-3);border-left:1px solid var(--border);line-height:1.2} [data-theme="light"] .logo-l{display:none} [data-theme="dark"] .logo-d{display:none} @media(max-width:820px){.brand .bd{display:none}} /* language switcher */ .langsw{display:flex;gap:2px;margin-left:auto;flex:none;padding:3px;border-radius:99px; border:1px solid var(--border);background:var(--surface)} .langsw .lang{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em; color:var(--text-muted);text-decoration:none;padding:5px 9px;border-radius:99px;line-height:1} .langsw .lang:hover{color:var(--text);background:var(--surface-2)} .langsw .lang.on{background:var(--accent);color:var(--on-accent)} nav{display:flex;gap:var(--space-1);margin-left:var(--space-3);align-items:center} nav a{font-size:var(--text-xs);color:var(--text-muted);text-decoration:none;font-weight:600; padding:var(--space-2) var(--space-3);border-radius:99px;white-space:nowrap;letter-spacing:.04em} nav a:hover{color:var(--text);background:var(--surface-2)} nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)} .icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:99px; border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;flex:none} .icon-btn:hover{background:var(--surface-2)} .btn{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700; padding:var(--space-3) var(--space-5);border-radius:99px;text-decoration:none;border:1px solid var(--accent); background:var(--accent);color:var(--on-accent);cursor:pointer;transition:filter .2s ease,transform .2s ease; font-family:inherit;letter-spacing:.03em} .btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn.ghost:hover{background:var(--surface-2)} .btn.lg{font-size:var(--text-sm);padding:var(--space-4) var(--space-6)} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--deep);color:#eaf6f6; border-bottom:1px solid var(--border)} .hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.55} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,#04121af2 0%,#04121ac9 46%,#04121a4d 100%)} .hero .wrap{position:relative;z-index:1} .hero-inner{padding:var(--space-20) 0 var(--space-16)} .eyebrow{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--accent); font-weight:700;font-family:var(--font-mono)} .hero h1{font-size:var(--text-hero);margin:var(--space-4) 0;max-width:23ch;color:#f2fbfb} .hero .lede{font-size:var(--text-sm);color:#a9c4c8;max-width:66ch} .hero .sub{font-size:var(--text-lg);color:#cfe6e8;max-width:40ch;margin-top:var(--space-3);font-weight:500} .cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)} .hero .btn.ghost{color:#eaf6f6;border-color:#ffffff40} .hero .btn.ghost:hover{background:#ffffff17} .tickline{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin-top:var(--space-10); padding-top:var(--space-5);border-top:1px solid #ffffff1f;font-family:var(--font-mono); font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:#8fb2b7} .tickline span{display:flex;align-items:center;gap:8px} .tickline span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none} .pagehero{padding:var(--space-16) 0 var(--space-12)} .pagehero h1{font-size:var(--text-2xl);max-width:28ch;margin:var(--space-3) 0;color:#f2fbfb} .pagehero p{font-size:var(--text-sm);color:#a9c4c8;max-width:70ch;margin-top:var(--space-4)} /* ---------- sections ---------- */ section{padding:var(--space-16) 0 0} section.pb{padding-bottom:var(--space-16)} section.alt{background:var(--surface-2);border-block:1px solid var(--border); margin-top:var(--space-16);padding-bottom:var(--space-16)} section.alt+section{padding-top:var(--space-16)} .shead{display:flex;align-items:end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)} .shead .col{min-width:0;flex:1 1 420px} .shead h2{font-size:var(--text-xl);max-width:32ch} .shead p{margin:var(--space-3) 0 0;color:var(--text-muted);font-size:var(--text-sm);max-width:70ch} .shead .btn{flex:none} .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:var(--space-5);box-shadow:var(--shadow)} .grid{display:grid;gap:var(--space-4)} .g2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.g2,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} .split{display:grid;gap:var(--space-8);grid-template-columns:1.05fr .95fr;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}} .lead{color:var(--text-muted);font-size:var(--text-sm);max-width:72ch} .lead+.lead{margin-top:var(--space-4)} .quote{font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em;max-width:44ch; border-left:3px solid var(--accent);padding-left:var(--space-5)} /* ---------- service cards ---------- */ .svc{display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:inherit; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} a.svc:hover{transform:translateY(-3px);border-color:var(--accent)} .svc .n{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);font-weight:600} .svc h3{font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase} .svc p{font-size:var(--text-xs);color:var(--text-muted)} .svc .go{font-size:var(--text-xs);font-weight:700;color:var(--accent);margin-top:auto;padding-top:var(--space-2)} .ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:var(--text-xs)} .ticks li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--text-muted)} .ticks li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:2px; background:var(--dot,var(--accent))} .ticks.two{grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-6)} @media(max-width:700px){.ticks.two{grid-template-columns:1fr}} /* detailed service block */ .svcblock{display:grid;gap:var(--space-6);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding:var(--space-8);align-items:start} @media(max-width:860px){.svcblock{grid-template-columns:1fr;padding:var(--space-5)}} .svcblock h3{font-size:var(--text-lg);margin:var(--space-3) 0} .svcblock .k{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700; color:var(--text-muted);margin-bottom:var(--space-3)} /* ---------- KPI ---------- */ .kpi{display:flex;flex-direction:column} .kpi .k{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase; font-family:var(--font-mono)} .kpi .v{font-size:var(--text-xl);font-weight:900;margin-top:var(--space-2);letter-spacing:-.02em} .kpi .n{font-size:var(--text-xs);color:var(--text-muted);margin-top:auto; border-top:1px dashed var(--border);padding-top:var(--space-3)} .kpi .v{margin-bottom:var(--space-5)} /* ---------- notes ---------- */ .note{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm); padding:var(--space-4) var(--space-5);background:var(--surface)} .note h3{font-size:var(--text-sm);margin-bottom:var(--space-2)} .note p{margin:0;font-size:var(--text-xs);color:var(--text-muted)} .note.warn{border-left-color:var(--coral)} .note.ok{border-left-color:var(--leaf)} .note.sand{border-left-color:var(--sand)} .note.violet{border-left-color:var(--violet)} .note.rain{border-left-color:var(--rain)} /* ---------- steps ---------- */ .steps{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:var(--space-5)} .step .n{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);font-weight:600} .step h3{font-size:var(--text-sm);margin:var(--space-2) 0} .step p{font-size:var(--text-xs);color:var(--text-muted)} /* ---------- charts ---------- */ .chartbox{position:relative;height:330px} .cap{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-4); border-top:1px dashed var(--border);padding-top:var(--space-3)} /* sector grid — 4 across, 8 cells */ .gt{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1180px){.gt{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.gt{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.gt{grid-template-columns:1fr}} /* ---------- sector tiles ---------- */ .tile{overflow:hidden;padding:0;display:flex;flex-direction:column;text-decoration:none;color:inherit; transition:transform .25s ease,box-shadow .25s ease} a.tile:hover{transform:translateY(-3px);box-shadow:0 1px 2px #001a2214,0 22px 40px -22px #001a2245} .tile .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--deep)} .tile .ph img{width:100%;height:100%;object-fit:cover} .tile .ph::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,#04121ab8 0%,#04121a1a 55%,transparent 100%)} .tile .ph .idx{position:absolute;left:var(--space-4);bottom:var(--space-3);z-index:1; font-family:var(--font-mono);font-size:var(--text-xs);color:#a9e6e6;letter-spacing:.12em} .tile .body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1} .tile h3{font-size:var(--text-sm);letter-spacing:.03em;text-transform:uppercase} .tile p{font-size:var(--text-xs);color:var(--text-muted)} .tile .go{font-size:var(--text-xs);font-weight:700;color:var(--accent);margin-top:auto} /* sector detail */ .sector{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start;padding:var(--space-8);scroll-margin-top:90px} @media(max-width:900px){.sector{grid-template-columns:1fr;padding:var(--space-5)}} .sector img{border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover;width:100%; position:sticky;top:96px} @media(max-width:900px){.sector img{position:static}} .sector h2{font-size:var(--text-lg);margin:var(--space-3) 0} .sector .kk{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--accent);font-weight:600} /* ---------- pills / chips ---------- */ .pills{display:flex;flex-wrap:wrap;gap:var(--space-2)} .pills a,.pills span{font-size:var(--text-xs);font-weight:600;color:var(--text-muted); border:1px solid var(--border);background:var(--surface);border-radius:99px; padding:var(--space-2) var(--space-4);text-decoration:none} .pills a:hover{color:var(--text);border-color:var(--accent)} /* ---------- matrix table ---------- */ .tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} table.mx{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--text-xs)} table.mx th,table.mx td{padding:var(--space-3) var(--space-4);text-align:left; border-bottom:1px solid var(--border);white-space:nowrap} table.mx thead th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text-muted);font-weight:600} table.mx tbody th{font-weight:700;white-space:normal;min-width:190px} table.mx td{text-align:center;color:var(--text-muted)} table.mx tbody tr:last-child th,table.mx tbody tr:last-child td{border-bottom:none} table.mx tbody tr:hover{background:var(--surface-2)} .dot{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--accent)} .dot.half{background:var(--accent);opacity:.38} /* ---------- form ---------- */ form.q{display:grid;gap:var(--space-4);grid-template-columns:1fr 1fr;min-width:0} form.q>*{min-width:0} form.q .full{grid-column:1/-1} label{display:grid;gap:var(--space-2);font-size:var(--text-xs);font-weight:700} input,select,textarea{width:100%;min-width:0;max-width:100%;font-family:inherit;font-size:var(--text-sm); color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4)} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px} textarea{min-height:140px;resize:vertical} .hint{font-size:var(--text-xs);color:var(--text-muted);font-weight:400} .check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-xs);font-weight:400; color:var(--text-muted)} .check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent)} .upload{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap; border:1px dashed var(--border);border-radius:var(--radius-sm);padding:var(--space-4);background:var(--bg)} .formmsg{font-size:var(--text-xs);color:var(--leaf);font-weight:700} @media(max-width:700px){form.q{grid-template-columns:1fr}} /* ---------- faq ---------- */ details{border-bottom:1px solid var(--border);padding:var(--space-4) 0} details summary{cursor:pointer;font-weight:700;font-size:var(--text-sm);list-style:none; display:flex;justify-content:space-between;gap:var(--space-4)} details summary::-webkit-details-marker{display:none} details summary::after{content:"+";color:var(--accent);font-family:var(--font-mono)} details[open] summary::after{content:"–"} details p{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);max-width:75ch} /* ---------- cta band ---------- */ .band{background:var(--deep);color:#eaf6f6;border-radius:var(--radius);padding:var(--space-10); display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;position:relative;overflow:hidden} .band>*{position:relative;z-index:1} .band::before{content:"";position:absolute;inset:0;background:url("assets/img/hero-abstract.jpg") center/cover; opacity:.34} .band::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,#04121aed 0%,#04121ac4 55%,#04121a6b 100%)} .band h2{font-size:var(--text-xl);max-width:32ch;color:#f2fbfb} .band p{color:#a9c4c8;font-size:var(--text-sm);max-width:62ch;margin-top:var(--space-3)} .band .mail{font-family:var(--font-mono);font-size:var(--text-xs);color:#5fd6d6; margin-top:var(--space-4);display:block;text-decoration:none} .band .mail:hover{color:#8ce8e8} .band .btn{margin-left:auto} /* residential cross-link */ .homelink{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap;padding:var(--space-5)} .homelink img{width:132px;height:100px;object-fit:cover;border-radius:var(--radius-sm);flex:none} .homelink .t{flex:1 1 300px;min-width:0} /* residential tile inside the sector grid */ .tile.home{background:var(--deep);border-color:transparent;color:#eaf6f6} .tile.home .ph::after{background:linear-gradient(to top,#04121ae6 0%,#04121a52 60%,transparent 100%)} .tile.home h3{color:#f2fbfb} .tile.home p{color:#a9c4c8} .tile.home .go{color:var(--accent)} .homelink h3{font-size:var(--text-sm);letter-spacing:.03em;text-transform:uppercase} .homelink p{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)} /* ---------- footer ---------- */ footer{margin-top:var(--space-20);padding:var(--space-12) 0 var(--space-8); border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-muted)} .frow{display:flex;gap:var(--space-10);flex-wrap:wrap;justify-content:space-between} .fcol{display:grid;gap:var(--space-2);align-content:start} .fcol strong{color:var(--text);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase; font-family:var(--font-mono)} .fcol .flogo{height:44px;width:auto;margin-bottom:var(--space-2)} .fcol a{color:var(--text-muted);text-decoration:none} .fcol a:hover{color:var(--accent)} .fbot{margin-top:var(--space-10);padding-top:var(--space-5);border-top:1px solid var(--border); display:flex;gap:var(--space-4) var(--space-6);flex-wrap:wrap;justify-content:space-between} .fbot nav{margin:0;gap:var(--space-4)} .fbot nav a{padding:0;font-weight:500;letter-spacing:0} /* ---------- motion ---------- */ .reveal{opacity:0;transform:translateY(14px)} .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none}} @media (max-width:980px){ .hrow{flex-wrap:wrap;row-gap:var(--space-2)} .brand{order:1} .langsw{order:2;margin-left:auto} .icon-btn{order:3;margin-left:0} nav{order:4;flex-basis:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; padding-bottom:var(--space-1)} nav::-webkit-scrollbar{display:none} nav .btn{display:none} .chartbox{height:290px} .band{padding:var(--space-6)} .band .btn{margin-left:0} .hero-inner{padding:var(--space-16) 0 var(--space-12)} } /* ---------- company details tables ---------- */ table.tbl{border-collapse:collapse;width:100%;font-size:var(--text-xs)} table.tbl td{border-bottom:1px solid var(--border);padding:var(--space-3) 0;vertical-align:top} table.tbl td:first-child{color:var(--text-muted);font-weight:500;white-space:normal; width:44%;padding-right:var(--space-4)} table.tbl td:last-child{font-weight:600;white-space:normal} table.tbl tr:last-child td{border-bottom:none} table.tbl a{text-decoration:none} table.tbl a:hover{text-decoration:underline} .card > .eyebrow + table.tbl{margin-top:var(--space-3)} /* ---------- legal prose pages ---------- */ .prose{max-width:68ch;margin:0 auto} .prose>*:first-child{margin-top:0} .prose h2{font-size:var(--text-lg);line-height:1.25;letter-spacing:-.015em; margin:var(--space-10) 0 var(--space-4);padding-top:var(--space-5); border-top:1px solid var(--border)} .prose h2:first-child{border-top:none;padding-top:0} .prose h3{font-size:var(--text-sm);font-weight:700;letter-spacing:0; margin:var(--space-6) 0 var(--space-2);color:var(--text)} .prose h2+h3{margin-top:var(--space-4)} .prose p{font-size:var(--text-sm);line-height:1.7;color:var(--text-muted); margin:0 0 var(--space-4)} .prose h2+p,.prose h3+p{margin-top:0} .prose ul{margin:0 0 var(--space-5);padding-left:1.15rem;display:grid;gap:var(--space-2)} .prose ul li{font-size:var(--text-sm);line-height:1.65;color:var(--text-muted)} .prose ul li::marker{color:var(--accent)} .prose aside.note{margin:var(--space-6) 0} .prose aside.note p{margin:0;font-size:var(--text-xs);line-height:1.65} .prose .tblwrap{margin:var(--space-6) 0} .prose p a{overflow-wrap:anywhere} .prose>p:last-child{font-family:var(--font-mono);font-size:var(--text-xs); letter-spacing:.02em;color:var(--text-muted);margin-top:var(--space-6); padding-top:var(--space-4);border-top:1px solid var(--border)} table.mx.mx-left td{text-align:left;white-space:normal;color:var(--text-muted)} table.mx.mx-left th{white-space:normal} table.mx.mx-left tbody td:first-child{color:var(--text);font-weight:600;min-width:130px} @media(max-width:640px){.prose h2{font-size:var(--text-base)}} /* Sector wheel — an equal-segment ring used as navigation, not as a statistic. The segments carry no proportions: they select an area and reveal the sectors it covers, each linking to the detailed block further down the page. */ .sektory{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:var(--space-8); align-items:center;padding:var(--space-8)} .sekwheel{position:relative} .sekwheel svg{width:100%;height:auto;display:block} .sekwheel .seg{opacity:var(--seg-dim,.5);cursor:pointer;transition:opacity .25s ease,stroke-width .25s ease} .sekwheel .seg:hover{opacity:.78} .sekwheel .seg.on{opacity:1;stroke-width:38} .sekwheel .seg:focus{outline:none} .sekcenter{position:absolute;inset:24%;display:grid;place-content:center;text-align:center;gap:4px; pointer-events:none} .sekcenter-k{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)} .sekcenter-v{font-size:var(--text-sm);line-height:1.25;letter-spacing:-.01em;font-weight:700} .sekside{display:grid;gap:var(--space-5);min-width:0} .sekchips{display:flex;flex-wrap:wrap;gap:var(--space-2)} .sekchip{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:var(--text-xs); font-weight:600;padding:var(--space-2) var(--space-4);border-radius:99px;cursor:pointer; border:1px solid var(--border);background:var(--surface);color:var(--text-muted); transition:color .2s ease,background .2s ease,border-color .2s ease} .sekchip i{width:9px;height:9px;border-radius:3px;flex:none} .sekchip:hover{color:var(--text)} .sekchip[aria-pressed="true"]{background:var(--surface-2);color:var(--text);border-color:var(--text-muted)} .sekpanels{border-top:1px dashed var(--border);padding-top:var(--space-5);min-height:170px} .sekpanel-k{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:700; margin:0 0 var(--space-2)} .sekpanel-s{font-size:var(--text-xs);color:var(--text-muted);margin:0 0 var(--space-4)} .sekpanel .ticks li::before{background:var(--dot,var(--accent))} .sekpanel .ticks a{color:inherit;text-decoration:none;border-bottom:1px solid var(--border)} .sekpanel .ticks a:hover{border-bottom-color:currentColor} /* Inactive panels are hidden by script; without JavaScript every panel stays visible, so the content is never lost and search engines read all of it. */ .sekpanel[hidden]{display:none} .sekpanel:not([hidden]){animation:sekFade .35s ease} @keyframes sekFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(max-width:860px){ .sektory{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-5)} .sekwheel{max-width:300px;margin:0 auto} .sekpanels{min-height:0} } [data-theme="dark"] .sekwheel{--seg-dim:.42} /* ===================================================================== Gutenberg bridge — maps core block wrappers onto the design system so every section stays fully editable in the block editor. ===================================================================== */ /* Group wrappers must never break a grid or flex layout. */ .zkc > .wp-block-group__inner-container { display: contents } /* Blocks follow the theme rhythm instead of Gutenberg defaults. */ main .wp-block-group, main .wp-block-columns { margin-block: 0 } main p, main h1, main h2, main h3, main h4, main ul, main ol { margin-block: 0 } main .wp-block-image { margin: 0 } main .wp-block-image img { border-radius: var(--radius-sm); display: block } main .alignfull { width: 100%; max-width: none } /* ---------- hero ---------- */ .zk-hero { position: relative; overflow: hidden; background: var(--deep); color: #eaf6f6; border-bottom: 1px solid var(--border) } .zk-hero .zk-hero-bg { position: absolute; inset: 0; margin: 0; z-index: 0 } .zk-hero .zk-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; border-radius: 0 } .zk-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, #04121af2 0%, #04121ac9 46%, #04121a4d 100%) } .zk-hero > .wrap, .zk-hero .wrap { position: relative; z-index: 1 } .zk-hero h1, .zk-hero h2 { color: #f2fbfb } .zk-hero .lede, .zk-hero .pagehero p { color: #a9c4c8 } .zk-hero .sub { color: #cfe6e8; font-size: var(--text-lg); font-weight: 500; max-width: 40ch; margin-top: var(--space-3) } .zk-hero .lede { margin-top: var(--space-5) } .zk-hero .eyebrow { color: var(--accent) } .zk-hero .hero-inner { padding: var(--space-20) 0 var(--space-16) } .zk-hero .hero-inner h1 { font-size: var(--text-hero); margin: var(--space-4) 0; max-width: 23ch } .zk-hero .pagehero h1 { font-size: var(--text-2xl); max-width: 28ch; margin: var(--space-3) 0 } .zk-hero .pagehero p { font-size: var(--text-sm); max-width: 70ch; margin-top: var(--space-4) } @media (max-width: 980px) { .zk-hero .hero-inner { padding: var(--space-16) 0 var(--space-12) } } /* ---------- section shells ---------- */ .zk-section { padding: var(--space-16) 0 0 } .zk-section.pb { padding-bottom: var(--space-16) } .zk-section.alt { background: var(--surface-2); border-block: 1px solid var(--border); margin-top: var(--space-16); padding-bottom: var(--space-16) } .zk-section.alt + .zk-section { padding-top: var(--space-16) } .zk-section > .wrap > * + * { margin-top: var(--space-4) } .zk-section > .wrap > .shead + * { margin-top: var(--space-8) } /* ---------- section heading row ---------- */ .shead { display: flex; align-items: end; gap: var(--space-4); flex-wrap: wrap } .shead .col { min-width: 0; flex: 1 1 420px; display: grid; gap: var(--space-3) } .shead .col h2 { max-width: 32ch } .shead .col p { color: var(--text-muted); font-size: var(--text-sm); max-width: 70ch } .shead .shead-cta { margin-left: auto; margin-bottom: 2px } /* ---------- split ---------- */ .split { display: grid; gap: var(--space-8); grid-template-columns: 1.05fr .95fr; align-items: start } .split .split-col { display: grid; gap: var(--space-4); align-content: start } .split .split-col h2 { font-size: var(--text-xl); max-width: 28ch; margin-top: var(--space-1) } @media (max-width: 900px) { .split { grid-template-columns: 1fr } } /* ---------- cards ---------- */ .card { display: grid; gap: var(--space-3); align-content: start } .card.zk-pad-sm { padding: var(--space-4) } .card.zk-pad-lg { padding: var(--space-8) } .zk-mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) } .zk-mt { margin-top: var(--space-6) } .zk-mt-lg { margin-top: var(--space-8) } .zk-divider { margin-top: var(--space-6); border-top: 1px dashed var(--border); padding-top: var(--space-5); display: grid; gap: var(--space-3) } /* service cards */ .card.svc { transition: transform .25s ease, border-color .25s ease } .card.svc:hover { transform: translateY(-3px); border-color: var(--accent) } .card.svc h3 { font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase } .card.svc h3 a { color: inherit; text-decoration: none } .card.svc p { font-size: var(--text-xs); color: var(--text-muted) } .card.svc .go { margin-top: auto; padding-top: var(--space-2) } .card.svc .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 600 } .go, a.go { font-size: var(--text-xs); font-weight: 700; color: var(--accent); text-decoration: none } .go:hover { text-decoration: underline } /* service detail blocks */ .card.svcblock { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: var(--space-8); align-items: start; scroll-margin-top: 96px } .card.svcblock .svcblock-col { display: grid; gap: var(--space-3); align-content: start } .card.svcblock h3 { font-size: var(--text-lg) } .card.svcblock .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 600 } .card.svcblock .k, .card.sector .k { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted) } @media (max-width: 860px) { .card.svcblock { grid-template-columns: 1fr; padding: var(--space-5) } } /* sector detail blocks */ .card.sector { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; padding: var(--space-8); scroll-margin-top: 96px } .card.sector .sector-col { display: grid; gap: var(--space-3); align-content: start } .card.sector .wp-block-image { position: sticky; top: 96px } .card.sector .wp-block-image img { aspect-ratio: 4/3; object-fit: cover; width: 100% } .card.sector h2 { font-size: var(--text-lg) } .card.sector .kk { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600 } @media (max-width: 900px) { .card.sector { grid-template-columns: 1fr; padding: var(--space-5) } .card.sector .wp-block-image { position: static } } /* tiles */ .card.tile { padding: 0; overflow: hidden; gap: 0; transition: transform .25s ease, box-shadow .25s ease } .card.tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px #001a2214, 0 22px 40px -22px #001a2245 } .card.tile .zk-ph { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--deep); display: block } .card.tile .zk-ph .wp-block-image { position: absolute; inset: 0; height: 100% } .card.tile .zk-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 } .card.tile .zk-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #04121ab8 0%, #04121a1a 55%, transparent 100%) } .card.tile .zk-ph .idx { position: absolute; left: var(--space-4); bottom: var(--space-3); z-index: 1; font-family: var(--font-mono); font-size: var(--text-xs); color: #a9e6e6; letter-spacing: .12em; margin: 0 } .card.tile .body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; flex: 1 } .card.tile h3 { font-size: var(--text-sm); letter-spacing: .03em; text-transform: uppercase } .card.tile h3 a { color: inherit; text-decoration: none } .card.tile p { font-size: var(--text-xs); color: var(--text-muted) } .card.tile.home { background: var(--deep); border-color: transparent; color: #eaf6f6 } .card.tile.home .zk-ph::after { background: linear-gradient(to top, #04121ae6 0%, #04121a52 60%, transparent 100%) } .card.tile.home h3, .card.tile.home h3 a { color: #f2fbfb } .card.tile.home p { color: #a9c4c8 } /* KPI cards */ .card.kpi { display: flex; flex-direction: column } .card.kpi .k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase } .card.kpi .v { font-size: var(--text-xl); font-weight: 900; letter-spacing: -.02em; margin-top: var(--space-2); margin-bottom: var(--space-5) } .card.kpi .n { font-size: var(--text-xs); color: var(--text-muted); margin-top: auto; border-top: 1px dashed var(--border); padding-top: var(--space-3) } /* notes */ .note { display: grid; gap: var(--space-2) } .note h3 { font-size: var(--text-sm) } .note p { margin: 0; font-size: var(--text-xs); color: var(--text-muted) } /* steps */ .steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) } .step { display: grid; gap: var(--space-2); align-content: start } .step .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 600 } .step h3 { font-size: var(--text-sm) } .step p { font-size: var(--text-xs); color: var(--text-muted) } /* homelink */ .card.homelink { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; padding: var(--space-5) } .card.homelink .wp-block-image { flex: none } .card.homelink .wp-block-image img { width: 132px; height: 100px; object-fit: cover } .card.homelink .t { flex: 1 1 300px; min-width: 0; display: grid; gap: var(--space-2) } .card.homelink .t h3 { font-size: var(--text-sm); letter-spacing: .03em; text-transform: uppercase } .card.homelink .t p { font-size: var(--text-xs); color: var(--text-muted) } .card.homelink .homelink-cta { margin-left: auto } /* CTA band */ .band { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; background: var(--deep); color: #eaf6f6; border-radius: var(--radius); padding: var(--space-10); position: relative; overflow: hidden } .band > * { position: relative; z-index: 1 } .band .band-text { display: grid; gap: var(--space-3); flex: 1 1 420px; min-width: 0 } .band h2 { font-size: var(--text-xl); max-width: 32ch; color: #f2fbfb } .band p { color: #a9c4c8; font-size: var(--text-sm); max-width: 62ch } .band .mail { font-family: var(--font-mono); font-size: var(--text-xs); color: #5fd6d6; text-decoration: none } .band .band-cta { margin-left: auto } @media (max-width: 980px) { .band { padding: var(--space-6) } .band .band-cta { margin-left: 0 } } /* pills */ .pills { display: flex; flex-wrap: wrap; gap: var(--space-2) } /* FAQ inside a card */ .zk-faq details { border-bottom: 1px solid var(--border); padding: var(--space-4) 0 } .zk-faq details:last-child { border-bottom: none } /* ---------- WordPress menus ---------- wp_nav_menu emits list items, so they are wrapped in a real