/* ======================================================== Bruna Dantas — Portfolio Tokens ======================================================== */ :root { --bg: #ffffff; --ink: #111111; --muted: #6f6f6f; --hair: #dcdcdc; --accent: #b5522f; /* thread-red, nod to "por um fio" embroidery */ --serif: "Georgia", "Iowan Old Style", "Times New Roman", serif; --display: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --gutter: 2.5rem; --gutter-mobile: 1.5rem; --content-max: 1440px; } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; position: relative; } /* Aura de fundo: gradiente muito dissolvido, da esquerda para a direita */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient( 100deg, rgb(224, 167, 131) -5%, rgb(255, 255, 255) 35%, rgb(203, 159, 153) 85%, rgb(146, 95, 95) 120% ), #ffffff; filter: blur(95px); } body.no-aura::before { display: none; } /* ======================================================== Aura personalizada por página de projeto Manchas ancoradas à direita (zona do texto), imagens à esquerda ficam brancas. As cores vêm de variáveis definidas no de cada página. ======================================================== */ body.aura-custom::before { display: block; /* reativa, mesmo com .no-aura presente */ content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(30% 45% at 100% 0%, var(--aura-1, #e0a488) 0%, transparent 68%), radial-gradient(28% 60% at 100% 50%, var(--aura-2, #ffe0d0) 0%, transparent 70%), radial-gradient(30% 45% at 100% 100%, var(--aura-3, #9e5d54) 0%, transparent 68%), #ffffff; filter: blur(75px); } a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; } a:hover { opacity: 0.5; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } b, strong { font-weight: 600; } .wrap { max-width: var(--content-max); margin: 0 auto; padding: 2rem var(--gutter) 2rem; } @media (max-width: 800px) { .wrap { padding: 1.5rem var(--gutter-mobile) 1.5rem; } .sidebar { margin-top: 8rem; /* respiro entre a lista de projetos e o "sobre mim" */ } } /* ======================================================== Landing page ======================================================== */ .landing-grid { display: grid; grid-template-columns: 1fr 30%; gap: var(--gutter); align-items: start; /* impede o grid de esticar as colunas, liberta espaço para o sticky */ } @media (max-width: 800px) { .landing-grid { grid-template-columns: 1fr; gap: var(--gutter-mobile); } } .site-title { font-size: 1rem; margin: 0 0 4rem 0; } .site-title b { font-weight: 700; } .project-list { font-size: 1.05rem; } .site-title a:hover { opacity: 1; } .project-list .label { font-size: 0.9rem; margin: -3.5rem 0 0.5rem 0; } .year-group { margin-top: 2.25rem; } .year-group:first-of-type { margin-top: 0; } .year { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.5rem 0; } .project-entry { margin: 0 0 0.5rem 0; font-size: 1.1rem; } .project-entry a { font-weight: 700; font-style: italic; } /* sidebar (versão fantasma dentro da grelha — reserva o espaço/largura, invisível) */ .sidebar { font-size: 0.78rem; visibility: hidden; } @media (max-width: 800px) { .sidebar { visibility: visible; } } /* sidebar fixa real — nunca acompanha o scroll, alinhada matematicamente com a coluna da grelha */ .sidebar-fixed-wrap { position: fixed; top: 2rem; left: 0; right: 0; pointer-events: none; z-index: 5; } .sidebar-fixed-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 30%; gap: var(--gutter); } .sidebar-fixed-inner .sidebar.sidebar-real { visibility: visible; pointer-events: auto; } @media (max-width: 800px) { .sidebar-fixed-wrap { display: none; } } .sidebar p { margin: 0 0 1rem 0; } .sidebar h2 { font-size: 0.85rem; margin: 1.5rem 0 0.4rem 0; } .sidebar h2:first-of-type { margin-top: 0; } .sidebar .links { margin-top: 1.5rem; } .sidebar .links a { display: block; font-weight: 700; margin-bottom: 0.15rem; } .sidebar .copyright { margin-top: 1.5rem; color: var(--muted); } /* ======================================================== Project page — sticky text / scrollable images ======================================================== */ .project-layout { display: grid; grid-template-columns: 1fr 22%; gap: var(--gutter); align-items: start; } .project-subtitle { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 0.9rem; margin: 2rem 0 0.75rem 0; } @media (max-width: 800px) { .project-layout { grid-template-columns: 1fr; gap: 2rem; } } .project-images { display: flex; flex-direction: column; gap: 1.5rem; } .project-images img, .project-images video, .project-images .placeholder { width: 100%; display: block; } /* imagens maiores em mobile — estica só a coluna das imagens para fora das margens */ @media (max-width: 800px) { .project-images { margin-left: -0.75rem; margin-right: -0.75rem; } } /* troca imagens desktop ↔ grelha mobile */ .image-mobile { display: none !important; } @media (max-width: 800px) { .images-desktop { display: none !important; } .image-mobile { display: block !important; width: 100%; } } .project-images .placeholder { aspect-ratio: 4 / 3; background: repeating-linear-gradient( 45deg, #f4f4f4, #f4f4f4 10px, #eaeaea 10px, #eaeaea 20px ); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.75rem; } /* Linha de imagens lado a lado dentro de .project-images */ .project-row { display: flex; gap: 0.5rem; align-items: flex-start; } .project-row > img, .project-row > video, .project-row > .placeholder { flex: 1 1 0; min-width: 0; } /* Coluna empilhada dentro de uma .project-row */ .project-col { display: flex; flex-direction: column; gap: 0.5rem; } .project-row > .project-col { flex: 1 1 0; min-width: 0; } /* em mobile, a linha desdobra-se e empilha */ @media (max-width: 800px) { .project-row { flex-direction: column; } } /* ======================================================== Leitor de vídeo com barra de progresso + som (discreto) ======================================================== */ .video-player { position: relative; } /* controlos por cima do vídeo, em baixo — só aparecem no hover */ .video-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: linear-gradient(to top, rgba(0,0,0,0.35), transparent); opacity: 0; transition: opacity 0.25s ease; } .video-player:hover .video-controls { opacity: 1; } /* barra de progresso */ .progress { flex: 1; height: 3px; background: rgba(255,255,255,0.3); cursor: pointer; border-radius: 2px; } .progress-filled { height: 100%; width: 0%; background: #fff; border-radius: 2px; } /* botão de som, alinhado na linha dos controlos */ .video-controls .sound-toggle { position: static; background: none; padding: 0; color: #fff; border: none; font-family: var(--sans); font-size: 0.7rem; cursor: pointer; white-space: nowrap; } /* texto do projeto — versão fantasma dentro da grelha, reserva espaço, invisível */ .project-text { visibility: hidden; font-size: 0.78rem; } .project-text p, .sidebar p { text-wrap: pretty; } @media (max-width: 800px) { .project-text { visibility: visible; } } /* texto do projeto — versão fixa real, nunca acompanha o scroll */ .project-text-fixed-wrap { position: fixed; top: 2rem; left: 0; right: 0; pointer-events: none; z-index: 5; } .project-text-fixed-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 22%; gap: var(--gutter); } .project-text-fixed-inner .project-text.project-text-real { visibility: visible; pointer-events: auto; } @media (max-width: 800px) { .project-text-fixed-wrap { display: none; } } .project-title { font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 1rem; margin: 0 0 1.25rem 0; } .project-title, .site-title { text-wrap: balance; } .project-text p { margin: 0 0 1rem 0; } .back-link { position: fixed; top: 1.5rem; left: 0.5rem; z-index: 10; font-size: 1.2rem; /* maior que antes (era 0.85rem) */ line-height: 0.8; color: var(--ink); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; } .project-cascade { margin-top: 12rem; } .project-cascade .project-entry { margin-bottom: 1.7rem; } @media (max-width: 800px) { .project-cascade { margin-top: 10rem; } @media (max-width: 800px) { .project-cascade .project-entry:nth-child(1) { margin-left: 5% !important; } /* por um fio */ .project-cascade .project-entry:nth-child(2) { margin-left: 5% !important; } /* o monstro */ .project-cascade .project-entry:nth-child(3) { margin-left: 75% !important; } /* Solveta */ .project-cascade .project-entry:nth-child(4) { margin-left: 60% !important; } /* indigo */ .project-cascade .project-entry:nth-child(5) { margin-left: 10% !important; } /* Tia Tina */ .project-cascade .project-entry:nth-child(6) { margin-left: 75% !important; } /* Stadion */ .project-cascade .project-entry:nth-child(7) { margin-left: 10% !important; } /* Conto */ } } @media (max-width: 800px) { .project-cascade .project-entry a { display: inline-block; animation: subtle-pulse 5s ease-in-out infinite; } } .project-cascade .project-entry a { white-space: nowrap; } @keyframes subtle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }