Template:BNU-CHINA/CSS/main
/*****
Background *****/
- mw-content-text, body {
background-image: url(""); -webkit-font-smoothing: antialiased;
}
.content.container {
margin-top: 24px;
}
/*****
Header *****/
.navbar-siren {
border: none; border-radius: 0; margin: 0; background-color: rgba(255, 255, 255, .95); box-shadow: 0 4px 0 #eb9745;
}
/*****
Header: navigation *****/
.navbar-siren .navbar-nav {
display: table-row;
}
.navbar-siren .navbar-nav > li {
transition: box-shadow 2s, background-color 0.25s; float: none; cursor: pointer; display: table-cell; vertical-align: middle; font-family: "Raleway Thin", sans-serif; font-size: 18px; box-shadow: 0 4px 0 #eb9745;
}
.navbar-siren .navbar-nav > li:hover {
box-shadow: 0 4px 0 #D3853D; transition: box-shadow 0.25s, background-color 0.25s; background-color: #D3853D;
}
.navbar-siren .navbar-nav > li.active {
box-shadow: 0 4px 0 #D3853D;
}
.navbar-siren .navbar-nav > li > a {
text-align: center; transition: color 0.25s; color: #000;
}
.navbar-siren .navbar-nav > li:hover > a {
color: white;
}
.navbar-siren .navbar-nav > li > a:hover {
background-color: transparent; color: white;
}
.navbar-siren .navbar-nav > li svg {
margin: 0 auto 6px auto; display: block; width: 36px; height: 36px;
}
.navbar-siren .navbar-nav > li svg * {
transition: all 0.25s;
}
.navbar-siren .navbar-nav > li:hover svg * {
stroke: #fff; fill: #D3853D;
}
.navbar-siren .navbar-nav li .dropdown-menu {
min-width: 150%; text-align: left; padding: 0; border: 0; background-color: #D3853D; border-radius: 0; box-shadow: 1px 3px 2px rgba(120, 120, 120, .5); transition: visibility 0s, opacity 0.25s; display: block; opacity: 0; visibility: hidden;
}
.navbar-siren .navbar-nav li:hover .dropdown-menu {
opacity: 1; visibility: visible;
}
.navbar-siren .navbar-nav li.open a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a {
font-family: "Raleway Thin", sans-serif; font-size: 1.2em; padding: 1em; color: #fff;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover {
background-color: #eb9745;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:active {
background-color: #ffa44c;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a::after {
content: ""; display: block; width: 0; height: 1px; transition: all 0.5s ease-out; background-color: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {
content: ""; display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .5);
}
/*****
Header: logo *****/
.navbar-siren .navbar-header {
display: inline-block;
}
.navbar-siren .navbar-logo {
height: auto;
}
.navbar-siren .navbar-logo img {
width: 240px;
}
/*****
Article *****/
.content > article {
opacity: .95; padding: 2em 4em; min-width: 640px; background-color: #fff; box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);
}
/*****
Article: reference *****/
.reference {
margin: 48px 0 24px 0;
}
.reference:before {
color: #278A75; font-family: 'Computer Modern Bright Semibold', sans-serif; font-size: 24px; content: "Reference";
}
- globalWrapper .reference > ol, .reference > ol {
margin: 0; padding: 0; list-style-type: none; counter-reset: counter;
}
.reference > ol li {
font-family: 'Computer Modern Serif', serif; margin: 6px 0;
}
.reference > ol li::before {
margin-right: 4px; letter-spacing: 2px; display: inline-block; font-family: 'Computer Modern Serif', serif; content: '[' counter(counter) ']'; counter-increment: counter;
}
/*****
Article: header *****/
article > header.page-header {
text-align: center; font-family: 'Computer Modern Bright Semibold', sans-serif; font-style: italic; letter-spacing: -1px; border: none;
}
article > header.page-header::before {
content: ""; display: block; border-radius: 24px; position: relative; width: 0; padding-left: 48px; margin: auto; height: 48px; background-color: #eee;
}
article > header.page-header h1 {
font-weight: 500; font-size: 48px;
}
article > header h1 > small {
display: block; margin: 12px 0; font-size: 24px; letter-spacing: 1px;
}
article h2, article h3, article h4, article h5 {
font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: 500; color: #a5682f;
}
article h2 {
font-size: 24px; border-bottom: 1px solid #eee; cursor: pointer;
}
article h3 {
font-size: 18px; word-spacing: -2px;
}
/*****
Article: figure *****/
article figure {
padding: 1em 0;
}
article figure img {
max-width: 100%;
}
article figure figcaption {
text-align: center; font-family: 'Computer Modern Serif', serif; color: #278A75; padding: 0.5em;
}
/*****
Article: paragraph *****/
article p, article blockquote {
font-family: 'Computer Modern Serif', serif; font-size: 15px;
}
/*****
Article: link *****/
article a {
color: #278A75;
}
article a:hover {
color: #D3853D; text-decoration: none;
}
/*****
Team: people *****/
.people {
background-color: #fff;
}
.people .people-figure {
border: 3px solid #fff; cursor: pointer; padding: 33.33% 0 0 0; margin: 0; position: relative; overflow: hidden;
}
.people .people-figure > p {
padding: 1em; font-size: 1.2em; font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: bold; background-color: transparent; position: absolute; height: 100%; color: transparent; top: 0; z-index: 101; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure > p:hover {
background-color: rgba(211, 133, 61, .5); color: #fff; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-avatar {
transition: all 0.6s ease-in-out; padding: 1em; font-size: 1.2em; font-family: serif; position: absolute; color: transparent; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; z-index: 100;
}
.people .people-figure p:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro {
padding: 1em; font-size: 1.2em; font-family: 'Dancing Script', cursive; font-weight: bold; background-color: transparent; position: absolute; height: 100%; top: 0; z-index: 101; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure .people-intro:hover {
background-color: rgba(211, 133, 61, .5); transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-figure .people-intro:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro > h1 {
font-family: 'Dancing Script', cursive; font-weight: lighter; color: white; padding: 0 0 8px 0; margin: 0; font-size: 32px;
}
.people .people-figure .people-intro > p {
font-family: 'Computer Modern Bright Semibold', sans-serif; color: transparent; font-weight: normal; padding: 0; margin: 0; font-size: 16px; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s; line-height: 28px;
}
.people .people-figure .people-intro:hover > p {
color: white; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
/*****
Article: video *****/
article video {
width: 480px; height: 270px; background-color: #000; background-size: 100% 100%; display : block; margin: 25px auto;
}
/*****
Home: wrapper *****/
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper .wrapper-text {
position: absolute; width: 100%; left: 0; top: 0; padding: 10% 20% 20% 20%; color: white;
}
.wrapper .wrapper-text h1 {
text-align: center; font-size: 72px; color: rgba(255, 255, 255, .75); font-family: 'Computer Modern Bright Semibold', sans-serif;
}
.wrapper .wrapper-text p {
padding: 24px 48px; font-size: 24px; line-height: 32px; font-family: "Raleway Thin", sans-serif; font-weight: 700; color: rgba(255, 255, 255, .9); background-color: rgba(41, 30, 21, .15); box-shadow: 0 0 24px rgba(0, 0, 0, .5); border: 1px solid rgba(180, 180, 180, .5); transition: all 0.6s ease-in-out; border-radius: 1px;
}
.wrapper .wrapper-text p:hover {
background-color: rgba(255, 255, 255, .15); color: #fff; border: 1px solid transparent; box-shadow: 0 0 24px rgba(0, 0, 0, .5);
}
/*****
Responsive: iPad *****/
@media screen and (max-width: 1024px) {
.container { width: 100%; margin: 0; padding: 0; }
.content.container { margin: 0; }
.navbar-siren { box-shadow: none; border-bottom: 4px solid black; }
.navbar-siren .container { padding: 0; margin: 0 0 0 -15px; }
.navbar-siren .navbar-header { text-align: center; }
.navbar-siren .navbar-nav > li { box-shadow: none; }
.navbar-siren .navbar-nav > li { font-size: 15px; }
.navbar-siren .navbar-nav > li.active { box-shadow: none; }
.navbar-siren .navbar-nav > li svg { margin: 8px auto 4px auto; width: 32px; height: 32px; }
article.col-md-12 { margin: 0; box-shadow: none; width: 100%; }
.wrapper .wrapper-text { padding: 10% 15%; }
.wrapper .wrapper-text h1 { font-size: 36px; }
.wrapper .wrapper-text p { font-size: 18px; line-height: 24px; padding: 12px 24px; }
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
article p { font-size: 18px; }
.navbar-siren .navbar-nav > li { vertical-align: top; }
.caret { font-size: 6px; }
}
@media screen and (max-width: 640px) {
.navbar-siren .navbar-nav > li { height: 50px; font-size: 14px; }
.navbar-siren .navbar-nav > li svg { display: none; }
.navbar-siren .navbar-nav > li a:first-child{ padding-left: 15px; }
.navbar-siren .navbar-nav > li a{ margin-top: 10px; padding: 10px 2px; }
.navbar-siren { height: auto; border-bottom: 1px solid black; }
.caret { display: none; }
} /*****
Background *****/
- mw-content-text, body {
background-image: url(""); -webkit-font-smoothing: antialiased;
}
.content.container {
margin-top: 24px;
}
/*****
Header *****/
.navbar-siren {
border: none; border-radius: 0; margin: 0; background-color: rgba(255, 255, 255, .95); box-shadow: 0 4px 0 #eb9745;
}
/*****
Header: navigation *****/
.navbar-siren .navbar-nav {
display: table-row;
}
.navbar-siren .navbar-nav > li {
transition: box-shadow 2s, background-color 0.25s; float: none; cursor: pointer; display: table-cell; vertical-align: middle; font-family: "Raleway Thin", sans-serif; font-size: 18px; box-shadow: 0 4px 0 #eb9745;
}
.navbar-siren .navbar-nav > li:hover {
box-shadow: 0 4px 0 #D3853D; transition: box-shadow 0.25s, background-color 0.25s; background-color: #D3853D;
}
.navbar-siren .navbar-nav > li.active {
box-shadow: 0 4px 0 #D3853D;
}
.navbar-siren .navbar-nav > li > a {
text-align: center; transition: color 0.25s; color: #000;
}
.navbar-siren .navbar-nav > li:hover > a {
color: white;
}
.navbar-siren .navbar-nav > li > a:hover {
background-color: transparent; color: white;
}
.navbar-siren .navbar-nav > li svg {
margin: 0 auto 6px auto; display: block; width: 36px; height: 36px;
}
.navbar-siren .navbar-nav > li svg * {
transition: all 0.25s;
}
.navbar-siren .navbar-nav > li:hover svg * {
stroke: #fff; fill: #D3853D;
}
.navbar-siren .navbar-nav li .dropdown-menu {
min-width: 150%; text-align: left; padding: 0; border: 0; background-color: #D3853D; border-radius: 0; box-shadow: 1px 3px 2px rgba(120, 120, 120, .5); transition: visibility 0s, opacity 0.25s; display: block; opacity: 0; visibility: hidden;
}
.navbar-siren .navbar-nav li:hover .dropdown-menu {
opacity: 1; visibility: visible;
}
.navbar-siren .navbar-nav li.open a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li a.dropdown-toggle {
background: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a {
font-family: "Raleway Thin", sans-serif; font-size: 1.2em; padding: 1em; color: #fff;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover {
background-color: #eb9745;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:active {
background-color: #ffa44c;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a::after {
content: ""; display: block; width: 0; height: 1px; transition: all 0.5s ease-out; background-color: transparent;
}
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {
content: ""; display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .5);
}
/*****
Header: logo *****/
.navbar-siren .navbar-header {
display: inline-block;
}
.navbar-siren .navbar-logo {
height: auto;
}
.navbar-siren .navbar-logo img {
width: 240px;
}
/*****
Article *****/
.content > article {
opacity: .95; padding: 2em 4em; min-width: 640px; background-color: #fff; box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);
}
/*****
Article: reference *****/
.reference {
margin: 48px 0 24px 0;
}
.reference:before {
color: #278A75; font-family: 'Computer Modern Bright Semibold', sans-serif; font-size: 24px; content: "Reference";
}
- globalWrapper .reference > ol, .reference > ol {
margin: 0; padding: 0; list-style-type: none; counter-reset: counter;
}
.reference > ol li {
font-family: 'Computer Modern Serif', serif; margin: 6px 0;
}
.reference > ol li::before {
margin-right: 4px; letter-spacing: 2px; display: inline-block; font-family: 'Computer Modern Serif', serif; content: '[' counter(counter) ']'; counter-increment: counter;
}
/*****
Article: header *****/
article > header.page-header {
text-align: center; font-family: 'Computer Modern Bright Semibold', sans-serif; font-style: italic; letter-spacing: -1px; border: none;
}
article > header.page-header::before {
content: ""; display: block; border-radius: 24px; position: relative; width: 0; padding-left: 48px; margin: auto; height: 48px; background-color: #eee;
}
article > header.page-header h1 {
font-weight: 500; font-size: 48px;
}
article > header h1 > small {
display: block; margin: 12px 0; font-size: 24px; letter-spacing: 1px;
}
article h2, article h3, article h4, article h5 {
font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: 500; color: #a5682f;
}
article h2 {
font-size: 24px; border-bottom: 1px solid #eee; cursor: pointer;
}
article h3 {
font-size: 18px; word-spacing: -2px;
}
/*****
Article: figure *****/
article figure {
padding: 1em 0;
}
article figure img {
max-width: 100%;
}
article figure figcaption {
text-align: center; font-family: 'Computer Modern Serif', serif; color: #278A75; padding: 0.5em;
}
/*****
Article: paragraph *****/
article p, article blockquote {
font-family: 'Computer Modern Serif', serif; font-size: 15px;
}
/*****
Article: link *****/
article a {
color: #278A75;
}
article a:hover {
color: #D3853D; text-decoration: none;
}
/*****
Team: people *****/
.people {
background-color: #fff;
}
.people .people-figure {
border: 3px solid #fff; cursor: pointer; padding: 33.33% 0 0 0; margin: 0; position: relative; overflow: hidden;
}
.people .people-figure > p {
padding: 1em; font-size: 1.2em; font-family: 'Computer Modern Bright Semibold', sans-serif; font-weight: bold; background-color: transparent; position: absolute; height: 100%; color: transparent; top: 0; z-index: 101; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure > p:hover {
background-color: rgba(211, 133, 61, .5); color: #fff; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-avatar {
transition: all 0.6s ease-in-out; padding: 1em; font-size: 1.2em; font-family: serif; position: absolute; color: transparent; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; z-index: 100;
}
.people .people-figure p:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro {
padding: 1em; font-size: 1.2em; font-family: 'Dancing Script', cursive; font-weight: bold; background-color: transparent; position: absolute; height: 100%; top: 0; z-index: 101; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s;
}
.people .people-figure .people-intro:hover {
background-color: rgba(211, 133, 61, .5); transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
.people .people-figure .people-intro:hover + .people-avatar {
background-position: center;
}
.people .people-figure .people-intro > h1 {
font-family: 'Dancing Script', cursive; font-weight: lighter; color: white; padding: 0 0 8px 0; margin: 0; font-size: 32px;
}
.people .people-figure .people-intro > p {
font-family: 'Computer Modern Bright Semibold', sans-serif; color: transparent; font-weight: normal; padding: 0; margin: 0; font-size: 16px; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0s; line-height: 28px;
}
.people .people-figure .people-intro:hover > p {
color: white; transition-property: all; transition-duration: 0.6s; transition-timing-function: ease-out; transition-delay: 0.75s;
}
/*****
Article: video *****/
article video {
width: 480px; height: 270px; background-color: #000; background-size: 100% 100%; display : block; margin: 25px auto;
}
/*****
Home: wrapper *****/
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper .wrapper-text {
position: absolute; width: 100%; left: 0; top: 0; padding: 10% 20% 20% 20%; color: white;
}
.wrapper .wrapper-text h1 {
text-align: center; font-size: 72px; color: rgba(255, 255, 255, .75); font-family: 'Computer Modern Bright Semibold', sans-serif;
}
.wrapper .wrapper-text p {
padding: 24px 48px; font-size: 24px; line-height: 32px; font-family: "Raleway Thin", sans-serif; font-weight: 700; color: rgba(255, 255, 255, .9); background-color: rgba(41, 30, 21, .15); box-shadow: 0 0 24px rgba(0, 0, 0, .5); border: 1px solid rgba(180, 180, 180, .5); transition: all 0.6s ease-in-out; border-radius: 1px;
}
.wrapper .wrapper-text p:hover {
background-color: rgba(255, 255, 255, .15); color: #fff; border: 1px solid transparent; box-shadow: 0 0 24px rgba(0, 0, 0, .5);
}
/*****
Responsive: iPad *****/
@media screen and (max-width: 1024px) {
.container { width: 100%; margin: 0; padding: 0; }
.content.container { margin: 0; }
.navbar-siren { box-shadow: none; border-bottom: 4px solid black; }
.navbar-siren .container { padding: 0; margin: 0 0 0 -15px; }
.navbar-siren .navbar-header { text-align: center; }
.navbar-siren .navbar-nav > li { box-shadow: none; }
.navbar-siren .navbar-nav > li { font-size: 15px; }
.navbar-siren .navbar-nav > li.active { box-shadow: none; }
.navbar-siren .navbar-nav > li svg { margin: 8px auto 4px auto; width: 32px; height: 32px; }
article.col-md-12 { margin: 0; box-shadow: none; width: 100%; }
.wrapper .wrapper-text { padding: 10% 15%; }
.wrapper .wrapper-text h1 { font-size: 36px; }
.wrapper .wrapper-text p { font-size: 18px; line-height: 24px; padding: 12px 24px; }
article p { font-size: 18px; }
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
.navbar-siren .navbar-nav > li { vertical-align: top; }
.caret { font-size: 6px; }
}
@media screen and (max-width: 640px) {
.navbar-siren .navbar-nav > li { height: 50px; font-size: 14px; }
.navbar-siren .navbar-nav > li svg { display: none; }
.navbar-siren .navbar-nav > li a:first-child{ padding-left: 15px; }
.navbar-siren .navbar-nav > li a{ margin-top: 10px; padding: 10px 2px; }
.navbar-siren { height: auto; border-bottom: 1px solid black; }
.caret { display: none; }
}