/* ============================================================ cote-nativ-site.css — formularul „Cote online" al site-ului în designul aplicației (2026-08-21). FORK al lui otto-app/www/css/cote-nativ.css + puntea de tokeni de mai jos (site-ul nu are variabilele din app.css). CAPCANĂ respectată (memoria otto-decor-picker-carduri-minuscule): imaginile decorurilor au ÎNĂLȚIME EXPLICITĂ în px — niciodată aspect-ratio + width:100% într-o grilă cu auto-rows. z-index: bugetul SITE-ULUI (banner 60, CTA 70, FAB 80, bottom-nav 85, actionbar 86, PWA 88) → modalul de decoruri 95, confirmarea 96. ============================================================ */ /* puntea de tokeni: variabilele app-ului, traduse în paleta site-ului */ #cote-nativ { --page: #FDFBF7; --card: #FFFFFF; --ink: #1A1A1A; --mut: #6B6358; --line: #E8E2D6; --surf: #F6F1E7; --acc: #FF8800; --btn: #E67500; --soft: #FFF8E1; --raza: 14px; --raza-mica: 10px; --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, monospace; --safe-bottom: env(safe-area-inset-bottom, 0px); --bnav-h: 0px; font-family: var(--sans); } @media (max-width: 560px) and (pointer: coarse) { /* bara de jos a site-ului (fonts.css) — formularul îi lasă loc dedesubt */ #cote-nativ { --bnav-h: 4.6rem; } } /* Chrome-ul site-ului are DOUĂ bare fixe: .topbar (38px) ȘI nav.site-nav (ancorat la top:38px). otto-topbar.css e legat ULTIMUL în și dă `body.has-topbar { padding-top: 38px }`, care bate regula shell-ului (`calc(--topbar-h + --nav-h)`) — deci navul rămâne NEcompensat. Ca pe restul paginilor site-ului, capul paginii își face singur loc sub nav. Înălțimile reale ale navului din otto-topbar.css: logo 62px + padding 0.9rem×2 + 1px bordură = 92px pe desktop, logo 46px + padding 0.6rem×2 + 1px bordură = 67px sub 900px. */ :root { --cns-nav-h: 92px; } @media (max-width: 900px) { :root { --cns-nav-h: 67px; } } /* capul paginii — în limbajul app-ului (DM Sans, aerisit) */ .cns-hero { max-width: 720px; margin: 0 auto; padding: calc(var(--cns-nav-h) + 42px) 16px 6px; } .cns-eyebrow { font: 700 12px/1 "DM Sans", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #E67500; margin: 0 0 10px; } .cns-hero h1 { font: 700 clamp(28px, 6vw, 40px)/1.15 "DM Sans", sans-serif; letter-spacing: -0.02em; color: #1A1A1A; margin: 0 0 8px; } .cns-hero p { font: 400 15px/1.6 "DM Sans", sans-serif; color: #6B6358; margin: 0; text-wrap: pretty; } .cns-altcai { max-width: 720px; margin: 0 auto; padding: 8px 16px 2px; } .cns-altcai p { font: 400 13.5px/1.6 "DM Sans", sans-serif; color: #6B6358; margin: 0; } .cns-altcai a { color: #E67500; font-weight: 600; } /* toast-ul propriu (site-ul nu are OttoUI) */ #cn-toast { position: fixed; left: 50%; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px); z-index: 97; background: #1C1C1F; color: #fff; font: 600 13.5px/1.4 "DM Sans", sans-serif; border-radius: 999px; padding: 12px 20px; max-width: min(92vw, 480px); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } #cn-toast.arata { opacity: 1; transform: translateX(-50%) translateY(0); } .cn-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px calc(var(--bnav-h) + var(--safe-bottom) + 24px); } /* Formularul ascunde randuri intregi punand atributul `hidden` din JS (campurile de la redebitare, dublat, gauri de balama, tesit, controalele cantului pe o latura nebifata, adresa de livrare). Dar `[hidden]` din browser e doar `display: none` fara clasa, iar orice regula de-a noastra cu clasa (`.cn-inline { display: flex }`) il invingea — campurile ramaneau pe ecran inainte sa fie bifat ceva. Regula asta le ascunde pe toate, o data. */ #cote-nativ [hidden] { display: none; } /* pașii 1-2-3 */ .cn-steps { display: flex; align-items: center; gap: 6px; margin: 4px 0 16px; } .cn-step-line { flex: 1; height: 1px; background: var(--line); } .cn-step-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); color: var(--mut); border-radius: 999px; padding: 7px 12px 7px 7px; font: 600 12.5px/1 var(--sans); cursor: pointer; } .cn-step-chip b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surf); color: var(--mut); font-size: 12px; } .cn-step-chip.activ { border-color: var(--acc); color: var(--ink); } .cn-step-chip.activ b, .cn-step-chip.gata b { background: var(--acc); color: #fff; } /* carduri + câmpuri */ .cn-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--raza); padding: 16px; margin: 0 0 14px; } .cn-title { font: 700 17px/1.25 var(--sans); color: var(--ink); margin: 0 0 4px; } .cn-sub { font: 400 13px/1.5 var(--sans); color: var(--mut); margin: 0 0 14px; text-wrap: pretty; } .cn-field { display: block; font: 600 12.5px/1.4 var(--sans); color: var(--ink); margin: 0 0 12px; } .cn-field b { color: var(--btn); } .cn-field input, .cn-field select, .cn-field textarea { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--raza-mica); background: #fff; /* 16px minim: sub 16px, iOS face zoom fortat la focus */ font: 400 16px/1.3 var(--sans); color: var(--ink); } .cn-field input:focus, .cn-field select:focus { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); } .cn-field input.cn-bad { border-color: #C0392B; } .cn-hint { display: block; font: 400 12px/1.5 var(--sans); color: var(--mut); margin-top: 5px; } .cn-err { display: none; font: 500 12px/1.4 var(--sans); color: #C0392B; margin-top: 4px; } .cn-err.show { display: block; } .cn-empty { font: 400 13.5px/1.5 var(--sans); color: var(--mut); text-align: center; padding: 18px 8px; } /* butoane */ .cn-btn { display: block; width: 100%; border: 0; border-radius: var(--raza-mica); cursor: pointer; background: var(--btn); color: #fff; font: 700 15px/1 var(--sans); padding: 14px 18px; margin: 0 0 12px; } .cn-btn:active { transform: translateY(1px); } .cn-btn[disabled] { opacity: .6; } .cn-btn-ghost { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--raza-mica); background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans); padding: 13px 16px; cursor: pointer; margin: 0 0 12px; } .cn-mini { border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; border-radius: 999px; font: 600 12px/1 var(--sans); min-height: 40px; padding: 9px 12px; margin-left: 6px; } .cn-mini.cn-del { color: #C0392B; border-color: #E9C6C1; } .cn-nav-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; } .cn-nav-row .cn-btn, .cn-nav-row .cn-btn-ghost { margin: 0; } /* bara compactă cu clientul */ .cn-clientbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--soft); border: 1px solid #F3DFC7; border-radius: var(--raza); padding: 10px 12px; margin: 0 0 12px; } .cn-clientbar b { display: block; font: 700 14px/1.3 var(--sans); color: var(--ink); } .cn-clientbar span { font: 400 12px/1.4 var(--sans); color: var(--mut); } /* fișe multiple */ .cn-fise-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; } .cn-fisa-tab { border: 1px solid var(--line); background: var(--card); border-radius: 999px; font: 600 12.5px/1 var(--sans); color: var(--mut); padding: 8px 14px; cursor: pointer; white-space: nowrap; } .cn-fisa-tab.activ { border-color: var(--acc); color: var(--ink); background: var(--soft); } /* material + decor */ .cn-mat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; } .cn-chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--mut); padding: 9px 14px; cursor: pointer; } .cn-chip.activ { border-color: var(--acc); background: var(--soft); color: var(--ink); } .cn-decor-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--raza-mica); background: #fff; padding: 10px 12px; cursor: pointer; margin: 0 0 10px; font: 600 14px/1.3 var(--sans); color: var(--ink); } .cn-decor-btn svg { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: var(--mut); stroke-width: 2; flex: 0 0 auto; } .cn-swatch { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surf) center/cover no-repeat; flex: 0 0 auto; } .cn-decor-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* checkbox-uri cu ținte mari de atins */ .cn-cb { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px/1.5 var(--sans); color: var(--ink); padding: 8px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; } .cn-cb input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--btn); flex: 0 0 auto; } .cn-cb b { color: var(--btn); } /* piesa */ .cn-piece { background: var(--card); border: 1px solid var(--line); border-radius: var(--raza); padding: 14px; margin: 0 0 12px; } .cn-piece-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; } .cn-piece-t { font: 700 14.5px/1 var(--sans); color: var(--ink); } .cn-piece-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .cn-piece-grid .cn-f-name { grid-column: 1 / -1; } /* cant: schiță + rânduri pe laturi */ .cn-cant { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; } .cn-cant-head { display: flex; align-items: center; justify-content: space-between; font: 700 13px/1 var(--sans); color: var(--ink); margin: 0 0 10px; } .cn-cant-main { display: flex; gap: 14px; align-items: flex-start; } .cn-diagram { position: relative; width: 118px; height: 92px; flex: 0 0 auto; margin-top: 4px; } .cn-face { position: absolute; inset: 12px; background: var(--surf); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 600 10.5px/1 var(--mono, monospace); color: var(--mut); } .cn-edge { position: absolute; border: 0; border-radius: 4px; background: var(--line); cursor: pointer; padding: 0; } .cn-edge.on { background: var(--acc); } .cn-edge-top { top: 0; left: 12px; right: 12px; height: 8px; } .cn-edge-bottom { bottom: 0; left: 12px; right: 12px; height: 8px; } .cn-edge-left { left: 0; top: 12px; bottom: 12px; width: 8px; } .cn-edge-right { right: 0; top: 12px; bottom: 12px; width: 8px; } .cn-edge-rows { flex: 1; min-width: 0; } .cn-edge-row { border-bottom: 1px solid var(--surf); padding: 2px 0; } .cn-edge-row .cn-cb { padding: 6px 0; min-height: 40px; } .cn-edge-row.disabled .cn-cb { color: var(--mut); opacity: .6; } .cn-edge-ctl { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; padding: 0 0 10px 8px; } .cn-edge-ctl select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: 400 16px/1 var(--sans); background: #fff; } /* Fiecare control isi spune numele: "0.8 mm" si pastila de culoare nu se explicau singure, iar pastila se si taia ("ca deco...") fiindca statea pe acelasi rand cu grosimea. Acum se rup pe randuri si au eticheta deasupra. */ .cn-edge-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cn-edge-f-t { font: 500 11px/1.2 var(--sans); color: var(--mut); } .cn-edge-f-col { flex: 1 1 165px; } .cn-ec { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer; min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 9px; font: 500 12.5px/1.25 var(--sans); color: var(--ink); } .cn-ec-sw { width: 22px; height: 22px; border-radius: 6px; } /* numele decorului ("Stejar Sonoma trufe (H1146 ST10)") nu incape pe un rand: il lasam pe doua si abia apoi taiem, ca sa se stie ce culoare e aleasa */ .cn-ec-lab { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cn-ec svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--mut); stroke-width: 2; } .cn-edge-hint { display: block; font: 400 11.5px/1.4 var(--sans); color: var(--mut); padding: 0 0 6px 30px; } /* prelucrări speciale — sumarul e un BUTON vizibil (modelul +/– de pe site), nu un rând de text; închis, arată o recapitulare a bifelor active */ .cn-extra { border-top: 1px dashed var(--line); margin-top: 4px; padding: 12px 0 2px; } .cn-extra summary { display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--raza-mica); background: var(--card); padding: 8px 12px; cursor: pointer; font: 600 13px/1.35 var(--sans); color: var(--ink); list-style: none; transition: transform .13s ease; } .cn-extra summary::-webkit-details-marker { display: none; } .cn-extra summary::before { content: "+"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--btn); display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--sans); } .cn-extra[open] summary::before { content: "–"; } .cn-extra[open] summary { border-color: var(--acc); } .cn-extra summary:active { transform: scale(.98); } .cn-extra-t { flex: 1 1 auto; } .cn-extra-sum { flex: 0 1 auto; text-align: right; font: 400 11.5px/1.4 var(--sans); color: var(--mut); } .cn-extra-sum .cn-extra-on { color: var(--btn); font-weight: 600; white-space: nowrap; } .cn-extra[open] .cn-extra-sum { display: none; } .cn-extra-body { padding: 10px 0 4px; } /* dublare cu fâșii — propunerea calculată + starea „deja în listă" */ .cn-fasii-row { flex: 1 1 100%; } .cn-fasii-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin: 0 0 6px; } .cn-fasii-sides .cn-cb { min-height: 36px; padding: 5px 0; font-size: 13px; } .cn-fasii-prop:not(:empty) { background: var(--soft); border: 1px solid #F3DFC7; border-radius: var(--raza-mica); padding: 10px 12px; margin: 2px 0 8px; } .cn-fasii-title { font: 700 12.5px/1.4 var(--sans); color: var(--ink); margin: 0 0 4px; } .cn-fasii-list { margin: 0 0 8px; padding-left: 18px; font: 400 13px/1.7 var(--sans); color: var(--ink); } .cn-fasii-list small { color: var(--mut); } .cn-fasii-btn { display: block; width: 100%; margin: 0 0 6px; min-height: 44px; border-color: var(--acc); color: var(--btn); background: #fff; font-size: 13px; } .cn-fasii-ok { font: 600 12.5px/1.5 var(--sans); color: #1E7B34; margin: 0 0 8px; } .cn-fasii-warn { font: 600 12.5px/1.5 var(--sans); color: #7A5B14; margin: 0 0 8px; } /* piesele-fâșie sunt marcate vizibil — știi mereu care sunt și de unde vin */ .cn-fasie-badge { display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: var(--soft); border: 1px solid #F3DFC7; color: var(--btn); font: 700 10.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; } .cn-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; padding: 0 0 6px 30px; } .cn-inline .cn-field { flex: 1 1 90px; margin-bottom: 6px; } .cn-inline .cn-cb { flex: 1 1 100%; } /* teșit */ /* teșit: planul cu colțuri apăsabile + un card pentru fiecare colț tăiat (portat din motorul clasic al site-ului, cote-online.css:296-334) */ .cn-ts-main { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; background: var(--surf); border: 1px solid var(--line); border-radius: var(--raza-mica); padding: 12px; margin: 8px 0 10px; } .cn-ts-canvas { flex: 0 0 auto; margin: 0 auto; } .cn-ts-svg { width: 264px; max-width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .cn-ts-svg .ts-shape { fill: var(--soft); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } /* app.css:112 pune `stroke: currentColor` pe TOATE svg-urile (pentru iconite); fara `stroke: none` literele cotelor primeau contur si ieseau ingrosate */ .cn-ts-svg text { font: 400 10px var(--mono, monospace); fill: var(--btn); stroke: none; } .cn-ts-svg .ts-cap { fill: var(--mut); } .cn-ts-svg .ts-dims text { font-size: 9.5px; fill: var(--ink); pointer-events: none; } /* fără L×l pe piesă nu există plan de cotat — desenul stă „stins" până le dai */ .cn-ts-svg.no-dims .ts-shape { opacity: .35; } .cn-ts-svg.no-dims .ts-corner { opacity: .4; } .ts-corner { fill: #fff; stroke: var(--mut); stroke-width: 2; cursor: pointer; transition: fill .15s, stroke .15s; } .ts-corner:hover { fill: var(--acc); stroke: var(--acc); } .ts-corner.on { fill: var(--acc); stroke: var(--ink); } .ts-corner:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* FĂRĂ uppercase: „l1/l2" (laturile scurte) ar deveni „L1/L2" — adică laturile lungi */ .cn-ts-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font: 400 10.5px/1.3 var(--mono, monospace); color: var(--mut); } .cn-ts-list { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .cn-ts-empty { margin: 0; } .cn-ts-card { border: 1px solid var(--acc); background: var(--card); border-radius: var(--raza-mica); padding: 10px 12px; } .cn-ts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 13px/1.3 var(--sans); color: var(--ink); } .cn-ts-del { border: 0; background: none; cursor: pointer; color: var(--mut); font: 400 20px/1 var(--sans); padding: 0 4px; min-width: 32px; min-height: 32px; } .cn-ts-del:hover { color: #C0392B; } /* felul tăieturii: oblic (linie înclinată) / drept (dreptunghi scos — piesă în L) */ .cn-ts-type { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cn-ts-tbtn { position: relative; } .cn-ts-tbtn input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cn-ts-tbtn span { display: inline-block; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 7px 10px; font: 500 12px/1.2 var(--sans); cursor: pointer; user-select: none; } .cn-ts-tbtn input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; } .cn-ts-tbtn input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } .cn-ts-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cn-ts-fields label { display: flex; flex-direction: column; gap: 4px; font: 500 11px/1.2 var(--sans); color: var(--mut); } .cn-ts-fields .ts-in { display: flex; align-items: center; gap: 5px; } .cn-ts-fields input { width: 80px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: 400 16px/1 var(--sans); background: #fff; color: var(--ink); } .cn-ts-fields i { font: 500 11px/1 var(--sans); color: var(--mut); font-style: normal; } /* cote lipsă = card incomplet: obligatoriu de completat înainte de trimitere */ .cn-ts-card.incomplete { border-color: #C0392B; } .cn-ts-fields input.invalid { border-color: #C0392B; background: #FDF0EC; } .cn-ts-need { color: #C0392B; font: 400 11.5px/1.4 var(--sans); margin: 8px 0 0; } .cn-ts-card:not(.incomplete) .cn-ts-need { display: none; } .cn-ts-err { color: #C0392B; font: 500 12.5px/1.5 var(--sans); margin: 0 0 8px; } /* schițele de teșire din planul de debitare (piesele cu formă, cotate) */ .cn-ts-minis-t { font: 700 13px/1.35 var(--sans); color: var(--ink); margin: 16px 0 8px; } .cn-ts-minis { display: flex; flex-wrap: wrap; gap: 10px; } .cn-ts-mini { flex: 1 1 240px; min-width: 0; border: 1px solid var(--line); border-radius: var(--raza-mica); background: var(--card); padding: 10px; } .cn-ts-mini h4 { font: 600 11.5px/1.4 var(--sans); color: var(--mut); margin: 0 0 6px; } .cn-ts-mini .cn-ts-svg { border: 0; } /* bară de instrumente piese */ .cn-toolbar { margin: 2px 0 12px; } .cn-totals { display: block; text-align: center; font: 400 13px/1.5 var(--sans); color: var(--mut); } .cn-totals b { color: var(--ink); } /* pasul 3 */ .cn-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .cn-stat { background: var(--card); border: 1px solid var(--line); border-radius: 999px; font: 500 12.5px/1 var(--sans); color: var(--mut); padding: 9px 13px; } .cn-stat b { color: var(--ink); } .cn-ml-hint { margin: 0 0 12px; } .cn-warnbox { background: #FFF8E6; border: 1px solid #EFD9A0; border-radius: var(--raza-mica); padding: 10px 12px; margin: 0 0 12px; } .cn-warnbox p { font: 400 12.5px/1.5 var(--sans); color: #7A5B14; margin: 4px 0; } .cn-errbox { background: #FDF0EE; border-color: #E9C6C1; } .cn-errbox p { color: #A93226; } .cn-sum-head { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; } .cn-sum-head > span:last-child { margin-left: auto; white-space: nowrap; } .cn-sum-badge { font: 700 10.5px/1 var(--mono, monospace); letter-spacing: .06em; color: var(--btn); background: var(--soft); border-radius: 5px; padding: 5px 7px; } .cn-sum-decor { font: 600 13px/1.35 var(--sans); color: var(--ink); min-width: 0; } .cn-sum-note { font: 400 12.5px/1.5 var(--sans); color: var(--mut); margin: 2px 0 8px; } .cn-sum-piece { border-top: 1px solid var(--surf); padding: 8px 0; } .cn-sum-piece b { display: block; font: 600 13.5px/1.4 var(--sans); color: var(--ink); } .cn-sum-piece span { font: 400 12.5px/1.5 var(--sans); color: var(--mut); overflow-wrap: anywhere; } .cn-actions { display: grid; gap: 10px; margin-top: 6px; } .cn-actions .cn-btn, .cn-actions .cn-btn-ghost { margin: 0; } .cn-status { font: 400 13.5px/1.55 var(--sans); margin-top: 10px; } .cn-status.success { color: #1E7B34; } .cn-status.error { color: #A93226; } .cn-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* lățimea blatului (aleasă automat) + PFL */ .cn-blat-info { font: 400 12.5px/1.55 var(--sans); color: var(--mut); background: var(--soft); border: 1px solid #F3DFC7; border-radius: var(--raza-mica); padding: 10px 12px; margin: 0 0 12px; } .cn-blat-info b { color: var(--ink); } .cn-pfl-note { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 2px; } /* planul de debitare */ .cn-plan { margin: 4px 0 2px; } .cn-plan .cn-title { margin-top: 8px; } .cn-plan-sheet { margin: 10px 0; } .cn-plan-sheet svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .cn-plan-list { margin: 8px 0; padding-left: 18px; font: 400 13px/1.7 var(--sans); color: var(--ink); } .cn-plan-list small { color: var(--mut); } /* modalul de decoruri */ .cn-noscroll, .cn-noscroll body { overflow: hidden; } /* z-index PESTE bara de jos a site-ului (85), actionbar (86) și PWA (88) — altfel ultimul rând de culori + „Încarcă mai multe" ar rămâne îngropate. */ .cn-modal { position: fixed; inset: 0; z-index: 95; background: rgba(28, 28, 31, .45); display: flex; align-items: flex-end; } .cn-modal[hidden] { display: none; } .cn-modal-box { background: var(--page); width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; padding: 14px 14px calc(var(--safe-bottom) + 14px); } .cn-modal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; } .cn-modal-head h3 { font: 700 16px/1.2 var(--sans); color: var(--ink); margin: 0; } .cn-modal-close { border: 0; background: var(--surf); color: var(--ink); width: 40px; height: 40px; border-radius: 50%; font-size: 15px; cursor: pointer; } .cn-modal-tools input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--raza-mica); font: 400 16px/1.3 var(--sans); background: #fff; margin: 0 0 10px; } .cn-modal-sups { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; } .cn-modal-default { border: 1px dashed var(--line); background: var(--card); border-radius: var(--raza-mica); font: 600 13px/1.3 var(--sans); color: var(--ink); padding: 11px 12px; cursor: pointer; margin: 2px 0 8px; } .cn-modal-count { font: 400 12px/1.4 var(--sans); color: var(--mut); margin: 2px 0 8px; } .cn-modal-grid { overflow-y: auto; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; } /* ÎNĂLȚIME EXPLICITĂ pe card ȘI pe imagine — v. capcana cardurilor minuscule: lăsată la calcul, grila așeza rândul la ~34px și imaginea era tăiată. */ .cn-color-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--raza-mica); padding: 0 0 8px; cursor: pointer; text-align: left; overflow: hidden; display: flex; flex-direction: column; height: 150px; } .cn-color-card img { display: block; width: 100%; height: 96px; object-fit: cover; background: var(--surf); border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; } .cn-color-card .cc-n { display: block; font: 600 11.5px/1.3 var(--sans); color: var(--ink); padding: 7px 8px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cn-color-card .cc-c { display: block; font: 400 10.5px/1.3 var(--sans); color: var(--mut); padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cn-modal-more { text-align: center; padding-top: 10px; } .cn-modal-more button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--ink); padding: 11px 18px; cursor: pointer; } /* confirmarea trimisă */ .cn-confirm { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(28, 28, 31, .55); } .cn-confirm-card { background: #fff; border-radius: var(--raza); max-width: 380px; width: 100%; padding: 32px 24px; text-align: center; } .cn-confirm-card svg { width: 84px; height: 84px; margin: 0 auto 14px; display: block; } .cn-confirm-card svg circle { stroke: var(--acc); stroke-width: 5; fill: none; } .cn-confirm-card svg path { stroke: var(--acc); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .cn-confirm-card h3 { font: 700 19px/1.25 var(--sans); color: var(--ink); margin: 0 0 8px; } .cn-confirm-nr { display: inline-block; font: 700 13px/1 var(--mono, monospace); color: var(--btn); background: var(--soft); border: 1px solid #F3DFC7; border-radius: 7px; padding: 7px 12px; margin: 0 0 12px; } .cn-confirm-card p { font: 400 13.5px/1.6 var(--sans); color: var(--mut); margin: 0 0 18px; } .cn-confirm-card .cn-btn { margin: 0; } /* telefoane inguste (360px si sub): schita piesei se micsoreaza ca sa ramana latime pentru controalele cantului — altfel numele decorului se taie */ @media (max-width: 400px) { .cn-cant-main { gap: 10px; } .cn-diagram { width: 100px; height: 80px; } .cn-edge-ctl { padding-left: 0; } } @media (min-width: 560px) { /* pe ecran lat controalele cantului incap indentate sub bifa; pe telefon indentarea de 30px lua exact latimea de care are nevoie pastila de culoare */ .cn-edge-ctl { padding-left: 30px; } .cn-modal { align-items: center; padding: 24px; } .cn-modal-box { border-radius: 16px; max-width: 640px; margin: 0 auto; } .cn-modal-grid { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: reduce) { .cn-btn:active { transform: none; } } /* feedback tactil (skill: make-interfaces-feel-better) */ .cn-chip, .cn-fisa-tab, .cn-color-card, .cn-decor-btn, .cn-btn-ghost { transition: transform .13s ease; } .cn-chip:active, .cn-fisa-tab:active, .cn-color-card:active, .cn-decor-btn:active, .cn-btn-ghost:active { transform: scale(.98); }