diff --git a/static/dist/theme.css b/static/dist/theme.css index 98dff1d..7e37b5d 100644 --- a/static/dist/theme.css +++ b/static/dist/theme.css @@ -8,6 +8,7 @@ --color-gray-100: oklch(0.967 0.003 264.542); --color-gray-500: oklch(0.551 0.027 264.364); --color-gray-600: oklch(0.446 0.03 256.802); + --color-gray-700: oklch(0.373 0.034 259.733); --color-gray-800: oklch(0.278 0.033 256.848); --color-black: oklch(0% 0 0); --color-white: oklch(100% 0 0); @@ -550,6 +551,15 @@ .h-5 { height: calc(var(--spacing) * 5); } + .h-32 { + height: calc(var(--spacing) * 32); + } + .h-40 { + height: calc(var(--spacing) * 40); + } + .h-48 { + height: calc(var(--spacing) * 48); + } .h-auto { height: auto; } @@ -568,6 +578,15 @@ .w-5 { width: calc(var(--spacing) * 5); } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-40 { + width: calc(var(--spacing) * 40); + } + .w-48 { + width: calc(var(--spacing) * 48); + } .w-auto { width: auto; } @@ -631,6 +650,9 @@ .cursor-default { cursor: default; } + .cursor-pointer { + cursor: pointer; + } .resize { resize: both; } @@ -1073,6 +1095,9 @@ .text-gray-600 { color: var(--color-gray-600); } + .text-gray-700 { + color: var(--color-gray-700); + } .text-gray-800 { color: var(--color-gray-800); } @@ -1091,6 +1116,9 @@ .uppercase { text-transform: uppercase; } + .italic { + font-style: italic; + } .underline { text-decoration-line: underline; } @@ -1238,6 +1266,16 @@ margin-top: calc(var(--spacing) * 6); } } + .sm\:h-40 { + @media (width >= 40rem) { + height: calc(var(--spacing) * 40); + } + } + .sm\:w-40 { + @media (width >= 40rem) { + width: calc(var(--spacing) * 40); + } + } .sm\:grid-cols-1 { @media (width >= 40rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -1464,6 +1502,16 @@ display: none; } } + .lg\:h-48 { + @media (width >= 64rem) { + height: calc(var(--spacing) * 48); + } + } + .lg\:w-48 { + @media (width >= 64rem) { + width: calc(var(--spacing) * 48); + } + } .lg\:grid-cols-1 { @media (width >= 64rem) { grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -5737,6 +5785,88 @@ a.contact-info__value:hover { display: none; } } +.team-grid { + &__card { + display: flex; + flex-direction: column; + } + &__details { + display: flex; + flex-direction: column; + } + &__summary { + display: flex; + cursor: pointer; + list-style-type: none; + flex-direction: column; + align-items: center; + text-align: center; + &::-webkit-details-marker { + display: none; + } + &::marker { + display: none; + content: ''; + } + } + &__photo { + margin-bottom: calc(var(--spacing) * 4); + height: calc(var(--spacing) * 32); + width: calc(var(--spacing) * 32); + border-radius: var(--radius-md); + object-fit: cover; + @media (width >= 40rem) { + height: calc(var(--spacing) * 40); + } + @media (width >= 40rem) { + width: calc(var(--spacing) * 40); + } + @media (width >= 64rem) { + height: calc(var(--spacing) * 48); + } + @media (width >= 64rem) { + width: calc(var(--spacing) * 48); + } + } + &__name { + margin-bottom: calc(var(--spacing) * 1); + font-size: var(--text-22px); + --tw-leading: var(--leading-tight); + line-height: var(--leading-tight); + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + color: var(--color-cwc-blue-01); + } + &__title { + margin-bottom: calc(var(--spacing) * 3); + font-size: var(--text-16px); + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); + color: var(--color-gray-600); + font-style: italic; + } + &__bio-wrap { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 300ms ease; + } + &__details[open] &__bio-wrap { + grid-template-rows: 1fr; + } + &__bio-inner { + overflow: hidden; + min-height: 0; + } + &__bio { + padding-top: calc(var(--spacing) * 2); + font-size: var(--text-16px); + --tw-leading: var(--leading-snug); + line-height: var(--leading-snug); + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); + color: var(--color-gray-700); + } +} @property --tw-rotate-x { syntax: "*"; inherits: false;