/* ============================================================ CoopLink Landing - Dark mode Applies when has class "dark" (toggled by dark-mode.js). Light mode is the default; this file only affects dark mode. ============================================================ */ html.dark{ --parchment:#101A17; --parchment-2:#172320; --ink:#F1E7D6; --ink-2:#FBF6EA; --body:#C9B9A3; --body-dark:rgba(241,231,214,0.8); --canopy:#3FA98F; --forest:#0B1210; --moss:#2F8F7D; --mint:#9FDCC9; --ochre:#E0B96A; --clay:#D98A63; --kraft:#3A4A43; color-scheme:dark; } /* ---------- nav ---------- */ html.dark nav{background:rgba(15,23,20,0.92);border-bottom-color:var(--kraft)} html.dark .nav-links a{color:rgba(241,231,214,0.78)} html.dark .nav-links a:hover{color:var(--mint)} html.dark .nav-cta{background:var(--canopy);color:#0C1512 !important} html.dark .nav-cta:hover{box-shadow:0 8px 18px rgba(63,169,143,0.3)} /* brand wordmark + mark (inline-styled in the HTML) */ html.dark .brand-name span:first-child{color:#6BC5A8 !important} html.dark .brand-name span:last-child{color:#E09A72 !important} html.dark .brand-mark svg circle{stroke:#F1E7D6} html.dark .brand-mark svg path:first-of-type{fill:#3FA98F} html.dark .brand-mark svg path:last-of-type{fill:#D98A63} /* ---------- hardcoded light surfaces ---------- */ html.dark .aud-card, html.dark .lv-card, html.dark .person, html.dark .pillar{background:#172320} html.dark .aud-card.featured{background:linear-gradient(180deg,rgba(63,169,143,0.12),#172320 55%)} html.dark .sync .node-box, html.dark .chain .cp-ring{fill:#172320} /* ---------- steward card ("The record belongs to the cooperative") ---------- */ html.dark .steward{background:#172320;border-color:var(--kraft)} /* ---------- phone mockup: keep a dark frame + light screen in dark mode ---------- */ html.dark .phone{background:#0B1210;box-shadow:0 26px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(241,231,214,0.16)} html.dark .phone-screen{background:#FBF6EA} html.dark .ph-field b{color:#2B1B12} /* ---------- meta / label text (#8a6f52 family) ---------- */ html.dark .src, html.dark .lv-sub, html.dark .lv-note, html.dark .phone-cap, html.dark .sync-cap, html.dark .seats-k, html.dark .lv-k, html.dark .sdg-k, html.dark .noimg::before{color:#B8A48C} /* ---------- headings ---------- */ html.dark h1,html.dark h2,html.dark h3{color:var(--ink)} /* ---------- dusk (dark problem band, keeps its dark look) ---------- */ html.dark .dusk{background:#0B1210;color:#F1E7D6} html.dark .dusk h2,html.dark .dusk .ft,html.dark .dusk .frag-note{color:#F1E7D6} html.dark .dusk .lede,html.dark .dusk p{color:#C9B9A3} html.dark .dusk .src,html.dark .dusk .fk{color:#B8A48C} html.dark .lv-bar{background:rgba(241,231,214,0.12)} html.dark .closing.has-photo h2{color:#F1E7D6} html.dark .closing.has-photo .btn-quiet{color:#F1E7D6} /* ---------- hero ---------- */ html.dark .hero-photo .btn-solid{background:#F1E7D6;color:#2B1B12} html.dark .hero-photo .btn-solid:hover{box-shadow:0 12px 26px rgba(0,0,0,0.45)} html.dark .hero-photo .fact b{color:var(--mint)} html.dark .hero-photo .fact span{color:rgba(241,231,214,0.62)} /* ---------- footer ---------- */ html.dark footer{background:#0B1210;border-top:1px solid var(--kraft)} html.dark footer .brand-name{color:var(--parchment) !important} /* ---------- contact popup ---------- */ html.dark .cx-card{background:#172320} html.dark .cx-form input,html.dark .cx-form textarea,html.dark .cx-form select{background:#101A17;color:var(--ink);border-color:var(--kraft)} html.dark .cx-form label span{color:#B8A48C} html.dark .cx-send{color:#0C1512} html.dark .cx-close{color:var(--body)} html.dark .cx-alt{color:#B8A48C} html.dark .cx-alt a{color:var(--mint)} /* ---------- splash ---------- */ html.dark #cl-splash{background:#101A17} html.dark #cl-splash .cl-word{color:#F1E7D6} html.dark #cl-splash .cl-word span:first-child{color:#6BC5A8} html.dark #cl-splash .cl-word span:last-child{color:#E09A72} html.dark #cl-splash .cl-tag{color:var(--mint)} html.dark #cl-splash .cl-skip{color:#9A8F76} html.dark #cl-splash .cl-mark circle{stroke:#F1E7D6} html.dark #cl-splash .cl-mark line{stroke:#F1E7D6} html.dark #cl-splash .cl-mark path:first-of-type{fill:#3FA98F} html.dark #cl-splash .cl-mark path:last-of-type{fill:#D98A63} html.dark #cl-splash .cl-stem{stroke:#3FA98F} html.dark #cl-splash .cl-leaf{fill:#3FA98F} html.dark #cl-splash .cl-leaf-r, html.dark #cl-splash .cl-bud-r{fill:#2F8F7D} html.dark #cl-splash .cl-seed{fill:#E0B96A} html.dark #cl-splash .cl-shadow{fill:rgba(241,231,214,0.12)} /* ---------- dark-mode switch (in both modes, tuned per mode) ---------- */ .dm-switch{position:relative;display:inline-flex;align-items:center;justify-content:space-between;width:58px;height:30px;padding:0 7px;border:1px solid rgba(43,27,18,0.28);border-radius:999px;background:rgba(43,27,18,0.06);cursor:pointer;flex:none;transition:border-color .2s ease,background .2s ease} .dm-switch:hover{border-color:var(--canopy)} .dm-switch .dm-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#FBF6EA;box-shadow:0 1px 4px rgba(20,12,8,0.35);transition:transform .22s cubic-bezier(.4,1.2,.4,1),background .2s ease} .dm-switch .dm-ico{font-size:13px;line-height:1;color:#8a6f52;pointer-events:none;transition:color .2s ease} .dm-switch .dm-sun{color:var(--ochre)} .dm-switch .dm-moon{color:#7a6248} html.dark .dm-switch{background:rgba(241,231,214,0.1);border-color:rgba(241,231,214,0.25)} html.dark .dm-switch .dm-knob{background:#F1E7D6;transform:translateX(28px)} html.dark .dm-switch .dm-sun{color:#B8A48C} html.dark .dm-switch .dm-moon{color:var(--mint)} .dm-switch:focus-visible{outline:2px solid var(--canopy);outline-offset:2px}