/* === LEXIVIUM GLOBAL STYLESHEET === */ /* --- Google Font Imports are in the HTML --- */ /* --- CSS Variables (Theme) --- */ :root { --primary-color: #854d0e; /* A rich, warm brown */ --primary-hover: #653a0a; --background-color: #fdf6e3; /* A soft, parchment-like cream */ --card-background: #fffcf2; /* A slightly lighter cream for cards */ --text-color: #422006; /* Dark brown for high contrast */ --subtle-text: #7d5a44; --border-color: #d2c8b3; --accent-color: #c0392b; /* For accents like 'In Progress' */ --done-color: #27ae60; /* For 'Done' status */ } /* --- Global Resets & Base Styles --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; /* A clean sans-serif for body text */ background-color: var(--background-color); color: var(--text-color); line-height: 1.6; font-size: 16px; } h1, h2, h3, h4 { font-family: 'Lora', serif; /* A classic serif for headings */ line-height: 1.2; margin-bottom: 1rem; } p { margin-bottom: 1rem; } a { color: var(--primary-color); text-decoration: none; } .container { width: 90%; max-width: 1100px; margin: 0 auto; } .section-padding { padding: 80px 0; } .section-header { text-align: center; margin-bottom: 40px; } .section-header h2 { font-size: 2.5rem; } .section-header p { max-width: 600px; margin-left: auto; margin-right: auto; color: var(--subtle-text); } /* --- Buttons --- */ .button { display: inline-block; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-align: center; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; } .button-primary { background-color: var(--primary-color); color: #fff; } .button-primary:hover { background-color: var(--primary-hover); } .button-secondary { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); } .button-secondary:hover { background-color: var(--primary-color); color: #fff; } /* --- Header --- */ .main-header { padding: 20px 0; background-color: var(--background-color); border-bottom: 1px solid var(--border-color); } .main-header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Lora', serif; font-size: 1.8rem; font-weight: 700; } /* --- Hero Section --- */ #hero { padding: 100px 0; text-align: center; background-image: linear-gradient(to bottom, var(--background-color) 70%, var(--card-background)); } .hero-content h1 { font-size: 3.5rem; max-width: 800px; margin-left: auto; margin-right: auto; } .hero-content .subtitle { font-size: 1.2rem; max-width: 700px; margin: 20px auto 30px; color: var(--subtle-text); } /* --- Features Section --- */ #features { background-color: var(--card-background); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .feature-card { background-color: #fff; padding: 30px; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .feature-card h3 { font-size: 1.5rem; } /* --- "Who Is It For?" Section --- */ #who-is-it-for { background-color: var(--background-color); } .who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .who-column h2 { font-size: 2.2rem; } /* --- Roadmap Section --- */ #roadmap { background-color: var(--card-background); } .roadmap-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .roadmap-item { padding: 20px; border-left: 4px solid var(--border-color); } .roadmap-item.done { border-color: var(--done-color); } .roadmap-item.in-progress { border-color: var(--accent-color); } .roadmap-status { display: inline-block; padding: 4px 10px; font-size: 0.8rem; font-weight: 600; border-radius: 20px; color: #fff; margin-bottom: 10px; } .roadmap-item.done .roadmap-status { background-color: var(--done-color); } .roadmap-item.in-progress .roadmap-status { background-color: var(--accent-color); } .roadmap-item.planned .roadmap-status { background-color: var(--subtle-text); } .roadmap-item h4 { font-size: 1.2rem; } /* --- CTA Section --- */ #cta { background-color: var(--background-color); text-align: center; } .cta-content h2 { font-size: 2.5rem; } /* --- CTA Form --- */ .cta-form { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; } .cta-form input[type="email"] { font-family: 'Inter', sans-serif; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; width: 300px; } /* --- Footer --- */ .main-footer { padding: 20px 0; text-align: center; font-size: 0.9rem; color: var(--subtle-text); border-top: 1px solid var(--border-color); } /* --- Responsive Design --- */ @media (max-width: 768px) { h1 { font-size: 2.5rem; } .section-header h2, .cta-content h2 { font-size: 2rem; } .who-grid { grid-template-columns: 1fr; } .main-header .container { flex-direction: column; gap: 20px; } .cta-form { flex-direction: column; align-items: center; } .cta-form input[type="email"] { width: 100%; max-width: 400px; } }