/* ============================================================ skins.css — Boyle Heights Bestie palette switcher 5 rotatable palettes. Each skin only redefines the COLOR tokens; every surface in site.css already reads these vars, so the whole page re-inks from one attribute: . Switcher UI + persistence live in assets/js/skins.js (append ?skins). Roles: --cobalt = primary · --red = warm / Movement accent · --yellow = CTA / marigold · --green = Wealth / community · --cta / --cta-fg = emphasis button (.btn.red) ============================================================ */ /* 1 · LA COBALTA — Metztli's Jul-14 brand-direction palette. Cobalt + marigold + terracotta + sage + espresso on warm cream. Sage deepened to #6F8A54 (from her #8FA26E) so it clears AA on cream. */ [data-skin="cobalta"]{ --paper:#FAF5EB; --paper-2:#FFFBF0; --ink:#46342C; --ink-soft:#7C6A5C; --cobalt:#1C52B8; --red:#C86B44; --yellow:#F6B32E; --green:#6F8A54; --cta:#1C52B8; --cta-fg:#FAF5EB; /* her spec: blue button, cream text */ } /* 2 · LA BESTIE — pulled pixel-exact from her hand-drawn logo doodle (royal-blue wordmark, jersey red/green, marigold flowers). */ [data-skin="bestie"]{ --paper:#FAF5EB; --paper-2:#FFFBF0; --ink:#241A10; --ink-soft:#5f5346; --cobalt:#004AAC; --red:#E4143C; --yellow:#E8912E; --green:#37A741; --cta:#E4143C; --cta-fg:#ffffff; } /* 3 · LA CLÁSICA — the current live heritage-litho lotería set (deep red primary, mustard, teal). Kept so we can roll back. */ [data-skin="clasica"]{ --paper:#FBF3DF; --paper-2:#FFF8E7; --ink:#241A10; --ink-soft:#6b5c48; --cobalt:#7A2020; --red:#B33A2B; --yellow:#E1AD00; --green:#367588; --cta:#B33A2B; --cta-fg:#ffffff; } /* 4 · LA TALAVERA — the original approved inks (cobalt-primary v3). */ [data-skin="talavera"]{ --paper:#F2EAD6; --paper-2:#F8F1E1; --ink:#1a1510; --ink-soft:#5c5140; --cobalt:#2130c4; --red:#E5342A; --yellow:#F4C81F; --green:#1C7A52; --cta:#E5342A; --cta-fg:#ffffff; } /* 5 · LA MARIGOLD — warm folk-art / mercado, terracotta-forward, blue as a pop. */ [data-skin="marigold"]{ --paper:#FBF4E6; --paper-2:#FFFBF1; --ink:#3E2B22; --ink-soft:#7a6456; --cobalt:#BE5B3A; --red:#9C3B28; --yellow:#F2A93B; --green:#6E7F45; --cta:#9C3B28; --cta-fg:#ffffff; } /* 6 · LA TALAVERA AZUL — blue-and-white Talavera porcelain, gold + terracotta accents. */ [data-skin="talavera-azul"]{ --paper:#FAF6EE; --paper-2:#FFFFFF; --ink:#26324F; --ink-soft:#566079; --cobalt:#1E50A8; --red:#C4623F; --yellow:#EDAE38; --green:#2F7E6B; --cta:#1E50A8; --cta-fg:#FAF6EE; } /* 7 · LA PANADERÍA — pan dulce: concha rosa lead, marigold, terracotta, olive. */ [data-skin="panaderia"]{ --paper:#FBF3E9; --paper-2:#FFFBF3; --ink:#4A2E30; --ink-soft:#836165; --cobalt:#B8476A; --red:#C86B44; --yellow:#F2B134; --green:#7C8A4E; --cta:#B8476A; --cta-fg:#FBF3E9; } /* 8 · LA JARDÍN — her @eastside.roots garden: earthy green lead, terracotta, marigold, cobalt pop. */ [data-skin="jardin"]{ --paper:#F6F1E2; --paper-2:#FCF8EC; --ink:#33342A; --ink-soft:#63614F; --cobalt:#2E6E52; --red:#C0603C; --yellow:#EEA92F; --green:#4E7CC4; --cta:#2E6E52; --cta-fg:#F6F1E2; } /* 9 · LA STORYBOOK — muted vintage printed-plate: indigo, ochre, faded brick, sage on aged paper. */ [data-skin="storybook"]{ --paper:#F4ECD8; --paper-2:#FAF3E2; --ink:#2B2A3A; --ink-soft:#5C5A6B; --cobalt:#33407A; --red:#BC6244; --yellow:#DDA43A; --green:#7E8C63; --cta:#33407A; --cta-fg:#F4ECD8; } /* 10 · LA MERCADO — bright hand-painted storefront signage: signage blue, chile red, marigold, jade. */ [data-skin="mercado"]{ --paper:#FAF4E4; --paper-2:#FFFBEF; --ink:#241A10; --ink-soft:#5F5346; --cobalt:#1B54B4; --red:#D8442E; --yellow:#F6B32E; --green:#1F8F6B; --cta:#D8442E; --cta-fg:#ffffff; } /* ---- background-forward palettes (Juan): these shift the whole PAGE background, not just the accents — kept light enough for espresso text, each grounded in one of her notes (adobe walls · Talavera pottery · mercado sun). ---- */ /* 11 · LA ADOBE — warm clay / kraft-paper background (adobe walls, panadería) */ [data-skin="adobe"]{ --paper:#E6D2B2; --paper-2:#F3E7CF; --ink:#43301F; --ink-soft:#79624A; --cobalt:#1C52B8; --red:#C0603C; --yellow:#E8A227; --green:#6E7F45; --cta:#1C52B8; --cta-fg:#F3E7CF; } /* 12 · LA CIELO — pale Talavera blue-&-white background (her pottery note) */ [data-skin="cielo"]{ --paper:#DCE7F2; --paper-2:#EEF4FA; --ink:#22314B; --ink-soft:#586780; --cobalt:#1C52B8; --red:#C86B44; --yellow:#F0B22E; --green:#2F7E6B; --cta:#1C52B8; --cta-fg:#EEF4FA; } /* 13 · LA SOL — warm marigold-gold background (mercado sunlight) */ [data-skin="sol"]{ --paper:#F4DE9E; --paper-2:#FBF1CE; --ink:#463218; --ink-soft:#7A6533; --cobalt:#1C52B8; --red:#C86B44; --yellow:#E0891A; --green:#5E7A3E; --cta:#1C52B8; --cta-fg:#FBF1CE; } /* ---- emphasis button follows the active skin (her spec: hover → marigold) ---- */ .btn.red{background:var(--cta);color:var(--cta-fg)} .btn.red:hover{background:var(--yellow);color:var(--ink)} /* ---- tokenize the hand-set SVG / accent colors so every skin re-inks. A CSS fill/stroke property overrides the inline SVG presentation attribute. ---- */ .sparkrow .spark:first-child path{fill:var(--red)} .sparkrow .spark:last-child path{fill:var(--yellow)} .card.c-wealth .ic{stroke:var(--green)} .card.c-move .ic{stroke:var(--red)} .card.c-move .ic circle{fill:var(--red)} .card.c-train .ic{stroke:var(--cobalt)} .comm svg g{stroke:var(--green)} .comm svg > path[fill]{fill:var(--cobalt);stroke:var(--ink)} .comm svg > circle{fill:var(--red)} /* ---- deck touches preserved from la-clasica.css (color-agnostic; use vars, so they now render correctly under every skin) ---- */ .proof.band{background:repeating-linear-gradient(45deg,var(--red) 0 7px,var(--paper-2) 7px 14px)} .proof .lbl,.proof .logo{background:var(--paper-2);border:2.5px solid var(--ink);padding:6px 12px;color:var(--ink);font-weight:800} .pillars .card::before,.work .offer .who::before{color:var(--ink-soft)} /* ============================================================ DIVIDER AXIS — a second switch (independent of color). Restyles the single .divider between "Free resources" and "My story" into a folk motif from her Jul-14 notes. Set via ; all colors are token-driven so dividers re-ink with whatever palette is active. Options: marigold (default) · stitch · scallop · ondas · papel. ============================================================ */ /* stitch — embroidered running stitch (dashed), marigold stays as the knot */ [data-divider="stitch"] .divider .rule{height:0;background:none;opacity:1;border-radius:0; border-top:3px dashed var(--red)} /* scallop — a row of talavera scallops (pan-dulce arch) */ [data-divider="scallop"] .divider .rule{height:13px;opacity:.9;border-radius:0; background:radial-gradient(circle at 8px 13px, var(--cobalt) 7px, transparent 7.6px) 0 1px/16px 13px repeat-x} /* ondas — hand-drawn wave; SVG mask lets background:var(--cobalt) show through so it follows the skin */ [data-divider="ondas"] .divider .rule{height:14px;background:var(--cobalt);opacity:.9;border-radius:0; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 C 3.5 0, 10.5 0, 14 7 S 24.5 14, 28 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/28px 14px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7 C 3.5 0, 10.5 0, 14 7 S 24.5 14, 28 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/28px 14px} /* papel — papel picado bunting. Token gradient shows the flag COLORS; a SINGLE SVG mask carves the flag silhouette (scalloped hem + punched holes, fill-rule evenodd). No mask-composite — that renders inconsistently on iOS Safari; one mask is robust at every size + browser. Gradient bands (60px) align with the mask tile (60px) so each flag is one solid color. */ [data-divider="papel"] .divider{padding:0;height:44px;gap:0} [data-divider="papel"] .divider .rule{display:none} [data-divider="papel"] .divider picture{display:none} [data-divider="papel"] .divider::before{content:"";display:block;width:100%;height:44px; background:repeating-linear-gradient(90deg,var(--cobalt) 0 60px,var(--red) 60px 120px,var(--yellow) 120px 180px,var(--green) 180px 240px); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='56' viewBox='0 0 60 56'%3E%3Crect width='60' height='4' fill='%23fff'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6,4 L54,4 L54,46 a8 8 0 0 1 -16 0 a8 8 0 0 1 -16 0 a8 8 0 0 1 -16 0 L6,4 Z M24,22 a6 6 0 1 0 12 0 a6 6 0 1 0 -12 0 Z M17,38 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0 Z M37,38 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0 Z'/%3E%3C/svg%3E") repeat-x left top/60px 44px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='56' viewBox='0 0 60 56'%3E%3Crect width='60' height='4' fill='%23fff'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6,4 L54,4 L54,46 a8 8 0 0 1 -16 0 a8 8 0 0 1 -16 0 a8 8 0 0 1 -16 0 L6,4 Z M24,22 a6 6 0 1 0 12 0 a6 6 0 1 0 -12 0 Z M17,38 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0 Z M37,38 a3 3 0 1 0 6 0 a3 3 0 1 0 -6 0 Z'/%3E%3C/svg%3E") repeat-x left top/60px 44px} /* ============================================================ Rotator UI — only injected by skins.js when the URL has ?skins. Panel colors are fixed (dark, high-contrast) so it stays legible over any skin; it is not part of the site's own palette. ============================================================ */ .skinbar{position:fixed;left:12px;bottom:12px;z-index:9999;background:#171009;color:#fff; border:2.5px solid #fff;border-radius:14px;padding:10px 10px 8px;max-width:min(92vw,560px); box-shadow:0 8px 26px rgba(0,0,0,.4);font-family:var(--body),system-ui,sans-serif} .skinbar-h{font-weight:800;font-size:.8rem;letter-spacing:.02em;margin:0 2px 8px;display:flex;gap:8px;align-items:baseline} .skinbar-h span{font-weight:600;opacity:.55;font-size:.72rem} .skinbar-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px} .skinbtn{flex:0 0 auto;background:#2a2016;border:2px solid transparent;border-radius:10px; padding:8px;cursor:pointer;color:#fff;text-align:left;min-width:106px;transition:border-color .15s} .skinbtn:hover{border-color:rgba(255,255,255,.35)} .skinbtn[aria-pressed="true"]{border-color:#F6B32E} .skinbtn .sw{display:flex;gap:3px;margin-bottom:6px} .skinbtn .sw i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.28)} .skinbtn b{display:block;font-size:.82rem;line-height:1.15} .skinbtn em{display:block;font-size:.68rem;opacity:.6;font-style:normal;margin-top:1px} .divbtn{flex:0 0 auto;background:#2a2016;border:2px solid transparent;border-radius:10px; padding:6px 10px;cursor:pointer;color:#fff;display:flex;align-items:center;gap:7px;transition:border-color .15s} .divbtn:hover{border-color:rgba(255,255,255,.35)} .divbtn[aria-pressed="true"]{border-color:#F6B32E} .divbtn .dg{font-size:1.1rem;line-height:1;opacity:.85} .divbtn b{font-size:.78rem;font-weight:700} @media(max-width:520px){.skinbar{left:8px;right:8px;bottom:8px;max-width:none}}