/* ======================================== ROOT VARIABLES -------------------------------------------------- 👇 SINGLE SOURCE OF TRUTH FOR PAGE BACKGROUND Change --background-light here to change the page background across every Playbook page. ======================================== */ :root { --primary: #009688; --secondary: #002F5B; --background-light: #ffffff; /* ← page background color */ --surface-light: #F3F4F6; --text-primary: #002F5B; --text-secondary: #4B5563; --border-light: #e5e7eb; --shadow-md: 0 8px 30px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10); --radius-md: 12px; --transition: all 0.3s ease; } /* ======================================== RESET -------------------------------------------------- body background is driven by --background-light. Do NOT add bg-* utility classes on the tag on individual pages — let this rule handle it so the color stays controlled from one place. ======================================== */ html, body { margin: 0; padding: 0; overflow-x: hidden; font-family: Inter, sans-serif; background: var(--background-light); color: var(--text-primary); } main { margin-top: 0; padding-top: 0; } /* ======================================== TYPOGRAPHY — MOBILE FIRST ======================================== */ .h1 { font-size: 1.875rem !important; line-height: 1.2 !important; font-weight: 700 !important; color: #0d9488 !important; margin-bottom: 0.5rem; } .h2 { font-size: 1.375rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: #0d9488 !important; } .h2-gray { font-size: 1.375rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: #111827 !important; } .h3 { font-size: 1.125rem !important; line-height: 1.4 !important; font-weight: 600 !important; color: #0f172a !important; } .h4-teal { font-size: 0.75rem !important; line-height: 1.4rem !important; font-weight: 600 !important; color: #0d9488 !important; } .p { font-size: 0.9375rem !important; line-height: 1.7 !important; font-weight: 400 !important; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .p-gray { font-size: 0.9375rem !important; line-height: 1.7 !important; font-weight: 400 !important; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } /* Desktop — bump up sizes */ @media (min-width: 768px) { .h1 { font-size: 2.5rem !important; /* 40px */ } .h2 { font-size: 1.575rem !important; /* 25.2px */ } .h2-gray { font-size: 1.875rem !important; } .h3 { font-size: 1.25rem !important; } .p { font-size: 1rem !important; } .p-gray { font-size: 1rem !important; } } @media (max-width: 767px) { .h1 { font-size: 2rem !important; /* 32px */ } .h2 { font-size: 1.25rem !important; /* 20px */ } } /* ======================================== COLOR HELPERS ======================================== */ .tc-teal { color: #0d9488; } .tc-dark { color: #0f172a; } .tc-body { color: #64748b; } .tc-muted { color: #475569; } .tc-slate { color: #334155; } /* ======================================== TYPOGRAPHY COLOR + SIZE HELPERS (combines color + responsive size) ======================================== */ .tc-body { font-size: 0.9375rem !important; line-height: 1.7 !important; font-weight: 400 !important; color: #64748b; } .tc-muted { font-size: 0.9375rem !important; line-height: 1.7 !important; color: #475569; } .tc-slate { font-size: 0.9375rem !important; line-height: 1.7 !important; color: #334155; } @media (min-width: 768px) { .tc-body { font-size: 1rem !important; } .tc-muted { font-size: 1rem !important; } .tc-slate { font-size: 1rem !important; } } /* ======================================== BACKGROUND HELPERS ======================================== */ .tc-bg-page { background-color: var(--background-light); } .tc-bg-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease; } .tc-bg-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* ======================================== COMMON CARD ======================================== */ .tc-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; background: #f8fafc; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .tc-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); transform: translateY(-4px); will-change: transform; } /* ======================================== COMMON TEXT ======================================== */ .tc-text { color: var(--text-secondary); line-height: 1.8; } /* ======================================== COMMON TITLE ======================================== */ .tc-title { color: var(--text-primary); font-weight: 700; line-height: 1.2; } /* ======================================== GRAY BACKGROUND UTILITY ======================================== */ .gray { background: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } /* ======================================== SCROLLBAR ======================================== */ .custom-scrollbar::-webkit-scrollbar { width: 5px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #b0bec5; } .qopt.cfb { background: #d1fae5 !important; color: #0f766e !important; border-color: #0f766e !important; } .qopt.wfb { background: #fee2e2 !important; color: #dc2626 !important; border-color: #dc2626 !important; } .qfb.cfb { background: #d1fae5 !important; color: #0f766e !important; } .qfb.wfb { background: #fee2e2 !important; color: #dc2626 !important; } .arrow-left { display: inline-block; width: 20px; height: 20px; background: url('../V2-res/image/arrow-left.svg') center center no-repeat; background-size: contain; } .arrow-right { display: inline-block; width: 20px; height: 20px; background: url('../V2-res/image/arrow-right.svg') center center no-repeat; background-size: contain; } .nav-arrow-btn { width: 64px; height: 64px; border: 1px solid #d1d5db; border-radius: 12px; background: #f8fafc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s ease; } .nav-arrow-btn:hover { background: #f1f5f9; }