/* ============================================================ THE FLEX CULT — Courses Module theflexcult.com/assets/courses.css Shared styles for /courses/ pages — course index pages and individual lesson pages. Loaded alongside assets/style.css. ============================================================ */ :root { /* Extra accent used for the "Future" bucket in interactive tools — matches the blue used on finance tools (budget planner, net worth, savings goal) */ --audit-future: #5b8fd4; --audit-future-light: #eaf1fb; } /* ============================================================ THEME: NAVY Remaps the amber accent variables to a deep navy palette for courses with a "sleep / habits" identity (e.g. Sleep Better). Apply class="theme-navy" to — every rule below that references var(--amber*) will automatically pick up navy. ============================================================ */ .theme-navy { --amber: #2c4a6e; --amber-light: #eaf0f7; --amber-mid: #9fc1e3; --amber-dark: #1e3a5f; } .theme-navy .course-hero::after { content: 'SLEEP BETTER'; } /* ============================================================ THEME: GREEN Remaps the amber accent variables to a fresh green palette for nutrition/food courses (e.g. Eat with Intent). Apply class="theme-green" to . ============================================================ */ .theme-green { --amber: #3B8A4A; --amber-light: #E8F5E9; --amber-mid: #81C784; --amber-dark: #2E7D32; } .theme-green .course-hero::after { content: 'EAT WITH INTENT'; } /* ============================================================ COURSE INDEX PAGE ============================================================ */ /* ── Hero ── */ .course-hero { background: var(--ink); padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem); position: relative; overflow: hidden; } .course-hero::after { content: 'MONEY 101'; position: absolute; right: -1rem; bottom: -2rem; font-family: var(--font-headline); font-size: clamp(4rem, 14vw, 11rem); color: rgba(255,255,255,.03); line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; } .course-hero-inner { max-width: var(--container-sm); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); position: relative; z-index: 1; } .course-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.25rem; } .course-badge::before { content: ''; width: 24px; height: 1.5px; background: var(--amber); flex-shrink: 0; } .course-hero h1 { font-family: var(--font-headline); font-size: clamp(2.6rem, 7vw, 5rem); color: var(--cream); line-height: .98; letter-spacing: .02em; margin-bottom: 1.25rem; } .course-hero h1 em { font-family: var(--font-display); font-style: italic; color: var(--amber); } .course-hero-sub { font-size: clamp(15px, 2vw, 17px); color: rgba(250,248,243,.6); font-weight: 300; line-height: 1.75; max-width: 560px; margin-bottom: 1.75rem; } .course-hero-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; } .course-meta-item { font-size: 13px; color: rgba(250,248,243,.45); display: flex; align-items: center; gap: 8px; } .course-meta-item strong { color: rgba(250,248,243,.85); font-weight: 500; } .course-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--amber); flex-shrink: 0; } /* ── Body container ── */ .course-body { max-width: var(--container-sm); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem); } /* ── Outcomes box ── */ .course-outcomes { background: var(--cream2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .course-outcomes-title { font-family: var(--font-headline); font-size: 1.3rem; letter-spacing: .03em; color: var(--ink); margin-bottom: 1.1rem; } .course-outcomes ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; } .course-outcomes li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink2); font-weight: 300; line-height: 1.6; } .course-outcomes li::before { content: '✓'; color: var(--amber-dark); font-weight: 700; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-light); display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px; } /* ── Lesson list ── */ .lesson-list-title { font-family: var(--font-headline); font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: .02em; color: var(--ink); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .lesson-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .lesson-item { display: flex; align-items: flex-start; gap: 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; } .lesson-item:hover { border-color: var(--amber-mid); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,26,24,.07); } .lesson-item-num { font-family: var(--font-headline); font-size: 1.6rem; letter-spacing: .03em; color: var(--amber-dark); background: var(--amber-light); border-radius: var(--radius); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .lesson-item-body { flex: 1; min-width: 0; } .lesson-item-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; line-height: 1.35; } .lesson-item-desc { font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.6; margin-bottom: .5rem; } .lesson-item-time { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-light); } .lesson-item-arrow { font-size: 16px; color: var(--amber); flex-shrink: 0; align-self: center; transition: transform .2s; } .lesson-item:hover .lesson-item-arrow { transform: translateX(4px); } /* ── CTA block ── */ .course-cta-block { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .course-cta-note { font-size: 12px; color: var(--muted); margin-top: .85rem; } /* ============================================================ AUTHOR CARD — shared across index + lesson pages ============================================================ */ .author-card { display: flex; gap: 1.25rem; align-items: center; background: var(--cream2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; } .author-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--amber); color: var(--ink); font-family: var(--font-headline); font-size: 1.4rem; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; } .author-card-body { flex: 1; min-width: 0; } .author-card-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .3rem; } .author-card-name { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; } .author-card-desc { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.6; } .author-card-link { font-size: 12px; font-weight: 600; color: var(--amber-dark); text-decoration: none; border-bottom: 1px solid var(--amber-mid); white-space: nowrap; flex-shrink: 0; } @media (max-width: 560px) { .author-card { flex-direction: column; text-align: center; } .author-card-link { margin-top: .25rem; } } /* ============================================================ LESSON PAGES ============================================================ */ /* ── Lesson hero ── */ .lesson-hero { background: var(--ink); padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.75rem, 4vw, 2.5rem); } .lesson-hero-inner { max-width: var(--container-sm); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } .lesson-breadcrumb { font-size: 12px; color: rgba(250,248,243,.35); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lesson-breadcrumb a { color: rgba(250,248,243,.35); text-decoration: none; transition: color .2s; } .lesson-breadcrumb a:hover { color: var(--amber); } .lesson-breadcrumb span.sep { color: rgba(250,248,243,.18); } .lesson-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--amber); color: var(--ink); padding: 4px 10px; border-radius: 2px; margin-bottom: 1rem; } .lesson-hero h1 { font-family: var(--font-headline); font-size: clamp(2rem, 5.5vw, 3.4rem); color: var(--cream); line-height: 1.05; letter-spacing: .02em; margin-bottom: .85rem; } .lesson-hero-meta { font-size: 13px; color: rgba(250,248,243,.45); } /* ── Progress bar ── */ .lesson-progress-wrap { background: var(--cream2); border-bottom: 1px solid var(--border); } .lesson-progress-inner { max-width: var(--container-sm); margin-inline: auto; padding: 1rem clamp(1.25rem, 5vw, 3rem); } .lesson-progress-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink); margin-bottom: .6rem; } .lesson-progress-label .lp-pct { color: var(--muted); font-weight: 400; } .lesson-progress-track { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; } .lesson-progress-fill { height: 100%; background: var(--amber); border-radius: 99px; transition: width .3s var(--ease); } /* ── Lesson content wrap ── */ .lesson-body-wrap { max-width: var(--container-sm); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); } .lesson-body-wrap .author-card { margin: 2.5rem 0; } /* ── Key takeaway box ── */ .takeaway-box { background: var(--amber-light); border-left: 4px solid var(--amber); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .takeaway-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .5rem; } .takeaway-box p { font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.6; margin: 0; } /* ── Action step box ── */ .action-step-box { background: var(--ink); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2rem); margin: 2.5rem 0; } .action-step-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: .75rem; } .action-step-box p { font-size: 1rem; color: var(--cream); line-height: 1.7; font-weight: 300; margin: 0; } .action-step-box p strong { color: var(--cream); font-weight: 600; } .action-step-box ol, .action-step-box ul { padding-left: 1.25rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .action-step-box li { font-size: 1rem; color: var(--cream); line-height: 1.7; font-weight: 300; } .action-step-box li strong, .action-step-box li::marker { color: var(--cream); } /* ── Prev / Next navigation ── */ .lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; } @media (max-width: 620px) { .lesson-nav { grid-template-columns: 1fr; } } .lesson-nav-link { display: flex; flex-direction: column; gap: .4rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; text-decoration: none; transition: border-color .2s, transform .2s; } .lesson-nav-link:hover { border-color: var(--amber-mid); transform: translateY(-2px); } .lesson-nav-next { text-align: right; align-items: flex-end; } .lesson-nav-direction { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dark); display: flex; align-items: center; gap: 6px; } .lesson-nav-next .lesson-nav-direction { flex-direction: row-reverse; } .lesson-nav-title { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; } .lesson-nav-link.disabled { opacity: .45; pointer-events: none; } /* ============================================================ INTERACTIVE MONEY AUDIT TOOL (Lesson 1) ============================================================ */ .audit-tool { background: var(--cream2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2.25rem); margin: 2.5rem 0; } .audit-tool-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .85rem; } .audit-tool-eyebrow::before { content: ''; width: 20px; height: 1.5px; background: var(--amber-dark); flex-shrink: 0; } .audit-tool-title { font-family: var(--font-headline); font-size: 1.5rem; letter-spacing: .02em; color: var(--ink); margin-bottom: .5rem; } .audit-tool .audit-tool-sub { font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.65; max-width: 580px; margin: 0 0 1.5rem; } /* ── Currency selector (all interactive calculators) ───────── */ .audit-tool-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; } .audit-tool-toprow .audit-tool-eyebrow { margin-bottom: 0; } .currency-select-wrap { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } .currency-select-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .currency-select { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .55rem; cursor: pointer; appearance: auto; } .currency-select:focus { outline: none; border-color: var(--amber-mid); } @media (max-width: 480px) { .audit-tool-toprow { flex-direction: column; align-items: flex-start; } } .audit-rows { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; } .audit-row { display: grid; grid-template-columns: 1fr 110px 130px 32px; gap: .6rem; align-items: center; } @media (max-width: 600px) { .audit-row { grid-template-columns: 1fr 1fr; grid-template-areas: "desc desc" "amt bucket" "del del"; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .audit-row:last-child { border-bottom: none; padding-bottom: 0; } .audit-row .audit-desc { grid-area: desc; } .audit-row .audit-amount { grid-area: amt; } .audit-row .audit-bucket { grid-area: bucket; } .audit-row .audit-row-del { grid-area: del; justify-self: end; } } .audit-row input, .audit-row select { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .7rem; width: 100%; appearance: auto; } .audit-row input:focus, .audit-row select:focus { outline: none; border-color: var(--amber-mid); } .audit-row-del { background: none; border: none; color: var(--muted-light); font-size: 20px; line-height: 1; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); transition: color .2s, background .2s; } .audit-row-del:hover { color: var(--amber-dark); background: var(--amber-light); } .audit-add-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1.5px dashed var(--border-dark); border-radius: var(--radius); color: var(--ink2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .65rem 1.1rem; cursor: pointer; transition: border-color .2s, color .2s; margin-bottom: 1.75rem; } .audit-add-btn:hover { border-color: var(--amber); color: var(--amber-dark); } .audit-results { border-top: 1px solid var(--border-dark); padding-top: 1.5rem; } .audit-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--border); margin-bottom: 1.4rem; } .audit-bar-seg { height: 100%; transition: width .4s var(--ease); } .audit-bar-needs { background: var(--ink); } .audit-bar-wants { background: var(--amber); } .audit-bar-future { background: var(--audit-future); } .audit-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.25rem; } @media (max-width: 560px) { .audit-stats { grid-template-columns: 1fr; text-align: left; } } .audit-stat { text-align: center; } @media (max-width: 560px) { .audit-stat { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } } .audit-stat-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink2); margin-bottom: .25rem; } .audit-stat-value { display: block; font-family: var(--font-headline); font-size: 1.7rem; letter-spacing: .02em; line-height: 1; } .audit-stat-amount { display: block; font-size: 11px; color: var(--muted); margin-top: .25rem; } .audit-stat-needs .audit-stat-value { color: var(--ink); } .audit-stat-wants .audit-stat-value { color: var(--amber-dark); } .audit-stat-future .audit-stat-value { color: var(--audit-future); } .audit-tool .audit-insight { background: var(--white); border-left: 3px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; padding: .9rem 1.1rem; font-size: 13.5px; color: var(--ink2); font-weight: 300; line-height: 1.65; margin: 0; } .audit-tool-footer { margin-top: 1.25rem; font-size: 13px; color: var(--muted); font-weight: 300; } .audit-tool-footer a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ FREE TOOL CALLOUT ============================================================ */ .tool-callout { display: flex; align-items: center; gap: 1.25rem; background: var(--amber-light); border: 1px solid var(--amber-mid); border-radius: var(--radius-md); padding: 1.5rem; margin: 2.5rem 0; } @media (max-width: 560px) { .tool-callout { flex-direction: column; align-items: flex-start; text-align: left; } } .tool-callout-icon { width: 48px; height: 48px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .tool-callout-body { flex: 1; min-width: 0; } .tool-callout-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .3rem; } .tool-callout-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; } .tool-callout-desc { font-size: 13px; color: var(--ink2); font-weight: 300; line-height: 1.6; } .tool-callout .tool-callout-action { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 12px 20px; border-radius: var(--radius); text-decoration: none; transition: background .18s, transform .15s; white-space: nowrap; } .tool-callout .tool-callout-action:hover { background: var(--amber-dark); transform: translateY(-1px); } /* ============================================================ DOWNLOAD CTA BOX ============================================================ */ .download-box { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; background: var(--ink); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2rem); margin: 2.5rem 0; } @media (max-width: 560px) { .download-box { grid-template-columns: 1fr; } } .download-box-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: .5rem; } .download-box-title { font-family: var(--font-headline); font-size: 1.3rem; letter-spacing: .02em; color: var(--cream); line-height: 1.15; margin-bottom: .5rem; } .download-box .download-box-sub { font-size: 13px; color: rgba(250,248,243,.65); line-height: 1.6; font-weight: 300; margin: 0; } .download-box .download-box-action { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 12px 22px; border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: background .18s, transform .15s; flex-shrink: 0; } .download-box .download-box-action:hover { background: var(--amber-dark); transform: translateY(-1px); } .download-box-action svg { flex-shrink: 0; } /* ============================================================ LESSON FAQ (accordion) ============================================================ */ .lesson-faq { margin: 2.5rem 0; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: .6rem; overflow: hidden; background: var(--white); } .faq-item summary { padding: 1rem 1.25rem; font-size: .95rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--amber-dark); flex-shrink: 0; } .faq-item[open] summary::after { content: '\2212'; } .faq-item[open] summary { border-bottom: 1px solid var(--border); } .faq-item .faq-body { padding: 1rem 1.25rem 1.25rem; font-size: 14px; color: var(--ink2); font-weight: 300; line-height: 1.75; } .faq-item .faq-body a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ KEEP LEARNING / RELATED READS ============================================================ */ .lesson-related-title { font-family: var(--font-headline); font-size: 1.3rem; letter-spacing: .02em; color: var(--ink); margin: 3rem 0 1.25rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border); } .lesson-body-wrap .related-card-img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--cream2); } /* ============================================================ 50/30/20 BUDGET CALCULATOR (Lesson 2) ============================================================ */ .budget-calc-income { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-dark); } .budget-calc-income-field { flex: 1; min-width: 220px; } .budget-calc-income label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .budget-calc-income-input-wrap { display: flex; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .budget-calc-income-input-wrap span { padding: .65rem .8rem; font-size: 14px; color: var(--muted); background: var(--border); flex-shrink: 0; } .budget-calc-income input { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); border: none; background: none; padding: .65rem .8rem; width: 100%; min-width: 0; } .budget-calc-income input:focus { outline: none; } .budget-calc-income .budget-calc-income-note { font-size: 12px; color: var(--muted); max-width: 240px; font-weight: 300; line-height: 1.6; margin: 0; } .budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-bottom: 1.5rem; } @media (max-width: 700px) { .budget-grid { grid-template-columns: 1fr; } } .budget-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; min-width: 0; } .budget-card-needs { border-top: 3px solid var(--ink); } .budget-card-wants { border-top: 3px solid var(--amber); } .budget-card-future { border-top: 3px solid var(--audit-future); } .budget-card-head { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .85rem; } .budget-card-pct { font-family: var(--font-headline); font-size: 1.6rem; letter-spacing: .02em; line-height: 1; } .budget-card-needs .budget-card-pct { color: var(--ink); } .budget-card-wants .budget-card-pct { color: var(--amber-dark); } .budget-card-future .budget-card-pct { color: var(--audit-future); } .budget-card-target { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--ink2); font-weight: 300; margin-bottom: .6rem; } .budget-card-target strong { font-weight: 600; color: var(--ink); } .budget-card-actual { border-top: 1px dashed var(--border); padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 13px; color: var(--ink2); font-weight: 300; } .budget-card-actual strong { font-weight: 600; color: var(--ink); } .budget-card-actual > span:first-child { white-space: nowrap; flex-shrink: 0; } .budget-card-actual .budget-calc-income-input-wrap { flex-shrink: 0; } .budget-card-actual .budget-calc-income-input-wrap span { padding: .4rem .5rem; font-size: 12px; } .budget-card-actual input.budget-actual-input { font-size: 13px; padding: .4rem .5rem; } .budget-diff { display: inline-block; margin-top: .5rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 99px; } .budget-diff-over { background: var(--amber-light); color: var(--amber-dark); } .budget-diff-under { background: var(--audit-future-light); color: var(--audit-future); } .budget-diff-on { background: #e7f5ec; color: #2f8a4e; } .audit-tool .budget-calc-empty { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.6; background: var(--white); border-left: 3px solid var(--border-dark); border-radius: 0 var(--radius) var(--radius) 0; padding: .75rem 1rem; margin: .75rem 0 0; } .audit-tool .budget-calc-empty a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ EMERGENCY FUND CALCULATOR (Lesson 3) ============================================================ */ .ef-calc-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.75rem; } @media (max-width: 800px) { .ef-calc-inputs { grid-template-columns: 1fr; } } .ef-calc-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .ef-calc-input-wrap { display: flex; align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .ef-calc-input-wrap span { padding: .65rem .8rem; font-size: 14px; color: var(--muted); background: var(--border); flex-shrink: 0; } .ef-calc-input-wrap input { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); border: none; background: none; padding: .65rem .8rem; width: 100%; min-width: 0; } .ef-calc-input-wrap input:focus { outline: none; } .ef-calc-field-note { font-size: 11.5px; color: var(--muted); font-weight: 300; margin-top: .4rem; line-height: 1.5; } .ef-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; } @media (max-width: 700px) { .ef-grid { grid-template-columns: 1fr; } } .ef-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } @media (max-width: 900px) { .ef-grid-3 { grid-template-columns: 1fr; } } .ef-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; } .ef-card-head { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .6rem; } .ef-card-badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 99px; background: var(--amber-light); color: var(--amber-dark); } .ef-card-badge-full { background: var(--audit-future-light); color: var(--audit-future); } .ef-card-amount { font-family: var(--font-headline); font-size: 2rem; letter-spacing: .02em; color: var(--ink); line-height: 1; margin-bottom: .75rem; } .ef-card-progress-track { background: var(--cream2); border-radius: 99px; height: 8px; overflow: hidden; margin-bottom: .6rem; } .ef-card-progress-fill { height: 100%; background: var(--amber); border-radius: 99px; transition: width .3s ease; } .ef-card-progress-fill-full { background: var(--audit-future); } .ef-card-meta { font-size: 13px; color: var(--ink2); font-weight: 300; line-height: 1.6; } .ef-card-meta strong { font-weight: 600; color: var(--ink); } .audit-tool .ef-calc-footer { margin-top: 1.25rem; font-size: 13px; color: var(--muted); font-weight: 300; } .audit-tool .ef-calc-footer a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ MONTHLY REVIEW CHECKLIST (Lesson 7) ============================================================ */ .audit-tool .review-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .audit-tool .review-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem; } .audit-tool .review-check { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: 14.5px; color: var(--ink); font-weight: 500; line-height: 1.5; margin-bottom: .6rem; } .audit-tool .review-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--amber); cursor: pointer; } .audit-tool .review-check small { display: block; font-weight: 300; color: var(--muted); font-size: 12.5px; margin-top: .25rem; line-height: 1.5; } .audit-tool .review-note { font-family: var(--font-body); font-size: 13.5px; color: var(--ink); background: var(--cream2); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .75rem; width: 100%; box-sizing: border-box; } .audit-tool .review-note:focus { outline: none; border-color: var(--amber-mid); } .audit-tool .review-action-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .audit-tool .review-mark-btn { background: var(--ink); color: var(--cream); border: none; border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: .75rem 1.4rem; cursor: pointer; transition: background .2s; font-family: var(--font-body); } .audit-tool .review-mark-btn:hover { background: var(--ink2); } .audit-tool .review-mark-btn:disabled { opacity: .45; cursor: not-allowed; } .audit-tool .review-reset-btn { background: var(--white); color: var(--ink2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: .75rem 1.4rem; cursor: pointer; transition: border-color .2s, color .2s; font-family: var(--font-body); } .audit-tool .review-reset-btn:hover { border-color: var(--amber-mid); color: var(--ink); } /* ============================================================ COURSE COMPLETE BOX (Lesson 7) ============================================================ */ .course-complete-box { background: var(--ink); color: var(--cream); border-radius: var(--radius-md); padding: 1.75rem 2rem; margin: 2rem 0; text-align: center; } .course-complete-box .cc-trophy { font-size: 2.5rem; margin-bottom: .5rem; } .course-complete-box .cc-title { font-family: var(--font-headline); font-size: 1.5rem; letter-spacing: .02em; color: var(--cream); margin-bottom: .6rem; } .course-complete-box .cc-text { font-size: 14.5px; font-weight: 300; line-height: 1.7; color: var(--muted-light); max-width: 560px; margin: 0 auto; } .course-complete-box .cc-text strong { color: var(--cream); font-weight: 600; } /* ============================================================ COURSE INDEX: WHY THIS COURSE WORKS (feature grid) ============================================================ */ .course-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } @media (max-width: 780px) { .course-feature-grid { grid-template-columns: 1fr; } } .course-feature-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem 1.4rem; } .course-feature-icon { font-size: 1.75rem; margin-bottom: .75rem; } .course-feature-title { font-family: var(--font-headline); font-size: 1.05rem; letter-spacing: .02em; color: var(--ink); margin-bottom: .5rem; } .course-feature-desc { font-size: 13.5px; color: var(--ink2); font-weight: 300; line-height: 1.7; } /* ============================================================ COURSE INDEX: "IS THIS COURSE FOR YOU" BOX ============================================================ */ .course-for { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2.25rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .course-for-title { font-family: var(--font-headline); font-size: 1.3rem; letter-spacing: .03em; color: var(--ink); margin-bottom: 1.1rem; } .course-for ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; } .course-for li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink2); font-weight: 300; line-height: 1.6; } .course-for li::before { content: '→'; color: var(--amber-dark); font-weight: 700; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-light); display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px; } /* ============================================================ KEY-TERM REFERENCE BOX — term + explanation pairs. NOT the same as .course-for / .course-outcomes: those are for short, single-line bullets. The moment a list item is "Bold Term: long explanation," use this instead — a bold multi-word term run inline with a long description wraps awkwardly (label eats 2-3 lines before the explanation even starts). Stacking term above description fixes that regardless of container width. Two icon variants: default is an arrow (→), add .check for a checkmark (✓). Add .cream for the cream2 background variant; default is white. ============================================================ */ .keyterm-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.5rem, 4vw, 2.25rem); margin: 1.5rem 0 2rem; } .keyterm-box.cream { background: var(--cream2); } .keyterm-box-title { font-family: var(--font-headline); font-size: 1.3rem; letter-spacing: .03em; color: var(--ink); margin-bottom: 1.1rem; } .keyterm-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; } .keyterm-item { display: flex; gap: 12px; align-items: flex-start; } .keyterm-item::before { content: '→'; color: var(--amber-dark); font-weight: 700; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--amber-light); display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 1px; } .keyterm-list.check .keyterm-item::before { content: '✓'; } .keyterm-body { flex: 1; min-width: 0; } .keyterm-term { display: block; font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 3px; } .keyterm-desc { display: block; font-weight: 300; color: var(--ink2); font-size: 14.5px; line-height: 1.6; } /* ============================================================ COURSE INDEX: LESSON ITEM TOOL BADGE ============================================================ */ .lesson-item-tool { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--amber-dark); background: var(--amber-light); border-radius: 99px; padding: .2rem .65rem; margin-top: .5rem; } /* ============================================================ COURSE INDEX: FREE TOOLS & DOWNLOADS GRID ============================================================ */ .course-body .related-card-img-placeholder { display: flex; align-items: center; justify-content: center; font-size: 2rem; } /* ============================================================ LESSON CONTENT TABLES ============================================================ */ .lesson-table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; border: 1px solid var(--border); border-radius: var(--radius-md); } .lesson-table-wrap .lesson-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; margin: 0; } .lesson-table-wrap .table-scroll-wrap { margin: 0; } .lesson-table th { background: var(--ink); color: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: .75rem 1rem; white-space: nowrap; } .lesson-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--ink2); font-weight: 300; vertical-align: top; background: var(--white); } .lesson-table td:last-child { border-right: none; } .lesson-table tr:last-child td { border-bottom: none; } .lesson-table td strong { color: var(--ink); font-weight: 600; } .lesson-table-note { font-size: 12px; color: var(--muted); font-weight: 300; margin: -1.25rem 0 2rem; font-style: italic; } /* ============================================================ CHRONOTYPE QUICK-CHECK (Sleep Better — Lesson 1) ============================================================ */ .ctq-progress-track { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 1.5rem; } .ctq-progress-fill { height: 100%; background: var(--amber); border-radius: 99px; width: 0%; transition: width .3s var(--ease); } .ctq-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; } .ctq-qnum { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .6rem; } .ctq-qtext { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 1.1rem; line-height: 1.45; } .ctq-options { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; } .ctq-opt { display: block; width: 100%; text-align: left; padding: .85rem 1.1rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--cream2); color: var(--ink2); font-size: .92rem; cursor: pointer; transition: all .15s ease; line-height: 1.5; font-family: inherit; } .ctq-opt:hover { border-color: var(--amber-mid); } .ctq-opt.selected { border-color: var(--amber); background: var(--amber-light); color: var(--ink); font-weight: 600; } .ctq-nav-row { display: flex; gap: .75rem; } .ctq-btn { padding: .85rem 1.4rem; border-radius: var(--radius); border: none; font-size: .9rem; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: .02em; transition: background .2s, border-color .2s, color .2s; } .ctq-btn-primary { background: var(--ink); color: var(--cream); flex: 1; } .ctq-btn-primary:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; } .ctq-btn-secondary { background: var(--white); color: var(--ink2); border: 1px solid var(--border); flex: 0 0 auto; min-width: 90px; } .ctq-btn-secondary:hover { border-color: var(--amber-mid); color: var(--ink); } .ctq-result-hero { text-align: center; padding: 1.75rem 1.5rem; background: var(--ink); border-radius: var(--radius-md); margin-bottom: 1.5rem; } .ctq-result-emoji { font-size: 3rem; line-height: 1; margin-bottom: .4rem; } .ctq-result-type { font-family: var(--font-headline); font-size: 1.6rem; color: var(--cream); letter-spacing: .03em; margin-bottom: .3rem; } .ctq-result-pct { font-size: .8rem; color: var(--amber); font-weight: 600; } .ctq-result-desc { font-size: .9rem; color: rgba(250,248,243,.7); margin-top: .65rem; line-height: 1.6; max-width: 480px; margin-inline: auto; } .ctq-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .85rem; margin-bottom: 1.25rem; } @media (max-width: 560px) { .ctq-stats { grid-template-columns: 1fr; } } .ctq-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; text-align: center; } @media (max-width: 560px) { .ctq-stat { text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } } .ctq-stat-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .3rem; } .ctq-stat-value { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.4; } .ctq-retake { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--amber-dark); font-size: .85rem; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; text-underline-offset: 2px; } .ctq-result-footer { margin-top: 1.25rem; text-align: center; font-size: 13px; color: var(--muted); font-weight: 300; } .ctq-result-footer a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; } .ctq-hidden { display: none !important; } /* ============================================================ SLEEP CYCLE CALCULATOR WIDGET (Lesson 2) ============================================================ */ .scc-toggle { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .scc-toggle-btn { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink2); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem 1.1rem; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .scc-toggle-btn.active { border-color: var(--amber); background: var(--amber-light); color: var(--amber-dark); } .scc-input-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.5rem; max-width: 240px; } .scc-label { font-size: 12px; font-weight: 600; color: var(--ink2); } .scc-time-input { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; width: 100%; appearance: auto; } .scc-time-input:focus { outline: none; border-color: var(--amber-mid); } .scc-results { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; border-top: 1px solid var(--border-dark); padding-top: 1.5rem; } @media (max-width: 640px) { .scc-results { grid-template-columns: repeat(2,1fr); } } .scc-result-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem .75rem; text-align: center; } .scc-result-card.is-ideal { border-color: var(--amber); background: var(--amber-light); } .scc-result-time { display: block; font-family: var(--font-headline); font-size: 1.25rem; color: var(--ink); letter-spacing: .02em; margin-bottom: .3rem; } .scc-result-cycles { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } .scc-result-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 99px; background: var(--border); color: var(--ink2); } .scc-result-card.is-ideal .scc-result-tag { background: var(--amber); color: var(--white); } .scc-note { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 1.1rem; text-align: center; } /* ══ Wind-Down Routine Builder (Lesson 3) ══ */ .wdr-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .wdr-field { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .4rem; } .wdr-label { font-size: 12px; font-weight: 600; color: var(--ink2); } .wdr-time-input, .wdr-select { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; width: 100%; appearance: auto; } .wdr-time-input:focus, .wdr-select:focus { outline: none; border-color: var(--amber-mid); } .wdr-timeline { display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid var(--border-dark); padding-top: 1.5rem; } .wdr-step { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; align-items: center; } @media (max-width: 560px) { .wdr-step { grid-template-columns: 70px 1fr; gap: .75rem; padding: .8rem .9rem; } } .wdr-step.is-final { border-color: var(--amber); background: var(--amber-light); } .wdr-step-time { font-family: var(--font-headline); font-size: 1.15rem; color: var(--ink); text-align: center; } .wdr-step-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .25rem; } .wdr-step-desc { font-size: 13.5px; color: var(--ink2); font-weight: 300; line-height: 1.5; } .wdr-note { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 1.1rem; text-align: center; } /* ══ Sleep Environment Score (Lesson 4) ══ */ .sea-questions { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.5rem; } .sea-question { display: flex; flex-direction: column; gap: .4rem; } .sea-question-label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .sea-select { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; width: 100%; appearance: auto; } .sea-select:focus { outline: none; border-color: var(--amber-mid); } .sea-result { border-top: 1px solid var(--border-dark); padding-top: 1.5rem; } .sea-score-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .sea-score-num { font-family: var(--font-headline); font-size: 2.6rem; line-height: 1; color: var(--ink); } .sea-score-band { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 99px; margin-bottom: .35rem; } .sea-band-great { background: #e8f5ee; color: #2d6a4f; } .sea-band-good { background: var(--amber-light); color: var(--amber-dark); } .sea-band-poor { background: #fdf0ee; color: #c0392b; } .sea-score-label { font-size: 13px; color: var(--ink2); font-weight: 300; max-width: 360px; display: block; } .sea-priority-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .6rem; } .sea-priority-item { display: flex; gap: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; align-items: flex-start; } .sea-priority-rank { font-family: var(--font-headline); font-size: 1.1rem; color: var(--amber-dark); flex-shrink: 0; } .sea-priority-text { font-size: 13.5px; color: var(--ink2); font-weight: 300; line-height: 1.5; } .sea-note { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 1rem; text-align: center; } /* ══ Sleep Sabotage Score (Lesson 5) ══ */ .ses-questions { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.5rem; } .ses-question { display: flex; flex-direction: column; gap: .4rem; } .ses-question-label { font-size: 13.5px; font-weight: 600; color: var(--ink); } .ses-select { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; width: 100%; appearance: auto; } .ses-select:focus { outline: none; border-color: var(--amber-mid); } .ses-result { border-top: 1px solid var(--border-dark); padding-top: 1.5rem; } .ses-score-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .ses-score-num { font-family: var(--font-headline); font-size: 2.6rem; line-height: 1; color: var(--ink); } .ses-score-band { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 99px; margin-bottom: .35rem; } .ses-band-great { background: #e8f5ee; color: #2d6a4f; } .ses-band-good { background: var(--amber-light); color: var(--amber-dark); } .ses-band-poor { background: #fdf0ee; color: #c0392b; } .ses-score-label { font-size: 13px; color: var(--ink2); font-weight: 300; max-width: 360px; display: block; } .ses-priority-title { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dark); margin-bottom: .6rem; } .ses-priority-item { display: flex; gap: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; align-items: flex-start; } .ses-priority-rank { font-family: var(--font-headline); font-size: 1.1rem; color: var(--amber-dark); flex-shrink: 0; } .ses-priority-text { font-size: 13.5px; color: var(--ink2); font-weight: 300; line-height: 1.5; } .ses-note { font-size: 12px; color: var(--muted); font-weight: 300; margin-top: 1rem; text-align: center; }