6725 lines
118 KiB
CSS
6725 lines
118 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&display=swap");
|
|
@import "tailwindcss";
|
|
|
|
:root {
|
|
--brand-orange: #fd6116;
|
|
--brand-orange-dark: #e45a14;
|
|
--brand-navy: #050026;
|
|
--ink: #100b2f;
|
|
--bg-soft: #f6f8ff;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Exo 2", sans-serif;
|
|
color: var(--ink);
|
|
scrollbar-gutter: stable;
|
|
background: #07051a;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: min(1260px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
|
background: rgba(255, 255, 255, 0.82);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.nav-row {
|
|
min-height: 74px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.brand-logo {
|
|
height: 46px;
|
|
width: auto;
|
|
}
|
|
|
|
.nav-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.landing {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.hero-wrap {
|
|
padding: 38px 0 20px;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.8fr;
|
|
gap: 18px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
color: var(--brand-orange);
|
|
}
|
|
|
|
.hero-title {
|
|
margin: 8px 0 12px;
|
|
font-size: clamp(30px, 4vw, 52px);
|
|
line-height: 1.06;
|
|
}
|
|
|
|
.hero-copy {
|
|
margin: 0;
|
|
color: #475569;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hero-actions {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-panel {
|
|
border: 1px solid #dbe1ec;
|
|
border-radius: 18px;
|
|
background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78));
|
|
padding: 16px;
|
|
box-shadow: 0 20px 42px -30px rgba(2, 6, 23, 0.66);
|
|
}
|
|
|
|
.hero-panel h3 {
|
|
margin: 0 0 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.chip-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chip {
|
|
border-radius: 999px;
|
|
border: 1px solid #fed7aa;
|
|
background: #fff7ed;
|
|
color: #9a3412;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.section {
|
|
padding: 28px 0;
|
|
}
|
|
|
|
.section.soft {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.6));
|
|
border-top: 1px solid rgba(148, 163, 184, 0.24);
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.section-copy {
|
|
margin: 8px 0 0;
|
|
color: #64748b;
|
|
}
|
|
|
|
.role-grid {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.role-card,
|
|
.card {
|
|
border: 1px solid #dbe1ec;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
padding: 14px;
|
|
}
|
|
|
|
.role-card h3 {
|
|
margin: 8px 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.role-card p,
|
|
.card p,
|
|
.note {
|
|
margin: 0;
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.role-badge {
|
|
display: inline-block;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.36);
|
|
background: rgba(253, 98, 22, 0.1);
|
|
color: #9a3412;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 4px 9px;
|
|
}
|
|
|
|
.role-card .btn {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.split {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.card h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.btn {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
color: #0f172a;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn.primary {
|
|
border-color: var(--brand-orange);
|
|
background: var(--brand-orange);
|
|
color: #fff;
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: var(--brand-orange-dark);
|
|
}
|
|
|
|
.page {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 8px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.page-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.25fr 0.75fr;
|
|
gap: 16px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.input,
|
|
.select,
|
|
.textarea {
|
|
width: 100%;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
}
|
|
|
|
.textarea {
|
|
min-height: 84px;
|
|
}
|
|
|
|
.inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.note {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ok {
|
|
color: #0f766e;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.error {
|
|
margin-top: 6px;
|
|
color: #b91c1c;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.contact-hero-panel {
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.contact-form-card {
|
|
padding: 24px;
|
|
border-radius: 24px;
|
|
box-shadow: 0 18px 34px -24px rgba(2, 6, 23, 0.44);
|
|
}
|
|
|
|
.contact-layout-grid {
|
|
display: grid;
|
|
gap: 20px;
|
|
grid-template-columns: 1.45fr 1fr;
|
|
}
|
|
|
|
.contact-side-card {
|
|
padding: 24px;
|
|
border-radius: 24px;
|
|
box-shadow: 0 24px 42px -28px rgba(2, 6, 23, 0.82);
|
|
}
|
|
|
|
.contact-pill-row {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.contact-pill {
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.contact-upload {
|
|
margin-top: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(16, 11, 47, 0.16);
|
|
background: #fff;
|
|
padding: 10px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact-upload-icon {
|
|
color: #fd6116;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.contact-upload-text {
|
|
color: #334155;
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.contact-upload-input {
|
|
display: none;
|
|
}
|
|
|
|
.contact-detail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.contact-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fd6116;
|
|
}
|
|
|
|
.contact-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.9;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.contact-mini-faq-grid {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.contact-mini-faq-card {
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(16, 11, 47, 0.14);
|
|
background: rgba(255, 255, 255, 0.94);
|
|
padding: 18px;
|
|
box-shadow: 0 12px 24px -20px rgba(2, 6, 23, 0.36);
|
|
}
|
|
|
|
.contact-mini-faq-card h3 {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.contact-mini-faq-card p {
|
|
margin: 8px 0 0;
|
|
color: #334155;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.contact-quick-clarity {
|
|
color: #fff !important;
|
|
font-weight: 600;
|
|
text-shadow: 0 1px 10px rgba(2, 6, 23, 0.42);
|
|
}
|
|
|
|
.help-hero-panel {
|
|
border-radius: 30px;
|
|
box-shadow: 0 24px 50px -36px rgba(2, 6, 23, 0.9);
|
|
}
|
|
|
|
.help-section-lg {
|
|
padding-top: 40px;
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.help-section-mid {
|
|
padding-top: 32px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.help-search-grid {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: minmax(0, 1fr) 220px;
|
|
}
|
|
|
|
.help-search-btn {
|
|
justify-self: start;
|
|
}
|
|
|
|
.help-solid-section {
|
|
background: transparent;
|
|
}
|
|
|
|
.help-article-list {
|
|
display: grid;
|
|
gap: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.help-article-headline {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.help-article-headline h2 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.help-article-headline span {
|
|
font-size: 13px;
|
|
color: rgba(226, 232, 240, 0.82);
|
|
}
|
|
|
|
.help-empty-card {
|
|
border-radius: 16px;
|
|
border: 1px dashed rgba(16, 11, 47, 0.2);
|
|
background: #f8fafc;
|
|
padding: 32px;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.help-cta-panel {
|
|
border-radius: 28px;
|
|
box-shadow: 0 24px 50px -36px rgba(2, 6, 23, 0.9);
|
|
}
|
|
|
|
.help-category-head {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.help-category-kicker {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
}
|
|
|
|
.help-clear-filter {
|
|
color: #fd6116;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.help-category-row {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.help-category-pill {
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(16, 11, 47, 0.16);
|
|
background: #fff;
|
|
padding: 8px 14px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #100b2f;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.help-category-pill-active {
|
|
border-color: rgba(253, 98, 22, 0.45);
|
|
background: #fff4ec;
|
|
color: #fd6116;
|
|
}
|
|
|
|
.help-article-card {
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(16, 11, 47, 0.12);
|
|
background: #fff;
|
|
padding: 22px;
|
|
box-shadow: 0 18px 36px -30px rgba(2, 6, 23, 0.55);
|
|
}
|
|
|
|
.help-article-link {
|
|
color: #100b2f;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.help-article-link:hover {
|
|
color: #fd6116;
|
|
}
|
|
|
|
.help-article-summary {
|
|
margin: 8px 0 0;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
color: #475569;
|
|
}
|
|
|
|
.help-article-tags {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.help-article-tag {
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(16, 11, 47, 0.12);
|
|
background: #f8fafc;
|
|
padding: 4px 10px;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.help-article-meta {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.help-read-link {
|
|
color: #fd6116;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.help-read-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.help-article-body {
|
|
margin-top: 18px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(16, 11, 47, 0.12);
|
|
background: #fff;
|
|
padding: 18px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.contact-layout-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.help-search-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.help-section-lg {
|
|
padding-top: 32px;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.help-section-mid {
|
|
padding-top: 24px;
|
|
padding-bottom: 28px;
|
|
}
|
|
}
|
|
|
|
.step-pill {
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid #fed7aa;
|
|
background: #fff7ed;
|
|
padding: 4px 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.preview {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 12px;
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 10px;
|
|
max-height: 560px;
|
|
overflow: auto;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.hero-grid,
|
|
.split,
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.role-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.role-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hero-wrap {
|
|
padding-top: 24px;
|
|
}
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.nav-links a,
|
|
.footer-links a {
|
|
text-decoration: none;
|
|
color: #334155;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-links a:hover,
|
|
.footer-links a:hover {
|
|
color: var(--brand-orange);
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 20px;
|
|
border-top: 1px solid rgba(148, 163, 184, 0.25);
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.footer-row {
|
|
min-height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.footer-row p {
|
|
margin: 0;
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 14px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.nav-row {
|
|
flex-wrap: wrap;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.footer-row {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: 12px 0;
|
|
}
|
|
}
|
|
|
|
.public-main {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.public-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
border-bottom: 1px solid rgba(16, 11, 47, 0.1);
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(24px);
|
|
transition:
|
|
box-shadow 300ms ease,
|
|
border-color 300ms ease,
|
|
background-color 300ms ease;
|
|
}
|
|
|
|
.public-header-scrolled {
|
|
box-shadow: 0 12px 26px -24px rgba(2, 8, 23, 0.28);
|
|
}
|
|
|
|
.public-header .container {
|
|
width: min(1260px, calc(100% - 32px));
|
|
}
|
|
|
|
.public-header .nav-row {
|
|
min-height: 76px;
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.public-header-scrolled .nav-row {
|
|
padding: 14px 0;
|
|
}
|
|
|
|
.public-header .brand-logo {
|
|
height: 48px;
|
|
}
|
|
|
|
.public-header .nav-links {
|
|
gap: 24px;
|
|
}
|
|
|
|
.public-header .nav-links a {
|
|
position: relative;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
color: #100b2f;
|
|
font-weight: 500;
|
|
transition: color 180ms ease;
|
|
}
|
|
|
|
.public-header .nav-links a::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -4px;
|
|
width: 100%;
|
|
height: 2px;
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
background: #fd6116;
|
|
transition: transform 260ms ease;
|
|
}
|
|
|
|
.public-header .nav-links a:hover {
|
|
color: #fd6116;
|
|
}
|
|
|
|
.public-header .nav-links a:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.public-header .nav-links a.active,
|
|
.public-header .nav-links a[aria-current="page"] {
|
|
color: #fd6116;
|
|
}
|
|
|
|
.public-header .nav-links a.active::after,
|
|
.public-header .nav-links a[aria-current="page"]::after {
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
.nav-auth-btn {
|
|
min-width: 112px;
|
|
min-height: 42px;
|
|
border-radius: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition:
|
|
transform 180ms ease,
|
|
box-shadow 220ms ease,
|
|
border-color 220ms ease,
|
|
background-color 220ms ease;
|
|
}
|
|
|
|
.nav-auth-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 0 0 3px rgba(253, 98, 22, 0.13),
|
|
0 12px 22px -14px rgba(2, 6, 23, 0.55);
|
|
}
|
|
|
|
.nav-auth-secondary {
|
|
border: 1px solid rgba(16, 11, 47, 0.2);
|
|
background: rgba(255, 255, 255, 0.85);
|
|
color: #100b2f;
|
|
}
|
|
|
|
.nav-auth-secondary:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
.nav-auth-primary {
|
|
border: 1px solid rgba(253, 98, 22, 0.72);
|
|
background: #fd6116;
|
|
color: #fff;
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.4) inset,
|
|
0 12px 24px -16px rgba(253, 98, 22, 0.9);
|
|
}
|
|
|
|
.nav-auth-primary:hover {
|
|
background: #eb5b14;
|
|
}
|
|
|
|
.desktop-only {
|
|
display: flex;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: none;
|
|
height: 40px;
|
|
width: 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(16, 11, 47, 0.18);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #100b2f;
|
|
}
|
|
|
|
.mobile-bars {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.mobile-bars span {
|
|
display: block;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: #100b2f;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: none;
|
|
border-top: 1px solid rgba(16, 11, 47, 0.1);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.mobile-nav-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.mobile-nav-links a {
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.mobile-nav-links a:hover {
|
|
background: rgba(16, 11, 47, 0.05);
|
|
}
|
|
|
|
.mobile-nav-actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mobile-login,
|
|
.mobile-signup {
|
|
flex: 1;
|
|
border-radius: 12px;
|
|
padding: 8px 16px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mobile-login {
|
|
border: 1px solid rgba(16, 11, 47, 0.2);
|
|
background: #fff;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.mobile-signup {
|
|
border: 1px solid rgba(253, 98, 22, 0.72);
|
|
background: #fd6116;
|
|
color: #fff;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* visually-hidden: hidden from view but still focusable/clickable for a11y */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 44px;
|
|
height: 44px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scene-dark {
|
|
background: transparent;
|
|
}
|
|
|
|
.scene-light {
|
|
position: relative;
|
|
}
|
|
|
|
.scene-light::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 8px 0;
|
|
background:
|
|
radial-gradient(36% 54% at 14% 0%, rgba(253, 98, 22, 0.14), transparent 72%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
|
|
border-top: 1px solid rgba(255, 255, 255, 0.28);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
|
z-index: -1;
|
|
}
|
|
|
|
.public-hero {
|
|
padding: 16px 0 40px;
|
|
}
|
|
|
|
.hero-grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-stack {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.float-card {
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
background: linear-gradient(150deg, rgba(16, 11, 47, 0.78), rgba(16, 11, 47, 0.55));
|
|
color: #fff;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.float-card h3 {
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.float-card p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.public-section {
|
|
padding: 28px 0;
|
|
}
|
|
|
|
.lp-section-hero {
|
|
padding: 24px 0 32px;
|
|
}
|
|
|
|
.lp-section {
|
|
padding: 28px 0 36px;
|
|
}
|
|
|
|
.panel {
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 18px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.panel-light {
|
|
border-color: #d9e2ef;
|
|
background: #fff;
|
|
}
|
|
|
|
.panel-dark {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
background: rgba(16, 11, 47, 0.44);
|
|
}
|
|
|
|
.panel-dark,
|
|
.panel-dark h2,
|
|
.panel-dark h3,
|
|
.panel-dark h4,
|
|
.panel-dark .center,
|
|
.panel-dark .sub,
|
|
.panel-dark p,
|
|
.panel-dark span {
|
|
color: #fff;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-head h2,
|
|
.center {
|
|
margin: 0;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.sub {
|
|
color: #64748b;
|
|
}
|
|
|
|
.panel-dark .sub {
|
|
color: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.choose-path-panel {
|
|
border-color: #e4e6f0;
|
|
background: #fff;
|
|
padding: 20px;
|
|
box-shadow: 0 22px 44px -32px rgba(2, 6, 23, 0.6);
|
|
}
|
|
|
|
.choose-path-panel .section-head h2 {
|
|
color: #100b2f;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.choose-path-panel .sub {
|
|
color: #334155;
|
|
margin-top: 8px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.filter-row {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.chip-btn {
|
|
border: 1px solid #d7dceb;
|
|
background: #fff;
|
|
color: #24314d;
|
|
border-radius: 999px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 180ms ease,
|
|
background-color 180ms ease,
|
|
color 180ms ease,
|
|
box-shadow 220ms ease;
|
|
}
|
|
|
|
.chip-btn:hover {
|
|
border-color: rgba(253, 98, 22, 0.7);
|
|
}
|
|
|
|
.chip-btn.active {
|
|
border-color: #fd6116;
|
|
background: #fd6116;
|
|
color: #fff;
|
|
box-shadow: 0 8px 18px -10px rgba(253, 98, 22, 0.8);
|
|
}
|
|
|
|
.path-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.path-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(16, 11, 47, 0.12);
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(14px);
|
|
transition:
|
|
transform 240ms ease,
|
|
border-color 240ms ease,
|
|
box-shadow 240ms ease;
|
|
}
|
|
|
|
.path-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -30%;
|
|
background: radial-gradient(circle at 50% 50%, rgba(253, 98, 22, 0.18), transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity 240ms ease;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.path-card:hover {
|
|
transform: translateY(-4px);
|
|
border-color: rgba(253, 98, 22, 0.65);
|
|
box-shadow: 0 22px 42px -30px rgba(253, 98, 22, 0.85);
|
|
}
|
|
|
|
.path-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.path-media {
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.path-card img {
|
|
width: 100%;
|
|
height: 112px;
|
|
object-fit: cover;
|
|
transition: transform 500ms ease;
|
|
}
|
|
|
|
.path-card:hover img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.path-media-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.24), transparent);
|
|
}
|
|
|
|
.path-body {
|
|
padding: 12px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.path-head-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.path-icon {
|
|
color: #fd6116;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 300ms ease;
|
|
}
|
|
|
|
.path-icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.path-chip-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.path-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(16, 11, 47, 0.15);
|
|
background: rgba(255, 255, 255, 0.68);
|
|
color: #1e293b;
|
|
padding: 4px 8px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.path-chip svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: #fd6116;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.path-secondary-btn {
|
|
margin-top: 16px;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(16, 11, 47, 0.2);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #100b2f;
|
|
text-decoration: none;
|
|
transition:
|
|
border-color 180ms ease,
|
|
color 180ms ease;
|
|
}
|
|
|
|
.path-secondary-btn:hover {
|
|
border-color: rgba(253, 98, 22, 0.7);
|
|
color: #100b2f;
|
|
}
|
|
|
|
.lp-view-all-btn {
|
|
width: auto;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.lp-role-cta-grid {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.role-benefit-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.role-benefit-card {
|
|
border: 1px solid rgba(16, 11, 47, 0.14);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
padding: 14px;
|
|
box-shadow: 0 12px 28px -26px rgba(253, 98, 22, 0.9);
|
|
transition:
|
|
transform 200ms ease,
|
|
box-shadow 200ms ease,
|
|
border-color 200ms ease;
|
|
}
|
|
|
|
.role-benefit-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(253, 98, 22, 0.34);
|
|
box-shadow: 0 16px 30px -24px rgba(253, 98, 22, 0.55);
|
|
}
|
|
|
|
.role-benefit-card h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: #100b2f;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.role-benefit-card-simple {
|
|
padding: 16px;
|
|
}
|
|
|
|
.role-benefit-card-simple p {
|
|
margin: 8px 0 0;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.pro-detail-benefit-meta {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.pro-detail-benefit-icon-wrap {
|
|
display: inline-flex;
|
|
width: 36px;
|
|
height: 36px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(253, 98, 22, 0.35);
|
|
background: linear-gradient(150deg, rgba(253, 98, 22, 0.18), rgba(253, 98, 22, 0.05));
|
|
}
|
|
|
|
.pro-detail-benefit-icon-wrap img {
|
|
width: 17px;
|
|
height: 17px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.pro-detail-benefit-index {
|
|
display: inline-flex;
|
|
min-width: 32px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.28);
|
|
background: rgba(253, 98, 22, 0.1);
|
|
color: #d14b05;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.role-offer-list {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.role-offer-item {
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pro-detail-offer-icon {
|
|
display: inline-flex;
|
|
width: 20px;
|
|
height: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: rgba(253, 98, 22, 0.2);
|
|
color: #ffc9ab;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.lp-path-controls {
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lp-path-arrow {
|
|
display: inline-flex;
|
|
width: 40px;
|
|
height: 40px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.5);
|
|
background: #fff;
|
|
color: #fd6116;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lp-path-arrow:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.path-carousel-shell {
|
|
margin-top: 18px;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.path-carousel-track {
|
|
display: flex;
|
|
transition: transform 500ms ease-out;
|
|
}
|
|
|
|
.path-carousel-track-hover .path-card {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 16px 30px -26px rgba(253, 98, 22, 0.55);
|
|
border-color: rgba(253, 98, 22, 0.35);
|
|
}
|
|
|
|
.path-page {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.path-grid-1 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.path-grid-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.path-grid-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.lp-path-dots {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lp-path-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #c9cedf;
|
|
}
|
|
|
|
.lp-path-dot.active {
|
|
width: 28px;
|
|
background: #fd6116;
|
|
}
|
|
|
|
.path-body h3 {
|
|
margin: 8px 0 0;
|
|
color: #100b2f;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.path-body p {
|
|
margin: 4px 0 0;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.path-card:hover .path-icon {
|
|
transform: rotate(7deg);
|
|
}
|
|
|
|
.benefit-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.benefit-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(253, 98, 22, 0.32);
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(253, 98, 22, 0.2), transparent 55%),
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
|
|
box-shadow: 0 20px 42px -30px rgba(253, 98, 22, 0.72);
|
|
}
|
|
|
|
.benefit-card h3 {
|
|
margin: 10px 0 0;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.benefit-card p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.benefit-card .role-card-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.benefit-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.benefit-index {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.45);
|
|
background: rgba(253, 98, 22, 0.14);
|
|
color: #ffd5c0;
|
|
padding: 4px 9px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.benefit-divider {
|
|
display: block;
|
|
width: 56px;
|
|
height: 2px;
|
|
margin: 10px 0 12px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, #fd6116, rgba(253, 98, 22, 0.1));
|
|
}
|
|
|
|
.benefit-card:hover {
|
|
border-color: rgba(253, 98, 22, 0.54);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.flow-card {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
border: 1px solid #dbe1ec;
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.flow-card > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 360px;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.step-list {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.step-item {
|
|
display: grid;
|
|
grid-template-columns: 32px 1fr;
|
|
gap: 8px;
|
|
border: 1px solid #dbe1ec;
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.step-item.active {
|
|
border-color: #fd6116;
|
|
background: #fff7ed;
|
|
}
|
|
|
|
.step-item span {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.step-item h4 {
|
|
margin: 0;
|
|
}
|
|
|
|
.step-item p {
|
|
margin: 4px 0 0;
|
|
color: #475569;
|
|
}
|
|
|
|
.faq-wrap {
|
|
max-width: 980px;
|
|
}
|
|
|
|
.faq-wrap h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.faq-wrap .sub {
|
|
margin-top: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.faq-list {
|
|
margin-top: 24px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.faq-item {
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(8px);
|
|
overflow: hidden;
|
|
transition:
|
|
border-color 220ms ease,
|
|
background-color 220ms ease,
|
|
box-shadow 220ms ease;
|
|
}
|
|
|
|
.faq-item.open {
|
|
border-color: rgba(253, 98, 22, 0.66);
|
|
background: rgba(255, 255, 255, 0.14);
|
|
box-shadow: 0 0 0 1px rgba(253, 98, 22, 0.24) inset;
|
|
}
|
|
|
|
.faq-q {
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #fff;
|
|
padding: 16px 20px;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pro-detail-faq-icon {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.45);
|
|
background: rgba(253, 98, 22, 0.2);
|
|
color: #ffc9ab;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.faq-q-icon {
|
|
display: inline-flex;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
color: rgba(255, 255, 255, 0.74);
|
|
transform: rotate(0deg);
|
|
transition:
|
|
transform 220ms ease,
|
|
color 220ms ease;
|
|
}
|
|
|
|
.faq-q-icon.open {
|
|
transform: rotate(180deg);
|
|
color: #fd6116;
|
|
}
|
|
|
|
.faq-a {
|
|
margin: 0;
|
|
padding: 0 20px 16px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.landing-hiw-section {
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.landing-faq-section {
|
|
padding-top: 28px;
|
|
}
|
|
|
|
.pro-real-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.pro-real-card {
|
|
border: 1px solid rgba(16, 11, 47, 0.14);
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
padding: 16px;
|
|
box-shadow: 0 12px 24px -24px rgba(253, 98, 22, 0.6);
|
|
}
|
|
|
|
.pro-real-card h3 {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.pro-real-card ul {
|
|
margin: 12px 0 0;
|
|
padding-left: 18px;
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.pro-real-card li {
|
|
color: #334155;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.pro-real-note {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.pro-detail-trust-strip-wrap {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.pro-detail-trust-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.pro-detail-trust-card {
|
|
position: relative;
|
|
border: 1px solid rgba(253, 98, 22, 0.24);
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.9));
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: 36px 1fr;
|
|
gap: 10px;
|
|
align-items: start;
|
|
box-shadow: 0 12px 28px -24px rgba(253, 98, 22, 0.55);
|
|
transition:
|
|
transform 220ms ease,
|
|
box-shadow 220ms ease,
|
|
border-color 220ms ease;
|
|
}
|
|
|
|
.pro-detail-trust-card .role-card-icon {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
|
|
.pro-detail-trust-label {
|
|
display: inline-flex;
|
|
min-width: 36px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.38);
|
|
background: rgba(253, 98, 22, 0.12);
|
|
color: #c2410c;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.pro-detail-trust-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(253, 98, 22, 0.46);
|
|
box-shadow: 0 18px 36px -24px rgba(253, 98, 22, 0.6);
|
|
}
|
|
|
|
.pro-detail-trust-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 11px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
background: linear-gradient(145deg, #fd6116, #f97316);
|
|
}
|
|
|
|
.pro-detail-trust-card h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
color: #130e3a;
|
|
}
|
|
|
|
.pro-detail-trust-card p {
|
|
margin: 6px 0 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #3f355f;
|
|
}
|
|
|
|
.pro-detail-cta-points {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pro-detail-cta-points span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 7px 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.45);
|
|
background: rgba(253, 98, 22, 0.14);
|
|
color: #ffe9dc;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.cta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.cta-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cta-glow {
|
|
position: absolute;
|
|
inset: -24% -14%;
|
|
background:
|
|
radial-gradient(46% 54% at 12% 8%, rgba(253, 98, 22, 0.28), transparent 72%),
|
|
radial-gradient(30% 32% at 82% 74%, rgba(255, 255, 255, 0.12), transparent 72%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cta-copy,
|
|
.cta-actions {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cta-copy .sub {
|
|
max-width: 620px;
|
|
}
|
|
|
|
.cta-actions {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.pulse {
|
|
animation: ctaPulse 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
.public-footer {
|
|
position: relative;
|
|
z-index: 12;
|
|
border-top: 1px solid rgba(16, 11, 47, 0.1);
|
|
background: rgba(255, 255, 255, 0.96);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.public-footer-row {
|
|
min-height: 74px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 18px;
|
|
padding: 12px 0;
|
|
color: #334155;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.public-footer-row p {
|
|
margin: 0;
|
|
text-align: center;
|
|
color: #334155;
|
|
flex: 1;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.public-footer-logo {
|
|
height: 44px;
|
|
width: auto;
|
|
}
|
|
|
|
.public-footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.public-footer-links a {
|
|
color: #100b2f;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.public-footer-links a:hover {
|
|
color: #fd6116;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.public-footer-links {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.public-footer-row {
|
|
min-height: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
justify-items: center;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.public-footer-row p {
|
|
flex: initial;
|
|
}
|
|
|
|
.public-footer-logo {
|
|
height: 36px;
|
|
}
|
|
}
|
|
|
|
.ghost-dark {
|
|
border-color: rgba(255, 255, 255, 0.28);
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.path-grid,
|
|
.benefit-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.launch-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.desktop-only {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-menu-toggle {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: block;
|
|
}
|
|
|
|
.hero-grid-2,
|
|
.flow-card {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.whyHeroCard {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.whyCardContent {
|
|
padding: 20px 18px 72px;
|
|
}
|
|
|
|
.whyControls {
|
|
right: 12px;
|
|
bottom: -8px;
|
|
}
|
|
|
|
.whyOrbitalNav {
|
|
gap: 8px;
|
|
}
|
|
|
|
.whyOrbitalBtn {
|
|
height: 34px;
|
|
width: 34px;
|
|
}
|
|
|
|
.hiwCodeCard {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hiwCodeMedia {
|
|
min-height: 260px;
|
|
border-right: none;
|
|
border-bottom: 1px solid #e1e9f3;
|
|
}
|
|
|
|
.hiwCodeBigRect {
|
|
min-height: 210px;
|
|
}
|
|
|
|
.hiwCodeBody {
|
|
padding: 16px;
|
|
}
|
|
|
|
.hiwCodeTitle {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.path-grid,
|
|
.benefit-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.outcome-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.hiwCodeTitle {
|
|
font-size: 19px;
|
|
}
|
|
|
|
.hiwCodeDesc {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hiwCodeStep {
|
|
grid-template-columns: 26px 1fr;
|
|
gap: 8px;
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.hiwCodeStepNum {
|
|
width: 22px;
|
|
height: 22px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.hiwCodeStepTitle {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hiwCodeStepDesc {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.marketing-page {
|
|
padding-top: 28px;
|
|
padding-bottom: 28px;
|
|
}
|
|
|
|
.glass-dark {
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: linear-gradient(145deg, rgba(16, 11, 47, 0.78), rgba(16, 11, 47, 0.5));
|
|
color: #fff;
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.glass-light {
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.84));
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.title.light,
|
|
.subtitle.light,
|
|
.light {
|
|
color: #fff;
|
|
}
|
|
|
|
.glass-light .subtitle {
|
|
color: #334155;
|
|
}
|
|
|
|
.glass-light ul,
|
|
.glass-light li,
|
|
.glass-light p,
|
|
.glass-light h1,
|
|
.glass-light h2,
|
|
.glass-light h3,
|
|
.glass-light h4 {
|
|
color: #100b2f;
|
|
}
|
|
|
|
.glass-dark .subtitle {
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
/* Landing Parity Layer */
|
|
.lp-main {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
isolation: isolate;
|
|
background: #07051a;
|
|
}
|
|
|
|
.lp-main > *:not(.lp-bg) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.lp-bg {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.lp-dark-base {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(110% 85% at 6% 0%, rgba(253, 98, 22, 0.2), transparent 56%),
|
|
radial-gradient(90% 70% at 96% 10%, rgba(253, 98, 22, 0.16), transparent 58%),
|
|
linear-gradient(180deg, #100b2f 0%, #0b0824 58%, #07051a 100%);
|
|
}
|
|
|
|
.lp-mesh {
|
|
position: absolute;
|
|
inset: -12% -12%;
|
|
background:
|
|
radial-gradient(42% 36% at 14% 26%, rgba(2, 6, 23, 0.46), transparent 76%),
|
|
radial-gradient(34% 30% at 82% 14%, rgba(253, 98, 22, 0.2), transparent 74%),
|
|
radial-gradient(40% 32% at 66% 80%, rgba(2, 6, 23, 0.4), transparent 74%);
|
|
opacity: 0.58;
|
|
will-change: transform;
|
|
animation: none;
|
|
}
|
|
|
|
.lp-ribbon {
|
|
position: absolute;
|
|
inset: -18% -6%;
|
|
background: linear-gradient(
|
|
120deg,
|
|
transparent 35%,
|
|
rgba(253, 98, 22, 0.18) 55%,
|
|
transparent 74%
|
|
);
|
|
filter: blur(14px);
|
|
opacity: 0.54;
|
|
will-change: transform;
|
|
animation: none;
|
|
}
|
|
|
|
.lp-noise {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.05;
|
|
background-image: radial-gradient(
|
|
circle at 1px 1px,
|
|
rgba(255, 255, 255, 0.38) 1px,
|
|
transparent 0
|
|
);
|
|
background-size: 4px 4px;
|
|
mix-blend-mode: soft-light;
|
|
}
|
|
|
|
.lp-chips {
|
|
position: absolute;
|
|
inset: 0;
|
|
will-change: transform;
|
|
animation: lpIconLayerSway 10.5s ease-in-out infinite;
|
|
}
|
|
|
|
.lp-chip {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.46);
|
|
background: rgba(255, 255, 255, 0.14);
|
|
color: #fd6116;
|
|
backdrop-filter: blur(14px);
|
|
box-shadow:
|
|
0 18px 36px -22px rgba(2, 6, 23, 0.8),
|
|
0 0 0 1px rgba(253, 98, 22, 0.46) inset;
|
|
opacity: 0.52;
|
|
}
|
|
|
|
.lp-chip svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.pro-detail-bg-chip-icon {
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
color: #fd6116;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lp-chip-slow {
|
|
animation: lp-float-slow 8s ease-in-out infinite;
|
|
}
|
|
|
|
.lp-chip-mid {
|
|
animation: lp-float-mid 6.4s ease-in-out infinite;
|
|
}
|
|
|
|
.lp-chip-fast {
|
|
animation: lp-float-fast 5.6s ease-in-out infinite;
|
|
}
|
|
|
|
.lp-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.pro-detail-hero-slider,
|
|
.pro-list-hero-slider {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.pro-detail-hero-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 360px;
|
|
object-fit: cover;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
box-shadow: 0 24px 52px -34px rgba(2, 6, 23, 0.92);
|
|
}
|
|
|
|
.role-hero-mock {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(253, 98, 22, 0.34);
|
|
background: linear-gradient(140deg, rgba(16, 11, 47, 0.9), rgba(16, 11, 47, 0.72));
|
|
color: #fff;
|
|
padding: 10px 12px;
|
|
backdrop-filter: blur(14px);
|
|
box-shadow: 0 18px 36px -24px rgba(253, 98, 22, 0.66);
|
|
}
|
|
|
|
.role-hero-mock p {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.role-hero-mock strong {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.role-hero-mock-a {
|
|
top: 14px;
|
|
left: 12px;
|
|
}
|
|
|
|
.role-hero-mock-b {
|
|
top: 118px;
|
|
right: 16px;
|
|
}
|
|
|
|
.role-hero-mock-c {
|
|
bottom: 16px;
|
|
left: 20px;
|
|
}
|
|
|
|
.role-hero-mock-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fd6116;
|
|
background: rgba(253, 98, 22, 0.14);
|
|
border: 1px solid rgba(253, 98, 22, 0.5);
|
|
}
|
|
|
|
.role-hero-mock-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.pro-trust-chips {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pro-trust-chips span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.46);
|
|
background: rgba(253, 98, 22, 0.14);
|
|
color: #ffd7c1;
|
|
padding: 5px 9px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.role-copy-card .path-body p {
|
|
min-height: 0;
|
|
}
|
|
|
|
.role-chip-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
color: #fd6116;
|
|
background: rgba(253, 98, 22, 0.12);
|
|
border: 1px solid rgba(253, 98, 22, 0.34);
|
|
}
|
|
|
|
.role-chip-icon svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
.role-card-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 9px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fd6116;
|
|
background: rgba(253, 98, 22, 0.12);
|
|
border: 1px solid rgba(253, 98, 22, 0.35);
|
|
}
|
|
|
|
.role-card-icon svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.role-card-icon-light {
|
|
background: rgba(253, 98, 22, 0.1);
|
|
}
|
|
|
|
.role-card-icon-dark {
|
|
background: rgba(253, 98, 22, 0.2);
|
|
color: #ffc9ab;
|
|
}
|
|
|
|
.role-section-headline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.role-section-kicker {
|
|
margin: 0 0 4px;
|
|
color: #c2410c;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.role-typical-shell {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(253, 98, 22, 0.28);
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
|
|
radial-gradient(circle at 86% 20%, rgba(253, 98, 22, 0.16), transparent 42%),
|
|
radial-gradient(circle at 10% 16%, rgba(174, 198, 255, 0.18), transparent 40%),
|
|
linear-gradient(160deg, rgba(10, 14, 30, 0.58), rgba(7, 10, 24, 0.52));
|
|
backdrop-filter: blur(22px) saturate(120%);
|
|
-webkit-backdrop-filter: blur(22px) saturate(120%);
|
|
box-shadow:
|
|
0 26px 48px -34px rgba(0, 0, 0, 0.72),
|
|
0 0 0 1px rgba(253, 98, 22, 0.14) inset;
|
|
}
|
|
|
|
.role-typical-shell::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
120deg,
|
|
rgba(255, 255, 255, 0.08),
|
|
transparent 36%,
|
|
rgba(255, 255, 255, 0.05) 64%,
|
|
transparent
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.role-typical-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 54%;
|
|
height: 64%;
|
|
right: -6%;
|
|
top: -14%;
|
|
border-radius: 999px;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(253, 98, 22, 0.32),
|
|
rgba(253, 98, 22, 0.1) 56%,
|
|
transparent 74%
|
|
);
|
|
filter: blur(12px);
|
|
pointer-events: none;
|
|
animation: roleOrangeDrift 9s ease-in-out infinite;
|
|
}
|
|
|
|
.role-typical-shell .section-head h2 {
|
|
color: #fff;
|
|
}
|
|
|
|
.role-typical-shell .section-head .sub {
|
|
color: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.role-typical-shell .role-section-kicker {
|
|
color: #dbe9ff;
|
|
}
|
|
|
|
.role-typical-shell .role-section-headline h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
.role-typical-shell .role-card-icon-light {
|
|
color: #ffd8c2;
|
|
background: rgba(253, 98, 22, 0.16);
|
|
border-color: rgba(253, 98, 22, 0.36);
|
|
}
|
|
|
|
.role-typical-card {
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
|
|
linear-gradient(180deg, rgba(7, 12, 30, 0.22), rgba(7, 12, 30, 0.12));
|
|
backdrop-filter: blur(18px) saturate(118%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(118%);
|
|
box-shadow: 0 22px 36px -28px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.role-typical-card h3 {
|
|
color: #fff;
|
|
}
|
|
|
|
.role-typical-list {
|
|
margin: 12px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.role-typical-list li {
|
|
display: grid;
|
|
grid-template-columns: 18px 1fr;
|
|
align-items: start;
|
|
gap: 6px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 13px;
|
|
line-height: 1.48;
|
|
}
|
|
|
|
.role-typical-shell .role-typical-list li {
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
.role-typical-bullet {
|
|
margin-top: 1px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #dce8ff;
|
|
background: rgba(125, 166, 255, 0.16);
|
|
border: 1px solid rgba(160, 188, 255, 0.44);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pro-real-note-card {
|
|
margin-top: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
border-radius: 12px;
|
|
background:
|
|
linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
|
|
linear-gradient(180deg, rgba(7, 12, 30, 0.2), rgba(7, 12, 30, 0.12));
|
|
backdrop-filter: blur(16px) saturate(115%);
|
|
-webkit-backdrop-filter: blur(16px) saturate(115%);
|
|
padding: 10px 12px;
|
|
display: grid;
|
|
grid-template-columns: 28px 1fr;
|
|
align-items: start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pro-real-note-card p {
|
|
margin: 2px 0 0;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.role-typical-shell .pro-real-note-card p {
|
|
color: rgba(255, 255, 255, 0.92);
|
|
}
|
|
|
|
@keyframes roleOrangeDrift {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 0.46;
|
|
}
|
|
50% {
|
|
transform: translate3d(-14px, 10px, 0);
|
|
opacity: 0.68;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.role-typical-shell::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.role-copy-list {
|
|
margin: 12px 0 0;
|
|
padding-left: 18px;
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.role-copy-list li {
|
|
color: #334155;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.launch-grid {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.launch-panel {
|
|
border: 1px solid rgba(253, 98, 22, 0.28);
|
|
border-radius: 16px;
|
|
padding: 14px;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(253, 98, 22, 0.1), transparent 58%),
|
|
linear-gradient(165deg, rgba(255, 248, 241, 0.92), rgba(255, 255, 255, 0.96));
|
|
}
|
|
|
|
.launch-panel-outcomes {
|
|
border-color: rgba(16, 11, 47, 0.14);
|
|
background:
|
|
radial-gradient(circle at top right, rgba(16, 11, 47, 0.08), transparent 62%),
|
|
linear-gradient(165deg, rgba(246, 249, 255, 0.94), rgba(255, 255, 255, 0.97));
|
|
}
|
|
|
|
.launch-panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.launch-panel-head h3 {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.launch-kicker {
|
|
margin: 0 0 3px;
|
|
color: #fd6116;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.launch-list {
|
|
margin: 12px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.launch-list li {
|
|
display: grid;
|
|
grid-template-columns: 34px 1fr;
|
|
gap: 9px;
|
|
align-items: start;
|
|
}
|
|
|
|
.launch-step {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(253, 98, 22, 0.34);
|
|
background: rgba(253, 98, 22, 0.12);
|
|
color: #fd6116;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.launch-list p {
|
|
margin: 5px 0 0;
|
|
color: #334155;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.outcome-grid {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.outcome-tile {
|
|
border: 1px solid rgba(16, 11, 47, 0.12);
|
|
border-radius: 12px;
|
|
padding: 10px 10px 10px 11px;
|
|
background: rgba(255, 255, 255, 0.74);
|
|
display: grid;
|
|
grid-template-columns: 8px 1fr;
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
.outcome-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-top: 6px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, #fd6116, #ff8a4d);
|
|
}
|
|
|
|
.outcome-tile p {
|
|
margin: 0;
|
|
color: #2f3f5a;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.pro-detail-float-card,
|
|
.pro-list-float-card {
|
|
backdrop-filter: blur(14px);
|
|
border: 1px solid rgba(253, 98, 22, 0.34);
|
|
background: linear-gradient(135deg, rgba(16, 11, 47, 0.84), rgba(16, 11, 47, 0.62));
|
|
box-shadow: 0 18px 36px -26px rgba(253, 98, 22, 0.68);
|
|
}
|
|
|
|
.pro-detail-float-card h3,
|
|
.pro-list-float-card h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.pro-detail-float-card ul,
|
|
.pro-list-float-card ul {
|
|
margin: 10px 0 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pro-detail-float-card-1 {
|
|
top: 18px;
|
|
left: 14px;
|
|
}
|
|
|
|
.pro-detail-float-card-2 {
|
|
right: 14px;
|
|
bottom: 18px;
|
|
}
|
|
|
|
.pro-list-float-card-1 {
|
|
top: 28px;
|
|
left: 14px;
|
|
}
|
|
|
|
.pro-list-float-card-2 {
|
|
right: 14px;
|
|
bottom: 28px;
|
|
}
|
|
|
|
.pro-visual-grid {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.pro-visual-tile {
|
|
margin: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(253, 98, 22, 0.3);
|
|
background: rgba(8, 10, 22, 0.45);
|
|
}
|
|
|
|
.pro-visual-tile img {
|
|
width: 100%;
|
|
height: 74px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.pro-visual-tile figcaption {
|
|
padding: 6px 8px;
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
text-align: center;
|
|
}
|
|
|
|
.lp-hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
padding: 48px 0 64px;
|
|
}
|
|
|
|
.lp-hero-title {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-size: clamp(28px, 4vw, 44px);
|
|
line-height: 1.08;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.lp-hero-copy {
|
|
margin-top: 14px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.lp-hero-grid .eyebrow {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.lp-hero-note {
|
|
margin-top: 14px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
font-size: 13px;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.lp-primary-btn,
|
|
.lp-ghost-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition:
|
|
transform 180ms ease,
|
|
border-color 180ms ease,
|
|
box-shadow 220ms ease,
|
|
background-color 220ms ease;
|
|
}
|
|
|
|
.lp-primary-btn {
|
|
border: 1px solid rgba(253, 98, 22, 0.72);
|
|
background: #fd6116;
|
|
color: #fff;
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.4) inset,
|
|
0 12px 24px -16px rgba(253, 98, 22, 0.9);
|
|
}
|
|
|
|
.lp-primary-btn:hover {
|
|
transform: translateY(-1px);
|
|
background: #eb5b14;
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.6) inset,
|
|
0 0 0 4px rgba(253, 98, 22, 0.16),
|
|
0 18px 30px -16px rgba(253, 98, 22, 0.95);
|
|
}
|
|
|
|
.lp-ghost-btn {
|
|
border: 1px solid rgba(16, 11, 47, 0.22);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: #100b2f;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 10px 20px -16px rgba(2, 6, 23, 0.82);
|
|
}
|
|
|
|
.lp-ghost-btn:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(253, 98, 22, 0.7);
|
|
box-shadow:
|
|
0 0 0 3px rgba(253, 98, 22, 0.14),
|
|
0 14px 24px -14px rgba(2, 6, 23, 0.78);
|
|
}
|
|
|
|
.lp-ghost-btn-dark {
|
|
border-color: rgba(255, 255, 255, 0.34);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
}
|
|
|
|
.lp-ghost-btn-dark:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.lp-primary-btn::before,
|
|
.lp-ghost-btn::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -160% auto -160% -35%;
|
|
width: 45%;
|
|
transform: rotate(18deg);
|
|
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.42), transparent);
|
|
transition: transform 380ms ease;
|
|
}
|
|
|
|
.lp-primary-btn:hover::before,
|
|
.lp-ghost-btn:hover::before {
|
|
transform: translateX(220%) rotate(18deg);
|
|
}
|
|
|
|
.lp-hero-graph {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
}
|
|
|
|
.role-hero-photo {
|
|
width: 100%;
|
|
min-height: 360px;
|
|
object-fit: cover;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
box-shadow: 0 24px 52px -34px rgba(2, 6, 23, 0.92);
|
|
}
|
|
|
|
.lp-hero-slider {
|
|
position: relative;
|
|
min-height: 370px;
|
|
transition: transform 260ms ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
.lp-float-card {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
background: linear-gradient(145deg, rgba(16, 11, 47, 0.72), rgba(16, 11, 47, 0.5));
|
|
padding: 18px;
|
|
color: #fff;
|
|
backdrop-filter: blur(18px);
|
|
opacity: 0;
|
|
transform: translateY(14px) scale(0.98);
|
|
transition: all 380ms ease;
|
|
}
|
|
|
|
.lp-float-card.active {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.lp-float-card h3 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.lp-float-card ul {
|
|
margin: 10px 0 16px;
|
|
padding-left: 18px;
|
|
color: rgba(255, 255, 255, 0.86);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.op-graph-wrap {
|
|
position: relative;
|
|
margin-inline: auto;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
}
|
|
|
|
.op-graph {
|
|
position: relative;
|
|
min-height: 334px;
|
|
}
|
|
|
|
.op-graph-canvas {
|
|
position: relative;
|
|
height: 264px;
|
|
border-radius: 22px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background:
|
|
radial-gradient(120% 95% at 15% 10%, rgba(255, 255, 255, 0.08), transparent 62%),
|
|
linear-gradient(150deg, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.06));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.op-graph-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.op-graph-line {
|
|
stroke: rgba(253, 98, 22, 0.88);
|
|
stroke-width: 0.42;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
stroke-dasharray: var(--op-line-len);
|
|
stroke-dashoffset: var(--op-line-len);
|
|
filter: drop-shadow(0 0 2px rgba(253, 98, 22, 0.42));
|
|
}
|
|
|
|
.op-graph-line-hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.op-graph-line-visible {
|
|
opacity: 1;
|
|
stroke-dashoffset: 0;
|
|
animation: none;
|
|
}
|
|
|
|
.op-graph-line-drawing {
|
|
animation: opGraphLineDraw 1400ms ease forwards;
|
|
}
|
|
|
|
.op-graph-node {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
transition:
|
|
opacity 320ms ease,
|
|
border-color 280ms ease,
|
|
background 280ms ease,
|
|
box-shadow 280ms ease;
|
|
animation: none;
|
|
}
|
|
|
|
.op-graph-node-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px 9px;
|
|
min-height: 22px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
backdrop-filter: blur(8px);
|
|
transition:
|
|
left 860ms ease,
|
|
top 860ms ease,
|
|
opacity 300ms ease,
|
|
transform 300ms ease,
|
|
border-color 280ms ease,
|
|
background 280ms ease,
|
|
box-shadow 280ms ease;
|
|
}
|
|
|
|
.op-graph-node-profile {
|
|
color: #fff;
|
|
background: rgba(15, 23, 42, 0.6);
|
|
}
|
|
.op-graph-node-opportunity {
|
|
color: #fff;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
}
|
|
.op-graph-node-signal {
|
|
color: #fff;
|
|
background: rgba(15, 23, 42, 0.48);
|
|
}
|
|
.op-graph-node-status {
|
|
color: #fff;
|
|
background: rgba(51, 65, 85, 0.5);
|
|
}
|
|
|
|
.op-graph-node-on {
|
|
opacity: 1;
|
|
border-color: rgba(253, 98, 22, 0.66);
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.14),
|
|
0 0 12px rgba(253, 98, 22, 0.34);
|
|
animation: opGraphNodeIn 260ms ease;
|
|
}
|
|
|
|
.op-graph-workspace {
|
|
position: absolute;
|
|
inset: 14% 8% 12%;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(255, 255, 255, 0.34);
|
|
background: linear-gradient(150deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.74));
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
transition:
|
|
opacity 700ms ease,
|
|
transform 700ms ease;
|
|
z-index: 5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.op-graph-workspace-tick {
|
|
grid-column: 1 / -1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid rgba(253, 98, 22, 0.62);
|
|
border-radius: 999px;
|
|
background: rgba(253, 98, 22, 0.18);
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.op-graph-workspace-tick-icon {
|
|
display: inline-flex;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(253, 98, 22, 0.96);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
.op-graph-workspace-tick-text {
|
|
color: rgba(255, 242, 230, 0.98);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.op-graph-workspace-title {
|
|
margin: 0 0 1px 0;
|
|
color: rgba(253, 186, 116, 0.96);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.op-graph-workspace-row {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: rgba(248, 250, 252, 0.98);
|
|
padding: 8px 9px;
|
|
line-height: 1.2;
|
|
min-width: 0;
|
|
min-height: 52px;
|
|
}
|
|
|
|
.op-graph-workspace-row strong {
|
|
color: rgba(248, 250, 252, 0.98);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
display: block;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.op-graph-workspace-row small {
|
|
margin-top: 3px;
|
|
color: rgba(226, 232, 240, 0.9);
|
|
font-size: 10px;
|
|
display: block;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.op-graph-phase4 .op-graph-workspace {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.3),
|
|
0 0 22px rgba(253, 98, 22, 0.35);
|
|
}
|
|
|
|
.op-graph-phase4 .op-graph-line,
|
|
.op-graph-phase4 .op-graph-node {
|
|
opacity: 0;
|
|
transition-duration: 420ms;
|
|
}
|
|
|
|
.op-graph-copy {
|
|
margin-top: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.op-graph-copy-line {
|
|
margin: 0;
|
|
color: rgba(248, 250, 252, 0.94);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.op-graph-copy-sub {
|
|
margin: 4px 0 0;
|
|
color: rgba(226, 232, 240, 0.88);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@keyframes opGraphNodeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(0.92);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes opGraphLineDraw {
|
|
from {
|
|
stroke-dashoffset: var(--op-line-len);
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.whySliderWrap {
|
|
position: relative;
|
|
margin-top: 24px;
|
|
display: grid;
|
|
gap: 18px;
|
|
padding-bottom: 26px;
|
|
}
|
|
|
|
.whyHeroCard {
|
|
position: relative;
|
|
min-height: 260px;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background:
|
|
radial-gradient(120% 80% at 8% 0%, rgba(255, 255, 255, 0.18), transparent 58%),
|
|
linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.82));
|
|
box-shadow: 0 26px 52px -30px rgba(2, 6, 23, 0.9);
|
|
}
|
|
|
|
.whyHeroCardPulse {
|
|
animation: whyCardBreath 7.2s ease-in-out infinite;
|
|
}
|
|
|
|
.whyCardGlow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(220px 120px at 12% 4%, rgba(253, 98, 22, 0.36), transparent 66%),
|
|
linear-gradient(180deg, rgba(2, 6, 23, 0.1) 22%, rgba(2, 6, 23, 0.72) 92%);
|
|
}
|
|
|
|
.whyCardContent {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 26px 26px 28px;
|
|
}
|
|
|
|
.whyContentSwap {
|
|
animation: whyContentIn 460ms ease;
|
|
}
|
|
|
|
.whyHaloA,
|
|
.whyHaloB {
|
|
position: absolute;
|
|
border-radius: 999px;
|
|
filter: blur(30px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.whyHaloA {
|
|
height: 160px;
|
|
width: 160px;
|
|
left: -30px;
|
|
top: -24px;
|
|
background: rgba(253, 98, 22, 0.26);
|
|
animation: whyHaloDriftA 8s ease-in-out infinite;
|
|
}
|
|
|
|
.whyHaloB {
|
|
height: 140px;
|
|
width: 140px;
|
|
right: -20px;
|
|
bottom: -26px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
animation: whyHaloDriftB 9.5s ease-in-out infinite;
|
|
}
|
|
|
|
.whyAutoTrack {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 3px;
|
|
width: 100%;
|
|
transform-origin: left;
|
|
background: linear-gradient(90deg, #fd6116, rgba(255, 188, 153, 0.9));
|
|
animation: whyTrackFill 4.2s linear forwards;
|
|
z-index: 3;
|
|
}
|
|
|
|
.whyMetaKicker {
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 210, 184, 0.9);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.whyOrbitalNav {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.whyOrbitalBtn {
|
|
height: 38px;
|
|
width: 38px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.34);
|
|
background: rgba(15, 23, 42, 0.5);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ff8f5a;
|
|
transition:
|
|
transform 180ms ease,
|
|
border-color 180ms ease,
|
|
background 180ms ease;
|
|
}
|
|
|
|
.whyOrbitalBtn:hover {
|
|
transform: translateY(-2px) scale(1.02);
|
|
border-color: rgba(253, 98, 22, 0.75);
|
|
}
|
|
|
|
.whyOrbitalBtnActive {
|
|
background: rgba(253, 98, 22, 0.2);
|
|
border-color: rgba(253, 98, 22, 0.88);
|
|
box-shadow: 0 0 0 3px rgba(253, 98, 22, 0.15);
|
|
}
|
|
|
|
.whyIconShell {
|
|
display: inline-flex;
|
|
height: 42px;
|
|
width: 42px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.34);
|
|
background: rgba(255, 255, 255, 0.16);
|
|
box-shadow: 0 14px 28px -18px rgba(2, 6, 23, 0.9);
|
|
color: #ff7f45;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.whyIconShell svg,
|
|
.whyOrbitalBtn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: currentColor;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.whyControls {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: -10px;
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 12;
|
|
}
|
|
|
|
.whyControlBtn {
|
|
height: 40px;
|
|
width: 40px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(255, 255, 255, 0.62);
|
|
background: rgba(15, 23, 42, 0.35);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
transition:
|
|
transform 180ms ease,
|
|
border-color 180ms ease,
|
|
background 180ms ease;
|
|
}
|
|
|
|
.whyControlBtn:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(253, 98, 22, 0.8);
|
|
background: rgba(253, 98, 22, 0.36);
|
|
}
|
|
|
|
.hiwCodeCard {
|
|
margin-top: 26px;
|
|
border-radius: 24px;
|
|
border: 1px solid #dbe4f0;
|
|
background: #fff;
|
|
box-shadow: 0 26px 44px -34px rgba(2, 6, 23, 0.42);
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 34%) 1fr;
|
|
animation: hiwCodeCardIn 420ms ease;
|
|
}
|
|
|
|
.hiwCodeMedia {
|
|
position: relative;
|
|
min-height: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(180deg, #eef4fb, #f8fbff);
|
|
border-right: 1px solid #e1e9f3;
|
|
}
|
|
|
|
.hiwCodeBigRect {
|
|
position: relative;
|
|
min-height: 220px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.46);
|
|
box-shadow: 0 24px 34px -24px rgba(2, 6, 23, 0.65);
|
|
animation: hiwMediaFloat 7s ease-in-out infinite;
|
|
}
|
|
|
|
.hiwCodeBigRect::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.3));
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hiwCodePhoto {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
transform-origin: center;
|
|
animation: hiwPhotoZoom 8.5s ease-in-out infinite;
|
|
}
|
|
|
|
.hiwCodeMediaCopy {
|
|
margin-top: 10px;
|
|
padding: 0 2px 2px;
|
|
}
|
|
|
|
.hiwCodeBody {
|
|
padding: 18px 18px 16px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hiwCodeKicker {
|
|
color: #c2410c;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hiwCodeTitle {
|
|
margin-top: 8px;
|
|
color: #0f172a;
|
|
font-size: 24px;
|
|
line-height: 1.15;
|
|
font-weight: 800;
|
|
max-width: 22ch;
|
|
}
|
|
|
|
.hiwCodeDesc {
|
|
margin-top: 8px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
max-width: 52ch;
|
|
}
|
|
|
|
.hiwCodeStepsHeading {
|
|
color: #1e293b;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hiwCodeSteps {
|
|
margin-top: 16px;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hiwCodeStep {
|
|
border-radius: 14px;
|
|
border: 1px solid #d7e1ed;
|
|
background: #f8fbff;
|
|
padding: 10px 12px;
|
|
display: grid;
|
|
grid-template-columns: 30px 1fr;
|
|
gap: 10px;
|
|
transition:
|
|
border-color 180ms ease,
|
|
transform 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.hiwCodeStep:hover {
|
|
border-color: rgba(253, 98, 22, 0.62);
|
|
}
|
|
|
|
.hiwCodeStepActive {
|
|
border-color: #fd6116;
|
|
box-shadow: 0 0 0 3px rgba(253, 98, 22, 0.12);
|
|
background: linear-gradient(145deg, #fff7f1 0%, #fff 100%);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.hiwCodeStepNum {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.48);
|
|
background: #fff3eb;
|
|
color: #fd6116;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hiwCodeStepTitle {
|
|
color: #0f172a;
|
|
font-size: 14px;
|
|
line-height: 1.24;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.hiwCodeStepDesc {
|
|
margin-top: 3px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
line-height: 1.38;
|
|
}
|
|
|
|
.hiwCodeFooter {
|
|
margin-top: auto;
|
|
padding-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.hiwCodeArrows {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hiwCodeArrow {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 999px;
|
|
border: 1px solid #d1dbe8;
|
|
background: #fff;
|
|
color: #1e293b;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
transition:
|
|
border-color 180ms ease,
|
|
transform 180ms ease,
|
|
background-color 180ms ease;
|
|
}
|
|
|
|
.hiwCodeArrow:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(253, 98, 22, 0.72);
|
|
background: #fff3eb;
|
|
}
|
|
|
|
.hiwCodeDots {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hiwCodeDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #cbd5e1;
|
|
transition:
|
|
width 180ms ease,
|
|
background-color 180ms ease;
|
|
}
|
|
|
|
.hiwCodeDotActive {
|
|
width: 20px;
|
|
background: #fd6116;
|
|
}
|
|
|
|
@keyframes whyCardBreath {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 26px 52px -30px rgba(2, 6, 23, 0.9);
|
|
}
|
|
50% {
|
|
box-shadow: 0 28px 56px -28px rgba(253, 98, 22, 0.35);
|
|
}
|
|
}
|
|
|
|
@keyframes whyContentIn {
|
|
from {
|
|
opacity: 0.45;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes whyTrackFill {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@keyframes whyHaloDriftA {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(14px, 12px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes whyHaloDriftB {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(-12px, -10px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes hiwCodeCardIn {
|
|
from {
|
|
opacity: 0.45;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes hiwMediaFloat {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
@keyframes hiwPhotoZoom {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.03);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hiwCodeBigRect,
|
|
.hiwCodePhoto {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.lp-carousel-nav {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lp-benefit-panel {
|
|
max-width: 980px;
|
|
}
|
|
|
|
.lp-benefit-hero {
|
|
margin-top: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.lp-benefit-hero h3 {
|
|
margin: 0;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.lp-benefit-hero p {
|
|
margin-top: 8px;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.lp-benefit-dots {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.lp-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.34);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lp-dot.active {
|
|
background: #fd6116;
|
|
}
|
|
|
|
@keyframes lp-float-slow {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-11px);
|
|
}
|
|
}
|
|
|
|
@keyframes lp-float-mid {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-14px);
|
|
}
|
|
}
|
|
|
|
@keyframes lp-float-fast {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-16px);
|
|
}
|
|
}
|
|
|
|
@keyframes lpIconLayerSway {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(0, -8px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes lpMeshDrift {
|
|
0% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 16px, 0) scale(1.03);
|
|
}
|
|
}
|
|
|
|
@keyframes lpRibbonSweep {
|
|
0% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
transform: translate3d(0, 18px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes ctaPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.4) inset,
|
|
0 12px 24px -16px rgba(253, 98, 22, 0.9);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 0 0 1px rgba(253, 98, 22, 0.52) inset,
|
|
0 16px 28px -16px rgba(253, 98, 22, 0.98);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.lp-hero-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.lp-role-cta-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.role-benefit-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pro-real-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.pro-detail-trust-strip {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.lp-hero-graph {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.pro-detail-float-card,
|
|
.pro-list-float-card {
|
|
position: relative;
|
|
inset: auto;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.pro-detail-hero-slider,
|
|
.pro-list-hero-slider {
|
|
min-height: 0;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pro-visual-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.pro-detail-hero-image {
|
|
min-height: 240px;
|
|
}
|
|
|
|
.role-hero-photo {
|
|
min-height: 240px;
|
|
}
|
|
|
|
.role-hero-mock {
|
|
position: relative;
|
|
top: auto;
|
|
right: auto;
|
|
left: auto;
|
|
bottom: auto;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.contact-mini-faq-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.choose-path-panel .section-head h2 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.faq-wrap h2 {
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
|
|
.lp-noise {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.08;
|
|
background-image: radial-gradient(rgba(255, 255, 255, 0.4) 0.6px, transparent 0.6px);
|
|
background-size: 4px 4px;
|
|
}
|
|
|
|
.auth-page {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.auth-page > *:not(.lp-bg) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.auth-layout {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(1260px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: 1.02fr 0.98fr;
|
|
gap: 24px;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.auth-layout-single {
|
|
grid-template-columns: 1fr;
|
|
width: min(680px, calc(100% - 32px));
|
|
}
|
|
|
|
.onboarding-auth-layout {
|
|
align-items: start;
|
|
padding-top: 36px;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.onboarding-auth-form {
|
|
padding: 18px 20px 22px;
|
|
}
|
|
|
|
.onboarding-auth-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.onboarding-primary-btn {
|
|
margin-top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.onboarding-auth-form .error {
|
|
color: #6e7591;
|
|
}
|
|
|
|
.onboarding-progress {
|
|
width: 100%;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #eceff5;
|
|
overflow: hidden;
|
|
margin-top: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.onboarding-progress-fill {
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
transition: width 220ms ease;
|
|
}
|
|
|
|
.multi-select-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.multi-select-option {
|
|
width: 100%;
|
|
min-height: 44px;
|
|
border-radius: 12px;
|
|
border: 1px solid #cfd4e3;
|
|
background: #f8fafc;
|
|
color: #3f4967;
|
|
padding: 10px 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 160ms ease,
|
|
background-color 160ms ease,
|
|
color 160ms ease,
|
|
box-shadow 160ms ease;
|
|
}
|
|
|
|
.multi-select-option:hover {
|
|
border-color: #fdc9ad;
|
|
background: #fff4ee;
|
|
}
|
|
|
|
.multi-select-option.is-selected {
|
|
border-color: #fd6116;
|
|
background: #fff2ea;
|
|
color: #2c3551;
|
|
box-shadow: 0 0 0 1px rgba(253, 98, 22, 0.12);
|
|
}
|
|
|
|
.multi-select-option:focus-visible {
|
|
outline: none;
|
|
border-color: #fd6116;
|
|
box-shadow: 0 0 0 2px #ffd8c3;
|
|
}
|
|
|
|
.multi-select-option:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.multi-select-option-text {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.multi-select-tick {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 999px;
|
|
border: 1px solid #d2d7e6;
|
|
background: #f3f5fa;
|
|
color: #9aa3bc;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.multi-select-tick svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2.2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
opacity: 0;
|
|
}
|
|
|
|
.multi-select-tick.is-visible {
|
|
border-color: #fd6116;
|
|
background: #fd6116;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.multi-select-tick.is-visible svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
.multi-select-grid.is-disabled .multi-select-option {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.locked-input-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.locked-input {
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.locked-input-icon {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #94a3b8;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.locked-input-icon svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.auth-visual {
|
|
min-height: 620px;
|
|
border-radius: 28px;
|
|
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
background: linear-gradient(160deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 28px 60px -34px rgba(2, 6, 23, 0.88);
|
|
padding: 28px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.auth-visual-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.auth-visual-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(180deg, rgba(16, 11, 47, 0.22), rgba(16, 11, 47, 0.66));
|
|
}
|
|
|
|
.auth-visual-content {
|
|
position: absolute;
|
|
left: 28px;
|
|
right: 28px;
|
|
bottom: 28px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.auth-form {
|
|
border-radius: 28px;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
background: rgba(255, 255, 255, 0.94);
|
|
color: #101228;
|
|
box-shadow: 0 28px 60px -34px rgba(2, 6, 23, 0.88);
|
|
backdrop-filter: blur(16px);
|
|
padding: 14px 20px 20px;
|
|
}
|
|
|
|
.auth-form .title {
|
|
margin: 0 0 10px;
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
color: #101228;
|
|
}
|
|
|
|
.auth-form .subtitle {
|
|
margin: 6px 0 0;
|
|
color: #535e7a;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.auth-form .label {
|
|
margin-bottom: 2px;
|
|
display: block;
|
|
color: #4b546f;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.auth-form .input,
|
|
.auth-form .select,
|
|
.auth-form .textarea {
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
border: 1px solid #cfd4e3;
|
|
background: #fff;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
transition:
|
|
border-color 180ms ease,
|
|
box-shadow 180ms ease;
|
|
}
|
|
|
|
.auth-form .textarea {
|
|
min-height: 110px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.auth-form .input:focus,
|
|
.auth-form .select:focus,
|
|
.auth-form .textarea:focus {
|
|
border-color: #fd6116;
|
|
box-shadow: 0 0 0 2px #ffd8c3;
|
|
}
|
|
|
|
.auth-field-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.auth-forgot-link {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #fd6116;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth-password-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.auth-password-wrap .input {
|
|
padding-right: 60px;
|
|
}
|
|
|
|
.auth-toggle-visibility {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: 0;
|
|
background: transparent;
|
|
color: #5b6480;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.auth-toggle-visibility:hover {
|
|
color: #1b2440;
|
|
}
|
|
|
|
.auth-toggle-visibility svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.auth-captcha-row {
|
|
display: grid;
|
|
grid-template-columns: 34px 156px 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.auth-captcha-row {
|
|
grid-template-columns: 34px 176px 1fr;
|
|
}
|
|
}
|
|
|
|
.auth-captcha-refresh {
|
|
height: 34px;
|
|
width: 34px;
|
|
border-radius: 8px;
|
|
border: 1px solid #d6dbe8;
|
|
background: #fff;
|
|
color: #4f5975;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.auth-captcha-code {
|
|
height: 52px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #c8cedd;
|
|
border-radius: 12px;
|
|
padding: 0 12px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
letter-spacing: 0.14em;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.auth-captcha-canvas {
|
|
height: 52px;
|
|
border: 1px solid #c8cedd;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
display: block;
|
|
user-select: none;
|
|
}
|
|
|
|
.auth-submit-btn {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 44px;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
background: #fd6116;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.auth-submit-btn:disabled {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.auth-footer-row {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.auth-footer-row .note {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.auth-footer-row a {
|
|
color: #fd6116;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.auth-footer-row a:hover {
|
|
color: #e4570f;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth-checkbox-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.auth-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
min-width: 20px;
|
|
margin-top: 2px;
|
|
cursor: pointer;
|
|
accent-color: #fd6116;
|
|
}
|
|
|
|
.auth-checkbox-label {
|
|
font-size: 13px;
|
|
color: #4b546f;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.auth-checkbox-label a {
|
|
color: #fd6116;
|
|
text-decoration: underline;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.auth-checkbox-label a:hover {
|
|
color: #e45a14;
|
|
}
|
|
|
|
.validation-note {
|
|
margin-top: 4px;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
transition: color 180ms ease;
|
|
}
|
|
|
|
.password-strength-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 6px 8px;
|
|
margin-top: 6px;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.password-strength-grid p {
|
|
margin: 0;
|
|
transition: color 180ms ease;
|
|
}
|
|
|
|
.footer-text {
|
|
margin: 8px 0 0;
|
|
font-size: 12px;
|
|
color: #6a7390;
|
|
}
|
|
|
|
.otp-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-top: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.otp-input {
|
|
height: 52px;
|
|
border-radius: 12px;
|
|
border: 1px solid #cbd5e1;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
}
|
|
|
|
.back-top {
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
z-index: 80;
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(253, 98, 22, 0.75);
|
|
background: #fd6116;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
box-shadow: 0 14px 28px -16px rgba(2, 6, 23, 0.88);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.auth-layout {
|
|
grid-template-columns: 1fr;
|
|
width: min(760px, calc(100% - 32px));
|
|
min-height: calc(100vh - 72px);
|
|
align-items: start;
|
|
padding-top: 16px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.auth-visual {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.about-page-root {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.about-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.about-content > section .container {
|
|
width: 100%;
|
|
max-width: 1240px;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.about-with-rail {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.about-chapter-rail {
|
|
position: fixed;
|
|
left: 18px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 25;
|
|
display: none;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
background: rgba(16, 11, 47, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
border-radius: 14px;
|
|
padding: 8px 7px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.about-chapter-track {
|
|
position: relative;
|
|
width: 2px;
|
|
height: 120px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.about-chapter-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 2px;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
box-shadow: 0 0 16px rgba(253, 98, 22, 0.66);
|
|
transition: height 260ms ease;
|
|
}
|
|
|
|
.about-chapter-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.about-chapter-item a,
|
|
.about-chapter-item-active a {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
text-decoration: none;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
transition: color 160ms ease;
|
|
}
|
|
|
|
.about-chapter-item a:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.about-chapter-item-active a {
|
|
color: #fd6116;
|
|
text-shadow: 0 0 14px rgba(253, 98, 22, 0.55);
|
|
}
|
|
|
|
.about-hero {
|
|
position: relative;
|
|
min-height: clamp(430px, 64vh, 620px);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 18px 0 0;
|
|
}
|
|
|
|
.about-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(60% 50% at 82% 10%, rgba(253, 98, 22, 0.36), transparent 72%),
|
|
radial-gradient(40% 36% at 26% 60%, rgba(255, 255, 255, 0.07), transparent 72%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.about-hero-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
|
|
.about-kicker {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #ffd0b6;
|
|
}
|
|
|
|
.about-kicker-orange {
|
|
color: #fd6116;
|
|
}
|
|
|
|
.about-title {
|
|
margin: 8px 0 0;
|
|
font-size: clamp(38px, 7vw, 64px);
|
|
line-height: 1.08;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
}
|
|
|
|
.about-copy {
|
|
margin-top: 12px;
|
|
max-width: 740px;
|
|
font-size: 17px;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.about-hero .hero-actions {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.about-manifesto-card {
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
background: linear-gradient(145deg, rgba(16, 11, 47, 0.72), rgba(16, 11, 47, 0.5));
|
|
backdrop-filter: blur(16px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
.about-manifesto-card h2 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
}
|
|
|
|
.about-manifesto-card ul {
|
|
margin: 10px 0 0;
|
|
padding-left: 18px;
|
|
color: rgba(255, 255, 255, 0.86);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.about-sheen-sweep {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: linear-gradient(
|
|
110deg,
|
|
transparent 22%,
|
|
rgba(255, 255, 255, 0.18) 46%,
|
|
transparent 68%
|
|
);
|
|
transform: translateX(-110%);
|
|
animation: aboutSheenSweep 9s ease-in-out infinite;
|
|
}
|
|
|
|
.about-section-tight {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.about-section-mid {
|
|
padding: 28px 0;
|
|
}
|
|
|
|
.about-section-title,
|
|
.about-section-title-light {
|
|
margin: 8px 0 0;
|
|
font-size: clamp(30px, 5vw, 42px);
|
|
line-height: 1.1;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.about-section-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.about-section-title-light {
|
|
color: #100b2f;
|
|
}
|
|
|
|
.about-chapter-label {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.about-chapter-label-light {
|
|
color: #ffd0b6;
|
|
}
|
|
|
|
.about-chapter-label-orange {
|
|
color: #fd6116;
|
|
}
|
|
|
|
.about-chapter-title {
|
|
margin: 8px 0 0;
|
|
font-size: 30px;
|
|
line-height: 1.12;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.about-chapter-title-dark {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.about-chapter-title-light {
|
|
color: #100b2f;
|
|
}
|
|
|
|
.about-chapter-problem-section .container {
|
|
position: relative;
|
|
}
|
|
|
|
.about-chapter-problem-section {
|
|
min-height: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-top: 0;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.about-problem-stage {
|
|
position: relative;
|
|
min-height: clamp(360px, 50vh, 480px);
|
|
display: grid;
|
|
place-items: center;
|
|
text-align: center;
|
|
padding: 10px 14px 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-problem-halo {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 46%;
|
|
width: min(640px, 82vw);
|
|
height: min(340px, 46vh);
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 999px;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(253, 98, 22, 0.52),
|
|
rgba(253, 98, 22, 0.08) 58%,
|
|
transparent 76%
|
|
);
|
|
filter: blur(26px);
|
|
pointer-events: none;
|
|
transition: opacity 280ms ease;
|
|
}
|
|
|
|
.about-problem-shape-a,
|
|
.about-problem-shape-b,
|
|
.about-problem-shape-c,
|
|
.about-problem-shape-d {
|
|
position: absolute;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 320ms ease,
|
|
transform 360ms ease;
|
|
}
|
|
|
|
.about-problem-shape-a {
|
|
left: 8%;
|
|
top: 24%;
|
|
width: 170px;
|
|
height: 64px;
|
|
animation: problemFloatOne 10s ease-in-out infinite;
|
|
}
|
|
|
|
.about-problem-shape-b {
|
|
right: 10%;
|
|
top: 30%;
|
|
width: 190px;
|
|
height: 72px;
|
|
animation: problemFloatTwo 11s ease-in-out infinite;
|
|
}
|
|
|
|
.about-problem-shape-c {
|
|
left: 15%;
|
|
bottom: 22%;
|
|
width: 150px;
|
|
height: 58px;
|
|
animation: problemFloatTwo 9s ease-in-out infinite;
|
|
}
|
|
|
|
.about-problem-shape-d {
|
|
right: 14%;
|
|
bottom: 16%;
|
|
width: 184px;
|
|
height: 68px;
|
|
animation: problemFloatOne 12s ease-in-out infinite;
|
|
}
|
|
|
|
.about-problem-headline {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 920px;
|
|
margin-top: 8px;
|
|
font-size: clamp(34px, 6.4vw, 72px);
|
|
line-height: 1.06;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: #fff;
|
|
transition:
|
|
opacity 320ms ease,
|
|
filter 320ms ease;
|
|
}
|
|
|
|
.about-problem-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 10px;
|
|
max-width: 780px;
|
|
font-size: clamp(16px, 2vw, 24px);
|
|
line-height: 1.42;
|
|
color: rgba(255, 255, 255, 0.86);
|
|
transition:
|
|
opacity 320ms ease,
|
|
filter 320ms ease;
|
|
}
|
|
|
|
.about-glass-light {
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.24);
|
|
background: linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.82));
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.about-glass-dark {
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
background: linear-gradient(145deg, rgba(16, 11, 47, 0.72), rgba(16, 11, 47, 0.5));
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.about-chapter-two-shell,
|
|
.about-trust-shell {
|
|
padding: 24px;
|
|
}
|
|
|
|
.about-chapter-two-grid {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.about-chapter-two-text h3 {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: clamp(30px, 4vw, 44px);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.about-chapter-two-heading {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: clamp(30px, 5vw, 36px);
|
|
line-height: 1.12;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.about-chapter-two-text p {
|
|
margin-top: 12px;
|
|
color: #334155;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.about-chapter-two-body {
|
|
margin-top: 14px;
|
|
color: #334155;
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.about-trust-shell {
|
|
padding: 24px;
|
|
}
|
|
|
|
.about-chapter-two-panel {
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(16, 11, 47, 0.14);
|
|
background: linear-gradient(155deg, #ffffff, #f8fbff);
|
|
color: #100b2f;
|
|
min-height: 260px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition:
|
|
opacity 700ms ease-out,
|
|
transform 700ms ease-out,
|
|
filter 700ms ease-out,
|
|
box-shadow 280ms ease-out;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.about-chapter-two-panel-glow {
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 180px;
|
|
right: -40px;
|
|
top: -60px;
|
|
border-radius: 999px;
|
|
background: radial-gradient(circle, rgba(253, 98, 22, 0.24), transparent 72%);
|
|
}
|
|
|
|
.about-chapter-two-reflection {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
110deg,
|
|
transparent 25%,
|
|
rgba(253, 98, 22, 0.15) 48%,
|
|
transparent 72%
|
|
);
|
|
transform: translateX(-110%);
|
|
animation: chapterTwoSweep 6s ease-out infinite;
|
|
}
|
|
|
|
.about-chapter-two-panel-inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 20px;
|
|
}
|
|
|
|
.about-chapter-two-panel-label {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.13em;
|
|
color: #fd6116;
|
|
}
|
|
|
|
.about-chapter-two-panel-title {
|
|
margin: 12px 0 0;
|
|
font-size: 30px;
|
|
line-height: 1.2;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.about-chapter-two-divider {
|
|
margin-top: 16px;
|
|
display: block;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(253, 98, 22, 0.55), transparent);
|
|
}
|
|
|
|
.about-chapter-two-rows {
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 9px;
|
|
}
|
|
|
|
.about-chapter-two-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #334155;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition:
|
|
opacity 420ms ease-out,
|
|
transform 420ms ease-out;
|
|
}
|
|
|
|
.about-chapter-two-row-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
box-shadow: 0 0 0 5px rgba(253, 98, 22, 0.14);
|
|
}
|
|
|
|
.about-chapter-two-closing {
|
|
margin-top: 16px;
|
|
color: #0f172a;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.about-trust-sub {
|
|
margin: 8px 0 0;
|
|
color: rgba(255, 255, 255, 0.76);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.about-trust-sequence {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.about-trust-sequence-list {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.about-trust-sequence-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.about-trust-sequence-card {
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
background: rgba(255, 255, 255, 0.09);
|
|
padding: 14px;
|
|
backdrop-filter: blur(12px);
|
|
transition:
|
|
transform 260ms ease,
|
|
opacity 260ms ease,
|
|
box-shadow 260ms ease;
|
|
}
|
|
|
|
.about-trust-sequence-card:hover {
|
|
box-shadow: 0 18px 32px -24px rgba(253, 98, 22, 0.65);
|
|
}
|
|
|
|
.about-trust-sequence-icon {
|
|
display: inline-flex;
|
|
height: 28px;
|
|
width: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: rgba(253, 98, 22, 0.12);
|
|
}
|
|
|
|
.about-trust-sequence-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
}
|
|
|
|
.about-trust-num {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #fd6116;
|
|
}
|
|
|
|
.about-trust-sequence-card h3 {
|
|
margin: 6px 0 0;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
|
|
.about-trust-sequence-card p {
|
|
margin: 6px 0 0;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.about-principles-section {
|
|
min-height: 74vh;
|
|
padding-top: 20px;
|
|
padding-bottom: 0;
|
|
scroll-margin-top: 240px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.about-principles-section:target {
|
|
scroll-margin-top: 240px;
|
|
}
|
|
|
|
.about-principle-narrative-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
background: linear-gradient(145deg, rgba(16, 11, 47, 0.66), rgba(16, 11, 47, 0.46));
|
|
box-shadow: 0 16px 28px -22px rgba(2, 6, 23, 0.58);
|
|
}
|
|
|
|
.about-principle-narrative-section::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 24px;
|
|
background:
|
|
radial-gradient(55% 46% at 76% 42%, rgba(253, 98, 22, 0.2), transparent 72%),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(16, 11, 47, 0.02));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.about-narrative-stage-root {
|
|
margin-top: 10px;
|
|
position: relative;
|
|
min-height: clamp(220px, 36vh, 320px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.about-narrative-viewport {
|
|
position: relative;
|
|
width: min(100%, 860px);
|
|
min-height: 250px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.about-narrative-glow {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: min(720px, 84vw);
|
|
height: clamp(180px, 32vh, 300px);
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 999px;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(253, 98, 22, 0.66),
|
|
rgba(253, 98, 22, 0.2) 50%,
|
|
transparent 72%
|
|
);
|
|
filter: blur(30px);
|
|
transition:
|
|
opacity 260ms ease,
|
|
transform 260ms ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.about-narrative-stack {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
gap: 30px;
|
|
}
|
|
|
|
.about-narrative-item-active,
|
|
.about-narrative-item-inactive {
|
|
transition:
|
|
opacity 260ms ease,
|
|
transform 260ms ease,
|
|
text-shadow 260ms ease;
|
|
}
|
|
|
|
.about-narrative-item-active {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
text-shadow: 0 0 24px rgba(253, 98, 22, 0.24);
|
|
}
|
|
|
|
.about-narrative-item-inactive {
|
|
opacity: 0.35;
|
|
transform: translate3d(0, 8px, 0);
|
|
}
|
|
|
|
.about-narrative-headline {
|
|
margin: 0;
|
|
font-size: clamp(30px, 5vw, 66px);
|
|
font-weight: 800;
|
|
line-height: 1.08;
|
|
letter-spacing: -0.02em;
|
|
color: #ffffff;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.about-orange-word {
|
|
color: #fd6116;
|
|
text-shadow: 0 0 22px rgba(253, 98, 22, 0.45);
|
|
}
|
|
|
|
.about-filter-underline,
|
|
.about-filter-underline-static,
|
|
.about-review-line,
|
|
.about-review-line-static {
|
|
margin-top: 10px;
|
|
width: min(360px, 56vw);
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.about-filter-underline,
|
|
.about-filter-underline-static {
|
|
background: linear-gradient(90deg, rgba(253, 98, 22, 0.95), rgba(253, 98, 22, 0.26));
|
|
}
|
|
|
|
.about-filter-underline {
|
|
transform: scaleX(0);
|
|
transition: transform 260ms ease;
|
|
}
|
|
|
|
.about-filter-underline-static {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.about-review-line-static {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.about-review-line,
|
|
.about-review-line-static {
|
|
margin-top: 8px;
|
|
width: min(460px, 68vw);
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(253, 98, 22, 0.8), rgba(255, 255, 255, 0.12));
|
|
}
|
|
|
|
.about-review-line {
|
|
transform: scaleX(0);
|
|
transition: transform 300ms ease;
|
|
}
|
|
|
|
.about-narrative-hint {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
line-height: 1.35;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.about-principles-subline {
|
|
margin: 2px 0 0;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.about-principles-subline-inline {
|
|
display: block;
|
|
margin-top: 18px;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
letter-spacing: 0.12em;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.about-chapter-title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.about-chapter-two-shell {
|
|
padding: 40px;
|
|
}
|
|
|
|
.about-principles-subline {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.about-principles-subline-inline {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.about-timeline-section-tight .about-glass-light {
|
|
padding: 28px;
|
|
}
|
|
|
|
.about-timeline-mask-init {
|
|
opacity: 0;
|
|
transform: translate3d(0, 12px, 0);
|
|
clip-path: inset(0 0 100% 0 round 20px);
|
|
transition:
|
|
opacity 520ms ease,
|
|
transform 520ms ease,
|
|
clip-path 620ms ease;
|
|
}
|
|
|
|
.about-timeline-mask-show {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
clip-path: inset(0 0 0 0 round 20px);
|
|
}
|
|
|
|
.about-timeline-mask-show .about-timeline-spine-glow {
|
|
animation: timelineGlowDraw 760ms ease forwards;
|
|
}
|
|
|
|
.about-timeline-wrap {
|
|
position: relative;
|
|
margin-top: 14px;
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-left: 38px;
|
|
}
|
|
|
|
.about-timeline-spine-glow {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, rgba(253, 98, 22, 0.55), rgba(253, 98, 22, 0.12));
|
|
}
|
|
|
|
.about-timeline-milestone {
|
|
position: relative;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(16, 11, 47, 0.14);
|
|
background: rgba(255, 255, 255, 0.75);
|
|
padding: 14px;
|
|
opacity: 0.12;
|
|
transform: translate3d(0, 12px, 0) scale(0.985);
|
|
transition:
|
|
border-color 220ms ease,
|
|
box-shadow 220ms ease,
|
|
transform 420ms ease,
|
|
opacity 420ms ease;
|
|
}
|
|
|
|
.about-timeline-milestone-visible {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
|
|
.about-timeline-milestone:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(253, 98, 22, 0.5);
|
|
box-shadow: 0 16px 24px -20px rgba(253, 98, 22, 0.65);
|
|
}
|
|
|
|
.about-timeline-index {
|
|
position: absolute;
|
|
left: -33px;
|
|
top: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
background: #fd6116;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 0 6px rgba(253, 98, 22, 0.12);
|
|
}
|
|
|
|
.about-timeline-milestone h3 {
|
|
margin: 0;
|
|
color: #100b2f;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.about-timeline-milestone p {
|
|
margin: 6px 0 0;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.about-closing-card {
|
|
padding: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-closing-card h2 {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-size: clamp(28px, 4vw, 42px);
|
|
}
|
|
|
|
.about-closing-card .hero-actions {
|
|
margin-top: 14px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.about-reveal-init {
|
|
opacity: 0;
|
|
transform: translate3d(0, 14px, 0);
|
|
transition:
|
|
opacity 420ms ease,
|
|
transform 420ms ease;
|
|
}
|
|
|
|
.about-reveal-show {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
@keyframes aboutSheenSweep {
|
|
0%,
|
|
70% {
|
|
transform: translateX(-110%);
|
|
}
|
|
100% {
|
|
transform: translateX(110%);
|
|
}
|
|
}
|
|
|
|
@keyframes chapterTwoSweep {
|
|
0% {
|
|
transform: translateX(-110%);
|
|
}
|
|
100% {
|
|
transform: translateX(110%);
|
|
}
|
|
}
|
|
|
|
@keyframes problemFloatOne {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(0, -10px, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes problemFloatTwo {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
transform: translate3d(0, 8px, 0);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.about-hero-inner {
|
|
grid-template-columns: 1.25fr 0.75fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.about-trust-shell {
|
|
padding: 30px;
|
|
}
|
|
|
|
.about-chapter-two-grid {
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.about-chapter-rail {
|
|
display: flex;
|
|
}
|
|
|
|
.about-with-rail > section .container {
|
|
padding-left: 128px;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
.about-chapter-two-grid {
|
|
grid-template-columns: 1.18fr 0.82fr;
|
|
gap: 28px;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-narrative-stage-root {
|
|
min-height: 62vh;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.about-chapter-rail {
|
|
display: none;
|
|
}
|
|
|
|
.about-problem-shape-a,
|
|
.about-problem-shape-b,
|
|
.about-problem-shape-c,
|
|
.about-problem-shape-d {
|
|
display: none;
|
|
}
|
|
|
|
.about-principles-section {
|
|
min-height: auto;
|
|
padding-top: 14px;
|
|
padding-bottom: 0;
|
|
scroll-margin-top: 180px;
|
|
}
|
|
|
|
.about-principles-section:target {
|
|
scroll-margin-top: 180px;
|
|
}
|
|
|
|
.about-narrative-stage-root {
|
|
min-height: clamp(220px, 34vh, 320px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.about-trust-sequence-card {
|
|
padding: 12px;
|
|
}
|
|
|
|
.about-narrative-item-active,
|
|
.about-narrative-item-inactive {
|
|
opacity: 1;
|
|
transform: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.about-filter-underline,
|
|
.about-review-line {
|
|
transition-duration: 180ms;
|
|
}
|
|
}
|
|
|
|
@keyframes timelineGlowDraw {
|
|
from {
|
|
transform: scaleY(0.2);
|
|
transform-origin: top;
|
|
opacity: 0.25;
|
|
}
|
|
to {
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
DASHBOARD SHELL
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
.dashboard-shell {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: #f6f8ff;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
width: 240px;
|
|
min-height: 100vh;
|
|
background: var(--brand-navy, #050026);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.sidebar-logo {
|
|
padding: 20px 20px 12px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
letter-spacing: 0.04em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar-role-badge {
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.sidebar-role-badge .role-badge {
|
|
background: rgba(253, 98, 22, 0.18);
|
|
border: 1px solid rgba(253, 98, 22, 0.35);
|
|
color: #fd6116;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1;
|
|
padding: 12px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition:
|
|
background 150ms,
|
|
color 150ms;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: transparent;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-item-active,
|
|
.nav-item[aria-current="page"] {
|
|
background: rgba(253, 98, 22, 0.18);
|
|
color: #fd6116;
|
|
}
|
|
|
|
.nav-item-logout {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.nav-item-logout:hover {
|
|
color: #f87171;
|
|
background: rgba(239, 68, 68, 0.12);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 12px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
/* ── Main Content ── */
|
|
.dashboard-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-topbar {
|
|
height: 64px;
|
|
background: #fff;
|
|
border-bottom: 1px solid rgba(16, 11, 47, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.topbar-icon-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
color: #475569;
|
|
text-decoration: none;
|
|
transition:
|
|
background 150ms,
|
|
color 150ms;
|
|
}
|
|
|
|
.topbar-icon-btn:hover {
|
|
background: #f1f5f9;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.topbar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topbar-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.dashboard-content {
|
|
flex: 1;
|
|
padding: 28px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── Loading ── */
|
|
.loading-spinner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ── Dashboard Home ── */
|
|
.dashboard-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 6px 0 0;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ── Status Banners ── */
|
|
.status-banner {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding: 16px 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.status-banner--warning {
|
|
background: #fffbeb;
|
|
border-color: #fde68a;
|
|
color: #92400e;
|
|
}
|
|
|
|
.status-banner--danger {
|
|
background: #fff1f2;
|
|
border-color: #fecaca;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.status-banner span {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.status-banner strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.status-banner p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ── KPI Cards ── */
|
|
.kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.kpi-card {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
position: relative;
|
|
transition: box-shadow 200ms;
|
|
}
|
|
|
|
.kpi-card:hover {
|
|
box-shadow: 0 8px 24px -12px rgba(2, 6, 23, 0.18);
|
|
}
|
|
|
|
.kpi-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.kpi-icon--blue {
|
|
background: #eff6ff;
|
|
}
|
|
.kpi-icon--green {
|
|
background: #f0fdf4;
|
|
}
|
|
.kpi-icon--orange {
|
|
background: #fff7ed;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: #100b2f;
|
|
line-height: 1;
|
|
}
|
|
|
|
.kpi-label {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.kpi-link {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #fd6116;
|
|
text-decoration: none;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* ── Guided Tour ── */
|
|
.tour-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(5, 0, 38, 0.5);
|
|
backdrop-filter: blur(2px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
z-index: 80;
|
|
}
|
|
|
|
.tour-modal {
|
|
width: min(560px, 100%);
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 24px 80px -30px rgba(2, 6, 23, 0.5);
|
|
padding: 22px;
|
|
}
|
|
|
|
.tour-eyebrow {
|
|
margin: 0 0 8px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
color: #fd6116;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tour-modal h3 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.tour-modal p {
|
|
margin: 10px 0 0;
|
|
color: #475569;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.tour-progress {
|
|
margin-top: 16px;
|
|
height: 8px;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tour-progress span {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #fd6116, #ff8a4d);
|
|
transition: width 200ms ease;
|
|
}
|
|
|
|
.tour-actions {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.tour-modal {
|
|
padding: 18px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.tour-modal h3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.tour-actions {
|
|
justify-content: stretch;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tour-actions .btn {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
/* ── Choose Role Page ── */
|
|
.choose-role-page {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
padding: 0;
|
|
color: #fff;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.choose-role-page > *:not(.lp-bg) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.choose-role-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: min(1200px, calc(100% - 32px));
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.choose-role-header {
|
|
text-align: center;
|
|
margin: 60px 0 48px;
|
|
}
|
|
|
|
.choose-role-header h1 {
|
|
margin: 0 0 12px;
|
|
font-size: clamp(36px, 6vw, 56px);
|
|
font-weight: 800;
|
|
color: #fff;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.choose-role-header p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.choose-role-section {
|
|
margin-bottom: 52px;
|
|
}
|
|
|
|
.choose-role-section .section-title {
|
|
margin: 0 0 8px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.choose-role-section .section-subtitle {
|
|
margin: 0 0 24px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.roles-grid {
|
|
display: grid;
|
|
gap: 16px;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
|
|
.main-roles-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
}
|
|
|
|
.professional-roles-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.role-path-card {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.role-path-card.selected {
|
|
border-color: #fd6116;
|
|
box-shadow:
|
|
0 0 0 2px rgba(253, 98, 22, 0.28),
|
|
0 22px 42px -30px rgba(253, 98, 22, 0.85);
|
|
}
|
|
|
|
.role-path-card .path-chip {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.role-path-card .role-path-cta {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.professional-roles-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.professional-roles-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.role-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 12px;
|
|
padding: 28px 18px;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 240ms ease;
|
|
box-shadow: 0 18px 36px -24px rgba(2, 6, 23, 0.25);
|
|
}
|
|
|
|
.role-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: 18px;
|
|
background: linear-gradient(135deg, rgba(253, 98, 22, 0), rgba(253, 98, 22, 0.08));
|
|
opacity: 0;
|
|
transition: opacity 240ms ease;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.role-card:hover {
|
|
border-color: rgba(253, 98, 22, 0.6);
|
|
background: #ffffff;
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 24px 52px -20px rgba(253, 98, 22, 0.3);
|
|
}
|
|
|
|
.role-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.role-card.selected {
|
|
border-color: #fd6116;
|
|
background: #ffffff;
|
|
box-shadow:
|
|
0 0 0 2px rgba(253, 98, 22, 0.3) inset,
|
|
0 24px 52px -20px rgba(253, 98, 22, 0.3);
|
|
}
|
|
|
|
.role-card:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.role-image {
|
|
display: block;
|
|
width: 96px;
|
|
height: 96px;
|
|
object-fit: cover;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
|
background: #f8fafc;
|
|
box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.35);
|
|
transition: transform 500ms ease;
|
|
}
|
|
|
|
.role-media {
|
|
width: 96px;
|
|
height: 96px;
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.role-card:hover .role-image {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.role-title {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.role-description {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
line-height: 1.5;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.role-cta {
|
|
margin-top: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #fd6116;
|
|
opacity: 0.8;
|
|
transition: opacity 180ms ease;
|
|
}
|
|
|
|
.role-card:hover .role-cta {
|
|
opacity: 1;
|
|
}
|
|
|
|
.choose-role-footer {
|
|
text-align: center;
|
|
margin-top: 48px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.choose-role-footer .footer-text {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ── Pending Verification Page ── */
|
|
.pending-page {
|
|
min-height: 100vh;
|
|
background: #f6f8ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 16px;
|
|
}
|
|
|
|
.pending-container {
|
|
max-width: 520px;
|
|
width: 100%;
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 24px;
|
|
padding: 48px 40px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.pending-icon {
|
|
font-size: 56px;
|
|
}
|
|
.pending-container h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: #100b2f;
|
|
}
|
|
.pending-container p {
|
|
margin: 0;
|
|
color: #64748b;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.pending-request-box,
|
|
.pending-reason-box {
|
|
background: #fff7ed;
|
|
border: 1px solid #fed7aa;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
color: #7c2d12;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.pending-support {
|
|
font-size: 13px;
|
|
color: #94a3b8;
|
|
}
|
|
.pending-support a {
|
|
color: #fd6116;
|
|
}
|
|
|
|
/* ── Shared Button Variants ── */
|
|
.btn-primary {
|
|
background: var(--brand-orange);
|
|
border-color: var(--brand-orange);
|
|
color: #fff;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--brand-orange-dark);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border-color: currentColor;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ── Error Banner ── */
|
|
.error-banner {
|
|
background: #fff1f2;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 10px;
|
|
padding: 12px 16px;
|
|
color: #991b1b;
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── Data Tables ── */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.data-table th {
|
|
text-align: left;
|
|
padding: 10px 16px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.data-table td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
color: #100b2f;
|
|
}
|
|
|
|
.data-table tr:hover td {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
/* ── Status Badges ── */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.badge--green {
|
|
background: #dcfce7;
|
|
color: #15803d;
|
|
}
|
|
.badge--orange {
|
|
background: #fff7ed;
|
|
color: #c2410c;
|
|
}
|
|
.badge--blue {
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
}
|
|
.badge--red {
|
|
background: #fff1f2;
|
|
color: #be123c;
|
|
}
|
|
.badge--gray {
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
}
|
|
|
|
/* ── Page layout helpers ── */
|
|
.page-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
border-radius: 999px;
|
|
padding: 6px 14px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 150ms,
|
|
background 150ms;
|
|
}
|
|
|
|
.filter-btn.active,
|
|
.filter-btn:hover {
|
|
border-color: #fd6116;
|
|
color: #fd6116;
|
|
background: #fff7ed;
|
|
}
|
|
|
|
.table-card {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Data Table ──────────────────────────────────────────────────────────── */
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
.data-table thead th {
|
|
padding: 10px 16px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: #94a3b8;
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.data-table tbody tr {
|
|
border-bottom: 1px solid #f1f5f9;
|
|
transition: background 100ms;
|
|
}
|
|
.data-table tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.data-table tbody tr:hover {
|
|
background: #f8fafc;
|
|
}
|
|
.data-table tbody td {
|
|
padding: 12px 16px;
|
|
vertical-align: top;
|
|
color: #334155;
|
|
}
|
|
|
|
/* ── Form Fields ─────────────────────────────────────────────────────────── */
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.label {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #475569;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.input,
|
|
.textarea,
|
|
.select {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: #1e293b;
|
|
transition:
|
|
border-color 150ms,
|
|
box-shadow 150ms;
|
|
outline: none;
|
|
}
|
|
.input:focus,
|
|
.textarea:focus,
|
|
.select:focus {
|
|
border-color: #fd6116;
|
|
box-shadow: 0 0 0 3px rgba(253, 98, 22, 0.12);
|
|
}
|
|
.input::placeholder,
|
|
.textarea::placeholder {
|
|
color: #94a3b8;
|
|
}
|
|
.textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
/* ── Form Card (white container) ─────────────────────────────────────────── */
|
|
.form-card {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* ── Error Banner ────────────────────────────────────────────────────────── */
|
|
.error-banner {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: #b91c1c;
|
|
border-radius: 10px;
|
|
padding: 10px 16px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Page Actions header row ─────────────────────────────────────────────── */
|
|
.page-actions {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── Back link ───────────────────────────────────────────────────────────── */
|
|
.back-link a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: color 150ms;
|
|
}
|
|
.back-link a:hover {
|
|
color: #fd6116;
|
|
}
|
|
|
|
/* ── Button Sizes ────────────────────────────────────────────────────────── */
|
|
.btn-sm {
|
|
padding: 5px 12px !important;
|
|
font-size: 12px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* ── Loading spinner ─────────────────────────────────────────────────────── */
|
|
.loading-spinner {
|
|
padding: 40px;
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ── Status banners ──────────────────────────────────────────────────────── */
|
|
.status-banner {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
padding: 14px 18px;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
}
|
|
.status-banner--warning {
|
|
background: #fffbeb;
|
|
border: 1px solid #fde68a;
|
|
color: #92400e;
|
|
}
|
|
.status-banner--danger {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
color: #b91c1c;
|
|
}
|
|
.status-banner--info {
|
|
background: #eff6ff;
|
|
border: 1px solid #bfdbfe;
|
|
color: #1e40af;
|
|
}
|
|
.status-banner--success {
|
|
background: #f0fdf4;
|
|
border: 1px solid #bbf7d0;
|
|
color: #15803d;
|
|
}
|
|
.status-banner p {
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ── Badges ──────────────────────────────────────────────────────────────── */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
}
|
|
.badge--gray {
|
|
background: #f1f5f9;
|
|
color: #475569;
|
|
}
|
|
.badge--blue {
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
}
|
|
.badge--green {
|
|
background: #f0fdf4;
|
|
color: #15803d;
|
|
}
|
|
.badge--orange {
|
|
background: #fff7ed;
|
|
color: #c2410c;
|
|
}
|
|
.badge--red {
|
|
background: #fef2f2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 9px 18px;
|
|
border: 1.5px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: #334155;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition:
|
|
border-color 150ms,
|
|
background 150ms,
|
|
color 150ms,
|
|
box-shadow 150ms;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover:not(:disabled) {
|
|
border-color: #fd6116;
|
|
color: #fd6116;
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn-primary {
|
|
background: #fd6116;
|
|
border-color: #fd6116;
|
|
color: #fff;
|
|
}
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #e45a14;
|
|
border-color: #e45a14;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── Filter bar ──────────────────────────────────────────────────────────── */
|
|
.filter-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ── Dashboard Enhancements ────────────────────────────────────────────────── */
|
|
|
|
.dashboard-widgets-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.widget-card {
|
|
background: #fff;
|
|
border: 1px solid rgba(16, 11, 47, 0.08);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow: 0 4px 20px -10px rgba(2, 6, 23, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.widget-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.dashboard-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 4px;
|
|
background: #f1f5f9;
|
|
border-radius: 12px;
|
|
width: fit-content;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.dashboard-tab {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.dashboard-tab--active {
|
|
background: #fff;
|
|
color: var(--brand-orange);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.quick-actions-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.quick-action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.quick-action-btn:hover {
|
|
background: #fff;
|
|
border-color: var(--brand-orange);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px -10px rgba(253, 97, 22, 0.2);
|
|
}
|
|
|
|
.action-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.quick-action-btn span:not(.action-icon) {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Activity Timeline */
|
|
.activity-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
position: relative;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.activity-timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 2px;
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
gap: 16px;
|
|
position: relative;
|
|
}
|
|
|
|
.activity-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--brand-orange);
|
|
margin-top: 6px;
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.activity-text p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: #334155;
|
|
}
|
|
|
|
.activity-text small {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|