html *{ font-family:"Montserrat-Medium"; } @charset utf-8; /* Theme Name: STAR */ @font-face { font-family: 'Montserrat-Bold'; src: url(/hc/theming_assets/01JSGVNZ5ZK07J49WFEEJD0MZ3); src: url(/hc/theming_assets/01JSGVNZ5ZK07J49WFEEJD0MZ3?#iefix') format('embedded-opentype'), url('/hc/theming_assets/01JSGW0N7S19YZWNR7QZX6RC8S') format('woff2'), url('/hc/theming_assets/01JSGW0FWGQ7KJ2S35CSGJP3BD') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Bold.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Bold.svg#Montserrat-Bold') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-Black'; src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.eot'); src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.eot?#iefix') format('embedded-opentype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.woff2') format('woff2'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.woff') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Black.svg#Montserrat-Black') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-Light'; src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.eot'); src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.eot?#iefix') format('embedded-opentype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.woff2') format('woff2'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.woff') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Light.svg#Montserrat-Light') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-SemiBold'; src: url('/hc/theming_assets/01JSGVNWCS73GMKMEXDQF3GD9A'); src: url('/hc/theming_assets/01JSGVNWCS73GMKMEXDQF3GD9A?#iefix') format('embedded-opentype'), url('/hc/theming_assets/01JSGW0JX9BPF899WQXZGCV9AQ') format('woff2'), url('/hc/theming_assets/01JSGW0E7Y8AASY6316K3Z43E0') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-SemiBold.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-Medium'; src: url('/hc/theming_assets/01JSGVNV9SJT12K9QR6GFYNR38'); src: url('/hc/theming_assets/01JSGVNV9SJT12K9QR6GFYNR38?#iefix') format('embedded-opentype'), url('/hc/theming_assets/01JSGW0J408DTNCHFNRTHM3XM3') format('woff2'), url('/hc/theming_assets/01JSGW0BGA2P4548JDZAER468R') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Medium.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Medium.svg#Montserrat-Medium') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-Thin'; src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.eot'); src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.eot?#iefix') format('embedded-opentype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.woff2') format('woff2'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.woff') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Thin.svg#Montserrat-Thin') format('svg'); font-display: swap; } @font-face { font-family: 'Montserrat-Regular'; src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.eot'); src: url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.woff2') format('woff2'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.woff') format('woff'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.ttf') format('truetype'), url('https://wwwstartrstg.wpenginepowered.com/wp-content/themes/startrader/font/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); font-display: swap; } :root { /* colors */ --v-white: #FFFFFF; --v-green-blue: #0DE3D6; --v-dark-gray-blue: #353C5D; --v-dark-blue: #0E1236; --v-slate-gray: #494851; --v-silver-tone: #D9D9D9; --v-mystic-navy: #0D1236; --v-lunar-mist: #FAFBFF; --v-neve-faye: #F1F2F4; --v-sky-lite: #F4F9FF; --v-turbo-cyan: #63FFF6; /* Public font size */ --fs-130: 130px; --fs-100: 100px; --fs-90: 90px; --fs-85: 85px; --fs-80: 80px; --fs-72: 72px; --fs-70: 70px; --fs-60: 60px; --fs-56: 56px; --fs-55: 55px; --fs-52: 52px; --fs-50: 50px; --fs-48: 48px; --fs-42: 42px; --fs-40: 40px; --fs-36: 36px; --fs-32: 32px; --fs-30: 30px; --fs-29: 29px; --fs-28: 28px; --fs-26: 26px; --fs-25: 25px; --fs-24: 24px; --fs-23: 23px; --fs-22: 22px; --fs-21: 21px; --fs-20: 20px; --fs-18: 18px; --fs-17: 17px; --fs-16: 16px; --fs-15: 15px; --fs-14: 14px; --fs-13: 13px; --fs-12: 12px; } .f_c_white { color: var(--v-white); } .f_c_green_blue { color: var(--v-green-blue); } .f_c_dark_gray_blue { color: var(--v-dark-gray-blue); } .f_c_dark_blue { color: var(--v-dark-blue); } .f_c_slate_gray { color: var(--v-slate-gray); } .f_c_silver_tone { color: var(--v-silver-tone); } .f_c_mystic_navy { color: var(--v-mystic-navy); } .f_c_lunar_mist { color: var(--v-lunar-mist); } .f_c_neve_faye { color: var(--v-neve-faye); } .f_f_semiBold { font-family: "Montserrat-SemiBold"; font-weight: 600; } /* Chrome */ ::-webkit-scrollbar { width: 6px; height: 8px; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(144, 147, 153, 0.3); transition: background-color 0.3s; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(144, 147, 153, 0.3); transition: background-color 0.3s; } /* Firefox */ * { scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; } * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Montserrat-Medium", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } @charset utf-8; body { overflow-x: hidden; } h1 { font-weight: 600; font-size: 46px; line-height: 1.17; margin-bottom: 8px; font-family: "Montserrat-Bold"; font-weight: 800; } h2 { font-weight: 600; font-size: 25px; color: var(--v-mystic-navy); line-height: 1.3; font-family: "Montserrat-Bold"; font-weight: 800; } h3 { font-weight: 700; font-size: var(--fs-24); } h2 span { color: #0DE3D6; font-family: "Montserrat-Bold"; font-weight: 800; } a { text-decoration: none; color: #0DE3D6; } a, p, .article-body * { font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color:#495057; } p { margin-bottom: 20px; } img { max-width: 100%; height: auto; } .article-body .list-bullet1 li { list-style: none; /* display:inline-flex; */ /* list-style-image: url("/hc/theming_assets/01JSXG4G4JH180M7GN1PV59RZS"); vertical-align:middle; */ } .article-body .list-bullet1 li::before { content: ""; display: inline-block; width: 25px; height: 26px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 6px; background: url("/hc/theming_assets/01JSXG4G4JH180M7GN1PV59RZS"); } .inner { width: 100%; max-width: 1496px; padding: 0 100px; margin: 0 auto; } .flex { display: flex; align-items: center; } .sub_title { text-align: center; margin: 8px auto 50px; color: var(--v-slate-gray); line-height: 1.5; max-width: 1030px; } a, div { -webkit-tap-highlight-color: transparent; } /* icon square bg */ .square_bg { width: 65px; height: 65px; background-color: rgba(13, 227, 214, .13); border-radius: 6px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .square_bg img { width: 40px; height: 40px; } /* public css */ .public_btn { justify-content: center; gap: 16px; align-items: initial; } .primary_button { padding: 15px 25px; display: block; font-size: var(--fs-14); border-radius: 5px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; transition: all 0.5s linear; text-align: center; background:#0DE3D6; } .primary_button.green_btn { background: var(--v-green-blue); color: var(--v-mystic-navy); } .primary_button.grey_btn { color: var(--v-white); background-color: rgba(151, 151, 151, 0.22); } .primary_button.grey_btn:hover { background: #83a0b175; } .primary_button.gri_btn { color: var(--v-white); background-color: rgba(151, 151, 151, 0.22); border: 1px solid rgba(13, 227, 214, 0.25); transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; position: relative; overflow: hidden; } .primary_button.gri_btn:before { content: ''; position: absolute; left: -20%; top: -10%; width: 0; height: 100%; transform: rotate(15deg) scale(1, 2); box-shadow: 0 0 30px 15px var(--v-green-blue); animation: button-glow 3000ms ease-in-out infinite; } .primary_button:hover { background: #73fff6; } a.btn.btn-secondary.top-bar-login-btn:hover, a.btn.btn-dark.desktop-prime-btn:hover { background:#3a3a7f; } @keyframes button-glow { 0% { left: -20%; } 50% { left: 120%; } 100% { left: 120%; } } .primary_button.dark_btn { color: var(--v-green-blue); background: var(--v-dark-blue); } .primary_button.green_btn:hover { background: #73fff6; color: var(--v-dark-blue); } .primary_button.dark_btn:hover { background: #3a3a7f; color: var(--v-green-blue); ; } .hook li { color: var(--v-slate-gray); line-height: 1.5; font-size: var(--fs-15); padding-left: 49px; position: relative; margin-top: 15px; } .hook li:before { content: ''; position: absolute; top: -1px; background: url(/wp-content/themes/startrader/images/tick-icon.svg) center no-repeat; -moz-background-size: 100% 100%; background-size: 100% 100%; left: 0; width: 24px; height: 24px; display: block; } .noted { color: var(--v-slate-gray); line-height: 1.2; font-size: var(--fs-15); margin-top: 50px; text-align: center; } .noted span, .noted a { color: var(--v-green-blue); font-size: var(--fs-15); } .app_btn .primary_button { display: flex; align-items: center; gap: 5px; justify-content: center; } div.animation { padding: 2px; overflow: hidden; position: relative; border-radius: 5px; } div.animation::before { content: ''; opacity: 0; position: absolute; top: -200%; left: 42%; width: 15%; height: 500%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #0DE3D6 100%) top, linear-gradient(to right, #0DE3D6 0%, rgba(255, 255, 255, 0) 100%) bottom; background-size: 100% 50%; background-repeat: no-repeat; z-index: -1; } div.animation:hover::before { opacity: 1; transform-origin: center center; animation: rotate 4s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width:1200px) { :root { --fs-56: 52px; --fs-48: 36px; --fs-42: 38px; --fs-32: 25px; --fs-25: 23px; --fs-22: 20px; } } @media (max-width:1024px) { :root { --fs-56: 48px; --fs-42: 32px; --fs-40: 30px; --fs-25: 20px; } } @media (max-width:800px) { .flex { flex-wrap: wrap; } } @media (max-width:768px) { :root { --fs-56: 44px; --fs-42: 28px; --fs-40: 28px; --fs-32: 20px; --fs-25: 18px; --fs-22: 18px; --fs-21: 18px; --fs-20: 18px; --fs-13: 12px; } } @media (max-width:768px) { html[lang='de'] .equallong_btn { width: 100%; max-width: 380px; } } @media (max-width:700px) { html[lang='vi'] .equallong_btn, html[lang='ms'] .equallong_btn, html[lang='fr'] .equallong_btn { width: 100%; max-width: 330px; } } @media (max-width:650px) { .equallong_btn { width: 100%; max-width: 300px; } } @media (max-width:640px) { html[lang='de'] .equal_btn { width: 100%; max-width: 275px; } } @media (max-width:610px) { .equal_btn { width: 100%; max-width: 220px; } html[lang='ja'] .equal_btn{ max-width: 280px; } html[lang='es'] .equal_btn{ max-width: 305px; } html[lang='vi'] .equal_btn, html[lang='ms'] .equal_btn, html[lang='pt'] .equal_btn{ max-width: 250px; } html[lang='ru'] .equal_btn, html[lang='id'] .equal_btn, html[lang='fr'] .equal_btn{ max-width: 258px; } html[lang='it'] .equal_btn{ max-width: 230px; } } @media (max-width:500px) { :root { --fs-56: 40px; --fs-42: 25px; --fs-40: 23px; --fs-25: 16px; --fs-22: 16px; --fs-21: 16px; --fs-18: 16px; --fs-13: 10px; } } @media (max-width:438px) { :root { --fs-56: 36px; --fs-18: 14px; --fs-16: 14px; --fs-15: 13px; --fs-14: 12px; } .noted { margin-top: 30px; } .primary_button { padding: 15px; } .equallong_btn { max-width: 240px; } html[lang='ms'] .equallong_btn, html[lang='fr'] .equallong_btn { max-width: 275px; } .equallong_btn img { max-width: 30px; } .equal_btn { max-width: 190px; } html[lang='ja'] .equal_btn{ max-width: 230px; } html[lang='es'] .equal_btn{ max-width: 250px; } html[lang='vi'] .equal_btn, html[lang='fr'] .equal_btn{ max-width: 210px; } } @media (max-width:375px) { :root { --fs-56: 30px; } } @media (max-width:1400px) { .inner { padding: 0 65px; } } @media (max-width:1024px) { .inner { padding: 0 40px; } } @media (max-width:510px) { .inner { padding: 0 20px; } } body { font-family: "Montserrat-Medium", sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; /* Light background */ } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } h1.category-name { margin-top:150px; } .help-center-page.container, .category-container { margin:40px auto; } a { color: #007bff; /* Primary link color */ text-decoration: none; } /* a:hover { text-decoration: underline; } */ a:hover .fab{ color:#0DE3D6; } img { max-width: 100%; height: auto; } ul { list-style: none; } /* h1, h2, h3, h4, h5, h6 { margin-bottom: 0.8em; color: #1d2d35; /* Darker heading color } h1 { font-size: 2.2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } */ .btn { display: inline-block; padding: 10px 20px; border-radius: 5px; text-align: center; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .btn-primary { background-color: #007bff; /* Primary button color */ color: #fff; border: 1px solid #007bff; } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; color: #fff; text-decoration: none; } .btn-secondary { background-color: transparent; color: #007bff; border: 1px solid #007bff; } .btn-secondary:hover { background-color: #e2f0ff; /* Light blue background on hover */ color: #0056b3; text-decoration: none; } .btn-tertiary { background-color: #e9ecef; color: #343a40; border: 1px solid #ced4da; } .btn-tertiary:hover { background-color: #d6dade; text-decoration: none; } /* Header Styles */ .site-header { background-color: #fff; /* padding: 15px 0; */ /* border-bottom: 1px solid #e9ecef; */ position: sticky; top: 0; z-index: 1000; box-shadow:none; border-bottom:none; } .header-container { display: flex; justify-content: space-between; align-items: center; } .head_bottom { background:#DAF8FC; } .logo img { height: 30px; /* Adjust as needed */ } main { background:white; padding-top:98px; } .main-nav ul { display: flex; gap: 25px; } .main-nav a { color: #333; font-weight: 500; } /* .main-nav a:hover { color: #007bff; text-decoration: none; } */ .header-actions { display: flex; align-items: center; gap: 15px; } .language-selector { display: flex; align-items: center; gap: 5px; cursor: pointer; color: #555; } .mobile-menu-toggle { display: none; /* Hidden on desktop */ background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #333; } /* Help Center Page Layout */ .help-center-page { display: flex; gap: 30px; padding-top: 30px; padding-bottom: 40px; } /* Sidebar Styles */ @media (min-width: 991.98px) { .aside-sidebar{ width:40%; } } .section-title {font-family: 'Montserrat';font-weight: 600;font-size: 20px;line-height: 100%;letter-spacing: -1px;/* margin-bottom: 10px; */} .accordion-content a { display: block; padding: 08px; color: #333; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; font-family: 'Montserrat-Medium'; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; } .accordion-header{ padding: 15px 10px 15px 25px; } .sidebar.active .accordion-header { background: rgba(197, 236, 255, 0.25); } .sidebar.active{ border-color:transparent; } .accordion-content{ background:transparent; } .accordion-content.loaded{ background: #C5ECFF40; } .accordion-content.loaded p { font-family: 'Montserrat'; font-weight: 500; font-size: 18px; line-height: 100%; letter-spacing: -1px; } .accordion-content a::before { content: ""; display: inline-block; width: 16px; /* Example width */ height: 16px; /* Example height */ background-image: url("https://www.starhelpcenter.com/hc/theming_assets/01JSXJF89K0E58G52831VWZJV4"); background-size: contain; /* Fit the image within the dimensions */ background-repeat: no-repeat; background-position: center; vertical-align: middle; /* Align icon with text (try text-bottom, top, etc.) */ margin-right: 6px; /* Add space between icon and link text */ } .accordion-content li.current-article a::before, .accordion-content a:hover::before { content: ""; background-image: url("https://www.starhelpcenter.com/hc/theming_assets/01JSXHFE7QSPF7XY20S53WMWQ8"); } [dir=rtl] .accordion-content a::before { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); margin-left:3px; } .sidebar { flex: 0 0 280px; /* Fixed width sidebar */ background-color: #fff; /* padding: 20px; */ border-radius: 8px; border: 1px solid #e9ecef; height: fit-content; /* Make sidebar height adjust to content */ } /* .sidebar h2 { font-size: 1.2rem; color: #0056b3; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; } */ .sidebar-nav ul { margin: 0; padding: 0; } .sidebar-nav li { margin-bottom: 5px; } .sidebar-nav a { display: block; padding: 8px 12px; color: #333; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; } .sidebar-nav a:hover { /* background-color: #f0f7ff; */ /* Light hover background */ text-decoration: none; color: #0056b3; } .sidebar-nav li.active a { background-color: #e2f0ff; /* Active item background */ color: #0056b3; /* Active item text color */ font-weight: bold; } .need-help-sidebar { margin-top: 30px; padding: 20px; /* border-top: 1px solid #eee; */ text-align: left; background: rgba(197, 236, 255, 0.25); border-radius: 10px; } .need-help-sidebar h3 { margin-bottom: 10px; font-family: 'Montserrat'; font-weight: 600; font-size: 22px; line-height: 100%; letter-spacing: -1px; } .need-help-sidebar p { font-size: 16px; color: #555; margin-bottom: 15px; font-family: 'Montserrat'; font-weight: 500; line-height: 35px; letter-spacing: 0%; vertical-align: middle; } a.dark_btn.primary_button { width:fit-content; } /* .need-help-sidebar .btn { width: 100%; } */ /* Article Content Styles */ .article-content { flex: 1; /* Takes remaining space */ background-color: #fff; padding: 30px; border-radius: 8px; border: 1px solid #e9ecef; } .breadcrumbs { margin-bottom: 20px; font-size: 0.9rem; color: #6c757d; } .breadcrumbs ol { display: flex; gap: 5px; } .breadcrumbs li::after { /* content: '/'; */ margin-left: 5px; color: #ced4da; } .breadcrumbs li:last-child::after { content: ''; } .breadcrumbs a { color: #6c757d; } .breadcrumbs a:hover { color: #007bff; } .breadcrumbs span { font-weight: bold; color: #333; } .article-content h1 {font-family: 'Montserrat';font-weight: 600;font-size: 30px;line-height: 100%;border-bottom: 1px solid #e9ecef; padding-bottom:10px;color:#0E1236; } .article-body h2 { margin-top: 2em; margin-bottom: 0.8em; color: #0056b3; /* Use accent for subheadings */ padding-bottom: 5px; border-bottom: 1px dashed #ddd; } .article-body{ font-family: 'Montserrat'; font-weight: 500; font-size: 18px; line-height: 35px; letter-spacing: 0%; vertical-align: middle; } .article-body p { margin-bottom: 1.2em; color: #495057; } .article-body ul, .article-body ol { margin-left: 20px; margin-bottom: 1.2em; padding-left: 15px; } .article-body ul { list-style: disc; } .article-body ol { list-style: decimal; } .article-body li { margin-bottom: 0.5em; } .article-body strong { /* font-family: 'Montserrat'; */ font-weight: 500; /* font-size: 20px; */ /* line-height: 35px; letter-spacing: 0%; vertical-align: middle; text-transform: capitalize; color: #0E1236; */ } /* CTA Section */ .cta-section { /* background-color: #0e2a47; /* Dark blue background like example */ */ background-image:url(/hc/theming_assets/01JSXBP1N73B8VYPSF6QSCPWSA); color: #fff; padding: 50px 0; text-align: center; margin-top: 40px; } .cta-section h2 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; } .cta-section p { margin-bottom: 25px; font-size: 1.1rem; opacity: 0.9; color:white; } .cta-section .btn-primary { background-color: #0DE3D6; color: black; border-color: #0DE3D6; padding: 12px 30px; } .cta-section .btn-primary:hover { background-color: #0DE3D6; color: black; border-color: #0DE3D6; } /* Footer Styles */ .site-footer { background-color: #1d2d35; /* Dark footer background */ color: #adb5bd; padding-top: 40px; font-size: 0.9rem; } .footer-container { display: flex; flex-wrap: wrap; gap: 30px; padding-bottom: 30px; /* border-bottom: 1px solid #343a40; /* Separator line */ */ border-bottom: none; /* Separator line */ } .footer-column { flex: 1; min-width: 150px; /* Prevent columns from becoming too narrow */ } .footer-logo { margin-bottom: 20px; max-width: 150px; /* Adjust as needed */ opacity: 0.8; } .footer-column h4 { color: #fff; margin-bottom: 15px; font-size: 20px; } .footer-column ul li { margin-bottom: 8px; } .footer-column a { color: #adb5bd; } .footer-column a:hover { color: #fff; text-decoration: none; } .footer-bottom { padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-start; /* Align items to the top */ flex-wrap: wrap; /* Allow wrapping on small screens */ gap: 20px; } .social-links { margin: 15px auto; } .social-links h4 { color: #fff; margin-bottom: 10px; } .social-links a { color: #0DE3D6; font-size: 1.3rem; margin-right: 15px; transition: color 0.3s ease; } .social-links a:hover { color: #fff; } .social-links a:last-child { margin-right: 0; } .copyright { flex-basis: 60%; /* Give more space to copyright/disclaimer */ text-align: left; font-size: 0.8rem; line-height: 1.5; color: #e1e1e6; /* Lighter text for disclaimer */ } .copyright h4 { color: #adb5bd; margin-bottom: 5px; font-size: 0.9rem; text-align:left; } .copyright p { padding: 0; margin: 0; box-sizing: border-box; font-weight: 500; color: var(--v-white); font-size: var(--fs-14); margin-bottom: 16px; line-height: 2.35; text-align:left; } nav.pagination { display:grid; flex-direction:column; justify-content:center; } /* --- Responsive Design --- */ /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { .header-container { flex-wrap: wrap; /* Allow items to wrap */ } .main-nav { /* display: none; */ /* Hide main nav for now, implement toggle later if needed */ order: 3; /* Place it below logo and actions */ width: 100%; margin-top: 15px; } .main-nav ul { flex-direction: column; gap: 10px; align-items: center; } .header-actions { order: 2; /* Keep actions to the right */ } .mobile-menu-toggle { display: block; /* Show hamburger icon */ order: 1; /* Place hamburger before actions on small screens */ } .help-center-page { flex-direction: column-reverse; } .sidebar { flex: 0 0 auto; /* Reset flex basis */ width: 100%; margin-bottom: 30px; } .footer-container { gap: 20px; } .footer-column { min-width: 200px; /* Adjust min-width for tablet */ } .footer-bottom { flex-direction: column; align-items: center; /* Center items on mobile */ text-align: center; } .copyright { flex-basis: 100%; /* Full width on small screens */ text-align: center; margin-top: 20px; } .social-links { margin-bottom: 15px; /* Add space below social links */ } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .header-actions .btn { padding: 8px 12px; font-size: 0.9rem; } .header-actions .language-selector { display: none; /* Optionally hide language selector on smallest screens */ } .article-content { padding: 20px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } .cta-section { padding: 40px 0; } .cta-section h2 { font-size: 1.5rem; } .cta-section p { font-size: 1rem; } .footer-container { flex-direction: column; align-items: center; text-align: center; } .footer-column { min-width: auto; /* Allow columns to stack */ width: 100%; margin-bottom: 15px; /* Space between stacked columns */ } .footer-logo { margin-left: auto; margin-right: auto; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .header-actions .btn { display: none; /* Hide buttons on very small screens maybe? */ } .header-actions .btn-secondary { /* Keep one button */ display: inline-block; } .logo img { height: 30px; } .article-content { padding: 15px; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } } /* --- Add these styles to your existing style.css --- */ /* Sidebar Accordion Styles */ .sidebar-nav { /* Remove potential default padding/margin if needed */ padding: 0; margin: 0; } .accordion-section { margin-bottom: 5px; border-bottom: 1px solid #f0f0f0; /* Separator */ } .accordion-section:last-child { /* border-bottom: none; */ } .accordion-header { background-color: transparent; /* Match sidebar background */ border: none; padding: 25px10px 15px 25px; width: 100%; text-align: left; font-size: 1.05rem; /* Slightly larger than article links */ font-weight: bold; color: #333; /* Darker color for section titles */ cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.2s ease; font-family: 'Montserrat'; font-weight: 600; font-size: 25px; line-height: 100%; letter-spacing: -1px; } .accordion-header:hover { /* background-color: #f8f9fa; /* Slight hover effect */ */ color: #0DE3D6; /* Highlight color on hover */ } .accordion-header.active{ /* background:rgba(197, 236, 255, 0.25); */ } .accordion-header .accordion-icon { font-size: 0.9rem; font-weight: bold; transition: transform 0.3s ease; margin-left: 10px; } .accordion-header.active .accordion-icon { /* transform: rotate(45deg); */ /* Change '+' to 'x' visually */ } .accordion-content { display: none; /* Hidden by default */ padding: 0px 10px 15px 25px; /* Indent article list */ /* background-color: #ffffff; */ /* Ensure background */ overflow: hidden; } .accordion-content ul { list-style: none; padding: 0; margin: 0; } .accordion-content li { margin-bottom: 3px; } .accordion-content a { display: block; padding: 08px; color: #333; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; font-family: 'Montserrat-Medium'; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; } .accordion-content a:hover { /* background-color: #ecf8fc; */ text-decoration: none; color: #34e1d5; } /* Style for the currently active/viewed article link */ .accordion-content li.current-article a, .article-body a { /* background-color: #C5ECFF40; */ color: #0DE3D6; /* font-weight: bold; */ /* line-height: 1.5; */ } /* Loading/Error messages inside content */ .accordion-content .loading-msg, .accordion-content .error-msg { padding: 10px 0; font-style: italic; color: #6c757d; font-size: 0.9rem; } .accordion-content .error-msg { color: #dc3545; /* Red for errors */ font-style: normal; } /* --- Make sure previous sidebar styles don't conflict --- */ /* Adjust or remove old .sidebar-nav styles if they interfere */ /* For example, remove any direct styling on .sidebar-nav ul or li if present */ /* Existing .sidebar-nav a styles might be redundant now, handled by .accordion-content a */ /* --- Add these styles to your existing style.css --- */ /* Sidebar Search Styles */ .sidebar-search { padding: 0px 0px 15px 0px; /* Adjust padding as needed */ /* margin-bottom: 15px; */ /* border-bottom: 1px solid #eee; */ /* Optional separator */ } .sidebar-search form { padding:10px 25px; border:1px solid #e9ecef; border-radius:10px; } #sidebar-search-input { width: 100%; /* padding: 10px 12px; */ /* border:1px solid #e9ecef; */ /* border-radius: 5px; */ /* font-size: smaller; */ /* box-sizing: border-box; /* Include padding and border in width */ */ background:#ffffff; } #sidebar-search-input:focus { outline: none; /* border-color: transparent; */ box-shadow: none; } /* --- Modify Accordion Icon Styles --- */ /* Remove the old icon style if it was just a '+' text */ /* .accordion-header .accordion-icon { ... remove transform: rotate(45deg) ... } */ /* Style for the Font Awesome icon */ .accordion-section .accordion-icon { font-size: 0.9rem; /* Adjust size if needed */ transition: transform 0.3s ease; /* Keep the transition */ margin-left: 10px; /* Keep spacing */ color: #6c757d; /* Optional: Give icon a specific color */ } /* Rotate the icon when the header is active */ .accordion-section.active .accordion-icon { transform: rotate(180deg); /* Rotate the chevron down to point up */ } /* Ensure content visibility affects active state visually */ .accordion-header.active { /* background-color: #C5ECFF40; */ } /* Highlight matching text (Optional but helpful) */ .search-highlight { background-color: #fff3cd; /* Light yellow highlight */ font-weight: bold; } /* Hide elements cleanly */ .hidden-by-search { display: none !important; /* Use important to override other display styles if needed */ } /* Basic Reset & Defaults */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Montserrat-Medium", sans-serif; line-height: 1.6; color: #333; background-color: #fff; /* Default white background */ } .container { max-width: 1200px; margin: 5px auto; padding: 0 15px; } a { color: #007bff; text-decoration: none; } /* a:hover { text-decoration: underline; } */ img { max-width: 100%; height: auto; display: block; /* Prevent bottom space */ } ul { list-style: none; } /* h1, h2, h3, h4, h5, h6 { margin-bottom: 0.7em; color: #1d2d35; line-height: 1.3; } h1 { font-size: 2.8rem } h2 { font-size: 2.2rem} h3 { font-size: 1.5rem; } h4 { font-size: 1rem } */ /* Buttons */ .btn { display: inline-block; padding: 5px 10px; border-radius: 6px; text-align: center; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border: 1px solid transparent; font-size: 0.95rem; line-height: 1.5; /* Ensure consistent height */ } .btn:hover { text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .btn-primary { /* Dark Blue Login */ background-color: #1d2d35; color: #fff; border-color: #1d2d35; font-size: small; } .btn-primary:hover { background-color: #344955; border-color: #344955; color: #fff; } .btn-secondary { /* Cyan Open Account */ background-color: #00bcd4; /* Cyan */ color: #fff; border-color: #00bcd4; font-size: small; } .btn-secondary:hover { background-color: #00a5bb; border-color: #00a5bb; color: #fff; } .btn-prime { /* Dark outline/fill PRIME */ background-color: #1d2d35; color: #fff; border-color: #1d2d35; margin-left: 5px; padding: 10px 15px; /* Slightly smaller */ } .btn-prime:hover { background-color: #344955; border-color: #344955; } .btn-search { /* Dark blue Search button */ background-color: #0E1236; color: #0DE3D6; border-radius: 6px; /* Match input rounding */ padding: 8px 20px; margin: 2px; font-size: small; border: none; /* Remove border if input group handles it */ font-family: Montserrat; font-weight: 500; font-size: 18px; line-height: 35px; letter-spacing: 0%; vertical-align: middle; text-transform: capitalize; } .btn-search:hover { background-color: #3a3a7f; } .btn-cta { /* Cyan CTA button */ background-color: var(--v-green-blue); color: var(--v-mystic-navy); border-color: var(--v-green-blue); font-size: 1.1rem; padding: 12px 35px; } .btn-cta:hover { background: #73fff6; color: var(--v-dark-blue); } /* Hero Section Styles */ .hero-section { /* background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); */ /* Light cyan gradient */ padding: 80px 0; text-align: center; } .hero-content h1 { color: #1d2d35; margin-bottom: 15px; /* font-family:"Montserrat-Medium"; */ /* font-weight:700; */ } .hero-content p { color: #344955; font-size: 1.1rem; max-width: 650px; margin: 0 auto 30px 0; } .hero-search-form { max-width: 600px; /* margin: 0 auto; */ display: flex; background-color: #fff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); overflow: hidden; /* Ensure button fits nicely */ } .search-input-group { flex-grow: 1; display: flex; align-items: center; position: relative; } .search-input-group .search-icon { position: absolute; left: 15px; color: #aaa; font-size: 1.1rem; } .fa-magnifying-glass::before, /* Use the more modern ::before pseudo-element */ .fa-search::before { content: ""!important; background-image: url('/hc/theming_assets/01JSXABHRW0C6JS04Q2FHX4WC7'); background-size: contain; /* Fit the image within the element */ background-repeat: no-repeat; background-position: center center; display: inline-block; /* Allow width/height */ width: 1em; /* Example size - match font size */ height: 1em; /* Example size - match font size */ line-height: 1em; /* Optional: Can help vertical alignment */ vertical-align: middle; /* Adjust as needed for alignment */ font-family: initial; font-weight: normal; font-style: normal; text-rendering: initial; -webkit-font-smoothing: initial; } .hero-search-form input[type="search"] { width: 100%; padding: 0 20px 0 45px; /* Pad left for icon */ border: none; font-size: small; border-radius: 8px 0 0 8px; /* Round left corners */ outline: none; color: #333; } .hero-search-form input[type="search"]::placeholder { color: #aaa; } /* Browse Topics Section */ .browse-topics-section { padding: 60px 0; background-color: #fff; /* Ensure white background */ } .browse-topics-section h2 { text-align: center; margin-bottom: 40px; } .accent-text { /* color: #00bcd4; */ /* Cyan accent */ } .topic-grid { display: grid; gap: 25px; /* Create columns that are at least 350px wide, fitting as many as possible */ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Optional: If you want all rows to try and be 250px tall */ grid-auto-rows: 250px; /* Optional: Align items at the start if heights vary and you don't want stretching */ /* /* align-items: start; */ } */ .loading-placeholder, .error-placeholder { grid-column: 1 / -1; /* Span full width */ text-align: center; padding: 40px; color: #6c757d; font-size: 1.1rem; } .error-placeholder { color: #dc3545; } .topic-card { /* --- Centering Logic --- */ display: flex; /* 1. Enable Flexbox */ flex-direction: column; /* 2. Stack direct children vertically (e.g., icon above title) */ justify-content: center; /* 3. Center the content vertically along the main (column) axis */ align-items: center; /* 4. Center the content horizontally along the cross axis */ text-align: center; /* 5. Keep for centering text *within* the direct children */ /* --- Original Presentational Styles (Keep these) --- */ background-color: #ebf9fc; /* Light background for cards */ padding: 60px 25px; /* Padding creates space *around* the centered content */ border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e9ecef; color: #333; /* Ensure text color contrasts */ /* Optional: Add a min-height if you want the cards to have a consistent minimum size */ /* min-height: 250px; */ /* Example */ } /* Optional: If your icon/text elements need specific handling */ .topic-card > .topic-icon { /* Add specific icon styles if needed, e.g., margin-bottom */ margin-bottom: 15px; /* Example spacing */ } .topic-card > .topic-title { /* Add specific title styles if needed */ } .topic-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); text-decoration: none; background: #0E1236; /* Slightly lighten on hover */ } /* Specific card styling like the dark 'Platforms' */ .topic-card.dark-card { background-color: #1d2d35; /* Dark blue */ color: #fff; } .topic-card.dark-card:hover { background-color: #344955; } .topic-card.dark-card .topic-icon { color: #00bcd4; /* Cyan icon on dark background */ } .topic-card.dark-card .topic-title { color: #fff; } .topic-icon { font-size: 2.5rem; /* Icon size */ margin-bottom: 15px; color: #00bcd4; /* Default icon color */ display: inline-block; /* Needed for margin */ } /* .topic-card:hover .topic-icon{ filter: invert(.2); } */ .topic-title { font-size: 1.1rem; font-weight: 600; color: #0d1236; } .topic-card:hover h3.topic-title{ color:#0DE3D6; } /* CTA Section */ .cta-section { background-color: #1a233a; /* Dark blue/purple background */ background-image: url(/hc/theming_assets/01JSXBP1N73B8VYPSF6QSCPWSA); /* Replace with actual image */ background-size: cover; background-position: center; color: #fff; padding: 80px 0; text-align: center; position: relative; } /* Overlay for better text readability */ .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* background-color: rgba(26, 35, 58, 0.7); /* Semi-transparent dark overlay */ */ background-image:url(/hc/theming_assets/01JRW213D0Q1B82437K1QS9HF4); z-index: -1; } .cta-content { position: relative; z-index: 2; } .cta-section h2 { color: #0DE3D6; font-size: 2.5rem; margin-bottom: 10px; color:var(--v-green-blue);font-size: var(--fs-42);line-height: 1.09;text-transform: uppercase; } .cta-section p { margin-bottom: 30px; font-size: 1.2rem; opacity: 0.9; } /* Footer Styles */ .site-footer { background-color: #fff; /* White background for top part */ color: #555; padding-top: 50px; font-size: 0.9rem; border-top: 1px solid #eee; } .footer-container { display: grid; gap: 30px; /* Adjust columns */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding-bottom: 40px; /* border-bottom: 1px solid #eee; */ margin-bottom: 30px; border-bottom:none; } .footer-logo { margin-bottom: 20px; max-width: 150px; opacity: 0.9; } .footer-column h4 { color: #1d2d35; margin-bottom: 15px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; } .footer-column ul li { margin-bottom: 10px; } .footer-column a { color: #555; } .footer-column a:hover { color: #00bcd4; text-decoration: none; } .footer-bottom { padding-bottom: 30px; /* Display social links */ display: flex; /* Use flex for alignment */ align-items: center; justify-content: flex-start; /* Align left */ flex-wrap: wrap; /* Allow wrapping */ gap: 15px; } .footer-end{ background-color: #0E1236; padding-top:30px; padding-bottom:30px; } .social-links h4 { color: #1d2d35; margin-bottom: 10px; margin-right: 15px; /* Space between title and icons */ font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; } .social-links a { display: inline-block; width: 45px; height: 45px; line-height: 45px; /* Center icon vertically */ text-align: center; background-color: #0DE3D621; /* Light background for icons */ color: #1d2d35; /* Dark icon color */ border-radius: 6px; font-size: 1.1rem; transition: background-color 0.3s ease, color 0.3s ease; margin-right:auto; } i.fab { font-size:large; } .social-links a:hover { background-color: #1d2d35; /* Dark background on hover */ color: #fff; /* White icon */ } p.\32 025 { color:white; margin-top:50px; } .copyright h4{ scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; padding: 0; margin: 0; box-sizing: border-box; color: var(--v-green-blue); font-weight: 600; font-size: var(--fs-16); line-height: 1.2; margin-bottom: 8px; } .copyright-section { background-color: #1d2d35; /* Dark background for disclaimer */ color: #adb5bd; /* Lighter text */ padding: 30px 0; font-size: 0.8rem; line-height: 1.7; } .copyright-section .container { max-width: 1200px; /* Ensure container width */ } .copyright-section h4 { color: #e9ecef; /* Slightly brighter heading */ margin-bottom: 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } .copyright-section p { margin-bottom: 15px; } .copyright-section p:last-child { margin-bottom: 0; } .copy-year { margin-top: 20px; text-align: center; opacity: 0.8; } /* --- Responsive Design --- */ /* Large devices (desktops, less than 1200px) */ @media (max-width: 1199.98px) { .container { max-width: 960px; } } /* Medium devices (tablets, less than 992px) */ @media (max-width: 991.98px) { .container { max-width: 720px; } .main-nav { /* display: none; */ /* Hide desktop nav */ order: 3; /* Place below logo/actions when shown */ width: 100%; background-color: #fff; margin: 15px 0 0 0; /* padding: 10px 0; */ box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 6px; } .main-nav.active { display: block; /* Show when active */ } .main-nav ul { flex-direction: column; align-items: center; gap: 5px; } .main-nav a { padding: 10px 15px; display: block; width: 100%; text-align: center; } .main-nav a::after { display: none; } /* Remove hover effect */ .mobile-menu-toggle { display: block; /* Show hamburger */ margin-top: 25px; /* Align with logo/actions */ margin-bottom: 10px; order: 2; /* Place between nav and actions */ } .header-actions { order: 1; /* Move actions to the left */ margin-left: 0; /* Optionally hide some buttons */ .btn-prime { display: none; } } .logo { order: 0; /* Keep logo first */ } .header-top-links { display: none; } /* Hide top links on smaller screens */ h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; } .topic-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .footer-container { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .footer-bottom { justify-content: center; /* Center social links */ } .copyright-section { text-align: center; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .container { max-width: 540px; } .header-actions { gap: 8px; } .header-actions .btn { padding: 8px 15px; font-size: 0.9rem; } /* Further hide buttons if needed */ .header-actions .btn-secondary { display: none; } .hero-section { padding: 60px 0; } .hero-content h1 { font-size: 2rem; } .hero-content p { font-size: 1rem; } .hero-search-form { flex-direction: column; /* Stack input and button */ background: none; box-shadow: none; max-width: 400px; } .search-input-group { background-color: #fff; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .hero-search-form input[type="search"] { border-radius: 8px; /* Round all corners */ background:#ffffff; } .hero-search-form button { width: 100%; border-radius: 8px; } .browse-topics-section { padding: 40px 0; } .topic-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Allow slightly smaller cards */ gap: 15px; } .topic-card {padding: 50px 15px;} .topic-icon { font-size: 2rem; } .topic-title { font-size: 1rem; } .cta-section { padding: 60px 0; } .cta-section h2 { font-size: 2rem; } .cta-section p { font-size: 1.1rem; } .footer-container { grid-template-columns: repeat(2, 1fr); /* 2 columns */ text-align: center; } .footer-logo { margin: 0 auto 20px auto; } /* Center logo */ .social-links h4 { margin-right: 0; margin-bottom: 15px; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .container { max-width: 100%; /* Use full width */ } .header-actions { /* Keep only login button */ .language-selector { display: none; } .btn { display: none; } .btn-primary { display: inline-block; } } .logo img { height: 30px; } .main-nav { margin-top: 10px; } .hero-section { padding: 40px 0; } .hero-content h1 { font-size: 1.8rem; } .hero-content p { font-size: 0.95rem; } .topic-grid { grid-template-columns: 1fr; /* Single column */ } .footer-container { grid-template-columns: 1fr; /* Single column */ } .footer-bottom { padding-bottom: 20px; } .social-links { text-align: center; } .social-links h4 { width: 100%; } /* Full width title */ .copyright-section { padding: 20px 15px; } } /***** Category pages *****/ .category-container { display: flex; justify-content: flex-end; } .category-content { flex: 1; max-width: 100%; } @media (min-width: 1024px) { .category-content { flex: 0 0 80%; } } .section-tree { /* display: flex; */ flex-direction: column; flex-wrap: wrap; justify-content: space-between; } @media (min-width: 768px) { .section-tree { flex-direction: row; } } .section-tree .section { flex: initial; max-width: 100%; margin-bottom: 15px; } @media (min-width: 768px) { .section-tree .section { flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */ } } .section-tree-title { margin-bottom: 10px; font-size: 18px; font-weight: 600; } .section-tree-title a { color: #2F3941; font-weight: bold; font-size: x-large; } .section-tree .see-all-articles { display: block; padding: 15px 0; color: #34e1d5; } .article-list-item { font-size: 16px; padding: 0 0 10px 0; text-overflow: ellipsis; overflow: hidden; } .article-list-link:hover { color:#0DE3D6; } .article-list-item a { color: #2F3941; } .icon-star { color: #17494D; font-size: 18px; } /***** Section pages *****/ .section-container { display: flex; justify-content: flex-end; } .section-content { flex: 1; max-width: 100%; } @media (min-width: 1024px) { .section-content { flex: 0 0 80%; } } .section-list { margin: 40px 0; } .section-list-item { border-bottom: 1px solid #ddd; font-size: 16px; padding: 15px 0; } .section-list-item:first-child { border-top: 1px solid #ddd; } .section-list-item a { align-items: center; color: #2F3941; display: flex; justify-content: space-between; } .see-all-sections-trigger { cursor: pointer; display: block; padding: 15px; text-align: center; } .see-all-sections-trigger[aria-hidden=true] { display: none; } /***** Breadcrumbs *****/ .breadcrumbs { margin: 0 0 15px 0; padding: 0; display: flex; } @media (min-width: 768px) { .breadcrumbs { margin: 0; } } .breadcrumbs li { color: #5a6d7c; font-size: 13px; max-width: 450px; overflow: hidden; text-overflow: ellipsis; } .breadcrumbs li + li::before { content: ">"; margin: 0 4px; } .breadcrumbs li a:visited { color: #1F73B7; } /***** Search field *****/ .search-container { position: relative; } .search { border-color: transparent; border-radius: 5px; border-style: solid; border-width: 1px; display: flex; position: relative; transition: border 0.12s ease-in-out; } /* .search:focus-within { border-color: transparent; } */ .search input[type=search], .search .clear-button { background-color: #fff; /* border-radius: 30px; */ border: none; } .search-full input[type=search], .search-full .clear-button { border-color: #fff; } .search input[type=search] { appearance: none; -webkit-appearance: none; box-sizing: border-box; color: #666; flex: 1 1 auto; height: 40px; width: 100%; max-width: 700px; margin: auto; } .search-results .search input[type=search] { border: 1px solid lightgray; border-radius: inherit; } /* .search input[type=search]:focus { color: #555; border: 1px solid lightgray; } */ .search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } .search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; } .search .clear-button { align-items: center; box-sizing: border-box; color: #777; cursor: pointer; display: none; flex: none; justify-content: center; padding: 0 15px; } .search .clear-button:hover { background-color: #17494D; color: #fff; } .search .clear-button:focus { outline: 0; box-shadow: 0 0 0 3px #17494D; } .search-has-value .clear-button { display: flex; } [dir=ltr] .search input[type=search] { padding-left: 40px; padding-right: 20px; } [dir=ltr] .search-has-value input[type=search] { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-color: transparent; } [dir=ltr] .search-has-value input[type=search]:focus { border-right-color: #17494D; } [dir=ltr] .search .clear-button { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left-color: transparent; } [dir=ltr] .search .clear-button:focus { border-left-color: #17494D; } [dir=rtl] .search input[type=search] { padding-left: 20px; padding-right: 40px; } [dir=rtl] .search-has-value input[type=search] { border-bottom-left-radius: 0; border-top-left-radius: 0; border-left-color: transparent; } [dir=rtl] .search-has-value input[type=search]:focus { border-left-color: #17494D; } [dir=rtl] .search .clear-button { border-bottom-right-radius: 0; border-top-right-radius: 0; border-right-color: transparent; } [dir=rtl] .search .clear-button:focus { border-right-color: #17494D; } .search-icon { position: relative; top: 50%; transform: translateY(-50%); position: absolute; left: 15px; z-index: 1; width: 18px; height: 18px; color: #777; pointer-events: none; } [dir=rtl] .search-icon { left: auto; right: 15px; } /***** Hero component *****/ .hero { background-image: url(/hc/theming_assets/01J2ED16ES0AB1190S8RS9H3X9); background-position: center; background-size: cover; height: 300px; padding: 0 20px; text-align: center; width: 100%; } .hero-inner { position: relative; top: 50%; transform: translateY(-50%); max-width: 610px; margin: 0 auto; } .page-header { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; margin: 10px 0; } @media (min-width: 768px) { .page-header { align-items: baseline; flex-direction: row; flex-wrap: wrap; gap: 16px; margin: 0; } } .page-header .section-subscribe { flex-shrink: 0; margin-bottom: 10px; } @media (min-width: 768px) { .page-header .section-subscribe { margin-bottom: 0; } } .page-header h1 { flex-grow: 1; margin-bottom: 10px; } .page-header-description { font-style: italic; margin: 0 0 30px 0; word-break: break-word; } @media (min-width: 1024px) { .page-header-description { flex-basis: 100%; } } .page-header .icon-lock { height: 20px; width: 20px; position: relative; left: -5px; vertical-align: baseline; } .sub-nav { align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px 30px; justify-content: center; margin-bottom: 55px; } @media (min-width: 768px) { .sub-nav { flex-direction: row; } } .sub-nav .breadcrumbs { margin: 0; } .sub-nav .search-container { max-width: 700px; width: 100%; } @media (min-width: 768px) { .sub-nav .search-container { /* flex: 0 1 300px; */ } } .sub-nav input[type=search]::after { font-size: 15px; } /***** Search results *****/ .search-results { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 auto; max-width: 700px; } .container.search-results { display: grid; grid-template-columns: 1fr; justify-content: center; margin: 5px auto; padding-top: 130px; /* flex-direction: column; */ } .container.search-results .search{ /* min-width: 350px; */ width:100%; } @media (min-width: 1024px) { .search-results { flex-direction: row; } } .search-results-column { flex: 1; } @media (min-width: 1024px) { .search-results-column { flex: 0 0 75%; } } .search-results-sidebar { border-top: 1px solid #ddd; flex: 1 0 auto; margin-bottom: 20px; padding: 0; } @media (min-width: 1024px) { .search-results-sidebar { border: 0; flex: 0 0 20%; height: auto; } } .search-results-sidebar .sidenav-item { border-radius: 4px; padding: 10px 36px; margin-bottom: 4px; color: #2F3941; } .search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current { background-color: #e9ebed; text-decoration: none; } .search-results-sidebar .sidenav-subitem { unicode-bidi: embed; } .search-results-sidebar .sidenav-tag { display: flex; flex-direction: row; align-items: flex-start; flex-grow: 0; } .search-results-sidebar .sidenav-tag .content-tag { background: #E9EBED; border-radius: 4px; padding: 4px 12px; text-decoration: none; } .search-results-sidebar .sidenav-tag .content-tag .label { font-style: normal; font-weight: 600; font-size: 12px; line-height: 24px; text-align: center; letter-spacing: -0.000427656px; color: #49545C; flex-grow: 0; vertical-align: middle; display: inline-block; } .search-results-sidebar .sidenav-tag .content-tag .close-icon { color: #555555; vertical-align: middle; display: inline-block; } .search-results-sidebar .collapsible-sidebar { margin-bottom: 30px; } .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: none; } @media (min-width: 1024px) { .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: block; } } .search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) { display: none; } .search-results-sidebar .multibrand-filter-list .doc-count { color: #666; } .search-results-sidebar .see-all-filters { background: none; border: none; cursor: pointer; display: block; padding: 10px; color: #1F73B7; } .search-results-sidebar .see-all-filters[aria-hidden=true] { display: none; } .search-results-sidebar .see-all-filters:hover { text-decoration: underline; } .search-results-sidebar .see-all-filters::after { content: " ⌄"; font-weight: bold; } .search-results-subheading { font-size: 18px; font-weight: 600; } .search-results-list { margin-bottom: 25px; } .search-results-list > li { padding: 20px 0; } .search-results-list > li:first-child { border-top: 1px solid #ddd; } .search-results .no-results { display: flex; flex-direction: column; align-items: center; /* padding-top: 4rem; */ } .search-results .no-results .headline { color: #2F3941; font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: -0.45px; } .search-results .no-results .action-prompt { color: #68737D; font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.154px; } .search-results .no-results .action-prompt a { color: #1F73B7; } .search-results .no-results .action-prompt a:visited { color: #1F73B7; } .search-result-title-container { display: flex; justify-content: space-between; align-items: center; } .search-result-title { font-size: 16px; margin-bottom: 0; } .search-result-votes, .search-result-meta-count { color: #5a6d7c; font-size: 13px; } .search-result-votes-icon, .search-result-meta-count-icon { color: #17494D; vertical-align: middle; width: 13px; height: 13px; } [dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count { margin-left: 20px; } [dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count { margin-right: 20px; } .search-result-meta-container { color: #666; display: flex; flex-direction: column; } @media (min-width: 1024px) { .search-result-meta-container { flex-direction: row; align-items: center; } } @media (min-width: 1024px) { .search-result-meta-container nav { flex: 1; } } @media (min-width: 1024px) { [dir=ltr] .search-result-meta-container .meta-data { margin-left: 20px; } } @media (min-width: 1024px) { [dir=rtl] .search-result-meta-container .meta-data { margin-right: 20px; } } .search-result-meta-container .meta-data::after { content: none; } .search-result-breadcrumbs { margin: 0; } .search-result-description { margin-top: 10px; margin-bottom: 0; word-break: break-word; } /* By default use bold instead of italic to highlight */ .search-results-description em { font-style: normal; font-weight: bold; } /* Navigation element that collapses on mobile */ .collapsible-nav { flex-direction: column; font-size: 14px; position: relative; } @media (min-width: 768px) { .collapsible-nav { flex-direction: row; } } .collapsible-nav-border { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } @media (min-width: 768px) { .collapsible-nav-border { border-top: 0; } } .collapsible-nav-toggle { top: 22.5px; transform: translateY(-50%); position: absolute; right: 0; padding: 0; border: 0; background: none; width: 25px; height: 25px; border-radius: 50%; } @media (min-width: 768px) { .collapsible-nav-toggle { display: none; } } [dir=rtl] .collapsible-nav-toggle { left: 0; right: auto; } .collapsible-nav-toggle-icon { display: none; } .collapsible-nav-toggle[aria-expanded=false] .chevron-icon { display: inline-block; } .collapsible-nav-toggle[aria-expanded=true] .x-icon { display: inline-block; } .collapsible-nav-toggle:focus { outline: none; border: 1px solid #17494D; } .collapsible-nav-list { display: flex; flex-direction: column; } @media (min-width: 768px) { .collapsible-nav-list { flex-direction: row; } } .collapsible-nav-list li { color: #2F3941; line-height: 45px; order: 1; } @media (min-width: 768px) { .collapsible-nav-list li { line-height: normal; margin-right: 30px; } [dir=rtl] .collapsible-nav-list li { margin-left: 30px; margin-right: 0; } .collapsible-nav-list li a { text-decoration: none; padding: 15px 0; } } .collapsible-nav-list li a { color: #2F3941; display: block; } @media (min-width: 768px) { .collapsible-nav-list li:hover { border-bottom: 4px solid #ddd; } .collapsible-nav-list li:hover a:not([aria-current=page]) { padding: 15px 0 11px 0; text-decoration: none; } } .collapsible-nav-list li:not([aria-selected=true]), .collapsible-nav-list li:not(.current) { display: none; } @media (min-width: 768px) { .collapsible-nav-list li:not([aria-selected=true]), .collapsible-nav-list li:not(.current) { display: block; } } @media (min-width: 768px) { .collapsible-nav-list li[aria-selected=true] { padding: 15px 0 11px 0; } } .collapsible-nav-list li[aria-selected=true], .collapsible-nav-list li.current { order: 0; position: relative; } @media (min-width: 768px) { .collapsible-nav-list li[aria-selected=true], .collapsible-nav-list li.current { border-bottom: 4px solid #17494D; order: 1; } } .collapsible-nav-list li[aria-selected=true] a, .collapsible-nav-list li.current a { color: #2F3941; } .collapsible-nav[aria-expanded=true] li:not([aria-selected=true]), .collapsible-nav[aria-expanded=true] li:not(.current) { display: block; } /* Sidebar navigation that collapses on mobile */ .collapsible-sidebar { flex: 1; max-height: 45px; overflow: hidden; padding: 10px 0; position: relative; } @media (min-width: 1024px) { .collapsible-sidebar { max-height: none; padding: 0; } } .collapsible-sidebar-title { margin-top: 0; } .collapsible-sidebar-toggle { position: absolute; top: 22.5px; transform: translateY(-50%); right: 0; padding: 0; border: 0; background: none; width: 25px; height: 25px; border-radius: 50%; } @media (min-width: 1024px) { .collapsible-sidebar-toggle { display: none; } } [dir=rtl] .collapsible-sidebar-toggle { left: 0; right: auto; } .collapsible-sidebar-toggle-icon { display: none; } .collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon { display: inline-block; } .collapsible-sidebar-toggle[aria-expanded=true] .x-icon { display: inline-block; } .collapsible-sidebar-toggle:focus { outline: none; border: 1px solid #17494D; } .collapsible-sidebar-body { display: none; } @media (min-width: 1024px) { .collapsible-sidebar-body { display: block; } } .collapsible-sidebar[aria-expanded=true] { max-height: none; } .collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { display: block; } .search-result-meta-container { display:none; } div#article-body-content *, .accordion-content a , .help-center-page *, .site-footer * { /* font-size:small; */ } div#article-body-content { margin-top: 30px; } .article-body li div{ display:inline; } .topic-card:first-of-type .topic-icon { content: url(/hc/theming_assets/01K0NKPQR16891Q0Z4MQBZQGQX); } .topic-card:first-of-type:hover .topic-icon { content: url(/hc/theming_assets/01K0NKPJNXKVDSN5FJFWHT4S2R); } .topic-card:nth-of-type(2) .topic-icon { content: url(/hc/theming_assets/01JRYYF26YVAJTQEREC03MBRSW); } .topic-card:nth-of-type(3) .topic-icon { content: url(/hc/theming_assets/01JRYYF151QS6DNDPN7BXHYZTK); } .topic-card:nth-of-type(4) .topic-icon { content: url(/hc/theming_assets/01JRYYEZHGWQMDV5JW6KK7AR8X); } .topic-card:nth-of-type(5) .topic-icon { content: url(/hc/theming_assets/01JRYYF0GBBGAY4MJ24023S0VS); } .topic-card:nth-of-type(2):hover .topic-icon { content: url(/hc/theming_assets/01K0NKPQK2X4DEXYHP0284R34F); } .topic-card:nth-of-type(3):hover .topic-icon { content: url(/hc/theming_assets/01K0NKPQQE8SRCP0F632F97KTS); } .topic-card:nth-of-type(4):hover .topic-icon { content: url(/hc/theming_assets/01K0NKPQR4CPPAVH26E25A5KNW); } .topic-card:nth-of-type(5):hover .topic-icon { content: url(/hc/theming_assets/01K0NKPQS1C3KRMV5RK7ZQ27FK); } .topic-card:nth-of-type(6) .topic-icon { content: url(/hc/theming_assets/01K0RATXBT9ASEV7SG840BWZW3); } .topic-card:nth-of-type(6):hover .topic-icon { content: url(/hc/theming_assets/01K0RATZ0HD5X2RXN4X9NPQYDC); } .topic-card:nth-of-type(7) .topic-icon { content: url(/hc/theming_assets/01K0RAV0HYPN07RS5G5JSNJ34S); } .topic-card:nth-of-type(7):hover .topic-icon { content: url(/hc/theming_assets/01K0RAV24XQ897377QHWRW5DHZ); } .container { width: 100%; max-width: 1296px; /* padding: 0 100px; */ margin: 0 auto; } a { text-decoration: none; color: #34e1d5; } ul { list-style: none; } /* Button Styles */ /* .btn { background: var(--v-green-blue); color: var(--v-mystic-navy); } */ .btn-primary { background-color: #17d0cf; /* Cyan */ color: #fff; } .btn-primary:hover { background-color: #13b8b7; } .btn-secondary { background-color: #0a2540; /* Dark Blue */ color: #fff; } .btn-secondary:hover { background-color: #071b2f; } .btn-dark { background-color: #0a2540; /* Dark Blue */ color: #fff; padding: 10px 20px; /* Slightly larger padding */ } .btn-dark:hover { background-color: #071b2f; } /* Header Styles */ .site-header { width: 100%; position: relative; /* Needed for potential absolute positioning of mobile menu */ } /* Top Bar */ .header-top-bar { background-color: #fff; padding: 15px 0; font-size: 0.8em; font-weight: 500; border-bottom: 1px solid #eee; /* Subtle separator */ scrollbar-width: thin; margin: 0; box-sizing: border-box; font-family: "Montserrat-Medium", sans-serif; -webkit-tap-highlight-color: transparent; padding: 15px 0; backdrop-filter: blur(50px); background-color: var(--v-white); } .top-bar-content { display: flex; justify-content: space-between; align-items: center; scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; box-sizing: border-box; font-family: "Montserrat-Medium", sans-serif; -webkit-tap-highlight-color: transparent; width: 100%; max-width: 1280px; /* padding: 0 100px; */ margin: 0 auto; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1296px; /* padding: 0 100px; */ margin: 0 auto; } .top-bar-left a, .top-bar-right a { margin-left: 15px; color: #555; transition: color 0.3s ease; } .top-bar-left a:hover, .top-bar-right a:hover:not(.btn) { color: #0a2540; } .top-bar-left a:first-child { margin-left: 0; } .top-bar-right { display: flex; align-items: center; scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; padding: 0; margin: 0; box-sizing: border-box; font-family: "Montserrat-Medium", sans-serif; -webkit-tap-highlight-color: transparent; display: flex; justify-content: center; align-items: initial; gap: 11px; } .top-bar-right .btn { margin-left: 10px; } /* Main Navigation */ .header-main { background: #ebf9fc; padding: 20px 0; /* max-width: 1496px; */ /* position: fixed; */ } .main-nav-content { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1296px; /* padding: 0 100px; */ margin: 0 auto; } .logo { font-size: 1.8em; font-weight: 700; color: #0a2540; /* Dark blue */ display: flex; align-items: center; } .logo .logo-icon { color: #17d0cf; /* Cyan star */ margin-right: 8px; font-size: 0.9em; } .logo span { font-weight: 400; /* Lighter weight for TRADER part */ color: #334e68; /* Slightly lighter blue/grey */ margin-left: 2px; } .main-nav ul { display: flex; } .main-nav li { margin-left: 30px; } .main-nav a { color: #0a2540; font-weight: 600; font-size: 0.95em; padding: 5px 0; position: relative; transition: color 0.3s ease; } /* .main-nav a::after { content: ''; position: absolute; width: 0; height: 2px; background-color: #17d0cf; bottom: -2px; left: 0; transition: width 0.3s ease; } */ /* .main-nav a:hover { color: #17d0cf; } */ /* .main-nav a:hover::after { width: 100%; } */ .header-main-right { display: flex; align-items: center; } .language-selector { display: flex; align-items: center; margin-right: 25px; color: #334e68; font-weight: 500; cursor: pointer; font-size: 0.9em; } .language-selector i { margin-right: 6px; font-size: 1.1em; } .mobile-nav-toggle { display: none; /* Hidden by default */ background: none; border: none; font-size: 1.8em; color: #0a2540; cursor: pointer; margin-left: 15px; } /* Hero Section Styling (as seen below header) */ .hero-section { padding: 60px 0 80px; /* Adjust padding as needed */ text-align: left; /* Align text left as per image */ background:#DAF8FC; } .hero-section h1 { font-size: 3.5em; color: var(--v-dark-blue); margin-bottom: 8px; font-weight: 700; } .hero-section p { font-size: 1.1em; color: #334e68; max-width: 600px; /* Limit width of description */ margin-bottom: 30px; line-height: 1.7; } [dir=rtl] .hero-section p, [dir=rtl] .hero-content h1{ margin: 0 0 30px auto; text-align:right; } .search-form { display: flex; align-items: center; background-color: #fff; border-radius: 5px; padding: 5px 10px; max-width: 600px; /* Match paragraph width */ box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; } .search-form .search-icon { color: #aaa; margin: 0 10px; font-size: 1.1em; } .search-form input[type="search"] { flex-grow: 1; border: none; outline: none; padding: 10px 5px; font-size: 1em; font-family: inherit; color: #555; } .search-form input[type="search"]::placeholder { color: #aaa; } .search-form .btn-dark { margin-left: 10px; padding: 10px 25px; /* Specific padding for search button */ } /* Responsive Styles */ @media (max-width: 992px) { .main-nav ul { display: none; /* Hide main nav links */ position: absolute; top: 100%; /* Position below the header main */ left: 0; width: 100%; background-color: #fff; /* White background for mobile menu */ flex-direction: column; padding: 15px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-top: 1px solid #eee; z-index: 1000; /* Ensure it's on top */ } .main-nav.active ul { display: flex; /* Show when active class is added */ } .main-nav li { margin: 0; text-align: center; } .main-nav a { display: block; padding: 12px 20px; width: 100%; } .main-nav a:hover::after { width: 0; /* Disable underline effect on mobile */ } .main-nav a:hover { background-color: #f8f8f8; /* Subtle hover background */ color: #17d0cf; } .mobile-nav-toggle { display: block; /* Show hamburger */ } .header-main-right .btn-dark { font-size: 0.8em; /* Make prime button slightly smaller */ padding: 8px 15px; } .language-selector { margin-right: 15px; } } @media (max-width: 768px) { .container { width: 95%; } .logo { font-size: 1.5em; /* Slightly smaller logo */ } .logo .logo-icon { font-size: 0.8em; } .top-bar-left, .top-bar-right { font-size: 0.9em; /* Adjust font size */ } .top-bar-right .btn { padding: 6px 12px; font-size: 0.8em; } .top-bar-left a, .top-bar-right a { margin-left: 8px; } .language-selector span { display: none; /* Hide "ENGLISH" text, keep icon */ } .language-selector i { font-size: 1.3em; /* Make icon slightly larger */ } .language-selector { margin-right: 10px; } .header-main-right .btn-dark { display: none; /* Optionally hide Prime button on smaller screens */ } .hero-section h1 { font-size: 2.5em; } .hero-section p { font-size: 1em; } .search-form { flex-direction: column; /* Stack search elements */ align-items: stretch; /* Make elements full width */ padding: 10px; } .search-form input[type="search"] { margin-bottom: 10px; padding: 12px 10px; text-align: center; border: 1px solid #ddd; border-radius: 4px; } .search-form .search-icon { display: none; /* Hide icon when input is separate */ } .search-form button { width: 100%; } } @media (max-width: 480px) { .header-top-bar { padding: 10px 0; /* More padding for easier tapping */ } .top-bar-content { flex-direction: column; /* Stack left and right sections */ align-items: center; } .top-bar-left { margin-bottom: 10px; } .top-bar-left a { margin: 0 8px; /* Adjust spacing */ } .top-bar-right .btn { padding: 8px 15px; /* Slightly larger buttons */ } .logo { font-size: 1.3em; } .logo .logo-icon { margin-right: 5px; } .mobile-nav-toggle { font-size: 1.6em; } .hero-section h1 { font-size: 2em; } } /* Styles for the header WHEN SCROLLED */ .site-header.scrolled { position: fixed; /* Fix header to top */ background-color: #fff; /* White background when scrolled */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow */ /* Remove gradient background if applied directly to site-header initially */ } .site-header .main-nav-content .top-bar-right{ display:none; } .site-header.scrolled .top-bar-right{ display:flex; } .site-header.scrolled .header-top-bar { /* Hide the top bar smoothly */ height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; border-bottom: none; /* Remove border when hidden */ } .site-header.scrolled .mobile-hide{ display:none; } .site-header.scrolled .header-main { padding: 10px 0; /* Reduced padding when scrolled */ background: #fff; /* Ensure white background overrides gradient */ scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; margin: 0; box-sizing: border-box; font-family: "Montserrat-Medium", sans-serif; -webkit-tap-highlight-color: transparent; padding: 20px 0; background-color: var(--v-white); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } /* Optional: Slightly smaller logo when scrolled */ .site-header.scrolled .logo { /* font-size: 1.6em; */ /* Uncomment and adjust if needed */ } /* Hide elements not present in the scrolled state */ .site-header.scrolled .language-selector { /* display: none; */ /* Uncomment if language selector should hide */ } .site-header.scrolled .btn-dark { /* Assuming Startrader Prime button */ /* display: none; */ /* Uncomment if Prime button should hide */ } /* Prevent Content Jump: Add padding to the element AFTER the header */ .main-content { transition: padding-top 0.4s ease; /* Smooth padding adjustment */ } a.btn.btn-primary { scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; margin: 0; box-sizing: border-box; text-decoration: none; line-height: 1.5; -webkit-tap-highlight-color: transparent; padding: 15px 25px; display: block; font-size: var(--fs-14); border-radius: 5px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; transition: all 0.5s linear; text-align: center; background: var(--v-green-blue); color: var(--v-mystic-navy); } a.btn.btn-primary:hover{ background:#73fff6; } a.btn.btn-secondary { scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; margin: 0; box-sizing: border-box; text-decoration: none; line-height: 1.5; -webkit-tap-highlight-color: transparent; padding: 15px 25px; display: block; font-size: var(--fs-14); border-radius: 5px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; transition: all 0.5s linear; text-align: center; color: var(--v-green-blue); background: var(--v-dark-blue); } a.btn.btn-dark { scrollbar-color: rgba(144, 147, 153, 0.3) rgba(255, 255, 255, 0); scrollbar-width: thin; margin: 0; box-sizing: border-box; text-decoration: none; line-height: 1.5; -webkit-tap-highlight-color: transparent; padding: 15px 25px; display: block; font-size: var(--fs-14); border-radius: 5px; font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; transition: all 0.5s linear; text-align: center; color: var(--v-green-blue); background: var(--v-dark-blue); } /* --- Additions & Modifications for NEW Mobile Menu Style --- */ /* Body lock when menu is open */ body.mobile-menu-active { overflow: hidden; /* Prevent scrolling background content */ } /* --- Styling when mobile menu is active --- */ /* Reposition Top Bar to the very top */ body.mobile-menu-active .header-top-bar { position: fixed; /* Stick to top of viewport */ top: 0; left: 0; width: 100%; height: auto; /* Adjust height as needed */ padding: 10px 0; /* Example padding */ background-color: #0a2540; /* Dark background */ border-bottom: none; opacity: 1; visibility: visible; z-index: 1100; /* Highest */ display: block; /* Ensure it's visible */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: none; /* Override scroll transitions if active */ } /* Ensure top bar content is centered or styled correctly */ body.mobile-menu-active .top-bar-content { justify-content: center; /* Center buttons */ /* Add flex properties if needed */ } body.mobile-menu-active .top-bar-left { display: none; /* Hide TRADER/PARTNER links */ } body.mobile-menu-active .top-bar-right .btn { margin: 0 8px; /* Space out buttons */ border: 1px solid rgba(255, 255, 255, 0.5); /* Optional border like image */ background-color: transparent; /* Make background transparent */ } body.mobile-menu-active .top-bar-right .btn-primary { background-color: #17d0cf; /* Keep primary button color */ border: none; } body.mobile-menu-active .top-bar-right .btn-secondary { color: #fff; /* Ensure login text is white */ border-color: #fff; /* White border */ } /* Adjust Main Header position */ body.mobile-menu-active .site-header { padding-top: 50px; /* Add padding to push header-main down below fixed top-bar */ /* Adjust '50px' based on the actual height of the fixed header-top-bar */ position: relative; /* Ensure it's not fixed when menu open */ background: transparent; /* Override scrolled background */ box-shadow: none; /* Override scrolled shadow */ } /* Style Header Main when menu open */ body.mobile-menu-active .header-main { position: relative; /* Position relative to site-header */ background: linear-gradient(to bottom, #e0f7ff, #f0faff); /* Keep light gradient */ z-index: 1050; /* Above menu list, below top bar */ padding: 10px 0; /* Consistent padding */ box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow below */ } /* Make sure logo and icons are visible */ body.mobile-menu-active .logo, body.mobile-menu-active .language-selector, body.mobile-menu-active .mobile-nav-toggle { color: #0a2540; /* Ensure correct color */ } /* The Mobile Navigation List Container */ body.mobile-menu-active .main-nav ul { display: flex !important; /* Override display: none */ flex-direction: column; position: fixed; top: 110px; /* Height of (fixed top-bar + header-main) - Adjust precisely */ left: 0; width: 100%; height: calc(100vh - 110px); /* Fill remaining height */ background: linear-gradient(to bottom, #f0faff, #f8fcff 80%, #fff); /* Light gradient */ padding: 25px 20px; /* Padding around the list */ overflow-y: auto; /* Allow scrolling if list is long */ z-index: 1000; /* Below header-main */ margin: 0; box-shadow: none; /* Remove desktop dropdown shadow */ border-top: none; /* Remove desktop dropdown border */ list-style: none; transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Slide-in effect */ transform: translateY(0); /* End position */ opacity: 1; } /* Initial state before menu opens (optional: for transition) */ .main-nav ul { /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */ /* transform: translateY(-20px); */ /* Start slightly up */ /* opacity: 0; */ /* pointer-events: none; */ /* Prevent interaction when hidden */ } /* Uncomment above transition styles if you want a slide/fade effect */ /* body.mobile-menu-active .main-nav ul { transform: translateY(0); opacity: 1; pointer-events: auto; } */ /* Styling for each Navigation Item Block */ body.mobile-menu-active .main-nav li:not(.mobile-prime-link-container) { margin-bottom: 12px; /* Space between blocks */ list-style: none; background-color: #fff; /* White background for the block */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 80, 130, 0.08); /* Subtle shadow */ border: 1px solid #e8f2f8; /* Light border */ } body.mobile-menu-active .main-nav li a:not(.mobile-prime-btn) { display: flex; /* Use flex to space text and icon */ justify-content: space-between; /* Push text left, icon right */ align-items: center; padding: 16px 20px; /* Padding inside the block */ color: #0a2540; /* Dark text color */ font-weight: 600; font-size: 1em; width: 100%; background: none; /* Remove default background */ text-align: left; /* Ensure text is left-aligned */ } /* Remove desktop hover effects */ body.mobile-menu-active .main-nav li a:hover { background-color: transparent; color: #0a2540; } body.mobile-menu-active .main-nav li a:hover::after { width: 0; /* Remove underline */ } /* Add Chevron Icon */ body.mobile-menu-active .main-nav li a:not(.mobile-prime-btn)::after { content: '\f054'; /* Font Awesome chevron-right */ font-family: 'Font Awesome 6 Free'; font-weight: 900; /* Solid icon */ color: #a0b0c0; /* Greyish color for chevron */ font-size: 0.8em; } /* Style the Prime Button Container and Button */ body.mobile-menu-active li.mobile-prime-link-container { margin-top: 25px; /* Space above prime button */ text-align: center; /* Center the button */ background: none; box-shadow: none; border: none; padding: 0; } body.mobile-menu-active a.mobile-prime-btn { display: inline-block; /* Allow centering */ width: auto; /* Auto width */ padding: 12px 30px; /* Adjust padding */ /* Inherits .btn and .btn-dark styles, add overrides if needed */ background: linear-gradient(to right, #17d0cf, #0a2540); /* Gradient background */ border: none; } body.mobile-menu-active a.mobile-prime-btn::after { content: none; /* Remove chevron from this button */ } /* Ensure specific elements are hidden/shown correctly */ @media (max-width: 992px) { /* Hide desktop Prime button if you added a class */ .desktop-prime-btn { display: none; } body.mobile-menu-active .language-selector span { display: none; /* Hide "ENGLISH" text in mobile menu header */ } body.mobile-menu-active .language-selector i { font-size: 1.4em; /* Make globe icon prominent */ } } /* Hide mobile prime link container on desktop */ @media (min-width: 993px) { .mobile-prime-link-container { display: none; } /* Show desktop prime button if using separate buttons */ /* .desktop-prime-btn { display: inline-block; } */ } /* --- Remove or Comment Out Previous Mobile Menu Styles --- */ /* body.mobile-menu-active { overflow: hidden; } */ /* body.mobile-menu-active .header-top-bar { ... remove fixed positioning ... } */ /* body.mobile-menu-active .site-header { padding-top: 0; } */ /* Remove forced padding */ /* body.mobile-menu-active .header-main { position: relative; z-index: 1050; ... } */ /* body.mobile-menu-active .main-nav ul { position: fixed; top: 110px; height: calc(100vh - 110px); ... } */ /* --- NEW Mobile Menu Slide-Down Styles --- */ /* Add a class to the header itself when menu is open */ .site-header { /* Keep existing transitions if any */ transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; position: relative; /* Ensure it's a positioning context */ z-index: 999; /* Below scrolled header, but above content */ } /* Scrolled state should still work, but ensure z-index is higher */ .site-header.scrolled { position: fixed; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; /* Higher than default */ } /* Adjust padding on content when header is scrolled AND fixed */ .main-content { transition: padding-top 0.4s ease; } /* Mobile Navigation List Styling (Default Hidden) */ @media (max-width: 992px) { .main-nav ul { /* Default state: Hidden using max-height for transition */ display: block; /* Needs to be block or flex for layout */ visibility: hidden; /* Hide visually and from accessibility */ max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease-in-out, padding 0.35s ease-in-out, opacity 0.2s ease-in-out, visibility 0s linear 0.35s; /* Position it absolutely below header-main OR let it flow naturally */ /* Option 1: Absolute positioning (more control) */ /* position: absolute; top: 100%; /* Position below the header-main */ /* left: 0; width: 100%; */ /* Option 2: Natural flow (simpler if structure allows) */ /* Ensure it comes directly after header-main elements in HTML if using natural flow */ /* Appearance */ background: linear-gradient(to bottom, #f0faff, #f8fcff 80%, #fff); padding: 0 20px; /* No padding when closed */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Shadow when open */ border-top: 1px solid #e0eaf1; /* Separator line */ list-style: none; margin: 0; /* Reset margin */ } /* --- BASE STYLES (Apply to all sizes unless overridden) --- */ .site-header { position: relative; z-index: 999; transition: background-color 0.4s ease, box-shadow 0.4s ease; } .header-top-bar { background-color: #fff; /* Desktop background */ padding: 8px 0; border-bottom: 1px solid #eee; transition: background-color 0.3s ease, padding 0.3s ease; } .top-bar-content { display: flex; justify-content: space-between; align-items: center; } .top-bar-left a { margin-right: 15px; color: #555; font-weight: 500;} .top-bar-right .btn { margin-left: 10px; } .header-main { background: linear-gradient(to bottom, #e0f7ff, #f0faff); padding: 15px 0; position: relative; /* Needed for nav positioning */ z-index: 998; /* Below top bar */ transition: padding 0.3s ease, background-color 0.3s ease; } .main-nav-content { display: flex; align-items: center; justify-content: space-between; } .logo { /* ... existing logo styles ... */ } .main-nav { margin-left: auto; margin-right: 25px;} /* Position desktop nav */ .main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; } .main-nav li { margin-left: 30px; } .main-nav a { /* ... existing desktop link styles ... */ } .header-main-right { display: flex; align-items: center; } .language-selector { display: flex; align-items: center; margin-right: 25px; color: #334e68; } .language-selector i { margin-right: 6px; } .desktop-prime-btn { /* Inherits .btn-dark */ } .mobile-nav-toggle { display: none; /* Hidden by default */ } /* Hamburger */ /* Utils */ .mobile-hide { display: inline-block; } /* Default state */ .desktop-hide { display: none; } /* Default state */ .mobile-only-flex { display: none; } /* Default state */ /* --- MOBILE STYLES --- */ @media (max-width: 992px) { /* --- Utility class overrides --- */ .mobile-hide, .mobile-hide-2 { display: none !important; } .desktop-hide { display: block !important; } /* Show hamburger */ .mobile-only-flex { display: flex !important; } /* Show prime button container */ /* --- Top Bar Mobile --- */ .header-top-bar { background-color: #0a2540; /* Dark background */ border-bottom: none; padding: 10px 0; } .top-bar-content { justify-content: center; /* Center buttons */ } .top-bar-right .btn { margin: 0 5px; /* Adjust spacing */ padding: 8px 15px; /* Adjust padding */ font-size: 0.85em; } /* Style LOGIN button specifically */ .top-bar-right .top-bar-login-btn { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; } .top-bar-right .top-bar-login-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: #fff; } .top-bar-right .btn-primary { border: none; /* Ensure primary has no border */ } /* --- Main Header Mobile --- */ .header-main { padding: 10px 0; /* Adjust padding */ } .main-nav-content { position: relative; /* Needed for absolute nav */ /* Space between logo and icons */ justify-content: space-between; } .main-nav { /* Nav container itself is positioned absolutely below */ /* position: absolute; */ top: 100%; /* Place below header-main */ left: 0; width: 100%; z-index: 1005; /* Above content, below header bars */ overflow: hidden; /* Clip the UL during transition */ margin: 0; /* Reset desktop margins */ } .main-nav ul { /* UL specific styles */ display: block; /* Stack vertically */ background: linear-gradient(to bottom, #f0faff, #f8fcff 80%, #fff); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); border-top: 1px solid #e0eaf1; padding: 0 20px; /* Horizontal padding always */ max-height: 0; /* Hidden initially */ opacity: 0; visibility: hidden; overflow: hidden; /* Changed from auto to hidden initially */ transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out, padding-bottom 0.4s ease-in-out, opacity 0.2s ease-in-out; } /* --- Mobile Menu Open State --- */ .site-header.menu-open .main-nav ul { max-height: 80vh; /* Allow it to expand */ opacity: 1; visibility: visible; padding-top: 25px; /* Add vertical padding when open */ padding-bottom: 25px; overflow-y: auto; /* Allow scrolling *within* menu if needed */ } /* --- Menu Item Styling (Only when open) --- */ .site-header.menu-open .main-nav li { margin: 0 0 12px 0; /* Vertical spacing, remove left margin */ } /* Reset desktop margin */ .site-header.menu-open .main-nav li:not(.mobile-prime-link-container) { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 80, 130, 0.08); border: 1px solid #e8f2f8; } .site-header.menu-open .main-nav li a:not(.mobile-prime-btn) { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; color: #0a2540; font-weight: 600; font-size: 1em; width: 100%; } .site-header.menu-open .main-nav li a:not(.mobile-prime-btn)::after { content: '\f054'; /* Chevron */ font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #a0b0c0; font-size: 0.8em; } .site-header.menu-open .main-nav li a:hover { background-color: #f8fafd; } /* Prime button inside menu */ .site-header.menu-open li.mobile-prime-link-container { margin-top: 25px; margin-bottom: 0; /* No margin below last item */ text-align: center; padding: 0; /* Remove padding */ background: none; box-shadow: none; border: none; /* Reset block styles */ /* Ensure flex is applied by mobile-only-flex */ justify-content: center; /* Center button horizontally */ } .site-header.menu-open a.mobile-prime-btn { display: inline-block; /* Allow text-align to center */ width: auto; /* Fit content */ padding: 12px 30px; background: linear-gradient(to right, #17d0cf, #0a2540); border: none; color: #fff; border-radius: 5px; } .site-header.menu-open a.mobile-prime-btn::after { content: none; } /* No chevron */ /* --- Right side icons mobile --- */ .header-main-right { margin-left: auto; /* Push to right */ } .language-selector { margin-right: 15px; } /* Space before hamburger */ .language-selector i { font-size: 1.5em; color: #0a2540; } .mobile-nav-toggle { background: none; border: none; font-size: 1.7em; color: #0a2540; padding: 0 5px; cursor: pointer; } } /* End Mobile Styles */ /* --- DESKTOP STYLES (Reset/Override Mobile) --- */ @media (min-width: 993px) { /* Utils */ .mobile-hide { display: inline-block !important; } /* Or flex depending on item */ .desktop-hide { display: none !important; } .mobile-only-flex { display: none !important; } /* Restore Top Bar */ .header-top-bar { background-color: #fff; border-bottom: 1px solid #eee; } .top-bar-content { justify-content: space-between; } .top-bar-right .top-bar-login-btn { /* Restore desktop look */ background-color: #0a2540; border: none; color: #fff; } /* Restore Main Header */ .header-main { padding: 15px 0; } .main-nav { position: static; width: auto; margin-left: auto; margin-right: 25px; } /* Reset positioning */ .main-nav ul { display: flex; position: static; background: none; box-shadow: none; border-top: none; max-height: none; opacity: 1; visibility: visible; padding: 0; overflow: visible; } .main-nav li { margin: 0 0 0 30px; background: none; box-shadow: none; border: none; } .main-nav li a { padding: 5px 0; display: inline; font-size: 0.95em; } /* Restore desktop link style */ .main-nav li a::after { content: ''; /* Restore underline effect if needed */ } } /* Scrolled State */ .site-header.scrolled { position: fixed; width: 100%; top: 0; left: 0; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1010; } .site-header.scrolled .header-top-bar { /* Hide smoothly */ height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; border: none; overflow: hidden; } .site-header.scrolled .header-main { padding: 10px 0; background: #fff; } /* Ensure content padding is adjusted when scrolled */ .main-content { transition: padding-top 0.4s ease; } .container.main-nav-content { box-sizing: border-box; width: 100%; max-width: 1296px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; padding: 0 20px; justify-content: space-between; } @media (max-width: 991.98px) { img.footer-logo{ margin:0; } .footer-container{ display: grid; grid-template-columns:1fr 1fr; margin-top: 30px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: 10px; text-align:left } } .fa-magnifying-glass::before, /* Use the more modern ::before pseudo-element */ .fa-search::before { content: ""; background-image: url('/hc/theming_assets/01JSXABHRW0C6JS04Q2FHX4WC7'); background-size: contain; /* Fit the image within the element */ background-repeat: no-repeat; background-position: center center; display: inline-block; /* Allow width/height */ width: 1em; /* Example size - match font size */ height: 1em; /* Example size - match font size */ line-height: 1em; /* Optional: Can help vertical alignment */ vertical-align: middle; /* Adjust as needed for alignment */ font-family: initial; font-weight: normal; font-style: normal; text-rendering: initial; -webkit-font-smoothing: initial; } h4.section-title { color: #333; cursor: pointer; margin: 0; padding: 0; font-size:20px; } .starprime{ display:none; } .articles_in_section { display:none; } /* Highlight HC Article Links */ .article-body a { color: #0DE3D6; }