#clevo-cookie-consent-root,
#clevo-cookie-consent-root * {
box-sizing: border-box;
}
#clevo-cookie-consent-root {
color: #020617;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
line-height: 1.5;
}
.clevo-cookie-fab {
align-items: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 9999px;
bottom: 16px;
box-shadow: 0 10px 15px -3px rgba(2, 6, 23, .1), 0 4px 6px -4px rgba(2, 6, 23, .1);
color: #334155;
cursor: pointer;
display: inline-flex;
height: 44px;
justify-content: center;
left: 16px;
padding: 0;
position: fixed;
transition: background-color .15s ease, border-color .15s ease;
width: 44px;
z-index: 80;
}
.clevo-cookie-fab:hover,
.clevo-cookie-fab:focus-visible {
background: #f8fafc;
border-color: #cbd5e1;
}
.clevo-cookie-panel {
background: #fff;
border: 1px solid #a7f3d0;
border-radius: 8px;
bottom: 16px;
box-shadow: 0 25px 50px -12px rgba(2, 6, 23, .2);
left: 16px;
max-width: 576px;
position: fixed;
right: auto;
width: calc(100vw - 32px);
z-index: 90;
}
.clevo-cookie-panel-inner {
padding: 16px;
}
.clevo-cookie-main {
display: grid;
gap: 16px;
}
.clevo-cookie-intro {
display: flex;
gap: 12px;
}
.clevo-cookie-icon {
align-items: center;
background: #ecfdf5;
border-radius: 6px;
color: #047857;
display: none;
flex: 0 0 auto;
height: 40px;
justify-content: center;
width: 40px;
}
.clevo-cookie-icon-svg {
height: 18px;
width: 18px;
}
.clevo-cookie-icon .clevo-cookie-icon-svg {
height: 20px;
width: 20px;
}
.clevo-cookie-title {
color: #020617;
font-size: 14px;
font-weight: 600;
line-height: 20px;
margin: 0;
}
.clevo-cookie-copy {
color: #475569;
font-size: 14px;
line-height: 24px;
margin: 4px 0 0;
max-width: 768px;
}
.clevo-cookie-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.clevo-cookie-button {
align-items: center;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
flex: 1 1 0;
font-family: inherit;
font-size: 16px;
font-weight: 400;
gap: 8px;
justify-content: center;
line-height: 20px;
min-height: 40px;
padding: 0 12px;
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
white-space: nowrap;
}
.clevo-cookie-button-primary {
background: #047857;
border: 0;
color: #fff;
}
.clevo-cookie-button-primary:hover,
.clevo-cookie-button-primary:focus-visible {
background: #065f46;
color: #fff;
}
.clevo-cookie-button-secondary {
background: #fff;
border: 1px solid #cbd5e1;
color: #020617;
}
.clevo-cookie-button-secondary:hover,
.clevo-cookie-button-secondary:focus-visible {
background: #f8fafc;
color: #020617;
}
.clevo-cookie-details {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-top: 16px;
padding: 16px;
}
.clevo-cookie-options {
display: grid;
gap: 12px;
}
.clevo-cookie-option {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
display: block;
margin: 0;
padding: 16px;
}
.clevo-cookie-option-head {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
.clevo-cookie-option-title {
color: #020617;
font-weight: 600;
}
.clevo-cookie-option input {
accent-color: #047857;
height: 16px;
margin: 0;
width: 16px;
}
.clevo-cookie-option-copy {
color: #475569;
display: block;
font-size: 14px;
line-height: 24px;
margin-top: 8px;
}
.clevo-cookie-detail-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
@media (min-width: 640px) {
.clevo-cookie-panel {
width: 576px;
}
.clevo-cookie-panel-inner {
padding: 20px;
}
.clevo-cookie-icon {
display: flex;
}
.clevo-cookie-actions {
justify-content: flex-end;
}
.clevo-cookie-button {
flex: 0 0 auto;
}
.clevo-cookie-detail-actions {
flex-direction: row;
justify-content: flex-end;
}
}
@media (min-width: 768px) {
.clevo-cookie-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/inter/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/outfit/outfit-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/outfit/outfit-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(//clevo.dk/wp-content/themes/clevo/assets/fonts/outfit/outfit-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}html {
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}.clevo-footer {
--cf-brand: #2563eb; --cf-brand-dark: #1e40af;
--cf-text: #94a3b8; --cf-text-heading: #f1f5f9; --cf-bg: #0f172a; --cf-bg-top: #1e293b; --cf-border: rgba(255, 255, 255, 0.08);
--cf-radius: 10px;
--cf-container: 1340px;
--cf-font: 'Inter', system-ui, -apple-system, sans-serif;
--cf-font-heading: 'Outfit', 'Inter', sans-serif;
} .clevo-footer *,
.clevo-footer *::before,
.clevo-footer *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clevo-footer {
font-family: var(--cf-font);
font-weight: 400;
letter-spacing: 0;
background-color: var(--cf-bg);
color: var(--cf-text);
font-size: 0.9rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
.clevo-footer a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
} .clevo-footer a:focus:not(:focus-visible),
.clevo-footer button:focus:not(:focus-visible) {
outline: none;
}
.clevo-footer a:hover {
color: var(--cf-text-heading);
} .cf-container {
width: 100%;
max-width: var(--cf-container);
margin-inline: auto;
padding-inline: 1.5rem;
} .cf-badges-bar {
background-color: var(--cf-bg-top);
border-bottom: 1px solid var(--cf-border);
padding: 1.25rem 0;
}
.cf-badges-bar .cf-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem 5rem;
}
.cf-badge {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--cf-text);
font-weight: 500;
}
.cf-badge__icon {
color: var(--cf-brand);
display: flex;
flex-shrink: 0;
} .cf-main {
padding: 3.5rem 0 2.5rem;
}
.cf-main__inner {
display: grid;
gap: 2.5rem; grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.cf-main__inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.cf-main__inner {
grid-template-columns: 2fr repeat(3, 1fr);
align-items: start;
}
} .cf-brand {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cf-brand__logo {
display: inline-flex;
color: var(--cf-text-heading);
}
.cf-brand__wordmark {
font-family: var(--cf-font-heading);
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--cf-text-heading);
}
.cf-brand__tagline {
font-size: 0.875rem;
color: var(--cf-text);
max-width: 240px;
line-height: 1.6;
} .cf-social {
display: flex;
gap: 0.75rem;
margin-top: 0.25rem;
}
.cf-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid var(--cf-border);
color: var(--cf-text);
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.cf-social__link:hover {
background-color: var(--cf-brand);
border-color: var(--cf-brand);
color: #fff;
} .cf-col {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cf-col__heading {
font-family: var(--cf-font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cf-text-heading);
}
.cf-col__info {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--cf-text);
}
.cf-col__info-line {
margin: 0;
line-height: 1.5;
}
.cf-col__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cf-col__link {
color: var(--cf-text);
font-size: 0.9rem;
display: inline-block;
position: relative;
padding-bottom: 1px;
}
.cf-col__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: var(--cf-brand);
transition: width 0.25s ease;
}
.cf-col__link:hover {
color: var(--cf-text-heading);
}
.cf-col__link:hover::after {
width: 100%;
} .cf-tp {
margin-top: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cf-tp__stars {
display: flex;
gap: 3px;
}
.cf-tp__star {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cf-tp__star svg {
width: 26px;
height: 26px;
fill: #00b67a;
display: block;
} .cf-tp__star--half svg {
fill: url(#cf-half-grad);
}
.cf-tp__label {
font-size: 0.78rem;
color: var(--cf-text-muted);
margin: 0;
line-height: 1.4;
}
.cf-tp__label strong {
color: var(--cf-text);
font-weight: 600;
} .cf-bottom {
border-top: 1px solid var(--cf-border);
padding: 1.25rem 0;
}
.cf-bottom__inner {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-items: flex-end;
text-align: right;
}
@media (min-width: 600px) {
.cf-bottom__inner {
flex-direction: row;
justify-content: flex-end;
text-align: right;
}
}
.cf-bottom__copy,
.cf-bottom__credit {
font-size: 0.8rem;
color: var(--cf-text);
line-height: 1.5;
}:root { --color-primary: hsl(210, 100%, 12%);
--color-primary-rgb: 0, 31, 61;
--color-primary-light: hsl(210, 60%, 25%);
--color-primary-dark: hsl(210, 100%, 8%);
--color-accent: hsl(38, 100%, 50%);
--color-accent-rgb: 255, 165, 0;
--color-accent-light: hsl(38, 100%, 60%);
--color-accent-dark: hsl(38, 100%, 40%);
--color-background: hsl(0, 0%, 98%);
--color-surface: #ffffff;
--color-text: hsl(210, 15%, 20%);
--color-text-muted: hsl(210, 10%, 42%);
--color-text-light: hsl(210, 8%, 70%);
--color-border: hsl(210, 10%, 90%);
--color-success: hsl(142, 76%, 36%);
--color-success-rgb: 22, 163, 74;
--color-error: hsl(0, 72%, 51%);
--color-error-rgb: 220, 38, 38; --spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem; --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border-width: 0;
border-style: solid;
border-color: var(--color-border);
}
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family-sans);
color: var(--color-text);
background-color: var(--color-background);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv11', 'ss01';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
button {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
}
img,
video {
max-width: 100%;
height: auto;
} .container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem;
padding-right: 2rem;
}
} .max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-xs {
max-width: 20rem;
}
.section {
padding-top: 4rem;
padding-bottom: 4rem;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.section {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media (min-width: 1024px) {
.section {
padding-top: 6rem;
padding-bottom: 6rem;
}
}
.section-heading {
font-size: 2.25rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 1rem;
line-height: 1.1;
letter-spacing: -0.025em;
}
@media (min-width: 768px) {
.section-heading {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.section-heading {
font-size: 3.75rem;
}
}
.text-muted {
color: var(--color-text-muted);
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.text-primary {
color: var(--color-primary);
}
.text-accent {
color: hsl(32, 100%, 36%);
}
.text-success {
color: var(--color-success);
}
.text-error {
color: var(--color-error);
}
.text-white {
color: white;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.flex-shrink-0 {
flex-shrink: 0;
} .text-xs {
font-size: 0.75rem;
}
.text-sm {
font-size: 0.875rem;
}
.text-base {
font-size: 1rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
@media (min-width: 1024px) {
.lg-text-4xl {
font-size: 2.25rem; line-height: 2.5rem;
}
}
.leading-relaxed {
line-height: 1.625;
} .space-y-2> :not([hidden])~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4> :not([hidden])~ :not([hidden]) {
margin-top: 1rem;
}
.space-y-6> :not([hidden])~ :not([hidden]) {
margin-top: 1.5rem;
}
.w-full {
width: 100%;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
@media (min-width: 1024px) {
.mb-16 {
margin-bottom: 4rem;
}
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
text-decoration: none;
font-size: 1rem;
border: 1px solid transparent;
outline: none;
}
.btn-primary {
background-color: var(--color-primary);
color: white;
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
}
.btn-accent {
background-color: var(--color-accent);
color: var(--color-primary);
font-weight: 600;
}
.btn-accent:hover {
background-color: var(--color-accent-dark);
}
.btn-secondary {
background-color: white;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-secondary:hover {
background-color: #f0f9ff;
} .icon-xs {
width: 1rem;
height: 1rem;
}
.icon-sm {
width: 1.25rem;
height: 1.25rem;
}
.icon-md {
width: 1.5rem;
height: 1.5rem;
}
.icon-lg {
width: 2rem;
height: 2rem;
}
.icon-check {
width: 1.5rem;
height: 1.5rem;
color: var(--color-accent);
flex-shrink: 0;
} .grid {
display: grid;
gap: 1.5rem;
} @media (min-width: 640px) {
.sm-grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-5 {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 768px) {
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.md-grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.md-grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.lg-grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.lg-grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.lg-grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
} .gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-12 {
gap: 3rem;
} .card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
} .input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
margin-top: 0.25rem;
font-size: 1rem;
font-family: inherit;
transition: box-shadow 0.2s, border-color 0.2s;
}
.input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-light);
}
.label {
display: block;
font-weight: 500;
color: var(--color-text);
margin-bottom: 0.5rem;
font-size: 0.875rem;
} table {
width: 100%;
border-collapse: collapse;
}
td {
vertical-align: top;
}
.divide-y>tr {
border-top: 1px solid var(--color-border);
}
.divide-y>tr:first-child {
border-top: none;
} .hero-section {
background: linear-gradient(135deg, hsl(210, 100%, 12%) 0%, hsl(210, 60%, 25%) 50%, hsl(210, 100%, 8%) 100%);
color: white;
min-height: 85vh;
display: flex;
align-items: center;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 1024px) {
.hero-section {
min-height: 90vh;
padding-top: 0;
padding-bottom: 0;
} }
.hero-heading {
font-size: 2.25rem;
line-height: 1; font-weight: 700;
margin-bottom: 0px; color: white;
letter-spacing: -0.025em;
}
@media(min-width: 768px) {
.hero-heading {
font-size: 3rem;
}
}
@media(min-width: 1024px) {
.hero-heading {
font-size: 3.75rem;
}
}
.hero-subheading {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
line-height: 1.625;
}
@media(min-width: 768px) {
.hero-subheading {
font-size: 1.5rem;
}
}
.hero-benefits {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.hero-benefit-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.95);
}
.hero-cta {
margin-bottom: 2rem;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 0.875rem;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.trust-item svg {
color: var(--color-accent);
}
.trust-item span {
color: rgba(255, 255, 255, 0.9);
} .main-image-wrapper {
position: relative;
aspect-ratio: 1/1;
background-color: #f3f4f6;
border: 2px solid var(--color-border);
border-radius: 1rem;
overflow: hidden;
cursor: zoom-in;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hover-overlay {
position: absolute;
inset: 0;
background-color: transparent;
transition: background-color 0.2s;
}
.main-image-wrapper:hover .hover-overlay {
background-color: rgba(0, 0, 0, 0.02);
}
.thumbnails-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
margin-top: 1rem;
}
.thumbnail-btn {
aspect-ratio: 1/1;
border: 2px solid var(--color-border);
border-radius: 0.5rem;
cursor: pointer;
overflow: hidden;
padding: 0;
background: none;
transition: all 0.2s;
}
.thumbnail-btn.active {
border-color: var(--color-primary);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.thumbnail-placeholder {
width: 100%;
height: 100%;
background-color: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.9);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 1rem;
color: white;
font-size: 2.5rem;
background: none;
border: none;
cursor: pointer;
}
.lightbox-content {
max-width: 80vh;
width: 100%;
aspect-ratio: 1/1;
background-color: #1f2937;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
} .faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: 0.5rem;
overflow: hidden;
background-color: white;
}
.faq-question {
padding: 1rem 1.5rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
background-color: white;
transition: background-color 0.2s;
}
.faq-question:hover {
background-color: #f9fafb;
}
.faq-question::-webkit-details-marker {
display: none;
}
details[open] .faq-question svg {
transform: rotate(180deg);
}
.faq-answer {
padding: 1rem 1.5rem;
background-color: #f9fafb;
border-top: 1px solid var(--color-border);
color: var(--color-text-muted);
} .sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
background-color: white;
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
padding: 1rem 0;
}
.sticky-cta.visible {
transform: translateY(0);
}
.sticky-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.sticky-product {
display: flex;
align-items: center;
gap: 1rem;
}
.sticky-thumb {
width: 3.5rem;
height: 3.5rem;
border-radius: 0.5rem;
object-fit: cover;
background-color: #f1f5f9;
}
.sticky-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.sticky-title {
font-weight: 700;
color: var(--color-primary);
font-size: 0.85rem;
line-height: 1.2;
display: block;
}
@media (min-width: 640px) {
.sticky-title {
font-size: 0.95rem;
}
}
.sticky-price {
font-size: 0.875rem;
color: var(--color-text-muted);
} .landing-page-wrapper {
font-family: 'Inter', sans-serif;
}
.lp1-hero-image {
width: 100%;
height: auto;
border-radius: 1rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.lp1-social-proof-section {
background: linear-gradient(to bottom right, rgba(var(--color-primary-rgb), 0.05), rgba(var(--color-accent-rgb), 0.05));
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.lp1-stars-row {
display: inline-flex;
align-items: center;
gap: 0.15rem;
flex-wrap: nowrap;
}
.lp1-stars-row svg {
flex: 0 0 auto;
}
.lp1-stars-row-review {
margin-bottom: 1rem;
}
.lp1-rating-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.lp1-rating-score {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
}
.lp1-gallery-main-image,
.lp1-thumbnail-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.lp1-product-title {
line-height: 1.1;
}
.lp1-price-block {
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.lp1-divider-top {
border-top: 1px solid var(--color-border);
padding-top: 1.5rem;
}
.lp1-cta-block {
margin-top: 2rem;
}
.lp1-btn-wide {
padding: 0.75rem 2rem;
}
.lp1-btn-icon-gap {
margin-left: 0.5rem;
}
.lp1-price-del {
color: #6b7280;
font-size: 0.8em;
margin-left: 5px;
}
.btn .lp1-price-del {
color: currentColor;
opacity: 0.95;
}
.lp1-features-section {
background-color: #f8fafc;
}
.lp1-feature-image-wrap {
max-width: 500px;
margin: 0 auto;
}
.lp1-feature-image {
width: 100%;
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.lp1-bestseller-badge {
background-color: var(--color-accent);
border-bottom-right-radius: 12px;
z-index: 10;
font-size: 1rem;
letter-spacing: 0.05em;
color: #000 !important;
}
.lp1-bestseller-icon {
width: 1.25rem;
height: 1.25rem;
}
.lp1-product-image {
max-height: 400px;
}
.lp1-stock-badge {
background-color: #dcfce7;
color: #166534;
}
.lp1-benefit-check-circle {
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
background-color: #dcfce7;
}
.lp1-benefit-check-icon {
width: 0.75rem;
height: 0.75rem;
color: #166534;
}
.lp1-policy-grid {
max-width: 64rem;
margin: 0 auto;
}
.lp1-policy-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.lp1-policy-icon-wrap {
width: 3rem;
height: 3rem;
border-radius: 9999px;
background-color: rgba(var(--color-primary-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lp1-policy-title {
font-size: 1.25rem;
}
.lp1-policy-text {
line-height: 1.6;
}
.lp1-sticky-action {
flex-shrink: 0;
}
.lp1-sticky-action-btn {
padding: 0.75rem 2rem;
font-weight: 600;
box-shadow: 0 4px 6px rgba(var(--color-accent-rgb), 0.4);
} .mask-lp1-wrapper .mask-hero-section {
min-height: auto;
padding-top: clamp(2.25rem, 4vw, 4rem);
padding-bottom: clamp(2.25rem, 4vw, 4rem);
background: linear-gradient(180deg, #12395f 0%, #0e3152 100%);
}
.mask-lp1-wrapper .hero-decoration-top,
.mask-lp1-wrapper .hero-decoration-bottom,
.mask-lp1-wrapper .mask-hero-visual-top {
display: none;
}
.mask-lp1-wrapper .mask-hero-grid {
gap: clamp(2rem, 4vw, 4rem);
}
.mask-lp1-wrapper .mask-hero-content {
max-width: 34rem;
}
.mask-lp1-wrapper .mask-hero-kicker {
display: block;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mask-lp1-wrapper .mask-hero-heading {
max-width: 12ch;
margin-bottom: 0.95rem;
font-size: clamp(2.6rem, 4vw, 4.3rem);
line-height: 0.96;
letter-spacing: -0.045em;
text-wrap: balance;
}
.mask-lp1-wrapper .mask-hero-subheading {
max-width: 31rem;
margin-bottom: 1.45rem;
color: rgba(255, 255, 255, 0.84);
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.55;
}
.mask-lp1-wrapper .mask-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem 1.5rem;
align-items: flex-end;
margin-bottom: 1rem;
}
.mask-lp1-wrapper .mask-hero-price-card {
margin: 0;
padding: 0;
border: none;
background: none;
backdrop-filter: none;
}
.mask-lp1-wrapper .mask-hero-price-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
}
.mask-lp1-wrapper .mask-hero-price-current {
color: #ffffff;
font-size: clamp(2.2rem, 3.5vw, 3rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
}
.mask-lp1-wrapper .mask-hero-price-old {
color: rgba(255, 255, 255, 0.55);
font-size: 1rem;
font-weight: 600;
text-decoration: line-through;
}
.mask-lp1-wrapper .mask-hero-price-meta {
margin-top: 0.35rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.9rem;
line-height: 1.4;
}
.mask-lp1-wrapper .mask-hero-cta {
margin: 0;
}
.mask-lp1-wrapper .mask-hero-cta-btn {
min-width: 15.5rem;
padding: 0.95rem 1.35rem;
border-radius: 0.9rem;
font-weight: 700;
box-shadow: 0 10px 24px rgba(255, 176, 31, 0.16);
}
.mask-lp1-wrapper .mask-hero-trust {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
font-size: 0.92rem;
}
.mask-lp1-wrapper .mask-hero-trust-item {
width: 100%;
padding: 0;
border: none;
background: none;
}
.mask-lp1-wrapper .mask-hero-trust-item svg {
color: #ffb01f;
}
.mask-lp1-wrapper .mask-hero-trust-item span {
color: rgba(255, 255, 255, 0.82);
}
.mask-lp1-wrapper .mask-hero-image-container {
width: 100%;
max-width: 28rem;
margin: 0 auto;
}
.mask-lp1-wrapper .mask-hero-image-wrapper {
padding: 0.9rem;
border-radius: 1.4rem;
background: #eef2f6;
box-shadow: 0 18px 44px rgba(3, 14, 26, 0.18);
}
.mask-lp1-wrapper .mask-hero-image {
display: block;
width: 100%;
margin: 0 auto;
border-radius: 1rem;
background: #f8fafc;
box-shadow: none;
}
.mask-lp1-wrapper .mask-review-section {
padding: 4rem 0;
background: #f8fafc;
}
.mask-lp1-wrapper .mask-review-container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
}
.mask-lp1-wrapper .mask-review-heading,
.mask-lp1-wrapper .mask-review-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
letter-spacing: -0.025em;
color: #0f172a;
}
.mask-lp1-wrapper .mask-review-heading {
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: 0.55rem;
}
.mask-lp1-wrapper .mask-review-subheading {
text-align: left;
margin-bottom: 0.45rem;
color: #475569;
font-size: 1.125rem;
}
.mask-lp1-wrapper .mask-review-carousel-wrap {
position: relative;
max-width: none;
margin: 0;
padding: 0;
}
.mask-lp1-wrapper .mask-review-nav {
display: flex;
justify-content: flex-end;
gap: 10px;
position: absolute;
top: -3.05rem;
right: 0;
margin: 0;
padding-right: 0;
z-index: 2;
}
.mask-lp1-wrapper .mask-review-nav-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #e2e8f0;
background: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.mask-lp1-wrapper .mask-review-nav-btn:hover {
background: #f8fafc;
border-color: #2563eb;
}
.mask-lp1-wrapper .mask-review-carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding-top: 0.2rem;
padding-bottom: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mask-lp1-wrapper .mask-review-carousel::-webkit-scrollbar {
display: none;
}
.mask-lp1-wrapper .mask-review-card {
flex: 0 0 300px;
scroll-snap-align: start;
background: white;
padding: 24px;
border-radius: 16px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
}
.mask-lp1-wrapper .mask-review-stars {
display: inline-flex;
gap: 0.15rem;
margin-bottom: 0.25rem;
line-height: 1;
}
.mask-lp1-wrapper .mask-review-title {
margin: 10px 0 5px;
}
.mask-lp1-wrapper .mask-review-card .mask-review-text {
font-style: italic;
font-size: 0.95rem;
color: #475569;
}
.mask-lp1-wrapper .mask-review-author {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 15px;
}
.mask-lp1-wrapper .mask-review-avatar {
width: 40px;
height: 40px;
background: #f8fafc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #2563eb;
font-size: 1.1rem;
}
.mask-lp1-wrapper .mask-review-verified {
font-size: 0.8rem;
color: #64748b;
}
@media (max-width: 768px) {
.mask-lp1-wrapper .mask-review-card {
flex: 0 0 85%;
}
.mask-lp1-wrapper .mask-review-nav {
top: -2.8rem;
}
}
@media (min-width: 1024px) {
.mask-lp1-wrapper .mask-hero-image-container {
margin-left: auto;
}
}
@media (max-width: 1023.98px) {
.mask-lp1-wrapper .mask-hero-content {
max-width: none;
}
.mask-lp1-wrapper .mask-hero-image-container {
max-width: 25rem;
}
}
@media (max-width: 767.98px) {
.mask-lp1-wrapper .mask-hero-section {
padding-top: 2rem;
padding-bottom: 2rem;
}
.mask-lp1-wrapper .mask-hero-heading {
max-width: 10.5ch;
font-size: 2.4rem;
}
.mask-lp1-wrapper .mask-hero-subheading {
margin-bottom: 1.1rem;
}
.mask-lp1-wrapper .mask-hero-actions {
gap: 0.85rem;
align-items: flex-start;
}
.mask-lp1-wrapper .mask-hero-cta-btn {
width: 100%;
min-width: 0;
}
.mask-lp1-wrapper .mask-hero-trust {
gap: 0.45rem;
}
}