/* Carlito = gratis, metrisch identiek aan Calibri (fallback voor Mac/mobiel). MOET bovenaan staan: een @import na andere regels wordt door de browser genegeerd (CSS-spec). Stond eerder na :root en werd dus nooit geladen. */ @import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400&display=swap'); /* ===================================================================== ARC Service Portal — custom theme (sleek & fresh) Design system: zie ARC-Klantenportaal-Powerpages.md (sectie 7) Toepassen in Power Pages: Studio → "Edit code" (VS Code for the Web) → open de site-stylesheet (bv. /theme.css of een nieuw web file) → plak dit onderaan → Save → Sync. Werkt op de Customer Self-Service (Bootstrap 5) template. Sommige selectors kunnen per template licht verschillen; ik kan ze exact maken door de live-site te inspecteren. ===================================================================== */ :root{ --arc:#00529b; /* primair — uit het logo */ --arc-navy:#003D73; /* donker — hover, footer, hero */ --arc-tint:#EAF1F8; /* zachte sectie-achtergrond */ --arc-surface:#F7F9FB; --arc-ink:#1F2933; --arc-body:#3E4C59; --arc-muted:#7B8794; --arc-border:#E4E7EB; --arc-webfleet:#E30613; /* bevestigd 2026-08-05 */ --arc-clicx:#15ABE1; --arc-mprotect:#F26E21; --arc-ok:#2E7D57; --arc-wait:#C97A0A; --arc-font:"Calibri Light",Calibri,Carlito,"Segoe UI",system-ui,-apple-system,sans-serif; /* Bootstrap 5 variabelen overschrijven (Power Pages gebruikt BS5) */ --bs-primary:#00529b; --bs-body-color:#3E4C59; --bs-body-font-family:var(--arc-font); --bs-link-color:#00529b; --bs-link-hover-color:#003D73; } /* ---- Typografie ---- */ body{ font-family:var(--arc-font); color:var(--arc-body); font-weight:300; background:var(--arc-surface); } h1,h2,h3,h4,.h1,.h2,.h3{ font-family:var(--arc-font); font-weight:300; color:var(--arc-ink); letter-spacing:-.01em; } strong,b{ font-weight:700; } /* ---- Knoppen ---- */ .btn-primary{ background:var(--arc); border-color:var(--arc); font-weight:700; border-radius:8px; } .btn-primary:hover,.btn-primary:focus{ background:var(--arc-navy); border-color:var(--arc-navy); } .btn-outline-primary{ color:var(--arc); border-color:var(--arc); font-weight:700; border-radius:8px; } .btn-outline-primary:hover{ background:var(--arc); border-color:var(--arc); } /* ---- Header / navbar ---- */ .navbar{ background:#fff !important; border-bottom:1px solid var(--arc-border); } .navbar .nav-link{ color:var(--arc-ink) !important; } .navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--arc) !important; } .navbar-brand img{ max-height:36px; } /* ---- Hero / page header ---- */ .page-heading,.sectionBlockLayout.hero,.hero{ background:linear-gradient(135deg,var(--arc-navy),var(--arc)) !important; color:#fff !important; } .page-heading h1,.hero h1,.hero p{ color:#fff !important; } /* ---- Kaarten ---- */ .card{ border:1px solid var(--arc-border); border-radius:14px; transition:.15s; } .card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,41,51,.08); } /* ---- Kennisbank secties met tint ---- */ .section-tint{ background:var(--arc-tint); } /* ---- Footer ---- */ footer,.footer{ background:var(--arc-navy) !important; color:#c3d3e6 !important; } footer a,.footer a{ color:#fff !important; } /* ---- Product-tags (voeg class toe op tegels/labels) ---- */ .arc-tag{ display:inline-block; font-size:12px; font-weight:700; color:#fff; padding:3px 10px; border-radius:20px; } .arc-tag.webfleet{ background:var(--arc-webfleet); } .arc-tag.clicx{ background:var(--arc-clicx); } .arc-tag.mprotect{ background:var(--arc-mprotect); } .arc-card-webfleet{ border-top:4px solid var(--arc-webfleet); } .arc-card-clicx{ border-top:4px solid var(--arc-clicx); } .arc-card-mprotect{ border-top:4px solid var(--arc-mprotect); } /* ---- Case-status badges ---- */ .arc-badge{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; } .arc-badge.new{ background:var(--arc-tint); color:var(--arc); } .arc-badge.wait{ background:#FBF0DF; color:var(--arc-wait); } .arc-badge.ok{ background:#E4F1EA; color:var(--arc-ok); } /* ---- Links ---- */ a{ color:var(--arc); } a:hover{ color:var(--arc-navy); } /* ============ v2 refinements (target echte template-classes) ============ */ /* Koppen forceren naar Calibri (wint van portalbasictheme.css) */ h1,h2,h3,h4,h5,h6, .xrm-editable-html h1,.xrm-editable-html h2,.xrm-editable-html h3, .columnBlockLayout h1,.columnBlockLayout h2,.columnBlockLayout h3{ font-family:var(--arc-font) !important; font-weight:300 !important; color:var(--arc-ink) !important; letter-spacing:-.01em; } /* "Most Popular Articles"-tegels als nette kaarten (zoals mockup) */ .row.sectionBlockLayout.populararticle .columnBlockLayout{ background:#fff !important; border:1px solid var(--arc-border) !important; border-top:4px solid var(--arc) !important; border-radius:14px !important; padding:22px !important; box-shadow:0 6px 18px rgba(31,41,51,.05); transition:transform .15s, box-shadow .15s; } .row.sectionBlockLayout.populararticle .columnBlockLayout:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(31,41,51,.09) !important; } /* Zoekbalk + knoppen afronden */ .form-control{ border-radius:8px !important; } .input-group>.form-control:not(:last-child){ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .btn, .btn-primary{ border-radius:8px !important; } /* Nav-links iets steviger */ nav.menu-bar .nav-link{ font-weight:400; } /* Algemene sectie-ademruimte */ .row.sectionBlockLayout{ padding-top:8px; padding-bottom:8px; } /* ================= Universeel: ARC-font over het HÉLE portaal ================= Forceert de Calibri/Carlito-stack op ALLE tekst-elementen (ook de editable content-"koppen" en de navbar), maar laat de Font Awesome-iconen met rust. */ body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not([class*="fa-"]):not(.glyphicon):not(.material-icons){ font-family: var(--arc-font) !important; } /* Icoon-fonts expliciet herstellen (Font Awesome 6) */ .fa,.fas,.far,.fal,.fab,.fad,[class*="fa-"],i[class*="fa"],.glyphicon{ font-family:"Font Awesome 6 Free","Font Awesome 6 Brands","FontAwesome" !important; } /* ================= v3 polish (WI-2, T4) ================= */ /* Custom.css (stock Power Pages) zet expliciet border-radius:0 op .card, .btn en .form-control. Die regels concurreren rechtstreeks met de ARC- afronding, dus hier expliciet !important -- anders hangt het resultaat af van laadvolgorde. */ .card{ border-radius:14px !important; } /* Footer: het echte