/* ========================================================================== TESLA LOUNGE & BAR — theme.css Tokeni, skinovi i animacije / Design tokens, skins and animations. Tipografija i naslovi su preuzeti iz originalne lounge-menu stranice: Cormorant Garamond za naslove, Montserrat za tekst. Typography and headings are inherited from the original lounge-menu page. Skin se bira preko atributa na : data-skin="blueprint | midnight | ivory | copper" data-cards="portrait | compact | overlay | plaque" data-price="blob | outline | plain | dots" data-anim="full | subtle | off" ========================================================================== */ :root { --tesla-grid: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27320%27%20height%3D%27320%27%20viewBox%3D%270%200%20320%20320%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b7985a%27%20stroke-opacity%3D%270.08%27%20stroke-width%3D%271%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M0%2040H320M0%2080H320M0%20120H320M0%20160H320M0%20200H320M0%20240H320M0%20280H320%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M40%200V320M80%200V320M120%200V320M160%200V320M200%200V320M240%200V320M280%200V320%27/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-opacity%3D%270.11%27%20stroke-width%3D%271.2%27%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27160%27%20cy%3D%27160%27%20r%3D%2778%27/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%27160%27%20cy%3D%27160%27%20r%3D%27118%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M160%2042V278M42%20160H278%27/%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23d7c49d%27%20fill-opacity%3D%270.12%27%20font-family%3D%27monospace%27%20font-size%3D%2712%27%3E%0A%20%20%20%20%3Ctext%20x%3D%2716%27%20y%3D%2722%27%3EAC%20/%20HV%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27228%27%20y%3D%27306%27%3E1891%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --tesla-diagram-a: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27900%27%20height%3D%27900%27%20viewBox%3D%270%200%20900%20900%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23b7985a%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.17%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M110%20210c55-40%20110-40%20165%200s110%2040%20165%200%20110-40%20165%200%20110%2040%20165%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M110%20250c55-40%20110-40%20165%200s110%2040%20165%200%20110-40%20165%200%20110%2040%20165%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M110%20290c55-40%20110-40%20165%200s110%2040%20165%200%20110-40%20165%200%20110%2040%20165%200%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.2%27%20stroke-width%3D%272.2%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M205%20510h126c26%200%2047-21%2047-47s-21-47-47-47H217c-34%200-62%2028-62%2062s28%2062%2062%2062h114c42%200%2076-34%2076-76s-34-76-76-76H205%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M236%20565h124c24%200%2044%2020%2044%2044s-20%2044-44%2044H244c-32%200-58-26-58-58s26-58%2058-58h116c40%200%2072%2032%2072%2072s-32%2072-72%2072H236%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M267%20620h122c22%200%2040%2018%2040%2040s-18%2040-40%2040H271c-28%200-51-23-51-51s23-51%2051-51h118c36%200%2065%2029%2065%2065s-29%2065-65%2065H267%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.18%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M590%20450h90l18%2070H572l18-70Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M610%20450V366h50v84%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M635%20264c0%200-28%2045-28%2076h56c0-31-28-76-28-76Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M635%20204v60%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M598%20520h74v158h-74Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M560%20678h150%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M615%20307h40%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M580%20732c24-16%2038-39%2038-66%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M690%20732c-24-16-38-39-38-66%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M635%20175c22%2011%2036%2026%2043%2043%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%271.6%27%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27270%27%20cy%3D%27240%27%20r%3D%2774%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27270%27%20cy%3D%27240%27%20r%3D%2732%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M270%20166V90M344%20240h76M270%20314v76M194%20240h-76%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M222%20192l96%2096M318%20192l-96%2096%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23d7c49d%27%20fill-opacity%3D%270.13%27%20font-family%3D%27monospace%27%20font-size%3D%2718%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27115%27%20y%3D%27154%27%3EAlternating%20current%20field%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27155%27%20y%3D%27390%27%3ETesla%20coil%20study%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27560%27%20y%3D%27415%27%3EWireless%20transmission%20tower%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --tesla-diagram-b: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27820%27%20height%3D%27820%27%20viewBox%3D%270%200%20820%20820%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.14%27%20stroke-width%3D%271.6%27%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%2792%27%20y%3D%27122%27%20width%3D%27286%27%20height%3D%27286%27%20rx%3D%2718%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27235%27%20cy%3D%27265%27%20r%3D%27108%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27235%27%20cy%3D%27265%27%20r%3D%2736%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M235%20157V99M343%20265h58M235%20373v58M127%20265H69%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M166%20196l138%20138M304%20196L166%20334%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M476%20148h232M476%20196h190M476%20244h232M476%20292h158M476%20340h232M476%20388h138%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M108%20518c52%200%2052-58%20104-58s52%2058%20104%2058%2052-58%20104-58%2052%2058%20104%2058%2052-58%20104-58%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M108%20560c52%200%2052-58%20104-58s52%2058%20104%2058%2052-58%20104-58%2052%2058%20104%2058%2052-58%20104-58%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M108%20602c52%200%2052-58%20104-58s52%2058%20104%2058%2052-58%20104-58%2052%2058%20104%2058%2052-58%20104-58%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.17%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M572%20488h94l18%2064H554l18-64Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M592%20488v-78h54v78%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M619%20318c0%200-28%2044-28%2074h56c0-30-28-74-28-74Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M619%20268v50%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M580%20552h78v148h-78Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M546%20700h146%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.12%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27111%27%20y%3D%27102%27%3ERotating%20magnetic%20field%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27480%27%20y%3D%27124%27%3EPatent%20notes%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27110%27%20y%3D%27646%27%3EResonance%20wave%20studies%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-coil: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272.2%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M514%20228c36-76%2082-116%20138-120%2026-2%2050%206%2070%2020%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M497%20278c60-72%20120-103%20178-93%2027%205%2049%2019%2064%2038%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M485%20326c76-58%20147-79%20206-61%2020%206%2039%2018%2057%2036%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M278%20474h124c28%200%2051-23%2051-51s-23-51-51-51H289c-38%200-69%2031-69%2069s31%2069%2069%2069h113c47%200%2085-38%2085-85s-38-85-85-85H278%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M309%20537h123c25%200%2046%2021%2046%2046s-21%2046-46%2046H317c-34%200-61-27-61-61s27-61%2061-61h115c42%200%2076%2034%2076%2076s-34%2076-76%2076H309%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M341%20598h121c22%200%2040%2018%2040%2040s-18%2040-40%2040H347c-29%200-53-24-53-53s24-53%2053-53h115c38%200%2068%2030%2068%2068s-30%2068-68%2068H341%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M575%20410h98l18%2069H557l18-69Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M596%20410V316h53v94%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M622%20220c0%200-28%2044-28%2074h56c0-30-28-74-28-74Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M622%20172v48%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M583%20479h79v146h-79Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M548%20625h150%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M637%20119c20%2014%2035%2031%2042%2052%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M582%20258h79%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M245%20174c16%2016%2024%2034%2024%2056s-8%2040-24%2056c-16-16-24-34-24-56s8-40%2024-56Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M245%20230h0%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M226%20252c10%2015%2022%2022%2038%2022s29-7%2040-22%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M245%20286v58%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M198%20344h94%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27204%27%20y%3D%27158%27%3Echarged%20glass%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27548%27%20y%3D%27393%27%3Etesla%20coil%20/%20resonant%20transformer%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-motor: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272.1%27%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27285%27%20cy%3D%27362%27%20r%3D%27166%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27285%27%20cy%3D%27362%27%20r%3D%27114%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27285%27%20cy%3D%27362%27%20r%3D%2740%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M285%20196V111M451%20362h84M285%20528v84M119%20362H35%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M180%20257l210%20210M390%20257L180%20467%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M176%20188c39-27%2076-40%20109-40%2033%200%2070%2013%20109%2040%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M176%20536c39%2027%2076%2040%20109%2040%2033%200%2070-13%20109-40%27/%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%27104%27%20y%3D%27181%27%20width%3D%27362%27%20height%3D%27362%27%20rx%3D%2732%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M555%20214h210M555%20266h176M555%20318h210M555%20370h152M555%20422h210M555%20474h132%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M550%20554h188%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M585%20536v-92M625%20536v-58M664%20536v-124%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M568%20598c38%200%2070%2031%2070%2070%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M638%20668c0-38%2031-70%2070-70%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27107%27%20y%3D%27140%27%3Erotating%20magnetic%20field%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27557%27%20y%3D%27193%27%3Einduction%20motor%20patent%20notes%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-turbine: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%27170%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%27140%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%27110%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%2780%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%2750%27/%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27293%27%20cy%3D%27377%27%20r%3D%2720%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M75%20312c44%200%2072%2018%20104%2050%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M75%20377c57%200%2091%200%20129%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M75%20442c44%200%2072-18%20104-50%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M382%20312c32-32%2060-50%20104-50%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M401%20377c38%200%2072%200%20129%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M382%20442c32%2032%2060%2050%20104%2050%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M550%20212h208M550%20264h152M550%20316h208M550%20368h174M550%20420h208M550%20472h136%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M547%20563c68-57%20159-57%20226%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M547%20610c68-57%20159-57%20226%200%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%2794%27%20y%3D%27274%27%3Eturbine%20flow%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27554%27%20y%3D%27192%27%3Etesla%20turbine%20cross%20section%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-tower: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272.1%27%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M426%20148c0%200-36%2054-36%2090h72c0-36-36-90-36-90Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M426%2082v66%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M396%20238v120l-78%20230h216l-78-230V238%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M352%20588h148%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M328%20658h196%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M266%20244c50-39%20103-58%20160-58%2058%200%20112%2019%20162%2058%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M222%20292c66-48%20135-72%20204-72s138%2024%20204%2072%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M184%20344c81-55%20162-83%20242-83s162%2028%20242%2083%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M546%20188h179M546%20236h131M546%20284h179M546%20332h159M546%20380h179M546%20428h137%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M120%20522c54%200%2054-62%20108-62s54%2062%20108%2062%2054-62%20108-62%2054%2062%20108%2062%2054-62%20108-62%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M120%20570c54%200%2054-62%20108-62s54%2062%20108%2062%2054-62%20108-62%2054%2062%20108%2062%2054-62%20108-62%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27548%27%20y%3D%27166%27%3Ewireless%20transmission%20notes%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27152%27%20y%3D%27618%27%3Efield%20propagation%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-oscillator: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%27108%27%20y%3D%27162%27%20width%3D%27292%27%20height%3D%27292%27%20rx%3D%2722%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M165%20356h178M165%20320h142M165%20284h178M165%20248h120%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M434%20186c0%200%2031%2026%2031%2072s-31%2072-31%2072%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M468%20162c0%200%2060%2043%2060%2096s-60%2096-60%2096%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M516%20136c0%200%2088%2062%2088%20122s-88%20122-88%20122%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M143%20520c55-42%20111-42%20166%200s111%2042%20166%200%20111-42%20166%200%20111%2042%20166%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M143%20570c55-42%20111-42%20166%200s111%2042%20166%200%20111-42%20166%200%20111%2042%20166%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M626%20430h80l16%2056H610l16-56Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M643%20430v-68h46v68%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M666%20284c0%200-24%2038-24%2064h48c0-26-24-64-24-64Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M666%20240v44%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M634%20486h64v120h-64Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M606%20606h122%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27114%27%20y%3D%27140%27%3Eoscillation%20chart%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27614%27%20y%3D%27220%27%3Ewireless%20lamp%20study%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --section-invention-radiant: url("data:image/svg+xml,%0A%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27860%27%20height%3D%27760%27%20viewBox%3D%270%200%20860%20760%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d7c49d%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%20%20%20%20%3Cg%20stroke-opacity%3D%270.16%27%20stroke-width%3D%272%27%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%27267%27%20cy%3D%27244%27%20r%3D%2796%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M267%20102V58M367%20244h44M267%20386v44M123%20244H79%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M196%20173l142%20142M338%20173L196%20315%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M228%20340h78v58c0%2024-18%2044-39%2044s-39-20-39-44v-58Z%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M213%20442h108%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M556%20158h198M556%20210h156M556%20262h198M556%20314h128M556%20366h198%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M107%20540c60-36%20120-36%20180%200s120%2036%20180%200%20120-36%20180%200%20120%2036%20180%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M107%20590c60-36%20120-36%20180%200s120%2036%20180%200%20120-36%20180%200%20120%2036%20180%200%27/%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%27M554%20470l52%2052%2038-98%2054%20164%2042-98%27/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%20%20%3Cg%20fill%3D%27%23b7985a%27%20fill-opacity%3D%270.14%27%20font-family%3D%27monospace%27%20font-size%3D%2716%27%3E%0A%20%20%20%20%3Ctext%20x%3D%27107%27%20y%3D%27506%27%3Ealternating%20current%20wave%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%27558%27%20y%3D%27140%27%3Eradiant%20energy%20notes%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 18px; --radius-lg: 28px; --maxw: 1200px; --art-opacity: .72; --section-art-opacity: .22; --sheen: rgba(255,255,255,.55); } /* ========================================================================== SKIN 1 — BLUEPRINT (original Tesla Lounge look) ========================================================================== */ html[data-skin="blueprint"] { --bg: #10100f; --bg-grad: radial-gradient(circle at 10% 0%, rgba(183,152,90,.10), transparent 32%), linear-gradient(180deg, #0c0c0b 0%, #111110 48%, #0e0e0d 100%); --surface: #171715; --surface-2: #1d1c19; --text: #f5f0e7; --text-strong: #fffaf1; --muted: #aaa398; --soft: #d5cbb8; --gold: #b7985a; --gold-2: #d7c49d; --accent: #b7985a; --line: rgba(183,152,90,.25); --shadow: 0 18px 45px rgba(0,0,0,.24); --panel-bg: linear-gradient(180deg, rgba(24,24,22,.76), rgba(14,14,13,.92)); --panel-border: rgba(183,152,90,.14); --panel-glow: rgba(183,152,90,.10); --card-bg: linear-gradient(145deg, rgba(183,152,90,.03), transparent 55%), linear-gradient(145deg, var(--surface-2), var(--surface)); --card-border: rgba(255,255,255,.06); --card-border-hover: rgba(183,152,90,.55); --card-shadow-hover: 0 22px 55px rgba(0,0,0,.45), 0 0 26px rgba(183,152,90,.10); --nav-bg: rgba(16,16,15,.92); --nav-chip: rgba(255,255,255,.10); --footer-bg: #0b0b0a; --price-bg: var(--gold); --price-fg: #16130d; --hero-scrim: linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.62) 45%, rgba(5,5,5,.32) 100%); --flare: rgba(183,152,90,.55); --arc: #d7c49d; } /* ========================================================================== SKIN 2 — MIDNIGHT (plavo-zlatna varijanta / blue-gold variant) ========================================================================== */ html[data-skin="midnight"] { --bg: #03070e; --bg-grad: radial-gradient(circle at 50% 8%, rgba(15,91,170,.20), transparent 34%), linear-gradient(180deg, #02050a 0%, #050b13 48%, #02060c 100%); --surface: #0b1420; --surface-2: #0e1a28; --text: #f5f1e8; --text-strong: #ffffff; --muted: #a9a7a0; --soft: #c8cdd6; --gold: #d6ad5b; --gold-2: #f1d28b; --accent: #168cff; --line: rgba(214,173,91,.30); --shadow: 0 18px 50px rgba(0,0,0,.42); --panel-bg: linear-gradient(180deg, rgba(9,18,30,.78), rgba(2,6,12,.94)); --panel-border: rgba(214,173,91,.16); --panel-glow: rgba(22,140,255,.12); --card-bg: linear-gradient(160deg, rgba(14,25,38,.92), rgba(3,8,14,.98)); --card-border: rgba(214,173,91,.27); --card-border-hover: rgba(214,173,91,.70); --card-shadow-hover: 0 15px 50px rgba(0,0,0,.55), 0 0 28px rgba(22,140,255,.14); --nav-bg: rgba(2,6,12,.91); --nav-chip: rgba(214,173,91,.20); --footer-bg: #02060c; --price-bg: var(--gold); --price-fg: #0a0f16; --hero-scrim: linear-gradient(90deg, rgba(2,6,12,.96) 0%, rgba(2,6,12,.78) 42%, rgba(2,6,12,.30) 100%); --flare: rgba(22,140,255,.62); --arc: #6fc0ff; } /* ========================================================================== SKIN 3 — IVORY (svetla, dnevna varijanta / light daytime variant) ========================================================================== */ html[data-skin="ivory"] { --bg: #f6f1e7; --bg-grad: radial-gradient(circle at 12% 0%, rgba(150,112,44,.10), transparent 34%), linear-gradient(180deg, #fbf7ef 0%, #f3ece0 55%, #eee6d8 100%); --surface: #fffdf8; --surface-2: #f7f1e6; --text: #221f19; --text-strong: #14120e; --muted: #6d6557; --soft: #4a4438; --gold: #96702c; --gold-2: #7d5c22; --accent: #96702c; --line: rgba(150,112,44,.32); --shadow: 0 16px 40px rgba(60,45,20,.10); --art-opacity: .40; --section-art-opacity: .16; --sheen: rgba(255,255,255,.85); --panel-bg: linear-gradient(180deg, rgba(255,253,248,.86), rgba(246,240,230,.94)); --panel-border: rgba(150,112,44,.20); --panel-glow: rgba(150,112,44,.10); --card-bg: linear-gradient(145deg, #fffdf8, #f4ede0); --card-border: rgba(150,112,44,.22); --card-border-hover: rgba(150,112,44,.62); --card-shadow-hover: 0 20px 45px rgba(60,45,20,.16); --nav-bg: rgba(251,247,239,.93); --nav-chip: rgba(34,31,25,.12); --footer-bg: #f1e9db; --price-bg: var(--gold); --price-fg: #fff8e9; --hero-scrim: linear-gradient(90deg, rgba(251,247,239,.95) 0%, rgba(251,247,239,.76) 44%, rgba(251,247,239,.34) 100%); --flare: rgba(255,236,190,.85); --arc: #b98d3c; } /* ========================================================================== SKIN 4 — COPPER (topla bakarna varijanta / warm copper variant) ========================================================================== */ html[data-skin="copper"] { --bg: #141010; --bg-grad: radial-gradient(circle at 82% 0%, rgba(192,122,74,.14), transparent 34%), linear-gradient(180deg, #120e0c 0%, #181312 50%, #100c0b 100%); --surface: #1d1614; --surface-2: #241b18; --text: #f6ece2; --text-strong: #fff6ec; --muted: #b3a396; --soft: #d9c8b8; --gold: #c07a4a; --gold-2: #e6b183; --accent: #c07a4a; --line: rgba(192,122,74,.30); --shadow: 0 18px 45px rgba(0,0,0,.34); --panel-bg: linear-gradient(180deg, rgba(35,25,21,.80), rgba(16,12,11,.94)); --panel-border: rgba(192,122,74,.18); --panel-glow: rgba(192,122,74,.14); --card-bg: linear-gradient(150deg, rgba(42,30,24,.95), rgba(19,14,12,.98)); --card-border: rgba(192,122,74,.20); --card-border-hover: rgba(230,177,131,.62); --card-shadow-hover: 0 22px 55px rgba(0,0,0,.50), 0 0 26px rgba(192,122,74,.16); --nav-bg: rgba(18,14,12,.92); --nav-chip: rgba(255,255,255,.10); --footer-bg: #0f0c0a; --price-bg: var(--gold); --price-fg: #1a0f08; --hero-scrim: linear-gradient(90deg, rgba(10,7,6,.90) 0%, rgba(10,7,6,.64) 45%, rgba(10,7,6,.30) 100%); --flare: rgba(230,150,90,.60); --arc: #e6b183; } /* ========================================================================== OSNOVA / BASE ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; min-height: 100vh; position: relative; isolation: isolate; overflow-x: hidden; background: var(--bg-grad); color: var(--text); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; } img { display: block; width: 100%; } /* Blueprint crteži u pozadini / blueprint drawings in the background */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body::before { z-index: 0; opacity: var(--art-opacity); background-image: var(--tesla-grid), var(--tesla-diagram-a), var(--tesla-diagram-b); background-repeat: repeat, no-repeat, no-repeat; background-size: 320px 320px, min(62vw, 860px) auto, min(54vw, 760px) auto; background-position: center center, left -180px top 150px, right -140px bottom 140px; filter: saturate(.9); mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.78) 45%, rgba(0,0,0,.96)); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.78) 45%, rgba(0,0,0,.96)); } body::after { z-index: 0; background: radial-gradient(circle at 18% 18%, var(--panel-glow), transparent 24%), radial-gradient(circle at 82% 70%, var(--panel-glow), transparent 22%); } html[data-bg-art="off"] body::before { display: none; } /* Tipografija — identična originalnoj lounge-menu stranici Typography — identical to the original lounge-menu page */ h1, h2, h3 { font-family: var(--font-display); margin: 0; } h1 { font-size: clamp(3.4rem, 10vw, 7rem); line-height: .82; letter-spacing: -.03em; max-width: 750px; } .eyebrow { letter-spacing: .24em; text-transform: uppercase; font-size: .72rem; color: var(--gold-2); font-weight: 700; margin-bottom: 10px; } /* ========================================================================== ANIMACIJE / ANIMATIONS ========================================================================== */ /* Spori "ken burns" zum na hero slici */ @keyframes tl-kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.17) translate3d(-2%, -1.6%, 0); } } /* Bljesak svetla koji lagano lebdi preko hero slike / drifting lens flare */ @keyframes tl-flare { 0% { transform: translate3d(-14%, 8%, 0) scale(1); opacity: .30; } 50% { transform: translate3d(10%, -6%, 0) scale(1.30); opacity: .80; } 100% { transform: translate3d(-14%, 8%, 0) scale(1); opacity: .30; } } /* Odsjaj koji prelazi preko površine / specular light sweep */ @keyframes tl-glare { 0% { transform: translateX(-160%) skewX(-18deg); opacity: 0; } 8% { opacity: 1; } 55% { opacity: 1; } 100% { transform: translateX(260%) skewX(-18deg); opacity: 0; } } /* Struja koja teče kroz linije / current flowing along the arc paths */ @keyframes tl-arc-flow { to { stroke-dashoffset: -1400; } } @keyframes tl-arc-pulse { 0%, 100% { opacity: .18; } 45% { opacity: .70; } } /* Ulazak elementa u vidno polje / scroll reveal */ @keyframes tl-rise { from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } /* Sjaj koji prelazi preko slike pića / gleam sweeping across a drink image */ @keyframes tl-gleam { 0% { transform: translateX(-130%) rotate(9deg); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateX(240%) rotate(9deg); opacity: 0; } } @keyframes tl-gleam-hover { 0% { transform: translateX(-130%) rotate(9deg); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateX(240%) rotate(9deg); opacity: 0; } } /* Cena se "napuni" pri ulasku / price blob charges up on reveal */ @keyframes tl-charge { 0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 var(--flare); } 55% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 18px 3px var(--flare); } 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 transparent; } } /* Zlatna linija ispod naslova sekcije se izvlači / heading rule draws itself */ @keyframes tl-draw-rule { from { width: 0; } to { width: 120px; } } /* Treperenje simbola / brand symbol flicker */ @keyframes tl-spark { 0%, 88%, 100% { opacity: 1; text-shadow: 0 0 14px var(--flare); } 90% { opacity: .45; text-shadow: none; } 94% { opacity: 1; text-shadow: 0 0 26px var(--flare); } 96% { opacity: .65; text-shadow: none; } } /* Elementi koji čekaju scroll / elements waiting to be revealed */ .reveal { opacity: 0; } .reveal.is-in { animation: tl-rise .85s cubic-bezier(.22,.68,.28,1) var(--delay, 0ms) both; } /* Isključivanje animacija — po izboru u adminu ili po sistemskom podešavanju Animations off — by admin setting or by the visitor's OS preference */ html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation: none !important; transition: none !important; } html[data-anim="off"] .reveal { opacity: 1; } /* "Subtle" zadržava samo ulazak i spori zum / subtle keeps reveal + slow zoom */ html[data-anim="subtle"] .hero__glare, html[data-anim="subtle"] .hero__arcs, html[data-anim="subtle"] .card__gleam { display: none; } html[data-anim="subtle"] .hero__image { animation-duration: 70s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; } } /* ========================================================================== ZAVESE PREKO SEKCIJA I SLIKA / per-skin scrims Izdvojene u promenljive da bi svaka tema (uključujući sezonske) kontrolisala svoja zatamnjenja. ========================================================================== */ :root { --panel-scrim: linear-gradient(90deg, rgba(11,11,10,.96) 0%, rgba(11,11,10,.88) 32%, rgba(11,11,10,.62) 68%, rgba(11,11,10,.90) 100%); --card-overlay-scrim: linear-gradient(0deg, rgba(3,4,6,.92) 6%, rgba(3,4,6,.55) 42%, transparent 72%); --media-scrim: linear-gradient(0deg, rgba(3,4,6,.55), transparent 46%); } html[data-skin="midnight"] { --panel-scrim: linear-gradient(90deg, rgba(2,6,12,.96) 0%, rgba(2,6,12,.88) 32%, rgba(2,6,12,.62) 68%, rgba(2,6,12,.90) 100%); --card-overlay-scrim: linear-gradient(0deg, rgba(2,6,12,.92) 6%, rgba(2,6,12,.55) 42%, transparent 72%); --media-scrim: linear-gradient(0deg, rgba(2,6,12,.55), transparent 46%); } html[data-skin="ivory"] { --panel-scrim: linear-gradient(90deg, rgba(251,247,239,.92) 0%, rgba(251,247,239,.80) 32%, rgba(251,247,239,.55) 68%, rgba(251,247,239,.88) 100%); --card-overlay-scrim: linear-gradient(0deg, rgba(20,17,12,.92) 6%, rgba(20,17,12,.55) 42%, transparent 72%); --media-scrim: linear-gradient(0deg, rgba(20,17,12,.42), transparent 46%); } html[data-skin="copper"] { --panel-scrim: linear-gradient(90deg, rgba(16,12,11,.96) 0%, rgba(16,12,11,.88) 32%, rgba(16,12,11,.62) 68%, rgba(16,12,11,.90) 100%); --card-overlay-scrim: linear-gradient(0deg, rgba(16,12,11,.92) 6%, rgba(16,12,11,.55) 42%, transparent 72%); --media-scrim: linear-gradient(0deg, rgba(16,12,11,.55), transparent 46%); }