/*
Theme Name: TenTrade
Theme URI: https://tentrade.com
Description: Custom child theme for TenTrade based on Understrap
Author: TenTrade
Author URI: https://tentrade.com
Template: understrap
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tentrade
*/
/* ===================================
Reset & Base Styles
=================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color Palette - TenTrade Brand Colors */
--primary-cyan: #9EB6FF;
--primary-pink: #F66584;
--primary-magenta: #D925C8;
--accent-purple: #9775FA;
--accent-purple-dark: #BE4BDB;
--accent-magenta: #B4238F;
--accent-green: #61CE70;
--accent-navy: #202462;
/* Neutrals */
--dark-bg: #1F1F1F;
--dark-card: #252628;
--dark-hover: #2f3033;
--gray-50: #F3F3F3;
--gray-100: #e8e8e8;
--gray-200: #d4d4d4;
--gray-300: #b8b8b8;
--gray-400: #a0a0a0;
--gray-500: #7A7A7A;
--gray-600: #54595F;
--gray-700: #404040;
--gray-800: #2a2a2a;
--gray-900: #1F1F1F;
/* Functional */
--success: #61CE70;
--warning: #F66584;
--error: #D925C8;
--white: #ffffff;
/* Typography */
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-heading: 'Questrial', 'Inter', sans-serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
--spacing-3xl: 6rem;
/* Bootstrap compatibility variables */
--bs-breadcrumb-margin-bottom: 0;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 350ms ease;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
max-width: 100%;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--gray-700);
background-color: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100%;
position: relative;
}
/* Avoid nested scroll containers that feel like iframes */
body,
.site,
.site-content,
main.site-main {
overflow-y: visible;
}
section {
overflow: visible;
}
.translatepress-ar {
direction: rtl;
}
/* ===================================
Utility Classes
=================================== */
.bg-light-grey {
background-color: var(--gray-50);
}
.bg-grey {
background-color: var(--gray-100);
}
.bg-dark-grey {
background-color: var(--gray-200);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
color: var(--gray-900);
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
}
h3 {
font-size: clamp(1.5rem, 3vw, 2rem);
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
color: inherit;
transition: all var(--transition-base);
}
/* ===================================
Container & Layout
=================================== */
.tentrade-container,
.wp-block-group.is-style-tentrade-container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
main.site-main {
/* padding-top: 96px; */
max-width: 100%;
overflow-x: hidden;
}
/* Constrain Gutenberg pages to the TenTrade container */
.tentrade-gutenberg-content {
padding: var(--spacing-xl) 0 var(--spacing-3xl);
}
.tentrade-gutenberg-content .tentrade-prose {
/*
max-width: 900px;
margin: 0 auto;
*/
}
/* Allow Full/Wide aligned blocks to break out of the prose column (for real "sections"). */
.tentrade-gutenberg-content :where(.tentrade-prose > .alignfull) {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.tentrade-gutenberg-content :where(.tentrade-prose > .alignwide) {
width: min(1280px, 100vw);
max-width: 100vw;
margin-left: calc(50% - min(640px, 50vw));
margin-right: calc(50% - min(640px, 50vw));
}
/* Restore sane typography defaults inside Gutenberg content (the theme reset zeros margins/padding). */
.tentrade-gutenberg-content :where(.tentrade-prose :is(.wp-block-column, .wp-block-group) > :first-child) {
margin-top: 0 !important;
}
.tentrade-gutenberg-content :where(.tentrade-prose :is(h2, h3, h4, h5, h6)) {
margin: var(--spacing-2xl) 0 var(--spacing-md);
scroll-margin-top: 120px;
text-decoration: none;
}
.tentrade-gutenberg-content :where(.tentrade-prose .wp-block-heading) {
text-decoration: none;
}
.tentrade-gutenberg-content :where(.tentrade-prose h2) {
font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.tentrade-gutenberg-content :where(.tentrade-prose h3) {
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
color: var(--gray-900);
}
.tentrade-gutenberg-content :where(.tentrade-prose p) {
margin: 0 0 1.25em;
color: var(--gray-600);
line-height: 1.85;
}
.tentrade-gutenberg-content :where(.tentrade-prose h2.tentrade-numbered-heading) {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
}
.tentrade-gutenberg-content :where(.tentrade-prose h2.tentrade-numbered-heading .tentrade-heading-number) {
display: none;
/*
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
color: var(--white);
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
font-family: var(--font-heading);
line-height: 1;
*/
}
.tentrade-gutenberg-content :where(.tentrade-prose h2.tentrade-numbered-heading .tentrade-heading-text) {
min-width: 0;
}
@media (max-width: 480px) {
.tentrade-gutenberg-content :where(.tentrade-prose h2.tentrade-numbered-heading) {
gap: var(--spacing-sm);
}
.tentrade-gutenberg-content :where(.tentrade-prose h2.tentrade-numbered-heading .tentrade-heading-number) {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
}
.tentrade-gutenberg-content :where(.tentrade-prose a:not(.wp-block-button__link)) {
color: var(--primary-magenta);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.tentrade-gutenberg-content :where(.tentrade-prose a:not(.wp-block-button__link):hover) {
color: var(--primary-pink);
}
.tentrade-gutenberg-content :where(.tentrade-prose strong) {
color: var(--gray-900);
}
.tentrade-gutenberg-content :where(.tentrade-prose ul),
.tentrade-gutenberg-content :where(.tentrade-prose ol) {
margin: 0 0 1.25em;
padding-left: 1.25em;
}
.tentrade-gutenberg-content :where(.tentrade-prose li + li) {
margin-top: 0.5em;
}
.tentrade-gutenberg-content :where(.tentrade-prose hr) {
border: 0;
height: 1px;
background: var(--gray-200);
margin: var(--spacing-2xl) 0;
}
.tentrade-gutenberg-content :where(.tentrade-prose .wp-block-separator) {
border: 0;
height: 1px;
background: var(--gray-200);
width: 120px;
max-width: 100%;
margin: var(--spacing-2xl) auto;
}
.tentrade-gutenberg-content :where(.tentrade-prose .wp-block-separator.is-style-wide) {
width: 100%;
}
.tentrade-gutenberg-content :where(.tentrade-prose blockquote) {
margin: var(--spacing-xl) 0;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--gray-50);
border-left: 4px solid var(--primary-magenta);
border-radius: var(--radius-lg);
}
.tentrade-gutenberg-content :where(.tentrade-prose blockquote p) {
margin: 0;
}
/* Site container to prevent overflow */
.site {
max-width: 100%;
overflow-x: hidden;
position: relative;
}
/* Ensure breadcrumb has no extra bottom spacing */
.breadcrumb {
margin-bottom: 0; /* fallback */
--bs-breadcrumb-margin-bottom: 0; /* explicit variable for Bootstrap-based layouts */
}
/* ===================================
Navigation
=================================== */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--gray-200);
z-index: 1000;
transition: all var(--transition-base);
}
.nav-content {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
height: 80px;
gap: var(--spacing-lg);
}
.navbar .tentrade-container {
width: 1320px;
max-width: 1320px;
padding: 0px;
}
.logo-text {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
/*
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
*/
color: black;
}
.logo {
justify-self: start;
width: auto;
margin-right: 60px;
outline: none;
direction: ltr;
}
.logo img {
width: 30px;
height: 26px;
position: relative;
}
.ten {
font-size: 29px;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter';
}
.logo-text {
border-left: 1px solid #000;
line-height: 1em;
padding-left: 7px;
}
.flip-wrap {
display: inline-block;
perspective: 800px;
display: flex;
}
.flip-text {
position: relative;
display: inline-block;
min-width: 50px;
min-height: 1.2em;
transform-style: preserve-3d;
animation: flip 8s infinite ease-in-out;
font-weight: bold;
}
.flip-text span {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
@keyframes flip {
0% { transform: rotateY(0deg);}
40% { transform: rotateY(0deg);}
43% { transform: rotateY(180deg); }
46% { transform: rotateY(360deg); }
49% { transform: rotateY(180deg); }
90% { transform: rotateY(180deg);}
92% { transform: rotateY(180deg);}
95% { transform: rotateY(0deg);}
98% { transform: rotateY(180deg);}
}
.nav-links {
display: flex;
align-items: center;
gap: var(--spacing-lg);
justify-self: end;
margin-left: 0;
width: 100%;
}
.nav-link {
display: flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-size: 0.9375rem;
color: var(--gray-700);
transition: color var(--transition-fast);
padding: 0.5rem 0;
}
.nav-links > * {
flex-shrink: 0;
}
.nav-links > .nav-item.has-dropdown:nth-child(4) {
/* margin-right: auto; */
}
.nav-link svg {
transition: transform var(--transition-fast);
}
.nav-item:hover .nav-link svg {
transform: rotate(180deg);
}
.nav-links a:not(.nav-link):not(.btn-login):not(.btn-primary) {
font-weight: 500;
font-size: 0.9375rem;
color: var(--gray-700);
transition: color var(--transition-fast);
}
.nav-links a:hover {
color: var(--primary-magenta);
}
.nav-link:hover {
color: var(--primary-magenta);
}
/* Dropdown Menus */
.dropdown-menu {
position: absolute;
/*top: 100%;
left: 50%;
transform: translateX(calc(-50%));
*/
width: calc(100vw - 14px);
right: auto;
left: 0px;
padding-top: 0.5rem;
background: var(--white);
border-radius: var(--radius-lg);
display: block;
margin: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
pointer-events: none;
z-index: 1000;
}
.dropdown-menu-wide,
.dropdown-menu-two-col,
.dropdown-menu-three-col,
.dropdown-menu-four-col {
width: calc(100vw - 17px);
}
.dropdown-menu-two-col .dropdown-content {
grid-template-columns: repeat(2, 1fr);
min-width: auto;
}
.dropdown-menu-three-col .dropdown-content {
grid-template-columns: repeat(3, 1fr);
min-width: auto;
}
.dropdown-menu-four-col .dropdown-content {
grid-template-columns: repeat(4, minmax(220px, 1fr));
min-width: auto;
}
.dropdown-menu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.5rem;
background: transparent;
}
.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.dropdown-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-lg);
min-width: 420px;
max-width: 1280px;
margin: 0 auto;
}
.nav-item.trp-language-switcher-container .dropdown-menu,
.nav-links .trp-language-switcher-container .dropdown-menu {
width: 300px;
max-width: 300px;
min-width: 100px;
overflow: hidden;
width: 300px !important;
}
.nav-item.trp-language-switcher-container .dropdown-content,
.nav-links .trp-language-switcher-container .dropdown-content {
min-width: auto;
max-width: 300px;
}
.dropdown-menu-wide .dropdown-content {
grid-template-columns: repeat(4, minmax(220px, 1fr));
min-width: auto;
}
.dropdown-section {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.dropdown-section h4, .dropdown-section .menu-subheading {
font-size: 16px;
color: var(--gray-300);
font-family: 'Inter', sans-serif;
border-bottom: 1px solid var(--gray-300);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
font-weight: 400;
}
.guides-two-col span.menu-subheading {
grid-column: span 2 !important;
}
h3 a {
color: #000000 !important;
}
.nav-links > .nav-item:last-child .dropdown-menu {
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
}
.nav-links > .nav-item:last-child .dropdown-content {
display: grid !important;
grid-template-columns: 140px 140px !important; /* Fixed widths */
justify-content: start !important; /* Moves columns to the left */
gap: 0 10px !important;
/* The 15px below controls the left-side margin exactly */
padding: 15px 15px !important;
}
.nav-links > .nav-item:last-child .dropdown-section {
width: 140px !important;
max-width: 140px !important;
margin: 0 !important;
padding: 4px 0 !important;
}
.nav-links > .nav-item:last-child .dropdown-section a {
display: flex !important;
align-items: center !important;
width: 100% !important;
white-space: nowrap;
/* Adjust internal padding of the link if text is too far from flag */
padding-left: 5px !important;
}
.guides-two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
grid-column: span 2;
}
.guides-two-col h4 {
grid-column: span 2;
}
.dropdown-section a {
font-size: 0.9375rem;
color: var(--gray-600);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
.dropdown-section a:hover {
background: var(--gray-50);
color: var(--primary-magenta);
padding-left: 1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Normalize WP widget menu markup inside the header so the menu behaves like the original
static markup (horizontal, aligned right). This removes extra widget wrapper impact. */
.nav-links .header-widget { display: contents; }
.nav-links .widget_nav_menu .menu {
display: flex;
align-items: center;
gap: var(--spacing-lg);
list-style: none;
margin: 0;
padding: 0;
}
.nav-links .widget_nav_menu .menu li {
margin: 0;
display: inline-flex;
align-items: center;
}
.nav-links .widget_nav_menu .menu li a {
display: inline-flex;
align-items: center;
}
/* If menu item classes are applied to the li (some setups), ensure anchor inherits button styles */
.nav-links .menu li.btn-primary > a,
.nav-links .menu li.btn-login > a,
.nav-links .menu li.btn-secondary > a,
.nav-links .menu li.btn-outline > a {
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-menu-toggle span {
width: 24px;
height: 2px;
background: var(--gray-700);
transition: all var(--transition-base);
}
.nav-links > .nav-item.has-dropdown:nth-child(4) .dropdown-menu .dropdown-content .dropdown-section:nth-child(2) a {
display: none;
}
.nav-links > .nav-item.has-dropdown:nth-child(4) .dropdown-menu .dropdown-content .dropdown-section:nth-child(2) {
background-image: url(/wp-content/uploads/2026/04/figo-603-e1775339933599.jpg);
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
height: 320px;
max-width: 100%;
border-radius: 12px;
}
.figo-gba {
margin: auto;
background: url(/wp-content/uploads/2026/04/figo-gba.webp);
width: 125px;
height: 65px;
background-size: contain;
overflow: visible;
background-repeat: no-repeat;
background-position: right;
font-family: 'Questrial';
position: relative;
direction: ltr;
}
.figo-gba::before {
content: 'Luis Figo';
font-size: 1rem;
top: 6px;
position: absolute;
font-weight: bold;
}
.figo-gba::after{
content: 'Global Brand\A Ambassador';
font-size: 0.65rem;
font-weight: normal;
white-space: pre-line;
display: block;
line-height: 1em;
top: 10px;
position: relative;
}
/* ===================================
Buttons
=================================== */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-login {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
border: none;
font-family: var(--font-body);
text-decoration: none;
border-radius: 8px;
background: var(--primary-white, #FFF);
box-shadow: 0 4px 4px 0 rgba(246, 101, 132, 0.25);
}
.btn-primary {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
color: var(--white);
box-shadow: 0 4px 12px rgba(246, 101, 132, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(217, 37, 200, 0.4);
}
.btn-secondary {
border-radius: 8px;
border: 1px solid #F66584 !important;
background: var(--primary-white, #FFF);
box-shadow: 0 4px 4px 0 rgba(246, 101, 132, 0.25);
color: var(--gray-800) !important;
}
.btn-secondary:hover {
background: var(--primary-cyan);
color: var(--white);
}
.btn-outline {
background: transparent;
color: var(--gray-700);
border-radius: 8px;
border: 1px solid #F66584 !important;
background: var(--primary-white, #FFF);
box-shadow: 0 4px 4px 0 rgba(246, 101, 132, 0.25);
}
.btn-outline:hover {
border-color: var(--primary-magenta);
color: var(--primary-magenta);
}
.btn-login {
background: transparent;
color: var(--gray-700);
padding: 0.5rem 1rem;
}
.btn-login:hover {
color: var(--primary-magenta);
}
.btn-large {
padding: 1rem 2rem;
font-size: 1rem;
}
/* ===================================
Hero Section
=================================== */
.hero {
padding-top: 140px;
padding-bottom: var(--spacing-3xl);
background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
/* Hero with background image - white text overlay */
.hero-with-bg {
position: relative;
color: white;
}
.hero-with-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-with-bg .tentrade-container {
position: relative;
z-index: 2;
}
.hero-with-bg .hero-title,
.hero-with-bg .hero-subtitle,
.hero-with-bg .hero-text,
.hero-with-bg .hero-text *,
.hero-with-bg .feature-badge {
color: white;
}
.home .hero-title {
color: #ffffff !important;
font-size:clamp(2.5rem, 5vw, 6rem);
line-height: 1em;
}
.home .hero-subtitle {
color: #fefefe !important;
}
.hero-with-bg .feature-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
max-width: 100%;
}
.hero-title {
margin-bottom: var(--spacing-md);
color: var(--gray-900);
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--gray-600);
margin-bottom: var(--spacing-lg);
line-height: 1.7;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
margin-bottom: 0px;
margin-top: var(--spacing-lg);
max-width: 100%;
flex-wrap: wrap;
zoom: 1.3;
}
.hero-features {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.feature-badge {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: 0.5rem 1rem;
background: var(--white);
border-radius: var(--radius-lg);
font-size: 0.875rem;
font-weight: 500;
color: var(--gray-700);
box-shadow: var(--shadow-sm);
}
.feature-badge svg {
color: var(--primary-cyan);
}
.trading-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-200);
}
.card-header {
margin-bottom: var(--spacing-md);
}
.market-ticker {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.ticker-symbol {
font-weight: 700;
font-size: 1.25rem;
color: var(--gray-900);
}
.ticker-price {
font-weight: 600;
font-size: 1.5rem;
}
.ticker-change {
font-weight: 600;
font-size: 0.875rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.positive {
color: var(--success);
background: rgba(16, 185, 129, 0.1);
}
.chart-placeholder {
height: 200px;
background: linear-gradient(180deg, rgba(151, 117, 250, 0.05) 0%, rgba(110, 193, 228, 0.05) 100%);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
}
.mini-chart {
width: 100%;
height: 100%;
}
/* ===================================
Section Headers
=================================== */
.section-header,
.wp-block-group.is-style-tentrade-section-header {
text-align: justify;
max-width: 800px;
margin: 0 auto var(--spacing-3xl);
}
.section-header h2,
.wp-block-group.is-style-tentrade-section-header h2 {
margin-bottom: var(--spacing-md);
}
.section-header p,
.wp-block-group.is-style-tentrade-section-header p {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: 1.6em;
}
.section-header p:last-child,
.wp-block-group.is-style-tentrade-section-header p:last-child {
margin-bottom: 0;
}
/* ===================================
Features Section
=================================== */
.features {
padding: var(--spacing-3xl) 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
gap: var(--spacing-lg);
justify-content: center;
max-width: 100%;
}
.promote-features .features-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
}
.feature-card {
padding: var(--spacing-md);
background: var(--white);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
}
.promote-features .features-grid .feature-card:first-of-type {
background: none;
border: none !important;
background-image: url(/wp-content/uploads/2026/03/arrows.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}
.feature-card:hover {
transform: translateY(-2px);
}
.feature-icon {
width: 184px;
height: 184px;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
margin-bottom: var(--spacing-md);
clip-path: polygon(
25% 6.7%,
75% 6.7%,
100% 50%,
75% 93.3%,
25% 93.3%,
0% 50%
);
float: right;
position: absolute;
right: -70px;
top: 10px;
}
.feature-icon svg {
width: 64px;
height: 64px;
}
.home .feature-icon svg {
position: relative;
right: 20px;
}
.feature-card h3 {
margin-bottom: var(--spacing-sm);
font-size: 1.4rem;
font-weight: 700;
/*
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
*/
background-clip: text;
color: var(--gray-700);
}
.feature-card p {
color: var(--gray-600);
line-height: 1.7;
max-width: 230px;
}
/* ===================================
Accounts Section
=================================== */
.accounts {
padding: var(--spacing-3xl) 0;
background: var(--gray-50);
}
.accounts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
max-width: 100%;
}
.account-card {
position: relative;
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-xl);
transition: all var(--transition-base);
}
.account-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.account-card.featured {
background: linear-gradient(135deg, rgba(246, 101, 132, 0.03) 0%, rgba(217, 37, 200, 0.03) 100%);
box-shadow: 0 0 0 2px var(--primary-magenta);
}
.account-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
background: var(--gray-900);
color: var(--white);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-lg);
}
.account-badge.premium {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
}
.account-card h3 {
margin-bottom: var(--spacing-lg);
font-size: 1.75rem;
text-align: center;
}
.account-features {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.account-feature {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--gray-200);
}
.account-feature:last-child {
border-bottom: none;
}
.feature-label {
font-size: 0.875rem;
color: var(--gray-600);
}
.feature-value {
font-weight: 600;
font-size: 1.125rem;
color: var(--gray-900);
}
.account-card .btn-primary,
.account-card .btn-outline {
width: 100%;
}
.account-specs {
background: #161616;
background: url(/wp-content/uploads/2026/03/bg-account-types.png);
background-size: cover;
}
.account-specs h2 {
color: #ffffff;
}
/* ===================================
Instruments Section
=================================== */
.instrument-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
max-width: 100%;
}
/* ===================================
Platforms Section
=================================== */
.platforms {
padding: var(--spacing-3xl) 0;
}
.platforms-content {
display: grid;
grid-template-columns: 4fr 8fr;
gap: var(--spacing-sm);
align-items: top;
}
.platforms-text h2 {
margin-bottom: var(--spacing-md);
}
.platforms-subtitle {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: var(--spacing-xl);
line-height: 1.7;
}
.platforms-features {
margin-bottom: var(--spacing-xl);
list-style: disc;
}
.platforms-features li {
font-size: 1rem;
color: var(--gray-700);
}
.platforms-features svg {
color: var(--accent-green);
flex-shrink: 0;
}
.platform-downloads {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.platform-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 0.75rem 1.5rem;
background: var(--gray-100);
border-radius: var(--radius-md);
font-weight: 500;
color: var(--gray-700);
text-decoration: none;
transition: all var(--transition-base);
line-height: 1;
}
.platform-btn:hover {
background: var(--primary-cyan);
color: var(--white);
text-decoration: none;
}
.platform-btn svg {
width: 24px;
height: 24px;
flex-shrink: 0;
display: block;
}
.platform-mockup {
width: 100%;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-card) 100%);
border-radius: var(--radius-xl);
padding: var(--spacing-md);
box-shadow: var(--shadow-xl);
border: 1px solid var(--gray-700);
}
.mockup-screen {
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(151, 117, 250, 0.1) 0%, rgba(110, 193, 228, 0.1) 100%);
border-radius: var(--radius-md);
}
.mockup-screen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#secondary img, article img, figure, img, img.wp-post-image {
width: 100%;
height: 100%;
}
/* ===================================
Trust Section
=================================== */
.trust {
padding: var(--spacing-3xl) 0;
background: var(--dark-bg);
color: var(--white);
}
.trust-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
}
.trust-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.stat-card {
text-align: center;
padding: var(--spacing-lg);
}
.stat-number {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(130deg, var(--primary-cyan) 0%, var(--accent-purple) 100%);
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-xs);
}
.stat-label {
font-size: 1rem;
color: var(--gray-400);
}
.trust-badges h3 {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.trust-badges p {
color: var(--gray-400);
margin-bottom: var(--spacing-lg);
line-height: 1.7;
}
.security-features {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.security-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--gray-300);
}
.security-item svg {
color: var(--accent-green);
flex-shrink: 0;
}
/* ===================================
CTA Section
=================================== */
.cta,
.comparison-cta,
.wp-block-group.is-style-tentrade-cta {
padding: var(--spacing-3xl) 0;
background: url(/wp-content/themes/tentrade/assets/noise.png) 0% 0% / 100px 100px repeat,
linear-gradient(107deg, #4D144B 20.2%, #222545 65.87%, #252628 95%);
background-size: inherit;
background-repeat: repeat;
}
.cta-content {
text-align: center;
color: var(--white);
}
.cta-content h2 {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.cta-content p {
font-size: 1.25rem;
margin-bottom: var(--spacing-xl);
color: rgba(255, 255, 255, 0.9);
}
.cta-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
/* Add spacing beneath CTA buttons on partnership page CTA section */
.cta-section .cta-buttons {
margin-bottom: var(--spacing-xl);
}
.cta .btn-secondary {
border-color: var(--white);
color: var(--white);
}
.cta .btn-secondary:hover {
background: var(--white);
color: var(--primary-magenta);
}
.cta-orange {
padding: var(--spacing-3xl) 0;
}
.cta-orange .container {
color: var(--white);
background: url(/wp-content/uploads/2026/03/cta-orange.png);
background-size: 100% 100%;
max-width: 1120px;
text-align: center;
margin: 0 auto;
padding: var(--spacing-2xl) 0;
}
.cta-orange .comparison-content p {
color: var(--gray-300) !important;
}
.cta-orange h2 {
margin-bottom: var(--spacing-md);
color: #ffffff
}
/* ===================================
Footer
=================================== */
.footer {
background: var(--dark-bg);
color: var(--gray-400);
padding: var(--spacing-3xl) 0 var(--spacing-lg);
}
.footer-content {
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-3xl);
}
.footer-section h4 {
color: var(--white);
margin-bottom: var(--spacing-md);
font-size: 1.125rem;
}
.footer-section h5 {
color: var(--gray-600);
font-weight: 400;
font-size: 14px;
margin: 20px 0px;
}
.footer-section p {
line-height: 1.7;
margin-bottom: var(--spacing-md);
}
.footer-section ul {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 12px;
}
.footer-section ul li {
margin-bottom: var(--spacing-xs);
}
.footer-section a:hover {
color: var(--primary-cyan);
}
.footer-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: flex-start;
}
.figoxtentrade-section {
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.figoxtentrade-section > *:last-child {
justify-self: end;
text-align: right;
}
.figoxtentrade img {
height: 50px !important;
width: auto !important;
}
@media (max-width: 1024px) {
.figoxtentrade-section {
grid-template-columns: 1fr;
}
.figoxtentrade-section > *:last-child {
text-align: left;
margin-top: var(--spacing-lg);
}
}
/* ====================== MOBILE FIRST ====================== */
/* everything stacked */
.footer-section,
.brand-section {
flex: 0 0 100%;
min-width: 0;
}
.footer-section {
display: none;
}
/* Trade collapses to 1 column on mobile */
.footer-section--trade {
column-count: 1;
column-gap: 0;
}
.footer-section--trade h4 {
margin-bottom: 24px;
}
/* try to reduce bad column breaks */
.footer-section--trade h5,
.footer-section--trade ul {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
.footer-section--trade h5 {
font-weight: 400;
margin-bottom: 20px;
}
.footer-section--trade ul {
margin-bottom: 24px;
}
/* ====================== TABLET PORTRAIT (768px - 991px) ====================== */
@media (min-width: 768px) and (max-width: 991px) {
/* Row 1: Brand full width */
.brand-section {
flex: 0 0 100%;
order: 1;
}
/* Row 2: Trade full width */
.footer-section--trade {
flex: 0 0 100%;
order: 2;
column-count: 2;
column-gap: 40px;
}
/* Row 3+: Learn / Company / Partner in 2 columns */
.footer-section:not(.brand-section):not(.footer-section--trade) {
flex: 0 0 calc(50% - 20px);
order: 3;
}
.footer-section {
display: block;
}
}
/* ====================== DESKTOP (>= 992px) ====================== */
@media (min-width: 992px) {
/* Row 1: Brand full width */
.brand-section {
flex: 0 0 100%;
order: 1;
}
/* Row 2: Trade = 2 units */
.footer-section--trade {
flex: 2 1 0;
order: 2;
column-count: 2;
column-gap: 40px;
min-width: 0;
}
/* Row 2: Learn / Company / Partner = 1 unit each */
.footer-section:not(.brand-section):not(.footer-section--trade) {
flex: 1 1 0;
order: 2;
min-width: 0;
}
.footer-section {
display: block;
}
}
@media (min-width: 768px) {
.footer-section--trade h4 {
column-span: all;
margin-bottom: 24px;
}
.footer-section--trade h5:nth-of-type(1) {
margin-top: 0px;
}
}
.social-links {
display: flex;
gap: var(--spacing-md);
}
.social-links svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.social-links a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--dark-card);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.social-links a:hover {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
transform: translateY(-2px);
}
.footer-bottom {
padding-top: var(--spacing-xl);
border-top: 1px solid var(--dark-card);
}
/* ===================================
Comparison Table
=================================== */
.comparison-table-wrapper {
overflow-x: auto;
margin: var(--spacing-xl) 0;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-table thead {
/*
background: var(--gray-900) !important;
color: var(--white) !important;
*/
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
color: var(--white);
}
.comparison-table th {
padding: var(--spacing-lg);
text-align: left;
font-weight: 600;
font-size: 1.125rem;
}
.comparison-table th:first-child {
width: 40%;
}
.comparison-table td {
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--gray-200);
}
.comparison-table tbody tr:last-child td {
border-bottom: none;
}
.comparison-table tbody tr:hover {
background: var(--gray-50);
}
.comparison-table td.feature-label {
font-weight: 500;
color: var(--gray-700);
}
.comparison-table td:not(.feature-label) {
text-align: center;
color: var(--gray-600);
}
@media (max-width: 768px) {
.comparison-table th,
.comparison-table td {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
.comparison-table th:first-child {
width: 50%;
}
}
.footer-legal {
margin-bottom: var(--spacing-lg);
font-size: 0.875rem;
line-height: 1.7;
}
.footer-legal strong {
color: var(--white);
}
.footer-copyright {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
}
.footer-links {
display: flex;
gap: var(--spacing-lg);
}
/* ===================================
Responsive Design
=================================== */
@media (max-width: 1024px) {
.hero-content,
.platforms-content,
.trust-content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.hero-image {
order: -1;
}
.trust-stats {
grid-template-columns: repeat(4, 1fr);
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
/* Adjust dropdown for smaller screens */
.dropdown-menu {
max-width: calc(100vw - 40px);
}
}
@media (max-width: 768px),
(min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
.nav-links {
display: none;
position: fixed;
top: 80px;
left: 0;
right: 0;
flex-direction: column;
background: var(--white);
padding: var(--spacing-lg);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
max-height: calc(100vh - 80px);
overflow-y: auto;
z-index: 999;
}
.nav-links.active {
display: flex;
}
.nav-item {
width: 100%;
}
.nav-link {
width: 100%;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--gray-200);
}
/* Hide border when submenu is collapsed */
.nav-item:not(.active) .dropdown-menu {
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.nav-item:not(.active) .dropdown-menu * {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.dropdown-menu {
position: static;
transform: none;
margin-top: 0;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
min-width: auto;
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
background: var(--gray-50);
}
.nav-item.active .dropdown-menu {
max-height: none;
opacity: 1;
visibility: visible;
pointer-events: all;
background: var(--gray-50);
padding: 0;
overflow: visible;
}
.dropdown-content {
grid-template-columns: 1fr !important;
padding: var(--spacing-md) 0;
min-width: auto !important;
}
/* Force all dropdown variations to single column on mobile */
.dropdown-menu-wide .dropdown-content,
.dropdown-menu-two-col .dropdown-content,
.dropdown-menu-three-col .dropdown-content,
.dropdown-menu-four-col .dropdown-content {
grid-template-columns: 1fr !important;
}
/* Force guides section to single column on mobile */
.guides-two-col {
grid-template-columns: 1fr !important;
grid-column: span 1 !important;
}
.dropdown-section {
padding: 0 var(--spacing-md);
}
.nav-links .btn-login,
.nav-links .btn-primary {
width: 100%;
justify-content: center;
padding: 0.75rem 1.5rem;
}
.mobile-menu-toggle {
display: flex;
}
.hero {
padding-top: 100px;
}
.hero-cta {
flex-direction: column;
}
.hero-cta .btn-large {
width: 100%;
}
.features-grid,
.accounts-grid {
grid-template-columns: 1fr;
}
.trust-stats {
grid-template-columns: repeat(2, 1fr);
}
.platform-downloads {
flex-direction: column;
}
.platform-btn {
width: 100%;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn-large {
width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
}
.footer-copyright {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
.footer-links {
flex-direction: column;
gap: var(--spacing-sm);
}
}
@media (max-width: 768px) {
/* Typography scaling */
h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
}
h2 {
font-size: clamp(1.5rem, 4vw, 2rem);
}
h3 {
font-size: 1.25rem;
}
/* Hero adjustments */
.hero-subtitle {
font-size: 1rem;
margin-bottom: var(--spacing-md);
}
.hero-features {
flex-direction: column;
gap: var(--spacing-sm);
}
.feature-badge {
width: 100%;
justify-content: center;
}
.trading-card {
padding: var(--spacing-md);
}
/* Page hero */
.page-hero {
padding: var(--spacing-xl) 0;
}
.page-hero-content {
grid-template-columns: 1fr !important;
gap: var(--spacing-xl);
display: grid !important;
}
.breadcrumb {
padding: 100px 0 var(--spacing-md);
}
.specs-card {
padding: var(--spacing-md);
}
.spec-row {
padding: var(--spacing-sm) 0;
}
.spec-label,
.spec-value {
font-size: 0.875rem;
}
.spec-value.highlight {
font-size: 1.25rem;
}
/* Grids */
.specs-grid,
.benefits-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
/* Cards */
.feature-card,
.account-card,
.spec-card,
.benefit-card {
padding: var(--spacing-md);
}
.feature-icon,
.spec-icon {
width: 56px;
height: 56px;
}
.benefit-icon {
width: 64px;
height: 64px;
}
/* Stats */
.trust-stats {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.stat-number {
font-size: 2.5rem;
}
/* Section spacing */
.features,
.accounts,
.platforms,
.trust,
.cta,
.account-specs,
.instrument-specs,
.funded-specs,
.benefits,
.comparison-cta {
padding: var(--spacing-xl) 0;
}
.section-header {
margin-bottom: var(--spacing-xl);
}
.section-header p {
font-size: 1rem;
}
/* Footer */
.footer {
padding: var(--spacing-xl) 0 var(--spacing-md);
}
.footer-content {
margin-bottom: var(--spacing-xl);
}
/* Dropdown improvements */
.dropdown-menu {
background: var(--gray-50);
border-radius: 0;
}
.dropdown-menu::before {
display: none;
}
.nav-item.active .dropdown-menu {
max-height: none;
margin-bottom: var(--spacing-md);
overflow: visible;
}
.dropdown-content {
background: transparent;
}
.dropdown-section {
padding: var(--spacing-sm) var(--spacing-md);
display: flex;
}
.dropdown-section h4 {
font-size: 0.75rem;
}
.dropdown-section a {
font-size: 0.875rem;
padding: var(--spacing-xs) var(--spacing-sm);
}
.nav-item {
border-bottom: 1px solid var(--gray-200);
}
.nav-item:last-of-type {
border-bottom: none;
}
.nav-link {
padding: var(--spacing-md);
}
.nav-links .btn-login,
.nav-links .btn-primary {
margin-top: var(--spacing-md);
padding: 0.75rem 1.5rem;
}
.nav-links {
gap: 0;
padding: var(--spacing-md);
}
.comparison-content .btn-large {
width: 100%;
}
}
@media (max-width: 480px) {
:root {
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 3rem;
}
.tentrade-container {
padding: 0 var(--spacing-md);
}
/* Navigation */
.nav-content {
height: 70px;
}
.logo-text {
font-size: 1.5rem;
}
.nav-links {
top: 70px;
max-height: calc(100vh - 70px);
}
/* Typography */
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.125rem;
}
.hero {
padding-top: 90px;
}
.breadcrumb {
padding: 90px 0 var(--spacing-sm);
}
.hero-subtitle,
.comparison-content p {
font-size: 0.9375rem;
}
/* Buttons */
.btn-large {
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
}
/* Cards */
.trading-card,
.specs-card,
.feature-card,
.account-card,
.spec-card,
.benefit-card {
padding: var(--spacing-md);
}
.account-badge {
font-size: 0.6875rem;
padding: 0.375rem 0.75rem;
}
/* Stats */
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 0.875rem;
}
.spec-highlight {
font-size: 1.5rem;
}
/* Footer */
.footer-legal,
.footer-copyright {
font-size: 0.8125rem;
}
.social-links a {
width: 36px;
height: 36px;
}
/* Icons */
.feature-icon,
.spec-icon {
width: 48px;
height: 48px;
}
.feature-icon svg,
.spec-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.benefit-icon {
width: 56px;
height: 56px;
}
.benefit-icon svg {
width: 32px;
height: 32px;
}
.platform-mockup {
padding: var(--spacing-sm);
}
}
/* Landscape mobile optimization - only for taller landscape displays */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
.hero {
padding-top: 80px;
padding-bottom: var(--spacing-md);
}
.hero-content,
.page-hero-content {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.trust-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* Touch device optimizations */
@media (hover: none) {
.feature-card:hover,
.account-card:hover,
.spec-card:hover,
.benefit-card:hover {
transform: none;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
transform: none;
}
}
/* ===================================
Animations
=================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content,
.feature-card,
.account-card {
animation: fadeInUp 0.6s ease-out;
}
/* ===================================
Utility Classes
=================================== */
.text-center {
text-align: center;
}
.text-gradient {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===================================
Breadcrumb
=================================== */
.breadcrumb {
padding: 120px 0 var(--spacing-md);
background: var(--gray-50);
}
.breadcrumb-content {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.875rem;
}
.breadcrumb-content a {
color: var(--gray-600);
transition: color var(--transition-fast);
}
.breadcrumb-content a:hover {
color: var(--primary-magenta);
}
.breadcrumb-content .separator {
color: var(--gray-400);
}
.breadcrumb-content span:last-child {
color: var(--gray-900);
font-weight: 500;
}
/* ===================================
Page Hero
=================================== */
.page-hero {
padding: var(--spacing-2xl) 0;
background: var(--gray-50);
}
.page-hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--spacing-xl);
align-items: center;
}
.author .page-hero-content {
align-items: flex-start;
}
.page-hero-text:has(.post-byline) h1 {
margin-bottom: 0px;
}
.page-hero-text .badge {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
background: transparent;
color: var(--white);
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-md);
border: 1px dashed var(--primary-pink);
display: none;
}
.post-byline {
margin: 0 0 var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.95rem;
color: var(--gray-400);
}
.page-hero-image {
width: 100%;
max-width: 768px;
/* aspect-ratio: 1 / 1; */
overflow: hidden;
border-radius: var(--radius-xl);
}
.page-hero-avatar {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.page-hero-avatar-img {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--shadow-sm);
}
/* If the hero contains a specs card, allow overflow so the card can extend outside the image box.
Uses CSS :has() where supported, with a JS-toggle fallback via `.specs-visible`. */
.page-hero-image:has(.specs-card),
.page-hero-image.specs-visible {
overflow: visible;
}
.page-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 1024px) {
.page-hero-content .page-hero-image {
display: none;
}
}
@media (min-width: 600px) and (max-width: 1024px) {
.page-hero-content .page-hero-image:has(.specs-card),
.page-hero-content .page-hero-image.specs-visible {
display: block;
margin: 0 auto;
}
}
/* Hero with custom background image */
.page-hero[style*="background-image"] {
color: var(--white);
background-size: cover;
background-position: center;
}
.page-hero[style*="background-image"] .page-hero-text h1,
.page-hero[style*="background-image"] .page-hero-text p,
.page-hero[style*="background-image"] .page-hero-text .hero-subtitle,
.page-hero[style*="background-image"] .post-byline-row {
color: var(--white);
color: rgba(255,255,255,0.85);
/* text-shadow: 0 0 4px rgba(0, 0, 0, 0.7); */
}
.page-hero[style*="background-image"] .specs-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
.page-hero-text h1 {
margin-bottom: var(--spacing-md);
}
.author-hero-title {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.author-hero-title h1 {
margin: 0;
line-height: 96px;
}
.author-hero-title + .author-bio {
margin-top: 50px;
}
.author-hero-title img {
width: 96px;
height: 96px;
border-radius: 0;
object-fit: cover;
}
.author-article {
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
margin-bottom: 50px;
}
.author-article-image {
flex: 0 0 240px;
}
.author-article-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.author-article-content {
flex: 1;
}
.author-article-content h2 {
margin-top: 0;
}
/* Center section headers */
.section-header h2,
.wp-block-group.is-style-tentrade-section-header h2 {
text-align: center;
}
/* Center section header paragraph */
.section-header p,
.wp-block-group.is-style-tentrade-section-header p {
text-align: center;
}
.specs-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.specs-card h3 {
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
}
.spec-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-xs) 0;
}
.spec-row:last-child {
border-bottom: none;
}
.spec-label {
font-size: 0.9375rem;
color: var(--gray-600);
}
.spec-value {
font-weight: 600;
font-size: 1.125rem;
color: var(--gray-900);
}
.spec-value.highlight {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
}
.spec-label.highlight {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
}
/* ===================================
Account Specifications
=================================== */
.account-specs,
.funded-specs,
.instrument-specs,
.wp-block-group.is-style-tentrade-account-specs {
padding: var(--spacing-3xl) 0;
}
.specs-grid,
.wp-block-group.is-style-tentrade-specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
gap: var(--spacing-sm);
justify-content: center;
}
.spec-card {
display: flex;
padding: 30px 50px 40px 20px;
flex-direction: column;
align-items: flex-start;
border-radius: 11px;
background: #252628;
position: relative;
}
.spec-icon {
border-radius: 41px;
background: linear-gradient(130deg, rgba(246, 101, 132, 0.10) 0%, rgba(217, 37, 200, 0.10) 100%);
position: absolute;
right: 13px;
top: 17px;
display: flex;
width: 80px;
height: 80px;
padding: 24px;
justify-content: center;
align-items: center;
}
.spec-icon svg {
width: 32px;
height: 32px;
stroke: #D925C8;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.spec-card h3 {
color: #FFF;
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: 1.36em; /* 136% */
}
.spec-highlight {
background: var(--3, linear-gradient(180deg, #F66584 0%, #D925C8 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 500;
align-self: stretch;
line-height: 1em;
margin: 0px;
}
.page-id-87 .spec-card .spec-highlight {
font-size: 1.2rem;
}
.spec-description {
font-size: 0.9375rem;
color: var(--gray-200);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.2em; /* 120% */
min-height: 2em;
margin-bottom: 3em;
width: 300px;
}
/* ===================================
Benefits Section
=================================== */
.benefits,
.wp-block-group.is-style-tentrade-benefits {
padding: var(--spacing-3xl) 0;
background: var(--gray-50);
}
.benefits-grid,
.wp-block-group.is-style-tentrade-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 360px));
gap: var(--spacing-xl);
justify-content: center;
}
.benefit-card {
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.benefit-card:hover {
transform: translateY(-2px);
}
.benefit-icon {
width: 80px;
height: 80px;
margin-bottom: var(--spacing-md);
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
}
.benefit-card h3 {
margin-bottom: var(--spacing-sm);
font-size: 1.25rem;
}
.benefit-card p {
color: var(--gray-600);
line-height: 1.7;
}
/* ===================================
Comparison CTA
=================================== */
.comparison-cta {
padding: var(--spacing-3xl) 0;
background: var(--white);
}
.comparison-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.comparison-content h2 {
margin-bottom: var(--spacing-md);
}
.comparison-content p {
font-size: 1.125rem;
color: var(--gray-600);
margin-bottom: var(--spacing-xl);
}
/* ===================================
Pricing Table
=================================== */
.pricing-table-wrapper {
overflow-x: auto;
margin-top: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
min-width: 800px;
}
.pricing-table-mobile-selector {
display: none;
width: calc(100% - 30px);
padding: 0.6rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.12);
color: var(--gray-900, #1F1F1F);
font-size: 0.95rem;
font-weight: 600;
margin: 0 15px;
}
.pricing-table-mobile-selector option {
color: var(--gray-900, #1F1F1F);
background: var(--white);
}
.pricing-table thead th {
color: var(--white);
padding: var(--spacing-md) var(--spacing-sm);
font-weight: 600;
text-align: center;
font-size: 1rem;
}
.pricing-table thead {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
}
.pricing-table a {
text-decoration: none;
}
.pricing-table thead th {
background: transparent;
border-right: none;
}
.pricing-table thead th:first-child {
text-align: left;
padding-left: var(--spacing-md);
}
.pricing-table thead th:last-child {
border-right: none;
}
.pricing-table tbody tr {
border-bottom: 1px solid var(--gray-200);
}
.pricing-table tbody tr:last-child {
border-bottom: none;
}
.pricing-table tbody tr:hover {
background: var(--gray-50);
}
.pricing-table td {
padding: var(--spacing-md) var(--spacing-sm);
text-align: center;
font-size: 0.9375rem;
border-right: 1px solid var(--gray-200);
}
.pricing-table td:first-child {
text-align: left;
font-weight: 500;
padding-left: var(--spacing-md);
}
.pricing-table td:last-child {
border-right: none;
}
.pricing-table .price-row td {
padding: var(--spacing-lg) var(--spacing-sm);
background: var(--gray-50);
}
.pricing-table .price-row td strong {
font-size: 1.125rem;
color: var(--gray-900);
}
.pricing-table .spec-label {
color: var(--gray-600);
}
@media (max-width: 768px) {
.pricing-table-wrapper {
border-radius: 0;
}
.pricing-table {
font-size: 0.875rem;
}
.pricing-table thead th,
.pricing-table td {
padding: var(--spacing-sm) var(--spacing-xs);
font-size: 0.8125rem;
}
.pricing-table thead th:first-child,
.pricing-table td:first-child {
padding-left: var(--spacing-sm);
}
}
@media (max-width: 767px) {
.pricing-table-mobile-selector {
display: block;
}
.page-id-79 .pricing-table td:first-child,
.page-id-79 .pricing-table th:first-child,
.page-id-80 .pricing-table td:first-child,
.page-id-80 .pricing-table th:first-child,
.page-id-81 .pricing-table td:first-child,
.page-id-81 .pricing-table th:first-child,
.page-id-268 .pricing-table td:first-child,
.page-id-268 .pricing-table th:first-child {
width: 160px;
min-width: 160px;
max-width: 160px;
}
.page-id-79 .pricing-table,
.page-id-80 .pricing-table,
.page-id-81 .pricing-table,
.page-id-268 .pricing-table {
width: 100% !important;
min-width: 0 !important;
table-layout: fixed;
}
.page-id-79 .pricing-table td,
.page-id-80 .pricing-table td,
.page-id-81 .pricing-table td,
.page-id-268 .pricing-table td {
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
}
.page-id-79 .pricing-table td:not(:first-child),
.page-id-80 .pricing-table td:not(:first-child),
.page-id-81 .pricing-table td:not(:first-child),
.page-id-268 .pricing-table td:not(:first-child) {
width: calc(100% - 160px);
}
.page-id-79 .pricing-table {
min-width: 0;
}
.page-id-79 .pricing-table .is-hidden-mobile {
display: none;
}
}
/* ===================================
Forex Steps
=================================== */
.forex-steps {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.forex-step {
display: flex;
gap: var(--spacing-lg);
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-xl);
transition: all var(--transition-base);
}
.step-number {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
font-family: var(--font-heading);
}
.step-content h3 {
margin-bottom: var(--spacing-md);
color: var(--gray-900);
}
.step-content > p {
margin-bottom: var(--spacing-md);
color: var(--gray-600);
line-height: 1.7;
}
.step-list {
list-style: none;
padding: 0;
margin: 0;
}
.step-list li {
padding: var(--spacing-sm) 0;
padding-left: var(--spacing-lg);
position: relative;
color: var(--gray-600);
line-height: 1.7;
}
.step-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--primary-magenta);
font-weight: 700;
}
.step-list li strong {
color: var(--gray-900);
}
.forex-example {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-xl);
}
.forex-example p {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--gray-600);
}
@media (max-width: 768px) {
.forex-step {
flex-direction: column;
padding: var(--spacing-md);
}
.step-number {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.step-list li {
padding-left: var(--spacing-md);
font-size: 0.9375rem;
}
.forex-example {
padding: var(--spacing-md);
}
}
/* Partnership Calculator Styles */
.calculator-wrapper {
max-width: 800px;
margin: 0 auto;
}
.calculator-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--spacing-2xl);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
align-items: center;
}
.calculator-inputs {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.calculator-input-group label {
display: block;
font-weight: 500;
color: var(--gray-700);
margin-bottom: var(--spacing-sm);
}
.input-with-label {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.input-with-label input[type="range"] {
width: 100%;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--gray-200);
border-radius: 3px;
outline: none;
}
.input-with-label input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
cursor: pointer;
}
.input-with-label input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
cursor: pointer;
border: none;
}
.input-display {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.input-display input[type="number"] {
width: 100px;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
color: var(--gray-900);
text-align: center;
}
.input-display input[type="number"]:focus {
outline: none;
border-color: var(--primary-pink);
}
.input-display span {
color: var(--gray-600);
font-size: 0.9375rem;
}
.calculator-result {
text-align: center;
padding: var(--spacing-xl);
background: var(--gray-50);
border-radius: var(--radius-lg);
}
.result-label {
font-size: 0.875rem;
color: var(--gray-600);
margin-bottom: var(--spacing-sm);
}
.result-amount {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-md);
}
.result-cta {
font-size: 1rem;
color: var(--gray-700);
margin-bottom: var(--spacing-md);
}
.calculator-disclaimer {
text-align: center;
font-size: 0.8125rem;
color: var(--gray-500);
margin-top: var(--spacing-lg);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Partner Badge Styles */
.badge-showcase {
display: flex;
justify-content: center;
padding: var(--spacing-xl) 0;
}
.badge-card {
background: var(--white);
padding: var(--spacing-2xl);
border-radius: var(--radius-xl);
text-align: center;
}
.badge-preview {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-xl) var(--spacing-2xl);
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
border-radius: var(--radius-lg);
}
.badge-preview .logo-text {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--white);
letter-spacing: 0.5px;
}
.badge-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--white);
text-transform: uppercase;
letter-spacing: 1px;
padding: var(--spacing-xs) var(--spacing-md);
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
}
/* Calculator Responsive */
@media (max-width: 768px) {
.calculator-card {
grid-template-columns: 1fr;
padding: var(--spacing-xl);
}
.result-amount {
font-size: 2rem;
}
}
/* Instruments Table Styles */
.instruments-table-wrapper {
overflow-x: auto;
margin-top: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.instruments-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
font-size: 0.9375rem;
}
.instruments-table thead {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
color: var(--white);
}
.instruments-table thead th {
padding: var(--spacing-lg) var(--spacing-md);
text-align: left;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.instruments-table tbody tr {
border-bottom: 1px solid var(--gray-200);
transition: background-color 0.2s ease;
}
.instruments-table tbody tr:hover:not(.table-category) {
background: var(--gray-50);
}
.instruments-table tbody td {
padding: var(--spacing-md);
color: var(--gray-700);
}
.instruments-table .table-category {
background: var(--gray-100);
font-weight: 600;
}
.instruments-table .table-category td {
padding: var(--spacing-sm) var(--spacing-md);
color: var(--gray-900);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.instruments-table .instrument-name {
font-weight: 600;
color: var(--primary-magenta);
font-family: 'Courier New', monospace;
font-size: 0.9375rem;
}
.instruments-table tbody tr:last-child {
border-bottom: none;
}
/* Instruments Table Responsive */
@media (max-width: 768px) {
.instruments-table {
font-size: 0.875rem;
}
.instruments-table thead th,
.instruments-table tbody td {
padding: var(--spacing-sm);
}
.instruments-table thead th {
font-size: 0.75rem;
}
.instruments-table .instrument-name {
font-size: 0.875rem;
}
}
/* ===================================
Team Members Section
=================================== */
.team-members {
padding: var(--spacing-2xl) 0;
}
.team-grid {
display: grid;
gap: var(--spacing-3xl);
max-width: 1200px;
margin: 0 auto;
}
.team-member,
.wp-block-group.team-member,
.wp-block-columns.team-member {
display: grid !important;
grid-template-columns: 300px 1fr !important;
gap: var(--spacing-xl);
align-items: start;
padding: var(--spacing-xl);
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: none !important;
border: none !important;
/* constrain individual card width so they don't span full page */
max-width: 900px;
width: min(100%, 900px);
margin: 0 auto var(--spacing-3xl);
}
.team-member:hover,
.wp-block-group.team-member:hover,
.wp-block-columns.team-member:hover {
box-shadow: none !important;
transform: none !important;
background: transparent !important;
}
.team-member-image {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gray-100);
}
.team-member-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.team-member-content h3 {
font-size: 1.75rem;
font-weight: 700;
color: var(--dark-bg);
margin-bottom: var(--spacing-xs);
}
.team-role {
font-size: 1rem;
font-weight: 600;
color: var(--primary-magenta);
margin-bottom: var(--spacing-md);
display: block;
}
.team-member-content p {
color: var(--gray-600);
line-height: 1.7;
margin-bottom: var(--spacing-md);
}
.team-member-content .btn-secondary {
margin-top: var(--spacing-md);
}
/* Responsive Team Layout */
@media (max-width: 768px) {
.team-member,
.wp-block-group.team-member,
.wp-block-columns.team-member {
grid-template-columns: 1fr !important;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
}
.team-member-image {
max-width: 300px;
margin: 0 auto;
}
.team-member-content h3 {
font-size: 1.5rem;
}
}
/* ===================================
Override WordPress Gutenberg Button Styles
=================================== */
/* ===================================
Override WordPress Gutenberg Button Styles
=================================== */
/* Reset default WordPress button block styles */
.wp-block-button {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: inline-block !important;
}
.wp-block-button__link {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
text-decoration: none !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
transition: none !important;
cursor: pointer !important;
}
/* Ensure our theme button classes override Gutenberg defaults */
.wp-block-button .btn-primary,
.wp-block-button .btn-secondary,
.wp-block-button .btn-outline,
.wp-block-button .btn-login,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.btn-login .wp-block-button__link,
.wp-block-button__link.btn-primary,
.wp-block-button__link.btn-secondary,
.wp-block-button__link.btn-outline,
.wp-block-button__link.btn-login {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.75rem 1.5rem !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
border-radius: var(--radius-md) !important;
cursor: pointer !important;
transition: all var(--transition-base) !important;
border: none !important;
font-family: var(--font-body) !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Specific overrides for each button type */
.wp-block-button__link.btn-primary {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%) !important;
color: var(--white) !important;
box-shadow: 0 4px 12px rgba(246, 101, 132, 0.3) !important;
}
.wp-block-button__link.btn-primary:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(217, 37, 200, 0.4) !important;
}
.wp-block-button__link.btn-secondary {
background: transparent !important;
color: var(--primary-cyan) !important;
border: 2px solid var(--primary-cyan) !important;
}
.wp-block-button__link.btn-secondary:hover {
background: var(--primary-cyan) !important;
color: var(--white) !important;
}
/* TenTrade button styles via Gutenberg "Styles" panel */
.wp-block-button.is-style-tentrade-primary .wp-block-button__link,
.wp-block-button.is-style-tentrade-secondary .wp-block-button__link,
.wp-block-button.is-style-tentrade-outline .wp-block-button__link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.75rem 1.5rem !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
border-radius: var(--radius-md) !important;
cursor: pointer !important;
transition: all var(--transition-base) !important;
font-family: var(--font-body) !important;
text-decoration: none !important;
border: none !important;
}
.wp-block-button.is-style-tentrade-primary .wp-block-button__link {
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%) !important;
color: var(--white) !important;
box-shadow: 0 4px 12px rgba(246, 101, 132, 0.3) !important;
}
.wp-block-button.is-style-tentrade-primary .wp-block-button__link:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(217, 37, 200, 0.4) !important;
}
.wp-block-button.is-style-tentrade-secondary .wp-block-button__link {
background: transparent !important;
color: var(--primary-cyan) !important;
border: 2px solid var(--primary-cyan) !important;
}
.wp-block-button.is-style-tentrade-secondary .wp-block-button__link:hover {
background: var(--primary-cyan) !important;
color: var(--white) !important;
}
.wp-block-button.is-style-tentrade-outline .wp-block-button__link {
background: transparent !important;
color: var(--gray-700) !important;
border: 2px solid var(--gray-300) !important;
}
.wp-block-button.is-style-tentrade-outline .wp-block-button__link:hover {
border-color: var(--primary-magenta) !important;
color: var(--primary-magenta) !important;
}
/* CTA-specific button tweaks */
.cta .wp-block-button.is-style-tentrade-secondary .wp-block-button__link {
border-color: var(--white) !important;
color: var(--white) !important;
}
.cta .wp-block-button.is-style-tentrade-secondary .wp-block-button__link:hover {
background: var(--white) !important;
color: var(--primary-magenta) !important;
}
/* Remove any default WordPress button styling */
.wp-block-buttons {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
/* ===================================
Two-Column Content + Visual Layout
=================================== */
.two-col-visual {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--spacing-3xl);
}
@media (max-width: 900px) {
.two-col-visual {
grid-template-columns: 1fr;
}
.two-col-visual .col-visual {
justify-content: flex-start !important;
}
}
/* ===================================
Copy Trading Steps Layout
=================================== */
.copy-steps-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.copy-step-item {
position: relative;
}
.copy-step-content {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--spacing-lg);
align-items: start;
padding: var(--spacing-xl);
background: var(--white);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
}
.copy-step-content:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.copy-step-number {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(130deg, var(--primary-pink) 0%, var(--primary-magenta) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
flex-shrink: 0;
}
.copy-step-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: var(--spacing-sm);
}
.copy-step-text p {
color: var(--gray-600);
line-height: 1.7;
margin: 0;
}
/* Responsive Copy Steps */
@media (max-width: 768px) {
.copy-step-content {
grid-template-columns: 60px 1fr;
gap: var(--spacing-md);
padding: var(--spacing-lg);
}
.copy-step-number {
width: 60px;
height: 60px;
font-size: 2rem;
}
.copy-step-text h3 {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.copy-step-content {
grid-template-columns: 1fr;
text-align: center;
}
.copy-step-number {
margin: 0 auto var(--spacing-md);
}
}
.wp-block-buttons .wp-block-button {
margin: 0 !important;
}
/* ===================================
Careers Page Modal Styles
=================================== */
.career-position-card {
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--gray-300);
padding-bottom: var(--spacing-xs);
}
.career-position-meta .career-badge-location,
.career-position-meta .career-badge-time {
display: inline-flex;
align-items: center;
gap: 6px;
}
.career-position-meta .career-badge-location::before,
.career-position-meta .career-badge-time::before {
content: "";
width: 16px;
height: 16px;
display: inline-block;
background-color: currentColor;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-size: contain;
-webkit-mask-size: contain;
}
.career-position-meta .career-badge-location::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.career-position-meta .career-badge-time::before {
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.career-position-card .expand-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.career-position-card .expand-arrow::before {
content: "Apply Now";
font-size: 20px;
font-family: Questrial, sans-serif;
}
.career-position-card .expand-arrow::after {
content: "";
width: 26px;
height: 26px;
display: inline-block;
background-color: currentColor;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-size: contain;
-webkit-mask-size: contain;
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.career-position-card .expand-arrow svg,
.career-position-card .expand-arrow::marker {
display: none;
}
.career-position-card:hover {
}
.career-position-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.career-position-header h4 {
margin: 0;
font-size: 40px;
}
.career-position-card p {
margin: var(--spacing-md) 0px;
color: var(--gray-600);
font-family: Inter;
}
.career-position-meta {
display: flex;
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
font-size: 0.9rem;
color: var(--gray-600);
}
.career-badge {
display: inline-block;
background: var(--primary-100);
color: var(--primary-600);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.85rem;
}
.expand-arrow {
color: var(--primary-600);
transition: transform 0.3s ease;
}
.career-position-card.expanded .expand-arrow {
transform: rotate(180deg);
}
/* Modal Styles */
.career-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.career-modal.show {
display: flex;
opacity: 1;
visibility: visible;
}
.career-modal-content {
background-color: white;
padding: var(--spacing-xl);
border-radius: 8px;
width: 90%;
max-width: 700px;
max-height: 85vh;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
transform: translateY(20px);
transition: transform 0.3s ease;
}
.career-modal.show .career-modal-content {
transform: translateY(0);
}
.career-modal-close {
position: absolute;
right: var(--spacing-lg);
top: var(--spacing-lg);
font-size: 24px;
line-height: 1;
font-weight: bold;
color: var(--gray-500);
cursor: pointer;
background: none;
border: none;
padding: 5px;
transition: color 0.2s;
}
.career-modal-close:hover {
color: var(--primary-600);
}
.career-modal-header {
margin-bottom: var(--spacing-lg);
padding-right: var(--spacing-xl);
}
.career-modal-header h2 {
margin: 0 0 var(--spacing-sm) 0;
font-size: 1.75rem;
}
.career-modal-section {
margin-bottom: var(--spacing-lg);
}
.career-modal-section h3 {
color: var(--primary-600);
margin-bottom: var(--spacing-md);
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.career-modal-section ul {
list-style: disc;
padding-left: var(--spacing-lg);
color: var(--gray-700);
}
.career-modal-section li {
margin-bottom: var(--spacing-xs);
}
.career-modal-cta {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--gray-200);
text-align: center;
}
.career-modal-description {
color: var(--gray-700);
line-height: 1.6;
}
/* Funded comparison tabs - ensure WP formatting can't break layout */
.funded-tabs {
display: flex !important;
justify-content: center;
gap: 12px;
margin-bottom: 48px;
border-bottom: 2px solid var(--gray-200);
}
.funded-tab {
padding: 12px 20px;
background: none;
border: none;
cursor: pointer;
font-weight: 600;
color: var(--gray-600);
font-size: 16px;
border-bottom: 3px solid transparent;
transition: color 180ms var(--transition-fast), border-color 180ms var(--transition-fast);
}
.funded-tab.active {
color: var(--primary-pink);
border-bottom-color: var(--primary-pink);
}
.funded-table-container {
display: none;
overflow-x: auto;
}
.funded-table-container.active {
display: block;
margin-top: 60px;
}
/* defensive: remove WP-inserted breaks inside funded-tabs */
.funded-tabs br { display: none; }
.funded-tabs > .funded-tab { margin: 0 6px; }
.instrument-features {
padding: var(--spacing-3xl) 0;
}
.instrument-features .instrument-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-lg);
max-width: 1200px;
margin: 0 auto;
}
.instrument-features .instrument-grid .instrument-card {
border-radius: 10px;
border: 1px solid #E7E7E7;
background: linear-gradient(180deg, #E9E9E9 0%, #FFF 100%);
min-height: 123px;
padding: 24px;
box-sizing: border-box;
}
.instrument-features .instrument-grid .instrument-card .instrument-icon {
display: flex;
width: 64px;
height: 64px;
padding: 12px;
justify-content: center;
align-items: center;
border-radius: 12px;
opacity: 0.76;
background: #D925C8;
margin-left: auto;
float: right;
}
.instrument-features .instrument-grid .instrument-card .instrument-icon svg {
stroke: #ffffff;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.instrument-features .instrument-grid .instrument-card h3 {
font-size: 22.4px;
font-style: normal;
line-height: 1.2em;
background: linear-gradient(98deg, #1C08FF -10.8%, #0A3161 37.97%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.instrument-features .instrument-grid .instrument-card p {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5em;
color: #54595F;
font-family: Inter, sans-serif;
}
/* Layout */
.instrument-features .instrument-grid .instrument-card:nth-child(1) {
grid-column: span 7;
position: relative;
background: linear-gradient(180deg, #E9E9E9 0%, #FFF 100%);
z-index: 1;
}
.instrument-features .instrument-grid .instrument-card:nth-child(1)::before {
content: "";
background-image: url(/wp-content/uploads/2026/03/bg-instruments-card-1.png);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 1/1;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
}
.instrument-features .instrument-grid .instrument-card:nth-child(6)::before {
content: "";
background-image: url(/wp-content/uploads/2026/03/bg-instruments-card-6.png);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 1/1;
background-repeat: no-repeat;
pointer-events: none;
}
.instrument-features .instrument-grid .instrument-card:nth-child(2) {
grid-column: span 5;
}
.instrument-features .instrument-grid .instrument-card:nth-child(3) {
grid-column: span 4;
position: relative;
overflow: hidden;
}
.instrument-features .instrument-grid .instrument-card:nth-child(4) {
grid-column: span 8;
position: relative;
overflow: hidden;
}
.instrument-features .instrument-grid .instrument-card:nth-child(5) {
grid-column: span 6;
}
.instrument-features .instrument-grid .instrument-card:nth-child(6) {
grid-column: span 6;
position: relative;
}
.instrument-features .instrument-grid .instrument-card:nth-child(3)::before {
content: "";
position: absolute;
top: 10%;
left: 0;
width: 177px;
height: 177px;
aspect-ratio: 1/1;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='147' height='177' viewBox='0 0 147 177' fill='none'%3E%3Cpath d='M-18.043 41.4337C8.13411 67.1022 46.0984 56.1004 54.7443 41.4337C56.0157 39.2797 56.7487 36.7742 56.7487 34.1041C56.7487 26.0042 50.0548 19.4375 41.7904 19.4375C33.5259 19.4375 26.832 26.0042 26.832 34.1041M94.1445 63.774C94.1445 51.6802 102.521 41.875 112.842 41.875C123.164 41.875 131.54 51.6802 131.54 63.774C131.585 68.8097 130.056 73.7336 127.165 77.8573C111.691 103.137 36.3754 93.6009 -3.08464 85.673M64.8636 145.738C66.4043 150.592 70.5627 154.062 75.4466 154.062C81.6394 154.062 86.6654 148.476 86.6654 141.58C86.6654 139.239 86.082 137.04 85.0723 135.17C75.4466 116.607 26.832 104.132 -18.043 137.414' stroke='url(%23paint0_linear_111_4393)' stroke-opacity='0.27' stroke-width='10.385' stroke-linecap='round'/%3E%3Cpath d='M109.098 112.928H124.056' stroke='url(%23paint1_linear_111_4393)' stroke-opacity='0.27' stroke-width='10.385' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_111_4393' x1='56.7492' y1='19.4375' x2='56.7492' y2='154.062' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F66584'/%3E%3Cstop offset='1' stop-color='%23D925C8'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_111_4393' x1='116.577' y1='112.928' x2='116.577' y2='113.928' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F66584'/%3E%3Cstop offset='1' stop-color='%23D925C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
pointer-events: none;
}
.instrument-features .instrument-grid .instrument-card:nth-child(4)::before {
content: "";
position: absolute;
top: 0;
left: 40%;
width: 253px;
height: 196px;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='253' height='196' viewBox='0 0 253 196' fill='none'%3E%3Cpath opacity='0.13' d='M190.145 -46.5624C192.501 -46.4393 194.751 -45.531 196.55 -43.9763C198.349 -42.4217 199.599 -40.3063 200.108 -37.9541C200.617 -35.6018 200.357 -33.1421 199.369 -30.9515C198.38 -28.7609 196.717 -26.9599 194.634 -25.8243C155.235 -4.37213 152.622 45.9543 151.061 76.018C150.607 84.78 146.764 93.0063 140.379 98.8872C133.994 104.768 125.59 107.822 117.016 107.377C108.441 106.932 100.398 103.024 94.6565 96.5136C88.915 90.0032 85.9449 81.4233 86.3998 72.6613C86.5514 69.7407 87.8322 66.9986 89.9605 65.0383C92.0888 63.078 94.8901 62.0601 97.7484 62.2084C100.607 62.3568 103.288 63.6593 105.201 65.8295C107.115 67.9996 108.105 70.8596 107.954 73.7802C107.802 76.7009 108.792 79.5609 110.706 81.731C112.62 83.9011 115.301 85.2037 118.159 85.352C121.017 85.5004 123.819 84.4825 125.947 82.5222C128.075 80.5619 129.356 77.8198 129.508 74.8991C131.192 42.4457 134.329 -17.979 184.525 -45.2862C186.252 -46.2232 188.194 -46.6643 190.145 -46.5624ZM137.472 -64.9874C111.564 -40.9357 95.3494 -6.06749 89.2842 38.7464C89.0835 40.1837 89.1624 41.6466 89.5164 43.0514C89.8704 44.4561 90.4925 45.775 91.347 46.9324C92.2015 48.0898 93.2716 49.063 94.4959 49.7961C95.7203 50.5292 97.0748 51.0078 98.4817 51.2045C99.8882 51.4261 101.325 51.3561 102.705 50.9986C104.086 50.6412 105.383 50.0037 106.518 49.124C107.654 48.2443 108.605 47.1405 109.316 45.8783C110.026 44.616 110.48 43.2213 110.652 41.777C116.095 1.67881 129.604 -27.9082 151.956 -48.6221C154.078 -50.5897 155.351 -53.3365 155.494 -56.2582C155.636 -59.1799 154.637 -62.0373 152.716 -64.2016C150.795 -66.3659 148.109 -67.66 145.25 -67.7991C142.391 -67.9382 139.592 -66.911 137.469 -64.9434L137.472 -64.9874ZM81.3252 -65.8483C74.2119 -55.0885 68.1589 -43.6369 63.2551 -31.6616C62.2207 -28.9801 62.2533 -25.9938 63.346 -23.3414C64.4387 -20.689 66.5047 -18.581 69.1021 -17.4681C71.6996 -16.3553 74.6225 -16.326 77.2456 -17.3865C79.8687 -18.447 81.984 -20.513 83.1389 -23.1429C87.4948 -33.7608 92.865 -43.9158 99.1712 -53.4602C99.9699 -54.6593 100.53 -56.0068 100.82 -57.4259C101.109 -58.845 101.122 -60.3078 100.858 -61.7308C100.595 -63.1538 100.059 -64.5092 99.2822 -65.7196C98.5052 -66.9299 97.5023 -67.9716 96.3305 -68.785C93.9639 -70.4277 91.0535 -71.0412 88.2395 -70.4905C86.8461 -70.2178 85.5184 -69.6674 84.332 -68.8709C83.1456 -68.0744 82.1239 -67.0473 81.3252 -65.8483ZM52.2196 2.52581C47.0596 24.8071 44.0691 47.5505 43.292 70.4236C42.4923 86.0253 46.3442 101.497 54.3387 114.795C62.3332 128.092 74.094 138.589 88.0667 144.898C102.04 151.208 117.567 153.032 132.596 150.131C147.626 147.23 161.45 139.74 172.243 128.651C173.291 127.634 174.129 126.413 174.707 125.061C175.286 123.708 175.593 122.252 175.612 120.777C175.63 119.302 175.358 117.84 174.813 116.475C174.268 115.111 173.46 113.873 172.437 112.835C171.415 111.796 170.198 110.978 168.86 110.429C167.521 109.88 166.088 109.611 164.645 109.639C163.201 109.666 161.778 109.989 160.457 110.588C159.137 111.187 157.947 112.051 156.959 113.127C149.25 121.05 139.376 126.401 128.64 128.475C117.904 130.548 106.813 129.245 96.8315 124.739C86.8502 120.233 78.4488 112.735 72.7378 103.237C67.0267 93.7389 64.2749 82.6871 64.8459 71.5424C65.5613 50.083 68.3413 28.7428 73.1456 7.83017C73.8385 4.99344 73.4017 1.9942 71.9309 -0.508679C70.4602 -3.01155 68.0759 -4.81336 65.3018 -5.51827C64.6243 -5.69374 63.9312 -5.79999 63.2327 -5.83548C60.7362 -5.95845 58.2733 -5.19203 56.2647 -3.66708C54.2561 -2.14213 52.8264 0.0467637 52.2196 2.52581ZM172.615 77.1369C172.459 80.2107 172.051 83.2663 171.396 86.2716C170.998 87.7142 170.892 89.2237 171.084 90.7081C171.276 92.1925 171.763 93.6207 172.513 94.9055C173.264 96.1903 174.263 97.3048 175.45 98.181C176.637 99.0572 177.987 99.6768 179.417 100.002C180.848 100.327 182.328 100.351 183.769 100.072C185.21 99.7929 186.581 99.2171 187.798 98.3796C189.015 97.542 190.053 96.4603 190.849 95.2003C191.644 93.9404 192.18 92.5287 192.424 91.0513C193.356 86.8429 193.94 82.5626 194.169 78.2558C196.825 27.1034 212.677 1.92235 241.279 3.40712C244.137 3.5555 246.938 2.53758 249.067 0.577285C251.195 -1.38303 252.476 -4.12512 252.627 -7.04578C252.779 -9.96644 251.789 -12.8264 249.875 -14.9965C247.961 -17.1667 245.28 -18.4692 242.422 -18.6176C200.726 -20.7821 175.931 13.2653 172.615 77.1369ZM32.0678 -67.2348C12.088 -24.9223 1.21551 21.2569 0.184181 68.1858C-0.815152 86.4755 2.30276 104.747 9.29826 121.594C9.84987 122.928 10.6534 124.137 11.663 125.152C12.6727 126.168 13.8686 126.97 15.1825 127.512C16.4964 128.054 17.9026 128.327 19.3208 128.314C20.739 128.301 22.1415 128.002 23.448 127.436C24.7546 126.869 25.9397 126.046 26.9357 125.012C27.9318 123.978 28.7192 122.754 29.253 121.411C29.7869 120.067 30.0567 118.629 30.047 117.18C30.0374 115.731 29.7486 114.299 29.197 112.966C23.4821 99.1913 20.9306 84.2566 21.7381 69.3047C22.6503 25.5288 32.6938 -17.5652 51.1977 -57.099C51.8504 -58.3874 52.2483 -59.794 52.3687 -61.2385C52.4891 -62.6829 52.3296 -64.1368 51.8995 -65.517C51.4693 -66.8972 50.7768 -68.1765 49.8617 -69.2819C48.9465 -70.3873 47.8267 -71.297 46.5661 -71.959C45.2044 -72.6874 43.7033 -73.1044 42.1667 -73.1812C40.1053 -73.2792 38.0582 -72.7711 36.2683 -71.7171C34.4783 -70.6632 33.0206 -69.1076 32.0678 -67.2348ZM217.438 46.3376L215.723 79.3747C214.331 105.65 202.795 130.312 183.647 147.948C164.499 165.585 139.302 174.757 113.586 173.451C92.5843 172.432 72.5039 164.408 56.4191 150.608C54.2235 148.737 51.3884 147.835 48.5374 148.101C45.6865 148.367 43.0533 149.779 41.217 152.027C39.3808 154.274 38.492 157.173 38.7461 160.085C39.0002 162.998 40.3765 165.685 42.5721 167.556C62.2349 184.417 86.7755 194.224 112.442 195.476C143.873 197.069 174.668 185.859 198.07 164.303C221.473 142.748 235.573 112.607 237.277 80.4936L238.992 47.4565C239.144 44.5359 238.154 41.6759 236.24 39.5058C234.326 37.3356 231.645 36.0331 228.787 35.8847C225.929 35.7364 223.127 36.7543 220.999 38.7146C218.871 40.6749 217.59 43.417 217.438 46.3376Z' fill='url(%23paint0_linear_111_3344)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_111_3344' x1='117.756' y1='195.752' x2='131.477' y2='-68.5629' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F66584'/%3E%3Cstop offset='1' stop-color='%23D925C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
pointer-events: none;
}.
/* Responsive */
@media (max-width: 1024px) {
.instrument-features .instrument-grid {
grid-template-columns: repeat(6, 1fr);
}
.instrument-features .instrument-grid .instrument-card:nth-child(1),
.instrument-features .instrument-grid .instrument-card:nth-child(2),
.instrument-features .instrument-grid .instrument-card:nth-child(3),
.instrument-features .instrument-grid .instrument-card:nth-child(4),
.instrument-features .instrument-grid .instrument-card:nth-child(5),
.instrument-features .instrument-grid .instrument-card:nth-child(6) {
grid-column: span 6;
}
}
@media (max-width: 767px) {
.instrument-features .instrument-grid {
grid-template-columns: 1fr;
}
.instrument-features .instrument-grid .instrument-card:nth-child(1),
.instrument-features .instrument-grid .instrument-card:nth-child(2),
.instrument-features .instrument-grid .instrument-card:nth-child(3),
.instrument-features .instrument-grid .instrument-card:nth-child(4),
.instrument-features .instrument-grid .instrument-card:nth-child(5),
.instrument-features .instrument-grid .instrument-card:nth-child(6) {
grid-column: span 1;
}
}
/* Funded Benefits */
.funded-benefits {
background: #ffffff;
padding: 0px;
padding-bottom: 60px;
}
.funded-benefits .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
grid-template-areas:
"left image"
"button image";
column-gap: 80px;
row-gap: 40px;
align-items: start;
}
.funded-benefits .funded-left {
grid-area: left;
padding-top: 60px;
}
.funded-benefits .section-header {
margin-bottom: 40px;
}
.funded-benefits .section-header h2 {
margin: 0 0 10px;
font-size: 56px;
line-height: 1.05;
font-weight: 700;
color: #222;
text-align: left;
}
.funded-benefits .section-header p {
margin: 0;
font-size: 18px;
color: #666;
text-align: left;
}
.funded-benefits .funded-grid {
display: flex;
flex-direction: column;
gap: 34px;
position: relative;
}
.funded-benefits .funded-card {
display: grid;
grid-template-columns: 68px 1fr;
gap: 18px;
align-items: start;
position: relative;
}
.funded-benefits .funded-card:not(:last-child)::after {
content: "";
position: absolute;
left: 33px;
top: 74px;
width: 2px;
height: calc(100% + 28px);
background: repeating-linear-gradient(
to bottom,
#ff4fc4 0 6px,
transparent 6px 12px
);
}
.funded-benefits .funded-number {
width: 64px;
height: 64px;
padding: 2px;
border-radius: 14px;
background: linear-gradient(180deg, #f24db8 0%, #f7d9ea 100%);
box-sizing: border-box;
display: inline-flex;
}
.funded-benefits .funded-number span {
width: 100%;
height: 100%;
border-radius: 12px;
background: #ffffff; /* inner background */
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #222;
line-height: 1;
}
.funded-benefits .funded-content h3 {
margin: 0 0 8px;
font-size: 28px;
line-height: 1.2;
font-weight: 600;
color: #222;
}
.funded-content p {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: #666;
max-width: 520px;
}
.funded-benefits .funded-image-wrap {
grid-area: image;
position: relative;
min-height: 760px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.funded-benefits .funded-image-bg {
position: absolute;
top: 0;
right: 0;
width: 78%;
height: 100%;
background: #171717;
}
.funded-benefits .funded-image {
position: relative;
z-index: 2;
margin-top: 110px;
margin-left: 0;
max-width: 430px;
width: 100%;
border-radius: 14px;
overflow: hidden;
}
.funded-benefits .funded-image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.funded-benefits .funded-button-wrap {
grid-area: button;
display: flex;
justify-content: center;
margin-top: 50px;
}
@media (max-width: 991px) {
.funded-benefits .container {
grid-template-columns: 1fr;
grid-template-areas:
"left"
"image"
"button";
row-gap: 40px;
}
.funded-benefits .section-header h2 {
font-size: 40px;
}
.funded-benefits .funded-content h3 {
font-size: 22px;
}
.funded-benefits .funded-image-wrap {
min-height: auto;
}
.funded-benefits .funded-image-bg {
width: 100%;
height: 85%;
}
.funded-benefits .funded-image {
margin-top: 40px;
max-width: 360px;
}
.funded-benefits .funded-button-wrap {
justify-content: flex-start;
}
}
/* ===================================
Meet the Team Page (page-94)
=================================== */
/* ----- Hero ----- */
.teams-hero {
position: relative;
background: #100d0d;
height: 586px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.teams-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.teams-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 10%;
display: block;
z-index: 1;
}
.teams-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(41, 13, 200, 0.18) 0%, rgba(41, 13, 200, 0.18) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 100%);
}
/* Floating circle avatars */
.teams-hero-avatars {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.thav {
position: absolute;
border-radius: 50%;
overflow: hidden;
opacity: 0.22;
filter: blur(1px) opacity(0.5);
}
.thav img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.thav--1 { width: 105px; height: 105px; top: 10%; left: 4%; }
.thav--2 { width: 137px; height: 137px; top: 55%; left: 9%; }
.thav--3 { width: 105px; height: 105px; top: 15%; left: 82%; }
.thav--4 { width: 137px; height: 137px; top: 52%; left: 88%; }
.thav--5 { width: 105px; height: 105px; top: 5%; left: 55%; }
.thav--6 { width: 105px; height: 105px; top: 70%; left: 48%; }
/* Hero content */
.teams-hero-content {
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
max-width: 684px;
padding: 0 20px;
}
.teams-hero-badge {
display: inline-block;
border: 1.44px dashed #d925c8;
border-radius: 75px;
padding: 14px 28px;
color: #fff;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
}
.teams-hero-title {
font-size: clamp(36px, 4.2vw, 60px);
font-weight: 600;
color: #fff;
line-height: 1.2;
margin: 0;
}
.teams-hero-subtitle {
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
color: #fff;
line-height: 1.7;
margin: 0;
}
/* ----- Team Cards Section ----- */
.teams-section {
background: #fefefe;
padding: 82px 80px 125px;
overflow: hidden;
}
.teams-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
}
.team-row {
display: flex;
gap: 60px;
align-items: flex-start;
}
/* Each card wraps both the overflowing photo + the dark card */
.team-card-wrap {
position: relative;
width: 548px;
/* total height = photo-overflow (220px) + card (606px) */
padding-top: 220px;
flex-shrink: 0;
}
.team-card {
position: relative;
background: #131313;
border-radius: 20px;
height: 606px;
width: 100%;
overflow: visible;
}
.team-card-photo {
position: absolute;
/* Sits at the TOP of the card-wrap, i.e. 220px above the card edge */
top: 0;
left: 50%;
transform: translateX(-50%);
width: 463px;
height: 441px;
border-radius: 20px;
overflow: hidden;
z-index: 2;
}
.team-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.team-card-body {
position: absolute;
top: 284px;
left: 50%;
transform: translateX(-50%);
width: 472px;
display: flex;
flex-direction: column;
gap: 11px;
}
.team-card-name {
font-size: 30px;
font-weight: 500;
color: #fff;
line-height: 1.36;
margin: 0;
}
.team-card-role {
font-size: 18px;
font-weight: 500;
background: linear-gradient(180deg, #f66584 0%, #d925c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.5;
margin: 0;
}
.team-card-bio {
font-size: 16px;
font-weight: 400;
color: rgba(253, 253, 253, 0.75);
line-height: 1.3;
margin: 0;
}
/* ----- "Develop Your Trading Skills" CTA ----- */
.teams-cta {
position: relative;
display: flex;
/* align-items: center; */
gap: 96px;
height: 593px;
padding: 103px 131px 100px 171px;
overflow: hidden;
justify-content: center;
}
.teams-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(124deg, rgb(32, 36, 98) 0%, rgb(37, 38, 40) 100%);
}
/* Subtle grid texture overlay */
.teams-cta::after {
content: '';
position: absolute;
inset: 0;
opacity: 0.06;
background-image:
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
background-size: 80px 80px;
}
.teams-cta-image {
position: relative;
z-index: 1;
width: 647px;
height: 432px;
flex-shrink: 0;
}
.teams-cta-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
}
.teams-cta-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 35px;
max-width: 589px;
}
.teams-cta-text {
display: flex;
flex-direction: column;
color: var(--gray-100);
gap: 24px;
}
.teams-cta-content h2 {
font-size: clamp(36px, 4.2vw, 60px);
font-weight: 500;
color: #fff;
line-height: 1.3;
margin: 0;
}
.teams-cta-content p {
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
color: rgba(255, 255, 255, 0.85);
line-height: 1.44;
margin: 0;
}
/* ----- Responsive: Teams Page ----- */
@media (max-width: 1200px) {
.teams-section {
padding: 280px 40px 80px;
}
.teams-grid {
gap: 80px;
}
.team-row {
gap: 40px;
}
.team-card-wrap {
width: 460px;
}
.team-card {
height: 640px;
}
.team-card-photo {
width: 380px;
height: 360px;
}
.team-card-body {
width: 390px;
top: 250px;
}
.teams-cta {
gap: 60px;
padding: 60px 80px;
}
.teams-cta-image {
width: 480px;
height: 320px;
}
}
@media (max-width: 1024px) {
.teams-section {
padding: 240px 30px 60px;
}
.teams-grid {
gap: 60px;
}
.team-card-wrap {
width: 380px;
padding-top: 180px;
}
.team-card {
height: 640px;
}
.team-card-photo {
width: 320px;
height: 300px;
top: 0;
}
.team-card-body {
width: 340px;
top: 220px;
}
.team-card-name {
font-size: 24px;
}
.team-card-role {
font-size: 15px;
}
.team-card-bio {
font-size: 14px;
}
.teams-cta {
flex-direction: column;
height: auto;
padding: 60px 40px;
gap: 40px;
}
.teams-cta-image {
width: 100%;
max-width: 500px;
height: 300px;
}
.teams-cta-content {
max-width: 100%;
}
}
@media (max-width: 768px) {
/* Hero */
.teams-hero {
height: auto;
padding: 120px 20px 60px;
}
.thav { display: none; }
.teams-hero-title {
font-size: 36px;
}
.teams-hero-subtitle {
font-size: 16px;
}
/* Cards: stack to 1 column */
.teams-section {
padding: 80px 20px 60px;
}
.teams-grid {
gap: 40px;
}
.team-row {
flex-direction: column;
width: 100%;
align-items: center;
}
.team-card-wrap {
width: 100%;
max-width: 420px;
padding-top: 180px;
}
.team-card {
height: auto;
padding-bottom: 10px;
}
.team-card-photo {
width: 85%;
height: 280px;
left: 50%;
transform: translateX(-50%);
top: -50px;
}
.team-card-body {
width: 88%;
top: 240px;
left: 50%;
transform: translateX(-50%);
position: relative;
top: auto;
left: auto;
transform: none;
padding: 20px;
margin-top: 30px;
}
/* CTA */
.teams-cta {
padding: 50px 20px;
gap: 30px;
}
.teams-cta-image {
max-width: 100%;
height: 220px;
}
.teams-cta-content h2 {
font-size: 32px;
}
}
.page-id-171 .page-hero {
background-position: center bottom !important;
}
.page-id-171 .page-hero-content {
grid-template-columns: 1fr !important;
}
.page-id-171 .page-hero-image {
display: none !important;
}
.page-id-171 .page-hero-text {
justify-items: center;
text-align: center;
}
.metatrader-5 {
padding: var(--spacing-3xl) 0 var(--spacing-3xl);
}
.page-id-175 .page-hero-image img {
object-fit: contain;
}
/* START OF WHO WE ARE PAGE SPECIFIC STYLES */
.who-we-are-grid {
display: grid;
grid-template-columns: 1fr; /* Stacks on mobile */
gap: 2rem;
}
.mission-box {
background: #131313;
padding: 3rem 2rem;
position: relative;
z-index: 2;
}
.mission-gradient-text {
background: linear-gradient(180deg, #f66584 0%, #d925c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 3rem;
line-height: 1.2;
margin-bottom: var(--spacing-md);
font-weight: 500;
}
/* Desktop layout */
@media (min-width: 992px) {
.who-we-are-grid {
grid-template-columns: repeat(12, 1fr); /* 12 column grid */
align-items: center; /* Vertically centers the text box over the image */
gap: 0;
}
.who-we-are-image {
/* Image spans columns 1 through 9 (takes up ~75% of the width) */
grid-column: 1 / 10;
grid-row: 1;
margin-left: -5%; /* Optional: Lets it bleed slightly left out of bounds like the Figma design */
}
.mission-box {
/* Box spans columns 8 through 12, creating the overlap on columns 8 & 9 */
grid-column: 8 / 13;
grid-row: 1;
padding: 6rem 4rem;
}
.who-we-are-image img {
width: 100%;
height: auto;
max-width: none;
display: block;
}
}
.values-images-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 4rem;
}
.values-images-grid img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.values-metrics-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
.value-number {
font-size: 3rem;
color: #ffffff;
font-weight: 500;
line-height: 1;
margin-bottom: 0.5rem;
}
.value-title {
background: linear-gradient(180deg, #f66584 0%, #d925c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
/* Desktop definitions */
@media (min-width: 992px) {
.values-images-grid {
/* Emulates exactly the asymmetrical sizing from Figma (approx 2fr/5fr/3fr) */
grid-template-columns: 2fr 4.5fr 2.5fr;
}
.values-images-grid img {
height: 400px; /* Aligns with the design vertical proportions */
}
.values-metrics-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
}
.regulated-features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
.regulated-card {
background-color: #f5f5f5;
border-radius: var(--radius-lg, 12px);
padding: 3rem; /* 48px from design */
display: flex;
flex-direction: column;
gap: 1rem;
}
.regulated-card-title {
background: linear-gradient(113deg, #f66584 0%, #d925c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 1.25rem; /* 20px */
font-weight: 600;
margin: 0;
line-height: 1.5;
}
.regulated-card-text {
color: var(--colortext-light, #54595f);
font-size: 1rem;
line-height: 1.7; /* 27.2px from design */
margin: 0;
}
/* Desktop grid layout */
@media (min-width: 992px) {
.regulated-features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* END OF WHO WE ARE PAGE SPECIFIC STYLES */
/* START OF SAFTEY OF FUNDS PAGE SPECIFIC STYLES */
.protection-features-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl, 32px);
}
.protection-card {
background-color: #ffffff;
border-radius: var(--radius-lg, 12px);
padding: 3rem 3rem 4rem 3rem;
display: flex;
flex-direction: column;
gap: 1rem;
/* Added a subtle shadow since the card is white against a white background */
box-shadow: 0 4px 24px rgba(0,0,0,0.04);
height: 100%;
}
.protection-card-title {
background: linear-gradient(110deg, #f66584 0%, #d925c8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size: 1.4rem; /* ~22.4px */
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.protection-card-text {
color: var(--colortext-light, #54595f);
font-size: 1rem;
line-height: 1.7; /* ~27.2px */
margin: 0;
}
/* Desktop grid layout */
@media (min-width: 992px) {
.protection-features-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.page-id-85 .page-hero {
background-position: center bottom !important;
}
.page-id-85 .page-hero-content {
grid-template-columns: 1fr !important;
}
.page-id-85 .page-hero-image {
display: none !important;
}
.page-id-85 .page-hero-text {
justify-items: center;
text-align: center;
}
/* END OF SAFTEY OF FUNDS PAGE SPECIFIC STYLES */
/* START OF FAQ PAGE SPECIFIC STYLES
background: linear-gradient(135deg, #f66584, #d925c8);
*/
.tentrade-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.faq-section {
padding: var(--spacing-3xl) 0;
background: var(--white);
}
.faq-header {
max-width: 900px;
margin: 0 auto var(--spacing-2xl);
text-align: center;
}
.faq-header h1 {
font-family: var(--font-heading);
color: var(--gray-900);
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.2;
margin-bottom: 0.75rem;
}
.faq-header p {
font-size: 1.05rem;
}
.faq-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: var(--spacing-2xl);
}
.faq-tab-btn {
background: transparent;
border: 1px solid var(--primary-pink);
color: var(--gray-600);
padding: 10px 20px;
border-radius: 10px;
font-size: 1.125rem;
font-family: var(--font-body);
cursor: pointer;
transition: all var(--transition-base);
min-width: 180px;
text-align: center;
}
.faq-tab-btn:hover {
background: rgba(246, 101, 132, 0.05);
}
.faq-tab-btn.active {
background: linear-gradient(180deg, #f66584 0%, #d925c8 100%);
background: linear-gradient(135deg, #f66584, #d925c8);
color: #fff;
border-color: transparent;
font-weight: 600;
}
.faq-tab-pane {
display: none;
max-width: 927px;
margin: 0 auto;
animation: fadeIn 0.3s ease-in-out;
}
.faq-tab-pane.active {
display: block;
}
.faq-pane-title {
text-align: center;
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: #252628;
font-family: var(--font-heading);
font-weight: 600;
margin-bottom: var(--spacing-xl);
}
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
background: var(--white);
overflow: hidden;
transition: all var(--transition-base);
border-bottom: 1px solid var(--gray-100);
margin-bottom: 6px;
padding-bottom: 12px;
}
.faq-item summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.0625rem;
color: var(--gray-900);
padding: var(--spacing-md) 0;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
color: var(--primary-magenta);
font-size: 1.5rem;
font-weight: 300;
transition: transform var(--transition-base);
margin-left: 12px;
flex: 0 0 auto;
}
.faq-item[open] summary {
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-answer {
color: var(--gray-600);
}
.faq-answer p + p {
margin-top: 0.65rem;
}
.faq-answer ol {
margin: 0.6rem 0 0 1.2rem;
}
.faq-answer a {
color: var(--primary-magenta);
text-decoration: none;
}
.faq-answer a:hover {
text-decoration: underline;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.faq-section {
padding: var(--spacing-2xl) 0;
}
.tentrade-container {
padding: 0 var(--spacing-md);
}
.faq-tab-btn {
min-width: auto;
width: 100%;
font-size: 1rem;
}
.faq-item summary {
padding: var(--spacing-md);
font-size: 1rem;
}
.faq-answer {
padding: 0 var(--spacing-md) var(--spacing-md);
font-size: 0.95rem;
}
}
/* END OF FAQ PAGE SPECIFIC STYLES */
/* ---------------------------------------------------------
Contact & Social Section Styles
--------------------------------------------------------- */
.contact-social-section {
padding: 80px 0;
background: #fff;
font-family: inherit;
}
.contact-social-section .tentrade-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* ── Contact Layout ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 80px;
}
.contact-heading {
font-size: clamp(32px, 4vw, 50px);
font-weight: 700;
color: #252628;
line-height: 1.1;
margin: 0 0 30px;
}
/* ── Form Card ── */
.contact-form-card {
background: #fff;
border: 1.5px solid #f66584;
border-radius: 19px;
padding: 40px 30px;
z-index: 100;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.contact-social-section .contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-social-section .contact-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-social-section .contact-form .form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-social-section .contact-form .form-group.full-width {
grid-column: 1 / -1;
}
.contact-social-section .contact-form .form-group label {
font-size: 18px;
font-weight: 600;
color: #252628;
}
.contact-social-section .contact-form .form-group input,
.contact-social-section .contact-form .form-group textarea {
background: #ededed;
border: none;
border-radius: 14px;
padding: 16px 20px;
font-size: 16px;
color: #252628;
font-family: inherit;
outline: none;
transition: background-color 0.2s;
-webkit-appearance: none;
}
.contact-social-section .contact-form .form-group input::placeholder,
.contact-social-section .contact-form .form-group textarea::placeholder {
color: rgba(84, 89, 95, 0.6);
}
.contact-social-section .contact-form .form-group input:focus,
.contact-social-section .contact-form .form-group textarea:focus {
background: #e4e4e4;
}
.contact-social-section .contact-form .form-group textarea {
resize: vertical;
min-height: 140px;
}
.contact-social-section .contact-form .form-submit-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
background: linear-gradient(123deg, #f66584 0%, #d925c8 100%);
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(246, 101, 132, 0.25);
transition: opacity 0.2s;
}
.contact-social-section .contact-form .form-submit-btn:hover {
opacity: 0.9;
}
/* ── Image Area ── */
.contact-image-wrapper {
border-radius: 0px;
overflow: hidden;
height: 100%;
min-height: 500px;
width: 70vw;
left: -30vw;
position: relative;
}
.contact-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Social Media Strip ── */
.contact-social-section .social-strip-wrapper {
border-top: 1px solid #eaeaea;
padding-top: 60px;
text-align: center;
}
.contact-social-section .social-strip-heading {
font-size: 20px;
font-weight: 700;
color: #252628;
margin: 0 0 5px;
}
.contact-social-section .social-strip-subheading {
font-size: 16px;
color: var(--colortext-light, #54595f);
margin: 0 0 40px;
}
.contact-social-section .social-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.contact-social-section .social-item {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
}
.contact-social-section .social-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
}
.contact-social-section .social-icon svg {
width: 100%;
height: 100%;
display: block;
}
.contact-social-section .contact-form .social-item p {
font-size: 12px;
line-height: 1.5;
color: var(--colortext-light, #54595f);
margin: 0;
}
/* ── Responsiveness ── */
@media (max-width: 1024px) {
.contact-social-section .social-grid {
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;
}
}
@media (max-width: 900px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-image-wrapper {
min-height: 350px;
order: -1; /* Puts image above form on mobile */
}
}
@media (max-width: 600px) {
.contact-social-section .form-row {
grid-template-columns: 1fr;
}
.contact-social-section .social-grid {
grid-template-columns: repeat(2, 1fr);
row-gap: 30px;
}
}
/* END CONTACT US */
/* WEBINARS SECTION STYLES */
.tentrade-webinars-section {
--tt-w-bg-main: #131313;
--tt-w-bg-card: #1c1d1f;
--tt-w-text-light: #ffffff;
--tt-w-text-muted: #a0a0a0;
--tt-w-border: rgba(255, 255, 255, 0.08);
--tt-w-border-hv: rgba(246, 101, 132, 0.4);
--tt-w-grad-btn: linear-gradient(135deg, #f66584, #d925c8);
background-color: var(--tt-w-bg-main);
color: var(--tt-w-text-light);
padding: 10px 20px;
font-family: inherit;
box-sizing: border-box;
}
.tentrade-webinars-section *,
.tentrade-webinars-section *::before,
.tentrade-webinars-section *::after {
box-sizing: border-box;
}
.tentrade-webinars-container {
max-width: 1200px;
margin: var(--spacing-3xl) auto;
}
.webinars-header {
text-align: center;
margin-bottom: 48px;
}
.webinars-title {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
margin: 0 0 16px 0;
background: var(--tt-w-grad-btn);
-webkit-background-clip: text;
display: inline-block;
}
.webinars-subtitle {
color: var(--tt-w-text-muted);
font-size: 18px;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.webinars-filter-bar {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.webinar-filter-btn {
background: transparent;
border: 1px solid var(--tt-w-border);
color: var(--tt-w-text-muted);
padding: 10px 24px;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
}
.webinar-filter-btn:hover {
border-color: var(--tt-w-border-hv);
color: var(--tt-w-text-light);
}
.webinar-filter-btn.active {
background: var(--tt-w-grad-btn);
border-color: transparent;
color: #fff;
}
.webinars-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}
.webinar-card {
background-color: var(--tt-w-bg-card);
border: 1px solid var(--tt-w-border);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
}
.webinar-card:hover {
transform: translateY(-4px);
border-color: var(--tt-w-border-hv);
}
.webinar-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--tt-w-border);
}
.webinar-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--tt-w-text-muted);
font-weight: 500;
}
.webinar-status svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.webinar-lang-badge {
background: rgba(255,255,255,0.05);
border: 1px solid var(--tt-w-border);
color: var(--tt-w-text-muted);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
flex-shrink: 0;
}
.webinar-card-body {
flex-grow: 1;
}
.webinar-card-title {
font-size: 20px;
font-weight: 600;
margin: 0 0 20px 0;
line-height: 1.4;
color: var(--tt-w-text-light);
}
.webinar-speaker {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.speaker-avatar {
background: rgba(255,255,255,0.03);
border-radius: 50%;
width: 48px;
height: 48px;
overflow: hidden;
display: flex;
border: 1px solid var(--tt-w-border);
flex-shrink: 0;
}
.speaker-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.speaker-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.speaker-name {
font-size: 15px;
font-weight: 600;
color: var(--tt-w-text-light);
margin-bottom: 2px;
}
.speaker-role {
font-size: 13px;
color: var(--tt-w-text-muted);
}
.webinar-card-desc {
font-size: 15px;
color: var(--tt-w-text-muted);
line-height: 1.6;
margin: 0 0 24px 0;
min-height: 6em;
}
.webinar-card-footer {
margin-top: auto;
}
.webinar-btn-cta {
display: block;
text-align: center;
background: transparent;
border: 1px solid #f66584;
color: #f66584;
padding: 12px 24px;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.webinar-card:hover .webinar-btn-cta {
background: var(--tt-w-grad-btn);
border-color: transparent;
color: #fff;
}
[dir="rtl"].webinar-card-title, [dir="rtl"].webinar-card-desc {
text-align: right;
}
.webinar-card.w-hidden {
display: none !important;
}
/* COUNTDOWN STYLES */
.webinar-countdown {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 24px;
background: rgba(0, 0, 0, 0.2);
padding: 12px;
border-radius: 8px;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.countdown-value {
font-size: 18px;
font-weight: 700;
color: var(--tt-w-text-light);
}
.countdown-label {
font-size: 11px;
color: var(--tt-w-text-muted);
text-transform: uppercase;
margin-top: 4px;
}
.webinar-countdown.started .countdown-value {
color: #f66584;
font-size: 14px;
}
/* WEBINARS LIGHT THEME OVERRIDES */
.tentrade-webinars-section.tentrade-light-theme {
--tt-w-bg-main: #f9f9f9;
--tt-w-bg-card: #ffffff;
--tt-w-text-light: #1c1d1f;
--tt-w-text-muted: #555555;
--tt-w-border: rgba(0, 0, 0, 0.1);
--tt-w-border-hv: rgba(246, 101, 132, 0.4);
}
.tentrade-webinars-section.tentrade-light-theme .webinar-countdown {
background: rgba(0, 0, 0, 0.05);
}
/* INSTRUCTORS SECTION STYLES */
.tentrade-instructors-section {
padding: 60px 20px;
background-color: var(--tt-w-bg-main, #f9f9f9);
font-family: inherit;
}
.instructor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.instructor-card {
background: var(--tt-w-bg-card, #ffffff);
border: 1px solid var(--tt-w-border, rgba(0,0,0,0.1));
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: transform 0.3s ease;
}
.instructor-card:hover {
transform: translateY(-5px);
}
.instructor-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 20px;
overflow: hidden;
border: 3px solid #f66584;
}
.instructor-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.instructor-name {
font-size: 22px;
font-weight: 700;
color: var(--tt-w-text-light, #1c1d1f);
margin: 0 0 5px 0;
}
.instructor-role {
font-size: 15px;
color: #f66584;
margin-bottom: 15px;
font-weight: 600;
}
.instructor-bio {
font-size: 15px;
color: var(--tt-w-text-muted, #555);
margin-bottom: 25px;
line-height: 1.6;
}
.instructor-link {
display: inline-block;
color: #f66584;
text-decoration: none;
font-weight: 600;
border: 1px solid #f66584;
padding: 10px 24px;
border-radius: 6px;
transition: all 0.3s;
}
.instructor-link:hover {
background: #f66584;
color: #fff;
}
/* ========================================================
VIP Calculator Section (Dark)
======================================================== */
.partner-section-dark {
background-color: var(--dark-bg);
color: #ffffff;
padding: 4rem 0;
font-family: inherit;
}
.vip-calc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 900px) {
.vip-calc-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.vip-content h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.vip-content p {
color: #d1d5db;
line-height: 1.6;
font-size: 1.05rem;
margin-bottom: 1.25rem;
}
.calc-box {
padding: 2.5rem;
}
/**/
.calc-box h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #f3f4f6;
}
.calc-row {
margin-bottom: 1.5rem;
}
.calc-row-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.calc-label {
font-size: 0.95rem;
font-weight: 500;
color: #d1d5db;
}
.calc-dynamic-value {
font-size: 1.05rem;
color: #fff;
}
.calc-dynamic-value span {
font-weight: 700;
color: rgb(246, 101, 132);
}
.calc-slider-wrapper {
width: 100%;
}
.calc-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
border-radius: 4px;
outline: none;
cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
border: 2px solid rgb(217, 37, 200);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.calc-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
border: 2px solid rgb(217, 37, 200);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.calc-result {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #374151;
}
.res-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #9ca3af;
font-weight: 600;
}
.big-total {
font-size: 2.75rem;
font-weight: 800;
color: #ffffff;
margin: 0.5rem 0 1.5rem 0;
line-height: 1.1;
}
.big-total span {
background: linear-gradient(to right, rgb(246, 101, 132) 0%, rgb(217, 37, 200) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.partner-btn {
background: linear-gradient(to right, rgb(246, 101, 132) 0%, rgb(217, 37, 200) 100%);
color: #fff;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
border: none;
}
.partner-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
color: #fff !important;
}
.hero-video {
position: relative;
overflow: hidden;
margin-top: 95px;
height: 800px;
}
.hero-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
filter: grayscale(1);
transform: scaleX(-1);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*
background: rgba(0, 0, 0, 0.35);
background: linear-gradient(130deg, rgba(200,110,140,0.6) 0%, rgba(240,110,190,0.1) 100%);
*/
z-index: 2;
}
/* Make sure text stays readable */
.hero-text {
position: relative;
z-index: 2;
}
/* Optional: Reduce overlay on mobile */
@media (max-width: 768px) {
.hero-overlay {
background: rgba(0, 0, 0, 0.5);
}
}
.forex-guide-page { background: #fff; padding: 56px 0 100px; }
.forex-guide-layout { display: grid; grid-template-columns: minmax(0,876px) 320px; gap: 32px; align-items: start; }
.forex-guide-main { border-bottom: 1px solid #b4b4b4; padding-bottom: 24px; }
.forex-guide-main .tentrade-prose h2.wp-block-heading { font-family: 'Questrial', var(--font-heading); font-size: clamp(1.9rem, 3.3vw, 2.5rem); line-height: 1.44; color: #252628; margin-top: 42px; }
.forex-guide-main .tentrade-prose h2.wp-block-heading:first-child { margin-top: 0; }
.forex-guide-main .tentrade-prose h3.wp-block-heading { margin-top: 24px; color: #252628; }
.forex-guide-main .tentrade-prose p,
.forex-guide-main .tentrade-prose li { font-size: 16px; line-height: 1.8; color: #54595f; }
.forex-guide-figure { margin: 28px 0 26px; border-radius: 10px; overflow: hidden; }
.forex-guide-figure img { width: 100%; height: auto; display: block; }
.forex-guide-toc { position: sticky; top: 120px; align-self: start; }
.forex-guide-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0px; font-size: 14px;}
.forex-guide-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: #54595f; font-weight: 500; line-height: 1.6; text-decoration: none; }
.forex-guide-toc a:hover { background: #f3f3f3; color: #252628; }
@media (max-width: 1200px) {
.forex-guide-layout { grid-template-columns: 1fr; }
.forex-guide-toc { position: static; border: 1px solid #e5e5e5; border-radius: 12px; padding: 12px; }
}
.section-submenu {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 40px;
margin-top: 64px;
}
.section-submenu-group {
min-width: 0;
}
.section-submenu-title {
margin: 0 0 14px;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: #1f1f1f;
}
.section-submenu-list {
list-style: none;
margin: 0;
padding: 0;
}
.section-submenu-item {
margin: 0 0 8px;
}
.section-submenu-link {
color: var(--primary-magenta);
}
.section-submenu-link:hover {
opacity: 0.85;
}
@media (max-width: 1024px) {
.section-submenu {
grid-template-columns: 1fr;
gap: 24px;
}
}
.translatepress-ar .feature-card {
padding-right: 120px;
}
.translatepress-ar .spec-card {
padding-right: 120px;
}
.translatepress-ar .hero-name {
line-height: 1em;
font-size: clamp(28px, 9vw, 250px);
}
.translatepress-ar .hero-name span {
color: #ffffff !important;
}
@media (hover: none), (pointer: coarse) {
.nav-item.has-dropdown > .dropdown-menu,
.nav-item.has-dropdown:hover > .dropdown-menu {
display: none;
}
.nav-item.has-dropdown:hover > .nav-link {
color: inherit;
}
.nav-item.has-dropdown:hover > .nav-link svg {
transform: none;
}
.nav-item.has-dropdown.is-open > .dropdown-menu,
.nav-item.has-dropdown.is-open:hover > .dropdown-menu {
display: block !important;
}
.nav-item.has-dropdown.is-open > .nav-link,
.nav-item.has-dropdown.is-open:hover > .nav-link {
color: #D925C8 !important;
}
.nav-item.has-dropdown.is-open > .nav-link svg,
.nav-item.has-dropdown.is-open:hover > .nav-link svg {
transform: rotate(180deg) !important;
}
}