/************************************************************************************** VARIABLES */ /************************************************************************************** VARIABLES */ /************************************************************************************** VARIABLES */ :root { /* color-scheme: dark; */ /* --box-shadow-color: rgb(136, 0, 255); */ --box-shadow-color: rgb(92, 53, 106); --header-height-desktop: 138px; --header-height-tablet: 116px; --header-height-mobile: 50px; --logo-pad-bot-desktop: 0px; --logo-pad-bot-tablet: 2px; --logo-pad-bot-mobile: 0px; --purple-font-color: rgb(157, 0, 255); --white-font-color: #f0f0f0; --width-text: 720px; --width-video: 1100px; --width-donate: 1100px; --width-merch: 1100px; /************************************************************* PURPLE SEC */ --background-color-purple-sec: linear-gradient(to right, rgb(47, 14, 64) 100%); --background-color-purple-sec: linear-gradient(to right, rgb(0, 11, 111) 0%, rgb(23, 12, 87) 10%, rgb(47, 14, 64) 30%, rgb(47, 14, 64) 70%, rgb(87, 12, 32) 90%, rgb(127, 11, 0) 100%); --background-color-purple-sec: linear-gradient(to right, rgb(0, 11, 111) 0%, rgb(23, 12, 87) 20%, rgb(47, 14, 64) 40%, rgb(47, 14, 64) 60%, rgb(73, 7, 32) 80%, rgb(99, 0, 0) 100%); --background-color-purple-sec-mobile: linear-gradient(to right, rgb(38, 13, 73) 0%, rgb(47, 14, 64) 50%, rgb(47, 14, 64) 50%, rgb(57, 14, 56) 100%); --background-image-stars: url('../images/background-stars-01.png'); /************************************************************* BLACK SEC */ --background-color-black-sec: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), #000; --background-color-black-sec-loading-spinner: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), linear-gradient(to bottom, rgba(47, 14, 64,0.5) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.5) 100%), #000; /* --background-color-black-sec: radial-gradient(ellipse 40% 100% at 0% 0%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 22%, transparent 50%), radial-gradient(ellipse 40% 100% at 100% 0%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 22%, transparent 50%), radial-gradient(ellipse 40% 100% at 0% 100%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 22%, transparent 50%), radial-gradient(ellipse 40% 100% at 100% 100%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 22%, transparent 50%), linear-gradient(to bottom, rgba(67, 20, 91, 0.3) 0%, rgba(0, 0, 0,0) 50%, rgba(0, 0, 0,0) 50%, rgba(67, 20, 91,0.3) 100%), #000; */ /* --background-color-black-sec: radial-gradient(ellipse 40% 100% at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 15%, transparent 50%), radial-gradient(ellipse 40% 100% at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 15%, transparent 50%), radial-gradient(ellipse 40% 100% at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 15%, transparent 50%), radial-gradient(ellipse 40% 100% at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 15%, transparent 50%), linear-gradient(to bottom, rgba(67, 20, 91, 0.4) 0%, rgba(0, 0, 0,0) 50%, rgba(0, 0, 0,0) 50%, rgba(67, 20, 91,0.4) 100%), url('../images/background-stripes-04.png'); */ --background-color-black-sec-mobile: linear-gradient(to bottom, rgba(47, 14, 64,0.4) 0%, rgba(17, 5, 23,1) 30%, rgba(17, 5, 23,1) 70%, rgba(47, 14, 64,0.3) 100%), rgb(17, 5, 23); --background-color-black-sec-mobile: radial-gradient(circle at 0% 0%, rgba(38, 13, 73,0.5) 0%, rgba(17, 5, 23, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(57, 14, 56,0.4) 0%, rgba(17, 5, 23, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(38, 13, 73,0.5) 0%, rgba(17, 5, 23, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(57, 14, 56,0.4) 0%, rgba(17, 5, 23, 0.2) 12%, transparent 35%), rgb(23, 8, 35); /* --background-color-black-sec-mobile: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), rgb(17, 5, 23); */ /************************************************************* FLAG SEC */ /* --background-color-flag-sec: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), #000; */ /* --background-color-flag-sec: url('../images/background-donkey-08.png'), url('../images/background-elephant-08.png'), radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.4) 0%, rgba(0, 11, 111, 0.2) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.3) 0%, rgba(127, 11, 0, 0.1) 12%, transparent 35%), #000; */ --background-color-flag-sec: url('../images/background-donkey-09.png'), url('../images/background-elephant-09.png'), #000; /************************************************************* DONATE SEC */ /* Before Fade Effect */ --background-color-black-sec-donate-xxxxxxxxxxxxxxxxxx: url('../images/donate-captain-99-04.png'), radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; /* For Fade Effect */ --background-images-donate: url('../images/donate-captain-99-04.png'); /* For Fade Effect */ --background-gradients-donate: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; --background-color-black-sec-donate-mobile: url('../images/donate-captain-99-mobile-04.png'), rgb(17, 5, 23); --background-color-black-sec-donate-mobile: url('../images/donate-captain-99-mobile-04.png'), radial-gradient(circle at 0% 0%, rgba(38, 13, 73,0.5) 0%, rgba(17, 5, 23, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(57, 14, 56,0.4) 0%, rgba(17, 5, 23, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(38, 13, 73,0.5) 0%, rgba(17, 5, 23, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(57, 14, 56,0.4) 0%, rgba(17, 5, 23, 0.2) 12%, transparent 35%), rgb(23, 8, 35); /************************************************************* MAIN MISSION SEC */ /* Before Fade Effect */ --background-color-black-sec-main-mission-xxxxxxxxxxxxxxxxxx: url('../images/main-mission-1950s-02.png'), url('../images/main-mission-2020s-02.png'), radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; /* For Fade Effect */ --background-images-main-mission: url('../images/main-mission-1950s-02.png'), url('../images/main-mission-2020s-02.png'); /* For Fade Effect */ --background-gradients-main-mission: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), #000; --background-color-black-sec-main-mission-tablet: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; /************************************************************* MINI MISSION SEC */ /* Before Fade Effect */ --background-color-black-sec-mini-mission-xxxxxxxxxxxxxxxxx: url('../images/mini-mission-background-guitar-left-01.png'), url('../images/mini-mission-background-guitar-right-01.png'), radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; /* For Fade Effect */ --background-images-mini-mission: url('../images/mini-mission-background-guitar-left-01.png'), url('../images/mini-mission-background-guitar-right-01.png'); /* For Fade Effect */ --background-gradients-mini-mission: radial-gradient(circle at 0% 0%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 0%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), radial-gradient(circle at 0% 100%, rgba(0, 11, 111,0.5) 0%, rgba(0, 11, 111, 0.3) 12%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(127, 11, 0,0.4) 0%, rgba(127, 11, 0, 0.2) 12%, transparent 35%), /* linear-gradient(to bottom, rgba(47, 14, 64,0.3) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,0) 70%, rgba(47, 14, 64,0.3) 100%), */ #000; --background-color-black-sec-town-square-xxx: linear-gradient(to right, rgba(0, 11, 111, 0.5) 0%, rgba(0, 11, 111, 0.2) 25%, transparent 40%), linear-gradient(to left, rgba(127, 11, 0, 0.4) 0%, rgba(127, 11, 0, 0.15) 25%, transparent 40%), /* linear-gradient(to bottom, rgba(47, 14, 64, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(47, 14, 64, 0.3) 100%), */ #000; --background-color-black-sec-town-square: linear-gradient(to right, rgba(0, 11, 111, 0.5) 0%, rgba(0, 11, 111, 0) 35%, transparent 50%), linear-gradient(to left, rgba(127, 11, 0, 0.4) 0%, rgba(127, 11, 0, 0) 35%, transparent 50%), /* linear-gradient(to bottom, rgba(47, 14, 64, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(47, 14, 64, 0.3) 100%), */ #000; } /************************************************************************************** VIDEO EMBED - FOLLOW UP - TEMP BEFORE YOU TUBE*/ /************************************************************************************** VIDEO EMBED - FOLLOW UP - TEMP BEFORE YOU TUBE*/ /************************************************************************************** VIDEO EMBED - FOLLOW UP - TEMP BEFORE YOU TUBE*/ .video-container { text-align: center; margin: 0px auto; max-width: 1000px; } .video-thumbnail { cursor: pointer; max-width: 1000px; width: 100%; border-radius: 8px; transition: transform 0.2s; } /* .video-thumbnail:hover { transform: scale(1.02); } */ #videoPlayer { display: none; width: 100%; max-width: 1000px; border-radius: 8px; } /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /*********************************************************************************************************************** HTML - HEADER - BODY - FOOTER */ /************************************************************************************** HTML */ /************************************************************************************** HTML */ /************************************************************************************** HTML */ html { scroll-behavior: smooth; margin: 0; /* Remove default margin */ height: 100%; /* added to make sign up, force footer to bottom */ } /************************************************************************************** BODY */ /************************************************************************************** BODY */ /************************************************************************************** BODY */ body { /* Adjust based on header height to prevent content overlap */ /* padding-top: var(--header-height-desktop); */ padding-top: calc(var(--header-height-desktop) - 3px); /* padding-top: 138px; */ text-align: center; background-color: #000000; /* background: var(--background-color-purple-sec); */ /* background: #8b4a4a; */ /* background: var(--background-color-black-sec-loading-spinner); */ color: white; color: #f0f0f0; margin: 0; overflow-x: hidden; /* Prevent horizontal scrolling */ font-family: 'font-roboto-regular', sans-serif; } /* Prevent layout shift when modal opens - for Share Pop-Up */ body.modal-open { overflow: hidden; overflow-y: scroll; /* Keep scrollbar visible */ } @media (max-width: 768px) { body { padding-top: var(--header-height-tablet); /* Adjust based on header height to prevent content overlap */ /* padding-left: 16px; padding-right: 16px; */ } } @media (max-width: 540px) { body { /* background: var(--background-color-purple-sec-mobile); */ background: #000000; padding-top: var(--header-height-mobile); /* Adjust based on header height to prevent content overlap */ /* padding-left: 16px; padding-right: 16px; */ } } /************************************************************************************** HEADER */ /************************************************************************************** HEADER */ /************************************************************************************** HEADER */ header { position: fixed; top: 0; left: 0; width: 100%; /* background: rgb(47, 14, 64); */ /* background: linear-gradient(to right, rgb(0, 11, 111) 0%, rgb(23, 12, 87) 10%, rgb(47, 14, 64) 30%, rgb(47, 14, 64) 70%, rgb(87, 12, 32) 90%, rgb(127, 11, 0) 100%); */ background: var(--background-color-purple-sec); padding: 10px 0px 5px 0px; box-shadow: 0 2px 3px var(--box-shadow-color); /* Optional: Adds a shadow */ box-shadow: 0 1px 0px var(--box-shadow-color); /* Optional: Adds a shadow */ z-index: 9999; /* Ensures it stays above other elements */ text-align: center; color: white; color: #f0f0f0; display: flex; align-items: center; justify-content: space-between; /* iOS Safari fix - prevents header jumping when address bar hides/shows DOES NOT WORK - maybe delete */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; backface-visibility: hidden; /* height: 2000px */ /* transform: translate3d(0, 0, 0); */ } /* Fade in header when loaded NOTE: Not using anymore, since entire site fades in after loading spinner*/ header-xxx { opacity: 0; /* box-shadow: none !important; */ overflow: hidden; animation: fadeInHeader 0.3s ease 0.3s forwards; /* animation: fadeInHeader 0.7s ease forwards; */ } @keyframes fadeInHeader-xxx { from { opacity: 0; /* box-shadow: none; */ } to { opacity: 1; /* box-shadow: 0 2px 3px var(--box-shadow-color); */ } } /* Mobile only - Header hide/show on scroll */ @media (max-width: 768px) { /* Header transition for smooth hide/show */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transition: transform 0.3s ease-in-out; transform: translateY(0); } /* Hide header when scrolling down */ header.header-hidden { transform: translateY(-100%); box-shadow: none; } /* Show header when scrolling up */ header.header-visible { transform: translateY(0); } /* Optional: Add shadow when header reappears for better visibility */ header-xxx.header-visible { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } /* Make sure menus stay below the header */ .main-menu-xxx, .account-menu-xxx { top: 100%; /* Adjust based on your header height */ } } @media (max-width: 540px) { header { background: var(--background-color-purple-sec-mobile); padding: 5px 0px 0px 0px; /* Adjust the padding for phone devices */ /* box-shadow: 0 2px 3px var(--box-shadow-color); */ /* height: var(--header-height-mobile); */ } } /* Header clickable elements hover effect */ /* add .join-us-text if need to */ .logo a, .main-menu-link a, .account-menu-link a{ transition: opacity 0.2s ease; } /* add .join-us-text:hover if need to */ /* .logo a:hover, .main-menu-link a:hover, .account-menu-link a:hover{ opacity: 0.7; cursor: pointer; } */ /* Desktop: opacity on hover */ @media (min-width: 769px) { .logo a:hover, .main-menu-link a:hover, .account-menu-link a:hover { opacity: 0.7; cursor: pointer; } } /* Mobile/Tablet: opacity on active (tap/click) */ @media (max-width: 768px) { .logo a:active, .main-menu-link a:active, .account-menu-link a:active { opacity: 0.7; } } /************************************************************************************** FOOTER */ /************************************************************************************** FOOTER */ /************************************************************************************** FOOTER */ .footer { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ color: white; color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; /* background: rgb(47, 14, 64); background-image: url('../images/stars-black-01.png'); background-repeat: repeat; */ background-image: var(--background-color-purple-sec), var(--background-image-stars); background-blend-mode: overlay; background-attachment: scroll, /* image */ fixed; /* radial gradient 1 */ margin-bottom: 0; /* Ensure no margin below the footer */ } /* Footer Navigation Styles */ .footer-nav { margin: 0 auto; } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; } .footer-nav li { display: inline-block; } /* .footer-nav li:not(:last-child)::after { content: "|"; margin-left: 12px; color: rgba(240, 240, 240, 0.3); } */ .footer-nav a { color: var(--white-font-color); text-decoration: none; font-family: 'font-roboto-regular', sans-serif; font-size: 16px; letter-spacing: 0.5px; transition: color 0.3s ease; padding: 4px 8px; display: inline-block; } .footer-nav a:hover { color: var(--purple-font-color); } /* Footer Secondary Navigation Styles */ .footer-nav-secondary { margin: 0 auto; } .footer-nav-secondary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; } .footer-nav-secondary li { display: inline-block; } .footer-nav-secondary li:not(:last-child)::after { content: "|"; margin-left: 12px; /* color: rgba(240, 240, 240, 0.3); */ color: rgba(240, 240, 240, 0.7); } .footer-nav-secondary a { color: rgba(240, 240, 240, 0.7); text-decoration: none; font-family: 'font-roboto-regular', sans-serif; font-size: 14px; letter-spacing: 0.3px; transition: color 0.3s ease; padding: 3px 6px; display: inline-block; } .footer-nav-secondary a:hover { color: var(--purple-font-color); } .container-footer-TEMP { display: flex; flex-wrap: wrap; /* Allows wrapping */ gap: 10px 20px; /* First value = vertical spacing, second = horizontal */ } .container-footer { max-width: 1200px; /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 16px; padding-bottom: 8px; padding-left: 24px; padding-right: 24px; margin-top: 0; margin-bottom: 0; /*display: flex; gap: 10px; Adjust spacing as needed */ /*line-height: 3; Adjust line height to control vertical spacing between wrapped text */ } .container-footer-flex { display: flex; flex-wrap: wrap; /* Allows wrapping */ justify-content: center; gap: 12px 20px; /* First value = vertical spacing, second = horizontal */ max-width: 1200px; /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; /*display: flex; gap: 10px; Adjust spacing as needed */ /*line-height: 3; Adjust line height to control vertical spacing between wrapped text */ } a { text-decoration: none; } .container-footer-flex a { display: inline-block; /* Needed for transition to work properly */ transition: opacity 0.2s ease; } .container-footer-flex a:hover { opacity: 0.7; } .social-icon-TEMP { display: block; margin-bottom: 15px; /* Adds vertical spacing */ } .social-icon { width: 60px; /* Adjust the size as needed */ height: auto; margin: 5px 5px; /* Space between icons */ vertical-align: middle; /*Align icons with text */ } @media (max-width: 540px) { .footer { background-image: var(--background-color-purple-sec-mobile), var(--background-image-stars); background-blend-mode: overlay; } .footer-nav a { font-size: 14px; padding: 3px 6px; } .footer-nav ul { gap: 6px 16px; } .footer-nav-secondary a { font-size: 14px; padding: 2px 4px; } .footer-nav-secondary ul { gap: 4px 12px; } } /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /*********************************************************************************************************************** SECTIONS - CONTAINERS */ /************************************************************************************** SECTION - SCROLL TO ANCHOR */ /************************************************************************************** SECTION - SCROLL TO ANCHOR */ /************************************************************************************** SECTION - SCROLL TO ANCHOR */ /* So menu Auto Scroll adjusts for header height */ /* Adjust based on your header height */ section { /* scroll-margin-top: var(--header-height-desktop); */ /* scroll-margin-top: 136px; */ scroll-margin-top: calc(var(--header-height-desktop) - 3px); } @media (max-width: 768px) { section { scroll-margin-top: var(--header-height-tablet); } } /* @media (max-width: 480px) { */ @media (max-width: 540px) { section { scroll-margin-top: calc(var(--header-height-mobile) + 0px); } } /* When header is hidden, remove the scroll margin */ @media (max-width: 768px) { body.header-is-hidden section { scroll-margin-top: 0 !important; } } @media (max-width: 540px) { body.header-is-hidden section { scroll-margin-top: 0 !important; } } /************************************************************************************** SECTION - BLACK */ /************************************************************************************** SECTION - BLACK */ /************************************************************************************** SECTION - BLACK */ .full-width-section-black { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ background:rgb(12, 12, 12); background: #000000; color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; background: var(--background-color-black-sec); } @media (max-width: 540px) { .full-width-section-black { background: var(--background-color-black-sec-mobile); } } .background-color-only-black-sec { background: var(--background-color-black-sec); flex: 1; /* ADD THIS LINE - makes it fill available space */ display: flex; flex-direction: column; } .background-color-only-black-sec-town-square { background: var(--background-color-black-sec-town-square); flex: 1; /* ADD THIS LINE - makes it fill available space */ display: flex; flex-direction: column; } @media (max-width: 540px) { .background-color-only-black-sec { background: var(--background-color-black-sec-mobile); } .background-color-only-black-sec-town-square { background: var(--background-color-black-sec-mobile); } } #sign-in-page #auth-form-placeholder, #sign-up-page #auth-form-placeholder { width: 100%; max-width: 400px; } #sign-in-page .background-color-only-black-sec, #sign-up-page .background-color-only-black-sec { flex: 1; display: flex; flex-direction: column; justify-content: center; /* Centers vertically */ align-items: center; /* Centers horizontally */ } .background-color-only-black-sec-contact-account { background: var(--background-color-black-sec); } @media (max-width: 540px) { .background-color-only-black-sec-contact-account { background: #000000; background: #111; } } /************************************************************************************** SECTION - PURPLE */ /************************************************************************************** SECTION - PURPLE */ /************************************************************************************** SECTION - PURPLE */ .full-width-section-purple { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; background-image: var(--background-color-purple-sec), var(--background-image-stars); background-blend-mode: overlay; background-attachment: scroll, /* image */ fixed; /* radial gradient 1 */ } @media (max-width: 540px) { .full-width-section-purple { background: var(--background-color-purple-sec-mobile); } } /************************************************************************************** SECTION - BLACK - FLAG */ /************************************************************************************** SECTION - BLACK - FLAG */ /************************************************************************************** SECTION - BLACK - FLAG */ .full-width-section-black-flag { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ background:rgb(12, 12, 12); background: #000000; color: white; color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; background: var(--background-color-flag-sec); background-repeat: no-repeat, /* image */ no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat; /* linear gradient */ background-position: -250px 5px, /* image Left, Top */ 100% 130px, /* image */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0; /* linear gradient */ background-size: auto 710px, /* image */ auto 590px, /* image */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto; /* linear gradient */ background-attachment: fixed, /* image */ fixed, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll; /* linear gradient */ } @media (max-width: 1400px) { .full-width-section-black-flag { background: #000000; } } @media (max-width: 768px) { .full-width-section-black-flag { background: #000000; } } @media (max-width: 540px) { .full-width-section-black-flag { background: #000000; } } /************************************************************************************** WE FLAG VIDEO */ /************************************************************************************** WE FLAG VIDEO */ /************************************************************************************** WE FLAG VIDEO */ /* Default styles (desktop) */ .we-flag-video { width: 500px; height: auto; } @media (max-width: 540px) { .we-flag-video { width: 100%; height: auto; } } /************************************************************************************** SECTION - BLACK - DONATE */ /************************************************************************************** SECTION - BLACK - DONATE */ /************************************************************************************** SECTION - BLACK - DONATE */ .full-width-section-black-donate { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; /* background: var(--background-color-black-sec-donate); */ /* For Fade Effect */ background: var(--background-gradients-donate); background-repeat: /* no-repeat, */ no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat, /* linear gradient */ no-repeat; /* black background */ background-position: /* 99% 90%, */ 0 0, /* radial gradient 1 */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0, /* linear gradient */ 0 0; /* black background */ background-size: /* auto 80%, */ auto, /* radial gradient 1 */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto, /* linear gradient */ auto; /* black background */ background-attachment: /* fixed, */ scroll, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll, /* linear gradient */ scroll; /* black background */ } /* For Fade Out */ .full-width-section-black-donate .background-image-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--background-images-donate); background-attachment: fixed; background-position: 99% 90%; background-size: auto 80%; background-repeat: no-repeat; pointer-events: none; z-index: 0; transition: opacity 0.4s ease-out; } @media (max-width: 540px) { .full-width-section-black-donate { background: var(--background-color-black-sec-donate-mobile); background-repeat: no-repeat, /* image */ no-repeat; /* radial gradient 1 */ background-position: 99% 3%, /* image was 98 90*/ 0 0; /* radial gradient 1 */ background-size: 100% auto, /* image - was 28% */ auto; /* radial gradient 1 */ background-attachment: scroll, /* image */ scroll; /* radial gradient 1 */ } .full-width-section-black-donate .background-image-layer { display: none; } } /************************************************************************************** SECTION - BLACK - MAIN-MISSION */ /************************************************************************************** SECTION - BLACK - MAIN-MISSION */ /************************************************************************************** SECTION - BLACK - MAIN-MISSION */ .full-width-section-black-main-mission { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; /* background: var(--background-color-black-sec-main-mission); */ /* For Fade Effect */ background: var(--background-gradients-main-mission); background-repeat: /* no-repeat, */ /* no-repeat, */ no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat, /* linear gradient */ no-repeat; /* black background */ background-position: /* calc(26% - (var(--width-text) / 2)) 80%, */ /* calc(72% + (var(--width-text) / 2)) 80%, */ 0 0, /* radial gradient 1 */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0, /* linear gradient */ 0 0; /* black background */ background-size: /* auto 80%, */ /* auto 80%, */ auto, /* radial gradient 1 */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto, /* linear gradient */ auto; /* black background */ background-attachment: /* fixed, */ /* fixed, */ scroll, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll, /* linear gradient */ scroll; /* black background */ } /* For Fade Effect */ .full-width-section-black-main-mission .background-image-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--background-images-main-mission); background-attachment: fixed, fixed; background-position: calc(26% - (var(--width-text) / 2)) 80%, calc(72% + (var(--width-text) / 2)) 80%; background-size: auto 80%, auto 80%; background-repeat: no-repeat, no-repeat; pointer-events: none; z-index: 0; transition: opacity 0.4s ease-out; } /************************************************************************************** SECTION - BLACK - MAIN-MISSION - TABLET */ /************************************************************************************** SECTION - BLACK - MAIN-MISSION - TABLET */ /************************************************************************************** SECTION - BLACK - MAIN-MISSION - TABLET */ @media (max-width: 1700px) { .full-width-section-black-main-mission { background: var(--background-color-black-sec-main-mission-tablet); background-repeat: no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat, /* linear gradient */ no-repeat; /* black background */ background-position: 0 0, /* radial gradient 1 */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0, /* linear gradient */ 0 0; /* black background */ background-size: auto, /* radial gradient 1 */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto, /* linear gradient */ auto; /* black background */ background-attachment: scroll, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll, /* linear gradient */ scroll; /* black background */ } /* For Fade Effect */ .full-width-section-black-main-mission .background-image-layer { display: none; } } @media (max-width: 540px) { .full-width-section-black-main-mission { background: var(--background-color-black-sec-mobile); } } /************************************************************************************** SECTION - BLACK - MINI-MISSION */ /************************************************************************************** SECTION - BLACK - MINI-MISSION */ /************************************************************************************** SECTION - BLACK - MINI-MISSION */ .full-width-section-black-mini-mission { width: 100vw; margin-left: calc(50% - 50vw); /* Center the section */ color: #f0f0f0; padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; /* background: var(--background-color-black-sec-mini-mission); */ /* For Fade Effect */ background: var(--background-gradients-mini-mission); background-repeat: /* no-repeat, */ /* no-repeat, */ no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat, /* linear gradient */ no-repeat; /* black background */ background-position: /* calc(35% - (var(--width-text) / 2)) 80%, */ /* calc(65% + (var(--width-text) / 2)) 80%, */ 0 0, /* radial gradient 1 */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0, /* linear gradient */ 0 0; /* black background */ background-size: /* auto 60%, */ /* auto 60%, */ auto, /* radial gradient 1 */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto, /* linear gradient */ auto; /* black background */ background-attachment: /* fixed, */ /* fixed, */ scroll, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll, /* linear gradient */ scroll; /* black background */ } /* For Fade Effect */ .full-width-section-black-mini-mission .background-image-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--background-images-mini-mission); background-attachment: fixed, fixed; background-position: calc(35% - (var(--width-text) / 2)) 80%, calc(65% + (var(--width-text) / 2)) 80%; background-size: auto 60%, auto 60%; background-repeat: no-repeat, no-repeat; pointer-events: none; z-index: 0; transition: opacity 0.4s ease-out; } /************************************************************************************** SECTION - BLACK - MINI-MISSION - TABLET */ /************************************************************************************** SECTION - BLACK - MINI-MISSION - TABLET */ /************************************************************************************** SECTION - BLACK - MINI-MISSION - TABLET */ @media (max-width: 1100px) { .full-width-section-black-mini-mission { background: var(--background-color-black-sec-main-mission-tablet); background-repeat: no-repeat, /* radial gradient 1 */ no-repeat, /* radial gradient 2 */ no-repeat, /* radial gradient 3 */ no-repeat, /* radial gradient 4 */ no-repeat, /* linear gradient */ no-repeat; /* black background */ background-position: 0 0, /* radial gradient 1 */ 0 0, /* radial gradient 2 */ 0 0, /* radial gradient 3 */ 0 0, /* radial gradient 4 */ 0 0, /* linear gradient */ 0 0; /* black background */ background-size: auto, /* radial gradient 1 */ auto, /* radial gradient 2 */ auto, /* radial gradient 3 */ auto, /* radial gradient 4 */ auto, /* linear gradient */ auto; /* black background */ background-attachment: scroll, /* radial gradient 1 */ scroll, /* radial gradient 2 */ scroll, /* radial gradient 3 */ scroll, /* radial gradient 4 */ scroll, /* linear gradient */ scroll; /* black background */ } /* For Fade Effect */ .full-width-section-black-mini-mission .background-image-layer { display: none; } } .container-charities-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 90px; /* First value = vertical spacing, second = horizontal */ max-width: 1200px; max-width: 100%; margin: 0 auto; } .charity-logo { width: 190px; /* Adjust the size as needed */ height: 190px; margin: 0px 0px; /* Space between icons */ display: block; /* Prevent inline spacing issues */ max-width: 100%; } /************************************************************************************** OTHER CONTAINERS */ /************************************************************************************** OTHER CONTAINERS */ /************************************************************************************** OTHER CONTAINERS */ .main-content { /* padding: 20px; */ padding: 0px; } .container { max-width: 1200px; /* Limits content width */ max-width: var(--width-text); /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .container-video { max-width: 1200px; /* Limits content width */ max-width: var(--width-video); /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .container-donate { max-width: var(--width-donate); /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .container-donate-text { max-width: 1200px; /* Limits content width */ max-width: var(--width-text); /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } .container-merch { max-width: var(--width-merch); /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .container-flag-video { max-width: 1200px; /* Limits content width */ margin: 0 auto; /* Centers content */ padding-top: 10px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; } .mini-mission-sbh-title { display: block; } .mini-mission-sbh-title-mobile { display: none; } @media (max-width: 540px) { .mini-mission-sbh-title { display: none; } .mini-mission-sbh-title-mobile { display: block; } } .merch-products-img { display: block; } .merch-products-img-mobile { display: none; } @media (max-width: 540px) { .merch-products-img { display: none; } .merch-products-img-mobile { display: block; } } .container-merch-products { display: flex; justify-content: center; align-items: center; } .container-join-us-message { background: rgba(157, 0, 255, 0.1); border: 2px solid rgba(157, 0, 255, 0.4); border-radius: 12px; padding: 16px 32px 10px; margin: 0 auto; max-width: 600px; box-shadow: 0 8px 24px rgba(157, 0, 255, 0.3); } @media (max-width: 768px) { .container-join-us-message{ padding: 10px 20px 0px; } } /************************************************************************************** FADE EFFECT FOR BACKGROUND IMAGES */ /************************************************************************************** FADE EFFECT FOR BACKGROUND IMAGES */ /************************************************************************************** FADE EFFECT FOR BACKGROUND IMAGES */ /* For Fade Effect */ /* Ensure content stays above overlay */ /* .full-width-section-black-flag .container-flag-video, */ .full-width-section-black-donate .container-donate, .full-width-section-black-main-mission .container, .full-width-section-black-mini-mission .container { position: relative; z-index: 1; } /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /*********************************************************************************************************************** FONTS */ /************************************************************************************** FONTS */ /************************************************************************************** FONTS */ /************************************************************************************** FONTS */ /* Define the custom font */ @font-face { font-family: 'font-antique-olive-compact'; src: url('../fonts/antique-olive-compact.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Define the custom font */ @font-face { font-family: 'font-roboto-black'; src: url('../fonts/roboto-black.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Define the custom font */ @font-face { font-family: 'font-roboto-regular'; src: url('../fonts/roboto-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Define the custom font */ @font-face { font-family: 'font-roboto-bold'; src: url('../fonts/roboto-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Define the custom font */ @font-face { font-family: 'font-opensans-bold'; src: url('../fonts/OpenSans-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Define the custom font */ @font-face { font-family: 'font-opensans-regular'; src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Custom font class */ .font-rb-med-white { font-family: 'font-roboto-black', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 32px; font-weight: normal; color: #ffffff; color: #f0f0f0; margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ } /* Custom font class */ .font-rr-sml-white { font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ /* font-family: 'font-opensans-regular', sans-serif; */ font-size: 22px; /* font-size: 1.375rem; */ font-weight: normal; color: #ffffff; color: #f0f0f0; margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: left; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } /* Custom font class */ .font-rr-med-white { font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 32px; font-weight: normal; color: #ffffff; color: #f0f0f0; margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: left; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } /* Custom font class */ .font-rr-lrg-white { font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 40px; font-weight: normal; color: #ffffff; color: #f0f0f0; margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: center; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } /* Custom font class */ .font-rrb-sml-white { font-family: 'font-roboto-bold', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 22px; font-weight: normal; color: #ffffff; color: #f0f0f0; margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: left; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } .font-aoc-lrg-purple { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 46px; font-weight: normal; color: rgb(157, 0, 255); margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); /* Example shadow: 2px right, 2px down, 4px blur, semi-transparent black */ line-height: 1; /* Adjust line height to control vertical spacing between wrapped text */ } .font-aoc-med-purple { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 33px; font-weight: normal; color: rgb(157, 0, 255); margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ /*text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); Example shadow: 2px right, 2px down, 4px blur, semi-transparent black */ line-height: 1; /* Adjust line height to control vertical spacing between wrapped text */ } .font-aoc-sml-gold { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 22px; font-weight: normal; color: rgb(255, 185, 23); margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: left; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } .font-aoc-sml-purple { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 24px; font-weight: normal; color: rgb(157, 0, 255); margin-top: 0px; /* Space above paragraph */ margin-bottom: 0px; /* Space below paragraph */ text-align: left; line-height: 1.5; /* Adjust line height to control vertical spacing between wrapped text */ } .blank-line { margin-bottom: var(--line-size, 24px); /* Adjust space as needed */ } @media (max-width: 540px) { #join-us-user-message .font-rb-med-white { font-size: 28px; } #join-us-user-message .font-aoc-med-purple { font-size: 28px; } } /* .commission-badge { display: inline-block; background: rgba(157, 0, 255, 0.15); color: rgb(157, 0, 255); border: 1px solid rgb(157, 0, 255); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-top: 8px; } */ .commission-badge { display: inline-flex; flex-direction: column; align-items: center; background: rgba(157, 0, 255, 0.15); border: 1px solid rgb(157, 0, 255); padding: 8px 16px; border-radius: 12px; margin-top: 10px; } .commission-percentage { font-size: 22px; font-weight: bold; color: rgb(177, 53, 255); line-height: 1; letter-spacing: 1px; } .commission-label { font-size: 14px; color: rgb(177, 53, 255); opacity: 1; margin-top: 2px; } .we-cruiter-learn-more { /* background: transparent; */ background-color:rgb(37, 14, 52); color: rgb(157, 0, 255); border: 1px solid rgb(157, 0, 255); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; margin-left: 0px; transition: all 0.2s; } .we-cruiter-learn-more:hover { background: rgb(157, 0, 255); color: white; } /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /*********************************************************************************************************************** GENERAL */ /************************************************************************************** YOU TUBE VIDEO */ /************************************************************************************** YOU TUBE VIDEO */ /************************************************************************************** YOU TUBE VIDEO */ .youtube-video { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .youtube-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /************************************************************************************** TOAST CONTAINER */ /************************************************************************************** TOAST CONTAINER */ /************************************************************************************** TOAST CONTAINER */ #toast-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; display: flex; justify-content: center; align-items: center; width: 80%; } .toast { background: #333; color: #fff; padding: 15px 25px; border-radius: 8px; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s, transform 0.3s; text-align: center; font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 18px; /* Example font size */ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .toast.show { opacity: 1; transform: translateY(0); } /************************************************************************************** DE-OBFUSCATE EMAILS */ /************************************************************************************** DE-OBFUSCATE EMAILS */ /************************************************************************************** DE-OBFUSCATE EMAILS */ /* Email link styling - in your styles.css */ .obfuscated-email, a[href^="mailto:"] { color: rgb(255, 255, 255); text-decoration: none; } .obfuscated-email:hover, a[href^="mailto:"]:hover { color: rgb(157, 0, 255); /* text-decoration: underline; */ text-decoration: none; } /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /*********************************************************************************************************************** SIGN UP / SIGN IN */ /************************************************************************************** CONTAINERS */ /************************************************************************************** CONTAINERS */ /************************************************************************************** CONTAINERS */ /* Wrapper to contain the main content and footer */ .wrapper-force-full-height { display: flex; flex-direction: column; min-height: 100vh; /* Fallback for older browsers */ min-height: 100dvh; /* Modern way to get 100% viewport height */ } /* Main content should take up all available space */ .sign-upin-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } /* Style the form elements */ .sign-upin-form { display: flex; flex-direction: column; width: 100%; max-width: 400px; } .sign-upin-form input[type="text"], .sign-upin-form input[type="email"], .sign-upin-form input[type="tel"], .sign-upin-form input[type="password"]{ width: 100%; padding: 10px; font-size: 16px; border-radius: 8px; margin-bottom: 12px; box-sizing: border-box; background: rgb(255, 255, 255); color: rgb(19, 19, 19); font-family: 'Roboto', sans-serif; /* border: 2px solid rgba(255, 255, 255, 0.2); */ border: 1px solid rgb(81, 81, 81); transition: border-color 0.3s ease; } .sign-upin-form input:focus, .sign-upin-form input:focus, .sign-upin-form input:focus, .sign-upin-form input:focus { outline: 2px solid rgb(157, 0, 255); border: 1px solid rgb(81, 81, 81); } .sign-upin-form input::placeholder, .sign-upin-form input::placeholder, .sign-upin-form input::placeholder, .sign-upin-form input::placeholder { color: rgb(117, 117, 135); opacity: 1; } /* Style the social sign-up buttons */ .social-buttons { display: flex; flex-direction: column; width: 100%; max-width: 400px; /* margin-bottom: 20px; */ } /************************************************************************************** BUTTONS */ /************************************************************************************** BUTTONS */ /************************************************************************************** BUTTONS */ .btn-button { display: inline-block; height: 50px; padding: 12px 24px; font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 18px; /* Example font size */ font-weight: normal; /* Example font weight */ text-align: center; text-decoration: none; color: white; background-color: #007bff; /* Blue color */ border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-bottom: 12px; overflow: hidden; /* added this for shine effect, from amazon-btn */ } .btn-button:before { /* added this for shine effect, from amazon-btn */ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* transition: left 0.5s; */ /* commented this, and moved to hover:before below, so shine does not return when moving off hover */ } .btn-button:hover:before { /* added this for shine effect, from amazon-btn */ left: 100%; transition: left 0.5s; /* moved here from :before above, so shine does not return when moving off hover */ } .btn-button:hover { background-color: #0056b3; /* transform: translateY(-2px); */ transform: scale(1.02); } .btn-button:active { background-color: #004494; /* transform: translateY(0); */ transform: scale(0.98); } .btn-button:disabled { background-color: #cccccc; cursor: not-allowed; } /************************************************************** BUTTON - GOOGLE */ .btn-google { background-color: #db4437; height: auto; /* Don't set fixed height */ min-height: 50px; /* Minimum height for one line */ padding: 12px 20px; /* Use padding instead of fixed height */ white-space: normal; /* Allow wrapping (default, but explicit) */ padding-right: 3px; padding-left: 3px; } .btn-google:hover { background-color: #db4437; } .btn-google:active { background-color: #db4437; } .btn-google:disabled { background-color: #cccccc; } /************************************************************** BUTTON - FACEBOOK */ .btn-facebook { background-color: #3b5998; height: auto; /* Don't set fixed height */ min-height: 50px; /* Minimum height for one line */ padding: 12px 20px; /* Use padding instead of fixed height */ white-space: normal; /* Allow wrapping (default, but explicit) */ padding-right: 3px; padding-left: 3px; } .btn-facebook:hover { background-color: #3b5998; } .btn-facebook:active { background-color: #3b5998; } .btn-facebook:disabled { background-color: #cccccc; } /************************************************************** BUTTON - APPLE */ .btn-apple { background-color: #5e5e5e; height: auto; /* Don't set fixed height */ min-height: 50px; /* Minimum height for one line */ padding: 12px 20px; /* Use padding instead of fixed height */ white-space: normal; /* Allow wrapping (default, but explicit) */ padding-right: 3px; padding-left: 3px; } .btn-apple:hover { background-color: #5e5e5e; } .btn-apple:active { background-color: #5e5e5e; } .btn-apple:disabled { background-color: #cccccc; } /************************************************************** BUTTON - EMAIL */ .btn-email { background-color: rgb(157, 0, 255); } .btn-email:hover { background-color: rgb(157, 0, 255); } .btn-email:active { background-color: rgb(157, 0, 255); } .btn-email:disabled { background-color: #cccccc; } /************************************************************** BUTTON - AMAZON */ .amazon-button { position: relative; display: inline-block; padding: 18px 40px; font-family: 'font-roboto-regular', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 18px; font-weight: bold; color: #ffffff; background: rgb(157, 0, 255); border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(157, 0, 255, 0.4); overflow: hidden; } .amazon-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); /* transition: left 0.5s; */ /* commented this, and moved to hover:before below, so shine does not return when moving off hover */ } .amazon-button:hover:before { left: 100%; transition: left 0.5s; /* moved here from :before above, so shine does not return when moving off hover */ } .amazon-button:hover { box-shadow: 0 6px 20px rgba(157, 0, 255, 0.6); /* transform: translateY(-2px); */ transform: scale(1.02); } .amazon-button:active { box-shadow: 0 2px 10px rgba(157, 0, 255, 0.4); /* transform: translateY(0); */ transform: scale(0.98); } .amazon-button span { position: relative; z-index: 1; top: -2px; display: inline-flex; align-items: center; gap: 8px; } /* Amazon smile arrow */ /* .amazon-button:after { content: '→'; position: relative; top: -3px; margin-left: 10px; font-size: 32px; transition: margin-left 0.3s ease; } */ .amazon-button:hover:after { margin-left: 15px; } /********************************************************************************** LOGO IMAGES */ /********************************************************************************** LOGO IMAGES */ /********************************************************************************** LOGO IMAGES */ .google-logo-img { height: 26px; vertical-align: middle; position: relative; top: -1px; } .facebook-logo-img { height: 26px; vertical-align: middle; position: relative; top: -1px; } .apple-logo-img { height: 26px; vertical-align: middle; position: relative; top: -3px; } .paypal-logo-img { height: 24px; vertical-align: middle; position: relative; top: -1px; } .amazon-logo-img { height: 28px; vertical-align: middle; position: relative; top: 5px; } /************************************************************************************** PASSWORD TOGGLE */ /************************************************************************************** PASSWORD TOGGLE */ /************************************************************************************** PASSWORD TOGGLE */ .password-container { position: relative; margin-bottom: 2px; } .password-container input { width: 100%; padding-right: 80px; /* Make room for the toggle button */ margin-bottom: 0; } .password-toggle { position: absolute; right: 8px; top: 39%; transform: translateY(-50%); background: none; border: none; color: #666; cursor: pointer; padding: 4px 8px; font-size: 14px; font-family: 'font-roboto-regular', sans-serif; border-radius: 3px; display: flex; align-items: center; justify-content: center; height: auto; } .password-toggle-xxx { position: absolute; right: 12px; top: 0; bottom: 0; background: none; border: none; color: #666; cursor: pointer; padding: 4px 8px; font-size: 14px; font-family: 'font-roboto-regular', sans-serif; border-radius: 3px; display: flex; align-items: center; justify-content: center; margin: auto 0; } .password-toggle:hover { background-color: #f0f0f0; color: #333; } .password-toggle:focus { outline: none; background-color: #e0e0e0; } /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /*********************************************************************************************************************** HEADER MENU + ICONS */ /************************************************************************************** MAIN MENU */ /************************************************************************************** MAIN MENU */ /************************************************************************************** MAIN MENU */ /* Hidden menu */ .main-menu { position: fixed; top: 0px; left: -100%; /* Start hidden */ width: 180px; height: 100dvh; /* background: rgb(101, 78, 116,0.84); */ background: rgb(23, 12, 87, 0.70); font-family: 'font-roboto-black', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 32px; /* Example font size */ font-weight: normal; /* Example font weight */ color: white; color: #f0f0f0; transition: left 0.3s ease; padding-top: calc(var(--header-height-desktop) + 0px); margin-top: -12px; margin-bottom: 1px; line-height: 0.8; z-index: 9000; } /* Menu items */ .main-menu ul { list-style: none; padding: 0px; } .main-menu ul li { padding: 13px; text-align: center; } .main-menu ul li a:hover { opacity: 0.7; transition: opacity 0.2s ease; } .main-menu ul li a { color: white; color: #f0f0f0; text-decoration: none; font-size: 26px; } /* Show menu when active */ .main-menu.active { left: 0; } /************************************************* MENU ICON */ /************************************************* MENU ICON */ /************************************************* MENU ICON */ .main-menu-link { /* Pushes the menu link to the left */ /* margin-right: auto; */ display: flex; align-items: center; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); } .main-menu-link a { display: flex; align-items: center; } .main-menu-icon { width: 50px; /* Adjust the size as needed */ height: auto; } /************************************************************************************** ACCOUNT MENU */ /************************************************************************************** ACCOUNT MENU */ /************************************************************************************** ACCOUNT MENU */ /* Hidden menu */ .account-menu { position: fixed; top: 0; right: -100%; /* Change from left to right and start hidden */ width: 180px; height: 100dvh; /* background: rgb(101, 78, 116,0.84); */ background: rgb(73, 7, 32,0.70); font-family: 'font-roboto-black', sans-serif; font-size: 32px; font-weight: normal; color: white; color: #f0f0f0; transition: right 0.3s ease; /* Change transition from left to right */ padding-top: var(--header-height-desktop); margin-top: -12px; margin-bottom: 1px; line-height: 0.8; z-index: 9000; } /* Menu items */ .account-menu ul { list-style: none; padding: 0px; } .account-menu ul li { padding: 13px; text-align: center; } .account-menu ul li a:hover { opacity: 0.7; transition: opacity 0.2s ease; } .account-menu ul li a { color: white; color: #f0f0f0; text-decoration: none; font-size: 26px; } /* Show menu when active */ .account-menu.active { right: 0; /* Change from left to right */ } .logged-in-only { display: none; } .logged-out-only { display: block; } /* When user is logged in */ .user-logged-in .logged-in-only { display: block; } .user-logged-in .logged-out-only { display: none; } /************************************************* ACCOUNT ICON */ /************************************************* ACCOUNT ICON */ /************************************************* ACCOUNT ICON */ .account-menu-link { /* Pushes the menu link to the left */ /* margin-right: auto; */ display: flex; align-items: center; position: absolute; right: 60px; top: 50%; transform: translateY(-50%); } .account-menu-link a { display: flex; align-items: center; } .account-menu-icon { width: 36px; /* Adjust the size as needed */ height: auto; } @media (max-width: 768px) { .main-menu { padding-top: var(--header-height-tablet); } .main-menu ul li { padding: 12px; } .account-menu { padding-top: var(--header-height-tablet); } .account-menu ul li { padding: 12px; } } @media (max-width: 540px) { .main-menu { background: rgb(38, 13, 73, 0.90); padding-top: var(--header-height-mobile); } .main-menu ul li { padding: 10px 12px 10px 12px; } .account-menu ul li { padding: 10px 10px 10px 14px; } .main-menu ul li a, .account-menu ul li a { font-size: 26px; /* whatever size you want */ line-height: 0.8; } .main-menu-link { display: flex; align-items: center; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .main-menu-icon { width: 30px; height: auto; } .account-menu { background: rgb(57, 14, 56,0.90); padding-top: var(--header-height-mobile); } .account-menu-link { display: flex; align-items: center; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } .account-menu-icon { width: 24px; height: auto; } } /************************************************************************************** WE LOGO ICON */ /************************************************************************************** WE LOGO ICON */ /************************************************************************************** WE LOGO ICON */ .logo { display: flex; align-items: center; justify-content: center; flex-grow: 1; /* Allow the logo to take up available space */ /* position: absolute; left: 50%; transform: translateX(-50%); */ } /* Default styles (desktop) */ .logo-image { width: 120px; height: auto; padding-bottom: var(--logo-pad-bot-desktop); } @media (max-width: 768px) { .logo-image { width: 100px; height: auto; padding-bottom: var(--logo-pad-bot-tablet); } } @media (max-width: 540px) { .logo-image { width: 40px; height: auto; padding-bottom: var(--logo-pad-bot-mobile); } .logo { position: static; transform: none; } } /************************************************************************************** CART + JOIN US TEXT */ /************************************************************************************** CART + JOIN US TEXT */ /************************************************************************************** CART + JOIN US TEXT */ /************************************************* CART + JOIN US CONTAINER */ .cart-join-container { display: flex; align-items: center; position: absolute; right: 120px; /* Position the whole group */ top: 50%; transform: translateY(-50%); gap: 25px; /* Space between cart and JOIN US text */ } /************************************************* CART ICON */ .cart-link { display: flex; align-items: center; position: static; /* Relative to container on desktop */ } .cart-link a { display: flex; align-items: center; } .cart-icon { width: 60px; height: auto; } /************************************************* JOIN US TEXT */ .join-us-text { display: flex; align-items: center; justify-content: center; position: static; /* Relative to container on desktop */ font-family: 'font-roboto-regular', Arial, sans-serif; font-size: 18px; font-weight: bold; color: #f0f0f0; line-height: 1; text-align: center; /* cursor: pointer; */ /* transition: color 0.3s ease; */ } .divider-icon { height: 60px; width: 2px; margin-right: 25px; } .text-content { display: flex; flex-direction: column; align-items: center; } /* Tablet responsive adjustments */ /* @media (max-width: 768px) { */ @media (max-width: 830px) { .cart-join-container-xxxxxxxxxxx { right: 120px; gap: 20px; } .cart-icon-xxxxxxxxxxx { width: 50px; } .join-us-text-xxxxxxxxxxx { font-size: 16px; } .divider-icon-xxxxxxxxxxx { height: 50px; margin-right: 20px; } } /* Mobile responsive adjustments */ /* @media (max-width: 540px) { */ @media (max-width: 800px) { .cart-join-container { /* Make container transparent - children become direct children of header */ display: contents; } /* Mobile: Cart repositioned independently - centered between menu and logo */ .cart-link { display: flex; align-items: center; justify-content: center; position: absolute; left: 29%; /* Center between menu and logo */ top: 52%; transform: translate(-50%, -50%); } /* Mobile: JOIN US text repositioned independently */ .join-us-text { display: flex; align-items: center; position: absolute; right: 120px; top: 50%; transform: translateY(-50%); font-size: 16px; } .cart-icon { width: 60px; } .divider-icon { height: 16px; margin-right: 4px; display: none; /* Hide divider on mobile */ } } /* Mobile responsive adjustments */ @media (max-width: 540px) { .cart-join-container { /* Make container transparent - children become direct children of header */ display: contents; } /* Mobile: Cart repositioned independently - centered between menu and logo */ .cart-link { display: flex; align-items: center; justify-content: center; position: absolute; left: 29%; /* Center between menu and logo */ top: 52%; transform: translate(-50%, -50%); } /* Mobile: JOIN US text repositioned independently */ .join-us-text { display: flex; align-items: center; position: absolute; right: 58px; top: 50%; transform: translateY(-50%); font-size: 13px; } .cart-icon { width: 36px; } .divider-icon { height: 16px; margin-right: 4px; display: none; /* Hide divider on mobile */ } } /************************************************* CART COUNT BADGE */ .cart-count { position: absolute; top: -4px; right: 15px; /* background-color: rgb(157, 0, 255); */ color: white; color: var(--purple-font-color); color:var(--white-font-color); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-family: 'font-roboto-bold', sans-serif; font-size: 22px; font-weight: bold; line-height: 1; min-width: 20px; /* Ensures it doesn't get too small */ } /* Hide badge when count is 0 */ .cart-count.hidden { display: none; } /* For larger numbers, make badge slightly bigger */ .cart-count.large-number { width: 24px; height: 24px; font-size: 18px; top: -4px; right: 13px; } /************************************************* CART LINK - UPDATE FOR RELATIVE POSITIONING */ .cart-link a { display: flex; align-items: center; position: relative; /* Important: allows absolute positioning of badge relative to cart icon */ } @media (max-width: 540px) { .cart-count { width: 16px; height: 16px; font-size: 16px; top: -5px; right: 5px; } .cart-count.large-number { width: 20px; height: 20px; font-size: 14px; top: -5px; right: 4px; } } /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /*********************************************************************************************************************** PAY PAL */ /************************************************************************************** PAY PAL SUBSCRIPTION*/ /************************************************************************************** PAY PAL SUBSCRIPTION*/ /************************************************************************************** PAY PAL SUBSCRIPTION*/ .pps-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; width: 100%; padding: 0 1rem; box-sizing: border-box; } .pps-row:not(:last-child) { margin-bottom: 2rem; } .pps-tier { background: #111; border: 2px solid #333; border-radius: 12px; padding: 2rem; padding: 1.25rem; text-align: center; /* width: 280px; */ /* width: 380px; */ width: 46%; max-width: 100%; box-sizing: border-box; position: relative; transition: transform 0.3s ease; } .pps-subscribe-btn { background-color: rgb(157, 0, 255); color: #fff; border: none; padding: 0.75rem 1.5rem; padding: 1.0rem 1.75rem; /* font-size: 1rem; */ border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease; } .pps-subscribe-btn:hover { background-color: #a000d9; } .pps-popular { border: 2px solid rgb(157, 0, 255); transform: scale(1.05); z-index: 1; } .pps-popular-badge { position: absolute; top: -12px; left: -12px; background-color: rgb(157, 0, 255); color: #fff; padding: 0.25rem 0.5rem; font-size: 0.9rem; border-radius: 4px; } /* Mobile adjustments */ @media (max-width: 600px) { .pps-tier { width: 100%; } } /************************************************************************************** PAY PAL ONE-TIME DONATIONS*/ /************************************************************************************** PAY PAL ONE-TIME DONATIONS*/ /************************************************************************************** PAY PAL ONE-TIME DONATIONS*/ .ppd-input[type="number"] { width: 50%; padding: 0rem 0.8rem; /*margin-bottom: 1rem; */ font-size: 2rem; font-family: 'font-roboto-bold', sans-serif; color: rgb(102, 0, 166); text-align: center; /* border: 2px solid rgb(157, 0, 255); */ border-radius: 8px; box-sizing: border-box; line-height: normal; /* Fix extra vertical spacing */ vertical-align: middle; /* -webkit-appearance: none; Remove Safari default styles */ /* appearance: none; */ background: rgb(255, 255, 255); /* color: rgb(19, 19, 19); */ /* font-family: 'Roboto', sans-serif; */ /* border: 2px solid rgba(255, 255, 255, 0.2); */ border: 1px solid rgb(81, 81, 81); transition: border-color 0.3s ease; } .ppd-input[type="number"]:focus { outline: 2px solid rgb(157, 0, 255); border: 1px solid rgb(81, 81, 81); } .ppd-input[type="number"]::placeholder { line-height: normal; vertical-align: middle; color: rgb(117, 117, 135); opacity: 1; } @media (max-width: 540px) { .ppd-input[type="number"] { width: 66%; font-size: 1.5rem; } } /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /*********************************************************************************************************************** PRINTFUL */ /* Merch/Products Styles */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; margin-top: 30px; } .product-card { background: #111; border: 2px solid #333; border-radius: 12px; padding: 20px; text-align: center; transition: transform 0.3s ease, border-color 0.3s ease; cursor: pointer; } .product-card:hover { transform: translateY(-5px); border-color: rgb(157, 0, 255); } .product-image { width: 100%; height: 250px; object-fit: contain; border-radius: 8px; margin-bottom: 15px; background: #000; } .product-name { font-family: 'font-antique-olive-compact', sans-serif; font-size: 24px; color: rgb(157, 0, 255); margin: 10px 0; } .product-price { font-family: 'font-roboto-bold', sans-serif; font-size: 22px; color: #f0f0f0; margin: 10px 0; } .product-description { font-family: 'font-roboto-regular', sans-serif; font-size: 16px; color: #ccc; line-height: 1.4; margin: 10px 0; } /* Modal styles */ .modal { display: none; position: fixed; z-index: 11000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow-y: auto; } .modal-content { background: rgb(47, 14, 64); margin: 50px auto; padding: 30px; border: 2px solid rgb(157, 0, 255); border-radius: 12px; width: 90%; max-width: 800px; position: relative; } .close { color: #f0f0f0; float: right; font-size: 40px; font-weight: bold; line-height: 1; cursor: pointer; } .close:hover { color: rgb(157, 0, 255); } .variant-selector { margin: 20px 0; } .variant-selector label { font-family: 'font-roboto-bold', sans-serif; color: #f0f0f0; display: block; margin-bottom: 8px; } .variant-selector select { width: 100%; padding: 10px; font-size: 16px; border-radius: 8px; background: #111; color: #f0f0f0; border: 2px solid #333; } .add-to-cart-btn { background-color: rgb(157, 0, 255); color: #fff; border: none; padding: 15px 30px; font-size: 18px; font-family: 'font-roboto-bold', sans-serif; border-radius: 8px; cursor: pointer; margin-top: 20px; transition: background-color 0.3s ease; } .add-to-cart-btn:hover { background-color: #a000d9; } @media (max-width: 768px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .modal-content { margin: 20px; padding: 20px; width: calc(100% - 40px); } } /* Color Swatches with Color Boxes */ .color-swatches { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; } .color-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; transition: all 0.3s ease; padding: 8px; border-radius: 8px; } .color-swatch:hover { background: rgba(157, 0, 255, 0.1); transform: translateY(-2px); } .color-swatch.selected { background: rgba(157, 0, 255, 0.2); } .color-box { width: 40px; height: 40px; border-radius: 6px; border: 3px solid #333; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .color-swatch:hover .color-box { border-color: rgb(157, 0, 255); box-shadow: 0 4px 8px rgba(157, 0, 255, 0.4); } .color-swatch.selected .color-box { border-color: rgb(157, 0, 255); border-width: 4px; box-shadow: 0 0 12px rgba(157, 0, 255, 0.6); } .color-label { font-family: 'font-roboto-regular', sans-serif; font-size: 12px; color: #f0f0f0; text-align: center; line-height: 1.2; } @media (max-width: 540px) { .color-swatches { gap: 8px; } .color-box { width: 35px; height: 35px; } .color-label { font-size: 11px; } } /* Amazon-Style Variant Selectors */ .variant-selector-amazon { margin: 20px 0; text-align: left; } .variant-label-group { margin-bottom: 12px; } .variant-main-label { font-family: 'font-roboto-bold', sans-serif; font-size: 14px; color: #f0f0f0; display: block; } .variant-selected-value { font-family: 'font-roboto-bold', sans-serif; color: rgb(157, 0, 255); } /* Color Options - Amazon Style */ .color-swatches-amazon { display: flex; flex-wrap: wrap; gap: 8px; } .color-option-amazon { width: 48px; height: 48px; border: 2px solid #444; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 4px; background: #1a1a1a; } .color-option-amazon:hover { border-color: rgb(157, 0, 255); transform: scale(1.05); } .color-option-amazon.selected { border-color: rgb(157, 0, 255); border-width: 3px; padding: 3px; box-shadow: 0 0 0 1px rgb(157, 0, 255); } .color-box-amazon { width: 100%; height: 100%; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); } /* Size Options - Amazon Style */ .size-options-amazon { display: flex; flex-wrap: wrap; gap: 8px; } .size-option-amazon { min-width: 60px; padding: 10px 16px; border: 2px solid #444; border-radius: 8px; background: #1a1a1a; font-family: 'font-roboto-regular', sans-serif; font-size: 14px; color: #f0f0f0; text-align: center; cursor: pointer; transition: all 0.2s ease; } .size-option-amazon:hover { border-color: rgb(157, 0, 255); background: rgba(157, 0, 255, 0.1); } .size-option-amazon.selected { border-color: rgb(157, 0, 255); background: rgba(157, 0, 255, 0.2); font-family: 'font-roboto-bold', sans-serif; box-shadow: 0 0 0 1px rgb(157, 0, 255); } @media (max-width: 540px) { .color-option-amazon { width: 42px; height: 42px; } .size-option-amazon { min-width: 50px; padding: 8px 12px; font-size: 13px; } } /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /*********************************************************************************************************************** SHARE ICON + POP-UP FORM */ /************************************************************************************** SHARE ICON + LINK */ /************************************************************************************** SHARE ICON + LINK */ /************************************************************************************** SHARE ICON + LINK */ /* Hide the SMS link by default */ .sms-link-menu { display: none !important; } /* Show the EMAIL link by default */ .email-link-menu { display: block !important; } /* Style for the share text */ .share-text-menu { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 26px; /* Example font size */ font-weight: normal; /* Example font weight */ color: var(--white-font-color); } /* Style for the share icon */ .share-icon-menu { width: 26px; /* Adjust the size as needed */ height: auto; margin-left: 3px; /* Space between the icon and the text */ vertical-align: middle; /* Align the icon vertically with the text */ margin-top: -7px; } /* Hide the SMS link by default */ .sms-link { display: none !important; margin-top: 0px; margin-bottom: 0px; } /* Show the EMAIL link by default */ .email-link { display: block !important; margin-top: 0px; margin-bottom: 0px; } .sms-link a:hover, .email-link a:hover { opacity: 0.7; transition: opacity 0.2s ease; } .share-link-container { margin-top: 0px; margin-bottom: 0px; } @media (hover: hover) { .share-link-container a:hover { opacity: 0.7; transition: opacity 0.2s ease; } } /* Style for the share text */ .share-text { font-family: 'font-antique-olive-compact', sans-serif; /* Fallback to sans-serif if the custom font is not available */ font-size: 38px; /* Example font size */ font-weight: normal; /* Example font weight */ color: var(--white-font-color); /* color: rgb(157, 0, 255); */ /* text-decoration: none; */ } /* Style for the share icon */ .share-icon { width: 38px; /* Adjust the size as needed */ height: auto; margin-left: 8px; /* Space between the icon and the text */ vertical-align: middle; /* Align the icon vertically with the text */ margin-top: -22px; } /* Style for the share icon */ .megaphone-icon { width: 60px; /* Adjust the size as needed */ width: 180px; /* Adjust the size as needed */ height: auto; margin-left: 8px; /* Space between the icon and the text */ vertical-align: middle; /* Align the icon vertically with the text */ margin-top: -6px; } @media (max-width: 540px) { .sms-link { display: block !important; } .sms-link-menu { display: block !important; } .email-link { display: none !important; } .email-link-menu { display: none !important; } } /************************************************************************************** SHARE MODAL POP-UP FORM */ /************************************************************************************** SHARE MODAL POP-UP FORM */ /************************************************************************************** SHARE MODAL POP-UP FORM */ /* Share button container */ .share-button-container { text-align: center; margin: 20px 0; } /* Main share button - Updated to match your existing share button style */ .share-main-button { background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s ease; text-decoration: none; } .share-main-button:hover { opacity: 0.7; } .share-main-button:active { opacity: 0.9; } /* The share text and icon already have styles from your existing CSS */ /* .share-text and .share-icon are already styled above */ /* Modal overlay */ .share-modal { display: none; position: fixed; z-index: 10001; /* Higher than header's 9999 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.85); animation: fadeIn 0.3s ease; } .share-modal[style*="display: block"] { display: flex !important; align-items: center; /* Centers vertically */ justify-content: center; /* Centers horizontally */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Modal content box */ .share-modal-content { background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); border: 2px solid var(--purple-font-color); border-radius: 16px; /* margin: 5% auto; */ padding: 30px 24px; max-width: 500px; width: 90%; position: relative; animation: slideDown 0.3s ease; box-shadow: 0 8px 32px rgba(157, 0, 255, 0.4); } @keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Close button */ .share-modal-close { color: var(--white-font-color); position: absolute; right: 20px; top: 20px; font-size: 32px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; line-height: 1; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .share-modal-close:hover, .share-modal-close:focus { color: var(--purple-font-color); transform: rotate(90deg); } /* Modal header */ .share-modal-header { text-align: center; margin-bottom: 24px; } .share-modal-megaphone { width: 280px; height: auto; margin-bottom: 0px; } .share-modal-header h2 { margin: 0; font-size: 28px; } /* Share options grid */ .share-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } /* Individual share option button */ .share-option-btn { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); border: 2px solid #444; border-radius: 12px; padding: 20px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: all 0.3s ease; min-height: 110px; } .share-option-btn:hover { border-color: var(--purple-font-color); background: linear-gradient(135deg, #3a2a4a 0%, #2a1a3a 100%); transform: translateY(-4px); box-shadow: 0 6px 20px rgba(157, 0, 255, 0.3); } .share-option-btn:active { transform: translateY(-2px); } .share-option-icon { width: 58px; height: auto; object-fit: contain; } .share-emoji-icon { font-size: 48px; line-height: 1; } .share-option-btn span { font-size: 16px; text-align: center; line-height: 1.3; } .share-modal-header + p { font-size: 24px !important; } /* Success message */ .share-success-message { background: linear-gradient(135deg, #2a4a2a 0%, #1a3a1a 100%); border: 2px solid #4CAF50; border-radius: 8px; padding: 12px; margin-top: 16px; text-align: center; animation: fadeIn 0.3s ease; } .share-success-message .font-rrb-sml-white { color: #4CAF50; } /* Responsive design */ @media screen and (max-width: 600px) { .share-modal-content { margin: 5% auto; padding: 16px 12px; width: 88%; max-width: 340px; border-radius: 12px; } .share-options-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; } .share-option-btn { padding: 12px 6px; min-height: 85px; gap: 6px; border-radius: 10px; } .share-option-icon { width: 48px; height: auto; } .share-emoji-icon { font-size: 32px; } .share-option-btn span { font-size: 14px; line-height: 1.2; } .share-modal-megaphone { width: 220px; margin-bottom: 0px; } .share-modal-header h2 { font-size: 20px; } .share-modal-header { margin-bottom: 12px; } .share-modal-header + p { font-size: 18px !important; margin: 10px 0 !important; } .share-modal-close { right: 12px; top: 12px; font-size: 28px; width: 28px; height: 28px; } } @media screen and (max-width: 400px) { .share-modal-content { margin: 3% auto; padding: 14px 10px; width: 90%; max-width: 320px; margin-top: 40px !important; } .share-options-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } .share-option-btn { padding: 10px 4px; min-height: 75px; gap: 5px; } .share-option-btn:active { /* Reset active state faster */ transition: all 0.1s ease; } /* Prevent stuck active state on iOS */ .share-option-btn { -webkit-tap-highlight-color: transparent; } .share-option-icon { width: 42px; height: auto } .share-emoji-icon { font-size: 28px; } .share-option-btn span { font-size: 14px; } .share-modal-header + p { font-size: 18px !important; } .share-modal-megaphone { width: 200px; } .share-modal-header h2 { font-size: 18px; } .share-modal-close { font-size: 26px; width: 26px; height: 26px; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Prevent layout shift when modal opens */ body-xxx.modal-open { overflow: hidden; overflow-y: scroll; /* Keep scrollbar visible */ } /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /*********************************************************************************************************************** LOADING SPINNER */ /* Hide main content initially */ .wrapper-force-full-height { opacity: 0; visibility: hidden; } .wrapper-force-full-height.loaded { opacity: 1; visibility: visible; transition: opacity 0.3s ease-out; } /* Loading overlay */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; /* background: var(--background-color-black-sec-loading-spinner); */ display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.3s ease-out; } @media (max-width: 540px) { .loading-overlay { background: #000; /* background: var(--background-color-black-sec-mobile); */ } } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .spinner-container { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } /* Logo stays still */ .spinner-logo-image { width: 60px; height: auto; position: relative; z-index: 2; } /* Ring spins around logo */ .spinner-ring { position: absolute; width: 100px; height: 100px; border: 4px solid rgba(157, 0, 255, 0.2); border-top: 4px solid rgb(157, 0, 255); border-radius: 50%; animation: spin 1s linear infinite; z-index: 1; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }