From 36759d8feea267bc789951d10a903069bf3e07e6 Mon Sep 17 00:00:00 2001 From: claude Date: Fri, 29 May 2026 09:15:20 +0300 Subject: [PATCH] refactor: Add strategic comments to organize CSS (Step 5 of 6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added inline comments throughout myai.css to: - Clarify complex CSS selectors (input:not selectors, specificity explanations) - Explain design patterns (.is-invalid error state pattern) - Document focus and error states - Describe layout decisions (sticky result panel, hamburger dropdown) - Clarify responsive breakpoints and what changes at each - Explain the relationship between CSS and JS (e.g., .is-open, .is-invalid) Comments are strategic and concise—added to complex/non-obvious sections without bloating the file. All CSS rules remain unchanged—purely additive documentation. Key sections now have better context: - Form field selectors and state handling - Hamburger menu responsive behavior - Result panel sticky positioning strategy - Responsive grid layout changes at 900px and 560px - Cookie banner and loader overlay behavior Co-Authored-By: Claude Haiku 4.5 --- web/wwwroot/css/myai.css | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/web/wwwroot/css/myai.css b/web/wwwroot/css/myai.css index da1e1b6..92bf9b3 100644 --- a/web/wwwroot/css/myai.css +++ b/web/wwwroot/css/myai.css @@ -152,7 +152,7 @@ img { color: #fff } -/* Hamburger — hidden on desktop, shown via media query */ +/* Hamburger menu button — hidden on desktop, shown in responsive via media query */ .menu-toggle { display: none; background: transparent; @@ -160,6 +160,7 @@ img { padding: 8px } + /* Three horizontal lines that make up the hamburger icon */ .menu-toggle span { display: block; width: 24px; @@ -168,7 +169,7 @@ img { margin: 5px 0 } -/* Language selector */ +/* Language selector (right side of header) */ .nav-actions { display: flex; align-items: center; @@ -430,13 +431,15 @@ img { margin-bottom: 18px } - .ai-panel label span, .contact-form label span { + /* Label text styling */ + .ai-panel label span, .contact-form label span { display: block; margin-bottom: 8px; color: #c3d4f2; font-weight: 700 } + /* Input fields: text, textarea, email. Excludes checkboxes and file inputs. */ .ai-panel input:not([type="checkbox"]):not([type="file"]), .ai-panel textarea, .contact-form input:not([type="checkbox"]):not([type="file"]), @@ -455,6 +458,7 @@ img { transition: border-color .15s ease, box-shadow .15s ease } + /* Placeholder text color */ .ai-panel input:not([type="checkbox"]):not([type="file"])::placeholder, .ai-panel textarea::placeholder, .contact-form input:not([type="checkbox"]):not([type="file"])::placeholder, @@ -463,6 +467,7 @@ img { color: #97a4b8 } + /* Focus state: blue border and glow */ .ai-panel input:not([type="checkbox"]):not([type="file"]):focus, .ai-panel textarea:focus, .contact-form input:not([type="checkbox"]):not([type="file"]):focus, @@ -472,6 +477,7 @@ img { box-shadow: 0 0 0 3px rgba(95,160,255,.18) } + /* Error state (is-invalid): red border and red glow when parent has .is-invalid class */ .ai-panel label.is-invalid input:not([type="checkbox"]):not([type="file"]), .ai-panel label.is-invalid textarea, .contact-form label.is-invalid input:not([type="checkbox"]):not([type="file"]), @@ -498,6 +504,7 @@ img { color: #ff8a8a } +/* File upload drop zone */ .file-drop { display: block; border: 1px dashed rgba(143,184,255,.45); @@ -507,6 +514,7 @@ img { cursor: pointer } +/* File drop zone error state */ .file-drop.is-invalid { border-color: #ff8a8a; background: rgba(255,138,138,.06) @@ -544,12 +552,13 @@ img { margin: 0 } -/* Result panel */ +/* Match result panel — sticky positioning keeps it visible while scrolling the form */ .result-panel { position: sticky; top: 110px } +/* Empty state message (before results generated) */ .empty-result { color: var(--muted); line-height: 1.8; @@ -558,6 +567,7 @@ img { background: rgba(0,0,0,.25) } +/* Large circular match score percentage badge */ .score-badge { display: inline-flex; align-items: center; @@ -571,6 +581,7 @@ img { margin: 10px 0 20px } +/* Bulleted lists for strengths, gaps, evidence */ .result-list { padding-left: 18px; color: #d7e3fb; @@ -862,18 +873,20 @@ img { /* ============================================================ RESPONSIVE — tablets and below (≤900px) + Changes: Single-column layouts, hamburger nav, adjusted spacing ============================================================ */ @media (max-width:900px) { - /* Single-column layouts */ + /* All grids switch from multi-column to single column */ .hero-grid, .matcher-grid, .contact-grid, .demo-grid { grid-template-columns: 1fr } + /* Result panel no longer sticky on tablets (would interfere with form) */ .result-panel { position: static } - /* Nav becomes a dropdown */ + /* Navigation becomes a hidden dropdown, shown on hamburger click via .is-open class */ .nav { position: absolute; top: 84px; @@ -889,10 +902,12 @@ img { z-index: 30 } + /* .is-open class added by JS on hamburger click */ .nav.is-open { display: flex } + /* Show hamburger button on tablets */ .menu-toggle { display: block; order: 4 @@ -906,11 +921,13 @@ img { position: relative } + /* Cookie banner stacks vertically on tablets */ .cookie-box { align-items: flex-start; flex-direction: column } + /* Language flags get smaller */ .lang-switch { padding: 4px } @@ -923,8 +940,10 @@ img { /* ============================================================ RESPONSIVE — mobile (≤560px) + Changes: Reduced padding, smaller text, full-width buttons, hide subtitle ============================================================ */ @media (max-width:560px) { + /* Tighter padding on small screens */ .hero { padding-top: 46px } @@ -933,16 +952,19 @@ img { padding: 56px 0 } + /* Footer goes vertical on mobile */ .footer-wrap { align-items: flex-start; flex-direction: column } + /* Action buttons take full width */ .hero-actions .btn { width: 100%; text-align: center } + /* Brand logo smaller, subtitle hidden */ .brand-text { font-size: 1.35rem } @@ -956,6 +978,7 @@ img { height: 42px } + /* Tighter gaps in nav and language selector */ .nav-actions { gap: 6px } @@ -969,6 +992,7 @@ img { height: 27px } + /* Slightly smaller banner border radius on mobile */ .showcase-banner { border-radius: 18px }