diff --git a/app/portfolio.css b/app/portfolio.css index 94d4925..765be70 100644 --- a/app/portfolio.css +++ b/app/portfolio.css @@ -247,6 +247,7 @@ .type-hero-title { font-size: var(--text-hero-title); line-height: 1.08; + text-wrap: balance; } .navbar-brand-mobile { @@ -255,16 +256,6 @@ text-overflow: ellipsis; } - .hero-title-mobile-lines { - display: flex; - flex-direction: column; - gap: 0.08em; - } - - .hero-title-mobile-lines span { - display: block; - } - @media (min-width: 1024px) { .type-hero-title-latin { font-size: var(--text-hero-title-latin); @@ -396,6 +387,14 @@ box-shadow: var(--button-secondary-shadow); } + .hero-action-link { + min-width: 210px; + min-height: 58px; + padding: 0.95rem 1.6rem; + font-size: 16px; + line-height: 1.2; + } + .display-face { font-family: var(--font-display), serif; } @@ -685,6 +684,11 @@ flex: 1 1 auto; } + .navbar-brand-mobile { + line-height: 1.12; + margin-bottom: 0.35rem; + } + .navbar-logo-shell { padding: 0.45rem; border-radius: 18px; @@ -733,12 +737,14 @@ .navbar-specialty { display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: normal; + overflow: visible; + text-overflow: clip; font-size: 11px; - letter-spacing: 0.06em; - line-height: 1.35; + letter-spacing: 0.04em; + line-height: 1.4; + text-wrap: pretty; + margin-top: 0; } .type-page-title { @@ -771,6 +777,18 @@ padding: 1.25rem 1rem; } + .hero-action-group { + justify-content: flex-start; + gap: 0.75rem; + } + + .hero-action-link { + min-width: 170px; + min-height: 46px; + padding: 0.7rem 1rem; + font-size: 13px; + } + .line-frame::before, .line-frame::after { height: 56px; @@ -779,6 +797,25 @@ } @media (max-width: 430px) { + .navbar-brand-lockup { + align-items: flex-start; + } + + .navbar-brand-copy { + min-width: 0; + padding-top: 0.15rem; + } + + .navbar-brand-mobile { + margin-bottom: 0.45rem; + } + + .navbar-specialty { + max-width: 100%; + font-size: 10.5px; + line-height: 1.45; + } + .type-hero-title { font-size: clamp(30px, 11.5vw, 40px); line-height: 1.02; @@ -799,16 +836,16 @@ .hero-action-group { display: flex; - flex-direction: column; + flex-direction: row; + justify-content: flex-start; align-items: flex-start; + flex-wrap: wrap; gap: 0.75rem; } .hero-action-group > * { width: auto; - min-width: min(100%, 13.5rem); - padding: 0.8rem 1.35rem; - font-size: 13px; + min-width: 150px; } } @@ -826,6 +863,11 @@ font-size: clamp(18px, 5.8vw, 22px); } + .navbar-specialty { + font-size: 10px; + letter-spacing: 0.03em; + } + .contact-card { padding: 1rem 0.875rem; } diff --git a/components/home-page.tsx b/components/home-page.tsx index 98799f7..bf604a2 100644 --- a/components/home-page.tsx +++ b/components/home-page.tsx @@ -16,11 +16,6 @@ export function HomePage({ language }: { language: Language }) { const dir = getDirection(language); const t = portfolioContent[language]; const founderName = language === "ar" ? sharedProfile.founderNameAr : sharedProfile.founderNameEn; - const founderNameParts = founderName.trim().split(/\s+/); - const mobileFounderNameLines = - founderNameParts.length > 2 - ? [`${founderNameParts[0]} ${founderNameParts[1]}`, founderNameParts.slice(2).join(" ")] - : [founderName]; const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address; const heroImageAlt = language === "ar" @@ -68,12 +63,7 @@ export function HomePage({ language }: { language: Language }) { language === "en" ? "type-hero-title-latin" : "" }`} > - {founderName} - - {mobileFounderNameLines.map((line) => ( - {line} - ))} - + {founderName}