/* ================================================================ HOME PAGE NEW — MASTER CSS File: public/css/home-page-new.css Prefix: hpn- (Home Page New) Applies to all files in: resources/views/components/home_page/ Zero-collision guarantee: hpn- is not used anywhere else in this project. Safe alongside all existing stylesheets. Google Fonts required (add to layout or each partial): Outfit 400/500/600/700/800 Fraunces 700/800 (display / hero headlines) ================================================================ TABLE OF CONTENTS ----------------- 1. CSS CUSTOM PROPERTIES (Design tokens — edit here to retheme) 2. LAYOUT THEMES (Commented-out alternatives to swap) 3. RESET / BASE 4. HEADER / NAV 5. HERO BANNER 6. SECTION CARDS (Section 1 & 2) 7. PROMOTIONS CAROUSEL 8. GUEST MESSAGE MODAL 9. FOOTER 10. ANIMATIONS 11. RESPONSIVE ================================================================ */ /* ================================================================ 1. CSS CUSTOM PROPERTIES Edit ONLY this block to retheme the entire home page. ================================================================ */ :root { /* ── ACTIVE THEME: "Musreach Blue & White" ─────────────── Clean white header with Musreach brand blue (#0000cc) as the primary accent on all buttons, badges, and links. Promotions section uses a light blue-tinted white bg so cards pop on a neutral surface. Banner text is centred for a bold, editorial look. ─────────────────────────────────────────────────────── */ /* Core brand colours — Musreach logo blue */ --hpn-navy: #ffffff; /* header background — WHITE */ --hpn-navy-mid: #f0f4ff; /* mobile menu bg — very light blue tint */ --hpn-navy-light: #dce8ff; /* hover states, dividers */ --hpn-gold: #0033cc; /* PRIMARY ACCENT — Musreach blue */ --hpn-gold-dark: #0022aa; /* blue hover / darker shade */ --hpn-gold-glow: rgba(0,51,204,0.14); /* Page & section backgrounds */ --hpn-bg-page: #f8fafc; /* light sections background */ --hpn-bg-alt: #f1f5f9; /* alternating section bg */ --hpn-bg-white: #ffffff; /* Promotions section background — Musreach blue NOTE: to revert to light bg change back to #eef3ff Cards use white so they pop clearly against the blue */ --hpn-promo-bg: #0033cc; /* Musreach blue — NOTE change to #eef3ff to revert */ /* Text */ --hpn-text-hero: #ffffff; --hpn-text-dark: #0d1b2a; --hpn-text-body: #374151; --hpn-text-muted: #6b7280; --hpn-text-faint: #9ca3af; /* Header-specific text (on white bg, must be dark) */ --hpn-nav-text: #1e293b; --hpn-nav-text-muted: #475569; --hpn-nav-border: #e2e8f0; /* subtle bottom border on white header */ /* Borders */ --hpn-border: #e5e7eb; --hpn-border-dark: rgba(0,0,0,0.08); /* Typography */ --hpn-font-display: 'Fraunces', Georgia, serif; --hpn-font-body: 'Outfit', system-ui, sans-serif; /* Radii */ --hpn-radius-sm: 8px; --hpn-radius-md: 14px; --hpn-radius-lg: 20px; --hpn-radius-xl: 28px; --hpn-radius-full: 9999px; /* Shadows */ --hpn-shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --hpn-shadow-md: 0 8px 24px rgba(0,0,0,0.10); --hpn-shadow-lg: 0 20px 48px rgba(0,0,0,0.14); --hpn-shadow-gold: 0 8px 28px rgba(0,51,204,0.25); /* blue glow */ /* Transitions */ --hpn-ease: cubic-bezier(.22,1,.36,1); --hpn-duration: 0.35s; /* Layout */ --hpn-max-width: 1280px; --hpn-nav-height: 72px; } /* ── ALTERNATIVE THEME: "Arctic White" ─────────────────── Uncomment the block below to switch to a clean all-white theme with deep teal accents. :root { --hpn-navy: #f8fafc; --hpn-navy-mid: #ffffff; --hpn-navy-light: #e0f2f1; --hpn-gold: #0d9488; --hpn-gold-dark: #0f766e; --hpn-gold-glow: rgba(13,148,136,0.18); --hpn-bg-page: #f8fafc; --hpn-bg-alt: #f0fdfa; --hpn-text-hero: #0d1b2a; --hpn-text-dark: #0d1b2a; --hpn-shadow-gold: 0 8px 28px rgba(13,148,136,0.25); } ──────────────────────────────────────────────────────── ── ALTERNATIVE THEME: "Midnight Purple" ──────────────── Uncomment the block below for a bold purple/violet theme. :root { --hpn-navy: #13002e; --hpn-navy-mid: #1e0050; --hpn-navy-light: #3b0080; --hpn-gold: #a78bfa; --hpn-gold-dark: #7c3aed; --hpn-gold-glow: rgba(167,139,250,0.22); --hpn-bg-page: #faf5ff; --hpn-bg-alt: #f3e8ff; --hpn-text-hero: #ffffff; --hpn-text-dark: #13002e; --hpn-shadow-gold: 0 8px 28px rgba(167,139,250,0.30); } ──────────────────────────────────────────────────────── */ /* ================================================================ 2. RESET / BASE ================================================================ */ .hpn-page *, .hpn-page *::before, .hpn-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .hpn-page { font-family: var(--hpn-font-body); font-size: 16px; line-height: 1.6; color: var(--hpn-text-body); background: var(--hpn-bg-page); overflow-x: hidden; /* prevent horizontal scroll from any child */ width: 100%; } .hpn-page img { display: block; max-width: 100%; } .hpn-page a { text-decoration: none; color: inherit; } /* Max-width container helper */ .hpn-container { max-width: var(--hpn-max-width); margin: 0 auto; padding: 0 24px; } /* ================================================================ 3. HEADER / NAVIGATION Fixed top navbar with logo, desktop nav, mobile hamburger. ================================================================ */ .hpn-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--hpn-nav-height); background: #ffffff; /* WHITE header */ border-bottom: 1px solid var(--hpn-nav-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow var(--hpn-duration) var(--hpn-ease); } /* Scrolled state — slightly elevated */ .hpn-header.hpn-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,0.10); } .hpn-header__inner { max-width: var(--hpn-max-width); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* ── Logo ── */ .hpn-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .hpn-logo__img { height: 40px; width: auto; object-fit: contain; } .hpn-logo__text { font-family: var(--hpn-font-display); font-size: 22px; font-weight: 800; color: var(--hpn-gold); /* brand blue on white bg */ letter-spacing: -0.3px; } /* ── Desktop Nav ── */ .hpn-nav { display: flex; align-items: center; gap: 4px; } .hpn-nav__link { font-family: var(--hpn-font-body); font-size: 14px; font-weight: 500; color: var(--hpn-nav-text-muted); /* dark text on white header */ padding: 8px 12px; border-radius: var(--hpn-radius-sm); transition: color var(--hpn-duration), background var(--hpn-duration); white-space: nowrap; } .hpn-nav__link:hover { color: var(--hpn-gold); /* blue on hover */ background: var(--hpn-gold-glow); } /* Blue CTA button in nav */ .hpn-nav__link--cta { background: var(--hpn-gold); color: #ffffff !important; /* white text on blue button */ font-weight: 700; padding: 9px 18px; border-radius: var(--hpn-radius-full); transition: background var(--hpn-duration), transform var(--hpn-duration), box-shadow var(--hpn-duration); } .hpn-nav__link--cta:hover { background: var(--hpn-gold-dark); transform: translateY(-1px); box-shadow: var(--hpn-shadow-gold); } /* Authenticated user badge */ .hpn-nav__user { font-size: 13px; color: var(--hpn-nav-text-muted); padding: 0 8px; } .hpn-nav__user a { color: var(--hpn-gold); font-weight: 600; } /* Logout button */ .hpn-nav__logout { font-family: var(--hpn-font-body); font-size: 14px; font-weight: 700; color: #ffffff; background: var(--hpn-gold); border: none; padding: 9px 18px; border-radius: var(--hpn-radius-full); cursor: pointer; transition: background var(--hpn-duration), transform var(--hpn-duration); white-space: nowrap; } .hpn-nav__logout:hover { background: var(--hpn-gold-dark); transform: translateY(-1px); } /* ── Mobile hamburger toggle ── */ .hpn-hamburger { display: none; /* shown only on mobile */ flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .hpn-hamburger span { display: block; width: 22px; height: 2px; background: var(--hpn-nav-text); /* dark bars on white bg */ border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Open state — animates to × */ .hpn-hamburger.hpn-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hpn-hamburger.hpn-open span:nth-child(2) { opacity: 0; } .hpn-hamburger.hpn-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile dropdown menu ── */ .hpn-mobile-menu { display: none; position: fixed; top: var(--hpn-nav-height); left: 0; right: 0; background: #ffffff; /* white to match header */ border-bottom: 1px solid var(--hpn-nav-border); padding: 16px 24px 24px; z-index: 999; flex-direction: column; gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); } .hpn-mobile-menu.hpn-open { display: flex; } .hpn-mobile-menu .hpn-nav__link { padding: 12px 16px; font-size: 15px; border-radius: var(--hpn-radius-md); color: var(--hpn-nav-text-muted); /* dark text on white */ } .hpn-mobile-menu .hpn-nav__link:hover { color: var(--hpn-gold); background: var(--hpn-gold-glow); } .hpn-mobile-menu .hpn-nav__link--cta { margin-top: 8px; text-align: center; color: #ffffff !important; } .hpn-mobile-menu .hpn-nav__user { padding: 12px 16px 4px; font-size: 13px; color: var(--hpn-nav-text-muted); } /* ================================================================ 4. HERO BANNER Full-viewport height image slideshow with overlay text. ================================================================ */ /* Offset content below fixed header */ .hpn-hero-offset { height: var(--hpn-nav-height); } .hpn-hero { position: relative; width: 100%; /* ── HEIGHT OPTIONS — comment/uncomment ── Full viewport: height: 100vh; Tall: height: 85vh; Medium: height: 70vh; ← active Short: height: 55vh; ── */ height: 85vh; min-height: 500px; overflow: hidden; background: var(--hpn-navy); } /* Individual slide */ .hpn-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hpn-hero__slide.hpn-active { opacity: 1; } .hpn-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dark gradient overlay so text is always readable */ .hpn-hero__overlay { position: absolute; inset: 0; /* ── OVERLAY OPTIONS — comment/uncomment ── Dark uniform: background: rgba(0,0,0,0.55); Navy gradient: background: linear-gradient(135deg, rgba(13,27,42,0.85) 0%, rgba(13,27,42,0.40) 100%); Bottom fade: background: linear-gradient(to top, rgba(13,27,42,0.90) 0%, rgba(0,0,0,0.20) 60%); ── */ background: linear-gradient( 135deg, rgba(13,27,42,0.88) 0%, rgba(13,27,42,0.50) 60%, rgba(13,27,42,0.30) 100% ); } /* Centred text content on top of overlay */ .hpn-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; /* CENTRE horizontally */ justify-content: center; text-align: center; /* CENTRE text */ padding: 0 8vw; max-width: 100%; } .hpn-hero__label { display: inline-flex; align-items: center; gap: 0; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.92); /* clean white text — no colour clash */ font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; padding: 5px 16px; border-radius: var(--hpn-radius-full); margin-bottom: 20px; backdrop-filter: blur(4px); animation: hpnFadeUp 0.6s 0.1s var(--hpn-ease) both; } .hpn-hero__title { font-family: var(--hpn-font-display); /* ── FONT SIZE OPTIONS ── Huge: clamp(42px, 7vw, 80px) Large: clamp(36px, 5.5vw, 64px) ← active Medium: clamp(28px, 4vw, 48px) ── */ font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; color: var(--hpn-text-hero); line-height: 1.10; letter-spacing: -1px; margin-bottom: 20px; animation: hpnFadeUp 0.6s 0.2s var(--hpn-ease) both; } /* Gold accent word inside title — wrap a word in */ .hpn-hero__accent { color: var(--hpn-gold); font-style: normal; } .hpn-hero__subtitle { font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,0.78); line-height: 1.65; max-width: 600px; margin-bottom: 36px; text-align: center; animation: hpnFadeUp 0.6s 0.3s var(--hpn-ease) both; } .hpn-hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; /* centre the buttons */ animation: hpnFadeUp 0.6s 0.4s var(--hpn-ease) both; } /* Primary CTA — matches nav "Get Started" button exactly solid blue bg, white text, no separate border, darkens on hover */ .hpn-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--hpn-gold); color: #ffffff !important; /* white — matches nav CTA */ font-family: var(--hpn-font-body); font-size: 15px; font-weight: 700; border-radius: var(--hpn-radius-full); border: none; /* no border — matches nav CTA */ cursor: pointer; transition: background var(--hpn-duration), transform var(--hpn-duration), box-shadow var(--hpn-duration); text-decoration: none; } .hpn-btn-primary:hover { background: var(--hpn-gold-dark); color: #ffffff !important; transform: translateY(-2px); box-shadow: var(--hpn-shadow-gold); } /* Secondary / outline button — transparent with white border on dark overlay */ .hpn-btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; background: transparent; color: #fff; font-family: var(--hpn-font-body); font-size: 15px; font-weight: 600; border: 2px solid rgba(255,255,255,0.65); border-radius: var(--hpn-radius-full); cursor: pointer; transition: border-color var(--hpn-duration), background var(--hpn-duration), transform var(--hpn-duration); text-decoration: none; } .hpn-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.15); transform: translateY(-2px); color: #fff; } /* Slide controls */ .hpn-hero__controls { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; } .hpn-hero__dot { width: 8px; height: 8px; border-radius: var(--hpn-radius-full); background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: background var(--hpn-duration), width var(--hpn-duration); padding: 0; } .hpn-hero__dot.hpn-active { background: var(--hpn-gold); width: 24px; } /* Previous / Next arrow buttons */ .hpn-hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: var(--hpn-radius-full); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.20); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--hpn-duration), transform var(--hpn-duration); z-index: 10; backdrop-filter: blur(4px); } .hpn-hero__arrow:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); } .hpn-hero__arrow--prev { left: 24px; } .hpn-hero__arrow--next { right: 24px; } /* ================================================================ 5. CONTENT SECTIONS (Section 1 & 2 cards) Alternating two-column image + text layout. ================================================================ */ .hpn-section { padding: 96px 24px; } /* Section with white background */ .hpn-section--light { background: var(--hpn-bg-white); } /* Section with off-white / subtle tint background */ .hpn-section--alt { background: var(--hpn-bg-alt); } /* Section with dark navy background (for contrast) */ .hpn-section--dark { background: var(--hpn-navy); } .hpn-section__inner { max-width: var(--hpn-max-width); margin: 0 auto; display: grid; /* ── LAYOUT OPTIONS — comment/uncomment ── Equal columns: grid-template-columns: 1fr 1fr; Text wider: grid-template-columns: 3fr 2fr; ← active Image wider: grid-template-columns: 2fr 3fr; ── */ grid-template-columns: 3fr 2fr; gap: 72px; align-items: center; } /* Reverse — image on left, text on right */ .hpn-section__inner--reverse { direction: rtl; } .hpn-section__inner--reverse > * { direction: ltr; } /* Text block */ .hpn-section__text {} .hpn-section__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--hpn-gold-dark); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; } /* Decorative line after eyebrow */ .hpn-section__eyebrow::after { content: ''; display: block; width: 32px; height: 2px; background: var(--hpn-gold); border-radius: 1px; } .hpn-section__title { font-family: var(--hpn-font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 800; color: var(--hpn-text-dark); line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px; } /* Dark section — title is white */ .hpn-section--dark .hpn-section__title { color: #fff; } .hpn-section__body { font-size: 16px; color: var(--hpn-text-body); line-height: 1.8; margin-bottom: 32px; } .hpn-section--dark .hpn-section__body { color: rgba(255,255,255,0.72); } .hpn-section__btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* Section buttons — same style as nav "Get Started" CTA. NOTE: To revert to white-default swap background/#ffffff and color values */ .hpn-section__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: var(--hpn-gold); color: #ffffff !important; /* force white — stops dark inherited text */ font-family: var(--hpn-font-body); font-size: 14px; font-weight: 700; border-radius: var(--hpn-radius-full); border: none; /* no border — matches nav CTA style */ transition: background var(--hpn-duration), transform var(--hpn-duration), box-shadow var(--hpn-duration); text-decoration: none; } .hpn-section__btn:hover { background: var(--hpn-gold-dark); color: #ffffff !important; transform: translateY(-2px); box-shadow: var(--hpn-shadow-gold); } .hpn-section__btn--outline { background: transparent; color: var(--hpn-gold); border: 2px solid var(--hpn-gold); } .hpn-section__btn--outline:hover { border-color: var(--hpn-gold-dark); color: var(--hpn-gold-dark); background: var(--hpn-gold-glow); } /* Image block */ .hpn-section__img-wrap { position: relative; } .hpn-section__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--hpn-radius-xl); box-shadow: var(--hpn-shadow-lg); transition: transform 0.5s var(--hpn-ease); } .hpn-section__img:hover { transform: scale(1.02); } /* Decorative blue corner accent on image */ .hpn-section__img-wrap::before { content: ''; position: absolute; bottom: -14px; right: -14px; width: 80px; height: 80px; border-radius: var(--hpn-radius-md); background: var(--hpn-gold); opacity: 0.15; z-index: -1; } /* ================================================================ 6. PROMOTIONS CAROUSEL Light blue-tinted background (NOT dark navy). White cards with blue badge accents. Gallery hover: card lifts with dark shadow overlay effect. ================================================================ */ /* ────────────────────────────────────────────────────────────── PROMOTIONS BACKGROUND — EASY COLOUR SWAP Change ONLY --hpn-promo-bg in the :root block at the top. Current options (copy the value you want into :root above): Musreach blue → #0033cc ← ACTIVE Light blue tint → #eef3ff (swap in to revert to light bg) Pure white → #ffffff Dark navy → #0d1b2a When using dark/blue bg: title & subtitle stay white (current). When using light bg (#eef3ff/#ffffff): change these two: .hpn-promos__title color → var(--hpn-text-dark) .hpn-promos__subtitle color → var(--hpn-text-muted) ────────────────────────────────────────────────────────────── */ .hpn-promos { padding: 48px 0; /* even top/bottom — was 80px, now balanced */ background: var(--hpn-promo-bg); overflow: hidden; } .hpn-promos__header { text-align: center; max-width: var(--hpn-max-width); margin: 0 auto 32px; /* tightened from 48px */ padding: 0 24px; } .hpn-promos__title { font-family: var(--hpn-font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: #ffffff; /* white on blue background */ letter-spacing: -0.5px; margin-bottom: 12px; } .hpn-promos__subtitle { font-size: 16px; color: rgba(255,255,255,0.75); /* soft white on blue */ line-height: 1.6; } /* The scrolling track wrapper */ .hpn-promos__track-wrap { position: relative; width: 100%; overflow: hidden; /* Fade edges using the light bg colour */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } /* Inner track that scrolls left */ .hpn-promos__track { display: flex; gap: 24px; width: fit-content; animation: hpnScroll 36s linear infinite; } /* Pause on hover */ .hpn-promos__track:hover { animation-play-state: paused; } /* Individual promo card — WHITE on light bg */ .hpn-promo-card { flex: 0 0 300px; background: #ffffff; /* white card */ border: 1px solid var(--hpn-border); border-radius: var(--hpn-radius-lg); overflow: hidden; transition: transform var(--hpn-duration), box-shadow var(--hpn-duration); cursor: pointer; position: relative; } /* Gallery hover effect — card lifts and gets a dark shadow overlay giving it a "selected from gallery" feel */ .hpn-promo-card::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); /* invisible by default */ border-radius: var(--hpn-radius-lg); transition: background var(--hpn-duration); pointer-events: none; } .hpn-promo-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(0,51,204,0.12); } .hpn-promo-card:hover::after { background: rgba(0,0,0,0.04); /* very subtle darkening = gallery focus */ } .hpn-promo-card__img { width: 100%; height: 180px; object-fit: cover; } .hpn-promo-card__body { padding: 18px 20px; } .hpn-promo-card__badge { display: inline-block; background: var(--hpn-gold-glow); border: 1px solid rgba(0,51,204,0.20); color: var(--hpn-gold); /* blue badge on white card */ font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 10px; border-radius: var(--hpn-radius-full); margin-bottom: 10px; } .hpn-promo-card__title { font-family: var(--hpn-font-display); font-size: 16px; font-weight: 700; color: var(--hpn-text-dark); /* dark text on white card */ margin-bottom: 6px; line-height: 1.3; } .hpn-promo-card__desc { font-size: 13px; color: var(--hpn-text-muted); /* muted dark text */ line-height: 1.55; } /* ================================================================ 7. GUEST MESSAGE MODAL Full-screen dimmed overlay with centred form card. Clicking the backdrop closes the modal. ================================================================ */ /* The trigger button — matches nav "Get Started" CTA exactly */ .hpn-msg-trigger { display: inline-block; margin: 0 auto; padding: 14px 40px; background: var(--hpn-gold); color: #ffffff !important; font-family: var(--hpn-font-body); font-size: 15px; font-weight: 700; border: none; border-radius: var(--hpn-radius-full); cursor: pointer; letter-spacing: 0.3px; transition: background var(--hpn-duration), transform var(--hpn-duration), box-shadow var(--hpn-duration); white-space: nowrap; } .hpn-msg-trigger:hover { background: var(--hpn-gold-dark); color: #ffffff !important; box-shadow: var(--hpn-shadow-gold); transform: translateY(-2px); } /* Trigger section wrapper — overflow hidden prevents scrollbar bleed */ .hpn-msg-section { padding: 72px 24px; background: var(--hpn-bg-alt); text-align: center; overflow: hidden; /* prevent any child overflow bleed */ width: 100%; box-sizing: border-box; } .hpn-msg-section__title { font-family: var(--hpn-font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--hpn-text-dark); margin-bottom: 8px; } .hpn-msg-section__sub { font-size: 15px; color: var(--hpn-text-muted); margin-bottom: 32px; } /* ── Backdrop ── */ .hpn-modal-backdrop { display: none; /* JS toggles to flex */ position: fixed; inset: 0; z-index: 2000; background: rgba(13,27,42,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; animation: hpnBackdropIn 0.3s ease both; } .hpn-modal-backdrop.hpn-open { display: flex; } @keyframes hpnBackdropIn { from { opacity: 0; } to { opacity: 1; } } /* ── Modal Card ── */ .hpn-modal { background: #fff; border-radius: var(--hpn-radius-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,0.30); animation: hpnModalIn 0.4s var(--hpn-ease) both; position: relative; } @keyframes hpnModalIn { from { opacity: 0; transform: translateY(32px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Gold top accent bar */ .hpn-modal::before { content: ''; display: block; height: 4px; border-radius: var(--hpn-radius-xl) var(--hpn-radius-xl) 0 0; background: linear-gradient(90deg, var(--hpn-gold) 0%, var(--hpn-gold-dark) 100%); } .hpn-modal__header { padding: 24px 28px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .hpn-modal__title { font-family: var(--hpn-font-display); font-size: 22px; font-weight: 800; color: var(--hpn-text-dark); } .hpn-modal__close { width: 32px; height: 32px; border-radius: var(--hpn-radius-full); background: var(--hpn-bg-alt); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--hpn-text-muted); flex-shrink: 0; transition: background var(--hpn-duration), color var(--hpn-duration); font-size: 18px; line-height: 1; } .hpn-modal__close:hover { background: var(--hpn-border); color: var(--hpn-text-dark); } .hpn-modal__body { padding: 20px 28px 32px; } /* ── Form Fields inside modal ── */ .hpn-form-field { margin-bottom: 18px; } .hpn-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--hpn-text-body); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .hpn-form-input, .hpn-form-textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--hpn-border); border-radius: var(--hpn-radius-sm); font-family: var(--hpn-font-body); font-size: 15px; color: var(--hpn-text-dark); background: #fff; transition: border-color var(--hpn-duration), box-shadow var(--hpn-duration); box-sizing: border-box; } .hpn-form-input:focus, .hpn-form-textarea:focus { outline: none; border-color: var(--hpn-gold); box-shadow: 0 0 0 3px var(--hpn-gold-glow); } .hpn-form-textarea { resize: vertical; min-height: 100px; } .hpn-form-submit { width: 100%; padding: 14px; background: var(--hpn-gold); color: #ffffff !important; font-family: var(--hpn-font-display); font-size: 15px; font-weight: 700; border: none; border-radius: var(--hpn-radius-md); cursor: pointer; transition: background var(--hpn-duration), transform var(--hpn-duration), box-shadow var(--hpn-duration); margin-top: 8px; } .hpn-form-submit:hover { background: var(--hpn-gold-dark); color: #ffffff !important; transform: translateY(-1px); box-shadow: var(--hpn-shadow-gold); } /* ── Alert modals (error / success) ── */ .hpn-alert-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 2100; background: rgba(13,27,42,0.65); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; } .hpn-alert-modal-backdrop.hpn-open { display: flex; } .hpn-alert-modal { background: #fff; border-radius: var(--hpn-radius-lg); padding: 32px 28px; max-width: 400px; width: 100%; text-align: center; box-shadow: var(--hpn-shadow-lg); animation: hpnModalIn 0.35s var(--hpn-ease) both; } .hpn-alert-modal--success::before { content: '✓'; display: block; width: 52px; height: 52px; background: #ecfdf5; color: #10b981; font-size: 24px; line-height: 52px; border-radius: var(--hpn-radius-full); margin: 0 auto 16px; } .hpn-alert-modal--error::before { content: '!'; display: block; width: 52px; height: 52px; background: #fff1f2; color: #ef4444; font-size: 24px; font-weight: 800; line-height: 52px; border-radius: var(--hpn-radius-full); margin: 0 auto 16px; } .hpn-alert-modal__title { font-family: var(--hpn-font-display); font-size: 18px; font-weight: 800; color: var(--hpn-text-dark); margin-bottom: 8px; } .hpn-alert-modal__msg { font-size: 14px; color: var(--hpn-text-muted); line-height: 1.6; margin-bottom: 20px; } .hpn-alert-modal__close { padding: 10px 24px; background: var(--hpn-gold); color: var(--hpn-navy); font-family: var(--hpn-font-body); font-size: 14px; font-weight: 700; border: none; border-radius: var(--hpn-radius-full); cursor: pointer; transition: background var(--hpn-duration); } .hpn-alert-modal__close:hover { background: var(--hpn-gold-dark); } /* ================================================================ 8. FOOTER + OLD LAYOUT HEADER SUPPRESSION ================================================================ */ /* Ensure footer stacks correctly below page content */ .hpn-page .sft-footer, .hpn-page .schf-footer { margin-top: 0; } /* ── SUPPRESS OLD LAYOUT HEADER WHEN NEW HOME PAGE IS ACTIVE ── The layout.blade.php loads header.css globally. When .hpn-page is present, we hide any element that gets the old header styles. This targets the most common old header class names used in the subscription app layout. Add any others you see if needed. ── */ .hpn-page ~ .footer, body:has(.hpn-page) .header, body:has(.hpn-page) .nav-header, body:has(.hpn-page) .site-header, body:has(.hpn-page) .top-bar { display: none !important; } /* ── REMOVE THE content-body TOP PADDING when hpn-page is active ── layout.blade.php wraps content in
. The new design manages its own spacing, so we zero that out. ── */ body:has(.hpn-page) .content-body { margin: 0 !important; padding: 0 !important; } /* ================================================================ 9. ANIMATIONS ================================================================ */ /* Fade up — used by hero and section reveals */ @keyframes hpnFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Scrolling ticker for promotions */ @keyframes hpnScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Scroll-triggered reveal class (added by IntersectionObserver in JS) */ .hpn-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--hpn-ease), transform 0.65s var(--hpn-ease); } .hpn-reveal.hpn-visible { opacity: 1; transform: translateY(0); } /* ── EXCEPTION: section/promo headers are never hidden ── The promos header sits at the top of its section and may not trigger the IntersectionObserver threshold reliably. Force it visible so the title never appears "missing". */ .hpn-promos__header.hpn-reveal, .hpn-promos__header.hpn-reveal.hpn-visible { opacity: 1 !important; transform: none !important; } /* Stagger delays for child elements */ .hpn-reveal-delay-1 { transition-delay: 0.10s; } .hpn-reveal-delay-2 { transition-delay: 0.20s; } .hpn-reveal-delay-3 { transition-delay: 0.30s; } .hpn-reveal-delay-4 { transition-delay: 0.40s; } /* ── BUTTON TEXT COLOUR FIXES ────────────────────────────────── These rules remove the need for inline style= hacks on buttons. hpn-section__btn → always white text (solid blue bg) hpn-section__btn--outline → dark text by default on light bg Override these selectors to be maximally specific so no other stylesheet can override them without !important. ──────────────────────────────────────────────────────────── */ a.hpn-section__btn, a.hpn-section__btn:visited, a.hpn-section__btn:hover, a.hpn-section__btn:focus { color: #ffffff !important; } a.hpn-section__btn.hpn-section__btn--outline, a.hpn-section__btn.hpn-section__btn--outline:visited { color: var(--hpn-gold) !important; } a.hpn-section__btn.hpn-section__btn--outline:hover, a.hpn-section__btn.hpn-section__btn--outline:focus { color: var(--hpn-gold-dark) !important; } /* Hero primary button — always white text */ a.hpn-btn-primary, a.hpn-btn-primary:visited, a.hpn-btn-primary:hover, a.hpn-btn-primary:focus { color: #ffffff !important; } /* ================================================================ 10. RESPONSIVE ================================================================ */ /* Tablet ≤ 900px */ @media (max-width: 900px) { .hpn-nav { display: none; } .hpn-hamburger { display: flex; } .hpn-section__inner { grid-template-columns: 1fr; gap: 40px; } .hpn-section__inner--reverse { direction: ltr; } .hpn-section { padding: 64px 24px; } .hpn-hero { height: 70vh; } .hpn-hero__content { padding: 0 5vw; } } /* Mobile ≤ 560px */ @media (max-width: 560px) { .hpn-hero { height: 60vh; min-height: 400px; } .hpn-hero__cta-row { flex-direction: column; align-items: flex-start; } .hpn-hero__arrow { display: none; /* hide arrows on small screens, use dots only */ } .hpn-section { padding: 48px 16px; } .hpn-container { padding: 0 16px; } .hpn-modal { max-width: 100%; border-radius: var(--hpn-radius-lg); } .hpn-modal__header, .hpn-modal__body { padding-left: 20px; padding-right: 20px; } .hpn-promos__track { animation-duration: 24s; /* faster on small screens */ } .hpn-promo-card { flex: 0 0 240px; } } /* ================================================================ ── ADDITIONS BELOW THIS LINE ─────────────────────────────────── Added: promotions section enhancements, listing page styles, pricing page styles. All use separate prefixes to avoid collisions: lmv- = listing main view (replaces listing_main_view.css) prc- = pricing section (replaces pricing-section.css) ================================================================ */ /* ════════════════════════════════════════════════════════════════ PROMOTIONS SECTION ENHANCEMENTS Added to improve the visual quality of the blue promo section. These extend (not replace) the existing hpn-promos- rules above. ════════════════════════════════════════════════════════════════ */ /* Subtle wave/dot pattern overlay on the blue bg for depth */ .hpn-promos { position: relative; } .hpn-promos::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; z-index: 0; } .hpn-promos__header, .hpn-promos__track-wrap { position: relative; z-index: 1; /* sit above the dot pattern */ } /* Decorative horizontal divider line below the subtitle */ .hpn-promos__header::after { content: ''; display: block; width: 56px; height: 3px; background: rgba(255,255,255,0.45); border-radius: 2px; margin: 16px auto 0; } /* Card image overlay gradient — adds polish to varied images */ .hpn-promo-card { position: relative; } .hpn-promo-card__img-wrap { position: relative; overflow: hidden; } .hpn-promo-card__img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(255,255,255,0.08), transparent); pointer-events: none; } /* Card top-border accent — subtle blue line that brightens on hover */ .hpn-promo-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hpn-gold); opacity: 0; transition: opacity 0.25s ease; z-index: 2; } .hpn-promo-card:hover::before { opacity: 1; } /* ════════════════════════════════════════════════════════════════ LISTING PAGES — lmv- prefix Replaces listing_main_view.css with a modern card-grid design that matches the subscription app's blue brand identity. ════════════════════════════════════════════════════════════════ */ /* ── Page header ── */ .lmv-page-title { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: #0d1b2a; text-align: center; margin: 32px 0 24px; letter-spacing: -0.5px; } /* ── Search toggle button ── */ .lmv-search-toggle { display: block; margin: 0 auto 20px; padding: 10px 28px; background: #0033cc; color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; border: none; border-radius: 9999px; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease; } .lmv-search-toggle:hover { background: #0022aa; transform: translateY(-1px); } /* ── Search filter card ── */ .lmv-filter-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; max-width: 700px; margin: 0 auto 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.07); } .lmv-filter-card .form-control { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: 14px; padding: 10px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .lmv-filter-card .form-control:focus { border-color: #0033cc; box-shadow: 0 0 0 3px rgba(0,51,204,0.12); outline: none; } .lmv-filter-submit { padding: 10px 28px; background: #0033cc; color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; border: none; border-radius: 9999px; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease; } .lmv-filter-submit:hover { background: #0022aa; transform: translateY(-1px); } /* ── Listing card grid ── */ .lmv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: 0 0 48px; } /* ── Individual listing card ── */ .lmv-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .lmv-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); border-color: #0033cc; } .lmv-card__img { width: 100%; height: 180px; object-fit: cover; display: block; } .lmv-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .lmv-card__name { font-family: 'Outfit', system-ui, sans-serif; font-size: 17px; font-weight: 800; color: #0d1b2a; margin-bottom: 12px; text-align: center; } .lmv-card__meta { font-size: 13px; color: #6b7280; line-height: 1.7; flex: 1; margin-bottom: 16px; } .lmv-card__meta strong { color: #374151; font-weight: 600; } .lmv-card__btn { display: block; text-align: center; padding: 10px; background: #0033cc; color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; border-radius: 9999px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease; } .lmv-card__btn:hover { background: #0022aa; transform: translateY(-1px); color: #fff !important; } /* ── Empty state ── */ .lmv-empty { text-align: center; color: #10b981; font-size: 15px; padding: 40px 0; font-family: 'Outfit', system-ui, sans-serif; } /* ── Show (single listing) page ── */ .lmv-show { max-width: 780px; margin: 40px auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); overflow: hidden; } /* Blue top accent bar */ .lmv-show::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, #0033cc, #3366ff); } .lmv-show__header { padding: 28px 32px 0; text-align: center; } .lmv-show__title { font-family: 'Outfit', system-ui, sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #0d1b2a; margin-bottom: 20px; letter-spacing: -0.3px; } .lmv-show__img { width: 100%; max-height: 360px; object-fit: cover; display: block; } .lmv-show__body { padding: 28px 32px 32px; } .lmv-show__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; font-size: 15px; } .lmv-show__row:last-child { border-bottom: none; } .lmv-show__label { font-weight: 700; color: #0033cc; min-width: 90px; flex-shrink: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; } .lmv-show__value { color: #374151; line-height: 1.6; } .lmv-show__value a { color: #0033cc; font-weight: 600; text-decoration: none; } .lmv-show__value a:hover { text-decoration: underline; } .lmv-show__back { display: inline-block; margin: 24px auto 0; padding: 12px 32px; background: #0033cc; color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; border-radius: 9999px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease; } .lmv-show__back:hover { background: #0022aa; transform: translateY(-1px); color: #fff !important; } @media (max-width: 560px) { .lmv-show__body { padding: 20px; } .lmv-show__row { flex-direction: column; gap: 4px; } .lmv-show__label { min-width: unset; } } /* ════════════════════════════════════════════════════════════════ PRICING PAGE — prc- prefix Replaces pricing-section.css with a design matching the subscription app's blue brand identity. ════════════════════════════════════════════════════════════════ */ .prc-section { padding: 64px 24px 80px; background: #f8fafc; font-family: 'Outfit', system-ui, sans-serif; } .prc-page-title { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; color: #0d1b2a; text-align: center; letter-spacing: -0.5px; margin-bottom: 8px; } /* Decorative underline */ .prc-page-title::after { content: ''; display: block; width: 48px; height: 3px; background: #0033cc; border-radius: 2px; margin: 12px auto 0; } .prc-container { max-width: 1200px; margin: 0 auto; } /* App name block */ .prc-app-block { margin-bottom: 56px; } .prc-app-title { font-size: clamp(18px, 2.5vw, 24px); font-weight: 800; color: #0d1b2a; text-align: center; margin-bottom: 32px; position: relative; } .prc-app-title::after { content: ''; display: block; width: 40px; height: 2px; background: #0033cc; border-radius: 1px; margin: 10px auto 0; } /* Card grid */ .prc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } /* Individual pricing card */ .prc-card { background: #fff; border: 2px solid #e5e7eb; border-radius: 20px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; position: relative; overflow: hidden; } /* Blue top stripe */ .prc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0033cc, #3366ff); border-radius: 20px 20px 0 0; opacity: 0; transition: opacity 0.28s ease; } .prc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 48px rgba(0,51,204,0.15); border-color: #0033cc; } .prc-card:hover::before { opacity: 1; } /* Plan name */ .prc-plan { font-size: 13px; font-weight: 700; color: #0033cc; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; background: rgba(0,51,204,0.08); padding: 4px 14px; border-radius: 9999px; } /* Price */ .prc-price { font-size: clamp(36px, 5vw, 52px); font-weight: 800; color: #0d1b2a; letter-spacing: -1px; line-height: 1; margin-bottom: 4px; } .prc-price::before { content: '$'; font-size: 0.55em; vertical-align: super; font-weight: 700; color: #0033cc; } /* Duration badge */ .prc-duration { display: inline-block; font-size: 12px; font-weight: 600; color: #6b7280; background: #f3f4f6; padding: 3px 12px; border-radius: 9999px; margin-bottom: 20px; } /* Divider */ .prc-divider { width: 100%; height: 1px; background: #f3f4f6; margin-bottom: 20px; } /* Details text */ .prc-details { font-size: 14px; color: #6b7280; line-height: 1.7; margin-bottom: 28px; flex: 1; min-height: 48px; } /* CTA button */ .prc-btn { display: inline-block; width: 100%; padding: 13px 24px; background: #0033cc; color: #fff !important; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 700; border-radius: 9999px; text-decoration: none; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.2px; } .prc-btn:hover { background: #0022aa; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,51,204,0.28); color: #fff !important; } /* Empty state */ .prc-empty { text-align: center; color: #6b7280; font-size: 15px; padding: 48px 0; } @media (max-width: 560px) { .prc-section { padding: 40px 16px 56px; } .prc-grid { grid-template-columns: 1fr; gap: 16px; } .prc-card { padding: 24px 18px; } }