/* Elevven11 Studio - Marketing Site Stylesheet Standalone design system (dark, light-green accent). Not shared with the main portfolio stylesheet on purpose - this is a separate brand. */ /* The Outfit webfont is linked from each page's , not @import-ed here. An @import cannot start downloading until this file has been fetched and parsed, which put the fonts a full round trip behind the stylesheet. */ :root { color-scheme: dark; /* Color Palette */ --bg-primary: #0b0a10; --bg-secondary: #131019; --bg-tertiary: #1c1826; --text-primary: #f7f3ec; --text-secondary: #a79f95; --text-muted: #7a7268; --accent-gold: #86efac; --accent-orange: #22c55e; --accent-purple: #2dd4bf; --accent-green: #3fb950; /* Failure states only (a send that didn't go through). Tuned for the dark ground; the light theme takes it considerably darker to stay legible. */ --accent-danger: #f87171; /* True gold - used sparingly for "premium" and "money/earnings" moments (the Most Popular badge, referral commission figures) so it reads as a deliberate highlight against the green brand, not a second primary. */ --accent-champagne: #f0c866; --accent-champagne-dark: #c99a2e; --gradient-champagne: linear-gradient(135deg, var(--accent-champagne) 0%, var(--accent-champagne-dark) 100%); /* Gradients */ --gradient-neon: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%); --gradient-card: linear-gradient(145deg, rgba(19, 16, 25, 0.8) 0%, rgba(28, 24, 38, 0.5) 100%); /* Shadows & Glows */ --glow-gold: 0 0 15px rgba(134, 239, 172, 0.35); --glow-champagne: 0 0 15px rgba(240, 200, 102, 0.35); --shadow-main: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Borders */ --border-subtle: 1px solid rgba(247, 243, 236, 0.1); --border-radius: 12px; /* Surfaces and hairlines that were hardcoded to the dark ground. They need to be tokens for the light theme to have anything to override. */ --on-accent: #0b0a10; /* Sits on the slider artwork, which is dark in every theme, so this one is intentionally absent from the light theme block below. Theming it would put a dark chevron on a dark slide and make it disappear. */ --on-artwork: #f7f3ec; --surface-veil: rgba(11, 10, 16, 0.75); --surface-veil-solid: rgba(11, 10, 16, 0.95); --surface-veil-mobile: rgba(11, 10, 16, 0.98); --hairline: rgba(247, 243, 236, 0.14); --dot-idle: rgba(247, 243, 236, 0.22); --dot-hover: rgba(247, 243, 236, 0.42); --focus-ring: rgba(247, 243, 236, 0.7); --shimmer: rgba(247, 243, 236, 0.15); --dot-grid: rgba(247, 243, 236, 0.09); --tier-silver: linear-gradient(135deg, #ffffff 0%, #dfe4ea 28%, #b6bcc6 58%, #8f97a4 100%); --tier-diamond: linear-gradient(135deg, #ffffff 0%, #cfefff 30%, #86d6f5 58%, #f2fdff 100%); /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-slow: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } /* --------------------------------------------------------------------------- Light theme Applied by [data-theme="light"] on . Dark stays the default: it is what :root above defines, so no attribute means dark and nothing can flash the wrong way on first paint. The palette is taken from the light promo cards, so a light page and a light promo look like the same brand. Note --accent-gold holds GREEN despite the name; the brand green (#86efac) is tuned for a dark ground and is close to illegible on cream, so it goes considerably darker here. --------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg-primary: #f4f1ea; --bg-secondary: #eae6db; --bg-tertiary: #ded9cb; --text-primary: #14121a; --text-secondary: #5d564b; --text-muted: #8a8175; --accent-gold: #1f9d55; --accent-orange: #137a40; --accent-purple: #0d7d72; --accent-green: #16a34a; --accent-danger: #b91c1c; --accent-champagne: #9a6f16; --accent-champagne-dark: #7a560f; --gradient-champagne: linear-gradient(135deg, var(--accent-champagne) 0%, var(--accent-champagne-dark) 100%); --gradient-neon: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-orange) 100%); --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.42) 100%); --glow-gold: 0 0 15px rgba(31, 157, 85, 0.22); --glow-champagne: 0 0 15px rgba(154, 111, 22, 0.22); --shadow-main: 0 8px 32px 0 rgba(20, 18, 26, 0.12); --border-subtle: 1px solid rgba(20, 18, 26, 0.14); --on-accent: #ffffff; --surface-veil: rgba(244, 241, 234, 0.78); --surface-veil-solid: rgba(244, 241, 234, 0.95); --surface-veil-mobile: rgba(244, 241, 234, 0.98); --hairline: rgba(20, 18, 26, 0.14); --dot-idle: rgba(20, 18, 26, 0.32); --dot-hover: rgba(20, 18, 26, 0.52); --focus-ring: rgba(20, 18, 26, 0.65); --shimmer: rgba(20, 18, 26, 0.12); --dot-grid: rgba(20, 18, 26, 0.07); /* The metal finishes need reversing: a white-to-grey silver disappears on cream, so it runs mid-to-dark instead. */ --tier-silver: linear-gradient(135deg, #9aa2ae 0%, #6f7783 40%, #454c57 100%); --tier-diamond: linear-gradient(135deg, #4bb6dd 0%, #1d84b5 45%, #0b5f86 100%); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Outfit', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border: 2px solid var(--bg-primary); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } /* Skip link: the first focusable element on every page, so a keyboard or screen-reader visitor can jump the eight-item nav instead of tabbing it on every page load. Kept off-screen rather than display:none, since a hidden element is not focusable and the link would never be reachable. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 2000; transform: translateY(-120%); padding: 0.85rem 1.4rem; /* Deliberately not themed off --accent-gold/--on-accent: in the light theme that pair is white on #1f9d55, which is 3.5:1 and fails AA for text this size. The dark ground below holds 13:1 against the accent green in both themes, and this element only ever appears over the page's own top-left corner, so it doesn't need to match the surrounding surface. */ background: #0b0a10; color: #86efac; font-weight: 700; border-bottom-right-radius: var(--border-radius); transition: transform var(--transition-fast, 0.2s); } .skip-link:focus { transform: translateY(0); outline: 2px solid #86efac; outline-offset: 2px; } /* The header is sticky, so an anchor jump would otherwise land with the first heading tucked underneath it. */ #main { scroll-margin-top: 6rem; } a { color: inherit; text-decoration: none; transition: var(--transition-fast); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } section { padding: 5rem 0; position: relative; } .section-tag { display: inline-block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold); margin-bottom: 1rem; } .section-title { font-size: 2.25rem; font-weight: 800; text-align: center; margin-bottom: 1.25rem; } .section-subtitle { text-align: center; color: var(--text-secondary); max-width: 640px; margin: 0 auto 3.5rem; font-size: 1.1rem; } /* Header & Navbar */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--surface-veil); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border-subtle); transition: var(--transition-normal); } header.scrolled { background: var(--surface-veil-solid); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .navbar { display: flex; justify-content: space-between; align-items: center; height: 80px; transition: var(--transition-normal); } .logo { font-size: 1.4rem; font-weight: 800; background: var(--gradient-neon); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.5px; } .nav-links { display: flex; margin-left: auto; align-items: center; gap: 1.5rem; flex-wrap: nowrap; } .nav-item a { font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); position: relative; padding: 0.5rem 0; white-space: nowrap; } .nav-item a:hover, .nav-item.active a { color: var(--text-primary); } .nav-item a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient-neon); transition: var(--transition-normal); } .nav-item a:hover::after, .nav-item.active a::after { width: 100%; } /* .nav-item a (class+element) outranks a plain .nav-cta class selector, so its padding: 0.5rem 0 was winning and squashing this button flat. Scoping to .nav-item a.nav-cta guarantees this rule wins instead. */ .nav-item a.nav-cta { display: inline-flex; align-items: center; background: var(--gradient-neon); color: var(--bg-primary) !important; padding: 0.85rem 2rem; line-height: 1; border-radius: 30px; font-weight: 700 !important; white-space: nowrap; flex-shrink: 0; } .nav-cta::after { display: none; } .hamburger { display: none; margin-left: 0.9rem; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; cursor: pointer; } .hamburger span { width: 100%; height: 2px; background-color: var(--text-primary); transition: var(--transition-fast); } /* Hero */ .hero { min-height: 90vh; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 120px; padding-bottom: 4rem; background: radial-gradient(circle at 20% 20%, rgba(134, 239, 172, 0.12) 0%, transparent 45%), radial-gradient(circle at 80% 60%, rgba(45, 212, 191, 0.12) 0%, transparent 45%), var(--bg-primary); } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto; } .hero-eyebrow { font-size: 1rem; color: var(--accent-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 1.5rem; } .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.12; margin-bottom: 1.5rem; letter-spacing: -1px; } .hero-title strong { background: var(--gradient-neon); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-tagline { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 620px; margin-left: auto; margin-right: auto; } .btn-group { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; font-size: 1rem; font-weight: 700; border-radius: 30px; cursor: pointer; transition: var(--transition-normal); border: none; outline: none; } .btn-primary { background: var(--gradient-neon); color: var(--on-accent); box-shadow: var(--glow-gold); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(134, 239, 172, 0.6); } .btn-secondary { background: transparent; color: var(--text-primary); border: 2px solid var(--accent-gold); } .btn-secondary:hover { background: rgba(134, 239, 172, 0.1); box-shadow: var(--glow-gold); transform: translateY(-2px); } .btn-whatsapp { background: #25d366; color: #06210f; } .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(37, 211, 102, 0.5); } /* Press feedback: a quick settle back toward the resting position gives the click somewhere to land, instead of the hover lift just vanishing. */ .btn:active { transform: translateY(0) scale(0.97); transition: transform 0.1s ease; } /* Floating contact speed-dial. Injected by initContactFab() in main.js rather than pasted into every page's markup, so it shows up on all ~50 static pages from one place. z-index sits below the header's (1000) so the mobile nav overlay still paints over it while the menu is open. Structure: .fab > .fab-menu (the two pills, hidden until opened) then .fab-toggle (the small + button, always visible, rotates into a close x). */ .fab { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .fab-action { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: 30px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); transition: opacity var(--transition-fast), transform var(--transition-fast); transition-delay: 0s; opacity: 0; transform: translateY(10px) scale(0.85); } .fab-action svg { width: 18px; height: 18px; flex-shrink: 0; } .fab-action-whatsapp { background: #25d366; color: #06210f; } /* Messenger's own blue - a logo colour, not a themeable accent, same reasoning as WhatsApp's green above. */ .fab-action-messenger { background: #0084ff; color: #ffffff; } /* Contact isn't a branded channel, so it takes a site accent rather than a logo colour - teal keeps it visually distinct from the other three pills. */ .fab-action-contact { background: var(--accent-purple); color: #06210f; } .fab-action-website { background: var(--gradient-neon); color: var(--on-accent); } .fab.open .fab-menu { pointer-events: auto; } .fab.open .fab-action { opacity: 1; transform: translateY(0) scale(1); } /* Staggered so the pills cascade open rather than popping in together; the one nearer the toggle (website) leads by a beat since it has less distance to travel. */ .fab.open .fab-action-website { transition-delay: 0.03s; } .fab.open .fab-action-contact { transition-delay: 0.06s; } .fab.open .fab-action-messenger { transition-delay: 0.09s; } .fab.open .fab-action-whatsapp { transition-delay: 0.12s; } .fab-toggle { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--gradient-neon); color: var(--on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--glow-gold); transition: var(--transition-normal); animation: fab-in 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s backwards; } .fab-toggle svg { width: 20px; height: 20px; transition: transform var(--transition-normal); } .fab.open .fab-toggle svg { transform: rotate(45deg); } .fab-toggle:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 25px rgba(134, 239, 172, 0.6); } .fab-toggle:active { transform: scale(0.92); transition: transform 0.1s ease; } @keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(0.7); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 480px) { .fab { right: 16px; bottom: 16px; } .fab-action { font-size: 0.82rem; padding: 0.5rem 0.9rem; } } /* Cookie consent banner. Injected by initCookieConsent() in main.js, same reason as the FAB above: one source instead of pasting it into every page. Sits above the FAB's z-index (900) since it can appear at the same time in the same corner-ish area on mobile. */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 950; max-width: 560px; margin: 0 auto; padding: 1.25rem 1.5rem; background: var(--gradient-card); backdrop-filter: blur(12px); border: var(--border-subtle); border-radius: var(--border-radius); box-shadow: var(--shadow-main); animation: fab-in 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s backwards; } .cookie-banner p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem; } .cookie-banner p a { color: var(--accent-gold); } .cookie-banner-actions { display: flex; gap: 0.75rem; justify-content: flex-end; } .cookie-banner-actions .btn { padding: 0.6rem 1.4rem; font-size: 0.9rem; } @media (max-width: 480px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 1.1rem; } .cookie-banner-actions { flex-direction: column-reverse; } .cookie-banner-actions .btn { width: 100%; } } /* Grids & Cards */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .glass-card { background: var(--gradient-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-subtle); border-radius: var(--border-radius); padding: 2.25rem; box-shadow: var(--shadow-main); transition: var(--transition-normal); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-neon); opacity: 0; transition: var(--transition-normal); } .glass-card:hover { transform: translateY(-5px); border-color: rgba(134, 239, 172, 0.3); box-shadow: 0 12px 40px rgba(134, 239, 172, 0.1); } .glass-card:hover::before { opacity: 1; } .styled-hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%); margin: 0; } /* Pricing Cards */ .pricing-card { display: flex; flex-direction: column; text-align: center; } .pricing-card.featured { border-color: rgba(134, 239, 172, 0.5); box-shadow: 0 0 30px rgba(134, 239, 172, 0.12); transform: scale(1.03); } .pricing-badge { display: inline-block; align-self: center; background: var(--gradient-champagne); color: #1a1206; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 0.3rem 0.9rem; border-radius: 20px; margin-bottom: 1rem; } .pricing-name { font-size: 1.4rem; margin-bottom: 0.5rem; } .pricing-price { font-size: 2.5rem; font-weight: 800; white-space: nowrap; color: var(--accent-gold); margin-bottom: 0.25rem; } /* The featured package price picks up the champagne gold of its "Most Popular" badge, per the palette note above: gold marks the money moments. Note that --accent-gold is green despite the name, so this must use --accent-champagne. */ .pricing-card.featured .pricing-price { color: var(--accent-champagne); } .pricing-note { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.75rem; } .pricing-features { text-align: left; margin-bottom: 2rem; flex-grow: 1; } /* Hanging indent rather than display:flex: flex would give any element child (e.g. the price in the terms page's package list) its own flex item separate from the surrounding text, so a narrow flex-wrap:nowrap row squeezed each item onto its own staggered column instead of letting the line wrap as one paragraph. This lets mixed text + inline elements wrap normally, indented under the checkmark. */ .pricing-features li { position: relative; padding-left: 1.35rem; margin-bottom: 0.85rem; color: var(--text-secondary); font-size: 0.98rem; } .pricing-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-gold); font-weight: 800; } .pricing-commission { border-top: var(--border-subtle); padding-top: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-muted); } .pricing-commission strong { color: var(--accent-champagne); } .commission-figure { color: var(--accent-champagne); } /* Steps */ .steps-list { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } /* Separate class (not combined with .steps-list) so its own column count doesn't out-specificity the responsive .steps-list media queries below. */ .steps-list-4 { grid-template-columns: repeat(4, 1fr); } .step-item { text-align: center; } .step-number { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient-neon); color: var(--bg-primary); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: var(--glow-gold); } .step-item h4 { font-size: 1.05rem; margin-bottom: 0.4rem; } .step-item p { color: var(--text-secondary); font-size: 0.9rem; } /* Tables */ .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: var(--border-subtle); } .data-table th { color: var(--accent-gold); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; } .data-table td { color: var(--text-secondary); } .data-table tr:last-child td { border-bottom: none; } /* FAQ Accordion (native
, smooth-animated by initFaqAccordions() in main.js - the height/open transition needs JS since
snaps instantly on its own; everything else here is plain CSS). */ .faq-item { border: var(--border-subtle); border-radius: var(--border-radius); background: var(--gradient-card); margin-bottom: 1rem; overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .faq-item:hover { border-color: rgba(134, 239, 172, 0.3); } .faq-item[open] { border-color: rgba(134, 239, 172, 0.35); box-shadow: var(--glow-gold); } .faq-item summary { cursor: pointer; padding: 1.25rem 1.5rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color var(--transition-fast); } .faq-item summary:hover { color: var(--accent-gold); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: var(--accent-gold); font-size: 1.5rem; font-weight: 400; line-height: 1; flex-shrink: 0; display: inline-block; transition: transform var(--transition-normal); } /* A "+" rotated 45deg reads as a close/"x" glyph, so the icon animates smoothly between states instead of snapping between two characters. */ .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { padding: 0 1.5rem 1.5rem; color: var(--text-secondary); } /* Copyable code/link snippet with an icon button (referral links, etc). */ .code-copy-block { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-primary); border-radius: 8px; padding: 0.85rem 0.85rem 0.85rem 1.25rem; } .code-copy-text { flex: 1; min-width: 0; font-family: monospace; color: var(--accent-gold); overflow-x: auto; white-space: nowrap; } .copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: var(--border-subtle); background: transparent; color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); } .copy-btn:hover { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(134, 239, 172, 0.1); } .copy-btn:active { transform: scale(0.92); } .copy-btn svg { width: 18px; height: 18px; } .copy-btn .icon-check { display: none; } .copy-btn.copied { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(134, 239, 172, 0.1); } .copy-btn.copied .icon-copy { display: none; } .copy-btn.copied .icon-check { display: block; } @media (max-width: 480px) { .code-copy-block { padding-left: 1rem; } } /* Forms */ .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 1rem 1.25rem; background: var(--bg-secondary); border: var(--border-subtle); border-radius: var(--border-radius); color: var(--text-primary); font-family: inherit; font-size: 1rem; outline: none; transition: var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-gold); box-shadow: var(--glow-gold); background: var(--bg-tertiary); } .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386efac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 18px; padding-right: 3rem; } .form-textarea { min-height: 130px; resize: vertical; } .form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; } /* Add-ons checklist on the Get Started form, and the order summary that totals it live - see initAddonCheckout() in main.js. */ .addon-list { display: flex; flex-direction: column; gap: 0.6rem; } .addon-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; background: var(--bg-secondary); border: var(--border-subtle); border-radius: var(--border-radius); cursor: pointer; transition: var(--transition-fast); } .addon-item:has(input:checked) { border-color: var(--accent-gold); background: var(--bg-tertiary); } .addon-item input[type="checkbox"] { accent-color: var(--accent-gold); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; } .addon-item-name { flex-grow: 1; color: var(--text-primary); font-size: 0.95rem; } .addon-item-price { color: var(--accent-champagne); font-weight: 700; font-size: 0.9rem; white-space: nowrap; } .order-summary-lines { display: flex; flex-direction: column; gap: 0.5rem; color: var(--text-secondary); font-size: 0.92rem; } .order-summary-line { display: flex; justify-content: space-between; gap: 1rem; } .order-summary-total { display: flex; justify-content: space-between; border-top: var(--border-subtle); margin-top: 0.85rem; padding-top: 0.85rem; font-weight: 700; color: var(--text-primary); } .form-success-msg { display: none; background: rgba(63, 185, 80, 0.1); border: 1px solid rgba(63, 185, 80, 0.25); color: var(--accent-green); border-radius: var(--border-radius); padding: 1.25rem; text-align: center; margin-bottom: 1.5rem; font-weight: 600; } /* Appended to the success message only once the lead has actually been recorded, so it reads as a follow-on reassurance rather than a headline. */ .form-success-note { font-weight: 400; opacity: 0.85; } /* Shown when a direct send fails. Same box as the success message so the two occupy identical space, in danger colours rather than green. */ .form-error-msg { display: none; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--accent-danger); border-radius: var(--border-radius); padding: 1.25rem; text-align: center; margin-bottom: 1.5rem; font-weight: 600; } /* Thank-you page confirmation mark. Decorative - the heading below it carries the actual message, so the SVG is aria-hidden. */ .thank-you-tick { width: 72px; height: 72px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(134, 239, 172, 0.12); border: 2px solid var(--accent-gold); color: var(--accent-gold); box-shadow: var(--glow-gold); } .thank-you-tick svg { width: 34px; height: 34px; } @media (prefers-reduced-motion: no-preference) { .thank-you-tick { animation: thank-you-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both; } } @keyframes thank-you-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* --------------------------------------------------------------------------- Split send button. The main half posts the form straight to the studio and the visitor stays on the page; the caret opens the two handoff routes (WhatsApp, email) that used to sit beside it as equals. Two real