/* Kóme & Co: folha de estilos única, partilhada por todas as páginas. Organização: 0. Tipos de letra (alojados em /fonts, licença OFL) 1. Tokens (cores, larguras, escala tipográfica) 2. Base, acessibilidade e escala tipográfica 3. Cabeçalho e menu móvel 7. Marca, Contacto (FAQ), Journal 4. Rodapé 8. Artigos do journal 5. Página inicial 9. Páginas legais e 404 6. Coleção 10. Responsivo Cada página tem uma classe no (page-home, page-colecao, ...) usada só quando o mesmo componente muda de página para página. Escala tipográfica: relatório de auditoria, secção 2.4 (Par 1). */ /* ---------- 0. Tipos de letra ---------- */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/eb-garamond-latin-ext-500-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-sans-3-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { /* "κόμη" nas páginas inicial e da marca */ font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-sans-3-greek-400-normal.woff2) format('woff2'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-sans-3-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------- 1. Tokens ---------- */ :root { --ink: #0A0B09; --ink-2: #14150F; --bone: #EAE5D6; --bone-dim: #96907E; --line: #26261C; --brass: #B4924F; --brass-dim: #8C7440; --patina: #5C7A68; --error: #D08A72; --shell: 1120px; --radius: 2px; --serif: 'EB Garamond', Georgia, serif; --sans: 'Source Sans 3', system-ui, sans-serif; /* Escala tipográfica (secção 2.4) */ --fs-h1: clamp(44px, 6vw, 72px); --fs-h2: clamp(30px, 4vw, 40px); --fs-h3: 22px; --fs-body: 17px; --fs-secondary: 15px; --fs-label: 13px; } /* ---------- 2. Base, acessibilidade e escala tipográfica ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } ::selection { background: var(--brass); color: var(--ink); } body { background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; } [hidden] { display: none !important; } .wrap, .shell { max-width: var(--shell); margin: 0 auto; padding-left: 40px; padding-right: 40px; } /* Títulos: EB Garamond 500 */ h1, h2, h3 { font-family: var(--serif); font-weight: 500; } .hero h1, .section-head h1, .page-hero h1, .article-hero h1, .legal h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.01em; } .philosophy h2, .section-head h2, .page-marca .section h2, .contact-section h2, .article-body h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.005em; } .pillar h3, .index-name, .modal-info h3, .article-body h3, .product-card h3, .faq-q, .article-card h2, .legal .body h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: 0; } /* Rótulos, menu e botões: Source Sans 600, 13px, maiúsculas */ .label, .kicker, .card-label, .site-nav a, .site-header__meta .origin-tag, .site-header__meta .lang-link, .menu-toggle, .capture button, .article-card .date, .article-card .article-date, .contact-option .label, .modal-kicker, .back-link, .article-hero .meta { font-family: var(--sans); font-weight: 600; font-size: var(--fs-label); line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; } /* Preços (Fase 2): algarismos tabulares e alinhados */ .price { font-variant-numeric: tabular-nums lining-nums; font-size: 20px; line-height: 1.2; } /* Texto só para leitores de ecrã */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Link "Saltar para o conteúdo": invisível até receber foco pelo teclado */ .skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--bone); color: var(--ink); padding: 12px 18px; font-size: 15px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 16px; } main:focus, main[tabindex]:focus-visible { outline: none; } /* Anel de foco visível em latão em todos os elementos interativos */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } input[type="checkbox"]:focus-visible { outline-offset: 2px; } .kicker { color: var(--brass); } .page-home .teaser-link, .page-marca .teaser-link { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); text-decoration: underline; font-size: var(--fs-secondary); margin-top: 8px; transition: color 0.2s ease; } .page-home .teaser-link:hover, .page-marca .teaser-link:hover, .page-home .teaser-link:hover .arrow, .page-marca .teaser-link:hover .arrow { color: var(--brass); } /* ---------- 3. Cabeçalho e menu móvel ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--ink); border-bottom: 1px solid var(--line); } .site-header__bar { display: flex; align-items: center; flex-wrap: wrap; column-gap: 32px; min-height: 88px; } .brand-mark { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: var(--bone); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; } .site-nav { display: flex; gap: 32px; } .site-nav a, .site-header__meta a, .site-header__meta .origin-tag { color: var(--bone-dim); text-decoration: none; transition: color 0.2s ease; display: inline-flex; align-items: center; min-height: 44px; } .site-header__meta .insta-link { font-size: var(--fs-label); letter-spacing: 0.05em; } .site-nav a:hover, .site-header__meta a:hover { color: var(--bone); } .site-nav a[aria-current="page"] { color: var(--bone); } .site-header__meta { display: flex; align-items: center; gap: 32px; } .site-header__meta .lang-link { min-width: 44px; justify-content: center; } .menu-toggle { display: none; } /* ---------- 4. Rodapé ---------- */ .site-footer { padding: 48px 0; border-top: 1px solid var(--line); font-size: var(--fs-label); line-height: 1.6; color: var(--bone-dim); } .page-colecao .site-footer { margin-top: 96px; } .site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; } .brand-seal { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; } .brand-seal svg, .brand-seal img { display: block; width: 100%; height: 100%; } .legal-id { text-align: center; max-width: 70ch; } .footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; width: 100%; } .site-footer a { text-decoration: none; color: inherit; transition: color 0.2s ease; } .site-footer a:hover { color: var(--brass); } .site-footer .footer-links a, .site-footer .legal-id a { text-decoration: underline; } /* ---------- 5. Página inicial ---------- */ .hero { padding: 112px 0 104px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; position: relative; z-index: 1; } .hero-inner { min-width: 0; opacity: 0; animation: rise 1s ease-out 0.15s forwards; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .hero .kicker { margin-bottom: 24px; } .hero h1 { margin-bottom: 32px; } .hero h1 em { font-style: italic; font-weight: 500; color: var(--brass); } .hero p.sub { font-size: var(--fs-body); color: var(--bone-dim); max-width: 46ch; margin-bottom: 8px; } .rule { width: 64px; height: 1px; background: var(--brass); border: none; margin: 40px 0; } .hero-campaign-image { position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: flex-start; padding: 20px; } .hero-campaign-image img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; position: absolute; inset: 0; } .capture { display: flex; max-width: 440px; border-bottom: 1px solid var(--line); } .capture input { flex: 1; min-width: 0; background: transparent; border: none; padding: 12px 0; color: var(--bone); font-family: var(--sans); font-size: 16px; } .capture input::placeholder { color: var(--bone-dim); } .capture button { background: var(--bone); border: none; border-radius: 0; color: var(--ink); cursor: pointer; padding: 14px 22px; white-space: nowrap; transition: background-color 0.2s ease; } .capture button:hover { background: var(--brass); } .capture button:disabled { cursor: progress; background: var(--bone-dim); } .hp-field { display: none; } .capture-note { font-size: var(--fs-secondary); line-height: 1.55; color: var(--bone-dim); margin-top: 16px; } .confirm-msg { display: none; font-size: var(--fs-secondary); color: var(--brass); margin-top: 16px; } .confirm-msg.is-visible { display: block; } .waitlist-error { font-size: var(--fs-secondary); color: var(--error); margin-top: 16px; max-width: 440px; } .consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; max-width: 440px; } .consent-row input[type="checkbox"] { margin-top: 4px; accent-color: var(--brass); flex-shrink: 0; } .consent-row label { font-size: var(--fs-label); color: var(--bone-dim); line-height: 1.5; } .consent-row a { color: var(--brass); text-decoration: underline; } .philosophy { padding: 104px 0; border-top: 1px solid var(--line); } .philosophy-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; } .philosophy .kicker { margin-bottom: 24px; } .philosophy .body p { color: var(--bone-dim); font-size: var(--fs-body); margin-bottom: 24px; max-width: 52ch; } .philosophy .body em { font-style: italic; color: var(--bone); } /* Três pilares alinhados à esquerda */ .pillars { padding: 96px 0 112px; border-top: 1px solid var(--line); } .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .pillar { padding-top: 24px; border-top: 1px solid var(--line); text-align: left; } .pillar h3 { margin-bottom: 12px; } .pillar p { color: var(--bone-dim); font-size: var(--fs-secondary); line-height: 1.55; max-width: 32ch; } /* ---------- 6. Coleção ---------- */ .section-head { padding: 96px 0 16px; } .section-head .kicker { margin-bottom: 24px; } .section-head h1, .section-head h2 { max-width: 22ch; } .index-list { border-top: 1px solid var(--line); margin-top: 48px; } .index-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding-left 0.25s ease; /* repor o estilo de botão */ width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; font: inherit; line-height: inherit; text-align: left; } .index-row:hover { padding-left: 12px; } .index-thumb { display: block; width: 72px; height: 72px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); } .index-thumb picture { display: block; width: 100%; height: 100%; } .index-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .index-name-group { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; } .index-num { font-family: var(--serif); font-style: italic; color: var(--bone-dim); font-size: 17px; } .index-name { transition: color 0.2s ease; } .index-tag { color: var(--bone-dim); font-size: var(--fs-secondary); line-height: 1.55; } .index-arrow { color: var(--bone-dim); font-size: 20px; transition: transform 0.25s ease, color 0.25s ease; } .index-row:hover .index-arrow, .index-row:focus-visible .index-arrow { transform: translateX(4px); color: var(--brass); } .index-row:hover .index-name { color: var(--brass); } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6,7,4,0.9); z-index: 100; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal-box { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); max-width: 640px; width: 100%; display: grid; grid-template-columns: 0.8fr 1fr; max-height: 85vh; overflow: hidden; } .modal-box:focus { outline: none; } .modal-image { aspect-ratio: 4/5; overflow: hidden; } .modal-image picture { display: block; width: 100%; height: 100%; } .modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-info { padding: 40px 32px; position: relative; overflow-y: auto; } .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; background: none; border: none; color: var(--bone-dim); font-size: 22px; cursor: pointer; transition: color 0.2s ease; } .modal-close:hover { color: var(--bone); } .modal-kicker { color: var(--brass); margin-bottom: 12px; } .modal-info h3 { margin-bottom: 16px; } .modal-desc { color: var(--bone-dim); font-size: var(--fs-secondary); line-height: 1.55; margin-bottom: 24px; } .modal-spec-list { list-style: none; } .modal-spec-list li { font-size: var(--fs-secondary); line-height: 1.55; color: var(--bone-dim); padding: 8px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums lining-nums; } .modal-spec-list li span:first-child { color: var(--bone); } body.modal-open { overflow: hidden; } /* ---------- 7. Marca, Contacto, Journal ---------- */ .page-hero { padding: 120px 0 96px; border-bottom: 1px solid var(--line); } .page-hero h1 { max-width: 18ch; } .page-journal .page-hero h1 { max-width: 20ch; } /* Itálico em latão só no h1 da página inicial */ .page-hero h1 em { font-style: normal; color: inherit; } .page-hero p { color: var(--bone-dim); font-size: var(--fs-body); max-width: 50ch; margin-top: 24px; } .page-hero p.sub { max-width: 52ch; } /* Marca */ .page-marca .section { padding: 96px 0; border-bottom: 1px solid var(--line); } .page-marca .section.section--last { border-bottom: none; } .section-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; } .page-marca .section h2 { max-width: 16ch; } .page-marca .section .body p { color: var(--bone-dim); font-size: var(--fs-body); margin-bottom: 24px; max-width: 62ch; } .page-marca .section .body em { font-style: italic; color: var(--bone); } .page-marca .section .body strong { color: var(--bone); font-weight: 600; } .page-marca .teaser-link { margin-top: 16px; } /* Contacto: perguntas frequentes com

*/ .faq-section { padding: 96px 0; border-bottom: 1px solid var(--line); } .faq-list { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; transition: color 0.2s ease; } .faq-q::-webkit-details-marker { display: none; } .faq-q::marker { content: ""; } .faq-q:hover { color: var(--brass); } .faq-q .plus { color: var(--brass); font-size: 22px; flex-shrink: 0; transition: transform 0.25s ease; } .faq-item[open] .faq-q .plus { transform: rotate(45deg); } .faq-a p { color: var(--bone-dim); font-size: var(--fs-body); padding: 0 0 24px; max-width: 62ch; } .contact-section { padding: 96px 0; } .contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; } .contact-section h2 { max-width: 16ch; } .contact-options { display: flex; flex-direction: column; gap: 32px; } .contact-option { border-top: 1px solid var(--line); padding-top: 16px; } .contact-option .label { color: var(--bone-dim); margin-bottom: 8px; } .contact-option a { font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; transition: color 0.2s ease; } .contact-option a:hover { color: var(--brass); } .contact-option p.note { color: var(--bone-dim); font-size: var(--fs-secondary); line-height: 1.55; margin-top: 8px; max-width: 46ch; } /* Journal (lista de artigos) */ .page-journal .section { padding: 72px 0; } .article-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); } .article-card { background: var(--ink); padding: 40px 0; display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: baseline; } .article-card .date, .article-card .article-date { color: var(--bone-dim); } .article-card h2 { margin-bottom: 8px; } .article-card h2 a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .article-card h2 a:hover { color: var(--brass); } .article-card p { color: var(--bone-dim); font-size: var(--fs-secondary); line-height: 1.55; max-width: 62ch; margin-bottom: 12px; } .article-card a.read-link { color: var(--bone); text-decoration: underline; font-size: var(--fs-secondary); } .article-card a.read-link:hover { color: var(--brass); } .empty-state { padding: 48px 0; color: var(--bone-dim); font-size: var(--fs-body); max-width: 62ch; } /* ---------- 8. Artigos do journal ---------- */ .article-wrap { max-width: 760px; } .article-hero { padding: 96px 0 48px; border-bottom: 1px solid var(--line); } .article-hero h1 { margin-bottom: 24px; } .article-hero .meta { color: var(--bone-dim); } .article-body { padding: 64px 0 40px; } .article-body p { color: var(--bone-dim); font-size: var(--fs-body); margin-bottom: 24px; max-width: 62ch; } .article-body h2 { color: var(--bone); margin: 48px 0 24px; } .article-body h3 { color: var(--bone); margin: 32px 0 12px; } .article-body strong { color: var(--bone); font-weight: 600; } .article-body em { font-style: italic; color: var(--bone); } .article-body ul { margin: 0 0 24px 22px; color: var(--bone-dim); font-size: var(--fs-body); max-width: 62ch; } .article-body li { color: var(--bone-dim); font-size: var(--fs-body); margin-bottom: 8px; } .pull-quote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: var(--fs-h3); line-height: 1.35; color: var(--bone); border-left: 1px solid var(--brass); padding: 4px 0 4px 24px; margin: 40px 0; } .article-footnote { font-size: var(--fs-secondary); line-height: 1.55; color: var(--bone-dim); border-top: 1px solid var(--line); padding-top: 24px; margin-top: 40px; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 40px; } .product-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .product-card .card-label { color: var(--brass); margin-bottom: 8px; } .product-card h3 { color: var(--bone); margin: 0 0 8px; } .product-card p { font-size: var(--fs-secondary); line-height: 1.55; margin-bottom: 0; } .cta-box { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; margin: 48px 0; } .cta-box p { margin-bottom: 16px; } .cta-box a.teaser-link { color: var(--bone); text-decoration: underline; font-size: var(--fs-body); transition: color 0.2s ease; } .cta-box a.teaser-link:hover { color: var(--brass); } .back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; color: var(--bone-dim); text-decoration: none; transition: color 0.2s ease; } .back-link:hover { color: var(--brass); } /* ---------- 9. Páginas legais e 404 ---------- */ .legal { padding: 112px 0 104px; } .legal h1 { margin-bottom: 48px; } .legal .body { max-width: 68ch; } .legal .body p { color: var(--bone-dim); font-size: var(--fs-body); margin-bottom: 16px; } .legal .body em { font-style: italic; color: var(--bone); } .legal .body h2 { color: var(--brass); margin: 40px 0 12px; } .legal .body a, .also a { color: var(--brass); text-decoration: underline; } .legal .body ul { margin: 0 0 16px 1.2em; color: var(--bone-dim); font-size: var(--fs-body); } .legal .body li { margin-bottom: 8px; } .legal .body strong { color: var(--bone); font-weight: 600; } .legal .body .updated { font-size: var(--fs-secondary); } .legal .body mark.todo { background: #5a2a1c; color: #F3D9C8; padding: 0 4px; } .also { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-secondary); color: var(--bone-dim); max-width: 68ch; } /* ---------- 10. Responsivo ---------- */ @media (max-width: 1100px) { .site-header__bar { column-gap: 20px; } .site-nav, .site-header__meta { gap: 20px; } } @media (max-width: 960px) { /* Menu móvel (sem JavaScript, os links ficam visíveis numa segunda linha) */ .site-header__bar { min-height: 0; padding-top: 10px; padding-bottom: 10px; column-gap: 12px; } .site-nav { order: 5; flex-basis: 100%; flex-wrap: wrap; gap: 0 20px; padding-bottom: 8px; } .js .site-nav { display: none; flex-direction: column; gap: 0; padding: 4px 0 12px; } .js .site-header.is-open .site-nav { display: flex; } .js .site-nav a { min-height: 44px; border-top: 1px solid var(--line); } .js .menu-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; min-height: 44px; min-width: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--bone); cursor: pointer; } .site-header__meta { gap: 16px; order: 4; } } @media (max-width: 900px) { .hero { padding: 72px 0 80px; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .philosophy, .pillars, .page-marca .section, .faq-section, .contact-section { padding: 72px 0; } .page-hero { padding: 80px 0 64px; } .section-head { padding-top: 72px; } .philosophy-grid { grid-template-columns: 1fr; gap: 32px; } .pillars-grid { grid-template-columns: 1fr; gap: 32px; } .section-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; } .legal { padding: 72px 0; } .article-hero { padding: 72px 0 40px; } } @media (max-width: 860px) { .modal-box { grid-template-columns: 1fr; overflow-y: auto; } .modal-image { aspect-ratio: auto; height: 38vh; } .modal-info { overflow: visible; } } @media (max-width: 700px) { .article-card { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .wrap, .shell { padding-left: 24px; padding-right: 24px; } .site-header__meta .origin-tag, .site-header__meta .insta-link { display: none; } .brand-mark { font-size: 20px; } .index-row { grid-template-columns: 56px 1fr auto; gap: 16px; } .index-thumb { width: 56px; height: 56px; } .footer-row { flex-direction: column; align-items: center; text-align: center; } .modal-info { padding: 32px 24px; } .capture button { padding: 14px 16px; } } @media (prefers-reduced-motion: reduce) { .hero-inner { animation: none; opacity: 1; } html { scroll-behavior: auto; } .index-row, .index-arrow, .faq-q .plus, .index-name { transition: none; } }