/* * Theme Name: SellYourSoftware * Author: G.So * Version: 1.0 * Description: SellYourSoftware UI */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&display=swap'); /* === SellYourSoftware UI Design System === * Intent: Keep all “theme decisions” centralized as CSS variables. * Prefer using semantic tokens (e.g. --accent, --bg, --panel-bg) in components. * Only touch the raw palette tokens below when changing the overall theme. */ :root { /* --- Palette --- May contain Tailwind-derived values */ --bg-void: #020617; /* Slate 950 */ --bg-dark: #0f172a; /* Slate 900 */ --bg-card: rgba(15, 23, 42, 0.6); /* --- Accents --- */ --accent-primary: #6366f1; /* Indigo 500 */ --accent-secondary: #3b82f6; /* Blue 500 */ --accent-glow: rgba(99, 102, 241, 0.5); --accent-success: #10b981; --accent-danger: #ef4444; --accent-warning: #f59e0b; /* --- Typography --- */ --text-main: #f8fafc; /* Slate 50 */ --text-muted: #94a3b8; /* Slate 400 */ --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; /* --- Glassmorphism --- */ --glass-bg: rgba(15, 23, 42, 0.7); --glass-border: rgba(255, 255, 255, 0.08); --glass-highlight: rgba(255, 255, 255, 0.15); --glass-blur: blur(24px); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Semantic aliases used by components (prefer these over raw palette tokens). */ --accent: var(--accent-primary); --accent-hover: #4f46e5; /* Indigo 600 */ --text: var(--text-main); --muted: var(--text-muted); --bg: var(--bg-void); --border: var(--glass-border); --panel-bg: var(--bg-card); --panel-border: var(--glass-border); --success: var(--accent-success); --danger: var(--accent-danger); } /* === Global Reset & Base === */ html { background-color: var(--bg-void); /* Ambient background glow. Kept on the element so it stays fixed behind the entire layout and doesn't “jump” with body scrolling. */ background-image: radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%), radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.15), transparent 25%); background-attachment: fixed; min-height: 100vh; } body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--text-main); line-height: 1.6; min-height: 100vh; /* Prevent horizontal scroll caused by large blurred/gradient decorations. */ overflow-x: hidden; position: relative; } .global-logo-bg { /* Decorative watermark logo behind the whole UI. NOTE: z-index intentionally negative so it never blocks interactive elements. */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 80vh; background-image: url('assets/images/logo_notext.png'); background-repeat: no-repeat; background-position: center; background-size: contain; filter: blur(10px); opacity: 0.15; z-index: -1; pointer-events: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); margin-top: 0; } a { text-decoration: none; color: inherit; transition: all 0.2s ease; } /* === Utility Classes === */ .glass-panel { /* Glass effect. Uses backdrop-filter where available; falls back to plain translucency where not supported. */ background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .text-gradient { /* Explicit gradient for prominent headings (not tied to accent tokens by design). */ background: linear-gradient(135deg, #fff 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-glow { text-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } /* === Scrollbars === */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--glass-highlight); } /* === Layout Structure === */ .layout { display: flex; min-height: 100vh; position: relative; /* Matches the header height so content doesn't sit under the topbar. */ padding-top: 80px; } .content-area { flex: 1; padding: 2rem; max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* === Landing Page Sections === */ .landing-page { display: flex; flex-direction: column; gap: 6rem; } /* Hero Updates */ .hero { text-align: center; padding: 8rem 2rem 4rem; position: relative; /* Allows decorative elements to extend without causing scrollbars. */ overflow: hidden; } .hero h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.03em; } .hero p { font-size: 1.25rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; } .hero-actions { display: flex; justify-content: center; } .btn-hero { min-width: 200px; font-size: 1.1rem; padding: 1rem 2rem; } /* Features Grid */ .features-grid { /* Responsive grid without many breakpoints: grows from 1 → N columns as space allows. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 0 2rem; max-width: 1200px; margin: 0 auto; } .feature-card { padding: 2.5rem; border-radius: 24px; text-align: center; transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-5px); background: var(--glass-highlight); } .feature-icon { font-size: 3rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature-card h3 { font-size: 1.5rem; margin-bottom: 1rem; } .feature-card p { color: var(--text-muted); font-size: 1rem; } /* CTA Section */ .cta-section { /* “End cap” panel: subtle vertical gradient to visually separate from the rest. */ text-align: center; padding: 5rem 2rem; border-radius: 32px; margin: 6rem 2rem 4rem; background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(99, 102, 241, 0.1) 100%); } .cta-section h2 { font-size: 3rem; margin-bottom: 1rem; } .cta-section p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2.5rem; } /* === Footer === */ .site-footer { background: transparent; border-top: 1px solid var(--glass-border); padding: 3rem 0; margin-top: 4rem; text-align: center; color: var(--text-muted); } .glow-logo { /* Logo glow is implemented with pseudo-elements so the DOM stays clean. ::before = blurred glow layer, ::after = underline glow. */ position: relative; z-index: 2; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -0.5px; display: inline-block; line-height: 1; padding: 5px 0; background: linear-gradient(160deg, #60EFFF 0%, #D09CFA 50%, #9C83FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .glow-logo::before { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -0.5px; background: linear-gradient(160deg, #60EFFF 0%, #D09CFA 50%, #9C83FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(12px); opacity: 0.8; transform: translateY(5px); } .glow-logo::after { content: ''; display: block; width: 90%; height: 2px; background: linear-gradient(160deg, transparent, #60EFFF, #D09CFA, #9C83FF, transparent); margin: 0 auto; margin-top: -5px; opacity: 0.5; filter: blur(3px); position: relative; z-index: 1; transform: translateY(5px); }