/* ============================================================ FILE: css/error-handler.css PROJECT: Tailored Tastes — Error & Bug Detection System (PROJECT 2) PURPOSE: Styles the error/bug notification popup cards that appear in the bottom-right corner of the screen whenever an error is detected. These styles are COMPLETELY SEPARATE from the landing page styles in styles.css — they belong to Project 2 only. LOAD ORDER: Load this stylesheet in index.html BEFORE styles.css so landing page styles can override these if needed. ============================================================ */ /* ---- ERROR NOTIFICATION CONTAINER -------------------------- This is the fixed-position "dock" that holds all error cards. position: fixed means it stays in the same corner of the screen even when the user scrolls the page. z-index: 999999 puts it on top of EVERYTHING on the page — including overlays, modals, and the 3D menu. */ #tt-error-container { position: fixed; /* stays in place even when page scrolls */ bottom: 20px; /* 20px from the bottom edge of the screen */ right: 20px; /* 20px from the right edge of the screen */ z-index: 999999; /* on top of all other page elements */ display: flex; /* lays out multiple cards in a column */ flex-direction: column-reverse; /* newest card appears at bottom of stack (most visible) */ gap: 10px; /* 10px space between each notification card */ max-width: 400px; /* maximum card width — prevents giant cards on wide screens */ width: calc(100vw - 40px); /* on narrow screens, shrink to fit (vw = viewport width) */ pointer-events: none; /* let clicks pass through the container itself (only cards are clickable) */ /* TIP: If you want the container on the LEFT instead of RIGHT, change 'right: 20px' to 'left: 20px'. To move it to the TOP, change 'bottom: 20px' to 'top: 20px'. */ } /* ---- INDIVIDUAL ERROR CARD --------------------------------- Each error gets its own card. Cards start hidden (opacity 0) and slide up into view when the --visible modifier is added. pointer-events: auto makes only the cards (not the container) clickable. */ .tt-error-card { background: #1A1208; /* very dark warm brown — serious but not jarring */ border: 2px solid #C9A050; /* gold border — matches the Tailored Tastes brand */ border-radius: 8px; /* rounded corners — softer appearance */ padding: 0; /* padding handled by inner sections */ overflow: hidden; /* prevents inner content from breaking rounded corners */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), /* large dark shadow for depth */ 0 2px 8px rgba(201, 160, 80, 0.3); /* subtle gold glow */ pointer-events: auto; /* THIS element IS clickable (container was not) */ /* TRANSITION — the card starts in the state below (opacity 0) and transitions to the --visible state (opacity 1). 'all' means every property animates, 0.4s = 0.4 second duration, 'ease-out' means it starts fast and slows to a stop. */ transition: opacity 0.4s ease-out, /* fade in/out */ transform 0.4s ease-out; /* slide up/down */ /* STARTING STATE: card is invisible and shifted down by 20px. When .tt-error-card--visible is added, these values change. */ opacity: 0; /* fully transparent (invisible) */ transform: translateY(20px); /* shifted 20px below final position */ /* Font settings for all text inside the card. */ font-family: 'Georgia', 'Times New Roman', serif; /* readable serif font */ font-size: 13px; /* base text size — small to avoid taking too much space */ color: #FFF5DC; /* warm cream text — readable on dark background */ } /* VISIBLE STATE MODIFIER When JavaScript adds the class 'tt-error-card--visible', this overrides the starting state, triggering the transition. TIP: BEM naming convention — double dash (--) means a modifier. */ .tt-error-card--visible { opacity: 1; /* fully visible */ transform: translateY(0); /* back to normal position (no shift) */ } /* ---- CARD HEADER ------------------------------------------- Contains the warning icon, error type label, and close (X) button. Uses flexbox to space these three elements across the header. */ .tt-error-card__header { display: flex; /* horizontal row layout */ align-items: center; /* vertically center icon, text, and button */ justify-content: space-between; /* push close button to far right */ padding: 10px 12px 8px; /* top/side padding, slightly less bottom */ background: rgba(201, 160, 80, 0.15); /* very subtle gold tint background */ border-bottom: 1px solid rgba(201, 160, 80, 0.3); /* gold divider line */ } /* Warning icon in the header (the emoji ⚠️) */ .tt-error-card__icon { font-size: 16px; /* slightly larger than body text */ margin-right: 8px; /* space between icon and type label */ flex-shrink: 0; /* don't let it shrink if space is tight */ } /* Error type label — e.g., "JavaScript Error", "Promise Rejection" */ .tt-error-card__type { font-weight: bold; /* bold so type stands out */ font-size: 12px; /* slightly smaller for label style */ color: #C9A050; /* gold — same as logo color */ text-transform: uppercase; /* ALL CAPS for label styling */ letter-spacing: 0.5px; /* slight letter spacing for readability */ flex-grow: 1; /* take up available space between icon and close button */ } /* Close button — the X in the top-right of each card */ .tt-error-card__close { background: transparent; /* no background — just the X character */ border: none; /* no border */ color: #FFF5DC; /* cream color matching body text */ font-size: 16px; /* large enough to be an easy click target */ cursor: pointer; /* hand cursor on hover to indicate clickability */ padding: 2px 4px; /* small padding for easier clicking */ border-radius: 3px; /* slightly rounded */ line-height: 1; /* prevent extra height from line-height */ flex-shrink: 0; /* don't let it shrink */ transition: background 0.2s; /* smooth background color change on hover */ /* TIP: Without 'cursor: pointer', the user won't know the X is clickable. Always add cursor: pointer to any interactive non-link element. */ } /* Close button hover state — slight background highlight */ .tt-error-card__close:hover { background: rgba(255, 255, 255, 0.15); /* subtle white highlight on hover */ } /* ---- CARD BODY --------------------------------------------- The main content area containing the error message, file/line location, and fix suggestion. */ .tt-error-card__body { padding: 10px 12px; /* comfortable padding on all sides */ } /* The error message text — the main "what went wrong" description */ .tt-error-card__message { margin: 0 0 8px; /* no top margin, 8px bottom margin */ font-size: 13px; /* readable body size */ color: #FFE5A0; /* light gold-yellow — stands out as the main message */ line-height: 1.5; /* 1.5x line height for readability */ word-break: break-word; /* wrap long URLs or error messages that have no spaces */ } /* The file/line/column location info */ .tt-error-card__location { margin: 0 0 8px; /* 8px spacing below */ font-size: 11px; /* slightly smaller — secondary info */ color: #B8A070; /* muted gold — less important than message */ line-height: 1.6; /* extra line height because of the
in the HTML */ font-family: 'Courier New', monospace; /* monospace font for code/file references */ /* TIP: Monospace fonts like Courier New are the standard for displaying code, file paths, and line numbers because every character is the same width, making them easy to scan. */ } /* The fix suggestion — most important actionable info */ .tt-error-card__fix { margin: 0; /* no extra margin — bottom of body section */ font-size: 12px; /* slightly smaller than message */ color: #90C8A0; /* soft green — green means "go fix it" */ line-height: 1.5; /* readable line height */ border-top: 1px solid rgba(255,255,255,0.08); /* subtle separator above fix tip */ padding-top: 8px; /* space between separator and text */ } /* ---- CARD FOOTER ------------------------------------------- Contains the "Download Full Log" button and the timestamp. */ .tt-error-card__footer { display: flex; /* horizontal row */ align-items: center; /* vertically centered */ justify-content: space-between; /* button on left, timestamp on right */ padding: 8px 12px 10px; /* comfortable padding */ background: rgba(0, 0, 0, 0.2); /* slightly darker background for visual separation */ border-top: 1px solid rgba(201, 160, 80, 0.2); /* subtle gold divider above footer */ } /* The "Download Full Log" button */ .tt-error-card__download-btn { background: #C9A050; /* gold background — calls attention */ color: #1A1208; /* very dark text on gold — high contrast */ border: none; /* no border needed with solid gold background */ border-radius: 4px; /* slightly rounded corners */ padding: 5px 10px; /* comfortable click target */ font-size: 11px; /* small but legible */ font-weight: bold; /* bold so it reads as a button */ cursor: pointer; /* hand cursor on hover */ letter-spacing: 0.3px; /* slight spacing */ transition: background 0.2s, transform 0.1s; /* smooth hover and click animations */ } /* Download button hover — slightly lighter gold */ .tt-error-card__download-btn:hover { background: #E8C778; /* lighter gold on hover */ transform: translateY(-1px); /* subtle lift effect — makes it feel interactive */ } /* Download button active (while being clicked) — press down effect */ .tt-error-card__download-btn:active { transform: translateY(0px); /* remove lift — feels like pressing a real button */ background: #A07B2A; /* darker gold when pressed */ } /* The timestamp in the footer — "when did this happen" */ .tt-error-card__timestamp { font-size: 10px; /* very small — it's secondary info */ color: #7A6A50; /* muted brown — least important element */ font-family: 'Courier New', monospace; /* monospace for date/time strings */ } /* ---- RESPONSIVE: SMALL SCREENS ---------------------------- On phones, reduce the card width and font sizes slightly so the cards don't take over the whole screen. */ @media (max-width: 480px) { /* Shrink the container on very small screens */ #tt-error-container { max-width: calc(100vw - 20px); /* nearly full width on tiny phones */ right: 10px; /* closer to the edge on small screens */ bottom: 10px; /* closer to the bottom edge */ } /* Reduce font sizes slightly on mobile */ .tt-error-card { font-size: 12px; /* one point smaller on mobile */ } /* Slightly smaller message text on mobile */ .tt-error-card__message { font-size: 12px; } }