PageSourceSearch

https://kizakiden.com/

html kizakiden.com collected 2026-10-04 20:08:39 UTC 28,955 bytes, 1,012 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1" />
6  <meta name="description" content="Welcome to Kizaki, offering unique dining experiences, authentic Japanese Omakase, and a warm atmosphere. Discover our story, menu, and latest updates here." />
7  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
8  <link rel="icon" href="images/Kizaki-Den-Icon.png" type="image/png" sizes="300x300">
9  <title>Kizaki</title>
10  
11  
11<script src="js/notification-popup.js" defer></script>
11
12
13
14  
15  
15<script type="application/ld+json">
16  {
17    "@context": "https://schema.org",
18    "@type": "Organization",
19    "url": "https://denchukizaki.com",
20    "logo": "https://denchukizaki.com/images/Kizaki-Den-Icon.png",
21    "name": "Kizaki"
22  }
23  </script>
23
24  
25  <style>
26
27    /* ===== Base Styles ===== */
28    * {
29      box-sizing: border-box;
30      margin: 0;
31      padding: 0;
32    }
33
34    html {
35      scroll-behavior: smooth;
36      max-width: 100%;
37      overflow-x: hidden;
38    }
39
40    body {
41      font-family: 'Palatino Linotype', 'Book Antiqua', serif;
42      background: url('images/Background/Kizaki Den Space_Finals_Web-Res_01.jpg') no-repeat center center fixed;
43      background-size: cover;
44      color: #fff;
45      max-width: 100%;
46      overflow-x: hidden;
47    }
48
49    /* ===== Typography for Sections ===== */
50    #bio-toshi,
51    #omakaseabt,
52    #bio-taro,
53    #reservation {
54      font-family: 'Palatino Linotype', 'Book Antiqua', serif;
55      font-size: 18px;
56      line-height: 1.5;
57    }
58
59    #bio-toshi,
60    #omakaseabt {
61      color: #333;
62    }
63
64    #reservation {
65      color: #000;
66    }
67
68    /* Section headings and paragraphs */
69    section h1 + p,
70    section h2 + p {
71      margin-top: 1.5rem;
72    }
73
74    .indented {
75      text-indent: 2em;
76    }
77
78    /* ===== Banner Styles ===== */
79    .section-banner,
80    .solid-banner {
81      width: 100vw;
82      height: 175px;
83      object-fit: cover;
84      display: block;
85    }
86
87    .section-banner {
88      mix-blend-mode: multiply;
89      background-color: transparent;
90    }
91
92    /* ===== Overlay Styles ===== */
93    .overlay {
94      background-color: white;
95      padding: 20px;
96      min-height: 85vh;
97      display: flex;
98      flex-direction: column;
99      align-items: center;
100    }
101
102    .overlay-block {
103      width: 100%;
104      background: white;
105      padding: 40px 0;
106      color: #222;
107      box-shadow: none;
108      border-radius: 0;
109      margin: 0;
110    }
111
112    .overlay-block .container {
113      max-width: 900px;
114      margin: 0 auto;
115      padding: 0 30px;
116    }
117
118    /* ===== Header and Navigation ===== */
119    header {
120      background-color: white;
121      height: 100px;
122      display: flex;
123      align-items: center;
124      justify-content: space-between;
125      padding: 0 40px;
126      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
127      position: relative;
128      z-index: 2;
129      width: 100%;
130    }
131
132    .header-left .logo {
133      height: 70px;
134      width: auto;
135    }
136
137    .header-center {
138      flex: 1;
139      display: flex;
140      justify-content: center;
141    }
142
143    .header-center .middle-design {
144      max-height: 70px;
145      max-width: 250px;
146      object-fit: contain;
147    }
148
149    .header-right {
150      display: flex;
151      gap: 20px;
152      flex-wrap: wrap;
153    }
154
155    #header-nav a {
156      color: #111;
157      text-decoration: none;
158      font-weight: lighter;
159      font-size: 1.1rem;
160      padding: 6px 10px;
161      transition: background-color 0.3s ease;
162      flex-shrink: 1;
163    }
164
165    #header-nav a:hover {
166      background-color: #444444;
167      border-radius: 5px;
168    }
169
170    /* ===== Floating Navigation ===== */
171    .floating-nav {
172      position: fixed;
173      top: 0;
174      left: 0;
175      right: 0;
176      height: 60px;
177      background-color: rgba(0, 0, 0, 0.5);
178      display: flex;
179      align-items: center;
180      padding: 0 20px;
181      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
182      opacity: 0;
183      pointer-events: none;
184      transition: opacity 0.3s ease;
185      z-index: 1000;
186      justify-content: flex-end;
187      overflow: visible;
188      line-height: 60px;
189    }
190
191    .floating-nav.show {
192      opacity: 1;
193      pointer-events: auto;
194    }
195
196    .floating-nav .floating-logo {
197      margin-right: 20px;
198      display: flex;
199      align-items: center;
200      opacity: 1;
201    }
202
203    .floating-nav .floating-logo img {
204      height: 40px;
205      width: auto;
206      display: block;
207      margin: 0;
208    }
209
210    .floating-nav a {
211      color: white;
212      margin-left: 20px;
213      text-decoration: none;
214      font-weight: 600;
215      font-size: 1rem;
216      line-height: 60px;
217      white-space: nowrap;
218    }
219
220    .floating-nav a:hover {
221      text-decoration: underline;
222    }
223
224    /* ===== Hamburger Toggle ===== */
225    #floating-nav-toggle {
226      font-size: 2rem;
227      background: none;
228      border: none;
229      color: white;
230      cursor: pointer;
231      margin-left: 20px;
232      display: none;
233    }
234
235    /* ===== Floating Nav Links (Dropdown) ===== */
236    .floating-nav-links {
237      display: flex;         
238      position: static;       
239      flex-direction: row;       
240      width: auto;
241      padding: 0;
242      border: none;
243      box-shadow: none;
244      background: transparent;
245    }
246
247    @media (max-width: 1019px) {
248      .floating-nav-links {
249        display: none;        
250        position: absolute;
251        top: 60px;
252        right: 1rem;
253        flex-direction: column;  
254        width: 200px;
255        padding: 0.5rem 0;
256        border-radius: 6px;
257        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
258        background: white;
259        border: 1px solid #ddd;
260      }
261      
262      .floating-nav-links.active {
263        display: flex;           
264      }
265    }
266
267    /* ===== Responsive Styles ===== */
268    @media (max-width: 1019px) {
269      /* Show hamburger toggle */
270      #floating-nav-toggle {
271        display: block;
272      }
273
274      /* Floating nav links styling for small screens */
275      .floating-nav-links {
276        background: rgba(0, 0, 0, 0.85);
277        border: none;
278        box-shadow: 0 4px 8px rgba(0,0,0,0.8);
279        right: 3rem;
280        padding: 10px 15px;
281        width: 240px;
282      }
283
284      .floating-nav-links a {
285        display: block;
286        color: white;
287        text-align: left;
288        font-weight: 600;
289        font-size: 1rem;
290        padding: 0.5rem 0.75rem;
291        margin: 0;
292        border: none;
293        white-space: normal;
294        width: 100%;
295        box-sizing: border-box;
296      }
297
298      .floating-nav-links a:hover {
299        text-decoration: underline;
300      }
301
302      /* Mobile navigation toggle and menu */
303      #nav-toggle {
304        display: none;
305        font-size: 2.5rem;
306        background: none;
307        border: none;
308        color: #111;
309        cursor: pointer;
310        z-index: 1001;
311      }
312
313      @media (max-width: 1019px) {
314        #nav-toggle {
315          display: block;
316        }
317      }
318
319      #header-nav {
320        display: none;
321        flex-direction: column;
322        position: fixed;
323        top: 100px;
324        right: 0;
325        background-color: white;
326        width: 200px;
327        padding: 10px 20px;
328        box-shadow: -2px 0 8px rgba(0,0,0,0.2);
329        border-radius: 0 0 0 10px;
330        z-index: 1000;
331      }
332
333      #header-nav.active {
334        display: flex;
335      }
336
337      #header-nav a {
338        color: #111;
339        padding: 12px 0;
340        font-size: 1.2rem;
341      }
342
343      /* Floating reserve button adjustments */
344      .floating-reserve {
345          position: fixed;
346          bottom: 40px;
347          right: 40px;
348          background-color: #0d0a2e;
349          color: #fff !important;
350          padding: 15px 20px;
351          border-radius: 50px;
352          text-decoration: none;
353          font-weight: 900;
354          font-size: 1.2rem;
355          text-transform: uppercase;
356          letter-spacing: 1.5px;
357          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
358          z-index: 999;
359          transition: background-color 0.3s ease, transform 0.2s ease;
360        }
361        @media (max-width: 768px) {
362          .floating-reserve {
363            padding: 15px 20px;
364            font-size: 1rem;
365            bottom: 20px;
366            right: 20px;
367          }
368        }
369        .floating-reserve.hidden {
370          opacity: 0;
371          pointer-events: none;
372          transform: translateY(20px);
373          transition: opacity 0.3s ease, transform 0.3s ease;
374        }
375        a.floating-reserve:hover {
376          background-color: #1d0000;
377          transform: scale(1.1);
378        }
379    }
380
381    /* ===== Footer ===== */
382    footer {
383      background-color: rgba(0, 0, 0, 0.8);
384      padding: 30px 20px;
385      text-align: center;
386      font-size: 0.9rem;
387      color: #ddd;
388      border-top: 1px solid #444;
389      margin-top: auto;
390    }
391
392    /* ===== Content and Homepage Sections ===== */
393    .content,
394    .homepage-section {
395      max-width: 900px;
396      width: 100%;
397      background-color: white;
398      color: #000;
399      border-radius: 10px;
400      padding: 20px 30px;
401      margin: 30px auto;
402    }
403
404    .homepage-section {
405      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
406    }
407
408    .homepage-section h2 {
409      margin-bottom: 12px;
410    }
411
412    .homepage-section p {
413      line-height: 1.5;
414      margin-bottom: 15px;
415    }
416
417    /* ===== Buttons ===== */
418    .btn {
419      display: inline-block;
420      background-color: #111;
421      color: white;
422      padding: 10px 18px;
423      border-radius: 4px;
424      text-decoration: none;
425      font-weight: lighter;
426      transition: background-color 0.3s ease;
427    }
428
429    .btn:hover {
430      background-color: #555;
431    }
432
433    /* ===== Slideshow ===== */
434    .slideshow {
435      position: relative;
436      width: 100%;
437      height: 90vh;
438      max-height: 600px;
439      overflow: hidden;
440      z-index: 1;
441    }
442
443    @media (max-width: 1019px) {
444      .slideshow {
445        height: auto;
446        max-height: none;
447        aspect-ratio: 16 / 9; /* Optional, keeps a good ratio */
448      }
449
450      .slides {
451        position: relative;
452        height: auto;
453        width: 100%;
454        object-fit: contain;
455      }
456
457      .slideshow-container {
458        border: none; /* optional: less clutter on mobile */
459      }
460    }
461
462    .slides {
463      width: 100%;
464      height: 100%;
465      object-fit: cover;
466      user-select: none;
467      position: absolute;
468      top: 0;
469      left: 0;
470      opacity: 0;
471      transition: opacity 1s ease-in-out;
472      pointer-events: none;
473    }
474
475    .slides.active {
476      opacity: 1;
477      pointer-events: auto;
478    }
479
480    .slideshow-container {
481      height: 100%;
482      max-width: 1500px;
483      margin: 0 auto;
484      border: 2px solid black;
485      box-sizing: border-box;
486      border-bottom: 2px solid #000;
487    }
488
489    /* ===== Slideshow Arrows ===== */
490    .prev, .next {
491      position: absolute;
492      top: 50%;
493      transform: translateY(-50%);
494      background-color: transparent;
495      border: none;
496      color: white;
497      font-size: 2rem;
498      padding: 8px 14px;
499      cursor: pointer;
500      border-radius: 50%;
501      user-select: none;
502      transition: background-color 0.3s ease;
503      z-index: 10;
504    }
505
506    .prev:hover, .next:hover {
507      background-color: transparent;
508    }
509
510    .prev {
511      left: 20px;
512    }
513
514    .next {
515      right: 20px;
516    }
517
518    /* ===== Image Grid ===== */
519    .image-grid {
520      display: grid;
521      grid-template-columns: repeat(3, 1fr);
522      gap: 20px;
523      max-width: 900px;
524      margin: 30px auto 0;
525      justify-items: center;
526      margin-bottom: 10rem;
527    }
528
529    .image-grid img {
530      width: 100%;
531      max-width: 250px;
532      height: 200px;
533      border-radius: 8px;
534      object-fit: cover;
535      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
536      display: block;  
537      margin-left: auto;
538      margin-right: auto;
539    }
540
541    /* ===== Floating Reserve Button ===== */
542    .floating-reserve {
543      position: fixed;
544      bottom: 40px;
545      right: 40px;
546      background-color: #0d0a2e;
547      color: #fff !important;
548      padding: 30px 40px;
549      border-radius: 50px;
550      text-decoration: none;
551      font-weight: 900;
552      font-size: 2rem;
553      text-transform: uppercase;
554      letter-spacing: 1.5px;
555      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
556      z-index: 999;
557      transition: background-color 0.3s ease, transform 0.2s ease;
558      display: flex;
559      align-items: center;
560      justify-content: center;
561      text-align: center;
562    }
563
564    .floating-reserve.hidden {
565      opacity: 0;
566      pointer-events: none;
567      transform: translateY(20px);
568      transition: opacity 0.3s ease, transform 0.3s ease;
569    }
570
571    a.floating-reserve:hover {
572      background-color: #1d0000;
573      transform: scale(1.1);
574    }
575
576    /* ===== About Image ===== */
577    .about-image {
578      float: left;
579      margin: 0 15px 15px 0;
580      width: 100%;
581      max-width: 500px;
582      height: auto;
583      border-radius: 8px;
584    }
585
586    #about h1 {
587      margin-bottom: 1em;
588    }
589
590    @media (max-width: 768px) {
591      .about-image {
592        float: none;
593        display: block;
594        margin: 0 auto 20px auto; /* center it on mobile */
595      }
596    }
597
598    /* ===== Back To Top Button ===== */
599    .back-to-top {
600      background-color: #0d0a2e;
601      color: white;
602      border: none;
603      padding: 12px 24px;
604      font-size: 16px;
605      font-weight: 600;
606      border-radius: 25px;
607      cursor: pointer;
608      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
609      transition: background-color 0.3s ease;
610    }
611
612    .back-to-top:hover {
613      background-color: #424242;
614    }
615
616    .lightbox {
617      display: none;
618      position: fixed;
619      top: 0; left: 0;
620      width: 100vw; height: 100vh;
621      background: rgba(0,0,0,0.8);
622      justify-content: center;
623      align-items: center;
624      z-index: 2000;
625      cursor: zoom-out;
626    }
627
628    .lightbox.active {
629      display: flex;
630    }
631
632    .lightbox img {
633      max-width: 90%;
634      max-height: 90%;
635      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
636      border-radius: 4px;
637    }
638
639
640
641   /* HTML */
642
643  </style>
644</head>
645<body>
646
647  <header>
648    <a href="#top" class="header-left">
649      <img src="images/Kizaki Den.png" alt="Kizaki Logo" class="logo" />
650    </a>
651
652    <button id="nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="header-nav">
653      &#9776;
654    </button>
655
656    <nav id="header-nav" class="header-right">
657      <a href="#top">HOME</a>
658      <a href="#about">ABOUT THE CHEFS</a>
659      <a href="#omakase">OMAKASE</a>
660      <a href="press.html">PRESS</a>
661      <a href="contact.html">CONTACT</a>
662      <a href="https://www.opentable.com/r/kizaki-denver">RESERVATION</a>
663      <a href="https://www.opentable.com/r/kizaki-denver" target="_blank" class="floating-reserve hidden">RESERVATION</a>
664    </nav>
665  </header>
666
667  <nav id="floating-nav" class="floating-nav">
668    <a href="#top" class="floating-logo">
669      <img src="images/Kizaki Den(2).png" alt="Kizaki Logo" />
670    </a>
671
672    <button id="floating-nav-toggle" aria-label="Toggle navigation" aria-expanded="false" aria-controls="floating-nav-links">
673      &#9776;
674    </button>
675
676    <div id="floating-nav-links" class="floating-nav-links">
677      <a href="#top">HOME</a>
678      <a href="#about">ABOUT THE CHEFS</a>
679      <a href="#omakase">OMAKASE</a>
680      <a href="press.html">PRESS</a>
681      <a href="contact.html">CONTACT</a>
682    </div>
683  </nav>
684
685  <div id="top"></div>
686
687  <div class="slideshow-container">
688    <div class="slideshow">
689      <img class="slides active" src="images/Slides/Kizaki Den Space_Finals_Web-Res_02.jpg" alt="Slide 1" />
690      <img class="slides" src="images/Slides/Kizaki Den Food_Finals_Web-Res_07.jpg" alt="Slide 2" />
691      <img class="slides" src="images/Slides/Kizaki Den Space_Finals_Web-Res_05.jpg" alt="Slide 3" />
692      <img class="slides" src="images/Slides/Kizaki Den Food_Finals_Web-Res_06.jpg" alt="Slide 4" />
693      <img class="slides" src="images/Slides/Kizaki_Den_Tuna.jpg" alt="Slide 5" />
694
695      <button class="prev" onclick="changeSlide(-1)">❮</button>
696      <button class="next" onclick="changeSlide(1)">❯</button>
697    </div>
698  </div>
699
700    <section id="about">
701        <div class="overlay">
702            <div class="overlay-block">
703                <div class="container">
704                    <h1>Chef Toshi Kizaki</h1>
705                    <img src="images/thumbnail_Toshi Head shot.jpg" alt="Chef Toshi Kizaki" class="about-image" />
706                    <p id="bio-toshi"></p>
707                </div>
708            </div>
709        </div>
710    </section>
711    
712    <section id="about-taro">
713        <div class="overlay">
714            <div class="overlay-block">
715                <div class="container">
716                    <h1>Chef Taro</h1>
717                    <p id="bio-taro"></p>
718                </div>
719            </div>
720        </div>
721    </section>
722
723<div class="section-banner"></div>
724
725
726    <section id="omakase">
727        <section class="overlay">
728            <div class="overlay-block">
729                <div class="container">
730                    <h2>Omakase</h2>
731                    <p id="omakaseabt"></p>
732                </div>
733            </div>
734            <div class="image-grid">
735                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_01.jpg" alt="Visual 1" />
736                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_02.jpg" alt="Visual 2" />
737                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_03.jpg" alt="Visual 3" />
738                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_04.jpg" alt="Visual 4" />
739                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_05.jpg" alt="Visual 5" />
740                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_10.jpg" alt="Visual 6" />
741                <img src="images/Omakase Section Visuals/4C1A2792.jpg" alt="Visual 7" />
742                <img src="images/Omakase Section Visuals/4C1A3064.jpg" alt="Visual 8" />
743                <img src="images/Omakase Section Visuals/4C1A3103.jpg" alt="Visual 9" />
744                <img src="images/Omakase Section Visuals/4C1A3138.jpg" alt="Visual 10" />
745                <img src="images/Omakase Section Visuals/4C1A3165.jpg" alt="Visual 11" />
746                <img src="images/Omakase Section Visuals/4C1A3211.jpg" alt="Visual 12" />
747                <img src="images/Omakase Section Visuals/4C1A3278.jpg" alt="Visual 13" />
748                <img src="images/Omakase Section Visuals/4C1A3412.jpg" alt="Visual 14" />
749                <img src="images/Omakase Section Visuals/4C1A3433.jpg" alt="Visual 15" />
750                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_11.jpg" alt="Visual 16" />
751                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_13.jpg" alt="Visual 117" />
752                <img src="images/Omakase Section Visuals/Kizaki Den Food_Finals_Web-Res_15.jpg" alt="Visual 18" />
753            </div>
754
755            <div style="text-align: center; margin: 20px 0;">
756              <button id="backToTopBtn" class="back-to-top">Back to Top ↑</button>
757            </div>
758        </section>
759    </section>
760
761    <div id="lightbox" class="lightbox">
762      <img id="lightbox-img" src="" alt="Expanded image" />
763    </div>
764  
765
766  <footer>
767  <div style="text-align: center; padding: 20px;">
768    <h3>Contact & Location</h3>
769    <p>Kizaki</p>
770    <p>1551 S Pearl St. Denver, CO 80210</p>
771    <p>Email: [email protected] | Phone: (720)-512-2753</p>
772    <p>
773      <a href="contact.html" style="color: #ddd; text-decoration: underline;">
774        Contact Us
775      </a>
776    </p>
777
778    <hr style="margin: 20px auto; width: 60%; border-color: #666;" />
779
780    <p>Connect With Us</p>
781
782    <div class="social-icons" style="margin-top: 10px;">
783      <a href="https://www.instagram.com/kizakiden/" target="_blank" aria-label="Instagram">
784        <img src="images/instagram-new.png" alt="Instagram" style="width: 24px; height: 24px;" />
785      </a>
786    </div>
787    
788    <hr style="margin: 20px auto; width: 60%; border-color: #666;" />
789    
790    <p>Visit Our Other Great Restaurants</p>
791    
792    <div class="social-icons" style="margin-top: 10px;">
793      <a href="https://www.sushiden.net" target="_blank" aria-label="Sushi Den">
794        <img src="images/Sushi Den logo alternative.png" alt="Sushi Den" style="width: 100px; height: 80px;" />
795      </a>
796      <a href="https://ototoden.com" target="_blank" aria-label="OTOTO">
797        <img src="images/OTOTO BC logo alternative.png" alt="OTOTO" style="width: 75px; height: 100px;" />
798      </a>
799      <a href="https://izakayaden.net" target="_blank" aria-label="Izakaya Den">
800        <img src="images/Izakaya Den Logo alternative.png" alt="Izakaya Den" style="width: 70px; height: 75px;" />
801      </a>
802      <a href="https://www.temakiden.com" target="_blank" aria-label="Tamaki Den">
803        <img src="images/thumbnail_temakiden_transparent.png" alt="Tamaki Den" style="width: 100px; height: 100px;" />
804      </a>
805    </div>
806    
807  </div>
808</footer>
809
810  
810<script>
811    const navToggle = document.getElementById('nav-toggle');
812    const headerNav = document.getElementById('header-nav');
813    const slides = document.querySelectorAll('.slides');
814    let currentSlide = 0;
815    let slideInterval;
816    let isPaused = false;
817
818    function showSlide(index) {
819      if (index >= slides.length) currentSlide = 0;
820      else if (index < 0) currentSlide = slides.length - 1;
821      else currentSlide = index;
822
823      slides.forEach((slide, i) => {
824        slide.classList.toggle('active', i === currentSlide);
825      });
826    }
827
828    function changeSlide(direction) {
829      showSlide(currentSlide + direction);
830    }
831
832    function startSlideshow() {
833      slideInterval = setInterval(() => {
834        if (!isPaused) changeSlide(1);
835      }, 7500); // 5 seconds per slide
836    }
837
838    function stopSlideshow() {
839      clearInterval(slideInterval);
840    }
841
842    const slideshowContainer = document.querySelector('.slideshow-container');
843
844    slideshowContainer.addEventListener('mouseenter', () => {
845      isPaused = true;
846    });
847
848    slideshowContainer.addEventListener('mouseleave', () => {
849      isPaused = false;
850    });
851
852    // Start the slideshow
853    showSlide(currentSlide);
854    startSlideshow();
855
856    // Floating nav show on scroll after 80px
857    const floatingNav = document.getElementById('floating-nav');
858    
859    window.addEventListener('scroll', () => {
860      floatingNav.classList.toggle('show', window.scrollY > 80);
861
862      if (reserveBtn) {
863        reserveBtn.classList.toggle('hidden', window.scrollY < 100);
864      }
865    });
866
867    const reserveBtn = document.querySelector('.floating-reserve');
868
869    window.addEventListener('scroll', () => {
870      if (window.scrollY < 100) {
871        reserveBtn.classList.add('hidden');
872      } else {
873        reserveBtn.classList.remove('hidden');
874      }
875    });
876
877    document.getElementById('backToTopBtn').addEventListener('click', () => {
878      window.scrollTo({ top: 0, behavior: 'smooth' });
879    });
880
881    navToggle.addEventListener('click', () => {
882      const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
883      navToggle.setAttribute('aria-expanded', !isExpanded);
884      headerNav.classList.toggle('active');
885    });
886
887
888
889    document.addEventListener('DOMContentLoaded', () => {
890      const toggleBtn = document.getElementById('floating-nav-toggle');
891      const navLinks = document.getElementById('floating-nav-links');
892
893      toggleBtn.addEventListener('click', () => {
894        navLinks.classList.toggle('active');
895        const expanded = toggleBtn.getAttribute('aria-expanded') === 'true';
896        toggleBtn.setAttribute('aria-expanded', !expanded);
897      });
898    });
899
900    function toggleNavToggle() {
901      const btn = document.getElementById('nav-toggle');
902      if (window.innerWidth > 1019) {
903        btn.style.display = 'none';
904      } else {
905        btn.style.display = 'block';
906      }
907    }
908    window.addEventListener('resize', toggleNavToggle);
909    window.addEventListener('load', toggleNavToggle);
910
911    document.addEventListener('click', function (event) {
912      const headerToggle = document.getElementById('nav-toggle');
913      const headerNav = document.getElementById('header-nav');
914      const floatingToggle = document.getElementById('floating-nav-toggle');
915      const floatingNav = document.getElementById('floating-nav-links');
916
917      const clickedInsideHeader = headerToggle.contains(event.target) || headerNav.contains(event.target);
918      const clickedInsideFloating = floatingToggle.contains(event.target) || floatingNav.contains(event.target);
919
920      // Close header nav if click was outside
921      if (!clickedInsideHeader) {
922        headerNav.classList.remove('active');
923        headerToggle.setAttribute('aria-expanded', 'false');
924      }
925
926      // Close floating nav if click was outside
927      if (!clickedInsideFloating) {
928        floatingNav.classList.remove('active');
929        floatingToggle.setAttribute('aria-expanded', 'false');
930      }
931    });
932
933      const lightbox    = document.getElementById('lightbox');
934      const lightboxImg = document.getElementById('lightbox-img');
935      const gridImgs    = document.querySelectorAll('.image-grid img');
936
937      // Open lightbox on click
938      gridImgs.forEach(img => {
939        img.style.cursor = 'zoom-in';
940        img.addEventListener('click', () => {
941          lightboxImg.src = img.src;
942          lightbox.classList.add('active');
943        });
944      });
945
946      // Close on backdrop click
947      lightbox.addEventListener('click', () => {
948        lightbox.classList.remove('active');
949      });
950
951      // Close on Escape key
952      document.addEventListener('keydown', e => {
953        if (e.key === 'Escape') {
954          lightbox.classList.remove('active');
955        }
956      });
957
958    
959    
960
961    fetch('texts/bio-toshi.txt')
962      .then(response => response.text())
963      .then(text => {
964        const paragraphs = text.split(/\n+/); // split by line breaks
965        const html = paragraphs.map(p => {
966          if (p.startsWith('[indent]')) {
967            p = p.replace('[indent]', '').trim();
968             return `<p class="indented">${p}</p>`;
969          } else {
970            return `<p>${p.trim()}</p>`;
971         }
972        }).join('');
973        document.getElementById('bio-toshi').innerHTML = html;
974    });
975    
976    fetch('texts/bio-taro.txt')
977      .then(response => response.text())
978      .then(text => {
979        const paragraphs = text.split(/\n+/); // split by line breaks
980        const html = paragraphs.map(p => {
981          if (p.startsWith('[indent]')) {
982            p = p.replace('[indent]', '').trim();
983             return `<p class="indented">${p}</p>`;
984          } else {
985            return `<p>${p.trim()}</p>`;
986         }
987        }).join('');
988        document.getElementById('bio-taro').innerHTML = html;
989    });
990
991    fetch('texts/omakaseabt.txt')
992      .then(response => response.text())
993      .then(text => {
994        const paragraphs = text.split(/\n+/); // split by line breaks
995        const html = paragraphs.map(p => {
996          if (p.startsWith('[indent]')) {
997            p = p.replace('[indent]', '').trim();
998             return `<p class="indented">${p}</p>`;
999          } else {
1000            return `<p>${p.trim()}</p>`;
1001         }
1002        }).join('');
1003        document.getElementById('omakaseabt').innerHTML = html;
1004    });
1005
1006
1007
1008  </script>
1008
1009
1010</body>
1011<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509148'},{'dcenter':'p3'},{'cp_id':'10374093'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script>
1011<script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script>
1011</html>
1012

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.