:root { --grey-150: #f9f9f9; --grey-200: #f5f5f5; --grey-250: #efefef; --grey-300: #eaeaea; --grey-350: #c7c7c7; --grey-400: #aeaeae; --grey-450: #959595; --grey-500: #777677; --grey-550: #5a5a5a; --grey-600: #4d4d4d; --grey-650: #333333; --grey-700: #222222; --grey-750: #121212; --pink-150: #FCF5FF; --pink-200: #F8E6FF; --pink-250: #F1CCFF; --pink-300: #E8AAFF; --pink-350: #DC80FF; --pink-400: #D155FF; --pink-450: #C62AFF; --pink-500: #BA00FF; --pink-550: #8E1CCD; --pink-600: #7C00AA; --pink-650: #5D0080; --pink-700: #3E0055; --pink-750: #250033; --purple-150: #FCFCFD; --purple-200: #F8EDFE; --purple-250: #DFCCF4; --purple-300: #CAAAEC; --purple-350: #B080E3; --purple-400: #9555D9; --purple-450: #7B2AD0; --purple-500: #6000C6; --purple-550: #5000A5; --purple-600: #400084; --purple-650: #300063; --purple-700: #200042; --purple-750: #130028; --green-150: #F6FDFB; --green-200: #E8F9F4; --green-250: #D1F3E9; --green-300: #B3ECDA; --green-350: #8DE2C8; --green-400: #67D8B5; --green-450: #41CFA3; --green-500: #1BC590; --green-550: #17A478; --green-600: #128360; --green-650: #0E6348; --green-700: #094230; --green-750: #05271D; --red-150: #FEF6F8; --red-200: #FCE8EE; --red-250: #F9D1DD; --red-300: #F6B3C6; --red-350: #F18DA9; --red-400: #EC678D; --red-450: #E84171; --red-500: #E31B54; --red-550: #BD1746; --red-600: #971238; --red-650: #720E2A; --red-700: #4C091C; --red-750: #2D0511; --brown-150: #FEFBF7; --brown-200: #FCF4EB; --brown-250: #FAEAD7; --brown-300: #F7DBBC; --brown-350: #F3C99B; --brown-400: #F0B87A; --brown-450: #ECA658; --brown-500: #E89437; --brown-550: #C17B2E; --brown-600: #9B6325; --brown-650: #744A1C; --brown-700: #4D3112; --brown-750: #2E1E0B; --blue-150: #F6F9FC; --blue-200: #E9F0F8; --blue-250: #D3E2F2; --blue-300: #B5CFEA; --blue-350: #90B7DF; --blue-400: #6C9FD4; --blue-450: #4787CA; --blue-500: #226FBF; --blue-550: #1C5D9F; --blue-600: #174A7F; --blue-650: #113860; --blue-700: #0B2540; --blue-750: #071626; } :root { --positive-150: var(--green-150); --positive-200: var(--green-200); --positive-250: var(--green-250); --positive-300: var(--green-300); --positive-350: var(--green-350); --positive-400: var(--green-400); --positive-450: var(--green-450); --positive-500: var(--green-500); --positive-550: var(--green-550); --positive-600: var(--green-600); --positive-650: var(--green-650); --positive-700: var(--green-700); --positive-750: var(--green-750); --negative-150: var(--red-150); --negative-200: var(--red-200); --negative-250: var(--red-250); --negative-300: var(--red-300); --negative-350: var(--red-350); --negative-400: var(--red-400); --negative-450: var(--red-450); --negative-500: var(--red-500); --negative-550: var(--red-550); --negative-600: var(--red-600); --negative-650: var(--red-650); --negative-700: var(--red-700); --negative-750: var(--red-750); --warning-150: var(--brown-150); --warning-200: var(--brown-200); --warning-250: var(--brown-250); --warning-300: var(--brown-300); --warning-350: var(--brown-350); --warning-400: var(--brown-400); --warning-450: var(--brown-450); --warning-500: var(--brown-500); --warning-550: var(--brown-550); --warning-600: var(--brown-600); --warning-650: var(--brown-650); --warning-700: var(--brown-700); --warning-750: var(--brown-750); --info-150: var(--blue-150); --info-200: var(--blue-200); --info-250: var(--blue-250); --info-300: var(--blue-300); --info-350: var(--blue-350); --info-400: var(--blue-400); --info-450: var(--blue-450); --info-500: var(--blue-500); --info-550: var(--blue-550); --info-600: var(--blue-600); --info-650: var(--blue-650); --info-700: var(--blue-700); --info-750: var(--blue-750); --brand-white: #FFFFFF; --brand-white-0: #FFFFFF00; --brand-white-25: #FFFFFF40; --brand-white-50: #FFFFFF80; --brand-white-75: #FFFFFF93; --brand-white-100: #FFFFFFFF; --brand-black: #000000; --brand-black-0: #00000000; --brand-black-25: #00000040; --brand-black-50: #00000080; --brand-black-75: #00000093; --brand-black-100: #000000FF; --brand-pink: var(--pink-default); --brand-pink-0: #BA00FF00; --brand-pink-25: #BA00FF40; --brand-pink-50: #BA00FF80; --brand-pink-75: #BA00FF93; --brand-pink-100: #BA00FFFF; --brand-purple: var(--purple-default); --brand-purple-0: #6000C60; --brand-purple-25: #6000C640; --brand-purple-50: #6000C680; --brand-purple-75: #6000C693; --brand-purple-100: #6000C6FF; } :root { --grey-default: var(--grey-500); --pink-default: var(--pink-500); --purple-default: var(--purple-500); --green-default: var(--green-500); --red-default: var(--red-500); --brown-default: var(--brown-500); --blue-default: var(--blue-500); --positive-default: var(--positive-500); --negative-default: var(--negative-500); --warning-default: var(--warning-500); --info-default: var(--info-500); --grey: var(grey-default); --pink: var(pink-default); --purple: var(purple-default); --green: var(green-default); --red: var(red-default); --brown: var(brown-default); --blue: var(blue-default); --positive: var(positive-default); --negative: var(negative-default); --warning: var(warning-default); --info: var(info-default); --body-color: var(--purple-750); --body-text: var(--brand-white); --text-invert: var(--grey-750); --text-highlight: var(--brand-pink); } :root { --padding: 1rem; --max-width: 1720px; --body-padding: 3rem; --header-height: 59px; --nav-button-size: 40px; --font-family: Poppins, sans serif; --font-monospace: 'Roboto Mono', monospace; --margin: 1rem; --border-radius-small: 0.5rem; --border-radius-medium: 1rem; --border-radius-large: 2rem; --border-pill: 2rem; --button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); --padding-sm: 1rem; --padding-md: 2rem; --padding-lg: 3.5rem; --rounding-sm: 0.5rem; --rounding-md: 1rem; --rounding-lg: 2rem; --z-index-header: 10; --z-index-logo: 10; --z-index-navigation: 20; --skew: -1.5deg; --skew-sm: -0.5deg; } html { height: 100%; background-color: black; } body { min-height: 100%; margin: 0; padding: 0; padding: 0; container-type: size; background-color: var(--body-color); width: 100%; } #application { position: relative; z-index: 0; container-name: application; container-type: inline-size; min-height: 100vh; display: flex; flex-flow: column; justify-content: space-between; > div { flex-grow: 1; } &:before { content: ''; display: block; position: absolute; z-index: -10; left: 0; top: 0; right: 0; bottom: 0; background-image: linear-gradient( 180deg, var(--body-color) 30%, var(--purple-750) ); background-position: left bottom; } } header, footer, section { padding: var(--padding) calc(2 * var(--padding)); } footer, section { max-width: var(--max-width); width: 100%; margin-left: auto; margin-right: auto; } section { display: block; min-height: 100vh; position: relative; z-index: 1; } body, *, *:before, *:after { box-sizing: border-box; animation-iteration-count: infinite; background-position: center center; background-repeat: no-repeat; } a, input[type="submit"], button, .btn { &:focus, &:focus-within { outline: solid 2px var(--brand-pink); } } input[type="submit"], button, .btn, .btn-group::before, .btn-group::after { --active-background: var(--pink-500); --passive-background: var(--pink-600); --active-border: var(--pink-700); --passive-border: var(--passive-background); background-color: var(--passive-background); color: var(--body-text); display: inline-block; border: solid 1.5px var(--passive-border); border-radius: var(--border-pill); padding: 0.8rem 2rem; box-shadow: var(--button-box-shadow); font-weight: var(--font-weight); text-align: center; appearance: none; transition-property: transform background-color border-color; transition-duration: 200ms; &.btn-sm { padding-left: 0.4rem; padding-right: 0.4rem; } &:focus, &:focus-within, &:hover { background-color: var(--active-background); border-color: var(--active-border); transform: translateY(-2px); outline: solid 1.5px; } &:hover { outline-color: var(--active-background); } &:focus, &:focus-within { outline-color: var(--active-border); } &.secondary { --active-background: var(--grey-500); --passive-background: var(--grey-600); } } .btn-group { display: flex; align-items: stretch; align-content: stretch; justify-content: center; &::before, &::after { content: ''; display: block; background-color: var(--passive-background); padding-left: 0.4rem; padding-right: 0.4rem; } &::before { border-top-right-radius: 0; border-bottom-right-radius: 0; } &::after { border-top-left-radius: 0; border-bottom-left-radius: 0; } > * { border-radius: 0; &.active { --active-background: transparent; --passive-background: transparent; --body-text: var(--text-color); } } } .bg-purple { background-color: var(--purple-default); } .bg-purple-150 { background-color: var(--purple-150); } .bg-purple-200 { background-color: var(--purple-200); } .bg-purple-250 { background-color: var(--purple-250); } .bg-purple-300 { background-color: var(--purple-300); } .bg-purple-350 { background-color: var(--purple-350); } .bg-purple-400 { background-color: var(--purple-400); } .bg-purple-450 { background-color: var(--purple-450); } .bg-purple-500 { background-color: var(--purple-500); } .bg-purple-550 { background-color: var(--purple-550); } .bg-purple-600 { background-color: var(--purple-600); } .bg-purple-650 { background-color: var(--purple-650); } .bg-purple-700 { background-color: var(--purple-700); } .bg-purple-750 { background-color: var(--purple-750); } .bg-pink { background-color: var(--pink-default); } .bg-pink-150 { background-color: var(--pink-150); } .bg-pink-200 { background-color: var(--pink-200); } .bg-pink-250 { background-color: var(--pink-250); } .bg-pink-300 { background-color: var(--pink-300); } .bg-pink-350 { background-color: var(--pink-350); } .bg-pink-400 { background-color: var(--pink-400); } .bg-pink-450 { background-color: var(--pink-450); } .bg-pink-500 { background-color: var(--pink-500); } .bg-pink-550 { background-color: var(--pink-550); } .bg-pink-600 { background-color: var(--pink-600); } .bg-pink-650 { background-color: var(--pink-650); } .bg-pink-700 { background-color: var(--pink-700); } .bg-pink-750 { background-color: var(--pink-750); } .main-content { .container { padding-top: 30vh; > .row { > .col { position: relative; z-index: 1; border-radius: 2rem; background-color: white; color: black; padding: 2rem; } } } } .limited-width { max-width: 50rem; margin-inline: auto; } .form-group { --p: 1rem; label:not(.checkbox, .radio) { font-weight: var(--font-weight-bold); } input:not([type="checkbox"], [type="radio"]), select, textarea { border-width: 1.5px; padding: calc(0.5 * var(--p)) var(--p); margin-left: calc(-1 * var(--p)); margin-right: calc(-1 * var(--p)); border-radius: var(--border-pill); } textarea { min-height: 20rem; } .checkbox-label { font-weight: var(--font-weight); } &:not(.submit) > * { display: block; min-width: 100%; } .helptext { margin: 0.2rem 0; &.default { display: none; } &.error { display: inline-block; border: solid 1.5px var(--negative-500); background-color: var(--negative-300); padding: 0.2rem 0.5rem; width: auto; min-width: 0; } } & + .form-group { margin-top: 1rem; } } .video-in-content { video { width: 100%; height: auto; } } .featured-image { display: flex; max-height: 20rem; img { object-fit: contain; object-position: left top; } } :root { --font-weight-light: 300; --font-weight: 500; --font-weight-bold: 600; --font-size: 18px; --font-size-large: 32px; } :root { --font-size-h1: calc(60 / 16 * var(--font-size)); --font-size-h2: calc(48 / 16 * var(--font-size)); --font-size-h3: calc(40 / 16 * var(--font-size)); --font-size-h4: calc(32 / 16 * var(--font-size)); --font-size-h5: calc(24 / 16 * var(--font-size)); --font-size-h6: calc(20 / 16 * var(--font-size)); --font-size-xl: calc(20 / 16 * var(--font-size)); --font-size-lg: calc(18 / 16 * var(--font-size)); --font-size-md: calc(16 / 16 * var(--font-size)); --font-size-sm: calc(14 / 16 * var(--font-size)); } body { font-weight: var(--font-weight); } body, input, button, select, textarea, p { font-family: var(--font-family); font-weight: var(--font-weight-light); font-size: var(--font-size); } .monospace, .scramble { font-family: var(--font-monospace) !important; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: var(--font-weight-bold); line-height: 1.2; &.slim { font-weight: var(--font-weight-light); } + * { margin-top: 0; } } h1, .h1, .main-title { font-size: var(--font-size-h1); font-weight: bold; margin-top: var(--font-size-h1); margin-bottom: calc(0.5 * var(--font-size-h1)); text-transform: uppercase; + h2, + .h2, + .sub-title { margin-top: calc(-0.5 * var(--font-size-h1)); text-transform: none; } } h2, .h2, .sub-title { font-size: var(--font-size-h2); font-weight: normal; margin-top: var(--font-size-h2); margin-bottom: calc(0.5 * var(--font-size-h2)); text-transform: uppercase; } h3, .h3 { font-size: var(--font-size-h3); margin-bottom: calc(0.5 * var(--font-size-h2)); text-transform: uppercase; } h4, .h4 { font-size: var(--font-size-h4); } h5, .h5 { font-size: var(--font-size-h5); text-transform: none; } h6, .h6 { font-size: var(--font-size-h6); } .text-xl { font-size: var(--font-size-xl); } .text-lg { font-size: var(--font-size-lg); } .text-md { font-size: var(--font-size-md); } .text-sm { font-size: var(--font-size-sm); } .text-bold, strong, b { font-weight: var(--font-weight-bold); } a { outline: solid 2px transparent; text-decoration: none; &:focus, &:focus-within { outline-color: var(--brand-pink); } } body { color: var(--body-text); .highlight { color: var(--text-highlight); } } .keep-together { display: inline-block; } .align-left, .text-left { text-align: left; } .align-center, .text-center { text-align: center; } .align-right, .text-right { text-align: right; } .main-title + .sub-title { margin-top: calc(-0.5 * var(--font-size-h2)); } blockquote { font-size: var(--font-size-h5); &:before { content: '“'; display: block; font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--brand-purple); } p:first-child { margin-top: 0; } .text-large { font-size: 110%; } .quoted { display: flex; align-items: center; align-content: center; justify-content: flex-start; > .thumbnail { flex-grow: 0; margin-right: 1rem; width: 150px; height: 150px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); img { object-fit: cover; } } > .reference { flex-grow: 1; } } } .thumbnail { display: inline-block; aspect-ratio: 1 / 1; border-radius: 100%; overflow: hidden; > img, > picture { display: block; width: 100%; height: 100%; object-fit: cover; } } @container application (width < 600px) { blockquote { > * + * { margin-top: 1rem; } .quoted { display: block; > .thumbnail { display: block; max-width: 8rem; margin-inline: auto; } } } } .content img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0 2rem; } .row { display: flex; align-items: stretch; align-content: center; justify-content: center; &.flow { flex-wrap: wrap; } > .col { flex-grow: 1; margin-left: 0.5rem; margin-right: 0.5rem; width: 100%; } } .section, .full-height-section { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; position: relative; } .full-height-section { min-height: 100vh; .background-image { position: absolute; z-index: -1; left: 0; top: 0; right: 0; height: 100%; box-shadow: 0 0 50px inset rgba(0, 0, 0, 0.5); opacity: 0.3; overflow: hidden; background-position: center center; background-size: cover; background-attachment: fixed; } h1, .site-heading { font-size: clamp(var(--font-size-h1), 6vw, 8rem); text-align: center; font-weight: 800; + .site-heading { margin-top: calc(-0.5 * var(--font-size-h1)) } } } .half-height-container, .three-quarters-container { display: flex; flex-direction: column; align-items: center; align-content: center; justify-content: center; position: relative; h1 { margin-top: 0; } } .half-height-container { min-height: 50rem; } .three-quarters-container { min-height: 50rem; } @container application (width < 900px) { .container { > .row { flex-flow: column; align-items: center; align-content: center; > * { margin-inline: auto; } } } } .m-0 { margin :0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .ms-0 { margin-top: 0 !important; } .me-0 { margin-bottom: 0 !important; } .p-0 { padding :0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .ps-0 { padding-top: 0 !important; } .pe-0 { padding-bottom: 0 !important; } #header { position: absolute; container-name: header; container-type: inline-size; margin: 0; width: 100vw; .logo { position: fixed; display: block; padding: var(--padding); z-index: var(--z-index-logo); svg { width: auto; height: 40px; } &:hover, &:focus-within { svg { transform: scale(1.05); .one-eighty path { fill: #ccc; } g:not(.one-eighty) { path { fill: var(--purple-400); } } } } } #skipToContent { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0.01; z-index: -1; transition-property: opacity; transition-duration: 200ms; color: var(--body-text); padding: var(--padding); &:active, &:focus { opacity: 1; } } } #header .logo, #footer .logo { --q: 50ms; display: inline-block; svg { transition-property: transform; transition-timing-function: ease-in-out; transition-duration: 800ms; width: auto; height: auto; path { transition-property: fill; transition-timing-function: ease-in-out; transition-duration: calc(var(--q)); fill: var(--brand-purple); } .one-eighty path { fill: #ccc; } .o path { transition-delay: calc(0 * var(--q)); } .p path { transition-delay: calc(1 * var(--q)); } .s path { transition-delay: calc(2 * var(--q)); } } &:hover, &:focus-within { svg { transform: scale(1.05); path { fill: var(--purple-400); } } } } #navigation { --transition-duration: 600ms; --padding-offset: 0.7; position: fixed; top: 0; left: 0; right: 0; height: 0; overflow: visible; z-index: var(--z-index-navigation); button { position: absolute; top: calc(var(--header-height) - 0.5 * var(--nav-button-size)); right: calc(2 * var(--padding)); z-index: var(--z-index-navigation); border: solid 1px red; appearance: none; background-color: transparent; color: var(--body-text); width: var(--nav-button-size); height: var(--nav-button-size); border: none; display: flex; align-items: center; align-content: center; justify-content: center; padding: 0; border-radius: 0; box-shadow: none; svg { width: 80%; height: 80%; path { fill: var(--body-text); } } &, &:before { width: var(--nav-button-size); height: var(--nav-button-size); } &:before { display: block; content: ''; background-color: var(--purple-700); left: 0; top: 0; position: absolute; width: var(--nav-button-size); height: var(--nav-button-size); transition-property: all; transition-duration: 200ms; border-radius: 100%; z-index: -1; } &:hover, &:focus-within { transform: none; } } > ul { position: absolute; z-index: calc(var(--z-index-navigation) + 1); margin: 0; padding: 0; top: 79px; right: calc(2 * var(--padding)); visibility: hidden; li { position: relative; overflow-x: hidden; white-space: nowrap; display: flex; flex-flow: column; align-items: stretch; align-content: stretch; justify-content: stretch; transition-property: opacity; transition-duration: 200ms; transition-delay: 200ms; opacity: 0; ul { margin: 0; padding: 0; } &:not(:focus-within, :hover) { &:nth-child(2n) a { transition-delay: 100ms; } &:nth-child(3n) a { transition-delay: 300ms; } &:nth-child(5n) a { transition-delay: 500ms; } &:nth-child(7n) a { transition-delay: 400ms; } } &:focus-within a, &:hover a { transition-delay: 0 !important; } a { display: block; position: relative; padding: var(--padding); z-index: 1; width: 0; white-space: nowrap; flex-grow: 10; &::before { display: block; content: ''; background-color: var(--brand-white); position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; } &:hover, &:focus, &:active { margin-left: calc(var(--padding-offset) * var(--padding)); padding-right: calc((1 - var(--padding-offset)) * var(--padding)); &::before { background-color: var(--pink-300); } } &, &::before { transition-property: all; transition-duration: var(--transition-duration); } } } } &.open, &:focus-within { button { &:before { opacity: 1; } &:before { background-color: white; border-radius: 0; } svg path { fill: var(--brand-purple); } } ul { visibility: visible; z-index: 100; li { opacity: 1; transition-delay: 0ms; a { width: calc(100% + 0.5 * var(--padding)); } } } } ul:focus-within, ul:hover { li a { transition-delay: 0 !important; } } } .top-navigation { --spacing: 2rem; margin: 0; padding: 0; display: flex; flex-flow: row; align-items: center; align-content: center; justify-content: center; position: absolute; top: var(--header-height); left: 0; right: 0; height: 0; overflow-y: visible; z-index: calc(var(--z-index-logo) + 1); > li { display: block; position: relative; &:after { --size: 4px; content: ''; display: inline-block; border: solid var(--size) var(--brand-purple); border-radius: 100%; width: var(--size); height: var(--size); margin-left: var(--spacing); top: 50%; transform: translateY(-50%); } + li { margin-left: var(--spacing); } &:last-child:after { display: none; } > ul { display: none; position: absolute; top: 100%; margin-left: 0; padding-left: 0; list-style: none; } a { color: var(--grey-350); transition: all 400ms; font-weight: 400; } &:hover, &:focus-within { a { transform: translateY(-2px); color: white; text-shadow: 0 0 14px var(--brand-white-25); } > ul { display: block; } } } } @container header (width < 1000px) { .top-navigation { --spacing: 1rem; } } @container header (width < 600px) { .top-navigation { display: none; } } #footer { position: relative; z-index: 1; margin-top: 12rem; .footer-navigation { text-align: right; a { color: var(--link-color); & + a { margin-left: 0.5rem; padding-left: 0.5rem; border-left: solid 1px; } } } .row { align-items: center; font-size: var(--font-size-sm); padding: 2rem 0; } .logo-container { max-width: 300px; } .logo { svg { path { fill: var(--brand-purple); } .one-eighty path { fill: var(--brand-white); } &:hover { path { fill: var(--brand-white); } .one-eighty path { fill: var(--brand-white); } } } } } #gridCanvasContainer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; canvas { position: relative; z-index: 1; width: 100%; height: 100%; } } #newsfeed { container-type: inline-width; .blog-post { margin-top: var(--padding-md); padding-top: var(--padding-md); border-top: solid 1px; display: flex; container-type: inline-width; align-content: flex-start; align-items: flex-start; justify-content: stretch; @container (width < 900px) { display: block; } .featured-image { width: 300px; margin-right: 2rem; @container (width < 900px) { width: 100%; margin-right: 0rem; } img { width: 100%; display: block; } } .blog-post-preview { flex-grow: 10; width: 100%; } h2 { font-size: var(--font-size-h4); margin-top: 0; margin-bottom: 0; a { color: var(--text-color); } } } } .dividing-line { min-height: 20rem; display: flex; align-items: center; font-weight: normal; position: relative; background-color: white; z-index: calc(var(--z-index-navigation) - 1); margin: 2rem 0; &.behind-logo { z-index: calc(var(--z-index-logo) - 1); } &:before { content: ''; display: block; background-color: white; position: absolute; transform: skewY(var(--skew)) scaleY(1.1); left: 0; top: 0; right: 0; bottom: 0; z-index: 0; } &.bottom-straight:before { bottom: 30px; } .content { position: relative; z-index: 1; padding: var(--padding-md); border-radius: var(--rounding-md); background-color: white;; color: black; > :first-child { margin-top: 0; } } } .form-group { &.hp-field { display: none; } } .heading-processed { --offset: 10%; &:hover, &:focus-within { .char > .inner { text-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } } .word { display: inline-block; white-space: nowrap; &:after { display: inline-block; content: ' '; } .char { position: relative; > .inner, > .shadow { transition-property: text-shadow, transform; text-shadow: 0 0 20px rgba(255, 255, 255, 0); transition-duration: 400ms; display: inline-block; } .inner { position: relative; z-index: 10; &:hover { transform: scale(1.05); } } > .shadow { position: absolute; left: 0; top: 0; overflow: visible; transition-property: opacity; z-index: 9; opacity: 0; &:before, &:after { position: absolute; content: attr(data-char); display: inline-block; opacity: 0.5; } &:before { color: var(--brand-pink); transform: translateX(calc(-1 * var(--offset))) translateY(10%); } &:after { color: var(--brand-purple); transform: translateX(var(--offset)) translateY(10%); } } } } } #hero { h2 { .keep-together { position: relative; } } .half-height-container { &:not(&:has(h2, h3, p)) { min-height: 30rem; } } } #solutionsOverview { container-type: inline-size; container-name: solutions; > .background-image { background-image: url(//www.180ops.com/images/content/ice-600.jpg); @container solutions (width > 600px) { background-image: url(//www.180ops.com/images/content/ice-800.jpg); } @container solutions (width > 800px) { background-image: url(//www.180ops.com/images/content/ice.jpg); } } } .glass-boxes { flex-flow: wrap; } .glass-box { container-name: glass-box; container-type: inline-size; backdrop-filter: blur(5px); border: solid 10px var(--purple-500); outline: solid 1.5px var(--purple-450); border-radius: 20px; overflow: hidden; position: relative; z-index: 100; padding: 30px; transition-duration: 400ms; transition-property: outline, border, box-shadow, transform backdrop-filter; margin-bottom: 1rem; max-width: 400px; display: flex; flex-flow: column; justify-content: space-between; &.wider { max-width: 500px; } h3, .h3 { margin-bottom: 0.8rem; } box-shadow: 0 0 30px inset var(--brand-purple-50), 0 0 10px var(--brand-black-25); &:hover, &:focus-within { outline-color: var(--purple-400); box-shadow: 0 0 30px inset var(--brand-purple-50), 0 0 10px var(--brand-black-25); transform: translateY(-5px); backdrop-filter: blur(10px); &:before { opacity: 0.3; } } &:before { content: ''; display: block; position: absolute; z-index: -1; background-color: var(--brand-pink-25); opacity: 0.1; left: 0; top: 0; right: 0; bottom: 0; transition-duration: 400ms; transition-property: opacity; } & *:first-child { margin-top: 0; } } @container glass-box (width < 300px) { h3, .h3 { margin-left: -15px; margin-right: -15px; } .secondary-text { display: none; } } @container (width < 1320px) { .glass-boxes { > .glass-box { max-width: 500px; } } } @container (width < 500px) { .glass-boxes { > .glass-box { min-width: 0; } } } .logo-soup { --width: 7rem; --height: var(--width); margin: 1rem auto !important; list-style: none; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; max-width: calc(9 * (var(--width) + 1rem)); > * { display: flex; align-items: center; align-content: center; justify-content: center; width: var(--width); height: var(--height); border-radius: 100%; overflow: hidden; margin: 0.5rem; padding: 2rem 1rem; transition: all 400ms; > * { transition: all 400ms; } &:hover, &:focus-within { transform: translateY(-2px); > * { transform: scale(1.05) rotate(1deg); } } img, svg, picture { display: block; width: 100%; height: 100%; object-fit: contain; } } } .mini-content { position: relative; padding: var(--padding-md); align-items: flex-start; align-content: flex-start; container-name: mini-content; container-type: inline-size; &::before { content: ''; display: block; background-color: white; position: absolute; transform: skewY(var(--skew)) scaleY(1.1); left: 0; top: 0; right: 0; bottom: 0; z-index: -1; } &:nth-child(2n) { &::before { background-color: var(--grey-200); } > .row { > .product-image { order: 1; margin-right: 2rem; > img { margin-top: 0; } } > .description { order: 2; } } } > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } .description { >:first-child { margin-top: 0; } p { max-width: 40rem; } } .product-image { max-width: 25rem; margin-right: 0; position: relative; a { display: block; position: relative; &:before { --s: 4rem; color: white; background-color: black; content: '▶'; display: flex; align-items: center; align-content: center; justify-content: center; position: absolute; width: var(--s); height: var(--s); border: solid 4px; text-align: center; aspect-ratio: 1/1; line-height: 1; left: 50%; top: 50%; padding-bottom: 1%; padding-left: 1%; font-size: calc(0.6 * var(--s)); transform: translateX(-50%) translateY(-50%); box-shadow: var(--button-box-shadow); z-index: 10; border-radius: 100%; transition: all 400ms; } } &:hover a:before, &:focus-within a:before { background-color: var(--pink-600); transform: translateX(-50%) translateY(-50%) scale(1.1); } img, video { transform: skewY(var(--skew)); display: block; max-width: 100%; margin-top: -1rem; margin-bottom: 1rem; } + a { margin-top: 1rem; img { margin-top: 0; } } } } @container mini-content (width < 700px) { .row { flex-flow: column; .product-image { order: 1; width: 100%; max-width: none; margin-left: 0; } .description { order: 2; } } } .snippet-collection { --icon-size: 5rem; display: flex; flex-wrap: wrap; container-type: inline-size; > * { width: 50%; color: var(--text-invert); padding: 2rem; align-items: center; align-content: center; justify-content: center; position: relative; transition: all 400ms; @container (width < 900px) { width: 100%; &:last-child { margin-bottom: 2rem; } } &::before { content: ''; display: block; position: absolute; background-color: var(--grey-300); left: 1rem; top: 1rem; right: 1rem; bottom: 1rem; z-index: -1; transform: skewY(var(--skew)); transition: all 400ms; } &:nth-child(2) { transform: translateY(50%); @container (width < 900px) { transform: none; } } .icon { display: block; max-width: var(--icon-size); max-height: var(--icon-size); margin-inline: auto; path { transition-property: all; transition-duration: 400ms; } &.time { > .arrow { animation-name: rotate; animation-timing-function: linear; animation-duration: 10000ms; animation-iteration-count: infinite; transform-origin: center; } } &.trust { animation: heartbeat 1000ms linear infinite; .outer { fill: var(--pink-300) !important; } .inner { fill: var(--brand-white) !important; } } &.connect { .left { stroke: var(--brand-purple) !important; } .right { stroke: var(--brand-pink) !important; } } } &:focus-within, &:hover { &::before { background-color: var(--pink-250); } .icon { &.connect { .left { stroke: var(--brand-pink) !important; } .right { stroke: var(--brand-purple) !important; } } &.trust { .outer { fill: var(--red-500) !important; } .inner { fill: var(--red-400) !important; } } } } h3 { font-size: 100%; } } } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes heartbeat { 0% { transform: scale(1.05); } 10% { transform: scale(0.98); } 20% { transform: scale(1.03); } 30% { transform: scale(1.0); } } #why180 { > .row { align-items: center; @container (width < 1200px) { display: block; } > *:first-child { padding-right: 1rem; ~* { padding-left: 1rem; } } } }