Start Informationsgespräch
commit
35f14a4f5e
60
index.html
60
index.html
|
|
@ -22,8 +22,8 @@
|
||||||
:root {
|
:root {
|
||||||
--page-bg: #0d0d1a;
|
--page-bg: #0d0d1a;
|
||||||
--page-bg-2: #1a1a2e;
|
--page-bg-2: #1a1a2e;
|
||||||
--green: #10b981;
|
--brand: #53d5cd;
|
||||||
--green-dark: #059669;
|
--brand-hover: #36b8b1;
|
||||||
--white: #ffffff;
|
--white: #ffffff;
|
||||||
--light: #f8fafc;
|
--light: #f8fafc;
|
||||||
--muted: #94a3b8;
|
--muted: #94a3b8;
|
||||||
|
|
@ -48,12 +48,12 @@
|
||||||
background:
|
background:
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
circle at 12% 0%,
|
circle at 12% 0%,
|
||||||
rgba(16, 185, 129, 0.09),
|
rgba(83, 213, 205, 0.09),
|
||||||
transparent 30%
|
transparent 30%
|
||||||
),
|
),
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
circle at 88% 26%,
|
circle at 88% 26%,
|
||||||
rgba(16, 185, 129, 0.055),
|
rgba(83, 213, 205, 0.055),
|
||||||
transparent 27%
|
transparent 27%
|
||||||
),
|
),
|
||||||
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand span {
|
.brand span {
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
|
|
@ -138,14 +138,14 @@
|
||||||
|
|
||||||
.nav-cta {
|
.nav-cta {
|
||||||
padding: 11px 16px;
|
padding: 11px 16px;
|
||||||
border: 1px solid rgba(16, 185, 129, 0.42);
|
border: 1px solid rgba(83, 213, 205, 0.42);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
color: var(--white) !important;
|
color: var(--white) !important;
|
||||||
background: rgba(16, 185, 129, 0.07);
|
background: rgba(83, 213, 205, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-cta:hover {
|
.nav-cta:hover {
|
||||||
background: rgba(16, 185, 129, 0.14);
|
background: rgba(83, 213, 205, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.18em;
|
letter-spacing: 0.18em;
|
||||||
|
|
@ -180,7 +180,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 .accent {
|
.hero h1 .accent {
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-lead {
|
.hero-lead {
|
||||||
|
|
@ -220,12 +220,12 @@
|
||||||
|
|
||||||
.button-primary {
|
.button-primary {
|
||||||
color: #06130f;
|
color: #06130f;
|
||||||
background: var(--green);
|
background: var(--brand);
|
||||||
box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
|
box-shadow: 0 14px 32px rgba(83, 213, 205, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-primary:hover {
|
.button-primary:hover {
|
||||||
background: #34d399;
|
background: #75e2dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-secondary {
|
.button-secondary {
|
||||||
|
|
@ -235,7 +235,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-secondary:hover {
|
.button-secondary:hover {
|
||||||
border-color: rgba(16, 185, 129, 0.55);
|
border-color: rgba(83, 213, 205, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-card {
|
.hero-card {
|
||||||
|
|
@ -251,7 +251,7 @@
|
||||||
background:
|
background:
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
circle at 72% 18%,
|
circle at 72% 18%,
|
||||||
rgba(16, 185, 129, 0.2),
|
rgba(83, 213, 205, 0.2),
|
||||||
transparent 32%
|
transparent 32%
|
||||||
),
|
),
|
||||||
linear-gradient(
|
linear-gradient(
|
||||||
|
|
@ -269,18 +269,18 @@
|
||||||
height: 230px;
|
height: 230px;
|
||||||
right: -75px;
|
right: -75px;
|
||||||
top: -75px;
|
top: -75px;
|
||||||
border: 1px solid rgba(16, 185, 129, 0.24);
|
border: 1px solid rgba(83, 213, 205, 0.24);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 0 34px rgba(16, 185, 129, 0.035),
|
0 0 0 34px rgba(83, 213, 205, 0.035),
|
||||||
0 0 0 68px rgba(16, 185, 129, 0.02);
|
0 0 0 68px rgba(83, 213, 205, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-card-mark {
|
.hero-card-mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 42px;
|
top: 42px;
|
||||||
left: 38px;
|
left: 38px;
|
||||||
color: rgba(16, 185, 129, 0.88);
|
color: rgba(83, 213, 205, 0.88);
|
||||||
font-size: 4.5rem;
|
font-size: 4.5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -342,13 +342,13 @@
|
||||||
|
|
||||||
.topic:hover {
|
.topic:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
border-color: rgba(16, 185, 129, 0.34);
|
border-color: rgba(83, 213, 205, 0.34);
|
||||||
background: var(--panel-strong);
|
background: var(--panel-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-number {
|
.topic-number {
|
||||||
margin-bottom: 70px;
|
margin-bottom: 70px;
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
|
|
@ -407,8 +407,8 @@
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--green);
|
background: var(--brand);
|
||||||
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08);
|
box-shadow: 0 0 0 5px rgba(83, 213, 205, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-section {
|
.review-section {
|
||||||
|
|
@ -504,8 +504,8 @@
|
||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus,
|
textarea:focus,
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: rgba(16, 185, 129, 0.75);
|
border-color: rgba(83, 213, 205, 0.75);
|
||||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
|
box-shadow: 0 0 0 3px rgba(83, 213, 205, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-input {
|
.rating-input {
|
||||||
|
|
@ -533,7 +533,7 @@
|
||||||
.rating-input label:hover,
|
.rating-input label:hover,
|
||||||
.rating-input label:hover ~ label,
|
.rating-input label:hover ~ label,
|
||||||
.rating-input input:checked ~ label {
|
.rating-input input:checked ~ label {
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.consent {
|
.consent {
|
||||||
|
|
@ -547,7 +547,7 @@
|
||||||
|
|
||||||
.consent input {
|
.consent input {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
accent-color: var(--green);
|
accent-color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-form .button {
|
.review-form .button {
|
||||||
|
|
@ -560,7 +560,7 @@
|
||||||
.form-status {
|
.form-status {
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -594,7 +594,7 @@
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #06130f;
|
color: #06130f;
|
||||||
background: var(--green);
|
background: var(--brand);
|
||||||
font-size: 0.72rem;
|
font-size: 0.72rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
@ -613,7 +613,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.stars {
|
.stars {
|
||||||
color: var(--green);
|
color: var(--brand);
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
.confirmation {
|
.confirmation {
|
||||||
|
--confirmation-accent: #53d5cd;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: #f8fafc;
|
color: #f8fafc;
|
||||||
background:
|
background:
|
||||||
radial-gradient(ellipse at 5% 20%, #10b98114, transparent 45%),
|
radial-gradient(ellipse at 5% 20%, #53d5cd14, transparent 45%),
|
||||||
radial-gradient(ellipse at 95% 45%, #1a1a2e, transparent 55%), #0d0d1a;
|
radial-gradient(ellipse at 95% 45%, #1a1a2e, transparent 55%), #0d0d1a;
|
||||||
font-family: Inter, system-ui, sans-serif;
|
font-family: Inter, system-ui, sans-serif;
|
||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
|
|
@ -21,7 +22,7 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.confirmation a:focus-visible {
|
.confirmation a:focus-visible {
|
||||||
outline: 3px solid #10b981;
|
outline: 3px solid var(--confirmation-accent);
|
||||||
outline-offset: 6px;
|
outline-offset: 6px;
|
||||||
}
|
}
|
||||||
.confirmation__header {
|
.confirmation__header {
|
||||||
|
|
@ -53,10 +54,9 @@
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
background: #f8fafc;
|
background: #f8fafc;
|
||||||
color: #087452;
|
color: var(--confirmation-accent);
|
||||||
border-radius: 0.9rem;
|
border-radius: 0.9rem;
|
||||||
letter-spacing: -0.08em;
|
letter-spacing: -0.08em;
|
||||||
font-family: Georgia, serif;
|
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
.confirmation__main {
|
.confirmation__main {
|
||||||
|
|
@ -81,25 +81,25 @@
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
border: 1px solid #10b98170;
|
border: 1px solid #53d5cd70;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #10b981;
|
color: var(--confirmation-accent);
|
||||||
}
|
}
|
||||||
.confirmation h1 {
|
.confirmation h1 {
|
||||||
margin: 1rem 0 1.5rem;
|
margin: 1rem 0 1.5rem;
|
||||||
font-family: "Playfair Display", Georgia, serif;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
font-size: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
line-height: 1.12;
|
line-height: 1.12;
|
||||||
letter-spacing: -0.035em;
|
letter-spacing: -0.035em;
|
||||||
}
|
}
|
||||||
.confirmation h1 em {
|
.confirmation h1 em {
|
||||||
color: #10b981;
|
color: var(--confirmation-accent);
|
||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
.confirmation h2 {
|
.confirmation h2 {
|
||||||
margin: 0.5rem 0 1rem;
|
margin: 0.5rem 0 1rem;
|
||||||
font-family: "Playfair Display", Georgia, serif;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
.confirmation__simulation {
|
.confirmation__simulation {
|
||||||
color: #cbd5e1;
|
color: #cbd5e1;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
border-left: 2px solid #10b981;
|
border-left: 2px solid var(--confirmation-accent);
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
.confirmation__grid {
|
.confirmation__grid {
|
||||||
|
|
@ -167,8 +167,8 @@
|
||||||
margin: 0.2rem 0 1rem;
|
margin: 0.2rem 0 1rem;
|
||||||
}
|
}
|
||||||
.confirmation__mail {
|
.confirmation__mail {
|
||||||
border-color: #10b98140;
|
border-color: #53d5cd40;
|
||||||
background: #10b98108;
|
background: #53d5cd08;
|
||||||
}
|
}
|
||||||
.confirmation__mail h2 {
|
.confirmation__mail h2 {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
@ -193,7 +193,7 @@
|
||||||
content: "✓";
|
content: "✓";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: #10b981;
|
color: var(--confirmation-accent);
|
||||||
}
|
}
|
||||||
.confirmation__next {
|
.confirmation__next {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
|
@ -213,7 +213,7 @@
|
||||||
}
|
}
|
||||||
.confirmation__steps li::before {
|
.confirmation__steps li::before {
|
||||||
content: "0" counter(steps);
|
content: "0" counter(steps);
|
||||||
color: #10b981;
|
color: var(--confirmation-accent);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
.confirmation__steps h3 {
|
.confirmation__steps h3 {
|
||||||
|
|
@ -242,14 +242,14 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.confirmation__button {
|
.confirmation__button {
|
||||||
background: #10b981;
|
background: var(--confirmation-accent);
|
||||||
color: #071a14 !important;
|
color: #071a14 !important;
|
||||||
}
|
}
|
||||||
.confirmation__link {
|
.confirmation__link {
|
||||||
border: 1px solid #ffffff20;
|
border: 1px solid #ffffff20;
|
||||||
}
|
}
|
||||||
.confirmation__button:hover {
|
.confirmation__button:hover {
|
||||||
background: #34d399;
|
background: #6de0d9;
|
||||||
}
|
}
|
||||||
.confirmation__link:hover {
|
.confirmation__link:hover {
|
||||||
background: #ffffff08;
|
background: #ffffff08;
|
||||||
|
|
|
||||||
|
|
@ -53,8 +53,8 @@
|
||||||
border-style: dashed;
|
border-style: dashed;
|
||||||
}
|
}
|
||||||
.booking__button {
|
.booking__button {
|
||||||
color: #f7faf7;
|
color: #061619;
|
||||||
background: #176448;
|
background: #53d5cd;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
outline-offset: 4px;
|
outline-offset: 4px;
|
||||||
}
|
}
|
||||||
.booking__button:focus-visible {
|
.booking__button:focus-visible {
|
||||||
outline-color: #18352b;
|
outline-color: #53d5cd;
|
||||||
}
|
}
|
||||||
.booking__errors,
|
.booking__errors,
|
||||||
.booking__field-error {
|
.booking__field-error {
|
||||||
|
|
@ -160,8 +160,8 @@
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
.booking__dialog .booking__button {
|
.booking__dialog .booking__button {
|
||||||
background: #00b6c7;
|
background: #53d5cd;
|
||||||
border-color: #00b6c7;
|
border-color: #53d5cd;
|
||||||
color: #061619;
|
color: #061619;
|
||||||
border-radius: 0.75rem;
|
border-radius: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
@ -188,5 +188,5 @@
|
||||||
.booking__dialog :focus-visible,
|
.booking__dialog :focus-visible,
|
||||||
.booking__dialog .booking__errors:focus,
|
.booking__dialog .booking__errors:focus,
|
||||||
.booking__dialog .booking__result:focus {
|
.booking__dialog .booking__result:focus {
|
||||||
outline-color: #00d6e8;
|
outline-color: #53d5cd;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
:root {
|
:root {
|
||||||
--nav-bg: #0d0d1a;
|
--nav-bg: #0d0d1a;
|
||||||
--nav-border: rgba(248, 250, 252, 0.08);
|
--nav-border: rgba(248, 250, 252, 0.08);
|
||||||
--nav-green: #10b981;
|
--nav-accent: #53d5cd;
|
||||||
--nav-white: #ffffff;
|
--nav-white: #ffffff;
|
||||||
--nav-light: #f8fafc;
|
--nav-light: #f8fafc;
|
||||||
--nav-muted: #94a3b8;
|
--nav-muted: #94a3b8;
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
.navbar__inner {
|
.navbar__inner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 76px;
|
min-height: 96px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -52,9 +52,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__logo-img {
|
.navbar__logo-img {
|
||||||
height: 40px;
|
width: 72px;
|
||||||
width: auto;
|
height: 72px;
|
||||||
|
padding: 5px;
|
||||||
display: block;
|
display: block;
|
||||||
|
object-fit: contain;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__brand-text {
|
.navbar__brand-text {
|
||||||
|
|
@ -119,7 +123,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__link--home:hover {
|
.navbar__link--home:hover {
|
||||||
border-color: rgba(16, 185, 129, 0.55);
|
border-color: rgba(83, 213, 205, 0.55);
|
||||||
color: var(--nav-white);
|
color: var(--nav-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -127,7 +131,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #22d3ee;
|
color: var(--nav-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar__home-icon svg {
|
.navbar__home-icon svg {
|
||||||
|
|
@ -142,7 +146,7 @@
|
||||||
|
|
||||||
.navbar a:focus-visible,
|
.navbar a:focus-visible,
|
||||||
.navbar button:focus-visible {
|
.navbar button:focus-visible {
|
||||||
outline: 3px solid var(--nav-green);
|
outline: 3px solid var(--nav-accent);
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -184,7 +188,7 @@
|
||||||
|
|
||||||
.navbar__nav {
|
.navbar__nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 76px;
|
top: 96px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: var(--nav-bg);
|
background: var(--nav-bg);
|
||||||
|
|
@ -217,5 +221,5 @@
|
||||||
|
|
||||||
/* Platz für die fixierte Navbar */
|
/* Platz für die fixierte Navbar */
|
||||||
body {
|
body {
|
||||||
padding-top: 76px;
|
padding-top: 96px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: #f8fafc;
|
color: #f8fafc;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 12% 0%, #10b98117, transparent 30%),
|
radial-gradient(circle at 12% 0%, #53d5cd17, transparent 30%),
|
||||||
radial-gradient(circle at 88% 26%, #10b9810e, transparent 27%),
|
radial-gradient(circle at 88% 26%, #53d5cd0e, transparent 27%),
|
||||||
linear-gradient(145deg, #0d0d1a, #1a1a2e);
|
linear-gradient(145deg, #0d0d1a, #1a1a2e);
|
||||||
font-family: Inter, system-ui, sans-serif;
|
font-family: Inter, system-ui, sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
}
|
}
|
||||||
.packages-eyebrow,
|
.packages-eyebrow,
|
||||||
.package-type {
|
.package-type {
|
||||||
color: #10b981;
|
color: #53d5cd;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.14em;
|
letter-spacing: 0.14em;
|
||||||
|
|
@ -82,9 +82,9 @@
|
||||||
.package-highlight {
|
.package-highlight {
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
padding: 0.25rem 0.65rem;
|
padding: 0.25rem 0.65rem;
|
||||||
background: #10b98114;
|
background: #53d5cd14;
|
||||||
color: #34d399;
|
color: #75e2dc;
|
||||||
border: 1px solid #10b98133;
|
border: 1px solid #53d5cd33;
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
|
|
@ -137,30 +137,30 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.package-btn:hover {
|
.package-btn:hover {
|
||||||
border-color: #10b981;
|
border-color: #53d5cd;
|
||||||
background: #10b98114;
|
background: #53d5cd14;
|
||||||
}
|
}
|
||||||
.package-btn.primary-cta {
|
.package-btn.primary-cta {
|
||||||
background: #10b981;
|
background: #53d5cd;
|
||||||
border-color: #10b981;
|
border-color: #53d5cd;
|
||||||
color: #06130f;
|
color: #06130f;
|
||||||
}
|
}
|
||||||
.package-btn.primary-cta:hover {
|
.package-btn.primary-cta:hover {
|
||||||
background: #34d399;
|
background: #75e2dc;
|
||||||
}
|
}
|
||||||
.package-btn:disabled {
|
.package-btn:disabled {
|
||||||
opacity: 0.65;
|
opacity: 0.65;
|
||||||
cursor: wait;
|
cursor: wait;
|
||||||
}
|
}
|
||||||
.packages-section :focus-visible {
|
.packages-section :focus-visible {
|
||||||
outline: 3px solid #10b981;
|
outline: 3px solid #53d5cd;
|
||||||
outline-offset: 4px;
|
outline-offset: 4px;
|
||||||
}
|
}
|
||||||
.packages-back {
|
.packages-back {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
padding-block: 0.5rem;
|
padding-block: 0.5rem;
|
||||||
color: #34d399;
|
color: #75e2dc;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.detail-heading {
|
.detail-heading {
|
||||||
|
|
@ -188,7 +188,7 @@
|
||||||
margin-block: 0.65rem;
|
margin-block: 0.65rem;
|
||||||
}
|
}
|
||||||
.detail-list li::marker {
|
.detail-list li::marker {
|
||||||
color: #10b981;
|
color: #53d5cd;
|
||||||
}
|
}
|
||||||
.process-step {
|
.process-step {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
@ -212,7 +212,7 @@
|
||||||
font-size: clamp(2rem, 4vw, 3rem);
|
font-size: clamp(2rem, 4vw, 3rem);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
color: #34d399;
|
color: #75e2dc;
|
||||||
}
|
}
|
||||||
.price-note,
|
.price-note,
|
||||||
.booking-notice {
|
.booking-notice {
|
||||||
|
|
@ -250,12 +250,12 @@
|
||||||
border-color: #94a3b840;
|
border-color: #94a3b840;
|
||||||
}
|
}
|
||||||
.packages-section .booking__dialog .booking__button:not(.booking__cancel) {
|
.packages-section .booking__dialog .booking__button:not(.booking__cancel) {
|
||||||
background: #10b981;
|
background: #53d5cd;
|
||||||
border-color: #10b981;
|
border-color: #53d5cd;
|
||||||
color: #06130f;
|
color: #06130f;
|
||||||
}
|
}
|
||||||
.packages-section .booking__dialog :focus-visible {
|
.packages-section .booking__dialog :focus-visible {
|
||||||
outline-color: #10b981;
|
outline-color: #53d5cd;
|
||||||
}
|
}
|
||||||
@media (max-width: 60rem) {
|
@media (max-width: 60rem) {
|
||||||
.packages-container {
|
.packages-container {
|
||||||
|
|
|
||||||
|
|
@ -333,16 +333,16 @@
|
||||||
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
||||||
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
||||||
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
||||||
--color-green-100: oklch(96.2% 0.044 156.743);
|
--color-green-100: #e6fbf9;
|
||||||
--color-green-200: oklch(92.5% 0.084 155.995);
|
--color-green-200: #cef7f4;
|
||||||
--color-green-300: oklch(87.1% 0.15 154.449);
|
--color-green-300: #a5eee9;
|
||||||
--color-green-400: oklch(79.2% 0.209 151.711);
|
--color-green-400: #78e2dc;
|
||||||
--color-green-500: oklch(72.3% 0.219 149.579);
|
--color-green-500: #53d5cd;
|
||||||
--color-green-600: oklch(62.7% 0.194 149.214);
|
--color-green-600: #36b8b1;
|
||||||
--color-green-700: oklch(52.7% 0.154 150.069);
|
--color-green-700: #298f8b;
|
||||||
--color-green-800: oklch(44.8% 0.119 151.328);
|
--color-green-800: #1e706d;
|
||||||
--color-emerald-100: oklch(95% 0.052 163.051);
|
--color-emerald-100: #e6fbf9;
|
||||||
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
--color-emerald-400: #53d5cd;
|
||||||
--color-teal-500: oklch(70.4% 0.14 182.503);
|
--color-teal-500: oklch(70.4% 0.14 182.503);
|
||||||
--color-teal-600: oklch(60% 0.118 184.704);
|
--color-teal-600: oklch(60% 0.118 184.704);
|
||||||
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
||||||
|
|
@ -2483,7 +2483,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.border-emerald-400\/20 {
|
.border-emerald-400\/20 {
|
||||||
border-color: #00d29433;
|
border-color: #53d5cd33;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.border-emerald-400\/20 {
|
.border-emerald-400\/20 {
|
||||||
|
|
@ -2495,7 +2495,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.border-emerald-400\/30 {
|
.border-emerald-400\/30 {
|
||||||
border-color: #00d2944d;
|
border-color: #53d5cd4d;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.border-emerald-400\/30 {
|
.border-emerald-400\/30 {
|
||||||
|
|
@ -2540,7 +2540,7 @@
|
||||||
border-color: var(--color-green-500);
|
border-color: var(--color-green-500);
|
||||||
}
|
}
|
||||||
.border-green-500\/20 {
|
.border-green-500\/20 {
|
||||||
border-color: #00c75833;
|
border-color: #53d5cd33;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.border-green-500\/20 {
|
.border-green-500\/20 {
|
||||||
|
|
@ -2552,7 +2552,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.border-green-500\/30 {
|
.border-green-500\/30 {
|
||||||
border-color: #00c7584d;
|
border-color: #53d5cd4d;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.border-green-500\/30 {
|
.border-green-500\/30 {
|
||||||
|
|
@ -3109,7 +3109,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bg-emerald-400\/10 {
|
.bg-emerald-400\/10 {
|
||||||
background-color: #00d2941a;
|
background-color: #53d5cd1a;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.bg-emerald-400\/10 {
|
.bg-emerald-400\/10 {
|
||||||
|
|
@ -3164,7 +3164,7 @@
|
||||||
background-color: var(--color-green-100);
|
background-color: var(--color-green-100);
|
||||||
}
|
}
|
||||||
.bg-green-500\/10 {
|
.bg-green-500\/10 {
|
||||||
background-color: #00c7581a;
|
background-color: #53d5cd1a;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.bg-green-500\/10 {
|
.bg-green-500\/10 {
|
||||||
|
|
@ -3176,7 +3176,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bg-green-500\/20 {
|
.bg-green-500\/20 {
|
||||||
background-color: #00c75833;
|
background-color: #53d5cd33;
|
||||||
}
|
}
|
||||||
@supports (color: color-mix(in lab, red, red)) {
|
@supports (color: color-mix(in lab, red, red)) {
|
||||||
.bg-green-500\/20 {
|
.bg-green-500\/20 {
|
||||||
|
|
@ -8681,8 +8681,8 @@
|
||||||
--ink-strong: oklch(20% 0.03 220);
|
--ink-strong: oklch(20% 0.03 220);
|
||||||
--surface-elevated: oklch(18% 0.026 221);
|
--surface-elevated: oklch(18% 0.026 221);
|
||||||
--surface-soft: oklch(23% 0.028 219);
|
--surface-soft: oklch(23% 0.028 219);
|
||||||
--accent-strong: oklch(70% 0.12 205);
|
--accent-strong: #53d5cd;
|
||||||
--accent-muted: oklch(58% 0.09 205);
|
--accent-muted: #36b8b1;
|
||||||
--accent-warm: oklch(84% 0.16 87);
|
--accent-warm: oklch(84% 0.16 87);
|
||||||
--background: oklch(13% 0.022 223);
|
--background: oklch(13% 0.022 223);
|
||||||
--foreground: oklch(96% 0.008 210);
|
--foreground: oklch(96% 0.008 210);
|
||||||
|
|
@ -8690,7 +8690,7 @@
|
||||||
--card-foreground: oklch(95% 0.008 210);
|
--card-foreground: oklch(95% 0.008 210);
|
||||||
--popover: oklch(17% 0.024 221);
|
--popover: oklch(17% 0.024 221);
|
||||||
--popover-foreground: oklch(95% 0.008 210);
|
--popover-foreground: oklch(95% 0.008 210);
|
||||||
--primary: oklch(70% 0.12 205);
|
--primary: #53d5cd;
|
||||||
--primary-foreground: oklch(18% 0.02 220);
|
--primary-foreground: oklch(18% 0.02 220);
|
||||||
--secondary: oklch(24% 0.026 220);
|
--secondary: oklch(24% 0.026 220);
|
||||||
--secondary-foreground: oklch(90% 0.01 210);
|
--secondary-foreground: oklch(90% 0.01 210);
|
||||||
|
|
@ -8710,7 +8710,7 @@
|
||||||
--chart-5: oklch(63% 0.09 177);
|
--chart-5: oklch(63% 0.09 177);
|
||||||
--sidebar: oklch(15% 0.02 221);
|
--sidebar: oklch(15% 0.02 221);
|
||||||
--sidebar-foreground: oklch(95% 0.008 210);
|
--sidebar-foreground: oklch(95% 0.008 210);
|
||||||
--sidebar-primary: oklch(70% 0.12 205);
|
--sidebar-primary: #53d5cd;
|
||||||
--sidebar-primary-foreground: oklch(18% 0.02 220);
|
--sidebar-primary-foreground: oklch(18% 0.02 220);
|
||||||
--sidebar-accent: oklch(23% 0.026 219);
|
--sidebar-accent: oklch(23% 0.026 219);
|
||||||
--sidebar-accent-foreground: oklch(95% 0.008 210);
|
--sidebar-accent-foreground: oklch(95% 0.008 210);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue