*/ body{ overflow-wrap:break-word; word-break:break-word; word-wrap:break-word } .hidden{ display:none } .invisible{ visibility:hidden } .container::after,.float-container::after{ clear:both; content:""; display:table } .clearboth{ clear:both } #comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link{ background:0 0; border:0; box-shadow:none; color:$(body.link.color); cursor:pointer; font-size:14px; font-weight:700; outline:0; text-decoration:none; text-transform:uppercase; width:auto } .dim-overlay{ background-color:rgba(0,0,0,.54); height:100vh; left:0; position:fixed; top:0; width:100% } #sharing-dim-overlay{ background-color:transparent } input::-ms-clear{ display:none } .blogger-logo,.svg-icon-24.blogger-logo{ fill:#ff9800; opacity:1 } .loading-spinner-large{ -webkit-animation:mspin-rotate 1.568s infinite linear; animation:mspin-rotate 1.568s infinite linear; height:48px; overflow:hidden; position:absolute; width:48px; z-index:200 } .loading-spinner-large>div{ -webkit-animation:mspin-revrot 5332ms infinite steps(4); animation:mspin-revrot 5332ms infinite steps(4) } .loading-spinner-large>div>div{ -webkit-animation:mspin-singlecolor-large-film 1333ms infinite steps(81); animation:mspin-singlecolor-large-film 1333ms infinite steps(81); background-size:100%; height:48px; width:3888px } .mspin-black-large>div>div,.mspin-grey_54-large>div>div{ background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg) } .mspin-white-large>div>div{ background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg) } .mspin-grey_54-large{ opacity:.54 } @-webkit-keyframes mspin-singlecolor-large-film{ from{ -webkit-transform:translateX(0); transform:translateX(0) } to{ -webkit-transform:translateX(-3888px); transform:translateX(-3888px) } } @keyframes mspin-singlecolor-large-film{ from{ -webkit-transform:translateX(0); transform:translateX(0) } to{ -webkit-transform:translateX(-3888px); transform:translateX(-3888px) } } @-webkit-keyframes mspin-rotate{ from{ -webkit-transform:rotate(0); transform:rotate(0) } to{ -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @keyframes mspin-rotate{ from{ -webkit-transform:rotate(0); transform:rotate(0) } to{ -webkit-transform:rotate(360deg); transform:rotate(360deg) } } @-webkit-keyframes mspin-revrot{ from{ -webkit-transform:rotate(0); transform:rotate(0) } to{ -webkit-transform:rotate(-360deg); transform:rotate(-360deg) } } @keyframes mspin-revrot{ from{ -webkit-transform:rotate(0); transform:rotate(0) } to{ -webkit-transform:rotate(-360deg); transform:rotate(-360deg) } } .skip-navigation{ background-color:#fff; box-sizing:border-box; color:#000; display:block; height:0; left:0; line-height:50px; overflow:hidden; padding-top:0; position:fixed; text-align:center; top:0; -webkit-transition:box-shadow .3s,height .3s,padding-top .3s; transition:box-shadow .3s,height .3s,padding-top .3s; width:100%; z-index:900 } .skip-navigation:focus{ box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2); height:50px } #main{ outline:0 } .main-heading{ position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden } .Attribution{ margin-top:1em; text-align:center } .Attribution .blogger img,.Attribution .blogger svg{ vertical-align:bottom } .Attribution .blogger img{ margin-$endSide:.5em } .Attribution div{ line-height:24px; margin-top:.5em } .Attribution .copyright,.Attribution .image-attribution{ font-size:.7em; margin-top:1.5em } .BLOG_mobile_video_class{ display:none } .bg-photo{ background-attachment:scroll!important } body .CSS_LIGHTBOX{ z-index:900 } .extendable .show-less,.extendable .show-more{ border-color:$(body.link.color); color:$(body.link.color); margin-top:8px } .extendable .show-less.hidden,.extendable .show-more.hidden{ display:none } .inline-ad{ display:none; max-width:100%; overflow:hidden } .adsbygoogle{ display:block } #cookieChoiceInfo{ bottom:0; top:auto } iframe.b-hbp-video{ border:0 } .post-body img{ max-width:100% } .post-body iframe{ max-width:100% } .post-body a[imageanchor="1"]{ display:inline-block } .byline{ margin-$endSide:1em } .byline:last-child{ margin-$endSide:0 } .link-copied-dialog{ max-width:520px; outline:0 } .link-copied-dialog .modal-dialog-buttons{ margin-top:8px } .link-copied-dialog .goog-buttonset-default{ background:0 0; border:0 } .link-copied-dialog .goog-buttonset-default:focus{ outline:0 } .paging-control-container{ margin-bottom:16px } .paging-control-container .paging-control{ display:inline-block } .paging-control-container .comment-range-text::after,.paging-control-container .paging-control{ color:$(body.link.color) } .paging-control-container .comment-range-text,.paging-control-container .paging-control{ margin-$endSide:8px } .paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{ content:"\b7"; cursor:default; padding-$startSide:8px; pointer-events:none } .paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{ content:none } .byline.reactions iframe{ height:20px } .b-notification{ color:#000; background-color:#fff; border-bottom:solid 1px #000; box-sizing:border-box; padding:16px 32px; text-align:center } .b-notification.visible{ -webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1); transition:margin-top .3s cubic-bezier(.4,0,.2,1) } .b-notification.invisible{ position:absolute } .b-notification-close{ position:absolute; right:8px; top:8px } .no-posts-message{ line-height:40px; text-align:center } @media screen and (max-width:968px){ body.item-view .post-body a[imageanchor="1"][style*="float: left;"],body.item-view .post-body a[imageanchor="1"][style*="float: right;"]{ float:none!important; clear:none!important } body.item-view .post-body a[imageanchor="1"] img{ display:block; height:auto; margin:0 auto } body.item-view .post-body>.separator:first-child>a[imageanchor="1"]:first-child{ margin-top:20px } .post-body a[imageanchor]{ display:block } body.item-view .post-body a[imageanchor="1"]{ margin-left:0!important; margin-right:0!important } body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"]{ margin-top:16px } } .item-control{ display:none } #comments{ border-top:1px dashed rgba(0,0,0,.54); margin-top:20px; padding:20px } #comments .comment-thread ol{ margin:0; padding-left:0; padding-$startSide:0 } #comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{ margin-left:60px } #comments .comment-thread .thread-count{ display:none } #comments .comment{ list-style-type:none; padding:0 0 30px; position:relative } #comments .comment .comment{ padding-bottom:8px } .comment .avatar-image-container{ position:absolute } .comment .avatar-image-container img{ border-radius:50% } .avatar-image-container svg,.comment .avatar-image-container .avatar-icon{ border-radius:50%; border:solid 1px $(item.action.color); box-sizing:border-box; fill:$(item.action.color); height:35px; margin:0; padding:7px; width:35px } .comment .comment-block{ margin-top:10px; margin-$startSide:60px; padding-bottom:0 } #comments .comment-author-header-wrapper{ margin-left:40px } #comments .comment .thread-expanded .comment-block{ padding-bottom:20px } #comments .comment .comment-header .user,#comments .comment .comment-header .user a{ color:$(body.text.color); font-style:normal; font-weight:700 } #comments .comment .comment-actions{ bottom:0; margin-bottom:15px; position:absolute } #comments .comment .comment-actions>*{ margin-right:8px } #comments .comment .comment-header .datetime{ bottom:0; color:$(item.subtitle.color); display:inline-block; font-size:13px; font-style:italic; margin-$startSide:8px } #comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{ color:$(item.subtitle.color) } #comments .comment .comment-content,.comment .comment-body{ margin-top:12px; word-break:break-word } .comment-body{ margin-bottom:12px } #comments.embed[data-num-comments="0"]{ border:0; margin-top:0; padding-top:0 } #comments.embed[data-num-comments="0"] #comment-post-message,#comments.embed[data-num-comments="0"] div.comment-form>p,#comments.embed[data-num-comments="0"] p.comment-footer{ display:none } #comment-editor-src{ display:none } .comments .comments-content .loadmore.loaded{ max-height:0; opacity:0; overflow:hidden } .extendable .remaining-items{ height:0; overflow:hidden; -webkit-transition:height .3s cubic-bezier(.4,0,.2,1); transition:height .3s cubic-bezier(.4,0,.2,1) } .extendable .remaining-items.expanded{ height:auto } .svg-icon-24,.svg-icon-24-button{ cursor:pointer; height:24px; width:24px; min-width:24px } .touch-icon{ margin:-12px; padding:12px } .touch-icon:active,.touch-icon:focus{ background-color:rgba(153,153,153,.4); border-radius:50% } svg:not(:root).touch-icon{ overflow:visible } html[dir=rtl] .rtl-reversible-icon{ -webkit-transform:scaleX(-1); -ms-transform:scaleX(-1); transform:scaleX(-1) } .svg-icon-24-button,.touch-icon-button{ background:0 0; border:0; margin:0; outline:0; padding:0 } .touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{ background-color:transparent } .touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{ background-color:rgba(153,153,153,.4); border-radius:50% } .Profile .default-avatar-wrapper .avatar-icon{ border-radius:50%; border:solid 1px $(sidebar.icon.color); box-sizing:border-box; fill:$(sidebar.icon.color); margin:0 } .Profile .individual .default-avatar-wrapper .avatar-icon{ padding:25px } .Profile .individual .avatar-icon,.Profile .individual .profile-img{ height:120px; width:120px } .Profile .team .default-avatar-wrapper .avatar-icon{ padding:8px } .Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{ height:40px; width:40px } .snippet-container{ margin:0; position:relative; overflow:hidden } .snippet-fade{ bottom:0; box-sizing:border-box; position:absolute; width:96px } .snippet-fade{ $endSide:0 } .snippet-fade:after{ content:"\2026" } .snippet-fade:after{ float:$endSide } .post-bottom{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap } .post-footer{ -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 } .post-footer>*{ -webkit-box-flex:0; -webkit-flex:0 1 auto; -ms-flex:0 1 auto; flex:0 1 auto } .post-footer .byline:last-child{ margin-$endSide:1em } .jump-link{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } .centered-top-container.sticky{ left:0; position:fixed; right:0; top:0; width:auto; z-index:8; -webkit-transition-property:opacity,-webkit-transform; transition-property:opacity,-webkit-transform; transition-property:transform,opacity; transition-property:transform,opacity,-webkit-transform; -webkit-transition-duration:.2s; transition-duration:.2s; -webkit-transition-timing-function:cubic-bezier(.4,0,.2,1); transition-timing-function:cubic-bezier(.4,0,.2,1) } .centered-top-placeholder{ display:none } .collapsed-header .centered-top-placeholder{ display:block } .centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{ display:none } .centered-top-container.sticky .Header .replaced h1{ display:block } .centered-top-container.sticky .Header .header-widget{ background:0 0 } .centered-top-container.sticky .Header .header-image-wrapper{ display:none } .centered-top-container img,.centered-top-placeholder img{ max-width:100% } .collapsible{ -webkit-transition:height .3s cubic-bezier(.4,0,.2,1); transition:height .3s cubic-bezier(.4,0,.2,1) } .collapsible,.collapsible>summary{ display:block; overflow:hidden } .collapsible>:not(summary){ display:none } .collapsible[open]>:not(summary){ display:block } .collapsible:focus,.collapsible>summary:focus{ outline:0 } .collapsible>summary{ cursor:pointer; display:block; padding:0 } .collapsible:focus>summary,.collapsible>summary:focus{ background-color:transparent } .collapsible>summary::-webkit-details-marker{ display:none } .collapsible-title{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } .collapsible-title .title{ -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{ display:block } .collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{ display:none } .overflowable-container{ max-height:$(header.items.font.size * 12 / 7 + 24px); overflow:hidden; position:relative } .overflow-button{ cursor:pointer } #overflowable-dim-overlay{ background:0 0 } .overflow-popup{ box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); background-color:$(body.background.color); left:0; max-width:calc(100% - 32px); position:absolute; top:0; visibility:hidden; z-index:101 } .overflow-popup ul{ list-style:none } .overflow-popup .tabs li,.overflow-popup li{ display:block; height:auto } .overflow-popup .tabs li{ padding-left:0; padding-right:0 } .overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{ display:none } .ripple{ position:relative } .ripple>*{ z-index:1 } .splash-wrapper{ bottom:0; left:0; overflow:hidden; pointer-events:none; position:absolute; right:0; top:0; z-index:0 } .splash{ background:#ccc; border-radius:100%; display:block; opacity:.6; position:absolute; -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0) } .splash.animate{ -webkit-animation:ripple-effect .4s linear; animation:ripple-effect .4s linear } @-webkit-keyframes ripple-effect{ 100%{ opacity:0; -webkit-transform:scale(2.5); transform:scale(2.5) } } @keyframes ripple-effect{ 100%{ opacity:0; -webkit-transform:scale(2.5); transform:scale(2.5) } } .search{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; line-height:24px; width:24px } .search.focused{ width:100% } .search.focused .section{ width:100% } .search form{ z-index:101 } .search h3{ display:none } .search form{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-flex:1; -webkit-flex:1 0 0; -ms-flex:1 0 0px; flex:1 0 0; border-bottom:solid 1px transparent; padding-bottom:8px } .search form>*{ display:none } .search.focused form>*{ display:block } .search .search-input label{ display:none } .centered-top-placeholder.cloned .search form{ z-index:30 } .search.focused form{ border-color:$(body.text.color); position:relative; width:auto } .collapsed-header .centered-top-container .search.focused form{ border-bottom-color:transparent } .search-expand{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto } .search-expand-text{ display:none } .search-close{ display:inline; vertical-align:middle } .search-input{ -webkit-box-flex:1; -webkit-flex:1 0 1px; -ms-flex:1 0 1px; flex:1 0 1px } .search-input input{ background:0 0; border:0; box-sizing:border-box; color:$(body.text.color); display:inline-block; outline:0; width:calc(100% - 48px) } .search-input input.no-cursor{ color:transparent; text-shadow:0 0 0 $(body.text.color) } .collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{ color:$(body.text.color) } .collapsed-header .centered-top-container .search-input input.no-cursor{ color:transparent; text-shadow:0 0 0 $(body.text.color) } .collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{ outline:0 } .search-focused>*{ visibility:hidden } .search-focused .search,.search-focused .search-icon{ visibility:visible } .search.focused .search-action{ display:block } .search.focused .search-action:disabled{ opacity:.3 } .sidebar-container{ background-color:#f7f7f7; max-width:$(sidebar.width); overflow-y:auto; -webkit-transition-property:-webkit-transform; transition-property:-webkit-transform; transition-property:transform; transition-property:transform,-webkit-transform; -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-timing-function:cubic-bezier(0,0,.2,1); transition-timing-function:cubic-bezier(0,0,.2,1); width:$(sidebar.width); z-index:101; -webkit-overflow-scrolling:touch } .sidebar-container .navigation{ line-height:0; padding:16px } .sidebar-container .sidebar-back{ cursor:pointer } .sidebar-container .widget{ background:0 0; margin:0 16px; padding:16px 0 } .sidebar-container .widget .title{ color:$(sidebar.widget.title.color); margin:0 } .sidebar-container .widget ul{ list-style:none; margin:0; padding:0 } .sidebar-container .widget ul ul{ margin-$startSide:1em } .sidebar-container .widget li{ font-size:16px; line-height:normal } .sidebar-container .widget+.widget{ border-top:1px dashed $(sidebar.separator.color) } .BlogArchive li{ margin:16px 0 } .BlogArchive li:last-child{ margin-bottom:0 } .Label li a{ display:inline-block } .BlogArchive .post-count,.Label .label-count{ float:$endSide; margin-$startSide:.25em } .BlogArchive .post-count::before,.Label .label-count::before{ content:"(" } .BlogArchive .post-count::after,.Label .label-count::after{ content:")" } .widget.Translate .skiptranslate>div{ display:block!important } .widget.Profile .profile-link{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex } .widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; margin-$endSide:1em } .widget.Profile .individual .profile-link{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column } .widget.Profile .team .profile-link .profile-name{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center; display:block; -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto } .dim-overlay{ background-color:rgba(0,0,0,.54); z-index:100 } body.sidebar-visible{ overflow-y:hidden } @media screen and (max-width:$(feed.width + sidebar.width + 20px - 1px)){ .sidebar-container{ bottom:0; position:fixed; top:0; left:auto; right:0 } .sidebar-container.sidebar-invisible{ -webkit-transition-timing-function:cubic-bezier(.4,0,.6,1); transition-timing-function:cubic-bezier(.4,0,.6,1); -webkit-transform:translateX($(sidebar.width)); -ms-transform:translateX($(sidebar.width)); transform:translateX($(sidebar.width)) } } .dialog{ box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); background:$(body.background.color); box-sizing:border-box; color:$(body.text.color); padding:30px; position:fixed; text-align:center; width:calc(100% - 24px); z-index:101 } .dialog input[type=email],.dialog input[type=text]{ background-color:transparent; border:0; border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12); color:$(body.text.color); display:block; font-family:$(body.text.font.family); font-size:16px; line-height:24px; margin:auto; padding-bottom:7px; outline:0; text-align:center; width:100% } .dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{ color:$(body.text.color) } .dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{ color:$(body.text.color) } .dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{ color:$(body.text.color) } .dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{ color:$(body.text.color) } .dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{ color:$(body.text.color) } .dialog input[type=email]:focus,.dialog input[type=text]:focus{ border-bottom:solid 2px $(body.link.color); padding-bottom:6px } .dialog input.no-cursor{ color:transparent; text-shadow:0 0 0 $(body.text.color) } .dialog input.no-cursor:focus{ outline:0 } .dialog input.no-cursor:focus{ outline:0 } .dialog input[type=submit]{ font-family:$(body.text.font.family) } .dialog .goog-buttonset-default{ color:$(body.link.color) } .subscribe-popup{ max-width:364px } .subscribe-popup h3{ color:$(item.title.color); font-size:1.8em; margin-top:0 } .subscribe-popup .FollowByEmail h3{ display:none } .subscribe-popup .FollowByEmail .follow-by-email-submit{ color:$(body.link.color); display:inline-block; margin:0 auto; margin-top:24px; width:auto; white-space:normal } .subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{ cursor:default; opacity:.3 } @media (max-width:800px){ .blog-name div.widget.Subscribe{ margin-bottom:16px } body.item-view .blog-name div.widget.Subscribe{ margin:8px auto 16px auto; width:100% } } body#layout .bg-photo,body#layout .bg-photo-overlay{ display:none } body#layout .page_body{ padding:0; position:relative; top:0 } body#layout .page{ display:inline-block; left:inherit; position:relative; vertical-align:top; width:540px } body#layout .centered{ max-width:954px } body#layout .navigation{ display:none } body#layout .sidebar-container{ display:inline-block; width:40% } body#layout .hamburger-menu,body#layout .search{ display:none } .widget.Sharing .sharing-button{ display:none } .widget.Sharing .sharing-buttons li{ padding:0 } .widget.Sharing .sharing-buttons li span{ display:none } .post-share-buttons{ position:relative } .centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{ fill:$(sharing.icons.color) } .sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{ background-color:transparent } .share-buttons{ background-color:$(sharing.background.color); border-radius:2px; box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); color:$(sharing.text.color); list-style:none; margin:0; padding:8px 0; position:absolute; top:-11px; min-width:200px; z-index:101 } .share-buttons.hidden{ display:none } .sharing-button{ background:0 0; border:0; margin:0; outline:0; padding:0; cursor:pointer } .share-buttons li{ margin:0; height:48px } .share-buttons li:last-child{ margin-bottom:0 } .share-buttons li .sharing-platform-button{ box-sizing:border-box; cursor:pointer; display:block; height:100%; margin-bottom:0; padding:0 16px; position:relative; width:100% } .share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{ background-color:rgba(128,128,128,.1); outline:0 } .share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{ position:absolute; top:10px } .share-buttons li span.sharing-platform-button{ position:relative; top:0 } .share-buttons li .platform-sharing-text{ display:block; font-size:16px; line-height:48px; white-space:nowrap } .share-buttons li .platform-sharing-text{ margin-$startSide:56px } .flat-button{ cursor:pointer; display:inline-block; font-weight:700; text-transform:uppercase; border-radius:2px; padding:8px; margin:-8px } .flat-icon-button{ background:0 0; border:0; margin:0; outline:0; padding:0; margin:-12px; padding:12px; cursor:pointer; box-sizing:content-box; display:inline-block; line-height:0 } .flat-icon-button,.flat-icon-button .splash-wrapper{ border-radius:50% } .flat-icon-button .splash.animate{ -webkit-animation-duration:.3s; animation-duration:.3s } h1,h2,h3,h4,h5,h6{ margin:0 } .post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{ margin:1em 0 } .action-link,a{ color:$(body.link.color); cursor:pointer; text-decoration:none } .action-link:visited,a:visited{ color:$(body.link.visited.color) } .action-link:hover,a:hover{ color:$(body.link.hover.color) } body{ background-color:$(body.background.color); color:$(body.text.color); font:$(body.text.font); margin:0 auto } .unused{ background:$(body.background) } .dim-overlay{ z-index:100 } .all-container{ min-height:100vh; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column } body.sidebar-visible .all-container{ overflow-y:scroll } .page{ max-width:$(feed.width); width:100% } .Blog{ padding:0; padding-$startSide:136px } .main_content_container{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; margin:0 auto; max-width:$(feed.width + sidebar.width); width:100% } .centered-top-container{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto } .centered-top,.centered-top-placeholder{ box-sizing:border-box; width:100% } .centered-top{ box-sizing:border-box; margin:0 auto; max-width:$(feed.width); padding:44px 136px 32px 136px; width:100% } .centered-top h3{ color:$(header.description.color); font:$(header.items.font) } .centered{ width:100% } .centered-top-firstline{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position:relative; width:100% } .main_header_elements{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-flex:0; -webkit-flex:0 1 auto; -ms-flex:0 1 auto; flex:0 1 auto; -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1; overflow-x:hidden; width:100% } html[dir=rtl] .main_header_elements{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } body.search-view .centered-top.search-focused .blog-name{ display:none } .widget.Header img{ max-width:100% } .blog-name{ -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; min-width:0; -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1; -webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1); transition:opacity .2s cubic-bezier(.4,0,.2,1) } .subscribe-section-container{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } .search{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3; line-height:$(blog.title.font.size) } .search svg{ margin-bottom:$(blog.title.font.size / 2 - 12px); margin-top:$(blog.title.font.size / 2 - 12px); padding-bottom:0; padding-top:0 } .search,.search.focused{ display:block; width:auto } .search .section{ opacity:0; position:absolute; right:0; top:0; -webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1); transition:opacity .2s cubic-bezier(.4,0,.2,1) } .search-expand{ background:0 0; border:0; margin:0; outline:0; padding:0; display:block } .search.focused .search-expand{ visibility:hidden } .hamburger-menu{ float:right; height:$(blog.title.font.size) } .search-expand,.subscribe-section-container{ margin-$startSide:44px } .hamburger-section{ -webkit-box-flex:1; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; margin-left:44px; -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } html[dir=rtl] .hamburger-section{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 } .search-expand-icon{ display:none } .search-expand-text{ display:block } .search-input{ width:100% } .search-focused .hamburger-section{ visibility:visible } .centered-top-secondline .PageList ul{ margin:0; max-height:$(header.items.font.size * 12 / 7 * 6 + 144px); overflow-y:hidden } .centered-top-secondline .PageList li{ margin-$endSide:30px } .centered-top-secondline .PageList li:first-child a{ padding-$startSide:0 } .centered-top-secondline .PageList .overflow-popup ul{ overflow-y:auto } .centered-top-secondline .PageList .overflow-popup li{ display:block } .centered-top-secondline .PageList .overflow-popup li.hidden{ display:none } .overflowable-contents li{ display:inline-block; height:$(header.items.font.size * 12 / 7 + 24px) } .sticky .blog-name{ overflow:hidden } .sticky .blog-name .widget.Header h1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sticky .blog-name .widget.Header p,.sticky .centered-top-secondline{ display:none } .centered-top-container,.centered-top-placeholder{ background:$(header.background) } .centered-top .svg-icon-24{ fill:$(header.items.color) } .blog-name h1,.blog-name h1 a{ color:$(blog.title.color); font:$(blog.title.font); line-height:$(blog.title.font.size); text-transform:uppercase } .widget.Header .header-widget p{ font:$(header.description.font); font-style:italic; color:$(header.description.color); line-height:1.6; max-width:$(feed.width - 604px) } .centered-top .flat-button{ color:$(header.items.color); cursor:pointer; font:$(header.items.font); line-height:$(blog.title.font.size); text-transform:uppercase; -webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1); transition:opacity .2s cubic-bezier(.4,0,.2,1) } .subscribe-button{ background:0 0; border:0; margin:0; outline:0; padding:0; display:block } html[dir=ltr] .search form{ margin-right:12px } .search.focused .section{ opacity:1; margin-right:36px; width:calc(100% - 36px) } .search input{ border:0; color:$(header.description.color); font:$(search.input.font); line-height:$(blog.title.font.size); outline:0; width:100% } .search form{ padding-bottom:0 } .search input[type=submit]{ display:none } .search input::-webkit-input-placeholder{ text-transform:uppercase } .search input::-moz-placeholder{ text-transform:uppercase } .search input:-ms-input-placeholder{ text-transform:uppercase } .search input::-ms-input-placeholder{ text-transform:uppercase } .search input::placeholder{ text-transform:uppercase } .centered-top-secondline .dim-overlay,.search .dim-overlay{ background:0 0 } .centered-top-secondline .PageList .overflow-button a,.centered-top-secondline .PageList li a{ color:$(header.pages.color); font:$(header.items.font); line-height:$(header.items.font.size * 12 / 7 + 24px); padding:12px } .centered-top-secondline .PageList li.selected a{ color:$(header.pages.selected.color) } .centered-top-secondline .overflow-popup .PageList li a{ color:$(body.text.color) } .PageList ul{ padding:0 } .sticky .search form{ border:0 } .sticky{ box-shadow:0 0 20px 0 rgba(0,0,0,.7) } .sticky .centered-top{ padding-bottom:0; padding-top:0 } .sticky .blog-name h1,.sticky .search,.sticky .search-expand,.sticky .subscribe-button{ line-height:$(blog.title.font.size + 16px) } .sticky .hamburger-section,.sticky .search-expand,.sticky .search.focused .search-submit{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; height:$(blog.title.font.size + 16px) } .subscribe-popup h3{ color:$(dialog.title.color); font:$(dialog.title.font); margin-bottom:24px } .subscribe-popup div.widget.FollowByEmail .follow-by-email-address{ color:$(dialog.input.color); font:$(dialog.input.font) } .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit{ color:$(dialog.action.color); font:$(dialog.action.font); margin-top:24px } .post-content{ -webkit-box-flex:0; -webkit-flex:0 1 auto; -ms-flex:0 1 auto; flex:0 1 auto; -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1; margin-$endSide:76px; max-width:$(feed.width - 604px); width:100% } .post-filter-message{ background-color:$(body.link.color); color:$(body.background.color); display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; font:$(feed.subtitle.font); margin:40px 136px 48px 136px; padding:10px; position:relative } .post-filter-message>*{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto } .post-filter-message .search-query{ font-style:italic; quotes:"\201c" "\201d" "\2018" "\2019" } .post-filter-message .search-query::before{ content:open-quote } .post-filter-message .search-query::after{ content:close-quote } .post-filter-message div{ display:inline-block } .post-filter-message a{ color:$(body.background.color); display:inline-block; text-transform:uppercase } .post-filter-description{ -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; margin-$endSide:16px } .post-title{ margin-top:0 } body.feed-view .post-outer-container{ margin-top:85px } body.feed-view .feed-message+.post-outer-container,body.feed-view .post-outer-container:first-child{ margin-top:0 } .post-outer{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position:relative } .post-outer .snippet-thumbnail{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; background:#000; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; height:256px; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; margin-$endSide:136px; overflow:hidden; -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2; position:relative; width:256px } .post-outer .thumbnail-empty{ background:0 0 } .post-outer .snippet-thumbnail-img{ background-position:center; background-repeat:no-repeat; background-size:cover; width:100%; height:100% } .post-outer .snippet-thumbnail img{ max-height:100% } .post-title-container{ margin-bottom:16px } .post-bottom{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; align-items:baseline; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between } .post-share-buttons-bottom{ float:left } .footer{ -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; margin:auto auto 0 auto; padding-bottom:32px; width:auto } .post-header-container{ margin-bottom:12px } .post-header-container .post-share-buttons-top{ float:right } .post-header-container .post-header{ float:$startSide } .byline{ display:inline-block; margin-bottom:8px } .byline,.byline a,.flat-button{ color:$(feed.button.color); font:$(feed.button.font) } .flat-button.ripple .splash{ background-color:rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),.4) } .flat-button.ripple:hover{ background-color:rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),.12) } .post-footer .byline{ text-transform:uppercase } .post-comment-link{ line-height:1 } .blog-pager{ float:$endSide; margin-$endSide:468px; margin-top:48px } .FeaturedPost{ margin-bottom:56px } .FeaturedPost h3{ margin:16px 136px 8px 136px } .shown-ad{ margin-bottom:85px; margin-top:85px } .shown-ad .inline-ad{ display:block; max-width:$(feed.width - 604px) } body.feed-view .shown-ad:last-child{ display:none } .post-title,.post-title a{ color:$(feed.title.color); font:$(feed.title.font); line-height:1.3333333333 } .feed-message{ color:$(feed.subtitle.color); font:$(feed.subtitle.font); margin-bottom:52px } .post-header-container .byline,.post-header-container .byline a{ color:$(feed.subtitle.color); font:$(feed.subtitle.font) } .post-header-container .byline.post-author:not(:last-child)::after{ content:"\b7" } .post-header-container .byline.post-author:not(:last-child){ margin-$endSide:0 } .post-snippet-container{ font:$(feed.text.font) } .sharing-button{ text-transform:uppercase; word-break:normal } .post-outer-container .svg-icon-24{ fill:$(feed.button.color) } .post-body{ color:$(feed.text.color); font:$(feed.text.font); line-height:2; margin-bottom:24px } .blog-pager .blog-pager-older-link{ color:$(feed.button.color); float:right; font:$(feed.button.font); text-transform:uppercase } .no-posts-message{ margin:32px } body.item-view .Blog .post-title-container{ background-color:$(item.title.background.color); box-sizing:border-box; margin-bottom:-1px; padding-bottom:86px; padding-$endSide:290px; padding-$startSide:140px; padding-top:124px; width:100% } body.item-view .Blog .post-title,body.item-view .Blog .post-title a{ color:$(item.title.color); font:$(item.title.font); line-height:1.4166666667; margin-bottom:0 } body.item-view .Blog{ margin:0; margin-bottom:85px; padding:0 } body.item-view .Blog .post-content{ margin-$endSide:0; max-width:none } body.item-view .comments,body.item-view .shown-ad,body.item-view .widget.Blog .post-bottom{ margin-bottom:0; margin-$endSide:400px; margin-$startSide:140px; margin-top:0 } body.item-view .widget.Header header p{ max-width:$(feed.width - 540px) } body.item-view .shown-ad{ margin-bottom:24px; margin-top:24px } body.item-view .Blog .post-header-container{ padding-$startSide:140px } body.item-view .Blog .post-header-container .post-author-profile-pic-container{ background-color:$(item.title.background.color); border-top:1px solid $(item.title.background.color); float:$startSide; height:84px; margin-$endSide:24px; margin-$startSide:-140px; padding-$startSide:140px } body.item-view .Blog .post-author-profile-pic{ max-height:100% } body.item-view .Blog .post-header{ float:$startSide; height:84px } body.item-view .Blog .post-header>*{ position:relative; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%) } body.item-view .post-body{ color:$(body.text.color); font:$(body.text.font); line-height:2 } body.item-view .Blog .post-body-container{ padding-$endSide:290px; position:relative; margin-$startSide:140px; margin-top:20px; margin-bottom:32px } body.item-view .Blog .post-body{ margin-bottom:0; margin-$endSide:110px } body.item-view .Blog .post-body::first-letter{ float:$startSide; font-size:$(body.text.font.size * 2 * 2); font-weight:600; line-height:1; margin-$endSide:16px } body.item-view .Blog .post-body div[style*="text-align: center"]::first-letter{ float:none; font-size:inherit; font-weight:inherit; line-height:inherit; margin-right:0 } body.item-view .Blog .post-body::first-line{ color:$(item.action.color) } body.item-view .Blog .post-body-container .post-sidebar{ $endSide:0; position:absolute; top:0; width:290px } body.item-view .Blog .post-body-container .post-sidebar .sharing-button{ display:inline-block } .widget.Attribution{ clear:both; font:$(attribution.text.font); padding-top:2em } .widget.Attribution .blogger{ margin:12px } .widget.Attribution svg{ fill:$(attribution.icon.color) } body.item-view .PopularPosts{ margin-$startSide:140px } body.item-view .PopularPosts .widget-content>ul{ padding-left:0 } body.item-view .PopularPosts .widget-content>ul>li{ display:block } body.item-view .PopularPosts .post-content{ margin-$endSide:76px; max-width:664px } body.item-view .PopularPosts .post:not(:last-child){ margin-bottom:85px } body.item-view .post-body-container img{ height:auto; max-width:100% } body.item-view .PopularPosts>.title{ color:$(item.subtitle.color); font:$(item.subtitle.font); margin-bottom:36px } body.item-view .post-sidebar .post-labels-sidebar{ margin-top:48px; min-width:150px } body.item-view .post-sidebar .post-labels-sidebar h3{ color:$(body.text.color); font:$(item.action.font); margin-bottom:16px } body.item-view .post-sidebar .post-labels-sidebar a{ color:$(item.action.color); display:block; font:$(item.label.font); font-style:italic; line-height:2 } body.item-view blockquote{ font:$(item.blockquote.font); font-style:italic; quotes:"\201c" "\201d" "\2018" "\2019" } body.item-view blockquote::before{ content:open-quote } body.item-view blockquote::after{ content:close-quote } body.item-view .post-bottom{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; float:none } body.item-view .widget.Blog .post-share-buttons-bottom{ -webkit-box-flex:0; -webkit-flex:0 1 auto; -ms-flex:0 1 auto; flex:0 1 auto; -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 } body.item-view .widget.Blog .post-footer{ line-height:1; margin-$endSide:24px } .widget.Blog body.item-view .post-bottom{ margin-$endSide:0; margin-bottom:80px } body.item-view .post-footer .post-labels .byline-label{ color:$(body.text.color); font:$(item.action.font) } body.item-view .post-footer .post-labels a{ color:$(item.action.color); display:inline-block; font:$(item.label.font); line-height:2 } body.item-view .post-footer .post-labels a:not(:last-child)::after{ content:", " } body.item-view #comments{ border-top:0; padding:0 } body.item-view #comments h3.title{ color:$(item.subtitle.color); font:$(item.subtitle.font); margin-bottom:48px } body.item-view #comments .comment-form h4{ position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden } .heroPost{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; position:relative } .widget.Blog .heroPost{ margin-$startSide:-136px } .heroPost .big-post-title .post-snippet{ color:$(heropost.main.text.color) } .heroPost.noimage .post-snippet{ color:$(heropost.secondary.text.color) } .heroPost .big-post-image-top{ display:none; background-size:cover; background-position:center } .heroPost .big-post-title{ background-color:$(heropost.main.background.color); box-sizing:border-box; -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; max-width:$(feed.width - 392px); min-width:0; padding-bottom:84px; padding-$endSide:76px; padding-$startSide:136px; padding-top:76px } .heroPost.noimage .big-post-title{ -webkit-box-flex:1; -webkit-flex:1 0 auto; -ms-flex:1 0 auto; flex:1 0 auto; max-width:480px; width:480px } .heroPost .big-post-title h3{ margin:0 0 24px } .heroPost .big-post-title h3 a{ color:$(heropost.main.title.color) } .heroPost .big-post-title .post-body{ color:$(heropost.main.text.color) } .heroPost .big-post-title .item-byline{ color:$(heropost.main.text.color); margin-bottom:24px } .heroPost .big-post-title .item-byline .post-timestamp{ display:block } .heroPost .big-post-title .item-byline a{ color:$(heropost.main.text.color) } .heroPost .byline,.heroPost .byline a,.heroPost .flat-button{ color:$(heropost.main.button.color) } .heroPost .flat-button.ripple .splash{ background-color:rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),.4) } .heroPost .flat-button.ripple:hover{ background-color:rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),.12) } .heroPost .big-post-image{ background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-box-flex:0; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; width:392px } .heroPost .big-post-text{ background-color:$(heropost.secondary.background.color); box-sizing:border-box; color:$(heropost.secondary.text.color); -webkit-box-flex:1; -webkit-flex:1 1 auto; -ms-flex:1 1 auto; flex:1 1 auto; min-width:0; padding:48px } .heroPost .big-post-text .post-snippet-fade{ color:$(heropost.secondary.text.color); background:-webkit-linear-gradient(right,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent)); background:linear-gradient(to left,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent)) } .heroPost .big-post-text .byline,.heroPost .big-post-text .byline a,.heroPost .big-post-text .jump-link,.heroPost .big-post-text .sharing-button{ color:$(heropost.secondary.button.color) } .heroPost .big-post-text .snippet-item::first-letter{ color:$(heropost.secondary.dropcap.color); float:left; font-weight:700; margin-right:12px } .sidebar-container{ background-color:$(sidebar.backgroundColor) } body.sidebar-visible .sidebar-container{ box-shadow:0 0 20px 0 rgba(0,0,0,.7) } .sidebar-container .svg-icon-24{ fill:$(sidebar.icon.color) } .sidebar-container .navigation .sidebar-back{ float:right } .sidebar-container .widget{ padding-right:16px; margin-right:0; margin-left:38px } .sidebar-container .widget+.widget{ border-top:solid 1px #bdbdbd } .sidebar-container .widget .title{ font:$(sidebar.widget.title.font) } .collapsible{ width:100% } .widget.Profile{ border-top:0; margin:0; margin-left:38px; margin-top:24px; padding-right:0 } body.sidebar-visible .widget.Profile{ margin-left:0 } .widget.Profile h2{ display:none } .widget.Profile h3.title{ color:$(sidebar.profile.title.color); margin:16px 32px } .widget.Profile .individual{ text-align:center } .widget.Profile .individual .default-avatar-wrapper .avatar-icon{ margin:auto } .widget.Profile .team{ margin-bottom:32px; margin-left:32px; margin-right:32px } .widget.Profile ul{ list-style:none; padding:0 } .widget.Profile li{ margin:10px 0; text-align:left } .widget.Profile .profile-img{ border-radius:50%; float:none } .widget.Profile .profile-info{ margin-bottom:12px } .profile-snippet-fade{ background:-webkit-linear-gradient(right,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%); background:linear-gradient(to left,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%); height:1.7em; position:absolute; right:16px; top:11.7em; width:96px } .profile-snippet-fade::after{ content:"\2026"; float:right } .widget.Profile .profile-location{ color:$(sidebar.profile.text.color); font-size:16px; margin:0; opacity:.74 } .widget.Profile .team-member .profile-link::after{ clear:both; content:""; display:table } .widget.Profile .team-member .profile-name{ word-break:break-word } .widget.Profile .profile-datablock .profile-link{ color:$(sidebar.profile.title.color); font:$(sidebar.profile.link.font); font-size:24px; text-transform:none; word-break:break-word } .widget.Profile .profile-datablock .profile-link+div{ margin-top:16px!important } .widget.Profile .profile-link{ font:$(sidebar.profile.link.font); font-size:14px } .widget.Profile .profile-textblock{ color:$(sidebar.profile.text.color); font-size:14px; line-height:24px; margin:0 18px; opacity:.74; overflow:hidden; position:relative; word-break:break-word } .widget.Label .list-label-widget-content li a{ width:100%; word-wrap:break-word } .extendable .show-less,.extendable .show-more{ font:$(sidebar.profile.link.font); font-size:14px; margin:0 -8px } .widget.BlogArchive .post-count{ color:$(body.text.color) } .Label li{ margin:16px 0 } .Label li:last-child{ margin-bottom:0 } .post-snippet.snippet-container{ max-height:$(body.text.font.size * 4 * 2) } .post-snippet .snippet-item{ line-height:$(body.text.font.size * 2) } .post-snippet .snippet-fade{ background:-webkit-linear-gradient($startSide,$(body.background.color) 0,$(body.background.color) 20%,$(body.background.color.transparent) 100%); background:linear-gradient(to $startSide,$(body.background.color) 0,$(body.background.color) 20%,$(body.background.color.transparent) 100%); color:$(body.text.color); height:$(body.text.font.size * 2) } .hero-post-snippet.snippet-container{ max-height:$(body.text.font.size * 4 * 2) } .hero-post-snippet .snippet-item{ line-height:$(body.text.font.size * 2) } .hero-post-snippet .snippet-fade{ background:-webkit-linear-gradient($startSide,$(heropost.main.background.color) 0,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%); background:linear-gradient(to $startSide,$(heropost.main.background.color) 0,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%); color:$(heropost.main.text.color); height:$(body.text.font.size * 2) } .hero-post-snippet a{ color:$(heropost.main.link.color) } .hero-post-noimage-snippet.snippet-container{ max-height:$(body.text.font.size * 8 * 2) } .hero-post-noimage-snippet .snippet-item{ line-height:$(body.text.font.size * 2) } .hero-post-noimage-snippet .snippet-fade{ background:-webkit-linear-gradient($startSide,$(heropost.secondary.background.color) 0,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%); background:linear-gradient(to $startSide,$(heropost.secondary.background.color) 0,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%); color:$(heropost.secondary.text.color); height:$(body.text.font.size * 2) } .popular-posts-snippet.snippet-container{ max-height:$(body.text.font.size * 4 * 2) } .popular-posts-snippet .snippet-item{ line-height:$(body.text.font.size * 2) } .popular-posts-snippet .snippet-fade{ background:-webkit-linear-gradient($startSide,$(body.background.color) 0,$(body.background.color) 20%,$(body.background.color.transparent) 100%); background:linear-gradient(to $startSide,$(body.background.color) 0,$(body.background.color) 20%,$(body.background.color.transparent) 100%); color:$(body.text.color); height:$(body.text.font.size * 2) } .profile-snippet.snippet-container{ max-height:192px } .profile-snippet .snippet-item{ line-height:24px } .profile-snippet .snippet-fade{ background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%); background:linear-gradient(to $startSide,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%); color:$(sidebar.profile.text.color); height:24px } .hero-post-noimage-snippet .snippet-item::first-letter{ font-size:$(body.text.font.size * 4); line-height:$(body.text.font.size * 4) } #comments a,#comments cite,#comments div{ font-size:16px; line-height:1.4 } #comments .comment .comment-header .user,#comments .comment .comment-header .user a{ color:$(body.text.color); font:$(item.action.font) } #comments .comment .comment-header .datetime a{ color:$(item.subtitle.color); font:$(item.action.font) } #comments .comment .comment-header .datetime a::before{ content:"\b7 " } #comments .comment .comment-content{ margin-top:6px } #comments .comment .comment-actions{ color:$(item.action.color); font:$(item.action.font) } #comments .continue{ display:none } #comments .comment-footer{ margin-top:8px } .cmt_iframe_holder{ margin-$startSide:140px!important } body.variant-rockpool_deep_orange .centered-top-secondline .PageList .overflow-popup li a{ color:#000 } body.variant-rockpool_pink .blog-name h1,body.variant-rockpool_pink .blog-name h1 a{ text-transform:none } body.variant-rockpool_deep_orange .post-filter-message{ background-color:$(header.background.color) } @media screen and (max-width:$(feed.width + sidebar.width + 20px - 1px)){ .page{ float:none; margin:0 auto; max-width:none!important } .page_body{ max-width:$(feed.width); margin:0 auto } } @media screen and (max-width:1280px){ .heroPost .big-post-image{ display:table-cell; left:auto; position:static; top:auto } .heroPost .big-post-title{ display:table-cell } } @media screen and (max-width:1168px){ .centered-top-container,.centered-top-placeholder{ padding:24px 24px 32px 24px } .sticky{ padding:0 24px } .subscribe-section-container{ margin-$startSide:48px } .hamburger-section{ margin-left:48px } .big-post-text-inner,.big-post-title-inner{ margin:0 auto; max-width:920px } .centered-top{ padding:0; max-width:920px } .Blog{ padding:0 } body.item-view .Blog{ padding:0 24px; margin:0 auto; max-width:920px } .post-filter-description{ margin-$endSide:36px } .post-outer{ display:block } .post-content{ max-width:none; margin:0 } .post-outer .snippet-thumbnail{ width:920px; height:613.3333333333px; margin-bottom:16px } .post-outer .snippet-thumbnail.thumbnail-empty{ display:none } .shown-ad .inline-ad{ max-width:100% } body.item-view .Blog{ padding:0; max-width:none } .post-filter-message{ margin:24px calc((100% - 920px)/ 2); max-width:none } .FeaturedPost h3,body.feed-view .blog-posts,body.feed-view .feed-message{ margin-left:calc((100% - 920px)/ 2); margin-right:calc((100% - 920px)/ 2) } body.item-view .Blog .post-title-container{ padding:62px calc((100% - 920px)/ 2) 24px } body.item-view .Blog .post-header-container{ padding-$startSide:calc((100% - 920px)/ 2) } body.item-view .Blog .post-body-container,body.item-view .comments,body.item-view .post-outer-container>.shown-ad,body.item-view .widget.Blog .post-bottom{ margin:32px calc((100% - 920px)/ 2); padding:0 } body.item-view .cmt_iframe_holder{ margin:32px 24px!important } .blog-pager{ margin-left:calc((100% - 920px)/ 2); margin-right:calc((100% - 920px)/ 2) } body.item-view .post-bottom{ margin:0 auto; max-width:968px } body.item-view .PopularPosts .post-content{ max-width:100%; margin-right:0 } body.item-view .Blog .post-body{ margin-$endSide:0 } body.item-view .Blog .post-sidebar{ display:none } body.item-view .widget.Blog .post-share-buttons-bottom{ margin-$endSide:24px } body.item-view .PopularPosts{ margin:0 auto; max-width:920px } body.item-view .comment-thread-title{ margin-$startSide:calc((100% - 920px)/ 2) } .heroPost{ display:block } .heroPost .big-post-title{ display:block; max-width:none; padding:24px } .heroPost .big-post-image{ display:none } .heroPost .big-post-image-top{ display:block; height:613.3333333333px; margin:0 auto; max-width:920px } .heroPost .big-post-image-top-container{ background-color:$(heropost.main.background.color) } .heroPost.noimage .big-post-title{ max-width:none; width:100% } .heroPost.noimage .big-post-text{ position:static; width:100% } .heroPost .big-post-text{ padding:24px } } @media screen and (max-width:968px){ body{ font-size:$(body.text.font.size * 14 / 20) } .post-header-container .byline,.post-header-container .byline a{ font-size:14px } .post-title,.post-title a{ font-size:24px } .post-outer .snippet-thumbnail{ width:100%; height:calc((100vw - 48px) * 2 / 3) } body.item-view .Blog .post-title-container{ padding:62px 24px 24px 24px } body.item-view .Blog .post-header-container{ padding-$startSide:24px } body.item-view .Blog .post-body-container,body.item-view .PopularPosts,body.item-view .comments,body.item-view .post-outer-container>.shown-ad,body.item-view .widget.Blog .post-bottom{ margin:32px 24px; padding:0 } .FeaturedPost h3,body.feed-view .blog-posts,body.feed-view .feed-message{ margin-left:24px; margin-right:24px } .post-filter-message{ margin:24px 24px 48px 24px } body.item-view blockquote{ font-size:18px } body.item-view .Blog .post-title{ font-size:$(item.title.font.size * 24 / 48) } body.item-view .Blog .post-body{ font-size:$(body.text.font.size * 14 / 20) } body.item-view .Blog .post-body::first-letter{ font-size:$(body.text.font.size * 14 / 20 * 4); line-height:$(body.text.font.size * 14 / 20 * 4) } .main_header_elements{ position:relative; display:block } .search.focused .section{ margin-right:0; width:100% } html[dir=ltr] .search form{ margin-right:0 } .hamburger-section{ margin-left:24px } .search-expand-icon{ display:block; float:left; height:24px; margin-top:-12px } .search-expand-text{ display:none } .subscribe-section-container{ margin-top:12px } .subscribe-section-container{ float:$startSide; margin-$startSide:0 } .search-expand{ position:absolute; $endSide:0; top:0 } html[dir=ltr] .search-expand{ margin-left:24px } .centered-top.search-focused .subscribe-section-container{ opacity:0 } .blog-name{ float:none } .blog-name{ margin-$endSide:36px } .centered-top-secondline .PageList li{ margin-$endSide:24px } .centered-top.search-focused .subscribe-button,.centered-top.search-focused .subscribe-section-container{ opacity:1 } body.item-view .comment-thread-title{ margin-$startSide:24px } .blog-pager{ margin-left:24px; margin-right:24px } .heroPost .big-post-image-top{ width:100%; height:calc(100vw * 2 / 3) } .popular-posts-snippet.snippet-container,.post-snippet.snippet-container{ font-size:14px; max-height:112px } .popular-posts-snippet .snippet-item,.post-snippet .snippet-item{ line-height:2 } .popular-posts-snippet .snippet-fade,.post-snippet .snippet-fade{ height:28px } .hero-post-snippet.snippet-container{ font-size:14px; max-height:112px } .hero-post-snippet .snippet-item{ line-height:2 } .hero-post-snippet .snippet-fade{ height:28px } .hero-post-noimage-snippet.snippet-container{ font-size:14px; line-height:2; max-height:224px } .hero-post-noimage-snippet .snippet-item{ line-height:2 } .hero-post-noimage-snippet .snippet-fade{ height:28px } .hero-post-noimage-snippet .snippet-item::first-letter{ font-size:56px; line-height:normal } body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"]{ margin-left:-24px!important; margin-right:-24px!important } body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"],body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"]{ margin-left:0!important; margin-right:0!important } body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"] img,body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"] img{ max-width:100% } } @media screen and (min-width:$(feed.width + sidebar.width + 20px)){ .page{ float:left } .centered-top{ max-width:$(feed.width + sidebar.width); padding:44px $(sidebar.width + 136px) 32px 136px } .sidebar-container{ box-shadow:none; float:right; max-width:$(sidebar.width); z-index:32 } .sidebar-container .navigation{ display:none } .hamburger-section,.sticky .hamburger-section{ display:none } .search.focused .section{ margin-right:0; width:100% } #footer{ padding-right:$(sidebar.width) } } /* ============================================================ BOBES.ORG — Professional Design System v2 Direction: Editorial / News Magazine Accent: Bold Orange on crisp white All CSS is raw — no HTML tags, Blogger CDATA compatible ============================================================ */ /* ══════════════════════════════════════════════════════════ 1. DESIGN TOKENS ══════════════════════════════════════════════════════════ */ :root { --c-accent: #f44d14; --c-accent-dk: #c93a09; --c-accent-deep: #7a2200; --c-accent-soft: rgba(244,77,20,.09); --c-accent-glow: rgba(244,77,20,.22); --c-black: #0f0f0e; --c-text: #2a2b28; --c-text-2: #5a5b57; --c-text-3: #96978f; --c-bg: #ffffff; --c-bg-warm: #faf9f7; --c-bg-soft: #f3f2ef; --c-bg-code: #1c1c1b; --c-border: #e2e0db; --c-border-soft: #ebe9e4; --sh-1: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --sh-2: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --sh-3: 0 12px 40px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06); --sh-4: 0 24px 64px rgba(0,0,0,.13), 0 8px 24px rgba(0,0,0,.07); --sh-focus: 0 0 0 3px var(--c-accent-glow); --r1: 3px; --r2: 6px; --r3: 10px; --r4: 16px; --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --t1: .12s cubic-bezier(.4,0,.2,1); --t2: .22s cubic-bezier(.4,0,.2,1); --t3: .38s cubic-bezier(.4,0,.2,1); } /* ══════════════════════════════════════════════════════════ 2. BASE & GLOBAL POLISH ══════════════════════════════════════════════════════════ */ html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background-color: var(--c-bg); color: var(--c-text); line-height: 1.75; } /* Text selection */ ::selection { background: rgba(244,77,20,.16); color: var(--c-black); } ::-moz-selection { background: rgba(244,77,20,.16); color: var(--c-black); } /* Refined WebKit scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--c-bg-soft); } ::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-accent); } /* Accessibility focus */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r1); } /* ══════════════════════════════════════════════════════════ 3. HEADER & NAVIGATION ══════════════════════════════════════════════════════════ */ /* Top bar stripe accent */ .centered-top-container { border-top: 3px solid var(--c-accent); border-bottom: 1px solid var(--c-border-soft); transition: box-shadow var(--t2), border-bottom-color var(--t2); } /* Sticky header */ .centered-top-container.sticky { box-shadow: 0 2px 24px rgba(0,0,0,.12) !important; border-bottom-color: var(--c-border) !important; background: rgba(255,255,255,.97) !important; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); } /* Blog title */ .blog-name h1, .blog-name h1 a { letter-spacing: .01em; transition: opacity var(--t2); } .blog-name h1 a:hover { opacity: .78; } /* Nav links — sliding underline */ .centered-top-secondline .PageList li a { position: relative; padding-bottom: 4px !important; font-weight: 600; letter-spacing: .04em; transition: color var(--t1); } .centered-top-secondline .PageList li a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--c-accent); border-radius: 2px; transition: width var(--t2), left var(--t2); } .centered-top-secondline .PageList li a:hover::after, .centered-top-secondline .PageList li.selected a::after { width: 100%; left: 0; } .centered-top-secondline .PageList li a:hover { color: var(--c-accent) !important; } /* Search bar */ .search.focused form { border-color: var(--c-accent) !important; border-width: 2px !important; box-shadow: var(--sh-focus); } /* ══════════════════════════════════════════════════════════ 4. HERO / FEATURED POST ══════════════════════════════════════════════════════════ */ .heroPost { border-radius: var(--r3) !important; overflow: hidden; box-shadow: var(--sh-3); margin-bottom: 72px !important; transition: box-shadow var(--t3); } .heroPost:hover { box-shadow: var(--sh-4); } /* Hero title area — gradient */ .heroPost .big-post-title { background: linear-gradient(135deg, #f44d14 0%, #c93a09 60%, #7a2200 100%) !important; position: relative; overflow: hidden; } .heroPost .big-post-title::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.12) 0%, transparent 60%); pointer-events: none; } .heroPost .big-post-title::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 120px; height: 120px; background: rgba(255,255,255,.04); border-radius: 50%; pointer-events: none; } /* Hero secondary panel */ .heroPost .big-post-text { border-left: 4px solid var(--c-border-soft); } /* ══════════════════════════════════════════════════════════ 5. POST CARDS — FEED VIEW ══════════════════════════════════════════════════════════ */ /* Card container */ .post-outer-container { position: relative; transition: transform var(--t2); } /* Staggered entrance animation */ @keyframes b-fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } body.feed-view .post-outer-container { animation: b-fadeUp .45s cubic-bezier(0,0,.2,1) both; } body.feed-view .post-outer-container:nth-child(1) { animation-delay: .04s; } body.feed-view .post-outer-container:nth-child(2) { animation-delay: .10s; } body.feed-view .post-outer-container:nth-child(3) { animation-delay: .16s; } body.feed-view .post-outer-container:nth-child(4) { animation-delay: .22s; } body.feed-view .post-outer-container:nth-child(5) { animation-delay: .28s; } body.feed-view .post-outer-container:nth-child(6) { animation-delay: .34s; } /* Separator line between posts */ body.feed-view .post-outer-container + .post-outer-container { padding-top: 56px; border-top: 1px solid var(--c-border-soft); } /* Thumbnail image */ .post-outer .snippet-thumbnail { overflow: hidden; border-radius: var(--r2); box-shadow: var(--sh-2); } .post-outer .snippet-thumbnail-img { transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .3s; will-change: transform; } .post-outer-container:hover .snippet-thumbnail-img { transform: scale(1.045); opacity: .93; } /* Post title */ .post-title, .post-title a { color: var(--c-text) !important; transition: color var(--t2); line-height: 1.3 !important; } .post-title a:hover { color: var(--c-accent) !important; } /* Post snippet text */ .post-snippet-container { color: var(--c-text-2); line-height: 1.7; } /* Post meta byline */ .post-header-container .byline, .post-header-container .byline a { color: var(--c-text-3) !important; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; transition: color var(--t1); } .post-header-container .byline a:hover { color: var(--c-accent) !important; } /* ══════════════════════════════════════════════════════════ 6. SINGLE POST PAGE ══════════════════════════════════════════════════════════ */ /* Post title banner */ body.item-view .Blog .post-title-container { background: linear-gradient(150deg, #f44d14 0%, #b83209 70%, #6e1d00 100%) !important; position: relative; overflow: hidden; } body.item-view .Blog .post-title-container::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.14) 0%, transparent 55%), radial-gradient(ellipse at 15% 85%, rgba(0,0,0,.15) 0%, transparent 50%); pointer-events: none; } body.item-view .Blog .post-title-container::after { content: ''; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; } /* Post title text */ body.item-view .Blog .post-title, body.item-view .Blog .post-title a { text-shadow: 0 2px 12px rgba(0,0,0,.2); letter-spacing: -.01em; } /* Drop cap */ body.item-view .Blog .post-body::first-letter { color: var(--c-accent) !important; font-size: 5rem !important; font-weight: 800 !important; line-height: .8 !important; margin-right: .08em !important; float: left; text-shadow: 2px 2px 0 rgba(244,77,20,.18); } /* Post body */ body.item-view .post-body { color: var(--c-text) !important; font-size: 1.075rem; line-height: 1.95 !important; } /* Post body paragraphs */ .post-body p { margin-top: 0; margin-bottom: 1.5em; } /* Post body headings */ .post-body h2 { font-size: 1.65rem; font-weight: 700; color: var(--c-black); margin-top: 2.2em; margin-bottom: .6em; padding-bottom: .4em; border-bottom: 2px solid var(--c-border-soft); line-height: 1.25; } .post-body h3 { font-size: 1.28rem; font-weight: 700; color: var(--c-black); margin-top: 1.8em; margin-bottom: .5em; line-height: 1.3; } .post-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin-top: 1.5em; margin-bottom: .4em; text-transform: uppercase; letter-spacing: .06em; } /* Horizontal rule */ .post-body hr { border: none; height: 2px; background: linear-gradient(90deg, var(--c-accent) 0%, transparent 100%); margin: 2.5em 0; border-radius: 2px; opacity: .4; } /* Post body images */ .post-body img { border-radius: var(--r2); box-shadow: var(--sh-2); transition: box-shadow var(--t2), transform var(--t2); } .post-body img:hover { box-shadow: var(--sh-3); transform: translateY(-2px); } /* Lists */ .post-body ul, .post-body ol { padding-left: 1.75em; margin-bottom: 1.4em; } .post-body li { margin-bottom: .5em; padding-left: .25em; } .post-body ul li::marker { color: var(--c-accent); } /* Blockquote */ body.item-view blockquote { margin: 2.2em 0 !important; padding: 1.25em 1.75em !important; background: var(--c-bg-warm) !important; border-left: 4px solid var(--c-accent) !important; border-radius: 0 var(--r2) var(--r2) 0 !important; font-style: italic !important; color: var(--c-text-2) !important; position: relative; box-shadow: var(--sh-1); } body.item-view blockquote::before { content: '\201C'; position: absolute; top: -.3em; left: .6em; font-size: 4em; color: var(--c-accent); opacity: .18; font-style: normal; line-height: 1; } /* Inline code */ .post-body code { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--r1); font-size: .875em; padding: .12em .42em; color: var(--c-accent-dk); font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } /* Code block */ .post-body pre { background: var(--c-bg-code) !important; border-radius: var(--r3) !important; color: #e2e0d8 !important; font-size: .85rem !important; line-height: 1.65 !important; overflow-x: auto !important; padding: 1.4em 1.75em !important; margin: 1.75em 0 !important; box-shadow: var(--sh-3) !important; border: 1px solid rgba(255,255,255,.05) !important; } .post-body pre code { background: none; border: none; color: inherit; padding: 0; font-size: inherit; } /* ══════════════════════════════════════════════════════════ 7. BUTTONS & ACTIONS ══════════════════════════════════════════════════════════ */ .flat-button { border-radius: var(--r1) !important; padding: 7px 18px !important; margin: 0 !important; letter-spacing: .07em; font-weight: 700 !important; text-transform: uppercase; font-size: .78rem !important; border: 1.5px solid transparent; transition: background var(--t2), color var(--t2), border-color var(--t2), box-shadow var(--t2) !important; } .flat-button:hover { background: var(--c-accent-soft) !important; color: var(--c-accent) !important; border-color: var(--c-accent) !important; box-shadow: none !important; } /* Read more / jump link */ .jump-link .flat-button { background: var(--c-accent) !important; color: #fff !important; border-color: var(--c-accent) !important; box-shadow: var(--sh-1) !important; } .jump-link .flat-button:hover { background: var(--c-accent-dk) !important; border-color: var(--c-accent-dk) !important; color: #fff !important; box-shadow: var(--sh-2) !important; transform: translateY(-1px); } /* Comment link button */ .comment-link.flat-button { background: transparent !important; color: var(--c-text-2) !important; border-color: var(--c-border) !important; } .comment-link.flat-button:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; background: var(--c-accent-soft) !important; } /* ══════════════════════════════════════════════════════════ 8. BYLINES & META ══════════════════════════════════════════════════════════ */ .byline, .byline a { transition: color var(--t1); } .byline a:hover { color: var(--c-accent) !important; } /* Author byline on single posts */ body.item-view .Blog .post-header-container { border-bottom: 1px solid var(--c-border-soft); margin-bottom: 0; padding-bottom: 4px; } /* ══════════════════════════════════════════════════════════ 9. LABELS / TAGS ══════════════════════════════════════════════════════════ */ body.item-view .post-sidebar .post-labels-sidebar a, body.item-view .post-footer .post-labels a { background: var(--c-bg-warm) !important; border: 1px solid var(--c-border) !important; border-radius: 20px !important; display: inline-block !important; line-height: 1.4 !important; margin: 2px 3px 2px 0 !important; padding: 3px 12px !important; font-size: .73rem !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--c-text-2) !important; transition: background var(--t2), border-color var(--t2), color var(--t2), transform var(--t1) !important; } body.item-view .post-sidebar .post-labels-sidebar a:hover, body.item-view .post-footer .post-labels a:hover { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important; transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════ 10. SIDEBAR ══════════════════════════════════════════════════════════ */ .sidebar-container { background: var(--c-bg-warm) !important; border-left: 1px solid var(--c-border-soft); } .sidebar-container .widget { padding: 20px 0 !important; margin: 0 20px !important; } .sidebar-container .widget + .widget { border-top: 1px solid var(--c-border-soft) !important; } /* Widget titles */ .sidebar-container .widget .title { font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--c-text-3) !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 2px solid var(--c-accent) !important; display: inline-block; } .sidebar-container .widget a { color: var(--c-text-2); transition: color var(--t1), padding-left var(--t1); } .sidebar-container .widget a:hover { color: var(--c-accent) !important; padding-left: 4px; } .sidebar-container .widget li { font-size: .9rem; line-height: 1.5 !important; margin-bottom: 6px !important; border-bottom: 1px solid var(--c-border-soft); padding-bottom: 6px; } .sidebar-container .widget li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Post count badge */ .BlogArchive .post-count, .Label .label-count { background: var(--c-bg-soft); border-radius: 20px; font-size: .7rem; font-weight: 700; padding: 1px 6px; color: var(--c-text-3) !important; } /* ══════════════════════════════════════════════════════════ 11. POPULAR POSTS WIDGET ══════════════════════════════════════════════════════════ */ .widget.PopularPosts li { padding: 12px 0; border-bottom: 1px solid var(--c-border-soft); transition: background var(--t1); } .widget.PopularPosts li:hover { background: var(--c-accent-soft); padding-left: 6px; border-radius: var(--r1); } .widget.PopularPosts .item-thumbnail { overflow: hidden; border-radius: var(--r2); flex-shrink: 0; } .widget.PopularPosts .item-thumbnail img { transition: transform var(--t3), opacity var(--t2); } .widget.PopularPosts li:hover .item-thumbnail img { transform: scale(1.06); opacity: .9; } .widget.PopularPosts .post-title a { color: var(--c-text) !important; font-size: .92rem; line-height: 1.4; transition: color var(--t1); } .widget.PopularPosts .post-title a:hover { color: var(--c-accent) !important; } /* ══════════════════════════════════════════════════════════ 12. COMMENTS ══════════════════════════════════════════════════════════ */ #comments { border-top: 3px solid var(--c-accent) !important; margin-top: 32px; } #comments h3.title { font-size: 1rem !important; font-weight: 800 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--c-text-3) !important; } #comments .comment { background: var(--c-bg-warm); border: 1px solid var(--c-border-soft); border-radius: var(--r3) !important; padding: 20px 20px 20px 20px !important; margin-bottom: 16px; transition: box-shadow var(--t2), border-color var(--t2); } #comments .comment:hover { box-shadow: var(--sh-2); border-color: var(--c-border); } /* Comment avatar */ .avatar-image-container svg, .comment .avatar-image-container .avatar-icon { border-color: var(--c-accent) !important; fill: var(--c-accent) !important; } .comment .avatar-image-container img { box-shadow: var(--sh-1); } /* Comment author */ #comments .comment .comment-header .user, #comments .comment .comment-header .user a { font-weight: 700 !important; color: var(--c-black) !important; letter-spacing: .01em; } /* Comment timestamp */ #comments .comment .comment-header .datetime { font-size: .75rem !important; color: var(--c-text-3) !important; } /* Comment body text */ #comments .comment .comment-content, .comment .comment-body { font-size: .95rem; line-height: 1.7; color: var(--c-text-2); } /* ══════════════════════════════════════════════════════════ 13. SHARE BUTTONS ══════════════════════════════════════════════════════════ */ .share-buttons { border-radius: var(--r3) !important; box-shadow: var(--sh-3) !important; border: 1px solid var(--c-border) !important; overflow: hidden; } .share-buttons li .sharing-platform-button:hover { background-color: var(--c-accent-soft) !important; } .share-buttons li .platform-sharing-text { font-size: .9rem !important; font-weight: 600; } /* ══════════════════════════════════════════════════════════ 14. PAGINATION ══════════════════════════════════════════════════════════ */ .blog-pager .blog-pager-older-link { display: inline-block; border: 1.5px solid var(--c-border); border-radius: var(--r1); padding: 8px 20px; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2) !important; transition: background var(--t2), color var(--t2), border-color var(--t2), box-shadow var(--t2); } .blog-pager .blog-pager-older-link:hover { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important; box-shadow: var(--sh-2); } /* ══════════════════════════════════════════════════════════ 15. FOOTER ══════════════════════════════════════════════════════════ */ .footer { background: var(--c-bg-warm) !important; border-top: 1px solid var(--c-border) !important; padding-top: 40px !important; padding-bottom: 40px !important; } /* Blogger attribution */ #Attribution1 { display: none !important; } /* ══════════════════════════════════════════════════════════ 16. PROFILE WIDGET ══════════════════════════════════════════════════════════ */ .widget.Profile .profile-img { box-shadow: var(--sh-2); border: 3px solid var(--c-bg); outline: 2px solid var(--c-border); transition: box-shadow var(--t2), outline-color var(--t2); } .widget.Profile .profile-img:hover { box-shadow: var(--sh-3); outline-color: var(--c-accent); } .widget.Profile .profile-textblock { color: var(--c-text-2) !important; line-height: 1.65 !important; } .widget.Profile .profile-link { color: var(--c-accent) !important; font-weight: 700 !important; transition: color var(--t1); } .widget.Profile .profile-link:hover { color: var(--c-accent-dk) !important; } /* ══════════════════════════════════════════════════════════ 17. SUBSCRIBE POPUP ══════════════════════════════════════════════════════════ */ .subscribe-popup { border-radius: var(--r4) !important; box-shadow: var(--sh-4) !important; } .dialog input[type=email]:focus, .dialog input[type=text]:focus { border-bottom: 2px solid var(--c-accent) !important; } /* ══════════════════════════════════════════════════════════ 18. MOBILE POLISH ══════════════════════════════════════════════════════════ */ @media screen and (max-width: 968px) { body.item-view .Blog .post-body::first-letter { font-size: 3.8rem !important; } body.item-view .Blog .post-title-container::after { display: none; } .heroPost { border-radius: var(--r2) !important; } .post-body { font-size: 1rem !important; line-height: 1.85 !important; } .post-body h2 { font-size: 1.35rem; } .post-body h3 { font-size: 1.12rem; } } @media screen and (max-width: 600px) { .centered-top-container { border-top-width: 2px; } body.item-view .Blog .post-title-container { padding-top: 48px !important; padding-bottom: 32px !important; } .heroPost { margin-bottom: 40px !important; border-radius: 0 !important; } body.item-view .Blog .post-body::first-letter { font-size: 3rem !important; } .sidebar-container .widget { margin: 0 12px !important; } } /* ══════════════════════════════════════════════════════════ 19. MICRO-DETAILS ══════════════════════════════════════════════════════════ */ /* Thin orange rule under post body first-line on item view */ body.item-view .Blog .post-body::first-line { color: var(--c-text) !important; } /* Image anchor wrapper */ .post-body a[imageanchor="1"] { display: inline-block; transition: opacity var(--t2); } .post-body a[imageanchor="1"]:hover { opacity: .9; } /* Notification bar */ .b-notification { background: var(--c-black) !important; color: #fff !important; border-bottom: 2px solid var(--c-accent) !important; font-size: .85rem; letter-spacing: .02em; } /* Loading spinner */ .mspin-black-large > div > div, .mspin-grey_54-large > div > div { filter: hue-rotate(0deg); } /* Post body table */ .post-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9rem; } .post-body table th { background: var(--c-accent); color: #fff; font-weight: 700; padding: 10px 14px; text-align: left; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; } .post-body table td { padding: 9px 14px; border-bottom: 1px solid var(--c-border-soft); color: var(--c-text-2); } .post-body table tr:last-child td { border-bottom: none; } .post-body table tr:hover td { background: var(--c-bg-soft); } /* Keyboard shortcut look */ .post-body kbd { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: var(--r1); font-size: .8em; padding: .1em .4em; font-family: 'SFMono-Regular', Consolas, monospace; color: var(--c-text); } /* ══════════════════════════════════════════════════════════ 20. PROFESSIONAL HEADER TYPOGRAPHY ══════════════════════════════════════════════════════════ */ /* Blog title hidden — org bar replaces it. Keep rule for sticky fallback only */ .centered-top-container.sticky .blog-name h1, .centered-top-container.sticky .blog-name h1 a { font-size: 22px; } /* Nav menu links */ .centered-top-secondline .PageList li a { font-family: 'Source Sans 3', sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .09em !important; text-transform: uppercase !important; } /* Header description / tagline */ .widget.Header .header-widget p { font-family: 'Source Sans 3', sans-serif !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: .03em !important; font-style: normal !important; color: var(--c-text-2) !important; opacity: .85; } /* Post titles — Playfair Display: editorial gravitas */ .post-title, .post-title a, body.item-view .Blog .post-title, body.item-view .Blog .post-title a { font-family: 'Playfair Display', Georgia, serif !important; letter-spacing: -.01em !important; } /* Post body text — Source Sans 3: clean and readable */ .post-body, body.item-view .post-body { font-family: 'Source Sans 3', sans-serif !important; font-size: 1.05rem !important; line-height: 1.9 !important; } /* Headings inside posts */ .post-body h2, .post-body h3, .post-body h4 { font-family: 'Playfair Display', Georgia, serif !important; } .post-body h4 { font-family: 'Source Sans 3', sans-serif !important; } /* ══════════════════════════════════════════════════════════ 21. BMS LOGO + ORG NAME BAR ══════════════════════════════════════════════════════════ */ /* Hide the duplicate Blogger blog title — org bar IS the header */ .blog-name h1, .blog-name .widget.Header p { display: none !important; } /* The org bar is an anchor tag — reset link styles */ a.bobes-org-bar, a.bobes-org-bar:visited, a.bobes-org-bar:hover, a.bobes-org-bar:active { text-decoration: none !important; outline: none !important; box-shadow: none !important; } /* Container holding logo + org text */ .bobes-org-bar { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 14px; padding: 10px 0 12px 0; margin-bottom: 4px; border-bottom: 1px solid var(--c-border-soft); cursor: pointer; -webkit-transition: opacity .18s cubic-bezier(.4,0,.2,1); transition: opacity .18s cubic-bezier(.4,0,.2,1); } .bobes-org-bar:hover { opacity: .88; } /* Logo image */ .bobes-bms-logo { width: 52px !important; height: 52px !important; object-fit: contain; -webkit-filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); -webkit-transition: -webkit-transform .2s cubic-bezier(.4,0,.2,1); transition: transform .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; display: block !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; } .bobes-bms-logo:hover { -webkit-transform: scale(1.06); transform: scale(1.06); } /* Logo wrapper */ .bobes-logo-wrap { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } /* Org name text stack */ .bobes-org-titles { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 2px; min-width: 0; } /* Main organisation name */ .bobes-org-main { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-black); line-height: 1.15; white-space: nowrap; } /* Affiliation sub-line */ .bobes-org-sub { font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); line-height: 1.2; white-space: nowrap; } /* Compact org bar in sticky mode */ .centered-top-container.sticky .bobes-org-bar { padding: 4px 0 6px 0; margin-bottom: 0; border-bottom: none; } .centered-top-container.sticky .bobes-bms-logo { width: 32px !important; height: 32px !important; } .centered-top-container.sticky .bobes-org-main { font-size: 14px; } .centered-top-container.sticky .bobes-org-sub { display: none; } /* Mobile: stack or shrink the org bar */ @media screen and (max-width: 768px) { .bobes-org-bar { gap: 10px; padding: 6px 0 8px 0; } .bobes-bms-logo { width: 40px !important; height: 40px !important; } .bobes-org-main { font-size: 13.5px; white-space: normal; } .bobes-org-sub { font-size: 9px; white-space: normal; } } @media screen and (max-width: 480px) { .bobes-bms-logo { width: 34px !important; height: 34px !important; } .bobes-org-main { font-size: 12px; } .bobes-org-sub { font-size: 8.5px; } } /* ══════════════════════════════════════════════════════════ 22. READING PROGRESS BAR ══════════════════════════════════════════════════════════ */ #bobes-progress-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(0,0,0,.08); z-index: 9999; } #bobes-progress { height: 100%; width: 0%; background: linear-gradient(90deg, #f44d14 0%, #ff7043 60%, #ffab40 100%); -webkit-transition: width .1s linear; transition: width .1s linear; border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(244,77,20,.5); } /* ══════════════════════════════════════════════════════════ 23. BACK TO TOP BUTTON ══════════════════════════════════════════════════════════ */ #bobes-btt { position: fixed; bottom: 28px; right: 24px; width: 44px; height: 44px; background: var(--c-accent); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 16px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-shadow: 0 4px 16px rgba(244,77,20,.4); opacity: 0; pointer-events: none; -webkit-transform: translateY(12px); transform: translateY(12px); -webkit-transition: opacity .25s, -webkit-transform .25s, background .15s; transition: opacity .25s, transform .25s, background .15s; z-index: 900; } #bobes-btt.bobes-btt-show { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0); transform: translateY(0); } #bobes-btt:hover { background: var(--c-accent-dk); box-shadow: 0 6px 20px rgba(244,77,20,.5); -webkit-transform: translateY(-2px); transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════ 24. DARK MODE TOGGLE BUTTON ══════════════════════════════════════════════════════════ */ #bobes-dm { position: fixed; bottom: 80px; right: 24px; width: 44px; height: 44px; background: var(--c-bg-soft); color: var(--c-text); border: 1.5px solid var(--c-border); border-radius: 50%; cursor: pointer; font-size: 15px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-shadow: var(--sh-2); -webkit-transition: background .2s, border-color .2s, color .2s, -webkit-transform .2s; transition: background .2s, border-color .2s, color .2s, transform .2s; z-index: 900; } #bobes-dm:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; -webkit-transform: rotate(20deg); transform: rotate(20deg); } /* ══════════════════════════════════════════════════════════ 25. DARK MODE STYLES ══════════════════════════════════════════════════════════ */ html.bobes-dark { --c-bg: #121212; --c-bg-warm: #1a1a1a; --c-bg-soft: #242424; --c-bg-code: #0d0d0d; --c-text: #e8e6e0; --c-text-2: #b0aea8; --c-text-3: #7a7870; --c-border: #333330; --c-border-soft: #2a2a27; --c-black: #f0ede8; --sh-2: 0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); --sh-3: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3); } html.bobes-dark body { background-color: #121212; color: #e8e6e0; } html.bobes-dark .centered-top-container, html.bobes-dark .centered-top-placeholder { background: #1a1a1a !important; border-bottom-color: #333 !important; } html.bobes-dark .centered-top-container.sticky { background: rgba(18,18,18,.97) !important; } html.bobes-dark .post-title, html.bobes-dark .post-title a { color: #e8e6e0 !important; } html.bobes-dark .post-title a:hover { color: var(--c-accent) !important; } html.bobes-dark #comments .comment { background: #1e1e1e; border-color: #333; } html.bobes-dark .sidebar-container { background: #181818 !important; border-left-color: #2a2a27 !important; } html.bobes-dark .footer { background: #161616 !important; border-top-color: #2a2a27 !important; } html.bobes-dark .bobes-org-bar { border-bottom-color: #2a2a27; } html.bobes-dark .bobes-org-main { color: #e8e6e0; } html.bobes-dark .flat-button:hover { background: rgba(244,77,20,.15) !important; } html.bobes-dark #bobes-dm { background: #2a2a27; border-color: #444; color: #e8e6e0; } /* ══════════════════════════════════════════════════════════ 26. SCROLL REVEAL ANIMATIONS ══════════════════════════════════════════════════════════ */ .bobes-hidden-init { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); -webkit-transition: opacity .5s cubic-bezier(0,0,.2,1), -webkit-transform .5s cubic-bezier(0,0,.2,1); transition: opacity .5s cubic-bezier(0,0,.2,1), transform .5s cubic-bezier(0,0,.2,1); } .bobes-revealed { opacity: 1 !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; } /* ══════════════════════════════════════════════════════════ 27. READING TIME BADGE ══════════════════════════════════════════════════════════ */ .bobes-reading-time { background: var(--c-accent-soft); border: 1px solid rgba(244,77,20,.2); border-radius: 20px; color: var(--c-accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 2px 10px; text-transform: uppercase; vertical-align: middle; margin-left: 6px; } html.bobes-dark .bobes-reading-time { background: rgba(244,77,20,.12); border-color: rgba(244,77,20,.25); } /* ══════════════════════════════════════════════════════════ 28. TABLE OF CONTENTS ══════════════════════════════════════════════════════════ */ #bobes-toc { background: var(--c-bg-warm); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: 0 var(--r2) var(--r2) 0; margin: 0 140px 32px 140px; padding: 20px 24px; box-shadow: var(--sh-1); } .bobes-toc-title { font-family: 'Rajdhani', sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3); margin: 0 0 12px 0; } .bobes-toc-title i { color: var(--c-accent); margin-right: 6px; } .bobes-toc-list { margin: 0; padding-left: 1.2em; } .bobes-toc-list li { margin-bottom: 6px; font-size: .9rem; line-height: 1.4; } .bobes-toc-list li.bobes-toc-sub { margin-left: 1em; font-size: .85rem; color: var(--c-text-2); } .bobes-toc-list a { color: var(--c-text-2) !important; text-decoration: none; -webkit-transition: color .15s; transition: color .15s; border-bottom: 1px dashed transparent; } .bobes-toc-list a:hover { color: var(--c-accent) !important; border-bottom-color: var(--c-accent); } html.bobes-dark #bobes-toc { background: #1a1a1a; border-color: #333; } @media screen and (max-width: 968px) { #bobes-toc { margin: 0 24px 24px 24px; } } /* ══════════════════════════════════════════════════════════ 29. COPY CODE BUTTON ══════════════════════════════════════════════════════════ */ .bobes-copy-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r1); color: rgba(255,255,255,.7); cursor: pointer; font-size: 12px; padding: 4px 8px; -webkit-transition: background .15s, color .15s; transition: background .15s, color .15s; line-height: 1; } .bobes-copy-btn:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } /* ══════════════════════════════════════════════════════════ 30. LAZY IMAGE FADE-IN ══════════════════════════════════════════════════════════ */ .bobes-img-init { opacity: 0; -webkit-transition: opacity .4s cubic-bezier(0,0,.2,1); transition: opacity .4s cubic-bezier(0,0,.2,1); } .bobes-img-loaded { opacity: 1; } /* ══════════════════════════════════════════════════════════ 31. SEARCH KEYBOARD HINT ══════════════════════════════════════════════════════════ */ .search-expand-text::after { content: ' (Ctrl+K)'; font-size: .7em; opacity: .55; letter-spacing: .02em; } @media screen and (max-width: 968px) { .search-expand-text::after { display: none; } } /* ══════════════════════════════════════════════════════════ 32. ENHANCED FOOTER WITH ORG INFO ══════════════════════════════════════════════════════════ */ .footer { padding-top: 48px !important; } .bobes-footer-inner { max-width: 920px; margin: 0 auto; padding: 0 24px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 32px; border-bottom: 1px solid var(--c-border-soft); padding-bottom: 32px; margin-bottom: 24px; } .bobes-footer-brand { -webkit-box-flex: 1; -webkit-flex: 1 1 280px; flex: 1 1 280px; } .bobes-footer-brand img { width: 48px; height: 48px; margin-bottom: 12px; opacity: .9; box-shadow: none !important; border-radius: 0 !important; } .bobes-footer-name { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-black); margin-bottom: 4px; } .bobes-footer-affil { font-size: .75rem; color: var(--c-accent); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; } .bobes-footer-copy { font-size: .78rem; color: var(--c-text-3); line-height: 1.6; } .bobes-footer-links { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .bobes-footer-links h4 { font-family: 'Rajdhani', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); margin: 0 0 12px 0; border-bottom: 2px solid var(--c-accent); padding-bottom: 6px; display: inline-block; } .bobes-footer-links ul { list-style: none; margin: 0; padding: 0; } .bobes-footer-links li { margin-bottom: 8px; font-size: .85rem; } .bobes-footer-links a { color: var(--c-text-2) !important; -webkit-transition: color .15s, padding-left .15s; transition: color .15s, padding-left .15s; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; gap: 6px; } .bobes-footer-links a:hover { color: var(--c-accent) !important; padding-left: 4px; } .bobes-footer-links a i { font-size: .75rem; color: var(--c-accent); width: 14px; } .bobes-footer-bottom { text-align: center; font-size: .72rem; color: var(--c-text-3); padding: 16px 24px 8px 24px; letter-spacing: .04em; } html.bobes-dark .bobes-footer-name { color: #e8e6e0; } html.bobes-dark .bobes-footer-copy { color: #666; } /* ══════════════════════════════════════════════════════════ 33. SOCIAL SHARE BAR (single post) ══════════════════════════════════════════════════════════ */ .bobes-social-bar { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; gap: 8px; margin: 16px 140px; flex-wrap: wrap; } .bobes-social-bar span { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); margin-right: 4px; } .bobes-share-btn { display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; gap: 5px; border: 1.5px solid var(--c-border); border-radius: 20px; color: var(--c-text-2) !important; font-size: .75rem; font-weight: 600; letter-spacing: .04em; padding: 5px 13px; text-decoration: none !important; -webkit-transition: background .15s, border-color .15s, color .15s, -webkit-transform .1s; transition: background .15s, border-color .15s, color .15s, transform .1s; cursor: pointer; background: transparent; } .bobes-share-btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: var(--sh-1); } .bobes-share-btn.fb:hover { background: #1877f2; border-color: #1877f2; color: #fff !important; } .bobes-share-btn.tw:hover { background: #000; border-color: #000; color: #fff !important; } .bobes-share-btn.wa:hover { background: #25d366; border-color: #25d366; color: #fff !important; } .bobes-share-btn.tg:hover { background: #0088cc; border-color: #0088cc; color: #fff !important; } .bobes-share-btn.cp:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff !important; } @media screen and (max-width: 968px) { .bobes-social-bar { margin: 16px 24px; } } /* ══════════════════════════════════════════════════════════ 34. BREAKING NEWS / TICKER STRIP ══════════════════════════════════════════════════════════ */ .bobes-ticker-wrap { background: var(--c-accent); color: #fff; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; overflow: hidden; height: 36px; width: 100%; } .bobes-ticker-label { background: rgba(0,0,0,.2); font-family: 'Rajdhani', sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 0 16px; height: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; white-space: nowrap; flex-shrink: 0; } .bobes-ticker-label i { margin-right: 6px; } .bobes-ticker-track { -webkit-animation: bobes-ticker 28s linear infinite; animation: bobes-ticker 28s linear infinite; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; white-space: nowrap; font-size: .8rem; font-weight: 600; gap: 40px; padding-left: 24px; } .bobes-ticker-track:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } @-webkit-keyframes bobes-ticker { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes bobes-ticker { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } html.bobes-dark .bobes-ticker-wrap { background: #c93a09; } /* ══════════════════════════════════════════════════════════ 35. PRINT STYLES ══════════════════════════════════════════════════════════ */ @media print { #bobes-progress-wrap, #bobes-btt, #bobes-dm, .centered-top-container, .sidebar-container, .bobes-ticker-wrap, .bobes-social-bar, .sharing, .blog-pager, #comments .comment-form { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } .post-body { font-size: 11pt; line-height: 1.6; } .post-title { font-size: 18pt; } a { color: #000; text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; opacity: .6; } } ]]>

On the homepage, add a 'recent posts' title before the first standard post.
Cap the total number of ads (widgets and inline ads). Filter out the featured post, but only on the homepage.
Show a 'read more' link if no jump link is present. Mark parent byline element as a flat-button.
No title for single profiles. Default to 'Blog authors' for team.
Updates
Welcome to Bank of Baroda Employees Sangh official website Stay updated with latest news, circulars and announcements Affiliated to Bharatiya Mazdoor Sangh For membership and queries contact your local branch representative Welcome to Bank of Baroda Employees Sangh official website Stay updated with latest news, circulars and announcements Affiliated to Bharatiya Mazdoor Sangh For membership and queries contact your local branch representative

true true 3245721887512736877 true false
Show a 'read more' link if no jump link is present. Mark parent byline element as a flat-button.

false #ffffff true false #ffffff false #ffffff TextAndImage #ffffff false 1x1 false true false 1 false #ffffff false false On the homepage, add a 'recent posts' title before the first standard post.
Cap the total number of ads (widgets and inline ads). Filter out the featured post, but only on the homepage.

Show a 'read more' link if no jump link is present. "image": { "@type": "ImageObject", "url": "", "height": 630, "width": 1200 "url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/w1200/", "height": 348, "width": 1200 }, "publisher": { "@type": "Organization", "name": "Blogger", "logo": { "@type": "ImageObject", "url": "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/", "width": 206, "height": 60 } },

Mark parent byline element as a flat-button. 3 true true LAST_YEAR
Show a 'read more' link if no jump link is present. Mark parent byline element as a flat-button.