Movement that inspires

<!DOCTYPE html> <html class="no-touch is-preload"> <head> <title>Movement that inspires</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/webfront_kia_newvi/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/webfront_kia_newvi/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/webfront_kia_newvi/favicon/favicon-16x16.png"> <link rel="manifest" href="/assets/webfront_kia_newvi/favicon/site.webmanifest"> <link rel="mask-icon" href="/assets/webfront_kia_newvi/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#374663"> <meta name="theme-color" content="#ffffff"> <link rel="shortcut icon" href="/assets/webfront_kia_newvi/favicon/favicon.ico"> <style> @charset "UTF-8"; @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKL.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKL.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKL.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKM.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKM.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKM.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Kia'; src: url('/assets/webfront_kia_newvi/fonts/DesignKB.woff2') format('woff2'), url('/assets/webfront_kia_newvi/fonts/DesignKB.woff') format('woff'), url('/assets/webfront_kia_newvi/fonts/DesignKB.ttf') format('truetype'); font-weight: 700; font-style: normal; } *, ::before, ::after { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Kia, Tahoma, Verdana, Segoe, sans-serif; color: #05141f; font-size: 16px; font-weight: 400; line-height: 1.6; } @media (min-width: 360px) { body { font-size: 17px; } } @media (min-width: 992px) { body { font-size: 26px; } } .c-story { display: block; height: 100%; max-width: 1920px; margin-left: auto; margin-right: auto; } .c-story__section { display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 100%; padding: 110px 0; background-color: #f6f2ed; } .c-story__section--invert { background-color: #05141f; color: #fff; } .c-story__content { position: relative; z-index: 1; max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; } .c-story__content--lg { font-size: 1.0625em; } @media (min-width: 992px) { .c-story__content { text-align: center; } } .c-story__bg { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .c-story__bg::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); content: ""; } @media (min-width: 992px) { .c-story__bg::after { background: rgba(0,0,0,.6); } } .c-story__bg--brown::after { background: linear-gradient(0deg, rgba(57,50,43,.8) 0%, rgba(57,50,43,.8) 1%, rgba(57,50,43,0) 50%, rgba(57,50,43,0) 100%); } .c-story__bg--green::after { background: linear-gradient(0deg, rgba(37,41,31,.8) 0%, rgba(37,41,31,.8) 1%, rgba(37,41,31,0) 50%, rgba(37,41,31,0) 100%); } .c-story__bg--flat::after { content: unset; } .c-story__bg video, .c-story__bg img { position: relative; vertical-align: top; width: 100%; height: 100%; border: 0; object-fit: cover; } .c-story__bg--scaled video, .c-story__bg--scaled img { top: -20%; height: 140%; } .c-story__img { display: flex; align-items: center; justify-content: center; margin: 0; } .c-story__img img { max-width: 100%; } .c-story__head { display: block; margin: 0; font-size: 1.5em; font-weight: 700; } .c-story__head i { font-weight: 400; } .c-story__text { display: block; margin: 1.5em 0; } .c-story__text:first-child { margin-top: 0; } .c-story__text:last-child { margin-bottom: 0; } .c-story__text-light { opacity: 0.8; } .c-story__section--invert .c-story__text-light { opacity: 0.6; } .c-story__play { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; font-weight: 300; outline: none; cursor: pointer; } .c-story__play::after { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin: 10px auto 0; border: .03em solid; border-radius: 50%; background: rgba(0,0,0,.75) no-repeat 55% 50% / 0.34em auto; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" class=""></path></svg>'); font-family: inherit; color: #fff; font-size: 50px; font-weight: 300; line-height: 1; text-align: center; content: ""; -webkit-transition: .35s ease -webkit-transform; transition: .35s ease transform; } .c-story__play:hover::after { -webkit-transform: scale(1.1); transform: scale(1.1); } @media (min-width: 992px) { .c-story__play::after { font-size: 70px; } } .c-story__article { display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .c-story__article { flex-wrap: nowrap; } } .c-story__article-img { display: flex; align-items: center; justify-content: center; max-width: 400px; margin: 0 10% 3.5em 0; } @media (max-width: 991px) { .c-story__article-img { transform: none !important; } } @media (min-width: 992px) { .c-story__article-img { max-width: 700px; margin: 0; } } .c-story__article-img img { max-width: 100%; } .c-story__article-content { padding-left: 28px; padding-right: 28px; } @media (min-width: 992px) { .c-story__article-content { max-width: 600px; padding-left: 60px; } } @media (min-width: 1200px) { .c-story__article-content { padding-left: 110px; } } .c-story__article-box { max-width: 400px; margin: 0 10% 3.5em 0; padding: 68px 28px; background-color: #ece5dd; } @media (min-width: 992px) { .c-story__article-box { max-width: 700px; margin: 0; padding: 110px 150px; } } .c-story__navbar { position: fixed; z-index: 2; top: 0; right: auto; left: auto; width: 100%; max-width: 1920px; padding: 70px 0 20px; border-bottom: 1px solid rgba(255,255,255,.1); background-color: rgba(0,0,0,.85); color: #fff; text-align: center; -webkit-transition: .75s ease -webkit-transform; transition: .75s ease transform; -webkit-transition-property: -webkit-transform, top; transition-property: transform, top; } @media (min-width: 1200px) { .c-story__navbar { padding-top: 30px; } } .c-story__brand { position: absolute; top: 22px; left: 30px; font-size: 0; } .c-story__brand-title { display: none; margin: 0; font-size: 2.25em; font-weight: 700; line-height: 1.3; text-align: center; } .c-story__nav { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; } .c-story__nav .c-nav__item { display: flex; align-items: center; justify-content: center; } .c-story__nav .c-nav__link { display: block; margin: 0 15px; border-bottom: 1px solid transparent; color: inherit; font-size: 0.75em; font-weight: 300; letter-spacing: 0.15em; text-decoration: none; text-transform: uppercase; } .c-story__nav .c-nav__link:hover, .c-story__nav .c-nav__link.is-active { border-bottom-color: rgba(255,255,255,.5); } .c-story__navbar.is-start { top: 100%; padding-top: 0; padding-bottom: 2em; border: 0; background-color: transparent; transform: translateY(-100%); } .c-story__navbar.is-start .c-story__brand { position: static; font-size: inherit; } .c-story__navbar.is-start .c-story__brand-title { display: block; } .c-story__navbar.is-start .c-story__brand-logo { display: none; } .c-story__navbar.is-start .c-story__nav { margin-top: 2.5em; } .c-story__navbar.is-start .c-story__nav .c-nav__item { flex: 1; } .c-story__navbar.is-start .c-story__nav .c-nav__item::before, .c-story__navbar.is-start .c-story__nav .c-nav__item::after { position: relative; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.2); content: ""; } .c-story__navbar.is-start .c-story__nav .c-nav__link { position: relative; border: 0; opacity: 0.2; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active { opacity: 1; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::before { position: relative; display: block; width: 0.54em; height: 0.54em; margin: 0 auto 0.625em; border-radius: 50%; background-color: #fff; -webkit-animation: blink 1s ease-out infinite; animation: blink 1s ease-out infinite; content: ""; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::after { position: absolute; top: 100%; left: 50%; width: 1.2em; height: 1.2em; margin: 0.3em 0 0 -0.6em; background: 50% 50% / 100% auto no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path></svg>'); -webkit-animation: arrow-down infinite 1.5s; animation: arrow-down infinite 1.5s; content: ""; } @media (min-width: 992px) { .c-story__nav .c-nav__link { font-size: 0.577em; } .c-story__navbar.is-start .c-story__nav .c-nav__link { font-size: 1em; } .c-story__navbar.is-start .c-story__nav .c-nav__link.is-active::before { display: inline-block; vertical-align: middle; margin: -0.15em 0.75em 0 0; } .c-story__navbar.is-start .c-story__nav .c-nav__wrap { white-space: nowrap; } } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes arrow-down { 0% { transform: translateY(0); } 30% { transform: translateY(50%); } 60% { transform: translateY(0); } } .rgk-modal { position: fixed; z-index: 1001; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow-x: hidden; background-color: rgba(0,0,0,.95); color: #fff; -webkit-overflow-scrolling: touch; } .rgk-modal.is-open { display: block; } .rgk-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; } .rgk-modal__shadow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .rgk-modal__header { padding: 20px 24px 0; } .rgk-modal__body { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .rgk-modal__body iframe { width: 100%; height: 100%; } .rgk-modal__footer { display: flex; padding: 0 24px 20px; } .rgk-modal__title { margin: 0; line-height: 1.2; } .rgk-modal__close { position: absolute; top: 1%; right: 1%; width: 1em; height: 1em; border: 0; background: none; margin: 0; padding: 0; overflow: hidden; color: inherit; font-size: 3em; font-weight: normal; line-height: 1em; text-align: center; text-decoration: none; text-indent: 100%; text-shadow: none; white-space: nowrap; -webkit-transition: all .35s, ease; transition: all .35s, ease; -webkit-transition-property: background-color, color, opacity; transition-property: background-color, color, opacity; } .rgk-modal__close::before, .rgk-modal__close::after { position: absolute; top: 50%; left: 50%; width: 50%; height: 0; margin: -1px 0 0 -25%; border-top: 2px solid; content: ""; } .rgk-modal__close::before { transform: rotate(-45deg); } .rgk-modal__close::after { transform: rotate(45deg); } .rgk-modal__close:hover, .rgk-modal__close:focus { cursor: pointer; opacity: 1; } </style> </head> <body>  <div class="c-story"> <nav class="c-story__navbar is-start"> <h1 class="c-story__brand"> <span class="c-story__brand-title">Movement that inspires</span> <a href="/" target="_blank" style="color: inherit;"> <svg class="c-story__brand-logo" viewBox="0 0 100 25" width="100" height="25"> <path fill="currentColor" fill-rule="nonzero" d="M58.02 21.83c0 .19.06.3.17.3.09-.01.17-.05.24-.1L89.6 1.8a3 3 0 011.8-.54h6.85c1.05 0 1.76.7 1.76 1.75v13.08c0 1.58-.35 2.5-1.75 3.34l-8.31 5a.57.57 0 01-.28.1c-.1 0-.2-.08-.2-.37V8.9c0-.18-.05-.3-.17-.3a.47.47 0 00-.24.1L66.28 23.5c-.52.35-1.13.54-1.75.53h-15.1c-1.06 0-1.76-.7-1.76-1.76V3.42c0-.14-.06-.27-.18-.27a.49.49 0 00-.24.1l-15.03 9.02c-.15.1-.19.17-.19.24 0 .06.03.12.13.23L42.9 23.47c.14.14.24.25.24.37 0 .1-.16.18-.35.18h-9.7c-.76 0-1.35-.11-1.76-.52L24.82 17a.28.28 0 00-.2-.1.43.43 0 00-.2.06L13.54 23.5c-.66.4-1.11.51-1.76.51H1.77C.7 24.02 0 23.31 0 22.26V9.43c0-1.59.35-2.5 1.76-3.34l8.36-5.02a.43.43 0 01.22-.07c.13 0 .2.13.2.42V18.6c0 .18.04.26.17.26a.6.6 0 00.25-.1L39.2 1.77c.54-.37 1.2-.55 1.86-.52h15.2c1.05 0 1.76.7 1.76 1.75l-.01 18.83z"/> </svg> </a> </h1> <ul id="storyNav" class="c-story__nav c-nav"> <li class="c-nav__item"> <a href="#pageBrandManifesto" class="c-nav__link">Zīmola manifests</a> </li> <li class="c-nav__item"> <a href="#pageBrandStory" class="c-nav__link">Zīmola stāsts</a> </li> <li class="c-nav__item"> <a href="#pageBrandMindset" class="c-nav__link">Zīmola domāšana</a> </li> </ul> </nav> <section class="c-story__section c-story__section--invert" id="pageBrandManifesto"> <div class="c-story__content">  </div> <div class="c-story__bg">  <img src="/upload/manifesto/brand-manifesto-cover-lg.jpg" alt=""> </div> </section> <section class="c-story__section c-story__section--invert"> <div class="c-story__content c-story__content--lg"> <p class="c-story__text">Visas radošās aktivitātes sākas ar kustību!</p> <p class="c-story__text"><span class="c-story__text-light">Esot kustības dizaineriem ar vīziju radīt ilgtspējīgas mobilitātes risinājumus, Kia mērķis ir piegādāt</span> novatoriskus produktus, <span class="c-story__text-light">kas jūs iedvesmo, kad esat kustībā, un</span> nodrošināt ērtus un jēgpilnus pakalpojumus, <span class="c-story__text-light">demonstrējot mūsu apņemšanos gādāt par ikviena vērtaīgāko resursu, jūsu laiku.</span></p> <p class="c-story__text"><span class="c-story__text-light">Mēs esam piedzimuši iedvesmas, aizrautības un entuziasma pilnā vietā.</span> Mūsu izaugsmes un progresa domāšana <span class="c-story__text-light">atbalsojas katrā Kia darbiniekā visā pasaulē,</span> esot apņēmības pilniem sasniegt mūsu zīmola mērķi katru dienu.</p> </div> <div class="c-story__bg c-story__bg--scaled"> <video src="/upload/manifesto/prologue-background-d.mp4" autoplay muted loop playsinline poster="/upload/manifesto/prologue-background-d.jpg"></video> </div> </section> <section class="c-story__section" id="pageBrandStory"> <div class="c-story__content"> </div> <picture class="c-story__bg c-story__bg--brown"> <source srcset="/upload/manifesto/brand-story-cover-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-story-cover-lg.jpg"> <img src="/upload/manifesto/brand-story-cover-sm.jpg" alt=""> </picture> </section> <section class="c-story__section c-story__section--invert" style="background-color: rgba(57,50,43,.8);"> <div class="c-story__content"> <p class="c-story__text"><span class="c-story__text-light">Kia ir sena automobiļu ražošanas vēsture, bet patiesībā mēs sākām ar velosipēdu izgatavošanu 1944. gadā.</span></p> <p class="c-story__text"><span class="c-story__text-light">Vairāk nekā 75 gadus mēs esam cilvēkiem nodrošinājuši pārvietošanos. Mēs ar lepnumu esam radījuši risinājumus, kas cilvēkiem palīdzējuši pārvietoties no vienas vietas uz citu, savienojot savā starpā, un palīdzot pārvarētu fizisko un emocionālo attālumu.</span></p> <p class="c-story__text">Kā redzat, kustība vienmēr ir bijusi mūsu zīmola pamatā, <span class="c-story__text-light">un cilvēku pārvietošana ir mūsu uzņēmējdarbības kodols, un tā tas paliks arī nākotnē neatkarīgi no visām izmaiņām, kas notiek mūsu nozarē.</span></p> </div> </section> <section class="c-story__section" style="background-color: #ece5dd;"> <article class="c-story__article"> <figure class="c-story__article-img"> <img src="/upload/manifesto/brand-story-side.jpg" alt=""> </figure> <div class="c-story__article-content"> <p class="c-story__text"><span class="c-story__text-light">Cilvēce ir attīstījusies migrējot. Pārvietojoties no vienas vietas uz citu, pāri dažādiem kontinentiem.</span> Šī vēlme un vajadzība pēc kustības ir dziļi iesakņota mūsu kā cilvēku DNS.</p> <p class="c-story__text"><span class="c-story__text-light">Kad mēs pārvietojamies, mēs redzam jaunas pasaules, iegūstam jaunu pieredzi, iepazīstamies ar jauniem cilvēkiem, atklājam jaunas perspektīvas.</span> Mēs iedvesmojamies.</p> <p class="c-story__text">Kustība aptver nemitīgo pārmaiņu ideju; mūsu vides, mūsu apkārtnes pārmaiņas, <span class="c-story__text-light">un tā rezultātā izmaiņas mūsos pašos.</span></p> <p class="c-story__text"><span class="c-story__text-light">Kad jūs pārvietojaties, jums ir laiks domāt.</span> Kustība paver ceļu domāšanai, iedvesmai un progresam.</p> </div> </article> </section> <section class="c-story__section c-story__section--invert" style="padding-bottom: 30%;"> <div class="c-story__content c-story__content--lg"> <h3 class="c-story__head">Mēs, Kia, uzskatām, ka kustība kalpo par iedvesmu idejām. Un tālab mēs esam radījuši telpu, kur jūs varat iedvesmoties un iegūt vairāk laika, lai iedvestu savas idejas dzīvē.</h3> <p class="c-story__text"><span class="c-story__text-light">Tas ir iemesls, kālab mēs pastāvam.</span><p> <p class="c-story__text">Lai radītu telpas, kas iedvesmo mūsu klientus, <span class="c-story__text-light">un ne tikai caur mūsu produktiem, bet arī mūsu tirdzniecības vietām, kur klienti var pieskarties mūsu produktiem un gūt nepastarpinātu pieredzi.</span></p> <p class="c-story__text">Mēs arī pastāvam, lai sniegtu jēgpilnus un ērtus pakalpojumus, kas atbrīvos laiku tām aktivitātēm, kas jūs iedvesmo visvairāk, <span class="c-story__text-light">piemēram, būšanai kopā ar jūsu ģimeni un draugiem, ceļošanai vai vienkārši atpūtai.</span></p> </div> <div class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <video src="/upload/manifesto/mission-background-d.mp4" autoplay muted loop playsinline poster="/upload/manifesto/mission-background-d.jpg"></video> </div> </section> <section class="c-story__section"> <div class="c-story__content"> <figure class="c-story__img" style="transform: translateY(-75%); margin-bottom: -35%;"> <img src="/upload/manifesto/our-brand-visual.jpg" alt=""> </figure> <p class="c-story__text">Ar jauno Kia mēs šķērsosim robežas un no tradicionāla autoražotāja kļūsim par mobilitātes zīmolu.</p> <p class="c-story__text"><span class="c-story__text-light">Par tādu, kurš izprot patērētāju mobilitātes vajadzības gan produktu, gan pakalpojumu ziņā, nodrošinot ērtus risinājumus, kas ciena ikviena lielāko vērtību – laiku.</span></p> <p class="c-story__text">Tas nav tikai kaut kas, ko sakām, bet mērķis, kuram sekosim un kam atbilstoši rīkosimies it visā, ko mēs darām.</p> </div> </section> <section class="c-story__section" id="pageBrandMindset"> <div class="c-story__content"> </div> <picture class="c-story__bg c-story__bg--green"> <source srcset="/upload/manifesto/brand-mindset-cover-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-mindset-cover-lg.jpg"> <img src="/upload/manifesto/brand-mindset-cover-sm.jpg" alt=""> </picture> </section> <section class="c-story__section c-story__section--invert" style="background-color: rgba(37,41,31,.8);"> <div class="c-story__content"> <p class="c-story__text"><span class="c-story__text-light">Kustība arī ir svarīga daļa no Kia domāšanas. Tā ir kopīga visiem mūsu darbiniekiem visās mūsu organizācijas jomās.</span></p> <p class="c-story__head">Tā ir uz priekšu virzītas kustības domāšana, vienmēr tiecoties pēc nemitīgiem uzlabojumiem <i>– izaugsmes domāšana.</i></p> </div> </section> <section class="c-story__section"> <article class="c-story__article"> <figure class="c-story__article-img" style="transform: translateY(-40%);"> <img src="/upload/manifesto/brand-mindset-side.jpg" alt=""> </figure> <div class="c-story__article-content c-story__content--lg"> <p class="c-story__head">Mēs uzskatām, ka šī domāšana rod atbalsi mūsu klientos.</p> <p class="c-story__text"><span class="c-story__text-light">Cilvēkos ar progresīvu, optimistisku un pozitīvu domāšanu, kuri ir gatavi mainīties paši un pielāgoties nākotnei, kurus virza jaunas idejas un kuri visur saredz jaunas iespējas.</span></p> </div> </article> <picture class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <source srcset="/upload/manifesto/backplate-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/backplate-lg.jpg"> <img src="/upload/manifesto/backplate-sm.jpg" alt=""> </picture> </section> <section class="c-story__section"> <article class="c-story__article"> <div class="c-story__article-box"> <p class="c-story__text">Būt patiesiem pret mūsu Kāpēc ir ārkārtīgi svarīgi, lai pastāvīgi sasniegtu mūsu zīmola mērķi.</p> <p class="c-story__text">Tā pirmsākums ir būt par zīmolu, kas iemieso šo domāšanu un to pielieto katru dienu.</p> </div> </article> <picture class="c-story__bg c-story__bg--flat c-story__bg--scaled"> <source srcset="/upload/manifesto/brand-mindset-ending-sm.jpg" media="(max-width: 720px)"> <source srcset="/upload/manifesto/brand-mindset-ending-lg.jpg"> <img src="/upload/manifesto/brand-mindset-ending-sm.jpg" alt=""> </picture> </section> </div>   <div id="modalVideo" class="rgk-modal" data-modal="modal"> <div class="rgk-modal__dialog"> <button class="rgk-modal__close" type="button" data-modal="hide">Aizvērt modālu</button> <div class="rgk-modal__body"> <div id="frameVideo"></div> </div> </div> </div>  <script> function spyScroll(nav) { var spyData = { active: window.location.hash, links: {} }; var spyNav = document.querySelector(nav); var spyLinks = spyNav.querySelectorAll('[href*="#"]'); for (var i = 0; i < spyLinks.length; i++) { var spySection = document.querySelector(spyLinks[i].hash); if (spySection) { spyData.links[spyLinks[i].hash] = { link: spyLinks[i], section: spySection } } } function _update(activeHash) { if (spyData.active) { spyData.links[spyData.active].link.classList.remove('is-active'); spyData.links[spyData.active].section.classList.remove('is-active'); } if (activeHash) { spyData.links[activeHash].link.classList.add('is-active'); spyData.links[activeHash].section.classList.add('is-active'); } } _update(spyData.active || spyLinks[0].hash); document.addEventListener('scroll', function(e) { spyNav.parentNode.classList.toggle('is-start', pageYOffset < 80); if (spyData.active) { var rect = spyData.links[spyData.active].section.getBoundingClientRect(); if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) { return; } } for (let key in spyData.links) { var rect = spyData.links[key].section.getBoundingClientRect(); if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) { _update(key); spyData.active = key; return; } } }, { passive: true }); } document.addEventListener('DOMContentLoaded', function() { spyScroll('#storyNav'); }, false); var YTplayer = { videoId: true }; // Inject YouTube API script function YTinit() { if (!YTplayer.videoId) return; var YTApiTag = document.createElement('script'); YTApiTag.src = 'https://www.youtube.com/player_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(YTApiTag, firstScriptTag); } function onYouTubePlayerAPIReady() { var videoId = YTplayer.videoId; // create the global player from the specific iframe YTplayer = new YT.Player('frameVideo', { width: '820', height: '500', videoId: videoId, playerVars: { 'autoplay': 1 } }); } function YTplay() { if (YTplayer) { YTplayer.playVideo(); } } function YTstop() { if (YTplayer) { YTplayer.pauseVideo(); } } document.querySelector('#modalVideo').addEventListener('show.rgk.modal', function(e) { var videoId = e.detail.relatedTarget.dataset.videoId; if (YTplayer.videoId) { YTplayer.videoId = videoId YTinit(); } else { YTplayer.loadVideoById(videoId); } }); document.querySelector('#modalVideo').addEventListener('hide.rgk.modal', function(e) { YTstop(); }); rgkModal(); function rgkModal(selector, method) { var ModalInit = function() { // global definition of plugin using if (!document.rgk) { document.rgk = { 'modal': false }; } if (!document.rgk.modal) { document.rgk.modal = { active: [], events: { 'click': _ListenerClick } }; document.addEventListener('click', document.rgk.modal.events.click); } }; var ModalAdd = function(el) { var modal = el; // if element already used by plugin if (modal.rgk) { return; } ModalInit(); // mark element as rgk modal.rgk = true; modal.insertAdjacentHTML('beforeend', '<span class="c-modal__shadow" data-modal="hide"></span>'); // trigger ready event var evt = new CustomEvent('ready.rgk.modal'); modal.dispatchEvent(evt); }; var ModalToggle = function(el, trigger, relatedTarget) { var modal = el; // if element not used by plugin if (!modal.rgk) { ModalAdd(modal); } var active = document.rgk.modal.active, index = active.indexOf(modal); // set z-index for currently open modal in multiple case if (trigger) { if (index < 0) { var style = active.length ? window.getComputedStyle(active[active.length - 1]) : false, zindex = style ? style.getPropertyValue('z-index') : 'auto'; if (zindex && zindex != 'auto') { modal.style['z-index'] = zindex*1 + 1; } active.push(modal); } } else { if (index > -1) { modal.style['z-index'] = null; active.splice(index, 1); } } modal.classList.toggle('is-open', trigger); var evtName = trigger ? 'show.rgk.modal' : 'hide.rgk.modal'; // trigger show event var evt = new CustomEvent(evtName, { detail: { relatedTarget: relatedTarget } }); modal.dispatchEvent(evt); }; var ModalDestroy = function() { // global definition of plugin using if (document.rgk.modal) { document.removeEventListener('click', document.rgk.modal.events.click); delete document.rgk.modal; if (!document.rgk.length) { delete document.rgk; } } }; var _ListenerClick = function(e) { var clicked = e.target, trigger = clicked.getAttribute('data-modal'); if (trigger && (trigger == 'show' || trigger == 'hide')) { e.preventDefault(); var target = false, id = clicked.dataset.target || clicked.hash || ''; if (id.trim()) target = document.querySelector(id); if (!target) target = clicked.closest('[data-modal="modal"]'); if (target) { ModalToggle(target, (trigger == 'show' ? true : false), clicked); } else { console.log('no modal selector found'); } return false; } }; var els = null; switch (typeof selector) { case 'string': if (selector == 'init' || selector == 'destroy') { els = ['']; method = selector; } else { els = document.querySelectorAll(selector); } break; case 'object': selector.length ? els = selector : els = [selector]; break; default: els = ['']; break; } if (els === null) { throw new TypeError('Element must not be null!'); } for (var i = 0; i < els.length; i++) { el = els[i]; switch (method) { case 'init': ModalInit(); break; case 'show': ModalToggle(el, true); break; case 'hide': ModalToggle(el, false); break; case 'destroy': ModalDestroy(); break; default: ModalInit(); break; } } }; </script> </body> </html>

CINXE.COM

Movement that inspires