@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Square+Peg&display=swap"); :root {
--font-display: 'Square Peg', cursive;
--font-body: 'Quicksand', sans-serif; --teal-50: #f0f7f8;
--teal-100: #d9eaed;
--teal-200: #b7d7dc;
--teal-300: #86bcc5;
--teal-400: #5a9ba7;
--teal-500: #417584;
--teal-600: #3a6574;
--teal-700: #335460; --coral-100: #fce8e9;
--coral-200: #f9d4d6;
--coral-300: #f4b3b6;
--coral-400: #DA868A;
--coral-500: #d06b70;
--coral-600: #ba4f55; --night-50: #f6f7f8;
--night-100: #ebedef;
--night-200: #d3d7dc;
--night-300: #adb5be;
--night-400: #818d9a;
--night-500: #63707f;
--night-600: #4f5a68;
--night-700: #414a55;
--night-800: #394049;
--night-900: #23282e;
--night-950: #14171a;
} *, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
margin: 0;
padding: 0;
background-color: white;
color: var(--night-700);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.dark body {
background-color: var(--night-950);
color: var(--night-200);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-body);
font-weight: 600;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
} .header-top-bar {
display: none;
background-color: var(--teal-500);
color: white;
font-size: 14px;
padding: 8px 0;
}
@media (min-width: 768px) {
.header-top-bar {
display: block;
}
}
.header-top-bar .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-top-left {
display: flex;
align-items: center;
gap: 1.5rem;
}
.header-top-left a {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
transition: color 0.3s;
}
.header-top-left a:hover {
color: var(--coral-300);
}
.header-top-right {
display: flex;
align-items: center;
gap: 1rem;
}
.header-location {
color: var(--teal-200);
}
.header-social {
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-social a {
color: white;
transition: color 0.3s;
}
.header-social a:hover {
color: var(--coral-300);
} .site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
transition: all 0.3s;
}
.site-header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.dark .site-header {
background-color: rgba(20, 23, 26, 0.8);
}
.site-header .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.site-header nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
} .site-logo {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
z-index: 10;
}
.site-logo .star-group {
position: relative;
}
.site-logo .star-main {
width: 36px;
height: 36px;
}
.site-logo .star-small-1 {
position: absolute;
top: -6px;
left: 2px;
width: 10px;
height: 10px;
opacity: 0.5;
animation: pulse 2s infinite;
animation-delay: 0.5s;
}
.site-logo .star-small-2 {
position: absolute;
top: 4px;
left: -10px;
width: 6px;
height: 6px;
opacity: 0.4;
animation: pulse 2s infinite;
animation-delay: 1s;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.3; }
}
.site-logo .logo-text {
line-height: 1.1;
}
.site-logo .logo-text .title {
font-size: 1.125rem; font-weight: 600;
color: var(--teal-500);
}
.site-logo .logo-text .subtitle {
font-size: 0.875rem; font-weight: 500;
color: var(--teal-500);
margin-top: -2px;
} .main-nav {
display: none;
}
@media (min-width: 768px) {
.main-nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
}
.main-nav a {
padding: 0.5rem 1rem;
font-weight: 500;
color: var(--night-700);
transition: color 0.3s;
position: relative;
}
.dark .main-nav a {
color: var(--night-200);
}
.main-nav a:hover {
color: var(--teal-500);
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: var(--coral-400);
transition: width 0.3s;
}
.main-nav a:hover::after {
width: 80%;
} .main-nav ul {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
list-style: none;
}
.main-nav li::before,
.main-nav li::marker {
content: none !important;
display: none !important;
} .header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
} .dark-mode-toggle {
padding: 0.5rem;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
transition: background 0.3s;
}
.dark-mode-toggle:hover {
background-color: var(--night-100);
}
.dark .dark-mode-toggle:hover {
background-color: var(--night-800);
} .dark-mode-toggle .icon-moon {
display: block;
color: var(--teal-600);
}
.dark-mode-toggle .icon-sun {
display: none;
color: var(--coral-400);
}
.dark .dark-mode-toggle .icon-moon {
display: none;
}
.dark .dark-mode-toggle .icon-sun {
display: block;
} .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background-color: var(--coral-400);
color: white;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 14px rgba(218, 134, 138, 0.3);
}
.btn-primary:hover {
background-color: var(--coral-500);
box-shadow: 0 6px 20px rgba(218, 134, 138, 0.4);
transform: translateY(-2px);
} .btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background-color: transparent;
color: var(--teal-600);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.5rem;
border: 2px solid var(--teal-500);
cursor: pointer;
transition: all 0.3s;
}
.btn-outline:hover {
background-color: var(--teal-500);
color: white;
} .header-cta {
display: none;
}
@media (min-width: 768px) {
.header-cta {
display: inline-flex;
}
} .mobile-menu-toggle {
display: flex;
padding: 0.5rem;
border: none;
background: transparent;
border-radius: 0.5rem;
cursor: pointer;
}
@media (min-width: 768px) {
.mobile-menu-toggle {
display: none;
}
}
.mobile-menu-toggle svg {
width: 24px;
height: 24px;
color: var(--night-700);
}
.dark .mobile-menu-toggle svg {
color: var(--night-200);
} .hero-section {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-background {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, var(--teal-50), white, #fdf4f4);
}
.dark .hero-background {
background: linear-gradient(to bottom right, #1a2428, #1e2a2f, #243035);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1rem;
}
.hero-grid {
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
} .hero-text {
order: 2;
}
@media (min-width: 1024px) {
.hero-text {
order: 1;
}
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--coral-100);
color: var(--coral-600);
font-size: 0.875rem;
font-weight: 600;
border-radius: 9999px;
margin-bottom: 1.5rem;
}
.dark .hero-badge {
background-color: rgba(218, 134, 138, 0.2);
color: var(--coral-300);
}
.hero-title-script {
display: block;
font-family: var(--font-display);
font-size: 3rem;
color: var(--teal-500);
line-height: 1.1;
}
@media (min-width: 768px) {
.hero-title-script {
font-size: 3.75rem;
}
}
.hero-title-sub {
font-size: 1.5rem;
font-weight: 600;
color: var(--night-900);
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.hero-title-sub {
font-size: 1.875rem;
}
}
.dark .hero-title-sub {
color: white;
}
.hero-gradient {
background: linear-gradient(to right, var(--teal-500), var(--coral-400));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.125rem;
color: var(--night-600);
margin-bottom: 2rem;
line-height: 1.75;
}
.dark .hero-description {
color: var(--night-300);
}
.hero-description strong {
color: var(--night-900);
}
.dark .hero-description strong {
color: white;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--teal-100);
color: var(--teal-600);
font-size: 0.875rem;
font-weight: 500;
border-radius: 9999px;
}
.dark .hero-tag {
background-color: rgba(65, 117, 132, 0.2);
color: var(--teal-300);
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
} .hero-image-wrapper {
order: 1;
position: relative;
max-width: 28rem;
margin: 0 auto;
}
@media (min-width: 1024px) {
.hero-image-wrapper {
order: 2;
}
}
.hero-image-container {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 4px solid white;
}
.dark .hero-image-container {
border-color: var(--night-800);
}
.hero-image-container img {
width: 100%;
height: auto;
display: block;
} .hero-google-badge {
position: absolute;
bottom: -1rem;
right: -1rem;
background-color: white;
border-radius: 1rem;
padding: 0.75rem 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 0.75rem;
}
.dark .hero-google-badge {
background-color: var(--night-800);
}
.hero-google-stars {
color: #fbbf24;
font-size: 1rem;
}
.hero-google-text {
font-weight: 600;
font-size: 0.875rem;
color: var(--night-900);
}
.dark .hero-google-text {
color: white;
}
.hero-google-subtext {
font-size: 0.75rem;
color: var(--night-500);
} .twinkling-star {
position: absolute;
animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
} .services-section {
padding: 5rem 0;
background-color: white;
}
.dark .services-section {
background-color: var(--night-950);
}
.section-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: var(--coral-100);
color: var(--coral-600);
font-size: 0.875rem;
font-weight: 600;
border-radius: 9999px;
margin-bottom: 1rem;
}
.dark .section-badge {
background-color: rgba(218, 134, 138, 0.2);
color: var(--coral-300);
}
.section-title {
font-size: 2rem;
font-weight: 600;
color: var(--night-900);
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.section-title {
font-size: 2.5rem;
}
}
.dark .section-title {
color: white;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--night-600);
max-width: 42rem;
margin: 0 auto;
}
.dark .section-subtitle {
color: var(--night-400);
} .services-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.service-card {
padding: 2rem;
border-radius: 1.5rem;
border: 1px solid transparent;
transition: all 0.3s;
}
.service-card:hover {
border-color: var(--coral-200);
transform: translateY(-4px);
}
.service-card.coral-bg {
background-color: var(--coral-100);
}
.dark .service-card.coral-bg {
background-color: rgba(218, 134, 138, 0.1);
}
.service-card.teal-bg {
background-color: var(--teal-50);
}
.dark .service-card.teal-bg {
background-color: rgba(65, 117, 132, 0.1);
}
.service-card.night-bg {
background-color: var(--night-50);
}
.dark .service-card.night-bg {
background-color: rgba(57, 64, 73, 0.3);
}
.service-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.service-card.coral-bg .service-icon {
background-color: var(--coral-200);
color: var(--coral-600);
}
.service-card.teal-bg .service-icon {
background-color: var(--teal-100);
color: var(--teal-600);
}
.service-card.night-bg .service-icon {
background-color: var(--night-100);
color: var(--night-600);
}
.service-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-900);
margin-bottom: 0.75rem;
}
.dark .service-card h3 {
color: white;
}
.service-card p {
color: var(--night-600);
margin-bottom: 1.5rem;
line-height: 1.625;
}
.dark .service-card p {
color: var(--night-400);
}
.service-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.service-feature {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.service-card.coral-bg .service-feature {
background-color: var(--coral-200);
color: var(--coral-700);
}
.service-card.teal-bg .service-feature {
background-color: var(--teal-100);
color: var(--teal-700);
}
.service-card.night-bg .service-feature {
background-color: var(--night-100);
color: var(--night-700);
}
.service-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--night-600);
transition: color 0.3s;
}
.service-link:hover {
color: var(--coral-500);
}
.service-link svg {
width: 1rem;
height: 1rem;
transition: transform 0.3s;
}
.service-link:hover svg {
transform: translateX(4px);
} .portfolio-section {
padding: 5rem 0;
background-color: var(--night-50);
}
.dark .portfolio-section {
background-color: var(--night-900);
}
.portfolio-grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 768px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.portfolio-item {
position: relative;
border-radius: 1rem;
overflow: hidden;
aspect-ratio: 4/3;
}
.portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 23, 26, 0.9), rgba(20, 23, 26, 0.4), transparent);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
opacity: 0;
transition: opacity 0.3s;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-category {
font-size: 0.75rem;
font-weight: 600;
color: var(--coral-400);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.portfolio-title {
font-size: 1.25rem;
font-weight: 600;
color: white;
}
.portfolio-cta {
text-align: center;
margin-top: 3rem;
}
.portfolio-empty {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
color: var(--night-500);
} .about-section {
padding: 5rem 0;
background: linear-gradient(to bottom right, var(--teal-50), white, #fdf4f4);
position: relative;
}
.dark .about-section {
background: linear-gradient(to bottom right, #1a2428, #1e2a2f, #243035);
}
.about-grid {
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.about-grid {
grid-template-columns: 1fr 1fr;
gap: 5rem;
}
} .about-image-wrapper {
position: relative;
display: flex;
justify-content: center;
}
.about-photo {
position: relative;
}
.about-photo-circle {
width: 16rem;
height: 16rem;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--coral-300);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
.about-photo-circle {
width: 20rem;
height: 20rem;
}
}
.dark .about-photo-circle {
border-color: rgba(218, 134, 138, 0.4);
}
.about-photo-circle img {
width: 100%;
height: 100%;
object-fit: cover;
} .about-france-num {
position: absolute;
bottom: -1rem;
right: -1rem;
background-color: white;
border-radius: 1rem;
padding: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid var(--night-100);
display: flex;
align-items: center;
gap: 0.75rem;
}
.dark .about-france-num {
background-color: var(--night-800);
border-color: var(--night-700);
}
.about-france-num img {
width: 50px;
height: 50px;
border-radius: 0.25rem;
object-fit: contain;
}
.about-france-num-text {
font-size: 0.875rem;
font-weight: 600;
color: var(--night-900);
}
.dark .about-france-num-text {
color: white;
}
.about-france-num-subtext {
font-size: 0.75rem;
color: var(--night-500);
} .about-content h2 {
font-size: 2rem;
font-weight: 600;
color: var(--night-900);
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.about-content h2 {
font-size: 2.5rem;
}
}
.dark .about-content h2 {
color: white;
}
.about-text {
color: var(--night-600);
margin-bottom: 1rem;
line-height: 1.75;
}
.dark .about-text {
color: var(--night-300);
}
.about-text strong {
color: var(--night-900);
}
.dark .about-text strong {
color: white;
} .about-highlights {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 2rem 0;
}
.about-highlight {
display: flex;
align-items: center;
gap: 0.75rem;
}
.about-highlight-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
background-color: var(--teal-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dark .about-highlight-icon {
background-color: rgba(65, 117, 132, 0.2);
}
.about-highlight-icon svg {
width: 1.25rem;
height: 1.25rem;
color: var(--teal-600);
}
.dark .about-highlight-icon svg {
color: var(--teal-400);
}
.about-highlight-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--night-900);
}
.dark .about-highlight-label {
color: white;
}
.about-highlight-desc {
font-size: 0.75rem;
color: var(--night-500);
}
.dark .about-highlight-desc {
color: var(--night-400);
}
.about-ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
} .testimonials-section {
padding: 5rem 0;
background-color: var(--night-50);
}
.dark .testimonials-section {
background-color: var(--night-900);
}
.testimonials-grid {
display: grid;
gap: 1.5rem;
}
@media (min-width: 768px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.testimonial-card {
background-color: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid var(--night-100);
display: flex;
flex-direction: column;
height: 100%;
}
.dark .testimonial-card {
background-color: var(--night-800);
border-color: var(--night-700);
}
.testimonial-quote-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--coral-100);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.dark .testimonial-quote-icon {
background-color: rgba(218, 134, 138, 0.2);
}
.testimonial-quote-icon svg {
width: 1.25rem;
height: 1.25rem;
color: var(--coral-500);
}
.testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 1rem;
color: #fbbf24;
}
.testimonial-text {
color: var(--night-600);
line-height: 1.625;
flex: 1;
}
.dark .testimonial-text {
color: var(--night-300);
}
.testimonial-read-more {
color: var(--teal-500);
font-size: 0.875rem;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-top: 0.5rem;
}
.testimonial-footer {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--night-100);
display: flex;
justify-content: space-between;
align-items: center;
}
.dark .testimonial-footer {
border-top-color: var(--night-700);
}
.testimonial-author {
font-weight: 600;
font-size: 0.875rem;
color: var(--night-900);
}
.dark .testimonial-author {
color: white;
}
.testimonial-date {
font-size: 0.75rem;
color: var(--night-500);
}
.testimonial-source {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--night-400);
}
.testimonials-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.testimonials-nav-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: white;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.dark .testimonials-nav-btn {
background-color: var(--night-800);
}
.testimonials-nav-btn:hover {
background-color: var(--coral-50);
}
.testimonials-dots {
display: flex;
gap: 0.5rem;
}
.testimonials-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background-color: var(--night-300);
border: none;
cursor: pointer;
transition: all 0.3s;
}
.testimonials-dot.active {
width: 1.5rem;
background-color: var(--coral-400);
}
.testimonials-google-link {
text-align: center;
margin-top: 2rem;
}
.testimonials-google-link a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--teal-500);
font-weight: 500;
}
.testimonials-empty {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
color: var(--night-500);
} .cta-section {
position: relative;
padding: 6rem 0;
overflow: hidden;
background: linear-gradient(to bottom right, var(--teal-500), var(--teal-600), var(--teal-700));
}
.cta-section .section-container {
position: relative;
z-index: 10;
text-align: center;
max-width: 48rem;
margin: 0 auto;
padding: 0 1rem;
} .cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.1);
color: white;
font-size: 0.875rem;
font-weight: 600;
border-radius: 9999px;
margin-bottom: 1.5rem;
} .cta-title {
font-family: var(--font-display);
font-size: 3rem;
color: white;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.cta-title {
font-size: 4rem;
}
} .cta-text {
font-size: 1.25rem;
color: var(--teal-100);
margin-bottom: 2.5rem;
line-height: 1.625;
} .cta-contact-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
.cta-contact-links {
flex-direction: row;
justify-content: center;
gap: 1.5rem;
}
}
.cta-contact-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
border-radius: 0.5rem;
color: white;
font-weight: 500;
transition: background 0.3s;
}
.cta-contact-link:hover {
background-color: rgba(255, 255, 255, 0.2);
} .cta-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
justify-content: center;
}
} .cta-btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background-color: var(--coral-400);
color: white;
font-weight: 600;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(218, 134, 138, 0.3);
transition: all 0.3s;
}
.cta-btn-primary:hover {
background-color: var(--coral-500);
box-shadow: 0 15px 35px rgba(218, 134, 138, 0.4);
} .cta-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
color: white;
font-weight: 600;
border-radius: 0.5rem;
transition: all 0.3s;
}
.cta-btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
} .cta-stars {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
} .site-footer {
background-color: var(--teal-500);
color: white;
}
.footer-main {
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.footer-main .section-container {
position: relative;
z-index: 10;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
.footer-grid {
display: grid;
gap: 3rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
}
} .footer-column h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} .footer-brand {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.footer-brand .star-main {
width: 36px;
height: 36px;
}
.footer-brand-text .title {
font-size: 1.125rem;
font-weight: 600;
color: white;
}
.footer-brand-text .subtitle {
font-size: 0.875rem;
color: var(--teal-200);
margin-top: -2px;
}
.footer-description {
font-size: 0.875rem;
color: var(--teal-100);
line-height: 1.625;
margin-bottom: 1.5rem;
} .footer-badges {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-badge-link {
display: block;
background-color: white;
border-radius: 0.5rem;
padding: 0.25rem;
transition: opacity 0.3s;
}
.footer-badge-link:hover {
opacity: 0.8;
}
.footer-badge-link img {
width: 6rem;
height: 6rem;
object-fit: contain;
} .footer-nav {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-nav a {
font-size: 0.875rem;
color: var(--teal-100);
transition: color 0.3s;
}
.footer-nav a:hover {
color: var(--coral-300);
} .footer-contact-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.footer-contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--teal-100);
}
.footer-contact-item svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.footer-contact-item a {
color: var(--teal-100);
transition: color 0.3s;
}
.footer-contact-item a:hover {
color: var(--coral-300);
} .footer-social {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.footer-social a {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: background 0.3s;
}
.footer-social a:hover {
background-color: var(--coral-400);
} .footer-cta-text {
font-size: 0.875rem;
color: var(--teal-100);
margin-bottom: 1rem;
}
.footer-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background-color: var(--coral-400);
color: white;
font-weight: 600;
border-radius: 0.5rem;
transition: background 0.3s;
}
.footer-cta-btn:hover {
background-color: var(--coral-500);
}
.footer-vcf-link {
display: block;
margin-top: 1rem;
font-size: 0.875rem;
color: var(--teal-200);
text-decoration: underline;
transition: color 0.3s;
}
.footer-vcf-link:hover {
color: var(--coral-300);
} .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding: 1.5rem 0;
}
.footer-bottom .section-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.footer-bottom .section-container {
flex-direction: row;
justify-content: space-between;
}
}
.footer-copyright {
font-size: 0.875rem;
color: var(--teal-200);
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal a {
font-size: 0.875rem;
color: var(--teal-200);
transition: color 0.3s;
}
.footer-legal a:hover {
color: var(--coral-300);
} .footer-stars {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
} .container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
} .fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}  .pricing-section {
padding: 5rem 0;
background: var(--night-50);
}
.dark .pricing-section {
background: var(--night-950);
} .pricing-grid {
display: grid;
gap: 1.5rem;
margin-top: 3rem;
}
@media (min-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1200px) {
.pricing-grid {
grid-template-columns: repeat(4, 1fr);
}
} .pricing-group-title {
text-align: center;
font-size: 1.35rem;
color: var(--night-800);
margin: 2.5rem 0 0.25rem;
}
.pricing-group-sub {
text-align: center;
color: var(--night-500);
margin: 0 auto;
max-width: 640px;
}
.pricing-grid.cols-3,
.pricing-grid.cols-2 {
margin-top: 1.25rem;
margin-left: auto;
margin-right: auto;
}
.pricing-grid.cols-3 { max-width: 1140px; }
.pricing-grid.cols-2 { max-width: 760px; }
@media (min-width: 1200px) {
.pricing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
} .pricing-card {
position: relative;
background: white;
border-radius: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--night-100);
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.dark .pricing-card {
background: var(--night-800);
border-color: var(--night-700);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.pricing-card.popular {
border-color: var(--teal-500);
border-width: 2px;
}
.pricing-badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
background: var(--teal-500);
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 1rem;
border-radius: 9999px;
white-space: nowrap;
}
.pricing-icon {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.pricing-icon svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.pricing-icon.coral-bg,
.pricing-icon.coral {
background: var(--coral-100);
color: var(--coral-600);
}
.pricing-icon.teal-bg,
.pricing-icon.teal {
background: var(--teal-100);
color: var(--teal-600);
}
.pricing-icon.night-bg,
.pricing-icon.night {
background: var(--night-100);
color: var(--night-600);
}
.dark .pricing-icon.coral-bg,
.dark .pricing-icon.coral {
background: rgba(218, 134, 138, 0.2);
color: var(--coral-400);
}
.dark .pricing-icon.teal-bg,
.dark .pricing-icon.teal {
background: rgba(65, 117, 132, 0.2);
color: var(--teal-400);
}
.dark .pricing-icon.night-bg,
.dark .pricing-icon.night {
background: rgba(99, 112, 127, 0.2);
color: var(--night-400);
}
.pricing-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--night-900);
margin-bottom: 0.5rem;
}
.dark .pricing-card h3 {
color: white;
}
.pricing-desc {
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.6;
margin-bottom: 1.25rem;
}
.dark .pricing-desc {
color: var(--night-400);
}
.pricing-price {
margin-bottom: 1.25rem;
padding: 1rem 0;
border-top: 1px solid var(--night-100);
border-bottom: 1px solid var(--night-100);
}
.dark .pricing-price {
border-color: var(--night-700);
}
.pricing-from {
display: block;
font-size: 0.75rem;
color: var(--night-500);
text-transform: uppercase;
margin-bottom: 0.125rem;
}
.pricing-amount {
font-size: 1.375rem;
font-weight: 700;
color: var(--night-900);
}
.dark .pricing-amount {
color: white;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
flex: 1;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--night-600);
margin-bottom: 0.5rem;
line-height: 1.5;
}
.pricing-features li svg {
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
flex-shrink: 0;
margin-top: 4px;
}
.dark .pricing-features li {
color: var(--night-300);
}
.pricing-card .btn-primary {
padding: 0.75rem 1rem;
font-size: 0.875rem;
width: 100%;
justify-content: center;
}
.pricing-card .btn-primary svg {
width: 16px;
height: 16px;
} .intro-section {
padding: 3rem 0;
background: linear-gradient(to bottom, var(--teal-50), #fdf8f8);
}
.dark .intro-section {
background: var(--night-900);
}
.intro-container {
text-align: center;
max-width: 850px;
}
.intro-title {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 1.5rem;
color: var(--night-900);
margin-bottom: 1.25rem;
}
.dark .intro-title {
color: white;
}
.intro-text {
font-size: 1rem;
color: var(--night-600);
line-height: 1.7;
margin-bottom: 0.75rem;
}
.dark .intro-text {
color: var(--night-300);
}
.intro-text strong {
color: var(--night-900);
}
.dark .intro-text strong {
color: white;
} .mockups-section {
padding: 3rem 0 4rem;
background: white;
}
.dark .mockups-section {
background: var(--night-900);
}
.mockups-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 3rem;
flex-wrap: wrap;
max-width: 900px;
margin: 0 auto;
} .mockup-desktop {
text-align: center;
width: 380px;
}
.mockup-desktop-wrapper {
position: relative;
}
.mockup-desktop-frame {
background: linear-gradient(180deg, #e8e8e8 0%, #d4d4d4 100%);
border-radius: 14px;
padding: 12px 12px 32px;
box-shadow: 
0 0 0 1px rgba(0,0,0,0.1),
0 20px 40px rgba(0, 0, 0, 0.15);
position: relative;
}
.mockup-desktop-frame::before {
content: '';
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #5a5a5a;
border-radius: 50%;
}
.mockup-desktop-frame::after {
content: '';
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 5px;
background: #b0b0b0;
border-radius: 3px;
}
.mockup-desktop-screen {
background: #fff;
border-radius: 3px;
overflow: hidden;
height: 220px;
position: relative;
}
.mockup-desktop-screen img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: transform 4s ease-in-out;
}
.mockup-desktop-wrapper:hover .mockup-desktop-screen img {
transform: translateY(calc(-100% + 220px));
}
.mockup-stand {
width: 70px;
height: 55px;
background: linear-gradient(180deg, #d0d0d0 0%, #a8a8a8 100%);
margin: 0 auto;
clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.mockup-base {
width: 100px;
height: 7px;
background: linear-gradient(180deg, #c0c0c0 0%, #909090 100%);
margin: 0 auto;
border-radius: 0 0 4px 4px;
}
.mockup-label {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--night-500);
text-align: center;
}
.dark .mockup-label {
color: var(--night-400);
} .mockup-mobile {
text-align: center;
}
.mockup-mobile-wrapper {
position: relative;
display: inline-block;
}
.mockup-mobile-frame {
background: #1a1a1a;
border-radius: 2.5rem;
padding: 0.625rem;
box-shadow: 0 0 0 2px #333, 0 20px 40px rgba(0, 0, 0, 0.2);
width: 170px;
}
.mockup-mobile-notch {
position: absolute;
top: 0.625rem;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 22px;
background: #1a1a1a;
border-radius: 0 0 1rem 1rem;
z-index: 10;
}
.mockup-mobile-screen {
background: #fff;
border-radius: 2rem;
overflow: hidden;
height: 340px;
position: relative;
}
.mockup-mobile-screen img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: transform 4s ease-in-out;
}
.mockup-mobile-wrapper:hover .mockup-mobile-screen img {
transform: translateY(calc(-100% + 340px));
} .steps-section {
padding: 5rem 0;
background: linear-gradient(to bottom, #fdf8f8, var(--teal-50));
}
.dark .steps-section {
background: var(--night-900);
}
.steps-grid {
display: grid;
gap: 1.5rem;
margin-top: 2.5rem;
position: relative;
}
@media (min-width: 768px) {
.steps-grid {
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.steps-grid::before {
content: '';
position: absolute;
top: 1.5rem;
left: 12.5%;
right: 12.5%;
height: 2px;
background: var(--coral-200);
z-index: 0;
}
}
.step-card {
text-align: center;
padding: 1rem;
position: relative;
z-index: 1;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background: white;
border: 2px solid var(--coral-300);
color: var(--coral-500);
font-size: 0.875rem;
font-weight: 700;
border-radius: 50%;
margin-bottom: 1rem;
}
.dark .step-number {
background: var(--night-800);
border-color: var(--coral-400);
color: var(--coral-400);
}
.step-card h3 {
font-size: 1.0625rem;
font-weight: 600;
color: var(--night-900);
margin: 0 0 0.5rem;
}
.dark .step-card h3 {
color: white;
}
.step-card p {
font-size: 0.875rem;
color: var(--night-600);
line-height: 1.6;
margin: 0;
}
.dark .step-card p {
color: var(--night-400);
} .benefits-section {
padding: 5rem 0;
background: var(--night-50);
}
.dark .benefits-section {
background: var(--night-900);
}
.benefits-grid {
display: grid;
gap: 1.5rem;
margin-top: 3rem;
}
@media (min-width: 768px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
background: white;
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dark .benefit-item {
background: var(--night-800);
}
.benefit-check {
width: 32px;
height: 32px;
min-width: 32px;
max-width: 32px;
min-height: 32px;
max-height: 32px;
background: var(--teal-100);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.benefit-check svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: var(--teal-500);
}
.dark .benefit-check {
background: rgba(65, 117, 132, 0.2);
}
.dark .benefit-check svg {
stroke: var(--teal-400);
}
.benefit-content h4 {
font-size: 1rem;
font-weight: 600;
color: var(--night-900);
margin: 0 0 0.375rem;
}
.dark .benefit-content h4 {
color: white;
}
.benefit-content p {
font-size: 0.875rem;
color: var(--night-600);
line-height: 1.5;
margin: 0;
}
.dark .benefit-content p {
color: var(--night-400);
} .portfolio-section {
padding: 4rem 0 5rem;
background: white;
}
.dark .portfolio-section {
background: var(--night-950);
} .portfolio-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 3rem;
}
.filter-btn {
padding: 0.625rem 1.25rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--night-600);
background: white;
border: 1px solid var(--night-200);
border-radius: 9999px;
cursor: pointer;
transition: all 0.3s;
}
.dark .filter-btn {
background: var(--night-800);
border-color: var(--night-700);
color: var(--night-300);
}
.filter-btn:hover {
border-color: var(--teal-400);
color: var(--teal-600);
}
.filter-btn.active {
background: var(--coral-400);
border-color: var(--coral-400);
color: white;
}
.dark .filter-btn.active {
background: var(--coral-500);
border-color: var(--coral-500);
} .portfolio-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 640px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
} .portfolio-card {
position: relative;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.portfolio-card-image {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.portfolio-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.portfolio-card:hover .portfolio-card-image img {
transform: scale(1.05);
}
.portfolio-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.25rem;
} .portfolio-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
width: fit-content;
} .portfolio-card-content {
color: white;
}
.portfolio-card-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.portfolio-card-content p {
font-size: 0.875rem;
line-height: 1.5;
color: white;
font-weight: 500;
margin-bottom: 0.75rem;
} .portfolio-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.portfolio-tag {
padding: 0.25rem 0.625rem;
background: rgba(255, 255, 255, 0.15);
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
color: white;
} .portfolio-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--coral-300);
transition: color 0.3s, gap 0.3s;
}
.portfolio-link:hover {
color: var(--coral-200);
gap: 0.625rem;
}
.portfolio-link svg {
width: 16px;
height: 16px;
} .portfolio-count {
text-align: center;
margin-top: 3rem;
font-size: 0.875rem;
color: var(--night-500);
}
.dark .portfolio-count {
color: var(--night-400);
}  .hero-realisation {
position: relative;
min-height: 280px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero-realisation-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
.hero-realisation-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(65, 117, 132, 0.75) 0%, rgba(65, 117, 132, 0.9) 100%);
z-index: 2;
}
.hero-realisation-content {
position: relative;
z-index: 3;
width: 100%;
padding: 2rem 0 2.5rem;
} .hero-realisation-topline {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.5rem;
} .back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 0.875rem;
opacity: 0.9;
transition: opacity 0.3s, gap 0.3s;
margin-top: 1rem;
}
.back-link:hover {
opacity: 1;
gap: 0.75rem;
} .realisation-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--coral-400);
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
} .hero-realisation .hero-title-script {
color: white;
font-size: 2.5rem;
margin: 0;
}
@media (min-width: 768px) {
.hero-realisation .hero-title-script {
font-size: 3rem;
}
} .realisation-content {
padding: 4rem 0;
background: white;
}
.dark .realisation-content {
background: var(--night-950);
}
.realisation-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.realisation-grid {
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
} .realisation-images {
display: flex;
flex-direction: column;
gap: 1rem;
}
.realisation-image-main {
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.realisation-image-main img {
width: 100%;
height: auto;
display: block;
}
.realisation-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.realisation-gallery-item {
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.realisation-gallery-item a {
display: block;
}
.realisation-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4 / 3;
transition: transform 0.3s;
}
.realisation-gallery-item a:hover img {
transform: scale(1.03);
} .realisation-gallery-item.gallery-item-large {
grid-column: 1 / -1;
}
.realisation-gallery-item.gallery-item-large img {
aspect-ratio: auto;
max-height: 400px;
} .realisation-image-main a {
display: block;
}
.realisation-image-main img {
transition: transform 0.3s;
}
.realisation-image-main a:hover img {
transform: scale(1.02);
} .realisation-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.realisation-description {
color: var(--night-700);
line-height: 1.8;
font-size: 0.9375rem;
}
.dark .realisation-description {
color: var(--night-300);
}
.realisation-description p {
margin-bottom: 1rem;
}
.realisation-description p:last-child {
margin-bottom: 0;
} .btn-visiter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--teal-500);
color: white;
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.5rem;
transition: background 0.3s, transform 0.3s;
width: fit-content;
}
.btn-visiter:hover {
background: var(--teal-600);
transform: translateY(-2px);
} .realisation-tech h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.75rem;
}
.dark .realisation-tech h3 {
color: var(--night-200);
}
.realisation-tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tech-tag {
padding: 0.375rem 0.75rem;
background: var(--night-100);
color: var(--night-700);
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
border: 1px solid var(--night-200);
}
.dark .tech-tag {
background: var(--night-800);
color: var(--night-300);
border-color: var(--night-700);
} .realisation-date h3 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.5rem;
}
.dark .realisation-date h3 {
color: var(--night-200);
}
.realisation-date p {
color: var(--night-600);
font-size: 0.9375rem;
}
.dark .realisation-date p {
color: var(--night-400);
} .lightbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.active {
opacity: 1;
visibility: visible;
}
.lightbox-content {
max-width: 90vw;
max-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-image {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 0.5rem;
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 1.5rem;
background: none;
border: none;
color: white;
font-size: 2.5rem;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s;
line-height: 1;
}
.lightbox-close:hover {
opacity: 1;
}
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: opacity 0.3s, background 0.3s;
}
.lightbox-prev:hover,
.lightbox-next:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.lightbox-prev {
left: 1.5rem;
}
.lightbox-next {
right: 1.5rem;
}
.lightbox-counter {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 0.875rem;
opacity: 0.8;
} .realisation-flipbook {
padding: 3rem 0;
margin-bottom: 3rem;
background: var(--gray-50);
}
.dark .realisation-flipbook {
background: var(--night-900);
}
.flipbook-title {
font-family: 'Square Peg', cursive;
font-size: 2.5rem;
color: var(--gray-900);
text-align: center;
margin-bottom: 2rem;
}
.dark .flipbook-title {
color: white;
}
.flipbook-container {
max-width: 1000px;
margin: 0 auto;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.dark .flipbook-container {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
} .realisation-cta {
padding: 0 0 4rem;
background: white;
}
.dark .realisation-cta {
background: var(--night-950);
}
.cta-box {
background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-600) 100%);
border-radius: 1.5rem;
padding: 3rem 2rem;
text-align: center;
color: white;
}
.cta-box .hero-title-script {
color: white;
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
.cta-box .hero-title-script {
font-size: 2rem;
}
}
.cta-box p {
opacity: 0.9;
margin-bottom: 1.5rem;
font-size: 0.9375rem;
}
.btn-cta-outline {
display: inline-block;
padding: 0.75rem 1.5rem;
background: white;
color: var(--teal-600);
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.5rem;
transition: background 0.3s, transform 0.3s;
}
.btn-cta-outline:hover {
background: var(--night-50);
transform: translateY(-2px);
} .faq-section {
padding: 4rem 0;
background: white;
}
.dark .faq-section {
background: var(--night-950);
} .faq-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: 3rem;
}
.faq-filter-btn {
padding: 0.5rem 1rem;
background: white;
border: 1px solid var(--night-200);
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
color: var(--night-600);
cursor: pointer;
transition: all 0.3s;
}
.dark .faq-filter-btn {
background: var(--night-800);
border-color: var(--night-700);
color: var(--night-300);
}
.faq-filter-btn:hover {
border-color: var(--teal-500);
color: var(--teal-500);
}
.faq-filter-btn.active {
background: var(--teal-500);
border-color: var(--teal-500);
color: white;
} .faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--night-200);
}
.dark .faq-item {
border-color: var(--night-700);
}
.faq-question {
display: flex;
align-items: center;
width: 100%;
padding: 1.25rem 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
gap: 0.75rem;
}
.faq-icon {
flex-shrink: 0;
}
.faq-question-text {
flex: 1;
font-size: 1rem;
font-weight: 500;
color: var(--night-800);
transition: color 0.3s;
}
.dark .faq-question-text {
color: var(--night-100);
}
.faq-item:hover .faq-question-text,
.faq-item.active .faq-question-text {
color: var(--teal-600);
}
.dark .faq-item:hover .faq-question-text,
.dark .faq-item.active .faq-question-text {
color: var(--teal-400);
}
.faq-chevron {
flex-shrink: 0;
color: var(--night-400);
transition: transform 0.3s;
}
.faq-item.active .faq-chevron {
transform: rotate(180deg);
} .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.faq-item.active .faq-answer {
max-height: 2000px;
}
.faq-answer-content {
padding: 0 0 1.5rem 2rem;
color: var(--night-600);
line-height: 1.7;
font-size: 0.9375rem;
}
.dark .faq-answer-content {
color: var(--night-400);
}
.faq-answer-content p {
margin-bottom: 0.75rem;
}
.faq-answer-content p:last-child {
margin-bottom: 0;
} .faq-count {
text-align: center;
margin-top: 2rem;
color: var(--night-500);
font-size: 0.875rem;
} .faq-cta {
padding: 0 0 4rem;
background: white;
}
.dark .faq-cta {
background: var(--night-950);
}
.faq-cta-box {
background: var(--teal-500);
border-radius: 1.5rem;
padding: 3rem 2rem;
text-align: center;
color: white;
}
.faq-cta-box h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.faq-cta-box p {
opacity: 0.9;
margin-bottom: 1.5rem;
font-size: 0.9375rem;
}
.faq-cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.faq-cta-box .btn-primary {
background: var(--coral-400);
color: white;
}
.faq-cta-box .btn-primary:hover {
background: var(--coral-500);
}
.faq-cta-box .btn-outline {
background: transparent;
border: 2px solid white;
color: white;
}
.faq-cta-box .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
} .contact-section {
padding: 4rem 0;
background: white;
}
.dark .contact-section {
background: var(--night-950);
}
.contact-grid {
display: grid;
gap: 3rem;
}
@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: 0.8fr 1.4fr;
gap: 3rem;
}
} .contact-info h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 1.5rem;
}
.dark .contact-info h2 {
color: var(--night-100);
}
.contact-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: var(--night-50);
border: none;
border-radius: 0.5rem;
transition: all 0.3s;
}
.dark .contact-card {
background: var(--night-900);
}
.contact-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--night-100);
border-radius: 50%;
color: var(--night-500);
flex-shrink: 0;
transition: background 0.3s;
}
.dark .contact-card-icon {
background: var(--night-800);
color: var(--night-400);
} .contact-card-phone .contact-card-icon {
background: rgb(240, 247, 248) !important;
color: var(--teal-500) !important;
}
.contact-card-phone:hover .contact-card-icon {
background: rgb(183, 215, 220) !important;
}
.contact-card-phone .contact-card-value {
color: var(--teal-600);
}
.contact-card-phone:hover {
background: rgb(240, 247, 248);
}
.dark .contact-card-phone .contact-card-icon {
background: rgba(65, 117, 132, 0.2) !important;
color: var(--teal-400) !important;
}
.dark .contact-card-phone:hover .contact-card-icon {
background: rgba(65, 117, 132, 0.4) !important;
}
.dark .contact-card-phone .contact-card-value {
color: var(--teal-400);
}
.dark .contact-card-phone:hover {
background: rgba(65, 117, 132, 0.15);
} .contact-card-email .contact-card-icon {
background: rgb(253, 244, 244) !important;
color: var(--coral-500) !important;
}
.contact-card-email:hover .contact-card-icon {
background: rgb(252, 232, 233) !important;
}
.contact-card-email .contact-card-value {
color: var(--coral-500);
}
.contact-card-email:hover {
background: rgb(253, 244, 244);
}
.dark .contact-card-email .contact-card-icon {
background: rgba(218, 134, 138, 0.2) !important;
color: var(--coral-400) !important;
}
.dark .contact-card-email:hover .contact-card-icon {
background: rgba(218, 134, 138, 0.4) !important;
}
.dark .contact-card-email .contact-card-value {
color: var(--coral-400);
}
.dark .contact-card-email:hover {
background: rgba(218, 134, 138, 0.15);
}
.contact-card-content {
display: flex;
flex-direction: column;
}
.contact-card-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--night-800);
}
.dark .contact-card-label {
color: var(--night-100);
}
.contact-card-value {
font-size: 0.9375rem;
color: var(--teal-600);
}
.dark .contact-card-value {
color: var(--teal-400);
}
.contact-card-sub {
font-size: 0.8125rem;
color: var(--night-500);
margin-top: 0.25rem;
}
.dark .contact-card-sub {
color: var(--night-400);
} .contact-social {
margin-top: 2rem;
}
.contact-social h3 {
font-size: 1rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 1rem;
}
.dark .contact-social h3 {
color: var(--night-100);
}
.contact-social-links {
display: flex;
gap: 0.75rem;
}
.contact-social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--night-100);
border-radius: 50%;
color: var(--night-600);
transition: all 0.3s;
}
.dark .contact-social-links a {
background: var(--night-800);
color: var(--night-400);
}
.contact-social-links a:hover {
background: var(--teal-500);
color: white;
} .contact-form-wrapper {
background: var(--night-50);
border-radius: 0.75rem;
padding: 2rem;
}
.dark .contact-form-wrapper {
background: var(--night-900);
}
.contact-form-wrapper h2 {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.5rem;
}
.dark .contact-form-wrapper h2 {
color: var(--night-100);
}
.contact-form-intro {
color: var(--night-600);
font-size: 0.9375rem;
margin-bottom: 1.5rem;
}
.dark .contact-form-intro {
color: var(--night-400);
}
.contact-form-notice {
font-size: 0.8125rem;
color: var(--coral-500);
margin-top: 1rem;
text-align: center;
} .contact-form .wpforms-field-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--night-700);
margin-bottom: 0.5rem;
}
.dark .contact-form .wpforms-field-label {
color: var(--night-300);
}
.contact-form .wpforms-field-required {
color: var(--coral-500);
} .contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form input[type="number"],
.contact-form select,
.contact-form textarea {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
background: white !important;
border: 1px solid var(--night-200) !important;
border-radius: 0.75rem !important;
font-size: 0.9375rem !important;
color: var(--night-900) !important;
transition: all 0.15s !important;
}
.dark .contact-form input[type="text"],
.dark .contact-form input[type="email"],
.dark .contact-form input[type="tel"],
.dark .contact-form input[type="url"],
.dark .contact-form input[type="number"],
.dark .contact-form select,
.dark .contact-form textarea {
background: var(--night-900) !important;
border-color: var(--night-700) !important;
color: white !important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
outline: none !important;
border-color: transparent !important;
box-shadow: 0 0 0 2px var(--teal-500) !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
color: var(--night-400) !important;
}
.dark .contact-form input::placeholder,
.dark .contact-form textarea::placeholder {
color: var(--night-500) !important;
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
} .contact-form .wpforms-button,
.contact-form button[type="submit"],
.contact-form .wpforms-submit {
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 0.75rem 1.5rem !important;
background: linear-gradient(to right, rgb(218, 134, 138), rgb(208, 107, 112)) !important;
background-color: transparent !important;
color: white !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
border: none !important;
border-radius: 0.5rem !important;
cursor: pointer !important;
transition: all 0.3s !important;
box-shadow: 0 4px 6px -1px rgba(218, 134, 138, 0.3) !important;
}
.contact-form .wpforms-button:hover,
.contact-form button[type="submit"]:hover,
.contact-form .wpforms-submit:hover {
transform: scale(1.05) !important;
box-shadow: 0 20px 25px -5px rgba(218, 134, 138, 0.4), 0 8px 10px -6px rgba(218, 134, 138, 0.4) !important;
} .contact-form .wpforms-button::before,
.contact-form .wpforms-submit::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
} .contact-form .wpforms-error {
font-size: 0.8125rem;
color: var(--coral-500);
margin-top: 0.25rem;
} .contact-form .wpforms-confirmation-container-full {
background: var(--teal-50);
border: 1px solid var(--teal-200);
border-radius: 0.75rem;
padding: 1.5rem;
text-align: center;
color: var(--teal-700);
}
.dark .contact-form .wpforms-confirmation-container-full {
background: var(--teal-900);
border-color: var(--teal-800);
color: var(--teal-200);
} .contact-form .wpforms-field-checkbox ul,
.contact-form .wpforms-field-gdpr-checkbox ul {
list-style: none;
padding: 0;
margin: 0;
}
.contact-form .wpforms-field-checkbox li,
.contact-form .wpforms-field-gdpr-checkbox li {
margin-bottom: 0.5rem;
}
.contact-form .wpforms-field-checkbox input[type="checkbox"],
.contact-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
accent-color: var(--teal-500);
}
.contact-form .wpforms-field-checkbox label,
.contact-form .wpforms-field-gdpr-checkbox label {
font-size: 0.875rem;
color: var(--night-600);
cursor: pointer;
}
.dark .contact-form .wpforms-field-checkbox label,
.dark .contact-form .wpforms-field-gdpr-checkbox label {
color: var(--night-400);
} .contact-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
color: var(--coral-500);
font-size: 0.8125rem;
} .maintenance-intro {
padding: 3rem 0;
background: white;
}
.dark .maintenance-intro {
background: var(--night-950);
}
.maintenance-intro-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
font-size: 1.125rem;
line-height: 1.8;
color: var(--night-600);
}
.dark .maintenance-intro-content {
color: var(--night-400);
}
.maintenance-intro-content strong {
color: var(--night-800);
}
.dark .maintenance-intro-content strong {
color: var(--night-200);
} .maintenance-services {
padding: 4rem 0;
background: var(--night-50);
}
.dark .maintenance-services {
background: var(--night-900);
}
.maintenance-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 1024px) {
.maintenance-grid {
grid-template-columns: repeat(3, 1fr);
}
} .maintenance-card {
background: white;
border-radius: 1rem;
padding: 2rem;
display: flex;
flex-direction: column;
transition: transform 0.3s, box-shadow 0.3s;
}
.dark .maintenance-card {
background: var(--night-800);
}
.maintenance-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.maintenance-card-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.maintenance-card-icon {
width: 56px;
height: 56px;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.maintenance-card-teal .maintenance-card-icon {
background: var(--teal-50);
color: var(--teal-500);
}
.maintenance-card-coral .maintenance-card-icon {
background: #fdf4f4;
color: var(--coral-500);
}
.maintenance-card-night .maintenance-card-icon {
background: var(--night-100);
color: var(--night-600);
}
.dark .maintenance-card-teal .maintenance-card-icon {
background: rgba(65, 117, 132, 0.2);
color: var(--teal-400);
}
.dark .maintenance-card-coral .maintenance-card-icon {
background: rgba(218, 134, 138, 0.2);
color: var(--coral-400);
}
.dark .maintenance-card-night .maintenance-card-icon {
background: var(--night-700);
color: var(--night-300);
}
.maintenance-card h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.25rem;
}
.dark .maintenance-card h3 {
color: var(--night-100);
}
.maintenance-price {
font-size: 0.9375rem;
color: var(--night-600);
}
.dark .maintenance-price {
color: var(--night-400);
}
.maintenance-card-teal .maintenance-price strong {
color: var(--teal-600);
}
.maintenance-card-coral .maintenance-price strong {
color: var(--coral-500);
}
.maintenance-card-night .maintenance-price strong {
color: var(--night-800);
}
.dark .maintenance-card-teal .maintenance-price strong {
color: var(--teal-400);
}
.dark .maintenance-card-coral .maintenance-price strong {
color: var(--coral-400);
}
.dark .maintenance-card-night .maintenance-price strong {
color: var(--night-200);
} .maintenance-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
flex: 1;
}
.maintenance-features li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.5;
}
.dark .maintenance-features li {
color: var(--night-400);
}
.maintenance-card-teal .maintenance-features li svg {
color: var(--teal-500);
}
.maintenance-card-coral .maintenance-features li svg {
color: var(--coral-500);
}
.maintenance-card-night .maintenance-features li svg {
color: var(--night-500);
}
.maintenance-features li svg {
flex-shrink: 0;
margin-top: 0.25rem;
}
.maintenance-features li strong {
color: var(--night-800);
}
.dark .maintenance-features li strong {
color: var(--night-200);
}
.maintenance-option {
font-size: 0.875rem;
color: var(--night-500);
margin-bottom: 1.5rem;
padding: 0.75rem;
background: var(--night-50);
border-radius: 0.5rem;
}
.dark .maintenance-option {
background: var(--night-900);
color: var(--night-400);
} .maintenance-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.9375rem;
transition: all 0.3s;
text-align: center;
}
.maintenance-card-teal .maintenance-btn {
background: var(--teal-500);
color: white;
}
.maintenance-card-teal .maintenance-btn:hover {
background: var(--teal-600);
}
.maintenance-card-coral .maintenance-btn {
background: var(--coral-400);
color: white;
}
.maintenance-card-coral .maintenance-btn:hover {
background: var(--coral-500);
}
.maintenance-card-night .maintenance-btn {
background: var(--night-800);
color: white;
}
.dark .maintenance-card-night .maintenance-btn {
background: var(--night-600);
}
.maintenance-card-night .maintenance-btn:hover {
background: var(--night-900);
} .maintenance-hosting {
padding: 5rem 0;
background: white;
}
.dark .maintenance-hosting {
background: var(--night-950);
}
.hosting-grid {
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.hosting-grid {
grid-template-columns: 1.2fr 0.8fr;
}
}
.hosting-content h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--night-800);
margin-bottom: 0.5rem;
}
.dark .hosting-content h2 {
color: var(--night-100);
}
.hosting-subtitle {
font-size: 1.125rem;
color: var(--teal-600);
margin-bottom: 1.5rem;
font-weight: 500;
}
.dark .hosting-subtitle {
color: var(--teal-400);
}
.hosting-content > p {
color: var(--night-600);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.dark .hosting-content > p {
color: var(--night-400);
}
.hosting-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.hosting-features li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.9375rem;
color: var(--night-600);
}
.dark .hosting-features li {
color: var(--night-400);
}
.hosting-image {
text-align: center;
}
.hosting-image img {
max-width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}  .landing-intro {
padding: 3rem 0;
background: white;
}
.dark .landing-intro {
background: var(--night-950);
}
.landing-intro-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
font-size: 1.125rem;
line-height: 1.8;
color: var(--night-600);
}
.dark .landing-intro-content {
color: var(--night-400);
}
.landing-intro-content strong {
color: var(--night-800);
}
.dark .landing-intro-content strong {
color: var(--night-200);
} .landing-services {
padding: 5rem 0;
background: var(--night-50);
}
.dark .landing-services {
background: var(--night-900);
}
.landing-services-header {
text-align: center;
max-width: 700px;
margin: 0 auto 3rem;
}
.landing-services-header h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--night-800);
margin: 1rem 0;
}
.dark .landing-services-header h2 {
color: var(--night-100);
}
.landing-services-header > p {
color: var(--night-600);
line-height: 1.7;
}
.dark .landing-services-header > p {
color: var(--night-400);
}
.landing-services-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 768px) {
.landing-services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.landing-service-card {
background: white;
border-radius: 1rem;
padding: 2rem;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.dark .landing-service-card {
background: var(--night-800);
}
.landing-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.landing-service-icon {
width: 64px;
height: 64px;
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.landing-service-icon-teal {
background: var(--teal-50);
color: var(--teal-500);
}
.landing-service-icon-coral {
background: #fdf4f4;
color: var(--coral-500);
}
.landing-service-icon-night {
background: var(--night-100);
color: var(--night-600);
}
.dark .landing-service-icon-teal {
background: rgba(65, 117, 132, 0.2);
color: var(--teal-400);
}
.dark .landing-service-icon-coral {
background: rgba(218, 134, 138, 0.2);
color: var(--coral-400);
}
.dark .landing-service-icon-night {
background: var(--night-700);
color: var(--night-300);
}
.landing-service-card h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.75rem;
}
.dark .landing-service-card h3 {
color: var(--night-100);
}
.landing-service-card p {
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.6;
}
.dark .landing-service-card p {
color: var(--night-400);
} .landing-why {
padding: 5rem 0;
background: white;
}
.dark .landing-why {
background: var(--night-950);
}
.landing-why-grid {
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.landing-why-grid {
grid-template-columns: 1.2fr 0.8fr;
}
}
.landing-why-content h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--night-800);
margin: 1rem 0 2rem;
}
.dark .landing-why-content h2 {
color: var(--night-100);
}
.landing-why-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.landing-why-feature {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.landing-why-feature-icon {
flex-shrink: 0;
margin-top: 0.25rem;
}
.landing-why-feature h4 {
font-size: 1rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 0.25rem;
}
.dark .landing-why-feature h4 {
color: var(--night-100);
}
.landing-why-feature p {
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.6;
}
.dark .landing-why-feature p {
color: var(--night-400);
}
.landing-why-image {
text-align: center;
}
.landing-why-image img {
max-width: 100%;
height: auto;
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
} .landing-prestations {
padding: 5rem 0;
background: var(--night-50);
}
.dark .landing-prestations {
background: var(--night-900);
}
.landing-prestations-box {
background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
border-radius: 1.5rem;
padding: 3rem;
text-align: center;
}
.landing-prestations-content {
max-width: 700px;
margin: 0 auto;
}
.section-badge-light {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.landing-prestations-box h2 {
font-size: 1.75rem;
font-weight: 700;
color: white;
margin: 1rem 0;
}
.landing-prestations-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
margin-bottom: 1.5rem;
}
.landing-prestations-list {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
text-align: left;
display: inline-block;
}
.landing-prestations-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: white;
font-size: 1rem;
}
.landing-prestations-list li svg {
flex-shrink: 0;
}
.landing-prestations-box .btn-primary {
background: white;
color: var(--teal-600);
}
.landing-prestations-box .btn-primary:hover {
background: var(--night-50);
transform: scale(1.05);
} .landing-testimonials {
padding: 5rem 0;
background: white;
}
.dark .landing-testimonials {
background: var(--night-950);
}
.landing-testimonials-header {
text-align: center;
margin-bottom: 3rem;
}
.landing-testimonials-header h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--night-800);
margin-top: 1rem;
}
.dark .landing-testimonials-header h2 {
color: var(--night-100);
}
.landing-testimonials-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 768px) {
.landing-testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.landing-testimonial-card {
background: var(--night-50);
border-radius: 1rem;
padding: 1.5rem;
}
.dark .landing-testimonial-card {
background: var(--night-800);
}
.landing-testimonial-stars {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
}
.landing-testimonial-text {
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.7;
font-style: italic;
margin-bottom: 1rem;
}
.dark .landing-testimonial-text {
color: var(--night-400);
}
.landing-testimonial-author {
font-size: 0.875rem;
font-weight: 600;
color: var(--night-800);
}
.dark .landing-testimonial-author {
color: var(--night-200);
}  .testimonials-trustindex {
padding: 5rem 0;
} html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn,
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn:link,
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn:visited {
background: var(--coral-400) !important;
background-color: var(--coral-400) !important;
color: #ffffff !important;
border: 1px solid var(--coral-400) !important;
border-color: var(--coral-400) !important;
}
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn:hover,
html body .ti-widget.ti-goog .ti-header-write-btn-container a.ti-header-write-btn:hover,
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn:focus,
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn:active,
html body .ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn[role="button"]:hover {
background: var(--coral-500) !important;
background-color: var(--coral-500) !important;
color: #ffffff !important;
border-color: var(--coral-500) !important;
transform: scale(1.05) !important;
box-shadow: 0 10px 20px rgba(218, 134, 138, 0.3) !important;
} html body .ti-widget .ti-controls .ti-next,
html body .ti-widget .ti-controls .ti-prev,
html body .ti-widget .ti-controls div.ti-next,
html body .ti-widget .ti-controls div.ti-prev {
transition: all 0.3s ease !important;
}
html body .ti-widget .ti-controls .ti-next:hover,
html body .ti-widget .ti-controls .ti-prev:hover,
html body .ti-widget .ti-controls div.ti-next:hover,
html body .ti-widget .ti-controls div.ti-prev:hover,
html body .ti-widget .ti-controls .ti-next[role="button"]:hover,
html body .ti-widget .ti-controls .ti-prev[role="button"]:hover {
background: var(--teal-50) !important;
background-color: var(--teal-50) !important;
border-color: var(--teal-200) !important;
}
html body .ti-widget .ti-controls .ti-next:hover::before,
html body .ti-widget .ti-controls .ti-prev:hover::before,
html body .ti-widget .ti-controls .ti-next:hover::after,
html body .ti-widget .ti-controls .ti-prev:hover::after,
html body .ti-widget .ti-controls div.ti-next:hover::before,
html body .ti-widget .ti-controls div.ti-prev:hover::before,
html body .ti-widget .ti-controls div.ti-next:hover::after,
html body .ti-widget .ti-controls div.ti-prev:hover::after {
border-color: var(--teal-600) !important;
} .testimonials-google-link,
.landing-testimonials-link {
text-align: center;
margin-top: 2.5rem;
}
.testimonials-google-link a,
.landing-testimonials-link a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--teal-600);
font-weight: 500;
font-size: 0.9375rem;
transition: color 0.3s;
}
.dark .testimonials-google-link a,
.dark .landing-testimonials-link a {
color: var(--teal-400);
}
.testimonials-google-link a:hover,
.landing-testimonials-link a:hover {
color: var(--teal-700);
}
.dark .testimonials-google-link a:hover,
.dark .landing-testimonials-link a:hover {
color: var(--teal-300);
}  .mobile-menu-toggle {
display: none;
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
color: var(--night-700);
position: relative;
z-index: 1001;
}
.dark .mobile-menu-toggle {
color: var(--night-200);
}
.mobile-menu-toggle .icon-close {
display: none;
}
.mobile-menu-toggle.is-active .icon-menu {
display: none;
}
.mobile-menu-toggle.is-active .icon-close {
display: block;
} .mobile-menu-panel {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 999;
padding-top: 100px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.dark .mobile-menu-panel {
background: var(--night-900);
}
.mobile-menu-panel.is-open {
transform: translateX(0);
}
.mobile-menu-content {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
} .mobile-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-nav li {
border-bottom: 1px solid var(--night-100);
}
.dark .mobile-nav li {
border-bottom-color: var(--night-800);
}
.mobile-nav a,
.mobile-nav li a {
display: block;
padding: 1rem 0;
font-size: 1.125rem;
font-weight: 500;
color: var(--night-700);
text-decoration: none;
transition: color 0.3s;
}
.dark .mobile-nav a,
.dark .mobile-nav li a {
color: var(--night-200);
}
.mobile-nav a:hover,
.mobile-nav li a:hover {
color: var(--teal-500);
} .mobile-cta {
display: block;
text-align: center;
margin-top: 1rem;
} .mobile-menu-contact {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--night-100);
}
.dark .mobile-menu-contact {
border-top-color: var(--night-800);
}
.mobile-menu-contact a {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--night-600);
font-size: 0.9375rem;
text-decoration: none;
}
.dark .mobile-menu-contact a {
color: var(--night-400);
}
.mobile-menu-contact a:hover {
color: var(--teal-500);
} body.mobile-menu-open {
overflow: hidden;
} @media (max-width: 1023px) {
.main-nav {
display: none !important;
}
.header-cta {
display: none !important;
}
.mobile-menu-toggle {
display: block;
}
.mobile-menu-panel {
display: block;
}
} @media (min-width: 1024px) {
.mobile-menu-panel {
display: none !important;
}
.mobile-menu-toggle {
display: none !important;
}
} h2,
.section-title,
.landing-services-header h2,
.landing-why-content h2,
.landing-prestations-box h2,
.landing-testimonials-header h2,
.hosting-content h2,
.maintenance-card h2,
.faq-section h2,
.contact-section h2 {
font-size: 2rem !important;
}
@media (max-width: 768px) { h2,
.section-title,
.landing-services-header h2,
.landing-why-content h2,
.landing-prestations-box h2,
.landing-testimonials-header h2,
.hosting-content h2,
.maintenance-card h2,
.faq-section h2,
.contact-section h2 {
font-size: 1.5rem !important;
} .hero-title-script,
.cta-title,
.error-404-oups,
.flipbook-title {
font-size: 2rem !important;
}
}  .mobile-menu-panel {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100vh !important;
height: 100dvh !important;
background: white !important;
z-index: 9999 !important;
transform: translateX(100%) !important;
transition: transform 0.3s ease-in-out !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
}
.dark .mobile-menu-panel {
background: var(--night-900) !important;
}
.mobile-menu-panel.is-open {
transform: translateX(0) !important;
} .mobile-menu-panel::before {
content: '';
display: block;
height: 80px;
flex-shrink: 0;
} .mobile-menu-panel .mobile-menu-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 1.5rem 2rem 2rem;
gap: 2rem;
} .mobile-menu-panel .mobile-nav {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.mobile-menu-panel .mobile-nav li {
border-bottom: 1px solid var(--night-100);
}
.dark .mobile-menu-panel .mobile-nav li {
border-bottom-color: var(--night-700);
}
.mobile-menu-panel .mobile-nav li:last-child {
border-bottom: none;
}
.mobile-menu-panel .mobile-nav a {
display: block !important;
padding: 1.25rem 0 !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: var(--night-800) !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.dark .mobile-menu-panel .mobile-nav a {
color: var(--night-100) !important;
}
.mobile-menu-panel .mobile-nav a:hover,
.mobile-menu-panel .mobile-nav a:focus {
color: var(--teal-500) !important;
} .mobile-menu-panel .mobile-cta {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 1rem 2rem !important;
font-size: 1.125rem !important;
margin-top: 1rem !important;
} .mobile-menu-panel .mobile-menu-contact {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 2rem;
margin-top: auto;
border-top: 1px solid var(--night-100);
}
.dark .mobile-menu-panel .mobile-menu-contact {
border-top-color: var(--night-700);
}
.mobile-menu-panel .mobile-menu-contact a {
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
color: var(--night-600) !important;
font-size: 1rem !important;
text-decoration: none !important;
}
.dark .mobile-menu-panel .mobile-menu-contact a {
color: var(--night-400) !important;
}
.mobile-menu-panel .mobile-menu-contact a:hover {
color: var(--teal-500) !important;
} .mobile-menu-toggle {
display: none;
background: transparent !important;
border: none !important;
padding: 0.5rem !important;
cursor: pointer !important;
color: var(--night-700) !important;
z-index: 10000 !important;
position: relative !important;
}
.dark .mobile-menu-toggle {
color: var(--night-200) !important;
}
.mobile-menu-toggle .icon-menu,
.mobile-menu-toggle .icon-close {
display: block;
width: 24px;
height: 24px;
}
.mobile-menu-toggle .icon-close {
display: none;
}
.mobile-menu-toggle.is-active .icon-menu {
display: none !important;
}
.mobile-menu-toggle.is-active .icon-close {
display: block !important;
} body.mobile-menu-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
} @media (max-width: 1023px) {
.main-nav {
display: none !important;
}
.header-cta {
display: none !important;
}
.mobile-menu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
@media (min-width: 1024px) {
.mobile-menu-panel {
display: none !important;
}
.mobile-menu-toggle {
display: none !important;
}
.main-nav {
display: flex !important;
}
} .hero-legal {
min-height: 30vh;
}
.legal-content {
padding: 4rem 0 5rem;
background: white;
}
.dark .legal-content {
background: var(--night-950);
}
.legal-content-wrapper {
max-width: 800px;
margin: 0 auto;
} .legal-content-wrapper h2 {
font-size: 1.5rem !important;
font-weight: 700;
color: var(--night-800);
margin-top: 2.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--teal-100);
}
.dark .legal-content-wrapper h2 {
color: var(--night-100);
border-bottom-color: var(--teal-800);
}
.legal-content-wrapper h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--night-700);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.dark .legal-content-wrapper h3 {
color: var(--night-200);
}
.legal-content-wrapper p {
font-size: 1rem;
line-height: 1.8;
color: var(--night-600);
margin-bottom: 1rem;
}
.dark .legal-content-wrapper p {
color: var(--night-400);
}
.legal-content-wrapper ul,
.legal-content-wrapper ol {
margin: 1rem 0 1.5rem 1.5rem;
color: var(--night-600);
}
.dark .legal-content-wrapper ul,
.dark .legal-content-wrapper ol {
color: var(--night-400);
}
.legal-content-wrapper li {
margin-bottom: 0.5rem;
line-height: 1.7;
}
.legal-content-wrapper a {
color: var(--teal-600);
text-decoration: underline;
transition: color 0.2s;
}
.dark .legal-content-wrapper a {
color: var(--teal-400);
}
.legal-content-wrapper a:hover {
color: var(--teal-700);
}
.dark .legal-content-wrapper a:hover {
color: var(--teal-300);
}
.legal-content-wrapper strong {
color: var(--night-800);
font-weight: 600;
}
.dark .legal-content-wrapper strong {
color: var(--night-200);
} .legal-content-wrapper table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.legal-content-wrapper th,
.legal-content-wrapper td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--night-100);
}
.dark .legal-content-wrapper th,
.dark .legal-content-wrapper td {
border-bottom-color: var(--night-700);
}
.legal-content-wrapper th {
font-weight: 600;
color: var(--night-800);
background: var(--night-50);
}
.dark .legal-content-wrapper th {
color: var(--night-100);
background: var(--night-800);
} .legal-content-wrapper blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid var(--teal-400);
background: var(--night-50);
font-style: italic;
color: var(--night-600);
}
.dark .legal-content-wrapper blockquote {
background: var(--night-800);
color: var(--night-400);
} .legal-content-wrapper .update-date {
display: inline-block;
margin-bottom: 2rem;
padding: 0.5rem 1rem;
background: var(--night-50);
border-radius: 0.5rem;
font-size: 0.875rem;
color: var(--night-500);
}
.dark .legal-content-wrapper .update-date {
background: var(--night-800);
color: var(--night-400);
}  .dark .service-card.coral-bg .service-feature {
background-color: rgba(218, 134, 138, 0.2);
color: var(--coral-300);
}
.dark .service-card.teal-bg .service-feature {
background-color: rgba(65, 117, 132, 0.2);
color: var(--teal-300);
}
.dark .service-card.night-bg .service-feature {
background-color: rgba(255, 255, 255, 0.1);
color: var(--night-300);
} .dark .service-link {
color: var(--teal-400);
}
.dark .service-link:hover {
color: var(--teal-300);
} .dark .service-card {
background: var(--night-800);
}
.dark .service-card.coral-bg {
background: var(--night-800);
}
.dark .service-card.teal-bg {
background: var(--night-800);
}
.dark .service-card.night-bg {
background: var(--night-900);
} .mobile-menu-panel .mobile-menu-content {
display: flex;
flex-direction: column;
height: calc(100vh - 80px);
height: calc(100dvh - 80px);
padding: 1rem 1.5rem 1rem;
overflow: hidden;
}
.mobile-menu-panel .mobile-nav {
flex-shrink: 0;
}
.mobile-menu-panel .mobile-nav a {
padding: 0.875rem 0 !important;
font-size: 1.125rem !important;
}
.mobile-menu-panel .mobile-cta {
flex-shrink: 0;
margin-top: 1rem;
padding: 0.75rem 1.5rem !important;
}
.mobile-menu-panel .mobile-menu-contact {
margin-top: auto;
padding-top: 1rem;
flex-shrink: 0;
gap: 0.75rem;
}
.mobile-menu-panel .mobile-menu-contact a {
font-size: 0.9375rem !important;
} @media (max-width: 768px) {
.faq-question {
padding: 1rem 0.5rem;
}
.faq-question-text {
font-size: 0.9375rem;
line-height: 1.5;
word-break: break-word;
}
.faq-section .section-container {
padding-left: 1rem;
padding-right: 1rem;
}
} .error-404-section {
min-height: calc(100vh - 140px);
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
background: linear-gradient(135deg, var(--night-50) 0%, white 50%, var(--teal-50) 100%);
position: relative;
overflow: hidden;
}
.dark .error-404-section {
background: linear-gradient(135deg, var(--night-900) 0%, var(--night-950) 50%, var(--night-900) 100%);
}
.error-404-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.error-404-text {
text-align: left;
}
.error-404-title {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.error-404-oups {
font-family: 'Square Peg', cursive;
font-size: 4rem;
color: var(--teal-600);
line-height: 1;
}
.dark .error-404-oups {
color: var(--teal-400);
}
.error-404-emoji {
font-size: 3rem;
animation: wobble 2s ease-in-out infinite;
}
@keyframes wobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
}
.error-404-message {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-800);
margin-bottom: 1rem;
line-height: 1.5;
}
.dark .error-404-message {
color: var(--night-100);
}
.error-404-submessage {
font-size: 1rem;
color: var(--night-600);
margin-bottom: 2rem;
line-height: 1.7;
}
.dark .error-404-submessage {
color: var(--night-400);
}
.error-404-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.error-404-actions .btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.error-404-actions .btn-secondary {
display: inline-flex;
align-items: center;
padding: 0.875rem 1.75rem;
border: 2px solid var(--teal-500);
border-radius: 9999px;
color: var(--teal-600);
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.dark .error-404-actions .btn-secondary {
border-color: var(--teal-400);
color: var(--teal-400);
}
.error-404-actions .btn-secondary:hover {
background: var(--teal-500);
color: white;
}
.dark .error-404-actions .btn-secondary:hover {
background: var(--teal-500);
color: white;
}
.error-404-image {
display: flex;
justify-content: center;
align-items: center;
}
.error-404-image img {
max-width: 100%;
height: auto;
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.dark .error-404-image img {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
} @media (max-width: 768px) {
.error-404-section {
min-height: calc(100vh - 100px);
padding: 2rem 1rem;
}
.error-404-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.error-404-text {
text-align: center;
order: 1;
}
.error-404-image {
order: 2;
}
.error-404-title {
justify-content: center;
}
.error-404-oups {
font-size: 3rem;
}
.error-404-emoji {
font-size: 2.5rem;
}
.error-404-message {
font-size: 1.125rem;
}
.error-404-actions {
justify-content: center;
}
.error-404-image img {
max-width: 280px;
}
} .faq-item.active .faq-answer {
max-height: 5000px;
}
.faq-answer-content {
overflow: visible;
} .faq-answer-content p,
.faq-answer-content ul,
.faq-answer-content ol,
.faq-answer-content li {
overflow: visible;
text-overflow: unset;
white-space: normal;
} @media (max-width: 768px) { .hero-google-subtext,
.portfolio-category,
.about-france-num-subtext,
.about-highlight-desc,
.testimonial-date,
.pricing-from,
.service-feature {
font-size: 0.875rem !important;
} .portfolio-card-content p,
.step-card p,
.benefit-content p,
.testimonial-author,
.landing-testimonial-author,
.contact-card-label,
.hero-google-text,
.about-france-num-text,
.about-highlight-label,
.maintenance-option,
.mockup-label {
font-size: 1rem !important;
} .footer-description,
.footer-nav a,
.footer-legal a,
.footer-copyright,
.footer-cta-text,
.contact-form .wpforms-field-label,
.pricing-card .btn-primary {
font-size: 0.9375rem !important;
} .service-card p,
.faq-answer-content p,
.realisation-description p,
.legal-content-wrapper p {
font-size: 1rem !important;
line-height: 1.7 !important;
} .contact-form select {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
} .hero-tags {
justify-content: center !important;
}
.hero-ctas {
justify-content: center !important;
}
.hero-text {
text-align: center !important;
}
.hero-google-badge {
justify-content: center !important;
}
}  .hero-article {
position: relative;
overflow: hidden;
background: var(--teal-500);
padding: 0;
}
.hero-article-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--teal-500) 0%, var(--teal-600) 100%);
z-index: 1;
}
.dark .hero-article-bg {
background: linear-gradient(135deg, var(--teal-700) 0%, var(--night-800) 100%);
}
.hero-article .twinkling-star {
z-index: 2;
}
.hero-article-content {
position: relative;
z-index: 3;
width: 100%;
padding: 1.75rem 0 5rem;
color: white;
}
@media (min-width: 768px) {
.hero-article-content {
padding: 2rem 0 6rem;
}
} .article-back-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem 0.45rem 0.7rem;
margin-bottom: 1.25rem;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 500;
color: white;
text-decoration: none;
transition: background 0.3s, transform 0.3s, gap 0.3s;
}
.article-back-pill:hover {
background: rgba(255, 255, 255, 0.25);
gap: 0.6rem;
transform: translateX(-2px);
}
.hero-article-topline {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
} .article-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--coral-400);
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
text-decoration: none;
transition: background 0.3s, transform 0.3s;
}
.article-badge:hover {
background: var(--coral-500);
transform: translateY(-1px);
} .hero-article .hero-title-script {
color: white;
font-size: 2.25rem;
margin: 0 0 1rem;
max-width: 760px;
}
@media (min-width: 768px) {
.hero-article .hero-title-script {
font-size: 3rem;
}
} .hero-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
color: rgba(255, 255, 255, 0.92);
font-size: 0.875rem;
}
.article-meta-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.article-meta-sep {
opacity: 0.6;
} .hero-article-image-wrap {
position: relative;
margin-top: -2rem;
margin-bottom: 2rem;
z-index: 5;
}
@media (min-width: 768px) {
.hero-article-image-wrap {
margin-top: -2.5rem;
margin-bottom: 2.5rem;
}
}
.hero-article-image {
position: relative;
margin: 0 auto;
max-width: 880px;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 16px 40px rgba(65, 117, 132, 0.25), 0 4px 12px rgba(65, 117, 132, 0.1);
aspect-ratio: 16 / 9;
background: var(--teal-100);
}
.dark .hero-article-image {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
background: var(--night-800);
}
.hero-article-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
} .article-content {
padding: 2rem 0 3rem;
background: white;
}
@media (min-width: 768px) {
.article-content {
padding: 2.5rem 0 4rem;
}
}
.dark .article-content {
background: var(--night-950);
} .hero-article + .article-content {
padding-top: 4rem;
}
@media (min-width: 768px) {
.hero-article + .article-content {
padding-top: 5rem;
}
}
.article-container {
max-width: 760px !important;
} .article-lead {
font-size: 1.25rem;
line-height: 1.6;
color: var(--night-700);
font-weight: 500;
border-left: 3px solid var(--coral-400);
padding: 0.25rem 0 0.25rem 1.25rem;
margin: 0 0 2.5rem;
}
.dark .article-lead {
color: var(--night-200);
} .article-body {
color: var(--night-700);
font-size: 1.0625rem;
line-height: 1.8;
}
.dark .article-body {
color: var(--night-200);
}
.article-body > * + * {
margin-top: 1.25rem;
}
.article-body p {
margin: 0 0 1.25rem;
}
.article-body h2 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--teal-500);
line-height: 1.2;
margin: 2.5rem 0 1rem;
font-weight: 400;
}
.dark .article-body h2 {
color: var(--coral-300);
}
.article-body h3 {
font-family: var(--font-body);
font-size: 1.375rem;
font-weight: 600;
color: var(--night-900);
margin: 2rem 0 0.75rem;
}
.dark .article-body h3 {
color: white;
}
.article-body h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--night-900);
margin: 1.5rem 0 0.5rem;
}
.dark .article-body h4 {
color: var(--night-100);
}
.article-body a {
color: var(--coral-500);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.2s;
}
.article-body a:hover {
color: var(--coral-600);
}
.dark .article-body a {
color: var(--coral-300);
}
.dark .article-body a:hover {
color: var(--coral-200);
}
.article-body strong {
color: var(--night-900);
font-weight: 600;
}
.dark .article-body strong {
color: white;
}
.article-body ul,
.article-body ol {
margin: 0 0 1.25rem;
padding-left: 1.5rem;
}
.article-body li {
margin-bottom: 0.5rem;
}
.article-body ul li::marker {
color: var(--coral-400);
}
.article-body ol li::marker {
color: var(--teal-500);
font-weight: 600;
}
.article-body blockquote {
margin: 2rem 0;
padding: 1.5rem 1.75rem;
background: var(--teal-50);
border-left: 4px solid var(--coral-400);
border-radius: 0.5rem;
font-style: italic;
color: var(--night-700);
font-size: 1.0625rem;
}
.dark .article-body blockquote {
background: rgba(65, 117, 132, 0.15);
color: var(--night-200);
}
.article-body blockquote p:last-child {
margin-bottom: 0;
}
.article-body img {
max-width: 100%;
height: auto;
border-radius: 0.75rem;
margin: 1.5rem 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.article-body figure {
margin: 2rem 0;
}
.article-body figcaption {
text-align: center;
font-size: 0.875rem;
color: var(--night-500);
margin-top: 0.5rem;
font-style: italic;
}
.dark .article-body figcaption {
color: var(--night-400);
}
.article-body code {
background: var(--teal-50);
color: var(--teal-700);
padding: 0.15rem 0.4rem;
border-radius: 0.25rem;
font-size: 0.9em;
font-family: 'SFMono-Regular', Consolas, monospace;
}
.dark .article-body code {
background: var(--night-800);
color: var(--coral-300);
}
.article-body pre {
background: var(--night-900);
color: var(--night-100);
padding: 1.25rem;
border-radius: 0.75rem;
overflow-x: auto;
margin: 1.5rem 0;
font-size: 0.9rem;
line-height: 1.6;
}
.article-body pre code {
background: transparent;
color: inherit;
padding: 0;
}
.article-body hr {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, var(--night-200), transparent);
margin: 2.5rem 0;
}
.dark .article-body hr {
background: linear-gradient(to right, transparent, var(--night-700), transparent);
}
.article-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.9375rem;
}
.article-body th,
.article-body td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--night-200);
}
.article-body th {
background: var(--teal-50);
color: var(--teal-700);
font-weight: 600;
}
.dark .article-body th {
background: rgba(65, 117, 132, 0.2);
color: var(--coral-300);
}
.dark .article-body td,
.dark .article-body th {
border-bottom-color: var(--night-700);
} .article-pages {
margin: 2rem 0;
padding: 1rem;
background: var(--teal-50);
border-radius: 0.5rem;
text-align: center;
font-size: 0.9375rem;
}
.dark .article-pages {
background: var(--night-800);
}
.article-pages a {
margin: 0 0.25rem;
padding: 0.25rem 0.6rem;
border-radius: 0.25rem;
background: white;
color: var(--teal-600);
} .article-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin: 2.5rem 0 0;
padding-top: 2rem;
border-top: 1px solid var(--night-100);
}
.dark .article-tags {
border-top-color: var(--night-800);
}
.article-tags-label {
font-size: 0.875rem;
color: var(--night-500);
font-weight: 600;
margin-right: 0.25rem;
}
.dark .article-tags-label {
color: var(--night-400);
}
.article-tags .tech-tag {
text-decoration: none;
transition: all 0.2s;
}
.article-tags .tech-tag:hover {
background: var(--coral-100);
color: var(--coral-600);
border-color: var(--coral-200);
}
.dark .article-tags .tech-tag:hover {
background: rgba(218, 134, 138, 0.2);
color: var(--coral-300);
border-color: var(--coral-400);
} .article-share {
display: flex;
align-items: center;
gap: 1rem;
margin: 2rem 0 0;
padding: 1.25rem 0;
border-top: 1px solid var(--night-100);
border-bottom: 1px solid var(--night-100);
flex-wrap: wrap;
}
.dark .article-share {
border-color: var(--night-800);
}
.article-share-label {
font-size: 0.875rem;
color: var(--night-500);
font-weight: 600;
}
.dark .article-share-label {
color: var(--night-400);
}
.article-share-links {
display: flex;
gap: 0.5rem;
}
.article-share-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--teal-50);
color: var(--teal-600);
transition: all 0.3s;
}
.article-share-links a:hover {
background: var(--coral-400);
color: white;
transform: translateY(-2px);
}
.dark .article-share-links a {
background: var(--night-800);
color: var(--coral-300);
}
.dark .article-share-links a:hover {
background: var(--coral-400);
color: white;
} .article-nav {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-top: 2.5rem;
}
@media (min-width: 640px) {
.article-nav {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
.article-nav-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
background: var(--teal-50);
border-radius: 0.75rem;
transition: all 0.3s;
text-decoration: none;
border: 1px solid transparent;
}
.article-nav-item:hover {
background: white;
border-color: var(--coral-300);
box-shadow: 0 4px 16px rgba(218, 134, 138, 0.15);
transform: translateY(-2px);
}
.dark .article-nav-item {
background: var(--night-800);
}
.dark .article-nav-item:hover {
background: var(--night-900);
border-color: var(--coral-400);
}
.article-nav-prev {
text-align: left;
}
.article-nav-next {
text-align: right;
}
.article-nav-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
color: var(--coral-500);
font-weight: 600;
}
.article-nav-next .article-nav-label {
justify-content: flex-end;
}
.dark .article-nav-label {
color: var(--coral-300);
}
.article-nav-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--night-900);
line-height: 1.4;
}
.dark .article-nav-title {
color: white;
} .related-articles {
padding: 4rem 0;
background: var(--teal-50);
}
.dark .related-articles {
background: var(--night-900);
}
.related-header {
text-align: center;
margin-bottom: 3rem;
}
.related-header .hero-title-script {
margin-top: 0.5rem;
font-size: 2.25rem;
}
@media (min-width: 768px) {
.related-header .hero-title-script {
font-size: 2.75rem;
}
}
.related-grid {
display: grid;
gap: 1.75rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.related-grid {
grid-template-columns: repeat(3, 1fr);
}
} .blog-section {
padding: 4rem 0 5rem;
background: white;
}
.dark .blog-section {
background: var(--night-950);
}
.blog-grid {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
} .article-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
display: flex;
flex-direction: column;
}
.dark .article-card {
background: var(--night-900);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.dark .article-card:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.article-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.article-card-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--teal-50);
}
.dark .article-card-image {
background: var(--night-800);
}
.article-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.article-card:hover .article-card-image img {
transform: scale(1.05);
}
.article-card-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--teal-50) 0%, #fdf4f4 100%);
}
.dark .article-card-placeholder {
background: linear-gradient(135deg, var(--night-800) 0%, var(--night-900) 100%);
}
.article-card-placeholder svg {
opacity: 0.4;
animation: twinkle 3s ease-in-out infinite;
}
.article-card-badge {
position: absolute;
top: 0.875rem;
left: 0.875rem;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--coral-400);
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
}
.article-card-body {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.article-card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--night-900);
line-height: 1.35;
margin: 0 0 0.625rem;
transition: color 0.3s;
}
.dark .article-card-title {
color: white;
}
.article-card:hover .article-card-title {
color: var(--coral-500);
}
.dark .article-card:hover .article-card-title {
color: var(--coral-300);
}
.article-card-excerpt {
font-size: 0.9375rem;
color: var(--night-600);
line-height: 1.6;
margin: 0 0 1.25rem;
flex: 1;
}
.dark .article-card-excerpt {
color: var(--night-300);
}
.article-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid var(--night-100);
margin-top: auto;
}
.dark .article-card-footer {
border-top-color: var(--night-800);
}
.article-card-meta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
color: var(--night-500);
}
.dark .article-card-meta {
color: var(--night-400);
}
.article-card-arrow {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--coral-500);
transition: gap 0.3s;
}
.article-card:hover .article-card-arrow {
gap: 0.5rem;
}
.dark .article-card-arrow {
color: var(--coral-300);
} .blog-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin-top: 3.5rem;
}
.blog-pagination-item .page-numbers {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
border-radius: 0.5rem;
background: white;
border: 1px solid var(--night-200);
color: var(--night-700);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
justify-content: center;
transition: all 0.2s;
}
.dark .blog-pagination-item .page-numbers {
background: var(--night-800);
border-color: var(--night-700);
color: var(--night-300);
}
.blog-pagination-item .page-numbers:hover {
border-color: var(--coral-400);
color: var(--coral-500);
}
.blog-pagination-item .page-numbers.current {
background: var(--coral-400);
border-color: var(--coral-400);
color: white;
}
.blog-pagination-item .page-numbers.dots {
border: none;
background: transparent;
} .blog-empty {
text-align: center;
padding: 4rem 1rem;
}
.blog-empty svg {
opacity: 0.5;
margin-bottom: 1rem;
animation: twinkle 3s ease-in-out infinite;
}
.blog-empty h2 {
font-size: 1.5rem;
color: var(--night-900);
margin-bottom: 0.5rem;
}
.dark .blog-empty h2 {
color: white;
}
.blog-empty p {
color: var(--night-500);
margin-bottom: 1.5rem;
}
.dark .blog-empty p {
color: var(--night-400);
} .article-cta {
padding: 4rem 0 6rem;
background: white;
}
@media (min-width: 768px) {
.article-cta {
padding: 5rem 0 7rem;
}
}
.dark .article-cta {
background: var(--night-950);
} .related-articles + .article-cta {
background: white;
}
.dark .related-articles + .article-cta {
background: var(--night-950);
} .search-form {
display: flex;
align-items: center;
background: white;
border-radius: 9999px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 0.3rem 0.3rem 0.3rem 1.25rem;
border: 1px solid var(--night-200);
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within {
border-color: var(--coral-300);
box-shadow: 0 4px 20px rgba(218, 134, 138, 0.2);
}
.dark .search-form {
background: var(--night-800);
border-color: var(--night-700);
}
.search-field {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 0.6rem 0;
font-family: var(--font-body);
font-size: 0.9375rem;
color: var(--night-700);
}
.dark .search-field {
color: var(--night-100);
}
.search-field::placeholder {
color: var(--night-400);
}
.search-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
background: var(--coral-400);
color: white;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.search-submit:hover {
background: var(--coral-500);
transform: scale(1.05);
}
.screen-reader-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
overflow: hidden;
} .inline-related {
margin: 2.5rem 0;
padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, var(--teal-50) 0%, #fdf4f4 100%);
border-radius: 0.75rem;
border-left: 4px solid var(--coral-400);
}
.dark .inline-related {
background: linear-gradient(135deg, var(--night-800) 0%, var(--night-900) 100%);
}
.inline-related-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 700;
color: var(--coral-500);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 0.75rem;
}
.dark .inline-related-title {
color: var(--coral-300);
}
.inline-related-list {
list-style: none;
padding: 0;
margin: 0;
}
.inline-related-list li {
margin: 0;
padding: 0.4rem 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.dark .inline-related-list li {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.inline-related-list li:last-child {
border-bottom: none;
}
.inline-related-list a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--teal-600);
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: color 0.2s, gap 0.2s;
}
.inline-related-list a::before {
content: "→";
color: var(--coral-400);
font-weight: 700;
}
.inline-related-list a:hover {
color: var(--coral-500);
gap: 0.7rem;
}
.dark .inline-related-list a {
color: var(--teal-200);
}
.dark .inline-related-list a:hover {
color: var(--coral-300);
} @media (max-width: 640px) {
.hero-article .hero-title-script {
font-size: 2rem;
}
.hero-article-content {
padding: 1.75rem 0 4.5rem;
}
.hero-article-image-wrap {
margin-top: -1.75rem;
margin-bottom: 1.5rem;
}
.hero-article-image {
border-radius: 0.75rem;
}
.article-body {
font-size: 1rem;
}
.article-body h2 {
font-size: 1.625rem;
}
.article-body h3 {
font-size: 1.25rem;
}
.article-lead {
font-size: 1.0625rem;
padding-left: 1rem;
}
.article-share {
flex-direction: column;
align-items: flex-start;
}
}