.breadcrumb[data-astro-cid-2mo7624u] ol[data-astro-cid-2mo7624u]{display:flex;align-items:center;gap:8px;margin:20px 0;color:#fffc;font-size:14px;list-style:none;padding:0}.breadcrumb[data-astro-cid-2mo7624u] li[data-astro-cid-2mo7624u]:not(:last-child):after{content:"/";margin-left:8px;color:#fff9}<a href="/">Home</a> <span>/</span> <span>{font.title}</span> </nav> <div class="font-detail"> <div class="font-header"> <h1 class="font-title">{font.title}</h1> <div class="download-all-section"> <span class="download-count">{font.ttf_files.length + font.otf_files.length}files available</span> </div> </div> <div class="preview-gallery"> <div class="main-preview-container"> <img src={font.src_pic_1}alt={`${font.title}preview`}class="main-preview" id="mainPreview" /> </div> <div class="preview-thumbnails"> <img src={font.src_pic_1}alt="Preview 1" class="thumbnail active" data-src={font.src_pic_1}/> <img src={font.src_pic_2}alt="Preview 2" class="thumbnail" data-src={font.src_pic_2}/> <img src={font.src_pic_3}alt="Preview 3" class="thumbnail" data-src={font.src_pic_3}/> <img src={font.src_pic_4}alt="Preview 4" class="thumbnail" data-src={font.src_pic_4}/> <img src={font.src_pic_5}alt="Preview 5" class="thumbnail" data-src={font.src_pic_5}/> </div> </div> <div class="font-info"> <div class="downloads-card"> <h3>Download Files</h3> <div class="files-grid">{font.ttf_files.length > 0 && (<div class="file-group"> <h4>TTF Files</h4> <div class="file-list"> {font.ttf_files.map((ttfFile) => {const fileName = ttfFile.split("/").pop() || "Unknown"; const displayName = fileName.replace(".ttf",""); return (<div class="file-item"> <div class="file-info"> <span class="file-name">{displayName}</span> <span class="file-format">TTF</span> </div> <a href={ttfFile} download class="btn btn-download"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="currentColor" stroke-width="2"/> <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/> <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/> </svg> Download </a> </div>);})} </div> </div>)}{font.otf_files.length > 0 && (<div class="file-group"> <h4>OTF Files</h4> <div class="file-list"> {font.otf_files.map((otfFile) => {const fileName = otfFile.split("/").pop() || "Unknown"; const displayName = fileName.replace(".otf",""); return (<div class="file-item"> <div class="file-info"> <span class="file-name">{displayName}</span> <span class="file-format">OTF</span> </div> <a href={otfFile} download class="btn btn-download"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="currentColor" stroke-width="2"/> <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/> <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/> </svg> Download </a> </div>);})} </div> </div>)}</div> </div> </div> </div> </div> </main> </Layout> <style> .container{max-width:1200px;margin:0 auto;padding:0 20px}.breadcrumb[data-astro-cid-2mo7624u]{display:flex;align-items:center;gap:8px;margin:20px 0;color:#fffc;font-size:14px}.breadcrumb[data-astro-cid-2mo7624u] a[data-astro-cid-2mo7624u]{color:#feca57;text-decoration:none;transition:color .3s ease}.breadcrumb[data-astro-cid-2mo7624u] a[data-astro-cid-2mo7624u]:hover{color:#ff9ff3}.font-detail[data-astro-cid-2mo7624u]{background:#fffffff2;border-radius:20px;padding:40px;margin-bottom:40px;backdrop-filter:blur(10px);box-shadow:0 20px 50px #00000026}.font-header[data-astro-cid-2mo7624u]{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;flex-wrap:wrap;gap:20px}.font-title[data-astro-cid-2mo7624u]{font-size:3rem;font-weight:700;color:#2d3436;text-transform:capitalize;margin:0}.download-all-section[data-astro-cid-2mo7624u]{display:flex;align-items:center;gap:16px}.download-count[data-astro-cid-2mo7624u]{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600}.preview-gallery[data-astro-cid-2mo7624u]{margin-bottom:40px}.main-preview-container[data-astro-cid-2mo7624u]{margin-bottom:20px}.main-preview[data-astro-cid-2mo7624u]{width:100%;height:400px;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px #0000001a}.preview-thumbnails[data-astro-cid-2mo7624u]{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.thumbnail[data-astro-cid-2mo7624u]{width:120px;height:80px;object-fit:cover;border-radius:12px;cursor:pointer;transition:all .3s ease;opacity:.7;border:3px solid transparent;flex-shrink:0}.thumbnail[data-astro-cid-2mo7624u]:hover{opacity:1;transform:scale(1.05)}.thumbnail[data-astro-cid-2mo7624u].active{opacity:1;border-color:#ff6b6b;transform:scale(1.05)}.downloads-card[data-astro-cid-2mo7624u]{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;padding:30px;border:1px solid rgba(0,0,0,.05)}.downloads-card[data-astro-cid-2mo7624u] h3[data-astro-cid-2mo7624u]{font-size:1.5rem;font-weight:600;color:#2d3436;margin-bottom:20px}.files-grid[data-astro-cid-2mo7624u]{display:flex;flex-direction:column;gap:24px}.file-group[data-astro-cid-2mo7624u] h4[data-astro-cid-2mo7624u]{font-size:1.2rem;font-weight:600;color:#2d3436;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #ddd}.file-list[data-astro-cid-2mo7624u]{display:flex;flex-direction:column;gap:12px}.file-item[data-astro-cid-2mo7624u]{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d;transition:all .3s ease}.file-item[data-astro-cid-2mo7624u]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.file-info[data-astro-cid-2mo7624u]{display:flex;flex-direction:column;gap:4px}.file-name[data-astro-cid-2mo7624u]{font-size:1rem;font-weight:600;color:#2d3436}.file-format[data-astro-cid-2mo7624u]{font-size:.8rem;color:#636e72;background:#e9ecef;padding:2px 8px;border-radius:12px;width:fit-content}.btn-download[data-astro-cid-2mo7624u]{font-size:14px;padding:10px 16px;background:linear-gradient(135deg,#00b894,#00cec9);white-space:nowrap}.btn-download[data-astro-cid-2mo7624u]:hover{box-shadow:0 8px 20px #00b8944d}@media (max-width: 768px){.font-detail[data-astro-cid-2mo7624u]{padding:20px}.font-header[data-astro-cid-2mo7624u]{flex-direction:column;align-items:flex-start;gap:16px}.font-title[data-astro-cid-2mo7624u]{font-size:2rem}.download-all-section[data-astro-cid-2mo7624u]{width:100%}.main-preview[data-astro-cid-2mo7624u]{height:250px}.thumbnail[data-astro-cid-2mo7624u]{width:80px;height:60px}.file-item[data-astro-cid-2mo7624u]{flex-direction:column;align-items:flex-start;gap:12px}.btn-download[data-astro-cid-2mo7624u]{width:100%;justify-content:center}}
