/* Modern UI — article paper refinement, var.15 A4-inspired proportions: 30 mm left field, 15 mm top/right/bottom. */ .article-paper-section { container-type: inline-size; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child { --article-paper-bg: #f4faff; --article-paper-edge: rgba(128, 174, 201, .34); --article-paper-shadow: rgba(31, 57, 72, .22); position: relative; isolation: isolate; box-sizing: border-box; width: min(100%, 1120px); margin-inline: auto; padding-top: clamp(28px, 7.1429cqw, 76px); padding-right: clamp(24px, 7.1429cqw, 76px); padding-bottom: clamp(28px, 7.1429cqw, 76px); padding-left: clamp(76px, 14.2857cqw, 152px); overflow: hidden; border: 1px solid var(--article-paper-edge); border-radius: 0; background: radial-gradient(ellipse at 52% 42%, rgba(255,255,255,.99) 0%, rgba(247,252,255,.98) 52%, rgba(230,243,251,.94) 100%), var(--article-paper-bg); box-shadow: 0 24px 44px -25px var(--article-paper-shadow), 0 8px 20px -15px rgba(31,57,72,.28), inset -18px -12px 34px rgba(115,177,214,.11), inset 12px 9px 26px rgba(255,255,255,.92); } /* Circular binder holes. The tile is always square, so the holes cannot become oval. */ .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before { content: ""; position: absolute; z-index: 2; top: clamp(34px, 5.8cqw, 64px); bottom: clamp(34px, 5.8cqw, 64px); left: clamp(22px, 3.45cqw, 42px); width: clamp(16px, 1.8cqw, 20px); pointer-events: none; background-image: radial-gradient(circle at 50% 50%, rgba(93,104,111,.72) 0 34%, rgba(175,185,191,.63) 35% 49%, rgba(255,255,255,.96) 55% 60%, transparent 62%); background-size: 100% clamp(88px, 12.4cqw, 132px); background-position: center top; background-repeat: repeat-y; filter: drop-shadow(1px 2px 2px rgba(33,47,56,.22)); } /* Realistic lifted top-right fold: bright face, blue underside and cast shadow. */ .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after { content: ""; position: absolute; z-index: 6; top: -1px; right: -1px; width: clamp(62px, 9.4cqw, 104px); height: clamp(62px, 9.4cqw, 104px); pointer-events: none; clip-path: polygon(34% 0, 100% 0, 100% 100%, 78% 77%, 30% 70%); background: linear-gradient(225deg, rgba(255,255,255,.02) 0 34%, rgba(255,255,255,.99) 35% 58%, rgba(218,236,247,.98) 59% 70%, rgba(140,185,211,.62) 71% 100%); box-shadow: -12px 15px 18px rgba(45,76,94,.20), -4px 5px 7px rgba(45,76,94,.13); } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child .items__item, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child .items__text, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child .main-block__text { color: #18232d; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child > .items__text, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child > .items__text > .items__item, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child .main-block__text { position: relative; z-index: 4; margin: 0; padding: 0; max-width: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child p { max-width: 78ch; } /* Green controls on article lists and article sheets. */ .article-index-page a.main-block__button, .article-index-page button.main-block__button, .article-detail-page a.main-block__button, .article-detail-page button.main-block__button, .article-detail-page .read-more__button, .article-detail-page [class*="read-more"] button { border-color: #087c43 !important; background: linear-gradient(180deg, #149b5a 0%, #087c43 100%) !important; color: #fff !important; box-shadow: 0 7px 15px -8px rgba(5,91,48,.72) !important; } .article-index-page a.main-block__button:hover, .article-index-page button.main-block__button:hover, .article-detail-page a.main-block__button:hover, .article-detail-page button.main-block__button:hover, .article-detail-page .read-more__button:hover, .article-detail-page [class*="read-more"] button:hover { background: linear-gradient(180deg, #18a962 0%, #096f3d 100%) !important; } .article-index-page a.main-block__button:focus-visible, .article-index-page button.main-block__button:focus-visible, .article-detail-page a.main-block__button:focus-visible, .article-detail-page button.main-block__button:focus-visible { outline: 3px solid rgba(20,155,90,.34) !important; outline-offset: 3px; } @media (max-width: 720px) { .article-paper-section > .Rules__container { padding-inline: 10px; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child { padding-top: 30px; padding-right: 20px; padding-bottom: 30px; padding-left: 68px; border-radius: 0; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before { left: 20px; width: 16px; top: 34px; bottom: 34px; background-size: 100% 96px; } } @media (max-width: 420px) { .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child { padding-left: 58px; padding-right: 16px; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before { left: 16px; width: 14px; } } @media (prefers-reduced-motion: reduce) { .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child { transition: none !important; animation: none !important; } } @media print { .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 15mm 15mm 15mm 30mm; overflow: visible; border: 0; border-radius: 0; background: #fff; box-shadow: none; break-inside: auto; } .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::before, .article-paper-section > .Rules__container > .Rules__body > .items__item:first-child::after { display: none; } }