/* ========================================================================== SaSaa Shapes - ontwerpsysteem -------------------------------------------------------------------------- Dit is het ENIGE bestand dat je hoeft aan te passen om de hele site er anders uit te laten zien. Kleuren, lettertypes, maten en ronding staan hier allemaal als variabele. De rest van de CSS bevat nergens een losse kleurcode. Het uitgangspunt is de bruine kleur uit je logo, #76614B. Alle andere kleuren zijn daaromheen gekozen: warm en aards, met vijf accenten die uit je eigen garenkleuren komen. Geen blauw. De site is bewust alleen licht. Onderaan staat hoe je een donkere variant weer aanzet als je die ooit toch wilt. ========================================================================== */ :root { /* Vertelt de browser dat dit een lichte pagina is. Zonder deze regel maakt Windows in donkere modus de invoervelden en schuifbalken alsnog donker. */ color-scheme: light; /* --- De merkkleur ------------------------------------------------------ Deze komt uit je logo en is de ruggengraat van alles hieronder. */ --c-merk: #76614B; --c-merk-diep: #59493A; /* hover, en tekst op licht papier */ --c-merk-licht: #A08C74; /* --- Papier ------------------------------------------------------------ Warm en licht. De foto's moeten hier straks op zweven. */ --c-paper: #FCF9F3; --c-creme: #F5EDE0; --c-zand: #EADCC6; /* --- Inkt -------------------------------------------------------------- Donkerbruin in plaats van zwart, uit dezelfde familie als de merkkleur */ --c-ink: #3B2F24; --c-ink-2: #63543F; --c-ink-soft: #94806A; --c-op-donker: #FBF5EA; /* tekst op een donkere of gekleurde band */ /* --- Lijnen ------------------------------------------------------------ */ --c-line: #E3D5BF; --c-line-soft: #F0E7D7; /* --- Accenten ---------------------------------------------------------- Vijf kleuren uit je eigen kleurenkaart. Ze maken de site kleurrijk zonder rommelig te worden: elke band op de pagina krijgt er een. */ --c-terra: #C4623F; --c-terra-zacht: #F7E3D8; --c-oker: #D69B2D; --c-oker-zacht: #FAEFD5; --c-blush: #D4867F; --c-blush-zacht: #F9E8E4; --c-salie: #8A9A6B; --c-salie-zacht: #EAEEE0; --c-pruim: #96566A; --c-pruim-zacht: #F4E4E9; /* --- Accent dat knoppen en links stuurt --------------------------------- Standaard de merkkleur zelf. Wil je knallender, zet deze op var(--c-terra) en de hele site verandert mee. */ --c-accent: var(--c-merk); --c-accent-ink: var(--c-merk-diep); --c-accent-bg: var(--c-creme); /* --- Signaal en status -------------------------------------------------- */ --c-signal: #B0472A; --c-signal-bg: #F9E4DB; --c-ok: #6B7D4E; --c-ok-bg: #EBF0E1; --c-wacht: #96731C; --c-wacht-bg: #FAF1D8; /* --- Letters ----------------------------------------------------------- Twee families, net als bij de webshops waar dit op moet lijken. display : Outfit, een moderne geometrische letter met een vriendelijke ronde o. Koppen staan in KLEINE letters; dat is wat die sites vrolijk maakt zonder kinderachtig te worden. body : Figtree, rustig en warm, prettig over langere stukken tekst. Knoppen, menu en labels staan juist in HOOFDLETTERS met veel spatie. Wil je iets anders proberen, pas deze twee regels aan en de regel met Google Fonts bovenaan assets/css/base.css. */ --font-display: 'Outfit', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif; --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: clamp(26px, 3.2vw, 34px); --fs-2xl: clamp(32px, 4.8vw, 50px); --fs-3xl: clamp(40px, 6.6vw, 76px); --fs-4xl: clamp(34px, 7.4vw, 92px); /* alleen voor tekst op een foto */ --spatie-label: .16em; --lh-tight: 1.03; --lh-body: 1.66; /* --- Ruimte ------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 18px; --sp-5: 26px; --sp-6: 38px; --sp-7: 56px; --sp-8: 84px; --sp-9: 120px; --maat-breed: 1280px; --maat-tekst: 36em; /* --- Vorm --------------------------------------------------------------- */ --radius: 14px; --radius-groot: 24px; --radius-knop: 999px; --radius-rond: 999px; --rand: 1px solid var(--c-line); /* --- Schaduw ------------------------------------------------------------ */ --schaduw-zacht: 0 2px 12px rgba(70, 55, 40, .06); --schaduw-kop: 0 6px 24px rgba(70, 55, 40, .09); --schaduw-diep: 0 14px 40px rgba(70, 55, 40, .14); /* --- Beeldbanden -------------------------------------------------------- De volbeeldfoto's die over de hele breedte doorlopen. */ --band-hoog-mobiel: 64vh; --band-hoog: min(88vh, 760px); --band-scrim: .34; /* hoe donker de foto wordt onder witte tekst */ /* --- Achtergrondtextuur ------------------------------------------------- De breisteek op de achtergrond. Staat aan op de fijne maat van 48px, en daar leest hij als weefsel in plaats van als golfjes. De enige knop die je hier nodig hebt is zichtbaar: 0 helemaal uit .09 nauwelijks waarneembare korrel .12 zichtbaar weefsel, nog rustig om op te lezen <- staat nu .2 duidelijk motief, gaat afleiden bij lange stukken tekst Hoger dan .12 zou ik alleen doen op pagina's zonder veel tekst. De maat laat je het best staan: groter maakt er weer een patroon van. */ --textuur: url('/assets/img/textuur-koord.svg'); --textuur-maat: 48px; --textuur-zichtbaar: .12; /* --- Beweging ------------------------------------------------------------ */ --kort: .12s; --vloei: .26s cubic-bezier(.2, .7, .3, 1); --vloei-traag: .7s cubic-bezier(.2, .7, .3, 1); } /* ========================================================================== Donkere modus staat uit -------------------------------------------------------------------------- Wil je hem ooit toch, verwijder dan color-scheme: light hierboven en plak dit blok terug zonder de commentaartekens. @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --c-paper: #17120D; --c-creme: #211A13; --c-zand: #2C231A; --c-ink: #F3EADC; --c-ink-2: #DACBB6; --c-ink-soft: #A8957D; --c-line: #3B2F23; --c-line-soft: #2B2118; --c-merk: #B49A7C; --c-merk-diep: #D0BA9E; --textuur-zichtbaar: .1; } } ========================================================================== */