style: convert project sizing to scalable rem units with responsive root font scaling
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
.educationSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 32px;
|
||||
padding-top: 3.75rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -10,17 +10,17 @@
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px 32px;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
gap: 2.25rem;
|
||||
transition:
|
||||
border-color var(--motion-duration-fast) ease,
|
||||
transform var(--motion-duration-default) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.crestCol {
|
||||
width: 264px;
|
||||
width: 16.5rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
.crestContainer {
|
||||
width: 264px;
|
||||
height: 192px;
|
||||
width: 16.5rem;
|
||||
height: 12rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -48,7 +48,7 @@
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
@@ -58,7 +58,7 @@
|
||||
letter-spacing: var(--letter-spacing-eyebrow);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.detailsCol {
|
||||
@@ -73,7 +73,7 @@
|
||||
line-height: var(--line-height-h3);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
@@ -100,16 +100,16 @@
|
||||
|
||||
.crestCol,
|
||||
.crestContainer {
|
||||
width: 180px;
|
||||
height: 132px;
|
||||
width: 11.25rem;
|
||||
height: 8.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.crestCol,
|
||||
.crestContainer {
|
||||
width: 144px;
|
||||
height: 108px;
|
||||
width: 9rem;
|
||||
height: 6.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
.experienceSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 3.75rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.timelineItem {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 180px;
|
||||
min-height: 11.25rem;
|
||||
}
|
||||
|
||||
.spineColumn {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
width: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -28,11 +28,11 @@
|
||||
}
|
||||
|
||||
.nodeDot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-slate-400);
|
||||
margin-top: 6px;
|
||||
margin-top: 0.375rem;
|
||||
z-index: 2;
|
||||
transition:
|
||||
background-color var(--motion-duration-fast) ease,
|
||||
@@ -46,8 +46,8 @@
|
||||
|
||||
.verticalLine {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
bottom: 14px;
|
||||
top: 1.25rem;
|
||||
bottom: 0.875rem;
|
||||
width: 2px;
|
||||
background-color: var(--border-strong);
|
||||
z-index: 1;
|
||||
@@ -56,21 +56,21 @@
|
||||
.itemContent {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 36px;
|
||||
gap: 36px;
|
||||
padding-left: 1.25rem;
|
||||
padding-bottom: 2.25rem;
|
||||
gap: 2.25rem;
|
||||
}
|
||||
|
||||
.identityCol {
|
||||
width: 360px;
|
||||
width: 22.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.metaRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.875rem;
|
||||
}
|
||||
|
||||
.dateBadge {
|
||||
@@ -85,7 +85,7 @@
|
||||
.locationWrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 0.25rem;
|
||||
font-size: var(--font-size-label-small);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -102,12 +102,12 @@
|
||||
.roleIdentityRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
@@ -127,7 +127,7 @@
|
||||
.roleTitles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 4px;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.roleTitle {
|
||||
@@ -147,36 +147,36 @@
|
||||
|
||||
.detailsCol {
|
||||
flex-grow: 1;
|
||||
max-width: 820px;
|
||||
padding-top: 4px;
|
||||
max-width: 51.25rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.summary {
|
||||
font-size: var(--font-size-body-small);
|
||||
line-height: var(--line-height-body-small);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.bulletList {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bulletItem {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.bulletDot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: 0.3125rem;
|
||||
height: 0.3125rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--text-muted);
|
||||
margin-top: 10px;
|
||||
margin-top: 0.625rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -209,9 +209,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 650px) {
|
||||
.spineColumn {
|
||||
width: 24px;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
@@ -223,12 +223,12 @@
|
||||
}
|
||||
|
||||
.logoContainer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
||||
.roleTitle {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.footerSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
height: 480px;
|
||||
max-width: var(--layout-frame);
|
||||
height: 30rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -16,7 +16,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
height: 30rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -32,14 +32,14 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: 84px;
|
||||
margin-top: 5.25rem;
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: var(--font-size-display-footer);
|
||||
line-height: var(--line-height-display-footer);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@@ -49,20 +49,20 @@
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--letter-spacing-eyebrow);
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.socialRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.socialItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 0.75rem;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
@@ -80,8 +80,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.socialIcon svg {
|
||||
@@ -105,7 +105,7 @@
|
||||
@media (max-width: 900px) {
|
||||
.footerSection {
|
||||
height: auto;
|
||||
min-height: 480px;
|
||||
min-height: 30rem;
|
||||
padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
|
||||
}
|
||||
|
||||
@@ -127,17 +127,17 @@
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.footerSection {
|
||||
min-height: 560px;
|
||||
min-height: 35rem;
|
||||
padding-top: var(--space-9);
|
||||
}
|
||||
|
||||
.ctaTitle {
|
||||
font-size: 36px;
|
||||
line-height: 46px;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.875rem;
|
||||
}
|
||||
|
||||
.ctaSubtitle {
|
||||
max-width: 300px;
|
||||
max-width: 18.75rem;
|
||||
margin-bottom: var(--space-7);
|
||||
font-size: var(--font-size-body-default);
|
||||
line-height: var(--line-height-body-default);
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 ───────────────────────────────────────────── */
|
||||
@@ -67,29 +67,29 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
max-width: 920px;
|
||||
max-width: 57.5rem;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
padding-top: clamp(64px, 6.5vw, 96px);
|
||||
padding-bottom: clamp(28px, 3vw, 40px);
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: clamp(4rem, 6.5vw, 6rem);
|
||||
padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Avatar ─────────────────────────────────────────────────── */
|
||||
.avatarWrapper {
|
||||
margin-bottom: clamp(14px, 1.8vw, 22px);
|
||||
margin-bottom: clamp(0.875rem, 1.8vw, 1.375rem);
|
||||
}
|
||||
|
||||
.avatarRingOuter {
|
||||
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-radius: 50%;
|
||||
background: transparent;
|
||||
box-shadow: 0 8px 32px var(--shadow-color);
|
||||
box-shadow: 0 0.5rem 2rem var(--shadow-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .avatarRingOuter {
|
||||
@@ -98,8 +98,8 @@
|
||||
|
||||
.avatarContainer {
|
||||
position: relative;
|
||||
width: clamp(100px, 13vw, 168px);
|
||||
height: clamp(100px, 13vw, 168px);
|
||||
width: clamp(6.25rem, 13vw, 10.5rem);
|
||||
height: clamp(6.25rem, 13vw, 10.5rem);
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
@@ -113,9 +113,9 @@
|
||||
|
||||
/* ── Display title ──────────────────────────────────────────── */
|
||||
.heroTitle {
|
||||
margin-bottom: clamp(8px, 1vw, 14px);
|
||||
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
|
||||
color: var(--text-primary);
|
||||
font-size: clamp(32px, 3.6vw, 54px);
|
||||
font-size: clamp(2rem, 3.6vw, 3.375rem);
|
||||
line-height: 1.15;
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
@@ -123,9 +123,9 @@
|
||||
|
||||
/* ── Subtitle ───────────────────────────────────────────────── */
|
||||
.heroSubtitle {
|
||||
margin-bottom: clamp(20px, 2.8vw, 36px);
|
||||
margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
|
||||
color: var(--text-primary);
|
||||
font-size: clamp(11px, 1vw, 15px);
|
||||
font-size: clamp(0.6875rem, 1vw, 0.9375rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
@@ -135,16 +135,16 @@
|
||||
.actionButtons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(10px, 1.4vw, 20px);
|
||||
margin-bottom: clamp(18px, 2.2vw, 30px);
|
||||
gap: clamp(0.625rem, 1.4vw, 1.25rem);
|
||||
margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
|
||||
}
|
||||
|
||||
.heroButton {
|
||||
min-width: clamp(80px, 9vw, 120px);
|
||||
height: clamp(40px, 4.5vw, 52px);
|
||||
padding: 0 clamp(16px, 2vw, 28px);
|
||||
min-width: clamp(5rem, 9vw, 7.5rem);
|
||||
height: clamp(2.5rem, 4.5vw, 3.25rem);
|
||||
padding: 0 clamp(1rem, 2vw, 1.75rem);
|
||||
border-width: 2px;
|
||||
font-size: clamp(13px, 1.1vw, 16px);
|
||||
font-size: clamp(0.8125rem, 1.1vw, 1rem);
|
||||
}
|
||||
|
||||
.heroButtonOutline {
|
||||
@@ -181,11 +181,11 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(10px, 1.4vw, 18px);
|
||||
gap: clamp(0.625rem, 1.4vw, 1.125rem);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-blue-700);
|
||||
font-size: clamp(11px, 1vw, 14px);
|
||||
font-size: clamp(0.6875rem, 1vw, 0.875rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
white-space: nowrap;
|
||||
@@ -198,7 +198,7 @@
|
||||
.contactItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 0.375rem;
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
transition: opacity var(--motion-duration-fast) ease;
|
||||
@@ -221,7 +221,7 @@
|
||||
|
||||
.contactDivider {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
height: 1.125rem;
|
||||
background: var(--color-blue-500);
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -235,20 +235,20 @@
|
||||
@media (max-width: 1100px) and (min-width: 651px) {
|
||||
.heroContentWrapper {
|
||||
height: auto;
|
||||
min-height: clamp(540px, 64vw, 640px);
|
||||
min-height: clamp(33.75rem, 64vw, 40rem);
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
height: auto;
|
||||
min-height: clamp(540px, 64vw, 640px);
|
||||
min-height: clamp(33.75rem, 64vw, 40rem);
|
||||
justify-content: flex-start;
|
||||
padding-top: clamp(60px, 8vw, 90px);
|
||||
padding-bottom: 40px;
|
||||
padding-top: clamp(3.75rem, 8vw, 5.625rem);
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
/* Allow wrapping at tablet so text stays within the center zone */
|
||||
max-width: 520px;
|
||||
max-width: 32.5rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@@ -256,7 +256,7 @@
|
||||
/* Wrap contact items on narrow tablets */
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px 14px;
|
||||
gap: 0.5rem 0.875rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
@@ -271,36 +271,36 @@
|
||||
@media (max-width: 650px) {
|
||||
.heroContentWrapper {
|
||||
height: auto;
|
||||
min-height: 540px;
|
||||
min-height: 33.75rem;
|
||||
}
|
||||
|
||||
.topBar {
|
||||
padding: 16px 14px 0;
|
||||
padding: 1rem 0.875rem 0;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
height: auto;
|
||||
min-height: 540px;
|
||||
padding: 66px 16px 40px;
|
||||
min-height: 33.75rem;
|
||||
padding: 4.125rem 1rem 2.5rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.heroTitle {
|
||||
font-size: clamp(26px, 7.8vw, 36px);
|
||||
font-size: clamp(1.625rem, 7.8vw, 2.25rem);
|
||||
white-space: normal;
|
||||
max-width: 270px;
|
||||
max-width: 17rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.heroSubtitle {
|
||||
white-space: normal;
|
||||
max-width: 250px;
|
||||
font-size: 11px;
|
||||
max-width: 15.625rem;
|
||||
font-size: 0.6875rem;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
@@ -308,23 +308,23 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
max-width: 276px;
|
||||
gap: 6px;
|
||||
max-width: 17.25rem;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.heroButton {
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
height: 38px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
height: 2.375rem;
|
||||
padding: 0 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.contactBar {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
gap: 0.3125rem;
|
||||
white-space: normal;
|
||||
font-size: 11.5px;
|
||||
font-size: 0.71875rem;
|
||||
}
|
||||
|
||||
.contactItem {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.milestonesSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.cardsList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.certCard {
|
||||
@@ -16,9 +16,9 @@
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px 32px;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
gap: 2.25rem;
|
||||
transition:
|
||||
border-color var(--motion-duration-fast) ease,
|
||||
transform var(--motion-duration-default) var(--motion-ease-out);
|
||||
@@ -27,8 +27,8 @@
|
||||
|
||||
.thumbnailContainer {
|
||||
position: relative;
|
||||
width: 264px;
|
||||
height: 192px;
|
||||
width: 16.5rem;
|
||||
height: 12rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
@@ -49,7 +49,7 @@
|
||||
}
|
||||
|
||||
.titleRow {
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.certTitle {
|
||||
@@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
.issuerRow {
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.issuerText {
|
||||
@@ -78,14 +78,14 @@
|
||||
letter-spacing: var(--letter-spacing-eyebrow);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: var(--font-size-body-small);
|
||||
line-height: var(--line-height-body-small);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.actionRow {
|
||||
@@ -97,7 +97,7 @@
|
||||
.viewCertLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 0.375rem;
|
||||
font-size: var(--font-size-body-default);
|
||||
font-weight: 600;
|
||||
color: var(--action-link);
|
||||
@@ -142,6 +142,6 @@
|
||||
}
|
||||
|
||||
.viewCertLink:hover {
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
.projectsSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 3.75rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 44px;
|
||||
margin-bottom: 2.75rem;
|
||||
}
|
||||
|
||||
.arrowButtons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 0.75rem;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
@@ -100,17 +100,17 @@
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: max-content;
|
||||
gap: 20px;
|
||||
padding: 4px 0 8px;
|
||||
gap: 1.25rem;
|
||||
padding: 0.25rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex: 0 0 clamp(300px, 24vw, 340px);
|
||||
flex: 0 0 clamp(18.75rem, 24vw, 21.25rem);
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
width: clamp(300px, 24vw, 340px);
|
||||
min-height: 460px;
|
||||
width: clamp(18.75rem, 24vw, 21.25rem);
|
||||
min-height: 28.75rem;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--border-default);
|
||||
@@ -139,19 +139,19 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 18px 16px;
|
||||
padding: 1.125rem 1rem;
|
||||
}
|
||||
|
||||
.cardTitleRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-bottom: 6px;
|
||||
gap: 0.4375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
color: var(--text-primary);
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
@@ -166,9 +166,9 @@
|
||||
}
|
||||
|
||||
.cardDate {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 0.625rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 700;
|
||||
line-height: var(--line-height-label-small);
|
||||
letter-spacing: var(--letter-spacing-eyebrow);
|
||||
@@ -177,10 +177,10 @@
|
||||
|
||||
.cardDesc {
|
||||
display: -webkit-box;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
color: var(--text-primary);
|
||||
font-size: 13.5px;
|
||||
font-size: 0.84375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.55;
|
||||
-webkit-box-orient: vertical;
|
||||
@@ -193,12 +193,12 @@
|
||||
.tagList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 18px;
|
||||
gap: 0.375rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.tagBadge {
|
||||
padding: 5px 12px;
|
||||
padding: 0.3125rem 0.75rem;
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-blue-200);
|
||||
@@ -220,7 +220,7 @@
|
||||
.caseStudyLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
color: var(--color-blue-500);
|
||||
font-size: var(--font-size-body-small);
|
||||
font-weight: 600;
|
||||
@@ -240,14 +240,14 @@
|
||||
.scrollbarWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
--thumb-width: 216px;
|
||||
width: 480px;
|
||||
--thumb-width: 13.5rem;
|
||||
width: 30rem;
|
||||
max-width: 100%;
|
||||
height: 20px;
|
||||
height: 1.25rem;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
@@ -255,14 +255,14 @@
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-slider-runnable-track {
|
||||
height: 6px;
|
||||
height: 0.375rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-blue-200);
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-slider-thumb {
|
||||
width: var(--thumb-width, 216px);
|
||||
height: 6px;
|
||||
width: var(--thumb-width, 13.5rem);
|
||||
height: 0.375rem;
|
||||
margin-top: 0;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
@@ -271,15 +271,15 @@
|
||||
}
|
||||
|
||||
.scrollbar::-moz-range-track {
|
||||
height: 6px;
|
||||
height: 0.375rem;
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-blue-200);
|
||||
}
|
||||
|
||||
.scrollbar::-moz-range-thumb {
|
||||
width: var(--thumb-width, 216px);
|
||||
height: 6px;
|
||||
width: var(--thumb-width, 13.5rem);
|
||||
height: 0.375rem;
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-blue-400);
|
||||
@@ -313,17 +313,17 @@
|
||||
================================================================ */
|
||||
@media (max-width: 1440px) and (min-width: 1101px) {
|
||||
.carouselTrack {
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 0 0 clamp(290px, 23vw, 330px);
|
||||
width: clamp(290px, 23vw, 330px);
|
||||
flex: 0 0 clamp(18.125rem, 23vw, 20.625rem);
|
||||
width: clamp(18.125rem, 23vw, 20.625rem);
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
width: min(480px, 50vw);
|
||||
--thumb-width: 120px;
|
||||
width: min(30rem, 50vw);
|
||||
--thumb-width: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,7 +340,7 @@
|
||||
.headerRow {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.carouselViewport {
|
||||
@@ -349,13 +349,13 @@
|
||||
}
|
||||
|
||||
.carouselTrack {
|
||||
gap: 20px;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 0 0 clamp(310px, 42vw, 350px);
|
||||
width: clamp(310px, 42vw, 350px);
|
||||
min-height: 450px;
|
||||
flex: 0 0 clamp(19.375rem, 42vw, 21.875rem);
|
||||
width: clamp(19.375rem, 42vw, 21.875rem);
|
||||
min-height: 28rem;
|
||||
box-sizing: border-box;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
@@ -365,17 +365,17 @@
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
padding: 18px 16px;
|
||||
padding: 1.125rem 1rem;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 13.5px;
|
||||
font-size: 0.84375rem;
|
||||
line-height: 1.55;
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 0.875rem;
|
||||
-webkit-line-clamp: 3;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
@@ -383,39 +383,39 @@
|
||||
}
|
||||
|
||||
.tagList {
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
gap: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tagBadge {
|
||||
padding: 3px 9px;
|
||||
font-size: 11px;
|
||||
padding: 0.25rem 0.5625rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.scrollbarWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
width: min(360px, 60vw);
|
||||
--thumb-width: 90px;
|
||||
width: min(22.5rem, 60vw);
|
||||
--thumb-width: 5.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
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) {
|
||||
.projectsSection {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 64px;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.arrowButtons {
|
||||
@@ -432,7 +432,7 @@
|
||||
}
|
||||
|
||||
.carouselTrack {
|
||||
gap: 16px;
|
||||
gap: 1rem;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@@ -444,7 +444,7 @@
|
||||
min-width: calc(100vw - (2 * var(--layout-page-gutter)));
|
||||
min-width: 100cqw;
|
||||
max-width: 100%;
|
||||
min-height: 420px;
|
||||
min-height: 26.25rem;
|
||||
box-sizing: border-box;
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
@@ -455,17 +455,17 @@
|
||||
}
|
||||
|
||||
.cardBody {
|
||||
padding: 18px 16px;
|
||||
padding: 1.125rem 1rem;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 13px;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 0.875rem;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
@@ -473,25 +473,25 @@
|
||||
}
|
||||
|
||||
.tagList {
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
gap: 0.375rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tagBadge {
|
||||
padding: 3px 9px;
|
||||
font-size: 11px;
|
||||
padding: 0.25rem 0.5625rem;
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
||||
.scrollbarWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
width: min(200px, 60vw);
|
||||
height: 16px;
|
||||
--thumb-width: 60px;
|
||||
width: min(12.5rem, 60vw);
|
||||
height: 1rem;
|
||||
--thumb-width: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
|
||||
.introBlock {
|
||||
position: absolute;
|
||||
top: 112px;
|
||||
top: 7rem;
|
||||
left: var(--layout-page-gutter);
|
||||
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);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--overlay-contact);
|
||||
@@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
.underlineBar {
|
||||
width: 120px;
|
||||
width: 7.5rem;
|
||||
height: 3px;
|
||||
margin-bottom: var(--space-5);
|
||||
border-radius: var(--radius-pill);
|
||||
@@ -74,13 +74,13 @@
|
||||
.stepCard {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 250px;
|
||||
width: 15.625rem;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-md);
|
||||
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);
|
||||
transition:
|
||||
border-color var(--motion-duration-fast) ease,
|
||||
@@ -96,9 +96,9 @@
|
||||
.stepNumber {
|
||||
flex: 0 0 auto;
|
||||
color: var(--accent-default);
|
||||
font-size: 20px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
line-height: 28px;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.stepTitle {
|
||||
@@ -117,11 +117,11 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.introBlock {
|
||||
top: 80px;
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
.stepCard {
|
||||
width: 230px;
|
||||
width: 14.375rem;
|
||||
}
|
||||
|
||||
.step05 { top: 90px; right: 32px; }
|
||||
@@ -134,7 +134,7 @@
|
||||
@media (max-width: 760px) {
|
||||
.journeySection {
|
||||
height: auto;
|
||||
min-height: 1120px;
|
||||
min-height: 70rem;
|
||||
padding: var(--layout-section-padding) var(--layout-page-gutter);
|
||||
}
|
||||
|
||||
@@ -151,13 +151,13 @@
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border-default);
|
||||
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);
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.375rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
@@ -171,16 +171,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-top: 220px;
|
||||
padding-left: 20px;
|
||||
margin-top: 13.75rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.stepsList::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
left: 5px;
|
||||
top: 1.25rem;
|
||||
bottom: 1.25rem;
|
||||
left: 0.3125rem;
|
||||
width: 1px;
|
||||
background: var(--border-strong);
|
||||
}
|
||||
@@ -202,10 +202,10 @@
|
||||
.stepCard::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: -20px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
top: 1.375rem;
|
||||
left: -1.25rem;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
border: 3px solid var(--bg-page);
|
||||
border-radius: 50%;
|
||||
background: var(--accent-default);
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: clamp(580px, 48vw, 700px);
|
||||
min-height: clamp(36.25rem, 48vw, 43.75rem);
|
||||
overflow: hidden;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
@@ -120,7 +120,7 @@
|
||||
@media (max-width: 1100px) and (min-width: 651px) {
|
||||
.heroStage {
|
||||
height: auto;
|
||||
min-height: clamp(540px, 64vw, 640px);
|
||||
min-height: clamp(33.75rem, 64vw, 40rem);
|
||||
}
|
||||
|
||||
/* Left — visible slice ≈ width - 150px, always < content padding */
|
||||
@@ -156,20 +156,20 @@
|
||||
@media (max-width: 650px) {
|
||||
.heroStage {
|
||||
height: auto;
|
||||
min-height: 540px;
|
||||
min-height: 33.75rem;
|
||||
}
|
||||
|
||||
.backdropLeft {
|
||||
top: clamp(75px, 16vw, 95px);
|
||||
bottom: auto;
|
||||
left: clamp(-140px, calc(20vw - 230px), -100px);
|
||||
left: clamp(-100px, calc(20vw - 230px), -100px);
|
||||
width: clamp(200px, 44vw, 250px);
|
||||
}
|
||||
|
||||
.backdropRight {
|
||||
top: clamp(82px, 18vw, 102px);
|
||||
bottom: auto;
|
||||
right: clamp(-150px, calc(20vw - 240px), -120px);
|
||||
right: clamp(-130px, calc(20vw - 240px), -120px);
|
||||
width: clamp(210px, 46vw, 260px);
|
||||
}
|
||||
|
||||
@@ -191,7 +191,7 @@
|
||||
@media (min-width: 1441px) {
|
||||
.heroStage {
|
||||
height: auto;
|
||||
min-height: 680px;
|
||||
min-height: 42.5rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.skillsSection {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 3.75rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.mainCard {
|
||||
@@ -10,9 +10,9 @@
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 36px 40px;
|
||||
box-shadow: 0 4px 20px var(--shadow-color);
|
||||
margin-bottom: 32px;
|
||||
padding: 2.25rem 2.5rem;
|
||||
box-shadow: 0 0.25rem 1.25rem var(--shadow-color);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cardEyebrow {
|
||||
@@ -23,25 +23,25 @@
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.skillsBlock {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.skillsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
row-gap: 28px;
|
||||
column-gap: 40px;
|
||||
margin-bottom: 32px;
|
||||
row-gap: 1.75rem;
|
||||
column-gap: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.skillItem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.skillName {
|
||||
@@ -53,13 +53,13 @@
|
||||
|
||||
.meterSegments {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 0.375rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.segment {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
height: 0.375rem;
|
||||
border-radius: 3px;
|
||||
background-color: var(--border-default);
|
||||
transition: background-color 0.2s ease;
|
||||
@@ -72,11 +72,11 @@
|
||||
.badgeCloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.badgePill {
|
||||
padding: 6px 16px;
|
||||
padding: 0.375rem 1rem;
|
||||
border-radius: var(--radius-pill);
|
||||
background-color: var(--bg-subtle);
|
||||
border: 1px solid var(--border-default);
|
||||
@@ -90,13 +90,13 @@
|
||||
}
|
||||
|
||||
.toolsBlock {
|
||||
padding-top: 16px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.toolsGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 24px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.toolTile {
|
||||
@@ -104,12 +104,12 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 132px;
|
||||
height: 136px;
|
||||
width: 8.25rem;
|
||||
height: 8.5rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px 8px;
|
||||
padding: 1rem 0.5rem;
|
||||
transition:
|
||||
opacity var(--motion-duration-default) ease,
|
||||
filter var(--motion-duration-default) ease,
|
||||
@@ -125,12 +125,12 @@
|
||||
}
|
||||
|
||||
.toolIconContainer {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.toolIcon {
|
||||
@@ -150,11 +150,11 @@
|
||||
.filterTabsRow {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
min-width: 180px;
|
||||
min-width: 11.25rem;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .mainCard {
|
||||
@@ -216,13 +216,13 @@
|
||||
}
|
||||
|
||||
.toolTile {
|
||||
height: 124px;
|
||||
height: 7.75rem;
|
||||
padding: var(--space-3) var(--space-2);
|
||||
}
|
||||
|
||||
.toolIconContainer {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
}
|
||||
|
||||
.filterTabsRow {
|
||||
|
||||
@@ -9,16 +9,20 @@
|
||||
|
||||
.heroScene {
|
||||
z-index: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, #c7edfb 0%, #dff5fc 47%, #f8faff 82%, var(--bg-page) 100%);
|
||||
}
|
||||
|
||||
.heroScene::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent 82%, var(--bg-page) 100%);
|
||||
}
|
||||
|
||||
:global([data-theme="dark"]) .heroScene {
|
||||
background:
|
||||
radial-gradient(ellipse 48% 58% at 50% 45%, var(--bg-page) 0 44%, transparent 82%),
|
||||
linear-gradient(to bottom, transparent 68%, var(--bg-page) 100%);
|
||||
opacity: 0.76;
|
||||
linear-gradient(to bottom, #071936 0%, #06142f 50%, #020e28 82%, var(--bg-page) 100%);
|
||||
}
|
||||
|
||||
.heroScene canvas,
|
||||
|
||||
@@ -16,10 +16,23 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
scroll-behavior: smooth;
|
||||
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"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -56,7 +69,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* 1320px Inner Content Container with 60px Gutters */
|
||||
/* 1320px Inner Content Container with Page Gutters */
|
||||
.content-container {
|
||||
width: calc(100% - (2 * var(--layout-page-gutter)));
|
||||
max-width: var(--layout-container);
|
||||
@@ -64,18 +77,18 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 650px) {
|
||||
.section-header {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.375rem;
|
||||
}
|
||||
|
||||
.section-underline {
|
||||
width: 88px;
|
||||
width: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,7 +97,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.section-eyebrow {
|
||||
@@ -94,7 +107,7 @@ body {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.section-title-wrap {
|
||||
@@ -108,11 +121,11 @@ body {
|
||||
line-height: var(--line-height-h2);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-underline {
|
||||
width: 120px;
|
||||
width: 7.5rem;
|
||||
height: 3px;
|
||||
background-color: var(--accent-default);
|
||||
border-radius: var(--radius-pill);
|
||||
@@ -129,9 +142,9 @@ body {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 0.5rem;
|
||||
height: var(--size-button-height);
|
||||
padding: 0 24px;
|
||||
padding: 0 1.5rem;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--font-size-button);
|
||||
line-height: var(--line-height-button);
|
||||
|
||||
@@ -21,65 +21,65 @@
|
||||
--color-border-strong-light: #A9BEDA;
|
||||
--color-border-strong-dark: #426B9D;
|
||||
--color-black: #000000;
|
||||
--space-0: 0px;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
--space-7: 40px;
|
||||
--space-8: 48px;
|
||||
--space-9: 64px;
|
||||
--space-10: 80px;
|
||||
--space-11: 96px;
|
||||
--space-12: 120px;
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-pill: 999px;
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 2.5rem;
|
||||
--space-8: 3rem;
|
||||
--space-9: 4rem;
|
||||
--space-10: 5rem;
|
||||
--space-11: 6rem;
|
||||
--space-12: 7.5rem;
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--radius-pill: 9999px;
|
||||
--stroke-default: 1px;
|
||||
--stroke-strong: 2px;
|
||||
--layout-frame: 1440px;
|
||||
--layout-container: 1320px;
|
||||
--layout-page-gutter: 60px;
|
||||
--layout-grid-gutter: 24px;
|
||||
--layout-grid-column: 88px;
|
||||
--layout-section-gap: 120px;
|
||||
--layout-section-padding: 96px;
|
||||
--layout-text-measure: 720px;
|
||||
--size-icon-sm: 16px;
|
||||
--size-icon-md: 20px;
|
||||
--size-icon-lg: 24px;
|
||||
--size-icon-button: 44px;
|
||||
--size-button-height: 48px;
|
||||
--size-social-button: 56px;
|
||||
--size-avatar: 200px;
|
||||
--size-journey-image: 96px;
|
||||
--size-project-width: 360px;
|
||||
--size-project-media-height: 225px;
|
||||
--size-tool-tile: 72px;
|
||||
--font-size-display-hero: 64px;
|
||||
--font-size-display-footer: 48px;
|
||||
--font-size-h1: 40px;
|
||||
--font-size-h2: 32px;
|
||||
--font-size-h3: 20px;
|
||||
--font-size-body-large: 18px;
|
||||
--font-size-body-default: 16px;
|
||||
--font-size-body-small: 14px;
|
||||
--font-size-label-small: 12px;
|
||||
--font-size-button: 15px;
|
||||
--line-height-display-hero: 72px;
|
||||
--line-height-display-footer: 56px;
|
||||
--line-height-h1: 52px;
|
||||
--line-height-h2: 42px;
|
||||
--line-height-h3: 28px;
|
||||
--line-height-body-large: 30px;
|
||||
--line-height-body-default: 26px;
|
||||
--line-height-body-small: 22px;
|
||||
--line-height-label-small: 18px;
|
||||
--line-height-button: 20px;
|
||||
--layout-page-gutter: 3.75rem;
|
||||
--layout-grid-gutter: 1.5rem;
|
||||
--layout-grid-column: 5.5rem;
|
||||
--layout-section-gap: 7.5rem;
|
||||
--layout-section-padding: 6rem;
|
||||
--layout-text-measure: 45rem;
|
||||
--size-icon-sm: 1rem;
|
||||
--size-icon-md: 1.25rem;
|
||||
--size-icon-lg: 1.5rem;
|
||||
--size-icon-button: 2.75rem;
|
||||
--size-button-height: 3rem;
|
||||
--size-social-button: 3.5rem;
|
||||
--size-avatar: 12.5rem;
|
||||
--size-journey-image: 6rem;
|
||||
--size-project-width: 22.5rem;
|
||||
--size-project-media-height: 14.0625rem;
|
||||
--size-tool-tile: 4.5rem;
|
||||
--font-size-display-hero: 4rem;
|
||||
--font-size-display-footer: 3rem;
|
||||
--font-size-h1: 2.5rem;
|
||||
--font-size-h2: 2rem;
|
||||
--font-size-h3: 1.25rem;
|
||||
--font-size-body-large: 1.125rem;
|
||||
--font-size-body-default: 1rem;
|
||||
--font-size-body-small: 0.875rem;
|
||||
--font-size-label-small: 0.75rem;
|
||||
--font-size-button: 0.9375rem;
|
||||
--line-height-display-hero: 4.5rem;
|
||||
--line-height-display-footer: 3.5rem;
|
||||
--line-height-h1: 3.25rem;
|
||||
--line-height-h2: 2.625rem;
|
||||
--line-height-h3: 1.75rem;
|
||||
--line-height-body-large: 1.875rem;
|
||||
--line-height-body-default: 1.625rem;
|
||||
--line-height-body-small: 1.375rem;
|
||||
--line-height-label-small: 1.125rem;
|
||||
--line-height-button: 1.25rem;
|
||||
--letter-spacing-eyebrow: 0.16em;
|
||||
--motion-duration-fast: 140ms;
|
||||
--motion-duration-default: 200ms;
|
||||
@@ -161,14 +161,14 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
:root {
|
||||
--layout-page-gutter: 32px;
|
||||
--layout-section-padding: 80px;
|
||||
--layout-page-gutter: 2rem;
|
||||
--layout-section-padding: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 650px) {
|
||||
:root {
|
||||
--layout-page-gutter: 20px;
|
||||
--layout-section-padding: 64px;
|
||||
--layout-page-gutter: 1.25rem;
|
||||
--layout-section-padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user