/* =============================== GOOGLE FONT (Add in HTML ) ================================ */ /* */ /* =============================== COLOR SYSTEM (TaxTeams Theme) ================================ */ :root { --navy: #0A1F44; --navy-light: #0F2A5F; --gold: #C9A227; --white: #FFFFFF; --light-gray: #F4F6F9; --text-dark: #1A1A1A; } /* =============================== RESET ================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.7; background: var(--light-gray); color: var(--text-dark); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Playfair Display', serif; letter-spacing: 0.5px; } a { text-decoration: none; color: inherit; transition: 0.3s ease; } .container { max-width: 1200px; margin: auto; padding: 20px; } /* =============================== HEADER (More Elegant) ================================ */ header { display: flex; justify-content: space-between; align-items: center; padding: 22px 60px; background: var(--navy); color: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } header .logo { font-size: 1.9rem; font-weight: 700; letter-spacing: 1px; } header nav a { margin-left: 28px; font-weight: 500; position: relative; } header nav a::after { content: ""; position: absolute; width: 0%; height: 2px; bottom: -5px; left: 0; background: var(--gold); transition: 0.3s ease; } header nav a:hover::after { width: 100%; } /* =============================== HERO (More Premium Feel) ================================ */ .hero { text-align: center; padding: 120px 20px; background: linear-gradient(rgba(10, 31, 68, 0.9), rgba(10, 31, 68, 0.9)), url('../images/hero.jpg') center/cover no-repeat; color: var(--white); } .hero h1 { font-size: 3.3rem; margin-bottom: 20px; } .hero p { font-size: 1.2rem; max-width: 700px; margin: auto; margin-bottom: 35px; opacity: 0.95; } /* =============================== BUTTON (More Modern) ================================ */ .btn { padding: 15px 35px; background: var(--gold); color: var(--navy); font-weight: 600; border-radius: 30px; display: inline-block; transition: 0.3s ease; box-shadow: 0 6px 18px rgba(201, 162, 39, 0.3); } .btn:hover { background: var(--white); transform: translateY(-3px); } /* =============================== SECTIONS ================================ */ section { padding: 80px 20px; } /* =============================== FEATURES (More Refined Cards) ================================ */ .features { display: flex; justify-content: center; flex-wrap: wrap; gap: 25px; } .feature { background: var(--white); padding: 30px; border-radius: 14px; width: 260px; text-align: center; box-shadow: 0 10px 30px rgba(10, 31, 68, 0.08); transition: 0.3s ease; border-top: 4px solid transparent; } .feature:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(10, 31, 68, 0.15); border-top: 4px solid var(--gold); } .feature h2 { margin-bottom: 15px; color: var(--navy); font-size: 1.2rem; } /* =============================== SERVICE GRID (Cleaner + Modern) ================================ */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 35px; } .service-card { background: var(--white); padding: 35px; border-radius: 16px; box-shadow: 0 10px 25px rgba(10, 31, 68, 0.08); transition: 0.3s ease; border-left: 4px solid transparent; } .service-card:hover { transform: translateY(-6px); border-left: 4px solid var(--gold); box-shadow: 0 18px 45px rgba(10, 31, 68, 0.15); } .service-card h2 { margin-bottom: 18px; color: var(--navy); font-size: 1.35rem; } .service-card p { color: #555; font-size: 0.98rem; } /* =============================== FORMS (Cleaner + Corporate) ================================ */ form { background: var(--white); padding: 35px; border-radius: 16px; max-width: 520px; margin: auto; box-shadow: 0 15px 35px rgba(10, 31, 68, 0.1); } form input, form select { width: 100%; padding: 14px; margin-bottom: 18px; border-radius: 8px; border: 1px solid #ddd; transition: 0.3s ease; } form input:focus, form select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2); outline: none; } form button { width: 100%; padding: 14px; background: var(--navy); color: var(--white); font-weight: 600; border: none; border-radius: 30px; cursor: pointer; transition: 0.3s ease; } form button:hover { background: var(--gold); color: var(--navy); } /* =============================== FOOTER (More Polished) ================================ */ footer { text-align: center; padding: 30px; background: var(--navy); color: var(--white); margin-top: 60px; font-size: 0.95rem; letter-spacing: 0.5px; } /* =============================== RESPONSIVE ================================ */ @media (max-width: 768px) { header { flex-direction: column; padding: 20px; } header nav { margin-top: 12px; } .hero h1 { font-size: 2.4rem; } .features { flex-direction: column; align-items: center; } } /* =============================== LOGO REFINEMENT ================================ */ .logo { display: flex; align-items: center; } .logo-text { display: inline-block; line-height: 1; } /* Make "Tax" stronger */ .logo-text .tax { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.9rem; color: var(--white); letter-spacing: 1px; } /* Make "Teams" slightly lighter */ .logo-text .teams { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 1.9rem; color: var(--white); letter-spacing: 1px; } /* Elegant gold accent line */ .logo-underline { width: 65%; height: 3px; background: var(--gold); margin-top: 6px; border-radius: 2px; } /* Subtle hover effect */ .logo:hover .logo-text { transform: translateY(-2px); transition: 0.3s ease; } /* =============================== CLIENT MODAL ================================ */ .client-modal { display: none; position: fixed; inset: 0; background: rgba(10,31,68,0.85); justify-content: center; align-items: center; z-index: 999; } .modal-content { background: var(--white); padding: 45px 35px; border-radius: 16px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.2); animation: slideUp 0.4s ease; position: relative; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .close-btn { position: absolute; top: 15px; right: 18px; font-size: 1.4rem; cursor: pointer; color: var(--navy); } .modal-options { display: flex; justify-content: center; gap: 15px; margin: 20px 0; } .btn-outline { padding: 8px 18px; border: 2px solid var(--navy); background: transparent; color: var(--navy); border-radius: 25px; cursor: pointer; transition: 0.3s ease; } .btn-outline:hover { background: var(--navy); color: var(--white); } .auth-form { display: none; } .auth-form input { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px; border: 1px solid #ddd; } .auth-form button { width: 100%; padding: 12px; background: var(--navy); color: var(--white); border: none; border-radius: 25px; cursor: pointer; transition: 0.3s ease; } .auth-form button:hover { background: var(--gold); color: var(--navy); } .services-hero { position: relative; height: 70vh; background: linear-gradient(rgba(10, 25, 47, 0.85), rgba(10, 25, 47, 0.85)), url('../images/tax-bg.jpg'); /* Optional background image */ background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .services-overlay { width: 100%; padding: 0 20px; } .services-hero h1 { font-size: 3rem; font-family: 'Playfair Display', serif; margin-bottom: 20px; letter-spacing: 1px; } .services-hero p { font-size: 1.2rem; max-width: 650px; margin: 0 auto 30px auto; line-height: 1.6; color: #dcdcdc; } .hero-btn { display: inline-block; padding: 14px 35px; background: white; color: #0a192f; text-decoration: none; font-weight: 600; border-radius: 30px; transition: all 0.3s ease; } .hero-btn:hover { background: #d4af37; /* subtle gold accent */ color: white; transform: translateY(-3px); }