/* Design tokens from design_handoff_self_reliance_site/README.md. Per-course palette is injected as CSS variables on : --deep --mid --tint --ink --body-c --ink-rgb --footer-muted */ * { box-sizing: border-box; } body { margin: 0; background: #ffffff; font-family: 'Archivo', sans-serif; color: var(--ink); min-height: 100vh; } a { color: var(--deep); text-decoration: none; } a:hover { color: var(--mid); } .container { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } /* ---- Sticky nav ---- */ .nav { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, .08); } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 28px; } .nav-wordmark { font-size: 15px; font-weight: 900; letter-spacing: 0.18em; color: #17553D; } .nav-links { display: flex; gap: 22px; flex: 1; justify-content: center; flex-wrap: wrap; } .nav-link { font-size: 14px; font-weight: 600; color: var(--ink); } .nav-link.active { font-weight: 800; color: var(--deep); border-bottom: 2.5px solid var(--mid); padding-bottom: 2px; } .nav-cta { font-size: 14px; font-weight: 800; background: var(--deep); color: #fff; padding: 10px 22px; border-radius: 999px; } .nav-cta:hover { background: var(--mid); color: #fff; } /* ---- Buttons ---- */ .btn { display: inline-block; font-size: 16px; font-weight: 800; background: var(--deep); color: #fff; padding: 15px 28px; border-radius: 999px; text-align: center; cursor: pointer; border: none; font-family: 'Archivo', sans-serif; transition: background 150ms; } .btn:hover { background: var(--mid); color: #fff; } /* ---- Hero ---- */ .hero { background: var(--tint); } .hero-inner { max-width: 1120px; margin: 0 auto; padding: 72px 32px 64px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 22px; } .hero-headline { font-size: 58px; font-weight: 900; line-height: 1.03; letter-spacing: -0.01em; } .hero-sub { font-size: 21px; line-height: 1.5; color: var(--body-c); } .hero-cta-row { display: flex; gap: 16px; align-items: center; margin-top: 6px; } .hero-meta { font-size: 15px; font-weight: 600; color: var(--mid); } .hero-media { position: relative; height: 420px; } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; } .hero-placeholder { position: absolute; inset: 0; border-radius: 24px; background: rgba(var(--ink-rgb), .08); border: 1.5px dashed rgba(var(--ink-rgb), .3); display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; font-size: 15px; font-weight: 600; color: var(--body-c); } /* ---- Eyebrows ---- */ .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; } .eyebrow--mid { color: var(--mid); } .eyebrow--gold { color: #B8912F; } .eyebrow--brightgold { color: #E3C15C; } .section-headline { font-size: 38px; font-weight: 900; margin-top: 14px; letter-spacing: -0.01em; } /* ---- Outcomes ---- */ .outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; margin-top: 24px; } .outcome { display: flex; gap: 14px; align-items: baseline; } .outcome-check { font-size: 18px; font-weight: 800; color: var(--mid); } .outcome-text { font-size: 19px; font-weight: 600; line-height: 1.4; } .punchline { margin-top: 30px; font-size: 21px; font-weight: 700; } .punchline span { color: var(--mid); } /* ---- Format columns ---- */ .format-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 22px; margin-top: 24px; } .format-card { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--mid); padding-top: 18px; } .format-title { font-size: 19px; font-weight: 800; } .format-body { font-size: 15.5px; line-height: 1.5; color: var(--body-c); } /* ---- Week-by-week ---- */ .weeks-section { background: var(--tint); } /* Number and topic columns share one grid so ranged labels (10–11, 6–7) never wrap and every topic in a column starts at the same x. */ .weeks-grid { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 14px 16px; align-items: baseline; margin-top: 26px; } .week-row { display: contents; } .week-num { font-size: 15px; font-weight: 900; color: #B8912F; min-width: 24px; white-space: nowrap; } .week-row:nth-child(even) .week-num { margin-left: 24px; } .week-topic { font-size: 17.5px; font-weight: 600; } .weeks-footnote { margin-top: 26px; font-size: 15px; color: var(--body-c); } /* ---- Sign-up box ---- */ .signup-box { border: 2px solid var(--deep); border-radius: 24px; padding: 48px 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .signup-copy { display: flex; flex-direction: column; gap: 14px; } .signup-headline { font-size: 34px; font-weight: 900; letter-spacing: -0.01em; } .signup-body { font-size: 17px; line-height: 1.55; color: var(--body-c); } .signup-form { display: flex; flex-direction: column; gap: 14px; } .signup-form input, .signup-form select { font-family: 'Archivo', sans-serif; font-size: 16px; padding: 14px 18px; border: 1.5px solid rgba(var(--ink-rgb), .25); border-radius: 12px; outline: none; background: #fff; color: var(--ink); } .signup-form select { padding: 14px 14px; } .signup-success { display: flex; flex-direction: column; gap: 12px; background: var(--tint); border-radius: 18px; padding: 36px; } .signup-success-title { font-size: 26px; font-weight: 900; color: var(--deep); } .signup-success-body { font-size: 16.5px; line-height: 1.55; color: var(--body-c); } .hidden { display: none; } /* ---- Footer ---- */ .footer { background: var(--deep); color: var(--footer-muted); } .footer-inner { max-width: 1120px; margin: 0 auto; padding: 28px 32px; display: flex; justify-content: space-between; gap: 24px; font-size: 14px; } .footer-link { font-weight: 800; color: #E3C15C; } /* ---- Home: course cards ---- */ .course-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; } .course-card { display: flex; flex-direction: column; gap: 12px; border-radius: 20px; padding: 32px 34px; transition: transform 150ms, box-shadow 150ms; } .course-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--card-shadow); } .course-card-tagline { font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; } .course-card-title { font-size: 27px; font-weight: 900; } .course-card-desc { font-size: 16.5px; line-height: 1.5; } .course-card-link { font-size: 14px; font-weight: 800; margin-top: 6px; } .course-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .course-card--wide .course-card-link { margin-top: 0; } .course-card--wide .course-card-content { display: flex; flex-direction: column; gap: 12px; } /* ---- Home: My Foundation panel ---- */ .foundation-panel { background: #1E3329; border-radius: 24px; padding: 52px 56px; color: #DCE8DC; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .foundation-copy { display: flex; flex-direction: column; gap: 16px; } .foundation-headline { font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -0.01em; } .foundation-body { font-size: 17.5px; line-height: 1.55; color: #A9C4B4; } .foundation-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .foundation-item { font-size: 15.5px; font-weight: 700; color: #fff; } /* ---- Home: leader's guide + merged footer ---- */ .leader-guide { background: #17553D; color: #DCE8DC; } .leader-guide-inner { max-width: 1120px; margin: 0 auto; padding: 52px 32px 56px; } .leader-guide-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; margin-top: 22px; } .leader-guide-col { display: flex; flex-direction: column; gap: 8px; } .leader-guide-num { font-size: 30px; font-weight: 900; color: #E3C15C; } .leader-guide-title { font-size: 17px; font-weight: 700; color: #fff; } .leader-guide-body { font-size: 14.5px; line-height: 1.5; color: #A9C4B4; } .leader-guide-footer { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .18); display: flex; justify-content: space-between; gap: 24px; font-size: 14px; color: #A9C4B4; } /* ---- Mobile stacking (per README: hero -> 1 col, cards -> 1 col, nav wraps) ---- */ @media (max-width: 900px) { .nav-inner { flex-direction: column; gap: 14px; padding: 14px 20px; } .nav-links { justify-content: center; } .hero-inner, .outcomes, .signup-box, .course-cards, .foundation-panel { grid-template-columns: 1fr; } .weeks-grid { grid-template-columns: max-content 1fr; } .week-row:nth-child(even) .week-num { margin-left: 0; } .format-grid, .leader-guide-grid { grid-template-columns: 1fr; } .course-card--wide { grid-column: auto; grid-template-columns: 1fr; } .hero-headline { font-size: 42px; } .signup-box { padding: 36px 28px; } .foundation-panel { padding: 36px 28px; } .footer-inner, .leader-guide-footer { flex-direction: column; gap: 8px; } }