mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 11:24:26 +00:00
66e20d25a7
- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
700 lines
15 KiB
CSS
700 lines
15 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--bone-white: #f6f1ec;
|
|
--soft-cream: #efe7de;
|
|
--mocha-taupe: #b8a89a;
|
|
--deep-earth: #6f5e4f;
|
|
--charcoal-brown: #3f362e;
|
|
|
|
--ivory-cream: #fffef9;
|
|
--sand-beige: #e8e4dd;
|
|
--forest-green: #2e8b57;
|
|
--clay-orange: #d2691e;
|
|
--brick-red: #b22222;
|
|
--slate-blue: #6a5acd;
|
|
|
|
--forest-green-alpha: rgba(46, 139, 87, 0.1);
|
|
--clay-orange-alpha: rgba(210, 105, 30, 0.1);
|
|
--brick-red-alpha: rgba(178, 34, 34, 0.1);
|
|
--slate-blue-alpha: rgba(106, 90, 205, 0.1);
|
|
--charcoal-brown-alpha: rgba(63, 54, 46, 0.1);
|
|
|
|
/* Aperture - Square UI */
|
|
--ui-primary: #006aff;
|
|
--ui-primary-hover: #005ed6;
|
|
--ui-primary-light: #e6f0ff;
|
|
|
|
--ui-bg: #f6f8fa;
|
|
--ui-bg-card: #ffffff;
|
|
--ui-bg-hover: #f3f4f6;
|
|
|
|
--ui-border: #e1e4e8;
|
|
--ui-border-light: #f3f4f6;
|
|
|
|
--ui-text-primary: #24292e;
|
|
--ui-text-secondary: #586069;
|
|
--ui-text-tertiary: #8b949e;
|
|
--ui-text-inverse: #ffffff;
|
|
|
|
--ui-success: #28a745;
|
|
--ui-success-light: #d4edda;
|
|
|
|
--ui-warning: #dbab09;
|
|
--ui-warning-light: #fff3cd;
|
|
|
|
--ui-error: #d73a49;
|
|
--ui-error-light: #f8d7da;
|
|
|
|
--ui-info: #0366d6;
|
|
--ui-info-light: #cce5ff;
|
|
|
|
--ui-shadow-sm:
|
|
0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
--ui-shadow-md:
|
|
0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--ui-shadow-lg:
|
|
0 8px 24px rgba(0, 0, 0, 0, 16), 0 4px 6px rgba(0, 0, 0, 0.08);
|
|
--ui-shadow-xl:
|
|
0 20px 25px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.08);
|
|
|
|
--ui-radius-sm: 4px;
|
|
--ui-radius-md: 6px;
|
|
--ui-radius-lg: 8px;
|
|
--ui-radius-xl: 12px;
|
|
--ui-radius-2xl: 16px;
|
|
--ui-radius-full: 9999px;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 12px;
|
|
--radius-2xl: 16px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Font sizes */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
}
|
|
|
|
body {
|
|
color: var(--charcoal-brown);
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: "Playfair Display", serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.booking-header {
|
|
@apply fixed top-0 left-0 right-0 z-50;
|
|
background: var(--bone-white);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--mocha-taupe);
|
|
}
|
|
|
|
.booking-nav {
|
|
@apply max-w-7xl mx-auto px-8 py-4 flex items-center justify-between;
|
|
}
|
|
|
|
.booking-nav .logo a {
|
|
@apply text-xl tracking-tight hover:opacity-80 transition-opacity;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.booking-nav .nav-actions {
|
|
@apply flex items-center gap-4;
|
|
}
|
|
|
|
.nav-primary {
|
|
@apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between;
|
|
}
|
|
|
|
.logo a {
|
|
@apply text-2xl tracking-tight hover:opacity-80 transition-opacity;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.nav-links {
|
|
@apply hidden md:flex items-center space-x-12;
|
|
}
|
|
|
|
.nav-links a {
|
|
@apply hover:opacity-70 transition-opacity font-medium;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.nav-actions {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
|
|
background: linear-gradient(135deg, #3E352E, var(--deep-earth));
|
|
color: var(--bone-white);
|
|
border-color: #3E352E;
|
|
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
|
|
background: linear-gradient(135deg, var(--deep-earth), #3E352E);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(139, 69, 19, 0.2);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
|
|
background: linear-gradient(135deg, var(--bone-white), var(--soft-cream));
|
|
color: var(--charcoal-brown);
|
|
border-color: var(--mocha-taupe);
|
|
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
|
|
}
|
|
|
|
.btn-secondary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(139, 69, 19, 0.1),
|
|
transparent
|
|
);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn-secondary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2);
|
|
background: linear-gradient(135deg, var(--soft-cream), var(--bone-white));
|
|
border-color: #3E352E;
|
|
}
|
|
|
|
.btn-secondary:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
|
|
}
|
|
|
|
.hero {
|
|
@apply min-h-screen flex items-center justify-center pt-24 relative overflow-hidden;
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% 80%,
|
|
rgba(139, 69, 19, 0.03) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 20%,
|
|
rgba(218, 165, 32, 0.02) 0%,
|
|
transparent 50%
|
|
);
|
|
animation: heroGlow 8s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 30% 40%,
|
|
rgba(139, 69, 19, 0.04) 1px,
|
|
transparent 1px
|
|
),
|
|
radial-gradient(
|
|
circle at 70% 60%,
|
|
rgba(218, 165, 32, 0.03) 1px,
|
|
transparent 1px
|
|
),
|
|
radial-gradient(
|
|
circle at 50% 80%,
|
|
rgba(139, 69, 19, 0.02) 1px,
|
|
transparent 1px
|
|
);
|
|
background-size:
|
|
100px 100px,
|
|
150px 150px,
|
|
200px 200px;
|
|
background-position:
|
|
0 0,
|
|
50px 50px,
|
|
100px 100px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes heroGlow {
|
|
0% {
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
@apply max-w-7xl mx-auto px-8 text-center relative z-10;
|
|
}
|
|
|
|
.logo-mark {
|
|
@apply w-24 h-24 mx-auto mb-12;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.hero h1 {
|
|
@apply text-7xl md:text-9xl mb-4 tracking-tight;
|
|
color: var(--charcoal-brown);
|
|
animation: heroFadeIn 1s ease-out 0.5s both;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero h2 {
|
|
@apply text-2xl md:text-3xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0;
|
|
animation: heroFadeIn 1s ease-out 1s both;
|
|
}
|
|
|
|
.hero p {
|
|
@apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0;
|
|
animation: heroFadeIn 1s ease-out 1.5s both;
|
|
}
|
|
|
|
.hero-actions {
|
|
@apply flex items-center justify-center gap-6 flex-wrap;
|
|
animation: heroFadeIn 1s ease-out 2s both;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes heroFadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.hero-image {
|
|
@apply mt-16 rounded-2xl overflow-hidden;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.foundation {
|
|
@apply max-w-7xl mx-auto px-8 py-32 grid md:grid-cols-2 gap-16 items-center;
|
|
}
|
|
|
|
.foundation article {
|
|
@apply space-y-8;
|
|
}
|
|
|
|
.foundation h3 {
|
|
@apply text-sm font-semibold tracking-widest uppercase mb-4;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.foundation h4 {
|
|
@apply text-4xl md:text-5xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.foundation p {
|
|
@apply text-xl leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.foundation-image {
|
|
@apply rounded-2xl overflow-hidden h-96;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.services-preview {
|
|
@apply max-w-7xl mx-auto px-8 py-32;
|
|
}
|
|
|
|
.services-preview h3 {
|
|
@apply text-4xl md:text-5xl mb-16 text-center;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.service-cards {
|
|
@apply grid md:grid-cols-3 gap-12 mb-16;
|
|
}
|
|
|
|
.service-card {
|
|
@apply p-10 rounded-2xl transition-shadow;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.service-card h4 {
|
|
@apply text-2xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.service-card p {
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.testimonials {
|
|
@apply max-w-7xl mx-auto px-8 py-32 rounded-3xl mb-12;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.testimonials h3 {
|
|
@apply text-4xl md:text-5xl mb-16 text-center;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.testimonial-grid {
|
|
@apply grid md:grid-cols-2 gap-12 mb-16;
|
|
}
|
|
|
|
.testimonial {
|
|
@apply p-10 rounded-2xl;
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
.testimonial .stars {
|
|
@apply text-2xl mb-6;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.testimonial p {
|
|
@apply text-xl mb-6 italic leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.testimonial cite {
|
|
@apply font-semibold not-italic block;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.site-footer {
|
|
@apply py-16;
|
|
background: var(--charcoal-brown);
|
|
}
|
|
|
|
.site-footer a {
|
|
@apply hover:opacity-70 transition-opacity;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.footer-brand {
|
|
@apply max-w-7xl mx-auto px-8 mb-12;
|
|
}
|
|
|
|
.footer-brand span {
|
|
@apply text-2xl block mb-3;
|
|
color: var(--bone-white);
|
|
}
|
|
|
|
.footer-brand p {
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.footer-links {
|
|
@apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
|
|
}
|
|
|
|
.footer-legal {
|
|
@apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
|
|
}
|
|
|
|
.footer-contact {
|
|
@apply max-w-7xl mx-auto px-8 flex flex-wrap gap-8;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.section {
|
|
@apply py-32;
|
|
}
|
|
|
|
.section-header {
|
|
@apply max-w-7xl mx-auto px-8 mb-16;
|
|
}
|
|
|
|
.section-title {
|
|
@apply text-4xl md:text-5xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.section-subtitle {
|
|
@apply text-xl max-w-2xl leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.select-content {
|
|
background: var(--bone-white);
|
|
border: 1px solid var(--mocha-taupe);
|
|
}
|
|
|
|
.select-item {
|
|
color: var(--charcoal-brown);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.select-item:hover,
|
|
.select-item[data-highlighted] {
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.select-item[data-state="checked"] {
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
/* ========================================
|
|
ELEGANT NAVIGATION STYLES
|
|
======================================== */
|
|
|
|
.site-header {
|
|
@apply fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-amber-100/50 transition-all duration-300;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 25% 25%,
|
|
rgba(139, 69, 19, 0.02) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 75% 75%,
|
|
rgba(218, 165, 32, 0.01) 0%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
|
|
.site-header::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(
|
|
45deg,
|
|
transparent 49%,
|
|
rgba(139, 69, 19, 0.03) 50%,
|
|
transparent 51%
|
|
),
|
|
linear-gradient(
|
|
-45deg,
|
|
transparent 49%,
|
|
rgba(218, 165, 32, 0.02) 50%,
|
|
transparent 51%
|
|
);
|
|
background-size: 20px 20px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.site-header.scrolled {
|
|
@apply shadow-lg;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.nav-primary {
|
|
@apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between relative;
|
|
}
|
|
|
|
.logo a {
|
|
@apply text-2xl font-bold relative transition-all duration-300;
|
|
color: var(--charcoal-brown);
|
|
text-shadow: 0 1px 2px rgba(139, 69, 19, 0.1);
|
|
}
|
|
|
|
.logo a::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
left: -8px;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(139, 69, 19, 0.05),
|
|
rgba(218, 165, 32, 0.03)
|
|
);
|
|
border-radius: 8px;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.logo a:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-links {
|
|
@apply hidden md:flex items-center space-x-8;
|
|
}
|
|
|
|
.nav-links a {
|
|
@apply text-sm font-medium transition-all duration-300 relative;
|
|
color: var(--charcoal-brown);
|
|
position: relative;
|
|
}
|
|
|
|
.nav-links a::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
#3E352E,
|
|
var(--golden-brown)
|
|
);
|
|
transition: width 0.3s ease;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.nav-links a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #3E352E;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-actions {
|
|
@apply flex items-center gap-4;
|
|
}
|
|
|
|
.nav-actions .btn-primary,
|
|
.nav-actions .btn-secondary {
|
|
@apply transition-all duration-300;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-actions .btn-primary::before,
|
|
.nav-actions .btn-secondary::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.nav-actions .btn-primary:hover::before,
|
|
.nav-actions .btn-secondary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.nav-actions .btn-primary:hover,
|
|
.nav-actions .btn-secondary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
|
|
}
|
|
|
|
.select-trigger {
|
|
background: var(--bone-white);
|
|
border: 1px solid var(--mocha-taupe);
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.select-trigger:hover {
|
|
border-color: var(--deep-earth);
|
|
}
|
|
|
|
.select-trigger[data-state="open"] {
|
|
border-color: var(--deep-earth);
|
|
}
|
|
|
|
.icon-btn {
|
|
@apply p-2 rounded-lg transition-all duration-300 border border-transparent;
|
|
color: var(--charcoal-brown);
|
|
background: transparent;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: var(--soft-cream);
|
|
border-color: var(--mocha-taupe);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.icon-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|