/* Platform marketing + agency-registration site (Views/Platform/*). Dark is the default; data-theme="light" on flips the palette. */ :root, :root[data-theme="dark"] { --color-bg: #12141f; --color-surface: #1d2032; --color-surface-2: #242840; --color-text: #e9e9ed; --color-muted: rgba(233, 233, 237, 0.6); --color-divider: rgba(233, 233, 237, 0.14); --color-section: #191c2c; --color-section-ghost: rgba(233, 233, 237, 0.08); --color-accent: #9184d9; --color-accent-100: #d9d5f4; --color-accent-200: #c2bbec; --color-accent-300: #aba2e3; --color-accent-600: #6d5fc7; --color-accent-700: #564aa0; --color-accent-800: #423a7a; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] { --color-bg: #f7f7fb; --color-surface: #ffffff; --color-surface-2: #f0f1fa; --color-text: #23252b; --color-muted: rgba(35, 37, 43, 0.58); --color-divider: rgba(35, 37, 43, 0.12); --color-section: #eef0fa; --color-section-ghost: rgba(35, 37, 43, 0.05); --color-accent: #6d5fc7; --color-accent-100: #f1effb; --color-accent-200: #ded8f4; --color-accent-300: #b6ace3; --color-accent-600: #574aa8; --color-accent-700: #443884; --color-accent-800: #332a63; --shadow-sm: 0 1px 3px rgba(20, 20, 40, 0.06); --shadow-md: 0 8px 24px rgba(20, 20, 40, 0.08); --shadow-lg: 0 20px 60px rgba(20, 20, 40, 0.14); } body.platform-body { background: var(--color-bg); color: var(--color-text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; min-height: 100vh; margin: 0; overflow-x: hidden; } .platform-body .bn { font-family: "Noto Sans Bengali", var(--font-body, inherit); } .platform-body section { scroll-margin-top: 84px; } .platform-body a { color: var(--color-accent); text-decoration: none; } .platform-body a:hover { color: var(--color-accent-300); } .p-navbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--color-bg) 86%, transparent); box-shadow: 0 1px 0 var(--color-divider); } .p-navbar .brand-mark { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--color-accent); display: grid; place-items: center; color: var(--color-accent); font-size: 15px; flex: none; } .p-navbar .nav-link { color: var(--color-text); font-size: 14px; } .p-navbar .nav-link:hover { color: var(--color-accent); } .p-icon-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; } .p-icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .p-lang-toggle { display: inline-flex; border: 1px solid var(--color-divider); border-radius: 999px; overflow: hidden; } .p-lang-toggle a { padding: 6px 12px; font-size: 12px; color: var(--color-muted); display: inline-block; } .p-lang-toggle a.active { background: var(--color-accent); color: #fff; } .p-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .p-card-elev { box-shadow: var(--shadow-md); } .p-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; } /* ".platform-body a" above is a class+type selector (specificity 0,1,1), which beats a single-class ".btn-p-primary" (0,1,0) regardless of source order — every link styled as a button would otherwise render its accent-colored text on an accent-colored background, i.e. invisible. Prefixing with ".platform-body" (0,2,0) settles that unambiguously. */ .platform-body .btn-p-primary { background: var(--color-accent); border: 1px solid var(--color-accent); color: #fff; border-radius: var(--radius-md); padding: 10px 18px; font-size: 14.5px; cursor: pointer; } .platform-body .btn-p-primary:hover { filter: brightness(1.05); color: #fff; } .platform-body .btn-p-secondary { background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); border-radius: var(--radius-md); padding: 10px 18px; font-size: 14.5px; cursor: pointer; } .platform-body .btn-p-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .platform-body .btn-p-ghost { background: transparent; border: 0; color: var(--color-muted); padding: 6px 10px; font-size: 12.5px; cursor: pointer; } .p-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--color-divider); color: var(--color-muted); } .p-tag-accent { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .p-field label { font-size: 12.5px; color: var(--color-muted); margin-bottom: 6px; display: block; } .p-field .form-control, .p-field .form-select { background: var(--color-surface-2); border: 1px solid var(--color-divider); color: var(--color-text); border-radius: var(--radius-md); } .p-field .form-control:focus, .p-field .form-select:focus { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-accent); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-accent) 20%, transparent); } .p-field .invalid-feedback { color: #e08a9a; } .p-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-muted); font-size: 13px; cursor: pointer; } .p-chip.active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); } .p-seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; width: 100%; } .p-seg label { flex: 1; text-align: center; padding: 9px; font-size: 13.5px; cursor: pointer; color: var(--color-muted); } .p-seg input { display: none; } .p-seg input:checked + span { font-weight: 600; } .p-seg label:has(input:checked) { background: var(--color-accent-100); color: var(--color-accent-600); } .p-swatch { width: 38px; height: 38px; border-radius: var(--radius-md); cursor: pointer; border: 2px solid transparent; } .p-swatch.active { border-color: var(--color-text); } .plan-pick.active { border-color: var(--color-accent) !important; box-shadow: 0 0 0 1px var(--color-accent); } .p-step-line { padding-top: 12px; border-top: 2px solid var(--color-divider); } .p-step-line.done { border-top-color: var(--color-accent); } .p-step-line .num { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); } .p-step-line.done .num { color: var(--color-accent-200); } .p-faq-item { border-top: 1px solid var(--color-divider); } .p-faq-item button { width: 100%; display: flex; align-items: center; gap: 20px; padding: 20px 0; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; } .p-faq-item .sign { font-size: 20px; color: var(--color-accent); line-height: 1; } .p-faq-item .panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .p-faq-item.open .panel { max-height: 420px; } .p-faq-item p { color: var(--color-muted); padding: 0 40px 22px 0; margin: 0; line-height: 1.7; } .p-preview { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); } .p-preview .bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--color-divider); } .p-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 70; padding: 11px 18px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); font-size: 13px; display: none; align-items: center; gap: 10px; } .p-toast.show { display: flex; } @media (max-width: 991.98px) { .p-hero-grid { grid-template-columns: 1fr !important; } .p-nav-links { display: none !important; } }