/* ====================================================================================================== File: hekto.css Path: /assets/css/hekto/hekto.css Version: v2.30.1 Issued: 2026-07-18 Author: Buktika Webdesk (Binka) Purpose: HEKTO pillar page stylesheet — token consumer only. Colour Map: v3.0.0 Design System: v4.0.0 Umbrella: v1.1.0 License: © Buktika, 2026. All rights reserved. ISO Reference: ISO 27001, ISO 9241-110 Source Naming Standard: Buktika v7.1 (ISO Aligned) Changelog: v2.30.0 (2026-07-18): DARK THEME REPAIR. Restored HEKTO's approved river-at-night base and deep-forest surface tokens instead of the universal walnut card surface. Removed fixed light section backgrounds in dark mode and promoted structural teal marks to the accessible Mama cyan token on the night surface. v2.29.4 (2026-07-18): Removed technical links from the global coral-hover path. All ledger link states and the copy control now use canonical --sdx-color-mama-amber from the Colour Map. v2.29.3 (2026-07-18): Recast the secondary hero CTA as a warm dark-stone control so its white label survives the bright arch opening. v2.29.2 (2026-07-18): Corrected the contract-copy control from teal to the verified-ledger burnished-gold action colour. v2.29.1 (2026-07-17): Centred the two audience routing buttons and widened the closing CTA copy column for a single desktop line. v2.29.0 (2026-07-17): Replaced the cold blue-green technical island with a warm bridge-stone ledger palette; removed glass, grid and lift effects from evidentiary cards. Centred hero copy on the main arch axis and reduced the seal into the left wall. v2.28.3 (2026-07-17): Aligned seal centre with the HEKTO headline and cleared the seal's lower edge from the bridge crown. v2.28.2 (2026-07-17): Lifted and offset the seal into the city-side sky so the bridge crown remains visible between seal and hero copy. v2.28.1 (2026-07-17): Rebalanced the hero around the main bridge arch: seal over the left approach and copy to the right, with the arch as their fulcrum. v2.28.0 (2026-07-17): Recast the animated glossy hero coin as a smaller static institutional seal; removed rocking, counter-motion and sparkle sweep. v2.27.1 (2026-07-17): Corrected journey-number and verification contrast; retained the canonical black HEKTO mark on an unrounded light field. v2.27.0 (2026-07-17): Added connected minting journey, HektoBag conversion mechanism, verified-ledger technical panel, document resources and section rhythm. v2.26.2 (2026-07-17): Reduced the borderless HEKTO mark to match adjacent icon weight. v2.26.1 (2026-07-17): HEKTO marks display without a circular holder or rounded image crop. v2.25.0 (2026-06-13): Mobile hero coin removal. FIXED - Section 9: hide .hero-orb at <=768px and collapse .hero-grid.has-hero-orb to one centered column. The animated coin was consuming/overlapping mobile space above the audience CTA and closing CTA band. v2.24.0 (2026-06-06): Hero grid width fix. FIXED - Section 3: .hero-grid.has-hero-orb width: 100% added. Root cause: .page-hekto .hero has display:flex (v2.11.0) for vertical centering. This makes .hero-grid a flex item. Without width:100%, the grid shrinks to content size — 1fr in the 290px 1fr 290px template collapsed to text content width instead of the remaining viewport space. Coin sat at left correctly but hero-body center drifted left of the viewport midpoint. v2.23.0 (2026-03-24): Critical CSS corruption fix. FIXED - Header comment block: v2.21.0 changelog contained literal comment-close sequences (btn- sdx-btn- contact-cta- etc) which terminated the CSS comment prematurely. Browser parsed everything from that point as CSS, invalidating all card border, section-title, and layout rules below. Replaced all comment-close sequences with safe plain-text equivalents. v2.22.0 (2026-03-24): Coral catch-all — correct fix via class rename. REVERTED- Section 4: a:not selector narrowed version reverted to clean a:hover. RENAMED - Section 8: hekto-audience-cta renamed to hekto-audience-btn throughout. Root cause: global coral specificity (0,9,2) beats local (0,3,0). Fix: class name containing btn is excluded by global catch-all exclusion. HTML: hekto-audience-cta-buyers and hekto-audience-cta-farmers renamed to btn variants. v2.21.0 (2026-03-24): Audience CTA hover — coral catch-all fix (incorrect, reverted in v2.22.0). FIXED - Section 4: a:hover selector narrowed to exclude hekto-audience-cta. FIXED - Section 8: hekto-audience-cta:hover color #ffffff added. v2.20.0 (2026-03-24): Audience card — Viridians pillar colours. FIXED - Section 8: .hekto-audience-card-buyers border-left: page-primary → sdx-color-purple-deep. FIXED - Section 8: .hekto-audience-cta-buyers gradient → purple-deep → teal-deep. Canonical Viridians gradient per DOC-03 §3. box-shadow updated to purple tint. v2.19.0 (2026-03-24): Audience card icon + button fixes. FIXED - Section 8: .hekto-audience-icon — display:block + object-fit:contain added. SVG icons were rendering at natural size without display:block constraint. FIXED - Section 8: .hekto-audience-cta-buyers gradient — page-primary→page-secondary was visually indistinguishable from farmers green. Changed to sdx-color-teal-deep → sdx-color-stem-olive for distinct teal read. v2.18.0 (2026-03-24): Audience cards — icon + card-top CSS added. ADDED - Section 8: .hekto-audience-card-top flex row (gap 0.875rem, margin-bottom 0.875rem). ADDED - Section 8: .hekto-audience-icon 4.6875rem canonical (reporters.css / contact.css pattern). v2.17.0 (2026-03-24): CTA cards replaced with two-audience fork. REMOVED - Section 8: .cta-card-grid, .cta-card, .cta-card h3/p, .cta-card .sdx-btn-primary. REMOVED - Section 9: .cta-card-grid responsive rule → .hekto-audience-grid. REMOVED - Section 10: [data-theme="dark"] .cta-card and .cta-card h3 stale rules. ADDED - Section 8: .hekto-audience-grid — 2-col, collapses to 1-col ≤768px. .hekto-audience-card shell. Per-destination border-left colour coding. .hekto-audience-cta — inline button, pillar-canonical gradients. buyers: page-primary → page-secondary. farmers: green-deep → stem-olive. [data-theme="dark"] card background: var(--page-dark-surface). FIXED - Section 7: .cta-card selectors removed from sdx-btn-primary colour cascade. v2.16.0 (2026-03-24): Per-pillar section-title underline colour. ADDED - Section 5: border-bottom-color: color-mix(in srgb, var(--page-primary) 55%, transparent). Dark: 35%. Owner decision: each pillar uses its own colour for section-title underline. Matches eco-guilds.css §5 pattern. border-bottom-color only — DOC-02 §4.1 prohibited list (text-align/font/weight) not touched. ADDED - Section 5: margin-bottom: 1.75rem. Global sets margin:0 on section-title; this creates clearance below the bar line. Not on prohibited list — permitted. v2.15.0 (2026-03-24): Section title compliance fix. REMOVED - Section 4: .page-hekto .section-title color: var(--page-primary). global.css HARD RULE: page CSS MUST NOT override colour on .section-title. Canonical is color: var(--fg). DOC-02 §4.1 / www-B §B.1. REMOVED - Section 4: .page-hekto .section-title::after pill block. global.css v3.12.0 owns the amber underline via border-bottom: 2px solid var(--page-accent) on the element directly. Local ::after was producing a second amber mark below the canonical full-width border-bottom line. v2.14.0 (2026-03-24): Orb shifted left within column. FIXED - Section 3: .page-hekto .hero-orb justify-self: center → start. Pins orb to left edge of col 1. Grid template unchanged — text stays centred. v2.13.0 (2026-03-24): Hero grid — true viewport centre for text block. FIXED - Section 3: grid-template-columns 290px 1fr → 290px 1fr 290px. 2-column grid: text column midpoint was (290 + viewport-width) / 2 — right of centre. 3-column grid: mirror col 3 (290px) balances col 1, text col 2 midpoint == viewport centre. ADDED - Section 3: .hero-body grid-column: 2 explicit placement. v2.12.0 (2026-03-24): Hero grid column override — text centred, coin left. ADDED - Section 3: .page-hekto .hero-grid.has-hero-orb grid-template-columns: 290px 1fr. Global allows orb column up to 420px — pushes text right of viewport centre. Locked orb column to 290px (matches orb max-width). Text column 1fr fills remainder. ADDED - Section 3: .page-hekto .hero-grid.has-hero-orb .hero-body justify-self: center; text-align: center. Text block centres within its 1fr column. v2.11.0 (2026-03-24): Hero vertical centering + horizontal centering fix. FIXED - Section 3: .page-hekto .hero — added display:flex + align-items:center. .hero-wrap centres .hero within itself but .hero did not centre its .hero-grid child. Grid was top-aligning within the min-height block. REVERTED- Section 3: margin-left:0 + margin-right:auto removed. v2.6.0 left-anchor caused content to sit against left wall at wide viewports / zoomed-out browser. Restored to global margin:0 auto. v2.10.0 (2026-03-24): Banner CSS restored. ADDED - Section 8: .page-hekto .us-perimeter-notice — sticky banner for US/CA users. Gradient: var(--page-secondary) → var(--page-depth). Border: var(--page-primary). Padding rem units. #ffffff text: permanent exception (dark surface, no token). display:none default — JS shows for US/CA users only. v2.9.0 (2026-03-24): Orb centred in column. FIXED - Section 3: .page-hekto .hero-orb justify-self: start → center. Centres orb within grid column 1 — midpoint between viewport left edge and hero text block left edge. v2.8.0 (2026-03-24): Localise .hero-orb sizing. ADDED - Section 3: .page-hekto .hero-orb — local override of global.css .hero-orb. max-width: 290px (global was 420px). width: 100%; justify-self: start retained. v2.7.0 (2026-03-24): Coin ellipse fix. FIXED - Section 3: aspect-ratio:1 moved from .hero-coin-container to .hero-coin directly. height:100% removed from .hero-coin. Container has no resolved height when parent constrains width only — aspect-ratio on container could not resolve. Coin now derives its own square geometry from width:100% + aspect-ratio:1. v2.6.0 (2026-03-24): Hero position fix. FIXED - Section 3: .page-hekto .hero margin-left: 0; margin-right: auto. Removes global auto-centering (margin: 0 auto) on wide viewports. Shifts orb+text block to left per owner instruction. v2.5.0 (2026-03-24): Coin orb restored. FIXED - Section 3: hekto-float animation — translateY (bounce) removed. Rock-only: rotateX/rotateY ±3deg clockwise/counterclockwise per owner instruction. RESTORED- Section 3: hero-coin gold radial-gradient background + 3D box-shadow. RESTORED- Section 3: ::before shine (radial + conic sparkle) and ::after sweep (rotating glint). RESTORED- Section 3: coin-mark — border-radius: 50% removed (was clipping logo). Position absolute, 64%×64%, object-fit: contain. Filter drop-shadow restored. hekto-mark-counter animation restored (counter-rock vs coin body). RESTORED- Section 3: hero-coin-container max-width: 340px + aspect-ratio: 1. v2.4.0 (2026-03-24): Compliance fixes per audit 2026-03-24. ADDED - Section 4: .page-hekto a:hover filter: brightness(0.85). PIL-06 §7. ADDED - Section 10: [data-theme="dark"] .compliance-disclaimer dark surface override. Background rgba(245,176,20,0.07) + border rgba(245,176,20,0.18) per DOC-01 §2.6. FIXED - Section 3: .hero-wrap min-height: 720px → var(--hero-min). Token pattern. ADDED - Section 3: .page-hekto .hero min-height: var(--hero-min). §7.1 HARD RULE. ADDED - Section 3: .headline font-size canonical pillar override. §7.2.1. ADDED - Section 3: .hero-actions flex rule. §7.2.5. FIXED - Section 9 @media 768px: .hero min-height added to match wrap 480px. §7.1. FIXED - Section 9 @media 480px: .hero match added, floor raised 360px → 480px (was below §7.2.6 minimum 400px), button stack added. §7.1 + §7.2.6. v2.2.0 (2026-03-04): Card border + F7 fix. FIXED - All card accent borders: 1.5px → 4px solid var(--page-primary). Matches global.css canonical .card border-left weight (4px). Owner decision: 4px canonical weight takes precedence over PIL-06 §6 1.5px spec. PIL-06 §6 flagged for update. FIXED - F7: .cta-card .sdx-btn-primary margin-top: 1.5rem → margin-top: auto. padding-top: 1.5rem preserves visual gap. HOWTO F7 hard rule satisfied. v2.1.0 (2026-03-04): Layout restoration + icon spec. FIXED - how-number: large display step number style per Living Tower reference. FIXED - technical-grid: 2-col grid restored with tech-card surface rules. FIXED - tech-icon: tinted circle background using page tokens. FIXED - feature-icon: inline colour styles removed, CSS class colouring. FIXED - cta-card-grid: 2-col grid, flex-column + margin-top:auto per HOWTO F7. FIXED - hero-coin: float animation + sizing restored. ADDED - compliance-disclaimer block styling. v2.0.0 (2026-03-04): Full spec rebuild per SDL-HOWTO v1.3.0. FIXED - B9/H4: color var(--fg). FIXED F1/F2/I5: card border/bg. FIXED B8: hex. FIXED - D6/E1: btn-hero-primary gradient. FIXED E2b: scoped color #fff. FIXED - J1/J2: badge no gradient/shadow. FIXED H1/H2: dark mode surfaces. ====================================================================================================== */ /* 0) Header and dependency notes depends on: global.css, themes.css, partials/header.css, partials/footer.css PIL-06 §3: NO overlay. Bottom vignette only. Opacity max 0.25. PIL-06 §6: card bg var(--card), border 1.5px solid var(--page-primary). */ /* ====================================================================================================== 1) Page variable binding — PIL-06 §2 LOCKED ====================================================================================================== */ .page-hekto { --page-bg: #f1ede4; --page-primary: var(--sdx-color-teal-deep); --page-secondary: var(--sdx-color-green-deep); --page-accent: var(--sdx-color-mama-amber); --page-depth: var(--sdx-color-stem-olive); --page-dark-base: var(--sdx-color-hekto-dark-base); --page-dark-surface: var(--sdx-color-hekto-dark-surface); /* HEKTO material language: paper, bridge stone, moss and accepted-value gold. */ --hekto-paper: #faf7f0; --hekto-paper-deep: #f1ede4; --hekto-stone: #292d28; --hekto-stone-raised: #363b34; --hekto-stone-line: #62675a; --hekto-moss: #52613a; --hekto-gold: #be9237; --hekto-gold-light: #d5b466; --hekto-ink: #192027; --hero-image: url("/assets/images/hekto/hekto-hero.webp"); --hero-vignette-from: rgba(47, 92, 104, 0.20); --hero-vignette-to: rgba(47, 92, 104, 0); } /* ====================================================================================================== 2) Base page surfaces FIXED v2.0.0: var(--fg) — DOC-02 §4.6. --sdx-color-slate is static, invisible in dark mode. ====================================================================================================== */ .page-hekto { background: var(--page-bg); color: var(--fg); } /* ====================================================================================================== 3) Hero PIL-06 §3: NO colour overlay. Bottom vignette 0.20 opacity, 32% fade. ====================================================================================================== */ .page-hekto .hero-wrap { background-image: var(--hero-image); background-size: cover; background-position: center 45%; min-height: var(--hero-min); /* FIXED v2.3.0: was 720px — replaced with token per §7.1 */ } /* DOC-02 §7.1 HARD RULE: .hero min-height must match .hero-wrap. */ .page-hekto .hero { min-height: var(--hero-min); display: flex; align-items: center; } .page-hekto .hero-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to top, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 32% ); } /* DOC-02 §7.2.1 canonical pillar headline override */ .page-hekto .headline { font-size: clamp(2.75rem, 6vw, 4.5rem); } /* DOC-02 §7.2.5: global.css does not define .hero-actions — page CSS must own this. */ .page-hekto .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; } /* Hero coin — JS controls visibility. Sits in .hero-orb column of .hero-grid. RESTORED v2.5.0: gold coin, rock-only animation (no bounce), shine + sweep pseudo-elements, unclipped coin-mark. */ /* Local override — supersedes global.css .hero-orb (max-width: 420px). */ .page-hekto .hero-orb { width: 100%; max-width: 200px; justify-self: center; } /* Bridge-anchored composition. The copy is pulled onto the main arch centre while the smaller seal rests against the city-side wall shoulder. */ .page-hekto .hero-grid.has-hero-orb { grid-template-columns: 230px minmax(0, 1fr) 230px; width: 100%; } .page-hekto .hero-grid.has-hero-orb .hero-orb { justify-self: end; transform: translate(-1.25rem, -3.25rem); } .page-hekto .hero-grid.has-hero-orb .hero-body { grid-column: 2; justify-self: center; text-align: center; transform: translateX(-4.75rem); } .page-hekto #hero-standard { width: min(46rem, 100%); } .page-hekto .hero-coin-container { width: 100%; max-width: 200px; } .page-hekto .hero-coin { position: relative; width: 100%; aspect-ratio: 1; /* enforces square regardless of parent height */ border-radius: 50%; background: radial-gradient(circle at 35% 30%, #efe0ac 0%, #d6b75e 52%, #a97d2f 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } /* Coin rim — inset ring + depth shadow */ .page-hekto .coin-rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.20), inset 0 0 0 12px rgba(77, 55, 18, 0.12); } /* Restrained static highlight; no sparkle or animated sweep. */ .page-hekto .hero-coin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(125deg, transparent 18%, rgba(255, 255, 255, 0.20) 42%, transparent 64%); opacity: 0.55; } .page-hekto .hero-coin::after { content: none; } /* Coin logo — unclipped, percentage-sized, counter-rocks with parent */ .page-hekto .coin-mark { position: absolute; inset: 0; margin: auto; width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)); } /* ====================================================================================================== 4) Typography overrides NOTE: .tagline explicit amber — DOC-01 §4. --page-secondary = green-deep on HEKTO. Flagged for PIL-06 §2 owner decision. ====================================================================================================== */ .page-hekto .tagline { color: var(--sdx-color-mama-amber); } /* PIL-06 §7: link hover brightness(0.85). WCAG ≥3:1 change. */ .page-hekto a:hover { filter: brightness(0.85); } /* ====================================================================================================== 5) Sections and alternation Section-title divider: override global amber → page-primary (teal-deep) at 55% (light) / 35% (dark). Owner decision: each pillar uses its own colour for section-title underline. border-bottom-color only — text-align/font/weight not overridable per DOC-02 §4.1. margin-bottom not on prohibited list — adds clearance below bar line (global sets margin:0). Matches eco-guilds.css §5 pattern. ====================================================================================================== */ .page-hekto .section-title, .page-hekto .sdx-card-section > h2 { border-bottom-color: color-mix(in srgb, var(--page-primary) 55%, transparent); margin-bottom: 1.75rem; } [data-theme="dark"] .page-hekto .section-title, [data-theme="dark"] .page-hekto .sdx-card-section > h2 { border-bottom-color: color-mix(in srgb, var(--page-primary) 35%, transparent); } .page-hekto .sdx-section, .page-hekto .section { background: var(--hekto-paper); } .page-hekto .sdx-section:nth-child(even), .page-hekto .section:nth-child(even) { background: rgba(47, 92, 104, 0.08); } /* ====================================================================================================== 6) Cards and tiles PIL-06 §6: var(--card) bg, 1.5px solid var(--page-primary) border. DOC-03 §8.6: badges — low-opacity tint only, no gradient, no box-shadow. ====================================================================================================== */ .page-hekto .card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--page-primary); } .page-hekto .card h3 { color: var(--page-primary); } .page-hekto .badge, .page-hekto .stat-number { display: inline-block; padding: 0.2rem 0.625rem; background: rgba(47, 92, 104, 0.14); color: var(--page-primary); font-size: 0.75rem; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .page-hekto .badge-dot { background: var(--sdx-color-leaf-green); } .page-hekto .badge-outline { background: transparent; border: 1px solid var(--sdx-color-mama-gold); color: var(--sdx-color-mama-gold); } /* ====================================================================================================== 7) Buttons and CTAs PIL-06 §5.1 gradient. DOC-03 §8.2.1 explicit hero override. E2b scoped color. ====================================================================================================== */ .page-hekto .btn-hero-primary { background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.25); } .page-hekto .btn-hero-secondary { background: rgba(41, 45, 40, 0.84); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.30); } .page-hekto .btn-hero-secondary:hover, .page-hekto .btn-hero-secondary:focus-visible { background: rgba(41, 45, 40, 0.94); box-shadow: 0 7px 24px rgba(0, 0, 0, 0.54), 0 3px 10px rgba(0, 0, 0, 0.34); } .page-hekto .sdx-btn-primary { background: linear-gradient(145deg, var(--page-primary) 0%, var(--page-secondary) 100%); color: #ffffff; box-shadow: 0 4px 16px rgba(47, 92, 104, 0.28); } .page-hekto .sdx-btn-primary, .page-hekto .sdx-btn-primary:visited { color: #ffffff; } /* ====================================================================================================== 8) Page modules ====================================================================================================== */ /* --- US/CA perimeter sticky notice --- #ffffff text: permanent exception — dark photographic surface, no token covers this. Gradient: page tokens resolve to teal-deep → stem-olive. */ .page-hekto .us-perimeter-notice { position: sticky; top: 0; background: linear-gradient(135deg, var(--page-secondary) 0%, var(--page-depth) 100%); color: #ffffff; padding: 1rem 1.25rem; text-align: center; border-bottom: 3px solid var(--page-primary); z-index: 999; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); display: none; /* Hidden by default — JS shows for US/CA users only */ } .page-hekto .us-perimeter-notice p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: #ffffff; } .page-hekto .us-perimeter-notice strong { font-weight: 700; } /* --- Compliance disclaimer --- */ .page-hekto .compliance-disclaimer { background: #f3f0e9; border: 1px solid #d4cec0; border-left: 3px solid var(--hekto-moss); border-radius: var(--radius); padding: 1.5rem 2rem; margin-top: 1.5rem; } .page-hekto .compliance-disclaimer h4 { color: var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: var(--h4); margin: 0 0 0.75rem; } .page-hekto .compliance-disclaimer p, .page-hekto .compliance-disclaimer li { color: var(--muted); line-height: 1.6; } /* --- Technical grid: 2-col --- */ .page-hekto .technical-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } /* Verified ledger: bridge-stone rather than a cold fintech/crypto island. */ .page-hekto .technical-ledger { position: relative; overflow: hidden; background: linear-gradient(145deg, #30342f 0%, var(--hekto-stone) 62%, #242823 100%); border: 1px solid #575c50; box-shadow: 0 16px 38px rgba(41, 45, 40, 0.18); } .page-hekto .technical-ledger::after { content: none; } .page-hekto .technical-ledger > * { position: relative; z-index: 1; } .page-hekto .technical-ledger .section-title, .page-hekto .technical-ledger .section-intro { color: #f3ede0; } .page-hekto .technical-ledger .section-title { border-bottom-color: rgba(190, 146, 55, 0.58); } .page-hekto .tech-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--page-primary); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--card-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; display: flex; flex-direction: column; } .page-hekto .technical-ledger .tech-card { background: var(--hekto-stone-raised); border-color: var(--hekto-stone-line); border-left-color: var(--hekto-gold); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16); backdrop-filter: none; transition: border-color 0.2s ease; } .page-hekto .technical-ledger .tech-card:hover { background: var(--hekto-stone-raised); border-color: #7b806f; border-left-color: var(--hekto-gold); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16); transform: none; } .page-hekto .technical-ledger .tech-card h3 { color: #f3ede0; } .page-hekto .technical-ledger .tech-settlement-value, .page-hekto .technical-ledger .tech-link a, .page-hekto .technical-ledger .section-contact a { color: var(--sdx-color-mama-amber); } .page-hekto .technical-ledger .tech-detail, .page-hekto .technical-ledger .tech-code code, .page-hekto .technical-ledger .muted, .page-hekto .technical-ledger .section-contact { color: rgba(243, 237, 224, 0.82); } .page-hekto .technical-ledger .tech-icon:not(.tech-icon-img) { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.28); } .page-hekto .technical-ledger .tech-badge { background: rgba(190, 146, 55, 0.16); color: var(--hekto-gold-light); } .page-hekto .tech-card:hover { transform: none; } .page-hekto .tech-card h3 { color: var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: var(--h3); margin: 0.75rem 0 0.5rem; } /* Tech icon: tinted circle container */ .page-hekto .tech-icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(47, 92, 104, 0.12); border: 1px solid rgba(47, 92, 104, 0.20); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .page-hekto .tech-icon img { width: 2.8rem; height: 2.8rem; display: block; } /* Canonical HEKTO mark — no decorative holder or rounded crop */ .page-hekto .tech-icon-img { width: 2.75rem; height: 2.75rem; background: #f5efe0; border: 0; border-radius: 0; } .page-hekto .tech-icon-img img { width: 2rem; height: 2rem; border-radius: 0; object-fit: contain; } .page-hekto .tech-detail { font-size: var(--body); color: var(--fg); margin: 0.25rem 0; } .page-hekto .tech-code { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; } .page-hekto .tech-code code { font-size: 0.75rem; color: var(--fg); word-break: break-all; font-family: monospace; } .page-hekto .copy-btn { background: rgba(47, 92, 104, 0.10); border: 1px solid var(--border); border-radius: 4px; padding: 0.25rem; cursor: pointer; display: inline-flex; align-items: center; color: var(--page-primary); transition: background 0.2s ease; flex-shrink: 0; } .page-hekto .copy-btn:hover { background: rgba(47, 92, 104, 0.20); } .page-hekto .technical-ledger .copy-btn { color: var(--sdx-color-mama-amber); background: color-mix(in srgb, var(--sdx-color-mama-amber) 12%, transparent); border-color: color-mix(in srgb, var(--sdx-color-mama-amber) 46%, transparent); } .page-hekto .technical-ledger .copy-btn:hover, .page-hekto .technical-ledger .copy-btn:focus-visible { color: var(--sdx-color-mama-amber); background: color-mix(in srgb, var(--sdx-color-mama-amber) 23%, transparent); border-color: var(--sdx-color-mama-amber); } /* Colour Map: amber is the universal interactive accent on dark surfaces. Explicit states prevent global.css's generic coral hover from entering the ledger. */ .page-hekto .technical-ledger a.technical-direct-link, .page-hekto .technical-ledger a.technical-direct-link:link, .page-hekto .technical-ledger a.technical-direct-link:visited, .page-hekto .technical-ledger a.technical-direct-link:hover, .page-hekto .technical-ledger a.technical-direct-link:focus-visible { color: var(--sdx-color-mama-amber); } .page-hekto .technical-ledger a.technical-direct-link:hover, .page-hekto .technical-ledger a.technical-direct-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } .page-hekto .tech-link { margin: 0.25rem 0; } .page-hekto .tech-link a { color: var(--page-primary); font-size: var(--small); font-weight: 500; } .page-hekto .tech-card-resources { gap: 0.35rem; } .page-hekto .resource-link { margin: 0.15rem 0; } .page-hekto .resource-link a { display: grid; grid-template-columns: 2.35rem 1fr; align-items: center; gap: 0 0.8rem; padding: 0.75rem; border: 1px solid #62675a; border-radius: 0.4rem; background: #30352f; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; } .page-hekto .resource-link a::before { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.35rem; height: 2.7rem; border-radius: 0.25rem; background: #f3ede0; color: var(--hekto-stone); font: 700 0.63rem/1 var(--body-font); letter-spacing: 0.04em; box-shadow: inset 0 -3px 0 var(--hekto-gold); } .page-hekto .resource-link-pdf a::before { content: "PDF"; } .page-hekto .resource-link-json a::before { content: "JSON"; font-size: 0.52rem; } .page-hekto .resource-link a:hover, .page-hekto .resource-link a:focus-visible { background: #3a4038; border-color: var(--hekto-gold); color: var(--sdx-color-mama-amber); } .page-hekto .resource-link small { color: rgba(243, 237, 224, 0.66); font-size: 0.68rem; } .page-hekto .tech-settlement-value { font-size: 1.5rem; font-weight: 700; color: var(--page-secondary); margin: 0.5rem 0; font-family: var(--headline-font); } .page-hekto .tech-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.625rem; background: rgba(47, 92, 104, 0.12); color: var(--page-primary); font-size: 0.75rem; font-weight: 600; border-radius: 4px; margin: 0.5rem 0; } .page-hekto .section-contact { text-align: center; margin-top: 2.5rem; color: var(--muted); } .page-hekto .section-contact a { color: var(--page-primary); font-weight: 500; } /* --- How it works: step number style per Living Tower reference --- */ .page-hekto .how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 2rem; } .page-hekto .how-card { position: relative; background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--page-primary); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--card-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; display: flex; flex-direction: column; } .page-hekto .how-card::after { content: "→"; position: absolute; z-index: 2; right: -2rem; top: 1.55rem; color: var(--page-primary); font-size: 1.5rem; font-weight: 700; } .page-hekto .how-card:nth-child(3)::after, .page-hekto .how-card:nth-child(6)::after { content: none; } .page-hekto .how-card:hover { transform: none; box-shadow: var(--card-shadow); } /* Display number — large, low-opacity, serif. Zero-pad applied in HTML ("01"–"06"). */ .page-hekto .how-number { font-family: var(--headline-font); display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: linear-gradient(145deg, var(--page-primary), var(--page-secondary)); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; opacity: 1; box-shadow: 0 6px 14px rgba(47, 92, 104, 0.22); margin-bottom: 0.875rem; } .page-hekto .how-card h3 { color: var(--fg); font-family: var(--headline-font); font-weight: 700; font-size: var(--h3); margin: 0 0 0.75rem; } .page-hekto .how-card p { color: var(--muted); line-height: 1.6; flex-grow: 1; margin: 0; } /* --- HektoBag features --- */ .page-hekto .hektobag-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .page-hekto #how-it-works { background: radial-gradient(circle at 100% 0%, rgba(190, 146, 55, 0.10), transparent 34%), linear-gradient(180deg, #f7f3eb, #ebe7de); } .page-hekto #hektobag { background: radial-gradient(circle at 0% 100%, rgba(82, 97, 58, 0.12), transparent 38%), var(--hekto-paper); } .page-hekto .feature-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--page-primary); border-radius: var(--radius); padding: 2rem; box-shadow: var(--card-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; } .page-hekto .feature-card:hover { transform: none; box-shadow: var(--card-shadow); } /* Feature icon circle — tinted, uses page-primary colour */ .page-hekto .feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(47, 92, 104, 0.12); border: 1px solid rgba(47, 92, 104, 0.20); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--page-primary); } .page-hekto .feature-icon img { width: 2.8rem; height: 2.8rem; display: block; } .page-hekto .feature-card h3 { color: var(--fg); font-family: var(--headline-font); font-weight: 700; font-size: var(--h3); margin: 0 0 0.5rem; } .page-hekto .feature-card p { color: var(--muted); line-height: 1.6; } /* HektoBag conversion: the legal mechanism made visually explicit. */ .page-hekto .hektobag-conversion { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: stretch; gap: 1.25rem; margin-top: 2rem; padding: 1.4rem; border: 1px solid #c8c1b1; border-radius: var(--radius); background: linear-gradient(135deg, rgba(82, 97, 58, 0.10), rgba(190, 146, 55, 0.11)); } .page-hekto .hektobag-threshold, .page-hekto .hektobag-output { display: grid; place-items: center; align-content: center; min-height: 9.5rem; padding: 1rem; text-align: center; border-radius: 0.45rem; background: var(--card); box-shadow: var(--card-shadow); } .page-hekto .hektobag-threshold span, .page-hekto .hektobag-threshold small, .page-hekto .hektobag-output small { color: var(--muted); } .page-hekto .hektobag-threshold strong, .page-hekto .hektobag-output strong { margin: 0.35rem 0; color: var(--page-primary); font-family: var(--headline-font); font-size: clamp(1.6rem, 3vw, 2.2rem); } .page-hekto .hektobag-output img { width: 2.25rem; height: 2.25rem; margin-bottom: 0.25rem; } .page-hekto .hektobag-arrow { display: grid; place-items: center; color: var(--page-primary); font-size: 2rem; font-weight: 700; } .page-hekto .hektobag-legal { grid-column: 1 / -1; margin: 0; padding-top: 0.1rem; color: var(--muted); text-align: center; font-size: var(--small); font-weight: 600; } /* --- Principles grid --- */ .page-hekto .principles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .page-hekto .principle-card { background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--page-primary); border-radius: var(--radius); padding: 2rem; box-shadow: var(--card-shadow); transition: transform 0.28s ease, box-shadow 0.28s ease; } .page-hekto .principle-card:hover { transform: none; box-shadow: var(--card-shadow); } .page-hekto .principle-card h3 { color: var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: var(--h3); margin: 0 0 0.75rem; } .page-hekto .principle-card p { color: var(--muted); line-height: 1.6; } /* --- Audience card grid — two-card routing section. Mirrors reporters.css audience-grid pattern. */ .page-hekto .hekto-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2rem; } .page-hekto .hekto-audience-card { background: var(--card); border-radius: var(--radius); border-left: 4px solid var(--page-primary); box-shadow: var(--card-shadow); padding: 1.5rem; display: flex; flex-direction: column; transition: transform 0.30s ease, box-shadow 0.30s ease; } .page-hekto .hekto-audience-card:hover { transform: translateY(-0.1875rem); box-shadow: var(--card-shadow-hover); } /* Per-destination border-left — navigational colour coding */ .page-hekto .hekto-audience-card-buyers { border-left-color: var(--sdx-color-purple-deep); } .page-hekto .hekto-audience-card-farmers { border-left-color: var(--sdx-color-green-deep); } /* Icon + heading row */ .page-hekto .hekto-audience-card-top { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; } /* Icon: 4.6875rem canonical per reporters.css / contact.css */ .page-hekto .hekto-audience-icon { width: 4.6875rem; height: 4.6875rem; flex-shrink: 0; display: block; object-fit: contain; } /* h3: var(--fg) per reporters.css canonical */ .page-hekto .hekto-audience-card h3 { font-size: 1.125rem; font-weight: 600; color: var(--fg); margin: 0 0 0.875rem; line-height: 1.3; } .page-hekto .hekto-audience-card p { font-size: var(--body); color: var(--muted); line-height: 1.65; margin: 0 0 1.5rem; flex: 1; } /* CTA button — bottom-pinned via flex column. Class contains 'btn' — excluded from global.css coral catch-all [class*="btn"]. */ .page-hekto .hekto-audience-btn { display: inline-block; font-size: 0.9375rem; font-weight: 600; text-decoration: none; padding: 0.5rem 1.25rem; border-radius: 0.375rem; color: #ffffff; /* permanent exception — dark gradient stops on both buttons */ transition: filter 0.28s ease; align-self: center; } .page-hekto .hekto-audience-btn:hover { filter: brightness(1.08); } /* Pillar-canonical gradients — navigational colour coding. buyers → Viridians: purple-deep → teal-deep (canonical per DOC-03 §3). farmers → Eco Guilds: green-deep → stem-olive. */ .page-hekto .hekto-audience-btn-buyers { background: linear-gradient(145deg, var(--sdx-color-purple-deep) 0%, var(--sdx-color-teal-deep) 100%); box-shadow: 0 4px 14px rgba(75, 42, 86, 0.28); } .page-hekto .hekto-audience-btn-farmers { background: linear-gradient(135deg, var(--sdx-color-green-deep) 0%, var(--sdx-color-stem-olive) 100%); box-shadow: 0 4px 14px rgba(46, 93, 58, 0.28); } [data-theme="dark"] .page-hekto .hekto-audience-card { background: var(--page-dark-surface); } /* Keep the concise closing proposition on one desktop line without forcing nowrap or creating overflow at narrower widths. */ .page-hekto .sdx-cta-band-inner { max-width: 62rem; } /* ====================================================================================================== 9) Media queries ====================================================================================================== */ @media (max-width: 960px) { .page-hekto .hero-grid.has-hero-orb { grid-template-columns: 1fr; } .page-hekto .hero-grid.has-hero-orb .hero-body { grid-column: 1; transform: none; } .page-hekto .hero-orb { display: none; transform: none; } } @media (max-width: 768px) { /* DOC-02 §7.1: both values must match at every breakpoint */ .page-hekto .hero-wrap { min-height: 480px; background-position: center 40%; } .page-hekto .hero { min-height: 480px; } .page-hekto .hero-grid.has-hero-orb { grid-template-columns: 1fr; } .page-hekto .hero-grid.has-hero-orb .hero-body { grid-column: 1; } .page-hekto .hero-orb { display: none; } .page-hekto .technical-grid { grid-template-columns: 1fr; } .page-hekto .how-grid { grid-template-columns: 1fr; gap: 2.4rem; } .page-hekto .how-card::after, .page-hekto .how-card:nth-child(3)::after { content: "↓"; right: 50%; top: auto; bottom: -2.1rem; transform: translateX(50%); } .page-hekto .how-card:nth-child(6)::after { content: none; } .page-hekto .hektobag-conversion { grid-template-columns: 1fr; } .page-hekto .hektobag-arrow { min-height: 1.5rem; transform: rotate(90deg); } .page-hekto .hektobag-legal { grid-column: 1; } .page-hekto .hekto-audience-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* DOC-02 §7.1 + §7.2.6: floor raised from 360px (below 400px minimum) to 480px */ .page-hekto .hero-wrap, .page-hekto .hero { min-height: 480px; } .page-hekto .hero { padding: 3rem 1.25rem; } .page-hekto .hero-actions { flex-direction: column; } .page-hekto .hero-actions a, .page-hekto .hero-actions .btn-hero-primary, .page-hekto .hero-actions .btn-hero-secondary { width: 100%; text-align: center; justify-content: center; } } /* ====================================================================================================== 10) Dark mode — PIL-06 §8 ====================================================================================================== */ [data-theme="dark"] .page-hekto { background: var(--page-dark-base); --card: var(--page-dark-surface); --surface-alt: var(--page-dark-surface); } [data-theme="dark"] .page-hekto .section-title, [data-theme="dark"] .page-hekto .sdx-section > h2, [data-theme="dark"] .page-hekto .sdx-card-section h2 { color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-hekto .sdx-section, [data-theme="dark"] .page-hekto .section { background: var(--page-dark-surface); } [data-theme="dark"] .page-hekto .sdx-section:nth-child(even), [data-theme="dark"] .page-hekto .section:nth-child(even) { background: rgba(47, 92, 104, 0.14); } [data-theme="dark"] .page-hekto #how-it-works, [data-theme="dark"] .page-hekto #hektobag { background: radial-gradient(circle at 100% 0%, rgba(52, 198, 208, 0.08), transparent 36%), var(--page-dark-surface); } [data-theme="dark"] .page-hekto .card, [data-theme="dark"] .page-hekto .feature-card, [data-theme="dark"] .page-hekto .principle-card, [data-theme="dark"] .page-hekto .hekto-audience-card { border-left-color: var(--sdx-color-mama-cyan); } [data-theme="dark"] .page-hekto .how-card { border-top-color: var(--sdx-color-mama-cyan); } [data-theme="dark"] .page-hekto .feature-icon { color: var(--sdx-color-mama-cyan); background: rgba(52, 198, 208, 0.09); border-color: rgba(52, 198, 208, 0.28); } [data-theme="dark"] .page-hekto .hekto-audience-icon, [data-theme="dark"] .page-hekto .hekto-output-icon { padding: 0.4rem; border: 1px solid rgba(from var(--page-primary) r g b / 0.30); border-radius: 50%; background: var(--sdx-color-hekto-bg); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28); object-fit: contain; } [data-theme="dark"] .page-hekto .hekto-output-icon { padding: 0.3rem; } [data-theme="dark"] .page-hekto .hektobag-conversion { border-color: rgba(52, 198, 208, 0.30); background: linear-gradient(135deg, rgba(52, 198, 208, 0.07), rgba(245, 176, 20, 0.06)); } [data-theme="dark"] .page-hekto .hektobag-threshold strong, [data-theme="dark"] .page-hekto .hektobag-output strong, [data-theme="dark"] .page-hekto .hektobag-arrow { color: var(--sdx-color-mama-cyan); } [data-theme="dark"] .page-hekto .tech-card, [data-theme="dark"] .page-hekto .how-card, [data-theme="dark"] .page-hekto .feature-card, [data-theme="dark"] .page-hekto .principle-card, [data-theme="dark"] .page-hekto .tech-card h3, [data-theme="dark"] .page-hekto .principle-card h3 { color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-hekto .compliance-disclaimer { background: rgba(245, 176, 20, 0.07); border-color: rgba(245, 176, 20, 0.18); border-left-color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-hekto .compliance-disclaimer h4 { color: var(--sdx-color-mama-amber); }