custom.css
custom.css
— 33.5 KB
Dateiinhalt
/*!
* Custom styles for IfB HU Plone
* Styles to match Plone IfB
*/
h2.documentFirstHeading {
line-height: 1.2;
font-size: 1.75rem;
font-weight: 500;
margin-bottom: 0.5rem !important;
margin-left: 0.5rem !important;
}
a, a:focus {
outline: 0 !important;
outline: none !important;
}
/* bootstrap */
.ml-2 {
margin-left: 0.5rem !important;
}
.text-center {
text-align: center !important;
}
/* Focal Points page */
/* Note: HU-theme settings inside Plone make for a taller h4.fp-note margin than in test environ */
h4.fp-note {
line-height: 1.2;
font-weight: normal !important;
margin-top: -0.5rem !important;
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
h4.fp-note {
margin-right: calc(133.33% - 100vw);
padding-right: 2.0em;
}
}
@media screen and (min-width: 1024px) {
h4.fp-note {
margin-top: -0.25rem !important;
}
}
/* Mobile version of focal points venn chart */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
#venn-mobile {
margin-right: calc(133.33% - 100vw);
padding-right: 2.0em;
}
}
@media screen and (min-width: 1024px) {
#venn-mobile {
display: none;
}
}
/* Inline SVG style of circle BioEdu */
#venn-mobile .cls-1 {
fill: #b7b176;
opacity: .35;
isolation: isolate;
}
/* Inline SVG styles of all other circles of venn chart */
#venn-mobile text {
display: block;
font-size: 12px;
font-family: ArialMT, Arial;
}
#venn-mobile svg text .venn-mb-headings {
/* class is used only because Plone editor discards certain elements without classes */
}
#BioEdu text {
fill: #726a24;
}
#BioEdu text:hover {
fill: #49420d;
filter: drop-shadow(0px 0px 3px rgba(114, 106, 36, 0.4)); /* #726a24 */
}
#BioDivEvo text {
fill: #8c564b;
isolation: isolate;
}
#BioDivEvo text:hover {
fill: #662f24;
filter: drop-shadow(0px 0px 3px rgba(140, 86, 75, 0.4)); /* #8c564b */
}
#NeuroBio text {
fill: #1f77b4;
isolation: isolate;
}
#NeuroBio text:hover {
fill: #16557f;
filter: drop-shadow(0px 0px 3px rgba(31, 119, 180, 0.4)); /* #1f77b4 */
}
#BioPhys text {
fill: #9467bd;
isolation: isolate;
}
#BioPhys text:hover {
fill: #725989;
filter: drop-shadow(0px 0px 3px rgba(148, 103, 189, 0.4)); /* #9467bd */
}
#QuantSpatBio text {
fill: #ff7f0e;
isolation: isolate;
}
#QuantSpatBio text:hover {
fill: #ce660c;
filter: drop-shadow(0px 0px 3px rgba(255, 127, 14, 0.4)); /* #ff7f0e */
}
#InfBio text {
fill: #2ca02c;
isolation: isolate;
}
#InfBio text:hover {
fill: #2a822a;
filter: drop-shadow(0px 0px 3px rgba(44, 160, 44, 0.4)); /* #2ca02c */
}
#TheoCompBio text {
fill: #d62728;
isolation: isolate;
}
#TheoCompBio text:hover {
fill: #aa2a2a;
}
#TheoCompBio a:hover {
filter: drop-shadow(0px 0px 3px rgba(214, 39, 40, 0.4)); /* #d62728 */
}
@media screen and (max-width: 640px) {
#venn-mobile svg text .venn-mb-headings {
font-size: 1.1em;
}
}
/* Animated venn circles not displaying below 1024px screen resolution */
@media (max-width: 1023.98px) {
#venn {
display: none;
}
}
/* Animated Venn circles displaying from 1024px screen resolution */
@media (min-width: 1024px) {
#venn-mobile {
display: none;
}
#venn {
position: relative;
margin-top: -20px;
padding-top: 50px;
width: 860px;
height: 900px;
overflow: hidden;
}
#venn p {
margin-top: 0 !important;
}
#venn a, #venn a:hover, #venn a:link {
text-decoration: none;
}
#venn ul {
list-style: none;
font-weight: normal;
margin-top: 0;
margin-bottom: 1rem;
}
#venn ul li::before {
content: "• ";
color: white;
}
#venn ul ul {
margin-bottom: 0;
}
/* circle 01 - neurobio */
.circle01-all-content-container {
position: relative;
width: 260px;
}
.circneuro-container {
position: relative;
z-index: 950;
height: 260px;
top: 64px;
left: 50px;
}
.circneuro-blue {
position: absolute;
background: url('img_focalp/circle-neurobio-blue.svg');
width: 260px;
height: 260px;
}
.circneuro-img {
position: absolute;
opacity: 0;
background: url('img_focalp/circle-neurobio-transparent-360x360.png') no-repeat;
background-size: cover;
width: 260px;
height: 260px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circneuro-container:hover {
z-index: 950;
}
.circneuro-container:hover .circneuro-img {
margin-top: -30px;
margin-left: 20px;
opacity: 1;
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
/* heading of circle 01, before hover */
.heading-text.neurobio {
position: relative;
top: 64px;
left: -38px;
color: rgba(31, 119, 180, 1); /* blue #1f77b4 */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
/* heading and blurb-text 01, ON hover */
.circneuro-container:hover .heading-text.neurobio {
position: relative;
z-index: 951;
top: -6px;
left: 50px;
color: rgba(255, 255, 255, 1);
}
a:hover .heading-text.neurobio {
color: rgba(255,255,255,1);
text-decoration: none;
}
#venn ul.neurobio {
width: 260px;
margin-top: 20px;
margin-left: 22px; /* key property for indentation after removed list-style */
text-indent: -16px; /* key property for indentation after removed list-style */
}
.blurb.nb-01 {
position: relative;
z-index: 951;
margin-top: 2px;
margin-left: 18px;
font-size: 1.125rem;
color: rgba(255,255,255,0);
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circneuro-container:hover .blurb.nb-01 {
color: rgba(255,255,255,1);
opacity: 0.9;
}
/* circle 02 - theocompbio */
.circle02-all-content-container {
position: relative;
width: 230px;
}
.circtheocb-container {
position: relative;
z-index: 920;
height: 230px;
top: -220px;
left: 222px;
}
.circtheocb-red {
position: absolute;
background: url('img_focalp/circle-theocompbio-red.svg');
width: 230px;
height: 230px;
}
.circtheocb-img {
position: absolute;
opacity: 0;
background: url('img_focalp/circle-theocompbio-transparent-330x330.png') no-repeat;
background-size: cover;
width: 230px;
height: 230px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circtheocb-container:hover {
z-index: 960;
}
.circtheocb-container:hover .circtheocb-img {
margin-top: -30px;
margin-left: 20px;
opacity: 1;
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
/* heading-text of circle 02, before hover */
.heading-text.theocompbio {
position: relative;
top: -52px;
left: 2px;
color: rgb(214, 39, 40); /* red #d62728 */
line-height: 1.05;
font-size: 1.625rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
/* heading-text and blurb-text 02, ON hover */
.circtheocb-container:hover .heading-text.theocompbio {
position: relative;
top: -34px;
left: 20px;
color: rgba(188, 5, 1, 1);
}
/* short-text postion */
#venn ul.theocompbio {
width: 260px;
margin-top: -20px;
margin-left: -12px; /* key property for indentation after removed list-style */
text-indent: -16px; /* list-style removed to overwrite hu-theme style */
}
#venn ul.theocompbio li::before {
color: #d62728;
}
.blurb.cb-02 {
position: relative;
z-index: 961;
margin-top: -20px;
margin-left: -22px;
font-size: 1.125rem;
white-space: nowrap;
color: rgba(188, 1, 1, 0); /* darker red */;
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circtheocb-container:hover .blurb.cb-02 {
color: rgba(188, 1, 1, 1); /* darker red */;
opacity: 1;
}
/* circle 03 - quantspatbio */
.circle03-all-content-container {
position: relative;
width: 430px;
}
.circspatbio-container {
position: relative;
z-index: 700;
height: 430px;
top: -378px;
left: 204px;
}
.circspatbio-orange {
position: absolute;
background: url('img_focalp/circle-quantspatbio-orange.svg');
width: 430px;
height: 430px;
}
.circspatbio-img {
position: absolute;
z-index: 700;
opacity: 0;
background: url('img_focalp/circle-quantspatbio-500x500.png') no-repeat;
background-size: cover;
width: 430px;
height: 430px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circspatbio-container:hover {
z-index: 980;
}
.circspatbio-container:hover .circspatbio-img {
margin-top: -30px;
margin-left: 20px;
opacity: 1;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
/* heading-text of circle 03, before hover */
.heading-text.quantspatbio {
position: relative;
display: inline-block;
margin-bottom: 1px;
top: 320px;
left: -192px;
color: rgb(255, 127, 14); /* orange #ff7f0e */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
/* heading-text and blurb 03, ON hover */
.circspatbio-container:hover .heading-text.quantspatbio {
position: relative;
z-index: 981;
top: 52px;
left: 26px;
font-size: 1.925rem;
color: rgb(255, 127, 14); /* orange #ff7f0e */
}
/* short-text postion */
#venn ul.quantspatbio {
width: 340px;
margin-top: 70px;
margin-left: 80px; /* key property for indentation after removed list-style */
text-indent: -16px; /* key property for indentation after removed list-style */
}
.blurb.sb-03 {
position: relative;
z-index: 981;
margin-top: 84px;
margin-left: 76px;
font-size: 1.125rem;
color: rgba(255,255,255,0);
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circspatbio-container:hover .blurb.sb-03 {
color: rgba(255,255,255,1);
opacity: 0.9;
}
/* circle 04 - biophys */
.circle04-all-content-container {
position: relative;
width: 240px;
}
.circbioph-container {
position: relative;
z-index: 920;
height: 240px;
top: -756px;
left:124px;
}
.circbioph-lila {
position: absolute;
background: url('img_focalp/circle-biophysics-lila.svg');
width: 240px;
height: 240px;
}
.circbioph-img {
position: absolute;
opacity: 0;
background: url('img_focalp/circle-biophysics-300x300.png') no-repeat;
background-size: cover;
width: 240px;
height: 240px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circbioph-container:hover {
z-index: 970;
}
.circbioph-container:hover .circbioph-img {
margin-top: -30px;
margin-left: 1px;
opacity: 1;
width: 300px;
height: 300px;
}
/* heading-text of circle 04, before hover */
.heading-text.biophys {
position: relative;
top: 146px;
left: -76px;
color: rgb(148, 103, 189); /* lila #9467bd */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
/* heading-text and blurb 04, ON hover */
.circbioph-container:hover .heading-text.biophys {
position: relative;
z-index: 971;
top: 28px;
left: 68px;
font-size: 1.925rem;
color: rgb(255, 255, 255); /* white */
}
/* short-text postion */
#venn ul.biophys {
width: 280px;
margin-top: 4px;
margin-left: 20px; /* key property for indentation after removed list-style */
text-indent: -16px; /* key property for indentation after removed list-style */
}
.blurb.bp-04 {
position: relative;
z-index: 971;
top: 32px;
margin-left: -4px;
margin-right: -6rem;
font-size: 1.125rem;
color: rgba(255,255,255,0);
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circbioph-container:hover .blurb.bp-04 {
color: rgba(255,255,255,1);
opacity: 1;
}
/* circle 05 - infbio */
.circle05-all-content-container {
position: relative;
width: 270px;
}
.circbinfb-container {
position: relative;
z-index: 800;
width: 270px;
top: -992px;
left: 400px;
}
.circbinfb-green {
position: absolute;
background: url('img_focalp/circle-infbio-green.svg');
width: 270px;
height: 270px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circbinfb-img {
position: absolute;
opacity: 0;
background: url('img_focalp/circle-infbio-transparent-400x400.png') no-repeat;
background-size: cover;
width: 270px;
height: 270px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circbinfb-container:hover {
z-index: 980;
}
.circbinfb-container:hover .circbinfb-green {
margin-top: -30px;
margin-left: 50px;
}
.circbinfb-container:hover .circbinfb-img {
margin-top: -30px;
margin-left: 40px;
opacity: 1;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
/* heading-text of circle 05, before hover */
.heading-text.infbio {
position: relative;
top: 100px;
left: 160px;
color: rgb(44, 160, 44); /* green #2ca02c */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}
/* heading-text and blurb 05, ON hover */
.circbinfb-container:hover .heading-text.infbio {
position: relative;
z-index: 981;
top: 22px;
left: 60px;
font-size: 1.625rem;
color: rgb(44, 160, 44); /* green #2ca02c */
padding-right: 2px;
padding-left: 4px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 10px 0 0 rgba(255, 255, 255, 0.8); -10px 0 0 rgba(255, 255, 255, 0.8);
}
/* short-text postion */
#venn ul.infbio {
width: 320px;
margin-top: -8px;
margin-left: -20px; /* key property for indentation after removed list-style */
text-indent: -14px; /* list-style removed to overwrite hu-theme styles */
padding: 4px 5px 4px 14px;
}
.blurb.if-05 {
position: relative;
z-index: 981;
top: 52px;
left: 90px;
font-size: 1rem;
color: rgba(255,255,255,0);
opacity: 0;
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circbinfb-container ul {
display: inline-block;
margin-bottom: 0;
padding-right: 24px;
padding-bottom: 2px;
background: rgba(0, 0, 0,.6);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.circbinfb-container:hover .blurb.if-05 {
color: rgba(255,255,255,1);
opacity: 0.9;
top: 32px;
left: 54px;
}
/* circle 06 - bioevo */
.circle06-all-content-container {
position: relative;
width: 286px;
}
/* Circles need to move up or down HERE, when more or less text is inserted */
/* Circle position before moving up: top -820px */
.circbiod-container {
position: relative;
z-index: 750;
height: 286px;
top: -900px;
left: 270px;
}
.circbiod-brown {
position: absolute;
z-index: 760;
background: url('img_focalp/circle-bioevo-brown.svg');
width: 286px;
height: 286px;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.circbiod-img {
position: absolute;
z-index: 761;
opacity: 0;
background: url('img_focalp/circle-bioeveo-jasione-300x300.png') no-repeat;
background-size: cover;
width: 286px;
height: 286px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circbiod-container:hover {
z-index: 983;
}
.circbiod-container:hover .circbiod-brown {
opacity: 0;
}
.circbiod-container:hover .circbiod-img {
margin-top: -30px;
margin-left: 10px;
opacity: 1;
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
-o-transform:scale(1.3);
transform:scale(1.3);
}
/* heading-text of circle 06, before hover */
.heading-text.bioevo {
position: relative;
z-index: 763;
top: 70px;
left: 1px;
color: rgb(140, 86, 75); /*brown #8c564b */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
/* heading-text and blurb 06, ON hover */
.circbiod-container:hover .heading-text.bioevo {
position: relative;
z-index: 763;
top: -12px;
left: 12px;
color: rgb(255, 255, 255); /* white */
font-size: 1.925rem;
}
#venn ul.bioevo {
width: 240px;
margin-left: 40px; /* key property for indentation after removed list-style */
text-indent: -16px; /* key property for indentation after removed list-style */
}
.blurb.bd-06 {
position: relative;
z-index: 981;
margin-top: 36px;
margin-left: 44px;
font-size: 1.125rem;
color: rgba(255,255,255,0);
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circbiod-container:hover .blurb.bd-06 {
color: rgba(255,255,255,1);
opacity: 0.9;
}
/* circle 07 - bioedu */
.circle07-all-content-container {
position: relative;
width: 210px;
}
/* Circle position before moving up: top -1106px, left 600px */
.circbioed-container {
position: relative;
width: 210px;
top: -1208px;
left: 562px;
}
.circbioed-mud {
position: absolute;
z-index: 800;
background: url('img_focalp/circle-bioedu-shape-mud.svg');
width: 210px;
height: 210px;
}
.circbioed-img {
position: absolute;
z-index: 800;
opacity: 0;
background: url('img_focalp/circle-bioedu-mud-140x140.png') no-repeat;
background-size: cover;
width: 210px;
height: 210px;
border-radius: 50%;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.circbioed-container:hover .circbioed-img {
z-index: 980;
margin-top: 4px;
margin-left: 6px;
opacity: 1;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
/* heading-text of circle 07, before hover */
.heading-text.bioedu {
position: relative;
top: 116px;
left: 74px;
color: rgb(114, 106, 36); /* mud-brown #726a24 */
line-height: 1;
font-size: 1.625rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
/* heading-text and blurb 07, ON hover */
.circbioed-container:hover .heading-text.bioedu {
position: relative;
z-index: 981;
top: 36px;
left: 42px;
font-size: 1.925rem;
}
#venn ul.bioedu {
width: 220px;
margin-top: 42px;
margin-left: 26px; /* key property for indentation after removed list-style */
text-indent: -16px; /* key property for indentation after removed list-style */
}
.blurb.be-07 {
position: relative;
z-index: 981;
margin-top: 44px;
margin-left: 12px;
font-size: 1.125rem;
color: rgba(255,255,255,0);
opacity: 0;
-ms-transform: scale(.9);
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}
.circbioed-container:hover .blurb.be-07 {
color: rgba(255,255,255,1);
opacity: 0.9;
}
}
/* End of Focal Points venn circles chart */
/*!
* IfB custom styles
* IfB Focal Points group profile cards
*/
a, a:hover {
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.profilecard {
display: flex;
flex-wrap: wrap;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
border-radius: 10px;
margin: 0 0 2rem 0;
overflow: hidden;
position: relative;
color: #ffffff;
}
.profilecard.dark {
background-color: #18151f;
}
.profilecard.light {
background-color: #e1e5ea;
}
.profilecard .t-dark {
color: #18151f;
}
.profilecard a {
color: inherit;
}
.profilecard h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.75rem;
font-weight: 500;
line-height: 1.2;
color: #003366;
}
.profilecard .profilecard__title {
margin-top: 0.75em;
padding-top: 0.25em;
}
.profilecard__subtitle p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.profilecard .profilecard__img {
max-height: 180px;
width: 100%;
object-fit: cover;
position: relative;
}
.profilecard .profilecard__img_link {
display: contents;
}
.profilecard .profilecard__bar {
width: 50px;
height: 6px;
min-height: 6px;
max-height: 6px;
margin: 10px 0;
border-radius: 5px;
background-color: #424242;
transition: width 0.2s ease;
}
.profilecard .profilecard__text {
padding: 1.5rem;
position: relative;
display: flex;
flex-direction: column;
}
.profilecard .profilecard__preview-txt {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
height: 100%;
}
.profilecard .profilecard__tagbox {
display: flex;
flex-flow: row wrap;
font-size: 14px;
margin: 20px 0 0 0;
padding: 0;
justify-content: center;
}
.profilecard .profilecard__tagbox a {
display: inline-block;
background: rgba(83, 83, 83, 0.4);
border-radius: 3px;
padding: 2.5px 10px;
margin: 0 5px 5px 0;
cursor: pointer;
user-select: none;
transition: background-color 0.3s;
}
.profilecard .profilecard__tagbox a:hover {
background: rgba(83, 83, 83, 0.8);
}
/* Profilecard__tagbox icon */
/* SVG styles for each arrow icon inside button link, as plone did not accept html for bg img */
.profilecard__tagbox svg {
width: 1.125em;
height: 1.120em;
vertical-align: text-bottom;
margin-left: 0.25em;
}
.profilecard .profilecard__tagbox .tag__item {
display: inline-block;
background: rgba(83, 83, 83, 0.4);
border-radius: 3px;
padding: 2.5px 10px;
margin: 0 5px 5px 0;
cursor: pointer;
user-select: none;
transition: background-color 0.3s;
}
.profilecard .profilecard__tagbox .tag__item:hover {
background: rgba(83, 83, 83, 0.8);
}
.profilecard:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(-70deg, #424242, transparent 50%);
opacity: 1;
border-radius: 10px;
}
.profilecard:hover .profilecard__bar {
width: 100px;
}
/* Adapting content width dynamically, with only one media query */
/* Using dynamic margin-right, as HU theme-compiled css enlarges container from 768px to 1024px */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
#profile-cards {
margin-right: calc(133.33% - 100vw);
padding-right: 2.0em;
}
}
/* changing style from 1024px upwards */
@media screen and (min-width: 1024px) {
.profilecard {
flex-wrap: inherit;
}
.profilecard .profilecard__title {
margin-top: 0;
padding-top: 0;
font-size: 2rem;
}
.profilecard .profilecard__tagbox {
justify-content: start;
}
.profilecard .profilecard__img {
max-width: 300px;
max-height: 100%;
transform: scale(1.05);
transition: transform 0.3s ease;
}
.profilecard .profilecard__text {
padding: 2rem 3.5rem;
width: 100%;
}
.profilecard__text:before {
content: "";
position: absolute;
display: block;
top: -20%;
height: 130%;
width: 55px;
}
.profilecard.light .profilecard__text:before {
background: #e1e5ea;
}
.profilecard:hover .profilecard__img {
transform: scale(1.15);
}
.profilecard:nth-child(2n+1) {
flex-direction: row;
}
.profilecard:nth-child(2n+0) {
flex-direction: row-reverse;
}
.profilecard:nth-child(2n+1) .profilecard__text::before {
left: -12px !important;
transform: rotate(4deg);
}
.profilecard:nth-child(2n+0) .profilecard__text::before {
right: -12px !important;
transform: rotate(-4deg);
}
/* This repairs overlap of heading and text from the LEFT, otherwise occurring */
.profilecard:nth-child(2n+1) .profilecard__text {
padding-left: 3.6rem;
}
}
/* Profile image portraits */
/*!
* Note: Much larger text or much larger image size vertically
* influences the size of the card, and this way the space the
* positions of elements like portrait images orient themselves on;
* Therefore, text inside profilecard__preview should have maximum
* length of 450 characters
*/
.profilecard:nth-of-type(odd) img.profile-links-rechts {
position: absolute;
width:100px;
top: -14%;
left: 37%;
margin-left: 10px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 1);
}
.profilecard:nth-of-type(even) img.profile-links-rechts {
position: absolute;
width:100px;
top: -14%;
left: 37%;
margin-left: 10px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 1);
}
@media screen and (min-width: 580px) {
.profilecard:nth-of-type(odd) img.profile-links-rechts,
.profilecard:nth-of-type(even) img.profile-links-rechts {
top: -17%;
left: 38%;
}
}
@media screen and (min-width: 620px) and (max-width: 767.98px) {
.profilecard:nth-of-type(odd) img.profile-links-rechts,
.profilecard:nth-of-type(even) img.profile-links-rechts {
top: -18%;
left: 38%;
}
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
.profilecard:nth-of-type(odd) img.profile-links-rechts,
.profilecard:nth-of-type(even) img.profile-links-rechts {
top: -17%;
left: 40%;
transform: translateX(-10);
}
}
/* From 1024px the style changes to horizontal layout */
@media (min-width: 1024px) {
.profilecard:nth-of-type(odd) img.profile-links-rechts {
top: 24%;
left: -10%;
transform: translateX(-18%);
}
.profilecard:nth-of-type(even) img.profile-links-rechts {
top: 24%;
left: 90%;
}
}
@media (min-width: 1199px) {
.profilecard:nth-of-type(odd) img.profile-links-rechts {
left: -8%;
}
.profilecard:nth-of-type(even) img.profile-links-rechts {
left: 91.5%;
}
}
/* COLORS */
/* green */
.profilecard .profilecard__tagbox .green.play:hover {
background: #79dd09;
color: black;
}
.green .profilecard__title a:hover {
color: #79dd09 !important;
}
.green .profilecard__bar {
background-color: #79dd09;
}
.green::before {
background-image: linear-gradient(-30deg, rgba(121, 221, 9, 0.1), transparent 50%);
}
.green:nth-child(2n)::before {
background-image: linear-gradient(30deg, rgba(121, 221, 9, 0.1), transparent 50%);
}
/* blue */
.profilecard .profilecard__tagbox .blue.play:hover {
background: #0076bd;
}
.blue .profilecard__title a:hover {
color: #0076bd !important;
}
.blue .profilecard__bar {
background-color: #0076bd;
}
.blue::before {
background-image: linear-gradient(-30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}
.blue:nth-child(2n)::before {
background-image: linear-gradient(30deg, rgba(0, 118, 189, 0.1), transparent 50%);
}
/* brown */
.profilecard .profilecard__tagbox .brown.play:hover {
background: #a39665;
}
.brown .profilecard__title a:hover {
color: #a39665 !important;
}
.brown .profilecard__bar {
background-color: #a39665;
}
.brown::before {
background-image: linear-gradient(-30deg, rgba(147, 130, 69, 0.15), transparent 50%);
}
.brown:nth-child(2n)::before {
background-image: linear-gradient(30deg, rgba(147, 130, 69, 0.15), transparent 50%);
}
/* red */
.profilecard .profilecard__tagbox .red.play:hover {
background: #bd150b;
}
.red .profilecard__title a:hover {
color: #bd150b !important;
}
.red .profilecard__bar {
background-color: #bd150b;
}
.red::before {
background-image: linear-gradient(-30deg, rgba(189, 21, 11, 0.1), transparent 50%);
}
.red:nth-child(2n)::before {
background-image: linear-gradient(30deg, rgba(189, 21, 11, 0.1), transparent 50%);
}
/* yellow */
.profilecard .profilecard__tagbox .yellow.play:hover {
background: #bdbb49;
color: black;
}
.yellow .profilecard__title a:hover {
color: #bdbb49 !important;
}
.yellow .profilecard__bar {
background-color: #bdbb49;
}
.yellow::before {
background-image: linear-gradient(-30deg, rgba(189, 187, 73, 0.1), transparent 50%);
}
.yellow:nth-child(2n)::before {
background-image: linear-gradient(30deg, rgba(189, 187, 73, 0.1), transparent 50%);
}
@media screen and (min-width: 768px) {
.green::before {
background-image: linear-gradient(-80deg, rgba(121, 221, 9, 0.1), transparent 50%);
}
.green:nth-child(2n)::before {
background-image: linear-gradient(80deg, rgba(121, 221, 9, 0.1), transparent 50%);
}
.blue::before {
background-image: linear-gradient(-80deg, rgba(0, 118, 189, 0.1), transparent 50%);
}
.blue:nth-child(2n)::before {
background-image: linear-gradient(80deg, rgba(0, 118, 189, 0.1), transparent 50%);
}
.brown::before {
background-image: linear-gradient(-80deg, rgba(147, 130, 69, 0.15), transparent 50%);
}
.brown:nth-child(2n)::before {
background-image: linear-gradient(80deg, rgba(147, 130, 69, 0.15), transparent 50%);
}
.red::before {
background-image: linear-gradient(-80deg, rgba(189, 21, 11, 0.1), transparent 50%);
}
.red:nth-child(2n)::before {
background-image: linear-gradient(80deg, rgba(189, 21, 11, 0.1), transparent 50%);
}
.yellow::before {
background-image: linear-gradient(-80deg, rgba(189, 187, 73, 0.1), transparent 50%);
}
.yellow:nth-child(2n)::before {
background-image: linear-gradient(80deg, rgba(189, 187, 73, 0.1), transparent 50%);
}
}