/* ============================================================ DIGITAL E COMPANIA BIBLIOTECA — MOBILE ============================================================ */ /* ============================================================ TABLET + MOBILE ============================================================ */ @media screen and (max-width:768px) { /* ======================================================== LAYOUT ======================================================== */ .library-page { padding: 40px 0 60px; } .library-page .container { width: min( 100% - 28px, 100% ); padding: 0; } .library-layout { display: flex; flex-direction: column; gap: 30px; } .library-sidebar { position: static; width: 100%; top: auto; gap: 16px; } .library-page-content { width: 100%; min-width: 0; } /* ======================================================== TOOLBAR ======================================================== */ .library-toolbar { display: flex; justify-content: center; align-items: center; margin: 0 0 22px; padding: 0; background: transparent; border: 0; } .library-results { width: 100%; text-align: center; font-size: .90rem; } /* ======================================================== FILTROS ======================================================== */ .library-filters { width: 100%; } .library-filters-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 17px 19px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #181818; color: #ffffff; cursor: pointer; font-size: .95rem; font-weight: 700; box-shadow: 0 10px 28px rgba(0,0,0,.20); transition: background .30s ease, color .30s ease, border-color .30s ease, box-shadow .30s ease, transform .25s ease; } .library-filters-toggle:active { transform: scale(.985); } .library-filters-icon { display: inline-flex; align-items: center; justify-content: center; color: #f4c430; transition: transform .35s ease; } .library-filters-icon svg { stroke: currentColor; } /* ======================================================== FILTROS FECHADOS ======================================================== */ .library-sidebar { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .45s ease, opacity .30s ease, margin-top .30s ease; } .library-filters.open .library-sidebar { max-height: 1000px; opacity: 1; margin-top: 14px; } .library-filters.open .library-filters-icon { transform: rotate(180deg); } /* ======================================================== FILTRO ABERTO ======================================================== */ .library-filters.open .library-filters-toggle { background: #f4c430; color: #111111; border-color: #f4c430; box-shadow: 0 12px 30px rgba(244,196,48,.14); } .library-filters.open .library-filters-icon { color: #111111; } /* ======================================================== LABEL DO FILTRO ======================================================== */ .library-filters-label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .library-filters-label strong { font-size: .95rem; font-weight: 800; } .library-filters-label small { color: rgba(255,255,255,.48); font-size: .76rem; } .library-filters.open .library-filters-label small { color: rgba(17,17,17,.62); } /* ======================================================== SIDEBAR CARDS ======================================================== */ .library-sidebar { display: flex; flex-direction: column; gap: 14px; } .library-sidebar-card { width: 100%; padding: 18px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.20); } .library-sidebar-card:hover { transform: none; } .library-sidebar-card h3 { margin: 0 0 14px; padding: 0; text-align: center; font-size: 1rem; line-height: 1.2; } /* ======================================================== INPUT ======================================================== */ .library-sidebar input { width: 100%; height: 52px; padding: 0 16px; font-size: .88rem; border-radius: 12px; } /* ======================================================== SELECT ======================================================== */ .library-sidebar select { width: 100%; height: 52px; padding: 0 16px; font-size: .88rem; border-radius: 12px; } /* ======================================================== CATEGORIAS ======================================================== */ .library-categories { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .library-categories::-webkit-scrollbar { display: none; } .category-chip { flex: 0 0 auto; width: auto; justify-content: center; white-space: nowrap; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: .76rem; } .category-chip:hover { transform: none; } /* ======================================================== GRID ======================================================== */ .library-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 18px 14px; justify-content: stretch; align-items: start; } /* ======================================================== CARD ======================================================== */ .library-card { width: 100%; border-radius: 17px; } .library-card:hover { transform: none; border-color: rgba(255,255,255,.075); box-shadow: 0 10px 28px rgba(0,0,0,.24); } /* ======================================================== CAPA ======================================================== */ .library-cover { width: 100%; height: 210px; padding: 9px; } .library-cover img { width: auto; max-width: 100%; height: 100%; max-height: 192px; margin: auto; } /* ======================================================== CONTEÚDO ======================================================== */ .library-card-content { padding: 13px 11px 16px; gap: 8px; } /* ======================================================== CATEGORIA DO CARD ======================================================== */ .library-category { font-size: .54rem; padding: 5px 8px; } /* ======================================================== TÍTULO ======================================================== */ .library-title { min-height: auto; font-size: .82rem; line-height: 1.38; } /* ======================================================== BOTÃO ======================================================== */ .library-link { width: 100%; min-height: 42px; margin-top: 4px; border-radius: 10px; font-size: .76rem; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media screen and (max-width:480px) { /* ======================================================== CONTAINER ======================================================== */ .library-page .container { width: min( 100% - 20px, 100% ); } /* ======================================================== HERO ======================================================== */ .library-hero { padding: 28px 0 30px; } .library-hero-badge { margin-bottom: 12px; padding: 6px 13px; font-size: .60rem; } .library-hero-title { font-size: 1.72rem; line-height: 1.10; } /* ======================================================== FILTROS ======================================================== */ .library-filters-toggle { padding: 15px 17px; border-radius: 15px; } .library-filters-label strong { font-size: .90rem; } .library-filters-label small { font-size: .72rem; } /* ======================================================== SIDEBAR ======================================================== */ .library-sidebar-card { padding: 15px; border-radius: 15px; } .library-sidebar-card h3 { font-size: .96rem; margin-bottom: 13px; } /* ======================================================== INPUT ======================================================== */ .library-sidebar input, .library-sidebar select { height: 49px; padding: 0 14px; font-size: .84rem; } /* ======================================================== CATEGORIAS ======================================================== */ .library-categories { gap: 8px; } .category-chip { min-height: 38px; padding: 0 13px; font-size: .72rem; } /* ======================================================== RESULTADOS ======================================================== */ .library-results { font-size: .78rem; } /* ======================================================== GRID ======================================================== */ .library-grid { gap: 15px 9px; } /* ======================================================== CARD ======================================================== */ .library-card { border-radius: 15px; } /* ======================================================== CAPA ======================================================== */ .library-cover { height: 185px; padding: 7px; } .library-cover img { max-height: 170px; } /* ======================================================== CONTEÚDO ======================================================== */ .library-card-content { padding: 11px 9px 14px; gap: 7px; } /* ======================================================== CATEGORIA ======================================================== */ .library-category { font-size: .50rem; padding: 4px 7px; } /* ======================================================== TÍTULO ======================================================== */ .library-title { font-size: .76rem; line-height: 1.32; } /* ======================================================== BOTÃO ======================================================== */ .library-link { min-height: 39px; margin-top: 3px; border-radius: 9px; font-size: .70rem; } } /* ============================================================ DESKTOP — OCULTAR TOGGLE ============================================================ */ @media screen and (min-width:769px) { .library-filters-toggle { display: none; } } /* ============================================================ FIM — LIBRARY MOBILE ============================================================ */