/* -------------------------------------- 1) CSS Variables & Theme Definitions -------------------------------------- */ :root { /* Light mode colors */ --color-primary: #825415; --color-primary-hover: #A0561A; --color-background: #F2F2F2; /* Grey background */ --color-light: #FFFFFF; --color-text: #1A1A1A; --color-muted: #000000; --color-heading: #111111; /* Dark mode colors */ --dark-background: #1E1E1E; --dark-light: #2A2A2A; --dark-text: #E0E0E0; --dark-muted: #AAAAAA; --max-width: 1200px; --transition-speed: 0.3s; } /* Base reset */ * { margin: 0; padding: 0; box-sizing: border-box; transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed); } html { scroll-behavior: smooth; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; background-color: var(--color-background); color: var(--color-text); overflow-x: hidden; /* prevent horizontal sliding */ } /* Dark mode toggle: when .dark is on */ body.dark { background-color: var(--dark-background); color: var(--dark-text); } /* -------------------------------------- 2) Utility Classes -------------------------------------- */ .container { width: 90%; max-width: var(--max-width); margin: 0 auto; } h1, h2, h3, h4 { margin-bottom: 0.5rem; color: var(--color-heading); } body.dark h1, body.dark h2, body.dark h3, body.dark h4 { color: var(--dark-text); } p { margin-bottom: 1rem; color: var(--color-muted); } body.dark p { color: var(--dark-muted); } a { text-decoration: none; } button { cursor: pointer; border: none; outline: none; transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed); } /* -------------------------------------- 3) Buttons & Links (Animations & Shadow) -------------------------------------- */ .btn-primary { background-color: var(--color-primary); color: var(--color-light); padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-primary:hover { background-color: var(--color-primary-hover); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .btn-secondary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); padding: 0.65rem 1.3rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-secondary:hover { background-color: var(--color-primary); color: var(--color-light); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .btn-download { background-color: #3bccff; color: #1a1a1a; padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-download:hover { background-color: #25a8d1; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } /* Dark mode button adjustments */ body.dark .btn-primary { background-color: var(--dark-light); color: var(--dark-text); } body.dark .btn-primary:hover { background-color: var(--dark-text); color: var(--dark-light); } body.dark .btn-secondary { color: var(--dark-muted); border-color: var(--dark-muted); } body.dark .btn-secondary:hover { background-color: var(--dark-muted); color: var(--dark-text); } body.dark .btn-download { background-color: #287f9a; color: var(--dark-text); } body.dark .btn-download:hover { background-color: #1e5f72; } /* -------------------------------------- 4) Layout & Sections -------------------------------------- */ .section { padding: 4rem 0; } .section-light { background-color: var(--color-light); } .section-grey { background-color: var(--color-background); } body.dark .section-light { background-color: var(--dark-light); } body.dark .section-grey { background-color: var(--dark-background); } /* -------------------------------------- 5) Header / Navbar -------------------------------------- */ header { background-color: var(--color-light); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 100; } body.dark header { background-color: var(--dark-light); } .nav-container { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .logo { font-size: 1.5rem; font-weight: bold; color: var(--color-primary); order: 0; /* logo first */ } body.dark .logo { color: var(--dark-text); } /* Day/Night Toggle icon */ #theme-toggle { font-size: 1.4rem; cursor: pointer; color: var(--color-text); order: 1; margin-left: 1rem; margin-right: 1rem; } body.dark #theme-toggle { color: var(--dark-text); } /* Navigation list (desktop) */ nav ul { list-style: none; display: flex; /* horizontal row on desktop */ gap: 1.5rem; align-items: center; order: 3; /* last in flex order */ } nav li a { font-weight: 500; color: var(--color-text); } body.dark nav li a { color: var(--dark-text); } nav li a:hover { color: var(--color-primary); } body.dark nav li a:hover { color: var(--color-light); } /* Hamburger toggle (mobile) */ .mobile-toggle { display: none; /* show on mobile only */ font-size: 1.5rem; cursor: pointer; color: var(--color-text); order: 2; /* sits after theme-toggle on mobile */ margin-left: auto; margin-right: 1rem; } body.dark .mobile-toggle { color: var(--dark-text); } /* -------------------------------------- 6) Mobile-specific overrides (<= 768px) /* -------------------------------------- Mobile-specific overrides (<= 768px) -------------------------------------- */ @media (max-width: 1200px) { /* 1) Show the hamburger icon */ .mobile-toggle { display: block; } /* 2) Hide the desktop nav by default */ nav ul { display: none; /* hide completely */ position: absolute; top: 90%; /* drop right below header */ left: 0; width: 70%; /* full width of viewport */ background-color: var(--color-light); flex-direction: column; /* vertical list */ z-index: 200; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: calc(100vh - 60px); overflow-y: auto; } body.dark nav ul { background-color: var(--dark-light); } /* 3) When JS toggles .open, show it */ nav ul.open { display: flex; /* revert to flex for vertical stacking */ } nav li { padding: 1rem; border-bottom: 1px solid #e0e0e0; } body.dark nav li { border-bottom-color: #333333; } /* 4) Prevent the desktop flex layout on the