/* ╔══════════════════════════════════════════════════════════════╗ ║ FLUENCYWORKS — SITE STYLE TEMPLATE ║ ║ ║ ║ Fill in the values below to control every visual aspect ║ ║ of the site. Save the file and the site updates instantly. ║ ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ──────────────────────────────────────────────────────── COLORS Tip: use a hex code like #1d2340 or a name like "navy" ──────────────────────────────────────────────────────── */ /* Primary brand color — used for nav, hero background, dark section backgrounds */ --color-primary: #1d2736; /* Slightly darker background — used for alternating sections */ --color-bg-alt: #1d2736; /* Main body text color */ --color-text: #1d2736; /* Secondary/muted text color — for captions, subtitles, card body text */ --color-text-muted: #1d2736; /* Page background — the warm off-white behind most content */ --color-bg: #f2ede6; /* Card/block background — white or near-white for cards */ --color-card: #f2ede6; /* Light text — used on dark backgrounds */ --color-text-light: #f2ede6; /* Light text at reduced opacity — for card body text on dark backgrounds */ --color-text-dim: #f2ede6; /* Accent color — used for buttons, underlines, highlights, logo symbols */ --color-accent: #2f6f6b; /* Secondary accent coolor — for CTAs */ --color-accent-light: #d6b24a; /* Hover/darker version of accent (usually 15% darker than accent) */ --color-accent-dark: #285e5b; /* Card border color — subtle border around cards */ --color-border: #285e5b; /* ──────────────────────────────────────────────────────── FONTS Tip: paste a Google Fonts @import above this :root block, then reference the font name here (e.g. 'Playfair Display') ──────────────────────────────────────────────────────── */ /* Display font — used for the FluencyWorks logo and big hero headlines */ --font-display: 'Times New Roman', serif; /* Heading font — used for section titles ("Why work with us?", etc.) */ --font-heading: 'Canva Sans', sans-serif; /* Body font — used for all paragraph and UI text */ --font-body: 'Canva Sans', sans-serif; /* ──────────────────────────────────────────────────────── FONT SIZES Tip: use rem (e.g. 1rem = 16px, 1.5rem = 24px) ──────────────────────────────────────────────────────── */ /* Logo / hero wordmark (the giant "FluencyWorks" in the hero) */ --size-logo: 8rem; /* e.g. 8 */ /* Page-level hero titles (e.g. "Fluency Works Teacher Institute") */ --size-hero-title: 4rem; /* e.g. 3.5 */ /* Section headings (e.g. "Why work with us?", "Who is it for?") */ --size-section-heading: 4rem; /* e.g. 2.5 */ /* Card/sub-section headings */ --size-card-heading: 1.1rem; /* e.g. 1.1 */ /* Body text */ --size-body: .95rem; /* e.g. 0.95 */ /* Small labels (e.g. "THE PRODUCT", "Co-Founder") */ --size-label: 1.1rem; /* e.g. 0.7 */ /* Button text */ --size-button: 0.75rem; /* e.g. 0.75 */ /* Navigation links */ --size-nav: .82rem; /* e.g. 0.82 */ /* ──────────────────────────────────────────────────────── FONT WEIGHTS Tip: 400 = regular, 600 = semibold, 700 = bold, 900 = black ──────────────────────────────────────────────────────── */ --weight-logo: 100; /* e.g. 900 */ --weight-heading: 600; /* e.g. 800 */ --weight-subheading: 700; /* e.g. 700 */ --weight-body: 400; /* e.g. 400 */ --weight-label: 100; /* e.g. 700 */ --weight-button: 800; /* e.g. 800 */ /* ──────────────────────────────────────────────────────── LETTER SPACING Tip: use em units (e.g. 0.1em = slightly spaced, 0.2em = wide) ──────────────────────────────────────────────────────── */ --spacing-logo: -0.05em; /* e.g. 0.02 */ --spacing-label: 0.18em; /* e.g. 0.18 */ --spacing-button: 0.14em; /* e.g. 0.14 */ --spacing-nav: 0.08em; /* e.g. 0.08 */ /* ──────────────────────────────────────────────────────── LAYOUT & SPACING ──────────────────────────────────────────────────────── */ /* Maximum content width (the container that keeps text from stretching too wide) */ --max-width: 1200px; /* e.g. 1200 */ /* Section vertical padding (top and bottom breathing room in each section) */ --section-padding: 5rem; /* e.g. 5 */ /* Card border radius */ --radius-card: 8px; /* e.g. 8 */ /* Button border radius */ --radius-button: 4px; /* e.g. 4 */ /* Gap between grid columns (cards, team, etc.) */ --gap-grid: 1.5rem; /* e.g. 1.5 */ /* ──────────────────────────────────────────────────────── HERO & PAGE HEADERS ──────────────────────────────────────────────────────── */ /* Height of the main hero section */ --hero-height: 520px; /* e.g. 520 */ /* Height of secondary page hero banners (Institute, Kit) */ --page-hero-height: 400px; /* e.g. 400 */ /* Photo opacity in dark hero sections (0 = invisible, 1 = fully visible) */ --hero-photo-opacity: 0.50; /* e.g. 0.50 */ /* Photo opacity in light hero sections (0 = invisible, 1 = fully visible) */ --hero-photo-opacity-light: .4; /* ──────────────────────────────────────────────────────── NAV BAR ──────────────────────────────────────────────────────── */ /* Nav bar background color */ --nav-bg: var(--color-primary); /* Nav bar height */ --nav-height: 64px; /* e.g. 58 */ /* Nav link color */ --nav-link-color: var(--color-text-light); /* Nav link hover color */ --nav-link-hover: var(--color-accent-light); /* CTA button in nav — background */ --nav-cta-bg: var(--color-accent-light); /* CTA button in nav — text color */ --nav-cta-color: var(--color-primary); /* ──────────────────────────────────────────────────────── ACCENT DIVIDER The thin horizontal stripe between sections ──────────────────────────────────────────────────────── */ --divider-color: var(--color-accent); --divider-height: 5px; /* e.g. 5 */ /* ──────────────────────────────────────────────────────── IMAGES Paste image URLs here (Unsplash, your own CDN, etc.) Format: url('https://...') ──────────────────────────────────────────────────────── */ /* ⚠️ PLACEHOLDER IMAGES — replace with your own when ready To use your own: upload photos to the /images folder in GitHub then change url('https://...unsplash...') to url('./images/filename.jpg') */ /* Main hero background photo */ --img-hero: url('https://images.unsplash.com/photo-1588072432836-e10032774350?w=1600&q=85'); /* "Making Math Visible" section — right-side photo */ --img-intro: url('https://images.unsplash.com/photo-1509228468518-180dd4864904?w=900&q=85'); /* "Why Work With Us" — card 1: The Institute */ --img-card-institute: url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=700&q=80'); /* "Why Work With Us" — card 2: The Product */ --img-card-product: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=700&q=80'); /* "Why Work With Us" — card 3: Who We Are */ --img-card-team: url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=700&q=80'); /* Teacher Institute hero banner */ --img-institute-hero: url('teacher right side.png'); /* Starter Kit hero banner */ --img-kit-hero: url('https://images.unsplash.com/photo-1596495577886-d920f1fb7238?w=1600&q=85'); /* About — "Hello & Welcome" section photo */ --img-about-hello: url('math steps.jpg'); /* About — "Our Goal" section photo */ --img-about-goal: url('child math blackboard.jpg'); /* Team — Noelle Campagna headshot */ --img-team-noelle: url('Noelle headshot.jpeg'); /* Team — Beth Dyson headshot */ --img-team-beth: url('Beth headshot.jpg'); /* Team — Ben Sykora headshot */ --img-team-ben: url('Ben headshot.jpeg'); /* Outcome tiles (6 images for the institute outcomes section) */ --img-outcome-1: url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=600&q=80'); --img-outcome-2: url('https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=600&q=80'); --img-outcome-3: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=600&q=80'); --img-outcome-4: url('https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=600&q=80'); --img-outcome-5: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=600&q=80'); --img-outcome-6: url('https://images.unsplash.com/photo-1509062522246-3755977927d7?w=600&q=80'); }