/** Shopify CDN: Minification failed Line 33:0 All "@import" rules must come first **/ /* ============================================ THE PRO PATH — DAWN THEME CUSTOM CSS Paste this into: Online Store > Themes > Customize > Edit Code > assets/custom.css (create the file if it doesn't exist) Then add: {{ 'custom.css' | asset_url | stylesheet_tag }} to the bottom of layout/theme.liquid ============================================ */ /* ---- BRAND TOKENS ---- */ :root { --pp-black: #0A0A0A; --pp-charcoal: #111111; --pp-dark: #1A1A1A; --pp-mid: #2C2C2C; --pp-gold: #C9A84C; --pp-gold-light: #E8C97A; --pp-white: #FFFFFF; --pp-off-white: #F5F4F1; --pp-gray: #888888; --pp-light-gray: #D4D4D4; --pp-font-display: 'Oswald', 'Arial Narrow', sans-serif; --pp-font-body: 'Georgia', 'Times New Roman', serif; --pp-font-sans: 'Helvetica Neue', Arial, sans-serif; } /* ---- GOOGLE FONTS IMPORT ---- */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap'); /* ---- GLOBAL RESETS ---- */ body { background-color: var(--pp-white); color: var(--pp-black); } /* ============================================ HEADER / NAV ============================================ */ .header { background-color: var(--pp-black) !important; border-bottom: 1px solid #222 !important; padding: 0 2rem !important; } .header__heading-link, .header__heading { color: var(--pp-white) !important; } .header__menu-item, .header__menu-item a, .list-menu__item a { color: var(--pp-light-gray) !important; font-family: var(--pp-font-sans) !important; font-size: 0.8rem !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; transition: color 0.2s ease !important; } .header__menu-item a:hover, .list-menu__item a:hover { color: var(--pp-gold) !important; } .header__icon svg, .header__icon path { stroke: var(--pp-white) !important; fill: var(--pp-white) !important; } /* Hide cart count if 0 */ .cart-count-bubble { background-color: var(--pp-gold) !important; color: var(--pp-black) !important; } /* Announcement bar */ .announcement-bar { background-color: var(--pp-gold) !important; color: var(--pp-black) !important; font-family: var(--pp-font-sans) !important; font-weight: 500 !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* ============================================ HERO SECTION — PREMIUM FULL-BLEED ============================================ */ .pp-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--pp-black); } .pp-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; filter: brightness(0.45); transform: scale(1.02); transition: transform 8s ease; } .pp-hero:hover .pp-hero__bg { transform: scale(1.0); } .pp-hero__gradient { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent 30%, rgba(10,10,10,0.5) 60%, rgba(10,10,10,0.95) 100% ); } .pp-hero__content { position: relative; z-index: 2; padding: 6rem 5vw 5rem; max-width: 900px; } .pp-hero__eyebrow { display: inline-block; font-family: var(--pp-font-sans) !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--pp-gold) !important; border: 1px solid var(--pp-gold); padding: 0.35rem 0.9rem; margin-bottom: 2rem; } .pp-hero__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2.8rem, 6vw, 5.5rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; color: var(--pp-white) !important; text-transform: uppercase !important; margin-bottom: 1.5rem !important; } .pp-hero__headline span { color: var(--pp-gold); } .pp-hero__subheadline { font-family: var(--pp-font-sans) !important; font-size: clamp(1rem, 1.8vw, 1.2rem) !important; font-weight: 300 !important; line-height: 1.65 !important; color: rgba(255,255,255,0.75) !important; max-width: 600px !important; margin-bottom: 2.5rem !important; } .pp-hero__cta-group { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .pp-btn-primary { display: inline-block; background-color: var(--pp-gold) !important; color: var(--pp-black) !important; font-family: var(--pp-font-sans) !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; text-decoration: none !important; padding: 1rem 2.5rem !important; border: 2px solid var(--pp-gold) !important; transition: all 0.25s ease !important; cursor: pointer; } .pp-btn-primary:hover { background-color: transparent !important; color: var(--pp-gold) !important; } .pp-btn-secondary { display: inline-block; background-color: transparent !important; color: var(--pp-white) !important; font-family: var(--pp-font-sans) !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; text-decoration: none !important; padding: 1rem 2.5rem !important; border: 1px solid rgba(255,255,255,0.4) !important; transition: all 0.25s ease !important; } .pp-btn-secondary:hover { border-color: var(--pp-white) !important; } /* ============================================ STATS BAR ============================================ */ .pp-stats-bar { background-color: var(--pp-gold); padding: 1.25rem 5vw; display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; } .pp-stat { text-align: center; } .pp-stat__number { display: block; font-family: var(--pp-font-display) !important; font-size: 1.8rem !important; font-weight: 700 !important; color: var(--pp-black) !important; letter-spacing: -0.02em; } .pp-stat__label { display: block; font-family: var(--pp-font-sans) !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(0,0,0,0.6) !important; } /* ============================================ SECTION: THE PROBLEM ============================================ */ .pp-problem { background-color: var(--pp-off-white); padding: 7rem 5vw; } .pp-section-label { font-family: var(--pp-font-sans) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--pp-gold) !important; margin-bottom: 1rem; display: block; } .pp-problem__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .pp-problem__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2rem, 4vw, 3.5rem) !important; font-weight: 700 !important; line-height: 1.1 !important; text-transform: uppercase !important; color: var(--pp-black) !important; margin-bottom: 1.5rem !important; } .pp-problem__body { font-family: var(--pp-font-sans) !important; font-size: 1.05rem !important; line-height: 1.75 !important; color: #444 !important; margin-bottom: 2rem !important; } .pp-told-list { list-style: none; padding: 0; margin: 0 0 2rem; border-left: 3px solid #DDD; padding-left: 1.5rem; } .pp-told-list li { font-family: var(--pp-font-sans) !important; font-size: 0.95rem !important; color: #666 !important; padding: 0.3rem 0; font-style: italic; } .pp-teaches-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .pp-teaches-list li { font-family: var(--pp-font-sans) !important; font-size: 0.9rem !important; font-weight: 500 !important; color: var(--pp-black) !important; display: flex; align-items: center; gap: 0.5rem; } .pp-teaches-list li::before { content: ''; display: inline-block; width: 8px; height: 8px; background-color: var(--pp-gold); flex-shrink: 0; } /* ============================================ SECTION: TIMELINE / JOURNEY ============================================ */ .pp-timeline { background-color: var(--pp-black); padding: 7rem 5vw; overflow: hidden; } .pp-timeline__header { text-align: center; margin-bottom: 4rem; } .pp-timeline__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-white) !important; letter-spacing: 0.02em !important; } .pp-timeline__track { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .pp-timeline__item { flex: 0 0 auto; width: 160px; text-align: center; position: relative; scroll-snap-align: start; } .pp-timeline__item::after { content: '→'; position: absolute; right: -12px; top: 28px; color: var(--pp-gold); font-size: 1.2rem; line-height: 1; } .pp-timeline__item:last-child::after { display: none; } .pp-timeline__dot { width: 56px; height: 56px; border: 2px solid var(--pp-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-family: var(--pp-font-display) !important; font-size: 0.7rem !important; font-weight: 700 !important; color: var(--pp-gold) !important; letter-spacing: 0.05em; text-transform: uppercase; } .pp-timeline__dot--highlight { background-color: var(--pp-gold); color: var(--pp-black) !important; } .pp-timeline__label { font-family: var(--pp-font-sans) !important; font-size: 0.78rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--pp-light-gray) !important; line-height: 1.3; } /* ============================================ SECTION: WHAT'S INSIDE ============================================ */ .pp-inside { padding: 7rem 5vw; background-color: var(--pp-white); } .pp-inside__header { margin-bottom: 4rem; } .pp-inside__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-black) !important; max-width: 500px; line-height: 1.1 !important; } .pp-inside__layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; } .pp-inside__image-wrap { position: sticky; top: 6rem; } .pp-inside__image-wrap img { width: 100%; display: block; filter: grayscale(20%); } .pp-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background-color: #E8E8E8; border: 1px solid #E8E8E8; } .pp-card { background-color: var(--pp-white); padding: 1.75rem 1.5rem; transition: background-color 0.2s ease; } .pp-card:hover { background-color: var(--pp-off-white); } .pp-card__number { font-family: var(--pp-font-display) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.15em !important; color: var(--pp-gold) !important; text-transform: uppercase !important; margin-bottom: 0.75rem; display: block; } .pp-card__title { font-family: var(--pp-font-sans) !important; font-size: 0.9rem !important; font-weight: 700 !important; color: var(--pp-black) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-bottom: 0.5rem !important; } .pp-card__desc { font-family: var(--pp-font-sans) !important; font-size: 0.82rem !important; line-height: 1.55 !important; color: var(--pp-gray) !important; } /* ============================================ SECTION: TESTIMONIALS ============================================ */ .pp-testimonials { background-color: var(--pp-off-white); padding: 7rem 5vw; } .pp-testimonials__header { text-align: center; margin-bottom: 3.5rem; } .pp-testimonials__headline { font-family: var(--pp-font-display) !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-black) !important; } .pp-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pp-testimonial { background-color: var(--pp-white); padding: 2.5rem 2rem; border-bottom: 3px solid var(--pp-gold); } .pp-testimonial__quote-mark { font-family: Georgia, serif; font-size: 4rem; line-height: 0.8; color: var(--pp-gold); display: block; margin-bottom: 1rem; } .pp-testimonial__text { font-family: var(--pp-font-body) !important; font-size: 0.95rem !important; line-height: 1.7 !important; color: #333 !important; font-style: italic !important; margin-bottom: 1.5rem !important; } .pp-testimonial__author { font-family: var(--pp-font-sans) !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--pp-black) !important; } .pp-testimonial__role { font-family: var(--pp-font-sans) !important; font-size: 0.75rem !important; color: var(--pp-gray) !important; margin-top: 0.2rem; } /* ============================================ SECTION: ABOUT LUCKY ============================================ */ .pp-about { padding: 7rem 5vw; background-color: var(--pp-white); } .pp-about__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .pp-about__image-wrap { position: relative; } .pp-about__image-wrap::before { content: ''; position: absolute; top: 1.5rem; left: 1.5rem; right: -1.5rem; bottom: -1.5rem; border: 1px solid var(--pp-gold); z-index: 0; } .pp-about__image-wrap img { position: relative; z-index: 1; width: 100%; display: block; } .pp-about__headline { font-family: var(--pp-font-display) !important; font-size: clamp(1.8rem, 3.5vw, 3rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-black) !important; line-height: 1.1 !important; margin-bottom: 0.5rem !important; } .pp-about__subheadline { font-family: var(--pp-font-sans) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--pp-gold) !important; margin-bottom: 1.5rem; } .pp-about__body { font-family: var(--pp-font-sans) !important; font-size: 1rem !important; line-height: 1.75 !important; color: #444 !important; margin-bottom: 1.5rem !important; } .pp-credentials { list-style: none; padding: 0; margin: 0 0 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .pp-credentials li { font-family: var(--pp-font-sans) !important; font-size: 0.85rem !important; font-weight: 500 !important; color: var(--pp-black) !important; display: flex; align-items: center; gap: 0.75rem; } .pp-credentials li::before { content: ''; width: 20px; height: 1px; background-color: var(--pp-gold); flex-shrink: 0; } /* ============================================ SECTION: PARENT TRUST ============================================ */ .pp-parent { background-color: var(--pp-charcoal); padding: 7rem 5vw; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .pp-parent__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-white) !important; line-height: 1.1 !important; margin-bottom: 1.5rem !important; } .pp-parent__body { font-family: var(--pp-font-sans) !important; font-size: 1rem !important; line-height: 1.75 !important; color: rgba(255,255,255,0.65) !important; margin-bottom: 2rem !important; } .pp-parent__points { list-style: none; padding: 0; margin: 0 0 2.5rem; } .pp-parent__points li { font-family: var(--pp-font-sans) !important; font-size: 0.9rem !important; color: rgba(255,255,255,0.8) !important; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.75rem; } .pp-parent__points li::before { content: '✓'; color: var(--pp-gold); font-weight: 700; font-size: 0.9rem; } .pp-parent__image img { width: 100%; display: block; opacity: 0.85; } /* ============================================ SECTION: FINAL CTA (dark hero strip) ============================================ */ .pp-final-cta { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background-color: var(--pp-black); } .pp-final-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.25); } .pp-final-cta__content { position: relative; z-index: 2; padding: 5rem 5vw; max-width: 700px; } .pp-final-cta__headline { font-family: var(--pp-font-display) !important; font-size: clamp(2.2rem, 5vw, 4.5rem) !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pp-white) !important; line-height: 1.05 !important; margin-bottom: 1.25rem !important; } .pp-final-cta__sub { font-family: var(--pp-font-sans) !important; font-size: 1.1rem !important; font-weight: 300 !important; color: rgba(255,255,255,0.65) !important; line-height: 1.6 !important; margin-bottom: 2.5rem !important; } /* ============================================ FOOTER ============================================ */ .footer { background-color: var(--pp-black) !important; border-top: 1px solid #1E1E1E !important; color: var(--pp-light-gray) !important; } .footer__heading { font-family: var(--pp-font-display) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--pp-white) !important; } .footer__content, .footer__list a, .footer-block__list a { color: rgba(255,255,255,0.45) !important; font-family: var(--pp-font-sans) !important; font-size: 0.82rem !important; transition: color 0.2s !important; } .footer__list a:hover, .footer-block__list a:hover { color: var(--pp-gold) !important; } .footer-block__list a, .footer__list-social a { color: rgba(255,255,255,0.45) !important; } .footer__copyright { color: rgba(255,255,255,0.25) !important; font-size: 0.75rem !important; font-family: var(--pp-font-sans) !important; border-top: 1px solid #1E1E1E !important; } /* ============================================ DAWN OVERRIDES — suppress generic styling ============================================ */ /* Replace Dawn's default button colors */ .button, .button--primary, [type="submit"].button { background-color: var(--pp-gold) !important; color: var(--pp-black) !important; font-family: var(--pp-font-sans) !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 0.78rem !important; border: 2px solid var(--pp-gold) !important; border-radius: 0 !important; transition: all 0.25s ease !important; } .button:hover, .button--primary:hover { background-color: transparent !important; color: var(--pp-gold) !important; } /* Section headings global */ .section__heading, h1, h2, h3 { font-family: var(--pp-font-display) !important; } /* Remove Dawn's blue announcement bar default */ .announcement-bar__link { color: var(--pp-black) !important; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .pp-problem__layout, .pp-inside__layout, .pp-about__layout, .pp-parent { grid-template-columns: 1fr; gap: 2.5rem; } .pp-about__image-wrap::before { display: none; } .pp-cards-grid { grid-template-columns: 1fr; } .pp-testimonials-grid { grid-template-columns: 1fr; } .pp-stats-bar { gap: 2rem; } .pp-teaches-list { grid-template-columns: 1fr; } .pp-hero__content { padding: 4rem 1.5rem 3rem; } .pp-hero { min-height: 90vh; } .pp-inside__image-wrap { position: static; } .pp-timeline__track { padding-left: 1rem; } }/* Fix header nav clicks */ .shopify-section-header, .header-wrapper, .header { position: relative !important; z-index: 9999 !important; } .header__inline-menu, .header__inline-menu a, .list-menu, .list-menu a { position: relative !important; z-index: 10000 !important; pointer-events: auto !important; } .pp-home, .pp-hero { position: relative !important; z-index: 1 !important; }