/* ============================================================ Doornbos Agribusiness — Design System Shared stylesheet for all pages. Link it in : Also load the fonts (see design-guidelines.md). ============================================================ */ /* ---- Design tokens ---- */ :root{ /* Surfaces & text */ --bg: oklch(0.982 0.008 95); /* warm off-white page bg */ --surface: #ffffff; /* cards / panels */ --ink: oklch(0.26 0.02 150); /* primary text */ --muted: oklch(0.5 0.02 150); /* secondary text */ --line: oklch(0.9 0.01 120); /* hairline borders */ --hover: oklch(0.96 0.015 140); /* row hover wash */ /* Brand greens */ --rail-bg: oklch(0.34 0.055 155); /* deep forest (dark panels) */ --rail-fg: oklch(0.96 0.01 120); --rail-muted: oklch(0.85 0.02 130); --accent: oklch(0.4 0.075 155); /* interactive green */ --accent-bright: oklch(0.72 0.11 130); /* logo mark / highlights */ /* Type */ --font-sans: 'Libre Franklin', system-ui, -apple-system, sans-serif; --font-serif:'Newsreader', Georgia, 'Times New Roman', serif; /* Spacing rhythm */ --pad-page: clamp(28px, 4vw, 56px); --radius: 12px; } /* ---- Base reset ---- */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--ink); font-family:var(--font-sans); line-height:1.5; -webkit-font-smoothing:antialiased; } a{-webkit-tap-highlight-color:transparent;} /* ---- Typography ---- */ .h-display{ font-family:var(--font-serif); font-weight:400; font-size:clamp(38px,4.6vw,58px); line-height:1.02; letter-spacing:-.01em; margin:0 0 22px; } .h-title{ font-size:clamp(24px,3vw,38px); font-weight:700; letter-spacing:-.02em; margin:0 0 14px; } .h-section{ font-size:clamp(20px,2.3vw,26px); font-weight:700; letter-spacing:-.015em; margin:0 0 10px; } .eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .tag{ font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .prose{font-size:15.5px;line-height:1.65;color:var(--muted);max-width:60ch;} .muted{color:var(--muted);} /* ---- Layout helpers ---- */ .container{max-width:1120px;margin:0 auto;padding:0 var(--pad-page);} .section{padding:clamp(48px,7vw,88px) 0;} /* ---- Brand mark ---- */ .brand{display:flex;align-items:center;gap:12px;} .brand-mark{width:30px;height:30px;background:var(--accent-bright);border-radius:7px;flex:none;} .brand-name{font-weight:700;letter-spacing:.15em;font-size:12px;text-transform:uppercase;} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-sans);font-size:14px;font-weight:600; padding:13px 22px;border-radius:999px;text-decoration:none;cursor:pointer; border:1.5px solid var(--accent); transition:background .18s ease,color .18s ease,transform .18s ease; } .btn-primary{background:var(--accent);color:#fff;} .btn-primary:hover{transform:translateY(-2px);} .btn-ghost{background:transparent;color:var(--accent);} .btn-ghost:hover{background:var(--accent);color:#fff;} /* ---- Circular arrow (link affordance) ---- */ .arrow{ flex:none;width:44px;height:44px;border-radius:50%; border:1.5px solid var(--accent);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:19px; transition:background .18s ease,color .18s ease; } /* ---- Card ---- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,42,34,.13);border-color:var(--accent);} /* ---- List rows (used on the landing / redirect page) ---- */ .list-row{ display:flex;align-items:center;justify-content:space-between;gap:24px; text-decoration:none;color:inherit; padding:30px var(--pad-page); border-top:1px solid var(--line); transition:background .18s ease,padding-left .18s ease; } .list-row:last-of-type{border-bottom:1px solid var(--line);} .list-row:hover{background:var(--hover);padding-left:clamp(36px,4.8vw,66px);} .list-row:hover .arrow{background:var(--accent);color:#fff;} /* ---- Split layout (rail + content) ---- */ .split{display:flex;flex-wrap:wrap;min-height:100vh;} .rail{ flex:1 1 380px; background:var(--rail-bg);color:var(--rail-fg); padding:56px 52px; display:flex;flex-direction:column;justify-content:space-between;gap:48px; min-height:100vh; } .rail .prose{color:var(--rail-muted);max-width:320px;} .rail .h-display{color:var(--rail-fg);} .split-body{ flex:1.7 1 520px; display:flex;flex-direction:column;justify-content:center; padding:32px 0; } /* ---- Simple header / footer for content pages ---- */ .site-header{ display:flex;align-items:center;justify-content:space-between; padding:22px var(--pad-page);border-bottom:1px solid var(--line); } .site-header nav{display:flex;gap:26px;} .site-header nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;} .site-header nav a:hover{color:var(--accent);} .site-footer{ border-top:1px solid var(--line); padding:28px var(--pad-page); display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; font-size:12.5px;color:var(--muted); } .site-footer a{color:var(--accent);text-decoration:none;font-weight:600;} /* ---- List-row internals (landing page) ---- */ .list-eyebrow{padding:0 var(--pad-page) 8px;} .list-row .tag{margin-bottom:9px;} .list-row p{font-size:14px;margin:0;} /* ---- Rail contact block ---- */ .rail-contact{font-size:12.5px;line-height:1.7;color:var(--rail-muted);} .rail-contact .label{opacity:.7;margin-bottom:3px;letter-spacing:.04em;} .rail-contact .email{color:#fff;text-decoration:none;font-weight:600;} .rail-contact .email:hover{text-decoration:underline;} .rail-contact .kvk{margin-top:16px;opacity:.7;} .rail-contact .kvk span{opacity:.7;} .rail-contact .copyright{margin-top:16px;opacity:.55;font-size:11.5px;} /* ---- Centered contact page (Klepelen, Loonwerk) ---- */ .contact-page{ min-height:100vh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center; padding:64px var(--pad-page); } .contact-inner{max-width:540px;width:100%;} .brand.brand-center{justify-content:center;margin-bottom:40px;} .prose.prose-center{margin:0 auto;} .contact-list{display:flex;flex-direction:column;gap:14px;margin-top:40px;} .contact-row{ display:flex;align-items:center;justify-content:space-between;gap:20px; text-decoration:none;color:inherit;text-align:left; padding:20px 24px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .contact-row:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,42,34,.12);border-color:var(--accent);} .contact-row:hover .arrow{background:var(--accent);color:#fff;} .contact-row .tag{margin-bottom:6px;} .contact-value{font-size:clamp(17px,2vw,20px);font-weight:700;letter-spacing:-.01em;} .meta{ display:flex;justify-content:center;gap:22px;flex-wrap:wrap; margin-top:32px;font-size:12.5px;color:var(--muted); } .meta strong{color:var(--ink);font-weight:600;} /* ---- Responsive ---- */ @media (max-width:760px){ .rail{min-height:auto;padding:44px 32px;} .split-body{padding:8px 0 24px;} .site-header nav{gap:16px;} }