Align content pages with landing grid

src/components/LegalPage/LegalPage.module.css

@@ -1,12 +1,10 @@
 .page {
   min-height: 100vh;
-  background:
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
-    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));
 }
 
 .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);
+  width: 100%;
-  margin: 0 auto;
+  padding-top: 96px;
-  padding-top: 76px;
 }
 
 .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;
+  padding-bottom: 72px;
-  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);
 }
 
 .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);
+  font-size: 20px;
-  line-height: 1.65;
+  line-height: 1.6;
 }
 
 .text,
@@ -88,20 +84,27 @@
 }
 
 .section {
-  margin-top: 42px;
+  display: grid;
-  padding-top: 36px;
+  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 {
+  .intro {
-    padding: 32px 24px 40px;
+    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;

src/components/LegalPage/LegalPage.tsx

@@ -45,7 +45,7 @@ export function LegalPage({
 
     return (
         <Box className={classes.page}>
-            <Container size="lg" className={classes.shell}>
+            <Container className={classes.shell}>
                 <Group component="header" justify="space-between" className={classes.header}>
                     <Anchor
                         component={Link}
@@ -91,15 +91,9 @@ export function LegalPage({
                         )}
                     </Box>
 
-                    <Paper
+                    <Box component="article" className={classes.document}>
-                        component="article"
-                        radius="lg"
-                        withBorder
-                        shadow="sm"
-                        className={classes.document}
-                    >
                         {children}
-                    </Paper>
+                    </Box>
                 </Box>
 
                 <Group component="footer" justify="space-between" className={classes.footer}>
@@ -132,7 +126,7 @@ export function LegalSection({ title, children }: LegalSectionProps) {
             <Title order={2} className={classes.sectionTitle}>
                 {title}
             </Title>
-            {children}
+            <Box className={classes.sectionContent}>{children}</Box>
         </Box>
     );
 }

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);
+  font-size: 20px;
-  line-height: 1.65;
+  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;

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 (
-        <Stack component="section" id={id} gap="lg" className={classes.section}>
+        <Box component="section" id={id} className={classes.section}>
             <div>
                 <Title order={2} className={classes.sectionTitle}>
                     {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>