/* De Birrus Metselwerken — modern & strak design */ :root{ --ink:#0b2036; --navy:#072847; --navy-2:#0f3a63; --ink-soft:#3d4550; --paper:#ffffff; --paper-soft:#f5f6f8; --line:#e3e6ea; --brick:#9d2c26; --brick-dark:#7a211d; --brick-tint:#f8e6e4; --stone:#5c6470; --gold:#c8a15a; --radius:14px; --shadow:0 20px 45px -25px rgba(7,40,71,.45); --maxw:1180px; font-size:16px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:"Inter","Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; animation:pageFadeIn .6s cubic-bezier(.2,.7,.3,1) both; } /* Let op: alleen opacity animeren, geen transform — anders wordt een containing block voor position:fixed-elementen (menu, back-to-top) en gaan die verkeerd positioneren t.o.v. de hele pagina in plaats van het scherm. */ @keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}} @media (prefers-reduced-motion:reduce){ body{animation:none;} } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px;} h1,h2,h3,h4{ font-family:"Fraunces","Georgia",serif; font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; } h1{font-size:clamp(2.1rem,4.5vw,3.4rem);} h2{font-size:clamp(1.6rem,3vw,2.35rem);} h3{font-size:1.3rem;} p{margin:0 0 1em;color:var(--ink-soft);} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--brick);font-weight:700;margin-bottom:14px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--brick);display:inline-block;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem; border:1.5px solid transparent;cursor:pointer;transition:.2s ease; white-space:nowrap; } .btn-primary{background:var(--brick);color:#fff;position:relative;overflow:hidden;isolation:isolate;} .btn-primary::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 40%,transparent 60%); transform:translateX(-120%);transition:transform .6s ease; } .btn-primary:hover::after{transform:translateX(120%);} .btn-primary:hover{background:var(--brick-dark);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(157,44,38,.6);} .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;} .btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px);} .btn-light{border-color:rgba(255,255,255,.6);color:#fff;background:transparent;} .btn-light:hover{background:#fff;color:var(--ink);} .btn-wa{background:#25D366;color:#fff;} .btn-wa:hover{background:#1ebc59;transform:translateY(-2px);} /* ---------- Scroll progress bar ---------- */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;width:100%;z-index:70; background:transparent;pointer-events:none; } .scroll-progress span{ display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--brick),var(--gold)); transition:width .1s linear; } /* ---------- Header ---------- */ header.site-header{ position:sticky;top:0;z-index:50; background:rgba(7,40,71,.97);backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08); transition:box-shadow .3s ease; } header.site-header.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.5);} .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto;transition:padding .3s cubic-bezier(.2,.7,.3,1);} header.site-header.scrolled .nav-wrap{padding:9px 24px;} .logo{font-family:"Fraunces",serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;display:flex;align-items:center;} .logo span{color:var(--brick);} .logo-img{height:44px;width:auto;display:block;transition:height .3s cubic-bezier(.2,.7,.3,1);} header.site-header.scrolled .logo-img{height:34px;} .footer-logo-img{height:56px;width:auto;display:block;margin-bottom:16px;} nav.main-nav ul{display:flex;gap:30px;list-style:none;} nav.main-nav a{font-weight:600;font-size:.95rem;color:rgba(255,255,255,.78);position:relative;padding:4px 0;} nav.main-nav a:hover,nav.main-nav a.active{color:#fff;} nav.main-nav a::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--brick); border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.7,.3,1); } nav.main-nav a:hover::after,nav.main-nav a.active::after{transform:scaleX(1);} .nav-cta{display:flex;align-items:center;gap:14px;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;} .nav-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.25s;} @media (max-width:900px){ nav.main-nav{ position:fixed;inset:0 0 0 30%;background:var(--navy); transform:translateX(100%);transition:transform .3s ease; padding:100px 32px 32px;z-index:40;box-shadow:0 0 60px rgba(0,0,0,.35); } nav.main-nav.open{transform:translateX(0);} nav.main-nav ul{flex-direction:column;gap:22px;} nav.main-nav a{font-size:1.1rem;color:rgba(255,255,255,.85);} nav.main-nav a:hover,nav.main-nav a.active{color:#fff;} .nav-toggle{display:block;z-index:60;} .nav-cta .btn-light{display:none;} } /* ---------- Hero ---------- */ .hero{ position:relative;padding:100px 0 90px;overflow:hidden; background:linear-gradient(180deg,var(--paper-soft),var(--paper)); } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; opacity:.05; background-image: repeating-linear-gradient(0deg,var(--navy) 0 42px,transparent 42px 46px), repeating-linear-gradient(90deg,var(--navy) 0 118px,transparent 118px 124px); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 20%,#000 40%,transparent 80%); mask-image:radial-gradient(ellipse 70% 60% at 75% 20%,#000 40%,transparent 80%); } .hero .container{position:relative;z-index:1;} .hero-grid{position:relative;z-index:1;} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;} .hero .lead{font-size:1.15rem;max-width:46ch;} .hero-figure{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;} .hero-figure img{width:100%;height:100%;object-fit:cover;} .hero-badge{ position:absolute;left:-18px;bottom:24px;background:#fff;border-radius:12px; padding:14px 18px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center; font-weight:700;font-size:.9rem; } .hero-badge b{display:block;font-family:"Fraunces",serif;font-size:1.4rem;color:var(--brick);} .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;} .hero-stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap;} .hero-stats div b{display:block;font-family:"Fraunces",serif;font-size:1.7rem;color:var(--ink);} .hero-stats div span{font-size:.85rem;color:var(--stone);} .hero.compact{padding:64px 0;} .hero.compact h1{max-width:20ch;} /* ---------- Sections ---------- */ section{padding:88px 0;} section.tight{padding:64px 0;} .section-head{max-width:640px;margin-bottom:48px;} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} .bg-soft{background:var(--paper-soft);} .bg-ink{background:var(--ink);color:#fff;} .bg-ink p,.bg-ink h2,.bg-ink h3{color:#fff;} .bg-brick{background:var(--brick);color:#fff;} .bg-brick p,.bg-brick h2,.bg-brick h3{color:#fff;} /* feature/services grid */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:32px;transition:.2s ease; } .card:hover{box-shadow:var(--shadow);transform:translateY(-3px);} .card .num{font-family:"Fraunces",serif;font-size:.85rem;color:var(--brick);font-weight:700;margin-bottom:10px;display:block;} .card-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;margin-bottom:20px;} .card-img img{width:100%;height:100%;object-fit:cover;transition:.4s ease;} .card:hover .card-img img{transform:scale(1.05);} /* checklist */ .checklist{list-style:none;display:grid;gap:14px;} .checklist li{display:flex;gap:12px;align-items:flex-start;font-weight:600;} .checklist li::before{ content:"✓";flex:0 0 26px;height:26px;width:26px;border-radius:50%; background:var(--brick-tint);color:var(--brick);display:flex;align-items:center;justify-content:center; font-size:.85rem;font-weight:800; } /* pill list (diensten) */ .pill-list{display:flex;flex-wrap:wrap;gap:10px;} .pill-list li{list-style:none;background:var(--paper-soft);border:1px solid var(--line);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.92rem;} /* two column with image */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .split.reverse .split-media{order:2;} .split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;} .split-media img{width:100%;height:100%;object-fit:cover;} /* FAQ accordion */ .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%;text-align:left;background:none;border:none;padding:22px 0; font-family:"Fraunces",serif;font-size:1.08rem;font-weight:600;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--ink); } .faq-q::after{content:"+";font-size:1.6rem;color:var(--brick);flex:0 0 auto;transition:.2s;} .faq-item.open .faq-q::after{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;} .faq-item.open .faq-a{max-height:300px;} .faq-a p{padding-bottom:22px;margin:0;} /* testimonial */ .testimonial{ background:var(--paper-soft);border-radius:var(--radius);padding:44px; border-left:4px solid var(--brick); } .testimonial p{font-family:"Fraunces",serif;font-size:1.3rem;color:var(--ink);font-style:italic;} .testimonial cite{font-style:normal;font-weight:700;font-size:.9rem;color:var(--stone);} .rating-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;} .stars{color:var(--brick);letter-spacing:2px;} /* values */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} .value{padding:0;} .value b{display:block;font-family:"Fraunces",serif;font-size:1.15rem;margin-bottom:8px;color:var(--ink);} /* areas */ .areas-row{display:flex;flex-wrap:wrap;gap:10px 14px;font-weight:600;color:var(--ink-soft);} .areas-row span::before{content:"›";color:var(--brick);margin-right:6px;font-weight:800;} /* CTA band */ .cta-band{border-radius:var(--radius);padding:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;} .cta-band h2{margin-bottom:6px;} .cta-band .actions{display:flex;gap:14px;flex-wrap:wrap;} /* forms */ .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);} .form-row{display:grid;gap:8px;margin-bottom:20px;} .form-row label{font-weight:700;font-size:.85rem;} .form-row input,.form-row textarea,.form-row select{ border:1.5px solid var(--line);border-radius:10px;padding:13px 16px;font-family:inherit;font-size:1rem; background:var(--paper-soft); } .form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:2px solid var(--brick);outline-offset:1px;background:#fff;} .form-note{font-size:.8rem;color:var(--stone);} .hp-field{position:absolute;left:-9999px;opacity:0;} .form-success{display:none;background:#e6f3ea;color:#1f6b3c;padding:16px 18px;border-radius:10px;font-weight:700;margin-top:16px;} .form-error{display:none;background:var(--brick-tint);color:var(--brick-dark);padding:16px 18px;border-radius:10px;font-weight:700;margin-top:16px;} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none !important;} /* project gallery */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .gallery a{border-radius:10px;overflow:hidden;aspect-ratio:1;display:block;} .gallery img{width:100%;height:100%;object-fit:cover;transition:.3s;} .gallery a:hover img{transform:scale(1.08);} /* info blocks (contact) */ .info-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;} .info-list{display:grid;gap:22px;margin-top:26px;} .info-list b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brick);margin-bottom:4px;} /* blog cards */ .blog-card{display:flex;flex-direction:column;height:100%;} .blog-card .tag{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brick);margin-bottom:10px;} /* breadcrumb */ .crumb{font-size:.85rem;color:var(--stone);margin-bottom:18px;} .crumb a{color:var(--brick);font-weight:600;} /* footer */ footer.site-footer{background:var(--navy);color:#efece7;padding:64px 0 28px;} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;} .footer-grid h4{color:#fff;font-family:"Fraunces",serif;font-size:1rem;margin-bottom:16px;} .footer-grid p,.footer-grid a{color:#c7c2ba;font-size:.92rem;} .footer-grid a:hover{color:#fff;} .footer-links{list-style:none;display:grid;gap:10px;} .footer-logo{font-family:"Fraunces",serif;font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:14px;display:block;} .footer-logo span{color:var(--brick);} .footer-social{display:flex;gap:12px;margin-top:16px;} .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid #4a463f;display:flex;align-items:center;justify-content:center;} .footer-social a:hover{background:var(--brick);border-color:var(--brick);} .footer-bottom{border-top:1px solid #322f2a;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8f8b84;} /* whatsapp floating button */ .wa-float{ position:fixed;bottom:24px;right:24px;background:#25D366;color:#fff; width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 24px -8px rgba(0,0,0,.4);z-index:45;font-size:1.6rem; } /* responsive */ @media (max-width:960px){ .hero-grid,.split,.info-grid{grid-template-columns:1fr;} .split.reverse .split-media{order:0;} .grid-3,.values-grid{grid-template-columns:1fr 1fr;} .grid-2{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .gallery{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ section{padding:60px 0;} .grid-3,.values-grid,.footer-grid{grid-template-columns:1fr;} .gallery{grid-template-columns:repeat(2,1fr);} .cta-band{padding:36px 24px;flex-direction:column;align-items:flex-start;} .hero-badge{left:12px;} } /* ---------- Scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);} .reveal.in-view{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* ---------- Back to top ---------- */ .back-to-top{ position:fixed;bottom:24px;left:24px;background:var(--navy);color:#fff; width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:0 12px 24px -8px rgba(7,40,71,.5);z-index:45;font-size:1.2rem; border:none;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px); transition:opacity .3s ease,transform .3s ease,background .2s ease; } .back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);} .back-to-top:hover{background:var(--brick);} /* ---------- Luxe touches ---------- */ .card,.testimonial,.form-card{transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;} .card:hover{border-color:var(--navy-2);} .testimonial{position:relative;} .testimonial::before{ content:"\201C";position:absolute;top:8px;left:24px;font-family:"Fraunces",serif; font-size:4rem;color:var(--brick);opacity:.15;line-height:1; } /* ---------- Hero entrance animatie (JS-gestuurd) ---------- */ .hero-anim{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);} .hero-anim-in{opacity:1;transform:translateY(0);} .hero-figure.hero-anim{transform:translateY(18px) scale(1.02);} .hero-figure.hero-anim-in{transform:translateY(0) scale(1);} .hero-figure img{transition:transform .2s linear;} @media (prefers-reduced-motion:reduce){ .hero-anim{opacity:1;transform:none;transition:none;} .hero-figure img{transition:none;} }