/* Theme Name: AVM Author: intern@channel-support.nl Description: Custom theme for Amsterdamse Vastgoed Maatschap (avm.channel-support.dev). Classic theme built on dynamic Gutenberg blocks. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 8.0 Text Domain: avm */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700 800; font-display:swap; src:url('assets/fonts/bricolage-700.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/figtree-400.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/figtree-500.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/figtree-600.woff2') format('woff2'); } :root{ /* Values match the client's own design handoff exactly (design tokens table + reference stylesheet) — token NAMES here predate that handoff and are kept as-is to avoid a full site-wide rename, but every value is now the precise one from the spec, not an eyeballed approximation. */ --paper:#EEEBE5; /* --stone */ --paper-deep:#E2DBCD; /* --sand */ --sand-2:#D4CBB9; /* image-fallback / placeholder-stripe colour */ --white:#FFFFFF; --ink:#171717; --ink-soft:#414141; /* --ink-2 */ --ink-faint:#6b6b6b; /* --ink-3 */ --green:#1E4A39; /* --moss */ --green-deep:#153628; /* --moss-2 */ --green-mid:#2F7A54; --green-tint:#BCD6C5; --green-tint-soft:#E4EDE6; /* --moss-soft */ --line:#DDD6C8; /* legacy solid-colour border, kept for spots not yet using --rule */ --rule:rgba(23,23,23,.16); --rule-2:rgba(23,23,23,.08); --required:#9a3b2c; --focus-ring:#C9A227; --red:#B3402B; --radius:3px; --cut:32px; --cut-lg:56px; --max:1240px; --gutter:clamp(20px,4vw,48px); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ font-family:'Figtree', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.12; color:var(--ink); } a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} button{font-family:inherit;} .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);} a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;} } .screen-reader-text{ border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important; } /* Signature "cut corner" motif used throughout the mockup on photos and dark panels — a lightweight CSS clip-path, no image/JS cost. */ .cut{clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);} .cut-lg{clip-path:polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%);} /* ---------- NAV ---------- */ header.site{ position:sticky; top:0; z-index:50; background:rgba(238,235,229,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px; position:relative; } .brand{display:flex; align-items:center; gap:12px;} .brand-mark{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; background:var(--ink); color:#fff; font-family:'Bricolage Grotesque', sans-serif; font-weight:800; font-size:15px; letter-spacing:0.02em; } .brand-word{ font-size:12.5px; font-weight:600; line-height:1.28; color:var(--ink); } .brand img.custom-logo{height:44px; width:auto;} @media (max-width:900px){ .brand-word{display:none;} } nav.links{display:none;} nav.links > ul{list-style:none; display:flex; gap:30px; align-items:center; margin:0; padding:0;} nav.links > ul > li{position:relative;} nav.links a{ font-size:14.5px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:5px; padding:8px 0; } nav.links > ul > li.menu-item-has-children > a::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); margin-top:-3px; } nav.links .sub-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0; min-width:300px; background:var(--white); border:1px solid var(--rule); /* No shadow — the design has none anywhere except the focus ring. */ opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .16s ease, transform .16s ease, visibility .16s; } nav.links li.menu-item-has-children:hover > .sub-menu, nav.links li.menu-item-has-children:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); } nav.links .sub-menu a{ display:block; padding:10px 12px; font-size:14px; font-weight:500; border-radius:var(--radius); } nav.links .sub-menu a:hover{background:var(--paper); color:var(--green);} nav.links .sub-menu a small{display:block; color:var(--ink-faint); font-weight:400; font-size:12.5px; margin-top:2px;} @media (min-width:900px){ nav.links{display:flex;} } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:'Figtree',sans-serif; font-weight:600; font-size:1rem; line-height:1.2; padding:14px 22px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s, transform .1s; } .btn:active{transform:translateY(1px);} .btn-primary{background:var(--green); color:#fff; border-color:var(--green);} .btn-primary:hover{background:var(--green-deep); border-color:var(--green-deep);} .btn-outline{border-color:var(--ink); color:var(--ink);} .btn-outline:hover{background:var(--ink); color:#fff;} .btn-ghost{border-color:rgba(255,255,255,0.4); color:#fff;} .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.08);} /* Used on dark (--ink) panels — .btn-ghost is for the header's light bg; these two are the CTA-panel equivalents, matching separate .btn--light / .btn--ghost-light variants in the design spec rather than reusing .btn-outline/.btn-ghost, whose contrast assumes a light background. */ .btn-light{background:var(--paper); color:var(--ink); border-color:var(--paper);} .btn-light:hover{background:#fff; border-color:#fff;} .btn-ghost-light{background:transparent; color:var(--paper); border-color:rgba(238,235,229,.6);} .btn-ghost-light:hover{background:rgba(238,235,229,.12); border-color:var(--paper);} .btn-sm{padding:10px 16px; font-size:.92rem;} .btn-text{padding:0; border:0; text-decoration:underline; text-underline-offset:3px; font-weight:600; color:var(--ink);} .btn-text:hover{color:var(--green);} .nav-phone{ display:none; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; } .nav-phone::before{ content:""; width:16px; height:16px; flex-shrink:0; background:var(--green); -webkit-mask:url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/%3E%3C/svg%3E') center/contain no-repeat; mask:url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/%3E%3C/svg%3E') center/contain no-repeat; } .nav-phone:hover{color:var(--green-deep);} @media (min-width:1220px){ .nav-phone{display:inline-flex;} } .nav-cta{padding:10px 16px; font-size:13.5px;} .nav-cta span.short{display:none;} @media (max-width:900px){ .nav-cta span.long{display:none;} .nav-cta span.short{display:inline;} } /* hamburger */ .hamburger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer; } @media (min-width:900px){ .hamburger{display:none;} } .hamburger span{ display:block; width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease; } .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .mobile-menu{ max-height:0; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line); transition:max-height .3s ease; } .mobile-menu.open{max-height:80vh; overflow-y:auto;} @media (min-width:900px){ .mobile-menu{display:none;} } .mobile-menu ul{list-style:none; padding:8px 32px 22px; margin:0;} .mobile-menu li{border-top:1px solid var(--line);} .mobile-menu a{display:block; padding:15px 0; font-size:15.5px; font-weight:500; color:var(--ink);} .mobile-menu .sub-menu{padding:0 0 8px 14px;} .mobile-menu .sub-menu li{border-top:0;} .mobile-menu .sub-menu a{padding:8px 0; font-size:14.5px; color:var(--ink-soft);} @media (max-width:640px){ .mobile-menu ul{padding:8px 20px 22px;} } /* ---------- HERO ---------- */ .hero{padding:52px 0 68px; background:var(--paper);} .hero-grid{display:grid; grid-template-columns:1fr; gap:38px; align-items:center;} @media (min-width:900px){ .hero-grid{grid-template-columns:1.1fr 0.9fr; gap:56px;} } .hero h1{font-size:36px;} @media (min-width:640px){ .hero h1{font-size:44px;} } @media (min-width:1040px){ .hero h1{font-size:50px;} } .hero .accent-line{display:block;} .hero .accent-line.is-accent{color:var(--green);} .hero p.lead{margin-top:20px; font-size:16.5px; color:var(--ink-soft); max-width:52ch;} .hero-actions{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;} .hero-media{position:relative;} .hero-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--line);} .hero-media-placeholder{width:100%; aspect-ratio:4/3; background:linear-gradient(135deg, var(--line), var(--paper-deep));} .hero-media .cap{margin-top:10px; font-size:12.5px; color:var(--ink-faint);} .hero.hero-page{padding:44px 0 52px;} .hero.hero-page .hero-grid{grid-template-columns:1fr; gap:32px; align-items:center;} @media (min-width:1081px){ .hero.hero-page .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);} } .hero.hero-page h1{font-size:32px; max-width:24ch;} @media (min-width:640px){ .hero.hero-page h1{font-size:38px;} } .hero.hero-page p.lead{max-width:64ch;} .breadcrumbs{font-size:13px; color:var(--ink-faint); margin-bottom:16px;} .breadcrumbs a{text-decoration:underline; text-underline-offset:2px;} .breadcrumbs a:hover{color:var(--green);} /* ---------- SECTION HEADERS ---------- */ .section{padding:76px 0;} @media (max-width:640px){ .section{padding:52px 0;} } .section.bg-paper{background:var(--paper);} .section.bg-white{background:var(--white);} .section.bg-deep{background:var(--paper-deep);} .section.bg-ink{background:var(--ink); color:#fff;} .section.bg-ink h2, .section.bg-ink h3{color:#fff;} .section.bg-ink p{color:rgba(255,255,255,0.72);} .section--tight{padding:76px 0;} @media (max-width:640px){ .section--tight{padding:52px 0;} } .section-head{margin-bottom:44px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;} .section-head .sh-text{max-width:640px;} .eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); margin-bottom:12px; } .section-head h2{font-size:28px;} @media (min-width:640px){ .section-head h2{font-size:33px;} } .section-head p{margin-top:12px; font-size:15.5px; color:var(--ink-soft);} .section-actions{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;} /* ---------- SERVICE CARDS ---------- */ .service-grid{display:grid; grid-template-columns:1fr; gap:20px;} @media (min-width:640px){ .service-grid{grid-template-columns:1fr 1fr;} } @media (min-width:980px){ .service-grid{grid-template-columns:1fr 1fr 1fr;} } .service-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:border-color .2s ease, transform .2s ease; display:block; } .service-card:hover{border-color:var(--green-mid); transform:translateY(-2px);} .service-icon{width:38px; height:38px; color:var(--green-mid); margin-bottom:18px;} .service-icon svg{width:100%; height:100%;} .service-card h3{font-size:18px; font-weight:700; margin-bottom:8px;} .service-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:16px;} .service-card .more{font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px;} /* ---------- PROJECT CARDS ---------- */ .project-grid{display:grid; grid-template-columns:1fr; gap:26px;} @media (min-width:640px){ .project-grid{grid-template-columns:1fr 1fr;} } @media (min-width:980px){ .project-grid{grid-template-columns:1fr 1fr 1fr;} } .project-card{display:flex; flex-direction:column; background:transparent;} .project-media{position:relative; aspect-ratio:4/3; background:var(--sand-2); overflow:hidden;} .project-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s;} .project-card:hover .project-media img{transform:scale(1.03);} .project-media-placeholder{width:100%; height:100%; background:repeating-linear-gradient(45deg, var(--paper-deep) 0 12px, var(--sand-2) 12px 14px);} .project-badge{ position:absolute; top:14px; left:14px; background:var(--green); color:#fff; font-size:.78rem; font-weight:600; letter-spacing:0.01em; padding:5px 10px; border-radius:2px; } .project-badge.is-gerealiseerd{background:var(--ink);} .project-body{padding:16px 0 0;} .project-place{font-size:.85rem; color:var(--ink-faint); margin-bottom:4px;} .project-card h3{font-size:19px; margin-bottom:6px;} .project-card .project-desc{font-size:14px; color:var(--ink-soft); margin-bottom:14px;} .project-price{font-size:13.5px; font-weight:600; color:var(--ink); margin-top:8px; margin-bottom:14px;} .project-card .more{font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; margin-top:12px; align-self:flex-start;} /* ---------- WERKWIJZE / PROCESS ---------- */ .process-list{display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line);} .process-row{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; } @media (min-width:640px){ .process-row{grid-template-columns:70px 240px 1fr; align-items:start;} } .process-num{font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:700; color:var(--green);} .process-row h3{font-size:18px; font-weight:700;} .process-row p{font-size:14.5px; color:var(--ink-soft); margin-top:6px;} @media (min-width:640px){ .process-row p{margin-top:0;} } /* Photo-per-step variant (avm/grid preset "process-grid") */ .process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;} @media (max-width:860px){ .process-grid{grid-template-columns:1fr 1fr;} } @media (max-width:480px){ .process-grid{grid-template-columns:1fr;} } .process-row.has-image{display:block; padding:0; border:0;} .process-photo, .process-photo-placeholder{ aspect-ratio:4/3; overflow:hidden; margin-bottom:16px; border-bottom:2px solid var(--ink); } .process-photo img{width:100%; height:100%; object-fit:cover; display:block;} .process-photo-placeholder{background:linear-gradient(135deg, var(--line), var(--paper-deep));} .process-row.has-image .process-num{margin-bottom:4px;} .process-row.has-image h3{font-size:16.5px; margin-bottom:4px;} .process-row.has-image p{font-size:14px; margin-top:0;} /* ---------- INFO / USP CARDS ---------- */ .info-grid{display:grid; grid-template-columns:1fr; gap:22px;} @media (min-width:760px){ .info-grid{grid-template-columns:repeat(3,1fr);} } .info-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;} .info-card h4{font-size:16px; font-weight:700; margin-bottom:8px;} .info-card p{font-size:14px; color:var(--ink-soft);} /* ---------- CTA PANEL ---------- */ .cta-panel{background:var(--ink); color:#fff; padding:52px 44px; border-radius:var(--radius);} @media (max-width:640px){ .cta-panel{padding:36px 26px;} } .cta-inner{display:grid; grid-template-columns:1fr; gap:26px; align-items:center;} @media (min-width:860px){ .cta-inner{grid-template-columns:1fr auto; gap:40px;} } .cta-panel h2{font-size:27px; color:#fff;} .cta-panel p{margin-top:10px; font-size:15.5px; color:rgba(255,255,255,0.72); max-width:54ch;} .cta-panel .tel{margin-top:14px; font-size:14px; color:rgba(255,255,255,0.6);} .cta-panel .tel a{color:#fff; text-decoration:underline; text-underline-offset:3px;} .cta-actions{display:flex; gap:14px; flex-wrap:wrap;} /* ---------- CONTACT / FORM PANEL ---------- */ .contact-grid{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} @media (min-width:860px){ .contact-grid{grid-template-columns:0.85fr 1.15fr;} } .contact-info{background:var(--ink); color:#fff; padding:44px 38px;} .contact-info h3{font-size:22px; color:#fff; margin-bottom:16px;} .contact-info .addr{font-size:14.5px; color:rgba(255,255,255,0.78); margin-bottom:26px;} .contact-info .addr .co{color:#fff; font-weight:600; margin-bottom:4px; display:block;} .field-row{display:flex; gap:14px; padding:12px 0; border-top:1px solid rgba(255,255,255,0.14); font-size:14px;} .field-row:last-child{border-bottom:1px solid rgba(255,255,255,0.14);} .field-row span.k{color:rgba(255,255,255,0.5); width:78px; flex-shrink:0; font-size:12px; letter-spacing:0.04em; text-transform:uppercase;} .contact-form{background:var(--white); padding:44px 38px;} .contact-form h3{font-size:19px; margin-bottom:6px;} .contact-form p.note{font-size:14px; color:var(--ink-soft); margin-bottom:24px;} .form-row{margin-bottom:16px;} .form-row label{display:block; font-size:12.5px; font-weight:500; margin-bottom:6px; color:var(--ink-soft);} .form-row label em{color:var(--required); font-style:normal;} .form-row input, .form-row select, .form-row textarea{ width:100%; border:1.5px solid var(--rule); border-radius:var(--radius); padding:11px 12px; font-family:inherit; font-size:.98rem; background:#fff; color:var(--ink); } .form-row textarea{resize:vertical; min-height:90px;} .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,74,57,.15); } .form-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden;} .form-notice{padding:13px 15px; border-radius:var(--radius); font-size:14px; margin-bottom:22px; border:1px solid var(--line);} .form-notice.ok{border-color:var(--green-mid); background:var(--green-tint-soft); color:var(--green-deep);} .form-notice.err{border-color:var(--red); background:rgba(179,64,43,0.08); color:var(--red);} .form-consent{font-size:12.5px; color:var(--ink-faint); margin:4px 0 18px;} .form-consent a{text-decoration:underline;} /* Compact quick-scan panel (used inside service pages) */ .quick-panel{background:var(--paper-deep); border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px;} .quick-panel h3{font-size:19px; margin-bottom:6px;} .quick-panel p.note{font-size:14px; color:var(--ink-soft); margin-bottom:22px;} /* ---------- SINGLE PROJECT / ARTICLE ---------- */ .project-single-grid{display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px);} @media (min-width:1081px){ .project-single-grid{grid-template-columns:minmax(0,1fr) 400px; align-items:start;} } .project-single-grid .quick-panel{position:sticky; top:96px;} @media (max-width:1080px){ .project-single-grid .quick-panel{position:static;} } /* Kerngegevens: lives in the main column now (not the sidebar), as a plain two-column definition-list grid matching the design's dl.facts. */ .facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; margin:0 0 40px;} @media (max-width:820px){ .facts{grid-template-columns:1fr;} } .facts > div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule);} .facts dt{margin:0; color:var(--ink-faint); font-size:.95rem;} .facts dd{margin:0; font-weight:600; text-align:right;} .facts dd a{color:var(--green); text-decoration:underline; text-underline-offset:3px;} .facts dd a:hover{color:var(--green-deep);} /* min-width:0 overrides the grid default of min-width:auto on the item — without it, the aspect-ratio placeholder's own sizing (height:100% of an otherwise auto-height parent, see .project-media-placeholder below) gives the item an intrinsic minimum wider than its fair 1fr share, and grid lets the track grow to fit rather than shrink the content. That silently pushes the whole gallery past the end of its column — not clipped, not an error, just visibly wider than the column it's supposed to fit in. */ .project-gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:32px;} @media (max-width:820px){ .project-gallery{grid-template-columns:1fr 1fr;} } .project-gallery-item{min-width:0;} .project-gallery-item img, .project-gallery-item .project-media-placeholder{aspect-ratio:4/3; height:auto; width:100%; object-fit:cover;} .project-gallery-item .project-media-placeholder{background:repeating-linear-gradient(45deg, var(--paper-deep) 0 12px, var(--sand-2) 12px 14px);} .project-gallery-item .cap{margin-top:8px; font-size:12.5px; color:var(--ink-faint);} .project-gallery-item .cap span{font-style:italic;} /* Map placeholder — a plain link/button when no Maps Embed API key is set (avm_google_maps_api_key()); the diagonal-stripe fill matches the gallery's own placeholder treatment. Once a key is set, .map-ph--embed holds a real iframe instead (see single-avm_project.php) — loading:lazy still defers the request until the box nears the viewport. */ .map-ph{ display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:16/10; padding:20px; width:100%; background:repeating-linear-gradient(45deg, var(--paper-deep) 0 12px, var(--sand-2) 12px 14px); color:var(--ink-soft); font-size:.92rem; text-decoration:none; border:0; font-family:inherit; cursor:pointer; } .map-ph:hover{color:var(--ink);} .map-ph .small{display:block; margin-top:4px; font-size:.85rem; color:var(--ink-faint);} .map-ph--embed{padding:0; background:var(--paper-deep); cursor:default;} .map-ph--embed iframe{width:100%; height:100%; border:0; display:block;} /* ---------- COMPARISON TABLE ---------- */ .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);} table.avm-table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px;} table.avm-table th, table.avm-table td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top;} table.avm-table thead th{background:var(--paper-deep); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.04em;} table.avm-table tbody tr:last-child td{border-bottom:0;} /* ---------- FAQ ---------- */ .faq-list{border-top:1px solid var(--line);} .faq-item{border-bottom:1px solid var(--line);} .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 4px; font-size:16px; font-weight:600; cursor:pointer; list-style:none; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--green); flex-shrink:0; transition:transform .2s ease; } .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item .faq-answer{padding:0 4px 20px; font-size:14.5px; color:var(--ink-soft); max-width:70ch;} /* ---------- TEAM ---------- */ .team-grid{display:grid; grid-template-columns:1fr; gap:24px;} @media (min-width:640px){ .team-grid{grid-template-columns:1fr 1fr;} } .team-card{display:flex; gap:18px; align-items:center;} .team-photo{width:84px; height:84px; border-radius:50%; overflow:hidden; background:var(--green-tint); flex-shrink:0; display:flex; align-items:center; justify-content:center;} .team-photo img{width:100%; height:100%; object-fit:cover;} .team-initials{font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:20px; color:var(--green-deep);} .team-name{font-size:16px; font-weight:700;} .team-role{font-size:13.5px; color:var(--ink-soft); margin:2px 0 6px;} .team-tel{font-size:13.5px; text-decoration:underline; text-underline-offset:3px;} /* ---------- ARTICLE / KENNISBANK CARDS ---------- */ .article-grid{display:grid; grid-template-columns:1fr; gap:24px;} @media (min-width:640px){ .article-grid{grid-template-columns:1fr 1fr;} } @media (min-width:980px){ .article-grid{grid-template-columns:1fr 1fr 1fr;} } .article-card{display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px;} .article-kicker{font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--green); margin-bottom:10px;} .article-card h3{font-size:17.5px; margin-bottom:8px;} .article-card p{font-size:14px; color:var(--ink-soft); margin-bottom:14px;} .article-card .more{font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px;} /* ---------- PROSE (single article/project body, 404) ---------- */ .prose{max-width:760px;} .prose h1{font-size:34px; margin-bottom:18px;} .prose h2{font-size:25px; margin:34px 0 12px;} .prose h3{font-size:19px; font-weight:700; margin:26px 0 10px;} .prose p{margin-bottom:16px; color:var(--ink-soft);} .prose ul, .prose ol{margin:0 0 16px 22px; color:var(--ink-soft);} .prose li{margin-bottom:6px;} .prose a{color:var(--green-deep); text-decoration:underline;} .article-meta{font-size:13px; color:var(--ink-faint); margin-bottom:10px;} /* ---------- FOOTER ---------- */ footer.site{background:var(--paper-deep); color:var(--ink-soft); padding:56px 0 26px; border-top:1px solid var(--line);} .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; padding-bottom:36px;} @media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} } .foot-brand .brand-mark{margin-bottom:14px;} .foot-addr{font-size:13.5px; line-height:1.7; margin-bottom:14px;} .foot-addr a{text-decoration:underline;} .foot-col-group{display:grid; grid-template-columns:1fr 1fr; gap:24px;} @media (max-width:860px){ .foot-col-group{grid-column:1/-1; grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .foot-col-group{grid-template-columns:1fr;} } .foot-col h4{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px; color:var(--ink);} .foot-col ul{list-style:none;} .foot-col li{margin-bottom:9px;} .foot-col a{font-size:13.5px;} .foot-col a:hover{color:var(--ink);} .foot-bottom{padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint);} /* ---------- GRAVITY FORMS ---------- Written against the real rendered markup of the classic "gravity-theme" (verified against the plugin's own CSS conventions): .gfield_label, .ginput_container, .gform_button. The plugin's own 12-column grid stays untouched — field widths come from each field's layoutGridColumnSpan in inc/gravity-forms.php. Re-declaring .gform_fields{grid-template-columns:…} here would lose the cascade to the plugin's more specific `.gform_wrapper.gravity-theme .gform_fields` with no visible error. Everything below is colour, border and spacing only, scoped to .contact-form/.quick-panel so it can't leak into other forms. */ .contact-form .gform_wrapper.gravity-theme .gform_fields, .quick-panel .gform_wrapper.gravity-theme .gform_fields{row-gap:16px;} /* Half-width selects sit in the plugin's own grid next to whatever field shares their row — a one-line label beside a two-line one otherwise pushes that row's