/* -------------------- GLOBAL RESET & DEFAULTS -------------------- */ * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; color: #333; /* Remove background here if each page will have its own via a class-based approach (page-404, page-home, page-receipt, etc.) */ } html, body { /* Ensure the full height for pages like 404 */ height: 100%; } /* Optional: If you want a default background gradient everywhere, uncomment the line below and remove it from the page-* classes background: linear-gradient(180deg, rgba(245, 248, 250, 0.3), rgba(240, 243, 247, 0.3)); */ /* -------------------- HEADER STYLES (from original styles.css) -------------------- */ .trace-header { display: flex; justify-content: center; align-items: center; background: linear-gradient(90deg, #f0f8ff); height: 65px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; } .trace-logo img { width: 150px; height: auto; } .trace-header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; width: 100%; padding: 0 20px; } .trace-nav { display: flex; justify-content: space-evenly; flex-grow: 1; margin-left: 20px; } .trace-nav-link { text-decoration: none; color: #333; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: bold; transition: color 0.3s ease, text-decoration 0.3s ease, font-weight 0.3s ease; } .trace-nav-link:hover { text-decoration: underline; color: #000; } .btn-signin { display: inline-block; margin-left: 20px; padding: 10px; background: #512EFF !important; color: #ffffff !important; text-decoration: none; border-radius: 5px; font-size: 17.6px; font-family: Arial, Helvetica, sans-serif; transition: background 0.3s ease; } .btn-signin:hover { background: #3c1fd1; } /* -------------------- HERO SECTION (from original styles.css) -------------------- */ .hero-section { text-align: center; padding: 40px 20px; } .hero-title { font-size: 3rem; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #1D2837; margin: 0; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); } .hero-subtitle { font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #475569; margin-top: 0; font-weight: normal; } /* -------------------- RECEIPT CONTAINER (from original styles.css) -------------------- */ .receipt-container { display: flex; flex-direction: column; margin: 20px auto; padding: 25px 55px; max-width: fit-content; border-radius: 40px; border: 1.5px solid rgba(0, 0, 0, 0.1); background-image: radial-gradient(515px at 50% 141%, rgba(81, 46, 255, 0.15) 18%, white 85%); background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: 0px 12px 18px 0 rgba(0, 0, 0, 0.08); } /* -------------------- BUTTONS (from original styles.css) -------------------- */ .btn-download { display: inline-block; margin-top: 20px; padding: 10px 20px; background: #512EFF; color: #fff; text-decoration: none; border-radius: 5px; width: 15%; font-size: 17.6px; font-family: Arial, Helvetica, sans-serif; transition: background 0.3s ease; } .btn-download:hover { background: #3c1fd1; } /* -------------------- FOOTER (from original styles.css) -------------------- */ .trace-footer { padding: 10px; text-align: center; font-size: 0.8rem; font-family: Arial, Helvetica, sans-serif; margin-top: 20px; opacity: 0.75; color: rgb(36, 99, 235); } /* =================================================================================================== */ /* PAGE-SPECIFIC STYLES BELOW */ /* =================================================================================================== */ /* -------------------- 404 PAGE -------------------- */ /* In 404.html, change to so these styles apply only to that page. */ .page-404 { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f0f8ff, #e6e8fa); } .page-404 .container { text-align: center; max-width: 700px; width: 90%; background: #fff; padding: 50px; border-radius: 20px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); overflow: visible; } .oops { font-size: 6rem; font-weight: bold; color: #512EFF; background: -webkit-linear-gradient(45deg, #512EFF, #8A2BE2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; line-height: 1.2; } .error-message { margin-top: 30px; font-size: 1.5rem; color: #475569; margin-bottom: 40px; line-height: 1.6; } .apology-message { font-size: 1.2rem; color: #475569; margin-bottom: 40px; line-height: 1.5; } .apology-message a { color: #512EFF; text-decoration: underline; font-weight: bold; transition: color 0.3s ease; } .apology-message a:hover { color: #3c1fd1; } .btn-home { display: inline-block; padding: 15px 50px; background: #512EFF; color: #fff; text-decoration: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0px 6px 15px rgba(81, 46, 255, 0.3); } .btn-home:hover { background: #3c1fd1; transform: translateY(-3px); box-shadow: 0px 8px 20px rgba(81, 46, 255, 0.5); } /* -------------------- HOME PAGE -------------------- */ /* In home.html, change to so these styles apply only to that page. */ .page-home { background: linear-gradient(135deg, #f0f8ff, #e6e8fa); display: flex; justify-content: center; align-items: center; height: 100vh; } .page-home .container { text-align: center; max-width: 700px; width: 90%; background: #fff; padding: 30px 50px; border-radius: 20px; box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); } .page-home .hero-title { font-size: 3rem; font-weight: bold; color: #1D2837; margin-bottom: 10px; } .page-home .hero-logo { width: 150px; height: auto; margin-bottom: 20px; } .page-home .hero-message { margin-top: 20px; font-size: 1.5rem; color: #475569; margin-bottom: 30px; line-height: 1.6; } .page-home .hero-subtitle { font-size: 1.2rem; color: #475569; margin-bottom: 30px; line-height: 1.5; } .page-home .btn-redirect { display: inline-block; padding: 15px 50px; background: #512EFF; color: #fff; text-decoration: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0px 6px 15px rgba(81, 46, 255, 0.3); } .page-home .btn-redirect:hover { background: #3c1fd1; transform: translateY(-3px); box-shadow: 0px 8px 20px rgba(81, 46, 255, 0.5); } .page-home footer { margin-top: 20px; font-size: 0.9rem; color: #888; } .page-home footer a { color: #512EFF; text-decoration: none; } .page-home footer a:hover { text-decoration: underline; } /* -------------------- RECEIPT HOSTING PAGE -------------------- */ /* In hosting.html, change to so these styles apply only to that page. */ /* The full-width nav bar, pinned at the top. It will shift down slightly via JS when scrolling down. */ #floatingNav { position: fixed; z-index: 9999; display: flex; align-items: center; justify-content: space-between; background-color: #fff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Always centre horizontally */ left: 50%; transform: translateX(-50%); /* Internal spacing, shared by both states */ padding: 10px 20px; } /* ----- Docked (full-width, top=0) ----- */ #floatingNav.nav-locked { top: 0; width: 100vw; /* Full viewport width */ border-radius: 0; transition: top 0.5s ease, width 0.5s ease; } /* ----- Floating (slightly narrower, offset from top) ----- */ #floatingNav.nav-floating { top: 20px; width: 90vw; /* A bit narrower to “float” */ border-radius: 16px; transition: top 0.3s ease, width 0.3s ease; } /* Optional: smaller logo in the nav bar */ #floatingNav .nav-logo { width: 80px; height: auto; margin-right: 12px; } /* If .btn-signin doesn’t already have these you can adapt them for the floating style: */ .trace-header .btn-signin { background: #512EFF !important; color: #ffffff !important; border-radius: 8px; padding: 8px 16px; font-weight: bold; transition: background 0.3s ease, transform 0.2s ease; } .page-receipt { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f0f8ff, #e6e8fa); background-size: cover; background-attachment: fixed; } /* Remove conflicting flex container rules that caused offset. Use margin:auto to ensure centring. Provide consistent top/bottom spacing. */ .page-receipt .receipt-container { background: #fff; margin: 20px auto; padding: 25px 55px; max-width: 500px; /* Prevent extreme widths */ width: 100%; border-radius: 20px; border: 1.5px solid rgba(0, 0, 0, 0.1); box-shadow: 0px 12px 18px 0 rgba(0, 0, 0, 0.08); } .page-receipt .hero-title { font-size: 3rem; font-weight: bold; color: #1D2837; margin-top: 100px; margin-bottom: 5px; } .page-receipt .hero-message { font-size: 1rem; color: #475569; margin-bottom: 30px; line-height: 1.6; } .page-receipt .btn-download { display: inline-block; padding: 10px 30px; background: #512EFF; color: #fff; text-decoration: none; border-radius: 8px; font-size: 1rem; font-weight: bold; text-align: center; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0px 6px 15px rgba(81, 46, 255, 0.3); } .page-receipt .btn-download:hover { background: #3c1fd1; transform: translateY(-3px); box-shadow: 0px 8px 20px rgba(81, 46, 255, 0.5); } .page-receipt footer { margin-top: 40px; font-size: 0.9rem; color: #888; } .page-receipt footer a { color: #512EFF; text-decoration: none; } .page-receipt footer a:hover { text-decoration: underline; }