/*!*********************************************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./styles/main.scss ***! \*********************************************************************************************************************************************************************/ @charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } :root { --jb-primary: #a38e77; --jb-primary-brown: #403333; --jb-primary-charcoal: #120f0f; --jb-off-white: #f0eae6; --jb-off-white: #f8f2ef; --jb-grey: #8f8881; --jb-beige: #c1b4a6; --jb-primary-90: #a38e77e6; --jb-primary-0: #a38e7700; --jb-primary-brown-90: #403333e6; --jb-primary-brown-75: #403333bf; --jb-primary-brown-50: #40333380; --jb-primary-brown-25: #40333340; --jb-primary-brown-10: #4033331a; --jb-primary-brown-0: #40333300; --jb-primary-charcoal-90: #120f0fe6; --jb-primary-charcoal-75: #120f0fbf; --jb-primary-charcoal-50: #120f0f80; --jb-primary-charcoal-25: #120f0f40; --jb-primary-charcoal-10: #120f0f1a; --jb-primary-charcoal-0: #120f0f00; --jb-grey-90: #8f8881e6; --jb-grey-50: #8f888180; --jb-grey-10: #8f88811a; --jb-off-white-90: #f0eae6e6; --jb-off-white-90: #f8f2efe6; --jb-off-white-50: #f0eae680; --jb-off-white-0: #f0eae600; --jb-off-white-0: #f8f2ef00; --blk: #000000; --wht: #ffffff; --red: #fe0000; --hcsHeader: 142px; --box-shadow-off-white: 0px 0px 30px rgba(33, 27, 27, 0.05); --jb-shadow: 0px 0px 3.6vw 5px var(--jb-primary-charcoal-10); --padding-header: 1.5vw 1.5vw 3vw 1.5vw; --padding-submit-button: 1.5vw; } @font-face { font-family: "Sans"; src: url(../fonts/eb8ce08e05c54a3cc030.woff) format("woff"); src: url(../fonts/db409a5e8059908c1d45.woff2) format("woff2"); } @font-face { font-family: "Serif"; src: url(../fonts/5f28ef0043f65ba6e2c4.woff) format("woff"); src: url(../fonts/85c5a9860d02aa725aed.woff2) format("woff2"); } @font-face { font-family: "Serif Ital"; src: url(../fonts/2672b484a49bb6b30062.woff) format("woff"); src: url(../fonts/552e537eddbe740e829e.woff2) format("woff2"); } @font-face { font-family: "Serif Reg"; src: url(../fonts/8df49db7c17622a7e27d.woff) format("woff"); src: url(../fonts/5e172bc7e047dd31aa40.woff2) format("woff2"); } @font-face { font-family: "Serif Ital Reg"; src: url(../fonts/0b7f0fc86bb53973c141.woff) format("woff"); src: url(../fonts/d53f03001ce73c051336.woff2) format("woff2"); } [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1s; } [data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate { transition-delay: 1s; } [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { transition-timing-function: ease; } @media screen { html:not(.no-js) [data-aos^=fade][data-aos^=fade] { /* opacity: 0; */ transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; -webkit-transform: none; transform: none; } html:not(.no-js) [data-aos=fade-up] { -webkit-transform: translate3d(0, 1.5vw, 0); transform: translate3d(0, 1.5vw, 0); } } @keyframes floating { from { transform: translate(0, 0); } 65% { transform: translate(0, 0.25rem); } to { transform: translate(0, 0); } } html { font-size: 100%; font-size: 20px; font-size: 1.4vw; position: relative; scroll-behavior: smooth; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-weight: 400; } @-moz-document url-prefix() { body { font-weight: lighter !important; } } img { width: auto; width: -webkit-fill-available; object-fit: cover; } em { font-family: "Serif Ital", "Times New Roman", Times, serif; } .ital, i { font-family: "Serif Ital", "Times New Roman", Times, serif; } .indent { text-indent: 1em; } .sc { font-variant: all-small-caps; } figcaption { padding-top: 0.2vw; text-wrap: pretty; } figcaption span.ital { font-size: 1.25vw; } pre { white-space: pre; } .mob-open { background-color: var(--jb-beige); transition: transform, opacity 0.5s cubic-bezier(0.5, 0.1, 0, 0.99); } .nav-in { transform: translateY(0) !important; transition: transform, opacity 0.5s cubic-bezier(0.5, 0.1, 0, 0.99); } .mob-nav button, .to-top button { cursor: pointer; } .prints-menu a, .page-navigation a { padding: 0.1vw 0.3vw; border: 0.075vw solid var(--jb-primary-brown); border-radius: 0.3vw; background-color: var(--jb-off-white-0); transition: background-color 0.25s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .prints-menu a:hover, .page-navigation a:hover { opacity: 1; background-color: var(--jb-off-white-90); } .scrolled .prints a, .scrolled .page-navigation a { background-color: var(--jb-off-white-50); } .page-navigation { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center; padding: var(--padding-header); z-index: 10000; pointer-events: none; } .page-navigation a { pointer-events: all; cursor: pointer; } .active { font-family: "Serif Ital", "Times New Roman", Times, serif; } .hide { display: none !important; } .rmv { display: none !important; } .fade { opacity: 0.5; } .not { color: var(--jb-primary-brown-50); } .tfade { opacity: 0; transition: transform, opacity 0.5s cubic-bezier(0.5, 0.1, 0, 0.99); } .hidden { display: none; } .disable { pointer-events: none; } .hcn, .hcnR { pointer-events: none; } main#home .intro-container[data-aos], main#home .home-curated .row[data-aos] { transform: none !important; -webkit-transform: none !important; } .logo-container, a.logo, .home-curated [id^=hc] a { opacity: 1; } h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, p::selection, li::selection, a::selection, button::selection, figcaption::selection, pre::selection, nav::selection, img::selection, span::selection { color: var(--jb-primary-charcoal-50); } a:hover, button:hover, a:hover h2 { opacity: 0.5; transition: transform, opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } a:hover h2 { opacity: 1 !important; } .credits a:hover, .fp a:hover, .fp button:hover { color: var(--jb-primary-charcoal); opacity: 1; transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); } .clients ul:hover { cursor: default; } @media (min-width: 720px) { main#home .home-curated .row:not(.link) > [id^=hc] > a:hover > figure figcaption { opacity: 1 !important; } main#people ul:hover figure img { transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); opacity: 1; } main#people ul:hover figure figcaption { opacity: 0; } main#people ul li:hover figure { box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-brown-50); } main#people ul li:hover figure img { opacity: 0; } main#people ul li:hover figure figcaption { opacity: 1; } main#people a:hover { opacity: 1; } main#projects ul:hover li { opacity: 0.25; cursor: pointer; } main#projects ul li:hover { opacity: 1; border-bottom: 0.075vw solid var(--jb-primary-brown); } main#projects ul li:hover a { opacity: 1; } main#projects ul li:hover .hover_img { opacity: 1; } main#projects ul:hover li .hover_img { transition: transform, opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } main#personal ul:hover figure img { transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); opacity: 0; } main#personal ul:hover figure figcaption { opacity: 1; } main#personal ul li:hover figure { box-shadow: inset 0px 0px 0px 0px var(--jb-primary-brown); } main#personal ul li:hover figure img { opacity: 1; } main#personal ul li:hover figure figcaption { opacity: 0; } main#personal a:hover { opacity: 1; } main#case-study .content .gallery figure:hover figcaption { opacity: 1; } main#case-study .hero .h-l:hover ~ .page-heading-container div, main#case-study .hero .h-p:hover ~ .page-heading-container div { opacity: 1; transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); } } img[data-lazyload][data-srcset] { filter: blur(1.8vw); } @media (prefers-reduced-motion: no-preference) { img[data-lazyload] { transition-property: filter, transform; /* Hint browser at change for better performance */ will-change: filter, transform; } } .h-p, .h-l, figure { /* Enforce GPU rendering */ transform: translateZ(0); } @media (prefers-reduced-motion: no-preference) { .h-p img[data-lazyload], .h-l img[data-lazyload], main#profile .pp img[data-lazyload] { transition: 1s cubic-bezier(0.4, 0, 0.2, 1); } } figure { overflow: hidden; } @media (prefers-reduced-motion: no-preference) { figure img[data-lazyload] { transition: 0.5s cubic-bezier(0.5, 0.1, 0, 0.99); } } @media (prefers-reduced-motion: no-preference) { main#people figure img[data-lazyload] { transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); } } footer { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.9vw; padding: 1.5vw 1.5vw 1.8vw 1.5vw; font-variant-numeric: oldstyle-nums !important; font-feature-settings: "liga" 1; line-height: 114%; } footer .to-top { grid-column: 1/3; } footer .to-top .or { margin-right: 0.05em; font-variant: all-small-caps; } footer .to-top p, footer .to-top span { cursor: default; display: inline-block; } footer .to-top:first-letter { text-transform: capitalize; } footer .contact { grid-column: 3/4; display: flex; flex-direction: column; } footer .address-container { grid-column: 4/5; } footer.fcs { background-color: var(--jb-off-white); } header { position: fixed; top: 0; left: 0; display: flex; width: 100%; height: max-content; justify-content: space-between; padding: var(--padding-header); z-index: 100; } header a, header p, header button, header nav, header li, header pre { line-height: 112%; } header.scrolled .logo-container .tagline-container { opacity: 0; } header .tagline-container { position: relative; white-space: nowrap; transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); } header .tagline-container .tagline { font-family: "Serif Ital", "Times New Roman", Times, serif; position: absolute; transition: transform, opacity 0.25s cubic-bezier(0.5, 0.1, 0, 0.99); } header .tagline-container .tagline:not(:first-of-type) { opacity: 0; } header .tagline-container .tagline.tshow { opacity: 1 !important; } header .logo-container-svg { z-index: 100; position: absolute; } header .logo-container-svg .logo-svg { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; width: 1.35vw; height: auto; } header .logo-container-svg .logo-svg img { object-fit: contain; } header nav.nav { position: absolute; left: 0; top: 0; width: 100%; display: flex; justify-content: center; padding: var(--padding-header); pointer-events: none; } header nav.nav .nav-menu { pointer-events: all; } header nav.nav .nav-btn::after { content: ","; } header nav.nav ul { display: flex; } header nav.nav ul li:not(:last-child) { padding-right: 0.25vw; } header nav.nav ul li:not(:last-child) a::after { content: ","; } header nav.mob-nav { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; opacity: 0; pointer-events: none !important; } header nav.mob-nav .mob-nav-menu { transform: translateY(-100%); height: 100%; width: 100%; } header nav.mob-nav .mob-nav-btn, header nav.mob-nav .mob-close-btn, header nav.mob-nav .mob-nav-menu { pointer-events: all !important; } header .logo-container, header nav { z-index: 10; } header .logo-container .logo { white-space: nowrap; } header.hcs { border-bottom: none; } header.fixed { position: fixed; } .page-heading-container { font-family: "Serif Ital", "Times New Roman", Times, serif; width: 100%; position: absolute; top: calc(1.5vw + 1rem); left: 0; padding: 0 1.5vw; pointer-events: none; display: flex; justify-content: center; display: none; } .page-heading-container::before { content: "("; display: inline-flex; } .page-heading-container::after { content: ")"; display: inline-flex; } .page-heading-container .page-heading { display: flex; justify-content: center; } .page-heading-container .page-heading h3 { font-size: 2.4vw; } .mob-page-heading { display: none; } main { padding: 8vw 1.5vw 0 1.5vw !important; margin-bottom: 6vw; height: max-content; } main h1 { font-size: 3.9vw; line-height: 96%; letter-spacing: -0.0075em; } main h2 { font-size: 5.6vw; line-height: 93%; letter-spacing: -0.0075em; text-wrap: balance; } main h3, main h3 p, main h3 p a { font-size: 2.4vw; line-height: 104%; } main h4 { font-size: 100%; font-size: 1.5vw; line-height: 114%; letter-spacing: -0.0075em; font-variant-numeric: oldstyle-nums; font-feature-settings: "liga" 1; } main p, main li { font-size: 100%; font-size: 1.5vw; line-height: 114%; letter-spacing: -0.0025em; font-variant-numeric: oldstyle-nums; font-feature-settings: "liga" 1; } main .home-index { font-size: 84%; } main .home-index a { letter-spacing: 0.0075em; } main .caption { font-size: 93%; font-family: "Serif Ital", "Times New Roman", Times, serif; letter-spacing: -0.0025em; opacity: 0; transition: transform, opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); } main .case-study-text .desc p, main .case-study-text .desc pre { font-size: 3vw; font-size: 2.4vw; line-height: 104%; } main .case-study-text .credits { border-top: 0.075vw solid var(--jb-primary-brown-25); padding-top: 0.8vw; font-variant-numeric: oldstyle-nums; } main .case-study-text .credits ul li { color: var(--jb-primary-brown-50); } main .hcn, main .hcnR { font-size: 12vw; line-height: 84%; margin-top: -0.64vw; } main .hcn { margin-left: -0.54vw; } main .hcnR { margin-right: -0.2vw; } main#people h3, main#personal h3 { font-size: 2.4vw; line-height: 104%; } main#projects h3 { font-size: 1.8vw; line-height: 104%; } main#home { position: relative; } main#home figure { overflow: visible; } main#home .v-line { border-left: 0.075vw var(--jb-primary-brown) solid; position: absolute; display: block; height: 100%; left: 50%; z-index: -10; } main#home .intro-container { padding-top: 1vw; margin-bottom: 6vw; position: absolute; top: 0; left: 0; } main#home .intro-container .introduction { grid-column: 1/9; padding-right: 2.4vw; text-wrap: balance; } main#home .intro-container .home-index { padding-right: 4vw; } main#home ol { counter-reset: li; margin-left: 0; padding-left: 0; } main#home ol li { font-size: 1.25vw; position: relative; margin: 0 0 0.15vw 0; list-style: none; line-height: 104%; } main#home ol li:before { content: counter(li); counter-increment: li; position: absolute; left: -1.8em; width: 1.8em; font-variant: small-caps; text-align: center; } main#home .home-curated { margin-bottom: 9vw; position: relative; } main#home .home-curated .row { position: relative; } main#home .home-curated .row div { scroll-margin-top: 1.5vw; } main#home .home-curated .row:not(:last-child), main#home .home-curated .link { margin-bottom: 8vw; align-items: flex-end; } main#home .footer-nav { padding-bottom: 0.4vw; border-bottom: 0.52vw solid var(--jb-primary-brown); margin-bottom: 6vw; } main#home .hcn, main#home .hcnR { position: fixed !important; bottom: 1.5vw; opacity: 0; z-index: 9999; pointer-events: none; transform: none !important; -webkit-transform: none !important; } main#home .hcn { left: 1.5vw; } main#home .hcnR { right: 1.5vw; } main#home .hcn[data-aos], main#home .hcnR[data-aos] { transform: none !important; -webkit-transform: none !important; } main#home .home-curated > :nth-child(10n+1 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+3 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+4 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+6 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+7 of .row:not(.link)) > [id^=hc] > a > img { aspect-ratio: 4/5; } main#home .home-curated > :nth-child(10n+2 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+5 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+8 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n+9 of .row:not(.link)) > [id^=hc] > a > img, main#home .home-curated > :nth-child(10n of .row:not(.link)) > [id^=hc] > a > img { aspect-ratio: 3/2; } main#home .hc-mob { margin-bottom: 18vw; display: none; } main#people ul, main#people .bio, main#people .prints-container, main#personal ul, main#personal .bio, main#personal .prints-container, main#profile ul, main#profile .bio, main#profile .prints-container, main#prints ul, main#prints .bio, main#prints .prints-container { padding-top: 1vw; } main#people .bio-links, main#personal .bio-links, main#profile .bio-links, main#prints .bio-links { display: inline-flex; font-family: "Serif Ital", "Times New Roman", Times, serif; } main#people ul { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 12.5%; row-gap: 1.5vw; } main#people ul figure { position: relative; box-shadow: inset 0px 0px 0px 0px var(--jb-primary-brown); } main#people ul figure img { aspect-ratio: 4/5; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-brown-50); } main#people ul figure figcaption { position: absolute; top: 0; left: 0; opacity: 0; padding: 0.8vw; } main#projects ul li { border-bottom: 0.075vw solid var(--jb-primary-charcoal-25); } main#projects ul li a { padding: 0.8vw 0; display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 0.9vw; grid-auto-flow: dense; align-items: baseline; } main#projects ul li a .name { grid-column: 1/9; } main#projects ul li a .desc { grid-column: 9/16; width: 100%; } main#projects ul li a .desc p { width: 100%; } main#projects ul li a .count { grid-column: 16/17; text-align: right; font-variant: small-caps; } main#projects ul li:first-of-type { padding-top: 0.3vw; } main#projects ul li .hover_img { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25%; height: auto; z-index: 1000; opacity: 0; pointer-events: none; transition: none; } main#projects ul li .hover_img img { aspect-ratio: 3/2; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#projects ul li .hover_img.h_p { width: 24.5%; } main#projects ul li .hover_img.h_p img { aspect-ratio: 4/5; } main#personal ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12.5%; row-gap: 1.5vw; } main#personal ul figure { position: relative; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#personal ul figure img { opacity: 0; aspect-ratio: 3/2; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#personal ul figure figcaption { position: absolute; top: 0; left: 0; padding: 0.4vw; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center; } main#case-study { margin-bottom: 0; } main#case-study .hero { position: fixed; top: 0; left: 0; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; } main#case-study .hero .h-p { width: 50vh; } main#case-study .hero .h-p img { aspect-ratio: 4/5; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#case-study .hero .h-l { width: 75vh; } main#case-study .hero .h-l img { aspect-ratio: 3/2; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#case-study .hero .h-p, main#case-study .hero .h-l { cursor: url("/assets/img/jb-default-charcoal.svg") 6 6, pointer; margin: 0 1.8vw; } main#case-study .hero .page-heading-container { top: initial; bottom: 1.5vw; width: 100%; } main#case-study .hero .page-heading-container .page-heading { opacity: 0; padding-top: 0.45vw; display: flex; justify-content: flex-start; color: var(--jb-primary-charcoal-50); } main#case-study .hero .scroll-indicator { position: absolute; bottom: 1.5vw; animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; color: var(--jb-primary-charcoal-50); transition: opacity 2s ease-out; } main#case-study .hero .scroll-indicator:hover { color: var(--jb-primary-charcoal); } main#case-study .hero .scroll-indicator:hover button { opacity: 1; cursor: pointer; } main#case-study .hero .scroll-indicator button i { padding-right: 0.125rem; } main#case-study .hero .scroll-indicator span { padding-left: 0.5vw; } main#case-study .content { position: relative; top: 100vh; background-color: var(--jb-off-white); padding: 1.5vw 0 0 0; margin: 0 -1.5vw 0 -1.5vw; scroll-margin-top: 6vw; box-shadow: var(--jb-shadow); z-index: 12; } main#case-study .content .gallery { display: flex; flex-wrap: wrap; align-items: center; padding: 0 1.5vw 6vw 1.5vw; column-gap: 0.9vw; height: 100%; height: max-content; width: 100%; } main#case-study .content .gallery div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto 18vw auto; height: 100%; width: 100%; } main#case-study .content .gallery div:last-child { margin-bottom: 9vw; } main#case-study .content .gallery div.tc:nth-last-child(2) { margin-bottom: 9vw !important; } main#case-study .content .gallery div.tc:nth-last-child(3) ~ div.tc:nth-last-child(2), main#case-study .content .gallery div:nth-last-child(3) ~ div.tc:nth-last-child(2) { margin-bottom: 18vw !important; } main#case-study .content .gallery div.tc:last-child, main#case-study .content .gallery div.tc:nth-last-child(2) { margin-bottom: 18vw !important; } main#case-study .content .gallery div figure.l-xl { padding: 0; width: 100%; } main#case-study .content .gallery div figure.p-xl, main#case-study .content .gallery div figure.l-l { width: 75%; } main#case-study .content .gallery div figure.p-l, main#case-study .content .gallery div figure.l-m { width: 50%; } main#case-study .content .gallery div figure.p-m, main#case-study .content .gallery div figure.l-s { width: 37.5%; } main#case-study .content .gallery div figure.p-s { width: 25%; } main#case-study .content .gallery div figure.p-xl img, main#case-study .content .gallery div figure.p-l img, main#case-study .content .gallery div figure.p-m img, main#case-study .content .gallery div figure.p-s img { aspect-ratio: 4/5; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#case-study .content .gallery div figure.l-xl img, main#case-study .content .gallery div figure.l-l img, main#case-study .content .gallery div figure.l-m img, main#case-study .content .gallery div figure.l-s img { aspect-ratio: 3/2; box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-charcoal-50); } main#case-study .content .gallery div figure figcaption { font-family: "Serif Ital", "Times New Roman", Times, serif; letter-spacing: -0.0025em; opacity: 0; transition: transform, opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); position: fixed; left: 1.8vw; bottom: 1.2vw; } main#case-study .content .gallery div.tc { width: calc(50% - 0.45vw); } main#case-study .content .gallery div.tc figure.l-xl, main#case-study .content .gallery div.tc figure.p-xl, main#case-study .content .gallery div.tc figure.l-l { width: 100%; } main#case-study .content .gallery div.tc figure.p-l, main#case-study .content .gallery div.tc figure.l-m { width: 75%; } main#case-study .content .gallery div.tc figure.p-m, main#case-study .content .gallery div.tc figure.l-s { width: 50%; } main#case-study .content .gallery div.tc figure.p-s { width: 37.5%; } main#case-study .content .case-study-text { padding: 0 1.5vw 3vw 1.5vw; } main#case-study .content .case-study-text hr { margin: 0 0 0.8vw 0; } main#profile { font-size: 1.5vw; line-height: 114%; letter-spacing: -0.0075em; margin-bottom: 0; } main#profile div { margin-bottom: 6vw; } main#profile div:last-child { margin-bottom: 4.5vw; } main#profile .pp { display: flex; align-items: center; justify-content: center; opacity: 0.8; } main#profile .pp img { width: calc(33.333% - 0.9vw); } main#profile .clients, main#profile .site-credit, main#profile .acknowledgement, main#profile .testimonials { display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 0.9vw; grid-auto-flow: dense; align-items: baseline; border-top: 0.075vw solid var(--jb-primary-brown); padding-top: 0.8vw; color: var(--jb-primary-brown); } main#profile .clients .c-heading, main#profile .clients .sc-heading, main#profile .clients .ac-heading, main#profile .clients .t-heading, main#profile .site-credit .c-heading, main#profile .site-credit .sc-heading, main#profile .site-credit .ac-heading, main#profile .site-credit .t-heading, main#profile .acknowledgement .c-heading, main#profile .acknowledgement .sc-heading, main#profile .acknowledgement .ac-heading, main#profile .acknowledgement .t-heading, main#profile .testimonials .c-heading, main#profile .testimonials .sc-heading, main#profile .testimonials .ac-heading, main#profile .testimonials .t-heading { grid-column: 1/5; } main#profile .clients .c-list-a, main#profile .site-credit .c-list-a, main#profile .acknowledgement .c-list-a, main#profile .testimonials .c-list-a { grid-column: 5/9; } main#profile .clients .c-list-b, main#profile .site-credit .c-list-b, main#profile .acknowledgement .c-list-b, main#profile .testimonials .c-list-b { grid-column: 9/13; } main#profile .clients .c-list-c, main#profile .site-credit .c-list-c, main#profile .acknowledgement .c-list-c, main#profile .testimonials .c-list-c { grid-column: 13/17; } main#profile .clients .sc-list, main#profile .site-credit .sc-list, main#profile .acknowledgement .sc-list, main#profile .testimonials .sc-list { grid-column: 9/17; } main#profile .clients .sc-list .sc-names, main#profile .site-credit .sc-list .sc-names, main#profile .acknowledgement .sc-list .sc-names, main#profile .testimonials .sc-list .sc-names { display: none; margin-left: 0; } main#profile .clients .ac-list, main#profile .site-credit .ac-list, main#profile .acknowledgement .ac-list, main#profile .testimonials .ac-list { grid-column: 5/17; } main#profile .clients .t-list, main#profile .site-credit .t-list, main#profile .acknowledgement .t-list, main#profile .testimonials .t-list { grid-column: 5/-1; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9vw; padding-right: 0; margin-left: 0; text-indent: -0.58vw; } main#profile .clients .t-list .t-item, main#profile .site-credit .t-list .t-item, main#profile .acknowledgement .t-list .t-item, main#profile .testimonials .t-list .t-item { width: 100%; margin-bottom: 3vw; text-wrap: pretty; } main#profile .clients .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3), main#profile .clients .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3) ~ .t-item, main#profile .site-credit .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3), main#profile .site-credit .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3) ~ .t-item, main#profile .acknowledgement .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3), main#profile .acknowledgement .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3) ~ .t-item, main#profile .testimonials .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3), main#profile .testimonials .t-list .t-item:nth-child(3n+1):nth-last-child(-n+3) ~ .t-item { margin-bottom: 0; } main#profile .clients .t-list .t-client, main#profile .site-credit .t-list .t-client, main#profile .acknowledgement .t-list .t-client, main#profile .testimonials .t-list .t-client { margin-top: 0.6rem; margin-left: 1.2vw; text-indent: -1.4vw; } main#profile .clients .t-list .t-description, main#profile .site-credit .t-list .t-description, main#profile .acknowledgement .t-list .t-description, main#profile .testimonials .t-list .t-description { margin-left: 1.4vw; text-indent: -0.2vw; font-size: 1.25vw; font-family: "Serif Ital", "Times New Roman", Times, serif; } main#profile .clients > div, main#profile .site-credit > div, main#profile .acknowledgement > div, main#profile .testimonials > div { text-indent: -0.9vw; margin-left: 0.9vw; padding-right: 1.8vw; margin-bottom: 0; width: calc(100% - 0.9vw); } main#prints { display: flex; flex-direction: column; } main#prints .prints-container { display: flex; flex-direction: column; row-gap: 3vw; } main#prints .prints-container .page-info { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 0.9vw; row-gap: 3vw; } main#prints .prints-container .page-info h2 { grid-column: 1/-1; } main#prints .prints-container .page-info p { grid-column: 1/5; font-size: 1.25vw; } @media (max-width: 720px) { main#prints .prints-container .page-info p { grid-column: 1/-1; } } main#prints .prints-container .required-marker { color: #7a2b2b; margin-left: 0.2em; } main#prints .prints-container .choose-image, main#prints .prints-container .choose-size { display: flex; flex-direction: column; row-gap: 3vw; border-top: 0.075vw solid var(--jb-primary-brown-25); padding-top: 0.4vw; } main#prints .prints-container .choose-image h3, main#prints .prints-container .choose-size h3 { font-size: 1.5vw; } main#prints .prints-container .choose-image .prints-carousel { display: flex; flex-direction: row; column-gap: 0.8rem; flex-wrap: nowrap; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ /* Hide scrollbar for Chrome, Safari and Opera */ } main#prints .prints-container .choose-image .prints-carousel ::-webkit-scrollbar { display: none; } main#prints .prints-container .choose-image .prints-carousel > * { width: calc((97vw - 0.8rem - 0.8rem - 0.8rem) / 4); flex-shrink: 0; } main#prints .prints-container .choose-image .prints-carousel figure { box-sizing: border-box; margin: 0; cursor: pointer; transition: opacity 180ms ease; } main#prints .prints-container .choose-image .prints-carousel figure:hover { opacity: 1; } main#prints .prints-container .choose-image .prints-carousel figure img { box-shadow: inset 0px 0px 0px 0.075vw var(--jb-primary-brown-50); } main#prints .prints-container .choose-image .prints-carousel figure figcaption { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.6vw; } main#prints .prints-container .choose-image .prints-carousel figure figcaption .figure-checkbox { width: 1rem; height: 1rem; border: 0.075vw solid currentColor; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } main#prints .prints-container .choose-image .prints-carousel figure figcaption .figure-checkbox::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 180ms ease; } main#prints .prints-container .choose-image .prints-carousel figure.is-selected .figure-checkbox { border-color: currentColor; } main#prints .prints-container .choose-image .prints-carousel figure.is-selected .figure-checkbox::after { transform: scale(1); } @media (max-width: 720px) { main#prints .prints-container .choose-image .prints-carousel { column-gap: 1.8vw; } main#prints .prints-container .choose-image .prints-carousel > * { width: 47.6vw; } } main#prints .prints-container .choose-image .prints-carousel figcaption { font-size: 1.25vw; } main#prints .prints-container .choose-size .prints-sizes { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 0.9vw; } main#prints .prints-container .choose-size .size { appearance: none; -webkit-appearance: none; text-align: left; box-sizing: border-box; width: 100%; min-width: 0; border: 0.075vw solid var(--jb-primary-brown-25); padding: 0.8vw; aspect-ratio: 4/5; display: flex; flex-direction: column; background: transparent; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; } main#prints .prints-container .choose-size .size > *:first-child { flex: 1; } main#prints .prints-container .choose-size .size[data-size-choice=s] { grid-column: 1/2; } main#prints .prints-container .choose-size .size[data-size-choice=m] { grid-column: 3/5; } main#prints .prints-container .choose-size .size[data-size-choice=l] { grid-column: 6/9; } main#prints .prints-container .choose-size .size p { font-size: 1.25vw; } main#prints .prints-container .choose-size .size:hover { opacity: 1; } main#prints .prints-container .choose-size .size.is-selected { background-color: var(--jb-primary-charcoal-25); border-color: var(--jb-primary-charcoal); } main#prints .prints-container .choose-frame, main#prints .prints-container .contact-details, main#prints .prints-container .additional-note, main#prints .prints-container .shipping, main#prints .prints-container .statement { display: flex; width: 100%; border-top: 0.075vw solid var(--jb-primary-brown-25); padding-top: 0.4vw; } main#prints .prints-container .choose-frame > *, main#prints .prints-container .contact-details > *, main#prints .prints-container .additional-note > *, main#prints .prints-container .shipping > *, main#prints .prints-container .statement > * { width: 50%; font-size: 1.5vw; } main#prints .prints-container .choose-frame .prints-frame { display: flex; flex-direction: column; row-gap: 0.6vw; } main#prints .prints-container .choose-frame .option { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; width: 100%; display: flex; align-items: center; gap: 0.7vw; text-align: left; cursor: pointer; color: inherit; } main#prints .prints-container .choose-frame .option .option-checkbox { width: 1rem; height: 1rem; border: 0.075vw solid currentColor; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } main#prints .prints-container .choose-frame .option .option-checkbox::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 180ms ease; } main#prints .prints-container .choose-frame .option.is-selected .option-checkbox { border-color: currentColor; } main#prints .prints-container .choose-frame .option.is-selected .option-checkbox::after { transform: scale(1); } main#prints .prints-container .contact-details, main#prints .prints-container .additional-note { margin: 0; } main#prints .prints-container .contact-details h3, main#prints .prints-container .additional-note h3 { margin: 0; } main#prints .prints-container .contact-details .contact-input-group, main#prints .prints-container .additional-note .contact-input-group { display: flex; flex-direction: column; gap: 0.55vw; } main#prints .prints-container .contact-details .contact-input-wrap, main#prints .prints-container .additional-note .contact-input-wrap { border-bottom: 0.075vw solid var(--jb-primary-brown-25); padding-bottom: 0.35vw; } main#prints .prints-container .contact-details .contact-input-wrap.required-field, main#prints .prints-container .additional-note .contact-input-wrap.required-field { display: flex; align-items: flex-end; gap: 0.2em; } main#prints .prints-container .contact-details input, main#prints .prints-container .contact-details textarea, main#prints .prints-container .additional-note input, main#prints .prints-container .additional-note textarea { width: 100%; border: 0; outline: none; background: transparent; padding: 0; margin: 0; font-size: 1.5vw; line-height: 114%; transform: translateY(0.18vw); } main#prints .prints-container .contact-details input::placeholder, main#prints .prints-container .contact-details textarea::placeholder, main#prints .prints-container .additional-note input::placeholder, main#prints .prints-container .additional-note textarea::placeholder { color: var(--jb-primary-brown-50); } main#prints .prints-container .contact-details textarea, main#prints .prints-container .additional-note textarea { resize: vertical; min-height: 4.5em; } main#prints .prints-container .contact-details .contact-required, main#prints .prints-container .additional-note .contact-required { flex: 0 0 auto; line-height: 1; } main#prints #prints-enquiry-form { width: 100%; } main#prints .submit-button { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: 0.9vw; margin-top: 6vw; } main#prints .submit-button .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } main#prints .submit-button .form-message { grid-column: 3/-3; min-height: 1.4em; margin: 0; } main#prints .submit-button .form-message.is-error { color: #7a2b2b; } main#prints .submit-button .form-message.is-success { color: #1f5a37; } main#prints .submit-button > button { grid-column: 3/-3; width: 100%; padding: var(--padding-submit-button); border: 0.075vw solid var(--jb-primary-brown-25); display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; } main#prints .submit-button > button:disabled { opacity: 0.6; cursor: wait; } main#prints .submit-button > button:hover { background-color: var(--jb-primary-charcoal-10); opacity: 1; } main#prints .prints-confirm-modal { border: 0.075vw solid var(--jb-primary-brown-25); padding: 1rem; width: min(92vw, 34rem); max-width: 34rem; background: var(--jb-off-white); color: inherit; z-index: 10020; } main#prints .prints-confirm-modal::backdrop { background: rgba(20, 20, 20, 0.45); } main#prints .prints-confirm-modal .modal-inner { display: flex; flex-direction: column; gap: 0.9rem; } main#prints .prints-confirm-modal h4 { margin: 0; } main#prints .prints-confirm-modal .modal-summary { margin: 0; white-space: pre-line; } main#prints .prints-confirm-modal .modal-actions { display: flex; gap: 0.7rem; } main#prints .prints-confirm-modal .modal-actions button { width: 100%; padding: 0.7rem; border: 0.075vw solid var(--jb-primary-brown-25); background: transparent; cursor: pointer; } main#prints .prints-confirm-modal .modal-actions button:hover { background-color: var(--jb-primary-charcoal-10); opacity: 1; } .grid .intro-container, .grid .home-curated .row { display: grid; grid-template-columns: repeat(16, 1fr); grid-gap: 0.9vw; grid-auto-flow: dense; } .grid .intro-container .introduction, .grid .home-curated .row .introduction { grid-column: 1/17; } .grid .intro-container .home-index, .grid .home-curated .row .home-index { grid-column: 13/17; } .grid .home-curated > :nth-child(10n+1 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+7 of .row:not(.link)) > [id^=hc] { grid-column: 9/17; } .grid .home-curated > :nth-child(10n+2 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+6 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+10 of .row:not(.link)) > [id^=hc] { grid-column: 1/7; } .grid .home-curated > :nth-child(10n+3 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+7 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+9 of .row:not(.link)) > [id^=hc] { grid-column: 6/12; } .grid .home-curated > :nth-child(10n+4 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+8 of .row:not(.link)) > [id^=hc] { grid-column: 1/9; } .grid .home-curated > :nth-child(10n+5 of .row:not(.link)) > [id^=hc], .grid .home-curated > :nth-child(10n+9 of .row:not(.link)) > [id^=hc] { grid-column: 11/17; } .grid .home-curated > :nth-child(10n+12 of .row:not(.link)) > [id^=hc] { grid-column: 4/14; } .grid #r1 { padding-top: 1vw; } .grid .link { text-align: center; } .grid .link div { grid-column: 2/16; } body { font-family: "Serif", "Times New Roman", Times, serif; background-color: var(--jb-primary); color: var(--jb-primary-brown); } body hr { border-top: 0.52vw solid var(--jb-primary-brown); } body hr.hr-mob { display: none; } body.home, body.people, body.portraits, body.projects, body.personal { background-color: var(--jb-grey-90); color: var(--jb-primary-charcoal); } body.home hr, body.people hr, body.portraits hr, body.projects hr, body.personal hr { border-top: 0.5vw solid var(--jb-primary-charcoal); } body.home hr.hr-mob, body.people hr.hr-mob, body.portraits hr.hr-mob, body.projects hr.hr-mob, body.personal hr.hr-mob { display: none; } body.home .footer-nav, body.people .footer-nav, body.portraits .footer-nav, body.projects .footer-nav, body.personal .footer-nav { border-bottom: 0.5vw solid var(--jb-primary-charcoal) !important; } body.prints { background-color: var(--jb-off-white-90); color: var(--jb-primary-charcoal); } body.projects hr.hr-top { margin-bottom: initial; } body.cs { background-color: var(--jb-off-white); color: var(--jb-primary-charcoal); } body .nav-btn { font-family: "Serif Ital", "Times New Roman", Times, serif; } body main a { cursor: alias; } body main#projects a { cursor: url("/assets/img/jb-default-charcoal.svg") 6 6, pointer; } @media (max-width: 720px) { html { font-size: 3.5vw; height: fill-available; height: -webkit-fill-available; } header { padding: 1.8vw 1.8vw 14vw 1.8vw; } header nav.nav { display: none !important; } header nav.mob-nav { opacity: 1; pointer-events: all; } header nav.mob-nav .mob-nav-menu { font-size: 12vw; position: absolute; display: flex; flex-direction: column; top: 0; left: 0; padding: 14.9vw 1.8vw 1.8vw 1.8vw; width: 100vw; min-height: 100vh; min-height: fill-available; min-height: -webkit-fill-available; transition: transform, opacity 0.5s cubic-bezier(0.5, 0.1, 0, 0.99); background-color: var(--jb-beige); z-index: 200; } header nav.mob-nav .mob-nav-menu li { display: flex; align-items: center; border-bottom: 0.375vw solid var(--jb-primary-brown); } header nav.mob-nav .mob-nav-menu a { padding: 1.2vw 0 1.2vw 0; display: block; width: 100%; } header nav.mob-nav .mob-nav-btn, header nav.mob-nav .mob-close-btn { position: fixed; top: 0; right: 0; padding: 1.8vw 1.8vw 14vw 30vw; } header nav.mob-nav .mob-nav-btn { z-index: 400; } header nav.mob-nav .mob-close-btn { z-index: 300; } header .logo-container-svg { z-index: 10; position: absolute; padding: 1.8vw 30vw 14vw 1.8vw; } header .logo-container-svg .logo-svg { width: 3.2vw; height: auto; } header .prints-menu { display: none; } .grid .home-curated .row [id^=hc] { grid-column: 1/17 !important; } .grid .link#r4 div, .grid .link#r8 div { grid-column: 1/17; } .page-heading-container { top: 1.8vw; display: none; } .mob-page-heading { display: block; padding: 19.4vw 1.8vw 1.8vw 1.8vw !important; font-size: 12vw; margin-top: -4vw; } body.home main, body.profile main, body.prints main { padding: 24vw 1.8vw 0 1.8vw !important; } body hr { border-top: 1.25vw solid var(--jb-primary-charcoal) !important; } body.profile hr { border-top: 1.25vw solid var(--jb-primary-brown) !important; } main { padding: 1.8vw 1.8vw 0 1.8vw !important; margin-bottom: 0; } main h1 { font-size: 8vw !important; line-height: 96%; } main h2 { font-size: 12vw !important; line-height: 96%; } main h3, main h3 p, main h3 p a { font-size: initial; font-size: 3.5vw; line-height: 109%; } main h4 { font-size: initial; font-size: 3.5vw; line-height: 118%; } main p, main li { font-size: initial; font-size: 3.5vw; line-height: 118%; } main .caption { opacity: 1 !important; font-size: 100%; } main .case-study-text .desc p, main .case-study-text .desc pre { font-size: 5.4vw; line-height: 114%; } main .case-study-text .credits { border-top: 0.375vw solid var(--jb-primary-brown-25); } main#projects h3, main#personal h3 { font-size: 5.4vw; } main#home { position: relative; } main#home .hcn, main#home .hcnR { opacity: 1; -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } main#home .v-line { display: none; } main#home .intro-container { padding-top: 1.8vw; margin-bottom: 14vw; position: static !important; } main#home .intro-container .introduction { grid-column: 1/17; padding-right: 0; } main#home .intro-container .home-index { display: none; } main#home .home-curated .row div#hc1, main#home .home-curated .row div#hc4, main#home .home-curated .row div#hc7 { margin-bottom: 14vw; } main#home .home-curated .row#r3, main#home .home-curated .row#r7 { margin-bottom: 21vw; } main#home .home-curated .row.link div { margin-top: 7vw; } main#home .home-curated .row:not(:last-child) { margin-bottom: 14vw; } main#home .home-curated .row.link { margin-bottom: 28vw; } main#home .footer-nav { border-bottom: 1.25vw solid var(--jb-primary-brown); padding-bottom: 1.2vw; margin-bottom: 1.8vw; } main#home .hcn, main#home .hcnR { font-size: 26vw; position: static !important; display: none; bottom: 1.5vw; z-index: 9999; pointer-events: none; transform: none !important; -webkit-transform: none !important; left: auto; right: auto; margin-left: 0; margin-top: 0; opacity: 1 !important; } main#home .hcn { left: 1.8vw; margin-left: -0.64vw; } main#home .hcnR { right: 1.8vw; margin-right: -0.2vw; } main#home .hcn[data-aos], main#home .hcnR[data-aos] { transform: none !important; -webkit-transform: none !important; } main#home .hc-mob { display: block; margin-bottom: 21vw; } main#home figcaption { padding-top: 1.2vw; } main#people { padding: 3vw 1.8vw 0 1.8vw; } main#people ul { grid-template-columns: 1fr 1fr; column-gap: 1.8vw; row-gap: 3vw; } main#people ul li { height: max-content; } main#people ul li figure figcaption { position: initial; padding: 1.2vw 0 0 0; opacity: 1; } main#people ul li figure figcaption h4 span { display: none; } main#projects ul li { border-bottom: 0.375vw solid var(--jb-primary-brown); } main#projects ul li a { padding: 4.4vw 0 3.5vw 0; } main#projects ul li a .name { grid-column: 1/15; } main#projects ul li a .desc { display: none; } main#projects ul li:first-of-type { padding-top: 0; } main#projects ul li:last-child { border-bottom: 0.375vw solid var(--jb-primary-brown); } main#personal { padding: 3vw 1.8vw 0 1.8vw; } main#personal ul { grid-template-columns: 1fr; row-gap: 3vw; } main#personal ul figure { box-shadow: inset 0px 0px 0px 0.375vw var(--jb-primary-brown-50); } main#people > ul, main#people .bio, main#personal > ul, main#personal .bio, main#profile > ul, main#profile .bio { padding-top: 1.8vw !important; } main#case-study { margin-top: 21vw; left: 0; display: flex; flex-direction: column; } main#case-study .hero { position: initial; min-height: initial; } main#case-study .hero .h-p, main#case-study .hero .h-l { width: 100%; cursor: default; margin: 0; } main#case-study .hero .scroll-indicator { display: none; } main#case-study .content { box-shadow: none; top: 0; padding: 2.4vw 0 0 0; } main#case-study .content .gallery { padding: 0 1.8vw 14vw 1.8vw; column-gap: 1.8vw; } main#case-study .content .gallery div { margin-bottom: 2.4vw; } main#case-study .content .gallery div:nth-last-child(3).tc ~ :nth-last-child(2).tc { margin-bottom: 2.4vw; } main#case-study .content .gallery div figure.l-xl, main#case-study .content .gallery div figure.p-xl, main#case-study .content .gallery div figure.l-l, main#case-study .content .gallery div figure.p-l, main#case-study .content .gallery div figure.l-m, main#case-study .content .gallery div figure.p-m, main#case-study .content .gallery div figure.l-s, main#case-study .content .gallery div figure.p-s { width: 100%; } main#case-study .content .gallery div.tc { width: calc(50% - 0.9vw); } main#case-study .content .gallery div.tc figure.l-xl, main#case-study .content .gallery div.tc figure.p-xl, main#case-study .content .gallery div.tc figure.l-l, main#case-study .content .gallery div.tc figure.p-l, main#case-study .content .gallery div.tc figure.l-m, main#case-study .content .gallery div.tc figure.p-m, main#case-study .content .gallery div.tc figure.l-s, main#case-study .content .gallery div.tc figure.p-s { width: 100%; } main#case-study .content .case-study-text { padding: 0 1.8vw 0 1.8vw; } main#case-study .content .case-study-text hr { margin: 0 0 2.4vw 0; border-top: 1.25vw solid var(--jb-primary-charcoal); } main#case-study .content .case-study-text .credits { padding-top: 1.2vw; } :has(#case-study) footer { padding-bottom: 14vw !important; } main#profile { font-size: initial; } main#profile div:not(:last-child) { margin-bottom: 14vw; } main#profile .bio h3, main#profile .bio h3 p, main#profile .bio h3 p a { font-size: 5.4vw !important; } main#profile .pp img { width: 100%; } main#profile .clients, main#profile .site-credit, main#profile .testimonials { row-gap: 0; border-top: 0.375vw solid var(--jb-primary-brown); padding-top: 1.2vw; } main#profile .clients .c-heading, main#profile .clients .sc-heading, main#profile .clients .t-heading, main#profile .site-credit .c-heading, main#profile .site-credit .sc-heading, main#profile .site-credit .t-heading, main#profile .testimonials .c-heading, main#profile .testimonials .sc-heading, main#profile .testimonials .t-heading { grid-column: 1/17; margin-bottom: 3vw; } main#profile .clients .c-list-a, main#profile .clients .c-list-b, main#profile .clients .c-list-c, main#profile .clients .sc-list, main#profile .clients .t-list, main#profile .site-credit .c-list-a, main#profile .site-credit .c-list-b, main#profile .site-credit .c-list-c, main#profile .site-credit .sc-list, main#profile .site-credit .t-list, main#profile .testimonials .c-list-a, main#profile .testimonials .c-list-b, main#profile .testimonials .c-list-c, main#profile .testimonials .sc-list, main#profile .testimonials .t-list { grid-column: 1/17; margin-bottom: 0; } main#profile .clients .t-list, main#profile .site-credit .t-list, main#profile .testimonials .t-list { grid-template-columns: 1fr; gap: 0; padding-right: 0; } main#profile .clients .t-list .t-description, main#profile .site-credit .t-list .t-description, main#profile .testimonials .t-list .t-description { font-size: 2.4vw; margin-left: 3.2vw; } main#profile .clients li, main#profile .clients h4, main#profile .site-credit li, main#profile .site-credit h4, main#profile .testimonials li, main#profile .testimonials h4 { font-size: 3.5vw !important; } footer { display: flex !important; flex-direction: column !important; padding: 1.8vw 1.8vw 1.8vw 1.8vw; line-height: 118%; } footer .to-top { margin: 14vw 0; } footer .contact { margin-bottom: 3.5vw; } hr { border-top: 1.25vw solid var(--jb-primary-brown) !important; } hr.hr-mob { display: block; border-top: 0.375vw solid var(--jb-primary-brown) !important; width: calc(100% - 1.8vw - 1.8vw); margin: 14vw auto 0 auto; } .page-navigation { padding: 1.8vw 1.8vw 0 1.8vw !important; align-items: flex-end; height: calc(100% - 3.6vw); } .page-navigation .page-navigation-prev a, .page-navigation .page-navigation-next a { padding: 0.8vw 1.2vw; border-radius: 0.8vw; background-color: var(--jb-off-white-90); } .not { display: none; } } @media (max-width: 430px) { html { font-size: 3.5vw; } header { padding: 4.4vw 1.8vw 14vw 1.8vw; } header nav.mob-nav .mob-nav-btn, header nav.mob-nav .mob-close-btn { padding: 4.4vw 1.8vw 14vw 30vw; } header nav.mob-nav .mob-nav-menu { padding: 19.4vw 1.8vw 1.8vw 1.8vw; } header .logo-container-svg { padding: 4.4vw 30vw 14vw 1.8vw; } header .logo-container-svg .logo-svg { width: 4vw; } main h3 { font-size: 3.5vw; } main h4 { font-size: 3.5vw; } main p, main li { font-size: 3.5vw; } main#profile .clients li, main#profile .clients h4, main#profile .site-credit li, main#profile .site-credit h4, main#profile .testimonials li, main#profile .testimonials h4 { font-size: 3.5vw !important; } footer { padding: 1.8vw 1.8vw 4.4vw 1.8vw; } footer .contact, footer .address-container .address { font-size: 3.5vw !important; } } main#home .hcn, main#home .hcnR { -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } #hc1 a:hover .hcn, #hc2 a:hover .hcn, #hc3 a:hover .hcn, #hc4 a:hover .hcnR, #hc5 a:hover .hcnR, #hc6 a:hover .hcnR, #hc7 a:hover .hcn, #hc8 a:hover .hcn, #hc9 a:hover .hcnR, #hc10 a:hover .hcn { opacity: 1; }