From b902298ad670575933f479ef13e28d6de16a5690 Mon Sep 17 00:00:00 2001 From: rosetta Date: Thu, 30 Jul 2026 17:00:15 -0700 Subject: [PATCH] Align content pages with landing grid --- src/components/LegalPage/LegalPage.module.css | 62 +++++++++---------- src/components/LegalPage/LegalPage.tsx | 14 ++--- src/pages/SupportPage.module.css | 28 +++++++-- src/pages/SupportPage.tsx | 9 ++- 4 files changed, 64 insertions(+), 49 deletions(-) diff --git a/src/components/LegalPage/LegalPage.module.css b/src/components/LegalPage/LegalPage.module.css index 3412d73..40d93ec 100644 --- a/src/components/LegalPage/LegalPage.module.css +++ b/src/components/LegalPage/LegalPage.module.css @@ -1,12 +1,10 @@ .page { min-height: 100vh; - background: - radial-gradient(circle at 50% 0%, light-dark(rgba(34, 139, 230, 0.12), rgba(34, 139, 230, 0.16)), transparent 34rem), - light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8)); + background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8)); } .shell { - padding-top: var(--mantine-spacing-lg); + padding-top: var(--mantine-spacing-md); padding-bottom: calc(var(--mantine-spacing-xl) * 2); } @@ -29,13 +27,13 @@ } .main { - width: min(100%, 820px); - margin: 0 auto; - padding-top: 76px; + width: 100%; + padding-top: 96px; } .intro { - padding: 0 var(--mantine-spacing-md) calc(var(--mantine-spacing-xl) * 1.5); + max-width: 900px; + padding-bottom: 64px; } .title { @@ -49,17 +47,15 @@ } .document { - padding: 44px 48px 52px; - background: light-dark(rgba(255, 255, 255, 0.9), rgba(20, 21, 23, 0.9)); - border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); - backdrop-filter: blur(12px); + padding-bottom: 72px; } .lead { + max-width: 780px; margin: 0; color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0)); - font-size: var(--mantine-font-size-lg); - line-height: 1.65; + font-size: 20px; + line-height: 1.6; } .text, @@ -88,20 +84,27 @@ } .section { - margin-top: 42px; - padding-top: 36px; + display: grid; + grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); + gap: 52px; + margin-top: 56px; + padding-top: 48px; border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); } .sectionTitle { - margin: 0 0 var(--mantine-spacing-md); + margin: 0; color: light-dark(var(--mantine-color-dark-9), var(--mantine-color-white)); font-family: Outfit, var(--mantine-font-family); - font-size: clamp(22px, 3vw, 28px); + font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.25; } +.sectionContent { + min-width: 0; +} + .document a { color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3)); text-underline-offset: 3px; @@ -122,18 +125,24 @@ } .footer { - margin-top: 72px; padding-top: var(--mantine-spacing-lg); border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5)); } @media (max-width: 48em) { .main { - padding-top: 52px; + padding-top: 72px; } - .document { - padding: 32px 24px 40px; + .intro { + padding-bottom: 48px; + } + + .section { + grid-template-columns: 1fr; + gap: var(--mantine-spacing-md); + margin-top: 44px; + padding-top: 36px; } } @@ -147,15 +156,6 @@ flex-direction: column; } - .intro { - padding-inline: 0; - } - - .document { - margin-inline: calc(var(--mantine-spacing-xs) * -1); - padding-inline: 20px; - } - .footer { align-items: flex-start; flex-direction: column; diff --git a/src/components/LegalPage/LegalPage.tsx b/src/components/LegalPage/LegalPage.tsx index 56a89b5..599b0ef 100644 --- a/src/components/LegalPage/LegalPage.tsx +++ b/src/components/LegalPage/LegalPage.tsx @@ -45,7 +45,7 @@ export function LegalPage({ return ( - + - + {children} - + @@ -132,7 +126,7 @@ export function LegalSection({ title, children }: LegalSectionProps) { {title} - {children} + {children} ); } diff --git a/src/pages/SupportPage.module.css b/src/pages/SupportPage.module.css index 303cadd..c541427 100644 --- a/src/pages/SupportPage.module.css +++ b/src/pages/SupportPage.module.css @@ -1,8 +1,13 @@ .lead { - max-width: 680px; + max-width: 780px; color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0)); - font-size: var(--mantine-font-size-lg); - line-height: 1.65; + font-size: 20px; + line-height: 1.6; +} + +.primaryAction { + height: 54px; + padding-inline: 38px; } .topic { @@ -21,8 +26,11 @@ } .section { + display: grid; + grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); + gap: 52px; scroll-margin-top: var(--mantine-spacing-xl); - padding-top: var(--mantine-spacing-xl); + padding-top: 48px; border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); } @@ -34,7 +42,7 @@ } .sectionTitle { - font-size: clamp(24px, 3vw, 30px); + font-size: clamp(26px, 3vw, 34px); } .contact { @@ -51,6 +59,16 @@ } @media (max-width: 48em) { + .primaryAction { + padding-inline: 18px; + } + + .section { + grid-template-columns: 1fr; + gap: var(--mantine-spacing-lg); + padding-top: 36px; + } + .contact :global(.mantine-Group-root) { align-items: flex-start; flex-direction: column; diff --git a/src/pages/SupportPage.tsx b/src/pages/SupportPage.tsx index 626393f..4cd9c0b 100644 --- a/src/pages/SupportPage.tsx +++ b/src/pages/SupportPage.tsx @@ -1,6 +1,7 @@ import { Accordion, Anchor, + Box, Button, Card, Group, @@ -125,7 +126,7 @@ interface SupportSectionProps { function SupportSection({ id, title, description, items }: SupportSectionProps) { return ( - +
{title} @@ -146,7 +147,7 @@ function SupportSection({ id, title, description, items }: SupportSectionProps) </Accordion.Item> ))} </Accordion> - </Stack> + </Box> ); } @@ -174,8 +175,10 @@ export function SupportPage() { component="a" href="mailto:admin@rosetta.im?subject=Rosetta%20Support%20Request" leftSection={<IconMail size={18} />} + variant="default" mt="xl" - size="md" + size="xl" + className={classes.primaryAction} > Email Rosetta Support </Button>