/* ============================================================
EcomWall - global tokens
============================================================ */
:root {
/* brand */
--grad-hero: linear-gradient(83.66deg, rgb(132, 18, 167) 0%, rgb(226, 27, 105) 50%, rgb(255, 77, 0) 100%);
--color-ink: #14080f;
--color-white: #ffffff;
--color-scroll: #bd54c9;
/* fonts */
--font-display: var(--font-outfit, "Outfit"), system-ui, sans-serif;
--font-body: var(--font-inter, "Inter"), system-ui, sans-serif;
/* layout */
--gutter: 96px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--color-white);
background: #0f0a14;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Safety net so a stray fixed-width child can never force a horizontal
scrollbar on tablet/mobile (clip avoids creating a scroll container the
way overflow:hidden would). */
overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: 1080px;
overflow: hidden;
background: var(--grad-hero);
}
/* ---------- navbar ---------- */
.navbar {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 110px var(--gutter) 0;
}
.navbar__left {
display: flex;
align-items: center;
gap: 32px;
}
.navbar__logo img { width: 154px; height: 28px; }
.product-pill {
display: inline-flex;
align-items: center;
gap: 24px;
padding: 10px 24px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
background: transparent;
color: var(--color-white);
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 24px;
cursor: pointer;
}
.product-pill__caret { width: 12px; height: 12px; }
.navbar__right {
display: flex;
align-items: center;
gap: 32px;
}
.navbar__links {
display: flex;
align-items: center;
gap: 32px;
font-family: var(--font-display);
font-size: 18px;
opacity: 0.8;
}
.navbar__links a:hover { opacity: 0.7; }
.navbar__divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.25);
}
.navbar__about {
font-family: var(--font-display);
font-size: 18px;
opacity: 0.8;
}
.navbar__about:hover { opacity: 1; }
/* ---------- left text column ---------- */
.hero__content {
position: absolute;
left: var(--gutter);
top: 252px;
width: 840px;
max-width: calc(100% - var(--gutter) * 2);
display: flex;
flex-direction: column;
gap: 64px;
}
.hero__copy { display: flex; flex-direction: column; gap: 32px; }
.hero__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 64px;
line-height: 1.05;
letter-spacing: -1.28px;
}
.hero__subtitle {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 24px;
line-height: 40px;
}
.hero__actions { display: flex; gap: 32px; flex-wrap: wrap; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
font-family: var(--font-display);
font-size: 18px;
line-height: 24px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid {
background: #000;
color: var(--color-white);
border-radius: 6px;
font-weight: 600;
}
.btn--solid:hover { opacity: 0.88; }
.btn--ghost {
background: transparent;
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
font-weight: 400;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.hero__tagline {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 40px;
color: rgba(255, 255, 255, 0.75);
}
/* ---------- scroll hint ---------- */
.hero__scroll {
position: absolute;
left: 96px;
top: 944px;
display: inline-flex;
align-items: center;
gap: 14px;
color: var(--color-scroll);
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
}
.hero__scroll img { width: 18px; height: 40px; }
/* ---------- right illustration cluster ----------
Anchored to the right edge; design box spans x:1081→1920 (839px)
within the 1080px-tall frame. Children are positioned relative to
that box origin so the cluster stays glued to the right edge. */
.hero__art {
position: absolute;
top: 0;
right: 0;
width: 839px;
height: 1080px;
pointer-events: none;
}
.hero__art .art { position: absolute; }
/* frosted card clusters (vector shapes carry their own translucency) */
.art--cards-top { left: 335px; top: 218px; width: 408px; height: 412px; }
.art--cards-bottom { left: 0; top: 661px; width: 208px; height: 219px; }
/* dark code panel */
.art--code {
left: 100px; top: 334px;
width: 441px; height: 441px;
border-radius: 16px;
overflow: hidden;
box-shadow: inset 0 0 20px 0 #000;
}
.art--code img { width: 100%; height: 100%; object-fit: cover; }
/* single translucent gradient card */
.art--card-glass {
left: 451px; top: 683px;
width: 143px; height: 143px;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(102,102,102,0) 100%),
rgba(255, 255, 255, 0.15);
}
/* floating icons */
.art--icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.art--finger { left: 68px; top: 305px; width: 101px; height: 101px; }
.art--adduser { left: 628px; top: 269px; width: 64px; height: 64px; }
.art--unlock { left: 423px; top: 438px; width: 96px; height: 96px; }
.art--unlock2 { left: 423px; top: 438px; width: 96px; height: 96px; }
.art--bug { left: 31px; top: 691px; width: 32px; height: 32px; }
.art--creds { left: 117px; top: 784px; width: 48px; height: 48px; }
.art--cyber { left: 491px; top: 723px; width: 64px; height: 64px; }
/* ============================================================
PROBLEM (light stats band)
============================================================ */
.problem {
position: relative;
display: flex;
flex-direction: column;
gap: 48px;
padding: 96px var(--gutter) 192px;
/* Faint dotted-map texture baked directly into the section background
(a translucent #ededed veil over the texture image). It must live on
the section's own paint layer - not a negative-z or blend-mode pseudo -
so the frosted .stat cards have real content in their backdrop to blur. */
background-color: #ededed;
background-image:
linear-gradient(rgba(237, 237, 237, 0.82), rgba(237, 237, 237, 0.82)),
url("assets/problem-texture.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(226, 226, 226, 0.25);
}
.problem__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.02em;
color: rgba(0, 0, 0, 0.35);
}
.problem__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
}
.stat {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
min-height: 348px;
padding: 48px;
border-radius: 16px;
/* frosted glass: translucent white fill + blurred section backdrop */
background: rgba(255, 255, 255, 0.45);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.stat__top { display: flex; flex-direction: column; gap: 16px; }
.stat__num {
font-family: var(--font-display);
font-weight: 500;
font-size: 48px;
line-height: 1;
background: linear-gradient(220deg, rgb(255, 0, 0) 13%, rgb(162, 32, 205) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat__desc {
margin: 0;
font-family: var(--font-body);
font-size: 20px;
line-height: 32px;
color: rgba(0, 0, 0, 0.8);
}
.stat__source {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 24px;
color: rgba(0, 0, 0, 0.5);
}
/* ============================================================
PRODUCT (dashboard showcase)
============================================================ */
.product {
padding: 192px var(--gutter) 96px;
background: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
.product__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
padding: 48px;
border-radius: 16px;
background: #f0f0f0;
overflow: hidden;
}
.product__info {
display: flex;
flex-direction: column;
gap: 56px;
width: 732px;
flex-shrink: 0;
}
.product__intro { display: flex; flex-direction: column; gap: 32px; }
.product__heading { display: flex; flex-direction: column; gap: 24px; }
.product__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.product__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 48px;
letter-spacing: -0.48px;
line-height: 1.1;
background: linear-gradient(191deg, rgb(255, 0, 0) 13%, rgb(162, 32, 205) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.product__lead {
margin: 0;
max-width: 707px;
font-family: var(--font-body);
font-size: 22px;
line-height: 40px;
color: #000;
}
/* feature list */
.feature-list { display: flex; flex-direction: column; }
.feature {
padding: 24px 48px 24px 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.feature--last { border-bottom: 0; }
.feature--active {
position: relative;
}
/* gradient accent bar - sits at the row's left edge, sized to the text block
only (the 24px top/bottom row padding leaves the gap above & below) */
.feature--active::before {
content: "";
position: absolute;
left: 0;
top: 24px;
bottom: 24px;
width: 4px;
background: linear-gradient(230deg, #f00 -13.38%, #a220cd 100%);
}
.feature__title {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: normal;
color: rgba(0, 0, 0, 0.75);
}
.feature--active .feature__title { font-weight: 700; color: #000; }
.feature--muted .feature__title { color: rgba(0, 0, 0, 0.65); }
.feature__desc {
margin: 6px 0 0;
font-family: var(--font-body);
font-size: 18px;
line-height: 28px;
color: #000;
}
/* dashboard screenshot - bleeds off the card, rounded left corners only */
.product__shot {
position: relative;
flex: 1 0 0;
min-width: 0;
align-self: center; /* center against the taller text column, per Figma */
height: 638px;
border-radius: 24px 0 0 24px;
overflow: hidden;
}
.product__shot img {
position: absolute;
top: 0;
left: 0;
width: 166.84%;
height: 173.11%;
max-width: none;
}
/* ============================================================
HOW IT WORKS (5-step flow)
============================================================ */
.how {
display: flex;
flex-direction: column;
gap: 64px;
padding: 96px var(--gutter) 0;
background: #fff;
border-bottom: 1px solid #eaeaea;
}
.how__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.how__steps {
display: flex;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.how-step {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 32px;
padding: 0 48px 192px;
border-left: 1px solid #eaeaea;
}
.how-step__icon { width: 56px; height: 56px; }
.how-step__text { display: flex; flex-direction: column; gap: 16px; }
.how-step__title {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: normal;
color: #000;
}
.how-step__desc {
margin: 0;
font-family: var(--font-body);
font-size: 20px;
line-height: 32px;
color: rgba(0, 0, 0, 0.8);
}
/* ============================================================
USE CASES (horizontal carousel)
============================================================ */
.usecases {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 64px;
padding: 192px 0 192px var(--gutter);
background: #fff;
overflow: hidden;
}
.usecases::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("assets/usecases-texture.png") center / cover no-repeat;
opacity: 0.2;
pointer-events: none;
}
.usecases__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
padding-right: var(--gutter);
}
.usecases__intro { display: flex; flex-direction: column; gap: 24px; }
.usecases__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.usecases__title {
margin: 0;
max-width: 810px;
font-family: var(--font-display);
font-weight: 600;
font-size: 48px;
letter-spacing: -0.48px;
line-height: 1.1;
background: linear-gradient(190deg, rgb(255, 0, 0) 13%, rgb(162, 32, 205) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.usecases__nav { display: flex; gap: 16px; padding: 16px 0; }
.uc-arrow {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 2px solid #eaeaea;
border-radius: 50px;
background: transparent;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.uc-arrow img { width: 9px; height: 16px; }
.uc-arrow--active { border-color: red; }
.uc-arrow--active img { transform: rotate(180deg); } /* flip chevron to point right */
.uc-arrow:hover { background: rgba(0, 0, 0, 0.03); }
/* track */
.usecases__track {
display: flex;
gap: 48px;
overflow-x: auto;
scroll-behavior: smooth;
padding-right: var(--gutter);
scrollbar-width: none; /* Firefox */
}
.usecases__track::-webkit-scrollbar { display: none; } /* WebKit */
.uc-card {
flex: 0 0 396px;
height: 280px;
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px;
border: 1px solid rgba(156, 156, 156, 0.25);
border-radius: 16px;
background: #f8f8f8;
}
.uc-card--ghost { background: rgba(248, 248, 248, 0.2); }
.uc-card__icon { width: 56px; height: 56px; }
.uc-card__desc {
margin: 0;
font-family: var(--font-body);
font-size: 20px;
line-height: 32px;
color: rgba(0, 0, 0, 0.8);
}
/* ============================ EARLY ============================ */
.early {
padding: 96px var(--gutter);
background: var(--color-white);
}
.early__card {
width: 100%;
border-radius: 16px;
}
/* gradient top block */
.early__top {
position: relative;
padding: 48px;
border-radius: 16px 16px 0 0;
background: linear-gradient(194.21deg, rgb(255, 0, 0) 13.38%, rgb(162, 32, 205) 100%);
overflow: hidden;
}
.early__texture {
position: absolute;
inset: 0;
mix-blend-mode: multiply;
opacity: 0.15;
pointer-events: none;
}
.early__texture img {
position: absolute;
left: 40.3%;
top: -68.3%;
width: 93.78%;
height: 251.12%;
max-width: none;
}
.early__row {
position: relative;
display: flex;
align-items: center;
gap: 192px;
}
.early__intro {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.early__heading {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
white-space: nowrap;
}
.early__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.early__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 48px;
line-height: normal;
letter-spacing: -0.48px;
color: var(--color-white);
}
.early__title-accent {
color: #ffba3b;
}
.early__lead {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 24px;
line-height: 40px;
color: var(--color-white);
}
/* signup form */
.early__form-wrap {
flex: 1 0 0;
min-width: 0;
display: flex;
align-items: center;
align-self: stretch;
padding-left: 64px;
padding-right: 96px;
}
.early__form {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
justify-content: center;
}
.early__form-label {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.2px;
color: rgba(255, 255, 255, 0.75);
}
.early__field {
display: flex;
width: 100%;
align-items: stretch;
}
.early__input {
flex: 1 0 0;
min-width: 0;
padding: 0 16px;
border: none;
border-radius: 6px 0 0 6px;
background: var(--color-white);
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #ce116c;
}
.early__input::placeholder {
color: #ce116c;
opacity: 1;
}
.early__input:focus {
outline: none;
}
.early__submit {
flex: 0 0 auto;
padding: 16px 32px;
border: none;
border-radius: 0 6px 6px 0;
background: #000000;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: var(--color-white);
cursor: pointer;
}
/* purple perks footer */
.early__perks {
display: flex;
gap: 96px;
align-items: flex-start;
padding: 48px;
border-radius: 0 0 16px 16px;
background: #712086;
}
.early__perk {
flex: 1 0 0;
min-width: 0;
display: flex;
gap: 16px;
align-items: flex-start;
}
.early__perk-num {
flex: 0 0 auto;
font-family: var(--font-body);
font-weight: 900;
font-size: 20px;
line-height: 32px;
color: #f00520;
}
.early__perk-text {
flex: 1 0 0;
min-width: 0;
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: var(--color-white);
}
/* =========================== TRAINING =========================== */
.training {
padding: 192px var(--gutter);
background: var(--color-white);
border-bottom: 1px solid #eaeaea;
}
.training__row {
display: flex;
flex-wrap: wrap;
gap: 96px;
align-items: center;
}
.training__intro {
flex: 0 1 792px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 64px;
align-items: flex-start;
}
.training__heading {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
width: 100%;
}
.training__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.training__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 48px;
line-height: normal;
letter-spacing: -0.48px;
background: linear-gradient(190.35deg, rgb(255, 0, 0) 13.38%, rgb(162, 32, 205) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.training__lead {
max-width: 727px;
font-family: var(--font-body);
font-weight: 400;
font-size: 22px;
line-height: 40px;
color: #000000;
}
.training__lead p {
margin: 0 0 40px;
}
.training__lead p:last-child {
margin-bottom: 0;
}
.training__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
border-radius: 6px;
background: #000000;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 24px;
color: var(--color-white);
text-decoration: none;
}
/* 2x2 card grid */
.training__cards {
flex: 1 1 600px;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.train-card {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
padding: 48px;
border: 1px solid rgba(156, 156, 156, 0.25);
border-radius: 16px;
background: transparent;
}
.train-card__icon {
width: 56px;
height: 56px;
flex: 0 0 auto;
}
.train-card__text {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
width: 100%;
}
.train-card__title {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
line-height: normal;
color: #000000;
}
.train-card__desc {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: rgba(0, 0, 0, 0.8);
}
/* ============================= BLOG ============================= */
.blog {
display: flex;
flex-direction: column;
gap: 96px;
padding: 192px var(--gutter);
background: #fafafa;
}
/* header: title left, intro right */
.blog__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 48px;
padding-right: 96px;
width: 100%;
}
.blog__heading {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
max-width: 757px;
}
.blog__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.blog__title {
margin: 0;
max-width: 720px;
font-family: var(--font-display);
font-weight: 600;
font-size: 48px;
line-height: normal;
letter-spacing: -0.48px;
background: linear-gradient(191.36deg, rgb(255, 0, 0) 13.38%, rgb(162, 32, 205) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.blog__intro {
margin: 0;
max-width: 694px;
font-family: var(--font-body);
font-weight: 400;
font-size: 22px;
line-height: 40px;
color: #000000;
}
/* 3-up card grid */
.blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 96px;
width: 100%;
}
.blog-card {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
}
.blog-card__media {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 16px;
background: #d9d9d9;
}
.blog-card__body {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
width: 100%;
}
.blog-card__date {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 40px;
color: rgba(0, 0, 0, 0.5);
}
.blog-card__title {
margin: 0;
font-family: var(--font-body);
font-weight: 600;
font-size: 20px;
line-height: 36px;
color: #000000;
}
/* gradient footer banner */
.blog__cta {
display: flex;
padding: 48px;
border: 1px solid #d9d9d9;
border-radius: 16px;
width: 100%;
background: linear-gradient(185.42deg, rgb(255, 0, 0) 13.38%, rgb(162, 32, 205) 100%);
}
.blog__cta-text {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 22px;
line-height: 40px;
color: #000000;
}
/* ============================= FAQ ============================= */
.faq {
display: flex;
flex-direction: column;
gap: 64px;
align-items: center;
padding: 192px var(--gutter);
background: #ededed;
border-bottom: 1px solid #fafafa;
}
.faq__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #9c9c9c;
}
.faq__divider {
width: 1200px;
max-width: 100%;
height: 1px;
background: #d9d9d9;
}
/* ---------- responsive fallbacks (refined in later passes) ---------- */
@media (max-width: 1280px) {
.navbar__links { display: none; }
}
@media (max-width: 768px) {
.usecases { padding: 96px 0 96px 24px; }
.usecases__header { padding-right: 24px; }
.usecases__title { font-size: clamp(32px, 6vw, 48px); }
.uc-card { flex-basis: 300px; }
}
@media (max-width: 1100px) {
.blog__header { padding-right: 0; }
.blog__title { font-size: clamp(32px, 5vw, 48px); }
.blog__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
.blog { padding: 64px 24px; gap: 64px; }
.blog__cta { padding: 32px; }
.faq { padding: 64px 24px; gap: 48px; }
}
@media (max-width: 1100px) {
.training { padding: 96px var(--gutter); }
.training__row { gap: 64px; }
.training__intro { flex-basis: 100%; gap: 40px; }
.training__title { font-size: clamp(32px, 5vw, 48px); }
.training__cards { flex-basis: 100%; }
}
@media (max-width: 560px) {
.training { padding: 64px 24px; }
.training__cards { grid-template-columns: 1fr; }
.train-card { padding: 32px; }
}
@media (max-width: 1024px) {
.early__row { flex-direction: column; align-items: stretch; gap: 48px; }
.early__form-wrap { padding: 0; }
.early__heading { white-space: normal; }
.early__title { font-size: clamp(32px, 5vw, 48px); }
.early__perks { flex-wrap: wrap; gap: 32px; }
.early__perk { flex: 1 1 45%; }
}
@media (max-width: 560px) {
.early { padding: 64px 24px; }
.early__top, .early__perks { padding: 32px; }
.early__field { flex-direction: column; }
.early__input { border-radius: 6px 6px 0 0; padding: 14px 16px; }
.early__submit { border-radius: 0 0 6px 6px; }
.early__perk { flex: 1 1 100%; }
}
@media (max-width: 900px) {
.how__steps { flex-wrap: wrap; }
.how-step { flex: 1 1 45%; padding-bottom: 64px; }
}
@media (max-width: 560px) {
.how { padding: 64px 24px 0; }
.how-step { flex: 1 1 100%; padding: 0 24px 48px; }
}
@media (max-width: 1200px) {
.product__card { flex-direction: column; align-items: stretch; }
.product__info { width: 100%; }
.product__title { font-size: clamp(32px, 5vw, 48px); }
.product__shot { height: 420px; }
.product__shot img { width: 100%; height: auto; }
}
@media (max-width: 1100px) {
.problem__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
.hero { min-height: auto; padding-bottom: 96px; }
.navbar { padding-top: 48px; }
.hero__content { position: static; margin-top: 64px; width: 100%; }
.hero__art { display: none; }
.hero__scroll { display: none; }
.hero__title { font-size: clamp(40px, 8vw, 64px); }
}
@media (max-width: 600px) {
.problem { padding: 64px 24px 96px; }
.problem__grid { grid-template-columns: 1fr; }
}
/* ============================================================
============================================================
GDPR LANDING (gdpr.html) - all classes prefixed g-
Shares tokens with the main site; Figma's "Basier Circle"
display face is mapped to Outfit (--font-display).
============================================================
============================================================ */
:root {
--g-yellow: #ffff72;
--g-purple: #9c27b0;
--g-orange: #ff4f15;
--g-ink: #3d393a;
/* Fluid gutter: 120px at the 1920 design width, tightening on smaller
screens (mobile block overrides to a fixed 32px). */
--g-gutter: clamp(48px, 6.25vw, 120px);
}
/* ---------- shared bits ---------- */
.g-eyebrow {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
text-transform: uppercase;
}
.g-eyebrow--dark { color: #9f9f9f; } /* on dark card */
.g-eyebrow--light { color: #5b5858; } /* on light section */
.g-jump {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
color: var(--color-white);
}
.g-jump img { width: 20px; height: 20px; transform: rotate(90deg); }
.g-jump:hover { opacity: 0.85; }
.g-jump--mobile { display: none; }
/* ============================================================
GDPR BRAND FIELD - one background behind #top + #check + #stats
(the page wraps those three consecutive blocks in this div).
A single element = the gradient and texture flow through all
three sections with zero seams at any width or zoom.
Orange glows echo the old per-section gradients: hero's
top-right corner and stats' bottom-left sweep; the middle
(check) stays flat brand purple.
============================================================ */
.g-brand-field {
position: relative;
isolation: isolate;
background:
radial-gradient(140vw 110vh at 100% 0%,
#ff4f15 0%,
#f5410a 10%,
rgba(224, 45, 74, 0.65) 28%,
rgba(156, 39, 176, 0) 58%),
radial-gradient(130vw 90vh at 0% 100%,
#ff4f15 0%,
rgba(255, 79, 21, 0.7) 22%,
rgba(156, 39, 176, 0) 55%),
#9c27b0;
}
/* faint topographic contour texture, tone-on-tone over the whole field */
.g-brand-field::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url("assets/usecases-texture.png") center / cover no-repeat fixed;
mix-blend-mode: multiply;
opacity: 0.1;
pointer-events: none;
}
/* ============================================================
GDPR HERO
============================================================ */
.g-hero {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
/* Fluid text column: 820px at the 1920 design width, shrinking with the
viewport so the shield keeps proportional room instead of vanishing.
Shared by .g-hero__content (width) and .g-hero__shield (position). */
--g-hero-content: clamp(440px, 56vw, 820px);
/* Viewport-fit hero (was a fixed 1080px Figma canvas): the section fills the
screen exactly and the vertical spacing compresses on short viewports so
the bottom jump link stays above the fold. Mirrors the .l2-hero approach. */
min-height: 100dvh;
overflow: hidden;
padding: clamp(28px, 4vh, 79px) var(--g-gutter) clamp(24px, 4vh, 96px);
/* background + texture live on the shared .g-brand-field wrapper */
}
.g-logos { display: flex; align-items: center; gap: clamp(20px, 1.7vw, 32px); }
.g-logos__constat { width: clamp(170px, 12.4vw, 238px); height: auto; }
.g-logos__plus {
font-family: var(--font-body);
font-weight: 100;
font-size: clamp(34px, 2.5vw, 48px);
line-height: 1;
color: var(--color-white);
}
.g-logos__ecomwall { width: clamp(110px, 8vw, 154px); height: auto; }
.g-hero__content {
margin-top: clamp(24px, 4vh, 80px);
width: var(--g-hero-content);
max-width: 100%;
display: flex;
flex-direction: column;
gap: clamp(16px, 3.5vh, 32px);
align-items: flex-start;
}
.g-hero__heading { display: flex; flex-direction: column; gap: clamp(12px, 2.5vh, 24px); align-items: flex-start; }
.g-badge {
display: inline-flex;
padding: 8px 24px;
border: 1px solid rgba(255, 255, 114, 0.25);
border-radius: 4px;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
line-height: 1.2;
text-transform: uppercase;
color: var(--g-yellow);
}
.g-hero__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
/* Scales with width AND height so the hero also fits flat laptop screens
(1366x768-class); resolves to 80px on the full 1920x1080 design canvas. */
font-size: clamp(40px, min(5.2vw, 8.8vh), 80px);
line-height: 1.1;
letter-spacing: -0.4px;
color: var(--color-white);
}
.g-hero__lede {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(16px, min(1.85vw, 3.1vh), 28px);
line-height: 1.7;
color: var(--color-white);
}
.g-hero__lede strong { font-weight: 700; color: var(--g-yellow); }
.g-hero__actions {
margin-top: clamp(8px, 1.8vh, 16px); /* 32px column gap + 16 = 48px to lede, per Figma */
display: flex;
flex-direction: column;
gap: clamp(16px, 3.5vh, 32px);
align-items: flex-start;
}
.g-cta {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 16px 32px 16px 24px;
border-radius: 50px;
background: var(--g-yellow);
font-family: var(--font-body);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.25px;
color: var(--g-purple);
transition: transform 0.15s ease;
}
.g-cta:hover { transform: translateY(-1px); }
.g-cta__pdf { width: 24px; height: 23px; }
.g-cta__arrow { width: 20px; height: auto; }
.g-hero__legal {
margin: 0;
max-width: 642px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: rgba(255, 255, 255, 0.5);
}
.g-hero__jumps {
margin-top: auto;
padding-top: clamp(20px, 3vh, 48px);
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.g-hero__shield {
position: absolute;
z-index: -1;
/* Scale with viewport height so the shield tip isn't clipped on short
screens; resolves to the original 170px / 560px at the 905px+ design height. */
top: clamp(100px, 18.8vh, 170px);
/* Never enter the text column: the left edge is pinned past the fluid
content column (+40px gap) once 62% would cross it, and the width yields
to the space that remains (24px right inset). Because the text column
shrinks with the viewport too, the shield keeps a proportional size at
every width; the mobile block hides it below 768px. */
left: max(62%, calc(var(--g-gutter) + var(--g-hero-content) + 40px));
width: clamp(280px, 61.9vh, 560px);
max-width: calc(100vw - var(--g-gutter) - var(--g-hero-content) - 64px);
pointer-events: none;
transform: scaleX(-1); /* Figma node exports mirrored; flip back */
}
/* ============================================================
GDPR CHECK (email verification)
============================================================ */
.g-check {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 96px;
align-items: flex-start;
overflow: hidden;
padding: clamp(64px, 6.7vw, 128px) calc(var(--g-gutter) - 2px);
/* background + texture live on the shared .g-brand-field wrapper */
}
.g-check__card {
width: 100%;
display: flex;
gap: clamp(32px, 3.3vw, 64px);
align-items: flex-start;
padding: clamp(32px, 3.3vw, 64px);
border-radius: 16px;
background: var(--g-ink);
box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
}
.g-check__intro {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.g-check__title {
margin: 0;
max-width: 632px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 3.9vw, 56px);
line-height: 1.2;
letter-spacing: -1.12px;
color: #d9d9d9;
}
.g-check__hl { color: var(--g-yellow); }
.g-check__form {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 96px;
justify-content: center;
}
.g-check__consents { display: flex; flex-direction: column; gap: 32px; }
.g-consent {
display: flex;
gap: 16px;
align-items: flex-start;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: #d9d9d9;
cursor: pointer;
}
.g-consent input {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
width: 28px;
height: 28px;
margin: 0;
border: none;
border-radius: 3px;
background-color: #d9d9d9;
cursor: pointer;
}
/* checked state not designed in Figma - yellow fill + dark check, on-palette */
.g-consent input:checked {
background-color: var(--g-yellow);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l5 5L15 1' fill='none' stroke='%233D393A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 16px 12px;
}
.g-consent__link { text-decoration: underline; }
.g-check__divider { width: 100%; height: 1px; background: rgba(129, 128, 128, 0.25); }
.g-check__field {
display: flex;
align-items: center;
width: 100%;
padding: 8px 8px 8px 24px;
border-radius: 100px;
background: var(--color-white);
}
.g-check__input {
flex: 1 0 0;
min-width: 0;
border: none;
background: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.25px;
color: var(--g-ink);
}
.g-check__input::placeholder { color: #a7a7a7; opacity: 1; }
.g-check__input:focus { outline: none; }
.g-check__submit {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 16px;
padding: 12px 24px;
border: none;
border-radius: 50px;
background: #a7a7a7;
font-family: var(--font-body);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.25px;
color: #fdfefe;
cursor: pointer;
transition: background 0.15s ease;
}
.g-check__submit:hover:not(:disabled) { background: var(--g-purple); }
.g-check__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.g-check__submit img { width: 20px; height: auto; }
/* Disclaimer under the submit button (Figma node 610:1091) */
.g-check__note {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
letter-spacing: -0.07px;
color: rgba(255, 255, 255, 0.5);
}
/* No-data modal: shown instead of an email when the checked domain is not in
the scan registry. */
.g-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(9, 9, 11, 0.7);
}
.g-modal__card {
position: relative;
width: 100%;
max-width: 480px;
padding: 40px 36px 36px;
border-radius: 24px;
background: var(--color-white);
}
.g-modal__close {
position: absolute;
top: 12px;
right: 16px;
border: none;
background: none;
font-size: 28px;
line-height: 1;
color: #a7a7a7;
cursor: pointer;
}
.g-modal__close:hover { color: var(--g-ink); }
.g-modal__title {
margin: 0 0 12px;
font-family: var(--font-body);
font-weight: 600;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.25px;
color: var(--g-ink);
}
.g-modal__text {
margin: 0 0 28px;
font-family: var(--font-body);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
color: #52525b;
}
.g-modal__btn {
display: inline-flex;
padding: 12px 28px;
border: none;
border-radius: 50px;
background: var(--g-ink);
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.25px;
color: #fdfefe;
cursor: pointer;
transition: background 0.15s ease;
}
.g-modal__btn:hover { background: var(--g-purple); }
/* ============================================================
GDPR STATISTIKA
============================================================ */
.g-stats {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 64px;
align-items: flex-start;
padding: clamp(64px, 6.7vw, 128px) calc(var(--g-gutter) - 2px);
/* background + texture live on the shared .g-brand-field wrapper */
}
.g-stats__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 3.9vw, 56px);
line-height: 1.2;
letter-spacing: -1.12px;
/* near-white sheen per Figma */
background: linear-gradient(-1deg, #d9d9d9 9%, #ffffff 34%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.g-stats__grid {
display: flex;
gap: clamp(32px, 3.3vw, 64px);
align-items: stretch;
width: 100%;
}
.g-stats__main {
flex: 1 0 0;
min-width: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(48px, 4.4vw, 84px) clamp(32px, 3.3vw, 64px);
padding-top: 48px;
}
.g-stat { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.g-stat__num {
margin: 0;
display: flex;
align-items: flex-start;
gap: 8px;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(64px, 7vw, 100px);
line-height: 0.8;
letter-spacing: -0.25px;
color: var(--g-yellow);
}
.g-stat__pct { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; }
.g-stat__num--white { color: var(--color-white); }
.g-stat__text { display: flex; flex-direction: column; gap: 16px; }
.g-stat__desc {
margin: 0;
max-width: 371px;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: var(--color-white);
}
.g-stat__src {
margin: 0;
max-width: 371px;
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.5);
}
.g-stat--card {
flex: 0 0 clamp(300px, 26vw, 375px);
gap: 48px;
padding: 48px 32px;
border-radius: 16px;
background: rgba(186, 42, 203, 0.5);
}
.g-stats > .g-jump--desktop { margin-top: 64px; } /* 64 gap + 64 = 128px per Figma */
/* ============================================================
GDPR DUK (FAQ accordion + download banner)
============================================================ */
.g-duk {
padding: clamp(64px, 6.7vw, 128px) 0 0;
background: #d3d3d3; /* Figma DUK frame 384:44 */
}
.g-duk__inner { padding: 0 var(--g-gutter); }
.g-duk__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 48px;
}
.g-duk__heading { display: flex; flex-direction: column; gap: 24px; }
.g-duk__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 3.9vw, 56px);
line-height: 1.2;
letter-spacing: -1.12px;
color: var(--g-ink);
}
.g-duk__intro {
margin: 0;
max-width: 583px;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(20px, 1.95vw, 28px);
line-height: 1.4;
letter-spacing: -0.14px;
color: #5b5858;
text-align: right;
}
.g-duk__list {
width: 1280px;
max-width: 100%;
margin: 64px auto 0;
interpolate-size: allow-keywords; /* lets ::details-content ease to height:auto */
}
.g-duk__item {
border-top: 1px solid rgba(167, 167, 167, 0.5);
transition: background 0.35s ease, border-radius 0.35s ease;
}
.g-duk__item:last-child { border-bottom: 1px solid rgba(167, 167, 167, 0.5); }
.g-duk__item summary {
display: flex;
align-items: center;
gap: 16px;
padding: 32px;
cursor: pointer;
list-style: none;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.1px;
}
.g-duk__item summary::-webkit-details-marker { display: none; }
/* Color/weight ease on open - same recipe as .l2-faq__q: the question box is
already fixed-width (flex: 1 0 0), so the variable-font bolding thickens in
place without shifting the row. */
.g-duk__num { flex: 0 0 auto; color: #5b5858; transition: color 0.25s ease; }
.g-duk__q { flex: 1 0 0; min-width: 0; color: var(--g-ink); transition: color 0.25s ease, font-weight 0.25s ease; }
.g-duk__chev {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 24px;
height: 24px;
}
.g-duk__chev img { width: 22px; height: auto; }
.g-duk__chev-closed { transform: rotate(90deg); }
.g-duk__chev-open { display: none; transform: rotate(-90deg) scaleY(-1); }
.g-duk__item[open] {
border-top: none;
border-radius: 16px;
background: #a7a7a7;
}
.g-duk__item[open] + .g-duk__item { border-top: none; }
.g-duk__item[open] .g-duk__num { color: var(--g-yellow); }
.g-duk__item[open] .g-duk__q { color: var(--g-yellow); font-weight: 700; }
.g-duk__item[open] .g-duk__chev-closed { display: none; }
.g-duk__item[open] .g-duk__chev-open { display: block; }
/* Expand/collapse animation - same mechanism as the landing FAQ: modern
browsers ease ::details-content from height 0 -> auto (interpolate-size on
.g-duk__list enables the keyword animation); `allow-discrete` keeps the
panel painted through the collapse. Where the pseudo isn't supported the
panel just opens/closes instantly. */
.g-duk__item::details-content {
height: 0;
overflow: hidden;
transition:
height 0.35s ease,
content-visibility 0.35s ease;
transition-behavior: allow-discrete;
}
.g-duk__item[open]::details-content {
height: auto;
}
.g-duk__answer { padding: 0 32px 32px; }
.g-duk__answer p {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.6;
letter-spacing: -0.1px;
color: var(--g-ink);
}
/* full-bleed striped download banner */
.g-download {
position: relative;
display: block;
height: 398px;
margin-top: clamp(64px, 6.7vw, 128px);
}
.g-download__icon {
position: absolute;
left: 50%;
top: 0;
/* the PDF artwork (161px) hugs the left of the 208px viewBox; +11.3% of own
width re-centers the visual (scales with the mobile 153px render too) */
transform: translateX(calc(-50% + 11.3%));
width: 208px;
height: 222px;
/* no z-index: the stripes come later in the DOM and must paint OVER the
icon's bottom ~90px, which shows through their backdrop blur (Figma 384:119) */
}
.g-download__stripes {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 266px;
opacity: 0.75;
/* frosted-glass band: blurs the icon's bottom part behind it (Figma 12.5px) */
-webkit-backdrop-filter: blur(12.5px);
backdrop-filter: blur(12.5px);
/* 46 ribbed stripes, each with a light→dark sweep */
background: repeating-linear-gradient(
90deg,
rgba(115, 115, 115, 0.2) 0%,
rgba(217, 217, 217, 0.2) 2.07%,
rgba(115, 115, 115, 0.2) 2.174%
);
}
.g-download__label {
position: absolute;
left: 50%;
top: 250px;
transform: translateX(-50%);
z-index: 2;
font-family: var(--font-body);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.25px;
color: #000;
white-space: nowrap;
}
.g-download:hover .g-download__label { text-decoration: underline; }
/* ============================================================
GDPR ORGANIZATORIAI (50/50 split panels)
============================================================ */
.g-org { display: flex; align-items: stretch; }
.g-org__panel {
flex: 1 0 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: clamp(40px, 3.3vw, 64px);
align-items: flex-start;
padding: clamp(64px, 6.7vw, 128px) var(--g-gutter);
}
.g-org__panel--constat { background: #2b3f89; --g-org-divider: rgba(217, 217, 217, 0.15); }
.g-org__panel--ecomwall {
background: linear-gradient(112.8deg, #9c27b0 22.32%, #ff4f15 100%);
--g-org-divider: rgba(217, 217, 217, 0.25);
}
.g-org__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
width: 100%;
}
.g-org__logo--constat { width: clamp(170px, 12.4vw, 238px); height: auto; }
.g-org__logo--ecomwall { width: clamp(130px, 9.2vw, 176px); height: auto; }
.g-org__tagline {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: var(--color-white);
text-align: left;
/* wraps when the panel is narrow (1200-1440px 50/50 split) instead of
colliding with the logo */
}
.g-org__info { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.g-org__subtitle {
margin: 0;
width: 100%;
padding: 32px 0;
border-top: 1px solid var(--g-org-divider);
border-bottom: 1px solid var(--g-org-divider);
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: rgba(255, 255, 255, 0.5);
}
.g-org__body { display: flex; flex-direction: column; gap: 32px; }
.g-org__heading {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: var(--color-white);
}
.g-org__text {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 20px;
line-height: 36px;
color: var(--color-white);
}
.g-org__contact {
display: inline-flex;
align-items: center;
gap: 24px;
font-family: var(--font-body);
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: var(--color-white);
}
.g-org__contact img { width: 26px; height: auto; }
.g-org__contact:hover { opacity: 0.85; }
/* ============================================================
GDPR FOOTER - shares the LANDING 2 footer styles: the GdprFooter
block renders .l2-footer markup (see the l2-footer block below).
============================================================ */
/* ============================================================
GDPR responsive - mid collapse
(hero has no breakpoints here: its base rules are fully fluid -
viewport-scaled type and a shield pinned clear of the text column)
============================================================ */
/* stats: the 3-up grid + fixed highlight card stop fitting first */
@media (max-width: 1440px) {
.g-stats__grid { flex-direction: column; }
.g-stats__main { grid-template-columns: repeat(2, 1fr); }
.g-stat--card { flex: none; width: 100%; }
}
/* check: side-by-side card gets too tight for the email pill */
@media (max-width: 1280px) {
.g-check__card { flex-direction: column; }
.g-check__form { gap: 48px; }
}
@media (max-width: 1200px) {
.g-hero__jumps { padding-top: 24px; }
.g-duk__header { flex-direction: column; }
.g-duk__intro { text-align: left; }
.g-org { flex-direction: column; }
.g-org__panel { padding: clamp(56px, 8vw, 96px) var(--g-gutter); }
.g-org__tagline { text-align: right; }
}
/* ============================================================
GDPR responsive - mobile (Figma 390 frame)
============================================================ */
@media (max-width: 768px) {
:root { --g-gutter: 32px; }
/* hero */
.g-hero {
min-height: 0;
padding: 32px;
}
.g-hero__shield { display: none; }
/* small shield between title and lede, per mobile Figma frame */
.g-hero__heading::after {
content: "";
display: block;
width: 253px;
height: 258px;
/* the SVG's bottom quarter is drop-shadow whitespace; pull the lede up */
margin: 8px auto -40px;
align-self: center;
background: url("assets/gdpr-shield-mobile.svg") center top / contain no-repeat;
transform: scaleX(-1); /* export is mirrored; flip back */
pointer-events: none;
}
.g-logos { gap: 16px; }
.g-logos__constat { width: 118px; }
.g-logos__plus { font-size: 24px; }
.g-logos__ecomwall { width: 110px; }
.g-hero__content { margin-top: 48px; gap: 24px; width: 100%; }
.g-badge { width: 100%; padding: 6px 16px; font-size: 14px; }
.g-hero__title { font-size: 32px; letter-spacing: -0.64px; }
.g-hero__lede { font-size: 20px; line-height: 1.5; }
.g-hero__actions { margin-top: 8px; gap: 24px; width: 100%; }
.g-cta { width: 100%; padding: 16px 24px; font-size: 16px; }
.g-cta span { flex: 1 0 0; min-width: 0; text-align: left; }
.g-cta__pdf { width: 17px; height: 16px; }
.g-hero__legal { font-size: 13px; }
.g-jump { font-size: 16px; }
.g-jump--mobile { display: inline-flex; }
/* check */
.g-check { padding: 48px 32px; gap: 0; }
.g-check__card { padding: 32px 16px; gap: 32px; }
.g-check__intro { gap: 16px; }
.g-eyebrow { font-size: 14px; font-weight: 500; }
.g-check__title { font-size: 24px; letter-spacing: -0.24px; }
.g-check__form { gap: 32px; }
.g-check__consents { gap: 24px; }
.g-consent { font-size: 16px; }
.g-consent input { width: 20px; height: 20px; }
.g-consent input:checked { background-size: 12px 9px; }
.g-check__field {
flex-direction: column;
align-items: stretch;
gap: 24px;
padding: 0;
border-radius: 0;
background: transparent;
}
.g-check__input {
padding: 14px 20px;
border-radius: 100px;
background: var(--color-white);
font-weight: 400;
font-size: 14px;
color: #5b5858;
}
.g-check__input::placeholder { color: #5b5858; }
.g-check__submit { width: 100%; justify-content: space-between; font-size: 16px; }
.g-jump--desktop { display: none; }
/* statistika (background lives on the shared .g-brand-field wrapper) */
.g-stats {
padding: 48px 32px;
gap: 48px;
}
.g-stats__title {
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.64px;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: var(--color-white);
}
.g-stats__grid { gap: 48px; }
.g-stats__main { grid-template-columns: 1fr; gap: 48px; padding-top: 0; }
.g-stat { gap: 32px; }
.g-stat__num { font-size: 64px; letter-spacing: -0.16px; }
.g-stat__pct { font-size: 32px; }
.g-stat__desc { font-size: 18px; max-width: none; }
.g-stat--card { padding: 48px 32px; gap: 32px; }
/* duk */
.g-duk { padding-top: 48px; }
.g-duk__header { gap: 24px; }
.g-duk__heading { gap: 12px; }
.g-duk__title { font-size: 24px; letter-spacing: -0.48px; }
.g-duk__intro { font-size: 16px; line-height: 1.5; }
.g-duk__list { margin-top: 48px; }
.g-duk__item summary { padding: 16px 24px 16px 16px; font-size: 16px; letter-spacing: -0.08px; }
.g-duk__num { color: #848182; }
.g-duk__chev { width: 14px; height: 14px; }
.g-duk__chev img { width: 13px; }
.g-duk__item[open] { border-radius: 8px; }
.g-duk__answer { padding: 0 24px 16px 16px; }
.g-duk__answer p { font-size: 16px; }
.g-download { height: 311px; margin-top: 48px; }
.g-download__icon { width: 153px; height: 182px; }
.g-download__stripes {
height: 216px;
/* 10 stripes on mobile */
background: repeating-linear-gradient(
90deg,
rgba(115, 115, 115, 0.2) 0%,
rgba(217, 217, 217, 0.2) 9.5%,
rgba(115, 115, 115, 0.2) 10%
);
}
.g-download__label { top: 203px; font-size: 18px; }
/* organizatoriai */
.g-org__panel { padding: 40px 32px; gap: 32px; }
.g-org__panel--ecomwall { background: linear-gradient(217.14deg, #9c27b0 48.26%, #ff4f15 100%); }
.g-org__logo--constat { width: 123px; }
.g-org__logo--ecomwall { width: 110px; }
.g-org__tagline { font-family: var(--font-body); font-size: 14px; line-height: 1.5; }
.g-org__info { gap: 16px; }
.g-org__subtitle { padding: 16px 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; }
.g-org__body { gap: 16px; }
.g-org__heading { font-size: 16px; line-height: normal; }
.g-org__text { font-size: 14px; line-height: 1.4; }
.g-org__contact { gap: 16px; font-size: 16px; line-height: 24px; }
.g-org__contact img { width: 20px; }
/* (footer rules removed - the footer now uses the shared .l2-footer styles) */
}
/* ============================================================
============================================================
LANDING 2 (landing2.html) - all classes prefixed l2-
Figma page "NEW WEBSITE" (node 384:1797), 1920 design.
============================================================
============================================================ */
:root {
--l2-gutter: 120px;
}
/* ================= HERO (landing2) ================= */
/* Shared parent for hero+why (paired in RenderBlocks): ONE continuous brand
gradient across both sections, so the boundary physically cannot seam -
replaces the old matched-color handoff that kinked on tablet heights. */
.l2-brand-field {
position: relative;
background: linear-gradient(180deg, #922bac 0%, #9c27b0 50%, #ff4f15 100%);
}
.l2-brand-field .l2-hero {
/* keep only the orange corner glow; the purple field comes from the parent */
background: radial-gradient(120% 95% at 100% 0%,
#FF3E00 0%,
#F5410A 14%,
rgba(224, 45, 74, 0.72) 33%,
rgba(150, 38, 168, 0.12) 62%,
rgba(150, 38, 168, 0) 74%);
}
.l2-brand-field .l2-why {
background: none;
}
.l2-hero {
position: relative;
width: 100%;
min-height: 100dvh;
overflow: hidden;
/* Fluid grid: navbar spans the top, content (left) + shield (right) share the
middle row and shrink smoothly, scroll cue pinned to the bottom. Replaces the
old fixed 1080px absolute canvas so the hero reflows at every width. */
display: grid;
grid-template-columns: minmax(0, 813px) minmax(0, auto);
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
"nav nav"
"content visual"
"scroll scroll";
align-items: center;
column-gap: clamp(24px, 4vw, 72px);
padding: clamp(28px, 4vh, 56px) var(--l2-gutter) clamp(24px, 3vh, 40px);
font-family: var(--font-body);
color: #ffffff;
/* Orange corner-glow (top-right) overlays a SHARED brand field. That field is
ONE gradient sized to the combined hero(1080)+why(1136)=2216px height and
pinned to the top here (bottom in .l2-why), so the two sections render
consecutive slices of the same gradient - zero seam at the boundary. The
hero is a self-contained purple field ending at #9C27B0; .l2-why picks up
from #9C27B0 → orange, so the seam is identical (#9C27B0) at ANY height. */
background:
radial-gradient(120% 95% at 100% 0%,
#FF3E00 0%,
#F5410A 14%,
rgba(224, 45, 74, 0.72) 33%,
rgba(150, 38, 168, 0.12) 62%,
rgba(150, 38, 168, 0) 74%),
linear-gradient(180deg, #922BAC 0%, #9C27B0 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 100% 100%;
background-position: 0 0, left top;
}
/* ---- background texture ---- */
.l2-hero__topo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.16;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.l2-hero__topo--bl {
inset: auto auto -6% -4%;
width: 62%;
height: 60%;
opacity: 0.12;
mix-blend-mode: multiply;
}
.l2-hero__corner {
position: absolute;
top: 226px;
right: -338px;
width: 458px;
height: 592px;
opacity: 0.14;
pointer-events: none;
z-index: 1;
}
/* ---- navbar ---- */
/* The slot stays in the hero's nav grid row; while the header inside is stuck
(fixed) the slot holds its measured height (inline style from L2Navbar) so
the hero layout doesn't jump. z-index 6: above the hero art (z 1-2) and
every later section (all z <= 5), so the stuck bar paints over the page. */
.l2-navbar-slot {
grid-area: nav;
align-self: start;
position: relative;
z-index: 6;
margin-bottom: clamp(24px, 6vh, 96px);
}
.l2-navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Stuck state (toggled by L2Navbar once the slot's top edge passes the
viewport top): fixed to the viewport with its own gutter padding since it
no longer sits inside the hero's padded box. Figma "Floating menu"
(641:2739): frosted 75%-white field over the page, hairline bottom border,
black logo, dark links with pink hover, pink CTA. */
.l2-navbar--stuck {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 36px var(--l2-gutter);
background: rgba(255, 255, 255, 0.75);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* The frosted blur lives on a pseudo-layer, NOT the bar itself: backdrop-filter
makes its element the containing block for position:fixed descendants, which
squashed the mobile drawer (rendered inside the header) into the bar's box
whenever the bar was stuck. A pseudo has no descendants, so the drawer's
fixed inset:0 stays viewport-relative. */
.l2-navbar--stuck::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
/* Figma fixes the logo->links gap at 64px; the base bar keeps the fluid
clamp for the hero. */
.l2-navbar--stuck .l2-navbar__left {
gap: 64px;
}
/* Navbar anchor targets stop short of the stuck bar (100px tall per Figma:
28px content + 2x36px padding) instead of sliding under it; SmoothScroll
reads this too. */
#solution, #blog, #faq, #contacts {
scroll-margin-top: 124px;
}
/* #services sits on the features TRACK: its top is where the full-viewport
stage pins at step 0 (first tab). The 20px stops just short of the pin so
the stage gets breathing room under the sticky bar; the sliver of the
previous section that remains sits hidden under the frosted navbar. */
#services {
scroll-margin-top: 20px;
}
.l2-navbar__left {
display: flex;
align-items: center;
gap: clamp(24px, 3vw, 64px);
min-width: 0;
transition: gap 0.2s ease;
}
/* Light/dark asset swap: both variants are always rendered, stacked in one
grid cell, and the stuck state crossfades between them (same trick for the
CTA calendar below). */
.l2-navbar__logo {
display: grid;
line-height: 0;
}
.l2-navbar__logo img {
display: block;
grid-area: 1 / 1;
}
.l2-navbar__logo img.l2-navbar__logo-dark { opacity: 0; }
.l2-navbar--stuck .l2-navbar__logo img.l2-navbar__logo-light { opacity: 0; }
.l2-navbar--stuck .l2-navbar__logo img.l2-navbar__logo-dark { opacity: 1; }
.l2-navbar__links {
display: flex;
align-items: center;
/* Zero gap: the links' 16px side paddings add up to the design's 32px
spacing while giving each link a bigger hit-area. */
gap: 0;
/* Cancel the first link's left padding so the logo gap still reads 64px. */
margin-left: -16px;
}
.l2-navbar__links a {
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.25px;
color: #ffffff;
text-decoration: none;
white-space: nowrap;
/* Bigger click target; the negative vertical margin keeps the padding from
growing the bar itself. */
padding: 10px 16px;
margin-top: -10px;
margin-bottom: -10px;
}
.l2-navbar--stuck .l2-navbar__links a {
color: rgba(0, 0, 0, 0.6);
}
.l2-navbar--stuck .l2-navbar__links a:hover {
color: #c9139d;
}
.l2-navbar__cta {
display: flex;
align-items: center;
gap: 16px;
color: #ffffff;
text-decoration: none;
}
.l2-navbar__cta span {
font-family: var(--font-body);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.25px;
white-space: nowrap;
}
.l2-navbar__cta img {
display: block;
}
/* The dark calendar overlaps the light one (-28px width - 16px flex gap)
so the pair crossfades in place without widening the CTA. */
.l2-navbar__cta img.l2-navbar__cta-icon-dark {
margin-left: -44px;
opacity: 0;
}
/* `>` keeps these off the drawer's CTA (it lives inside the same header). */
.l2-navbar--stuck > .l2-navbar__cta { color: #c9139d; }
.l2-navbar--stuck > .l2-navbar__cta img.l2-navbar__cta-icon-light { opacity: 0; }
.l2-navbar--stuck > .l2-navbar__cta img.l2-navbar__cta-icon-dark { opacity: 1; }
/* Burger reads via currentColor; go dark on the frosted bar. */
.l2-navbar--stuck .l2-navbar__toggle { color: #404040; }
/* ---- Mobile hamburger (shown <=1280px, see responsive block) ---- */
.l2-navbar__toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: 4px;
padding: 0;
background: transparent;
border: 0;
color: #ffffff;
cursor: pointer;
transition: color 0.2s ease;
}
.l2-burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 26px;
height: 20px;
}
.l2-burger span {
display: block;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.l2-burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.l2-burger--open span:nth-child(2) { opacity: 0; }
.l2-burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.l2-mobilenav {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
justify-content: flex-end;
background: rgba(20, 6, 24, 0.55);
backdrop-filter: blur(2px);
}
.l2-mobilenav__panel {
display: flex;
flex-direction: column;
gap: 2px;
width: min(320px, 82vw);
padding: 96px 32px 40px;
background: linear-gradient(180deg, #922bac 0%, #9c27b0 55%, #7d1f93 100%);
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
}
.l2-mobilenav__panel a {
padding: 14px 8px;
color: #ffffff;
text-decoration: none;
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* Logo sits in the panel's 96px top-padding zone, above the links. */
.l2-mobilenav__panel .l2-mobilenav__logo {
margin: -64px 0 32px;
padding: 0;
border-bottom: 0;
}
.l2-mobilenav__panel .l2-mobilenav__logo img {
display: block;
}
/* The navbar CTA (hidden in the top bar under 1280px) reappears inside the
drawer; the two-class selector outbeats the breakpoint display:none hides. */
.l2-mobilenav__panel .l2-navbar__cta {
display: flex;
margin-top: 20px;
border-bottom: 0;
}
/* Drawer entry animation. `from`-only keyframes: the resting styles ARE the
open state, so if animations are disabled the menu still appears - the
animation only adds how it gets there. */
@keyframes l2-mobilenav-fade {
from { opacity: 0; }
}
@keyframes l2-mobilenav-slide {
from { transform: translateX(100%); }
}
.l2-mobilenav {
animation: l2-mobilenav-fade 0.25s ease;
}
.l2-mobilenav__panel {
animation: l2-mobilenav-slide 0.3s cubic-bezier(0.22, 0.9, 0.36, 1);
}
/* Closing: the reverse, held at the end (`forwards`) until the component's
timer unmounts the drawer. With animations disabled the drawer just stays
visible for the 300ms timer, then unmounts - close never depends on
animation events. */
@keyframes l2-mobilenav-fade-out {
to { opacity: 0; }
}
@keyframes l2-mobilenav-slide-out {
to { transform: translateX(100%); }
}
.l2-mobilenav--closing {
animation: l2-mobilenav-fade-out 0.25s ease forwards;
}
.l2-mobilenav--closing .l2-mobilenav__panel {
animation: l2-mobilenav-slide-out 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
/* ---- right-side shield visual ---- */
.l2-hero__visual {
grid-area: visual;
justify-self: end;
align-self: center;
position: relative;
z-index: 2;
width: clamp(240px, 26vw, 470px);
/* l2-hero-shield.svg is a tight 444x592 crop, no baked shadow margins. */
aspect-ratio: 444 / 592;
}
.l2-hero__visual img {
display: block;
width: 100%;
height: 100%;
}
/* ---- left content ---- */
.l2-hero__content {
grid-area: content;
/* Bottom-bias the content in its stretched middle row so the form sits close
to the scroll cue, with the breathing room up top. The bottom margin lifts
it slightly off the bottom anchor (content sat too low on desktop). */
align-self: end;
margin-bottom: clamp(20px, 4vh, 52px);
position: relative;
width: 100%;
max-width: 813px;
z-index: 5;
display: flex;
flex-direction: column;
gap: clamp(28px, 4vh, 56px);
}
.l2-hero__intro {
display: flex;
flex-direction: column;
gap: 18px;
}
.l2-hero__badges {
display: flex;
align-items: center;
gap: 8px;
}
.l2-hero__pill {
display: inline-flex;
align-items: center;
padding: 8px;
border-radius: 4px;
background: #FF3E00;
font-family: var(--font-display);
font-weight: 400;
/* Fluid below ~500px so pill + eyebrow always share one line. */
font-size: clamp(11px, 3.2vw, 16px);
line-height: 1.2;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
}
.l2-hero__eyebrow {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(12px, 3.6vw, 18px);
line-height: 1.2;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
}
.l2-hero__title {
margin: 0;
max-width: 100%;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(38px, 4.6vw, 72px);
line-height: 1.15;
letter-spacing: -0.36px;
color: #ffffff;
}
.l2-hero__body {
display: flex;
flex-direction: column;
gap: 56px;
}
.l2-hero__desc {
margin: 0;
max-width: 788px;
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(17px, 1.5vw, 24px);
line-height: 1.6;
color: #ffffff;
}
.l2-hero__signup {
display: flex;
flex-direction: column;
gap: 16px;
}
.l2-hero__signup-label {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 18px;
color: #ffffff;
white-space: nowrap;
}
.l2-hero__form-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
max-width: 503px;
}
.l2-hero__form {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 8px 8px 24px;
border-radius: 100px;
background: #ffffff;
}
.l2-hero__input {
flex: 1 1 auto;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.25px;
color: #9C27B0;
}
.l2-hero__input::placeholder {
color: #9C27B0;
opacity: 1;
}
.l2-hero__submit {
display: inline-flex;
align-items: center;
gap: 16px;
flex: 0 0 auto;
padding: 12px 24px;
border: none;
border-radius: 50px;
background: #FF3E00;
cursor: pointer;
}
.l2-hero__submit span {
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.25px;
color: #FDFEFE;
white-space: nowrap;
}
.l2-hero__submit img { display: block; }
.l2-hero__note {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.4;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
/* ---- scroll cue ---- */
.l2-hero__scroll {
grid-area: scroll;
justify-self: start;
align-self: end;
position: relative;
margin-top: clamp(24px, 4vh, 56px);
z-index: 5;
display: flex;
align-items: center;
gap: 16px;
color: #ffffff;
text-decoration: none;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
white-space: nowrap;
}
.l2-hero__scroll-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.l2-hero__scroll-icon img {
display: block;
transform: rotate(90deg);
}
/* ============================================================
WHY section (Figma 384:1987) - 1920x1136 stats band.
Desktop-first, fixed 1920 design. No media queries.
============================================================ */
.l2-why {
position: relative;
width: 100%;
overflow: hidden;
/* Self-contained field: starts at #9C27B0 (exactly where .l2-hero's purple
ends) and runs to orange, so the hero→why seam is identical at any height
now that both sections are auto/fluid rather than the old fixed 2216px pair. */
background: linear-gradient(180deg, #9C27B0 0%, #FF4F15 100%);
/* Generous top padding so scrolling to #why doesn't reveal the hero above it,
and the section reads as self-contained. */
padding: clamp(112px, 16vh, 280px) var(--l2-gutter) clamp(72px, 10vh, 160px);
display: flex;
flex-direction: column;
gap: clamp(56px, 8vh, 112px);
font-family: var(--font-body);
}
/* Reusable near-white gradient text fill (Figma light gradient) */
.l2-why__title,
.l2-why__intro,
.l2-why__cta-text,
.l2-why__cta-book {
background-image: linear-gradient(3.5deg, #d9d9d9 9%, #f6f6f6 19%, #ffffff 34%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- Decorative topographic graphics ---------- */
.l2-why__topo {
position: absolute;
top: 0;
overflow: hidden;
pointer-events: none;
}
.l2-why__topo-img {
position: absolute;
display: block;
max-width: none;
}
.l2-why__topo--left {
left: 0;
width: 646px;
height: 258px;
opacity: 0.1;
}
.l2-why__topo--left .l2-why__topo-img {
left: 0;
top: -285.311px;
width: 650px;
height: 530.311px;
}
.l2-why__topo--right {
left: 837px;
width: 1081px;
height: 385.478px;
mix-blend-mode: color-burn;
}
.l2-why__topo--right .l2-why__topo-img {
left: 115.5px;
top: -338.241px;
width: 968.72px;
height: 705.213px;
}
/* ---------- Heading ---------- */
.l2-why__head {
position: relative;
z-index: 1;
display: flex;
gap: clamp(32px, 5vw, 184px);
align-items: flex-end;
flex-wrap: wrap;
}
.l2-why__head-left {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1 1 420px;
max-width: 677px;
}
.l2-why__eyebrow {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
text-transform: uppercase;
color: #ffffff;
}
.l2-why__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.2;
letter-spacing: -1.28px;
}
.l2-why__intro {
margin: 0;
flex: 1 1 420px;
max-width: 779px;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(20px, 2vw, 32px);
line-height: 1.34;
letter-spacing: -0.16px;
}
/* ---------- Stat cards ---------- */
.l2-why__stats {
position: relative;
z-index: 1;
display: flex;
gap: clamp(24px, 3vw, 59px);
align-items: stretch;
flex-wrap: wrap;
}
.l2-stat {
display: flex;
flex-direction: column;
gap: clamp(16px, 2vw, 32px);
flex: 1 1 280px;
}
/* Laptops/tablets: lock the 4 stats into a clean 2×2 grid instead of 3+1 wrap. */
@media (min-width: 769px) and (max-width: 1440px) {
.l2-stat {
flex-basis: calc(50% - clamp(24px, 3vw, 59px));
}
}
.l2-stat__value {
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1;
color: #ffffff;
font-family: var(--font-display);
font-weight: 400;
}
.l2-stat__num {
font-size: clamp(52px, 5.4vw, 80px);
letter-spacing: -0.2px;
}
.l2-stat__unit {
font-size: clamp(28px, 2.8vw, 40px);
letter-spacing: -0.1px;
}
.l2-stat__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.l2-stat__desc {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: #ffffff;
}
.l2-stat__src {
margin: 0;
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.5);
}
/* ---------- CTA banner ---------- */
.l2-why__cta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
flex-wrap: wrap;
padding: 28px clamp(24px, 3vw, 36px);
border-radius: 16px;
overflow: hidden;
}
.l2-why__cta-bg {
position: absolute;
inset: 0;
border-radius: 16px;
background: rgba(255, 255, 255, 0.5);
mix-blend-mode: overlay;
opacity: 0.5;
}
.l2-why__cta-msg {
position: relative;
display: flex;
gap: 19px;
align-items: center;
}
.l2-why__cta-radar {
display: block;
width: 48px;
height: 48px;
flex-shrink: 0;
}
.l2-why__cta-text {
margin: 0;
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.34;
letter-spacing: -0.12px;
}
.l2-why__cta-book {
position: relative;
display: inline-flex;
align-items: center;
gap: 16px;
text-decoration: none;
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.34;
letter-spacing: -0.12px;
}
.l2-why__cta-arrow {
width: 32px;
height: 15.5px;
display: block;
flex-shrink: 0;
}
/* ---------- Fast-forward link ---------- */
.l2-why__ff {
position: relative;
z-index: 1;
align-self: start;
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
}
.l2-why__ff-icon {
display: block;
width: 20px;
height: 20px;
transform: rotate(90deg);
flex-shrink: 0;
}
.l2-why__ff-icon img {
display: block;
width: 20px;
height: 20px;
}
.l2-why__ff-text {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: normal;
color: #ffffff;
}
/* ============================================================
SOLUTION section (Figma node 384:1880 - 1920x2209)
============================================================ */
.l2-solution {
display: flex;
align-items: center;
background: #ebebeb;
padding: clamp(96px, 12vh, 222px) var(--l2-gutter) clamp(64px, 8vh, 128px);
}
.l2-solution__inner {
width: 100%;
max-width: 1682px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(56px, 7vh, 96px);
}
/* ---------- Heading + intro ---------- */
.l2-solution__head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: clamp(32px, 5vw, 137px);
flex-wrap: wrap;
}
.l2-solution__head-left {
flex: 1 1 420px;
max-width: 711px;
display: flex;
flex-direction: column;
gap: 16px;
}
.l2-solution__eyebrow {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
text-transform: uppercase;
color: #7d7d7d;
}
.l2-solution__title {
margin: 0;
max-width: 671px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.2;
letter-spacing: -1.28px;
background-image: linear-gradient(195.465deg, #ff0000 13.384%, #a220cd 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.l2-solution__lead {
margin: clamp(0px, 3vh, 55px) 0 0;
flex: 1 1 420px;
max-width: 833px;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(19px, 1.9vw, 28px);
line-height: 1.6;
letter-spacing: -0.14px;
text-align: right;
color: rgba(0, 0, 0, 0.75);
}
.l2-solution__lead strong {
font-weight: 700;
}
/* ---------- Product showcase card ---------- */
/* Figma 651:2: 1682x1135 rounded frame; the 16:9 screenshot fills the height
and is right-aligned, cropping its left overflow. */
.l2-solution__showcase {
width: 100%;
border-radius: 16px;
overflow: hidden;
}
/* No fixed card ratio, crop or background: the (CMS-uploaded) image spans
the full width and dictates its own height. */
.l2-solution__showcase-img {
display: block;
width: 100%;
height: auto;
}
/* ---------- What You Get ---------- */
.l2-solution__benefits {
width: 100%;
max-width: 1402px;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(40px, 5vh, 64px);
}
.l2-solution__benefits-label {
margin: 0;
width: 100%;
font-family: var(--font-display);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
text-align: center;
color: rgba(111, 110, 115, 0.75);
}
.l2-solution__cards {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
/* larger row gap only shows once the cards wrap (~1030px, 3-up -> 2+1) */
column-gap: clamp(24px, 3vw, 56px);
row-gap: 64px;
flex-wrap: wrap;
}
.l2-solution__card {
flex: 1 1 280px;
max-width: 430px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.l2-solution__icon {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
overflow: hidden;
}
.l2-solution__icon-img {
position: absolute;
display: block;
object-fit: contain;
}
/* These SVGs use width/height="100%", so the ![]()
intrinsic size defaults to
300x150. With top+bottom (or left+right) both set, the replaced ![]()
is
over-constrained and falls back to that 150px intrinsic height, overflowing
the 80x80 box and clipping the icon. Give each an explicit width/height
(its viewBox, fitted to the 80px box) with top/left only - no over-constraint,
no distortion. */
/* dataleak: viewBox 75.171x80 -> 75.17x80, centered horizontally */
.l2-solution__icon-img--dataleak {
top: 0;
left: 2.4px;
width: 75.17px;
height: 80px;
}
/* exposure: viewBox 80x66.3 -> 80x66.3, centered vertically */
.l2-solution__icon-img--exposure {
top: 6.85px;
left: 0;
width: 80px;
height: 66.3px;
}
/* AI composite (80x80 container) - three layered SVGs at decreasing scale. */
.l2-solution__icon-img--ai1 {
top: 0;
left: 0;
width: 80px;
height: 80px;
}
.l2-solution__icon-img--ai2 {
top: 7.97px;
left: 7.97px;
width: 64.06px;
height: 64.06px;
}
.l2-solution__icon-img--ai3 {
top: 28.28px;
left: 26.33px;
width: 27.34px;
height: 23.44px;
}
.l2-solution__card-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.l2-solution__card-title {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 24px;
line-height: 1.34;
letter-spacing: -0.12px;
color: rgba(0, 0, 0, 0.75);
}
.l2-solution__card-desc {
margin: 0;
width: 100%;
max-width: 390px;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.6);
}
/* ---------- Divider ---------- */
.l2-solution__divider {
width: 100%;
max-width: 763px;
height: 2px;
background: rgba(183, 183, 183, 0.25);
}
/* ---------- Waitlist ---------- */
.l2-solution__waitlist {
display: flex;
flex-direction: column;
align-items: center;
gap: 64px;
}
.l2-solution__waitlist-title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 32px;
line-height: 1.2;
text-align: center;
color: #000;
}
.l2-solution__waitlist-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.l2-solution__field {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 502px;
background: #fff;
border-radius: 100px;
padding: 8px 8px 8px 24px;
}
.l2-solution__input {
flex: 1 1 auto;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.25px;
color: rgba(0, 0, 0, 0.75);
}
.l2-solution__input::placeholder {
color: rgba(0, 0, 0, 0.75);
opacity: 1;
}
.l2-solution__submit {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 16px;
border: none;
cursor: pointer;
background: #ff3e00;
border-radius: 50px;
padding: 12px 24px;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.25px;
color: #fdfefe;
white-space: nowrap;
}
.l2-solution__submit-arrow {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.l2-solution__waitlist-note {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
text-align: center;
color: rgba(0, 0, 0, 0.6);
}
/* ===== FEATURES / Services (Figma node 384:1807) ===== */
.l2-features {
position: relative;
width: 100%;
background: #fafafa;
border-bottom: 1px solid #ededed;
padding: clamp(96px, 12vh, 222px) var(--l2-gutter) clamp(64px, 9vh, 128px);
font-family: var(--font-body);
display: flex;
flex-direction: column;
gap: clamp(40px, 6vh, 72px);
}
/* --- Heading + intro row --- */
.l2-features__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: clamp(32px, 5vw, 137px);
flex-wrap: wrap;
}
/* --- Heading block --- */
.l2-features__heading {
display: flex;
flex-direction: column;
gap: 16px;
}
.l2-features__eyebrow {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
text-transform: uppercase;
color: #7d7d7d;
}
.l2-features__title {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.2;
letter-spacing: -1.28px;
background-image: linear-gradient(200.782deg, #ff0000 0%, #a220cd 90.629%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Intro paragraph (right) --- */
.l2-features__intro {
flex: 1 1 380px;
max-width: 652px;
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(19px, 1.9vw, 28px);
line-height: 1.6;
letter-spacing: -0.14px;
text-align: right;
color: rgba(0, 0, 0, 0.75);
}
/* --- Scroll track + pin (scrollytelling, ALL widths) ---
The track is taller than the viewport; the section inside pins with
position: sticky while the track scrolls past, and JS in the L2Services
component maps that progress onto the active (expanded) feature row.
Height is 1:1 with redkarin's AboutStrengths: (steps * 0.25 + 0.35)
viewports TOTAL, i.e. ~0.12 viewport of runway per step - fast, roughly
one wheel-notch per step. */
.l2-features-track {
position: relative;
height: calc((var(--l2-features-steps, 5) * 0.25 + 0.35) * 100vh);
}
.l2-features-track .l2-features {
position: sticky;
top: 0;
height: 100dvh;
overflow: hidden;
/* `safe` falls back to start-alignment when the content is taller than the
pinned stage (short/small viewports) instead of clipping the top edge. */
justify-content: safe center;
/* The section's flow padding is too generous for a pinned stage. */
padding-top: clamp(16px, 4vh, 96px);
padding-bottom: clamp(16px, 4vh, 96px);
gap: clamp(24px, 5vh, 72px);
}
/* --- Card (Figma 384:1809: navy panel with a white notch bottom-left) ---
The card itself is the navy slab (#161D48 + the radial vignette the Figma
shape paints behind the collage). The white "panel" with the collapsed
feature rows sits where the Figma vector carves a notch out of the
bottom-left corner; the active feature renders on the navy area above it
and the security collage (651:9) floats over the right half. */
.l2-features__card {
position: relative;
width: 100%;
max-width: 1682px;
margin: 0 auto;
border: 1px solid #e5e5e5;
border-radius: 16px;
overflow: hidden;
/* Keep the navy OFF the border strip (default border-box clip paints it
underneath): it bled through as ~1px navy at the top edge and muddied
the border's anti-aliased arc at all four rounded corners. */
background-clip: padding-box;
background-color: #161d48;
background-image: radial-gradient(
circle 270px at 71% 46%,
rgba(0, 0, 0, 0.5),
rgba(22, 29, 72, 0)
);
display: grid;
/* 37.2% = the Figma notch width (625/1682). */
grid-template-columns: minmax(0, 37.2%) minmax(0, 1fr);
}
/* Left column: the features in their fixed order. The active one melts into
the navy card (transparent background, white text, unfolded description)
while the rest stay white rows, so the navy highlight walks down the list
with everything transitioning in place. */
.l2-features__list {
grid-column: 1;
display: flex;
flex-direction: column;
}
/* --- Feature items --- */
.l2-features__item {
position: relative;
display: flex;
align-items: flex-start;
gap: 28px;
padding: clamp(12px, 1.6vw, 30px) 24px clamp(12px, 1.6vw, 30px) clamp(20px, 3.3vw, 56px);
background-color: #ffffff;
/* The divider is always present (transparent where it touches navy) so
item heights never change while the highlight moves. */
border-top: 1px solid #e5e5e5;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
border-radius 0.25s ease;
}
.l2-features__item:first-child,
.l2-features__item.is-active,
.l2-features__item.is-active + .l2-features__item {
border-top-color: transparent;
}
.l2-features__item.is-active {
background-color: transparent;
}
/* The last row absorbs any fractional-pixel remainder between the items' sum
and the card height - without this the navy card bg peeks through under it
as a hairline that reads as a thicker bottom border. */
.l2-features__item:last-child {
flex: 1 0 auto;
}
/* White corners round toward the walking navy block (the Figma notch). */
.l2-features__item.is-before-active {
border-bottom-right-radius: 16px;
}
.l2-features__item.is-after-active {
border-top-right-radius: 16px;
}
/* Concave fillets (the small inverse curves the Figma navy shape has where
the white meets an edge). Each is a 16px quarter-circle painted by a
radial gradient, present on every item and faded in only when its side
touches the navy, so they animate along with the highlight.
::before = left-edge fillet above the item / card-top fillet on the first
row; ::after = left-edge fillet below the item / card-bottom fillet on the
last row. */
.l2-features__item::before,
.l2-features__item::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.l2-features__item::before {
left: 0;
top: -16px;
/* The white ramp must COMPLETE at 16px (the box edge): with a 16.5px end
stop the box's outer edge is painted semi-transparent and the navy bleeds
through as a hairline "overflow" along the card edges. */
background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0) 15px, #ffffff 16px);
}
.l2-features__item.is-after-active::before {
opacity: 1;
}
.l2-features__item:first-child::before {
left: auto;
right: -16px;
/* -1px, not 0: offsets resolve against the item's PADDING box, which sits
1px below the card border because of the item's transparent border-top
divider - at 0 the navy showed through that 1px strip as a dark line
between the card border and this fillet's white. */
top: -1px;
background: radial-gradient(
circle at 100% 100%,
rgba(255, 255, 255, 0) 15px,
#ffffff 16px
);
}
.l2-features__item:first-child:not(.is-active)::before {
opacity: 1;
}
.l2-features__item::after {
left: 0;
bottom: -16px;
background: radial-gradient(
circle at 100% 100%,
rgba(255, 255, 255, 0) 15px,
#ffffff 16px
);
}
.l2-features__item.is-before-active::after {
opacity: 1;
}
.l2-features__item:last-child::after {
left: auto;
right: -16px;
bottom: 0;
background: radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0) 15px, #ffffff 16px);
}
.l2-features__item:last-child:not(.is-active)::after {
opacity: 1;
}
.l2-features__item-text {
max-width: 369px;
min-width: 0;
display: flex;
flex-direction: column;
}
.l2-features__row-label {
margin: 0;
/* Match the icon's 40px so the item's height is label-block + desc, LINEAR
in the desc height - no dead zone while heights animate. */
min-height: 40px;
display: flex;
align-items: center;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.5);
transition: color 0.2s ease, font-weight 0.2s ease;
}
.l2-features__item.is-active .l2-features__row-label {
font-weight: 700;
color: #ffffff;
}
/* Description heights are ANIMATED BY THE COMPONENT (single shared clock, so
the collapsing + expanding items always sum to a constant height and the
layout never shifts). These rules are only the pre-hydration/no-JS state;
the JS inline height overrides them. */
.l2-features__row-desc-wrap {
height: 0;
overflow: hidden;
}
.l2-features__row-desc {
margin: 0;
padding: 12px 0 8px;
font-family: var(--font-body);
font-weight: 400;
font-size: 18px;
line-height: 1.4;
color: #e4e4e4;
opacity: 0;
transition: opacity 0.2s ease;
}
.l2-features__item.is-active .l2-features__row-desc-wrap {
height: var(--l2-features-desc-h, auto);
}
.l2-features__item.is-active .l2-features__row-desc {
opacity: 1;
}
/* --- Icon --- */
.l2-features__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
overflow: hidden;
/* Muted on white rows; the active item's icon colors up. */
filter: grayscale(1);
opacity: 0.5;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.l2-features__icon img {
display: block;
width: auto;
height: 40px;
}
.l2-features__item.is-active .l2-features__icon {
filter: none;
opacity: 1;
}
/* --- Security collage (Figma 651:9), composed from exported assets ---
Fixed 594x433 canvas centered over the right half of the card (Figma
center: 71% / 47%) and scaled down as a unit on narrower viewports via
--l2-collage-scale (set in the media queries near the end of the file). */
.l2-features__collage {
position: absolute;
left: 71%;
top: 47%;
width: 594px;
height: 433px;
transform: translate(-50%, -50%) scale(var(--l2-collage-scale, 1));
pointer-events: none;
}
/* Each feature has its own artwork layer inside the collage slot; the active
one fades in. Layer 0 is the composed Figma collage, the others are
self-contained SVG illustrations rendered as plain imgs. */
.l2-features__art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.35s ease;
}
.l2-features__art.is-visible {
opacity: 1;
}
.l2-features__art > * {
position: absolute;
}
/* Single-image artworks (built-in or CMS-uploaded SVG/raster): center in the
collage area both ways instead of stretching. */
img.l2-features__art {
object-fit: contain;
object-position: center;
}
.l2-features__collage img {
display: block;
}
.l2-features__collage-texture {
left: 75.12px;
top: 53.63px;
width: 587.14px;
height: 391.19px;
border-radius: 16px;
background: url('/assets/l2-features-collage-texture.jpg') center / cover no-repeat;
box-shadow: inset 0 0 20px 0 #000000;
-webkit-mask-image: url('/assets/l2-features-collage-mask.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 9.46px 22.9px;
-webkit-mask-size: 296.05px 296.05px;
mask-image: url('/assets/l2-features-collage-mask.svg');
mask-repeat: no-repeat;
mask-position: 9.46px 22.9px;
mask-size: 296.05px 296.05px;
}
.l2-features__collage-tile {
left: 328.27px;
top: 316.86px;
width: 96px;
height: 96px;
border-radius: 16px;
background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, rgba(102, 102, 102, 0) 100%),
linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}
.l2-features__collage-shape-left {
left: 0;
top: 285.98px;
width: 139.63px;
height: 147.02px;
}
.l2-features__collage-shape-right {
left: 320.22px;
top: 0;
width: 273.83px;
height: 276.58px;
}
.l2-features__collage-finger {
left: 61.09px;
top: 58.4px;
width: 67.8px;
height: 67.8px;
}
.l2-features__collage-keyboard {
left: 78.54px;
top: 369.88px;
width: 32.22px;
height: 29.58px;
}
.l2-features__collage-bug {
left: 20.81px;
top: 306.12px;
width: 21.48px;
height: 21.48px;
}
.l2-features__collage-unlock-body {
left: 385.84px;
top: 147.69px;
width: 51.35px;
height: 64.45px;
}
.l2-features__collage-unlock-hole {
left: 406.85px;
top: 183.69px;
width: 9.32px;
height: 16.61px;
}
.l2-features__collage-adduser {
left: 516.91px;
top: 34.24px;
width: 42.96px;
height: 42.96px;
}
.l2-features__collage-shield {
left: 360.25px;
top: 343.71px;
width: 32.73px;
height: 42.96px;
}
/* NEWS / BLOG section - Figma node 384:1798 (1920x897) */
.l2-news {
background: #ffffff;
padding: clamp(96px, 12vh, 222px) 0 clamp(64px, 8vh, 128px);
text-align: center;
}
.l2-news__eyebrow {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 20px;
line-height: 1.2;
color: #7d7d7d;
text-transform: uppercase;
}
.l2-news__heading {
margin: 16px 0 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.2;
letter-spacing: -1.28px;
background-image: linear-gradient(187.929deg, rgb(255, 0, 0) 0%, rgb(162, 32, 205) 90.629%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.l2-news__grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(32px, 5vw, 104px);
margin-top: clamp(40px, 6vh, 74px);
padding: 0 var(--l2-gutter);
}
.l2-news__card {
flex: 0 1 326px;
text-align: left;
}
.l2-news__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 326 / 240;
object-fit: cover;
border-radius: 16px;
}
.l2-news__card-title {
margin: 32px 0 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.4px;
color: rgba(0, 0, 0, 0.75);
}
/* ============================================================
FAQ section (Figma node 384:3421 "FA@")
Skeleton in Figma: eyebrow + gradient heading + divider rows.
Built as a JS-free accordion matching the site's
GDPR FAQ pattern. Q&A copy is placeholder (none in Figma).
============================================================ */
.l2-faq {
position: relative;
background: #ffffff;
padding: clamp(96px, 12vh, 222px) var(--l2-gutter) clamp(96px, 12vh, 200px);
}
/* ---- Header --------------------------------------------------- */
.l2-faq__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: clamp(32px, 5vw, 96px);
margin-bottom: clamp(56px, 8vh, 110px);
}
.l2-faq__head-left {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-width: 0;
}
.l2-faq__eyebrow {
margin: 0 0 16px;
font-family: var(--font-body);
font-size: 20px;
line-height: 1.2;
color: #7d7d7d;
text-transform: uppercase;
}
.l2-faq__heading {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1.2;
letter-spacing: -1.28px;
background-image: linear-gradient(187.929deg, rgb(255, 0, 0) 0%, rgb(162, 32, 205) 90.629%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---- Header right subtitle ------------------------------------ */
.l2-faq__lead {
flex: 1 1 0;
min-width: 0;
margin: 0;
font-family: var(--font-body);
font-size: clamp(18px, 1.9vw, 28px);
line-height: 1.6;
letter-spacing: -0.14px;
text-align: right;
color: rgba(0, 0, 0, 0.75);
}
/* ---- Body: two-column groups (label left, accordion right) ---- */
.l2-faq__body {
width: 100%;
max-width: 1430px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(48px, 7vh, 96px);
interpolate-size: allow-keywords;
}
.l2-faq__group {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.87fr);
gap: clamp(24px, 4vw, 88px);
align-items: start;
}
/* Category label (left column) - the existing group title, e.g. "Am I exposed?" */
.l2-faq__group-title {
margin: 0;
padding-top: 24px;
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.5;
color: #000000;
}
.l2-faq__group-list {
display: flex;
flex-direction: column;
}
.l2-faq__item {
border-bottom: 1px solid #e4e4e4;
}
.l2-faq__item:last-child {
border-bottom: none;
}
/* Open item = filled gray card (Figma expanded style) */
.l2-faq__item[open] {
border-bottom-color: transparent;
background: #ebebeb;
border-radius: 8px;
}
.l2-faq__summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
padding: 24px;
cursor: pointer;
list-style: none;
box-sizing: border-box;
}
.l2-faq__summary::-webkit-details-marker {
display: none;
}
.l2-faq__item[open] .l2-faq__summary {
padding-bottom: 8px;
}
.l2-faq__q {
/* Fill the row (icon stays flex-shrink:0 at the right) so the question's box
width is fixed. Bolding on open then can't widen the box or shift the text
horizontally - it just thickens in place. Color/weight ease for smoothness. */
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.75);
transition: color 0.25s ease, font-weight 0.25s ease;
}
.l2-faq__item[open] .l2-faq__q {
font-weight: 700;
color: #c9139d;
}
/* Plus / minus indicator (CSS-drawn, no mask-image) */
.l2-faq__icon {
position: relative;
flex-shrink: 0;
width: 24px;
height: 24px;
margin-top: 2px;
}
.l2-faq__icon::before,
.l2-faq__icon::after {
content: "";
position: absolute;
background: #c9139d;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.l2-faq__icon::before { /* horizontal bar */
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
.l2-faq__icon::after { /* vertical bar */
top: 0;
left: 50%;
width: 2px;
height: 100%;
transform: translateX(-50%);
}
.l2-faq__item[open] .l2-faq__icon::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
}
/* ---- Answer -------------------------------------------------- */
.l2-faq__answer {
padding: 0 24px 24px;
}
.l2-faq__answer p {
margin: 0;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.6;
color: #1a1a1a;
}
/* Expand/collapse animation. Modern browsers ease ::details-content from
height 0 -> auto (interpolate-size enables the keyword animation);
`allow-discrete` keeps the panel painted through the collapse. Where the
pseudo isn't supported the panel just opens/closes instantly. */
.l2-faq__item::details-content {
height: 0;
overflow: hidden;
transition:
height 0.35s ease,
content-visibility 0.35s ease;
transition-behavior: allow-discrete;
}
.l2-faq__item[open]::details-content {
height: auto;
}
/* ============================================================
FOOTER (Figma "FOOTERIS" 425:30)
Slim dark bar: copyright left, legal links right. Symmetric
~118px gutters in the design -> the shared --l2-gutter.
============================================================ */
.l2-footer {
background: #3d393a;
padding: clamp(40px, 6vh, 80px) var(--l2-gutter);
}
.l2-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.l2-footer__copy {
margin: 0;
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 20px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
}
.l2-footer__legal {
display: flex;
flex-wrap: wrap;
gap: clamp(16px, 2vw, 40px);
}
.l2-footer__legal a {
font-family: var(--font-body);
font-size: clamp(15px, 1.3vw, 20px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.l2-footer__legal a:hover {
color: rgba(255, 255, 255, 0.85);
}
/* ============================================================
LANDING (l2-*) RESPONSIVE
The desktop layout above is authored fluid; these breakpoints
shrink the gutter, collapse multi-column rows, and stack the
hero on tablet/mobile. Under 1280 the desktop nav links hide and
the hamburger (.l2-navbar__toggle) takes their place.
============================================================ */
/* Shrink the fixed gutters as the viewport narrows; swap desktop nav links
for the hamburger toggle. */
@media (max-width: 1280px) {
:root {
--l2-gutter: 64px;
--gutter: 48px;
}
.l2-navbar__links {
display: none;
}
/* The navbar CTA moves into the hamburger drawer (.l2-mobilenav__cta). */
.l2-navbar__cta {
display: none;
}
.l2-navbar__toggle {
display: inline-flex;
}
/* Center the hero content in its row: below ~1280 the fluid type shrinks
faster than the 100dvh hero, and with the bottom-anchored layout all the
freed space pooled ABOVE the content (top gap ballooned to ~250px just
before the 1024 tablet cut). Centering splits it, so the top gap stays
~120px and hands over smoothly to the tablet layout's natural margins. */
.l2-hero__content {
align-self: center;
}
}
@media (max-width: 768px) {
:root {
--l2-gutter: 24px;
--gutter: 20px;
}
/* Book-a-Call lives in the drawer on phones; keep the bar to logo + burger. */
.l2-navbar__cta {
display: none;
}
/* The 100px desktop bar is too heavy for phones; slim it back down and
shrink the anchor offset to match (60px bar + breathing room). */
.l2-navbar--stuck {
padding-top: 16px;
padding-bottom: 16px;
}
#solution, #blog, #faq, #contacts {
scroll-margin-top: 84px;
}
}
/* ---- HERO ---- */
@media (max-width: 1024px) {
.l2-hero {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"nav"
"content"
"scroll";
min-height: auto;
padding-bottom: clamp(48px, 8vh, 96px);
}
.l2-hero__visual {
display: none;
}
.l2-hero__content {
max-width: 760px;
/* Top margin smaller than bottom: sits the content a bit higher on tablet. */
margin: clamp(24px, 4vh, 56px) 0 clamp(40px, 7vh, 96px);
}
}
@media (max-width: 768px) {
.l2-hero__scroll {
white-space: normal;
}
/* badges stay on one line - the pill/eyebrow font sizes are fluid (clamp)
so the row shrinks with the viewport instead of wrapping. */
.l2-hero__signup-label {
white-space: normal;
}
}
/* Hero waitlist on phones (Waitlist Mobile design): the white pill becomes the
input alone, with the submit as its own full-width pill stacked below. */
@media (max-width: 700px) {
.l2-hero__form {
flex-direction: column;
align-items: stretch;
gap: 10px;
background: transparent;
border-radius: 0;
padding: 0;
}
.l2-hero__input {
flex: none;
height: 56px;
background: #ffffff;
border-radius: 999px;
padding: 0 24px;
font-size: 16px;
}
.l2-hero__submit {
justify-content: center;
height: 56px;
gap: 10px;
padding: 0 24px;
border-radius: 999px;
}
}
/* ---- other sections: mobile tidy-ups ---- */
@media (max-width: 900px) {
/* Right-aligned intro columns read better left-aligned once stacked. */
.l2-solution__lead,
.l2-features__intro {
text-align: left;
}
}
@media (max-width: 768px) {
/* Compact the pinned features stage so head + card fit a phone viewport. */
.l2-features__head {
gap: 12px;
}
.l2-features__eyebrow {
font-size: 16px;
}
.l2-features__title {
font-size: 32px;
}
.l2-features__intro {
font-size: 16px;
}
.l2-features__row-label {
font-size: 18px;
}
.l2-features__row-desc {
font-size: 16px;
}
}
/* Shrink the features collage as a unit; drop it (and the two-column card
layout) once the card gets too narrow for a right half. */
@media (max-width: 1500px) {
.l2-features__card {
--l2-collage-scale: 0.85;
}
}
@media (max-width: 1280px) {
.l2-features__card {
--l2-collage-scale: 0.7;
}
}
@media (max-width: 1080px) {
.l2-features__card {
--l2-collage-scale: 0.55;
}
}
@media (max-width: 900px) {
.l2-features__card {
grid-template-columns: minmax(0, 1fr);
background-image: none;
}
.l2-features__collage {
display: none;
}
.l2-features__list {
grid-column: 1;
}
}
@media (max-width: 1024px) {
/* Stack the two-column FAQ groups: label above its items. */
.l2-faq__group {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.l2-faq__group-title {
padding-top: 0;
}
}
@media (max-width: 1020px) {
.l2-faq__head {
flex-direction: column;
align-items: flex-start;
gap: 20px;
margin-bottom: clamp(48px, 8vh, 115px);
}
.l2-faq__lead {
text-align: left;
}
}
/* Waitlist on mobile+tablet (Waitlist Mobile design): the white pill becomes
the input alone, with the submit as its own full-width pill stacked below. */
@media (max-width: 1024px) {
.l2-solution__waitlist {
gap: 28px;
}
.l2-solution__waitlist-title {
font-size: 27px;
text-wrap: balance;
}
.l2-solution__waitlist-form {
width: 100%;
gap: 20px;
}
.l2-solution__field {
flex-direction: column;
align-items: stretch;
gap: 10px;
background: transparent;
border-radius: 0;
padding: 0;
}
.l2-solution__input {
flex: none;
height: 56px;
background: #fff;
border-radius: 999px;
padding: 0 24px;
font-size: 16px;
}
.l2-solution__submit {
justify-content: center;
height: 56px;
gap: 10px;
padding: 0 24px;
border-radius: 999px;
}
.l2-solution__waitlist-note {
font-size: 15px;
}
}
/* Footer breaks into two lines: copyright above, legal links below. */
@media (max-width: 1020px) {
.l2-footer__inner {
flex-direction: column;
align-items: flex-start;
}
}
/* Footer legal links stack vertically on small phones. */
@media (max-width: 700px) {
.l2-footer__legal {
flex-direction: column;
}
}
/* ============================================================
Top offer bar (L2Offer block, Figma node 504:8) - announcement
line above the hero. bg color is CMS-driven (inline style);
#3d393a here is only the fallback.
============================================================ */
.l2-offer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
/* 104px tall at the 1920 design width: 32px padding + 40px icon. */
padding: 32px clamp(24px, 6.25vw, 120px);
background-color: #3d393a;
/* the bar can render as a link (CMS href) - keep it looking identical */
text-decoration: none;
}
.l2-offer__body {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.l2-offer__icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: block;
object-fit: contain;
}
.l2-offer__text {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 18px;
line-height: 32px;
color: #ffffff;
}
@media (max-width: 700px) {
.l2-offer {
padding: 12px 20px;
gap: 12px;
}
.l2-offer__icon {
width: 28px;
height: 28px;
}
.l2-offer__text {
font-size: 14px;
line-height: 20px;
}
}
/* ============================================================
Cookie consent banner (StaticBanner.tsx) - plain-CSS twin of
the Tailwind banner in src/components/CookieBanner/index.tsx.
Mounted on the (landing) and (gdpr) route groups.
============================================================ */
.ecw-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--color-ink);
color: var(--color-white);
border-top: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
font-family: var(--font-body);
}
/* Brand gradient hairline along the top edge. */
.ecw-cookie-banner::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--grad-hero);
}
.ecw-cookie-banner__close {
position: absolute;
top: 8px;
right: 12px;
z-index: 1;
padding: 8px;
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: color 0.15s ease;
}
.ecw-cookie-banner__close:hover {
color: var(--color-white);
}
.ecw-cookie-banner__inner {
max-width: 1152px;
margin: 0 auto;
padding: 24px 16px;
}
.ecw-cookie-banner__row {
display: flex;
flex-direction: column;
gap: 16px;
}
.ecw-cookie-banner__text {
flex: 1;
}
.ecw-cookie-banner__title {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
/* Brand gradient text - the landing's accent treatment. */
background: var(--grad-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
width: fit-content;
}
.ecw-cookie-banner__desc {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.ecw-cookie-banner__link {
color: #e88fc3;
text-decoration: underline;
transition: color 0.15s ease;
}
.ecw-cookie-banner__link:hover {
color: var(--color-white);
}
.ecw-cookie-banner__actions {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
/* Equal size + equal visual energy - reject is NOT de-emphasised (EDPB/CNIL). */
.ecw-cookie-btn {
padding: 10px 20px;
border-radius: 8px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
min-width: 140px;
cursor: pointer;
transition: background 0.15s ease, opacity 0.15s ease;
}
.ecw-cookie-btn--ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--color-white);
}
.ecw-cookie-btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
}
.ecw-cookie-btn--solid {
background: var(--grad-hero);
border: none;
color: var(--color-white);
}
.ecw-cookie-btn--solid:hover {
opacity: 0.88;
}
/* Settings panel */
.ecw-cookie-settings {
display: flex;
flex-direction: column;
gap: 16px;
}
.ecw-cookie-settings__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
/* Reopened via the bubble → an absolute × sits top-right; keep clear of it. */
.ecw-cookie-settings__header--reopened {
padding-right: 32px;
}
.ecw-cookie-settings__back {
background: none;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-decoration: underline;
cursor: pointer;
transition: color 0.15s ease;
}
.ecw-cookie-settings__back:hover {
color: var(--color-white);
}
.ecw-cookie-settings__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ecw-cookie-cat {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
transition: background 0.15s ease;
}
.ecw-cookie-cat:hover {
background: rgba(255, 255, 255, 0.1);
}
.ecw-cookie-cat--locked,
.ecw-cookie-cat--locked:hover {
background: rgba(255, 255, 255, 0.05);
cursor: not-allowed;
}
.ecw-cookie-cat__name {
font-size: 14px;
font-weight: 600;
}
.ecw-cookie-cat__hint {
margin-top: 2px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.ecw-cookie-cat__checkbox {
margin-top: 4px;
accent-color: var(--color-scroll);
cursor: pointer;
}
.ecw-cookie-cat--locked .ecw-cookie-cat__checkbox {
cursor: not-allowed;
}
.ecw-cookie-settings__actions {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Persistent bubble (bottom-right) - reopens Settings after a choice. */
.ecw-cookie-bubble {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
width: 48px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: var(--color-ink);
color: var(--color-scroll);
cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
transition: background 0.15s ease;
}
.ecw-cookie-bubble:hover {
background: #241019;
}
/* ≥640px: action buttons sit in a row. */
@media (min-width: 640px) {
.ecw-cookie-banner__inner {
padding: 24px;
}
.ecw-cookie-banner__actions {
flex-direction: row;
gap: 12px;
}
.ecw-cookie-settings__actions {
flex-direction: row;
gap: 12px;
justify-content: flex-end;
}
}
/* ≥1024px: text + buttons share one row (matches the Tailwind lg: layout). */
@media (min-width: 1024px) {
.ecw-cookie-banner__row {
flex-direction: row;
align-items: center;
gap: 24px;
}
}
/* ============================================================
LEGAL PAGES (lgl-) - /privatumo-politika, /slapuku-politika,
/duomenu-tvarkymas. Follows the "Privatumo politika" Claude
Design reference: full-bleed brand gradient header, 860px
column, inline numbered TOC, numbered sections with yellow
accent bars. Markdown bodies render inside .lgl-md.
============================================================ */
.lgl {
--lgl-accent: #a21caf;
--lgl-accent-hover: #7c3aed;
--lgl-num: #c026d3;
--lgl-yellow: #f9e64b;
--lgl-ink: #18181b;
--lgl-body-c: #3f3f46;
--lgl-muted: #71717a;
--lgl-line: #ececef;
--lgl-line-soft: #f1f1f3;
--lgl-card-bg: #faf7fb;
--lgl-card-line: #f0e6f3;
min-height: 100vh;
background: #ffffff;
color: #27272a;
font-family: var(--font-body);
}
/* ---- Gradient header ---- */
.lgl-hero {
background: #a21caf;
background-image: linear-gradient(
115deg,
#5b21b6 0%,
#7c1fa8 26%,
#a21caf 48%,
#c2185b 68%,
#e8481c 88%,
#f97316 100%
);
color: #ffffff;
}
.lgl-hero__inner {
max-width: 1000px;
margin: 0 auto;
padding: 26px 32px 52px;
box-sizing: border-box;
}
.lgl-hero__brand {
display: flex;
align-items: center;
/* logo left, EN/LT language switcher right */
justify-content: space-between;
margin-bottom: 56px;
}
.lgl-hero__brand a {
display: inline-block;
line-height: 0;
}
.lgl-hero__brand img {
display: block;
width: 154px;
height: 28px;
}
/* EN/LT switcher (LegalShell) - pill links; aria-current marks the page's
language. Overrides the brand row's line-height:0 link reset above. */
.lgl-lang {
display: flex;
gap: 4px;
}
.lgl-lang a {
line-height: 1;
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 100px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.lgl-lang a:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.7);
}
.lgl-lang a[aria-current='page'] {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.7);
color: #ffffff;
}
.lgl-badge {
display: inline-block;
padding: 6px 13px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
color: #ffffff;
text-transform: uppercase;
}
.lgl-title {
margin: 20px 0 14px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(34px, 6vw, 46px);
line-height: 1.04;
letter-spacing: -1px;
color: #ffffff;
}
.lgl-sub {
max-width: 560px;
margin: 0;
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.9);
}
.lgl-updated {
margin: 22px 0 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
}
/* ---- Main column ---- */
.lgl-main {
max-width: 1000px;
margin: 0 auto;
padding: 56px 32px 24px;
box-sizing: border-box;
}
/* ---- Intro card ---- */
.lgl-intro {
background: var(--lgl-card-bg);
border: 1px solid var(--lgl-card-line);
border-radius: 14px;
padding: 26px 28px;
margin-bottom: 48px;
}
.lgl-intro .lgl-md p {
margin: 0;
font-size: 15.5px;
line-height: 1.65;
}
/* ---- Inline TOC ---- */
.lgl-toc {
margin-bottom: 52px;
}
.lgl-toc__label {
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #a1a1aa;
}
.lgl-toc__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 32px;
}
.lgl-toc__list li {
padding: 9px 0;
border-bottom: 1px solid var(--lgl-line-soft);
}
.lgl-toc__list a {
color: var(--lgl-body-c);
font-size: 14.5px;
text-decoration: none;
}
.lgl-toc__list a:hover {
color: var(--lgl-accent);
}
.lgl-toc__num {
display: inline-block;
width: 26px;
color: var(--lgl-num);
font-weight: 600;
}
/* ---- Sections ---- */
.lgl-section {
scroll-margin-top: 24px;
margin-bottom: 44px;
}
.lgl-section h2 {
margin: 0 0 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 24px;
letter-spacing: -0.4px;
color: var(--lgl-ink);
}
.lgl-section__num {
color: var(--lgl-num);
font-weight: 700;
margin-right: 12px;
}
.lgl-bar {
height: 3px;
width: 44px;
background: var(--lgl-yellow);
border-radius: 2px;
margin-bottom: 20px;
}
.lgl-section__widget {
margin-top: 20px;
}
/* ---- Markdown bodies ---- */
.lgl-md p {
margin: 0 0 14px;
font-size: 15.5px;
line-height: 1.72;
color: var(--lgl-body-c);
}
.lgl-md > :last-child,
.lgl-md p:last-child {
margin-bottom: 0;
}
.lgl-md strong {
color: var(--lgl-ink);
}
.lgl-md a {
color: var(--lgl-accent);
text-decoration: none;
}
.lgl-md a:hover {
color: var(--lgl-accent-hover);
text-decoration: underline;
}
.lgl-md ul {
margin: 0 0 14px;
padding: 0;
list-style: none;
}
.lgl-md ul li {
position: relative;
padding: 0 0 12px 24px;
font-size: 15.5px;
line-height: 1.65;
color: var(--lgl-body-c);
}
.lgl-md ul li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
background: var(--lgl-num);
border-radius: 50%;
}
.lgl-md ul li:last-child {
padding-bottom: 0;
}
/* Tables (GFM) - the bordered data table from the design */
.lgl-md__tablewrap {
border: 1px solid var(--lgl-line);
border-radius: 12px;
overflow-x: auto;
margin: 0 0 14px;
}
.lgl-md table {
width: 100%;
border-collapse: collapse;
}
.lgl-md th {
padding: 12px 18px;
background: var(--lgl-card-bg);
border-bottom: 1px solid var(--lgl-line);
font-family: var(--font-display);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--lgl-muted);
text-align: left;
}
.lgl-md td {
padding: 14px 18px;
border-bottom: 1px solid var(--lgl-line-soft);
font-size: 14.5px;
line-height: 1.55;
color: var(--lgl-body-c);
vertical-align: top;
}
.lgl-md tr:last-child td {
border-bottom: 0;
}
/* ≤639px: tables collapse into stacked label/value cards - one card per row,
the column header repeated above each cell via data-label (stamped by the
rehypeTableLabels plugin in src/components/legal/Markdown.tsx). */
@media (max-width: 639px) {
.lgl-md__tablewrap {
border: 0;
border-radius: 0;
overflow: visible;
}
.lgl-md table,
.lgl-md tbody,
.lgl-md tr,
.lgl-md td {
display: block;
width: 100%;
}
.lgl-md thead {
display: none;
}
.lgl-md tr {
padding: 6px 16px;
border: 1px solid var(--lgl-line);
border-radius: 12px;
background: var(--lgl-card-bg);
}
.lgl-md tr + tr {
margin-top: 12px;
}
.lgl-md td {
padding: 10px 0;
border-bottom: 1px solid var(--lgl-line-soft);
}
.lgl-md tr td:last-child {
border-bottom: 0;
}
.lgl-md td::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--lgl-muted);
}
}
/* Blockquote - light highlight card (contact / info blocks) */
.lgl-md blockquote {
margin: 0 0 14px;
background: var(--lgl-card-bg);
border: 1px solid var(--lgl-card-line);
border-radius: 14px;
padding: 24px 28px;
}
.lgl-md blockquote p {
margin: 0 0 10px;
font-size: 14.5px;
line-height: 1.7;
}
.lgl-md blockquote p:last-child {
margin-bottom: 0;
}
/* ---- Cookie preferences widget ---- */
.lgl-prefs {
border: 1px solid var(--lgl-line);
border-radius: 14px;
background: #ffffff;
padding: 6px;
}
.lgl-pref {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
border-bottom: 1px solid var(--lgl-line-soft);
}
.lgl-pref__info {
flex: 1;
min-width: 0;
}
.lgl-pref__name {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--lgl-ink);
}
.lgl-pref__desc {
margin-top: 2px;
font-size: 13.5px;
line-height: 1.5;
color: var(--lgl-muted);
}
.lgl-switch {
position: relative;
width: 52px;
height: 30px;
flex-shrink: 0;
border: 0;
border-radius: 20px;
padding: 0;
background: #dcd5e2;
cursor: pointer;
transition: background 0.15s ease;
}
.lgl-switch[aria-pressed='true'] {
background: var(--lgl-accent);
}
.lgl-switch:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.lgl-switch__knob {
position: absolute;
left: 3px;
top: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: transform 0.15s ease;
}
.lgl-switch[aria-pressed='true'] .lgl-switch__knob {
transform: translateX(22px);
}
.lgl-prefs__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 18px;
}
.lgl-btn {
border: 0;
border-radius: 10px;
padding: 11px 20px;
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 600;
cursor: pointer;
}
.lgl-btn--primary {
color: #ffffff;
background: linear-gradient(115deg, #a21caf, #e8481c);
}
.lgl-btn--primary:hover {
opacity: 0.92;
}
.lgl-btn--dark {
color: #ffffff;
background: var(--lgl-ink);
}
.lgl-btn--ghost {
border: 1px solid var(--lgl-line);
background: #ffffff;
color: var(--lgl-body-c);
}
.lgl-saved {
font-size: 13.5px;
font-weight: 600;
color: #1f8a5b;
opacity: 0;
transition: opacity 0.2s ease;
}
.lgl-saved--on {
opacity: 1;
}
/* ---- Responsive ---- */
@media (max-width: 639px) {
.lgl-hero__inner,
.lgl-main {
padding-left: 20px;
padding-right: 20px;
}
.lgl-hero__brand {
margin-bottom: 40px;
}
.lgl-toc__list {
grid-template-columns: 1fr;
}
.lgl-intro,
.lgl-md blockquote {
padding: 20px;
}
}