/* blog.css: layout + mg-* content blocks for blog overview, article and tutorial detail pages. Consolidated from blog-top.css, blog-left-detail.css, blog-right-detail.css, blog-middle-detail.css, blog-coin-box.css, blog-list.css and article-blocks.css ( Teil 2, 26.10.2026 ). No rule changes yet, this pass only merges the files; dead-code pruning ( comments/rating/footer-slider ) is a follow-up once each is verified against the live rendered pages. */ /* ===== blog-top.css: dark top bar on blog detail ===== */ /*blog dark top bar*/ .blogs-topbar { background: #1E2951; background: linear-gradient(31deg, rgba(30, 41, 81, 1) 0%, rgba(22, 30, 44, 1) 62%, rgba(39, 62, 72, 1) 100%); display: inline-block; width: 100%;} .blogs-topbar .blog-breadcrumb { background-color: transparent; color: #fff; margin: 0; padding-top: 40px; padding-bottom: 0; padding-left: 0px;} .blogs-topbar .blog-breadcrumb .breadcrumb-menu { color: #b6bbc1; text-transform: none;} .blogs-topbar .blog-breadcrumb li.home-link svg { width: 16px; height: 16px; fill: #b6bbc1; margin-right: 7px; vertical-align: text-top;} .breadcrumb-placeholder svg path { fill: #b6bbc1;} .blogs-topbar .blog-title-new h1 { color: #fff; font-size: 52px; margin: 0 0 5px 0;} .blog-title-new h2 { font-size: 18px; color: #fff; font-weight: normal;} .blog-title-new {margin: 40px 0 50px 0;} .auther-top { display: flex; align-items: center; color: #fff; gap: 10px;} .auther-top img { width: 80px; border-radius: 50%; height: 80px; object-fit: cover;} .auhernames strong { display: block; font-size: 20px; font-weight: 500;} .post-meta-information { display: flex; gap: 50px; color: #fff; padding: 40px 0;} .post-meta-information svg { fill: #fff; height: 18px;} .meta-date { display: flex; align-items: center; gap: 10px; font-size: 15px;} .meta-date.comments-meta svg { height: 21px; } .meta-date.comments-meta svg path { stroke: #fff;} /*blog dark top bar end */ @media (max-width: 991px) { .blogs-topbar .blog-title-new h1 { font-size: 38px; } } @media (max-width: 767px) { .breadcrumb-placeholder { margin: 0 7px;} .blogs-topbar .blog-breadcrumb { padding-top: 20px;} .blogs-topbar .blog-title-new h1 { font-size: 34px;} .blog-title-new {margin: 30px 0 40px 0; } .auther-top { font-size: 14px;} .auhernames strong { font-size: 16px;} .auther-top img { width: 60px; height: 60px;} .post-meta-information { flex-wrap: wrap; row-gap: 12px; column-gap: 38px; padding: 20px 0 25px 0;} .blogs-topbar .blog-breadcrumb li.home-link svg { width: 14px; height: 14px; margin-right: 5px;} ul.breadcrumb li span.breadcrumb-menu { vertical-align: middle;} } /* ===== blog-left-detail.css: left column / quick links ===== */ .blog-left-outer { width: 25%; position: sticky; top: 20px ;} .left-quick-links .author-head { display: flex; align-items: center; column-gap: 10px; justify-content: space-between ;} .left-quick-links .author-head .name { display: flex; align-items: center; column-gap: 0 ;} .left-quick-links .author-head .name img { width: 40px; height: 40px; border-radius: 50% ;} .left-quick-links .author-head div span { font-size: 14px; margin-left: 8px ;} .left-quick-links .author-head div { display: flex; align-items: center ;} .quick-links-outer { display: flex; column-gap: 40px ;} .left-quick-links { width: 30%; position: sticky; top: 20px; max-width: 340px ;} .middle-blog-details { width: 100% ;} .quick-links-box { padding: 30px 20px; border: solid 1px #d6d6d6; margin-top: 40px; border-radius: 30px; font-size: 15px ;} .quick-links-box .head-div { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; margin-bottom: 24px ;} .quick-links-box .head-div .heading { margin-bottom: 0; font-weight: 700; font-size: 26px ;} .quick-links-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; row-gap: 16px ;} .quick-links-box ul li a { color: var(--middark-gray); display: inline-flex; align-items: baseline; column-gap: 10px; width: 90% ;} .quick-links-box ul li a svg { min-width: 14px ;} .quick-links-box ul li a:hover { text-decoration: underline ;} @media (min-width: 0px) and (max-width: 991px) { .blog-left-outer, .left-quick-links { width: 100%; position: static !important; } .blog-right-outer { margin-top: 40px; padding: 0 20px; } .quick-links-outer { flex-wrap: wrap; /* flex-direction: column-reverse; */ } .left-quick-links { padding: 0 20px; width: 100%; max-width: 100%; margin-bottom: 40px; } /* .quick-links-box { margin-bottom: 40px; } */ .middle-blog-content { padding: 0 20px; } .author-section { margin-left: 20px !important; margin-right: 20px !important; } } @media (min-width: 0px) and (max-width: 576px) { .circular-progress .percentage { font-size: 12px !important; } .quick-links-box ul { display: none;} .quick-links-box .head-div { margin: 0;} .quick-links-box { padding: 15px 15px !important; border-radius: 13px;} .quick-links-box .head-div .heading { font-size: 20px;} .quick-links-box ul.qul-show { display: flex; margin-top: 20px;} } .dark-mode .quick-links-box { border-color: var(--background-offwhite);} /* ===== blog-right-detail.css: right column / related posts ===== */ .blog-right-outer { width: 25%; position: sticky; top: 20px;} .related-blogs .heading { background-color: #fff100; padding: 8px 16px; position: relative; width: 100%; margin-bottom: 24px; color: #000} .related-blogs .heading::before { content: ''; position: absolute; left: 24px; bottom: -6px; width: 15px; height: 15px; background-color: #fff100; transform: rotate(45deg);} .related-blog-list { display: flex; flex-direction: column; row-gap: 40px;} .related-blog-single a { display: flex; column-gap: 16px; color: var(--dark-text);} .related-blog-single a:hover h3 { color: #f79e01;} .related-blog-single .img-box { min-width: 30%; width: 30%;} .related-blog-single .img-box img { height: 100%; object-fit: cover;} .related-blog-single h3 { font-size: 18px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;} .related-blog-single .text-box p { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; column-gap: 6px;} .related-blog-single .text-box span { color: var(--dark-gray); font-size: 14px;} @media (min-width: 0px) and (max-width: 991px) { .blog-right-outer { width: 100%; position: static !important; }} /* ===== blog-middle-detail.css: article column, boxes, author, comments(dead)/ratings/scores ===== */ .blog-breadcrumb { padding: 16px 0; background-color: #fff; margin-bottom: 16px;} .blog-breadcrumb ul.breadcrumb { flex-wrap: nowrap; margin-bottom: 0;} .blog-details-section { padding-top: 50px;} .blog-section-row { display: flex; align-items: start; column-gap: 40px;} .blog-middle-outer { flex: 1; min-width: 0;} .blog-details-section .categories { display: flex; align-items: center; column-gap: 16px; margin: 24px -8px;} .categories-single { padding: 8px 16px; background-color: #dedede; border-radius: 30px; color: #5d5d5d; margin: 0 8px;} .categories-single:hover { color: #f79e01;} .blog-details-section h2 { font-weight: 700; /* margin-bottom: 40px; */ font-size: 32px;} .middle-blog-content { margin-top: 24px; display: flex; flex-direction: column; row-gap: 24px;} .middle-blog-content h2, .middle-blog-content h3, .middle-blog-content h4, .middle-blog-content h5, .middle-blog-content h6 { font-weight: 700; margin-bottom: 0;} .middle-blog-content h2 { font-size: 28px;} .middle-blog-content h3 { font-size: 24px;} .middle-blog-content h4 { font-size: 20px;} .middle-blog-content h5 { font-size: 18px;} .middle-blog-content p { margin-bottom: 0;} .middle-blog-content strong { font-weight: 700;} .middle-blog-content ul, .middle-blog-content ol { margin-bottom: 0;} .middle-blog-content .check-list li { list-style: none; position: relative;} .middle-blog-content .check-list li::before { content: ''; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' class='bi bi-check2' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E"); background-size: 18px; width: 18px; height: 18px; left: -24px; top: 5px;} .middle-blog-content a { text-decoration: underline;} .middle-blog-content .number-list { list-style: none; counter-reset: list-counter; padding-left: 0; display: flex; flex-direction: column; row-gap: 16px;} .middle-blog-content .number-list li { position: relative; counter-increment: list-counter; padding-left: 40px;} .middle-blog-content .number-list li::before { content: counter(list-counter); position: absolute; left: 6px; top: 0; background-color: yellow; color: black; font-weight: bold; border-radius: 50%; min-width: 24px; text-align: center; height: 24px;} .middle-blog-content .box-bg-gray { padding: 30px 24px; background-color: #ededed; border-radius: 16px; display: flex; flex-direction: column; row-gap: 16px; margin-bottom: 10px;} .middle-blog-content .box-bg-green { padding: 30px 24px; background-color: #c4f3d3; border-radius: 16px; display: flex; flex-direction: column; row-gap: 16px; margin-bottom: 10px; color: #212529;} .middle-blog-content .box-bg-yellow { padding: 30px 24px; background-color: #fff100; border-radius: 16px; display: flex; flex-direction: column; row-gap: 16px; margin-bottom: 10px; color: #212529;} .middle-blog-content .box-bg-yellow .heading { display: flex; align-items: center; column-gap: 12px; margin: 0 10px;} .middle-blog-content .box-bg-yellow p { margin: 0 10px;} .users-scores { padding: 16px; background-color: #202020; display: flex; align-items: center; column-gap: 24px; margin-bottom: 24px;} .users-scores .percent { display: flex; align-items: center; column-gap: 10px; width: 50%; border-right: solid 1px #efefef; padding-right: 20px;} .users-scores .percent .text-white { font-weight: 700;} .circular-progress { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(#17d07a 0deg, #1d4528 0deg); display: flex; align-items: center; justify-content: center; position: relative;} .circular-progress .inner-circle { width: 36px; height: 36px; background-color: #0a1b22; border-radius: 50%; position: absolute;} .circular-progress .percentage { position: relative; font-size: 12px; font-weight: bold; z-index: 1; color: #fff !important; margin-bottom: 0;} .smiley-items { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; margin-left: 20px;} .smiley-faces li a, .smiley-items li a { display: inline-block; width: 100%;} .smiley-items li:hover { transform: scale(1.15); z-index: 2;} .smiley-faces { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; margin-left: 24px;} .smiley-faces li, .smiley-items li { width: 30px; height: 30px; background-color: #202020; padding: 2px; margin-left: -10px; border-radius: 50%; position: relative; transform: scale(1); transition: all 0.3s; z-index: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;} .smiley-faces li:hover { transform: scale(1.15); z-index: 2;} .likes-comment p { margin-bottom: 0; color: #dadada; display: flex; align-items: center; column-gap: 12px;} .author-section { display: flex; align-items: start; column-gap: 24px; padding: 30px; background-color: var(--background-offwhite); border-radius: 20px; margin: 24px 0;} .author-section .author-title { color: #5d5d5d;} .author-section .author-name { font-size: 22px; font-weight: 700; margin-bottom: 16px;} .author-section .img-box { max-width: 200px; position: relative; min-height: 250px;} .author-section .img-box img { height: 200px; width: 200px; border-radius: 50%;} .article-nbr { text-align: center; background-color: var(--background-offwhite); width: 80px; height: 80px; margin: 0 auto; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);} .share-links-div { display: flex; justify-content: center; margin-left: auto; margin-right: auto; margin-top: -48px; width: max-content; padding: 16px 24px; background-color: var(--white); border: solid 1px var(--black); border-radius: 30px; column-gap: 24px;} .share-links-div ul { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; column-gap: 16px;} .share-links-div p { margin-bottom: 0; color: #5d5d5d;} .rating-body { position: relative;} .rating-body .btn-close { position: absolute; right: 0;} .rating-body .heading h3 { color: var(--dark-text); font-weight: 700;} .rating-body .desc { display: flex; align-items: center; column-gap: 16px; justify-content: space-between; margin-bottom: 30px;} .rating-body .desc p { margin-bottom: 0;} .rating-body .desc h6 { margin-bottom: 0; color: var(--dark-text);} .rating-body .desc h6 span { font-weight: 700;} .rating-range-slider { margin-bottom: 30px;} .rating-range-slider ul { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; justify-content: space-between;} .rating-range-slider ul li { text-align: end; position: relative; width: 16px;} /* .rating-range-slider ul li:first-of-type { text-align: left;} */ .rating-range-slider ul li a::before { content: ""; position: absolute; width: 1px; background-color: #ccc; height: 10px; top: -10px; left: 50%; transform: translateX(-50%);} .rating-range-slider ul li a { color: #ccc; font-size: 14px; margin-top: 5px; display: inline-block; position: relative;} #ratingCustomRange { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: #efefef; position: relative; z-index: 2; outline: none; transition: background-image 0.3s ease;} #ratingCustomRange::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background-color: #33d4ce; border-radius: 50%; cursor: pointer; border: none; margin-top: -6px;} #ratingCustomRange::-moz-range-track { height: 8px; background: transparent; border: none;} .mood-range-slider ul { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; justify-content: space-between; max-width: 80%; margin: auto auto 24px auto;} .mood-range-slider ul li img { width: 100%; height: 100%;} .mood-range-slider ul .form-check-input { display: none;} .mood-range-slider ul .form-check-label { padding: 4px; transition: all 0.2s ease; border-radius: 50%; width: 48px; height: 48px;} .mood-range-slider ul .form-check { padding-left: 0;} .mood-range-slider ul li .form-check-input:checked+.form-check-label { background-color: #efefef; transform: scale(1.2);} .rating-done { text-align: end;} .rating-done .btn { border-radius: 30px;} .top-blog-content img { border-radius: 25px;} .your-vibes a { display: flex; background-color: #0b253f; color: #fff; font-weight: 700; font-size: 14px; padding: 7px 15px; border-radius: 50px; line-height: normal; gap: 2px;} .your-vibes a span.vibespan { border-bottom: 2px solid #4ab2df;} .users-scores { background-color: #000; border-radius: 25px; margin-bottom: 0 !important; column-gap: 15px;} .users-scores .percent .text-white { font-size: 14px;} .users-scores .percent { width: calc(100% - 120px); border: 0; padding-right: 0; margin-right: auto; position: relative;} a.percent-score { display: flex; align-items: center; column-gap: 10px;} .circular-progress .inner-circle { width: 34px; height: 34px; left: 3px;} strong#selectedRangeValue { display: none;} span.emoji-range { display: none;} strong#selectedRangeValue.active-rating { display: inline-block;} strong#selectedRangeValue.active-rating::after { content: "%"; font-size: 10px; font-weight: normal; padding-left: 2px;} .active-rating + span.emoji-range { display: flex; width: auto;} span.emoji-range img { width: 30px;} .has-active b { display: none;} span.emoji-range img { margin-right: -10px; background-color: #202020; padding: 2px; border-radius: 50px;} .users-scores.has-active { flex-wrap: wrap; gap: 13px;} .your-vibes a { align-items: center;} span.thanks { display: none;} .users-scores.has-active span.thanks { display: inline-block;} span.yourv { display: flex; gap: 4px;} .has-active span.yourv { display: none;} @media (min-width: 0px) and (max-width: 991px) { .blog-breadcrumb ul.breadcrumb li:last-child { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; display: inline-block; color: #b6bbc1;} .blog-breadcrumb ul.breadcrumb { white-space: nowrap;} .middle-blog-details { position: static !important; width: 100%; display: flex; flex-direction: column; } .blog-section-row { flex-wrap: wrap; } .blog-details-section { padding-top: 30px; } .blog-middle-outer { width: 100%; } .blog-details-section .categories { /* flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; */ padding: 0 20px; margin: 24px 0; } .blog-details-section .categories::-webkit-scrollbar { display: none; } .categories-single { width: max-content; white-space: nowrap; padding: 4px 12px; font-size: 14px; } .blog-details-section .categories + h2 { margin: 24px 20px; } .blog-details-section .container { padding: 0; } .blog-breadcrumb { padding: 0 20px; /* order: 1; */ } .blog-detail-page .footer-main { margin-bottom: 0 !important; } /* .users-scores{ order: 3; } */ .left-quick-links { width: 100%; padding: 0 15px; margin-bottom: 30px;} .quick-links-box { padding: 30px 20px; margin-top: 30px;} .blog-middle-outer { width: 100%;} .users-scores { margin: 0 -15px; border-radius: 0;} .blog-details-section .categories { padding-right: 0;} .top-blog-content img { max-width: calc(100% - 40px); margin: 0 auto; display: block;} section.blog-details-section { padding-top: 0;} } @media (min-width: 0px) and (max-width: 576px) { .middle-blog-content .box-bg-yellow .heading, .middle-blog-content .box-bg-yellow p { margin: 0; } .author-section .img-box { min-height: 150px; } .author-section .img-box img { height: 100px; width: 100px; } .article-nbr { width: 60px; height: 60px; font-size: 14px; } .author-section .author-name { font-size: 20px; } .users-scores .percent { width: 58%; padding-right: 10px; } .likes-comment p { font-size: 14px !important; } .users-scores { column-gap: 12px; } .blog-details-section h2 { font-size: 30px; } .middle-blog-content h2 { font-size: 26px; } .middle-blog-content h3 { font-size: 24px; } .mood-range-slider ul { max-width: 100%;} .mood-range-slider ul .form-check-label { width: 38px; height: 38px;} .mood-range-slider ul svg { width: 30px; height: 30px;} } .article-nbr { flex-direction: column;} .article-nbr p { margin: 0;} /*********************** ********table-box****** **************************/ .table-box { border: 1px solid var(--background-offwhite); border-radius: 10px;} table.table { border-radius: 10px; overflow: hidden; margin: 0px; text-align: center;} .table thead { background: var(--background-offwhite);} table.table th { box-shadow: none !important; border-color: var(--background-offwhite) !important;} .table tbody tr:nth-child(even), .table tbody tr:hover { background: var(--background-offwhite);} .table tbody td { border-color: var(--background-offwhite);} ul.smiley-items li a img { width: 30px; margin-left: -9px; border: 2px solid #000; border-radius: 50%; transition: 0.3s;} .smiley-items li { width: 70px;} ul.smiley-items li a { list-style: none; padding-left: 0; margin-bottom: 0; display: flex; align-items: center; margin-left: 0;} ul.smiley-items li a img:hover { transform: scale(1.15); z-index: 2;} .smiley-items li:hover { transform: none !important; } @media (max-width: 767px) { .table-box table.table { overflow-x: auto; display: block;} .table-box table.table th, .table-box table.table td { min-width: 100px; text-align: start !important;} } .dark-mode .share-links-div ul li svg { filter: invert(1);} .dark-mode .middle-blog-content .box-bg-gray { background-color: var(--background-offwhite);} .dark-mode .middle-blog-content .check-list li::before , .dark-mode .categories-single { background-color: #1f1f2a; color: #ddd;} .dark-mode .users-scores { background-color: var(--background-offwhite);} /* ===== blog-coin-box.css: coin box banner at the top of the article ===== */ /* Coin box at the top of blog articles ( blog/components-details/coin-box.blade.php ). One row from 700 px box width, two rows below. */ .mg-coinbox-wrap { container-type: inline-size; margin: 0 0 24px; } /* Same side gutter as the article text where the layout is single column ( blog-left-detail.css ) */ @media (max-width: 991px) { .mg-coinbox-wrap { margin-left: 20px; margin-right: 20px; } } .mg-coinbox { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "coin text actions"; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 18px; color: #fff; background: radial-gradient(120% 160% at 100% 0%, rgba(168, 48, 170, .5) 0%, rgba(168, 48, 170, 0) 42%), linear-gradient(135deg, #141a33 0%, #161c38 60%, #1c1840 100%); box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 8px 22px rgba(22, 24, 29, .12); } .dark-mode .mg-coinbox { box-shadow: 0 0 0 1px #2b3149; } .mg-coinbox::after { content: ""; position: absolute; right: -30px; top: -30px; width: 200px; height: 160px; background: repeating-linear-gradient(120deg, rgba(255, 80, 200, .16) 0 2px, transparent 2px 44px); pointer-events: none; } .mg-coinbox__coin { grid-area: coin; width: 80px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); } .mg-coinbox__text { grid-area: text; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; min-width: 0; } .mg-coinbox__tag { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c9cde0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .mg-coinbox__title { margin: 2px 0 0; font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -.3px; color: #fff; } .mg-coinbox__sub { margin: 0; font-size: 15px; line-height: 1.3; color: #e8eaf2; } .mg-coinbox__sub b { color: #ffd518; font-weight: 800; } .mg-coinbox__actions { grid-area: actions; display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; } .mg-coinbox__code { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #fff; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .35); border-radius: 12px; padding: 10px 12px; cursor: pointer; white-space: nowrap; } .mg-coinbox__code svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .mg-coinbox__code:hover { border-color: rgba(255, 255, 255, .6); } .mg-coinbox__code.is-copied { border-style: solid; border-color: #ffd518; color: #ffd518; } .mg-coinbox__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; font-size: 15px; font-weight: 800; color: #16181d !important; background: linear-gradient(180deg, #ffe24d, #ffd518); padding: 11px 18px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(255, 213, 24, .22); } .mg-coinbox__cta:hover { filter: brightness(1.05); } .mg-coinbox__cta svg { width: 18px; height: 18px; stroke: #16181d; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .mg-coinbox[dir="rtl"] .mg-coinbox__cta svg { transform: scaleX(-1); } .mg-coinbox[dir="rtl"] .mg-coinbox__tag { letter-spacing: 0; } .mg-coinbox__code:focus-visible, .mg-coinbox__cta:focus-visible { outline: 3px solid #ffd518; outline-offset: 2px; } @container (max-width: 700px) { .mg-coinbox { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "coin text" "actions actions"; gap: 12px; padding: 14px; } .mg-coinbox__coin { width: 64px; } .mg-coinbox__title { font-size: 19px; } .mg-coinbox__sub { font-size: 14px; } .mg-coinbox__actions { justify-content: space-between; } .mg-coinbox__cta { flex: 1; } } /* ===== blog-list.css: blog/tutorial overview (index) pages ===== */ .breadcrumb-main .breadcrumb-menu { color: #747477; font-size: 15px; line-height: 1; font-weight: 500;} .breadcrumb-main .breadcrumb-nav { padding: 30px 0px 20px 0px;} .blog-list-main .blog-heading h1 { font-family: "Open Sans", sans-serif; text-transform: capitalize; font-weight: 700; font-size: 38px; line-height: 43px; margin-bottom: 6px; text-align: center;} .blog-list-main .blog-heading p { font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 23px; color: #313131; text-align: center;} .main-section.blog-list-main { background-color: #f2f2f2; padding-top: 50px; padding-bottom: 50px;} .main-section.blog-list-main .blog-heading { margin-bottom: 70px;} .blog-list-inner .blog-list-img img { border-radius: 20px;} .blog-list-bottom h2 { font-size: 24px; color: #000000; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-family: "Open Sans", sans-serif; margin-top: 16px; margin-bottom: 20px;} .blog-btn-main .btn.blog-btn { position: relative; color: var(--black); background: #f2f2f2; border: none; border-radius: 50px; padding: 10px 25px; z-index: 1; overflow: hidden;} /* Gradient border */ .blog-btn-main .btn.blog-btn::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: linear-gradient(271deg, #FFBA30 0%, #FF0FB4 100%); border-radius: 60px; z-index: -1;} .blog-btn-main .btn.blog-btn::after { content: ""; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: #f2f2f2; border-radius: 48px; z-index: -1;} .blog-list-inner { margin: 10px;} .main-section.blog-list-main .slick-dots { display: flex !important; justify-content: flex-start; position: static; margin-top: 50px;} .main-section.blog-list-main .slick-dots .slick-active { background-color: #000000;} .main-section.blog-list-main .slick-dots li { width: 100%; background-color: #d6d6d6; height: 4px; margin: 0px;} .process-percentage .circular-progress { width: 69px; height: 69px; border-radius: 50%; background: conic-gradient(#17d07a 70%, #1d4528 0%); display: flex; align-items: center; justify-content: center; position: relative;} .process-percentage { margin-left: 30px; margin-top: -30px;} .process-percentage .circular-progress .inner-circle { width: 63px; height: 63px; background-color: #0a1b22; border-radius: 50%; position: absolute;} .process-percentage .circular-progress .percentage { position: relative; font-size: 20px; font-weight: bold; z-index: 1; color: #fff !important; margin-bottom: 0;} .process-percentage .circular-progress sup { font-size: 11px;} .blog-list-category { background-color: #202020; padding: 20px 40px;} .blog-list-category .categories .categories-single { border-radius: 50px; background-color: #dedede; color: #000; padding: 7px 26px; font-size: 20px; margin: 0px 10px; color: #1c1c1c; font-weight: 500; font-family: "Open Sans", sans-serif; text-align: center;} .blog-list-category .categories-single.active, .blog-list-category .categories-single:hover{ background: #fae619;} .multi-blog-listing-section { margin-top: 50px;} ul.blog-upl-details { display: flex; align-items: center; justify-content: space-between; list-style-type: none; margin: 0px; padding: 0px;} ul.blog-upl-details li img { width: 20px; height: auto;} ul.blog-upl-details li { font-size: 14px; color: var(--middark-gray); font-weight: 500; font-family: "Open Sans"; display: flex; align-items: center; column-gap: 6px;} .blog-writer { display: flex; align-items: center; column-gap: 10px;} .blog-btn-main { display: flex; align-items: center; justify-content: space-between; margin-top: 30px;} .blog-writer h3 { font-size: 18px; color: var(--black); font-weight: 500; font-family: "Open Sans"; margin: 0px;} .blog-writer img { width: 40px; height: 40px;} .multi-blog-listing-section .btn.blog-btn::after{ background: #fff;} .multi-blog-listing-section .btn.blog-btn::after{ background: #fff;} .pagination-main { margin-top: 60px;} .pagination-main .pagination { justify-content: end; background-color: #f3f3f3; padding: 10px; border-radius: 60px; column-gap: 10px; width: fit-content; margin:0px auto;} .pagination-main button.page-link, .pagination-main a.page-link { height: 56px; width: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--black); border: none; background-color: transparent; } .pagination-main button.page-link:focus, .pagination-main a.page-link:focus { box-shadow: none; } .pagination-main button.page-link.active, .pagination-main a.page-link.active, .pagination-main button.page-link:hover, .pagination-main a.page-link:hover { background: #fae619; color: #000; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .page-item:first-child .page-link{ background-color: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .page-item:first-child .page-link, .page-item:last-child .page-link { width: 100%; border-radius: 50px; padding: 20px; } .page-item:last-child .page-link { background-color: var(--black); color: var(--white);} .tab-content>.blog-box.active { display: flex;} ul.blog-upl-details svg { max-width: 18px; height: 19px;} .blogs-topbar section.main-section.blog-list-main { background-color: transparent; color: #fff; padding: 0 0 40px 0;} .blogs-topbar .blog-list-bottom h2 { color: #fff; font-weight: 500;} .blogs-topbar .blog-btn-main .btn.blog-btn::before, .blogs-topbar .blog-btn-main .btn.blog-btn::after { display: none;} .blogs-topbar .blog-btn-main .btn.blog-btn { background: transparent; border: 1px solid #fff; color: #fff;} .blog-writer img { border-radius: 50%; object-fit: cover; } .multi-blog-listing-section .row.blog-box { row-gap: 30px; } .blog-list-bottom h2 a { color: var(--black);} .blogs-topbar .blog-list-bottom h2 a { color: #fff;} .blogs-topbar .blog-btn-main .btn.blog-btn:hover { background-color: #fff; color: #000; } @media (max-width:1366px) { .blog-list-category { padding: 20px 0px; } } @media (max-width:1200px) { ul.blog-upl-details li { font-size: 13px; } } @media (max-width:991px) { .blog-list-bottom h2 { font-size: 19px; line-height: 26px; } .multi-blog-listing-section { margin-bottom: 50px; } ul.blog-upl-details li { font-size: 11px; } ul.blog-upl-details li img { width: 14px; height: auto; } .blog-writer h3 { font-size: 15px; } .blog-btn-main .btn.blog-btn { padding: 9px 18px; } .blog-writer img { width: 35px; height: 35px; } .blog-btn-main { margin-top: 20px; } .blog-list-category .categories .categories-single { padding: 7px 26px; } .multi-blog-listing-section .row{ row-gap: 30px; } .breadcrumb-main .breadcrumb-nav .breadcrumb, .breadcrumb-main #categories-tab.active::after { display: flex !important; } .categories.nav.nav-pills { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 20px 0;} section.blog-list-category { padding: 0;} section.blog-list-category .container { padding-right: 0;} } @media (max-width:767px) { .main-section.blog-list-main .blog-heading { margin-bottom: 50px; } .blog-list-slider { margin-left: -10px; } } @media (max-width:575px) { .blog-list-main .blog-heading p { font-size: 18px !important; max-width: 60%; line-height: 26px; margin: 0 auto; } .blog-list-main .blog-heading h1 { font-size: 32px; line-height: 43px; margin-bottom: 5px; } .blog-list-slider .slick-list.draggable , .blog-list-category .slick-list.draggable{ margin-right: -20px; } ul.blog-upl-details li { font-size: 17px; } .main-section.blog-list-main { padding-top: 20px; padding-bottom: 25px; } .main-section.blog-list-main .blog-heading { margin-bottom: 40px; } .blog-list-category .categories .categories-single { padding: 7px 33px; } ul.blog-upl-details li img { width: 18px; height: auto; } .blog-btn-main { margin-top: 30px; } .multi-blog-listing-section { margin-top: 35px; } .process-percentage .circular-progress .inner-circle { width: 50px; height: 50px; } .process-percentage .circular-progress { width: 58px; height: 58px; } .pagination-main button.page-link, .pagination-main a.page-link { height: 45px; width: 45px; } .breadcrumb-main .breadcrumb-nav { padding: 20px 0px 10px 0px; } .pagination-main .pagination { justify-content: space-between; } .blogs-topbar section.main-section.blog-list-main { padding: 0 0 20px 0;} .blogs-topbar .blog-btn-main .btn.blog-btn { padding: 7px 25px;} } @media (max-width: 480px) { .multi-blog-listing-section .blog-list-inner{ margin: 0px; } .pagination-main .pagination { width: auto; } .pagination-main button.page-link, .pagination-main a.page-link { font-size: 13px; } .process-percentage { margin-left: 20px; } .page-item:first-child .page-link, .page-item:last-child .page-link { padding: 15px; } .blog-btn-main .btn.blog-btn { padding: 11px 25px; font-size: 13px; } .blog-list-category .categories .categories-single { margin: 0px 6px; } .main-section.blog-list-main .slick-dots { margin-top: 35px; } .multi-blog-listing-section .row { row-gap: 25px; } .blog-btn-main { margin-top: 25px; } ul.blog-upl-details li { font-size: 12px; } ul.blog-upl-details li { column-gap: 5px; } .blog-list-main .blog-heading h1 { font-size: 26px; line-height: 35px; margin-bottom: 0px; } .main-section.blog-list-main .blog-heading { margin-bottom: 25px; } .blog-list-main .blog-heading p { font-size: 15px !important; max-width: 73%; line-height: 22px; } .blog-list-category .categories .categories-single { padding: 5px 29px; font-size: 13px; } ul.blog-upl-details li { font-size: 12px; } ul.blog-upl-details li { column-gap: 5px; } ul.blog-upl-details li img { width: 15px; height: auto; } } li.page-item.dots-items.disabled span.page-link { background-color: transparent; border: 0; vertical-align: middle; height: 56px; line-height: 34px; } .page-item:first-child .page-link, .page-item:last-child .page-link { width: 56px; padding: 0; font-size: 33px;} .page-item:first-child .page-link span ,.page-item:last-child .page-link span{ display: inline-block; height: 40px; line-height: 36px;} @media (max-width: 767px) { .pagination-main .pagination { column-gap: 2px;} .pagination-main button.page-link, .pagination-main a.page-link { height: 35px; width: 35px; padding-left: 5px; padding-right: 5px;} .page-item:first-child .page-link, .page-item:last-child .page-link { padding: 9px; width: 35px; padding: 0; font-size: 23px;} .page-item:first-child .page-link span, .page-item:last-child .page-link span { height: 30px; line-height: 23px;} li.page-item.dots-items.disabled span.page-link { height: 35px; line-height: 15px;} } @media (max-width: 400px) { ul.blog-upl-details li { font-size: 11px; } } .circle-round { --percent: 0; /* default */ position: relative; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(#17d07a calc(var(--percent) * 3.6deg), #1d4528 0deg); display: flex; justify-content: center; align-items: center; } .circle-round::before { content: ''; position: absolute; width: 63px; height: 63px; background: #0a1b22; border-radius: 50%; } .value-digits { position: absolute; font-size: 18px; font-weight: bold; color: #fff; } .dark-mode .multi-blog-listing-section .btn.blog-btn::after { background: #050509;} .dark-mode .pagination-main .pagination { background-color: var(--background-offwhite);} .dark-mode .page-item:first-child .page-link { background-color: #34343c;} .dark-mode section.blog-list-category { background-color: var(--background-offwhite);} /* ===== article-blocks.css: mg-* content blocks (Teil 1, 1a, Phase 2) ===== */ /* Article content blocks ( mg-* ), rendered by App\Services\ArticleBlocks. Loaded on blog and tutorial detail pages that use them. Light by default, .dark-mode below. Font: Open Sans ( no extra webfont ). */ .middle-blog-content { --mg-brand: #ffd518; --mg-brand-ink: #16181d; --mg-surface: #ffffff; --mg-ink: #16181d; --mg-muted: #5d6370; --mg-line: #e3e3dc; --mg-l1: #1f8a5b; --mg-l2: #2f6fd6; --mg-l3: #8a3fd1; --mg-level-ink: #ffffff; --mg-shadow: 0 1px 2px rgba(22,24,29,.06), 0 6px 18px rgba(22,24,29,.06); } .dark-mode .middle-blog-content { --mg-surface: #1a1f33; --mg-ink: #eef0f3; --mg-muted: #a3a9b5; --mg-line: #2b3149; --mg-l1: #4fd08f; --mg-l2: #6ea0ff; --mg-l3: #c08cf0; --mg-level-ink: #0d0f12; --mg-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3); } .middle-blog-content [id] { scroll-margin-top: 110px; } .middle-blog-content .mg-answer, .middle-blog-content .mg-glance, .middle-blog-content .mg-toc, .middle-blog-content .mg-steps, .middle-blog-content .mg-level, .middle-blog-content .mg-video, .middle-blog-content .mg-cta, .middle-blog-content .mg-next, .middle-blog-content .mg-faq { margin: 0 0 22px; } /* Icon tile */ .middle-blog-content .mg-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mg-brand); color: var(--mg-brand-ink); } .middle-blog-content .mg-icon svg { width: 24px; height: 24px; } /* Answer card */ .middle-blog-content .mg-answer { display: flex; gap: 16px; align-items: flex-start; background: var(--mg-surface); color: var(--mg-ink); border: 2px solid var(--mg-brand); border-radius: 18px; padding: 20px; box-shadow: var(--mg-shadow); } .middle-blog-content .mg-answer p { font-size: 19px; line-height: 1.5; margin: 0; } /* At a glance */ .middle-blog-content .mg-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .middle-blog-content .mg-glance__item { display: flex; flex-direction: column; gap: 6px; background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 14px; padding: 14px; } .middle-blog-content .mg-glance__item strong { font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -.2px; } .middle-blog-content .mg-glance__item > span:last-child { font-size: 15px; color: var(--mg-muted); line-height: 1.35; } .middle-blog-content .mg-glance .mg-icon { width: 38px; height: 38px; border-radius: 10px; } .middle-blog-content .mg-glance .mg-icon svg { width: 20px; height: 20px; } /* Contents chips */ .middle-blog-content .mg-toc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .middle-blog-content .mg-toc a { flex: none; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; padding: 8px 14px; border-radius: 999px; background: var(--mg-ink); color: var(--mg-surface); } .middle-blog-content .mg-toc a:hover, .middle-blog-content .mg-toc a:focus-visible { background: var(--mg-brand); color: var(--mg-brand-ink); } /* Video facade: 16:9 frame from the first paint, the player only after the click */ .middle-blog-content .mg-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 18px; overflow: hidden; background: #062a1b; } .middle-blog-content .mg-video__play { all: unset; box-sizing: border-box; position: absolute; inset: 0; cursor: pointer; display: block; } .middle-blog-content .mg-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } .middle-blog-content .mg-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); } .middle-blog-content .mg-video__icon { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--mg-brand); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .middle-blog-content .mg-video__icon svg { width: 32px; height: 32px; fill: #16181d; margin-left: 4px; } .middle-blog-content .mg-video__cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; color: #fff; font-weight: 700; font-size: 20px; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .middle-blog-content .mg-video__cap small { flex: none; font-size: 14px; font-weight: 600; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 6px; text-shadow: none; } .middle-blog-content .mg-video__play:focus-visible { outline: 3px solid var(--mg-brand); outline-offset: -3px; } .middle-blog-content .mg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Level band */ .middle-blog-content .mg-level { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; color: var(--mg-level-ink); margin-top: 28px; } .middle-blog-content .mg-level h2 { color: inherit; margin: 0; font-size: 26px; line-height: 1.15; } .middle-blog-content .mg-level__badge { flex: none; font-weight: 800; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; background: rgba(255,255,255,.22); padding: 4px 10px; border-radius: 999px; } .middle-blog-content .mg-level--1 { background: var(--mg-l1); } .middle-blog-content .mg-level--2 { background: var(--mg-l2); } .middle-blog-content .mg-level--3 { background: var(--mg-l3); } /* Step cards: icon tile left ( or the step number when there is no icon ), the number itself stays in the h3 */ .middle-blog-content .mg-steps { list-style: none; margin-left: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: mg-step; } .middle-blog-content .mg-step { counter-increment: mg-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: start; background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 16px; padding: 16px; margin: 0; } .middle-blog-content .mg-step::before { display: none; } .middle-blog-content .mg-step:not(:has(> .mg-icon))::before { content: counter(mg-step); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mg-ink); color: var(--mg-surface); font-weight: 800; font-size: 22px; grid-row: 1 / span 3; position: static; } .middle-blog-content .mg-step > * { grid-column: 2; margin: 0; } .middle-blog-content .mg-step > .mg-icon { grid-column: 1; grid-row: 1 / span 3; } .middle-blog-content .mg-step > h3 { font-size: 20px; line-height: 1.25; } .middle-blog-content .mg-step > img { width: 100%; height: auto; border-radius: 10px; } /* Offer banner */ .middle-blog-content .mg-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; border-radius: 18px; padding: 16px 18px; background: #16181d; color: #f6f6f2; } .dark-mode .middle-blog-content .mg-cta { background: #0b0d14; border: 1px solid var(--mg-line); } .middle-blog-content .mg-cta > img, .middle-blog-content .mg-cta__coin { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; margin: 0; } .middle-blog-content .mg-cta__coin { border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff7b0, var(--mg-brand) 55%, #c9a400); color: #16181d; font-weight: 800; font-size: 15px; text-align: center; line-height: 1; } .middle-blog-content .mg-cta__tag { grid-column: 2; align-self: end; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mg-brand); } .middle-blog-content .mg-cta p { grid-column: 2; align-self: start; margin: 0; color: inherit; line-height: 1.45; } .middle-blog-content .mg-cta__btn { grid-column: 3; grid-row: 1 / span 2; text-decoration: none; font-weight: 700; background: var(--mg-brand); color: var(--mg-brand-ink) !important; padding: 12px 16px; border-radius: 12px; white-space: nowrap; } .middle-blog-content .mg-cta__btn:hover { filter: brightness(1.05); } /* Read next */ .middle-blog-content .mg-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .middle-blog-content .mg-next__card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--mg-surface); color: var(--mg-ink) !important; border: 1px solid var(--mg-line); border-radius: 14px; padding: 12px; } .middle-blog-content .mg-next__card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 10px; margin: 0; } .middle-blog-content .mg-next__card:not(:has(img))::before { content: ""; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, var(--mg-l2), var(--mg-l3)); } .middle-blog-content .mg-next__card:nth-child(3n+1):not(:has(img))::before { background: linear-gradient(135deg, var(--mg-l1), var(--mg-l2)); } .middle-blog-content .mg-next__card:nth-child(3n):not(:has(img))::before { background: linear-gradient(135deg, var(--mg-l3), var(--mg-l1)); } .middle-blog-content .mg-next__card strong { font-size: 18px; line-height: 1.15; } .middle-blog-content .mg-next__card span { font-size: 14px; color: var(--mg-muted); line-height: 1.35; } .middle-blog-content .mg-next__card:hover, .middle-blog-content .mg-next__card:focus-visible { border-color: var(--mg-brand); } /* FAQ */ .middle-blog-content .mg-faq { display: flex; flex-direction: column; gap: 8px; } .middle-blog-content .mg-faq details { background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px 16px; } .middle-blog-content .mg-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .middle-blog-content .mg-faq summary::-webkit-details-marker { display: none; } .middle-blog-content .mg-faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--mg-muted); } .middle-blog-content .mg-faq details[open] summary::after { content: "\2013"; } .middle-blog-content .mg-faq details > :not(summary) { margin: 8px 0 0; color: var(--mg-muted); } .middle-blog-content .mg-faq summary:focus-visible, .middle-blog-content .mg-toc a:focus-visible, .middle-blog-content .mg-next__card:focus-visible { outline: 3px solid var(--mg-brand); outline-offset: 2px; } /* Existing boxes in dark mode: the yellow box keeps dark text on a darker yellow, the green box gets a dark green */ .dark-mode .middle-blog-content .box-bg-yellow { background-color: #e6d800; color: #16181d; } .dark-mode .middle-blog-content .box-bg-yellow * { color: #16181d; } .dark-mode .middle-blog-content .box-bg-green { background-color: #173b2a; color: #eef0f3; } .dark-mode .middle-blog-content .box-bg-green * { color: #eef0f3; } @media (max-width: 640px) { .middle-blog-content .mg-answer { padding: 16px; gap: 12px; } .middle-blog-content .mg-answer p { font-size: 17px; } .middle-blog-content .mg-glance, .middle-blog-content .mg-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } .middle-blog-content .mg-next__card:nth-child(3) { grid-column: 1 / -1; } .middle-blog-content .mg-step { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; } .middle-blog-content .mg-step > .mg-icon, .middle-blog-content .mg-step:not(:has(> .mg-icon))::before { width: 36px; height: 36px; border-radius: 10px; } .middle-blog-content .mg-step > .mg-icon svg { width: 20px; height: 20px; } .middle-blog-content .mg-step > img, .middle-blog-content .mg-step > p { grid-column: 1 / -1; } .middle-blog-content .mg-level { padding: 14px 16px; } .middle-blog-content .mg-level h2 { font-size: 22px; } .middle-blog-content .mg-cta { grid-template-columns: auto minmax(0, 1fr); } .middle-blog-content .mg-cta__btn { grid-column: 1 / -1; grid-row: auto; text-align: center; margin-top: 10px; } .middle-blog-content .mg-video__icon { width: 60px; height: 60px; } .middle-blog-content .mg-video__cap { font-size: 16px; left: 12px; right: 12px; bottom: 10px; } } @media (prefers-reduced-motion: no-preference) { .middle-blog-content .mg-next__card, .middle-blog-content .mg-video__icon { transition: transform .15s ease, border-color .15s ease; } .middle-blog-content .mg-next__card:hover { transform: translateY(-2px); } .middle-blog-content .mg-video__play:hover .mg-video__icon { transform: translate(-50%, -50%) scale(1.06); } } /* ================================================================ Teil 1a ( 25.10.2026 ): controller keys, zebra tables, platform switch Reference: MG-Content/vorlagen/referenz/mg-blog-referenz.css ================================================================ */ .middle-blog-content { --mg-cap: #20252e; --mg-cap-edge: #0b0d11; --mg-ps-cross: #3d6fe0; --mg-ps-circle: #d9342c; --mg-ps-square: #d94fb0; --mg-ps-triangle: #1f9d63; --mg-xb-a: #3e8e2b; --mg-xb-b: #c7362c; --mg-xb-x: #2563c7; --mg-xb-y: #c99a00; --mg-table-head: #16181d; --mg-table-head-ink: #ffffff; --mg-zebra: #f1f3f6; --mg-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } .dark-mode .middle-blog-content { --mg-cap: #2c3340; --mg-cap-edge: #080a0d; --mg-ps-cross: #7aa2ff; --mg-ps-circle: #ff6b6b; --mg-ps-square: #f18bd0; --mg-ps-triangle: #46d3a3; --mg-xb-a: #5fb53a; --mg-xb-b: #e2443a; --mg-xb-x: #3b82e0; --mg-xb-y: #f3c22d; --mg-table-head: #0b0d14; --mg-table-head-ink: #eef0f3; --mg-zebra: #1a1f27; } /* Controller key ( text stays in the DOM for SEO/screen readers; symbols are CSS, no logos ) */ .middle-blog-content kbd.mg-key { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; margin: 0 1px; vertical-align: middle; font: 700 12px/1 var(--mg-mono); letter-spacing: .02em; color: #fff; background: var(--mg-cap); border-radius: 8px; box-shadow: inset 0 -3px 0 var(--mg-cap-edge), 0 1px 2px rgba(0,0,0,.25); } .middle-blog-content .mg-faq kbd.mg-key, .middle-blog-content p kbd.mg-key, .middle-blog-content li kbd.mg-key { height: 24px; min-width: 24px; font-size: 11px; } .middle-blog-content kbd.mg-key[data-key="bumper"] { border-radius: 999px; min-width: 38px; font-size: 11px; } .middle-blog-content kbd.mg-key[data-key="trigger"] { border-radius: 12px 12px 7px 7px; height: 30px; min-width: 34px; font-size: 11px; } .middle-blog-content kbd.mg-key[data-key="stick"] { width: 28px; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px #3c4553, inset 0 -3px 0 var(--mg-cap-edge); font-size: 11px; } .middle-blog-content kbd.mg-key[data-key="dpad"] { border-radius: 6px; font-size: 13px; } .middle-blog-content kbd.mg-key[data-key="menu"] { border-radius: 999px; font-size: 10px; text-transform: uppercase; height: 22px; } .middle-blog-content kbd.mg-key[data-key="xb-a"] { background: var(--mg-xb-a); } .middle-blog-content kbd.mg-key[data-key="xb-b"] { background: var(--mg-xb-b); } .middle-blog-content kbd.mg-key[data-key="xb-x"] { background: var(--mg-xb-x); } .middle-blog-content kbd.mg-key[data-key="xb-y"] { background: var(--mg-xb-y); color: #1a1a1a; } .middle-blog-content kbd.mg-key[data-key^="ps-"] { width: 28px; padding: 0; border-radius: 50%; color: transparent; position: relative; overflow: hidden; } .middle-blog-content kbd.mg-key[data-key^="ps-"]::after { content: ""; position: absolute; inset: 6px; background: var(--mg-sym); -webkit-mask: var(--mg-mask) center / contain no-repeat; mask: var(--mg-mask) center / contain no-repeat; } .middle-blog-content kbd.mg-key[data-key="ps-cross"] { --mg-sym: var(--mg-ps-cross); --mg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); } .middle-blog-content kbd.mg-key[data-key="ps-circle"] { --mg-sym: var(--mg-ps-circle); --mg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' stroke='black' stroke-width='3.2' fill='none'/%3E%3C/svg%3E"); } .middle-blog-content kbd.mg-key[data-key="ps-square"] { --mg-sym: var(--mg-ps-square); --mg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='1.5' stroke='black' stroke-width='3.2' fill='none'/%3E%3C/svg%3E"); } .middle-blog-content kbd.mg-key[data-key="ps-triangle"] { --mg-sym: var(--mg-ps-triangle); --mg-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4L21 19H3z' stroke='black' stroke-width='3' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); } /* Key combos */ .middle-blog-content .mg-combo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; } .middle-blog-content .mg-plus { font: 700 13px var(--mg-mono); color: var(--mg-muted); } .middle-blog-content .mg-or { margin: 0 6px; color: var(--mg-muted); font-weight: 700; } /* "New in ..." combo cards */ .middle-blog-content .mg-combo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; } .middle-blog-content .mg-combo-card { background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .middle-blog-content .mg-combo-card__title { margin: 0; font-weight: 700; line-height: 1.35; } .middle-blog-content .mg-combo-card__keys { display: flex; flex-direction: column; gap: 8px; } .middle-blog-content .mg-combo-card__keys .mg-combo::before { content: attr(data-col); font: 700 10px var(--mg-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mg-muted); min-width: 24px; } .middle-blog-content .mg-combo-card kbd.mg-key { height: 34px; min-width: 34px; font-size: 13px; } .middle-blog-content .mg-combo-card kbd.mg-key[data-key^="ps-"] { width: 34px; font-size: 16px; } /* Platform switch ( dark pill to match mg-level/mg-cta tone; works without JS too, every column shown ) */ .middle-blog-content .mg-platform { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--mg-ink); margin: 0 0 16px; } .middle-blog-content .mg-platform button { font: 600 14px inherit; border: 0; border-radius: 999px; padding: 7px 14px; background: transparent; color: var(--mg-surface); cursor: pointer; } .middle-blog-content .mg-platform button[aria-pressed="true"] { background: var(--mg-brand); color: var(--mg-brand-ink); } .middle-blog-content[data-show="ps"] [data-col="xb"], .middle-blog-content[data-show="ps"] [data-col="sw"], .middle-blog-content[data-show="xb"] [data-col="ps"], .middle-blog-content[data-show="xb"] [data-col="sw"], .middle-blog-content[data-show="sw"] [data-col="ps"], .middle-blog-content[data-show="sw"] [data-col="xb"] { display: none; } /* Tables: dark sticky head, zebra rows, rounded container, horizontal scroll on mobile only */ .middle-blog-content .table-box { overflow-x: auto; border-radius: 16px; border: 1px solid var(--mg-line); background: var(--mg-surface); margin: 0 0 22px; } .middle-blog-content .table-box table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15.5px; font-variant-numeric: tabular-nums; } .middle-blog-content .table-box thead th { position: sticky; top: 0; z-index: 1; text-align: start; padding: 12px 14px; background: var(--mg-table-head); color: var(--mg-table-head-ink); font: 700 12px var(--mg-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .middle-blog-content .table-box tbody th { padding: 10px 14px; border-top: 1px solid var(--mg-line); vertical-align: middle; color: var(--mg-ink); background: transparent; font-weight: 600; text-align: start; } .middle-blog-content .table-box tbody tr:nth-child(even) th { background: var(--mg-zebra); } .middle-blog-content .table-box td { padding: 10px 14px; border-top: 1px solid var(--mg-line); vertical-align: middle; color: var(--mg-ink); } .middle-blog-content .table-box tbody tr:nth-child(even) td { background: var(--mg-zebra); } .middle-blog-content .table-box td:first-child { font-weight: 600; } /* Beat the legacy centered .table and Bootstrap's dark row borders */ .middle-blog-content .table-box table.table { text-align: start; margin: 0; } .middle-blog-content .table-box table.table th, .middle-blog-content .table-box table.table td { text-align: start; border-width: 0; border-top: 1px solid var(--mg-line); border-color: var(--mg-line); box-shadow: none; } .middle-blog-content .table-box table.table thead th { border-top: 0; } .middle-blog-content .table-box table.table td[data-col], .middle-blog-content .table-box table.table th[data-col] { text-align: center; } .middle-blog-content .table-box table.table tbody tr:hover td { background: var(--mg-zebra); } .middle-blog-content .table-box caption { caption-side: top; text-align: start; padding: 14px 16px 0; font-weight: 700; color: var(--mg-ink); } .middle-blog-content .table-box caption small { display: block; font-weight: 400; color: var(--mg-muted); margin-top: 2px; } .middle-blog-content .mg-keys-table td[data-col] { white-space: nowrap; } /* ================================================================ Phase 2 ( WhatsGaming inspiration, recherche/inspiration-whatsgaming.md ): verdict box, HTML/CSS bar charts, progress, buy-status tags, image compare, timeline ================================================================ */ .middle-blog-content .mg-verdict { display: flex; gap: 12px; align-items: flex-start; border-left: 4px solid var(--mg-muted); background: var(--mg-surface); color: var(--mg-ink); border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 0 0 22px; } .middle-blog-content .mg-verdict p { margin: 4px 0 0; } .middle-blog-content .mg-verdict__label { display: block; font: 700 12px var(--mg-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mg-muted); } .middle-blog-content .mg-verdict--yes { border-color: var(--mg-l1); } .middle-blog-content .mg-verdict--yes .mg-verdict__label { color: var(--mg-l1); } .middle-blog-content .mg-verdict--no { border-color: #d9342c; } .middle-blog-content .mg-verdict--no .mg-verdict__label { color: #d9342c; } .middle-blog-content .mg-verdict--wait { border-color: #c99a00; } .middle-blog-content .mg-verdict--wait .mg-verdict__label { color: #c99a00; } .middle-blog-content .mg-bars { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; } .middle-blog-content .mg-bar { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; align-items: center; gap: 10px; font-size: 14.5px; } .middle-blog-content .mg-bar__label { color: var(--mg-ink); } .middle-blog-content .mg-bar__track { position: relative; height: 10px; border-radius: 999px; background: var(--mg-line); overflow: hidden; } .middle-blog-content .mg-bar__track::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); border-radius: inherit; background: var(--mg-brand); } .middle-blog-content .mg-bar__value { color: var(--mg-muted); font-variant-numeric: tabular-nums; } /* Modifiers: a highlighted/marked bar, a warning bar ( e.g. "the wall" ), and an estimate ( hatched, not a real number yet ) */ .middle-blog-content .mg-bar--highlight .mg-bar__label, .middle-blog-content .mg-bar--highlight .mg-bar__value { color: var(--mg-ink); font-weight: 700; } .middle-blog-content .mg-bar--warn .mg-bar__track::after { background: #d9342c; } .middle-blog-content .mg-bar--estimate .mg-bar__track::after { background: repeating-linear-gradient(135deg, var(--mg-brand) 0 6px, transparent 6px 12px); } /* Delta bar: a lighter base fill up to --w-from, a highlighted segment from --w-from to --w, for "before -> after" comparisons */ .middle-blog-content .mg-bar--delta .mg-bar__track::after { width: var(--w-from, 0%); background: var(--mg-line); } .middle-blog-content .mg-bar--delta .mg-bar__track::before { content: ""; position: absolute; inset: 0; left: var(--w-from, 0%); width: calc(var(--w, 0%) - var(--w-from, 0%)); border-radius: inherit; background: var(--mg-brand); } .middle-blog-content .mg-bar__delta { color: var(--mg-l1); font-weight: 700; } .middle-blog-content .mg-bars__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mg-muted); margin: 2px 0 0; } .middle-blog-content .mg-bars__legend span { display: inline-flex; align-items: center; gap: 6px; } .middle-blog-content .mg-bars__legend span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--mg-sw, var(--mg-brand)); } /* Generic KPI tile grid ( 2-4 big numbers with a label and a one-line note; no icon needed, unlike mg-glance ) */ .middle-blog-content .mg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; } .middle-blog-content .mg-stats__item { background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .middle-blog-content .mg-stats__item--highlight { border-color: var(--mg-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--mg-brand) 10%, var(--mg-surface)), var(--mg-surface)); } .middle-blog-content .mg-stats__label { font: 700 11px var(--mg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mg-muted); } .middle-blog-content .mg-stats__value { font: 800 26px/1.1 var(--mg-display, inherit); letter-spacing: -.3px; } .middle-blog-content .mg-stats__note { font-size: 13.5px; color: var(--mg-muted); } .middle-blog-content .mg-progress { display: flex; flex-direction: column; gap: 6px; margin: 0 0 22px; } .middle-blog-content .mg-progress__head { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 600; color: var(--mg-ink); } .middle-blog-content .mg-progress__track { position: relative; height: 14px; border-radius: 999px; background: var(--mg-line); overflow: hidden; } .middle-blog-content .mg-progress__track::after { content: ""; position: absolute; inset: 0; width: var(--w, 0%); border-radius: inherit; background: var(--mg-brand); } .middle-blog-content .mg-tag { display: inline-flex; align-items: center; font: 700 11px var(--mg-mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--mg-line); color: var(--mg-ink); } .middle-blog-content .mg-tag--buy { background: #d7f5e3; color: #0f6b3f; } .dark-mode .middle-blog-content .mg-tag--buy { background: #15392a; color: #4fd08f; } .middle-blog-content .mg-tag--value { background: #eceff3; color: #2f6fd6; } .dark-mode .middle-blog-content .mg-tag--value { background: #1f252e; color: #6ea0ff; } .middle-blog-content .mg-tag--wait { background: #fff6c2; color: #8a6d00; } .dark-mode .middle-blog-content .mg-tag--wait { background: #3a3410; color: #f3c22d; } .middle-blog-content .mg-tag--hold { background: var(--mg-line); color: var(--mg-muted); } .middle-blog-content .mg-tag--endgame { background: #f1e3ff; color: #6b2fb0; } .dark-mode .middle-blog-content .mg-tag--endgame { background: #2a1b40; color: #c08cf0; } .middle-blog-content .mg-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; } .middle-blog-content .mg-compare figure { margin: 0; display: flex; flex-direction: column; gap: 6px; } .middle-blog-content .mg-compare img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; } .middle-blog-content .mg-compare figcaption { font-size: 14px; color: var(--mg-muted); text-align: center; } .middle-blog-content .mg-timeline { list-style: none; margin: 0 0 22px; padding: 0 0 0 20px; border-left: 2px solid var(--mg-line); display: flex; flex-direction: column; gap: 18px; } .middle-blog-content .mg-timeline__item { position: relative; } .middle-blog-content .mg-timeline__item::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--mg-brand); border: 2px solid var(--mg-surface); box-shadow: 0 0 0 2px var(--mg-line); } .middle-blog-content .mg-timeline__item strong { display: block; font-size: 16px; } .middle-blog-content .mg-timeline__item span { font-size: 13px; color: var(--mg-muted); } .middle-blog-content .mg-timeline__item p { margin: 4px 0 0; } /* ================================================================ Phase 2b ( WhatsGaming, zweiter Besuch 26.10.2026, Urteils-/Vergleichsartikel ): price compare row, key-takeaway callout, stat-card comparison ================================================================ */ .middle-blog-content .mg-pricecompare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; } .middle-blog-content .mg-pricecompare__item { background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .middle-blog-content .mg-pricecompare__label { font: 700 11px var(--mg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mg-muted); } .middle-blog-content .mg-pricecompare__value { font: 800 28px/1.1 var(--mg-display, inherit); letter-spacing: -.3px; } .middle-blog-content .mg-pricecompare__note { font-size: 13.5px; color: var(--mg-muted); } .middle-blog-content .mg-pricecompare__item--verdict { background: #16181d; color: #f6f6f2; border-color: #16181d; } .dark-mode .middle-blog-content .mg-pricecompare__item--verdict { background: #0b0d14; border-color: var(--mg-line); } .middle-blog-content .mg-pricecompare__item--verdict .mg-pricecompare__label { color: var(--mg-brand); } .middle-blog-content .mg-pricecompare__item--verdict .mg-pricecompare__note { color: #c9cde0; } /* Middle "times as expensive" badge, in place of the verdict tile ( still a 3-column row: price, multiplier, price ) */ .middle-blog-content .mg-pricecompare__item--multiplier { align-items: center; justify-content: center; text-align: center; background: #16181d; color: #f6f6f2; border-color: #16181d; border-radius: 50%; aspect-ratio: 1; padding: 8px; align-self: center; justify-self: center; } .dark-mode .middle-blog-content .mg-pricecompare__item--multiplier { background: #0b0d14; border-color: var(--mg-line); } .middle-blog-content .mg-pricecompare__item--multiplier .mg-pricecompare__value { color: var(--mg-brand); font-size: 20px; } .middle-blog-content .mg-pricecompare__item--multiplier .mg-pricecompare__label { color: #c9cde0; } .middle-blog-content .mg-takeaway { display: flex; gap: 12px; align-items: flex-start; border-left: 4px solid var(--mg-brand); background: var(--mg-surface); color: var(--mg-ink); border-radius: 0 14px 14px 0; padding: 12px 16px; margin: 0 0 22px; } .middle-blog-content .mg-takeaway__label { display: block; font: 700 11px var(--mg-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mg-brand-ink); background: var(--mg-brand); padding: 2px 8px; border-radius: 999px; width: fit-content; margin: 0 0 4px; } .middle-blog-content .mg-takeaway p { margin: 0; font-size: 15.5px; line-height: 1.5; } .middle-blog-content .mg-statcard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; } .middle-blog-content .mg-statcard__card { background: var(--mg-surface); color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .middle-blog-content .mg-statcard__head { display: flex; justify-content: space-between; align-items: baseline; } .middle-blog-content .mg-statcard__title { font: 700 17px var(--mg-display, inherit); } .middle-blog-content .mg-statcard__rating { font: 800 22px var(--mg-display, inherit); color: var(--mg-brand-ink); background: var(--mg-brand); padding: 2px 10px; border-radius: 10px; } .middle-blog-content .mg-statcard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; font-size: 13px; } .middle-blog-content .mg-statcard__stats span { display: flex; justify-content: space-between; color: var(--mg-muted); } .middle-blog-content .mg-statcard__stats span b { color: var(--mg-ink); } .middle-blog-content .mg-statcard__foot { font-size: 13.5px; color: var(--mg-muted); border-top: 1px solid var(--mg-line); padding-top: 8px; } @media (max-width: 640px) { .middle-blog-content .mg-combo-cards { grid-template-columns: minmax(0, 1fr); } .middle-blog-content .mg-compare { grid-template-columns: minmax(0, 1fr); } .middle-blog-content .mg-bar { grid-template-columns: 96px 1fr auto; font-size: 13.5px; } .middle-blog-content .mg-pricecompare { grid-template-columns: minmax(0, 1fr); } .middle-blog-content .mg-pricecompare__item--multiplier { aspect-ratio: auto; border-radius: 14px; } .middle-blog-content .mg-statcard { grid-template-columns: minmax(0, 1fr); } .middle-blog-content .mg-stats { grid-template-columns: minmax(0, 1fr); } } /* RTL ( Arabic, sa ): key rows keep their reading order ( L1 + R1, not R1 + L1 ), lists and tables follow the text direction */ .middle-blog-content .mg-combo, .middle-blog-content kbd.mg-key { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .middle-blog-content .check-list li::before, .middle-blog-content[dir="rtl"] .check-list li::before { left: auto; right: -24px; } [dir="rtl"] .middle-blog-content .number-list li, .middle-blog-content[dir="rtl"] .number-list li { padding-left: 0; padding-right: 40px; } [dir="rtl"] .middle-blog-content .number-list li::before, .middle-blog-content[dir="rtl"] .number-list li::before { left: auto; right: 6px; }