/* ========================================================================== Página do livro "Correspondências" (identidade visual de Ananda Aliardi) Vale para a página do livro e, durante a pré-venda, para carrinho e checkout (a classe .cc-pagina-livro é colocada no pelo functions.php). ========================================================================== */ /* Base: máquina de escrever, tinta e botões contornados --------------------- */ body.cc-pagina-livro { font-family: var(--wp--preset--font-family--maquina); font-size: 1.0625rem; line-height: 1.85; letter-spacing: 0.01em; color: var(--wp--preset--color--tinta); } .cc-pagina-livro :where(h1, h2, h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--maquina); color: var(--wp--preset--color--tinta); letter-spacing: 0.02em; line-height: 1.3; } .cc-pagina-livro a:where(:not(.wp-element-button)) { color: currentColor; } .cc-pagina-livro .wp-element-button, .cc-pagina-livro .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tinta); border: 1.5px solid var(--wp--preset--color--tinta); border-radius: 7px; padding: 0.7em 1.6em; font-family: var(--wp--preset--font-family--maquina); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; text-decoration: underline; } .cc-pagina-livro .wp-element-button:hover, .cc-pagina-livro .wp-element-button:focus-visible, .cc-pagina-livro .wp-block-button__link:hover, .cc-pagina-livro .wp-block-button__link:focus-visible { background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--papel); text-decoration: none; } .cc-pagina-livro .wp-element-button:focus-visible { outline: 2px solid var(--wp--preset--color--caneta); outline-offset: 3px; } /* Papel (texturas) ---------------------------------------------------------- */ body.cc-pagina-livro, .cc-kraft { background-color: var(--wp--preset--color--papel); background-image: url("../images/papel-kraft.webp"); background-size: 900px auto; } .cc-claro { background-color: var(--wp--preset--color--papel-claro); background-image: url("../images/papel-claro.webp"); background-size: 900px auto; } .cc-pagina-livro ::selection { background: var(--wp--preset--color--caneta); color: var(--wp--preset--color--papel-claro); } /* Estrutura das seções ------------------------------------------------------ */ .cc-livro .wp-block-post-content > .cc-secao { margin-block: 0; } .cc-secao { position: relative; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); scroll-margin-top: 0.5rem; } .cc-secao--junta { padding-top: 0; } .cc-titulo { margin-bottom: 0; } .cc-titulo img { height: auto; } .cc-justificado { hyphens: auto; } @media (min-width: 900px) { .cc-justificado, .cc-justificado p { text-align: justify; } } .cc-pequeno { font-size: var(--wp--preset--font-size--pequeno); line-height: 1.7; } /* Cabeçalho da página do livro --------------------------------------------- */ .cc-nav-livro__casa { margin: 0; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; } .cc-nav-livro__casa a { text-decoration: none; font-weight: 700; } .cc-nav-livro__casa a::before { content: "← "; } .cc-nav-livro__casa a:hover { text-decoration: underline; text-underline-offset: 0.35em; } .cc-nav-livro .wp-block-navigation-item__content { text-decoration: none; padding-block: 0.25rem; } .cc-nav-livro .wp-block-navigation-item__content:hover, .cc-nav-livro .wp-block-navigation-item__content:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; } @media (min-width: 782px) { .cc-header-livro { position: absolute; inset: 0 0 auto 0; z-index: 20; } .admin-bar .cc-header-livro { top: 32px; } } @media (max-width: 781px) { .cc-nav-livro .wp-block-navigation__container { justify-content: center; gap: 0.4rem 1.4rem; } .cc-nav-livro .wp-block-navigation { justify-content: center; } } /* 1. Abertura (hero) -------------------------------------------------------- */ .cc-hero { padding-top: 0; padding-bottom: var(--wp--preset--spacing--50); } .cc-hero .cc-hero-ilustracao img { width: 100%; max-width: 440px; height: auto; } .cc-hero .cc-titulo img { width: min(100%, 470px); } .cc-subtitulo { letter-spacing: 0.04em; } @media (min-width: 782px) { .cc-hero { min-height: min(88vh, 760px); display: flex; flex-direction: column; justify-content: center; } .cc-hero .cc-hero-ilustracao { align-self: flex-start; } } @media (max-width: 781px) { .cc-hero .wp-block-columns { flex-direction: column-reverse; } .cc-hero .cc-hero-ilustracao img { max-width: 260px; margin-inline: auto; display: block; } .cc-hero .wp-block-column { text-align: center; } .cc-hero .wp-block-buttons { justify-content: center; } .cc-hero .cc-titulo img { margin-inline: auto; } } /* 2. O livro ---------------------------------------------------------------- */ .cc-o-livro .cc-titulo img { width: min(100%, 300px); } /* 3. Chamada da pré-venda --------------------------------------------------- */ .cc-intro-pre-venda .cc-ilustracao img { width: min(100%, 400px); height: auto; margin-left: auto; display: block; } @media (max-width: 781px) { .cc-intro-pre-venda .cc-ilustracao img { margin-inline: auto; width: min(80%, 320px); } } /* 4. Quero ler (cards) ------------------------------------------------------ */ .cc-quero-ler .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); } .cc-card { text-align: center; } .cc-moldura { border: 1.5px solid var(--wp--preset--color--tinta); aspect-ratio: 205 / 340; width: min(100%, 230px); margin-inline: auto !important; padding: 1rem; display: flex; align-items: center; justify-content: center; } .cc-moldura img { width: 100%; height: 100%; object-fit: contain; } .cc-legenda { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; margin-top: 1.25rem !important; } .cc-card .wp-block-buttons { justify-content: center; } /* Janelas de leitura ("Quero ler") */ .cc-modal { display: none; } .cc-modal:target { display: block; position: fixed; inset: 0; z-index: 100; overflow: auto; padding: 5vh 1.25rem; background-color: var(--wp--preset--color--papel-claro); } dialog.cc-dialogo { width: min(760px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1.5px solid var(--wp--preset--color--tinta); border-radius: 8px; color: var(--wp--preset--color--tinta); background-color: var(--wp--preset--color--papel-claro); background-image: url("../images/papel-claro.webp"); background-size: 900px auto; box-shadow: 0 30px 80px rgb(26 23 20 / 0.35); } dialog.cc-dialogo::backdrop { background: rgb(26 23 20 / 0.55); } dialog.cc-dialogo .cc-modal { display: block; padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.5rem, 6vw, 3.75rem); } dialog.cc-dialogo .cc-modal h2 { font-size: var(--wp--preset--font-size--medio); margin-top: 0; text-transform: uppercase; letter-spacing: 0.06em; } .cc-dialogo__fechar { position: sticky; top: 0.75rem; float: right; margin: 0.75rem 0.75rem 0 0; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--wp--preset--color--tinta); border-radius: 50%; background: var(--wp--preset--color--papel-claro); color: var(--wp--preset--color--tinta); font: 700 1.5rem/1 var(--wp--preset--font-family--maquina); cursor: pointer; } .cc-dialogo__fechar:hover, .cc-dialogo__fechar:focus-visible { background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--papel-claro); } /* 5. A pré-venda (livro avulso) -------------------------------------------- */ .cc-pre-venda .cc-titulo img { width: min(100%, 300px); } .cc-caligrafia-lateral { display: none; } @media (min-width: 1100px) { .cc-pre-venda { padding-left: clamp(8rem, 13vw, 11rem); } .cc-caligrafia-lateral { display: block; position: absolute; left: clamp(1rem, 2vw, 2rem); bottom: 1.5rem; width: clamp(300px, 30vw, 390px); margin: 0 !important; pointer-events: none; } .cc-caligrafia-lateral img { width: 100%; height: auto; } } .cc-oferta .cc-preco { font-size: var(--wp--preset--font-size--grande); font-weight: 700; line-height: 1.1; margin-bottom: 0; } .cc-oferta .wp-block-separator { width: 100%; margin: 0.6rem 0 0.9rem !important; } .cc-oferta-titulo { font-weight: 700; font-size: 0.95rem; line-height: 1.55; margin-top: 0 !important; } .cc-oferta-descricao { font-style: italic; font-size: 0.82rem; line-height: 1.65; } .cc-preco-nota { font-size: 0.78rem; margin-top: 0.25rem !important; } .cc-estoque { display: inline-block; font-size: 0.78rem; letter-spacing: 0.03em; margin-top: 0.3rem; } .cc-estoque--esgotado { font-weight: 700; } .cc-capa-surpresa img { width: min(100%, 260px); height: auto; filter: drop-shadow(0 14px 18px rgb(26 23 20 / 0.28)); } @media (max-width: 781px) { .cc-capa-surpresa img { display: block; margin-inline: auto; width: min(70%, 240px); } } /* 6. Kits ------------------------------------------------------------------ */ .cc-caligrafia-passagem { margin-left: auto !important; margin-right: 0 !important; margin-bottom: 0 !important; width: min(100%, 470px); } .cc-caligrafia-passagem img { width: 100%; height: auto; } .cc-kits .wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); } .cc-oferta .cc-imagem-oferta img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgb(26 23 20 / 0.22)); } .cc-oferta { display: flex; flex-direction: column; } .cc-oferta > .wp-block-buttons { margin-top: auto; padding-top: 1rem; justify-content: center; } .cc-oferta-botao-inline > .wp-block-buttons { justify-content: flex-start; } /* Botões de compra esgotados */ .wp-block-button.cc-esgotado .wp-block-button__link { opacity: 0.55; cursor: not-allowed; text-decoration: line-through; pointer-events: none; } /* 7. Sobre a autora --------------------------------------------------------- */ .cc-autora .cc-titulo img { width: min(100%, 440px); } .cc-retrato img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .cc-bio { font-size: 0.92rem; line-height: 1.8; } /* 8. Conecte-se ------------------------------------------------------------- */ .cc-conecte .cc-titulo img { width: min(100%, 330px); } .cc-conecte-ilustracao img { width: min(100%, 460px); height: auto; } .cc-linha-curta.wp-block-separator { width: 190px; max-width: 100%; margin-left: 0 !important; border-top-width: 1.5px; } .cc-contatos a { font-weight: 700; text-decoration: none; } .cc-contatos a:hover, .cc-contatos a:focus-visible { text-decoration: underline; } @media (max-width: 781px) { .cc-conecte .wp-block-columns { flex-direction: column-reverse; } .cc-conecte-ilustracao img { width: min(75%, 320px); margin-inline: auto; display: block; } } /* Separadores (linha de caneta) -------------------------------------------- */ .cc-pagina-livro hr.wp-block-separator { border: none; border-top: 1.5px solid currentColor; background: none; opacity: 0.85; } /* Rodapé -------------------------------------------------------------------- */ .cc-rodape { border-top: 1px solid rgb(26 23 20 / 0.15); } .cc-rodape a { text-underline-offset: 0.25em; } /* Oferta no hero e barra de compra */ .cc-hero-oferta { font-family: var(--wp--preset--font-family--maquina); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--caneta); margin-top: 0.7rem !important; margin-bottom: 1.5rem !important; text-wrap: balance; } @media (max-width: 420px) { .cc-hero-oferta { font-size: 0.82rem; letter-spacing: 0.05em; } } .cc-barra-compra { position: fixed; inset: auto 0 0 0; z-index: 60; display: none; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.7rem 1rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); background-color: var(--wp--preset--color--papel); background-image: url("../images/papel-kraft.webp"); background-size: 900px auto; border-top: 1.5px solid var(--wp--preset--color--tinta); font-family: var(--wp--preset--font-family--maquina); transform: translateY(110%); transition: transform 0.25s ease; } .cc-barra-compra.esta-visivel { transform: none; } @media (prefers-reduced-motion: reduce) { .cc-barra-compra { transition: none; } } .cc-barra-compra__preco { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--tinta); line-height: 1.25; } .cc-barra-compra__preco strong { font-size: 1.05rem; } .cc-barra-compra .cc-barra-compra__botao { flex: 0 0 auto; background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--papel); border-radius: 7px; padding: 0.75em 1.2em; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .cc-barra-compra .cc-barra-compra__botao:hover, .cc-barra-compra .cc-barra-compra__botao:focus-visible { background: var(--wp--preset--color--caneta); color: var(--wp--preset--color--papel); } @media (max-width: 781px) { body.cc-pagina-livro .cc-barra-compra { display: flex; } body.cc-pagina-livro { padding-bottom: 4.5rem; } }