/* Theme Name: Frameless Theme URI: https://frameless.blog Author: Daniel M. (com Iris / Claude) Author URI: https://frameless.blog Description: Tema custom do Frameless — blog de estratégia e pensamento sistêmico. Home com curadoria por pilares, artigos assinados por Iris ou Daniel, captura de e-mail para a newsletter. Version: 0.1.4 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: frameless */ /* ========================================================================== FRAMELESS — DESIGN TOKENS Ver documento de referência (Frameless-Guia-Tema.md) seção "Brand kit" ========================================================================== */ :root{ --fl-bg: #FAF7F1; --fl-bg-card: #FFFFFF; --fl-text: #1E1B16; --fl-text-soft: #5B5648; --fl-text-faint: #8a8574; --fl-border: #E7E0D3; --fl-blue: #1D4E89; --fl-blue-hover: #163d6b; --fl-gold: #B8860B; --fl-dark: #1E1B16; --fl-pilar-interpretar-bg: #E4ECF6; --fl-pilar-interpretar-fg: #1D4E89; --fl-pilar-analisar-bg: #E1F0EF; --fl-pilar-analisar-fg: #1F6E68; --fl-pilar-narrar-bg: #FBEAE1; --fl-pilar-narrar-fg: #B5502D; --fl-pilar-adaptar-bg: #E9F3E1; --fl-pilar-adaptar-fg: #4C7A2A; --fl-pilar-recomendar-bg: #FBF1DC; --fl-pilar-recomendar-fg: #9C7A16; --fl-font-serif: 'Lora', Georgia, 'Times New Roman', serif; --fl-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fl-radius: 6px; --fl-max-width: 1240px; } /* ========================================================================== RESET / BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fl-bg); color: var(--fl-text); font-family: var(--fl-font-sans); font-size: 16px; line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: var(--fl-blue); text-decoration: none; } a:hover { color: var(--fl-blue-hover); } h1, h2, h3, h4 { font-family: var(--fl-font-serif); font-weight: 700; margin: 0 0 0.5em 0; line-height: 1.25; } ul, ol { padding-left: 1.2em; } .fl-container { max-width: var(--fl-max-width); margin: 0 auto; padding: 0 24px; } .screen-reader-text { position: absolute; left: -9999px; } /* ========================================================================== BUTTONS / TAGS ========================================================================== */ .fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--fl-blue); color: #fff !important; font-family: var(--fl-font-sans); font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 4px; border: none; cursor: pointer; } .fl-btn:hover { background: var(--fl-blue-hover); } .fl-btn.fl-btn-gold { background: var(--fl-gold); } .fl-btn.fl-btn-gold:hover { background: #93690a; } .fl-tag { display: inline-block; font-family: var(--fl-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 3px; } .fl-tag-interpretar { background: var(--fl-pilar-interpretar-bg); color: var(--fl-pilar-interpretar-fg); } .fl-tag-analisar { background: var(--fl-pilar-analisar-bg); color: var(--fl-pilar-analisar-fg); } .fl-tag-narrar { background: var(--fl-pilar-narrar-bg); color: var(--fl-pilar-narrar-fg); } .fl-tag-adaptar { background: var(--fl-pilar-adaptar-bg); color: var(--fl-pilar-adaptar-fg); } .fl-tag-recomendar { background: var(--fl-pilar-recomendar-bg); color: var(--fl-pilar-recomendar-fg); } /* ========================================================================== HEADER ========================================================================== */ .fl-header { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--fl-border); } .fl-logo { display: flex; align-items: center; gap: 10px; font-family: var(--fl-font-serif); font-size: 22px; font-weight: 700; color: var(--fl-text); } .fl-logo:hover { color: var(--fl-text); } .fl-nav { display: flex; align-items: center; gap: 32px; } .fl-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; } .fl-nav a { font-size: 14px; font-weight: 600; color: var(--fl-text); } .fl-nav a:hover { color: var(--fl-blue); } .fl-nav-toggle { display: none; background: none; border: none; cursor: pointer; } /* ========================================================================== HERO / PILAR FILTER ========================================================================== */ .fl-hero { padding: 64px 24px 40px 24px; max-width: 760px; } .fl-kicker { font-family: var(--fl-font-sans); font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--fl-gold); font-weight: 700; margin-bottom: 14px; } .fl-hero h1 { font-size: 40px; margin-bottom: 20px; } .fl-hero p { font-size: 17px; line-height: 1.6; color: var(--fl-text-soft); max-width: 620px; margin: 0 0 28px 0; } .fl-pilar-nav { padding: 0 24px 36px 24px; display: flex; gap: 10px; flex-wrap: wrap; } /* ========================================================================== ARTICLE GRID / CARDS ========================================================================== */ .fl-grid { padding: 0 24px 56px 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .fl-card { background: var(--fl-bg-card); border: 1px solid var(--fl-border); border-radius: var(--fl-radius); overflow: hidden; display: flex; flex-direction: column; } .fl-card-thumb { height: 160px; background: linear-gradient(135deg, var(--fl-blue), #3d6ba8); display: flex; align-items: center; justify-content: center; overflow: hidden; } .fl-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .fl-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } .fl-card-body h3 { font-size: 19px; margin: 0; line-height: 1.3; } .fl-card-body p { font-size: 14px; color: var(--fl-text-soft); line-height: 1.5; margin: 0; flex-grow: 1; } .fl-card-meta { font-size: 12px; color: var(--fl-text-faint); font-weight: 600; } /* ========================================================================== NEWSLETTER CTA ========================================================================== */ .fl-newsletter { margin: 0 24px 56px 24px; background: var(--fl-dark); border-radius: 8px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .fl-newsletter-title { color: #fff; font-family: var(--fl-font-serif); font-size: 20px; font-weight: 700; margin-bottom: 4px; } .fl-newsletter-sub { color: #c9c4b6; font-size: 13.5px; } .fl-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; } .fl-newsletter-form input[type="email"] { background: #2b2620; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 12px 16px; font-size: 14px; color: #fff; width: 220px; font-family: var(--fl-font-sans); } /* ========================================================================== ARTICLE (SINGLE) ========================================================================== */ .fl-article-head { max-width: 720px; margin: 0 auto; padding: 56px 24px 0 24px; } .fl-article-head h1 { font-size: 38px; margin: 20px 0; } .fl-byline { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .fl-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--fl-blue); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--fl-font-serif); font-weight: 700; font-size: 15px; overflow: hidden; } .fl-avatar img { width: 100%; height: 100%; object-fit: cover; } .fl-byline-name { font-size: 14px; font-weight: 700; } .fl-byline-name span { font-weight: 400; color: var(--fl-text-faint); } .fl-byline-meta { font-size: 12.5px; color: var(--fl-text-faint); } .fl-article-cover { max-width: 860px; margin: 0 auto; padding: 0 24px 40px 24px; } .fl-article-cover img { width: 100%; border-radius: 8px; } .fl-article-body { max-width: 680px; margin: 0 auto; padding: 0 24px 24px 24px; font-family: var(--fl-font-serif); } .fl-article-body p { font-size: 18px; line-height: 1.75; color: #302c24; margin: 0 0 22px 0; } .fl-article-body blockquote { border-left: 3px solid var(--fl-gold); padding: 4px 0 4px 24px; margin: 36px 0; font-style: italic; font-size: 22px; } .fl-article-body h2 { font-size: 26px; margin: 40px 0 16px 0; } .fl-article-body img { border-radius: 6px; margin: 24px 0; } .fl-article-body iframe { max-width: 100%; border-radius: 6px; } .fl-article-body .wp-block-embed { margin: 24px 0; } .fl-article-end-cta { max-width: 680px; margin: 0 auto 56px auto; padding: 0 24px; } /* ========================================================================== PAGE (Sobre / genérica) ========================================================================== */ .fl-page { max-width: 780px; margin: 0 auto; padding: 56px 24px 24px 24px; } .fl-page h1 { font-size: 36px; margin-bottom: 32px; } .fl-page p { font-size: 16px; line-height: 1.7; color: #302c24; margin: 0 0 18px 0; } .fl-page .fl-notice { font-size: 14px; color: var(--fl-text-faint); } .fl-sobre-intro { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 40px; flex-wrap: wrap; } .fl-sobre-photo { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--fl-blue), #3d6ba8); } .fl-sobre-photo img { width: 100%; height: 100%; object-fit: cover; } .fl-iris-box { background: var(--fl-bg-card); border: 1px solid var(--fl-border); border-radius: 8px; padding: 28px 32px; margin: 32px 0; } .fl-pilares-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-bottom: 40px; } .fl-pilares-grid > div { border-radius: 6px; padding: 16px; font-weight: 700; font-size: 14px; } /* ========================================================================== FOOTER ========================================================================== */ .fl-footer { padding: 32px 24px; border-top: 1px solid var(--fl-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .fl-footer-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .fl-footer-links a { font-size: 13px; color: var(--fl-text-soft); font-weight: 600; } /* O menu do rodapé (Aparência > Menus) sai como