| | |
|---|
| | | background: rgba(255, 255, 255, 0.88); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Hero — reference layout: copy left, stacked screenshots right */ |
|---|
| | | /* Hero — copy left, original design visual right (compact, no forced full-screen) */ |
|---|
| | | .hero { |
|---|
| | | width: 100%; |
|---|
| | | min-height: calc(100svh - var(--header-h)); |
|---|
| | | min-height: calc(100vh - var(--header-h)); |
|---|
| | | padding: 48px 0 64px; |
|---|
| | | padding: 40px 0 48px; |
|---|
| | | background: var(--hero-bg); |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | |
|---|
| | | grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); |
|---|
| | | gap: 12px 32px; |
|---|
| | | align-items: center; |
|---|
| | | min-height: calc(100svh - var(--header-h) - 96px); |
|---|
| | | min-height: calc(100vh - var(--header-h) - 96px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .hero__copy { |
|---|
| | |
|---|
| | | max-width: 22em; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Right art: pixels from user's original design (vertical crop only — stack + reflection intact) */ |
|---|
| | | /* Right art: composited 3D stack from real screenshot (built asset, no extra CSS warp) */ |
|---|
| | | .hero__art { |
|---|
| | | margin: 0; |
|---|
| | | line-height: 0; |
|---|
