/*================================================== POP MY CHERRY VINTAGE BOUTIQUE HEADER MASTER CSS ====================================================*/ /*================================================== 01. VARIABLES ==================================================*/ :root{ --pmc-white:#ffffff; --pmc-offwhite:#faf8f5; --pmc-text:#333333; --pmc-muted:#757575; --pmc-accent:#d66b8a; --pmc-accent-dark:#bf5474; --pmc-border:#e8e2da; --pmc-shadow-sm:0 2px 10px rgba(0,0,0,.06); --pmc-shadow:0 8px 25px rgba(0,0,0,.08); --pmc-shadow-lg:0 15px 40px rgba(0,0,0,.12); --pmc-radius:12px; --pmc-header-height:138px; --pmc-transition:.30s ease; } /*================================================== 02. ANNOUNCEMENT BAR ====================================================*/ /*================================================== 03 HEADER ==================================================*/ #Header{ position:fixed; top:0; left:0; right:0; width:100%; background:var(--pmc-white); box-shadow:var(--pmc-shadow-sm); z-index:9999; transition: background .30s ease, box-shadow .30s ease, padding .30s ease; } .pmc-header-top{ background:var(--pmc-white); border-bottom:1px solid var(--pmc-border); padding:18px 0; } .pmc-header-row{ min-height:138px; align-items:center; } .container-fluid{ max-width:1320px; margin:auto; padding-left:30px; padding-right:30px; } /* Logo */ .pmc-logo-column{ display:flex; align-items:center; justify-content:flex-start; } .pmc-logo-column img{ max-height:115px; width:auto; transition:.3s ease; } /* Search */ .pmc-search-column{ display:flex; justify-content:center; } .pmc-search-column .aws-container{ max-width:460px; width:100%; } /* Account */ .pmc-actions-column{ display:flex; justify-content:flex-end; align-items:center; } /*================================================== 04 LOGO ==================================================*/ .pmc-logo-column{ display:flex; align-items:center; justify-content:flex-start; } .custom-logo, .pmc-logo-column img{ max-height:105px; width:auto; transition:all .35s ease; } .custom-logo:hover{ transform:scale(1.02); } .site-title{ font-family:'Playfair Display', serif; font-size:46px; font-weight:600; color:var(--pmc-text); } /*================================================== 05 NAVIGATION ==================================================*/ .pmc-navigation{ background:#faf8f5; border-top:1px solid #e8e2da; border-bottom:1px solid #e8e2da; } .pmc-navigation .container-fluid{ max-width:1280px; margin:auto; } .pmc-navigation ul{ display:flex; justify-content:center; align-items:center; gap:38px; list-style:none; margin:0; padding:18px 20px; } .pmc-navigation li{ margin:0; } .pmc-navigation a{ font-family:'Circe',sans-serif; font-size:19px; font-weight:500; color:#2f2f2f; text-decoration:none; transition:.25s ease; position:relative; } .pmc-navigation a::after{ content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:#d66b8a; transition:.25s ease; } .pmc-navigation a:hover{ color:#d66b8a; } .pmc-navigation a:hover::after{ width:100%; } .current-menu-item>a{ color:#d66b8a !important; } /*================================================== 06. SEARCH ==================================================*/ .pmc-search-column{ display:flex; align-items:center; justify-content:center; } .pmc-search-column .aws-container{ width:100%; max-width:480px; } /* Entire search form */ .pmc-search-column .aws-search-form{ display:flex !important; height:52px !important; border:1px solid #ddd; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.05); transition:.30s; } .pmc-search-column .aws-search-form:focus-within{ border-color:var(--pmc-accent); box-shadow:0 0 0 4px rgba(214,107,138,.15); } /* Input */ .pmc-search-column .aws-search-field{ flex:1; border:none !important; padding:0 18px !important; font-size:16px; background:#fff; } /* Search button */ .pmc-search-column .aws-search-btn{ width:58px !important; border:none !important; background:#faf8f5; transition:.30s; } .pmc-search-column .aws-search-btn:hover{ background:var(--pmc-accent); color:#fff; } /*================================================== 07 ACTIONS ==================================================*/ .pmc-actions-column ul{ display:flex; justify-content:flex-end; align-items:center; gap:18px; } .pmc-actions-column a{ color:#666; font-size:17px; transition:.25s; } .pmc-actions-column a:hover{ color:#d66b8a; } /*================================================== 08. STICKY HEADER ====================================================*/ /*================================================== 09. TABLET ====================================================*/ /*================================================== 10. MOBILE ====================================================*/ @media (max-width:991px){ .pmc-header-row{ min-height:auto; padding:15px 0; } .pmc-logo-column{ justify-content:center; margin-bottom:15px; } .pmc-logo-column img{ max-height:70px; } .pmc-search-column .aws-search-form{ height:46px !important; } .pmc-search-column .aws-container{ max-width:100%; } .pmc-search-column .aws-search-field{ height:46px !important; font-size:15px; } .pmc-search-column .aws-search-btn{ width:50px !important; } .pmc-search-column .aws-container{ max-width:100%; } .pmc-actions-column{ justify-content:center; font-size:14px; } .pmc-actions-column ul{ margin:0; padding:0; } .pmc-navigation{ overflow-x:auto; white-space:nowrap; } } /*================================================== 09 MOBILE NAVIGATION ==================================================*/ .navbar-toggler:focus{ box-shadow:none; } .navbar-toggler-icon{ width:1em; height:1em; } @media (max-width:991px){ .navbar-collapse{ background:#fff; } } /*================================================== 11. MOBILE HEADER ==================================================*/ @media (max-width:991px){ /* Header */ #Header{ position:fixed; top:0; left:0; right:0; z-index:9999; background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.08); } .pmc-header-top{ padding:12px 16px; } /* Stack the header nicely */ .pmc-header-row{ row-gap:14px; } /* Logo */ .pmc-logo-column{ text-align:center; } .pmc-logo-column img, .custom-logo{ max-height:60px; width:auto; margin:auto; display:block; } /* Search */ .pmc-search-column{ margin-top:6px; } .pmc-search-column input{ height:48px; border-radius:8px; } /* Account row */ .pmc-actions-column{ display:none; } /* Navigation */ .pmc-navigation{ margin-top:10px; } /* Hero spacing */ body{ padding-top:175px; } } /*================================================== 12. MAX MEGA MENU ==================================================*/ #mega-menu-wrap-main_menu{ background:#ffffff; } #mega-menu-wrap-main_menu .mega-menu-toggle{ background:#ffffff; border-top:1px solid #eee; } #mega-menu-wrap-main_menu .mega-toggle-label{ font-weight:600; letter-spacing:.08em; text-transform:uppercase; } #mega-menu-wrap-main_menu .mega-menu{ background:#ffffff; } /*================================================== 13. ANNOUNCEMENT BAR ==================================================*/ .welcome-offer-bar{ padding:8px 15px; font-size:13px; line-height:1.4; }