/* -----------------------------------------------------------------------------
TABLE OF CONTENTS
1. General
2. Components
3. Header
4. Core
5. Sidebar
6. Footer
7. Elements
8. Other
9. Responsive
----------------------------------------------------------------------------- */
// Import additional CSS files
@import 'normalize.scss', 'grid.scss', 'beautyspot-icons.scss', 'magnific-popup.scss';
/* -----------------------------------------------------------------------------
1. GENERAL
----------------------------------------------------------------------------- */
$vs: 30px; // vertical space
/* -------------------------------------------------------------------------
MIXINS
-------------------------------------------------------------------------- */
// Border box
@mixin border-box {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
// Clearfix
@mixin clearfix {
&:before,
&:after { display: table; clear: both; height: 0; content: ''; visibility: hidden; }
}
// BeautySpot font
@mixin beautyspot-icons { font-family: 'beautyspot-icons'!important;
speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
// Button
@mixin c-button { @include transition( all 250ms ); display: inline-block; padding: 7px 25px; line-height: 1.5em; font-size: 0.875em; font-weight: bold;
text-transform: uppercase; text-decoration: none; border-radius: 30px; }
// List reset
@mixin list-reset { list-style-type: none; margin: 0; padding: 0; }
@mixin list-item-reset { list-style-type: none; margin: 0; padding: 0; line-height: 1.3em; }
// Section header decor
@mixin section-header-decor { position: relative; padding-left: 25px;
&:before { content: ''; display: block; position: absolute; top: 2px; bottom: 2px; left: 0; width: 5px; }
}
// Transition
@mixin transition( $params... ) { -webkit-transition: $params; -moz-transition: $params; -ms-transition: $params; -o-transition: $params; transition: $params; }
@mixin transition-none { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
// Transform
@mixin transform( $params... ) { -webkit-transform: $params; -ms-transform: $params; transform: $params; }
/* -------------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------------- */
html { height: 100%; }
body { position: relative; margin: 0; font-size: 16px; font-family: 'Arial', sans-serif; font-weight: 400;
-ms-word-wrap: break-word; word-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { @include transition( all 250ms ); text-decoration: underline; }
a:hover { text-decoration: none; }
abbr { border-bottom: 1px dotted transparent; }
address { margin-bottom: $vs; }
blockquote { margin: 0 0 $vs 0; font-size: 1.5em; font-style: italic; }
button { @include transition( all 250ms ); background: none; cursor: pointer; outline: 0; border: 0; }
code { padding: 5px; font-family: monospace; border: 1px solid transparent; }
em { font-style: italic; }
fieldset { margin: 0; padding: 0; border: 0; }
figure { margin: 0 0 $vs 0; padding: 0; }
img { max-width: 100%; height: auto; }
p { line-height: 1.5em; margin: 0 0 $vs 0; }
pre { margin-bottom: $vs; padding: 10px; font-family: monospace; border: 1px solid transparent; overflow-x: scroll; }
q { font-style: italic; }
strong { font-weight: bold; }
sub,
sup { position: relative; top: -0.5em; font-size: 0.750em; vertical-align: top; }
sub { top: auto; bottom: -0.5em; }
var { font-style: italic; }
// Headings
h1, h2, h3, h4, h5, h6 { position: relative; margin: 0 0 $vs 0; line-height: normal; font-weight: bold; }
h1 { font-size: 3em; }
h2 { font-size: 2.25em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.125em; line-height: normal; }
h5 { margin-bottom: $vs / 2; font-size: 1em; }
h6 { margin-bottom: $vs / 2; font-size: 1em; font-weight: normal; }
// Definition list
dl { margin: 0 0 $vs 0; }
dt { margin: $vs / 2 0 0 0; font-weight: bold; }
dt:first-child { margin-top: 0; }
dd { margin: 0; }
// List
ul { margin: 0 0 $vs 0; padding: 0 0 0 20px; list-style: disc outside; }
ol { margin: 0 0 $vs 0; padding: 0 0 0 20px; list-style: decimal outside; }
li { margin-bottom: 7px; padding: 0; line-height: 1.5em; }
ul ul, ol ol,
ul ol, ol ul { margin: 10px 0 10px 10px; }
// Table
table { margin-bottom: $vs; width: 100%; border-collapse: collapse; }
table th { padding: 15px 20px 13px 20px; font-weight: normal; text-align: left; text-transform: uppercase; border: 0; }
table td { padding: 15px 20px 13px 20px; vertical-align: middle; border: 0; }
table p { margin-bottom: $vs / 2; }
table p:last-child { margin: 0; }
/* -------------------------------------------------------------------------
FORMS
------------------------------------------------------------------------- */
label { display: block; margin: 0 0 5px 0; padding: 0; font-size: 0.875em; letter-spacing: 0.04em; font-weight: bold;
line-height: normal; text-transform: uppercase; }
input, select, textarea { @include border-box; padding: 12px 20px; width: 100%;
max-width: 1000px; line-height: normal; font-size: 15px; border: 0; }
textarea { max-width: 100%; }
input[type="checkbox"],input[type="radio"] { width: auto; border: 0; cursor: pointer; }
input:focus { outline: none; }
select { padding: 12px 40px 12px 15px; font-size: 15px; appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url( '../img/arrow-down.svg' ); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; }
label input[type="text"], label input[type="password"] { display: block; }
input[type="submit"] { width: auto; cursor: pointer; }
/* -------------------------------------------------------------------------
WORDPRESS
------------------------------------------------------------------------- */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 15px 15px 0; }
.alignright { float: right; margin: 0 0 15px 15px; }
.bypostauthor .comment-author .fn { font-style: italic; }
.clearfix:before,
.clearfix:after { display: table; clear: both; height: 0; content: ''; }
.embed-media { margin-bottom: $vs; }
.gallery-caption { padding: 4px; }
.hidden { display: none; }
.screen-reader-text { clip: rect( 1px, 1px, 1px, 1px ); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.lead { line-height: 1.5em; font-size: 1.500em; font-weight: 400; }
.strikethrough { text-decoration: line-through; }
.valign-middle { vertical-align: middle; }
.valign-top { vertical-align: top; }
.valign-bottom { vertical-align: bottom; }
.wp-caption { padding: 4px; max-width: 100%; }
.wp-caption-text { font-size: 0.875em; }
p.wp-caption-text { margin-top: 5px; }
.wp-audio-shortcode,
.wp-video,
.wp-block-audio,
.wp-block-video { margin: 0 0 $vs 0; }
.wp-block-column { margin: 0; }
.wp-block-separator { margin: $vs 0; border: 0; border-top: 1px solid transparent; }
// Blockquote
.wp-block-quote { margin: 0 0 $vs 0; font-size: 1.5em; font-style: italic; padding-left: 30px; border: 3px solid transparent; border-width: 0 0 0 3px; }
.wp-block-quote p { margin: 0 0 $vs / 2 0; }
.wp-block-quote cite { font-style: normal; font-size: 0.583em; text-transform: uppercase; }
// Columns
.core__columns--fullwidth .wp-block-columns,
.main--fullwidth .wp-block-columns { @include border-box; margin: $vs * 2.5 auto $vs * 1.5 auto; padding: 0 30px; width: 100%; max-width: 1400px; }
// Embed
.wp-block-embed { margin: 0 0 $vs 0; }
.wp-block-embed__wrapper { text-align: center; }
.wp-embed-aspect-1-1 > .wp-block-embed__wrapper,
.wp-embed-aspect-4-3 > .wp-block-embed__wrapper,
.wp-embed-aspect-16-9 > .wp-block-embed__wrapper { position: relative; width: 100%; height: 0; }
.wp-embed-aspect-1-1 > .wp-block-embed__wrapper { padding-bottom: 100%; }
.wp-embed-aspect-4-3 > .wp-block-embed__wrapper { padding-bottom: 75%; }
.wp-embed-aspect-16-9 > .wp-block-embed__wrapper { padding-bottom: 56.25%; }
.wp-embed-aspect-1-1 > .wp-block-embed__wrapper > iframe,
.wp-embed-aspect-4-3 > .wp-block-embed__wrapper > iframe,
.wp-embed-aspect-16-9 > .wp-block-embed__wrapper > iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
// File
.wp-block-file { margin: 0 0 $vs 0; padding: 10px 0; }
// Image
.wp-block-image { margin: 0 0 $vs 0; }
.wp-block-image figcaption { line-height: 1.5em; text-align: left; }
// Gallery
.gallery { @include clearfix; margin: 0 0 $vs 0; }
.gallery-item { @include border-box; float: left; margin: 0; padding: 5px; }
.gallery-columns-1 .gallery-item { float: none; }
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-2 .gallery-item:nth-child(2n+1) { clear: left; }
.gallery-columns-3 .gallery-item { width: 33%; }
.gallery-columns-3 .gallery-item:nth-child(3n+1) { clear: left; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery-columns-4 .gallery-item:nth-child(4n+1) { clear: left; }
.gallery-columns-5 .gallery-item { width: 20%; }
.gallery-columns-5 .gallery-item:nth-child(5n+1) { clear: left; }
.gallery-columns-6 .gallery-item { width: 16%; }
.gallery-columns-6 .gallery-item:nth-child(6n+1) { clear: left; }
.gallery-columns-7 .gallery-item { width: 14%; }
.gallery-columns-7 .gallery-item:nth-child(7n+1) { clear: left; }
.gallery-columns-8 .gallery-item { width: 12.5%; }
.gallery-columns-8 .gallery-item:nth-child(8n+1) { clear: left; }
.gallery-columns-9 .gallery-item { width: 11.111%; }
.gallery-columns-9 .gallery-item:nth-child(9n+1) { clear: left; }
.wp-block-gallery { @include clearfix; margin: 0 0 $vs 0; }
.wp-block-gallery .blocks-gallery-item figcaption { @include border-box; }
// Table
.wp-block-table.is-style-regular td { border: 1px solid transparent; }
/* -------------------------------------------------------------------------
THEME
------------------------------------------------------------------------- */
#wrapper { position: relative; padding-left: 30%; }
/* -----------------------------------------------------------------------------
2. COMPONENTS
----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
ALERT MESSAGE
------------------------------------------------------------------------- */
.c-alert-message { position: relative; margin: 0 0 $vs 0; padding: 22px 20px 20px 50px; }
.c-alert-message:before { @include beautyspot-icons; content: '\f129'; position: absolute; top: 23px; left: 20px; font-size: 20px; }
/* -------------------------------------------------------------------------
BUTTON
------------------------------------------------------------------------- */
.c-button { @include c-button; }
/* -------------------------------------------------------------------------
PERSON SOCIAL ICONS
------------------------------------------------------------------------- */
.lsvr_person-social-icon:before { @include beautyspot-icons; }
.lsvr_person-social-icon--facebook:before { content: '\f09a'; }
.lsvr_person-social-icon--linkedin:before { content: '\f0e1'; }
.lsvr_person-social-icon--skype:before { content: '\f17e'; }
.lsvr_person-social-icon--twitter:before { content: '\f099'; }
/* -------------------------------------------------------------------------
SEARCH FORM
------------------------------------------------------------------------- */
.c-search-form { max-width: 1000px; }
.c-search-form__input-holder { position: relative; }
.c-search-form__input { padding: 8px 40px 8px 15px; font-size: 16px; font-style: italic; border: 2px solid transparent; border-radius: 0; }
.c-search-form__button { @include transition( all 250ms ); display: block; position: absolute; top: 50%; right: 5px; margin-top: -15px; padding: 0;
width: 30px; height: 30px; line-height: 30px; text-align: center; }
.c-search-form__button:hover { opacity: 0.8; }
.c-search-form__button:active { opacity: 0.5; }
.c-search-form__button-icon { font-size: 16px; }
.c-search-form__button-icon:before { @include beautyspot-icons; content: '\f002'; }
/* -----------------------------------------------------------------------------
3. HEADER
----------------------------------------------------------------------------- */
#header { position: fixed; top: 0; left: 0; width: 30%; height: 100%; -webkit-transform: translate3d( 0, 0, 0 );
background-position: center center; background-size: cover; z-index: 20; }
.admin-bar #header { top: 20px; }
.header__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.header__inner { @include border-box; position: relative; padding-top: 60px; height: 100%; z-index: 30; }
.header-mobile-toggle { display: none; }
/* -------------------------------------------------------------------------
HEADER BRANDING
------------------------------------------------------------------------- */
.header-branding__inner { padding: 0 60px $vs 60px; text-align: center; }
// Header logo
.header-logo { margin: auto; }
.header-logo__link { text-decoration: none; }
.header-logo__link:hover { opacity: 0.9; }
.header-logo__link:active { opacity: 0.8; }
// Header title and tagline
.header-title-tagline { margin-top: 10px; }
.header-title-tagline:first-child { margin-top: 0; }
.header-title { font-weight: bold; font-size: 1.5em; }
.header-title__link { text-decoration: none; }
.header-tagline { margin: 5px 0 0 0; font-style: italic; }
.header-tagline:first-child { margin-top: 0; }
/* -------------------------------------------------------------------------
HEADER LANGUAGES
------------------------------------------------------------------------- */
.header-languages { position: absolute; top: 15px; right: 20px; z-index: 20; }
.header--has-search .header-languages { right: 60px; }
.header-languages__toggle { display: block; padding: 0; width: 30px; height: 30px; line-height: 25px;
font-size: 16px; text-align: center; border-radius: 50%; border: 2px solid transparent; }
.header-languages__toggle-icon { display: none; line-height: 1; }
.header-languages__toggle-label { position: relative; top: -1px; line-height: inherit; font-size: 0.875em; font-weight: bold; }
.header-languages__toggle--active .header-languages__toggle-icon { display: inline; }
.header-languages__toggle--active .header-languages__toggle-label { display: none; }
.header-languages__list { @include list-reset; display: none; position: absolute; top: 45px; left: 15px; transform: translateX( -50% ); padding: 4px 10px; white-space: nowrap;
font-size: 1em; border-radius: 1px; }
.header-languages__list:before { content: ''; display: block; position: absolute;
top: -6px; left: 50%; margin-left: -5px; width: 0; height: 0; border: 1px solid transparent; border-width: 0 5px 6px 5px; }
.header-languages__item { @include list-item-reset; display: inline; margin: 0 2px; }
.header-languages__item--active { font-weight: bold; }
.header-languages__item-link { text-decoration: none; }
/* -------------------------------------------------------------------------
HEADER MENU
------------------------------------------------------------------------- */
.header-menu { position: relative; z-index: 20; }
.header-menu:hover { z-index: 40; }
.header-menu__list { @include list-reset; }
.header-menu__item { @include list-item-reset; position: relative; }
.header-menu__submenu { @include list-reset; }
.header-menu__submenu-toggle { display: none; }
@media ( min-width: 1200px ) {
.header-menu { @include transition( filter 250ms ); }
.header--has-panel-collision.header--has-expanded-panel .header-menu { filter: blur( 2px ); pointer-events: none; }
.header--has-panel-collision.header--has-expanded-panel .header-menu:hover { z-index: 20; }
.header-menu__list { padding: 0 30px; max-width: 500px; margin-left: auto; margin-right: auto; }
// Level 1
.header-menu__item--level-0 { margin-top: 10px; padding: 0 30px; }
.header-menu__item--level-0:first-child { margin-top: 0; }
.header-menu__item--level-0.menu-item-has-children:before { @include transition( all 150ms ); @include beautyspot-icons; content: '\f105'; position: absolute;
top: 4px; right: 15px; font-size: 12px; opacity: 0.5; }
.header-menu__item--level-0.menu-item-has-children:hover:before { right: 0; }
.header-menu__item-link-wrapper--level-0 { display: block; text-align: right; overflow: hidden; }
.header-menu__item-link--level-0 { position: relative; font-size: 1em; font-weight: bold; text-decoration: none; text-transform: uppercase; }
.header-menu__item--hover .header-menu__item-link--level-0,
.header-menu__item-link--level-0:hover { padding-right: 10px; }
.header-menu__item-link--level-0:before { @include transition( all 250ms ); content: ''; display: block; position: absolute; top: 50%; right: 100%;
margin: -2px 10px 0 0; width: 500px; height: 2px; }
// Level 2
.header-menu__submenu--level-0 { @include border-box; display: none; position: absolute; top: 0; left: 100%;
margin: -10px 0 0 -10px; padding: 15px 20px; width: 200px; font-size: 1em; border-radius: 5px; z-index: 40; }
.header-menu__submenu--level-0:before { content: ''; display: block; position: absolute;
top: 13px; left: -8px; width: 0; height: 0; border: 1px solid transparent; border-width: 7px 9px 7px 0; }
.header-menu__item--level-1 { margin-top: 7px; }
.header-menu__item--level-1:first-child { margin-top: 0; }
.header-menu__item-link--level-1 { text-decoration: none; }
// Level 2+
.header-menu__submenu--level-0 .current-menu-ancestor .header-menu__item-link,
.header-menu__submenu--level-0 .current-menu-parent .header-menu__item-link,
.header-menu__submenu--level-0 .current-menu-item .header-menu__item-link { font-weight: bold; }
// Level 3+
.header-menu__submenu--level-0 .header-menu__submenu { margin: 5px 0 0 15px; padding: 0; }
.header-menu__submenu--level-1 .header-menu__item { margin-top: 7px; }
.header-menu__submenu--level-1 .header-menu__item:first-child { margin-top: 0; }
.header-menu__submenu--level-1 .header-menu__item-link { text-decoration: none; }
}
/* -------------------------------------------------------------------------
HEADER SEARCH
------------------------------------------------------------------------- */
.header-search { position: absolute; top: 15px; right: 20px; z-index: 10; }
.header-search__toggle { display: block; padding: 0; width: 30px; height: 30px; line-height: 25px;
font-size: 16px; text-align: center; border-radius: 50%; border: 2px solid transparent; }
.header-search__toggle-icon { line-height: 1; }
.header-search__toggle-icon:before { @include beautyspot-icons; content: '\f002'; line-height: inherit; }
.header-search__toggle--active .header-search__toggle-icon:before { content: '\f00d'; }
.header-search__form { display: none; position: absolute; top: 45px; left: -100px; width: 200px; }
.header-search__form:before { content: ''; display: block; position: absolute;
top: -6px; left: 110px; width: 0; height: 0; border: 1px solid transparent; border-width: 0 5px 6px 5px; }
.header-search .c-search-form__input { border-radius: 1px; }
/* -------------------------------------------------------------------------
HEADER PANEL
------------------------------------------------------------------------- */
.header-panel { position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.875em; z-index: 30; }
.header-panel__top { padding: 0 20px; }
.header-panel__toggle { display: none; position: absolute; top: -40px; right: 20px; padding: 0; width: 30px; height: 30px; line-height: 30px;
font-size: 12px; border-radius: 50%; }
.header--has-collapsible-panel .header-panel__toggle { display: block; }
.header-panel__toggle-icon:before { @include beautyspot-icons; content: '\f078'; }
.header--has-expanded-panel .header-panel__toggle-icon:before { content: '\f078'; }
.header--has-collapsed-panel .header-panel__toggle-icon:before { content: '\f077'; }
// Header CTA
.header-cta { margin-top: -18px; text-align: center; }
.header-cta__button { display:inline-block; padding: 10px 25px; text-decoration: none; font-size: 1.125em;
font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 20px; }
.header--has-collapsed-panel .header-cta { display: none; }
// Header contact
.header-contact { margin-bottom: $vs; max-width: 500px; margin-left: auto; margin-right: auto; }
.header-contact__list { @include list-reset; @include clearfix; }
.header-contact__item { @include list-item-reset; @include border-box; position: relative; float: left;
margin: $vs 0 0 0; padding: 0 15px 0 0; width: 50%; }
.header-contact__item:nth-child(2n+1) { clear: left; }
.header-contact__item--has-icon { padding-left: 25px; }
.header-contact__item-icon { position: absolute; top: 0; left: 0; font-size: 18px; }
.header-contact dl { @include clearfix; margin: -2px 0 0 0; }
.header-contact dt { display: block; float: left; margin: 2px 0 0 0; width: 40%; }
.header-contact dd { display: block; float: left; margin: 2px 0 0 0; width: 60%; }
.header-contact a { text-decoration: none; }
.header--has-collapsed-panel .header-contact { display: none; }
// Header panel bottom
.header-panel__bottom { margin: 20px auto; padding: 0 20px; max-width: 500px; }
.header-panel__bottom-inner { display: table; width: 100%; }
.header-social { display: table-cell; padding-right: 4px; width: auto; }
.header-social__list { @include list-reset; position: relative; white-space: nowrap; }
.header-social__item { @include list-item-reset; display: inline-block; margin: 0 2px; font-size: 16px; }
.header-social__item-link { display: block; width: 34px; height: 34px; line-height: 35px; text-decoration: none;
text-align: center; border-radius: 50%; }
.header-panel__bottom-decor { display: table-cell; position: relative; width: 100%; }
.header-panel__bottom-decor:after { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; margin-top: -1px; width: 100%; height: 2px; }
.header-cart { display: table-cell; padding-left: 4px; width: auto; }
.header-cart__button { display: block; position: relative; width: 34px; height: 34px; line-height: 35px; text-decoration: none;
text-align: center; border-radius: 50%; }
.header-cart__button-icon:before { @include beautyspot-icons; content: '\f290'; font-size: 18px; }
.header-cart__button-info { position: absolute; display: block; top: -5px; right: -5px; width: 17px; height: 17px; line-height: 16px;
font-size: 0.75em; text-align: center; border-radius: 50%; }
/* -----------------------------------------------------------------------------
4. CORE
----------------------------------------------------------------------------- */
#core { position: relative; z-index: 10; }
.core__columns { margin-top: $vs * 1.5; }
.core__columns--fullwidth { margin-top: 0; }
.core__columns-inner { padding: 0 30px; }
.core__columns--fullwidth .core__columns-inner { padding: 0; }
#main { margin: 0 0 $vs * 2.5 0; }
#main.main--fullwidth { margin: 0; }
.core__columns-col--right #main { padding-left: 30px; }
.core__columns-col--left #main { padding-right: 30px; }
.core__columns--narrow .lsvr-container,
.core--narrow .lsvr-container { max-width: 800px; }
/* -------------------------------------------------------------------------
PAGE HEADER
------------------------------------------------------------------------- */
.page-header { margin: 0 0 $vs * 2 0; padding-top: $vs * 1.5; }
.page-header__inner { padding: 0 30px; }
.page-header__content { position: relative; }
.page-header--has-portrait .page-header__content { padding-left: 100px; }
.page-header__title { margin: 0; }
.page-header__subtitle { margin: 0; font-weight: normal; font-style: italic; text-transform: none; }
.page-header__portrait { position: absolute; top: 0; left: 0; margin: 0; width: 80px; border-radius: 50%; }
.page-header__portrait-inner { display: block; padding: 3px; border: 0; border-radius: 50%; }
.page-header__portrait-inner > img { display: block; border-radius: 50%; }
// Breadcrumbs
.breadcrumbs { margin: $vs / 2 0 0 0; font-size: 0.875em; }
.breadcrumbs__list { @include list-reset; }
.breadcrumbs__item { @include list-item-reset; display: inline-block; position: relative; margin-right: 5px; padding: 5px 0 5px 15px; }
.breadcrumbs__item:first-child { padding-left: 0; }
.breadcrumbs__item:before { @include beautyspot-icons; content: '\f105'; position: absolute; top: 9px; left: 2px; font-size: 10px; }
.breadcrumbs__item:first-child:before { display: none; }
.breadcrumbs__link { text-decoration: none; }
/* -------------------------------------------------------------------------
POST COMMON COMPONENTS
------------------------------------------------------------------------- */
// Post archive categories
.post-archive-categories { margin: 0 0 $vs 0; }
.post-archive-categories:first-child { padding-top: 0; border-top-width: 0; }
.post-archive-categories__list { @include list-reset; position: relative; }
.post-archive-categories__item { @include list-item-reset; display: inline-block; position: relative; margin: 5px 10px 5px 0; }
.post-archive-categories__item--active { font-weight: bold; }
.post-archive-categories__item-link { text-decoration: none; }
// Post footer
.post-single .post__footer { margin: $vs * 2 0 $vs 0; }
.post-single .post__meta { margin: 0; font-size: 0.875em; }
.post-single .post__meta-author-link,
.post-single .post__meta .post__term-link { text-decoration: none; }
.post-single .post__tags { margin: $vs 0 0 0; }
.post-single .post__tags .post__terms { font-size: 0.688em; text-transform: uppercase; }
.post-single .post__tags .post__term-link { display: inline-block; margin: 4px 5px 0 0; padding: 5px 10px; text-decoration: none;
font-weight: bold; border-radius: 5px; border: 2px solid transparent; }
// Post navigation
.post-navigation { margin: $vs 0; padding-top: $vs; border-top: 1px solid transparent; }
.post-navigation__list { @include list-reset; @include clearfix; margin: 0 0 $vs 0; }
.post-navigation__prev,
.post-navigation__next { @include list-item-reset; @include border-box; width: 45%; }
.post-navigation__prev-inner,
.post-navigation__next-inner { position: relative; }
.post-navigation__prev { float: left; }
.post-navigation__prev:last-child { border: 0; }
.post-navigation__next { position: relative; left: -1px; float: right; text-align: right; }
.post-navigation__next:first-child { border: 0; }
.post-navigation__title { margin: 0 0 5px 0; font-size: 0.812em; }
.post-navigation__title-link { text-decoration: none; letter-spacing: 0.04em; }
.post-navigation__link { text-decoration: none; }
// Post comments
.post-comments { margin: $vs 0; padding-top: $vs; border-top: 1px solid transparent; }
.post-comments__list { @include list-reset;
ul { @include list-reset; }
.comment { @include list-item-reset; margin-top: $vs; padding-top: $vs; border-top: 1px solid transparent; }
> .comment:first-child { border: 0; }
ul ul { margin-left: 75px; }
.comment-body { position: relative; }
.comment-meta { margin-bottom: 1em; }
.says { display: none; }
.comment-author { display: inline; }
.comment-author .fn a { margin-right: 10px; text-decoration: none; font-weight: bold; }
.comment-metadata { display: inline; font-size: 0.75em; }
.comment-metadata a { text-decoration: none; }
.comment-content p { margin: 0 0 $vs / 2 0; }
.comment-reply-link { font-size: 0.75em; font-weight: bold; text-decoration: none; }
.comment-respond { margin-top: $vs; }
}
.post-comments__list--avatars {
.comment-body { padding-left: 60px; }
.avatar { position: absolute; top: 0; left: 0; max-width: 50px; }
}
.post-comments__form { margin-top: $vs; padding-top: $vs;}
.comment-form p:not( .comment-form-comment ):not( .comment-notes ) { max-width: 300px; }
.comment-form .submit { @include c-button; }
.comment-form-cookies-consent { @include clearfix; }
.comment-form-cookies-consent input { float: left; margin-right: 10px; }
.comment-form-cookies-consent label { display: inline-block; position: relative; top: -5px; float: left;
padding: 0; max-width: 250px; text-transform: none; }
#cancel-comment-reply-link { text-decoration: none; }
// Post password form
.post-password-form {
p { max-width: 300px; }
p:first-child { max-width: 100%; }
label { padding: 0; }
input[type="password"] { margin-top: 5px; }
input[type="submit"] { @include transition( all 150ms ); display: inline-block; margin-top: $vs * 0.5; padding: 12px 20px 10px 20px;
font-size: 14px; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase;
border: 2px solid transparent; cursor: pointer;
}
}
// Default WP pagination
.navigation.pagination { margin: $vs 0 0 0;
.page-numbers { display: inline-block; padding: 0; width: 40px; height: 40px; line-height: 40px;
font-weight: bold; text-decoration: none; text-align: center; border-radius: 50%; }
a.page-numbers:hover { opacity: 0.6; }
a.page-numbers:active { opacity: 0.4; }
.dots { padding: 0; font-weight: normal; }
.prev, .next { padding: 0; width: auto; text-decoration: none; text-transform: uppercase; }
.prev { margin-right: 20px; }
.next { margin-left: 20px; }
}
/* -------------------------------------------------------------------------
BLOG / NEWS
------------------------------------------------------------------------- */
// Archive and single
.blog-post-archive--default,
.blog-post-single {
.post__thumbnail-link { display: block; }
.post__thumbnail-link:hover { opacity: 0.9; }
.post__thumbnail-link:active { opacity: 0.8; }
.post__header { margin: 0 0 $vs 0; }
.post__title { position: relative; margin: 0; }
.post__title-link { text-decoration: none; }
.post__meta { margin: 5px 0 0 0; font-size: 0.875em; }
.post__meta-author-link,
.post__meta .post__term-link { text-decoration: none; }
}
// Default archive layout
.blog-post-archive--default {
.post { margin: 0 0 $vs * 1.5 0; }
.post:before { content: ''; display: block; margin-bottom: $vs * 1.5; width: 100px; height: 1px; line-height: 0; }
.post:first-child:before { display: none; }
.post__title { font-size: 1.5em; }
.post__permalink-link { font-size: 0.875em; text-decoration: none; }
.sticky { border: 2px solid transparent; }
.sticky .post__header { margin-top: $vs; padding: 0 30px; }
.sticky .post__content { padding: 0 30px; }
.navigation.pagination { margin-top: $vs * 2; }
}
// Grid archive layout
.blog-post-archive--grid {
.post-archive__list { margin-bottom: - $vs; }
.post { margin: 0 0 $vs 0; padding: 30px; border: 1px solid transparent; }
.post__thumbnail { margin: -31px -31px $vs -31px; }
.post__thumbnail img { display: block; }
.post__thumbnail-link:hover { opacity: 0.9; }
.post__thumbnail-link:active { opacity: 0.8; }
.post__header { margin: 0 0 $vs / 2 0; }
.post__title { margin: 0; font-size: 1.125em; }
.post__title-link { text-decoration: none; }
.post__meta { margin: 10px 0 0 0; font-size: 0.875em; }
.post__meta .post__term-link { text-decoration: none; }
.post__content p { margin: $vs / 1.5 0 0 0; }
.post__content iframe { width: 100%; height: auto; }
.post__permalink-link { font-size: 0.875em; text-decoration: none; }
.navigation.pagination { margin-top: $vs * 2; }
}
// Post single
.blog-post-single {
.post__meta { margin: 0 0 10px 0; }
.post__content p { font-size: 1.125em; }
}
/* -------------------------------------------------------------------------
SERVICES
------------------------------------------------------------------------- */
// Default archive layout
.lsvr_service-post-archive--default {
.post-archive__list { margin-bottom: - $vs; }
.post { margin: 0 0 $vs 0; padding: 30px; border: 1px solid transparent; }
.post__thumbnail { margin: -31px -31px $vs / 2 -31px; }
.post__thumbnail-link { display: block; }
.post__thumbnail-link:hover { opacity: 0.9; }
.post__thumbnail-link:active { opacity: 0.8; }
.post__icon { display: block; position: relative; top: -2px; margin: -45px auto 0 auto; width: 50px; height: 50px; line-height: 52px;
font-size: 24px; text-align: center; border-radius: 50%; }
.has-post-thumbnail .post__icon { top: -5px; }
.post__title { display: inline; margin: 0; font-size: 1.125em; }
.post__title-link { text-decoration: none; }
.post__meta { margin: 2px 0 0 0; font-size: 0.875em; }
.post__meta .post__term-link { text-decoration: none; }
.post__content > p { margin: $vs / 1.5 0 0 0; }
.post__permalink-link { font-size: 0.875em; text-decoration: none; }
.navigation.pagination { margin-top: $vs * 2; }
}
// Post single
.lsvr_service-post-single {
.post__content p { font-size: 1.125em; }
.post__gallery { margin: $vs * 2 0 $vs 0; }
.post__image-list { @include list-reset; @include clearfix; margin: 0 0 $vs 0; }
.post__image-item { @include list-item-reset; margin-bottom: 5px; padding: 0 5px; }
.post__image-link:hover { opacity: 0.9; }
.post__image-link:active { opacity: 0.8; }
}
/* -------------------------------------------------------------------------
GALLERIES
------------------------------------------------------------------------- */
// Default archive layout
.lsvr_gallery-post-archive--default {
.post-archive-categories { margin: 0 0 $vs 0; }
.post-archive__list { margin-bottom: - $vs; }
.post { margin: 0 0 $vs 0; background-size: cover; background-position: center; }
.post__inner { position: relative; display: table; table-layout: fixed; width: 100%; height: 300px; }
.post__bg { display: table-cell; position: relative; padding: 20px;
@include transition( all, 300ms ); vertical-align: bottom; border-radius: 3px; }
.post__header { position: relative; z-index: 20; }
.post__title { margin: 0; font-size: 1.125em; }
.post__title-link { text-decoration: none; }
.post__meta { position: relative; margin: $vs / 2 0 0 0; padding: 5px 0 0 0; font-size: 0.875em;
border-top: 1px solid transparent; z-index: 20; }
.post__term-link { text-decoration: none; }
.post__meta-images { display: block; }
.post__overlay-link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.navigation.pagination { margin-top: $vs * 2; }
}
// Post single
.lsvr_gallery-post-single {
.post__content p { font-size: 1.125em; }
.post__image-list { @include list-reset; margin: 0 -5px $vs -5px; }
.post__image-item { @include list-item-reset; margin-bottom: 5px; padding: 0 5px; }
.post__image-link:hover { opacity: 0.9; }
.post__image-link:active { opacity: 0.8; }
}
/* -------------------------------------------------------------------------
PEOPLE
------------------------------------------------------------------------- */
// General
.lsvr_person-post-page {
.post__contact { @include list-reset; margin: $vs 0; padding-top: $vs; font-size: 0.875em; border-top: 1px solid transparent; }
.post__contact:first-child { margin-top: 0; padding-top: 0; border: 0; }
.post__contact-item { @include list-item-reset; position: relative; margin: 10px 0 0 0; padding-left: 25px; }
.post__contact-item:first-child { margin: 0; }
.post__contact-item-icon:before { @include beautyspot-icons; position: absolute; top: 1px; left: 0; font-size: 16px; }
.post__contact-item-icon--email:before { content: '\f0e0'; }
.post__contact-item-icon--phone:before { content: '\f095'; }
.post__contact-item-icon--website:before { content: '\f0c1'; }
.post__contact-item > a { text-decoration: none; }
.post__social-list { @include list-reset; margin: 0 0 $vs 0; }
.post__social-item { @include list-item-reset; display: inline-block; vertical-align: top; }
.post__social-link { display: block; position: relative; margin: 5px 4px 0 0; width: 24px; height: 24px; line-height: 24px;
border-radius: 50%; text-decoration: none; text-align: center; font-size: 14px; }
.post__social-icon:before { line-height: inherit; }
}
// Default archive layout
.lsvr_person-post-archive--default {
.post-archive__list { margin-bottom: - $vs; }
.post { margin-bottom: $vs; text-align: center; }
.has-post-thumbnail .post__inner { position: relative; }
.post__thumbnail { margin: 0 auto $vs / 2 auto; width: 140px; border-radius: 50%; }
.post__thumbnail-link { display: inline-block; padding: 3px; border: 0; border-radius: 50%; }
.post__thumbnail-link:hover { opacity: 0.9; }
.post__thumbnail img { display: block; border-radius: 50%; }
.lsvr-grid--4-cols .has-post-thumbnail .post__inner { padding-left: 0; }
.lsvr-grid--4-cols .post__thumbnail { position: relative; }
.post__title { margin: 0; font-size: 1.125em; }
.post__title-link { text-decoration: none; }
.post__subtitle { margin: 2px 0 0 0; font-size: 0.875em; font-weight: normal; font-style: italic; }
.post__content { margin-top: $vs / 2; }
.post__content > p { margin: $vs / 2 0 0 0; }
.post__social-list { margin: $vs / 2 0 0 0; }
.navigation.pagination { margin-top: $vs * 2; text-align: center; }
}
// Single
.lsvr_person-post-single {
.post { margin-bottom: $vs; }
.post__content { margin-bottom: $vs; }
.post__content p { font-size: 1.125em; }
.post__social-list { margin-top: $vs; }
}
/* -------------------------------------------------------------------------
TESTIMONIALS
------------------------------------------------------------------------- */
// General
.lsvr_testimonial-post-page {
.post { margin-bottom: $vs * 2; }
.post__quote { margin: 0; font-size: 1em; }
.post__quote > p { margin: 0 0 $vs / 2 0; font-size: 1.125em; }
.post__footer { position: relative; }
.post__footer--has-thumbnail { padding-left: 55px; }
.post__thumbnail { margin: 0; position: absolute; top: -2px; left: 0; width: 40px; }
.post__thumbnail-link { display: block; border: 2px solid transparent; border-radius: 50%; }
.post__thumbnail-link > img { display: block; border-radius: 50%; }
.post__title { font-size: 1em; font-style: normal; }
.post__title-name { font-weight: bold; }
.post__title-link { font-weight: bold; text-decoration: none; }
.post__title-description { display: block; margin: 2px 0 0 0; font-size: 0.875em; }
}
// Default archive layout
.lsvr_testimonial-post-archive--default {
.post-archive__list { margin-bottom: - $vs; }
.post { padding: 30px; margin-bottom: $vs; border: 1px solid transparent; }
.post__footer { margin-top: $vs / 2; }
.navigation.pagination { margin-top: $vs * 2; }
}
// Single
.lsvr_testimonial-post-single {
.post__quote > p { font-size: 1.5em; }
.post__thumbnail > img { display: block; border: 2px solid transparent; border-radius: 50%; }
.post__footer { margin: $vs 0 0 0; }
}
/* -------------------------------------------------------------------------
FAQ
------------------------------------------------------------------------- */
// Default archive layout
.lsvr_faq-post-archive--default {
.post-archive__list { margin: 0 0 $vs 0; }
.post { margin: 0 0 $vs / 2 0; border: 1px solid transparent; }
.post__header { padding: 20px 50px 20px 30px; }
.post__title { margin: 0; font-size: 1em; }
.post__content-wrapper { padding: 30px; border-top: 1px solid transparent; }
.post__content > p { margin: $vs / 2 0 0 0; }
.post__content > p:first-child { margin: 0; }
.post__permalink-link { font-size: 0.875em; text-decoration: none; }
.post__footer { margin-top: $vs / 2; }
.post__meta { display: inline-block; margin: 0 20px 0 0; font-size: 0.875em; }
.post__meta .post__term-link { text-decoration: none; }
.post__footer-permalink { display: inline-block; margin: 0; font-size: 0.875em; }
.post__footer-permalink-link { text-decoration: none; }
}
// Expandable
.lsvr_faq-post-archive--is-expandable {
.post__header { @include transition( background-color 500ms ); position: relative; cursor: pointer; }
.post__header:before { @include beautyspot-icons; content: '\f107'; position: absolute;
top: 20px; right: 25px; font-size: 20px; }
.post--expanded .post__header:before { content: '\f106'; }
.post__content-wrapper { display: none; }
}
// Single
.lsvr_faq-post-single {
.post__content p { font-size: 1.125em; }
}
/* -------------------------------------------------------------------------
SEARCH RESULTS PAGE
------------------------------------------------------------------------- */
.search-results-page .c-search-form { margin: 0 0 $vs 0; }
.search-results-page__list { @include list-reset; margin: 0 0 $vs 0; }
.search-results-page__item { @include list-item-reset; @include clearfix; margin: $vs / 2 0 0 0; padding-top: $vs / 2; border-top: 1px solid transparent; }
.search-results-page__item:first-child { margin: 0; padding: 0; border: 0; }
.search-results-page__item-title { float: left; margin: 0; width: 70%; font-size: 1em; }
.search-results-page__item-title-link { text-decoration: none; }
.search-results-page__item-type { float: right; margin: 0; width: 20%; font-size: 0.875em; text-align: right; }
.search-results-page__item-excerpt { clear: both; padding: $vs / 2 0 0 0; }
.search-results-page__item-excerpt p { margin: $vs / 2 0 0 0; }
.search-results-page__item-excerpt p:first-child { margin: 0; }
.search-results-page .navigation.pagination { margin-top: $vs * 2; }
/* -------------------------------------------------------------------------
ERROR 404 PAGE
------------------------------------------------------------------------- */
.error404 .page-header__title { text-align: center; }
.error-404-page__inner { position: relative; padding-top: 120px; }
.error-404-page__title { position: absolute; top: 0; left: 0; width: 100%;
line-height: 110px; font-size: 190px; text-align: center; z-index: 10; }
.error-404-page__content { position: relative; z-index: 20; }
.error-404-page__button { text-align: center; }
.error-404-page__button-link { text-decoration: none; }
/* -----------------------------------------------------------------------------
5. SIDEBAR
----------------------------------------------------------------------------- */
#sidebar { margin-bottom: $vs * 2; }
/* -------------------------------------------------------------------------
WIDGETS
------------------------------------------------------------------------- */
.widget { margin: 0 0 $vs * 2 0; }
.widget-title,
.widget__title { position: relative; margin: 0 0 $vs 0; padding-bottom: 10px; font-size: 0.875em; font-weight: bold; text-transform: uppercase;
border-bottom: 1px solid transparent; }
.widget__more { margin: $vs 0 0 0; padding-top: $vs / 2; font-size: 0.875em; border-top: 1px solid transparent; }
.widget__more-link { text-decoration: none; }
// Definition list
.lsvr-definition-list-widget__list { @include clearfix; }
.lsvr-definition-list-widget__item-title { @include border-box; clear: both; float: left; margin: 10px 0 0 0; padding: 10px 10px 0 0;
width: 50%; border-top: 1px solid transparent; }
.lsvr-definition-list-widget__item-text { @include border-box; float: right; margin: 10px 0 0 0; padding: 10px 0 0 10px; width: 50%;
text-align: right; border-top: 1px solid transparent; }
.lsvr-definition-list-widget__item-title:first-of-type,
.lsvr-definition-list-widget__item-text:first-of-type { margin: 0; padding-top: 0; border: 0; }
.lsvr-definition-list-widget__item-text-link { text-decoration: none; }
// LSVR Posts
.lsvr-post-list-widget__list { @include list-reset; margin: 0; }
.lsvr-post-list-widget__item { @include list-item-reset; margin: $vs / 2 0 0 0; padding-top: $vs / 2; border-top: 1px solid transparent; }
.lsvr-post-list-widget__item:first-child { margin-top: 0; padding-top: 0; border: 0; }
.lsvr-post-list-widget__item-inner { position: relative; }
.lsvr-post-list-widget__item--has-thumb .lsvr-post-list-widget__item-inner { padding-left: 65px; min-height: 50px; }
.lsvr-post-list-widget__item-thumb { position: absolute; left: 0; top: 2px; width: 50px; }
.lsvr-post-list-widget__item-thumb-link { display: block; }
.lsvr-post-list-widget__item-thumb-link:hover { opacity: 0.9; }
.lsvr-post-list-widget__item-thumb-link:active { opacity: 0.8; }
.lsvr-post-list-widget__item-thumb img { display: block; }
.lsvr-post-list-widget__item-title { margin: 0 0 2px 0; font-size: 0.875em; }
.lsvr-post-list-widget__item-title-link { text-decoration: none; }
.lsvr-post-list-widget__item-date,
.lsvr-post-list-widget__item-category { display: inline; margin: 0; font-size: 0.875em; }
.lsvr-post-list-widget__item-category-link { text-decoration: none; }
// LSVR Featured Post
.lsvr-post-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr-post-featured-widget__thumb { margin: 0; }
.lsvr-post-featured-widget__thumb-link { display: block; }
.lsvr-post-featured-widget__thumb-link:hover { opacity: 0.9; }
.lsvr-post-featured-widget__thumb-link:active { opacity: 0.8; }
.lsvr-post-featured-widget__thumb img { display: block; }
.lsvr-post-featured-widget__content-inner { padding: 20px; border: 1px solid transparent; }
.lsvr-post-featured-widget__title { margin: 0; font-size: 1em; }
.lsvr-post-featured-widget__title-link { text-decoration: none; }
.lsvr-post-featured-widget__date,
.lsvr-post-featured-widget__category { display: inline-block; margin: 2px 0 0 0; font-size: 0.875em; }
.lsvr-post-featured-widget__category-link { text-decoration: none; }
.lsvr-post-featured-widget__excerpt p { margin: $vs / 2 0 0 0; }
.lsvr-post-featured-widget .widget__more { margin-top: $vs / 2; }
// Category widget
.lsvr_service-categories-widget,
.lsvr_gallery-categories-widget,
.lsvr_person-categories-widget,
.lsvr_faq-categories-widget { margin: 0 0 $vs * 1.5 0;
.widget__title { margin-bottom: $vs / 2; }
ul { @include list-reset; }
li { @include list-item-reset; margin: 5px 0 0 0; }
a { text-decoration: none; }
.current-cat > a { font-weight: bold; }
.root > li { position: relative; }
.root > li > ul { font-size: 0.875em; }
ul ul { margin: 5px 0 0 0; }
ul ul > li { margin: 2px 0 0 0; }
}
// LSVR Services
.lsvr_service-list-widget .widget__title { margin-bottom: $vs / 2;}
.lsvr_service-list-widget__list { @include list-reset; margin: 0; }
.lsvr_service-list-widget__item { @include list-item-reset; position: relative; margin: 5px 0 0 0; padding: 8px 10px; }
.lsvr_service-list-widget__item:first-child { margin-top: 0; }
.lsvr_service-list-widget__item--has-icon { padding-left: 35px; }
.lsvr_service-list-widget__item-icon { position: absolute; top: 9px; left: 8px; font-size: 20px; }
.lsvr_service-list-widget__item-link { text-decoration: none; }
.lsvr_service-list-widget__item--current { font-weight: bold; }
// LSVR Featured Service
.lsvr_service-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr_service-featured-widget__content-inner { padding: 20px; border: 1px solid transparent; }
.lsvr_service-featured-widget__thumb { margin: 0; }
.lsvr_service-featured-widget__thumb-link { display: block; }
.lsvr_service-featured-widget__thumb-link:hover { opacity: 0.9; }
.lsvr_service-featured-widget__thumb-link:active { opacity: 0.8; }
.lsvr_service-featured-widget__thumb img { display: block; }
.lsvr_service-featured-widget__icon { display: block; margin: 0 auto $vs / 2 auto;
font-size: 28px; width: 50px; height: 50px; line-height: 52px; text-align: center; border-radius: 50%; }
.lsvr_service-featured-widget__content--has-thumb .lsvr_service-featured-widget__icon { position: relative; top: -5px; margin: -50px auto 0 auto; }
.lsvr_service-featured-widget__title { margin: 0; font-size: 1em; }
.lsvr_service-featured-widget__title-link { text-decoration: none; }
.lsvr_service-featured-widget__category { display: inline-block; margin: 2px 0 0 0; font-size: 0.875em; }
.lsvr_service-featured-widget__category-link { text-decoration: none; }
.lsvr_service-featured-widget__excerpt p { margin: $vs / 2 0 0 0; }
.lsvr_service-featured-widget .widget__more { margin-top: $vs / 2; }
// LSVR Galleries
.lsvr_gallery-list-widget__list { @include list-reset; margin: 0; }
.lsvr_gallery-list-widget__item { @include list-item-reset; margin: $vs / 2 0 0 0; padding-top: $vs / 2; border-top: 1px solid transparent; }
.lsvr_gallery-list-widget__item:first-child { margin-top: 0; padding-top: 0; border: 0; }
.lsvr_gallery-list-widget__item-inner { position: relative; }
.lsvr_gallery-list-widget__item--has-thumb .lsvr_gallery-list-widget__item-inner { padding-left: 65px; min-height: 50px; }
.lsvr_gallery-list-widget__item-thumb { position: absolute; left: 0; top: 0; width: 50px; }
.lsvr_gallery-list-widget__item-thumb-link { display: block; }
.lsvr_gallery-list-widget__item-thumb-link:hover { opacity: 0.9; }
.lsvr_gallery-list-widget__item-thumb-link:active { opacity: 0.8; }
.lsvr_gallery-list-widget__item-thumb img { display: block; }
.lsvr_gallery-list-widget__item-title { margin: 0; font-size: 0.875em; }
.lsvr_gallery-list-widget__item-title-link { text-decoration: none; }
.lsvr_gallery-list-widget__item-date,
.lsvr_gallery-list-widget__item-count { margin: 0; font-size: 0.875em; }
// LSVR Featured Gallery
.lsvr_gallery-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr_gallery-featured-widget__thumb { margin: 0; }
.lsvr_gallery-featured-widget__thumb-link { display: block; }
.lsvr_gallery-featured-widget__thumb-link:hover { opacity: 0.9; }
.lsvr_gallery-featured-widget__thumb-link:active { opacity: 0.8; }
.lsvr_gallery-featured-widget__thumb img { display: block; }
.lsvr_gallery-featured-widget__content-inner { padding: 20px; border: 1px solid transparent; }
.lsvr_gallery-featured-widget__title { margin: 0; font-size: 1em; }
.lsvr_gallery-featured-widget__title-link { text-decoration: none; }
.lsvr_gallery-featured-widget__date,
.lsvr_gallery-featured-widget__count { display: inline-block; margin: 2px 10px 0 0; font-size: 0.875em; }
.lsvr_gallery-featured-widget__excerpt p { margin: $vs / 2 0 0 0; }
.lsvr_gallery-featured-widget .widget__more { margin-top: $vs / 2; }
// LSVR People
.lsvr_person-list-widget__list { @include list-reset; margin: 0; }
.lsvr_person-list-widget__item { @include list-item-reset; margin: $vs / 2 0 0 0; padding-top: $vs / 2; border-top: 1px solid transparent; }
.lsvr_person-list-widget__item:first-child { margin-top: 0; padding-top: 0; border: 0; }
.lsvr_person-list-widget__item-inner { position: relative; }
.lsvr_person-list-widget__item--has-thumb .lsvr_person-list-widget__item-inner { padding-left: 65px; min-height: 50px; }
.lsvr_person-list-widget__item-thumb { position: absolute; top: 0; left: 0; max-width: 50px; }
.lsvr_person-list-widget__item-thumb-link { display: block; padding: 2px; border-radius: 50%; }
.lsvr_person-list-widget__item-thumb-link:hover { opacity: 0.9; }
.lsvr_person-list-widget__item-thumb-link > img { display: block; border-radius: 50%; }
.lsvr_person-list-widget__item-title { margin: 0; font-size: 1em; }
.lsvr_person-list-widget__item-title-link { text-decoration: none; }
.lsvr_person-list-widget__item-subtitle { margin: 2px 0 0 0; font-size: 0.875em; font-weight: normal; font-style: italic; }
.lsvr_person-list-widget__item-social { @include list-reset; margin: 7px 0 0 0; }
.lsvr_person-list-widget__item-social-item { @include list-item-reset; display: inline-block; }
.lsvr_person-list-widget__item-social-link { display: block; position: relative; margin: 0 2px 0 0; width: 20px; height: 20px;
line-height: 20px; font-size: 12px; border-radius: 50%; text-decoration: none; text-align: center;}
.lsvr_person-list-widget__item-social-icon:before { line-height: inherit; }
.lsvr_person-list-widget .widget__more { margin-top: $vs; }
// LSVR Featured Person
.lsvr_person-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr_person-featured-widget__content { padding: 20px; text-align: center; border: 1px solid transparent; }
.lsvr_person-featured-widget__thumb { margin: 0 0 $vs / 2 0; }
.lsvr_person-featured-widget__thumb-link { display: inline-block; padding: 3px; max-width: 100px; border-radius: 50%; }
.lsvr_person-featured-widget__thumb-link:hover { opacity: 0.9; }
.lsvr_person-featured-widget__thumb-link > img { display: block; border-radius: 50%; }
.lsvr_person-featured-widget__title { margin: 0; font-size: 1em; }
.lsvr_person-featured-widget__title-link { text-decoration: none; }
.lsvr_person-featured-widget__subtitle { margin: 2px 0 0 0; font-size: 0.875em; font-weight: normal; font-style: italic; }
.lsvr_person-featured-widget__excerpt { margin: $vs / 2 0 0 0; }
.lsvr_person-featured-widget__excerpt p { margin: $vs / 2 0 0 0; }
.lsvr_person-featured-widget__social { @include list-reset; margin: $vs / 2 0 0 0; }
.lsvr_person-featured-widget__social-item { @include list-item-reset; display: inline-block; }
.lsvr_person-featured-widget__social-link { display: block; position: relative; margin: 0 2px; width: 24px; height: 24px; line-height: 24px;
font-size: 14px; text-align: center; border-radius: 50%; text-decoration: none; }
.lsvr_person-featured-widget__social-icon:before { line-height: inherit; }
.lsvr_person-featured-widget .widget__more { margin-top: $vs / 2; }
// LSVR Testimonials
.lsvr_testimonial-list-widget__list { @include list-reset; margin: 0; }
.lsvr_testimonial-list-widget__item { @include list-item-reset; position: relative; margin: $vs / 2 0 0 0; padding-top: $vs /2;
border-top: 1px solid transparent; }
.lsvr_testimonial-list-widget__item:first-child { margin: 0; padding-top: 0; border: 0; }
.lsvr_testimonial-list-widget__item-quote { margin: 0; font-size: 1em; }
.lsvr_testimonial-list-widget__item-quote > p { margin: 0 0 $vs / 2 0; font-size: 1em; }
.lsvr_testimonial-list-widget__item-footer { position: relative; }
.lsvr_testimonial-list-widget__item-footer--has-thumb { padding-left: 50px; }
.lsvr_testimonial-list-widget__item-thumb { margin: 0; position: absolute; top: 0; left: 0; width: 40px; }
.lsvr_testimonial-list-widget__item-thumb-link { display: block; border: 2px solid transparent; border-radius: 50%; }
.lsvr_testimonial-list-widget__item-thumb-link > img { display: block; border-radius: 50%; }
.lsvr_testimonial-list-widget__item-author { font-style: normal; }
.lsvr_testimonial-list-widget__item-author-link { font-size: 0.875em; font-weight: bold; text-decoration: none; }
.lsvr_testimonial-list-widget__item-author-description { display: block; margin: 0; font-size: 0.75em; }
// LSVR Featured Testimonial
.lsvr_testimonial-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr_testimonial-featured-widget__content { padding: 20px; border: 1px solid transparent; }
.lsvr_testimonial-featured-widget__quote { margin: 0; font-size: 1em; }
.lsvr_testimonial-featured-widget__quote > p { margin: 0 0 $vs / 2 0; font-size: 1em; }
.lsvr_testimonial-featured-widget__footer { position: relative; margin-top: 10px; }
.lsvr_testimonial-featured-widget__footer--has-thumb { padding-left: 55px; min-height: 40px; }
.lsvr_testimonial-featured-widget__thumb { margin: 0; position: absolute; top: 0; left: 0; width: 40px; }
.lsvr_testimonial-featured-widget__thumb-link { display: block; border: 2px solid transparent; border-radius: 50%; }
.lsvr_testimonial-featured-widget__thumb-link > img { display: block; border-radius: 50%; }
.lsvr_testimonial-featured-widget__author { font-style: normal; }
.lsvr_testimonial-featured-widget__author-link { font-size: 0.875em; font-weight: bold; text-decoration: none; }
.lsvr_testimonial-featured-widget__author-description { display: block; margin: 2px 0 0 0; font-size: 0.75em; }
.lsvr_testimonial-featured-widget .widget__more { margin-top: $vs / 2; }
// LSVR FAQ
.lsvr_faq-list-widget__list { @include list-reset; margin: 0; }
.lsvr_faq-list-widget__item { @include list-item-reset; margin: $vs / 2 0 0 0; padding-top: $vs / 2; border-top: 1px solid transparent; }
.lsvr_faq-list-widget__item:first-child { margin-top: 0; padding-top: 0; border: 0; }
.lsvr_faq-list-widget__item-title { margin: 0; font-size: 1em; }
.lsvr_faq-list-widget__item-title-link { text-decoration: none; }
.lsvr_faq-list-widget__item-category { margin: 2px 0 0 0; font-size: 0.875em; }
.lsvr_faq-list-widget__item-category-link { text-decoration: none; }
// LSVR Featured FAQ
.lsvr_faq-featured-widget .widget__title { margin-bottom: $vs / 2; padding: 0; border: 0; }
.lsvr_faq-featured-widget__content-inner { padding: 20px; border: 1px solid transparent; }
.lsvr_faq-featured-widget__title { margin: 0; font-size: 1em; }
.lsvr_faq-featured-widget__title-link { text-decoration: none; }
.lsvr_faq-featured-widget__category { margin: $vs / 2 0 0 0; font-size: 0.875em; }
.lsvr_faq-featured-widget__category-link { text-decoration: none; }
.lsvr_faq-featured-widget__excerpt p { margin: $vs / 2 0 0 0; }
.lsvr_faq-featured-widget .widget__more { margin-top: $vs / 2; }
// Archive
.widget_archive {
ul { @include list-reset; }
li { @include list-item-reset; margin: 10px 0 0 0; }
li:first-child { margin: 0; }
select { max-width: 260px; }
a { text-decoration: none; }
}
// Calendar
.widget_calendar {
table { width: 100%; border-collapse: collapse; border: 0; }
caption { margin-bottom: 10px; font-size: 0.875em; text-transform: uppercase; letter-spacing: 0.04em; }
th { padding-bottom: 10px; font-size: 0.875em; border: 0; }
td { border: 0; }
tbody td { padding: 8px 0; font-size: 0.875em; text-align: center; }
tfoot td { padding: 8px 0 0 0; font-size: 0.875em; }
tfoot a { font-weight: bold; text-decoration: none; }
#prev { text-align: left; }
#next { text-align: right; }
}
// Categories
.widget_categories {
ul { @include list-reset; }
li { @include list-item-reset; margin: 10px 0 0 0; }
.widget__inner > li:first-child { margin: 0; }
ul ul { margin-left: 30px; }
select { max-width: 260px; }
a { text-decoration: none; }
}
// Gallery
.widget.widget_media_gallery {
.gallery-item a:hover { opacity: 0.9; }
.gallery-item a:active { opacity: 0.8; }
}
// Image
.widget_media_image {
a:hover { opacity: 0.9; }
a:active { opacity: 0.8; }
}
// Meta
.widget_meta {
ul { @include list-reset; }
li { @include list-item-reset; margin: $vs / 2 0 0 0; }
a { text-decoration: none; }
}
// Menu
.widget_nav_menu {
.current-menu-item > .sub-menu,
.current-menu-ancestor > .sub-menu { display: block; }
.current-menu-item > a { font-weight: bold; }
ul { @include list-reset; }
li { @include list-item-reset; position: relative; margin: 10px 0 0 0; }
.menu > li > .sub-menu,
.menu > li > .sub-menu > li > .sub-menu,
.menu > li > .sub-menu > li > .sub-menu > li > .sub-menu { margin-left: 30px; }
.menu > li > .sub-menu > li > .sub-menu > li > .sub-menu ul { margin-left: 5px; }
a { text-decoration: none; }
}
// Pages
.widget_pages {
ul { @include list-reset; }
li { @include list-item-reset; margin: $vs / 2 0 0 0; }
.widget__inner > li:first-child { margin: 0; }
ul ul { margin-left: 30px; }
a { text-decoration: none; }
}
// Recent comments
.widget_recent_comments {
ul { @include list-reset; }
li { @include list-item-reset; margin: $vs / 2 0 0 0; }
a { text-decoration: none; }
.url { font-weight: normal; }
}
// Recent posts
.widget_recent_entries {
ul { @include list-reset; }
li { @include list-item-reset; margin: $vs / 2 0 0 0; }
.post-date { display: block; margin: 5px 0 0 0; font-size: 0.875em; }
a { text-decoration: none; }
}
// RSS
.widget_rss {
ul { @include list-reset; }
li { @include list-item-reset; margin: $vs / 2 0 0 0; }
.rss-date { display: block; margin: 5px 0 0 0; font-size: 0.875em; }
.rssSummary { display: block; margin: 5px 0 0 0; font-size: 0.875em; }
a { text-decoration: none; }
}
// Tagcloud
.widget_tag_cloud {
.tag-cloud-link { display: inline-block; margin: 0 2px 4px 0; padding: 2px 5px; text-decoration: none; }
}
/* -----------------------------------------------------------------------------
6. FOOTER
----------------------------------------------------------------------------- */
#footer { position: relative; z-index: 10; }
/* -------------------------------------------------------------------------
FOOTER WIDGETS
------------------------------------------------------------------------- */
.footer-widgets { position: relative; padding: $vs * 2.5 0 $vs * 0.5 0; background-position: center 0; background-size: cover;
.footer-widgets__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.footer-widgets__inner { position: relative; padding: 0 30px; z-index: 20; }
.widget { margin: 0 0 $vs * 2 0; }
.widget-title,
.widget__title { font-size: 1.125em; border: 0; }
// LSVR Featured widgets
.lsvr-post-featured-widget .widget__title,
.lsvr_faq-featured-widget .widget__title,
.lsvr_gallery-featured-widget .widget__title,
.lsvr_project-featured-widget .widget__title,
.lsvr_service-featured-widget .widget__title,
.lsvr_testimonial-featured-widget .widget__title { margin-bottom: $vs; }
// Tagcloud
.widget_tag_cloud {
.tag-cloud-link { padding: 0; }
}
}
/* -------------------------------------------------------------------------
FOOTER BOTTOM
------------------------------------------------------------------------- */
.footer-bottom { position: relative; padding: 0 30px; }
.footer-bottom__inner { @include clearfix; position: relative; padding: $vs 0; border-top: 1px solid transparent; }
.footer-bottom a { text-decoration: none; }
// Footer menu
.footer-menu { float: right; width: 45%; font-size: 0.875em; text-align: right; }
.footer-menu__list { @include list-reset; }
.footer-menu__list > li { @include list-item-reset; display: inline-block; margin: 0 0 3px 14px; }
// Footer text
.footer-text { float: left; width: 45%; font-size: 0.875em; line-height: 1.3em; }
.footer-text p { margin: 0; }
/* -----------------------------------------------------------------------------
7. ELEMENTS
----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
CTA
------------------------------------------------------------------------- */
.lsvr-beautyspot-cta { margin: $vs * 2 0 $vs * 2 0; }
.lsvr-beautyspot-cta__inner { position: relative; padding: 0 30px; }
.lsvr-beautyspot-cta__content { position: relative; z-index: 20; }
.lsvr-beautyspot-cta--has-button .lsvr-beautyspot-cta__content { padding-right: 300px; }
.lsvr-beautyspot-cta__title { margin: 0; }
.lsvr-beautyspot-cta__text { font-size: 1.125em; font-style: italic; }
.lsvr-beautyspot-cta__text > p { margin: 5px 0 0 0; }
.lsvr-beautyspot-cta__button { position: absolute; top: 50%; right: 0; margin: -25px 0 0 0; font-size: 1.125em; text-transform: uppercase; }
.lsvr-beautyspot-cta__button-link { @include c-button; }
// Has dark background
.lsvr-beautyspot-cta--has-dark-background { margin: 0;
.lsvr-beautyspot-cta__inner { padding-top: $vs * 2; padding-bottom: $vs * 2 }
}
/* -------------------------------------------------------------------------
FAQ
------------------------------------------------------------------------- */
.lsvr-beautyspot-faq { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-faq__inner { position: relative; padding: 0 30px; }
.lsvr-beautyspot-faq__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-faq__content { position: relative; z-index: 20; }
.lsvr-beautyspot-faq__title { margin: 0; }
.lsvr-beautyspot-faq__title-link { text-decoration: none; }
.lsvr-beautyspot-faq__subtitle { margin: 5px 0 0 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-faq__subtitle a { text-decoration: none; }
.lsvr-beautyspot-faq__list { margin: 0; }
.lsvr-beautyspot-faq__post { margin: 0 0 $vs / 2 0; border: 1px solid transparent; }
.lsvr-beautyspot-faq__post-header { @include transition( background-color 500ms ); position: relative;
padding: 20px 50px 20px 30px; cursor: pointer; }
.lsvr-beautyspot-faq__post-header:before { @include beautyspot-icons; content: '\f107'; position: absolute;
top: 20px; right: 25px; font-size: 20px; }
.lsvr-beautyspot-faq__post--expanded .lsvr-beautyspot-faq__post-header:before { content: '\f106'; }
.lsvr-beautyspot-faq__post-title { margin: 0; font-size: 1em; }
.lsvr-beautyspot-faq__post-content-wrapper { display: none; padding: 30px; border-top: 1px solid transparent; }
.lsvr-beautyspot-faq__post-content > p { margin: $vs / 2 0 0 0; }
.lsvr-beautyspot-faq__post-content > p:first-child { margin: 0; }
.lsvr-beautyspot-faq__post-permalink-link { font-size: 0.875em; text-decoration: none; }
.lsvr-beautyspot-faq__post-footer { margin-top: $vs / 2; }
.lsvr-beautyspot-faq__post-meta { display: inline-block; margin: 0 20px 0 0; font-size: 0.875em; }
.lsvr-beautyspot-faq__post-meta .post__term-link { text-decoration: none; }
.lsvr-beautyspot-faq__post-footer-permalink { display: inline-block; margin: 0; font-size: 0.875em; }
.lsvr-beautyspot-faq__post-footer-permalink-link { text-decoration: none; }
// Has dark background
.lsvr-beautyspot-faq--has-dark-background { margin: 0;
.lsvr-beautyspot-faq__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 1.5; }
}
/* -------------------------------------------------------------------------
GALLERIES
------------------------------------------------------------------------- */
.lsvr-beautyspot-galleries { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-galleries__inner { position: relative; }
.lsvr-beautyspot-galleries__header-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-galleries__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-galleries__title { margin: 0; }
.lsvr-beautyspot-galleries__title-link { text-decoration: none; }
.lsvr-beautyspot-galleries__subtitle { margin: 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-galleries__subtitle a { text-decoration: none; }
.lsvr-beautyspot-galleries__list-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-galleries__list { margin: -5px; }
.lsvr-beautyspot-galleries__item { padding: 5px; }
.lsvr-beautyspot-galleries__post { margin: 0 0 $vs 0; background-size: cover; background-position: center; }
.lsvr-beautyspot-galleries__post-inner { position: relative; display: table; table-layout: fixed; width: 100%; height: 300px; }
.lsvr-beautyspot-galleries__post-bg { display: table-cell; position: relative; padding: 20px;
@include transition( all, 300ms ); vertical-align: bottom; border-radius: 3px; }
.lsvr-beautyspot-galleries__post-header { position: relative; z-index: 20; }
.lsvr-beautyspot-galleries__post-title { margin: 0; font-size: 1.125em; }
.lsvr-beautyspot-galleries__post-title-link { text-decoration: none; }
.lsvr-beautyspot-galleries__post-meta { position: relative; margin: $vs / 2 0 0 0; padding: 5px 0 0 0; font-size: 0.875em;
border-top: 1px solid transparent; z-index: 20; }
.lsvr-beautyspot-galleries__post-meta .post__term-link { text-decoration: none; }
.lsvr-beautyspot-galleries__post-meta-images { display: block; }
.lsvr-beautyspot-galleries__post-overlay-link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
// Fullwidth layout
.lsvr-beautyspot-galleries--fullwidth-layout { margin-top: 0; margin-bottom: 0;
.lsvr-beautyspot-galleries__header { margin-top: $vs * 2.5; }
.lsvr-beautyspot-galleries__list-wrapper { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-galleries__list-wrapper .lsvr-container { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.lsvr-beautyspot-galleries__list { margin: 0; }
.lsvr-beautyspot-galleries__item { padding: 0; }
.lsvr-beautyspot-galleries__post { margin: 0; }
}
// Has dark background
.lsvr-beautyspot-galleries--has-dark-background { margin: 0;
.lsvr-beautyspot-galleries__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 2.5; }
}
// Fullwidth layout and has dark background
.lsvr-beautyspot-galleries--fullwidth-layout.lsvr-beautyspot-galleries--has-dark-background {
.lsvr-beautyspot-galleries__header { margin-top: 0; }
.lsvr-beautyspot-galleries__inner { padding-bottom: 0; }
}
/* -------------------------------------------------------------------------
GALLERY
------------------------------------------------------------------------- */
.lsvr-beautyspot-gallery { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-gallery__inner { position: relative; }
.lsvr-beautyspot-gallery__header-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-gallery__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-gallery__title { margin: 0; }
.lsvr-beautyspot-gallery__title-link { text-decoration: none; }
.lsvr-beautyspot-gallery__subtitle { margin: 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-gallery__subtitle a { text-decoration: none; }
.lsvr-beautyspot-gallery__list-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-gallery__list { @include list-reset; margin: -5px; }
.lsvr-beautyspot-gallery__item { @include list-item-reset; padding: 5px; }
.lsvr-beautyspot-gallery__item-thumb { margin: 0; }
.lsvr-beautyspot-gallery__item-thumb-link:hover { opacity: 0.8; }
.lsvr-beautyspot-gallery__item-thumb-link:active { opacity: 0.7; }
.lsvr-beautyspot-gallery__item-image { display: block; }
// Cropped
.lsvr-beautyspot-gallery__item-thumb--cropped .lsvr-beautyspot-gallery__item-thumb-link { display: block; padding-bottom: 70%; background-position: center; background-size: cover; }
// Fullwidth layout
.lsvr-beautyspot-gallery--fullwidth-layout { margin-top: 0; margin-bottom: 0;
.lsvr-beautyspot-gallery__header { margin-top: $vs * 2.5; }
.lsvr-beautyspot-gallery__list-wrapper { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-gallery__list-wrapper .lsvr-container { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.lsvr-beautyspot-gallery__list { margin: 0; }
.lsvr-beautyspot-gallery__item { padding: 0; }
}
// Has dark background
.lsvr-beautyspot-gallery--has-dark-background { margin: 0;
.lsvr-beautyspot-gallery__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 2.5; }
}
// Fullwidth layout and has dark background
.lsvr-beautyspot-gallery--fullwidth-layout.lsvr-beautyspot-gallery--has-dark-background {
.lsvr-beautyspot-gallery__header { margin-top: 0; }
.lsvr-beautyspot-gallery__inner { padding-bottom: 0; }
}
/* -------------------------------------------------------------------------
INTRO
------------------------------------------------------------------------- */
.lsvr-beautyspot-intro { margin: $vs * 2.5 0 $vs * 2.5 0; }
.lsvr-beautyspot-intro__inner { position: relative; margin: 0 auto; padding: 0 30px; max-width: 1400px; }
.lsvr-beautyspot-intro__image-wrapper { display: inline-block; margin: 0; }
.lsvr-beautyspot-intro__image { border-radius: 50%; }
.lsvr-beautyspot-intro__title { margin: 0; }
.lsvr-beautyspot-intro__title a { text-decoration: none; }
.lsvr-beautyspot-intro__subtitle { margin: 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-intro__subtitle a { text-decoration: none; }
.lsvr-beautyspot-intro__text { margin-top: $vs; font-size: 1.125em; }
.lsvr-beautyspot-intro__text:first-child { margin: 0; }
.lsvr-beautyspot-intro__text p { margin: $vs 0 0 0; }
.lsvr-beautyspot-intro__text p:first-child { margin: 0; }
.lsvr-beautyspot-intro__more { margin: $vs 0 0 0; }
// Has image
.lsvr-beautyspot-intro--has-image {
.lsvr-beautyspot-intro__wrapper { display: table; }
.lsvr-beautyspot-intro__image-col { display: table-cell; width: 25%; }
.lsvr-beautyspot-intro__text-col { @include border-box; display: table-cell;
padding-left: 50px; width: 75%; vertical-align: middle; }
}
/* -------------------------------------------------------------------------
POSTS
------------------------------------------------------------------------- */
.lsvr-beautyspot-posts { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-posts__inner { position: relative; padding: 0 30px; }
.lsvr-beautyspot-posts__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-posts__title { margin: 0; }
.lsvr-beautyspot-posts__title-link { text-decoration: none; }
.lsvr-beautyspot-posts__subtitle { margin: 5px 0 0 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-posts__subtitle a { text-decoration: none; }
.lsvr-beautyspot-posts__content { position: relative; z-index: 20; }
.lsvr-beautyspot-posts__post { margin: 0 0 $vs 0; }
.lsvr-beautyspot-posts__post-thumbnail { margin: 0 0 $vs / 2 0; }
.lsvr-beautyspot-posts__post-thumbnail-link { display: block; }
.lsvr-beautyspot-posts__post-thumbnail-link:hover { opacity: 0.9; }
.lsvr-beautyspot-posts__post-thumbnail-link:active { opacity: 0.8; }
.lsvr-beautyspot-posts__post-thumbnail img { display: block; }
.lsvr-beautyspot-posts__post-title { margin: 0; font-size: 1.125em; }
.lsvr-beautyspot-posts__post-title-link { text-decoration: none; }
.lsvr-beautyspot-posts__post-meta { margin: 5px 0 0 0; font-size: 0.875em; }
.lsvr-beautyspot-posts__post-meta .post__term-link { text-decoration: none; }
.lsvr-beautyspot-posts__post-content p { margin: $vs / 2 0 0 0; }
.lsvr-beautyspot-posts__post-permalink { margin: $vs / 2 0 0 0; }
.lsvr-beautyspot-posts__post-permalink-link { font-size: 0.875em; text-decoration: none; }
// Has background color or image
.lsvr-beautyspot-posts--has-dark-background { margin: 0;
.lsvr-beautyspot-posts__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 1.5; }
}
/* -------------------------------------------------------------------------
SERVICES
------------------------------------------------------------------------- */
.lsvr-beautyspot-services { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-services__inner { position: relative; }
.lsvr-beautyspot-services__header-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-services__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-services__title { margin: 0; }
.lsvr-beautyspot-services__title-link { text-decoration: none; }
.lsvr-beautyspot-services__subtitle { margin: 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-services__subtitle a { text-decoration: none; }
.lsvr-beautyspot-services__list-wrapper { padding-left: 30px; padding-right: 30px; }
.lsvr-beautyspot-services__list { margin: -5px; }
.lsvr-beautyspot-services__item { padding: 5px; }
.lsvr-beautyspot-services__post { position: relative; overflow: hidden; }
.lsvr-beautyspot-services__post-bg { position: relative; padding-bottom: 70%; background-size: cover; }
.lsvr-beautyspot-services__post-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%; overflow: hidden; }
.lsvr-beautyspot-services__post-header { display: table; width: 100%; height: 100%; }
.lsvr-beautyspot-services__post-header-inner { @include border-box; display: table-cell; padding: 30px;
width: 100%; height: 100%; text-align: center; vertical-align: middle; }
.lsvr-beautyspot-services__post-icon { font-size: 60px; }
.lsvr-beautyspot-services__post-title { margin: 10px 0 0 0; font-size: 1.5em; font-family: inherit; font-weight: normal; }
.lsvr-beautyspot-services__post-title-link { text-decoration: none; }
.lsvr-beautyspot-services__post-description { @include border-box; @include transition( opacity 250ms ); display: table; position: absolute;
top: 100%; left: 0; right: 0; bottom: 0; padding: 30px; width: 100%; height: 100%; opacity: 0; z-index: 10; }
.lsvr-beautyspot-services__item:hover .lsvr-beautyspot-services__post-description { top: 0; opacity: 1; }
.lsvr-beautyspot-services__item:active .lsvr-beautyspot-services__post-description { opacity: 0.9; }
.lsvr-beautyspot-services__post-description-inner { display: table-cell; text-align: center; vertical-align: middle; }
.lsvr-beautyspot-services__post-description p { margin: $vs / 2 0 0 0; }
.lsvr-beautyspot-services__post-description p:first-child { margin: 0; }
.lsvr-beautyspot-services__post-permalink-link { display: inline-block; border: 2px solid transparent; }
.lsvr-beautyspot-services__post-overlay-link { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%; z-index: 20; }
// Fullwidth layout
.lsvr-beautyspot-services--fullwidth-layout { margin-top: 0; margin-bottom: 0;
.lsvr-beautyspot-services__header { margin-top: $vs * 2.5; }
.lsvr-beautyspot-services__list-wrapper { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-services__list-wrapper .lsvr-container { width: 100%; max-width: 100%; margin: 0; padding: 0; }
.lsvr-beautyspot-services__list { margin: 0; }
.lsvr-beautyspot-services__item { padding: 0; }
}
// Has dark background
.lsvr-beautyspot-services--has-dark-background { margin: 0;
.lsvr-beautyspot-services__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 2.5; }
}
// Fullwidth layout and has dark background
.lsvr-beautyspot-services--fullwidth-layout.lsvr-beautyspot-services--has-dark-background {
.lsvr-beautyspot-services__header { margin-top: 0; }
.lsvr-beautyspot-services__inner { padding-bottom: 0; }
}
/* -------------------------------------------------------------------------
SIDEBAR
------------------------------------------------------------------------- */
.lsvr-beautyspot-sidebar { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-sidebar__inner { padding: 0 30px; }
.lsvr-beautyspot-sidebar__list { @include clearfix; @include border-box; position: relative; margin-left: -15px; margin-right: -15px; }
.lsvr-beautyspot-sidebar__list > .widget { position: relative; float: left; margin: 0 0 $vs 0; padding-left: 15px; padding-right: 15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.lsvr-beautyspot-sidebar__list--1-cols > .widget { float: none; }
.lsvr-beautyspot-sidebar__list--2-cols > .widget:nth-child( 2n+1 ),
.lsvr-beautyspot-sidebar__list--3-cols > .widget:nth-child( 3n+1 ),
.lsvr-beautyspot-sidebar__list--4-cols > .widget:nth-child( 4n+1 ) { clear: left; }
.lsvr-beautyspot-sidebar__list--1-cols > .widget { width: 100; }
.lsvr-beautyspot-sidebar__list--2-cols > .widget { width: 50%; }
.lsvr-beautyspot-sidebar__list--3-cols > .widget { width: 33.33%; }
.lsvr-beautyspot-sidebar__list--4-cols > .widget { width: 25%; }
/* -------------------------------------------------------------------------
TESTIMONIALS
------------------------------------------------------------------------- */
.lsvr-beautyspot-testimonials { margin: $vs * 2.5 0 $vs * 1.5 0; }
.lsvr-beautyspot-testimonials__inner { padding: 0 30px; }
.lsvr-beautyspot-testimonials__header { @include section-header-decor; margin: 0 0 $vs * 1.5 0; }
.lsvr-beautyspot-testimonials__title { margin: 0; }
.lsvr-beautyspot-testimonials__title-link { text-decoration: none; }
.lsvr-beautyspot-testimonials__subtitle { margin: 0; font-size: 1.125em; font-family: inherit; font-weight: normal; font-style: italic; }
.lsvr-beautyspot-testimonials__subtitle a { text-decoration: none; }
.lsvr-beautyspot-testimonials__content { position: relative; z-index: 20; }
.lsvr-beautyspot-testimonials__post { margin: 0 0 $vs 0; padding: 30px; border: 1px solid transparent; }
.lsvr-beautyspot-testimonials__post-quote { margin: 0; font-size: 1em; }
.lsvr-beautyspot-testimonials__post-quote > p { margin: 0 0 $vs / 2 0; font-size: 1.125em; }
.lsvr-beautyspot-testimonials__post-footer { position: relative; }
.lsvr-beautyspot-testimonials__post-footer--has-thumbnail { padding-left: 50px; }
.lsvr-beautyspot-testimonials__post-thumbnail { margin: 0; position: absolute; top: -2px; left: 0; width: 40px; }
.lsvr-beautyspot-testimonials__post-thumbnail-link { display: block; border: 2px solid transparent; border-radius: 50%; }
.lsvr-beautyspot-testimonials__post-thumbnail-link > img { display: block; border-radius: 50%; }
.lsvr-beautyspot-testimonials__post-title { font-size: 1em; font-style: normal; }
.lsvr-beautyspot-testimonials__post-title-link { font-weight: bold; text-decoration: none; }
.lsvr-beautyspot-testimonials__post-title-description { display: block; margin: 2px 0 0 0; font-size: 0.875em; }
// Has background color or image
.lsvr-beautyspot-testimonials--has-dark-background { margin: 0;
.lsvr-beautyspot-testimonials__inner { padding-top: $vs * 2.5; padding-bottom: $vs * 1.5; }
}
/* -------------------------------------------------------------------------
LSVR ELEMENTS
------------------------------------------------------------------------- */
.shortcode-widget { margin-bottom: $vs; }
// Alert message
.lsvr-alert-message { position: relative; margin: 0 0 $vs 0; padding: 22px 20px 20px 50px; }
.lsvr-alert-message:before { @include beautyspot-icons; content: '\f129'; position: absolute; top: 23px; left: 20px; font-size: 20px; }
.lsvr-alert-message__title { margin: 0; font-size: 1em; }
.lsvr-alert-message__text { margin: 2px 0 0 0; }
.lsvr-alert-message__text:first-child { margin-top: 0; }
.lsvr-alert-message__text > p { margin: $vs / 2 0 0 0; }
.lsvr-alert-message__text > p:first-child { margin: 0; }
// Button
.lsvr-button { @include c-button; margin: 0 0 $vs 0; }
.lsvr-button--small { padding: 5px 15px; font-size: 0.75em; }
.lsvr-button--large { padding: 10px 30px; font-size: 1.125em; }
// Counter
.lsvr-counter { margin: 0 0 $vs 0; }
.lsvr-counter__number { margin: 0; font-size: 3em; font-weight: bold; }
.lsvr-counter__label { margin: 0; }
// CTA
.lsvr-cta { margin: 0 0 $vs 0; padding: 30px; border: 1px solid transparent; }
.lsvr-cta--has-button .lsvr-cta__inner { padding-right: 200px; }
.lsvr-cta__inner { position: relative; }
.lsvr-cta__title { margin: 0 0 $vs / 2 0; }
.lsvr-cta__text { font-size: 1.125em; font-style: italic; }
.lsvr-cta__text > p { margin: $vs / 2 0 0 0; }
.lsvr-cta__text > p:first-child { margin: 0; }
.lsvr-cta__button { position: absolute; top: 50%; right: 0; margin: -25px 0 0 0; }
.lsvr-cta__button-link { @include c-button; }
// Feature
.lsvr-feature { margin: 0 0 $vs 0; }
.lsvr-feature--has-icon .lsvr-feature__inner { position: relative; padding-left: 50px; }
.lsvr-feature__icon { position: absolute; top: 0; left: 0; font-size: 36px; }
.lsvr-feature__title { margin: 0 0 $vs / 2 0; font-size: 1.125em; }
.lsvr-feature__title-link { text-decoration: none; }
.lsvr-feature__text > p { margin: $vs / 2 0 0 0; }
.lsvr-feature__text > p:first-child { margin: 0; }
.lsvr-feature__more { margin: $vs / 2 0 0 0; }
.lsvr-feature__more-link { text-decoration: none; }
// Pricing table
.lsvr-pricing-table { margin: 0 0 $vs 0; border: 1px solid transparent; text-align: center; }
.lsvr-pricing-table__inner { padding: 30px; }
.lsvr-pricing-table__title { padding: 15px 10px; margin: -31px -31px $vs / 2 -31px; font-weight: normal; }
.lsvr-pricing-table__price { margin: 0 0 $vs / 2 0; }
.lsvr-pricing-table__price-value { display: block; line-height: 1em; font-size: 3.75em; font-weight: bold; }
.lsvr-pricing-table__price-description { display: block; margin: 0; }
.lsvr-pricing-table__text { padding-top: $vs; border-top: 1px solid transparent; }
.lsvr-pricing-table__text > p { margin: $vs / 2 0 0 0; }
.lsvr-pricing-table__text > p:first-child { margin: 0; }
.lsvr-pricing-table__button { margin: $vs 0 0 0; }
.lsvr-pricing-table__button-link { @include c-button; }
// Progress bar
.lsvr-progress-bar { margin: 0 0 $vs 0; }
.lsvr-progress-bar__title { margin: 0 0 $vs / 2 0; }
.lsvr-progress-bar__bar { position: relative; }
.lsvr-progress-bar__bar-inner { height: 25px; }
.lsvr-progress-bar__bar-label { position: absolute; top: 4px; right: 10px; font-size: 0.875em; font-weight: bold; }
// Slides
.lsvr_slide-list { position: relative; }
.lsvr_slide-list__bg { background-position: center 0; background-size: cover; background-repeat: no-repeat; }
.lsvr_slide-list__list { position: relative; width: 100%; height: 500px; overflow: hidden; }
.lsvr_slide-list__item { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.lsvr_slide-list__item:first-child { display: block; }
.lsvr_slide-list__item--active { display: block; z-index: 20; }
.lsvr_slide-list__item--next { display: block; opacity: 0; z-index: 10; }
.lsvr_slide-list__item-bg { position: relative; width: 100%; height: 100%; background-position: center 0; background-size: cover; background-repeat: no-repeat; z-index: 10; }
.lsvr_slide-list__item-inner { position: relative; width: 100%; height: 100%; }
.lsvr_slide-list__item-content-wrapper { position: relative; display: table; width: 100%; height: 100%; z-index: 40; }
.lsvr_slide-list__item-content { display: table-cell; padding: 0 30px; width: 100%; height: 100%; vertical-align: bottom; }
.lsvr_slide-list__item-content-inner { @include border-box; position: relative; display: inline-block; left: 0; padding: $vs * 2 30px $vs * 2 2px;
width: 100%; max-width: 380px; z-index: 30; }
.lsvr_slide-list__item-content-inner:before { content: ''; display: block; position: absolute; top: 0; left: -1000px; bottom: 0;
width: 1000px; height: 100%; }
.lsvr_slide-list__item--next .lsvr_slide-list__item-content-inner { left: -500px; }
.lsvr_slide-list__item-title { margin: 0; font-size: 2.25em; }
.lsvr_slide-list__item-text { margin-top: $vs / 2; font-size: 1.125em; }
.lsvr_slide-list__item-text:first-child { margin-top: 0; }
.lsvr_slide-list__item-text > p { margin: $vs / 2 0 0 0; }
.lsvr_slide-list__item-text > p:first-child { margin: 0; }
.lsvr_slide-list__item-button { margin: $vs 0 0 0; }
.lsvr_slide-list__item-button:first-child { margin: 0; }
.lsvr_slide-list__item-button-link { padding: 10px 30px; font-size: 1em; }
.lsvr_slide-list__item-overlay-link { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.lsvr_slide-list__nav { position: absolute; right: 30px; bottom: 30px; z-index: 50; }
.lsvr_slide-list__nav-button { display: inline-block; margin: 0 5px; padding: 0; width: 40px; height: 40px; line-height: 42px; }
.lsvr_slide-list__nav-button-icon { @include transition( left 250ms ); position: relative; left: 0; }
.lsvr_slide-list__nav-button-icon:before { @include beautyspot-icons; font-size: 16px; }
.lsvr_slide-list__nav-button--prev .lsvr_slide-list__nav-button-icon:before { content: '\f053'; }
.lsvr_slide-list__nav-button--next .lsvr_slide-list__nav-button-icon:before { content: '\f054'; }
.lsvr_slide-list__nav-button--prev:active .lsvr_slide-list__nav-button-icon { left: -2px; }
.lsvr_slide-list__nav-button--next:active .lsvr_slide-list__nav-button-icon { left: 2px; }
// Slide animation
@media ( min-width: 768px ) {
.lsvr_slide-list__item--animate-out {
animation: lsvr_slide-list-out 500ms 1 ease-in-out; animation-fill-mode: forwards;
animation-delay: 300ms;
}
.lsvr_slide-list__item--animate-out .lsvr_slide-list__item-content-inner {
animation: lsvr_slide-list-content-out 500ms 1 ease-in-out; animation-fill-mode: forwards;
}
.lsvr_slide-list__item--animate-in {
animation: lsvr_slide-list-in 250ms 1 ease-in-out; animation-fill-mode: forwards;
animation-delay: 250ms;
}
.lsvr_slide-list__item--animate-in .lsvr_slide-list__item-content-inner {
animation: lsvr_slide-list-content-in 500ms 1 ease-in-out; animation-fill-mode: forwards;
animation-delay: 500ms;
}
@keyframes lsvr_slide-list-out {
0% {
opacity: 1;
} 100% {
opacity: 0;
}
}
@keyframes lsvr_slide-list-content-out {
0% {
left: 0;
} 100% {
left: -500px;
}
}
@keyframes lsvr_slide-list-in {
0% {
opacity: 0;
} 100% {
opacity: 1;
}
}
@keyframes lsvr_slide-list-content-in {
0% {
left: -500px;
} 100% {
left: 0
}
}
}
/* -----------------------------------------------------------------------------
8. OTHER
----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
CONTACT FROM 7
------------------------------------------------------------------------- */
.wpcf7 form .wpcf7-response-output { position: relative; margin: 0 0 $vs 0; padding: 22px 20px 20px 50px; border: 0; }
.wpcf7 form .wpcf7-response-output:before { @include beautyspot-icons; content: '\f129'; position: absolute; top: 20px; left: 20px; font-size: 24px; }
.wpcf7-submit { @include c-button; }
span.wpcf7-list-item { margin: 0 15px 0 0; }
.wpcf7-list-item input { margin-right: 5px; }
.wpcf7-list-item-label { font-weight: normal; text-transform: none; cursor: pointer; }
/* -------------------------------------------------------------------------
ELEMENTOR
------------------------------------------------------------------------- */
.main--fullwidth .page__content .elementor-inner > .elementor-section-wrap > .elementor-section > .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated { padding: 0; }
.main--fullwidth .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.elementor-page {
.lsvr_person-list-widget__item-thumb-link > img,
.lsvr_person-featured-widget__thumb-link > img,
.lsvr_testimonial-list-widget__item-thumb-link > img,
.lsvr_testimonial-featured-widget__thumb-link > img,
.lsvr-beautyspot-testimonials__post-thumbnail-link > img { border-radius: 50%; }
}
body .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; }
/* -------------------------------------------------------------------------
MAGNIFIC POPUP
------------------------------------------------------------------------- */
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.9; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close,
.mfp-title, .mfp-counter { color: #FFF; }
.mfp-arrow { @include transition( all, 300ms ); }
.mfp-arrow,
.mfp-arrow:focus { opacity: 0.6; }
.mfp-arrow:active,
.mfp-arrow:hover { opacity: 1; }
.mfp-removing .mfp-arrow { opacity: 0; }
.mfp-figure:after { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.mfp-arrow:active { margin-top: -55px; }
.mfp-arrow,
.mfp-arrow:after { border: 0; }
.mfp-arrow:before { font-size: 30px; color: #FFF; @include beautyspot-icons; border: 0; }
.mfp-arrow-left:before { content: '\f053'; }
.mfp-arrow-right:before { content: '\f054'; }
.mfp-arrow-left { left: 10px; }
.mfp-arrow-left:active { left: 5px; }
.mfp-arrow-right { right: 10px; }
.mfp-arrow-right:active { right: 5px; }
/* -------------------------------------------------------------------------
TABLEPRESS
------------------------------------------------------------------------- */
body .tablepress tbody td,
body .tablepress thead th,
body .tablepress tfoot th { padding: 15px 20px 13px 20px; font-weight: normal; }
/* -------------------------------------------------------------------------
VISUAL COMPOSER
------------------------------------------------------------------------- */
.main--fullwidth .vc_row { margin-left: 0; margin-right: 0; }
.main--fullwidth .vc_row.lsvr-container { margin-left: auto; margin-right: auto; }
.main--fullwidth .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; }
/* -------------------------------------------------------------------------
WOOCOMMERCE
------------------------------------------------------------------------- */
.woocommerce-page, .woocommerce {
// Archive
&.post-type-archive-product li.product { text-align: center; }
&.post-type-archive-product li.product img { transition: opacity 250ms; }
&.post-type-archive-product li.product:hover img { opacity: 0.8; }
&.post-type-archive-product li.product:active img { opacity: 0.7; }
&.woocommerce ul.products li.product .price { font-size: 1.5em; font-weight: bold; }
.woocommerce-result-count,
.woocommerce-ordering { margin: 0 0 $vs * 2 0; }
ul.products li.product, ul.products li.product { margin-bottom: $vs * 2; }
a.button { @include c-button; }
a.added_to_cart { display: block; }
// Single
&.single-product .product_title { font-size: 2em; }
&.single-product h2 { font-size: 1.125em; }
&.single-product div.product p.price { font-size: 1.5em; font-weight: bold; }
.product_meta .posted_in,
.product_meta .tagged_as { display: block; }
.product_meta .posted_in { margin-bottom: $vs / 2; }
.related.products { margin-top: $vs * 2; }
.related.products ul.products li.product { text-align: center; }
// Pagination
nav.woocommerce-pagination { margin: $vs * 2 0 0 0;
ul.page-numbers,
ul.page-numbers li { display: inline-block; float: none; border: 0; }
a.page-numbers,
span.page-numbers { padding: 0; width: 40px; height: 40px; line-height: 40px;
font-weight: bold; text-decoration: none; text-align: center; border-radius: 50%; }
a.page-numbers:hover { opacity: 0.6; }
a.page-numbers:active { opacity: 0.4; }
.prev { margin-right: 20px; }
.next { margin-left: 20px; }
}
// Misc
#coupon_code { min-width: 120px; }
.quantity .qty { padding: 8px 10px; width: 80px; }
a.button.alt,
button.button,
button.button.alt { @include c-button; }
}
// WooCommerce widgets
// Search
.widget_product_search button { @include c-button; margin-top: 10px; }
/* -----------------------------------------------------------------------------
9. RESPONSIVE
----------------------------------------------------------------------------- */
#lsvr-media-query-breakpoint { font-family: '1200'; }
/* -------------------------------------------------------------------------
EXTRA LARGE DEVICES
------------------------------------------------------------------------- */
@media ( min-width: 1200px ) and ( max-width: 1400px ) {
// Header
.header-contact dt,
.header-contact dd { width: auto; float: none; }
}
@media ( max-width: 1400px ) {
#lsvr-media-query-breakpoint { font-family: '1400'; }
// Header
.header-branding__inner { padding-left: 40px; padding-right: 40px; }
.header-menu__list { padding-left: 10px; padding-right: 10px; }
}
@media ( max-width: 1350px ) {
#lsvr-media-query-breakpoint { font-family: '1350'; }
}
@media ( max-width: 1300px ) {
#lsvr-media-query-breakpoint { font-family: '1300'; }
}
@media ( max-width: 1250px ) {
#lsvr-media-query-breakpoint { font-family: '1250'; }
}
/* -------------------------------------------------------------------------
LARGE DEVICES
------------------------------------------------------------------------- */
@media ( max-width: 1199px ) {
#lsvr-media-query-breakpoint { font-family: '1199'; }
#wrapper { padding-left: 0; }
// General
.core__columns--fullwidth .wp-block-columns,
.main--fullwidth .wp-block-columns { padding-left: 30px; padding-right: 30px; }
// Header
#header { position: relative; width: auto; height: auto; }
.header__inner { padding: 0; height: auto; }
// Header languages
.header--has-search .header-languages,
.header-languages { position: relative; top: auto; right: auto; }
.header-languages__list { @include transform( none ); display: none; position: relative; top: auto; left: auto;
padding: 10px; text-align: center; border-radius: 0; }
.header-languages__item { margin: 0 10px; }
.header-languages__toggle { position: absolute; left: 10px; bottom: -50px; width: 40px; height: 40px; line-height: 35px; }
.header-languages__toggle-icon { position: relative; top: 1px; }
// Header branding
.header-branding { margin: 0; }
.header-branding__inner { padding: $vs * 1.5 60px; }
// Header menu
.header-menu { display: none; margin: 0 auto; padding: 0 20px $vs * 1.5 20px; max-width: 400px; }
.header-menu__list { padding: 0; }
.header-menu__item--level-0 { position: relative; margin-top: $vs / 2; }
.header-menu__item--level-0:first-child { margin-top: 0; }
.header-menu__item-link--level-0 { position: relative; font-size: 1em; font-weight: bold; text-decoration: none; text-transform: uppercase; }
.header-menu__item-link-wrapper--level-0 { display: block; overflow: hidden; }
.header-menu__item--level-0.menu-item-has-children > .header-menu__item-link-wrapper { margin-right: 40px; }
.header-menu__item-link--level-0:before { @include transition( all 250ms ); content: ''; display: block; position: absolute; top: 50%; left: 100%;
margin: -2px 0 0 10px; width: 400px; height: 2px; }
.header-menu__submenu { display: none; margin-left: 30px; }
.header-menu__submenu .header-menu__item { margin-top: $vs / 2; }
.header-menu__submenu .header-menu__item-link { text-decoration: none; }
.header-menu__submenu-toggle { display: block; position: absolute; top: -4px; right: 0; padding: 0; width: 30px; height: 30px;
line-height: 30px; text-align: center; border: 2px solid transparent; border-radius: 50%; }
.header-menu__submenu-toggle-icon:before { @include beautyspot-icons; content: '\f107'; font-size: 18px; }
.header-menu__submenu-toggle--active .header-menu__submenu-toggle-icon:before { content: '\f106'; }
// Header search
.header-search { display: none; position: relative; top: auto; right: 0; margin: 0 auto; padding: 0 20px $vs * 1.5 20px;
max-width: 400px; }
.header-search__toggle { display: none; }
.header-search__form { display: block; position: relative; top: auto; left: auto; width: 100%; }
.header-search__form:before { display: none; }
// Header panel
.header-panel { display: none; position: relative; }
.header-panel__inner { padding: $vs 30px; }
.header-panel__top { padding: 0; }
.header-contact { margin-bottom: 0; padding-top: $vs; max-width: 700px; border-top: 2px solid transparent; }
.header-contact:first-child { padding: 0; border: 0; }
.header-contact__item { margin: 0; width: 25%; }
.header-contact__item:nth-child(2n+1) { clear: none; }
.header-cta { margin: 0 0 $vs 0; }
.header-panel__bottom { margin-top: $vs; margin-bottom: 0; padding: 0; max-width: 700px; }
.header-panel__bottom:first-child { margin: 0; }
.header-panel__toggle { display: none; }
// Header mobile toggle
.header-mobile-toggle { display: block; position: absolute; top: 10px; right: 10px; padding: 0; width: 40px; height: 40px; line-height: 35px;
font-size: 20px; text-align: center; border-radius: 50%; border: 2px solid transparent; }
.header--languages-active .header-mobile-toggle { top: 52px; }
.header-mobile-toggle__icon:before { @include beautyspot-icons; content: '\f0c9'; position: relative; top: 1px; }
.header-mobile-toggle--active .header-mobile-toggle__icon:before { content: '\f00d'; font-size: 16px; top: -1px; }
}
/* -------------------------------------------------------------------------
MEDIUM DEVICES
------------------------------------------------------------------------- */
@media ( max-width: 991px ) {
#lsvr-media-query-breakpoint { font-family: '991'; }
// Header
.header-contact__item:first-child { margin-top: 0; }
.header-contact__item { float: none; clear: both; margin-top: 20px; width: auto; }
// Core
.core__columns-col--right #main { padding-left: 0; }
.core__columns-col--left #main { padding-right: 0; }
// Footer
.footer-widgets .footer-widgets__inner { padding-left: 0; padding-right: 0; }
.footer-bottom { padding-left: 0; padding-right: 0; }
.footer-menu,
.footer-text { float: none; width: auto; text-align: center; }
.footer-text { margin-top: $vs / 2; }
.footer-text:first-child { margin-top: 0; }
.footer-menu__list > li { margin: 0 7px 3px 7px; }
// Elements
.lsvr-beautyspot-cta__inner { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-cta--has-button .lsvr-beautyspot-cta__content { padding: 0; }
.lsvr-beautyspot-cta__button { position: relative; top: auto; right: auto; margin: $vs 0 0 0; }
.lsvr-beautyspot-faq__inner { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-intro__inner { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-posts__inner { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-services__header-wrapper,
.lsvr-beautyspot-services__list-wrapper { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-sidebar__inner { padding-left: 0; padding-right: 0; }
.lsvr-beautyspot-testimonials__inner { padding-left: 0; padding-right: 0; }
.lsvr-cta { padding: 20px; }
.lsvr-cta--has-button .lsvr-cta__inner { padding-right: 0; }
.lsvr-cta__button { position: relative; top: auto; right: auto; margin: $vs / 2 0 0 0; }
}
/* -------------------------------------------------------------------------
SMALL DEVICES
------------------------------------------------------------------------- */
@media ( max-width: 767px ) {
#lsvr-media-query-breakpoint { font-family: '767'; }
// WordPress
.wp-block-column:not(:last-child),
.wp-block-column:not(:first-child), .wp-block-column:nth-child(2n),
.wp-block-column { flex: 0 0 100%; margin: 0; }
// Header
.page-header__inner { padding: 0; }
// Core
.core__columns-inner { padding: 0; }
// Post common components
.post-navigation__prev,
.post-navigation__next { float: none; margin-top: $vs; width: auto; text-align: left; }
.post-navigation__prev:first-child,
.post-navigation__next:first-child { margin: 0; }
// Search results page
.search-results-page__item-title { float: none; width: auto; }
.search-results-page__item-type { float: none; margin: 10px 0 0 0; width: auto; text-align: left; }
// Error 404 page
.error-404-page__inner { padding-top: 85px; }
.error-404-page__title { line-height: 90px; font-size: 120px; }
// Sidebar
// Widgets
.lsvr-definition-list-widget__item-title,
.lsvr-definition-list-widget__item-text { float: none; width: auto; text-align: left; padding-left: 0; }
.lsvr-definition-list-widget__item-title { margin-top: $vs / 2; }
.lsvr-definition-list-widget__item-text:first-of-type,
.lsvr-definition-list-widget__item-text { margin: 5px 0 0 0; padding: 0; border: 0; }
// Elements
.lsvr-beautyspot-intro__wrapper { text-align: center; }
.lsvr-beautyspot-intro--has-image .lsvr-beautyspot-intro__wrapper { display: block; }
.lsvr-beautyspot-intro--has-image .lsvr-beautyspot-intro__image-col,
.lsvr-beautyspot-intro--has-image .lsvr-beautyspot-intro__text-col { display: block; padding: 0; width: auto; }
.lsvr-beautyspot-intro__image-wrapper { margin: 0 0 $vs 0; max-width: 200px; }
.lsvr-beautyspot-galleries__post-title { font-size: 1.125em; }
.lsvr-pricing-table__inner { padding: 20px; }
.lsvr-pricing-table__title { margin: -21px -21px $vs / 2 -21px; }
.lsvr_slide-list { padding-bottom: 70px; }
.lsvr_slide-list__item-content { padding: 0; text-align: center; }
.lsvr_slide-list__item-content-inner { padding: 30px; max-width: 100%; }
.lsvr_slide-list__item-content-inner:before { display: none; }
.lsvr_slide-list__item-title { font-size: 1.125em; }
.lsvr_slide-list__item-text { font-size: 1em; }
.lsvr_slide-list__nav { bottom: 15px; right: 50%; margin-right: -50px; }
}
/* -------------------------------------------------------------------------
EXTRA SMALL DEVICES
------------------------------------------------------------------------- */
@media ( max-width: 480px ) {
#lsvr-media-query-breakpoint { font-family: '480'; }
.lsvr-container { padding: 0 15px; }
// Header
.header-panel__bottom { padding-top: $vs; text-align: center; border-top: 2px solid transparent; }
.header-panel__bottom:first-child { margin: 0; border: 0; }
.header-panel__bottom-inner { display: block; }
.header-social { display: block; }
.header-panel__bottom-decor { display: none; }
.header-cart { display: block; padding: 0; }
.header--has-social-links .header-cart { margin-top: $vs / 2; }
.header-cart__button { display: inline-block; }
// Other
body .vc_row { margin-left: -10px; margin-right: -10px; }
} |