/* Global styles for Tweeter modern homepage design */ /* 1. Background ------------------------------------------------------------- */ /* subtle soft light-blue gradient on ensures entire app has a fresh tone */ body { background: linear-gradient(180deg, #e3f2fd 0%, #ffffff 100%); min-height: 100vh; /* cover full viewport */ } /* content container overrides to keep the main column clean */ .home-container { max-width: 720px; margin: 0 auto; padding: 2rem 1rem; } /* 2. Tweet card styling ---------------------------------------------------- */ .tweet-card { border: none; /* remove default border */ border-radius: 1rem; /* soft rounded corners */ box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: #ffffff; /* enforce white background to contrast */ } .tweet-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* spacing inside the card body is already handled by Bootstrap's .card-body */ /* 3. Avatar ---------------------------------------------------------------- */ .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); color: #ffffff; font-weight: 700; font-size: 1.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; user-select: none; } /* 4. Like button enhancements ------------------------------------------------ */ .like-btn, .liked-btn { border-radius: 20px; transition: transform 0.15s ease, background-color 0.15s ease; padding: 0.35rem 0.75rem; /* slightly larger tappable area */ } /* small helper for the heart icon inside like buttons */ .like-icon { width: 18px; height: 18px; flex-shrink: 0; } .like-btn:hover, .liked-btn:hover { transform: scale(1.05); } /* use flex utilities on the button for icon+text+counter alignment */ /* different color treatments while maintaining Bootstrap palette */ .like-btn { color: #0d6efd; /* primary blue */ border-color: #0d6efd; } .liked-btn { color: #ffffff; background-color: #0d6efd; border-color: #0d6efd; } /* override bootstrap badges inside the button to be subtle */ .like-btn .badge, .liked-btn .badge { font-size: 0.75rem; margin-left: 0.25rem; vertical-align: middle; } /* 5. Utility helpers ------------------------------------------------------- */ /* remove link decorations when buttons are used as links anywhere */ .btn-no-decoration { text-decoration: none; } /* responsive tweaks if anything needs to stack on narrow screens */ @media (max-width: 576px) { .avatar { width: 40px; height: 40px; font-size: 1rem; } } .navbar { /* darker, richer navy than Bootstrap’s bg-dark */ background-color: #0d1b2a !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .navbar-brand { font-weight: 600; letter-spacing: 0.5px; color: #f8f9fa !important; } .navbar .nav-link { color: #cfd8dc; /* light grey links */ transition: color 0.2s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #ffffff; /* brighten on hover */ } .navbar .nav-link.active { color: #ffffff; } .navbar-toggler { border-color: rgba(248,249,250,.2); } .navbar-toggler-icon { filter: invert(1); /* make the hamburger visible on navy */ } /* keep the collapse button lines a little thicker for a premium look */ .navbar-toggler-icon:after { display: block; width: 1.5em; height: 0.15em; background-color: #f8f9fa; }