/* main.css (Optimized for Light/Dark Mode) */ /************************************************************* * 1) BASIC GLOBAL STYLES & RESETS *************************************************************/ html { margin: 0; padding: 0; } * { box-sizing: border-box; /* custom scrollbar (WebKit + Firefox) */ scrollbar-width: thin; scrollbar-color: #555555 #333333; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #333333; } ::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 6px; border: 3px solid #333333; } ::-webkit-scrollbar-thumb:hover { background-color: #777777; } /************************************************************* * 2) GLOBAL BODY, FONT, COLORS & MODES *************************************************************/ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; margin: 0; padding: 0; padding-top: 0; /* No padding needed - nav is transparent at top, video starts at top */ color: #fff; /* Default text color (dark mode) */ background: #000; /* Default background (dark mode) */ display: flex; flex-direction: column; min-height: 100vh; overflow: auto; transition: background 0.3s, color 0.3s; } /* When , reaffirm dark styling */ body.dark-mode { background: #000 !important; color: #fff !important; } /* When , switch to light styling */ body.light-mode { background: #fff !important; color: #000 !important; } .hidden-honeypot { display: none; } .grecaptcha-badge { visibility: hidden; } /************************************************************* * 3) CONTAINER & CONTENT *************************************************************/ .container { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 15px; background: transparent; transition: background 0.3s, color 0.3s; } /* Dark mode: keep container transparent over dark body */ body.dark-mode .container { background: transparent !important; color: inherit; } /* Light mode: normal containers get a white background with black text */ body.light-mode .container { background: #ffffff !important; color: #000000 !important; } /* Ensure promo and lookup-hero sections remain unchanged in light mode */ body.light-mode .promo-section .container, body.light-mode .lookup-hero .container { background: transparent !important; color: inherit !important; } .content { margin-top: 10px; margin-bottom: 25px; width: 100%; transition: color 0.3s; } /* Optimized Heading Styles - Modern 2025 Design */ h1 { font-size: 2.75rem; font-weight: 700; line-height: 1.2; margin-top: 0; margin-bottom: 1.5rem; letter-spacing: -0.02em; color: #fff; } h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; margin-top: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.01em; color: #fff; } h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.4; margin-top: 2rem; margin-bottom: 0.75rem; color: #fff; } h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #fff; } .content h1, .content h2, .content h3, .content h4 { color: inherit; } /* Override text color inside .content in light mode */ body.light-mode .content, body.light-mode .content p, body.light-mode .content a { color: #000000 !important; } body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4 { color: #000000 !important; } /* Exceptions: Keep these headings white in both modes */ body.light-mode .header-hero h1.header_title, body.light-mode .header-hero .header_title, body.light-mode .lookup-hero h2.lookup-title, body.light-mode .lookup-hero .lookup-title, body.light-mode .promo-section h2.promo-title, body.light-mode .promo-section .promo-title { color: #fff !important; } body.light-mode .content h1, body.light-mode .content h2, body.light-mode .content h3, body.light-mode .content h4 { color: #000000 !important; } /************************************************************* * 4) NAV & FLYOUT MENU *************************************************************/ /* --- Top nav menu --- */ /* Navigation Menu - Base Styles */ .nav-menu { position: fixed; top: 0; width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 14px 20px; background-color: rgba(0, 0, 0, 0); /* Start transparent - dark mode default */ backdrop-filter: blur(0px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0); transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; z-index: 1300; /* High z-index to ensure menu icon stays above flyout menu */ } /* Scrolled state - dark mode default */ .nav-menu.scrolled { background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } /* Light Mode - White background with dark text */ body.light-mode .nav-menu { background-color: rgba(255, 255, 255, 1) !important; /* Always white in light mode */ backdrop-filter: blur(10px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } body.light-mode .nav-menu.scrolled { background-color: rgba(255, 255, 255, 1) !important; /* Stay white when scrolled */ backdrop-filter: blur(10px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } /* Dark Mode - Transparent to dark transition (handled by JavaScript) */ /* Remove !important flags to allow JavaScript to control the transition */ body.dark-mode .nav-menu { background-color: rgba(0, 0, 0, 0); /* Default transparent - JS will update */ backdrop-filter: blur(0px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0); } body.dark-mode .nav-menu.scrolled { /* Final state at 400px+ scroll - JS will handle transition */ background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } .nav-menu .mode-switch { display: flex; align-items: center; gap: 16px; margin-right: 0; flex-shrink: 0; } .nav-menu .menu-icon { margin-left: auto; flex-shrink: 0; } /* Nav brand link styling */ .nav-brand-link { display: flex; align-items: center; text-decoration: none; color: inherit; transition: opacity 0.2s ease; } .nav-brand-link:hover { opacity: 0.85; } .nav-logo { max-width: 30px; height: auto; display: block; flex-shrink: 0; } .nav-links { display: flex; gap: 8px; /* spacing between nav items */ align-items: center; flex-wrap: wrap; margin-left: 24px; margin-right: 50px; /* Increased gap between nav links and search */ flex-grow: 0; flex-shrink: 0; } .nav-search { margin-left: 0; margin-right: 16px; flex-shrink: 0; } /* Navigation Links - Base Styles (Dark Mode Default) */ .nav-menu .nav-links a, .menu-icon { color: #fff; /* White text for dark mode - ensures legibility */ text-decoration: none; font-size: 15px; font-weight: 500; margin: 0; transition: all 0.3s ease; padding: 8px 12px; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Add subtle shadow for legibility on transparent bg */ } .nav-menu .nav-links a:hover, .menu-icon:hover { color: #26c4ff; transform: translateY(-1px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Light Mode - Dark text on white background */ body.light-mode .nav-menu .nav-links a, body.light-mode .menu-icon { color: #000 !important; /* Dark text in light mode */ text-shadow: none !important; /* No shadow needed on white background */ } body.light-mode .nav-menu .nav-links a:hover, body.light-mode .menu-icon:hover { color: #0054ff !important; /* Blue hover in light mode */ text-shadow: none !important; } body.light-mode .nav-menu .nav-links a::after { background: #0054ff; /* Blue underline in light mode */ } /* Dark Mode - White text on dark/transparent background */ body.dark-mode .nav-menu .nav-links a, body.dark-mode .menu-icon { color: #fff !important; /* White text in dark mode */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Stronger shadow for legibility */ } body.dark-mode .nav-menu .nav-links a:hover, body.dark-mode .menu-icon:hover { color: #26c4ff !important; /* Cyan hover in dark mode */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } body.dark-mode .nav-menu .nav-links a::after { background: #26c4ff; /* Cyan underline in dark mode */ } /* Ensure nav logo is always visible */ .nav-logo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } body.light-mode .nav-logo { filter: none; } body.dark-mode .nav-logo { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .nav-menu .nav-links a::after { content: ''; position: absolute; bottom: 4px; left: 12px; width: 0; height: 2px; background: #26c4ff; transition: width 0.3s ease; } .nav-menu .nav-links a:hover::after { width: calc(100% - 24px); } .menu-icon { cursor: pointer; font-size: 28px; color: #fff; /* Default white for dark mode */ padding: 4px 8px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; pointer-events: auto; z-index: 1300; /* Above flyout menu (1200) and backdrop (1100) */ position: relative; } .menu-icon:hover { transform: scale(1.1); } /* Menu icon colors handled by nav-links rules above */ .menu-close { cursor: pointer; font-size: 32px; font-weight: 300; color: #fff; line-height: 1; padding: 8px 12px; transition: all 0.2s ease; display: inline-block; user-select: none; -webkit-user-select: none; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } /* Light mode override for menu close button */ body.light-mode .menu-close { color: #000 !important; } body.light-mode .menu-close:hover { color: #0054ff !important; background: rgba(0, 84, 255, 0.1) !important; } /* Dark mode - ensure white text */ body.dark-mode .menu-close { color: #fff !important; } .menu-close:hover { color: #26c4ff; background: rgba(38, 196, 255, 0.1); transform: rotate(90deg); } body.dark-mode .menu-close:hover { color: #26c4ff !important; background: rgba(38, 196, 255, 0.1) !important; } .menu-close:active { transform: rotate(90deg) scale(0.95); } /************************************************************* * FLYOUT MENU - MODERN SLIDE-IN NAVIGATION *************************************************************/ /* Backdrop - overlays entire page when menu is open */ .flyout-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1100; cursor: pointer; } .flyout-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; } /* Flyout Menu Panel */ .flyout-menu { position: fixed; top: 0; right: 0; width: 320px; height: 100vh; background: #1a1a1a; border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.8); padding: 70px 24px 24px 24px; overflow-y: auto; overflow-x: hidden; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1200; display: flex; flex-direction: column; gap: 4px; } .flyout-menu.open { transform: translateX(0); } /* Light mode styling */ body.light-mode .flyout-menu { background: #ffffff !important; border-left: 1px solid rgba(0, 0, 0, 0.12) !important; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15) !important; } /* Dark mode styling */ body.dark-mode .flyout-menu { background: #1a1a1a !important; border-left: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.8) !important; } /* Menu Links */ .flyout-menu a { display: block; color: #ffffff; padding: 13px 16px; font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 10px; margin-bottom: 0; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; line-height: 1.3; position: relative; overflow: hidden; } .flyout-menu a::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #26c4ff; transform: scaleY(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 2px 2px 0; } .flyout-menu a:hover::before { transform: scaleY(1); } /* Light mode links */ body.light-mode .flyout-menu a { color: #1a1a1a !important; } body.light-mode .flyout-menu a::before { background: #0054ff; } body.light-mode .flyout-menu a:hover { background: rgba(0, 84, 255, 0.08) !important; color: #0054ff !important; transform: translateX(4px); } /* Dark mode links */ body.dark-mode .flyout-menu a { color: #ffffff !important; } body.dark-mode .flyout-menu a:hover { background: rgba(38, 196, 255, 0.12) !important; color: #26c4ff !important; transform: translateX(4px); } /* Close button - styled differently */ .flyout-menu .flyout-close { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px !important; color: #999 !important; opacity: 0.8; text-align: center; font-weight: 600; } .flyout-menu .flyout-close::before { display: none; } body.light-mode .flyout-menu .flyout-close { border-top: 1px solid rgba(0, 0, 0, 0.1) !important; color: #666 !important; } body.light-mode .flyout-menu .flyout-close:hover { opacity: 1; color: #1a1a1a !important; background: rgba(0, 0, 0, 0.05) !important; transform: none; } body.dark-mode .flyout-menu .flyout-close:hover { opacity: 1; color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; transform: none; } /* Custom scrollbar for flyout menu */ .flyout-menu::-webkit-scrollbar { width: 8px; } .flyout-menu::-webkit-scrollbar-track { background: transparent; } .flyout-menu::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; } body.light-mode .flyout-menu::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); } /* Mobile responsive */ @media (max-width: 768px) { .flyout-menu { width: 85%; max-width: 400px; padding: 60px 20px 20px 20px; gap: 3px; } .flyout-menu a { padding: 12px 14px; font-size: 14px; } .flyout-menu .flyout-close { padding-top: 14px; } } @media (max-width: 480px) { .flyout-menu { width: 100%; max-width: 100%; padding: 55px 16px 16px 16px; gap: 2px; } .flyout-menu a { padding: 11px 12px; font-size: 14px; } .flyout-menu .flyout-close { padding-top: 12px; } } /************************************************************* * 5) MODE SWITCH (Dark/Light) *************************************************************/ .mode-switch { display: flex; align-items: center; } .mode-switch input { display: none; } .mode-switch label { width: 35px; height: 15px; background: #ccc; border-radius: 25px; position: relative; cursor: pointer; margin-left: 0; flex-shrink: 0; transition: background 0.3s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Light mode - darker toggle for visibility */ body.light-mode .mode-switch label { background: #999 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } /* Dark mode - lighter toggle for visibility */ body.dark-mode .mode-switch label { background: #666 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } .mode-switch label::after { content: ''; width: 11px; height: 11px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s, background 0.3s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .mode-switch input:checked + label::after { transform: translateX(20px); } /************************************************************* * 6) HEADER & HERO *************************************************************/ /* Hero container */ .header-hero { position: relative; width: 100%; min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; top: 0; left: 0; transition: color 0.3s; } /* Background video */ .header-hero video { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; object-fit: cover; z-index: -1; } /* Content wrapper to constrain width and stack vertically */ .hero-content { width: 90%; max-width: 900px; display: flex; flex-direction: column; align-items: center; /* center-align headings like torq.io */ text-align: center; color: #fff; z-index: 1; padding-top: 80px; /* Add padding to content instead of container */ } .title-section .logo-title .bold { font-weight: 700; } .title-section .logo-title .thin { font-weight: 300; } .header_title { font-size: 4rem; font-weight: 700; padding-top: 0; margin: 0 0 1.5rem; line-height: 1.1; transition: color 0.3s; letter-spacing: -0.03em; color: #fff !important; /* Always white in both modes */ } /* Force header_title to stay white in light mode */ body.light-mode .header_title, body.light-mode .header-hero .header_title { color: #fff !important; } /* Subtitle / call to action */ .header_sub_title { font-size: 1.5rem; font-weight: 400; margin: 0 0 2.5rem; line-height: 1.5; transition: color 0.3s; color: rgba(255, 255, 255, 0.9); max-width: 700px; } /* Hero CTA button — now matches your lookup-hero button style */ .hero-btn { width: auto; min-width: 200px; max-width: none; padding: 16px 32px; border: none; border-radius: 8px; font-size: 1.125rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); border: 1px solid #26c4ff; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.3s ease; box-sizing: border-box; box-shadow: 0 4px 12px rgba(38, 196, 255, 0.3); } /* Hover state */ .hero-btn:hover { background: linear-gradient(90deg, #0048d4 0%, #007aff 100%); border: 1px solid #ffffff; } /* Disabled state */ .hero-btn:disabled { background: #5a5a5a; cursor: not-allowed; } /* Logo in nav styling moved to nav-brand-link section */ .hero-btn2 { width: 100%; max-width: 240px; padding: 15px 55px; border: none; border-radius: 4px; font-size: 1rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); border: 1px solid #26c4ff; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.3s; box-sizing: border-box; } /* Hover state */ .hero-btn2:hover { background: linear-gradient(90deg, #0048d4 0%, #007aff 100%); border: 1px solid #ffffff; } /************************************************************* * 7) LAYOUT SECTIONS (TOP/BOTTOM ROWS, QUADRANTS) *************************************************************/ .top-row, .bottom-row { display: flex; flex-direction: column; gap: 20px; width: 100%; } .left-column, .right-column { width: 100%; } .right-column .quadrant2 { margin-bottom: 20px; } /* Hide ad sections by default */ .ad-container, .ad-body-right { float: right; display: none; padding: 30px; margin-left: 30px; margin-top: 20px; } .ad1 { display: none; background: #111; padding: 10px; border-radius: 8px; } .quadrant3 { margin-top: 20px; } .bottom-row { margin-top: 20px; } .ad2 { display: none; background: #111; padding: 10px; border-radius: 8px; } .body-section-img-wrapper { float: right; display: block; padding: 30px; margin-left: 30px; margin-top: 20px; } .body-section-img { display: inline-block; max-width: 300px; width: 100%; height: auto; border: 1px solid #fff; border-radius: 5px; } /************************************************************* * 8) RESPONSIVE BREAKPOINTS *************************************************************/ @media (min-width: 768px) { .top-row { flex-direction: row; align-items: flex-start; } .left-column { width: calc(65% - 200px); } .right-column { width: calc(35% + 200px); display: flex; flex-direction: column; } .bottom-row { flex-direction: row; } .ad2 { width: 20%; } .quadrant4 { width: 80%; } .record-box { max-width: 450px; box-sizing: border-box; } } /************************************************************* * 9) UPDATED BUTTON STYLES & BUTTON-ROW *************************************************************/ /* Base .dns-button rules (unchanged) */ .dns-button { display: inline-block; font-size: 14px; color: #fff !important; border: 2px solid #fff; border-radius: 50px; padding: 12px 0; text-align: center; background-color: transparent; text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; box-sizing: border-box; width: 100%; min-width: 180px; } /* Hover (dark mode) */ .dns-button:hover { background-color: #fff; color: #000 !important; } /* Light-mode overrides */ body.light-mode .dns-button { color: #000 !important; border-color: #000 !important; } body.light-mode .dns-button:hover { background-color: #000 !important; color: #fff !important; } /* --- Default grid for .button-row (up to 4 columns) --- */ .button-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; justify-content: center; margin: 20px auto 0; width: 100%; max-width: calc(4 * 180px + 3 * 20px); box-sizing: border-box; } /* --- Exactly six buttons: force 3×2 grid --- */ .button-row.six-buttons { grid-template-columns: repeat(3, 1fr); max-width: calc(3 * 180px + 2 * 20px); } /* --- Exactly four or eight buttons: force 4 columns --- */ .button-row.four-buttons, .button-row.eight-buttons { grid-template-columns: repeat(4, minmax(180px, 1fr)); max-width: calc(4 * 180px + 3 * 20px); } /* --- TABLET (≤992px): collapse any variant to 2 columns --- */ @media (max-width: 992px) { .button-row.six-buttons, .button-row.four-buttons, .button-row.eight-buttons { grid-template-columns: repeat(2, minmax(180px, 1fr)); max-width: calc(2 * 180px + 1 * 20px); } } /* --- MOBILE (≤600px): 1 button per row, centered, full width --- */ @media (max-width: 600px) { .button-row { grid-template-columns: 1fr !important; max-width: 95%; justify-items: center; gap: 12px; margin-top: 15px; } .button-row .dns-button { width: 100%; max-width: none; font-size: 14px; padding: 10px 0; } } /************************************************************* * 10) FOOTER (Updated with PNG Social Icons & Custom Colors) *************************************************************/ /* Base Footer Styles */ .site-footer { background-color: #000; color: #fff; border-top: 1px solid #191919; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6; } /* Top Section Layout */ .footer-top { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 60px 20px 40px; box-sizing: border-box; } /* Brand / Logo + DNSai Title */ .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; /* <-- controls spacing between logo and title */ } .footer-logo { max-width: 140px; height: auto; margin-bottom: 0; /* remove the old 12px bottom margin */ } .title-section { margin: 0 0 20px; /* keep bottom margin for spacing below if you like */ } .logo-title { margin: 0; /* reset default h1 top/bottom margins */ } .title-section .logo-title .bold { font-weight: 700; } .title-section .logo-title .thin { font-weight: 300; } /* Footer Navigation Columns */ .footer-menu { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 40px; } .footer-column { flex: 1 1 140px; min-width: 120px; } .footer-column h4 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: #fff; } .footer-column ul { list-style: none; margin: 0; padding: 0; } .footer-column li { margin-bottom: 8px; } .footer-column a { color: #fff; text-decoration: none; transition: color 0.3s; } .footer-column a:hover { color: #26c4ff; text-decoration: underline; } /* Office Address + Social Icons */ .footer-address { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-address h4 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: #fff; } .footer-address p { margin: 0 0 12px; color: #fff; } .footer-address a { color: #fff; text-decoration: none; transition: color 0.3s; } .footer-address a:hover { color: #26c4ff; text-decoration: underline; } .footer-address .social-icons { display: flex; gap: 16px; margin-top: 16px; } .footer-address .social-icons img { width: 24px; height: 24px; transition: opacity 0.3s; } .footer-address .social-icons img:hover { opacity: 0.75; } /* Bottom Row: Privacy / Terms / Copyright */ .footer-bottom { background-color: #191919; text-align: center; padding: 20px 10px; border-top: 1px solid #333; font-size: 13px; color: #fff; } .footer-bottom p { margin: 4px 0; } .footer-bottom a { color: #fff; text-decoration: none; margin: 0 8px; transition: color 0.3s; } .footer-bottom a:hover { color: #26c4ff; text-decoration: underline; } /* Responsive Adjustments */ @media (max-width: 992px) { .footer-top { padding: 40px 20px 30px; gap: 24px; } } @media (max-width: 768px) { /* Stack everything into one centered column */ .footer-top { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 30px 10px 20px; max-width: 360px; margin: 0 auto; } /* Navigation columns stack vertically */ .footer-menu { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; } .footer-column { margin-bottom: 0; text-align: center; } .footer-column h4 { font-size: 0.9rem; margin-bottom: 6px; } .footer-column li { margin-bottom: 4px; } /* Address block tightening */ .footer-address { margin-top: 0; } .footer-address h4 { font-size: 0.9rem; margin-bottom: 6px; } .footer-address p { font-size: 13px; margin-bottom: 6px; } .footer-address .social-icons { gap: 8px; margin-top: 8px; justify-content: center; } .footer-address .social-icons img { width: 20px; height: 20px; } /* Shrink the bottom row */ .footer-bottom { padding: 10px 8px; font-size: 12px; } } /* Light-mode overrides for footer */ body.light-mode .site-footer { background-color: #fff !important; color: #000 !important; border-top: 1px solid #E6E6E6; } body.light-mode .footer-column h4 { color: #000 !important; } body.light-mode .footer-column a, body.light-mode .footer-address a { color: #000 !important; } body.light-mode .footer-column a:hover, body.light-mode .footer-address a:hover { color: #0054ff !important; } body.light-mode .footer-address p { color: #000 !important; } body.light-mode .footer-bottom { background-color: #E6E6E6 !important; color: #000 !important; border-top: 1px solid #E6E6E6; } body.light-mode .footer-bottom a { color: #000 !important; } body.light-mode .footer-bottom a:hover { color: #0054ff !important; } body.light-mode .footer-address h4 { color: #000 !important; } /************************************************************* * 11) COMPANY-INFO BLOCK, DNS RECORDS, ETC. *************************************************************/ .company-info-block { display: flex; align-items: center; margin-top: 15px; } .company-info-block img { width: 24px; height: 24px; margin-right: 8px; } /* DNS Records Section */ .dns-records-section { margin-top: 20px; padding: 20px; background-color: #111; border-radius: 8px; transition: background 0.3s, color 0.3s; } .dns-records-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; } .dns-records-header h2 { margin: 0; font-size: 24px; } .records-grid { display: grid; grid-template-columns: 1fr; grid-gap: 15px; margin-top: 20px; } .record-box { background-color: #222; padding: 15px; border-radius: 8px; border: 1px solid #333; max-width: 1050px; box-sizing: border-box; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; } .record-box h3 { margin-top: 0; margin-bottom: 5px; font-size: 16px; color: #40a8ff; } .record-box p { margin: 0; padding: 0; font-size: 13px; line-height: 1.4em; } /* Light-mode overrides for DNS records */ body.light-mode .dns-records-section { background-color: #f1f1f1 !important; } body.light-mode .dns-records-header, body.light-mode .dns-records-header h2, body.light-mode .dns-records-header p, body.light-mode .dns-records-header span { color: #000 !important; } body.light-mode .record-box { background-color: #fff !important; border: 1px solid #ccc !important; } body.light-mode .record-box h3 { color: #0054ff !important; } body.light-mode .record-box p { color: #000 !important; } /************************************************************* * 12) FORM INPUTS & NAV-SEARCH INPUTS *************************************************************/ .form-input { font-size: 12px; width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #555; background: #444; color: #fff; box-sizing: border-box; transition: background 0.3s, color 0.3s, border 0.3s; } .form-input::placeholder { color: #bbb; } /* Light-mode override for standard inputs */ body.light-mode .form-input { background-color: #fff !important; color: #000 !important; border: 1px solid #ccc !important; } body.light-mode .form-input::placeholder { color: #888 !important; } /* Nav form input */ .nav-search-input { font-size: 12px; width: 100%; max-width: 135px; padding: 3px; margin: 10px 0; border-radius: 5px; border: 1px solid #555; background: #444; color: #fff; box-sizing: border-box; transition: background 0.3s, color 0.3s, border 0.3s; } .nav-search-input::placeholder { color: #bbb; } /* Light mode override for nav search input */ body.light-mode .nav-search-input { background-color: #fff !important; color: #000 !important; border: 1px solid #ccc !important; } body.light-mode .nav-search-input::placeholder { color: #888 !important; } /* Dark mode - ensure nav search input is visible */ body.dark-mode .nav-search-input { background-color: #444 !important; color: #fff !important; border: 1px solid #555 !important; } body.dark-mode .nav-search-input::placeholder { color: #bbb !important; } button { width: 55%; padding: 2px; margin: 10px 0; border-radius: 5px; border: 1px solid #555555; box-sizing: border-box; background: linear-gradient(to bottom, #0054FF, #0447D3); color: white; cursor: pointer; transition: background 0.3s; } button:disabled { opacity: 0.5; cursor: not-allowed; } button:hover:not(:disabled) { background: linear-gradient(to bottom, #0447D3, #0054FF); } .submit-button { background: linear-gradient(to bottom, #0054FF, #0447D3); color: white; border: none; cursor: pointer; transition: background 0.3s; width: auto; margin: 5px; } .submit-button:disabled { opacity: 0.5; cursor: not-allowed; } .submit-button:hover:not(:disabled) { background: linear-gradient(to bottom, #0447D3, #0054FF); } /* Nav form button */ .nav-submit-button { background: linear-gradient(to bottom, #0054ff, #0447d3); color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; font-size: 11px; padding: 4px 10px; width: auto; margin-left: 2px; } .nav-submit-button:disabled { opacity: 0.5; cursor: not-allowed; } .nav-submit-button:hover:not(:disabled) { background: linear-gradient(to bottom, #0447d3, #0054ff); } /* LOOKUP INPUT (lookup-hero) remains same in both modes */ .lookup-input { width: 100%; padding: 15px 20px; border: none; border-radius: 4px; font-size: 1rem; color: #222; /* Always dark text */ background-color: #fff; /* Always white background */ transition: box-shadow 0.3s, background 0.3s; outline: none; box-sizing: border-box; } .lookup-input::placeholder { color: #888; opacity: 1; } .lookup-input:focus { box-shadow: 0 0 0 3px rgba(38, 196, 255, 0.6); background-color: #fcfcfc; } /* Buttons in lookup-hero remain same in both modes, now with a white 1px border */ .lookup-btn { width: 100%; padding: 15px 0; border: 1px solid #26c4ff; /* ← added white border */ border-radius: 4px; font-size: 1rem; font-weight: 600; color: #fff; background: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%); cursor: pointer; transition: background 0.3s; box-sizing: border-box; } .lookup-btn:hover { background: linear-gradient(90deg, #0048d4 0%, #007aff 100%); border: 1px solid #ffffff; } .lookup-btn:disabled { background: #5a5a5a; cursor: not-allowed; } /************************************************************* * 13) NAV-SEARCH FORM STYLING *************************************************************/ /* Nav search styling moved up - see nav-menu section */ .nav-search form { display: flex; flex-wrap: nowrap; align-items: center; } .nav-search form input { margin-right: 2px; } .nav-search form button { margin-left: 2px; } /************************************************************* * 15) HOMEPAGE-SPECIFIC STYLES (Unaffected by mode) *************************************************************/ .cta-btn { display: inline-block; background: #26c4ff; color: #fff; padding: 12px 28px; border-radius: 6px; font-size: 15px; text-decoration: none; transition: opacity 0.25s; margin-top: 1rem; } .cta-btn:hover { opacity: 0.85; } /* Feature Grid */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem; margin-top: 2rem; } @media (min-width: 992px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feature { background: linear-gradient(to bottom, #1f1f1f, #191919); /* Gradient from #1f1f1f to #000000 */ border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 20px; text-align: center; color: #fff; display: block; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-decoration: none !important; } .feature:visited { text-decoration: none !important; } .feature:active { text-decoration: none !important; } .feature h3 { font-size: 18px; margin-bottom: 10px; text-decoration: none !important; } .feature p { font-size: 14px; line-height: 1.45; text-decoration: none !important; } .feature i { font-size: 44px; margin-bottom: 10px; display: block; color: #26c4ff; } /* Light-mode override for feature cards */ body.light-mode .feature { background: #f9f9f9 !important; border-color: #e5e5e5 !important; color: #282828 !important; } body.light-mode .feature h3, body.light-mode .feature p { color: #282828 !important; } body.light-mode .feature i { color: #0054ff !important; } /************************************************************* * 16) LOOKUP HERO SECTION * (Full-Width Background & Centered Content; Same in both modes) *************************************************************/ /* Make section span full viewport width */ .lookup-hero { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; background: linear-gradient(135deg, #0a2a54 0%, #104a8a 100%); padding: 80px 0; box-sizing: border-box; } .lookup-hero .container { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .lookup-hero .lookup-row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; width: 100%; } .lookup-hero .lookup-content-col { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; } .lookup-hero .lookup-title { font-size: 2.5rem; line-height: 1.2; color: #fff !important; /* Always white in both modes */ margin-bottom: 1rem; font-weight: 600; } /* Force lookup-title to stay white in light mode */ body.light-mode .lookup-hero .lookup-title, body.light-mode .promo-section.lookup-hero .lookup-title { color: #fff !important; } .lookup-hero .lookup-subtitle { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; max-width: 500px; } .lookup-form-wrapper { width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border-radius: 8px; padding: 30px 25px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); box-sizing: border-box; } .lookup-hero .lookup-form { display: flex; flex-direction: column; width: 100%; align-items: stretch; gap: 12px; box-sizing: border-box; } .lookup-image-col { display: flex; justify-content: center; align-items: center; width: 100%; } .lookup-image-col i { font-size: 140px; color: rgba(255, 255, 255, 0.85); transition: color 0.3s; } .lookup-image-col i:hover { color: #26c4ff; } @media (max-width: 768px) { .lookup-hero { padding: 60px 0; } .lookup-hero .container { padding: 0 15px; } .lookup-hero .lookup-row { gap: 20px; } .lookup-hero .lookup-title { font-size: 2rem; } .lookup-hero .lookup-subtitle { font-size: 0.9rem; } .lookup-hero .lookup-form { gap: 10px; } .lookup-hero .lookup-input { padding: 12px 16px; font-size: 0.95rem; } .lookup-hero .lookup-btn { padding: 12px 0; font-size: 0.95rem; } .lookup-image-col i { font-size: 100px; } } /************************************************************* * 17) PROMO SECTION (Full-Width Gradient Background + Two-Column Layout) * (Same in both modes) *************************************************************/ .promo-section { width: 100%; background: linear-gradient(135deg, #000080 0%, #0F80FF 100%); padding: 60px 0; color: #fff; } .promo-section .container { max-width: 1100px; margin: 0 auto; padding: 0 15px; } .promo-section .promo-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* UPDATED: center images in their column */ .promo-section .promo-image-col { flex: 0 0 30%; max-width: 30%; display: flex; flex-direction: column; /* stack image + heading */ justify-content: center; align-items: center; text-align: center; /* center the H2 under the image */ } /* give a little breathing room under the logo */ .promo-section .promo-image-col h2 { margin-top: 0.75rem; } .promo-section .promo-content-col { flex: 0 0 60%; max-width: 60%; } .promo-section .promo-image-col img { display: block; width: 100%; height: auto; border-radius: 6px; } .promo-section .promo-title { font-size: 34px; line-height: 40px; margin-bottom: 12px; color: #fff !important; /* Always white in both modes */ } /* Force promo-title to stay white in light mode */ body.light-mode .promo-section .promo-title { color: #fff !important; } .promo-section .promo-subtitle { font-size: 15px; line-height: 22px; margin-bottom: 25px; max-width: 550px; } .promo-section ul.promo-features { list-style: none; padding: 0; margin: 0; } /* ==== NEW: align label + description ==== */ .promo-section ul.promo-features li { display: flex; align-items: flex-start; margin-bottom: 18px; font-size: 15px; line-height: 1.4; } .promo-section ul.promo-features li i { font-size: 26px; margin-right: 12px; margin-top: 4px; color: #fff; flex-shrink: 0; } .promo-section ul.promo-features li .feature-label { display: inline-block; width: 200px; flex-shrink: 0; font-weight: bold; padding-top: 7px; } .promo-section ul.promo-features li .feature-desc { flex: 1; } /* ==== end new ==== */ @media (max-width: 768px) { .promo-section { padding: 40px 0; } .promo-section .promo-row { flex-direction: column-reverse; gap: 16px; } .promo-section .promo-image-col, .promo-section .promo-content-col { flex: 0 0 100%; max-width: 100%; } .promo-section .promo-title { font-size: 26px; line-height: 32px; margin-bottom: 10px; } .promo-section .promo-subtitle { font-size: 14px; line-height: 20px; margin-bottom: 20px; max-width: 100%; } .promo-section ul.promo-features li { flex-direction: column; margin-bottom: 16px; } .promo-section ul.promo-features li .feature-label { width: auto; margin-bottom: 4px; } .promo-section ul.promo-features li i { margin-bottom: 8px; } } /* ==== IMAGE-SIZING UTILITIES ==== */ .promo-image-300 { max-width: 300px; width: 100%; height: auto; } .promo-image-200 { max-width: 200px; width: 100%; height: auto; } .promo-image-100 { max-width: 100px; width: 100%; height: auto; } .promo-image-de { max-width: 235px; width: 100%; height: auto; filter: drop-shadow(0 0 18px #0054FF); transition: filter 0.3s ease-in-out; } .promo-image-de:hover { filter: drop-shadow(0 0 45px #26B6FE); } /* makes the H2 link white, H2 size, no underline, and red on hover */ .promo-image-heading { font-size: 2rem; /* approx H2 size—adjust if your global H2 is different */ color: #fff; text-decoration: none; transition: color 0.2s ease-in-out; } .promo-image-heading:hover { filter: drop-shadow(0 0 45px #26B6FE); color: #E6E6E6; } /* ────────────────────────────────────────────── FORCE promo-section CONTENT to stay white (undoes the generic body.light-mode .content rule) ────────────────────────────────────────────── */ body.light-mode .promo-section .content, body.light-mode .promo-section .content p, body.light-mode .promo-section .content h1, body.light-mode .promo-section .content h2, body.light-mode .promo-section .content h3, body.light-mode .promo-section .content ul, body.light-mode .promo-section .content li, body.light-mode .promo-section .content a.hero-btn2 { color: #fff !important; } /* Force specific headings to stay white in both modes */ body.light-mode .promo-section .promo-title, body.light-mode .promo-section h2.promo-title, body.light-mode .header-hero .header_title, body.light-mode .lookup-hero .lookup-title, body.light-mode .promo-section.lookup-hero .lookup-title { color: #fff !important; } /* ensure your “Bulk Lookup” button stays styled as in dark-mode */ body.light-mode .promo-section .hero-btn2 { background: linear-gradient(90deg, #26c4ff 0%, #0054ff 100%) !important; border: 1px solid #26c4ff !important; color: #fff !important; } /************************************************************* * 18) INFO CARD SECTION: Equal-Height Cards & No Hover Bounce *************************************************************/ .info-card-section { padding: 30px 10px; background-color: transparent; } /* Info cards use same grid layout as feature-grid */ .info-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2rem; margin-top: 2rem; } @media (min-width: 992px) { .info-cards { grid-template-columns: repeat(3, 1fr); } } /* Info cards use same styling as feature cards */ .info-card { background: linear-gradient(to bottom, #1f1f1f, #191919); /* Gradient from #1f1f1f to #000000 */ border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 20px; text-align: center; color: #fff; display: block; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease; } .info-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-decoration: none !important; } .info-card:visited { text-decoration: none !important; } .info-card:active { text-decoration: none !important; } .info-card img { width: 100%; max-width: 150px; height: auto; border-radius: 4px; margin-bottom: 12px; display: block; } .info-card h3 { font-size: 18px; margin-bottom: 10px; text-decoration: none !important; } .info-card p { font-size: 14px; line-height: 1.45; text-decoration: none !important; } .info-card i { font-size: 44px; margin-bottom: 10px; display: block; color: #26c4ff; } /* Light-mode override for info cards */ body.light-mode .info-card { background: #f9f9f9 !important; border-color: #e5e5e5 !important; color: #282828 !important; } body.light-mode .info-card h3, body.light-mode .info-card p { color: #282828 !important; } body.light-mode .info-card i { color: #0054ff !important; } /* If you need to tweak the card container's background too: */ body.light-mode .info-card-section { background-color: transparent !important; /* keep parent transparent */ } /************************************************************* * 19) LEGACY SECTION STYLING (IF NECESSARY) *************************************************************/ section#overview p { margin-bottom: 1rem; } /************************************************************* * 20) SOCIAL-PROOF LIST STYLING *************************************************************/ .social-proof-list { columns: 2 340px; column-gap: 2rem; list-style: disc inside; /* ← use normal bullets */ padding-left: 1rem; font-size: 15px; color: #fff; margin-top: 2rem; } .social-proof-list li { margin-bottom: 0.5rem; } /* Light-mode override for social-proof list */ body.light-mode .social-proof-list { color: #282828 !important; } /************************************************************* * 21) AD CONTAINER *************************************************************/ .ad-container { margin-top: 4rem; text-align: center; } .ad-container iframe { border: 0; width: 300px; height: 250px; } /************************************************************* * 22) ADDITIONAL MEDIA QUERIES FOR MOBILE *************************************************************/ @media (max-width: 768px) { .container { max-width: 768px; margin: 0 auto; padding: 15px; } /* Mobile Heading Sizes */ h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } .header_title { font-size: 2.5rem; } .header_sub_title { font-size: 1.25rem; } .header-hero { min-height: 500px; padding-top: 0; } .hero-content { padding-top: 60px; } /* Mobile Navigation */ body { padding-top: 0; /* No padding needed since nav is transparent at top */ } .nav-menu { padding: 10px 12px; flex-wrap: nowrap; align-items: center; } .nav-links { display: none; /* Hide nav links on mobile, show in flyout menu */ } .nav-menu .nav-links a { font-size: 14px; padding: 6px 8px; /* Color handled by mode-specific rules */ } .nav-search { display: flex; order: 2; margin-left: auto; margin-right: 8px; flex-shrink: 0; } .nav-logo { max-width: 24px; } .mode-switch { gap: 12px; } .nav-links { margin-left: 12px; margin-right: 20px; } .nav-search form { display: flex; width: 100%; max-width: 180px; } .nav-search form input { max-width: 120px; font-size: 12px; padding: 4px 8px; } .nav-submit-button { font-size: 11px; padding: 4px 10px; } .menu-icon { font-size: 26px; order: 3; /* Color handled by mode-specific rules */ } .mode-switch { order: 1; } /* Flyout menu mobile styles defined in main flyout section above */ .dns-records-section { font-size: 9pt; max-width: 100%; } .record-box { font-size: 9px; max-width: 400px; padding-right: 5px; min-width: 350px; } } /* Tablet Responsive */ @media (min-width: 769px) and (max-width: 1024px) { .nav-links { gap: 6px; } .nav-menu a { font-size: 14px; margin: 0 8px; /* Color handled by mode-specific rules */ } h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; } .nav-search { max-width: 160px; } } /* Large Desktop - Optimize for wide screens */ @media (min-width: 1400px) { .nav-menu { padding: 18px 40px; } .nav-menu a { font-size: 16px; margin: 0 16px; /* Color handled by mode-specific rules */ } .nav-links { gap: 12px; } } /************************************************************* * 23) LIGHT MODE OVERRIDES CONTINUED *************************************************************/ /* Label & value color fixes within summary box */ body.light-mode .summary-box span[style*="font-weight:bold; font-size:16px; color:#fff;"] { color: #000 !important; } body.light-mode .summary-box span[style*="font-size:18px; color:#FC6FCF;"] { color: #a9005f !important; } body.light-mode .summary-box span[style*="color:#97B8D5;"] { color: #000080 !important; } body.light-mode .summary-box span[style*="color:#D3D212;"] { color: #cc5500 !important; } /************************************************************* * END OF STYLESHEET *************************************************************/