@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Poppins:wght@300;400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');
/* ============================================================
DRIPTA — Crypto landing design system for 9Sigma
Loaded AFTER main.css + custom.css (overrides the basic theme
for public-facing pages). All landing classes are namespaced
`.d-*` so the user-area (basic classes) keeps working.
Tokens recovered from the Figma "Dripta - Crypto Website".
============================================================ */
:root {
/* surfaces */
--d-bg: #0A0A0A; /* page canvas (near-black) */
--d-bg-alt: #101010; /* alt section band */
--d-card: #161616; /* card fill */
--d-card-2: #1E1E1E; /* raised card / inputs */
--d-card-3: #242424; /* tiles inside cards */
--d-border: rgba(255,255,255,.08);
--d-border-2: rgba(255,255,255,.14);
/* accent (orange-red) */
--d-accent: #FD4C05;
--d-accent-2: #FD7943; /* light tint / hover */
--d-accent-dark: #C23D08;
--d-accent-deep: #772200;
--d-accent-soft: rgba(253,76,5,.14);
/* text */
--d-text: #FFFFFF;
--d-muted: #C4C4C4;
--d-muted-2: #878787;
/* type */
--ff-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ff-nav: 'Poppins', var(--ff-body);
--ff-accent: 'Public Sans', var(--ff-body);
/* shape */
--d-radius: 20px;
--d-radius-lg: 28px;
--d-radius-sm: 12px;
--d-pill: 999px;
/* layout */
--d-container: 1320px;
--d-gutter: 16px;
}
/* ---------- base (public pages) ---------- */
body {
background: var(--d-bg);
color: var(--d-text);
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body:not(.lightmode) { background: var(--d-bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--d-accent); }
img { max-width: 100%; height: auto; }
::selection { background: var(--d-accent); color: #fff; }
/* ---------- layout helpers ---------- */
.d-container {
width: 100%;
max-width: var(--d-container);
margin-inline: auto;
padding-inline: 24px;
}
.d-section { padding-block: 96px; position: relative; overflow: clip; }
.d-section--tight { padding-block: 64px; }
@media (max-width: 991px){ .d-section { padding-block: 64px; } }
@media (max-width: 575px){ .d-section { padding-block: 48px; } }
/* eyebrow / heading / subheading rhythm */
.d-eyebrow {
font-family: var(--ff-nav);
font-size: 14px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--d-accent);
display: inline-flex; align-items: center; gap: 8px;
}
.d-heading {
font-family: var(--ff-body); font-weight: 400;
font-size: clamp(32px, 4vw, 60px); line-height: 1.08;
letter-spacing: -.01em; color: var(--d-text); margin: 0;
}
.d-heading--outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.d-subheading { color: var(--d-muted); font-size: 18px; max-width: 620px; }
.d-text-accent { color: var(--d-accent); }
.d-text-muted { color: var(--d-muted); }
/* ---------- buttons ---------- */
.d-btn {
--_bg: var(--d-accent); --_fg:#fff; --_bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--ff-nav); font-weight: 500; font-size: 16px; line-height: 1;
padding: 16px 28px; border-radius: var(--d-pill);
background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
cursor: pointer; transition: .25s ease; white-space: nowrap;
}
.d-btn:hover { transform: translateY(-2px); color: var(--_fg); }
.d-btn--primary { --_bg: var(--d-accent); --_fg:#fff; box-shadow: 0 10px 30px -10px rgba(253,76,5,.6); }
.d-btn--primary:hover { --_bg: var(--d-accent-2); }
.d-btn--outline { --_bg: transparent; --_fg: var(--d-accent); --_bd: var(--d-accent); }
.d-btn--outline:hover { --_bg: var(--d-accent); --_fg:#fff; }
.d-btn--ghost { --_bg: var(--d-card-2); --_fg:#fff; --_bd: var(--d-border-2); }
.d-btn--ghost:hover { --_bg: var(--d-card-3); --_fg:#fff; transform: translateY(-2px); }
.d-btn--sm { padding: 11px 20px; font-size: 14px; }
.d-btn__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--d-accent);
display: inline-grid; place-items:center; color:#fff; }
/* ---------- pills / tags ---------- */
.d-pill {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ff-nav); font-size: 14px; font-weight: 500;
padding: 10px 20px; border-radius: var(--d-pill);
background: var(--d-card-2); color: #fff; border: 1px solid var(--d-border);
}
.d-pill--accent { background: var(--d-accent); border-color: var(--d-accent); color:#fff; }
.d-pill--outline { background: transparent; border-color: var(--d-border-2); color:#fff; }
/* ---------- cards ---------- */
.d-card {
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
padding: 28px;
position: relative; overflow: hidden;
}
.d-card--flat { border-radius: var(--d-radius); }
.d-icon-badge {
width: 54px; height: 54px; border-radius: 50%;
display: inline-grid; place-items: center;
background: var(--d-accent); color: #fff; font-size: 20px;
box-shadow: 0 8px 24px -8px rgba(253,76,5,.7);
}
/* ---------- decorative glow ---------- */
.d-glow {
position: absolute; z-index: 0; pointer-events: none;
filter: blur(8px); opacity: .9;
}
.d-glow--radial {
background: radial-gradient(60% 60% at 50% 50%,
rgba(253,76,5,.55) 0%, rgba(194,61,8,.28) 38%, rgba(119,34,0,0) 72%);
filter: blur(40px);
}
.d-noise { mix-blend-mode: screen; opacity:.5; }
/* =========================================================
HEADER / NAV (floating dark bar, transparent over hero)
========================================================= */
.header, .header__bottom { background: transparent; }
.d-header {
position: absolute; inset: 0 0 auto 0; z-index: 50;
padding-top: 28px;
}
.d-header.is-stuck {
position: fixed; padding-block: 12px; padding-top: 12px;
background: rgba(10,10,10,.82);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--d-border);
animation: dStickyDown .35s ease;
}
@keyframes dStickyDown { from { transform: translateY(-100%);} to { transform: translateY(0);} }
.d-header--solid {
position: relative; padding: 18px 0; background: var(--d-bg);
border-bottom: 1px solid var(--d-border);
}
.d-nav { display: flex; align-items: center; gap: 24px; }
.d-nav__logo img { max-height: 42px; width: auto; }
.d-nav__menu {
display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.d-nav__menu > li > a {
font-family: var(--ff-nav); font-size: 14px; font-weight: 400; color: #fff;
padding: 10px 16px; border-radius: var(--d-pill); display: inline-block; transition: .2s;
}
.d-nav__menu > li > a:hover,
.d-nav__menu > li.active > a { background: var(--d-card-2); color: #fff; }
.d-nav__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.d-search {
display: inline-flex; align-items: center; gap: 10px;
background: var(--d-card-2); border: 1px solid var(--d-border);
border-radius: var(--d-pill); padding: 12px 22px; min-width: 220px; color: var(--d-muted-2);
}
.d-search i { color: var(--d-accent); }
.d-search input { background: transparent; border: 0; outline: 0; color: #fff; font-size: 14px; width: 100%; }
.d-nav__icon {
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--d-border-2);
display: inline-grid; place-items: center; color: #fff;
}
.menu-toggle, .navbar-toggler { border: 1px solid var(--d-border-2); }
@media (max-width: 1199px){
.d-search { display: none; }
.d-nav__menu { flex-direction: column; align-items: flex-start; width:100%; }
.d-header { position: absolute; }
}
/* =========================================================
FOOTER (newsletter card + link columns + contact)
========================================================= */
.footer, .d-footer { background: var(--d-bg); color: var(--d-muted); position: relative; }
.d-footer { padding-top: 90px; border-top: 1px solid var(--d-border); }
.d-footer__cta {
background: linear-gradient(135deg, var(--d-accent-deep), #3a1000);
border-radius: var(--d-radius-lg); padding: 44px;
}
.d-footer__cta h3 { font-size: 34px; color:#fff; margin:0 0 24px; font-weight:400; }
.d-footer__news {
display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.4);
padding-bottom:12px;
}
.d-footer__news input { flex:1; background:transparent; border:0; outline:0; color:#fff; font-size:15px; }
.d-footer__news button { background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; }
.d-footer__title { font-family: var(--ff-nav); color:#fff; font-weight:600; font-size:13px;
letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.d-footer__links { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.d-footer__links a { color: var(--d-muted); font-size:15px; }
.d-footer__links a:hover { color: var(--d-accent); }
.d-footer__bottom {
margin-top: 56px; padding: 24px 0; border-top: 1px solid var(--d-border);
display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
font-family: var(--ff-accent); font-size: 14px; color: var(--d-muted-2);
}
.d-social { display:flex; gap:12px; }
.d-social a {
width:40px;height:40px;border-radius:50%;border:1px solid var(--d-border-2);
display:grid;place-items:center;color:#fff;
}
.d-social a:hover { background: var(--d-accent); border-color: var(--d-accent); }
/* =========================================================
SHARED landing utilities used by section blades
========================================================= */
.d-grid { display:grid; gap: 24px; }
.d-grid--3 { grid-template-columns: repeat(3, 1fr); }
.d-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 991px){ .d-grid--3 { grid-template-columns: 1fr; } .d-grid--2 { grid-template-columns: 1fr; } }
.d-divider { height:1px; background: var(--d-border); border:0; }
/* preloader/scroll-to-top: keep dark */
.preloader { background: var(--d-bg) !important; }
.scroll-to-top .scroll-icon { background: var(--d-accent); color:#fff; }
.page-scroll-bar { color: var(--d-accent); }
.page-scroll-bar::-webkit-progress-value { background: var(--d-accent); }
/* ============================================================
SECTION STYLES (generated per-section, namespaced .d-sec-*)
============================================================ */
/* ===== section: banner ===== */
/* =========================================================
BANNER / HERO (.d-sec-banner) — Dripta
========================================================= */
.d-sec-banner{
position: relative;
isolation: isolate;
text-align: center;
background: var(--d-bg);
padding-top: clamp(150px, 17vh, 210px);
padding-bottom: clamp(72px, 9vw, 110px);
}
/* optional background image (kept subtle behind the near-black canvas) */
.d-sec-banner__bg{
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
opacity: .22; pointer-events: none;
}
/* large orange stadium glow (Rectangle 8 / #772200, heavily blurred) */
.d-sec-banner__glow{
position: absolute; z-index: -1;
top: clamp(-30px, -2vw, 0px); left: 50%;
width: min(1530px, 104%); height: clamp(160px, 16vw, 220px);
transform: translateX(-50%);
background: var(--d-accent-deep);
border-radius: 400px;
filter: blur(140px);
opacity: .92; pointer-events: none;
}
/* brighter radial core behind the headline */
.d-sec-banner__glow-core{
z-index: -1;
top: clamp(-40px, -2vw, -10px); left: 50%;
width: min(900px, 82%); height: clamp(220px, 22vw, 320px);
transform: translateX(-50%);
}
/* thin angular orange line accents on the far edges */
.d-sec-banner__accent{
position: absolute; z-index: -1; top: clamp(80px, 10vw, 150px);
line-height: 0; pointer-events: none; opacity: .9;
filter: drop-shadow(0 0 6px rgba(253,76,5,.45));
}
.d-sec-banner__accent svg{ display: block; width: 100%; height: 100%; }
.d-sec-banner__accent--left{ left: clamp(8px, 3vw, 60px); width: clamp(70px, 7vw, 110px); height: clamp(220px, 38vw, 460px); }
.d-sec-banner__accent--right{ right: clamp(8px, 3vw, 60px); width: clamp(80px, 8vw, 130px); height: clamp(260px, 44vw, 540px); }
/* centred content column */
.d-sec-banner__content{ position: relative; z-index: 1; max-width: 880px; margin-inline: auto; }
.d-sec-banner__eyebrow{ margin-bottom: 18px; }
.d-sec-banner__title{
font-family: var(--ff-body); font-weight: 400; color: var(--d-text);
font-size: clamp(34px, 5.6vw, 70px); line-height: 1.33; letter-spacing: 0;
margin: 0 auto; max-width: 880px;
}
.d-sec-banner__desc{
font-family: var(--ff-body); font-weight: 400; color: #D9D9D9;
font-size: clamp(16px, 1.4vw, 20px); line-height: 1.33;
max-width: 725px; margin: 20px auto 0;
}
.d-sec-banner__btn{
margin-top: clamp(26px, 3vw, 34px);
font-family: var(--ff-body); font-weight: 500; font-size: 16px;
text-transform: uppercase; letter-spacing: .04em;
padding: 9px 48px; border-radius: 10px; min-height: 40px;
}
/* feature cards row (#1E1E1E rounded cards) */
.d-sec-banner__cards{
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; justify-content: center;
gap: 15px; margin-top: clamp(48px, 6vw, 70px);
}
.d-sec-banner__card{
flex: 0 0 195px; max-width: 195px; min-height: 157px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 20px; padding: 22px 18px;
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: 16px;
transition: .25s ease;
}
.d-sec-banner__card:hover{ background: var(--d-card-3); border-color: var(--d-border-2); transform: translateY(-4px); }
.d-sec-banner__card-icon{
width: 58px; height: 52px; border-radius: 6px;
background: var(--d-bg-alt);
display: inline-grid; place-items: center; color: #fff;
}
.d-sec-banner__card-icon i{ font-size: 26px; line-height: 1; color: #fff; }
.d-sec-banner__card-icon svg{ width: 25px; height: 25px; }
.d-sec-banner__card-title{
font-family: var(--ff-body); font-weight: 400; font-size: 20px;
line-height: 1.33; color: #fff; text-align: center; margin: 0;
}
/* responsive */
@media (max-width: 991px){
.d-sec-banner__title{ line-height: 1.2; }
}
@media (max-width: 767px){
.d-sec-banner__accent{ display: none; }
}
@media (max-width: 575px){
.d-sec-banner__card{ flex: 1 1 140px; max-width: none; min-height: 134px; gap: 16px; }
.d-sec-banner__card-title{ font-size: 17px; }
}
/* ===== section: about ===== */
/* ============================================================
ABOUT US (.d-sec-about) — Dripta crypto rebuild
============================================================ */
.d-sec-about { position: relative; }
.d-sec-about .d-container { position: relative; z-index: 1; }
.d-sec-about__glow { width: 540px; height: 420px; left: 4%; top: 40%; }
/* ---------- head: heading left, pills right ---------- */
.d-sec-about__head {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 40px; flex-wrap: wrap;
}
.d-sec-about__head-left { flex: 1 1 480px; min-width: 0; }
.d-sec-about__eyebrow {
display: inline-block; margin-bottom: 26px;
font: 400 16px/1.33 var(--ff-body); color: #fff;
padding: 9px 28px; border: 1px solid transparent; border-radius: 10px;
background:
linear-gradient(rgba(253,76,5,.05), rgba(253,76,5,.05)) padding-box,
linear-gradient(90deg, rgba(16,16,16,.2) 0%, rgba(253,76,6,.52) 52%, rgba(16,16,16,.85) 100%) border-box;
}
.d-sec-about__title {
margin: 0; font-weight: 400; letter-spacing: 0;
font-size: clamp(34px, 5vw, 60px); line-height: 1.33;
max-width: 460px;
color: rgba(255,255,255,.20);
-webkit-text-stroke: 1px rgba(255,255,255,.5);
}
.d-sec-about__intro { margin-top: 18px; }
.d-sec-about__subheading { margin: 0 0 8px; font: 500 18px/1.5 var(--ff-body); color: #fff; }
.d-sec-about__desc { margin: 0; }
/* ---------- right-hand pills / CTA ---------- */
.d-sec-about__pills { flex: 0 0 auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.d-sec-about__pill {
display: inline-flex; align-items: center; justify-content: center;
font: 400 16px/1.33 var(--ff-body); padding: 9px 28px; border-radius: 24px;
white-space: nowrap; border: 1px solid transparent; transition: .25s ease; cursor: pointer;
}
.d-sec-about__pill--outline {
color: #fff; border: 2px solid transparent;
background:
linear-gradient(var(--d-bg), var(--d-bg)) padding-box,
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(253,76,6,.53) 53%, rgba(255,255,255,0) 100%) border-box;
}
.d-sec-about__pill--outline:hover { color: var(--d-accent); }
.d-sec-about__pill--accent { color: #fff; background: var(--d-accent); }
.d-sec-about__pill--accent:hover { background: var(--d-accent-2); color: #fff; transform: translateY(-2px); }
/* ---------- cards grid ---------- */
.d-sec-about__grid { margin-top: 56px; }
.d-sec-about__item { display: flex; flex-direction: column; }
.d-sec-about__card {
position: relative; overflow: hidden; min-height: 362px;
border-radius: 30px; background: var(--d-bg); border: 1px solid var(--d-accent-deep);
}
/* card meta (title + description below card) */
.d-sec-about__meta { margin-top: 22px; }
.d-sec-about__card-title {
margin: 0; font-weight: 400; line-height: 1.33;
font-size: clamp(20px, 2.2vw, 26px); color: var(--d-accent-2);
}
.d-sec-about__card-desc {
margin: 12px 0 0; font-weight: 400; line-height: 1.33;
font-size: clamp(16px, 1.6vw, 20px); color: var(--d-muted); max-width: 380px;
}
/* ---------- shared icon badge (ring + orange core) ---------- */
.d-sec-about__badge {
width: 54px; height: 54px; border-radius: 50%;
background: rgba(255,255,255,.16); display: grid; place-items: center;
position: relative; z-index: 3;
}
.d-sec-about__badge-inner {
width: 40px; height: 40px; border-radius: 50%; background: var(--d-accent);
display: grid; place-items: center; color: #fff; font-size: 18px; line-height: 1;
}
.d-sec-about__badge-inner i, .d-sec-about__badge-inner svg { display: block; }
.d-sec-about__badge--glow::before {
content: ""; position: absolute; inset: -9px; border-radius: 50%;
background: var(--d-accent); filter: blur(16px); opacity: .65; z-index: -1;
}
/* ---------- card 1: stacked preview ---------- */
.d-sec-about__card--0 .d-sec-about__card-glow { width: 62%; height: 150px; left: 19%; top: -34px; }
.d-sec-about__preview { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; padding: 24px; }
.d-sec-about__stack { position: relative; width: 179px; height: 210px; }
.d-sec-about__stack-card { position: absolute; top: 6px; width: 170px; height: 200px; background: #191919; border-radius: 10px; }
.d-sec-about__stack-card--a { left: -26px; transform: rotate(-7deg); }
.d-sec-about__stack-card--b { right: -26px; transform: rotate(7deg); }
.d-sec-about__stack-front {
position: relative; z-index: 2; width: 179px; height: 210px; background: #101010;
border-radius: 10px; padding: 14px; display: flex; flex-direction: column;
box-shadow: 0 18px 40px -18px rgba(0,0,0,.85);
}
.d-sec-about__shot { width: 100%; height: 125px; border-radius: 6px; overflow: hidden; background: var(--d-muted); }
.d-sec-about__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-sec-about__shot-meta { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.d-sec-about__shot-title { font: 400 20px/1.33 var(--ff-body); color: #fff; }
.d-sec-about__shot-sub { font: 400 16px/1.33 var(--ff-body); color: var(--d-muted); }
.d-sec-about__card--0 .d-sec-about__badge {
position: absolute; left: 50%; top: 77%; transform: translate(-50%, -50%);
box-shadow: 0 4px 4px rgba(0,0,0,.25);
}
/* ---------- card 2: area chart + marker + tooltip ---------- */
.d-sec-about__chart {
position: absolute; left: 0; right: 0; bottom: 0; height: 68%; z-index: 1;
background-repeat: no-repeat; background-position: center bottom; background-size: 100% 100%;
border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;
}
.d-sec-about__chart-line {
position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 1;
border-left: 2px dashed var(--d-accent); transform: translateX(-50%); opacity: .9;
}
.d-sec-about__chart-dot {
position: absolute; left: 50%; top: 43%; width: 18px; height: 18px; z-index: 2;
border-radius: 50%; background: var(--d-accent); transform: translate(-50%, -50%);
box-shadow: 0 0 0 6px rgba(253,76,5,.16);
}
.d-sec-about__tooltip {
position: absolute; top: 30%; left: 56%; z-index: 2; display: flex; gap: 11px;
align-items: stretch; background: var(--d-bg-alt); border: 1px solid var(--d-accent-deep);
border-radius: 10px; padding: 6px 10px;
}
.d-sec-about__tooltip-bar { width: 2px; border-radius: 6px; background: var(--d-accent); }
.d-sec-about__tooltip-body { display: flex; flex-direction: column; gap: 4px; }
.d-sec-about__tooltip-label { font: 400 14px/1.33 var(--ff-body); color: var(--d-muted); }
.d-sec-about__tooltip-val { font: 400 14px/1.33 var(--ff-body); color: #fff; white-space: nowrap; }
/* ---------- card 3: dashboard panels ---------- */
.d-sec-about__panels {
position: relative; z-index: 1; height: 100%; display: flex; gap: 18px;
align-items: center; justify-content: center; padding: 24px;
}
.d-sec-about__panel {
position: relative; flex: 1; max-width: 192px; height: 229px;
background: var(--d-bg-alt); border: 1px solid rgba(217,217,217,.5);
border-radius: 20px; padding: 16px;
}
.d-sec-about__panel .d-sec-about__badge { position: absolute; top: -27px; left: 50%; transform: translateX(-50%); }
.d-sec-about__panel-bar { display: block; width: 64%; height: 10px; border-radius: 12px; background: #191919; margin: 6px 0 18px; }
.d-sec-about__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.d-sec-about__tiles span { height: 76px; border-radius: 5px; background: #191919; }
.d-sec-about__rows { display: flex; flex-direction: column; gap: 9px; }
.d-sec-about__rows span { height: 42px; border-radius: 10px; background: #191919; }
/* ---------- responsive ---------- */
@media (max-width: 991px) {
.d-sec-about__head { align-items: flex-start; }
.d-sec-about__title { max-width: none; }
.d-sec-about__grid { margin-top: 40px; }
}
@media (max-width: 575px) {
.d-sec-about__card { min-height: 320px; }
.d-sec-about__eyebrow, .d-sec-about__pill { padding: 9px 22px; font-size: 15px; }
.d-sec-about__panels { padding: 16px; gap: 12px; }
.d-sec-about__card-desc { max-width: none; }
}
/* ===== section: overview ===== */
/* =========================================================
SECTION: OVERVIEW (Media / "Live Support" feature points)
========================================================= */
.d-sec-overview { position: relative; }
.d-sec-overview .d-container { position: relative; z-index: 1; }
/* decorative orange glow, faint, centred behind the media panel */
.d-sec-overview__glow {
width: 720px; height: 420px;
left: 50%; top: 52%;
transform: translate(-50%, -50%);
opacity: .6;
}
/* heading block */
.d-sec-overview__head {
max-width: 720px;
margin: 0 0 clamp(40px, 6vw, 72px);
}
.d-sec-overview__head .d-eyebrow { margin-bottom: 16px; }
.d-sec-overview__head .d-heading { margin: 0; }
/* faint labelled feature points (inset narrower than the media panel) */
.d-sec-overview__label-group {
max-width: 1180px;
margin-inline: auto;
}
.d-sec-overview__row + .d-sec-overview__row { margin-top: clamp(28px, 3vw, 40px); }
.d-sec-overview__label {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
}
.d-sec-overview__label-main {
display: inline-flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.d-sec-overview__label-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: var(--d-accent);
}
.d-sec-overview__label-icon:empty { display: none; }
.d-sec-overview__label-icon img,
.d-sec-overview__label-icon svg { width: 22px; height: 22px; object-fit: contain; }
.d-sec-overview__label-title {
font-family: var(--ff-body);
font-weight: 400;
font-size: 24px;
line-height: 1.33;
letter-spacing: 0;
color: var(--d-muted);
}
.d-sec-overview__label-text {
margin: 0;
max-width: 420px;
text-align: right;
font-family: var(--ff-body);
font-size: 14px;
line-height: 1.5;
color: var(--d-muted-2);
}
.d-sec-overview__label-text:empty { display: none; }
.d-sec-overview__div { margin: 0; }
/* large media / video poster panel */
.d-sec-overview__media {
position: relative;
width: 100%;
aspect-ratio: 1587 / 630;
margin-block: clamp(40px, 6vw, 64px);
border-radius: 24px;
border: 1px solid var(--d-border);
background:
radial-gradient(80% 120% at 50% 50%, rgba(253,76,5,.10), transparent 60%),
linear-gradient(180deg, var(--d-card-2), var(--d-card));
display: grid;
place-items: center;
overflow: hidden;
}
.d-sec-overview__poster {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
opacity: .85;
}
/* the play button must sit above the poster */
.d-sec-overview__play { position: relative; z-index: 2; }
/* ---- video lightbox ---- */
.d-video-modal__content {
position: relative;
background: #0A0A0A;
border: 1px solid var(--d-border-2);
border-radius: 20px;
overflow: hidden;
}
.d-video-modal__video { display: block; width: 100%; height: auto; background: #000; }
.d-video-modal__close {
position: absolute; top: 12px; right: 12px; z-index: 3;
padding: 10px; border-radius: 50%;
background-color: rgba(10,10,10,.7);
opacity: .9;
}
.d-video-modal__close:hover { opacity: 1; background-color: var(--d-accent); }
.d-sec-overview__media::before {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 420px; height: 420px;
max-width: 70%;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(253,76,5,.18), transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: 0;
}
.d-sec-overview__play {
position: relative;
z-index: 1;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
line-height: 0;
transition: transform .3s ease;
}
.d-sec-overview__play img {
width: clamp(80px, 9vw, 136px);
height: auto;
display: block;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}
.d-sec-overview__play:hover { transform: scale(1.06); }
.d-sec-overview__play:focus-visible {
outline: 2px solid var(--d-accent);
outline-offset: 8px;
border-radius: 50%;
}
/* responsive */
@media (max-width: 991px) {
.d-sec-overview__media { aspect-ratio: 16 / 9; border-radius: 20px; }
.d-sec-overview__label-text { max-width: 320px; }
}
@media (max-width: 575px) {
.d-sec-overview__media { aspect-ratio: 4 / 3; }
.d-sec-overview__label {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.d-sec-overview__label-text { text-align: left; max-width: 100%; }
.d-sec-overview__label-title { font-size: 20px; }
}
/* ===== section: how_it_work ===== */
/* =========================================================
HOW IT WORK (.d-sec-works) — Figma "Works" / Discover the Future
========================================================= */
.d-sec-works { background: var(--d-bg); }
.d-sec-works__grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
align-items: start;
gap: 64px;
position: relative;
z-index: 1;
}
/* big soft orange glow behind (Figma #772200, blur 200) */
.d-sec-works__glow {
width: min(1180px, 94%);
height: 360px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--d-pill);
opacity: .85;
z-index: 0;
}
/* ---------- left: app / phone mockup placeholder ---------- */
.d-sec-works__visual {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 560px;
}
.d-sec-works__visual::before { /* dark blurred backing blob (Figma #101010, blur 100) */
content: "";
position: absolute;
left: -10%; bottom: -4%;
width: 120%; height: 60%;
background: var(--d-bg-alt);
border-radius: var(--d-radius-lg);
filter: blur(64px);
opacity: .9;
z-index: 0;
}
.d-sec-works__phone {
position: relative;
z-index: 1;
width: min(420px, 84%);
aspect-ratio: 467 / 726;
padding: 14px;
border-radius: 46px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
border: 1px solid var(--d-border-2);
box-shadow: 0 44px 96px -42px rgba(0,0,0,.85);
}
.d-sec-works__phone-screen {
position: relative;
width: 100%; height: 100%;
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(130% 78% at 50% 0%, rgba(253,76,5,.24), transparent 58%),
linear-gradient(180deg, var(--d-muted) 0%, #9c9c9c 100%);
}
.d-sec-works__phone-shot {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
}
.d-sec-works__phone-screen::before { /* notch — must sit above the screenshot */
content: "";
z-index: 2;
position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
width: 118px; height: 24px;
border-radius: var(--d-pill);
background: rgba(0,0,0,.55);
}
/* ---------- right: heading + accordion ---------- */
.d-sec-works__content { position: relative; z-index: 1; }
.d-sec-works__kicker {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--ff-body);
font-size: 18px; font-weight: 400; line-height: 1.32;
color: var(--d-muted);
margin: 0 0 18px;
}
.d-sec-works__kicker svg { width: 22px; height: 22px; flex: none; }
.d-sec-works__title {
font-size: clamp(34px, 4.8vw, 70px);
line-height: 1.24;
letter-spacing: 0;
max-width: 620px;
margin: 0 0 40px;
}
.d-sec-works__accordion { display: grid; gap: 20px; max-width: 530px; }
.d-sec-works__item {
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
overflow: hidden;
transition: border-color .25s ease;
}
.d-sec-works__item:hover { border-color: var(--d-border-2); }
.d-sec-works__head {
display: flex; align-items: center; gap: 16px;
width: 100%;
padding: 34px 32px;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
color: var(--d-text);
}
.d-sec-works__head[aria-expanded="true"] { padding-bottom: 14px; }
.d-sec-works__icon {
flex: none;
width: 40px; height: 40px;
border-radius: 10px;
overflow: hidden;
display: inline-grid; place-items: center;
background: var(--d-card-3);
border: 1px solid var(--d-border);
}
.d-sec-works__icon img { width: 100%; height: 100%; object-fit: cover; }
.d-sec-works__name {
flex: 1 1 auto;
min-width: 0;
font-family: var(--ff-body);
font-weight: 400;
font-size: clamp(20px, 2.1vw, 30px);
line-height: 1.3;
color: var(--d-text);
}
.d-sec-works__toggle {
flex: none;
position: relative;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--d-border-2);
transition: background .25s ease, border-color .25s ease;
}
.d-sec-works__toggle::before,
.d-sec-works__toggle::after {
content: "";
position: absolute; top: 50%; left: 50%;
background: var(--d-text);
transform: translate(-50%, -50%);
}
.d-sec-works__toggle::before { width: 14px; height: 2px; }
.d-sec-works__toggle::after { width: 2px; height: 14px; transition: opacity .2s ease, transform .25s ease; }
.d-sec-works__head[aria-expanded="true"] .d-sec-works__toggle {
background: var(--d-accent);
border-color: var(--d-accent);
}
.d-sec-works__head[aria-expanded="true"] .d-sec-works__toggle::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.d-sec-works__body { padding: 0 32px 30px 88px; }
.d-sec-works__desc {
margin: 0;
font-family: var(--ff-body);
font-size: 18px; font-weight: 400; line-height: 1.46;
color: var(--d-muted);
max-width: 380px;
}
.d-sec-works__more {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 18px;
font-family: var(--ff-body);
font-size: 16px; font-weight: 500;
color: var(--d-text);
}
.d-sec-works__more:hover { color: var(--d-accent); }
.d-sec-works__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.d-sec-works__more:hover svg { transform: translateX(4px); }
/* ---------- responsive ---------- */
@media (max-width: 991px){
.d-sec-works__grid { grid-template-columns: 1fr; gap: 40px; }
.d-sec-works__visual { order: -1; min-height: auto; }
.d-sec-works__phone { width: min(360px, 72%); }
.d-sec-works__title { margin-bottom: 30px; }
.d-sec-works__accordion { max-width: none; }
}
@media (max-width: 575px){
.d-sec-works__head { padding: 22px 20px; gap: 12px; }
.d-sec-works__head[aria-expanded="true"] { padding-bottom: 10px; }
.d-sec-works__body { padding: 0 20px 22px 64px; }
.d-sec-works__name { font-size: 20px; }
.d-sec-works__toggle { width: 36px; height: 36px; }
.d-sec-works__desc { font-size: 16px; }
.d-sec-works__kicker { font-size: 16px; }
.d-sec-works__phone { width: min(280px, 76%); }
}
/* ===== section: why_choose_us ===== */
/* ===== why_choose_us :: Markets / feature showcase ===== */
.d-sec-markets { position: relative; background: var(--d-bg); }
.d-sec-markets__bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
opacity: .10; pointer-events: none;
-webkit-mask-image: radial-gradient(120% 85% at 72% 38%, #000 0%, transparent 75%);
mask-image: radial-gradient(120% 85% at 72% 38%, #000 0%, transparent 75%);
}
.d-sec-markets > .d-container { position: relative; z-index: 1; }
.d-sec-markets__glow {
width: 620px; height: 620px; right: -160px; top: -120px; border-radius: 50%;
}
/* ---- showcase grid ---- */
.d-sec-markets__showcase {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
gap: 64px; align-items: center;
}
/* ---- left intro ---- */
.d-sec-markets__intro { display: flex; flex-direction: column; align-items: flex-start; }
.d-sec-markets__tag {
font-family: var(--ff-body); font-size: 16px; font-weight: 400;
padding: 12px 23px; border-radius: 24px;
border-color: var(--d-border-2); color: var(--d-text);
}
.d-sec-markets__title {
margin: 26px 0 0; font-weight: 300;
font-size: clamp(32px, 3.6vw, 55px); line-height: 1.18;
letter-spacing: 0; max-width: 460px;
}
/* ---- feature chips ---- */
.d-sec-markets__chips { margin-top: 38px; width: 100%; display: flex; flex-direction: column; gap: 16px; }
.d-sec-markets__chip {
display: flex; align-items: center; gap: 16px;
padding: 16px 18px; border-radius: var(--d-radius-sm);
background: var(--d-card); border: 1px solid var(--d-border);
transition: .25s ease;
}
.d-sec-markets__chip:hover { border-color: var(--d-border-2); transform: translateY(-2px); }
.d-sec-markets__chip-icon {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
display: inline-grid; place-items: center; line-height: 1;
background: var(--d-accent-soft); color: var(--d-accent); font-size: 20px;
}
.d-sec-markets__chip-icon i,
.d-sec-markets__chip-icon svg { font-size: 20px; line-height: 1; }
.d-sec-markets__chip-icon img { width: 22px; height: 22px; object-fit: contain; }
.d-sec-markets__chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-sec-markets__chip-title {
font-family: var(--ff-nav); font-weight: 500; font-size: 16px; line-height: 1.3; color: var(--d-text);
}
.d-sec-markets__chip-text {
font-family: var(--ff-body); font-size: 13.5px; line-height: 1.45; color: var(--d-muted-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ---- right visual : dashboard mock ---- */
.d-sec-markets__visual { position: relative; }
.d-sec-markets__mock {
position: relative; width: 100%; aspect-ratio: 634 / 385;
background: #0A0A0A; border: 1px solid var(--d-border-2); border-radius: 30px;
padding: clamp(34px, 4.4%, 52px) clamp(16px, 3.4%, 27px) clamp(14px, 2.6%, 21px);
box-shadow: 0 40px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
.d-sec-markets__dots {
position: absolute; top: 26px; right: 28px;
display: inline-flex; align-items: center; gap: 6px;
}
.d-sec-markets__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(120,120,120,.5); display: block; }
.d-sec-markets__dots i:last-child { background: #D9D9D9; }
.d-sec-markets__shot {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top left;
border-radius: 20px;
}
/* ---- highlight (Innovate Boldly) card ---- */
.d-sec-markets__highlight {
position: absolute; left: 0; bottom: 0; z-index: 2;
transform: translate(-14%, 6%);
width: clamp(240px, 42%, 290px);
background: var(--d-card); border: 1px solid var(--d-border-2); border-radius: 20px;
padding: 22px;
box-shadow: 0 30px 60px -25px rgba(0,0,0,.85);
}
.d-sec-markets__highlight-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 14px; }
.d-sec-markets__highlight-icon img { width: 20px; height: 20px; object-fit: contain; }
.d-sec-markets__highlight-title {
margin: 0; font-family: var(--ff-body); font-weight: 400; font-size: 24px; line-height: 1.33; color: var(--d-text);
}
.d-sec-markets__highlight-text {
margin: 8px 0 0; font-family: var(--ff-body); font-size: 16px; line-height: 1.33;
color: var(--d-muted-2); max-width: 220px;
}
.d-sec-markets__cta {
margin-top: 22px; width: 100%; height: 40px; padding: 9px 20px;
border-radius: 24px; font-family: var(--ff-body); font-weight: 400; font-size: 16px;
box-shadow: none;
}
.d-sec-markets__cta:hover { box-shadow: 0 10px 26px -10px rgba(253,76,5,.6); }
/* ---- logo cloud ---- */
.d-sec-markets__logos {
margin-top: 96px; padding-top: 8px;
display: flex; align-items: center; justify-content: space-between;
gap: 40px; flex-wrap: wrap;
list-style: none; margin-bottom: 0; padding-left: 0;
}
/* asset-class badge (replaced the partner wordmark ![]()
s) */
.d-sec-markets__market {
display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
color: #fff; opacity: .45;
transition: opacity .25s ease, color .25s ease;
}
.d-sec-markets__market:hover { opacity: 1; color: var(--d-accent); }
.d-sec-markets__market-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.d-sec-markets__market-label {
font-family: var(--ff-nav); font-weight: 600; font-size: 20px;
letter-spacing: .01em; line-height: 1; white-space: nowrap;
}
/* ---- responsive ---- */
@media (max-width: 991px) {
.d-sec-markets__showcase { grid-template-columns: 1fr; gap: 80px; }
.d-sec-markets__title { max-width: none; }
.d-sec-markets__highlight { transform: translate(0, 16%); left: 16px; width: clamp(220px, 58%, 280px); }
.d-sec-markets__logos { margin-top: 72px; justify-content: center; gap: 36px; }
}
@media (max-width: 575px) {
.d-sec-markets__showcase { gap: 64px; }
.d-sec-markets__mock { border-radius: 22px; aspect-ratio: 16 / 11; }
.d-sec-markets__highlight { position: static; transform: none; width: 100%; margin-top: -36px; }
.d-sec-markets__logos { gap: 28px 24px; }
.d-sec-markets__market-label { font-size: 17px; }
.d-sec-markets__market-icon { width: 24px; height: 24px; }
}
/* ===== section: cta ===== */
/* =========================================================
SECTION: CTA (bold centred statement band)
========================================================= */
.d-sec-cta { text-align: center; }
/* optional 1920x1080 background image (dark overlay applied inline) */
.d-sec-cta--bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* soft orange radial glow centred behind the statement */
.d-sec-cta__glow {
width: min(900px, 92%);
height: 520px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: .8;
}
.d-sec-cta__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
/* Roboto 400, ~48px, lh 1.33, centred — per Figma 'Crypto Description' node */
.d-sec-cta__title {
margin: 0;
font-family: var(--ff-body);
font-weight: 400;
font-size: clamp(26px, 3.4vw, 48px);
line-height: 1.33;
letter-spacing: 0;
color: var(--d-text);
text-wrap: balance;
}
.d-sec-cta__title .d-text-accent { color: var(--d-accent); }
.d-sec-cta__actions { display: flex; justify-content: center; }
/* primary pill with white dot + arrow (Figma button language) */
.d-sec-cta__btn {
padding: 12px 12px 12px 28px;
gap: 12px;
}
.d-sec-cta__btn-label { line-height: 1; }
.d-sec-cta__btn .d-btn__dot {
background: #fff;
color: #101010;
font-size: 16px;
}
@media (max-width: 991px){
.d-sec-cta__inner { gap: 32px; max-width: 760px; }
.d-sec-cta__glow { height: 420px; }
}
@media (max-width: 575px){
.d-sec-cta__inner { gap: 24px; }
.d-sec-cta__btn { padding: 10px 10px 10px 22px; }
}
/* ===== section: subscribe ===== */
/* =========================================================
SECTION: subscribe (Dripta deep-maroon newsletter band)
========================================================= */
.d-sec-subscribe__band {
position: relative;
overflow: hidden;
border: 1px solid var(--d-border-2);
border-radius: var(--d-radius-lg);
background:
radial-gradient(120% 140% at 100% 0%, rgba(253,76,5,.22) 0%, rgba(253,76,5,0) 55%),
linear-gradient(135deg, var(--d-accent-deep) 0%, #3a1000 60%, #1b0a02 100%);
padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px);
}
.d-sec-subscribe__glow {
width: 520px;
height: 520px;
right: -160px;
top: -200px;
opacity: .65;
}
.d-sec-subscribe__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: clamp(28px, 4vw, 56px);
}
.d-sec-subscribe__copy {
max-width: 560px;
}
.d-sec-subscribe__eyebrow {
color: var(--d-accent-2);
margin-bottom: 14px;
}
.d-sec-subscribe__heading {
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.12;
color: #fff;
margin: 0;
}
.d-sec-subscribe__form {
margin: 0;
width: 100%;
}
.d-sec-subscribe__field {
display: flex;
align-items: center;
gap: 14px;
padding: 0 0 16px;
border-bottom: 1px solid rgba(255,255,255,.45);
transition: border-color .25s ease;
}
.d-sec-subscribe__field:focus-within {
border-bottom-color: var(--d-accent-2);
}
.d-sec-subscribe__field-icon {
flex: none;
font-size: 22px;
color: rgba(255,255,255,.72);
}
.d-sec-subscribe__field .d-sec-subscribe__input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
background: transparent;
border: 0;
outline: 0;
box-shadow: none;
color: #fff;
font-family: var(--ff-body);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
padding: 0;
height: auto;
}
.d-sec-subscribe__field .d-sec-subscribe__input::placeholder {
color: rgba(255,255,255,.58);
opacity: 1;
}
.d-sec-subscribe__field .d-sec-subscribe__input:-webkit-autofill {
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 0s;
}
.d-sec-subscribe__submit {
flex: none;
width: 52px;
height: 52px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: var(--d-accent);
color: #fff;
font-size: 20px;
line-height: 1;
display: inline-grid;
place-items: center;
cursor: pointer;
box-shadow: 0 10px 26px -10px rgba(253,76,5,.7);
transition: transform .25s ease, background-color .25s ease;
}
.d-sec-subscribe__submit:hover {
background: var(--d-accent-2);
transform: translateX(3px);
}
.d-sec-subscribe__submit i { display: block; }
@media (max-width: 991px) {
.d-sec-subscribe__inner {
grid-template-columns: 1fr;
gap: 28px;
text-align: center;
}
.d-sec-subscribe__copy { max-width: none; }
.d-sec-subscribe__eyebrow { justify-content: center; }
}
@media (max-width: 575px) {
.d-sec-subscribe__submit {
width: 46px;
height: 46px;
font-size: 18px;
}
.d-sec-subscribe__field { gap: 10px; }
}
/* ===== section: package ===== */
/* =========================================================
SECTION: package (pricing)
========================================================= */
.d-sec-package { background: var(--d-bg); }
.d-sec-package__glow {
width: 760px; height: 760px;
left: 50%; top: -140px; transform: translateX(-50%);
}
.d-sec-package__header {
text-align: center;
max-width: 680px;
margin: 0 auto 56px;
position: relative; z-index: 1;
}
.d-sec-package__eyebrow { justify-content: center; margin-bottom: 16px; }
.d-sec-package__title { margin: 0 auto; }
.d-sec-package__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
gap: 28px;
justify-content: center;
align-items: stretch;
position: relative; z-index: 1;
}
.d-sec-package__card {
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: 24px;
padding: 38px 32px 34px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.d-sec-package__card:hover {
transform: translateY(-6px);
border-color: var(--d-border-2);
}
/* featured / recommended plan */
.d-sec-package__card--featured {
border: 1.5px solid var(--d-accent);
background:
radial-gradient(130% 60% at 50% 0%, var(--d-accent-soft) 0%, rgba(253,76,5,0) 62%),
var(--d-card);
box-shadow: 0 24px 60px -28px rgba(253,76,5,.55);
}
.d-sec-package__card--featured:hover { border-color: var(--d-accent); }
.d-sec-package__badge {
position: absolute; top: 22px; right: 22px;
font-family: var(--ff-accent);
font-size: 11px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: #fff; background: var(--d-accent);
padding: 6px 14px; border-radius: var(--d-pill);
box-shadow: 0 8px 20px -8px rgba(253,76,5,.8);
}
.d-sec-package__name {
font-family: var(--ff-nav);
font-size: 20px; font-weight: 600; line-height: 1.2;
color: #fff; margin: 0 0 18px;
padding-right: 96px;
}
.d-sec-package__price {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.d-sec-package__amount {
font-family: var(--ff-body);
font-size: 44px; font-weight: 600; line-height: 1;
color: #fff; letter-spacing: -.02em;
}
.d-sec-package__period {
font-family: var(--ff-accent);
font-size: 14px; color: var(--d-muted-2);
}
.d-sec-package__divider {
height: 1px; background: var(--d-border);
border: 0; margin: 26px 0;
}
.d-sec-package__features {
list-style: none; margin: 0 0 28px; padding: 0;
display: grid; gap: 14px;
}
.d-sec-package__features li {
display: flex; align-items: flex-start; gap: 12px;
font-family: var(--ff-body); font-size: 15px; line-height: 1.5;
color: var(--d-muted);
}
.d-sec-package__check {
flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
border-radius: 50%; display: inline-grid; place-items: center;
background: var(--d-accent-soft); color: var(--d-accent);
}
.d-sec-package__check svg { width: 11px; height: 11px; display: block; }
.d-sec-package__cta { width: 100%; margin-top: auto; }
.d-sec-package__pagination {
margin-top: 48px;
display: flex; justify-content: center;
position: relative; z-index: 1;
}
@media (max-width: 575px){
.d-sec-package__card { padding: 30px 24px; }
.d-sec-package__amount { font-size: 38px; }
.d-sec-package__name { padding-right: 84px; }
}
/* ===== section: testimonial ===== */
/* =========================================================
TESTIMONIAL (.d-sec-testimonial) — dark quote-card slider
========================================================= */
.d-sec-testimonial { position: relative; overflow: clip; }
.d-sec-testimonial__bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center; background-attachment: fixed;
}
.d-sec-testimonial__bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.97) 100%);
}
.d-sec-testimonial__glow {
width: 540px; height: 540px; top: -140px; left: -160px; opacity: .8;
}
.d-sec-testimonial .d-container { position: relative; z-index: 1; }
/* layout: intro column + slider */
.d-sec-testimonial__inner {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 48px; align-items: center;
}
.d-sec-testimonial__eyebrow { margin-bottom: 16px; }
.d-sec-testimonial__title {
font-size: clamp(28px, 3vw, 40px); line-height: 1.12; margin: 0 0 18px;
}
.d-sec-testimonial__sub { margin: 0; }
/* slider shell */
.d-sec-testimonial__slider { min-width: 0; margin-inline: -12px; }
.d-sec-testimonial .testimonial-slider { min-width: 0; }
.d-sec-testimonial .slick-list { overflow: hidden; }
/* equal-height cards regardless of slick row wrapper */
.d-sec-testimonial .slick-track { display: flex; }
.d-sec-testimonial .slick-slide { height: auto; }
.d-sec-testimonial .slick-slide > div { height: 100%; }
.d-sec-testimonial .single-slide { height: 100%; padding-inline: 12px; }
/* quote card */
.d-sec-testimonial__card {
height: 100%;
display: flex; flex-direction: column;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: 24px;
padding: 32px 28px;
position: relative; overflow: hidden;
transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.d-sec-testimonial__card:hover {
transform: translateY(-4px);
border-color: var(--d-border-2);
background: var(--d-card-2);
}
.d-sec-testimonial__quote {
width: 44px; height: 44px; border-radius: 50%;
display: inline-grid; place-items: center;
background: var(--d-accent-soft); color: var(--d-accent);
font-size: 20px; margin-bottom: 20px; flex: 0 0 auto;
}
.d-sec-testimonial__text {
font-family: var(--ff-body); color: var(--d-muted);
font-size: 16px; line-height: 1.7; margin: 0 0 26px;
}
.d-sec-testimonial__person {
display: flex; align-items: center; gap: 14px; margin-top: auto;
}
.d-sec-testimonial__avatar {
width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
flex: 0 0 auto; border: 2px solid var(--d-border-2);
}
.d-sec-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.d-sec-testimonial__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.d-sec-testimonial__name {
font-family: var(--ff-nav); font-weight: 500; font-size: 16px; color: #fff; line-height: 1.2;
}
.d-sec-testimonial__stars {
display: inline-flex; gap: 3px; color: var(--d-accent); font-size: 15px; line-height: 1;
}
/* responsive */
@media (max-width: 991px) {
.d-sec-testimonial__bg { background-attachment: scroll; }
.d-sec-testimonial__inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
.d-sec-testimonial__eyebrow { justify-content: center; }
.d-sec-testimonial__sub { margin-inline: auto; }
.d-sec-testimonial__person { text-align: left; }
}
@media (max-width: 575px) {
.d-sec-testimonial__card { padding: 26px 22px; }
}
/* ===== section: faq ===== */
/* =========================================================
FAQ (.d-sec-faq) — dark rounded accordion, orange +/- toggle
========================================================= */
.d-sec-faq { background: var(--d-bg); }
.d-sec-faq__glow {
width: 560px; height: 560px;
top: -180px; right: -160px;
border-radius: 50%;
}
/* heading block */
.d-sec-faq__head {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
position: relative; z-index: 1;
}
.d-sec-faq__eyebrow { margin-bottom: 16px; }
.d-sec-faq__eyebrow svg { width: 16px; height: 16px; }
.d-sec-faq__title { margin-bottom: 18px; }
.d-sec-faq__sub { margin-left: auto; margin-right: auto; }
/* accordion shell */
.d-sec-faq__accordion {
max-width: 880px;
margin: 0 auto;
position: relative; z-index: 1;
display: grid;
gap: 16px;
}
/* row */
.d-sec-faq__item {
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
overflow: hidden;
transition: border-color .25s ease, background .25s ease;
}
.d-sec-faq__item:has(.accordion-button:not(.collapsed)) {
border-color: var(--d-border-2);
background: var(--d-card-2);
}
.d-sec-faq__header { margin: 0; }
/* button — reset over bootstrap defaults */
.d-sec-faq__btn.accordion-button {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
background: transparent;
color: var(--d-text);
font-family: var(--ff-body);
font-size: 18px; font-weight: 500; line-height: 1.4;
letter-spacing: -.005em;
padding: 24px 28px;
border: 0; border-radius: 0; box-shadow: none;
text-align: left;
transition: padding .25s ease, color .25s ease;
}
.d-sec-faq__btn.accordion-button:not(.collapsed) {
background: transparent;
color: var(--d-text);
box-shadow: none;
padding-bottom: 14px;
}
.d-sec-faq__btn.accordion-button:hover { color: var(--d-text); }
.d-sec-faq__btn.accordion-button:focus,
.d-sec-faq__btn.accordion-button:focus-visible { box-shadow: none; outline: none; }
.d-sec-faq__btn.accordion-button::after { display: none; content: none; background-image: none; }
.d-sec-faq__q { flex: 1 1 auto; }
/* round orange +/- toggle */
.d-sec-faq__toggle {
flex: 0 0 auto;
position: relative;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--d-accent);
box-shadow: 0 8px 24px -8px rgba(253,76,5,.7);
transition: background .25s ease, transform .35s ease;
}
.d-sec-faq__toggle::before,
.d-sec-faq__toggle::after {
content: ""; position: absolute;
top: 50%; left: 50%;
width: 14px; height: 2px;
background: #fff; border-radius: 2px;
transform: translate(-50%, -50%);
transition: transform .3s ease, opacity .3s ease;
}
.d-sec-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.d-sec-faq__btn.accordion-button:not(.collapsed) .d-sec-faq__toggle {
background: var(--d-accent-2);
transform: rotate(180deg);
}
.d-sec-faq__btn.accordion-button:not(.collapsed) .d-sec-faq__toggle::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
/* answer body */
.d-sec-faq__body { padding: 0 28px 26px; }
.d-sec-faq__a {
margin: 0;
color: var(--d-muted);
font-family: var(--ff-body);
font-size: 16px; font-weight: 400; line-height: 1.7;
max-width: 94%;
}
/* responsive */
@media (max-width: 991px){
.d-sec-faq__head { margin-bottom: 44px; }
.d-sec-faq__accordion { max-width: 100%; }
}
@media (max-width: 575px){
.d-sec-faq__btn.accordion-button { padding: 18px 18px; font-size: 16px; gap: 14px; }
.d-sec-faq__btn.accordion-button:not(.collapsed) { padding-bottom: 12px; }
.d-sec-faq__toggle { width: 32px; height: 32px; }
.d-sec-faq__toggle::before,
.d-sec-faq__toggle::after { width: 12px; }
.d-sec-faq__body { padding: 0 18px 20px; }
.d-sec-faq__a { max-width: 100%; }
}
/* ===== section: blogs ===== */
/* ============================ BLOGS ============================ */
.d-sec-blogs { position: relative; }
.d-sec-blogs__glow {
width: 620px; height: 620px; right: -180px; top: -140px;
}
/* head: heading block left, view-all right */
.d-sec-blogs__head {
position: relative; z-index: 1;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 28px; margin-bottom: 56px;
}
.d-sec-blogs__head-text { max-width: 760px; }
.d-sec-blogs__head .d-eyebrow { margin-bottom: 16px; }
.d-sec-blogs__head .d-heading { margin: 0; }
.d-sec-blogs__viewall { flex-shrink: 0; }
/* grid + responsive override of shared d-grid--3 collapse */
.d-sec-blogs__grid { position: relative; z-index: 1; }
/* card */
.d-sec-blogs__card {
display: flex; flex-direction: column;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: 24px;
overflow: hidden;
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.d-sec-blogs__card:hover {
transform: translateY(-6px);
border-color: var(--d-border-2);
box-shadow: 0 28px 60px -32px rgba(0,0,0,.85);
}
/* media */
.d-sec-blogs__media {
display: block; position: relative;
aspect-ratio: 428 / 240;
overflow: hidden;
background: var(--d-card-2);
}
.d-sec-blogs__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .55s ease;
}
.d-sec-blogs__card:hover .d-sec-blogs__media img { transform: scale(1.06); }
/* body */
.d-sec-blogs__body {
display: flex; flex-direction: column; align-items: flex-start;
gap: 14px; padding: 26px 26px 28px; flex: 1;
}
.d-sec-blogs__date {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ff-accent);
font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
color: var(--d-muted-2);
}
.d-sec-blogs__date i { color: var(--d-accent); font-size: 16px; }
.d-sec-blogs__title {
margin: 0;
font-family: var(--ff-body); font-weight: 500;
font-size: 22px; line-height: 1.3;
}
.d-sec-blogs__title a {
color: var(--d-text); transition: color .25s ease;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d-sec-blogs__title a:hover { color: var(--d-accent); }
.d-sec-blogs__excerpt {
margin: 0; color: var(--d-muted);
font-family: var(--ff-body); font-size: 15px; line-height: 1.6;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.d-sec-blogs__more {
margin-top: auto;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--ff-nav); font-weight: 500; font-size: 15px;
color: var(--d-accent);
}
.d-sec-blogs__more i { transition: transform .25s ease; }
.d-sec-blogs__more:hover { color: var(--d-accent-2); }
.d-sec-blogs__more:hover i { transform: translateX(4px); }
/* responsive */
@media (max-width: 991px){
.d-sec-blogs__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
.d-sec-blogs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
.d-sec-blogs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px){
.d-sec-blogs__body { padding: 22px 22px 24px; }
.d-sec-blogs__title { font-size: 20px; }
}
/* WOW.js hides .wow elements (it runs but animate.css is not loaded here); guarantee
content is always visible to avoid blank below-fold content without scroll/JS. */
.wow { visibility: visible !important; }
/* hero: darken the forex backdrop so the glow + feature cards read like the near-black Figma hero */
.d-sec-banner__bg { opacity: .12; }
.d-sec-banner__card { background: rgba(20,20,20,.92); backdrop-filter: blur(2px); }
/* hero feature cards — stronger contrast / elevation over the forex backdrop */
.d-sec-banner::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.82) 58%, #0A0A0A 100%);
z-index: 0; pointer-events: none;
}
.d-sec-banner__content { position: relative; z-index: 2; }
.d-sec-banner__cards { position: relative; z-index: 2; }
.d-sec-banner__card {
background: linear-gradient(180deg, #242424 0%, #151515 100%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 28px 60px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: none;
}
.d-sec-banner__card:hover {
background: linear-gradient(180deg, #2c2c2c 0%, #1b1b1b 100%);
border-color: rgba(253,76,5,.55);
transform: translateY(-4px);
}
.d-sec-banner__card-icon { background: #0E0E0E; border: 1px solid rgba(255,255,255,.10); }
.d-sec-banner__card-icon i, .d-sec-banner__card-icon svg { color: var(--d-accent); }
.d-sec-banner__card-title { color: #fff; font-weight: 500; }
/* ============================================================
MOBILE / TABLET POLISH PASS
(The Figma had only a 1512px desktop frame; below is a
responsive interpretation. Root cause of overflow on phones
is flex/grid children refusing to shrink -> min-width:0.)
============================================================ */
img, svg, video { max-width: 100%; height: auto; }
@media (max-width: 991px) {
/* safety net: no horizontal scroll on the public landing */
body, .main-wrapper { overflow-x: clip; }
/* allow children to shrink below content size (the usual overflow culprit) */
.d-grid > *, .d-card, [class*="__card"], [class*="__panel"], [class*="__col"] { min-width: 0; }
[class*="__card"], [class*="__visual"], [class*="__mock"], [class*="__phone"],
[class*="__dashboard"], [class*="__browser"], [class*="__preview"] { max-width: 100%; }
/* HERO */
.d-sec-banner { padding-top: 116px; }
.d-sec-banner__title { font-size: clamp(28px, 7.4vw, 46px); line-height: 1.18; }
.d-sec-banner__desc { font-size: 16px; }
.d-sec-banner__cards { flex-wrap: wrap; gap: 12px; }
.d-sec-banner__card { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); min-height: 126px; }
/* ABOUT */
.d-sec-about__head { flex-direction: column; align-items: flex-start; gap: 20px; }
.d-sec-about__head-left { flex: 1 1 auto; width: 100%; }
.d-sec-about__pills { width: 100%; flex-wrap: wrap; }
.d-sec-about__title { font-size: clamp(30px, 8vw, 46px); max-width: 100%; }
.d-sec-about__card { overflow: hidden; min-height: 280px; }
.d-sec-about__panels { flex-wrap: wrap; gap: 12px; }
.d-sec-about__panel { flex: 1 1 calc(50% - 6px); }
.d-sec-about__tooltip { right: 10px; max-width: calc(100% - 20px); }
.d-sec-about__chart { width: 100%; }
}
@media (max-width: 575px) {
.d-container { padding-inline: 16px; }
.d-section { padding-block: 44px; }
/* hero cards -> full-width horizontal rows (icon left, label right) */
.d-sec-banner__card {
flex: 1 1 100%; max-width: 100%;
flex-direction: row; align-items: center; justify-content: flex-start;
gap: 14px; min-height: 0; padding: 16px 18px;
}
.d-sec-banner__card-title { text-align: left; font-size: 17px; }
.d-sec-about__card { min-height: 230px; }
.d-sec-about__panel { flex: 1 1 100%; }
}
/* mobile: give the collapsed nav a solid readable panel when opened over the hero */
@media (max-width: 1199px) {
#navbarSupportedContent {
background: rgba(12,12,12,.97);
border: 1px solid var(--d-border);
border-radius: 16px;
padding: 16px 16px 18px;
margin-top: 12px;
backdrop-filter: blur(10px);
box-shadow: 0 24px 60px -24px rgba(0,0,0,.85);
}
.d-nav__menu > li > a { display: block; width: 100%; }
.d-nav__actions { margin-left: 0; margin-top: 14px; gap: 12px; flex-wrap: wrap; }
.d-nav__actions .d-btn { width: 100%; }
}
/* nav links: clean pill on hover/active. Basic's .main-menu link box is built tall for a
full-height bar; combined with border-radius:999px that produced a vertical ellipse.
Id-level specificity forces the link to hug its text into a proper pill. */
#dHeader .d-nav__menu > li > a {
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; height: auto; padding: 9px 18px;
border-radius: 999px; background: transparent; color: #fff;
transition: background .2s ease, color .2s ease;
}
#dHeader .d-nav__menu > li > a:hover { background: rgba(255,255,255,.08); color: #fff; }
#dHeader .d-nav__menu > li.active > a { background: var(--d-accent-soft); color: var(--d-accent); }
/* collapsed mobile menu: keep links as full-width rows (override the desktop inline pill) */
@media (max-width: 1199px) {
#dHeader .d-nav__menu > li > a {
display: block; width: 100%; text-align: left;
padding: 11px 14px; border-radius: 10px; line-height: 1.3;
}
#dHeader .d-nav__menu > li > a:hover { background: rgba(255,255,255,.06); }
#dHeader .d-nav__menu > li.active > a { background: var(--d-accent-soft); color: var(--d-accent); }
}
/* ============================================================
HERO — faithful rebuild matched to the original Dripta Figma
(replica reference). Near-black base, blurred #772200 glow
band, #FF5F1F gradient "Subtract" frame accents, ghost CTA,
#0A0A0A feature cards with #101010 tiles + white icons.
Last block -> overrides all earlier .d-sec-banner rules.
============================================================ */
:root {
--d-accent: #FF5F1F; /* authoritative Dripta orange */
--d-accent-2: #FF7A42;
--d-accent-soft: rgba(255,95,31,.14);
}
.d-sec-banner {
position: relative; isolation: isolate; overflow: clip;
background: #0A0A0A; text-align: center;
padding-top: clamp(150px, 17vh, 230px);
padding-bottom: clamp(70px, 8vw, 120px);
}
.d-sec-banner::after { content: none; } /* drop the old dark scrim */
.d-sec-banner__bg { display: none; } /* original hero uses no photo */
/* blurred orange glow band */
.d-sec-banner__glow {
position: absolute; z-index: -2; top: clamp(-60px, -3vw, -20px); left: 50%;
width: min(1530px, 102%); height: clamp(150px, 14vw, 200px);
transform: translateX(-50%);
background: #772200; border-radius: 999px; filter: blur(100px);
opacity: .95; pointer-events: none;
}
/* exact angular gradient frame accents */
.d-sec-banner__frame {
position: absolute; z-index: -1; top: -76px; left: -43px;
width: calc(100% + 86px); height: 973px; max-height: 116%;
pointer-events: none; opacity: .92;
}
.d-sec-banner__frame svg { width: 100%; height: 100%; display: block; }
.d-sec-banner__content { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; }
.d-sec-banner__title {
font-family: var(--ff-body); font-weight: 400; color: #fff;
font-size: clamp(34px, 5.4vw, 70px); line-height: 1.33; letter-spacing: 0;
max-width: 864px; margin: 0 auto;
}
.d-sec-banner__desc {
font-family: var(--ff-body); color: #D9D9D9;
font-size: clamp(16px, 1.4vw, 20px); line-height: 1.33;
max-width: 720px; margin: 22px auto 0;
}
/* ghost CTA — translucent orange + orange hairline + uppercase (original) */
.d-sec-banner__btn {
display: inline-flex; align-items: center; justify-content: center;
margin-top: clamp(26px, 3vw, 34px);
font-family: var(--ff-body); font-weight: 400; font-size: 16px;
text-transform: uppercase; letter-spacing: .02em; color: #fff;
background: rgba(255,95,31,.10); border: 1px solid rgba(255,95,31,.55);
border-radius: 10px; padding: 11px 46px; min-height: 44px;
box-shadow: none; transition: .25s ease;
}
.d-sec-banner__btn:hover { background: rgba(255,95,31,.22); color: #fff; transform: translateY(-2px); }
/* feature cards — original treatment */
.d-sec-banner__cards {
position: relative; z-index: 1; display: flex; flex-wrap: wrap;
justify-content: center; gap: 15px; margin-top: clamp(46px, 6vw, 70px);
}
.d-sec-banner__card {
flex: 0 0 195px; max-width: 195px; min-height: 157px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
padding: 22px 18px; background: #0A0A0A; border: 1px solid rgba(255,255,255,.06);
border-radius: 10px; box-shadow: none; backdrop-filter: none; transition: .25s ease;
}
.d-sec-banner__card:hover { border-color: rgba(255,95,31,.45); transform: translateY(-3px); }
.d-sec-banner__card-icon {
width: 58px; height: 52px; border-radius: 6px; background: #101010;
display: inline-grid; place-items: center; border: 0; color: #fff;
}
.d-sec-banner__card-icon i { font-size: 24px; color: #fff; }
.d-sec-banner__card-icon svg { width: 26px; height: 26px; }
.d-sec-banner__card-title {
font-family: var(--ff-body); font-weight: 400; font-size: 20px; line-height: 1.33;
color: #fff; text-align: center; text-transform: capitalize; margin: 0;
}
@media (max-width: 991px) {
.d-sec-banner__frame { opacity: .5; }
.d-sec-banner__card { flex: 1 1 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 575px) {
.d-sec-banner__frame { display: none; }
.d-sec-banner__card { flex: 1 1 100%; max-width: 100%; flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 0; padding: 16px 18px; }
.d-sec-banner__card-title { text-align: left; }
}
/* hero feature cards — a touch more prominent than the original (lighter fill,
clearer border, soft elevation, orange-accent icons) while staying on-theme */
.d-sec-banner__card {
background: linear-gradient(180deg, #1B1B1B 0%, #121212 100%);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 18px 44px -22px rgba(0,0,0,.85);
}
.d-sec-banner__card:hover {
background: linear-gradient(180deg, #232323 0%, #161616 100%);
border-color: rgba(255,95,31,.55);
box-shadow: 0 22px 52px -22px rgba(255,95,31,.28);
transform: translateY(-4px);
}
.d-sec-banner__card-icon { background: #0E0E0E; border: 1px solid rgba(255,255,255,.10); }
.d-sec-banner__card-icon i { color: var(--d-accent); }
.d-sec-banner__card-icon svg [stroke="white"], .d-sec-banner__card-icon svg path[stroke] { stroke: var(--d-accent); }
.d-sec-banner__card-title { color: #fff; font-weight: 500; }
/* About — the original's faint outlined heading + 460px width breaks 9Sigma's
long heading one-word-per-line. Make it a readable solid heading, wider, and
top-align the right-side pills (they were floating down via align-items:flex-end). */
.d-sec-about__head { align-items: flex-start; }
.d-sec-about__title {
max-width: 680px;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.2;
font-weight: 400;
color: #fff;
-webkit-text-stroke: 0;
}
@media (max-width: 991px) {
.d-sec-about__title { max-width: 100%; font-size: clamp(26px, 6vw, 38px); }
}
/* ============================================================
FIX: decorative radial glows are position:absolute with z-index:0,
so they painted OVER non-positioned centered headings (package, faq,
how-it-works), graying out the white text. Make each section its own
stacking context, drop glows behind, and lift content above.
============================================================ */
.d-section { isolation: isolate; }
.d-glow, [class*="__glow"] { z-index: -1; }
.d-section > .d-container { position: relative; z-index: 1; }
/* ===== GLOBAL UI-KIT OVERRIDE (dark-skin shared basic classes) ===== */
/* Dark-skins shared 9Sigma basic component classes app-wide so inputs,
buttons, modals, tables, badges, pagination etc. match the Dripta look
even when blade views keep their original markup. Scoped to named basic
classes only — never bare body/html or .d-* kit classes. */
/* Form fields */
.form--control,
.form-control,
textarea,
.transparent-form input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
.custom-icon-field input,
select.form-control,
.form-select {
background: var(--d-card-2) !important;
color: var(--d-text) !important;
border: 1px solid var(--d-border) !important;
border-radius: var(--d-radius-sm) !important;
}
.form--control::placeholder,
.form-control::placeholder,
textarea::placeholder,
.transparent-form input::placeholder,
.custom-icon-field input::placeholder {
color: var(--d-muted-2) !important;
}
.form--control:focus,
.form-control:focus,
textarea:focus,
.transparent-form input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):focus,
.custom-icon-field input:focus,
select.form-control:focus,
.form-select:focus {
border-color: var(--d-accent) !important;
box-shadow: 0 0 0 3px var(--d-accent-soft) !important;
background: var(--d-card-2) !important;
outline: none !important;
}
select,
select option,
.form-select {
background: var(--d-card-2) !important;
color: var(--d-text) !important;
}
/* Icon field */
.custom-icon-field { position: relative; }
.custom-icon-field > i,
.custom-icon-field i { color: var(--d-accent) !important; }
/* Labels */
.form-group label,
.form-label,
label.required,
.form-check-label { color: var(--d-muted) !important; }
.form-group label sup.text--danger,
.form-label sup.text--danger,
label.required sup.text--danger { color: var(--d-accent) !important; }
/* Check / radio */
.form-check-input {
background: var(--d-card-2) !important;
border: 1px solid var(--d-border-2) !important;
}
.form-check-input:checked {
background: var(--d-accent) !important;
border-color: var(--d-accent) !important;
}
/* Input group addon */
.input-group-text {
background: var(--d-card-3) !important;
color: var(--d-muted) !important;
border-color: var(--d-border) !important;
}
/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background: var(--d-card-2) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-text) !important;
min-height: 48px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-selection__rendered { color: var(--d-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-top-color: var(--d-muted) !important;
}
.select2-dropdown {
background: var(--d-card) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-text) !important;
}
.select2-results__option { color: var(--d-muted) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted,
.select2-results__option--highlighted {
background: var(--d-accent) !important;
color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
background: var(--d-card-2) !important;
color: var(--d-text) !important;
border: 1px solid var(--d-border) !important;
}
/* File inputs (bootstrap-fileinput / krajee) */
.file-input,
.file-caption .file-caption-name,
.file-caption-main,
.file-drop-zone,
.krajee-default.file-preview,
.file-preview,
.file-preview-frame {
background: var(--d-card-2) !important;
border-color: var(--d-border) !important;
color: var(--d-text) !important;
}
.file-drop-zone-title { color: var(--d-muted-2) !important; }
/* Buttons */
.btn--base,
.bg--base {
background-color: var(--d-accent) !important;
border-color: var(--d-accent) !important;
color: #fff !important;
}
.btn--base:hover,
.bg--base:hover {
background-color: var(--d-accent-2) !important;
border-color: var(--d-accent-2) !important;
}
a.text--base,
.text--base { color: var(--d-accent) !important; }
.btn--dark {
background-color: var(--d-card-2) !important;
border-color: var(--d-border-2) !important;
color: var(--d-text) !important;
}
.btn-close { filter: invert(1) grayscale(1) brightness(2); }
/* Cards / surfaces */
.custom--card,
.card,
.card-body,
.section--bg,
.registration-wrapper {
background: var(--d-card) !important;
border: 1px solid var(--d-border) !important;
border-radius: var(--d-radius) !important;
color: var(--d-text) !important;
}
.card-header,
.card-footer {
background: var(--d-card-2) !important;
border-color: var(--d-border) !important;
color: var(--d-text) !important;
}
/* Tables */
.custom--table,
.table,
.table-responsive--md table { color: var(--d-muted) !important; }
.custom--table thead th,
.table thead th {
color: var(--d-text) !important;
border-bottom: 1px solid var(--d-border) !important;
background: transparent !important;
}
.custom--table td,
.custom--table th,
.table td,
.table th { border-color: var(--d-border) !important; }
.custom--table tbody tr:hover,
.table tbody tr:hover { background: var(--d-card-2) !important; }
.table-responsive--md,
.table-responsive { background: transparent !important; }
/* Badges */
.badge { color: #fff; border-radius: var(--d-pill); padding: .35em .8em; font-weight: 500; }
.badge--success { background: rgba(74,222,128,.16) !important; color: #4ade80 !important; }
.badge--warning { background: rgba(251,191,36,.16) !important; color: #fbbf24 !important; }
.badge--danger { background: rgba(248,113,113,.16) !important; color: #f87171 !important; }
.badge--primary { background: var(--d-accent-soft) !important; color: var(--d-accent-2) !important; }
.badge--dark { background: var(--d-card-3) !important; color: var(--d-text) !important; }
/* Modals */
.modal-content,
.cmn--modal .modal-content {
background: var(--d-card) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-text) !important;
border-radius: var(--d-radius-lg) !important;
}
.modal-header,
.modal-footer { border-color: var(--d-border) !important; }
.modal-title { color: var(--d-text) !important; }
.modal-body { color: var(--d-text) !important; }
.list-group,
.list-group-item {
background: var(--d-card-2) !important;
border-color: var(--d-border) !important;
color: var(--d-text) !important;
}
/* Pagination */
.pagination .page-link {
background: var(--d-card-2) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-muted) !important;
}
.pagination .page-link:hover {
background: var(--d-card-3) !important;
color: var(--d-text) !important;
}
.pagination .page-item.active .page-link {
background: var(--d-accent) !important;
border-color: var(--d-accent) !important;
color: #fff !important;
}
.pagination .page-item.disabled .page-link {
background: var(--d-card) !important;
color: var(--d-muted-2) !important;
}
/* Cookie card */
.cookies-card {
background: var(--d-card) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-text) !important;
border-radius: var(--d-radius) !important;
}
/* Tooltips */
.tooltip-inner {
background: var(--d-card-3) !important;
color: var(--d-text) !important;
}
.tooltip .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
border-top-color: var(--d-card-3) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
border-bottom-color: var(--d-card-3) !important;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
border-left-color: var(--d-card-3) !important;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
border-right-color: var(--d-card-3) !important;
}
/* Legibility helpers */
.text--success { color: #4ade80 !important; }
.text--danger { color: #f87171 !important; }
.text--warning { color: #fbbf24 !important; }
.text--muted { color: var(--d-muted) !important; }
/* Referral tree (light-touch) */
.treeview,
.treeview ul,
.treeview li { color: var(--d-text); }
.treeview li > span,
.treeview .treeView-node,
.treeview a {
background: var(--d-card-2) !important;
border: 1px solid var(--d-border) !important;
color: var(--d-text) !important;
}
/* OTP boxes */
.verification-code .boxes span {
background: var(--d-card-2) !important;
border: 1px solid var(--d-border-2) !important;
color: var(--d-text) !important;
border-radius: var(--d-radius-sm) !important;
}
/* Register disabled overlay re-tint */
.form-disabled::after { background-color: rgba(10,10,10,.6) !important; }
.form-disabled-text { color: var(--d-text) !important; }
/* ===== AUTH SHELL (.d-page-auth / .d-auth-*) ===== */
.d-page-auth {
position: relative;
isolation: isolate;
overflow: clip;
padding-block: 72px;
}
@media (max-width: 575px) {
.d-page-auth { padding-block: 40px; }
}
.d-auth-glow {
position: absolute;
width: 680px;
height: 680px;
top: -160px;
left: 50%;
transform: translateX(-50%);
}
.d-auth-split {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}
.d-page-auth.d-auth--centered .d-auth-split {
grid-template-columns: minmax(0, 540px);
justify-content: center;
}
.d-auth-hero {
display: flex;
flex-direction: column;
gap: 22px;
position: relative;
}
.d-auth-hero__brand img { max-height: 42px; width: auto; }
.d-auth-hero__title { font-size: clamp(30px, 3.4vw, 46px); }
.d-auth-hero__benefits {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.d-auth-benefit {
display: flex;
gap: 12px;
align-items: center;
color: var(--d-muted);
font-size: 16px;
}
.d-auth-benefit i { color: var(--d-accent); font-size: 22px; }
/* responsive collapse — must follow the .d-auth-hero/.d-auth-split base rules so it wins the cascade */
@media (max-width: 991px) {
.d-auth-split { grid-template-columns: 1fr; }
.d-auth-hero { display: none; }
}
.d-auth-card {
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
padding: 40px;
position: relative;
z-index: 1;
}
@media (max-width: 575px) {
.d-auth-card { padding: 24px; }
}
.d-auth-card__head { margin-bottom: 22px; }
.d-auth-card__title {
font-size: 28px;
font-weight: 600;
color: var(--d-text);
margin: 0 0 6px;
}
.d-auth-card__sub { color: var(--d-muted); margin: 0; font-size: 15px; }
.d-auth-card .form-group { margin-bottom: 18px; }
.d-auth-social { margin-bottom: 6px; }
.d-auth-footer { color: var(--d-muted); text-align: center; margin-top: 20px; }
.d-auth-footer a { color: var(--d-accent); }
/* ===== DARK BREADCRUMB (.d-breadcrumb) ===== */
.d-breadcrumb {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--d-bg-alt);
border-bottom: 1px solid var(--d-border);
padding-block: 48px;
text-align: center;
}
.d-breadcrumb__glow {
position: absolute;
width: 540px;
height: 320px;
top: -150px;
left: 50%;
transform: translateX(-50%);
}
.d-breadcrumb .d-container { position: relative; z-index: 1; }
.d-breadcrumb__eyebrow { margin-bottom: 10px; }
.d-breadcrumb__title {
font-size: clamp(28px, 4vw, 44px);
color: var(--d-text);
margin: 6px 0 12px;
font-weight: 600;
}
.d-breadcrumb__trail {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
justify-content: center;
align-items: center;
color: var(--d-muted);
font-size: 15px;
flex-wrap: wrap;
}
.d-breadcrumb__trail li { display: inline-flex; align-items: center; gap: 8px; }
.d-breadcrumb__trail li + li::before { content: "/"; color: var(--d-muted-2); }
.d-breadcrumb__trail a { color: var(--d-muted); }
.d-breadcrumb__trail a:hover { color: var(--d-accent); }
/* ===== USER-AREA SHELL (.d-user*) + DASHBOARD ===== */
.d-user {
display: flex;
align-items: flex-start;
gap: 28px;
width: 100%;
max-width: var(--d-container);
margin-inline: auto;
padding: 28px 24px 56px;
position: relative;
}
.d-user__sidebar {
width: 256px;
flex-shrink: 0;
position: sticky;
top: 92px;
align-self: flex-start;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
padding: 14px;
max-height: calc(100vh - 110px);
overflow-y: auto;
}
.d-user__main { flex: 1 1 auto; min-width: 0; }
.d-user__content { padding-top: 8px; }
.d-user__content .container { max-width: 100%; padding-inline: 0; }
.d-user__content .pt-100 { padding-top: 28px; }
.d-user__content .pb-100 { padding-bottom: 28px; }
/* TOPBAR */
.d-user__topbar {
position: sticky;
top: 0;
z-index: 200;
background: rgba(10, 10, 10, .85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--d-border);
}
.d-user__topbar-inner {
max-width: var(--d-container);
margin-inline: auto;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 14px;
}
.d-user__brand img { max-height: 38px; width: auto; }
.d-user__topbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
.d-user__hamburger {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid var(--d-border-2);
background: var(--d-card-2);
color: var(--d-text);
align-items: center;
justify-content: center;
cursor: pointer;
}
/* NAV (inside sidebar; keeps so app.js active-state still works) */
.d-user__nav,
.d-user__sidebar .main-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.d-user__nav-label {
font-family: var(--ff-nav);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--d-muted-2);
padding: 14px 12px 6px;
}
.d-user__sidebar .main-menu li > a {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-radius: 12px;
color: var(--d-muted);
font-family: var(--ff-nav);
font-size: 15px;
transition: .2s;
}
.d-user__sidebar .main-menu li > a:hover {
background: var(--d-card-2);
color: var(--d-text);
}
.d-user__sidebar .main-menu li > a i {
font-size: 19px;
width: 22px;
text-align: center;
color: inherit;
}
.d-user__sidebar .main-menu li.active > a {
background: var(--d-accent-soft);
color: var(--d-accent-2);
}
.d-user__sidebar .main-menu li.active > a i { color: var(--d-accent); }
/* DRAWER + RESPONSIVE */
.d-user__backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .6);
z-index: 310;
}
@media (max-width: 991px) {
.d-user { display: block; padding: 16px 16px 48px; }
.d-user__hamburger { display: inline-flex; }
.d-user__sidebar {
position: fixed;
top: 0;
left: 0;
height: 100dvh;
width: 282px;
max-height: none;
border-radius: 0;
transform: translateX(-100%);
transition: transform .28s ease;
z-index: 320;
}
.d-user.d-user--drawer-open .d-user__sidebar { transform: translateX(0); }
.d-user.d-user--drawer-open .d-user__backdrop { display: block; }
.d-user__main { width: 100%; }
}
/* BREADCRUMB INSIDE USER MAIN (slim, left-aligned, no band — overrides the public centered band only inside .d-user__main) */
.d-user__main .d-breadcrumb {
background: transparent;
border: 0;
text-align: left;
padding-block: 16px 4px;
overflow: visible;
}
.d-user__main .d-breadcrumb .d-breadcrumb__glow { display: none; }
.d-user__main .d-breadcrumb__trail { justify-content: flex-start; }
/* DASHBOARD STAT TILES (skin the existing .d-widget markup — user area only) */
.d-widget {
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
padding: 22px;
display: flex;
align-items: center;
gap: 18px;
position: relative;
overflow: hidden;
transition: .25s;
height: 100%;
}
.d-widget.has--link:hover {
transform: translateY(-3px);
border-color: var(--d-border-2);
}
.d-widget .item--link { position: absolute; inset: 0; z-index: 2; }
/* suppress the basic theme's off-brand red corner blob+arrow (main.css .d-widget::after/::before); the whole tile is already clickable via .item--link */
.d-widget::after, .d-widget::before { display: none !important; }
.d-widget__icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--d-accent-soft);
display: grid;
place-items: center;
flex-shrink: 0;
}
.d-widget__icon i,
.d-widget__icon .text--base { color: var(--d-accent) !important; font-size: 26px; }
.d-widget__content { min-width: 0; }
.d-widget__caption { color: var(--d-muted); margin: 0; }
.d-widget__amount {
color: var(--d-text);
font-size: 23px;
font-weight: 600;
margin: 2px 0 0;
word-break: break-word;
}
.referralURL { font-family: var(--ff-body); }
/* =========================================================
LIVE CHART — Dripta token remap
live-chart.css (swap asset) defines --lc-* on .lc-terminal and
loads BEFORE dripta.css; here we only re-point those color tokens
to Dripta --d-* values. The chart canvas colors are JS-rendered
(live-chart.js) and are intentionally NOT touched. No structural
(.lc-body grid / chart min-height) overrides — those stay as-is.
========================================================= */
.lc-terminal {
--lc-accent: var(--d-accent);
--lc-accent-soft: var(--d-accent-soft);
--lc-bg: var(--d-bg);
--lc-surface: var(--d-card);
--lc-surface-2: var(--d-card-2);
--lc-surface-3: var(--d-card-3);
--lc-border: var(--d-border-2);
--lc-border-soft: var(--d-border);
--lc-text: var(--d-text);
--lc-text-dim: var(--d-muted);
--lc-text-faint: var(--d-muted-2);
/* --lc-up / --lc-down (green / red price + candle accents) intentionally kept */
}
/* Live-chart parity polish (from adversarial audit): restore the terminal's intended
input borders / search-box height that the global form/select2 !important rules
slightly overrode. Cosmetic only; scoped to .lc-terminal + its body-level dropdown. */
.lc-terminal .lc-pip-form .form-control,
.lc-terminal .lc-pip-form select,
.lc-terminal .lc-pip-form input {
border-color: var(--lc-border) !important;
border-radius: var(--lc-radius-sm) !important;
}
.lc-terminal .select2-container--default .select2-selection--single {
min-height: 38px !important;
height: 38px !important;
}
body.lc-select2-open .select2-dropdown { background: var(--d-card-2) !important; }
/* ===== SUPPORT THREAD + DEPOSIT GATEWAY GRID ===== */
/* Dark-skins the basic-theme deposit classes (custom.css: .gateway-card /
.payment-item / .payment-system-list / .deposit-info) and the support classes
(main.css: .support-answer-wrapper / .icon-btn) for Dripta. Layout + every JS
hook is preserved — colour/surface only. The deposit JS reads
.gateway-input / .gateway-option / .more-gateway-option / .amount /
.gateway-limit / .processing-fee / .final-amount, so nothing here is renamed.
dripta.css loads AFTER main.css + custom.css, so equal-specificity rules win on
source order; !important is added only where those files themselves used it. */
/* ---------- SECTION A: deposit gateway grid ---------- */
.gateway-card {
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
padding: 22px;
}
.payment-system-list { background: transparent; }
.payment-item.gateway-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius-sm);
padding: 12px 16px;
margin-bottom: 10px;
cursor: pointer;
transition: .2s;
}
.payment-item.gateway-option:hover { border-color: var(--d-border-2); }
.payment-item.gateway-option:has(.gateway-input:checked) {
border-color: var(--d-accent);
background: var(--d-accent-soft);
}
.payment-item__info { display: flex; align-items: center; gap: 10px; }
.payment-item__check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--d-border-2);
position: relative;
flex-shrink: 0;
}
.payment-item.gateway-option:has(.gateway-input:checked) .payment-item__check {
border-color: var(--d-accent);
}
.payment-item.gateway-option:has(.gateway-input:checked) .payment-item__check::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--d-accent);
}
.payment-item__name { color: var(--d-text); }
.payment-item__thumb-img { max-height: 26px; width: auto; }
.payment-item__btn.more-gateway-option {
width: 100%;
background: transparent;
border: 1px dashed var(--d-border-2);
color: var(--d-muted);
border-radius: var(--d-radius-sm);
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.deposit-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 0;
gap: 12px;
}
.deposit-info .text { color: var(--d-muted); margin: 0; }
.deposit-info__input .text,
.deposit-info__input .text span { color: var(--d-text); }
.deposit-info__input-group.input-group .deposit-info__input-group-text {
background: var(--d-card-3);
color: var(--d-muted);
border: 1px solid var(--d-border);
}
.deposit-info.total-amount {
border-top: 1px solid var(--d-border);
margin-top: 6px;
}
.payment-system-list.is-scrollable {
max-height: 360px;
overflow-y: auto;
}
.info-text .text { color: var(--d-muted-2); font-size: 13px; }
.gateway-card hr,
.payment-system-list hr { border-color: var(--d-border); opacity: 1; }
/* ---------- SECTION B: support thread + list ---------- */
.support-answer-wrapper {
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
}
.support-answer-wrapper.support-answer-wrapper-admin {
background: var(--d-accent-soft);
/* beats main.css `.support-answer-wrapper-admin { border-color:#ffc10754 !important }` */
border-color: rgba(253, 76, 5, .22) !important;
}
.support-answer-wrapper .border-right { border-color: var(--d-border) !important; }
.support-answer-wrapper h5 { color: var(--d-text); }
.support-answer-wrapper p { color: var(--d-muted); }
.support-answer-wrapper a { color: var(--d-accent); }
.card-header-bg {
background: var(--d-card-2);
border-bottom: 1px solid var(--d-border);
}
.icon-btn {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-grid;
place-items: center;
color: #fff;
}
.card-body-deposit { color: var(--d-text); }
/* ===== PUBLIC PAGES: prose + blog + contact + maintenance ===== */
/* ---------- PROSE (raw admin HTML on dark) ---------- */
.content-section, .blog-details-content { color: var(--d-muted); }
.content-section p, .blog-details-content p { color: var(--d-muted); }
.content-section h1,.content-section h2,.content-section h3,.content-section h4,.content-section h5,.content-section h6,
.blog-details-content h1,.blog-details-content h2,.blog-details-content h3,.blog-details-content h4,.blog-details-content h5,.blog-details-content h6 { color: var(--d-text); }
.content-section a, .blog-details-content a { color: var(--d-accent); }
.content-section ul,.content-section ol,.content-section li,
.blog-details-content ul,.blog-details-content ol,.blog-details-content li { color: var(--d-muted); }
.content-section strong,.content-section b,.blog-details-content strong { color: var(--d-text); }
.content-section table,.content-section td,.content-section th { border-color: var(--d-border) !important; color: var(--d-muted); }
.content-section blockquote,.blog-details-content blockquote {
border-left: 3px solid var(--d-accent);
background: var(--d-card-2);
color: var(--d-muted);
padding: 12px 18px;
border-radius: var(--d-radius-sm);
}
.content-section img,.blog-details-content img { border-radius: var(--d-radius-sm); max-width: 100%; height: auto; }
/* ---------- BLOG GRID CARDS ---------- */
.blog-post.section--bg {
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
overflow: hidden;
transition: .25s;
height: 100%;
}
.blog-post.section--bg:hover { transform: translateY(-4px); border-color: var(--d-border-2); }
.blog-post__thumb img { width: 100%; height: auto; display: block; }
.blog-post__content { padding: 22px; }
.blog-post__date { color: var(--d-muted-2); }
.blog-post__title a { color: var(--d-text); }
.blog-post__title a:hover { color: var(--d-accent); }
/* ---------- BLOG DETAILS sidebar + share ---------- */
.blog-details-title { color: var(--d-text); }
.blog-sidebar.section--bg {
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
padding: 24px;
}
.blog-sidebar .title { color: var(--d-text); }
.s-post {
border-bottom: 1px solid var(--d-border);
padding-bottom: 14px;
margin-bottom: 14px;
gap: 12px;
}
.s-post__title a { color: var(--d-text); }
.s-post__title a:hover { color: var(--d-accent); }
.post-share .caption { color: var(--d-muted); }
.post-share li a {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--d-border-2);
display: inline-grid; place-items: center;
color: var(--d-muted);
margin-left: 8px;
}
.post-share li a:hover { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
/* ---------- CONTACT ---------- */
.contact-wrapper.section--bg {
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
padding: 32px;
gap: 32px;
}
.contact-wrapper__left { flex: 1 1 58%; min-width: 0; }
.contact-wrapper__right { flex: 1 1 30%; }
.contact-info-list { list-style: none; padding: 0; margin: 0; }
.contact-info-single {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid var(--d-border);
color: var(--d-muted);
}
.contact-info-single p { margin: 0; color: var(--d-muted); }
.contact-info-single i, .contact-info-single svg { color: var(--d-accent); }
.map-info {
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
padding: 18px;
}
.map-area { position: relative; isolation: isolate; }
.map-area::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(rgba(10,10,10,.82), rgba(10,10,10,.9));
z-index: -1;
}
.map-area > .container { position: relative; }
.text-white-75 { color: var(--d-muted) !important; }
/* ---------- MAINTENANCE ---------- */
.maintenance-page { min-height: 78vh; display: flex; align-items: center; }
.maintenance-page-color, .maintenance-page .text--color { color: var(--d-muted); }
.maintenance-page h1,.maintenance-page h2,.maintenance-page h3,.maintenance-page h4 { color: var(--d-text); }
/* =========================================================
LIVE CHART layout fixes — the 3-column trading terminal needs
the FULL content width (the .d-user 1320px cap squeezes the
chart column to ~380px). Scoped to the live-chart page only via
:has(.lc-terminal); chart JS/markup untouched.
========================================================= */
.d-user:has(.lc-terminal) { max-width: 100%; }
.d-user:has(.lc-terminal) .container-fluid { padding-left: 0; padding-right: 0; }
/* symbol-search select2 was collapsing to ~90px ("E..."); fill the watchlist column */
.lc-watchlist__search .select2-container { width: 100% !important; }
/* watchlist must stack vertically (search on top, tiers below); a stray
flex-direction:row was collapsing the search box to ~114px */
.lc-terminal .lc-watchlist__scroll { display: flex !important; flex-direction: column !important; align-items: stretch; }
.lc-terminal .lc-watchlist__search { width: 100% !important; }
.lc-terminal .lc-watchlist__search .select2-container { width: 100% !important; }
/* align the topbar with the full-width terminal on the live-chart page */
body:has(.lc-terminal) .d-user__topbar-inner { max-width: 100%; }
/* ===== section: engine ===== */
/* =========================================================
SECTION: ENGINE (.d-sec-engine) — how the signal engine works:
centred head, 3-up numbered step cards, closing output band.
========================================================= */
.d-sec-engine { background: var(--d-bg); }
.d-sec-engine__glow {
width: min(960px, 94%); height: 440px;
left: 50%; top: -60px;
transform: translateX(-50%);
opacity: .5;
}
/* ---- head ---- */
.d-sec-engine__head {
max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.d-sec-engine__eyebrow { margin-bottom: 16px; }
.d-sec-engine__eyebrow svg { width: 18px; height: 18px; flex: none; }
.d-sec-engine__title { margin: 0; }
.d-sec-engine__desc {
margin: 20px auto 0;
max-width: 660px;
}
/* ---- step cards ---- */
.d-sec-engine__grid { position: relative; z-index: 1; }
.d-sec-engine__card {
position: relative;
overflow: hidden;
padding: 32px 28px;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius-lg);
transition: border-color .25s ease, transform .25s ease;
}
.d-sec-engine__card:hover {
border-color: var(--d-accent-deep);
transform: translateY(-4px);
}
.d-sec-engine__step {
position: absolute; top: 14px; right: 22px;
font-family: var(--ff-accent);
font-size: 76px; font-weight: 700; line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.10);
pointer-events: none;
user-select: none;
}
.d-sec-engine__card-icon {
display: inline-grid; place-items: center;
width: 54px; height: 54px;
border-radius: 50%;
background: var(--d-accent-soft);
border: 1px solid var(--d-accent-deep);
color: var(--d-accent);
font-size: 24px; line-height: 1;
}
.d-sec-engine__card-icon:empty { display: none; }
.d-sec-engine__card-title {
margin: 24px 0 0;
font-family: var(--ff-body); font-weight: 400;
font-size: 22px; line-height: 1.3;
color: var(--d-text);
}
.d-sec-engine__card-desc {
margin: 12px 0 0;
font-size: 15px; line-height: 1.65;
color: var(--d-muted-2);
}
/* ---- closing output band ---- */
.d-sec-engine__output {
margin-top: clamp(32px, 4vw, 48px);
padding: 34px 38px;
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 28px;
background:
radial-gradient(120% 180% at 0% 50%, rgba(255,95,31,.14), transparent 62%),
var(--d-card-2);
border: 1px solid var(--d-accent-deep);
border-radius: var(--d-radius-lg);
}
.d-sec-engine__output-body { flex: 1 1 420px; min-width: 0; }
.d-sec-engine__output-title {
margin: 0;
font-family: var(--ff-body); font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3;
color: var(--d-text);
}
.d-sec-engine__output-text {
margin: 10px 0 0;
font-size: 15px; line-height: 1.65;
color: var(--d-muted);
}
.d-sec-engine__output-action { flex: none; }
.d-sec-engine__btn { padding: 12px 12px 12px 28px; gap: 12px; }
.d-sec-engine__btn-label { line-height: 1; }
.d-sec-engine__btn .d-btn__dot { background: #fff; color: #101010; font-size: 16px; }
/* ---- responsive ---- */
@media (max-width: 991px) {
.d-sec-engine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-sec-engine__card { padding: 28px 24px; }
.d-sec-engine__step { font-size: 64px; }
.d-sec-engine__output { padding: 28px; gap: 22px; }
}
@media (max-width: 575px) {
.d-sec-engine__grid { grid-template-columns: 1fr; }
.d-sec-engine__head { text-align: left; }
.d-sec-engine__desc { margin-inline: 0; }
.d-sec-engine__card-title { font-size: 20px; }
.d-sec-engine__output { padding: 24px 20px; }
.d-sec-engine__output-action, .d-sec-engine__btn { width: 100%; }
.d-sec-engine__btn { justify-content: space-between; }
}
/* ===== section: lifecycle ===== */
/* =========================================================
SECTION: LIFECYCLE (.d-sec-lifecycle) — the 6 trade states on a
connector rail: horizontal track >=992px, vertical spine <=991px.
========================================================= */
.d-sec-lifecycle { background: var(--d-bg-alt); }
.d-sec-lifecycle__glow {
width: min(1120px, 94%); height: 380px;
left: 50%; top: 56%;
transform: translate(-50%, -50%);
opacity: .42;
}
/* ---- head ---- */
.d-sec-lifecycle__head {
max-width: 760px;
margin: 0 auto clamp(44px, 5vw, 68px);
text-align: center;
}
.d-sec-lifecycle__eyebrow { margin-bottom: 16px; }
.d-sec-lifecycle__eyebrow svg { width: 18px; height: 18px; flex: none; }
.d-sec-lifecycle__title { margin: 0; }
.d-sec-lifecycle__desc { margin: 20px auto 0; max-width: 660px; }
/* ---- rail ---- */
.d-sec-lifecycle__rail { position: relative; }
/* the track: spans first node centre -> last node centre only, so it never
overhangs. Its ::before paints the visible hairline, behind the markers.
The nodes are flush-left inside their grid columns, not centred in them, so
a node centre sits 34px (10px column padding + half the 48px marker) from
its column's left edge -- NOT at the column's midpoint. The last column
starts at 5/6 of the rail, hence the right inset of one column minus 34px. */
.d-sec-lifecycle__rail-line {
position: absolute;
top: 24px; /* half of the 48px node marker */
left: 34px; /* centre of node 1 */
right: calc(100% / 6 - 34px); /* centre of node 6 */
height: 2px;
z-index: 0;
pointer-events: none;
}
.d-sec-lifecycle__rail-line::before {
content: "";
position: absolute; inset: 0;
border-radius: var(--d-pill);
background: linear-gradient(90deg,
rgba(255,95,31,.15) 0%, rgba(255,95,31,.55) 50%, rgba(255,95,31,.15) 100%);
}
.d-sec-lifecycle__states {
position: relative;
z-index: 1;
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0; /* zero gap keeps the track maths exact */
}
.d-sec-lifecycle__state {
position: relative;
padding-inline: 10px;
}
.d-sec-lifecycle__node {
position: relative;
z-index: 2;
display: grid; place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--d-card-3);
border: 1px solid var(--d-accent-deep);
box-shadow: 0 0 0 6px var(--d-bg-alt);
}
.d-sec-lifecycle__num {
font-family: var(--ff-accent);
font-size: 14px; font-weight: 700; line-height: 1;
letter-spacing: .04em;
color: var(--d-accent);
}
.d-sec-lifecycle__card {
margin-top: 22px;
padding: 22px 20px;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
height: 100%;
transition: border-color .25s ease;
}
.d-sec-lifecycle__state:hover .d-sec-lifecycle__card { border-color: var(--d-border-2); }
.d-sec-lifecycle__icon {
display: inline-flex; align-items: center; justify-content: center;
font-size: 22px; line-height: 1;
color: var(--d-accent);
}
.d-sec-lifecycle__icon:empty { display: none; }
.d-sec-lifecycle__state-title {
margin: 14px 0 0;
font-family: var(--ff-body); font-weight: 400;
font-size: 18px; line-height: 1.32;
color: var(--d-text);
}
.d-sec-lifecycle__state-desc {
margin: 8px 0 0;
font-size: 14px; line-height: 1.6;
color: var(--d-muted-2);
}
/* ---- alerts callout ---- */
.d-sec-lifecycle__alerts {
margin-top: clamp(40px, 5vw, 60px);
padding: 26px 30px;
display: flex; align-items: flex-start; gap: 20px;
background: var(--d-card-2);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
}
.d-sec-lifecycle__alerts-icon {
flex: none;
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--d-accent-soft);
border: 1px solid var(--d-accent-deep);
color: var(--d-accent);
}
.d-sec-lifecycle__alerts-icon svg { width: 22px; height: 22px; }
.d-sec-lifecycle__alerts-body { min-width: 0; }
.d-sec-lifecycle__alerts-title {
margin: 0;
font-family: var(--ff-body); font-weight: 400;
font-size: 20px; line-height: 1.3;
color: var(--d-text);
}
.d-sec-lifecycle__alerts-text {
margin: 8px 0 0;
font-size: 15px; line-height: 1.65;
color: var(--d-muted);
}
/* ---- responsive: the rail becomes a vertical spine ---- */
@media (max-width: 991px) {
.d-sec-lifecycle__head { margin-bottom: 40px; }
.d-sec-lifecycle__rail-line { display: none; }
.d-sec-lifecycle__states {
grid-auto-flow: row;
grid-auto-columns: auto;
gap: 32px;
}
.d-sec-lifecycle__state {
display: flex; align-items: flex-start; gap: 20px;
padding-inline: 0;
}
/* vertical connector: node centre of this state -> node of the next */
.d-sec-lifecycle__state:not(:last-child)::before {
content: "";
position: absolute;
left: 23px; top: 48px; bottom: -32px;
width: 2px;
z-index: 0;
background: linear-gradient(180deg, rgba(255,95,31,.5), rgba(255,95,31,.12));
}
.d-sec-lifecycle__node { flex: none; }
.d-sec-lifecycle__card { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.d-sec-lifecycle__alerts { padding: 24px; }
}
@media (max-width: 575px) {
.d-sec-lifecycle__head { text-align: left; }
.d-sec-lifecycle__desc { margin-inline: 0; }
.d-sec-lifecycle__state { gap: 14px; }
.d-sec-lifecycle__node { width: 40px; height: 40px; }
.d-sec-lifecycle__state:not(:last-child)::before { left: 19px; top: 40px; }
.d-sec-lifecycle__card { padding: 18px 16px; }
.d-sec-lifecycle__alerts { flex-direction: column; gap: 14px; padding: 20px; }
}
/* ===== section: sizing ===== */
/* =========================================================
SECTION: SIZING (.d-sec-sizing) — risk/position-sizing split:
copy + CTA on the left, stacked method cards on the right.
========================================================= */
.d-sec-sizing { background: var(--d-bg); }
.d-sec-sizing__glow {
width: 620px; height: 620px;
right: -200px; top: -160px;
border-radius: 50%;
opacity: .4;
}
/* ---- split ---- */
.d-sec-sizing__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: start;
gap: clamp(40px, 5vw, 72px);
}
/* ---- left: copy ---- */
.d-sec-sizing__copy { position: relative; }
.d-sec-sizing__eyebrow { margin-bottom: 16px; }
.d-sec-sizing__eyebrow svg { width: 18px; height: 18px; flex: none; }
.d-sec-sizing__title { margin: 0; }
.d-sec-sizing__desc { margin: 20px 0 0; max-width: 520px; }
.d-sec-sizing__action { margin-top: 32px; }
.d-sec-sizing__btn { padding: 12px 12px 12px 28px; gap: 12px; }
.d-sec-sizing__btn-label { line-height: 1; }
.d-sec-sizing__btn .d-btn__dot { background: #fff; color: #101010; font-size: 16px; }
/* ---- right: method cards ---- */
.d-sec-sizing__methods { display: grid; gap: 16px; }
.d-sec-sizing__card {
display: flex; align-items: flex-start; gap: 18px;
padding: 22px 24px;
background: var(--d-card);
border: 1px solid var(--d-border);
border-radius: var(--d-radius);
transition: border-color .25s ease, transform .25s ease;
}
.d-sec-sizing__card:hover {
border-color: var(--d-accent-deep);
transform: translateY(-2px);
}
.d-sec-sizing__card-icon {
flex: none;
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: var(--d-radius-sm);
background: var(--d-accent-soft);
border: 1px solid var(--d-accent-deep);
color: var(--d-accent);
font-size: 20px; line-height: 1;
}
.d-sec-sizing__card-body { min-width: 0; }
.d-sec-sizing__card-title {
margin: 0;
font-family: var(--ff-body); font-weight: 400;
font-size: 18px; line-height: 1.32;
color: var(--d-text);
}
.d-sec-sizing__card-desc {
margin: 8px 0 0;
font-size: 14px; line-height: 1.6;
color: var(--d-muted-2);
}
/* ---- note ---- */
.d-sec-sizing__note { margin-top: clamp(40px, 5vw, 64px); }
.d-sec-sizing__note-text { margin: 0; }
/* ---- responsive ---- */
@media (max-width: 991px) {
.d-sec-sizing__split { grid-template-columns: 1fr; gap: 40px; }
.d-sec-sizing__desc { max-width: none; }
.d-sec-sizing__glow { width: 460px; height: 460px; right: -180px; top: -120px; }
}
@media (max-width: 575px) {
.d-sec-sizing__action, .d-sec-sizing__btn { width: 100%; }
.d-sec-sizing__btn { justify-content: space-between; }
.d-sec-sizing__card { padding: 18px 16px; gap: 14px; }
.d-sec-sizing__card-icon { width: 40px; height: 40px; font-size: 18px; }
}
/* ===== shared: risk disclosure ===== */
/* =========================================================
RISK COPY (.d-risk-note / .d-risk-line) — used outside the
.d-sec-* blocks (footer, overview tail), so fully self-contained.
========================================================= */
.d-risk-note {
margin-block: 32px;
padding: 20px 24px;
background: rgba(255,255,255,.02);
border: 1px solid var(--d-border);
border-left: 2px solid var(--d-accent-deep);
border-radius: var(--d-radius-sm);
font-family: var(--ff-body);
font-size: 13px; line-height: 1.75;
color: var(--d-muted-2);
}
.d-risk-note p { margin: 0; }
.d-risk-line {
margin: clamp(28px, 3vw, 40px) 0 0;
text-align: center;
font-family: var(--ff-body);
font-size: 13px; line-height: 1.6;
color: var(--d-muted-2);
}
@media (max-width: 575px) {
.d-risk-note { padding: 16px 18px; margin-block: 24px; }
.d-risk-line { text-align: left; }
}