/* Theme Name: Yuna
Author:Danial Quinn
Author e-mail: dqsdeveloper@gmail.com
Version: 1.0.0
Created: September 2025
*/
/* Reset
----------------------------------------------------------------------------- */
:root {
--pico-font-family: 'Manrope', Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, 'Helvetica Neue', sans-serif;
--pico-font-size: 16px;
}
body {
interpolate-size: allow-keywords;
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: auto;
background-color: #fff;
overflow-x: hidden;
z-index: var(--z-base);
}
:focus {
outline: none !important;
box-shadow: none !important;
}
:focus-visible {
outline: #2d2c2f auto 1px !important;
outline-offset: -1px;
}
*:before,
*:after {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
}
iframe {
width: 100%;
border: none;
}
a {
color: inherit;
-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
color: var(--primary-500);
}
p {
color: var(--text-body);
}
img {
max-width: 100%;
}
textarea {
max-width: 100%;
resize: none;
}
:where(nav li)::before {
content: none;
float: none;
}
input[type='search']::-webkit-search-cancel-button {
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
-webkit-appearance: none;
cursor: pointer;
}
nav ol:last-of-type,
nav ul:last-of-type {
margin-right: 0;
}
nav ol:first-of-type,
nav ul:first-of-type {
margin-left: 0;
}
nav li :where(a, [role='link']) {
margin: 0;
padding: 0;
}
/* Global - Scrollbar
----------------------------------------------------------------------------- */
:root {
--scroll-track: #fcfcfc;
--scroll-thumb: #8b8b8b;
--scroll-thumb-hover: #a8a8a8;
--scroll-thumb-active: #787878;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: var(--scroll-track);
}
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb);
border: 4px solid var(--scroll-track);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--scroll-thumb-hover);
}
::-webkit-scrollbar-thumb:active {
background: var(--scroll-thumb-active);
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
background-color: var(--scroll-track);
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position-x: center;
}
::-webkit-scrollbar-button:single-button:vertical:increment {
background-color: var(--scroll-track);
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position-x: center;
}
/* ГОРИЗОНТАЛЬНЫЕ стрелки */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
background-color: var(--scroll-track);
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position-x: center;
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
background-color: var(--scroll-track);
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position-x: center;
}
.scroll_slim {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.scroll_slim::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.scroll_slim::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.scroll_slim::-webkit-scrollbar-track {
background: transparent;
}
.scroll_slim::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
/* Global - Typography
----------------------------------------------------------------------------- */
.stand .typography {
max-width: var(--container-laptop);
margin: 0 auto;
}
.typography {
/* behavior & shaping */
hanging-punctuation: first allow-end;
font-variant-ligatures: common-ligatures contextual;
font-variant-numeric: proportional-nums;
/* local tokens (удобно подправить в одном месте) */
--wrap-media-max: 40%;
--wrap-pull: 5em;
--gallery-gap: 0.6em;
--table-head-bg: #f7f6f7;
--table-row-alt: #f8fafa;
--code-bg: #f1f1f3;
--pre-bg: #f5f5f8;
/* layout */
font-kerning: normal;
text-wrap: pretty;
background: transparent;
box-shadow: none;
}
.typography > :first-child {
margin-top: 0;
}
.typography > :last-child {
margin-bottom: 0;
}
/* --- Headings & block spacing --- */
.typography :where(h1, h2, h3, h4, h5, h6) {
clear: both;
margin: 0;
margin-top: 1.85em;
font-size: var(--type-body);
font-weight: 600;
line-height: 1.25;
letter-spacing: var(--track-tight);
text-wrap: balance;
color: var(--text-display);
}
.typography h1 {
margin-top: 1.35em;
font-size: var(--type-display);
}
.typography h2 {
margin-top: 1.45em;
font-size: var(--type-heading);
}
.typography :is(h3, h4) {
font-size: var(--type-lead);
}
.typography h5 {
font-size: var(--type-body);
}
.typography h6 {
font-size: var(--type-small);
}
/*.typography :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, dl, blockquote, figure) {
margin-top: 0.5em;
}*/
.typography :is(h1, h2, h3, h4, h5, h6) + :is(p, blockquote, figure) {
margin-top: 0.5em;
}
.typography :is(ul, ol, dl) + :is(ul, ol, dl) {
margin-top: 2em;
}
/* --- Prose blocks --- */
.typography :where(p, ul, ol, dl, pre, blockquote, table, figure, details) {
margin: 0;
margin-top: 0.95em;
font-size: var(--type-body);
font-weight: 400;
line-height: 1.75;
color: var(--text-body);
}
.typography.lead > p:first-of-type {
font-size: var(--type-lead);
line-height: 1.6;
color: var(--text-heading);
}
.typography p + p {
margin-top: 1.35em;
}
/* --- Inline semantics --- */
.typography small {
font-size: 0.875em;
letter-spacing: var(--track-wider);
}
.typography mark {
background: color-mix(in oklch, var(--primary-500) 10%, transparent);
}
.typography em {
font-style: italic;
color: var(--text-soft);
}
.typography :where(b, strong) {
font-weight: 600;
color: var(--text-display);
}
.typography abbr,
.typography abbr:is([data-tooltip]) {
text-underline-offset: 2px;
text-decoration: underline dotted;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
text-decoration-skip-ink: auto;
color: var(--text-heading);
border: 0;
}
/* --- Fancy strike (del/s) --- */
.typography :is(del, s) {
--_strike: color-mix(in oklch, var(--danger-500) 45%, transparent);
padding: 0 0.15em;
text-decoration: none;
color: inherit;
background:
linear-gradient(to left, rgba(255, 255, 255, 0.5), transparent) 100% calc(50% + 1px) / 50% 1.5px no-repeat,
linear-gradient(2deg, var(--_strike) 50%, transparent 50%) center/ calc(100% - 10px) 5px no-repeat,
linear-gradient(-0.9deg, var(--_strike) 50%, transparent 50%) center/ calc(100% - 10px) 4px no-repeat,
linear-gradient(-60deg, var(--_strike) 50%, transparent 50%) 1px 50%/6px 4px no-repeat,
linear-gradient(120deg, var(--_strike) 50%, transparent 50%) calc(100% - 1px) calc(50% + 1px) / 8px 3px no-repeat;
}
/* --- Rules --- */
.typography hr {
clear: both;
margin: 3em 0;
border: 0;
border-top: 1px solid color-mix(in oklch, var(--surface-global) 95%, black);
}
/* --- Links --- */
.typography a {
text-underline-offset: 2px;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
color: var(--text-heading);
}
.typography a:hover {
text-decoration: none;
}
.typography a:visited {
color: color-mix(in oklch, var(--text-body) 75%, white);
}
/* Animated underline for [data-text] */
.typography a[data-text] {
position: relative;
display: inline-block;
font-size: 0;
text-decoration: none;
color: var(--primary-700);
cursor: pointer;
}
.typography a[data-text]::after,
.typography a[data-text]::before {
content: attr(data-text);
font-size: var(--type-body);
white-space: nowrap;
pointer-events: none;
}
.typography a[data-text]::before {
position: absolute;
inset: 0 auto auto 0;
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
filter: brightness(0.75);
transition: clip-path 275ms ease;
}
.typography a[data-text]:hover::before,
.typography a[data-text]:focus::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* --- Code / pre / kbd / samp --- */
.typography :where(code, kbd, samp, pre) {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.95em;
}
.typography pre {
padding: 1em;
background: var(--pre-bg);
border-radius: var(--radius-md);
overflow: auto;
}
.typography pre > code {
padding: 0;
background: transparent;
}
.typography code {
padding: 0.15em 0.45em;
font-size: var(--type-small);
font-weight: inherit;
line-height: 1.6;
color: var(--text-body);
background: var(--code-bg);
border-radius: var(--radius-md);
}
.typography kbd {
padding: 0.125em 0.45em;
font-weight: 600;
color: var(--text-heading);
background: #fafafa;
border: 1px solid #bbb;
border-bottom-width: 2px;
border-radius: 4px;
}
/* --- Quotes --- */
.typography q {
quotes: '“' '”' '‘' '’';
display: flex;
padding: 1em;
font-size: var(--type-lead);
color: var(--text-heading);
}
.typography q::before,
.typography q::after {
display: contents;
}
.typography q::before {
content: open-quote;
}
.typography q::after {
content: close-quote;
}
.typography blockquote {
position: relative;
margin-top: 1.35em;
padding: 0;
padding-left: 3em;
border: 0;
}
.typography blockquote::before,
.typography blockquote::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.typography blockquote::before {
width: 22px;
height: 22px;
background-color: var(--text-heading);
mask: url('data:image/svg+xml,')
no-repeat center/contain;
-webkit-mask: url('data:image/svg+xml,')
no-repeat center/contain;
}
.typography blockquote::after {
top: 30px;
left: 10px;
width: 3px;
height: calc(100% - 36px);
background: var(--text-heading);
border-radius: var(--radius-pill);
overflow: hidden;
}
.typography blockquote > *:first-child {
margin-top: 0;
padding-top: 0;
}
.typography blockquote > * {
font-size: var(--type-lead);
color: var(--text-heading);
}
.typography blockquote footer {
margin-top: 0.45em;
font-size: 0.875em;
letter-spacing: var(--track-wide);
color: var(--text-caption);
}
.typography blockquote footer::before {
content: '— ';
}
/* --- Lists --- */
.typography ul {
padding-left: 1.2em;
}
.typography ul li {
list-style: disc;
}
.typography ol {
margin-left: -0.4em;
padding-left: 1.4em;
}
.typography ol li {
list-style: decimal;
}
.typography dt {
font-weight: 500;
color: var(--text-heading);
}
.typography dd {
margin: 0 0 0.6em 1em;
}
.typography li {
margin: 0.5em 0;
line-height: 1.6;
}
/* --- Accordion (details/summary) --- */
.typography details {
margin-top: 2.35em;
}
.typography details + details {
margin-top: 1.25em;
}
.typography details + hr {
margin: 1.5em 0 2.5em;
}
.typography details[open] > summary {
margin-bottom: 0;
}
.typography details summary {
display: flex;
align-items: center;
gap: 1em;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--type-lead);
font-weight: 400;
color: var(--text-display) !important;
outline: none;
cursor: pointer;
user-select: none;
}
.typography summary::-webkit-details-marker {
display: none;
}
.typography summary::after {
display: none;
}
.typography summary::before {
content: '+';
display: grid;
flex: 0 0 auto;
place-items: center;
font-size: 175%;
font-weight: 100;
line-height: 0.5;
color: currentColor;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.typography details[open] summary::before {
content: '–';
transform: rotate(180deg);
}
.typography details::details-content {
block-size: 0;
padding: 1em;
padding-left: 0;
transition:
block-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
content-visibility 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) allow-discrete;
overflow: clip;
}
.typography details[open]::details-content {
block-size: auto;
}
.typography summary ~ *:nth-child(2) {
margin-top: 0.35em;
}
.typography summary ~ *:last-child {
margin-bottom: 0;
}
/* --- Tables --- */
.typography table {
border-collapse: collapse;
width: 100%;
}
.typography :where(th, td) {
vertical-align: top;
font-variant-numeric: tabular-nums lining-nums;
padding: 1em 0.5em;
font-size: var(--type-small);
letter-spacing: var(--track-wide);
white-space: nowrap;
background: transparent;
border: 0;
}
.typography thead th {
position: sticky;
top: 0;
padding: 0.75em 0.5em;
font-weight: 700;
color: var(--text-display);
background: var(--table-head-bg);
}
.typography tbody tr:nth-child(even) {
background: var(--table-row-alt);
}
.typography td p {
white-space: normal;
}
/* --- Media base (figure/picture) --- */
.typography :where(figure, picture) {
display: block;
margin: 2em auto;
padding: 0 3em;
}
.typography img {
display: block;
width: 100%;
height: auto;
}
/* --- Standalone picture: visuals & wrap --- */
.typography img {
border-radius: var(--radius-md);
box-shadow:
rgba(50, 50, 93, 0.25) 0 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0 8px 16px -8px;
}
.typography :is(picture.left, picture.right) {
position: relative;
max-width: var(--wrap-media-max);
padding: 0;
}
.typography picture.left {
float: left;
margin: 1.45em 1em 0.5em 0;
margin-left: calc(-1 * var(--wrap-pull));
}
.typography picture.right {
float: right;
margin: 1.45em 0 0.5em 1em;
margin-right: calc(-1 * var(--wrap-pull));
}
/* --- Wrapped gallery (figure.left/right wraps text) --- */
.typography :is(figure.left, figure.right) {
width: 60%;
max-width: 100%;
margin-top: 1.45em;
padding: 0;
}
.typography figure.left {
float: left;
margin: 1.45em 1em 1em calc(-1 * var(--wrap-pull));
}
.typography figure.right {
float: right;
margin: 1.45em calc(-1 * var(--wrap-pull)) 1em 1em;
}
.typography figure:has(> :is(picture.left, picture.right)) {
display: flow-root;
}
/* --- Gallery grid patterns (auto when ≥2 media) --- */
.typography figure :where(img, picture) {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
.typography :where(figure, picture) > picture {
padding: 0;
box-shadow: none;
}
.typography figure :is(img) {
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
@supports (selector(:has(*))) {
/* grid enable: есть хотя бы два медиа */
.typography figure:has(> :is(img, picture) ~ :is(img, picture)) {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: start;
gap: var(--gallery-gap);
}
/* exactly 2 */
.typography figure:has(> :nth-child(2 of :is(img, picture))):not(:has(> :nth-child(3 of :is(img, picture)))) > :is(img, picture) {
aspect-ratio: 16/10;
}
/* exactly 3 (hero + two squares) */
.typography figure:has(> :nth-child(3 of :is(img, picture))):not(:has(> :nth-child(4 of :is(img, picture)))) {
grid-template-columns: repeat(2, 1fr);
}
.typography figure:has(> :nth-child(3 of :is(img, picture))):not(:has(> :nth-child(4 of :is(img, picture)))) > :nth-child(1 of :is(img, picture)) {
grid-column: 1 / -1;
aspect-ratio: 21/9;
}
.typography figure:has(> :nth-child(3 of :is(img, picture))):not(:has(> :nth-child(4 of :is(img, picture)))) > :is(:nth-child(2 of :is(img, picture)), :nth-child(3 of :is(img, picture))) {
aspect-ratio: 5/4;
}
/* exactly 4 (2×2) */
.typography figure:has(> :nth-child(4 of :is(img, picture))):not(:has(> :nth-child(5 of :is(img, picture)))) > :is(img, picture) {
aspect-ratio: 4/3;
}
/* exactly 5 (row1:3; row2: wide+normal) */
.typography figure:has(> :nth-child(5 of :is(img, picture))):not(:has(> :nth-child(6 of :is(img, picture)))) {
grid-auto-flow: dense;
grid-auto-rows: 180px;
grid-template-columns: repeat(3, 1fr);
}
.typography figure:has(> :nth-child(5 of :is(img, picture))):not(:has(> :nth-child(6 of :is(img, picture)))) > :is(img, picture) {
aspect-ratio: auto;
}
.typography figure:has(> :nth-child(5 of :is(img, picture))):not(:has(> :nth-child(6 of :is(img, picture)))) > :nth-child(4 of :is(img, picture)) {
grid-column: 1 / span 2;
grid-row: 2;
}
.typography figure:has(> :nth-child(5 of :is(img, picture))):not(:has(> :nth-child(6 of :is(img, picture)))) > :nth-child(5 of :is(img, picture)) {
grid-column: 3;
grid-row: 2;
}
/* exactly 6 (top wide; last spans right col) */
.typography figure:has(> :nth-child(6 of :is(img, picture))):not(:has(> :nth-child(7 of :is(img, picture)))) {
grid-auto-flow: dense;
grid-auto-rows: 180px;
grid-template-columns: repeat(3, 1fr);
}
.typography figure:has(> :nth-child(6 of :is(img, picture))):not(:has(> :nth-child(7 of :is(img, picture)))) > :is(img, picture) {
aspect-ratio: auto;
}
.typography figure:has(> :nth-child(6 of :is(img, picture))):not(:has(> :nth-child(7 of :is(img, picture)))) > :nth-child(1 of :is(img, picture)) {
grid-column: 1 / span 2;
grid-row: 1;
}
.typography figure:has(> :nth-child(6 of :is(img, picture))):not(:has(> :nth-child(7 of :is(img, picture)))) > :nth-child(5 of :is(img, picture)) {
grid-column: 1 / span 2;
grid-row: 3;
}
.typography figure:has(> :nth-child(6 of :is(img, picture))):not(:has(> :nth-child(7 of :is(img, picture)))) > :nth-child(6 of :is(img, picture)) {
grid-column: 3;
grid-row: 2 / span 2;
}
/* hide caption for multi-image */
.typography figure:has(> :is(img, picture) ~ :is(img, picture)) > figcaption {
display: none !important;
visibility: hidden !important;
}
}
/* --- Tooltip (data-tooltip) --- */
.typography [data-tooltip] {
position: relative;
}
.typography [data-tooltip]::before,
.typography [data-tooltip]::after {
position: absolute;
left: 50%;
background: var(--text-display);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 10px);
transition:
transform 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s linear 0.15s;
animation: none;
z-index: var(--z-above);
}
.typography [data-tooltip]::before {
content: attr(data-tooltip);
bottom: 125%;
padding: 0.35em 1em;
font-size: 0.875em;
line-height: 1.45;
white-space: nowrap;
color: #fff;
border-radius: var(--radius-md);
pointer-events: none;
}
.typography [data-tooltip]::after {
content: '';
bottom: 100%;
background: transparent;
border: 0;
border-top: 0.5rem solid;
border-right: 0.5rem solid transparent;
border-left: 0.5rem solid transparent;
}
.typography [data-tooltip]:hover::before,
.typography [data-tooltip]:focus::before,
.typography [data-tooltip]:hover::after,
.typography [data-tooltip]:focus::after {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition:
transform 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
/* --- Chips / badges --- */
.typography dfn {
margin: 0 0.25ch;
padding: 0.1em var(--mspace-sm) 0.2em;
font-weight: 400;
font-style: normal;
line-height: 1;
color: var(--text-display);
background: var(--surface-secondary);
border-radius: var(--radius-pill);
}
/* --- Columnizing direct .typography > div (simple util) --- */
.typography div {
clear: both;
position: relative;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
align-items: start;
gap: 1rem;
}
.typography div div {
display: block;
}
.typography div > p + p {
margin-top: 1em;
}
/* --- Long tokens & wrapping --- */
.typography :where(p, li, blockquote) {
overflow-wrap: break-word;
hyphens: auto;
}
.typography :is(a, code) {
overflow-wrap: anywhere;
}
/* --- Captions --- */
.typography figcaption {
margin-top: 0.6em;
font: var(--font-caption);
text-align: center;
color: var(--text-caption);
}
/* --- Print --- */
@media print {
.typography :is(del, s) {
text-decoration: line-through;
background: none !important;
}
}
/* --- Optional a11y --- */
.typography :where(a, button, [role='button'], summary):focus-visible {
outline: 2px solid color-mix(in oklch, var(--primary-500) 60%, white);
outline-offset: 2px;
}
/* Global - Buttons
----------------------------------------------------------------------------- */
.corebtns {
position: relative;
display: flex;
gap: var(--mspace-md);
}
.corebtns a,
.corebtns button {
position: relative;
margin: 0;
padding: 0;
font-size: var(--type-body);
line-height: 1;
color: var(--text-heading);
background-color: transparent;
border: 0;
}
.core_underline a {
position: relative;
display: flex;
width: max-content;
}
.core_underline a:after {
content: '';
position: absolute;
bottom: 0px;
left: 0;
width: 0;
height: 1px;
border-top: 1px solid currentColor;
/*border-radius: var(--radius-pill);*/
transition: width 0.2s linear;
}
.core_underline a:hover:after {
width: 100%;
}
a[data-link] {
position: relative;
display: inline-block;
font-size: 0;
text-decoration: none;
color: var(--primary-700);
cursor: pointer;
}
a[data-link]::after,
a[data-link]::before {
content: attr(data-link);
font-size: var(--type-body);
white-space: nowrap;
pointer-events: none;
}
a[data-link]::before {
position: absolute;
inset: 0 auto auto 0;
top: 0;
left: 0;
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 2px;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
filter: brightness(0.75);
transition: clip-path 275ms ease;
}
a[data-link]:hover::before,
a[data-link]:focus::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.btn--line {
position: relative;
display: flex;
align-items: center;
width: max-content;
margin: 0;
margin-top: auto;
padding: var(--mspace-sm) 0;
font-size: var(--type-small);
font-weight: 600;
line-height: 1;
letter-spacing: var(--track-wide);
text-transform: uppercase;
text-decoration: none;
color: var(--text-display);
}
.btn--line:hover {
color: var(--text-display);
}
.btn--line:before {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 50%;
height: 2px;
background-color: transparent;
border-top: 2px solid currentColor;
transition: width 0.15s linear;
}
.btn--line:hover:before {
width: 100%;
}
.btn--line:after {
content: '';
position: absolute;
right: calc(-1em - var(--mspace-ux));
display: flex;
width: 1em;
height: 1em;
font-size: 75%;
background-color: currentColor;
mask-image: url(../../icons/imsprite.svg#css_arrow-right);
-webkit-mask-image: url(../../icons/imsprite.svg#css_arrow-right);
}
.btn--wide {
display: flex;
align-self: flex-start;
padding: var(--mspace-md) var(--lspace-md);
font-size: var(--type-small);
line-height: 1;
text-decoration: none;
color: #fff;
background: var(--text-display);
border-radius: var(--radius-md);
transition: background 0.3s ease;
}
.btn--wide:hover,
.btn--wide:focus {
color: #fff;
background: var(--text-body);
}
.btn--small-white {
display: flex;
align-items: center;
gap: var(--mspace-ux);
padding: var(--mspace-sm) var(--mspace-ex);
font-size: var(--type-small);
font-weight: 400;
line-height: 0.8;
text-decoration: none;
color: var(--text-display);
background-color: #fff;
border-radius: var(--radius-lg);
transition:
background-color 0.1s linear,
color 0.1s linear;
}
.btn--small-white:hover,
.btn--small-white:focus {
color: #fff;
background-color: var(--text-display);
}
.btn_check {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mspace-ex);
margin: var(--mspace-ex) 0;
}
.corebtn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
padding: var(--mspace-md) var(--lspace-lg);
font-size: var(--type-body);
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-wide);
color: #fff;
background-color: var(--text-display);
border: 0;
border-radius: var(--radius-lg);
outline: none;
box-shadow: none;
transition:
background-color 0.15s linear,
color 0.15s linear;
cursor: pointer;
z-index: 1;
}
.corebtn--clear {
width: auto;
height: auto;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
background-color: transparent;
border: 0;
border-radius: 0;
outline: none;
box-shadow: none;
transition: none;
cursor: pointer;
z-index: 1;
}
.btn--roll {
color: #fff;
background-color: var(--text-display);
transition:
background-color 0.3s ease,
color 0s;
overflow: hidden;
}
.btn--roll span {
white-space: nowrap;
visibility: hidden;
}
.btn--roll::before,
.btn--roll::after {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
transition:
transform 0.35s ease,
opacity 0.4s ease;
will-change: transform, opacity;
pointer-events: none;
}
.btn--roll::before {
content: attr(data-text);
opacity: 1;
transform: translateY(0);
}
.btn--roll::after {
content: attr(data-next, attr(data-text));
color: #fff;
opacity: 1;
transform: translateY(100%);
}
.btn--roll:hover::before,
.btn--roll:focus-visible::before {
opacity: 0;
transform: translateY(-100%);
}
.btn--roll:hover::after,
.btn--roll:focus-visible::after {
transform: translateY(0);
}
.btn--roll:is(button, a):hover {
color: currentColor;
background-color: var(--text-heading);
transition:
background-color 0.3s ease,
color 0s 0.5s;
}
.btn--flash {
transition: transform 0.15s ease;
overflow: hidden;
}
.btn--flash::before {
content: '';
position: absolute;
inset: 0;
width: 0;
height: 0;
margin: auto;
background: #fff;
border-radius: 100%;
opacity: 0.2;
pointer-events: none;
}
.btn--flash:hover::before {
animation: flashCenter 0.65s forwards ease-out;
}
.btn--flash:active {
box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
transform: scale(0.96);
}
@keyframes flashCenter {
0% {
width: 0;
height: 0;
border-radius: 100%;
opacity: 0.2;
}
100% {
width: 500px;
height: 500px;
border-radius: 0;
opacity: 0;
}
}
.btn--beam {
overflow: hidden;
}
.btn--beam::before {
content: '';
position: absolute;
top: 0;
left: -95px;
width: 80px;
height: 100%;
background: #fff;
opacity: 0.15;
filter: blur(3px);
transform: skewX(-25deg);
transition: none;
}
.btn--beam:hover::before {
left: calc(100% + 80px);
transform: skewX(-10deg);
transition:
left 0.65s ease,
transform 0.65s ease;
}
.click--spark {
--bubble-size: 1.1em;
--bubble-color: #ff0081;
transition: transform 0.1s ease-in;
}
.click--spark:active {
transform: scale(0.97);
}
.click--spark::before,
.click--spark::after {
content: '';
position: absolute;
left: -5%;
display: block;
width: 120%;
height: 100%;
background-repeat: no-repeat;
opacity: 0;
animation-duration: 0.75s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
pointer-events: none;
}
.click--spark::before {
top: -80%;
background-image:
radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, transparent 20%, var(--bubble-color) 21%, transparent 31%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%),
radial-gradient(circle, transparent 10%, var(--bubble-color) 15%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%),
radial-gradient(circle, var(--bubble-color) 20%, transparent 21%);
background-size:
calc(var(--bubble-size) * 1) calc(var(--bubble-size) * 1),
calc(var(--bubble-size) * 2) calc(var(--bubble-size) * 2),
calc(var(--bubble-size) * 1.5) calc(var(--bubble-size) * 1.5),
calc(var(--bubble-size) * 2) calc(var(--bubble-size) * 2),
calc(var(--bubble-size) * 1.8) calc(var(--bubble-size) * 1.8),
calc(var(--bubble-size) * 1) calc(var(--bubble-size) * 1),
calc(var(--bubble-size) * 1.5) calc(var(--bubble-size) * 1.5),
calc(var(--bubble-size) * 1) calc(var(--bubble-size) * 1),
calc(var(--bubble-size) * 1.8) calc(var(--bubble-size) * 1.8);
}
.click--spark::after {
bottom: -80%;
background-image:
radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, transparent 10%, var(--bubble-color) 15%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%),
radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%), radial-gradient(circle, var(--bubble-color) 20%, transparent 21%);
background-size:
calc(var(--bubble-size) * 1.5) calc(var(--bubble-size) * 1.5),
calc(var(--bubble-size) * 2) calc(var(--bubble-size) * 2),
calc(var(--bubble-size) * 1.8) calc(var(--bubble-size) * 1.8),
calc(var(--bubble-size) * 2) calc(var(--bubble-size) * 2),
calc(var(--bubble-size) * 1.5) calc(var(--bubble-size) * 1.5),
calc(var(--bubble-size) * 1) calc(var(--bubble-size) * 1),
calc(var(--bubble-size) * 2) calc(var(--bubble-size) * 2);
}
/* — start animation on click & focus — */
.click--spark:focus::before,
.click--spark:focus-visible::before {
animation-name: topBubbles;
}
.click--spark:focus::after,
.click--spark:focus-visible::after {
animation-name: bottomBubbles;
}
/* reset animation */
.click--spark:active::before,
.click--spark:active::after {
animation: none !important;
}
@keyframes topBubbles {
0% {
background-position:
5% 90%,
10% 90%,
10% 90%,
15% 90%,
25% 90%,
25% 90%,
40% 90%,
55% 90%,
70% 90%;
opacity: 1;
}
50% {
background-position:
0% 80%,
0% 20%,
10% 40%,
20% 0%,
30% 30%,
22% 50%,
50% 50%,
65% 20%,
90% 30%;
}
100% {
background-position:
0% 70%,
0% 10%,
10% 30%,
20% -10%,
30% 20%,
22% 40%,
50% 40%,
65% 10%,
90% 20%;
background-size:
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%;
opacity: 0;
}
}
@keyframes bottomBubbles {
0% {
background-position:
10% -10%,
30% 10%,
55% -10%,
70% -10%,
85% -10%,
70% -10%,
70% 0%;
opacity: 1;
}
50% {
background-position:
0% 80%,
20% 80%,
45% 60%,
60% 100%,
75% 70%,
95% 60%,
105% 0%;
}
100% {
background-position:
0% 90%,
20% 90%,
45% 70%,
60% 110%,
75% 80%,
95% 70%,
110% 10%;
background-size:
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%;
opacity: 0;
}
}
.click--pulse {
--pulse-color: var(--secondary-300);
transition-duration: 0.4s;
z-index: 1;
}
.click--pulse:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: inherit;
border-radius: inherit;
z-index: -1;
}
.click--pulse::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-pill);
box-shadow: 0 0 10px 40px var(--pulse-color);
opacity: 0;
transition:
box-shadow 0.65s ease,
opacity 0.65s ease;
pointer-events: none;
z-index: -2;
}
.click--pulse:active::after {
border-radius: var(--radius-pill);
box-shadow: 0 0 0 0 #fff;
opacity: 1;
transition: 0s;
}
/* Global - Form
----------------------------------------------------------------------------- */
.coresp_cta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--mspace-sm);
padding: var(--mspace-md) var(--mspace-lg);
font-size: var(--type-small);
line-height: 1;
color: var(--text-heading);
border: 1px dashed #e7e7ea;
border-radius: 14px;
}
.coresp_cta span {
max-width: 45ch;
line-height: 1.45;
}
.coresp_cta b {
color: var(--text);
}
.coresp_btn {
position: relative;
width: 160px;
padding: var(--mspace-sm) 0;
text-decoration: none;
color: transparent;
z-index: 1;
}
.coresp_btn:before {
color: #fff;
}
/* Global - Form
----------------------------------------------------------------------------- */
.control--checkbox {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--mspace-sm);
width: 100%;
margin: 0;
padding: var(--mspace-ux) 0;
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wider);
cursor: pointer;
user-select: none;
}
.control--checkbox input,
.control--radio input {
border-radius: var(--radius-md);
transition:
background 0.3s,
border-color 0.3s,
box-shadow 0.2s;
}
.control--checkbox:has(svg) svg {
position: absolute;
top: 50%;
left: 0.075em;
display: block;
width: 1.15em;
height: 1.15em;
color: currentColor;
transform: translateY(-50%);
pointer-events: none;
}
.control--checkbox:has(svg) svg polyline {
fill: none;
stroke: currentColor;
stroke-width: 3px;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 26;
stroke-dashoffset: 26;
}
.control--checkbox:has(svg):has(input:checked) svg polyline {
animation: dash-check 140ms cubic-bezier(0.65, 0.25, 0.56, 0.96) forwards;
}
.control--checkbox:has(svg):has(input:not(:checked)) svg polyline {
animation: dash-uncheck 100ms cubic-bezier(0.65, 0.25, 0.56, 0.96) forwards;
}
@keyframes dash-check {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash-uncheck {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 26;
}
}
.control--checkbox:has(input:checked) input {
border-color: currentColor;
}
.control--checkbox:not(:has(svg))::after {
content: '';
position: absolute;
top: 50%;
left: 0.075em;
width: 1.15em;
height: 1.15em;
background-color: currentColor;
opacity: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpolyline points='5 10.75 8.5 14.25 16 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transform: translateY(-50%) rotate(-20deg);
transform-origin: 50% 50%;
transition:
transform 0.3s ease,
opacity 0.2s;
}
.control--checkbox:not(:has(svg)):has(input:checked)::after {
opacity: 1;
transform: translateY(-50%) rotate(0deg);
}
.control--radio {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.375em 0.75em 0.375em 1.875em;
font-weight: 500;
border-radius: 999em;
transition: background-color 0.25s ease;
cursor: pointer;
user-select: none;
}
.control--radio input {
opacity: 0;
}
.control--radio::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 1.3em;
height: 1.3em;
background-color: #fff;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--text-caption);
transform: translateY(-50%);
transition:
box-shadow 0.25s ease,
background-color 0.25s ease;
}
.control--radio:has(input:checked)::before {
box-shadow: inset 0 0 0 0.375em currentColor;
}
.control--checkbox input,
.control--radio input {
width: 1.3em;
height: 1.3em;
box-sizing: border-box;
margin: 0;
font-size: inherit;
background-color: transparent;
border: 1px solid var(--text-caption);
}
.control--checkbox:has(input:disabled),
.control--radio:has(input:disabled) {
opacity: var(--opacity-disabled);
cursor: not-allowed;
}
.control--checkbox:has(input:disabled) span,
.control--radio:has(input:disabled) span {
color: var(--text-disabled);
}
.control--range {
position: relative;
display: inline-block;
width: 100%;
height: 1.25em;
font-size: var(--type-body);
color: var(--text-heading);
cursor: pointer;
user-select: none;
z-index: 1;
}
.control--range::before {
content: '';
position: absolute;
inset: auto 0 0 0;
top: 50%;
height: 0.25em;
background: currentColor;
border-radius: var(--radius-pill);
transform: translateY(-50%);
pointer-events: none;
z-index: -1;
}
.control--range input {
width: 100%;
height: 100%;
margin: 0;
color: inherit;
background: transparent;
outline: 0;
-webkit-appearance: none;
appearance: none;
}
.control--range input::-webkit-slider-runnable-track {
height: 100%;
background: transparent;
}
.control--range input::-moz-range-track {
height: 100%;
background: transparent;
}
.control--range input::-webkit-slider-thumb {
position: relative;
top: 0.4em;
width: 1.25em;
height: 1.25em;
background-color: currentColor;
border: 0;
border-radius: 50%;
box-shadow: 0 0 0 6px #fff;
-webkit-appearance: none;
appearance: none;
transform: none !important;
}
.control--range input::-moz-range-thumb {
position: relative;
top: 0.4em;
width: 1.25em;
height: 1.25em;
background-color: currentColor;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 6px #fff;
-webkit-appearance: none;
appearance: none;
transform: none !important;
}
/* Global - Helpers
----------------------------------------------------------------------------- */
.corelang {
display: flex;
align-items: center;
}
.coredown {
position: relative;
display: flex;
gap: var(--mspace-ux);
font-size: var(--type-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-heading);
cursor: pointer;
user-select: none;
}
.coredown_current {
display: flex;
align-items: center;
gap: var(--mspace-ux);
padding: 0;
padding-right: var(--mspace-lg);
font-size: inherit;
font-weight: 500;
line-height: 0.95;
text-transform: uppercase;
color: inherit;
background-color: transparent;
border: 0;
}
/*.coredown_current:after {
content: '';
position: absolute;
top: 50%;
right: 0;
display: block;
width: 0.5em;
height: 0.5em;
box-sizing: border-box;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-85%) rotate(45deg);
transition: transform 0.1s linear;
}*/
.coredown_current:after {
content: '';
position: absolute;
top: 50%;
right: 0;
display: block;
width: 0.75em;
height: 0.85em;
box-sizing: border-box;
margin-top: 1px;
line-height: 1;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
transform: translateY(-50%) rotate(0deg);
transition: transform 0.1s linear;
}
.coredown_current.active:after {
transform: translateY(-35%) rotate(225deg);
transform: translateY(-55%) scaleY(-1);
}
.coredown_current svg {
font-size: 90%;
}
.coredown_content {
position: absolute;
top: calc(100% + 5px);
left: -2px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
border-bottom-right-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
opacity: 0;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition:
transform 0.25s linear,
opacity 0.25s linear;
transition:
opacity 0.25s linear,
transform 0.25s linear,
visibility 0s linear 0.25s;
z-index: var(--z-overlay);
z-index: var(--z-overlay);
}
.coredown_content.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 0.25s linear,
transform 0.25s linear,
visibility 0s;
}
.coredown_content li {
display: flex;
width: 100%;
margin: 0;
padding: var(--mspace-md);
list-style: none;
font-size: 100%;
line-height: 0.85;
}
.coredown_content li:hover {
background-color: #f8f8fb;
}
.backdrop {
height: 100%;
padding-right: 15px;
overflow: hidden;
}
.backdrop .searchbar {
padding-right: 14px;
}
.content {
transition: transform 0.35s ease;
}
.sidecart_active.backdrop .content {
--distance: calc((100vw - var(--container-max)) / 2 - var(--container-sm) - var(--mspace-ex));
--half-distance: calc((var(--distance) / 2) + var(--mspace-ex));
transform: translate(var(--half-distance));
}
.search_active.backdrop .content {
transform: translateY(100px);
}
.core_overflow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--text-display);
opacity: 0;
visibility: hidden;
transition:
opacity 0.25s linear,
visibility 0s linear 0.25s;
z-index: var(--z-overlay);
}
.backdrop .core_overflow {
opacity: var(--opacity-disabled);
visibility: visible;
transition:
opacity 0.25s linear,
visibility 0s;
}
/* Global - Decor
----------------------------------------------------------------------------- */
.inverted_wrapper {
--width: 45cqw;
--height: 15cqh;
--radius: var(--radius-lg);
--curve: var(--radius-2xl);
--rl_width: calc(var(--width) - var(--radius) - var(--curve));
--rl_height: calc(var(--height) - var(--radius) - var(--curve));
}
.inverted_radius {
--r: var(--radius);
--s: var(--curve);
--x: var(--rl_width);
--y: var(--rl_height);
container-type: size;
}
.inverted_radius .image,
.inverted_radius img {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
background: #3fb8af;
border-radius: var(--r);
mask-repeat: no-repeat !important;
}
.inverted_radius.top--left img,
.inverted_radius.top--left .image {
--_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);
--_d: (var(--s) + var(--r));
mask:
calc(var(--_d) + var(--x)) 0 var(--_m),
0 calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));
}
.inverted_radius.top--right img,
.inverted_radius.top--right .image {
--_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(at calc(100% - var(--r)) var(--r), #0000 25%, #000 0);
--_d: (var(--s) + var(--r));
mask:
calc(100% - var(--_d) - var(--x)) 0 var(--_m),
100% calc(var(--_d) + var(--y)) var(--_m),
radial-gradient(var(--s) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--x)) calc(var(--r) + var(--y)),
var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
var(--_g) 0 calc(var(--_d) + var(--y));
}
.inverted_radius.bottom--left img,
.inverted_radius.bottom--left .image {
--_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
--_d: (var(--s) + var(--r));
mask:
calc(var(--_d) + var(--x)) 100% var(--_m),
0 calc(100% - var(--_d) - var(--y)) var(--_m),
radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
var(--_g) calc(var(--_d) + var(--x)) 0,
var(--_g) 0 calc(-1 * var(--_d) - var(--y));
}
.inverted_radius.bottom--right img,
.inverted_radius.bottom--right .image {
--_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 70%, #0000 72%);
--_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
--_d: (var(--s) + var(--r));
mask:
calc(100% - var(--_d) - var(--x)) 100% var(--_m),
100% calc(100% - var(--_d) - var(--y)) var(--_m),
radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--r) - var(--x)) calc(-1 * var(--r) - var(--y)),
var(--_g) calc(-1 * var(--_d) - var(--x)) 0,
var(--_g) 0 calc(-1 * var(--_d) - var(--y));
}
.inverted_banner {
position: absolute;
display: flex;
align-items: center;
width: calc(var(--x) + var(--s) + var(--r));
height: calc(var(--y) + var(--s) + var(--r));
}
.inverted_radius.top--left .inverted_banner {
top: 0;
left: 0;
}
.inverted_radius.bottom--left .inverted_banner {
bottom: 0;
left: 0;
}
.inverted_radius.top--right .inverted_banner {
top: 0;
right: 0;
}
.inverted_radius.bottom--right .inverted_banner {
right: 0;
bottom: 0;
}
.inverted_banner > div {
padding: 0 var(--mspace-lg);
}
.inverted_banner h3 {
margin-bottom: var(--mspace-sm);
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.inverted_banner p {
margin: 0;
font-size: var(--type-small);
line-height: 1.7;
color: var(--text-body);
}
/* Global - Form
----------------------------------------------------------------------------- */
.form_select {
position: relative;
flex: 1;
width: 100%;
min-width: max-content;
font-size: 13px;
font-weight: 500;
}
.form_select .ts-wrapper.tselect {
position: static;
width: 100%;
height: 100%;
outline: none;
}
.form_select .tselect.ts-wrapper .ts-control:focus {
outline: none !important;
box-shadow: none !important;
}
.form_select .tselect.ts-wrapper .ts-control {
justify-content: space-between;
gap: var(--mspace-ux);
width: 100%;
padding: 0 !important;
font-size: inherit;
line-height: 1;
color: inherit;
background-image: none !important;
border: 0;
outline: none;
box-shadow: none;
cursor: pointer !important;
}
.form_select .tselect.ts-wrapper .ts-control:after {
content: '';
position: relative;
display: block;
width: 0.8em;
height: 0.8em;
box-sizing: border-box;
margin-top: 1px;
line-height: 1;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
transform: scaleY(1);
transform-origin: 50% 50%;
transition: transform 0.1s linear;
}
.form_select .tselect.dropdown-active .ts-control:after {
transform: scaleY(-1);
}
.form_select .tselect .ts-dropdown {
left: 50%;
display: block !important;
width: 100%;
min-width: max-content;
margin: 0;
background-color: #fff;
border-radius: var(--radius-md);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
opacity: 0;
visibility: hidden !important;
transform: translate(-50%, -8px);
transition:
transform 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s linear 0.15s;
overflow: hidden;
}
.form_select .tselect.dropdown-active .ts-dropdown {
opacity: 1;
visibility: visible !important;
transform: translate(-50%, 8px);
transition:
transform 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.15s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.form_select.dropup .tselect .ts-dropdown {
top: auto;
bottom: 100%;
left: 50%;
transform: translate(-50%, 8px);
}
.form_select.dropup .tselect.dropdown-active .ts-dropdown {
transform: translate(-50%, -8px);
}
.form_select .tselect .ts-dropdown .ts-dropdown-content {
padding: 0;
}
.form_select .tselect .ts-dropdown .option {
width: 100%;
padding: var(--mspace-md);
line-height: 1;
letter-spacing: var(--track-wide);
}
.form_select .tselect .ts-dropdown .option:hover,
.form_select .tselect .ts-dropdown .option.selected {
background-color: var(--surface-secondary);
background-color: var(--primary-200);
background-color: #f8f8fb;
}
/* Global - Product
----------------------------------------------------------------------------- */
.core_price {
display: flex;
gap: var(--mspace-ux);
font-size: var(--type-small);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.core_price ins {
color: inherit;
}
.core_price del {
position: relative;
font-weight: 500;
line-height: 1;
text-decoration: none;
color: var(--text-muted);
}
.core_price del:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 1px;
background-color: currentColor;
transform: translate(-50%, -50%);
}
.core_qty {
display: flex;
align-items: stretch;
width: 33%;
max-height: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
}
.core_qty button {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
padding: 0 var(--mspace-md);
font-size: 18px;
color: var(--text-display);
background: var(--surface-global);
border: none;
cursor: pointer;
}
.core_qty input {
display: flex;
flex: 3;
height: 100%;
margin: 0;
padding: 0;
font-size: 15px;
font-weight: 500;
text-align: center;
color: var(--text-display);
border: none;
-moz-appearance: textfield;
}
.core_qty input:focus {
outline: none !important;
box-shadow: none !important;
}
.core_qty input::-webkit-inner-spin-button,
.core_qty input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
.core_cart {
--bubble-color: var(--text-display);
position: relative;
display: flex;
flex: 3;
justify-content: center;
align-items: center;
gap: var(--mspace-ux);
padding: var(--mspace-sm);
font-size: var(--type-body);
font-weight: 500;
color: #fff;
background-color: var(--text-display);
border: none;
border-radius: var(--radius-lg);
transition: all 0.2s ease;
cursor: pointer;
z-index: var(--z-above);
}
.core_cart:hover {
background-color: #333;
}
/* Global - Slider
----------------------------------------------------------------------------- */
.embla__slider {
position: relative;
}
.embla__slider,
.embla__viewport {
width: 100%;
height: 100%;
overflow: hidden;
}
.embla__container {
display: flex;
width: 100%;
height: 100%;
}
.embla__slide {
flex: 0 0 100%;
min-width: 0;
}
.embla__dots,
.embla__dash {
position: absolute;
bottom: var(--mspace-lg);
left: var(--mspace-lg);
display: flex;
z-index: 5;
}
.embla__dots button,
.embla__dash button {
position: relative;
margin: 0;
font-size: var(--type-small);
color: var(--text-display);
background-color: transparent;
border: 0;
z-index: 3;
}
.embla__dots button:before,
.embla__dots button:after,
.embla__dash button:before,
.embla__dash button:after {
content: '';
border-radius: var(--radius-pill);
}
/* dots */
.embla__dots {
gap: var(--mspace-xs);
}
.embla__dots button {
padding: var(--mspace-sm);
}
.embla__dots button:before,
.embla__dots button:after {
width: 0.425em;
height: 0.425em;
transition: opacity 0.2s linear;
}
.embla__dots button:before {
position: relative;
display: flex;
margin: 0;
background-color: currentColor;
opacity: var(--opacity-low);
}
.embla__dots button:after {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 2px solid currentColor;
opacity: 0;
transform: translate(-50%, -50%);
}
.embla__dots button.is-selected:before,
.embla__dots button.is-selected:after {
opacity: 1;
}
/* dash */
.embla__dash button {
--color: color-mix(in srgb, currentColor, transparent 60%);
padding: var(--mspace-ux);
overflow: hidden;
}
.embla__dash button:before {
position: relative;
display: flex;
width: 2em;
height: 0.425em;
margin: 0;
background-color: var(--color, rgb(29 26 27 / 38%));
}
.embla__dash button:after {
position: absolute;
top: 50%;
left: var(--mspace-ux);
width: 0;
height: 0.425em;
background-color: currentColor;
opacity: 0;
transform: translateY(-50%);
transition:
width 0.2s linear,
opacity 0.1s linear;
}
.embla__dash button.is-selected:after {
width: 2em;
opacity: 1;
}
.embla__thumb {
position: relative;
margin: 0;
padding: 0;
background-color: transparent;
border: 0;
border-radius: var(--radius-md);
cursor: pointer;
overflow: hidden;
}
.embla__thumb:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-md);
box-shadow:
0 0 0 1px #252328 inset,
0 0 0 6px #fffdf5 inset;
opacity: 0;
transition: opacity 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
overflow: hidden;
z-index: 1;
}
.embla__thumb:hover:before,
.embla__thumb.is-selected:before,
.embla__thumb.is-selected img {
opacity: 1;
}
/* Page
----------------------------------------------------------------------------- */
.content {
position: relative;
width: calc(var(--container-max) + (var(--lspace-sm) * 2));
margin: 0 auto;
margin-bottom: auto;
padding: 0 var(--lspace-sm);
}
.content section ~ section,
.content section ~ footer {
margin-top: var(--lspace-ex);
margin-bottom: 0;
}
/* Sticky AddCart
----------------------------------------------------------------------------- */
.addsticky {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(100%);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s linear 0.25s;
z-index: 501;
}
.addsticky.is_visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s;
}
.addsticky_wrap {
display: flex;
justify-content: space-between;
align-items: center;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--mspace-ux) var(--lspace-lg);
}
.addsticky_left {
display: flex;
flex: 1;
align-items: center;
gap: var(--mspace-lg);
}
.addsticky_image {
flex-shrink: 0;
width: 50px;
aspect-ratio: 4 / 5;
border-radius: var(--radius-md);
overflow: hidden;
}
.addsticky_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.addsticky_product {
position: relative;
display: flex;
flex-direction: column;
}
.addsticky_product small {
margin-bottom: var(--mspace-xs);
font-size: var(--type-label);
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-caption);
}
.addsticky_product h3 {
margin: 0;
margin-bottom: var(--mspace-ux);
font-size: var(--type-small);
font-weight: 500;
line-height: 1.45;
color: var(--text-heading);
}
.addsticky_right {
display: flex;
flex: 1;
justify-content: end;
align-items: center;
gap: var(--mspace-md);
}
.addsticky_variant {
display: flex;
flex: 2;
max-width: 150px;
height: 45px;
padding: 0 var(--mspace-lg);
font-size: var(--type-small);
border: solid 0.1rem #ececec;
border-radius: var(--radius-lg);
}
.offer_qty {
flex: 2;
width: auto;
max-width: 150px;
height: 45px;
}
.addsticky .core_cart {
flex: 3;
max-width: 250px;
height: 45px;
line-height: 1;
}
/* Section
----------------------------------------------------------------------------- */
.section_title {
margin-bottom: var(--lspace-sm);
}
.section_title h2 {
margin: 0;
font-size: var(--type-heading);
font-weight: 400;
line-height: 1;
color: var(--text-display);
}
.expand_title {
position: relative;
display: flex;
flex-direction: column;
z-index: var(--z-above);
}
.expand_title h2 {
margin-bottom: var(--mspace-lg);
font-size: var(--type-display);
font-weight: 500;
line-height: 1.35;
color: var(--text-display);
}
.expand_title p {
max-width: 500px;
margin-bottom: var(--mspace-ex);
font-size: 1.125rem;
line-height: 1.65;
color: var(--text-body);
}
.expand_title mark {
position: relative;
display: inline-block;
padding: 0;
color: inherit;
background-color: transparent;
z-index: 1;
}
.expand_title mark:after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: var(--mspace-ux);
background-color: var(--secondary-200);
transform: translateY(-100%);
z-index: -1;
}
.section_content {
position: relative;
display: flex;
flex-direction: column;
}
/* Searchbar
----------------------------------------------------------------------------- */
.searchbar {
position: fixed;
top: 0;
display: flex;
justify-content: center;
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s linear 0.25s;
z-index: var(--z-modal);
}
.search_active .searchbar {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s;
}
.searchbar_wrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: var(--container-max);
}
.searchbar_container {
display: flex;
flex-direction: column;
align-items: center;
width: var(--container-tablet);
}
.searchbar_control {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 135px;
margin: var(--mspace-ex) 0;
}
.searchbar_head {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin-bottom: var(--mspace-md);
}
.searchbar_close {
margin-left: auto;
}
.searchbar_close button {
margin: 0;
padding: 0;
font-size: var(--type-small);
color: var(--text-caption);
background-color: transparent;
border: 0;
transition: color 0.1s linear;
cursor: pointer;
}
.searchbar_close button:hover {
color: var(--text-heading);
}
.searchbar_title {
margin: 0;
margin-left: auto;
font-size: var(--type-heading);
font-weight: 300;
line-height: 1;
}
.searchbar_box {
display: flex;
align-items: center;
width: 100%;
border: 1px solid var(--text-muted);
border-radius: var(--radius-md);
overflow: hidden;
}
.searchbar_box input {
margin: 0;
padding: var(--mspace-sm);
color: currentColor;
background-color: transparent;
background-position: center left var(--mspace-sm) !important;
background-position-y: 48% !important;
background-size: 1.15em auto !important;
border: none;
outline: none;
}
.searchbar_box input:focus {
border: 0;
box-shadow: none;
}
.searchbar_box input::placeholder {
color: var(--text-muted);
}
.searchbar_popular {
display: flex;
margin-top: var(--mspace-sm);
font-size: var(--type-small);
color: var(--text-body);
}
.searchbar_popular span {
font-weight: 300;
color: var(--text-soft);
}
.searchbar_popular button {
margin: 0;
padding: 0 var(--mspace-xs);
font-size: var(--type-small);
line-height: 1;
color: var(--text-body);
background-color: transparent;
border: 0;
outline: 0;
box-shadow: none;
}
.searchbar_popular button:hover {
text-decoration: underline;
}
.searchbar_content {
height: 100%;
max-height: calc(100dvh - calc(135px + var(--mspace-ex) * 2));
margin-right: calc(0px - var(--mspace-ex));
padding-right: var(--mspace-md);
overflow-y: auto;
}
.searchbar_content .catalog {
gap: var(--mspace-md);
row-gap: var(--mspace-ex);
}
.searchbar_content .procard_summary h5 {
font-size: var(--type-small);
}
.searchbar_content .procard_summary small {
font-size: var(--type-label);
}
/* Product Base
----------------------------------------------------------------------------- */
.product {
display: flex;
flex-direction: column;
font-size: var(--type-small);
color: var(--text-heading);
}
.product_image {
display: flex;
max-width: 100px;
aspect-ratio: 1;
}
.product_image img {
width: 100%;
aspect-ratio: var(--aspect-square);
object-fit: cover;
background-color: #f3f4f8;
border-radius: var(--radius-md);
}
.product_content {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
}
.product_details {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.product_summary {
display: flex;
flex-direction: column;
}
.product_summary h5 {
margin-bottom: var(--mspace-ux);
font-size: var(--type-small);
font-weight: 500;
line-height: 1.25;
color: var(--text-heading);
}
.product_summary span {
display: inline-block;
font-size: var(--type-label);
line-height: 1.2;
color: var(--text-caption);
}
.product_remove {
margin: 0;
padding: 0;
font-size: var(--type-small);
color: var(--text-muted);
background: none;
border: 0;
cursor: pointer;
}
.product_remove svg {
font-size: 110%;
}
.product_footer {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.product_price {
font-size: var(--type-small);
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.product_qty {
display: flex;
justify-content: space-around;
align-items: center;
width: 40%;
line-height: 1;
border: 1px solid #ccc;
border-radius: var(--radius-md);
}
.product_qty button {
position: relative;
display: flex;
flex: 1;
margin: 0;
padding: var(--mspace-md) 0;
font-size: 16px;
line-height: 1;
color: var(--text-soft);
background: none;
border: none;
cursor: pointer;
}
.product_qty button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1em;
height: 1em;
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
transform: translate(-50%, -50%);
}
.product_qty button.minus::before {
mask-image: url("data:image/svg+xml;utf8,");
}
.product_qty button.plus::before {
mask-image: url("data:image/svg+xml;utf8,");
}
.product_qty input {
width: 20px;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color: transparent;
border: 0;
box-shadow: none;
appearance: textfield;
-moz-appearance: textfield;
}
.product_qty input::-webkit-outer-spin-button,
.product_qty input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.product_add {
margin: 0;
padding: 0;
font-size: var(--type-body);
line-height: 1;
color: var(--text-body);
background-color: transparent;
border: 0;
cursor: pointer;
}
/* Product Wide
----------------------------------------------------------------------------- */
.product--wide {
flex-direction: row;
gap: var(--mspace-md);
margin-top: var(--mspace-ex);
padding-top: var(--mspace-ex);
border-top: 1px solid var(--surface-secondary);
}
.product--wide .product__image {
width: 110px;
}
.product--wide .product__content {
flex: 1;
margin: var(--mspace-xs) 0;
}
.product--wide .product__price {
font-weight: 500;
}
/* Product Compact
----------------------------------------------------------------------------- */
.product--compact {
flex: 1 1 0;
min-width: 0;
}
.product--compact .product_summary {
margin-top: var(--mspace-sm);
}
.product--compact .product_summary span {
display: inline-block;
max-width: 20ch;
letter-spacing: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.product--compact .product_footer {
margin-top: var(--mspace-lg);
}
.product--compact .product_price {
font-size: var(--type-label);
font-weight: 500;
}
/* Sidebar Cart
----------------------------------------------------------------------------- */
.sidecart {
position: fixed;
top: 0;
right: 0;
width: var(--container-sm);
height: 100vh;
background-color: #fff;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s linear 0.25s;
pointer-events: none;
z-index: var(--z-modal);
}
.sidecart_active .sidecart {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition:
transform 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95),
visibility 0s;
pointer-events: auto;
}
.sidecart_container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.sidecart_header {
display: flex;
flex-direction: column;
margin-top: var(--mspace-lg);
padding: 0 var(--mspace-lg);
}
.sidecart_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.sidecart_title h3 {
margin: 0;
font-size: var(--type-lead);
font-weight: 500;
line-height: 1;
color: var(--text-heading);
}
.sidecart_title button {
margin: 0;
padding: 0;
font-size: 0.85em;
line-height: 1;
color: var(--text-caption);
background-color: transparent;
border: 0;
transition: color 0.1s linear;
cursor: pointer;
}
.sidecart_title button:hover,
.sidecart_title button:active {
color: var(--text-heading);
}
.sidecart_content {
display: flex;
flex-direction: column;
height: 65%;
margin-top: var(--mspace-xl);
margin-bottom: var(--mspace-ex);
padding: 0 var(--mspace-lg);
overflow-y: auto;
}
.sidecart_block {
margin-top: var(--mspace-xl);
}
.sidecart_threshold {
margin-top: var(--mspace-xl);
padding: var(--mspace-lg);
font-size: var(--type-small);
color: var(--text-body);
background-color: var(--surface-global);
border-radius: var(--radius-md);
}
.sidecart_threshold h5 {
margin-bottom: var(--mspace-md);
font-size: var(--type-small);
font-weight: 400;
line-height: 1.45;
letter-spacing: 0.01em;
color: var(--text-heading);
}
.sidecart_threshold h5 strong {
font-weight: 700;
color: var(--text-display);
}
.sidecart_progress {
position: relative;
width: 100%;
height: 6px;
background: rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.sidecart_progress__bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(40, 40, 40, 0.1) 0%);
background-size:
4px 6px,
4px 0;
z-index: 1;
}
.sidecart_progress__dots {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--secondary-500), var(--primary-500) 100%);
transform: translateX(calc(var(--threshold-progress) * 100%));
transition: transform 0.25s ease-in-out;
z-index: 0;
}
.sidecart_list {
position: relative;
display: flex;
flex-direction: column;
padding-bottom: var(--mspace-ex);
}
.sidecart_list .product:first-child {
margin-top: 0;
}
.sidecart_suggest {
margin-top: var(--mspace-xl);
}
.sidecart_suggest h4 {
margin-bottom: var(--mspace-md);
font-size: var(--type-body);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.suggest_carousel {
display: flex;
gap: var(--mspace-md);
}
.suggest_product {
flex: 1;
font-size: var(--type-small);
}
.suggest_product img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background-color: #f3f4f8;
border-radius: var(--radius-md);
}
.suggest_product h5 {
margin: var(--mspace-ux) 0;
font-size: var(--type-small);
font-weight: 500;
line-height: 1;
color: var(--text-heading);
}
.suggest_price {
display: flex;
align-items: center;
gap: 6px;
}
.suggest_current {
font-weight: bold;
color: #e60023;
}
.suggest_oldprice {
font-size: 13px;
text-decoration: line-through;
color: #aaa;
}
.suggest_add {
margin-top: 5px;
font-size: 13px;
color: #444;
cursor: pointer;
}
.sidecart_footer {
display: flex;
flex-direction: column;
margin-top: auto;
margin-right: 0;
margin-left: 0;
padding: var(--mspace-lg);
background-color: var(--secondary-50);
}
.sidecart_extra {
position: relative;
display: flex;
justify-content: space-between;
font-size: var(--type-small);
background-color: #fff;
border-radius: var(--radius-md);
overflow: hidden;
}
.sidecart_extra button {
display: flex;
justify-content: center;
align-items: center;
gap: var(--mspace-ux);
width: 100%;
height: 100%;
margin: 0;
padding: var(--mspace-xs) 0;
font-size: var(--type-small);
line-height: 1;
color: var(--text-body);
background-color: transparent;
border: 0;
border-radius: 0;
}
.sidecart_extra button span {
line-height: 0.85;
}
.sidecart_extra button svg {
font-size: 110%;
}
.sidecart_atom {
position: relative;
flex: 1;
height: 45px;
text-align: center;
cursor: pointer;
}
.sidecart_atom:after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 50%;
background-color: #ededee;
transform: translateY(-50%);
}
.sidecart_atom:last-child:after {
content: none;
}
.sidecart_element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transform: translateY(100%);
transition:
transform 0.1s linear,
visibility 0s linear 0.1s;
z-index: 1;
}
.sidecart_element.active {
visibility: visible;
transform: translateY(0);
transition:
transform 0.1s linear,
visibility 0s;
}
.sidecart_element input {
position: relative;
display: flex;
width: 100%;
height: 100%;
margin: 0;
padding: 0 var(--mspace-lg);
background-color: #fff;
border: 0;
}
.sidecart_panel {
display: flex;
flex-direction: column;
margin-top: 0;
}
.sidecart_total {
display: flex;
justify-content: space-between;
font-size: var(--type-body);
font-weight: 600;
color: var(--text-display);
}
.sidecart_total small {
font-size: inherit;
}
.sidecart_details {
margin-top: var(--mspace-xs);
font-size: var(--type-label);
letter-spacing: var(--track-wide);
color: var(--text-soft);
}
.sidecart_actions {
display: flex;
gap: var(--mspace-sm);
margin-top: var(--mspace-lg);
}
.sidecart_actions .checkout,
.sidecart_actions .viewcart {
flex: 1;
padding: var(--mspace-ux);
font-size: var(--type-body);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
}
.sidecart_actions .checkout {
--pulse-color: var(--secondary-400);
position: relative;
color: #fff;
background-color: var(--text-display);
transition-property: all;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
transition-behavior: normal;
}
.sidecart_actions .checkout:active {
background-color: var(--text-display);
}
.sidecart_actions .viewcart {
color: var(--text-display);
background-color: #fff;
border: 2px solid var(--text-display);
}
/* Header
----------------------------------------------------------------------------- */
.navbar {
position: relative;
padding: 0;
}
.navbar:after {
content: '';
position: relative;
top: 0;
left: 0;
display: none;
width: 100%;
height: var(--height-navbar);
margin-top: var(--mspace-sm);
margin-bottom: var(--mspace-sm);
}
.navbar.is_ready:after {
display: block;
}
.navbar_logo {
--logo-text-color: var(--text-heading);
--logo-icon-color: var(--primary-600);
display: flex;
width: 175px;
width: 135px;
margin: 0 var(--mspace-ex);
line-height: 1;
}
.navbar_logo a {
display: flex;
width: 100%;
}
.navbar_status {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
padding: var(--mspace-xs);
font-size: var(--type-small);
letter-spacing: var(--track-wide);
color: var(--text-display);
background: linear-gradient(50deg, var(--primary-100) 0%, var(--secondary-100) 100%);
}
.navbar_explore {
position: relative;
width: 100%;
margin-top: var(--mspace-sm);
margin-bottom: var(--mspace-sm);
background-color: #fff;
z-index: var(--z-overlay);
}
.navbar.is_ready .navbar_explore {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0 var(--mspace-ex);
background: #fff;
visibility: hidden;
transform: translateY(-110%);
}
.navbar.is_visible .navbar_explore {
border-radius: var(--radius-md);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: transform 0.25s linear;
}
@keyframes navbar-prepare {
0% {
visibility: hidden;
transform: translateY(0);
}
99% {
visibility: hidden;
transform: translateY(-105%);
}
100% {
visibility: visible;
transform: translateY(-110%);
}
}
.navbar_content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: var(--container-max);
height: var(--height-navbar);
margin: auto;
padding: 0 var(--mspace-xs);
}
.navbar_misc {
margin-right: auto;
z-index: var(--z-above);
}
.navbar_menu {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
padding-right: var(--mspace-ux);
}
.navbar_menu li {
height: 100%;
margin: 0;
padding: 0;
line-height: 1;
}
.navbar_menu .navbar_group {
position: relative;
display: flex;
width: 30%;
margin: 0;
}
.navbar_group:first-of-type {
justify-content: flex-end;
}
.navbar_group:last-of-type {
justify-content: flex-start;
}
.navbar_menu li a {
position: relative;
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0 var(--mspace-sm);
font-size: var(--type-body);
font-weight: 400;
letter-spacing: var(--track-wide);
/* text-transform: uppercase; */
color: var(--text-display);
}
.navbar_menu li a:hover,
.navbar_menu li a:active {
color: currentColor;
}
.navbar_menu li a:after {
content: '';
position: absolute;
top: calc(60% + 4px);
left: 50%;
width: 0;
height: 2px;
background: currentColor;
border-radius: 5px;
transform: translate(-50%);
transition: width 0.2s linear;
}
.navbar_menu li a:hover:after,
.navbar_menu li a:active:after {
width: 22px;
}
.navbar_actions {
margin-left: auto;
z-index: var(--z-above);
}
.navbar_actions .corebtns {
gap: var(--mspace-ex);
}
.navbar_actions svg {
font-size: 110%;
}
.cart span {
position: absolute;
top: -40%;
left: 10px;
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
font-size: var(--type-label);
font-weight: 500;
background-color: var(--primary-100);
border-radius: var(--radius-circle);
}
.navbar_mobile {
position: fixed;
bottom: 0;
left: 0;
display: none;
width: 100%;
max-height: 65px;
background: #fff;
border-top: 1px solid var(--surface-global);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
visibility: hidden;
z-index: 500;
}
.navbar_mobile ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
margin: 0;
padding: 0 var(--mspace-md);
}
.navbar_mobile ul li {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.navbar_mobile ul li a,
.navbar_mobile ul li button {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--mspace-ux);
width: 100%;
height: max-content;
margin: 0;
padding: var(--mspace-sm) 0;
font-size: var(--type-small);
letter-spacing: var(--track-wide);
color: var(--text-display);
background-color: transparent;
border: 0;
outline: none;
box-shadow: none;
}
.navbar_mobile ul li svg,
.navbar_mobile ul li button svg {
font-size: 125%;
line-height: 1;
}
.navbar_mobile ul li small,
.navbar_mobile ul li button small {
font-size: var(--type-label);
font-weight: 500;
line-height: 1;
color: var(--text-heading);
}
.navbar_mobile .cart span {
top: 20%;
left: 60%;
transform: translate(-50%, -50%);
}
.navbar_mobile .nav_filter {
display: none;
}
.store .navbar_mobile .nav_store {
display: none;
}
.store .navbar_mobile .nav_filter {
display: flex;
}
/* Welcome section
----------------------------------------------------------------------------- */
.welcome_wrapper {
display: flex;
width: 100%;
aspect-ratio: 5 / 2;
border-radius: var(--radius-lg);
overflow: hidden;
}
.hero_carousel {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.welcome_slide {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: var(--secondary-100);
}
.welcome_slide:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: url(../../images/slide_decor-2.png);
opacity: 10%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
}
.welcome_slide.second {
background-color: var(--primary-100);
}
.welcome_text {
position: absolute;
left: var(--lspace-md);
max-width: 60ch;
}
.welcome_text h3 {
margin-bottom: var(--mspace-lg);
font-size: var(--font-size-pt);
line-height: 1;
color: var(--text-heading);
}
.welcome_text p {
margin-bottom: 0;
font-size: var(--type-lead);
}
/*.welcome_content {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
z-index: 2;
}
.welcome_text {
position: relative;
max-width: 60ch;
}
.welcome_image {
position: relative;
max-width: 33%;
}*/
.hero_tracker {
position: absolute;
bottom: 30px;
left: 60px;
display: flex;
gap: 10px;
z-index: 5;
}
.hero_tracker button {
width: 30px;
height: 5px;
margin: 0;
padding: 0;
background-color: #fff;
border: 0;
border-radius: 5px;
opacity: 0.8;
}
.hero_tracker .is-selected {
background-color: var(--info-300);
opacity: 1;
}
/* Promo
----------------------------------------------------------------------------- */
main.content .promo {
margin-top: var(--mspace-lg);
}
.promo_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--mspace-lg);
}
.promo_card {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
aspect-ratio: 5 / 2;
border-radius: 6px;
overflow: hidden;
}
.promo_image {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.promo_image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.promo_image::before,
.promo_image::after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 2px;
background: #fff;
opacity: 0;
transform: rotate(-30deg);
transition:
opacity 0.2s ease,
transform 0s 0.2s;
z-index: 1;
}
.promo_image::before {
left: 50%;
transform-origin: 0 50%;
}
.promo_image::after {
right: 50%;
transform-origin: 100% 50%;
}
.promo_card:hover .promo_image img {
transform: scale(1.05);
}
.promo_card:hover .promo_image::before {
opacity: 1;
transform: rotate(-30deg) translateX(-1000px);
transition:
opacity 0.3s ease 50ms,
transform 2s cubic-bezier(0.26, 0.63, 0, 0.96);
}
.promo_card:hover .promo_image::after {
opacity: 1;
transform: rotate(-30deg) translateX(1000px);
transition:
opacity 0.4s ease,
transform 2s cubic-bezier(0.26, 0.63, 0, 0.96);
}
.promo_content {
position: relative;
display: flex;
flex-direction: column;
width: 60%;
height: 100%;
padding: var(--mspace-ex);
}
.promo_content h2 {
margin: 0;
margin-bottom: var(--mspace-ex);
font-size: var(--type-display);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.promo_content p {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.45;
color: var(--text-heading);
}
.promo_content strong {
font-size: 150%;
font-weight: 500;
color: var(--text-display);
}
/* Catalog section
----------------------------------------------------------------------------- */
main.content .listing {
margin-top: var(--lspace-lg);
}
.catalog {
display: grid;
gap: 30px;
row-gap: var(--lspace-md);
column-gap: var(--mspace-xl);
}
.catalog.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.catalog.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.catalog.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.catalog.grid-5 {
grid-template-columns: repeat(5, 1fr);
}
.procard {
position: relative;
background-color: #fff;
}
.procard_box {
position: relative;
aspect-ratio: 6 / 8;
border-radius: var(--radius-md);
overflow: hidden;
}
.procard_box .procard_variant {
position: absolute;
top: var(--mspace-sm);
right: var(--mspace-sm);
padding: 0 var(--mspace-sm);
background-color: #fff;
border-radius: var(--radius-sm);
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
z-index: var(--z-above);
}
.procard_chips {
position: absolute;
top: var(--mspace-sm);
left: -8px;
left: -12px;
margin: 0;
padding: 0;
z-index: 1;
}
.procard_chips li {
margin: 0;
margin-bottom: var(--mspace-ux);
padding: 6px var(--mspace-xl);
padding-left: 32px;
list-style: none;
font-size: var(--type-label);
line-height: 1;
background-color: var(--surface-global);
border-radius: var(--radius-pill);
}
.procard_chips .sale {
background-color: var(--secondary-100);
background-color: var(--danger-50);
background-color: var(--accent-200);
}
.procard_chips .tag {
background-color: var(--primary-100);
background-color: var(--secondary-100);
}
.procard_image {
position: relative;
display: flex;
width: 100%;
height: 100%;
}
.procard_image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease-in-out;
}
.procard:hover .procard_box img {
transform: scale(1.05);
}
.procard_add {
position: absolute;
bottom: 0px;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 90%;
height: var(--height-sticky);
margin: 0;
padding: 0;
font-size: var(--type-label);
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: var(--text-display);
color: #fff;
background-color: var(--primary-200);
background-color: var(--text-display);
border: 0;
border-radius: var(--radius-sm);
transform: translate(-50%, 100%);
transition:
transform 0.25s ease-in-out,
background-color 0.15s linear;
cursor: pointer;
}
/*.procard_add:after {
content: '';
display: flex;
width: 1em;
height: 1em;
background-color: currentColor;
mask-image: url('/../../icons/imsprite.svg#css_handbag');
-webkit-mask-image: url('/../../icons/imsprite.svg#css_handbag');
}*/
.procard_add:hover,
.procard_add:focus {
background-color: var(--primary-400);
background-color: var(--text-body);
}
.procard:hover .procard_add {
transform: translate(-50%, -30%);
}
.procard_content {
position: relative;
display: flex;
flex-direction: column;
margin-top: var(--mspace-sm);
}
.procard_summary {
display: flex;
flex-direction: column;
margin-bottom: var(--mspace-md);
}
.procard_summary small {
margin-bottom: var(--mspace-ux);
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-caption);
}
.procard_summary h5 {
margin: 0;
font-size: var(--type-body);
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-tight);
color: var(--text-heading);
}
.procard_summary h5 a {
line-height: 1.45;
text-decoration: none;
color: inherit;
}
.procard_summary h5 a:hover {
text-decoration: underline;
}
.procard_footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.procard_variant {
position: relative;
}
.procard_variant .form_select {
width: 50px;
height: 26px;
font-size: var(--type-small);
letter-spacing: var(--track-wider);
}
.procard_variant .form_select .tselect .ts-dropdown .option {
padding: var(--mspace-sm) var(--mspace-lg);
}
.procard_variant .form_select .tselect.dropdown-active .ts-dropdown {
transform: translate(-50%, 4px);
}
.procard_variant .form_select .tselect.ts-wrapper .ts-control {
letter-spacing: var(--track-wide);
}
/* Routine
----------------------------------------------------------------------------- */
.routine {
padding: var(--lspace-sm) 0;
}
.routine + .collection {
padding-top: 0;
}
.routine-container {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.routine-grid {
display: grid;
grid-template-areas:
'text text step1 step2'
'step3 step4 step5 step5';
grid-template-columns: repeat(4, 1fr);
gap: var(--mspace-xl);
padding: 0 1px; /* zoom fix */
}
.routine_card,
.routine_text {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: var(--mspace-ex);
background: #fff;
border-radius: var(--radius-lg);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
overflow: hidden;
z-index: var(--z-base);
}
/*.routine_card:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}*/
.routine_text {
grid-area: text;
justify-content: center;
padding: 0;
box-shadow: none;
}
.routine_head {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--lspace-md);
}
.routine_head small {
padding: var(--mspace-xs) var(--mspace-lg);
font-size: var(--type-label);
font-weight: 600;
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--text-heading);
background-color: #fff;
border-radius: var(--radius-pill);
z-index: var(--z-above);
}
.routine_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-under);
}
.routine_image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 0.35s ease-in-out;
}
.routine_card:nth-child(6) .routine_image img {
position: absolute;
right: 0;
width: 65%;
}
.routine_card:nth-child(6) .routine_content {
max-width: 35ch;
}
.routine_card:hover .routine_image img {
transform: scale(1.075);
}
.routine_content {
position: relative;
display: flex;
flex-direction: column;
max-width: 24ch;
height: 100%;
z-index: var(--z-above);
}
.routine_text .routine_content {
justify-self: center;
max-width: 100%;
height: auto;
}
.routine_content h3 {
margin: 0;
margin-bottom: var(--mspace-lg);
font-size: var(--type-lead);
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.routine_content p {
margin: 0;
margin-bottom: var(--lspace-md);
font-size: var(--type-small);
line-height: 1.6;
color: var(--text-body);
}
.routine_card:nth-child(2) {
grid-area: step1;
background-color: #e8f7f4;
background-color: var(--primary-50);
}
.routine_card:nth-child(3) {
grid-area: step2;
background-color: #f3f1ff;
background-color: #e8f7f4;
background-color: var(--primary-50);
}
.routine_card:nth-child(4) {
grid-area: step3;
background-color: #fff1f3;
background-color: #fffbe9;
background-color: var(--secondary-50);
}
.routine_card:nth-child(5) {
grid-area: step4;
background-color: #fffbe9;
background-color: var(--secondary-50);
}
.routine_card:nth-child(6) {
grid-area: step5;
background-color: #f1f8ff;
background-color: var(--accent-100);
}
/* Collection
----------------------------------------------------------------------------- */
.collection {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-lg);
margin: 0;
padding: var(--lspace-sm) 0;
}
.collection_head {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-lg);
margin-bottom: var(--mspace-lg);
}
.collection_head svg {
font-size: 60px;
}
.collection_head h2 {
margin: 0;
font-weight: 500;
}
.collection .expand_title {
flex: 1;
}
.collection .section_content {
flex: 2;
}
.procard_image {
background-color: #f9f9f9;
}
.cll_glow .procard_image {
background-color: #f4fcff;
}
.cll_calm .procard_image {
background-color: #f3fbf8;
}
.cll_fresh .procard_image {
background-color: #fffaea;
}
/* Visual
----------------------------------------------------------------------------- */
.visual {
position: relative;
display: flex;
flex-direction: column;
padding-top: var(--lspace-sm);
}
.visual + .collection {
padding: 0;
}
.visual_block {
--width: 55cqw;
--height: 30cqh;
--radius: var(--radius-3xl);
--curve: var(--radius-3xl);
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: center;
gap: var(--lspace-lg);
}
.visual_image {
position: relative;
display: grid;
aspect-ratio: 3 / 2;
}
.visual_content {
display: flex;
flex-direction: column;
justify-content: center;
container-type: size;
height: 100%;
}
.visual_call {
margin-bottom: var(--height);
}
.visual_content h3 {
margin: 0;
margin-bottom: var(--mspace-lg);
font-size: var(--font-size-pt);
font-weight: 600;
color: var(--text-display);
}
.visual_text {
font-size: var(--type-body);
line-height: 1.6;
color: var(--text-body);
}
/* Partners
----------------------------------------------------------------------------- */
.content .partners {
margin-top: var(--lspace-lg);
padding: var(--lspace-lg) var(--mspace-ex);
background-color: var(--surface-global);
border-radius: var(--radius-md);
}
.partners .section_content {
align-items: center;
text-align: center;
}
.partner_quote {
margin-bottom: var(--lspace-lg);
font-size: var(--type-lead);
font-weight: 500;
line-height: 1.6;
color: var(--text-heading);
}
.partner_logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--lspace-md);
}
.partner_item {
opacity: var(--opacity-disabled);
transition:
transform 0.3s ease,
opacity 0.3s ease;
cursor: pointer;
}
.partner_item:hover {
opacity: 1;
transform: scale(1.05);
}
.partner_item img {
display: block;
width: auto;
max-height: 80px;
}
/* Engage
----------------------------------------------------------------------------- */
.engage_wrapper {
--width: 45cqw;
--height: 15cqh;
--radius: var(--radius-lg);
--curve: var(--radius-2xl);
--rl_width: calc(var(--width) - var(--radius) - var(--curve));
--rl_height: calc(var(--height) - var(--radius) - var(--curve));
display: flex;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.engage_box {
position: relative;
display: flex;
flex: 1;
}
.engage_box.inverted_radius .image,
.engage_box.inverted_radius img {
border-bottom-left-radius: 0;
}
.engage_content {
display: flex;
flex: 1.25;
flex-direction: column;
justify-content: space-between;
}
.engage_list {
display: flex;
flex-direction: column;
gap: var(--lspace-lg);
margin-bottom: var(--lspace-md);
padding: 0 var(--lspace-md);
padding-left: 0;
}
.engage_feature {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-lg);
margin-bottom: var(--mspace-md);
font-size: 60px;
}
.engage_feature .icon {
font-size: var(--type-display);
}
.engage_feature h4 {
margin: 0;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: var(--track-tight);
color: var(--text-display);
}
.engage_text {
max-width: 75ch;
margin: 0;
font-size: var(--type-small);
line-height: 1.75;
color: var(--text-soft);
}
.engage_action {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mspace-ex);
padding: 0 var(--mspace-ex);
padding-left: 0;
background-color: var(--surface-global);
border-radius: var(--radius-lg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
overflow: hidden;
}
.engage_call {
font-size: var(--type-small);
font-weight: 500;
line-height: 1.75;
color: var(--text-heading);
}
.engage_chat {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
aspect-ratio: 10 / 3;
padding: 0 var(--mspace-ex);
background-color: var(--primary-50);
}
.engage_invite {
display: flex;
flex-direction: column;
margin-bottom: var(--mspace-md);
text-align: center;
}
.engage_chat h5 {
margin-bottom: 6px;
font-size: var(--type-small);
font-weight: 700;
line-height: 1;
letter-spacing: var(--track-wider);
text-transform: uppercase;
color: var(--text-display);
}
.engage_chat small {
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wider);
color: var(--text-body);
}
.engage_links {
display: flex;
align-items: center;
gap: var(--mspace-sm);
}
.engage_links a {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-ux);
padding: var(--mspace-sm) var(--mspace-ex);
font-size: var(--type-small);
font-weight: 400;
line-height: 0.8;
text-decoration: none;
color: #fff;
color: var(--text-display);
background-color: var(--primary-200);
background-color: var(--text-display);
background-color: #fff;
border-radius: var(--radius-lg);
transition:
background-color 0.1s linear,
color 0.1s linear;
}
.engage_links a:before {
background: var(--text-body);
}
.engage_links a:hover:before {
animation-duration: 0.85s;
}
/*.engage_links a:hover,
.engage_links a:focus {
background-color: #fff;
background-color: var(--text-body);
}*/
/*.engage_wa:hover,
.engage_wa:focus {
color: #fff;
background-color: #25d366;
}
.engage_tg:hover,
.engage_tg:focus {
color: #fff;
background-color: #0088cc;
}*/
/* Instagram
----------------------------------------------------------------------------- */
.instagram_wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(8, 1fr);
padding: 0 1px; /* sub-pixel animation fix */
border-radius: var(--radius-lg);
overflow: hidden;
}
.instagram_list {
display: contents;
grid-column: 1 / -1;
grid-row: 1;
}
.insta-item {
position: relative;
display: flex;
cursor: pointer;
overflow: hidden;
z-index: var(--z-base);
}
.insta-item:before,
.insta-item:after {
content: '';
position: absolute;
opacity: 0;
pointer-events: none;
}
.insta-item:before {
top: 50%;
left: 50%;
display: flex;
width: 1em;
height: 1em;
font-size: 21px;
background-color: var(--text-display);
mask-image: url(../../icons/imsprite.svg#css_instagram);
-webkit-mask-image: url(../../icons/imsprite.svg#css_instagram);
transform: translate(-50%, -75%);
transition:
transform 0.35s linear,
opacity 0.2s linear;
z-index: var(--z-modal);
}
.insta-item:hover:before,
.insta-item:focus:before {
opacity: 1;
transform: translate(-50%, -50%);
}
.insta-item:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-700);
transform: scale(0.85);
transition:
transform 0.2s linear,
opacity 0.2s linear;
z-index: var(--z-above);
}
.insta-item:hover:after,
.insta-item:focus:after {
opacity: var(--opacity-low);
transform: scale(1);
}
.insta-item img {
display: flex;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
transition: transform 0.35s ease-in;
}
.insta-item:hover img,
.insta-item:focus img {
transform: scale(1);
}
.instagram_title {
display: flex;
flex-direction: column;
grid-column: 4 / span 2;
grid-row: 1;
justify-content: center;
align-items: center;
padding: var(--mspace-ex);
text-align: center;
z-index: 2;
}
.instagram_title h3 {
margin: 0;
margin-bottom: var(--mspace-sm);
font-size: var(--type-label);
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-display);
}
.instagram_title h2 {
margin: 0;
margin-bottom: var(--mspace-ex);
font-size: var(--type-heading);
font-weight: 700;
line-height: 1;
color: var(--text-display);
}
.instagram_title p {
margin: 0;
font-size: var(--type-body);
font-weight: 400;
line-height: 1.65;
color: var(--text-body);
}
.instagram_title a {
text-decoration: none;
color: inherit;
}
.instagram_title a:hover,
.instagram_title a:focus {
text-decoration: underline;
}
/* About
----------------------------------------------------------------------------- */
.about {
padding-bottom: var(--lspace-md);
}
.about_wrapper {
--width: 43cqw;
--height: 20cqh;
--radius: var(--radius-lg);
--curve: var(--radius-2xl);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0;
margin-left: var(--lspace-md);
}
.about_image {
position: relative;
width: 40%;
aspect-ratio: 9 / 10;
}
.about_image::before {
content: '';
position: absolute;
top: var(--lspace-md);
left: calc(0px - var(--lspace-md));
width: 100%;
height: 100%;
background-color: var(--primary-100);
border-radius: var(--radius-md);
opacity: var(--opacity-disabled);
z-index: 0;
}
.about_image img {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-md);
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.about_info h3 {
margin: 0;
font-size: var(--type-lead);
font-weight: 500;
}
.about_wrapper .inverted_radius .inverted_banner {
top: calc(var(--lspace-md) / 2);
justify-content: flex-start;
padding: 0;
}
.about_content {
display: flex;
flex-direction: column;
width: 55%;
max-width: 75ch;
}
.about_content h3 {
margin: 0;
margin-bottom: var(--mspace-lg);
font-size: var(--type-lead);
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.about_content p {
margin-bottom: var(--lspace-lg);
font-size: var(--text-body);
line-height: 2;
color: var(--text-body);
}
.about_content p:last-child {
margin-bottom: 0;
}
/* Footer
----------------------------------------------------------------------------- */
.footer {
display: flex;
flex-direction: column;
gap: var(--lspace-md);
margin-top: var(--lspace-ex);
padding: var(--lspace-lg) 0 var(--mspace-ex);
background-color: var(--surface-global);
border-radius: var(--radius-md);
}
.footer_row {
display: flex;
justify-content: space-between;
gap: var(--mspace-ex);
width: var(--container-max);
margin: auto;
}
.footer_row:last-child {
align-items: center;
padding-top: var(--mspace-ex);
border-top: 1px solid #ededf6;
}
.footer_column {
display: flex;
flex: 1;
flex-direction: column;
list-style: none;
}
.footer_column.footer_info {
flex: 2;
}
.footer_column .footer_block + .footer_block {
margin-top: var(--mspace-md);
}
.footer_column .footer_block.footer_consult {
margin-top: auto;
}
.footer_block ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer_block li,
.footer_line li {
display: flex;
margin: 0;
list-style: none;
line-height: 1;
}
.footer_block h2 {
margin-bottom: var(--mspace-lg);
font-size: var(--type-lead);
line-height: 1;
color: var(--text-display);
}
.footer_block p {
margin-bottom: var(--mspace-lg);
font-size: var(--type-small);
line-height: 1.75;
color: var(--text-body);
}
.footer_block h5 {
margin-bottom: var(--mspace-md);
font-size: var(--type-small);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.footer_block ul li a,
.footer_contact li {
display: flex;
width: max-content;
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wide);
text-decoration: none;
color: var(--text-body);
}
.footer_block ul li a {
margin: var(--mspace-xs) 0;
padding: var(--mspace-ux);
padding-right: 0;
padding-left: 0;
transition: color 0.3s ease;
}
.footer_block ul li a:hover {
color: var(--text-display);
}
.footer .core_underline a:after {
bottom: 7px;
}
.footer_line p {
margin: 0;
font-size: var(--type-label);
letter-spacing: var(--track-wide);
color: var(--text-caption);
}
.footer_info .footer_block {
max-width: 60%;
}
.footer_contact {
margin-bottom: var(--mspace-md);
}
.footer_follow h5,
.footer_contact h5 {
margin-bottom: var(--mspace-ex);
}
.footer_follow li,
.footer_contact li {
margin-bottom: var(--mspace-md);
}
.footer_follow ul li a,
.footer_contact ul li a {
padding: 0;
font-weight: 700;
color: var(--text-display);
}
.footer_follow ul li a:hover,
.footer_contact ul li a:hover {
text-decoration: underline;
}
.footer_consult h5 {
margin-bottom: var(--mspace-lg);
}
.footer_block.footer_consult li a {
padding-top: 0;
padding-bottom: var(--mspace-md);
}
.footer_consult li a span {
margin-left: var(--mspace-ux);
}
.footer_engage ul {
display: flex;
gap: var(--mspace-md);
margin-top: var(--mspace-md);
}
.footer_engage ul li {
flex: 1;
}
.footer_engage ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: var(--mspace-ux);
width: 100%;
padding: var(--mspace-sm) var(--mspace-ex);
font-size: var(--type-small);
font-weight: 400;
line-height: 0.8;
text-decoration: none;
color: var(--text-display);
background-color: #f2f2f2;
border-radius: var(--radius-lg);
transition: background-color 0.15s linear;
}
.footer_engage ul li a:before {
background: var(--text-body);
}
.footer_engage ul li a:hover:before {
animation-duration: 0.85s;
}
.footer_language {
font-size: var(--type-label);
line-height: 1;
color: var(--text-soft);
}
.footer_follow h5 {
margin-bottom: var(--mspace-md);
}
.footer_payment {
display: flex;
flex: 1;
align-items: center;
gap: var(--mspace-md);
margin: 0;
}
.footer_payment li img {
width: 38px;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer_payment li img:hover {
opacity: 1;
}
/* Advantages
----------------------------------------------------------------------------- */
.advantage_wrapper {
position: relative;
display: flex;
}
.advantage_list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--lspace-md);
padding-left: var(--mspace-lg);
}
.advantage_item {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--mspace-ex);
}
.advantage_icon {
position: relative;
display: flex;
font-size: 60px;
}
.advantage_icon:before {
content: '';
position: absolute;
top: var(--mspace-sm);
left: calc(0px - var(--mspace-lg));
width: 110%;
height: 110%;
background-color: var(--secondary-50);
border-radius: var(--radius-circle);
z-index: var(--z-under);
}
.advantage_icon svg {
background-color: transparent;
z-index: var(--z-above);
}
.advantage_content h4 {
margin-bottom: var(--mspace-sm);
font-size: 1.125rem;
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-display);
}
.advantage_item p {
margin: 0;
font-size: var(--type-small);
line-height: 1.7;
color: var(--text-body);
}
/* Page - Inner Product
----------------------------------------------------------------------------- */
.product_single section {
position: relative;
display: flex;
margin-bottom: 0;
padding: 0 var(--lspace-lg);
}
.product_single .content section ~ section {
margin-top: var(--lspace-lg);
padding-top: var(--lspace-lg);
/*border-top: 1px solid #e5e7eb;*/
}
.product_single .section_title {
display: flex;
flex: 1;
margin: 0;
}
.product_single .section_content {
flex: 2;
}
.product_single .section_title h2 {
font-weight: 500;
}
/* Card - Inner Product
----------------------------------------------------------------------------- */
.product_single .entry {
display: flex;
justify-content: center;
width: 100%;
margin-top: var(--lspace-sm);
padding: 0;
}
.entry_wrapper {
display: grid;
grid-template-columns: 0.85fr 1fr;
align-items: start;
gap: var(--lspace-md);
width: 100%;
}
.entry_gallery {
display: flex;
align-items: flex-start;
gap: var(--mspace-lg);
}
.entry_carousel {
flex: 1;
aspect-ratio: 4 / 5;
background-color: #f9f9f9;
/* aspect-ratio: 1; */
border-radius: var(--radius-md);
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px; */
overflow: hidden;
}
.entry_slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry_thumbs {
display: flex;
flex-direction: column;
gap: var(--mspace-lg);
width: 100px;
}
.entry_breadcrumbs {
position: relative;
display: flex;
justify-content: flex-start;
margin: 0;
margin-bottom: var(--mspace-ux);
padding: 0;
}
.entry_breadcrumbs li {
position: relative;
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.entry_breadcrumbs li a,
.entry_breadcrumbs li span {
display: flex;
margin: 0;
padding: 0;
font-size: var(--type-small);
font-size: var(--type-label);
line-height: 1;
letter-spacing: var(--track-wide);
text-decoration: none;
color: var(--text-heading);
}
.entry_breadcrumbs li a {
color: var(--text-caption);
transition: color 0.15s linear;
}
.entry_breadcrumbs li a:hover {
color: var(--text-heading);
}
.entry_breadcrumbs li:before {
content: '';
width: 4px;
height: 4px;
margin: 0 var(--mspace-ux);
font-size: var(--type-label);
line-height: 1.3;
color: var(--text-caption);
background-color: var(--text-muted);
border-radius: var(--radius-circle);
}
.entry_breadcrumbs li:first-child:before {
display: none;
}
.entry_header {
display: flex;
flex-direction: column;
margin-bottom: var(--lspace-sm);
}
.entry_header h1 {
margin-bottom: 0;
font-size: var(--type-heading);
font-weight: 500;
line-height: 1.25;
color: var(--text-display);
}
.entry_content {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 0 var(--lspace-sm);
}
.entry_metas {
display: flex;
justify-content: flex-start;
align-items: center;
gap: var(--mspace-ux);
margin-bottom: 0;
}
.entry_meta {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-ux);
font-size: var(--type-label);
line-height: 1;
letter-spacing: var(--track-wider);
color: var(--text-body);
}
.entry_meta strong {
display: contents;
font-weight: 600;
color: var(--text-display);
}
.entry_meta:after {
content: '';
position: relative;
display: flex;
width: 2px;
height: 0.75em;
max-height: 100%;
border-right: 2px solid var(--text-soft);
border-radius: 1px;
}
.entry_meta:last-child:after {
display: none;
}
.graph svg {
color: var(--primary-700);
}
.entry_worth {
margin-top: auto;
}
.entry_key {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mspace-md);
max-width: 80ch;
margin: 0;
margin-bottom: var(--lspace-sm);
padding: 0;
}
.entry_key li {
position: relative;
display: flex;
align-items: center;
gap: var(--mspace-md);
margin-bottom: 0;
list-style: none;
font-size: var(--type-body);
line-height: 1.45;
color: var(--text-heading);
}
.entry_key li:after {
content: '';
position: absolute;
top: 50%;
left: calc(0px - calc(0.25em / 2));
width: 1.25em;
height: 1.25em;
background-color: var(--primary-50);
border-radius: var(--radius-circle);
transform: translateY(-50%);
z-index: -1;
}
.entry_key li:before {
content: '';
position: relative;
left: calc(0.25em / 2);
display: flex;
width: 0.75em;
height: 0.75em;
background-color: currentColor;
mask-image: url(../../icons/imsprite.svg#css_check-check);
-webkit-mask-image: url(../../icons/imsprite.svg#css_check-check);
}
.badge {
display: inline-block;
margin-bottom: 25px;
padding: 8px 14px;
font-size: 14px;
background-color: #f5f5f5;
border-radius: 6px;
}
.badge.success {
font-weight: 600;
color: #1b8a5a;
background-color: #e6f7ee;
}
.entry_section {
margin-bottom: var(--lspace-sm);
}
.entry_cost {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--mspace-sm);
}
.entry_price {
display: flex;
align-items: baseline;
gap: var(--mspace-sm);
font-size: var(--type-heading);
line-height: 1;
color: var(--text-display);
}
.entry_price ins {
font-size: inherit;
font-weight: 400;
letter-spacing: inherit;
color: inherit;
}
.entry_price ins:after {
content: 'EUR';
position: relative;
display: inline-flex;
padding-left: 0.35ch;
}
.entry_price del {
font-size: 75%;
text-decoration: line-through;
color: inherit;
opacity: var(--opacity-disabled);
}
.entry_key h3 {
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
}
.entry_key p {
margin-bottom: 14px;
font-size: 15px;
color: #555;
}
.entry_chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.entry_chips li {
padding: 6px 14px;
list-style: none;
font-size: 14px;
color: #333;
background-color: #f1f1f1;
border-radius: 50px;
}
.entry_variant {
padding: var(--mspace-lg) 0;
border: 1px solid var(--surface-secondary);
border-right: 0;
border-left: 0;
}
.entry_variant h5 {
margin-bottom: var(--mspace-ux);
font-size: var(--type-label);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-heading);
}
.entry_variant ul {
display: flex;
margin: 0;
padding: 0;
}
.entry_variant ul li {
position: relative;
padding: var(--mspace-xs) var(--mspace-sm);
list-style: none;
font-size: var(--type-small);
font-weight: 500;
color: var(--text-disabled);
transition: color 0.15s ease;
cursor: pointer;
}
.entry_variant ul li:hover {
color: #000;
}
.entry_variant ul li.is_active {
font-weight: 600;
color: var(--text-heading);
}
.entry_variant ul li.is_active:after {
content: '';
position: absolute;
bottom: 0px;
left: 50%;
width: calc(100% - calc(var(--mspace-sm) * 2));
height: 2px;
border-top: 2px solid currentColor;
border-radius: 1px;
transform: translateX(-50%);
}
.entry_variant ul li:first-child {
padding-left: 0;
}
.entry_variant ul li:first-child:after {
left: 0;
width: calc(100% - var(--mspace-sm));
transform: none;
}
.entry_cta {
margin-top: 0px;
}
.entry_row {
display: flex;
gap: var(--mspace-ex);
margin-bottom: var(--mspace-ux);
}
.entry_cta .btn--secondary {
width: 100%;
height: 50px;
color: var(--text-display);
background-color: var(--secondary-300);
}
.entry_footer {
position: relative;
}
.entry_explore {
display: flex;
/* justify-content: space-between; */
/* padding: var(--mspace-ex); */
/* background-color: var(--primary-50); */
/* border-radius: var(--radius-md); */
gap: var(--lspace-sm);
gap: var(--lspace-md);
}
.explore_card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: var(--mspace-md);
}
.explore_icon {
padding: var(--mspace-ux);
background-color: var(--primary-50);
border-radius: var(--radius-lg);
}
.explore_icon svg {
font-size: var(--type-display);
font-size: 30px;
}
.explore_content {
display: flex;
flex-direction: column;
gap: 6px;
font-size: var(--type-small);
letter-spacing: var(--track-wide);
}
.explore_content h5 {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.explore_content span {
font-size: inherit;
line-height: 1;
color: var(--text-heading);
}
.entry_details {
display: flex;
justify-content: space-between;
margin-top: var(--mspace-sm);
font-size: 12px;
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-soft);
}
.entry_chat {
position: relative;
display: flex;
align-items: center;
}
.entry_chat svg {
margin-right: var(--mspace-xs);
}
.entry_chat h5 {
margin: 0;
padding: 0;
font-size: inherit;
line-height: 1;
color: currentColor;
}
.entry_chat ul {
margin: 0;
margin-left: var(--mspace-xs);
padding: 0;
color: inherit;
}
.entry_chat li {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
color: inherit;
}
.entry_chat li a {
font-size: inherit;
text-decoration: underline;
color: inherit;
}
.entry_chat li a:hover,
.entry_chat li a:focus {
color: var(--text-display);
}
.entry_delivery {
padding: var(--mspace-ux) var(--mspace-md);
background-color: var(--primary-50);
border-radius: var(--radius-md);
}
.entry_delivery strong {
font-weight: 600;
color: var(--text-heading);
}
.entry_tips {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mspace-md);
}
.entry_tips li {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--type-small);
line-height: 1.65;
letter-spacing: var(--track-wide);
color: var(--text-heading);
}
.entry_tips li strong {
font-weight: 600;
color: var(--text-heading);
}
/* Details - Inner Product
----------------------------------------------------------------------------- */
.product_single .content section.overview {
border: 0;
}
.overview_wrapper {
position: relative;
display: flex;
flex-direction: column;
max-width: var(--container-tablet);
}
.overview_wrapper h3 {
margin-bottom: var(--mspace-sm);
font-size: var(--type-body);
font-weight: 600;
line-height: 1.25;
color: var(--text-heading);
}
.overview_wrapper p {
font-size: var(--type-body);
line-height: 1.75;
color: var(--text-body);
}
.overview_wrapper p:last-of-type {
margin-bottom: 0;
}
.overview_wrapper strong {
font-weight: 500;
color: var(--text-heading);
}
/* Usage - Inner Product
----------------------------------------------------------------------------- */
.product_single .content .usage {
padding-top: var(--lspace-ex);
padding-bottom: var(--lspace-ex);
/* background-color: var(--primary-50); */
border-radius: var(--radius-lg);
overflow: hidden;
z-index: 1;
}
.product_single .content .usage:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-50);
opacity: var(--opacity-disabled);
pointer-events: none;
z-index: -1;
}
.usage_steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--lspace-lg);
}
.usage_step {
display: flex;
flex-direction: column;
gap: var(--mspace-lg);
}
.usage_header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--type-label);
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--text-caption);
}
.usage_header small {
display: flex;
align-items: center;
gap: var(--mspace-ux);
gap: var(--mspace-sm);
font-size: var(--type-label);
letter-spacing: var(--track-wider);
color: var(--text-heading);
}
.usage_header small::before {
content: '';
display: inline-block;
width: 18px;
border-top: 3px solid var(--primary-500);
border-radius: var(--radius-pill);
}
/*.usage_header small::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--primary-500);
border-radius: var(--radius-circle);
}*/
.usage_content {
display: flex;
flex-direction: column;
max-width: var(--container-tablet);
}
.usage_content h4 {
margin: 0;
margin-bottom: var(--mspace-sm);
font-size: var(--text-body);
font-weight: 500;
color: var(--text-display);
}
.usage_content p {
margin: 0;
font-size: var(--type-body);
line-height: 1.75;
color: var(--text-body);
}
.usage_footer {
margin-top: var(--lspace-md);
padding: var(--mspace-ex);
font-size: var(--type-body);
font-weight: 500;
text-align: center;
color: var(--text-heading);
background-color: var(--surface-global);
border-radius: var(--radius-md);
}
/* Composition - Inner Product
----------------------------------------------------------------------------- */
/*.composition_keys {
position: relative;
display: flex;
gap: var(--mspace-ex);
margin-bottom: var(--mspace-ex);
padding-bottom: var(--lspace-sm);
border-bottom: 1px solid #e5e7eb;
overflow: hidden;
}
.composition_key {
flex: 1;
}
*/
.composition_keys {
position: relative;
display: flex;
gap: var(--mspace-lg);
margin-bottom: var(--lspace-md);
border-radius: var(--radius-lg);
overflow: hidden;
}
.composition_key {
position: relative;
flex: 1;
padding: var(--mspace-ex);
background-color: var(--surface-global);
border-radius: var(--radius-lg);
z-index: 1;
}
.composition_key:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: url(../../images/slide_decor-3.png);
background-size: cover;
transform: translate(-50%, -50%);
z-index: -1;
}
.composition_key h5 {
display: flex;
align-items: center;
gap: var(--mspace-sm);
width: max-content;
margin: 0;
margin-bottom: var(--mspace-md);
font-size: var(--text-body);
font-weight: 500;
line-height: 1;
color: var(--text-display);
border-radius: var(--radius-pill);
}
.composition_key h5:before {
content: '';
width: 8px;
height: 8px;
background-color: var(--primary-500);
border-radius: var(--radius-circle);
}
.composition_key p {
margin: 0;
font-size: var(--type-small);
line-height: 1.85;
color: var(--text-body);
}
/*.composition_keys {
position: relative;
display: flex;
margin-bottom: var(--lspace-md);
border: 1px solid #e5e7eb;
border-left: 0;
border-radius: var(--radius-lg);
overflow: hidden;
}
.composition_key {
flex: 1;
padding: var(--mspace-ex);
border-left: 1px solid #e5e7eb;
}
.composition_key h5 {
margin: 0;
margin-bottom: var(--mspace-md);
font-size: var(--text-body);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.composition_key p {
margin: 0;
font-size: var(--type-small);
line-height: 1.75;
color: var(--text-body);
}*/
.composition_details {
font-size: var(--type-body);
line-height: 2.15;
color: var(--text-body);
}
.composition_details small {
display: flex;
margin-top: var(--mspace-md);
font-size: var(--type-label);
letter-spacing: var(--track-wide);
color: var(--text-caption);
}
/* Crossell - Inner Product
----------------------------------------------------------------------------- */
.cross {
flex-direction: column;
}
.cross .section_title {
margin-bottom: var(--lspace-lg);
}
/* Single Page
----------------------------------------------------------------------------- */
.content_single {
position: relative;
}
/*.content_single article {
margin: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}*/
.headline {
width: 100%;
margin: 0;
margin-top: var(--lspace-sm);
background: var(--primary-50);
border-radius: var(--radius-sm);
}
.headline_content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: var(--lspace-ex) 6.25rem;
text-align: center;
border-radius: var(--radius-md);
}
.headline_content small {
margin-bottom: var(--mspace-sm);
font-size: var(--type-label);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-600);
}
.headline_content h1 {
margin: 0;
font-size: var(--type-display);
font-weight: 500;
line-height: 1.25;
color: var(--text-display);
}
.guide {
display: flex;
gap: var(--lspace-ex);
width: 100%;
}
.apprise {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 80ch;
}
.digest {
display: block;
margin: 0;
padding: 0;
background-color: transparent;
box-shadow: none;
}
.digest h2 {
font-size: var(--type-heading);
font-weight: 800;
}
.digest ul li::marker {
color: var(--primary-600);
}
.digest :where(b, strong) {
font-weight: 700;
color: var(--text-display);
}
.guide .panel {
position: sticky;
top: 24px;
align-self: start;
width: 100%;
max-width: 260px;
}
.panel ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.panel li {
margin: 0;
padding: 0;
}
.panel li a {
display: flex;
align-items: center;
margin: 0;
padding: var(--mspace-md) 0;
font-size: var(--type-body);
line-height: 1;
text-decoration: none;
color: var(--text-caption);
border-radius: 10px;
transition:
background 0.1s linear,
color 0.1s linear;
}
.panel li a:hover,
.panel li a.current {
color: var(--text-heading);
}
.apprise footer {
margin-top: var(--lspace-md);
}
/* Catalog - Store
----------------------------------------------------------------------------- */
.store {
position: relative;
}
.intro {
margin-top: var(--lspace-sm);
}
.intro_content {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--lspace-lg);
background: var(--surface-global);
border-radius: var(--radius-md);
}
.intro_content h1 {
margin-bottom: var(--mspace-lg);
font-size: var(--type-display);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.intro_content small {
font-size: 14px;
color: #6b7280;
}
.intro_breadcrumbs {
display: flex;
justify-content: flex-start;
margin: 0;
padding: 0;
list-style: none;
}
.intro_breadcrumbs li {
display: flex;
align-items: center;
margin: 0;
padding: 0;
line-height: 1;
}
.intro_breadcrumbs li a,
.intro_breadcrumbs li span {
margin: 0;
padding: 0;
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-disabled);
}
.intro_breadcrumbs li a:hover {
color: var(--text-body);
}
.intro_breadcrumbs li span {
color: var(--text-body);
}
.intro_breadcrumbs li:not(:last-child)::after {
content: '›';
padding: 0 var(--mspace-ux);
color: var(--text-caption);
}
.intro_breadcrumbs li a svg {
position: relative;
top: -2px;
margin-right: var(--mspace-ux);
}
/* layout */
.outlet {
display: grid;
grid-template-columns: 280px 1fr;
gap: 28px;
margin-bottom: 32px;
}
/* filters */
.filters {
position: sticky;
top: var(--mspace-lg);
display: flex;
flex-direction: column;
max-width: var(--container-2-cols);
height: max-content;
}
.filter {
position: relative;
}
.filter + .filter {
margin-top: var(--mspace-lg);
padding-top: var(--mspace-lg);
border-top: 1px solid var(--surface-secondary);
}
.filter_head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mspace-sm);
margin-bottom: var(--mspace-md);
}
.filter_head h3 {
margin: 0;
font-size: var(--type-lead);
font-weight: 400;
letter-spacing: 1px;
color: var(--text-display);
}
.filter_pick {
display: flex;
align-items: center;
gap: 8px;
max-width: 58%;
}
.filter_choice {
flex: 1;
min-width: 0;
font-size: var(--type-small);
letter-spacing: var(--track-wide);
white-space: nowrap;
text-overflow: ellipsis;
color: var(--text-caption);
overflow: hidden;
}
.filter_clear {
padding: var(--mspace-xs) var(--mspace-sm);
font-size: var(--type-body);
line-height: 0.9;
color: inherit;
background: none;
border: none;
border-radius: 8px;
visibility: hidden;
cursor: pointer;
}
.filter_clear:hover {
background: #f3f4f6;
}
.filter_search {
display: none;
margin-bottom: var(--mspace-md);
}
.filter_search input {
width: 100%;
height: 40px;
margin: 0;
font-size: var(--type-small);
background-color: var(--surface-secondary);
border: 0;
border-radius: var(--radius-md);
}
.filter_list {
--visible-items: 7;
display: grid;
max-height: calc(calc(calc(var(--type-small) * 1.3) + calc(var(--mspace-ux) * 2)) * var(--visible-items));
max-height: none;
overflow: hidden;
}
.filter_item label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin: 0;
padding: var(--mspace-ux) 0;
font-size: var(--type-small);
letter-spacing: var(--track-wider);
color: var(--text-body);
}
.filter_item input {
accent-color: #2563eb;
}
.filter_more {
margin-top: 10px;
}
.filter_more button {
display: flex;
width: 100%;
padding: var(--mspace-ux);
padding-left: 0;
font-size: var(--type-small);
font-weight: 500;
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-display);
background-color: transparent;
border: 0;
cursor: pointer;
}
/* inventory column */
.inventory_banner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 7 / 2;
margin-bottom: 16px;
margin-bottom: var(--lspace-lg);
border-radius: var(--radius-lg);
overflow: hidden;
}
.inventory_banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.inventory_controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--mspace-md);
margin: 0;
margin-bottom: var(--mspace-md);
}
.filter_chips {
display: flex;
flex-wrap: wrap;
gap: var(--mspace-ux);
}
.filter_chips button {
display: flex;
align-items: center;
gap: var(--mspace-ux);
height: max-content;
margin: 0;
padding: var(--mspace-ux) var(--mspace-lg);
font-size: var(--type-small);
line-height: 1;
letter-spacing: var(--track-wide);
color: var(--text-heading);
background: var(--surface-secondary);
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
}
.filter_chips button span {
pointer-events: none;
}
.filter_chips button::after {
content: '×';
position: relative;
top: 0.05em;
font-size: 140%;
line-height: 0.45;
color: var(--text-heading);
}
.filter_control .form_select {
font-size: var(--type-small);
letter-spacing: var(--track-wide);
color: var(--text-heading);
}
.inventory_list {
gap: var(--lspace-sm) var(--mspace-ex);
}
.inventory_list .card {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1/1;
font-weight: 700;
color: #5b7290;
background: #e9eef5;
border-radius: 12px;
}
.pagination {
display: flex;
flex-direction: column;
align-items: center;
margin-top: var(--lspace-ex);
text-align: center;
}
.pagination_load {
position: relative;
display: block;
width: 360px;
max-width: 100%;
margin: 0;
margin-bottom: var(--mspace-ex);
padding: var(--mspace-md) 0;
font-weight: 400;
line-height: 1;
letter-spacing: var(--track-wider);
color: var(--text-heading);
background-color: transparent;
border: 1px solid var(--text-heading);
border-radius: var(--radius-md);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
transition:
background 0.15s ease,
transform 0.06s ease,
box-shadow 0.15s ease;
cursor: pointer;
}
.pagination_load:hover {
color: #fff;
background-color: var(--text-heading);
}
.pagination_load:active {
transform: translateY(1px);
}
.pagination_list {
display: flex;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--type-body);
user-select: none;
}
.pagination_item {
position: relative;
display: inline-flex;
padding: 0;
}
.pagination_item a,
.pagination_item span {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.625em;
height: 2.625em;
padding: 0;
font-weight: 600;
line-height: 1;
text-decoration: none;
color: var(--text-heading);
border-radius: var(--radius-sm);
transition:
color 0.15s ease,
background 0.15s ease;
}
.pagination_item a:hover {
background-color: var(--surface-secondary);
}
.pagination_item span {
color: #fff;
background-color: var(--text-display);
box-shadow: 0 1px 6px rgba(17, 24, 39, 0.25);
}
.pagination_item--ellipsis span {
font-weight: 400;
color: inherit;
background-color: transparent;
box-shadow: none;
}
/* Payment - Success
----------------------------------------------------------------------------- */
/*.page_success .content {
width: 100%;
background: linear-gradient(to bottom, #fcfcfc 0%, #ffffff 100%);
}*/
.payment {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
margin-top: var(--lspace-ex);
}
.payment_wrapper {
width: 100%;
max-width: var(--container-tablet);
box-sizing: border-box;
text-align: center;
border-radius: 12px;
}
.payment_mark {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin: 0 auto;
margin-bottom: var(--lspace-lg);
background-color: currentColor;
border-radius: 50%;
z-index: 2;
}
.success .payment_mark {
color: var(--primary-600);
}
.cancel .payment_mark {
color: var(--danger-400);
}
.payment_mark::before,
.payment_mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.payment_mark::before {
width: 80px;
height: 80px;
opacity: 0.25;
}
.payment_mark::after {
width: 115px;
height: 115px;
opacity: 0.15;
}
.payment_mark svg {
fill: white;
width: 28px;
height: 28px;
z-index: 3;
}
.payment_content h2 {
margin-bottom: var(--lspace-sm);
font-size: var(--type-heading);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.payment_about {
margin-bottom: var(--mspace-lg);
}
.payment_about p {
margin: 0;
font-size: var(--type-body);
line-height: 1.65;
color: var(--text-body);
}
.payment_details {
display: flex;
justify-content: center;
align-items: center;
gap: var(--mspace-xs);
font-size: var(--type-body);
line-height: 1;
}
.payment_details span {
color: var(--text-disabled);
}
.payment_details small {
font-weight: 500;
color: var(--text-display);
}
.payment_actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--mspace-lg);
margin-top: var(--lspace-md);
}
.payment_actions a,
.payment_actions button {
margin: 0;
line-height: 1;
text-decoration: none;
color: var(--text-display);
}
.payment_order {
position: relative;
padding: var(--mspace-sm) var(--mspace-ex);
font-size: var(--type-small);
font-weight: 400;
line-height: 0.8;
letter-spacing: var(--track-wide);
text-decoration: none;
color: var(--text-display);
background-color: #f2f2f2;
border-radius: var(--radius-lg);
transition: background-color 0.15s linear;
}
.payment_order:before {
background: var(--text-body);
}
.payment_order:hover:before {
animation-duration: 0.85s;
}
/* Order - Details
----------------------------------------------------------------------------- */
.order {
margin-top: var(--lspace-lg);
}
.order_wrapper {
display: flex;
gap: var(--lspace-lg);
}
.order_column {
position: relative;
display: flex;
flex-direction: column;
}
.order_column h2 {
margin-bottom: var(--lspace-md);
font-size: var(--type-lead);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.order_cart {
flex: 3;
padding-left: 0;
}
.order_details {
display: flex;
flex-direction: column;
padding-right: var(--mspace-ex);
}
.order_item {
display: flex;
align-items: center;
gap: var(--mspace-lg);
margin-top: var(--mspace-ex);
padding-top: var(--mspace-ex);
border-top: 1px solid var(--surface-secondary);
}
.order_item:first-child {
margin: 0;
padding: 0;
border: 0;
}
.order_item img {
width: 64px;
aspect-ratio: 1;
object-fit: cover;
margin-right: 0;
background-color: #f9f9f9;
border-radius: var(--radius-md);
}
.order_product h3 {
margin: 0;
margin-bottom: var(--mspace-xs);
font-size: var(--type-body);
font-weight: 500;
color: var(--text-heading);
}
.order_product small {
font-size: var(--type-small);
color: var(--text-caption);
}
.order_price {
margin-left: auto;
font-size: var(--type-small);
font-weight: 600;
line-height: 1;
color: var(--text-display);
}
.order_price ins {
text-decoration: none;
color: var(--text-heading);
}
.order_summary {
margin-top: var(--lspace-md);
padding: var(--mspace-ex);
background-color: var(--secondary-50);
border-radius: var(--radius-lg);
}
.order_summary h3 {
margin-bottom: var(--mspace-lg);
font-size: var(--type-lead);
font-weight: 500;
line-height: 1;
color: var(--text-display);
}
.order_summary ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.order_summary li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: var(--mspace-md) 0;
list-style: none;
font-size: var(--type-body);
line-height: 1;
}
.order_summary li h5 {
margin: 0;
font-size: inherit;
font-weight: 400;
color: var(--text-heading);
}
.order_summary li span {
font-size: inherit;
font-weight: 500;
color: var(--text-heading);
}
.order_summary li:last-child {
margin-top: var(--mspace-ux);
padding: 0;
padding-top: var(--mspace-lg);
font-size: var(--type-lead);
border-top: 1px solid #f6f1e3;
}
.order_summary li:last-child span {
font-weight: 600;
color: var(--text-display);
}
.order_customer {
flex: 2;
}
.order_block {
padding: var(--mspace-ex);
background-color: var(--surface-global);
border-radius: var(--radius-lg);
}
.order_row {
margin-top: var(--lspace-sm);
padding-top: var(--lspace-sm);
border-top: 1px solid #ededf6;
}
.order_row:first-of-type {
margin: 0;
padding: 0;
border: 0;
}
.order_row ul {
display: flex;
flex-direction: column;
gap: var(--mspace-lg);
margin: 0;
padding: 0;
list-style: none;
}
.order_row li {
display: flex;
justify-content: space-between;
padding: 0;
line-height: 1;
}
.order_row h5 {
margin: 0;
font-size: var(--text-body);
font-weight: 400;
color: var(--text-disabled);
}
.order_row span {
font-size: var(--text-body);
font-weight: 400;
text-align: right;
color: var(--text-display);
}
.order_customer .coresp_cta {
margin-top: auto;
}
.order_customer .coresp_cta span {
max-width: 35ch;
}
/* Preview styles
----------------------------------------------------------------------------- */
.welcome {
position: relative;
display: flex;
}
.welcome_slider {
position: relative;
width: 700px;
margin: auto;
}
.splide__slide img {
width: 100%;
height: auto;
}
.tom_select {
position: relative;
display: flex;
width: 100%;
}
.tom_select input {
width: auto;
}
.tom_select .ts-control {
width: 100%;
}
.example-tabs button {
padding: 0.25em 0.5em;
background-color: white;
border: none;
}
.example-tabs button:hover,
.example-tabs button:focus {
text-decoration: underline;
}
.example-tabs button.is-active {
color: white;
background-color: var(--theme); /* You probably need to change this! */
}
.example-tab-panel {
display: none;
padding: 0.5em;
background-color: white;
z-index: 1;
}
.example-tab-panel.is-active {
display: block;
}
.example-collapsible-button {
display: flex;
flex-flow: row nowrap;
align-content: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
margin-top: 0.5em;
padding: 0.5em;
text-align: left;
background-color: white;
border: 2px solid transparent;
outline: none;
}
.example-collapsible-button:hover,
.example-collapsible-button:focus {
color: var(--theme);
border-color: var(--theme);
}
.example-collapsible-button.is-open {
color: white;
background-color: var(--theme); /* You probably need to change this! */
}
.example-collapsible-button.is-open:hover,
.example-collapsible-button.is-open:focus {
border-color: rgba(0, 0, 0, 0.75);
}
.example-collapsible-button::after {
content: '+';
font-size: 1.5em;
line-height: 1;
}
.example-collapsible-button.is-open::after {
content: '–';
}
.example-collapsible-panel {
max-height: 0;
margin-bottom: 0.5em;
background-color: white;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
.example-collapsible-panel.is-open {
max-height: 20em;
}
.example-collapsible-panel-content {
padding: 0.5em;
}
.example-dropdown {
position: relative;
display: inline-block;
}
.example-dropdown-button {
display: inline-block;
padding: 0;
text-decoration: underline;
color: var(--theme); /* You probably need to change this! */
background: none;
border: none;
overflow: hidden;
}
.example-dropdown-button:hover,
.example-dropdown-button:focus {
text-decoration: none;
}
.example-dropdown-button::after {
content: '➜';
display: inline-block;
transform: rotate(90deg);
transition: transform 0.25s ease-out;
}
.example-dropdown-button.is-open::after {
transform: rotate(-90deg);
}
.example-dropdown-list {
position: absolute;
top: 100%;
left: 0;
display: block;
width: max-content;
min-width: 100%;
max-width: 15em;
max-height: 13em;
margin: 0;
padding: 0;
list-style: none;
background-color: white;
box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: translateY(-1em);
transform-origin: center top;
transition: 0.25s ease-in;
perspective: 1000px;
overflow: auto;
z-index: 1;
}
.example-dropdown-list.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-timing-function: ease-out;
}
.example-dropdown-list li {
border-bottom: 1px solid whitesmoke;
}
.example-dropdown-list li:last-child {
border-bottom: none;
}
.example-dropdown-list button {
display: block;
width: 100%;
box-sizing: border-box;
padding: 0.25em 0.5em;
text-align: left;
background: none;
border: none;
}
.example-dropdown-list button:hover,
.example-dropdown-list button:focus {
color: var(--theme); /* You probably need to change this too! */
}
.example-collapsible-button {
display: flex;
flex-flow: row nowrap;
align-content: center;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
margin-top: 0.5em;
padding: 0.5em;
text-align: left;
background-color: white;
border: 2px solid transparent;
outline: none;
}
.example-collapsible-button:hover,
.example-collapsible-button:focus {
color: var(--theme);
border-color: var(--theme);
}
.example-collapsible-button.is-open {
color: white;
background-color: var(--theme); /* You probably need to change this! */
}
.example-collapsible-button.is-open:hover,
.example-collapsible-button.is-open:focus {
border-color: rgba(0, 0, 0, 0.75);
}
.example-collapsible-button::after {
content: '+';
font-size: 1.5em;
line-height: 1;
}
.example-collapsible-button.is-open::after {
content: '–';
}
.example-collapsible-panel {
max-height: 0;
margin-bottom: 0.5em;
background-color: white;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
.example-collapsible-panel.is-open {
max-height: 20em;
}
.example-collapsible-panel-content {
padding: 0.5em;
}
/*.embla.theme-light {
--brand-primary: rgb(47, 112, 193);
--brand-secondary: rgb(116, 97, 195);
--brand-alternative: rgb(19, 120, 134);
--background-site: rgb(249, 249, 249);
--background-code: rgb(244, 244, 244);
--text-body: rgb(54, 49, 61);
--text-comment: rgb(99, 94, 105);
--text-high-contrast: rgb(49, 49, 49);
--text-medium-contrast: rgb(99, 94, 105);
--text-low-contrast: rgb(116, 109, 118);
--detail-high-contrast: rgb(192, 192, 192);
--detail-medium-contrast: rgb(234, 234, 234);
--detail-low-contrast: rgb(240, 240, 242);
--admonition-note: rgb(46, 109, 188);
--admonition-warning: rgb(255, 196, 9);
--admonition-danger: rgb(220, 38, 38);
--brand-primary-rgb-value: 47, 112, 193;
--brand-secondary-rgb-value: 116, 97, 195;
--brand-alternative-rgb-value: 19, 120, 134;
--background-site-rgb-value: 249, 249, 249;
--background-code-rgb-value: 244, 244, 244;
--text-body-rgb-value: 54, 49, 61;
--text-comment-rgb-value: 99, 94, 105;
--text-high-contrast-rgb-value: 49, 49, 49;
--text-medium-contrast-rgb-value: 99, 94, 105;
--text-low-contrast-rgb-value: 116, 109, 118;
--detail-high-contrast-rgb-value: 192, 192, 192;
--detail-medium-contrast-rgb-value: 234, 234, 234;
--detail-low-contrast-rgb-value: 240, 240, 242;
--admonition-note-rgb-value: 46, 109, 188;
--admonition-warning-rgb-value: 255, 196, 9;
--admonition-danger-rgb-value: 220, 38, 38;
}
.embla {
max-width: 48rem;
margin: auto;
--slide-height: 19rem;
--slide-spacing: 1rem;
--slide-size: 70%;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: flex;
touch-action: pan-y pinch-zoom;
margin-left: calc(var(--slide-spacing) * -1);
}
.embla__slide {
transform: translate3d(0, 0, 0);
flex: 0 0 var(--slide-size);
min-width: 0;
padding-left: var(--slide-spacing);
}
.embla__slide__img {
border-radius: 1.8rem;
display: block;
height: var(--slide-height);
width: 100%;
object-fit: cover;
}
.embla__controls {
display: grid;
grid-template-columns: auto 1fr;
justify-content: space-between;
gap: 1.2rem;
margin-top: 1.8rem;
}
.embla__buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
align-items: center;
}
.embla__button {
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-webkit-appearance: none;
appearance: none;
background-color: transparent;
touch-action: manipulation;
display: inline-flex;
text-decoration: none;
cursor: pointer;
border: 0;
padding: 0;
margin: 0;
box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
width: 3.6rem;
height: 3.6rem;
z-index: 1;
border-radius: 50%;
color: var(--text-body);
display: flex;
align-items: center;
justify-content: center;
}
.embla__button:disabled {
color: var(--detail-high-contrast);
}
.embla__button__svg {
width: 35%;
height: 35%;
}
.embla__dots {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
}
.embla__dot {
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
-webkit-appearance: none;
appearance: none;
background-color: transparent;
touch-action: manipulation;
display: inline-flex;
text-decoration: none;
cursor: pointer;
border: 0;
padding: 0;
margin: 0;
width: 2.6rem;
height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.embla__dot:after {
box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
display: flex;
align-items: center;
content: '';
}
.embla__dot--selected:after {
box-shadow: inset 0 0 0 0.2rem var(--text-body);
}
.embla__slide {
transition: opacity 0.2s ease-in-out;
}
.embla__slide:not(.is-snapped) {
opacity: 0.16;
}*/
.modal {
display: none;
font-family:
-apple-system,
BlinkMacSystemFont,
avenir next,
avenir,
helvetica neue,
helvetica,
ubuntu,
roboto,
noto,
segoe ui,
arial,
sans-serif;
}
.modal__overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
}
.modal__container {
max-width: 500px;
max-height: 100vh;
box-sizing: border-box;
padding: 30px;
background-color: #fff;
border-radius: 4px;
overflow-y: auto;
}
.modal__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal__title {
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.25;
color: #00449e;
}
.modal__close {
background: transparent;
border: 0;
}
.modal__header .modal__close:before {
content: '\2715';
}
.modal__content {
margin-top: 2rem;
margin-bottom: 2rem;
line-height: 1.5;
color: rgba(0, 0, 0, 0.8);
}
.modal__btn {
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 0.875rem;
line-height: 1.15;
text-transform: none;
color: rgba(0, 0, 0, 0.8);
background-color: #e6e6e6;
border-width: 0;
border-style: none;
border-radius: 0.25rem;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition:
transform 0.25s ease-out,
-webkit-transform 0.25s ease-out;
will-change: transform;
cursor: pointer;
overflow: visible;
}
.modal__btn:focus,
.modal__btn:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.modal__btn-primary {
color: #fff;
background-color: #00449e;
}
/**************************\
Demo Animation Style
\**************************/
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(-10%);
}
}
.micromodal-slide {
display: none;
}
.micromodal-slide.is-open {
display: block;
}
.micromodal-slide[aria-hidden='false'] .modal__overlay {
animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='false'] .modal__container {
animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='true'] .modal__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide[aria-hidden='true'] .modal__container {
animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
will-change: transform;
}