:root { color-scheme: light; --wine: #552B2D; --coral: #F05261; --pink: #D73570; --gold: #F2A43A; --cyan: #21B8D0; --orange: #E76F35; --bg: #FBF7F2; --bg-soft: #FFFDF9; --surface: rgba(255, 255, 255, .78); --surface-solid: #FFFFFF; --surface-2: #F6EEE8; --text: #21191A; --text-soft: #6F6062; --muted: #8C7B7E; --border: rgba(85, 43, 45, .13); --shadow: 0 24px 70px rgba(85, 43, 45, .12); --shadow-soft: 0 12px 34px rgba(85, 43, 45, .10); --radius: 24px; --radius-sm: 16px; --container: 1180px; --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } [data-theme="dark"] { color-scheme: dark; --bg: #0F1016; --bg-soft: #151722; --surface: rgba(24, 26, 37, .76); --surface-solid: #181A25; --surface-2: #202333; --text: #F5EEF0; --text-soft: #C7B8BC; --muted: #9F9094; --border: rgba(255, 255, 255, .10); --shadow: 0 24px 70px rgba(0, 0, 0, .32); --shadow-soft: 0 12px 34px rgba(0, 0, 0, .24); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; font-family: var(--font); color: var(--text); background: radial-gradient(circle at 10% 0%, rgba(242, 164, 58, .16), transparent 31rem), radial-gradient(circle at 92% 7%, rgba(33, 184, 208, .18), transparent 30rem), radial-gradient(circle at 62% 36%, rgba(215, 53, 112, .10), transparent 34rem), var(--bg); overflow-x: hidden; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; } .container { width: min(var(--container), calc(100% - 32px)); margin-inline: auto; } .topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgba(251, 247, 242, .72); backdrop-filter: blur(18px); transition: .22s ease; } [data-theme="dark"] .topbar { background: rgba(15, 16, 22, .70); } .topbar.is-scrolled { border-color: var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.08); } .nav-wrap { min-height: 60px; display: flex; align-items: center; gap: 22px; transition: min-height .22s ease; } .topbar.is-scrolled .nav-wrap { min-height: 52px; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; } .brand-logo { display: none; /* cada variante é ligada explicitamente abaixo */ height: 44px; /* tamanho "barra" (logo horizontal) */ width: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(85,43,45,.14)); transition: height .22s ease; } .topbar.is-scrolled .brand-logo { height: 34px; } /* Visibilidade da logo da barra por tema (data-theme é sempre explícito no ). No tema dark usamos a variante branca (o texto "flog" colorido é marrom escuro e some em fundo escuro). Na HOME, no topo (is-home sem scroll), o header NÃO mostra logo — a logo grande vive no hero; ao rolar (is-scrolled) ela some lá e a horizontal aparece aqui na barra. */ [data-theme="light"] .topbar:not(.is-home) .brand-logo--bar-light, [data-theme="light"] .topbar.is-home.is-scrolled .brand-logo--bar-light, [data-theme="light"] .footer .brand-logo--bar-light { display: inline-block; } [data-theme="dark"] .topbar:not(.is-home) .brand-logo--bar-dark, [data-theme="dark"] .topbar.is-home.is-scrolled .brand-logo--bar-dark, [data-theme="dark"] .footer .brand-logo--bar-dark { display: inline-block; } /* Logo grande no hero da home, acima da frase "Seu FlogVIP novo...". */ .hero-logo-link { display: block; width: fit-content; line-height: 0; margin: 0 0 20px; } .hero-logo { display: block; height: 150px; width: auto; } .hero-logo--dark { display: none; } [data-theme="dark"] .hero-logo--light { display: none; } [data-theme="dark"] .hero-logo--dark { display: block; } .nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; } /* logado: menu do site centralizado, pra separar das ações do usuário à direita */ .topbar.is-logged .nav-links { margin: 0 auto; } /* Menu do usuário (logado) — mesmo visual do menu do site/flog. */ .user-menu { display: flex; align-items: center; gap: 6px; } .user-link { color: var(--text-soft); font-size: 14px; font-weight: 700; padding: 10px 12px; border-radius: 999px; transition: .18s ease; } .user-link:hover { color: var(--text); background: var(--surface-2); } .user-link.is-me { color: var(--wine); font-weight: 800; } [data-theme="dark"] .user-link.is-me { color: var(--gold); } .nav-links a { color: var(--text-soft); font-size: 14px; font-weight: 700; padding: 10px 12px; border-radius: 999px; transition: .18s ease; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface-2); } .auth-area { display: flex; align-items: center; gap: 10px; } .user-chip { display: none; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .user-chip.is-visible { display: flex; } .user-chip img { width: 30px; height: 30px; border-radius: 50%; } .user-chip strong { display: block; font-size: 13px; line-height: 1; } .user-chip small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; } .mobile-menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer; } .mobile-menu-btn span, .mobile-menu-btn span::before, .mobile-menu-btn span::after { content: ""; display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; position: relative; } .mobile-menu-btn span::before { position: absolute; top: -6px; } .mobile-menu-btn span::after { position: absolute; top: 6px; } .mobile-panel { display: none; position: fixed; inset: 70px 16px auto 16px; z-index: 60; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-solid); box-shadow: var(--shadow); } .mobile-panel.is-open { display: block; } .mobile-panel a { display: block; padding: 13px 12px; border-radius: 14px; color: var(--text-soft); font-weight: 800; } .mobile-panel a:hover { color: var(--text); background: var(--surface-2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px; font-weight: 800; font-size: 14px; cursor: pointer; transition: .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--pink), var(--orange)); box-shadow: 0 12px 28px rgba(215, 53, 112, .22); } .btn-secondary { color: #12131A; background: linear-gradient(135deg, var(--gold), #ffd27c); } .btn-cyan { color: #061316; background: linear-gradient(135deg, var(--cyan), #8be8f6); } .btn-ghost { color: var(--text); background: var(--surface); border-color: var(--border); } .btn-danger { color: #fff; background: #D63B47; } .btn-sm { min-height: 34px; padding-inline: 12px; font-size: 12px; } .icon-btn { width: 42px; min-width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); cursor: pointer; } /* toggle de tema (🌙) sem borda — só o toggle, não o "×" do modal */ .icon-btn[data-theme-toggle] { border: 0; background: transparent; transition: .16s ease; } .icon-btn[data-theme-toggle]:hover { background: var(--surface-2); } .hero { padding: 30px 0 36px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr); gap: 46px; align-items: center; } .kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: 13px; font-weight: 800; } .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--cyan); box-shadow: 0 0 0 6px rgba(33,184,208,.14); } h1, h2, h3, h4, p { margin-top: 0; } .hero h1, .page-hero h1 { margin-bottom: 18px; max-width: 820px; font-size: clamp(42px, 7vw, 82px); line-height: .92; letter-spacing: -.07em; } .gradient-text { background: linear-gradient(135deg, var(--pink), var(--orange) 46%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; /* Respiro à direita pro clip não cortar o último glifo (o letter-spacing negativo do h1 encurta a caixa do texto). Sem inline-block — preserva a quebra natural. */ padding-right: .12em; margin-right: -.12em; } /* Ícones temáticos: coração de curtidas (vermelho, pulsando) + estrela GoldVIP (dourada). */ .kpi-heart { color: #e0245e; display: inline-block; animation: heart-pulse 1.15s ease-in-out infinite; } .vip-star { color: #f5c518; } @keyframes heart-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } } @media (prefers-reduced-motion: reduce) { .kpi-heart { animation: none; } } .lead { color: var(--text-soft); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; max-width: 720px; } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; max-width: 620px; } .metric { padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); } .metric strong { display: block; font-size: 25px; line-height: 1; } .metric span { color: var(--muted); font-size: 13px; font-weight: 700; } .login-card, .card, .glass-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); } .login-card { padding: 24px; transform: rotate(1deg); } .login-card .logo-stack { width: 84px; margin-bottom: 18px; } .login-card h2 { margin-bottom: 8px; font-size: 26px; letter-spacing: -.04em; } .form-grid { display: grid; gap: 14px; } .field { display: grid; gap: 7px; } .field label { color: var(--text-soft); font-size: 13px; font-weight: 800; } .input, .select, .textarea { width: 100%; min-height: 46px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-solid); color: var(--text); outline: none; padding: 0 14px; transition: .16s ease; } .textarea { min-height: 124px; padding: 13px 14px; resize: vertical; } .input:focus, .select:focus, .textarea:focus { border-color: rgba(215,53,112,.70); box-shadow: 0 0 0 4px rgba(215,53,112,.14); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .help-text { color: var(--muted); font-size: 13px; } .divider { height: 1px; background: var(--border); margin: 18px 0; } .section { padding: 42px 0; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .section-head h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -.055em; } .section-head p { margin: 8px 0 0; color: var(--text-soft); line-height: 1.6; max-width: 620px; } .polaroid-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 100%; } /* === Variações de grid da home (Fase 10a) === */ /* 5 por linha em atualizados/populares/celebridades — cards menores, cabe mais. No mobile herda o colapso das media queries de .polaroid-grid mais abaixo. */ .polaroid-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* Vitrine GoldVIP: solta (sem card wrapper), 2x2 fixo (especificidade > media de .polaroid-grid). */ .gold-showcase { align-self: start; } .polaroid-grid.gold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } /* Título com efeito dourado. */ .gold-text { background: linear-gradient(135deg, #f9e08a, #e0a528 50%, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Cards GoldVIP flutuando suave (defasados pra não subir em uníssono). */ .gold-grid .polaroid { animation: gold-float 4s ease-in-out infinite; } .gold-grid .polaroid:nth-child(2) { animation-delay: .6s; } .gold-grid .polaroid:nth-child(3) { animation-delay: 1.2s; } .gold-grid .polaroid:nth-child(4) { animation-delay: 1.8s; } .gold-grid .polaroid:hover { animation-play-state: paused; } @keyframes gold-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .gold-grid .polaroid { animation: none; } } /* Destaque do "você!" no título — cor vibrante + glow (sem clip, não corta acento). */ .estrela-voce { color: #ff4d6d; text-shadow: 0 2px 16px rgba(255, 77, 109, .35); } /* Selo de ranking (posição) — top 3 em dourado. */ .rank-badge { position: absolute; top: 10px; right: 10px; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(15, 16, 22, .72); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } .rank-badge.rank-top { background: linear-gradient(135deg, #f9e08a, #c8901a); color: #3a2a05; box-shadow: 0 2px 8px rgba(200, 144, 26, .45); } /* Carrossel dos rankings (Populares/Celebridades): auto-scroll + arrastar (drag) + setas. Cards renderizados 2x no track pro loop contínuo (o JS reseta no meio). */ .ranking-carousel { position: relative; } .ranking-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding-bottom: 4px; } .ranking-track::-webkit-scrollbar { display: none; } .ranking-track.is-dragging { cursor: grabbing; } .ranking-track .polaroid { flex: 0 0 170px; width: 170px; } .carousel-nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } .ranking-carousel:hover .carousel-nav { opacity: 1; } .carousel-prev { left: 2px; } .carousel-next { right: 2px; } @media (hover: none) { .carousel-nav { opacity: 1; } } /* Rotador "ao vivo" dos Atualizados: troca suave, como alguém tirando e pondo a foto no lugar (a que sai sobe e some; a que entra vem de baixo e assenta). */ [data-rotador] .polaroid, [data-rotador-pool] .polaroid { transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease; } [data-rotador] .polaroid.is-saindo { opacity: 0; transform: scale(.96) translateY(-8px); } [data-rotador] .polaroid.is-entrando { opacity: 0; transform: scale(.96) translateY(8px); } .polaroid { min-width: 0; padding: 12px 12px 16px; border: 1px solid rgba(0,0,0,.06); border-radius: 8px; background: #fff; color: #21191A; box-shadow: 0 18px 44px rgba(85,43,45,.14); transform: rotate(var(--r, -1deg)); transition: transform .2s ease, box-shadow .2s ease; will-change: transform; } [data-theme="dark"] .polaroid { background: #F8F3EE; } .polaroid:nth-child(2n) { --r: 1.2deg; } .polaroid:nth-child(3n) { --r: -1.8deg; } .polaroid:nth-child(4n) { --r: 1.7deg; } .polaroid:hover { transform: translateY(-8px) rotate(calc(var(--r) * -1)) scale(1.018); box-shadow: 0 26px 60px rgba(85,43,45,.24); } .photo-frame { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 1 / 1; background: var(--surface-2); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; } .polaroid:hover img { transform: scale(1.06); } .photo-badge { position: absolute; top: 10px; left: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(15,16,22,.72); color: #fff; font-size: 11px; font-weight: 900; backdrop-filter: blur(10px); } .polaroid-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 12px; } .polaroid-meta strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .polaroid-meta span { color: #7A686A; font-size: 12px; font-weight: 700; white-space: nowrap; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .feature-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .feature-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(215,53,112,.18), rgba(33,184,208,.16)); font-size: 22px; } .feature-card h3 { margin-bottom: 8px; font-size: 20px; letter-spacing: -.03em; } .feature-card p { color: var(--text-soft); line-height: 1.7; margin-bottom: 0; } .cta-band { position: relative; overflow: hidden; padding: 34px; border-radius: 32px; background: linear-gradient(135deg, var(--wine), var(--pink) 52%, var(--orange)); color: #fff; box-shadow: var(--shadow); } .cta-band::after { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -140px; border-radius: 999px; background: rgba(255,255,255,.14); } .cta-band h2 { margin-bottom: 10px; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.055em; } .cta-band p { max-width: 650px; color: rgba(255,255,255,.82); line-height: 1.7; } .footer { margin-top: 48px; padding: 36px 0; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .footer p { color: var(--text-soft); margin: 8px 0 0; } .footer-links { display: flex; gap: 14px; flex-wrap: wrap; } .footer-links a { color: var(--text-soft); font-weight: 800; font-size: 14px; } .page-hero { padding: 58px 0 26px; } .page-hero .lead { max-width: 820px; } .content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } /* Documentos legais (termos): sumário sticky + seções destacadas */ .content-grid-docs { grid-template-columns: minmax(0, 1fr) 280px; } .legal-toc nav { position: sticky; top: 90px; } .legal-toc h3 { margin: 0 0 10px; font-size: .95rem; } .legal-toc ol { margin: 0; padding-left: 1.25em; } .legal-toc li { margin: 7px 0; line-height: 1.35; } .legal-toc a { color: var(--text-soft); text-decoration: none; } .legal-toc a:hover { color: var(--text); text-decoration: underline; } .legal-doc h2 { scroll-margin-top: 90px; margin: 1.6em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--border); font-size: 1.15rem; line-height: 1.3; } .legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-doc p { line-height: 1.7; } .stack { display: grid; gap: 18px; } .card { padding: 22px; } .card h2, .card h3 { letter-spacing: -.04em; } .card p, .rich-text p, .rich-text li { color: var(--text-soft); line-height: 1.8; } .rich-text h2 { margin-top: 28px; letter-spacing: -.04em; } .flog-cover { overflow: hidden; border: 1px solid var(--border); border-radius: 34px; background: var(--surface); box-shadow: var(--shadow-soft); } .cover-art { min-height: 260px; background: radial-gradient(circle at 18% 20%, rgba(242,164,58,.50), transparent 18rem), radial-gradient(circle at 84% 15%, rgba(33,184,208,.52), transparent 19rem), linear-gradient(135deg, var(--wine), var(--pink) 52%, var(--orange)); } .flog-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: end; padding: 0 24px 24px; margin-top: -54px; } .flog-profile img { width: 108px; height: 108px; border: 5px solid var(--surface-solid); border-radius: 30px; box-shadow: var(--shadow-soft); } .flog-profile h1 { margin: 0 0 6px; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.06em; } .flog-profile p { margin: 0; color: var(--text-soft); line-height: 1.6; } .stats-row { display: flex; gap: 8px; flex-wrap: wrap; } .stat-pill { padding: 10px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); font-size: 13px; font-weight: 900; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .post-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-soft); } .post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .post-body { padding: 16px; } .post-body h3 { margin-bottom: 6px; font-size: 18px; } .post-body p { color: var(--text-soft); line-height: 1.6; margin-bottom: 12px; } .badge-row { display: flex; gap: 8px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 900; } .badge-pink { background: rgba(215,53,112,.14); color: var(--pink); } .badge-cyan { background: rgba(33,184,208,.16); color: #128EA2; } .badge-gold { background: rgba(242,164,58,.19); color: #A76200; } .badge-green { background: rgba(26,188,116,.15); color: #148457; } .badge-red { background: rgba(214,59,71,.14); color: #D63B47; } .comment { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } .comment:last-child { border-bottom: 0; } .comment img { width: 38px; height: 38px; border-radius: 50%; } .comment strong { display: block; margin-bottom: 3px; } .comment p { margin: 0; color: var(--text-soft); line-height: 1.5; font-size: 14px; } .admin-body { background: radial-gradient(circle at 0% 0%, rgba(33,184,208,.16), transparent 32rem), radial-gradient(circle at 100% 0%, rgba(215,53,112,.14), transparent 30rem), var(--bg); } .admin-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 82px); } .admin-sidebar { position: sticky; top: 82px; align-self: start; height: calc(100vh - 82px); padding: 22px; border-right: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(18px); } .admin-title { margin-bottom: 22px; } .admin-title strong { display: block; font-size: 18px; letter-spacing: -.03em; } .admin-title span { color: var(--muted); font-size: 13px; } .admin-nav { display: grid; gap: 7px; } .admin-nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 13px; border-radius: 15px; color: var(--text-soft); font-weight: 900; } .admin-nav a:hover, .admin-nav a.active { color: var(--text); background: var(--surface-2); } .admin-main { min-width: 0; padding: 30px; } .admin-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 22px; } .admin-head h1 { margin-bottom: 6px; font-size: clamp(30px, 5vw, 54px); line-height: 1; letter-spacing: -.06em; } .admin-head p { margin: 0; color: var(--text-soft); } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi { padding: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); } .kpi span { color: var(--muted); font-size: 13px; font-weight: 800; } .kpi strong { display: block; margin-top: 8px; font-size: 31px; letter-spacing: -.05em; } .admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; } .table-wrap { overflow-x: auto; width: 100%; } table { width: 100%; border-collapse: collapse; } th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } td { color: var(--text-soft); font-size: 14px; } td strong { color: var(--text); } .action-row { display: flex; gap: 8px; flex-wrap: wrap; } .upload-box { display: grid; place-items: center; min-height: 240px; border: 2px dashed rgba(215,53,112,.38); border-radius: 24px; background: linear-gradient(135deg, rgba(215,53,112,.08), rgba(33,184,208,.08)); text-align: center; padding: 24px; } .upload-box strong { display: block; font-size: 20px; margin-bottom: 8px; } .upload-box p { color: var(--text-soft); margin-bottom: 16px; } .color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .color-dot { min-height: 72px; border: 1px solid var(--border); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .color-dot:nth-child(1) { background: var(--wine); } .color-dot:nth-child(2) { background: var(--coral); } .color-dot:nth-child(3) { background: var(--pink); } .color-dot:nth-child(4) { background: var(--gold); } .color-dot:nth-child(5) { background: var(--cyan); } .color-dot:nth-child(6) { background: var(--orange); } .component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .list-clean { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .list-clean li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-solid); } .modal-backdrop { display: none; position: fixed; inset: 0; z-index: 90; padding: 20px; background: rgba(0,0,0,.52); place-items: center; } .modal-backdrop.is-open { display: grid; } .modal { width: min(520px, 100%); border: 1px solid var(--border); border-radius: 26px; background: var(--surface-solid); box-shadow: var(--shadow); padding: 22px; } .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; } .modal-head h3 { margin: 0; font-size: 24px; letter-spacing: -.04em; } .hidden { display: none !important; } @media (max-width: 1040px) { .hero-grid, .content-grid, .admin-grid { grid-template-columns: 1fr; } .polaroid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-grid, .post-grid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } .admin-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .nav-links, .auth-area .user-menu, .auth-area .btn-ghost, .auth-area .btn-primary { display: none; } .mobile-menu-btn { display: inline-flex; margin-left: auto; } .nav-wrap { min-height: 56px; } .topbar.is-scrolled .nav-wrap { min-height: 50px; } .brand-logo { height: 38px; } .hero-logo-link { margin-bottom: 16px; } .hero-logo { height: 96px; } .hero { padding-top: 42px; } .hero-grid { gap: 28px; } .login-card { transform: none; } .section-head { align-items: start; flex-direction: column; } .polaroid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .footer-grid, .flog-profile { grid-template-columns: 1fr; } .flog-profile { align-items: start; } .form-row, .component-grid { grid-template-columns: 1fr; } .admin-main { padding: 22px 16px; } .admin-head { align-items: start; flex-direction: column; } } @media (max-width: 560px) { .container { width: min(100% - 24px, var(--container)); } .brand-name { font-size: 22px; } .hero h1, .page-hero h1 { font-size: 42px; } .hero-metrics, .feature-grid, .post-grid, .kpi-grid, .admin-nav { grid-template-columns: 1fr; } .polaroid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .polaroid { padding: 8px 8px 12px; border-radius: 7px; } .polaroid-meta { display: block; } .polaroid-meta span { display: block; margin-top: 4px; } .cta-band { padding: 24px; border-radius: 24px; } .auth-area .icon-btn { display: inline-flex; } .user-chip small, .user-chip strong { display: none; } .color-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 380px) { .polaroid-grid { grid-template-columns: 1fr; } } /* Flog público clássico em 3 colunas */ .flog-public-body { --flog-bg: #f7efe7; --flog-card: rgba(255,255,255,.82); --flog-card-solid: #fff; --flog-border: rgba(75,46,48,.16); --flog-text: #241a1c; --flog-soft: #756367; --flog-accent: #21B8D0; --flog-accent-2: #D73570; --flog-ribbon: linear-gradient(135deg, #552B2D, #D73570 55%, #E76F35); --flogbar-bg: rgba(255,255,255,.50); --flogbar-text: #241a1c; --flogbar-border: rgba(85,43,45,.14); --flog-hero: radial-gradient(circle at 12% 20%, rgba(242,164,58,.34), transparent 26rem), radial-gradient(circle at 86% 8%, rgba(33,184,208,.28), transparent 27rem), linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.18)); color: var(--flog-text); background: var(--flog-hero), var(--flog-bg); } .flog-public-body[data-flog-skin="dark"] { --flog-bg: #101118; --flog-card: rgba(25,27,39,.80); --flog-card-solid: #191b27; --flog-border: rgba(255,255,255,.12); --flog-text: #f7f1f2; --flog-soft: #c7babd; --flog-accent: #F2A43A; --flog-accent-2: #21B8D0; --flog-ribbon: linear-gradient(135deg, #151722, #552B2D 52%, #D73570); --flogbar-bg: rgba(13,14,20,.62); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.12); --flog-hero: radial-gradient(circle at 8% 20%, rgba(215,53,112,.20), transparent 28rem), radial-gradient(circle at 92% 10%, rgba(33,184,208,.18), transparent 28rem), linear-gradient(135deg, rgba(24,26,37,.78), rgba(24,26,37,.38)); } .flog-public-body[data-flog-skin="wine"] { --flog-bg: #fbf0f1; --flog-accent: #D73570; --flog-accent-2: #F2A43A; --flog-ribbon: linear-gradient(135deg, #552B2D, #D73570 58%, #F05261); --flogbar-bg: rgba(85,43,45,.58); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.18); --flog-hero: radial-gradient(circle at 15% 14%, rgba(215,53,112,.25), transparent 27rem), radial-gradient(circle at 82% 10%, rgba(242,164,58,.20), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="ocean"] { --flog-bg: #edf9fb; --flog-accent: #21B8D0; --flog-accent-2: #D73570; --flog-ribbon: linear-gradient(135deg, #126f80, #21B8D0 54%, #D73570); --flogbar-bg: rgba(8,60,72,.58); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.18); --flog-hero: radial-gradient(circle at 12% 16%, rgba(33,184,208,.32), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(215,53,112,.18), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="gold"] { --flog-bg: #fff5e5; --flog-accent: #F2A43A; --flog-accent-2: #E76F35; --flog-ribbon: linear-gradient(135deg, #7a4510, #F2A43A 56%, #E76F35); --flogbar-bg: rgba(94,55,13,.55); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.20); --flog-hero: radial-gradient(circle at 12% 16%, rgba(242,164,58,.34), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(231,111,53,.18), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="light"] { --flogbar-bg: rgba(255,255,255,.58); --flogbar-text: #241a1c; --flogbar-border: rgba(85,43,45,.14); } .flog-shell { width: min(1240px, calc(100% - 32px)); margin-inline: auto; } .flog-topbar { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--flogbar-border); background: var(--flogbar-bg); color: var(--flogbar-text); backdrop-filter: blur(18px) saturate(140%); transition: .22s ease; } .flog-topbar.is-scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.16); background: color-mix(in srgb, var(--flogbar-bg), rgba(0,0,0,.16)); } .flog-topbar-inner { width: min(1240px, calc(100% - 32px)); min-height: 64px; margin-inline: auto; display: flex; align-items: center; gap: 18px; transition: min-height .22s ease; } .flog-topbar.is-scrolled .flog-topbar-inner { min-height: 52px; } .flog-mini-brand { display: inline-flex; align-items: center; gap: 9px; min-width: max-content; color: inherit; } .flog-mini-brand img { width: 38px; height: 38px; object-fit: contain; transition: .22s ease; } .flog-topbar.is-scrolled .flog-mini-brand img { width: 30px; height: 30px; } .flog-mini-brand span { display: inline-flex; gap: 2px; align-items: baseline; font-size: 24px; line-height: 1; letter-spacing: -.05em; } .flog-mini-brand strong { color: #F2A43A; } .flog-mini-nav { margin-left: auto; display: flex; gap: 4px; align-items: center; } .flog-mini-nav a { padding: 9px 11px; border-radius: 999px; color: color-mix(in srgb, currentColor 82%, transparent); font-size: 13px; font-weight: 900; } .flog-mini-nav a:hover, .flog-mini-nav a.active { background: rgba(255,255,255,.18); color: currentColor; } .flog-mini-actions { display: flex; align-items: center; gap: 8px; } .skin-safe { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.22) !important; color: inherit !important; } .flog-user-mini { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22); font-size: 13px; font-weight: 900; } .flog-user-mini img { width: 28px; height: 28px; border-radius: 50%; } .flog-skin-strip { padding: 14px 0 0; } .skin-strip-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--flog-border); border-radius: 18px; background: var(--flog-card); backdrop-filter: blur(14px); } .skin-strip-inner strong { display: block; font-size: 13px; } .skin-strip-inner span { display: block; margin-top: 3px; color: var(--flog-soft); font-size: 12px; font-weight: 700; } .skin-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .skin-options button, .skin-chip { min-height: 32px; padding: 0 11px; border: 1px solid var(--flog-border); border-radius: 999px; background: var(--flog-card-solid); color: var(--flog-text); font-size: 12px; font-weight: 900; cursor: pointer; } .skin-options button.is-active, .skin-chip.is-active { color: #fff; background: var(--flog-ribbon); border-color: transparent; } .flog-hero-classic { padding: 26px 0 18px; } .flog-owner-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid var(--flog-border); border-radius: 28px; background: var(--flog-card); box-shadow: 0 18px 50px rgba(0,0,0,.08); backdrop-filter: blur(16px); } .flog-owner-card > img { width: 86px; height: 86px; border-radius: 24px; border: 4px solid rgba(255,255,255,.70); box-shadow: 0 10px 26px rgba(0,0,0,.12); } .flog-label { display: inline-flex; margin-bottom: 8px; color: var(--flog-accent-2); font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .06em; } .flog-owner-card h1 { margin: 0 0 6px; font-size: clamp(34px, 5vw, 56px); line-height: .96; letter-spacing: -.07em; } .flog-owner-card p { margin: 0; color: var(--flog-soft); line-height: 1.6; } .flog-owner-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .flog-owner-stats span { padding: 9px 11px; border-radius: 999px; background: var(--flog-card-solid); border: 1px solid var(--flog-border); font-size: 12px; font-weight: 1000; } .flog-three-col { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; grid-template-areas: "left center right"; gap: 18px; align-items: start; padding: 10px 0 42px; } .flog-left-col { grid-area: left; } .flog-main-col { grid-area: center; min-width: 0; } .flog-right-col { grid-area: right; } .flog-side { display: grid; gap: 16px; } .flog-box, .flog-main-post, .flog-comments { border: 1px solid var(--flog-border); border-radius: 22px; background: var(--flog-card); box-shadow: 0 14px 38px rgba(0,0,0,.07); backdrop-filter: blur(14px); } .flog-box { padding: 16px; } .flog-box h2, .flog-comments h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.04em; } .flog-box p { color: var(--flog-soft); line-height: 1.65; } .old-photo-list { display: grid; grid-template-columns: 1fr; gap: 10px; } .old-photo-list a { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 15px; background: var(--flog-card-solid); border: 1px solid var(--flog-border); } .old-photo-list img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; } .old-photo-list span { color: var(--flog-soft); font-size: 12px; font-weight: 900; } .flog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .flog-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--flog-border); } .flog-list li:last-child { border-bottom: 0; } .flog-list a { color: var(--flog-text); font-weight: 900; } .flog-list strong { color: var(--flog-soft); font-size: 12px; } .flog-title-band { overflow: hidden; border-radius: 24px 24px 0 0; padding: 18px 22px; background: var(--flog-ribbon); color: #fff; box-shadow: 0 14px 36px rgba(0,0,0,.12); } .flog-title-band span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; opacity: .78; } .flog-title-band h2 { margin: 0; font-size: clamp(26px, 4vw, 42px); line-height: 1; letter-spacing: -.055em; } .flog-main-post { overflow: hidden; border-top: 0; border-radius: 0 0 24px 24px; } .flog-main-post figure { margin: 0; } .flog-main-post figure img { width: 100%; max-height: 660px; object-fit: cover; background: #111; } .flog-main-post figcaption { padding: 12px 18px; color: var(--flog-soft); font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--flog-border); } .flog-post-content { padding: 20px; } .flog-post-content p { color: var(--flog-soft); line-height: 1.8; margin-bottom: 13px; } .flog-comments { margin-top: 16px; padding: 18px; } .flog-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .flog-section-title a { color: var(--flog-accent-2); font-size: 13px; font-weight: 1000; } .comment-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 14px; } .mini-user-list { display: grid; gap: 10px; } .mini-user-list a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 15px; background: var(--flog-card-solid); border: 1px solid var(--flog-border); font-weight: 900; } .mini-user-list img { width: 34px; height: 34px; border-radius: 50%; } .flog-footer { margin-top: 0; background: var(--flog-card); } .skin-preview-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .skin-preview-card { min-height: 96px; padding: 10px; border-radius: 16px; border: 1px solid var(--border); display: grid; align-content: space-between; font-weight: 900; font-size: 12px; } .skin-preview-card span { display: block; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); } .skin-preview-light { background: #f7efe7; color:#241a1c; } .skin-preview-light span { background: rgba(255,255,255,.68); } .skin-preview-dark { background: #101118; color:#fff; } .skin-preview-dark span { background: rgba(13,14,20,.62); } .skin-preview-wine { background: #fbf0f1; color:#552B2D; } .skin-preview-wine span { background: rgba(85,43,45,.58); } .skin-preview-ocean { background: #edf9fb; color:#126f80; } .skin-preview-ocean span { background: rgba(8,60,72,.58); } .skin-preview-gold { background: #fff5e5; color:#7a4510; } .skin-preview-gold span { background: rgba(94,55,13,.55); } @media (max-width: 1100px) { .flog-three-col { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "center center" "left right"; } } @media (max-width: 820px) { .flog-mini-nav, .flog-mini-actions .btn-ghost, .flog-user-mini span { display: none; } .flog-topbar-inner { min-height: 58px; } .flog-topbar .mobile-menu-btn { display: inline-flex; } .flog-owner-card { grid-template-columns: 1fr; align-items: start; } .flog-owner-stats { justify-content: flex-start; } .skin-strip-inner { align-items: start; flex-direction: column; } .skin-options { justify-content: flex-start; } .flog-three-col { grid-template-columns: 1fr; grid-template-areas: "center" "left" "right"; } .old-photo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .comment-form { grid-template-columns: 1fr; } .skin-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .flog-shell, .flog-topbar-inner { width: min(100% - 24px, 1240px); } .flog-mini-brand span { font-size: 20px; } .flog-owner-card { padding: 16px; border-radius: 22px; } .flog-title-band { padding: 16px; } .flog-post-content, .flog-comments { padding: 16px; } .old-photo-list { grid-template-columns: 1fr; } } :root { --hand-font: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; } .photo-social { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; padding: 5px 7px; border-radius: 999px; background: rgba(15,16,22,.64); color: #fff; backdrop-filter: blur(10px); font-size: 11px; font-weight: 900; } .photo-social b { font-weight: 900; } .polaroid-meta { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title date" "caption caption"; gap: 3px 10px; align-items: end; padding-top: 12px; } .polaroid-title, .polaroid-meta strong { grid-area: title; font-family: var(--hand-font); font-size: 17px; line-height: 1.1; letter-spacing: -.03em; color: #21191A; } .polaroid-caption { grid-area: caption; color: #5f5153; font-family: var(--hand-font); font-size: 13px; line-height: 1.2; } .polaroid-date, .polaroid-meta span:not(.polaroid-caption) { grid-area: date; color: #7A686A; font-size: 11px; font-weight: 800; white-space: nowrap; } .old-photo-list em { color: var(--flog-soft); font-size: 11px; font-style: normal; font-weight: 900; } .flog-public-body { --flog-bg: #f7efe7; --flog-card: rgba(255,255,255,.82); --flog-card-solid: #fff; --flog-border: rgba(85,43,45,.13); --flog-text: #241a1c; --flog-soft: #6f6062; --flog-accent: #D73570; --flog-accent-2: #21B8D0; --flog-ribbon: linear-gradient(135deg, #552B2D, #D73570 55%, #E76F35); --flogbar-bg: rgba(255,255,255,.54); --flogbar-text: #241a1c; --flogbar-border: rgba(85,43,45,.14); --flog-hero: radial-gradient(circle at 8% 20%, rgba(242,164,58,.20), transparent 28rem), radial-gradient(circle at 92% 10%, rgba(33,184,208,.20), transparent 28rem), linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.20)); background: var(--flog-hero), var(--flog-bg); } .flog-public-body[data-flog-skin="clean"] { --flog-bg: #f8f4ee; --flog-accent: #552B2D; --flog-accent-2: #D73570; --flog-ribbon: linear-gradient(135deg, #552B2D, #F05261 58%, #F2A43A); --flogbar-bg: rgba(255,255,255,.56); --flogbar-text: #241a1c; --flogbar-border: rgba(85,43,45,.14); --flog-hero: radial-gradient(circle at 10% 20%, rgba(242,164,58,.18), transparent 27rem), radial-gradient(circle at 86% 10%, rgba(215,53,112,.14), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.56), rgba(255,255,255,.18)); } .flog-public-body[data-flog-skin="wine"] { --flog-bg: #fbf0f1; --flog-accent: #D73570; --flog-accent-2: #F2A43A; --flog-ribbon: linear-gradient(135deg, #552B2D, #D73570 58%, #F05261); --flogbar-bg: rgba(85,43,45,.58); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.18); --flog-hero: radial-gradient(circle at 15% 14%, rgba(215,53,112,.25), transparent 27rem), radial-gradient(circle at 82% 10%, rgba(242,164,58,.20), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="ocean"] { --flog-bg: #edf9fb; --flog-accent: #21B8D0; --flog-accent-2: #D73570; --flog-ribbon: linear-gradient(135deg, #126f80, #21B8D0 54%, #D73570); --flogbar-bg: rgba(8,60,72,.58); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.18); --flog-hero: radial-gradient(circle at 12% 16%, rgba(33,184,208,.32), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(215,53,112,.18), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="gold"] { --flog-bg: #fff5e5; --flog-accent: #F2A43A; --flog-accent-2: #E76F35; --flog-ribbon: linear-gradient(135deg, #7a4510, #F2A43A 56%, #E76F35); --flogbar-bg: rgba(94,55,13,.55); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.20); --flog-hero: radial-gradient(circle at 12% 16%, rgba(242,164,58,.34), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(231,111,53,.18), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.16)); } .flog-public-body[data-flog-skin="graphite"] { --flog-bg: #f1f2f4; --flog-accent: #2b3038; --flog-accent-2: #21B8D0; --flog-ribbon: linear-gradient(135deg, #22262d, #4b5563 58%, #21B8D0); --flogbar-bg: rgba(27,31,38,.58); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.18); --flog-hero: radial-gradient(circle at 12% 16%, rgba(33,184,208,.20), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(85,43,45,.12), transparent 26rem), linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.16)); } [data-theme="dark"] .flog-public-body { --flog-bg: #101118; --flog-card: rgba(25,27,39,.80); --flog-card-solid: #191b27; --flog-border: rgba(255,255,255,.12); --flog-text: #f7f1f2; --flog-soft: #c7babd; --flogbar-bg: rgba(13,14,20,.62); --flogbar-text: #fff; --flogbar-border: rgba(255,255,255,.12); } [data-theme="dark"] .flog-public-body[data-flog-skin="clean"] { --flog-accent: #F5EEF0; --flog-accent-2: #F2A43A; --flog-ribbon: linear-gradient(135deg, #151722, #552B2D 52%, #D73570); --flogbar-bg: rgba(16,17,24,.66); --flog-hero: radial-gradient(circle at 8% 20%, rgba(242,164,58,.14), transparent 28rem), radial-gradient(circle at 92% 10%, rgba(215,53,112,.18), transparent 28rem), linear-gradient(135deg, rgba(24,26,37,.76), rgba(24,26,37,.42)); } [data-theme="dark"] .flog-public-body[data-flog-skin="wine"] { --flog-accent: #F05261; --flog-accent-2: #F2A43A; --flog-ribbon: linear-gradient(135deg, #31191a, #7c2333 58%, #D73570); --flogbar-bg: rgba(49,25,26,.68); --flog-hero: radial-gradient(circle at 15% 14%, rgba(215,53,112,.20), transparent 27rem), radial-gradient(circle at 82% 10%, rgba(242,164,58,.12), transparent 26rem), linear-gradient(135deg, rgba(24,26,37,.76), rgba(24,26,37,.42)); } [data-theme="dark"] .flog-public-body[data-flog-skin="ocean"] { --flog-accent: #21B8D0; --flog-accent-2: #F2A43A; --flog-ribbon: linear-gradient(135deg, #07323a, #126f80 58%, #21B8D0); --flogbar-bg: rgba(7,50,58,.68); --flog-hero: radial-gradient(circle at 12% 16%, rgba(33,184,208,.20), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(215,53,112,.12), transparent 26rem), linear-gradient(135deg, rgba(24,26,37,.76), rgba(24,26,37,.42)); } [data-theme="dark"] .flog-public-body[data-flog-skin="gold"] { --flog-accent: #F2A43A; --flog-accent-2: #21B8D0; --flog-ribbon: linear-gradient(135deg, #3b250d, #A76200 58%, #F2A43A); --flogbar-bg: rgba(59,37,13,.70); --flog-hero: radial-gradient(circle at 12% 16%, rgba(242,164,58,.20), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(231,111,53,.12), transparent 26rem), linear-gradient(135deg, rgba(24,26,37,.76), rgba(24,26,37,.42)); } [data-theme="dark"] .flog-public-body[data-flog-skin="graphite"] { --flog-accent: #d8dee8; --flog-accent-2: #21B8D0; --flog-ribbon: linear-gradient(135deg, #0f1117, #2b3038 58%, #21B8D0); --flogbar-bg: rgba(15,17,23,.72); --flog-hero: radial-gradient(circle at 12% 16%, rgba(33,184,208,.14), transparent 27rem), radial-gradient(circle at 84% 10%, rgba(255,255,255,.06), transparent 26rem), linear-gradient(135deg, rgba(24,26,37,.76), rgba(24,26,37,.42)); } .flog-user-mini.user-chip { display: none; color: inherit; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.22); } .flog-user-mini.user-chip.is-visible { display: inline-flex; } .flog-user-mini.user-chip small { color: color-mix(in srgb, currentColor 72%, transparent); } .skin-preview-clean { background: #f8f4ee; color:#241a1c; } .skin-preview-clean span { background: rgba(255,255,255,.60); } .skin-preview-graphite { background: #2b3038; color:#fff; } .skin-preview-graphite span { background: rgba(255,255,255,.16); } [data-theme="dark"] .skin-preview-clean { background: #151722; color:#fff; } [data-theme="dark"] .skin-preview-wine { background: #31191a; color:#fff; } [data-theme="dark"] .skin-preview-ocean { background: #07323a; color:#fff; } [data-theme="dark"] .skin-preview-gold { background: #3b250d; color:#fff; } [data-theme="dark"] .skin-preview-graphite { background: #0f1117; color:#fff; } @media (max-width: 560px) { .polaroid-meta { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "caption" "date"; } .photo-social { left: 7px; right: 7px; justify-content: center; font-size: 10px; } .polaroid-title, .polaroid-meta strong { font-size: 15px; } } /* Ajustes v5 */ .flog-topbar-minimal { position: sticky; top: 0; z-index: 120; } .flog-topbar-minimal .flog-topbar-inner { min-height: 62px; } .flog-topbar-minimal.is-scrolled .flog-topbar-inner { min-height: 50px; } .flog-topbar-spacer { flex: 1 1 auto; } .flog-guest-actions { display: flex; align-items: center; } .flog-guest-actions.hidden { display: none; } .flog-topbar-minimal .btn-login { display: inline-flex !important; min-height: 38px; padding: 0 18px; align-items: center; justify-content: center; font-weight: 1000; } .flog-topbar-minimal .mobile-menu-btn { display: none; } .photo-social { top: 8px; right: 8px; bottom: auto; left: auto; box-shadow: 0 8px 18px rgba(0,0,0,.18); } .photo-social b:first-child { color: #ff315d; } .photo-social-compact { top: 6px; right: 6px; gap: 5px; padding: 4px 6px; font-size: 10px; } .old-thumb { position: relative; overflow: hidden; border-radius: 13px; } .old-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .old-photo-list a > img { display: none; } @media (max-width: 820px) { .flog-topbar-minimal .btn-login { display: inline-flex !important; } .flog-topbar-minimal .mobile-menu-btn { display: inline-flex; } } @media (max-width: 560px) { .photo-social { top: 7px; right: 7px; left: auto; justify-content: center; font-size: 10px; } } .btn:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; } .badge-dark { background: rgba(15,16,22,.12); color: var(--text); } .input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .control-list { display: grid; gap: 12px; } .check-row, .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); color: var(--text-soft); font-weight: 800; cursor: pointer; } .check-row { justify-content: flex-start; } .switch-row span { display: grid; gap: 2px; } .switch-row strong { color: var(--text); font-size: 14px; } .switch-row small { color: var(--muted); font-size: 12px; font-weight: 700; } .check-control, .radio-control, .switch-input, .choice-card input { appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; } .check-control, .radio-control { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--text-soft), transparent 56%); background: var(--surface-solid); transition: .16s ease; } .check-control { border-radius: 7px; } .radio-control { border-radius: 999px; } .check-control:checked, .radio-control:checked { border-color: var(--pink); background: linear-gradient(135deg, var(--pink), var(--orange)); } .check-control:checked::after { content: "✓"; color: #fff; font-size: 15px; font-weight: 900; } .radio-control:checked::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #fff; } .switch-input { position: relative; width: 54px; min-width: 54px; height: 30px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); transition: .18s ease; } .switch-input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 999px; background: var(--surface-solid); box-shadow: 0 4px 10px rgba(0,0,0,.18); transition: .18s ease; } .switch-input:checked { background: linear-gradient(135deg, var(--pink), var(--orange)); border-color: transparent; } .switch-input:checked::after { transform: translateX(24px); } .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .choice-card { position: relative; display: flex; gap: 12px; min-height: 94px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid); cursor: pointer; transition: .18s ease; } .choice-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); } .choice-card input { width: 18px; height: 18px; margin-top: 2px; border: 2px solid color-mix(in srgb, var(--text-soft), transparent 56%); border-radius: 999px; } .choice-card input:checked { border: 5px solid var(--pink); } .choice-card:has(input:checked) { border-color: rgba(215,53,112,.55); background: linear-gradient(135deg, rgba(215,53,112,.10), rgba(242,164,58,.08)); } .choice-card span { display: grid; gap: 5px; } .choice-card strong { color: var(--text); } .choice-card small { color: var(--muted); font-weight: 700; } .segmented, .tab-list, .pagination, .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .segmented { padding: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); width: max-content; max-width: 100%; } .segmented button, .tab-button, .pagination button, .chip { min-height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-weight: 900; padding: 0 13px; cursor: pointer; } .segmented button { border: 0; background: transparent; } .segmented button.is-active, .tab-button.is-active, .pagination button.is-active, .chip.is-active { background: linear-gradient(135deg, var(--pink), var(--orange)); color: #fff; border-color: transparent; } .range-box { display: grid; gap: 10px; margin-top: 18px; } .range-head { display: flex; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size: 13px; } .range-head strong { color: var(--text); } .range { width: 100%; accent-color: var(--pink); } .mini-upload { display: grid; place-items: center; gap: 9px; min-height: 250px; padding: 24px; border: 2px dashed rgba(215,53,112,.36); border-radius: 24px; background: linear-gradient(135deg, rgba(215,53,112,.08), rgba(33,184,208,.08)); text-align: center; } .mini-upload-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 19px; background: var(--surface-solid); color: var(--pink); font-size: 30px; font-weight: 900; box-shadow: var(--shadow-soft); } .mini-upload p { margin: 0 0 8px; } .alert { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); } .alert strong { font-size: 13px; } .alert span { color: var(--text-soft); font-size: 13px; line-height: 1.45; } .alert-info { border-color: rgba(33,184,208,.32); background: rgba(33,184,208,.09); } .alert-success { border-color: rgba(26,188,116,.30); background: rgba(26,188,116,.09); } .alert-warning { border-color: rgba(242,164,58,.38); background: rgba(242,164,58,.11); } .alert-danger { border-color: rgba(214,59,71,.32); background: rgba(214,59,71,.09); } .tabs { display: grid; gap: 14px; } .tab-panel { display: none; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid); } .tab-panel.is-active { display: block; } .tab-panel p { margin: 6px 0 0; } .progress-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid); } .progress-card > span, .progress-card > strong { font-size: 13px; } .progress { overflow: hidden; height: 10px; border-radius: 999px; background: var(--surface-2); } .progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--pink), var(--orange)); } .stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .step { display: grid; place-items: center; gap: 7px; padding: 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); color: var(--muted); text-align: center; font-weight: 900; } .step b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); } .step.is-done b, .step.is-active b { color: #fff; background: linear-gradient(135deg, var(--pink), var(--orange)); } .step.is-active { color: var(--text); border-color: rgba(215,53,112,.46); } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 13px; font-weight: 800; } .breadcrumb a { color: var(--text-soft); } .breadcrumb strong { color: var(--text); } .pagination button { min-width: 38px; padding-inline: 10px; } .avatar-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .avatar-stack { display: flex; align-items: center; padding-left: 10px; } .avatar-stack img, .avatar-stack span { width: 38px; height: 38px; display: grid; place-items: center; margin-left: -10px; border: 3px solid var(--surface-solid); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 900; object-fit: cover; } .chip { min-height: 34px; } .timeline-mini { display: grid; gap: 0; } .timeline-mini > div { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 0 0 18px; } .timeline-mini > div:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--border); } .timeline-mini b { position: relative; z-index: 1; width: 18px; height: 18px; border: 4px solid var(--surface-solid); border-radius: 999px; background: var(--pink); box-shadow: 0 0 0 1px var(--border); } .timeline-mini strong, .timeline-mini small { display: block; } .timeline-mini small { color: var(--muted); margin-top: 3px; } .mini-polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); } .empty-state { display: grid; place-items: center; gap: 10px; min-height: 250px; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-solid); text-align: center; } .empty-state div { font-size: 42px; } .empty-state p { max-width: 310px; margin-bottom: 6px; } .skeleton-card { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-solid); } .skeleton-card span, .skeleton-card b, .skeleton-card i, .skeleton-card em { display: block; border-radius: 999px; background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2), white 18%), var(--surface-2)); background-size: 200% 100%; animation: skeletonPulse 1.15s ease infinite; } .skeleton-card span { height: 180px; border-radius: 18px; } .skeleton-card b { width: 60%; height: 18px; } .skeleton-card i { width: 86%; height: 12px; } .skeleton-card i + i { width: 72%; } .skeleton-card em { width: 120px; height: 34px; } @keyframes skeletonPulse { to { background-position: -200% 0; } } @media (max-width: 820px) { .input-group, .choice-grid, .stepper, .mini-polaroids { grid-template-columns: 1fr; } .segmented { width: 100%; border-radius: 18px; } .segmented button { flex: 1; } .alert { grid-template-columns: 1fr; } } .kit-hero .lead { max-width: 860px; } .kit-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .kit-section { padding-top: 28px; } .kit-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; } .kit-sidebar { position: sticky; top: 86px; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); } .kit-sidebar a { display: flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 999px; color: var(--text-soft); font-size: 13px; font-weight: 900; } .kit-sidebar a:hover { color: var(--text); background: var(--surface-2); } .kit-content { display: grid; gap: 18px; min-width: 0; } .kit-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); } .kit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; } .kit-card h2, .kit-modal h3 { margin: 0; color: var(--text); font-size: clamp(20px, 2vw, 27px); line-height: 1.1; } .kit-label { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 7px; padding: 0 10px; border-radius: 999px; background: rgba(215, 53, 112, .12); color: var(--pink); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; } .kit-help { max-width: 280px; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.45; text-align: right; } .kit-row, .kit-chip-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .kit-row-sm { margin-top: 16px; } .kit-icon-action { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-solid); color: var(--text); font-weight: 950; cursor: pointer; box-shadow: none; } .kit-icon-action:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); } .kit-icon-action.is-danger { color: #ef3340; } .kit-badge-soft { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); color: var(--text-soft); font-size: 12px; font-weight: 900; } .kit-chip, .kit-segmented button, .kit-tab-list button, .kit-pagination button { min-height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); color: var(--text-soft); padding: 0 13px; font-weight: 950; cursor: pointer; } .kit-chip.is-active, .kit-segmented button.is-active, .kit-tab-list button.is-active, .kit-pagination button.is-active { border-color: transparent; background: linear-gradient(135deg, var(--pink), var(--orange)); color: #fff; } .kit-form { display: grid; gap: 16px; } .kit-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .kit-field { display: grid; gap: 8px; min-width: 0; } .kit-field > span { color: var(--text-soft); font-size: 13px; font-weight: 900; } .kit-input-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid); } .kit-input-group > span { padding-left: 8px; color: var(--muted); font-size: 13px; font-weight: 850; white-space: nowrap; } .kit-input-group .input { border-color: transparent; background: var(--surface-2); } .kit-control-grid, .kit-option-grid, .kit-stat-grid, .kit-polaroids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kit-check, .kit-radio, .kit-switch, .kit-option { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 72px; padding: 14px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-solid); cursor: pointer; } .kit-check input, .kit-radio input, .kit-option input { appearance: none; -webkit-appearance: none; width: 22px; min-width: 22px; height: 22px; margin: 0; border: 2px solid rgba(140, 123, 126, .62); background: var(--surface-solid); cursor: pointer; } .kit-check input { border-radius: 7px; } .kit-radio input, .kit-option input { border-radius: 999px; } .kit-check input:checked, .kit-radio input:checked, .kit-option input:checked { border-color: var(--pink); background: linear-gradient(135deg, var(--pink), var(--orange)); } .kit-check input:checked::after { content: "✓"; display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 14px; font-weight: 950; } .kit-radio input:checked::after, .kit-option input:checked::after { content: ""; display: block; width: 8px; height: 8px; margin: 5px; border-radius: 999px; background: #fff; } .kit-check span, .kit-radio span, .kit-switch span, .kit-option span { display: grid; gap: 4px; min-width: 0; } .kit-check strong, .kit-radio strong, .kit-switch strong, .kit-option strong { color: var(--text); font-size: 14px; line-height: 1.25; } .kit-check small, .kit-radio small, .kit-switch small, .kit-option small { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.35; } .kit-switch { justify-content: space-between; } .kit-switch input { position: absolute; opacity: 0; pointer-events: none; } .kit-switch i { position: relative; width: 54px; min-width: 54px; height: 30px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); } .kit-switch i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 4px 10px rgba(0,0,0,.2); transition: .18s ease; } .kit-switch input:checked + i { border-color: transparent; background: linear-gradient(135deg, var(--pink), var(--orange)); } .kit-switch input:checked + i::after { transform: translateX(24px); } .kit-option { min-height: 94px; } .kit-option:focus-within, .kit-check:focus-within, .kit-radio:focus-within, .kit-switch:focus-within { outline: 3px solid rgba(33, 184, 208, .22); border-color: rgba(33, 184, 208, .48); } .kit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr); gap: 14px; } .kit-stack { display: grid; gap: 14px; } .kit-range { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-solid); } .kit-range span, .kit-progress-card span { display: flex; justify-content: space-between; gap: 14px; color: var(--text); font-size: 13px; font-weight: 900; } .kit-range b, .kit-progress-card b { color: var(--pink); } .kit-range input { width: 100%; accent-color: var(--pink); } .kit-upload, .kit-empty, .kit-skeleton { display: grid; place-items: center; gap: 9px; min-height: 250px; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-solid); text-align: center; } .kit-upload { border: 2px dashed rgba(215, 53, 112, .36); background: linear-gradient(135deg, rgba(215,53,112,.08), rgba(33,184,208,.08)); } .kit-upload div { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: var(--surface-solid); color: var(--pink); font-size: 30px; font-weight: 950; box-shadow: var(--shadow-soft); } .kit-upload p, .kit-empty p, .kit-tab-panel p, .kit-modal p { margin: 0; color: var(--text-soft); line-height: 1.55; } .kit-alert { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); } .kit-alert strong { color: var(--text); font-size: 13px; } .kit-alert span { color: var(--text-soft); font-size: 13px; line-height: 1.45; } .kit-alert-info { border-color: rgba(33,184,208,.32); background: rgba(33,184,208,.09); } .kit-alert-success { border-color: rgba(26,188,116,.30); background: rgba(26,188,116,.09); } .kit-alert-warning { border-color: rgba(242,164,58,.38); background: rgba(242,164,58,.11); } .kit-alert-danger { border-color: rgba(214,59,71,.32); background: rgba(214,59,71,.09); } .kit-segmented, .kit-tab-list, .kit-pagination { display: flex; gap: 8px; flex-wrap: wrap; } .kit-segmented { width: max-content; max-width: 100%; margin-bottom: 16px; padding: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-solid); } .kit-segmented button { border: 0; background: transparent; } .kit-tabs { display: grid; gap: 12px; margin-bottom: 18px; } .kit-tab-panel { display: none; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-solid); } .kit-tab-panel.is-active { display: block; } .kit-tab-panel strong { display: block; margin-bottom: 6px; } .kit-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; color: var(--muted); font-size: 13px; font-weight: 850; } .kit-breadcrumb a { color: var(--text-soft); } .kit-breadcrumb strong { color: var(--text); } .kit-pagination button { min-width: 38px; padding-inline: 10px; } .kit-progress-card { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-solid); } .kit-progress { overflow: hidden; height: 11px; border-radius: 999px; background: var(--surface-2); } .kit-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(135deg, var(--pink), var(--orange)); } .kit-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; } .kit-stepper > div { display: grid; place-items: center; gap: 7px; padding: 13px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); color: var(--muted); text-align: center; font-weight: 950; } .kit-stepper b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); } .kit-stepper .is-done b, .kit-stepper .is-active b { color: #fff; background: linear-gradient(135deg, var(--pink), var(--orange)); } .kit-stepper .is-active { color: var(--text); border-color: rgba(215, 53, 112, .46); } .kit-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; } .kit-stat { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-solid); } .kit-stat span, .kit-stat small { color: var(--muted); font-size: 12px; font-weight: 850; } .kit-stat strong { color: var(--text); font-size: 31px; line-height: 1; } .kit-avatar-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kit-avatar-stack { display: flex; align-items: center; padding-left: 10px; } .kit-avatar-stack img, .kit-avatar-stack span { width: 40px; height: 40px; display: grid; place-items: center; margin-left: -10px; border: 3px solid var(--surface-solid); border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 950; object-fit: cover; } .kit-polaroids { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kit-empty div { font-size: 42px; } .kit-empty p { max-width: 320px; } .kit-skeleton { align-content: center; justify-items: stretch; } .kit-skeleton span, .kit-skeleton b, .kit-skeleton i, .kit-skeleton em { display: block; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--surface-2), rgba(255,255,255,.22), var(--surface-2)); background-size: 220% 100%; animation: kitSkeleton 1.2s ease infinite; } .kit-skeleton span { height: 128px; border-radius: 18px; } .kit-skeleton b { width: 62%; height: 18px; } .kit-skeleton i { width: 86%; height: 12px; } .kit-skeleton i + i { width: 72%; } .kit-skeleton em { width: 120px; height: 34px; } .kit-table-wrap table { min-width: 760px; } .kit-modal-backdrop { position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 20px; background: rgba(15, 16, 22, .58); backdrop-filter: blur(12px); } .kit-modal-backdrop.is-open { display: grid; } .kit-modal { width: min(520px, 100%); padding: 22px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface-solid); box-shadow: var(--shadow); } .kit-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .kit-modal .kit-row { margin-top: 20px; } .kit-toast { position: fixed; right: 18px; bottom: 18px; z-index: 160; transform: translateY(18px); opacity: 0; pointer-events: none; padding: 13px 16px; border: 1px solid rgba(26,188,116,.30); border-radius: 16px; background: var(--surface-solid); color: var(--text); font-weight: 900; box-shadow: var(--shadow); transition: .18s ease; } .kit-toast.is-open { transform: translateY(0); opacity: 1; } @keyframes kitSkeleton { to { background-position: -220% 0; } } @media (max-width: 980px) { .kit-layout { grid-template-columns: 1fr; } .kit-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } .kit-sidebar a { justify-content: center; text-align: center; } .kit-split, .kit-polaroids, .kit-stat-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .kit-card { padding: 16px; border-radius: 22px; } .kit-card-head, .kit-avatar-line { display: grid; } .kit-help { text-align: left; } .kit-form-grid, .kit-control-grid, .kit-option-grid { grid-template-columns: 1fr; } .kit-input-group { grid-template-columns: 1fr; } .kit-input-group > span { padding-left: 0; } .kit-alert { grid-template-columns: 1fr; } .kit-stepper { grid-template-columns: 1fr; } .kit-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; } .kit-segmented { width: 100%; border-radius: 18px; } .kit-segmented button { flex: 1; } }