/* TK168 global page skeleton — neutral greys, per-page layouts. The overlay is injected synchronously in (see js/skeleton-boot.js) so the next page never shows a blank flash before shimmering. */ @keyframes tk168-sk-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .tk168-skeleton-overlay { position: fixed; inset: 0; z-index: 10050; padding: calc(65px + 20px) clamp(16px, 4vw, 48px) 40px; background: #F6F3EE; color: rgba(23, 23, 23, 0.06); pointer-events: none; overflow: hidden; opacity: 1; transition: opacity 0.42s ease; } /* Dark-themed pages (home, detail, admin) — show a matching dark panel. */ html[data-skeleton-theme="dark"] .tk168-skeleton-overlay { background: #141414; color: rgba(255, 255, 255, 0.05); } .tk168-skeleton-overlay.is-done { opacity: 0; } .tk168-sk-row, .tk168-sk-col, .tk168-sk-grid, .tk168-sk-shell { width: 100%; max-width: var(--page-shell-max, 1344px); margin: 0 auto; } .tk168-sk-col { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); } .tk168-sk-block { position: relative; overflow: hidden; border-radius: 14px; background: rgba(17, 17, 17, 0.08); } html[data-skeleton-theme="dark"] .tk168-sk-block { background: rgba(255, 255, 255, 0.07); } .tk168-sk-block::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 100deg, transparent 0%, rgba(0, 0, 0, 0.06) 45%, transparent 90% ); background-size: 200% 100%; animation: tk168-sk-wave 1.4s ease-in-out infinite; } html[data-skeleton-theme="dark"] .tk168-sk-block::after { background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0.07) 45%, transparent 90% ); background-size: 200% 100%; } /* ------ top navbar placeholder ---------------------------------------- */ .tk168-sk-nav { position: fixed; top: 0; left: 0; right: 0; height: 65px; border-radius: 0; background: #23211F; } /* ------ Hero block (large image area at top of a showcase page) -------- */ .tk168-sk-hero { width: 100%; max-width: var(--page-shell-max, 1344px); margin: 0 auto; height: clamp(220px, 38vh, 420px); border-radius: 20px; } /* ------ Text line placeholders ---------------------------------------- */ .tk168-sk-lines { width: min(560px, 88vw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .tk168-sk-lines .tk168-sk-block { height: 14px; border-radius: 8px; } .tk168-sk-lines .tk168-sk-block:nth-child(1) { width: 62%; } .tk168-sk-lines .tk168-sk-block:nth-child(2) { width: 92%; } .tk168-sk-lines .tk168-sk-block:nth-child(3) { width: 46%; } /* ------ Card grid (vehicles, brand, favorites, rental) ---------------- */ .tk168-sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 760px) { .tk168-sk-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .tk168-sk-grid .tk168-sk-block { aspect-ratio: 16 / 11; border-radius: 14px; } /* ------ Inquiry / form layout ----------------------------------------- */ .tk168-sk-form { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 720px; margin: 20px auto 0; } .tk168-sk-form .tk168-sk-block { height: 44px; border-radius: 10px; } .tk168-sk-form .tk168-sk-block.is-tall { height: 120px; } /* ------ Detail (split: gallery | info) --------------------------------- */ .tk168-sk-detail { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 12px; } @media (min-width: 900px) { .tk168-sk-detail { grid-template-columns: 1.2fr 1fr; } } .tk168-sk-detail .tk168-sk-gallery { aspect-ratio: 4 / 3; border-radius: 16px; } .tk168-sk-detail .tk168-sk-spec { display: flex; flex-direction: column; gap: 10px; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block { height: 18px; border-radius: 6px; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block:nth-child(1) { width: 60%; height: 34px; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block:nth-child(2) { width: 40%; height: 28px; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block:nth-child(3) { width: 90%; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block:nth-child(4) { width: 84%; } .tk168-sk-detail .tk168-sk-spec .tk168-sk-block:nth-child(5) { width: 70%; } /* ------ Brand navigation row ------------------------------------------ */ .tk168-sk-brandnav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; } .tk168-sk-brandnav .tk168-sk-block { height: 54px; border-radius: 12px; } @media (max-width: 760px) { .tk168-sk-brandnav { grid-template-columns: repeat(3, 1fr); } } /* ------ When skeleton is active, hide underlying body ----------------- */ html.tk168-skeleton-active body { opacity: 0 !important; animation: none !important; } html.tk168-skeleton-active { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .tk168-sk-block::after { animation: none; } } /* ───────────────────────────────────────────────────────────────────── Top progress bar (shown on outgoing page while the next doc loads). Only used on engines without cross-document View Transitions. ───────────────────────────────────────────────────────────────────── */ .tk168-progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10060; background: transparent; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 140ms ease; } .tk168-progress-bar.is-active { opacity: 1; } .tk168-progress-bar > span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100% ); animation: tk168-progress-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; } html[data-skeleton-theme="dark"] .tk168-progress-bar > span, .about-page .tk168-progress-bar > span, .showcase-page .tk168-progress-bar > span { background: linear-gradient( 90deg, rgba(23, 23, 23, 0) 0%, rgba(23, 23, 23, 0.55) 40%, rgba(23, 23, 23, 0.85) 50%, rgba(23, 23, 23, 0.55) 60%, rgba(23, 23, 23, 0) 100% ); } @keyframes tk168-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } @media (prefers-reduced-motion: reduce) { .tk168-progress-bar > span { animation: none; width: 100%; opacity: 0.5; } }