:root {
--tcw-bg: #020233;
--tcw-bg-2: #050740;
--tcw-primary: #01AEFF;
--tcw-secondary: #011F96;
--tcw-accent: #016899;
--tcw-text: #D1D1D3;
--tcw-white: #FFFFFF;
--tcw-offwhite: #F7F8FA;
--tcw-dark: #414651;
--tcw-muted: #8A8CB0;
--tcw-border: rgba(255, 255, 255, 0.08);
--tcw-card: rgba(255, 255, 255, 0.03);
--tcw-card-2: rgba(1, 31, 150, 0.25);
--grad-hero: radial-gradient(1200px 600px at 50% -100px, rgba(1, 174, 255, 0.25), transparent 60%),
radial-gradient(900px 500px at 80% 40%, rgba(1, 31, 150, 0.35), transparent 60%);
--grad-blue: linear-gradient(135deg, #0a2a8a 0%, #01AEFF 100%);
--grad-card: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
* {
box-sizing: border-box
}
html {
overflow-x: hidden;
}
html,
body {
background: var(--tcw-bg);
color: var(--tcw-text);
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Outfit', sans-serif;
color: var(--tcw-white);
font-weight: 700;
}
a {
color: var(--tcw-primary);
text-decoration: none
}
a:hover {
color: #4dc5ff
}
img {
max-width: 100%;
display: block;
}
#smooth-content {
overflow: visible;
width: 100%;
} .btn-primary-tcw,
.btn-outline-tcw {
background: linear-gradient(90deg, var(--tcw-primary) -3.25%, #016899 144.72%);
color: var(--tcw-offwhite);
border: none;
font-family: 'Outfit';
font-weight: 700;
font-size: 17px;
line-height: 25px;
padding: 17px 25px;
border-radius: 13px;
transition: transform .15s ease, background .15s ease;
}
.btn-primary-tcw:hover {
background: linear-gradient(-90deg, var(--tcw-primary) -3.25%, #016899 144.72%);
color: var(--tcw-offwhite);
transform: translateY(-1px);
}
.btn-outline-tcw {
outline: 1px solid var(--tcw-primary);
background: transparent;
}
.btn-outline-tcw:hover {
background: linear-gradient(-90deg, var(--tcw-primary) -3.25%, #016899 144.72%);
color: var(--tcw-offwhite);
transform: translateY(-1px);
} .section {
padding: 83px 0;
position: relative
}
.eyebrow {
display: inline-block;
padding: .5rem 1rem;
border-radius: 99px;
background: rgba(255, 255, 255, 0.11);
color: var(--tcw-primary);
font-family: 'Outfit';
font-weight: 600;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 1rem;
border: 1px solid #9494945c;
}
.section-title {
font-size: clamp(26px, 3.4vw, 56px);
line-height: 1.15;
margin-bottom: 1rem;
font-weight: 600;
letter-spacing: 0;
}
.section-lead {
max-width: 1088px;
color: var(--tcw-text);
} .hero-section {
padding: 96px 0 60px;
z-index: 3;
}
.hero-circle {
position: absolute;
width: 540px;
height: 540px;
left: 0px;
top: 7px;
background: rgba(1, 174, 255, 0.4);
filter: blur(250px);
z-index: 0;
}
.hero-title {
font-size: clamp(34px, 5vw, 64px);
line-height: 1.05;
margin-bottom: 1.25rem;
max-width: 900px;
margin-inline-start: auto;
margin-inline-end: auto;
}
.text-primary-tcw {
color: var(--tcw-primary)
}
.hero-sub {
max-width: 720px;
color: var(--tcw-text);
font-size: 1rem;
} .inner-page-hero::before {
content: "";
position: absolute;
inset: 0;
background: url(//tradecomplianceworkbench.com/wp-content/themes/tcw/assets/images/inner-hero-bg.png);
background-position: center bottom;
background-repeat: no-repeat;
z-index: 0;
} .icon-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 18px;
padding: 30px 23px;
height: 100%;
transition: .3s ease;
}
.icon-card:hover {
transform: translateY(-3px);
border-color: var(--tcw-primary);
}
.icon-card_icon_title {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
}
.icon-card__icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
}
.icon-card__title {
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: var(--tcw-white);
margin-bottom: 12px;
}
.icon-card__description p {
font-size: 14px;
line-height: 24px;
font-weight: 400;
margin: 0;
color: var(--tcw-text);
}
.icon-item h5 {
font-size: 20px;
line-height: 28px;
font-weight: 600;
margin-bottom: 12px
}
.icon-item p {
color: var(--tcw-text);
font-size: 14px;
line-height: 24px;
margin: 0;
}
.cards-row {
position: relative;
margin-top: 82px;
z-index: 1;
}
.cards-row::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
width: 1px;
height: 100%;
max-height: 680px;
background: linear-gradient(180deg, rgba(14, 14, 60, 1) 0%, rgba(209, 209, 211, 0.5) 49%, rgba(14, 14, 60, 1) 100%);
z-index: 0;
}
.cards-row::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
width: 100%;
max-width: 1280px;
height: 1px;
background: linear-gradient(90deg, rgba(14, 14, 60, 1) 0%, rgba(209, 209, 211, 0.5) 49%, rgba(14, 14, 60, 1) 100%);
z-index: 0;
}
.int-card {
padding: 30px 90px 100px 0;
text-align: center;
}
.int-card.rightSide {
padding: 30px 20px 100px 100px;
}
.int-card .icon-card__icon {
width: 65px;
height: 65px;
margin-inline: auto;
background: rgba(255, 255, 255, 0.1);
border-radius: 13px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.int-card h5 {
font-size: 18px;
margin-bottom: 12px;
}
.int-card p {
color: var(--tcw-text);
font-size: 14px;
line-height: 24px;
margin: 0;
}.custom-logo-link img {
width: 100%;
height: auto;
}
.tcw-header {
position: sticky;
top: 0;
z-index: 100;
}
.tcw-header.sticky {
background: rgba(3, 2, 51, 0.98);
border-bottom: 1px solid var(--tcw-border);
box-shadow: 0 -8px 20px rgb(0 171 253 / 30%);
}
body.admin-bar .tcw-header.sticky {
top: 32px;
}
.navbar-nav .menu-item a {
color: var(--tcw-offwhite);
font-family: 'Outfit';
font-weight: 500;
font-size: 15px;
padding: .4rem .75rem;
display: inline-block;
line-height: 38px;
}
.navbar-nav .menu-item a:hover,
.navbar-nav .menu-item.current-menu-item:not(.contactBtn) a {
color: var(--tcw-primary);
text-decoration: underline;
}
.contactBtn {
background: linear-gradient(90deg, var(--tcw-primary) -3.25%, #016899 144.72%);
border-radius: 8px;
line-height: 50px;
transition: all 0.5s ease-in-out;
}
.contactBtn:hover {
background: linear-gradient(-90deg, var(--tcw-primary) -3.25%, #016899 144.72%);
}
.navbar-nav .menu-item.contactBtn:hover a {
color: var(--tcw-offwhite) !important;
}.cta-section .section-lead {
max-width: 768px;
}
.cta-panel {
padding: 14px 10px;
border: 1px solid #272651;
border-radius: 10px;
}
.content-wrapper {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: wrap;
place-content: center;
gap: 24px;
min-height: 406px;
padding: 43px 30px;
z-index: 1;
background: linear-gradient(180.17deg, rgba(0, 0, 50, 0) 15.64%, #000032 99.86%);
}
.content-wrapper:before {
content: "";
position: absolute;
width: 704px;
height: 534px;
left: 50%;
top: -367px;
transform: translate(-50%);
background: rgba(140, 69, 255, 0.49);
filter: blur(152px);
z-index: -1;
}
.content-wrapper:after {
content: "";
position: absolute;
inset: 0;
background: url(//tradecomplianceworkbench.com/wp-content/themes/tcw/assets/images/pattern.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px;
z-index: -1;
} .tcw-footer {
padding: 67px 0 50px;
background: #0E0E3C;
}
.footer-nav,
.footer-legal-nav {
list-style: none;
padding: 0;
margin: 33px 0 67px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem 1.75rem;
}
.footer-nav a,
.footer-legal-nav a {
color: #E9D7FE;
font-family: 'Outfit';
font-weight: 500;
font-size: 17px;
line-height: 25px;
}
.footer-nav a:hover,
.footer-legal-nav a:hover {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 33px;
}
.footer-copy,
.footer-legal-nav a {
color: #D6BBFB;
margin: 0;
font-family: "Inter", sans-serif;
font-weight: 400;
}
.footer-legal-nav {
justify-content: flex-end;
margin: 0;
gap: 1rem;
}#particles-js{
position: absolute;
inset: 0;
z-index: 0;
}
.hero-globe {
position: absolute;
left: 0;
top: 44%;
bottom: 0;
z-index: -1;
}
.hero-stats {
max-width: 1100px;
margin: auto;
margin-top: 56px;
}
.stat-card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
border-radius: 13px;
padding: 14px 18px;
max-width: 300px;
text-align: left;
transition: transform .2s ease;
}
.stat-card:hover {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.stat-card::before {
content: "";
position: absolute;
inset: 0;
padding: 0.70px;
border-radius: inherit;
background: linear-gradient(90deg, var(--tcw-primary), #01AEFF10);
-webkit-mask: linear-gradient(var(--tcw-white) 0 0) content-box, linear-gradient(var(--tcw-white) 0 0);
-webkit-mask-composite: xor;
z-index: -1;
}
.stat-card.secondCard::before {
background: linear-gradient(180deg, var(--tcw-primary), #01AEFF10);
}
.stat-card.lastCard::before {
background: linear-gradient(-90deg, var(--tcw-primary), #01AEFF10);
}
.stat-card i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #00a3f7;
color: #00a3f7;
font-size: 12px;
box-shadow: 0 3.45px 3.45px 0 #00000025, inset 0 3.45px 3.45px 0 #00000025;
}
.stat-num {
font-family: 'Outfit';
font-weight: 600;
font-size: 36px;
line-height: 38px;
color: var(--tcw-white);
margin-bottom: .35rem;
}
.stat-label {
color: var(--tcw-text);
font-size: .9rem;
line-height: 1.4
} .industry-section {
width: 100%;
overflow: hidden;
background-color: transparent;
margin-inline: auto;
z-index: 3;
}
.industry-section-heading {
font-family: 'Inter';
font-weight: 500;
font-size: 14px;
line-height: 24px;
text-align: center;
color: var(--tcw-text);
margin-bottom: 29px;
}
.industry-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
width: 100%;
max-width: 90%;
margin: auto;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
padding: 24px 50px;
overflow: hidden;
position: relative;
}
.industry-item {
display: flex;
padding: 0 1rem;
border-right: 1px solid rgba(47, 47, 87, 1);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.industry-item:last-child {
border-right: none;
}
.industry-item p {
font-size: 14px;
margin: 0;
} .panel-cards-row {
margin-top: 87px;
background: var(--tcw-bg);
border: 1px solid #272651;
border-radius: 16px;
}
.panel-cards-row>* {
margin: 0;
padding: 0;
}
.panel-card {
padding: 64px 0 64px 36px;
background: #000033;
overflow: hidden;
border-radius: 16px;
}
.panel-card.panel-dark {
background: linear-gradient(134deg, rgba(30, 30, 84, 0.28) 13.74%, rgba(68, 68, 186, 0.66) 95.2%);
border-radius: 16px;
padding: 46px 103px 44px 36px;
}
.panel-card.panel-blue {
background: linear-gradient(107.79deg, #0D0D43 13.29%, #217FAB 97.7%);
border: 1px solid #262651;
border-radius: 16px;
padding: 46px 103px 44px 36px;
}
.panel-title {
font-size: 22px;
margin-bottom: 1rem
}
.panel-content ul {
margin: 0;
padding: 0;
list-style: none;
}
.panel-content li {
position: relative;
padding-left: 1.5rem;
margin-bottom: .65rem;
}
.panel-content li::before {
content: "";
position: absolute;
left: 0;
top: .6rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--tcw-text);
box-shadow: 0 0 0 3px rgba(1, 174, 255, .2);
}
.panel-content p {
color: var(--tcw-text);
}
.panel-image {
border-radius: 0 16px 16px 0;
overflow: hidden;
min-height: 280px;
position: relative;
}
.panel-image:before {
content: "";
position: absolute;
width: 460px;
left: 0;
top: 0;
bottom: 0;
background: linear-gradient(60deg, #010133 28.91%, rgba(1, 1, 51, 0) 63.45%);
z-index: 1;
}
.panel-image video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
z-index: 0;
}
.panel-image img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 280px
} .capabilities {
background: #0E0E3C;
}
.capabilities .section-lead {
max-width: 674px;
margin-bottom: 59px;
}
.tcw-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.tcw-grid .tcw-grid-item:last-child {
grid-column: 1 / -1;
justify-self: center;
max-width: 350px;
} .ai-section {
position: relative;
overflow: hidden;
}
.ai-section .container {
position: relative;
z-index: 1;
}
.ai-section::before {
content: "";
position: absolute;
width: 632px;
height: 632px;
left: -100px;
top: 80px;
background: rgba(1, 174, 255, 0.25);
filter: blur(250px);
z-index: 0;
}
.ai-section::after {
content: "";
position: absolute;
width: 778px;
height: 757px;
left: auto;
right: -389px;
top: 400px;
background: rgba(73, 197, 255, 0.25);
filter: blur(254px);
z-index: 0;
}
.ai-section .section-header {
margin-bottom: 100px;
}
.ai-team-section .section-header {
margin-bottom: 29px;
} .integration-section {
background: rgba(14, 14, 60, 1);
} .why-choose-section {
padding-bottom: 176px;
position: relative;
overflow: hidden;
z-index: 1;
}
.why-choose-section:after {
content: "";
position: absolute;
width: 632px;
height: 632px;
right: 0;
top: 312px;
background: rgba(1, 174, 255, 0.25);
filter: blur(250px);
z-index: -1;
}
.why-cards-row {
margin-top: 56px;
}
.why-card {
background: var(--grad-card);
border: 1px solid var(--tcw-border);
border-radius: 16px;
padding: 40px 17px;
color: var(--tcw-white);
cursor: pointer;
transition: all 0.5s ease;
}
.why-card:hover {
transform: translateY(-3px);
border-color: rgba(1, 174, 255, 0.35);
}
.why-icon {
transition: all 0.5s ease;
}
.why-icon img {
width: 100%;
max-width: 44px;
margin-bottom: 28px;
margin-inline: auto;
}
.why-card h5 {
font-size: 17px;
font-weight: 700;
line-height: 25px;
margin: 0;
margin-inline: auto;
transition: all 0.5s ease;
}
.why-card p {
margin: 0;
}
.why-card .why-description,
.why-card:hover :where(.why-icon, .why-card h5) {
text-align: left;
display: none;
visibility: hidden;
transition: all 0.5s ease;
}
.why-card:hover .why-description {
display: block;
visibility: visible;
} .faq-section {
position: relative;
overflow: hidden;
z-index: 1;
}
.faq-section:before {
content: "";
position: absolute;
width: 632px;
height: 632px;
left: -226px;
top: -196px;
background: rgba(1, 174, 255, 0.25);
filter: blur(250px);
z-index: -1;
}
.tcw-accordion {
margin-top: 56px;
max-width: 768px;
}
.tcw-accordion .accordion-item {
background: transparent;
border: 0;
border-bottom: 1px solid #E9EAEB;
border-radius: 0;
overflow: hidden;
}
.tcw-accordion .accordion-item:last-child {
border-bottom: none;
}
.tcw-accordion .accordion-button {
background: transparent;
color: #fff;
font-family: 'Outfit';
font-weight: 600;
font-size: 16px;
box-shadow: none;
padding: 24px 5px 32px 0;
}
.tcw-accordion .accordion-button:not(.collapsed) {
background: transparent
}
.tcw-accordion .accordion-button:focus {
box-shadow: none;
border-color: transparent
}
.tcw-accordion .accordion-button::after {
content: "\F4FA";
font-family: 'bootstrap-icons';
font-size: 20px;
font-weight: 400;
color: #A4A7AE;
background-image: none;
transform: none;
}
.accordion-button:not(.collapsed)::after {
content: "\F2E6";
background-image: none;
transform: none;
}
.tcw-accordion .accordion-body {
color: var(--tcw-text);
padding: 0;
padding-bottom: 30px;
font-size: 14px;
line-height: 24px;
}@media (max-width: 991.98px) {
.custom-logo-link img {
max-width: 150px;
}
.navbar-collapse {
background: rgba(3, 2, 51, 0.98);
padding: 5%;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 280px;
height: 100dvh;
box-shadow: 2px 0px 20px #020233;
}
.navbar-toggler {
padding: 0;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-nav .menu-item:not(:last-child) {
border-bottom: 1px solid #022960;
}
.navbar-nav .menu-item a {
padding-left: 0;
display: block;
}
.navbar-nav .menu-item.contactBtn {
line-height: 30px;
margin-top: 20px;
padding-left: 10px;
display: inline-block;
max-width: max-content;
}
.section {
padding: 64px 0;
}
.hero-section {
padding: 64px 0 40px;
overflow: hidden;
}
.industry-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.industry-item {
border-right: 1px solid rgba(47, 47, 87, 1);
padding: 1em;
}
.industry-item:nth-child(2n),
.industry-item:last-child {
border-right: none;
}
.industry-item:last-child {
grid-column: 1 / -1;
}
.intro-section .section-header {
margin-bottom: 40px;
}
.panel-cards-row {
margin: inherit;
}
.tcw-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 0;
}
.ai-team-section {
margin-top: 90px;
margin-bottom: 55px;
}
.ai-section .section-header {
margin-bottom: 50px;
}
.use-card-body {
height: 250px;
}
.int-card {
padding: 20px 50px 50px 0;
}
.int-card.rightSide {
padding: 20px 20px 50px 50px;
}
.contact-section .contact-title {
font-size: 40px;
line-height: 50px;
}
.contact-section .contact-form {
margin-top: 40px;
}
.about-hero { 
padding: 50px 0 50px;
}
.zigzag-row { 
margin-top: 48px; 
}
.legal-hero .section-title {
font-size: 50px;
line-height: 60px;
margin-bottom: 50px;
}
.legal-hero {
padding: 70px 0 60px 0;
}
.legal-hero::after {
top: 150px;
}
.legal-heading {
margin-bottom: 30px;
}
.legal-body {
margin-bottom: 40px;
}
.tcw-footer {
padding: 40px 0 20px;
}
.footer-nav {
margin: 16px 0 33px;
}
.footer-bottom {
padding-top: 16px;
text-align: center;
gap: 15px;
}
.footer-legal-nav {
justify-content: center;
}
}
@media (max-width: 782px) {
body.admin-bar .tcw-header.sticky {
top: 46px;
}
}
@media (max-width: 767.98px) {
.section {
padding: 50px 10px;
}
.industry-grid {
padding: 20px;
max-width: 100%;
}
.industry-grid {
grid-template-columns: 1fr 1fr; 
}
.industry-item {
border-right: none;
border-bottom: 1px solid rgba(47, 47, 87, 1);
}
.industry-item:last-child {
border-bottom: none;
}
.tcw-grid .tcw-grid-item:last-child {
max-width: 100%;
}
.panel-card,
.panel-card.panel-dark,
.panel-card.panel-blue {
padding: 20px;
}
.about-hero {
padding: 50px 10px 20px;
}
.legal-hero {
padding: 50px 0;
}
.legal-hero::after {
top: 120px;
}
.legal-hero .section-title {
font-size: 40px;
line-height: 50px;
}
.legal-page-section {
padding: 0 10px;
}
.legal-page-section::before,
.legal-page-section::after,
.hero-circle {
width: 100%;
}
.about-hero.contact-section {
padding: 50px 10px;
}
.contact-section .contact-title {
font-size: 32px;
line-height: 40px;
}
.contact-section .contact-form {
margin-top: 20px;
padding: 16px;
}
.contact-section .ff-default .ff-btn-lg,
.contact-section .ff-default .ff-el-form-control {
padding: 12px;
border-radius: 7px;
}
.secure-trusted-section .col-md-4:nth-child(2) .icon-item {
margin: 20px 0;
}
.int-card {
padding: 40px 20px !important;
}
.integration-section.about-integration .absolute-icon {
right: 30%;
top: -30px;
}
.about-integration .int-card.rightSide .absolute-icon {
right: 40%;
top: -50px;
}
.integration-section .cards-row::before,
.integration-section .cards-row::after {
display: none;
}
.stat-card {
max-width: 100%;
}
.use-card-body {
height: auto;
}
}