karma-style/site/index.html at main

mirror of https://github.com/hanzoai/karma-style.git synced 2026-10-30 18:33:08 +00:00

Files

T

zeekay 1fefb925bb Send Karma's analytics to the one ingest: the hosted tag replaces the Umami script and /v1/analytics

The page view, SPA navigations, errors and every ecommerce event go to /v1/event; pixels load only
when the visitor's choice or region allows (the tag reads hz_consent and the rule cloud serves).

(no attribution lines in commits)

2026-09-30 02:30:14 -07:00

276 lines

13 KiB

HTML

Raw Permalink Blame History

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Karma Bikinis — Swimwear, made to photograph</title>
 <meta name="description" content="Karma Bikinis — high-fashion swimwear designed in San Francisco by Antje Worring. The 2026 collection: eight designs in velvet, mesh and matte lycra.">
 <meta property="og:title" content="Karma Bikinis">
 <meta property="og:description" content="The 2026 collection — eight designs, made to photograph.">
 <meta property="og:image" content="/img/hero/hero.webp">
 <meta property="og:type" content="website">
 <meta name="theme-color" content="#ffffff">
 <link rel="icon" type="image/png" sizes="512x512" href="/favicon.png?v=049">
 <link rel="apple-touch-icon" href="/favicon.png?v=049">
 <!-- Zen is the one typeface. The faces and the @font-face that names them come
      from @hanzo/design, copied under /zen at image build (see Dockerfile) —
      nothing is vendored into this repo. The preload carries NO ?v= so it
      matches the url() inside fonts.css byte for byte; a mismatch downloads the
      face twice and the preload warns in console. -->
 <link rel="preload" href="/zen/assets/fonts/Zen-Variable.woff2" as="font" type="font/woff2" crossorigin>
 <!-- Fixed-name assets are edge-cached 24h (hanzoai/spa max-age=86400); index.html
      is no-cache. Bump ?v= on every release so CSS/JS never serve stale. -->
 <link rel="stylesheet" href="/zen/tokens/fonts.css?v=055">
 <link rel="stylesheet" href="/style.css?v=055">
 <!-- schema.org JSON-LD: brand + site. Hanzo Analytics' Annotate() reads this and
      emits a `content-schema` signal; it also feeds SEO / rich results. -->
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",
   "@graph": [
     { "@type": "Organization", "@id": "https://karma.style/#org", "name": "Karma Bikinis",
       "url": "https://karma.style", "logo": "https://karma.style/img/brand/karma-black.png",
       "sameAs": ["https://www.instagram.com/karma_bikinis", "https://www.tiktok.com/@karma_bikinis"] },
     { "@type": "WebSite", "@id": "https://karma.style/#site", "name": "Karma Bikinis",
       "url": "https://karma.style", "publisher": { "@id": "https://karma.style/#org" } }
   ]
 }
 </script>
 </head>
 <body>
 <header id="hdr" class="on-hero">
   <div class="wrap">
     <a class="logo" href="/" data-link aria-label="Karma">
       <img class="lb" src="/img/brand/karma-black.png" alt="Karma">
       <img class="lw" src="/img/brand/karma-white.png" alt="Karma">
     </a>
     <nav>
       <a href="/shop" data-link>Shop</a>
       <a href="/#lookbook" data-link>Lookbook</a>
       <a href="/journal" data-link>Journal</a>
       <a href="https://tryon.karma.style">Virtual Try-On</a>
       <a href="/about" data-link>About</a>
     </nav>
     <span class="sp"></span>
     <button class="search-btn" id="searchBtn" aria-label="Search">
       <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20.5 20.5 16 16"/></svg>
       <kbd class="kk">&#8984;K</kbd>
     </button>
     <button class="bag" id="bagBtn" data-slot="cart-open" aria-label="Open bag">
       <svg class="ico" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2 3 6.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.2L18 2H6Z"/><path d="M3 6.2h18"/><path d="M16 10.2a4 4 0 0 1-8 0"/></svg>
       <span class="n" id="bagCount">0</span>
     </button>
     <button class="menu-btn" id="menuBtn" aria-label="Menu">
       <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
     </button>
   </div>
 </header>
 <!-- ============ MOBILE MENU ============ -->
 <div class="mmenu" id="mmenu" aria-hidden="true">
   <div class="mm-top">
     <a class="logo" href="/" data-link aria-label="Karma"><img src="/img/brand/karma-black.png" alt="Karma"></a>
     <button class="mm-close" id="mmClose" aria-label="Close menu">
       <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
     </button>
   </div>
   <nav class="mm-nav">
     <a href="/shop" data-link>Shop</a>
     <a href="/#lookbook" data-link>Lookbook</a>
     <a href="/journal" data-link>Journal</a>
     <a href="https://tryon.karma.style">Virtual Try-On</a>
     <a href="/about" data-link>About</a>
   </nav>
   <div class="mm-foot">
     <a href="/shipping" data-link>Shipping</a>
     <a href="/returns" data-link>Returns</a>
     <a href="mailto:[email protected]">Contact</a>
     <a href="https://www.instagram.com/karma_bikinis" target="_blank" rel="noopener">Instagram</a>
   </div>
 </div>
 <!-- ============ HOME ============ -->
 <div class="home">
   <section class="hero" id="top">
     <img src="/img/hero/hero.webp" alt="Karma Bikinis — scarlet one-piece">
     <div class="wrap inner">
       <div class="eyebrow">The 2026 Collection</div>
       <h1>Swimwear made to photograph.</h1>
       <p>Eight designs in crushed velvet, botanical mesh and matte lycra — cut clean, finished by hand in San Francisco, shot for the light.</p>
       <div class="cta">
         <a href="/shop" data-link class="btn inv">Shop the collection</a>
         <a href="https://tryon.karma.style" class="btn line" style="color:#fff;border-color:#fff">Virtual Try-On</a>
       </div>
     </div>
   </section>
   <section class="press">
     <div class="wrap">
       <span class="lab">As seen in</span>
       <div class="marks">
         <img src="/img/brand/press-vogue.png" alt="Vogue" loading="lazy">
         <img src="/img/brand/press-cosmopolitan.png" alt="Cosmopolitan" loading="lazy">
         <img src="/img/brand/press-daily-mail.png" alt="Daily Mail" loading="lazy">
         <img src="/img/brand/press-miami-fashion-week.png" alt="Miami Fashion Week" loading="lazy">
       </div>
     </div>
   </section>
   <section class="sec" id="shop">
     <div class="wrap">
       <div class="sec-head">
         <div><div class="eyebrow">The Collection</div><h2>The full house.</h2></div>
         <p>The 2026 line, in stock — plus every archive collection, back by pre-order. Hover to turn.</p>
       </div>
       <nav class="coll-nav" id="collNav" aria-label="Collections"></nav>
       <div id="shopSections"></div>
     </div>
   </section>
   <section class="sec" id="lookbook">
     <div class="wrap">
       <div class="sec-head">
         <div><div class="eyebrow">Lookbook</div><h2>On location.</h2></div>
         <p>Editorial and lifestyle from the 2026 shoot.</p>
       </div>
       <div class="look" id="look"></div>
     </div>
   </section>
   <section class="sec" style="padding:0" id="story">
     <div class="split">
       <div class="txt">
         <div class="eyebrow">The House</div>
         <h2>Swimwear with an eye for the frame.</h2>
         <p>Designed in San Francisco by Antje Worring, Karma is cut for the moment the shutter opens — sculpted lines, honest colour, hardware that catches the light.</p>
         <p>Small runs, made carefully, worn everywhere from the pool deck to the front row.</p>
         <div class="pillars">
           <div><b>Hand-finished</b><span>Small-batch runs</span></div>
           <div><b>True colour</b><span>Shot, not filtered</span></div>
           <div><b>Made to move</b><span>Salt &amp; chlorine ready</span></div>
         </div>
         <div style="margin-top:30px"><a href="/about" data-link class="btn line">Read our story</a></div>
       </div>
       <div class="pic"><img src="/img/hero/portrait.webp" alt="Karma editorial" loading="lazy"></div>
     </div>
   </section>
   <section class="quote">
     <div class="wrap">
       <blockquote>Design that serves women and improves their quality of life.</blockquote>
       <div class="cite">Antje Worring · Founder</div>
     </div>
   </section>
   <section class="tryon">
     <div class="wrap">
       <div class="eyebrow">Virtual Try-On · Beta</div>
       <h2>See it on you.</h2>
       <p>Upload a photo, pick a design, and our studio renders you in it — in seconds, on our own GPUs.</p>
       <a href="https://tryon.karma.style" class="btn">Open the Try-On studio</a>
     </div>
   </section>
   <section class="sec social" id="social">
     <div class="wrap">
       <div class="sec-head">
         <div><div class="eyebrow">Community</div><h2>@karma_bikinis</h2></div>
         <p><a href="https://www.instagram.com/karma_bikinis" target="_blank" rel="noopener" class="btn line">Follow on Instagram</a></p>
       </div>
       <div class="sgrid" id="sgrid"></div>
     </div>
   </section>
 </div>
 <!-- ============ PRODUCT PAGE ============ -->
 <div class="pdp"><div class="wrap inner">
   <div class="crumbs"><a href="/" data-link>Karma</a> / <a href="/shop" data-link>Shop</a> / <span id="pdpName"></span></div>
   <div class="layout">
     <div class="gallery" id="pdpGallery" data-slot="product-gallery"></div>
     <div class="info" id="pdpInfo"></div>
   </div>
 </div></div>
 <!-- ============ CONTENT PAGE ============ -->
 <div class="page"><div class="inner" id="pageBody"></div></div>
 <footer>
   <div class="wrap">
     <div class="fgrid">
       <div class="fcol news">
         <h4>Newsletter</h4>
         <p>New collections, first.</p>
         <form id="newsForm" autocomplete="off">
           <input type="email" id="newsEmail" class="rr-mask" placeholder="Email address" aria-label="Email address" required>
           <button type="submit">Join →</button>
         </form>
         <div class="ok" id="newsOk"></div>
       </div>
       <div class="fcol">
         <h4>Client Services</h4>
         <a href="/contact" data-link>Contact &amp; FAQ</a>
         <a href="/shipping" data-link>Shipping</a>
         <a href="/returns" data-link>Exchanges &amp; Returns</a>
         <a href="/shipping" data-link>Track Order</a>
         <a href="/privacy" data-link>Privacy Policy</a>
         <a href="/terms" data-link>Terms of Service</a>
       </div>
       <div class="fcol">
         <h4>The House</h4>
         <a href="/about" data-link>About Karma</a>
         <a href="https://antjeworr.ing" target="_blank" rel="noopener">Antje Worring</a>
         <a href="/shop" data-link>The Collection</a>
         <a href="https://tryon.karma.style">Virtual Try-On</a>
       </div>
       <div class="fcol">
         <h4>Follow Us</h4>
         <a href="https://www.instagram.com/karma_bikinis" target="_blank" rel="noopener">Instagram</a>
         <a href="https://www.tiktok.com/@karma_bikinis" target="_blank" rel="noopener">TikTok</a>
         <a href="https://www.pinterest.com/karma_bikinis" target="_blank" rel="noopener">Pinterest</a>
         <a href="https://www.facebook.com/karmabikinis" target="_blank" rel="noopener">Facebook</a>
       </div>
       <div class="fcol">
         <h4>Contact</h4>
         <p><a href="mailto:[email protected]">[email protected]</a></p>
         <p>Mon–Fri · reply in 1–2 days</p>
         <p>Designed in San Francisco</p>
         <p>Shipping worldwide</p>
       </div>
     </div>
     <div class="flogo"><img src="/img/brand/karma-black.png" alt="Karma"></div>
     <div class="legal"><span>© 2026 Karma Bikinis</span></div>
   </div>
 </footer>
 <div class="scrim" id="scrim"></div>
 <aside class="cart" id="cart" data-slot="cart">
   <h3>Your bag <button id="cartClose" aria-label="Close">✕</button></h3>
   <div class="items" id="cartItems"></div>
   <div class="foot">
     <div class="row"><span>Subtotal</span><span class="mono" id="cartTotal">$0</span></div>
     <button class="btn block" id="checkoutBtn" data-slot="checkout" itemscope itemtype="https://schema.org/OrderAction">Checkout</button>
     <div class="note" id="cartNote">Shipping calculated at checkout · exchanges within 10 days</div>
   </div>
 </aside>
 <div class="toast" id="toast"></div>
 <script>window.KARMA_ASSET_V="055";</script>
 <!-- Hanzo commerce + analytics packages (published to npm, vendored locally — no
      runtime CDN). track.min.js = [email protected] (window.HanzoTrack.Annotate only; events go through the hosted tag);
      checkout.global.js = [email protected] (window.HanzoCheckout). -->
 <script src="/vendor/track.min.js?v=055"></script>
 <script src="/vendor/checkout.global.js?v=055"></script>
 <script src="/content.js?v=055"></script>
 <script src="/journal.js?v=055"></script>
 <script src="/commerce.js?v=055"></script>
 <!-- Karma layers: standard GA4 ecommerce events + Annotate, checkout widget, replay -->
 <script src="/analytics.js?v=055"></script>
 <script src="/checkout.js?v=055"></script>
 <script src="/replay.js?v=055"></script>
 <script src="/app.js?v=055"></script>
 <!-- KARMA_AI_WIDGET -->
 </body>
 </html>

276 lines 13 KiB HTML Raw Permalink Blame History Unescape Escape

276 lines

13 KiB

HTML

Raw Permalink Blame History