/* ========================================================================== Dark Premium / Glass — base stylesheet -------------------------------------------------------------------------- Three placeholders are filled in by build.js: CSS_VARIABLES → brand colors from config.colors (primary/secondary/accent…) DESIGN_VARIABLES → design preset tokens (fonts, radii, canvas, intensity) PRESET_CSS → preset-specific overrides, appended at the end The page shell is intentionally dark whatever config.colors.background says: brand colors drive accents, the preset drives the canvas. ========================================================================== */ /* Fallbacks — a niche that omits `secondary` or `accent` still renders. Overridden by the injected block below. */ :root { --primary-color: #8b5cf6; --primary-color-rgb: 139, 92, 246; --secondary-color: #6366f1; --secondary-color-rgb: 99, 102, 241; --accent-color: #ec4899; --accent-color-rgb: 236, 72, 153; } :root { --primary-color: #8b0000; --primary-color-rgb: 139, 0, 0; --secondary-color: #2d1b69; --secondary-color-rgb: 45, 27, 105; --background-color: #ffffff; --background-color-rgb: 255, 255, 255; --text-color: #1a1a1a; --text-color-rgb: 26, 26, 26; --accent-color: #b8002e; --accent-color-rgb: 184, 0, 46; --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --canvas: #04040c; --sidebar-bg: rgba(7, 7, 20, 0.74); --sidebar-bg-solid: #070714; --modal-bg: #0a0a18; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --btn-radius: 10px; --border-alpha: 0.12; --glow-strength: 0.80; --card-blur: 10px; --title-tracking: -0.04em; --eyebrow-tracking: 0.16em; --section-pad: 6.5rem; --card-pad: 1.9rem; --sidebar-width: 280px; /* Foreground */ --fg: #f5f4f8; --fg-muted: rgba(245, 244, 248, 0.66); --fg-dim: rgba(245, 244, 248, 0.44); /* Surfaces (translucent layers over the canvas) */ --surface: rgba(255, 255, 255, 0.035); --surface-2: rgba(255, 255, 255, 0.06); --surface-3: rgba(255, 255, 255, 0.09); --border: rgba(255, 255, 255, var(--border-alpha)); --border-hi: rgba(var(--primary-color-rgb), 0.45); /* Brand */ --grad: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); --grad-soft: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.16), rgba(var(--secondary-color-rgb), 0.16)); /* Elevation */ --ring: 0 0 0 1px var(--border); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -30px rgba(0, 0, 0, 0.95); --shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px -25px rgba(0, 0, 0, 1); --shadow-glow: 0 18px 50px -16px rgba(var(--primary-color-rgb), var(--glow-strength)); --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--canvas); scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; /* `clip` removes the horizontal scroll container entirely, so there is no rubber-band overscroll on iOS — `hidden` only hides the scrollbar. */ overflow-x: clip; } body { position: relative; font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--fg); background: transparent; /* hidden first as the Safari < 16 fallback (it propagates to the viewport); clip wins where supported and, unlike hidden, does not turn body into a scroll container once stops propagating. */ overflow-x: hidden; overflow-x: clip; /* 17 languages, some with very long compounds — never let a single word push the layout wider than the screen. */ overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Ambience layer — fixed behind the content, overridden per preset */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70rem 40rem at 78% -8%, rgba(var(--primary-color-rgb), 0.20), transparent 60%), radial-gradient(55rem 38rem at 4% 14%, rgba(var(--secondary-color-rgb), 0.16), transparent 62%), radial-gradient(48rem 32rem at 60% 108%, rgba(var(--accent-color-rgb), 0.12), transparent 65%); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: var(--title-tracking); } img { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: rgba(var(--primary-color-rgb), 0.35); color: #fff; } :focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; } /* Scrollbars — pointer devices only, and only on the two elements that actually scroll. On touch devices the scrollbar is an overlay that costs no layout space, but declaring a ::-webkit-scrollbar width switches it to a classic one that reserves a real 10px column: a dark gutter down the right edge with the whole page shifted left. Never style scrollbars globally. */ @media (pointer: fine) { html, .sidebar { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-color-rgb), 0.45) transparent; } html::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: rgba(var(--primary-color-rgb), 0.35); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } html::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-color-rgb), 0.6); background-clip: content-box; } } .container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; } /* -------------------------------------------------------------------------- Sidebar -------------------------------------------------------------------------- */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; z-index: 1000; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--border); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(140%); backdrop-filter: blur(var(--card-blur)) saturate(140%); } /* Brand hairline down the sidebar edge */ .sidebar::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(var(--primary-color-rgb), 0.5), transparent); } .sidebar-content { padding: 2.25rem 1.25rem 1.75rem; min-height: 100%; display: flex; flex-direction: column; } .logo h2 { color: var(--fg); font-size: 1.4rem; font-weight: 700; margin-bottom: 2.5rem; text-align: center; letter-spacing: -0.02em; } .logo h2::after { content: ''; display: block; width: 34px; height: 3px; margin: 0.85rem auto 0; border-radius: 999px; background: var(--grad); } .nav-menu { list-style: none; flex-grow: 1; } .nav-menu li { margin-bottom: 0.25rem; } .nav-link { position: relative; display: block; color: var(--fg-muted); text-decoration: none; padding: 0.8rem 1rem 0.8rem 1.15rem; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 500; transition: color var(--transition), background-color var(--transition); } /* Active indicator bar (replaces the old translateX jump) */ .nav-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 999px; background: var(--grad); transform: translateY(-50%); transition: height var(--transition); } .nav-link:hover { color: var(--fg); background: var(--surface-2); } .nav-link.active { color: var(--fg); background: var(--grad-soft); box-shadow: var(--ring); } .nav-link.active::before { height: 55%; } /* Language switcher */ .language-switcher { margin: 1.75rem 0; } .lang-select { width: 100%; padding: 0.8rem 2.6rem 0.8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background-color: var(--surface-2); color: var(--fg); font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; outline: none; transition: var(--transition); -webkit-appearance: none; -moz-appearance: none; 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='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1.05rem; } .lang-select:hover, .lang-select:focus { background-color: var(--surface-3); border-color: var(--border-hi); } .lang-select option { background: #14121c; color: #f5f4f8; } .sidebar-footer { margin-top: auto; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .cta-button, .btn-primary, .btn-secondary, .btn-outline, .btn-cta { font-family: inherit; font-size: 0.98rem; font-weight: 600; line-height: 1; text-decoration: none; text-align: center; cursor: pointer; border: 1px solid transparent; border-radius: var(--btn-radius); transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); } /* Gradient buttons share a sheen sweep on hover */ .cta-button, .btn-primary, .btn-cta { position: relative; overflow: hidden; background: var(--grad); color: #fff; box-shadow: var(--shadow-glow); } .cta-button::after, .btn-primary::after, .btn-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 620ms ease; } .cta-button:hover::after, .btn-primary:hover::after, .btn-cta:hover::after { transform: translateX(120%); } .cta-button:hover, .btn-primary:hover, .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -18px rgba(var(--primary-color-rgb), calc(var(--glow-strength) + 0.2)); } .cta-button:active, .btn-primary:active, .btn-cta:active { transform: translateY(0); } .cta-button { display: block; width: 100%; padding: 0.95rem 1rem; } .btn-primary, .btn-secondary, .btn-outline { display: inline-block; padding: 1rem 2rem; } .btn-secondary { background: var(--surface-2); color: var(--fg); border-color: var(--border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-hi); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--fg); border-color: var(--border); } .btn-outline:hover { border-color: var(--border-hi); background: var(--surface-2); transform: translateY(-2px); } .btn-cta { display: block; width: 100%; padding: 0.8rem 1.25rem; font-size: 0.92rem; } /* -------------------------------------------------------------------------- Main content & hero -------------------------------------------------------------------------- */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; } .hero { min-height: 100vh; display: flex; align-items: center; padding: 7rem 0; position: relative; overflow: hidden; } .hero-content { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 2rem; width: 100%; min-width: 0; /* flex item of .hero — must be allowed to shrink past min-content */ } /* Grid items default to min-width:auto, so a long headline word would widen the column instead of wrapping. */ .hero-text, .hero-image { min-width: 0; } .hero-title { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: 1.4rem; background: linear-gradient(120deg, var(--fg) 18%, var(--primary-color) 58%, var(--secondary-color) 92%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--primary-color); /* fallback if background-clip is unsupported */ } .hero-subtitle { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--fg-muted); margin-bottom: 2.5rem; max-width: 34rem; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Avatar */ .hero-image { display: flex; justify-content: center; align-items: center; } .ai-avatar { position: relative; width: min(460px, 100%); aspect-ratio: 1; } .avatar-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.55), transparent 68%); filter: blur(18px); opacity: 0.55; animation: pulse 5s ease-in-out infinite; } .avatar-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grad); padding: 3px; box-shadow: 0 30px 80px -25px rgba(var(--primary-color-rgb), 0.75); animation: float 7s ease-in-out infinite; } /* Rotating conic ring around the avatar */ .avatar-circle::before { content: ''; position: absolute; inset: -35%; background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--primary-color-rgb), 0.9) 70deg, transparent 150deg, transparent 210deg, rgba(var(--secondary-color-rgb), 0.9) 280deg, transparent 360deg); animation: spin-slow 9s linear infinite; } .avatar-logo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--canvas); } @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.45; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; } } @keyframes float { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-14px); } } @keyframes spin-slow { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ section { padding: var(--section-pad) 0; position: relative; } .section-title { font-size: clamp(1.85rem, 3.2vw, 2.7rem); text-align: center; margin-bottom: 3.25rem; color: var(--fg); } .section-title::after { content: ''; display: block; width: 56px; height: 3px; margin: 1.1rem auto 0; border-radius: 999px; background: var(--grad); } /* Shared glass card surface */ .girlfriend-card, .feature-card, .pricing-card, .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur)); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } /* -------------------------------------------------------------------------- Characters -------------------------------------------------------------------------- */ .girlfriends-preview { background: linear-gradient(180deg, transparent, rgba(var(--primary-color-rgb), 0.045), transparent); } .girlfriends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; max-width: 1060px; margin: 0 auto; } .girlfriend-card { overflow: hidden; text-align: left; } .girlfriend-card:hover { transform: translateY(-6px); border-color: var(--border-hi); box-shadow: var(--shadow-lift), 0 0 45px -18px rgba(var(--primary-color-rgb), 0.7); } .girlfriend-image { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--grad-soft); } .girlfriend-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .girlfriend-card:hover .girlfriend-image img { transform: scale(1.06); } /* Scrim so the info block melts into the photo */ .girlfriend-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 5, 12, 0.55) 78%, rgba(6, 5, 12, 0.9) 100%); pointer-events: none; } /* "Online" dot, pure CSS, no markup change */ .girlfriend-image::before { content: ''; position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22), 0 0 12px rgba(52, 211, 153, 0.9); animation: blink 2.6s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .girlfriend-info { position: relative; z-index: 1; padding: 1.4rem 1.4rem 1.6rem; } .girlfriend-info h3 { font-size: 1.3rem; font-weight: 600; color: var(--fg); margin-bottom: 0.6rem; } .girlfriend-age { display: inline-block; margin-bottom: 0.9rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(var(--primary-color-rgb), 0.16); border: 1px solid rgba(var(--primary-color-rgb), 0.3); color: var(--fg); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .girlfriend-desc { color: var(--fg-muted); font-size: 0.93rem; line-height: 1.6; margin-bottom: 1.4rem; } /* -------------------------------------------------------------------------- Features -------------------------------------------------------------------------- */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.75rem; } .feature-card { padding: var(--card-pad); text-align: left; position: relative; overflow: hidden; } /* Top highlight line */ .feature-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.8), transparent); opacity: 0; transition: opacity var(--transition); } .feature-card:hover { transform: translateY(-6px); border-color: var(--border-hi); box-shadow: var(--shadow-lift); } .feature-card:hover::before { opacity: 1; } .feature-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 1.4rem; font-size: 1.75rem; line-height: 1; border-radius: var(--radius-sm); background: var(--grad-soft); border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .feature-card h3 { font-size: 1.28rem; font-weight: 600; margin-bottom: 0.7rem; color: var(--fg); } .feature-card p { color: var(--fg-muted); font-size: 0.96rem; } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.75rem; max-width: 840px; margin: 0 auto; align-items: start; } .pricing-card { padding: 2.5rem 2rem; text-align: center; position: relative; } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .pricing-card.featured { border-color: var(--border-hi); background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.10), var(--surface) 55%); box-shadow: var(--shadow-card), 0 0 60px -22px rgba(var(--primary-color-rgb), 0.85); } /* Language-neutral "popular" marker (the old hardcoded English "Popular" stayed untranslated across all 17 locales) */ .pricing-card.featured::before { content: '\2605'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 0.95rem; line-height: 1; box-shadow: 0 10px 26px -8px rgba(var(--primary-color-rgb), 0.9); } .pricing-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); margin-bottom: 1.1rem; } .price { font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1.75rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--primary-color); } .features-list { list-style: none; margin-bottom: 2rem; text-align: left; } .features-list li { position: relative; padding: 0.55rem 0 0.55rem 1.85rem; color: var(--fg-muted); font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .features-list li:last-child { border-bottom: none; } .features-list li::before { content: '\2713'; position: absolute; left: 0; top: 0.6rem; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--accent-color-rgb), 0.18); color: var(--accent-color); font-size: 0.7rem; font-weight: 700; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq { background: linear-gradient(180deg, transparent, rgba(var(--secondary-color-rgb), 0.05), transparent); } .faq-list { max-width: 820px; margin: 0 auto; } .faq-item { margin-bottom: 0.85rem; overflow: hidden; } .faq-item:hover { border-color: rgba(255, 255, 255, 0.16); } .faq-item.active { border-color: var(--border-hi); background: var(--surface-2); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.3rem 1.6rem; background: transparent; border: none; cursor: pointer; transition: background-color var(--transition); } .faq-question:hover { background: rgba(255, 255, 255, 0.03); } .faq-question h3 { flex-grow: 1; min-width: 0; text-align: left; font-size: 1.02rem; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--fg); } .faq-toggle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--primary-color); font-size: 1.1rem; font-weight: 700; line-height: 1; transition: var(--transition); } .faq-item.active .faq-toggle { background: var(--grad); border-color: transparent; color: #fff; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1); } .faq-answer p { padding: 0 1.6rem 1.4rem; color: var(--fg-muted); font-size: 0.96rem; } .faq-item.active .faq-answer p { border-top: 1px solid var(--border); padding-top: 1.1rem; } /* -------------------------------------------------------------------------- Mobile chrome -------------------------------------------------------------------------- */ .mobile-menu-toggle { display: none; position: fixed; top: 0.9rem; left: 1rem; z-index: 1003; width: 46px; height: 46px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: var(--transition); } .mobile-menu-toggle:hover { border-color: var(--border-hi); } .mobile-menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--fg); transition: transform var(--transition), opacity var(--transition); } .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: 66px; z-index: 1001; align-items: center; justify-content: center; padding: 0 76px; background: var(--sidebar-bg); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(var(--card-blur)) saturate(140%); backdrop-filter: blur(var(--card-blur)) saturate(140%); } .mobile-logo h2 { font-size: 1.15rem; font-weight: 700; margin: 0; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--primary-color); } .mobile-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(4, 3, 8, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 300ms ease; pointer-events: none; } .mobile-overlay.active { opacity: 1; pointer-events: auto; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { margin-left: var(--sidebar-width); padding: 2.5rem 0; text-align: center; color: var(--fg-dim); font-size: 0.9rem; background: rgba(255, 255, 255, 0.02); border-top: 1px solid var(--border); } .footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.5rem; margin-top: 1rem; } .footer-links a { color: var(--fg-muted); text-decoration: none; font-size: 0.86rem; transition: color var(--transition); } .footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--primary-color); } /* -------------------------------------------------------------------------- Standalone pages (privacy / terms / contact) These have no sidebar, so the sidebar offset applied to .footer must go. -------------------------------------------------------------------------- */ .static-page { display: flex; flex-direction: column; min-height: 100vh; } .static-page .footer { margin-left: 0; margin-top: auto; } .page-topbar { padding: 1.25rem 0; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); } .page-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .page-brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--title-tracking); text-decoration: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary-color); } .page-back { color: var(--fg-muted); text-decoration: none; font-size: 0.9rem; transition: color var(--transition); } .page-back:hover { color: var(--primary-color); } .page-main { padding: 4.5rem 0 6rem; } .page-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: var(--title-tracking); color: var(--fg); } .page-body { max-width: 780px; color: var(--fg-muted); line-height: 1.75; } .page-body h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: var(--title-tracking); color: var(--fg); margin: 2.75rem 0 0.85rem; } .page-body p { margin-bottom: 1.1rem; } .page-body strong { color: var(--fg); font-weight: 600; } .page-body a { color: var(--primary-color); text-decoration: none; } .page-body a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- RTL (ar, he) — the sidebar has to live on the right -------------------------------------------------------------------------- */ [dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); } [dir="rtl"] .sidebar::after { right: auto; left: 0; } [dir="rtl"] .nav-link { padding: 0.8rem 1.15rem 0.8rem 1rem; } [dir="rtl"] .nav-link::before { left: auto; right: 0; } [dir="rtl"] .main-content, [dir="rtl"] .footer { margin-left: 0; margin-right: var(--sidebar-width); } [dir="rtl"] .mobile-menu-toggle { left: auto; right: 1rem; } [dir="rtl"] .sidebar { transform: translateX(0); } [dir="rtl"] .features-list li { padding: 0.55rem 1.85rem 0.55rem 0; text-align: right; } [dir="rtl"] .features-list li::before { left: auto; right: 0; } [dir="rtl"] .girlfriend-card, [dir="rtl"] .feature-card, [dir="rtl"] .faq-question h3 { text-align: right; } [dir="rtl"] .girlfriend-image::before { right: auto; left: 0.9rem; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; text-align: center; gap: 3rem; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .ai-avatar { width: min(360px, 80vw); } .girlfriends-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --section-pad: 4rem; } .mobile-menu-toggle, .mobile-header { display: flex; } .mobile-overlay { display: block; } .sidebar { transform: translateX(-100%); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; background: var(--sidebar-bg-solid); } .sidebar.open { transform: translateX(0); } [dir="rtl"] .sidebar { transform: translateX(100%); } [dir="rtl"] .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; padding-top: 66px; } [dir="rtl"] .main-content, [dir="rtl"] .footer { margin-right: 0; } .hero { min-height: auto; padding: 4rem 0 5rem; } /* All three grids must drop to a single column — an auto-fit minmax() track keeps its minimum and overflows once the viewport is narrower than that minimum plus the container padding. */ .features-grid, .girlfriends-grid, .pricing-grid { grid-template-columns: 1fr; gap: 1.5rem; } .girlfriend-card { max-width: 420px; margin: 0 auto; } .nav-link { padding: 1rem 1.15rem; font-size: 1.05rem; } .faq-question { padding: 1.1rem 1.2rem; } .faq-question h3 { font-size: 0.98rem; } .faq-answer p { padding: 0 1.2rem 1.2rem; } .footer { margin-left: 0; } } @media (max-width: 480px) { .container, .hero-content { padding: 0 1.15rem; } .btn-primary, .btn-secondary { width: 100%; } .feature-card, .pricing-card { padding: 1.75rem 1.35rem; } } /* -------------------------------------------------------------------------- Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== Preset overrides ========================================================================== */ body::before { background: radial-gradient(52rem 32rem at 50% -12%, rgba(var(--primary-color-rgb), 0.30), transparent 60%), radial-gradient(42rem 28rem at 92% 58%, rgba(var(--secondary-color-rgb), 0.22), transparent 62%), linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 58px, linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 58px 100%; -webkit-mask-image: radial-gradient(circle at 50% 18%, #000 18%, transparent 80%); mask-image: radial-gradient(circle at 50% 18%, #000 18%, transparent 80%); } .section-title::after { width: 84px; box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.95); } .feature-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 26px -8px rgba(var(--primary-color-rgb), 0.9); } .girlfriend-card:hover, .feature-card:hover { box-shadow: var(--shadow-lift), 0 0 0 1px rgba(var(--primary-color-rgb), 0.5), 0 0 55px -14px rgba(var(--primary-color-rgb), 0.9); }