/* Theme Name: Kinetic Theme URI: https://github.com/ekendra/bds-kinetic Author: Budhathoki Driving School Author URI: https://budhathokidriving.com/ Description: Ultra-light, motion-first standalone WordPress theme. Framework-free (no page builder, no parent framework), self-hosted fonts, tasteful motion that always respects prefers-reduced-motion. Presentation only — business logic lives in plugins. Reusable across sites via child themes. Version: 2.1.0 Requires at least: 6.2 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: kinetic Tags: custom-menu, featured-images, translation-ready, block-styles, wide-blocks, threaded-comments */ /* ========================================================================== Kinetic — design system (site-wide). Enqueued as the base stylesheet. Homepage-only hero/tour styles live in assets/css/home.css. ========================================================================== */ /* --- Self-hosted fonts (latin subset; preloaded in ) --- */ @font-face{font-family:'Anton';src:url('assets/fonts/anton-regular-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('assets/fonts/archivo-variable-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap} /* --- Design tokens. A child theme overrides these to rebrand. --- */ :root{ --k-blue:#1338be; --k-blue-bright:#3a5bff; --k-yellow:#ffd60a; --k-yellow-deep:#e8a800; --k-orange:#ff7a00; --k-ink:#0b0d12; --k-ink-soft:#4a4f5a; --k-bg:#ffffff; --k-bg-2:#f4f6fb; --k-surface:#ffffff; --k-border:rgba(11,13,18,.10); --k-primary:var(--k-blue); --k-primary-ink:#ffffff; --k-link:var(--k-blue); --k-shadow:0 10px 30px rgba(11,13,18,.10); --k-shadow-lift:0 18px 46px rgba(19,56,190,.18); --k-radius:14px; --k-maxw:1120px; --k-content:720px; --k-ease:cubic-bezier(.2,.7,.2,1); --k-font:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --k-display:'Anton','Arial Narrow',sans-serif; color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --k-ink:#f4f6fb; --k-ink-soft:#a7aebd; --k-bg:#0b0d12; --k-bg-2:#0f131c; --k-surface:#141926; --k-border:rgba(255,255,255,.12); --k-primary:var(--k-blue-bright); --k-primary-ink:#0b0d12; --k-link:#7f97ff; --k-shadow:0 10px 30px rgba(0,0,0,.5); --k-shadow-lift:0 18px 46px rgba(0,0,0,.6); color-scheme:dark; } } :root[data-theme="dark"]{ --k-ink:#f4f6fb; --k-ink-soft:#a7aebd; --k-bg:#0b0d12; --k-bg-2:#0f131c; --k-surface:#141926; --k-border:rgba(255,255,255,.12); --k-primary:var(--k-blue-bright); --k-primary-ink:#0b0d12; --k-link:#7f97ff; --k-shadow:0 10px 30px rgba(0,0,0,.5); --k-shadow-lift:0 18px 46px rgba(0,0,0,.6); color-scheme:dark; } /* --- Reset-ish base --- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} img,svg,video{max-width:100%;height:auto;display:block} a{color:var(--k-link);text-underline-offset:3px} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--k-yellow-deep);outline-offset:2px} h1,h2,h3,h4{font-family:var(--k-display);font-weight:400;letter-spacing:.5px;text-transform:uppercase;line-height:1.04;margin:0 0 .5em} h1{font-size:clamp(2.3rem,6vw,4rem)} h2{font-size:clamp(1.9rem,4vw,2.8rem)} h3{font-size:1.5rem} h4{font-size:1.2rem;letter-spacing:.3px} p,ul,ol,blockquote,table,figure,pre{margin:0 0 1.1rem} :where(.entry-content) a{color:var(--k-link)} /* --- Layout helpers --- */ .k-wrap{max-width:var(--k-maxw);margin-inline:auto;padding-inline:22px} .k-narrow{max-width:var(--k-content);margin-inline:auto;padding-inline:22px} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--k-ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0} .skip-link:focus{left:0} .eyebrow{font:700 13px/1 var(--k-font);letter-spacing:.16em;text-transform:uppercase;color:var(--k-primary);display:inline-block;margin-bottom:.6rem} /* --- Buttons --- */ .k-btn{display:inline-flex;align-items:center;gap:.5em;padding:14px 26px;border-radius:12px;font:700 15.5px/1 var(--k-font);text-decoration:none;border:0;cursor:pointer;transition:transform .18s var(--k-ease),box-shadow .18s var(--k-ease),background .18s} .k-btn:hover{transform:translateY(-2px)} .k-btn--primary{background:var(--k-primary);color:var(--k-primary-ink);box-shadow:0 8px 24px rgba(19,56,190,.30)} .k-btn--yellow{background:var(--k-yellow);color:#0b0d12;box-shadow:0 8px 24px rgba(255,214,10,.35)} .k-btn--ghost{background:transparent;color:var(--k-ink);border:2px solid var(--k-border)} .k-chip{display:inline-block;padding:7px 14px;border-radius:99px;font:600 13.5px/1 var(--k-font);background:color-mix(in srgb,var(--k-primary) 12%,transparent);color:var(--k-primary);border:1px solid color-mix(in srgb,var(--k-primary) 24%,transparent)} /* --- Header --- */ .site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--k-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--k-border)} .site-header .k-wrap{display:flex;align-items:center;gap:20px;min-height:72px} .site-branding{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--k-ink)} .site-branding img,.site-branding .custom-logo{width:46px;height:46px;object-fit:contain} .site-branding .site-title{font:400 22px/1 var(--k-display);letter-spacing:1px;text-transform:uppercase;margin:0} .site-branding .site-desc{font:700 10.5px/1.2 var(--k-font);letter-spacing:.13em;color:var(--k-ink-soft);text-transform:uppercase} .site-branding .stack{display:flex;flex-direction:column;gap:3px} .main-nav{margin-left:auto} .main-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0} .main-nav a{color:var(--k-ink-soft);text-decoration:none;font-weight:600;font-size:15px;position:relative;padding:6px 0;display:inline-block} .main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--k-yellow);transition:right .25s var(--k-ease)} .main-nav a:hover,.main-nav .current-menu-item>a{color:var(--k-ink)} .main-nav a:hover::after,.main-nav .current-menu-item>a::after{right:0} .header-cta{flex:0 0 auto} .header-account{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--k-ink);font-weight:700;font-size:14px;padding:8px 12px;border-radius:99px;border:1px solid var(--k-border);transition:background .18s var(--k-ease),transform .18s var(--k-ease)} .header-account:hover{background:var(--k-bg-2);transform:translateY(-1px)} .header-account.is-in{border-color:transparent;background:color-mix(in srgb,var(--k-primary) 12%,transparent);color:var(--k-primary)} .header-account__ico{font-size:16px;line-height:1} .menu-toggle{display:none;background:transparent;border:2px solid var(--k-border);color:var(--k-ink);border-radius:10px;padding:9px 12px;font-size:18px;cursor:pointer} @media(max-width:900px){ .main-nav{position:fixed;inset:72px 0 auto 0;background:var(--k-bg);border-bottom:1px solid var(--k-border);padding:10px 22px 18px;transform:translateY(-120%);transition:transform .28s var(--k-ease);margin:0} .main-nav.open{transform:none} .main-nav ul{flex-direction:column;gap:2px} .main-nav a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--k-border)} .menu-toggle{display:inline-flex;margin-left:auto} .site-branding .site-desc{display:none} .header-cta{display:none} .header-account{margin-left:auto;padding:8px 10px} .header-account__lbl{display:none} .menu-toggle{margin-left:8px} } /* --- Page scaffolding --- */ .site-main{min-height:50vh} .page-hero{padding:clamp(40px,7vw,72px) 0 0} .page-hero .entry-title{margin:0} .entry{padding:clamp(28px,5vw,48px) 0 clamp(48px,8vw,80px)} .entry-content{max-width:var(--k-content)} .entry-content h2,.entry-content h3{margin-top:1.6em} .entry-content img,.entry-content .wp-block-image{border-radius:var(--k-radius)} .entry-content blockquote{margin:1.5em 0;padding:6px 0 6px 20px;border-left:4px solid var(--k-yellow);color:var(--k-ink-soft);font-size:1.12rem} .entry-content :where(figure,.wp-block-embed){margin:1.6em 0} .entry-content table{width:100%;border-collapse:collapse} .entry-content :where(th,td){padding:11px 12px;border:1px solid var(--k-border);text-align:left} .entry-content th{background:var(--k-bg-2);font-weight:800} .alignwide{max-width:min(1040px,92vw);margin-inline:auto} .alignfull{max-width:none;margin-inline:calc(50% - 50vw);width:100vw} .entry-meta{color:var(--k-ink-soft);font-size:14px;margin-bottom:1rem} .entry-meta a{color:inherit} /* --- Cards / archive grid --- */ .k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px} .k-card{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--k-radius);overflow:hidden;box-shadow:var(--k-shadow);transition:transform .22s var(--k-ease),box-shadow .22s var(--k-ease)} .k-card:hover{transform:translateY(-6px);box-shadow:var(--k-shadow-lift)} .k-card a.k-card__thumb{display:block;aspect-ratio:16/9;background:linear-gradient(120deg,var(--k-primary),var(--k-yellow));overflow:hidden} .k-card a.k-card__thumb img{width:100%;height:100%;object-fit:cover} .k-card__body{padding:18px} .k-card__body h2,.k-card__body h3{font-family:var(--k-font);font-weight:800;text-transform:none;letter-spacing:0;font-size:1.2rem;margin:.1em 0 .4em} .k-card__body h2 a,.k-card__body h3 a{color:var(--k-ink);text-decoration:none} .k-card__body p{color:var(--k-ink-soft);font-size:15px;margin:0} .k-card__meta{margin-top:12px;font-size:13px;color:var(--k-primary);font-weight:700} /* --- Forms --- */ input,textarea,select{width:100%;max-width:100%;padding:12px 14px;border:1px solid var(--k-border);border-radius:11px;background:var(--k-bg);color:var(--k-ink);font:500 15px/1.5 var(--k-font)} input[type=submit],button,.wp-block-search__button{width:auto;cursor:pointer} input:focus,textarea:focus,select:focus{border-color:var(--k-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-primary) 25%,transparent)} .search-form{display:flex;gap:8px} /* --- FAQ accordion (native
; inserted via the "FAQ section" pattern). Deep-linkable: kinetic.js opens/scrolls to # and adds a copy-link. --- */ .k-faq{display:grid;gap:14px} .k-faq details{background:var(--k-surface);border:1px solid var(--k-border);border-left:3px solid var(--k-yellow);border-radius:12px;overflow:hidden;transition:border-color .2s var(--k-ease),box-shadow .2s var(--k-ease)} .k-faq details[open]{border-color:var(--k-yellow-deep);box-shadow:var(--k-shadow)} .k-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:18px 20px;font-weight:700;font-size:1.05rem} .k-faq summary::-webkit-details-marker{display:none} .k-faq summary::after{content:"";margin-left:8px;flex:0 0 auto;width:11px;height:11px;border-right:2.5px solid var(--k-primary);border-bottom:2.5px solid var(--k-primary);transform:rotate(45deg);transition:transform .25s var(--k-ease)} .k-faq details[open] summary::after{transform:rotate(-135deg)} .k-faq summary:focus-visible{outline:3px solid var(--k-yellow-deep);outline-offset:-3px} .k-faq details>*:not(summary){padding:0 20px 18px;color:var(--k-ink-soft)} .k-faq details>summary+*{padding-top:2px} .k-faq-link{margin-left:auto;background:transparent;border:0;cursor:pointer;font-size:14px;opacity:.45;padding:4px 6px;border-radius:6px;line-height:1;flex:0 0 auto;color:inherit} .k-faq summary:hover .k-faq-link,.k-faq-link:focus-visible{opacity:1} .k-faq-link.is-copied{opacity:1;color:var(--k-primary)} /* Category chips (built by kinetic.js from .k-faq-cat sections) + filtering */ .k-faq-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .k-faq-nav button{background:var(--k-bg-2);border:1px solid var(--k-border);color:var(--k-ink);font:700 13px/1 var(--k-font);padding:9px 15px;border-radius:99px;cursor:pointer;transition:background .15s var(--k-ease),transform .15s var(--k-ease),color .15s} .k-faq-nav button:hover{transform:translateY(-1px)} .k-faq-nav button[aria-pressed="true"]{background:var(--k-primary);color:var(--k-primary-ink);border-color:transparent} .k-faq-cat{scroll-margin-top:90px} .k-faq-cat>:where(h2,h3,h4){margin:6px 0 12px} .k-faq details{scroll-margin-top:90px} .k-faq.is-filtering .k-faq-cat{display:none} .k-faq.is-filtering .k-faq-cat.is-active{display:block} @media (prefers-reduced-motion: reduce){.k-faq summary::after{transition:none}} /* --- Pagination --- */ .k-pagination{margin:40px 0} .k-pagination .page-numbers{display:inline-block;padding:9px 14px;border:1px solid var(--k-border);border-radius:10px;margin:0 4px 6px 0;text-decoration:none;color:var(--k-ink)} .k-pagination .current{background:var(--k-primary);color:var(--k-primary-ink);border-color:transparent} /* --- Comments --- */ .comments-area{max-width:var(--k-content);margin:40px auto 0} .comment-list{list-style:none;padding:0} .comment-list ol{list-style:none} .comment-body{padding:14px 0;border-bottom:1px solid var(--k-border)} /* --- Footer --- */ .site-footer{background:var(--k-ink);color:#e7eaf2;margin-top:60px} :root[data-theme="dark"] .site-footer{background:#05070c} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-footer{background:#05070c}} .site-footer a{color:#aeb6c7;text-decoration:none} .site-footer a:hover{color:var(--k-yellow)} .footer-widgets{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;padding:54px 0 30px} .footer-widgets .widget h2,.footer-widgets h4{color:#fff;font-size:1.05rem} .footer-widgets ul{list-style:none;padding:0;margin:0} .footer-widgets li{padding:5px 0} .footer-brand{display:flex;align-items:center;gap:12px} .footer-brand img{width:52px;height:52px} .footer-brand b{font:400 26px/1 var(--k-display);color:#fff;letter-spacing:1px} .site-info{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13.5px;color:#9aa2b4;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} @media(max-width:760px){.footer-widgets{grid-template-columns:1fr 1fr}} /* --- Sticky call bar (mobile) --- */ .k-callbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;background:var(--k-ink);color:#fff;border-radius:99px;padding:8px 10px 8px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);font:600 14px/1 var(--k-font);white-space:nowrap} :root[data-theme="dark"] .k-callbar{background:#141926;border:1px solid var(--k-border)} .k-callbar a{background:var(--k-yellow);color:#0b0d12;text-decoration:none;padding:9px 16px;border-radius:99px;font-weight:700} .k-callbar a.k-callbar__wa{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} .k-callbar__close{background:0;border:0;color:#9aa0a6;font-size:18px;line-height:1;cursor:pointer;padding:6px 8px} @media(min-width:922px){.k-callbar{display:none}} /* --- Scroll-reveal (JS adds .is-in; no-JS shows everything) --- */ .k-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--k-ease),transform .6s var(--k-ease)} .k-reveal.is-in{opacity:1;transform:none} .k-stagger>*{opacity:0;transform:translateY(16px);transition:opacity .55s var(--k-ease),transform .55s var(--k-ease)} .k-stagger.is-in>*{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .k-btn:hover,.k-card:hover{transform:none} .k-reveal,.k-stagger>*{opacity:1!important;transform:none!important} }