amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: convert project sizing to scalable rem units with responsive root font scaling

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 13:58:17 +03:30
parent c7ef6dff3e
commit 9f14e9a4f4
12 changed files with 342 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/EducationSection.module.css
View File

@@ -1,8 +1,8 @@
.educationSection { .educationSection {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 60px; padding-top: 3.75rem;
padding-bottom: 32px; padding-bottom: 2rem;
} }
.card { .card {
@@ -10,17 +10,17 @@
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 24px 32px; padding: 1.5rem 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 36px; gap: 2.25rem;
transition: transition:
border-color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease,
transform var(--motion-duration-default) var(--motion-ease-out); transform var(--motion-duration-default) var(--motion-ease-out);
} }
.crestCol { .crestCol {
width: 264px; width: 16.5rem;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -28,8 +28,8 @@
} }
.crestContainer { .crestContainer {
width: 264px; width: 16.5rem;
height: 192px; height: 12rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -48,7 +48,7 @@
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 2px; margin-bottom: 0.125rem;
} }
.date { .date {
@@ -58,7 +58,7 @@
letter-spacing: var(--letter-spacing-eyebrow); letter-spacing: var(--letter-spacing-eyebrow);
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.detailsCol { .detailsCol {
@@ -73,7 +73,7 @@
line-height: var(--line-height-h3); line-height: var(--line-height-h3);
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 2px; margin-bottom: 0.125rem;
} }
.description { .description {
@@ -100,16 +100,16 @@
.crestCol, .crestCol,
.crestContainer { .crestContainer {
width: 180px; width: 11.25rem;
height: 132px; height: 8.25rem;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.crestCol, .crestCol,
.crestContainer { .crestContainer {
width: 144px; width: 9rem;
height: 108px; height: 6.75rem;
} }
} }

70
src/components/ExperienceSection.module.css
View File

@@ -1,26 +1,26 @@
.experienceSection { .experienceSection {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 60px; padding-top: 3.75rem;
padding-bottom: 80px; padding-bottom: 5rem;
} }
.timeline { .timeline {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
margin-top: 20px; margin-top: 1.25rem;
} }
.timelineItem { .timelineItem {
display: flex; display: flex;
position: relative; position: relative;
min-height: 180px; min-height: 11.25rem;
} }
.spineColumn { .spineColumn {
position: relative; position: relative;
width: 40px; width: 2.5rem;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -28,11 +28,11 @@
} }
.nodeDot { .nodeDot {
width: 14px; width: 0.875rem;
height: 14px; height: 0.875rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-slate-400); background-color: var(--color-slate-400);
margin-top: 6px; margin-top: 0.375rem;
z-index: 2; z-index: 2;
transition: transition:
background-color var(--motion-duration-fast) ease, background-color var(--motion-duration-fast) ease,
@@ -46,8 +46,8 @@
.verticalLine { .verticalLine {
position: absolute; position: absolute;
top: 20px; top: 1.25rem;
bottom: 14px; bottom: 0.875rem;
width: 2px; width: 2px;
background-color: var(--border-strong); background-color: var(--border-strong);
z-index: 1; z-index: 1;
@@ -56,21 +56,21 @@
.itemContent { .itemContent {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
padding-left: 20px; padding-left: 1.25rem;
padding-bottom: 36px; padding-bottom: 2.25rem;
gap: 36px; gap: 2.25rem;
} }
.identityCol { .identityCol {
width: 360px; width: 22.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
.metaRow { .metaRow {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 0.5rem;
margin-bottom: 14px; margin-bottom: 0.875rem;
} }
.dateBadge { .dateBadge {
@@ -85,7 +85,7 @@
.locationWrapper { .locationWrapper {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 0.25rem;
font-size: var(--font-size-label-small); font-size: var(--font-size-label-small);
color: var(--text-muted); color: var(--text-muted);
} }
@@ -102,12 +102,12 @@
.roleIdentityRow { .roleIdentityRow {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 0.625rem;
} }
.logoContainer { .logoContainer {
width: 72px; width: 4.5rem;
height: 72px; height: 4.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
@@ -127,7 +127,7 @@
.roleTitles { .roleTitles {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 4px; padding-top: 0.25rem;
} }
.roleTitle { .roleTitle {
@@ -147,36 +147,36 @@
.detailsCol { .detailsCol {
flex-grow: 1; flex-grow: 1;
max-width: 820px; max-width: 51.25rem;
padding-top: 4px; padding-top: 0.25rem;
} }
.summary { .summary {
font-size: var(--font-size-body-small); font-size: var(--font-size-body-small);
line-height: var(--line-height-body-small); line-height: var(--line-height-body-small);
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.bulletList { .bulletList {
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 0.5rem;
} }
.bulletItem { .bulletItem {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 0.625rem;
} }
.bulletDot { .bulletDot {
width: 5px; width: 0.3125rem;
height: 5px; height: 0.3125rem;
border-radius: 50%; border-radius: 50%;
background-color: var(--text-muted); background-color: var(--text-muted);
margin-top: 10px; margin-top: 0.625rem;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -209,9 +209,9 @@
} }
} }
@media (max-width: 640px) { @media (max-width: 650px) {
.spineColumn { .spineColumn {
width: 24px; width: 1.5rem;
} }
.itemContent { .itemContent {
@@ -223,12 +223,12 @@
} }
.logoContainer { .logoContainer {
width: 60px; width: 3.75rem;
height: 60px; height: 3.75rem;
} }
.roleTitle { .roleTitle {
font-size: 18px; font-size: 1.125rem;
line-height: 26px; line-height: 1.625rem;
} }
} }

30
src/components/FooterSection.module.css
View File

@@ -1,8 +1,8 @@
.footerSection { .footerSection {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 1440px; max-width: var(--layout-frame);
height: 480px; height: 30rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -16,7 +16,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 480px; height: 30rem;
z-index: 1; z-index: 1;
} }
@@ -32,14 +32,14 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
margin-top: 84px; margin-top: 5.25rem;
} }
.ctaTitle { .ctaTitle {
font-size: var(--font-size-display-footer); font-size: var(--font-size-display-footer);
line-height: var(--line-height-display-footer); line-height: var(--line-height-display-footer);
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 12px; margin-bottom: 0.75rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
} }
@@ -49,20 +49,20 @@
color: var(--text-secondary); color: var(--text-secondary);
font-weight: 500; font-weight: 500;
letter-spacing: var(--letter-spacing-eyebrow); letter-spacing: var(--letter-spacing-eyebrow);
margin-bottom: 24px; margin-bottom: 1.5rem;
} }
.socialRow { .socialRow {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 48px; gap: 3rem;
} }
.socialItem { .socialItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12px; gap: 0.75rem;
color: var(--text-primary); color: var(--text-primary);
text-decoration: none; text-decoration: none;
transition: transition:
@@ -80,8 +80,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 48px; width: 3rem;
height: 48px; height: 3rem;
} }
.socialIcon svg { .socialIcon svg {
@@ -105,7 +105,7 @@
@media (max-width: 900px) { @media (max-width: 900px) {
.footerSection { .footerSection {
height: auto; height: auto;
min-height: 480px; min-height: 30rem;
padding: var(--space-10) var(--layout-page-gutter) var(--space-9); padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
} }
@@ -127,17 +127,17 @@
@media (max-width: 560px) { @media (max-width: 560px) {
.footerSection { .footerSection {
min-height: 560px; min-height: 35rem;
padding-top: var(--space-9); padding-top: var(--space-9);
} }
.ctaTitle { .ctaTitle {
font-size: 36px; font-size: 2.25rem;
line-height: 46px; line-height: 2.875rem;
} }
.ctaSubtitle { .ctaSubtitle {
max-width: 300px; max-width: 18.75rem;
margin-bottom: var(--space-7); margin-bottom: var(--space-7);
font-size: var(--font-size-body-default); font-size: var(--font-size-body-default);
line-height: var(--line-height-body-default); line-height: var(--line-height-body-default);

96
src/components/HeroSection.module.css
View File

@@ -20,7 +20,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: clamp(18px, 2.5vw, 32px) var(--layout-page-gutter) 0; padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
} }
/* ── Icon buttons ───────────────────────────────────────────── */ /* ── Icon buttons ───────────────────────────────────────────── */
@@ -67,29 +67,29 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
max-width: 920px; max-width: 57.5rem;
margin: 0 auto; margin: 0 auto;
height: auto; height: auto;
min-height: 100%; min-height: 100%;
padding-top: clamp(64px, 6.5vw, 96px); padding-top: clamp(4rem, 6.5vw, 6rem);
padding-bottom: clamp(28px, 3vw, 40px); padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
padding-left: 20px; padding-left: 1.25rem;
padding-right: 20px; padding-right: 1.25rem;
text-align: center; text-align: center;
} }
/* ── Avatar ─────────────────────────────────────────────────── */ /* ── Avatar ─────────────────────────────────────────────────── */
.avatarWrapper { .avatarWrapper {
margin-bottom: clamp(14px, 1.8vw, 22px); margin-bottom: clamp(0.875rem, 1.8vw, 1.375rem);
} }
.avatarRingOuter { .avatarRingOuter {
display: inline-block; display: inline-block;
padding: clamp(4px, 0.5vw, 7px); padding: clamp(0.25rem, 0.5vw, 0.4375rem);
border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700); border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700);
border-radius: 50%; border-radius: 50%;
background: transparent; background: transparent;
box-shadow: 0 8px 32px var(--shadow-color); box-shadow: 0 0.5rem 2rem var(--shadow-color);
} }
[data-theme="dark"] .avatarRingOuter { [data-theme="dark"] .avatarRingOuter {
@@ -98,8 +98,8 @@
.avatarContainer { .avatarContainer {
position: relative; position: relative;
width: clamp(100px, 13vw, 168px); width: clamp(6.25rem, 13vw, 10.5rem);
height: clamp(100px, 13vw, 168px); height: clamp(6.25rem, 13vw, 10.5rem);
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: 50%; border-radius: 50%;
@@ -113,9 +113,9 @@
/* ── Display title ──────────────────────────────────────────── */ /* ── Display title ──────────────────────────────────────────── */
.heroTitle { .heroTitle {
margin-bottom: clamp(8px, 1vw, 14px); margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
color: var(--text-primary); color: var(--text-primary);
font-size: clamp(32px, 3.6vw, 54px); font-size: clamp(2rem, 3.6vw, 3.375rem);
line-height: 1.15; line-height: 1.15;
text-shadow: none; text-shadow: none;
white-space: nowrap; white-space: nowrap;
@@ -123,9 +123,9 @@
/* ── Subtitle ───────────────────────────────────────────────── */ /* ── Subtitle ───────────────────────────────────────────────── */
.heroSubtitle { .heroSubtitle {
margin-bottom: clamp(20px, 2.8vw, 36px); margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
color: var(--text-primary); color: var(--text-primary);
font-size: clamp(11px, 1vw, 15px); font-size: clamp(0.6875rem, 1vw, 0.9375rem);
font-weight: 700; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
@@ -135,16 +135,16 @@
.actionButtons { .actionButtons {
display: flex; display: flex;
align-items: center; align-items: center;
gap: clamp(10px, 1.4vw, 20px); gap: clamp(0.625rem, 1.4vw, 1.25rem);
margin-bottom: clamp(18px, 2.2vw, 30px); margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
} }
.heroButton { .heroButton {
min-width: clamp(80px, 9vw, 120px); min-width: clamp(5rem, 9vw, 7.5rem);
height: clamp(40px, 4.5vw, 52px); height: clamp(2.5rem, 4.5vw, 3.25rem);
padding: 0 clamp(16px, 2vw, 28px); padding: 0 clamp(1rem, 2vw, 1.75rem);
border-width: 2px; border-width: 2px;
font-size: clamp(13px, 1.1vw, 16px); font-size: clamp(0.8125rem, 1.1vw, 1rem);
} }
.heroButtonOutline { .heroButtonOutline {
@@ -181,11 +181,11 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: clamp(10px, 1.4vw, 18px); gap: clamp(0.625rem, 1.4vw, 1.125rem);
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--color-blue-700); color: var(--color-blue-700);
font-size: clamp(11px, 1vw, 14px); font-size: clamp(0.6875rem, 1vw, 0.875rem);
font-weight: 500; font-weight: 500;
line-height: 1.6; line-height: 1.6;
white-space: nowrap; white-space: nowrap;
@@ -198,7 +198,7 @@
.contactItem { .contactItem {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 0.375rem;
color: inherit; color: inherit;
white-space: nowrap; white-space: nowrap;
transition: opacity var(--motion-duration-fast) ease; transition: opacity var(--motion-duration-fast) ease;
@@ -221,7 +221,7 @@
.contactDivider { .contactDivider {
width: 1px; width: 1px;
height: 18px; height: 1.125rem;
background: var(--color-blue-500); background: var(--color-blue-500);
opacity: 0.6; opacity: 0.6;
} }
@@ -235,20 +235,20 @@
@media (max-width: 1100px) and (min-width: 651px) { @media (max-width: 1100px) and (min-width: 651px) {
.heroContentWrapper { .heroContentWrapper {
height: auto; height: auto;
min-height: clamp(540px, 64vw, 640px); min-height: clamp(33.75rem, 64vw, 40rem);
} }
.heroContent { .heroContent {
height: auto; height: auto;
min-height: clamp(540px, 64vw, 640px); min-height: clamp(33.75rem, 64vw, 40rem);
justify-content: flex-start; justify-content: flex-start;
padding-top: clamp(60px, 8vw, 90px); padding-top: clamp(3.75rem, 8vw, 5.625rem);
padding-bottom: 40px; padding-bottom: 2.5rem;
} }
.heroTitle { .heroTitle {
/* Allow wrapping at tablet so text stays within the center zone */ /* Allow wrapping at tablet so text stays within the center zone */
max-width: 520px; max-width: 32.5rem;
white-space: normal; white-space: normal;
} }
@@ -256,7 +256,7 @@
/* Wrap contact items on narrow tablets */ /* Wrap contact items on narrow tablets */
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 8px 14px; gap: 0.5rem 0.875rem;
white-space: normal; white-space: normal;
} }
@@ -271,36 +271,36 @@
@media (max-width: 650px) { @media (max-width: 650px) {
.heroContentWrapper { .heroContentWrapper {
height: auto; height: auto;
min-height: 540px; min-height: 33.75rem;
} }
.topBar { .topBar {
padding: 16px 14px 0; padding: 1rem 0.875rem 0;
} }
.iconButton { .iconButton {
width: 40px; width: 2.5rem;
height: 40px; height: 2.5rem;
} }
.heroContent { .heroContent {
height: auto; height: auto;
min-height: 540px; min-height: 33.75rem;
padding: 66px 16px 40px; padding: 4.125rem 1rem 2.5rem;
justify-content: flex-start; justify-content: flex-start;
} }
.heroTitle { .heroTitle {
font-size: clamp(26px, 7.8vw, 36px); font-size: clamp(1.625rem, 7.8vw, 2.25rem);
white-space: normal; white-space: normal;
max-width: 270px; max-width: 17rem;
line-height: 1.15; line-height: 1.15;
} }
.heroSubtitle { .heroSubtitle {
white-space: normal; white-space: normal;
max-width: 250px; max-width: 15.625rem;
font-size: 11px; font-size: 0.6875rem;
letter-spacing: 0.12em; letter-spacing: 0.12em;
} }
@@ -308,23 +308,23 @@
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%; width: 100%;
max-width: 276px; max-width: 17.25rem;
gap: 6px; gap: 0.375rem;
} }
.heroButton { .heroButton {
min-width: 0; min-width: 0;
width: auto; width: auto;
height: 38px; height: 2.375rem;
padding: 0 6px; padding: 0 0.375rem;
font-size: 12px; font-size: 0.75rem;
} }
.contactBar { .contactBar {
flex-direction: column; flex-direction: column;
gap: 5px; gap: 0.3125rem;
white-space: normal; white-space: normal;
font-size: 11.5px; font-size: 0.71875rem;
} }
.contactItem { .contactItem {

26
src/components/MilestonesSection.module.css
View File

@@ -1,14 +1,14 @@
.milestonesSection { .milestonesSection {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 40px; padding-top: 2.5rem;
padding-bottom: 80px; padding-bottom: 5rem;
} }
.cardsList { .cardsList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 1.5rem;
} }
.certCard { .certCard {
@@ -16,9 +16,9 @@
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 24px 32px; padding: 1.5rem 2rem;
display: flex; display: flex;
gap: 36px; gap: 2.25rem;
transition: transition:
border-color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease,
transform var(--motion-duration-default) var(--motion-ease-out); transform var(--motion-duration-default) var(--motion-ease-out);
@@ -27,8 +27,8 @@
.thumbnailContainer { .thumbnailContainer {
position: relative; position: relative;
width: 264px; width: 16.5rem;
height: 192px; height: 12rem;
flex-shrink: 0; flex-shrink: 0;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
@@ -49,7 +49,7 @@
} }
.titleRow { .titleRow {
margin-bottom: 4px; margin-bottom: 0.25rem;
} }
.certTitle { .certTitle {
@@ -60,7 +60,7 @@
} }
.issuerRow { .issuerRow {
margin-bottom: 2px; margin-bottom: 0.125rem;
} }
.issuerText { .issuerText {
@@ -78,14 +78,14 @@
letter-spacing: var(--letter-spacing-eyebrow); letter-spacing: var(--letter-spacing-eyebrow);
color: var(--text-muted); color: var(--text-muted);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.description { .description {
font-size: var(--font-size-body-small); font-size: var(--font-size-body-small);
line-height: var(--line-height-body-small); line-height: var(--line-height-body-small);
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 16px; margin-bottom: 1rem;
} }
.actionRow { .actionRow {
@@ -97,7 +97,7 @@
.viewCertLink { .viewCertLink {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 0.375rem;
font-size: var(--font-size-body-default); font-size: var(--font-size-body-default);
font-weight: 600; font-weight: 600;
color: var(--action-link); color: var(--action-link);
@@ -142,6 +142,6 @@
} }
.viewCertLink:hover { .viewCertLink:hover {
gap: 10px; gap: 0.625rem;
} }
} }

140
src/components/ProjectsSection.module.css
View File

@@ -1,20 +1,20 @@
.projectsSection { .projectsSection {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 60px; padding-top: 3.75rem;
padding-bottom: 80px; padding-bottom: 5rem;
} }
.headerRow { .headerRow {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin-bottom: 44px; margin-bottom: 2.75rem;
} }
.arrowButtons { .arrowButtons {
display: flex; display: flex;
gap: 12px; gap: 0.75rem;
padding-top: 2px; padding-top: 2px;
} }
@@ -100,17 +100,17 @@
display: flex; display: flex;
align-items: stretch; align-items: stretch;
width: max-content; width: max-content;
gap: 20px; gap: 1.25rem;
padding: 4px 0 8px; padding: 0.25rem 0 0.5rem;
} }
.card { .card {
display: flex; display: flex;
flex: 0 0 clamp(300px, 24vw, 340px); flex: 0 0 clamp(18.75rem, 24vw, 21.25rem);
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
width: clamp(300px, 24vw, 340px); width: clamp(18.75rem, 24vw, 21.25rem);
min-height: 460px; min-height: 28.75rem;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
@@ -139,19 +139,19 @@
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
padding: 18px 16px; padding: 1.125rem 1rem;
} }
.cardTitleRow { .cardTitleRow {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 7px; gap: 0.4375rem;
margin-bottom: 6px; margin-bottom: 0.375rem;
} }
.cardTitle { .cardTitle {
color: var(--text-primary); color: var(--text-primary);
font-size: 18px; font-size: 1.125rem;
font-weight: 700; font-weight: 700;
line-height: 1.25; line-height: 1.25;
} }
@@ -166,9 +166,9 @@
} }
.cardDate { .cardDate {
margin-bottom: 10px; margin-bottom: 0.625rem;
color: var(--text-muted); color: var(--text-muted);
font-size: 11px; font-size: 0.6875rem;
font-weight: 700; font-weight: 700;
line-height: var(--line-height-label-small); line-height: var(--line-height-label-small);
letter-spacing: var(--letter-spacing-eyebrow); letter-spacing: var(--letter-spacing-eyebrow);
@@ -177,10 +177,10 @@
.cardDesc { .cardDesc {
display: -webkit-box; display: -webkit-box;
margin-bottom: 16px; margin-bottom: 1rem;
overflow: hidden; overflow: hidden;
color: var(--text-primary); color: var(--text-primary);
font-size: 13.5px; font-size: 0.84375rem;
font-weight: 400; font-weight: 400;
line-height: 1.55; line-height: 1.55;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -193,12 +193,12 @@
.tagList { .tagList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 6px; gap: 0.375rem;
margin-bottom: 18px; margin-bottom: 1.125rem;
} }
.tagBadge { .tagBadge {
padding: 5px 12px; padding: 0.3125rem 0.75rem;
border: 0; border: 0;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--color-blue-200); background: var(--color-blue-200);
@@ -220,7 +220,7 @@
.caseStudyLink { .caseStudyLink {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 0.625rem;
color: var(--color-blue-500); color: var(--color-blue-500);
font-size: var(--font-size-body-small); font-size: var(--font-size-body-small);
font-weight: 600; font-weight: 600;
@@ -240,14 +240,14 @@
.scrollbarWrapper { .scrollbarWrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 40px; margin-top: 2.5rem;
} }
.scrollbar { .scrollbar {
--thumb-width: 216px; --thumb-width: 13.5rem;
width: 480px; width: 30rem;
max-width: 100%; max-width: 100%;
height: 20px; height: 1.25rem;
margin: 0; margin: 0;
appearance: none; appearance: none;
background: transparent; background: transparent;
@@ -255,14 +255,14 @@
} }
.scrollbar::-webkit-slider-runnable-track { .scrollbar::-webkit-slider-runnable-track {
height: 6px; height: 0.375rem;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--color-blue-200); background: var(--color-blue-200);
} }
.scrollbar::-webkit-slider-thumb { .scrollbar::-webkit-slider-thumb {
width: var(--thumb-width, 216px); width: var(--thumb-width, 13.5rem);
height: 6px; height: 0.375rem;
margin-top: 0; margin-top: 0;
appearance: none; appearance: none;
border: 0; border: 0;
@@ -271,15 +271,15 @@
} }
.scrollbar::-moz-range-track { .scrollbar::-moz-range-track {
height: 6px; height: 0.375rem;
border: 0; border: 0;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--color-blue-200); background: var(--color-blue-200);
} }
.scrollbar::-moz-range-thumb { .scrollbar::-moz-range-thumb {
width: var(--thumb-width, 216px); width: var(--thumb-width, 13.5rem);
height: 6px; height: 0.375rem;
border: 0; border: 0;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--color-blue-400); background: var(--color-blue-400);
@@ -313,17 +313,17 @@
================================================================ */ ================================================================ */
@media (max-width: 1440px) and (min-width: 1101px) { @media (max-width: 1440px) and (min-width: 1101px) {
.carouselTrack { .carouselTrack {
gap: 20px; gap: 1.25rem;
} }
.card { .card {
flex: 0 0 clamp(290px, 23vw, 330px); flex: 0 0 clamp(18.125rem, 23vw, 20.625rem);
width: clamp(290px, 23vw, 330px); width: clamp(18.125rem, 23vw, 20.625rem);
} }
.scrollbar { .scrollbar {
width: min(480px, 50vw); width: min(30rem, 50vw);
--thumb-width: 120px; --thumb-width: 7.5rem;
} }
} }
@@ -340,7 +340,7 @@
.headerRow { .headerRow {
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
margin-bottom: 32px; margin-bottom: 2rem;
} }
.carouselViewport { .carouselViewport {
@@ -349,13 +349,13 @@
} }
.carouselTrack { .carouselTrack {
gap: 20px; gap: 1.25rem;
} }
.card { .card {
flex: 0 0 clamp(310px, 42vw, 350px); flex: 0 0 clamp(19.375rem, 42vw, 21.875rem);
width: clamp(310px, 42vw, 350px); width: clamp(19.375rem, 42vw, 21.875rem);
min-height: 450px; min-height: 28rem;
box-sizing: border-box; box-sizing: border-box;
scroll-snap-align: start; scroll-snap-align: start;
} }
@@ -365,17 +365,17 @@
} }
.cardBody { .cardBody {
padding: 18px 16px; padding: 1.125rem 1rem;
} }
.cardTitle { .cardTitle {
font-size: 18px; font-size: 1.125rem;
} }
.cardDesc { .cardDesc {
font-size: 13.5px; font-size: 0.84375rem;
line-height: 1.55; line-height: 1.55;
margin-bottom: 14px; margin-bottom: 0.875rem;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
white-space: normal; white-space: normal;
word-break: normal; word-break: normal;
@@ -383,39 +383,39 @@
} }
.tagList { .tagList {
gap: 6px; gap: 0.375rem;
margin-bottom: 16px; margin-bottom: 1rem;
} }
.tagBadge { .tagBadge {
padding: 3px 9px; padding: 0.25rem 0.5625rem;
font-size: 11px; font-size: 0.6875rem;
} }
.scrollbarWrapper { .scrollbarWrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 32px; margin-top: 2rem;
} }
.scrollbar { .scrollbar {
width: min(360px, 60vw); width: min(22.5rem, 60vw);
--thumb-width: 90px; --thumb-width: 5.625rem;
} }
} }
/* ================================================================ /* ================================================================
MOBILE ≤ 650px MOBILE ≤ 650px
Comfortable ~310px-330px card (~1 card visible with clean margins) Clean 1-column layout: 1 card visible at a time with page gutter
================================================================ */ ================================================================ */
@media (max-width: 650px) { @media (max-width: 650px) {
.projectsSection { .projectsSection {
padding-top: 48px; padding-top: 3rem;
padding-bottom: 64px; padding-bottom: 4rem;
} }
.headerRow { .headerRow {
margin-bottom: 24px; margin-bottom: 1.5rem;
} }
.arrowButtons { .arrowButtons {
@@ -432,7 +432,7 @@
} }
.carouselTrack { .carouselTrack {
gap: 16px; gap: 1rem;
width: max-content; width: max-content;
} }
@@ -444,7 +444,7 @@
min-width: calc(100vw - (2 * var(--layout-page-gutter))); min-width: calc(100vw - (2 * var(--layout-page-gutter)));
min-width: 100cqw; min-width: 100cqw;
max-width: 100%; max-width: 100%;
min-height: 420px; min-height: 26.25rem;
box-sizing: border-box; box-sizing: border-box;
scroll-snap-align: start; scroll-snap-align: start;
scroll-snap-stop: always; scroll-snap-stop: always;
@@ -455,17 +455,17 @@
} }
.cardBody { .cardBody {
padding: 18px 16px; padding: 1.125rem 1rem;
} }
.cardTitle { .cardTitle {
font-size: 18px; font-size: 1.125rem;
} }
.cardDesc { .cardDesc {
font-size: 13px; font-size: 0.8125rem;
line-height: 1.5; line-height: 1.5;
margin-bottom: 14px; margin-bottom: 0.875rem;
white-space: normal; white-space: normal;
word-break: normal; word-break: normal;
overflow-wrap: break-word; overflow-wrap: break-word;
@@ -473,25 +473,25 @@
} }
.tagList { .tagList {
gap: 6px; gap: 0.375rem;
margin-bottom: 16px; margin-bottom: 1rem;
} }
.tagBadge { .tagBadge {
padding: 3px 9px; padding: 0.25rem 0.5625rem;
font-size: 11px; font-size: 0.6875rem;
} }
.scrollbarWrapper { .scrollbarWrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 24px; margin-top: 1.5rem;
} }
.scrollbar { .scrollbar {
width: min(200px, 60vw); width: min(12.5rem, 60vw);
height: 16px; height: 1rem;
--thumb-width: 60px; --thumb-width: 3.75rem;
} }
} }

44
src/components/RiverJourney.module.css
View File

@@ -20,10 +20,10 @@
.introBlock { .introBlock {
position: absolute; position: absolute;
top: 112px; top: 7rem;
left: var(--layout-page-gutter); left: var(--layout-page-gutter);
z-index: 3; z-index: 3;
width: min(390px, calc(100% - (2 * var(--layout-page-gutter)))); width: min(24.375rem, calc(100% - (2 * var(--layout-page-gutter))));
padding: var(--space-4); padding: var(--space-4);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--overlay-contact); background: var(--overlay-contact);
@@ -50,7 +50,7 @@
} }
.underlineBar { .underlineBar {
width: 120px; width: 7.5rem;
height: 3px; height: 3px;
margin-bottom: var(--space-5); margin-bottom: var(--space-5);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
@@ -74,13 +74,13 @@
.stepCard { .stepCard {
position: absolute; position: absolute;
display: flex; display: flex;
width: 250px; width: 15.625rem;
gap: var(--space-3); gap: var(--space-3);
padding: var(--space-4); padding: var(--space-4);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--overlay-contact); background: var(--overlay-contact);
box-shadow: 0 8px 24px var(--shadow-color); box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: transition:
border-color var(--motion-duration-fast) ease, border-color var(--motion-duration-fast) ease,
@@ -96,9 +96,9 @@
.stepNumber { .stepNumber {
flex: 0 0 auto; flex: 0 0 auto;
color: var(--accent-default); color: var(--accent-default);
font-size: 20px; font-size: 1.25rem;
font-weight: 800; font-weight: 800;
line-height: 28px; line-height: 1.75rem;
} }
.stepTitle { .stepTitle {
@@ -117,11 +117,11 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
.introBlock { .introBlock {
top: 80px; top: 5rem;
} }
.stepCard { .stepCard {
width: 230px; width: 14.375rem;
} }
.step05 { top: 90px; right: 32px; } .step05 { top: 90px; right: 32px; }
@@ -134,7 +134,7 @@
@media (max-width: 760px) { @media (max-width: 760px) {
.journeySection { .journeySection {
height: auto; height: auto;
min-height: 1120px; min-height: 70rem;
padding: var(--layout-section-padding) var(--layout-page-gutter); padding: var(--layout-section-padding) var(--layout-page-gutter);
} }
@@ -151,13 +151,13 @@
padding: var(--space-4); padding: var(--space-4);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
background: var(--overlay-contact); background: var(--overlay-contact);
box-shadow: 0 8px 24px var(--shadow-color); box-shadow: 0 0.5rem 1.5rem var(--shadow-color);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
.heading { .heading {
font-size: 28px; font-size: 1.75rem;
line-height: 38px; line-height: 2.375rem;
} }
.description { .description {
@@ -171,16 +171,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-3);
margin-top: 220px; margin-top: 13.75rem;
padding-left: 20px; padding-left: 1.25rem;
} }
.stepsList::before { .stepsList::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 20px; top: 1.25rem;
bottom: 20px; bottom: 1.25rem;
left: 5px; left: 0.3125rem;
width: 1px; width: 1px;
background: var(--border-strong); background: var(--border-strong);
} }
@@ -202,10 +202,10 @@
.stepCard::before { .stepCard::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 22px; top: 1.375rem;
left: -20px; left: -1.25rem;
width: 9px; width: 0.5625rem;
height: 9px; height: 0.5625rem;
border: 3px solid var(--bg-page); border: 3px solid var(--bg-page);
border-radius: 50%; border-radius: 50%;
background: var(--accent-default); background: var(--accent-default);

12
src/components/ScenicHeroJourney.module.css
View File

@@ -21,7 +21,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
min-height: clamp(580px, 48vw, 700px); min-height: clamp(36.25rem, 48vw, 43.75rem);
overflow: hidden; overflow: hidden;
background: var(--bg-page); background: var(--bg-page);
} }
@@ -120,7 +120,7 @@
@media (max-width: 1100px) and (min-width: 651px) { @media (max-width: 1100px) and (min-width: 651px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: clamp(540px, 64vw, 640px); min-height: clamp(33.75rem, 64vw, 40rem);
} }
/* Left — visible slice ≈ width - 150px, always < content padding */ /* Left — visible slice ≈ width - 150px, always < content padding */
@@ -156,20 +156,20 @@
@media (max-width: 650px) { @media (max-width: 650px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: 540px; min-height: 33.75rem;
} }
.backdropLeft { .backdropLeft {
top: clamp(75px, 16vw, 95px); top: clamp(75px, 16vw, 95px);
bottom: auto; bottom: auto;
left: clamp(-140px, calc(20vw - 230px), -100px); left: clamp(-100px, calc(20vw - 230px), -100px);
width: clamp(200px, 44vw, 250px); width: clamp(200px, 44vw, 250px);
} }
.backdropRight { .backdropRight {
top: clamp(82px, 18vw, 102px); top: clamp(82px, 18vw, 102px);
bottom: auto; bottom: auto;
right: clamp(-150px, calc(20vw - 240px), -120px); right: clamp(-130px, calc(20vw - 240px), -120px);
width: clamp(210px, 46vw, 260px); width: clamp(210px, 46vw, 260px);
} }
@@ -191,7 +191,7 @@
@media (min-width: 1441px) { @media (min-width: 1441px) {
.heroStage { .heroStage {
height: auto; height: auto;
min-height: 680px; min-height: 42.5rem;
overflow: visible; overflow: visible;
} }

56
src/components/SkillsSection.module.css
View File

@@ -1,8 +1,8 @@
.skillsSection { .skillsSection {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 60px; padding-top: 3.75rem;
padding-bottom: 80px; padding-bottom: 5rem;
} }
.mainCard { .mainCard {
@@ -10,9 +10,9 @@
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 36px 40px; padding: 2.25rem 2.5rem;
box-shadow: 0 4px 20px var(--shadow-color); box-shadow: 0 0.25rem 1.25rem var(--shadow-color);
margin-bottom: 32px; margin-bottom: 2rem;
} }
.cardEyebrow { .cardEyebrow {
@@ -23,25 +23,25 @@
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 24px; margin-bottom: 1.5rem;
} }
.skillsBlock { .skillsBlock {
margin-bottom: 40px; margin-bottom: 2.5rem;
} }
.skillsGrid { .skillsGrid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
row-gap: 28px; row-gap: 1.75rem;
column-gap: 40px; column-gap: 2.5rem;
margin-bottom: 32px; margin-bottom: 2rem;
} }
.skillItem { .skillItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 0.625rem;
} }
.skillName { .skillName {
@@ -53,13 +53,13 @@
.meterSegments { .meterSegments {
display: flex; display: flex;
gap: 6px; gap: 0.375rem;
width: 100%; width: 100%;
} }
.segment { .segment {
flex: 1; flex: 1;
height: 6px; height: 0.375rem;
border-radius: 3px; border-radius: 3px;
background-color: var(--border-default); background-color: var(--border-default);
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
@@ -72,11 +72,11 @@
.badgeCloud { .badgeCloud {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 0.625rem;
} }
.badgePill { .badgePill {
padding: 6px 16px; padding: 0.375rem 1rem;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background-color: var(--bg-subtle); background-color: var(--bg-subtle);
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
@@ -90,13 +90,13 @@
} }
.toolsBlock { .toolsBlock {
padding-top: 16px; padding-top: 1rem;
} }
.toolsGrid { .toolsGrid {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-columns: repeat(8, 1fr);
gap: 24px; gap: 1.5rem;
} }
.toolTile { .toolTile {
@@ -104,12 +104,12 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 132px; width: 8.25rem;
height: 136px; height: 8.5rem;
background-color: transparent; background-color: transparent;
border: 1px solid var(--border-default); border: 1px solid var(--border-default);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 16px 8px; padding: 1rem 0.5rem;
transition: transition:
opacity var(--motion-duration-default) ease, opacity var(--motion-duration-default) ease,
filter var(--motion-duration-default) ease, filter var(--motion-duration-default) ease,
@@ -125,12 +125,12 @@
} }
.toolIconContainer { .toolIconContainer {
width: 64px; width: 4rem;
height: 64px; height: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.toolIcon { .toolIcon {
@@ -150,11 +150,11 @@
.filterTabsRow { .filterTabsRow {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 16px; gap: 1rem;
} }
.filterButton { .filterButton {
min-width: 180px; min-width: 11.25rem;
} }
[data-theme="dark"] .mainCard { [data-theme="dark"] .mainCard {
@@ -216,13 +216,13 @@
} }
.toolTile { .toolTile {
height: 124px; height: 7.75rem;
padding: var(--space-3) var(--space-2); padding: var(--space-3) var(--space-2);
} }
.toolIconContainer { .toolIconContainer {
width: 52px; width: 3.25rem;
height: 52px; height: 3.25rem;
} }
.filterTabsRow { .filterTabsRow {

10
src/components/scenes/Scenes.module.css
View File

@@ -9,16 +9,20 @@
.heroScene { .heroScene {
z-index: 0; z-index: 0;
background:
linear-gradient(to bottom, #c7edfb 0%, #dff5fc 47%, #f8faff 82%, var(--bg-page) 100%);
} }
.heroScene::after { .heroScene::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(to bottom, transparent 82%, var(--bg-page) 100%);
}
:global([data-theme="dark"]) .heroScene {
background: background:
radial-gradient(ellipse 48% 58% at 50% 45%, var(--bg-page) 0 44%, transparent 82%), linear-gradient(to bottom, #071936 0%, #06142f 50%, #020e28 82%, var(--bg-page) 100%);
linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
opacity: 0.76;
} }
.heroScene canvas, .heroScene canvas,

35
src/styles/globals.css
View File

@@ -16,10 +16,23 @@
} }
html { html {
font-size: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
color-scheme: light; color-scheme: light;
} }
@media (max-width: 1024px) {
html {
font-size: 93.75%;
}
}
@media (max-width: 650px) {
html {
font-size: 87.5%;
}
}
html[data-theme="dark"] { html[data-theme="dark"] {
color-scheme: dark; color-scheme: dark;
} }
@@ -56,7 +69,7 @@ body {
} }
} }
/* 1320px Inner Content Container with 60px Gutters */ /* 1320px Inner Content Container with Page Gutters */
.content-container { .content-container {
width: calc(100% - (2 * var(--layout-page-gutter))); width: calc(100% - (2 * var(--layout-page-gutter)));
max-width: var(--layout-container); max-width: var(--layout-container);
@@ -64,18 +77,18 @@ body {
position: relative; position: relative;
} }
@media (max-width: 640px) { @media (max-width: 650px) {
.section-header { .section-header {
margin-bottom: var(--space-6); margin-bottom: var(--space-6);
} }
.section-title { .section-title {
font-size: 28px; font-size: 1.75rem;
line-height: 38px; line-height: 2.375rem;
} }
.section-underline { .section-underline {
width: 88px; width: 5.5rem;
} }
} }
@@ -84,7 +97,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
margin-bottom: 40px; margin-bottom: 2.5rem;
} }
.section-eyebrow { .section-eyebrow {
@@ -94,7 +107,7 @@ body {
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 8px; margin-bottom: 0.5rem;
} }
.section-title-wrap { .section-title-wrap {
@@ -108,11 +121,11 @@ body {
line-height: var(--line-height-h2); line-height: var(--line-height-h2);
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 12px; margin-bottom: 0.75rem;
} }
.section-underline { .section-underline {
width: 120px; width: 7.5rem;
height: 3px; height: 3px;
background-color: var(--accent-default); background-color: var(--accent-default);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
@@ -129,9 +142,9 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 0.5rem;
height: var(--size-button-height); height: var(--size-button-height);
padding: 0 24px; padding: 0 1.5rem;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
font-size: var(--font-size-button); font-size: var(--font-size-button);
line-height: var(--line-height-button); line-height: var(--line-height-button);

120
src/styles/tokens.css
View File

@@ -21,65 +21,65 @@
--color-border-strong-light: #A9BEDA; --color-border-strong-light: #A9BEDA;
--color-border-strong-dark: #426B9D; --color-border-strong-dark: #426B9D;
--color-black: #000000; --color-black: #000000;
--space-0: 0px; --space-0: 0;
--space-1: 4px; --space-1: 0.25rem;
--space-2: 8px; --space-2: 0.5rem;
--space-3: 12px; --space-3: 0.75rem;
--space-4: 16px; --space-4: 1rem;
--space-5: 24px; --space-5: 1.5rem;
--space-6: 32px; --space-6: 2rem;
--space-7: 40px; --space-7: 2.5rem;
--space-8: 48px; --space-8: 3rem;
--space-9: 64px; --space-9: 4rem;
--space-10: 80px; --space-10: 5rem;
--space-11: 96px; --space-11: 6rem;
--space-12: 120px; --space-12: 7.5rem;
--radius-sm: 8px; --radius-sm: 0.5rem;
--radius-md: 12px; --radius-md: 0.75rem;
--radius-lg: 16px; --radius-lg: 1rem;
--radius-xl: 24px; --radius-xl: 1.5rem;
--radius-pill: 999px; --radius-pill: 9999px;
--stroke-default: 1px; --stroke-default: 1px;
--stroke-strong: 2px; --stroke-strong: 2px;
--layout-frame: 1440px; --layout-frame: 1440px;
--layout-container: 1320px; --layout-container: 1320px;
--layout-page-gutter: 60px; --layout-page-gutter: 3.75rem;
--layout-grid-gutter: 24px; --layout-grid-gutter: 1.5rem;
--layout-grid-column: 88px; --layout-grid-column: 5.5rem;
--layout-section-gap: 120px; --layout-section-gap: 7.5rem;
--layout-section-padding: 96px; --layout-section-padding: 6rem;
--layout-text-measure: 720px; --layout-text-measure: 45rem;
--size-icon-sm: 16px; --size-icon-sm: 1rem;
--size-icon-md: 20px; --size-icon-md: 1.25rem;
--size-icon-lg: 24px; --size-icon-lg: 1.5rem;
--size-icon-button: 44px; --size-icon-button: 2.75rem;
--size-button-height: 48px; --size-button-height: 3rem;
--size-social-button: 56px; --size-social-button: 3.5rem;
--size-avatar: 200px; --size-avatar: 12.5rem;
--size-journey-image: 96px; --size-journey-image: 6rem;
--size-project-width: 360px; --size-project-width: 22.5rem;
--size-project-media-height: 225px; --size-project-media-height: 14.0625rem;
--size-tool-tile: 72px; --size-tool-tile: 4.5rem;
--font-size-display-hero: 64px; --font-size-display-hero: 4rem;
--font-size-display-footer: 48px; --font-size-display-footer: 3rem;
--font-size-h1: 40px; --font-size-h1: 2.5rem;
--font-size-h2: 32px; --font-size-h2: 2rem;
--font-size-h3: 20px; --font-size-h3: 1.25rem;
--font-size-body-large: 18px; --font-size-body-large: 1.125rem;
--font-size-body-default: 16px; --font-size-body-default: 1rem;
--font-size-body-small: 14px; --font-size-body-small: 0.875rem;
--font-size-label-small: 12px; --font-size-label-small: 0.75rem;
--font-size-button: 15px; --font-size-button: 0.9375rem;
--line-height-display-hero: 72px; --line-height-display-hero: 4.5rem;
--line-height-display-footer: 56px; --line-height-display-footer: 3.5rem;
--line-height-h1: 52px; --line-height-h1: 3.25rem;
--line-height-h2: 42px; --line-height-h2: 2.625rem;
--line-height-h3: 28px; --line-height-h3: 1.75rem;
--line-height-body-large: 30px; --line-height-body-large: 1.875rem;
--line-height-body-default: 26px; --line-height-body-default: 1.625rem;
--line-height-body-small: 22px; --line-height-body-small: 1.375rem;
--line-height-label-small: 18px; --line-height-label-small: 1.125rem;
--line-height-button: 20px; --line-height-button: 1.25rem;
--letter-spacing-eyebrow: 0.16em; --letter-spacing-eyebrow: 0.16em;
--motion-duration-fast: 140ms; --motion-duration-fast: 140ms;
--motion-duration-default: 200ms; --motion-duration-default: 200ms;
@@ -161,14 +161,14 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
:root { :root {
--layout-page-gutter: 32px; --layout-page-gutter: 2rem;
--layout-section-padding: 80px; --layout-section-padding: 5rem;
} }
} }
@media (max-width: 640px) { @media (max-width: 650px) {
:root { :root {
--layout-page-gutter: 20px; --layout-page-gutter: 1.25rem;
--layout-section-padding: 64px; --layout-section-padding: 4rem;
} }
} }