/* ============================================================ CSRB — design tokens (from palette.scss, coolors export) Direction: dark "control-room" base (matches an automation product) with saturated coral/lime accents used sparingly for energy, not everywhere. Editorial type scale, asymmetric sections, real depth via layered surfaces — not a stock SaaS-template look. ============================================================ */ :root { --coral: #ff6666; --lime: #ccff66; --indigo: #5d2e8c; --teal: #2ec4b6; --custard: #f1e8b8; --bg: #0d0a14; --bg-raised: #150f22; --bg-card: #1a1330; --border: color-mix(in srgb, var(--custard) 12%, transparent); /* 2026-08-13: was a hardcoded rgba() matching theme-1's custard specifically — now follows whichever theme's --custard is active */ --text: #f4f1ea; --text-muted: #b3a9c9; --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --space-section: clamp(4rem, 3rem + 5vw, 8rem); --radius: 18px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } /* 2026-08-13: background moved here from body — per the CSS canvas- background propagation rule, an unstyled lets BODY's background become the page's canvas background, which paints beneath absolutely everything (even z-index:-1 elements). That would have hidden the star/light-lines ambient layer below entirely. Setting it on directly avoids that propagation, so body::before/::after can paint above the solid color while still staying behind real content. */ html { scroll-behavior: smooth; color-scheme: dark; background: var(--bg); } body { margin: 0; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* 2026-08-13 (user-directed): "whole website background is black i like it but its static i want some very light effects on background when i scroll... blinking stars, or some color lines moving around... no too much aggressive." A single fixed full-viewport layer behind everything (position:fixed so it never scrolls away, low opacity, pointer-events none) — CSS-only, no per-page HTML changes needed since body::before applies globally from this one shared stylesheet. Two effects layered: (1) tiny twinkling star dots via a tiled radial-gradient pattern with a slow opacity pulse, (2) two soft, blurred theme-colored streaks drifting very slowly across the screen. Both intentionally subtle (low opacity, long duration) per "no too much aggressive". */ /* 2026-08-14 (user-directed iteration: "make stars like shining more and less motion" then "they only look like dust on screen not stars") — a single flat-color dot at 2-3px just reads as a fleck. A real "star" needs a bright white hot core that falls off through the theme color into the dark background, which is what actually produces the shining/ glinting look — plain size increases alone don't do that. */ body::before { content: ""; position: fixed; inset: -5% -5%; z-index: -1; pointer-events: none; --star-core: #ffffff; background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 80%, transparent) 55%, transparent 100%), radial-gradient(3.5px 3.5px at 65% 15%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 80%, transparent) 55%, transparent 100%), radial-gradient(1.2px 1.2px at 40% 70%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 75%, transparent) 55%, transparent 100%), radial-gradient(2.5px 2.5px at 85% 60%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 80%, transparent) 55%, transparent 100%), radial-gradient(1.2px 1.2px at 10% 85%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 70%, transparent) 55%, transparent 100%), radial-gradient(4px 4px at 92% 90%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 75%, transparent) 55%, transparent 100%), radial-gradient(1.2px 1.2px at 50% 45%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 65%, transparent) 55%, transparent 100%), radial-gradient(1px 1px at 30% 55%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 60%, transparent) 55%, transparent 100%), radial-gradient(2.8px 2.8px at 75% 35%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 70%, transparent) 55%, transparent 100%), radial-gradient(1px 1px at 5% 40%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 55%, transparent) 55%, transparent 100%), radial-gradient(1.8px 1.8px at 55% 90%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 60%, transparent) 55%, transparent 100%), radial-gradient(3.2px 3.2px at 95% 20%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 75%, transparent) 55%, transparent 100%), radial-gradient(1.3px 1.3px at 25% 10%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 65%, transparent) 55%, transparent 100%), radial-gradient(2px 2px at 60% 65%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 70%, transparent) 55%, transparent 100%), radial-gradient(1px 1px at 15% 60%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 55%, transparent) 55%, transparent 100%), radial-gradient(2.3px 2.3px at 45% 25%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 70%, transparent) 55%, transparent 100%), radial-gradient(1.3px 1.3px at 78% 80%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 60%, transparent) 55%, transparent 100%), radial-gradient(3.8px 3.8px at 8% 15%, var(--star-core) 0%, color-mix(in srgb, var(--custard) 78%, transparent) 55%, transparent 100%); background-size: 100% 100%; background-repeat: no-repeat; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--custard) 85%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--custard) 40%, transparent)); animation: star-twinkle 2.2s ease-in-out infinite alternate, star-drift 220s linear infinite; } @keyframes star-twinkle { from { opacity: 0.4; } to { opacity: 1; } } @keyframes star-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(-0.3%, 0.2%); } 100% { transform: translate(0, 0); } } body::after { content: ""; position: fixed; inset: -10% -10%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--teal) 11%, transparent) 50%, transparent 65%), linear-gradient(-100deg, transparent 35%, color-mix(in srgb, var(--coral) 9%, transparent) 50%, transparent 65%); background-size: 200% 200%; animation: light-lines-drift 50s ease-in-out infinite alternate; } @keyframes light-lines-drift { 0% { background-position: 0% 0%, 100% 100%; } 100% { background-position: 100% 40%, 0% 60%; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 0.5em; line-height: 1.15; } p { margin: 0 0 1em; color: var(--text-muted); } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(13, 10, 20, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 10px; } .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } /* 2026-08-13 (user-directed): "add some animation with mouse hover on diffent buttons and elements" — an underline that grows from the left on hover, not just a color swap. */ .nav-links a { text-decoration: none; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; transition: color 0.2s var(--ease); position: relative; padding-bottom: 2px; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--lime); transition: width 0.25s var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--lime); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-cta { background: var(--coral); color: #1a0505; padding: 10px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 0.9rem; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); box-shadow: 0 4px 20px color-mix(in srgb, var(--coral) 25%, transparent); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--coral) 40%, transparent); } .nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.6rem; cursor: pointer; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; margin-left: 1.5rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .lang-switch button { background: none; border: none; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .lang-switch button.active { background: var(--coral); color: #1a0505; } .lang-switch button:not(.active):hover { color: var(--text); } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(4rem, 4rem + 4vw, 7rem) 0 var(--space-section); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%; /* 2026-08-13 (user-directed, live bug: "gradint in background of main website area is not changing with theme change") — these used to be hardcoded rgba() triples that happened to match the theme-1 palette's colors, so switching themes never touched them. color-mix() lets a radial-gradient reference the live --indigo/--teal/--coral custom properties directly (rgba() can't take a hex-string variable as its R/G/B channels), so this now actually follows the active theme. */ background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--indigo) 55%, transparent), transparent 45%), radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--teal) 25%, transparent), transparent 40%), radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--coral) 18%, transparent), transparent 45%); background-size: 130% 130%; pointer-events: none; z-index: 0; /* 2026-08-13 (user-directed): "add some animation on in headers section to look website more full of life" — a slow drift, not a distracting loop; 24s so it reads as ambient depth rather than an obvious animation. transform/background-position are compositor-friendly (web/performance.md), no layout-affecting properties touched. */ animation: hero-drift 24s ease-in-out infinite alternate; } @keyframes hero-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%; } 100% { background-position: 10% 15%, 85% 15%, 40% 85%; } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } /* 2026-08-13 (user-directed): "use some texture not plain gradient" — a subtle SVG-noise grain layered on top of the gradient, not a flat solid-color wash. Inline SVG feTurbulence, no external asset/request; opacity kept low (0.045) so it reads as texture, not visible static. */ .hero::after { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.045; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; } /* 2026-08-13 (user-directed): hero content staggers in on load — .eyebrow first, then h1, lead, and hero-actions each a beat later — rather than the whole block appearing at once, so the page feels like it's revealing itself instead of just rendering. */ .hero .eyebrow, .hero h1, .hero .lead, .hero .hero-actions { animation: hero-rise 0.7s var(--ease) backwards; } .hero .eyebrow { animation-delay: 0s; } .hero h1 { animation-delay: 0.08s; } .hero .lead { animation-delay: 0.18s; } .hero .hero-actions { animation-delay: 0.28s; } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero .eyebrow, .hero h1, .hero .lead, .hero .hero-actions { animation: none; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--lime) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent); color: var(--lime); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem); color: var(--text); } /* 2026-08-13 (user-directed): "create some textures also... on some text which is big and highlighted" — a real gradient fill (both theme accents, not a flat single color) instead of solid var(--coral), same technique premium marketing sites use for hero emphasis text. */ .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--coral), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { font-size: 1.15rem; max-width: 46ch; } .hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 0.98rem; cursor: pointer; border: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } .btn-primary { background: var(--coral); color: #1a0505; box-shadow: 0 6px 24px color-mix(in srgb, var(--coral) 30%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px color-mix(in srgb, var(--coral) 45%, transparent); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn-ghost:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); } .trust-row { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; } .trust-item { display: flex; flex-direction: column; } .trust-item strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--lime); } .trust-item span { font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Hero visual: stacked status card, mimics the real product */ .hero-visual { position: relative; } .status-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); transform: rotate(-2deg); } .status-card .row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; } .status-card .row:last-child { border-bottom: none; } .status-card .row span:first-child { color: var(--text-muted); } .pulse { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 700; } .pulse::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 1.6s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } } .status-card-back { position: absolute; top: 30px; right: -20px; width: 70%; z-index: -1; background: var(--indigo); border-radius: var(--radius); height: 90%; opacity: 0.5; transform: rotate(4deg); } /* ---------- Section shells ---------- */ section { padding: var(--space-section) 0; } .section-head { max-width: 640px; margin-bottom: 3rem; } .section-head .eyebrow { margin-bottom: 1rem; } .section-head h2 { font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem); } /* ---------- How it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; } .step { position: relative; padding: 2rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); } .step-num { font-family: var(--font-display); font-size: 2.2rem; color: var(--coral); display: block; margin-bottom: 1rem; } .step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .step p { margin: 0; font-size: 0.95rem; } /* ---------- Bento services grid ---------- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 1.25rem; } .bento-card { border-radius: var(--radius); padding: 1.75rem; position: relative; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .bento-card:hover { transform: translateY(-4px) scale(1.015); border-color: var(--teal); box-shadow: 0 14px 40px color-mix(in srgb, var(--teal) 20%, transparent); } .bento-card.wide { grid-column: span 2; } .bento-card.tall { grid-row: span 2; } .bento-card h4 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--text); } .bento-card p { font-size: 0.88rem; margin: 0; } .bento-card .tag { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 1.6rem; } .bento-card.accent { background: linear-gradient(135deg, var(--indigo), var(--bg-card)); } .bento-card.accent h4, .bento-card.accent p { color: var(--custard); } /* ---------- Pricing / trust panel ---------- */ .panel { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .panel h3 { font-size: 1.5rem; } .price-tag { font-family: var(--font-display); font-size: 2.6rem; color: var(--lime); white-space: nowrap; } .price-tag small { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); display: block; font-weight: 400; } /* ---------- Dedicated payment page (pagar.html) ---------- */ /* 2026-08-13 (user-directed): "for payment bring customer to new page its just showing under the form looks so cheap and scam make a proper page for payemnts both paypal and card" + "you have whole page still for payment form only using a small portion in the middle use a whole page properly for payment form left side for card detail right side for payment detial etc it should look like athentic payment page" — a real, full-width two-column checkout: left = order summary (what you're paying for, receipt-style, sticky so it stays visible while scrolling the payment panel), right = the actual payment methods. This is the standard e-commerce checkout convention (order summary + payment panel side by side), not a narrow card floating in the middle of empty space. */ .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; max-width: 980px; margin: 0 auto; } @media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } } .checkout-summary-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: sticky; top: 1.5rem; } .checkout-summary-panel__header { background: linear-gradient(135deg, var(--indigo), var(--bg-card)); padding: 2rem; text-align: center; } .checkout-summary-panel__header .eyebrow { color: var(--custard); } .checkout-amount { font-family: var(--font-display); font-size: 3rem; color: var(--lime); margin: 0.25rem 0 0; } .checkout-summary-panel__body { padding: 1.75rem 2rem; } .checkout-summary { list-style: none; margin: 0; padding: 0; } .checkout-summary li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .checkout-summary li:last-child { border-bottom: none; } .checkout-summary .k { color: var(--text-muted); } .checkout-summary .v { text-align: right; font-weight: 600; } .checkout-steps { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--border); } .checkout-steps li { display: flex; gap: 10px; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.6rem; align-items: flex-start; } .checkout-steps li:last-child { margin-bottom: 0; } .checkout-steps .num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--lime); } .checkout-payment-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .checkout-payment-panel h3 { font-size: 1.15rem; margin: 0 0 1.5rem; } .checkout-trust { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 0.78rem; color: var(--text-muted); margin: 1.5rem 0; } .checkout-trust svg { flex-shrink: 0; color: var(--teal); } .checkout-cards-row { display: flex; gap: 8px; justify-content: center; margin: 1rem 0 1.5rem; opacity: 0.85; } .checkout-cards-row svg { height: 22px; width: auto; } .checkout-loading, .checkout-error { text-align: center; padding: 3rem 2rem; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 520px; margin: 0 auto; } .checkout-error { color: var(--coral); } /* ---------- FAQ (accordion, no JS framework, native details/summary styled) ---------- */ .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { cursor: pointer; padding: 1.4rem 0; font-weight: 600; font-size: 1.02rem; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--coral); transition: transform 0.2s var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding-bottom: 1.4rem; margin: 0; } /* Honeypot field — off-screen, not display:none (some bots specifically check computed visibility and skip display:none fields, defeating the point). Real users never see or reach it. */ .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Wizard form (progressive step reveal) ---------- */ .wizard-step { animation: wizard-in 0.35s var(--ease); } .wizard-step[hidden] { display: none; } @keyframes wizard-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .step-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 0.75rem; background: color-mix(in srgb, var(--teal) 8%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent); border-radius: 10px; font-size: 0.88rem; } .step-summary .check { color: var(--teal); font-weight: 700; } .step-summary .label { color: var(--text-muted); } .step-summary .value { color: var(--text); font-weight: 600; } .step-summary button { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 0.8rem; text-decoration: underline; cursor: pointer; } .step-summary button:hover { color: var(--coral); } /* 2026-08-13 (user-directed): "there is 2 one Civil Registry 2nd Immigration ... now i want you to create civil registry cita search" — category picker at the top of the booking wizard. */ .category-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0.5rem; } @media (max-width: 640px) { .category-choice { grid-template-columns: 1fr; } } .category-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); } .category-btn strong { font-size: 0.95rem; color: var(--text); transition: color 0.2s var(--ease); } .category-btn span { font-size: 0.8rem; color: var(--text-muted); } .category-btn:hover { border-color: var(--teal); transform: translateY(-2px); } .category-btn:hover strong { color: var(--teal); } .category-btn.active { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, transparent); } /* Registro Civil office picker — single choice, real office addresses can run long, so this scrolls the same way the checkbox list does. */ #office-radio-list { max-height: 260px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; } #office-radio-list .checkbox-row { margin: 0.35rem 0; } .checkbox-row { display: flex; align-items: center; gap: 8px; margin: 0.5rem 0 1rem; font-size: 0.88rem; color: var(--text-muted); } .checkbox-row input { width: auto; } /* 2026-08-13 (user-directed): "add check boxes to select more than one office" — office lists can run long (some provinces have 20+ offices), so this scrolls within a bounded box instead of pushing the whole wizard step tall. */ #office-checkbox-list { max-height: 220px; overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; } #office-checkbox-list .checkbox-row { margin: 0.35rem 0; } .price-display { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; margin: 1rem 0; display: flex; justify-content: space-between; align-items: center; } .price-display .amount { font-family: var(--font-display); font-size: 1.5rem; color: var(--lime); } .price-display .label { font-size: 0.85rem; color: var(--text-muted); } /* 2026-08-13: highlighted note clarifying the price depends on the selections made, not a flat rate — deliberately visually distinct from the plain form-note style so it doesn't get skimmed past. */ .price-note { margin: -0.5rem 0 1rem; padding: 10px 14px; font-size: 0.82rem; line-height: 1.5; color: var(--text); background: rgba(210, 255, 88, 0.08); border: 1px solid rgba(210, 255, 88, 0.3); border-radius: 8px; } /* ---------- Form ---------- */ .form-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; max-width: 640px; margin: 0 auto; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field { margin-bottom: 1.25rem; } .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); } .field input, .field select, .field textarea { width: 100%; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.2s var(--ease); /* 2026-08-13 (user-directed): "look colors for calender icons and other stuff dont add black on black or dark color on dark color" — without this, browsers render native controls (date-picker icon, dropdown arrow, autofill background) assuming a LIGHT page background, which on this dark theme means a dark calendar icon on our dark input = invisible. color-scheme tells the browser to use its own dark-theme variants of every native control instead. */ color-scheme: dark; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); } .field textarea { resize: vertical; min-height: 90px; } /* 2026-08-13 (user-directed, live bug: "clander icon is black and background is also dark"): color-scheme: dark above already makes the browser render its native LIGHT calendar icon variant on its own — the filter: invert(1) that used to be here was flipping that already-light icon back to dark/black, actively causing the exact bug being fixed. Removed; color-scheme: dark alone is the correct, sufficient fix. */ .field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } /* Native checkbox next to dark labels — same dark-on-dark risk. */ .checkbox-row input[type="checkbox"] { accent-color: var(--coral); width: 16px; height: 16px; } .form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; } /* 2026-08-13 (user-directed): "there is no visible agrement to read and accept" — the booking agreement text (server/agreement.js, fetched live via GET /api/agreement) needs its own scrollable, clearly-bordered box so it reads as something the customer is meant to actually review, not a throwaway line of fine print. */ .agreement-box { margin-bottom: 1.25rem; } .agreement-text { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; max-height: 180px; overflow-y: auto; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 0.6rem; } .form-status { margin-top: 1rem; padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; display: none; } .form-status.show { display: block; } .form-status.ok { background: color-mix(in srgb, var(--teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); color: var(--teal); } .form-status.err { background: color-mix(in srgb, var(--coral) 12%, transparent); border: 1px solid color-mix(in srgb, var(--coral) 40%, transparent); color: var(--coral); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 3.5rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .footer-grid h5 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 1rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-grid a { text-decoration: none; color: var(--text-muted); font-size: 0.9rem; transition: color 0.2s; } .footer-grid a:hover { color: var(--lime); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); flex-wrap: wrap; gap: 1rem; } .disclaimer { background: color-mix(in srgb, var(--custard) 6%, transparent); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem; font-size: 0.85rem; color: var(--text-muted); margin-top: 2rem; } .disclaimer strong { color: var(--text); } /* 2026-08-14 (user-directed): "read file legal.txt and suggest me how we can implement this to our website" — legal/LSSI-required links added to every page's footer (not just index.html's richer footer-grid, which already had some of these). */ .footer-links-row { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: 0.82rem; } .footer-links-row a { color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease); } .footer-links-row a:hover { color: var(--lime); } /* Cookie consent banner (js/cookie-consent.js) */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(0,0,0,0.35); padding: 1.1rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; transform: translateY(110%); transition: transform 0.35s var(--ease); } .cookie-banner.show { transform: translateY(0); } .cookie-banner p { margin: 0; font-size: 0.85rem; color: var(--text-muted); max-width: 62ch; } .cookie-banner p a { color: var(--teal); } .cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; } .cookie-banner-actions button { border-radius: 999px; padding: 9px 20px; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease); } .cookie-banner-actions button:hover { transform: translateY(-1px); border-color: var(--lime); } .cookie-banner-actions button.primary { background: var(--coral); color: #1a0505; border-color: transparent; } @media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } } /* ---------- Utility ---------- */ .text-center { text-align: center; margin-left: auto; margin-right: auto; } .mt-lg { margin-top: var(--space-section); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero .container { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .bento { grid-template-columns: repeat(2, 1fr); } .bento-card.wide { grid-column: span 2; } .panel { grid-template-columns: 1fr; text-align: center; } .footer-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 680px) { /* 2026-08-13 (user-directed): "i dont like this menu setup for small screens like mobile make some other menu style which is more decent" — replaced the push-down accordion (previous attempts at this) with a standard slide-in drawer from the right + dimmed backdrop, the conventional "decent" mobile nav pattern most real sites use.