/* Theme Name: OFFLIMIT Author: ImagineStudio Author URI: https://imaginestudio.me/ Description: This is a custom e-commerce theme developed for OFFLIMIT by ImagineStudio. Version: 1.0 Text Domain: OFFLIMIT This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* PHP */ /* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"); @font-face { font-family: "Hellix"; src: url("fonts/hellix/Hellix-Regular.ttf"); } @font-face { font-family: "Atacama"; src: url("fonts/atacama/atacama.otf"); } ::-webkit-scrollbar { display: none; } :root { --footer-gap: 2rem; --sGap: 0.1rem; --xxxsFont: 0.6rem; --xxsFont: 0.7rem; --xsFont: 0.8rem; --smFont: 0.9rem; --smdFont: 1.1rem; --mdFont: 1.5rem; --bgFont: 1.8rem; --lgFont: 3rem; --pill: 50px; --header-h: 64px; } /* ── Smart Header ── */ #site-header-wrap { will-change: transform; } /* Pages that DON'T have a hero image bleeding under the header (shop, product, archive, search, etc.) get a top offset so content isn't hidden. Add class="page-has-no-hero" to from the relevant page templates, OR use the generic fallback below. */ body:not(.home) #page, body.woocommerce #page, body.woocommerce-page #page, body.search-results #page { /* padding-top: var(--header-h); */ } h1, h2, h3, h4, h5, h6 { /* font-family: "Montserrat-Bold", Arial, Helvetica, "sans-serif"; text-transform: uppercase; */ } a { text-decoration: none; } p { font-size: 14px; } body { font-family: "Hellix", "sans-serif"; font-weight: 400; color: #1b1b1b; background: #f8f8f8; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /* Hides the default browser arrow in Safari/Chrome */ summary::-webkit-details-marker { display: none; } /* Page Headings */ .pg-head{ font-family: "Atacama", Arial, "sans-serif"; } /* Page Btns */ .light-page-btn { display: block; max-width: fit-content; font-family: "Hellix", Arial, "sans-serif"; font-size: 14px; font-weight: 400; transition: 0.3s ease; color: white; overflow: hidden; position: relative; } .light-page-btn::after{ content: ''; width: 100%; height: 1px; background-color: white; display: block; margin-top: 2px; transition: 0.3s ease; } .light-page-btn:hover::after { transition: 0.3s ease; transform: translateX(100%); } /* Dark Page button */ .dark-page-btn { display: block; max-width: fit-content; font-family: "Hellix", Arial, "sans-serif"; font-size: 14px; font-weight: 400; transition: 0.3s ease; color: black; overflow: hidden; position: relative; } .dark-page-btn::after{ content: ''; width: 100%; height: 1px; background-color: black; display: block; margin-top: 2px; transition: 0.3s ease; } .dark-page-btn:hover::after { transition: 0.3s ease; transform: translateX(100%); } /* Menu Link */ .menu-link { display: block; max-width: fit-content; font-family: "Hellix", Arial, "sans-serif"; font-weight: 400; transition: 0.3s ease; overflow: hidden; position: relative; } .menu-link::after{ content: ''; width: 0%; height: 1px; background-color: black; display: block; margin-top: 2px; transition: 0.3s ease; } .menu-link:hover::after { transition: 0.3s ease; width: 100%; } /* Commerce Btns */ .dark-btn { display: block; /* max-width: fit-content; */ background-color: #33383c; font-family: "Helvetica", Arial, "sans-serif"; font-size: 14px; font-weight: 400; text-transform: capitalize; color: white; padding: 15px 45px; border: none; border-radius: 5px; transition: 0.3s ease; } .dark-btn:hover { background-color: grey; color: white; transition: 0.3s ease; } .grey-btn { display: block; max-width: fit-content; background-color: #e7e7e7; font-family: "Montserrat-Bold", Arial, Helvetica, "sans-serif"; font-size: 13px; text-transform: uppercase; color: #444444; padding: 3px 45px; border: none; border-radius: 50px; transition: 0.3s ease; } .grey-btn:hover { background-color: #444444; color: #e7e7e7e7; transition: 0.3s ease; } .light-btn { display: block; max-width: fit-content; background-color: white; font-family: "Helvetica", Arial, "sans-serif"; font-size: 16px; font-weight: 500; text-transform: capitalize; color: #33383c; padding: 20px 45px; border: none; border-radius: 50px; transition: 0.3s ease; } .light-btn:hover { background-color: grey; color: white; transition: 0.3s ease; } .trans-btn { display: block; width: 100%; background-color: white; font-family: "Helvetica", Arial, "sans-serif"; font-size: 14px; font-weight: 400; text-transform: capitalize; color: #33383c; padding: 14px 45px; border: 1px solid grey; border-radius: 5px; transition: 0.3s ease; cursor: pointer; } .trans-btn:hover { background-color: #33383c; color: white; transition: 0.3s ease; } /* Checkout */ .select-dropdown select{ appearance: none !important; outline: none; } /* Checkout Field Validation Styling */ .woocommerce-checkout .woocommerce-invalid .checkout-field-wrapper { outline-color: #e2401c !important; } .woocommerce-checkout .woocommerce-invalid .my-label { color: #e2401c !important; } .woocommerce-checkout .woocommerce-invalid .my-label span.error { display: block; font-weight: 400; margin-top: 2px; font-size: 13px; } .woocommerce-checkout .my-label span.error { display: none; } /* Suppress default WooCommerce input errors to keep the design clean */ .woocommerce-checkout .woocommerce-invalid input, .woocommerce-checkout .woocommerce-invalid select, .woocommerce-checkout .woocommerce-invalid textarea { border-color: transparent !important; outline: none !important; box-shadow: none !important; } .woocommerce-notices-wrapper{ display: none; } .woocommerce-message{ display: none; } .woocommerce-NoticeGroup{ display: none; } .form-row-first, .form-row-last{ width: 50% !important; } .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price { color: unset; font-size: unset; } /* Skeleton Loader */ /* --- WooCommerce Image Skeleton Loader --- */ .wc-image-skel { position: relative !important; overflow: hidden !important; background-color: #f6f6f6; width: 100%; aspect-ratio: 3 / 4; display: block; z-index: 1; } /* Ensure absolute versions (like hover images) stay absolute */ .wc-image-skel.absolute { position: absolute !important; } .wc-image-skel img { opacity: 0 !important; transition: opacity 0.5s ease-in-out !important; display: block; width: 100%; height: 100%; object-fit: cover; } .wc-image-skel::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) ); animation: wc_shimmer 2s infinite; z-index: 2; } @keyframes wc_shimmer { 100% { transform: translateX(100%); } } .wc-image-skel.loaded::after { display: none !important; } .wc-image-skel.loaded img { opacity: 1 !important; } .wc-forward{ padding: 0px !important; margin: 0px !important; background-color: transparent !important; color: inherit !important; text-decoration: underline !important; }