/* Theme Name: ULALL Theme URI: https://ulall.org Author: ULALL Author URI: https://ulall.org Description: Premium WordPress theme for Unique Link Auto and Logistics Limited (ULALL) — auto repair, diagnostics and fleet servicing. Deep blue & purple brand palette, built for lead generation and a future fleet client portal. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ulall */ /* ============================================================ 0. DESIGN TOKENS ============================================================ */ :root{ /* Brand core — blue with a touch of deep purple */ --c-navy-950:#050915; --c-navy-900:#0a1128; --c-navy-800:#0f1a3d; --c-blue-700:#123b8f; --c-blue-600:#1650c9; --c-blue-500:#2f6bff; --c-blue-400:#5f8bff; --c-purple-800:#2c1660; --c-purple-600:#4c2596; --c-purple-500:#7b3fd6; --c-purple-400:#a06bff; --grad-hero: linear-gradient(135deg, var(--c-navy-950) 0%, var(--c-blue-700) 46%, var(--c-purple-600) 100%); --grad-accent: linear-gradient(120deg, var(--c-blue-500) 0%, var(--c-purple-500) 100%); --grad-accent-soft: linear-gradient(120deg, rgba(47,107,255,.14) 0%, rgba(123,63,214,.14) 100%); --grad-line: linear-gradient(90deg, var(--c-blue-500), var(--c-purple-500)); --c-ink:#0b0e1a; --c-body:#4a5169; --c-muted:#8892a8; --c-mist:#f4f6fb; --c-mist-2:#eef1f9; --c-line:#e4e8f2; --c-white:#ffffff; --shadow-sm: 0 1px 3px rgba(10,17,40,.05); --shadow-md: 0 8px 24px -12px rgba(10,17,40,.14); --shadow-lg: 0 24px 48px -20px rgba(10,17,40,.22); --shadow-glow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 40px -16px rgba(10,17,40,.5); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 22px; --radius-pill: 999px; --ff-head: "Sora", "Segoe UI", sans-serif; --ff-body: "Inter", "Segoe UI", sans-serif; --container: 1320px; --pad: clamp(20px, 5vw, 64px); --section-y: clamp(80px, 11vw, 152px); --ease: cubic-bezier(.22,1,.36,1); } /* ============================================================ 1. RESET & BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--ff-body); color:var(--c-body); background:var(--c-white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } h1,h2,h3,h4{ font-family:var(--ff-head); font-weight:600; color:var(--c-ink); margin:0; line-height:1.08; letter-spacing:-0.02em; } p{ margin:0; } .container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); } .reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; } .reveal-delay-3{ transition-delay:.24s; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--c-blue-600); } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--grad-line); border-radius:2px; } .section-head{ max-width:640px; margin-bottom:48px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ font-size:clamp(30px,3.6vw,46px); margin-top:14px; font-weight:600; } .section-head p{ margin-top:16px; font-size:17px; line-height:1.7; color:var(--c-body); font-weight:400; } /* ============================================================ 2. BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:var(--radius-pill); font-weight:500; font-size:14px; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn-primary{ background:var(--grad-accent); color:#fff; box-shadow:0 10px 22px -12px rgba(76,37,150,.45); } .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(76,37,150,.55); } .btn-white{ background:#fff; color:var(--c-ink); } .btn-white:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -14px rgba(0,0,0,.35); } .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); } .btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); transform:translateY(-1px); } .btn-dark{ background:var(--c-ink); color:#fff; } .btn-dark:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-outline-dark{ background:transparent; color:var(--c-ink); border-color:var(--c-line); } .btn-outline-dark:hover{ border-color:var(--c-ink); transform:translateY(-1px); } .btn-sm{ padding:10px 20px; font-size:13px; } .btn-arrow{ transition:transform .3s var(--ease); } .btn:hover .btn-arrow{ transform:translateX(4px); } /* ============================================================ 3. HEADER / NAV ============================================================ */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; --scroll:0; /* 0 = top of page, 1 = fully scrolled — set every frame by main.js */ padding-top:calc(20px - 7px * var(--scroll)); padding-bottom:calc(20px - 7px * var(--scroll)); background:linear-gradient(rgba(5,9,21,.55), transparent); } /* The solid/blurred state fades in continuously with scroll position, driven purely by the --scroll custom property above (see main.js), so the header genuinely blends from "over the hero" to "solid bar" as you scroll — on every browser, including iOS Safari where animating backdrop-filter with a CSS transition alone can look like a hard cut — and every breakpoint below can redefine the padding formula without JS ever fighting it with hardcoded inline pixel values. */ .site-header-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(5,9,21,.86); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 1px 0 rgba(255,255,255,.06); opacity:var(--scroll, 0); } .site-header .container{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; } .brand{ display:flex; align-items:center; gap:10px; font-family:var(--ff-head); font-weight:600; font-size:19px; color:#fff; letter-spacing:0; justify-self:start; z-index:95; } .brand-mark{ width:32px; height:32px; border-radius:9px; background:var(--grad-accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; } .brand small{ display:block; font-size:9px; font-weight:500; letter-spacing:.16em; color:rgba(255,255,255,.5); margin-top:1px; white-space:nowrap; } .nav-primary{ display:flex; align-items:center; gap:32px; justify-self:center; } .nav-primary a{ font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.85); position:relative; padding:6px 0; } .nav-primary a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .nav-primary a:hover{ color:#fff; } .nav-primary a:hover::after{ transform:scaleX(1); } .header-actions{ display:flex; align-items:center; gap:14px; justify-self:end; z-index:95; } .header-actions .btn{ padding:9px 20px; font-size:12.5px; } .nav-toggle{ display:none; width:38px; height:38px; border:1px solid rgba(255,255,255,.3); border-radius:8px; background:transparent; align-items:center; justify-content:center; flex-shrink:0; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:#fff; position:relative; transition:transform .3s var(--ease), opacity .3s var(--ease), top .3s var(--ease); } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } .nav-toggle.is-active span{ background:transparent; } .nav-toggle.is-active span::before{ top:0; transform:rotate(45deg); } .nav-toggle.is-active span::after{ top:0; transform:rotate(-45deg); } .nav-cta{ display:none; } /* ============================================================ 4. HERO ============================================================ */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:var(--grad-hero); overflow:hidden; padding-top:clamp(120px,18vh,190px); text-align:center; } .hero::before, .hero::after{ content:""; position:absolute; border-radius:50%; filter:blur(100px); opacity:.4; pointer-events:none; } .hero::before{ width:560px; height:560px; background:radial-gradient(circle, var(--c-purple-500), transparent 70%); top:-160px; right:-120px; animation:float1 14s ease-in-out infinite; } .hero::after{ width:460px; height:460px; background:radial-gradient(circle, var(--c-blue-500), transparent 70%); bottom:-180px; left:-140px; animation:float2 16s ease-in-out infinite; } @keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-30px,30px);} } @keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(30px,-24px);} } .hero-grid{ position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); } .hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; flex:1; padding-bottom:56px; } .hero-tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--radius-pill); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.85); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:none; margin-bottom:28px; } .hero-tag .dot{ width:6px; height:6px; border-radius:50%; background:#4fe0a5; box-shadow:0 0 0 4px rgba(79,224,165,.25); } .hero h1{ color:#fff; font-size:clamp(40px,6.6vw,80px); max-width:900px; font-weight:600; letter-spacing:-.03em; } .hero h1 em{ font-style:normal; background:linear-gradient(120deg,#8bb0ff,#c79bff); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero p.lead{ color:rgba(255,255,255,.68); font-size:clamp(16px,1.5vw,18px); max-width:520px; margin:20px auto 0; line-height:1.7; font-weight:400; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; justify-content:center; margin-top:auto; padding-top:56px; } .hero-actions .btn{ min-width:200px; } .scroll-cue{ position:relative; margin-top:28px; z-index:2; color:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; } .scroll-cue .chev{ width:14px; height:14px; border-right:2px solid rgba(255,255,255,.6); border-bottom:2px solid rgba(255,255,255,.6); transform:rotate(45deg); animation:chevDown 1.8s infinite; } @keyframes chevDown{ 0%{ opacity:0; transform:translateY(-4px) rotate(45deg);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(8px) rotate(45deg);} } /* ============================================================ 5. TRUST STRIP ============================================================ */ .trust-strip{ background:var(--c-white); border-bottom:1px solid var(--c-line); } .trust-strip .container{ display:flex; flex-wrap:wrap; gap:20px 0; justify-content:space-between; align-items:center; padding-block:26px; } .trust-item{ display:flex; align-items:center; gap:10px; padding-inline:24px; border-left:1px solid var(--c-line); font-size:13px; font-weight:600; color:var(--c-ink); letter-spacing:.02em; } .trust-item:first-child{ border-left:none; padding-left:0; } .trust-item svg{ flex:none; color:var(--c-blue-500); } /* ============================================================ 6. SERVICES ============================================================ */ .services{ padding-block:var(--section-y); background:var(--c-mist); } .service-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; } .service-card{ position:relative; background:#fff; border-radius:var(--radius-lg); padding:44px 38px; box-shadow:var(--shadow-sm); border:1px solid transparent; overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease); } .service-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad-accent); opacity:0; transition:opacity .4s var(--ease); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } .service-card:hover::before{ opacity:1; } .service-icon{ width:58px; height:58px; border-radius:16px; background:var(--grad-accent-soft); display:flex; align-items:center; justify-content:center; color:var(--c-purple-600); margin-bottom:26px; } .service-card h3{ font-size:22px; margin-bottom:12px; } .service-card p{ font-size:15px; line-height:1.75; color:var(--c-body); margin-bottom:22px; } .service-card ul{ margin-bottom:24px; } .service-card ul li{ font-size:14px; color:var(--c-ink); padding:7px 0; display:flex; gap:10px; align-items:flex-start; border-top:1px dashed var(--c-line); } .service-card ul li:first-child{ border-top:none; } .service-card ul li svg{ flex:none; margin-top:2px; color:var(--c-blue-500); } .card-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; color:var(--c-blue-600); text-transform:none; letter-spacing:0; } .card-link svg{ transition:transform .3s var(--ease); } .card-link:hover svg{ transform:translateX(4px); } /* ============================================================ 7. STATS BAND ============================================================ */ .stats-band{ background:var(--grad-hero); padding-block:76px; position:relative; overflow:hidden; } .stats-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.08), transparent 55%); } .stats-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); } .stat{ text-align:center; padding-inline:20px; border-left:1px solid rgba(255,255,255,.14); } .stat:first-child{ border-left:none; } .stat .num{ font-family:var(--ff-head); font-size:clamp(34px,4.2vw,54px); font-weight:500; letter-spacing:-.02em; color:#fff; } .stat .num span{ background:linear-gradient(120deg,#9fbaff,#d3b4ff); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .label{ margin-top:10px; font-size:12.5px; letter-spacing:.04em; text-transform:none; color:rgba(255,255,255,.6); font-weight:400; } /* ============================================================ 8. GALLERY ============================================================ */ .gallery{ padding-block:var(--section-y); } .gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; } .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .gallery-tile{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; background:var(--grad-hero); display:flex; align-items:flex-end; padding:20px; isolation:isolate; } .gallery-tile:nth-child(2){ background:linear-gradient(145deg,var(--c-purple-800),var(--c-blue-700)); } .gallery-tile:nth-child(3){ background:linear-gradient(160deg,var(--c-navy-800),var(--c-purple-600)); } .gallery-tile:nth-child(4){ background:linear-gradient(150deg,var(--c-blue-700),var(--c-navy-950)); } .gallery-tile::before{ content:""; position:absolute; inset:0; opacity:.5; z-index:-1; background-image:radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 45%); } .gallery-tile svg{ position:absolute; right:16px; top:16px; opacity:.35; color:#fff; } .gallery-tile .tag{ color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; } .gallery-tile .sub{ color:rgba(255,255,255,.65); font-size:12px; margin-top:2px; } .gallery-note{ margin-top:18px; font-size:13px; color:var(--c-muted); } /* ============================================================ 9. PORTAL TEASER ============================================================ */ .portal{ padding-block:var(--section-y); background:var(--c-mist); } .portal-card{ background:var(--grad-hero); border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; box-shadow:var(--shadow-glow); position:relative; } .portal-copy{ padding:clamp(36px,5vw,64px); position:relative; z-index:2; } .portal-copy h2{ color:#fff; font-size:clamp(26px,3vw,36px); margin-top:14px; } .portal-copy p{ color:rgba(255,255,255,.68); margin-top:16px; font-size:15.5px; line-height:1.75; max-width:460px; } .portal-copy .eyebrow{ color:#bcd0ff; } .portal-copy .eyebrow::before{ background:linear-gradient(90deg,#fff,#c79bff); } .portal-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; } .portal-mock{ position:relative; padding:40px; } .mock-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); border-radius:var(--radius-md); padding:22px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); } .mock-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .mock-panel-head span{ color:#fff; font-weight:700; font-size:13px; letter-spacing:.03em; } .mock-dot-row{ display:flex; gap:6px; } .mock-dot-row i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); display:block; } .mock-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin-bottom:10px; } .mock-row:last-child{ margin-bottom:0; } .mock-row .veh{ color:#fff; font-size:13px; font-weight:600; } .mock-row .veh small{ display:block; color:rgba(255,255,255,.5); font-weight:500; font-size:11px; margin-top:2px; } .pill{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-pill); } .pill-ready{ background:rgba(79,224,165,.18); color:#7cf0c0; } .pill-progress{ background:rgba(95,139,255,.2); color:#a9c2ff; } .pill-wait{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); } /* ============================================================ 11. CTA BAND ============================================================ */ .cta-band{ padding-block:88px; background:var(--grad-accent); text-align:center; position:relative; overflow:hidden; } .cta-band h2{ color:#fff; font-size:clamp(26px,3.6vw,42px); } .cta-band p{ color:rgba(255,255,255,.85); margin-top:14px; font-size:16px; } .cta-actions{ margin-top:32px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .cta-band .btn-ghost{ border-color:rgba(255,255,255,.55); } .cta-band .btn-dark{ background:#0b0e1a; } /* ============================================================ 12. QUOTE FORM PAGE ============================================================ */ .page-hero{ background:var(--grad-hero); padding:170px 0 90px; position:relative; overflow:hidden; } .page-hero .container{ position:relative; z-index:2; } .page-hero .eyebrow{ color:#bcd0ff; } .page-hero .eyebrow::before{ background:linear-gradient(90deg,#fff,#c79bff); } .page-hero h1{ color:#fff; font-size:clamp(32px,4.6vw,52px); margin-top:14px; max-width:720px; } .page-hero p{ color:rgba(255,255,255,.7); font-size:16.5px; margin-top:16px; max-width:560px; } .quote-section{ padding-block:var(--section-y); } .quote-wrap{ display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:flex-start; } .quote-side h3{ font-size:22px; } .quote-side p{ margin-top:14px; font-size:15px; line-height:1.75; } .contact-line{ display:flex; align-items:center; gap:12px; margin-top:20px; font-size:14.5px; font-weight:600; color:var(--c-ink); } .contact-line svg{ color:var(--c-blue-500); flex:none; } .type-switch{ display:flex; gap:10px; margin-bottom:28px; background:var(--c-mist); padding:6px; border-radius:var(--radius-pill); } .type-switch button{ flex:1; border:none; background:transparent; padding:12px 18px; border-radius:var(--radius-pill); font-weight:700; font-size:13.5px; letter-spacing:.02em; color:var(--c-muted); transition:.3s var(--ease); } .type-switch button.active{ background:#fff; color:var(--c-ink); box-shadow:var(--shadow-sm); } .quote-form{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:clamp(24px,4vw,42px); box-shadow:var(--shadow-sm); } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; } .form-field.full{ grid-column:1/-1; } .form-field label{ font-size:13px; font-weight:700; color:var(--c-ink); } .form-field input, .form-field select, .form-field textarea{ border:1px solid var(--c-line); border-radius:var(--radius-sm); padding:13px 16px; font-size:14.5px; font-family:inherit; background:var(--c-mist); transition:border-color .25s, box-shadow .25s; color:var(--c-ink); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--c-blue-500); box-shadow:0 0 0 4px rgba(47,107,255,.14); background:#fff; } .fleet-fields{ display:none; } .fleet-fields.active{ display:contents; } .form-note{ font-size:12.5px; color:var(--c-muted); margin-top:4px; } .password-field{ position:relative; } .password-field input{ width:100%; padding-right:46px; } .password-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:8px; color:var(--c-muted); cursor:pointer; padding:0; } .password-toggle:hover{ color:var(--c-ink); background:var(--c-mist-2); } /* ============================================================ 13. FOOTER ============================================================ */ .site-footer{ background:var(--c-navy-950); color:rgba(255,255,255,.6); padding-top:80px; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); } .footer-brand .brand{ color:#fff; } .footer-brand p{ margin-top:16px; font-size:14px; line-height:1.75; max-width:280px; } .social-row{ display:flex; gap:10px; margin-top:22px; } .social-row a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition:.3s; } .social-row a:hover{ background:var(--grad-accent); border-color:transparent; } .footer-col h4{ color:#fff; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; } .footer-col ul li{ margin-bottom:13px; font-size:14px; } .footer-col ul li a:hover{ color:#fff; } .footer-contact li{ display:flex; gap:10px; align-items:flex-start; } .footer-contact svg{ flex:none; margin-top:3px; color:var(--c-blue-400); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:26px; font-size:12.5px; flex-wrap:wrap; gap:10px; } .footer-bottom a{ color:rgba(255,255,255,.6); } .footer-bottom a:hover{ color:#fff; } /* ============================================================ 14. GENERIC PAGE CONTENT (About etc.) ============================================================ */ .page-content{ padding-block:var(--section-y); } .page-content .container{ max-width:860px; } .page-content h2{ font-size:28px; margin-top:36px; margin-bottom:14px; } .page-content p{ font-size:16px; line-height:1.85; margin-bottom:18px; } /* ============================================================ 16. ABOUT PAGE ============================================================ */ .about-story{ padding-block:var(--section-y); } .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .about-visual{ aspect-ratio:1/1; border-radius:var(--radius-lg); background:var(--grad-hero); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); } .about-visual svg{ opacity:.9; } .about-copy h2{ font-size:clamp(26px,3.2vw,38px); margin-bottom:18px; } .about-copy p{ font-size:16px; line-height:1.85; color:var(--c-body); margin-bottom:16px; } .values{ padding-block:var(--section-y); background:var(--c-mist); } .values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .value-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-md); padding:32px 28px; } .value-card .service-icon{ margin-bottom:20px; } .value-card h3{ font-size:18px; margin-bottom:10px; } .value-card p{ font-size:14.5px; line-height:1.7; color:var(--c-body); } /* ============================================================ 17. BLOG (listing + single post) ============================================================ */ .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .blog-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-md); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .blog-thumb{ aspect-ratio:16/10; background:var(--grad-hero); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .blog-thumb img{ width:100%; height:100%; object-fit:cover; } .blog-thumb svg{ opacity:.5; } .blog-body{ padding:24px; } .blog-meta{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-blue-600); margin-bottom:10px; } .blog-body h3{ font-size:18px; margin-bottom:10px; line-height:1.4; } .blog-body h3 a{ color:var(--c-ink); } .blog-body h3 a:hover{ color:var(--c-blue-600); } .blog-excerpt{ font-size:14px; line-height:1.7; color:var(--c-body); margin-bottom:16px; } .blog-empty{ text-align:center; padding:60px 20px; color:var(--c-muted); } .pagination-row{ display:flex; justify-content:center; gap:10px; margin-top:48px; } .pagination-row a, .pagination-row span{ padding:10px 16px; border:1px solid var(--c-line); border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; color:var(--c-ink); } .pagination-row .current{ background:var(--grad-accent); color:#fff; border-color:transparent; } .single-post-meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; } .single-post-meta span{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:rgba(255,255,255,.65); } .single-post-meta svg{ color:#bcd0ff; } .post-body{ font-size:16.5px; line-height:1.9; color:var(--c-body); } .post-body h2{ font-size:26px; margin-top:36px; margin-bottom:14px; color:var(--c-ink); } .post-body h3{ font-size:20px; margin-top:28px; margin-bottom:12px; color:var(--c-ink); } .post-body p{ margin-bottom:18px; } .post-body img{ border-radius:var(--radius-md); margin:24px 0; } .post-body ul, .post-body ol{ margin:0 0 18px 22px; padding:0; } .post-body li{ margin-bottom:8px; line-height:1.7; } .post-nav{ display:flex; justify-content:space-between; gap:20px; padding-top:32px; margin-top:40px; border-top:1px solid var(--c-line); flex-wrap:wrap; } .post-nav a{ font-weight:700; font-size:14px; color:var(--c-blue-600); } /* ============================================================ 18. FLEET PORTAL (login + client dashboard) ============================================================ */ .portal-login-wrap{ padding-block:var(--section-y); display:flex; justify-content:center; } .portal-login-card{ width:100%; max-width:440px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-sm); } .portal-login-card h2{ font-size:22px; margin-bottom:8px; } .portal-login-card > p{ font-size:14.5px; color:var(--c-body); margin-bottom:26px; line-height:1.7; } .portal-error{ background:#fff1f0; border:1px solid #ffc9c4; color:#9c1c11; font-size:13.5px; font-weight:600; padding:12px 16px; border-radius:12px; margin-bottom:20px; } .portal-notice{ background:var(--c-mist); border:1px solid var(--c-line); color:var(--c-body); font-size:13.5px; font-weight:600; padding:12px 16px; border-radius:12px; margin-bottom:20px; } .portal-note{ margin-top:22px; font-size:13px; color:var(--c-muted); line-height:1.7; text-align:center; } .portal-dashboard{ padding-block:var(--section-y); } .portal-welcome{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--c-line); } .portal-welcome h2{ font-size:24px; } .portal-welcome h2 .welcome-company{ font-size:16px; font-weight:500; color:var(--c-muted); } .portal-welcome p{ font-size:14px; color:var(--c-muted); margin-top:4px; } .portal-welcome .btn{ padding:11px 22px; font-size:13px; } .client-group{ margin-bottom:44px; } .client-group h3{ font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--c-muted); margin-bottom:18px; padding-bottom:10px; border-bottom:1px dashed var(--c-line); } .client-group-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .client-group-head h3{ margin-bottom:0; padding-bottom:0; border-bottom:none; flex:1; } .client-group-head .btn{ margin-bottom:14px; } .client-group-contact{ font-size:13px; color:var(--c-muted); text-transform:none; letter-spacing:normal; margin-bottom:14px; } .client-group-contact a{ color:var(--c-blue-600); font-weight:600; } .vehicle-condition-note{ font-size:13px; line-height:1.6; color:var(--c-ink); background:var(--c-mist); border-radius:10px; padding:11px 14px; margin-bottom:16px; } .crew-pick-list{ display:flex; flex-direction:column; gap:10px; } .crew-pick-row{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--c-line); border-radius:12px; padding:14px 18px; transition:border-color .25s, transform .25s var(--ease); } .crew-pick-row:hover{ border-color:var(--c-blue-500); transform:translateY(-1px); } .crew-pick-row .bulk-check{ flex:none; width:18px; height:18px; accent-color:var(--c-blue-500); cursor:pointer; } .crew-pick-link{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:16px; } .crew-pick-info{ min-width:0; } .crew-pick-info strong{ display:block; font-size:14.5px; color:var(--c-ink); } .crew-pick-info small{ display:block; font-size:12.5px; color:var(--c-muted); margin-top:2px; } .crew-pick-pills{ display:flex; align-items:center; gap:8px; flex:none; } .crew-flash{ background:#e3faf0; color:#0e7a4f; font-weight:600; font-size:13.5px; padding:12px 16px; border-radius:12px; margin-bottom:24px; } .crew-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; } .crew-view-toggle{ display:flex; gap:8px; background:var(--c-mist); border-radius:12px; padding:5px; flex-wrap:wrap; } .crew-view-toggle a{ font-size:13px; font-weight:700; color:var(--c-muted); padding:8px 16px; border-radius:9px; transition:background .25s,color .25s; } .crew-view-toggle a.is-active{ background:#fff; color:var(--c-ink); box-shadow:var(--shadow-sm); } .crew-view-toggle a:hover{ color:var(--c-ink); } /* Search / status filter bar (crew "All Vehicles" listing) */ .crew-filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:22px; } .filter-input, .filter-select{ border:1px solid var(--c-line); border-radius:var(--radius-sm); padding:11px 14px; font-size:13.5px; font-family:inherit; background:#fff; color:var(--c-ink); } .filter-input{ flex:1; min-width:200px; } .filter-input:focus, .filter-select:focus{ outline:none; border-color:var(--c-blue-500); box-shadow:0 0 0 4px rgba(47,107,255,.14); } .filter-clear{ font-size:13px; font-weight:700; color:var(--c-muted); text-decoration:underline; } .filter-clear:hover{ color:var(--c-ink); } /* Bulk status-update bar (Admin, "All Vehicles" listing) */ .bulk-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; padding:16px 18px; background:var(--c-mist); border-radius:12px; font-size:13.5px; font-weight:600; color:var(--c-ink); } .bulk-bar select{ font-family:inherit; font-size:13.5px; padding:9px 12px; border-radius:8px; border:1px solid var(--c-line); background:#fff; } .bulk-bar:not(.is-active) button[type="submit"]{ opacity:.45; pointer-events:none; } /* Overdue flag — reuses the .pill visual language with a red accent */ .pill-overdue{ background:#fff1f0; color:#c22a1c; } .vehicle-card .pill-overdue{ background:#fff1f0; color:#c22a1c; } .pill-stack{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; } .overdue-text{ color:#c22a1c; font-weight:700; } .overdue-text strong{ color:#c22a1c; } /* Client dashboard: spend/service summary strip */ .portal-stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; } .stat-chip{ background:var(--c-mist); border-radius:14px; padding:18px 16px; text-align:center; } .stat-chip-num{ display:block; font-family:var(--ff-head); font-size:22px; font-weight:600; color:var(--c-ink); } .stat-chip-label{ display:block; margin-top:4px; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--c-muted); font-weight:600; } /* Appointments (client request list + staff review list) */ .appt-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--c-line); border-radius:12px; padding:14px 18px; } .appt-info strong{ display:block; font-size:14.5px; color:var(--c-ink); } .appt-info small{ display:block; font-size:12.5px; color:var(--c-muted); margin-top:2px; } .appt-actions{ display:flex; gap:8px; flex-wrap:wrap; } .appt-actions form{ margin:0; } .appt-pill-requested{ background:var(--c-mist-2); color:var(--c-muted); } .appt-pill-confirmed{ background:#eaf0ff; color:#28459b; } .appt-pill-declined{ background:#fff1f0; color:#c22a1c; } .appt-pill-completed{ background:#e3faf0; color:#0e7a4f; } .stars{ color:#f5a623; letter-spacing:1px; font-size:14px; } .rating-badge{ font-size:12.5px; color:var(--c-muted); padding:6px 0 14px; } .rating-badge .stars{ margin-left:4px; } .rate-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px 0 16px; border-top:none; } .rate-form select, .rate-form input[type="text"]{ font-family:inherit; font-size:12.5px; padding:8px 10px; border-radius:8px; border:1px solid var(--c-line); background:#fff; } .rate-form input[type="text"]{ flex:1; min-width:140px; } .vehicle-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .vehicle-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-md); padding:26px; box-shadow:var(--shadow-sm); } .vehicle-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; } .vehicle-card .pill-ready{ background:#e3faf0; color:#0e7a4f; } .vehicle-card .pill-progress{ background:#eaf0ff; color:#28459b; } .vehicle-card .pill-wait{ background:var(--c-mist-2); color:var(--c-muted); } .vehicle-card-head h4{ font-size:16.5px; margin-bottom:4px; } .vehicle-card-head span{ font-size:13px; color:var(--c-muted); } .vehicle-meta-row{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--c-body); margin-bottom:18px; } .vehicle-meta-row strong{ color:var(--c-ink); } .history-toggle{ width:100%; text-align:left; background:var(--c-mist); border:1px solid var(--c-line); border-radius:12px; padding:12px 16px; font-size:13px; font-weight:700; color:var(--c-ink); display:flex; justify-content:space-between; align-items:center; } .history-toggle svg{ transition:transform .3s var(--ease); } .history-toggle.is-open svg{ transform:rotate(180deg); } .history-list{ display:none; margin-top:14px; } .history-list.is-open{ display:block; } .history-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:14px 0; border-top:1px dashed var(--c-line); } .history-row:first-child{ border-top:none; } .history-row .h-date{ font-size:12.5px; color:var(--c-muted); font-weight:700; min-width:88px; } .history-row .h-desc{ font-size:13.5px; color:var(--c-ink); flex:1; } .history-row .h-cost{ font-size:13px; font-weight:700; color:var(--c-ink); white-space:nowrap; } .history-row .h-invoice{ font-size:12px; font-weight:700; color:var(--c-blue-600); white-space:nowrap; } .history-empty{ font-size:13px; color:var(--c-muted); padding:14px 0; } .portal-empty{ text-align:center; padding:70px 20px; background:var(--c-mist); border-radius:var(--radius-lg); } .portal-empty h3{ font-size:19px; margin-bottom:10px; } .portal-empty p{ font-size:14.5px; color:var(--c-body); margin-bottom:22px; } /* ============================================================ 18b. MISSION / VISION + TRUSTED-BY CLIENTS ============================================================ */ .mission-vision{ padding-block:80px; } .mission-vision-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .mv-card{ background:var(--c-mist); border-radius:var(--radius-lg); padding:38px 36px; } .mv-card p{ margin-top:14px; font-size:15.5px; line-height:1.8; color:var(--c-body); } .clients-band{ padding-block:48px 80px; } .clients-strip-label{ display:block; text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); margin-bottom:22px; } .clients-strip-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; } .client-chip{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; color:var(--c-ink); background:#fff; border:1px solid var(--c-line); border-radius:30px; padding:9px 18px; } .client-chip-logo{ padding:6px 16px; } .client-chip-logo img{ height:26px; width:auto; display:block; } /* ============================================================ 19. RESPONSIVE ============================================================ */ /* Grid blowout guard: a CSS Grid track defaults to fitting its widest child's natural content size (min-width:auto), which is how a