Skip to content

Commit b1d0d48

Browse files
richiemcilroyrichiemcilroy
committed
style(web): add CSS for what-is-sandchest, how-it-works, and terms pages
1 parent 46c8d9e commit b1d0d48

1 file changed

Lines changed: 283 additions & 0 deletions

File tree

‎apps/web/src/styles/global.css‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3601,3 +3601,286 @@ nav ul li a {
36013601
gap: 16px;
36023602
}
36033603
}
3604+
3605+
/* ── What is Sandchest page ── */
3606+
3607+
/* Problem cards */
3608+
.what-problem-grid {
3609+
display: grid;
3610+
grid-template-columns: repeat(3, 1fr);
3611+
gap: 1px;
3612+
border-radius: 8px;
3613+
overflow: hidden;
3614+
background: var(--color-border-weak);
3615+
}
3616+
3617+
.what-problem-card {
3618+
background: var(--color-surface);
3619+
padding: 28px;
3620+
transition: background 0.3s ease;
3621+
}
3622+
3623+
.what-problem-card:hover {
3624+
background: var(--color-surface-hover);
3625+
}
3626+
3627+
@media (max-width: 60rem) {
3628+
.what-problem-grid {
3629+
grid-template-columns: 1fr;
3630+
}
3631+
}
3632+
3633+
/* Three pillars */
3634+
.what-pillar-grid {
3635+
display: flex;
3636+
flex-direction: column;
3637+
gap: 1px;
3638+
border-radius: 8px;
3639+
overflow: hidden;
3640+
background: var(--color-border-weak);
3641+
}
3642+
3643+
.what-pillar {
3644+
background: var(--color-surface);
3645+
padding: 32px;
3646+
display: grid;
3647+
grid-template-columns: 200px 1fr 1fr;
3648+
align-items: start;
3649+
gap: 32px;
3650+
transition: background 0.3s ease;
3651+
}
3652+
3653+
.what-pillar:hover {
3654+
background: var(--color-surface-hover);
3655+
}
3656+
3657+
.what-pillar-header {
3658+
display: flex;
3659+
flex-direction: column;
3660+
gap: 4px;
3661+
}
3662+
3663+
.what-pillar-code {
3664+
display: flex;
3665+
flex-direction: column;
3666+
gap: 4px;
3667+
padding: 16px;
3668+
background: var(--color-background);
3669+
border-radius: 6px;
3670+
border: 1px solid var(--color-border-weak);
3671+
align-self: center;
3672+
}
3673+
3674+
.what-pillar-code code {
3675+
white-space: nowrap;
3676+
line-height: 1.6;
3677+
}
3678+
3679+
@media (max-width: 60rem) {
3680+
.what-pillar {
3681+
grid-template-columns: 1fr;
3682+
gap: 16px;
3683+
padding: 24px;
3684+
}
3685+
3686+
.what-pillar-code {
3687+
align-self: stretch;
3688+
}
3689+
}
3690+
3691+
/* Use cases */
3692+
.what-usecase-grid {
3693+
display: grid;
3694+
grid-template-columns: repeat(2, 1fr);
3695+
gap: 1px;
3696+
border-radius: 8px;
3697+
overflow: hidden;
3698+
background: var(--color-border-weak);
3699+
}
3700+
3701+
.what-usecase-card {
3702+
background: var(--color-surface);
3703+
padding: 28px;
3704+
transition: background 0.3s ease;
3705+
}
3706+
3707+
.what-usecase-card:hover {
3708+
background: var(--color-surface-hover);
3709+
}
3710+
3711+
@media (max-width: 50rem) {
3712+
.what-usecase-grid {
3713+
grid-template-columns: 1fr;
3714+
}
3715+
}
3716+
3717+
/* Architecture layout */
3718+
.what-arch-layout {
3719+
display: grid;
3720+
grid-template-columns: 1fr 1fr;
3721+
gap: 48px;
3722+
align-items: start;
3723+
}
3724+
3725+
.what-arch-stack {
3726+
display: flex;
3727+
flex-direction: column;
3728+
gap: 20px;
3729+
}
3730+
3731+
.what-arch-layer {
3732+
position: relative;
3733+
display: flex;
3734+
justify-content: space-between;
3735+
align-items: center;
3736+
padding: 14px 20px;
3737+
border: 1px solid var(--color-border);
3738+
border-radius: 6px;
3739+
background: var(--color-surface);
3740+
transition: background 0.2s;
3741+
}
3742+
3743+
.what-arch-layer:hover {
3744+
background: var(--color-surface-hover);
3745+
}
3746+
3747+
.what-arch-integrations {
3748+
display: flex;
3749+
flex-direction: column;
3750+
gap: 16px;
3751+
}
3752+
3753+
.what-arch-integration {
3754+
padding: 16px;
3755+
border: 1px solid var(--color-border-weak);
3756+
border-radius: 6px;
3757+
transition: border-color 0.2s;
3758+
}
3759+
3760+
.what-arch-integration:hover {
3761+
border-color: var(--color-border);
3762+
}
3763+
3764+
@media (max-width: 60rem) {
3765+
.what-arch-layout {
3766+
grid-template-columns: 1fr;
3767+
gap: 32px;
3768+
}
3769+
}
3770+
3771+
/* CTA box */
3772+
.what-cta-box {
3773+
padding: 40px;
3774+
border: 1px solid var(--color-border-weak);
3775+
border-radius: 8px;
3776+
background: var(--color-surface);
3777+
}
3778+
3779+
.what-cta-code {
3780+
padding: 12px 16px;
3781+
background: var(--color-background);
3782+
border: 1px solid var(--color-border-weak);
3783+
border-radius: 6px;
3784+
display: inline-block;
3785+
}
3786+
3787+
@media (max-width: 36rem) {
3788+
.what-cta-box {
3789+
padding: 24px;
3790+
}
3791+
}
3792+
3793+
/* ── How it works page ── */
3794+
3795+
/* Steps grid */
3796+
.how-steps-grid {
3797+
display: grid;
3798+
grid-template-columns: repeat(2, 1fr);
3799+
gap: 1px;
3800+
border-radius: 6px;
3801+
overflow: hidden;
3802+
background: var(--color-border-weak);
3803+
}
3804+
3805+
.how-step-card {
3806+
background: var(--color-surface);
3807+
padding: 28px;
3808+
display: flex;
3809+
flex-direction: column;
3810+
gap: 12px;
3811+
transition: background 0.3s ease;
3812+
}
3813+
3814+
.how-step-card:hover {
3815+
background: var(--color-surface-hover);
3816+
}
3817+
3818+
.how-step-header {
3819+
display: flex;
3820+
align-items: center;
3821+
gap: 12px;
3822+
}
3823+
3824+
.how-step-code {
3825+
padding: 10px 14px;
3826+
background: var(--color-background);
3827+
border: 1px solid var(--color-border-weak);
3828+
border-radius: 4px;
3829+
margin-top: auto;
3830+
}
3831+
3832+
@media (max-width: 50rem) {
3833+
.how-steps-grid {
3834+
grid-template-columns: 1fr;
3835+
}
3836+
}
3837+
3838+
/* Workflow grid */
3839+
.how-workflow-grid {
3840+
display: grid;
3841+
grid-template-columns: repeat(3, 1fr);
3842+
gap: 1px;
3843+
border-radius: 6px;
3844+
overflow: hidden;
3845+
background: var(--color-border-weak);
3846+
}
3847+
3848+
.how-workflow-card {
3849+
background: var(--color-surface);
3850+
padding: 28px;
3851+
display: flex;
3852+
flex-direction: column;
3853+
transition: background 0.3s ease;
3854+
}
3855+
3856+
.how-workflow-card:hover {
3857+
background: var(--color-surface-hover);
3858+
}
3859+
3860+
@media (max-width: 60rem) {
3861+
.how-workflow-grid {
3862+
grid-template-columns: 1fr;
3863+
}
3864+
}
3865+
3866+
/* Terms of Service */
3867+
.terms-body p {
3868+
margin-bottom: 12px;
3869+
}
3870+
3871+
.terms-body p:last-child {
3872+
margin-bottom: 0;
3873+
}
3874+
3875+
.terms-body ul {
3876+
list-style: disc;
3877+
padding-left: 24px;
3878+
margin: 12px 0;
3879+
display: flex;
3880+
flex-direction: column;
3881+
gap: 6px;
3882+
}
3883+
3884+
.terms-body ul li {
3885+
line-height: 1.8;
3886+
}

0 commit comments

Comments
 (0)