/* ========================================================================== DuraTerra — Global stylesheet Real brand system, sourced from the DuraTerra Design System (tokens/*.css). Poppins is loaded via in each page's , not @import here. ========================================================================== */ :root{ /* ---- Real brand palette (see tokens/colors.css in the design system) ---- */ --paper: #f2f5f3; /* --dt-mint-50 */ --paper-soft: #eef2ef; /* --dt-neutral-100 */ --ink: #14201b; /* --dt-neutral-900 */ --ink-soft: #4b5a54; /* --dt-neutral-600 */ --loam: #1e513a; /* --dt-green-900, primary brand green */ --loam-soft: #204631; /* --dt-green-800 */ --line: rgba(20,32,27,0.12); --line-dark: rgba(242,245,243,0.16); --green: #2e743f; /* --dt-green-700, secondary */ --green-bright: #41b981; /* --dt-green-400, mint accent */ --teal: #018e86; /* --dt-teal-600 */ --gold: #e8e7b0; /* deck gold — carries every number, step heading and emphasis line, per the design system's own convention */ --gold-fill: #e6c164; /* --dt-gold-500 — reserved for carbon/finance callout fills, distinct from the text gold above */ --flag: #b8722e; /* utility colour for the site's own "data pending" markers — not part of the DuraTerra brand palette */ --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease: cubic-bezier(.4,0,.2,1); --max: 1280px; } /* ---- Reset ---- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4,p{ margin: 0; } button{ font-family: inherit; cursor: pointer; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } /* ---- Type scale ---- */ .eyebrow{ font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--green); } .dark .eyebrow{ color: var(--green-bright); } h1, .h1{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(40px, 7vw, 96px); } h2, .h2{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(30px, 4.4vw, 58px); } h3, .h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; font-size: clamp(21px, 2.4vw, 28px); } .lede{ font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-soft); font-weight: 400; } p.body{ font-size: 16px; line-height: 1.7; color: var(--ink-soft); } .dark p.body, .dark .lede{ color: rgba(246,244,238,0.72); } /* ---- Buttons ---- */ .btn{ display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-size: 15px; font-weight: 600; border: 1px solid transparent; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--ink); color: var(--paper); } .btn-primary:hover{ background: var(--green); } .dark .btn-primary{ background: var(--paper); color: var(--loam); } .dark .btn-primary:hover{ background: var(--gold-fill); } .btn-ghost{ border-color: var(--line); color: var(--ink); } .dark .btn-ghost{ border-color: var(--line-dark); color: var(--paper); } .btn-ghost:hover{ border-color: var(--green-bright); } .btn-arrow{ transition: transform .25s var(--ease); } .btn:hover .btn-arrow{ transform: translateX(3px); } /* ---- Nav ---- */ .nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; transition: background .35s var(--ease), border-color .35s var(--ease), padding .35s var(--ease); border-bottom: 1px solid transparent; } .nav.solid{ background: rgba(246,244,238,0.86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-color: var(--line); padding: 12px 0; } .nav .wrap{ display: flex; align-items: center; justify-content: space-between; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-0.01em; color: var(--paper); } .nav.solid .brand{ color: var(--ink); } .brand-mark{ width: 22px; height: 22px; flex-shrink:0; } .brand-logo{ height: 26px; width: auto; display:block; } .brand-logo.on-dark{ display:block; } .brand-logo.on-light{ display:none; } .nav.solid .brand-logo.on-dark{ display:none; } .nav.solid .brand-logo.on-light{ display:block; } .nav-links{ display:flex; gap: 26px; align-items:center; } .nav-links a{ font-size: 14px; font-weight: 500; color: rgba(246,244,238,0.82); position: relative; padding: 4px 0; } .nav.solid .nav-links a{ color: var(--ink-soft); } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); transform-origin: left; } .nav-links a.active{ color: var(--paper); font-weight: 600; } .nav.solid .nav-links a.active{ color: var(--ink); } .nav-cta{ display:flex; align-items:center; gap:18px; } .nav-cta .btn{ padding: 10px 22px; font-size: 13.5px; } .nav-cta .btn-ghost{ border-color: rgba(246,244,238,0.4); color: var(--paper); } .nav.solid .nav-cta .btn-ghost{ border-color: var(--line); color: var(--ink); } .burger{ display:none; width:40px; height:40px; border:none; background:none; position:relative; z-index: 1200; } .burger span{ display:block; width:22px; height:2px; background: var(--paper); margin: 5px auto; transition: all .3s var(--ease); } .nav.solid .burger span{ background: var(--ink); } .burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .burger.open span{ background: var(--paper); } .mobile-menu{ position: fixed; inset: 0; background: var(--loam); z-index: 1100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 28px; opacity:0; pointer-events:none; transition: opacity .35s var(--ease); } .mobile-menu.open{ opacity:1; pointer-events:auto; } .mobile-menu a{ font-size: 28px; color: var(--paper); font-weight:600; letter-spacing:-0.01em; } /* ---- Sections ---- */ section{ position: relative; } .section{ padding: clamp(72px, 12vw, 160px) 0; } .section-tight{ padding: clamp(48px, 8vw, 96px) 0; } .dark{ background: var(--loam); color: var(--paper); } .soft{ background: var(--paper-soft); } .center{ text-align:center; } .hero{ min-height: 100vh; display:flex; flex-direction:column; justify-content:center; position: relative; overflow:hidden; background: linear-gradient(135deg, #1e513a 0%, #018e86 100%); color: var(--paper); } .hero-sub{ min-height: 66vh; display:flex; flex-direction:column; justify-content:center; background: linear-gradient(135deg, #1e513a 0%, #018e86 100%); color: var(--paper); padding-top: 100px; } .hero .wrap, .hero-sub .wrap{ position: relative; z-index: 2; } .hero-tag{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-dark); border-radius:100px; padding: 7px 16px; font-size:13px; color: rgba(246,244,238,0.78); margin-bottom: 26px; width: fit-content; } .hero-tag .dot{ width:6px; height:6px; border-radius:50%; background: var(--green-bright); } .hero h1{ max-width: 15ch; } .hero .lede{ max-width: 46ch; margin-top: 22px; } .hero-actions{ display:flex; gap:16px; margin-top: 40px; flex-wrap: wrap; } .hero-scroll{ position:absolute; bottom: 36px; left:0; right:0; display:flex; justify-content:center; color: rgba(246,244,238,0.5); font-size:12px; letter-spacing:.1em; text-transform:uppercase; flex-direction:column; align-items:center; gap:10px; } .hero-scroll .line{ width:1px; height:34px; background: linear-gradient(var(--green-bright), transparent); animation: scrolldown 1.8s infinite; } @keyframes scrolldown{ 0%{opacity:0; transform: translateY(-6px);} 40%{opacity:1;} 100%{opacity:0; transform: translateY(14px);} } /* soil-field backdrop texture used on hero sections */ .field-lines{ position:absolute; inset:0; opacity:.35; z-index:1; pointer-events:none; } /* ---- Grid / layout helpers ---- */ .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items:center; } .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 900px){ .grid-2{ grid-template-columns: 1fr; } .grid-3{ grid-template-columns: 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } } .kicker-row{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .kicker-row .rule{ width:32px; height:1px; background: var(--green); } .dark .kicker-row .rule{ background: var(--green-bright); } /* ---- Centred title rule (deck convention: short gold underline beneath a centred title) ---- */ .title-rule{ display:block; width:124px; height:3px; border-radius:2px; background: var(--green); margin:20px auto 0; } .dark .title-rule{ background: var(--gold); } .center .title-rule{ margin-left:auto; margin-right:auto; } /* ---- Cards ---- */ .card{ background: var(--paper); border:1px solid var(--line); border-radius: 14px; padding: 34px; transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .dark .card{ background: var(--loam-soft); border-color: var(--line-dark); } .card:hover{ transform: translateY(-4px); border-color: var(--green-bright); box-shadow: var(--dt-shadow-md, 0 4px 12px rgba(20,32,27,0.10)); } .card .icon{ width:44px; height:44px; margin-bottom:22px; } .card h3{ margin-bottom: 12px; } .card p{ font-size:15px; line-height:1.65; color: var(--ink-soft); } .dark .card p{ color: rgba(246,244,238,0.68); } .card a.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:20px; font-size:14px; font-weight:600; color: var(--green); } .dark .card a.card-link{ color: var(--gold); } /* ---- Icon badge (real white line-icon set: always white, always on brand green) ---- */ .icon-badge{ width: 56px; height: 56px; border-radius: 14px; background: var(--loam); display:flex; align-items:center; justify-content:center; margin-bottom: 22px; flex-shrink: 0; } .icon-badge img{ width: 28px; height: 28px; object-fit: contain; } .icon-badge.teal{ background: var(--teal); } /* Brand rule: the white line-icon set only ever appears on green/teal or directly over photography — never on gold or light fills. */ .card-photo{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; margin-bottom:22px; } .audience-card{ position:relative; border-radius:16px; overflow:hidden; padding: 40px 32px; min-height: 340px; display:flex; flex-direction:column; justify-content:flex-end; color: var(--paper); border: 1px solid var(--line-dark); transition: transform .3s var(--ease); } .audience-card:hover{ transform: translateY(-6px); } .audience-card .bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; } .audience-card .bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,32,27,0.15) 0%, rgba(20,32,27,0.88) 100%); } .audience-card .content{ position:relative; z-index:2; } .audience-card .eyebrow{ color: rgba(246,244,238,0.7); } .audience-card h3{ color: var(--paper); margin: 10px 0 12px; font-size: 26px; } .audience-card p{ color: rgba(246,244,238,0.78); font-size:14.5px; line-height:1.6; } .audience-card .card-link{ margin-top:18px; color: var(--paper); font-weight:600; font-size:14px; display:inline-flex; gap:6px; align-items:center; } /* ---- Stat / placeholder callouts ---- */ .stat-row{ display:flex; gap: clamp(24px,5vw,64px); flex-wrap:wrap; } .stat{ min-width: 140px; } .stat .num{ font-family: var(--font-display); font-size: clamp(32px,4vw,48px); font-weight:700; color: var(--green); letter-spacing:-0.02em; } .dark .stat .num{ color: var(--gold); } .stat .label{ font-size: 13px; color: var(--ink-soft); margin-top:6px; } .dark .stat .label{ color: rgba(246,244,238,0.6); } .data-pending{ display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; font-weight: 600; letter-spacing:.03em; color: var(--flag); border: 1px dashed var(--flag); border-radius: 100px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; } /* ---- Big quote ---- */ .quote{ max-width: 18ch; margin: 0 auto; text-align:center; } .quote q{ font-family: var(--font-display); font-weight:600; font-size: clamp(26px,4vw,44px); line-height:1.25; letter-spacing:-0.02em; } .quote cite{ display:block; margin-top:26px; font-style:normal; font-size:14px; color: var(--ink-soft); } .dark .quote cite{ color: rgba(246,244,238,0.6); } /* ---- Diagram / visuals ---- */ .visual-frame{ border-radius: 16px; overflow:hidden; border:1px solid var(--line); background: var(--paper-soft); aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; padding: 24px; } .visual-frame img{ max-width: 82%; max-height: 82%; object-fit: contain; } .dark .visual-frame{ background: var(--loam-soft); border-color: var(--line-dark); } /* ---- Real photography frame ---- */ .photo-frame{ border-radius: 16px; overflow:hidden; border:1px solid var(--line); aspect-ratio: 4/3; position: relative; } .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; } .photo-frame.wide{ aspect-ratio: 16/9; } .photo-frame.tall{ aspect-ratio: 3/4; } .photo-frame .tint{ position:absolute; inset:0; background: linear-gradient(160deg, rgba(30,81,58,0.55), rgba(1,142,134,0.35)); } /* ---- Steps ---- */ .step{ display:flex; gap:22px; padding: 26px 0; border-top:1px solid var(--line); } .dark .step{ border-color: var(--line-dark); } .step:last-child{} .step .num{ font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--green); min-width: 40px; } .dark .step .num{ color: var(--gold); } .step h4{ font-size:18px; font-weight:600; margin-bottom:6px; } .step p{ font-size:15px; color: var(--ink-soft); line-height:1.6; } .dark .step p{ color: rgba(246,244,238,0.68); } /* ---- Footer ---- */ footer{ background: var(--loam); color: var(--paper); padding: 72px 0 28px; } .footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); } .footer-brand p{ color: rgba(246,244,238,0.62); font-size:14px; line-height:1.6; margin-top:14px; max-width: 32ch; } .footer-col h5{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color: rgba(246,244,238,0.5); margin-bottom:16px; } .footer-col a{ display:block; font-size:14.5px; color: rgba(246,244,238,0.82); margin-bottom:12px; transition: color .2s; } .footer-col a:hover{ color: var(--gold); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 24px; flex-wrap:wrap; gap:12px; } .footer-bottom p{ font-size:12.5px; color: rgba(246,244,238,0.45); } .acknowledgement{ font-size: 12.5px; color: rgba(246,244,238,0.55); max-width: 62ch; margin-top: 18px; line-height:1.6; } @media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } .burger{ display:block; } .nav-links, .nav-cta .btn-ghost{ display:none; } } @media (max-width: 860px){ .nav-links{ display:none; } .nav-cta{ display:none; } .burger{ display:block; } } .mobile-menu .btn{ margin-top: 10px; } /* ---- Reveal on scroll ---- */ [data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].in{ opacity:1; transform: translateY(0); } [data-reveal="scale"]{ transform: scale(.96); } [data-reveal="scale"].in{ transform: scale(1); } /* ---- Page header (non-hero pages) ---- */ .page-eyebrow{ color: var(--green-bright); } /* ---- Utility ---- */ .mt-8{ margin-top: 8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; } .mt-64{ margin-top:64px; } .muted{ color: var(--ink-soft); } .tag{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.03em; padding: 5px 12px; border-radius: 100px; background: rgba(53,96,63,0.1); color: var(--green); } .dark .tag{ background: rgba(230,193,100,0.16); color: var(--gold); }