From 04ce55bfc36baac472054331814bdf7683a650e4 Mon Sep 17 00:00:00 2001 From: claude Date: Thu, 28 May 2026 10:13:27 +0300 Subject: [PATCH] refactor(web): restructure myai.css with section comments and cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add section block comments throughout for navigability - Merge two duplicate @media (max-width:900px) blocks into one - Remove dead .ai-mark rule (replaced by logo, never rendered) - Move .cookie-overlay, .cookie-manage to display:none by default (removes need for inline style="display:none;" on those elements) - Add .loader-overlay.loader-visible{display:flex} so JS can use class toggling instead of .css('display','flex') — works correctly with jQuery 4.0's getComputedStyle-based visibility detection - Consolidate brand-mark, console-line, nav-actions rules next to their related blocks (were scattered at end of file) Closes #31 Co-Authored-By: Claude Sonnet 4.6 --- web/wwwroot/css/myai.css | 358 ++++++++++++++++++++++----------------- 1 file changed, 202 insertions(+), 156 deletions(-) diff --git a/web/wwwroot/css/myai.css b/web/wwwroot/css/myai.css index f8c90c5..da1e1b6 100644 --- a/web/wwwroot/css/myai.css +++ b/web/wwwroot/css/myai.css @@ -1,3 +1,6 @@ +/* ============================================================ + DESIGN TOKENS + ============================================================ */ :root { --bg: #041120; --bg-soft: #0a1c34; @@ -11,6 +14,9 @@ --shadow: 0 18px 60px rgba(0,0,0,.28) } +/* ============================================================ + RESET / BASE + ============================================================ */ * { box-sizing: border-box } @@ -36,6 +42,9 @@ img { display: block } +/* ============================================================ + LAYOUT HELPERS + ============================================================ */ .container { width: 100%; max-width: 1120px; @@ -48,6 +57,9 @@ img { overflow: hidden } +/* ============================================================ + STATUS PAGE (job-search redirect result) + ============================================================ */ .status-hero { min-height: 100vh; display: flex; @@ -75,6 +87,9 @@ img { line-height: 1.6 } +/* ============================================================ + HEADER / NAVIGATION + ============================================================ */ .header { position: sticky; top: 0; @@ -103,15 +118,11 @@ img { height: 48px } -.ai-mark { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 16px; - background: linear-gradient(135deg,var(--primary),var(--primary-strong)); - font-weight: 900; - color: #fff; - box-shadow: 0 18px 40px rgba(95,160,255,.24) +.brand-mark img { + width: 100%; + height: 100%; + object-fit: contain; + filter: drop-shadow(0 16px 26px rgba(95,160,255,.24)) } .brand-text { @@ -141,6 +152,7 @@ img { color: #fff } +/* Hamburger — hidden on desktop, shown via media query */ .menu-toggle { display: none; background: transparent; @@ -156,6 +168,61 @@ img { margin: 5px 0 } +/* Language selector */ +.nav-actions { + display: flex; + align-items: center; + gap: 12px +} + +.lang-switch { + display: flex; + align-items: center; + gap: 8px; + padding: 6px; + border-radius: 18px; + background: rgba(255,255,255,.04); + border: 1px solid rgba(255,255,255,.1) +} + +.lang-flag { + width: 46px; + height: 32px; + padding: 3px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid transparent; + border-radius: 12px; + background: transparent; + cursor: pointer; + opacity: .78; + transition: transform .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease +} + + .lang-flag img { + width: 100%; + height: 100%; + display: block; + border-radius: 8px; + object-fit: cover; + box-shadow: 0 8px 18px rgba(0,0,0,.18) + } + + .lang-flag:hover { + opacity: 1; + transform: translateY(-1px) + } + + .lang-flag[aria-pressed=true] { + opacity: 1; + border-color: rgba(95,160,255,.65); + background: rgba(95,160,255,.1) + } + +/* ============================================================ + HERO SECTION + ============================================================ */ .hero { padding: 72px 0 48px } @@ -200,6 +267,44 @@ img { margin-top: 30px } +/* Hero card / AI console */ +.banner-card { + overflow: hidden +} + +.showcase-banner { + width: 100%; + border-radius: 22px; + margin-bottom: 18px; + border: 1px solid rgba(255,255,255,.12); + box-shadow: 0 20px 55px rgba(0,0,0,.22) +} + +.console-line { + display: flex; + gap: 16px; + align-items: center; + margin: 12px 0; + padding: 16px 18px; + border-radius: 18px; + background: rgba(255,255,255,.05); + color: #dce8ff +} + + .console-line span { + min-width: 76px; + color: #8fb8ff; + font-weight: 900 + } + + .console-line b { + font-weight: 700; + color: #dce8ff + } + +/* ============================================================ + BUTTONS + ============================================================ */ .btn { border-radius: 999px; padding: 13px 22px; @@ -218,12 +323,15 @@ img { color: #fff } -/* Bootstrap replacement utilities (btn-sm, btn-dark, btn-warning, shadow) */ +/* Bootstrap replacement utilities */ .btn-sm { padding: 5px 10px; font-size: .875rem } .btn-dark { background: #1e2730; color: #fff; border-color: #1e2730 } .btn-warning { background: #ffc107; color: #212529; border: 0 } .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important } +/* ============================================================ + SECTION / DEMO GRID + ============================================================ */ .section { padding: 76px 0 } @@ -246,34 +354,6 @@ img { line-height: 1.8 } -.ai-console-card, .ai-panel, .demo-card, .contact-form { - background: var(--panel); - border: 1px solid var(--panel-border); - border-radius: var(--card-radius); - box-shadow: var(--shadow) -} - -.ai-console-card { - padding: 30px -} - -.console-line { - display: flex; - gap: 16px; - align-items: center; - margin: 12px 0; - padding: 16px 18px; - border-radius: 18px; - background: rgba(255,255,255,.05); - color: #dce8ff -} - - .console-line span { - min-width: 76px; - color: #8fb8ff; - font-weight: 900 - } - .demo-grid { display: grid; grid-template-columns: repeat(3,1fr); @@ -317,6 +397,23 @@ img { font-size: .82rem } +/* ============================================================ + SHARED CARD STYLES + ============================================================ */ +.ai-console-card, .ai-panel, .demo-card, .contact-form { + background: var(--panel); + border: 1px solid var(--panel-border); + border-radius: var(--card-radius); + box-shadow: var(--shadow) +} + +.ai-console-card { + padding: 30px +} + +/* ============================================================ + CV MATCHER — INPUT / RESULT PANELS + ============================================================ */ .matcher-grid { display: grid; grid-template-columns: 1fr 1fr; @@ -447,6 +544,7 @@ img { margin: 0 } +/* Result panel */ .result-panel { position: sticky; top: 110px @@ -479,6 +577,9 @@ img { line-height: 1.8 } +/* ============================================================ + CONTACT SECTION + ============================================================ */ .contact { background: rgba(255,255,255,.03) } @@ -513,6 +614,9 @@ img { padding: 28px } +/* ============================================================ + FORM MESSAGES & FEEDBACK + ============================================================ */ .form-message { display: block; margin-top: 14px @@ -558,6 +662,9 @@ img { color: #f7d488 !important } +/* ============================================================ + SUBSCRIBE FORM + ============================================================ */ .subscribe-form { margin-top: 28px; padding: 28px; @@ -592,6 +699,9 @@ img { margin-top: 12px } +/* ============================================================ + FOOTER + ============================================================ */ .footer { padding: 26px 0; border-top: 1px solid rgba(255,255,255,.08); @@ -624,7 +734,13 @@ img { font-family: monospace } +/* ============================================================ + COOKIE BANNER & MANAGE BUTTON + Initial display:none ensures they are hidden before JS runs; + JS calls .fadeIn() / .show() to reveal them. + ============================================================ */ .cookie-overlay { + display: none; position: fixed; left: 0; right: 0; @@ -663,13 +779,22 @@ img { flex-wrap: wrap } +/* "Cookie settings" button — hidden until consent is given */ .cookie-manage { + display: none; position: fixed; bottom: 20px; z-index: 40 } +/* ============================================================ + LOADER OVERLAY + Hidden by default; JS adds .loader-visible to show it. + Two-class selector (0,2,0) wins over single-class (0,1,0) + so no !important is needed. + ============================================================ */ .loader-overlay { + display: none; position: fixed; inset: 0; z-index: 80; @@ -679,6 +804,10 @@ img { backdrop-filter: blur(2px) } +.loader-overlay.loader-visible { + display: flex +} + .loader-box { max-width: 360px; padding: 22px 28px; @@ -714,6 +843,9 @@ img { animation: loader-spin .8s linear infinite } +/* ============================================================ + ANIMATIONS + ============================================================ */ @keyframes loader-spin { to { transform: rotate(360deg) } } @@ -723,20 +855,16 @@ img { } @keyframes shake { - 25% { - transform: translateX(-5px) - } - - 50% { - transform: translateX(5px) - } - - 75% { - transform: translateX(-3px) - } + 25% { transform: translateX(-5px) } + 50% { transform: translateX(5px) } + 75% { transform: translateX(-3px) } } +/* ============================================================ + RESPONSIVE — tablets and below (≤900px) + ============================================================ */ @media (max-width:900px) { + /* Single-column layouts */ .hero-grid, .matcher-grid, .contact-grid, .demo-grid { grid-template-columns: 1fr } @@ -745,6 +873,7 @@ img { position: static } + /* Nav becomes a dropdown */ .nav { position: absolute; top: 84px; @@ -756,7 +885,8 @@ img { background: #071326; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; - padding: 20px + padding: 20px; + z-index: 30 } .nav.is-open { @@ -764,15 +894,36 @@ img { } .menu-toggle { - display: block + display: block; + order: 4 + } + + .nav-actions { + margin-left: auto + } + + .nav-wrap { + position: relative } .cookie-box { align-items: flex-start; flex-direction: column } + + .lang-switch { + padding: 4px + } + + .lang-flag { + width: 42px; + height: 30px + } } +/* ============================================================ + RESPONSIVE — mobile (≤560px) + ============================================================ */ @media (max-width:560px) { .hero { padding-top: 46px @@ -791,112 +942,7 @@ img { width: 100%; text-align: center } -} -/* MyAi brand + main-page language selector */ -.brand-mark img { - width: 100%; - height: 100%; - object-fit: contain; - filter: drop-shadow(0 16px 26px rgba(95,160,255,.24)) -} - -.nav-actions { - display: flex; - align-items: center; - gap: 12px -} - -.lang-switch { - display: flex; - align-items: center; - gap: 8px; - padding: 6px; - border-radius: 18px; - background: rgba(255,255,255,.04); - border: 1px solid rgba(255,255,255,.1) -} - -.lang-flag { - width: 46px; - height: 32px; - padding: 3px; - display: inline-flex; - align-items: center; - justify-content: center; - border: 1px solid transparent; - border-radius: 12px; - background: transparent; - cursor: pointer; - opacity: .78; - transition: transform .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease -} - - .lang-flag img { - width: 100%; - height: 100%; - display: block; - border-radius: 8px; - object-fit: cover; - box-shadow: 0 8px 18px rgba(0,0,0,.18) - } - - .lang-flag:hover { - opacity: 1; - transform: translateY(-1px) - } - - .lang-flag[aria-pressed=true] { - opacity: 1; - border-color: rgba(95,160,255,.65); - background: rgba(95,160,255,.1) - } - -.banner-card { - overflow: hidden -} - -.showcase-banner { - width: 100%; - border-radius: 22px; - margin-bottom: 18px; - border: 1px solid rgba(255,255,255,.12); - box-shadow: 0 20px 55px rgba(0,0,0,.22) -} - -.console-line b { - font-weight: 700; - color: #dce8ff -} - -@media (max-width:900px) { - .nav-actions { - margin-left: auto - } - - .nav-wrap { - position: relative - } - - .menu-toggle { - order: 4 - } - - .nav { - z-index: 30 - } - - .lang-switch { - padding: 4px - } - - .lang-flag { - width: 42px; - height: 30px - } -} - -@media (max-width:560px) { .brand-text { font-size: 1.35rem }