@charset "UTF-8";
 :root {
--lak-blue: #125DC4;
--lak-navy: #123465;
--lak-orange: #F2A64E;
--lak-btn-blue: #125DC4;
--lak-teal: #00BAB7;
--lak-purple: #A18AEF;
--lak-light: #EBF6FB;
--lak-gray: #F8F8F8;
--lak-text: #373737;
--lak-muted: #737373;
--lak-border: #F0F0F0;
--lak-shadow-card: 0 1px 6px rgba(34, 34, 34, .25);
--lak-shadow-btn: 0 1px 10px rgba(0, 0, 0, .08), 0 2px 24px rgba(0, 0, 0, .08);
--lak-shadow-btn-hover: 0 1px 10px rgba(0, 0, 0, .2), 0 2px 24px rgba(0, 0, 0, .2);
}
html {
scroll-behavior: smooth;
}
body.p-legal-kit {
margin: 0; color: var(--lak-text);
background: #fff;
line-height: 1.6;
& main {
margin: 0;
}
& a {
color: inherit;
text-decoration: none;
}
} .p-legal-kit__header {
position: sticky;
top: 0;
left: auto;
z-index: 10;
padding: 0;
border-bottom: 1px solid var(--lak-border);
background: #fff;
& .p-legal-kit__header-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
max-width: 1120px;
margin: 0 auto;
padding: 14px 24px;
}
& .p-legal-kit__logo {
display: flex;
align-items: center;
gap: 14px;
}
& .p-legal-kit__logo-img {
width: 104px;
height: auto;
display: block;
}
& .p-legal-kit__logo-text {
font-weight: 700;
color: var(--lak-navy);
font-size: .9375rem;
letter-spacing: .08em;
border-left: 1px solid #D5DCE4;
padding-left: 14px;
line-height: 1.4;
}
& .p-legal-kit__nav {
display: flex;
gap: 18px;
color: var(--lak-muted);
font-size: .8125rem;
@media screen and (max-width: 768px) {
display: none;
}
}
} .p-legal-kit__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10.667vw;
padding: min(21px, 1.215vw) min(40px, 2.315vw);
font-weight: 700;
font-size: .9375rem;
border: 1px solid transparent;
cursor: pointer;
min-width: 170px;
box-shadow: var(--lak-shadow-btn);
transition: all .3s;
&::after {
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url(//olga-legal.com/wp-content/themes/olga/files/images/btn-arrow.svg) no-repeat center / contain;
mask: url(//olga-legal.com/wp-content/themes/olga/files/images/btn-arrow.svg) no-repeat center / contain;
margin-left: 10px;
}
&:hover {
box-shadow: var(--lak-shadow-btn-hover);
}
@media screen and (max-width: 768px) {
padding: 14px 28px;
}
} body.p-legal-kit .p-legal-kit__btn--primary {
background: var(--lak-btn-blue);
border-color: var(--lak-btn-blue);
color: #fff;
}
body.p-legal-kit .p-legal-kit__btn--secondary {
color: var(--lak-navy);
border-color: var(--lak-navy);
background: #fff;
}
.p-legal-kit__btn--small {
padding: min(8px, 0.463vw) min(24px, 1.389vw);
font-size: .8125rem;
min-width: auto;
@media screen and (max-width: 768px) {
padding: 8px 18px;
}
} .p-legal-kit {
& h1,
& h2,
& h3 {
color: var(--lak-navy);
line-height: 1.35;
margin: 0;
}
& h1 {
font-size: min(51px, 2.951vw);
letter-spacing: .08em;
line-height: 1.5;
margin-bottom: 20px;
@media screen and (max-width: 768px) {
font-size: 8vw;
}
}
& h2 {
font-size: min(38px, 2.199vw);
letter-spacing: .08em;
line-height: 1.5;
margin-bottom: 18px;
text-align: center;
@media screen and (max-width: 768px) {
font-size: 7.467vw;
}
}
& h3 {
font-size: 1.25rem;
letter-spacing: .08em;
margin-bottom: 10px;
}
}
.p-legal-kit__text-blue {
color: var(--lak-blue);
} .p-legal-kit__circle {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--lak-muted);
margin-right: 12px;
vertical-align: middle;
}
.p-legal-kit__section {
padding: 72px 24px;
}
.p-legal-kit__section--alt {
background: var(--lak-gray);
}
.p-legal-kit__section--light {
background: var(--lak-light);
}
.p-legal-kit__container {
max-width: 1120px;
margin: 0 auto;
}
.p-legal-kit__center-copy {
max-width: 780px;
margin: 0 auto 36px;
text-align: center;
color: var(--lak-text);
font-size: 1rem;
}
.p-legal-kit__cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 26px 0;
}
.p-legal-kit__cta-row--center {
justify-content: center;
}
.p-legal-kit__center-copy--gap-top {
margin-top: 24px;
} .p-legal-kit__hero {
background: #fff;
padding: 72px 24px 88px;
overflow: hidden;
@media screen and (max-width: 768px) {
padding: 48px 24px;
}
& .p-legal-kit__hero-grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
max-width: 1120px;
margin: 0 auto;
position: relative;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
}
& .p-legal-kit__hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #EDF3FB;
color: var(--lak-blue);
font-weight: 700;
font-size: .875rem;
letter-spacing: .04em;
border-radius: 999px;
padding: 7px 18px;
margin-bottom: 20px;
&::before {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid currentColor;
box-sizing: border-box;
}
}
& .p-legal-kit__lead {
font-size: 1.0625rem;
font-weight: 500;
color: var(--lak-text);
margin: 0 0 28px;
}
& .p-legal-kit__badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
& .p-legal-kit__badge {
display: inline-flex;
padding: 6px 14px;
border-radius: 4px;
background: var(--lak-gray);
color: var(--lak-navy);
font-size: .8125rem;
font-weight: 700;
letter-spacing: .04em;
}
} .p-legal-kit__hero-visual {
position: relative;
padding: 24px 0;
&::before {
content: "";
position: absolute;
width: 620px;
height: 620px;
border-radius: 50%;
background: var(--lak-light);
right: -220px;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}
&::after {
content: "";
position: absolute;
width: 56px;
height: 56px;
border-radius: 50%;
background: #D9EBF7;
left: -8px;
bottom: 12px;
z-index: 0;
}
& .p-legal-kit__hero-img {
position: relative;
z-index: 1;
display: block;
width: min(100%, 600px);
height: auto;
margin-left: auto;
border-radius: 12px;
}
@media screen and (max-width: 768px) {
padding: 8px 0 16px;
margin-top: 8px;
&::before {
width: 420px;
height: 420px;
right: -140px;
}
& .p-legal-kit__hero-img {
margin: 0 auto;
}
}
} .p-legal-kit__hero-float {
position: absolute;
z-index: 2;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 14px rgba(18, 52, 101, .16);
}
.p-legal-kit__hero-float--tools {
left: 48px;
bottom: 8px;
padding: 10px 16px;
font-size: .75rem;
font-weight: 700;
color: var(--lak-navy);
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
&::before {
content: "✓";
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--lak-btn-blue);
color: #fff;
font-size: .6875rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
display: none;
}
} .p-legal-kit__howto {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 40px;
align-items: center;
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 40px;
margin-top: 20px;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
gap: 20px;
padding: 24px;
}
& .p-legal-kit__howto-title {
font-size: 1.625rem;
margin-bottom: 14px;
@media screen and (max-width: 768px) {
font-size: 1.375rem;
}
}
& .p-legal-kit__howto-copy p {
margin: 0;
font-size: .9375rem;
font-weight: 500;
line-height: 1.9;
}
}
.p-legal-kit__video {
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(18, 52, 101, .16);
background: var(--lak-navy);
& iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
}
.p-legal-kit__ai-note {
margin: 14px 0 0;
text-align: right;
font-size: .8125rem;
font-weight: 500;
color: var(--lak-muted);
@media screen and (max-width: 768px) {
text-align: left;
}
} .p-legal-kit__problem-label {
position: relative;
text-align: center;
margin: 40px 0 24px;
&::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #D9E2EC;
}
& span {
position: relative;
display: inline-block;
background: var(--lak-navy);
color: #fff;
border-radius: 999px;
padding: 6px 24px;
font-size: .875rem;
font-weight: 700;
letter-spacing: .08em;
}
}
.p-legal-kit__problem-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px 16px;
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
gap: 20px 12px;
}
& .p-legal-kit__problem {
display: flex;
flex-direction: column;
gap: 12px;
}
& .p-legal-kit__problem-icon {
width: 100%;
aspect-ratio: 1;
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
& img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
& .p-legal-kit__problem-text {
text-align: center;
font-size: .875rem;
font-weight: 700;
line-height: 1.6;
color: var(--lak-navy);
}
} .p-legal-kit__formula {
display: grid;
grid-template-columns: 1fr 44px 1fr 44px 1fr 60px 1.05fr;
gap: 14px;
align-items: stretch;
max-width: 1000px;
margin: 40px auto 0;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
gap: 10px;
}
& .p-legal-kit__formula-box {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 28px 16px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
@media screen and (max-width: 768px) {
padding: 20px 16px;
flex-direction: row;
justify-content: flex-start;
gap: 16px;
}
}
& .p-legal-kit__formula-box--result {
border: 2px solid var(--lak-blue);
& .p-legal-kit__formula-icon img {
width: 82px;
height: 82px;
transform: translateX(6px);
@media screen and (max-width: 768px) {
width: 52px;
height: 52px;
transform: translateX(4px);
}
}
}
& .p-legal-kit__formula-icon {
flex: 0 0 auto;
width: 84px;
height: 84px;
border-radius: 50%;
background: #E7F0FA;
display: inline-flex;
align-items: center;
justify-content: center;
& img {
width: 58px;
height: 58px;
object-fit: contain;
display: block;
position: relative;
z-index: 1;
}
@media screen and (max-width: 768px) {
width: 56px;
height: 56px;
& img {
width: 38px;
height: 38px;
}
}
}
& .p-legal-kit__formula-divider {
width: 24px;
height: 2px;
border-radius: 2px;
background: #A8C6EC;
@media screen and (max-width: 768px) {
display: none;
}
}
& .p-legal-kit__formula-label {
font-weight: 700;
color: var(--lak-navy);
text-align: center;
line-height: 1.5;
font-size: 1.0625rem;
margin-top: auto;
@media screen and (max-width: 768px) {
margin-top: 0;
text-align: left;
& br {
display: none;
}
}
}
& .p-legal-kit__formula-sign {
align-self: center;
justify-self: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 6px rgba(34, 34, 34, .12);
color: var(--lak-navy);
font-weight: 700;
font-size: 1.125rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
& .p-legal-kit__formula-sign--arrow {
width: 60px;
height: auto;
background: none;
box-shadow: none;
border-radius: 0;
color: var(--lak-blue);
& svg {
width: 52px;
height: 18px;
}
@media screen and (max-width: 768px) {
& svg {
transform: rotate(90deg);
width: 36px;
}
}
}
} .p-legal-kit__overview {
background: url(//olga-legal.com/wp-content/themes/olga/files/images/top_overview_bg.webp) center center / cover no-repeat;
padding: 90px 24px;
& h2 {
color: #fff;
}
& .p-legal-kit__center-copy {
color: #fff;
font-size: 1.125rem;
}
@media screen and (max-width: 768px) {
padding: 50px 24px 60px;
}
} .p-legal-kit__heading-gap {
margin-top: 64px;
}
.p-legal-kit__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
& .p-legal-kit__card {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 24px;
min-height: 180px;
& h3 {
display: flex;
align-items: center;
gap: 8px;
&::before {
content: "";
flex: 0 0 auto;
width: 12px;
height: 12px;
border-radius: 50%;
border: 3px solid currentColor;
box-sizing: border-box;
}
}
}
& .p-legal-kit__card--teal {
border-top: 8px solid var(--lak-teal);
& h3::before,
& .p-legal-kit__card-num {
color: var(--lak-teal);
}
}
& .p-legal-kit__card--purple {
border-top: 8px solid var(--lak-purple);
& h3::before,
& .p-legal-kit__card-num {
color: var(--lak-purple);
}
}
& .p-legal-kit__card--orange {
border-top: 8px solid var(--lak-orange);
& h3::before,
& .p-legal-kit__card-num {
color: var(--lak-orange);
}
}
& .p-legal-kit__card-num {
font-size: 2.125rem;
font-weight: 900;
line-height: 1;
margin-bottom: 10px;
}
} .p-legal-kit__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
& .p-legal-kit__step {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 26px;
position: relative;
}
& .p-legal-kit__step-label {
font-family: "Lato", sans-serif;
color: var(--lak-blue);
font-weight: 900;
letter-spacing: .08em;
margin-bottom: 10px;
}
} .p-legal-kit__memo {
background: #FFF7ED;
border-left: 3px solid var(--lak-orange);
color: #8A4A11;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin-top: 24px;
font-size: .875rem;
font-weight: 500;
}
.p-legal-kit__memo--left {
text-align: left;
} .p-legal-kit__benefit-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 32px;
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
& .p-legal-kit__benefit {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 22px;
& h3 {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.125rem;
&::before {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid var(--lak-blue);
box-sizing: border-box;
}
}
}
} .p-legal-kit__pricing-card {
max-width: 620px;
margin: 34px auto 0;
border-radius: 8px;
background: #fff;
overflow: hidden;
text-align: center;
box-shadow: var(--lak-shadow-card);
& .p-legal-kit__pricing-head {
background: var(--lak-navy);
padding: 16px 24px;
& h3 {
color: #fff;
margin: 0;
}
}
& .p-legal-kit__pricing-body {
padding: 26px 34px 34px;
@media screen and (max-width: 768px) {
padding: 20px 20px 26px;
}
}
& .p-legal-kit__pricing-table {
margin: 0 0 24px;
border-bottom: 1px solid var(--lak-border);
}
& .p-legal-kit__pricing-row {
display: flex;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--lak-border);
&:last-child {
border-bottom: none;
}
& strong {
color: var(--lak-navy);
font-size: 1.375rem;
}
}
} .p-legal-kit__flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 30px;
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
& .p-legal-kit__flow-item {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 18px;
text-align: center;
font-weight: 700;
font-size: .875rem;
color: var(--lak-navy);
}
& .p-legal-kit__flow-note {
font-weight: 500;
color: var(--lak-text);
font-size: .8125rem;
}
} .p-legal-kit__upsell {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 32px;
align-items: center;
background: var(--lak-gray);
border-radius: 8px;
padding: 40px;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
padding: 24px;
}
& .p-legal-kit__upsell-title {
text-align: left;
margin-bottom: 16px;
}
& .p-legal-kit__upsell-menu {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
& .p-legal-kit__upsell-item {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 20px 24px;
font-weight: 700;
color: var(--lak-navy);
display: flex;
align-items: center;
gap: 10px;
&::before {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
border: 3px solid var(--lak-blue);
box-sizing: border-box;
}
}
} .p-legal-kit__faq {
max-width: 900px;
margin: 32px auto 0;
& details {
background: #fff;
border-radius: 8px;
box-shadow: var(--lak-shadow-card);
padding: 18px 20px;
margin-bottom: 12px;
}
& summary {
cursor: pointer;
font-weight: 700;
color: var(--lak-navy);
}
& details p {
margin-bottom: 0;
margin-top: 8px;
font-weight: 500;
color: var(--lak-text);
}
} .p-legal-kit__form-section {
background: var(--lak-navy);
color: #fff;
text-align: center;
& h2 {
color: #fff;
}
& .p-legal-kit__center-copy {
color: #D8E8F2;
}
& .p-legal-kit__form-box {
margin: 34px auto 0;
max-width: 760px;
background: #fff;
color: var(--lak-text);
border-radius: 8px;
padding: 34px;
text-align: left;
box-shadow: var(--lak-shadow-card);
}
& .p-legal-kit__form-note {
margin: 18px auto 0;
max-width: 760px;
color: #D8E8F2;
font-size: .8125rem;
text-align: left;
}
} .p-legal-kit__footer {
background: #373737;
color: #fff;
padding: 28px 24px;
font-size: .8125rem;
text-align: center;
}