/* V7-HEADER * Title: Buktika - Eco Guilds Farms Page Styles * Filename: assets/css/eco-guilds/eco-guilds-farms.css * Version: v1.1.0 * Issued: 2026-03-29 * Author: Buktika Webdesk (Binka) * Owner: Buktika — Binka * Purpose: Page styles for eco-guilds-farms.html. * - Page variable binding (Eco Guilds palette per PIL-02 §2, LOCKED). * - Hero geometry: host div heights per breakpoint. * - CTA button gradient override. * - Dark mode overrides. * Grid section rules are owned by eco-guilds-farms-grid.css. * Type: CSS stylesheet * Colour Map: v3.9.0 Section 5.2 (LOCKED) * Design System: v4.0.0 * ISO Reference: ISO 27001, ISO 9241-110 * Source Naming Standard: Buktika v7.1 (ISO Aligned) * License: © Buktika, 2026. All rights reserved. * * Palette (PIL-02 §2 — Eco Guilds, LOCKED): * --page-primary: --sdx-color-green-deep #2e5d3a * --page-secondary: --sdx-color-green-soft #3a6f54 * --page-accent: --sdx-color-mama-amber #f5b014 * --page-depth: --sdx-color-stem-olive #464820 * --page-dark-base: --sdx-color-eco-dark-base #0a0f0b * --page-dark-surface: --sdx-color-eco-dark-surface #111a13 * * HARD RULE (PIL-02 §2): No hex literal may be used for any token-bound value. * * ChangeLog: * v1.1.0 (2026-03-29): Grid section rules removed — moved to eco-guilds-farms-grid.css. * - REMOVED §5 (.eco-guilds-farms-grid-section, .eco-guilds-farms-grid-header). * - REMOVED §6 (.card overrides, .eco-guilds-farms-empty). * - These rules are now owned by the grid module partial CSS. * v1.0.0 (2026-03-29): Initial build. */ /* 0) depends on: global.css, themes.css, partials/footer.css */ /* ====================================================================================================== 1) Page variable binding PIL-02 §2 — Eco Guilds locked palette. ====================================================================================================== */ .page-eco-guilds-farms { --page-bg: var(--sdx-color-eco-bg); --page-primary: var(--sdx-color-green-deep); --page-secondary: var(--sdx-color-green-soft); --page-accent: var(--sdx-color-mama-amber); --page-depth: var(--sdx-color-stem-olive); --page-dark-base: var(--sdx-color-eco-dark-base); --page-dark-surface: var(--sdx-color-eco-dark-surface); --hero-image: none; scroll-behavior: smooth; } /* ====================================================================================================== 2) Base page surfaces ====================================================================================================== */ .page-eco-guilds-farms { background: var(--page-bg); color: var(--fg); } /* ====================================================================================================== 3) Hero Map hero geometry. Host div height is definite — inner .hero-eco-guilds-farms-map uses height:100%. JS reads the inner element via HERO_SELECTOR for map container sizing. Partial-internal rules (#farms-map-container, pins, Tippy) live in eco-guilds-farms-map.css. ====================================================================================================== */ /* Host div: definite height required so inner height:100% resolves. EXCEPTION: px via DOC-02 §5.3 — hero heights are permanently exempt from rem rule. */ .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 1000px; /* EXCEPTION: px — §5.3 hero dimension permanent exception */ height: 1000px; overflow: hidden; } .page-eco-guilds-farms .hero-eco-guilds-farms-map { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; display: flex; align-items: center; justify-content: center; /* Hero gradient: deep green -> canopy -> dark forest. EXCEPTION: #1c3322 — dark forest blend stop. No token. Blend point only. */ background: radial-gradient( circle at 50% 25%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(0, 0, 0, 0) 60% ), linear-gradient( 135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-green-soft) 42%, #1c3322 100% /* EXCEPTION: dark forest blend stop, no token */ ); color: #ffffff; /* EXCEPTION: hero text always white — global.css v3.3.0 */ font-family: var(--text-font); } /* Radial vignette — darkens edges, draws eye inward to map */ .page-eco-guilds-farms .hero-eco-guilds-farms-map::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( ellipse 70% 100% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.28) 100% ); } /* ====================================================================================================== 4) Typography overrides ====================================================================================================== */ /* none */ /* ====================================================================================================== 5) (RESERVED — grid section rules moved to eco-guilds-farms-grid.css) ====================================================================================================== */ /* ====================================================================================================== 6) (RESERVED — grid card rules moved to eco-guilds-farms-grid.css) ====================================================================================================== */ /* ====================================================================================================== 7) Buttons and CTAs PIL-02 §5.1: gradient 145deg, amber -> stem-olive. DOC-03 §8.3.1 + §5.2: dark end stop -> #ffffff mandatory. NEVER var(--fg). Button font-size 1rem bold = large text threshold; amber start (1.89:1) qualifies at >=3:1. ====================================================================================================== */ .page-eco-guilds-farms .sdx-cta-band .sdx-btn-primary { background: linear-gradient(145deg, var(--page-accent) 0%, var(--page-depth) 100%); color: #ffffff; /* DOC-03 §8.3.1: dark stop + large text rule. NEVER change. */ font-size: 1rem; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--page-depth) 28%, transparent); } .page-eco-guilds-farms .sdx-cta-band .sdx-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px color-mix(in srgb, var(--page-depth) 36%, transparent), 0 4px 16px color-mix(in srgb, var(--page-accent) 22%, transparent); } /* ====================================================================================================== 8) Page modules ====================================================================================================== */ /* none */ /* ====================================================================================================== 9) Media queries Hero host heights — DOC-02 §5.3 px permitted for hero containers. Same breakpoints as mamadex-mamas.css for visual parity across SA map pages. ====================================================================================================== */ @media (min-width: 2560px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 1100px; height: 1100px; } } @media (min-width: 1920px) and (max-width: 2559px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 1000px; height: 1000px; } } @media (min-width: 1680px) and (max-width: 1919px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 920px; height: 920px; } } @media (min-width: 1280px) and (max-width: 1679px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 860px; height: 860px; } } @media (min-width: 968px) and (max-width: 1279px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 760px; height: 760px; } } @media (min-width: 768px) and (max-width: 967px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 680px; height: 680px; } } @media (min-width: 641px) and (max-width: 767px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 600px; height: 600px; } } @media (max-width: 640px) { .page-eco-guilds-farms #eco-guilds-farms-map-section { min-height: 520px; height: 520px; } } /* ====================================================================================================== 10) Dark mode [data-theme="dark"] only. @media prefers-color-scheme MUST NOT appear. DOC-01 §3.2 HARD RULE. ====================================================================================================== */ [data-theme="dark"] .page-eco-guilds-farms { background: var(--page-dark-base); color: var(--fg); }