.main-download { background: var(--color-white); } .d-page { padding-top: calc(var(--header-h) + 2.75rem + 2.5rem); padding-bottom: 6.25rem; } .d-head { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(223, 224, 226); } .d-head__title { margin: 0; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-48); font-weight: 400; line-height: var(--font-64); } .d-head__desc { margin: 0; color: var(--color-text-muted); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); } .d-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.75rem; margin-bottom: 2.75rem; } .d-tabs { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; min-width: 0; } .d-tabs__group { position: relative; } .d-tabs__item { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3rem; padding: 0.75rem 2rem; border: 0; border-radius: 6.25rem; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .d-tabs__item.is-active { background: var(--color-primary); color: var(--color-white); } .d-tabs__item.is-open { background: rgba(239, 67, 53, 0.1); color: var(--color-primary); } .d-tabs__item.is-open .d-tabs__chevron { transform: rotate(180deg); } .d-tabs__chevron { display: block; width: 0.6875rem; height: auto; transition: transform var(--duration-fast) var(--easing); } .d-tabs__dropdown { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 30; display: flex; flex-direction: column; gap: 0.5rem; min-width: 12.5rem; padding: 1rem; border-radius: 1rem; background: var(--color-white); box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.14); } .d-tabs__dropdown[hidden] { display: none; } .d-tabs__dropdown-item { display: block; width: 100%; padding: 0.625rem 1.25rem; border: 0; border-radius: 6.25rem; background: transparent; color: var(--color-text); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-16); font-weight: 400; line-height: var(--font-21); text-align: left; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .d-tabs__dropdown-item:hover { background: rgba(175, 181, 185, 0.12); } .d-tabs__dropdown-item.is-active { background: var(--color-primary); color: var(--color-white); } .d-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-bottom: 3.5rem; } .d-item { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 6.25rem; padding: 1.5rem 2rem; border-radius: 1rem; background: rgba(175, 181, 185, 0.15); text-decoration: none; color: var(--color-text); transition: background 0.25s ease, transform 0.25s ease; } .d-item:hover { background: rgba(175, 181, 185, 0.22); } .d-item:hover .d-item__action { color: var(--color-primary); } .d-item__main { display: flex; align-items: center; gap: 1rem; min-width: 0; } .d-item__pdf { display: block; width: 2rem; height: 2rem; flex-shrink: 0; } .d-item__name { font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); font-weight: 400; line-height: var(--font-28); } .d-item__action { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-18); font-weight: 400; line-height: var(--font-24); color: var(--color-text); transition: color var(--duration-fast) var(--easing); } .d-item__action img { display: block; width: 1.5rem; height: 1.5rem; } .d-pagination { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .d-pagination__btn, .d-pagination__page { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 0.5rem; background: rgba(175, 181, 185, 0.15); color: rgba(46, 53, 58, 0.6); font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: var(--font-20); font-weight: 400; line-height: var(--font-24); cursor: default; } .d-pagination__btn img { display: block; width: 1.0625rem; height: auto; transform: scaleX(-1); filter: grayscale(1) opacity(0.45); } .d-pagination__btn--next img { transform: none; filter: none; } .d-pagination__btn:disabled { opacity: 0.55; cursor: not-allowed; } .d-pagination__page.is-active { background: var(--color-primary); color: var(--color-white); } @media (max-width: 1439px) { .d-page { padding-top: calc(var(--header-h) + 40Px); padding-bottom: 72Px; } .d-head { gap: 12Px; margin-bottom: 32Px; } .d-head__title { font-size: 36Px; line-height: 48Px; } .d-head__desc { font-size: 16Px; } .d-toolbar { flex-wrap: wrap; gap: 16Px; margin-bottom: 32Px; } .d-tabs { gap: 12Px; } .d-tabs__item { min-height: 44Px; padding: 10Px 24Px; font-size: 16Px; } .d-list { gap: 12Px; margin-bottom: 40Px; } .d-item { min-height: 72Px; padding: 20Px 24Px; gap: 16Px; } .d-item__name { font-size: 18Px; line-height: 26Px; } .d-item__action { font-size: 16Px; } } @media (max-width: 992px) { .d-toolbar { flex-direction: column; align-items: stretch; } .d-list { grid-template-columns: 1fr; } } @media (max-width: 576px) { .d-page { padding-top: calc(var(--header-h) + 24Px); padding-bottom: 48Px; } .d-head { gap: 10Px; margin-bottom: 24Px; } .d-head__title { font-size: 28Px; line-height: 38Px; } .d-head__desc { font-size: 14Px; line-height: 22Px; } .d-toolbar { margin-bottom: 24Px; } .d-tabs { gap: 8Px; } .d-tabs__item { min-height: 40Px; padding: 8Px 16Px; font-size: 14Px; } .d-item { flex-direction: column; align-items: flex-start; padding: 16Px 18Px; gap: 14Px; } .d-item__name { font-size: 16Px; line-height: 24Px; } .d-item__action { font-size: 14Px; } .d-item__action img { width: 20Px; height: 20Px; } .d-pagination { gap: 8Px; } .d-pagination__btn, .d-pagination__page { width: 40Px; height: 40Px; font-size: 16Px; } }