/* ================================================================= G-TIRE — "v2" design téma (kékes, letisztultabb, lágyabb átmenetek) Csak akkor aktív, ha a . Minden más HTML/JS változatlan marad — ez a fájl kizárólag a megjelenést írja felül, a style.css tetejére töltve be. (Lásd: assets/js/main.js — theme toggle gomb.) ================================================================= */ :root[data-theme="v2"] { /* Sötét alap (hero, header, footer) — a korábbi közel-fekete helyett mély, kékes tónus */ --ink: #0B1526; --ink-soft: #121F35; --ink-soft-2: #1A2C4A; --ink-border: rgba(255, 255, 255, 0.09); --ink-text: #F1F5FB; --ink-text-muted: #9FB0C7; /* Világos tartalmi blokkok — hűvösebb, tisztább fehér a korábbi melegebb krém helyett */ --paper: #F6F9FC; --paper-alt: #ECF2FA; --paper-border: #DCE6F2; --body-text: #16202E; --body-muted: #62748C; /* Márka-akcent — narancs helyett kék */ --accent: #3E7BFA; --accent-dark: #2F63D6; --accent-ink: #FFFFFF; --steel: #4C6E92; --steel-light: #7096BE; /* Lágyabb, kerekebb, "smoothabb" felület */ --radius-s: 10px; --radius-m: 18px; --radius-l: 30px; --shadow-soft: 0 16px 36px -16px rgba(16, 38, 74, 0.22); --shadow-strong: 0 30px 70px -24px rgba(16, 38, 74, 0.32); } /* --------------------------------------------------------------- Hardkódolt (nem CSS-változós) narancs árnyalatok lecserélése kékre. Ugyanazok az alfa-értékek, csak 255,106,26 (narancs) helyett 62,123,250 (kék, = --accent). --------------------------------------------------------------- */ [data-theme="v2"] .btn-primary { box-shadow: 0 10px 24px -10px rgba(62,123,250,0.5); } [data-theme="v2"] .site-header { background: rgba(11,21,38,0.92); } [data-theme="v2"] .nav-mobile { background: radial-gradient(ellipse 640px 380px at 100% 0%, rgba(62,123,250,0.16), transparent 65%), var(--ink); } [data-theme="v2"] .nav-mobile a.is-active { background: rgba(62,123,250,0.14); border-color: rgba(62,123,250,0.35); } [data-theme="v2"] .hero { background: radial-gradient(ellipse 900px 500px at 85% -10%, rgba(62,123,250,0.20), transparent 60%), radial-gradient(ellipse 700px 500px at 5% 110%, rgba(76,110,146,0.28), transparent 60%), var(--ink); } [data-theme="v2"] .hero::before { background: radial-gradient(circle, rgba(62,123,250,0.35), transparent 70%); } [data-theme="v2"] .card__icon, [data-theme="v2"] .product-card__img .icon-badge, [data-theme="v2"] .product-gallery__main .icon-badge { background: linear-gradient(155deg, #E8F0FE, #D6E4FB); } [data-theme="v2"] .feature__icon { background: rgba(62,123,250,0.14); } [data-theme="v2"] .bhp-band { background: linear-gradient(120deg, #10151F 0%, #16233A 60%, #142238 100%); } [data-theme="v2"] .bhp-band::after { background: radial-gradient(circle 340px at 100% 0%, rgba(62,123,250,0.22), transparent 70%); } [data-theme="v2"] .bhp-band__badge { background: rgba(62,123,250,0.15); } [data-theme="v2"] .field input:focus, [data-theme="v2"] .field select:focus, [data-theme="v2"] .field textarea:focus { box-shadow: 0 0 0 4px rgba(62,123,250,0.14); } [data-theme="v2"] .step-pill.is-active { background: #EAF1FE; } [data-theme="v2"] .service-option.is-selected { background: #EFF5FE; box-shadow: 0 0 0 3px rgba(62,123,250,0.12); } [data-theme="v2"] .product-card__img, [data-theme="v2"] .product-gallery__main { background: radial-gradient(circle at 30% 20%, rgba(62,123,250,0.10), transparent 55%), repeating-linear-gradient(135deg, rgba(20,22,26,0.035) 0 2px, transparent 2px 14px), var(--paper-alt); } /* --------------------------------------------------------------- Lágyabb, "smoothabb" mozgás a fő interaktív elemeken — csak az időzítést írjuk felül, a meglévő transition-tulajdonságlistát (transform, box-shadow, stb.) a style.css szabályai adják. --------------------------------------------------------------- */ [data-theme="v2"] .btn, [data-theme="v2"] .card, [data-theme="v2"] .product-card, [data-theme="v2"] .nav-desktop a, [data-theme="v2"] .nav-mobile a, [data-theme="v2"] .service-option, [data-theme="v2"] .date-chip, [data-theme="v2"] .field input, [data-theme="v2"] .field select, [data-theme="v2"] .field textarea { transition-duration: .3s; transition-timing-function: cubic-bezier(.22,.61,.36,1); }