/* css/style.css (Updated and Responsive) */ /* * The styles for the static background remain on the * so the same background persists throughout the page. */ html { scroll-behavior: smooth; } /* ======================================================= */ /* == NEW STYLES for Animation Layers == */ /* ======================================================= */ #smoke-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/shrek7.png'); background-repeat: repeat-x; /* Repeats the image horizontally */ background-position: 0 0; z-index: 1; /* Sits above the body background */ pointer-events: none; /* Allows mouse clicks to "pass through" the overlay */ } .page-content { position: relative; /* Establishes a stacking context */ z-index: 2; /* Sits above the smoke overlay */ } /* ======================================================= */ /* == 1. BASE STYLES (Mobile First) == */ /* ======================================================= */ /* These styles apply to ALL screen sizes, starting with mobile. */ .hero-logo { width: 90%; max-width: 1000px; height: auto; } .content-wrapper { background-color: rgba(0, 0, 0, 0.7); max-width: 800px; margin: 30px auto; /* RESPONSIVE CHANGE: Less padding on mobile */ padding: 20px; border-radius: 10px; } .sticky-banner { position: sticky; top: 0; background-color: rgba(0, 0, 0, 0.85); padding: 15px 10px; text-align: center; z-index: 100; width: 100%; } .sticky-banner h1 { /* RESPONSIVE CHANGE: Smaller font size for mobile */ font-size: 1.5em; margin: 0 0 10px 0; } .sticky-banner p { margin: 0; font-size: 1em; font-style: italic; } .banner-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; background: linear-gradient(145deg, #1e361c, #2E8B57); border: 2px solid rgba(249, 249, 249, 0.609); /* Uses #f9f9f9 from your list */ border-radius: 100px; /* REPLACED: #fff replaced with an off-white */ color: #f9f9f9; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; overflow: hidden; transition: all 0.4s ease-in-out; /* REPLACED: Cyan glow replaced with a green glow */ box-shadow: 0 0 20px rgba(11, 218, 81, 0.15); /* Uses #0BDA51 from your list */ backdrop-filter: blur(8px); z-index: 1; } .banner-button::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; /* KEPT: These colors were already in your list and fit the theme */ background: conic-gradient(from 0deg, #0BDA51, #BFFF00, #0BDA51); animation: rotate 4s linear infinite; z-index: -2; } .banner-button::after { content: ""; position: absolute; inset: 2px; /* REPLACED: #0a0a0a replaced with a very dark green */ background: #0a1f08; border-radius: inherit; z-index: -1; } .banner-button::after { content: ""; position: absolute; inset: 2px; /* REPLACED: #0a0a0a replaced with a very dark green */ background: #0a1f08; border-radius: inherit; z-index: -1; } .banner-button:hover { transform: scale(1.05); /* REPLACED: Cyan glow replaced with a more intense green glow */ box-shadow: 0 0 40px rgba(104, 223, 143, 0.927); /* Uses #0BDA51 from your list */ } .banner-button:hover .arrow { transform: translateX(6px); } .arrow { width: 22px; height: 22px; transition: transform 0.3s ease-in-out; /* REPLACED: Cyan arrow replaced with a bright, vibrant green */ color: #41fb02; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } h2 { text-align: center; font-size: 1.8em; } p { line-height: 1.6; font-size: 1.1em; } .site-footer { background-color: rgba(0, 0, 0, 0.9); color: #f9f9f9; padding: 40px 0 20px 0; border-top: 1px solid rgba(65, 251, 2, 0.4); } .footer-heading { font-weight: 700; letter-spacing: 1px; } .footer-link { color: #bfff00; } .footer-link:hover { color: #41fb02; text-decoration: none; } .footer-links li { margin-bottom: 0.5rem; } .site-footer small { color: rgba(249, 249, 249, 0.7); letter-spacing: 0.5px; } .footer-logo { max-width: 180px; } .footer-social { display: flex; gap: 12px; align-items: center; } .footer-social-icon { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background-color: rgba(255, 255, 255, 0.1); padding: 6px; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .footer-social-icon:hover { transform: translateY(-2px); box-shadow: 0 0 10px rgba(65, 251, 2, 0.5); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 15px; } /* ======================================================= */ /* == 2. MEDIA QUERIES (For Larger Screens) == */ /* ======================================================= */ /* --- TABLET SIZES AND UP --- */ /* IF the screen is 768px or wider, apply these changes. */ @media (min-width: 768px) { .content-wrapper { /* On larger screens, we can afford more padding */ padding: 40px; } .sticky-banner h1 { /* Increase the banner title size */ font-size: 2em; } .banner-button { /* Make the button slightly larger on bigger screens */ padding: 0.25em 0.75em; font-size: 16px; } } /* --- DESKTOP SIZES AND UP --- */ /* IF the screen is 1024px or wider, apply these changes. */ @media (min-width: 1024px) { h2 { font-size: 2.2em; } /* This media query for the logo already existed, which is great! */ /* It's good for very wide screens. */ @media (orientation: landscape) { .hero-logo { width: auto; max-height: 70vh; } } } .fancy-text-container { background-color: rgba(0, 0, 0, 0.85); display: flex; /* MAKE IT A FLEX CONTAINER */ flex-direction: column; /* Stack children vertically */ align-items: center; /* Center children horizontally */ justify-content: center; /* Center children vertically */ color: #f7e9db; padding: 140px 0; /* Add some padding */ } .fancy-text-container i { text-align: center; left-margin: auto; right-margin: auto; } .fancy-text-container p { font-family: 'Work Sans', sans-serif; font-weight: 850; font-size: 6vw; text-transform: uppercase; text-align: center; line-height: 1; margin: 0; /* Reset margin for centering */ } .fancy { @supports (background-clip: text) or (-webkit-background-clip: text) { background-image: url("data:image/svg+xml,%3Csvg width='2250' height='900' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%2350C878' d='M0 0h2255v899H0z'/%3E%3Ccircle cx='366' cy='207' r='366' fill='%230BDA51'/%3E%3Ccircle cx='1777.5' cy='318.5' r='477.5' fill='%230BDA51'/%3E%3Ccircle cx='1215' cy='737' r='366' fill='%231d6405'/%3E%3C/g%3E%3C/svg%3E%0A"); /*background-size: 110% auto;*/ background-position: center; color: transparent; -webkit-background-clip: text; background-clip: text; } .fancy span { font-family: 'Work Sans', sans-serif; font-weight: 850; font-size: 4vw; text-transform: uppercase; text-align: center; line-height: 1; margin: 0; /* Reset margin for centering */ } }