/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } @font-face { font-family: 'Product Sans'; src: url('fonts/ProductSans-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Product Sans'; src: url('fonts/ProductSans-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Product Sans'; src: url('fonts/ProductSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; } body { font-family: 'Roboto', sans-serif; font-weight: 400; background: #fff; color: #000; margin: 0; } /* Home (Google-style landing page) Add: on your index.html This prevents these rules from overriding your other pages. */ body.home { display: flex; flex-direction: column; min-height: 100vh; } body.home main { display: flex; flex-direction: column; align-items: center; flex-grow: 1; padding-top: 10vh; } body.home footer { display: flex; justify-content: space-between; padding: 18px 25px; font-size: 14px; background: #f2f2f2; } body.home footer a { font-weight: 400; text-decoration: none; color: #000; margin-left: 12px; font-size: 14px; } body.home header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 14px; } body.home .nav-left, body.home .nav-right { display: flex; align-items: center; gap: 12px; } body.home .nav-left a:first-child, body.home .nav-right a:first-child { margin-left: 0; } body.home .nav-right .circle { width: 32px; height: 32px; background: #ccc; border-radius: 50%; } body.home #logo { font-family: 'Product Sans', sans-serif; font-size: clamp(72px, 7vw, 84px); font-weight: 500; letter-spacing: -0.5px; text-align: center; margin-bottom: 6px; margin-top: 10vh; user-select: none; text-shadow: 0.3px 0 0 currentColor; } body.home #logo .c { color: #4285f4; } body.home #logo .o1 { color: #ea4335; } body.home #logo .n { color: #fbbc05; } body.home #logo .n2 { color: #34a853; } body.home #logo .o2 { color: #ea4335; } body.home #logo .r { color: #4285f4; } body.home .search-container { position: relative; width: 90%; max-width: 580px; display: flex; flex-direction: column; align-items: center; } body.home .search { width: 100%; padding: 14px 20px; font-size: 16px; border: 1px solid #dfe1e5; border-radius: 24px; outline: none; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); } body.home .search-container.showing-suggestions .search { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } body.home .search:focus { border-color: #4285f4; box-shadow: 0 1px 6px rgba(66, 133, 244, 0.4); } body.home .buttons { margin-top: 28px; } body.home .buttons button { margin: 6px 8px; padding: 10px 20px; font-size: 14px; background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: 400; } body.home .buttons button:hover { border: 1px solid #dadce0; box-shadow: 0 1px 1px rgba(0,0,0,0.1); } body.home .input-wrapper { position: relative; width: 100%; } body.home .suggestions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0; list-style: none; padding: 0; background: white; border: 1px solid #dfe1e5; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 5; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } body.home .suggestions::before { content: ''; display: block; height: 1px; background: #e0e0e0; margin: 0 16px; } body.home .suggestions li { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; color: #6a0dad; } body.home .suggestions li:hover { background: #f1f3f4; } body.home .hidden { display: none; } body.home .subtitle { font-family: 'Product Sans', sans-serif; font-size: 14px; color: #3e3e41; font-weight: normal; margin-top: -5px; margin-bottom: 16px; text-align: center; }