/* ============================================================ METODA MIDLIFE — Sistemul de teme (4 identități vizuale) Se aplică prin , persistă în localStorage. „cald” (implicit) · „corporate” · „lumina” · „studio” Toate suprascrierile stau în @media screen — printul rămâne MEREU pe tema implicită (PDF-urile către clienți nu variază). ============================================================ */ @media screen { /* ---------- TEMA „CORPORATE” — enterprise, navy/steel, precisă ---------- */ :root[data-theme="corporate"] { --ink: #16324F; --ink-soft: #3C5975; --ink-faint: #5A7490; --plum: #16324F; --plum-deep: #0E2238; --plum-tint: #E8EEF5; --terracotta: #2B6CB0; --terracotta-deep: #1E5A99; --terracotta-tint: #E3EEF9; --sage: #4A7A8C; --sage-deep: #38606F; --sage-tint: #E6F0F3; --cream: #F5F7FA; --card: #FFFFFF; --line: #D9E2EC; --gold: #B7791F; --font-head: "Inter", -apple-system, "Segoe UI", sans-serif; --radius: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(22, 50, 79, 0.08); --shadow-md: 0 4px 16px rgba(22, 50, 79, 0.10); --shadow-lg: 0 12px 32px rgba(22, 50, 79, 0.14); } :root[data-theme="corporate"] h1, :root[data-theme="corporate"] h2, :root[data-theme="corporate"] h3, :root[data-theme="corporate"] h4 { font-weight: 700; letter-spacing: -0.015em; } :root[data-theme="corporate"] .hero--home { background: linear-gradient(170deg, #F5F7FA 55%, #E8EEF5 100%); } :root[data-theme="corporate"] .btn { border-radius: var(--radius); } :root[data-theme="corporate"] .badge { border-radius: 4px; letter-spacing: 0.08em; } /* ---------- TEMA „LUMINA” — editorial, aerisită, un singur accent ---------- */ :root[data-theme="lumina"] { --ink: #1C1B1F; --ink-soft: #4A4750; --ink-faint: #6E6A75; --plum: #2F5D50; --plum-deep: #1F4438; --plum-tint: #EAF2EE; --terracotta: #2F5D50; --terracotta-deep: #1F4438; --terracotta-tint: #EAF2EE; --sage: #7A8C7E; --sage-deep: #5C6E60; --sage-tint: #F0F4F0; --cream: #FFFFFF; --card: #FCFCFA; --line: #E9E7E2; --gold: #9C7C2E; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(28, 27, 31, 0.05); --shadow-md: 0 3px 14px rgba(28, 27, 31, 0.07); --shadow-lg: 0 10px 30px rgba(28, 27, 31, 0.09); } :root[data-theme="lumina"] .hero--home { background: #FFFFFF; } :root[data-theme="lumina"] h1, :root[data-theme="lumina"] h2 { font-weight: 400; letter-spacing: -0.01em; } :root[data-theme="lumina"] .card { border-width: 1px; } :root[data-theme="lumina"] .eyebrow { letter-spacing: 0.2em; } /* ---------- TEMA „STUDIO” — render cinematic, glass, adâncime ---------- */ :root[data-theme="studio"] { --ink: #EDEAF3; --ink-soft: #C9C4D4; --ink-faint: #A79FB8; --plum: #B58BE0; --plum-deep: #D9C6F2; --plum-tint: rgba(181, 139, 224, 0.14); --terracotta: #F2A25C; --terracotta-deep: #F2A25C; --terracotta-tint: rgba(242, 162, 92, 0.14); --sage: #7FD4B4; --sage-deep: #7FD4B4; --sage-tint: rgba(127, 212, 180, 0.12); --cream: #14111C; --card: rgba(255, 255, 255, 0.055); --line: rgba(255, 255, 255, 0.14); --gold: #E9C46A; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6); } :root[data-theme="studio"] body { background: radial-gradient(1100px 600px at 85% -10%, rgba(181, 139, 224, 0.18), transparent 60%), radial-gradient(900px 520px at -10% 40%, rgba(242, 162, 92, 0.10), transparent 55%), radial-gradient(800px 500px at 60% 110%, rgba(127, 212, 180, 0.08), transparent 55%), #14111C; background-attachment: fixed; } :root[data-theme="studio"] .hero--home { background: transparent; } :root[data-theme="studio"] .site-header { background: rgba(20, 17, 28, 0.72); border-bottom-color: var(--line); } :root[data-theme="studio"] .nav a { color: var(--ink-soft); } :root[data-theme="studio"] .nav a:hover, :root[data-theme="studio"] .nav a[aria-current="page"] { color: #fff; } :root[data-theme="studio"] .lang-switch { background: rgba(255,255,255,0.08); border-color: var(--line); } :root[data-theme="studio"] .section--alt { background: rgba(255, 255, 255, 0.025); } :root[data-theme="studio"] .section--plum { background: linear-gradient(160deg, rgba(181,139,224,0.16), rgba(242,162,92,0.10)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Glass cards cu reflexie polișată */ :root[data-theme="studio"] .card, :root[data-theme="studio"] details.faq { background: linear-gradient(165deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035)); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; overflow: hidden; } :root[data-theme="studio"] .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); pointer-events: none; } :root[data-theme="studio"] .card--lift:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(181,139,224,0.35), 0 0 40px rgba(181,139,224,0.12); } :root[data-theme="studio"] h1, :root[data-theme="studio"] h2, :root[data-theme="studio"] h3, :root[data-theme="studio"] h4 { color: #fff; } :root[data-theme="studio"] .hero h1 { background: linear-gradient(100deg, #fff 30%, #D9C6F2 70%, #F2A25C 105%); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="studio"] .btn--primary { background: linear-gradient(120deg, #B58BE0, #F2A25C); color: #14111C; font-weight: 700; border: none; box-shadow: 0 6px 24px rgba(181, 139, 224, 0.35); } :root[data-theme="studio"] .btn--primary:hover { background: linear-gradient(120deg, #C49CEE, #F7B476); color: #14111C; box-shadow: 0 10px 32px rgba(181,139,224,0.45); } :root[data-theme="studio"] .btn--plum { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid var(--line); } :root[data-theme="studio"] .btn--plum:hover { background: rgba(255,255,255,0.2); color: #fff; } :root[data-theme="studio"] .btn--ghost { border-color: var(--line); color: var(--ink); } :root[data-theme="studio"] .btn--ghost:hover { background: rgba(255,255,255,0.08); color: #fff; } :root[data-theme="studio"] .btn--light { background: rgba(255,255,255,0.92); color: #14111C; } :root[data-theme="studio"] input[type="text"], :root[data-theme="studio"] input[type="email"], :root[data-theme="studio"] input[type="tel"], :root[data-theme="studio"] input[type="number"], :root[data-theme="studio"] select, :root[data-theme="studio"] textarea { background: rgba(255,255,255,0.07); color: var(--ink); border-color: var(--line); } :root[data-theme="studio"] .option-row label { background: rgba(255,255,255,0.05); } :root[data-theme="studio"] .option-row label:has(input:checked) { background: var(--plum-tint); border-color: var(--plum); } :root[data-theme="studio"] table { background: transparent; } :root[data-theme="studio"] th { background: rgba(181,139,224,0.16); color: #fff; } :root[data-theme="studio"] tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); } :root[data-theme="studio"] .stat__num { color: var(--terracotta); text-shadow: 0 0 30px rgba(242,162,92,0.35); } :root[data-theme="studio"] .site-footer { background: rgba(0,0,0,0.35); border-top: 1px solid var(--line); } :root[data-theme="studio"] .notice { background: rgba(255,255,255,0.05); } :root[data-theme="studio"] .notice--warn { background: rgba(233,196,106,0.08); } :root[data-theme="studio"] .notice--sage { background: rgba(127,212,180,0.08); } :root[data-theme="studio"] .notice--terra { background: rgba(242,162,92,0.08); } :root[data-theme="studio"] blockquote { background: rgba(255,255,255,0.05); } :root[data-theme="studio"] .bar-row__track, :root[data-theme="studio"] .progress { background: rgba(255,255,255,0.12); } :root[data-theme="studio"] .price-card--hero { border-color: var(--terracotta); box-shadow: 0 0 44px rgba(242,162,92,0.18), var(--shadow-md); } :root[data-theme="studio"] .doc-header.card h1, :root[data-theme="studio"] .doc-header.card p { color: inherit; } :root[data-theme="studio"] .chat-msg--ai { background: rgba(255,255,255,0.09); color: var(--ink); } :root[data-theme="studio"] .app-tabs { background: rgba(20,17,28,0.85); border-color: var(--line); } :root[data-theme="studio"] .app-tab.is-active { background: var(--plum-tint); color: #fff; } :root[data-theme="studio"] .action-card__check { background: rgba(255,255,255,0.08); border-color: var(--line); } :root[data-theme="studio"] .skip-link { background: #B58BE0; color: #14111C; } :root[data-theme="studio"] ::selection { background: #B58BE0; color: #14111C; } /* ---------- Comutatorul de teme (injectat de main.js) ---------- */ .theme-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-md); cursor: pointer; font-size: 1.2rem; display: grid; place-items: center; } .theme-panel { position: fixed; left: 1rem; bottom: 4.6rem; z-index: 80; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.9rem; width: 15.5rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .theme-panel[hidden] { display: none; } .theme-panel p { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; } .theme-opt { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.6rem; border-radius: 10px; border: 1.5px solid transparent; background: transparent; cursor: pointer; color: var(--ink); font: 600 0.85rem var(--font-body); text-align: left; } .theme-opt:hover { background: var(--plum-tint); } .theme-opt[aria-pressed="true"] { border-color: var(--plum); background: var(--plum-tint); } .theme-opt .sw { width: 1.4rem; height: 1.4rem; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,0.15); } .theme-opt small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--ink-faint); } .sw--cald { background: linear-gradient(135deg, #5C3A5E 50%, #C4704B 50%); } .sw--corporate { background: linear-gradient(135deg, #16324F 50%, #2B6CB0 50%); } .sw--lumina { background: linear-gradient(135deg, #FFFFFF 50%, #2F5D50 50%); } .sw--studio { background: linear-gradient(135deg, #14111C 50%, #B58BE0 50%); } } /* /@media screen */