/* Theme Name: Mic Bugado Theme URI: https://micbugado.com Description: Child theme do Astra para o blog do canal Mic Bugado — notícias e curiosidades de games com humor. Author: Mic Bugado Author URI: https://micbugado.com Template: astra Version: 1.0.0 Text Domain: mic-bugado */ /* ========================================================================== 1. DESIGN TOKENS — identidade visual do Mic Bugado (ver 02-IDENTIDADE-VISUAL.md) ========================================================================== */ :root{ /* Cores da marca */ --mb-green: #50FF96; --mb-pink: #FF3CB4; --mb-purple: #BE3CFF; --mb-red: #FF283C; /* Superfícies */ --mb-bg: #10061A; /* fundo base do site */ --mb-surface: #1A0D28; /* cards, blocos */ --mb-surface-2: #241237; /* card hover, elevação */ --mb-border: #35204D; /* bordas e divisores */ /* Texto */ --mb-text: #F2ECFA; /* texto principal */ --mb-text-muted: #A99BBF; /* metadados, data, autor, legendas */ --mb-text-dim: #6F6383; /* texto desabilitado, placeholders */ /* Semântica */ --mb-link: var(--mb-green); --mb-link-hover: #8CFFBA; --mb-focus: var(--mb-green); /* anel de foco — acessibilidade */ /* Tipografia */ --mb-font-display: "Anton", "Archivo Black", Impact, sans-serif; --mb-font-kicker: "Chakra Petch", ui-monospace, monospace; --mb-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Escala de espaçamento (base 4px) */ --mb-s1: .25rem; --mb-s2: .5rem; --mb-s3: .75rem; --mb-s4: 1rem; --mb-s6: 1.5rem; --mb-s8: 2rem; --mb-s12: 3rem; --mb-s16: 4rem; --mb-s24: 6rem; /* Raios */ --mb-r-sm: 4px; --mb-r-md: 8px; --mb-r-lg: 14px; --mb-r-pill: 999px; /* Glow (a assinatura visual da marca) */ --mb-glow-green: 0 0 6px rgba(80,255,150,.90), 0 0 18px rgba(80,255,150,.50), 0 0 38px rgba(80,255,150,.22); --mb-glow-pink: 0 0 6px rgba(255,60,180,.90), 0 0 18px rgba(255,60,180,.50), 0 0 38px rgba(255,60,180,.22); --mb-glow-purple: 0 0 6px rgba(190,60,255,.90), 0 0 18px rgba(190,60,255,.50), 0 0 38px rgba(190,60,255,.22); --mb-glow-red: 0 0 6px rgba(255,40,60,.90), 0 0 18px rgba(255,40,60,.50), 0 0 38px rgba(255,40,60,.22); /* Sombra (fundo escuro pede sombra + glow, não sombra sozinha) */ --mb-shadow-card: 0 2px 8px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.35); /* Container */ --mb-container: 1280px; --mb-gutter: var(--mb-s4); /* Escala tipográfica fluida (mobile-first) */ --mb-t-hero: clamp(1.75rem, 4.5vw, 3rem); /* título do destaque principal */ --mb-t-h1: clamp(2rem, 5vw, 3.25rem); /* H1 de post */ --mb-t-h2: clamp(1.5rem, 3.5vw, 2.25rem); /* título de seção */ --mb-t-h3: clamp(1.25rem, 2.5vw, 1.5rem); --mb-t-card: clamp(1rem, 2vw, 1.25rem); /* título de card */ --mb-t-body: 1.0625rem; /* 17px — corpo de leitura */ --mb-t-small: .875rem; /* metadados */ --mb-t-kicker: .75rem; /* categoria/tag */ } /* ========================================================================== 2. RESET / BASE ========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ /* !important nas duas linhas abaixo: o Astra aplica classes como .ast-separate-container direto na conforme o layout escolhido no Customizer, e uma classe sempre vence um seletor de elemento puro em especificidade CSS — mesmo carregando depois. Fundo e cor de texto são tokens de marca inegociáveis, então garantimos que ganham sempre, independente do layout que o Astra estiver usando. */ background-color: var(--mb-bg) !important; color: var(--mb-text) !important; font-family: var(--mb-font-body); font-size: var(--mb-t-body); line-height: 1.7; } h1, h2, h3, h4, h5, h6{ font-family: var(--mb-font-display); font-weight: 400; color: var(--mb-text) !important; /* mesmo motivo do body acima */ line-height: 1.15; margin: 0 0 var(--mb-s4); } p{ margin: 0 0 var(--mb-s4); max-width: 68ch; /* largura máxima de leitura — nunca deixar linha atravessar a tela inteira */ } a{ color: var(--mb-link); text-decoration: none; transition: color .18s ease; } a:hover{ color: var(--mb-link-hover); } img{ max-width: 100%; height: auto; display: block; } /* Anel de foco visível — obrigatório, nunca remover sem substituir */ :focus-visible{ outline: 2px solid var(--mb-focus); outline-offset: 2px; } /* Kicker de categoria — usado em cards, hero, arquivo */ .mb-kicker{ font-family: var(--mb-font-kicker); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: var(--mb-t-kicker); display: inline-block; } /* Kicker clicável (link de categoria): área de toque mínima de 44px no mobile, sem aumentar o tamanho visual do texto — a extensão é só na área clicável. */ a.mb-kicker{ display: inline-flex; align-items: center; min-height: 44px; } /* ========================================================================== 3. LAYOUT — container e grade (mobile-first, breakpoints em min-width) ========================================================================== */ .mb-container{ width: 100%; max-width: var(--mb-container); margin-inline: auto; padding-inline: var(--mb-gutter); } @media (min-width: 768px){ .mb-container{ padding-inline: var(--mb-s6); } } @media (min-width: 1024px){ .mb-container{ padding-inline: var(--mb-s8); } } /* ========================================================================== 4. AURORA + GRAIN — o "hero" visual da marca Uso: só no header, hero e blocos de destaque. NUNCA atrás de texto de leitura. ========================================================================== */ .mb-aurora{ position: relative; background: radial-gradient(60% 80% at 15% 20%, rgba(80,255,150,.30) 0%, transparent 60%), radial-gradient(55% 70% at 70% 15%, rgba(255,60,180,.28) 0%, transparent 62%), radial-gradient(70% 90% at 85% 75%, rgba(190,60,255,.26) 0%, transparent 65%), radial-gradient(50% 60% at 45% 92%, rgba(255,40,60,.16) 0%, transparent 60%), var(--mb-bg); } .mb-grain::after{ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== 5. GLOW — utilitários. Regra: no máximo UM elemento com glow forte por tela. ========================================================================== */ .mb-glow-text{ text-shadow: var(--mb-glow-green); } .mb-glow-text-pink{ text-shadow: var(--mb-glow-pink); } .mb-glow-text-purple{ text-shadow: var(--mb-glow-purple); } .mb-glow-text-red{ text-shadow: var(--mb-glow-red); } .mb-glow-green{ box-shadow: var(--mb-glow-green); } .mb-glow-pink{ box-shadow: var(--mb-glow-pink); } .mb-glow-purple{ box-shadow: var(--mb-glow-purple); } .mb-glow-red{ box-shadow: var(--mb-glow-red); } /* ========================================================================== 6. COR POR CATEGORIA — kicker, borda, badge ========================================================================== */ .mb-cat-noticias{ color: var(--mb-green); } .mb-cat-curiosidades{ color: var(--mb-pink); } .mb-cat-canal{ color: var(--mb-purple); } .mb-cat-ofertas{ color: var(--mb-red); } .mb-bg-noticias{ background-color: var(--mb-green); } .mb-bg-curiosidades{ background-color: var(--mb-pink); } .mb-bg-canal{ background-color: var(--mb-purple); } .mb-bg-ofertas{ background-color: var(--mb-red); } /* ========================================================================== 7. BOTÕES ========================================================================== */ .mb-btn{ display: inline-flex; align-items: center; gap: var(--mb-s2); font-family: var(--mb-font-body); font-weight: 700; font-size: .95rem; padding: .8rem 1.7rem; border-radius: var(--mb-r-pill); border: none; cursor: pointer; min-height: 44px; /* área de toque mínima no mobile */ transition: box-shadow .18s ease, background-color .18s ease, color .18s ease; } .mb-btn-primary{ background-color: var(--mb-green); color: var(--mb-bg); } .mb-btn-primary:hover{ box-shadow: var(--mb-glow-green); color: var(--mb-bg); } .mb-btn-secondary{ background-color: transparent; color: var(--mb-green); border: 1.5px solid var(--mb-green); } .mb-btn-secondary:hover{ background-color: var(--mb-green); color: var(--mb-bg); } /* ========================================================================== 8. SLOT DE ANÚNCIO — altura mínima reservada, sem layout shift (ver functions.php: mb_ad_slot()) ========================================================================== */ .mb-ad-slot{ min-height: 250px; background-color: var(--mb-surface); border: 1px dashed var(--mb-border); border-radius: var(--mb-r-md); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--mb-s4); color: var(--mb-text-muted); /* --mb-text-dim não passa em AA para este tamanho de texto */ font-family: var(--mb-font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: var(--mb-t-kicker); } .mb-ad-slot--sidebar{ min-height: 600px; } .mb-ad-slot--post-fim{ min-height: 280px; max-width: 336px; margin-inline: auto; } /* ========================================================================== 9. COMPONENTES ========================================================================== */ /* --- Card de notícia (template-parts/card.php) --- */ .mb-card{ background-color: var(--mb-surface); border-radius: var(--mb-r-lg); border: 1px solid var(--mb-border); overflow: hidden; box-shadow: var(--mb-shadow-card); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .mb-card:hover{ transform: translateY(-2px); } .mb-card.mb-cat-noticias:hover{ border-color: var(--mb-green); box-shadow: var(--mb-glow-green), var(--mb-shadow-card); } .mb-card.mb-cat-curiosidades:hover{ border-color: var(--mb-pink); box-shadow: var(--mb-glow-pink), var(--mb-shadow-card); } .mb-card.mb-cat-canal:hover{ border-color: var(--mb-purple); box-shadow: var(--mb-glow-purple), var(--mb-shadow-card); } .mb-card.mb-cat-ofertas:hover{ border-color: var(--mb-red); box-shadow: var(--mb-glow-red), var(--mb-shadow-card); } .mb-card__thumb-link{ display: block; } .mb-card__thumb{ aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--mb-surface-2); } .mb-card__img{ width: 100%; height: 100%; object-fit: cover; } .mb-card__thumb-placeholder{ width: 100%; height: 100%; background-color: #3a2a4a; } .mb-card__body{ padding: var(--mb-s4); display: flex; flex-direction: column; gap: var(--mb-s2); } .mb-card__title{ font-family: var(--mb-font-body); font-weight: 700; font-size: var(--mb-t-card); line-height: 1.3; margin: 0; max-width: none; } .mb-card__title a{ color: var(--mb-text); } .mb-card__title a:hover{ color: var(--mb-text); text-decoration: underline; } .mb-card__meta{ color: var(--mb-text-muted); font-size: var(--mb-t-small); } .mb-cards-grid{ display: grid; grid-template-columns: 1fr; gap: var(--mb-s6); } @media (min-width: 768px){ .mb-cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ .mb-cards-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- Hero split (template-parts/hero.php + mais-lidas.php) --- */ .mb-hero{ padding: var(--mb-s8) 0; } .mb-hero__inner{ display: flex; flex-direction: column; gap: var(--mb-s8); } @media (min-width: 1024px){ .mb-hero__inner{ flex-direction: row; align-items: stretch; } } .mb-hero__feature{ display: block; } @media (min-width: 1024px){ .mb-hero__feature{ flex: 1.6; min-width: 0; } } .mb-hero__image{ position: relative; display: block; height: 280px; border-radius: var(--mb-r-lg); overflow: hidden; } @media (min-width: 768px){ .mb-hero__image{ height: 400px; } } @media (min-width: 1024px){ .mb-hero__image{ height: 560px; } } .mb-hero__img{ width: 100%; height: 100%; object-fit: cover; } .mb-hero__placeholder{ width: 100%; height: 100%; background-color: #3a2a4a; } .mb-hero__overlay{ position: absolute; inset: 0; display: block; background: linear-gradient(0deg, rgba(16,6,26,.95) 0%, rgba(16,6,26,.55) 45%, transparent 80%); } .mb-hero__text{ position: absolute; left: 0; right: 0; bottom: 0; padding: var(--mb-s6); display: flex; flex-direction: column; gap: var(--mb-s2); max-width: 640px; } .mb-hero__title{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-hero); line-height: 1.08; color: var(--mb-text); margin: 0; } .mb-hero__underline{ width: 64px; height: 4px; border-radius: 2px; } .mb-hero__excerpt{ color: var(--mb-text-muted); font-size: var(--mb-t-body); line-height: 1.5; max-width: 60ch; } .mb-mais-lidas{ background-color: var(--mb-surface-2); border-radius: var(--mb-r-lg); border: 1px solid var(--mb-border); padding: var(--mb-s6); display: flex; flex-direction: column; gap: var(--mb-s4); } @media (min-width: 1024px){ .mb-mais-lidas{ flex: 1; min-width: 0; } } .mb-mais-lidas__title{ font-family: var(--mb-font-kicker); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; font-weight: 600; color: var(--mb-text-muted); margin: 0; } .mb-mais-lidas__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mb-s4); } .mb-mais-lidas__list li{ display: flex; gap: var(--mb-s3); align-items: flex-start; } .mb-mais-lidas__num{ width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mb-font-display); font-size: 1.05rem; background-color: var(--mb-bg); color: var(--mb-green); border-radius: var(--mb-r-sm); } .mb-mais-lidas__list p{ margin: .25rem 0 0; font-weight: 600; font-size: .95rem; line-height: 1.35; max-width: none; } .mb-mais-lidas__list a{ color: var(--mb-text); } .mb-mais-lidas__list a:hover{ color: var(--mb-green); } /* --- Título e CTA de seção (reutilizado em várias seções da home) --- */ .mb-section-title{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h2); margin: 0 0 var(--mb-s6); } .mb-section-cta{ display: flex; justify-content: center; margin-top: var(--mb-s8); } /* --- Do Canal (template-parts/bloco-canal.php) --- */ .mb-aurora-soft{ position: relative; background: radial-gradient(60% 90% at 15% 10%, rgba(190,60,255,.14) 0%, transparent 60%), radial-gradient(60% 80% at 85% 90%, rgba(190,60,255,.08) 0%, transparent 60%), var(--mb-surface); } .mb-do-canal{ padding: var(--mb-s16) 0; } .mb-do-canal__aviso{ color: var(--mb-text-muted); } .mb-videos-grid{ display: grid; grid-template-columns: 1fr; gap: var(--mb-s6); } @media (min-width: 1024px){ .mb-videos-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mb-video-card{ display: flex; flex-direction: column; gap: var(--mb-s3); color: var(--mb-text); } .mb-video-card:hover{ color: var(--mb-text); } .mb-video-thumb{ position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--mb-r-md); overflow: hidden; background-color: #3a2a4a; } .mb-video-thumb img{ width: 100%; height: 100%; object-fit: cover; } .mb-play-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background-color: rgba(16,6,26,.25); } .mb-video-title{ font-weight: 600; font-size: .95rem; line-height: 1.35; } /* ========================================================================== 10. HOME — seções de front-page.php ========================================================================== */ .mb-section{ padding: var(--mb-s16) 0; } .mb-section--ad{ padding: var(--mb-s8) 0; } .mb-curiosidades-layout{ display: flex; flex-direction: column; gap: var(--mb-s8); } @media (min-width: 1024px){ .mb-curiosidades-layout{ flex-direction: row; align-items: stretch; } } .mb-curiosidades-feature{ display: block; } @media (min-width: 1024px){ .mb-curiosidades-feature{ flex: 1.3; min-width: 0; } } .mb-compact-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } @media (min-width: 1024px){ .mb-compact-list{ flex: 1; min-width: 0; } } .mb-compact-list li{ padding: var(--mb-s3) 0; border-bottom: 1px solid var(--mb-border); display: flex; flex-direction: column; gap: var(--mb-s1); } .mb-compact-list li:first-child{ padding-top: 0; } .mb-compact-list p{ margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; max-width: none; } .mb-compact-list a{ color: var(--mb-text); } .mb-compact-list a:hover{ color: var(--mb-pink); } @media (min-width: 1024px){ .mb-cards-grid--ofertas{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mb-vip-banner{ margin-top: var(--mb-s8); border: 1px solid var(--mb-red); border-radius: var(--mb-r-lg); padding: var(--mb-s8); text-align: center; background-color: var(--mb-surface-2); } .mb-vip-banner h3{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h2); margin-bottom: var(--mb-s2); } .mb-vip-banner p{ color: var(--mb-text-muted); margin: 0 auto var(--mb-s6); max-width: 50ch; } /* ========================================================================== 11. POST (single.php) ========================================================================== */ .mb-post-shell{ padding: var(--mb-s12) 0 0; } .mb-post{ max-width: 720px; margin: 0 auto; padding: 0 var(--mb-gutter); } @media (min-width: 768px){ .mb-post{ padding: 0 var(--mb-s6); } } .mb-post__header{ margin-bottom: var(--mb-s8); } .mb-post__title{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h1); line-height: 1.08; margin: var(--mb-s3) 0; } .mb-post__subtitle{ font-size: 1.1rem; color: var(--mb-text-muted); margin: 0 0 var(--mb-s4); max-width: none; } .mb-post__meta{ display: flex; flex-wrap: wrap; gap: var(--mb-s2); align-items: center; color: var(--mb-text-muted); font-size: var(--mb-t-small); } .mb-post__meta-dot{ width: 3px; height: 3px; border-radius: 50%; background-color: var(--mb-text-dim); } .mb-post__hero-image{ aspect-ratio: 16 / 9; border-radius: var(--mb-r-lg); overflow: hidden; margin-bottom: var(--mb-s8); } .mb-post__hero-image img{ width: 100%; height: 100%; object-fit: cover; } .mb-post__body{ font-size: var(--mb-t-body); line-height: 1.7; } .mb-post__body p{ margin: 0 0 var(--mb-s6); max-width: none; } .mb-post__body h2{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h2); margin: var(--mb-s8) 0 var(--mb-s4); } .mb-post__body h3{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h3); margin: var(--mb-s6) 0 var(--mb-s3); } .mb-post__body img{ border-radius: var(--mb-r-md); margin: var(--mb-s6) 0; } .mb-post__body a{ text-decoration: underline; } .mb-post__body ul, .mb-post__body ol{ margin: 0 0 var(--mb-s6); padding-left: 1.4em; } .mb-post__body blockquote{ border-left: 3px solid var(--mb-green); margin: var(--mb-s6) 0; padding-left: var(--mb-s4); color: var(--mb-text-muted); font-style: italic; max-width: none; } .mb-share{ display: flex; align-items: center; gap: var(--mb-s3); padding: var(--mb-s6) 0; margin: var(--mb-s4) 0 var(--mb-s8); border-top: 1px solid var(--mb-border); border-bottom: 1px solid var(--mb-border); } .mb-share__label{ font-family: var(--mb-font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--mb-text-muted); margin-right: var(--mb-s2); } .mb-share__btn{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--mb-surface-2); color: var(--mb-text); border: 1px solid var(--mb-border); } .mb-share__btn:hover{ color: var(--mb-text); border-color: var(--mb-green); } .mb-share__btn--whatsapp{ background-color: var(--mb-green); color: var(--mb-bg); border: none; } .mb-share__btn--whatsapp:hover{ color: var(--mb-bg); box-shadow: var(--mb-glow-green); } .mb-related{ margin-bottom: var(--mb-s16); } .mb-related__title{ font-family: var(--mb-font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--mb-text-muted); margin-bottom: var(--mb-s6); } .mb-cta-banner{ border: 1px solid var(--mb-purple); border-radius: var(--mb-r-lg); padding: var(--mb-s8); text-align: center; background-color: var(--mb-surface-2); margin-bottom: var(--mb-s16); } .mb-cta-banner h3{ font-family: var(--mb-font-display); font-weight: 400; font-size: 1.6rem; margin-bottom: var(--mb-s2); } .mb-cta-banner p{ color: var(--mb-text-muted); margin: 0 auto var(--mb-s6); max-width: 50ch; } .mb-comments{ margin-bottom: var(--mb-s16); max-width: 720px; margin-inline: auto; padding-inline: var(--mb-gutter); } /* ========================================================================== 12. ARQUIVO / CATEGORIA (archive.php) ========================================================================== */ .mb-archive-header{ padding: var(--mb-s12) 0 var(--mb-s8); border-bottom: 1px solid var(--mb-border); } .mb-archive-title{ font-family: var(--mb-font-display); font-weight: 400; font-size: var(--mb-t-h1); line-height: 1; margin: var(--mb-s3) 0 0; } .mb-archive-underline{ width: 80px; height: 4px; border-radius: 2px; margin-top: var(--mb-s4); } .mb-archive-count{ color: var(--mb-text-muted); margin-top: var(--mb-s4); font-size: .95rem; max-width: none; } .mb-archive-body{ padding: var(--mb-s12) var(--mb-gutter); } .mb-pagination{ margin-top: var(--mb-s12); } .mb-pagination ul.page-numbers{ list-style: none; display: flex; justify-content: center; gap: var(--mb-s2); margin: 0; padding: 0; flex-wrap: wrap; } .mb-pagination .page-numbers li{ display: flex; } .mb-pagination .page-numbers a, .mb-pagination .page-numbers span{ min-width: 44px; min-height: 44px; padding: 0 var(--mb-s2); border-radius: var(--mb-r-md); display: flex; align-items: center; justify-content: center; color: var(--mb-text-muted); border: 1px solid var(--mb-border); font-weight: 600; } .mb-pagination .page-numbers .current{ background-color: var(--mb-green); color: var(--mb-bg); border-color: var(--mb-green); } .mb-pagination .page-numbers a:hover{ border-color: var(--mb-green); color: var(--mb-text); } .mb-visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }