diff --git a/website/app/assets/css/main.css b/website/app/assets/css/main.css index c18e2b1..c1841fd 100644 --- a/website/app/assets/css/main.css +++ b/website/app/assets/css/main.css @@ -392,6 +392,7 @@ footer { } .workflow-section, +.audience-teaser, .matrix-section, .open-source-section, .script-section, @@ -443,6 +444,17 @@ footer { width: 2rem; } +.audience-teaser { + align-items: center; + border-top: 1px solid rgba(23, 33, 31, 0.12); + grid-template-columns: minmax(0, 1fr) auto; +} + +.audience-teaser h2 { + font-size: clamp(1.8rem, 3vw, 2.8rem); + max-width: 52rem; +} + .matrix-section { border-top: 1px solid rgba(23, 33, 31, 0.12); grid-template-columns: 1fr; @@ -663,6 +675,79 @@ footer { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem; } +.audience-page { + margin: 0 auto; + max-width: 1180px; + padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2rem) 5rem; +} + +.audience-heading { + max-width: 58rem; + margin-bottom: 2.5rem; +} + +.audience-heading h1 { + max-width: 12ch; +} + +.audience-heading p { + color: #51605c; + font-size: 1.08rem; + line-height: 1.7; + max-width: 46rem; +} + +.audience-grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.audience-grid article { + background: rgba(255, 255, 255, 0.76); + border: 1px solid rgba(23, 33, 31, 0.1); + border-radius: 0.5rem; + padding: 1.35rem; +} + +.audience-grid span { + color: var(--accent-dark); + display: inline-block; + font-size: 0.82rem; + font-weight: 800; + margin-bottom: 1rem; +} + +.audience-grid h2 { + font-size: 1.2rem; + margin-bottom: 0.75rem; +} + +.audience-grid p, +.audience-grid li, +.audience-fit li { + color: #51605c; + line-height: 1.6; +} + +.audience-grid ul, +.audience-fit ul { + display: grid; + gap: 0.55rem; + margin: 1rem 0 0; + padding-left: 1.1rem; +} + +.audience-fit { + align-items: start; + border-top: 1px solid rgba(23, 33, 31, 0.12); + display: grid; + gap: 2rem; + grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); + margin-top: 5rem; + padding-top: 4rem; +} + .legal-heading { max-width: 45rem; margin-bottom: 2.5rem; @@ -742,6 +827,7 @@ footer p { @media (max-width: 980px) { .hero-section, .workflow-section, + .audience-teaser, .matrix-section, .open-source-section, .script-section, @@ -755,6 +841,8 @@ footer p { .highlights, .feature-grid, + .audience-grid, + .audience-fit, .matrix-layout, .federation-panel, .legal-grid { @@ -797,6 +885,11 @@ footer p { font-size: 3rem; } + .audience-heading h1 { + font-size: 2.55rem; + max-width: none; + } + .product-preview { min-height: auto; } @@ -812,6 +905,7 @@ footer p { .metric-row, .highlights, .feature-grid, + .audience-grid, .matrix-stack, .legal-grid { grid-template-columns: 1fr; diff --git a/website/app/pages/impressum.vue b/website/app/pages/impressum.vue index b522fc9..5eae53d 100644 --- a/website/app/pages/impressum.vue +++ b/website/app/pages/impressum.vue @@ -6,6 +6,7 @@