/* ============================================================ DataMagic — VILÁGOS SKIN (light) Aktiválás: + a style.css UTÁN betöltve Nem módosítja a style.css-t, teljesen visszakapcsolható. ============================================================ */ html[data-skin="light"]{ /* --- felületek: hűvös papír, nem meleg krém --- */ --bg: #F4F4F9; /* lap alapja */ --bg-2: #FFFFFF; /* kártya, menü */ --bg-3: #ECECF5; /* mélyedés, sáv */ /* --- tinta: a márka saját sötétje szövegszínként --- */ --white: #12122B; /* 76× szövegszín a style.css-ben → tinta */ --primary-2: #4B4A6A; /* törzsszöveg */ --muted: #6E6C8C; /* meta, apró */ /* --- brand: olvasható léptékre tolva --- */ --primary: #493FDB; /* link/kattintható – 6,51:1 papíron */ --primary-deco: #8B79FA; /* CSAK dísz/kitöltés – 3,16:1 */ --deep: #493FDB; --deep-hover: #3B32B8; --primary-soft: rgba(73,63,219,.07); --primary-line: rgba(73,63,219,.22); --accent: #0A7A61; /* akcens SZÖVEG – 4,95:1 */ --accent-deco: #2DDCB1; /* akcens kitöltés/jelző */ --accent-soft: rgba(10,122,97,.10); --line: rgba(18,18,43,.12); --shadow-glow: 0 1px 2px rgba(18,18,43,.05), 0 12px 32px -12px rgba(73,63,219,.18); --shadow-card: 0 1px 2px rgba(18,18,43,.06), 0 10px 28px -14px rgba(18,18,43,.18); color-scheme: light; background: var(--bg); } html[data-skin="light"] body{ background: var(--bg); color: var(--primary-2); } /* ---------- Fejléc ---------- */ html[data-skin="light"] header.site-header{ background: rgba(244,244,249,.86); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(18,18,43,.02); } html[data-skin="light"] .site-header.is-scrolled{ background: rgba(244,244,249,.96); } html[data-skin="light"] .nav-links a{ color: #3A3956; } html[data-skin="light"] .nav-links a:hover, html[data-skin="light"] .nav-links a.active{ color: var(--primary); } html[data-skin="light"] .logo img, html[data-skin="light"] .site-header .logo img{ content: url("../assets/logo/datamagic-logo-dark.svg"); } html[data-skin="light"] .nav-cta-mobile:hover{ color:#fff; } html[data-skin="light"] .hamburger span{ background: #12122B; } /* skin-váltó gomb világosban: a nav-szöveggel egy súlyban */ html[data-skin="light"] .skin-btn{ color:#3A3956; border-color: rgba(18,18,43,.16); } html[data-skin="light"] .skin-btn:hover{ color: var(--primary); border-color: var(--primary-line); background: rgba(73,63,219,.07); } /* ---------- Legördülő / flyout / nyelvválasztó ---------- */ html[data-skin="light"] .dropdown-menu, html[data-skin="light"] .flyout-menu, html[data-skin="light"] .lang-menu, html[data-skin="light"] .geo-suggest{ background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18,18,43,.06), 0 18px 44px -16px rgba(18,18,43,.22); } html[data-skin="light"] .dropdown-menu a, html[data-skin="light"] .flyout-menu a{ color:#3A3956; } html[data-skin="light"] .flyout-menu a:hover{ background: rgba(73,63,219,.08); color: var(--primary); } html[data-skin="light"] .flyout-menu li+li{ border-top:1px solid rgba(18,18,43,.07); } html[data-skin="light"] .flyout-menu a.fm-parent{ background: rgba(73,63,219,.06); box-shadow: inset 0 0 0 1px rgba(73,63,219,.20); color:#12122B; } html[data-skin="light"] .flyout-menu a.fm-parent .fp-sub{ color:#6E6C8C; } html[data-skin="light"] .flyout-menu a.fm-child::after{ background: rgba(73,63,219,.24); } html[data-skin="light"] .flyout-menu li.fm-sep{ border-top-color: rgba(18,18,43,.12); color:#6E6C8C; } html[data-skin="light"] .lang-menu .lang-item:hover{ background: rgba(73,63,219,.07); } html[data-skin="light"] .lang-cont + .lang-cont{ border-top:1px solid rgba(18,18,43,.08); } html[data-skin="light"] .lang-menu .flag, html[data-skin="light"] .lr-chip .flag{ box-shadow:0 0 0 1px rgba(18,18,43,.12); } /* ---------- Kártyák, szekciók ---------- */ html[data-skin="light"] .why-item, html[data-skin="light"] .feature-grid li, html[data-skin="light"] .consent-block, html[data-skin="light"] .activity, html[data-skin="light"] .captcha-question{ background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18,18,43,.04); } html[data-skin="light"] .feature-grid li:hover, html[data-skin="light"] .why-item:hover{ background:#FFFFFF; border-color: rgba(73,63,219,.28); box-shadow: 0 2px 4px rgba(18,18,43,.05), 0 14px 32px -16px rgba(73,63,219,.30); } html[data-skin="light"] .challenges-grid .why-item{ background: linear-gradient(180deg,#FFFFFF 0%,#FAFAFE 100%); box-shadow: 0 1px 2px rgba(18,18,43,.05), 0 16px 34px -20px rgba(18,18,43,.18); } html[data-skin="light"] .pill.neutral{ background: rgba(18,18,43,.05); color:#4B4A6A; } html[data-skin="light"] section.alt, html[data-skin="light"] .section.alt{ background: var(--bg-3); } html[data-skin="light"] .section-sub, html[data-skin="light"] .lead{ color: var(--primary-2); } /* dísz-lila nagy betűn maradhat, kis szövegen nem */ html[data-skin="light"] .section-kicker{ color: var(--primary); letter-spacing:.28em; } /* ---------- Űrlapok ---------- */ html[data-skin="light"] .form-field input, html[data-skin="light"] .form-field select, html[data-skin="light"] .form-field textarea{ background:#FFFFFF; color:#12122B; border:1px solid rgba(18,18,43,.18); } html[data-skin="light"] .form-field input::placeholder, html[data-skin="light"] .form-field textarea::placeholder{ color:#8B89A6; } html[data-skin="light"] .form-field input:focus, html[data-skin="light"] .form-field select:focus, html[data-skin="light"] .form-field textarea:focus{ background:#FFFFFF; border-color: var(--primary); box-shadow:0 0 0 3px rgba(73,63,219,.14); } html[data-skin="light"] .form-field label{ color:#3A3956; } html[data-skin="light"] .it-quote-form{ background:#FFFFFF; border:1px solid var(--line); box-shadow: 0 1px 2px rgba(18,18,43,.06), 0 22px 50px -24px rgba(18,18,43,.22); } html[data-skin="light"] .it-quote-form input:focus, html[data-skin="light"] .it-quote-form select:focus, html[data-skin="light"] .it-quote-form textarea:focus{ background:#FFFFFF; } /* ---------- Gombok: a 8 db var(--white) HÁTTÉR visszaállítása ---------- */ html[data-skin="light"] .btn-primary{ background: var(--primary); color:#fff; /* papíron feszes emelés, nem derengés (sötéten 24px/.5 glow volt) */ box-shadow: 0 1px 2px rgba(18,18,43,.10), 0 6px 14px -6px rgba(73,63,219,.45); } html[data-skin="light"] .btn-primary:hover{ background: var(--deep-hover); color:#fff; box-shadow: 0 2px 4px rgba(18,18,43,.12), 0 10px 20px -8px rgba(73,63,219,.50); } html[data-skin="light"] .btn-secondary{ color: var(--primary); border-color: var(--primary-line); } html[data-skin="light"] .btn-secondary:hover{ background: rgba(73,63,219,.07); border-color: var(--primary); } html[data-skin="light"] .btn .play-icon, html[data-skin="light"] .marquee-slider::-webkit-slider-thumb, html[data-skin="light"] .marquee-slider::-moz-range-thumb{ background:#FFFFFF; } /* a színes CTA-sávokon a gomb marad fehér alapú */ html[data-skin="light"] .cta-strip .btn-primary, html[data-skin="light"] .cta-strip .btn-primary:hover, html[data-skin="light"] .contact-flekk .btn-primary, html[data-skin="light"] .contact-flekk .btn-primary:hover{ background:#FFFFFF; color:#2A2470; } html[data-skin="light"] .btn.btn-ebook{ background: var(--accent-deco); color:#07281f; } html[data-skin="light"] .btn.btn-ebook:hover{ color:#07281f; } /* ---------- Képkeretek: a sötét UI-screenshot KIJELZŐ marad ---------- */ html[data-skin="light"] .tms-mockup{ border:1px solid rgba(18,18,43,.14); box-shadow: 0 2px 6px rgba(18,18,43,.08), 0 26px 56px -26px rgba(18,18,43,.34); } html[data-skin="light"] .tms-mockup:hover{ box-shadow: 0 3px 8px rgba(18,18,43,.10), 0 32px 66px -26px rgba(73,63,219,.34); } html[data-skin="light"] .erp-shot{ background: #FFFFFF; border:1px solid var(--line); box-shadow: 0 1px 2px rgba(18,18,43,.05), 0 18px 40px -20px rgba(18,18,43,.20); } html[data-skin="light"] .erp-shot figcaption h3{ color:#12122B; } html[data-skin="light"] .erp-shot figcaption p{ color:#4B4A6A; } html[data-skin="light"] .erp-shot-tag{ color: var(--primary); } /* fotó/ikon-tartók: sötét lyuk helyett világos semleges */ html[data-skin="light"] .ebook-card .e-preview, html[data-skin="light"] .video-frame, html[data-skin="light"] .video-cta-thumb, html[data-skin="light"] .uzletag-card .u-thumb{ background:#E7E7F1; } html[data-skin="light"] #funding-badge{ box-shadow: 0 1px 2px rgba(18,18,43,.06), 0 10px 26px -12px rgba(18,18,43,.24), 0 0 0 1px var(--line); } html[data-skin="light"] .ebook-reg .eb-shot img{ box-shadow:0 24px 56px -28px rgba(18,18,43,.36); } /* ---------- Táblázat / kód / fogalomtár ---------- */ html[data-skin="light"] .gloss-card{ background:#FFFFFF; border:1px solid var(--line); } html[data-skin="light"] .gloss-term{ color:#12122B; } html[data-skin="light"] .gloss-full{ color:#6E6C8C; } html[data-skin="light"] table th{ color:#12122B; border-bottom-color: rgba(18,18,43,.16); } html[data-skin="light"] table td{ border-bottom-color: rgba(18,18,43,.08); } html[data-skin="light"] code, html[data-skin="light"] pre{ background:#F0F0F8; color:#2A2946; } /* ---------- Lábléc ---------- */ html[data-skin="light"] footer, html[data-skin="light"] .site-footer{ background:#EDEDF6; border-top:1px solid var(--line); color:#4B4A6A; } html[data-skin="light"] footer a, html[data-skin="light"] .site-footer a{ color:#3A3956; } html[data-skin="light"] footer a:hover{ color: var(--primary); } html[data-skin="light"] footer h4, html[data-skin="light"] .site-footer h4{ color:#12122B; } /* ---------- Nyelvi marquee ---------- */ html[data-skin="light"] .lang-reach{ background: var(--bg-3); } html[data-skin="light"] .lr-chip{ background:#FFFFFF; border:1px solid var(--line); color:#3A3956; } /* ---------- DataBridge panel ---------- */ html[data-skin="light"] .dbp{ background: linear-gradient(160deg,#FFFFFF 0%,#F7F7FD 100%); border:1px solid var(--primary-line); box-shadow: 0 1px 2px rgba(18,18,43,.05), 0 20px 44px -22px rgba(73,63,219,.24); } html[data-skin="light"] .dbp h2{ color:#12122B; } html[data-skin="light"] .dbp p{ color:#4B4A6A; } html[data-skin="light"] .dbp-kicker{ color: var(--primary); } html[data-skin="light"] .dbp-note{ color:#6E6C8C; } /* ============================================================ SZÁNDÉKOSAN SÖTÉT MARAD (nem hiba): - .cine* mozis hero (three.js/canvas – külön kör) - .zoom-overlay lightbox - .contact-flekk / .cta-strip színes CTA-blokk Ezekben az ELŐTÉR FEHÉR — lásd a lentebbi blokkot. ============================================================ */ html[data-skin="light"] .page-header.has-bridge-bg, html[data-skin="light"] .page-header.has-montage{ background:#0d0d27; } html[data-skin="light"] .page-header.has-bridge-bg h1, html[data-skin="light"] .page-header.has-montage h1{ color:#fff; } html[data-skin="light"] .page-header.has-bridge-bg .lead, html[data-skin="light"] .page-header.has-montage .lead{ color:rgba(255,255,255,.86); } /* ---------- Színes CTA-blokkok előtere ---------- A .cta-strip és a .contact-flekk háttere --deep alapú lila gradiens, ami világos skinben is színes MARAD. A --white token viszont tintára fordult, így ezek szövege sötét lett sötéten. Itt visszakapják a fehéret. */ html[data-skin="light"] .cta-strip, html[data-skin="light"] .cta-strip h2, html[data-skin="light"] .cta-strip p, html[data-skin="light"] .cta-strip .bridge-tm, html[data-skin="light"] .contact-flekk, html[data-skin="light"] .contact-flekk h2{ color:#ffffff; } html[data-skin="light"] .cta-strip p{ text-shadow:0 1px 3px rgba(18,18,43,.35); } html[data-skin="light"] .cta-strip .bridge-tm{ opacity:.62; } html[data-skin="light"] .contact-flekk p{ color:rgba(255,255,255,.92); } html[data-skin="light"] .contact-flekk .form-field label{ color:rgba(255,255,255,.88); } html[data-skin="light"] .contact-flekk .form-field input, html[data-skin="light"] .contact-flekk .form-field select, html[data-skin="light"] .contact-flekk .form-field textarea{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#ffffff; } html[data-skin="light"] .contact-flekk .form-field input::placeholder, html[data-skin="light"] .contact-flekk .form-field textarea::placeholder{ color:rgba(255,255,255,.66); } html[data-skin="light"] .contact-flekk .form-field input:focus, html[data-skin="light"] .contact-flekk .form-field select:focus, html[data-skin="light"] .contact-flekk .form-field textarea:focus{ background:rgba(255,255,255,.22); border-color:#ffffff; box-shadow:0 0 0 3px rgba(255,255,255,.22); } /* ---------- Hero háttérgrafika és a hero-n BELÜLI csempék ---------- A .hero-bg inset:0 + cover, a termékcsempék viszont ugyanennek a .page-header-nek a gyerekei → a grafika a csempék mögé is befut. Sötéten .35 opacitáson ez finom textúra; világos alapon a szürke formák feltűnőek és úgy hatnak, mintha a háttér belecsúszott volna. Megoldás: felül kifuttatjuk, és a csempék tömör felületet kapnak. */ html[data-skin="light"] .page-header .hero-bg{ opacity:.13; -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.4) 48%,transparent 64%); mask-image: linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.4) 48%,transparent 64%); } html[data-skin="light"] .fms-tile, html[data-skin="light"] .crm-tile{ background:#FFFFFF; box-shadow:0 1px 2px rgba(18,18,43,.04); } html[data-skin="light"] .fms-tile:hover, html[data-skin="light"] .crm-tile:hover{ background:#FFFFFF; border-color:var(--primary-line); box-shadow:0 2px 4px rgba(18,18,43,.05),0 14px 30px -16px rgba(73,63,219,.28); } html[data-skin="light"] .fms-tile h3, html[data-skin="light"] .crm-tile h3{ color:#12122B; } html[data-skin="light"] .product-pict{ filter:drop-shadow(0 6px 18px rgba(73,63,219,.28)); } /* ---------- Egységes panel-kezelés (a legfontosabb blokk) ---------- A style.css „UNIFIED NEON PANEL TREATMENT" szakasza 12 osztálynak ad BEÉGETETT sötét gradienst — rgba(20,16,60,.92) … —, tehát NEM tokent, így világos skinben is sötét marad. A benne lévő szöveg viszont var(--white) / var(--primary-2), ami tintára fordul → sötét szöveg sötét panelen. 24 magyar lapot érint (referenciak, technologia, kapcsolat, ams, index, it-uzemeltetes, szocialis, rolunk, api, adatkezeles, allamigazgatas és a bridge-lapok). Papíron a mélységet hajszálvonal + lágy árnyék adja, nem a neon. */ html[data-skin="light"] .product-card, html[data-skin="light"] .why-item, html[data-skin="light"] .content-card, html[data-skin="light"] .partner-card, html[data-skin="light"] .ref-card, html[data-skin="light"] .dmsr-col, html[data-skin="light"] .tech-list > li, html[data-skin="light"] .office-item, html[data-skin="light"] .hw-item, html[data-skin="light"] .stakeholder-item, html[data-skin="light"] .erp-shot, html[data-skin="light"] .quote{ background: linear-gradient(160deg,#FFFFFF 0%,#FAFAFD 100%); border: 1px solid rgba(18,18,43,.12); box-shadow: 0 1px 2px rgba(18,18,43,.05), 0 14px 32px -20px rgba(18,18,43,.16); } html[data-skin="light"] .product-card:hover, html[data-skin="light"] .why-item:hover, html[data-skin="light"] .content-card:hover, html[data-skin="light"] .partner-card:hover, html[data-skin="light"] .ref-card:hover, html[data-skin="light"] .dmsr-col:hover, html[data-skin="light"] .tech-list > li:hover, html[data-skin="light"] .office-item:hover, html[data-skin="light"] .hw-item:hover, html[data-skin="light"] .stakeholder-item:hover, html[data-skin="light"] .erp-shot:hover, html[data-skin="light"] .quote:hover{ border-color: rgba(73,63,219,.28); box-shadow: 0 2px 4px rgba(18,18,43,.06), 0 18px 38px -20px rgba(73,63,219,.28); } /* a neon gradient-körvonal papíron nem működik: kikapcsolva */ html[data-skin="light"] .product-card::after, html[data-skin="light"] .why-item::after, html[data-skin="light"] .content-card::after, html[data-skin="light"] .partner-card::after, html[data-skin="light"] .ref-card::after, html[data-skin="light"] .dmsr-col::after, html[data-skin="light"] .tech-list > li::after, html[data-skin="light"] .office-item::after, html[data-skin="light"] .hw-item::after, html[data-skin="light"] .stakeholder-item::after, html[data-skin="light"] .erp-shot::after, html[data-skin="light"] .quote::after{ display:none !important; } html[data-skin="light"] .quote{ color:#3A3956; } html[data-skin="light"] .quote cite, html[data-skin="light"] .quote footer{ color:#6E6C8C; } html[data-skin="light"] .tech-list > li strong, html[data-skin="light"] .hw-item strong, html[data-skin="light"] .office-item strong{ color:#12122B; } /* ---------- Mozis / vászon-alapú hero-k feliratai ---------- Az index (.home-hero) háttere three.js-ből festett canvas, a tms (.cine-panel) mögött webp-filmkockák futnak — mindkettő JS-ből kapja a színét, tehát világos skinben is SÖTÉT marad. A feliratuk viszont var(--white) / var(--primary-2) tokenből jön, ami tintára fordult: sötét szöveg sötét vásznon. Itt visszakapják a fehéret, a kiemelés pedig a világos márkalilát (a sötétített #493FDB olvashatatlan lenne). */ html[data-skin="light"] .home-hero, html[data-skin="light"] .home-hero h1, html[data-skin="light"] .home-hero h2, html[data-skin="light"] .cine-panel, html[data-skin="light"] .cine-panel h1, html[data-skin="light"] .cine-panel h2{ color:#ffffff; } html[data-skin="light"] .home-hero h1 .accent{ color:#8B79FA; } html[data-skin="light"] .home-hero .hero-lead, html[data-skin="light"] .cine-panel p{ color:rgba(255,255,255,.88); } html[data-skin="light"] .home-hero__cue, html[data-skin="light"] .cine-cue{ color:rgba(255,255,255,.62); } html[data-skin="light"] .home-hero .btn-secondary, html[data-skin="light"] .cine-panel .btn-secondary{ color:#ffffff; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.08); } html[data-skin="light"] .home-hero .btn-secondary:hover, html[data-skin="light"] .cine-panel .btn-secondary:hover{ background:rgba(255,255,255,.16); border-color:#ffffff; } /* ========================================================================== Képernyőképek skin szerint — világos skinben a világos UI-változat A DataMagic ERP-nek van világos témája, tehát ez a valós terméket mutatja. Betöltés: a light.css után (vagy annak a végén). ========================================================================== */ /* --- 1. a kép cseréje: az és az alt megmarad --- */ html[data-skin="light"] img[src*="fms-korosito"] { content: url("../assets/fms/fms-korosito-light.webp"); } html[data-skin="light"] img[src*="fms-bankimport"] { content: url("../assets/fms/fms-bankimport-light.webp"); } html[data-skin="light"] img[src*="fms-fokonyv"] { content: url("../assets/fms/fms-fokonyv-light.webp"); } html[data-skin="light"] img[src*="crm-adatlap"] { content: url("../assets/crm/crm-adatlap-light.webp"); } html[data-skin="light"] img[src*="crm-elozmenyek"] { content: url("../assets/crm/crm-elozmenyek-light.webp"); } html[data-skin="light"] img[src*="crm-partnerkontroll"]{ content: url("../assets/crm/crm-partnerkontroll-light.webp"); } html[data-skin="light"] img[src*="crm-workflow"] { content: url("../assets/crm/crm-workflow-light.webp"); } /* --- 2. a keret is világosodik, különben a tartalom ellen dolgozik --- Csak ott, ahol VAN világos változat: a crm-dashboard.webp-hez nincs forrás-HTML, az sötét marad, tehát sötét keretben is kell maradnia. */ html[data-skin="light"] .tms-mockup:has(img[src*="fms-korosito"]), html[data-skin="light"] .tms-mockup:has(img[src*="fms-bankimport"]), html[data-skin="light"] .tms-mockup:has(img[src*="fms-fokonyv"]), html[data-skin="light"] .tms-mockup:has(img[src*="crm-adatlap"]), html[data-skin="light"] .tms-mockup:has(img[src*="crm-elozmenyek"]), html[data-skin="light"] .tms-mockup:has(img[src*="crm-partnerkontroll"]){ background: linear-gradient(180deg,#FFFFFF 0%,#FAFAFD 100%); border: 1px solid rgba(18,18,43,.14); box-shadow: 0 2px 6px rgba(18,18,43,.07), 0 26px 56px -28px rgba(18,18,43,.28); } html[data-skin="light"] .tms-mockup:has(img[src*="fms-korosito"]) .tms-mockup-bar, html[data-skin="light"] .tms-mockup:has(img[src*="fms-bankimport"]) .tms-mockup-bar, html[data-skin="light"] .tms-mockup:has(img[src*="fms-fokonyv"]) .tms-mockup-bar, html[data-skin="light"] .tms-mockup:has(img[src*="crm-adatlap"]) .tms-mockup-bar, html[data-skin="light"] .tms-mockup:has(img[src*="crm-elozmenyek"]) .tms-mockup-bar, html[data-skin="light"] .tms-mockup:has(img[src*="crm-partnerkontroll"]) .tms-mockup-bar{ background: linear-gradient(180deg,#F2F2F8 0%,#FAFAFD 100%); border-bottom: 1px solid rgba(18,18,43,.09); } html[data-skin="light"] .tms-mockup:has(img[src*="-light"]) .tms-mockup-bar::after{ color: rgba(18,18,43,.34); } html[data-skin="light"] .tms-mockup .tms-mockup-url{ color: rgba(18,18,43,.55); } html[data-skin="light"] .tms-mockup:has(img[src*="crm-dashboard"]) .tms-mockup-url{ color: rgba(255,255,255,.55); } /* a workflow saját kerete */ html[data-skin="light"] .crm-flowfig{ background:#FFFFFF; border:1px solid rgba(18,18,43,.14); box-shadow: 0 2px 6px rgba(18,18,43,.07), 0 22px 48px -26px rgba(18,18,43,.26); }