/* Theme Name: Werken bij Webba Theme URI: https://webba.nl/ Author: Webba Description: Custom careers-site theme for werken-bij.webba.nl, styled after webba.nl's brand tokens. Version: 1.0.0 Text Domain: werken-bij-webba */ :root{ /* Official palette per "Huisstijlhandboek - Webba 2026" (v008), p.19-21. Base trio (Dennen/Nacht/Heide) are documented as interchangeable dark backgrounds; accent trio is Zuiver/Wakker/Vonk. -deep/-light/-soft variants are our own derived tints for hover/elevation states, not brand-defined colors. */ --zuiver:#F7F3E8; /* Zuiver — cream, primary text */ --zuiver-soft:rgba(247,243,232,0.68); --nacht:#160F1B; /* Nacht — primary page background */ --nacht-deep:#1D1424; /* derived: subtle UI elevation */ --dennen:#1A2015; /* Dennen — alt. dark background */ --heide:#4F1631; /* Heide — alt. dark background */ --card:#2A1D33; /* derived: card/surface tone */ --on-accent:#160F1B; /* dark text atop bright accent surfaces */ --vonk:#EB5B63; /* Vonk — coral accent */ --vonk-deep:#C9444C; /* derived: darker coral for hover */ --wakker:#E1E578; /* Wakker — lime accent */ --wakker-light:#ECEF9E; /* derived: paler lime tint */ --wakker-deep:#C7CB57; /* derived: darker lime for hover/gradients */ --line: rgba(247,243,232,0.16); --line-soft: rgba(247,243,232,0.08); --shadow: 0 18px 40px -20px rgba(0,0,0,0.6); --radius: 18px; --font-display: 'Outfit', ui-sans-serif, sans-serif; --font-body: 'Outfit', ui-sans-serif, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--nacht); color:var(--zuiver); font-family:var(--font-body); font-weight:300; line-height:1.55; -webkit-font-smoothing:antialiased; } /* Scoped to our own markup (#wbw-page) so these resets never bleed into wp-admin-bar, the block editor, or other core UI sharing the . */ #wbw-page img,#wbw-page svg{display:block;max-width:100%;} #wbw-page a{color:inherit;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} .eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--vonk); display:inline-flex; align-items:center; gap:8px; } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wakker);flex:none;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-0.01em;} h2{font-size:clamp(28px,3.6vw,42px);} h3{font-size:clamp(19px,2vw,22px);} p{margin:0;} .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-body);font-weight:600;font-size:15px; padding:13px 22px;border-radius:999px;border:1.5px solid transparent; cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:focus-visible{outline:3px solid var(--vonk);outline-offset:3px;} .btn-primary{background:var(--vonk);color:var(--on-accent);} .btn-primary:hover{background:var(--wakker);transform:translateY(-2px);box-shadow:var(--shadow);} .btn-ghost{border-color:var(--line);color:var(--zuiver);background:transparent;} .btn-ghost:hover{background:var(--vonk);border-color:var(--vonk);color:var(--on-accent);} .btn-amber{background:var(--wakker);color:var(--on-accent);} .btn-amber:hover{background:var(--vonk);color:var(--zuiver);transform:translateY(-2px);} /* ===== Header ===== */ header{ position:sticky;top:0;z-index:50; background:rgba(22,15,27,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); } /* Keep the sticky header below the WP admin toolbar instead of scrolling under it */ body.admin-bar header{top:32px;} @media screen and (max-width:782px){ body.admin-bar header{top:46px;} } .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;} .logo{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.02em;text-decoration:none;color:var(--zuiver);} .logo span{color:var(--vonk);} .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px;} .nav-links a{text-decoration:none;color:var(--zuiver-soft);border-bottom:2px solid transparent;padding-bottom:3px;transition:color .15s, border-color .15s;} .nav-links a:hover{color:var(--zuiver);border-color:var(--wakker);} .nav-cta{display:flex;align-items:center;gap:14px;} .burger{display:none;background:none;border:none;cursor:pointer;padding:6px;} .burger span{display:block;width:22px;height:2px;background:var(--zuiver);margin:5px 0;} @media (max-width:860px){ .nav-links{position:absolute;top:100%;left:0;right:0;background:var(--nacht);flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line);transform:translateY(-20px);opacity:0;visibility:hidden;transition:transform .25s ease, opacity .2s ease, visibility 0s .25s;} .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;transition:transform .25s ease, opacity .2s ease;} .nav-links a{display:block;padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft);} .burger{display:block;} .nav-cta .btn-ghost{display:none;} } /* ===== Hero ===== */ .hero{position:relative;overflow:hidden;padding:70px 0 90px;} .hero-blob{ position:absolute;top:-180px;right:-160px;width:640px;height:640px;border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--vonk) 0%, var(--wakker) 55%, transparent 75%); opacity:.22;filter:blur(6px);pointer-events:none; } .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;}} .hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:16px 0 20px;font-weight:800;} .hero h1 em{font-style:normal;color:var(--vonk);} .hero p.lead{font-size:18px;color:var(--zuiver-soft);max-width:46ch;margin-bottom:30px;} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} .photo-collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;} /* Scoped under .photo-collage: WP core gives avatar tags a plain "photo" class, so an unscoped .photo selector here would also style the wp-admin-bar avatar. */ .photo-collage .photo{ border-radius:16px;position:relative;overflow:hidden;min-height:120px; display:flex;align-items:flex-end;padding:12px; font-family:var(--font-mono);font-size:11.5px;color:#fff;letter-spacing:.02em; box-shadow:var(--shadow); } .photo-collage .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .photo-collage .photo span{position:relative;background:rgba(0,0,0,0.35);padding:4px 8px;border-radius:8px;backdrop-filter:blur(2px);} .photo-collage .photo-1{grid-row:span 2;background:linear-gradient(155deg,var(--vonk),var(--vonk-deep));min-height:280px;} .photo-collage .photo-2{background:linear-gradient(155deg,var(--wakker-light),var(--wakker));} .photo-collage .photo-3{background:linear-gradient(155deg,var(--vonk-deep),var(--card));} .photo-collage .photo::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size:14px 14px;opacity:.5;mix-blend-mode:overlay; } /* ===== Section shell ===== */ section{padding:86px 0;} .section-head{max-width:640px;margin-bottom:44px;} .section-head .eyebrow{margin-bottom:14px;} .section-head p.sub{color:var(--zuiver-soft);font-size:17px;margin-top:14px;} .band-dark{background:var(--heide);color:var(--zuiver);} .band-dark .eyebrow{color:var(--wakker);} .band-dark .eyebrow::before{background:var(--vonk);} /* Uses the third official base tone (Dennen) so the site cycles through all three brand backgrounds (Nacht/Heide/Dennen) instead of one plus invented grays. */ .band-dennen{background:var(--dennen);padding-top:0;} .band-dennen .pillar{background:var(--nacht-deep);} /* ===== Intro stats ===== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px;} @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;} .stat b{display:block;font-family:var(--font-display);font-size:28px;color:var(--vonk);} .stat small{font-size:13px;color:var(--zuiver-soft);} /* ===== Pillars ===== */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.pillars{grid-template-columns:1fr;}} .pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;} .pillar .ic{width:38px;height:38px;border-radius:10px;background:var(--line-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:18px;} .pillar p{color:var(--zuiver-soft);font-size:14.5px;margin-top:10px;} /* ===== Stories ===== */ .stories{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media (max-width:980px){.stories{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.stories{grid-template-columns:1fr;}} .story-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line-soft);} .story-photo{height:150px;position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:34px;color:#fff;} .story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .story-photo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);background-size:12px 12px;opacity:.4;} .story-body{padding:20px;} .story-body .role{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vonk);} .story-body h4{margin-top:6px;font-size:18px;} .story-quote{font-style:italic;color:var(--zuiver-soft);margin-top:10px;font-size:14.5px;} .story-toggle{ margin-top:14px;background:none;border:none;padding:0;cursor:pointer; font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--vonk); display:flex;align-items:center;gap:6px; } .story-toggle:focus-visible{outline:2px solid var(--vonk);outline-offset:3px;} .story-more{display:none;margin-top:12px;font-size:14px;color:var(--zuiver-soft);border-top:1px dashed var(--line);padding-top:12px;} .story-card.open .story-more{display:block;} .story-card.open .story-toggle .chevron{transform:rotate(180deg);} .chevron{transition:transform .18s ease;font-size:11px;} /* ===== FC Webba ===== */ .fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;} @media (max-width:900px){.fc-grid{grid-template-columns:1fr;gap:36px;}} .fc-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;} .fc-list li{ display:flex;gap:12px;align-items:flex-start; background:rgba(255,255,255,0.05);border:1px solid rgba(247,243,232,0.14); border-radius:12px;padding:14px 16px;font-size:14.5px; } .fc-list li .dot{width:8px;height:8px;border-radius:50%;background:var(--wakker);margin-top:6px;flex:none;} .fc-visual{position:relative;border-radius:20px;overflow:hidden;min-height:340px; background:linear-gradient(160deg,var(--wakker),var(--vonk-deep)); display:flex;align-items:flex-end;padding:22px;box-shadow:var(--shadow);} .fc-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .fc-visual span{position:relative;font-family:var(--font-mono);font-size:12px;color:#fff;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:8px;} /* ===== MVO ===== */ .mvo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:900px){.mvo-grid{grid-template-columns:1fr;}} .mvo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;} .mvo-card .tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--wakker-light);} .mvo-card p{color:var(--zuiver-soft);font-size:14.5px;margin-top:10px;} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;} .chip{ font-family:var(--font-mono);font-size:12.5px;padding:8px 14px;border-radius:999px; border:1px solid var(--line);background:var(--card);color:var(--zuiver-soft); } /* ===== Vacatures ===== */ .vac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media (max-width:980px){.vac-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:640px){.vac-grid{grid-template-columns:1fr;}} .vac-card{ text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:24px;cursor:pointer;font-family:var(--font-body);color:var(--zuiver); transition:border-color .15s, transform .15s, box-shadow .15s; display:block;text-decoration:none; } .vac-card:hover{border-color:var(--vonk);transform:translateY(-3px);box-shadow:var(--shadow);} .vac-card:focus-visible{outline:2.5px solid var(--vonk);outline-offset:3px;} .vac-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;} .badge{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:6px;background:var(--line-soft);color:var(--zuiver-soft);} .vac-card h4{font-size:19px;} .vac-card p{color:var(--zuiver-soft);font-size:14px;margin-top:10px;} .vac-link{margin-top:16px;font-weight:600;font-size:13.5px;color:var(--vonk);display:flex;align-items:center;gap:6px;} .open-app{ margin-top:36px;background:var(--nacht-deep);border:1px dashed var(--line);border-radius:var(--radius); padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; } /* Detail view (single-vacature.php) */ .detail-back{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;color:var(--vonk);font-size:14px;display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;padding:0;text-decoration:none;} .detail-head{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px;} .detail-head h3{font-size:clamp(24px,3vw,32px);margin-top:10px;} .detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;} @media (max-width:760px){.detail-cols{grid-template-columns:1fr;}} .detail-block h4{font-size:15px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--vonk);margin-bottom:14px;} .detail-block ul{margin:0;padding-left:18px;color:var(--zuiver-soft);font-size:15px;display:grid;gap:8px;} .detail-apply{max-width:640px;margin:36px auto 0;background:var(--card);color:var(--zuiver);border-radius:var(--radius);padding:32px;} .detail-apply--flush{margin-top:0;} /* ---- Gravity Forms (Orbital theme) ---- GF 2.7+'s "Orbital" theme styles itself almost entirely through CSS custom properties it declares inline per-form (scoped to #gform_wrapper_N), not through a fixed set of classic classes. Overriding those variables (with !important, since GF's own inline rule carries an ID selector) is the correct way in — chasing individual element selectors underneath gets overridden by GF's own inline declarations and silently does nothing. */ .gform-theme{ --gf-color-primary: var(--vonk) !important; --gf-color-primary-contrast: var(--on-accent) !important; --gf-color-primary-darker: var(--vonk-deep) !important; --gf-color-primary-lighter: var(--wakker) !important; --gf-color-secondary: var(--card) !important; --gf-color-secondary-contrast: var(--zuiver) !important; --gf-color-secondary-darker: var(--nacht-deep) !important; --gf-color-secondary-lighter: var(--card) !important; --gf-color-out-ctrl-light: var(--zuiver-soft) !important; --gf-color-out-ctrl-light-darker: rgba(247,243,232,0.35) !important; --gf-color-out-ctrl-light-lighter: var(--card) !important; --gf-color-out-ctrl-dark: var(--zuiver) !important; --gf-color-out-ctrl-dark-darker: var(--zuiver) !important; --gf-color-out-ctrl-dark-lighter: var(--zuiver-soft) !important; --gf-color-in-ctrl: var(--nacht) !important; --gf-color-in-ctrl-contrast: var(--zuiver) !important; --gf-color-in-ctrl-darker: var(--nacht-deep) !important; --gf-color-in-ctrl-lighter: var(--card) !important; --gf-color-in-ctrl-primary: var(--vonk) !important; --gf-color-in-ctrl-primary-contrast: var(--on-accent) !important; --gf-color-in-ctrl-primary-darker: var(--vonk-deep) !important; --gf-color-in-ctrl-primary-lighter: var(--wakker) !important; --gf-color-in-ctrl-light: rgba(247,243,232,0.16) !important; --gf-color-in-ctrl-light-darker: rgba(247,243,232,0.35) !important; --gf-color-in-ctrl-light-lighter: var(--card) !important; --gf-color-in-ctrl-dark: var(--zuiver-soft) !important; --gf-color-in-ctrl-dark-darker: var(--zuiver) !important; --gf-color-in-ctrl-dark-lighter: var(--zuiver-soft) !important; --gf-ctrl-border-color: var(--line) !important; --gf-ctrl-label-color-primary: var(--zuiver) !important; --gf-ctrl-label-color-secondary: var(--zuiver-soft) !important; --gf-ctrl-btn-border-color-secondary: var(--line) !important; --gf-ctrl-file-btn-bg-color-hover: var(--nacht-deep) !important; --gf-radius: 10px !important; /* dropdown/stepper/search icon fills baked as inline SVG data-URIs by GF; swap the dark fill for our light one so they're visible on a dark field */ --gf-icon-ctrl-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(247,243,232,0.65)'/%3E%3C/svg%3E") !important; --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(247,243,232,0.65)'/%3E%3C/svg%3E") !important; } .gform_wrapper{margin-top:20px;font-family:var(--font-body);} .gform_wrapper .gfield{margin-bottom:20px;} .gform_wrapper .gfield_label{font-family:var(--font-body);font-weight:600;font-size:14px;margin-bottom:6px;} .gform_wrapper .gfield_required, .gform_wrapper .gfield_required_text{color:var(--vonk);} .gform_wrapper .gfield_description{font-size:13px;line-height:1.5;} .gform_wrapper input[type=file]{color:var(--zuiver-soft);font-size:13.5px;} .gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message, .gform_wrapper .gform_validation_errors *{color:var(--vonk) !important;} .gform_wrapper .gform-footer, .gform_wrapper .gform_footer{margin-top:4px;} .gform_wrapper .gform_button{ font-family:var(--font-body) !important;font-weight:600;font-size:15px; border-radius:999px !important;padding:13px 26px !important; cursor:pointer;transition:transform .15s ease, box-shadow .15s ease; } .gform_wrapper .gform_button:hover{transform:translateY(-2px);box-shadow:var(--shadow);} .gform_confirmation_wrapper, .gform_wrapper .gform_confirmation_message{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px;color:var(--zuiver);font-size:15px; } /* ===== Footer ===== */ footer{background:var(--heide);color:var(--zuiver);padding:60px 0 30px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(247,243,232,0.14);} @media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:30px;}} footer h4{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--wakker);margin-bottom:14px;} footer p, footer a{color:rgba(247,243,232,0.75);font-size:14.5px;text-decoration:none;} footer .flogo{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--zuiver);} .foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:rgba(247,243,232,0.5);flex-wrap:wrap;gap:10px;} .social{display:flex;gap:14px;margin-top:14px;} .social a{width:34px;height:34px;border:1px solid rgba(247,243,232,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;} }