/* * Autorespond Hub, extra layout on top of the design. * * ontwerp.css stays untouched so it can be synced from the Dutch theme. * Everything that only exists on the English site lives here, and this file * is enqueued last so it always wins. */ /* -------------------------------------------------------------------------- 1. The AI section: explanation on the left, a sample conversation on the right -------------------------------------------------------------------------- */ .ai-split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start} .ai-uitleg .rijen{margin-bottom:26px} .ai-uitleg .knoppen{display:flex;flex-wrap:wrap;gap:10px} .ai-praat{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:22px} .ai-regel{ border-radius:14px;padding:13px 16px;margin-bottom:10px;font-size:14.5px;line-height:1.55; max-width:92%; } .ai-regel.jij{ background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); margin-left:auto; } .ai-regel.ai{background:var(--paneel2);border:1px solid var(--rand)} .ai-regel.ai b{color:var(--accent)} .ai-noot{font-size:12.5px;opacity:.72;margin:16px 0 0} @media (max-width:900px){ .ai-split{grid-template-columns:1fr;gap:26px} .ai-regel{max-width:100%} } /* -------------------------------------------------------------------------- 2. The sign-up form The form itself is a Fluent Forms form. These rules make it sit inside the dark panel of the design instead of bringing its own white box along. -------------------------------------------------------------------------- */ .rfform .fluentform{margin:0} .rfform .fluentform .ff-el-group{margin-bottom:14px} .rfform .fluentform .ff-el-input--label label{ font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:600; color:var(--tekst);margin-bottom:6px } .rfform .fluentform input[type=text], .rfform .fluentform input[type=email], .rfform .fluentform input[type=url], .rfform .fluentform input[type=tel], .rfform .fluentform select, .rfform .fluentform textarea{ width:100%;background:var(--paneel2);color:var(--tekst); border:1px solid var(--rand2);border-radius:11px;padding:11px 13px; font-family:inherit;font-size:14.5px;box-shadow:none } .rfform .fluentform input:focus, .rfform .fluentform select:focus, .rfform .fluentform textarea:focus{ border-color:var(--accent);outline:2px solid color-mix(in srgb, var(--accent) 28%, transparent);outline-offset:1px } .rfform .fluentform .ff-el-form-check-label{font-size:14px;line-height:1.5} .rfform .fluentform .ff-btn-submit{ width:100%;background:var(--accent);color:#fff;border:0;border-radius:12px; padding:14px 18px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15px;cursor:pointer } .rfform .fluentform .ff-btn-submit:hover{background:var(--accent-h)} .rfform .fluentform .ff-el-is-error input, .rfform .fluentform .ff-el-is-error select, .rfform .fluentform .ff-el-is-error textarea{border-color:#e5484d} .rfform .fluentform .error-text, .rfform .fluentform .text-danger{font-size:12.5px;color:#e5484d} .rfform .ff-message-success{ background:color-mix(in srgb, var(--groen) 14%, transparent); border:1px solid color-mix(in srgb, var(--groen) 34%, transparent); border-radius:12px;padding:16px;color:var(--tekst) } /* -------------------------------------------------------------------------- 3. Comparison table on the pricing page -------------------------------------------------------------------------- */ .vgl{width:100%;border-collapse:collapse;font-size:14.5px} .vgl th,.vgl td{padding:12px 14px;border-bottom:1px solid var(--rand);text-align:left;vertical-align:top} .vgl thead th{ font-family:'Archivo',system-ui,sans-serif;font-size:12px;letter-spacing:.08em; text-transform:uppercase;opacity:.7;border-bottom:1px solid var(--rand2) } .vgl td.ja,.vgl td.nee{text-align:center;width:130px} .vgl td.ja svg{width:18px;height:18px;stroke:var(--groen);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .vgl td.nee{opacity:.4} .vgl-wrap{overflow-x:auto;border:1px solid var(--rand);border-radius:var(--r);background:var(--paneel)} /* -------------------------------------------------------------------------- 4. Small helpers -------------------------------------------------------------------------- */ .mid-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px} .tekst-mid{text-align:center} /* Wie er achter de site zit, onder de contactkolom. */ .fcontact .fmaker{font-size:12.5px;opacity:.72;margin-top:14px} .fcontact .fmaker a{color:inherit;text-decoration:underline} /* -------------------------------------------------------------------------- 5. Docs, blog en zoeken: onze header en footer, Astra-inhoud ertussen -------------------------------------------------------------------------- */ body.hub-inhoud .site-header, body.hub-inhoud .site-footer, body.hub-inhoud .ast-above-header, body.hub-inhoud .ast-below-header{display:none} body.hub-inhoud{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tekst)} /* De menubalk staat vast bovenaan en is 92px hoog. Zonder deze ruimte schoof BetterDocs zijn kruimelpad en zijkolom eronder, en las het artikel achter het menu door. */ body.hub-inhoud #content{padding-top:124px} @media (max-width:1040px){body.hub-inhoud #content{padding-top:96px}} body.hub-inhoud .ast-container{max-width:1180px} /* Een los document heeft links de categorienavigatie en rechts de inhoudstabel. Op 1180px werd de tekst ertussen een smalle kolom, dus daar geven we de hele pagina meer breedte. */ body.hub-inhoud.single-docs .ast-container{max-width:1720px} body.hub-inhoud.single-docs #content{padding-top:112px} /* BetterDocs legt het artikel in een raster van twaalf kolommen, met een maximum van 1400px: de navigatie en de inhoudstabel namen daar elk drie kolommen, zodat de tekst zelf op 660px bleef steken. Drie eigen kolommen geven de tekst de ruimte, net als op mijn.autorespond.nl. */ body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3{max-width:1680px;grid-template-columns:290px minmax(0,1fr) 290px} body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3>.betterdocs-full-sidebar-left{grid-column:1} body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3>.betterdocs-content-area{grid-column:2;min-width:0} body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3>.betterdocs-full-sidebar-right{grid-column:3} @media (max-width:1100px){body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3{grid-template-columns:1fr} body.hub-inhoud.single-docs .betterdocs-content-wrapper.grid-col-3>*{grid-column:1}} body.hub-inhoud h1,body.hub-inhoud h2,body.hub-inhoud h3,body.hub-inhoud .entry-title{font-family:'Archivo',system-ui,sans-serif;font-stretch:90%;letter-spacing:-.01em;color:var(--tekst)} body.hub-inhoud a{color:var(--accent)} body.hub-inhoud .betterdocs-search-form-wrapper h2{font-family:'Archivo',system-ui,sans-serif} /* De documentatie-index heeft onze eigen hero. Die maakt zelf al ruimte, dus daar telt de compensatie hierboven niet nog eens bovenop. */ body.hub-inhoud .ar-doc-index .paginahero{padding:36px 0 8px} body.hub-inhoud .ar-doc-index>.sec{padding-top:28px} /* Het zoekveld is dat van BetterDocs, met suggesties terwijl je typt. Het staat in een gecentreerde hero, dus we zetten het zelf midden. */ body.hub-inhoud .ar-doc-index .ar-doc-search{display:block;max-width:620px;margin:0 auto 18px;text-align:left} body.hub-inhoud .ar-doc-index .ar-doc-search .betterdocs-search-form-wrapper, body.hub-inhoud .ar-doc-index .ar-doc-search .betterdocs-searchform{width:100%} body.hub-inhoud .ar-doc-index .ar-doc-card h2{font-size:21px} body.hub-inhoud .ar-doc-index .ar-doc-card>p{color:var(--zacht);font-size:13.5px;margin:6px 0 12px} body.hub-inhoud .ar-doc-index .ar-doc-card summary{cursor:pointer;color:var(--accent);font-size:13.5px} /* Naast een artikel staat de categorie-navigatie van BetterDocs. Die wordt lang; laat hem zelf scrollen in plaats van de pagina uit te rekken. */ body.hub-inhoud .betterdocs-sidebar .betterdocs-category-sidebar{max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain} /* -------------------------------------------------------------------------- 5b. Blog De loop blijft van Astra, alleen de opmaak is van ons. De kop erboven komt uit inc/blog.php. -------------------------------------------------------------------------- */ body.hub-inhoud .blog-hero{padding:8px 0 4px} body.hub-inhoud .blog-hero h1{font-size:clamp(30px,4.4vw,50px)} body.hub-inhoud .blog-terug{margin-top:6px;font-size:14px} /* De kaarten in het archief: dezelfde rand, ronding en schaduw als elders. */ body.hub-inhoud .ast-archive-post, body.hub-inhoud .ast-separate-container .ast-article-post{background:var(--bg2);border:1px solid var(--rand);border-radius:var(--r-m,16px);box-shadow:none;transition:border-color .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)} body.hub-inhoud .ast-archive-post:hover, body.hub-inhoud .ast-separate-container .ast-article-post:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--rand));transform:translateY(-2px)} body.hub-inhoud .ast-article-post .ast-blog-featured-section img{border-radius:var(--r-s,10px)} body.hub-inhoud .entry-title{font-size:20px;line-height:1.25} body.hub-inhoud .entry-title a{color:var(--tekst)} body.hub-inhoud .entry-title a:hover{color:var(--accent)} body.hub-inhoud .ast-blog-meta-container, body.hub-inhoud .entry-meta, body.hub-inhoud .entry-meta a{color:var(--zachter);font-size:12.5px;font-weight:400} body.hub-inhoud .entry-meta a:hover{color:var(--accent)} body.hub-inhoud .ast-excerpt-container p{color:var(--zacht);font-size:14.5px} /* Een los bericht leest als een artikel: één kolom, rustige regelbreedte. */ body.hub-inhoud.single-post .entry-content, body.hub-inhoud.single-post .entry-header, body.hub-inhoud.single-post .post-navigation, body.hub-inhoud.single-post #comments{max-width:720px;margin-left:auto;margin-right:auto} body.hub-inhoud.single-post .entry-title{font-size:clamp(28px,3.6vw,42px);line-height:1.1;margin-bottom:10px} body.hub-inhoud.single-post .entry-meta{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--rand)} body.hub-inhoud.single-post .entry-content p{font-size:17px;line-height:1.7;color:var(--tekst)} body.hub-inhoud.single-post .entry-content h2{font-size:26px;margin:36px 0 12px} body.hub-inhoud.single-post .entry-content h3{font-size:20px;margin:28px 0 10px} body.hub-inhoud.single-post .entry-content img{border-radius:var(--r-s,10px)} body.hub-inhoud.single-post .post-navigation{margin-top:44px;padding-top:22px;border-top:1px solid var(--rand)} /* -------------------------------------------------------------------------- 6. De lead visual: een gebouwd dashboard in het browserframe van de hero -------------------------------------------------------------------------- */ .kv{display:grid;grid-template-columns:172px 1fr;background:var(--bg2);font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1.35;color:var(--tekst);text-align:left;min-height:520px} .kv .ico{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .kv-nav{background:var(--paneel);border-right:1px solid var(--rand);padding:16px 12px;display:flex;flex-direction:column;gap:2px} .kv-merk{display:flex;align-items:center;gap:8px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:12px;margin:2px 6px 14px} .kv-merk i{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-h));flex-shrink:0} .kv-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:var(--zacht)} .kv-item.aan{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);font-weight:600} .kv-ai{margin-top:auto;display:flex;align-items:center;gap:7px;padding:8px 9px;border-radius:8px;border:1px solid var(--rand);background:var(--bg2);font-size:10.5px;font-weight:600;color:var(--tekst)} .kv-puls{width:7px;height:7px;border-radius:50%;background:var(--groen);box-shadow:0 0 0 0 var(--groen);animation:kvpuls 2.4s infinite} @keyframes kvpuls{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--groen) 55%, transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}} .kv-main{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;min-width:0} .kv-top{display:flex;justify-content:space-between;align-items:center;gap:12px} .kv-top b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em} .kv-top span{color:var(--zacht)} .kv-zoek{display:flex;align-items:center;gap:7px;background:var(--paneel);border:1px solid var(--rand);border-radius:8px;padding:6px 10px;color:var(--zachter);white-space:nowrap} .kv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .kv-stat{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r);padding:10px 12px} .kv-stat span{display:block;color:var(--zacht);font-size:10.5px} .kv-stat b{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;margin:2px 0 1px;font-variant-numeric:tabular-nums} .kv-stat em{font-style:normal;color:var(--zachter);font-size:10.5px} .kv .up{color:var(--groen);font-weight:600} .kv-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:10px} .kv-card{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r);padding:11px 12px;min-width:0} .kv-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px} .kv-kop b{font-family:'Archivo',system-ui,sans-serif;font-size:12px;font-weight:700} .kv-kop span{color:var(--zachter);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kv-nodes{display:flex;align-items:center;flex-wrap:wrap;gap:4px} .kv-node{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;background:var(--bg2);border:1px solid var(--rand);white-space:nowrap;font-size:10.5px;font-weight:500} .kv-node.wacht{color:var(--amber);background:var(--amber-bg);border-color:transparent} .kv-node.ok{color:var(--groen);background:var(--groen-bg);border-color:transparent} .kv-nodes>i{width:10px;height:1px;background:var(--rand2);flex-shrink:0} .kv-voet{display:flex;justify-content:space-between;margin-top:9px;color:var(--zacht);font-size:10.5px} .kv-rij{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--rand)} .kv-rij:first-of-type{border-top:0} .kv-rij>div{flex:1;min-width:0} .kv-rij b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kv-rij span:not(.kv-av){display:block;color:var(--zachter);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kv-rij em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums} .kv-av{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .kv-rij.nieuw{animation:kvin .6s ease-out} @keyframes kvin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .kv-balk{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:8px;margin:6px 0;font-size:10.5px} .kv-balk span{color:var(--zacht)} .kv-balk i{display:block;height:6px;border-radius:3px;background:var(--bg2);position:relative;overflow:hidden} .kv-balk i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--accent);border-radius:3px} .kv-balk em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums} .kv-afspraak{display:flex;gap:9px;padding:5px 0;border-top:1px solid var(--rand)} .kv-afspraak:first-of-type{border-top:0} .kv-afspraak>b{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600;flex-shrink:0} .kv-afspraak>div{font-weight:600;min-width:0} .kv-afspraak span{display:block;font-weight:400;color:var(--zachter);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:760px){ .kv{grid-template-columns:1fr;min-height:0} .kv-nav{display:none} .kv-stats{grid-template-columns:repeat(2,1fr)} .kv-grid{grid-template-columns:1fr} .kv-zoek{display:none} .kv-course,.kv-agenda{display:none} } @media (prefers-reduced-motion: reduce){ .kv-puls{animation:none} .kv-rij.nieuw{animation:none} } /* Een kruimelpad is ook een