forked from boos/BoosAPI
feat: refine BossAI website product story
This commit is contained in:
boos
+246
-5
@@ -4,6 +4,7 @@
|
||||
--ink: #07110f;
|
||||
--ink-soft: #101d19;
|
||||
--panel: rgba(13, 25, 22, 0.82);
|
||||
--panel-strong: rgba(18, 34, 29, 0.9);
|
||||
--line: rgba(231, 255, 219, 0.16);
|
||||
--line-strong: rgba(215, 255, 77, 0.38);
|
||||
--text: #f8fff4;
|
||||
@@ -13,6 +14,7 @@
|
||||
--acid-2: #a5ff5f;
|
||||
--ice: #e9f7ff;
|
||||
--blue: #8bf6ff;
|
||||
--amber: #ffec99;
|
||||
--radius: 24px;
|
||||
}
|
||||
|
||||
@@ -97,7 +99,9 @@ a {
|
||||
.site-nav,
|
||||
.hero-section,
|
||||
.platform-section,
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.factory-section,
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
@@ -143,13 +147,34 @@ a {
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
position: relative;
|
||||
transition: color 180ms ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
.nav-links a::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -8px;
|
||||
height: 1px;
|
||||
content: "";
|
||||
background: var(--acid);
|
||||
opacity: 0;
|
||||
transform: scaleX(0.4);
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus-visible {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.nav-links a:hover::after,
|
||||
.nav-links a:focus-visible::after {
|
||||
opacity: 0.8;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -188,12 +213,18 @@ a {
|
||||
.ghost-link:hover,
|
||||
.solid-link:hover,
|
||||
.primary-cta:hover,
|
||||
.secondary-cta:hover {
|
||||
.secondary-cta:hover,
|
||||
.ghost-link:focus-visible,
|
||||
.solid-link:focus-visible,
|
||||
.primary-cta:focus-visible,
|
||||
.secondary-cta:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.ghost-link:hover,
|
||||
.secondary-cta:hover {
|
||||
.secondary-cta:hover,
|
||||
.ghost-link:focus-visible,
|
||||
.secondary-cta:focus-visible {
|
||||
border-color: var(--line-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -258,6 +289,37 @@ a {
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.hero-proof {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
width: min(100%, 620px);
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.hero-proof > div {
|
||||
min-height: 78px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 7px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.hero-proof strong {
|
||||
color: var(--text);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-proof span {
|
||||
color: var(--faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
gap: 12px;
|
||||
padding-top: 4px;
|
||||
@@ -311,6 +373,10 @@ a {
|
||||
|
||||
.console-bar,
|
||||
.route-row,
|
||||
.console-metrics > div,
|
||||
.hero-proof > div,
|
||||
.endpoint-card,
|
||||
.ops-card,
|
||||
.mini-grid > div,
|
||||
.node-card,
|
||||
.deploy-stack > div {
|
||||
@@ -332,9 +398,12 @@ a {
|
||||
|
||||
.console-bar span,
|
||||
.route-row em,
|
||||
.console-metrics span,
|
||||
.mini-grid span,
|
||||
.node-card span,
|
||||
.deploy-stack small {
|
||||
.deploy-stack small,
|
||||
.endpoint-line span,
|
||||
.ops-card > span {
|
||||
color: var(--faint);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
@@ -377,6 +446,7 @@ a {
|
||||
}
|
||||
|
||||
.route-row strong,
|
||||
.console-metrics strong,
|
||||
.mini-grid strong,
|
||||
.node-card strong,
|
||||
.deploy-stack strong {
|
||||
@@ -384,6 +454,30 @@ a {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.console-metrics {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.console-metrics > div {
|
||||
min-height: 70px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 7px;
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.console-metrics strong {
|
||||
color: var(--acid);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mini-grid {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -441,7 +535,9 @@ a {
|
||||
}
|
||||
|
||||
.platform-section,
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.factory-section,
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
@@ -454,7 +550,14 @@ a {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.section-heading.split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.54fr);
|
||||
align-items: end;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.section-heading span,
|
||||
.ops-copy span,
|
||||
.factory-copy span,
|
||||
.deploy-section > div:first-child > span {
|
||||
color: var(--acid);
|
||||
@@ -467,6 +570,7 @@ a {
|
||||
|
||||
.section-heading h2,
|
||||
.workflow-panel h2,
|
||||
.ops-copy h2,
|
||||
.factory-copy h2,
|
||||
.deploy-section h2,
|
||||
.final-section h2 {
|
||||
@@ -523,7 +627,11 @@ a {
|
||||
}
|
||||
|
||||
.capability-card p,
|
||||
.section-heading.split p,
|
||||
.endpoint-card p,
|
||||
.workflow-panel p,
|
||||
.ops-copy p,
|
||||
.ops-card p,
|
||||
.factory-copy p,
|
||||
.deploy-section p,
|
||||
.final-section p {
|
||||
@@ -532,6 +640,78 @@ a {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.capability-card,
|
||||
.endpoint-card,
|
||||
.ops-card,
|
||||
.module-strip span {
|
||||
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
|
||||
}
|
||||
|
||||
.capability-card:hover,
|
||||
.endpoint-card:hover,
|
||||
.ops-card:hover,
|
||||
.module-strip span:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--line-strong);
|
||||
background-color: rgba(255, 255, 255, 0.045);
|
||||
}
|
||||
|
||||
.api-section {
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.endpoint-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.endpoint-card {
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: 22px;
|
||||
border-radius: 24px;
|
||||
padding: 20px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(215, 255, 77, 0.08), transparent 34%),
|
||||
rgba(255, 255, 255, 0.026);
|
||||
}
|
||||
|
||||
.endpoint-line {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.endpoint-line span {
|
||||
border: 1px solid rgba(215, 255, 77, 0.22);
|
||||
border-radius: 999px;
|
||||
color: var(--acid);
|
||||
padding: 5px 8px;
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.endpoint-line code {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--ice);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.endpoint-card h3,
|
||||
.ops-card h3 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 23px;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
.workflow-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
|
||||
@@ -605,6 +785,51 @@ a {
|
||||
rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.ops-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ops-copy,
|
||||
.ops-grid {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 32px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
|
||||
rgba(255, 255, 255, 0.025);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.ops-copy {
|
||||
display: grid;
|
||||
align-content: end;
|
||||
gap: 18px;
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.ops-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.ops-card {
|
||||
min-height: 136px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
border-radius: 22px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.ops-card > span {
|
||||
margin-bottom: 16px;
|
||||
color: var(--acid);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.factory-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
|
||||
@@ -675,7 +900,9 @@ a {
|
||||
}
|
||||
|
||||
.hero-section,
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.factory-section,
|
||||
.deploy-section {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -689,13 +916,20 @@ a {
|
||||
.capability-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.section-heading.split,
|
||||
.endpoint-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.site-nav,
|
||||
.hero-section,
|
||||
.platform-section,
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.factory-section,
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
@@ -729,8 +963,13 @@ a {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-proof,
|
||||
.console-metrics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-console {
|
||||
min-height: 390px;
|
||||
min-height: 520px;
|
||||
border-radius: 26px;
|
||||
padding: 14px;
|
||||
}
|
||||
@@ -760,6 +999,8 @@ a {
|
||||
}
|
||||
|
||||
.workflow-panel,
|
||||
.ops-copy,
|
||||
.ops-grid,
|
||||
.factory-section,
|
||||
.deploy-section {
|
||||
padding: 22px;
|
||||
|
||||
Reference in New Issue
Block a user