/* ========================================================= Jungle Root — premium "Verified Origin Dossier" system. Shared across ALL pages. Reskins the original light-theme components to the dark editorial-apothecary palette so the whole site matches the home page. Layered on top of jr.css. ========================================================= */ :root{ --green-950:#081A13; --mono:"IBM Plex Mono", ui-monospace, monospace; } /* ---------- Atmosphere (added via .atmos/.grain divs on every page) ---------- */ body{ background:var(--green-950); color:var(--cream); } .atmos{ position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(130% 80% at 78% -5%, rgba(212,175,55,0.10), transparent 55%), radial-gradient(120% 90% at 0% 100%, rgba(30,70,50,0.55), transparent 60%), linear-gradient(180deg, #0c2018 0%, var(--green-950) 60%, #06140e 100%); } .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Section backgrounds → transparent so atmosphere shows ---------- */ .bg-cream, .bg-cream2, .bg-paper{ background:transparent !important; } .bg-cream2{ background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent) !important; } .bg-green{ background:radial-gradient(120% 120% at 50% 0%, #0c2018, #050f0a) !important; } .section{ position:relative; border-top:1px solid rgba(212,175,55,.12); } .section:first-of-type{ border-top:0; } /* ---------- Typography on dark ---------- */ h1,h2,h3,h4{ color:var(--cream); } .section-title{ font-weight:400; letter-spacing:-.01em; color:var(--cream); } .lede{ color:rgba(250,246,236,.66); } .bg-green .lede{ color:rgba(250,246,236,.72); } p{ color:rgba(250,246,236,.7); } .prose p{ color:rgba(250,246,236,.7); } .prose p.first::first-letter{ color:var(--gold); } .pull{ color:var(--cream); border-left-color:var(--gold); } /* eyebrow → mono gold kicker with hairline */ .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--gold); } .eyebrow::before{ background:var(--gold); opacity:.8; } .eyebrow.on-dark{ color:var(--gold); } .tagline{ color:var(--gold); } .link-arrow{ color:var(--gold-soft); } .on-dark.link-arrow, .link-arrow{ color:var(--gold); } /* ---------- Page hero (subpages) — premium dark editorial ---------- */ .page-hero{ background:transparent; border-bottom:1px solid rgba(212,175,55,.12); padding-top:170px; } .page-hero::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(90% 80% at 85% 0%, rgba(212,175,55,.08), transparent 55%); pointer-events:none; } .page-hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:-.02em; } .page-hero .ghost-mark{ opacity:.07; } /* ---------- Cards → dark glass with gold hairline ---------- */ .card, .step, .founder image-slot, .values .v, .geo, .pack, .road, .map-card, .form-card, .ns, .product-hero image-slot, .media-row image-slot, .gallery image-slot{ background:rgba(255,255,255,0.025) !important; border:1px solid rgba(212,175,55,.16) !important; border-radius:4px; } .step:hover{ box-shadow:0 18px 50px rgba(0,0,0,.4); border-color:rgba(212,175,55,.3) !important; } .step .n{ color:rgba(212,175,55,.22); } .step h3, .pack h4, .road h4, .values .v h4, .ns h4, .tl h4, .bp h4{ color:var(--cream); } .step p, .pack p, .road p, .values .v p, .ns p, .tl p, .bp p, .geo-item span, .supply-cats + *{ color:rgba(250,246,236,.62); } .step .ic, .pack .ic, .bp .ic{ color:var(--gold) !important; } .bp .ic{ background:rgba(212,175,55,.14) !important; } /* values grid lines */ .values{ background:rgba(212,175,55,.12) !important; border-color:rgba(212,175,55,.16) !important; } /* geo / reach list */ .geo-item b{ color:var(--cream); } .geo .eyebrow{ color:var(--gold); } .badge{ color:var(--gold-soft) !important; background:rgba(212,175,55,.1) !important; border:1px solid rgba(212,175,55,.28); } .badge.gold{ color:var(--gold) !important; } /* ---------- Spec table on dark ---------- */ .spec-table{ border-top-color:rgba(212,175,55,.3); } .spec-table .row{ border-bottom-color:rgba(212,175,55,.12); } .spec-table .row dt{ color:var(--gold); } .spec-table .row dd{ color:var(--cream); } .spec-table .row dd small{ color:rgba(250,246,236,.5); } /* ---------- Roadmap (was on green) keeps dark ---------- */ .road{ border-color:rgba(212,175,55,.22) !important; } .road .tag{ color:var(--gold); border-color:rgba(212,175,55,.4); } /* ---------- Sourcing timeline ---------- */ .timeline::before{ background:linear-gradient(90deg, rgba(212,175,55,.2), var(--gold), rgba(212,175,55,.2)); } @media (max-width:860px){ .timeline::before{ background:linear-gradient(180deg, rgba(212,175,55,.2), var(--gold), rgba(212,175,55,.2)); } } .tl .node{ background:#0c2018; border-color:var(--gold); color:var(--gold); } .tl .n{ color:var(--gold); } .map-legend .lg{ color:rgba(250,246,236,.78); } /* ---------- Forms on dark ---------- */ .field label{ color:var(--gold); } .field label .req{ color:var(--gold-soft); } .field input, .field select, .field textarea{ background:rgba(255,255,255,0.03); border:1px solid rgba(212,175,55,.22); color:var(--cream); } .field input::placeholder, .field textarea::placeholder{ color:rgba(250,246,236,.32); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.14); outline:none; } .field select option{ background:#0c2018; color:var(--cream); } .form-note{ color:rgba(250,246,236,.5); } .form-success .check{ background:rgba(212,175,55,.18); } .form-success h3{ color:var(--cream); } .fc-head .eyebrow, .form-card .eyebrow{ color:var(--gold); } .form-card h2, .contact-aside h2{ color:var(--cream); } .ra p, .reassure .ra p{ color:rgba(250,246,236,.62); } .ra svg{ color:var(--gold); } .direct{ border-top-color:rgba(212,175,55,.18); } .direct h4{ color:var(--gold); } .direct a{ color:var(--cream); } .direct a:hover{ color:var(--gold); } /* ns step connector arrow */ .ns .num{ color:var(--gold); } .ns::after{ color:rgba(212,175,55,.3); } /* ---------- Buttons: ghost on dark by default ---------- */ .btn-ghost.on-light{ color:var(--cream); border-color:rgba(250,246,236,.4); } .btn-ghost.on-light:hover{ border-color:var(--cream); background:rgba(250,246,236,.08); } .btn-solid{ background:var(--gold); color:var(--green-900); border-color:var(--gold); } .btn-solid:hover{ background:var(--gold-soft); } /* ---------- Footer already dark; tighten ---------- */ .site-footer{ background:#06140e; border-top:1px solid rgba(212,175,55,.16); } /* ---------- Premium helpers reused from home (available to all) ---------- */ .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:12px; } .kicker::before{ content:""; width:30px; height:1px; background:var(--gold); opacity:.8; } .sec-no{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(40px,7vw,96px); line-height:.8; color:rgba(212,175,55,.16); } /* ---------- Audit fix: page-inline styles set these to dark colors for the old light theme; force light-on-dark (·!important beats the later inline