/* ============================================================ DE HOOP COACHING — website styles 3 thema's via [data-theme] op : licht | donker | mix ============================================================ */ :root{ --accent:#1fa5e0; --accent-press:#178cbe; --maxw:1200px; --r:16px; --rainbow: linear-gradient(90deg, #1fa5e0 0 14.28%, #e6007e 14.28% 28.56%, #ffc20e 28.56% 42.84%, #3cb54a 42.84% 57.12%, #f58220 57.12% 71.4%, #e63329 71.4% 85.68%, #8b2d8f 85.68% 100%); --font-head:'Poppins', system-ui, sans-serif; --font-body:'Open Sans', system-ui, sans-serif; --font-script:'Kaushan Script', cursive; } /* ---------- THEMES ---------- */ html[data-theme="licht"]{ --bg:#faf8f4; --text:#1d1d1f; --muted:#565963; --surface:#ffffff; --border:#e7e4dd; --band-bg:#f1ede4; --band-text:#1d1d1f; --band-muted:#565963; --band-surface:#ffffff; --band-border:#e2ddd2; --cta-bg:#1fa5e0; --cta-text:#ffffff; --footer-bg:#111111; --footer-text:#c9cbd1; --footer-head:#ffffff; --header-bg:rgba(250,248,244,.88); --header-text:#1d1d1f; --header-border:#eae6dd; } html[data-theme="donker"]{ --bg:#131313; --text:#ececec; --muted:#9a9da6; --surface:#1c1c1c; --border:#2b2b2b; --band-bg:#0e0e0e; --band-text:#ffffff; --band-muted:#9a9da6; --band-surface:#181818; --band-border:#262626; --cta-bg:#1fa5e0; --cta-text:#ffffff; --footer-bg:#0a0a0a; --footer-text:#9a9da6; --footer-head:#ffffff; --header-bg:rgba(17,17,17,.88); --header-text:#ffffff; --header-border:#242424; } html[data-theme="mix"]{ --bg:#ffffff; --text:#1d1d1f; --muted:#565963; --surface:#faf8f4; --border:#e7e4dd; --band-bg:#111111; --band-text:#ffffff; --band-muted:#b9bcc4; --band-surface:#1a1a1a; --band-border:#262626; --cta-bg:#111111; --cta-text:#ffffff; --footer-bg:#111111; --footer-text:#c9cbd1; --footer-head:#ffffff; --header-bg:rgba(255,255,255,.9); --header-text:#1d1d1f; --header-border:#ececec; } /* ---------- BASE ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head); font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.05} p{margin:0} .container{max-width:var(--maxw); margin:0 auto; padding:0 28px} .script{font-family:var(--font-script); font-weight:400; letter-spacing:0} .eyebrow{font-size:14px; letter-spacing:0.22em; text-transform:uppercase; font-weight:700} .rainbow-bar{height:8px; width:120px; border-radius:999px; background:var(--rainbow)} section{padding:96px 0} .section-head{max-width:760px; margin-bottom:48px} .section-head h2{font-size:clamp(34px,4.4vw,52px)} .section-head .script{font-size:clamp(26px,3vw,34px); color:var(--accent); margin-bottom:6px; display:block} .section-head p{color:var(--muted); font-size:20px; margin-top:18px} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:17px; padding:14px 28px; border-radius:999px; border:2px solid transparent; transition:.18s; } .btn-primary{background:var(--accent); color:#fff} .btn-primary:hover{background:var(--accent-press)} .btn-ghost{background:transparent; color:var(--text); border-color:var(--border)} .btn-ghost:hover{border-color:var(--accent); color:var(--accent)} .btn-light{background:#fff; color:#111} .btn-light:hover{background:#eee} .btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)} .btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.1)} /* ---------- HEADER ---------- */ .site-header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:var(--header-bg); border-bottom:1px solid var(--header-border); color:var(--header-text); } .nav{display:flex; align-items:center; justify-content:space-between; height:84px; gap:20px} .brand{display:flex; align-items:center; gap:14px; font-family:var(--font-head); font-weight:700; font-size:19px; flex-shrink:0} .brand span{white-space:nowrap} .brand-badge{width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; flex:0 0 auto} .brand-badge img{width:38px; height:38px; display:block} .logo-light{display:block} .logo-darkbg{display:none} html[data-theme="donker"] .logo-light{display:none} html[data-theme="donker"] .logo-darkbg{display:block; filter:brightness(0) invert(1)} .nav-links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0} .nav-links > li{position:relative} .nav-links a{padding:10px 14px; border-radius:10px; font-weight:600; font-size:16px; color:var(--header-text); white-space:nowrap} .nav-links a:hover{color:var(--accent)} .has-sub > a::after{content:"▾"; margin-left:6px; font-size:11px; opacity:.7} .submenu{ position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 18px 50px rgba(0,0,0,.16); opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; list-style:none; margin:0; } .nav-links > li:hover .submenu{opacity:1; visibility:visible; transform:translateY(0)} .submenu a{display:block; color:var(--text); font-size:15px} .submenu a:hover{background:var(--bg)} .nav-cta{display:flex; align-items:center; gap:14px} .hamburger{display:none; background:none; border:0; cursor:pointer; color:var(--header-text); font-size:26px; padding:6px} .nav-cta .btn-primary{padding:10px 20px; font-size:15px; background:transparent; color:var(--accent); border-color:var(--accent)} .nav-cta .btn-primary:hover{background:var(--accent); color:#fff} /* ---------- HERO ---------- */ .hero{position:relative; padding:0; min-height:640px; display:flex; align-items:center; overflow:hidden; color:#fff} .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .hero-overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(15,15,16,.9) 0%, rgba(15,15,16,.72) 42%, rgba(15,15,16,.34) 72%, rgba(15,15,16,.22) 100%)} .hero .container{position:relative; padding-top:90px; padding-bottom:110px} .hero-badge{width:74px; height:74px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:26px} .hero-badge img{width:60px; height:60px} .hero .eyebrow{color:#bfc2c9} .hero h1{font-size:clamp(48px,7vw,92px); color:#fff; margin:14px 0 0; max-width:14ch} .hero .script{font-size:clamp(26px,3.2vw,40px); color:#ffc20e; margin-top:18px} .hero p{font-size:clamp(18px,2vw,23px); color:#e7e8ec; max-width:620px; margin-top:24px} .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px} .hero-rainbow{position:absolute; bottom:0; left:0; right:0; height:10px; background:var(--rainbow)} .hero-ky{position:absolute; right:48px; bottom:46px; width:230px; opacity:.96} /* ---------- WAT IS COACHING ---------- */ .coaching-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:center} .coaching-quote{font-size:24px; line-height:1.5; color:var(--text); font-weight:500} .coaching-list{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px} .coaching-list li{display:flex; gap:14px; align-items:flex-start; color:var(--muted); font-size:19px} .coaching-list .dot{flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:9px; background:var(--accent)} .coaching-list li:nth-child(2) .dot{background:#e6007e} .coaching-list li:nth-child(3) .dot{background:#3cb54a} .coaching-source{margin-top:26px; font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700} .coaching-visual{position:relative; aspect-ratio:1; border-radius:24px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center} .coaching-visual img{width:48%; opacity:.9} .coaching-visual::after{content:""; position:absolute; left:24px; right:24px; bottom:24px; height:8px; border-radius:999px; background:var(--rainbow)} /* ---------- SERVICE CARDS ---------- */ .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px} .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.2s; } .card:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.12)} .card-media{aspect-ratio:16/10; background:#222 var(--ph,none) center/cover; position:relative; overflow:hidden} .card-media img{width:100%; height:100%; object-fit:cover} .card-ph{display:flex; align-items:center; justify-content:center; height:100%; color:#fff; font-weight:600; font-size:15px; background:linear-gradient(135deg,#2a2a2a,#444); text-align:center; padding:20px} .card-body{padding:26px 28px 30px; display:flex; flex-direction:column; gap:12px; flex:1} .card-body h3{font-size:26px} .card-body p{color:var(--muted); font-size:17px} .card-link{margin-top:auto; color:var(--accent); font-weight:700; font-size:16px; display:inline-flex; gap:7px; align-items:center} .tag{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:5px 12px; border-radius:999px; width:fit-content} /* ---------- BAND (dark/alt sections) ---------- */ .band{background:var(--band-bg); color:var(--band-text)} .band .section-head p{color:var(--band-muted)} .band .card{background:var(--band-surface); border-color:var(--band-border)} .band .card-body p{color:var(--band-muted)} .band .section-head .script{color:var(--accent)} /* training list */ .train-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px} .train{display:flex; gap:16px; align-items:center; background:var(--band-surface); border:1px solid var(--band-border); border-radius:14px; padding:20px} .train .code{font-family:var(--font-head); font-weight:800; font-size:15px; color:#fff; background:#1fa5e0; min-width:62px; padding:0 12px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; text-align:center} .train h4{font-size:19px; color:var(--band-text)} .train p{font-size:15px; color:var(--band-muted); margin-top:4px} .train-info{flex:1; min-width:0} .train-meta{list-style:none; padding:0; margin:14px 0 16px; display:grid; gap:7px} .train-meta li{font-size:14px; color:var(--band-muted); display:flex; gap:10px} .train-meta li strong{color:var(--band-text); font-weight:700; flex:0 0 86px} .train-cta{color:var(--accent); font-weight:700; font-size:15px; display:inline-flex; gap:6px; align-items:center} .train-cta:hover{gap:10px} .train-level{display:inline-block; margin-top:5px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--band-muted)} .subhead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 20px} .subhead h3{font-size:23px; color:var(--band-text)} .subhead span{font-size:14px; color:var(--band-muted); font-weight:600} .wshop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px} .wshop{background:var(--band-surface); border:1px solid var(--band-border); border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:8px} .wshop h4{font-size:18px; color:var(--band-text); display:flex; align-items:center; gap:11px} .wshop .wdot{width:11px; height:11px; border-radius:50%; flex:0 0 auto; display:inline-block} .wshop p{font-size:14px; color:var(--band-muted)} .train-foot{margin-top:42px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px} .train-foot p{max-width:680px; color:var(--band-muted); font-size:16px} /* ---------- FAQ ---------- */ .faq{max-width:820px; margin:0 auto; display:grid; gap:14px} .faq details{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:0 24px} .band .faq details{background:var(--band-surface); border-color:var(--band-border)} .faq summary{cursor:pointer; list-style:none; padding:22px 0; font-family:var(--font-head); font-weight:700; font-size:19px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--text)} .band .faq summary{color:var(--band-text)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-size:28px; font-weight:400; color:var(--accent); transition:transform .2s; line-height:1; flex:0 0 auto} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{margin:0 0 22px; color:var(--muted); font-size:17px; line-height:1.65} .band .faq details p{color:var(--band-muted)} /* ---------- BLOG ---------- */ .blog-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px} .post-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:.2s} .post-card:hover{transform:translateY(-4px); box-shadow:0 22px 50px rgba(0,0,0,.12)} .post-card .pmedia{aspect-ratio:16/10; overflow:hidden} .post-card .pmedia img{width:100%; height:100%; object-fit:cover} .post-card .pbody{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1} .post-card .pmeta{font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--accent)} .post-card h3{font-size:23px; line-height:1.2} .post-card p{color:var(--muted); font-size:16px} .post-card .card-link{margin-top:auto} .article{max-width:760px; margin:0 auto; padding:56px 28px 80px} .article-eyebrow{font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent)} .article h1{font-size:clamp(32px,4.6vw,50px); line-height:1.08; margin:14px 0 14px} .article-meta{color:var(--muted); font-size:15px; margin-bottom:30px} .article-hero{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:18px; margin-bottom:36px} .article-body{font-size:19px; line-height:1.75} .article-body h2{font-family:var(--font-head); font-weight:800; font-size:27px; margin:38px 0 12px; letter-spacing:-.01em} .article-body p{margin:0 0 20px; color:var(--text)} .article-body ul{margin:0 0 22px; padding-left:22px; color:var(--text)} .article-body li{margin-bottom:9px} .article-body strong{font-weight:700} .article-cta{margin-top:44px; padding:28px 30px; background:var(--surface); border:1px solid var(--border); border-radius:16px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between} .article-cta p{margin:0; font-family:var(--font-head); font-weight:700; font-size:20px} /* ---------- COACHING OVERZICHTSPAGINA ---------- */ .cform{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:72px; scroll-margin-top:110px} .cform:last-child{margin-bottom:0} .cform-visual{position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--border)} .cform-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .cform.flip .cform-visual{order:2} .cform-tag{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); padding:5px 12px; border-radius:999px; margin-bottom:16px} .cform h3{font-size:clamp(28px,3.4vw,40px); margin-bottom:16px} .cform p{color:var(--muted); font-size:18px} .cform .card-link{margin-top:18px} @media (max-width:900px){ .cform{grid-template-columns:1fr; gap:26px; margin-bottom:52px} .cform.flip .cform-visual{order:0} } /* ---------- OVER THIJS ---------- */ .over-grid{display:grid; grid-template-columns:420px 1fr; gap:64px; align-items:center} .over-photo{position:relative; width:100%; aspect-ratio:1; border-radius:50%; background:var(--surface); border:1px solid var(--border); overflow:hidden; display:flex; align-items:center; justify-content:center} .over-photo img{width:100%; height:100%; object-fit:contain} .over h2{font-size:clamp(34px,4.4vw,52px); margin-top:10px} .over .role{color:var(--muted); font-size:20px; font-weight:600; margin-top:10px} .over p{color:var(--muted); font-size:19px; margin-top:20px} .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px} .chip{font-size:15px; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 18px} /* ---------- REVIEWS ---------- */ .reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px} .review{background:var(--band-surface); border:1px solid var(--band-border); border-radius:16px; padding:30px 30px 26px; display:flex; flex-direction:column; gap:16px} .stars{color:#ffc20e; font-size:18px; letter-spacing:2px} .review p{font-size:17px; line-height:1.55; color:var(--band-text)} .review .who{font-size:15px; color:var(--band-muted); font-weight:700} .review .who span{font-weight:400} /* ---------- NOBCO ---------- */ .nobco{display:flex; flex-direction:column; align-items:center; gap:30px; justify-content:center; flex-wrap:wrap; text-align:center} .nobco-logos{display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:center} .emcc-panel{background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px 28px; display:flex; align-items:center} .emcc-panel img{height:84px; width:auto; display:block} .orsc-badge{display:flex; align-items:center} .orsc-badge img{height:124px; width:auto; display:block} .nobco-logos a{transition:transform .18s} .nobco-logos a:hover{transform:translateY(-3px)} .orsc-badge.ptn{position:relative} .orsc-badge.ptn::before{content:""; position:absolute; top:50%; left:50%; width:98.3%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#fff; z-index:0} .orsc-badge.ptn img{position:relative; z-index:1} .nobco-badge{border:2px solid var(--border); border-radius:16px; padding:22px 30px; display:flex; flex-direction:column; gap:4px; align-items:center; background:var(--surface)} .nobco-badge strong{font-family:var(--font-head); font-weight:800; font-size:30px; letter-spacing:.04em} .nobco-badge span{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700} .nobco p{max-width:520px; color:var(--muted); font-size:18px; text-align:left} /* ---------- CTA ---------- */ .cta{background:var(--cta-bg); color:var(--cta-text); text-align:center; position:relative; overflow:hidden} .cta h2{font-size:clamp(36px,5vw,64px); max-width:16ch; margin:0 auto} .cta p{font-size:21px; opacity:.85; margin:20px auto 0; max-width:560px} .cta .hero-actions{justify-content:center; margin-top:36px} .cta .rainbow-top{position:absolute; top:0; left:0; right:0; height:10px; background:var(--rainbow)} /* ---------- FOOTER ---------- */ .site-footer{background:var(--footer-bg); color:var(--footer-text); padding:70px 0 36px} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px} .site-footer h4{color:var(--footer-head); font-size:18px; margin-bottom:18px} .site-footer .brand{color:var(--footer-head); margin-bottom:16px} .site-footer .footer-badge{width:72px; height:72px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px} .site-footer .footer-badge img{width:58px; height:58px; display:block} .footer-links{list-style:none; padding:0; margin:0; display:grid; gap:10px} .footer-links a{color:var(--footer-text); font-size:16px} .footer-links a:hover{color:var(--accent)} .footer-addr{font-size:16px; line-height:1.7} .footer-affil{margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:14px; color:var(--footer-text); line-height:1.7} .footer-affil strong{color:var(--footer-head); font-weight:700} .footer-affil a{color:var(--footer-text); font-weight:600; text-decoration:underline; text-underline-offset:3px} .footer-affil a:hover{color:var(--accent)} .footer-bottom{margin-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:14px; opacity:.8} /* ---------- THEME SWITCHER ---------- */ .theme-switch{ position:fixed; right:18px; bottom:18px; z-index:80; background:rgba(20,20,22,.92); color:#fff; border-radius:999px; padding:7px; display:flex; gap:4px; box-shadow:0 12px 34px rgba(0,0,0,.4); backdrop-filter:blur(8px); } .theme-switch button{ background:transparent; border:0; color:#cfd2da; font-family:var(--font-body); font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; cursor:pointer; transition:.15s; } .theme-switch button.active{background:#fff; color:#111} .theme-switch .ts-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8a8d96; padding:8px 6px 8px 14px; font-weight:700} /* ---------- RESPONSIVE ---------- */ @media (max-width:1140px){ .coaching-grid,.over-grid,.footer-grid{grid-template-columns:1fr; gap:36px} .over-photo{max-width:340px; margin:0 auto} section{padding:72px 0} .hamburger{display:block} .nav-links{ position:absolute; top:84px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--border); padding:12px; display:none; } .nav-links.open{display:flex} .nav-links a{padding:14px 16px; font-size:17px} .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:0 0 6px 14px; min-width:0} .has-sub > a::after{display:none} .nav-cta .btn{display:none} .hero-ky{display:none} } @media (max-width:560px){ body{font-size:16px} .container{padding:0 20px} .footer-bottom{flex-direction:column} }