/*
* style.css
*
* This file contains the primary styles for the LearnAE landing page.
* The styling is organized into the following sections:
*
* 1. Global Reset & Variables: Defines the color palette and resets default browser styles.
* 2. Body & Typography: Sets the base font, colors, and typographic rules.
* 3. Layout & Content Box: Styles the main page structure and content container.
* 4. ConvertKit Form Styling: Customizes the appearance of the embedded ConvertKit form.
* 5. Mobile Responsiveness: Adjusts the layout for smaller screen sizes.
*
*/
/* --- 1. Global Reset & Variables --- */
/**
* @section Variables
* @description Defines the core color palette for the site, allowing for
* easy theme management and consistency. All colors are defined as CSS Custom
* Properties (variables) for reusability.
*/
:root {
/* -- Page Colors -- */
--bg-color: #F8F8F8; /* Light background for the entire page. */
--text-color: #333333; /* Darker text for readability. */
/* -- Accent Colors -- */
--primary-color: #1F71B0; /* A vibrant, professional blue for interactive elements. */
--primary-hover-color: #1A6096; /* A slightly darker blue for hover states. */
/* -- UI Element Colors -- */
--box-color: #FFFFFF; /* White background for the main content box. */
--border-color: #E0E0E0; /* Light grey border for subtle separation. */
--input-bg-color: #F0F0F0; /* Slightly off-white for form inputs. */
--input-border-color: #CCCCCC; /* A light grey border for form inputs. */
}
/**
* @section Global Reset
* @description A simple reset to remove default browser margins and paddings,
* and to set the box-sizing model to 'border-box' for more intuitive layout calculations.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* --- 2. Body & Typography --- */
/**
* @section Body
* @description Styles the main body element. This sets the site's default
* font, background color, and text color. It also uses flexbox to center
* the main content vertically and horizontally on the page.
*/
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
/**
* @section Typography
* @description Defines the base typographic styles for headings and paragraphs.
*/
h1, .headline, strong {
font-weight: 700;
}
p {
margin-bottom: 1.5rem;
}
/* --- 3. Layout & Content Box --- */
/**
* @section Container
* @description A simple container to wrap the main content and limit its
* maximum width on larger screens, ensuring readability.
*/
.container {
width: 100%;
max-width: 600px; /* Limits the width for large screens */
text-align: center;
}
/**
* @section Content Box
* @description Styles the main white box that holds the page content.
* It includes padding, rounded corners, a border, and a subtle box shadow
* to lift it off the page.
*/
.content-box {
background-color: var(--box-color);
padding: 2.5rem;
border-radius: 8px;
border: 1px solid var(--border-color);
box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Lighter shadow for bright theme */
}
/**
* @section Logo
* @description Styles the LearnAE logo text.
*/
.logo {
font-weight: 900;
font-size: 2rem;
color: var(--primary-color); /* Blue logo */
margin-bottom: 0rem;
letter-spacing: -1px;
}
/**
* @section Headlines
* @description Styles the main headline and subheadline of the page.
*/
.headline {
font-size: 2.2rem;
line-height: 1.2;
margin-bottom: 1rem;
color: #222222; /* Slightly darker for headlines */
}
.headline strong {
color: var(--primary-color); /* Blue accent for strong text */
}
.subheadline {
font-size: 1.1rem;
opacity: 0.85; /* Keep it slightly softer */
margin-bottom: 2rem;
}
/* --- 4. ConvertKit Form Styling --- */
/**
* @section Form Wrapper
* @description This class is a placeholder for the ConvertKit form,
* which is injected dynamically via a script.
*/
.form-wrapper {
/* The ConvertKit script will inject its own form elements here. */
}
/**
* @section Injected Form
* @description Targets the dynamically injected ConvertKit