/* ========================================================================== Vallarta Home & Rental Inspections — Design System ========================================================================== */ :root { /* Brand */ --blue-900: #003D5F; --blue-800: #005285; --blue-700: #0066A3; --blue: #0077BE; --blue-400: #3A9BD4; --blue-200: #A8D5EE; --blue-100: #DCEEF8; --blue-50: #F1F8FC; --green: #1FA463; --green-dark: #17804D; --green-light: #E6F6EE; --sand: #F7F5F1; --ink: #16242E; --ink-soft: #465864; --ink-mute: #5C7382; /* was #6E8492 — 3.90:1 on white, below the 4.5:1 AA floor for small text. Now 4.96:1 on white, 4.56:1 on --sand. */ --line: #DFE7ED; --white: #FFFFFF; --amber: #E8A33D; --red: #D14343; /* Type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Space */ --gap: 1.5rem; --section-y: clamp(3.5rem, 7vw, 6rem); --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; --maxw: 1180px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(16, 36, 46, .06), 0 2px 8px rgba(16, 36, 46, .05); --shadow: 0 2px 6px rgba(16, 36, 46, .06), 0 12px 28px rgba(16, 36, 46, .09); --shadow-lg: 0 4px 12px rgba(16, 36, 46, .08), 0 24px 56px rgba(16, 36, 46, .14); --ease: cubic-bezier(.22, .61, .36, 1); } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--blue-700); text-decoration: none; transition: color .18s var(--ease); } a:hover { color: var(--blue-900); } h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6em; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1.9vw, 1.375rem); } h4 { font-size: 1.05rem; } p { margin: 0 0 1.1em; } ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; } li { margin-bottom: .5em; } strong { color: var(--ink); font-weight: 650; } :focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- layout -- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--blue { background: var(--blue-50); } .section--sand { background: var(--sand); } .section--dark { background: var(--blue-900); color: var(--blue-100); } .section--dark h2, .section--dark h3 { color: #fff; } /* .lead defaults to --ink-soft for light sections. Without this override it rendered dark slate on dark navy: measured 1.55:1 against a 4.5:1 requirement, which is effectively invisible rather than merely low-contrast. */ .section--dark .lead { color: var(--blue-100); } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); margin-bottom: .9rem; } .section--dark .eyebrow { color: var(--blue-200); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); } .section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head.center { margin-inline: auto; text-align: center; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* ------------------------------------------------------------ buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 1; padding: .95rem 1.6rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; text-align: center; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(31, 164, 99, .32); } .btn--primary:hover { background: var(--green-dark); color: #fff; box-shadow: 0 8px 22px rgba(31, 164, 99, .38); } .btn--blue { background: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(0, 119, 190, .3); } .btn--blue:hover { background: var(--blue-800); color: #fff; } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; } .btn--outline { background: transparent; color: var(--blue-700); border-color: var(--blue-200); } .btn--outline:hover { background: var(--blue-50); border-color: var(--blue); color: var(--blue-900); } .btn--wide { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } .btn-row.center { justify-content: center; } /* ------------------------------------------------------------- header -- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease); } .site-header.is-stuck { box-shadow: var(--shadow-sm); } /* The header needs more room than the article measure: 8 nav items, the language toggle and the CTA don't fit inside the 1180px content column. */ .site-header .wrap { max-width: 1500px; padding-inline: clamp(1.15rem, 3vw, 1.75rem); } .topbar { background: var(--blue-900); color: var(--blue-100); font-size: .85rem; } .topbar .wrap { display: flex; align-items: center; justify-content: flex-end; gap: 1.4rem; min-height: 40px; flex-wrap: wrap; } .topbar > .wrap > * { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .topbar a { color: var(--blue-100); display: inline-flex; align-items: center; gap: .4rem; } .topbar a:hover { color: #fff; } .topbar svg { width: 15px; height: 15px; flex: none; } .nav { display: flex; align-items: center; gap: .75rem; min-height: 74px; } .brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; flex: none; } .brand__mark { width: 40px; height: 40px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.12; } .brand__name { font-weight: 800; font-size: 1.02rem; color: var(--blue-900); letter-spacing: -.025em; } .brand__tag { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); } .nav__links { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; } .nav__links li { margin: 0; } .nav__links a { display: block; padding: .55rem .5rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 550; color: var(--ink-soft); white-space: nowrap; } .nav__links a:hover { background: var(--blue-50); color: var(--blue-900); } .nav__links a[aria-current="page"] { color: var(--blue); font-weight: 700; } .nav__cta { display: flex; align-items: center; gap: .6rem; flex: none; } /* language switcher */ .lang { display: inline-flex; padding: 3px; background: var(--blue-100); border-radius: 999px; gap: 2px; flex: none; } .lang a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: .34rem .68rem; border-radius: 999px; color: var(--blue-800); } .lang a:hover { background: rgba(255, 255, 255, .65); } .lang a[aria-current="true"] { background: var(--white); color: var(--blue-900); box-shadow: var(--shadow-sm); } .nav__toggle { display: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center; flex: none; } .nav__toggle span { position: relative; display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: .22s var(--ease); } .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: .22s 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 { top: 0; transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } /* Below 1530px the CTA button is the first thing to go — the nav links matter more than the button, and the sticky WhatsApp bubble still converts. */ @media (max-width: 1699px) { .nav__cta .btn { display: none; } } @media (max-width: 1220px) { .nav__toggle { display: flex; } .nav__links { position: fixed; inset: 114px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: #fff; padding: .75rem clamp(1.15rem, 4vw, 2rem) 1.5rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - 114px); overflow-y: auto; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .24s var(--ease); } .nav__links.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav__links a { padding: .85rem .6rem; border-bottom: 1px solid var(--blue-50); font-size: 1rem; } } @media (max-width: 560px) { .topbar .wrap { justify-content: center; gap: 1rem; font-size: .8rem; } .topbar .topbar__hours { display: none; } .brand__tag { display: none; } } /* --------------------------------------------------------------- hero -- */ .hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img, .hero__bg svg { width: 100%; height: 100%; object-fit: cover; } /* Focal point comes from .hero-focus--, generated by build.js. */ .hero__img { object-position: 50% 50%; } /* WHOLE-IMAGE HEROES `cover` fills the band and crops whatever doesn't fit — right for a landscape, wrong when the subject is a person and the crop takes their head. This shows the WHOLE photograph instead, in a panel on the right, with the copy beside it rather than on top of it. The photo occupies a percentage-width PANEL rather than the full band. A full-width `object-fit: contain` sizes the image from the band's HEIGHT, so at 1100px the photo came out 785px wide — 71% of the viewport — and sat underneath the copy at 2.9:1 contrast. Panel width scales with the viewport, so the copy always has the same share of the room. Mobile-first: this block must not set object-position at narrow widths, or it would out-specify the generated .hero-focus-- rule (0-2-0 beats 0-1-0) and crop the subject's head off exactly as before. 1250px is where the sums work: 620px of copy + gap + a 46% panel. Below it, `cover` with the page's focal point is the better answer anyway — a contained image on a narrow screen is a letterboxed strip. */ @media (min-width: 1250px) { .hero--contain { background: var(--blue-900); } /* The photo gets its own column on the right. */ .hero--contain .hero__bg { left: auto; width: 46%; } .hero--contain .hero__img { object-fit: contain; object-position: center; /* Fade the hard left edge into the panel so it reads as part of the composition rather than a rectangle pasted on. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); } /* A SOLID panel, not a gradient. An angled gradient measured 2.8:1 behind the copy: stops on a 100deg gradient are positions along the gradient AXIS, not along x, so the fade lands further left at the top of the band than at the bottom and no stop value fixes it everywhere. Since the copy never crosses the photo, the left just needs to be opaque — flat colour is exact, and it leaves the photograph unscrimmed at full fidelity. */ .hero.hero--contain::before { background: transparent; } .hero.hero--contain::after { background: none; } .hero--contain .hero__inner { max-width: 620px; } } /* Two stacked scrims, not one. The angled brand gradient (::after) keeps the left dark enough for white text and tints everything blue, so a stock photo still reads as part of this site. But it thins to 48% on the right, and a photo with bright sky or a white wall there would wash out the badges sitting over it. ::before lays a flat, even darkening underneath that the gradient can't undo. Against the old flat SVG this was unnecessary; against photography it isn't. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 26, 43, .32); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(0, 45, 72, .92) 0%, rgba(0, 61, 95, .8) 42%, rgba(0, 82, 133, .48) 100%); } .hero__inner { padding-block: clamp(4rem, 10vw, 7.5rem); max-width: 750px; } .hero h1 { color: #fff; } .hero p { color: rgba(255, 255, 255, .9); font-size: clamp(1.06rem, 1.9vw, 1.28rem); max-width: 620px; } .hero .eyebrow { color: var(--blue-200); } .hero--sub .hero__inner { padding-block: clamp(3rem, 7vw, 5rem); } .hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; } .badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; padding: .42rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); color: #fff; backdrop-filter: blur(6px); } .badge svg { width: 15px; height: 15px; flex: none; } .breadcrumb { font-size: .85rem; color: rgba(255, 255, 255, .72); margin-bottom: 1rem; } .breadcrumb a { color: rgba(255, 255, 255, .9); } .breadcrumb a:hover { color: #fff; text-decoration: underline; } .breadcrumb span { margin-inline: .45rem; opacity: .55; } /* trust strip under hero */ .trust { background: var(--blue-900); border-top: 1px solid rgba(255, 255, 255, .1); } .trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; padding-block: 1.9rem; } .trust__item { display: flex; align-items: center; gap: .8rem; color: var(--blue-100); } .trust__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); } .trust__icon svg { width: 20px; height: 20px; stroke: #fff; } .trust__val { display: block; font-weight: 750; color: #fff; font-size: 1.02rem; line-height: 1.25; } .trust__lbl { display: block; font-size: .82rem; opacity: .78; } /* --------------------------------------------------------------- card -- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); } .card h3 { margin-bottom: .5rem; } .card p { font-size: .96rem; margin-bottom: 1rem; } .card p:last-child { margin-bottom: 0; } .card__icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: var(--blue-100); margin-bottom: 1.1rem; flex: none; } .card__icon svg { width: 26px; height: 26px; stroke: var(--blue-700); } .card__link { margin-top: auto; font-weight: 650; font-size: .94rem; display: inline-flex; align-items: center; gap: .35rem; } .card__link::after { content: "→"; transition: transform .18s var(--ease); } .card:hover .card__link::after { transform: translateX(4px); } .card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); } /* numbered steps */ .steps { counter-reset: step; } .step { position: relative; padding-left: 4rem; margin-bottom: 2rem; } .step:last-child { margin-bottom: 0; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.15rem; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 750; font-size: 1.05rem; box-shadow: 0 4px 12px rgba(0, 119, 190, .28); } .step h3 { margin-bottom: .35rem; } .step p { font-size: .96rem; margin-bottom: 0; } /* checklist */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; } .checks li { position: relative; padding-left: 1.95rem; margin: 0; font-size: .97rem; } .checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FA463' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat; } .checks--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 1.6rem; } /* A list that is NOT a list of things we do. Green ticks read as promises, so items we're telling the reader to go and find out themselves get a neutral dot instead. Paired with .card__note above the list. */ .checks--neutral li::before { background: transparent; border: 2px solid var(--blue-400); width: .5rem; height: .5rem; top: .62em; left: .32rem; } .card__note { font-size: .87rem; line-height: 1.5; color: var(--ink-soft); background: var(--blue-50); border-left: 3px solid var(--blue-400); padding: .6rem .8rem; border-radius: 0 6px 6px 0; margin: 0 0 1rem; } /* The group sits on a sand section, so the note needs its own surface to read as an aside rather than as more body copy. */ .section--sand .card__note { background: var(--white); } .section--dark .checks li { color: var(--blue-100); } /* split feature */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .split__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--blue-100); } .split__media img, .split__media svg { width: 100%; display: block; } /* stats */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; } .stat__num { display: block; font-size: clamp(2.1rem, 4.5vw, 2.9rem); font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.03em; } .section--dark .stat__num { color: #fff; } .stat__lbl { display: block; font-size: .92rem; margin-top: .5rem; color: var(--ink-mute); } .section--dark .stat__lbl { color: var(--blue-200); } /* pricing */ .price-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; } .price-card--feature { border: 2px solid var(--blue); box-shadow: var(--shadow); } .price-card__flag { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 999px; white-space: nowrap; } .price-card__amt { font-size: 2.1rem; font-weight: 800; color: var(--blue-900); letter-spacing: -.03em; line-height: 1.1; } .price-card__note { font-size: .87rem; color: var(--ink-mute); margin-bottom: 1.3rem; } .price-card .checks { margin-bottom: 1.6rem; } .price-card .btn { margin-top: auto; } /* testimonials */ .quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; } .quote__stars { color: var(--amber); letter-spacing: .12em; font-size: 1rem; margin-bottom: .8rem; } .quote p { font-style: italic; color: var(--ink); font-size: 1rem; } .quote__who { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--blue-50); font-size: .88rem; } .quote__who strong { display: block; color: var(--ink); font-style: normal; } .quote__who span { color: var(--ink-mute); } /* FAQ */ .faq { max-width: 800px; margin-inline: auto; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .75rem; overflow: hidden; } .faq details[open] { border-color: var(--blue-200); box-shadow: var(--shadow-sm); } .faq summary { list-style: none; cursor: pointer; padding: 1.15rem 3rem 1.15rem 1.35rem; position: relative; font-weight: 650; color: var(--ink); font-size: 1.02rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 1.35rem; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(45deg); transition: transform .22s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq__body { padding: 0 1.35rem 1.3rem; font-size: .97rem; } .faq__body p:last-child { margin-bottom: 0; } /* CTA band */ .cta-band { background: linear-gradient(115deg, var(--blue-900) 0%, var(--blue-700) 100%); color: #fff; text-align: center; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(255, 255, 255, .88); max-width: 620px; margin-inline: auto; } /* ---------------------------------------------------------- contact ---- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); } .field { margin-bottom: 1.15rem; } .field label { display: block; font-size: .89rem; font-weight: 650; color: var(--ink); margin-bottom: .4rem; } .field .req { color: var(--red); } .field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); padding: .78rem .95rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .field textarea { min-height: 130px; resize: vertical; } .field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8492' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; padding-right: 2.5rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 119, 190, .13); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } } .form__note { font-size: .84rem; color: var(--ink-mute); margin-top: .9rem; text-align: center; } .hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; } .form__status { display: none; padding: .95rem 1.15rem; border-radius: var(--radius-sm); font-size: .95rem; margin-bottom: 1.2rem; } .form__status.is-ok { display: block; background: var(--green-light); color: var(--green-dark); border: 1px solid rgba(31, 164, 99, .3); } .form__status.is-err { display: block; background: #FDECEC; color: #A72F2F; border: 1px solid rgba(209, 67, 67, .3); } .info-card { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.15rem; } .info-card h3 { font-size: 1.1rem; } .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .info-list li { display: flex; gap: .85rem; margin: 0; } .info-list svg { width: 20px; height: 20px; flex: none; stroke: var(--blue); margin-top: .22rem; } .info-list strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); font-weight: 700; } .info-list a, .info-list span { font-size: 1.02rem; color: var(--ink); font-weight: 550; } .info-list a:hover { color: var(--blue); } /* --------------------------------------------------------- WhatsApp ---- */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: inline-flex; align-items: center; gap: .55rem; background: #25D366; color: #fff; font-weight: 650; font-size: .95rem; padding: .8rem 1.25rem .8rem 1rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(37, 211, 102, .42); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .wa-float:hover { transform: translateY(-3px) scale(1.02); color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, .5); } .wa-float svg { width: 24px; height: 24px; fill: #fff; flex: none; } @media (max-width: 560px) { .wa-float { right: 14px; bottom: 14px; padding: .85rem; gap: 0; } .wa-float span { display: none; } } /* ------------------------------------------------------------ footer -- */ .site-footer { background: var(--blue-900); color: var(--blue-200); padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .95rem; } .site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1.1rem; } .site-footer a { color: var(--blue-200); } .site-footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(130px, 1fr)); gap: 2.5rem; padding-bottom: 3rem; } @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } } .footer__about p { font-size: .93rem; color: var(--blue-200); max-width: 330px; } .footer__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; } .footer__brand .brand__name { color: #fff; } .footer__brand .brand__tag { color: var(--blue-200); } /* was --blue-400: 3.72:1 */ .footer__list { list-style: none; padding: 0; margin: 0; } .footer__list li { margin-bottom: .6rem; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .87rem; color: var(--blue-200); /* was --blue-400: 3.72:1 on --blue-900 */ } .footer__bottom nav { display: flex; gap: 1.3rem; flex-wrap: wrap; } /* ----------------------------------------------------------- reveal ---- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } .skip { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 200; background: var(--blue-900); color: #fff; padding: .7rem 1.3rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 650; transition: top .2s var(--ease); } .skip:focus { top: 0; color: #fff; } .center { text-align: center; } .mt-2 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } /* ------------------------------------------------------------- rates --- */ .rate-grid { display: grid; gap: var(--gap); align-items: start; } .rate-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .rate-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .rate-card__head { padding: 1.35rem 1.5rem .9rem; border-bottom: 1px solid var(--blue-50); } .rate-card__head h3 { margin-bottom: .3rem; } .rate-card__head p { font-size: .92rem; color: var(--ink-mute); margin: 0; } .rate-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .rate-table caption { text-align: left; padding: 0 1.5rem .75rem; font-size: .92rem; color: var(--ink-mute); } .rate-table th, .rate-table td { padding: .82rem 1rem; text-align: left; vertical-align: top; } .rate-table th:first-child, .rate-table td:first-child { padding-left: 1.5rem; } .rate-table th:last-child, .rate-table td:last-child { padding-right: 1.5rem; } .rate-table thead th { font-size: .74rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-800); background: var(--blue-50); white-space: nowrap; border-bottom: 1px solid var(--blue-100); } .rate-table tbody tr + tr { border-top: 1px solid var(--blue-50); } .rate-table tbody tr:hover { background: var(--blue-50); } .rate-table tbody th { font-weight: 650; color: var(--ink); } .rate-table td { color: var(--ink-soft); } .rate-table .rate-price { font-weight: 750; color: var(--blue-900); white-space: nowrap; font-variant-numeric: tabular-nums; } .rate-table .rate-sub { display: block; font-size: .82rem; color: var(--ink-mute); font-weight: 500; margin-top: .15rem; } .rate-table .rate-free { color: var(--green-dark); font-weight: 700; } /* Horizontal scroll rather than a squashed table on narrow screens. */ .rate-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Only 3+ column tables need a scroll floor. Applying it to the two-column surcharge and travel tables clipped their price column entirely. */ .rate-scroll--wide table { min-width: 520px; } .rate-note { display: flex; gap: .8rem; align-items: flex-start; background: var(--blue-900); color: var(--blue-100); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin-bottom: var(--gap); } .rate-note svg { width: 26px; height: 26px; flex: none; stroke: #fff; margin-top: .1rem; } .rate-note strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .2rem; } .rate-note p { margin: 0; font-size: .95rem; color: var(--blue-200); } .rate-pay { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: center; margin-top: 1.75rem; font-size: .93rem; color: var(--ink-mute); } .rate-pay span { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-weight: 600; color: var(--ink); } /* On narrow screens the 4-column rate tables scroll sideways. A fade on the card's right edge signals that there's more to see — CSS can't detect the overflow, but below 760px these tables always have some. */ @media (max-width: 760px) { .rate-card { position: relative; } .rate-card:has(.rate-scroll--wide)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46px; pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96)); } } /* ---------------------------------------------------------- utilities -- These exist because the Content-Security-Policy sets `style-src 'self'` with NO 'unsafe-inline'. That blocks inline style="" attributes AND inline