Skip to content

Refine FullStack product builder page #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
romahawk merged 1 commit into from
Jul 29, 2026
Merged

Refine FullStack product builder page #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 297 additions & 0 deletions src/assets/css/market-pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -893,6 +893,289 @@
line-height: 1.55;
}

.market-page--fullstack .page-hero__inner {
padding-top: clamp(34px, 5vw, 62px);
}

.market-page--fullstack .page-hero__title {
max-width: 920px;
}

.fullstack-hero-extra {
max-width: 980px;
gap: 14px;
}

.fullstack-credibility-line {
margin: 0;
padding: 12px 14px;
border: 1px solid var(--system-border);
border-left: 3px solid var(--accent-fullstack);
border-radius: 12px;
background: var(--accent-fullstack-soft);
color: var(--muted-strong);
line-height: 1.55;
}

.fullstack-hero-map {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
padding: 14px;
border: 1px solid var(--system-border);
border-radius: 16px;
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(460px 200px at 100% 0, var(--accent-fullstack-soft), transparent 68%),
color-mix(in srgb, var(--panel) 88%, transparent);
background-size: 24px 24px, 24px 24px, auto, auto;
box-shadow: var(--shadow);
}

.fullstack-hero-map__node {
position: relative;
z-index: 1;
min-width: 0;
padding: 12px 10px;
border: 1px solid var(--system-border);
border-radius: 12px;
background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.fullstack-hero-map__node span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-bottom: 9px;
border-radius: 999px;
background: var(--accent-fullstack-soft);
color: var(--accent-fullstack);
font-size: 11px;
font-weight: 900;
}

.fullstack-hero-map__node strong {
display: block;
color: var(--text);
font-size: 12px;
line-height: 1.3;
}

.fullstack-hero-map__connector {
display: none;
}

.fullstack-stack-grid,
.fullstack-project-grid,
.fullstack-secondary-grid,
.fullstack-capability-grid {
display: grid;
gap: 16px;
}

.fullstack-stack-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.fullstack-stack-card,
.fullstack-workflow-card,
.fullstack-project-card,
.fullstack-capability-card {
position: relative;
overflow: hidden;
border: 1px solid var(--system-border);
border-radius: 14px;
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
color-mix(in srgb, var(--panel) 90%, transparent);
background-size: 24px 24px, 24px 24px, auto;
box-shadow: var(--shadow);
}

.fullstack-stack-card::before,
.fullstack-workflow-card::before,
.fullstack-project-card::before,
.fullstack-capability-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, var(--accent-fullstack), transparent);
}

.fullstack-stack-card {
padding: 18px;
}

.fullstack-stack-card h3,
.fullstack-workflow-card h3,
.fullstack-project-card h3,
.fullstack-capability-card h3 {
margin: 0;
color: var(--text);
line-height: 1.25;
}

.fullstack-stack-card h3 {
margin-bottom: 12px;
font-size: 16px;
}

.fullstack-stack-card div,
.fullstack-project-card__stack,
.fullstack-project-card__links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.fullstack-workflow-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}

.fullstack-workflow-card {
padding: 18px;
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(260px 150px at 100% 0, var(--accent-fullstack-soft), transparent 70%),
color-mix(in srgb, var(--panel) 90%, transparent);
}

.fullstack-workflow-card span,
.fullstack-project-card header p,
.fullstack-project-card__status {
display: inline-flex;
width: fit-content;
color: var(--accent-fullstack);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.fullstack-workflow-card h3 {
margin-top: 10px;
font-size: 18px;
}

.fullstack-workflow-card p,
.fullstack-capability-card p {
margin: 9px 0 0;
color: var(--muted);
line-height: 1.6;
}

.fullstack-project-grid,
.fullstack-secondary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fullstack-project-card {
display: flex;
flex-direction: column;
padding: 20px;
}

.fullstack-project-card:nth-child(2n) {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 100% 0, color-mix(in srgb, var(--accent-fullstack-2) 12%, transparent), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
}

.fullstack-project-card:nth-child(3n) {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 0 100%, var(--accent-fullstack-soft), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
}

.fullstack-project-card--compact {
padding: 18px;
box-shadow: none;
}

.fullstack-project-card header {
display: grid;
gap: 7px;
}

.fullstack-project-card__status {
padding: 5px 8px;
border: 1px solid color-mix(in srgb, var(--accent-fullstack) 34%, var(--border));
border-radius: 999px;
background: var(--accent-fullstack-soft);
letter-spacing: 0.08em;
}

.fullstack-project-card h3 {
font-size: 21px;
}

.fullstack-project-card__description {
margin: 14px 0 0;
color: var(--muted-strong);
line-height: 1.62;
}

.fullstack-project-card__relevance {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px dashed var(--system-border);
color: var(--muted);
line-height: 1.58;
}

.fullstack-project-card__stack {
margin-top: 16px;
}

.fullstack-project-card__links {
margin-top: auto;
padding-top: 18px;
}

.fullstack-project-card__links a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 7px 10px;
border: 1px solid color-mix(in srgb, var(--accent-fullstack) 30%, var(--border));
border-radius: 999px;
background: var(--accent-fullstack-soft);
color: var(--text);
font-size: 13px;
font-weight: 850;
text-decoration: none;
}

.fullstack-project-card__links a:hover {
border-color: color-mix(in srgb, var(--accent-fullstack) 56%, var(--border-hover));
background: color-mix(in srgb, var(--accent-fullstack-soft) 78%, var(--panel-hover));
}

.fullstack-capability-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fullstack-capability-card {
padding: 18px;
}

.fullstack-capability-card h3 {
font-size: 17px;
}

@media (max-width: 920px) {
.page-hero--ai .page-hero__content,
.ai-before-after,
Expand Down Expand Up @@ -947,6 +1230,10 @@
.medtech-proof-grid,
.medtech-capability-grid,
.medtech-role-grid,
.fullstack-stack-grid,
.fullstack-project-grid,
.fullstack-secondary-grid,
.fullstack-capability-grid,
.home-system-visual {
grid-template-columns: 1fr;
}
Expand Down Expand Up @@ -975,6 +1262,11 @@
.medtech-hero-extra .workflow-node::after {
display: none;
}

.fullstack-hero-map,
.fullstack-workflow-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 640px) {
Expand Down Expand Up @@ -1004,6 +1296,11 @@
grid-template-columns: 1fr;
}

.fullstack-hero-map,
.fullstack-workflow-row {
grid-template-columns: 1fr;
}

.ai-before-after,
.ai-tool-matrix,
.ai-offer-card,
Expand Down
Loading
Loading