File: /volume1/web/wordpress/wp-content/themes/hansen/style.css
/*
Theme Name: Hansen
Theme URI: https://uxlthemes.com/theme/hansen/
Author: uxl
Author URI: https://uxlthemes.com/
Description: An experimental block-based theme for full site editing, with various block styles and patterns.
Requires at least: 5.5
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hansen
Tags: grid-layout, block-patterns, block-styles, full-site-editing, wide-blocks, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, blog, news, e-commerce
This theme, like WordPress, is licensed under the GPL.
*/
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wp-site-blocks {
display: flex;
flex-direction: column;
}
.site-content {
overflow-x: hidden;
}
.site-content.has-background,
.wp-block-group.site-content.has-background {
padding-top: 0;
padding-bottom: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 1rem 0 1rem;
letter-spacing: -0.05em;
}
p {
margin: 1rem 0 1rem;
}
ul,ol {
padding-left: 1em;
}
.rtl ul,.rtl ol {
padding-left: 0;
padding-right: 1em;
}
b,strong {
font-weight: 700;
}
figure {
margin: 0;
}
img,
.custom-logo {
max-width: 100%;
height: auto;
}
.wp-block-table {
margin: 0;
}
.wp-block-table table {
border-collapse: collapse;
}
.wp-block-table table:not(.has-background) {
background-color: var(--wp--preset--color--white);
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.edit-post-visual-editor__post-title-wrapper .editor-post-title {
max-width: var(--wp--custom--width--default);
}
/* Site Editor */
.editor-styles-wrapper .wp-block {
max-width: none;
}
.editor-styles-wrapper .wp-block[data-align="wide"] {
max-width: var(--wp--custom--width--wide);
}
.editor-styles-wrapper .wp-block[data-align="wide"] .wp-block[data-align="full"] {
margin-left: -webkit-calc((-49.5vw + 50%) + 10px);
margin-left: calc((-49.5vw + 50%) + 10px);
margin-right: -webkit-calc((-49.5vw + 50%) + 10px);
margin-right: calc((-49.5vw + 50%) + 10px);
max-width: calc(99vw - 20px);
width: calc(99vw - 20px);
}
/* Post Editor */
.edit-post-layout .editor-styles-wrapper .wp-block {
max-width: var(--wp--custom--width--default);
}
.edit-post-layout .editor-styles-wrapper .wp-block[data-align="full"] {
max-width: none;
}
.edit-post-layout .editor-styles-wrapper .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block,
.edit-post-layout .editor-styles-wrapper .wp-block[data-align="full"] > .wp-block-cover > .wp-block-cover__inner-container > .wp-block {
max-width: none;
}
.edit-post-layout .editor-styles-wrapper .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],
.edit-post-layout .editor-styles-wrapper .wp-block[data-align="full"] > .wp-block-cover > .wp-block-cover__inner-container > .wp-block[data-align="wide"] {
max-width: var(--wp--custom--width--wide);
}
.edit-post-layout .editor-styles-wrapper .wp-block.is-style-narrow-width {
max-width: var(--wp--custom--width--narrow);
}
/* Front End */
.wp-site-blocks .alignwide {
max-width: var(--wp--custom--width--wide);
margin-left: auto;
margin-right: auto;
}
.wp-site-blocks .alignwide .alignfull,
.wp-site-blocks .is-style-narrow-width .alignfull {
margin-left: -webkit-calc(-50vw + 50%);
margin-left: calc(-50vw + 50%);
margin-right: -webkit-calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: 100vw;
width: 100vw;
}
.aligncenter {
text-align: center;
}
.wp-site-blocks .alignleft {
float: left;
margin-right: 2em;
}
.wp-site-blocks .alignright {
float: right;
margin-left: 2em;
}
.is-style-narrow-width,
.is-style-narrow-width.alignwide.site-main {
max-width: var(--wp--custom--width--narrow);
margin-left: auto;
margin-right: auto;
}
.wp-site-blocks .site-content .is-style-narrow-width > .wp-block-group__inner-container > .entry-content > .alignwide,
.wp-site-blocks .site-content .alignwide .is-style-narrow-width .alignwide {
margin-left: calc( 0px - ((var(--wp--custom--width--wide) - var(--wp--custom--width--narrow)) / 2) );
margin-right: calc( 0px - ((var(--wp--custom--width--wide) - var(--wp--custom--width--narrow)) / 2) );
}
.wp-site-blocks .site-content .alignwide .is-style-narrow-width .alignwide.wp-block-cover {
width: calc( var(--wp--custom--width--wide) - 2.5em );
}
.is-style-text-columns-2 {
columns: 2 14em;
column-gap: 2em;
}
.is-style-text-columns-3 {
columns: 3 14em;
column-gap: 2em;
}
.is-style-text-columns-4 {
columns: 4 14em;
column-gap: 2em;
}
.is-style-text-columns-2 p:first-of-type,
.is-style-text-columns-2 h1:first-of-type,
.is-style-text-columns-2 h2:first-of-type,
.is-style-text-columns-2 h3:first-of-type,
.is-style-text-columns-2 h4:first-of-type,
.is-style-text-columns-2 h5:first-of-type,
.is-style-text-columns-2 h6:first-of-type,
.is-style-text-columns-3 p:first-of-type,
.is-style-text-columns-3 h1:first-of-type,
.is-style-text-columns-3 h2:first-of-type,
.is-style-text-columns-3 h3:first-of-type,
.is-style-text-columns-3 h4:first-of-type,
.is-style-text-columns-3 h5:first-of-type,
.is-style-text-columns-3 h6:first-of-type,
.is-style-text-columns-4 p:first-of-type,
.is-style-text-columns-4 h1:first-of-type,
.is-style-text-columns-4 h2:first-of-type,
.is-style-text-columns-4 h3:first-of-type,
.is-style-text-columns-4 h4:first-of-type,
.is-style-text-columns-4 h5:first-of-type,
.is-style-text-columns-4 h6:first-of-type {
margin-top: 0;
}
.is-style-text-indent {
text-indent: 1.5em;
}
/*--------------------------------------------------------------
# Core blocks (OK in head)
--------------------------------------------------------------*/
.wp-block-post-title {
overflow-wrap: break-word;
}
.wp-block-post-title a:not(:hover) {
text-decoration: none;
}
.wp-block-site-title a {
text-decoration: none;
color: inherit;
}
a.wp-block-post-title > h1,
a.wp-block-post-title > h2,
a.wp-block-post-title > h3,
a.wp-block-post-title > h4,
a.wp-block-post-title > h5,
a.wp-block-post-title > h6 {
color: inherit;
}
.wp-block-post-author__avatar .avatar {
border-radius: 100%;
}
.wp-site-blocks .wp-block-search .wp-block-search__input,
.wp-site-blocks .wp-block-search .wp-block-search__button {
border: 2px solid transparent;
border-radius: 4px;
}
.wp-block-group.has-background,
.wp-block-template-part.has-background,
header > .wp-block-group,
footer > .wp-block-group {
padding: 0.625em 1.25em;
}
.site-content {
padding: 0 1.25em;
}
.wp-block-query-loop.is-style-box-shadow li {
background-color: var(--wp--preset--color--white);
padding: 1.25em;
margin-bottom: 1.25em;
box-shadow: 6px 6px rgba(75,81,97,0.12);
border-radius: 6px;
}
.wp-block-query-loop.is-style-box-shadow-2 li {
background-color: var(--wp--preset--color--white);
padding: 1.25em;
margin-bottom: 1.25em;
box-shadow: 3px 5px 20px 0 rgba(0,0,0,0.12);
}
.wp-block-query-loop.is-style-border li {
background-color: var(--wp--preset--color--white);
padding: 1.25em;
margin-bottom: 1.25em;
border: 3px solid rgba(0,0,0,0.05);
border-radius: 6px;
}
.wp-block-query-loop.is-style-border-2 li {
background-color: rgba(0,0,0,0.01);
padding: 1.25em;
margin-bottom: 1.25em;
border: 1px solid rgba(0,0,0,0.04);
}
header .wp-block-columns,
footer .wp-block-columns {
margin: 0;
}
.wp-block-columns.is-style-no-bottom-margin {
margin-bottom: 0;
}
.wp-block-columns.is-style-no-spacing {
margin-top: 0;
margin-bottom: 0;
}
.wp-block-columns.is-style-no-spacing .wp-block-column,
.wp-block-columns.is-style-no-spacing .wp-block-column:not(:first-child) {
margin-left: 0;
margin-right: 0;
}
@media (min-width: 600px) and (max-width: 781px) {
.wp-block-columns.is-style-no-spacing .wp-block-column:not(:only-child) {
flex-basis: 50% !important;
}
}
.wp-block-gallery.is-style-no-spacing .blocks-gallery-item{
margin: 0 !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
border-width: 0;
}
.wp-block-query-pagination {
justify-content: space-between;
margin-bottom: 2em;
}
.wp-block-query-pagination > .wp-block-query-pagination-next,
.wp-block-query-pagination > .wp-block-query-pagination-numbers,
.wp-block-query-pagination > .wp-block-query-pagination-previous {
margin: 0 0 .5em 0;
}
.page-numbers {
margin: 0 .25em;
}
@media (max-width: 599px) {
.wp-block-query-pagination {
flex-direction: column;
align-content: center;
}
.wp-block-query-pagination > .wp-block-query-pagination-next,
.wp-block-query-pagination > .wp-block-query-pagination-numbers,
.wp-block-query-pagination > .wp-block-query-pagination-previous {
text-align: center;
}
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.wp-block-search .wp-block-search__label {
font-weight: 500;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: 0.5em;
border: none;
background-color: var(--wp--preset--color--white);
border-radius: 6px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
padding: 0.5em;
}
.wp-block-search .wp-block-search__input {
border: none;
}
.wp-block-search .wp-block-search__button {
border: none;
background: #fbfbfb;
cursor: pointer;
}
.wp-block-post-comments .no-comments,
.wp-block-post-comments .nocomments {
display: none;
}
.wp-block-post-comments .navigation {
display: flex;
justify-content: space-between;
margin-bottom: 2em;
}
.wp-block-post-comments .comment-respond,
.wp-block-post-comments-form {
margin-bottom: 2em;
}
.wp-block-post-comments-form:empty {
margin-bottom: 0;
}
.comment-list,
.comment-list ol,
.commentlist,
.commentlist ol,
.commentlist ul {
list-style: none;
padding: 0;
}
.comment-list .comment,
.comment-list ol .comment,
.commentlist .comment,
.commentlist ol .comment,
.commentlist .trackback,
.commentlist ol .trackback,
.commentlist .pingback,
.commentlist ol .pingback {
margin-bottom: 2em;
}
.comment-list ol li,
.commentlist ol li,
.commentlist ul li {
padding-left: 1em;
margin-bottom: 2em;
}
.comment-list li > .comment-body,
.commentlist li > .comment-body {
margin-bottom: 2em;
}
.comment-author .avatar {
border-radius: 50%;
}
.comment-list > .comment,
.commentlist > .comment,
.commentlist > .trackback,
.commentlist > .pingback,
.comment-respond {
background-color: var(--wp--preset--color--white);
border: 1px solid #eee;
padding: 2em;
}
.comment-form label,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
display: block;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
border: 2px solid #eee;
background-color: #fbfbfb;
padding: 1em;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus,
select:focus {
border: 2px solid #e9e9e9;
background-color: #f9f9f9;
outline: 1px dotted var(--wp--preset--color--dark);
}
input[type="submit"] {
color: var(--wp--preset--color--white);
background-color: var(--wp--preset--color--dark);
border: none;
border-radius: 6px;
box-shadow: none;
cursor: pointer;
display: inline-block;
font-size: 1.125em;
padding: .667em 1.333em;
text-align: center;
text-decoration: none;
overflow-wrap: break-word;
}
.wp-block-post-comments-form input[type="submit"] {
background-color: var(--wp--preset--color--dark);
font-size: 1em;
border-radius: 6px;
}
/*--------------------------------------------------------------
# Extras
--------------------------------------------------------------*/
.wp-block-post-author__name {
font-weight: inherit;
}
.has-child .wp-block-navigation__container {
background-color: var(--wp--preset--color--light);
}
.wp-block-navigation.has-background .wp-block-navigation__container,
.wp-block-navigation.has-background .wp-block-navigation-link {
background-color: inherit;
}
.wp-block-navigation.has-background .has-child .wp-block-navigation__container {
border: none;
}
.wp-block-navigation .wp-block-navigation__container .wp-block-navigation__container {
min-width: 180px;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container {
color: var(--wp--preset--color--dark);
background-color: var(--wp--preset--color--light);
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all {
position: relative;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all .toggle-nav {
display: block;
visibility: visible;
color: inherit;
background: transparent;
border: none;
padding: 0;
width: 1em;
height: 1em;
font-size: 2em;
cursor: pointer;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all.items-justified-center .toggle-nav {
margin: 0 auto;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all.items-justified-right .toggle-nav {
margin: 0 0 0 auto;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all.is-open .toggle-nav.dashicons-menu-alt:before {
content: "\f335";
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all .wp-block-navigation__container {
display: block;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all .has-child .wp-block-navigation__container {
left: 1.5em;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all > ul {
position: absolute;
top: 2em;
margin-top: 1px;
width: 100%;
z-index: 2;
visibility: hidden;
opacity: 0;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all:not(.has-background) > ul {
background-color: var(--wp--preset--color--dark);
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all:not(.has-color) > ul {
color: var(--wp--preset--color--light);
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all.is-open > ul {
visibility: visible;
opacity: 1;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile .toggle-nav {
display: none;
visibility: hidden;
}
@media (max-width: 781px) {
.wp-site-blocks .wp-block-navigation.is-style-mobile {
position: relative;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile .toggle-nav {
display: block;
visibility: visible;
color: inherit;
background: transparent;
border: none;
padding: 0;
width: 1em;
height: 1em;
font-size: 2em;
cursor: pointer;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile.items-justified-center .toggle-nav {
margin: 0 auto;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile.items-justified-right .toggle-nav {
margin: 0 0 0 auto;
}
.rtl .wp-site-blocks .wp-block-navigation.is-style-mobile.items-justified-right .toggle-nav {
margin: 0 auto 0 0;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile.is-open .toggle-nav.dashicons-menu-alt:before {
content: "\f335";
}
.wp-site-blocks .wp-block-navigation.is-style-mobile .wp-block-navigation__container {
display: block;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile .has-child .wp-block-navigation__container {
left: 1.5em;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile > ul {
position: absolute;
top: 2em;
margin-top: 1px;
width: 100%;
z-index: 2;
visibility: hidden;
opacity: 0;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile:not(.has-background) > ul {
background-color: var(--wp--preset--color--dark);
}
.wp-site-blocks .wp-block-navigation.is-style-mobile:not(.has-color) > ul {
color: var(--wp--preset--color--light);
}
.wp-site-blocks .wp-block-navigation.is-style-mobile.is-open > ul {
visibility: visible;
opacity: 1;
}
.wp-block-columns.is-style-sidebar > .wp-block-column {
flex-basis: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 599px) {
.wp-block-column .wp-block-site-logo,
.wp-block-column .wp-block-site-title,
.wp-block-column .wp-block-site-tagline {
text-align: center;
}
.wp-block-column .items-justified-right.wp-block-navigation > ul,
.wp-block-column .items-justified-left.wp-block-navigation > ul {
justify-content: center;
}
.wp-site-blocks .wp-block-navigation.is-style-mobile-all .toggle-nav,
.wp-site-blocks .wp-block-navigation.is-style-mobile-all.items-justified-right .toggle-nav,
.wp-site-blocks .wp-block-navigation.is-style-mobile .toggle-nav,
.wp-site-blocks .wp-block-navigation.is-style-mobile.items-justified-right .toggle-nav {
margin: 0 auto;
}
}
.wp-block-navigation-link__submenu-icon {
position: relative;
}
.wp-block-navigation-link__submenu-icon:before {
font-family: dashicons;
content: "\f347";
font-size: .9em;
position: relative;
top: .1875em;
}
.has-child .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-link__submenu-icon:before {
content: "\f345";
}
.rtl .has-child .wp-block-navigation__container > .wp-block-navigation-link > .wp-block-navigation-link__submenu-icon:before {
content: "\f341";
}
.wp-block-navigation-link__submenu-icon svg {
width: 0;
height: 0;
}
.wp-block-navigation[style*="text-decoration"] {
text-decoration: none !important;
}
.wp-block-navigation[style*="text-decoration"] .wp-block-navigation-link__content {
text-decoration: underline;
}
header > .wp-block-group.site-header.is-style-fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.wp-block-media-text.is-image-fill.is-style-media-text-overlap {
margin-top: 60px;
margin-bottom: 60px;
}
.wp-block-media-text.is-image-fill.is-vertically-aligned-top.is-style-media-text-overlap {
margin-top: 0;
margin-bottom: 90px;
}
.wp-block-media-text.is-image-fill.is-vertically-aligned-bottom.is-style-media-text-overlap {
margin-top: 90px;
margin-bottom: 0;
}
.wp-block-media-text.is-image-fill.is-style-media-text-overlap figure.wp-block-media-text__media {
height: calc(100% + 120px) !important;
}
.wp-block-media-text.is-image-fill.is-vertically-aligned-top.is-style-media-text-overlap figure.wp-block-media-text__media,
.wp-block-media-text.is-image-fill.is-vertically-aligned-bottom.is-style-media-text-overlap figure.wp-block-media-text__media {
height: calc(100% + 90px) !important;
}
.wp-block-media-text.is-image-fill.is-style-media-text-overlap .wp-block-media-text__content {
margin-left: -120px;
padding-top: 20%;
padding-bottom: 20%;
background: inherit;
}
.wp-block-media-text.has-media-on-the-right.is-image-fill.is-style-media-text-overlap .wp-block-media-text__content {
margin-left: 0;
margin-right: -120px;
}
@media (max-width:599px) {
.wp-block-media-text.is-image-fill.is-style-media-text-overlap.is-stacked-on-mobile {
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 0;
margin-bottom: 0;
}
.wp-block-media-text.is-image-fill.is-style-media-text-overlap.is-stacked-on-mobile figure.wp-block-media-text__media{
height: 100% !important;
width: 111% !important;
max-width: 111% !important;
margin-left: -5.5%;
}
.wp-block-media-text.is-image-fill.is-style-media-text-overlap.is-stacked-on-mobile .wp-block-media-text__content {
margin-top: -40px;
margin-left: 0;
padding-top: 8%;
padding-bottom: 8%;
}
.wp-block-media-text.has-media-on-the-right.is-image-fill.is-style-media-text-overlap .wp-block-media-text__content {
margin-bottom: -40px;
margin-top: 0;
margin-right: 0;
}
}
.wp-block-media-text.is-style-angled-divider .wp-block-media-text__media{
clip-path: polygon(100% 0%,90% 100%,0% 100%,0% 0%);
}
.wp-block-media-text.is-style-angled-divider.is-selected .wp-block-media-text__media:hover{
clip-path: none;
}
.wp-block-media-text.has-media-on-the-right.is-style-angled-divider .wp-block-media-text__media{
clip-path: polygon(0% 0%,100% 0%,100% 100%,10% 100%);
}
.wp-block-media-text.is-style-angled-divider.is-style-media-text-overlap .wp-block-media-text__content {
z-index: 1;
}
@media (max-width:599px){
.wp-block-media-text.is-stacked-on-mobile.is-style-angled-divider .wp-block-media-text__media{
clip-path: polygon(100% 0%,100% 90%,0% 100%,0% 0%);
}
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right.is-style-angled-divider .wp-block-media-text__media{
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 90%);
}
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: var(--wp--preset--color--white);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid var(--wp--preset--color--blue);
box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
clip: auto !important;
color: var(--wp--preset--color--black);
display: block;
font-size: 1em;
font-weight: normal;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: underline;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
.admin-bar .screen-reader-text:focus {
top: 37px;
}
@media (max-width: 782px) {
.admin-bar .screen-reader-text:focus {
top: 51px;
}
}
.rtl .screen-reader-text:focus {
left: auto;
right: 5px;
}