400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap'); body { font-family: system-ui, sans-serif; background-color: #f8fafc; color: #0f172a; } h1, h2, h3, .heading-font { font-family: Georgia, serif; } .chart-container { position: relative; width: 100%; max-width: 350px; margin-left: auto; margin-right: auto; height: 250px; max-height: 300px; } .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid #e2e8f0; } .step-number { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .nav-active { background-color: #eff6ff; color: #2563eb; border-left: 4px solid #2563eb; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hover-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .hover-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } :root { --rh-ink: #2f2118; --rh-brown-950: #28180f; --rh-brown-900: #382218; --rh-brown-800: #4a2d1d; --rh-brown-700: #6a4128; --rh-copper: #9a5b2f; --rh-copper-dark: #7d4525; --rh-gold: #d0a15b; --rh-gold-soft: #ead6ae; --rh-cream: #f5efe4; --rh-paper: #fffaf1; --rh-paper-2: #f8f0e3; --rh-line: #dfccb1; --rh-green: #526b55; --rh-red: #9a493a; --rh-shadow: 0 18px 45px rgba(58, 35, 21, .12); } html { background: var(--rh-cream); } body { color: var(--rh-ink); background: radial-gradient(circle at 15% 0%, rgba(208,161,91,.12), transparent 30%), linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)), repeating-linear-gradient( 90deg, rgba(106,65,40,.025) 0px, rgba(106,65,40,.025) 1px, transparent 1px, transparent 18px ), var(--rh-cream); } ::selection { background: var(--rh-gold-soft); color: var(--rh-brown-950); } ::-webkit-scrollbar-track { background: #eadfce; } ::-webkit-scrollbar-thumb { background: var(--rh-copper); } ::-webkit-scrollbar-thumb:hover { background: var(--rh-brown-700); } body > div.lg\:hidden.fixed.top-0 { background: linear-gradient(135deg, rgba(45,27,17,.97), rgba(77,45,27,.97)) !important; border-color: rgba(234,214,174,.22) !important; color: #fff7ea; box-shadow: 0 10px 28px rgba(35,20,12,.24); } body > div.lg\:hidden.fixed.top-0 span, body > div.lg\:hidden.fixed.top-0 button { color: #fff7ea !important; } #mobile-menu { background: linear-gradient(rgba(43,25,16,.96), rgba(70,41,25,.97)), repeating-linear-gradient( 0deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 2px, transparent 2px, transparent 20px ) !important; } #mobile-menu .mobile-link { color: #f8ead5 !important; border-color: rgba(232,202,158,.18) !important; } #close-menu { color: #ecd2aa !important; } nav.hidden.lg\:flex { background: linear-gradient(180deg, rgba(45,27,17,.98), rgba(61,35,21,.98)), repeating-linear-gradient( 90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 17px ) !important; border-color: rgba(217,181,129,.18) !important; box-shadow: 12px 0 34px rgba(47,31,20,.10); } nav.hidden.lg\:flex > div:first-child, nav.hidden.lg\:flex > div:last-child { background: transparent !important; border-color: rgba(231,199,153,.16) !important; } nav.hidden.lg\:flex h1 { color: #fff5e7 !important; } nav.hidden.lg\:flex p, nav.hidden.lg\:flex span { color: #d8bd99 !important; } .nav-item { color: #d7c4aa !important; border-left-color: transparent !important; } .nav-item:hover { color: #fff5e7 !important; background: rgba(208,161,91,.10) !important; } .nav-active { color: #fff7ec !important; background: linear-gradient(90deg, rgba(154,91,47,.38), rgba(154,91,47,.08)) !important; border-left: 4px solid var(--rh-gold) !important; } main > header > div { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 15%, rgba(216,174,108,.22), transparent 30%), linear-gradient(135deg, #382218 0%, #5b3420 52%, #7a492a 100%) !important; border: 1px solid rgba(236,207,165,.28); box-shadow: 0 24px 60px rgba(57,34,21,.22); } main > header > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 8deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 2px, transparent 2px, transparent 18px ); } main > header h2 { color: #fff7ed !important; } main > header .grid > div { background: rgba(255,248,236,.075) !important; border: 1px solid rgba(235,208,168,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } main > header .grid p, main > header .mt-6 { color: #ead7bc !important; } main > header .mt-6 { background: rgba(36,21,13,.20) !important; border-color: rgba(235,208,168,.20) !important; } section h2, section h3, section h4 { color: var(--rh-brown-900) !important; } section > div:first-child > span.flex-shrink-0 { background: linear-gradient(145deg, var(--rh-brown-900), var(--rh-copper)) !important; color: #fff7ec !important; border-radius: 14px !important; box-shadow: 0 8px 18px rgba(67,39,23,.18); } section p, section li, section label, section td, section th { color: #5a493c; } .glass-panel, section .bg-white, section .bg-slate-50, section .bg-blue-50\/50 { background: rgba(255,250,241,.96) !important; border-color: var(--rh-line) !important; box-shadow: 0 12px 32px rgba(73,46,29,.08); } .hover-card:hover { transform: translateY(-4px); box-shadow: var(--rh-shadow); border-color: #c9a579 !important; } #step2 .grid > div { background: linear-gradient(180deg, #fffaf1 0%, #f7eddf 100%) !important; border-color: var(--rh-line) !important; } #step2 .grid > div > div:first-child { background: rgba(154,91,47,.09) !important; border-color: rgba(154,91,47,.16) !important; } #step2 .grid h3 { color: var(--rh-brown-800) !important; } #step2 .grid h3 span { background: #ead6ae !important; color: #633a23 !important; } button, .bg-slate-900, .bg-blue-600 { border-radius: 10px; } button.bg-slate-900, #step1 button, .tab-btn.active-tab { background: linear-gradient(135deg, var(--rh-brown-900), var(--rh-copper)) !important; color: #fff7ed !important; border-color: var(--rh-copper) !important; box-shadow: 0 8px 18px rgba(75,43,25,.14); } button.bg-slate-900:hover, #step1 button:hover { background: linear-gradient(135deg, #2b1a11, #814b2a) !important; } input[type="number"] { background: #fffdf9 !important; border-color: #cfb38e !important; color: var(--rh-ink) !important; box-shadow: inset 0 1px 3px rgba(78,49,31,.04); } input[type="number"]:focus { border-color: var(--rh-copper) !important; --tw-ring-color: rgba(154,91,47,.20) !important; } #step1 .chart-container + div span#finalScoreDisplay { color: var(--rh-copper) !important; } #step3 .grid > div { background: linear-gradient(180deg, #fffaf1, #f6ecde) !important; border-color: var(--rh-line) !important; } #step3 .grid > div h3 { color: var(--rh-brown-900) !important; } #step3 .grid > div p { color: #725943 !important; } #step3 .grid > div > div:last-child { background: #efe0c9 !important; color: var(--rh-brown-800) !important; } #step4 > div.bg-white { overflow: hidden; } #step4 .tab-btn { color: #795d48 !important; border-bottom-color: transparent !important; } #step4 .tab-btn:hover { background: #f3e5d2 !important; color: var(--rh-copper-dark) !important; } #step4 .tab-btn.active-tab, #step4 .tab-btn.text-blue-600 { background: #f2e2cc !important; color: var(--rh-copper-dark) !important; border-bottom-color: var(--rh-copper) !important; } #step5 table { background: #fffaf1; } #step5 thead tr { background: #efe1cd !important; } #step5 th { color: #6b513e !important; border-color: #d8c1a1 !important; } #step5 tbody tr { border-color: #eadac3 !important; } #step5 tbody tr:hover { background: #f8eddd !important; } #step6 .space-y-4 > div { background: #fffaf1 !important; border-color: var(--rh-line) !important; } #step6 .space-y-4 > div > div.absolute { background: #d8b07a !important; color: #4a2d1d !important; } #step6 .space-y-4 > div:nth-child(3) > div.absolute { background: var(--rh-copper) !important; color: white !important; } #step7 > div.bg-white { background: linear-gradient(180deg, #fffaf1, #f7eddf) !important; } #step7 .border-l-2 { border-color: #cfb38e !important; } #step7 .absolute.rounded-full { background: var(--rh-copper) !important; border-color: #fffaf1 !important; } #step7 .bg-amber-50 { background: #f4e5cb !important; border-color: #c99049 !important; color: #654526 !important; } footer { border-color: var(--rh-line) !important; color: #806852 !important; } footer span { background: #efe1ce !important; color: #664832 !important; } .text-blue-600, .text-teal-600, .text-purple-600, .text-green-500, .text-amber-500 { color: var(--rh-copper) !important; } .bg-blue-100, .bg-blue-200, .bg-teal-100, .bg-purple-100, .bg-green-100, .bg-amber-100 { background: #ead7bb !important; } .text-blue-800, .text-teal-800, .text-purple-800, .text-green-800, .text-amber-800 { color: #68442a !important; } @media (max-width: 767px) { main { padding-left: 16px !important; padding-right: 16px !important; } main > header > div { padding: 24px !important; border-radius: 20px !important; } section .glass-panel { padding: 20px !important; } #step4 .tab-btn { padding-left: 16px !important; padding-right: 16px !important; } } body > div.lg\:hidden.fixed.top-0 button:hover, body > div.lg\:hidden.fixed.top-0 button:focus, body > div.lg\:hidden.fixed.top-0 button:focus-visible { background: rgba(255, 248, 238, .14) !important; color: #fff7ea !important; border-color: rgba(234, 214, 174, .28) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(214, 154, 61, .12) !important; } #close-menu:hover, #close-menu:focus, #close-menu:focus-visible { background: rgba(255, 248, 238, .10) !important; color: #fff7ea !important; outline: none !important; }