/* ============================================================ Bconnect — design-tokens (algemene styling, sitewide) ------------------------------------------------------------ Overgenomen uit de Cloud Design-bron (colors_and_type.css). Onderaan een alias-blok met korte --bc-* namen voor de widget-CSS, gekoppeld aan deze originele tokens. ============================================================ */ :root { /* ========================================================== COLOR — CORE ========================================================== */ --c-navy: #141464; /* PRIMARY UI color — headings, text, buttons */ --c-navy-deep: #0B0A3D; /* deepest navy — dark surfaces */ --c-navy-hover: #0F0E47; /* navy button hover */ --c-near-black: #141414; --c-logo-navy: #232856; /* LOGO ONLY — do not use in UI */ /* ========================================================== COLOR — TEXT ========================================================== */ --c-text: #1F2124; /* default body text */ --c-text-muted: #5A6068; /* secondary text, lead paragraphs */ --c-text-soft: #6B7280; /* tertiary text, captions, meta — 05-08-2026 van #7B8190 naar #6B7280: dat was 3,90:1 op wit en AA vraagt 4,5:1 voor normale tekst. Dit token zit juist op kleine tekst (helpteksten, captions, meta), dus daar telt het. */ /* ========================================================== COLOR — ACCENTS (gradient endpoints + supporting hues) ========================================================== */ --c-grad-blue: #2301fb; /* gradient START (signature) */ --c-grad-magenta: #a80290; /* gradient END (signature) */ --c-electric: #007AFF; /* interactive blue — links, focus */ --c-sky: #58D0F5; /* light cyan — highlights on dark */ --c-magenta: #AA028E; /* magenta accent — hover, eyebrows */ --c-magenta-soft: #D63FB6; /* ========================================================== COLOR — NEUTRALS / SURFACES ========================================================== */ --c-white: #FFFFFF; --c-bg-light: #F5F5F5; --c-bg-soft: #EAEEF6; /* soft section background — deeper cool tint for clear separation from white */ --c-bg-tint: #F4F5FA; /* tinted hover / menu surface */ --c-lavender: #f5f4fb; /* Bconnect-lavendel — exacte huisstijl wash-surface */ --surface-lavender: var(--c-lavender); /* alias: sommige widgets (hl-proof) verwachten deze naam */ --c-border: #E2E4EC; /* default border */ --c-border-soft: #ECEEF4; /* hairline border */ --c-form-border: #697C7D; --c-success: #39B54A; /* status / check green */ /* ========================================================== SIGNATURE GRADIENTS ========================================================== */ --gradient-brand: linear-gradient(90deg, #2301fb 0%, #a80290 100%); /* Alias: meerdere widget-stylesheets (lg-hero, lg-channels, lg-funnel, lg-deliver, models, shared .lg-eyebrow) gebruiken --brand-gradient. In de bron versie A staat dit token op 90deg (gecontroleerd op de :root van de export); stond hier op 135deg uit een oudere export. Elementen die in de bron expliciet 135deg hebben (kaart-iconen, band, .wg-scope) zetten dat in hun eigen CSS en blijven ongemoeid. */ --brand-gradient: linear-gradient(90deg, #2301fb 0%, #a80290 100%); /* Icon-cirkels in de klantreis (journey) verwachten --c-surface. */ --c-surface: #ffffff; --gradient-brand-rich: radial-gradient(120% 140% at 0% 0%, rgba(35,1,251,0.55) 0%, transparent 60%), radial-gradient(100% 120% at 100% 100%, rgba(168,2,144,0.55) 0%, transparent 60%), linear-gradient(90deg, #2301fb 0%, #a80290 100%); --gradient-text: linear-gradient(90deg, #2301fb 0%, #a80290 100%); /* ========================================================== TYPOGRAPHY — FAMILIES ========================================================== */ --font-head: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ========================================================== TYPOGRAPHY — TYPE SCALE (display + heading use --font-head; text uses --font-body) ========================================================== */ --fs-display: 60px; --lh-display: 1.04; --ls-display: -0.025em; --fs-h1: 44px; --lh-h1: 1.08; --ls-h1: -0.02em; --fs-h2: 36px; --lh-h2: 1.15; --ls-h2: -0.015em; --fs-h3: 22px; --lh-h3: 1.25; --ls-h3: -0.01em; --fs-h4: 17px; --lh-h4: 1.4; --ls-h4: 0; --fs-lead: 19px; --lh-lead: 1.6; --fs-body: 15px; --lh-body: 1.6; --fs-small: 13px; --lh-small: 1.55; --fs-eyebrow: 12px; --ls-eyebrow: 0.14em; /* weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ========================================================== SHAPE — RADII ========================================================== */ --radius-card: 14px; --radius-feature: 18px; --radius-pill: 999px; /* ========================================================== ELEVATION — layered, low-tint navy shadows ========================================================== */ --shadow-soft: 0 1px 2px rgba(20,20,100,0.04), 0 4px 16px rgba(20,20,100,0.06); --shadow-card: 0 1px 2px rgba(20,20,100,0.04), 0 6px 18px rgba(20,20,100,0.06); --shadow-card-hover: 0 2px 4px rgba(20,20,100,0.06), 0 18px 40px -8px rgba(20,20,100,0.18); --shadow-feature: 0 30px 60px -20px rgba(20,20,100,0.45), 0 12px 24px -12px rgba(170,2,142,0.25); --shadow-btn: 0 6px 18px rgba(20,20,100,0.30), inset 0 1px 0 rgba(255,255,255,0.10); --shadow-btn-hover: 0 10px 28px rgba(20,20,100,0.36), inset 0 1px 0 rgba(255,255,255,0.14); /* ========================================================== SPACING — section rhythm + container ========================================================== */ --container: 1520px; /* breder, gelijk aan het origineel — geldt site-breed voor alle .container-secties */ --gutter: 56px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 88px; --space-10: 112px; /* ========================================================== MOTION ========================================================== */ --ease: cubic-bezier(.2,.7,.2,1); } /* ============================================================ BASIS — body-typografie exact zoals de Claude Design-bron. ------------------------------------------------------------ De bron zet op : font-family var(--font-body), font-size var(--fs-body) (15px), line-height var(--lh-body) (1.6) en color var(--c-text). Dit thema erfde tot nu 16px/1.5 en #333 van Hello Elementor, waardoor elk element dat zijn regelhoogte/korps ERFT iets afwijkt van het ontwerp (o.a. knophoogte 48,5px i.p.v. 50px en eyebrow-regelhoogte). `html body` is nét specifieker dan de body-regels van het thema/de Elementor-kit, zonder !important. ============================================================ */ html body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ===== Alias-tokens (korte namen voor widget-CSS) ===== */ :root { --bc-navy: var(--c-navy); --bc-navy-deep: var(--c-navy-deep); --bc-grad-blue: var(--c-grad-blue); --bc-grad-magenta: var(--c-grad-magenta); --bc-gradient: var(--gradient-brand); --bc-text: var(--c-text); --bc-text-muted: var(--c-text-muted); --bc-success: var(--c-success); --bc-container: var(--container); --bc-gutter: var(--gutter); --bc-font: var(--font-head); --bc-font-body: var(--font-body); }