/** Shopify CDN: Minification failed Line 201:268 Unexpected "}" Line 280:196 Unexpected "}" Line 571:188 Unexpected "}" **/ /* ============================================ TIKI WREATH BOUTIQUE - TROPICAL DESIGN ============================================ */ /* Google Fonts Import */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500;600&display=swap'); /* ---- CSS VARIABLES ---- */ :root { --tiki-gold: #C5A44E; --tiki-gold-light: #D4B96A; --tiki-dark: #1a1a1a; --tiki-cream: #FAF3E0; --tiki-green: #2D5A27; --tiki-green-light: #3a7a33; --tiki-coral: #E07A5F; --tiki-sand: #F5E6CC; --tiki-bamboo-bg: linear-gradient(135deg, #8B7355 0%, #A0926B 25%, #6B5B3D 50%, #8B7355 75%, #A0926B 100%); --tiki-font-display: 'Playfair Display', Georgia, serif; --tiki-font-body: 'Montserrat', 'Helvetica Neue', sans-serif; } /* ---- GLOBAL TYPOGRAPHY ---- */ body, .shopify-section { font-family: var(--tiki-font-body); } h1, h2, h3, h4, h5, .h1, .h2, .h3 { font-family: var(--tiki-font-display); letter-spacing: 0.02em; } /* ============================================ ANNOUNCEMENT BAR - BAMBOO TEXTURED BANNER ============================================ */ .shopify-section-header .utility-bar, .announcement-bar-section, .shopify-section--announcement-bar, .utility-bar-section { background: var(--tiki-bamboo-bg) !important; background-size: 200% 200% !important; border-bottom: 2px solid var(--tiki-gold) !important; padding: 10px 0 !important; position: relative; overflow: hidden; } .announcement-bar-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px ); pointer-events: none; } .announcement-bar, .utility-bar { background: transparent !important; } .announcement-bar__message, .announcement-bar a, .announcement-bar p, .utility-bar__message { font-family: var(--tiki-font-display) !important; color: var(--tiki-gold) !important; font-style: italic !important; font-size: 1.05rem !important; font-weight: 400 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important; letter-spacing: 0.08em !important; } /* ============================================ HEADER & NAVIGATION ============================================ */ .section-header, .shopify-section-header, header.header { background-color: var(--tiki-cream) !important; border-bottom: 2px solid var(--tiki-gold) !important; font-family: var(--tiki-font-body); } .header__heading-logo { max-width: 180px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: transform 0.3s ease; } .header__heading-logo:hover { transform: scale(1.05); } /* Navigation Hover Animations */ .header__menu-item, .list-menu__item, .header__menu-item .header__menu-item, header nav a, .menu-drawer__menu-item { font-family: var(--tiki-font-body) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.85rem !important; color: var(--tiki-dark) !important; position: relative; transition: color 0.3s ease, transform 0.3s ease !important; } .header__menu-item:hover, .list-menu__item:hover, header nav a:hover { color: var(--tiki-gold) !important; transform: translateY(-2px); } .header__menu-item::after, .list-menu__item a::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--tiki-gold); transition: width 0.3s ease, left 0.3s ease; } .header__menu-item:hover::after, .list-menu__item a:hover::after { width: 100%; left: 0; } /* ============================================ HERO IMAGE BANNER ============================================ */ .shopify-section:first-of-type .banner, .banner--content-align-center, section.image-banner, .banner { min-height: 85vh !important; position: relative; } .banner__media img { object-fit: cover; filter: brightness(0.85) saturate(1.1); } .banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); pointer-events: none; z-index: 1; } .banner__content { z-index: 2 !important; position: relative; } .banner__heading, .banner h2 { font-family: var(--tiki-font-display) !important; color: #fff !important; font-size: clamp(2.5rem, 5vw, 4.5rem) !important; text-shadow: 2px 3px 6px rgba(0,0,0,0.4) !important; font-weight: 700 !important; } .banner__text, .banner p { font-family: var(--tiki-font-body) !important; color: var(--tiki-cream) !important; font-size: 1.15rem !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; } .banner__buttons .button, .banner .button { background-color: var(--tiki-gold) !important; color: var(--tiki-dark) !important; border: none !important; border-radius: 30px !important; padding: 14px 36px !important; font-family: var(--tiki-font-body) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; transition: all 0.3s ease !important; } .banner__buttons .button:hover, .banner .button:hover { background-color: var(--tiki-gold-light) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(197,164,78,0.4) !important; } } } } /* ============================================ WELCOME MESSAGE OVERLAY ============================================ */ .banner__content-wrapper, .banner__box { background: rgba(0,0,0,0.45) !important; backdrop-filter: blur(4px); border: 1px solid rgba(197,164,78,0.4) !important; border-radius: 12px !important; padding: 40px 50px !important; max-width: 700px !important; margin: 0 auto; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ PRODUCT COLLECTION CARDS ============================================ */ .collection-list__item, .card-wrapper, .product-card-wrapper { transition: transform 0.4s ease, box-shadow 0.4s ease !important; border-radius: 12px !important; overflow: hidden; } .collection-list__item:hover, .card-wrapper:hover, .product-card-wrapper:hover { transform: translateY(-8px) !important; box-shadow: 0 12px 35px rgba(0,0,0,0.15) !important; } .card { border-radius: 12px !important; border: 1px solid var(--tiki-sand) !important; overflow: hidden; } .card__heading a, .card__heading { font-family: var(--tiki-font-display) !important; color: var(--tiki-dark) !important; } .card__information { padding: 16px !important; background: #fff; } .price .money, .price-item { color: var(--tiki-green) !important; font-weight: 600 !important; } /* Collection Section Headers */ .section-header__title, .collection__title, .title--primary, h2.h1 { font-family: var(--tiki-font-display) !important; color: var(--tiki-dark) !important; position: relative; display: inline-block; } .section-header__title::after, .title--primary::after { content: ''; display: block; width: 60px; height: 3px; background: var(--tiki-gold); margin: 12px auto 0; border-radius: 2px; } } /* ============================================ BEHIND THE CRAFT SECTION (Rich Text) ============================================ */ .rich-text, .section-rich-text { background-color: var(--tiki-cream) !important; padding: 80px 40px !important; position: relative; } .rich-text::before { content: '\1F33F'; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 2rem; opacity: 0.3; } .rich-text .rich-text__heading, .rich-text h2 { font-family: var(--tiki-font-display) !important; color: var(--tiki-dark) !important; font-size: 2.2rem !important; margin-bottom: 20px !important; } .rich-text .rich-text__text, .rich-text p { font-family: var(--tiki-font-body) !important; color: #555 !important; font-size: 1.05rem !important; line-height: 1.8 !important; max-width: 750px !important; margin: 0 auto !important; } /* Image with Text - Lifestyle / Workspace */ .image-with-text { background-color: #fff !important; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin: 40px auto !important; } .image-with-text__media img { border-radius: 16px 0 0 16px; object-fit: cover; filter: saturate(1.05); } .image-with-text__content { padding: 50px !important; display: flex; flex-direction: column; justify-content: center; } /* ============================================ FLORAL SOCIAL MEDIA ICONS ============================================ */ .social-icons, .list--inline .social-icons__item { display: inline-flex; align-items: center; gap: 16px; } .social-icons__link, .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tiki-cream) !important; border: 2px solid var(--tiki-gold) !important; color: var(--tiki-gold) !important; transition: all 0.3s ease !important; position: relative; overflow: hidden; } .social-icons__link:hover, .social-icons a:hover { background: var(--tiki-gold) !important; color: #fff !important; transform: translateY(-3px) rotate(5deg); box-shadow: 0 6px 18px rgba(197,164,78,0.4) !important; } .social-icons__link::before { content: '\2740'; position: absolute; font-size: 0.6rem; top: 2px; right: 2px; opacity: 0.5; color: var(--tiki-coral); } .social-icons svg { width: 20px; height: 20px; fill: currentColor; } /* ============================================ NEWSLETTER / EMAIL SIGNUP ============================================ */ .newsletter, .shopify-section--newsletter, .email-signup-section { background: var(--tiki-bamboo-bg) !important; background-size: 200% 200% !important; padding: 70px 40px !important; text-align: center; position: relative; border-top: 3px solid var(--tiki-gold); border-bottom: 3px solid var(--tiki-gold); } .newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 90deg, transparent, transparent 8px, rgba(0,0,0,0.05) 8px, rgba(0,0,0,0.05) 9px ); pointer-events: none; } .newsletter__heading, .newsletter h2 { font-family: var(--tiki-font-display) !important; color: var(--tiki-gold) !important; font-style: italic !important; font-size: 2rem !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.3) !important; } .newsletter__subheading, .newsletter p { color: var(--tiki-cream) !important; font-family: var(--tiki-font-body) !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important; } .newsletter .field__input, .newsletter input[type='email'] { background: rgba(255,255,255,0.95) !important; border: 2px solid var(--tiki-gold) !important; border-radius: 30px !important; padding: 14px 24px !important; font-family: var(--tiki-font-body) !important; color: var(--tiki-dark) !important; } .newsletter .button, .newsletter button[type='submit'] { background: var(--tiki-gold) !important; color: var(--tiki-dark) !important; border-radius: 30px !important; padding: 14px 32px !important; font-family: var(--tiki-font-body) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border: none !important; transition: all 0.3s ease !important; } .newsletter .button:hover { background: var(--tiki-gold-light) !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(197,164,78,0.4) !important; } /* ============================================ FOOTER ============================================ */ .footer, .section-footer { background-color: var(--tiki-dark) !important; color: var(--tiki-cream) !important; padding: 60px 40px 30px !important; border-top: 3px solid var(--tiki-gold) !important; } .footer__title, .footer h2, .footer h3, .footer h4 { font-family: var(--tiki-font-display) !important; color: var(--tiki-gold) !important; font-style: italic !important; margin-bottom: 16px !important; } .footer a, .footer .link { color: var(--tiki-cream) !important; transition: color 0.3s ease !important; } .footer a:hover, .footer .link:hover { color: var(--tiki-gold) !important; } .footer__content-bottom { border-top: 1px solid rgba(197,164,78,0.3) !important; margin-top: 40px !important; padding-top: 20px !important; } .copyright { color: rgba(250,243,224,0.6) !important; font-family: var(--tiki-font-body) !important; font-size: 0.85rem !important; } /* ============================================ GENERAL BUTTONS & LINKS ============================================ */ .button, a.button, button.button { font-family: var(--tiki-font-body) !important; font-weight: 600 !important; letter-spacing: 0.08em !important; border-radius: 30px !important; transition: all 0.3s ease !important; } .button--primary { background-color: var(--tiki-gold) !important; color: var(--tiki-dark) !important; border: none !important; } .button--primary:hover { background-color: var(--tiki-gold-light) !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(197,164,78,0.35) !important; } .button--secondary { background: transparent !important; border: 2px solid var(--tiki-gold) !important; color: var(--tiki-gold) !important; } .button--secondary:hover { background: var(--tiki-gold) !important; color: var(--tiki-dark) !important; } /* ============================================ SLIDESHOW SECTION ============================================ */ .slideshow .slideshow__slide { min-height: 70vh; } .slideshow__text h2 { font-family: var(--tiki-font-display) !important; color: #fff !important; text-shadow: 2px 3px 6px rgba(0,0,0,0.4) !important; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 749px) { .banner { min-height: 60vh !important; } .banner__heading { font-size: 2rem !important; } .banner__content-wrapper, .banner__box { padding: 24px 20px !important; margin: 0 16px; } .newsletter { padding: 50px 20px !important; } .rich-text { padding: 50px 20px !important; } .social-icons__link { width: 40px; height: 40px; } .image-with-text__media img { border-radius: 16px 16px 0 0; } } /* ============================================ FIRST-TIME BUYER DISCOUNT BADGE ============================================ */ .newsletter__subheading::after { content: '\2728 Use code ALOHA10 for 10% off your first order! \2728'; display: block; margin-top: 12px; font-family: var(--tiki-font-display); color: var(--tiki-gold-light); font-size: 1.1rem; font-style: italic; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } /* End of Tiki Tropical Custom Styles */ } } } } } } } } } } } ) } } } } }