/* Camino Insurance — homepage Palette sampled from the logo: navy #0D234E, orange #F47B00. */ :root { --navy: #0d234e; --orange: #f47b00; --sand: #e9e7e2; --stone: #f5f4f1; --map: #dfe3e8; --err: #b3271b; --display: Archivo, system-ui, sans-serif; --body: 'Source Sans 3', system-ui, sans-serif; --gut: 56px; --max: 1440px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #fff; color: var(--navy); font-family: var(--body); -webkit-font-smoothing: antialiased; } img { max-width: 100%; } /* Several toggled elements carry a display value from their own class, which would otherwise beat the UA stylesheet's [hidden] rule. */ [hidden] { display: none !important; } [id] { scroll-margin-top: 24px; } .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; } .u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Spam honeypot. Positioned off-screen rather than display:none, since some bots skip hidden inputs; aria-hidden + tabindex="-1" keep it away from real users. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--orange); color: #fff; font: 700 14px/1 var(--display); padding: 14px 18px; border-radius: 5px; text-decoration: none; transition: top .15s; } .skip:focus { top: 12px; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- Language switching ---------- Both languages ship in the markup; CSS shows one set based on . Without JS the page stays in English. */ [data-lang] { display: none; } [data-lang="en"] { display: inline; } html[lang="es"] [data-lang="en"] { display: none; } html[lang="es"] [data-lang="es"] { display: inline; } /* Long-form pages swap whole blocks rather than inline spans. */ [data-lang].block { display: none; } [data-lang="en"].block { display: block; } html[lang="es"] [data-lang="en"].block { display: none; } html[lang="es"] [data-lang="es"].block { display: block; } /* ---------- Top bar ---------- */ .topbar { background: var(--navy); color: #fff; } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; } .topbar__contact { display: flex; align-items: center; gap: 26px; font: 600 13px/1 var(--body); min-width: 0; } .topbar__link { display: flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; white-space: nowrap; } .topbar__link .ico { color: var(--orange); font-size: 14px; } .topbar__link:hover { color: var(--orange); } .topbar__right { display: flex; align-items: center; gap: 14px; } .topbar__city { font: 600 12px/1 var(--body); color: rgba(255,255,255,.55); white-space: nowrap; } .lang { display: flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; } .lang__btn { font: 800 11px/1 var(--display); letter-spacing: .08em; padding: 6px 13px; border: 0; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; } .lang__btn:hover { color: #fff; } .lang__btn.is-on { background: var(--orange); color: #fff; } /* ---------- Masthead ---------- */ .masthead { position: relative; background: #fff; border-bottom: 1px solid rgba(13,35,78,.10); } .masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; } /* Logo height is capped by the header row, not the page width. At 901px — the narrowest viewport where the nav is still expanded — the nav needs 646px, leaving ~143px for the logo once the gap is taken. The clamp floor (104px -> 115px wide) keeps ~28px of slack there while letting the logo grow to 144px on wide screens. English nav is the worst case; Spanish is 20px narrower. The floor only binds below ~1083px; above that 9.6vw drives it. Below 901px the nav collapses to the burger; see the mobile override. */ .masthead__brand img { height: clamp(104px, 9.6vw, 144px); width: auto; display: block; } .nav { display: flex; align-items: center; gap: 34px; } .nav__link { font: 700 14px/1 var(--display); letter-spacing: .02em; color: var(--navy); text-decoration: none; } .nav__link:hover { color: var(--orange); } .burger { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font: 800 14px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 0; border-radius: 5px; padding: 14px 24px; cursor: pointer; transition: background .15s, color .15s; } .btn--primary { background: var(--orange); color: #fff; box-shadow: 0 2px 0 rgba(13,35,78,.25); } .btn--primary:hover { background: var(--navy); color: #fff; } .btn--onDark:hover { background: #fff; color: var(--navy); } .btn--block { width: 100%; font-size: 16px; letter-spacing: .05em; padding: 19px; border-radius: 6px; margin-top: 4px; } .linkbtn { margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: 700 14px/1 var(--display); color: var(--orange); } .linkbtn:hover { color: var(--navy); } .ulink { align-self: flex-start; margin-top: 8px; font: 800 14px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 6px; } .ulink:hover { color: var(--orange); } .eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); } .eyebrow--rule::before { content: ""; width: 34px; height: 3px; background: var(--orange); flex: none; } /* ---------- Hero ---------- */ .hero { position: relative; background: var(--navy); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 420px at 78% 8%, rgba(244,123,0,.22), transparent 65%); } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.22)); } .hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center; padding-block: 74px 82px; } .hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; } .hero__title { margin: 0; font: 800 clamp(38px, 4.6vw, 66px)/1.03 var(--display); letter-spacing: -.02em; color: #fff; text-wrap: balance; } .hero__lede { margin: 0; max-width: 520px; font: 400 clamp(16px, 1.4vw, 20px)/1.55 var(--body); color: rgba(255,255,255,.78); } .callout { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; color: #fff; text-decoration: none; } .callout__ico { width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 19px; transition: background .15s, color .15s, border-color .15s; } .callout:hover .callout__ico { background: var(--orange); color: #fff; border-color: var(--orange); } .callout__text { display: flex; flex-direction: column; gap: 2px; } .callout__label { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .callout__num { font: 800 22px/1 var(--display); color: #fff; } /* ---------- Quote form ---------- */ .quote { background: #fff; border-radius: 10px; padding: 32px; box-shadow: 0 18px 44px rgba(0,0,0,.30); } .quote__head { display: flex; flex-direction: column; gap: 5px; margin-bottom: 22px; } .quote__title { margin: 0; font: 800 28px/1.1 var(--display); color: var(--navy); } .quote__sub { margin: 0; font: 400 15px/1.45 var(--body); color: rgba(13,35,78,.6); } .quote__form { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field__label { font: 700 11px/1 var(--display); letter-spacing: .13em; text-transform: uppercase; color: rgba(13,35,78,.55); } .field__input { width: 100%; font: 400 16px/1.2 var(--body); color: var(--navy); padding: 14px; border: 1.5px solid rgba(13,35,78,.18); border-radius: 6px; background: #fbfbfa; outline: none; transition: border-color .15s, background .15s; } .field__input:focus { border-color: var(--orange); background: #fff; } .field__input[aria-invalid="true"] { border-color: var(--err); } .field__err { margin: 0; font: 600 13px/1.35 var(--body); color: var(--err); } /* "(optional)" inside a small-caps field label */ .field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(13,35,78,.4); } .field-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; } .quote__note { margin: 0; font: 400 13px/1.45 var(--body); color: rgba(13,35,78,.5); } .quote__status { margin: 0; font: 600 14px/1.5 var(--body); color: var(--err); background: rgba(179,39,27,.07); border-left: 3px solid var(--err); padding: 10px 12px; border-radius: 0 4px 4px 0; } .quote__done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 0 18px; animation: rise .35s ease both; } .quote__check { width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; } .quote__doneTitle { margin: 0; font: 700 20px/1.3 var(--display); color: var(--navy); } .quote__doneBody { margin: 0; font: 400 15px/1.5 var(--body); color: rgba(13,35,78,.6); } /* ---------- Trust strip ---------- */ .trust { list-style: none; margin: 0; background: var(--orange); display: grid; grid-template-columns: repeat(3, 1fr); padding-inline: max(0px, calc((100% - var(--max)) / 2)); } .trust__item { display: flex; align-items: center; gap: 13px; padding: 22px 40px; font: 700 16px/1.25 var(--display); color: var(--navy); border-right: 1px solid rgba(13,35,78,.18); } .trust__item .ico { font-size: 20px; } .trust__item:first-child { padding-left: var(--gut); } .trust__item:last-child { padding-right: var(--gut); border-right: 0; } /* ---------- Section shells ---------- */ .sec { padding-block: 86px; } .sec--light { background: #fff; } .sec--navy { background: var(--navy); } .sec--stone { background: var(--stone); padding-block: 82px; } .sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; } .sechead__main { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .sechead__title { margin: 0; font: 800 clamp(28px, 3vw, 44px)/1.08 var(--display); letter-spacing: -.015em; color: var(--navy); } .sechead__title--onDark { color: #fff; } .sechead__aside { margin: 0; max-width: 380px; font: 400 17px/1.6 var(--body); color: rgba(13,35,78,.65); } /* ---------- Auto cards ---------- */ .cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .card { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid rgba(13,35,78,.14); border-top: 4px solid var(--orange); border-radius: 8px; padding: 30px 26px 32px; transition: box-shadow .18s, transform .18s; } .card:hover { box-shadow: 0 10px 26px rgba(13,35,78,.10); transform: translateY(-2px); } .card__num { font: 800 34px/1 var(--display); color: rgba(13,35,78,.14); } .card__title { margin: 0; font: 700 21px/1.2 var(--display); color: var(--navy); } .card__body { margin: 0; font: 400 15px/1.55 var(--body); color: rgba(13,35,78,.65); } /* ---------- Business ---------- */ .biz { position: relative; overflow: hidden; } .biz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 340px at 12% 100%, rgba(244,123,0,.16), transparent 62%); } .biz__in { position: relative; z-index: 1; display: grid; grid-template-columns: 400px 1fr; gap: 70px; align-items: start; } .biz__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .biz__lede { margin: 0; font: 400 18px/1.6 var(--body); color: rgba(255,255,255,.75); } .biz__cta { margin-top: 8px; padding: 17px 28px; letter-spacing: .05em; } .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; overflow: hidden; } .tile { background: var(--navy); padding: 30px 28px 34px; display: flex; flex-direction: column; gap: 10px; } .tile__ico { width: 22px; height: 22px; color: var(--orange); } .tile__title { margin: 0; font: 700 21px/1.2 var(--display); color: #fff; } .tile__body { margin: 0; font: 400 15px/1.55 var(--body); color: rgba(255,255,255,.7); } /* ---------- Steps ---------- */ .steps__title { margin: 0 0 46px; font: 800 clamp(26px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -.015em; color: var(--navy); text-align: center; } .steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; } .steps__list::before { content: ""; position: absolute; top: 31px; left: 14%; right: 14%; height: 2px; background: repeating-linear-gradient(90deg, rgba(13,35,78,.22) 0 10px, transparent 10px 20px); } .step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 0 34px; } .step__num { width: 62px; height: 62px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 24px/1 var(--display); } .step__num--accent { background: var(--orange); } .step__title { margin: 0; font: 700 22px/1.2 var(--display); color: var(--navy); } .step__body { margin: 0; font: 400 16px/1.55 var(--body); color: rgba(13,35,78,.65); } /* ---------- About ---------- */ .about { display: grid; grid-template-columns: 1fr 1fr; background: #fff; } .about__media { position: relative; background: var(--sand); min-height: 460px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(13,35,78,.10); } .ph { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; text-align: center; color: rgba(13,35,78,.42); } .ph__ico { width: 30px; height: 30px; } .ph__label { font: 700 13px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; } .ph__hint { font: 400 14px/1.5 var(--body); max-width: 260px; } .about__copy { padding: 82px 64px; display: flex; flex-direction: column; justify-content: center; gap: 22px; } .prose { margin: 0; font: 400 18px/1.65 var(--body); color: rgba(13,35,78,.7); } /* ---------- Careers ---------- */ .careers { padding-block: 74px; } .careers__in { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .careers__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 620px; } .careers__cta { flex: none; font-size: 15px; padding: 19px 32px; letter-spacing: .05em; } /* ---------- Contact ---------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; background: #fff; } .contact__copy { padding: 78px 64px; display: flex; flex-direction: column; gap: 30px; } .details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .detail { display: flex; gap: 16px; align-items: flex-start; } .detail__ico { width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--stone); color: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 18px; } .detail__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .detail__label { font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(13,35,78,.5); } .detail__value { font: 600 19px/1.4 var(--body); color: var(--navy); text-decoration: none; } .detail__value--big { font: 800 26px/1.2 var(--display); } .detail__value--mail { overflow-wrap: anywhere; } a.detail__value:hover { color: var(--orange); } .contact__map { position: relative; overflow: hidden; min-height: 440px; background: var(--map); border-left: 1px solid rgba(13,35,78,.10); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(13,35,78,.55); text-decoration: none; } .contact__map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(13,35,78,.05) 0 2px, transparent 2px 90px), linear-gradient(25deg, rgba(13,35,78,.05) 0 2px, transparent 2px 120px); } .contact__pin { position: relative; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); box-shadow: 0 6px 14px rgba(13,35,78,.2); transition: transform .18s; } .contact__map:hover .contact__pin { transform: rotate(-45deg) translate(4px, -4px); } .contact__mapLabel { position: relative; margin-top: 8px; font: 700 13px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; } .contact__mapAddr { position: relative; font: 400 14px/1.5 var(--body); } .contact__map:hover { color: var(--navy); } /* ---------- Footer ---------- */ .foot { background: var(--navy); padding-block: 52px 34px; } .foot__in { display: flex; flex-direction: column; gap: 34px; } .foot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; } .foot__logo { height: 96px; width: auto; display: block; } .foot__cols { display: flex; gap: 70px; } .foot__col { display: flex; flex-direction: column; gap: 11px; } .foot__head { margin: 0; font: 800 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); } .foot__link { font: 400 15px/1.2 var(--body); color: rgba(255,255,255,.78); text-decoration: none; overflow-wrap: anywhere; } .foot__link:hover { color: var(--orange); } .foot__addr { font: 400 15px/1.55 var(--body); font-style: normal; color: rgba(255,255,255,.78); } .foot__bar { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; font: 400 13px/1.4 var(--body); color: rgba(255,255,255,.45); } /* ---------- Additional coverage cards ---------- */ .card__ico { width: 30px; height: 30px; color: var(--orange); } /* ---------- Storefront photo ---------- */ .about__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; } /* Until assets/img/office.jpg exists, show the placeholder rather than a broken image. main.js adds .is-empty when the photo fails to load. */ .about__media:not(.is-empty) .ph { display: none; } .about__media.is-empty .about__photo { display: none; } /* ---------- Office hours ---------- */ .hours { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 26px; justify-content: start; align-items: baseline; } .hours dt { font: 600 17px/1.5 var(--body); color: var(--navy); } .hours dd { margin: 0; font: 400 17px/1.5 var(--body); color: rgba(13,35,78,.7); font-variant-numeric: tabular-nums; } .foot__hours { margin: 3px 0 0; font: 400 14px/1.5 var(--body); color: rgba(255,255,255,.6); } /* ---------- SMS consent ---------- */ .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .check__box { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--orange); cursor: pointer; } .check__body { display: flex; flex-direction: column; gap: 3px; } .check__label { font: 600 14px/1.35 var(--body); color: var(--navy); } .check__fine { font: 400 12px/1.45 var(--body); color: rgba(13,35,78,.55); } /* ---------- Six policies, three across ---------- */ .cards--three { grid-template-columns: repeat(3, 1fr); } .alsobar { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 18px 24px; background: #fff; border: 1px solid rgba(13,35,78,.14); border-left: 4px solid var(--orange); border-radius: 8px; } .alsobar__label { font: 800 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: rgba(13,35,78,.55); } .alsobar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 30px; } .alsobar__list li { display: flex; align-items: center; gap: 10px; font: 700 17px/1.2 var(--display); color: var(--navy); } .alsobar__list .ico { width: 22px; height: 22px; color: var(--orange); } /* ---------- Footer legal links ---------- */ .foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; } .foot__legal a { color: rgba(255,255,255,.6); text-decoration: none; } .foot__legal a:hover { color: var(--orange); } /* ---------- Legal pages ---------- */ .legal { max-width: 820px; margin-inline: auto; padding: 60px var(--gut) 84px; } .legal__title { margin: 12px 0 8px; font: 800 clamp(30px, 3.4vw, 46px)/1.1 var(--display); letter-spacing: -.015em; color: var(--navy); } .legal__meta { margin: 0 0 26px; font: 400 15px/1.5 var(--body); color: rgba(13,35,78,.55); } .legal__note { margin: 0 0 8px; padding: 16px 18px; background: var(--stone); border-left: 4px solid var(--orange); border-radius: 0 6px 6px 0; font: 400 15px/1.6 var(--body); color: rgba(13,35,78,.75); } .legal h2 { margin: 38px 0 12px; font: 700 23px/1.3 var(--display); color: var(--navy); } .legal p { margin: 0 0 14px; font: 400 17px/1.7 var(--body); color: rgba(13,35,78,.78); } .legal ul { margin: 0 0 16px; padding-left: 22px; } .legal li { margin-bottom: 7px; font: 400 17px/1.7 var(--body); color: rgba(13,35,78,.78); } .legal a { color: var(--orange); } .legal a:hover { color: var(--navy); } .legal strong { color: var(--navy); font-weight: 700; } .legal__back { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--display); color: var(--navy); text-decoration: none; } .legal__back:hover { color: var(--orange); } /* ---------- 404 page ---------- Lived in a