/* ============================================================ HOMEPAGE — front-page.php styles Append these rules to the bottom of your existing style.css ============================================================ */ /* ── Google Fonts (add to if not already present) ── @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap'); */ /* ── Homepage CSS Variables (extend your existing :root) ──── */ :root { --hp-green-dark: #2F4F3A; --hp-green-deep: #1E3329; --hp-gold: #C8A24A; --hp-gold-hover: #A8832A; --hp-gold-light: #FBF5E6; --hp-cream: #F7F1E3; --hp-page-bg: #F5F0E8; --hp-card-bg: #FDFAF5; --hp-charcoal: #2B2B2B; --hp-text-muted: #5A5248; --hp-text-light: #8A8070; --hp-border: #DDD8CC; --hp-border-light: #EDE8DC; } /* ═══════════════════════════════════════ HERO ═══════════════════════════════════════ */ .hp-hero { background: var(--hp-green-deep); padding: 52px 24px 46px; text-align: center; position: relative; overflow: hidden; } .hp-hero__pattern { position: absolute; inset: 0; opacity: 0.035; background-image: radial-gradient(circle, #F7F1E3 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } .hp-hero__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } .hp-hero__kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; background: rgba(200, 162, 74, 0.15); border: 1px solid rgba(200, 162, 74, 0.38); border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--hp-gold); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 20px; } .hp-hero__title { font-family: 'Playfair Display', Georgia, serif; font-size: 38px; font-weight: 800; color: var(--hp-cream); line-height: 1.15; margin-bottom: 12px; letter-spacing: -0.5px; } .hp-hero__title em { color: var(--hp-gold); font-style: normal; } .hp-hero__sub { font-size: 15px; color: rgba(247, 241, 227, 0.62); margin-bottom: 30px; line-height: 1.65; } .hp-hero__search { display: flex; background: var(--hp-cream); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3); max-width: 580px; margin: 0 auto 22px; } .hp-hero__search-input { flex: 1; border: none; outline: none; padding: 14px 18px; font-size: 15px; color: var(--hp-charcoal); background: transparent; font-family: 'Source Sans 3', sans-serif; } .hp-hero__search-input::placeholder { color: #9A9080; } .hp-hero__search-btn { background: var(--hp-gold); color: var(--hp-charcoal); border: none; padding: 14px 26px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: 'Source Sans 3', sans-serif; white-space: nowrap; transition: background var(--transition-fast, 150ms ease); } .hp-hero__search-btn:hover { background: var(--hp-gold-hover); color: var(--hp-cream); } .hp-hero__stats { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .hp-hero__stat { font-size: 12px; color: rgba(247, 241, 227, 0.5); } .hp-hero__stat strong { color: var(--hp-cream); font-weight: 700; } .hp-hero__stat-sep { width: 3px; height: 3px; background: rgba(200, 162, 74, 0.4); border-radius: 50%; } .hp-hero__seo { font-size: 12px; color: rgba(247, 241, 227, 0.35); font-style: italic; line-height: 1.5; } /* ═══════════════════════════════════════ TRUST BAR ═══════════════════════════════════════ */ .hp-trust { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; background: #E8EDE9; border-top: 1px solid #C8D4CC; border-bottom: 1px solid #C8D4CC; padding: 13px 24px; } .hp-trust__item { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hp-green-dark); } /* ═══════════════════════════════════════ SECTION SHARED ═══════════════════════════════════════ */ .hp-section, .hp-states-section, .hp-how-section { padding: 28px 24px; } .hp-featured-section { background: var(--hp-card-bg); border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); padding: 28px 24px; } .hp-section__hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .hp-section__title { font-family: 'Playfair Display', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--hp-green-deep); letter-spacing: -0.2px; } .hp-section__link { font-size: 12px; font-weight: 600; color: var(--hp-gold); text-decoration: none; transition: color var(--transition-fast, 150ms ease); } .hp-section__link:hover { color: var(--hp-gold-hover); text-decoration: underline; } /* ═══════════════════════════════════════ ACTIVITY GRID ═══════════════════════════════════════ */ .hp-activity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .hp-activity-card { background: var(--hp-card-bg); border: 1px solid var(--hp-border); border-radius: 10px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all 200ms ease; text-decoration: none; display: block; } .hp-activity-card:hover { border-color: var(--hp-gold); box-shadow: 0 4px 16px rgba(200, 162, 74, 0.2); transform: translateY(-2px); } .hp-activity-card:hover .hp-activity-card__label { color: var(--hp-gold); } .hp-activity-card__icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; } .hp-activity-card__label { font-size: 12px; font-weight: 700; color: var(--hp-charcoal); margin-bottom: 3px; transition: color 150ms ease; } .hp-activity-card__count { font-size: 10.5px; color: var(--hp-text-light); } /* ═══════════════════════════════════════ STATE CARDS ═══════════════════════════════════════ */ .hp-states-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .hp-state-card { background: var(--hp-card-bg); border: 1px solid var(--hp-border); border-radius: 8px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 150ms ease; text-decoration: none; display: block; } .hp-state-card:hover { border-color: var(--hp-gold); background: var(--hp-gold-light); } .hp-state-card:hover .hp-state-card__name { color: var(--hp-gold); } .hp-state-card__abbr { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--hp-green-dark); margin-bottom: 2px; } .hp-state-card__name { font-size: 10px; color: var(--hp-text-muted); font-weight: 500; transition: color 150ms ease; } .hp-state-card__count { font-size: 9.5px; color: var(--hp-text-light); margin-top: 2px; } /* ═══════════════════════════════════════ FEATURED LISTINGS ═══════════════════════════════════════ */ .hp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .hp-feat-card { border: 1px solid var(--hp-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 200ms ease; background: #fff; } .hp-feat-card:hover { box-shadow: 0 6px 24px rgba(47, 79, 58, 0.14); transform: translateY(-2px); border-color: var(--hp-gold); } .hp-feat-card__img { height: 120px; position: relative; background: linear-gradient(150deg, #C8D8CA, #9AB8A0); } .hp-feat-card__badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 100px; font-size: 10px; font-weight: 700; background: var(--hp-gold); color: var(--hp-charcoal); } .hp-feat-card__body { padding: 14px; } .hp-feat-card__name { font-family: 'Playfair Display', Georgia, serif; font-size: 13.5px; font-weight: 700; color: var(--hp-green-dark); margin-bottom: 4px; line-height: 1.3; } .hp-feat-card__loc { font-size: 11px; color: var(--hp-text-light); display: flex; align-items: center; gap: 4px; margin-bottom: 9px; } .hp-feat-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; } .hp-feat-card__tag { padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; background: #EEF2EC; color: var(--hp-green-dark); border: 1px solid #C8D8C0; } .hp-feat-card__cta { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--hp-border-light); } .hp-feat-card__link { font-size: 11.5px; font-weight: 600; color: var(--hp-gold); text-decoration: none; } .hp-feat-card__link:hover { color: var(--hp-gold-hover); } .hp-feat-card__book { padding: 5px 12px; background: var(--hp-green-dark); color: var(--hp-cream); border-radius: 5px; font-size: 11px; font-weight: 600; text-decoration: none; transition: background 150ms ease; } .hp-feat-card__book:hover { background: var(--hp-green-deep); color: var(--hp-cream); } /* ═══════════════════════════════════════ HOW IT WORKS ═══════════════════════════════════════ */ .hp-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; position: relative; } /* Connector between cards */ .hp-how-grid .hp-how-card:not(:last-child)::after { content: ''; position: absolute; right: -8px; top: 30px; width: 16px; height: 2px; background: var(--hp-border); z-index: 1; } .hp-how-card { background: var(--hp-card-bg); border: 1px solid var(--hp-border); border-radius: 10px; padding: 20px 16px; position: relative; } .hp-how-card__num { width: 30px; height: 30px; border-radius: 8px; background: var(--hp-green-dark); color: var(--hp-cream); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-family: 'Playfair Display', Georgia, serif; } .hp-how-card__title { font-size: 13.5px; font-weight: 700; color: var(--hp-green-deep); margin-bottom: 6px; } .hp-how-card__desc { font-size: 12px; color: var(--hp-text-muted); line-height: 1.65; } /* ═══════════════════════════════════════ CTA BAND ═══════════════════════════════════════ */ .hp-cta-band { background: var(--hp-green-dark); padding: 36px 24px; text-align: center; } .hp-cta-band__eye { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(200, 162, 74, 0.6); margin-bottom: 8px; } .hp-cta-band__title { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; font-weight: 800; color: var(--hp-cream); margin-bottom: 6px; letter-spacing: -0.3px; } .hp-cta-band__sub { font-size: 13px; color: rgba(247, 241, 227, 0.5); margin-bottom: 24px; } .hp-cta-band__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .hp-cta-band__btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; background: var(--hp-gold); color: var(--hp-charcoal); border-radius: 7px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 150ms ease; } .hp-cta-band__btn-primary:hover { background: var(--hp-gold-hover); color: var(--hp-cream); } .hp-cta-band__btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; background: rgba(247, 241, 227, 0.08); color: var(--hp-cream); border-radius: 7px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1.5px solid rgba(200, 162, 74, 0.3); transition: background 150ms ease; } .hp-cta-band__btn-ghost:hover { background: rgba(247, 241, 227, 0.15); } /* ═══════════════════════════════════════ RESPONSIVE — 768px ═══════════════════════════════════════ */ @media (max-width: 768px) { .hp-hero { padding: 36px 16px 32px; } .hp-hero__title { font-size: 28px; } .hp-hero__search { flex-direction: column; border-radius: 10px; } .hp-hero__search-btn { padding: 12px; border-radius: 0 0 10px 10px; } .hp-trust { gap: 14px; flex-direction: column; align-items: flex-start; padding: 12px 16px; } .hp-activity-grid { grid-template-columns: repeat(2, 1fr); } .hp-states-grid { grid-template-columns: repeat(2, 1fr); } .hp-feat-grid { grid-template-columns: 1fr; } .hp-how-grid { grid-template-columns: 1fr; } .hp-how-grid .hp-how-card:not(:last-child)::after { display: none; } .hp-section, .hp-states-section, .hp-how-section, .hp-featured-section { padding: 20px 16px; } .hp-cta-band { padding: 28px 16px; } .hp-cta-band__btns { flex-direction: column; align-items: center; } .hp-cta-band__btn-primary, .hp-cta-band__btn-ghost { width: 100%; justify-content: center; } } @media (max-width: 480px) { .hp-hero__stats { gap: 10px; } .hp-activity-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ═══════════════════════════════════════ CONTAINER MAX-WIDTH FIX ═══════════════════════════════════════ */ .hp-section, .hp-states-section, .hp-how-section, .hp-why-section, .hp-faq-section, .hp-guides-section, .hp-featured-section, .hp-testimonials-section, .hp-cta-band { width: 100%; box-sizing: border-box; } .hp-section > .hp-section__hdr, .hp-section > .hp-activity-grid, .hp-states-section > *, .hp-how-section > *, .hp-why-section > *, .hp-faq-section > *, .hp-guides-section > *, .hp-featured-section > *, .hp-testimonials-section > *, .hp-cta-band > * { max-width: 1240px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; padding-left: 24px; padding-right: 24px; } .hp-activity-grid, .hp-states-grid, .hp-how-grid, .hp-why-grid, .hp-feat-grid, .hp-testimonials-grid, .hp-guides-grid { max-width: 1240px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; padding-left: 24px; padding-right: 24px; } /* ═══ GLOBAL WIDTH CONSTRAINT ═══ */ .hp-section, .hp-states-section, .hp-how-section, .hp-why-section, .hp-faq-section, .hp-guides-section, .hp-featured-section, .hp-testimonials-section { padding: 28px 0; } .hp-section__hdr, .hp-activity-grid, .hp-states-grid, .hp-how-grid, .hp-why-grid, .hp-feat-grid, .hp-testimonials-grid, .hp-guides-grid, .hp-faq-list, .hp-section__sub, .hp-section__title, .hp-cta-band__eye, .hp-cta-band__title, .hp-cta-band__sub, .hp-cta-band__btns { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* ═══ PAGE WRAP — constrain all sections ═══ */ .hp-page-wrap { width: 100%; overflow-x: hidden; } .hp-page-wrap .hp-section, .hp-page-wrap .hp-states-section, .hp-page-wrap .hp-how-section, .hp-page-wrap .hp-why-section, .hp-page-wrap .hp-faq-section, .hp-page-wrap .hp-guides-section, .hp-page-wrap .hp-featured-section, .hp-page-wrap .hp-testimonials-section { width: 100%; max-width: 100%; padding-left: calc((100% - 1240px) / 2 + 24px); padding-right: calc((100% - 1240px) / 2 + 24px); box-sizing: border-box; } @media (max-width: 1288px) { .hp-page-wrap .hp-section, .hp-page-wrap .hp-states-section, .hp-page-wrap .hp-how-section, .hp-page-wrap .hp-why-section, .hp-page-wrap .hp-faq-section, .hp-page-wrap .hp-guides-section, .hp-page-wrap .hp-featured-section, .hp-page-wrap .hp-testimonials-section { padding-left: 24px; padding-right: 24px; } }