/* Theme Name: DriveOn Rental Theme URI: https://gitlab.com/AtdheKrasniqi/driveon Author: DriveOn Rental Description: Car rental theme built from the DriveOn design — landing page, filterable fleet, and a booking flow with live price summary. Three switchable accent palettes, fully editable from the WordPress Customizer. Version: 1.0.0 License: GPL-2.0-or-later Text Domain: driveon Tags: business, custom-colors, custom-logo, custom-menu, featured-images, responsive-layout, theme-options */ /* ============================================================ TOKENS — accent palette injected by PHP in ============================================================ */ :root { --accent: #2a6fdb; --accent-d: #1f5cbb; --accent-deep: #1a4fa3; --accent-soft: #e0eafa; --accent-soft-ink: #3d5f96; --accent-sel: #eaf1fc; --ink: #1c2432; --ink-2: #57647a; --muted: #79869c; --muted-2: #8494ad; --surface: #f3f6fa; --surface-2:#fbfcfe; --card: #ffffff; --line: #dfe6f0; --line-2: #cdd9ea; --line-dash:#b0c2dc; --chip-bg: #e8eef7; --dark: #1c2432; --dark-line: #39455c; --dark-muted: #a3b1c9; --gold: #f2b544; --gold-h: #ffca5f; --success-bg: #e8f3e4; --font-head: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Figtree", system-ui, sans-serif; --maxw: 1160px; --radius: 20px; --radius-lg: 24px; --radius-md: 14px; --radius-sm: 12px; --shadow-card: 0 8px 28px rgba(40,70,120,.10); --shadow-hero: 0 18px 44px rgba(40,70,120,.16); --transition: .18s ease; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--surface); font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: color var(--transition), background var(--transition), border-color var(--transition); } a:hover { color: var(--accent-deep); } img { max-width: 100%; height: auto; display: block; } input, select, textarea, button { font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-head); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .site-wrap { min-height: 100vh; display: flex; flex-direction: column; } .site-main { flex: 1; } @keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .float-in { animation: floatIn .6s ease both; } .float-in-2 { animation: floatIn .6s .12s ease both; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-block; border-radius: 99px; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; text-align: center; transition: background var(--transition), color var(--transition), border-color var(--transition); } .btn-primary { padding: 14px 30px; color: #fff; background: var(--accent); box-shadow: 0 4px 14px rgba(42,111,219,.35); } .btn-primary:hover { background: var(--accent-d); color: #fff; } .btn-outline { padding: 14px 26px; color: var(--ink); border: 2px solid var(--line-2); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-gold { padding: 15px 34px; color: var(--ink); background: var(--gold); white-space: nowrap; } .btn-gold:hover { background: var(--gold-h); color: var(--ink); } .btn-dark { padding: 13px 28px; border-radius: var(--radius-sm); font-weight: 700; font-size: 15px; color: #fff; background: var(--dark); } .btn-dark:hover { background: var(--accent); color: #fff; } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(243,246,250,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); } .site-logo:hover { color: var(--ink); } .logo-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 19px; } .logo-name { font-family: var(--font-head); font-weight: 700; font-size: 20px; } .site-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nav-pill { padding: 8px 16px; border-radius: 99px; font-weight: 600; font-size: 15px; color: var(--ink-2); } .nav-pill:hover { color: var(--ink); } .nav-pill.active { color: var(--ink); background: var(--accent-soft); } .nav-book { margin-left: 8px; padding: 10px 22px; border-radius: 99px; font-weight: 700; font-size: 15px; color: #fff; background: var(--accent); box-shadow: 0 2px 8px rgba(42,111,219,.35); } .nav-book:hover { background: var(--accent-d); color: #fff; } /* WP menu compatibility — menus render as pills */ .site-nav ul { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .site-nav ul a { padding: 8px 16px; border-radius: 99px; font-weight: 600; font-size: 15px; color: var(--ink-2); display: inline-block; } .site-nav ul .current-menu-item > a, .site-nav ul .current_page_item > a { color: var(--ink); background: var(--accent-soft); } /* ============================================================ HERO ============================================================ */ .hero { padding: 64px 0 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; font-size: 13.5px; margin-bottom: 20px; } .hero-title { font-weight: 800; font-size: 56px; line-height: 1.05; margin: 0 0 18px; letter-spacing: -.5px; text-wrap: balance; } .hero-lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 30px; max-width: 46ch; text-wrap: pretty; } .hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .hero-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hero); aspect-ratio: 5/4; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Striped placeholder used wherever a photo is missing */ .ph { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #e5ebf4, #e5ebf4 14px, #d8e2f0 14px, #d8e2f0 28px); display: grid; place-items: center; } .ph-label { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted-2); background: var(--surface-2); padding: 6px 10px; border-radius: 6px; border: 1px dashed var(--line-dash); } /* ============================================================ QUICK SEARCH BAR ============================================================ */ .searchbar-section { padding: 0 0 64px; } .searchbar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 22px 26px; display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 18px; align-items: end; } .field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 13.5px; color: var(--muted); } .field select, .field input { padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2); font-size: 15px; background: var(--surface-2); color: var(--ink); width: 100%; } .field select:focus, .field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .field-full { grid-column: 1 / -1; } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 64px 0; } .section-title { font-weight: 700; font-size: 34px; margin: 0 0 36px; } .section-band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .section-head .section-title { margin: 0; } .see-all { font-weight: 700; font-size: 15px; } /* ============================================================ PERKS ============================================================ */ .perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .perk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; } .perk-icon { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--accent-soft); display: grid; place-items: center; font-size: 21px; margin-bottom: 16px; } .perk-card h3 { font-weight: 700; font-size: 19px; margin: 0 0 8px; } .perk-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; } /* ============================================================ CAR CARDS ============================================================ */ .cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .car-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .car-media { aspect-ratio: 16/9; position: relative; overflow: hidden; } .car-media img { width: 100%; height: 100%; object-fit: cover; } .car-cat-badge { position: absolute; top: 12px; left: 12px; font-size: 12px; font-weight: 700; color: var(--accent-soft-ink); background: var(--accent-soft); padding: 5px 12px; border-radius: 99px; z-index: 1; } .car-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .car-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .car-name { font-weight: 700; font-size: 18px; margin: 0; } .car-price { font-weight: 700; font-size: 17px; color: var(--accent); white-space: nowrap; } .car-price .per { font-weight: 500; font-size: 13px; color: var(--muted); } .car-specs { display: flex; gap: 8px; flex-wrap: wrap; } .spec-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--chip-bg); padding: 4px 10px; border-radius: 99px; } .car-book { margin-top: auto; text-align: center; padding: 11px 0; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; color: var(--ink); border: 2px solid var(--line-2); } .car-book:hover { border-color: var(--accent); color: var(--accent); } .car-book-solid { margin-top: auto; text-align: center; padding: 11px 0; border-radius: var(--radius-sm); font-weight: 700; font-size: 14.5px; color: #fff; background: var(--accent); } .car-book-solid:hover { background: var(--accent-d); color: #fff; } /* ============================================================ CTA BAND ============================================================ */ .cta-band-section { padding: 0 0 72px; } .cta-band { background: var(--dark); border-radius: var(--radius-lg); padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band h2 { font-weight: 800; font-size: 32px; color: var(--surface); margin: 0 0 10px; } .cta-band p { font-size: 16px; color: var(--dark-muted); margin: 0; } /* ============================================================ FLEET (car archive) ============================================================ */ .page-title { font-weight: 800; font-size: 42px; margin: 0 0 8px; } .page-lede { font-size: 17px; color: var(--ink-2); margin: 0 0 30px; } .fleet-main { padding: 52px 0 72px; } .filter-chips { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; } .chip { padding: 9px 20px; border-radius: 99px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); background: var(--card); border: 1.5px solid var(--line-2); } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { color: #fff; background: var(--dark); border-color: var(--dark); } .chip.active:hover { color: #fff; } /* ============================================================ BOOKING ============================================================ */ .booking-main { padding: 52px 0 72px; } .booking-main .container { max-width: 980px; } .booking-lede { font-size: 17px; color: var(--ink-2); margin: 0 0 36px; } .booking-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; } .booking-panels { display: flex; flex-direction: column; gap: 24px; } .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; } .panel h2 { font-weight: 700; font-size: 20px; margin: 0 0 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .car-options { display: flex; flex-direction: column; gap: 12px; } .car-option { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .car-option:hover { color: var(--ink); border-color: var(--line-2); } .car-option.selected { border-color: var(--accent); background: var(--accent-sel); } .radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-dash); background: transparent; flex: none; transition: border-color var(--transition), background var(--transition); } .car-option.selected .radio-dot { border-color: var(--accent); background: var(--accent); } .opt-info { flex: 1; } .opt-name { font-weight: 700; font-size: 15.5px; } .opt-meta { font-size: 13px; color: var(--muted); } .opt-price { font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; } .opt-price .per { font-weight: 500; font-size: 12.5px; color: var(--muted); } /* Summary card */ .summary { background: var(--dark); border-radius: var(--radius); padding: 28px; position: sticky; top: 96px; color: var(--surface); } .summary h2 { font-weight: 700; font-size: 20px; margin: 0 0 22px; color: var(--surface); } .summary-rows { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; } .summary-row { display: flex; justify-content: space-between; gap: 12px; } .summary-row .k { color: var(--dark-muted); } .summary-row .v { font-weight: 600; text-align: right; } .summary-total { border-top: 1px solid var(--dark-line); padding-top: 14px; display: flex; justify-content: space-between; align-items: baseline; } .summary-total .k { font-weight: 700; font-size: 16px; } .summary-total .v { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--gold); } .btn-confirm { display: block; width: 100%; text-align: center; margin-top: 24px; padding: 14px 0; border-radius: 99px; font-weight: 700; font-size: 16px; color: var(--ink); background: var(--gold); border: 0; cursor: pointer; } .btn-confirm:hover { background: var(--gold-h); color: var(--ink); } .btn-confirm[disabled] { opacity: .6; cursor: wait; } .summary-note { font-size: 12.5px; color: var(--dark-muted); margin: 14px 0 0; text-align: center; } .booking-error { color: #c2452f; font-size: 14px; margin: 12px 0 0; text-align: center; display: none; } /* Confirmation */ .confirm-wrap { max-width: 560px; margin: 40px auto 0; text-align: center; animation: floatIn .5s ease both; } .confirm-icon { width: 84px; height: 84px; border-radius: 50%; background: var(--success-bg); display: grid; place-items: center; font-size: 38px; margin: 0 auto 24px; } .confirm-title { font-weight: 800; font-size: 38px; margin: 0 0 12px; } .confirm-text { font-size: 17px; color: var(--ink-2); line-height: 1.6; margin: 0 0 30px; } .confirm-details { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; display: flex; justify-content: space-between; gap: 16px; font-size: 15px; margin-bottom: 30px; flex-wrap: wrap; } .confirm-details .lbl { color: var(--muted); font-weight: 600; font-size: 12.5px; margin-bottom: 4px; } .confirm-details .val { font-weight: 700; } .confirm-details .val.accent { color: var(--accent); } .confirm-back { font-weight: 700; font-size: 15px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--surface-2); border-top: 1px solid var(--line); } .footer-inner { padding: 36px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 15px; } .footer-copy { font-weight: 600; font-size: 14.5px; color: var(--ink-2); } .footer-links { display: flex; gap: 20px; font-weight: 600; font-size: 14.5px; } .footer-links ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; } /* ============================================================ GENERIC PAGES / BLOG (fallback templates) ============================================================ */ .page-main { padding: 52px 0 72px; } .page-main .container { max-width: 820px; } .entry-content { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); } .entry-content h2, .entry-content h3 { color: var(--ink); } .entry-content a { font-weight: 600; } .entry-content img { border-radius: var(--radius-md); } .entry-meta { font-size: 14px; color: var(--muted); margin: 0 0 30px; } .post-list { display: flex; flex-direction: column; gap: 20px; } .post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; } .post-card h2 { font-size: 22px; margin: 0 0 8px; } .post-card h2 a { color: var(--ink); } .post-card h2 a:hover { color: var(--accent); } .post-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; } .post-card .entry-meta { margin: 0; } .pagination { margin-top: 36px; } .pagination .nav-links, .pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .pagination a, .pagination span.current, .pagination span.dots { display: inline-block; padding: 8px 15px; border-radius: 99px; border: 1.5px solid var(--line-2); font-weight: 600; font-size: 14.5px; color: var(--ink-2); background: var(--card); } .pagination span.current { color: #fff; background: var(--dark); border-color: var(--dark); } /* Error page */ .error-main { padding: 90px 0; text-align: center; } .error-code { font-family: var(--font-head); font-weight: 800; font-size: 90px; color: var(--accent); display: block; line-height: 1; margin-bottom: 12px; } /* Search form */ .search-form { display: flex; gap: 10px; max-width: 480px; } .search-form input[type="search"] { flex: 1; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2); font-size: 15px; background: var(--surface-2); color: var(--ink); } /* ============================================================ COMMENTS ============================================================ */ .comments-area { margin-top: 48px; } .comments-area h3 { font-size: 22px; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .comment { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: 14px; } .comment-list .children { list-style: none; margin: 14px 0 0; padding-left: 24px; } .comment-meta { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; } .comment-content { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .comment-form label { display: block; font-weight: 600; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; } .comment-form input, .comment-form textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-2); font-size: 15px; background: var(--surface-2); color: var(--ink); margin-bottom: 14px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; } .hero-title { font-size: 42px; } .searchbar { grid-template-columns: 1fr 1fr; } .searchbar .btn-dark { grid-column: 1 / -1; } .perks-grid, .cars-grid { grid-template-columns: repeat(2, 1fr); } .booking-grid { grid-template-columns: 1fr; } .summary { position: static; } .cta-band { padding: 40px 32px; } } @media (max-width: 640px) { .container { padding: 0 20px; } .header-inner { height: auto; padding: 12px 0; flex-wrap: wrap; justify-content: center; } .hero-title { font-size: 36px; } .section-title { font-size: 28px; } .page-title { font-size: 34px; } .searchbar { grid-template-columns: 1fr; } .perks-grid, .cars-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; text-align: center; } }