/* * layout.css — Container, sections, grid, spacing. * Editorial cadence: generous whitespace, asymmetric grids, * tighter rhythm on mobile. */ /* Container — max-width with responsive padding */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad-mobile); position: relative; } @media (min-width: 768px) { .container { padding-inline: var(--container-pad-desktop); } } /* Page wrapper. Sits on top of the ambient .canvas-layer via paint order: * .canvas-layer is the first child of and uses position: fixed, * while .page is a later sibling with position: relative. Text inside * .page paints on top of the canvas without needing a stacking context. * Prose elements inside .page apply a solid background-color plate * (see components.css "READABILITY PLATE" block) so the ambient dot * layer is cleanly occluded where text sits. */ .page { position: relative; } /* Ambient layer — full viewport, behind everything. * The cursor-reactive dot grid is drawn by , * managed by js/dot-grid.js. Theme-reactive via --grid-dot-color / * --grid-dot-opacity custom properties. */ .canvas-layer { position: fixed; inset: 0; z-index: var(--z-canvas); pointer-events: none; } .canvas-layer > canvas { width: 100%; height: 100%; display: block; } /* Section base — generous vertical rhythm */ section { position: relative; padding-block: var(--space-9); } @media (min-width: 768px) { section { padding-block: var(--space-10); } } @media (min-width: 1280px) { section { padding-block: var(--space-11); } } /* ======================================== HERO — content-sized, no forced viewport fill --- Top + bottom padding = --space-7 (48px) + 200px flat = 248px each side. The symmetric padding lets "Arno Richter." breathe at the top and gives the CTA buttons the same breathing room before the next section. ======================================== */ .hero { display: flex; flex-direction: column; justify-content: flex-start; padding-block: calc(var(--space-7) + 200px); } /* The first content section immediately after the hero matches the hero's * bottom padding so the seam reads as a single balanced gap instead of * compounding. The rest of the sections keep their generous default rhythm. */ .hero + section { padding-top: var(--space-7); } .hero > .container { display: grid; gap: var(--space-6); } /* Apps section — chapters stack vertically. Bottom padding is intentionally * smaller than top so the gap from the last app chapter to the manifesto * matches the gap from the manifesto to the footer. */ .apps { padding-top: var(--space-10); padding-bottom: var(--space-7); } .apps > .container:first-child { margin-bottom: 0; } /* ======================================== APP CHAPTER — split layout, wide gutters --- padding-block: var(--space-9) (96px) on both sides, so the inter-chapter gap is 96 + 96 = 192px = var(--space-11). That matches the apps-headline margin-bottom so every chapter has identical breathing room above AND below. No min-height: the old "cinematic 86vh" rule made the bottom gap grow with viewport height and broke the above/below symmetry. ======================================== */ .app-chapter { display: grid; gap: var(--space-8); align-items: center; padding-block: var(--space-9); position: relative; } /* First chapter drops its top padding so content hugs the apps headline; * the apps-headline's own margin-bottom provides the top gap instead. */ #app-chapters > .app-chapter:first-child { padding-block-start: 0; align-items: start; } .app-chapter + .app-chapter { border-top: 1px solid var(--color-hairline); } @media (min-width: 968px) { .app-chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); } /* Alternate left/right per chapter */ .app-chapter:nth-child(even) .app-text { order: 2; } .app-chapter:nth-child(even) .app-visual { order: 1; } } /* ======================================== MANIFESTO — large display type --- Single centered headline. Section padding is tuned so the gap from the last app chapter to "Just build it." (192px: 96 chapter + 48 apps pad-bottom + 48 manifesto pad-top) matches the gap from the headline down to the footer content (192px: padding-bottom + footer padding-top). calc(var(--space-11) - var(--space-4)) = 192 − 16 = 176. */ .manifesto { text-align: center; padding-top: var(--space-7); padding-bottom: calc(var(--space-11) - var(--space-4)); } /* ======================================== FOOTER ======================================== */ .footer { padding-top: var(--space-4); padding-bottom: var(--space-5); border-top: 1px solid var(--color-hairline); } .footer-grid { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr auto; align-items: center; gap: var(--space-6); } }