/* ============================================================ bookvana.ai — Master Stylesheet Literary meets modern tech. Rich, warm, sophisticated. ============================================================ */ /* ── Google Font imports are in base.html ── */ /* ── CSS Custom Properties ── */ :root { --primary-color: #1a1f3a; /* Midnight Ink — deep navy */ --secondary-color: #c9a84c; /* Vana Gold */ --accent-color: #2a9d8f; /* Teal Muse */ --accent-dark: #1f7a6e; /* Darker teal for hover */ --primary-light: #2d3561; /* Lighter navy */ --primary-ultra: #f0f2f8; /* Nearly-white navy tint */ --bg-white: #ffffff; --bg-alt: #f3f5fa; /* HCWF alternating section bg */ --bg-dark: #0f1224; /* Very dark navy for hero */ --text-dark: #2d3748; --text-muted: #718096; --text-light: #a0aec0; --text-white: #ffffff; --border-light: #e2e8f0; --border-mid: #cbd5e0; --card-shadow: 0 4px 20px rgba(26,31,58,0.10); --card-shadow-hover: 0 8px 40px rgba(26,31,58,0.18); --hero-shadow: 0 20px 60px rgba(0,0,0,0.35); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --transition: 0.25s ease; --transition-slow: 0.4s ease; } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-dark); background: var(--bg-white); line-height: 1.7; font-size: 1rem; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--primary-color); } a { color: var(--accent-color); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-dark); } img { max-width: 100%; height: auto; } /* ── Utility Classes ── */ .text-gold { color: var(--secondary-color) !important; } .text-teal { color: var(--accent-color) !important; } .text-primary-bv { color: var(--primary-color) !important; } .text-muted-bv { color: var(--text-muted) !important; } .bg-primary-bv { background-color: var(--primary-color) !important; } .bg-accent-bv { background-color: var(--accent-color) !important; } .bg-alt { background-color: var(--bg-alt) !important; } .section-pad { padding: 80px 0; } .section-pad-sm { padding: 60px 0; } .section-label { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 0.75rem; } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; } .section-sub { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.8; } /* ── Divider ── */ .bv-divider { width: 60px; height: 4px; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color)); border-radius: 2px; margin: 1rem auto 0; } /* ============================================================ NAVBAR ============================================================ */ .bv-navbar { background: var(--primary-color); padding: 0.85rem 0; box-shadow: 0 2px 20px rgba(0,0,0,0.3); position: sticky; top: 0; z-index: 1000; } .bv-navbar .navbar-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-style: italic; color: #ffffff !important; letter-spacing: -0.02em; background: transparent !important; padding: 0; } .bv-navbar .navbar-brand img { background: transparent !important; height: auto; width: 200px; max-width: 200px; } .bv-footer img.bv-logo { background: transparent !important; height: auto; width: 200px; max-width: 200px; } .bv-navbar .navbar-brand .brand-ai { font-family: var(--font-body); font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--secondary-color); letter-spacing: 0.05em; vertical-align: super; } .bv-navbar .nav-link { color: rgba(255,255,255,0.85) !important; font-weight: 500; font-size: 0.92rem; padding: 0.4rem 0.9rem !important; border-radius: var(--radius-sm); transition: all var(--transition); } .bv-navbar .nav-link:hover, .bv-navbar .nav-link.active { color: #ffffff !important; background: rgba(255,255,255,0.1); } .bv-navbar .btn-nav-cta { background: var(--secondary-color); color: var(--primary-color) !important; font-weight: 700; padding: 0.4rem 1.1rem !important; border-radius: var(--radius-sm); font-size: 0.88rem; } .bv-navbar .btn-nav-cta:hover { background: #dbb84e; background: linear-gradient(135deg, #dbb84e, var(--secondary-color)); color: var(--primary-color) !important; } .bv-navbar .dropdown-menu { background: var(--primary-light); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); box-shadow: var(--card-shadow); min-width: 200px; margin-top: 0.5rem; } .bv-navbar .dropdown-item { color: rgba(255,255,255,0.85); font-size: 0.88rem; padding: 0.5rem 1rem; transition: all var(--transition); } .bv-navbar .dropdown-item:hover { background: rgba(255,255,255,0.1); color: #fff; } .bv-navbar .dropdown-divider { border-color: rgba(255,255,255,0.15); } .navbar-toggler { border-color: rgba(255,255,255,0.3); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Logo Book Icon */ .bv-logo-icon { width: 34px; height: 34px; flex-shrink: 0; } /* ============================================================ HERO SECTION ============================================================ */ .bv-hero { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--primary-color) 50%, #1d3a5e 100%); min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 80px 0; } .bv-hero::before { content: ''; position: absolute; top: -40%; right: -15%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%); pointer-events: none; } .bv-hero::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(42,157,143,0.12) 0%, transparent 70%); pointer-events: none; } .bv-hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(201,168,76,0.15); border: 1px solid rgba(201,168,76,0.35); color: var(--secondary-color); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 50px; margin-bottom: 1.5rem; } .bv-hero .hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; color: #ffffff; line-height: 1.15; margin-bottom: 1.25rem; } .bv-hero .hero-title .hero-accent { color: var(--secondary-color); font-style: italic; } .bv-hero .hero-sub { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,0.75); max-width: 560px; line-height: 1.8; margin-bottom: 2.5rem; } .bv-hero .hero-cta-group { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .bv-hero .hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); } .bv-hero .hero-stat-item .stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--secondary-color); } .bv-hero .hero-stat-item .stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-top: -2px; } /* Hero visual panel */ .bv-hero .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; } .hero-book-mockup { background: linear-gradient(145deg, #ffffff 0%, #f0f2f8 100%); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--hero-shadow); max-width: 340px; width: 100%; position: relative; z-index: 2; } .hero-book-mockup .mock-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; } .hero-book-mockup .mock-author { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem; } .mock-progress-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; } .mock-progress-item:last-child { border-bottom: none; } .mock-check { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; } .mock-check.done { background: var(--accent-color); color: white; } .mock-check.active { background: var(--secondary-color); color: var(--primary-color); } .mock-check.pending { background: var(--border-light); color: var(--text-muted); } .mock-download-btn { display: block; text-align: center; background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)); color: white; padding: 0.7rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem; margin-top: 1.25rem; cursor: pointer; transition: all var(--transition); } .mock-download-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(42,157,143,0.4); color: white; } /* Floating badges */ .hero-float-badge { position: absolute; background: white; border-radius: var(--radius-md); padding: 0.6rem 1rem; box-shadow: 0 8px 30px rgba(0,0,0,0.2); font-size: 0.78rem; font-weight: 600; color: var(--primary-color); display: flex; align-items: center; gap: 0.5rem; z-index: 3; } .hero-float-badge .badge-icon { font-size: 1rem; } .hero-float-badge.pos-tl { top: -20px; left: -30px; } .hero-float-badge.pos-br { bottom: -15px; right: -20px; } /* ============================================================ BUTTONS ============================================================ */ .btn-bv-primary { background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%); color: #ffffff; border: none; padding: 0.75rem 2rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; transition: all var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; text-decoration: none; } .btn-bv-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(42,157,143,0.45); color: #ffffff; } .btn-bv-secondary { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.5); padding: 0.75rem 2rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; transition: all var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .btn-bv-secondary:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); color: #ffffff; transform: translateY(-2px); } .btn-bv-gold { background: linear-gradient(135deg, var(--secondary-color), #dbb84e); color: var(--primary-color); border: none; padding: 0.75rem 2rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; transition: all var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer; } .btn-bv-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(201,168,76,0.45); color: var(--primary-color); } .btn-bv-outline { background: transparent; color: var(--accent-color); border: 2px solid var(--accent-color); padding: 0.7rem 1.8rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.93rem; transition: all var(--transition); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer; } .btn-bv-outline:hover { background: var(--accent-color); color: #ffffff; transform: translateY(-2px); } .btn-lg-bv { padding: 0.9rem 2.5rem; font-size: 1.05rem; } .btn-sm-bv { padding: 0.45rem 1.2rem; font-size: 0.84rem; } /* ============================================================ PRODUCT CARDS ============================================================ */ .product-card { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2.25rem 2rem; height: 100%; display: flex; flex-direction: column; transition: all var(--transition-slow); position: relative; overflow: hidden; } .product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); opacity: 0; transition: opacity var(--transition); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: transparent; } .product-card:hover::before { opacity: 1; } .product-card.featured { background: linear-gradient(145deg, var(--primary-color) 0%, var(--primary-light) 100%); border-color: transparent; color: white; } .product-card.featured h3, .product-card.featured p { color: rgba(255,255,255,0.9); } .product-card.featured h3 { color: white; } .product-card .card-icon-wrap { width: 64px; height: 64px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 1.5rem; background: var(--bg-alt); transition: all var(--transition); } .product-card:hover .card-icon-wrap { background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)); color: white; } .product-card.featured .card-icon-wrap { background: rgba(255,255,255,0.15); color: var(--secondary-color); } .product-card h3 { font-size: 1.35rem; margin-bottom: 0.75rem; color: var(--primary-color); } .product-card p { color: var(--text-muted); font-size: 0.92rem; flex-grow: 1; margin-bottom: 1.75rem; } .product-card .card-meta { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.5rem; } .product-card .card-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 1.5rem; } /* ============================================================ HOW IT WORKS ============================================================ */ .how-it-works-section { background: var(--bg-alt); } .step-card { text-align: center; padding: 2.5rem 1.5rem; position: relative; } .step-number { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: white; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; position: relative; z-index: 2; box-shadow: 0 4px 15px rgba(26,31,58,0.3); } .step-icon-ring { width: 90px; height: 90px; border-radius: 50%; background: white; border: 3px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 1.5rem; position: relative; box-shadow: 0 4px 20px rgba(26,31,58,0.1); transition: all var(--transition); } .step-card:hover .step-icon-ring { border-color: var(--accent-color); background: linear-gradient(135deg, rgba(42,157,143,0.08), rgba(42,157,143,0.02)); transform: scale(1.05); } .step-connector { position: absolute; top: 45px; right: -50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--border-light), var(--accent-color)); opacity: 0.4; z-index: 1; } .step-card h4 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--primary-color); } .step-card p { font-size: 0.9rem; color: var(--text-muted); max-width: 220px; margin: 0 auto; line-height: 1.7; } /* ============================================================ PRICING ============================================================ */ .pricing-card { background: var(--bg-white); border: 2px solid var(--border-light); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem; height: 100%; display: flex; flex-direction: column; transition: all var(--transition); position: relative; overflow: hidden; } .pricing-card:hover { border-color: var(--accent-color); box-shadow: var(--card-shadow-hover); transform: translateY(-4px); } .pricing-card.pricing-featured { border-color: var(--secondary-color); background: linear-gradient(145deg, var(--primary-color) 0%, var(--primary-light) 100%); color: white; transform: scale(1.04); } .pricing-card.pricing-featured:hover { transform: scale(1.06) translateY(-4px); } .pricing-badge { position: absolute; top: 0; right: 0; background: var(--secondary-color); color: var(--primary-color); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 1rem; border-radius: 0 var(--radius-lg) 0 var(--radius-md); } .pricing-card .price-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--primary-color); } .pricing-card.pricing-featured .price-amount { color: var(--secondary-color); } .pricing-card .price-currency { font-size: 1.4rem; vertical-align: top; line-height: 1.8; color: var(--text-muted); } .pricing-card.pricing-featured .price-currency { color: rgba(201,168,76,0.7); } .pricing-card .pricing-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.4rem; } .pricing-card.pricing-featured .pricing-name { color: white; } .pricing-card .pricing-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; } .pricing-card.pricing-featured .pricing-desc { color: rgba(255,255,255,0.65); } .pricing-features { list-style: none; padding: 0; margin: 0 0 2rem; flex-grow: 1; } .pricing-features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--text-dark); padding: 0.4rem 0; border-bottom: 1px solid var(--border-light); } .pricing-card.pricing-featured .pricing-features li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.12); } .pricing-features li:last-child { border-bottom: none; } .pricing-features li .feature-check { color: var(--accent-color); font-size: 1rem; flex-shrink: 0; } .pricing-card.pricing-featured .pricing-features li .feature-check { color: var(--secondary-color); } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials-section { background: var(--bg-alt); } .testimonial-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--card-shadow); height: 100%; display: flex; flex-direction: column; transition: all var(--transition); border: 1px solid transparent; } .testimonial-card:hover { border-color: var(--border-light); box-shadow: var(--card-shadow-hover); transform: translateY(-3px); } .testimonial-stars { color: var(--secondary-color); font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 1rem; } .testimonial-quote { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--text-dark); line-height: 1.75; flex-grow: 1; margin-bottom: 1.5rem; position: relative; } .testimonial-quote::before { content: '\201C'; font-size: 4rem; color: var(--accent-color); opacity: 0.2; position: absolute; top: -1rem; left: -0.5rem; font-family: var(--font-display); line-height: 1; } .testimonial-author { display: flex; align-items: center; gap: 0.75rem; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .testimonial-author-info .author-name { font-weight: 700; font-size: 0.9rem; color: var(--primary-color); } .testimonial-author-info .author-role { font-size: 0.78rem; color: var(--text-muted); } /* ============================================================ FAQ ============================================================ */ .faq-section { background: var(--bg-white); } .bv-accordion .accordion-item { border: 1px solid var(--border-light); border-radius: var(--radius-md) !important; margin-bottom: 0.75rem; overflow: hidden; } .bv-accordion .accordion-button { font-family: var(--font-body); font-weight: 600; font-size: 0.97rem; color: var(--primary-color); background: var(--bg-white); padding: 1.1rem 1.4rem; border-radius: var(--radius-md) !important; } .bv-accordion .accordion-button:not(.collapsed) { background: var(--primary-ultra); color: var(--primary-color); box-shadow: none; } .bv-accordion .accordion-button::after { filter: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1f3a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .bv-accordion .accordion-body { font-size: 0.92rem; color: var(--text-muted); line-height: 1.8; padding: 0 1.4rem 1.25rem; } /* ============================================================ CONTACT ============================================================ */ .contact-section { background: var(--bg-alt); } .contact-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--card-shadow); } .bv-form-group { margin-bottom: 1.25rem; } .bv-form-label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--primary-color); margin-bottom: 0.4rem; letter-spacing: 0.02em; } .bv-form-control { display: block; width: 100%; padding: 0.7rem 1rem; font-size: 0.93rem; font-family: var(--font-body); color: var(--text-dark); background: var(--bg-white); border: 1.5px solid var(--border-mid); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .bv-form-control:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(42,157,143,0.15); } .bv-form-control::placeholder { color: var(--text-light); } textarea.bv-form-control { resize: vertical; min-height: 130px; } /* ============================================================ FOOTER ============================================================ */ .bv-footer { background: var(--bg-dark); color: rgba(255,255,255,0.7); padding: 60px 0 0; } .bv-footer h5 { color: white; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; } .bv-footer .footer-brand-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-style: italic; color: white; margin-bottom: 0.75rem; } .bv-footer .footer-brand-text .brand-ai { color: var(--secondary-color); } .bv-footer p { font-size: 0.85rem; line-height: 1.8; margin-bottom: 1rem; } .bv-footer ul { list-style: none; padding: 0; margin: 0; } .bv-footer ul li { margin-bottom: 0.5rem; } .bv-footer ul li a { color: rgba(255,255,255,0.65); font-size: 0.87rem; text-decoration: none; transition: color var(--transition); display: flex; align-items: center; gap: 0.4rem; } .bv-footer ul li a:hover { color: var(--secondary-color); } .bv-footer ul li a::before { content: '›'; color: var(--accent-color); } .bv-footer .footer-divider { border-color: rgba(255,255,255,0.1); margin: 0; } .bv-footer .footer-bottom { background: rgba(0,0,0,0.2); padding: 1.25rem 0; margin-top: 3rem; } .bv-footer .footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: 0; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 50%; color: rgba(255,255,255,0.65); font-size: 0.9rem; transition: all var(--transition); margin-right: 0.5rem; text-decoration: none; } .footer-social a:hover { background: var(--accent-color); color: white; } /* ============================================================ UPLOAD / FORMAT PAGE ============================================================ */ .page-tool-header { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); padding: 48px 0 40px; color: white; } .page-tool-header h1 { color: white; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.5rem; } .page-tool-header p { color: rgba(255,255,255,0.72); font-size: 1rem; margin: 0; } /* Progress Steps */ .bv-steps { display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem; overflow-x: auto; padding-bottom: 4px; } .bv-step { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 120px; } .bv-step-circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border-mid); background: var(--bg-white); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; transition: all var(--transition); } .bv-step.active .bv-step-circle { background: var(--accent-color); border-color: var(--accent-color); color: white; box-shadow: 0 0 0 4px rgba(42,157,143,0.2); } .bv-step.done .bv-step-circle { background: var(--primary-color); border-color: var(--primary-color); color: white; } .bv-step-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .bv-step.active .bv-step-label { color: var(--accent-color); } .bv-step.done .bv-step-label { color: var(--primary-color); } .bv-step-line { flex: 1; height: 2px; background: var(--border-light); margin: 0 0.3rem; } .bv-step-line.done { background: var(--primary-color); } /* Upload Zone */ .upload-zone { border: 2px dashed var(--border-mid); border-radius: var(--radius-lg); padding: 3.5rem 2rem; text-align: center; background: var(--bg-alt); cursor: pointer; transition: all var(--transition); position: relative; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent-color); background: rgba(42,157,143,0.05); } .upload-zone .upload-icon { font-size: 3.5rem; color: var(--text-light); margin-bottom: 1rem; display: block; transition: color var(--transition); } .upload-zone:hover .upload-icon { color: var(--accent-color); } .upload-zone h4 { font-size: 1.1rem; color: var(--primary-color); margin-bottom: 0.5rem; } .upload-zone p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* Format Options Panel */ .options-panel { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--card-shadow); } .options-section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); } /* Trim size / option buttons */ .option-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .option-pill { padding: 0.4rem 0.85rem; border: 1.5px solid var(--border-mid); border-radius: 50px; font-size: 0.82rem; font-weight: 500; color: var(--text-dark); background: var(--bg-white); cursor: pointer; transition: all var(--transition); } .option-pill:hover { border-color: var(--accent-color); color: var(--accent-color); } .option-pill.selected { background: var(--accent-color); border-color: var(--accent-color); color: white; } /* Font pairs */ .font-pair-card { border: 1.5px solid var(--border-light); border-radius: var(--radius-md); padding: 1rem; cursor: pointer; transition: all var(--transition); text-align: center; } .font-pair-card:hover { border-color: var(--accent-color); } .font-pair-card.selected { border-color: var(--accent-color); background: rgba(42,157,143,0.06); } .font-pair-preview-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary-color); margin-bottom: 0.2rem; } .font-pair-preview-body { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-muted); } .font-pair-name { font-size: 0.7rem; font-weight: 700; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5rem; } /* Toggle Switch */ .bv-toggle { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--text-dark); cursor: pointer; user-select: none; } .bv-toggle input { display: none; } .bv-toggle-track { width: 44px; height: 24px; background: var(--border-mid); border-radius: 50px; position: relative; transition: background var(--transition); flex-shrink: 0; } .bv-toggle input:checked + .bv-toggle-track { background: var(--accent-color); } .bv-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .bv-toggle input:checked + .bv-toggle-track::after { transform: translateX(20px); } /* Download Panel */ .download-panel { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: var(--radius-lg); padding: 2rem; color: white; text-align: center; margin-top: 2rem; } .download-panel h4 { color: white; font-size: 1.3rem; margin-bottom: 0.5rem; } .download-panel p { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-bottom: 1.5rem; } .download-files { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; } .download-file-item { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); padding: 1rem; min-width: 120px; text-align: center; } .download-file-item .file-icon { font-size: 2rem; margin-bottom: 0.4rem; } .download-file-item .file-name { font-size: 0.8rem; color: rgba(255,255,255,0.85); font-weight: 600; } .download-file-item .file-size { font-size: 0.7rem; color: rgba(255,255,255,0.5); } /* ============================================================ COVER PAGE ============================================================ */ .color-palette-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .color-chip { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all var(--transition); } .color-chip:hover, .color-chip.selected { border-color: var(--accent-color); transform: scale(1.15); } /* AI Preview Grid */ .ai-preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .ai-preview-item { border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--border-light); cursor: pointer; transition: all var(--transition); position: relative; } .ai-preview-item:hover, .ai-preview-item.selected { border-color: var(--accent-color); box-shadow: 0 4px 20px rgba(42,157,143,0.25); } .ai-preview-item.selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; background: var(--accent-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; } .ai-preview-img-placeholder { width: 100%; padding-bottom: 150%; background: linear-gradient(145deg, #e8ecf4, #d0d6e8); position: relative; overflow: hidden; } .ai-preview-img-placeholder::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-muted); font-style: italic; } .ai-select-btn { display: block; text-align: center; padding: 0.5rem; background: var(--bg-alt); font-size: 0.8rem; font-weight: 600; color: var(--accent-color); border-top: 1px solid var(--border-light); transition: background var(--transition); } .ai-preview-item:hover .ai-select-btn, .ai-preview-item.selected .ai-select-btn { background: var(--accent-color); color: white; } /* ============================================================ EBOOK PAGE ============================================================ */ .device-preview-wrap { position: relative; display: flex; justify-content: center; padding: 2rem; } .device-kindle { width: 200px; background: #1a1a1a; border-radius: 18px; padding: 20px 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); position: relative; } .device-screen { background: #fff8f0; border-radius: 8px; padding: 20px 16px; min-height: 270px; font-size: 9px; line-height: 1.6; color: #2d3748; overflow: hidden; } .device-screen .screen-title { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #1a1f3a; margin-bottom: 2px; text-align: center; } .device-screen .screen-author { font-size: 8px; color: #718096; text-align: center; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; } .device-screen .screen-chapter { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; color: #1a1f3a; margin: 6px 0 3px; } .device-btn { width: 30px; height: 6px; background: #2d2d2d; border-radius: 3px; margin: 10px auto 0; } /* ============================================================ INFO STRIP / CTA BAND ============================================================ */ .cta-band { background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%); padding: 60px 0; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; top: -50%; left: -20%; width: 400px; height: 400px; background: rgba(255,255,255,0.05); border-radius: 50%; pointer-events: none; } .cta-band h2 { color: white; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.75rem; } .cta-band p { color: rgba(255,255,255,0.82); font-size: 1.05rem; margin-bottom: 2rem; } /* ============================================================ SECTION BACKGROUNDS (HCWF alternating) ============================================================ */ .section-white { background-color: var(--bg-white); } .section-alt { background-color: var(--bg-alt); } /* ============================================================ MISC ============================================================ */ .bv-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 50px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .bv-badge-teal { background: rgba(42,157,143,0.12); color: var(--accent-color); } .bv-badge-gold { background: rgba(201,168,76,0.15); color: #a07d22; } .bv-badge-navy { background: rgba(26,31,58,0.08); color: var(--primary-color); } .bv-icon-circle { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .alert-bv { border-radius: var(--radius-md); padding: 0.85rem 1.25rem; font-size: 0.88rem; border: none; display: flex; align-items: flex-start; gap: 0.6rem; } .alert-bv-info { background: rgba(42,157,143,0.1); color: var(--accent-dark); } .alert-bv-warn { background: rgba(201,168,76,0.12); color: #8a6c10; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .bv-hero { min-height: auto; padding: 60px 0; } .hero-visual { margin-top: 3rem; } .hero-float-badge { display: none; } .pricing-card.pricing-featured { transform: scale(1); } .step-connector { display: none; } .ai-preview-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .section-pad { padding: 56px 0; } .bv-hero .hero-stats { gap: 1.25rem; } .bv-steps { gap: 0.25rem; } .bv-step-label { display: none; } .ai-preview-grid { grid-template-columns: repeat(2, 1fr); } .download-files { flex-direction: column; align-items: center; } .contact-card { padding: 1.75rem; } .options-panel { padding: 1.5rem; } } @media (max-width: 575.98px) { .hero-cta-group { flex-direction: column; align-items: flex-start; } .bv-hero .hero-stats { flex-direction: column; gap: 0.75rem; } .ai-preview-grid { grid-template-columns: 1fr 1fr; } }