/* Theme Name: Transmonang Theme URI: https://transmonang.com Author: AR Studio Author URI: https://transmonang.com Description: Tema kustom WordPress untuk Trans Monang — rental mobil. Konversi presisi dari landing page asli, tanpa plugin wajib, dengan CPT Armada & Layanan, SEO & schema bawaan, integrasi WhatsApp, serta panel pengaturan lengkap di Customizer. Dioptimasi untuk kecepatan (WebP, zero-plugin) dan Google Search Console / Site Kit. Version: 1.0.0 Requires at least: 6.2 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: transmonang Tags: custom-menu, featured-images, translation-ready, custom-logo, threaded-comments */ /* ========================================================================= * Small custom layer. The bulk of the design comes from compiled Tailwind * (assets/css/tailwind.css). This file only holds what Tailwind utilities * can't express cleanly: buttons, nav states, keyframes, slider, and the * Classic-Editor article typography. * ===================================================================== */ :root { --tm-primary: #c2272d; --tm-dark: #121212; } /* ------------------------------- Buttons ------------------------------- */ .tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; transition: all .25s ease; cursor: pointer; border: none; line-height: 1; text-decoration: none; } .tm-btn--primary { background: var(--tm-primary); color: #fff; } .tm-btn--primary:hover { background: #a01f24; transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(194, 39, 45, .45); } .tm-btn--secondary { background: #fff; color: var(--tm-primary); border-radius: 9999px; } .tm-btn--secondary:hover { background: #f1f1f1; } /* ------------------------------ Navbar --------------------------------- */ .tm-nav { will-change: background-color, padding; } .tm-nav--transparent { background: transparent; } .tm-nav--transparent .tm-nav__link, .tm-nav--transparent .tm-nav__cta, .tm-nav--transparent .tm-nav__toggle { color: #fff; } .tm-nav--solid { background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05); } .tm-nav--solid .tm-nav__link, .tm-nav--solid .tm-nav__cta, .tm-nav--solid .tm-nav__toggle { color: var(--tm-dark); } .tm-nav--compact { padding-top: 1rem; padding-bottom: 1rem; } /* Logo: white on transparent (over dark hero), natural once solid. */ .tm-nav--transparent .tm-logo__img { filter: brightness(0) invert(1); } .tm-nav--solid .tm-logo__img { filter: none; } .tm-nav__link { position: relative; } .tm-nav__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--tm-primary); transition: width .25s ease; } .tm-nav__link:hover::after, .tm-nav__link.is-active::after { width: 100%; } .tm-nav__link.is-active, .tm-nav__link:hover { color: var(--tm-primary) !important; } .tm-nav__cta { background: var(--tm-primary); color: #fff !important; padding: .6rem 1.1rem; border-radius: 2px; transition: background .25s ease; } .tm-nav__cta:hover { background: #a01f24; } .tm-mobile-link:hover { color: var(--tm-primary); } /* --------------------------- Marquee (clients) ------------------------- */ @keyframes tm-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .tm-marquee__track { animation: tm-marquee 40s linear infinite; width: max-content; } .tm-marquee:hover .tm-marquee__track { animation-play-state: paused; } /* ---------------------------- Scroll reveal ---------------------------- */ /* Progressive enhancement: content is fully visible by default (no-JS safe); only hidden pre-reveal when the element has the .tm-js flag. */ .tm-js .tm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .tm-js .tm-reveal.is-visible { opacity: 1; transform: none; } /* ---------------------------- Hero scroll dot -------------------------- */ @keyframes tm-scroll-dot { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } } .tm-hero__scroll-dot { animation: tm-scroll-dot 2s ease-in-out infinite; } /* --------------------------- Testimonial slider ------------------------ */ .tm-testi__track { transition: transform .5s cubic-bezier(.22, 1, .36, 1); will-change: transform; } .tm-testi__slide { box-sizing: border-box; } .tm-testi__dot { width: 8px; height: 8px; border-radius: 9999px; background: #d8d8d8; border: none; cursor: pointer; transition: all .3s ease; padding: 0; } .tm-testi__dot.is-active { width: 28px; background: var(--tm-primary); } /* --------------------------- Floating WhatsApp ------------------------- */ .tm-wa-float { animation: tm-wa-pulse 2.4s ease-in-out infinite; } @keyframes tm-wa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } } /* ---------------------------- Pagination ------------------------------- */ .tm-pagination .nav-links, .wp-block-query-pagination { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; } .tm-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .75rem; border: 1px solid #eee; color: var(--tm-dark); font-weight: 700; font-size: .8rem; text-decoration: none; transition: all .2s ease; } .tm-pagination .page-numbers:hover, .tm-pagination .page-numbers.current { background: var(--tm-primary); color: #fff; border-color: var(--tm-primary); } /* ============================ Article content =========================== */ /* Typography for Classic-Editor post/page content (.tm-content). */ .tm-content { color: #374151; font-size: 1.05rem; line-height: 1.85; } .tm-content > * + * { margin-top: 1.4em; } .tm-content h2 { font-size: 1.9rem; font-weight: 800; color: var(--tm-dark); letter-spacing: -.02em; margin-top: 2.2em; line-height: 1.2; } .tm-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--tm-dark); margin-top: 1.8em; line-height: 1.25; } .tm-content h4 { font-size: 1.15rem; font-weight: 700; color: var(--tm-dark); margin-top: 1.5em; } .tm-content p { margin: 0; } .tm-content a { color: var(--tm-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .tm-content a:hover { color: #a01f24; } .tm-content ul, .tm-content ol { padding-left: 1.4em; } .tm-content ul { list-style: disc; } .tm-content ol { list-style: decimal; } .tm-content li { margin-top: .5em; } .tm-content li::marker { color: var(--tm-primary); } .tm-content blockquote { border-left: 4px solid var(--tm-primary); padding: .5em 0 .5em 1.3em; font-style: italic; color: #4b5563; background: #faf5f5; border-radius: 0 4px 4px 0; } .tm-content img, .tm-content figure { max-width: 100%; height: auto; border-radius: 4px; } .tm-content figure { margin: 2em 0; } .tm-content figcaption { font-size: .85rem; color: #9ca3af; text-align: center; margin-top: .6em; } .tm-content .alignleft { float: left; margin: .3em 1.5em 1em 0; } .tm-content .alignright { float: right; margin: .3em 0 1em 1.5em; } .tm-content .aligncenter { display: block; margin-left: auto; margin-right: auto; } .tm-content table { width: 100%; border-collapse: collapse; font-size: .95rem; } .tm-content th, .tm-content td { border: 1px solid #eee; padding: .75em 1em; text-align: left; } .tm-content th { background: #f8f8f8; font-weight: 700; color: var(--tm-dark); } .tm-content code { background: #f3f4f6; padding: .15em .4em; border-radius: 3px; font-size: .9em; } .tm-content hr { border: none; border-top: 1px solid #eee; margin: 2.5em 0; } /* Utility clamp fallbacks (in case Tailwind line-clamp plugin absent). */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Accessibility helper */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Prevent horizontal overflow globally */ html, body { overflow-x: hidden; max-width: 100%; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tm-reveal { opacity: 1 !important; transform: none !important; transition: none; } .tm-marquee__track, .tm-hero__scroll-dot, .tm-wa-float { animation: none !important; } html { scroll-behavior: auto; } } /* Filled testimonial stars (match original) */ .tm-stars svg { fill: currentColor; }