#wp-team-map,
#wp-team-map-editor {
width: 100%;
height: 500px;
border-radius: 8px;
margin: 0 auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} #wp-team-map,
#wp-team-map-editor {
margin-bottom: 32px;
}
.leaflet-marker-icon.user-photo {
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
object-fit: cover;
transition: all 0.3s ease;
}
.leaflet-marker-icon.user-photo.highlighted-marker {
border: 4px solid #0073aa;
box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
transform: scale(1.2);
z-index: 1000 !important;
}.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg { -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
} .leaflet-oldie .marker-cluster-small {
background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}.wp-team-directory {
max-width: 1200px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.wp-team-directory-search {
margin-bottom: 2rem;
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.wp-team-directory-search input[type="text"] {
flex: 1;
min-width: 250px;
padding: 0.75rem 1rem;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s ease;
}
.wp-team-directory-search input[type="text"]:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.wp-team-directory-search button {
padding: 0.75rem 1.5rem;
background-color: #f1f1f1;
border: 2px solid #e1e5e9;
border-radius: 8px;
color: #555;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.wp-team-directory-search button:hover {
background-color: #e1e5e9;
border-color: #c3c7cc;
}
.wp-team-directory-results {
position: relative;
}
.wp-team-directory-groups {
display: flex;
flex-direction: column;
gap: 2rem;
}
.wp-team-directory-country-group {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.wp-team-directory-country-header {
margin: 0;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #0073aa 0%, #005a87 100%);
color: white;
font-size: 1.5rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.wp-team-directory-count {
font-size: 1rem;
font-weight: 400;
opacity: 0.9;
}
.wp-team-directory-members {
padding: 1.5rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.wp-team-directory-member {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 8px;
background: #f8f9fa;
transition: all 0.2s ease;
}
.wp-team-directory-member:hover {
background: #e9ecef;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.wp-team-directory-member.selected {
background: #0073aa !important;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}
.wp-team-directory-member.selected .wp-team-directory-member-name {
color: white;
}
.wp-team-directory-member.selected .wp-team-directory-member-location {
color: rgba(255, 255, 255, 0.8);
}
.wp-team-directory-member-avatar {
flex-shrink: 0;
}
.wp-team-directory-member-avatar img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wp-team-directory-member-info {
flex: 1;
min-width: 0;
}
.wp-team-directory-member-name {
margin: 0 0 0.25rem 0;
font-size: 1.1rem;
font-weight: 600;
color: #333;
line-height: 1.3;
}
.wp-team-directory-member-location {
margin: 0;
font-size: 0.9rem;
color: #666;
line-height: 1.4;
} @media (max-width: 768px) {
.wp-team-directory-search {
flex-direction: column;
align-items: stretch;
}
.wp-team-directory-search input[type="text"] {
min-width: auto;
}
.wp-team-directory-country-header {
padding: 1rem 1.5rem;
font-size: 1.25rem;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.wp-team-directory-members {
padding: 1rem 1.5rem;
grid-template-columns: 1fr;
gap: 1rem;
}
.wp-team-directory-member {
padding: 0.75rem;
}
.wp-team-directory-member-avatar img {
width: 50px;
height: 50px;
}
.wp-team-directory-member-name {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.wp-team-directory {
margin: 0 1rem;
}
.wp-team-directory-country-header {
padding: 0.75rem 1rem;
font-size: 1.1rem;
}
.wp-team-directory-members {
padding: 0.75rem 1rem;
}
}