/*
Theme Name: U.S. Fueling Solutions
Theme URI: https://usfuelingsolutions.com
Author: U.S. Fueling Solutions
Description: Custom single-page website theme for aviation fueling field service.
Version: 1.0.0
Text Domain: usfs
*/
:root { --navy:#08162e; --blue:#0b63ce; --pale:#eaf3fb; --red:#df1325; --ink:#142236; --muted:#607083; --line:#d7e0e9; --paper:#f4f7fa; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:white; font-family:Arial,Helvetica,sans-serif; } a { color:inherit; text-decoration:none; }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; } .skip-link { position:fixed; top:-80px; left:16px; z-index:100; padding:12px 18px; background:white; font-weight:800; } .skip-link:focus { top:12px; }
.utility-bar { background:var(--navy); color:#c4d3e1; font-size:12px; } .utility-inner { min-height:36px; display:flex; justify-content:space-between; align-items:center; } .utility-inner a { color:white; font-weight:800; } .utility-inner div span { margin:0 10px; color:var(--red); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); } .header-inner { min-height:88px; display:flex; align-items:center; gap:34px; } .brand { margin-right:auto; display:flex; align-items:center; } .brand img { width:185px; height:75px; object-fit:contain; } nav { display:flex; align-items:center; gap:25px; color:#344458; font-size:13px; font-weight:800; } nav a { padding:34px 0 31px; border-bottom:3px solid transparent; } nav a:hover,nav a:focus-visible { color:var(--blue); border-color:var(--red); }
.button { min-height:52px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; background:var(--blue); border:2px solid var(--blue); color:white; font-size:13px; font-weight:900; transition:.18s ease; } .button:hover,.button:focus-visible { transform:translateY(-2px); background:#084fa8; border-color:#084fa8; box-shadow:0 10px 24px rgba(11,99,206,.25); } .button-small { min-height:44px; padding-inline:17px; } .button-outline { background:rgba(255,255,255,.95); color:var(--navy); border-color:white; }
.hero { min-height:700px; position:relative; overflow:hidden; display:flex; align-items:stretch; background:#b8dafa; } .hero-image { position:absolute; inset:0; background:url('/usfs-hero.png') center right/cover no-repeat; animation:settle .9s ease-out both; } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,16,34,.97) 0%,rgba(7,30,57,.91) 39%,rgba(7,29,54,.42) 64%,rgba(5,25,47,.04) 100%); } .hero-inner { position:relative; z-index:1; display:flex; align-items:center; padding:70px 0 148px; } .hero-copy { max-width:650px; color:white; animation:rise .55s ease-out both; }
.eyebrow { margin:0 0 18px; color:var(--blue); text-transform:uppercase; font-size:11px; font-weight:900; letter-spacing:.17em; } .eyebrow.light,.hero .eyebrow { color:#75b7ff; }
.hero h1,.split-heading h2,.support-band h2,.equipment h2,.coverage h2,.company-network h2,.contact h2 { margin:0; text-transform:uppercase; font-size:clamp(39px,4.5vw,66px); line-height:.95; letter-spacing:-.048em; font-weight:900; } .hero h1 { font-size:clamp(50px,5.1vw,76px); } .hero h1 em { font-style:normal; } .hero h1 em::after { content:""; display:block; width:96px; height:5px; margin-top:23px; background:var(--red); } .hero-lede { max-width:560px; margin:24px 0 29px; color:#e1eaf4; font-size:18px; line-height:1.55; } .hero-actions { display:flex; flex-wrap:wrap; gap:13px; }
.hero-proof { position:absolute; z-index:2; left:0; right:0; bottom:0; background:rgba(5,22,43,.96); border-top:1px solid rgba(255,255,255,.14); color:white; } .proof-grid { min-height:108px; display:grid; grid-template-columns:repeat(3,1fr); } .proof-grid p { margin:0; padding:24px 31px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid rgba(255,255,255,.14); } .proof-grid p:first-child { padding-left:0; } .proof-grid p:last-child { border:0; } .proof-grid strong { font-size:15px; } .proof-grid span { margin-top:6px; color:#aebed0; font-size:12px; }
.section { padding:100px 0; } .split-heading { margin-bottom:43px; display:grid; grid-template-columns:1.25fr .75fr; gap:75px; align-items:end; } .split-heading > p { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .service-card { min-height:320px; padding:29px 26px; display:flex; flex-direction:column; background:white; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .service-card > span { color:var(--red); font-size:11px; font-weight:900; letter-spacing:.14em; } .service-card h3 { margin:46px 0 14px; color:var(--navy); text-transform:uppercase; font-size:22px; line-height:1.08; } .service-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.support-band { padding:90px 0; background:var(--navy); color:white; } .support-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; } .support-grid ol { margin:0; padding:0; list-style:none; } .support-grid li { padding:20px 0; display:grid; grid-template-columns:48px 1fr; gap:18px; border-top:1px solid rgba(255,255,255,.17); } .support-grid li > span { color:#75b7ff; font-size:11px; font-weight:900; } .support-grid strong { text-transform:uppercase; font-size:17px; } .support-grid p { margin:7px 0 0; color:#b7c7d8; font-size:13px; line-height:1.5; }
.equipment { background:var(--paper); } .equipment-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; } .equipment-grid > div:first-child > p:last-child { color:var(--muted); line-height:1.7; } .equipment-list { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); } .equipment-list div { min-height:110px; padding:25px; display:flex; flex-direction:column; gap:18px; background:white; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .equipment-list span { color:var(--red); font-size:10px; font-weight:900; } .equipment-list strong { color:var(--navy); text-transform:uppercase; font-size:15px; }
.coverage { border-top:1px solid var(--line); } .coverage-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; } .coverage-grid > div:last-child > p { margin:0 0 28px; color:var(--muted); line-height:1.7; } .state-row { display:flex; flex-wrap:wrap; gap:8px; } .state-row span { width:48px; height:48px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--navy); font-size:12px; font-weight:900; }
.company-network { padding:90px 0; background:linear-gradient(135deg,#0b63ce,#084a98); color:white; } .network-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; } .network-cards { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.28); border-left:1px solid rgba(255,255,255,.28); } .network-cards article { min-height:210px; padding:24px 21px; position:relative; overflow:hidden; border-right:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28); } .network-cards article.active { background:white; color:var(--navy); } .network-cards small { color:#aed3ff; text-transform:uppercase; font-size:9px; font-weight:900; letter-spacing:.1em; } .network-cards .active small { color:var(--red); } .network-cards h3 { margin:32px 0 11px; text-transform:uppercase; font-size:18px; line-height:1.08; } .network-cards p { margin:0; color:#d9eaff; font-size:12px; line-height:1.55; } .network-cards .active p { color:var(--muted); } .coming-soon-stamp { position:absolute; top:18px; right:-31px; width:132px; padding:7px 0 6px; transform:rotate(35deg); background:var(--red); border-block:2px solid rgba(255,255,255,.85); color:white; text-align:center; text-transform:uppercase; font-size:10px; font-weight:900; letter-spacing:.14em; box-shadow:0 4px 14px rgba(3,14,26,.22); }
.contact { padding:90px 0; background:#061528; color:white; } .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:95px; } .contact-grid > div:first-child > p:last-child { color:#b9c9da; line-height:1.65; } .contact-actions { display:flex; flex-direction:column; align-items:flex-start; } .contact-actions a { width:100%; padding:17px 0; display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,.17); } .contact-actions small { color:#7f94aa; text-transform:uppercase; font-size:9px; font-weight:900; letter-spacing:.13em; } .contact-actions strong { margin-top:6px; font-size:clamp(19px,2vw,27px); } .contact-actions p { color:#a9b9ca; font-size:13px; line-height:1.55; }
footer { padding:31px 0; background:#030e1a; color:#91a4b8; } .footer-inner { display:flex; align-items:center; gap:35px; font-size:11px; } .footer-inner img { width:125px; height:55px; object-fit:contain; background:white; } .footer-inner p:first-of-type { margin-right:auto; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } @keyframes settle { from { transform:scale(1.025); } to { transform:none; } }
@media (max-width:1020px) { nav { display:none; } .service-grid { grid-template-columns:1fr 1fr; } .network-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .shell { width:min(100% - 32px,1180px); } .utility-inner > span { display:none; } .utility-inner { justify-content:center; } .header-inner { min-height:74px; gap:12px; } .brand img { width:125px; height:58px; } .button-small { min-height:40px; padding-inline:11px; font-size:10px; } .hero { min-height:735px; } .hero-image { background-position:66% center; } .hero-shade { background:rgba(4,20,39,.83); } .hero-inner { padding:55px 0 270px; align-items:flex-start; } .hero h1 { font-size:45px; } .hero-lede { font-size:16px; } .hero-actions { flex-direction:column; } .proof-grid { grid-template-columns:1fr; padding:12px 0; } .proof-grid p,.proof-grid p:first-child { padding:8px 0; border:0; } .section { padding:72px 0; } .split-heading,.support-grid,.equipment-grid,.coverage-grid,.contact-grid { grid-template-columns:1fr; gap:35px; } .service-grid,.equipment-list,.network-cards { grid-template-columns:1fr; } .service-card { min-height:230px; } .network-cards article { min-height:175px; } .footer-inner { flex-direction:column; align-items:flex-start; gap:13px; } .footer-inner p:first-of-type { margin-right:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }


/* ===== Request Field Service form (Contact Form 7) ===== */
.contact-form-wrap { margin-top:70px; padding-top:60px; border-top:1px solid rgba(255,255,255,.17); }
.contact-form-wrap h3 { font-size:clamp(26px,3vw,38px); font-weight:900; text-transform:uppercase; line-height:1.05; margin:8px 0 12px; }
.contact-form-wrap > p { max-width:640px; color:rgba(255,255,255,.8); margin-bottom:28px; }
.usfs-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.usfs-form-grid label { display:block; font-size:13px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.85); }
.usfs-form-grid p:has(textarea), .usfs-form-grid p:has(input[type=file]), .usfs-form-grid label:has(textarea), .usfs-form-grid label:has(input[type=file]) { grid-column:1 / -1; }
.usfs-form-grid p { margin:0; }
.usfs-form-grid .wpcf7-form-control-wrap { display:block; margin-top:7px; }
.usfs-form-grid input[type=text], .usfs-form-grid input[type=tel], .usfs-form-grid input[type=email], .usfs-form-grid select, .usfs-form-grid textarea { width:100%; min-height:50px; padding:12px 14px; background:#fff; color:var(--ink); border:2px solid transparent; border-radius:0; font:inherit; font-size:15px; }
.usfs-form-grid select { appearance:auto; }
.usfs-form-grid textarea { min-height:140px; resize:vertical; }
.usfs-form-grid input:focus, .usfs-form-grid select:focus, .usfs-form-grid textarea:focus { outline:none; border-color:var(--blue); }
.usfs-form-grid input[type=file] { display:block; margin-top:8px; color:rgba(255,255,255,.75); font-size:13px; }
.contact-form-wrap .wpcf7-submit { min-height:52px; padding:0 28px; margin-top:24px; background:var(--blue); border:2px solid var(--blue); color:#fff; font-size:13px; font-weight:900; text-transform:uppercase; cursor:pointer; transition:.18s ease; }
.contact-form-wrap .wpcf7-submit:hover { background:var(--red); border-color:var(--red); }
.contact-form-wrap .wpcf7-not-valid-tip { color:#ff8a94; font-size:12px; margin-top:4px; }
.contact-form-wrap .wpcf7-response-output { margin:20px 0 0; padding:12px 16px; border:2px solid var(--blue); color:#fff; }
.contact-form-wrap .wpcf7-spinner { filter:invert(1); }
@media (max-width:760px) { .usfs-form-grid { grid-template-columns:1fr; } .contact-form-wrap { margin-top:50px; padding-top:40px; } }