/* ============================================================ Mobile Axe — premium polish overlay Loaded LAST in so it overrides earlier files. Pushes the brand from "redesigned" to "production-grade premium": - more confident type + spacing - gold-hairline section dividers - wood-grain SVG divider between major bands - hero floating axe + cinematic overlay tighten - refined hero proof pills + marquee strip - card hover micro-art (image zoom + gold underline-draw) - "Most Booked" ribbon on the mid pricing card - axe-blade quote glyph in review cards - paper-grain on the canvas - real photo backdrop on the proof band ============================================================ */ /* ------------------------------ Canvas ------------------------------ */ body { /* Subtle warm wash — no full-viewport noise overlay (that was darkening dark sections and breaking the look). */ background: radial-gradient(circle at 8% 12%, rgba(197, 140, 42, 0.04), transparent 36%), radial-gradient(circle at 92% 60%, rgba(48, 91, 110, 0.035), transparent 42%), var(--bone); } /* Do NOT bump position on fixed elements (.sticky-cta, .ma-cursor, .ma-bullseye, .nav, .nav-drawer). They need to keep position: fixed. The earlier rule that set them to position: relative broke the sticky CTA and the bullseye rail. */ /* ------------------------------ Type ------------------------------ */ h1, h2, h3 { font-feature-settings: "ss01" 1, "kern" 1; text-wrap: balance; } h1 { letter-spacing: -0.028em; line-height: 0.92; } h2 { letter-spacing: -0.018em; font-size: clamp(2.1rem, 4.4vw, 3.8rem); line-height: 0.98; } /* Section headings get a thin gold rule above */ section > h2, section > .section-heading > h2 { position: relative; } section h2::before { display: none; /* opt-in only on opt-in sections */ } .section-label { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--rust); } .section-label::before { width: 28px; background: var(--gold); height: 2px; } /* Tabular numerals everywhere a number lives */ .stat strong, .review-stat strong, .package strong, .live-estimate strong, .estimate-result strong, .hero-proof span, .proof-row span { font-variant-numeric: tabular-nums; } /* ------------------------------ Section rhythm ------------------------------ */ section { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); } /* ------------------------------ Hero refinements ------------------------------ */ .hero { min-height: 96vh; padding-top: 132px; padding-bottom: 80px; } /* Top-overlay tightens; bottom keeps darkness for text readability. */ .hero { background: linear-gradient(180deg, rgba(15, 26, 20, 0.62) 0%, rgba(15, 26, 20, 0.25) 28%, rgba(15, 26, 20, 0) 55%, rgba(15, 26, 20, 0.65) 100%), linear-gradient(115deg, rgba(15, 26, 20, 0.55) 0%, rgba(15, 26, 20, 0.12) 60%, rgba(15, 26, 20, 0) 100%), url("../../site-photos/mobile-axe-trailer-hero.jpg") center / cover no-repeat; } .hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 900; letter-spacing: -0.025em; line-height: 0.95; max-width: 920px; text-wrap: pretty; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--gold-soft); font-size: 0.72rem; letter-spacing: 0.18em; } .hero .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* Small floating axe SVG in the top-right corner of the hero (corner accent only, not in the photo's main subject area). Hidden on viewports < 1100px so the trees + crowd are never obscured. */ .hero-axe-float { position: absolute; top: clamp(96px, 12vh, 140px); right: clamp(20px, 3vw, 48px); width: clamp(60px, 6vw, 96px); z-index: 2; opacity: 0.72; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45)); animation: hero-axe-spin 26s linear infinite; pointer-events: none; } .hero-axe-float svg { width: 100%; height: auto; display: block; } @keyframes hero-axe-spin { 0% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-4px); } 100% { transform: rotate(-8deg) translateY(0); } } @media (max-width: 1100px) { .hero-axe-float { display: none; } } /* Proof row gets compressed + more refined */ .hero-proof, .proof-row { margin-top: 22px; } .hero-proof span, .proof-row span { font-size: 12.5px; padding: 7px 12px; } /* Hero meta row tightens */ .hero .hero-meta { font-size: 13.5px; } /* ------------------------------ Marquee strip ------------------------------ */ .brand-marquee { background: var(--ink); color: var(--bone); border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); overflow: hidden; position: relative; padding: 14px 0; } .brand-marquee::before, .brand-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .brand-marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); } .brand-marquee::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); } .brand-marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee-scroll 38s linear infinite; will-change: transform; } .brand-marquee-track span { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); white-space: nowrap; } .brand-marquee-track span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .brand-marquee-track { animation: none; } } /* ------------------------------ Section dividers ------------------------------ */ .section-divider { height: 56px; position: relative; background: transparent; margin: 0; border: none; display: flex; align-items: center; justify-content: center; } .section-divider::before { content: ""; position: absolute; left: clamp(20px, 5vw, 80px); right: clamp(20px, 5vw, 80px); top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); } .section-divider svg { position: relative; z-index: 1; width: 56px; height: 24px; display: block; background: var(--bone); padding: 0 14px; } .section-divider svg path, .section-divider svg circle { stroke: var(--gold); } /* On dark sections the divider line uses gold */ [data-section-mode="dark"] + .section-divider::before, .proof-band + .section-divider::before, .quote-section + .section-divider::before { background: linear-gradient(90deg, transparent, rgba(197, 140, 42, 0.4) 18%, rgba(197, 140, 42, 0.4) 82%, transparent); } /* ------------------------------ Stat treatment ------------------------------ */ .stat-grid .stat, .review-stat { padding: 14px 0 14px 18px; } .stat-grid .stat strong { font-size: clamp(2.2rem, 3.5vw, 2.8rem); font-weight: 900; letter-spacing: -0.02em; color: var(--forest); line-height: 1; } .stat-grid .stat span { display: inline-block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted-strong); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; } /* ------------------------------ Event card hover ------------------------------ */ .event-card { transition: transform 320ms var(--ease-out-quint, ease), box-shadow 320ms var(--ease-out-quint, ease); } .event-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(15, 26, 20, 0.28); } .event-card::before { transition: background 320ms ease; } .event-card:hover::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(15, 26, 20, 0.92)); } .event-card h3 { position: relative; display: inline-block; padding-bottom: 4px; } .event-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width 360ms var(--ease-out-quint, ease); } .event-card:hover h3::after { width: 64px; } /* Gold corner accent appears on hover */ .event-card::after { content: ""; position: absolute; top: 12px; left: 12px; width: 14px; height: 14px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); opacity: 0; transform: translate(-6px, -6px); transition: opacity 320ms ease, transform 320ms ease; z-index: 2; } .event-card:hover::after { opacity: 1; transform: none; } /* ------------------------------ Package cards ------------------------------ */ .package { position: relative; padding: 26px 24px 22px; border-radius: var(--r-card); } .package h3 { font-size: 1.1rem; } .package strong { font-size: 2rem; letter-spacing: -0.015em; color: var(--forest); } .package::before { content: ""; position: absolute; top: 0; left: 24px; width: 36px; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; } /* "Most Booked" ribbon on the mid card — opt-in via .package--featured */ .package--featured { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest), 0 18px 40px rgba(15, 26, 20, 0.12); } .package--featured::after { content: "Most Booked"; position: absolute; top: 18px; right: 18px; background: var(--gold); color: var(--ink); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); } /* ------------------------------ Reviews polish ------------------------------ */ .review-card { position: relative; padding: 26px 22px 22px; } .review-card::before { content: ""; position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; opacity: 0.55; } .review-card blockquote { font-size: 1.15rem; line-height: 1.36; letter-spacing: -0.005em; } .review-card .stars { font-size: 0.95rem; letter-spacing: 0.16em; } /* ------------------------------ Proof band: real photo backdrop ------------------------------ */ .proof-band { position: relative; isolation: isolate; } .proof-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(15, 26, 20, 0.93) 0%, rgba(15, 26, 20, 0.86) 100%), url("../../site-photos/group-axe-coaching.jpg") center / cover no-repeat; z-index: -1; } /* ------------------------------ Buttons ------------------------------ */ .button, .btn, form button[type="submit"], form button:not([class]) { letter-spacing: 0.005em; padding: 0 22px; min-height: 50px; font-size: 15px; font-weight: 800; } /* Ensure unclassed form