/* Theme Name: Andy Auto Glass Theme URI: https://andyautoglassmobile.com Author: Built for Andy Auto Glass Description: Bilingual (English/Spanish) theme for a mobile auto glass shop. Phone-first, service-area local SEO, a working quote form with no plugin required, and a Spanish site at /es/ with a language toggle and hreflang tags. Colours are sampled from the shop's own logo. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: andy-auto-glass Tags: business, one-column, custom-logo, custom-menu, translation-ready, block-styles, wide-blocks */ /* ========================================================================== ANDY AUTO GLASS — andyautoglassmobile.com /* ========================================================================== ANDY AUTO GLASS — andyautoglassmobile.com Salinas, CA · Mobile auto glass repair & replacement ART DIRECTION Palette sampled directly from the logo artwork. The logo's outlined car-window silhouette is the site's visual signature: it reappears as the .glass-frame motif (a slightly trapezoidal panel with a 3px cyan edge) exactly four times — hero image, ADAS image, leak-diagnosis image, and the 404. Restraint is what keeps it a design decision instead of a gimmick. Type: Archivo 700/800 for display (wide, industrial, matches the logo's heavy outlined lettering) against Barlow 400/500/600 for body — Barlow's squarish grotesque DNA reads automotive without being a novelty face. Radius: 4px everywhere. Hard, precise, matching the logo's sharp outline. Nothing on this site is a pill. TABLE OF CONTENTS 01 Tokens 08 Services 15 FAQ 02 Reset & base 09 Service area 16 CTA band 03 Typography 10 ADAS 17 Footer 04 Layout 11 Steps 18 Mobile call bar 05 Buttons 12 Why us 19 Service page parts 06 Header 13 Reviews 20 Motion 07 Hero 14 Quote form 21 Print ========================================================================== */ /* 01 TOKENS ================================================================ */ :root{ /* Brand — sampled from logo.png */ --cyan: #0489B6; /* logo cyan: fills, borders, large display type */ --cyan-deep: #046080; /* AA-safe on white (7.0:1): links, small text, CTA */ --cyan-darker: #03485F; /* pressed states */ --cyan-light: #ABE9F8; /* logo highlight: accents on dark (10.2:1) */ --charcoal: #2E2E2E; /* logo body */ --charcoal-lo: #232323; --ink: #141414; --steel: #CCCCCC; /* logo gray: rules, dividers */ --steel-mid: #8A8F93; --slate: #5A6167; /* muted body text on white — 6.1:1 */ --paper: #F4F6F7; --paper-warm: #FAFAF8; --white: #FFFFFF; /* Type */ --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --fs-display: clamp(2.5rem, 1.6rem + 4.1vw, 4.5rem); --fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem); --fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 2.75rem); --fs-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem); --fs-h4: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem); --fs-body: clamp(1.0625rem, 1.015rem + 0.2vw, 1.1875rem); --fs-lead: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem); --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-numeral: clamp(3rem, 2rem + 4.4vw, 5.5rem); /* Spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --radius: 4px; --rule: 1px solid var(--steel); --shadow-sm: 0 1px 2px rgba(20,20,20,.06), 0 2px 8px rgba(20,20,20,.05); --shadow-md: 0 2px 4px rgba(20,20,20,.07), 0 10px 28px rgba(20,20,20,.09); --shadow-lift: 0 4px 8px rgba(20,20,20,.08), 0 16px 40px rgba(20,20,20,.12); --container: 1200px; --container-narrow: 820px; --measure: 66ch; --ease: cubic-bezier(.2,.7,.3,1); /* The logo's window silhouette, abstracted */ --panel: polygon(0 2.6%, 100% 0, 100% 97.4%, 0 100%); } /* 02 RESET & BASE ========================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65; color:var(--charcoal); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; font-feature-settings:"kern" 1; } img,svg,video{ max-width:100%; height:auto; display:block; } button,input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; } ul,ol{ padding:0; list-style:none; } a{ color:var(--cyan-deep); text-decoration-thickness:1px; text-underline-offset:.22em; } a:hover{ text-decoration-thickness:2px; } :focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:2px; } .skip-link{ position:absolute; left:var(--s4); top:-100px; z-index:200; background:var(--ink); color:#fff; padding:var(--s3) var(--s5); font-weight:600; border-radius:var(--radius); text-decoration:none; transition:top .18s var(--ease); } .skip-link:focus{ top:var(--s4); } .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* 03 TYPOGRAPHY ============================================================ */ h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.022em; color:var(--ink); text-wrap:balance; } h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); line-height:1.16; letter-spacing:-.012em; } h4{ font-size:var(--fs-h4); font-weight:700; line-height:1.3; letter-spacing:-.006em; } .display{ font-size:var(--fs-display); line-height:.97; letter-spacing:-.03em; } p{ max-width:var(--measure); } p + p{ margin-top:var(--s4); } .lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--slate); } .muted{ color:var(--slate); } .small{ font-size:var(--fs-sm); } /* Eyebrow — a hairline rule and letterspaced label. No pill badges. */ .eyebrow{ display:flex; align-items:center; gap:var(--s3); font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-deep); margin-bottom:var(--s4); } .eyebrow::before{ content:""; width:34px; height:3px; background:var(--cyan); flex:none; } .eyebrow--light{ color:var(--cyan-light); } .eyebrow--light::before{ background:var(--cyan-light); } .eyebrow--center{ justify-content:center; } .tel{ font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap; } .hl{ color:var(--cyan-deep); } .hl-light{ color:var(--cyan-light); } /* 04 LAYOUT ================================================================ */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s5); } .container-narrow{ width:100%; max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--s5); } @media (min-width:768px){ .container,.container-narrow{ padding-inline:var(--s6); } } /* Deliberately varied vertical rhythm — not one uniform value. */ .section{ padding-block:var(--s8); } .section--tight{ padding-block:var(--s7); } .section--tall{ padding-block:var(--s9); } .section--strip{ padding-block:var(--s5); } @media (min-width:900px){ .section{ padding-block:var(--s9); } .section--tight{ padding-block:var(--s8); } .section--tall{ padding-block:var(--s10); } } .section--paper{ background:var(--paper); } .section--warm{ background:var(--paper-warm); } .section--dark{ background:var(--charcoal); color:#E8EAEB; } .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; } .section--dark .muted{ color:#AFB5B9; } .section--dark a{ color:var(--cyan-light); } .rule{ height:1px; background:var(--steel); border:0; margin:0; } .section-head{ max-width:44ch; margin-bottom:var(--s7); } .section-head--center{ margin-inline:auto; text-align:center; } .section-head--center .eyebrow{ justify-content:center; } .section-head p{ margin-top:var(--s4); } /* The window-silhouette motif */ .glass-frame{ background:var(--cyan); clip-path:var(--panel); padding:3px; position:relative; } .glass-frame > *{ clip-path:var(--panel); } /* Real photography, once uploaded. Each slot is locked to its intended aspect ratio and cropped with object-fit, so whatever shape the shop uploads the layout stays exactly as designed. */ .glass-frame img{ display:block; width:100%; height:auto; } .glass-frame__img--tall{ aspect-ratio:4/5; object-fit:cover; object-position:center; } .glass-frame__img--4x3{ aspect-ratio:4/3; object-fit:cover; object-position:center; } .glass-frame__img--3x2{ aspect-ratio:3/2; object-fit:cover; object-position:center; } .glass-frame__img--16x9{ aspect-ratio:16/9; object-fit:cover; object-position:center; } .glass-frame__img--1x1{ aspect-ratio:1/1; object-fit:cover; object-position:center; } /* Placeholders shown until a slot is filled. Each names the shot that belongs there; editors also get a link straight to the upload screen. */ .ph{ position:relative; display:grid; place-items:center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px), #384045; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); color:#D2D8DC; text-align:center; padding:var(--s6); font-size:var(--fs-xs); letter-spacing:.11em; text-transform:uppercase; font-family:var(--font-display); font-weight:600; line-height:1.6; } .ph--4x3{ aspect-ratio:4/3; } .ph--3x2{ aspect-ratio:3/2; } .ph--1x1{ aspect-ratio:1/1; } .ph--16x9{ aspect-ratio:16/9; } .ph--tall{ aspect-ratio:4/5; } .ph span{ max-width:30ch; } .ph__add{ margin-top:var(--s4); display:inline-block; padding:9px var(--s4); background:var(--cyan-deep); color:#fff!important; text-decoration:none; border-radius:var(--radius); font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; } .ph__add:hover{ background:var(--cyan); text-decoration:none; } /* 05 BUTTONS =============================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.005em; line-height:1; padding:var(--s4) var(--s6); min-height:52px; border:2px solid transparent; border-radius:var(--radius); cursor:pointer; text-decoration:none; transition:background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); } .btn:hover{ transform:translateY(-2px); text-decoration:none; } .btn:active{ transform:translateY(0); } .btn svg{ flex:none; } /* Primary uses --cyan-deep so white text clears AA at 7.0:1. Pure logo cyan is reserved for fills, borders and large type. */ .btn--primary{ background:var(--cyan-deep); color:#fff; border-color:var(--cyan-deep); } .btn--primary:hover{ background:var(--cyan-darker); border-color:var(--cyan-darker); } .btn--dark{ background:var(--ink); color:#fff; border-color:var(--ink); } .btn--dark:hover{ background:#000; border-color:#000; } .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--steel); } .btn--ghost:hover{ border-color:var(--ink); background:var(--white); } .btn--onDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); } .btn--onDark:hover{ background:#fff; color:var(--ink); border-color:#fff; } .btn--lg{ font-size:1.0625rem; padding:var(--s5) var(--s7); min-height:60px; } .btn--block{ width:100%; } .btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); } /* Inline text link with an offset underline */ .link-arrow{ display:inline-flex; align-items:center; gap:6px; padding-block:8px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:.02em; text-transform:uppercase; color:var(--cyan-deep); text-decoration:none; border-bottom:2px solid var(--cyan); padding-bottom:3px; } .link-arrow svg{ transition:transform .18s var(--ease); } .link-arrow:hover svg{ transform:translateX(4px); } .section--dark .link-arrow{ color:var(--cyan-light); border-bottom-color:var(--cyan-light); } /* 06 HEADER =============================================================== */ .utilbar{ background:var(--ink); color:#C9CED2; font-size:var(--fs-xs); letter-spacing:.02em; } .utilbar .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:40px; flex-wrap:wrap; } .utilbar__list{ display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; } .utilbar__item{ display:inline-flex; align-items:center; gap:7px; } .utilbar__item svg{ color:var(--cyan-light); flex:none; } .utilbar a{ color:#fff; text-decoration:none; font-weight:600; } .utilbar a:hover{ text-decoration:underline; text-underline-offset:.2em; } .utilbar__open{ color:var(--cyan-light); font-weight:600; } @media (max-width:639px){ .utilbar__hide-sm{ display:none; } } .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.97); border-bottom:1px solid transparent; transition:box-shadow .2s var(--ease), border-color .2s var(--ease); } .site-header.is-stuck{ box-shadow:var(--shadow-sm); border-bottom-color:var(--steel); } .site-header .container{ display:flex; align-items:center; gap:var(--s5); min-height:74px; padding-block:var(--s3); } .brand{ display:flex; align-items:center; gap:var(--s3); text-decoration:none; margin-right:auto; } .brand img{ width:54px; height:54px; object-fit:contain; } .brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.0625rem; line-height:1.05; letter-spacing:-.02em; color:var(--ink); text-transform:uppercase; white-space:nowrap; } .brand__sub{ display:block; font-family:var(--font-body); font-weight:600; font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--cyan-deep); margin-top:3px; } @media (max-width:479px){ .brand__name{ font-size:.9375rem; } .brand img{ width:46px; height:46px; } } .nav{ display:none; } @media (min-width:1180px){ .nav{ display:flex; align-items:center; gap:var(--s5); } .nav a{ font-family:var(--font-display); font-weight:600; font-size:.9375rem; color:var(--charcoal); text-decoration:none; padding-block:var(--s2); border-bottom:2px solid transparent; letter-spacing:-.005em; } .nav a:hover{ border-bottom-color:var(--cyan); color:var(--ink); } .nav a[aria-current="page"]{ border-bottom-color:var(--cyan); color:var(--ink); } } /* Phone is the primary CTA — this business converts on calls, not forms. */ .header-call{ display:none; align-items:center; gap:var(--s3); text-decoration:none; padding-left:var(--s5); border-left:var(--rule); } @media (min-width:700px){ .header-call{ display:flex; } } .header-call__label{ display:block; font-size:var(--fs-xs); color:var(--slate); letter-spacing:.09em; text-transform:uppercase; font-weight:600; } .header-call__num{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.375rem; color:var(--ink); line-height:1.15; letter-spacing:-.02em; } .header-call:hover .header-call__num{ color:var(--cyan-deep); } .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:transparent; border:var(--rule); border-radius:var(--radius); cursor:pointer; } @media (min-width:1180px){ .nav-toggle{ display:none; } } .nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:background .15s var(--ease); } .nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:transform .2s var(--ease); } .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; } .nav-toggle[aria-expanded="true"] span{ background:transparent; } .nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); } .mobile-nav{ display:none; border-top:var(--rule); background:var(--white); box-shadow:var(--shadow-md); } .mobile-nav.is-open{ display:block; } @media (min-width:1180px){ .mobile-nav.is-open{ display:none; } } .mobile-nav ul{ padding-block:var(--s3); } .mobile-nav a{ display:block; padding:var(--s4) 0; border-bottom:1px solid #E9ECEE; font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:var(--ink); text-decoration:none; } .mobile-nav li:last-child a{ border-bottom:0; } .mobile-nav a:hover{ color:var(--cyan-deep); } /* 07 HERO ================================================================= */ /* Asymmetric 7/5 split. Copy sits left against a full-bleed charcoal field that stops short of the right edge on desktop; the image breaks past it. */ .hero{ position:relative; background:var(--charcoal); color:#E8EAEB; overflow:hidden; } /* No soft gradient glow. A hard-edged angled shard instead — same geometry language as the logo's outlined window. */ .hero::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--charcoal-lo); } .hero::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:58%; z-index:0; background:#2B3438; clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%); border-left:2px solid rgba(4,137,182,.5); } @media (max-width:959px){ .hero::after{ display:none; } } .hero__grid{ position:relative; z-index:1; display:grid; gap:var(--s7); padding-block:var(--s8) var(--s8); } @media (min-width:960px){ .hero__grid{ grid-template-columns:7fr 5fr; gap:var(--s8); align-items:center; padding-block:var(--s9) var(--s9); } } .hero h1{ color:#fff; } .hero h1 em{ font-style:normal; color:var(--cyan-light); } .hero__sub{ font-size:var(--fs-lead); line-height:1.5; color:#C3C9CD; margin-top:var(--s5); max-width:52ch; } .hero .btn-row{ margin-top:var(--s7); } .hero__note{ margin-top:var(--s4); font-size:var(--fs-sm); color:#A8AFB4; display:flex; align-items:center; gap:8px; } .hero__note svg{ color:var(--cyan-light); flex:none; } .hero__media{ position:relative; } @media (min-width:960px){ /* The image breaks the container — deliberate grid break #1 */ .hero__media{ margin-right:calc(var(--s8) * -1); } } .hero__badge{ position:absolute; left:0; bottom:0; z-index:2; background:var(--cyan-deep); color:#fff; padding:var(--s4) var(--s5); font-family:var(--font-display); font-weight:800; line-height:1.05; font-size:1.375rem; letter-spacing:-.02em; box-shadow:var(--shadow-md); } .hero__badge small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; } /* Trust strip — a tight utility band, deliberately shallow */ .trust{ background:var(--ink); border-top:3px solid var(--cyan); } .trust ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s5); padding-block:var(--s5); } @media (min-width:820px){ .trust ul{ grid-template-columns:repeat(4,1fr); gap:var(--s5); } } .trust li{ display:flex; align-items:flex-start; gap:var(--s3); } .trust svg{ color:var(--cyan-light); flex:none; margin-top:2px; } .trust strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:.9375rem; color:#fff; line-height:1.25; } .trust span{ display:block; font-size:var(--fs-xs); color:#A8AFB4; margin-top:2px; } /* 14 QUOTE FORM =========================================================== */ /* Sits immediately under the hero, half-overlapping it on desktop. One screen. No multi-step wizard. */ .quote{ background:var(--paper); } .quote__inner{ display:grid; gap:var(--s7); padding-block:var(--s8); } @media (min-width:900px){ .quote__inner{ grid-template-columns:4fr 6fr; gap:var(--s8); align-items:start; } } .quote__pitch h2{ font-size:var(--fs-h2); } .quote__pitch p{ margin-top:var(--s4); } .quote__or{ margin-top:var(--s6); padding-top:var(--s6); border-top:2px solid var(--steel); } .quote__or p{ font-size:var(--fs-sm); } .quote__phone{ display:inline-block; margin-top:var(--s3); font-family:var(--font-display); font-weight:800; font-size:clamp(1.75rem,1.3rem + 1.8vw,2.25rem); color:var(--ink); text-decoration:none; letter-spacing:-.025em; border-bottom:3px solid var(--cyan); padding-bottom:2px; } .quote__phone:hover{ color:var(--cyan-deep); } .form-card{ background:var(--white); border:1px solid var(--steel); border-top:4px solid var(--cyan); border-radius:var(--radius); padding:var(--s6); box-shadow:var(--shadow-md); } @media (min-width:600px){ .form-card{ padding:var(--s7); } } .form-grid{ display:grid; gap:var(--s5); } @media (min-width:560px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-field--full{ grid-column:1 / -1; } } .form-field label{ display:block; font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--ink); margin-bottom:6px; } .form-field label .req{ color:#B3261E; } .form-field input,.form-field select,.form-field textarea{ width:100%; padding:13px var(--s4); min-height:50px; background:var(--white); color:var(--ink); border:1.5px solid #B9C0C5; border-radius:var(--radius); font-size:1rem; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); } .form-field textarea{ min-height:104px; resize:vertical; } .form-field select{ appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232E2E2E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--s4) center; padding-right:44px; } .form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--cyan-deep); box-shadow:0 0 0 3px rgba(4,137,182,.16); outline:none; } .form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"]{ border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.12); } .form-error{ display:none; margin-top:6px; font-size:var(--fs-sm); font-weight:600; color:#B3261E; } .form-error.is-shown{ display:flex; align-items:center; gap:6px; } .form-hint{ margin-top:6px; font-size:var(--fs-xs); color:var(--slate); } .form-toggle{ display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s4); border:1.5px solid #B9C0C5; border-radius:var(--radius); cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease); } .form-toggle:hover{ border-color:var(--cyan-deep); background:#F7FBFD; } .form-toggle input{ width:20px; height:20px; min-height:0; margin-top:2px; flex:none; accent-color:var(--cyan-deep); } .form-toggle span{ font-size:var(--fs-sm); line-height:1.45; } .form-toggle strong{ display:block; font-family:var(--font-display); } .file-field input[type="file"]{ padding:11px var(--s4); font-size:var(--fs-sm); } .form-submit{ margin-top:var(--s6); } .form-foot{ margin-top:var(--s4); font-size:var(--fs-xs); color:var(--slate); } .form-notice{ margin-top:var(--s5); padding:var(--s4) var(--s5); border-left:4px solid var(--cyan); background:#EFF8FC; font-size:var(--fs-sm); color:var(--charcoal); border-radius:0 var(--radius) var(--radius) 0; } .form-notice strong{ font-family:var(--font-display); display:block; color:var(--ink); } .form-notice a{ font-weight:600; } /* 08 SERVICES ============================================================= */ /* Mixed sizes on purpose — the first tile spans two rows. Not five clones. */ .services-grid{ display:grid; gap:var(--s4); } @media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px){ .services-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,auto); } .service-tile--feature{ grid-row:span 2; } } .service-tile{ display:flex; flex-direction:column; gap:var(--s3); background:var(--white); border:1px solid var(--steel); border-radius:var(--radius); padding:var(--s6); text-decoration:none; color:inherit; transition:border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); } .service-tile:hover{ border-color:var(--cyan); transform:translateY(-3px); box-shadow:var(--shadow-md); text-decoration:none; } .service-tile__icon{ width:52px; height:52px; display:grid; place-items:center; border:2px solid var(--cyan); border-radius:var(--radius); color:var(--cyan-deep); margin-bottom:var(--s2); } .service-tile h3{ color:var(--ink); } .service-tile p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .service-tile__meta{ margin-top:auto; padding-top:var(--s4); border-top:1px solid #E7EAEC; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-deep); } .service-tile__meta svg{ transition:transform .18s var(--ease); } .service-tile:hover .service-tile__meta svg{ transform:translateX(4px); } /* Full-width closing tile: fills the row the 2-row feature tile would otherwise leave half empty, and reads as a deliberate closing note rather than a stretched card. */ @media (min-width:1000px){ .service-tile--full{ grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s6); padding-block:var(--s5); } .service-tile--full .service-tile__icon{ margin-bottom:0; } .service-tile--full .service-tile__body{ flex-direction:row; align-items:baseline; gap:var(--s5); } .service-tile--full .service-tile__body h3{ white-space:nowrap; } .service-tile--full .service-tile__meta{ margin-top:0; padding-top:0; border-top:0; white-space:nowrap; } } .service-tile--feature{ background:var(--charcoal); border-color:var(--charcoal); color:#DDE1E3; } .service-tile--feature h3{ color:#fff; } .service-tile--feature p{ color:#B6BCC0; } .service-tile--feature .service-tile__icon{ border-color:var(--cyan-light); color:var(--cyan-light); } .service-tile--feature .service-tile__meta{ color:var(--cyan-light); border-top-color:rgba(255,255,255,.16); } .service-tile--feature:hover{ border-color:var(--cyan); } .service-tile__body{ display:flex; flex-direction:column; gap:var(--s3); } /* 09 SERVICE AREA ========================================================= */ /* Deliberate grid break #2: full-bleed dark band, content flush to the left container edge, radius graphic bleeding off the right side. */ .area{ background:var(--charcoal); color:#D9DDE0; overflow:hidden; position:relative; } .area__grid{ display:grid; gap:var(--s7); padding-block:var(--s8); } @media (min-width:960px){ .area__grid{ grid-template-columns:5fr 6fr; gap:var(--s8); align-items:center; padding-block:var(--s9); } } .area h2{ color:#fff; } .area__lead{ margin-top:var(--s4); color:#B6BCC0; } .area__needs{ margin-top:var(--s6); display:grid; gap:var(--s3); } .area__needs li{ display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-sm); } .area__needs svg{ color:var(--cyan-light); flex:none; margin-top:3px; } .radar{ position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100%; } .radar svg{ width:100%; height:100%; overflow:visible; } .cities{ margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.16); } .cities__label{ font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-light); margin-bottom:var(--s4); } .cities ul{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); font-size:var(--fs-sm); color:#C3C9CD; } .cities li{ display:flex; align-items:center; gap:var(--s4); } .cities li:not(:last-child)::after{ content:""; width:4px; height:4px; background:var(--cyan); flex:none; } .cities a{ color:#C3C9CD; text-decoration:none; } .cities a:hover{ color:#fff; text-decoration:underline; text-underline-offset:.2em; } /* 10 ADAS ================================================================= */ /* Reverse of the hero split: image left, copy right, generous height. */ .adas__grid{ display:grid; gap:var(--s7); } @media (min-width:960px){ .adas__grid{ grid-template-columns:5fr 6fr; gap:var(--s8); align-items:center; } } @media (min-width:960px){ .adas__media{ margin-left:calc(var(--s7) * -1); } } .adas__points{ margin-top:var(--s6); display:grid; gap:var(--s5); } .adas__point{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; } .adas__point-num{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--cyan-deep); border:2px solid var(--cyan); border-radius:var(--radius); width:34px; height:34px; display:grid; place-items:center; flex:none; } .adas__point .as-h4{ margin-bottom:4px; font-size:var(--fs-h4); font-weight:700; line-height:1.3; letter-spacing:-.006em; } .adas__point p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .callout{ margin-top:var(--s6); padding:var(--s5) var(--s6); border-left:4px solid var(--cyan); background:var(--paper); } .callout p{ margin:0; font-size:var(--fs-sm); } .section--dark .callout{ background:rgba(255,255,255,.05); } .section--dark .callout p{ color:#D2D7DA; } /* 11 STEPS ================================================================ */ /* Typographic numerals, huge and left-aligned. No circles. */ .steps{ display:grid; gap:0; margin-top:var(--s7); } .step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4) var(--s5); padding-block:var(--s6); border-top:1px solid var(--steel); align-items:start; } .step > div{ min-width:0; } .step h3{ overflow-wrap:anywhere; } .step:last-child{ border-bottom:1px solid var(--steel); } @media (min-width:800px){ .step{ grid-template-columns:minmax(120px,1fr) 3fr auto; gap:var(--s7); align-items:center; } } .step__num{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-numeral); line-height:.8; letter-spacing:-.05em; color:var(--steel); font-variant-numeric:tabular-nums; } .step:hover .step__num{ color:var(--cyan); } .step__num{ transition:color .2s var(--ease); } .step h3{ margin-bottom:var(--s2); } .step p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .step__time{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-deep); border:1px solid var(--steel); padding:8px var(--s3); border-radius:var(--radius); /* Below 800px the badge takes its own full-width row and is allowed to wrap. It must stay wrappable here: the Spanish labels are long enough that a nowrap badge pushes past the viewport on a 375px screen. */ grid-column:1 / -1; justify-self:start; white-space:normal; } @media (min-width:800px){ .step__time{ grid-column:auto; justify-self:end; white-space:nowrap; } } .section--dark .step{ border-color:rgba(255,255,255,.15); } .section--dark .step__num{ color:#4A5155; } .section--dark .step:hover .step__num{ color:var(--cyan-light); } .section--dark .step p{ color:#B6BCC0; } .section--dark .step__time{ color:var(--cyan-light); border-color:rgba(255,255,255,.25); } /* 12 WHY US =============================================================== */ /* Mixed-size mosaic — one wide lead item, then varied spans. */ .why{ display:grid; gap:var(--s4); } @media (min-width:700px){ .why{ grid-template-columns:repeat(6,1fr); } } .why__item{ background:var(--white); border:1px solid var(--steel); border-radius:var(--radius); padding:var(--s6); grid-column:span 1; } @media (min-width:700px){ .why__item{ grid-column:span 3; } .why__item--wide{ grid-column:span 6; display:grid; grid-template-columns:auto 1fr; gap:var(--s6); align-items:center; } .why__item--third{ grid-column:span 2; } } .why__item h3{ margin-bottom:var(--s3); } .why__item p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .why__stat{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem,1.8rem + 3vw,4rem); line-height:.9; letter-spacing:-.04em; color:var(--cyan-deep); font-variant-numeric:tabular-nums; } .why__stat small{ display:block; font-size:.875rem; font-family:var(--font-body); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin-top:var(--s2); } .why__item--dark{ background:var(--charcoal); border-color:var(--charcoal); } .why__item--dark h3{ color:#fff; } .why__item--dark p{ color:#B6BCC0; } /* 13 REVIEWS ============================================================== */ .reviews-grid{ display:grid; gap:var(--s5); margin-top:var(--s7); } @media (min-width:820px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } } .review{ display:flex; flex-direction:column; gap:var(--s4); padding:var(--s6); background:var(--white); border:1px solid var(--steel); border-left:4px solid var(--cyan); border-radius:var(--radius); } .review blockquote{ font-size:1.0625rem; line-height:1.6; color:var(--charcoal); } .review blockquote p{ max-width:none; } .review__who{ margin-top:auto; padding-top:var(--s4); border-top:1px solid #E7EAEC; } .review__name{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:var(--fs-sm); } .review__meta{ font-size:var(--fs-xs); color:var(--slate); margin-top:2px; } /* Rating set typographically. No star clipart. */ .rating{ display:inline-flex; align-items:baseline; gap:var(--s2); font-family:var(--font-display); font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } .rating__score{ font-size:1.5rem; line-height:1; letter-spacing:-.03em; } .rating__of{ font-size:var(--fs-xs); font-weight:600; color:var(--slate); letter-spacing:.06em; text-transform:uppercase; } .reviews-foot{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--steel); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5) var(--s7); } /* 15 FAQ ================================================================== */ /* Deliberately compact rhythm after the taller sections above it. */ .faq{ border-top:2px solid var(--ink); margin-top:var(--s6); } .faq details{ border-bottom:1px solid var(--steel); } .faq summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5); padding:var(--s5) 0; cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:700; font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.35; color:var(--ink); letter-spacing:-.01em; } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--cyan-deep); } .faq summary .faq__icon{ flex:none; width:24px; height:24px; position:relative; margin-top:3px; } .faq summary .faq__icon::before,.faq summary .faq__icon::after{ content:""; position:absolute; background:var(--cyan-deep); transition:transform .22s var(--ease), opacity .22s var(--ease); } .faq summary .faq__icon::before{ left:0; top:11px; width:24px; height:2px; } .faq summary .faq__icon::after{ left:11px; top:0; width:2px; height:24px; } .faq details[open] summary .faq__icon::after{ transform:scaleY(0); opacity:0; } .faq details[open] summary{ color:var(--cyan-deep); } .faq__answer{ padding-bottom:var(--s6); } .faq__answer p{ color:var(--slate); } .faq__answer p + p{ margin-top:var(--s4); } .faq__answer ul{ margin-top:var(--s4); display:grid; gap:var(--s2); } .faq__answer li{ display:flex; gap:var(--s3); font-size:var(--fs-sm); color:var(--slate); } .faq__answer li::before{ content:""; width:6px; height:6px; background:var(--cyan); flex:none; margin-top:.62em; } /* 16 CTA BAND ============================================================= */ .cta{ background:var(--cyan-deep); color:#fff; position:relative; overflow:hidden; } .cta::after{ content:""; position:absolute; right:-6%; top:-30%; width:44%; height:160%; border:3px solid rgba(255,255,255,.24); clip-path:polygon(14% 0, 100% 6%, 92% 100%, 3% 92%); } @media (max-width:800px){ .cta::after{ display:none; } } .cta__inner{ position:relative; z-index:1; padding-block:var(--s8); } @media (min-width:900px){ .cta__inner{ padding-block:var(--s9); } } .cta h2{ color:#fff; max-width:20ch; } .cta p{ margin-top:var(--s4); color:#DAF1FA; font-size:var(--fs-lead); max-width:48ch; } .cta__phones{ margin-top:var(--s7); display:flex; flex-wrap:wrap; gap:var(--s5) var(--s8); } .cta__phone{ text-decoration:none; color:#fff; display:block; } .cta__phone small{ display:block; font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:#B7E2F2; font-weight:600; margin-bottom:4px; } .cta__phone strong{ font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.875rem,1.3rem + 2.4vw,2.75rem); line-height:1.05; border-bottom:3px solid rgba(255,255,255,.4); padding-bottom:3px; display:inline-block; } .cta__phone:hover strong{ border-bottom-color:#fff; } .cta__note{ margin-top:var(--s6); font-size:var(--fs-sm); color:#CDE9F5; } /* 17 FOOTER =============================================================== */ .site-footer{ background:var(--ink); color:#A8AFB4; font-size:var(--fs-sm); } .site-footer__grid{ display:grid; gap:var(--s7); padding-block:var(--s8); } @media (min-width:700px){ .site-footer__grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px){ .site-footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:var(--s7); } } .site-footer h3{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:var(--s4); } .site-footer ul{ display:grid; gap:var(--s2); } .site-footer a{ color:#A8AFB4; text-decoration:none; display:inline-block; padding-block:6px; } .site-footer a:hover{ color:#fff; text-decoration:underline; text-underline-offset:.2em; } .footer-brand{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5); } .footer-brand img{ width:58px; height:58px; object-fit:contain; } .footer-brand strong{ font-family:var(--font-display); font-weight:800; font-size:1.0625rem; color:#fff; text-transform:uppercase; letter-spacing:-.02em; line-height:1.1; display:block; } .footer-brand span{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-light); } .footer-nap{ display:grid; gap:var(--s3); margin-top:var(--s5); } .footer-nap div{ display:flex; gap:var(--s3); align-items:flex-start; } .footer-nap svg{ color:var(--cyan-light); flex:none; margin-top:3px; } .footer-nap strong{ color:#fff; font-weight:600; } .footer-phone{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:#fff!important; letter-spacing:-.02em; } .site-footer__legal{ border-top:1px solid rgba(255,255,255,.13); padding-block:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); align-items:center; justify-content:space-between; font-size:var(--fs-xs); } .site-footer__legal p{ margin:0; max-width:none; } /* 18 MOBILE CALL BAR ====================================================== */ /* The highest-value element on the site for a phone-driven business. */ .callbar{ position:fixed; left:0; right:0; bottom:0; z-index:120; display:grid; grid-template-columns:1fr 1fr; background:var(--ink); border-top:3px solid var(--cyan); box-shadow:0 -4px 20px rgba(0,0,0,.22); } @media (min-width:1000px){ .callbar{ display:none; } } .callbar a{ display:flex; align-items:center; justify-content:center; gap:var(--s2); min-height:60px; padding:var(--s3) var(--s4); text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; } .callbar a + a{ border-left:1px solid rgba(255,255,255,.18); } .callbar a:first-child{ background:var(--cyan-deep); } .callbar a:active{ background:var(--cyan-darker); } .callbar svg{ flex:none; } @media (max-width:999px){ body{ padding-bottom:63px; } } /* 19 SERVICE PAGE PARTS =================================================== */ .page-hero{ background:var(--charcoal); color:#D9DDE0; position:relative; overflow:hidden; } .page-hero::before{ content:""; position:absolute; right:-4%; top:-40%; width:38%; height:180%; border-left:2px solid rgba(4,137,182,.45); background:#2B3438; clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%); } @media (max-width:900px){ .page-hero::before{ display:none; } } .page-hero__inner{ position:relative; z-index:1; padding-block:var(--s7) var(--s8); max-width:56ch; } .page-hero h1{ color:#fff; } .page-hero p{ margin-top:var(--s5); font-size:var(--fs-lead); color:#B6BCC0; } .page-hero .btn-row{ margin-top:var(--s6); } .crumbs{ position:relative; z-index:1; padding-top:var(--s5); font-size:var(--fs-xs); } .crumbs ol{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; color:#8F979C; } .crumbs li{ display:flex; align-items:center; gap:var(--s2); } .crumbs li:not(:last-child)::after{ content:"/"; color:#5E676C; } .crumbs a{ color:#B6BCC0; text-decoration:none; } .crumbs a:hover{ color:#fff; text-decoration:underline; } .crumbs [aria-current]{ color:#fff; } .split{ display:grid; gap:var(--s7); } @media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; } .split--wide-left{ grid-template-columns:6fr 5fr; } .split--wide-right{ grid-template-columns:5fr 6fr; } .split--center{ align-items:center; } } .checklist{ display:grid; gap:var(--s4); margin-top:var(--s5); } .checklist li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start; } .checklist svg{ color:var(--cyan-deep); flex:none; margin-top:3px; } .checklist strong{ font-family:var(--font-display); font-weight:700; color:var(--ink); display:block; } .checklist span{ font-size:var(--fs-sm); color:var(--slate); } .section--dark .checklist svg{ color:var(--cyan-light); } .section--dark .checklist strong{ color:#fff; } .section--dark .checklist span{ color:#B6BCC0; } /* Price-factor table — plain, honest, no cards */ .factors{ margin-top:var(--s6); border-top:2px solid var(--ink); } .factors__row{ display:grid; gap:var(--s2); padding-block:var(--s5); border-bottom:1px solid var(--steel); } @media (min-width:700px){ .factors__row{ grid-template-columns:1fr 2fr; gap:var(--s6); } } .factors dt{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:var(--fs-h4); } .factors dd{ margin:0; font-size:var(--fs-sm); color:var(--slate); } /* Damage diagnostic — windshield repair page's dominant idea */ .damage{ display:grid; gap:var(--s4); margin-top:var(--s7); } @media (min-width:560px){ .damage{ grid-template-columns:repeat(2,1fr); } } @media (min-width:960px){ .damage{ grid-template-columns:repeat(4,1fr); } } .damage__card{ border:1px solid var(--steel); border-radius:var(--radius); background:var(--white); overflow:hidden; display:flex; flex-direction:column; } .damage__fig{ background:#EDF1F3; border-bottom:1px solid var(--steel); padding:var(--s5); } .damage__fig svg{ width:100%; height:auto; display:block; } .damage__body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .damage__body h3{ font-size:1.125rem; } .damage__body p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .damage__verdict{ margin-top:auto; padding-top:var(--s4); font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; } .damage__verdict--yes{ color:#1F6B3B; } .damage__verdict--maybe{ color:#8A5A00; } .damage__verdict--no{ color:#A0342B; } /* Simple two-column "what we replace" list */ .glass-list{ display:grid; gap:var(--s3); margin-top:var(--s5); } @media (min-width:600px){ .glass-list{ grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s6); } } .glass-list li{ display:flex; gap:var(--s3); align-items:baseline; padding-block:var(--s3); border-bottom:1px solid var(--steel); font-size:var(--fs-sm); } .glass-list li::before{ content:""; width:8px; height:8px; background:var(--cyan); flex:none; } .glass-list strong{ font-family:var(--font-display); font-weight:700; color:var(--ink); } /* Related services */ .related{ display:grid; gap:var(--s4); margin-top:var(--s6); } @media (min-width:700px){ .related{ grid-template-columns:repeat(3,1fr); } } .related a{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5); border:1px solid var(--steel); border-radius:var(--radius); text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1rem; transition:border-color .16s var(--ease), transform .16s var(--ease); } .related a:hover{ border-color:var(--cyan); transform:translateY(-2px); } .related svg{ color:var(--cyan-deep); flex:none; } /* City list on the service-areas page */ .city-grid{ display:grid; gap:var(--s5); margin-top:var(--s7); } @media (min-width:640px){ .city-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s7); } } @media (min-width:1000px){ .city-grid{ grid-template-columns:repeat(3,1fr); } } .city{ padding-top:var(--s5); border-top:2px solid var(--ink); } .city h3{ font-size:1.125rem; margin-bottom:var(--s2); } .city p{ font-size:var(--fs-sm); color:var(--slate); margin:0; } .city__drive{ display:inline-block; margin-top:var(--s3); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-deep); } /* Confirmation / 404 */ .centered-page{ display:grid; place-items:center; text-align:center; padding-block:var(--s9); } .centered-page p{ margin-inline:auto; } .centered-page .btn-row{ justify-content:center; margin-top:var(--s7); } .big-tick{ width:76px; height:76px; display:grid; place-items:center; margin:0 auto var(--s6); border:3px solid var(--cyan); border-radius:var(--radius); color:var(--cyan-deep); } /* 20 MOTION =============================================================== */ [data-reveal]{ opacity:0; transform:translateY(8px); } [data-reveal].is-in{ opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; } [data-reveal]{ opacity:1!important; transform:none!important; } .btn:hover,.service-tile:hover,.related a:hover{ transform:none; } } /* 21 PRINT ================================================================ */ @media print{ .utilbar,.callbar,.nav-toggle,.mobile-nav,.cta,.site-header{ display:none!important; } body{ color:#000; background:#fff; padding-bottom:0; } .hero,.page-hero,.area,.section--dark{ background:#fff!important; color:#000!important; } .hero h1,.page-hero h1,.area h2{ color:#000!important; } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; } } /* 22 LANGUAGE TOGGLE + WP NAV ============================================ */ /* The Spanish site lives at /es/. This link swaps to the matching page in the other language, not just to the other home page. */ .utilbar__lang{ display:inline-flex; align-items:center; gap:6px; color:#fff!important; font-weight:600; text-decoration:none; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); padding:4px 10px; line-height:1.2; } .utilbar__lang:hover{ background:var(--cyan-deep); border-color:var(--cyan-deep); text-decoration:none; } .utilbar__lang svg{ color:var(--cyan-light); flex:none; } /* WordPress renders the menu as its own