@@ -177,6 +191,61 @@ import Icon from '../components/Icon.astro';
.section-soft { background: var(--color-bg-alt); }
.section-yellow { background: var(--color-primary); }
+ /* ABOUT CONTENT (from markdown) */
+ .about-content {
+ max-width: 760px;
+ margin: 0 auto;
+ font-size: 16px;
+ line-height: 1.8;
+ color: var(--color-gray-700);
+ }
+ .about-content :global(h1) {
+ font-family: var(--font-display);
+ font-size: 36px;
+ font-weight: 900;
+ color: var(--color-black);
+ margin-bottom: 24px;
+ }
+ .about-content :global(h2) {
+ font-family: var(--font-display);
+ font-size: 26px;
+ font-weight: 800;
+ color: var(--color-black);
+ margin: 48px 0 16px;
+ padding-top: 24px;
+ border-top: 1px solid var(--color-gray-200);
+ }
+ .about-content :global(h3) {
+ font-family: var(--font-display);
+ font-size: 20px;
+ font-weight: 800;
+ color: var(--color-black);
+ margin: 32px 0 12px;
+ }
+ .about-content :global(p) {
+ margin-bottom: 16px;
+ }
+ .about-content :global(strong) {
+ color: var(--color-black);
+ font-weight: 700;
+ }
+ .about-content :global(blockquote) {
+ border-left: 4px solid var(--color-primary);
+ padding: 16px 20px;
+ margin: 24px 0;
+ background: var(--color-bg-alt);
+ border-radius: 0 var(--radius-md) var(--radius-md) 0;
+ font-style: italic;
+ }
+ .about-content :global(ul),
+ .about-content :global(ol) {
+ padding-left: 24px;
+ margin-bottom: 16px;
+ }
+ .about-content :global(li) {
+ margin-bottom: 8px;
+ }
+
.section-badge {
display: inline-block;
background: var(--color-primary);
@@ -257,11 +326,13 @@ import Icon from '../components/Icon.astro';
margin-top: 8px;
}
- /* VALUES */
+ /* VALUES — 2x2 grid for visual balance with 4 cards */
.values-grid {
display: grid;
- grid-template-columns: repeat(4, 1fr);
+ grid-template-columns: repeat(2, 1fr);
gap: 24px;
+ max-width: 900px;
+ margin: 0 auto;
}
.value-card {
background: var(--color-white);
@@ -384,7 +455,6 @@ import Icon from '../components/Icon.astro';
/* RESPONSIVE */
@media (max-width: 1024px) {
.story-grid { grid-template-columns: 1fr; gap: 40px; }
- .values-grid { grid-template-columns: repeat(2, 1fr); }
.process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {