{"id":198,"date":"2026-05-24T16:10:20","date_gmt":"2026-05-24T16:10:20","guid":{"rendered":"https:\/\/thalagraph.studio\/?page_id=198"},"modified":"2026-05-24T22:15:17","modified_gmt":"2026-05-24T22:15:17","slug":"home","status":"publish","type":"page","link":"https:\/\/thalagraph.studio\/br\/","title":{"rendered":"Home"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"198\" class=\"elementor elementor-198\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0bc253 e-con-full e-flex e-con e-parent\" data-id=\"d0bc253\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84a8ff1 elementor-widget elementor-widget-html\" data-id=\"84a8ff1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- THALAGRAPH Home | Cole no widget HTML do Elementor. JS vai no Custom Code (index-JS.txt). -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@200;300;400&display=swap\" rel=\"stylesheet\">\n\n<style>\n    \/* ============== RESET & BASE ============== *\/\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    html { scroll-behavior: smooth; }\n    body {\n      font-family: 'Inter', sans-serif;\n      font-weight: 300;\n      background: #F5F0E6;\n      color: #1B2A36;\n      line-height: 1.7;\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale;\n      overflow-x: hidden;\n    }\n    img { max-width: 100%; display: block; }\n\n    \/* ============== TOKENS ============== *\/\n    :root {\n      --ink: #1B2A36;\n      --ink-deep: #0D1820;\n      --paper: #F5F0E6;\n      --paper-warm: #EEE7D6;\n      --gold: #B89968;          \/* dourado patina \u2014 uso SOBRE azul-marinho *\/\n      --gold-light: #D4B584;    \/* dourado mais claro \u2014 uso SOBRE azul-marinho *\/\n      --gold-dark: #8A6B3D;     \/* bronze escuro \u2014 uso SOBRE bege (contraste alto) *\/\n      --muted: #5A6571;         \/* texto secund\u00e1rio \u2014 escurecido para mais contraste *\/\n      --line: rgba(138, 107, 61, 0.3);\n      --serif: 'Cormorant Garamond', 'Times New Roman', serif;\n      --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;\n    }\n\n    \/* ============== TIPOGRAFIA ============== *\/\n    .eyebrow {\n      font-family: var(--sans);\n      font-size: 12px;\n      letter-spacing: 0.32em;\n      text-transform: uppercase;\n      font-weight: 500;\n      color: var(--gold-dark);\n    }\n    .display {\n      font-family: var(--serif);\n      font-weight: 300;\n      line-height: 1.15;\n      letter-spacing: -0.005em;\n    }\n    .display em { font-style: italic; color: var(--gold-dark); font-weight: 300; }\n    a { color: inherit; text-decoration: none; }\n    .link-line {\n      font-family: var(--sans);\n      font-size: 12px;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      font-weight: 500;\n      color: var(--gold-dark);\n      padding-bottom: 5px;\n      border-bottom: 1px solid var(--gold-dark);\n      display: inline-block;\n      transition: padding 0.4s ease, letter-spacing 0.4s ease;\n    }\n    .link-line:hover { padding-bottom: 9px; letter-spacing: 0.34em; }\n\n    \/* ============== NAV ============== *\/\n    nav.top {\n      position: fixed; top: 0; left: 0; right: 0; z-index: 100;\n      display: flex; justify-content: space-between; align-items: center;\n      padding: 26px 56px;\n      transition: background 0.5s ease, padding 0.5s ease;\n    }\n    nav.top.scrolled {\n      background: rgba(245, 240, 230, 0.92);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      padding: 18px 56px;\n      border-bottom: 0.5px solid var(--line);\n    }\n    nav.top .brand {\n      font-family: var(--sans);\n      font-size: 11px;\n      letter-spacing: 0.32em;\n      color: rgba(245, 240, 230, 0.95);\n      font-weight: 500;\n    }\n    nav.top.scrolled .brand { color: var(--ink); }\n    nav.top ul {\n      list-style: none; display: flex; gap: 36px;\n    }\n    nav.top ul a {\n      font-family: var(--sans);\n      font-size: 11px;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      color: rgba(245, 240, 230, 0.88);\n      font-weight: 400;\n      transition: color 0.3s;\n    }\n    nav.top.scrolled ul a { color: var(--ink); font-weight: 500; }\n    nav.top ul a:hover { color: var(--gold-light); }\n    nav.top.scrolled ul a:hover { color: var(--gold-dark); }\n\n    \/* hamb\u00farguer \u2014 escondido no desktop *\/\n    .nav-toggle {\n      display: none;\n      flex-direction: column; justify-content: center; gap: 5px;\n      width: 30px; height: 30px; padding: 0;\n      background: none; border: none; cursor: pointer; z-index: 110;\n    }\n    .nav-toggle span {\n      display: block; height: 1.5px; width: 24px;\n      background: rgba(245, 240, 230, 0.95);\n      transition: transform 0.4s cubic-bezier(.2,.6,.2,1), opacity 0.3s, background 0.5s;\n    }\n    nav.top.scrolled .nav-toggle span { background: var(--ink); }\n    nav.top.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }\n    nav.top.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }\n    nav.top.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }\n\n    \/* ============== HERO ============== *\/\n    .hero {\n      position: relative;\n      width: 100%;\n      height: 100vh;\n      height: 100svh;   \/* small viewport: ignora barra do navegador, evita faixa embaixo *\/\n      min-height: 600px;\n      overflow: hidden;\n      background: #0D1820;\n      display: flex;\n    }\n    .hero-img {\n      position: absolute; inset: 0;\n      width: 100% !important; height: 100% !important;\n      max-width: none !important; max-height: none !important;\n      object-fit: cover; object-position: center;\n      animation: heroIn 2.4s cubic-bezier(.2,.6,.2,1) both;\n    }\n    .hero-vignette {\n      position: absolute; inset: 0;\n      background:\n        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 60%),\n        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 25%, transparent 60%, rgba(13,24,32,0.35) 100%);\n      pointer-events: none;\n    }\n    .hero-logo {\n      position: absolute; top: 50%; left: 50%;\n      transform: translate(-50%, -50%);\n      width: 280px; max-width: 60vw;\n      opacity: 0;\n      animation: logoIn 2.2s ease 0.5s forwards;\n      filter: drop-shadow(0 4px 30px rgba(0,0,0,0.35));\n    }\n    .hero-footnote {\n      position: absolute; bottom: 44px; left: 0; right: 0;\n      text-align: center;\n      font-family: var(--sans);\n      font-size: 11px;\n      letter-spacing: 0.18em;\n      color: rgba(245, 240, 230, 0.7);\n      font-weight: 300;\n      opacity: 0;\n      animation: fadeUp 1.6s ease 1.6s forwards;\n    }\n    .hero-scroll {\n      position: absolute; bottom: 26px; left: 50%;\n      transform: translateX(-50%);\n      opacity: 0;\n      animation: dropFadeIn 1s ease 2.4s forwards;\n    }\n    .hero-drop {\n      display: block;\n      animation: dropFall 2.6s cubic-bezier(.4,0,.2,1) 3s infinite;\n    }\n\n    @keyframes heroIn { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n    @keyframes logoIn {\n      from { opacity: 0; transform: translate(-50%, -46%); letter-spacing: 0.5em; }\n      to   { opacity: 1; transform: translate(-50%, -50%); }\n    }\n    @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }\n    @keyframes dropFadeIn { from { opacity: 0; } to { opacity: 0.9; } }\n    @keyframes dropFall {\n      0%   { transform: translateY(0); opacity: 0.3; }\n      20%  { opacity: 0.9; }\n      60%  { transform: translateY(10px); opacity: 0.6; }\n      100% { transform: translateY(16px); opacity: 0; }\n    }\n\n    \/* ============== SE\u00c7\u00d5ES BASE ============== *\/\n    section { padding: 140px 56px; position: relative; }\n    .container-narrow { max-width: 720px; margin: 0 auto; }\n\n    \/* === MANIFESTO === *\/\n    .manifesto {\n      text-align: center;\n      padding: 160px 56px 130px;\n    }\n    .manifesto .eyebrow { margin-bottom: 28px; display: inline-block; }\n    .manifesto h2 {\n      font-size: clamp(32px, 3.8vw, 50px);\n      max-width: 820px; margin: 0 auto 36px;\n    }\n    .manifesto .lead {\n      font-family: var(--serif);\n      font-size: 22px; font-style: italic;\n      color: var(--muted);\n      max-width: 620px; margin: 0 auto;\n      line-height: 1.7;\n    }\n    .greek-row {\n      display: flex; justify-content: center; gap: 64px;\n      margin-top: 56px;\n      font-family: var(--serif);\n      font-size: 17px; font-style: italic;\n      color: var(--muted);\n    }\n    .greek-row span strong {\n      font-weight: 500; font-style: normal;\n      color: var(--gold-dark);\n      letter-spacing: 0.05em;\n      margin-right: 8px;\n    }\n\n    \/* === DROPS OF HOPE === *\/\n    .drops {\n      background: var(--ink);\n      color: var(--paper);\n      padding: 150px 56px;\n    }\n    .drops-grid {\n      display: grid;\n      grid-template-columns: 1.05fr 1fr;\n      gap: 80px;\n      align-items: center;\n      max-width: 1180px;\n      margin: 0 auto;\n    }\n    .drops .book-frame {\n      position: relative;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n    .drops .book-frame img {\n      width: 100%;\n      height: auto;\n      display: block;\n      filter: contrast(1.03) saturate(1.02);\n    }\n    .drops .text .eyebrow { color: var(--gold-light); margin-bottom: 28px; display: inline-block; }\n    .drops h2 {\n      font-family: var(--serif);\n      font-size: clamp(32px, 3.5vw, 46px);\n      font-weight: 300;\n      line-height: 1.15;\n      margin-bottom: 32px;\n    }\n    .drops h2 em { font-style: italic; color: var(--gold-light); }\n    .drops p {\n      font-size: 15px;\n      line-height: 1.95;\n      color: rgba(245, 240, 230, 0.78);\n      margin-bottom: 18px;\n      max-width: 480px;\n    }\n    .drops p em { color: var(--gold-light); font-style: italic; }\n    .drops .actions {\n      display: flex; gap: 32px; align-items: center;\n      margin-top: 42px; flex-wrap: wrap;\n    }\n    .drops .link-line { color: var(--gold-light); border-color: var(--gold-light); }\n\n    \/* === ENDORSEMENTS === *\/\n    .endorse {\n      background: var(--ink);\n      color: var(--paper);\n      padding: 100px 56px 150px;\n    }\n    .endorse-intro {\n      text-align: center;\n      max-width: 620px;\n      margin: 0 auto 70px;\n    }\n    .endorse-intro .eyebrow {\n      color: var(--gold-light);\n      margin-bottom: 24px; display: inline-block;\n    }\n    .endorse-intro h3 {\n      font-family: var(--serif);\n      font-size: clamp(24px, 2.6vw, 32px);\n      font-weight: 300;\n      font-style: italic;\n      line-height: 1.3;\n      color: var(--paper);\n    }\n    .endorse-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 48px;\n      max-width: 1180px;\n      margin: 0 auto;\n    }\n    .endorse-card { }\n    .endorse-photo {\n      aspect-ratio: 4\/5;\n      margin-bottom: 28px;\n      position: relative;\n      overflow: hidden;\n      border-radius: 2px;\n      background: #0A1620;\n    }\n    .endorse-photo img {\n      width: 100%; height: 100%;\n      object-fit: cover;\n      transition: transform 1.2s cubic-bezier(.2,.6,.2,1);\n    }\n    .endorse-photo:hover img { transform: scale(1.03); }\n    .endorse-card .who {\n      font-family: var(--serif);\n      font-size: 26px;\n      font-weight: 300;\n      font-style: italic;\n      color: var(--gold-light);\n      margin-bottom: 8px;\n    }\n    .endorse-card .role {\n      font-family: var(--sans);\n      font-size: 13px;\n      letter-spacing: 0.22em;\n      text-transform: uppercase;\n      color: rgba(245, 240, 230, 0.75);\n      font-weight: 500;\n      margin-bottom: 22px;\n    }\n    .endorse-card .quote {\n      font-family: var(--serif);\n      font-size: 19px;\n      font-style: italic;\n      line-height: 1.65;\n      color: rgba(245, 240, 230, 0.92);\n      max-width: 480px;\n    }\n\n    \/* === PILARES === *\/\n    .pillars { padding: 140px 56px; background: var(--paper); }\n    .pillars-head {\n      text-align: center;\n      margin-bottom: 90px;\n    }\n    .pillars-head h2 {\n      font-family: var(--serif);\n      font-size: clamp(32px, 3.4vw, 42px);\n      font-weight: 300;\n      font-style: italic;\n      margin: 24px auto 0;\n      max-width: 680px;\n      line-height: 1.25;\n    }\n    .pillars-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 28px;\n      max-width: 1180px;\n      margin: 0 auto;\n    }\n    .pillar {\n      padding: 0;\n      transition: transform 0.6s cubic-bezier(.2,.6,.2,1);\n      cursor: pointer;\n      display: block;\n      text-decoration: none;\n      color: inherit;\n    }\n    .pillar:hover { transform: translateY(-6px); }\n    .pillar:hover .pillar-img img { transform: scale(1.04); }\n    \/* o link-line dentro do card reage ao hover do card inteiro *\/\n    .pillar:hover .link-line { padding-bottom: 9px; letter-spacing: 0.34em; }\n    .pillar-img {\n      position: relative;\n      aspect-ratio: 4\/5;\n      overflow: hidden;\n      border-radius: 2px;\n      margin-bottom: 26px;\n      background: #1B2A36;\n    }\n    .pillar-img img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 1.4s cubic-bezier(.2,.6,.2,1);\n    }\n    .pillar-img::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(180deg, rgba(13,24,32,0.25) 0%, transparent 35%, transparent 65%, rgba(13,24,32,0.45) 100%);\n      pointer-events: none;\n    }\n    .pillar-img .roman {\n      position: absolute;\n      top: 22px; left: 24px;\n      font-family: var(--serif);\n      font-style: italic;\n      font-size: 28px;\n      color: var(--gold-light);\n      font-weight: 400;\n      z-index: 2;\n      text-shadow: 0 2px 12px rgba(0,0,0,0.4);\n    }\n    .pillar-body {\n      padding: 0 6px;\n    }\n    .pillar .name {\n      font-family: var(--sans);\n      font-size: 12px;\n      letter-spacing: 0.28em;\n      color: var(--gold-dark);\n      font-weight: 500;\n      text-transform: uppercase;\n      margin-bottom: 14px;\n    }\n    .pillar h3 {\n      font-family: var(--serif);\n      font-size: 28px;\n      font-weight: 300;\n      font-style: italic;\n      line-height: 1.2;\n      margin-bottom: 22px;\n      color: var(--ink);\n    }\n    .pillar p {\n      font-size: 14.5px;\n      line-height: 1.85;\n      color: var(--muted);\n      margin-bottom: 28px;\n      min-height: 110px;\n    }\n    .pillar .pillar-status {\n      font-family: var(--sans);\n      font-size: 11px;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      color: var(--gold-dark);\n      font-weight: 500;\n      opacity: 0.85;\n      margin-top: 14px;\n    }\n\n    \/* === CONTATO === *\/\n    .contact {\n      background: var(--ink);\n      color: var(--paper);\n      padding: 140px 56px 100px;\n      text-align: center;\n    }\n    .contact .eyebrow { color: var(--gold-light); margin-bottom: 28px; display: inline-block; }\n    .contact h2 {\n      font-family: var(--serif);\n      font-size: clamp(34px, 4vw, 56px);\n      font-weight: 300;\n      font-style: italic;\n      line-height: 1.2;\n      max-width: 720px;\n      margin: 0 auto 24px;\n    }\n    .contact h2 em { color: var(--gold-light); }\n    .contact .subhead {\n      font-family: var(--serif);\n      font-size: 19px;\n      font-style: italic;\n      color: rgba(245, 240, 230, 0.78);\n      max-width: 540px;\n      margin: 0 auto 60px;\n      line-height: 1.7;\n    }\n    .calendly-wrap {\n      max-width: 1100px;\n      margin: 0 auto;\n      background: var(--paper);\n      border-radius: 4px;\n      overflow: hidden;\n      box-shadow: 0 30px 80px rgba(0,0,0,0.35);\n      border: 0.5px solid rgba(212, 181, 132, 0.2);\n    }\n    .calendly-inline-widget {\n      min-width: 320px;\n      height: 700px;\n      width: 100%;\n    }\n    .contact .fallback {\n      margin-top: 36px;\n      font-family: var(--sans);\n      font-size: 12px;\n      letter-spacing: 0.28em;\n      text-transform: uppercase;\n      color: rgba(245, 240, 230, 0.6);\n      font-weight: 400;\n    }\n    .contact .fallback a {\n      color: var(--gold-light);\n      border-bottom: 0.5px solid var(--gold-light);\n      padding-bottom: 2px;\n    }\n\n    \/* === FOOTER === *\/\n    footer {\n      background: var(--ink-deep);\n      color: rgba(245, 240, 230, 0.6);\n      padding: 56px;\n      border-top: 0.5px solid rgba(184, 153, 104, 0.18);\n    }\n    .footer-inner {\n      max-width: 1180px;\n      margin: 0 auto;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: 28px;\n    }\n    .footer-brand {\n      font-family: var(--serif);\n      font-size: 17px;\n      letter-spacing: 0.22em;\n      color: var(--gold-light);\n      font-weight: 400;\n    }\n    .footer-brand .sub {\n      display: block;\n      font-family: var(--sans);\n      font-size: 11px;\n      letter-spacing: 0.3em;\n      color: rgba(245, 240, 230, 0.55);\n      font-weight: 400;\n      margin-top: 8px;\n    }\n    .footer-links {\n      display: flex; gap: 26px;\n      font-family: var(--sans);\n      font-size: 12px;\n      letter-spacing: 0.26em;\n      text-transform: uppercase;\n      font-weight: 400;\n    }\n    .footer-links a { color: rgba(245, 240, 230, 0.8); transition: color 0.3s; }\n    .footer-links a:hover { color: var(--gold-light); }\n\n    \/* === REVEAL ON SCROLL === *\/\n    .reveal {\n      opacity: 0;\n      transform: translateY(28px);\n      transition: opacity 1.2s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1);\n      \/* fallback: se o JS n\u00e3o rodar, revela automaticamente ap\u00f3s 2.5s (site nunca fica invis\u00edvel) *\/\n      animation: revealFallback 0.01s linear 2.5s forwards;\n    }\n    .reveal.in { opacity: 1; transform: translateY(0); animation: none; }\n    @keyframes revealFallback { to { opacity: 1; transform: translateY(0); } }\n\n    \/* === RESPONSIVE === *\/\n    @media (max-width: 880px) {\n      nav.top { padding: 20px 28px; }\n      .nav-toggle { display: flex; }\n      \/* menu dropdown mobile *\/\n      nav.top ul {\n        position: fixed; top: 0; right: 0;\n        width: min(78vw, 320px); height: 100vh; height: 100dvh;\n        flex-direction: column; justify-content: center; gap: 28px;\n        padding: 0 40px;\n        background: rgba(13, 24, 32, 0.97);\n        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n        transform: translateX(100%);\n        transition: transform 0.5s cubic-bezier(.2,.6,.2,1);\n        box-shadow: -20px 0 60px rgba(0,0,0,0.4);\n      }\n      nav.top.menu-open ul { transform: translateX(0); }\n      nav.top ul a { color: rgba(245, 240, 230, 0.9); font-size: 13px; }\n      nav.top ul a:hover { color: var(--gold-light); }\n      \/* no mobile o menu \u00e9 sempre escuro, mesmo com nav 'scrolled' *\/\n      nav.top.scrolled ul a { color: rgba(245, 240, 230, 0.9); }\n      section, .drops, .invitation, .endorse, .pillars, .fineart-preview, .contact { padding-left: 28px; padding-right: 28px; }\n      .drops-grid, .invitation-grid { grid-template-columns: 1fr; gap: 50px; }\n      .pillars-grid { grid-template-columns: 1fr; gap: 48px; }\n      .endorse-grid { grid-template-columns: 1fr; gap: 60px; }\n      .fineart-grid { grid-template-columns: 1fr 1fr; }\n      .fineart-head { flex-direction: column; align-items: flex-start; gap: 20px; }\n      .hero-logo { width: 220px; }\n      .greek-row { flex-direction: column; gap: 14px; }\n    }\n  <\/style>\n\n<!-- ========= NAV ========= -->\n<nav class=\"top\" id=\"topnav\">\n  <div class=\"brand\">THALAGRAPH STUDIO<\/div>\n  <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Menu\" aria-expanded=\"false\">\n    <span><\/span><span><\/span><span><\/span>\n  <\/button>\n  <ul id=\"navMenu\">\n    <li><a href=\"#manifesto\">EST\u00daDIO<\/a><\/li>\n    <li><a href=\"#drops\">DROPS OF HOPE<\/a><\/li>\n    <li><a href=\"#pillars\">CRIA\u00c7\u00c3O<\/a><\/li>\n    <li><a href=\"\/br\/fine-art\/\">FINE ART<\/a><\/li>\n    <li><a href=\"#contact\">CONTATO<\/a><\/li>\n  <\/ul>\n<\/nav>\n\n<!-- ========= HERO ========= -->\n<section class=\"hero\">\n  <img decoding=\"async\" class=\"hero-img\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/hero-underwater.jpg\" alt=\"Cardume sob raios de luz, oceano\">\n  <div class=\"hero-vignette\"><\/div>\n  <img decoding=\"async\" class=\"hero-logo\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/lightlogo.png\" alt=\"Thalagraph Studio\">\n  <div class=\"hero-footnote\">Enraizado no Rio de Janeiro \u00b7 Em casa em todos os oceanos<\/div>\n  <div class=\"hero-scroll\" aria-hidden=\"true\">\n    <svg class=\"hero-drop\" width=\"16\" height=\"22\" viewbox=\"0 0 16 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path d=\"M8 1 C8 1 1 9.5 1 14.2 A7 7 0 0 0 15 14.2 C15 9.5 8 1 8 1 Z\" stroke=\"rgba(245,240,230,0.7)\" stroke-width=\"1\" fill=\"none\"\/>\n    <\/svg>\n  <\/div>\n<\/section>\n\n<!-- ========= MANIFESTO ========= -->\n<section class=\"manifesto\" id=\"manifesto\">\n  <div class=\"container-narrow reveal\">\n    <div class=\"eyebrow\">\u2014 O Est\u00fadio<\/div>\n    <h2 class=\"display\" style=\"margin-top: 28px;\">\n      Sem azul, sem verde<br><em>Sem hist\u00f3ria, sem empatia<\/em>\n    <\/h2>\n    <p class=\"lead\">\n      Thalagraph \u00e9 o encontro de duas palavras gregas. Thalassa, o mar. Graph\u00e9, o ato de criar. Vivemos no que existe entre elas -- no longo companheirismo com o oceano, e as hist\u00f3rias que emergem dele.\n    <\/p>\n    <div class=\"greek-row\">\n      <span><strong>\u03b8\u03ac\u03bb\u03b1\u03c3\u03c3\u03b1<\/strong>mar<\/span>\n      <span><strong>\u03b3\u03c1\u03b1\u03c6\u03ae<\/strong>criar<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========= DROPS OF HOPE ========= -->\n<section class=\"drops\" id=\"drops\">\n  <div class=\"drops-grid reveal\">\n    <div class=\"book-frame\">\n      <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/book-mockup.jpg\" alt=\"Drops of Hope, livro de Victor Bezerra\">\n    <\/div>\n    <div class=\"text\">\n      <div class=\"eyebrow\">\u2014 A Origem<\/div>\n      <h2>O oceano <em>salvou<\/em><br>minha vida.<\/h2>\n      <p>Em 1999, aos cinco anos de idade, eu sobrevivi ao c\u00e2ncer cerebral. Aos 10, no meu primeiro mergulho, descobri que o oceano n\u00e3o julga \u2014 e que no sil\u00eancio entre as ondas, tudo cura.<\/p>\n      <p class=\"translation-block\">Drops of Hope \u00e9 meu livro autoral, ainda n\u00e3o publicado, que apresenta essa passagem. Dele, nasceu o Thalagraph Studio \u2014 e tudo aquilo que criamos aqui.<\/p>\n      <div class=\"actions\">\n        <a href=\"https:\/\/heyzine.com\/flip-book\/0cdab3477e.html\" target=\"_blank\" rel=\"noopener\" class=\"link-line\">Folheie o livro \u2192<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========= ENDORSEMENTS \u2014 Sylvia & Paul ========= -->\n<section class=\"endorse\">\n  <div style=\"max-width: 240px; margin: 0 auto 70px; display: flex; align-items: center; gap: 14px;\">\n    <div style=\"height: 0.5px; flex: 1; background: rgba(184, 153, 104, 0.3);\"><\/div>\n    <svg width=\"40\" height=\"10\" viewbox=\"0 0 40 10\" fill=\"none\"><path d=\"M0 5 Q 10 0, 20 5 T 40 5\" stroke=\"#B89968\" stroke-width=\"0.8\" fill=\"none\"\/><\/svg>\n    <div style=\"height: 0.5px; flex: 1; background: rgba(184, 153, 104, 0.3);\"><\/div>\n  <\/div>\n  <div class=\"endorse-intro reveal\">\n    <div class=\"eyebrow\">\u2014 Entregue em m\u00e3os<\/div>\n    <h3>O livro chegou a duas das mais influentes vozes pelo oceano<\/h3>\n  <\/div>\n  <div class=\"endorse-grid reveal\">\n    <div class=\"endorse-card\">\n      <div class=\"endorse-photo\">\n        <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/sylvia-earle.jpg\" alt=\"Victor Bezerra entrega Drops of Hope para Dr. Sylvia Earle\">\n      <\/div>\n      <div class=\"who\">Dr. Sylvia Earle<\/div>\n      <div class=\"role\">Ocean\u00f3grafa \u00b7 Fundadora \u00b7 Mission Blue<\/div>\n      <div class=\"quote\">Lenda viva da oceanografia, a primeira Chefe Cientista da NOAA mulher, e Exploradora National Geographic in Residence.<\/div>\n    <\/div>\n    <div class=\"endorse-card\">\n      <div class=\"endorse-photo\">\n        <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/paul-watson.jpg\" alt=\"Victor Bezerra entrega Drops of Hope para Captain Paul Watson\">\n      <\/div>\n      <div class=\"who\">Captain Paul Watson<\/div>\n      <div class=\"role\">Fundador \u00b7 Sea Shepherd \u00b7 Captain Paul Watson Foundation<\/div>\n      <div class=\"quote\">Um dos mais influentes ativistas oce\u00e2nicos na hist\u00f3ria contempor\u00e2nea, cofundador do Greenpeace, Sea Shepherd e Captain Paul Watson Foundation.<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ========= PILARES ========= -->\n<section class=\"pillars\" id=\"pillars\">\n  <div class=\"pillars-head reveal\">\n    <div class=\"eyebrow\">\u2014 A Cria\u00e7\u00e3o<\/div>\n    <h2 class=\"translation-block\">De Drops of Hope, tr\u00eas maneiras \n<br>de escrever o oceano.<\/h2>\n  <\/div>\n  <div class=\"pillars-grid reveal\">\n    <a href=\"\/br\/ocean-chronicles\/\" class=\"pillar\">\n      <div class=\"pillar-img\">\n        <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/book-mockup.jpg\" alt=\"Ocean Chronicles \u2014 the hotel's book\">\n        <span class=\"roman\">i.<\/span>\n      <\/div>\n      <div class=\"pillar-body\">\n        <div class=\"name translation-block\">Cr\u00f4nicas Oce\u00e2nicas<\/div>\n        <h3>O livro editorial<\/h3>\n        <p>Resid\u00eancias autorais em hot\u00e9is profundamente conectados ao oceano. O resultado \u00e9 uma cr\u00f4nica fotogr\u00e1fica \u00fanica, produzida em edi\u00e7\u00e3o limitada.<\/p>\n        <span class=\"link-line\">Descubra<\/span>\n        <div class=\"pillar-status\">Primeira edi\u00e7\u00e3o em progresso<\/div>\n      <\/div>\n    <\/a>\n    <a href=\"\/br\/blue-narratives\/\" class=\"pillar\">\n      <div class=\"pillar-img\">\n        <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/case-blauw.jpg\" alt=\"Blue Narratives \u2014 brand storytelling by the water\">\n        <span class=\"roman\">ii.<\/span>\n      <\/div>\n      <div class=\"pillar-body\">\n        <div class=\"name translation-block\">Narrativas Azuis<\/div>\n        <h3>A marca em movimento<\/h3>\n        <p>Conte\u00fado audiovisual oce\u00e2nico para marcas que vivem no mar \u2014 curtas metragens, s\u00e9ries fotogr\u00e1ficas, e narrativas que se desenvolvem com o tempo.<\/p>\n        <span class=\"link-line\">Descubra<\/span>\n      <\/div>\n    <\/a>\n    <a href=\"\/br\/fine-art\/\" class=\"pillar\">\n      <div class=\"pillar-img\">\n        <img decoding=\"async\" src=\"https:\/\/thalagraph.studio\/wp-content\/uploads\/2026\/05\/fineart-room.jpg\" alt=\"Fine Art Prints \u2014 the sea on the wall\">\n        <span class=\"roman\">iii.<\/span>\n      <\/div>\n      <div class=\"pillar-body\">\n        <div class=\"name\">Impress\u00f5es Fine Art<\/div>\n        <h3>O mar na parede<\/h3>\n        <p>Fotografias autorais impressas em pap\u00e9is fine art, em edi\u00e7\u00f5es numeradas. Para colecionadores, arquitetura, e hotelaria.<\/p>\n        <span class=\"link-line\">Veja o portf\u00f3lio<\/span>\n      <\/div>\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- Ocean Chronicles e Fine Art Archive foram removidas para virarem p\u00e1ginas internas no WordPress -->\n\n<!-- ========= CONTATO ========= -->\n<section class=\"contact\" id=\"contact\">\n  <div class=\"reveal\">\n    <div class=\"eyebrow\">\u2014 Vamos conversar<\/div>\n    <h2>Nos conte sobre <em>o seu mar<\/em><\/h2>\n    <p class=\"subhead\">Uma introdu\u00e7\u00e3o de 30 minutos. Conte-nos sobre seu hotel, \n<br> seus h\u00f3spedes, e o mar que lhe rodeia.<\/p>\n  <\/div>\n\n  <div class=\"calendly-wrap reveal\">\n    <!-- TODO: substituir data-url pelo link real do Calendly do Victor -->\n    <div class=\"calendly-inline-widget\"\n         data-url=\"https:\/\/calendly.com\/thalagraph\/30min?hide_gdpr_banner=1&background_color=f5f0e6&text_color=1b2a36&primary_color=8a6b3d\"\n         style=\"min-width:320px;height:700px;\"><\/div>\n    \n  <\/div>\n\n  <div class=\"fallback reveal\">\n    ou escreva para <a href=\"mailto:victor@thalagraph.studio\">victor@thalagraph.studio<\/a>\n  <\/div>\n<\/section>\n\n<!-- ========= FOOTER ========= -->\n<footer>\n  <div class=\"footer-inner\">\n    <div class=\"footer-brand\">\n      THALAGRAPH\n      <span class=\"sub\">OCEAN STORYTELLING \u00b7 MMXXVI<\/span>\n    <\/div>\n    <div class=\"footer-links\">\n      <a href=\"https:\/\/instagram.com\/victorandtheocean\" target=\"_blank\" rel=\"noopener\">Instagram<\/a>\n      <a href=\"https:\/\/substack.com\/@theoceandispatch\" target=\"_blank\" rel=\"noopener\">Di\u00e1rio<\/a>\n      <a href=\"#contact\">Contato<\/a>\n    <\/div>\n  <\/div>\n<\/footer>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>THALAGRAPH STUDIO STUDIO DROPS OF HOPE CRAFT FINE ART CONTACT Rooted in Rio de Janeiro \u00b7 At home in every ocean \u2014 The Studio No blue, no green.No story, no care. Thalagraph is the meeting of two Greek words. Thalassa, the sea. Graph\u00e9, the act of inscribing. We live in what exists between them \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-198","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/pages\/198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/comments?post=198"}],"version-history":[{"count":19,"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/pages\/198\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/pages\/198\/revisions\/244"}],"wp:attachment":[{"href":"https:\/\/thalagraph.studio\/br\/wp-json\/wp\/v2\/media?parent=198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}