400;600;700&family=Playfair+Display:wght@700&display=swap'); body { font-family: system-ui, sans-serif; background-color: #fafaf9; color: #1c1917; } h1, h2, h3, .serif-font { font-family: Georgia, serif; } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; } @media (min-width: 768px) { .chart-container { height: 350px; } } html { scroll-behavior: smooth; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #fafaf9; } ::-webkit-scrollbar-thumb { background: #a8a29e; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #78716c; } .step-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .step-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .active-nav { background-color: #e7e5e4; border-left: 4px solid #b91c1c; font-weight: 600; } :root { --rh-ink:#30251e; --rh-muted:#74665c; --rh-line:#e6d6c4; --rh-paper:#fffdf9; --rh-soft:#f8f0e6; --rh-wood:#7a4325; --rh-wood-dark:#3b2518; --rh-wood-deep:#2a180f; --rh-wood-light:#c88a52; --rh-copper:#9a5b2f; --rh-gold:#d69a3d; --rh-cream:#fff8ee; --rh-green:#61745a; --rh-shadow:0 16px 42px rgba(72,42,24,.13); --rh-shadow-soft:0 9px 26px rgba(72,42,24,.09); } html { scroll-padding-top: 86px; } body { color:var(--rh-ink) !important; background: radial-gradient(circle at 12% 5%, rgba(214,154,61,.08), transparent 25%), linear-gradient(180deg,#fffdf9 0%,#fffaf4 42%,#f7eee4 100%) !important; } body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.22; background: repeating-linear-gradient(96deg,transparent 0 52px,rgba(122,67,37,.035) 53px,transparent 55px 108px), repeating-linear-gradient(4deg,transparent 0 170px,rgba(122,67,37,.025) 171px,transparent 174px 340px); } ::selection { background:#ecd2b6 !important; color:#3b2518 !important; } ::-webkit-scrollbar-track { background:#f7eee4; } ::-webkit-scrollbar-thumb { background:#bc8a62; } ::-webkit-scrollbar-thumb:hover { background:#8f5632; } .lg\:hidden.fixed.top-0 { background:linear-gradient(112deg,#2a180f 0%,#5a311d 50%,#8a4d2a 100%) !important; border-bottom-color:rgba(255,255,255,.12) !important; box-shadow:0 10px 30px rgba(42,24,15,.22); } .lg\:hidden.fixed.top-0 span, .lg\:hidden.fixed.top-0 button { color:#fff8ee !important; } #mobile-menu { background: radial-gradient(circle at 85% 10%,rgba(214,154,61,.16),transparent 30%), linear-gradient(145deg,#fffdf9,#f4e6d7) !important; } #mobile-menu .mobile-link { color:#5f351f !important; font-weight:700; } #close-menu-btn { color:#7a4325 !important; } nav.hidden.lg\:flex { background: linear-gradient(rgba(42,24,15,.97),rgba(66,36,21,.97)), repeating-linear-gradient(96deg,transparent 0 34px,rgba(255,255,255,.045) 35px,transparent 38px 74px) !important; border-right:1px solid #9b6b48 !important; box-shadow:10px 0 35px rgba(52,28,15,.14); color:#fff8ee; } nav.hidden.lg\:flex > div:first-child { border-bottom-color:rgba(255,255,255,.12) !important; } nav.hidden.lg\:flex > div:first-child h1 { color:#fff7ea !important; text-shadow:0 2px 14px rgba(0,0,0,.24); } nav.hidden.lg\:flex > div:first-child p { color:#e1bb91 !important; } nav.hidden.lg\:flex .nav-item { color:#e8d7c7 !important; border-left-color:transparent !important; } nav.hidden.lg\:flex .nav-item span { color:#caa782 !important; } nav.hidden.lg\:flex .nav-item:hover { color:#fff !important; background:rgba(255,255,255,.07) !important; border-left-color:#d69a3d !important; text-decoration:none; } nav.hidden.lg\:flex .active-nav { color:#fff !important; background:linear-gradient(90deg,rgba(214,154,61,.22),rgba(255,255,255,.045)) !important; border-left:4px solid #e1ad59 !important; box-shadow:inset 0 0 20px rgba(255,255,255,.025); } nav.hidden.lg\:flex .active-nav span { color:#f1c987 !important; } nav.hidden.lg\:flex > div:last-child { border-top-color:rgba(255,255,255,.12) !important; } nav.hidden.lg\:flex > div:last-child div { color:#c6aa90 !important; } main { position:relative; } main > header { max-width:1000px !important; margin-top:10px; padding:44px 42px 38px !important; border:1px solid #dfc8ae !important; border-bottom:1px solid #d6b895 !important; border-radius:24px; background: radial-gradient(circle at 90% 15%,rgba(214,154,61,.16),transparent 27%), linear-gradient(145deg,#fffdf9 0%,#f8eadb 100%); box-shadow:var(--rh-shadow); overflow:hidden; position:relative; } main > header::after { content:"HGGSP"; position:absolute; right:-16px; bottom:-43px; font-family:Georgia,serif; font-weight:700; font-size:120px; line-height:1; color:rgba(122,67,37,.045); pointer-events:none; } main > header > div:first-child { background:linear-gradient(135deg,#efe0cc,#f9eddd) !important; color:#7a4325 !important; border:1px solid #dec19d; box-shadow:0 5px 15px rgba(93,49,24,.08); } main > header h1 { color:#3b2518 !important; } main > header h1 span { color:#9a5b2f !important; } main > header p { color:#6f5b4e !important; } section > .flex.items-center.mb-6 > span:first-child { color:#d7b18c !important; text-shadow:0 2px 0 #fff; } section > .flex.items-center.mb-6 h2 { color:#3b2518 !important; } section > .flex.items-center.mb-6 p { color:#8b715f !important; } section .bg-white, .step-card, #resourceGrid > div { background:linear-gradient(145deg,#fff 18%,#fff9f2 100%) !important; border-color:#e5d1ba !important; box-shadow:var(--rh-shadow-soft) !important; } section .rounded-xl { border-radius:18px !important; } section .rounded-lg { border-radius:12px !important; } .step-card:hover, #resourceGrid > div:hover { transform:translateY(-4px); border-color:#c99569 !important; box-shadow:0 16px 34px rgba(72,42,24,.15) !important; } .bg-stone-50 { background-color:#fbf3e9 !important; } .bg-stone-100 { background-color:#f4e6d7 !important; } .bg-stone-200 { background-color:#ead7c3 !important; } .border-stone-100 { border-color:#efe0d0 !important; } .border-stone-200,.border-stone-300 { border-color:#e0c7ad !important; } .text-stone-900,.text-stone-800 { color:#3b2518 !important; } .text-stone-700 { color:#59463a !important; } .text-stone-600 { color:#6f5b4e !important; } .text-stone-500,.text-stone-400 { color:#8c7768 !important; } .text-stone-200 { color:#d7b18c !important; } .text-red-900,.text-red-800,.text-red-700 { color:#8a4d2a !important; } .bg-red-50 { background-color:#f9ecdf !important; } .bg-red-100,.bg-red-200 { background-color:#f0dcc6 !important; } .border-red-100,.border-red-300 { border-color:#d7ad85 !important; } .bg-red-800,.bg-red-900 { background:linear-gradient(135deg,#9a5b2f,#6f3b20) !important; } .hover\:bg-red-900:hover { background:linear-gradient(135deg,#ad6b3c,#7a4325) !important; } .hover\:text-red-800:hover { color:#9a5b2f !important; } .hover\:border-red-300:hover { border-color:#c78e61 !important; } .bg-amber-50,.bg-amber-100 { background-color:#fff3dd !important; } .text-amber-800,.text-amber-900 { color:#84571f !important; } .border-amber-100,.border-amber-400 { border-color:#d9aa58 !important; } .bg-green-100 { background-color:#eaf0e4 !important; } .text-green-700,.text-green-800 { color:#5b6d53 !important; } .bg-blue-50 { background-color:#f0e8df !important; } .text-blue-800,.text-blue-900 { color:#654731 !important; } .border-blue-100 { border-color:#dfc9b4 !important; } button.bg-stone-800, .bg-stone-800 { background:linear-gradient(135deg,#5e3925,#382116) !important; color:#fff !important; } button.bg-stone-800:hover,.hover\:bg-stone-700:hover { background:linear-gradient(135deg,#75472d,#4a2b1b) !important; } button { transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } button:hover { transform:translateY(-1px); } #startTimerBtn,#toggleCurveBtn { box-shadow:0 9px 20px rgba(93,49,24,.18) !important; } #resetTimerBtn { background:#fffaf4 !important; border-color:#d9bea3 !important; color:#6f4a32 !important; } #timerDisplay { color:#3b2518 !important; } #timerStatus { color:#8c715e !important; } #pomodoroCanvas { filter:drop-shadow(0 8px 12px rgba(72,42,24,.08)); } .chart-container { background:linear-gradient(145deg,#fffaf4,#f6e7d8) !important; border-color:#dec3a5 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); } #step5 .group > div { background:linear-gradient(145deg,#fffaf4,#f8ecde) !important; border-color:#e1cab2 !important; } #step5 .group:hover > div { border-color:#bb8052 !important; box-shadow:0 8px 20px rgba(82,44,23,.08); } #step5 .group .bg-white { background:linear-gradient(145deg,#9a5b2f,#6f3b20) !important; color:#fff !important; border-color:#a66b43 !important; } #step6 .mb-6.flex button { border-color:#d8b895 !important; } #step6 .mb-6.flex button:first-child { background:linear-gradient(135deg,#5d3823,#342015) !important; } #resourceGrid > div { border-radius:15px !important; } main > footer { border-top-color:#d9c2aa !important; position:relative; } main > footer p:first-child { color:#4a2c1b !important; } main > footer::before { content:""; display:block; width:68px; height:4px; margin:0 auto 30px; border-radius:999px; background:linear-gradient(90deg,#6e3d22,#d69a3d,#6e3d22); } section { position:relative; } section::before { content:""; position:absolute; left:-28px; top:22px; width:7px; height:58px; border-radius:999px; background:linear-gradient(180deg,#d69a3d,#8b4f2c); opacity:.72; } @media (max-width: 1023px) { main > header { padding:34px 24px 30px !important; border-radius:18px; } main > header::after { font-size:76px; bottom:-26px; } section::before { display:none; } } @media (max-width: 640px) { main { padding-left:15px !important; padding-right:15px !important; } main > header { padding:27px 18px 25px !important; } main > header h1 { font-size:34px !important; } main > header p { font-size:17px !important; } section .p-8 { padding:20px !important; } .step-card { padding:20px !important; } section > .flex.items-center.mb-6 > span:first-child { font-size:44px !important; margin-right:12px !important; } }