/* ========================================================================== Case study page — port of /remilia-hair on dsgnmate.webflow.io -------------------------------------------------------------------------- Everything here is scoped under `.cs-main` so it can't reach the shared `.container` / `.section` / `.divider` rules in css/main.css, which the homepage sections depend on. TYPE SCALE / em BASE The reference drives its whole layout off an em base set on : <=479px 14px 480-991px 16px 992-1439px 1vw 1440px+ 16px with `.container` overriding to a flat 14px for everything <=991px. The 1vw step means the page shrinks ~30% crossing 991 -> 992px, which is a Webflow artefact rather than a design intent. DEVIATION: the em base here is 14px up to 991px, then `clamp(14px, 1.11vw, 16px)`. That is continuous at the 992px boundary, still fluid through the mid range, and lands on exactly 16px at 1440px and above — matching the reference at the widths where it isn't misbehaving. The other ported sections already use the same 14px -> 16px em base (see css/main.css), so the page is consistent with the rest of the site. All other sizes, spacings and colours are the reference's, converted from its max-width media queries to this project's mobile-first breakpoints (base / 480 / 768 / 992 / 1440). INTERACTIONS IX2 a-71 "Hero Section Page Load": opacity 0 -> 1 and blur 5px -> 0, 500ms, easing inSine, 250ms delay. Reproduced in CSS at the bottom of this file; skipped under prefers-reduced-motion. ========================================================================== */ .cs-main { /* Reference body: Inter 300 / line-height 1 */ font-family: var(--font-family-secondary); font-size: 14px; font-weight: 300; line-height: 1; color: var(--color-soft-black); } @media (min-width: 992px) { .cs-main { font-size: clamp(14px, 1.11vw, 16px); } } /* The reference's `strong` inherits weight 300, so the UA's `bolder` resolves to 400 rather than 700. Stated outright so it doesn't depend on that. */ .cs-main strong { font-weight: 400; } /* -------------------------------------------------------------------------- Layout primitives — .section / .container -------------------------------------------------------------------------- */ .cs-main .section { position: static; z-index: 1; display: block; height: auto; padding: 0; background-color: transparent; } .cs-main .container { display: block; width: 100%; max-width: 100%; margin: 0; padding: 2em 1em; } @media (min-width: 480px) { .cs-main .container { padding: 2em; } } @media (min-width: 992px) { .cs-main .container { padding: 0 4em; } } /* -------------------------------------------------------------------------- Project header -------------------------------------------------------------------------- */ .cs-main .cs-hero-section { display: flex; flex-flow: column; justify-content: flex-end; align-items: flex-start; height: auto; /* Clears the fixed .site-nav, which the reference's overlay nav didn't need to allow for. */ padding-top: 100px; padding-bottom: 4em; } @media (min-width: 768px) { .cs-main .cs-hero-section { height: 80vh; padding-top: 10%; } } .cs-main .project-header-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; height: auto; padding-bottom: 4em; } @media (min-width: 992px) { .cs-main .project-header-wrapper { flex-direction: row; } } .cs-main .project-title { margin-top: -5px; padding-bottom: 20px; padding-right: 2em; font-family: var(--font-family-primary); font-size: 1.5em; font-weight: 400; letter-spacing: -.03em; line-height: 1.4; } @media (min-width: 768px) { .cs-main .project-title { font-size: 2em; } } @media (min-width: 992px) { .cs-main .project-title { padding-right: 20px; font-size: 2.5em; } } @media (min-width: 1440px) { .cs-main .project-title { font-size: 2.3em; } } .cs-main .archive-info-wrapper { width: 100%; padding-bottom: 1.5em; padding-right: 2em; } .cs-main .archive-description-wrapper { width: 100%; margin-left: 0; } @media (min-width: 768px) { .cs-main .archive-description-wrapper { width: 50%; } } @media (min-width: 992px) { .cs-main .archive-description-wrapper { width: 45%; } } .cs-main .archive-description { font-size: 1em; font-weight: 300; letter-spacing: -.5px; line-height: 1.5; } @media (min-width: 992px) { .cs-main .archive-description { font-size: 1.4em; } } /* Project meta */ .cs-main .grid-4-column { display: flex; flex-direction: column; align-items: start; width: 100%; margin-top: auto; padding-top: 1em; row-gap: 16px; } @media (min-width: 768px) { .cs-main .grid-4-column { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; column-gap: 2em; } } .cs-main .archive-info-h6 { margin-bottom: 0; font-size: 1em; font-weight: 400; line-height: 1.8; letter-spacing: 0; } .cs-main .archive-p { margin: 0 0 .5em; font-size: 1em; font-weight: 300; line-height: 1.5; } /* -------------------------------------------------------------------------- Rules -------------------------------------------------------------------------- */ .cs-main .divider { display: block; width: 100%; height: 1.5px; margin: 0; background-color: var(--color-soft-black); } .cs-main .divider.is-med-grey { background-color: var(--color-gray-warm); } .cs-main .rule-cs-headings { width: 100%; height: 1px; margin-bottom: 2em; padding-right: 0; background-color: var(--color-gray-rule); } /* -------------------------------------------------------------------------- Cover image -------------------------------------------------------------------------- */ .cs-main .container.cs-hero-image { display: flex; justify-content: center; align-items: center; height: auto; min-height: auto; margin-top: 0; padding-top: 0; padding-left: 0; padding-right: 0; background-color: transparent; } @media (min-width: 992px) { .cs-main .container.cs-hero-image { padding-top: 0; padding-bottom: 0; } } .cs-main .img-cs-hero { width: 100%; max-width: none; height: auto; } /* -------------------------------------------------------------------------- Case study body -------------------------------------------------------------------------- */ .cs-main .container.is-case-study { display: flex; flex-direction: row; padding-top: 4em; padding-bottom: 0; color: var(--color-soft-black); } @media (min-width: 1440px) { .cs-main .container.is-case-study { justify-content: space-between; align-items: flex-start; } } .cs-main .cs-content-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; } .cs-main .cs-section-wrapper { height: auto; margin: 0; } /* DEVIATION: the reference keeps this block at width: 50% right down to 320px, so on a 390px phone the section headline is set at 33.6px inside a 181px column and spills past its own box. Full width below 768px; the reference's 50% resumes from there, where it fits. */ .cs-main .cs-section-title { width: 100%; margin-bottom: 2em; } @media (min-width: 768px) { .cs-main .cs-section-title { width: 50%; margin-bottom: 4em; } } .cs-main .cs-section-heading { margin: 2em 0; font-size: 1em; font-weight: 400; letter-spacing: -.5px; line-height: 1.5; text-transform: none; } @media (min-width: 992px) { .cs-main .cs-section-heading { font-size: 1.4em; } } .cs-main .cs-h2, .cs-main .more-cs-header { margin-top: 0; margin-bottom: 0; margin-left: -6px; padding-left: 0; font-size: 2.4em; font-weight: 300; letter-spacing: -.06em; line-height: 1.3; } @media (min-width: 480px) { .cs-main .cs-h2, .cs-main .more-cs-header { font-size: 2.7em; } } @media (min-width: 768px) { .cs-main .cs-h2 { margin-top: -10px; } .cs-main .cs-h2, .cs-main .more-cs-header { font-size: 3.8em; } } @media (min-width: 992px) { .cs-main .cs-h2, .cs-main .more-cs-header { font-size: 4.8em; } } /* -------------------------------------------------------------------------- 50/50 copy rows -------------------------------------------------------------------------- */ .cs-main .cs-header-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 0; margin-bottom: 3em; } @media (min-width: 768px) { .cs-main .cs-header-wrapper { flex-direction: row; margin-top: 4em; margin-bottom: 2em; } } .cs-main .div-is-25 { width: 100%; margin-left: 0; } @media (min-width: 480px) { .cs-main .div-is-25 { width: 50%; } } @media (min-width: 768px) { .cs-main .div-is-25 { width: 35%; } } @media (min-width: 992px) { .cs-main .div-is-25 { width: 25%; } } .cs-main .div-is-50 { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; margin-bottom: 1em; overflow: hidden; } @media (min-width: 480px) { .cs-main .div-is-50 { margin-bottom: 0; } } @media (min-width: 992px) { .cs-main .div-is-50 { width: 50%; } } .cs-main .div-is-50.cs-div-left { margin-right: 0; } @media (min-width: 768px) { .cs-main .div-is-50.cs-div-left { margin-right: 2em; } } .cs-main .div-is-50.cs-div-right { margin-left: 0; margin-top: 1em; } @media (min-width: 480px) { .cs-main .div-is-50.cs-div-right { margin-top: 2em; } } @media (min-width: 768px) { .cs-main .div-is-50.cs-div-right { margin-top: 0; } } @media (min-width: 992px) { .cs-main .div-is-50.cs-div-right { margin-left: 2em; } } /* The empty left column only exists to push the copy into the right half — it must not take vertical space once the row stacks. */ @media (max-width: 767px) { .cs-main .cs-header-wrapper > .div-is-50.cs-div-left:empty, .cs-main .cs-subtext-wrapper > .div-is-50.cs-div-left:empty { display: none; } } /* -------------------------------------------------------------------------- Body copy -------------------------------------------------------------------------- */ .cs-main .paragraph { margin-bottom: .5em; color: var(--color-soft-black); font-family: var(--font-family-secondary); font-size: 16px; font-weight: 300; line-height: 1.6; } .cs-main .paragraph.large { font-size: 18px; font-weight: 300; letter-spacing: -.01rem; line-height: 1.5; } @media (min-width: 768px) { .cs-main .paragraph.large { font-size: 20px; } } @media (min-width: 992px) { .cs-main .paragraph.large { font-size: 1.4em; } } .cs-main .paragraph.with-left-margin { margin-left: 24px; } .cs-main .grid-project-details { display: flex; flex-direction: column; } .cs-main .div-project-details { margin-bottom: 1em; } .cs-main .heading-10 { display: block; margin-bottom: .5em; font-size: 18px; font-weight: 600; line-height: 1.8; } /* -------------------------------------------------------------------------- Phases — headed blocks of full-width design shots -------------------------------------------------------------------------- */ .cs-main .phase-wrapper { display: block; margin-bottom: 8em; } @media (min-width: 768px) { .cs-main .phase-wrapper { margin-bottom: 10em; } } .cs-main .phase-header-wrapper { display: flex; flex-direction: column; } .cs-main .cs-subtext-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 2em; } @media (min-width: 768px) { .cs-main .cs-subtext-wrapper { flex-direction: row; } } @media (min-width: 992px) { .cs-main .cs-subtext-wrapper { margin-bottom: 4em; } } .cs-main .phase-image-wrapper { display: flex; flex-flow: column; justify-content: center; /* DEVIATION: the reference leaves the cross-axis alignment at `stretch`, which pins the 90%-wide shots to the left edge and leaves a 10% gutter on the right only. Centred here so the gutters match. */ align-items: center; margin-bottom: 1em; padding: 4em 0; background-color: var(--color-off-white-alt); overflow: hidden; } @media (min-width: 480px) { .cs-main .phase-image-wrapper { margin-bottom: 0; } } @media (min-width: 768px) { .cs-main .phase-image-wrapper { padding: 6em 0; } } @media (min-width: 992px) { .cs-main .phase-image-wrapper { padding: 3em 0; } } /* `.with-left-margin` labels sit inside a now-centred flex column, so pull them back to the left edge of the image they title. */ .cs-main .phase-image-wrapper .paragraph.with-left-margin { align-self: flex-start; margin-bottom: 1em; } .cs-main .phase-image { width: 90%; height: auto; padding-left: 1em; padding-right: 1em; } @media (min-width: 480px) { .cs-main .phase-image { padding-left: 2em; padding-right: 2em; } } @media (min-width: 992px) { .cs-main .phase-image { padding-left: 0; padding-right: 0; } } /* Consecutive shots in one wrapper need breathing room between them. */ .cs-main .phase-image + .phase-image { margin-top: 3em; } /* -------------------------------------------------------------------------- More case studies -------------------------------------------------------------------------- */ .cs-main .container.cs-more { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 6em; padding-bottom: 12em; } .cs-main .more-cs-header { margin-top: 1em; margin-bottom: 1em; } .cs-main .more-case-studies { display: flex; flex-direction: column; width: 100%; row-gap: 16px; } @media (min-width: 768px) { .cs-main .more-case-studies { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr; column-gap: 2em; } } .cs-main .grid-content { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%; height: auto; background-color: transparent; } .cs-main .link-to-cs { display: block; width: 100%; } .cs-main .cs-image-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: auto; margin-bottom: 0; overflow: hidden; } .cs-main .cs-image { width: 100%; height: auto; } .cs-main .cs-title-block { display: flex; justify-content: space-between; align-items: center; margin-top: 2em; margin-bottom: 2em; } .cs-main .cs-title-block h3 { font-size: 1.5em; font-weight: 300; letter-spacing: -.03em; line-height: 1.4; } @media (min-width: 768px) { .cs-main .cs-title-block h3 { font-size: 2em; } } @media (min-width: 992px) { .cs-main .cs-title-block h3 { font-size: 2.5em; } } @media (min-width: 1440px) { .cs-main .cs-title-block h3 { font-size: 2.3em; } } .cs-main .arrow-right-black { display: none; width: 30px; height: auto; transition: transform var(--transition-base); } @media (min-width: 480px) { .cs-main .arrow-right-black { display: block; width: 35px; } } @media (min-width: 992px) { .cs-main .arrow-right-black { width: 4em; } } .cs-main .link-to-cs:hover .arrow-right-black, .cs-main .link-to-cs:focus-visible .arrow-right-black { transform: translateX(10px); } /* -------------------------------------------------------------------------- IX2 a-71 "Hero Section Page Load" opacity 0 -> 1, blur 5px -> 0 over 500ms after a 250ms delay, easing inSine = cubic-bezier(.47, 0, .745, .715). -------------------------------------------------------------------------- */ @keyframes cs-load-in { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } } .cs-main [data-anim="cs-load"] { animation: cs-load-in 500ms cubic-bezier(.47, 0, .745, .715) 250ms both; } @media (prefers-reduced-motion: reduce) { .cs-main [data-anim="cs-load"] { animation: none; } .cs-main .arrow-right-black { transition: none; } .cs-main .link-to-cs:hover .arrow-right-black, .cs-main .link-to-cs:focus-visible .arrow-right-black { transform: none; } }