:root {
--gl-bg: #f6f5f0;
--gl-bg-2: #fff;
--gl-ink: #0e0e10;
--gl-ink-rgb: 14, 14, 16;
--gl-ink-soft: #3a3a3f;
--gl-muted: #8b8a86;
--gl-line: #e6e4dc;
--gl-accent: #c8f24e;
--gl-accent-rgb: 200, 242, 78;
--gl-accent-ink: #0e0e10;
--gl-blue: #2f6bff;
--gl-success: #10b981;
--gl-error: #ef4444;
--gl-radius: 999px;
--gl-radius-md: 20px;l
--gl-radius-lg: 32px;
--gl-shadow-sm: 0 4px 12px #0e0e1008;
--gl-shadow: 0 12px 40px #0e0e100f;
--gl-shadow-lg: 0 24px 64px #0e0e101f;
--gl-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--gl-font-display: "Manrope", "Inter", system-ui, sans-serif;
--gl-font-body:
"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*,
:before,
:after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
background: var(--gl-bg);
color: var(--gl-ink);
font-family: var(--gl-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
font-size: 16px;
line-height: 1.6;
}
#page {
overflow-x: hidden;
}
::selection {
background: var(--gl-accent);
color: var(--gl-accent-ink);
}
img {
border-radius: var(--gl-radius-md);
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
transition: var(--gl-transition);
text-decoration: none;
}
a:hover {
opacity: 0.85;
}
.gl-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute !important;
}
.skip-link {
background: var(--gl-ink);
color: #fff;
z-index: 9999;
padding: 10px 16px;
position: absolute;
top: 0;
left: -9999px;
}
.skip-link:focus {
top: 8px;
left: 8px;
}
.gl-announcement {
background: var(--gl-ink);
color: #fff;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: center;
z-index: 55;
padding: 10px 24px;
font-size: 11px;
font-weight: 700;
position: relative;
}
.gl-announcement__slider {
flex-wrap: wrap;
justify-content: center;
gap: 40px;
display: flex;
}
@media (width<=768px) {
.gl-announcement {
padding: 10px 24px;
height: 38px;
overflow: hidden;
}
.gl-announcement__slider {
position: relative;
height: 100%;
display: block;
}
.gl-announcement__slider span {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
animation: rotateAnnounce 8s infinite;
}
.gl-announcement__slider span:last-child {
animation-delay: 4s;
opacity: 0;
}
}
@keyframes rotateAnnounce {
0%, 40% { opacity: 1; transform: translateY(0); }
45%, 50% { opacity: 0; transform: translateY(-10px); }
50.1%, 95% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
.gl-header {
z-index: 50;
-webkit-backdrop-filter: saturate(140%) blur(12px);
backdrop-filter: saturate(140%) blur(12px);
transition: var(--gl-transition);
background: #f6f5f0d9;
border-bottom: 1px solid #0000;
position: sticky;
top: 0;
}
.gl-header__inner {
justify-content: space-between;
align-items: center;
gap: 32px;
max-width: 1440px;
margin: 0 auto;
padding: 14px 28px;
display: flex;
}
.gl-header__brand {
flex-shrink: 0;
}
.gl-logo,
.custom-logo-link {
align-items: center;
text-decoration: none;
display: inline-flex;
}
.gl-logo__img,
.custom-logo {
object-fit: contain;
width: auto;
max-width: 100%;
height: 38px !important;
transition: opacity 0.2s;
display: block;
border-radius: 0 !important;
}
.gl-logo:hover .gl-logo__img,
.custom-logo-link:hover .custom-logo {
opacity: 0.85;
}
.gl-logo__mark {
font-size: 24px;
}
.gl-logo__sub {
color: var(--gl-muted);
letter-spacing: 0.24em;
margin-top: 2px;
font-size: 10px;
font-weight: 700;
}
.gl-header__search {
flex: 1;
max-width: 440px;
margin: 0 auto;
}
.gl-search-form {
width: 100%;
}
.gl-search-input-wrap {
align-items: center;
display: flex;
position: relative;
}
.gl-search-field {
border-radius: var(--gl-radius);
width: 100%;
color: var(--gl-ink);
font-size: 14px;
font-weight: 500;
font-family: var(--gl-font-body);
transition: var(--gl-transition);
background: #0e0e100a;
border: 1px solid #0000;
outline: none;
padding: 10px 48px 10px 20px;
}
.gl-search-field:focus {
background: var(--gl-bg-2);
border-color: var(--gl-ink);
box-shadow: var(--gl-shadow-sm);
}
.gl-search-submit {
width: 32px;
height: 32px;
color: var(--gl-ink-soft);
cursor: pointer;
transition: var(--gl-transition);
background: 0 0;
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
right: 6px;
}
.gl-search-submit:hover {
color: var(--gl-ink);
background: rgba(var(--gl-accent-rgb), 0.2);
}
.gl-nav {
flex-shrink: 0;
}
.gl-nav__list {
justify-content: center;
gap: 32px;
margin: 0;
padding: 0;
font-size: 15px;
font-weight: 600;
list-style: none;
display: flex;
}
.gl-nav__list a {
color: var(--gl-ink-soft);
padding: 8px 0;
position: relative;
}
.gl-nav__list a:hover,
.gl-nav__list a.is-active,
.gl-nav__list .current-menu-item > a {
color: var(--gl-ink);
}
.gl-nav__list a:after {
content: "";
background: var(--gl-accent);
transform-origin: 100%;
border-radius: 2px;
height: 2px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
bottom: -4px;
left: 0;
right: 0;
transform: scaleX(0);
}
.gl-nav__list a:hover:after,
.gl-nav__list a.is-active:after,
.gl-nav__list .current-menu-item > a:after {
transform-origin: 0;
transform: scaleX(1);
}
.gl-header__actions {
flex-shrink: 0;
align-items: center;
gap: 12px;
display: flex;
}
.gl-link {
color: var(--gl-ink-soft);
font-size: 14px;
font-weight: 600;
}
.gl-link:hover {
color: var(--gl-ink);
}
.gl-account-link,
.gl-cart-link {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
width: 42px;
height: 42px;
color: var(--gl-ink);
box-shadow: var(--gl-shadow-sm);
transition: var(--gl-transition);
border-radius: 50%;
justify-content: center;
align-items: center;
display: inline-flex;
position: relative;
}
.gl-account-link:hover,
.gl-cart-link:hover {
background: var(--gl-ink);
color: #fff;
border-color: var(--gl-ink);
box-shadow: var(--gl-shadow);
transform: translateY(-2px);
}
.gl-cart-count {
min-width: 18px;
height: 18px;
color: var(--gl-accent-ink);
background: var(--gl-accent);
transition: var(--gl-transition);
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
display: inline-flex;
position: absolute;
top: -4px;
right: -4px;
}
.gl-cart-link:hover .gl-cart-count {
color: var(--gl-ink);
background: #fff;
}
.gl-btn {
border-radius: var(--gl-radius);
cursor: pointer;
transition: var(--gl-transition);
border: 1px solid #0000;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
}
.gl-btn--primary {
background: var(--gl-accent);
color: var(--gl-accent-ink);
box-shadow: 0 6px 20px rgba(var(--gl-accent-rgb), 0.35);
}
.gl-btn--primary:hover {
box-shadow: 0 8px 24px rgba(var(--gl-accent-rgb), 0.5);
transform: translateY(-2px);
}
.gl-btn--outline {
color: var(--gl-ink);
border-color: var(--gl-ink);
background: 0 0;
}
.gl-btn--outline:hover {
background: var(--gl-ink);
color: #fff;
transform: translateY(-2px);
}
.gl-burger {
cursor: pointer;
width: 40px;
height: 40px;
transition: var(--gl-transition);
background: 0 0;
border: 0;
border-radius: 50%;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
display: none;
}
.gl-burger:hover {
background: #0e0e100a;
}
.gl-burger span {
background: var(--gl-ink);
width: 20px;
height: 2px;
transition: var(--gl-transition);
border-radius: 2px;
display: block;
}
.gl-burger.is-active span:first-child {
transform: translateY(7px) rotate(45deg);
}
.gl-burger.is-active span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.gl-burger.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.gl-hero {
z-index: 1;
padding: 80px 0 650px;
position: relative;
overflow: hidden;
}
.gl-hero:after {
content: "";
pointer-events: none;
z-index: 8;
background: linear-gradient(#f6f5f000 0%, #f6f5f0 20px 100%);
height: 280px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.gl-hero__inner {
text-align: center;
max-width: 1440px;
margin: 0 auto;
padding: 0 28px;
position: relative;
}
.gl-hero__title {
z-index: 10;
font-family: var(--gl-font-display);
letter-spacing: -0.045em;
margin: 32px 0 28px;
font-size: clamp(48px, 8vw, 148px);
font-weight: 900;
line-height: 0.92;
position: relative;
}
.gl-hero__line {
display: block;
}
.gl-hero__line--accent {
color: var(--gl-accent);
text-shadow: 0 0 1px #0000000a;
}
.gl-hero__sub {
z-index: 10;
max-width: 640px;
color: var(--gl-ink-soft);
margin: 0 auto;
font-size: 18px;
position: relative;
}
.gl-pill {
background: var(--gl-accent);
color: var(--gl-accent-ink);
border-radius: var(--gl-radius);
z-index: 12;
justify-content: center;
align-items: center;
padding: 14px 26px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
position: absolute;
box-shadow: 0 6px 24px #c8f24e66;
}
.gl-pill--left {
top: 120px;
left: 32px;
}
.gl-pill--right {
bottom: 80px;
right: 32px;
}
.gl-pill:hover {
transform: translateY(-2px);
}
.gl-cursor {
opacity: 0.85;
z-index: 12;
width: 36px;
height: 36px;
position: absolute;
top: 36%;
left: 18%;
transform: rotate(-12deg);
}
.gl-hero__ring {
transform: translate(-50%, calc(-50% - var(--hero-y, 0px)))
scale(var(--hero-scale, 0.6)) rotateX(var(--rot-x-outer, 0deg))
rotateY(var(--rot-y-outer, 0deg));
aspect-ratio: 1;
border: 1px solid var(--gl-line);
width: 140vw;
max-width: 1600px;
box-shadow:
inset 0 0 0 1px var(--gl-line),
0 0 0 1px var(--gl-line);
pointer-events: none;
z-index: 1;
transform-origin: 50%;
will-change: transform;
transform-style: preserve-3d;
border-radius: 50%;
position: absolute;
top: calc(95% + 400px);
left: 50%;
}
.gl-hero__ring:before,
.gl-hero__ring:after {
content: "";
border: 1px solid var(--gl-line);
transform-style: preserve-3d;
will-change: transform;
border-radius: 50%;
position: absolute;
inset: 8%;
}
.gl-hero__ring:before {
transform: translateY(calc(0px - var(--hero-y-inner, 0px)))
scale(var(--scale-inner, 1)) rotateX(var(--rot-x-inner, 0deg))
rotateY(var(--rot-y-inner, 0deg));
}
.gl-hero__ring:after {
transform: translateY(calc(0px - var(--hero-y-middle, 0px)))
scale(var(--scale-middle, 1)) rotateX(var(--rot-x-middle, 0deg))
rotateY(var(--rot-y-middle, 0deg));
inset: 18%;
}
.gl-hero__center-img {
transform: translate(-50%, calc(-50% - var(--hero-y-img, 0px)))
scale(var(--scale-img, 1)) rotateX(var(--rot-x-img, 0deg))
rotateY(var(--rot-y-img, 0deg));
z-index: 2;
opacity: 0.95;
pointer-events: auto;
will-change: transform;
width: clamp(450px, 65vw, 900px);
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
}
.gl-floating {
z-index: 5;
will-change: transform;
transform-style: preserve-3d;
pointer-events: none;
transform: translateY(var(--float-y, 0px)) rotateZ(var(--float-rot-z, 0deg))
rotateX(var(--float-rot-x, 0deg)) rotateY(var(--float-rot-y, 0deg));
position: absolute;
}
.gl-section {
padding: 72px 0;
}
.gl-section__head {
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 28px;
display: flex;
}
.gl-section__title {
font-family: var(--gl-font-display);
letter-spacing: -0.02em;
margin: 0;
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
}
.gl-cta {
background: var(--gl-ink);
color: #fff;
border-radius: 32px 32px 0 0;
margin-top: 40px;
padding: 80px 0;
}
.gl-cta__inner {
text-align: center;
}
.gl-cta h2 {
font-family: var(--gl-font-display);
margin: 0 0 24px;
font-size: clamp(28px, 4vw, 48px);
font-weight: 800;
}
.gl-footer {
background: var(--gl-blue);
margin-top: 0;
padding: 24px;
}
.gl-footer__bento {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 16px;
max-width: 1320px;
margin: 0 auto;
display: grid;
}
.gl-footer__card {
border-radius: var(--gl-radius-lg);
padding: 32px;
position: relative;
overflow: hidden;
}
.gl-footer__card--nav {
background: var(--gl-accent);
color: var(--gl-accent-ink);
flex-direction: column;
grid-row: 1/3;
display: flex;
}
.gl-footer__card--nav .gl-footer__logo-icon {
background: var(--gl-ink);
border-radius: 14px;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
margin-bottom: 32px;
display: flex;
}
.gl-footer__card--nav .gl-footer__logo-icon svg {
color: var(--gl-accent);
}
.gl-footer__nav-links {
flex-direction: column;
gap: 14px;
margin: 0 0 auto;
padding: 0;
list-style: none;
display: flex;
}
.gl-footer__nav-links a {
font-family: var(--gl-font-display);
color: var(--gl-accent-ink);
opacity: 0.8;
transition: var(--gl-transition);
font-size: 16px;
font-weight: 700;
}
.gl-footer__nav-links a:hover {
opacity: 1;
transform: translate(4px);
}
.gl-footer__legal {
flex-direction: column;
gap: 4px;
margin-top: 32px;
display: flex;
}
.gl-footer__legal a {
color: var(--gl-accent-ink);
opacity: 0.7;
font-size: 12px;
text-decoration: underline;
}
.gl-footer__legal a:hover {
opacity: 1;
}
.gl-footer__contact-btn {
background: var(--gl-ink);
color: #fff;
border-radius: var(--gl-radius);
cursor: pointer;
width: fit-content;
transition: var(--gl-transition);
border: none;
justify-content: center;
align-items: center;
margin-top: 20px;
padding: 14px 32px;
font-size: 14px;
font-weight: 700;
display: inline-flex;
}
.gl-footer__contact-btn:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: 0 8px 24px #0e0e104d;
}
.gl-footer__card--shop {
background: var(--gl-accent);
color: var(--gl-accent-ink);
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 220px;
display: flex;
}
.gl-footer__shop-circle {
border: 2px solid var(--gl-accent-ink);
width: 140px;
height: 140px;
transition: var(--gl-transition);
border-radius: 50%;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 0;
display: flex;
}
.gl-footer__shop-circle:hover {
background: #0e0e100f;
transform: scale(1.05);
}
.gl-footer__shop-circle span {
font-family: var(--gl-font-display);
font-size: 16px;
font-weight: 800;
}
.gl-footer__card--social {
background: #e8f0a0;
justify-content: center;
align-items: center;
gap: 16px;
padding: 28px;
display: flex;
}
.gl-footer__social-icon {
background: var(--gl-ink);
color: #fff;
width: 48px;
height: 48px;
transition: var(--gl-transition);
border-radius: 50%;
justify-content: center;
align-items: center;
display: inline-flex;
}
.gl-footer__social-icon:hover {
opacity: 1;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 16px #0e0e1033;
}
.gl-footer__card--contact {
color: #fff;
background: #3a3a3f;
}
.gl-footer__card--contact h3 {
font-family: var(--gl-font-display);
margin: 0 0 12px;
font-size: 28px;
font-weight: 800;
}
.gl-footer__card--contact p {
color: #ffffffa6;
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.gl-footer__card--contact a {
color: #fff;
text-decoration: underline;
}
.gl-footer__card--brand {
color: #fff;
background: #2c2c30;
flex-direction: column;
justify-content: flex-end;
min-height: 180px;
display: flex;
position: relative;
}
.gl-footer__card--brand .gl-footer__brand-logo {
opacity: 0.15;
width: 140px;
height: 140px;
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.gl-footer__brand-text {
font-family: var(--gl-font-display);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 4px;
font-size: 14px;
font-weight: 800;
}
.gl-footer__brand-sub {
color: #ffffff80;
margin: 0;
font-size: 12px;
}
.gl-posts {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 28px;
padding: 60px 0;
display: grid;
}
.gl-post-card {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
border-radius: var(--gl-radius-md);
overflow: hidden;
}
.gl-post-card__thumb img {
aspect-ratio: 16/10;
object-fit: cover;
width: 100%;
}
.gl-post-card__title {
font-family: var(--gl-font-display);
margin: 18px 20px 6px;
font-size: 22px;
}
.gl-post-card__meta {
color: var(--gl-muted);
padding: 0 20px;
font-size: 13px;
}
.gl-post-card__excerpt {
color: var(--gl-ink-soft);
padding: 12px 20px 20px;
}
.gl-page,
.gl-single {
max-width: 820px;
margin: 0 auto;
padding: 60px 0;
}
.gl-page__title,
.gl-single__title {
font-family: var(--gl-font-display);
letter-spacing: -0.02em;
margin: 0 0 24px;
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
}
.gl-404 {
text-align: center;
padding: 120px 0;
}
.gl-404 h1 {
font-family: var(--gl-font-display);
margin: 0;
font-size: 120px;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
background: var(--gl-bg-2);
box-shadow: var(--gl-shadow);
border-radius: var(--gl-radius-md);
transition: var(--gl-transition);
border: 1px solid #0000;
flex-direction: column;
display: flex;
position: relative;
overflow: hidden;
padding: 20px !important;
}
.woocommerce ul.products li.product:hover {
box-shadow: var(--gl-shadow-lg);
transform: translateY(-6px);
}
.woocommerce ul.products li.product img {
border-radius: calc(var(--gl-radius-md) - 6px);
transition: var(--gl-transition);
margin-bottom: 0 !important;
}
.woocommerce ul.products li.product:hover img {
transform: scale(1.02);
}
.gl-product-badges {
z-index: 10;
flex-direction: column;
gap: 6px;
display: flex;
position: absolute;
top: 14px;
left: 14px;
}
.gl-badge {
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: var(--gl-radius);
justify-content: center;
align-items: center;
padding: 5px 10px;
font-size: 10px;
font-weight: 800;
line-height: 1;
display: inline-flex;
}
.gl-badge--sale {
background: var(--gl-ink);
color: #fff;
}
.gl-badge--new {
background: var(--gl-accent);
color: var(--gl-accent-ink);
box-shadow: 0 4px 12px rgba(var(--gl-accent-rgb), 0.2);
}
.gl-badge--hot {
background: var(--gl-blue);
color: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--gl-font-display);
color: var(--gl-ink);
font-weight: 800;
line-height: 1.35;
padding: 16px 0 8px !important;
font-size: 16px !important;
}
.woocommerce ul.products li.product .price {
flex-flow: wrap;
align-items: baseline;
gap: 6px;
font-weight: 800;
display: flex;
color: var(--gl-blue) !important;
margin-bottom: 16px !important;
font-size: 18px !important;
}
.woocommerce ul.products li.product .price del {
color: var(--gl-muted);
order: -1;
margin-right: 0;
font-size: 14px;
font-weight: 500;
display: inline-block;
}
.woocommerce ul.products li.product .price ins {
color: var(--gl-blue);
font-weight: 800;
text-decoration: none;
display: inline-block;
}
.woocommerce ul.products li.product .price ins * {
text-decoration: none;
}
.woocommerce ul.products li.product .price > span {
color: var(--gl-blue);
font-weight: 800;
}
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce input.button {
cursor: pointer;
box-shadow: 0 4px 14px rgba(var(--gl-accent-rgb), 0.2);
background: var(--gl-accent) !important;
color: var(--gl-accent-ink) !important;
border-radius: var(--gl-radius) !important;
text-align: center !important;
transition: var(--gl-transition) !important;
border: 1px solid #0000 !important;
padding: 12px 24px !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.woocommerce ul.products li.product .button {
margin-top: auto !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
box-shadow: var(--gl-shadow-sm);
transform: translateY(-2px);
background: var(--gl-ink) !important;
color: #fff !important;
}
.woocommerce div.product {
padding: 40px 0 80px;
}
.woocommerce div.product div.images img {
border-radius: var(--gl-radius-md);
border: 1px solid var(--gl-line);
background: var(--gl-bg-2);
}
.woocommerce div.product div.summary {
padding-left: 10px;
}
.woocommerce div.product .product_title {
font-family: var(--gl-font-display);
letter-spacing: -0.03em;
color: var(--gl-ink);
margin-bottom: 12px;
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
line-height: 1.1;
}
.woocommerce div.product .price {
color: var(--gl-ink) !important;
margin-bottom: 24px !important;
font-size: 28px !important;
font-weight: 800 !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
color: var(--gl-ink-soft);
margin-bottom: 28px;
font-size: 15px;
line-height: 1.7;
}
.woocommerce div.product form.cart div.quantity {
margin-right: 14px !important;
}
.woocommerce .quantity .qty {
border-radius: var(--gl-radius);
border: 1px solid var(--gl-line);
background: var(--gl-bg-2);
width: 60px;
height: 48px;
color: var(--gl-ink);
text-align: center;
outline: none;
font-size: 15px;
font-weight: 700;
}
.woocommerce .quantity .qty:focus {
border-color: var(--gl-ink);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
justify-content: center;
align-items: center;
height: 48px;
display: inline-flex;
padding: 0 32px !important;
}
.woocommerce div.product .woocommerce-tabs {
border-top: 1px solid var(--gl-line);
margin-top: 60px;
padding-top: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
gap: 24px;
display: flex;
background: 0 0 !important;
border: none !important;
margin-bottom: 24px !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs:before,
.woocommerce div.product .woocommerce-tabs ul.tabs:after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
position: relative;
background: 0 0 !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 0 8px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: var(--gl-font-display);
font-size: 16px;
font-weight: 700;
color: var(--gl-muted) !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--gl-ink) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
content: "";
background: var(--gl-accent);
height: 2px;
transition: var(--gl-transition);
position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: scaleX(0);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after {
transform: scaleX(1);
}
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
border-radius: var(--gl-radius-md);
box-shadow: var(--gl-shadow-sm);
padding: 32px;
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
padding: 40px 0 80px;
}
.woocommerce table.shop_table {
background: var(--gl-bg-2);
overflow: hidden;
border: 1px solid var(--gl-line) !important;
border-radius: var(--gl-radius-md) !important;
border-collapse: separate !important;
}
.woocommerce table.shop_table th {
font-family: var(--gl-font-display);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--gl-line);
background: #0e0e1005;
font-size: 13px;
font-weight: 700;
padding: 16px 20px !important;
}
.woocommerce table.shop_table td {
border-top: 1px solid var(--gl-line) !important;
padding: 20px !important;
}
.woocommerce-cart table.cart img {
border-radius: 8px;
width: 72px;
}
.woocommerce-cart td.product-name a {
color: var(--gl-ink);
font-weight: 700;
}
.woocommerce-cart td.product-name a:hover {
color: var(--gl-blue);
}
.cart-collaterals {
grid-template-columns: 1fr;
justify-content: end;
margin-top: 40px;
display: grid;
}
.cart-collaterals .cart_totals {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
border-radius: var(--gl-radius-md);
max-width: 480px;
box-shadow: var(--gl-shadow);
justify-self: end;
padding: 32px;
width: 100% !important;
}
.cart_totals h2 {
font-family: var(--gl-font-display);
margin-bottom: 20px;
font-size: 22px;
font-weight: 800;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
font-size: 14px;
font-family: var(--gl-font-body);
width: 100%;
transition: var(--gl-transition);
border-radius: 8px;
outline: none;
padding: 12px 16px;
}
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus {
border-color: var(--gl-ink);
box-shadow: var(--gl-shadow-sm);
}
.woocommerce-checkout #order_review {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
border-radius: var(--gl-radius-md);
box-shadow: var(--gl-shadow);
padding: 32px;
}
.woocommerce span.onsale {
display: none !important;
}
.gl-benefits {
-webkit-backdrop-filter: saturate(180%) blur(24px);
backdrop-filter: saturate(180%) blur(24px);
border-radius: var(--gl-radius-md);
z-index: 20;
background: #ffffff40;
border: 1px solid #fff6;
margin-top: -350px;
margin-bottom: 80px;
padding: 48px 24px;
position: relative;
overflow: hidden;
transform: translateZ(0);
box-shadow: 0 24px 48px #0e0e100d;
}
.gl-benefits__grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
display: grid;
}
.gl-benefits__item {
align-items: flex-start;
gap: 16px;
display: flex;
}
.gl-benefits__icon {
color: var(--gl-ink);
background: #c8f24e33;
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
padding: 12px;
display: flex;
}
.gl-benefits__icon svg {
width: 24px;
height: 24px;
}
.gl-benefits__text {
flex: 1;
}
.gl-benefits__title {
font-family: var(--gl-font-display);
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.gl-benefits__desc {
color: var(--gl-ink-soft);
margin: 0;
font-size: 14px;
line-height: 1.4;
}
@media (width<=1024px) {
.gl-burger {
display: inline-flex;
}
.gl-pill--left {
top: 20px;
left: 20px;
}
.gl-pill--right {
bottom: 20px;
right: 20px;
}
.gl-cursor {
display: none;
}
.gl-nav {
-webkit-backdrop-filter: blur(20px) !important;
z-index: 45 !important;
opacity: 0 !important;
visibility: hidden !important;
background: #0e0e10fa !important;
justify-content: center !important;
align-items: center !important;
width: 100vw !important;
height: 100vh !important;
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.4s !important;
display: flex !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
transform: translateY(-20px) !important;
}
.gl-nav.is-open {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.gl-nav__list {
flex-direction: column !important;
align-items: center !important;
gap: 32px !important;
width: 100% !important;
display: flex !important;
}
.gl-nav__list a {
font-family: var(--gl-font-display) !important;
color: #fffc !important;
letter-spacing: -0.02em !important;
transition: var(--gl-transition) !important;
padding: 10px 0 !important;
font-size: 28px !important;
font-weight: 800 !important;
display: inline-block !important;
}
.gl-nav__list a:after {
display: none !important;
}
.gl-nav__list a:hover,
.gl-nav__list a.is-active {
color: var(--gl-accent) !important;
transform: scale(1.05) !important;
}
.gl-footer__bento {
grid-template-columns: 1fr 1fr;
}
.gl-footer__card--nav,
.gl-footer__card--shop,
.gl-footer__card--social,
.gl-footer__card--unified-contact {
grid-area: auto !important;
}
}
@media (width<=768px) {
.gl-footer__bento {
grid-template-columns: 1fr;
}
.gl-footer__card--shop {
min-height: 180px;
}
.gl-hero {
padding: 60px 0 540px;
}
.gl-hero:after {
height: 350px;
}
.gl-hero__ring {
width: 180vw;
top: 320px;
}
.gl-hero__center-img {
width: clamp(250px, 80vw, 400px);
}
.gl-floating {
transform: translateY(var(--float-y, 0px)) rotateZ(var(--float-rot-z, 0deg))
rotateX(var(--float-rot-x, 0deg)) rotateY(var(--float-rot-y, 0deg))
scale(0.4) !important;
}
img[src*="Ativo\%201"],
img[src*="Ativo\ 1"] {
left: -5% !important;
}
img[src*="Ativo\%202"],
img[src*="Ativo\ 2"] {
top: -1% !important;
}
.gl-benefits {
border-radius: 20px;
width: 84%;
margin-top: -330px;
margin-left: auto;
margin-right: auto;
padding: 16px 8px;
}
.gl-benefits__grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.gl-benefits__item {
text-align: center;
flex-direction: column;
align-items: center;
gap: 8px;
}
.gl-benefits__icon {
padding: 8px;
}
.gl-benefits__icon svg {
width: 20px;
height: 20px;
}
.gl-benefits__title {
margin: 0 0 4px;
font-size: 12px;
}
.gl-benefits__desc {
font-size: 11px;
line-height: 1.25;
}
.gl-hero__title {
letter-spacing: -0.02em;
line-height: 1.1;
font-size: 38px !important;
}
.gl-hero__sub {
max-width: 100%;
margin-bottom: 24px;
line-height: 1.55;
font-size: 11px !important;
}
}
@media (width<=560px) {
.gl-header__inner {
flex-wrap: nowrap;
gap: 8px;
padding: 10px 12px;
}
.gl-header__brand .gl-logo .gl-logo__img {
height: 32px !important;
}
.gl-header__search {
flex: 1;
order: 0;
max-width: none;
margin: 0;
}
.gl-search-field {
padding: 8px 12px;
font-size: 12px;
}
.gl-header__actions {
align-items: center;
gap: 6px;
display: flex;
}
.gl-account-link {
order: 1;
}
.gl-cart-link {
order: 2;
}
.gl-burger {
order: 3;
}
.gl-cart-link,
.gl-account-link {
width: 32px;
height: 32px;
}
.gl-cart-link svg,
.gl-account-link svg {
width: 18px;
height: 18px;
}
.gl-cart-count {
width: 16px;
height: 16px;
font-size: 10px;
top: -4px;
right: -4px;
}
.gl-burger {
width: 36px;
height: 36px;
}
.gl-hero {
padding: 40px 0 550px;
}
.shop-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
border-radius: 16px !important;
padding: 12px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
padding: 6px 0 2px !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
display: -webkit-box !important;
overflow: hidden !important;
}
.woocommerce ul.products li.product .price {
color: var(--gl-blue) !important;
flex-flow: wrap !important;
align-items: baseline !important;
gap: 4px !important;
margin-bottom: 6px !important;
font-size: 13px !important;
font-weight: 800 !important;
display: flex !important;
}
.woocommerce ul.products li.product .price del {
color: var(--gl-muted) !important;
order: -1 !important;
margin-right: 0 !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
display: inline-block !important;
}
.woocommerce ul.products li.product .price ins {
color: var(--gl-blue) !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
text-decoration: none !important;
display: inline-block !important;
}
.woocommerce ul.products li.product .price ins *,
.woocommerce ul.products li.product .price ins span {
color: var(--gl-blue) !important;
font-weight: 800 !important;
text-decoration: none !important;
}
.woocommerce ul.products li.product .price > span {
color: var(--gl-blue) !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.woocommerce ul.products li.product .button {
padding: 8px 12px !important;
font-size: 11px !important;
}
}
.gl-category-carousel-wrap {
width: 100%;
position: relative;
}
.gl-cat-arrow {
display: none !important;
}
.gl-category-carousel {
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
gap: 24px !important;
margin: 0 -24px !important;
padding-bottom: 24px !important;
padding-left: 24px !important;
padding-right: 24px !important;
display: flex !important;
overflow-x: auto !important;
}
.gl-category-carousel::-webkit-scrollbar {
display: none !important;
}
.gl-cat-card {
scroll-snap-align: start !important;
box-shadow: var(--gl-shadow-sm) !important;
border-radius: var(--gl-radius-md) !important;
transition: var(--gl-transition) !important;
text-align: center !important;
cursor: pointer !important;
background: 0 0 !important;
border: 1px solid #0000 !important;
flex: 0 0 280px !important;
padding: 20px !important;
}
.gl-cat-card:hover {
background: var(--gl-bg-2) !important;
box-shadow: var(--gl-shadow) !important;
transform: translateY(-4px) !important;
}
.gl-cat-card img {
aspect-ratio: 1 !important;
object-fit: cover !important;
border-radius: calc(var(--gl-radius-md) - 6px) !important;
width: 100% !important;
margin-bottom: 16px !important;
}
.gl-cat-card h3 {
font-family: var(--gl-font-display) !important;
color: var(--gl-ink) !important;
margin: 0 0 8px !important;
font-size: 18px !important;
font-weight: 800 !important;
}
.gl-cat-card a {
color: var(--gl-blue) !important;
font-size: 14px !important;
font-weight: 700 !important;
}
@media (width<=768px) {
.gl-section__head {
text-align: center !important;
justify-content: center !important;
margin-bottom: 24px !important;
}
.gl-section__title {
text-align: center !important;
width: 100% !important;
}
.gl-category-carousel-wrap {
box-sizing: border-box !important;
padding: 0 48px !important;
}
.gl-category-carousel {
gap: 16px !important;
margin: 0 !important;
padding: 0 0 16px !important;
}
.gl-cat-card {
background: var(--gl-bg-2) !important;
scroll-snap-align: center !important;
border: 1px solid #0e0e1005 !important;
border-radius: 24px !important;
flex: 0 0 100% !important;
padding: 20px !important;
box-shadow: 0 8px 24px #0e0e100a !important;
}
.gl-cat-card img {
border-radius: 20px !important;
margin-bottom: 14px !important;
}
.gl-cat-card h3 {
margin: 0 0 8px !important;
font-size: 18px !important;
font-weight: 800 !important;
}
.gl-cat-card a {
font-size: 14px !important;
font-weight: 700 !important;
display: inline-block !important;
}
.gl-cat-arrow {
cursor: pointer;
z-index: 10;
width: 48px;
height: 48px;
transition: var(--gl-transition);
opacity: 0.65;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--gl-ink) !important;
box-shadow: none !important;
background: 0 0 !important;
border: none !important;
border-radius: 0 !important;
display: flex !important;
}
.gl-cat-arrow--prev {
left: 0 !important;
}
.gl-cat-arrow--next {
right: 0 !important;
}
.gl-cat-arrow:hover {
opacity: 1;
transform: translateY(-50%) scale(1.2);
color: var(--gl-blue) !important;
background: 0 0 !important;
}
.gl-cat-arrow svg {
width: 32px;
height: 32px;
}
}
.gl-split-section {
flex-direction: column;
width: 100%;
display: flex;
}
@media (width>=992px) {
.gl-split-section {
flex-direction: row;
min-height: 600px;
align-items: stretch !important;
}
}
.gl-split-section__col {
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
padding: 60px 20px;
display: flex;
position: relative;
overflow: hidden;
}
@media (width>=992px) {
.gl-split-section__col {
padding: 80px 40px;
box-sizing: border-box !important;
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
}
}
@keyframes floatY {
0% {
transform: translateY(0);
}
to {
transform: translateY(-20px);
}
}
.gl-float-y {
animation: 3s ease-in-out infinite alternate floatY;
}
.gl-categories-section {
background: var(--gl-bg);
padding: 80px 0;
}
.gl-categories-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
display: grid;
}
@media (width>=992px) {
.gl-categories-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
.gl-category-bar {
background: var(--gl-bg-2);
border: 1px solid var(--gl-line);
border-radius: var(--gl-radius-md);
transition: var(--gl-transition);
box-shadow: var(--gl-shadow-sm);
align-items: center;
padding: 16px 24px;
display: flex;
}
.gl-category-bar:hover {
box-shadow: var(--gl-shadow);
transform: translateY(-4px);
}
.gl-category-bar__img-wrap {
background: var(--gl-bg);
border: 1px solid var(--gl-line);
border-radius: 14px;
flex-shrink: 0;
width: 80px;
height: 80px;
overflow: hidden;
}
.gl-category-bar__img-wrap img {
object-fit: cover;
width: 100%;
height: 100%;
transition: var(--gl-transition);
border-radius: 0 !important;
}
.gl-category-bar:hover .gl-category-bar__img-wrap img {
transform: scale(1.06);
}
.gl-category-bar__desc {
font-family: var(--gl-font-body);
color: var(--gl-ink-soft);
flex: 1;
padding: 0 24px;
font-size: 15px;
font-weight: 500;
line-height: 1.4;
}
.gl-category-bar__btn {
border: 1px solid var(--gl-ink);
font-family: var(--gl-font-display);
color: var(--gl-ink);
transition: var(--gl-transition);
text-align: center;
background: 0 0;
border-radius: 4px;
flex-shrink: 0;
min-width: 130px;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
}
.gl-category-bar:hover .gl-category-bar__btn {
background: var(--gl-ink);
color: #fff;
}
.gl-perfume-section {
background: #05f;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.gl-perfume-carousel-wrap {
width: 100%;
position: relative;
}
.gl-perfume-carousel {
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 24px;
margin: 0;
padding: 20px 0 40px;
display: flex;
overflow-x: auto;
}
.gl-perfume-carousel::-webkit-scrollbar {
display: none;
}
.gl-perfume-item {
scroll-snap-align: start;
transition: var(--gl-transition);
flex-direction: column;
flex: 0 0 100%;
align-items: center;
display: flex;
}
@media (width>=576px) {
.gl-perfume-item {
flex: 0 0 calc(50% - 12px);
}
}
@media (width>=992px) {
.gl-perfume-item {
flex: 0 0 calc(33.333% - 16px);
}
}
.gl-perfume-card {
aspect-ratio: 1;
width: 100%;
transition: var(--gl-transition);
cursor: pointer;
background: #fff;
border-radius: 4px;
justify-content: center;
align-items: center;
display: flex;
position: relative;
overflow: hidden;
box-shadow: 0 12px 32px #0000001a;
}
.gl-perfume-card img {
object-fit: contain;
max-width: 80%;
max-height: 80%;
transition: var(--gl-transition);
border-radius: 0 !important;
}
.gl-perfume-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px #0003;
}
.gl-perfume-card:hover img {
transform: scale(1.05);
}
.gl-perfume-card__quickview {
color: var(--gl-ink);
font-family: var(--gl-font-body);
opacity: 0;
transition: var(--gl-transition);
pointer-events: none;
background: 0 0;
font-size: 13px;
font-weight: 600;
position: absolute;
bottom: 16px;
left: 50%;
transform: translate(-50%) translateY(10px);
}
.gl-perfume-card:hover .gl-perfume-card__quickview {
opacity: 1;
transform: translate(-50%) translateY(0);
}
.gl-perfume-caption {
font-family: var(--gl-font-body);
color: #fff;
text-align: center;
max-width: 90%;
transition: var(--gl-transition);
margin-top: 16px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.gl-perfume-item:hover .gl-perfume-caption {
color: var(--gl-accent);
}
.gl-perfume-arrow {
color: #fff;
cursor: pointer;
z-index: 10;
width: 48px;
height: 48px;
transition: var(--gl-transition);
opacity: 0.65;
background: 0 0;
border: none;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.gl-perfume-arrow--prev {
left: -48px;
}
.gl-perfume-arrow--next {
right: -48px;
}
@media (width<=1200px) {
.gl-perfume-arrow--prev {
left: -10px;
}
.gl-perfume-arrow--next {
right: -10px;
}
}
.gl-perfume-arrow:hover {
color: var(--gl-accent);
opacity: 1;
background: 0 0;
transform: translateY(-50%) scale(1.2);
}
.gl-perfume-arrow svg {
width: 32px;
height: 32px;
}
.gl-newsletter-section {
justify-content: center;
align-items: center;
width: 100%;
min-height: 600px;
padding: 80px 24px;
display: flex;
position: relative;
overflow: hidden;
}
.gl-newsletter-bg {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.gl-newsletter-bg video {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.gl-newsletter-bg:after {
content: "";
z-index: 2;
background: #00000026;
position: absolute;
inset: 0;
}
.gl-newsletter-card {
z-index: 5;
border-radius: var(--gl-radius-lg);
text-align: left;
background: #fff;
flex-direction: column;
width: 100%;
max-width: 500px;
padding: 44px 38px;
display: flex;
position: relative;
box-shadow: 0 24px 64px #00000059;
}
.gl-newsletter-title {
font-family: var(--gl-font-display);
color: var(--gl-ink);
letter-spacing: -0.02em;
margin: 0 0 24px;
font-size: 26px;
font-weight: 800;
line-height: 1.25;
}
.gl-newsletter-form {
flex-direction: column;
gap: 20px;
display: flex;
}
.gl-newsletter-field-group {
flex-direction: column;
gap: 8px;
display: flex;
}
.gl-newsletter-label {
font-family: var(--gl-font-body);
color: var(--gl-ink);
font-size: 12px;
font-weight: 700;
}
.gl-newsletter-input {
border: 1px solid var(--gl-line);
font-family: var(--gl-font-body);
color: var(--gl-ink);
transition: var(--gl-transition);
background: #fff;
border-radius: 8px;
outline: none;
width: 100%;
padding: 12px 16px;
font-size: 14px;
}
.gl-newsletter-input:focus {
border-color: var(--gl-ink);
box-shadow: var(--gl-shadow-sm);
}
.gl-newsletter-checkbox-group {
align-items: center;
gap: 10px;
margin-top: 4px;
margin-bottom: 8px;
display: flex;
}
.gl-newsletter-checkbox {
width: 18px;
height: 18px;
accent-color: var(--gl-ink);
cursor: pointer;
border: 1px solid var(--gl-line);
border-radius: 4px;
}
.gl-newsletter-checkbox-label {
font-family: var(--gl-font-body);
color: var(--gl-ink-soft);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
font-size: 13px;
font-weight: 500;
}
.gl-newsletter-btn {
background: var(--gl-ink);
color: #fff;
border-radius: var(--gl-radius);
width: 100%;
height: 48px;
font-family: var(--gl-font-display);
cursor: pointer;
transition: var(--gl-transition);
border: none;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 700;
display: flex;
box-shadow: 0 4px 12px #00000026;
}
.gl-newsletter-btn:hover {
background: var(--gl-accent);
color: var(--gl-accent-ink);
transform: translateY(-2px);
box-shadow: 0 8px 20px #c8f24e66;
}
.gl-brands-section {
background: #000;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.gl-brands-carousel-wrap {
width: 100%;
position: relative;
}
.gl-brands-carousel {
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 20px;
margin: 0;
padding: 20px 0;
display: flex;
overflow-x: auto;
}
.gl-brands-carousel::-webkit-scrollbar {
display: none;
}
.gl-brand-item {
scroll-snap-align: start;
flex: 0 0 calc(50% - 10px);
justify-content: center;
display: flex;
}
@media (width>=576px) {
.gl-brand-item {
flex: 0 0 calc(33.333% - 14px);
}
}
@media (width>=768px) {
.gl-brand-item {
flex: 0 0 calc(25% - 15px);
}
}
@media (width>=992px) {
.gl-brand-item {
flex: 0 0 calc(20% - 16px);
}
}
.gl-brand-card {
aspect-ratio: 16/10;
width: 100%;
transition: var(--gl-transition);
cursor: pointer;
justify-content: center;
align-items: center;
display: flex;
}
.gl-brand-card img {
object-fit: contain;
opacity: 0.75;
width: 100%;
height: 100%;
transition: var(--gl-transition);
border-radius: var(--gl-radius-md) !important;
}
.gl-brand-card:hover img {
opacity: 1;
transform: scale(1.04);
}
.gl-brands-arrow {
color: #fff;
cursor: pointer;
z-index: 10;
width: 48px;
height: 48px;
transition: var(--gl-transition);
opacity: 0.65;
background: 0 0;
border: none;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.gl-brands-arrow--prev {
left: -48px;
}
.gl-brands-arrow--next {
right: -48px;
}
@media (width<=1200px) {
.gl-brands-arrow--prev {
left: -10px;
}
.gl-brands-arrow--next {
right: -10px;
}
}
.gl-brands-arrow:hover {
color: var(--gl-accent);
opacity: 1;
background: 0 0;
transform: translateY(-50%) scale(1.2);
}
.gl-brands-arrow svg {
width: 32px;
height: 32px;
}
.gl-brand-link-btn {
color: #fff9;
font-family: var(--gl-font-body);
transition: var(--gl-transition);
cursor: pointer;
background: 0 0;
border: 1px solid #ffffff40;
border-radius: 999px;
justify-content: center;
align-items: center;
padding: 10px 28px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
}
.gl-brand-link-btn:hover {
color: #fff;
background: #ffffff0d;
border-color: #fff;
transform: translateY(-2px);
}
@media (width<=768px) {
#produtos .woocommerce {
width: 100% !important;
max-width: 320px !important;
height: 480px !important;
margin: 30px auto 0 !important;
padding: 0 !important;
display: block !important;
position: relative !important;
}
#produtos .woocommerce .products {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
position: relative !important;
}
#produtos .product {
will-change: transform, scale, opacity;
transition: none !important;
box-sizing: border-box !important;
background: #fff !important;
border: 1px solid #0e0e100f !important;
border-radius: 24px !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
height: 440px !important;
margin: 0 !important;
padding: 20px !important;
display: flex !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
box-shadow: 0 12px 32px #0e0e1014 !important;
}
#produtos .product img {
object-fit: cover !important;
border-radius: 16px !important;
width: 100% !important;
height: 190px !important;
margin-bottom: 8px !important;
}
#produtos .product .woocommerce-loop-product__title {
color: var(--gl-ink) !important;
-webkit-line-clamp: 2 !important;
text-align: left !important;
-webkit-box-orient: vertical !important;
margin: 8px 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
display: -webkit-box !important;
overflow: hidden !important;
}
#produtos .product .price {
text-align: left !important;
margin-bottom: 8px !important;
font-size: 16px !important;
display: block !important;
}
#produtos .product .button {
text-align: center !important;
border-radius: 999px !important;
width: 100% !important;
margin-top: auto !important;
padding: 10px 16px !important;
font-size: 13px !important;
}
.gl-split-section--iphone .gl-split-section__col,
.gl-split-section--samsung .gl-split-section__col {
aspect-ratio: 16/9 !important;
width: 100% !important;
height: auto !important;
min-height: auto !important;
}
.gl-split-section--iphone .gl-split-section__col:first-child,
.gl-split-section--samsung .gl-split-section__col:last-child {
padding: 0 !important;
}
.gl-split-section--iphone .gl-split-section__col:first-child video,
.gl-split-section--samsung .gl-split-section__col:last-child video {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
display: block !important;
}
.gl-split-section--iphone .gl-split-section__col:last-child,
.gl-split-section--samsung .gl-split-section__col:first-child {
box-sizing: border-box !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: 24px !important;
display: flex !important;
}
.gl-split-section--iphone .gl-parallax-wrapper {
justify-content: center !important;
align-items: center !important;
height: 80px !important;
margin-bottom: 10px !important;
display: flex !important;
}
.gl-split-section--iphone .gl-scale-wrapper {
height: 100% !important;
}
.gl-split-section--iphone .gl-float-y {
object-fit: contain !important;
width: auto !important;
max-width: 100% !important;
height: 100% !important;
}
.gl-split-section--iphone h2,
.gl-split-section--samsung h2 {
margin-top: -16px !important;
margin-bottom: 12px !important;
font-size: 28px !important;
}
.gl-split-section--iphone .gl-btn,
.gl-split-section--samsung .gl-btn {
margin-top: 4px !important;
padding: 8px 20px !important;
font-size: 13px !important;
}
}
.qs-main-container {
background: var(--gl-blue);
width: 100%;
position: relative;
}
.qs-section {
box-sizing: border-box;
background: 0 0;
justify-content: center;
align-items: center;
height: calc(100vh - 72px);
padding: 40px 24px;
display: flex;
position: sticky;
top: 72px;
}
.qs-section--1 {
z-index: 1;
}
.qs-section--2 {
z-index: 2;
}
.qs-section--3 {
z-index: 3;
}
.qs-card {
width: 100%;
max-width: 1120px;
height: 100%;
box-shadow: var(--gl-shadow-lg);
box-sizing: border-box;
transition: var(--gl-transition);
border-radius: 48px;
flex-direction: column;
justify-content: center;
padding: 80px 60px;
display: flex;
overflow-y: auto;
}
.qs-card--white {
color: var(--gl-ink);
background: #fff;
}
.qs-card--lime {
background: var(--gl-accent);
color: var(--gl-ink);
}
.qs-card__content {
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.qs-card__header {
align-items: center;
gap: 20px;
margin-bottom: 40px;
display: flex;
}
.qs-card__logo-box {
flex-shrink: 0;
justify-content: center;
align-items: center;
display: flex;
}
.qs-card__title {
font-family: var(--gl-font-display);
letter-spacing: -0.025em;
margin: 0;
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
line-height: 1.15;
}
.qs-card__body {
flex-direction: column;
gap: 24px;
display: flex;
}
.qs-card__text {
font-family: var(--gl-font-body);
text-align: left;
margin: 0;
font-size: clamp(15px, 2vw, 17px);
font-weight: 500;
line-height: 1.7;
}
.qs-card--white .qs-card__text {
color: var(--gl-ink-soft);
}
.qs-card--lime .qs-card__text {
color: #0e0e10d9;
}
@media (width<=768px) {
.qs-section {
height: calc(100vh - 60px);
padding: 20px 12px;
top: 60px;
}
.qs-card {
border-radius: 32px;
padding: 40px 24px;
}
.qs-card__header {
gap: 12px;
margin-bottom: 24px;
}
.qs-card__title {
font-size: clamp(24px, 5vw, 32px);
}
.qs-card__body {
gap: 16px;
}
}
.ct-main-container {
background: var(--gl-blue);
box-sizing: border-box;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 100px 24px;
display: flex;
}
.ct-card {
width: 100%;
max-width: 900px;
box-shadow: var(--gl-shadow-lg);
box-sizing: border-box;
transform-origin: 50%;
background: #fff;
border-radius: 48px;
padding: 80px 60px;
transition:
transform 0.1s ease-out,
border-radius 0.3s;
transform: scale(0.94);
}
.ct-card__header {
text-align: center;
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 40px;
display: flex;
}
.ct-card__title {
font-family: var(--gl-font-display);
color: var(--gl-ink);
letter-spacing: -0.03em;
margin: 0;
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
line-height: 1;
}
.ct-card__logo {
justify-content: center;
align-items: center;
display: flex;
}
.ct-form-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
width: 100%;
margin-top: 32px;
display: grid;
}
.ct-form-group {
text-align: left;
flex-direction: column;
gap: 8px;
display: flex;
}
.ct-form-group--full {
grid-column: span 2;
}
.ct-form-label {
font-family: var(--gl-font-body);
color: var(--gl-ink);
font-size: 14px;
font-weight: 600;
}
.ct-form-field {
border: 1px solid var(--gl-ink);
width: 100%;
font-family: var(--gl-font-body);
color: var(--gl-ink);
transition: var(--gl-transition);
box-sizing: border-box;
background: #fff;
border-radius: 12px;
outline: none;
padding: 14px 18px;
font-size: 15px;
}
.ct-form-field:focus {
border-color: var(--gl-blue);
box-shadow: 0 0 0 3px #2f6bff26;
}
.ct-phone-wrap {
align-items: center;
width: 100%;
display: flex;
position: relative;
}
.ct-phone-flag {
pointer-events: none;
align-items: center;
font-size: 20px;
display: flex;
position: absolute;
left: 18px;
}
.ct-phone-wrap .ct-form-field {
padding-left: 54px !important;
}
.ct-textarea {
resize: vertical;
min-height: 140px;
}
.ct-submit-btn {
width: 100%;
font-family: var(--gl-font-body);
cursor: pointer;
transition: var(--gl-transition);
text-align: center;
background: #b8d935;
margin-top: 12px;
box-shadow: 0 4px 14px #b8d93540;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 16px 32px !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.ct-submit-btn:hover {
box-shadow: var(--gl-shadow);
transform: translateY(-2px);
background: var(--gl-ink) !important;
color: #fff !important;
}
@media (width<=768px) {
.ct-main-container {
padding: 60px 12px;
}
.ct-card {
border-radius: 32px;
padding: 40px 20px;
transform: scale(0.96);
}
.ct-card__header {
margin-bottom: 28px;
}
.ct-form-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.ct-form-group--full {
grid-column: span 1;
}
}
.gl-header {
background: #000 !important;
border-bottom: 1px solid #ffffff1a !important;
}
.gl-logo__mark {
color: #fff !important;
}
.gl-logo__sub {
color: var(--gl-accent) !important;
}
.gl-nav__list a:not(.gl-megamenu__item) {
color: #fffc !important;
}
.gl-nav__list a:not(.gl-megamenu__item):hover,
.gl-nav__list a:not(.gl-megamenu__item).is-active {
color: var(--gl-accent) !important;
}
.gl-cart-link,
.gl-account-link {
color: #fff !important;
background: #121214 !important;
border-color: #ffffff26 !important;
}
.gl-cart-link.is-active,
.gl-account-link.is-active {
background: var(--gl-accent) !important;
border-color: var(--gl-accent) !important;
color: var(--gl-accent-ink) !important;
}
.gl-cart-link.is-active .gl-cart-count {
color: #fff !important;
background: #121214 !important;
}
.gl-cart-link:hover,
.gl-account-link:hover {
background: var(--gl-accent) !important;
color: var(--gl-ink) !important;
border-color: var(--gl-accent) !important;
}
.gl-cart-count {
background: var(--gl-accent) !important;
color: var(--gl-accent-ink) !important;
}
.gl-burger span {
background: #fff !important;
}
.gl-nav__item--has-megamenu {
position: static !important;
}
.gl-megamenu {
background: var(--gl-accent);
width: 100%;
color: var(--gl-ink);
z-index: 999;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none;
border-top: 1px solid #0e0e1014;
padding: 44px 24px 36px;
transition:
opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: absolute;
top: 100%;
left: 0;
transform: translateY(-10px);
box-shadow: 0 24px 64px #0003;
}
.gl-megamenu:before {
content: "";
pointer-events: auto;
background: 0 0;
width: 100%;
height: 50px;
position: absolute;
top: -50px;
left: 0;
}
.gl-nav__item--has-megamenu:hover .gl-megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.gl-megamenu__inner {
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1320px;
margin: 0 auto;
display: flex;
}
.gl-megamenu__row {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 32px;
width: 100%;
margin-bottom: 28px;
display: flex;
}
.gl-megamenu__row:nth-child(2) {
margin-bottom: 0;
}
.gl-megamenu__item,
.gl-nav__list a.gl-megamenu__item {
font-family: var(--gl-font-body);
transition: var(--gl-transition);
cursor: pointer;
text-align: center;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 105px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
display: flex;
color: #000 !important;
}
.gl-megamenu__item:hover,
.gl-nav__list a.gl-megamenu__item:hover {
transform: translateY(-3px);
color: var(--gl-blue) !important;
}
.gl-megamenu__icon-box {
width: 36px;
height: 36px;
transition: var(--gl-transition);
justify-content: center;
align-items: center;
display: flex;
color: #000 !important;
}
.gl-megamenu__item:hover .gl-megamenu__icon-box {
color: var(--gl-blue) !important;
}
.gl-megamenu__search {
justify-content: center;
width: 100%;
margin-top: 36px;
display: flex;
}
.gl-megamenu__search-inner {
background: #fff;
border-radius: 999px;
align-items: center;
gap: 12px;
width: 100%;
max-width: 600px;
padding: 12px 24px;
display: flex;
box-shadow: 0 4px 16px #0e0e1014;
}
.gl-megamenu__search-inner svg {
color: #8b8a86;
flex-shrink: 0;
}
.gl-megamenu__search-input {
width: 100%;
font-family: var(--gl-font-body);
color: var(--gl-ink);
background: 0 0;
border: none;
outline: none;
font-size: 14px;
font-weight: 500;
}
@media (width<=992px) {
.gl-megamenu {
display: none !important;
}
}
.gl-footer__card--unified-contact {
background: #1e1e21 !important;
}
.gl-footer__g-symbol {
will-change: transform;
transform: translate(160px, 160px);
opacity: 0.95 !important;
pointer-events: none !important;
width: 360px !important;
height: 360px !important;
position: absolute !important;
top: auto !important;
bottom: -70px !important;
right: -70px !important;
}
@media (width<=768px) {
.gl-footer__g-symbol {
opacity: 0.25 !important;
width: 240px !important;
height: 240px !important;
bottom: -40px !important;
right: -40px !important;
transform: none !important;
}
}
@media (width>=1025px) {
.gl-footer__card--nav {
grid-area: 1/1/3 !important;
}
.gl-footer__card--shop {
grid-area: 1/2 !important;
}
.gl-footer__card--social {
grid-area: 2/2 !important;
}
.gl-footer__card--unified-contact {
grid-area: 1/3/3 !important;
}
} .shop-grid .product .price {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 16px !important;
font-size: 18px !important;
color: var(--gl-blue) !important;
}
.shop-grid .product .price del {
font-size: 14px !important;
margin-right: 0 !important;
color: var(--gl-muted) !important;
display: inline-block !important;
line-height: 1.2 !important;
font-weight: 500 !important;
order: -1 !important;
}
.shop-grid .product .price ins {
color: var(--gl-blue) !important;
font-size: 18px !important;
font-weight: 800 !important;
text-decoration: none !important;
display: inline-block !important;
line-height: 1.2 !important;
}
.shop-grid .product .price ins * {
text-decoration: none !important;
color: var(--gl-blue) !important;
}
.shop-grid .product .price > span {
color: var(--gl-blue) !important;
font-weight: 800 !important;
font-size: 18px !important;
} .grandshop-whatsapp-btn {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
background: #ffffff !important;
color: #000000 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 20px !important;
border-radius: 999px !important;
font-family: var(--gl-font-body) !important;
font-weight: 700 !important;
font-size: 15px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
z-index: 999999 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
border: 1px solid var(--gl-line) !important;
}
.grandshop-whatsapp-btn:hover {
transform: translateY(-5px) scale(1.02) !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}
.grandshop-whatsapp-btn img {
border-radius: 0 !important;
}
.grandshop-scroll-top {
position: fixed !important;
bottom: 84px !important;
right: 24px !important;
width: 48px !important;
height: 48px !important;
background: var(--gl-ink) !important;
color: var(--gl-bg) !important;
border: none !important;
border-radius: 50% !important;
font-size: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 999999 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
transition: all 0.3s ease !important;
}
.grandshop-scroll-top:hover {
transform: translateY(-5px) !important;
background: var(--gl-accent) !important;
color: var(--gl-ink) !important;
} @media (min-width: 769px) and (max-width: 1023px) { .gl-mobile-cats-wrap {
display: block !important;
visibility: visible !important;
height: auto !important;
overflow: visible !important;
width: 100% !important;
}
.gl-mobile-cats {
display: flex !important;
justify-content: center !important;
width: 100% !important;
} .wc-block-product-filters {
display: none !important;
} .gl-sidebar-wrapper {
display: none !important;
} .woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
display: none !important;
} .wp-block-columns > .wp-block-column:has(.wc-block-product-filters) {
display: none !important;
} .wp-block-columns:has(.wc-block-product-filters) > .wp-block-column:not(:has(.wc-block-product-filters)) {
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
} .wp-block-columns {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.wp-block-column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-left: 0 !important;
} .woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
} .woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
width: 100% !important;
float: none !important;
margin: 0 0 2em 0 !important;
padding: 0 !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products.columns-2 li.product.first,
.woocommerce ul.products.columns-3 li.product.first,
.woocommerce ul.products.columns-4 li.product.first {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
grid-column: auto !important;
grid-row: auto !important;
} .wc-block-grid__products {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
.wc-block-grid__product {
grid-column: auto !important;
}
}