/*********************************************/ /* theme.css */ /*-------------------------------------------*/ /* This file is part of: */ /* SytskeBS5 */ /* based on NIK BS5 / 2shine BS5 */ /*-------------------------------------------*/ /* Runtime design tokens. Aanpasbaar op de */ /* server zonder rebuild. */ /* */ /* Bron: Sytske-Schoenmakers-homepage.html */ /* in de projectroot. Waar het voorbeeld */ /* per sectie een net andere maat had, */ /* staat hier een gedeelde waarde; dat is */ /* per token aangegeven. */ /*********************************************/ :root, [data-bs-theme="default-theme"] { /* ============ MERKKLEUREN ============ */ /* Uit het logo en de :root van het voorbeeld. */ --bond-petrol: #264C58; /* koppen, footer, cijferbalk, omlijnde knop */ --bond-petrol-700: #173D48; /* resultatenvlak over de foto */ --bond-petrol-600: #1F404A; /* hover op petrol */ --bond-petrol-100: #BDD1D5; /* zachte tekst op petrol */ --bond-pink: #E6007E; /* hoofdknop, ringen, cijferaccent, "+" */ --bond-pink-600: #C4006B; /* hover op de roze knop */ --bond-pink-soft: #FBE0EE; /* rustige vlakken, o.a. achter het inlogscherm */ --bond-blue: #00738B; /* tweede knop, eyebrow, uitgelichte kaart */ --bond-blue-600: #005F73; /* hover op de blauwe knop */ --bond-cyan: #62C7D4; /* accent op donker vlak */ --bond-cyan-soft: #74D2DE; /* kopjes in de footer, eyebrow op donker */ /* ============ ACHTERGRONDEN ============ */ --bond-bg: #F8F2EB; /* paginaachtergrond, warm beige */ --bond-surface: #FFFFFF; /* kaarten, witte secties */ --bond-mist: #EDF7F8; /* FAQ, eerste stap, citaten */ --bond-mist-strong: #DFF2F4; /* actieve tab, geselecteerde chip */ /* ============ SEMANTISCH ============ */ /* Gebruik deze in componenten, niet de kleuren hierboven. */ --bond-text: #3C3C3B; --bond-heading: var(--bond-petrol); --bond-eyebrow: var(--bond-blue); --bond-on-dark: #FFFFFF; --bond-on-dark-muted: #D9E5E7; --bond-border: rgba(38, 76, 88, 0.18); --bond-border-strong: rgba(38, 76, 88, 0.28); --bond-border-on-dark: rgba(255, 255, 255, 0.22); --bond-danger: #B3261E; --bond-success: #2E7D4F; /* Contrast, nagemeten: wit op roze #E6007E 4,6 : 1 (AA voor gewone tekst, net) wit op blauw #00738B 5,5 : 1 wit op petrol #264C58 9,1 : 1 Maak de roze knop dus niet lichter zonder de tekst donker te maken. */ /* ============ TYPOGRAFIE ============ */ /* Systeemletter, zoals in de laatste laag van het voorbeeld ("v5"). Wil je toch een webfont, zet dan de URL in App_LocalResources/Sytske.resx onder Fonts.WebfontUrl en de naam vooraan in deze regel. */ --bond-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bond-font-heading: var(--bond-font-body); /* Type-schaal. clamp() = mobiel -> desktop. */ --bond-h1: clamp(2.6875rem, 4.2vw, 4.125rem); /* 43 -> 66, hero; 60px op 1440 breed */ --bond-h2: clamp(2.625rem, 1.75rem + 3.3vw, 4.5rem); /* 42 -> 72, sectiekoppen */ --bond-h2-xl: clamp(2.625rem, 1.4rem + 4.6vw, 5.25rem); /* 42 -> 84, "Zo werk ik met je samen", "Wat het opleverde" */ --bond-h3: clamp(1.6875rem, 1.55rem + 0.55vw, 1.875rem); /* 27 -> 30, kaarten en stappen */ --bond-h4: 1.25rem; /* 20 */ --bond-h5: 1.0625rem; /* 17 */ --bond-body: 1.0625rem; /* 17 */ --bond-body-lg: 1.1875rem;/* 19 — introtekst in de hero */ --bond-small: 0.9375rem; /* 15 */ --bond-eyebrow-size: 0.875rem; /* 14, kapitalen */ --bond-quote-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); /* 18 -> 24, citaten */ --bond-quote-size-long: clamp(1rem, 0.95rem + 0.6vw, 1.3125rem); /* 16 -> 21, lange citaten */ --bond-stat-size: clamp(2.75rem, 2rem + 2.2vw, 3.625rem); /* 44 -> 58 */ --bond-line-height-heading: 1; --bond-line-height-body: 1.58; --bond-letter-spacing-heading: -0.045em; --bond-weight-heading: 750; --bond-weight-body: 400; --bond-weight-strong: 700; /* ============ RADII ============ */ --bond-radius-card: 20px; /* kaarten, stappen */ --bond-radius-media: 34px; /* foto's */ --bond-radius-panel: 18px; /* resultaten, opdrachtgevers */ --bond-radius-pill: 999px; /* knoppen, naamlabel */ /* ============ SPACING ============ */ --bond-space-xs: 0.5rem; /* 8 = spacer 2 */ --bond-space-sm: 1rem; /* 16 = spacer 3 */ --bond-space-md: 1.5rem; /* 24 = spacer 4 */ --bond-space-lg: 3rem; /* 48 = spacer 5 */ --bond-space-xl: 6rem; /* 96 = spacer 6 */ /* Ruimte boven en onder een sectie. Alle secties gebruiken dezelfde compacte maat (64px), zoals bij "Trainingen". De ruime maat (bond-section--roomy, resultaten) is daar nu gelijk aan; zet hem hier groter als het weer ruimer moet. */ --bond-section-space: clamp(2.875rem, 2.3rem + 1.8vw, 4rem); /* 46 -> 64 */ --bond-section-space-lg: var(--bond-section-space); /* Losse blokken in een pane (binnenpagina's). */ --bond-block-space: 2rem; --bond-hero-space-after: 0; /* ============ NAVIGATIE ============ */ --bond-nav-height: 4.5rem; /* 72, mobiel; op desktop 92, zie _nav.scss */ --bond-nav-height-lg: 5.75rem; --bond-nav-marker: 3px; /* streep onder het actieve menu-item */ --bond-logo-width: 112px; /* beeldmerk 112 x 53, zoals in het voorbeeld (152 x 58 met witmarge) */ /* ============ DECORATIE: HET BEELDMERK ============ */ /* De officiële ellipsen uit de huisstijl (versie 2), genummerd 1 t/m 8. Afspraak: op foto's en los (hero, citaten, stappen) ellips 7 of 8, via --bond-ellipsen. Boven een kaart kiest de redacteur per kaart een ellips (veld Ellips van het type Kaart); leeg = --bond-ellipsen. Het pad geldt vanaf theme/ én vanaf dist/: allebei een map onder de skin. Levert de ontwerper een SVG, vervang dan alleen deze regels. */ --bond-ellips-1: url("../images/ellipsen/ellips-1.png"); --bond-ellips-2: url("../images/ellipsen/ellips-2.png"); --bond-ellips-3: url("../images/ellipsen/ellips-3.png"); --bond-ellips-4: url("../images/ellipsen/ellips-4.png"); --bond-ellips-5: url("../images/ellipsen/ellips-5.png"); --bond-ellips-6: url("../images/ellipsen/ellips-6.png"); --bond-ellips-7: url("../images/ellipsen/ellips-7.png"); --bond-ellips-8: url("../images/ellipsen/ellips-8.png"); --bond-ellipsen: var(--bond-ellips-7); /* De losse ringen (twee ovalen) worden alleen nog gebruikt op de splash- en inlogpagina. */ --bond-ring-a: var(--bond-pink); --bond-ring-b: var(--bond-blue); /* ============ MELDINGEN ============ */ --bond-message-bar: 4px; /* ============ BOOTSTRAP KOPPELEN ============ */ --bs-primary: var(--bond-pink); --bs-secondary: var(--bond-blue); --bs-body-bg: var(--bond-bg); --bs-body-color: var(--bond-text); --bs-body-font-family: var(--bond-font-body); --bs-body-font-size: var(--bond-body); --bs-body-font-weight: var(--bond-weight-body); --bs-body-line-height: var(--bond-line-height-body); --bs-border-radius: var(--bond-radius-card); --bs-border-radius-sm: 12px; --bs-border-radius-lg: var(--bond-radius-card); --bs-border-radius-xl: 24px; --bs-border-radius-xxl: var(--bond-radius-media); --bs-border-color: var(--bond-border); --bs-link-color: var(--bond-blue); --bs-link-hover-color: var(--bond-petrol); /* Thema-vlakken (bestaande hooks van dit thema) */ --theme-backdrop-bg: var(--bond-bg); --theme-page-main-bg: var(--bond-bg); --theme-breadcrumb-bg: transparent; --theme-nav-bg: var(--bond-surface); --theme-footer-bg: var(--bond-petrol); --theme-font: var(--bond-font-body); --theme-font-headlines: var(--bond-font-heading); /* ============ SCHADUWEN ============ */ /* Het ontwerp is vlak: randen in plaats van schaduw. Deze waarden zijn er voor DNN-onderdelen die om een schaduw vragen. */ --bs-box-shadow-sm: 0 1px 2px rgba(38, 76, 88, 0.06); --bs-box-shadow: 0 8px 24px rgba(38, 76, 88, 0.08); --bs-box-shadow-lg: 0 24px 70px rgba(38, 76, 88, 0.14); /* ============ COMPONENTEN ============ */ .breadcrumb { --bs-breadcrumb-font-size: var(--bond-small); --bs-breadcrumb-divider-color: var(--bond-text); --bs-breadcrumb-item-active-color: var(--bond-text); } /* Roze pill — "Plan een kennismakingsgesprek", "Plan een gesprek" */ .btn-primary { --bs-btn-color: var(--bond-on-dark); --bs-btn-bg: var(--bond-pink); --bs-btn-border-color: var(--bond-pink); --bs-btn-hover-color: var(--bond-on-dark); --bs-btn-hover-bg: var(--bond-pink-600); --bs-btn-hover-border-color: var(--bond-pink-600); --bs-btn-active-color: var(--bond-on-dark); --bs-btn-active-bg: var(--bond-pink-600); --bs-btn-active-border-color: var(--bond-pink-600); --bs-btn-disabled-color: var(--bond-on-dark); --bs-btn-disabled-bg: var(--bond-pink); --bs-btn-disabled-border-color: var(--bond-pink); } /* Blauwe pill — "Bekijk mijn aanbod", "Mail Sytske" */ .btn-secondary { --bs-btn-color: var(--bond-on-dark); --bs-btn-bg: var(--bond-blue); --bs-btn-border-color: var(--bond-blue); --bs-btn-hover-color: var(--bond-on-dark); --bs-btn-hover-bg: var(--bond-blue-600); --bs-btn-hover-border-color: var(--bond-blue-600); --bs-btn-active-color: var(--bond-on-dark); --bs-btn-active-bg: var(--bond-blue-600); --bs-btn-active-border-color: var(--bond-blue-600); --bs-btn-disabled-color: var(--bond-on-dark); --bs-btn-disabled-bg: var(--bond-blue); --bs-btn-disabled-border-color: var(--bond-blue); } /* Omlijnde pill in petrol — "Bel Sytske", "Vraag mijn commissarisprofiel aan" */ .btn-outline-primary { --bs-btn-color: var(--bond-petrol); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bond-petrol); --bs-btn-hover-color: var(--bond-on-dark); --bs-btn-hover-bg: var(--bond-petrol); --bs-btn-hover-border-color: var(--bond-petrol); --bs-btn-active-color: var(--bond-on-dark); --bs-btn-active-bg: var(--bond-petrol); --bs-btn-active-border-color: var(--bond-petrol); --bs-btn-disabled-color: var(--bond-petrol); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bond-border); } /* Witte pill op een donker vlak */ .btn-outline-light { --bs-btn-color: var(--bond-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bond-on-dark); --bs-btn-hover-color: var(--bond-petrol); --bs-btn-hover-bg: var(--bond-on-dark); --bs-btn-hover-border-color: var(--bond-on-dark); --bs-btn-active-color: var(--bond-petrol); --bs-btn-active-bg: var(--bond-on-dark); --bs-btn-active-border-color: var(--bond-on-dark); } .navbar-nav { --bs-nav-link-color: var(--bond-text); --bs-nav-link-hover-color: var(--bond-pink); --bs-navbar-active-color: var(--bond-petrol); } .table { --bs-table-bg: var(--bond-surface); } }