/** Choice Coach styles */
* {
box-sizing: border-box;
}
& {
--color-gray50: rgb(249, 250, 251);
--color-gray100: rgb(242, 244, 247);
--color-gray200: rgb(228, 231, 236);
--color-gray300: rgb(208, 213, 221);
--color-gray400: rgb(152, 162, 179);
--color-gray500: rgb(102, 112, 133);
--color-gray600: rgb(71, 84, 103);
--color-gray700: rgb(52, 64, 84);
--color-gray800: rgb(29, 41, 57);
--color-gray900: rgb(16, 24, 40); /* Main foreground color: near-black gray */
--color-gray900-faint: rgba(16, 24, 40, 0.05);
--color-blue50: rgb(239, 248, 255);
--color-blue100: rgb(209, 233, 255);
--color-blue200: rgb(178, 221, 255);
--color-blue300: rgb(132, 202, 255);
--color-blue400: rgb(89, 173, 253);
--color-blue500: rgb(46, 144, 250);
--color-blue600: rgb(21, 112, 239);
--color-blue700: rgb(23, 92, 211);
--color-purple50: rgb(244, 243, 255);
--color-purple200: rgb(238, 226, 252);
--color-purple500: rgb(122, 90, 248);
--color-purple500-06: rgba(122, 90, 248, 0.6);
--color-purple500-035: rgba(122, 90, 248, 0.35);
--color-purple500-025: rgba(122, 90, 248, 0.25);
--color-purple700: rgb(89, 37, 220);
--color-error50: rgb(254, 243, 242);
--color-error200: rgb(254, 205, 202);
--color-error300: rgb(253, 162, 155);
--color-error500: rgb(240, 68, 56);
--color-error700: rgb(180, 35, 24);
--color-success50: rgb(236, 253, 243);
--color-success200: rgb(166, 244, 197);
--color-success500: rgb(18, 183, 106);
--color-success700: rgb(2, 122, 72);
--color-warning200: rgb(254, 223, 137);
--color-warning400: rgb(253, 176, 34);
--color-warning500: rgb(247, 144, 9);
--color-warning600: rgb(220, 104, 3);
--color-main-bg: white; /* Main background color: white */
--color-main-fg: var(--color-gray900);
--color-light-fg: var(--color-gray600);
--color-light2-fg: var(--color-gray500);
--color-label-fg: rgb(52, 64, 84);
--color-accent1-base: var(--color-blue600);
--color-input-border: var(--color-gray300);
--color-input-shadow: var(--color-gray900-faint);
--color-input-focus-border: rgb(132, 202, 255);
--color-input-disabled-bg: var(--color-gray50);
--color-input-error-border: var(--color-error300);
--color-validation-message: var(--color-error500);
--color-button-bg: var(--color-accent1-base);
--color-button-bg-hover: var(--color-blue700);
--color-button-bg-processing: var(--color-gray400);
--color-button-fg: var(--color-main-bg);
--color-subtle-edge: var(--color-gray200);
--color-anchor: rgb(23, 92, 211);
--color-sidebar-bg: var(--color-gray900);
--color-sidebar-fg: var(--color-gray300);
--color-sidebar-fg-bright: white;
--color-sidebar-bg-selected: var(--color-gray800);
--color-sidebar-bg-hover: var(--color-gray700);
--color-panel-border: var(--color-gray200);
--font-main: 'Inter', Calibri, Arial, Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
background-color: var(--color-main-bg);
color: var(--color-main-fg);
margin: 0px 0px;
font-size: 16px;
font-family: var(--font-main);
min-height: 100vh;
}
/** Text */
p, h1, h2, h3, h4, h5 {
margin: 0px 0px;
}
h1 {
font-size: 30px;
font-weight: 600;
line-height: 38px;
}
h3 {
font-size: 18px;
font-weight: 600;
line-height: 28px;
}
a, .link {
color: var(--color-anchor);
font-weight: bold;
text-decoration: none;
cursor: pointer;
&.normal {
font-weight: normal;
text-decoration: underline;
}
}
/** Common attributes. */
.fg-light {
color: var(--color-light-fg);
}
.fg-normal {
color: var(--color-main-fg);
}
.fg-attention {
color: var(--color-warning600);
}
.fg-faint {
color: var(--color-gray900-faint);
}
.fg-optional {
color: var(--color-success500);
}
.fg-required {
color: var(--color-warning500);
}
.text-small {
font-size: 12px;
}
.nowrap {
white-space: nowrap;
}
.transparent {
opacity: 0;
}
/** Input elements */
label {
color: var(--color-label-fg);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
input, textarea, select, .input-with-prefix {
padding: 10px 14px;
border-radius: 8px;
color: var(--color-main-fg);
border: 1px solid var(--color-input-border);
background-color: var(--color-main-bg);
box-shadow: 0px 1px 2px var(--color-input-shadow);
font-family: var(--font-main);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
align-self: stretch;
&.disabled {
color: var(--color-light2-fg);
background-color: var(--color-input-disabled-bg);
}
&.error {
border-color: var(--color-input-error-border);
position: relative;
background-image: url("/img/alert-circle.svg");
background-position-y: center;
background-position-x: right 14px;
background-repeat: no-repeat;
padding-right: 38px;
&:focus, &:focus-within {
border-color: var(--color-input-error-border);
box-shadow: 0px 1px 2px var(--color-input-shadow), 0px 0px 0px 2px #FEE4E2;
}
}
&:focus, &:focus-within {
border-color: var(--color-input-focus-border);
box-shadow: 0px 1px 2px var(--color-input-shadow), 0px 0px 0px 2px #ECFDF3;
outline: 0px;
}
}
.input-with-prefix {
display: flex;
flex-direction: row;
gap: 0px;
padding: 0px 0px;
.prefix {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-light2-fg);
padding: 10px 14px;
}
&:focus-within .prefix {
color: var(--color-main-fg);
}
&.error input {
border-color: var(--color-input-error-border);
}
input {
flex: 1 0 0;
padding: 10px 14px;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0px 8px 8px 0px;
box-shadow: none;
&:focus {
box-shadow: none;
}
}
}
textarea {
resize: none;
}
.input-count {
color: var(--color-light-fg);
font-size: 13px;
white-space: nowrap;
}
/** Styles for buttons and button facsimiles (divs that look like buttons but do not respond to input). */
button, .button, .button-facsimile {
display: flex;
padding: 10px 18px;
justify-content: center;
align-items: center;
text-align: center;
gap: 8px;
flex: 1 0 0;
font-family: var(--font-main);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
border-radius: 8px;
border: 1px solid var(--color-button-bg);
background-color: var(--color-button-bg);
color: var(--color-button-fg);
box-shadow: 0px 1px 2px 0px var(--color-input-shadow);
align-self: stretch;
user-select: none;
.icon {
stroke: var(--color-button-fg);
width: 20px;
height: 20px;
}
&.small {
font-size: 13px;
line-height: 15px;
}
&.square {
padding: 12px 12px;
}
&.extra-width {
padding-left: 64px;
padding-right: 64px;
}
&.simple {
border: 1px solid var(--color-gray300);
background-color: var(--color-main-bg);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: var(--color-gray700);
.icon {
stroke: #475467;
&.red {
stroke: var(--color-error700);
}
}
&.active {
.icon {
stroke: var(--color-warning500);
}
}
&.notice {
.icon {
stroke: #1570EF;
}
}
&.noborder {
border: 0px;
box-shadow: none;
}
}
}
/** Styles for buttons, not applied to button facsimiles. */
button, .button {
cursor: pointer;
&:hover {
background-color: var(--color-button-bg-hover);
}
&:active, &.processing {
background-color: var(--color-button-bg-processing) !important;
border-color: var(--color-button-bg-processing) !important;
}
&.invisible {
border: none;
background-color: transparent;
color: var(--color-gray700);
font-weight: 600;
}
&.simple {
&:hover, &.active:hover {
background-color: var(--color-gray50);
.icon {
stroke: black;
}
}
}
}
.validation-message {
color: var(--color-validation-message);
}
/** Common elements. */
.badge {
display: inline-flex;
flex-direction: row;
padding: 2px 8px;
justify-content: center;
align-items: center;
align-self: center;
gap: 4px;
border-radius: 16px;
font-size: 12px;
line-height: 18px;
background-color: var(--color-gray100);
text-align: center;
user-select: none;
&.small {
padding: 0px 6px;
font-size: 10px;
font-weight: 500;
line-height: 18px;
}
&.with-icon {
padding-left: 6px;
}
&.success {
background: var(--color-success50);
color: var(--color-success700);
}
&.info, &.aligned {
background: var(--color-blue50);
color: var(--color-blue700);
}
&.bookmarked {
background: var(--color-purple50);
color: var(--color-purple700);
}
&.button-style {
background-color: var(--color-button-bg);
color: var(--color-button-fg);
}
&.hidden {
display: none;
}
}
.actions {
display: flex;
gap: 12px;
flex-direction: row;
align-self: stretch;
.button.simple {
box-shadow: none;
}
}
.breadcrumbs {
display: flex;
font-size: 14px;
font-weight: 600;
line-height: 20px;
.breadcrumb {
display: flex;
flex-direction: row;
gap: 8px;
color: var(--color-blue700);
}
.icon {
stroke: #175CD3;
}
}
#page-status-message {
position: fixed;
top: 88px;
right: 32px;
visibility: hidden;
display: flex;
flex-direction: row;
gap: 12px;
border-radius: 16px;
padding: 4px 10px 4px 4px;
align-items: center;
font-size: 14px;
outline: 3px solid var(--color-main-bg);
user-select: none;
&.visible {
visibility: visible;
}
.badge {
font-size: 14px;
}
&.info {
background-color: var(--color-gray50);
color: var(--color-gray700);
.badge {
background-color: var(--color-main-bg);
border: 1px solid var(--color-gray200);
}
}
&.success {
background-color: var(--color-success50);
color: var(--color-success700);
.badge {
background-color: var(--color-main-bg);
border: 1px solid var(--color-success200);
}
}
&.error {
background-color: var(--color-error50);
color: var(--color-error700);
.badge {
background-color: var(--color-main-bg);
border: 1px solid var(--color-error200);
}
}
&.animated {
transition: all 2s ease-in;
}
&.fadeout {
opacity: 0;
}
}
.hidden {
display: none;
}
.relative {
position: relative;
}
.divider {
width: 100%;
height: 1px;
align-self: stretch;
background-color: var(--color-subtle-edge);
}
.window-overlay {
display: none;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
transition: all 200ms ease-out;
z-index: 20;
.content {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.close-button {
position: fixed;
top: 32px;
right: 32px;
z-index: 30;
cursor: pointer;
svg {
stroke: var(--color-gray300);
width: 24px;
height: 24px;
}
&.hidden {
display: none;
}
}
&.visible {
display: flex;
}
&.blur {
background-color: rgba(16, 24, 40, 0.70);
backdrop-filter: blur(8px);
}
}
.pop {
position: absolute;
display: flex;
flex-direction: column;
gap: 32px;
align-items: center;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--color-subtle-edge);
background: var(--color-main-bg);
width: 512px;
max-height: 650px;
visibility: hidden;
/* Shadow/xs */
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
&.animated {
visibility: visible;
overflow: hidden;
transition: all 200ms ease-out;
}
&.positioned {
visibility: visible;
}
}
.grid-panel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, auto));
grid-template-rows: auto;
align-self: stretch;
gap: 24px;
&.hidden {
display: none;
}
}
.grid-card {
display: flex;
padding: 24px;
flex-direction: column;
gap: 12px;
flex: 1 0 0;
border-radius: 12px;
border: 1px solid var(--color-subtle-edge);
background: var(--color-main-bg);
/* Shadow/xs */
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
.person-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: stretch;
.person-info {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
.name-rating {
display: flex;
flex-direction: column;
gap: 4px;
}
}
.date {
color: var(--color-light-fg);
font-size: 14px;
}
}
.actions {
justify-content: space-between;
.button, .button-facsimile {
flex: unset;
padding: 8px 10px;
font-size: 14px;
line-height: 20px;
}
.icon {
width: 16px;
height: 16px;
}
}
cc-user-text {
position: relative;
color: var(--color-light-fg);
font-size: 14px;
line-height: 20px;
overflow-y: hidden;
max-height: 90px;
&.biography-text {
max-height: 80px;
}
&.show-all {
max-height: unset;
overflow: auto;
padding-right: 8px; /* Offset from scrollbar. */
}
.more {
position: absolute;
display: flex;
bottom: 0px;
left: 0px;
height: 36px;
width: 100%;
background: linear-gradient(to top, var(--color-main-bg), var(--color-main-bg) 18px, rgba(255,255,255,0));
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--color-anchor);
text-decoration: none;
align-items: end;
}
}
}
.empty-panel-placeholder {
flex: 1 0 0;
flex-direction: column;
align-self: stretch;
display: flex;
gap: 16px;
align-items: center;
&.hidden {
display: none;
}
.header-instructions {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 352px;
align-self: center;
align-items: center;
&.no-icon {
padding-top: 12px;
}
.header {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.instructions {
color: var(--color-light-fg);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: center;
}
}
.button-row {
display: flex;
flex-direction: row;
gap: 16px;
padding-top: 12px;
.button {
white-space: nowrap;
}
}
}
/** Navigation controls */
nav.top {
height: 80px;
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
border-bottom: 1px solid var(--color-subtle-edge);
.logo-bar {
display: flex;
width: 1280px;
padding: 0px 32px;
align-items: center;
align-self: stretch;
justify-content: space-between;
.logo {
display: flex;
height: 32px;
}
}
}
nav.sidebar {
position: fixed;
display: flex;
flex-direction: column;
left: 0px;
top: 0px;
width: 312px;
height: 100%;
background-color: var(--color-sidebar-bg);
color: var(--color-sidebar-fg);
justify-content: space-between;
z-index: 10;
user-select: none;
/* transition: width 100ms ease-out; */
.top {
display: flex;
flex-direction: column;
padding-top: 32px;
gap: 66px;
align-self: stretch;
.logo-bar {
display: flex;
padding: 0px 20px 0px 24px;
height: 32px;
/* transition: padding 100ms ease-out; */
.logo {
display: flex;
width: 100%;
background-image: url("/img/cc-light.svg");
background-size: auto 32px;
background-repeat: no-repeat;
}
}
.nav-items {
display: flex;
padding: 0px 16px;
flex-direction: column;
gap: 8px;
/* transition: padding 100ms ease-out; */
.nav-item {
display: flex;
flex-direction: row;
width: 100%;
height: 40px;
padding: 12px;
align-items: center;
gap: 12px;
border-radius: 6px;
.icon {
width: 24px;
height: 24px;
stroke: #667085;
}
.label {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: var(--color-sidebar-fg);
}
&.selected {
background-color: var(--color-sidebar-bg-selected);
.label {
color: var(--color-sidebar-fg-bright);
}
.icon {
stroke: #D0D5DD;
}
}
&:hover {
background-color: var(--color-sidebar-bg-hover);
.label {
color: var(--color-sidebar-fg-bright);
}
.icon {
stroke: var(--color-sidebar-fg-bright);
}
}
}
}
}
.bottom {
display: flex;
padding: 0px 16px 24px 16px;
flex-direction: column;
align-items: start;
gap: 24px;
align-self: stretch;
.account {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
padding-right: 8px;
/* transition: padding 100ms ease-out; */
.avatar-name-email {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 8px 8px;
border-radius: 6px;
&:hover {
background-color: var(--color-sidebar-bg-hover);
/*
.label {
color: var(--color-sidebar-fg-bright);
}
.icon {
stroke: var(--color-sidebar-fg-bright);
}
*/
}
.avatar {
display: flex;
width: 40px;
height: 40px;
}
.name-email {
display: flex;
flex-direction: column;
align-items: start;
font-size: 14px;
line-height: 20px;
min-width: 0;
.name, .email {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.name {
color: var(--color-sidebar-fg-bright);
font-weight: 600;
}
.email {
color: var(--color-sidebar-fg);
font-weight: 400;
}
}
}
.logout {
display: flex;
padding: 8px 8px 8px 8px;
border-radius: 6px;
.icon {
stroke: #667085;
}
&:hover {
background-color: var(--color-sidebar-bg-hover);
.icon {
stroke: var(--color-sidebar-fg-bright);
}
}
}
}
}
}
/** Footer */
cc-footer {
flex: 1;
align-content: end;
}
footer {
width: 100%;
display: flex;
padding: 0px 32px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
font-size: 14px;
margin: 0px 0px 32px 0px;
.content {
display: flex;
width: 100%;
align-items: center;
gap: 32px;
color: var(--color-light2-fg);
.copyright {
flex: 1 0 0;
}
.footer-links {
display: flex;
gap: 24px;
a {
color: var(--color-light2-fg);
text-decoration: underline;
font-weight: normal;
}
}
}
}
/** Main container. */
.main-container {
display: flex;
flex-direction: column;
flex: 1;
&.sidebar-container {
flex: 1;
padding: 0px 0px 0px 312px;
background-color: var(--color-gray50);
&.sidebar-collapsed {
padding-left: 72px;
}
nav.top {
display: none;
height: auto;
padding: 12px 0px;
}
&.sidebar-hidden {
padding-left: 0px;
nav.top {
display: flex;
}
nav.sidebar {
display: none;
&.open {
display: flex;
z-index: 100;
}
}
}
}
&.sidebar-collapsed.sidebar-expanding nav.sidebar {
width: 312px;
.top {
.logo-bar {
padding: 0px 20px 0px 24px;
}
.nav-items {
padding: 0px 16px;
}
}
.bottom {
.account {
}
}
}
&.sidebar-collapsed {
nav.sidebar:not(:hover) {
width: 72px;
.top {
.logo-bar {
padding: 0px 20px;
.logo {
background-image: url("/img/cc-logo.svg");
}
}
.nav-items {
padding: 0px 12px;
.nav-item {
.label {
display: none;
}
}
}
}
.bottom {
.account {
margin-left: -8px;
.avatar-name-email {
.name-email {
display: none;
}
}
.logout {
display: none;
}
}
}
}
}
}
/** Main content layouts. */
.main-content {
display: flex;
flex-direction: column;
&.stacked-content {
justify-content: space-between;
align-items: center;
}
&.plain-content {
justify-content: space-between;
align-items: center;
margin: 48px 0px;
.page-header {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
gap: 12px;
.page-name {
font-size: 48px;
line-height: 60px;
letter-spacing: -0.96px;
font-weight: 600;
}
.updated {
color: var(--color-accent1-base);
font-size: 16px;
line-height: 24px;
}
}
.content {
display: flex;
flex-direction: column;
max-width: 720px;
gap: 48px;
margin: 0px 16px;
.section {
display: flex;
flex-direction: column;
gap: 16px;
}
}
}
&.error-content {
align-items: center;
align-self: center;
max-width: 720px;
margin: 48px 0px;
gap: 24px;
}
&.visitor-content {
width: 100%;
max-width: 1280px;
align-self: center;
}
&.member-content,
&.visitor-content {
padding: 32px;
gap: 32px;
.page-header {
display: flex;
flex-direction: row;
gap: 24px;
align-self: stretch;
align-items: center;
&.with-search,
&.with-actions {
align-items: start;
justify-content: space-between;
.actions {
align-self: start;
.button {
flex-basis: auto;
padding: 10px 14px;
}
}
}
.photo-header-text {
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
}
.header-text {
display: flex;
flex-direction: column;
gap: 4px;
.page-name {
font-size: 30px;
font-weight: 600;
line-height: 30px;
}
.subhead {
font-size: 14px;
line-height: 20px;
height: 24px;
font-weight: 400;
color: var(--color-light-fg);
}
.page-instructions {
color: var(--color-light-fg);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.search-panel {
display: flex;
#coach-search-field {
width: 300px;
}
}
}
}
&.coach-view, &.client-view {
.page-header {
gap: 16px;
flex: 1 0 0;
}
.socials {
display: flex;
flex-direction: row;
gap: 8px;
.social-link {
display: none;
padding: 6px;
justify-content: center;
align-items: center;
border-radius: 100px;
background: var(--color-blue50);
&:hover {
background-color: var(--color-blue100);
}
&.visible {
display: flex;
}
}
}
.about-panel {
flex: 2 0 0;
display: flex;
flex-direction: column;
gap: 0px;
align-self: stretch;
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
}
.expertise-panel {
flex: 1 0 0;
display: flex;
align-content: start;
align-items: start;
gap: 0px;
align-self: stretch;
flex-direction: column;
cc-expertise-list {
gap: 10px;
}
}
.biography {
gap: 8px;
}
.expertise-areas {
gap: 16px;
}
.biography, .expertise-areas {
display: flex;
flex: 1 0 0;
align-items: start;
font-size: 14px;
line-height: 20px;
color: var(--color-light-fg);
}
}
.panel {
/* margin: 0px 32px; */
display: flex;
flex-direction: column;
align-items: start;
align-self: stretch;
background-color: var(--color-main-bg);
border: 1px solid var(--color-panel-border);
border-radius: 12px;
box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
&.hidden {
display: none;
}
.panel-title {
display: flex;
flex-direction: row;
gap: 8px;
padding: 16px 24px;
font-size: 18px;
font-weight: 500;
line-height: 28px;
flex-basis: min-content;
align-self: stretch;
align-items: center;
justify-content: space-between;
.title-and-count {
display: flex;
flex-direction: row;
gap: 12px;
}
.actions {
.button {
font-size: 14px;
line-height: 20px;
}
}
}
.panel-content {
display: flex;
flex-direction: column;
.panel-section-title {
margin-top: 16px;
font-size: 16px;
font-weight: 500;
font-style: italic;
color: var(--color-light2-fg);
}
padding: 24px;
align-self: stretch;
}
}
.empty-panel-placeholder {
padding-bottom: 24px;
&.hidden {
display: none;
}
}
.panel-group {
display: flex;
gap: 24px;
align-self: stretch;
.panel {
margin: 0px 0px;
}
}
.matches-panel {
.panel-title {
.toggle {
display: flex;
position: relative;
flex-direction: row;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 400;
}
}
/** Displayed in tablet styles. */
& > .divider {
display: none;
}
.row {
width: 100%;
display: grid;
grid-template-columns: 248px 160px 1fr 152px; /* 146px + 24px + 24px padding */
gap: 24px;
transition: background-color 1800ms;
padding: 0px 24px;
&.match {
border-bottom: 1px solid var(--color-subtle-edge);
}
& > div, & > a {
display: flex;
flex-direction: row;
align-items: center;
justify-self: start;
}
.status {
display: flex;
flex-direction: row;
gap: 8px;
}
.expertise {
justify-self: stretch;
overflow: hidden;
}
.actions {
.button.card {
display: none;
}
.button.default {
display: flex;
}
}
&.header {
background-color: var(--color-gray50);
&.hidden {
display: none;
}
& > div {
height: 44px;
font-size: 12px;
line-height: 18px;
color: var(--color-light-fg);
white-space: nowrap;
&.status {
padding-left: 6px;
}
&.eas {
padding-left: 8px;
}
}
}
&.newly-added {
background-color: var(--color-gray200);
}
}
&.active-matches {
.row.newly-added {
background-color: var(--color-success200);
}
}
&.bookmarked-matches {
.row.newly-added {
background-color: var(--color-purple200);
}
}
&.proposed-matches {
.row.newly-added {
background-color: var(--color-gray200);
}
}
.matches {
display: flex;
flex-direction: column;
width: 100%;
}
.avatar-name {
display: flex;
color: unset;
font-weight: normal;
height: 72px;
gap: 12px;
width: 100%;
.avatar {
display: flex;
width: 40px;
height: 40px;
}
.name-email {
display: flex;
flex-direction: column;
font-size: 14px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
.badge {
padding: 0px 6px;
font-size: 10px;
font-weight: 500;
line-height: 18px;
}
.name-msgs {
display: flex;
flex-direction: row;
gap: 8px;
font-weight: 500;
.name {
overflow: hidden;
text-overflow: ellipsis;
}
}
.email {
font-weight: 400;
color: var(--color-light-fg);
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.expertise {
height: 72px;
}
.actions {
gap: 6px;
align-self: center;
.button {
padding: 8px;
}
.icon {
width: 16px;
height: 16px;
}
}
}
.past-matches-notice {
color: var(--color-light-fg);
align-self: center;
a {
color: var(--color-light-fg);
font-weight: normal;
text-decoration: underline;
}
}
}
.embedded-icon {
display: inline-block;
img {
vertical-align: middle;
}
}
.dashboard-guidance {
display: flex;
flex-direction: column;
max-width: 700px;
margin: 0 auto;
gap: 16px;
color: var(--color-gray800);
padding: 16px 18px;
.introduction {
}
.step {
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
.step-number {
display: flex;
background-color: var(--color-blue700);
color: var(--color-gray50);
width: 32px;
height: 32px;
border-radius: 32px;
align-items: center;
justify-content: center;
&.step-2 {
background-color: var(--color-blue600);
}
&.step-3 {
background-color: var(--color-blue500);
}
&.step-4 {
background-color: var(--color-blue400);
}
}
.step-instructions {
flex: 1 0 0;
}
}
.dismiss {
display: flex;
align-self: end;
}
}
/** Forms */
.form {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.validation-messages {
display: none;
&.visible {
display: block;
}
}
.form-row {
display: flex;
flex-direction: column;
gap: 6px;
align-items: start;
align-self: stretch;
textarea {
display: flex;
flex: 1 0 0;
}
&.extra-gap {
gap: 12px;
}
&.centered {
align-self: center;
align-items: center;
}
&.height-small {
height: 200px;
}
&.height-xsmall {
height: 150px;
}
&.height-medium {
height: 360px;
}
&.hidden {
display: none;
}
.messages {
font-size: 13px;
display: flex;
flex-direction: row;
gap: 12px;
align-self: stretch;
justify-content: space-between;
width: 100%;
}
}
.information-row {
text-align: center;
}
.medium-gap-above {
padding-top: 32px;
}
.gap-above {
padding-top: 64px;
}
.form-input-pair {
display: flex;
flex-direction: row;
gap: 24px;
align-self: stretch;
.form-row {
flex: 1 0 0;
}
}
.form-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-bottom: 8px;
.banner {
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
p.subheading {
line-height: 24px;
}
}
}
.input-rows {
display: flex;
flex-direction: column;
gap: 16px;
align-self: stretch;
}
.checkbox-row {
flex-flow: row wrap;
label {
display: inline-block;
line-height: auto;
}
}
.actions-row {
font-size: 14px;
}
.button-row {
&.buttons-right {
align-items: end;
.button {
align-self: auto;
}
}
&.narrower {
padding: 0px 120px;
}
}
.form-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
align-self: stretch;
font-size: 14px;
}
/** Paneled forms */
&.panel {
.input-rows {
padding: 24px;
}
.button-row {
padding: 16px 24px;
}
}
}
.wide-form {
width: 880px;
margin: 64px 32px;
gap: 24px;
&.expertise-form {
gap: 16px;
}
.form-header {
max-width: 480px;
}
}
.medium2-form {
width: 720px;
margin: 96px 32px 96px 32px;
gap: 24px;
}
.medium-form {
width: 480px;
margin: 96px 32px 96px 32px;
gap: 24px;
}
.simple-form {
width: 360px;
padding: 96px 32px 96px 32px;
gap: 24px;
}
.login-form {
.actions-row {
align-self: end;
}
}
.review-form {
#review-body {
flex-basis: 175px;
}
}
.popup-overlay {
display: none;
position: absolute;
z-index: 100;
background-color: rgba(255,255,255,0.7);
width: 100%;
height: 100%;
top: 0px;
left: 0px;
border-radius: 12px;
align-items: center;
justify-content: center;
&.visible {
display: flex;
}
}
.popup-form {
display: flex;
flex-direction: column;
align-self: start;
gap: 16px;
justify-content: space-between;
align-items: start;
align-self: stretch;
flex: 1 0 0;
.banner {
display: flex;
flex-direction: column;
gap: 8px;
.subhead {
font-size: 14px;
font-weight: 400;
}
}
}
.form-section {
display: flex;
flex-direction: row;
gap: 32px;
align-items: end;
align-self: stretch;
.section-label {
align-self: start;
display: flex;
flex-direction: column;
width: 280px;
align-items: start;
font-size: 14px;
line-height: 20px;
.name {
color: var(--color-gray700);
font-weight: 600;
}
.instructions {
color: var(--color-gray600);
font-weight: 400;
}
}
.form {
flex: 1 0 0;
}
}
/** Image icons */
.icon {
display: flex;
justify-content: center;
align-items: center;
stroke: #475467;
&.concentric {
border-radius: 28px;
padding: 8px;
border: 8px solid var(--color-blue50);
background: var(--color-blue100);
svg {
stroke: var(--color-blue600);
width: 24px;
height: 24px;
}
}
&.upload {
width: 40px;
height: 40px;
border-radius: 28px;
border: 6px solid var(--color-gray50);
background: var(--color-gray100);
}
img.xsmall {
width: 20px;
height: 20px;
}
img.small {
width: 24px;
height: 24px;
}
img.full {
width: 48px;
height: 48px;
}
}
/** Components */
cc-profile-photo {
.profile-image {
width: 40px;
height: 40px;
border-radius: 48px;
}
&.s48 {
.profile-image {
width: 48px;
height: 48px;
}
}
&.s64 {
.profile-image {
width: 64px;
height: 64px;
}
}
&.s96 {
.profile-image {
width: 96px;
height: 96px;
}
}
}
.page-header {
cc-profile-photo {
.profile-image {
width: 96px;
height: 96px;
}
}
}
.docking {
position: sticky;
z-index: 5;
border-bottom: 1px solid var(--color-main-bg);
&.docked {
border-bottom: 1px solid var(--color-gray300);
}
&.padding {
padding: 8px 32px;
margin-left: -32px;
margin-right: -32px;
}
&.opaque {
background-color: var(--color-main-bg);
}
&.docked.opaque {
/* background-color: var(--color-gray50); */
}
&.docking-top {
top: 0px;
}
}
.sidebar-container {
.docking.opaque {
background-color: var(--color-gray50);
}
}
.loading-circle {
display: inline-block;
animation: rotating 1.5s linear infinite;
width: 64px;
height: 64px;
background-image: url(/img/loading-circle.png);
background-size: 30px 30px;
background-position: center;
background-repeat: no-repeat;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
cc-expertise-list {
display: flex;
flex: 1 0 0;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
align-content: start;
/*
min-height: 0px;
overflow: hidden;
max-height: 50px;
*/
position: relative;
&.nolimit {
max-height: unset;
}
.badge {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.remainder {
display: none;
}
}
cc-messaging {
display: flex;
position: fixed;
right: -600px;
opacity: 0.5;
width: 584px;
height: 100%;
padding: 32px;
transition: all 150ms ease-out;
&.visible {
opacity: 1;
right: 0px;
}
.inner-panel {
display: flex;
flex-direction: column;
justify-content: end;
align-items: start;
flex: 1 0 0;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--color-subtle-edge);
background-color: var(--color-main-bg);
box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
.heading-content {
display: flex;
flex-direction: column;
justify-content: end;
align-items: start;
flex: 1 0 0;
align-self: stretch;
.heading {
display: flex;
padding: 0px 12px 0px 24px;
align-items: center;
gap: 8px;
align-self: stretch;
height: 68px;
.peer {
display: flex;
flex-direction: row;
padding: 140px 0px;
align-items: center;
gap: 12px;
flex: 1 0 0;
}
.button {
align-self: center;
flex: unset;
}
}
.past-messages {
display: flex;
flex-direction: column;
padding: 24px;
justify-content: start;
align-items: center;
gap: 32px;
flex: 1 0 0;
align-self: stretch;
overflow-y: scroll;
.cushion {
display: flex;
flex: 1 0 0;
}
.messages {
display: flex;
flex-direction: column;
align-items: start;
gap: 16px;
width: 100%;
}
.message {
display: flex;
flex-direction: row;
gap: 6px;
flex: 1 0 0;
align-items: start;
&.peer-message {
width: 100%;
padding-right: 64px;
.body {
border-radius: 0px 8px 8px 8px;
background-color: var(--color-gray100);
}
}
&.self-message {
width: 100%;
padding-left: 64px;
justify-content: end;
.body {
border-radius: 8px 0px 8px 8px;;
background-color: var(--color-blue600);
color: var(--color-main-bg);
align-self: end;
}
}
.header-body {
display: flex;
flex-direction: column;
align-items: start;
gap: 6px;
}
.message-header {
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
.name {
flex: 1 0 0;
color: var(--color-gray700);
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.time {
color: var(--color-gray600);
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
}
.body {
display: flex;
flex-direction: column;
padding: 10px 14px;
align-items: center;
gap: 8px;
align-items: start;
}
}
.suggestions {
display: flex;
flex-direction: column;
align-items: start;
gap: 16px;
transition: all 150ms;
&.hiding {
opacity: 0;
}
&.hidden {
display: none;
}
.body {
.body-synopsis {
font-size: 12px;
font-weight: 800;
color: var(--color-light-fg);
text-transform: uppercase;
}
border-radius: 8px 8px 8px 8px;;
background-color: var(--color-gray200);
color: var(--color-main-fg);
align-self: end;
cursor: pointer;
&:hover {
background-color: var(--color-blue100);
}
}
}
}
}
.messaging-footer {
display: flex;
flex-direction: column;
align-self: stretch;
.error-panel {
display: none;
color: var(--color-error500);
padding: 16px 24px 0px 24px;
font-size: 14px;
font-weight: 500;
&.visible {
display: flex;
}
}
.composition {
padding: 16px 24px;
display: flex;
gap: 12px;
align-self: stretch;
textarea {
flex: 1 0 0;
height: 46px;
resize: none;
}
button {
align-self: end;
flex: unset;
}
}
}
}
}
cc-star-rating {
display: flex;
flex-direction: row;
gap: 4px;
&.large {
.score, .review-count {
font-size: 16px;
}
}
.score, .review-count {
font-size: 14px;
font-weight: 400;
color: var(--color-light-fg);
}
.stars {
display: flex;
flex-direction: row;
gap: 2px;
}
.star {
display: flex;
position: relative;
}
.partial {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.icon {
stroke: var(--color-gray300);
}
}
cc-user-text {
display: flex;
flex-direction: column;
gap: 12px;
}
cc-review-card {
&.my-review {
border: 1px solid var(--color-blue500);
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: stretch;
.author {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
.name-rating {
display: flex;
flex-direction: column;
gap: 4px;
}
}
.date {
color: var(--color-light-fg);
font-size: 14px;
}
}
&.pop {
&.animated {
cc-user-text {
overflow: hidden;
}
}
}
}
cc-expand-switch {
display: flex;
transition: 200ms;
&.collapsed {
transform: rotate(-0.5turn);
}
}
cc-tooltip {
position: absolute;
width: 200px;
height: auto;
display: none;
flex-direction: column;
align-items: end;
bottom: 36px;
right: 0px;
&.visible {
display: flex;
}
.tooltip-panel {
background-color: var(--color-blue700);
color: var(--color-gray50);
font-weight: 500;
font-size: 12px;
line-height: 15px;
border-radius: 6px;
padding: 8px 12px;
}
.tooltip-arrow {
margin-right: 10px;
}
&.for-large-button {
bottom: 46px;
.tooltip-arrow {
margin-right: 18px;
}
}
}
cc-toggle-switch {
display: flex;
flex-direction: row;
gap: 6px;
align-items: center;
.slot {
background-color: var(--color-gray300);
border-radius: 40px;
height: 20px;
width: 36px;
display: flex;
flex-direction: row;
justify-content: start;
padding: 2px;
transition: all 100ms;
cursor: pointer;
.control {
background-color: var(--color-gray100);
height: 16px;
width: 16px;
border-radius: 40px;
}
}
.label {
color: var(--color-light2-fg);
transition: all 100ms;
cursor: pointer;
user-select: none;
}
&.on {
.slot {
background-color: var(--color-blue600);
justify-content: end;
}
.label {
color: var(--color-main-fg);
}
}
}
cc-labeled-divider {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
font-size: 14px;
line-height: 18px;
.divider-line {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
background-color: var(--color-gray300);
}
.divider-label {
padding: 0px 12px;
background-color: var(--color-main-bg);
z-index: 10;
}
}