Refactored the sections
This commit is contained in:
+169
-30
@@ -370,7 +370,7 @@ ul {
|
||||
}
|
||||
|
||||
.editorial-statement-title {
|
||||
grid-column: 5 / 10;
|
||||
grid-column: 5 / 9;
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(2.4rem, 4vw, 4.5rem);
|
||||
font-weight: 400;
|
||||
@@ -386,11 +386,22 @@ ul {
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy {
|
||||
grid-column: 10 / 13;
|
||||
grid-column: 9 / 13;
|
||||
max-width: 32rem;
|
||||
color: var(--color-softened-black);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.philosophy-brand-thesis {
|
||||
color: var(--color-noel-red);
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: 0.74rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.65;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy p + p,
|
||||
.approach-supporting-copy p + p {
|
||||
margin-top: 1.5rem;
|
||||
@@ -431,6 +442,49 @@ ul {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.approach-principles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-top: clamp(4.5rem, 8vw, 8rem);
|
||||
border-top: 1px solid var(--color-antique-brass);
|
||||
border-bottom: 1px solid var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.approach-principle {
|
||||
min-width: 0;
|
||||
padding: clamp(2rem, 4vw, 3.5rem);
|
||||
}
|
||||
|
||||
.approach-principle + .approach-principle {
|
||||
border-left: 1px solid var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.approach-principle-index {
|
||||
display: block;
|
||||
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
|
||||
color: var(--color-antique-brass);
|
||||
font-size: 0.67rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
.approach-principle h3,
|
||||
.client-fit-category h3 {
|
||||
font-family: var(--font-family-editorial);
|
||||
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.35;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.approach-principle p {
|
||||
max-width: 28rem;
|
||||
margin-top: 1.25rem;
|
||||
color: var(--color-softened-black);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.work-section {
|
||||
border-top-color: rgba(244, 237, 227, 0.18);
|
||||
background: var(--color-noel-black);
|
||||
@@ -449,11 +503,12 @@ ul {
|
||||
}
|
||||
|
||||
.work-heading-grid .oversized-editorial-title {
|
||||
grid-column: 1 / 10;
|
||||
grid-column: 1 / 9;
|
||||
}
|
||||
|
||||
.work-introduction-copy {
|
||||
grid-column: 10 / 13;
|
||||
grid-column: 9 / 13;
|
||||
max-width: 28rem;
|
||||
padding-bottom: 0.6rem;
|
||||
color: rgba(244, 237, 227, 0.74);
|
||||
font-size: 0.92rem;
|
||||
@@ -482,45 +537,52 @@ ul {
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
|
||||
gap: clamp(1rem, 2vw, 2.5rem);
|
||||
align-items: start;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.34);
|
||||
font-size: 0.69rem;
|
||||
}
|
||||
|
||||
.work-project-category {
|
||||
color: var(--color-antique-brass);
|
||||
font-size: 0.67rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.4;
|
||||
line-height: 1.45;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption span {
|
||||
color: var(--color-antique-brass);
|
||||
text-align: right;
|
||||
.work-project-description {
|
||||
max-width: 34rem;
|
||||
color: rgba(244, 237, 227, 0.7);
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.journal-section {
|
||||
.client-fit-section {
|
||||
border-top: 0;
|
||||
background: var(--color-noel-red);
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.journal-content-grid {
|
||||
.client-fit-content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
gap: clamp(3rem, 7vw, 7rem);
|
||||
}
|
||||
|
||||
.journal-heading-content {
|
||||
.client-fit-heading-content {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
|
||||
.section-context-label-red {
|
||||
.section-context-label-brass {
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.journal-title,
|
||||
.client-fit-title,
|
||||
.contact-title {
|
||||
margin-top: 2rem;
|
||||
font-family: var(--font-family-editorial);
|
||||
@@ -531,7 +593,7 @@ ul {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.journal-summary-copy {
|
||||
.client-fit-positioning-copy {
|
||||
max-width: 29rem;
|
||||
margin-top: 2rem;
|
||||
color: rgba(244, 237, 227, 0.82);
|
||||
@@ -541,10 +603,38 @@ ul {
|
||||
color: var(--color-weathered-paper);
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
.client-fit-image-figure {
|
||||
grid-column: 6 / 13;
|
||||
}
|
||||
|
||||
.client-fit-category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-top: clamp(4rem, 7vw, 7rem);
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.34);
|
||||
border-bottom: 1px solid rgba(244, 237, 227, 0.34);
|
||||
}
|
||||
|
||||
.client-fit-category {
|
||||
min-width: 0;
|
||||
padding: clamp(1.75rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
.client-fit-category + .client-fit-category {
|
||||
border-left: 1px solid rgba(244, 237, 227, 0.34);
|
||||
}
|
||||
|
||||
.client-fit-category h3 {
|
||||
color: var(--color-antique-brass);
|
||||
}
|
||||
|
||||
.client-fit-category p {
|
||||
max-width: 24rem;
|
||||
margin-top: 1.25rem;
|
||||
color: rgba(244, 237, 227, 0.76);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: var(--color-weathered-paper);
|
||||
}
|
||||
@@ -755,7 +845,8 @@ ul {
|
||||
}
|
||||
|
||||
.philosophy-supporting-copy {
|
||||
grid-column: 6 / 11;
|
||||
grid-column: 6 / 13;
|
||||
max-width: 32rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@@ -768,21 +859,33 @@ ul {
|
||||
}
|
||||
|
||||
.work-heading-grid .oversized-editorial-title {
|
||||
grid-column: 1 / 9;
|
||||
grid-column: 1 / 8;
|
||||
}
|
||||
|
||||
.work-introduction-copy {
|
||||
grid-column: 9 / 13;
|
||||
grid-column: 8 / 13;
|
||||
}
|
||||
|
||||
.journal-heading-content {
|
||||
.client-fit-heading-content {
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
.client-fit-image-figure {
|
||||
grid-column: 7 / 13;
|
||||
}
|
||||
|
||||
.client-fit-category-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.client-fit-category:nth-child(3) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.client-fit-category:nth-child(n + 3) {
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.34);
|
||||
}
|
||||
|
||||
.contact-heading-content {
|
||||
grid-column: 1 / 6;
|
||||
}
|
||||
@@ -837,7 +940,7 @@ ul {
|
||||
.approach-content-grid,
|
||||
.work-heading-grid,
|
||||
.work-gallery-grid,
|
||||
.journal-content-grid,
|
||||
.client-fit-content-grid,
|
||||
.contact-content-grid {
|
||||
display: block;
|
||||
}
|
||||
@@ -897,7 +1000,7 @@ ul {
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
||||
.journal-image-figure {
|
||||
.client-fit-image-figure {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
@@ -918,6 +1021,42 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
.approach-principles-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.approach-principle {
|
||||
padding: 2.25rem 0;
|
||||
}
|
||||
|
||||
.approach-principle + .approach-principle {
|
||||
border-top: 1px solid var(--color-antique-brass);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.approach-principle-index {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.client-fit-category-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.client-fit-category {
|
||||
padding: 2rem 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.client-fit-category + .client-fit-category,
|
||||
.client-fit-category:nth-child(3) {
|
||||
border-top: 1px solid rgba(244, 237, 227, 0.34);
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 32rem) {
|
||||
:root {
|
||||
--site-horizontal-padding: 1.25rem;
|
||||
@@ -953,7 +1092,7 @@ ul {
|
||||
font-size: clamp(3.7rem, 18vw, 5.5rem);
|
||||
}
|
||||
|
||||
.journal-title,
|
||||
.client-fit-title,
|
||||
.contact-title {
|
||||
font-size: clamp(2.75rem, 13vw, 4.1rem);
|
||||
}
|
||||
@@ -962,9 +1101,9 @@ ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.work-gallery-grid figcaption span {
|
||||
.work-project-description {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
margin-top: 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user