/* ================================================================= Teme in culori vii + stratul de efecte (FX / 3D) ================================================================= Temele de aici respecta acelasi contract de variabile ca cele din style.css, deci merg oriunde merg si alea: schimbi `data-theme` pe si tot site-ul se muta, fara nicio alta atingere. Stratul de efecte e separat de culoare, pe `data-fx`: data-fx="fara" nimic, doar culoarea data-fx="discret" umbre vii, stralucire moale, ridicare la hover data-fx="total" tot ce e mai sus, plus fundal care se misca, inclinare 3D la cartonase, luciu care trece peste ele si pulsatie pe butonul principal Regula de la care nu se abate nimic: cine a cerut in sistem mai putina miscare nu primeste niciuna. `prefers-reduced-motion` opreste toate animatiile — nu le incetineste, le opreste. ================================================================= */ /* ------------------------------------------------------------------ 1. NEON — magenta si cyan pe negru. Cea mai tare dintre toate. ------------------------------------------------------------------ */ html[data-theme="neon"] { --bg: #05020c; --bg-2: #0b0418; --card: rgba(24, 8, 44, 0.72); --card-2: rgba(38, 10, 62, 0.55); --stroke: rgba(255, 45, 189, 0.24); --stroke-strong: rgba(0, 240, 255, 0.5); --cyan: #00f0ff; --cyan-2: #7bfbff; --blue: #ff2dbd; --text: #fdeaff; --muted: #b08fc4; --danger: #ff5c7a; --ok: #4dffb8; --radius: 18px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #0a0014; --btn-fill: linear-gradient(120deg, #00f0ff 0%, #a45cff 52%, #ff2dbd 100%); --btn-fill-hover: linear-gradient(120deg, #7bfbff 0%, #c18cff 52%, #ff6fd2 100%); --glow: rgba(0, 240, 255, 0.45); --glow-2: rgba(255, 45, 189, 0.4); --nav-bg: rgba(5, 2, 12, 0.8); --dropdown-bg: #150626; --form-bg: rgba(16, 4, 28, 0.86); --form-bg-focus: rgba(20, 6, 34, 0.96); --grid: rgba(255, 45, 189, 0.05); --icon-bg: rgba(0, 240, 255, 0.1); --hover-fill: rgba(255, 45, 189, 0.12); --legal-bg: rgba(0, 240, 255, 0.08); --lang-sep: rgba(255, 45, 189, 0.45); --focus-ring: rgba(0, 240, 255, 0.22); --card-hover-shadow: 0 18px 60px rgba(0, 240, 255, 0.18), 0 10px 40px rgba(255, 45, 189, 0.16); --body-grad: radial-gradient(1100px 700px at 6% -10%, rgba(255, 45, 189, 0.24), transparent 52%), radial-gradient(900px 620px at 100% 4%, rgba(0, 240, 255, 0.2), transparent 48%), radial-gradient(700px 520px at 50% 108%, rgba(164, 92, 255, 0.18), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(255, 45, 189, 0.22), rgba(0, 240, 255, 0.14)); --hero-glow: drop-shadow(0 0 46px rgba(0, 240, 255, 0.4)); --brand-glow: drop-shadow(0 0 14px rgba(255, 45, 189, 0.4)); --kicker-grad: linear-gradient(90deg, #00f0ff, #ff2dbd); --theme-meta: #05020c; --relief-title: 0 1px 0 rgba(255,255,255,.24), 0 2px 0 rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.45), 0 0 22px var(--glow); --relief-hero: 0 1px 0 rgba(255,255,255,.36), 0 2px 0 rgba(0,0,0,.52), 0 4px 0 rgba(0,0,0,.34), 0 16px 34px rgba(0,0,0,.52), 0 0 34px var(--glow); --relief-lead: 0 1px 0 rgba(255,255,255,.12), 0 0 20px var(--glow-2); --relief-muted: 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.24); --relief-body: 0 1px 1px rgba(0,0,0,.34); --relief-nav: 0 1px 0 rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.4), 0 0 14px var(--glow-2); --relief-kicker: drop-shadow(0 0 10px var(--glow-2)); } /* ------------------------------------------------------------------ 2. MAGMA — rosu si portocaliu. Pizzerie, gratar, foc. ------------------------------------------------------------------ */ html[data-theme="magma"] { --bg: #0d0503; --bg-2: #160805; --card: rgba(42, 14, 8, 0.74); --card-2: rgba(62, 20, 10, 0.55); --stroke: rgba(255, 138, 48, 0.24); --stroke-strong: rgba(255, 74, 42, 0.5); --cyan: #ff8a30; --cyan-2: #ffc46b; --blue: #ff4a2a; --text: #fff1e6; --muted: #c9a08c; --danger: #ff5c5c; --ok: #8ddc6a; --radius: 16px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #1a0603; --btn-fill: linear-gradient(120deg, #ffb03a 0%, #ff7a2f 48%, #ff3d1f 100%); --btn-fill-hover: linear-gradient(120deg, #ffc76b 0%, #ff9a5c 48%, #ff6a4a 100%); --glow: rgba(255, 138, 48, 0.42); --glow-2: rgba(255, 74, 42, 0.36); --nav-bg: rgba(13, 5, 3, 0.8); --dropdown-bg: #1e0a06; --form-bg: rgba(26, 9, 5, 0.86); --form-bg-focus: rgba(32, 11, 6, 0.96); --grid: rgba(255, 138, 48, 0.05); --icon-bg: rgba(255, 138, 48, 0.1); --hover-fill: rgba(255, 74, 42, 0.12); --legal-bg: rgba(255, 138, 48, 0.08); --lang-sep: rgba(255, 138, 48, 0.42); --focus-ring: rgba(255, 138, 48, 0.2); --card-hover-shadow: 0 18px 58px rgba(255, 122, 47, 0.2); --body-grad: radial-gradient(1100px 700px at 8% -10%, rgba(255, 74, 42, 0.26), transparent 52%), radial-gradient(900px 600px at 100% 6%, rgba(255, 176, 58, 0.18), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(255, 74, 42, 0.22), rgba(255, 176, 58, 0.14)); --hero-glow: drop-shadow(0 0 44px rgba(255, 122, 47, 0.42)); --brand-glow: drop-shadow(0 0 13px rgba(255, 138, 48, 0.4)); --kicker-grad: linear-gradient(90deg, #ffb03a, #ff3d1f); --theme-meta: #0d0503; --relief-title: 0 1px 0 rgba(255,255,255,.2), 0 2px 0 rgba(0,0,0,.44), 0 8px 20px rgba(0,0,0,.44), 0 0 20px var(--glow); --relief-hero: 0 1px 0 rgba(255,255,255,.32), 0 2px 0 rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.32), 0 16px 32px rgba(0,0,0,.5), 0 0 30px var(--glow); --relief-lead: 0 1px 0 rgba(255,255,255,.1), 0 0 18px var(--glow-2); --relief-muted: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.22); --relief-body: 0 1px 1px rgba(0,0,0,.32); --relief-nav: 0 1px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.38), 0 0 12px var(--glow-2); --relief-kicker: drop-shadow(0 0 9px var(--glow-2)); } /* ------------------------------------------------------------------ 3. TROPIC — turcoaz si corai. Hotel, pensiune, mare. ------------------------------------------------------------------ */ html[data-theme="tropic"] { --bg: #02110f; --bg-2: #04191a; --card: rgba(6, 40, 42, 0.72); --card-2: rgba(10, 56, 56, 0.55); --stroke: rgba(28, 235, 200, 0.24); --stroke-strong: rgba(255, 122, 110, 0.48); --cyan: #1cebc8; --cyan-2: #86ffe6; --blue: #ff7a6e; --text: #eafff9; --muted: #86b3ad; --danger: #ff6b8a; --ok: #7dffb0; --radius: 20px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #01100e; --btn-fill: linear-gradient(120deg, #1cebc8 0%, #45e0d0 46%, #ff7a6e 100%); --btn-fill-hover: linear-gradient(120deg, #86ffe6 0%, #74efe2 46%, #ff9e94 100%); --glow: rgba(28, 235, 200, 0.4); --glow-2: rgba(255, 122, 110, 0.34); --nav-bg: rgba(2, 17, 15, 0.8); --dropdown-bg: #052422; --form-bg: rgba(4, 26, 25, 0.86); --form-bg-focus: rgba(5, 32, 30, 0.96); --grid: rgba(28, 235, 200, 0.05); --icon-bg: rgba(28, 235, 200, 0.1); --hover-fill: rgba(255, 122, 110, 0.12); --legal-bg: rgba(28, 235, 200, 0.08); --lang-sep: rgba(28, 235, 200, 0.42); --focus-ring: rgba(28, 235, 200, 0.2); --card-hover-shadow: 0 18px 58px rgba(28, 235, 200, 0.18); --body-grad: radial-gradient(1100px 700px at 6% -8%, rgba(28, 235, 200, 0.2), transparent 50%), radial-gradient(900px 600px at 100% 4%, rgba(255, 122, 110, 0.18), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(28, 235, 200, 0.2), rgba(255, 122, 110, 0.14)); --hero-glow: drop-shadow(0 0 42px rgba(28, 235, 200, 0.38)); --brand-glow: drop-shadow(0 0 12px rgba(28, 235, 200, 0.36)); --kicker-grad: linear-gradient(90deg, #1cebc8, #ff7a6e); --theme-meta: #02110f; --relief-title: 0 1px 0 rgba(255,255,255,.2), 0 2px 0 rgba(0,0,0,.42), 0 8px 18px rgba(0,0,0,.42), 0 0 18px var(--glow); --relief-hero: 0 1px 0 rgba(255,255,255,.32), 0 2px 0 rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.5), 0 0 28px var(--glow); --relief-lead: 0 1px 0 rgba(255,255,255,.1), 0 0 18px var(--glow-2); --relief-muted: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.22); --relief-body: 0 1px 1px rgba(0,0,0,.3); --relief-nav: 0 1px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.36), 0 0 12px var(--glow-2); --relief-kicker: drop-shadow(0 0 9px var(--glow-2)); } /* ------------------------------------------------------------------ 4. AURORA — violet si verde. Ceva intre noapte si nord. ------------------------------------------------------------------ */ html[data-theme="aurora"] { --bg: #060312; --bg-2: #0a0620; --card: rgba(22, 14, 52, 0.72); --card-2: rgba(30, 20, 70, 0.55); --stroke: rgba(150, 110, 255, 0.24); --stroke-strong: rgba(80, 255, 176, 0.45); --cyan: #50ffb0; --cyan-2: #a8ffd8; --blue: #966eff; --text: #f0ecff; --muted: #a096c4; --danger: #ff6b8a; --ok: #50ffb0; --radius: 20px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #07031a; --btn-fill: linear-gradient(120deg, #50ffb0 0%, #63d7ff 45%, #966eff 100%); --btn-fill-hover: linear-gradient(120deg, #a8ffd8 0%, #97e6ff 45%, #b596ff 100%); --glow: rgba(80, 255, 176, 0.36); --glow-2: rgba(150, 110, 255, 0.38); --nav-bg: rgba(6, 3, 18, 0.8); --dropdown-bg: #120a2c; --form-bg: rgba(14, 8, 32, 0.86); --form-bg-focus: rgba(18, 10, 40, 0.96); --grid: rgba(150, 110, 255, 0.05); --icon-bg: rgba(150, 110, 255, 0.1); --hover-fill: rgba(80, 255, 176, 0.1); --legal-bg: rgba(150, 110, 255, 0.08); --lang-sep: rgba(150, 110, 255, 0.45); --focus-ring: rgba(150, 110, 255, 0.22); --card-hover-shadow: 0 18px 58px rgba(150, 110, 255, 0.2), 0 10px 36px rgba(80, 255, 176, 0.12); --body-grad: radial-gradient(1100px 700px at 10% -10%, rgba(150, 110, 255, 0.26), transparent 52%), radial-gradient(900px 620px at 92% 2%, rgba(80, 255, 176, 0.18), transparent 46%), radial-gradient(760px 520px at 40% 106%, rgba(99, 215, 255, 0.16), transparent 44%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(150, 110, 255, 0.22), rgba(80, 255, 176, 0.14)); --hero-glow: drop-shadow(0 0 44px rgba(150, 110, 255, 0.4)); --brand-glow: drop-shadow(0 0 13px rgba(80, 255, 176, 0.34)); --kicker-grad: linear-gradient(90deg, #50ffb0, #966eff); --theme-meta: #060312; --relief-title: 0 1px 0 rgba(255,255,255,.22), 0 2px 0 rgba(0,0,0,.44), 0 8px 20px rgba(0,0,0,.44), 0 0 20px var(--glow-2); --relief-hero: 0 1px 0 rgba(255,255,255,.34), 0 2px 0 rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.32), 0 16px 32px rgba(0,0,0,.5), 0 0 30px var(--glow-2); --relief-lead: 0 1px 0 rgba(255,255,255,.1), 0 0 18px var(--glow); --relief-muted: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.22); --relief-body: 0 1px 1px rgba(0,0,0,.32); --relief-nav: 0 1px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.38), 0 0 12px var(--glow); --relief-kicker: drop-shadow(0 0 9px var(--glow)); } /* ------------------------------------------------------------------ 5. CITRUS — deschisa, portocaliu si lamaie. Curatenie, service. Temele deschise sting relieful 3D: pe fundal alb umbrele alea murdaresc. ------------------------------------------------------------------ */ html[data-theme="citrus"] { --bg: #fffdf6; --bg-2: #fff7e4; --card: rgba(255, 255, 255, 0.92); --card-2: rgba(255, 246, 224, 0.8); --stroke: rgba(255, 138, 0, 0.22); --stroke-strong: rgba(255, 138, 0, 0.5); --cyan: #ff8a00; --cyan-2: #ffb547; --blue: #8bc400; --text: #21180a; --muted: #7a6a52; --danger: #e03b3b; --ok: #4aa93a; --radius: 18px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #1c1405; --btn-fill: linear-gradient(120deg, #ffc400 0%, #ff8a00 60%, #ff6a00 100%); --btn-fill-hover: linear-gradient(120deg, #ffd84d 0%, #ffa63d 60%, #ff8b3d 100%); --glow: rgba(255, 138, 0, 0.26); --glow-2: rgba(139, 196, 0, 0.22); --nav-bg: rgba(255, 253, 246, 0.88); --dropdown-bg: #fffaf0; --form-bg: rgba(255, 255, 255, 0.96); --form-bg-focus: #ffffff; --grid: rgba(255, 138, 0, 0.04); --icon-bg: rgba(255, 138, 0, 0.1); --hover-fill: rgba(255, 138, 0, 0.08); --legal-bg: rgba(255, 196, 0, 0.12); --lang-sep: rgba(255, 138, 0, 0.4); --focus-ring: rgba(255, 138, 0, 0.2); --card-hover-shadow: 0 16px 44px rgba(255, 138, 0, 0.18); --body-grad: radial-gradient(1000px 640px at 6% -8%, rgba(255, 196, 0, 0.28), transparent 52%), radial-gradient(860px 560px at 100% 2%, rgba(139, 196, 0, 0.2), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(255, 196, 0, 0.26), rgba(139, 196, 0, 0.16)); --hero-glow: drop-shadow(0 10px 26px rgba(255, 138, 0, 0.26)); --brand-glow: none; --kicker-grad: linear-gradient(90deg, #ff8a00, #8bc400); --theme-meta: #fffdf6; --relief-title: none; --relief-hero: none; --relief-lead: none; --relief-muted: none; --relief-body: none; --relief-nav: none; --relief-kicker: none; } /* ------------------------------------------------------------------ 6. ZMEURA — deschisa, zmeuriu si auriu. Cofetarie, evenimente. ------------------------------------------------------------------ */ html[data-theme="zmeura"] { --bg: #fff8fb; --bg-2: #ffeef5; --card: rgba(255, 255, 255, 0.93); --card-2: rgba(255, 238, 245, 0.82); --stroke: rgba(214, 31, 105, 0.2); --stroke-strong: rgba(214, 31, 105, 0.48); --cyan: #d61f69; --cyan-2: #ff5c9d; --blue: #c9a227; --text: #2a0c1a; --muted: #8a6275; --danger: #d61f2f; --ok: #38a169; --radius: 22px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #ffffff; --btn-fill: linear-gradient(120deg, #ff5c9d 0%, #d61f69 60%, #c9a227 100%); --btn-fill-hover: linear-gradient(120deg, #ff85b6 0%, #e6458a 60%, #dcb843 100%); --glow: rgba(214, 31, 105, 0.24); --glow-2: rgba(201, 162, 39, 0.22); --nav-bg: rgba(255, 248, 251, 0.9); --dropdown-bg: #fff4f8; --form-bg: rgba(255, 255, 255, 0.96); --form-bg-focus: #ffffff; --grid: rgba(214, 31, 105, 0.035); --icon-bg: rgba(214, 31, 105, 0.09); --hover-fill: rgba(214, 31, 105, 0.07); --legal-bg: rgba(255, 92, 157, 0.1); --lang-sep: rgba(214, 31, 105, 0.38); --focus-ring: rgba(214, 31, 105, 0.18); --card-hover-shadow: 0 16px 44px rgba(214, 31, 105, 0.16); --body-grad: radial-gradient(1000px 640px at 8% -8%, rgba(255, 92, 157, 0.26), transparent 52%), radial-gradient(860px 560px at 100% 4%, rgba(201, 162, 39, 0.18), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(255, 92, 157, 0.22), rgba(201, 162, 39, 0.14)); --hero-glow: drop-shadow(0 10px 26px rgba(214, 31, 105, 0.24)); --brand-glow: none; --kicker-grad: linear-gradient(90deg, #d61f69, #c9a227); --theme-meta: #fff8fb; --relief-title: none; --relief-hero: none; --relief-lead: none; --relief-muted: none; --relief-body: none; --relief-nav: none; --relief-kicker: none; } /* ------------------------------------------------------------------ 7. OCEAN — albastru adanc si aqua. Constructii, transport, birou. ------------------------------------------------------------------ */ html[data-theme="ocean"] { --bg: #f4fbff; --bg-2: #e4f3ff; --card: rgba(255, 255, 255, 0.94); --card-2: rgba(228, 243, 255, 0.82); --stroke: rgba(11, 94, 215, 0.2); --stroke-strong: rgba(11, 94, 215, 0.46); --cyan: #0b5ed7; --cyan-2: #35a7ff; --blue: #00c2cb; --text: #06203a; --muted: #5b7690; --danger: #d6323c; --ok: #17a673; --radius: 16px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #ffffff; --btn-fill: linear-gradient(120deg, #0b5ed7 0%, #1e86e8 55%, #00c2cb 100%); --btn-fill-hover: linear-gradient(120deg, #2a7aec 0%, #46a1f2 55%, #2fd6de 100%); --glow: rgba(11, 94, 215, 0.22); --glow-2: rgba(0, 194, 203, 0.22); --nav-bg: rgba(244, 251, 255, 0.9); --dropdown-bg: #f0f8ff; --form-bg: rgba(255, 255, 255, 0.96); --form-bg-focus: #ffffff; --grid: rgba(11, 94, 215, 0.035); --icon-bg: rgba(11, 94, 215, 0.09); --hover-fill: rgba(11, 94, 215, 0.07); --legal-bg: rgba(53, 167, 255, 0.12); --lang-sep: rgba(11, 94, 215, 0.36); --focus-ring: rgba(11, 94, 215, 0.18); --card-hover-shadow: 0 16px 44px rgba(11, 94, 215, 0.16); --body-grad: radial-gradient(1000px 640px at 6% -8%, rgba(53, 167, 255, 0.26), transparent 52%), radial-gradient(860px 560px at 100% 2%, rgba(0, 194, 203, 0.2), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(11, 94, 215, 0.2), rgba(0, 194, 203, 0.14)); --hero-glow: drop-shadow(0 10px 26px rgba(11, 94, 215, 0.22)); --brand-glow: none; --kicker-grad: linear-gradient(90deg, #0b5ed7, #00c2cb); --theme-meta: #f4fbff; --relief-title: none; --relief-hero: none; --relief-lead: none; --relief-muted: none; --relief-body: none; --relief-nav: none; --relief-kicker: none; } /* ------------------------------------------------------------------ 8. PADURE — verde adanc si lamaie. Curatenie eco, gradinarit. ------------------------------------------------------------------ */ html[data-theme="padure"] { --bg: #03130c; --bg-2: #061b11; --card: rgba(8, 40, 26, 0.74); --card-2: rgba(12, 56, 34, 0.55); --stroke: rgba(124, 240, 106, 0.22); --stroke-strong: rgba(214, 255, 92, 0.46); --cyan: #7cf06a; --cyan-2: #d6ff5c; --blue: #2fbf71; --text: #ecffee; --muted: #8fb79b; --danger: #ff6b6b; --ok: #7cf06a; --radius: 18px; --font: "Inter", system-ui, sans-serif; --display: "Outfit", "Inter", system-ui, sans-serif; --btn-ink: #04160d; --btn-fill: linear-gradient(120deg, #d6ff5c 0%, #7cf06a 52%, #2fbf71 100%); --btn-fill-hover: linear-gradient(120deg, #e6ff8f 0%, #9df58f 52%, #4ed68c 100%); --glow: rgba(124, 240, 106, 0.36); --glow-2: rgba(214, 255, 92, 0.3); --nav-bg: rgba(3, 19, 12, 0.8); --dropdown-bg: #072418; --form-bg: rgba(5, 26, 17, 0.86); --form-bg-focus: rgba(7, 32, 21, 0.96); --grid: rgba(124, 240, 106, 0.05); --icon-bg: rgba(124, 240, 106, 0.1); --hover-fill: rgba(214, 255, 92, 0.1); --legal-bg: rgba(124, 240, 106, 0.08); --lang-sep: rgba(124, 240, 106, 0.4); --focus-ring: rgba(124, 240, 106, 0.2); --card-hover-shadow: 0 18px 56px rgba(124, 240, 106, 0.16); --body-grad: radial-gradient(1100px 700px at 6% -8%, rgba(47, 191, 113, 0.24), transparent 50%), radial-gradient(900px 600px at 100% 4%, rgba(214, 255, 92, 0.16), transparent 46%), var(--bg); --cta-grad: linear-gradient(120deg, rgba(47, 191, 113, 0.22), rgba(214, 255, 92, 0.14)); --hero-glow: drop-shadow(0 0 42px rgba(124, 240, 106, 0.36)); --brand-glow: drop-shadow(0 0 12px rgba(124, 240, 106, 0.34)); --kicker-grad: linear-gradient(90deg, #d6ff5c, #2fbf71); --theme-meta: #03130c; --relief-title: 0 1px 0 rgba(255,255,255,.2), 0 2px 0 rgba(0,0,0,.42), 0 8px 18px rgba(0,0,0,.42), 0 0 18px var(--glow); --relief-hero: 0 1px 0 rgba(255,255,255,.32), 0 2px 0 rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.5), 0 0 28px var(--glow); --relief-lead: 0 1px 0 rgba(255,255,255,.1), 0 0 18px var(--glow-2); --relief-muted: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.22); --relief-body: 0 1px 1px rgba(0,0,0,.3); --relief-nav: 0 1px 0 rgba(255,255,255,.14), 0 2px 0 rgba(0,0,0,.36), 0 0 12px var(--glow-2); --relief-kicker: drop-shadow(0 0 9px var(--glow-2)); } /* ================================================================= Stratul de efecte ================================================================= */ /* --- discret: ridicare la hover, stralucire moale pe butoane ------ */ html[data-fx="discret"] .glass, html[data-fx="total"] .glass, html[data-fx="discret"] .svc-card, html[data-fx="total"] .svc-card, html[data-fx="discret"] .cp-card, html[data-fx="total"] .cp-card, html[data-fx="discret"] .card-box, html[data-fx="total"] .card-box { transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease, border-color .28s ease; will-change: transform; } html[data-fx="discret"] .glass:hover, html[data-fx="total"] .glass:hover, html[data-fx="discret"] .svc-card:hover, html[data-fx="total"] .svc-card:hover, html[data-fx="discret"] .cp-card:hover, html[data-fx="total"] .cp-card:hover { transform: translateY(-4px); box-shadow: var(--card-hover-shadow); border-color: var(--stroke-strong); } html[data-fx="discret"] .btn-ice, html[data-fx="total"] .btn-ice { position: relative; overflow: hidden; } /* Luciul care trece o data peste buton la hover. */ html[data-fx="discret"] .btn-ice::after, html[data-fx="total"] .btn-ice::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-130%); transition: transform .6s ease; pointer-events: none; } html[data-fx="discret"] .btn-ice:hover::after, html[data-fx="total"] .btn-ice:hover::after { transform: translateX(130%); } /* --- total: fundal care se misca, 3D, pulsatie ------------------- */ html[data-fx="total"] body::after { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; background: radial-gradient(42% 42% at 22% 28%, var(--glow), transparent 60%), radial-gradient(38% 38% at 78% 22%, var(--glow-2), transparent 60%), radial-gradient(46% 46% at 52% 88%, var(--glow), transparent 62%); filter: blur(46px); opacity: .5; animation: fx-plutire 22s ease-in-out infinite alternate; } @keyframes fx-plutire { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.02); } } /* Inclinarea 3D a cartonaselor. Fara JavaScript: perspectiva pe parinte, rotire la hover pe copil. Nu urmareste cursorul, dar da adancime. */ html[data-fx="total"] .row, html[data-fx="total"] .cp-sec .container { perspective: 1200px; } html[data-fx="total"] .cp-card, html[data-fx="total"] .svc-card { transform-style: preserve-3d; } html[data-fx="total"] .cp-card:hover, html[data-fx="total"] .svc-card:hover { transform: translateY(-6px) rotateX(3deg) rotateY(-3deg) scale(1.015); } /* Luciu care trece peste cartonas. */ html[data-fx="total"] .cp-card, html[data-fx="total"] .svc-card, html[data-fx="total"] .glass { position: relative; overflow: hidden; } html[data-fx="total"] .cp-card::before, html[data-fx="total"] .svc-card::before { content: ""; position: absolute; top: -60%; left: -40%; width: 60%; height: 220%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-160%) rotate(8deg); transition: transform .75s ease; pointer-events: none; } html[data-fx="total"] .cp-card:hover::before, html[data-fx="total"] .svc-card:hover::before { transform: translateX(320%) rotate(8deg); } /* Butonul principal respira. Doar el, si doar cat sa se vada. */ html[data-fx="total"] .hero .btn-ice { animation: fx-puls 3.4s ease-in-out infinite; } @keyframes fx-puls { 0%, 100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 0 0 12px transparent; } } /* Titlul mare capata o dunga de lumina care trece rar peste el. */ html[data-fx="total"] .hero h1 { background-image: linear-gradient(100deg, var(--text) 0%, var(--text) 40%, var(--cyan-2) 50%, var(--text) 60%, var(--text) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: fx-dunga 9s linear infinite; } @keyframes fx-dunga { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } } /* Iconitele se ridica putin, pe rand, cand intri cu ochiul pe sectiune. */ html[data-fx="total"] .cp-card-icon { transition: transform .3s cubic-bezier(.2, .7, .3, 1); } html[data-fx="total"] .cp-card:hover .cp-card-icon { transform: translateZ(24px) scale(1.12) rotate(-4deg); } /* Acordeonul capata si el o urma de adancime. */ html[data-fx="total"] .cp-acord { transition: box-shadow .28s ease, border-color .28s ease; } html[data-fx="total"] .cp-acord[open] { box-shadow: var(--card-hover-shadow); border-color: var(--stroke-strong); } /* ================================================================= Cine a cerut liniste, liniste primeste. ================================================================= */ @media (prefers-reduced-motion: reduce) { html[data-fx="discret"] *, html[data-fx="total"] *, html[data-fx="discret"] *::before, html[data-fx="total"] *::before, html[data-fx="discret"] *::after, html[data-fx="total"] *::after { animation: none !important; transition: none !important; } html[data-fx="total"] body::after { animation: none; } html[data-fx="total"] .cp-card:hover, html[data-fx="total"] .svc-card:hover, html[data-fx="discret"] .glass:hover { transform: none; } } /* La tiparire nu are ce cauta niciun efect. */ @media print { html[data-fx="total"] body::after { display: none; } html[data-fx="total"] .hero h1 { animation: none; background: none; -webkit-text-fill-color: currentColor; } }