/* ========================================================= PINEDA AUTO SOLUTIONS — design system Direction: industrial garage / diagnostic dashboard. Signature: the live "shop light" status module. ========================================================= */ :root{ /* surfaces */ --bg: #0E1114; --bg-2: #12161B; --surface: #171C22; --surface-2: #1E252D; --border: #29323C; --border-2: #354150; /* text */ --text: #EEF2F6; --muted: #97A2AE; --faint: #6B7682; /* brand accent — Pineda orange (from logo) */ --accent: #F8480C; --accent-700:#D63A04; --accent-glow: rgba(248,69,5,.35); /* hazard highlight, used sparingly */ --hazard: #F5C518; /* status colors */ --ok: #22C55E; --warn: #F59E0B; --bad: #EF4444; --off: #6B7280; /* type */ --display: "Archivo", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --maxw: 1140px; --radius: 14px; --radius-sm: 9px; --shadow: 0 18px 50px -18px rgba(0,0,0,.7); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* language visibility — toggled by */ html[data-lang="en"] .es, html[data-lang="es"] .en{ display:none !important; } img{ max-width:100%; display:block; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent-700); } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; } .section{ padding-block:84px; } .section--tight{ padding-block:56px; } @media (max-width:640px){ .section{ padding-block:60px; } } .eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); display:inline-block; } h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.02; letter-spacing:-.01em; margin:0; } h1{ font-size:clamp(2.5rem,7vw,4.6rem); text-transform:uppercase; } h2{ font-size:clamp(1.9rem,4.4vw,3rem); text-transform:uppercase; } h3{ font-size:1.18rem; letter-spacing:0; } p{ margin:0 0 1em; color:var(--text); } .lead{ font-size:1.12rem; color:var(--muted); max-width:60ch; } .muted{ color:var(--muted); } /* ---------- buttons ---------- */ .btn{ --b:var(--accent); display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; padding:14px 22px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .2s, box-shadow .2s; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn--primary{ background:var(--accent); color:#04121f; box-shadow:0 10px 30px -10px var(--accent-glow); } .btn--primary:hover{ background:var(--accent-700); color:#04121f; } .btn--ghost{ background:transparent; color:var(--text); border-color:var(--border-2); } .btn--ghost:hover{ border-color:var(--accent); color:var(--text); } .btn--block{ width:100%; } .btn svg{ width:18px; height:18px; } /* ---------- header / nav ---------- */ .header{ position:sticky; top:0; z-index:60; background:rgba(14,17,20,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav{ display:flex; align-items:center; gap:18px; height:68px; } .brand{ display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--text); } .brand:hover{ color:var(--text); } .brand__mark{ width:34px; height:34px; flex:none; } .brand__badge{ display:inline-flex; background:#fff; border-radius:10px; padding:5px 9px; box-shadow:0 2px 10px rgba(0,0,0,.3); flex:none; } .brand__badge img{ height:38px; width:auto; display:block; } @media (max-width:560px){ .brand__badge img{ height:32px; } } .brand__name{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.04rem; line-height:1; } .brand__name small{ display:block; font-size:.6rem; letter-spacing:.28em; color:var(--accent); font-weight:600; margin-top:3px; } .nav__links{ display:flex; align-items:center; gap:6px; } .nav__links a{ color:var(--muted); font-weight:600; font-size:.93rem; padding:9px 12px; border-radius:8px; } .nav__links a:hover{ color:var(--text); background:var(--surface); } .nav__links a.active{ color:var(--text); } .nav__tools{ display:flex; align-items:center; gap:10px; } /* language toggle */ .lang{ display:inline-flex; border:1px solid var(--border-2); border-radius:8px; overflow:hidden; font-family:var(--mono); font-size:.72rem; font-weight:600; } .lang button{ background:transparent; color:var(--muted); border:0; padding:7px 10px; cursor:pointer; letter-spacing:.05em; } .lang button.is-on{ background:var(--accent); color:#04121f; } .nav__cta{ display:inline-flex; gap:10px; } .burger{ display:none; background:transparent; border:1px solid var(--border-2); border-radius:8px; width:42px; height:40px; cursor:pointer; } .burger span{ display:block; width:18px; height:2px; background:var(--text); margin:3px auto; transition:transform .22s ease, opacity .22s ease; } .burger.is-active span:nth-child(1){ transform:translateY(5px) rotate(45deg); } .burger.is-active span:nth-child(2){ opacity:0; } .burger.is-active span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); } @media (max-width:900px){ .nav__cta .btn--call-text{ display:none; } .burger{ display:block; } .nav__links{ display:flex; z-index:60; position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-2); border-bottom:1px solid var(--border); padding:8px 14px 16px; transform:translateY(-130%); transition:transform .25s ease; box-shadow:0 18px 40px rgba(0,0,0,.45); } .nav__links.open{ transform:translateY(0); } .nav__links a{ padding:14px 8px; font-size:1rem; border-bottom:1px solid var(--border); border-radius:0; } .nav__links a:last-child{ border-bottom:0; } } /* ========================================================= SIGNATURE — the live shop light ========================================================= */ .statuslight{ --c:var(--off); display:inline-flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-2); border-radius:999px; padding:9px 16px 9px 13px; font-family:var(--mono); font-size:.84rem; line-height:1.2; box-shadow:0 0 0 1px rgba(0,0,0,.2); } .statuslight__dot{ width:12px; height:12px; border-radius:50%; flex:none; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent), 0 0 14px 2px var(--c); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } } .statuslight__txt{ white-space:nowrap; } .statuslight__txt b{ display:block; color:var(--text); font-weight:700; letter-spacing:.04em; } .statuslight__txt span{ display:block; color:var(--muted); font-size:.74rem; margin-top:2px; } .statuslight.is-ok{ --c:var(--ok); } .statuslight.is-warn{ --c:var(--warn); } .statuslight.is-bad{ --c:var(--bad); } .statuslight.is-off{ --c:var(--off); } /* hero version — bigger, glowing sign */ .statuslight--hero{ font-size:1rem; padding:14px 22px 14px 18px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border-color:var(--border-2); box-shadow:var(--shadow), 0 0 36px -10px var(--c); } .statuslight--hero .statuslight__dot{ width:15px; height:15px; } .statuslight--hero .statuslight__txt b{ font-size:1.02rem; } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); } .hero__bg{ position:absolute; inset:0; z-index:0; background: radial-gradient(1100px 520px at 78% -10%, rgba(46,144,250,.16), transparent 60%), radial-gradient(700px 380px at 8% 110%, rgba(46,144,250,.10), transparent 60%), var(--bg); } .hero__bg::after{ /* faint hazard diagonal texture */ content:""; position:absolute; inset:0; opacity:.028; background:repeating-linear-gradient(135deg, var(--hazard) 0 14px, transparent 14px 38px); mask:linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent); } .hero__inner{ position:relative; z-index:1; padding-block:74px 86px; } .hero h1{ margin:18px 0 0; max-width:14ch; } .hero h1 em{ font-style:normal; color:var(--accent); } .hero__lead{ margin-top:20px; } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } .hero__status{ margin-top:30px; } .hero__meta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--mono); font-size:.82rem; color:var(--muted); } .hero__meta a{ color:var(--text); } .hero__meta span{ display:inline-flex; align-items:center; gap:8px; } .hero__meta svg{ width:15px; height:15px; color:var(--accent); } /* ========================================================= TRUST STRIP ========================================================= */ .strip{ border-bottom:1px solid var(--border); background:var(--bg-2); } .strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .strip__item{ padding:26px 18px; border-right:1px solid var(--border); } .strip__item:last-child{ border-right:0; } .strip__item b{ font-family:var(--display); font-size:1.9rem; color:var(--text); display:block; } .strip__item span{ font-size:.86rem; color:var(--muted); } @media (max-width:760px){ .strip__grid{ grid-template-columns:repeat(2,1fr); } .strip__item:nth-child(2){ border-right:0; } .strip__item:nth-child(1),.strip__item:nth-child(2){ border-bottom:1px solid var(--border); } } /* ========================================================= SECTION HEADERS ========================================================= */ .sec-head{ max-width:62ch; margin-bottom:42px; } .sec-head p{ margin-top:14px; } /* ========================================================= SERVICES ========================================================= */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media (max-width:880px){ .cards{ grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .cards{ grid-template-columns:1fr;} } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:border-color .2s, transform .12s, background .2s; display:flex; flex-direction:column; } a.card:hover{ border-color:var(--accent); transform:translateY(-3px); background:var(--surface-2); color:var(--text); } .card__ico{ width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:rgba(46,144,250,.12); color:var(--accent); margin-bottom:16px; flex:none; } .card__ico svg{ width:24px; height:24px; } .card h3{ margin-bottom:8px; } .card p{ color:var(--muted); font-size:.95rem; margin:0; } .card__more{ margin-top:auto; padding-top:16px; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:7px; } .card__more svg{ width:16px; height:16px; flex:none; } /* ========================================================= SPLIT / MAP / CONTACT BLOCKS ========================================================= */ .split{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; } @media (max-width:860px){ .split{ grid-template-columns:1fr; gap:28px; } } .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; } .panel--accent{ border-color:var(--border-2); background:linear-gradient(180deg,var(--surface-2),var(--surface)); } .map-frame{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); aspect-ratio:4/3; min-height:300px; } .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05); } /* hours table */ .hours{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.9rem; } .hours th{ text-align:left; font-weight:600; color:var(--muted); padding:9px 0; } .hours td{ text-align:right; padding:9px 0; color:var(--text); border-bottom:1px solid var(--border); } .hours tr:last-child td, .hours tr:last-child th{ border-bottom:0; } .hours tr.today th, .hours tr.today td{ color:var(--accent); } .hours tr.today th::before{ content:"▸ "; color:var(--accent); } .contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; } .contact-list li{ display:flex; gap:13px; align-items:flex-start; } .contact-list svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:3px; } .contact-list b{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-family:var(--mono); } .contact-list a, .contact-list span{ color:var(--text); font-size:1.02rem; } /* ========================================================= CTA BAND ========================================================= */ .band{ background:linear-gradient(120deg, rgba(46,144,250,.16), rgba(46,144,250,.04)), var(--bg-2); border-block:1px solid var(--border); } .band__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .band h2{ max-width:18ch; } .band__cta{ display:flex; gap:12px; flex-wrap:wrap; } /* ========================================================= BOOKING FORM ========================================================= */ .form{ display:grid; gap:18px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:560px){ .form__row{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:7px; } .field label{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .field label .req{ color:var(--accent); } .field input, .field select, .field textarea{ background:var(--bg); border:1px solid var(--border-2); border-radius:var(--radius-sm); color:var(--text); font-family:var(--body); font-size:1rem; padding:13px 14px; width:100%; transition:border-color .15s, box-shadow .15s; } .field input::placeholder, .field textarea::placeholder{ color:var(--faint); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,144,250,.2); } .field textarea{ resize:vertical; min-height:110px; } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2397A2AE' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; } .form__note{ font-size:.86rem; color:var(--muted); display:flex; gap:9px; align-items:flex-start; } .form__note svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:2px; } .form__msg{ font-family:var(--mono); font-size:.82rem; padding:11px 14px; border-radius:var(--radius-sm); display:none; } .form__msg.show{ display:block; } .form__msg.warn{ display:block; color:#ffd9a8; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.4); } /* ========================================================= PAGE HEADER (interior pages) ========================================================= */ .pagehead{ border-bottom:1px solid var(--border); background:var(--bg-2); position:relative; overflow:hidden; } .pagehead::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 300px at 85% -40%, rgba(46,144,250,.14), transparent 60%); } .pagehead__inner{ position:relative; padding-block:54px 46px; } .crumbs{ font-family:var(--mono); font-size:.76rem; color:var(--faint); letter-spacing:.06em; margin-bottom:14px; } .crumbs a{ color:var(--muted); } .pagehead h1{ font-size:clamp(2.1rem,5.5vw,3.4rem); } .pagehead p{ margin-top:16px; max-width:60ch; color:var(--muted); } /* prose blocks on service pages */ .prose{ max-width:70ch; } .prose h2{ font-size:1.5rem; margin-top:38px; text-transform:none; letter-spacing:-.01em; } .prose h3{ margin-top:26px; } .prose ul{ padding-left:0; list-style:none; display:grid; gap:10px; margin:18px 0; } .prose ul li{ position:relative; padding-left:28px; color:var(--muted); } .prose ul li::before{ content:""; position:absolute; left:4px; top:9px; width:9px; height:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg); } .prose ul li b{ color:var(--text); } /* ========================================================= FOOTER ========================================================= */ .footer{ background:var(--bg-2); border-top:1px solid var(--border); padding-block:54px 30px; } .footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; } @media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; gap:28px; } } .footer__brand .brand{ margin-bottom:14px; } .footer p{ color:var(--muted); font-size:.95rem; } .footer h4{ font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; } .footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; } .footer ul a{ color:var(--muted); font-size:.95rem; } .footer ul a:hover{ color:var(--text); } .footer__bottom{ margin-top:38px; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:.76rem; color:var(--faint); } /* utilities */ .center{ text-align:center; } .mt-0{ margin-top:0; } .skip{ position:absolute; left:-9999px; } .skip:focus{ left:12px; top:10px; z-index:99; background:var(--accent); color:#04121f; padding:8px 14px; border-radius:8px; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* ---- FAQ ---- */ .faq{ display:grid; gap:2px; } .faq-item{ padding:22px 0; border-bottom:1px solid var(--border); } .faq-item:first-child{ padding-top:0; } .faq-item:last-child{ border-bottom:0; } .faq-item h3{ font-size:1.1rem; margin:0 0 9px; line-height:1.35; } .faq-item p{ color:var(--muted); margin:0; line-height:1.62; } /* ---- booking success ---- */ .booking-success{ text-align:center; padding:14px 6px 6px; } .booking-success__ico{ width:58px; height:58px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(248,69,5,.14); color:var(--accent); } .booking-success__ico svg{ width:28px; height:28px; } .booking-success h3{ font-size:1.4rem; margin:0 0 10px; } .booking-success p{ color:var(--muted); margin:0 auto; max-width:42ch; line-height:1.6; }