/* ============================================================ * Avia Theme 2 — Brand Guidelines * Source: https://pages.bizasa.com/avia-brand-guidelines * * Applied via class on : html.avia-theme-brand { ... } * Overrides CSS variables from tokens.css + component patches * where role-swap is required (yellow primary, blue secondary). * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700;0,800;0,900;1,800;1,900&family=Manrope:wght@700;800&display=swap'); html.avia-theme-brand { /* ===== Colors — direct mapping ===== */ --color-navy: #122231; --color-navy-deep: #0A1620; --color-on-navy: #FFFFFF; /* Primary action = YELLOW (brand guide #1 rule) */ --color-yellow: #FECD02; --color-yellow-soft: #FDF8E6; --color-yellow-start: #FEE305; /* gradient start */ --color-yellow-end: #FEC201; /* gradient end */ /* Orange ROLE-SWAP → Blue (secondary CTA in brand guide) */ --color-orange: #0C409D; --color-orange-hover: #0F4DB8; --color-orange-press: #082F75; --color-blue-light: #0F97FF; /* gradient end for secondary */ /* Surfaces */ --color-cream: #F8F5EE; /* warmer page BG */ --color-cream-deep: #FDFFC7; /* badge BG */ --color-white: #FFFFFF; /* Text */ --color-dark: #0A0A0A; /* pure near-black for max contrast */ --color-body: #232F47; /* slightly cool body */ --color-mute: #717182; /* Lines */ --color-border: #E8E4D9; --color-border-strong: #D5CFC0; --color-divider: #ECE7DC; /* Semantic states stay same (success/warning/error) */ --color-amber: #936B06; /* new: brand guide eyebrow/badge text */ /* ===== Typography ===== */ --font-heading: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-button: 'Inter', system-ui, sans-serif; --font-card-title: 'Manrope', system-ui, sans-serif; /* Brand-guide-spec sizes (some bigger than current) */ --fs-display: 80px; --fs-h1: 54px; --fs-h2: 36px; --fs-h3: 24px; --fs-h4: 20px; /* ===== Radii — brand guide rounded ===== */ --radius-0: 0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ===== Shadows — yellow glow signature ===== */ --shadow-glow-yellow: 0 0 12px rgba(252, 194, 2, 0.35); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.06); --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.08); } /* ============================================================ * Component-level overrides (where CSS var swap is not enough) * Brand guide flips role of yellow & orange/blue. * ============================================================ */ /* ----- Primary CTA = Yellow gradient (was orange flat) ----- */ html.avia-theme-brand .btn, html.avia-theme-brand .submit-btn, html.avia-theme-brand .nav-cta { background: linear-gradient(175deg, #FEE305 26%, #FEC201 84%); color: #0A0A0A; border-radius: var(--radius-md); font-weight: 700; transition: transform 200ms cubic-bezier(.2,.6,.2,1), box-shadow 200ms cubic-bezier(.2,.6,.2,1), background 200ms cubic-bezier(.2,.6,.2,1); } html.avia-theme-brand .btn:hover, html.avia-theme-brand .submit-btn:hover, html.avia-theme-brand .nav-cta:hover { background: linear-gradient(175deg, #FEC201 0%, #FEE305 100%); transform: translateY(-2px); box-shadow: var(--shadow-glow-yellow); color: #0A0A0A; } html.avia-theme-brand .btn:active, html.avia-theme-brand .submit-btn:active { transform: translateY(0); } /* Outline secondary button stays navy */ html.avia-theme-brand .btn--outline { background: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); border-radius: var(--radius-md); } html.avia-theme-brand .btn--outline:hover { background: var(--color-navy); color: #FECD02; } /* ----- Service / Top-pick cards: Blue gradient CTA ----- */ html.avia-theme-brand .service-card .btn, html.avia-theme-brand .pick .btn { background: linear-gradient(to right, #0C409D, #0F97FF); color: #FFFFFF; } html.avia-theme-brand .service-card .btn:hover, html.avia-theme-brand .pick .btn:hover { background: linear-gradient(to right, #082F75, #0C409D); color: #FFFFFF; } /* Featured pick card: navy bg → yellow CTA */ html.avia-theme-brand .pick.is-featured .btn { background: linear-gradient(175deg, #FEE305 26%, #FEC201 84%); color: #0A0A0A; } /* ----- Card radii ----- */ html.avia-theme-brand .stat, html.avia-theme-brand .booking, html.avia-theme-brand .feature-card, html.avia-theme-brand .testi, html.avia-theme-brand .pick, html.avia-theme-brand .channel-card, html.avia-theme-brand .office-card, html.avia-theme-brand .form-card, html.avia-theme-brand .tier { border-radius: var(--radius-lg); } html.avia-theme-brand .service-card { border-radius: var(--radius-xl); } html.avia-theme-brand .field-input, html.avia-theme-brand .form-card .input, html.avia-theme-brand .form-card .select, html.avia-theme-brand .form-card .textarea { border-radius: var(--radius-md); border-width: 1.5px; } html.avia-theme-brand .booking-pill, html.avia-theme-brand .pick-tag, html.avia-theme-brand .pick-badge, html.avia-theme-brand .office-chip, html.avia-theme-brand .chip, html.avia-theme-brand .pay-chip, html.avia-theme-brand .addon-chip, html.avia-theme-brand .trust-badge, html.avia-theme-brand .milestone, html.avia-theme-brand .contact-chip { border-radius: var(--radius-sm); } /* ----- Hero H1: Inter 900 Italic ----- */ html.avia-theme-brand .hero h1, html.avia-theme-brand .about-hero h1, html.avia-theme-brand .contact-hero h1, html.avia-theme-brand .faq-hero h1, html.avia-theme-brand .display { font-family: var(--font-heading); font-weight: 900; font-style: italic; letter-spacing: -0.02em; } /* Other H1-H6 stay non-italic */ html.avia-theme-brand h2, html.avia-theme-brand h3, html.avia-theme-brand h4, html.avia-theme-brand h5 { font-style: normal; } /* ----- Service / Pick card titles: Manrope 800 ----- */ html.avia-theme-brand .service-card .title, html.avia-theme-brand .pick-body h4, html.avia-theme-brand .tier-name { font-family: var(--font-card-title); font-weight: 800; } /* ----- Eyebrow amber per brand guide ----- */ html.avia-theme-brand .eyebrow { color: var(--color-amber); letter-spacing: 0.1em; font-weight: 700; } /* ----- Badges: cream-deep BG, amber text ----- */ html.avia-theme-brand .booking-pill, html.avia-theme-brand .office-chip, html.avia-theme-brand .pick-tag { background: var(--color-cream-deep); color: var(--color-amber); } html.avia-theme-brand .pick-badge { background: var(--color-yellow); color: var(--color-navy); } /* ----- Stat cards yellow glow ----- */ html.avia-theme-brand .stat, html.avia-theme-brand .feature-icon, html.avia-theme-brand .cred-icon { box-shadow: var(--shadow-glow-yellow); background: var(--color-yellow-soft); } html.avia-theme-brand .stat-num, html.avia-theme-brand .problem-stat-num { color: var(--color-navy); } /* ----- Card hover lift ----- */ html.avia-theme-brand .feature-card:hover, html.avia-theme-brand .pick:hover, html.avia-theme-brand .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-yellow), var(--shadow-card-hover); } /* ----- Nav: keep navy header, yellow brand-mark accent ----- */ html.avia-theme-brand .brand-mark { background: var(--color-navy); color: var(--color-yellow); border-radius: var(--radius-md); } /* ----- Hero "swipe" highlight uses brand yellow ----- */ html.avia-theme-brand .swipe { background: linear-gradient(transparent 60%, var(--color-yellow) 60%, var(--color-yellow) 95%, transparent 95%); } /* ----- FAQ chev when open uses brand yellow ----- */ html.avia-theme-brand .faq-item.is-open .faq-q .chev { background: var(--color-yellow); color: var(--color-navy); } /* ----- WhatsApp button keep green icon, but border radius ----- */ html.avia-theme-brand .wa-btn { border-radius: var(--radius-md); } /* ----- Tab active underline uses yellow ----- */ html.avia-theme-brand .tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-yellow); border-bottom-width: 3px; }