@font-face {
font-family: 'DM Sans';
src: url(//www.chimschicpropre.com/wp-content/themes/chimschicpropre/assets/fonts/dm-sans-latin.woff2) format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
src: url(//www.chimschicpropre.com/wp-content/themes/chimschicpropre/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
} :root {
--purple: #532f8b;
--purple-deep: #28045f;
--purple-soft: #f0edfa;
--purple-line: #d0c3ef;
--gold: #f2cd5f;
--gold-deep: #d9ae32;
--ink: #1e1533;
--body: #4a4a55;
--muted: #6b6b78;
--white: #fff;
--surface: var(--white);
--surface-alt: var(--purple-soft);
--border: #e7e2f3;
--font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', roboto, sans-serif;
--step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
--step-0: 1rem;
--step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);
--step-2: clamp(1.375rem, 1.24rem + 0.68vw, 1.875rem);
--step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
--step-4: clamp(2.25rem, 1.7rem + 2.75vw, 3.625rem);
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2.5rem;
--space-xl: 4rem;
--space-2xl: clamp(4rem, 3rem + 5vw, 7rem);
--radius: 10px;
--radius-lg: 18px;
--radius-pill: 999px; --shadow-sm:
0 1px 2px rgb(40 4 95 / 5%),
0 2px 6px rgb(40 4 95 / 4%);
--shadow-md:
0 2px 4px rgb(40 4 95 / 6%),
0 8px 24px rgb(40 4 95 / 8%);
--shadow-lg:
0 4px 8px rgb(40 4 95 / 6%),
0 16px 40px rgb(40 4 95 / 10%),
0 32px 80px rgb(40 4 95 / 8%);
--container: 1200px;
--header-h: 100px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 180ms;
--dur: 320ms;
--dur-slow: 620ms;
} *,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
font-family: var(--font);
font-size: var(--step-0);
line-height: 1.65;
color: var(--body);
background: var(--surface);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
overflow-x: hidden;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4 {
color: var(--purple-deep);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.015em;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--purple);
text-underline-offset: 0.2em;
}
ul,
ol {
padding: 0;
list-style: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
} .splash {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-content: center;
gap: 1.25rem;
justify-items: center;
background: linear-gradient(140deg, var(--purple-deep), var(--purple));
animation: ccp-splash 900ms var(--ease) forwards;
}
:root[data-splash='off'] .splash {
display: none;
}
.splash__mark {
font-size: clamp(2rem, 9vw, 3rem);
font-weight: 900;
letter-spacing: 0.12em;
color: var(--gold);
animation: ccp-splash-mark 900ms var(--ease) both;
}
.splash__bar {
position: relative;
width: clamp(120px, 40vw, 180px);
height: 3px;
border-radius: var(--radius-pill);
background: rgb(255 255 255 / 22%);
overflow: hidden;
}
.splash__bar::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--gold);
transform-origin: left;
animation: ccp-splash-bar 700ms var(--ease) forwards;
}
@keyframes ccp-splash {
0%,
55% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
@keyframes ccp-splash-mark {
0% {
opacity: 0;
transform: translateY(8px);
}
40%,
100% {
opacity: 1;
transform: none;
}
}
@keyframes ccp-splash-bar {
0% {
transform: scalex(0);
}
100% {
transform: scalex(1);
}
}
@media (prefers-reduced-motion: reduce) {
.splash {
display: none;
}
} ::selection {
background: var(--purple);
color: var(--white);
}
html {
scrollbar-color: var(--purple-line) transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--purple-line);
border-radius: var(--radius-pill);
border: 2px solid var(--white);
}
::-webkit-scrollbar-thumb:hover {
background: var(--purple);
} img {
background: linear-gradient(110deg, #f4f1fb 30%, #ece7f7 50%, #f4f1fb 70%);
background-size: 220% 100%;
}
img[data-loaded='true'] {
animation: ccp-img-in var(--dur-slow) var(--ease-out) both;
background: none;
}
@keyframes ccp-img-in {
from {
opacity: 0;
transform: scale(1.015);
}
to {
opacity: 1;
transform: none;
}
} .container {
width: min(100% - 2.5rem, var(--container));
margin-inline: auto;
}
.section {
padding-block: var(--space-2xl);
}
.section--tight {
padding-block: var(--space-xl);
}
.section--soft {
background: var(--surface-alt);
}
.section--purple {
background: linear-gradient(135deg, var(--purple-deep), var(--purple));
color: rgb(255 255 255 / 88%);
}
.section--purple h2,
.section--purple h3 {
color: var(--white);
}
.skip-link {
position: absolute;
left: -9999px;
z-index: 999;
padding: 0.75rem 1.25rem;
background: var(--purple-deep);
color: var(--white);
border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
left: 0;
top: 0;
} .eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: var(--space-xs);
padding: 0.4rem 1rem;
border: 1px solid var(--purple-line);
border-radius: var(--radius-pill);
background: var(--white);
color: var(--purple);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.section--purple .eyebrow,
.hero .eyebrow {
background: transparent;
border-color: rgb(255 255 255 / 45%);
color: var(--white);
}
.section-head {
max-width: 62ch;
margin-bottom: var(--space-l);
}
.section-head--center {
margin-inline: auto;
text-align: center;
}
.section-title {
font-size: var(--step-3);
}
.section-lead {
margin-top: var(--space-s);
font-size: var(--step-1);
color: var(--muted);
}
.section--purple .section-lead {
color: rgb(255 255 255 / 82%);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.6rem;
border: 2px solid transparent;
border-radius: var(--radius);
background: var(--purple);
color: var(--white);
font-size: var(--step--1);
font-weight: 700;
text-decoration: none;
cursor: pointer;
position: relative;
isolation: isolate;
overflow: hidden;
transition:
transform var(--dur-fast) var(--ease-out),
background-color var(--dur) var(--ease-soft),
box-shadow var(--dur) var(--ease-soft),
border-color var(--dur) var(--ease-soft),
color var(--dur-fast) var(--ease-soft);
} .btn::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(120deg, transparent 0%, rgb(255 255 255 / 18%) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before {
transform: translateX(100%);
}
.btn:hover {
background: var(--purple-deep);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn:active {
transform: translateY(0);
transition-duration: 60ms;
}
.btn .icon {
transition: transform var(--dur) var(--ease-out);
}
.btn:hover .icon:last-child {
transform: translateX(3px);
} .btn--solid,
.btn--outline-gold {
padding: 15px 30px;
border-width: 1px 1px 5px;
border-color: var(--gold);
font-size: 16px;
font-weight: 600;
line-height: 1;
}
.btn--solid {
background: var(--purple);
color: var(--white);
}
.btn--solid:hover {
background: var(--gold);
border-color: var(--purple);
color: var(--purple);
}
.btn--outline-gold {
background: transparent;
color: var(--gold);
}
.btn--outline-gold:hover {
background: var(--purple);
border-color: var(--gold);
color: var(--white);
}
.btn--gold {
background: var(--gold);
color: var(--purple-deep);
}
.btn--gold:hover {
background: var(--gold-deep);
color: var(--purple-deep);
}
.btn--ghost {
background: transparent;
border-color: var(--gold);
color: var(--gold);
}
.btn--ghost:hover {
background: var(--gold);
color: var(--purple-deep);
}
.btn--outline {
background: transparent;
border-color: var(--purple-line);
color: var(--purple);
}
.btn--outline:hover {
background: var(--purple);
border-color: var(--purple);
color: var(--white);
}
.btn .icon {
width: 1.1em;
height: 1.1em;
fill: currentcolor;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
margin-top: var(--space-m);
} .header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
border-bottom: 1px solid transparent;
transition: box-shadow var(--dur) var(--ease-soft),
border-color var(--dur) var(--ease-soft),
background-color var(--dur) var(--ease-soft);
} .header[data-scrolled='true'] {
background: rgb(255 255 255 / 88%);
backdrop-filter: saturate(180%) blur(12px);
border-bottom-color: var(--border);
box-shadow: 0 1px 0 rgb(40 4 95 / 4%), 0 8px 28px rgb(40 4 95 / 7%);
}
@supports not (backdrop-filter: blur(1px)) {
.header[data-scrolled='true'] {
background: var(--white);
}
}
.header__inner {
display: flex;
align-items: center;
gap: var(--space-m);
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
flex-shrink: 0;
}
.brand img {
width: 125px;
height: 100px;
object-fit: contain;
}
.nav {
margin-inline: auto;
}
.nav__list {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.6vw, 1.75rem);
}
.nav__list a {
display: block;
padding: 0.5rem 12px;
white-space: nowrap;
color: var(--purple-deep);
font-size: 18px;
font-weight: 600;
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
position: relative;
}
.nav__list a::after {
content: '';
position: absolute;
inset-inline: 12px;
bottom: 0;
height: 2px;
background: var(--gold);
transform: scalex(0);
transform-origin: left;
transition: transform 0.28s var(--ease);
}
.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list a[aria-current='page']::after {
transform: scalex(1);
}
.nav__list .current-menu-item > a,
.nav__list a[aria-current='page'] {
color: var(--purple);
}
.header__cta {
flex-shrink: 0;
}
.nav-toggle {
display: none;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--purple-line);
border-radius: var(--radius);
background: var(--white);
color: var(--purple-deep);
place-items: center;
} .nav-toggle__bars {
display: grid;
gap: 5px;
width: 22px;
}
.nav-toggle__bars i {
display: block;
height: 2px;
border-radius: 2px;
background: currentcolor;
transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded='true'] {
background: var(--purple);
border-color: var(--purple);
color: var(--white);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(2) {
opacity: 0;
transform: scalex(0);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars i:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-backdrop {
position: fixed;
inset: 0;
z-index: 98;
background: rgb(28 2 68 / 45%);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.nav-backdrop[data-open='true'] {
opacity: 1;
}
@media (width <= 1199px) {
.nav-toggle {
display: grid;
margin-inline-start: auto;
}
.header__cta {
display: none;
} .nav {
position: fixed;
inset: var(--header-h) 0 0;
margin: 0;
padding: var(--space-m) 1.25rem var(--space-l);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--white);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
visibility: hidden;
transition: transform 0.3s var(--ease), visibility 0.3s;
}
.nav {
width: min(86vw, 380px);
inset-inline: auto 0;
z-index: 99;
}
.nav[data-open='true'] {
transform: none;
visibility: visible;
}
.nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav__list a {
padding: 1rem 0.25rem;
border-bottom: 1px solid var(--border);
font-size: var(--step-0);
}
.nav__list a::after {
inset-inline: 0.25rem;
}
.nav__cta {
width: 100%;
margin-top: var(--space-m);
} .nav__list > li,
.nav__cta {
opacity: 0;
transform: translateX(16px);
}
.nav[data-open='true'] .nav__list > li,
.nav[data-open='true'] .nav__cta {
animation: ccp-nav-item 0.45s var(--ease) forwards;
}
.nav[data-open='true'] .nav__list > li:nth-child(1) { animation-delay: 0.10s; }
.nav[data-open='true'] .nav__list > li:nth-child(2) { animation-delay: 0.14s; }
.nav[data-open='true'] .nav__list > li:nth-child(3) { animation-delay: 0.18s; }
.nav[data-open='true'] .nav__list > li:nth-child(4) { animation-delay: 0.22s; }
.nav[data-open='true'] .nav__list > li:nth-child(5) { animation-delay: 0.26s; }
.nav[data-open='true'] .nav__list > li:nth-child(6) { animation-delay: 0.30s; }
.nav[data-open='true'] .nav__list > li:nth-child(7) { animation-delay: 0.34s; }
.nav[data-open='true'] .nav__cta { animation-delay: 0.38s; }
}
@keyframes ccp-nav-item {
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.nav__list > li,
.nav__cta {
opacity: 1;
transform: none;
}
} @media (width <= 767px) {
:root {
--header-h: 68px;
}
.header__inner {
gap: 0.5rem;
}
.brand img {
width: 54px;
height: 43px;
}
.nav-toggle {
width: 44px;
height: 44px;
}
} @media (width >= 1200px) {
.nav__cta {
display: none;
}
} .hero {
position: relative;
display: flex;
align-items: center;
min-height: 80vh;
isolation: isolate;
overflow: hidden;
color: var(--white);
} .hero__slideshow {
position: absolute;
inset: 0;
z-index: -2;
background: var(--purple-deep);
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
animation: ccp-hero-slide var(--cycle) linear var(--delay) infinite;
}
.hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
} @keyframes ccp-hero-slide {
0% {
opacity: 0;
transform: scale(1);
}
2.5% {
opacity: 1;
}
25% {
opacity: 1;
}
27.5% {
opacity: 0;
transform: scale(1.12);
}
100% {
opacity: 0;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.hero__slide {
animation: none;
}
.hero__slide:first-child {
opacity: 1;
}
}
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(250deg, rgb(2 1 1 / 0%) 0%, var(--purple-deep) 100%);
}
.hero__inner {
width: min(100% - 2.5rem, var(--container));
margin-inline: auto;
padding-top: 64px;
}
.hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 60%;
padding-inline-end: 15px;
padding-top: 20px;
min-height: 300px;
justify-content: center;
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
border: 1px solid var(--gold);
border-radius: var(--radius);
color: var(--white);
font-size: 16px;
font-weight: 600;
line-height: 1.1;
text-transform: uppercase;
}
.hero__badge .icon {
width: 20px;
height: 20px;
fill: var(--purple-soft);
flex-shrink: 0;
}
.hero__title {
font-size: 58px;
font-weight: 600;
line-height: 1.1em;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0;
}
.hero__lead {
font-size: 20px;
font-weight: 400;
line-height: 1.5em;
color: var(--white);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
@media (width <= 1024px) {
.hero__content {
width: 80%;
}
.hero__inner {
padding-top: 0;
}
}
@media (width <= 767px) {
.hero {
min-height: 70vh;
}
.hero__content {
width: 100%;
padding-inline-end: 0;
gap: 16px;
}
.hero__badge {
max-width: 100%;
padding: 8px 14px;
font-size: 13px;
letter-spacing: 0.01em;
}
.hero__title {
font-size: clamp(2rem, 8.5vw, 2.6rem);
}
.hero__lead {
font-size: 17px;
}
.hero__actions {
gap: 12px;
width: 100%;
}
.hero__actions .btn {
flex: 1 1 auto;
justify-content: center;
}
} .hero--page {
display: grid;
place-items: center;
min-height: clamp(280px, 38vh, 400px);
padding-block: var(--space-2xl);
text-align: center;
}
.hero--page .hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero--page .hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero--page .hero__content {
width: 100%;
align-items: center;
padding: 0;
min-height: 0;
}
.hero--page .hero__title {
color: var(--white);
font-size: var(--step-3);
} .breadcrumb__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-top: var(--space-s);
font-size: var(--step--1);
}
.breadcrumb__item + .breadcrumb__item::before {
content: '/';
margin-inline-end: 0.5rem;
opacity: 0.5;
}
.hero .breadcrumb a {
color: var(--gold);
text-decoration: none;
}
.hero .breadcrumb a:hover {
text-decoration: underline;
}
.hero .breadcrumb [aria-current] {
color: rgb(255 255 255 / 80%);
} .trust {
background: var(--purple);
color: var(--white);
}
.trust__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--space-m);
padding-block: var(--space-l);
}
.trust__item {
display: flex;
align-items: center;
gap: var(--space-s);
text-align: start;
}
.trust__icon {
display: grid;
place-items: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--white);
color: var(--purple);
}
.trust__icon .icon {
width: 26px;
height: 26px;
fill: currentcolor;
}
.trust__label {
font-weight: 700;
font-size: var(--step-0);
color: var(--white);
} .split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
align-items: center;
gap: clamp(2rem, 5vw, 4.5rem);
}
.split--reverse .split__media {
order: 2;
}
.split__media img {
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
aspect-ratio: 4 / 3;
object-fit: cover;
}
.split__body > * + * {
margin-top: var(--space-s);
}
.split__body .section-head {
margin-bottom: var(--space-s);
} .grid {
display: grid;
gap: var(--space-m);
}
.grid--3 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.grid--2 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.grid--4 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.card {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition:
transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-soft),
border-color var(--dur) var(--ease-soft);
}
.card:hover {
transform: translateY(-4px);
border-color: var(--purple-line);
box-shadow: var(--shadow-lg);
}
.card__media {
overflow: hidden;
}
.card__media img {
width: 100%;
aspect-ratio: 16 / 11;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img {
transform: scale(1.045);
}
.card__body {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--space-2xs);
padding: var(--space-m);
}
.card__meta {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--purple);
}
.card__title {
font-size: var(--step-1);
}
.card__title a {
color: inherit;
text-decoration: none;
}
.card__text {
color: var(--muted);
font-size: var(--step--1);
flex: 1;
}
.card__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: var(--space-2xs);
font-weight: 700;
font-size: var(--step--1);
text-decoration: none;
}
.card__link .icon {
width: 1em;
height: 1em;
fill: currentcolor;
transition: transform 0.25s var(--ease);
}
.card__link {
position: relative;
}
.card__link::after {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0.15em;
height: 1px;
background: currentcolor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--dur) var(--ease-out);
}
.card__link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.card__link:hover .icon {
transform: translatex(3px);
} .features {
display: grid;
gap: var(--space-m);
}
.feature {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-s);
align-items: start;
}
.feature__icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius);
background: var(--purple-soft);
color: var(--purple);
}
.feature__icon .icon {
width: 22px;
height: 22px;
fill: currentcolor;
}
.feature__title {
font-size: var(--step-1);
margin-bottom: 0.25rem;
}
.feature__text {
color: var(--muted);
font-size: var(--step--1);
}
.section--purple .feature__icon {
background: rgb(255 255 255 / 12%);
color: var(--gold);
}
.section--purple .feature__text {
color: rgb(255 255 255 / 78%);
} .checklist {
display: grid;
gap: 0.65rem;
}
.checklist li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.7rem;
align-items: start;
font-size: var(--step--1);
}
.checklist .icon {
width: 20px;
height: 20px;
margin-top: 0.15rem;
fill: var(--purple);
flex-shrink: 0;
}
.section--purple .checklist .icon {
fill: var(--gold);
} .service {
scroll-margin-top: calc(var(--header-h) + 2rem);
padding-block: var(--space-xl);
border-top: 1px solid var(--border);
}
.service:first-of-type {
border-top: 0;
}
.service__tagline {
color: var(--purple);
font-weight: 700;
font-size: var(--step-1);
margin-bottom: var(--space-xs);
}
.service__subtitle {
margin-block: var(--space-m) var(--space-xs);
font-size: var(--step-1);
} .gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: var(--space-s);
}
.gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-lg);
transition: transform var(--dur-slow) var(--ease-out);
}
.gallery figure {
overflow: hidden;
border-radius: var(--radius-lg);
margin: 0;
}
.gallery figure:hover img {
transform: scale(1.06);
} .areas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
}
.areas li {
padding: 0.55rem 1.15rem;
border: 1px solid var(--purple-line);
border-radius: var(--radius-pill);
background: var(--white);
color: var(--purple-deep);
font-size: var(--step--1);
font-weight: 600;
transition:
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur) var(--ease-soft),
background-color var(--dur) var(--ease-soft);
}
.areas li:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.areas li[data-tier='core'] {
background: var(--purple);
border-color: var(--purple);
color: var(--white);
} .faq {
display: grid;
gap: var(--space-xs);
max-width: 60rem;
margin-inline: auto;
}
.faq__item {
overflow: hidden;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.faq__item[open] {
border-color: var(--purple-line);
box-shadow: var(--shadow-sm);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
padding: var(--space-s) var(--space-m);
cursor: pointer;
font-weight: 700;
color: var(--purple-deep);
list-style: none;
}
.faq__question::-webkit-details-marker {
display: none;
}
.faq__question::after {
content: '';
flex-shrink: 0;
width: 12px;
height: 12px;
border-right: 2px solid var(--purple);
border-bottom: 2px solid var(--purple);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__question::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.faq__answer {
padding: 0 var(--space-m) var(--space-m);
color: var(--muted);
font-size: var(--step--1);
} .faq__item[data-animated] .faq__answer {
overflow: hidden;
transition:
height var(--dur) var(--ease-out),
opacity var(--dur-fast) var(--ease-soft);
}
.faq__item[data-animated][data-state='closing'] .faq__answer,
.faq__item[data-animated][data-state='opening'] .faq__answer {
opacity: 0.4;
} .cta {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: var(--space-2xl);
text-align: center;
color: var(--white);
}
.cta::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(120deg, var(--purple-deep), var(--purple));
}
.cta__title {
color: var(--white);
font-size: var(--step-3);
max-width: 24ch;
margin-inline: auto;
}
.cta__text {
max-width: 60ch;
margin: var(--space-s) auto 0;
color: rgb(255 255 255 / 85%);
}
.cta .btn-row {
justify-content: center;
} .contact-list {
display: grid;
gap: var(--space-s);
}
.contact-list li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-s);
align-items: center;
padding: var(--space-s);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.contact-list__icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--purple-soft);
color: var(--purple);
}
.contact-list__icon .icon {
width: 20px;
height: 20px;
fill: currentcolor;
}
.contact-list dt {
font-size: var(--step--1);
color: var(--muted);
}
.contact-list dd {
margin: 0;
font-weight: 700;
color: var(--purple-deep);
}
.contact-list a {
color: inherit;
text-decoration: none;
}
.contact-list a:hover {
color: var(--purple);
text-decoration: underline;
} .form {
display: grid;
gap: var(--space-s);
padding: clamp(1.5rem, 3vw, 2.5rem);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.form__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: var(--space-s);
}
.field {
display: grid;
gap: 0.4rem;
}
.field label {
font-size: var(--step--1);
font-weight: 700;
color: var(--purple-deep);
}
.field .required {
color: #c0392b;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--white);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--purple);
box-shadow: 0 0 0 3px rgb(83 47 139 / 14%);
outline: none;
}
.field textarea {
min-height: 8rem;
resize: vertical;
} .field select {
appearance: none;
padding-inline-end: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23532f8b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1rem;
cursor: pointer;
}
.field select:focus {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328045f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
} .field select:has(option[value='']:checked) {
color: var(--muted);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--muted);
opacity: 0.75;
}
.field input:hover:not(:focus),
.field select:hover:not(:focus),
.field textarea:hover:not(:focus) {
border-color: var(--purple-line);
}
.field__hint {
font-size: 0.8rem;
color: var(--muted);
}
.field--honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form__status {
padding: 0.85rem 1rem;
border-radius: var(--radius);
font-size: var(--step--1);
font-weight: 600;
}
.form__status[data-state='success'] {
background: #e8f6ee;
color: #1c6b3f;
}
.form__status[data-state='error'] {
background: #fdecea;
color: #a33227;
}
.form button[type='submit'][aria-busy='true'] {
opacity: 0.7;
pointer-events: none;
} .footer {
background: var(--purple-deep);
color: rgb(255 255 255 / 78%);
padding-block: var(--space-2xl) var(--space-m);
}
.footer a {
color: rgb(255 255 255 / 78%);
text-decoration: none;
}
.footer a:hover {
color: var(--gold);
}
.footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: var(--space-l);
}
.footer__heading {
margin-bottom: var(--space-s);
color: var(--white);
font-size: var(--step-0);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.footer__list {
display: grid;
gap: 0.55rem;
font-size: var(--step--1);
}
.footer__brand p {
margin-top: var(--space-s);
font-size: var(--step--1);
max-width: 34ch;
}
.footer__brand img {
width: 84px;
border-radius: 8px;
}
.footer__legal-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
}
.footer__legal-list a {
font-size: 0.85rem;
text-decoration: underline;
text-decoration-color: rgb(255 255 255 / 25%);
text-underline-offset: 0.25em;
}
.footer__bottom a {
text-decoration: underline;
text-decoration-color: rgb(255 255 255 / 25%);
text-underline-offset: 0.25em;
transition: text-decoration-color var(--dur) var(--ease-soft);
}
.footer__bottom a:hover {
text-decoration-color: var(--gold);
}
.footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-m);
margin-top: var(--space-xl);
padding-top: var(--space-m);
border-top: 1px solid rgb(255 255 255 / 14%);
font-size: 0.85rem;
} .to-top {
position: fixed;
inset-block-end: 1.25rem;
inset-inline-end: 1.25rem;
z-index: 90;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: var(--purple);
color: var(--white);
box-shadow: var(--shadow-md);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.to-top[data-visible='true'] {
opacity: 1;
visibility: visible;
transform: none;
}
.to-top .icon {
width: 20px;
height: 20px;
fill: currentcolor;
} @media (prefers-reduced-motion: no-preference) {
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition:
opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
[data-reveal='in'] {
opacity: 1;
transform: none;
} [data-reveal] > .card,
[data-reveal] > .feature,
[data-reveal] > figure {
opacity: 0;
transform: translateY(14px);
transition:
opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal='in'] > .card,
[data-reveal='in'] > .feature,
[data-reveal='in'] > figure {
opacity: 1;
transform: none;
}
} @media (width <= 1199px), (pointer: coarse) {
.card__link,
.breadcrumb__item a,
.breadcrumb__item span,
.footer__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.card__title a,
.feature__title a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer__list {
gap: 0;
}
.faq__question {
min-height: 56px;
}
} .panel {
padding: var(--space-m);
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.panel--in {
border-inline-start: 5px solid var(--purple);
}
.panel--out {
background: transparent;
border-style: dashed;
}
.panel__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: var(--space-s);
font-size: var(--step-1);
}
.panel__title .icon {
width: 1.1em;
height: 1.1em;
fill: var(--purple);
flex-shrink: 0;
}
.panel__note {
margin-top: var(--space-s);
font-size: 0.85rem;
color: var(--muted);
}
.checklist--muted li {
color: var(--muted);
}
.checklist--muted li > span:first-child {
color: var(--purple-line);
font-weight: 700;
}
.feature__icon--num {
font-weight: 800;
font-size: var(--step-1);
color: var(--purple);
} .quote .card__body {
gap: var(--space-s);
}
.quote__mark {
display: block;
margin-bottom: -1.5rem;
font-size: 3.5rem;
line-height: 1;
color: var(--purple-line);
}
.quote__text {
margin: 0;
color: var(--body);
font-size: var(--step-0);
line-height: 1.7;
flex: 1;
}
.quote__author {
display: grid;
gap: 0.1rem;
padding-top: var(--space-s);
border-top: 1px solid var(--border);
font-weight: 700;
color: var(--purple-deep);
font-size: var(--step--1);
}
.quote__role {
font-weight: 400;
color: var(--muted);
} .map {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background: var(--surface-alt);
}
.map__frame {
display: block;
width: 100%;
height: clamp(320px, 46vh, 460px);
border: 0; filter: saturate(0.75) contrast(1.02);
}
.map__panel {
position: absolute;
inset-block-end: var(--space-m);
inset-inline-start: var(--space-m);
max-width: min(100% - 3rem, 22rem);
padding: var(--space-m);
background: rgb(255 255 255 / 94%);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.map__label {
font-weight: 800;
color: var(--purple-deep);
}
.map__address {
margin-top: 0.25rem;
font-style: normal;
font-size: var(--step--1);
color: var(--muted);
}
.map__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: var(--space-s);
}
.map__actions .btn {
padding: 0.7rem 1.1rem;
font-size: var(--step--1);
}
@media (width <= 600px) {
.map__panel {
position: static;
max-width: none;
border: 0;
border-top: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
background: var(--white);
}
.map__actions .btn {
flex: 1 1 auto;
justify-content: center;
}
} .guarantee__card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(1.25rem, 4vw, 3rem);
padding: clamp(1.5rem, 4vw, 3rem);
background: linear-gradient(135deg, var(--purple-deep), var(--purple));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: rgb(255 255 255 / 88%);
}
.guarantee__seal { --seal: clamp(108px, 24vw, 148px);
--ring: 2px;
position: relative;
display: grid;
place-items: center;
width: var(--seal);
aspect-ratio: 1;
flex-shrink: 0;
border: var(--ring) solid var(--gold);
border-radius: 50%;
color: var(--gold);
text-align: center;
} .guarantee__seal::before {
content: '';
position: absolute;
inset: 6%;
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgb(242 205 95 / 12%), transparent 70%);
}
.guarantee__sealInner {
position: relative;
display: grid;
justify-items: center;
line-height: 1;
}
.guarantee__check {
width: calc(var(--seal) * 0.17);
height: auto;
margin-block-end: calc(var(--seal) * 0.035);
fill: var(--gold);
}
.guarantee__value {
font-size: calc(var(--seal) * 0.3);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--gold);
}
.guarantee__unit {
font-size: calc(var(--seal) * 0.088);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgb(255 255 255 / 72%);
} .guarantee__orbit {
position: absolute;
inset: 0;
border-radius: 50%;
animation: ccp-orbit 16s linear infinite;
}
.guarantee__orbit::after {
content: '';
position: absolute;
top: calc(var(--ring) / -2);
left: 50%;
width: var(--dot);
height: var(--dot);
margin-block-start: calc(var(--dot) / -2);
margin-inline-start: calc(var(--dot) / -2);
border-radius: 50%;
background: var(--dot-bg, var(--gold));
box-shadow: var(--dot-glow, none);
} .guarantee__orbit--a {
--dot: calc(var(--seal) * 0.088);
--dot-glow: 0 0 0 calc(var(--seal) * 0.022) rgb(242 205 95 / 20%);
animation-delay: -2s;
}
.guarantee__orbit--b {
--dot: calc(var(--seal) * 0.055);
--dot-bg: rgb(242 205 95 / 65%);
animation-delay: -8.1s;
} .guarantee__orbit--c {
--dot: calc(var(--seal) * 0.038);
--dot-bg: rgb(255 255 255 / 85%);
animation-duration: 23s;
animation-delay: -15s;
}
@keyframes ccp-orbit {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.guarantee__orbit {
animation: none;
} .guarantee__orbit--a { transform: rotate(28deg); }
.guarantee__orbit--b { transform: rotate(150deg); }
.guarantee__orbit--c { transform: rotate(255deg); }
}
.guarantee__title {
margin-bottom: var(--space-xs);
color: var(--white);
font-size: var(--step-2);
}
.guarantee__note {
margin-top: var(--space-s);
padding-top: var(--space-s);
border-top: 1px solid rgb(255 255 255 / 18%);
font-size: var(--step--1);
color: rgb(255 255 255 / 72%);
}
.guarantee__signals {
margin-top: var(--space-l);
}
@media (width <= 600px) {
.guarantee__card {
grid-template-columns: 1fr;
justify-items: start;
}
} .pillar-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
margin-block: var(--space-l);
padding: var(--space-m);
background: var(--surface-alt);
border: 1px solid var(--purple-line);
border-inline-start: 5px solid var(--purple);
border-radius: var(--radius);
}
.pillar-cta > div {
flex: 1 1 20rem;
}
.pillar-cta__title {
margin-bottom: 0.35rem;
font-size: var(--step-1);
}
.pillar-cta p {
color: var(--muted);
font-size: var(--step--1);
} .contextual-link {
color: var(--purple);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--purple-line);
text-decoration-thickness: 2px;
}
.contextual-link:hover {
text-decoration-color: var(--purple);
} .prose > * + * {
margin-top: var(--space-s);
}
.prose h2 {
margin-top: var(--space-l);
font-size: var(--step-2);
}
.prose h3 {
margin-top: var(--space-m);
font-size: var(--step-1);
}
.prose ul {
padding-inline-start: 1.25rem;
list-style: disc;
}
.prose li {
margin-top: 0.4rem;
}
.prose a {
font-weight: 600;
} .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.text-center {
text-align: center;
}
@media print {
.header,
.footer,
.to-top,
.cta {
display: none;
}
}