/* ========================================================================== Bacarella Insurance Group — shared stylesheet Loaded on every page. Organized top to bottom in the order things render: reset -> design tokens -> layout helpers -> header/nav -> buttons -> page sections -> footer -> responsive (mobile) overrides at the bottom. ========================================================================== */ /* Google Fonts: the same two typefaces (Wix Madefor Display / Text) the original Wix template used. A @import pulls the font file from Google's server before the rest of the CSS runs. */ @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400..800&family=Wix+Madefor+Text:wght@400..800&display=swap'); /* A CSS reset: browsers ship with their own default spacing/sizing for headings, lists, etc. Zeroing it out here means every page starts from the same blank slate instead of fighting browser defaults later. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Design tokens: custom properties (CSS variables) declared once on :root (the element) so every rule below can reference var(--color-primary) instead of repeating the raw hex code. Change the brand color once here and it updates everywhere. */ :root { --color-primary: #1aaaff; /* Bacarella blue — buttons, links, accents */ --color-navy: #1b2a4a; /* logo navy, headings on light sections */ --color-gold: #c9a35c; /* logo gold accent, used sparingly */ --color-gray-light: #eeeeee; /* section backgrounds */ --color-gray-text: #555555; --color-black: #111111; --color-white: #ffffff; --font-display: 'Wix Madefor Display', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Wix Madefor Text', 'Helvetica Neue', Arial, sans-serif; --max-width: 1200px; } html { scroll-behavior: smooth; /* smooth-scrolls to #anchors instead of jumping */ } body { font-family: var(--font-body); color: var(--color-black); line-height: 1.6; background: var(--color-white); } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; } /* .container centers content and caps its width — the standard pattern for keeping text readable on wide monitors instead of stretching edge to edge. */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ========================================================================== Header / navigation ========================================================================== */ .site-header { position: absolute; /* floats over the hero image on the home page */ top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; } /* Inner pages (Personal, Contact, etc.) don't have a photo hero behind the nav, so they use this modifier class to give the header a solid white background and normal document flow instead of floating transparently. */ .site-header.solid { position: relative; background: var(--color-white); /* box-shadow instead of border-bottom for the divider line: a shadow is painted on top and takes up no layout space, so it doesn't add to the bar's height. Dropping the 12px top/bottom padding (24px) plus the old 1px border makes the banner 25px shorter without shrinking the logo. */ box-shadow: 0 1px 0 var(--color-gray-light); padding: 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); } .logo img { /* The new logo is a detailed circular badge (fine print text ringing a seal), so it needs more height than a simple wordmark to stay legible. Sized up 50% from the original 84px / 92px for extra presence. */ height: 126px; width: auto; } .site-header.solid .logo img { height: 138px; } /* Home page only. The header's height is driven entirely by the logo (its padding is already 0), so shrinking the logo ~25% (138px -> 104px) makes the whole bar ~25% shorter on the home page without touching other pages. */ .site-header.home-header .logo img { height: 104px; } /* 5px of breathing room above the logo on the home page. This is on the .logo link (not the image), so it adds a gap without shrinking the logo; the header bar grows by the same 5px. */ .site-header.home-header .logo { padding-top: 5px; } .main-nav { display: flex; align-items: center; gap: 36px; } .main-nav a { font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .site-header:not(.solid) .main-nav a { color: var(--color-white); } .main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--color-primary); } .site-header:not(.solid) .main-nav a:hover, .site-header:not(.solid) .main-nav a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); } .nav-cta { background: var(--color-primary); color: var(--color-white) !important; padding: 12px 22px; font-size: 14px; font-weight: 700; text-transform: uppercase; white-space: nowrap; } .nav-cta:hover { background: var(--color-navy); } /* Home page only: the header Get A Quote button hovers to gold instead of navy. The extra classes make this more specific than the rule above, so it wins. */ .site-header.home-header .nav-cta:hover { background: var(--color-gold); } /* Hamburger button: hidden on desktop, shown only under the mobile media query near the bottom of this file. */ .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .menu-toggle span { width: 26px; height: 2px; background: currentColor; } .site-header:not(.solid) .menu-toggle { color: var(--color-white); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-block; padding: 14px 32px; font-family: var(--font-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.03em; border: 2px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn-primary { background: var(--color-primary); color: var(--color-white); } .btn-primary:hover { background: var(--color-navy); } /* The "Meet Our Team" button in the About section hovers to gold. Scoped to .about so the form Submit buttons (also .btn-primary) keep the navy hover. */ .about .btn-primary:hover { background: var(--color-gold); } .btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); border-radius: 999px; } .btn-outline:hover { background: var(--color-white); color: var(--color-primary); } .btn-text { color: var(--color-primary); font-weight: 700; font-size: 14px; text-transform: uppercase; border-bottom: 2px solid var(--color-primary); padding-bottom: 2px; } /* ========================================================================== Hero (home page) ========================================================================== */ .hero { position: relative; /* min-height sets how tall the hero is when its content is shorter than this; the background photo (background-size: cover) stretches to fill whatever height results. Bumped from 640px to make the photo taller. */ min-height: 800px; display: flex; align-items: center; background-size: cover; background-position: center; overflow: hidden; } /* The hero is a flex container, and a flex child only grows to fit its contents by default. Without width: 100% the .container shrinks to the width of the blue box and re-centers itself, so its left edge no longer matches the header/section content. Forcing full width lets the normal max-width + auto-margin centering apply, so the box below lines up with the logo and the sections further down the page. */ .hero .container { width: 100%; } .hero-overlay { background: rgba(26, 170, 255, 0.82); max-width: 520px; padding: 56px 48px; /* margin-left: 0 keeps the box flush with the container's left edge, so it lines up vertically with the header logo and the section content below. (Was 6%, which nudged it inward from that edge.) */ margin-left: 0; } .hero-overlay h1 { color: var(--color-white); font-size: 2.6rem; margin-bottom: 32px; } /* ========================================================================== Page hero (inner pages — solid blue/navy band with a title, no photo) ========================================================================== */ .page-hero { background: var(--color-primary); color: var(--color-white); text-align: center; padding: 80px 24px; } .page-hero h1 { font-size: 2.2rem; max-width: 700px; margin: 0 auto; } /* ========================================================================== Intro strip (3-column band under the home hero) ========================================================================== */ .intro-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--color-gray-light); text-align: center; } .intro-strip a { padding: 40px 24px; border-right: 1px solid #d8d8d8; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-primary); text-transform: uppercase; /* animate both properties that change on hover so they fade rather than snap */ transition: background 0.2s ease, color 0.2s ease; } .intro-strip a:last-child { border-right: none; } .intro-strip a:hover { /* brand blue at 0.6 alpha = 40% transparent; text flips to white */ background: rgba(26, 170, 255, 0.6); color: var(--color-white); } /* ========================================================================== About section ========================================================================== */ .about { background: var(--color-gray-light); padding: 96px 0; } .about .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .about-label { color: var(--color-primary); font-weight: 700; letter-spacing: 0.05em; font-size: 0.95rem; margin-bottom: 8px; } .about h2 { color: var(--color-primary); font-size: 2rem; margin-bottom: 24px; } .about p { margin-bottom: 20px; color: var(--color-gray-text); } .about img { width: 100%; height: auto; } /* ========================================================================== Service grids (Personal / Commercial / Health & Life) ========================================================================== */ .services { padding: 96px 0; } .services-header { text-align: center; max-width: 700px; margin: 0 auto 56px; } .services-header h2 { color: var(--color-primary); font-size: 2.2rem; } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } /* The Long Term Care section has only one card. On desktop, give its grid a single fixed-width track and center it, instead of letting the lone card sit in the left third of a 3-column layout. (Mobile already stacks to one full-width column via the max-width: 900px rule near the bottom.) */ @media (min-width: 901px) { #long-term-care .service-grid { grid-template-columns: minmax(0, 360px); justify-content: center; } } .service-card img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 24px; } .service-card h3 { color: var(--color-black); font-size: 1.3rem; margin-bottom: 12px; } .service-card p { color: var(--color-gray-text); font-size: 0.95rem; margin-bottom: 16px; } /* ========================================================================== Testimonials ========================================================================== */ .testimonials { background: linear-gradient(0deg, var(--color-primary) 3%, var(--color-white) 100%); padding: 96px 0; text-align: center; } .testimonials h2 { font-size: 2.2rem; margin-bottom: 56px; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; } .testimonial-card { background: var(--color-white); padding: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .testimonial-card p { color: var(--color-gray-text); margin-bottom: 20px; font-size: 0.95rem; } .testimonial-card cite { font-family: var(--font-display); font-weight: 700; font-style: normal; } /* ========================================================================== Team page ========================================================================== */ .founders { padding: 96px 0; } .founders-intro { max-width: 700px; margin: 0 auto 56px; text-align: center; } .founders-intro h2 { color: var(--color-primary); font-size: 2.2rem; margin-bottom: 16px; } .founders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; margin-bottom: 40px; } .founder-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 20px; } .founder-card .role { color: var(--color-primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .founder-card h3 { font-size: 1.4rem; margin-bottom: 12px; } .founder-card p { color: var(--color-gray-text); font-size: 0.95rem; } /* --- Team bios: reveal on hover -------------------------------------------- .founder-media wraps the photo + the bio. position: relative makes it the anchor that the absolutely-positioned bio is measured against, so the bio can sit ON TOP of the photo instead of pushing the layout around. */ .founder-media { position: relative; } /* @media (hover: hover) = "only on devices with a real mouse/trackpad". Phones and tablets have no hover, so there the bio just stays visible below the photo as normal text and nothing is hidden. */ @media (hover: hover) { .founder-media img { margin-bottom: 0; /* the overlay covers the photo; spacing moves to .role */ } .founder-card .founder-bio { position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 → fill the photo */ margin: 0; padding: 20px; /* smaller pad = text reaches closer to the edges */ display: flex; /* used here just to vertically center the text */ align-items: center; /* The brand light blue (#1aaaff = rgb(26,170,255)) at 0.6 alpha, i.e. 60% opaque / 40% transparent, so the photo still shows through faintly. */ background: rgba(26, 170, 255, 0.6); color: var(--color-black); font-size: 1.1rem; /* a step up from the 0.95rem body size */ line-height: 1.7; /* looser lines so the text fills more of the photo */ opacity: 0; /* hidden until the card is hovered */ transition: opacity 0.25s ease; overflow-y: auto; /* scroll inside the box if a bio runs long */ } /* Show it on hover, and also on keyboard focus within the card. */ .founder-card:hover .founder-bio, .founder-card:focus-within .founder-bio { opacity: 1; } .founder-media + .role { margin-top: 20px; /* replaces the gap the photo's margin used to give */ } } .team-section { background: var(--color-gray-light); padding: 96px 0; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } /* ========================================================================== Forms (Contact / Get A Quote) ========================================================================== */ .form-section { padding: 80px 0 120px; } .form-section form { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: 0.9rem; font-weight: 700; } .form-field input, .form-field select, .form-field textarea { font-family: var(--font-body); font-size: 1rem; padding: 12px 14px; border: 1px solid #ccc; background: var(--color-white); } .form-field textarea { min-height: 140px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } .form-section .btn { grid-column: 1 / -1; justify-self: start; } /* Small "Made with love by BitMonkey Tech" credit under the form. */ .form-credit { max-width: 720px; margin: 40px auto 0; text-align: center; font-size: 0.85rem; color: var(--color-gray-text); } .form-credit a { color: var(--color-primary); font-weight: 700; } .form-credit a:hover { text-decoration: underline; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--color-primary); color: var(--color-white); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-logo { /* footer-logo.svg is drawn in gold + off-white and is made to sit straight on the blue footer, so it no longer needs the white backing plate the old logo required (its blue parts would have vanished on blue). */ height: 135px; width: auto; margin-bottom: 16px; } .footer-nav a, .footer-contact p { display: block; margin-bottom: 12px; } .footer-nav a:hover { text-decoration: underline; } .social-links { display: flex; gap: 16px; margin-top: 8px; } .social-links a { width: 38px; height: 38px; border: 1px solid var(--color-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .social-links a:hover { background: var(--color-white); color: var(--color-primary); } .footer-bottom { text-align: center; font-size: 0.85rem; opacity: 0.85; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 24px; } /* ========================================================================== Responsive (tablet + mobile) ========================================================================== */ @media (max-width: 900px) { .about .container, .founders-grid, .team-grid { grid-template-columns: 1fr; } .service-grid, .testimonial-grid, .intro-strip { grid-template-columns: 1fr; } .intro-strip a { border-right: none; border-bottom: 1px solid #d8d8d8; } .footer-grid { grid-template-columns: 1fr; } .form-section form { grid-template-columns: 1fr; } } @media (max-width: 720px) { /* Collapse the desktop nav into a hamburger-triggered dropdown. The .open class is toggled by js/main.js when the button is clicked. */ .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-white); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 16px; display: none; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); } .main-nav.open { display: flex; } .main-nav a { width: 100%; padding: 12px 0; color: var(--color-black) !important; } .site-header:not(.solid) .main-nav { background: var(--color-navy); } .site-header:not(.solid) .main-nav a { color: var(--color-white) !important; } .menu-toggle { display: flex; } /* Hide the header "Get A Quote" button on mobile — the logo + button + hamburger were too cramped side by side at this width. */ .nav-cta { display: none; } .hero-overlay { margin-left: 0; max-width: 100%; padding: 40px 28px; } .hero-overlay h1 { font-size: 1.9rem; } .about, .services, .testimonials, .founders, .team-section, .form-section { padding: 64px 0; } }