/*!***************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./scss/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 { --baseline: 0.7vw; --core: calc(var(--baseline) * 3); --line: calc(var(--baseline) / 7.2); --page-margin-tb: calc(var(--core) * 0.8); --page-margin-sides: calc(var(--core) * 1.6); --margin-tb: calc(var(--core) * 0.4); --margin-sides: calc(var(--core) * 1.6); --gutter-column: calc(var(--core)); --gutter-row: calc(var(--core) * 0.8); --gutter-nav: calc(var(--core) * 0.2); --gutter-close: calc(var(--core) * 0.6); --gutter-footer: calc(var(--core) * 0.2); --padding-button: calc(var(--core) * 0.2) calc(var(--core) * 0.4); --padding-thumb: calc(var(--core) * 1.2) calc(var(--core) * 1.6); --padding-arrow: calc(var(--core) * 0.4); --padding-list: calc(var(--core) * 2.4); --space-below-sml: calc(var(--core) * 0.4); --space-below-big: calc(var(--core) * 0.8); --text-lg: calc(var(--core) * 1.04); --text-reg: calc(var(--core)); --text-sml: calc(var(--core) / 1.24); --mgm-grey: hsl(43, 5%, 30%); --mgm-yellow: hsl(48, 99%, 37%); --mgm-brown: hsl(28, 66%, 23%); --mgm-blue: hsl(209, 64%, 36%); --mgm-green: hsl(84, 41%, 26%); --mgm-black: hsl(0, 0%, 0%); --mgm-white: hsl(60, 7%, 88%); --mgm-theme-primary: var(--mgm-grey); --mgm-theme-secondary: color-mix(in hsl, var(--mgm-theme-primary) 90%, var(--mgm-black) 10%); --mgm-overlay: color-mix(in hsl, var(--mgm-theme-secondary), transparent 30%); --mgm-overlay-disclaimer: color-mix(in hsl, var(--mgm-theme-secondary), transparent 90%); --mgm-highlight: #5083c3; --mgm-highlight: var(--mgm-black); --mgm-fallback: color-mix(in hsl, var(--mgm-theme-primary) 8%, var(--mgm-black) 0%); --mgm-background: var(--mgm-theme-primary); --mgm-hover: var(--mgm-theme-secondary); --mgm-text: var(--mgm-white); --mgm-border: color-mix(in hsl, var(--mgm-theme-primary) 8%, var(--mgm-white) 30%); --mgm-round-corners: calc(var(--core) / 2); --img-opacity: 0.5; --underline: var(--line) dotted; --underline-solid: var(--line) solid; --underline-transparent: var(--line) solid transparent; --outline: var(--line) dotted; --outline-active: var(--line) solid; --outline: 0 0 0 var(--line) var(--mgm-border); --outline-active: 0 0 0 var(--line) var(--mgm-text); --blur: blur(2rem); } @media (max-width: 888px) { :root { --baseline: 2.55vw; --core: calc(var(--baseline) * 2); --line: calc(var(--baseline) / 14.4); } } @media (min-width: 1600px) { :root { --baseline: 10px; } } @media (max-width: 888px) { :root { --margin-tb: calc(var(--core) * 1.2); --margin-sides: calc(var(--core) * 1.2); --padding-thumb: calc(var(--core) * 0.8); --gutter-row: calc(var(--core) * 1.6); --gutter-nav: calc(var(--core) * 0.4); } :root main { --gutter-row: calc(var(--core) * 0.4); } :root main h2 { margin-bottom: calc(var(--core) * 0.4); } } @media (max-width: 888px) { :root { --text-sml: calc(var(--core) / 1.16); } } @font-face { font-family: "Sans A"; src: url(../fonts/58d9a9925dfddc49e4d8.woff) format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Serif A"; src: url(../fonts/8fb0463a24da67238a5a.woff) format("woff"); font-weight: 500; font-style: normal; } @font-face { font-family: "Serif B"; src: url(../fonts/0080865e24fbcbba0d2f.woff) format("woff"); font-weight: 500; font-style: normal; } * { text-transform: lowercase; } .lightbox-aoc .content { text-transform: initial; } body { font-family: "Sans A", Arial, Helvetica, sans-serif; font-size: var(--text-reg); letter-spacing: 0.00125em; line-height: 108%; } .transcript, .logo h2, .logo h3, .title h2 { font-family: "Serif A", monospace, serif; } .logo, header .title { font-size: var(--text-lg); line-height: 108%; } .gallery figcaption, footer { font-family: "Serif A", monospace, serif; } footer .footer-top, footer .footer-links, footer .footer-year { font-family: "serif b"; align-items: flex-end; letter-spacing: 0.0125em; } header nav { font-family: "serif b"; letter-spacing: 0.025em; } .gallery figcaption, footer { font-size: var(--text-sml); line-height: 120%; } @media (max-width: 888px) { .gallery figcaption, footer { line-height: 108%; } } a, button { line-height: 108%; } html { scroll-behavior: smooth; } body { background-color: var(--mgm-background); color: var(--mgm-text); margin: var(--page-margin-tb) var(--page-margin-sides); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.lock { overflow: hidden; } ::selection { background-color: var(--mgm-highlight); color: var(--mgm-white); } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: var(--page-margin-tb) var(--page-margin-sides); background-color: var(--mgm-overlay); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); z-index: 100; } @media (max-width: 888px) { .overlay { position: fixed; overflow-y: scroll; } } .overlay.open { display: initial; } .overlay .content { overflow-y: scroll; padding-bottom: var(--padding-list); } .overlay .content > p { text-align: initial; } @media (max-width: 888px) { .overlay .content { overflow-y: initial; } } .overlay .close { padding-top: var(--margin-tb); } .overlay.lightbox-disclaimer .container { margin: 9rem; width: fit-content; height: calc(100vh - 18rem); border-radius: var(--mgm-round-corners); overflow: hidden; background-color: var(--mgm-overlay); } .overlay.lightbox-disclaimer .container .content { overflow: scroll; height: calc(100vh - 18rem); } .overlay.lightbox-disclaimer .container .content > :first-child { padding-top: var(--margin-tb); } .overlay.lightbox-disclaimer .container .content > :last-child { padding-bottom: var(--margin-tb); } @media (max-width: 888px) { .overlay.lightbox-disclaimer { background-color: var(--mgm-overlay); padding: 0; } .overlay.lightbox-disclaimer .container { margin: 0; height: auto; border-radius: initial; overflow: visible; } .overlay.lightbox-disclaimer .container .content { height: auto; } } button { border-radius: 100%; overflow: hidden; outline: var(--outline); outline-color: var(--mgm-border); box-shadow: var(--outline); padding: var(--padding-button); cursor: pointer; } button:hover { background-color: var(--mgm-hover); } iframe, video { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; object-fit: cover; z-index: 1; outline: none; } .left { text-align: left; } .center { text-align: center !important; } .right { text-align: right; } ol { list-style-type: decimal; padding-left: var(--padding-list); } .close { display: flex; flex-direction: column; gap: var(--gutter-nav); } .close button { width: fit-content; } body, main, .overlay.open, .lightbox-disclaimer.overlay.open .container { display: grid; grid-template-columns: repeat(8, 1fr); column-gap: var(--gutter-column); row-gap: var(--gutter-row); align-items: start; grid-auto-rows: min-content; } body > *, main > *, .overlay.open > *, .lightbox-disclaimer.overlay.open .container > * { grid-column: 1/-1; } .overlay.open, .lightbox-disclaimer.overlay.open .container, .lightbox-disclaimer.overlay.open .container .close { row-gap: var(--gutter-close); } .lightbox-disclaimer.overlay.open .container .close { grid-column: 1/3; padding: var(--margin-tb) var(--margin-sides) 0 var(--margin-sides); } .lightbox-disclaimer.overlay.open .container .content { grid-column: 3/-1; padding: 0 var(--margin-sides) var(--margin-tb) var(--margin-sides); } @media (max-width: 888px) { .lightbox-disclaimer.overlay.open .container .content { grid-column: 1/-1; } } main, footer { grid-column: 3/-1; display: grid; grid-template-columns: repeat(6, 1fr); row-gap: var(--gutter-row); column-gap: var(--gutter-column); height: fit-content; } @media (max-width: 888px) { main, footer { grid-column: 1/-1; } } main > *, footer > * { grid-column: 1/-1; } main .footer-top, footer .footer-top { grid-column: 1/2; } @media (max-width: 888px) { main .footer-top, footer .footer-top { grid-column: 1/2; } } main .footer-links, footer .footer-links { grid-column: 2/6; } main .footer-year, footer .footer-year { grid-column: 6/-1; } .overlay .close { grid-column: 1/3; } .overlay .content { grid-column: 3/-1; } @media (max-width: 888px) { .overlay .content { grid-column: 1/-1; } } .overlay.lightbox-aoc { grid-auto-rows: min-content 1fr; } .overlay.lightbox-aoc .content { grid-column: 1/-1; } .overlay.lightbox-disclaimer .container .content { grid-column: 3/-1; } @media (max-width: 888px) { .overlay.lightbox-disclaimer .container .content { grid-column: 1/-1; } } header { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100vh; padding: var(--page-margin-tb) var(--page-margin-sides); z-index: 10; pointer-events: none; } @media (max-width: 888px) { header { position: initial; padding: initial; height: initial; row-gap: var(--gutter-row); flex-direction: row; } } header > * { pointer-events: all; } header .top, header nav { display: flex; flex-direction: column; gap: var(--gutter-nav); } header .logo { width: calc(var(--core) * 5.22); } header .logo img { width: 100%; height: auto; } header nav { margin-bottom: var(--margin-tb); } @media (max-width: 888px) { header nav { padding-top: calc(var(--core) * 0.4); align-items: flex-end; } } header nav a, header nav button { border-radius: initial; box-shadow: none; padding: initial; width: fit-content; border-bottom: var(--underline-transparent); } header nav a.active, header nav button.active { border-bottom: var(--underline-solid); } header nav a.active:hover, header nav button.active:hover { border-bottom: var(--underline-solid); } header nav a:hover, header nav button:hover { border-bottom: var(--underline); } main .thumb { display: flex; flex-direction: column; border-radius: var(--corners); overflow: hidden; box-shadow: var(--outline); height: fit-content; } main .thumb .thumb-inner, main .thumb a { display: flex; flex-direction: column; gap: var(--gutter-row); padding: var(--padding-thumb); } main .thumb .thumb-inner:not(:first-of-type), main .thumb a:not(:first-of-type) { padding-top: 0; } main .thumb .thumb-inner.cta, main .thumb a.cta { padding-bottom: calc(var(--padding-thumb) / 4); pointer-events: all; } main .thumb .thumb-inner.cta:hover span, main .thumb a.cta:hover span { border-bottom: var(--underline-solid); } main .thumb .thumb-inner.cta span, main .thumb a.cta span { border-bottom: var(--underline-transparent); width: fit-content; } main .thumb .thumb-inner.cta:last-of-type, main .thumb a.cta:last-of-type { padding-bottom: var(--padding-thumb); } main .thumb .thumb-inner.meditation-link, main .thumb a.meditation-link { font-size: 94%; display: inline; text-indent: -2.8vw; margin-left: 2.8vw; pointer-events: all; } @media (max-width: 888px) { main .thumb .thumb-inner.meditation-link, main .thumb a.meditation-link { text-indent: -6.8vw; margin-left: 6.8vw; } } main .thumb .thumb-inner.meditation-link::before, main .thumb a.meditation-link::before { content: "→"; padding-right: var(--padding-arrow); } main .thumb .thumb-inner.meditation-link:hover span, main .thumb a.meditation-link:hover span { border-bottom: var(--underline); } main .thumb .thumb-inner.meditation-link:not(:last-of-type), main .thumb a.meditation-link:not(:last-of-type) { padding-bottom: 0; } main .thumb .thumb-inner { padding-bottom: 0; } main .thumb img { mix-blend-mode: screen; opacity: 0.72; filter: contrast(150%) invert(1) grayscale(1); background-color: var(--mgm-fallback); aspect-ratio: 3/2; max-width: 100%; height: auto; object-fit: cover; -webkit-touch-callout: none; } @media (max-width: 888px) { main .thumb img { aspect-ratio: 4/3; } } main .gallery-container { display: flex; flex-direction: column; } main .gallery-container .gallery-section { display: flex; flex-direction: column; gap: var(--gutter-row); padding: var(--padding-thumb); border-radius: var(--corners); outline: var(--outline); outline-color: var(--mgm-border); box-shadow: var(--outline); scroll-margin-top: calc(var(--gutter-row) - var(--line)); } main .gallery-container .gallery-section:not(:first-of-type) { margin-top: calc(var(--gutter-row)); } @media (max-width: 888px) { main .gallery-container .gallery-section:not(:first-of-type) { margin-top: calc(var(--gutter-row) * 2); } } main .gallery-container .gallery-section ul { display: flex; flex-wrap: wrap; gap: var(--gutter-row); } main .gallery-container .gallery-section ul img { mix-blend-mode: multiply; opacity: 0.64; filter: contrast(400%) grayscale(1); background-color: var(--mgm-fallback); aspect-ratio: 3/2; max-width: 100%; height: auto; object-fit: cover; -webkit-touch-callout: none; } @media (max-width: 888px) { main .gallery-container .gallery-section ul img { aspect-ratio: 4/3; } } main .gallery-container .gallery-section ul img.noeffect { mix-blend-mode: initial; filter: initial; opacity: 0.84; } footer { margin-top: var(--margin-tb); margin-bottom: var(--margin-tb); } @media (max-width: 540px) { footer .footer-text a { border-bottom: var(--underline); } } footer a:hover, footer button:hover { border-bottom: var(--underline); } footer .footer-top button { outline: none; padding: initial; box-shadow: none; border-radius: initial; } footer .footer-top button span { padding-left: var(--gutter-footer); } footer .footer-top button:hover { background: initial; } body.meditation { --mgm-border: color-mix(in srgb, var(--mgm-white) 90%, var(--mgm-black) 50%); background-color: var(--mgm-black); } @media (max-width: 888px) { body.coming-soon header { position: initial; grid-column: 1/-1; display: flex; width: 100%; height: 100%; justify-content: space-evenly; align-items: center; text-align: center; } } body.coming-soon main { display: flex; width: 100%; height: 100%; height: -webkit-fill-available; justify-content: space-evenly; align-items: center; text-align: center; outline: var(--outline); outline-color: var(--mgm-border); box-shadow: var(--outline); } @media (max-width: 888px) { body.coming-soon main { grid-column: 1/-1; outline: none; } } body.about { row-gap: initial; } @media (max-width: 888px) { body.about .content { padding-top: var(--margin-tb); } } body.about .content .logo { margin-bottom: calc(var(--margin-tb) * 2); text-align: center; } .lightbox-disclaimer .container .content { display: flex; flex-direction: column; gap: var(--space-below-sml); text-wrap: pretty; } .lightbox-disclaimer .container .content .center { padding-bottom: var(--space-below-sml); }