AstroJS/botanjs/src/Astro/Starfall/Element/Header.css

183 lines
3.2 KiB
CSS

.home {
position: relative;
width: 100%;
overflow: hidden;
}
header {
position: relative;
}
#menu {
font-size: 1.75em;
text-align: right;
}
#menu > * {
font-family: custom-sans;
cursor: pointer;
line-height: 1em !important;
position: relative;
color: rgba( 0, 0, 0, 0.5 );
-webkit-filter: blur( 2px );
filter: blur( 2px );
}
#menu > *[data-active] {
-webkit-filter: blur( 0px );
filter: blur( 0px );
color: rgba( 128, 0, 128, 1 );
}
#menu > *:hover {
color: rgba( 0, 0, 0, 0.75 );
-webkit-filter: blur( 0px );
filter: blur( 0px );
text-decoration: none;
}
.horizon {
position: relative;
width: 100%;
height: 7px;
background: #76400C;
z-index: 4;
}
.contact {
width: 100%;
height: 0;
-moz-box-shadow: inset 0 0 10px 0 black;
-webkit-box-shadow: inset 0 0 10px 0 black;
box-shadow: inset 0 0 10px 0 black;
background-image: url(/assets/layout-images/home.png);
background-position: 50% 90%;
position: absolute;
overflow: hidden;
text-align: center;
}
.contact:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba( 255, 255, 255, 0.6 );
}
/*
.begin-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-image: url(/assets/layout-images/home-blur.png);
background-position: 50% 0;
background-repeat: no-repeat;
opacity: 0.6;
}
*/
.contact-wrapper {
text-align: center;
position: relative;
}
.contact-wrapper > * {
display: inline-block;
vertical-align: middle;
text-align: left;
}
.contact-block {
width: 40%;
}
.contact-form input, .contact-form textarea {
width: 100%;
text-align: left;
}
.contact-form > * {
margin-bottom: 0.5em;
}
.contact-form textarea, .contact-form input {
background-color: rgba( 0, 0, 0, 0.1 );
padding: 0.5em;
}
.contact-form ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #AAA;;
}
.contact-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #AAA;;
opacity: 1;
}
.contact-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #AAA;;
opacity: 1;
}
.contact-form :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #AAA;;
}
.contact-form textarea:hover, .contact-form input:hover
, .contact-form textarea:focus, .contact-form input:focus {
color: white;
background-color: rgba( 0, 0, 0, 0.5 );
}
.contact-form > input[type="submit"] {
width: auto;
}
.c-sep {
display: inline-block;
width: 1px;
margin: 0 2em;
}
.c-sep:after {
content: "";
position: absolute;
height: 100%;
border-left: 1px solid black;
top: 0;
}
.collapse_panel {
position: absolute;
width: 100%;
height: 50px;
bottom: -33px;
font-size: 3em;
text-align: center;
color: white;
-moz-box-shadow: 0 0 10px 0 black;
-webkit-box-shadow: 0 0 10px 0 black;
box-shadow: 0 0 10px 0 black;
}
.collapse_panel:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%;
background:url(/assets/layout-images/collapse.png) center 2.5px no-repeat;
}
#collapse_panel:hover {
bottom: 0;
cursor: pointer;
}