html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.centerTitle {
text-align: center;
font-size: 16px;
font-weight: bolder;
}
.modal-content {
background-color:#ffffff !important;
}
.app-branding {
height: 88px;
padding-top: 1rem;
padding-left: 1rem;
margin-bottom: 1rem;
}
.app-branding .logo-icon {
width: 78px;
height: 78px;
}
.app-branding .logo-text {
color: #0F6CB2 !important;
font-size: 2.25rem;
font-weight: 600;
vertical-align: top;
}
.lppics {
position: relative;
overflow: hidden;
display: inline-block;
border-radius: 9%;
}
.lppics img {
display: block;
max-width: 100%;
height: auto;
border-radius: 9%;
}
.lppics::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 1) 100%);
z-index: 1;
}
.image-with-blurred-edges {
position: relative;
display: inline-block;
}
.image-with-blurred-edges img {
display: block;
width: 100%;
height: auto;
border-radius: 8%;
}
.fade-border-image {
mask-image: linear-gradient(rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 1) 95%);
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-img {
position: relative;
margin: 60px 0 0 60px;
}
.about .about-img:before {
position: absolute;
inset: -60px 0 0 -60px;
z-index: -1;
content: "";
background: url("../assets/img/about-bg.png") top left;
background-repeat: no-repeat;
}
@media (max-width: 575px) {
.about .about-img {
margin: 30px 0 0 30px;
}
.about .about-img:before {
inset: -30px 0 0 -30px;
}
}
.about h3 {
color: var(--color-secondary);
font-family: var(--font-secondary);
font-weight: 300;
font-size: 32px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.about h3 {
font-size: 28px;
}
}
.about .nav-pills {
border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}
.about .nav-pills li + li {
margin-left: 20px;
}
.about .nav-link {
background: none;
font-size: 21px;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: -2px;
border-radius: 0;
font-family: var(--font-secondary);
}
.about .nav-link.active {
color: var(--color-primary);
background: none;
border-bottom: 3px solid var(--color-primary);
}
@media (max-width: 575px) {
.about .nav-link {
font-size: 16px;
}
}
.about .tab-content h4 {
font-size: 18px;
margin: 0;
font-weight: 700;
color: var(--color-secondary);
}
.about .tab-content i {
font-size: 22px;
line-height: 0;
margin-right: 8px;
color: var(--color-primary);
}
/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
border: 0;
}
.features .nav-link {
border: 0;
padding: 25px 20px;
color: var(--color-secondary);
box-shadow: 5px 5px 25px rgba(var(--color-secondary-rgb), 0.15);
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: 0s;
cursor: pointer;
height: 100%;
}
.features .nav-link i {
font-size: 32px;
line-height: 0;
}
.features .nav-link h4 {
font-size: 20px;
font-weight: 600;
margin: 10px 0 0 0;
color: var(--color-secondary);
}
.features .nav-link:hover {
color: var(--color-primary);
}
.features .nav-link.active {
transition: 0.3s;
background: var(--color-secondary) linear-gradient(rgba(var(--color-primary-rgb), 0.95), rgba(var(--color-primary-rgb), 0.6));
border-color: var(--color-primary);
}
.features .nav-link.active h4 {
color: var(--color-white);
}
.features .nav-link.active i {
color: var(--color-white) !important;
}
.features .tab-content {
margin-top: 30px;
}
.features .tab-pane.active {
animation: fadeIn 0.5s ease-out;
}
.features .tab-pane h3 {
font-weight: 600;
font-size: 36px;
color: var(--color-secondary);
}
.features .tab-pane ul {
list-style: none;
padding: 0;
}
.features .tab-pane ul li {
padding-bottom: 10px;
}
.features .tab-pane ul i {
font-size: 24px;
margin-right: 4px;
color: var(--color-primary);
}
.features .tab-pane p:last-child {
margin-bottom: 0;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .nav-pills {
border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}
.pricing .nav-pills li + li {
margin-left: 20px;
}
.pricing .nav-link {
background: none;
font-size: 21px;
font-weight: 700;
color: var(--color-secondary);
margin-bottom: -2px;
border-radius: 0;
font-family: var(--font-secondary);
}
.pricing .nav-link {
display: block;
padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x) !important;
font-size: var(--bs-nav-link-font-size);
font-weight: var(--bs-nav-link-font-weight);
color: var(--bs-nav-link-color);
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.pricing .nav-link.active {
color: var(--color-primary);
background: none;
border-bottom: 3px solid var(--color-primary);
}
@media (max-width: 575px) {
.pricing .nav-link {
font-size: 16px;
}
}
.pricing {
background: rgba(var(--color-secondary-rgb), 0.04);
}
.pricing .pricing-item {
padding: 50px 40px;
box-shadow: 0 3px 20px -2px rgba(var(--color-gray-rgb), 0.15);
background: var(--color-white);
height: 100%;
display: flex;
flex-direction: column;
border: 4px solid var(--color-white);
border-radius: 10px;
overflow: hidden;
}
.pricing .pricing-header {
background: linear-gradient(rgba(var(--color-secondary-rgb), 0.9), rgba(var(--color-secondary-rgb), 0.9)), url("../assets/img/pricing-bg.jpg") center center !important;
background-size: cover;
text-align: center;
color: var(--color-white);
padding: 24px;
margin: -60px -40px 0;
}
.pricing h3 {
font-weight: 600;
margin-bottom: 5px;
font-size: 36px;
color: var(--color-white);
}
.pricing h4 {
font-size: 48px;
color: var(--color-white);
font-weight: 400;
font-family: var(--font-primary);
margin-bottom: 0;
}
.pricing h4 sup {
font-size: 28px;
}
.pricing h4 span {
color: rgba(var(--color-white-rgb), 0.6);
font-size: 24px;
}
.pricing ul {
padding: 1px 0;
list-style: none;
color: var(--color-gray);
text-align: left;
line-height: 0px;
}
.pricing ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
.pricing ul i {
color: var(--color-black);
font-size: 40px;
padding-right: 3px;
line-height: 0;
}
.pricing ul .na {
color: rgba(var(--color-gray-rgb), 0.5);
}
.pricing ul .na i {
color: rgba(var(--color-gray-rgb), 0.5);
font-size: 32px;
padding-left: 4px;
}
.pricing ul .na span {
text-decoration: line-through;
}
.pricing .buy-btn {
display: inline-block;
padding: 12px 40px;
border-radius: 6px;
color: var(--color-primary);
transition: none;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
border: 1px solid var(--color-black);
}
.pricing .buy-btn:hover {
background: var(--color-black);
color: var(--color-white);
}
.pricing .featuredStarter {
border-color: var(--color-orange);
}
.pricing .featuredStarter .pricing-header {
background: linear-gradient(rgba(var(--color-orange-rgb), 0.9), rgba(var(--color-orange-rgb), 0.9)), url("../assets/img/pricing-bg.jpg") center center !important;
}
.pricing .featuredStarter .buy-btn {
background: var(--color-orange);
color: var(--color-white);
}
.pricing .featuredBasic {
border-color: var(--color-yellow);
}
.pricing .featuredBasic .pricing-header {
background: linear-gradient(rgba(var(--color-yellow-rgb), 0.9), rgba(var(--color-yellow-rgb), 0.9)), url("../assets/img/pricing-bg.jpg") center center !important;
}
.pricing .featuredBasic .buy-btn {
background: var(--color-yellow);
color: var(--color-white);
}
.pricing .featuredEssential {
border-color: var(--color-red);
}
.pricing .featuredEssential .pricing-header {
background: linear-gradient(rgba(var(--color-red-rgb), 0.9), rgba(var(--color-red-rgb), 0.9)), url("../assets/img/pricing-bg.jpg") center center !important;
}
.pricing .featuredEssential .buy-btn {
background: var(--color-red);
color: var(--color-white);
}
.pricing .featuredPremium {
border-color: var(--color-green);
}
.pricing .featuredPremium .pricing-header {
background: linear-gradient(rgba(var(--color-green-rgb), 0.9), rgba(var(--color-green-rgb), 0.9)), url("../assets/img/pricing-bg.jpg") center center !important;
}
.pricing .featuredPremium .buy-btn {
background: var(--color-green);
color: var(--color-white);
}
#formQuestionPopupContainer {
display: none;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
transform: translate(-50%, -50%);
width: 80%; /* Adjust the width as needed */
height: 80%; /* Adjust the height as needed */
max-width: 615px; /* Set a maximum width if necessary */
max-height: 500px; /* Set a maximum height if necessary */
background: #fff;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* Media query for screens with a maximum width of 600px */
@media screen and (max-width: 600px) {
#formPopupContainer {
width: 90%; /* Adjust the width for smaller screens */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
img[Attributes Style] {
aspect-ratio: auto 319 / 212;
aspect-ratio: auto 400 / 267
}
/* Keep navbar collapsed by default on mobile */
@media (max-width: 991.98px) {
#navbarResponsive.collapse:not(.show) {
display: none !important;
}
#navbarResponsive.collapse.show {
display: block !important;
}
/* Dropdown behaves like an accordion on mobile (closed by default) */
#navbarResponsive .dropdown-menu {
position: static;
float: none;
margin: 0;
box-shadow: none;
display: none;
}
#navbarResponsive .dropdown-menu.show,
#navbarResponsive .dropdown.show > .dropdown-menu {
display: block;
}
}
/* If you have a hover rule, make sure it’s desktop-only */
@media (min-width: 992px) {
.navbar .dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
}
/* TaxFile Pricing Page CTA Buttons */
.taxfile-cta-primary,
.taxfile-cta-secondary {
min-width: 280px;
transition: all 0.25s ease-in-out;
letter-spacing: 0.2px;
}
.taxfile-cta-primary {
background: linear-gradient(135deg, #0d6efd, #084298);
border: none;
color: #ffffff;
}
.taxfile-cta-primary:hover {
background: linear-gradient(135deg, #084298, #052c65);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.25) !important;
}
.taxfile-cta-secondary {
border: 2px solid #0d6efd;
background-color: #ffffff;
color: #0d6efd;
}
.taxfile-cta-secondary:hover {
background-color: #0d6efd;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.18) !important;
}
/* Mobile-friendly full-width buttons */
@media (max-width: 767.98px) {
.taxfile-cta-primary,
.taxfile-cta-secondary {
width: 100%;
max-width: 360px;
}
}
/* Begin: Tax Preparer Plans */
/*
TaxFile Tax Preparer Pricing Page Styles
---------------------------------------------------------
These styles are intentionally scoped under .taxpreparer-page
to reduce conflicts with your existing theme CSS.
*/
:root {
--tf-navy: #1A3A5C;
--tf-navy-dark: #0b2540;
--tf-blue: #0d6efd;
--tf-light: #f7f9fc;
--tf-muted: #6c757d;
--tf-dark: #152536;
--tf-border: rgba(21, 37, 54, .12);
--tf-warning-bg: #fff8e6;
--tf-warning-border: #ffe4a3;
}
.taxpreparer-page {
color: var(--tf-dark);
background: #fff;
overflow-x: hidden;
}
/*
HERO SECTION FIX
---------------------------------------------------------
Increased padding-top and line-height to prevent the top of
the headline from being clipped by theme/header styles.
*/
.taxpreparer-page .tp-hero {
background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
border-bottom: 1px solid var(--tf-border);
padding-top: clamp(4.75rem, 7vw, 7rem) !important;
padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
overflow: visible !important;
}
.taxpreparer-page .tp-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem .85rem;
border-radius: 999px;
background: rgba(13, 110, 253, .08);
color: var(--tf-blue);
font-weight: 700;
font-size: .9rem;
margin-bottom: 1rem;
}
.taxpreparer-page .tp-hero h1 {
color: var(--tf-dark) !important;
font-size: clamp(2.0rem, 5vw, 4.00rem);
line-height: 1.14 !important;
letter-spacing: -.04em;
font-weight: 800;
margin-top: 0 !important;
margin-bottom: 1.25rem;
padding-top: .25rem;
overflow: visible !important;
}
.taxpreparer-page .tp-hero .lead {
font-size: clamp(1.05rem, 2vw, 1.3rem);
color: #4b5b6b;
max-width: 680px;
}
.taxpreparer-page .tp-hero-list {
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.taxpreparer-page .tp-hero-list li {
display: flex;
align-items: flex-start;
gap: .75rem;
margin-bottom: .85rem;
color: #334155;
font-size: 1rem;
line-height: 1.5;
}
.taxpreparer-page .tp-hero-list i {
color: var(--tf-blue);
margin-top: .15rem;
flex: 0 0 auto;
}
.taxpreparer-page .tp-hero-img {
border-radius: 2rem;
box-shadow: 0 25px 70px rgba(26, 58, 92, .18);
max-width: 100%;
height: auto;
}
.taxpreparer-page .tp-cta-primary,
.taxpreparer-page .tp-cta-secondary {
min-width: 260px;
transition: transform .2s ease, box-shadow .2s ease;
}
.taxpreparer-page .tp-cta-primary:hover,
.taxpreparer-page .tp-cta-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 1rem 2rem rgba(13, 110, 253, .16) !important;
}
.taxpreparer-page .tp-section {
padding: 5rem 0;
}
.taxpreparer-page .tp-section-light {
background: var(--tf-light);
}
.taxpreparer-page .tp-section-header {
max-width: 820px;
margin: 0 auto 3rem;
text-align: center;
}
.taxpreparer-page .tp-section-header h2 {
color: var(--tf-dark) !important;
font-weight: 800;
letter-spacing: -.03em;
margin-bottom: 1rem;
}
.taxpreparer-page .tp-section-header p {
color: var(--tf-muted);
font-size: 1.08rem;
}
.taxpreparer-page .tp-benefit-card,
.taxpreparer-page .tp-pricing-card,
.taxpreparer-page .tp-founder-card {
background: #fff;
border: 1px solid var(--tf-border);
border-radius: 1.5rem;
box-shadow: 0 18px 45px rgba(21, 37, 54, .07);
height: 100%;
}
.taxpreparer-page .tp-benefit-card {
padding: 2rem;
}
.taxpreparer-page .tp-benefit-card h3 {
color: var(--tf-dark) !important;
}
.taxpreparer-page .tp-benefit-icon {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 1rem;
background: rgba(13, 110, 253, .1);
color: var(--tf-blue);
font-size: 1.45rem;
margin-bottom: 1rem;
}
/*
EMAIL SECURITY CALLOUT SECTION
---------------------------------------------------------
Button is forced to white background and dark navy text so it
does not blend into the dark blue section background.
*/
.taxpreparer-page .tp-callout {
background: var(--tf-navy);
color: #fff;
padding: 4.5rem 0;
}
.taxpreparer-page .tp-callout .container {
max-width: 1140px;
}
.taxpreparer-page .tp-callout-box {
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 2rem;
background: rgba(255, 255, 255, .06);
padding: clamp(1.5rem, 4vw, 3rem);
box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}
.taxpreparer-page .tp-callout h2 {
color: #fff !important;
font-weight: 800;
letter-spacing: -.03em;
}
.taxpreparer-page .tp-callout p,
.taxpreparer-page .tp-callout li {
color: rgba(255, 255, 255, .9);
}
.taxpreparer-page .tp-callout ul {
padding-left: 0;
list-style: none;
margin: 1.5rem 0;
}
.taxpreparer-page .tp-callout li {
display: flex;
gap: .75rem;
margin-bottom: .8rem;
line-height: 1.5;
}
.taxpreparer-page .tp-callout li i {
color: #7ee787;
margin-top: .15rem;
flex: 0 0 auto;
}
.taxpreparer-page .tp-callout .tp-callout-cta {
background: #ffffff !important;
color: var(--tf-navy-dark) !important;
border: 2px solid #ffffff !important;
box-shadow: 0 16px 35px rgba(0, 0, 0, .22);
}
.taxpreparer-page .tp-callout .tp-callout-cta:hover,
.taxpreparer-page .tp-callout .tp-callout-cta:focus {
background: #f3f8ff !important;
color: var(--tf-navy-dark) !important;
border-color: #f3f8ff !important;
}
.taxpreparer-page .tp-pricing-note {
background: var(--tf-warning-bg);
border: 1px solid var(--tf-warning-border);
border-radius: 1.25rem;
padding: 1.25rem;
color: #5c4400;
}
/*
PRICING CARD FIXES
---------------------------------------------------------
1. Plan names are forced dark with !important to override
any old pricing theme CSS that may set h3 to white.
2. Feature list uses flex and normal wrapping so retention
bullets do not overlap.
*/
.taxpreparer-page .tp-pricing-card {
display: flex;
flex-direction: column;
padding: 1.75rem;
position: relative;
overflow: hidden;
color: var(--tf-dark) !important;
min-height: 100%;
}
.taxpreparer-page .tp-pricing-card.featured {
border-color: rgba(13, 110, 253, .35);
box-shadow: 0 22px 60px rgba(13, 110, 253, .13);
}
.taxpreparer-page .tp-plan-badge {
display: inline-flex;
align-self: flex-start;
padding: .35rem .7rem;
border-radius: 999px;
background: rgba(13, 110, 253, .1);
color: var(--tf-blue) !important;
font-size: .8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.taxpreparer-page .tp-pricing-card h3,
.taxpreparer-page .tp-pricing-card .tp-plan-name {
color: var(--tf-dark) !important;
font-weight: 800;
letter-spacing: -.025em;
margin-bottom: .3rem;
line-height: 1.2;
}
.taxpreparer-page .tp-price {
color: var(--tf-dark) !important;
font-size: 2.45rem;
font-weight: 800;
margin: 1rem 0 .25rem;
line-height: 1.1;
}
.taxpreparer-page .tp-price sup {
font-size: 1rem;
top: -1em;
}
.taxpreparer-page .tp-price span {
font-size: 1rem;
color: var(--tf-muted) !important;
font-weight: 600;
}
.taxpreparer-page .tp-plan-subtext {
color: var(--tf-muted) !important;
min-height: 48px;
line-height: 1.5;
}
.taxpreparer-page .tp-feature-list {
list-style: none !important;
padding: 0 !important;
margin: 1.5rem 0 !important;
}
.taxpreparer-page .tp-feature-list li {
display: flex !important;
align-items: flex-start !important;
gap: .65rem !important;
padding: .48rem 0 !important;
color: #334155 !important;
line-height: 1.45 !important;
min-height: auto !important;
height: auto !important;
white-space: normal !important;
overflow: visible !important;
}
.taxpreparer-page .tp-feature-list li i {
color: var(--tf-blue) !important;
margin-top: .18rem;
flex: 0 0 auto;
line-height: 1;
}
.taxpreparer-page .tp-feature-list li span {
display: block !important;
flex: 1 1 auto;
line-height: 1.45 !important;
white-space: normal !important;
overflow: visible !important;
}
.taxpreparer-page .tp-plan-footer {
margin-top: auto;
}
.taxpreparer-page .tp-table-wrap {
border: 1px solid var(--tf-border);
border-radius: 1.25rem;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 45px rgba(21, 37, 54, .07);
}
.taxpreparer-page .tp-comparison-table {
margin-bottom: 0;
vertical-align: middle;
}
.taxpreparer-page .tp-comparison-table thead th {
background: var(--tf-navy);
color: #fff;
border-color: rgba(255, 255, 255, .12);
white-space: nowrap;
}
.taxpreparer-page .tp-comparison-table tbody tr.taxfile-row {
background: rgba(13, 110, 253, .06);
font-weight: 700;
}
.taxpreparer-page .tp-check {
color: #198754;
font-weight: 800;
}
.taxpreparer-page .tp-x {
color: #dc3545;
font-weight: 800;
}
.taxpreparer-page .tp-founder-card {
padding: clamp(1.5rem, 4vw, 3rem);
}
.taxpreparer-page .tp-founder-card h2 {
color: var(--tf-dark) !important;
}
.taxpreparer-page .tp-founder-photo {
width: 100%;
max-width: 260px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 2rem;
box-shadow: 0 20px 45px rgba(21, 37, 54, .14);
}
.taxpreparer-page .tp-founder-signature {
font-weight: 800;
color: var(--tf-navy) !important;
}
.taxpreparer-page .tp-about-questions {
background: linear-gradient(135deg, #1A3A5C 0%, #0d6efd 100%);
color: #fff;
}
.taxpreparer-page .tp-about-questions h2,
.taxpreparer-page .tp-about-questions p {
color: #fff !important;
}
.taxpreparer-page .tp-question-form {
background-color: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
}
.taxpreparer-page .tp-question-form iframe {
width: 100%;
min-height: 913px;
border: none;
border-radius: .75rem;
}
.taxpreparer-page .tp-login-section {
background: #0d6efd;
color: #fff;
}
.taxpreparer-page .tp-login-section h2 {
color: #fff !important;
}
.taxpreparer-page .tp-login-section a {
color: inherit;
text-decoration: none;
}
@@media (max-width: 767.98px) {
.taxpreparer-page .tp-hero {
padding-top: 4.25rem !important;
}
.taxpreparer-page .tp-hero h1 {
line-height: 1.16 !important;
}
.taxpreparer-page .tp-cta-primary,
.taxpreparer-page .tp-cta-secondary {
width: 100%;
min-width: unset;
}
.taxpreparer-page .tp-section {
padding: 3.5rem 0;
}
.taxpreparer-page .tp-comparison-table {
font-size: .9rem;
}
}
/* End: Tax Preparer Plans */
/*Begin: Landing Page*/
/*
============================================================
TaxFile Index Page Scoped Styles
============================================================
All custom styles are scoped to .taxfile-index-page to reduce
conflicts with your existing global site CSS.
*/
:root {
--tf-navy: #1A3A5C;
--tf-navy-dark: #0b2540;
--tf-blue: #0d6efd;
--tf-light: #f7f9fc;
--tf-muted: #6c757d;
--tf-dark: #152536;
--tf-border: rgba(21, 37, 54, .12);
--tf-warning-bg: #fff8e6;
--tf-warning-border: #ffe4a3;
/*
Adjust this if your navbar is taller or shorter.
This prevents the fixed/top menu from overlapping the hero.
*/
--tf-navbar-offset-desktop: 112px;
--tf-navbar-offset-tablet: 100px;
--tf-navbar-offset-mobile: 92px;
}
html {
scroll-behavior: smooth;
}
.taxfile-index-page {
color: var(--tf-dark);
background: #fff;
overflow-x: hidden;
}
.taxfile-index-page section,
.taxfile-index-page header,
.taxfile-index-page aside {
scroll-margin-top: var(--tf-navbar-offset-desktop);
}
/*
============================================================
Hero Section
============================================================
This fixes the menu/header overlap problem by adding enough
top padding for a fixed navbar.
*/
.taxfile-index-page .tp-hero {
background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
border-bottom: 1px solid var(--tf-border);
padding-top: calc(var(--tf-navbar-offset-desktop) + 2rem) !important;
padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
overflow: visible !important;
position: relative;
z-index: 1;
}
.taxfile-index-page .tp-eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem .85rem;
border-radius: 999px;
background: rgba(13, 110, 253, .08);
color: var(--tf-blue);
font-weight: 700;
font-size: .9rem;
margin-bottom: 1rem;
line-height: 1.2;
}
.taxfile-index-page .tp-hero h1 {
color: var(--tf-dark) !important;
font-size: clamp(2.1rem, 5vw, 4.25rem);
line-height: 1.14 !important;
letter-spacing: -.04em;
font-weight: 800;
margin-top: 0 !important;
margin-bottom: 1.25rem;
padding-top: .25rem;
overflow: visible !important;
}
.taxfile-index-page .tp-hero .lead {
font-size: clamp(1.05rem, 2vw, 1.28rem);
color: #4b5b6b;
max-width: 760px;
line-height: 1.65;
}
.taxfile-index-page .tp-hero-list {
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
}
.taxfile-index-page .tp-hero-list li {
display: flex;
align-items: flex-start;
gap: .75rem;
margin-bottom: .85rem;
color: #334155;
font-size: 1rem;
line-height: 1.5;
}
.taxfile-index-page .tp-hero-list i {
color: var(--tf-blue);
margin-top: .18rem;
flex: 0 0 auto;
}
.taxfile-index-page .tp-hero-img {
border-radius: 2rem;
box-shadow: 0 25px 70px rgba(26, 58, 92, .18);
max-width: 100%;
height: auto;
}
.taxfile-index-page .tp-cta-primary,
.taxfile-index-page .tp-cta-secondary {
min-width: 260px;
transition: transform .2s ease, box-shadow .2s ease;
}
.taxfile-index-page .tp-cta-primary:hover,
.taxfile-index-page .tp-cta-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 1rem 2rem rgba(13, 110, 253, .16) !important;
color: #FFFFFF !important;
}
/*
============================================================
Global Section Spacing
============================================================
*/
.taxfile-index-page .tp-section {
padding: 5rem 0;
}
.taxfile-index-page .tp-section-light {
background: var(--tf-light);
}
.taxfile-index-page .tp-section-header {
max-width: 860px;
margin: 0 auto 3rem;
text-align: center;
}
.taxfile-index-page .tp-section-header h2 {
color: var(--tf-dark) !important;
font-weight: 800;
letter-spacing: -.03em;
margin-bottom: 1rem;
}
.taxfile-index-page .tp-section-header p {
color: var(--tf-muted);
font-size: 1.08rem;
line-height: 1.65;
}
/*
============================================================
Benefits Section
============================================================
*/
.taxfile-index-page #Benefits {
padding: 5rem 0;
}
.taxfile-index-page #Benefits .service-item {
width: 100%;
min-height: 100%;
padding: 1.75rem;
border-radius: 1.25rem;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .16);
box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}
.taxfile-index-page #Benefits .service-item h4 {
color: #fff !important;
font-weight: 800;
margin-top: .75rem;
margin-bottom: .75rem;
}
.taxfile-index-page #Benefits .service-item p {
color: rgba(255, 255, 255, .92) !important;
line-height: 1.6;
margin-bottom: 0;
}
.taxfile-index-page #Benefits .service-item .icon {
color: #fff;
font-size: 2rem;
}
/*
============================================================
Email Security Callout
============================================================
*/
.taxfile-index-page .tp-callout {
background: var(--tf-navy);
color: #fff;
padding: 4.5rem 0;
}
.taxfile-index-page .tp-callout-box {
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 2rem;
background: rgba(255, 255, 255, .06);
padding: clamp(1.5rem, 4vw, 3rem);
box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}
.taxfile-index-page .tp-callout h2 {
color: #fff !important;
font-weight: 800;
letter-spacing: -.03em;
}
.taxfile-index-page .tp-callout p,
.taxfile-index-page .tp-callout li {
color: rgba(255, 255, 255, .9);
line-height: 1.6;
}
.taxfile-index-page .tp-callout ul {
padding-left: 0;
list-style: none;
margin: 1.5rem 0;
}
.taxfile-index-page .tp-callout li {
display: flex;
gap: .75rem;
margin-bottom: .8rem;
}
.taxfile-index-page .tp-callout li i {
color: #7ee787;
margin-top: .18rem;
flex: 0 0 auto;
}
.taxfile-index-page .tp-callout .tp-callout-cta {
background: #ffffff !important;
color: var(--tf-navy-dark) !important;
border: 2px solid #ffffff !important;
box-shadow: 0 16px 35px rgba(0, 0, 0, .22);
}
.taxfile-index-page .tp-callout .tp-callout-cta:hover,
.taxfile-index-page .tp-callout .tp-callout-cta:focus {
background: #f3f8ff !important;
color: var(--tf-navy-dark) !important;
border-color: #f3f8ff !important;
}
/*
/*
============================================================
Pricing Section Fixes
============================================================
Fixes included:
1. Plan title first word no longer gets clipped/cut off.
2. Plan title line spacing is tighter and cleaner.
3. White feature-list box no longer leaves colored corners showing.
4. Feature list spacing is mobile-friendly and does not overlap.
5. Original color classes remain:
featuredStarter, featuredBasic, featuredEssential, featuredPremium
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
border-radius: 1.5rem;
overflow: hidden !important;
box-shadow: 0 18px 45px rgba(21, 37, 54, .10);
padding: 0 !important;
}
/*
Original/fallback plan color backgrounds.
Your existing featuredStarter / featuredBasic / featuredEssential /
featuredPremium classes can still apply from your main stylesheet.
*/
.taxfile-index-page .pricing .pricing-item.featuredStarter {
background: linear-gradient(135deg, #2f80ed 0%, #1a56db 100%);
}
.taxfile-index-page .pricing .pricing-item.featuredBasic {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.taxfile-index-page .pricing .pricing-item.featuredEssential {
background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
}
.taxfile-index-page .pricing .pricing-item.featuredPremium {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}
/*
Header fix:
Extra top padding + overflow visible prevents the first word
of each plan title from being cut off.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header {
padding: 2rem 1.5rem 1.35rem !important;
text-align: center;
overflow: visible !important;
min-height: 190px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/*
Plan title wrapper:
Using one h3 with span lines gives better control than multiple h3 tags.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title {
color: #fff !important;
font-weight: 800;
font-size: clamp(1.45rem, 2.1vw, 1.9rem);
line-height: .96 !important;
letter-spacing: -.025em;
margin: 0 0 .85rem 0 !important;
padding: .2rem 0 0 0 !important;
overflow: visible !important;
text-align: center;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title span {
display: block;
color: #fff !important;
line-height: .96 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title.single-line span {
display: inline;
}
/*
Price text.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header h5,
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header p,
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header em {
color: #fff !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header h5 {
font-weight: 800;
font-size: 2rem;
margin-top: .35rem;
margin-bottom: .35rem;
line-height: 1.1;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header h5 sup {
font-size: 1rem;
top: -.8em;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header h5 span {
font-size: 1rem;
font-weight: 600;
}
/*
White box fix:
Removed top border-radius so colored corners do not show.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-body {
background: #fff;
color: var(--tf-dark);
border-radius: 0 !important;
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
margin: 0;
}
/*
Feature list spacing fix.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 1.25rem 0 !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card ul li {
display: flex !important;
align-items: flex-start !important;
gap: .65rem !important;
padding: .48rem 0 !important;
color: #334155 !important;
line-height: 1.45 !important;
min-height: auto !important;
height: auto !important;
white-space: normal !important;
overflow: visible !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card ul li i {
color: var(--tf-blue) !important;
margin-top: .18rem;
flex: 0 0 auto;
line-height: 1;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card ul li span {
display: block !important;
flex: 1 1 auto;
line-height: 1.45 !important;
white-space: normal !important;
overflow: visible !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-description {
color: var(--tf-muted);
line-height: 1.55;
margin-bottom: 1.25rem;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-footer {
margin-top: auto;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .buy-btnTP {
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 48px;
text-align: center;
border-radius: 999px;
font-weight: 700;
text-decoration: none;
padding: .75rem 1rem;
line-height: 1.25;
}
/*
Mobile pricing adjustments.
*/
@media (max-width: 767.98px) {
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header {
min-height: auto;
padding: 1.75rem 1.25rem 1.25rem !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title {
font-size: 1.65rem;
line-height: .98 !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title span {
line-height: .98 !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-body {
padding: 1.25rem;
}
}
/*
============================================================
FINAL PRICING TITLE CLIPPING FIX
============================================================
This fixes the issue where the first word of each pricing
plan title is cut off by older/global .pricing h3 styles.
Important:
The plan title markup below uses
instead of
to avoid inherited h3 clipping styles.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card {
overflow: hidden !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header {
position: relative !important;
overflow: visible !important;
padding: 2.25rem 1.5rem 1.35rem 1.5rem !important;
min-height: 205px;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: center !important;
}
/*
This is intentionally a DIV, not an H3, to avoid global pricing h3 CSS.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title {
display: block !important;
width: 100% !important;
max-width: 100% !important;
color: #ffffff !important;
font-weight: 800 !important;
font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
line-height: 1.05 !important;
letter-spacing: -.02em !important;
text-align: center !important;
margin: 0 0 .9rem 0 !important;
padding: .35rem 0 .15rem 0 !important;
/*
These override the most common causes of cut-off titles.
*/
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
transform: none !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
clip-path: none !important;
white-space: normal !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title span {
display: block !important;
color: #ffffff !important;
line-height: 1.05 !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
transform: none !important;
clip-path: none !important;
white-space: normal !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title.single-line span {
display: inline-block !important;
}
/*
Price spacing below the plan title.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header h5 {
margin-top: .25rem !important;
}
/*
Removes colored corners around the white feature box.
*/
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-body {
border-radius: 0 !important;
margin: 0 !important;
width: 100% !important;
background: #ffffff !important;
}
@@media (max-width: 767.98px) {
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header {
min-height: auto;
padding: 2rem 1.25rem 1.25rem 1.25rem !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title {
font-size: 1.65rem !important;
line-height: 1.05 !important;
padding-top: .4rem !important;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .plan-title span {
line-height: 1.05 !important;
}
}
/*
============================================================
Comparison Table
============================================================
*/
.taxfile-index-page .tp-table-wrap {
border: 1px solid var(--tf-border);
border-radius: 1.25rem;
overflow: hidden;
background: #fff;
box-shadow: 0 18px 45px rgba(21, 37, 54, .07);
}
.taxfile-index-page .tp-comparison-table {
margin-bottom: 0;
vertical-align: middle;
}
.taxfile-index-page .tp-comparison-table thead th {
background: var(--tf-navy);
color: #fff;
border-color: rgba(255, 255, 255, .12);
white-space: nowrap;
}
.taxfile-index-page .tp-comparison-table tbody tr.taxfile-row {
background: rgba(13, 110, 253, .06);
font-weight: 700;
}
.taxfile-index-page .tp-check {
color: #198754;
font-weight: 800;
}
.taxfile-index-page .tp-x {
color: #dc3545;
font-weight: 800;
}
/*
============================================================
Founder Section
============================================================
*/
.taxfile-index-page .tp-founder-card {
background: #fff;
border: 1px solid var(--tf-border);
border-radius: 1.5rem;
box-shadow: 0 18px 45px rgba(21, 37, 54, .07);
padding: clamp(1.5rem, 4vw, 3rem);
}
.taxfile-index-page .tp-founder-card h2 {
color: var(--tf-dark) !important;
}
.taxfile-index-page .tp-founder-card p {
line-height: 1.65;
}
.taxfile-index-page .tp-founder-photo {
width: 100%;
max-width: 260px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 2rem;
box-shadow: 0 20px 45px rgba(21, 37, 54, .14);
}
.taxfile-index-page .tp-founder-signature {
font-weight: 800;
color: var(--tf-navy) !important;
}
/*
============================================================
About / Questions Section
============================================================
*/
.taxfile-index-page .tf-about-section {
background: linear-gradient(135deg, #1A3A5C 0%, #0d6efd 100%);
color: #fff;
padding: 5rem 0;
}
.taxfile-index-page .tf-about-section h2,
.taxfile-index-page .tf-about-section p {
color: #fff !important;
}
.taxfile-index-page .tf-about-section p {
line-height: 1.65;
}
.taxfile-index-page .tp-question-form {
background-color: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
}
.taxfile-index-page .tp-question-form iframe {
width: 100%;
min-height: 913px;
border: none;
border-radius: .75rem;
}
/*
============================================================
Login Section
============================================================
*/
.taxfile-index-page .tf-login-section {
padding: 4rem 0;
}
.taxfile-index-page .tf-login-section h2 {
color: #fff !important;
}
.taxfile-index-page .tf-login-section a {
color: inherit;
text-decoration: none;
}
/*
============================================================
Modal
============================================================
*/
.taxfile-index-page .modal-title {
color: var(--tf-dark);
}
/*
============================================================
Responsive Fixes
============================================================
*/
@@media (max-width: 991.98px) {
.taxfile-index-page section,
.taxfile-index-page header,
.taxfile-index-page aside {
scroll-margin-top: var(--tf-navbar-offset-tablet);
}
.taxfile-index-page .tp-hero {
padding-top: calc(var(--tf-navbar-offset-tablet) + 1.5rem) !important;
}
.taxfile-index-page .tp-hero h1 {
line-height: 1.16 !important;
}
.taxfile-index-page .tp-hero-img {
max-width: 88%;
}
.taxfile-index-page .tp-callout .text-lg-end {
text-align: left !important;
}
}
@@media (max-width: 767.98px) {
.taxfile-index-page section,
.taxfile-index-page header,
.taxfile-index-page aside {
scroll-margin-top: var(--tf-navbar-offset-mobile);
}
.taxfile-index-page .tp-hero {
padding-top: calc(var(--tf-navbar-offset-mobile) + 1.25rem) !important;
padding-bottom: 3.5rem !important;
}
.taxfile-index-page .tp-hero h1 {
font-size: clamp(2rem, 10vw, 3rem);
line-height: 1.16 !important;
}
.taxfile-index-page .tp-hero .lead {
font-size: 1.02rem;
}
.taxfile-index-page .tp-cta-primary,
.taxfile-index-page .tp-cta-secondary {
width: 100%;
min-width: unset;
}
.taxfile-index-page .tp-section,
.taxfile-index-page #Benefits,
.taxfile-index-page .tf-about-section {
padding: 3.5rem 0;
}
.taxfile-index-page .tp-callout {
padding: 3.5rem 0;
}
.taxfile-index-page .tp-comparison-table {
font-size: .9rem;
}
.taxfile-index-page .tp-question-form iframe {
min-height: 980px;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .pricing-header {
padding: 1.5rem 1.25rem .85rem;
}
.taxfile-index-page .pricing .pricing-item.tp-plan-card .tp-plan-body {
padding: 1.25rem;
}
}
@@media (max-width: 575.98px) {
.taxfile-index-page .container {
padding-left: 1.1rem !important;
padding-right: 1.1rem !important;
}
.taxfile-index-page .tp-eyebrow {
font-size: .82rem;
}
.taxfile-index-page .tp-callout-box {
border-radius: 1.35rem;
}
.taxfile-index-page .tp-table-wrap {
border-radius: 1rem;
}
}
/*End: Landing Page*/