| | |
|---|
| | | 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: user-provided hero visual (black bg removed → white) */ |
|---|
| | | .hero__art { |
|---|
| | | margin: 0; |
|---|
| | | line-height: 0; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: flex-end; |
|---|
| | | background: var(--hero-bg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .hero__art img { |
|---|
| | |
|---|
| | | width: 100%; |
|---|
| | | max-width: 100%; |
|---|
| | | height: auto; |
|---|
| | | background: var(--hero-bg); |
|---|
| | | border: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* Main content */ |
|---|
