/* * NY Insurance Consultant — Main Stylesheet * Phase 1 · March 2026 * Fonts loaded via Google Fonts in * - Barlow Condensed (display/headlines) * - Barlow (subheadings) * - Plus Jakarta Sans (body/forms) */ /* ============================================= DESIGN TOKENS — Brand-accurate color system ============================================= */ :root { --green: #6BBF45; --green-mid: #58A835; --green-dark: #3D7A25; --green-light: #EBF7E3; --green-10: rgba(107,191,69,0.10); --green-20: rgba(107,191,69,0.20); --blue: #3B9FD4; --blue-mid: #2580B0; --blue-dark: #1A5E85; --blue-light: #E3F3FB; --blue-10: rgba(59,159,212,0.10); --ink: #111827; --ink-2: #1F2937; --ink-3: #374151; --mid: #6B7280; --muted: #9CA3AF; --border: #E5E7EB; --border-mid: #D1D5DB; --surface: #F9FAFB; --surface-2: #F3F4F6; --white: #FFFFFF; --font-display: 'Barlow Condensed', sans-serif; --font-heading: 'Barlow', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --radius: 8px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --shadow-lg: 0 16px 48px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06); --ease: cubic-bezier(0.4,0,0.2,1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; } /* ============================================= BUTTONS ============================================= */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius); transition: all 0.22s var(--ease); white-space: nowrap; line-height: 1; } .btn--green { background: var(--green); color: var(--white); } .btn--green:hover { background: var(--green-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(107,191,69,0.35); } .btn--blue { background: var(--blue); color: var(--white); } .btn--blue:hover { background: var(--blue-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,159,212,0.35); } .btn--outline-green { background: transparent; color: var(--green); border: 2px solid var(--green); } .btn--outline-green:hover { background: var(--green); color: var(--white); } .btn--outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.6); } .btn--outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.1); } .btn--outline-ink { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .btn--outline-ink:hover { background: var(--ink); color: var(--white); } .btn--lg { padding: 16px 32px; font-size: 17px; } .btn--sm { padding: 9px 18px; font-size: 13px; } .btn svg { flex-shrink: 0; } /* Eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; } .eyebrow::before { content: ''; display: block; width: 24px; height: 3px; background: var(--green); border-radius: 2px; flex-shrink: 0; } .eyebrow--blue { color: var(--blue); } .eyebrow--blue::before { background: var(--blue); } .eyebrow--white { color: var(--white); } .eyebrow--white::before { background: var(--white); } /* Fade-in animation */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ============================================= NAVIGATION ============================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), padding 0.3s var(--ease); padding: 18px 0; } .nav.scrolled { background: var(--white); padding: 10px 0; box-shadow: 0 2px 20px rgba(0,0,0,0.08); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Logo */ .nav__logo { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .nav__logo-mark { display: flex; align-items: center; gap: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; } .nav__logo-ny { font-size: 28px; color: var(--green); line-height: 1; text-shadow: none; } .nav__logo-text { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: var(--white); margin-left: 6px; transition: color 0.3s; } .nav.scrolled .nav__logo-text { color: var(--ink); } .nav__logo-sub { font-family: var(--font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; color: var(--green); display: block; margin-top: 1px; } /* Nav links */ .nav__menu { display: flex; align-items: center; gap: 2px; } .nav__item { position: relative; } .nav__link { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 8px 12px; border-radius: var(--radius); transition: all 0.2s; display: block; } .nav.scrolled .nav__link { color: var(--ink-3); } .nav__link:hover { color: var(--green); background: var(--green-10); } .nav.scrolled .nav__link:hover { color: var(--green); } /* Dropdown */ .nav__dropdown { position: absolute; top: calc(100% + 6px); left: -8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; min-width: 240px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(8px); transition: all 0.2s var(--ease); } .nav__item:hover .nav__dropdown { opacity: 1; pointer-events: all; transform: translateY(0); } .nav__dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-family: var(--font-body); font-size: 13px; color: var(--ink-3); border-radius: var(--radius); transition: all 0.15s; } .nav__dropdown-link:hover { background: var(--green-10); color: var(--green-dark); } .nav__dropdown-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } /* Nav right */ .nav__right { display: flex; align-items: center; gap: 12px; } .nav__phone { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; transition: color 0.2s; white-space: nowrap; flex-shrink: 0; } .nav.scrolled .nav__phone { color: var(--ink); } .nav__phone:hover { color: var(--green); } .nav__es { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--green-10); color: var(--green); border: 1px solid var(--green-20); padding: 5px 12px; border-radius: 100px; transition: all 0.2s; } .nav__es:hover { background: var(--green); color: var(--white); } .nav__hamburger { display: none; flex-direction: column; gap: 5px; } .nav__hamburger span { width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.2s; display: block; } .nav.scrolled .nav__hamburger span { background: var(--ink); } /* ============================================= HERO ============================================= */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .hero__bg-photo { position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1556742393-d75f468bfcb0?w=1920&q=80&auto=format&fit=crop'); background-size: cover; background-position: center; transform: scale(1.04); transition: transform 10s ease; } .hero__bg-photo.ken-burns { transform: scale(1); } .hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient( 110deg, rgba(17,24,39,0.88) 0%, rgba(17,24,39,0.75) 45%, rgba(59,159,212,0.12) 100% ); } .hero__bg-pattern { position: absolute; inset: 0; opacity: 0.03; background-image: repeating-linear-gradient( 45deg, var(--green) 0, var(--green) 1px, transparent 0, transparent 50% ); background-size: 32px 32px; } .hero__top-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green) 0%, var(--blue) 60%, var(--green) 100%); background-size: 200% 100%; animation: barShift 6s linear infinite; } @keyframes barShift { 0%{background-position:0 0} 100%{background-position:200% 0} } .hero__content { position: relative; z-index: 2; padding: 140px 0 100px; width: 100%; } .hero__flag { display: inline-flex; align-items: center; gap: 10px; background: rgba(107,191,69,0.12); border: 1px solid rgba(107,191,69,0.25); border-radius: 100px; padding: 8px 18px; margin-bottom: 28px; animation: heroFadeDown 0.6s ease both; } .hero__flag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: dotPulse 2.5s ease infinite; } @keyframes dotPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:0.7} } .hero__flag span { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); } @keyframes heroFadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} } @keyframes heroFadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} } .hero__h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 7.5vw, 100px); line-height: 0.92; letter-spacing: -0.01em; color: var(--white); margin-bottom: 24px; animation: heroFadeUp 0.7s ease 0.1s both; } .hero__h1 .g { color: var(--green); } .hero__h1 .b { color: var(--blue); } .hero__h1 .in { padding-left: 0.5ch; } .hero__subhead { font-family: var(--font-body); font-size: clamp(15px, 2vw, 18px); font-weight: 400; color: rgba(255,255,255,0.72); max-width: 580px; line-height: 1.72; margin-bottom: 36px; animation: heroFadeUp 0.7s ease 0.2s both; } .hero__subhead strong { color: rgba(255,255,255,0.95); font-weight: 600; } .hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; animation: heroFadeUp 0.7s ease 0.3s both; } .hero__proof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; animation: heroFadeUp 0.7s ease 0.4s both; } .hero__proof-item { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88); } .hero__proof-item .ck { width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero__proof-item .ck svg { width: 10px; height: 10px; } .hero__scroll-cue { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); animation: heroFadeUp 1s ease 0.9s both; } .hero__scroll-line { width: 1px; height: 36px; background: rgba(255,255,255,0.18); animation: scrollPulse 2.2s ease infinite; } @keyframes scrollPulse { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* ============================================= MARQUEE — CLIENT TYPES ============================================= */ .marquee-bar { background: var(--green); padding: 0; overflow: hidden; border-top: 3px solid var(--green-mid); border-bottom: 3px solid var(--green-mid); } .marquee-track { display: flex; gap: 0; animation: marqueeScroll 28s linear infinite; width: max-content; } @keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } .marquee-item { display: flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .marquee-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: 0.3; flex-shrink: 0; } /* ============================================= STATS ============================================= */ .stats { background: var(--ink); padding: 0; } .stats__grid { display: grid; grid-template-columns: repeat(4,1fr); } .stats__cell { padding: 40px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,0.07); position: relative; transition: background 0.2s; } .stats__cell:last-child { border-right: none; } .stats__cell:hover { background: rgba(107,191,69,0.05); } .stats__num { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; font-size: clamp(40px, 4.5vw, 60px); color: var(--green); line-height: 1; } .stats__lbl { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 6px; line-height: 1.5; } /* ============================================= COMMUNITY SECTION ============================================= */ .community { padding: 96px 0; background: var(--white); } .community__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .community__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 4.5vw, 58px); line-height: 0.96; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 20px; } .community__title .g { color: var(--green); } .community__title .b { color: var(--blue); } .community__lead { font-family: var(--font-body); font-size: 16px; color: var(--mid); line-height: 1.75; margin-bottom: 28px; } .community__lead strong { color: var(--ink); } .community__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .community__pill { font-family: var(--font-body); font-size: 13px; font-weight: 500; background: var(--green-light); color: var(--green-dark); padding: 6px 14px; border-radius: 100px; border: 1px solid rgba(107,191,69,0.25); } .community__visual { position: relative; border-radius: var(--radius-xl); overflow: visible; } .community__img { width: 100%; /* Portrait photo: 900x1198 — use aspect-ratio to preserve shape */ aspect-ratio: 3 / 4; max-height: 560px; object-fit: cover; background-image: url('/assets/images/community-bg.jpg'); background-size: cover; background-position: center top; border-radius: var(--radius-xl); display: block; } .community__badge-card { position: absolute; bottom: -24px; right: -24px; background: var(--white); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); border: 1px solid var(--border); max-width: 240px; z-index: 2; } .community__badge-big { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: var(--green); line-height: 1; } .community__badge-lbl { font-family: var(--font-body); font-size: 11px; color: var(--mid); line-height: 1.45; margin-top: 5px; font-weight: 500; } .community__peter-card { position: absolute; bottom: 24px; left: 24px; background: rgba(17,24,39,0.9); backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: 14px 18px; border: 1px solid rgba(107,191,69,0.3); z-index: 2; } .community__peter-name { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: 0.02em; } .community__peter-role { font-family: var(--font-body); font-size: 11px; color: var(--green); margin-top: 3px; line-height: 1.4; } /* ============================================= SERVICES — GRID ============================================= */ .services { padding: 96px 0; background: var(--surface); } .services__head { text-align: center; margin-bottom: 56px; } .services__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 14px; } .services__title span { color: var(--green); } .services__sub { font-family: var(--font-body); font-size: 16px; color: var(--mid); max-width: 560px; margin: 0 auto; line-height: 1.65; } .services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .svc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all 0.25s var(--ease); position: relative; overflow: hidden; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .svc-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); } .svc-card:hover::after { transform: scaleX(1); } .svc-card--primary { border-color: var(--green-20); background: var(--green-light); } .svc-card--primary::after { transform: scaleX(1); } .svc-card--blue { border-color: rgba(59,159,212,0.2); } .svc-card--blue::after { background: var(--blue); } .svc-card__emoji { font-size: 32px; margin-bottom: 16px; } .svc-card__tag { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } .svc-card--blue .svc-card__tag { color: var(--blue); } .svc-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); line-height: 1.1; margin-bottom: 10px; } .svc-card__desc { font-family: var(--font-body); font-size: 13px; color: var(--mid); line-height: 1.7; margin-bottom: 18px; } .svc-card__link { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 5px; transition: gap 0.2s; } .svc-card--blue .svc-card__link { color: var(--blue); } .svc-card__link:hover { gap: 9px; } /* ============================================= WHO WE SERVE — INDUSTRY TILES ============================================= */ .industries { padding: 96px 0; background: var(--white); } .industries__head { margin-bottom: 52px; } .industries__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px,4vw,52px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .industries__title span { color: var(--green); } .industries__sub { font-family: var(--font-body); font-size: 16px; color: var(--mid); line-height: 1.65; max-width: 560px; } .industries__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .ind-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; text-align: center; transition: all 0.22s var(--ease); cursor: default; } .ind-tile:hover { background: var(--green-light); border-color: rgba(107,191,69,0.3); transform: translateY(-2px); } .ind-tile--accent { background: var(--ink); border-color: var(--ink); } .ind-tile--accent:hover { background: var(--ink-2); } .ind-tile__icon { font-size: 34px; margin-bottom: 10px; line-height: 1; } .ind-tile__name { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1.2; } .ind-tile--accent .ind-tile__name { color: var(--white); } .ind-tile__note { font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-top: 5px; } .ind-tile--accent .ind-tile__note { color: rgba(255,255,255,0.45); } /* ============================================= PETER — ABOUT STRIP ============================================= */ .peter-strip { background: var(--ink); padding: 80px 0; position: relative; overflow: hidden; } .peter-strip::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(107,191,69,0.06) 0%, rgba(59,159,212,0.06) 100%); pointer-events: none; } .peter-strip__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: center; } .peter-strip__left {} .peter-strip__quote-mark { font-family: var(--font-display); font-size: 120px; font-weight: 900; color: rgba(107,191,69,0.15); line-height: 0.8; margin-bottom: 16px; } .peter-strip__quote { font-family: var(--font-body); font-size: 18px; font-style: italic; color: rgba(255,255,255,0.82); line-height: 1.75; margin-bottom: 28px; } .peter-strip__sig { } .peter-strip__name { font-family: var(--font-display); font-size: 20px; font-weight: 900; text-transform: uppercase; color: var(--white); letter-spacing: 0.03em; } .peter-strip__role { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 3px; } .peter-strip__right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .peter-fact { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: 24px; transition: background 0.2s; } .peter-fact:hover { background: rgba(107,191,69,0.06); border-color: rgba(107,191,69,0.15); } .peter-fact__icon { font-size: 26px; margin-bottom: 10px; } .peter-fact__val { font-family: var(--font-display); font-size: 32px; font-weight: 900; color: var(--green); line-height: 1; } .peter-fact__lbl { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 5px; line-height: 1.45; } /* ============================================= STATES — LICENSED COVERAGE ============================================= */ .states { padding: 80px 0; background: var(--blue); position: relative; overflow: hidden; } .states::before { content: 'USA'; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 260px; font-weight: 900; color: rgba(255,255,255,0.05); pointer-events: none; letter-spacing: -0.05em; } .states__head { text-align: center; margin-bottom: 48px; } .states__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(34px,4vw,50px); line-height: 1; letter-spacing: -0.01em; color: var(--white); margin-bottom: 10px; } .states__sub { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.75); } .states__regions { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; } .state-region { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-lg); padding: 20px; transition: all 0.2s; } .state-region:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); } .state-region__name { font-family: var(--font-display); font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--white); margin-bottom: 8px; } .state-region__states { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.6; } .state-region__badge { display: inline-block; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(107,191,69,0.25); color: var(--green-light); border: 1px solid rgba(107,191,69,0.3); padding: 3px 9px; border-radius: 20px; margin-bottom: 8px; } /* ============================================= TESTIMONIALS ============================================= */ .testimonials { padding: 96px 0; background: var(--surface); } .testimonials__head { text-align: center; margin-bottom: 56px; } .testimonials__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px,4vw,52px); line-height: 1; letter-spacing: -0.01em; color: var(--ink); } .testimonials__title span { color: var(--green); } .testimonials__sub { font-family: var(--font-body); font-size: 15px; color: var(--mid); margin-top: 10px; } /* testimonials__grid replaced by carousel */ .tcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: all 0.25s var(--ease); } .tcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: transparent; } .tcard__stars { display: flex; gap: 3px; margin-bottom: 14px; } .tcard__star { color: var(--green); font-size: 15px; } .tcard__quote { font-family: var(--font-body); font-size: 15px; color: var(--ink-3); line-height: 1.75; margin-bottom: 22px; font-style: italic; } .tcard__footer { display: flex; align-items: center; gap: 12px; } .tcard__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: var(--white); font-family: var(--font-display); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tcard__name { font-family: var(--font-display); font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; } .tcard__biz { font-family: var(--font-body); font-size: 12px; color: var(--green); margin-top: 2px; } /* ============================================= SPANISH STRIP ============================================= */ .es-strip { background: var(--green); padding: 72px 0; position: relative; overflow: hidden; } .es-strip::before { content: '¡HOLA!'; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 220px; font-weight: 900; color: rgba(0,0,0,0.06); pointer-events: none; letter-spacing: -0.04em; } .es-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .es-strip__content { flex: 1; } .es-strip__eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.5); margin-bottom: 10px; } .es-strip__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(32px,4vw,52px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; } .es-strip__sub { font-family: var(--font-body); font-size: 16px; color: rgba(17,24,39,0.7); line-height: 1.6; max-width: 500px; } .es-strip__ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* ============================================= BLOG PREVIEW ============================================= */ .blog { padding: 96px 0; background: var(--white); } .blog__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 20px; } .blog__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(32px,4vw,48px); line-height: 1; color: var(--ink); } .blog__title span { color: var(--green); } .blog__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .bcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.25s var(--ease); } .bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .bcard__img { height: 190px; background-size: cover; background-position: center; position: relative; } .bcard__cat { position: absolute; top: 14px; left: 14px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--green); color: var(--white); padding: 4px 10px; border-radius: 4px; } .bcard__body { padding: 22px; } .bcard__date { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-bottom: 6px; } .bcard__title { font-family: var(--font-display); font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); line-height: 1.2; margin-bottom: 8px; } .bcard__excerpt { font-family: var(--font-body); font-size: 13px; color: var(--mid); line-height: 1.7; margin-bottom: 14px; } .bcard__link { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 4px; } /* ============================================= CONTACT SECTION ============================================= */ .contact { padding: 96px 0; background: var(--ink); } .contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .contact__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px,4vw,52px); line-height: 1; letter-spacing: -0.01em; color: var(--white); margin-bottom: 14px; } .contact__title span { color: var(--green); } .contact__sub { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 36px; } .contact__info { display: flex; flex-direction: column; gap: 18px; } .contact__row { display: flex; align-items: flex-start; gap: 14px; } .contact__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--green-10); border: 1px solid rgba(107,191,69,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .contact__label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 3px; } .contact__val { font-family: var(--font-body); font-size: 15px; color: rgba(255,255,255,0.8); } .contact__val a { color: var(--green); } /* Quote Form */ .qform { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 36px; } .qform__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: 0.02em; margin-bottom: 4px; } .qform__sub { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 24px; } .qform__progress { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; margin-bottom: 24px; overflow: hidden; } .qform__bar { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s var(--ease); width: 33%; } .qform__steps {} .qform__step { display: none; } .qform__step.on { display: block; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .f-group { margin-bottom: 14px; } .f-label { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 7px; } .f-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--white); outline: none; appearance: none; transition: border-color 0.2s; } .f-input::placeholder { color: rgba(255,255,255,0.2); } .f-input:focus { border-color: var(--green); background: rgba(107,191,69,0.06); } .f-input option { background: var(--ink-2); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chip { padding: 7px 14px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.12); font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.15s; user-select: none; } .chip.on { background: var(--green-10); border-color: var(--green); color: var(--green); } .chip input { display: none; } .qform__nav { display: flex; gap: 10px; margin-top: 20px; } .qform__back { flex: 1; padding: 12px; font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); transition: all 0.2s; } .qform__back:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); } .qform__next { flex: 2; } .qform__note { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,0.65); text-align: center; margin-top: 12px; line-height: 1.5; } .success-box { text-align: center; padding: 16px 0; } .success-box__ico { font-size: 52px; margin-bottom: 14px; } .success-box__title { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-transform: uppercase; color: var(--green); margin-bottom: 8px; } .success-box__sub { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; } .success-box__sub a { color: var(--green); } /* ============================================= CARRIERS ============================================= */ .carriers { background: var(--surface-2); padding: 36px 0; border-top: 1px solid var(--border); } .carriers__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; } .carriers__label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .carriers__div { width: 1px; height: 20px; background: var(--border-mid); } .carriers__list { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .carrier-pill { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--mid); background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 5px 12px; transition: all 0.15s; } .carrier-pill:hover { border-color: var(--green); color: var(--ink); } .carriers__badge { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; background: var(--ink); color: var(--white); padding: 7px 14px; border-radius: 4px; display: flex; align-items: center; gap: 6px; } .carriers__badge-star { color: var(--green); } /* ============================================= FOOTER ============================================= */ .footer { background: var(--ink-2); border-top: 1px solid rgba(255,255,255,0.06); padding: 64px 0 32px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer__brand-name { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--white); margin-bottom: 12px; } .footer__brand-name span { color: var(--green); } .footer__tagline { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.7; max-width: 280px; margin-bottom: 16px; } .footer__license { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,0.60); line-height: 1.5; } .footer__col-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; } .footer__links { display: flex; flex-direction: column; gap: 9px; } .footer__link { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.15s; } .footer__link:hover { color: var(--green); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; gap: 12px; } .footer__copy { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.25); } .footer__copy span { color: var(--green); } .footer__bottom-links { display: flex; gap: 20px; } .footer__bottom-link { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.25); transition: color 0.15s; } .footer__bottom-link:hover { color: var(--white); } /* ============================================= WHATSAPP BUTTON ============================================= */ .wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 800; width: 58px; height: 58px; border-radius: 50%; background: #25D366; box-shadow: 0 4px 20px rgba(37,211,102,0.45); display: flex; align-items: center; justify-content: center; transition: transform 0.2s var(--ease), box-shadow 0.2s; animation: waPop 3s ease infinite 3s; } .wa-float:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,0.55); } @keyframes waPop { 0%,85%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.45)} 92%{box-shadow:0 4px 20px rgba(37,211,102,0.45),0 0 0 14px rgba(37,211,102,0.12)} } .wa-float svg { width: 30px; height: 30px; } .wa-tip { position: absolute; bottom: 66px; right: 0; background: var(--ink); color: var(--white); font-family: var(--font-body); font-size: 12px; padding: 7px 13px; border-radius: var(--radius); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(6px); transition: all 0.2s; border: 1px solid rgba(255,255,255,0.07); } .wa-float:hover .wa-tip { opacity: 1; transform: translateY(0); } /* ============================================= MODAL ============================================= */ .overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(17,24,39,0.82); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; } .overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--ink-2); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); width: 100%; max-width: 500px; padding: 36px; position: relative; transform: translateY(18px) scale(0.97); transition: transform 0.25s var(--ease); max-height: 90vh; overflow-y: auto; } .overlay.open .modal { transform: translateY(0) scale(1); } .modal__x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); font-size: 17px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .modal__x:hover { background: rgba(255,255,255,0.12); color: var(--white); } .modal__ey { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; } .modal__h { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-transform: uppercase; color: var(--white); letter-spacing: -0.01em; margin-bottom: 4px; } .modal__sub { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 20px; } .modal__prog { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; margin-bottom: 22px; overflow: hidden; } .modal__bar { height: 100%; background: var(--green); transition: width 0.4s var(--ease); width: 33%; } .m-step { display: none; } .m-step.on { display: block; } /* ============================================= MOBILE DRAWER ============================================= */ .drawer { position: fixed; inset: 0; z-index: 950; background: var(--white); transform: translateX(100%); transition: transform 0.32s var(--ease); padding: 72px 28px 40px; overflow-y: auto; } .drawer.open { transform: translateX(0); } .drawer__x { position: absolute; top: 18px; right: 22px; font-size: 26px; color: var(--ink); line-height: 1; } .drawer__links { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; } .drawer__link { font-family: var(--font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--ink-3); padding: 8px 0; border-bottom: 1px solid var(--border); letter-spacing: 0.02em; transition: color 0.15s; } .drawer__link:hover { color: var(--green); } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1080px) { .services__grid { grid-template-columns: repeat(2,1fr); } .industries__grid { grid-template-columns: repeat(4,1fr); } .peter-strip__grid { grid-template-columns: 1fr; gap: 48px; } .states__regions { grid-template-columns: repeat(3,1fr); } .contact__grid { grid-template-columns: 1fr; gap: 48px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 768px) { .nav__menu, .nav__es { display: none; } .nav__hamburger { display: flex; } /* Keep phone number visible on mobile so visitors can call directly */ .nav__phone { display: flex; font-size: 13px; } /* Hide booking + quote buttons on very small screens to avoid crowding */ .nav__right .btn { display: none; } .stats__grid { grid-template-columns: repeat(2,1fr); } .stats__cell:nth-child(2) { border-right: none; } .stats__cell:nth-child(3), .stats__cell:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); } .community__grid { grid-template-columns: 1fr; } .community__badge-card { display: none; } .services__grid { grid-template-columns: 1fr; } .industries__grid { grid-template-columns: repeat(2,1fr); } /* testimonials carousel is single-column by design */ .blog__grid { grid-template-columns: 1fr; } .states__regions { grid-template-columns: repeat(2,1fr); } .footer__grid { grid-template-columns: 1fr; } .f-row { grid-template-columns: 1fr; } .hero__ctas { flex-direction: column; align-items: flex-start; } .peter-strip__right { grid-template-columns: 1fr 1fr; } .es-strip__inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .industries__grid { grid-template-columns: repeat(2,1fr); } .states__regions { grid-template-columns: 1fr 1fr; } } /* ============================================= GOOGLE RATING BADGE ============================================= */ .g-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--border); border-radius: 100px; padding: 8px 18px 8px 14px; box-shadow: var(--shadow-sm); } .g-badge__logo { font-size: 18px; } .g-badge__stars { display: flex; gap: 2px; } .g-badge__star { color: #FBBC05; font-size: 14px; line-height: 1; } .g-badge__text { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); } .g-badge__count { font-family: var(--font-body); font-size: 12px; color: var(--mid); } /* ============================================= TESTIMONIAL CAROUSEL ============================================= */ .carousel { position: relative; max-width: 780px; margin: 0 auto; } .carousel__track { position: relative; overflow: hidden; } .carousel__slide { position: absolute; inset: 0; opacity: 0; transform: translateX(40px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); pointer-events: none; } .carousel__slide.active { position: relative; opacity: 1; transform: translateX(0); pointer-events: all; } .carousel__slide.exit-left { position: absolute; inset: 0; opacity: 0; transform: translateX(-40px); } .carousel__card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 40px 44px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .carousel__card::before { content: '"'; position: absolute; top: -10px; right: 28px; font-family: var(--font-display); font-size: 160px; font-weight: 900; color: rgba(107,191,69,0.06); line-height: 1; pointer-events: none; } .carousel__source-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 18px; } .carousel__source-badge--google { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; } .carousel__source-badge--client { background: var(--green-light); color: var(--green-dark); border: 1px solid rgba(107,191,69,0.25); } .carousel__stars { display: flex; gap: 3px; margin-bottom: 20px; } .carousel__star { color: var(--green); font-size: 20px; } .carousel__star--google { color: #FBBC05; } .carousel__quote { font-family: var(--font-body); font-size: 18px; font-style: italic; color: var(--ink-3); line-height: 1.75; margin-bottom: 28px; position: relative; z-index: 1; } .carousel__footer { display: flex; align-items: center; gap: 14px; } .carousel__avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--white); background: var(--green); } .carousel__avatar--google { background: #4285F4; } .carousel__name { font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; } .carousel__biz { font-family: var(--font-body); font-size: 13px; color: var(--green); margin-top: 2px; } .carousel__date { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-top: 1px; } .carousel__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; } .carousel__arrow { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 16px; cursor: pointer; transition: all 0.2s var(--ease); flex-shrink: 0; } .carousel__arrow:hover { border-color: var(--green); color: var(--green); background: var(--green-light); } .carousel__dots { display: flex; gap: 8px; align-items: center; } .carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-mid); cursor: pointer; transition: all 0.25s var(--ease); border: none; } .carousel__dot.active { background: var(--green); transform: scale(1.3); } .carousel__counter { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); } .carousel__progress { height: 3px; background: var(--border); border-radius: 2px; margin-top: 20px; overflow: hidden; } .carousel__progress-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.15s linear; } /* ============================================= BOOKING BANNER ============================================= */ .book-banner { background: var(--green-light); border-top: 1px solid rgba(107,191,69,0.2); border-bottom: 1px solid rgba(107,191,69,0.2); padding: 28px 0; } .book-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .book-banner__icon { font-size: 36px; flex-shrink: 0; } .book-banner__text { flex: 1; } .book-banner__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; } .book-banner__sub { font-family: var(--font-body); font-size: 14px; color: var(--mid); margin-top: 3px; } .book-banner__ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ============================================= BOOKING SECTION in contact ============================================= */ .contact__book { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); } .contact__book-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 10px; } .contact__book-card { background: rgba(107,191,69,0.08); border: 1px solid rgba(107,191,69,0.2); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: background 0.2s; } .contact__book-card:hover { background: rgba(107,191,69,0.14); } .contact__book-icon { font-size: 28px; flex-shrink: 0; } .contact__book-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: 0.02em; } .contact__book-desc { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; } .contact__book-arrow { margin-left: auto; font-size: 20px; color: var(--green); flex-shrink: 0; }