/* ========================================================================== Design tokens — Figma "Design System | PowerHuys", variabelen uit de collecties Foundation, Semantic, Typography en Components. Wordt in index.php vóór layout.css geladen. Alle maten in px. ========================================================================== */ :root { /* --- Kleuren — palet (Foundation / Colors) ----------------------------- */ /* Primary */ --primary: #0A332C; --primary-rgb: 10, 51, 44; /* Dark green 900 */ --primary-600: #54706B; /* Dark green 600 */ --primary-50: rgba(var(--primary-rgb), .5); /* Dark green 900-50 */ --primary-20: rgba(var(--primary-rgb), .2); /* Dark green 900-20 */ --secondary: #B3A16F; --secondary-rgb: 179, 161, 111; /* Gold */ --secondary-20: rgba(var(--secondary-rgb), .2); /* Gold subtle */ --secondary-light: #ECD28C; /* Eindtint goud-verloop op tekst (Webinar | Makelaar) */ --secondary-gradient-end: #D5BA70; /* Eindtint goud-verloop balk "Gemiddeld bereik" (Verkopers, Consument | Woning bereik) */ --gold-gradient-light: #EDD799; --gold-gradient-light-rgb: 237, 215, 153; --gold-gradient-dark: #796A41; /* Pitch Generator: lichte en donkere stop van het goudverloop (vaste waarden in Figma) */ --plattegrond-vlak: #F6F6F5; --plattegrond-tekst: #262626; --plattegrond-tekst-secundair: #666666; /* Pitch Generator dia 4: plattegrond-illustratie (vaste waarden in Figma) */ --pitch-laptop-licht: #D4D5D9; --pitch-laptop-donker: #8D8F94; /* Pitch Generator dia 8 en 12: onderkant van de laptop (gemeten op het beeld uit Figma) */ --tertiary: #FBF0E7; --tertiary-rgb: 251, 240, 231; /* Sand */ /* Secondary */ --green-700: #537567; --green-500: #C1D8C0; --green-500-rgb: 193, 216, 192; --green-200: #ECF3EC; --pink-700: #95495D; --pink-500: #E8849D; --pink-500-rgb: 232, 132, 157; --pink-200: #FAE6EB; /* Actions */ --error-600: #CA282B; --error-200: #F7DFDF; /* Error 600, Error 200 */ /* Neutrals */ --black: #000000; --black-rgb: 0, 0, 0; --white: #FFFFFF; --white-rgb: 255, 255, 255; --white-80: rgba(var(--white-rgb), .8); /* White-400 */ --white-20: rgba(var(--white-rgb), .2); /* Subtle white */ --white-10: rgba(var(--white-rgb), .1); /* Subtle white 2 */ /* App-store-knoppen (Figma "Store Button", Home > Download de PowerHuys app) */ --store-button-bg: #FDFDFD; --store-button-stroke: #DCDCDC; --store-button-text: #292929; /* --- Kleuren — semantisch (Semantic / Colors) -------------------------- */ --bg-default: var(--tertiary); --bg-secondary: var(--white); --bg-inverse: var(--primary); --bg-inverse-secondary: var(--white-10); --bg-inverse-tertiary: var(--primary-600); --bg-accent-primary: var(--secondary); --bg-accent-01: var(--pink-500); --bg-subtle-01: var(--pink-200); --bg-accent-02: var(--green-500); --bg-subtle-02: var(--green-200); --bg-error: var(--error-600); --bg-error-subtle: var(--error-200); --text-default: var(--primary); --text-secondary: var(--primary-600); --text-inverse: var(--white); --text-inverse-secondary: var(--white-80); --text-link: var(--secondary); --text-accent-primary: var(--secondary); --text-accent-01: var(--pink-500); --text-accent-01-dark: var(--pink-700); --text-accent-02: var(--green-500); --text-accent-02-dark: var(--green-700); --text-error: var(--error-600); --icon-default: var(--primary); --icon-secondary: var(--primary-600); --icon-inverse: var(--white); --icon-inverse-secondary: var(--white-80); --icon-accent-primary: var(--secondary); --icon-ellipse: var(--secondary-20); --icon-accent-01: var(--pink-500); --icon-subtle-01: var(--pink-200); /* Accent-01: gevuld hartje, interesse-iconen */ --icon-accent-02: var(--green-500); --icon-subtle-02: var(--green-200); --icon-error: var(--error-600); --icon-error-subtle: var(--error-200); --kanaal-social: #A8CBA6; --kanaal-funda: #F5A02C; /* Kanalen "Social media" en "Funda" in de dashboards van de casuspagina (vaste kleuren in Figma) */ /* Deelpagina (Figma "Social media share | Powerhuys"): merkkleuren van de kanalen en de kleuren van de nagemaakte berichten in WhatsApp, Instagram, Facebook, LinkedIn en de mail (vaste kleuren in Figma) */ --kanaal-whatsapp: #00E510; --kanaal-linkedin: #007EBB; --kanaal-instagram: linear-gradient(45deg, #FAAD4F 14.61%, #DD2A7B 39.38%, #9537B0 58.49%, #515BD4 85.39%); --deel-voorbeeld-bg: #F2E3D4; /* vlak achter het voorbeeld op de deelkaart */ --deel-avatar: #C49C84; --deel-wa-bubbel: #D0FECF; --deel-wa-rand: rgba(var(--black-rgb), .06); --deel-wa-doorsturen: #B2B2B2; --deel-wa-bijlage: rgba(10, 10, 10, .04); --deel-wa-tekst: #0A0A0A; --deel-wa-tekst-secundair: rgba(var(--black-rgb), .5); --deel-wa-link: #1C8854; --deel-ig-tekst-secundair: #6E6E6E; --deel-igs-link: #0098FD; --deel-igs-rand: rgba(var(--white-rgb), .5); --deel-igs-timer: rgba(var(--white-rgb), .4); --deel-fb-tekst: #050505; --deel-fb-tekst-secundair: #65676B; --deel-fb-vlak: #F0F2F5; --deel-fb-lijn: #E4E6EB; --deel-li-tekst-secundair: #666666; --deel-li-vlak: #EEF3F8; --deel-li-lijn: #E8E8E8; /* Online offerte /portaal (voorbeeld "Voorstel · Meerzichtlaan 87" van de collega; tijdelijk eigen ontwerp) */ --portaal-goud-donker: #7A6A3E; --portaal-lijn: #E9DED0; --portaal-vlak: #FBF6F0; --portaal-zacht: #3F4F4B; --deel-mail-tekst: #14171A; --deel-mail-balk: #F0F2F5; --deel-mail-bolletje: #D0D3D8; --stroke-default: var(--primary-50); --stroke-secondary: var(--primary-20); --stroke-inverse: var(--white-20); --stroke-inverse-secondary: var(--white); --stroke-accent-primary: var(--secondary); --stroke-accent-01: var(--pink-500); --stroke-accent-02: var(--green-500); --stroke-error: var(--error-600); --shadow-default: var(--primary-50); /* Colors/Shadow/Default (effect-kleur, o.a. stempel) */ /* Schaduwen: Figma heeft geen effect-styles; dit zijn de drop shadows die in de ontwerpen terugkomen. Figma "blur" = box-shadow blur; bij filter: drop-shadow() de helft nemen. */ --shadow-card: 0 2px 16px rgba(var(--black-rgb), .25); /* Woning card, CTA blok */ --shadow-float: 0 4px 16px rgba(var(--black-rgb), .25); /* zwevend: zoekblok, popups, formulierkaarten, footer-logo, kaartmarker */ --shadow-primary: 0 4px 16px rgba(var(--primary-rgb), .25); /* TopBar Web (menubalk) */ --shadow-control: 0 2px 16px rgba(var(--primary-rgb), .25); /* Filter-knop, Zoom-knoppen op de kaart */ --shadow-label: 0 4px 8px rgba(var(--black-rgb), .25); /* Label/Beschikbaar, Sneak Preview, Verkocht */ --shadow-label-filter: 0 4px 4px rgba(var(--black-rgb), .25); /* zelfde schaduw als filter: drop-shadow() (halve blur) */ --shadow-stap: 0 4px 8px rgba(var(--primary-rgb), .25); /* Verkoopstatus: actieve stap (Sneak preview woningpagina) */ --shadow-pin: 0 2px 4px rgba(var(--black-rgb), .25); /* Aanbod kaart: cluster-pin met aantal ("Pins") */ --shadow-lg: 0 2px 30px rgba(var(--black-rgb), .25); /* Link-kaarten (FAQ, Kopers/Verkopers), reviewkaarten */ --shadow-paneel: 0 24px 48px -8px rgba(var(--primary-rgb), .1); /* (Ver)koophulp: inzichtenpaneel ("Inzichtkaarten") */ --shadow-focus: 0 0 0 3px var(--primary-20); /* focusring op formuliervelden */ --shadow-modal: 0 24px 40px rgba(var(--black-rgb), .25); /* voorbeeldplanner in de tool-pop-up (Bezichtiging inplannen) */ --shadow-knop: 0 3px 8px rgba(var(--black-rgb), .15); /* Toggle "knob" (Notificatie instellingen) */ --shadow-deel-modal: 0 30px 80px -10px rgba(var(--black-rgb), .3); /* Deelpagina: modal "Bekijk ..." */ --shadow-deel-voorbeeld: 0 4px 24px -10px rgba(var(--primary-rgb), .18); /* Deelpagina: nagemaakt bericht (Facebook, LinkedIn, mail) */ --shadow-deel-voorbeeld-filter: 0 4px 6px rgba(var(--primary-rgb), .18); /* idem als drop-shadow (WhatsApp-bubbel, Instagram) */ /* --- Afmetingen (Semantic / Dimensions) -------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px; /* Border radius/Xlarge */ --radius-kaartlabel: 12px; /* Kantoorlabel op de kaart (Kantoorprofiel, Figma "Frame 440"; vaste waarde in Figma) */ --radius-checkbox: 6px; /* Checkbox (vaste waarde in Figma) */ --radius-pitch-knop: 10px; --radius-pitch-tegel: 12px; --radius-pitch-kaart: 13px; /* Pitch Generator: chatknop, tegels en rekenstappen, woningkaart (vaste waarden in Figma) */ --radius-deel: 10px; --radius-deel-klein: 6px; --radius-deel-vak: 12px; /* Deelpagina: nagemaakte berichten, bijlage, kopieervak (vaste waarden in Figma) */ --padding-none: 0; --padding-small-100: 4px; --padding-small-200: 8px; --padding-small-300: 12px; --padding-small-400: 16px; --padding-medium-100: 24px; --padding-medium-200: 32px; --padding-medium-300: 40px; --padding-large-100: 48px; --padding-large-200: 64px; --padding-large-300: 80px; --padding-large-400: 120px; --padding-xlarge-200: 200px; --icon-size-small: 16px; --icon-size-medium: 20px; --icon-size-default: 24px; --icon-size-large: 32px; --icon-size-xlarge: 40px; /* --- Typografie (Typography, mode Desktop) ------------------------------ Eén familie: Zalando Sans (breedte 75-125, gewicht 200-900, index.php). De Display-stijlen zijn in Figma smal: wdth 75. */ --font-primary: "Zalando Sans", sans-serif; /* Display: eigen versie van de designers met kleinere letterafstand. Zolang dat bestand er niet is, valt dit terug op Zalando Sans in de smalste breedte (--font-display-stretch). */ --font-display: "Zalando Sans Condensed", "Zalando Sans", sans-serif; --font-display-stretch: 75%; /* Gewichten = de Font weight-variabelen: Display Condensed SemiBold, Headline Medium, Body Regular, Label Medium. Title heeft geen gewicht-variabele; de stijlen "Title" zijn Medium. "Label" (Regular) gebruikt in Figma het Body-gewicht. */ --font-weight-display: 600; --font-weight-headline: 500; --font-weight-title: 500; --font-weight-body: 400; --font-weight-label: 500; --font-weight-bold: 700; /* Stempel deelpagina (Figma: Zalando Sans Bold, breedte 75) */ /* Nagemaakte berichten op de deelpagina: in Figma SF Pro en Inter (lettertypes van de apps), hier het systeemlettertype */ --font-sociaal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display-xl-size: 80px; --display-xl-line: 80px; --display-lg-size: 64px; --display-lg-line: 64px; --display-md-size: 48px; --display-md-line: 48px; /* Display Regular */ --display-sm-size: 32px; --display-sm-line: 32px; --display-xs-size: 24px; --display-xs-line: 24px; --display-404-size: 240px; /* Cijfer "404" (Figma "404 pagina" 3648:38443): Display-stijl op 240 */ --headline-lg-size: 32px; --headline-lg-line: 32px; --headline-md-size: 24px; --headline-md-line: 28.8px; --headline-sm-size: 18px; --headline-sm-line: 21.6px; --headline-xs-size: 16px; --headline-xs-line: 21.6px; /* Title: in Figma alleen tekststijlen (Medium) op de Body-variabelen, dus mobiel schaalt mee met Body */ --title-lg-size: var(--body-lg-size); --title-lg-line: var(--body-lg-line); --title-default-size: var(--body-default-size); --title-default-line: var(--body-default-line); --title-sm-size: var(--body-sm-size); --title-sm-line: var(--body-sm-line); --body-lg-size: 24px; --body-lg-line: 31.2px; --body-default-size: 18px; --body-default-line: 23.4px; --body-sm-size: 16px; --body-sm-line: 18.2px; --body-xs-size: 14px; --body-xs-line: 16.8px; --label-lg-size: 24px; --label-lg-line: 24px; --label-default-size: 18px; --label-default-line: 18px; --label-sm-size: 16px; --label-sm-line: 16px; --label-xs-size: 14px; --label-xs-line: 14px; /* --- Componenten (Components) ------------------------------------------ */ --input-font-size: 16px; --input-height: 48px; --input-icon-size: var(--icon-size-default); --input-padding-h: var(--padding-small-400); --button-text-icon-size: var(--icon-size-default); /* --- Layout ------------------------------------------------------------ */ --header-links-height: 40px; --header-height: 128px; /* linkregel 40 + balk 72 + 16 eronder */ --mk-padding: 80px; /* Sectie- en zijpadding makelaarskant (Padding/Large-300) */ /* --- Bootstrap 5.3 theme hooks ----------------------------------------- */ --bs-body-font-family: var(--font-primary); --bs-body-color: var(--text-default); --bs-body-bg: var(--white); --bs-heading-color: var(--text-default); --bs-link-color: var(--text-default); --bs-link-hover-color: var(--pink-700); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-lg); --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-secondary: var(--secondary); --bs-secondary-rgb: var(--secondary-rgb); --bs-success: var(--green-700); --bs-danger: var(--pink-700); --bs-light: var(--tertiary); --bs-dark: var(--primary); } /* Typography, mode Mobile */ @media (max-width: 767.98px) { :root { --display-xl-size: 40px; --display-xl-line: 48px; --display-lg-size: 32px; --display-lg-line: 38.4px; --display-md-size: 24px; --display-md-line: 28.8px; --display-sm-size: 18px; --display-sm-line: 21.6px; --display-xs-size: 16px; --display-xs-line: 19.2px; --display-404-size: 120px; --headline-lg-size: 24px; --headline-lg-line: 28.8px; --headline-md-size: 20px; --headline-md-line: 24px; --headline-sm-size: 16px; --headline-sm-line: 19.2px; --headline-xs-size: 14px; --headline-xs-line: 19.2px; --body-lg-size: 18px; --body-lg-line: 23.4px; --body-default-size: 16px; --body-default-line: 20.8px; --body-sm-size: 14px; --body-sm-line: 18.2px; --body-xs-size: 12px; --body-xs-line: 14.4px; --label-lg-size: 18px; --label-lg-line: 18px; --label-default-size: 16px; --label-default-line: 16px; --label-sm-size: 14px; --label-sm-line: 14px; --label-xs-size: 12px; --label-xs-line: 12px; --input-font-size: 16px; --input-height: 44px; --input-icon-size: var(--icon-size-medium); --input-padding-h: var(--padding-small-300); /* font 16 i.p.v. Figma 14: iOS zoomt in op velden onder 16px */ --button-text-icon-size: var(--icon-size-medium); --header-links-height: 0px; --header-height: 104px; /* 16 + balk 72 + 16 */ --mk-padding: 48px; } }