/* ══════════════════════════════════════════════════════════════════ ZOLLA · MUJI THEME LAYER Caricato DOPO style.css e Bootstrap. Ridefinisce i token esistenti (--accent, --bg-*, --text-*, --border-color) con la palette Muji, in tema chiaro e scuro, e rende la navigazione responsive (desktop). Per disattivare il redesign: rimuovere il in base.html. Tema attivo: attributo data-theme="light|dark" su . ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap'); /* ── TOKEN: TEMA SCURO (default) ───────────────────────────────────── */ :root, [data-theme="dark"]{ --platy-green: #8aa873; --platy-green-dark: #779560; --accent: #8aa873; /* sage green (scuro) */ --accent-hover: #779560; --accent-rgb: 138, 168, 115; --good: #8aa873; /* vocabolario token del prototipo Muji (valori originali) */ --paper:#1b1a17; --card:#242320; --card-2:#2b2926; --hover:#302e2a; --ink:#e7e2d7; --ink-soft:#a8a296; --ink-faint:#6e695f; --accent-ink:#1b1a17; --line:#34322d; --line-soft:#2a2824; --bg-body: #1b1a17; /* charcoal caldo del prototipo originale */ --bg-nav: #1b1a17; --bg-card: #242320; --bg-surface: #201f1c; --bg-overlay: #302e2a; --bg-elevated: #2b2926; --bg-suggestions: #2b2926; --text-main: #e7e2d7; --text-muted: #a8a296; --border-color: #34322d; --shadow-sm: 0 2px 10px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.45); --shadow-lg: 0 10px 34px rgba(0,0,0,.5); --ph: #6e695f; } /* ── TOKEN: TEMA CHIARO (kraft) ────────────────────────────────────── */ [data-theme="light"]{ --platy-green: #4e6e46; --platy-green-dark: #3f5a39; --accent: #4e6e46; /* forest green (chiaro) */ --accent-hover: #3f5a39; --accent-rgb: 78, 110, 70; --good: #4e6e46; /* vocabolario token del prototipo Muji */ --paper:#e9e5da; --card:#f3f0e9; --card-2:#efebe2; --hover:#e3dece; --ink:#2b2a26; --ink-soft:#6f6c63; --ink-faint:#9d9a90; --accent-ink:#fff; --line:#d6d1c4; --line-soft:#e0dbcf; --bg-body: #e9e5da; --bg-nav: #e9e5da; --bg-card: #f3f0e9; --bg-surface: #efebe2; --bg-overlay: #e3dece; --bg-elevated: #f3f0e9; --bg-suggestions: #f3f0e9; --text-main: #2b2a26; --text-muted: #6f6c63; --border-color: #d6d1c4; --shadow-sm: 0 2px 10px rgba(60,54,40,.07); --shadow-md: 0 6px 18px rgba(60,54,40,.09); --shadow-lg: 0 10px 30px rgba(60,54,40,.11); --ph: #9d9a90; } /* ── ICONE SVG MUJI ────────────────────────────────────────────────── */ /* Classe base per tutti i generati da _icons.html */ .mj-icon{ display:inline-block; vertical-align:middle; flex-shrink:0; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* size modifier */ .mj-icon.sm { width:14px; height:14px; } .mj-icon.lg { width:22px; height:22px; } .mj-icon.xl { width:28px; height:28px; } .mj-icon.xxl{ width:40px; height:40px; stroke-width:1.3; } /* spin per stato di caricamento */ @keyframes mj-spin{ to{ transform:rotate(360deg); } } .spin-anim{ animation:mj-spin .7s linear infinite; transform-origin:center; } /* ── TIPOGRAFIA ────────────────────────────────────────────────────── */ body{ font-family: 'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.1px; } h1,h2,h3,h4,h5,h6,.fw-bold{ letter-spacing: -0.3px; } .font-mono,.text-mono{ font-family: 'Geist Mono', ui-monospace, monospace; } ::placeholder{ color: var(--ph) !important; } .text-muted{ color: var(--text-muted) !important; } /* etichetta funzionale Muji (micro-maiuscoletto mono) */ .label{ font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; } /* ── ANGOLI SQUADRATI (Muji) ───────────────────────────────────────── */ :root{ --bs-border-radius: 4px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 5px; --bs-border-radius-xl: 6px; --bs-border-radius-2xl: 8px; } .rounded-3,.rounded-4,.card,.list-group-item,.modal-content,.dropdown-menu, .form-control,.form-select,.btn:not(.rounded-pill):not(.scroll-top-btn){ border-radius: 4px !important; } /* ── CARD & SUPERFICI ──────────────────────────────────────────────── */ .card,.list-group-item{ border: 1px solid var(--border-color); box-shadow: none; background-color: var(--bg-card); } .card:hover{ box-shadow: var(--shadow-sm); } /* ── BOTTONI ───────────────────────────────────────────────────────── */ .btn-primary{ background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); font-weight: 500; } [data-theme="light"] .btn-primary{ color:#fff; } .btn-primary:hover,.btn-primary:focus{ background-color: var(--accent-hover); border-color: var(--accent-hover); } .btn-outline-secondary,.btn-outline-light{ border-color: var(--border-color); color: var(--text-main); } .btn-outline-secondary:hover,.btn-outline-light:hover{ background-color: var(--bg-overlay); border-color: var(--border-color); color: var(--text-main); } /* ── INPUT ─────────────────────────────────────────────────────────── */ .form-control,.form-select{ background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-main); } .form-control:focus,.form-select:focus{ background-color: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .15); color: var(--text-main); } /* ══════════════════════════════════════════════════════════════════ NAVIGAZIONE RESPONSIVE Mobile (<992px): bottom-nav come ora. Desktop (≥992px): diventa sidebar verticale a sinistra. ══════════════════════════════════════════════════════════════════ */ /* brand header — visibile solo nella sidebar desktop */ .nav-brand{ display:none; } /* toggle tema — pulsante dedicato nella nav */ .theme-toggle{ background:none; border:none; cursor:pointer; } @media (min-width: 992px){ body{ padding-bottom: 0 !important; } .container{ padding-left: 244px; padding-right: 32px; max-width: 1180px; } .bottom-nav{ top: 0; bottom: 0; right: auto; width: 220px; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; padding: 22px 14px; border-top: none; border-right: 1px solid var(--border-color); } .nav-brand{ display: flex; align-items: center; gap: 10px; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--text-main); padding: 6px 12px 22px; } .nav-brand img{ width: 26px; height: 26px; } .bottom-nav-item{ flex-direction: row; justify-content: flex-start; gap: 13px; width: 100%; font-size: .9rem; padding: 10px 12px; border-radius: 4px; } .bottom-nav-item .icon-pill{ margin-bottom: 0; padding: 0; width: 26px; height: 26px; background: none !important; } .bottom-nav-item.active{ background-color: rgba(var(--accent-rgb), .12); } .bottom-nav-item.active .icon-pill{ background: none !important; } /* toggle tema spinto in fondo alla sidebar */ .theme-toggle.in-nav{ margin-top: auto; display: flex; flex-direction: row; align-items: center; gap: 13px; width: 100%; padding: 10px 12px; border-radius: 4px; color: var(--text-muted); font-size: .9rem; } .theme-toggle.in-nav:hover{ background-color: var(--bg-overlay); color: var(--text-main); } .theme-toggle.in-nav i{ font-size: 1.3rem; } .scroll-top-btn{ left: 244px; right: auto; } } /* mobile: toggle tema come item compatto nella bottom-nav */ @media (max-width: 991.98px){ .theme-toggle.in-nav{ display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: .72rem; width: 56px; } .theme-toggle.in-nav i{ font-size: 1.4rem; margin-bottom: 4px; } .bottom-nav-item{ width: 62px; } } /* ══════════════════════════════════════════════════════════════════ COMPATIBILITÀ TEMA CHIARO I template nascono dark-only e usano classi/colori fissi come primitive di tema (.text-white = testo primario, .bg-dark = superficie). Le rimappo sui token così il tema chiaro diventa leggibile. Da rifinire pagina per pagina durante la conversione dei layout. ══════════════════════════════════════════════════════════════════ */ .text-white, .text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6{ color: var(--text-main) !important; } .text-white-50{ color: var(--text-muted) !important; } .bg-dark,.bg-black{ background-color: var(--bg-card) !important; } .bg-body,.bg-body-tertiary{ background-color: var(--bg-body) !important; } .text-bg-dark{ background-color: var(--bg-card) !important; color: var(--text-main) !important; } .progress{ background-color: var(--bg-overlay) !important; } .border,.border-top,.border-bottom,.border-start,.border-end{ border-color: var(--border-color) !important; } .modal-content,.offcanvas,.dropdown-menu{ background-color: var(--bg-card); color: var(--text-main); } /* badge/pill morbidi anche in chiaro */ .badge.bg-dark,.badge.text-bg-dark{ background-color: var(--bg-overlay) !important; color: var(--text-main) !important; } /* ══════════════════════════════════════════════════════════════════ GIARDINO (index) — copia fedele del prototipo Muji Classi e valori presi pedissequamente da redesign/muji/muji.css. Semantica acqua adattata: in ritardo=rosso, oggi=ambra, ok=verde. Hook JS conservati: .plant-card-item .plant-name .plant-species .btn-water-quick .progress-bar. ══════════════════════════════════════════════════════════════════ */ .page{ max-width: 460px; margin: 0 auto; padding: 0 8px; } .topbar{ padding: 8px 0 18px; } .bar-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .brand{ font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); } .bar-actions{ display: flex; gap: 18px; align-items: center; } .ibtn{ display: flex; align-items: center; justify-content: center; width: auto; height: auto; border: none; background: none; color: var(--ink); cursor: pointer; padding: 0; transition: color .15s; } .ibtn:hover{ color: var(--ink-soft); } .ibtn i{ font-size: 1.35rem; } .h-title{ font-size: 24px; font-weight: 500; letter-spacing: -0.4px; line-height: 1.1; color: var(--ink); } .h-sub{ margin-top: 5px; } .h-sub{ margin-top: 6px; font-size: .9rem; color: var(--ink-faint); } .summary{ display: flex; border: 1px solid var(--line); background: var(--card); border-radius: 3px; overflow: hidden; } .sum-cell{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 14px 8px; text-align: center; border-right: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .15s; } .sum-cell:last-child{ border-right: none; } .sum-cell:hover{ background: var(--hover); } .sum-num{ font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 500; line-height: 1; } .sum-num.over{ color: var(--color-danger); } .sum-num.today{ color: var(--color-warning); } .sum-key{ margin-top: 7px; color: var(--ink-faint); white-space: nowrap; } .water-all{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 11px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; border-radius: 3px; transition: opacity .15s; } .water-all:hover{ opacity: .9; } .water-all svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } .search{ width: 100%; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink); outline: none; } .search::placeholder{ color: var(--ink-faint); } .search:focus{ border-color: var(--ink-soft); } .list-head{ display: flex; justify-content: space-between; align-items: baseline; margin: 24px 0 4px; } .list-head .sort{ background: none; border: none; padding: 0; color: var(--ink-faint); font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } .list-head .dropdown-menu{ min-width: 160px; } .plant-row{ display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: inherit; } .plant-row:hover{ background: var(--hover); margin: 0 -8px; padding: 14px 8px; border-color: transparent; border-radius: 3px; } .plant-card-item:last-child .plant-row{ border-bottom: none; } .plant-card-item.hidden{ display: none; } .thumb{ width: 66px; height: 66px; object-fit: cover; border-radius: 3px; background: var(--card-2); flex-shrink: 0; } div.thumb{ display: flex; align-items: center; justify-content: center; } div.thumb i{ color: var(--ink-faint); font-size: 1.5rem; opacity: .7; } .p-info{ min-width: 0; } .p-name{ font-size: 16.5px; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-species{ font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .p-water{ display: flex; align-items: center; gap: 8px; margin-top: 8px; } .p-water .label.urgent{ color: var(--color-danger); } .p-water .label.today{ color: var(--color-warning); } .p-water .label.ok{ color: var(--ink-faint); } .dash{ flex: 0 0 64px; height: 1px; background: var(--line); position: relative; } .dash i{ position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); } .dash i.urgent{ background: var(--color-danger); } .dash i.today{ background: var(--color-warning); } .dash i.ok{ background: var(--ink-soft); } .tick{ width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 3px; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: border-color .15s; } .tick svg{ width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; } .tick.urgent{ border-color: var(--color-danger); } .tick.urgent svg{ stroke: var(--color-danger); } .tick.today{ border-color: var(--color-warning); } .tick.today svg{ stroke: var(--color-warning); } .tick.ok{ border-color: var(--line); } .tick.ok svg{ stroke: var(--ink-soft); } .tick:active{ transform: scale(.9); } .tick.watered{ border-color: var(--line); } .tick.watered svg{ stroke: var(--ink-soft); } .add-row{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; padding: 14px; border: 1px dashed var(--line); border-radius: 3px; background: transparent; font-size: 13px; font-weight: 500; color: var(--ink-soft); transition: background .15s; } .add-row:hover{ background: var(--card); } .add-row i{ font-size: 1rem; } /* ══════════════════════════════════════════════════════════════════ PROFILO — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-profile{ max-width: 560px; margin: 0 auto; } .profile-head{ display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; } .profile-head .avatar{ width: 64px; height: 64px; border-radius: 3px; object-fit: cover; background: var(--card-2); flex-shrink: 0; border: 1px solid var(--line); } .profile-head .h-title{ font-size: 20px; } .set-list{ border: 1px solid var(--line); background: var(--card); border-radius: 3px; overflow: hidden; } .set-row{ display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: none; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; color: var(--ink); text-decoration: none; transition: background .15s; cursor: pointer; } .set-list .set-row:last-child{ border-bottom: none; } .set-row:hover{ background: var(--hover); } .set-row .lead{ width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: var(--ink-soft); stroke-width: 1.5; } .set-row .txt{ flex: 1; min-width: 0; } .set-row .txt b{ display: block; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); } .set-row .txt span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; } .set-row .chev{ width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; } .set-row.danger .txt b{ color: var(--color-danger); } .set-row.danger .lead{ stroke: var(--color-danger); } .center{ text-align: center; } /* ══════════════════════════════════════════════════════════════════ DIARIO ATTIVITÀ (activity) — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-activity{ max-width: 560px; margin: 0 auto; } .tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .tabs > a, .tabs > button{ font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ink-faint); text-decoration: none; cursor: pointer; transition: all .15s; } .tabs > a:hover, .tabs > button:hover{ color: var(--ink-soft); border-color: var(--ink-faint); } .tabs > a.on, .tabs > a.active, .tabs > button.on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .az-divider{ font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); } .act-row{ display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; } .act-row:hover{ background: var(--hover); margin: 0 -8px; padding: 12px 8px; border-color: transparent; border-radius: 3px; } .act-ic{ width: 40px; height: 40px; flex-shrink: 0; border-radius: 3px; background: var(--card-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .act-ic svg{ width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 1.6; } .act-ic img{ width: 100%; height: 100%; object-fit: cover; } .act-ic.water svg{ stroke: var(--accent); } .act-ic.measure svg, .act-ic.track svg{ stroke: var(--color-warning); } .act-ic.add svg{ stroke: var(--accent); } .act-info{ flex: 1; min-width: 0; } .act-info b{ display: block; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .act-info span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .act-info .meas{ color: var(--ink-soft); } .act-time{ flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-faint); text-align: right; } .act-empty{ text-align: center; padding: 60px 20px; color: var(--ink-faint); } .act-empty svg{ width: 48px; height: 48px; stroke: var(--ink-faint); fill: none; stroke-width: 1.2; margin-bottom: 14px; } .act-empty h5{ font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 6px; } /* ══════════════════════════════════════════════════════════════════ CALENDARIO (calendar) — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-calendar{ max-width: 560px; margin: 0 auto; } .cal-head{ display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; } .cal-head h2, .cal-head #monthYearDisplay{ font-size: 18px; font-weight: 500; color: var(--ink); text-transform: capitalize; margin: 0; } .cal-nav{ display: flex; gap: 8px; } .cal-nav button{ width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .15s; } .cal-nav button:hover{ background: var(--hover); } .cal-nav button svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .cal-nav button i{ font-size: 1rem; } .cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-dow{ text-align: center; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); padding: 6px 0 8px; } .cal-day{ aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink); border-radius: 3px; cursor: pointer; position: relative; transition: background .15s; } .cal-day:hover{ background: var(--hover); } .cal-day.out, .cal-day.empty{ color: var(--ink-faint); opacity: .4; cursor: default; } .cal-day.out:hover, .cal-day.empty:hover{ background: transparent; } .cal-day.today{ border: 1px solid var(--line); } .cal-day.selected{ background: var(--accent); color: var(--accent-ink); font-weight: 600; } .cal-day .ev{ display: flex; gap: 3px; margin-top: 3px; height: 5px; } .cal-day .ev i{ width: 5px; height: 5px; border-radius: 50%; background: var(--good); display: inline-block; } .cal-day .ev i.danger, .cal-day .ev i.overdue{ background: var(--color-danger); } .cal-day.selected .ev i{ background: var(--accent-ink); } .cal-day.selected .ev i.danger, .cal-day.selected .ev i.overdue{ background: var(--color-danger); } .cal-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--good); margin-top: 3px; opacity: 0; } .cal-dot.active{ opacity: 1; } .cal-dot-danger{ background: var(--color-danger); } .cal-day.selected .cal-dot.active{ background: var(--accent-ink); } .cal-day.selected .cal-dot-danger{ background: var(--color-danger); } .cal-legend{ display: flex; gap: 18px; justify-content: center; margin: 14px 0 6px; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-faint); } .cal-legend span{ display: flex; align-items: center; gap: 6px; } .cal-legend i{ width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .up-row{ display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); } .up-row:last-child{ border-bottom: none; } .up-thumb{ width: 44px; height: 44px; flex-shrink: 0; border-radius: 3px; background: var(--card-2); overflow: hidden; display: flex; align-items: center; justify-content: center; } .up-thumb img{ width: 100%; height: 100%; object-fit: cover; } .up-thumb i{ color: var(--ink-faint); } .up-info{ flex: 1; min-width: 0; } .up-info b{ display: block; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-info b a{ color: inherit; text-decoration: none; } .up-info span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; } .up-info .overdue{ color: var(--color-danger); } .up-water{ flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--accent); cursor: pointer; transition: background .15s; } .up-water:hover{ background: var(--hover); } .up-empty{ text-align: center; padding: 30px 20px; color: var(--ink-faint); border: 1px dashed var(--line); border-radius: 3px; } /* ══════════════════════════════════════════════════════════════════ SOCIALE (social + _feed_items) — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-social{ max-width: 560px; margin: 0 auto; } .mj-social .field{ margin-bottom: 14px; } /* rail utenti suggeriti */ .sugg-rail{ display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; } .sugg-rail::-webkit-scrollbar{ display: none; } .sugg-card{ flex-shrink: 0; width: 104px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); padding: 14px 10px; text-align: center; } .sugg-av{ width: 48px; height: 48px; border-radius: 3px; overflow: hidden; margin: 0 auto 8px; background: var(--card-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .sugg-av img{ width: 100%; height: 100%; object-fit: cover; } .sugg-av i{ color: var(--accent); font-size: 1.2rem; } .sugg-card .nm{ font-size: 12px; font-weight: 500; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; } .sugg-follow{ display: block; width: 100%; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .5px; padding: 5px 0; border: 1px solid var(--accent); border-radius: 3px; background: transparent; color: var(--accent); text-decoration: none; } .sugg-follow:hover{ background: var(--accent); color: var(--accent-ink); } /* card del feed */ .feed-card{ border: 1px solid var(--line); border-radius: 3px; background: var(--card); overflow: hidden; margin-bottom: 14px; } .feed-top{ display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; } .feed-av{ width: 42px; height: 42px; border-radius: 3px; object-fit: cover; background: var(--card-2); flex-shrink: 0; } .feed-who{ flex: 1; min-width: 0; } .feed-who b, .feed-who b a{ font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; } .feed-who span{ display: block; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-faint); margin-top: 1px; } .feed-img{ width: 100%; max-height: 420px; object-fit: cover; display: block; } .feed-imgwrap{ position: relative; } .feed-imgwrap .tag{ position: absolute; bottom: 8px; left: 8px; font-family: 'Geist Mono', monospace; font-size: 10px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 8px; border-radius: 3px; text-decoration: none; backdrop-filter: blur(4px); } .feed-body{ padding: 14px 18px 16px; } .feed-body .cap{ font-size: 15px; line-height: 1.45; color: var(--ink); margin: 0 0 6px; } .feed-body .cap a{ color: var(--accent); font-weight: 500; text-decoration: none; } .feed-body .cap .text-muted{ color: var(--ink-soft) !important; } .feed-meas{ display: flex; flex-wrap: wrap; gap: 12px; padding: 9px 12px; margin-bottom: 6px; background: var(--card-2); border-radius: 3px; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-soft); } .feed-meas span, .metrics span{ display: inline-flex; align-items: center; gap: 4px; } .meas .mj-icon{ opacity: .75; } .feed-note{ font-size: 14px; font-style: italic; color: var(--ink-soft); margin: 0; } /* override Muji per badge azione del feed */ .feed-card .log-badge{ font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: .3px; background: var(--card-2); color: var(--ink-soft); border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px; } /* card compatta: annaffiature multiple */ .feed-water-batch .feed-top{ padding-bottom: 8px; } .feed-water-batch .feed-body{ padding-top: 4px; } .wb-icon{ width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: rgba(var(--accent-rgb), .14); color: var(--accent); font-size: .95rem; } .wb-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .wb-chip{ font-family: 'Geist Mono', monospace; font-size: 10.5px; padding: 4px 9px; border-radius: 3px; background: var(--card-2); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; } .wb-chip:hover{ background: var(--hover); color: var(--ink); } .wb-chip.more{ color: var(--ink-faint); } /* card utente nel modal ricerca */ .usr-av{ width: 40px; height: 40px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--card-2); border: 1px solid var(--line); } .usr-nm{ font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .usr-follow{ flex-shrink: 0; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .5px; padding: 6px 12px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: var(--accent-ink); text-decoration: none; } .usr-follow:hover{ filter: brightness(1.06); } .usr-follow.followed{ background: transparent; color: var(--ink-soft); border-color: var(--line); } .usr-follow.followed:hover{ background: var(--hover); } /* ══════════════════════════════════════════════════════════════════ WIKI — accordion filtri (lista) ══════════════════════════════════════════════════════════════════ */ .filt-acc{ border: 1px solid var(--line); border-radius: 3px; background: var(--card); overflow: hidden; margin-bottom: 4px; } .filt-acc-head{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: none; border: none; cursor: pointer; color: var(--ink); text-align: left; } .filt-acc-head .lbl{ flex: 1; font-size: 14px; font-weight: 500; } .filt-acc-head > i:first-child{ color: var(--ink-soft); font-size: 1rem; } .filt-acc-chev{ color: var(--ink-faint); font-size: 13px; transition: transform .25s; } .filt-acc.open .filt-acc-chev{ transform: rotate(180deg); } .filt-acc.has-filters{ border-color: var(--accent); } .filt-badge{ font-family: 'Geist Mono', monospace; font-size: 10px; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); } .filt-acc-body{ max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); } .filt-acc.open .filt-acc-body{ max-height: 1400px; } .filt-acc-body > .mb-3{ padding: 0 14px; } .filt-acc-body > .mb-3:first-child{ padding-top: 6px; } .filt-reset{ display: block; width: calc(100% - 28px); margin: 4px 14px 14px; padding: 9px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ink-soft); font-size: 11px; cursor: pointer; } .filt-reset:hover{ background: var(--hover); } /* ══════════════════════════════════════════════════════════════════ FORM (edit pianta / add) — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-form{ max-width: 560px; margin: 0 auto; } .mj-form .field{ margin-bottom: 16px; } .mj-form label.label, .mj-form .field > .label{ display: block; margin-bottom: 7px; } .mj-form .input, .mj-form textarea.input, .mj-form select.input{ width: 100%; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); font-size: 14px; font-family: inherit; } .mj-form .input:focus, .mj-form textarea.input:focus, .mj-form select.input:focus{ outline: none; border-color: var(--ink-soft); } .mj-form .input::placeholder{ color: var(--ink-faint); } .mj-form .input.mono{ font-family: 'Geist Mono', monospace; } .mj-form textarea.input{ resize: vertical; min-height: 72px; } .mj-form .help{ display: block; margin-top: 6px; color: var(--ink-faint); } .mj-form .field.rel{ position: relative; } /* header di sezione del form */ .form-sec{ font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; } /* box di upload foto (AI identify) */ .upload-box{ border: 1px dashed var(--line); border-radius: 3px; padding: 22px 16px; text-align: center; background: var(--card); color: var(--ink-soft); transition: background .15s; } .upload-box:hover{ background: var(--hover); } .upload-box svg{ width: 26px; height: 26px; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; margin-bottom: 8px; } /* segmented control */ .seg{ display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; } .seg button{ flex: 1; padding: 10px 8px; background: transparent; border: none; border-right: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; cursor: pointer; transition: background .15s; } .seg button:last-child{ border-right: none; } .seg button.on, .seg button.active{ background: var(--accent); color: var(--accent-ink); font-weight: 500; } /* riga attributo chiave/valore */ .attr-row{ display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .attr-row .input{ flex: 1; } .attr-row .del{ flex-shrink: 0; width: 38px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--color-danger); cursor: pointer; } .attr-row .del:hover{ background: var(--hover); } /* toggle riga (auto-watering) */ .toggle-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); } .toggle-row .txt b{ display: block; font-size: 14px; font-weight: 500; color: var(--ink); } .toggle-row .txt span{ display: block; font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; } /* bottoni Muji pieni/mono per i form */ .mj-form .btn-fill{ display: block; width: 100%; padding: 14px; border: 1px solid var(--accent); border-radius: 3px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; } .mj-form .btn-fill:hover{ background: var(--accent-hover); border-color: var(--accent-hover); } .mj-form .btn-outline{ display: block; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-align: center; } .mj-form .btn-outline:hover{ background: var(--hover); } .mj-form .btn-danger-o{ border-color: var(--color-danger); color: var(--color-danger); } .mj-form .btn-danger-o:hover{ background: rgba(220,53,69,.08); } .mj-form .note-box{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--card-2); font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-bottom: 16px; } .mj-form .note-box i{ color: var(--accent); font-size: 1.1rem; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════ SCHEDA PIANTA (detail) — copia fedele del prototipo Muji ══════════════════════════════════════════════════════════════════ */ .mj-detail{ max-width: 560px; margin: 0 auto; } .mj-detail .hero{ position: relative; height: 340px; overflow: hidden; background: var(--card-2); border-radius: 0; } .mj-detail .hero > img, .mj-detail .hero .hero-ph{ width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .mj-detail .hero .hero-ph{ display: flex; align-items: center; justify-content: center; color: var(--ink-faint); } .mj-detail .hero .hero-ph i{ font-size: 4rem; opacity: .4; } .mj-detail .hero-top{ position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; padding: 16px; } .sq-btn{ width: 38px; height: 38px; border-radius: 3px; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .15s; } .sq-btn:active{ transform: scale(.92); } .sq-btn i{ font-size: 1.05rem; } .title-card{ position: relative; z-index: 3; margin: -44px 16px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 18px; } .title-card .t-eyebrow{ margin-bottom: 8px; } .t-name{ font-size: 28px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.05; color: var(--ink); display: flex; align-items: center; gap: 10px; } .t-name .btn-heart{ background: none; border: none; padding: 0; line-height: 0; } .t-name .btn-heart i{ font-size: 1.2rem; color: var(--ink-faint); } .t-name .btn-heart i.on{ color: var(--accent); } .t-species{ font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink-soft); margin-top: 6px; } .t-row{ display: flex; align-items: flex-start; border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 14px; } .t-cell{ flex: 1; border-right: 1px solid var(--line-soft); padding: 0 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .t-cell:first-child{ padding-left: 0; } .t-cell:last-child{ border-right: none; padding-right: 0; } .t-cell .v{ font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 500; line-height: 1; color: var(--ink); } .t-cell .v.alert{ color: var(--color-danger); } .t-cell .v.today{ color: var(--color-warning); } .t-cell .k{ margin-top: 7px; } .mj-detail .body{ padding: 0 16px; } .water-line{ display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin-bottom: 14px; } .water-line.alert{ border-color: var(--color-danger); } .water-line.today{ border-color: var(--color-warning); } .water-line .txt{ flex: 1; min-width: 0; } .water-line .txt b{ display: block; font-size: 13px; font-weight: 500; color: var(--ink); } .water-line.alert .txt b{ color: var(--color-danger); } .water-line.today .txt b{ color: var(--color-warning); } .water-line .txt span{ font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-soft); } .water-actions{ display: flex; gap: 8px; flex-shrink: 0; } .mj-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 3px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; transition: background .15s, opacity .15s; } .mj-btn:hover{ background: var(--hover); } .mj-btn:active{ transform: scale(.97); } .mj-btn svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } .mj-btn.accent{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .mj-btn.accent:hover{ opacity: .9; } .log-more{ display: block; width: 100%; text-align: center; background: none; border: none; margin: 0 0 26px; color: var(--ink-faint); font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; padding: 4px; } .log-more:hover{ color: var(--accent); } .mj-detail .section{ margin-bottom: 28px; } .mj-detail .section-head{ display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .mj-detail .section-head h2{ font-size: 14px; font-weight: 600; letter-spacing: .2px; color: var(--ink); } .mj-detail .section-head a, .mj-detail .section-head .label{ color: var(--ink-faint); } .mj-detail .section-head a:hover{ color: var(--accent); } .spec{ display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px; } .spec dt{ padding: 6px 0; } .spec dd{ font-size: 13px; color: var(--ink-soft); line-height: 1.5; padding: 6px 0; margin: 0; } .spec dd.tox{ color: var(--color-danger); } .timeline{ display: flex; flex-direction: column; } .tl{ display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); align-items: start; } .tl:last-child{ border-bottom: none; } .tl .when{ font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--ink-faint); padding-top: 3px; line-height: 1.4; } .tl .what{ font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; min-width: 0; } .tl .what b{ color: var(--ink); font-weight: 500; } .tl .what .badge{ display: inline-block; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-faint); margin-bottom: 6px; background: none; } .tl .what .metrics{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-faint); } .tl .what img{ margin-top: 8px; width: 100%; max-width: 150px; border-radius: 3px; cursor: pointer; } .tl .del{ color: var(--ink-faint); opacity: .5; padding-top: 3px; } .tl .del:hover{ opacity: 1; color: var(--color-danger); } .mj-gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .mj-gallery img{ width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; cursor: pointer; transition: opacity .15s; } .mj-gallery img:hover{ opacity: .85; } .mj-gallery .gal-more{ aspect-ratio: 1; background: var(--card-2); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-faint); cursor: pointer; border: 1px solid var(--line); } .mj-gallery .gal-more:hover{ background: var(--hover); } .mj-empty{ text-align: center; padding: 30px 16px; color: var(--ink-faint); font-size: 13px; } /* ── SPARKLINE METRICHE (crescita) ── */ .mj-metrics{ display: flex; flex-direction: column; } .mj-metric-row{ display: grid; grid-template-columns: 68px 1fr 46px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); position: relative; } .mj-metric-row:last-child{ border-bottom: none; } .mj-spark{ display: block; width: 100%; height: 60px; overflow: visible; cursor: crosshair; } /* tooltip HTML (non SVG, evita distorsione con preserveAspectRatio=none) */ .spark-tip{ position: absolute; bottom: calc(100% - 6px); transform: translateX(-50%); font-family: 'Geist Mono', monospace; font-size: 10px; line-height: 1; padding: 4px 8px; background: var(--paper); border: 1px solid var(--accent); border-radius: 2px; color: var(--ink); white-space: nowrap; pointer-events: none; display: none; z-index: 20; } .mj-cur{ font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; line-height: 1.2; } .mj-cur small{ display: block; font-size: 9px; color: var(--ink-faint); font-weight: 400; margin-top: 1px; } /* action bar fissa (mobile) */ .mj-actionbar{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--paper); border-top: 1px solid var(--line); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom,0)); display: flex; gap: 10px; } .mj-actionbar .mj-btn{ flex: 1; padding: 13px; font-size: 12px; } .mj-actionbar .mj-btn.wide{ flex: 2; } @media (min-width: 992px){ .mj-actionbar{ left: 220px; } } /* ── BOTTOM SHEET ── */ .sheet-scrim{ position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 400; } .sheet-scrim.open{ opacity: 1; pointer-events: auto; } .sheet{ position: fixed; left: 0; right: 0; bottom: 0; max-width: 460px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px 10px 0 0; padding: 8px 20px calc(20px + env(safe-area-inset-bottom,0)); transform: translateY(100%); transition: transform .28s cubic-bezier(.16,1,.3,1); z-index: 401; } .sheet.open{ transform: none; } .sheet-grip{ width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 14px; } .sheet h3{ font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--ink); } .sheet .sub{ margin-bottom: 14px; } .sheet-opt{ display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border: none; border-bottom: 1px solid var(--line-soft); background: none; text-align: left; color: var(--ink); } .sheet-opt:last-of-type{ border-bottom: none; } .sheet-opt svg{ width: 18px; height: 18px; stroke: var(--ink-soft); stroke-width: 1.5; fill: none; flex-shrink: 0; } .sheet-opt b{ flex: 1; font-size: 14px; font-weight: 500; } .sheet-opt .when{ font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-faint); } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; } } /* ══════════════════════════════════════════════════════════════════ WIKI — componenti condivisi (order / family / subfamily / genus / species / variety) ══════════════════════════════════════════════════════════════════ */ /* ── hero tassonomico ── */ .wiki-hero{ position:relative; border-radius:6px; overflow:hidden; background:var(--card-2); } .wiki-hero img{ width:100%; height:100%; object-fit:cover; } .wiki-hero-ov{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 52%); display:flex; align-items:flex-end; padding:20px 22px; } /* ── card griglia (generi / famiglie / sottofamiglie) ── */ .wiki-card{ background:var(--card); border:1px solid var(--line); border-radius:3px; overflow:hidden; transition:border-color .2s; display:flex; flex-direction:column; text-decoration:none; } .wiki-card:hover{ border-color:var(--ink-soft); } .wiki-card img{ width:100%; height:130px; object-fit:cover; } .wiki-card-ph{ height:130px; background:var(--card-2); display:flex; align-items:center; justify-content:center; } .wiki-card .wc-body{ padding:12px 14px; } .wiki-card .wc-name{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; } .wiki-card .wc-name.it{ font-style:italic; } .wiki-card .wc-sub{ font-size:12px; color:var(--ink-faint); margin-top:3px; } /* ── sezione header Muji (linea + mono) ── */ .wiki-sec{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:14px; } .wiki-sec h3{ font-size:12px; font-weight:600; letter-spacing:.3px; font-family:'Geist Mono',monospace; text-transform:uppercase; color:var(--ink-soft); margin:0; } /* ── blocco cura / propagazione ── */ .wiki-blk{ background:var(--card); border:1px solid var(--line); border-radius:3px; padding:14px 16px; margin-bottom:10px; } .wiki-blk h6{ font-size:12px; font-weight:600; color:var(--accent); margin-bottom:6px; text-transform:capitalize; } .wiki-blk p{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.65; } /* ── blocco overview ── */ .wiki-ov{ background:var(--card); border-radius:3px; padding:13px 15px; margin-bottom:8px; } .wiki-ov .ov-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:4px; } .wiki-ov .ov-txt{ font-size:13px; color:var(--ink-soft); line-height:1.65; } /* ── riga specie ── */ .wiki-sp-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .15s; } .wiki-sp-row:hover{ background:var(--hover); margin:0 -6px; padding:11px 6px; border-color:transparent; border-radius:3px; } .wiki-sp-row:last-child{ border-bottom:none; } .wiki-sp-row img{ width:52px; height:52px; border-radius:3px; object-fit:cover; flex-shrink:0; } .wiki-sp-row .sr-ph{ width:52px; height:52px; border-radius:3px; background:var(--card-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; } .wiki-sp-row .sr-name{ font-size:15px; font-weight:600; font-style:italic; color:var(--ink); line-height:1.3; } .wiki-sp-row .sr-sub{ font-size:12px; color:var(--ink-faint); margin-top:3px; } .wiki-sp-row .sr-arr{ margin-left:auto; color:var(--ink-faint); flex-shrink:0; } /* ── step propagazione ── */ .wiki-step{ display:flex; gap:10px; margin-bottom:8px; } .wiki-step .sn{ width:22px; height:22px; border-radius:3px; background:var(--card-2); border:1px solid var(--line); font-size:11px; font-weight:600; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--accent); } .wiki-step .st{ font-size:12px; color:var(--ink-soft); line-height:1.55; padding-top:2px; } /* ── FAQ ── */ .wiki-faq{ border-bottom:1px solid var(--line-soft); padding:14px 0; } .wiki-faq:last-child{ border-bottom:none; } .wiki-faq .fq{ font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px; } .wiki-faq .fa{ font-size:12px; color:var(--ink-soft); line-height:1.6; } /* ── chip / tag generici ── */ .wiki-chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:3px; background:var(--card-2); border:1px solid var(--line); font-size:12px; color:var(--ink-soft); } .wiki-chip strong{ color:var(--ink); } .wiki-tag{ padding:4px 10px; border-radius:3px; background:var(--card-2); border:1px solid var(--line); font-size:11px; color:var(--ink-soft); } /* ── badge care (genere) ── */ .wiki-care-badge{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:3px; background:var(--card-2); border:1px solid var(--line); font-size:12px; } .wiki-care-badge .cb-lbl{ color:var(--ink-faint); font-size:10px; margin-bottom:1px; } .wiki-care-badge .cb-val{ color:var(--ink); font-weight:600; }