/* ============================================================ RAIVA FOOD — Global Design System Palette: deep forest #1E3320 · leaf green #4F7A2E (AA 5:1) · saffron amber #A8650F (AA 4.6:1) · white · warm gray Load this file LAST in so it wins the cascade. ============================================================ */ :root { --rf-forest: #1E3320; --rf-green: #4F7A2E; /* primary accent — buttons, links */ --rf-green-light: #8CBD67; /* brand logo green — decorative only */ --rf-amber: #A8650F; /* secondary accent — saffron-inspired */ --rf-white: #FFFFFF; --rf-gray: #E4E7DF; --rf-ink: #1A1A1A; --rf-muted: #4A5647; --rf-radius-sm: 8px; --rf-radius: 12px; --rf-radius-lg: 16px; --rf-radius-xl: 20px; --rf-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05); --rf-shadow-lift: 0 22px 48px rgba(30, 51, 32, 0.14); --rf-shadow-panel: 0 20px 50px rgba(30, 51, 32, 0.10); --rf-glass-forest: rgba(30, 51, 32, 0.55); --rf-glass-white: rgba(255, 255, 255, 0.78); --rf-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------ 1. CARDS — soft radius, resting shadow, lift on hover ------------------------------------------------------------ */ .brutal-hover, .brutal-hover-light { border-radius: var(--rf-radius); box-shadow: var(--rf-shadow-soft); transition: transform 0.35s var(--rf-ease), box-shadow 0.35s var(--rf-ease); } div.brutal-hover, article.brutal-hover { overflow: hidden; } .brutal-hover:hover { transform: translateY(-6px); box-shadow: var(--rf-shadow-lift); } .brutal-hover-light:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30); } .product-tile { border-radius: var(--rf-radius); box-shadow: var(--rf-shadow-soft); transition: opacity 0.5s ease, transform 0.5s var(--rf-ease), box-shadow 0.35s var(--rf-ease); } .product-tile:hover { transform: translateY(-6px); box-shadow: var(--rf-shadow-lift); } span.product-tile-label { background-color: var(--rf-glass-forest); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .product-tile-overlay { background: rgba(30, 51, 32, 0); transition: background .3s ease; z-index: 2; } .product-tile:hover .product-tile-overlay { background: rgba(30, 51, 32, 0.12); } span.product-tile-label { z-index: 3; } /* ------------------------------------------------------------ 2. BORDERED BOXES — round every flat container ------------------------------------------------------------ */ div[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]), a[class*="border-line"]:not([class*="border-t"]):not([class*="border-b"]):not([class*="border-s"]):not([class*="border-e"]) { border-radius: var(--rf-radius); border-color: var(--rf-gray); } img[class*="border-line"], iframe { border-radius: var(--rf-radius); } div[class*="overflow-hidden"][class*="border-line"] { border-radius: var(--rf-radius); box-shadow: var(--rf-shadow-soft); } a[class*="border-white"] { border-radius: 10px; } a[class*="bg-forest"][class*="border-b-4"] { border-radius: var(--rf-radius); } div[class*="-mt-12"][class*="border-line"] { border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow-panel); } /* ------------------------------------------------------------ 3. BUTTONS & FORMS ------------------------------------------------------------ */ button { border-radius: 10px; } .btn-sweep { border-radius: 10px; } .mega-box { border-radius: 10px; } input, select, textarea { border-radius: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, select:focus, textarea:focus { border-color: var(--rf-green); box-shadow: 0 0 0 4px rgba(79, 122, 46, 0.14); } body { color: var(--rf-ink); } .bg-white, .spec-texture { color: var(--rf-ink); } .bg-white .font-light, .spec-texture .font-light { font-weight: 400; } .text-ink { color: var(--rf-ink) !important; } .text-forest { color: var(--rf-forest) !important; } .text-accent { color: var(--rf-green) !important; } a.btn-sweep.bg-accent, button.btn-sweep.bg-accent, .btn-sweep.border-accent.bg-accent { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-color: #3F6323 !important; background-color: var(--rf-green) !important; color: #FFFFFF !important; box-shadow: 0 10px 22px rgba(79, 122, 46, 0.32) !important; font-weight: 700; letter-spacing: .04em; transition: transform .2s var(--rf-ease), background-color .2s ease, box-shadow .2s var(--rf-ease); padding-inline: 1.625rem; font-size: 0.9375rem; } a.btn-sweep.bg-accent:hover, button.btn-sweep.bg-accent:hover, .btn-sweep.border-accent.bg-accent:hover { background-color: #3F6323 !important; box-shadow: 0 14px 28px rgba(63, 99, 35, 0.38) !important; transform: translateY(-2px); } a.btn-sweep.bg-accent:focus-visible, button.btn-sweep.bg-accent:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; } a.btn-sweep, button.btn-sweep { min-height: 48px; border-radius: 10px; font-weight: 700; white-space: nowrap; width: fit-content; } a.btn-sweep:focus-visible, button.btn-sweep:focus-visible { outline: 3px solid #F7B500; outline-offset: 3px; } @media (max-width: 767px) { a.btn-sweep, button.btn-sweep { width: 100%; } } table { width: 100%; border-collapse: collapse; color: var(--rf-ink); } th, td { padding: .875rem 1rem; border: 1px solid #C7CFC2; text-align: start; vertical-align: top; } th { background: #EEF3E9; color: var(--rf-forest); font-weight: 700; } tr:nth-child(even) td { background: #F9FAF7; } address { font-style: normal; } @media (max-width: 767px) { section:not(#hero-scroll) { padding-block: 44px; } section > .mx-auto { padding-inline: 18px !important; } .grid[class*="grid-cols-2"], .grid[class*="grid-cols-3"], .grid[class*="grid-cols-4"] { grid-template-columns: minmax(0, 1fr) !important; } table, thead, tbody, tr, th, td { display: block; width: 100%; } thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } tr { margin-bottom: 1rem; border: 1px solid #C7CFC2; } td { border-width: 0 0 1px; } td:last-child { border-bottom: 0; } } /* ------------------------------------------------------------ 4. GLASSMORPHISM — header, dropdown panels ------------------------------------------------------------ */ header.sticky { background-color: var(--rf-glass-white); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: rgba(30, 51, 32, 0.08); } #langMenu { border-radius: 14px; overflow: hidden; background-color: #FFFFFF; border-color: rgba(30, 51, 32, 0.10); box-shadow: var(--rf-shadow-panel); } #megaMenu { border-radius: 0 0 var(--rf-radius-xl) var(--rf-radius-xl); background-color: #FFFFFF; border-color: rgba(30, 51, 32, 0.08); box-shadow: var(--rf-shadow-panel); } #megaMenu p[data-cat-heading] { font-size: 1.375rem; line-height: 1.3; text-align: center; } #megaMenu .mega-box { background-color: #FFFFFF; border: 1px solid #A9BC9F; box-shadow: 0 2px 6px rgba(30, 51, 32, 0.10); } #megaMenu .mega-box:hover { border-color: var(--rf-green); background-color: #F2F7EE; } div.absolute[class*="bg-forest/"] { background-color: rgba(30, 51, 32, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header.sticky { background-color: rgba(255, 255, 255, 0.97); } span.product-tile-label { background-color: rgba(30, 51, 32, 0.90); } div.absolute[class*="bg-forest/"] { background-color: rgba(30, 51, 32, 0.80); } } /* ------------------------------------------------------------ 5. ACCESSIBILITY ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .brutal-hover:hover, .brutal-hover-light:hover, .product-tile:hover { transform: none; } } .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: 0.875rem 1.5rem; background-color: var(--rf-forest); color: var(--rf-white); font-weight: 700; font-size: 1rem; line-height: 1.5; border-radius: 10px; box-shadow: var(--rf-shadow-lift); transform: translateY(calc(-100% - 2rem)); } .skip-link:focus { transform: none; outline: 3px solid #F7B500; outline-offset: 3px; } main#main-content:focus { outline: none; } header nav a, header nav button, header nav summary, #megaBtn { display: inline-flex; align-items: center; min-height: 44px; } header a[aria-label], #mobileMenuBtn { min-width: 44px; min-height: 44px; justify-content: center; } header a.flex.shrink-0 { min-height: 44px; } #langMenu button { min-height: 44px; } #megaMenu .mega-box { min-height: 44px; } #mobileMenu nav > a, #mobileMenu summary, #mobileMenu select { display: flex; align-items: center; min-height: 44px; } #mobileMenu details a { display: inline-flex; align-items: center; min-height: 44px; } footer ul a, footer p a { display: inline-flex; align-items: center; min-height: 44px; } footer a[aria-label].flex.h-10.w-10 { height: 2.75rem; width: 2.75rem; } .link-underline { position: relative; } .link-underline::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 44px; transform: translateY(-50%); } p { line-height: 1.6; } p[class*="text-"] { line-height: 1.6; } /* ------------------------------------------------------------ 6. LINKS ------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--rf-green); outline-offset: 2px; } .link-underline { display: inline-flex; align-items: center; gap: 8px; border-block-end: 2px solid var(--rf-green); padding-block-end: 2px; transition: color .1s ease; } .link-underline:hover { color: var(--rf-green); } .link-underline .arr { display: inline-block; transition: transform .15s cubic-bezier(0,0,0.2,1); } .link-underline:hover .arr { transform: translateX(6px); } .btn-sweep { position: relative; overflow: hidden; } .btn-sweep::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--rf-green); transform: scaleX(0); transform-origin: left; transition: transform .15s cubic-bezier(0,0,0.2,1); } .btn-sweep:hover::after { transform: scaleX(1); } header nav a, header nav button, header nav summary, .hdr-link, a.btn-sweep, button.btn-sweep { white-space: nowrap; } /* ------------------------------------------------------------ 7. HEADER responsive compaction ------------------------------------------------------------ */ @media (min-width: 1024px) and (max-width: 1400px) { header > div.mx-auto { gap: 0.5rem; padding-inline: 1rem; } header nav[class*="gap-8"] { gap: 0.75rem; } header nav[class*="text-sm"] { font-size: 0.75rem; } a.btn-sweep.bg-accent, .btn-sweep.border-accent.bg-accent { padding-inline: 0.875rem; font-size: 0.875rem; } } /* ------------------------------------------------------------ 8. UTILITY BACK-FILL (Tailwind CDN JIT covers most; these are hand-rolled component classes not part of Tailwind) ------------------------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .bg-line { background-color: var(--rf-gray); } /* ------------------------------------------------------------ 9. PRODUCT SPEC COMPONENTS ------------------------------------------------------------ */ .spec-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rf-gray); } @media (min-width: 700px) { .spec-grid { grid-template-columns: 1fr 1fr; } } .spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.5rem; background: #fff; } .spec-row dt { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--rf-forest); } .spec-row dd { font-family: 'IBM Plex Mono', monospace; font-size: 0.9375rem; font-weight: 500; color: var(--rf-ink); text-align: end; } .spec-row.spec-highlight { background: rgba(79, 122, 46, 0.06); } .spec-row.spec-highlight dt, .spec-row.spec-highlight dd { color: var(--rf-green); } .app-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.4rem; border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); background: #fff; box-shadow: var(--rf-shadow-soft); transition: transform 0.3s var(--rf-ease), box-shadow 0.3s var(--rf-ease), border-color 0.3s; } .app-card:hover { transform: translateY(-4px); box-shadow: var(--rf-shadow-lift); border-color: rgba(79, 122, 46, 0.35); } .app-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(79, 122, 46, 0.08); color: var(--rf-green); transition: transform 0.3s var(--rf-ease), background-color 0.3s; } .app-card:hover .app-icon { transform: scale(1.1) rotate(-4deg); background: rgba(79, 122, 46, 0.14); } .trade-grid { display: grid; gap: 1px; background: var(--rf-gray); border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); overflow: hidden; } .trade-grid > div { background: #fff; padding: 1.25rem 1.4rem; } .trade-grid dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rf-green); } .trade-grid dd { margin-top: 0.4rem; color: var(--rf-ink); font-weight: 300; } .figure-strip { display: grid; gap: 1px; background: var(--rf-gray); border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); overflow: hidden; } .figure-strip > div { background: #fff; padding: 1.15rem 1.25rem; } .figure-strip .fig-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; color: var(--rf-forest); } .figure-strip .fig-label { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rf-muted); margin-top: 2px; } .faq-item { border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); background: #fff; box-shadow: var(--rf-shadow-soft); overflow: hidden; } .faq-item + .faq-item { margin-top: 0.75rem; } .faq-item > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 600; color: var(--rf-forest); transition: background-color 0.2s ease; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary:hover { background: #F7F9F5; } .faq-item > summary::after { content: '+'; flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 1.35rem; line-height: 1; color: var(--rf-green); transition: transform 0.25s var(--rf-ease); } .faq-item[open] > summary::after { transform: rotate(45deg); } .faq-answer { padding: 0 1.4rem 1.25rem; color: var(--rf-ink); font-weight: 300; line-height: 1.7; } .img-elevated { box-shadow: var(--rf-shadow-panel); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(30, 51, 32, 0.25); border-radius: 10px; padding: 1rem 1.5rem; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s var(--rf-ease); } .btn-outline:hover { border-color: var(--rf-forest); background-color: #F7F8F5; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .app-card:hover, .app-card:hover .app-icon, .btn-outline:hover { transform: none; } } /* ------------------------------------------------------------ 10. BLOG — article typography and link cards ------------------------------------------------------------ */ .post-head { max-width: 48rem; } .post-crumbs { font-size: 0.75rem; color: var(--rf-muted); } .post-crumbs a:hover { color: var(--rf-green); } .post-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(79, 122, 46, 0.09); color: var(--rf-green); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .post-title { margin-top: 1rem; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: var(--rf-forest); } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--rf-muted); } .post-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; } .post-figure { margin: 0; } .post-figure img { width: 100%; border-radius: var(--rf-radius); box-shadow: var(--rf-shadow-soft); } .post-figure-hero img { border-radius: var(--rf-radius-lg); box-shadow: var(--rf-shadow-panel); } .post-figure figcaption { margin-top: 0.7rem; font-size: 0.8125rem; color: var(--rf-muted); } .post-body { max-width: 40rem; color: var(--rf-ink); font-size: 1.0625rem; line-height: 1.75; } .post-body > * + * { margin-top: 1.5rem; } @media (min-width: 960px) { .post-body > .post-figure, .post-body > .overflow-x-auto, .post-body > .post-link-card, .post-body > .post-faq { width: calc(100% + 8rem); margin-inline-start: -4rem; } } .post-body h2 { margin-top: 3.25rem; padding-top: 1.75rem; border-top: 1px solid var(--rf-gray); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--rf-forest); } .post-body h3 { margin-top: 2rem; font-size: 1.15rem; font-weight: 700; color: var(--rf-forest); } .post-body h2 + * { margin-top: 1rem; } .post-body strong { font-weight: 600; color: var(--rf-forest); } .post-body ul { padding-inline-start: 0; list-style: none; } .post-body ul > li { position: relative; padding-inline-start: 1.5rem; } .post-body ul > li + li { margin-top: 0.85rem; } .post-body ul > li::before { content: ''; position: absolute; inset-inline-start: 0.25rem; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--rf-green); } .post-body em { font-style: italic; } .post-cta { position: relative; margin-top: 3.5rem; padding: 2.5rem 2rem; border-radius: var(--rf-radius-lg); background: var(--rf-forest); color: #fff; box-shadow: var(--rf-shadow-panel); overflow: hidden; } .post-cta::after { content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 122, 46, 0.55), transparent 70%); pointer-events: none; } .post-cta > * { position: relative; z-index: 1; } .post-cta-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; } .post-cta-text { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.86); max-width: 44rem; } .post-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; } .post-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.85rem 1.5rem; border-radius: 10px; background: #fff; color: var(--rf-forest); font-weight: 700; font-size: 0.9375rem; transition: transform 0.25s var(--rf-ease), box-shadow 0.25s var(--rf-ease), background-color 0.25s; } .post-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); } .post-cta-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); } .post-cta-btn-ghost:hover { background: rgba(255, 255, 255, 0.10); } .post-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--rf-ease); } article.brutal-hover:hover .post-card-media img { transform: scale(1.05); } .post-card-tag { position: absolute; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--rf-glass-white); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--rf-forest); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .post-card-more { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rf-green); } .post-card-more .arr { transition: transform 0.25s var(--rf-ease); } article.brutal-hover:hover .post-card-more .arr { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .post-card-media img, article.brutal-hover:hover .post-card-media img, .post-cta-btn:hover { transform: none; } } /* ------------------------------------------------------------ 11. HERO ------------------------------------------------------------ */ .hero-gradient { background: linear-gradient(to right, rgba(30,51,32,0.68) 10%, rgba(30,51,32,0.20) 100%); } .hero-vp { height: 100vh; height: 100dvh; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ------------------------------------------------------------ 12. HOVER-SWAP product imagery ------------------------------------------------------------ */ .hover-swap::after { content: ""; position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.5s ease-out; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .hover-swap:hover::after, .group:hover .hover-swap::after { background-image: var(--hover-img); opacity: 1; } } /* ------------------------------------------------------------ 13. B2B EXPORT LAYER Header offset, specification tables, trust and RFQ elements. ------------------------------------------------------------ */ /* Offset for the fixed header: py-3 (24px) plus the logo, which steps up from h-16 to h-20 at lg. Replaces a hard-coded pt-24. */ .page-top { padding-top: 88px; } @media (min-width: 1024px) { .page-top { padding-top: 104px; } } /* Unfilled trade data. Deliberately visible rather than hidden — a dash a buyer can ask about beats a number nobody verified. See b2b-data.js. */ .spec-pending { color: var(--rf-muted); opacity: 0.65; font-style: italic; cursor: help; border-bottom: 1px dotted rgba(74, 86, 71, 0.4); } /* Technical specification table */ .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; } .spec-table caption { text-align: left; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rf-green); padding-bottom: 0.75rem; } .spec-table th, .spec-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--rf-gray); vertical-align: top; text-align: left; } .spec-table th { width: 42%; font-weight: 500; color: var(--rf-forest); } .spec-table td { color: var(--rf-ink); font-weight: 300; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; } .spec-table tbody tr:nth-child(odd) { background: #FBFCFA; } .spec-table .spec-note { display: block; margin-top: 2px; font-size: 12px; color: var(--rf-muted); } .spec-table .spec-mono { font-family: 'IBM Plex Mono', monospace; } .spec-table .spec-italic { font-style: italic; } .spec-group-head td { background: var(--rf-forest); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1rem; } .spec-group-head + tr th, .spec-group-head + tr td { border-top: 0; } /* Tab strip on product pages */ .spec-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rf-gray); } .spec-tab { padding: 0.85rem 1.4rem; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rf-muted); border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .spec-tab:hover { color: var(--rf-green); } .spec-tab[aria-selected="true"] { color: var(--rf-forest); border-bottom-color: var(--rf-green); } /* Trust bar */ .trust-bar { display: grid; gap: 1px; background: var(--rf-gray); border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); overflow: hidden; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .trust-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Unverified stats are omitted rather than shown as "—" (2026-08-30), so the bar can hold 1–4 cells. Size the grid to what actually survived, or a lone stat sits in a quarter-width cell beside three empty ones. data-count is set by build-b2b.js. */ .trust-bar[data-count="1"] { grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .trust-bar[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .trust-bar[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-bar[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .trust-bar > div { background: #fff; padding: 1.4rem 1.25rem; text-align: center; } .trust-bar .trust-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.35rem; font-weight: 600; color: var(--rf-forest); } .trust-bar .trust-label { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rf-muted); } /* Certificate cards and the empty-state panel */ .cert-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .cert-card { border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); background: #fff; padding: 1.5rem; text-align: center; } .cert-card img { height: 64px; width: auto; margin: 0 auto 1rem; object-fit: contain; } .cert-empty { border: 1px dashed rgba(74, 86, 71, 0.35); border-radius: var(--rf-radius); background: #FBFCFA; padding: 2.5rem 2rem; } /* Accreditations in progress (2026-08-30). Styled deliberately UNLIKE .cert-card — dashed border, no logo slot, muted, with an explicit status pill — so a skimming buyer cannot mistake it for a held certificate. */ .cert-progress-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px dashed rgba(74, 86, 71, 0.35); border-radius: var(--rf-radius); background: #FBFCFA; padding: 1.1rem 1.25rem; } .cert-progress-status { display: inline-block; border: 1px solid rgba(74, 86, 71, 0.3); border-radius: 999px; padding: 2px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rf-muted); background: #fff; } .cert-progress-name { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--rf-forest); } .cert-progress-scope { font-size: 0.8rem; line-height: 1.45; color: var(--rf-muted); } /* RFQ form */ .rfq-form { display: grid; gap: 1.35rem; } .rfq-field > span { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rf-forest); } .rfq-field input, .rfq-field select, .rfq-field textarea { margin-top: 0.5rem; width: 100%; border: 1px solid var(--rf-gray); border-radius: 8px; padding: 0.8rem 1rem; font-size: 14px; font-weight: 300; background: #fff; color: var(--rf-ink); transition: border-color 0.2s, box-shadow 0.2s; } .rfq-field input:focus, .rfq-field select:focus, .rfq-field textarea:focus { outline: none; border-color: var(--rf-green); box-shadow: 0 0 0 3px rgba(79, 122, 46, 0.12); } .rfq-field .rfq-hint { display: block; margin-top: 0.4rem; font-size: 12px; color: var(--rf-muted); } .rfq-required { color: #B23A2E; } @media (min-width: 640px) { .rfq-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; } } /* Numbered process steps */ .step-list { counter-reset: step; display: grid; gap: 1.25rem; } .step-list > li { counter-increment: step; position: relative; padding-left: 3.5rem; list-style: none; } .step-list > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; height: 2.4rem; width: 2.4rem; border-radius: 999px; background: rgba(79, 122, 46, 0.1); color: var(--rf-green); font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; } @media print { header, footer, .spec-tabs, [aria-label*="WhatsApp"] { display: none !important; } .page-top { padding-top: 0 !important; } .spec-table { font-size: 11px; } } /* ------------------------------------------------------------ 14. FORM STATES, HONEYPOT, LEGAL PLACEHOLDERS New elements only — no existing component styles are changed. ------------------------------------------------------------ */ /* Honeypot. Removed from the visual flow and from the accessibility tree (the wrapper carries aria-hidden), so no human encounters it. Not display:none — some bots skip fields that are display:none. */ .hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Form status region */ .form-status { border-radius: var(--rf-radius-sm); padding: 0.9rem 1.1rem; font-size: 14px; line-height: 1.5; border: 1px solid transparent; } .form-status--pending { background: #F5F7F2; border-color: var(--rf-gray); color: var(--rf-muted); } .form-status--success { background: rgba(79, 122, 46, 0.08); border-color: rgba(79, 122, 46, 0.35); color: #33501D; } .form-status--error { background: rgba(178, 58, 46, 0.06); border-color: rgba(178, 58, 46, 0.35); color: #8A2B22; } /* Inline field errors */ .field-error { display: block; margin-top: 0.4rem; font-size: 12px; color: #8A2B22; } .rfq-field input[aria-invalid="true"], .rfq-field select[aria-invalid="true"], .rfq-field textarea[aria-invalid="true"] { border-color: #B23A2E; } .rfq-field input[aria-invalid="true"]:focus, .rfq-field select[aria-invalid="true"]:focus, .rfq-field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(178, 58, 46, 0.12); } button[disabled] { opacity: 0.6; cursor: not-allowed; } /* Unconfirmed legal identity values in the privacy policy. Deliberately loud — a policy naming the wrong entity is a legal problem, not a cosmetic one. */ .legal-todo { background: #FFF4CE; border-bottom: 1px dashed #B8860B; color: #6B4E00; padding: 0 0.25rem; font-size: 0.92em; font-weight: 600; letter-spacing: 0.02em; } /* ------------------------------------------------------------ 15. MOBILE INPUT ZOOM FIX (approved 2026-08-24) iOS Safari force-zooms any focused input rendering below 16px, shifting the page mid-entry. 16px is the threshold, not a preference. Desktop sizing is untouched. ------------------------------------------------------------ */ @media (max-width: 640px) { .rfq-field input, .rfq-field select, .rfq-field textarea, #contactForm input[type="text"], #contactForm input[type="email"], #contactForm textarea { font-size: 16px; } } /* ------------------------------------------------------------ 16. DEFERRED HERO MEDIA (approved 2026-08-24) The 14 MB hero video no longer autoplays or preloads. A neutral gradient paints immediately; the video is injected only after the page has fully loaded, and only where it is not costly to do so. ------------------------------------------------------------ */ .hero-neutral { position: absolute; inset: 0; background: radial-gradient(circle at 22% 18%, rgba(140, 188, 103, 0.20) 0%, transparent 55%), radial-gradient(circle at 82% 78%, rgba(79, 122, 46, 0.28) 0%, transparent 60%), linear-gradient(140deg, #1E3320 0%, #24402A 55%, #1A2C1C 100%); } .hero-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in; } .hero-media-video.is-ready { opacity: 1; } /* ------------------------------------------------------------ 17. AVAILABILITY CALENDAR (added 2026-08-25) Seasonal export calendar on shop.html. Renders only when real month data exists in b2b-data.js AVAILABILITY. ------------------------------------------------------------ */ /* Horizontal scroll on narrow screens — standard for month grids. The label column stays readable rather than being crushed. */ .cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .cal-grid { min-width: 720px; border: 1px solid var(--rf-gray); border-radius: var(--rf-radius); background: #fff; overflow: hidden; } .cal-row { display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--rf-gray); } .cal-row:last-child { border-bottom: 0; } .cal-row:nth-child(even):not(.cal-head) { background: #FBFCFA; } .cal-head { background: var(--rf-forest) !important; padding-top: 0.6rem; padding-bottom: 0.6rem; } .cal-head .cal-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .cal-month { text-align: center; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); } .cal-label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--rf-forest); text-decoration: none; transition: color 0.2s; } .cal-label:hover { color: var(--rf-green); text-decoration: underline; } .cal-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; } .cal-cell { height: 22px; border-radius: 3px; background: #EDF0E9; transition: background-color 0.2s; } .cal-cell.is-on { background: linear-gradient(180deg, var(--rf-green) 0%, #456B29 100%); } .cal-text { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--rf-muted); text-align: right; } .cal-key { display: inline-block; height: 11px; width: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--rf-green) 0%, #456B29 100%); } @media (max-width: 640px) { .cal-row { grid-template-columns: 120px 1fr; gap: 0.75rem; } .cal-text { display: none; } /* the bar already conveys it; aria-label carries the text */ .cal-grid { min-width: 620px; } } @media print { .cal-wrap { overflow: visible; } .cal-grid { min-width: 0; } .cal-cell.is-on { background: #4F7A2E !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* Indicative-data notice on the availability calendar. Deliberately visible: removing it without replacing the underlying data would turn researched figures into an implied commitment. See b2b-data.js PROVISIONAL(). */ .cal-notice { border-left: 3px solid var(--rf-amber); background: #FDF8F0; border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0; padding: 1rem 1.25rem; } .cal-notice p { font-size: 13px; line-height: 1.6; color: var(--rf-muted); margin: 0; } .cal-notice strong { color: var(--rf-forest); font-weight: 600; } /* Single-product availability strip. Month labels sit on a light surface here, not the forest header used on the full calendar, so they need dark text. */ .prod-cal { min-width: 560px; } .cal-month-dark { color: var(--rf-muted); } .prod-cal .cal-cell { height: 26px; } /* ------------------------------------------------------------ 18. PHOTO GRIDS, FILTERS AND LIGHTBOX (added 2026-08-27) Shared by gallery.html and the photo grid on every product page. ------------------------------------------------------------ */ /* auto-fill rather than a fixed column count: the same rule serves a three-photo product and a 121-photo one without a breakpoint per size. */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } } .photo-grid .is-hidden { display: none; } .photo-tile { position: relative; display: block; padding: 0; overflow: hidden; border: 1px solid var(--rf-gray); border-radius: var(--rf-radius-sm); background: #fff; cursor: zoom-in; transition: border-color 0.25s ease, box-shadow 0.3s var(--rf-ease), transform 0.3s var(--rf-ease); } /* The intrinsic width/height on the is there to reserve layout space while it loads; the square crop is what the grid actually displays. */ .photo-tile img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.5s var(--rf-ease); } .photo-tile:hover { border-color: var(--rf-green); box-shadow: var(--rf-shadow-lift); transform: translateY(-2px); } .photo-tile:hover img { transform: scale(1.06); } .photo-tile:focus-visible { outline: 2px solid var(--rf-green); outline-offset: 2px; } /* Video tiles. The poster frame already carries the watermark, so the badge is the only thing distinguishing a clip from a photograph — it has to read at 150px. Drawn in CSS rather than as an icon file: one less request on a page that may hold 250 tiles. */ .photo-tile.is-video { cursor: pointer; } .photo-tile.is-video::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.45) 100%); z-index: 1; pointer-events: none; } .photo-tile.is-video::after { content: ''; position: absolute; top: 50%; left: 50%; z-index: 2; height: 2.9rem; width: 2.9rem; margin: -1.45rem 0 0 -1.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92) /* play triangle, centred optically rather than geometrically */ ; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); clip-path: circle(50%); pointer-events: none; transition: transform 0.3s var(--rf-ease); } .photo-tile.is-video .tile-play { position: absolute; top: 50%; left: 50%; z-index: 3; margin: -0.5rem 0 0 -0.3rem; width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; border-left: 0.85rem solid var(--rf-forest); pointer-events: none; } .photo-tile.is-video:hover::after { transform: scale(1.12); } .tile-duration { position: absolute; right: 0.4rem; bottom: 0.4rem; z-index: 3; border-radius: 4px; background: rgba(0, 0, 0, 0.68); padding: 0.1rem 0.35rem; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #fff; pointer-events: none; } /* Filter pills */ .gal-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .gal-filter { border: 1px solid var(--rf-gray); border-radius: 999px; padding: 0.5rem 1.1rem; background: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--rf-muted); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .gal-filter:hover { border-color: var(--rf-green); color: var(--rf-forest); } .gal-filter.is-active { background: var(--rf-green); border-color: var(--rf-green); color: #fff; } .gal-filter:focus-visible { outline: 2px solid var(--rf-green); outline-offset: 2px; } /* Lightbox */ .rf-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; background: rgba(16, 24, 17, 0.93); backdrop-filter: blur(3px); } .rf-lightbox[hidden] { display: none; } .rf-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: min(1200px, 92vw); } .rf-lb-figure img, .rf-lb-figure video { max-width: 100%; max-height: 78vh; border-radius: var(--rf-radius-sm); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); } .rf-lb-figure video { background: #000; } .rf-lb-figure [hidden] { display: none; } .rf-lb-figure figcaption { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.82); text-align: center; } .rf-lb-close, .rf-lb-nav { flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; line-height: 1; transition: background-color 0.2s ease, border-color 0.2s ease; } .rf-lb-close:hover, .rf-lb-nav:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); } .rf-lb-close:focus-visible, .rf-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .rf-lb-nav { height: 3rem; width: 3rem; font-size: 2rem; padding-bottom: 0.35rem; } .rf-lb-close { position: absolute; top: 1rem; right: 1rem; height: 2.75rem; width: 2.75rem; font-size: 1.9rem; padding-bottom: 0.2rem; } @media (max-width: 640px) { /* Thumb-reachable controls: the arrows move off the sides and onto the bottom edge, where they do not crowd the photo on a narrow screen. */ .rf-lightbox { flex-wrap: wrap; align-content: center; } .rf-lb-figure { order: -1; width: 100%; } .rf-lb-nav { height: 2.75rem; width: 2.75rem; font-size: 1.7rem; } } @media (prefers-reduced-motion: reduce) { .photo-tile, .photo-tile img { transition: none; } .photo-tile:hover { transform: none; } .photo-tile:hover img { transform: none; } }