/* ================================================================ GENERATIONS GROUP — style.css ================================================================ OBSAH SÚBORU (v poradí): 1. FONT - @font-face Outfit (lokálne woff2) 2. TOKENY - :root premenné (farby, font, rozmery) + základný reset 3. ATMOSFÉRA - .gg-atmosfera: pozadie celého webu (gradient, grid, aurora, častice) 4. SEKCIE - v poradí stránky, každá s vlastným prefixom (nezávislé bloky): HERO (ggh-), O NÁS (ggn-), HISTÓRIA (ggt-), PORTFÓLIO (ggp-), HODNOTY (ggv-), TÍM (ggm-), KARIÉRA (ggj-), KONTAKT (ggk-) 5. HEADER + MENU - ggnav- (fixný header, mobilné full-screen fade menu) KONVENCIE: - farby VŽDY cez var(--gg-..., fallback) - zmena palety = úprava :root - mobilné pravidlá v @media (max-width: 767px) na konci každej sekcie (header používa 991px breakpoint) - !important len tam, kde je nutné prebiť špecifickosť (napr. logá v nadpisoch) ================================================================ */ /* ================================================================ FONT: OUTFIT — lokálne @font-face (bez Google Fonts) ================================================================ Súbory v fonts/ (woff2, zdroj: @fontsource/outfit). latin-ext = slovenská diakritika (č, š, ž, ô, ť...). Váhy podľa Elementor nastavenia: 200 nadpisy | 300 text | 500 zvýraznenie | 600-700 akcenty font-display: swap = text sa zobrazí hneď systémovým fontom, Outfit sa vymení po načítaní (žiadny neviditeľný text). ================================================================ */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/outfit-latin-ext-200-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/outfit-latin-200-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-latin-300-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/outfit-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ================================================================ GENERATIONS GROUP — DESIGN TOKENY ================================================================ Jediné centrálne miesto pre farby, font a rozmery. Všetky sekcie čítajú premenné cez var(--gg-..., fallback). FONT: Outfit — váhy podľa Elementor nastavenia: nadpisy 200, text 300, zvýraznenie 500 (+600/700 akcenty). ================================================================ */ :root { /* farby */ --gg-navy-dark: #041827; --gg-navy-card: #132a3b; --gg-gold: #b39d77; --gg-gold-light: #c9b58f; --gg-white: #ffffff; --gg-text: #e8edf2; --gg-text-muted: #a9b6c2; --gg-text-dark: #041827; /* typografia */ --gg-font: 'Outfit', sans-serif; /* rozmery */ --gg-radius: 20px; --gg-radius-btn: 50px; --gg-container: 1140px; } /* ---------- ZÁKLADNÝ RESET ---------- (robil WordPress/Elementor — v statickej verzii vlastný) */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* plynulé kotvy bez JS */ } /* mobil: okamžitý skok na kotvu — plynulý scroll na slabších telefónoch sekal kvôli prekresľovaniu animovaného pozadia */ @media (max-width: 767px) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--gg-font); font-weight: 300; /* Elementor: Text = 300 */ background: var(--gg-navy-dark); color: var(--gg-text); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } /* ================================================================ PRÍSTUPNOSŤ — utility ================================================================ */ /* vizualne skryty obsah (len pre citacky obrazovky) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible { outline: 2px solid var(--gg-gold, #b39d77); outline-offset: 3px; border-radius: 4px; } /* skip link — neviditelny, zobrazi sa pri fokuse (prvy Tab) */ .gg-skip { position: fixed; top: -60px; left: 16px; z-index: 1000; padding: 10px 22px; background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); font-weight: 600; font-size: 14px; border-radius: 0 0 12px 12px; text-decoration: none; transition: top .25s ease; } .gg-skip:focus { top: 0; } /* nadpisy sekcii su teraz h2 — reset UA marginov (vizual drzia povodne triedy, margin-bottom maju vlastny) */ h2.ggn-title, h2.ggt-title, h2.ggp-title, h2.ggv-title, h2.ggm-title, h2.ggj-title, h2.ggk-title { margin-top: 0; font-size: inherit; font-weight: inherit; } /* fokus timeline scrollu — jemny zlaty ramik pri klavesnici */ .ggt-scroll:focus-visible { outline: 2px solid rgba(179, 157, 119, .6); outline-offset: 4px; border-radius: 8px; } /* ======================================================= GENERATIONS GROUP — GLOBÁLNA TRIEDA .gg-atmosfera v4 ======================================================= Atmosférické pozadie: základný gradient + bodkovaný grid + vignette + zlatá aurora + stúpajúce častice. v4 ZMENY: hustota častíc zvýšená na 75 unikátnych bodov (v2 mala 37, v3 mala 55). INŠTALÁCIA: 1. Vlož do Site Settings → Custom CSS (globálne). 2. Kontajneru so sekciami: Advanced → CSS Classes → gg-atmosfera 3. Sekcie (widgety) NESMÚ mať vlastné nepriehľadné pozadie (background: transparent). 4. Kontajner nesmie mať v Elementore vlastné Background. 5. Vyčistiť cache. ======================================================= */ /* ------------------------------------------------------- ZÁKLAD + GRID + VIGNETTE ------------------------------------------------------- */ .gg-atmosfera { position: relative; overflow: clip; background-color: #041827; background-image: radial-gradient( ellipse 75% 90% at 62% 45%, transparent 0%, rgba(4, 24, 39, 0.55) 45%, #041827 75% ), radial-gradient( rgba(179, 157, 119, 0.10) 1px, transparent 1.5px ), linear-gradient(180deg, #03121e 0%, #072238 55%, #041827 100%); background-size: 100% 100%, 26px 26px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; } /* Obsah sekcií nad atmosférou */ .gg-atmosfera > * { position: relative; z-index: 2; } /* ------------------------------------------------------- AURORA (::before) — zlaté žiary s modrým akcentom ------------------------------------------------------- */ .gg-atmosfera::before { content: ""; position: absolute; top: -40vh; left: -25%; right: -25%; height: 160vh; z-index: 0; background-image: radial-gradient( ellipse 30% 32% at 72% 34%, rgba(179, 157, 119, 0.22) 0%, rgba(179, 157, 119, 0.06) 55%, transparent 72% ), radial-gradient( ellipse 26% 28% at 18% 78%, rgba(29, 78, 110, 0.28) 0%, transparent 68% ), radial-gradient( ellipse 18% 20% at 46% 52%, rgba(179, 157, 119, 0.10) 0%, transparent 65% ); filter: blur(40px); animation: ggAtmosferaAurora 32s ease-in-out infinite; will-change: transform; pointer-events: none; } @keyframes ggAtmosferaAurora { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.85; } 33% { transform: translate(-3%, 4%) rotate(2.5deg) scale(1.08); opacity: 1; } 66% { transform: translate(3%, -3%) rotate(-2deg) scale(1.04); opacity: 0.92; } } /* ------------------------------------------------------- ČASTICE (::after) — zlaté, stúpajúce v4: rozsah 0–600vh, každý bod 2× (Y a Y+600vh) pre bezšvový loop. 75 unikátnych bodov. ------------------------------------------------------- */ .gg-atmosfera::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; /* v6: svetielka 5px zaklad (vzdialene 3px, bezne 5px, jasne 7px) */ height: 5px; z-index: 1; border-radius: 50%; background: transparent; box-shadow: 6vw 18vh 0 0 rgba(201, 181, 143, 0.40), 6vw 618vh 0 0 rgba(201, 181, 143, 0.40), 19vw 124vh 0 0 rgba(201, 181, 143, 0.30), 19vw 724vh 0 0 rgba(201, 181, 143, 0.30), 31vw 50vh 0 1px rgba(212, 195, 160, 0.38), 31vw 650vh 0 1px rgba(212, 195, 160, 0.38), 42vw 176vh 0 0 rgba(201, 181, 143, 0.33), 42vw 776vh 0 0 rgba(201, 181, 143, 0.33), 58vw 510vh 0 1px rgba(212, 195, 160, 0.36), 58vw 1110vh 0 1px rgba(212, 195, 160, 0.36), 64vw 240vh 0 0 rgba(201, 181, 143, 0.31), 64vw 840vh 0 0 rgba(201, 181, 143, 0.31), 70vw 30vh 0 0 rgba(201, 181, 143, 0.28), 70vw 630vh 0 0 rgba(201, 181, 143, 0.28), 80vw 136vh 0 1px rgba(212, 195, 160, 0.34), 80vw 736vh 0 1px rgba(212, 195, 160, 0.34), 89vw 300vh 0 0 rgba(201, 181, 143, 0.32), 89vw 900vh 0 0 rgba(201, 181, 143, 0.32), 10vw 480vh 0 0 rgba(201, 181, 143, 0.36), 10vw 1080vh 0 0 rgba(201, 181, 143, 0.36), 47vw 450vh 0 0 rgba(201, 181, 143, 0.28), 47vw 1050vh 0 0 rgba(201, 181, 143, 0.28), 60vw 360vh 0 1px rgba(212, 195, 160, 0.33), 60vw 960vh 0 1px rgba(212, 195, 160, 0.33), 95vw 220vh 0 0 rgba(201, 181, 143, 0.30), 95vw 820vh 0 0 rgba(201, 181, 143, 0.30), 37vw 420vh 0 0 rgba(201, 181, 143, 0.34), 37vw 1020vh 0 0 rgba(201, 181, 143, 0.34), 16vw 156vh 0 0 rgba(201, 181, 143, 0.32), 16vw 756vh 0 0 rgba(201, 181, 143, 0.32), 27vw 330vh 0 1px rgba(212, 195, 160, 0.36), 27vw 930vh 0 1px rgba(212, 195, 160, 0.36), 40vw 70vh 0 0 rgba(201, 181, 143, 0.30), 40vw 670vh 0 0 rgba(201, 181, 143, 0.30), 55vw 260vh 0 0 rgba(201, 181, 143, 0.33), 55vw 860vh 0 0 rgba(201, 181, 143, 0.33), 68vw 470vh 0 1px rgba(212, 195, 160, 0.35), 68vw 1070vh 0 1px rgba(212, 195, 160, 0.35), 78vw 350vh 0 0 rgba(201, 181, 143, 0.31), 78vw 950vh 0 0 rgba(201, 181, 143, 0.31), 88vw 180vh 0 0 rgba(201, 181, 143, 0.34), 88vw 780vh 0 0 rgba(201, 181, 143, 0.34), 3vw 340vh 0 0 rgba(201, 181, 143, 0.34), 3vw 940vh 0 0 rgba(201, 181, 143, 0.34), 12vw 95vh 0 1px rgba(212, 195, 160, 0.35), 12vw 695vh 0 1px rgba(212, 195, 160, 0.35), 22vw 545vh 0 0 rgba(201, 181, 143, 0.30), 22vw 1145vh 0 0 rgba(201, 181, 143, 0.30), 33vw 225vh 0 0 rgba(201, 181, 143, 0.32), 33vw 825vh 0 0 rgba(201, 181, 143, 0.32), 45vw 120vh 0 0 rgba(201, 181, 143, 0.29), 45vw 720vh 0 0 rgba(201, 181, 143, 0.29), 51vw 555vh 0 1px rgba(212, 195, 160, 0.34), 51vw 1155vh 0 1px rgba(212, 195, 160, 0.34), 62vw 58vh 0 0 rgba(201, 181, 143, 0.31), 62vw 658vh 0 0 rgba(201, 181, 143, 0.31), 74vw 268vh 0 0 rgba(201, 181, 143, 0.33), 74vw 868vh 0 0 rgba(201, 181, 143, 0.33), 83vw 435vh 0 1px rgba(212, 195, 160, 0.33), 83vw 1035vh 0 1px rgba(212, 195, 160, 0.33), 92vw 510vh 0 0 rgba(201, 181, 143, 0.29), 92vw 1110vh 0 0 rgba(201, 181, 143, 0.29), /* --- NOVÉ bližšie body (v4) --- */ 5vw 200vh 0 0 rgba(201, 181, 143, 0.32), 5vw 800vh 0 0 rgba(201, 181, 143, 0.32), 17vw 385vh 0 1px rgba(212, 195, 160, 0.31), 17vw 985vh 0 1px rgba(212, 195, 160, 0.31), 25vw 45vh 0 0 rgba(201, 181, 143, 0.29), 25vw 645vh 0 0 rgba(201, 181, 143, 0.29), 36vw 300vh 0 0 rgba(201, 181, 143, 0.33), 36vw 900vh 0 0 rgba(201, 181, 143, 0.33), 43vw 590vh 0 1px rgba(212, 195, 160, 0.30), 43vw 1190vh 0 1px rgba(212, 195, 160, 0.30), 54vw 155vh 0 0 rgba(201, 181, 143, 0.28), 54vw 755vh 0 0 rgba(201, 181, 143, 0.28), 65vw 525vh 0 0 rgba(201, 181, 143, 0.32), 65vw 1125vh 0 0 rgba(201, 181, 143, 0.32), 76vw 90vh 0 1px rgba(212, 195, 160, 0.30), 76vw 690vh 0 1px rgba(212, 195, 160, 0.30), 86vw 405vh 0 0 rgba(201, 181, 143, 0.31), 86vw 1005vh 0 0 rgba(201, 181, 143, 0.31), 97vw 330vh 0 0 rgba(201, 181, 143, 0.28), 97vw 930vh 0 0 rgba(201, 181, 143, 0.28), /* --- vzdialenejšie (menšie, tlmenejšie) body --- */ 13vw 210vh 0 -1px rgba(179, 157, 119, 0.20), 13vw 810vh 0 -1px rgba(179, 157, 119, 0.20), 26vw 280vh 0 -1px rgba(179, 157, 119, 0.18), 26vw 880vh 0 -1px rgba(179, 157, 119, 0.18), 48vw 340vh 0 -1px rgba(179, 157, 119, 0.22), 48vw 940vh 0 -1px rgba(179, 157, 119, 0.22), 53vw 84vh 0 -1px rgba(179, 157, 119, 0.18), 53vw 684vh 0 -1px rgba(179, 157, 119, 0.18), 75vw 390vh 0 -1px rgba(179, 157, 119, 0.20), 75vw 990vh 0 -1px rgba(179, 157, 119, 0.20), 85vw 570vh 0 -1px rgba(179, 157, 119, 0.22), 85vw 1170vh 0 -1px rgba(179, 157, 119, 0.22), 93vw 70vh 0 -1px rgba(179, 157, 119, 0.16), 93vw 670vh 0 -1px rgba(179, 157, 119, 0.16), 23vw 530vh 0 -1px rgba(179, 157, 119, 0.20), 23vw 1130vh 0 -1px rgba(179, 157, 119, 0.20), 35vw 584vh 0 -1px rgba(179, 157, 119, 0.18), 35vw 1184vh 0 -1px rgba(179, 157, 119, 0.18), 72vw 500vh 0 -1px rgba(179, 157, 119, 0.20), 72vw 1100vh 0 -1px rgba(179, 157, 119, 0.20), 44vw 490vh 0 -1px rgba(179, 157, 119, 0.20), 44vw 1090vh 0 -1px rgba(179, 157, 119, 0.20), 57vw 156vh 0 -1px rgba(179, 157, 119, 0.18), 57vw 756vh 0 -1px rgba(179, 157, 119, 0.18), 66vw 316vh 0 -1px rgba(179, 157, 119, 0.21), 66vw 916vh 0 -1px rgba(179, 157, 119, 0.21), 79vw 56vh 0 -1px rgba(179, 157, 119, 0.18), 79vw 656vh 0 -1px rgba(179, 157, 119, 0.18), 90vw 524vh 0 -1px rgba(179, 157, 119, 0.20), 90vw 1124vh 0 -1px rgba(179, 157, 119, 0.20), 18vw 64vh 0 -1px rgba(179, 157, 119, 0.19), 18vw 664vh 0 -1px rgba(179, 157, 119, 0.19), 8vw 410vh 0 -1px rgba(179, 157, 119, 0.19), 8vw 1010vh 0 -1px rgba(179, 157, 119, 0.19), 30vw 110vh 0 -1px rgba(179, 157, 119, 0.17), 30vw 710vh 0 -1px rgba(179, 157, 119, 0.17), 41vw 560vh 0 -1px rgba(179, 157, 119, 0.20), 41vw 1160vh 0 -1px rgba(179, 157, 119, 0.20), 50vw 300vh 0 -1px rgba(179, 157, 119, 0.18), 50vw 900vh 0 -1px rgba(179, 157, 119, 0.18), 63vw 190vh 0 -1px rgba(179, 157, 119, 0.19), 63vw 790vh 0 -1px rgba(179, 157, 119, 0.19), 71vw 38vh 0 -1px rgba(179, 157, 119, 0.17), 71vw 638vh 0 -1px rgba(179, 157, 119, 0.17), 82vw 245vh 0 -1px rgba(179, 157, 119, 0.18), 82vw 845vh 0 -1px rgba(179, 157, 119, 0.18), 96vw 455vh 0 -1px rgba(179, 157, 119, 0.20), 96vw 1055vh 0 -1px rgba(179, 157, 119, 0.20), /* --- NOVÉ vzdialenejšie body (v4) --- */ 4vw 555vh 0 -1px rgba(179, 157, 119, 0.18), 4vw 1155vh 0 -1px rgba(179, 157, 119, 0.18), 15vw 470vh 0 -1px rgba(179, 157, 119, 0.19), 15vw 1070vh 0 -1px rgba(179, 157, 119, 0.19), 28vw 220vh 0 -1px rgba(179, 157, 119, 0.17), 28vw 820vh 0 -1px rgba(179, 157, 119, 0.17), 38vw 25vh 0 -1px rgba(179, 157, 119, 0.18), 38vw 625vh 0 -1px rgba(179, 157, 119, 0.18), 46vw 260vh 0 -1px rgba(179, 157, 119, 0.20), 46vw 860vh 0 -1px rgba(179, 157, 119, 0.20), 59vw 435vh 0 -1px rgba(179, 157, 119, 0.18), 59vw 1035vh 0 -1px rgba(179, 157, 119, 0.18), 69vw 585vh 0 -1px rgba(179, 157, 119, 0.19), 69vw 1185vh 0 -1px rgba(179, 157, 119, 0.19), 77vw 175vh 0 -1px rgba(179, 157, 119, 0.17), 77vw 775vh 0 -1px rgba(179, 157, 119, 0.17), 87vw 115vh 0 -1px rgba(179, 157, 119, 0.18), 87vw 715vh 0 -1px rgba(179, 157, 119, 0.18), 98vw 245vh 0 -1px rgba(179, 157, 119, 0.19), 98vw 845vh 0 -1px rgba(179, 157, 119, 0.19), /* --- NOVE body (v5): +20 unikatov --- */ 7vw 145vh 0 0 rgba(201, 181, 143, 0.33), 7vw 745vh 0 0 rgba(201, 181, 143, 0.33), 14vw 310vh 0 1px rgba(212, 195, 160, 0.32), 14vw 910vh 0 1px rgba(212, 195, 160, 0.32), 21vw 445vh 0 0 rgba(201, 181, 143, 0.30), 21vw 1045vh 0 0 rgba(201, 181, 143, 0.30), 29vw 585vh 0 0 rgba(201, 181, 143, 0.31), 29vw 1185vh 0 0 rgba(201, 181, 143, 0.31), 39vw 255vh 0 1px rgba(212, 195, 160, 0.33), 39vw 855vh 0 1px rgba(212, 195, 160, 0.33), 49vw 40vh 0 0 rgba(201, 181, 143, 0.29), 49vw 640vh 0 0 rgba(201, 181, 143, 0.29), 57vw 395vh 0 0 rgba(201, 181, 143, 0.32), 57vw 995vh 0 0 rgba(201, 181, 143, 0.32), 67vw 148vh 0 1px rgba(212, 195, 160, 0.31), 67vw 748vh 0 1px rgba(212, 195, 160, 0.31), 75vw 528vh 0 0 rgba(201, 181, 143, 0.30), 75vw 1128vh 0 0 rgba(201, 181, 143, 0.30), 85vw 330vh 0 0 rgba(201, 181, 143, 0.33), 85vw 930vh 0 0 rgba(201, 181, 143, 0.33), 94vw 85vh 0 1px rgba(212, 195, 160, 0.30), 94vw 685vh 0 1px rgba(212, 195, 160, 0.30), 2vw 475vh 0 -1px rgba(179, 157, 119, 0.19), 2vw 1075vh 0 -1px rgba(179, 157, 119, 0.19), 11vw 545vh 0 -1px rgba(179, 157, 119, 0.18), 11vw 1145vh 0 -1px rgba(179, 157, 119, 0.18), 24vw 155vh 0 -1px rgba(179, 157, 119, 0.20), 24vw 755vh 0 -1px rgba(179, 157, 119, 0.20), 36vw 480vh 0 -1px rgba(179, 157, 119, 0.18), 36vw 1080vh 0 -1px rgba(179, 157, 119, 0.18), 52vw 200vh 0 -1px rgba(179, 157, 119, 0.19), 52vw 800vh 0 -1px rgba(179, 157, 119, 0.19), 61vw 28vh 0 -1px rgba(179, 157, 119, 0.17), 61vw 628vh 0 -1px rgba(179, 157, 119, 0.17), 73vw 355vh 0 -1px rgba(179, 157, 119, 0.20), 73vw 955vh 0 -1px rgba(179, 157, 119, 0.20), 81vw 62vh 0 -1px rgba(179, 157, 119, 0.18), 81vw 662vh 0 -1px rgba(179, 157, 119, 0.18), 91vw 585vh 0 -1px rgba(179, 157, 119, 0.19), 91vw 1185vh 0 -1px rgba(179, 157, 119, 0.19), /* --- NOVE body (v6): +19 unikatov --- */ 4vw 75vh 0 0 rgba(201, 181, 143, 0.31), 4vw 675vh 0 0 rgba(201, 181, 143, 0.31), 9vw 265vh 0 1px rgba(212, 195, 160, 0.30), 9vw 865vh 0 1px rgba(212, 195, 160, 0.30), 20vw 515vh 0 0 rgba(201, 181, 143, 0.29), 20vw 1115vh 0 0 rgba(201, 181, 143, 0.29), 32vw 368vh 0 0 rgba(201, 181, 143, 0.32), 32vw 968vh 0 0 rgba(201, 181, 143, 0.32), 43vw 190vh 0 1px rgba(212, 195, 160, 0.31), 43vw 790vh 0 1px rgba(212, 195, 160, 0.31), 53vw 330vh 0 0 rgba(201, 181, 143, 0.30), 53vw 930vh 0 0 rgba(201, 181, 143, 0.30), 63vw 545vh 0 0 rgba(201, 181, 143, 0.31), 63vw 1145vh 0 0 rgba(201, 181, 143, 0.31), 72vw 95vh 0 1px rgba(212, 195, 160, 0.30), 72vw 695vh 0 1px rgba(212, 195, 160, 0.30), 84vw 480vh 0 0 rgba(201, 181, 143, 0.29), 84vw 1080vh 0 0 rgba(201, 181, 143, 0.29), 99vw 145vh 0 0 rgba(201, 181, 143, 0.30), 99vw 745vh 0 0 rgba(201, 181, 143, 0.30), 6vw 390vh 0 -1px rgba(179, 157, 119, 0.19), 6vw 990vh 0 -1px rgba(179, 157, 119, 0.19), 17vw 225vh 0 -1px rgba(179, 157, 119, 0.18), 17vw 825vh 0 -1px rgba(179, 157, 119, 0.18), 28vw 48vh 0 -1px rgba(179, 157, 119, 0.20), 28vw 648vh 0 -1px rgba(179, 157, 119, 0.20), 42vw 425vh 0 -1px rgba(179, 157, 119, 0.18), 42vw 1025vh 0 -1px rgba(179, 157, 119, 0.18), 56vw 580vh 0 -1px rgba(179, 157, 119, 0.19), 56vw 1180vh 0 -1px rgba(179, 157, 119, 0.19), 69vw 305vh 0 -1px rgba(179, 157, 119, 0.18), 69vw 905vh 0 -1px rgba(179, 157, 119, 0.18), 80vw 210vh 0 -1px rgba(179, 157, 119, 0.20), 80vw 810vh 0 -1px rgba(179, 157, 119, 0.20), 89vw 38vh 0 -1px rgba(179, 157, 119, 0.19), 89vw 638vh 0 -1px rgba(179, 157, 119, 0.19), 95vw 350vh 0 -1px rgba(179, 157, 119, 0.18), 95vw 950vh 0 -1px rgba(179, 157, 119, 0.18); animation: ggAtmosferaTok 192s linear infinite; will-change: transform; pointer-events: none; } /* posun o -600vh za cyklus */ @keyframes ggAtmosferaTok { 0% { transform: translate(0, 0); } 15% { transform: translate(1.2vw, -90vh); } 32% { transform: translate(-0.8vw, -192vh); } 50% { transform: translate(1.8vw, -300vh); } 68% { transform: translate(-1.4vw, -408vh); } 85% { transform: translate(0.6vw, -510vh); } 100% { transform: translate(0, -600vh); } } /* ------------------------------------------------------- PRÍSTUPNOSŤ ------------------------------------------------------- */ /* POZNAMKA: prefers-reduced-motion blok ODSTRANENY na ziadost vedenia — animacie bezia na vsetkych zariadeniach bez ohladu na systemove nastavenie obmedzenia pohybu. */ /* ------------------------------------------------------- MOBIL — statická aurora rozložená po CELEJ výške stránky (1000vh), jasnejšie častice, stlmený grid ------------------------------------------------------- */ @media (max-width: 767px) { .gg-atmosfera { background-image: radial-gradient( ellipse 100% 70% at 50% 35%, transparent 0%, rgba(4, 24, 39, 0.6) 40%, #041827 70% ), radial-gradient( rgba(179, 157, 119, 0.07) 1px, transparent 1.5px ), linear-gradient(180deg, #03121e 0%, #072238 55%, #041827 100%); background-size: 100% 100%, 24px 24px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; } .gg-atmosfera::before { background-image: radial-gradient(ellipse 55% 4% at 50% 3%, rgba(179, 157, 119, 0.22) 0%, transparent 70%), radial-gradient(ellipse 45% 3.5% at 12% 12%, rgba(29, 78, 110, 0.26) 0%, transparent 68%), radial-gradient(ellipse 50% 3.5% at 85% 22%, rgba(179, 157, 119, 0.14) 0%, transparent 68%), radial-gradient(ellipse 48% 3.5% at 20% 34%, rgba(179, 157, 119, 0.16) 0%, transparent 68%), radial-gradient(ellipse 45% 3.5% at 80% 46%, rgba(29, 78, 110, 0.22) 0%, transparent 68%), radial-gradient(ellipse 50% 3.5% at 15% 58%, rgba(179, 157, 119, 0.14) 0%, transparent 68%), radial-gradient(ellipse 48% 3.5% at 70% 70%, rgba(179, 157, 119, 0.15) 0%, transparent 68%), radial-gradient(ellipse 50% 3.5% at 25% 82%, rgba(29, 78, 110, 0.20) 0%, transparent 68%), radial-gradient(ellipse 48% 4% at 75% 94%, rgba(179, 157, 119, 0.15) 0%, transparent 68%); filter: blur(30px); animation: none; height: 1000vh; top: -15vh; } .gg-atmosfera::after { filter: brightness(1.5); } } /* ================================================================ SEKCIA: HERO ================================================================ */ .ggh-hero { --ggh-side: 3%; --ggh-bg-pos: center top; /* ← POZÍCIA FOTKY — DESKTOP */ --ggh-bg-pos-m: center center; /* ← POZÍCIA FOTKY — MOBIL */ position: relative; overflow: hidden; width: calc(100% - var(--ggh-side) * 2); max-width: 1400px; /* horný margin = výška fixného headera (76px) + medzera — hero začína POD menu, neprekrýva sa (desktop); mobil to prepisuje vo svojom breakpointe (prekryv zámerný) */ margin: calc(76px + 14px) auto 24px; border-radius: 0 0 20px 20px; /* spodné rohy 20px */ border-bottom: 1px solid rgba(179, 157, 119, .45); /* decentná zlatá linka */ box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); } .ggh-hero__bg { position: absolute; inset: 0; } .ggh-hero__bg picture { display: block; width: 100%; height: 100%; } .ggh-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ggh-bg-pos); display: block; } /* celoplošný overlay — veľmi jemný */ .ggh-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 24, 39, .30) 0%, rgba(4, 24, 39, .55) 100%); } .ggh-hero__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 110px 7%; min-height: 520px; } /* ---------- LOGO STĹPEC ---------- */ .ggh-hero__logo { position: relative; flex: 0 0 auto; width: clamp(350px, 28vw, 550px); text-align: center; z-index: 1; } /* PLYNULÝ SCRIM PRE LOGO */ .ggh-hero__logo::before { content: ""; position: absolute; inset: -70px -60px; /* Zväčšený priestor na rozpíjanie */ background: radial-gradient(ellipse at 50% 50%, rgba(4, 24, 39, .80) 0%, rgba(4, 24, 39, .25) 45%, rgba(4, 24, 39, 0) 70%); /* Skôr ide do stratena */ z-index: -1; filter: blur(25px); /* Oveľa väčšie rozostrenie pre plynulý okraj */ pointer-events: none; } .ggh-hero__logo img { max-width: 100%; height: auto; filter: drop-shadow(0 4px 15px rgba(4, 24, 39, 0.8)); } /* ---------- TEXTOVÝ STĹPEC ---------- */ .ggh-hero__text { position: relative; flex: 0 0 auto; width: min(48%, 540px); padding-left: 26px; color: var(--gg-text, #e8edf2); z-index: 1; } /* PLYNULÝ SCRIM PRE TEXT */ .ggh-hero__text::before { content: ""; position: absolute; inset: -80px -100px; /* Obrovský presah, aby blur nenarazil na okraj */ background: radial-gradient(ellipse at 50% 50%, rgba(4, 24, 39, .85) 0%, rgba(4, 24, 39, .35) 40%, rgba(4, 24, 39, 0) 70%); /* Zmizne už na 70% rozlohy */ z-index: -1; filter: blur(25px); /* Silný blur odstráni ostré tvary (fľak) */ pointer-events: none; } /* zlatá vertikálna linka */ .ggh-hero__text::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gg-gold, #b39d77) 0%, rgba(179, 157, 119, .15) 100%); } /* LEAD — prvá veta: väčšia, výraznejšia */ .ggh-hero__lead { margin: 0 0 14px; font-size: 19px; line-height: 1.55; color: var(--gg-white, #ffffff); text-shadow: 0 1px 8px rgba(4, 24, 39, .8); } .ggh-hero__lead strong { color: var(--gg-gold, #b39d77); font-weight: 700; } /* zvyšok textu — menší, vzdušný */ .ggh-hero__text p { margin: 0; font-size: 18.5px; line-height: 1.85; text-shadow: 0 1px 6px rgba(4, 24, 39, .8); } /* ---------- CTA TLAČIDLÁ ---------- */ .ggh-hero__cta { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; } /* primárne — plné zlaté */ .ggh-btn { display: inline-block; padding: 11px 30px; border: 1px solid var(--gg-gold, #b39d77); border-radius: 50px; background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all .3s ease; text-shadow: none; } .ggh-btn:hover { background: var(--gg-gold-light, #c9b58f); border-color: var(--gg-gold-light, #c9b58f); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(179, 157, 119, .35); } /* sekundárne — outline */ .ggh-btn--ghost { background: transparent; color: var(--gg-gold, #b39d77); } .ggh-btn--ghost:hover { background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 991px) { .ggh-hero__inner { padding: 80px 5%; min-height: 440px; } .ggh-hero__text { width: 52%; } .ggh-hero__lead { font-size: 17px; } } @media (max-width: 767px) { .ggh-hero { --ggh-side: 0%; margin: 0 auto 16px; /* mobil: hero pod headerom prekryvajuco — zámer */ margin: 0px auto; padding-top: 60px; padding-bottom: 30px; border-radius: 0 0 50px 50px; border-bottom: 1px solid var(--gg-gold, #b39d77); } .ggh-hero__bg img { object-position: var(--ggh-bg-pos-m); } .ggh-hero__inner { flex-direction: column; justify-content: center; padding: 32px 22px; text-align: center; gap: 32px; min-height: 70svh; /* 75 % výšky obrazovky — svh = stabilná mobilná výška (nezohľadňuje miznúci browser bar); fallback pre staršie prehliadače nižšie */ min-height: 70vh; min-height: 70svh; } .ggh-hero__logo { width: 290px; } /* zmenšený scrim pre logo na mobile */ .ggh-hero__logo::before { inset: -30px -30px; filter: blur(15px); } .ggh-hero__text { width: 100%; padding-left: 0; } .ggh-hero__text::after { display: none; } /* scrim na mobile centrovaný pod celým textom */ .ggh-hero__text::before { inset: -40px -20px; background: radial-gradient(ellipse at 50% 50%, rgba(4, 24, 39, .80) 0%, rgba(4, 24, 39, .30) 50%, rgba(4, 24, 39, 0) 80%); filter: blur(20px); } .ggh-hero__lead { font-size: 15px; margin-bottom: 10px; } .ggh-hero__text p { font-size: 15px; line-height: 1.75; } .ggh-hero__cta { justify-content: center; margin-top: 45px; flex-wrap: nowrap; gap: 10px; } .ggh-btn { padding: 10px 18px; font-size: 11.5px; letter-spacing: 1px; white-space: nowrap; flex: 0 1 auto; } } /* ================================================================ SEKCIA: O NÁS ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggn-section { color: var(--gg-text, #e8edf2); padding: 60px 20px; } .ggn-container { max-width: 1000px; margin: 0 auto; } /* ---------- NADPIS SEKCIE ---------- */ .ggn-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 70px; } .ggn-title::before, .ggn-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } .ggn-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } .ggn-title img.ggn-title__logo { height: 30px !important; /* veľkosť malého loga */ width: auto !important; max-width: none; flex: 0 0 auto; } /* ---------- GRID ---------- */ .ggn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 40px; text-align: center; } /* ---------- IKONA ---------- */ .ggn-icon { width: 110px; height: 110px; margin: 0 auto 26px; color: var(--gg-gold, #b39d77); } .ggn-icon svg { width: 100%; height: 100%; display: block; } /* ---------- TEXTY — VŠETKO ZLATÉ ---------- */ /* veľká hodnota — ZLATÁ, nie biela */ .ggn-value { color: var(--gg-gold, #b39d77); text-transform: uppercase; font-size: 30px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; } /* malý doplnok POD hodnotou */ .ggn-sub { display: block; color: var(--gg-gold, #b39d77); text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: 2px; margin-top: 6px; } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 991px) { .ggn-stats { gap: 56px 24px; } .ggn-icon { width: 95px; height: 95px; } .ggn-value { font-size: 24px; } } @media (max-width: 767px) { .ggn-section { padding: 40px 16px; } .ggn-title { margin-bottom: 50px; } .ggn-title::before, .ggn-title::after { max-width: 60px; } .ggn-stats { grid-template-columns: repeat(2, 1fr); gap: 44px 16px; } .ggn-icon { width: 80px; height: 80px; margin-bottom: 18px; } .ggn-value { font-size: 20px; letter-spacing: 1.5px; } .ggn-sub { font-size: 11px; letter-spacing: 1.5px; } } /* ================================================================ SEKCIA: HISTÓRIA ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggt-section { color: var(--gg-text, #e8edf2); padding: 60px 20px; } .ggt-container { max-width: 1140px; margin: 0 auto; } /* ---------- NADPIS SEKCIE (s malým logom) ---------- */ .ggt-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 40px; } .ggt-title::before, .ggt-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } .ggt-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } .ggt-title img.ggt-title__logo { height: 30px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } /* ---------- SCROLL OBAL (desktop aj mobil) ---------- Pri 11 milnikoch sa timeline nezmesti do kontajnera — horizontalny scroll je aj na desktope (tenky zlaty scrollbar + fade okraje signalizuju pokracovanie). */ .ggt-scroll { position: relative; overflow-x: auto; scrollbar-width: none; /* scrollbar skryty — posun riesia sipky a drag myskou */ cursor: grab; } .ggt-scroll::-webkit-scrollbar { display: none; } .ggt-scroll.is-drag { cursor: grabbing; user-select: none; } /* ================================================================ TIMELINE ================================================================ */ .ggt-line { --line-y: 150px; --photo: 90px; --stem: 24px; position: relative; height: 300px; display: flex; justify-content: space-between; width: max-content; /* FIX: ciara cez cely obsah, nie len sirku kontajnera */ min-width: 100%; padding-right: 440px; /* docentrovanie posledneho roka: ~polovica kontajnera minus polovica polozky; ciara pokracuje aj cez tento priestor */ } .ggt-line::before { content: ""; position: absolute; left: 0; right: 0; top: var(--line-y); height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } /* ---------- POLOŽKA ---------- min-width: dost miesta pre otvorenu fotku + text vedla — texty sa neprekryvaju ani ked su vsetky milniky otvorene */ .ggt-item { position: relative; flex: 1 0 auto; min-width: 300px; } /* ---------- BODKA — klikateľná, pulzujúca ---------- */ .ggt-dot { position: absolute; left: 50%; top: var(--line-y); transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--gg-gold, #b39d77); z-index: 2; border: none; padding: 0; cursor: pointer; } .ggt-dot::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; } .ggt-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gg-gold, #b39d77); animation: ggt-pulse 2.2s ease-out infinite; pointer-events: none; } @keyframes ggt-pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } .ggt-item.is-open .ggt-dot::after { animation: none; opacity: 0; } .ggt-item.is-open .ggt-dot { cursor: default; } /* ---------- MÉDIÁ BLOK ---------- */ .ggt-media { position: absolute; left: 50%; transform: translateX(calc(var(--photo) / -2)); display: flex; align-items: center; gap: 14px; white-space: nowrap; } .ggt-item--up .ggt-media { bottom: calc(100% - var(--line-y) + var(--stem)); } .ggt-item--down .ggt-media { top: calc(var(--line-y) + var(--stem)); } /* zrkadlová varianta pre míľnik pri pravom okraji (DESKTOP) */ .ggt-media--left { flex-direction: row-reverse; transform: translateX(calc(var(--photo) / 2)); left: auto; right: 50%; } .ggt-media--left > div { text-align: right; } .ggt-photo { width: var(--photo); height: var(--photo); border-radius: 50%; overflow: hidden; border: 2px solid var(--gg-gold, #b39d77); flex: 0 0 auto; background: var(--gg-navy-dark, #041827); } .ggt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ggt-media .ggt-year { color: var(--gg-gold, #b39d77); font-size: 26px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; } .ggt-label { color: var(--gg-gold, #b39d77); text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; line-height: 1.5; margin-top: 4px; opacity: .85; } .ggt-stem { position: absolute; left: 50%; width: 1px; height: var(--stem); background: var(--gg-gold, #b39d77); opacity: .7; } .ggt-item--up .ggt-stem { top: calc(var(--line-y) - var(--stem)); } .ggt-item--down .ggt-stem { top: var(--line-y); } /* ---------- SAMOTNÝ ROK ---------- */ .ggt-plain { position: absolute; left: 50%; transform: translateX(-50%); background: none; border: none; padding: 4px 8px; color: var(--gg-gold, #b39d77); font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; cursor: pointer; transition: text-shadow .3s ease, color .3s ease; } .ggt-item--up .ggt-plain { bottom: calc(100% - var(--line-y) + 16px); } .ggt-item--down .ggt-plain { top: calc(var(--line-y) + 16px); } .ggt-plain:hover { color: var(--gg-gold-light, #c9b58f); text-shadow: 0 0 18px rgba(179, 157, 119, .55); } /* ---------- PREPÍNANIE ROK ↔ MÍĽNIK ---------- */ .ggt-item .ggt-media, .ggt-item .ggt-stem { display: none; } .ggt-item.is-open .ggt-plain { display: none; } .ggt-item.is-open .ggt-media { display: flex; animation: ggt-in .35s ease; } .ggt-item.is-open .ggt-stem { display: block; animation: ggt-fade .35s ease; } @keyframes ggt-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ggt-fade { from { opacity: 0; } to { opacity: .7; } } .ggt-item.is-open .ggt-media { cursor: pointer; } /* ---------- MOBILNÝ SWIPE HINT ---------- */ .ggt-hint { display: none; } /* ================================================================ MOBIL (≤767px) ================================================================ */ @media (max-width: 767px) { .ggt-section { padding: 40px 0; } .ggt-title { margin-bottom: 30px; padding: 0 20px; } .ggt-title::before, .ggt-title::after { max-width: 60px; } .ggt-title img.ggt-title__logo { height: 30px !important; } .ggt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* scroll-snap ODSTRANENY — sposoboval "zasekavanie" swipu na bodkach; posuvanie je teraz plne plynule */ } .ggt-scroll::-webkit-scrollbar { display: none; } .ggt-line { --line-y: 130px; --photo: 68px; --stem: 18px; height: 260px; min-width: 900px; padding: 0 50vw 0 24px; /* 50vw vpravo — posledný rok sa dá docentrovať na stred obrazovky */ } /* čiara ide od ľavého okraja AŽ ZA posledný rok — pokračuje do 50vw priestoru (right: 24px = takmer po koniec scrollovateľnej plochy) */ .ggt-line::before { left: 24px; right: 24px; } .ggt-item { min-width: 110px; } /* mobilný RESET zrkadlovej varianty posledného míľnika — text ide NAPRAVO od fotky (vpravo je 50vw miesta), žiadne prekrývanie s predchádzajúcim textom */ .ggt-media--left { flex-direction: row; transform: translateX(calc(var(--photo) / -2)); left: 50%; right: auto; } .ggt-media--left > div { text-align: left; } .ggt-media .ggt-year { font-size: 20px; } .ggt-label { font-size: 9px; font-weight: 500; } .ggt-plain { font-size: 19px; } .ggt-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; color: var(--gg-gold, #b39d77); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .75; } .ggt-hint::before, .ggt-hint::after { font-size: 14px; animation: ggt-hint-sway 1.8s ease-in-out infinite; } .ggt-hint::before { content: "⟵"; } .ggt-hint::after { content: "⟶"; animation-delay: .9s; } @keyframes ggt-hint-sway { 0%, 100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(4px); opacity: 1; } } } /* POZNAMKA: prefers-reduced-motion blok ODSTRANENY na ziadost vedenia — animacie bezia na vsetkych zariadeniach bez ohladu na systemove nastavenie obmedzenia pohybu. */ /* ---------- TBD kruh (zaverecny teaser) ---------- Monogram namiesto fotky: contain + padding, jemny zlaty nadych */ .ggt-photo--tbd { background: rgba(179, 157, 119, .10); } .ggt-photo--tbd img { object-fit: contain; padding: 16px; } /* ---------- SIPKY TIMELINE (len desktop) ---------- Klikatelne pulzujuce sipky po stranach — posuvaju timeline o ~2 polozky. JS ich skryva na zaciatku/konci (is-hidden). */ .ggt-arrow { position: absolute; top: 150px; /* = --line-y */ transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gg-gold, #b39d77); background: rgba(4, 24, 39, .85); color: var(--gg-gold, #b39d77); font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .3s ease, background .3s ease, color .3s ease; animation: ggt-arrow-pulse 2.4s ease-in-out infinite; } .ggt-arrow--prev { left: -8px; } .ggt-arrow--next { right: -8px; } .ggt-arrow:hover { background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); } .ggt-arrow.is-hidden { opacity: 0; pointer-events: none; } @keyframes ggt-arrow-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 157, 119, .35); } 50% { box-shadow: 0 0 0 12px rgba(179, 157, 119, 0); } } @media (max-width: 767px) { .ggt-arrow { display: none; } /* mobil: swipe prstom */ } /* ---------- FADE OKRAJE pre mobilný swipe ---------- */ .ggt-fade { position: relative; } /* ================================================================ SEKCIA: PORTFÓLIO ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggp-section { color: var(--gg-text, #e8edf2); padding: 60px 20px; } .ggp-container { max-width: 1140px; margin: 0 auto; } /* ---------- NADPIS SEKCIE (s malým logom) ---------- */ .ggp-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 60px; } .ggp-title::before, .ggp-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } .ggp-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } .ggp-title img.ggp-title__logo { height: 26px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } /* ---------- BUTTON (outline zlatý pill) ---------- */ .ggp-btn { display: inline-block; padding: 8px 26px; border: 1px solid var(--gg-gold, #b39d77); border-radius: 50px; color: var(--gg-gold, #b39d77); font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 1px; background: transparent; cursor: pointer; transition: all .3s ease; text-decoration: none; } .ggp-btn:hover { background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); } /* ---------- FLOAT ANIMÁCIA OBRÁZKOV ---------- */ @keyframes ggp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ================================================================ KARTA — zatvorený stav (DESKTOP) ================================================================ */ .ggp-card { position: relative; display: flex; align-items: stretch; background: transparent; margin-bottom: 44px; /* Hover animácia nadvihnutia pre celú kartu */ transition: transform 0.3s ease; } .ggp-card--reverse { flex-direction: row-reverse; } /* Spoločný hover efekt pre kartu a obrázok */ .ggp-card:hover { transform: translateY(-5px); } .ggp-card:hover .ggp-card__body { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } .ggp-card:hover .ggp-card__img { box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45); } /* obrázok: samostatný zaoblený prvok */ .ggp-card__img { flex: 0 0 50%; position: relative; z-index: 2; margin-top: -18px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); align-self: flex-start; animation: ggp-float 7s ease-in-out infinite; transition: box-shadow 0.3s ease; } .ggp-pair:nth-child(even) .ggp-card__img { animation-duration: 9s; animation-delay: 1.5s; } .ggp-card__img img { width: 100%; height: 235px; object-fit: cover; display: block; } .ggp-card .ggp-card__img { margin-right: -34px; } .ggp-card--reverse .ggp-card__img { margin-right: 0; margin-left: -34px; } /* MODRÁ KARTA (Vylepšený vizuál) */ .ggp-card__body { flex: 1; /* Nový premium gradient a okraje */ background: linear-gradient(145deg, #173347 0%, #102331 100%); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: box-shadow 0.3s ease; border-radius: 20px; margin-top: 18px; padding: 30px 40px 30px 70px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; min-height: 230px; } .ggp-card--reverse .ggp-card__body { padding: 30px 70px 30px 40px; } .ggp-card__title { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 2px; font-size: 17px; font-weight: 700; margin: 0; } .ggp-card__body p { margin: 0; color: var(--gg-text, #e8edf2); font-size: 17.5px; line-height: 1.7; } /* ================================================================ POPUP — rozbalený stav (zlatý) ================================================================ */ /* ================================================================ POPUP — rozbalený stav (GLASSMORPHISM, zlato tónovaný) Polopriehľadné zlaté sklo: backdrop blur rozmaže atmosféru presvitajúcu spoza popupu (bodky, aurora). Svetlá horná hrana + jemný zlatý border + highlight = sklenená hĺbka. ================================================================ */ .ggp-popup { position: relative; display: flex; align-items: center; gap: 40px; /* zlaté tónované sklo — polopriehľadná zlatá s highlightom */ background: radial-gradient(ellipse 90% 130% at 12% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 55%), linear-gradient(135deg, rgba(179, 157, 119, 0.82) 0%, rgba(163, 140, 102, 0.78) 100%); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.28); border-radius: 20px; padding: 36px 40px; margin-bottom: 44px; color: var(--gg-white, #ffffff); min-height: 253px; box-sizing: border-box; overflow: hidden; /* oreže vodoznak */ } /* veľký monogram — vodoznak v pravej časti */ .ggp-popup::before { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 300px; height: 300px; background: url('../img/gg-monogram.webp') center / contain no-repeat; opacity: 0.07; pointer-events: none; z-index: 0; } /* obsah popupu nad dekoráciami */ .ggp-popup > * { position: relative; z-index: 1; } .ggp-popup__brand { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .ggp-popup__brand > img { max-width: 180px; height: auto; } /* ---------- SOCIAL IKONY (obrázky z Media Library) ---------- */ .ggp-popup__links { display: flex; align-items: center; gap: 14px; } .ggp-popup__links a { display: block; line-height: 0; transition: opacity .3s ease, transform .3s ease; } .ggp-popup__links a img { width: 28px; height: 28px; display: block; object-fit: contain; } .ggp-popup__links a:hover { opacity: .7; transform: translateY(-2px); } .ggp-popup__web { display: inline-block; padding: 5px 20px; border: 1px solid var(--gg-white, #ffffff); border-radius: 50px; color: var(--gg-white, #ffffff); font-size: 13px; text-decoration: none; transition: all .3s ease; } .ggp-popup__web:hover { background: var(--gg-white, #ffffff); color: var(--gg-gold, #b39d77); } .ggp-popup__text p { margin: 0; color: var(--gg-white, #ffffff); font-size: 17px; line-height: 1.7; } .ggp-popup__close { position: absolute; top: 18px; right: 22px; background: none; border: none; color: var(--gg-white, #ffffff); font-size: 26px; line-height: 1; cursor: pointer; transition: color .3s ease; z-index: 2; } .ggp-popup__close:hover { color: var(--gg-navy-dark, #041827); } /* ---------- PREPÍNANIE KARTA ↔ POPUP ---------- Plynulé oboma smermi: - otvorenie: POMALÝ fade-in + pripláva zdola (.7s) - zatvorenie: fade-out + posun dole (.45s, trieda is-closing), display sa vypína až po skončení animácie (rieši JS), potom karta mäkko fade-in naspäť (is-returning) */ .ggp-pair .ggp-popup { display: none; } .ggp-pair.is-open .ggp-card { display: none; } .ggp-pair.is-open .ggp-popup { display: flex; animation: ggp-in .7s cubic-bezier(.25, .6, .3, 1) both; } /* zatváranie: popup ešte vidno, hrá fade-out */ .ggp-pair.is-closing .ggp-card { display: none; } .ggp-pair.is-closing .ggp-popup { display: flex; animation: ggp-out .45s ease forwards; pointer-events: none; /* počas zatvárania neklikateľný */ } /* karta sa po zatvorení vracia mäkko */ .ggp-pair.is-returning .ggp-card { animation: ggp-card-in .55s ease both; } @keyframes ggp-in { 0% { opacity: 0; transform: translateY(22px) scale(.985); } 60% { opacity: .85; } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ggp-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } } @keyframes ggp-card-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* POZNAMKA: prefers-reduced-motion blok ODSTRANENY na ziadost vedenia — animacie bezia na vsetkych zariadeniach bez ohladu na systemove nastavenie obmedzenia pohybu. */ /* ================================================================ MOBIL (≤767px) ================================================================ */ @media (max-width: 767px) { .ggp-section { padding: 40px 16px; } .ggp-title { margin-bottom: 40px; } .ggp-title::before, .ggp-title::after { max-width: 60px; } .ggp-title img.ggp-title__logo { height: 30px !important; } .ggp-card, .ggp-card--reverse { flex-direction: column; margin-bottom: 44px; } /* Zrušenie hover pohybu na mobiloch kvôli plynulosti */ .ggp-card:hover { transform: none; } .ggp-card .ggp-card__img, .ggp-card--reverse .ggp-card__img { flex: none; margin: 0 18px; align-self: auto; z-index: 2; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .ggp-card__img img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; } .ggp-card__body, .ggp-card--reverse .ggp-card__body { position: relative; z-index: 1; /* Gradient aplikovaný aj na mobilnú verziu */ background: linear-gradient(145deg, #173347 0%, #102331 100%); border-radius: 18px; margin: -50px 0 0; padding: 70px 22px 26px; gap: 10px; justify-content: flex-start; min-height: 0; } .ggp-card__title { font-size: 14px; } .ggp-card__body p { font-size: 16px; line-height: 1.65; } .ggp-popup { flex-direction: column; padding: 30px 24px 28px; gap: 20px; } /* Vycentrovanie brand bloku (logo, ikonky, doména) na mobile */ .ggp-popup__brand { flex: none; align-items: center; width: 100%; text-align: center; } .ggp-popup__brand > img { max-width: 150px; margin-bottom: -20px; } .ggp-popup__links a img { width: 30px; height: 30px; margin-top: 25px; } .ggp-popup__text p { font-size: 16px; line-height: 1.7; } .ggp-popup__close { top: 14px; right: 16px; } } /* ================================================================ SEKCIA: HODNOTY ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggv-section { padding: 60px 20px; overflow-x: hidden; } .ggv-container { max-width: 1140px; margin: 0 auto; } /* ---------- NADPIS SEKCIE (s malým logom) ---------- */ .ggv-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 50px; } .ggv-title::before, .ggv-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: #b39d77; opacity: .6; } .ggv-title span { color: #b39d77; text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } /* malé logo pri nadpise — zosilnený selektor + !important, aby ho neprebili Elementor img štýly */ .ggv-title img.ggv-title__logo { height: 30px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } /* ---------- CLUSTER (desktop) ---------- */ .ggv-cluster { position: relative; width: 700px; height: 790px; margin: 0 auto; } .ggv-item { position: absolute; left: var(--x); top: var(--y); will-change: transform; } /* ---------- KRUH ---------- */ .ggv-bubble { display: flex; align-items: center; justify-content: center; text-align: center; width: var(--size, 230px); height: var(--size, 230px); padding: 28px; border: 3px solid #b39d77; border-radius: 50%; background: #041827; color: #b39d77; font-family: inherit; text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--fs, 18px); font-weight: 700; line-height: 1.35; cursor: pointer; transition: background .9s ease, color .9s ease, box-shadow .9s ease; } .ggv-bubble:hover { box-shadow: 0 0 30px rgba(179, 157, 119, .35); } .ggv-item.is-open { z-index: 5; } .ggv-item.is-open .ggv-bubble { background: #b39d77; color: #041827; box-shadow: 0 0 40px rgba(179, 157, 119, .45); } /* ---------- BOČNÝ TEXT (desktop) ---------- */ .ggv-text { position: absolute; top: 50%; width: 270px; color: #e8edf2; font-size: 17px; line-height: 1.7; opacity: 0; pointer-events: none; transition: opacity .45s ease .25s, transform .45s ease .25s; z-index: 6; } .ggv-text::before { content: ""; position: absolute; top: 50%; width: 30px; height: 1px; background: #b39d77; opacity: .7; } .ggv-text::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #b39d77; } .ggv-item--text-right .ggv-text { left: calc(var(--size, 230px) + 46px); transform: translate(-14px, -50%); } .ggv-item--text-right .ggv-text::before { left: -38px; } .ggv-item--text-right .ggv-text::after { left: -42px; } .ggv-item--text-left .ggv-text { right: calc(var(--size, 230px) + 46px); transform: translate(14px, -50%); text-align: right; } .ggv-item--text-left .ggv-text::before { right: -38px; } .ggv-item--text-left .ggv-text::after { right: -42px; } .ggv-item.is-open .ggv-text { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } .ggv-text strong { display: none; } /* ================================================================ MOBIL (≤767px): guličky cik-cak, AUTO-otváranie scrollom ================================================================ */ @media (max-width: 767px) { .ggv-section { padding: 40px 0; } .ggv-title { margin-bottom: 32px; padding: 0 16px; } .ggv-title::before, .ggv-title::after { max-width: 60px; } .ggv-title img.ggv-title__logo { height: 30px !important; } .ggv-cluster { width: 100%; height: auto; display: flex; flex-direction: column; gap: 6px; } .ggv-item, .ggv-item--text-right, .ggv-item--text-left { position: relative; left: auto; top: auto; transform: none !important; display: block; width: 100%; min-height: 0; transition: margin .5s ease; } .ggv-item.is-neighbor-above { margin-bottom: 26px; } .ggv-item.is-neighbor-below { margin-top: 26px; } /* ---------- GULIČKA ---------- Auto režim: nie je klikateľná (otvára ju scroll) */ .ggv-bubble { --bub: min(46vw, 210px); width: var(--bub); height: var(--bub); min-width: var(--bub); font-size: clamp(11px, 3.4vw, 15px); padding: 14px; letter-spacing: 1px; border-width: 2px; cursor: default; pointer-events: none; position: relative; display: flex; margin-left: 4vw; margin-right: auto; transition: background .9s ease, color .9s ease, box-shadow .9s ease, width .6s ease, height .6s ease, min-width .6s ease; } .ggv-item--m-right .ggv-bubble { margin-left: auto; margin-right: 4vw; } /* OTVORENÝ STAV: gulička sa reálne zmenší, vyfarbí */ .ggv-item.is-open .ggv-bubble { --bub-open: min(34vw, 150px); width: var(--bub-open); height: var(--bub-open); min-width: var(--bub-open); font-size: clamp(10px, 2.9vw, 13px); background: #b39d77; color: #041827; box-shadow: 0 0 30px rgba(179, 157, 119, .4); } /* ---------- TEXT: opačná strana, skrytý v defaulte ---------- */ .ggv-item--text-right .ggv-text, .ggv-item--text-left .ggv-text, .ggv-item.is-open .ggv-text { position: absolute; top: 50%; width: calc(100vw - min(34vw, 150px) - 4vw - 3vw - 34px); min-width: 0; font-size: 13px; line-height: 1.55; text-align: left; opacity: 0; pointer-events: none; } .ggv-item .ggv-text { right: 3vw; left: auto; transform: translate(10px, -50%); transition: opacity .5s ease .3s, transform .5s ease .3s; } .ggv-item--m-right .ggv-text { left: 3vw; right: auto; transform: translate(-10px, -50%); } .ggv-item.is-open .ggv-text { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } /* spojka: čiara + bodka od textu ku guličke */ .ggv-item .ggv-text::before { content: ""; position: absolute; top: 50%; width: 16px; height: 1px; background: #b39d77; opacity: .7; left: -22px; right: auto; } .ggv-item .ggv-text::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #b39d77; left: -9px; right: auto; } .ggv-item--m-right .ggv-text::before { right: -22px; left: auto; } .ggv-item--m-right .ggv-text::after { right: -9px; left: auto; } .ggv-text strong { display: none; } } /* ================================================================ SEKCIA: TÍM ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggm-section { color: var(--gg-text, #e8edf2); padding: 60px 20px; } .ggm-container { max-width: 1140px; margin: 0 auto; } /* ---------- NADPIS SEKCIE (s malým logom) ---------- */ .ggm-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 60px; } .ggm-title::before, .ggm-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } .ggm-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } /* malé logo pri nadpise — zosilnený selektor + !important, aby ho neprebili Elementor img štýly */ .ggm-title img.ggm-title__logo { height: 30px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } /* ---------- GRID ČLENOV ---------- */ .ggm-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 30px; text-align: center; } .ggm-member__name { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 16.5px; margin-bottom: 8px; } .ggm-member__role { color: var(--gg-text-muted, #a9b6c2); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13.5px; line-height: 1.5; } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 991px) { .ggm-team { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ggm-section { padding: 40px 16px; } .ggm-title { margin-bottom: 44px; } .ggm-title::before, .ggm-title::after { max-width: 60px; } .ggm-title img.ggm-title__logo { height: 30px !important; } .ggm-team { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; } .ggm-member__name { font-size: 13px; letter-spacing: 1.5px; } .ggm-member__role { font-size: 12px; letter-spacing: 1px; } } /* ================================================================ SEKCIA: KARIÉRA ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggj-section { color: var(--gg-text, #e8edf2); padding: 60px 20px; } .ggj-container { max-width: 1140px; margin: 0 auto; } /* ---------- NADPIS SEKCIE ---------- */ .ggj-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 60px; } .ggj-title::before, .ggj-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } /* male logo pri nadpise — rovnaky vzor ako ostatne sekcie */ .ggj-title img.ggj-title__logo { height: 26px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } .ggj-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } /* ---------- JOB RIADOK (Vylepšený vizuál) ---------- */ .ggj-job { display: flex; align-items: center; justify-content: space-between; gap: 30px; /* Nové pozadie: Jemný prechod pre lepšiu textúru */ background: linear-gradient(145deg, #173347 0%, #102331 100%); /* Jemný obrys a tieň pre 3D efekt */ border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); border-radius: var(--gg-radius, 20px); padding: 24px 32px; margin-bottom: 20px; /* Animácia pre prejdenie myšou */ transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Efekt nadvihnutia pri hoveri */ .ggj-job:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } .ggj-job__company { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 600; } .ggj-job__position { color: var(--gg-white, #ffffff); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 15px; margin: 4px 0; } .ggj-job__level { color: var(--gg-text-muted, #a9b6c2); font-size: 13px; } /* ---------- META ÚDAJE (Upravené pre zvislú čiaru) ---------- */ .ggj-job__meta { color: var(--gg-text, #e8edf2); font-size: 14px; line-height: 1.6; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; /* Medzera medzi jednotlivými údajmi */ } /* Zvislá čiara pridaná automaticky za každý údaj okrem posledného */ .ggj-job__meta span:not(:last-child)::after { content: "|"; color: var(--gg-gold, #b39d77); opacity: 0.4; margin-left: 12px; font-weight: 300; } /* ---------- BUTTON ---------- */ .ggj-btn { display: inline-block; flex: 0 0 auto; padding: 8px 26px; border: 1px solid var(--gg-gold, #b39d77); border-radius: 50px; background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-decoration: none; cursor: pointer; transition: all .3s ease; white-space: nowrap; } .ggj-btn:hover { background: var(--gg-gold-light, #c9b58f); border-color: var(--gg-gold-light, #c9b58f); color: var(--gg-navy-dark, #041827); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 767px) { .ggj-section { padding: 40px 16px; } .ggj-title { margin-bottom: 44px; } .ggj-title img.ggj-title__logo { height: 30px !important; } .ggj-title::before, .ggj-title::after { max-width: 60px; } .ggj-job { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; } /* Upravená medzera na mobile pre meta údaje */ .ggj-job__meta { gap: 8px 12px; } .ggj-job__meta span:not(:last-child)::after { margin-left: 12px; } .ggj-btn { align-self: stretch; text-align: center; margin-top: 4px; } } /* ================================================================ SEKCIA: KONTAKT ================================================================ */ /* ---------- OBAL SEKCIE ---------- */ .ggk-section { color: var(--gg-text, #e8edf2); padding: 60px 20px 80px; } .ggk-container { max-width: 1140px; margin: 0 auto; text-align: center; } /* ---------- NADPIS SEKCIE ---------- */ .ggk-title { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 40px; } .ggk-title::before, .ggk-title::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--gg-gold, #b39d77); opacity: .6; } .ggk-title span { color: var(--gg-gold, #b39d77); text-transform: uppercase; letter-spacing: 3px; font-size: 18px; font-weight: 500; white-space: nowrap; } /* ---------- ADRESA ---------- */ .ggk-address { display: inline-block; margin: 0; color: var(--gg-text, #e8edf2); font-size: 15px; letter-spacing: .5px; line-height: 1.8; font-style: normal; /*
je default kurzíva */ text-decoration: none; transition: color .3s ease; } /* klikateľná verzia (odkaz na mapy) */ a.ggk-address:hover { color: var(--gg-gold, #b39d77); } /* ---------- EMAIL pod adresou ---------- */ .ggk-email { display: block; margin-top: 14px; color: var(--gg-gold, #b39d77); font-size: 15px; letter-spacing: .5px; text-decoration: none; transition: color .3s ease; } .ggk-email:hover { color: var(--gg-gold-light, #c9b58f); } /* ---------- RESPONZIVITA ---------- */ @media (max-width: 767px) { .ggk-section { padding: 40px 16px 60px; } .ggk-title { margin-bottom: 30px; } .ggk-title::before, .ggk-title::after { max-width: 60px; } .ggk-email { font-size: 14px; } .ggk-address { font-size: 14px; max-width: 300px; /* adresa sa pekne zalomí na 2-3 riadky */ } } /* ================================================================ KONTAKT — doplnky pre statickú verziu (logo v nadpise + madaja podpis v pätičke sekcie) ================================================================ */ .ggk-title img.ggk-title__logo { height: 26px !important; width: auto !important; max-width: none; flex: 0 0 auto; margin-right: -12px; } @media (max-width: 767px) { .ggk-title img.ggk-title__logo { height: 30px !important; } } /* copyright riadok — tlmený, decentný záver stránky */ .ggk-copy { margin: 46px 0 0; color: var(--gg-text-muted, #a9b6c2); font-size: 13px; letter-spacing: .5px; } /* ================================================================ HEADER + MOBILNÉ MENU (ggnav-) — statická verzia ================================================================ DESKTOP (1400px container): monogram 50px vľavo, menu v strede, social ikonky vpravo. Fixný, pri scrolle frosted pozadie. MOBIL (≤991px): plné logo + hamburger. Menu = full-screen panel s FADE in/out, centrovaný obsah (logo, položky, social), zlatá aura + bodky (dizajn podľa off-canvas predlohy). ================================================================ */ .ggnav { --ggnav-h: 76px; position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--ggnav-h); font-family: var(--gg-font, 'Outfit', sans-serif); background: rgba(4, 24, 39, .55); transition: background .35s ease, box-shadow .35s ease; } .ggnav.is-scrolled { background: rgba(4, 24, 39, .85); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); border-bottom: 1px solid rgba(179, 157, 119, .18); } .ggnav__inner { max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } /* ---------- LOGO ---------- */ .ggnav__logo { flex: 1 1 0; /* rovnaka vaha ako pravy kosik — menu je v absolutnom strede */ display: flex; align-items: center; } .ggnav__logo img { height: 50px; width: auto; display: block; } .ggnav__logo--mobile { display: none; } /* ---------- DESKTOP MENU (v strede) ---------- */ .ggnav__menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .ggnav__menu a { display: block; padding: 10px 13px; color: var(--gg-white, #ffffff); text-transform: uppercase; letter-spacing: 1.5px; font-size: 15px; font-weight: 300; text-decoration: none; position: relative; transition: color .3s ease; } .ggnav__menu a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 1px; background: var(--gg-gold, #b39d77); transform: translateX(-50%); transition: width .3s ease; } .ggnav__menu a:hover { color: var(--gg-gold, #b39d77); } .ggnav__menu a:hover::after { width: calc(100% - 26px); } /* ---------- CTA (desktop, vpravo) ---------- GG zatial nema socialne siete — namiesto ikoniek CTA na kontakt. Az siete zalozia, vid komentar v HTML. */ /* pravy kosik — rovnaka vaha ako logo, CTA drzi vpravo */ .ggnav__right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; /* medzera prepínač <-> CTA */ } .ggnav__cta { padding: 9px 22px; border: 1px solid var(--gg-gold, #b39d77); border-radius: 50px; color: var(--gg-gold, #b39d77); font-size: 12.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all .3s ease; } .ggnav__cta:hover { background: var(--gg-gold, #b39d77); color: var(--gg-navy-dark, #041827); } /* ---------- PREPÍNAČ JAZYKA SK | EN ---------- Desktop: v pravom košíku pred CTA tlačidlom. Mobil: v hornej lište vedľa hamburgeru (samostatný prvok s triedou --mobile, desktopový je vtedy skrytý). */ .ggnav__lang { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: 1.5px; white-space: nowrap; } /* aktívny jazyk — zlatý, neklikateľný */ .ggnav__lang-active { color: var(--gg-gold, #b39d77); } /* oddeľovač */ .ggnav__lang-sep { color: var(--gg-gold, #b39d77); opacity: .4; } /* druhý jazyk — tlmený, na hover zlatý */ .ggnav__lang a { color: var(--gg-text-muted, #a9b6c2); text-decoration: none; transition: color .3s ease; } .ggnav__lang a:hover { color: var(--gg-gold, #b39d77); } /* mobilná verzia prepínača — na desktope skrytá */ .ggnav__lang--mobile { display: none; } /* ---------- HAMBURGER ---------- */ .ggnav__burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; } .ggnav__burger span { display: block; height: 2px; width: 100%; background: var(--gg-gold, #b39d77); border-radius: 2px; } /* ================================================================ MOBILNÉ MENU — full-screen FADE panel ================================================================ */ .ggnav__panel { position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column; align-items: center; padding: 60px 30px 44px; background: rgba(4, 24, 39, .96); backdrop-filter: blur(20px) saturate(115%); -webkit-backdrop-filter: blur(20px) saturate(115%); overflow: hidden; overflow-y: auto; /* FADE in/out */ opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; } .ggnav__panel.is-open { opacity: 1; visibility: visible; transition: opacity .4s ease; } /* zlatá aura panelu (statická) */ .ggnav__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(ellipse 85% 55% at 80% 6%, rgba(179, 157, 119, 0.14) 0%, transparent 72%), radial-gradient(ellipse 70% 50% at 12% 92%, rgba(29, 78, 110, 0.28) 0%, transparent 75%), radial-gradient(ellipse 45% 30% at 50% 50%, rgba(179, 157, 119, 0.06) 0%, transparent 70%); } /* zlaté bodky, pomaly stúpajú */ .ggnav__panel::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; /* zladene s atmosferou v6 (vzdialene 2px, bezne 4px, jasne 6px) */ height: 4px; z-index: 0; border-radius: 50%; background: transparent; pointer-events: none; box-shadow: 12vw 22vh 0 0 rgba(201, 181, 143, 0.38), 12vw 122vh 0 0 rgba(201, 181, 143, 0.38), 26vw 62vh 0 0 rgba(179, 157, 119, 0.30), 26vw 162vh 0 0 rgba(179, 157, 119, 0.30), 44vw 35vh 0 1px rgba(212, 195, 160, 0.36), 44vw 135vh 0 1px rgba(212, 195, 160, 0.36), 62vw 78vh 0 0 rgba(179, 157, 119, 0.28), 62vw 178vh 0 0 rgba(179, 157, 119, 0.28), 78vw 28vh 0 0 rgba(201, 181, 143, 0.34), 78vw 128vh 0 0 rgba(201, 181, 143, 0.34), 88vw 88vh 0 -1px rgba(179, 157, 119, 0.22), 88vw 188vh 0 -1px rgba(179, 157, 119, 0.22), 18vw 95vh 0 -1px rgba(179, 157, 119, 0.20), 18vw 195vh 0 -1px rgba(179, 157, 119, 0.20), 55vw 55vh 0 -1px rgba(179, 157, 119, 0.21), 55vw 155vh 0 -1px rgba(179, 157, 119, 0.21), 70vw 12vh 0 0 rgba(201, 181, 143, 0.30), 70vw 112vh 0 0 rgba(201, 181, 143, 0.30), 34vw 85vh 0 0 rgba(179, 157, 119, 0.26), 34vw 185vh 0 0 rgba(179, 157, 119, 0.26), /* --- NOVE body (zladenie s atmosferou v6) --- */ 6vw 45vh 0 0 rgba(201, 181, 143, 0.32), 6vw 145vh 0 0 rgba(201, 181, 143, 0.32), 40vw 15vh 0 1px rgba(212, 195, 160, 0.30), 40vw 115vh 0 1px rgba(212, 195, 160, 0.30), 50vw 92vh 0 0 rgba(179, 157, 119, 0.28), 50vw 192vh 0 0 rgba(179, 157, 119, 0.28), 66vw 42vh 0 -1px rgba(179, 157, 119, 0.22), 66vw 142vh 0 -1px rgba(179, 157, 119, 0.22), 82vw 68vh 0 0 rgba(201, 181, 143, 0.30), 82vw 168vh 0 0 rgba(201, 181, 143, 0.30), 94vw 25vh 0 -1px rgba(179, 157, 119, 0.20), 94vw 125vh 0 -1px rgba(179, 157, 119, 0.20); animation: ggnavBodky 55s linear infinite; will-change: transform; } @keyframes ggnavBodky { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100vh); } } .ggnav__panel > * { position: relative; z-index: 1; } /* X zatvárací */ .ggnav__close { position: absolute; top: 20px; right: 20px; width: 52px; height: 52px; background: none; border: none; color: var(--gg-gold, #b39d77); font-size: 32px; line-height: 1; cursor: pointer; transition: color .3s ease; z-index: 2; } .ggnav__close:hover { color: var(--gg-gold, #b39d77); } /* plné logo v paneli */ .ggnav__plogo { margin: 14px 0 18px; display: block; } .ggnav__plogo img { height: 150px; /* velkost loga v menu — dolad podla oka */ width: auto; display: block; } /* položky menu — centrované pod sebou */ .ggnav__mmenu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; } .ggnav__mmenu a { display: block; padding: 6px 20px; color: var(--gg-white, #ffffff); text-transform: uppercase; letter-spacing: 2px; font-size: 17px; font-weight: 300; text-decoration: none; transition: color .3s ease; } .ggnav__mmenu a:hover { color: var(--gg-gold, #b39d77); } /* zákaz scrollu stránky pod otvoreným menu */ body.ggnav-no-scroll { overflow: hidden !important; } /* ---------- kotvy: sekcie začínajú pod fixným headerom ---------- */ [id="uvod"], [id="o-nas"], [id="historia"], [id="portfolio"], [id="hodnoty"], [id="tim"], [id="kariera"], [id="kontakt"] { scroll-margin-top: 86px; } /* ================================================================ RESPONZIVITA HEADERA ================================================================ */ @media (max-width: 991px) { .ggnav { --ggnav-h: 64px; } .ggnav__menu, .ggnav__right { display: none; } /* prepínač jazyka na mobile — pri hamburgeri */ .ggnav__lang--mobile { display: flex; margin-left: auto; /* pritlačí prepínač k hamburgeru */ margin-right: 0px; font-size: 13px; } .ggnav__burger { display: flex; } .ggnav__logo--desktop { display: none; } .ggnav__logo--mobile { display: flex; } .ggnav__logo--mobile img { height: 34px; } /* širokové logo — výška podľa oka */ [id="uvod"], [id="o-nas"], [id="historia"], [id="portfolio"], [id="hodnoty"], [id="tim"], [id="kariera"], [id="kontakt"] { scroll-margin-top: 72px; } } /* POZNAMKA: prefers-reduced-motion blok ODSTRANENY na ziadost vedenia — animacie bezia na vsetkych zariadeniach bez ohladu na systemove nastavenie obmedzenia pohybu. */