/* --- Mind Soup v4.5.8.18 resilience, mobile and accessibility pass -------- */ /* The rendered landmark has its own ID; Blogger's b:includable name="main" remains untouched because Blogger requires that internal includable name. */ /* Strong, consistent keyboard focus without changing normal button appearance. */ :where(button,a[href],input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--cyan)!important; outline-offset:3px; } :where(button,a[href],summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent;} @media (hover:none), (pointer:coarse){ .article-tool-btn:hover,.share-option:hover,.listen-btn:hover,.btn:hover, .home-topic-pill:hover,.icon-btn:hover{transform:none!important;} } /* Real mobile Share/Listen markup. Desktop remains unchanged. */ @media(max-width:700px){ #articleSharePanel{ position:relative;margin:12px 0 16px;padding:20px 14px 16px;border-radius:22px;overflow:hidden; } #articleSharePanel .share-panel-inner{display:block;padding:0;} #articleSharePanel .share-panel-copy{ display:block;width:100%;min-height:44px;margin:0 0 16px;padding:0 52px 0 2px; } #articleSharePanel .share-panel-copy strong{display:block;font-size:17px;line-height:1.2;margin-bottom:4px;white-space:normal;} #articleSharePanel .share-panel-copy span{display:block;font-size:12px;line-height:1.35;white-space:normal;} #articleSharePanel .share-panel-close{ position:absolute;top:12px;right:12px;width:40px;height:40px;min-width:40px;margin:0;border-radius:13px; display:inline-flex;align-items:center;justify-content:center; } #articleSharePanel .share-options{ display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;align-items:start; } #articleSharePanel .share-option-wrap{min-width:0;width:100%;gap:7px;} #articleSharePanel .share-option{ width:min(100%,64px);height:54px;margin:0 auto;border-radius:16px; } #articleSharePanel .share-option svg{width:21px;height:21px;} #articleSharePanel .share-option-wrap small{max-width:100%;font-size:10px;line-height:1.2;white-space:normal;} #articleListenPanel{ position:relative;display:block;margin:0 0 16px;padding:20px 14px 16px;border-radius:22px;overflow:hidden; } #articleListenPanel .listen-panel-copy{ display:block;width:100%;min-height:44px;margin:0 0 16px;padding:0 52px 0 2px; } #articleListenPanel .listen-panel-copy strong{display:block;font-size:17px;line-height:1.2;margin-bottom:4px;white-space:normal;} #articleListenPanel .listen-panel-copy span{display:block;font-size:12px;line-height:1.35;white-space:normal;} #articleListenPanel .listen-panel-close{ position:absolute;top:12px;right:12px;width:40px;height:40px;min-width:40px;margin:0;border-radius:13px; } #articleListenPanel .listen-controls{ display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch; } #articleListenPanel .listen-btn{width:100%;height:54px;min-width:0;border-radius:16px;} #articleListenPanel .listen-control-wrap{width:100%;min-width:0;gap:7px;} #articleListenPanel .listen-control-wrap:nth-of-type(1){grid-column:1 / 3;} #articleListenPanel .listen-control-wrap:nth-of-type(2){grid-column:3 / 5;} #articleListenPanel .listen-control-wrap.listen-volume-wrap{ grid-column:1 / 5;width:100%;height:52px;padding:0 12px;border-radius:16px; } #articleListenPanel .listen-voice,#articleListenPanel .listen-speed:not(.listen-voice){ width:100%!important;min-width:0!important;max-width:none!important;height:52px;border-radius:16px; } #articleListenPanel .listen-volume{width:100%;min-width:0;flex:1;} } @media(max-width:389px){ #articleSharePanel .share-options{grid-template-columns:repeat(3,minmax(0,1fr));} #articleListenPanel .listen-controls{gap:8px;} #articleListenPanel .listen-btn{height:50px;} #articleListenPanel .listen-control-wrap:nth-of-type(1), #articleListenPanel .listen-control-wrap:nth-of-type(2){grid-column:1 / 5;} } @media(max-width:335px){ #articleSharePanel .share-options{grid-template-columns:repeat(2,minmax(0,1fr));} #articleSharePanel,#articleListenPanel{padding-left:12px;padding-right:12px;} } @media(orientation:landscape) and (max-height:520px) and (pointer:coarse){ #articleSharePanel,#articleListenPanel{padding-top:14px;padding-bottom:14px;} #articleSharePanel .share-panel-copy,#articleListenPanel .listen-panel-copy{margin-bottom:10px;} #articleListenPanel .listen-btn{height:46px;} } /* High-contrast/forced-colors support for interactive surfaces. */ @media(forced-colors:active){ .article-tool-btn,.share-option,.share-panel-close,.listen-btn,.listen-panel-close, .listen-speed,.listen-volume-wrap,.btn,.icon-btn{forced-color-adjust:auto;border:1px solid ButtonText;} #postBody .tts-speaking{outline:2px solid Highlight;box-shadow:none;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} }

Photo of the day

April 18, 2010 /   / Comments
animal cute flower hamster photography photos
Written by Mohammad Hijazi

About the author

Mohammad Hijazi is a marketing strategist, trainer and speaker based in Dubai. He has trained more than 25,000 professionals across 45 countries and writes here about brand, growth and communication.

See the full profile

Comments

Post a Comment