diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css index f1c1679..547b3b9 100644 --- a/static/css/04-interactive/_scroll-behavior.css +++ b/static/css/04-interactive/_scroll-behavior.css @@ -132,13 +132,15 @@ transform: none !important; } - /* Mobile: Show colors at 50% transparency by default */ + /* Mobile: Show colors at full opacity (no transparency with blur bar) */ .download-btn { - background: rgba(205, 96, 96, 0.5) !important; /* PDF red at 50% */ + background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .print-friendly-btn { - background: rgba(255, 255, 255, 0.5) !important; /* White at 50% */ + background: rgba(255, 255, 255, 1) !important; /* White - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .print-friendly-btn iconify-icon { @@ -146,16 +148,18 @@ } .shortcuts-btn { - background: rgba(243, 156, 18, 0.5) !important; /* Orange at 50% */ + background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .info-button { - background: rgba(39, 174, 96, 0.5) !important; /* Green at 50% */ + background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .back-to-top { - background: rgba(39, 174, 96, 0.5) !important; /* Green at 50% */ - opacity: 0.5; /* Semi-transparent by default, full opacity when at-bottom */ + background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */ + opacity: 1 !important; /* Full opacity (no transparency with blur bar) */ } /* Flexbox container behavior - buttons arrange themselves */ diff --git a/static/css/05-responsive/_breakpoints.css b/static/css/05-responsive/_breakpoints.css index 545bd18..08e0378 100644 --- a/static/css/05-responsive/_breakpoints.css +++ b/static/css/05-responsive/_breakpoints.css @@ -699,6 +699,13 @@ ======================================== */ @media (max-width: 915px) and (orientation: landscape) { + /* Force single column layout in landscape mobile */ + .page-1 .page-content, + .page-2 .page-content { + grid-template-columns: 1fr !important; + grid-template-rows: auto auto; + } + /* Reduce header size in landscape */ .cv-header { margin-bottom: 1rem !important; diff --git a/static/css/color-theme.css b/static/css/color-theme.css index 5a8492d..9e43ae6 100644 --- a/static/css/color-theme.css +++ b/static/css/color-theme.css @@ -284,7 +284,7 @@ right: auto !important; width: 50px !important; height: 50px !important; - /* Removed opacity: 1 !important to allow .footer-hovered to work */ + opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */ transform: none !important; /* Position before info button: 5 buttons total */ /* Download, Print, Shortcuts, Theme, Info */ @@ -292,17 +292,20 @@ left: calc(50% + 35px) !important; /* Fourth button */ } - /* Show theme colors at 50% transparency by default on mobile */ + /* Show theme colors at full opacity on mobile (no transparency with blur bar) */ .color-theme-switcher[data-theme-mode="light"] { - background: rgba(212, 178, 0, 0.5) !important; /* Gold at 50% */ + background: rgba(212, 178, 0, 1) !important; /* Gold - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .color-theme-switcher[data-theme-mode="dark"] { - background: rgba(1, 60, 119, 0.5) !important; /* Blue at 50% */ + background: rgba(1, 60, 119, 1) !important; /* Blue - full opacity */ + opacity: 1 !important; /* Override base opacity */ } .color-theme-switcher[data-theme-mode="auto"] { - background: rgba(155, 89, 182, 0.5) !important; /* Purple at 50% */ + background: rgba(155, 89, 182, 1) !important; /* Purple - full opacity */ + opacity: 1 !important; /* Override base opacity */ } /* Full color opacity on hover */