@charset "UTF-8"; :root { --lfkk-primary-A: #EEC16A; --lfkk-primary-B: #E8E3DC; --lfkk-primary-B-lop: color-mix(in srgb, var(--lfkk-primary-B) 30%, var(--lfkk-primary-D)); --lfkk-primary-B-lop: #E8E3DC4D; --lfkk-primary-C: #D1CBBE; --lfkk-primary-D: #271106; --lfkk-primary-D-lop: color-mix(in srgb, var(--lfkk-primary-D) 30%, transparent); --lfkk-primary-D-lop: #2711064D; --lfkk-secondary-A: #FFFFFF; --lfkk-secondary-A-lop: color-mix(in srgb, var(--lfkk-secondary-A) 30%, transparent); --lfkk-secondary-A-lop: #FFFFFF4D; --lfkk-secondary-A-hop: color-mix(in srgb, var(--lfkk-secondary-A) 70%, transparent); --lfkk-secondary-A-hop: #FFFFFFB3; --lfkk-secondary-B: #CC0000; --lfkk-secondary-C: #FEE70D; --lfkk-secondary-D: #0F0F0F; --keyline: .175rem; --keyline-underline: .125rem; --keyline-thin: .075rem; --keyline-top: .125rem; --keyline-logo: var(--keyline-thin); --drop-shadow: drop-shadow(0 0 1rem var(--lfkk-primary-D)); --translateX: 0; --translateY: 0; --rotateY: 0; --rotateZ: 0; } /*** 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; } @font-face { font-family: "Work Sans Variable"; src: url(/assets/fonts/WorkSans-VariableFont_wght.ttf) format("truetype-variations"); font-weight: 300 450; } @font-face { font-family: "Work Sans"; src: url(/assets/fonts/WorkSans-Regular.ttf); } @font-face { font-family: "Herbik"; src: url(/assets/fonts/HerbikUnlicensedTrial-Regular.ttf); } @font-face { font-family: "Herbik Italic"; src: url(/assets/fonts/HerbikUnlicensedTrial-Italic.ttf); } body { font-size: 100%; font-family: "Work Sans Variable", "Work Sans", sans-serif; font-feature-settings: "rlig" 1, "kern" 1, "rclt" 1, "calt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "ss06" 1, "liga" 1, "onum" 1, "rvrn" 1; font-variation-settings: "wght" 420; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 1600px) { body { font-size: 1.25rem; } } @media (max-width: 960px) { body { font-size: 100%; } } @media (max-width: 540px) { body { font-size: 1.4rem; } } h1, nav[role=slide] { font-size: 4.75rem; line-height: 102%; letter-spacing: -0.065rem; font-variation-settings: "wght" 350; text-wrap: balance; } @media (max-width: 540px) { h1, nav[role=slide] { font-size: 3.3rem; line-height: 102%; letter-spacing: -0.065rem; font-variation-settings: "wght" 370; } } h2, .links a, li::after { font-size: 2.75rem; line-height: 118%; letter-spacing: -0.05rem; } @media (max-width: 540px) { h2, .links a, li::after { font-size: 2.2rem; line-height: 129%; letter-spacing: -0.05rem; } } h3, #nav_trigger, .content { font-size: 1.75rem; line-height: 115%; letter-spacing: -0.02rem; } @media (max-width: 540px) { h3, #nav_trigger, .content { font-size: 1.75rem; line-height: 122%; letter-spacing: -0.02rem; } } .logo { font-size: 7.5rem; line-height: 102%; letter-spacing: -0.0375rem; } @media (max-width: 540px) { table tbody tr td { font-size: 1.75rem; line-height: 122%; } } @media (max-width: 540px) { #nav a { font-size: 4.75rem; line-height: 102%; } } #aoc_hover h3, #aoc_hover::after { font-size: 1.425rem; line-height: 122%; } @media (max-width: 960px) { #aoc_hover h3, #aoc_hover::after { font-size: 1.25rem; line-height: 122%; } } @media (max-width: 540px) { #aoc_hover h3, #aoc_hover::after { font-size: 1.375rem; line-height: 122%; } } .links a { line-height: 102%; } @media (max-width: 540px) { .title h2, .heading h2, .links a { font-size: 2.75rem; line-height: 102%; font-variation-settings: "wght" 370; } } li a::after { font-variation-settings: "wght" 350; } @media (max-width: 540px) { li a::after { font-size: 2.75rem; line-height: 102%; font-variation-settings: "wght" 320; } } .title button { font-variation-settings: "wght" 270; } .sc, .year { font-variant-caps: all-small-caps; font-size: 107%; font-variation-settings: "wght" 390; } #nav .site-credit h3, #nav .site-credit h3 a { font-size: 1.25rem; font-variation-settings: "wght" 420; } @media (max-width: 1600px) { #nav .site-credit h3, #nav .site-credit h3 a { font-size: 1.25rem; } } @media (max-width: 540px) { #nav .site-credit h3, #nav .site-credit h3 a { font-size: 1.4rem; } } @keyframes floating { from { transform: translate(0, 0); } 65% { transform: translate(0, 1rem); } to { transform: translate(0, 0); } } #progress { position: fixed; width: 100%; height: auto; top: 0; left: 0; transition: all 0.25s ease; overflow: hidden; z-index: 300; } #progress #bar { width: 0%; height: var(--keyline-top); background-color: var(--lfkk-secondary-C); transition: all 0.25s ease; } #progress.loaded { opacity: 0; } #preloader { position: relative; width: 100%; height: 100%; max-height: 100vw; z-index: 250; } @media (max-width: 540px) { #preloader { position: fixed; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background-color: var(--lfkk-secondary-D); } #preloader.hide { display: none; } } #preloader .logo, #preloader .aoc, #preloader .gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--lfkk-primary-B); padding: 1rem; transition: opacity 0.25s ease-out; } #preloader .logo.hide, #preloader .aoc.hide, #preloader .gallery.hide { opacity: 0; pointer-events: none; } @media (max-width: 540px) { #preloader .logo, #preloader .aoc, #preloader .gallery { position: relative; height: initial; pointer-events: none; } } #preloader .logo { z-index: 93; background-color: var(--lfkk-secondary-D); } #preloader .logo img { width: 14rem; } @media (max-width: 540px) { #preloader .logo { background-color: initial; } #preloader .logo img { width: 12rem; } #preloader .logo.hide { opacity: 1; pointer-events: initial; } } @media (max-width: 540px) and (max-height: 125vw) { #preloader .logo { display: none; } } #preloader .aoc #aoc_hover { z-index: 92; padding: 0 9rem; display: flex; flex-direction: column; gap: 1rem; text-shadow: var(--lfkk-secondary-D) 1rem 0 2rem; cursor: pointer; } @media (min-width: 1601px) { #preloader .aoc #aoc_hover { padding: 0 28rem; } } @media (max-width: 960px) { #preloader .aoc #aoc_hover { padding: 0 5rem; } } @media (max-width: 540px) { #preloader .aoc #aoc_hover { text-align: center; } } #preloader .aoc #aoc_hover::after { content: "↓"; text-align: center; animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } #preloader .aoc #aoc_hover:hover ~ #aoc_backdrop { opacity: 1; } @media (max-width: 540px) { #preloader .aoc #aoc_hover { padding: 0 0.25rem; } } #preloader .aoc #aoc_backdrop { z-index: 91; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.25s ease-out; pointer-events: none; backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem); } #preloader .aoc #aoc_backdrop.hide { opacity: 0; } #preloader .gallery { z-index: 90; background-color: var(--lfkk-secondary-D); padding: 0; overflow: scroll; display: flex; justify-content: center; align-items: center; overflow: hidden; } @media (max-width: 540px) { #preloader .gallery { display: none; } } #preloader .gallery .inner { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 -20vh; gap: 20vh; justify-content: space-around; visibility: visible; opacity: 0.5; } #preloader .gallery .inner img { height: 25vw; width: 25vw; object-fit: cover; border-radius: 1rem; transform: translate3d(calc(var(--translateX) + 1.5rem), calc(var(--translateY) + 0.75rem), 0) rotate3d(1, 1, 1, var(--rotateY)) rotateZ(calc(var(--rotateZ) + 0.25deg)); transition: transform 0.5s ease-out; } html { font-size: 1.15vw; scroll-behavior: smooth; } @media (min-width: 1601px) { html { font-size: 0.8vw; } } @media (max-width: 960px) { html { font-size: 1.8vw; } } @media (max-width: 540px) { html { font-size: 2.8vw; } } body { margin: 0 auto; } header, main, footer { width: 100%; overflow-x: hidden; max-width: 100%; } img { object-fit: cover; } h2 a, .content a:not(.content .links a) { text-decoration: underline dotted; -webkit-text-decoration: underline dotted; } h2 a:hover, .content a:not(.content .links a):hover { background-color: var(--lfkk-primary-A); } @media (max-width: 540px) { h2 a, .content a:not(.content .links a) { background-color: var(--lfkk-primary-A); } } h2 a { text-decoration-thickness: var(--keyline-underline) !important; -webkit-text-decoration-thickness: var(--keyline-underline) !important; text-underline-offset: calc(var(--keyline-underline) * 4) !important; -webkit-text-underline-offset: calc(var(--keyline-underline) * 4) !important; } .content a:not(.content .links a) { text-decoration-thickness: var(--keyline-underline) !important; -webkit-text-decoration-thickness: var(--keyline-underline) !important; text-underline-offset: calc(var(--keyline-underline) * 3) !important; -webkit-text-underline-offset: calc(var(--keyline-underline) * 3) !important; } main, footer { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: 1rem; row-gap: 6rem; } @media (max-width: 540px) { main, footer { row-gap: 4.5rem; } } main .intro, footer .intro { grid-column: 1/17; } main .content, footer .content { grid-column: 5/17; display: flex; flex-wrap: wrap; row-gap: 1.5rem; } main .aoc_container, footer .aoc_container { grid-column: 1/9; display: flex; column-gap: 1rem; order: 1; } main .aoc_container .aoc, footer .aoc_container .aoc { width: 100%; } main .footer_nav, footer .footer_nav { grid-column: 9/13; order: 2; } main .footer_socials, footer .footer_socials { grid-column: 13/17; order: 3; } main .abn, footer .abn { grid-column: 13/17; order: 4; } main .copyright, footer .copyright { grid-column: 1/9; order: 4; } @media (max-width: 540px) { main .intro, footer .intro { grid-column: 1/7; } main .content, footer .content { grid-column: 2/7; } main .aoc_container, footer .aoc_container { grid-column: 1/13; order: 3; } main .footer_nav, footer .footer_nav { grid-column: 1/7; order: 1; } main .footer_socials, footer .footer_socials { grid-column: 7/13; order: 2; } main .abn, footer .abn { grid-column: 7/13; } main .copyright, footer .copyright { grid-column: 1/7; } } @media (max-width: 540px) { main { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 540px) { footer { grid-template-columns: repeat(12, 1fr); } } .content .row { width: 100%; } .content .row .blocks { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1rem; row-gap: 2rem; } .content .row .blocks p:first-child { grid-column: 1/13; } .content .row .blocks p { grid-column: 5/13; } .content .row .blocks h4, .content .row .blocks figure, .content .row .blocks .images { grid-column: 1/5; } .content .row .blocks figure:not(:first-child), .content .row .blocks .images:not(:first-child) { grid-column: 5/13; } .content .row .blocks ul { grid-column: 5/13; } .content .row .blocks table { grid-column: 2/13; } .content .row .blocks table tbody tr { display: grid; grid-template-columns: repeat(11, 1fr); column-gap: 1rem; } .content .row .blocks table tbody tr .name { grid-column: 1/5; order: 1; } .content .row .blocks table tbody tr .role { grid-column: 5/10; order: 3; } .content .row .blocks table tbody tr .year { grid-column: 10/12; order: 4; } @media (max-width: 540px) { .content .row .blocks p:first-child { grid-column: 1/13; } .content .row .blocks p:first-child ~ h4 { grid-column: 1/13; } .content .row .blocks p, .content .row .blocks h4, .content .row .blocks ul { grid-column: 2/13; } .content .row .blocks figure, .content .row .blocks figure:not(:first-child) { grid-column: 2/13; } .content .row .blocks .images, .content .row .blocks .images:not(:first-child) { grid-column: 2/13; } .content .row .blocks table tbody tr { row-gap: 0.25rem; } .content .row .blocks table tbody tr .name, .content .row .blocks table tbody tr .role { grid-column: 1/9; } .content .row .blocks table tbody tr .year { grid-column: 9/12; order: 2; } } #nav_container { position: fixed; width: 100%; height: 100%; top: 0; right: 0; z-index: 350; pointer-events: none; } #nav_container nav[role=slide] { position: absolute; height: 100%; width: 100%; top: 0; left: 0; pointer-events: all; filter: var(--drop-shadow); transition: transform 0.5s ease; } #nav_container nav[role=slide]:not(.open) { transform: translateX(calc(100% + 3rem)); transition: none; } #nav_container nav[role=slide] .container { position: absolute; height: 100%; width: 50%; top: 0; right: 0; color: var(--lfkk-primary-B); background-color: var(--lfkk-primary-D); display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 540px) { #nav_container nav[role=slide] .container { width: 100%; } } #nav_container nav[role=slide] .container div { display: flex; flex-direction: column; padding: 1rem; } @media (max-width: 540px) { #nav_container nav[role=slide] .container div { padding: 2rem 1rem; } } #nav_container nav[role=slide] .container div a:hover, #nav_container nav[role=slide] .container div a.active { color: var(--lfkk-secondary-C); } #nav_container nav[role=slide] .container div:hover a { color: var(--lfkk-primary-B-lop); } #nav_container nav[role=slide] .container div:hover a:hover { color: var(--lfkk-primary-B); } #nav_container nav[role=slide] .container div:hover a.active { color: var(--lfkk-secondary-C); } #nav_container nav[role=slide] .container .site-credit { color: var(--lfkk-primary-B-lop); } #nav_container nav[role=slide] .container .site-credit:hover { color: var(--lfkk-primary-B-lop); } #nav_container nav[role=slide] .container .site-credit h3 a:hover { color: var(--lfkk-primary-B); } #nav_container #backdrop { width: 100%; height: 100%; opacity: 1; transition: opacity 0.5s ease; backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } #nav_container #backdrop:not(.open) { opacity: 0; } header { padding: 1rem 1rem 0 1rem; position: relative; z-index: 150; } @media (max-width: 540px) { header { padding: 2rem 1rem 0 1rem; } } header .inner { display: flex; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 1.88rem; margin: 0 auto; } header .inner .logo { width: 10.5rem; padding: 0.075rem 0.175rem 0 0.175rem; } header .inner .logo a { width: 100%; height: 100%; } header .inner .logo a svg { outline: solid var(--keyline-logo) var(--lfkk-primary-D-lop); border-radius: 100%; width: 100%; height: auto; } header .inner #nav_trigger { position: fixed; top: 0; right: 0; margin: 1rem; padding: 0.35rem 0.8rem; width: initial; height: min-content; border-radius: 10rem; color: var(--lfkk-primary-D); outline: solid var(--keyline-thin) var(--lfkk-primary-D-lop); cursor: pointer; background-color: var(--lfkk-secondary-A-hop); backdrop-filter: blur(0.15rem); -webkit-backdrop-filter: blur(0.15rem); } @media (max-width: 540px) { header .inner #nav_trigger { margin: 2rem 1rem; } } header .inner #nav_trigger button { cursor: pointer; } header .inner #nav_trigger:hover { background-color: var(--lfkk-primary-D); color: var(--lfkk-primary-B); outline: none; transition: 0.25s ease; } @media (max-width: 540px) { header .inner #nav_trigger:hover { background-color: var(--lfkk-secondary-A-hop); color: var(--lfkk-primary-D); outline: solid var(--keyline-thin) var(--lfkk-primary-D-lop); } } header hr { border-bottom: dotted var(--keyline) var(--lfkk-primary-D); } main { padding: 1rem 1rem 6rem 1rem; filter: var(--drop-shadow); position: relative; z-index: 10; } @media (max-width: 960px) { main { filter: none; } } main .intro h1 { padding-bottom: 1rem; border-bottom: dotted var(--keyline) var(--lfkk-primary-D); margin-bottom: 1rem; margin-left: -0.2rem; } main .content { padding-left: 1rem; margin-left: -1rem; border-left: dotted var(--keyline) var(--lfkk-primary-D-lop); padding-bottom: 6rem; height: min-content; } main .content .images { outline: solid var(--keyline-thin) var(--lfkk-primary-D); border-radius: 1rem; overflow: hidden; margin-bottom: 0.5rem; aspect-ratio: 3/2; transition: margin 0.5s ease; isolation: isolate; width: 100%; height: 100%; } main .content .images .splide, main .content .images .splide__track { width: 100%; height: 100%; } main .content .images img { object-position: top; width: 100%; height: 100%; } main .content .images:hover { box-shadow: 0 0 4rem 0px var(--lfkk-secondary-A-lop); } main .content .images[data-ratio="4/3"] { aspect-ratio: 4/3; } main .content .images[data-ratio="4/3"] img { width: 100%; height: 100%; } main .content .images[data-ratio="4/5"] { aspect-ratio: 4/5; } main .content .images[data-ratio="4/5"] img { width: 100%; height: 100%; } main .content .links { width: 100%; display: flex; justify-content: space-around; column-gap: 1rem; } main .content .links li { width: 100%; border-top: dotted var(--keyline) var(--lfkk-primary-D); border-bottom: dotted var(--keyline) var(--lfkk-primary-D); transition: padding 0.5s ease, border-top 0.5s ease, border-bottom 0.5s ease; } main .content .links li a { width: 100%; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; } main .content .links li a:hover::after { content: "→"; transform: translateY(-1.475rem); height: 0; } main .content .links li a:hover { color: var(--lfkk-primary-D) !important; } main .content .links li:hover { padding-right: 1rem; border-top: dotted var(--keyline) var(--lfkk-primary-D) !important; border-bottom: dotted var(--keyline) var(--lfkk-primary-D) !important; } main .content .links:hover li { border-top: dotted var(--keyline) var(--lfkk-primary-D-lop); border-bottom: dotted var(--keyline) var(--lfkk-primary-D-lop); } main .content .links:hover li a { color: var(--lfkk-primary-D-lop); } @media (max-width: 540px) { main { padding: 1rem 1rem 4.5rem 1rem; } main .intro h1 { padding-bottom: 1.25rem; padding-top: 0.25rem; } main .content { padding-bottom: 4.5rem; } main .content .images { aspect-ratio: 6/7; } main .content .links { flex-direction: column; } main .content .links li:first-child { border-top: dotted var(--keyline) var(--lfkk-primary-D) !important; border-bottom: initial !important; } main .content .links li:not(:first-child) { border-top: dotted var(--keyline) var(--lfkk-primary-D) !important; border-bottom: dotted var(--keyline) var(--lfkk-primary-D) !important; } main .content .links li a::after { content: "→"; transform: translateY(-1.5rem); height: 0; } main .content .links li a:hover::after { transform: translateY(-1.5rem); } main .content .links:hover li { border-top: dotted var(--keyline) var(--lfkk-primary-D); border-bottom: dotted var(--keyline) var(--lfkk-primary-D); } main .content .links:hover li a { color: var(--lfkk-primary-D); } } footer { background-color: var(--lfkk-primary-D); color: var(--lfkk-primary-B); row-gap: 9rem; padding: 1rem; position: sticky; bottom: 0; z-index: 1; } @media (max-width: 960px) { footer { position: relative; } } @media (max-width: 540px) { footer { padding: 1rem 1rem 2rem 1rem; position: relative; row-gap: 6rem; } } footer .aoc_container .flag { display: flex; flex-direction: column; row-gap: 0.5rem; width: 7.5rem; } footer .aoc_container .flag img { padding-right: 1.5rem; } footer .aoc_container .aoc { display: flex; flex-direction: column; padding-right: 1rem; } footer .aoc_container .aoc button { display: none; } footer .aoc_container .aoc span { display: initial; } @media (min-width: 1601px) { footer .aoc_container .aoc { padding-right: 15rem; } } footer .aoc_container, footer .footer_nav, footer .footer_socials { padding-top: 0.5rem; border-top: dotted var(--keyline) var(--lfkk-primary-B-lop); } footer .footer_nav, footer .footer_socials { display: flex; flex-direction: column; } footer .footer_socials a:hover::after { content: "↗"; padding-left: 0.25rem; position: absolute; } footer .copyright, footer .abn { color: var(--lfkk-primary-B-lop); } footer a:hover { color: var(--lfkk-secondary-C); } @media (max-width: 960px) { footer .aoc_container .aoc { padding-right: 2rem; } } @media (max-width: 540px) { footer .aoc_container .aoc button { display: none; } footer .aoc_container .aoc span { display: initial; } footer .copyright span { display: none; } footer .copyright::before { content: "© LFKK Inc. ’23"; display: block; } } body.home { background-color: var(--lfkk-primary-D); color: var(--lfkk-primary-D); } @media (max-width: 540px) { body.home { background-color: var(--lfkk-primary-A); } body.home.pre { background-color: var(--lfkk-secondary-D); height: 100%; overflow: hidden; } } body.home header, body.home main { background-color: var(--lfkk-primary-A); } body.home header .inner .logo, body.home main .inner .logo { width: 22rem; } body.home header .inner .logo svg, body.home main .inner .logo svg { outline: none; box-shadow: none; border-radius: initial; } body.home header .inner .logo svg:hover, body.home main .inner .logo svg:hover { fill: var(--lfkk-secondary-A-hop); } @media (max-width: 540px) { body.home header .inner .logo svg:hover, body.home main .inner .logo svg:hover { fill: initial; } } @media (max-width: 960px) { body.home header .intro h2, body.home main .intro h2 { padding-right: 2rem; } } body.about { background-color: var(--lfkk-primary-D); } @media (max-width: 540px) { body.about { background-color: var(--lfkk-primary-B); } } body.about header, body.about main { background-color: var(--lfkk-primary-B); } body.about main .content { row-gap: 0; } body.about main .content div .title { padding-bottom: 1.5rem; display: flex; justify-content: space-between; cursor: pointer; } body.about main .content div .title button { cursor: pointer; } @media (max-width: 540px) { body.about main .content div .title button { display: none; } } body.about main .content div .title button:not(.open) { color: var(--lfkk-primary-D-lop); transform: rotate(45deg); } body.about main .content div:not(:first-child) .title { border-top: dotted var(--keyline) var(--lfkk-primary-D-lop); padding: 1.5rem 0; } body.about main .content div:not(:last-child) .blocks { margin-bottom: 3rem; } body.about main .content div .blocks { transition: opacity 1.5s ease; } body.about main .content div .blocks figure { aspect-ratio: 4/3; } body.about main .content div .blocks figure:first-child { margin-right: 4rem; } @media (max-width: 960px) { body.about main .content div .blocks figure:first-child { margin-right: 2rem; } } @media (max-width: 540px) { body.about main .content div .blocks figure:first-child { margin-right: 0; } } body.about main .content div .blocks figure img { outline: solid var(--keyline-thin) var(--lfkk-primary-D); border-radius: 1rem; overflow: hidden; width: 100%; height: 100%; } body.about main .content div .blocks figure[data-ratio="4/5"] { aspect-ratio: 4/5; } body.about main .content div .blocks figure[data-ratio="4/5"] img { width: 100%; height: 100%; } body.about main .content div .blocks .images { width: auto; height: auto; } body.about main .content div .blocks .images:first-child { margin-right: 4rem; } @media (max-width: 960px) { body.about main .content div .blocks .images:first-child { margin-right: 2rem; } } @media (max-width: 540px) { body.about main .content div .blocks .images:first-child { margin-right: 0; } } body.about main .content div .blocks .images img { object-fit: cover; width: 100%; height: auto; } body.about main .content div .blocks ul { list-style-type: circle; padding-left: 2rem; } body.about main .content div .blocks ul li:not(:last-child, [role=presentation]) { margin-bottom: 0.75rem; } body.about main .content div .blocks table tbody tr { font-variant-numeric: tabular-nums; padding: 1rem 0; } body.about main .content div .blocks table tbody tr:not(:first-child) { border-top: dotted var(--keyline) var(--lfkk-primary-D-lop); } body.about main .content div .blocks table tbody tr .year::after { content: "–"; } body.about main .content div .blocks.collapsed { opacity: 0; height: 0; margin-bottom: 0; pointer-events: none; overflow: hidden; transition: opacity 0.5s ease; } @media (max-width: 540px) { body.about main .content div .blocks { padding-right: 0; } body.about main .content div .blocks.collapsed { opacity: initial; height: initial; margin-bottom: 4.5rem; pointer-events: initial; overflow: initial; transition: initial; } } body.donate { background-color: var(--lfkk-primary-D); } @media (max-width: 540px) { body.donate { background-color: var(--lfkk-primary-B); } } body.donate header, body.donate main { background-color: var(--lfkk-primary-B); } body.donate .content .pay { margin-bottom: 0.75rem; } body.donate .content .pay h2 { padding-bottom: 1.5rem; } body.donate .content .pay p:not(:first-of-type) { padding-top: 1.5rem; } body.contact { background-color: var(--lfkk-primary-D); } @media (max-width: 540px) { body.contact { background-color: var(--lfkk-primary-B); } } body.contact header, body.contact main { background-color: var(--lfkk-primary-B); } body.error { background-color: var(--lfkk-primary-D); } @media (max-width: 540px) { body.error { background-color: var(--lfkk-primary-B); } } body.error header, body.error main { background-color: var(--lfkk-primary-B); } /* Safari 11+ */ @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) and (stroke-color: transparent) { body header .inner .logo a svg { outline: none !important; box-shadow: 0 0 0 var(--keyline-thin) var(--lfkk-primary-D-lop) !important; } body header .inner #nav_trigger { outline: none !important; box-shadow: 0 0 0 var(--keyline-thin) var(--lfkk-primary-D-lop); } body main .content .images { outline: none !important; box-shadow: 0 0 0 var(--keyline-thin) var(--lfkk-primary-D); } body header, body main, body footer { -webkit-transform: translate3d(0, 0, 0); } body.home header .inner .logo a svg { outline: none !important; box-shadow: none !important; } body.about main .content div .blocks figure img { outline: none !important; box-shadow: 0 0 0 var(--keyline-thin) var(--lfkk-primary-D); } header .inner #nav_trigger { position: absolute !important; } } } /*# sourceMappingURL=style.css.map */