/* ========================================================================== THEME — "VIP Membership Card" A midnight-navy + antique-gold palette in place of the old tomato-red accent. Two golds are used deliberately: --gold (muted brass) for buttons/dividers on light backgrounds, --gold-bright for text sitting on the dark navy cards/footer, where a richer gold reads better against near-black. Product numbers are set in a serif display face so the number itself feels engraved/collectible, the way a membership card or plaque would render a number — the rest of the UI stays in Poppins. ========================================================================== */ :root { /* Gold system */ --gold: #b8863b; --gold-deep: #93691f; --gold-bright: #e9c46a; --gold-soft: #f0dca6; --gold-mist: #f3e6c8; /* Navy system */ --navy: #0f1b33; --navy-soft: #17264a; --navy-deep: #0a1226; /* Supporting */ --mint: #2dd4a7; --cream: #fffdf8; --ink: #1c2333; --muted: #6b7280; --line: rgba(15, 27, 51, 0.12); /* Elevation */ --shadow-soft: 0 10px 30px rgba(15, 27, 51, 0.08); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.28); } * { /* "*" is used for all elements in your website*/ margin: 0; padding: 0; box-sizing: border-box; /*box sizing: border-box is used to add padding and border in both width and heghts.*/ } body { font-family: "Poppins", sans-serif; color: var(--ink); } /* Serif display face reserved for the numbers themselves — the one signature typographic choice in this redesign. Import it alongside the existing Poppins import in main.php's : family=Playfair+Display:wght@600;700 */ .product-name { font-family: "Playfair Display", "Poppins", serif; } .navbar { display: flex; align-items: center; padding: 20px; } nav { flex: 1; text-align: right; } nav ul { display: inline-block; list-style-type: none; } nav ul li { display: inline-block; margin-right: 20px; } /*for menu links*/ a { text-decoration: none; color: #555; } p { color: #555; } .container { max-width: 1300px; /*width of the header section will not be more than 1300px*/ margin: auto; padding-left: 25px; padding-right: 25px; } /*dividing text and image in haif*/ .row { display: flex; /*flexible content*/ align-items: center; flex-wrap: wrap; /*wrap place single line or multi lines in given space.*/ justify-content: space-around; /*"Display the flex items with space before, between, and after the lines:"*/ } .col-2 { flex-basis: 50%; /*divide it into haif*/ min-width: 300px; } .col-2 img { max-width: 100%; /*should not be more than 100%*/ padding: 50px 0px; /*top bottom 50, left right 0*/ } .col-2 h1 { font-size: 50px; line-height: 60px; margin: 25px; } .col-2 p { margin-left: 25px; } /*design header button explore now*/ .btn { display: inline-block; background-color: var(--gold); color: #fff; padding: 8px 30px; margin: 30px 0; margin-left: 25px; border-radius: 30px; transition: background 0.5s; /*below I have specified the change in button color when hover. this transition will delay color change by 0.5 sec*/ } .btn1 { display: inline-block; background-color: #25d366; color: #fff; padding: 8px 30px; margin: 30px 0; margin-left: 25px; border-radius: 30px; transition: background 0.5s; /*below I have specified the change in button color when hover. this transition will delay color change by 0.5 sec*/ } .btn:hover { background: var(--gold-deep); } .btn1:hover { background: #118d01; } .header { background: radial-gradient(var(--cream), var(--gold-mist)); } .header .row { margin-top: 75px; } /*for featured categories are*/ .categories { margin: 50px 0px; } /* ========================================================================== CATEGORY CARDS — horizontal scroll carousel Previously a wrapping flex row, which made tiles different widths/heights depending on how many fit per line (so 1-word names sat on one line while longer names wrapped to 2-3, with uneven gaps). Every tile is now a fixed size and the row scrolls horizontally instead of wrapping, so spacing and line-count stay consistent no matter the category name length or screen size. ========================================================================== */ .category-scroll-wrap { position: relative; padding: 0 8px; } .category-row { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 20px; padding: 6px 4px 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; justify-content: flex-start; } .category-row::-webkit-scrollbar { height: 6px; } .category-row::-webkit-scrollbar-track { background: transparent; } .category-row::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 6px; } .category-row .col-6 { flex: 0 0 150px; /*fixed width for every tile - never grows/shrinks, so all tiles match*/ width: 150px; min-width: 150px; max-width: 150px; margin-bottom: 0; scroll-snap-align: start; } .category-row .category-link { display: flex; flex-direction: column; height: 100%; } .category-row .col-6 img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; } /* Left/right scroll buttons */ .category-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--navy); color: var(--gold-bright); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, background 0.2s ease; } .category-scroll-btn:hover { background: var(--navy-soft); transform: translateY(-50%) scale(1.08); } .category-scroll-left { left: -6px; } .category-scroll-right { right: -6px; } @media only screen and (max-width: 600px) { .category-scroll-btn { width: 32px; height: 32px; font-size: 16px; } .category-row .col-6 { flex-basis: 130px; width: 130px; min-width: 130px; max-width: 130px; } } .col-3 { flex-basis: 30%; /*30% for each image*/ min-width: 250px; /*images should have min width of 250 px*/ margin-bottom: 30px; } .col-3 img { width: 100%; /*utilize full col-3 width which has min-width of 250 px*/ } /*featured products*/ /*small container edit whole section consist of rows*/ .small container { max-width: 1080px; margin: auto; /*make images in center*/ padding-left: 25px; padding-right: 25px; } /*col-4 will edit col of images*/ .col-4 { flex-basis: 25%; /*each image column occupies 25% each*/ padding: 10px; min-width: 200px; margin-bottom: 50px; transition: transform 0.5s; /*when apply hover effect it will move image with 5sec delay*/ } .col-4 img { width: 100%; /*each image occupies full column width*/ } /*for title class consist of heading of feature products*/ .title { text-align: center; margin: 0px auto 80px; position: relative; line-height: 60px; color: #555; } /*to make divider after featured products heading*/ .title::after { /*after is used to place something after anything*/ content: ""; /*will place divider after title content*/ background: var(--gold); /*color of divider*/ width: 80px; /*these all are the features of divider*/ height: 5px; border-radius: 5px; position: absolute; bottom: 0; left: 50%; /*50% from l.H.S*/ transform: translateX(-50%); } /*for products title*/ h4 { color: #555; font-weight: normal; } /*for products price*/ .col-4 p { font-size: 14px; } /*hover effect to feature products images*/ .col-4:hover { transform: translateY(-5px); /*hover effect to col-4 which contain 4 images of featured products and image move in y direction when hover*/ } /*offer section*/ .offer { background: radial-gradient(var(--cream), var(--gold-mist)); margin-top: 80px; padding: 30px; } .col-2 .offer-img { padding: 50px; } small { color: #555; display: block; margin-left: 25px; } /*testimonial*/ .testimonial { padding-top: 100px; } .testimonial .col-3 { text-align: center; padding: 40px 20px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); /*it will add shadow to each column like a box*/ cursor: pointer; /*it convert cursor to shape pointer when moving cursor over testimonials*/ transition: transform 0.5s; /*for hover effect*/ } .testimonial .col-3 img { /*for the images of testimonials*/ width: 50px; margin-top: 20px; border-radius: 50%; } .testimonial .col-3:hover { transform: translateY(-10px); /*hover effect to each column*/ } /*designing quote section*/ .fa.fa-quote-left { font-size: 34px; color: var(--gold); /*color of quote icon*/ } .col-3 p { /*modify p of testimonials*/ font-size: 12px; margin: 12px 0; color: #777; } .testimonial .col-3 h3 { font-weight: 600; color: #555; font-size: 16px; } /*brands*/ .brands { margin: 100px auto; } .col-5 { width: 160px; } .col-5 img { width: 100%; cursor: pointer; filter: grayscale(100%); /*logo color would be gray*/ } .col-5 img:hover { filter: grayscale(0); /*when hover on brands, it will remove gray color*/ } /*designing footer*/ .footer { background: var(--navy-deep); /*footer background — deep navy, matches the product cards and header*/ color: #9aa3bb; /*text color*/ font-size: 14px; padding: 60px 0 20px; } .footer p { color: #9aa3bb; /*paragraphs color in class footer*/ } .footer h3 { color: #fff; /*heading color is white*/ margin-bottom: 20px; } .footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4 { min-width: 250px; /*all columns should have a min width of 250px*/ margin-bottom: 20px; } .footer-col-1 { flex-basis: 30%; } .footer-col-2 { flex: 1; /*flex 1 is used to fill complete occupy given space*/ text-align: center; } .footer-col-2 img { width: 180px; /*editing image in col2*/ margin-bottom: 20px; } .footer-col-3, .footer-col-4 { flex-basis: 12%; /*both footer col3 and col4 occupies 12% each*/ text-align: center; } ul { list-style-type: none; /*remove bullets from links specially links which are in footer*/ } .app-logo { margin-top: 20px; } .app-logo img { width: 140px; } .footer hr { border: none; background: rgba(233, 196, 106, 0.18); height: 1px; margin: 20px 0; } .copyright { display: block; text-align: center; color: #fff; } /*-----------media query for menu-------------*/ .menu-icon { width: 28px; height: 20px; /*width/height of the menu icon button*/ margin-left: 20px; padding: 0; border: none; background: none; display: none; /*initially menu icon will not be visible on any screen*/ position: relative; top: -3px; /*nudges the icon up slightly so it doesn't sit low relative to the logo/icons in the navbar row*/ cursor: pointer; } .menu-icon-bar { /*the 3 bars that make up the hamburger icon, and morph into an X when open*/ position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--navy-deep); transition: transform 0.35s ease, opacity 0.25s ease, top 0.35s ease, background 0.3s ease; } .menu-icon-bar:nth-child(1) { top: 0; } .menu-icon-bar:nth-child(2) { top: 8.5px; } .menu-icon-bar:nth-child(3) { top: 17px; } /*once the dropdown is open (.is-open added by menutoggle()), the 3 bars animate into an X: top+bottom bars slide to the middle and rotate 45deg each way, middle bar fades out*/ .menu-icon.is-open .menu-icon-bar { background: var(--gold-bright); /*so the X reads clearly against the now-open dark full-screen overlay*/ } .menu-icon.is-open .menu-icon-bar:nth-child(1) { top: 8.5px; transform: rotate(45deg); } .menu-icon.is-open .menu-icon-bar:nth-child(2) { opacity: 0; } .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 8.5px; transform: rotate(-45deg); } /*we have to display menu icon for small screens only and hide it for larger screens*/ /* The login/account link normally shown as an icon/pill in .nav-icons on desktop. On tablet & mobile it moves inside the #MenuItems dropdown instead (see .mobile-account-item below), so it's hidden here. */ .mobile-account-item { display: none; } /* Some pages (account.php, cart.php, wishlist.php) also put a "Log out" button in this same dropdown item alongside the account link - style it to match the account link above it (gold, same weight/size, full width, no default button chrome). */ .mobile-account-item .mobile-logout-btn { display: block; width: 100%; padding: 0; border: none; background: none; text-align: left; color: var(--gold-bright); font-family: inherit; font-weight: 600; font-size: 19px; cursor: pointer; } /*menu icon will be visible for width of page 1060px and below (covers tablets in both portrait and landscape, plus phones) - above that we show the normal inline navbar */ @media only screen and (max-width: 1060px) { .header .container { padding-left: 20px; padding-right: 20px; } .navbar { position: relative; padding: 20px 16px; } nav { flex: 0 0 auto; /*stop nav from stretching/pushing icons around now that its ul is a fixed full-screen overlay*/ text-align: left; /*overrides the "text-align: right" set on nav for the desktop layout above - without this it was inherited by every link in the dropdown, right-aligning them*/ } nav ul { /*full-screen dropdown overlay: covers 100% of the viewport's width and height, opaque (not see-through), and fades + slides in from the left when opened rather than just appearing instantly*/ position: fixed; inset: 0; /*shorthand for top:0; right:0; bottom:0; left:0*/ width: 100%; height: 100%; margin: 0; background: var(--navy-deep); opacity: 0; z-index: 2000; /*higher than EVERYTHING else on the page (the highest previously used was 999, on .slogan-bar - the scrolling slogan/marquee strip further down the page - which at an equal z-index was winning the stacking tie-break and showing through on top of the open dropdown). Stays below the menu-icon toggle button (z-index 2001) so the X remains clickable to close it.*/ overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; /*keeps every list item hugging the left edge*/ justify-content: flex-start; /*anchors links right below the toggle button instead of centering the whole block in the middle of the screen*/ text-align: left; padding: 90px 32px 40px; /*90px top clearance is roughly the toggle button's position + a comfortable gap - not vertically centered, just placed below it*/ box-sizing: border-box; transform: translateX(-100%); pointer-events: none; transition: transform 0.45s ease, opacity 0.45s ease; /*this is what makes opening/closing the dropdown a smooth slide + fade instead of an instant jump*/ } nav ul.nav-open { opacity: 1; transform: translateX(0); pointer-events: auto; } nav ul li { /*for home contacts etc*/ display: block; width: 100%; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(233, 196, 106, 0.16); text-align: left; } nav ul li:last-child { border-bottom: none; } nav ul li a { /*dropdown menu link color would be white*/ color: #fff; display: block; text-align: left; font-size: 19px; } /* NOTE: the login/account pill (.desktop-only-account) stays visible in .nav-icons at this breakpoint - it only moves into the #MenuItems dropdown (.mobile-account-item) below 550px, see that breakpoint further down this file. */ /* Reorder the navbar row: dropdown toggle on the far left (before the logo), logo next, wishlist/cart pinned to the far right. The dropdown itself (nav ul) is fixed/full-screen so its DOM/flex order doesn't matter for where IT sits - only for where the toggle button sits. */ .menu-icon { order: -2; width: 26px; height: 18px; margin-left: 0; margin-right: 16px; z-index: 2001; } .menu-icon-bar:nth-child(2) { top: 7.5px; } .menu-icon-bar:nth-child(3) { top: 15px; } .menu-icon.is-open .menu-icon-bar:nth-child(1), .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 7.5px; } .logo { order: -1; } nav { order: 0; } /* Scoped as ".navbar .nav-icons" so this beats the unconditional ".nav-icons { margin-left: 18px; }" rule defined later in this file - at equal specificity that later rule was winning and silently cancelling "margin-left: auto", which is why wishlist/cart weren't actually landing on the far right. */ .navbar .nav-icons { order: 1; margin-left: auto; } .menu-icon { /*we again call menu icon in smaller screen, before smaller screen, we set display none, means initially it was not visible for any screen, but now it will be visible for smaller screens as we set display to block*/ display: block; cursor: pointer; } } /* Tablet/large-phone tier - one more step down in padding and hamburger size between the 1060px dropdown breakpoint and the 550px account-item swap, so the shrink happens gradually instead of all at once. */ @media only screen and (max-width: 768px) { .header .container { padding-left: 16px; padding-right: 16px; } .navbar { padding: 18px 12px; } .menu-icon { width: 24px; height: 16px; } .menu-icon-bar:nth-child(2) { top: 6.5px; } .menu-icon-bar:nth-child(3) { top: 13px; } .menu-icon.is-open .menu-icon-bar:nth-child(1), .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 6.5px; } } /* Below 550px: move login/account off the visible navbar row and into the #MenuItems dropdown instead (still visible above this, down to the 1060px breakpoint, as .desktop-only-account in .nav-icons). */ @media only screen and (max-width: 550px) { .header .container { padding-left: 14px; padding-right: 14px; } .navbar { padding: 16px 10px; } .menu-icon { width: 22px; height: 15px; } .menu-icon-bar:nth-child(2) { top: 6px; } .menu-icon-bar:nth-child(3) { top: 12px; } .menu-icon.is-open .menu-icon-bar:nth-child(1), .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 6px; } .mobile-account-item { display: block; } .mobile-account-item a { color: var(--gold-bright); font-weight: 600; } /* Hide the desktop pill/avatar version so it isn't shown twice. Scoped as ".nav-icons .desktop-only-account" (not just ".desktop-only-account") so this has higher specificity than the unconditional .avatar-btn / .login-btn rules defined later in this file - otherwise those rules (which also set "display") win the cascade at equal specificity purely because they appear later in the stylesheet, and the login pill reappears despite this rule. */ .nav-icons .desktop-only-account { display: none; } } /* Very small phones (roughly 300px-400px wide) - the logo, hamburger icon and wishlist/cart icons are laid out at fixed desktop sizes above, which is too wide to fit comfortably on the narrowest phones. This shrinks everything in the same row without changing the layout/order set by the 1060px breakpoint above. Applies to every page that shares this navbar (index.php, search.php, premium.php, ...). */ @media only screen and (max-width: 400px) { .header .container { padding-left: 12px; padding-right: 12px; } .navbar { padding: 16px 6px; } .logo img { width: 92px; } .menu-icon { width: 20px; height: 14px; margin-right: 8px; } .menu-icon-bar:nth-child(2) { top: 5.5px; } .menu-icon-bar:nth-child(3) { top: 11px; } .menu-icon.is-open .menu-icon-bar:nth-child(1), .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 5.5px; } .nav-icons { gap: 6px; margin-left: 8px; } .icon-btn, .avatar-btn { width: 34px; height: 34px; } .icon-btn svg { width: 16px; height: 16px; } .icon-badge { min-width: 16px; height: 16px; font-size: 10px; } } /* Smallest phones (roughly 320px and below) - one more graduated step so the navbar doesn't stay pinned at the 400px-tier sizing all the way down to the narrowest supported screens. */ @media only screen and (max-width: 320px) { .header .container { padding-left: 10px; padding-right: 10px; } .navbar { padding: 14px 4px; } .logo img { width: 80px; } .menu-icon { width: 18px; height: 13px; margin-right: 6px; } .menu-icon-bar:nth-child(2) { top: 5px; } .menu-icon-bar:nth-child(3) { top: 10px; } .menu-icon.is-open .menu-icon-bar:nth-child(1), .menu-icon.is-open .menu-icon-bar:nth-child(3) { top: 5px; } } /* Stops the page underneath from scrolling while the full-screen dropdown menu is open (toggled on by menutoggle() in updatedIndex.php). */ body.nav-open-lock { overflow: hidden; } /*All prodcuts page*/ .row-2 { justify-content: space-between; /*create some space heading and selection panel*/ margin: 100px auto 50px; } select { border: 1px solid var(--gold); /*create red border around dropdown select panel*/ padding: 5px; } select:focus { outline: none; /*the issue was when create red border above, it shows red border but upon selecting other option it again becomes black, so we set outline none upon clicking and for clicking or tabing, focus is used*/ } .page-btn { margin: 0 auto 80px; } .page-btn span { /*desigining pages no button which we have made using span tag*/ display: inline-block; border: 1px solid var(--gold); margin-left: 10px; width: 40px; height: 40px; text-align: center; line-height: 40px; cursor: pointer; } .page-btn span:hover { /*adds hover effect to page btn*/ background: var(--gold); color: #ffff; } /*single product details*/ .single-product { margin-top: 80px; } .single-product .col-2 img { padding: 0; } .single-product .col-2 { padding: 20px; text-align: left; } .single-product select { /*styling size dropdown*/ display: block; padding: 10px; margin-top: 20px; } .single-product h4 { margin: 20px 0; font-size: 22px; font-weight: bold; } .single-product input { /*style no of products input*/ width: 50px; height: 40px; font-size: 20px; margin-right: 10px; border: 1px solid var(--gold); } input:focus { outline: none; } .single-product .fa { /*styling icon with product details h3*/ color: var(--gold); margin-left: 10px; } .small-img-row { display: flex; /*make all 4 images flexible*/ justify-content: space-between; /*this will make all 4 images to take equal available space in single line without any gap, mean 25% each col, and to place gap between each col, we call col below and made 24% so to have a gap*/ } .small-img-col { flex-basis: 24%; /*this will make each column to take 24% space and 1% gap*/ } .single-product .col-2 p { margin-left: 0px; } .single-product .col-2 h1 { margin-left: 0px; } /*Cart Items*/ .cart-page { margin: 80px auto; } table { width: 100%; /*takes full width of the web page*/ border-collapse: collapse; } .cart-info { display: flex; flex-wrap: wrap; } th { text-align: left; padding: 5px; color: white; background: var(--gold); font-weight: normal; } td { padding: 10px 5px; } td input { width: 40px; height: 30px; padding: 5px; } td a { color: var(--gold); font-size: 12px; } td img { width: 80px; height: 80px; margin-right: 10px; } td small { padding-left: 0px; margin-left: 0px; } .total-price { display: flex; justify-content: flex-end; /*put content with max width at the end, if flex start, then put content at start with max width as we mentioned max width below*/ } .total-price table { border-top: 3px solid var(--gold); width: 100%; max-width: 480px; } td:last-child { text-align: right; /*align all last column values to right, in our case, these are prices*/ } th:last-child { text-align: right; } /*account page*/ .account-page { padding: 50px 0; background: radial-gradient(var(--cream), var(--gold-mist)); } .form-container { /* in account page first column, we place an image, and in second coloumn we place form having following specs*/ background: #fff; width: 300px; height: 400px; position: relative; text-align: center; padding: 20px 0; margin: auto; box-shadow: 0 0 20px 0px rgba(0, 0, 0, 1); overflow: hidden; } .form-container span { font-weight: bold; padding: 0 10px; color: #555555; cursor: pointer; width: 100px; display: inline-block; } .form-btn { display: inline-block; } .form-container form { max-width: 300px; padding: 0 20px; position: absolute; top: 130px; transition: transform 1s; } form input { width: 100%; height: 30px; margin: 10px 0; padding: 0 10px; border: 1px solid #ccc; } form .btn { width: 100%; border: none; cursor: pointer; margin: 10px 0; } form .btn:focus { outline: none; } #LoginForm { left: -300px; } #RegForm { left: 0; } form a { font-size: 12px; } #Indicator { width: 100px; border: none; background: var(--gold); height: 3px; margin-top: 8px; transform: translateX(100px); transition: transform 1s; } /*----------media query for each and every item display on mobile or screen size less than 600px---------------*/ @media only screen and (max-width: 600px) { .row { /*this is the row which we have used in every section*/ text-align: center; /*when open on mobile, we make text in every row to be center align*/ } .col-2, .col-3, .col-4 { /*for all columns view on mobile, we want one column single line occupying 100% width we not want 3 or 4 in single line*/ flex-basis: 100%; } /*for single product detail page*/ .single-product .row { text-align: left; } .single-product .col-2 { padding: 20px; } .single-product h1 { font-size: 26px; line-height: 26px; } /*for cart page*/ .cart-info p { display: none; /*hide product name in smaller screen*/ } } /* Very small phones (roughly 300px-400px wide) - .col-2/.col-3/.col-4 and the footer columns all have a fixed min-width (300px/250px/200px) meant to keep columns readable on desktop. Below ~400px that min-width is wider than the viewport itself (after container padding), which forces the page to overflow horizontally. Dropping it to 0 here lets every column actually shrink to fit the phone's width; flex-basis:100% above already stacks them one per row so nothing gets cramped. */ @media only screen and (max-width: 400px) { .col-2, .col-3, .col-4, .footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4 { min-width: 0; } } /* Common Card Text Colors */ .card h2, .card h3, .card h4, .card1 h2, .card1 h3 { color: var(--gold-bright); } .card p { font-size: 14px; color: #ffffff; } /* Card 1 */ .card1 { display: block; position: relative; min-width: 200px; background-color: var(--navy); border-radius: 4px; padding: 32px 24px; margin: 12px; text-decoration: none; z-index: 0; overflow: hidden; } /* Card 2 */ .card2 { display: block; top: 0px; position: relative; min-height: 250px; background-color: var(--navy); border-radius: 4px; padding: 32px 24px; margin: 12px; text-decoration: none; z-index: 0; overflow: hidden; border: 1px solid var(--navy); } /* Card 3 */ .card3 { display: block; top: 0px; position: relative; max-width: 262px; background-color: var(--navy); border-radius: 4px; padding: 32px 24px; margin: 12px; text-decoration: none; overflow: hidden; border: 1px solid var(--navy); } /* Card 4 */ .card4 { display: block; top: 0px; position: relative; max-width: 262px; background-color: var(--navy); border-radius: 4px; padding: 32px 24px; margin: 12px; text-decoration: none; overflow: hidden; border: 1px solid var(--navy); } /* Remove all hover effects */ .card1:hover, .card2:hover, .card3:hover, .card4:hover { background-color: var(--navy); box-shadow: none; border: 1px solid var(--navy); } .card1:hover:before, .card2:hover:before, .card3:hover:before, .card4:hover:before { transform: none; } .card1:hover p, .card2:hover p, .card3:hover p, .card4:hover p { color: #ffffff; } .card1:hover h3, .card2:hover h3, .card3:hover h3, .card4:hover h3 { color: var(--gold-bright); } .card4:hover .go-corner { margin-right: 0; } .card4:hover .go-arrow { opacity: 0; } /*button card*/ .modal-footer { padding: 1rem 1.5rem 1.5rem; display: flex; justify-content: center; align-items: center; } .modal-footer [class*="btn-"] { margin-left: 0.99rem; } .btn-secondary, .btn-primary { padding: 0.5rem 1rem; font-weight: 500; border: 2px solid #e5e5e5; border-radius: 0.25rem; background-color: transparent; cursor: pointer; } .btn-primary { color: #fff; background-color: #1cc972; border-color: #1cc972; cursor: pointer; } .btn-secondary { color: #ffffff; background-color: var(--gold); border-color: var(--gold); cursor: pointer; } /* CATEGORY NAME*/ .overlay-text { color: var(--gold-bright); background-color: var(--navy-deep); text-align: center; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 8px; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: 0.01em; border-radius: 0 0 8px 8px; flex: 1; } .container-4 { max-width: 600px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #f9f9f9; } label { display: block; margin: 10px 0 5px; } input[type="text"], textarea { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; } textarea { resize: vertical; height: 150px; } .submit-btn { background-color: #333; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; } .submit-btn:hover { background-color: #555; } /* Extra Small Devices (phones, 320px and down) */ @media only screen and (max-width: 320px) { /* Styles for extra small mobile devices */ } /* Small Devices (phones, 321px and up) */ @media only screen and (min-width: 321px) and (max-width: 480px) { /* Styles for small mobile devices */ } /* Medium Devices (tablets, 481px and up) */ @media only screen and (min-width: 481px) and (max-width: 768px) { /* Styles for medium devices */ } /* Large Devices (desktops, 769px and up) */ @media only screen and (min-width: 769px) { /* Styles for large devices */ } .contact-box { width: 100%; max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; } .contact-box input, .contact-box textarea { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ddd; } .contact-box button { width: 100%; padding: 10px; background-color: #25d366; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } .contact-box button:hover { background-color: #128c7e; } .product-card { background: #000; border: 1px solid #333; border-radius: 16px; padding: 24px; width: 290px; text-align: center; color: #fff; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 6px 25px rgba(255, 215, 0, 0.2); } .product-name { font-size: 30px; color: var(--gold-bright); margin-bottom: 10px; text-transform: uppercase; } .product-details { font-size: 14px; color: #ccc; line-height: 1.5; margin-bottom: 10px; } .product-price { font-size: 20px; color: var(--mint); margin-bottom: 10px; } .slogan-bar { width: 100%; background: linear-gradient(90deg, #1a1a2e, #16213e); overflow: hidden; white-space: nowrap; padding: 10px 0; position: relative; z-index: 999; } .slogan-track { display: inline-block; animation: scrollSlogans 28s linear infinite; } .slogan-bar:hover .slogan-track { animation-play-state: paused; /* Pauses on hover */ } .slogan-item { display: inline-block; color: var(--gold-bright); font-size: 16px; font-weight: bolder; letter-spacing: 0.5px; padding: 0 50px; } .slogan-item::after { content: "|"; margin-left: 50px; color: rgba(233, 196, 106, 0.35); } .slogan-item:last-child::after { content: ""; } @keyframes scrollSlogans { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); /* -50% because items are duplicated */ } } @media (max-width: 600px) { .slogan-item { font-size: 12px; padding: 0 30px; } } /* ========================================================================== NAV ICONS — wishlist / cart / account These classes were referenced in main.php's markup but never had rules, so they rendered as bare unstyled links. Styled to match the new theme. ========================================================================== */ .nav-icons { display: flex; align-items: center; gap: 10px; margin-left: 18px; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(15, 27, 51, 0.05); color: var(--navy); transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; } .icon-btn svg { width: 20px; height: 20px; } .icon-btn:hover { background: var(--navy); color: var(--gold-bright); transform: translateY(-2px); } .icon-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; } .avatar-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.2s ease; } .avatar-btn:hover { transform: translateY(-2px); } .login-btn { display: inline-block; padding: 9px 26px; border-radius: 30px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); font-weight: 600; transition: transform 0.25s ease, box-shadow 0.25s ease; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184, 134, 59, 0.35); } /* ========================================================================== PRODUCT CARD — redesigned with wishlist + add-to-cart controls ========================================================================== */ .product-card { position: relative; background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep)); border: 1px solid rgba(233, 196, 106, 0.18); border-radius: 18px; padding: 30px 22px 24px; width: 100%; max-width: 300px; margin: 0 auto; text-align: center; color: #fff; box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(233, 196, 106, 0.18); border-color: rgba(233, 196, 106, 0.45); } .card-badge { position: absolute; top: 16px; left: 16px; background: rgba(233, 196, 106, 0.12); color: var(--gold-bright); border: 1px solid rgba(233, 196, 106, 0.35); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } /* Diagonal "Premium" corner ribbon, adapted from the Uiverse card in premium.css for use on the premium products page. Renamed from the original .card/.card span to .premium-ribbon so it doesn't collide with the sitewide .card class already used above (same reasoning as .pager-btn vs .page-btn in premium.css) and scoped to sit inside the existing .product-card instead of replacing it, so wishlist + add-to- cart keep working unchanged. The ribbon keeps its original orange/gold gradient on purpose, same call already made for the pagination buttons: this accent flags "Premium" specifically, it isn't the page's navy/gold theme. Use this OR .card-badge on a given card, not both - they occupy the same corner. */ .premium-ribbon { position: absolute; overflow: hidden; width: 120px; height: 110px; top: -10px; left: -10px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } .premium-ribbon::before { content: "Premium"; position: absolute; width: 100%; height: 20px; background-image: linear-gradient( 45deg, #ff6547 0%, #ffb144 51%, #ff7053 100% ); transform: rotate(-45deg) translateY(-20px); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23); } .premium-ribbon::after { content: ""; position: absolute; width: 5px; bottom: 0; left: 0; height: 5px; z-index: -1; box-shadow: 140px -140px #cc3f47; background-image: linear-gradient( 45deg, #ff512f 0%, #f09819 51%, #ff512f 100% ); } .wishlist-form { position: absolute; top: 10px; right: 10px; } .wishlist-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(233, 196, 106, 0.35); background: rgba(10, 18, 38, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, border-color 0.25s ease; } .wishlist-toggle svg { width: 18px; height: 18px; stroke-width: 2.4; } .wishlist-toggle:hover { transform: scale(1.08); border-color: rgba(233, 196, 106, 0.8); } .wishlist-toggle.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); } .product-content { margin-top: 18px; } /* No image slot existed on this card before - add a simple square frame so a real product photo has somewhere consistent to sit. Crops via object-fit so odd source image sizes don't distort the square. */ .product-image { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 14px; background: linear-gradient(160deg, rgba(233, 196, 106, 0.16), rgba(10, 18, 38, 0.4)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-name { font-size: 27px; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 8px; } .product-details { font-size: 13px; color: rgba(255, 255, 255, 0.65); line-height: 1.5; margin-bottom: 10px; } .product-price { font-size: 21px; font-weight: 600; color: var(--mint) !important; margin-bottom: 14px; } .inline-form { margin: 0; } .modal-footer-cart { padding: 0 0 10px; } .modal-footer-cart .inline-form { width: 100%; } .modal-footer-cart [class*="btn-"] { margin-left: 0; } .btn-cart { display: block; width: 100%; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy-deep); border: none; padding: 0.6rem 1rem; border-radius: 24px; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-cart:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(233, 196, 106, 0.3); } .btn-in-cart { display: block; width: 100%; background: rgba(45, 212, 167, 0.12); color: var(--mint); border: 1px solid rgba(45, 212, 167, 0.4); padding: 0.6rem 1rem; border-radius: 24px; font-weight: 600; font-size: 14px; text-decoration: none; } .modal-footer-contact { padding: 12px 0 0; gap: 10px; } .modal-footer-contact [class*="btn-"] { margin-left: 0; font-size: 13px; padding: 0.45rem 0.9rem; } /* ========================================================================== RESPONSIVE PRODUCT GRID Applied alongside the legacy .row/.col-4 classes so other pages that still rely on them are unaffected — this rule simply wins the cascade for sections that opt in with .products-grid. ========================================================================== */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; justify-content: center; } .products-grid .col-4 { flex-basis: auto; min-width: 0; width: 100%; margin-bottom: 0; } /* Laptop and down: 4 → 3 → 2 → 1 columns. Breakpoints reuse widths already established elsewhere in this file instead of inventing new ones - 1060px is where the navbar already collapses to a hamburger, 768px is the existing tablet/footer tier, and 480px is the single-column tier this rule already had. */ @media only screen and (max-width: 1060px) { .products-grid { grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 768px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 480px) { .products-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } } /* ========================================================================== ACCESSIBILITY & MOTION ========================================================================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== HERO / HEADING RESPONSIVE POLISH ========================================================================== */ @media only screen and (max-width: 480px) { .col-2 h1 { font-size: 34px; line-height: 42px; margin: 16px; } .col-2 p { margin-left: 16px; } .btn { margin-left: 16px; } } @media only screen and (max-width: 400px) { .col-2 h1 { font-size: 26px; line-height: 34px; margin: 12px; } .col-2 p { margin-left: 12px; font-size: 14px; } .btn { margin-left: 12px; padding: 8px 22px; } } /* ========================================================================== CART & WISHLIST PAGES ========================================================================== */ .page-hero-header { padding-bottom: 40px; } .page-hero-content { text-align: center; padding-top: 30px; } .page-hero-content .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; color: var(--gold-deep); margin-bottom: 8px; } .page-hero-content h1 { font-family: "Playfair Display", "Poppins", serif; font-size: 40px; color: var(--navy); margin-bottom: 8px; } .page-hero-content .subtext { color: var(--muted); } .list-page { padding: 50px 0 90px; } .list-page .container { max-width: 860px; } .item-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep)); border: 1px solid rgba(233, 196, 106, 0.18); border-radius: 16px; padding: 22px 26px; margin-bottom: 18px; color: #fff; flex-wrap: wrap; transition: border-color 0.25s ease, transform 0.25s ease; } .item-card:hover { border-color: rgba(233, 196, 106, 0.4); transform: translateY(-2px); } .item-main { display: flex; flex-direction: column; gap: 8px; min-width: 220px; } .item-number { font-family: "Playfair Display", "Poppins", serif; font-size: 24px; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.02em; } .item-meta { font-size: 13px; color: rgba(255, 255, 255, 0.65); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .item-badge { position: static; } .item-price { font-size: 17px; font-weight: 600; color: var(--mint); } .item-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn-contact { background: rgba(37, 211, 102, 0.12); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.4); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 0.25s ease, color 0.25s ease; } .btn-contact:hover { background: #25d366; color: #fff; } .btn-remove { background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .btn-remove:hover { background: rgba(220, 60, 60, 0.18); border-color: rgba(220, 60, 60, 0.45); color: #ff9c9c; } .btn-move { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy-deep); border: none; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; font-size: 13px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-move:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(233, 196, 106, 0.3); } .empty-list { text-align: center; padding: 70px 20px; background: rgba(15, 27, 51, 0.04); border-radius: 16px; color: var(--muted); } .empty-list p { margin-bottom: 8px; } .empty-list a { color: var(--gold-deep); font-weight: 600; } .list-summary { display: flex; justify-content: space-between; align-items: center; background: var(--navy-deep); color: #fff; padding: 22px 26px; border-radius: 16px; margin-top: 16px; flex-wrap: wrap; gap: 16px; } .list-summary p { color: rgba(255, 255, 255, 0.65); font-size: 13px; } .list-summary .total { font-size: 22px; font-weight: 700; color: var(--gold-bright); } .list-summary-cta { padding: 10px 24px; width: auto; } @media only screen and (max-width: 600px) { .item-card { flex-direction: column; align-items: flex-start; } .item-actions { width: 100%; } .list-summary { flex-direction: column; align-items: flex-start; } } /* =========================== Responsive Footer =========================== */ @media only screen and (max-width: 768px) { .footer { padding: 45px 20px 20px; text-align: center; } .footer .row { flex-direction: column; align-items: center; gap: 30px; } .footer-col-1, .footer-col-2, .footer-col-3, .footer-col-4 { flex: 0 0 100%; width: 100%; min-width: 0; margin-bottom: 0; text-align: center; } .footer-col-2 img { width: 150px; margin: 0 auto 15px; display: block; } .app-logo { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 15px; } .app-logo img { width: 120px; max-width: 45%; } .footer ul { padding: 0; margin: 0; } .footer ul li { margin: 8px 0; } .copyright { display: block; font-size: 13px; line-height: 1.6; padding: 15px 10px 0; word-break: break-word; } } /* Extra small phones */ @media only screen and (max-width: 480px) { .footer { padding: 35px 15px 15px; } .footer h3 { font-size: 18px; margin-bottom: 12px; } .footer p, .footer li { font-size: 14px; line-height: 1.6; } .footer-col-2 img { width: 130px; } .app-logo img { width: 105px; } .copyright { font-size: 12px; } } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } img { max-width: 100%; height: auto; } .container, .small.container, .footer, .row { max-width: 100%; }