/* Homepage Styles - Import common styles */ @import url('./common.css?v=15'); /* Theme: Red (primary/secondary colors defined in core.css) */ html[data-theme="red"] { --text-secondary: #000000; --success-color: #DB4033; --error-color: #DB4033; --warning-color: #DB4033; --theme-bg: transparent; --theme-accent: #DB4033; --theme-text: #000000; } /* Theme: Blue (primary/secondary colors defined in core.css) */ html[data-theme="blue"] { --text-secondary: #000000; --success-color: #413F8D; --error-color: #413F8D; --warning-color: #413F8D; --theme-bg: transparent; --theme-accent: #413F8D; --theme-text: #000000; } /* NOTE: do NOT give its own background here. The animated mesh canvas (#meshBg, z-index:-3) is only visible because, with a transparent , the gradient PROPAGATES to the viewport (painted behind the canvas) and the body's own box stays transparent. Painting a background on breaks that propagation — the body then paints its gradient over the canvas and the animation disappears. Overscroll is handled by overscroll-behavior:none (common.css) instead of an background. */ body { font-family: var(--font-family); /* Fallback gradient shown if JS/canvas is unavailable (mirrors the mesh: blue top → yellow middle → red bottom). */ background: linear-gradient(180deg, #2b39a2 0%, #4350ab 30%, #eac233 50%, #e8932f 72%, #d2342a 100%); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; } /* Animated mesh-gradient background — generated entirely by /js/MeshGradient.js (no images). The canvas is drawn at a low internal resolution and stretched to the viewport, so the browser's upscaling acts as a soft blur; brand-coloured radial blobs drift slowly over a vertical base gradient. The CSS fallback gradient on covers the no-JS / pre-paint case. */ #meshBg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; pointer-events: none; } /* Container. NOTE: keep normal top-down flow (no vertical centering) — the logo card is designed to sit flush against the top of the page (its ::before extends upward to merge with the top edge), so centering it detaches it. Fitting without scroll is achieved by the compact spacing below, not by centering. Top padding is 0 so the logo touches the top. */ .container { flex: 1 0 auto; max-width: 1400px; margin: 0 auto; padding: 0 60px 12px; width: 100%; position: relative; transition: padding 0.3s ease; } /* Header */ .header { text-align: left; margin: 0 0 60px; position: relative; padding: 14px 40px; background: transparent; transition: all 0.3s ease; } .header-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .header-text { flex: 1; transition: opacity 0.3s ease, transform 0.3s ease; text-align: center; display: flex; flex-direction: column; align-items: center; } .logo-container { background: #ffffff; padding: 30px; border-radius: 0 0 16px 16px; display: inline-block; position: relative; box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.08), 4px 0 8px 0 rgba(0, 0, 0, 0.08), 0 6px 8px 0 rgba(0, 0, 0, 0.08), 0 12px 24px -8px rgba(0, 0, 0, 0.35); clip-path: inset(-100px -100px -50px -100px); } .logo-container::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 100%; height: 100px; background: #ffffff; border-radius: 0; } .search-type-selector { transition: opacity 0.3s ease, transform 0.3s ease; } .logo { font-size: 3.2rem; font-weight: 700; color: #2C2C2C; letter-spacing: -1px; margin-bottom: 8px; position: relative; display: block; font-family: var(--font-family); } .logo-image { height: 58.5px; width: auto; display: block; margin: 0 auto; } /* Removed logo underline */ .subtitle { font-size: 0.75rem; font-weight: 500; margin-top: 8px; letter-spacing: 0.5px; line-height: 1.6; text-align: center; } .subtitle-tagline { color: #413F8D; font-size: 0.75rem; font-weight: 500; } .theme-dropdown { position: absolute; bottom: calc(100% + 10px); /* Changed from top to bottom - dropdown appears above button */ right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 16px; padding: 12px; min-width: 220px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.8); opacity: 0; visibility: hidden; transform: translateY(10px); /* Changed direction - animates upward */ transition: var(--transition); z-index: 10001; } .theme-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .theme-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: transparent; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: var(--transition); margin-bottom: 6px; } .theme-option:last-child { margin-bottom: 0; } .theme-option:hover { background: color-mix(in srgb, var(--theme-accent) 10%, transparent); border-color: color-mix(in srgb, var(--theme-accent) 20%, transparent); } .theme-option.active { background: color-mix(in srgb, var(--theme-accent) 15%, transparent); border-color: var(--theme-accent); } .theme-preview { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .red-preview { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #DB4033 50%, #DB4033 100%); } .blue-preview { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #413F8D 50%, #413F8D 100%); } .theme-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); } /* Search Type Selector */ .search-type-selector { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; } .type-btn { display: flex; align-items: center; gap: 10px; padding: 14px 28px; border: 2px solid transparent; background: #ffffff; backdrop-filter: blur(8px); border-radius: 28px; cursor: pointer; font-size: 1rem; font-weight: 600; color: #000000; transition: var(--transition); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .type-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .type-btn.active { background: var(--primary-color); border-color: transparent; color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .type-btn .icon { width: 22px; height: 22px; stroke-width: 2.5; } /* Search Container */ .search-container { max-width: 900px; margin: 48px auto 0; transition: all 0.3s ease; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .search-box { position: relative; display: flex; width: 49rem; max-width: 100%; padding: var(--spacing-15, 0.75rem) var(--spacing-15, 0.75rem) var(--spacing-15, 0.75rem) var(--spacing-3, 1.5rem); justify-content: space-between; align-items: center; border-radius: var(--Radius-XL, 2rem); border: 1px solid #FFF; background: var(--surface-primary, #FFF); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transition: var(--transition); z-index: 1; } .search-box:hover { box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-accent) 20%, transparent); border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent); background: rgba(255, 255, 255, 0.85); } .search-box:focus-within { box-shadow: 0 16px 40px color-mix(in srgb, var(--theme-accent) 25%, transparent); border-color: var(--theme-accent); background: rgba(255, 255, 255, 0.9); } .search-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .search-submit-btn { display: flex; min-height: 2.625rem; padding: var(--spacing-15, 0.75rem) var(--spacing-2, 1rem); justify-content: center; align-items: center; gap: var(--spacing-1, 0.5rem); border-radius: var(--Radius-XL, 2rem); background: var(--button-primary-fill-default, #FF4D00); border: none; color: white; font-family: var(--font-family); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; flex-shrink: 0; } .search-submit-btn:hover { background: var(--primary-hover); } .search-input { flex: 1; border: none; outline: none; padding: 10px 16px; font-family: var(--typography-font-family-title, "Bricolage Grotesque"); font-size: var(--typography-size-md, 1.375rem); color: var(--text-body, #2D3649); background: transparent; font-weight: 500; resize: none; overflow: hidden; line-height: 1.4; min-height: 20px; max-height: 100px; } .search-input::placeholder { color: var(--text-dark, #768094); text-align: left; font-family: var(--typography-font-family-title, "Bricolage Grotesque"); font-size: var(--typography-size-md, 1.375rem); font-style: normal; font-weight: 400; line-height: inherit; } .clear-btn { background: none; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; color: var(--secondary-color); transition: var(--transition); } .clear-btn:hover { color: var(--text-primary); } .clear-btn svg { width: 20px; height: 20px; stroke-width: 2; } .btn { padding: 14px 32px; border: none; border-radius: 24px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition); outline: none; box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent) 20%, transparent); } .btn-primary { background: var(--primary-color); color: white; border: 2px solid transparent; } .btn-primary:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transform: translateY(-2px); background: var(--primary-hover); } /* Search Buttons Container */ .search-buttons { display: flex; justify-content: center; align-items: center; width: 100%; } /* Search button outside box - desktop */ .search-btn-external { margin-top: 16px; padding: 14px 48px; font-size: 1rem; } /* Apply page load animations */ .header { opacity: 0; animation: slideDown 0.6s ease 0.1s forwards; } .search-type-selector { opacity: 0; animation: fadeIn 0.6s ease 0.3s forwards; } .search-container { opacity: 0; animation: scaleIn 0.6s ease 0.4s forwards; } /* Hide gradients and apply static background when results are shown */ body:has(#resultsContainer:not([style*="display: none"])) { background: #E4E7ED !important; } body:has(#resultsContainer:not([style*="display: none"]))::before, body:has(#resultsContainer:not([style*="display: none"]))::after { display: none !important; } html:has(#resultsContainer:not([style*="display: none"]))::before { display: none !important; } /* ===== BETA BANNER ===== */ .beta-banner { display: none; position: relative; max-width: 800px; margin: 20px auto; padding: 16px 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 8%, transparent), color-mix(in srgb, var(--theme-accent) 4%, transparent)); border: 2px solid color-mix(in srgb, var(--theme-accent) 25%, transparent); border-radius: 12px; text-align: center; animation: fadeInDown 0.5s ease; box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent) 12%, transparent); } .beta-banner.show { display: flex; align-items: center; justify-content: center; gap: 12px; } .beta-banner.fade-out { animation: fadeOutUp 0.8s ease forwards; } .beta-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; background: var(--theme-accent); color: white; font-weight: 700; font-size: 0.9rem; border-radius: 6px; letter-spacing: 1px; box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-accent) 35%, transparent); } .beta-text { font-size: 0.95rem; color: var(--theme-accent); font-weight: 600; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOutUp { from { opacity: 1; transform: translateY(0); max-height: 100px; margin: 20px auto; padding: 16px 24px; } to { opacity: 0; transform: translateY(-20px); max-height: 0; margin: 0 auto; padding: 0 24px; } } /* Mobile Search Button - Hidden on Desktop */ .search-buttons-mobile { display: none; width: 100%; justify-content: center; margin-top: 16px; } .search-submit-btn-mobile { display: flex; min-height: 2.625rem; padding: 12px 32px; justify-content: center; align-items: center; border-radius: 2rem; background: var(--button-primary-fill-default, #FF4D00); border: none; color: white; font-family: var(--font-family); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.3s ease; box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-accent) 20%, transparent); } .search-submit-btn-mobile:hover { background: var(--primary-hover); box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-accent) 30%, transparent); transform: translateY(-2px); } /* Mobile responsive */ @media (max-width: 640px) { .beta-banner { margin: 12px; padding: 12px 16px; } .beta-badge { padding: 4px 8px; font-size: 0.8rem; } .beta-text { font-size: 0.85rem; } /* Hide search icon on mobile for more space */ .search-icon { display: none; } /* Hide search button on mobile - use Enter key instead */ .search-submit-btn { display: none; } /* Show mobile search button */ .search-buttons-mobile { display: flex; } .search-container { margin: 40px auto 0; } .search-box { padding: 0; } /* Fix mobile textarea vertical alignment */ .search-input { padding: 12px 16px; line-height: 1.4; font-family: var(--typography-font-family-title, "Bricolage Grotesque"); font-size: var(--typography-size-md, 1.375rem); color: var(--text-body, #2D3649); } .search-input::placeholder { line-height: inherit; } /* Footer flows at the bottom of the page (body is a flex column with min-height:100dvh, so .footer's margin-top:auto pins it to the bottom of the viewport). Do NOT make it position:fixed on mobile — a fixed bottom:0 footer hides behind the phone browser's bottom bar, which is why the copyright wasn't visible. Add safe-area padding so it clears any home-indicator. */ body { min-height: 100dvh; } .footer { position: static; padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)); } /* Reduce header spacing to fit content better */ .header { margin: 10px 0 30px; padding: 20px; } .search-container { margin-top: 50px; } .container { padding: 20px 20px 10px; } } /* ===== FEATURE HIGHLIGHTS (homepage) ===== */ .features { max-width: 1000px; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 1; } .feature-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 11px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); transition: transform 0.25s ease, box-shadow 0.25s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16); } .feature-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--secondary-color, #413F8D) 12%, white); color: var(--secondary-color, #413F8D); flex-shrink: 0; } .feature-icon img, .feature-icon svg { width: 30px; height: 30px; display: block; } /* Middle card (Garderobă) accented with the primary colour for visual rhythm. */ .feature-card:nth-child(2) .feature-icon { background: color-mix(in srgb, var(--primary-color, #FF4D00) 12%, white); color: var(--primary-color, #FF4D00); } .feature-title { font-family: var(--font-family); font-size: 1.15rem; font-weight: 700; color: #2C2C2C; margin: 0; } .feature-text { font-size: 0.9rem; line-height: 1.5; color: #4a4a55; margin: 0; } @media (max-width: 860px) { .features { grid-template-columns: 1fr; max-width: 460px; margin: 50px auto 10px; gap: 16px; } .feature-card { padding: 22px 20px; } } /* Short viewports (laptops with the browser toolbar/bookmarks bar eating height): compact the vertical spacing so the homepage still fits without scrolling, without making taller screens feel cramped. */ @media (min-width: 861px) and (max-height: 800px) { .header { margin-bottom: 34px; padding: 6px 40px; } .search-container { margin-top: 22px; } .features { margin-top: 22px; } .feature-card { padding: 15px 18px; gap: 8px; } } /* ===== FOOTER ===== */ /* Footer styles moved to common.css */