/* ========================================= */ /* TOKEN DEFINITIONS — GLOBAL VARIABLES */ /* ========================================= */ :root { --bg-dark:#555555; /* Main purple brand color used in backgrounds (headers, accents) */ --text-light:#f2f2f2; /* Light gray-white text for contrast on dark backgrounds */ --accent:#555555; /* Accent color, same purple for consistency */ --panel:#bdbdbd; /* Light gray color used for main content panels */ --muted:#e9e9e9; /* Slightly lighter gray for muted or background elements */ --ora: #b4b5b4; --txt: #555555; --maxw: min(1600px, 95vw); /* Max width for centered sections — capped at 1600px or 95% of viewport */ --radius:14px; /* Default border radius for rounded corners */ --shadow:0 6px 20px rgba(0,0,0,.25); /* Soft drop shadow used throughout */ --buy-book-shift: 0px; /* adjust to move 'Purchase the Book' button horizontally */ } /* ========================================= */ /* THEME TOGGLE — ALT COLOR PALETTE (colors only) */ /* Add/remove the 'theme-alt' class on to switch palettes */ /* ========================================= */ html.theme-alt { /* Placeholder: currently using the previous "toggle" palette */ --bg-dark: #512C80; --accent: #512C80; --ora: #F47F20; --txt: #F47F20; /* Keep these here for completeness (same as default) */ --text-light: #f2f2f2; --panel: #bdbdbd; --muted: #e9e9e9; } /* ========================================= */ /* THEME TOGGLE — THIRD COLOR PALETTE (colors only) */ /* Add/remove the 'theme-alt2' class on to switch palettes */ /* ========================================= */ html.theme-alt2 { /* Random placeholder colors for the 3rd theme — tweak anytime */ --bg-dark: #73000a; --accent: #73000a; --ora: #a2a2a2; --txt: #73000a; /* Keep these here for completeness (same as default) */ --text-light: #f2f2f2; --panel: #bdbdbd; --muted: #e9e9e9; } /* ========================================= */ /* GLOBAL RESET AND DEFAULTS */ /* ========================================= */ *,*::before,*::after { box-sizing:border-box; } /* Ensures padding/border don’t increase element width */ html,body { margin:0; /* Remove default browser margins */ padding:0; /* Remove default padding */ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; /* Use system fonts for performance and modern look */ } /* ========================================= */ /* HERO SECTION — TOP HEADER AREA */ /* ========================================= */ .hero { background: var(--bg-dark); /* Purple background for the top hero area */ color: var(--text-light); /* White/light text for readability */ padding: 8px 0 8px; /* Top/bottom spacing */ } .hero-inner { margin:0 auto; /* Center horizontally */ padding:0 min(2vw); /* Horizontal padding: 5% of viewport or 32px (whichever smaller) */ } .hero h1 { margin:.25rem 0 0; /* Slight top margin, remove bottom margin */ font-size:50px; /* Responsive font size scaling between 28–56px */ line-height:1.05; /* Tight line spacing for title */ } .hero p { margin:.35rem 0 0; font-size: 25px; /* Small top margin */ opacity:.9; /* Slight transparency for subtitle text */ } /* ========================================= */ /* PURCHASE BUTTON (next to subtitle authors) */ /* Control horizontal position via: --buy-book-shift (px) */ /* ========================================= */ .subtitle-inline{ display:inline-flex; align-items:center; flex-wrap:wrap; } .buy-book-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; margin-left:12px; /* base spacing from authors */ transform: translateX(var(--buy-book-shift)); border-radius:999px; border:1px solid rgba(255,255,255,.65); color:var(--text-light); text-decoration:none; font-size:18px; line-height:1; background: rgba(0,0,0,.14); backdrop-filter: blur(2px); transition: transform .12s ease, background .15s ease, border-color .15s ease; } .buy-book-btn:hover{ background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); transform: translateX(var(--buy-book-shift)) translateY(-1px); } .buy-book-btn:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; } /* ========================================= */ /* NAVIGATION BAR (main site nav) */ /* ========================================= */ .nav { /* The main navigation bar container */ margin: 15px 4px 0; /* Add top margin 18px and small side spacing */ display: flex; /* Use flexbox to arrange nav items horizontally */ gap: 10px; /* Space between direct children (links, dropdowns) */ } .nav a { /* Styling for all links inside navigation */ color: var(--text-light); /* White text (defined in root variables) */ text-decoration: none; /* Remove underlines from links */ border-bottom: 3px solid transparent;/* Invisible underline for active/hover transitions */ font-size: 20px; } #hamburger { display: none; } /* Hide the hamburger menu on desktop (only show on mobile later) */ .menu { /* Container that holds all nav links and dropdowns */ display: flex; /* Use flexbox for horizontal alignment */ align-items: center; /* Vertically center items within the bar */ gap: 15px; /* Horizontal spacing between each nav item */ white-space: nowrap; /* Prevent text from wrapping onto new lines */ } /* Dropdown structure */ .dropdown { /* Wrapper for a dropdown (link + caret + menu) */ position: relative; /* Needed so submenu can be absolutely positioned below it */ display: flex; /* Place dropdown link and caret next to each other */ align-items: center; /* Vertically align link and caret */ } .dropdown > button, /* The caret (▾) button */ .dd-link, /* The visible dropdown link (A | Fundamentals etc.) */ .dd-caret { /* Alias class if used separately */ background: transparent; /* Remove any default background */ border: 0; /* No border outline */ color: var(--text-light); /* White text to match nav */ cursor: pointer; /* Pointer cursor on hover */ padding: 10px 8px; /* Clickable padding area around text/icon */ font-size: 20px; } .dropdown-menu { /* Hidden dropdown panel that appears on click/hover */ display: none; /* Hidden by default */ position: absolute; /* Position relative to .dropdown parent */ top: 100%; /* Place directly below the dropdown button */ left: 0; /* Align left edge with parent */ min-width: 220px; /* Minimum width for menu box */ background: #d5d5d5; /* White background for menu items */ color: #000000; /* Default dark gray text inside menu */ border-radius:var(--radius); /* Rounded menu corners */ box-shadow: var(--shadow); /* Drop shadow for depth */ padding: 8px; /* Inner padding around menu links */ z-index: 10; /* Ensure it appears above other elements */ } .dropdown[aria-expanded="true"] .dropdown-menu { display: block; /* Show dropdown when aria-expanded="true" (clicked open) */ } .dropdown-menu a { /* Styling for each link inside the dropdown */ display: block; /* Make each link fill full row width */ padding: 8px 6px; /* Inner padding for click area */ border-radius: var(--radius); /* Slight rounding for hover effect */ color: var(--accent); /* Dark text color */ text-decoration: none; /* Remove underlines */ font-size: 20px; font-weight: 500; text-align: justify; } .dropdown-menu a:hover { /* Hover feedback for dropdown items */ background: #f5f5f5; /* Light gray background when hovered */ } /* Active dropdown underline */ .dropdown[aria-expanded="true"] .dd-link, /* When dropdown is open */ .dropdown:hover .dd-link { /* Or when hovered (desktop) */ border-color: var(--accent); /* Add purple underline to indicate active state */ } /* Desktop hover behavior */ @media (min-width: 901px) { /* Only apply on screens wider than 900px */ .dropdown:hover .dropdown-menu { display: block; /* Automatically show dropdown on hover (desktop) */ } } /* ========================================= */ /* FACULTY ZONE BUTTON IN NAV */ /* ========================================= */ #faculty-dd { display:flex; /* Align icon and text horizontally */ align-items:center; /* Vertically center */ font-size: 20px; padding-bottom: 3px; } /* Button appearance */ #faculty-btn { background:transparent; /* No background */ border:0; /* No border */ color:var(--text-light); /* White text */ cursor:pointer; /* Pointer on hover */ padding:10px 8px; /* Click area */ font:inherit; /* Inherit site font */ border-bottom:3px solid transparent;/* Space for underline effect */ } /* Hover underline */ #faculty-btn:hover { border-color:var(--accent); /* Show purple underline */ } /* When locked, show a lock icon after button text */ #faculty-dd.locked #faculty-btn::after { content:" 🔒"; /* Add lock emoji */ margin-left:.35em; /* Small spacing */ font-size:.9em; /* Slightly smaller icon */ } /* ========================================= */ /* PASSWORD DIALOG — unified with Need Chapter modal */ /* ========================================= */ .pw-dialog { border: 0; /* Remove default border */ border-radius: 12px; /* Rounded corners */ padding: 0; /* Outer padding reset */ width: min(520px, 92vw); /* ✅ Match Need Chapter’s responsive width */ } /* Backdrop (same as Need Chapter) */ .pw-dialog::backdrop { background: rgba(0, 0, 0, 0.45); /* Same dark translucent overlay */ } /* Inner form wrapper — same visual style as .nc-wrap */ .pw-dialog form { padding: 18px; /* Consistent inner padding */ background: #fff; /* White background box */ border-radius: 12px; /* Same corner rounding */ box-shadow: var(--shadow); /* ✅ Same soft shadow for depth */ width: 100%; /* Fill the dialog width */ display: flex; flex-direction: column; } /* Input field (consistent styling) */ .pw-dialog input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; margin-top: 6px; /* Add breathing room below title/label */ } /* Error text */ .pw-err { color: #555555; min-height: 1em; margin: 0.35rem 0 0; } /* Buttons row — same style as .btn + .btn-primary from Need Chapter */ .pw-dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .pw-dialog menu button { appearance: none; border: 0; border-radius: 10px; padding: 10px 14px; font: inherit; cursor: pointer; } /* Primary purple button */ .pw-dialog menu button[type="submit"] { background: #512C80; color: #fff; } /* Cancel button (neutral) */ .pw-dialog menu button[type="button"] { background: #ddd; color: #333; } /* Hover glow effects */ .pw-dialog menu button[type="submit"]:hover { filter: brightness(1.05); } .pw-dialog menu button[type="button"]:hover { background: #ccc; } /* ========================================= */ /* BANNER — the horizontal highlight bar */ /* ========================================= */ .banner { max-width:var(--maxw); /* Limit banner width to site max */ margin:18px auto; /* Center horizontally with vertical space */ background:var(--muted); /* Light gray background */ font-size: 22px; color:#000000; /* Medium-dark text color */ border-left:12px solid var(--accent);/* Thick purple stripe on the left side */ border-right:12px solid var(--accent);/* Thick purple stripe on the left side */ padding:12px 16px; /* Inner spacing for text */ border-radius:8px; /* Rounded corners */ text-align:center; /* Center the text */ font-weight:700; /* Bold font for emphasis */ } /* ========================================= */ /* MAIN BAND — purple background area holding sidebar + panel */ /* ========================================= */ .band { background:var(--accent); /* Purple background behind content */ padding:30px 0px 30px; /* Large padding: top/bottom 36px, sides responsive */ } /* Layout container inside the band */ .band-inner { max-width:100%; /* Limit overall width */ margin: 0px 30px ; /* Center the grid horizontally */ display:grid; /* Use CSS grid for two-column layout */ grid-template-columns:420px 1fr; /* Left column fixed 320px (sidebar), right fills remaining */ gap:28px; /* Space between columns */ align-items:stretch; /* Ensure both columns stretch to equal height */ } /* ========================================= */ /* UTILITY BAR (not always shown) */ /* ========================================= */ .utility { margin: 0 auto 12px; /* Center and add 12px bottom space */ display: flex; /* Horizontal layout for items */ justify-content: space-between; /* Space items evenly (like logo vs button) */ align-items: center; /* Vertically align content */ color: var(--text-light); /* White text */ font-size: .95rem; /* Slightly smaller text size */ padding: 0; /* Remove default padding */ } /* Button inside utility (like a “back” link) */ .back-btn { display: inline-flex; /* Make button content align horizontally */ align-items: center; /* Vertically center icon/text */ gap: .4rem; /* Space between icon and text */ padding: 8px 12px; /* Internal padding */ border-radius: 10px; /* Rounded corners */ text-decoration: none; /* Remove underline */ color: #fff; /* White text */ background: rgba(255,255,255,.14); /* Transparent white background overlay */ border: 1px solid rgba(255,255,255,.35); /* Soft white border */ backdrop-filter: blur(2px); /* Adds slight blur to background under button */ transition: transform .06s ease, background .15s ease, border-color .15s ease; /* Smooth hover transitions */ } /* Hover effect for utility button */ .back-btn:hover { background: rgba(255,255,255,.22); /* Increase background visibility */ border-color: rgba(255,255,255,.55);/* Make border more visible */ transform: translateY(-1px); /* Lift button slightly */ } /* ========================================= */ /* ORANGE TILES (sidebar cards like Lectures, Exercises, etc.) */ /* ========================================= */ aside { display:grid; /* Stack tiles vertically using grid */ gap:17px; /* Space between tiles */ align-content:start; /* Align them at the top of sidebar */ } /* Each tile card */ .tile { background:var(--ora); /* Bright orange background */ color:#000; /* Dark text for contrast */ font-size: 18px; text-decoration:none; /* Remove underline if it's an tag */ border-radius:var(--radius); /* Rounded corners using global variable */ padding:22px 18px; /* Internal spacing */ box-shadow:var(--shadow); /* Drop shadow for depth */ transition:transform .08s ease; /* Smooth hover animation (lift effect) */ } /* Hover effect: lift slightly */ .tile:hover { transform:translateY(-2px); /* Move upward 2 px */ } /* Smaller text (the elements) */ .tile small { opacity:.9; /* Slightly faded for less importance */ } /* ========================================= */ /* TILE TOOLTIP ON HOVER */ /* ========================================= */ /* Enable tooltip behavior for any tile that has a data-hover attribute */ .tile[data-hover] { position: relative; /* Make it the positioning reference for the tooltip */ } /* Tooltip pseudo-element that shows above the tile */ .tile[data-hover]::after { content: attr(data-hover); /* Take tooltip text from data-hover attribute */ position: absolute; /* Position relative to the tile */ bottom: 100%; /* Place it just above the tile */ left: 50%; /* Center horizontally */ transform: translateX(-50%) translateY(-8px); /* Center and move up slightly */ background: rgba(0, 0, 0, 0.8); /* Dark background for contrast */ color: #fff; /* White tooltip text */ font-size: 0.8rem; /* Smaller font */ padding: 6px 10px; /* Internal padding */ border-radius: 6px; /* Rounded corners */ white-space: nowrap; /* Prevent multi-line wrapping */ opacity: 0; /* Hidden by default */ pointer-events: none; /* Ignore mouse interactions */ transition: opacity 0.25s ease, transform 0.25s ease; /* Smooth fade/slide animation */ z-index: 10; /* Appear above other content */ } /* When hovering, make tooltip visible and move slightly up */ .tile[data-hover]:hover::after { opacity: 1; /* Fade in */ transform: translateX(-50%) translateY(-12px); /* Lift further upward */ } /* ========================================= */ /* GRAY PANEL (right-side main content box) */ /* ========================================= */ .panel { background: var(--panel); /* Light gray background */ border-radius: var(--radius); /* Rounded corners */ padding: 18px; /* Inner spacing */ box-shadow: var(--shadow); /* Drop shadow for depth */ height: 100%; /* Make it fill the grid row height */ max-height: 540px; display: flex; /* Flexbox layout for its children */ overflow: hidden; /* Clip overflowing content */ } /* ========================================= */ /* CHAPTER BODY — image on left, text on right */ /* ========================================= */ .chapter-body { display:flex; /* Side-by-side layout */ gap:30px; /* Space between image and text */ align-items:stretch; /* Make both sides equal height */ min-height:0; /* Fix flex overflow issues */ width:100%; /* Full panel width */ height:100%; /* Fill panel height */ } /* Left column containing the image */ .chapter-media { flex: 0 0 auto; /* Fixed-size element */ display:flex; /* Use flex to align image inside */ align-items:stretch; /* Make image fill vertical space */ max-width: 55vw; /* Prevent overexpansion on ultrawide screens */ overflow:hidden; /* Crop image overflow when using object-fit:cover */ } /* Image styling */ .chapter-media img { height:100%; /* Match parent height (panel height) */ width:auto; /* Auto width to maintain aspect ratio */ display:block; /* Remove inline spacing */ border-radius:var(--radius); /* Rounded corners */ object-fit:cover; /* Fill box while cropping overflow */ /* Tip: could change to 'contain' to fit entirely without crop */ } /* Right column: text side */ .chapter-text { flex: 1 1 auto; /* Take remaining space */ display:flex; /* Use flex for vertical layout */ flex-direction:column; /* Stack title above text */ min-width: 260px; /* Prevent collapsing too narrow */ overflow:auto; /* Scroll if content overflows */ } /* Chapter heading */ .chapter-text h2 { margin: 0 0 0px; /* Bottom spacing below title */ font-size: 30px;/* Responsive font size */ color:#000000; /* Dark text color */ } /* Paragraph content */ .chapter-content { line-height:1.4; /* Comfortable reading spacing */ font-size: 18px; color:#000000; /* Dark text */ text-align: justify; margin-right: 15px; } /* ========================================= */ /* GATED CONTENT VISIBILITY */ /* ========================================= */ .gated { display:none; /* Hide gated content by default */ } .gated.show { display:block; /* Show when 'show' class added */ } /* ========================================= */ /* NEED-CHAPTER MODAL (appears if no chapter selected) */ /* ========================================= */ .need-chapter { border:0; /* Remove border */ border-radius:12px; /* Rounded corners */ padding:0; /* Outer padding reset */ width:min(520px, 92vw); /* Responsive width limit */ } /* Background overlay for modal */ .need-chapter::backdrop { background:rgba(0,0,0,.45); /* Semi-transparent dark backdrop */ } /* Inner modal wrapper */ .need-chapter .nc-wrap { padding:18px; /* Internal spacing */ background:#fff; /* White background for text */ border-radius:12px; /* Rounded corners again */ box-shadow: var(--shadow); /* Soft shadow for depth */ } /* Modal title */ .need-chapter h3 { margin:0 0 8px; /* Bottom space only */ color:#222; /* Dark text */ } /* Modal paragraph */ .need-chapter p { margin:0 0 14px; /* Bottom spacing */ color:#333; /* Slightly lighter gray text */ } /* Base button reset */ .btn { appearance:none; /* Remove default browser styles */ border:0; /* No border */ border-radius:10px; /* Rounded corners */ padding:10px 14px; /* Inner padding */ font:inherit; /* Use site’s font */ cursor:pointer; /* Pointer cursor */ } /* Primary (purple) button */ .btn-primary { background:#512C80; /* Purple background */ color:#fff; /* White text */ } /* Slightly brighten on hover */ .btn-primary:hover { filter: brightness(1.05); /* Subtle glow effect */ } /* ========================================= */ /* LECTURE TILE & BUTTON ICONS */ /* ========================================= */ /* Flex layout for lecture tile */ .lectures-tile { display: flex; /* Vertical flex container */ flex-direction: column; /* Stack header and footer vertically */ justify-content: space-between; /* Push content apart vertically */ } /* Header bar inside lecture tile */ .lectures-header { display: flex; /* Align label and icons horizontally */ justify-content: space-between; /* Space between title and icons */ align-items: center; /* Vertically center content */ } /* Container for the two icon buttons (view / download) */ .lectures-icons button { background: none; /* Transparent background */ border: none; /* No border */ cursor: pointer; /* Pointer on hover */ font-size: 1.4rem; /* Size for icon SVGs */ margin-left: 6px; /* Space between icons */ color: #512C80; /* Icon stroke color */ transition: transform 0.1s ease; /* Smooth zoom on hover */ } /* Hover scale animation */ .lectures-icons button:hover { transform: scale(1.15); /* Slightly enlarge icon */ } /* ========================================= */ /* LECTURE POPUP (PDF Viewer modal) */ /* ========================================= */ .lecture-popup { border: none; /* Remove border */ padding: 0; /* No padding */ width: 85vw; /* Width = 85% of viewport */ height: 85vh; /* Height = 85% of viewport */ border-radius: 12px; /* Rounded corners */ overflow: hidden; /* Clip overflow */ } /* Backdrop for lecture popup */ .lecture-popup::backdrop { background: rgba(0,0,0,0.55); /* Dark semi-transparent overlay */ backdrop-filter: blur(3px); } /* Wrapper for iframe */ .popup-content { position: relative; /* Container context for iframe */ width: 100%; /* Full width */ height: 100%; /* Full height */ } /* Close button (shown only on mobile) */ .popup-close-btn{ display: none; position: absolute; top: 10px; right: 10px; z-index: 50; width: 38px; height: 38px; border-radius: 999px; border: none; cursor: pointer; font-size: 24px; line-height: 38px; text-align: center; background: rgba(0,0,0,0.55); color: #fff; } @media (max-width: 1000px){ .popup-close-btn{ display: block; } } /* Embedded PDF viewer inside dialog */ .popup-content iframe { width: 100%; /* Fill container width */ height: 100%; /* Fill container height */ border: none; /* No border */ } /* ========================================= */ /* RECORDINGS TILE */ /* ========================================= */ .recordings-tile { display: flex; /* Vertical flexbox */ flex-direction: column; justify-content: space-between; } .recordings-header { display: flex; /* Horizontal layout */ justify-content: space-between; /* Separate label and icons */ align-items: center; /* Vertically center */ } /* Icon buttons for recordings */ .recordings-icons button { background: none; /* Transparent background */ border: none; /* Remove border */ cursor: pointer; /* Pointer on hover */ font-size: 1.4rem; /* Icon size */ margin-left: 6px; /* Space between icons */ color: black; /* Icon color */ transition: transform 0.1s ease; /* Smooth scaling */ } /* Hover scale effect */ .recordings-icons button:hover { transform: scale(1.15); } /* ========================================= */ /* RECORDING POPUP (Video Gallery) */ /* ========================================= */ .recording-popup { border: none; /* Remove border */ padding: 0; /* Remove padding */ width: 85vw; /* Dialog width = 85% viewport */ height: 85vh; /* Dialog height = 85% viewport */ border-radius: var(--radius); /* Rounded corners */ background: #b4b5b4; /* Purple background matching theme */ box-shadow: var(--shadow); /* Drop shadow */ overflow: hidden; /* Hide overflow */ display: none; /* Hidden by default */ flex-direction: column; /* Column layout when shown */ } /* When dialog is open */ .recording-popup[open] { display: flex; /* Display as flex */ flex-direction: column; } /* Backdrop overlay for popup */ .recording-popup::backdrop { background: rgba(0, 0, 0, 0.55); /* Dark overlay */ backdrop-filter: blur(3px); /* Add slight blur effect */ } /* ========================================= */ /* SCROLLABLE GRID INSIDE RECORDING POPUP */ /* ========================================= */ .recording-container { flex: 1; /* Take remaining vertical space */ display: grid; /* Use grid layout for videos */ grid-template-columns: repeat(2, 1fr); /* Two equal columns */ grid-auto-rows: auto; /* Row height adapts to content */ gap: 20px; /* Space between cards */ padding: 40px; /* Inner spacing */ background: #b4b5b4; /* Purple background */ overflow-y: auto; /* Scroll vertically if overflow */ align-content: start; /* Start content from top */ justify-items: center; /* Center cards horizontally */ } /* When there are more than two videos, force two rows */ .recording-container.more-than-two { grid-template-rows: repeat(2, auto); align-content: start; } /* ========================================= */ /* RECORDING CARD STYLE */ /* ========================================= */ .recording-card { background: #777; /* Dark gray card background */ border-radius: var(--radius); /* Rounded corners */ box-shadow: var(--shadow); /* Drop shadow */ padding: 14px; /* Inner spacing */ display: flex; /* Vertical layout */ flex-direction: column; align-items: center; /* Center video and title */ width: 100%; /* Fill grid cell */ max-width: 650px; /* Prevent being too wide */ transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth lift and shadow change on hover */ } /* Hover effect for recording cards */ .recording-card:hover { transform: translateY(-4px); /* Slight upward lift */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); /* Stronger shadow */ } /* Embedded */ } .mobile-action-btn:active{ transform: scale(0.99); } @media (max-width: 1000px){ /* Stop the page from being wider than the viewport */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } img, video, iframe, svg { max-width: 100%; height: auto; } /* Keep header content inside the viewport */ .hero-inner{ padding-left: 16px !important; padding-right: 16px !important; } .hero h1{ font-size: 34px !important; overflow-wrap: anywhere; word-break: break-word; } .hero p{ overflow-wrap: anywhere; word-break: break-word; } /* Banner fits the viewport */ .banner{ width: auto !important; max-width: 100% !important; margin: 12px 16px !important; padding-left: 12px; padding-right: 12px; } /* Hide the desktop nav bar entirely (no hamburger, no horizontal bar) */ .hero .nav{ display: none !important; } /* Hide the orange tiles + middle description/panel area */ .band{ display: none !important; } /* Show mobile actions in-page */ .mobile-actions{ display: block !important; padding: 0 16px 16px; } /* Make chapter grid single-column if very narrow */ @media (max-width: 520px){ .mobile-chapter-grid{ grid-template-columns: 1fr; } } /* Footer: keep it inside the viewport */ .footer-links{ gap: 14px; padding: 0 12px; } .footer-purple{ padding-left: 12px; padding-right: 12px; } } /* ========================================================= NAV WRAP FIX (no breakpoints / no horizontal overflow) Goal: keep the top nav always within viewport width. ========================================================= */ /* Allow the nav row to wrap instead of pushing wider than the screen */ .nav{ flex-wrap: wrap; align-items: center; } /* Let the menu items wrap onto additional lines when needed */ .menu{ flex: 1 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; white-space: normal; /* override the nowrap that causes overflow */ } /* Ensure long labels can actually wrap */ .menu a, .dd-link{ white-space: normal; } /* Keep dropdown blocks from forcing extra width */ .dropdown{ max-width: 100%; } /* Prevent long titles from breaking layout; wrap instead */ .dd-link{ display: inline-block; max-width: 100%; overflow-wrap: anywhere; } /* Dropdown panels: keep them inside the viewport */ .dropdown-menu{ max-width: calc(100vw - 16px); overflow-wrap: anywhere; } /* ========================================= */ /* ABOUT US POPUP (cards) */ /* ========================================= */ .policy-close-dark{ color: var(--bg-dark) !important; } .about-cards{ margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(180px, 400px)); gap: 16px; justify-content: center; align-items: stretch; } .about-card{ display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #222; background: #f2f2f2; border: 1px solid rgba(0,0,0,0.12); border-radius: var(--radius); padding: 16px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .08s ease, filter .15s ease; } .about-card:hover{ transform: translateY(-2px); filter: brightness(1.02); } .about-avatar{ width: 86px; height: 86px; border-radius: 999px; object-fit: cover; background: #d9d9d9; border: 3px solid #b4b5b4; } .about-name{ margin-top: 10px; font-weight: 800; text-align: center; } .about-title{ margin-top: 4px; font-size: 0.95rem; opacity: 0.8; text-align: center; } @media (max-width: 560px){ .about-cards{ grid-template-columns: 1fr; max-width: 320px; margin-left:auto; margin-right:auto; } } /* ========================================= */ /* UNDER CONSTRUCTION MODAL */ /* ========================================= */ .under-construction .uc-row{ display:flex; gap:14px; align-items:flex-start; margin-top:10px; } .under-construction .uc-spinner{ width:34px; height:34px; border-radius:999px; border:4px solid rgba(0,0,0,0.15); border-top-color: rgba(0,0,0,0.75); animation: ucspin 0.9s linear infinite; flex: 0 0 auto; margin-top: 2px; } .under-construction .uc-wrap p{ margin: 0; } @keyframes ucspin{ to { transform: rotate(360deg); } } /* ========================================= */ /* Dropdown divider (used in Tutorials menu) */ /* ========================================= */ .dropdown-divider{ height:1px; background: rgba(0,0,0,.25); margin: 8px 6px; border-radius: 1px; }