/* ========================================================================== Base — design tokens, resets, typography, utility classes, buttons ========================================================================== */ /* Design tokens (radius, shadow, motion, spacing rhythm). Brand colors (--jat-primary etc.) are injected inline in from Customizer values — see inc/customizer.php jat_dynamic_color_vars(). */ :root { --jat-radius-sm: 6px; --jat-radius-md: 12px; --jat-radius-lg: 20px; --jat-radius-pill: 999px; --jat-shadow-sm: 0 2px 10px rgba(22, 30, 24, 0.06); --jat-shadow-md: 0 16px 40px rgba(22, 30, 24, 0.10); --jat-shadow-lg: 0 28px 64px rgba(22, 30, 24, 0.16); --jat-ease: cubic-bezier(0.4, 0, 0.2, 1); --jat-duration: 0.28s; --jat-section-padding: clamp(4.5rem, 8vw, 6.5rem); /* Custom line-icon set (leaf, truck, cup, globe) — replaces emoji glyphs. Used via mask-image so icon color follows `color` (currentColor). */ --jat-icon-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021c-4.5-1-8-4.8-8-10%200-3%201.5-6%204-8%203%200%206%201.5%208%204%202.5%202.5%203%206%202%209-1.5%204-4%205-6%205z%22/%3E%3Cpath%20d%3D%22M8%2016c2-3%204.5-6%209-9%22/%3E%3C/svg%3E"); --jat-icon-truck: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%206.5h11v10H2z%22/%3E%3Cpath%20d%3D%22M13%2010h4l3%203v3.5h-7z%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.6%22/%3E%3C/svg%3E"); --jat-icon-cup: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h13v6a5%205%200%200%201-5%205H9a5%205%200%200%201-5-5z%22/%3E%3Cpath%20d%3D%22M17%209.2h1.3a2.3%202.3%200%200%201%200%204.6H17%22/%3E%3Cpath%20d%3D%22M8%204.2c-.6.6-.6%201.4%200%202M12%204.2c-.6.6-.6%201.4%200%202%22/%3E%3C/svg%3E"); --jat-icon-globe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M3%2012h18%22/%3E%3Cpath%20d%3D%22M12%203c2.8%202.5%204.2%205.7%204.2%209s-1.4%206.5-4.2%209c-2.8-2.5-4.2-5.7-4.2-9s1.4-6.5%204.2-9z%22/%3E%3C/svg%3E"); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body { font-family: 'Lora', serif; font-weight: 400; font-size: 16px; color: var(--jat-text, #222222); background: var(--jat-background, #F7F4EE); line-height: 1.65; overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--jat-primary, #163A24); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); } h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); } h3 { font-size: 1.3rem; letter-spacing: -0.005em; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; transition: color var(--jat-duration) var(--jat-ease), opacity var(--jat-duration) var(--jat-ease); } img { max-width: 100%; display: block; } ul { list-style: none; margin: 0; padding: 0; } ::selection { background: var(--jat-accent, #B58A3C); color: #fff; } /* Accessible, visible focus ring — never remove focus outlines outright */ :focus-visible { outline: 2px solid var(--jat-accent, #B58A3C); outline-offset: 3px; border-radius: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .jat-skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 10px 16px; border-radius: 0 0 var(--jat-radius-sm) 0; z-index: 10000; } .jat-skip-link:focus { left: 10px; top: 10px; } /* Honeypot field (inc/anti-spam.php) — off-screen rather than display:none/visibility:hidden, which some bots specifically detect and skip filling in. */ .jat-hp-wrap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .jat-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .jat-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jat-secondary, #6F4E37); font-weight: 700; margin-bottom: 0.75em; } .jat-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--jat-accent, #B58A3C); border-radius: 2px; } .jat-eyebrow-light { color: var(--jat-accent, #B58A3C); } .jat-section-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 2.75rem; flex-wrap: wrap; } .jat-section-heading-row p { color: #5a5a5a; max-width: 420px; margin: 0; } .jat-view-all { position: relative; font-weight: 600; font-size: 0.92rem; color: var(--jat-primary, #163A24); white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid transparent; } .jat-view-all:hover { border-color: var(--jat-accent, #B58A3C); color: var(--jat-secondary, #6F4E37); } /* Buttons */ .jat-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0.9em 1.9em; border-radius: var(--jat-radius-sm); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; transition: transform var(--jat-duration) var(--jat-ease), background-color var(--jat-duration) var(--jat-ease), color var(--jat-duration) var(--jat-ease), box-shadow var(--jat-duration) var(--jat-ease), border-color var(--jat-duration) var(--jat-ease); cursor: pointer; border: 1px solid transparent; } .jat-btn-sm { padding: 0.6em 1.3em; font-size: 0.85rem; } .jat-btn-solid { background: var(--jat-primary, #163A24); color: #fff; box-shadow: var(--jat-shadow-sm); } .jat-btn-solid:hover { transform: translateY(-2px); box-shadow: var(--jat-shadow-md); filter: brightness(0.92); } .jat-btn-outline { background: transparent; border-color: currentColor; color: var(--jat-primary, #163A24); } .jat-btn-outline:hover { background: var(--jat-primary, #163A24); color: #fff; transform: translateY(-2px); box-shadow: var(--jat-shadow-sm); } .jat-btn-ghost { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .jat-btn-ghost:hover { background: #fff; color: var(--jat-primary, #163A24); border-color: #fff; transform: translateY(-2px); } .jat-no-results { text-align: center; color: #888; padding: 3.5rem 0; font-size: 0.95rem; } /* Icon glyphs — custom line-icon set via CSS mask (no emoji, no icon-font). ".jat-icon-X .jat-network-icon" covers every nested-icon usage (ecosystem flow, network detail cards, role benefit cards); ".jat-benefit-icon.jat-icon-X" covers the one spot where the icon class sits directly on the glyph itself. */ .jat-icon-leaf .jat-network-icon::before, .jat-benefit-icon.jat-icon-leaf::before { -webkit-mask-image: var(--jat-icon-leaf); mask-image: var(--jat-icon-leaf); } .jat-icon-truck .jat-network-icon::before, .jat-benefit-icon.jat-icon-truck::before { -webkit-mask-image: var(--jat-icon-truck); mask-image: var(--jat-icon-truck); } .jat-icon-cup .jat-network-icon::before, .jat-benefit-icon.jat-icon-cup::before { -webkit-mask-image: var(--jat-icon-cup); mask-image: var(--jat-icon-cup); } .jat-icon-globe .jat-network-icon::before, .jat-benefit-icon.jat-icon-globe::before { -webkit-mask-image: var(--jat-icon-globe); mask-image: var(--jat-icon-globe); } .jat-network-icon::before, .jat-benefit-icon::before { content: ""; display: block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }