/* ========================================================= Murphy Motion • styles.css (3 themes + density toggle) Themes: dark | light | emerald Density: comfortable | compact ========================================================= */ :root{ /* Default theme + density (overridden by html[data-*]) */ --bg0:#05050a; --bg1:#0a0a14; --card:rgba(15,16,32,.88); --card2:rgba(20,21,50,.88); --text:#f5f7ff; --muted:#a7a9c2; --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.14); --accent:#5eead4; --accent2:#22c55e; --danger:#fb7185; --warn:#fbbf24; --shadow: 0 18px 60px rgba(0,0,0,.45); --shadow2: 0 12px 30px rgba(0,0,0,.35); --radius: 18px; --ring: 0 0 0 6px rgba(94,234,212,.10); /* density */ --pad-card: 14px; --pad-btn-y: 10px; --pad-btn-x: 12px; --pad-input-y: 11px; --pad-input-x: 12px; --pad-td-y: 11px; --pad-td-x: 12px; --fs-h1: 26px; --fs-body: 15px; --fs-small: 13px; } /* ========================= Themes (set on ) ========================= */ /* DARK */ html[data-theme="dark"]{ color-scheme: dark; --bg0:#05050a; --bg1:#0a0a14; --card:rgba(15,16,32,.88); --card2:rgba(20,21,50,.88); --text:#f5f7ff; --muted:#a7a9c2; --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.14); --accent:#5eead4; --accent2:#22c55e; --danger:#fb7185; --warn:#fbbf24; --shadow: 0 18px 60px rgba(0,0,0,.45); --shadow2: 0 12px 30px rgba(0,0,0,.35); --ring: 0 0 0 6px rgba(94,234,212,.10); } /* LIGHT */ html[data-theme="light"]{ color-scheme: light; --bg0:#f6f7fb; --bg1:#eef1f8; --card:rgba(255,255,255,.78); --card2:rgba(255,255,255,.92); --text:#0e1020; --muted:#1f2937; --border:rgba(14,16,32,.10); --border2:rgba(14,16,32,.16); --accent:#0ea5e9; --accent2:#22c55e; --danger:#e11d48; --warn:#d97706; --shadow: 0 14px 34px rgba(18,24,40,.10); --shadow2: 0 10px 24px rgba(18,24,40,.10); --ring: 0 0 0 6px rgba(14,165,233,.14); } /* EMERALD (dark-ish, green premium) */ html[data-theme="emerald"]{ color-scheme: dark; --bg0:#04080a; --bg1:#071012; --card:rgba(10,18,20,.88); --card2:rgba(10,24,22,.88); --text:#f2fffb; --muted:#9bb7b0; --border:rgba(242,255,251,.10); --border2:rgba(242,255,251,.16); --accent:#34d399; /* emerald */ --accent2:#22c55e; --danger:#fb7185; --warn:#fbbf24; --shadow: 0 18px 60px rgba(0,0,0,.52); --shadow2: 0 12px 30px rgba(0,0,0,.40); --ring: 0 0 0 6px rgba(52,211,153,.14); } /* ========================= Density (set on ) ========================= */ html[data-density="comfortable"]{ --pad-card: 14px; --pad-btn-y: 10px; --pad-btn-x: 12px; --pad-input-y: 11px; --pad-input-x: 12px; --pad-td-y: 11px; --pad-td-x: 12px; --fs-body: 15px; --fs-small: 13px; } html[data-density="compact"]{ --pad-card: 12px; --pad-btn-y: 8px; --pad-btn-x: 10px; --pad-input-y: 9px; --pad-input-x: 10px; /* Compact permanent, dar lizibil (fara zoom) */ --pad-td-y: 10px; --pad-td-x: 12px; --fs-body: 14.5px; --fs-small: 13px; } /* ========================= Base ========================= */ *{ box-sizing:border-box } html,body{ height:100% } body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); font-size: var(--fs-body); background: radial-gradient(1200px 700px at 18% -20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%), radial-gradient(900px 600px at 92% 0%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 55%), radial-gradient(900px 500px at 50% 120%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1) 65%, color-mix(in srgb, var(--bg1) 70%, #000 30%)); } a{ color:inherit; text-decoration:none } .container{ max-width:1360px; margin:0 auto; padding:16px; } /* Layout mai lat pe desktop, fara a forta zoom */ @media (min-width: 1400px){ .container{ max-width:1460px; } } /* Card auth modern (Profil) */ .auth-shell{ max-width: 520px; margin: 22px auto; } .auth-card{ overflow: hidden; } .auth-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .auth-tabs{ display:flex; gap:8px; padding:8px; border:1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--card2) 70%, transparent); } .auth-tab{ border:0; cursor:pointer; color:var(--muted); padding:8px 12px; border-radius: 999px; background: transparent; font-weight:700; } .auth-tab.is-active{ color:var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); } .auth-footlinks{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; } .link{ color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-weight:700; cursor:pointer; text-decoration:none; } .link:hover{ text-decoration: underline; } /* Segmented controls (PFA/CIM, NET/BRUT) */ .segmented{ display:inline-flex; gap:6px; padding:4px; border-radius: 12px; border:1px solid var(--border); background: color-mix(in srgb, var(--card2) 70%, transparent); } .segmented button{ border:0; cursor:pointer; border-radius: 10px; padding: 6px 10px; color: var(--muted); background: transparent; font-weight: 800; font-size: 12px; line-height: 1.1; min-width: 58px; } .segmented button.is-active{ color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); } /* Remove number spinners ("butoanele" din inputurile numerice) */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } input[type="number"]{ -moz-appearance: textfield; appearance: textfield; } /* Password input group (toggle visibility) */ .input-group{ position: relative; width:100%; display:block; box-sizing:border-box; } .input-group .input{ padding-right: 44px; } .pw-toggle{ position: absolute; right: 10px; top: 39%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 6px; border-radius: 10px; color: var(--muted); font-size: 14px; } .pw-toggle:hover{ background: rgba(90, 220, 170, .10); color: var(--text); } /* Search bar */ .search-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .search-row .input{ min-width: 260px; } /* Stabilitate tabele cand apar texte lungi */ .table{ table-layout: fixed; } .table td, .table th{ overflow:hidden; text-overflow: ellipsis; } .nowrap{ white-space: nowrap; } /* Meniu actiuni "portal" (nu mai e taiat de container) */ .menu-portal{ position: fixed; z-index: 9999; min-width: 220px; background: color-mix(in srgb, var(--card2) 92%, transparent); border: 1px solid var(--border2); border-radius: 16px; box-shadow: var(--shadow2); padding: 8px; backdrop-filter: blur(10px); } /* Unified UI ========================= */ .select--hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip: rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } .dd{ display:inline-block; max-width:100%; } .dd__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(120,160,200,.18); background: linear-gradient(180deg, rgba(20,28,40,.85), rgba(12,18,26,.95)); color: var(--text); font: inherit; cursor:pointer; user-select:none; transition: border .15s ease, box-shadow .15s ease, transform .05s ease, background .15s ease; } .dd__btn:hover{ border-color: rgba(80,200,160,.45); box-shadow: 0 0 0 2px rgba(60,180,140,.12); } .dd__btn:active{ transform: translateY(1px); } .dd__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dd__chev{ opacity:.85; flex:0 0 auto; } .dd__chev svg{ width:18px; height:18px; } .dd__menu{ position: fixed; min-width: 220px; border-radius: 16px; border: 1px solid rgba(120,160,200,.20); background: linear-gradient(180deg, rgba(18,24,36,.96), rgba(10,14,22,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 8px; z-index: 99999; } .dd__item{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border-radius: 12px; color: var(--text); background: transparent; border: 0; cursor: pointer; font: inherit; text-align:left; } .dd__item:hover{ background: rgba(90, 220, 170, .12); } .dd__item.is-active{ background: rgba(90, 220, 170, .18); outline: 1px solid rgba(90, 220, 170, .25); } /* Select sizing helpers */ .dd--sm .dd__btn{ padding: 8px 10px; border-radius: 12px; font-size: 13px; } /* ========================= Profile layout helpers ========================= */ .profile-page .form--narrow{ max-width: 560px; } .profile-page .input{ max-width: 560px; } @media (max-width: 820px){ .profile-page .form--narrow, .profile-page .input{ max-width: 100%; } } /* ========================= Profil polish ========================= */ .profile-hero{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .profile-hero__left{ display:flex; align-items:center; gap:14px; } .profile-avatar{ width:46px; height:46px; border-radius: 16px; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, rgba(80,220,170,.35), rgba(12,18,26,.1)), linear-gradient(180deg, rgba(20,28,40,.85), rgba(12,18,26,.95)); border: 1px solid rgba(120,160,200,.18); color: var(--text); font-weight: 800; } .profile-title{ font-size: 18px; font-weight: 800; } .profile-sub{ color: var(--muted); font-size: 13px; } /* Make hover states more visible (buttons/links) */ .btn:hover{ filter: brightness(1.05); } .btn:active{ transform: translateY(1px); } .link:hover{ text-decoration: underline; } /* === FleetBalance: dropdown theme + layering fix (CSS-only) === */ /* IMPORTANT: Only overrides .dd dropdown styles (theme-aware) + ensure it renders above surrounding boxes. */ .dd{ overflow: visible; } .dd__btn{ border: 1px solid var(--border2) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--card2) 86%, transparent), color-mix(in srgb, var(--card2) 96%, transparent) ) !important; color: var(--text) !important; box-shadow: var(--shadow2) !important; } .dd__btn:hover{ border-color: color-mix(in srgb, var(--border2) 65%, var(--accent) 35%) !important; box-shadow: var(--ring), var(--shadow2) !important; } .dd__menu{ /* make sure it is ALWAYS above cards/modals */ position: fixed !important; z-index: 2147483647 !important; border: 1px solid var(--border2) !important; background: color-mix(in srgb, var(--card2) 92%, transparent) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(12px); } .dd__item{ color: var(--text) !important; } .dd__item:hover{ background: color-mix(in srgb, var(--accent) 14%, transparent) !important; } .dd__item.is-active{ background: color-mix(in srgb, var(--accent) 18%, transparent) !important; outline: 1px solid color-mix(in srgb, var(--accent) 28%, transparent) !important; } /* ===== Profile (modern) ===== */ .profile-shell{ max-width: 980px; margin: 18px auto 26px; } .profile-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px; } .profile-top__left{ display:flex; align-items:center; gap:12px; min-width: 0; } .avatar{ width:44px; height:44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-weight:900; background: color-mix(in srgb, var(--accent) 16%, transparent); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 10px 22px rgba(0,0,0,.18); flex: 0 0 auto; } .profile-top__name{ font-size: 18px; font-weight: 900; line-height:1.2; white-space:normal; overflow:hidden; text-overflow:ellipsis; max-width: 42ch; } .profile-top__actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; } .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; } @media (max-width: 920px){ .grid-2{ grid-template-columns:1fr; } } /* ===== Security modal (premium) ===== */ .sec-modal{ display:flex; flex-direction:column; gap:14px; } .sec-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .sec-title{ font-size:18px; font-weight:900; letter-spacing:.2px; } .sec-subtitle{ opacity:.72; font-size:13px; margin-top:4px; } .sec-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); font-size:12px; white-space:nowrap; } .sec-badge--ok{ border-color: color-mix(in srgb, var(--accent2) 40%, transparent); background: color-mix(in srgb, var(--accent2) 14%, transparent); } .sec-grid{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width: 860px){ .sec-grid{ grid-template-columns: 1fr 1fr; } } .sec-card{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:18px; padding:14px; box-shadow: 0 10px 24px rgba(0,0,0,.20); } .sec-card__top{ display:flex; flex-direction:column; gap:4px; margin-bottom:10px; } .sec-card__title{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:14px; } .sec-ico{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); font-size:14px; } .sec-card__hint{ font-size:12px; opacity:.70; } .sec-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; } .sec-label{ font-size:12px; opacity:.80; } .sec-input{ border-radius:14px; padding:12px 12px; } .sec-inputgroup{ border-radius:14px; overflow:hidden; } .sec-pwtoggle{ border-radius:12px; margin:4px; } .sec-actions{ display:flex; justify-content:flex-end; margin-top:12px; } .sec-btn{ border-radius:14px; padding:10px 14px; font-weight:800; } .sec-msg{ margin-top:10px; min-height:18px; font-size:12px; opacity:.90; padding:10px 12px; border-radius:14px; border:1px dashed rgba(255,255,255,.12); background:rgba(255,255,255,.03); } .sec-msg:empty{ display:none; } .sec-msg[data-type="ok"]{ border-style:solid; border-color: color-mix(in srgb, var(--accent2) 42%, transparent); background: color-mix(in srgb, var(--accent2) 14%, transparent); } .sec-msg[data-type="err"]{ border-style:solid; border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.10); } .sec-footnote{ font-size:12px; opacity:.75; padding-top:2px; } /* ========================= Profile: access banner spacing ========================= */ #accessBanner{ margin: 10px 0 14px; line-height: 1.25; display:flex; gap:10px; align-items:flex-start; } /* ===== Mobile-first improvements (2026-02) ===== */ .input--sm{ padding:10px 12px; font-size:13px; border-radius:14px; } @media (max-width: 720px){ dialog.modal{ width: calc(100vw - 18px); max-width:none; max-height: calc(100vh - 18px); margin: 9px auto; } .modal__body{ max-height: calc(100vh - 190px); overflow:auto; -webkit-overflow-scrolling: touch; } .modal__foot{ position:sticky; bottom:0; background: color-mix(in srgb, var(--card2) 88%, transparent); backdrop-filter: blur(10px); border-top:1px solid var(--border); padding-top:10px; padding-bottom:10px; } } .driver-cards, .result-cards{ display:grid; gap:12px; } .mcard{ border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); border-radius:18px; padding:12px; box-shadow: 0 10px 22px rgba(0,0,0,.18); } html[data-theme="light"] .mcard{ background: rgba(14,16,32,.04); box-shadow: 0 10px 18px rgba(18,24,40,.10); } .mcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .mcard__title{ font-weight:950; letter-spacing:.2px; min-width:0; } .mcard__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:10px; } .mcard__grid .muted{ font-size:12px; display:block; margin-bottom:2px; } .mval{ font-size:14px; font-weight:700; } .mcard__ids{ display:grid; gap:8px; margin-top:10px; } .mline{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .mcard__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; } @media (max-width: 520px){ .mcard__top{ align-items:flex-start; } .mcard__actions{ width:100%; justify-content:flex-start; margin-top:6px; } .mcard__actions .btn{ padding:7px 10px; font-size:13px; } } @media (max-width: 420px){ .mcard__grid{ grid-template-columns:1fr; } } .profile-top{ background: radial-gradient(800px 260px at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), linear-gradient(180deg, var(--card), var(--card2)); } .access-banner{ padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); font-size:13px; line-height:1.35; } @media (max-width: 720px){ .profile-top{ flex-direction:column; align-items:stretch; } .profile-top__actions{ justify-content:stretch; } .profile-top__actions .btn{ width:100%; } } .mobile-nav-btn{ font-size:18px; padding:10px 12px; } html[data-theme="light"] ::placeholder{ color: rgba(31,41,55,.55); } /* Mobile nav must be hidden until hamburger is pressed (override cascade) */ @media (max-width: 820px){ .nav{ display:none !important; } .nav.is-open{ display:flex !important; } } html[data-theme="light"] .muted{ color: rgba(31,41,55,.75); } html[data-theme="light"] .card__desc{ color: rgba(31,41,55,.75); } /* ===== Rapoarte: header results responsive ===== */ .results-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; } .results-head__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .results-zip{ white-space:nowrap; } .results-week{ white-space:nowrap; } @media (max-width: 640px){ .results-head__actions{ width:100%; justify-content:flex-start; } .results-head__actions .btn{ padding:8px 10px; font-size:13px; } .results-zip{ flex:0 0 auto; } .results-week{ margin-left:auto; } } /* ===== Șoferi: desktop table cells (ca în screenshot 5) ===== */ .tcell{ display:flex; flex-direction:column; gap:2px; } .tcell__main{ font-weight:800; } .tcell__sub{ font-size:12px; color:var(--muted); } .tcell__sub.is-on{ color: color-mix(in srgb, var(--ok) 75%, var(--muted)); } .tcell__sub.is-off{ color: color-mix(in srgb, var(--danger) 70%, var(--muted)); } /* Prevent long names from pushing other cells; show ellipsis instead */ .table--drivers td .tcell__main, .table--drivers td .tcell__sub{ display:block; overflow:hidden; text-overflow: ellipsis; } .table--drivers td .tcell__main{ white-space:nowrap; } .table--drivers td .tcell__sub{ white-space:nowrap; } .tcell--nowrap{ white-space:nowrap; font-weight:700; } .tcell--center{ text-align:center; white-space:nowrap; } .tcell--actions{ text-align:right; } .idcell{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; /* prevent stacking/overlap on desktop */ min-width:0; /* allow ellipsis inside flex */ } .icon-btn--sm{ width:30px; height:30px; border-radius:10px; } .idcell .icon-btn, .idcell .icon-btn--sm{ flex: 0 0 auto; } /* Table alignment fix */ .table td{ vertical-align:middle; } .table th{ white-space:nowrap; } .table td code{ font-size:12px; } /* ===== Șoferi: mobile actions 3 buttons ===== */ .mcard__actions{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; } @media (max-width: 420px){ .mcard__actions{ grid-template-columns: 1fr; } } /* ===== Profil: layout polish (mobile friendly) ===== */ @media (max-width: 640px){ .auth-shell{ margin: 14px auto; padding: 0 10px; } .auth-head{ flex-direction:column; align-items:flex-start; } .auth-tabs{ width:100%; justify-content:space-between; } .auth-tab{ flex:1 1 auto; text-align:center; } .profile-top{ gap:12px; } .profile-top__actions{ width:100%; justify-content:stretch; } .profile-top__actions .btn{ flex:1 1 auto; } } /* Auth brand header */ .auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding: 8px 6px; } .auth-logo{ width:44px; height:44px; border-radius: 14px; display:grid; place-items:center; font-weight:900; color: var(--text); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 55%, transparent), rgba(255,255,255,.06)); border:1px solid var(--border); box-shadow: var(--shadow); } .auth-brand__title{ font-size:18px; font-weight:900; letter-spacing:-.01em; } .auth-brand__sub{ font-size:13px; color: var(--muted); } /* Rapoarte: cards layout better on phone */ @media (max-width: 520px){ .result-cards .mcard__top{ align-items:flex-start; } .result-cards .mcard__top .btn{ padding:10px 12px; } .result-cards .mcard__grid{ grid-template-columns: 1fr; } } /* ========================= Responsive tweaks (patch) ========================= */ /* Light theme: make modal text/placeholder less "sters" */ html[data-theme="light"] dialog.modal{ color: #0b0d14; } html[data-theme="light"] dialog.modal .muted{ color: #111827; opacity: .75; } html[data-theme="light"] dialog.modal ::placeholder{ color: color-mix(in srgb, #111827 55%, transparent); } /* Rapoarte (cards rezultate) — mobile: actiuni sub nume (PDF/Excel) */ @media (max-width:520px){ .mcard--result .mcard__top{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .mcard--result .mcard__title{ text-align:left; font-size:18px; font-weight:750; line-height:1.2; word-break:break-word; width:100%; } .mcard--result .mcard__actions{ width:100%; display:flex; gap:10px; justify-content:flex-start; } .mcard--result .mcard__actions--icons .icon-btn{ width:42px; height:42px; border-radius:12px; } .mcard--result .mcard__actions--icons .icon-btn svg{ width:18px; height:18px; } /* grid 2 coloane (pentru mobile) */ .mcard--result .mcard__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px 16px; margin-top:10px; } .mcard--result .mcard__total{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); text-align:center; } .mcard--result .mcard__totalLabel{ font-size:12px; letter-spacing:.16em; opacity:.65; } .mcard--result .mcard__totalVal{ font-size:26px; font-weight:900; margin-top:2px; } .mcard--result .mcard__total.is-pos .mcard__totalVal{ color: color-mix(in srgb, var(--accent2) 90%, #0a8f3a); } .mcard--result .mcard__total.is-neg .mcard__totalVal{ color: color-mix(in srgb, var(--danger) 92%, #c1121f); } .mcard--result .mcard__total.is-zero .mcard__totalVal{ color: var(--text); } } /* Șoferi — mobile: header centrat + fara suprapuneri + butoane pe un rand */ @media (max-width:520px){ .mcard--driver .mcard__head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; } .mcard--driver .mcard__title{ font-size:17px; font-weight:750; line-height:1.2; word-break:break-word; } .mcard--driver .mcard__status{ margin-top:2px; } .mcard--driver .mcard__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 14px; text-align:center; } .mcard--driver .mcard__actions{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:12px; } .mcard--driver .mcard__actions .btn{ padding:10px 6px; font-size:13px; white-space:nowrap; } } /* ========================================================= Profil • Premium layout (responsive, theme-safe) ========================================================= */ .prof-page{ max-width: 1180px; margin: 0 auto; } .prof-grid{ display:grid; grid-template-columns: 1.65fr 1fr; gap: 14px; } .prof-card{ position:relative; overflow:hidden; } .prof-cover{ height: 44px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, var(--card2), var(--card)); } .prof-header{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 14px; } .prof-id{ display:flex; gap: 12px; align-items:center; min-width:0; } .prof-avatar{ width: 56px; height: 56px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight: 800; letter-spacing: .02em; background: rgba(255,255,255,.06); border: 1px solid var(--border2); box-shadow: var(--shadow2); flex: 0 0 auto; } html[data-theme="light"] .prof-avatar{ background: rgba(14,16,32,.06); } .prof-titlewrap{ min-width:0; } .prof-company{ font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prof-email{ margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prof-cta{ flex: 0 0 auto; } .prof-info{ padding: 6px 14px 14px 14px; } .prof-row{ display:flex; gap: 12px; align-items:flex-start; padding: 10px 0; border-top: 1px solid var(--border); } .prof-row:first-child{ border-top: 0; } .prof-ico{ width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border); display:flex; align-items:center; justify-content:center; flex: 0 0 auto; } html[data-theme="light"] .prof-ico{ background: rgba(14,16,32,.05); } .prof-ico svg{ width: 18px; height: 18px; opacity: .95; } .prof-meta{ min-width:0; } .prof-label{ font-size: var(--fs-small); color: var(--muted); } .prof-value{ margin-top: 2px; font-weight: 700; word-break: break-word; } .prof-row--split{ align-items:center; } .prof-row__left{ display:flex; gap: 12px; align-items:flex-start; min-width:0; } .prof-row__right{ margin-left:auto; flex: 0 0 auto; } /* RIGHT column blocks */ .prof-right{ display:flex; flex-direction:column; gap: 14px; } .premium-card{ position:relative; overflow:hidden; } .premium-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(70% 90% at 10% 10%, var(--accent), transparent 60%), radial-gradient(70% 90% at 95% 0%, var(--accent2), transparent 62%); opacity: .14; pointer-events:none; } .prof-plan{ padding: 14px; } .prof-plan__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; } .prof-plan__label{ font-size: var(--fs-small); color: var(--muted); } .prof-plan__name{ font-size: 32px; font-weight: 900; margin-top: 2px; line-height: 1; } .prof-pill{ padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border2); background: rgba(255,255,255,.06); font-weight: 800; font-size: var(--fs-small); white-space: nowrap; } html[data-theme="light"] .prof-pill{ background: rgba(14,16,32,.06); } .prof-pill.is-active{ box-shadow: var(--ring); } .prof-pill.is-inactive{ opacity: .92; } .prof-plan__list{ margin-top: 12px; display:flex; flex-direction:column; gap: 8px; } .prof-bullet{ display:flex; gap: 10px; align-items:center; color: var(--text); } .prof-bullet .dot{ width: 8px; height: 8px; border-radius: 99px; background: var(--accent); opacity: .85; flex: 0 0 auto; } .prof-plan__actions{ margin-top: 12px; } .prof-upgrade{ width: 100%; } .prof-trial{ padding: 14px; } .prof-trial__head{ display:flex; justify-content:space-between; gap: 10px; align-items:flex-end; } .prof-trial__title{ font-weight: 900; } .prof-trial__row{ margin-top: 10px; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; } .prof-trial__row .btn{ min-width: 140px; } .prof-session{ padding: 14px; } .prof-session__title{ font-weight: 900; } /* Activity */ .prof-activity{ margin-top: 14px; } .prof-activity__head{ margin-bottom: 10px; } .prof-activity__title{ font-weight: 900; } .prof-tiles{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .prof-tile{ padding: 16px; } .prof-tile__num{ font-size: 40px; font-weight: 950; letter-spacing: -0.02em; } /* Responsive */ @media (max-width: 980px){ .prof-grid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .prof-header{ flex-direction:column; align-items:stretch; } .prof-cta .btn{ width: 100%; } .prof-company{ font-size: 28px; white-space: normal; } .prof-email{ white-space: normal; } .prof-trial__row{ align-items:stretch; } .prof-trial__row .btn{ width: 100%; } .prof-tiles{ grid-template-columns: 1fr; } } /* ========================= Profil v2 (mockup-like) ========================= */ .profile2{ max-width: 1180px; margin: 0 auto; } .profile2-grid{ display:grid; grid-template-columns: 1.35fr .95fr; gap: 18px; align-items:start; } @media (max-width: 980px){ .profile2-grid{ grid-template-columns: 1fr; } } .profile2-hero{ padding:0; overflow:hidden; } .profile2-cover{ height: 60px; background: radial-gradient(1200px 300px at 20% 0%, rgba(255,255,255,.20), rgba(255,255,255,0)), linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.05)); border-bottom: 1px solid var(--border); } html[data-theme="light"] .profile2-cover{ background: radial-gradient(1200px 300px at 20% 0%, rgba(0,0,0,.06), rgba(0,0,0,0)), linear-gradient(135deg, rgba(14,16,32,.06), rgba(255,255,255,.70)); } .profile2-heroInner{ display:flex; align-items:flex-end; gap:14px; padding: 0 18px 14px; margin-top: -44px; } .profile2-avatar{ width:88px; height:88px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight: 900; letter-spacing: .5px; color: var(--text); background: rgba(255,255,255,.10); border: 3px solid rgba(255,255,255,.50); box-shadow: 0 12px 30px rgba(0,0,0,.20); backdrop-filter: blur(10px); flex: 0 0 auto; } html[data-theme="light"] .profile2-avatar{ background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.95); box-shadow: 0 12px 28px rgba(14,16,32,.12); } .profile2-headText{ min-width: 0; padding-bottom:6px; } .profile2-name{ font-size: 34px; line-height: 1.05; font-weight: 950; letter-spacing: -0.6px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 680px; } @media (max-width: 720px){ .profile2-name{ font-size: 28px; max-width: 100%; } } .profile2-sub{ margin-top:6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 680px; } .profile2-editBtn{ margin-left:auto; align-self:center; } .profile2-body{ padding: 6px 18px 18px; } .profile2-row{ display:flex; align-items:center; gap:12px; padding: 12px 0; } .profile2-ico{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--border); flex: 0 0 auto; } html[data-theme="light"] .profile2-ico{ background: rgba(14,16,32,.04); } .profile2-rowMain{ min-width: 0; } .profile2-rowLabel{ font-size: 12px; color: var(--muted); margin-bottom: 2px; } .profile2-rowValue{ font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; } .profile2-row--action .profile2-rowValue{ font-weight: 900; letter-spacing: 2px; } .profile2-row--action .btn{ margin-left:auto; } .profile2-divider{ height:1px; background: var(--border); margin: 6px 0 2px; opacity:.9; } /* Activity */ .profile2-activity{ padding: 16px 18px; margin-top: 14px; } .profile2-activityTitle{ font-weight: 950; letter-spacing: -0.3px; margin-bottom: 12px; } .profile2-activityGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px){ .profile2-activityGrid{ grid-template-columns: 1fr; } } .profile2-stat{ border: 1px solid var(--border); border-radius: 16px; padding: 14px 14px; background: rgba(255,255,255,.06); } html[data-theme="light"] .profile2-stat{ background: rgba(255,255,255,.92); } .profile2-statNum{ font-size: 26px; font-weight: 950; } .profile2-statLbl{ color: var(--muted); font-size: 12px; margin-top: 4px; } /* Right side plan */ .profile2-plan{ padding: 16px 18px; } .profile2-planTitle{ font-weight: 950; letter-spacing: -0.3px; } .profile2-planCard{ margin-top: 12px; border-radius: 18px; border: 1px solid rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.06)); overflow:hidden; } html[data-theme="light"] .profile2-planCard{ border-color: rgba(16,185,129,.35); background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(255,255,255,.78)); } .profile2-planCardHead{ padding: 14px 14px 10px; } .profile2-planKicker{ color: rgba(255,255,255,.82); font-weight: 900; font-size: 12px; } html[data-theme="light"] .profile2-planKicker{ color: rgba(14,16,32,.70); } .profile2-planName{ font-size: 26px; font-weight: 950; margin-top: 3px; } .profile2-planList{ list-style: none; padding: 0 14px 12px; margin: 0; display:flex; flex-direction: column; gap: 10px; } .profile2-planList li{ display:flex; align-items:flex-start; gap: 10px; color: var(--text); opacity: .92; } .profile2-planList .dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(16,185,129,.85); margin-top: 7px; flex: 0 0 auto; } .profile2-upgradeBtn{ width: calc(100% - 28px); margin: 0 14px 14px; border-radius: 16px; font-weight: 950; } /* Trial area */ .profile2-trial{ margin-top: 14px; } .profile2-logout{ padding: 16px 18px; margin-top: 14px; } .profile2-logoutTitle{ font-weight: 950; letter-spacing: -0.3px; } /* Make access banner blend with layout */ .profile2-plan .access-banner{ border-radius: 16px; } /* Small button size helper (if not already present) */ .btn--sm{ padding: 8px 10px; border-radius: 12px; font-size: 12px; } /* ===== Profil v2 (mockup) — mobile polish ===== */ @media (max-width: 720px){ .profile2{ padding: 0 10px; } .profile2-grid{ gap: 14px; } .profile2-cover{ height: 46px; } .profile2-heroInner{ flex-direction: column; align-items: flex-start; margin-top: -34px; padding: 0 14px 12px; gap: 10px; } .profile2-avatar{ width: 72px; height: 72px; border-width: 2px; } .profile2-headText{ width: 100%; padding-bottom: 0; } .profile2-name{ font-size: 26px; white-space: normal; line-height: 1.12; max-width: 100%; } .profile2-sub{ white-space: normal; max-width: 100%; } .profile2-editBtn{ margin-left: 0; width: 100%; } .profile2-body{ padding: 6px 14px 14px; } .profile2-row{ padding: 10px 0; } .profile2-rowValue{ max-width: 100%; white-space: normal; word-break: break-word; } .profile2-row--action .btn{ width: 100%; margin-left: 0; margin-top: 10px; } } /* Extra small screens */ @media (max-width: 520px){ .profile2-ico{ width: 34px; height: 34px; border-radius: 12px; } .profile2-row{ gap: 10px; } .profile2-planCardHead{ padding: 14px; } .profile2-planList{ gap: 10px; } .profile2-upgradeBtn{ width: 100%; } .profile2-trial input{ width: 100%; } .profile2-trial .btn{ width: 100%; } .profile2-logout{ padding: 14px; } .profile2-logout .btn{ width: 100%; } } /* ========================= App Footer (global) ========================= */ /* Sticky footer: ține footer-ul jos când pagina e scurtă */ body{ min-height: 100vh; display: flex; flex-direction: column; } main.container{ flex: 1; width: 100%; } .app-footer{ margin-top: 18px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--card2) 78%, transparent); backdrop-filter: blur(10px); } .app-footer__inner{ padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .app-footer__links{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .app-footer__link{ font-size: var(--fs-small); color: var(--muted); font-weight: 700; text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; } .app-footer__link:hover{ color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 18%, transparent); } .app-footer__sep{ color: color-mix(in srgb, var(--muted) 55%, transparent); font-weight: 900; } .app-footer__meta{ font-size: var(--fs-small); color: color-mix(in srgb, var(--muted) 78%, var(--text)); font-weight: 700; white-space: nowrap; } /* Mobile: footer pe 2 rânduri, centrat */ @media (max-width: 720px){ .app-footer__inner{ justify-content: center; text-align: center; } .app-footer__meta{ width: 100%; white-space: normal; } } /* ========================= Cookie notice (simple) ========================= */ .cookie-banner{ position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999; display: none; } .cookie-banner__inner{ max-width: 1360px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 18px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card2) 86%, transparent); box-shadow: var(--shadow2); backdrop-filter: blur(10px); } .cookie-banner__title{ font-weight: 900; } .cookie-banner__desc{ font-size: var(--fs-small); color: var(--muted); margin-top: 4px; line-height: 1.35; } .cookie-banner__link{ color: color-mix(in srgb, var(--accent) 80%, var(--text)); font-weight: 800; text-decoration: none; } .cookie-banner__link:hover{ text-decoration: underline; } @media (max-width: 720px){ .cookie-banner__inner{ flex-direction: column; align-items: stretch; } } /* === Callouts (alerts) === */ .callout{ border:1px solid var(--border); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--text); background: rgba(255,255,255,.04); } .callout--warn{ border-color: color-mix(in srgb, #f6c343 45%, var(--border)); background: color-mix(in srgb, #f6c343 10%, rgba(255,255,255,.03)); } .callout--ok{ border-color: color-mix(in srgb, var(--accent2) 45%, var(--border)); background: color-mix(in srgb, var(--accent2) 10%, rgba(255,255,255,.03)); } /* Disabled button */ .btn--disabled, .btn:disabled{ opacity: .55; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* === Callouts (info) === */ .callout--info{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.04)); } /* ========================================================= Guided tutorial (Rapoarte tour) ========================================================= */ .tour-overlay{ position: fixed; inset: 0; z-index: 20000; } .tour-overlay__panel{ position: absolute; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } .tour-popover{ position: fixed; z-index: 20001; width: min(360px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 12px 12px 10px; } .tour-popover__title{ font-weight: 800; font-size: 14px; margin-bottom: 6px; } .tour-popover__body{ font-size: 13px; color: var(--text2); line-height: 1.35; } .tour-popover__footer{ display:flex; justify-content: space-between; align-items:center; gap: 10px; margin-top: 10px; } .tour-progress{ display:flex; gap: 6px; align-items:center; } .tour-dot{ width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid var(--border); } .tour-dot.is-active{ background: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tour-actions{ display:flex; gap:8px; } .tour-actions .btn{ padding: 8px 10px; font-size: 12px; } .tour-target{ position: relative; z-index: 20002 !important; outline: 2px solid color-mix(in srgb, var(--accent) 65%, white 0%); outline-offset: 4px; border-radius: 14px; box-shadow: 0 0 0 6px rgba(0,0,0,.22); } @media (max-width: 720px){ .tour-popover{ border-radius: 16px; } .tour-target{ outline-offset: 3px; } } /* ===== Dashboard Donut ===== */ .dash-chart{ display:grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 900px){ .dash-chart{ grid-template-columns: 340px 1fr; align-items:center; } } .donut-svg{ width:100%; max-width:340px; height:auto; display:block; } .donut-center{ font-weight:700; font-size: clamp(14px, 2.8vw, 20px); fill: var(--text); } .donut-sub{ font-size: clamp(11px, 2.2vw, 13px); fill: var(--text); opacity: .7; } .donut-slice{ cursor:pointer; transition: transform .15s ease, filter .15s ease; transform-origin: 50% 50%; } /* We manage hover with JS (small leave delay) to prevent edge flicker */ .donut-slice.is-hover{ transform: scale(1.04); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 12px var(--glow, rgba(255,255,255,.25))); } .donut-legend .legend-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background: var(--card); margin-bottom:8px; } .legend-left{ display:flex; align-items:center; gap:10px; } .legend-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; } .legend-label{ font-weight:600; } .legend-val{ font-weight:700; } .donut-tooltip{ position: fixed; z-index: 30000; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.85); color:#fff; font-size: 12px; pointer-events:none; transform: translate(-50%, -120%); white-space: nowrap; } /* Dashboard donut - negatives */ .donut-negatives{ margin-top: 10px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; padding: 10px 12px; } .donut-negatives .neg-head{ font-weight: 700; margin-bottom: 8px; } .donut-negatives .neg-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); } .donut-negatives .neg-row:first-child{ border-top: 0; } /* ========= Toast Notifications ========= */ .toast-container{ position: fixed; top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); right: auto; z-index: 999999; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 28px)); pointer-events: none; } .toast{ display: grid; grid-template-columns: 28px 1fr 28px; gap: 10px; align-items: start; padding: 12px 12px 10px; border-radius: 16px; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(0,0,0,.25); position: relative; overflow: hidden; animation: toast-in 260ms cubic-bezier(.18,.9,.2,1.15); pointer-events: auto; } @keyframes toast-in{ 0%{ opacity:0; transform: translateX(-14px) translateY(-6px) scale(.97); filter: blur(.6px); } 70%{ opacity:1; transform: translateX(0) translateY(0) scale(1.01); filter: blur(0); } 100%{ opacity:1; transform: translateX(0) translateY(0) scale(1); } } .toast--hide{ animation: toast-out 180ms ease-in forwards; } @keyframes toast-out{ from{ opacity:1; transform: translateX(0) translateY(0) scale(1); } to{ opacity:0; transform: translateX(-10px) translateY(-6px) scale(.98); } } .toast__icon{ width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: rgba(255,255,255,.06); border: 1px solid var(--border); } .toast__message{ font-size: 13px; line-height: 1.35; } .toast__close{ width: 28px; height: 28px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; } .toast__timer{ position:absolute; left:0; right:0; bottom:0; height: 3px; background: rgba(255,255,255,.14); transform-origin: left center; } .toast__timer--run{ animation-name: toast-timer; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes toast-timer{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } } /* type accents */ .toast--success{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(34,197,94,.10); } .toast--error{ border-color: rgba(255,80,80,.55); box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(239,68,68,.12); } .toast--warning{ border-color: rgba(245,158,11,.55); box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.12); } .toast--info{ box-shadow: 0 16px 44px rgba(0,0,0,.28), 0 0 0 1px rgba(59,130,246,.10); } .toast--success .toast__icon{ background: rgba(34,197,94,.16); } .toast--error .toast__icon{ background: rgba(239,68,68,.16); } .toast--warning .toast__icon{ background: rgba(245,158,11,.16); } /* ========= Confirm Modal ========= */ .confirm-overlay{ position: fixed; inset: 0; z-index: 51000; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 18px; animation: fade-in 160ms ease-out; } .confirm-overlay--hide{ animation: fade-out 160ms ease-in forwards; } @keyframes fade-in{ from{opacity:0} to{opacity:1} } @keyframes fade-out{ from{opacity:1} to{opacity:0} } .confirm-modal{ width: min(420px, 100%); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 16px; } .confirm-modal__title{ font-weight: 800; font-size: 15px; margin-bottom: 8px; } .confirm-modal__body{ font-size: 13px; opacity: .9; line-height: 1.4; margin-bottom: 14px; } .confirm-modal__actions{ display:flex; justify-content: flex-end; gap: 10px; } /* optional danger button (if theme doesn't have it) */ .btn--danger{ background: rgba(239,68,68,.16) !important; border: 1px solid rgba(239,68,68,.55) !important; color: var(--text) !important; } /* Mobile tweaks */ @media (max-width: 520px){ .toast-container{ left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); max-width: none; } } /* ===== Premium Toast polish (theme-friendly) ===== */ .toast{ border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); box-shadow: 0 14px 40px rgba(0,0,0,.25); } .toast__icon{ width: 28px; height: 28px; border-radius: 999px; display:flex; align-items:center; justify-content:center; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); } .toast--success .toast__icon{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.35); } .toast--error .toast__icon{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.35); } .toast--warning .toast__icon{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); } .toast--info .toast__icon{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.30); } .toast__timer{ opacity: .9; } @media (max-width: 560px){ .toast-container{ top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; } .toast{ width: 100%; } } /* Results cards: PDF + Excel actions */ .mcard__titlewrap{ min-width:0; display:flex; flex-direction:column; gap:10px; } .mcard__actions{ display:flex; gap:10px; align-items:center; } /* Download buttons (icon + text) */ .dl-btn{ display:inline-flex; align-items:center; gap:8px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); box-shadow: var(--shadow2); cursor: pointer; user-select:none; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, filter .12s ease, background .12s ease; } html[data-theme="light"] .dl-btn{ background: rgba(14,16,32,.05); } .dl-btn:hover{ filter: brightness(1.02); } .dl-btn:active{ transform: translateY(1px) scale(.99); } .dl-btn:focus{ outline: none; } .dl-btn:focus-visible{ box-shadow: 0 0 0 4px rgba(59,130,246,.28), var(--shadow2); } .dl-btn__ico{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; } .dl-btn__ico svg{ width:18px; height:18px; } .dl-btn__txt{ font-weight: 800; font-size: 12px; letter-spacing: .01em; } @media (max-width:720px){ /* Put actions under the name on phones */ .mcard__top{ align-items:flex-start; } .mcard__actions{ width:100%; justify-content:flex-start; } } /* ========================= HOME (cinematic premium) ========================= */ .brand.is-home-active .brand__mark, .brand.is-home-active .brand__title{ position: relative; text-shadow: 0 0 18px rgba(118,167,255,.55), 0 0 42px rgba(120,255,214,.25); } .brand.is-home-active .brand__mark{ box-shadow: 0 0 0 1px rgba(118,167,255,.22), 0 10px 40px rgba(118,167,255,.18), 0 0 60px rgba(120,255,214,.12); animation: fbGlowPulse 2.6s ease-in-out infinite; } @keyframes fbGlowPulse{ 0%,100%{ filter: brightness(1); transform: translateZ(0) scale(1); } 50%{ filter: brightness(1.12); transform: translateZ(0) scale(1.02); } } .view--home{ padding: 0; } .home-hero{ position: relative; border-radius: 24px; overflow: hidden; min-height: 560px; background: radial-gradient(1000px 700px at 15% 20%, rgba(118,167,255,.18), transparent 60%), radial-gradient(900px 650px at 90% 10%, rgba(120,255,214,.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border: 1px solid var(--border); box-shadow: 0 20px 80px rgba(0,0,0,.45); } .home-hero__bg{ position:absolute; inset:0; pointer-events:none; } .home-hero__glow{ position:absolute; width: 520px; height: 520px; border-radius: 999px; filter: blur(42px); opacity: .9; mix-blend-mode: screen; animation: heroFloat 9s ease-in-out infinite; } .home-hero__glow--a{ left:-120px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(118,167,255,.75), rgba(118,167,255,0) 65%); } .home-hero__glow--b{ right:-160px; top:-220px; background: radial-gradient(circle at 30% 30%, rgba(120,255,214,.6), rgba(120,255,214,0) 65%); animation-delay: -3s; } @keyframes heroFloat{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,18px,0); } } .home-hero__grid{ position:absolute; inset:-2px; background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 30% 20%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 70%); opacity: .28; transform: translateZ(0); animation: gridDrift 14s linear infinite; } @keyframes gridDrift{ from{ background-position: 0 0, 0 0; } to{ background-position: 120px 0, 0 120px; } } .home-hero__grain{ position:absolute; inset:0; opacity:.12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); animation: grainShift 8s steps(6) infinite; mix-blend-mode: overlay; } @keyframes grainShift{ 0%{ transform: translate3d(0,0,0); } 25%{ transform: translate3d(-2%, 1%,0); } 50%{ transform: translate3d(2%, -1%,0); } 75%{ transform: translate3d(-1%, -2%,0); } 100%{ transform: translate3d(0,0,0); } } .home-hero__inner{ position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; padding: 44px; } .home-kicker{ color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .home-title{ margin: 10px 0 10px; font-size: clamp(34px, 4.1vw, 54px); line-height: 1.02; letter-spacing: -0.02em; } .home-title__accent{ background: linear-gradient(90deg, rgba(118,167,255,1), rgba(120,255,214,1)); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-subtitle{ max-width: 52ch; color: var(--muted); font-size: 16px; line-height: 1.55; } .home-cta{ display:flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .btn--xl{ padding: 12px 16px; font-weight: 700; border-radius: 14px; } .btn--primary.btn--xl{ box-shadow: 0 18px 50px rgba(118,167,255,.22), 0 0 0 1px rgba(118,167,255,.22); } .home-metrics{ display:flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; } .metric{ padding: 12px 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); border-radius: 16px; min-width: 160px; } .metric__value{ font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .metric__label{ margin-top: 6px; color: var(--muted); font-size: 12px; } .metric__unit{ color: var(--muted); font-weight: 700; margin-left: 6px; font-size: 12px; } .home-hero__mock{ perspective: 900px; transform: translateZ(0); --tiltX: 0deg; --tiltY: 0deg; } .snapshot{ transform: rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition: transform .18s ease; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 16px; box-shadow: 0 25px 90px rgba(0,0,0,.55); animation: snapFloat 6.5s ease-in-out infinite; } @keyframes snapFloat{ 0%,100%{ transform: translateY(0) rotateX(var(--tiltX)) rotateY(var(--tiltY)); } 50%{ transform: translateY(-10px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); } } .snapshot__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; } .snapshot__title{ font-weight: 800; letter-spacing:-.01em; } .snapshot__pill{ font-size: 12px; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } .snapshot__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .snap-card{ padding: 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(10,10,20,.25); position: relative; overflow: hidden; } .snap-card__label{ font-size: 12px; color: var(--muted); font-weight: 700; } .snap-card__value{ margin-top: 6px; font-size: 16px; font-weight: 900; } .snap-card__hint{ margin-top: 4px; font-size: 12px; color: var(--muted); } .snap-card--danger{ border-color: rgba(255,110,110,.25); box-shadow: 0 0 0 1px rgba(255,110,110,.12) inset; } .snap-card--actions .snap-actions{ display:flex; gap: 8px; margin-top: 6px; } .snap-btn{ font-size: 12px; padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); font-weight: 800; } .spark{ display:flex; gap: 6px; align-items:flex-end; height: 44px; margin-top: 10px; } .spark i{ display:block; width: 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(118,167,255,.95), rgba(120,255,214,.75)); transform: scaleY(0); transform-origin: bottom; animation: sparkUp 900ms cubic-bezier(.2,.9,.2,1) forwards; animation-delay: 380ms; } .spark i:nth-child(2){ animation-delay: 440ms; } .spark i:nth-child(3){ animation-delay: 500ms; } .spark i:nth-child(4){ animation-delay: 560ms; } .spark i:nth-child(5){ animation-delay: 620ms; } .spark i:nth-child(6){ animation-delay: 680ms; } @keyframes sparkUp{ to{ transform: scaleY(1); } } .snapshot__bottom{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); } .snapshot__note{ font-size: 12px; color: var(--muted); } .home-section{ margin-top: 26px; padding: 34px 20px; } .home-section__head{ max-width: 780px; margin: 0 auto 18px; text-align: center; } .home-section__head h2{ margin: 0 0 8px; font-size: 28px; letter-spacing: -.02em; } .home-section__head p{ margin: 0; color: var(--muted); line-height: 1.55; } .home-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; max-width: 980px; margin: 18px auto 0; } .home-card{ border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.03); padding: 16px; } .home-card__title{ font-weight: 900; letter-spacing: -.01em; } .home-card__desc{ margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; } .home-steps .steps{ max-width: 980px; margin: 18px auto 0; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .step{ border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.03); padding: 18px; } .step__num{ width: 34px; height: 34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(118,167,255,.14); border: 1px solid rgba(118,167,255,.24); font-weight: 900; } .step__title{ margin-top: 10px; font-weight: 900; } .step__desc{ margin-top: 6px; color: var(--muted); font-size: 13px; } .home-pricing .pricing{ max-width: 980px; margin: 0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .pricing{ border-radius: 24px; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 600px at 10% 20%, rgba(118,167,255,.12), transparent 60%), radial-gradient(700px 500px at 90% 10%, rgba(120,255,214,.08), transparent 55%), rgba(255,255,255,.02); padding: 20px; } .pricing__kicker{ color: var(--muted); font-weight: 700; letter-spacing:.08em; text-transform: uppercase; font-size: 12px; } .pricing__price{ margin-top: 8px; font-size: 40px; font-weight: 950; letter-spacing:-.02em; } .pricing__per{ font-size: 14px; color: var(--muted); margin-left: 8px; font-weight: 800; } .pricing__desc{ margin-top: 8px; color: var(--muted); } .pricing__bullets{ margin-top: 14px; display:grid; gap: 8px; } .bullet{ padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); font-weight: 700; } .pricing__cta{ margin-top: 14px; } .pricing__warn{ height: 100%; border-radius: 20px; border: 1px solid rgba(255,110,110,.20); background: radial-gradient(700px 420px at 20% 20%, rgba(255,110,110,.12), transparent 60%), rgba(255,255,255,.02); padding: 18px; } .pricing__warnTitle{ font-weight: 950; letter-spacing:-.02em; } .pricing__warnText{ margin-top: 8px; color: var(--muted); line-height: 1.55; } .home-pain{ margin-top: 22px; border-radius: 26px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: radial-gradient(1200px 800px at 20% 0%, rgba(255,110,110,.12), transparent 55%), radial-gradient(1100px 700px at 90% 10%, rgba(118,167,255,.10), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.35)); box-shadow: 0 30px 110px rgba(0,0,0,.65); } .home-pain__inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; padding: 34px; } .pain-kicker{ color: rgba(255,180,180,.9); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .pain-title{ margin: 10px 0 10px; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; } .pain-sub{ margin: 0; color: rgba(255,255,255,.78); line-height: 1.6; } .pain-focus{ margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); } .pain-focus__title{ font-weight: 900; margin-bottom: 8px; } .pain-list{ margin: 0; padding-left: 18px; color: rgba(255,255,255,.78); line-height: 1.65; } .pain-stat{ border-radius: 22px; border: 1px solid rgba(255,110,110,.22); background: rgba(0,0,0,.22); padding: 18px; } .pain-stat__value{ font-size: 44px; font-weight: 980; letter-spacing: -.03em; text-shadow: 0 0 26px rgba(255,110,110,.22); } .pain-stat__label{ color: rgba(255,255,255,.72); margin-top: 6px; font-weight: 700; font-size: 12px; } .pain-card{ margin-top: 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); padding: 16px; } .pain-card__title{ font-weight: 950; letter-spacing: -.02em; } .pain-card__text{ margin-top: 8px; color: rgba(255,255,255,.76); line-height: 1.6; } .pill{ display:inline-block; padding: 6px 10px; margin: 6px 6px 0 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-weight: 800; font-size: 12px; } .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); } .reveal.is-in{ opacity: 1; transform: translateY(0); } @media (max-width: 980px){ .home-hero__inner{ grid-template-columns: 1fr; padding: 28px; } .home-cards{ grid-template-columns: 1fr; } .home-steps .steps{ grid-template-columns: 1fr; } .home-pricing .pricing{ grid-template-columns: 1fr; } .home-pain__inner{ grid-template-columns: 1fr; padding: 24px; } } /* Comparison box inside pricing */ .pricing__compare{ height:100%; } .compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; height:100%; } .compare__col{ border-radius:18px; padding:18px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); } .compare__col--bad{ border-color:rgba(255,110,110,.25); background:rgba(255,0,0,.06); } .compare__col--good{ border-color:rgba(120,255,214,.25); background:rgba(0,255,170,.05); } .compare__title{ font-weight:900; margin-bottom:10px; letter-spacing:-.01em; } .compare ul{ margin:0; padding-left:18px; line-height:1.6; font-size:13px; } .compare__footer{ margin-top:14px; font-weight:800; font-size:13px; } .compare__footer--bad{ color:rgba(255,160,160,.9); } .compare__footer--good{ color:rgba(120,255,214,.9); } @media (max-width:980px){ .compare{ grid-template-columns:1fr; } } /* ========================================================= HOME – LIGHT MODE (Apple-like) Clean, airy, premium. No heavy dark overlays. ========================================================= */ /* HOME – LIGHT MODE (Apple-like) */ html[data-theme="light"] body{ background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%) !important; } html[data-theme="light"] .home-hero{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.04) !important; box-shadow: 0 30px 60px rgba(0,0,0,.04) !important; } html[data-theme="light"] .home-hero__glow{ opacity: .18 !important; filter: blur(60px) !important; } html[data-theme="light"] .home-hero__grid, html[data-theme="light"] .home-hero__grain{ display: none !important; } html[data-theme="light"] .snapshot{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 24px 60px rgba(0,0,0,.06) !important; } html[data-theme="light"] .snap-card{ background: #f9fafb !important; border: 1px solid rgba(0,0,0,.05) !important; } html[data-theme="light"] .snapshot__pill, html[data-theme="light"] .snap-btn{ background: rgba(0,0,0,.03) !important; border: 1px solid rgba(0,0,0,.06) !important; } html[data-theme="light"] .home-card, html[data-theme="light"] .step{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important; box-shadow: 0 12px 30px rgba(0,0,0,.04) !important; } html[data-theme="light"] .pricing{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important; box-shadow: 0 18px 50px rgba(0,0,0,.05) !important; } html[data-theme="light"] .bullet{ background: #f9fafb !important; border: 1px solid rgba(0,0,0,.05) !important; } html[data-theme="light"] .home-pain{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.05) !important; box-shadow: 0 20px 50px rgba(0,0,0,.05) !important; } html[data-theme="light"] .pain-card, html[data-theme="light"] .pain-focus, html[data-theme="light"] .pain-stat{ background: #f9fafb !important; border: 1px solid rgba(0,0,0,.05) !important; box-shadow: 0 10px 25px rgba(0,0,0,.04) !important; } html[data-theme="light"] .pain-kicker{ color: rgba(239,68,68,.75) !important; } html[data-theme="light"] .compare__col{ background: #ffffff !important; border: 1px solid rgba(0,0,0,.06) !important; box-shadow: 0 20px 40px rgba(0,0,0,.05) !important; } html[data-theme="light"] .compare__col:hover{ transform: translateY(-3px) !important; box-shadow: 0 30px 60px rgba(0,0,0,.08) !important; } html[data-theme="light"] .compare__col--bad{ border-left: 4px solid rgba(239,68,68,.85) !important; background: #ffffff !important; } html[data-theme="light"] .compare__col--good{ border-left: 4px solid rgba(16,185,129,.85) !important; background: #ffffff !important; } html[data-theme="light"] .compare ul{ padding-left: 0 !important; list-style: none !important; } html[data-theme="light"] .compare li{ padding-left: 18px !important; } html[data-theme="light"] .compare__col--bad li::before{ content: "–" !important; color: rgba(239,68,68,.85) !important; font-weight: 700 !important; } html[data-theme="light"] .compare__col--good li::before{ content: "✓" !important; color: rgba(16,185,129,.90) !important; font-weight: 700 !important; } /* ========================= FIX: HOME "Realitatea din teren" text on LIGHT theme (only this section) ========================= */ html[data-theme="light"] .home-pain .pain-kicker{ color: rgba(185,28,28,.75); } html[data-theme="light"] .home-pain .pain-title, html[data-theme="light"] .home-pain .pain-focus__title, html[data-theme="light"] .home-pain .pain-card__title, html[data-theme="light"] .home-pain .pain-stat__value{ color: #0b1220; text-shadow: none; } html[data-theme="light"] .home-pain .pain-sub, html[data-theme="light"] .home-pain .pain-list, html[data-theme="light"] .home-pain .pain-stat__label, html[data-theme="light"] .home-pain .pain-card__text{ color: rgba(15,23,42,.78); } /* ========================================================= Home (LIGHT) – mai dark + grid vizibil + upgrade premium Scope: doar pe pagina Home (#home) ========================================================= */ html[data-theme="light"] .home-hero__bg{ background: radial-gradient(900px 500px at 10% -10%, rgba(80,120,255,.12), transparent 60%), radial-gradient(800px 400px at 90% 0%, rgba(16,185,129,.10), transparent 60%), linear-gradient(180deg, #eef1f6 0%, #e3e7ef 60%, #dde2ea 100%); } /* patratelele (grid) sa se vada pe alb */ html[data-theme="light"] .home-hero__grid{ opacity: .35; background-image: linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px); background-size: 42px 42px; } html[data-theme="light"] .home-hero__glow{ opacity:.45; filter: blur(80px); } html[data-theme="light"] .home-hero__grain{ opacity:.15; } /* ===== Home premium cards (pain section) ===== */ .home-pain .pain-card{ position:relative; overflow:hidden; border-radius:20px; backdrop-filter: blur(12px); background:linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.56)); border:1px solid rgba(0,0,0,.06); } html[data-theme="dark"] .home-pain .pain-card, html[data-theme="emerald"] .home-pain .pain-card{ background:linear-gradient(145deg, rgba(20,24,40,.85), rgba(20,24,40,.65)); border:1px solid rgba(255,255,255,.06); } /* glow subtil */ .home-pain .pain-card::before{ content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 20%, rgba(94,234,212,.15), transparent 60%); opacity:.6; pointer-events:none; } .home-pain .pain-card__title{ font-weight:900; font-size:18px; margin-bottom:10px; } .home-pain .pain-card__text{ line-height:1.7; font-size:15px; color: var(--muted); } /* stack for pills in the "Raport clar" card */ .home-pain .pill-stack{ display:flex; flex-direction:column; gap:8px; margin:10px 0 12px; align-items:flex-start; } .home-pain .pill-stack .pill{ flex:0 0 auto; } /* pill contrast on light */ html[data-theme="light"] .home-pain .pill{ background: rgba(0,0,0,.03); }