/* ============================================================ AL-CO Electric — production stylesheet (self-contained) Static site · no build step · no framework. Fonts loaded via in each page . ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Navy (primary) */ --navy-900:#1b2c3f; --navy-800:#23394f; --navy-700:#2d4861; --navy-600:#33506b; --navy-500:#466686; --navy-400:#6e8aa6; --navy-300:#9bb0c5; --navy-200:#c5d2df; --navy-100:#e3eaf1; --navy-50:#f1f5f9; /* Khaki (accent) */ --khaki-800:#6b5d36; --khaki-700:#87764a; --khaki-600:#a08c58; --khaki-500:#bca86a; --khaki-400:#cebd8a; --khaki-300:#ddd0aa; --khaki-200:#ebe2ca; --khaki-100:#f4efe0; /* Neutrals */ --white:#fff; --paper:#f7f5f0; --paper-dim:#efece4; --ink-900:#18222e; --ink-700:#38444f; --ink-500:#5c6873; --ink-400:#7d8893; --gray-300:#c8cdd3; --gray-200:#dde1e6; --gray-100:#eceef1; /* Status */ --success-600:#2e7d52; --success-100:#e2f0e8; --danger-600:#b23b3b; /* Semantic */ --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); --surface-page:var(--paper); --border-subtle:var(--gray-200); --field-border:var(--gray-300); /* Type */ --font-display:'Archivo','Helvetica Neue',Arial,sans-serif; --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; /* Radius / shadow */ --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px; --shadow-sm:0 1px 3px rgba(24,34,46,.08),0 1px 2px rgba(24,34,46,.04); --shadow-md:0 4px 12px rgba(24,34,46,.08),0 2px 4px rgba(24,34,46,.05); --shadow-lg:0 12px 28px rgba(24,34,46,.12),0 4px 8px rgba(24,34,46,.06); --shadow-focus:0 0 0 3px rgba(51,80,107,.28); /* Layout / motion */ --container:1200px; --pad:1.5rem; --ease:cubic-bezier(.2,.7,.3,1); --fast:120ms; } /* ---------- Reset & base ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;font-family:var(--font-body);font-size:16px;line-height:1.5; color:var(--text-body);background:var(--surface-page); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} h1,h2,h3,h4{ font-family:var(--font-display);color:var(--text-strong);font-weight:700; line-height:1.08;letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance; } h1{font-size:clamp(2.4rem,5vw,3.75rem);} h2{font-size:clamp(1.9rem,3.5vw,2.25rem);} h3{font-size:1.4rem;} h4{font-size:1.15rem;letter-spacing:0;} p{margin:0 0 1rem;text-wrap:pretty;} a{color:var(--navy-600);text-decoration:none;text-underline-offset:3px;transition:color var(--fast) var(--ease);} a:hover{text-decoration:underline;} strong{font-weight:700;color:var(--text-strong);} ::selection{background:var(--khaki-300);color:var(--navy-900);} :focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm);} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);} .section{padding-block:clamp(3.5rem,8vw,6rem);} .eyebrow{ font-family:var(--font-display);font-size:.875rem;font-weight:700;text-transform:uppercase; letter-spacing:.12em;color:var(--khaki-700);display:inline-block;margin-bottom:.75rem; } .mono{font-family:var(--font-mono);} .lead{font-size:1.125rem;color:var(--text-muted);} /* Icons (inline SVG sprite, Lucide-style stroke) */ svg.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;} .icon-sprite{display:none;} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border-subtle); } .site-header .bar{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1.5rem;} .site-header .logo img{height:42px;} .nav{display:flex;align-items:center;gap:2rem;} .nav a{ font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--text-muted); padding-bottom:4px;border-bottom:2px solid transparent; } .nav a:hover{color:var(--navy-700);text-decoration:none;} .nav a.active{color:var(--navy-700);border-bottom-color:var(--khaki-500);} .header-cta{display:flex;align-items:center;gap:.75rem;} .header-phone{font-family:var(--font-mono);font-weight:600;font-size:.95rem;color:var(--navy-700);white-space:nowrap;} .nav-toggle{display:none;background:none;border:1.5px solid var(--navy-300);border-radius:var(--radius-md); width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;color:var(--navy-700);} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.01em;line-height:1; padding:11px 20px;border-radius:var(--radius-md);border:1.5px solid transparent; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background var(--fast) var(--ease),transform var(--fast) var(--ease); } .btn:hover{text-decoration:none;transform:translateY(-1px);} .btn svg{width:1.1em;height:1.1em;} .btn-primary{background:var(--navy-600);color:var(--white);border-color:var(--navy-600);box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--navy-800);color:#fff;} .btn-accent{background:var(--khaki-500);color:var(--navy-900);border-color:var(--khaki-500);box-shadow:var(--shadow-sm);} .btn-accent:hover{background:var(--khaki-600);color:var(--navy-900);} .btn-secondary{background:transparent;color:var(--navy-700);border-color:var(--navy-300);} .btn-secondary:hover{background:var(--navy-50);color:var(--navy-700);} .btn-lg{padding:15px 28px;font-size:1.05rem;} .btn-sm{padding:8px 14px;font-size:.875rem;} .on-navy.btn-secondary{color:#fff;border-color:var(--navy-400);} .on-navy.btn-secondary:hover{background:rgba(255,255,255,.08);color:#fff;} /* ---------- Badges ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px;font-size:.8rem;font-weight:600; line-height:1.3;border-radius:var(--radius-pill);border:1px solid;white-space:nowrap; } .badge svg{width:14px;height:14px;} .badge-navy{background:var(--navy-100);color:var(--navy-800);border-color:var(--navy-200);} .badge-khaki{background:var(--khaki-100);color:var(--khaki-800);border-color:var(--khaki-300);} .badge-neutral{background:var(--gray-100);color:var(--ink-700);border-color:var(--gray-200);} .badge-solid{background:var(--navy-600);color:#fff;border-color:var(--navy-600);} /* ---------- Cards ---------- */ .card{ background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);padding:1.5rem; } .card.accent-top{border-top:3px solid var(--khaki-500);} .card.pad-lg{padding:2rem;} /* ---------- Service item ---------- */ .service .ico{ display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px; background:var(--navy-50);border:1px solid var(--navy-100);border-radius:var(--radius-md); color:var(--navy-600);margin-bottom:.75rem; } .service .ico svg{width:24px;height:24px;} .service h4{margin:0 0 .25rem;} .service p{margin:0;font-size:.95rem;line-height:1.55;color:var(--text-muted);} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:6px;} .field label{font-size:.875rem;font-weight:600;color:var(--text-strong);} .field .req{color:var(--danger-600);margin-left:3px;} .field input,.field select,.field textarea{ font-family:var(--font-body);font-size:.95rem;color:var(--text-strong);background:#fff; padding:11px 13px;border:1.5px solid var(--field-border);border-radius:var(--radius-md); outline:none;width:100%;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); } .field textarea{resize:vertical;line-height:1.5;} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235c6873' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy-600);box-shadow:var(--shadow-focus);} .field .hint{font-size:.8rem;color:var(--text-muted);} .check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.95rem;color:var(--text-body);line-height:1.4;} .check input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--navy-600);} /* ---------- Bands & hero ---------- */ .band-navy{background:var(--navy-800);color:#fff;} .band-navy h1,.band-navy h2{color:#fff;} .band-navy .eyebrow{color:var(--khaki-400);} .band-khaki{background:var(--khaki-100);border-block:1px solid var(--khaki-200);} .cta-band{background:var(--navy-600);color:#fff;} .cta-band h2{color:#fff;margin:0;} .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;} .hero p{color:var(--navy-100);font-size:1.125rem;max-width:46ch;} .hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;} .hero-badges{display:flex;gap:.625rem;flex-wrap:wrap;} .hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);} .cred-strip{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;justify-content:space-between;} .cred{display:flex;align-items:center;gap:10px;color:var(--navy-800);} .cred svg{width:22px;height:22px;color:var(--khaki-700);} .cred span{font-family:var(--font-display);font-weight:600;font-size:.95rem;} .grid-services{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;} .split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;} .row-between{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;} .tag-row{display:flex;flex-wrap:wrap;gap:.5rem;} .spec-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;} .spec-list li{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle);} .spec-list .k{color:var(--text-muted);font-size:.95rem;} .spec-list .v{font-family:var(--font-mono);font-weight:600;font-size:.875rem;color:var(--text-strong);text-align:right;} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:3rem;align-items:start;} .info-card{background:var(--navy-800);border-radius:var(--radius-lg);padding:2rem;display:grid;gap:1.5rem;} .info-row{display:flex;gap:14px;align-items:flex-start;} .info-row .ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none; border-radius:var(--radius-md);background:var(--navy-700);color:var(--khaki-300);} .info-row .ico svg{width:19px;height:19px;} .info-row .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--navy-300);font-family:var(--font-display);font-weight:700;} .info-row .val,.info-row .val a{color:#fff;font-size:1rem;font-weight:600;line-height:1.45;} .form-note{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);} .success{display:none;text-align:center;padding:2rem 1rem;} .success .check-ico{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px; border-radius:999px;background:var(--success-100);color:var(--success-600);margin-bottom:1rem;} .success .check-ico svg{width:30px;height:30px;} /* ---------- Footer ---------- */ .site-footer{background:var(--navy-800);color:var(--navy-100);} .site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;align-items:start;padding-block:4rem 2rem;} .footer-logo{display:inline-flex;background:#fff;border-radius:var(--radius-md);padding:9px 13px;margin-bottom:1rem;} .footer-logo img{height:38px;} .site-footer p{color:var(--navy-200);font-size:.95rem;line-height:1.6;} .site-footer h4{font-family:var(--font-display);font-weight:700;font-size:.8rem;text-transform:uppercase; letter-spacing:.12em;color:var(--khaki-400);margin:0 0 .75rem;} .site-footer .flinks a{display:block;color:var(--navy-200);font-size:.95rem;line-height:2;} .lic-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.125rem;} .lic-chips span{font-family:var(--font-mono);font-size:.75rem;color:var(--khaki-300); border:1px solid var(--navy-600);border-radius:var(--radius-pill);padding:4px 11px;} .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--navy-300); font-size:.8rem;padding-block:1rem 2rem;border-top:1px solid var(--navy-600);} /* ---------- Responsive ---------- */ @media (max-width:920px){ .hero,.split,.contact-grid{grid-template-columns:1fr;gap:2rem;} .grid-services{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} .site-footer .cols{grid-template-columns:1fr;gap:2rem;} .hero-photo{aspect-ratio:16/10;} } @media (max-width:680px){ .nav,.header-phone{display:none;} .nav-toggle{display:inline-flex;} .nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0; background:#fff;border-bottom:1px solid var(--border-subtle);padding:.5rem 0;box-shadow:var(--shadow-md);} .nav.open a{padding:.875rem var(--pad);border-bottom:none;} .grid-services{grid-template-columns:1fr;} .cred-strip{gap:1rem;} }