/* ========================================================================== favelabrass.org · Design system "O Relatório Vivo" (editorial dark) The ONLY stylesheet linked by public pages. Fonts (DM Sans + Fraunces) are loaded from the page via Google Fonts. ========================================================================== */ :root { --purple: #5A0E7A; --purple-dark: #3E0B59; --purple-deep: #2B0741; --purple-ink: #1F052F; --yellow: #FEF100; --green: #62CC3C; --white: #FFFFFF; /* Light interlude palette (cool lavender-white, NOT warm beige) */ --lav: #F3F0FA; --ink: #1F052F; --ink-dim: rgba(31, 5, 47, 0.74); --ink-faint: rgba(31, 5, 47, 0.64); --ink-rule: rgba(31, 5, 47, 0.16); --text: rgba(255, 255, 255, 0.94); --text-dim: rgba(255, 255, 255, 0.74); --text-faint: rgba(255, 255, 255, 0.48); --rule: rgba(255, 255, 255, 0.14); --rule-soft: rgba(255, 255, 255, 0.08); --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "Fraunces", Georgia, serif; --w-content: 1240px; --pad-x: clamp(1.25rem, 4vw, 3.5rem); --sp-section: clamp(5.5rem, 10vw, 9.5rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; } .cta a:focus-visible, .cta button:focus-visible { outline-color: var(--purple-ink); } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background-color: var(--purple-ink); background-image: radial-gradient(60% 32% at 88% 12%, rgba(90, 14, 122, 0.40) 0%, transparent 70%), radial-gradient(55% 26% at 4% 46%, rgba(90, 14, 122, 0.30) 0%, transparent 70%), radial-gradient(60% 24% at 92% 72%, rgba(62, 11, 89, 0.55) 0%, transparent 70%), linear-gradient(175deg, var(--purple-deep) 0%, var(--purple-ink) 55%, var(--purple-deep) 100%); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } /* ========================================================================== Bilingual toggle (PT default, body.en shows English) ========================================================================== */ .lang-en, .lang-de { display: none; } body.en .lang-pt, body.en .lang-de { display: none; } body.en .lang-en { display: inline; } body.de .lang-pt, body.de .lang-en { display: none; } body.de .lang-de { display: inline; } /* Segmented language control */ .nav-langs { display: inline-flex; border: 1px solid var(--rule); border-radius: 100px; overflow: hidden; } .nav-langs button { font-family: var(--font-sans); background: none; border: 0; cursor: pointer; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); padding: 0.4rem 0.68rem; transition: color 0.2s, background 0.2s; } .nav-langs button:hover { color: var(--yellow); } .nav-langs button.active { background: rgba(255, 255, 255, 0.14); color: var(--white); } /* ========================================================================== Film grain overlay, very quiet ========================================================================== */ .grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 2000; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== Navigation ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--pad-x); transition: background 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s; } .nav.scrolled { background: rgba(31, 5, 47, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-top: 0.7rem; padding-bottom: 0.7rem; box-shadow: 0 1px 0 var(--rule-soft); } .nav-logo img { height: 52px; transition: height 0.3s var(--ease); } .nav.scrolled .nav-logo img { height: 42px; } .nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); } .nav-links a { color: var(--text); text-decoration: none; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; position: relative; transition: color 0.2s; } .nav-links a:hover { color: var(--yellow); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--yellow); } .nav-links a.nav-cta { background: var(--yellow); color: var(--purple-ink); font-weight: 700; padding: 0.55rem 1.4rem; border-radius: 100px; transition: transform 0.2s var(--ease), box-shadow 0.2s; } .nav-links a.nav-cta:hover { color: var(--purple-ink); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(254, 241, 0, 0.25); } .nav-links a.nav-cta::after { display: none; } .nav-links a.nav-lang, .nav-links button.nav-lang { font-family: var(--font-sans); background: none; cursor: pointer; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-dim); border: 1px solid var(--rule); padding: 0.38rem 0.85rem; border-radius: 100px; transition: color 0.2s, border-color 0.2s; } .nav-links a.nav-lang:hover, .nav-links button.nav-lang:hover { color: var(--yellow); border-color: var(--yellow); } .nav-links a.nav-lang::after { display: none; } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 1002; } .nav-burger span { width: 24px; height: 2px; background: var(--white); transition: transform 0.25s var(--ease), opacity 0.2s; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-block; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; padding: 0.95rem 2.1rem; border-radius: 100px; transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s; } .btn-yellow { background: var(--yellow); color: var(--purple-ink); } .btn-yellow:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(254, 241, 0, 0.3); } .btn-ghost { color: var(--white); border: 1px solid rgba(255, 255, 255, 0.45); } .btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); transform: translateY(-3px); } /* Solid ink button (for use on the yellow CTA band) */ .btn-purple { background: var(--purple-ink); color: var(--yellow); } .btn-purple:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(31, 5, 47, 0.4); } /* Outlined ink button (secondary on the yellow CTA band) */ .btn-ink-ghost { color: var(--purple-ink); border: 1.5px solid rgba(31, 5, 47, 0.55); } .btn-ink-ghost:hover { border-color: var(--purple-ink); background: rgba(31, 5, 47, 0.07); transform: translateY(-3px); } /* ========================================================================== Animation: hero load-in + scroll reveal ========================================================================== */ .anim { opacity: 0; transform: translateY(26px); animation: rise 0.7s var(--ease) forwards; } .a1 { animation-delay: 0.1s; } .a2 { animation-delay: 0.22s; } .a3 { animation-delay: 0.34s; } .a4 { animation-delay: 0.46s; } .a5 { animation-delay: 0.6s; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .media-line { max-width: var(--w-content); margin: 2.6rem auto 0; padding: 1.1rem var(--pad-x) 0; border-top: 1px solid var(--rule-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); text-align: center; } /* ========================================================================== Hero (homepage) ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; } .hero-photo { position: absolute; inset: 0; background-position: center 22%; background-size: cover; background-repeat: no-repeat; z-index: -2; } .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 5, 47, 0.42) 0%, rgba(31, 5, 47, 0) 26%), linear-gradient(6deg, rgba(31, 5, 47, 0.97) 0%, rgba(31, 5, 47, 0.8) 22%, rgba(43, 7, 65, 0.25) 52%, rgba(43, 7, 65, 0) 72%); } .hero-inner { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 var(--pad-x) clamp(4rem, 9vh, 7rem); } .nb { white-space: nowrap; } .hero-kicker { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 1.6rem; padding-left: 2px; text-shadow: 0 1px 12px rgba(31, 5, 47, 0.6); } .hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; margin-top: calc(0.5em - 3px); } .hero h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2.4rem, 7vw, 6.2rem); font-weight: 480; line-height: 1.02; letter-spacing: -0.015em; color: var(--white); max-width: 24ch; text-shadow: 0 2px 28px rgba(31, 5, 47, 0.5); } .hero h1 em { font-style: italic; font-weight: 420; color: var(--yellow); } .hero-lede { max-width: 56ch; margin-top: 1.8rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: rgba(255, 255, 255, 0.84); text-shadow: 0 1px 16px rgba(31, 5, 47, 0.6); } .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; } .hero-credit { position: absolute; right: var(--pad-x); bottom: 1.4rem; } /* ========================================================================== Page hero (interior pages) ========================================================================== */ .page-hero { position: relative; isolation: isolate; padding: clamp(9rem, 18vh, 12rem) var(--pad-x) clamp(3.5rem, 7vw, 6rem); } .page-hero-photo { position: absolute; inset: 0; z-index: -2; background-position: center 30%; background-size: cover; background-repeat: no-repeat; } .page-hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 5, 47, 0.66) 0%, rgba(31, 5, 47, 0.82) 60%, var(--purple-ink) 100%); } .page-hero-inner { max-width: var(--w-content); margin: 0 auto; } .page-hero .hero-kicker { text-shadow: none; } .page-hero h1 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 480; line-height: 1.05; letter-spacing: -0.01em; color: var(--white); max-width: 20ch; text-wrap: balance; } .page-hero h1 em { font-style: italic; font-weight: 420; color: var(--yellow); } .page-hero-lede { max-width: 58ch; margin-top: 1.6rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--text-dim); } .feature-video-link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); text-decoration: none; border-bottom: 1px solid rgba(254, 241, 0, 0.35); padding-bottom: 0.3rem; transition: border-color 0.2s; } .feature-video-link:hover { border-color: var(--yellow); } .feature-video-link span[aria-hidden] { font-size: 0.65rem; } /* ========================================================================== Photo caption convention: yellow dot + letterspaced small caps. .photo-cap inside a positioned figure = overlay bottom-left. Add .photo-cap--right for bottom-right. Only name people/venues that are certain; never invent who is in a photo. ========================================================================== */ .photo-cap { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 8px rgba(31, 5, 47, 0.7); } .photo-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; } figure .photo-cap { position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 1; } figure .photo-cap--right { left: auto; right: 1.2rem; } .hero-credit .photo-cap { position: static; } /* ========================================================================== Venue ticker (credibility strip under the hero) ========================================================================== */ .venues { border-bottom: 1px solid var(--rule-soft); padding: 1.5rem var(--pad-x); } .venues-inner { max-width: var(--w-content); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.5rem 1.6rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); text-align: center; } .venues-inner .dot { color: rgba(255, 255, 255, 0.22); letter-spacing: 0; } /* ========================================================================== Numbers strip ========================================================================== */ .numbers { border-bottom: 1px solid var(--rule-soft); padding: clamp(3.5rem, 6vw, 5.5rem) var(--pad-x); } .numbers-cap { max-width: var(--w-content); margin: 0 auto 2.4rem; display: flex; align-items: center; gap: 1.2rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); } .numbers-cap::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); } .numbers-grid { max-width: var(--w-content); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); } .num { padding: 0.4rem clamp(1.2rem, 2.5vw, 2.6rem); border-left: 1px solid var(--rule); } .num:first-child { border-left: 0; padding-left: 0; } .num-fig { display: block; font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(3rem, 5.4vw, 4.8rem); font-weight: 450; line-height: 1; color: var(--yellow); letter-spacing: -0.02em; } .num-fig i { font-style: normal; font-size: 0.62em; vertical-align: 0.28em; margin-left: 0.04em; } .num-label { display: block; margin-top: 0.8rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); max-width: 16ch; } /* ========================================================================== Sections + editorial numbered header ========================================================================== */ .section { max-width: var(--w-content); margin: 0 auto; padding: var(--sp-section) var(--pad-x) 0; } .section-head { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 5rem); } .section-no { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; } .section-no span { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--yellow); } .section-no hr { flex: 1; border: 0; height: 1px; background: var(--rule); } .section-titles h2 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2.3rem, 4.4vw, 3.9rem); font-weight: 480; line-height: 1.05; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; } .section-titles p { margin-top: 1.1rem; font-size: 1.1rem; color: var(--text-dim); max-width: 52ch; } /* ========================================================================== Programme cards (photo + stat + title + copy) ========================================================================== */ .prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); } .prog-mid { transform: translateY(3.5rem); } .js .prog-mid.reveal { transform: translateY(calc(3.5rem + 30px)); } .js .prog-mid.reveal.visible { transform: translateY(3.5rem); } .prog-img { overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; position: relative; } .prog-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 7, 65, 0) 55%, rgba(31, 5, 47, 0.6) 100%); pointer-events: none; } .prog-img .photo-cap { z-index: 1; } .prog-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) saturate(1.04); transition: transform 0.6s var(--ease); } .prog:hover .prog-img img { transform: scale(1.045); } .prog-body { padding: 1.6rem 0.2rem 0; } .prog-stat { font-family: var(--font-display); font-optical-sizing: auto; font-size: 2rem; font-weight: 460; color: var(--yellow); line-height: 1; } .prog-stat small { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-left: 0.35rem; } .prog-stat i { font-style: normal; font-size: 0.6em; vertical-align: 0.3em; } .prog h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: var(--white); margin: 0.9rem 0 0.6rem; } .prog p { color: var(--text-dim); font-size: 1rem; } /* ========================================================================== Full-bleed photo break ========================================================================== */ .break { position: relative; margin-top: var(--sp-section); height: clamp(380px, 62vh, 640px); overflow: hidden; } .break img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .break::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 5, 47, 0.55) 0%, rgba(31, 5, 47, 0) 24%), linear-gradient(0deg, rgba(31, 5, 47, 0.65) 0%, rgba(31, 5, 47, 0) 30%); pointer-events: none; } .break .photo-cap { left: var(--pad-x); bottom: 1.4rem; } /* ========================================================================== Feature (Julho 2026): enlarged collage + stamp badge ========================================================================== */ .feature-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .feature-photos { position: relative; padding-bottom: 5.5rem; padding-right: 2.5rem; } .feature-photo-main { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 5 / 4; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } .feature-photo-main img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.12) saturate(1.05); } .feature-photo-small { position: absolute; right: 0; bottom: 0; width: 48%; overflow: hidden; border-radius: 6px; aspect-ratio: 3 / 2; border: 6px solid var(--purple-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .feature-photo-small img { width: 100%; height: 100%; object-fit: cover; } /* Stamped badge, sits on the collage corner */ .stamp { position: absolute; top: -1rem; left: -0.8rem; z-index: 2; transform: rotate(-4deg); border: 2px solid var(--yellow); border-radius: 4px; background: rgba(31, 5, 47, 0.85); color: var(--yellow); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.55rem 1.05rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .feature-tag { display: inline-block; background: var(--yellow); color: var(--purple-ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.45rem 1rem; border-radius: 3px; margin-bottom: 1.6rem; } .feature-text h3 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 480; line-height: 1.08; letter-spacing: -0.01em; color: var(--white); margin-bottom: 1.4rem; } .feature-text > p { color: var(--text-dim); margin-bottom: 1.1rem; max-width: 54ch; } .feature-dates { list-style: none; margin-top: 2.2rem; border-top: 1px solid var(--rule); } .feature-dates li { display: grid; grid-template-columns: 170px 1fr; gap: 1.4rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); } .fd-when { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--yellow); white-space: nowrap; } .fd-what { font-size: 0.98rem; color: var(--text); } /* ========================================================================== Light interlude (lavender-white band that breaks the dark scroll) Wrap content in .interlude-inner. Headings/quotes recoloured for light. ========================================================================== */ .interlude { margin-top: var(--sp-section); background: var(--lav); color: var(--ink); padding: var(--sp-section) var(--pad-x); } .interlude-inner { max-width: var(--w-content); margin: 0 auto; } .interlude .section-titles h2, .interlude h2, .interlude h3 { color: var(--ink); } .interlude .section-titles p, .interlude p { color: var(--ink-dim); } .interlude .section-no span { color: var(--purple); } .interlude .section-no hr { background: var(--ink-rule); } .interlude .photo-cap { color: var(--ink-dim); text-shadow: none; } /* Quotes (usable on dark or inside .interlude) */ .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); } .quote { position: relative; padding-top: 4.2rem; } .quote::before { content: "\201C"; position: absolute; top: 0; left: -0.06em; font-family: var(--font-display); font-size: 7rem; line-height: 1; font-weight: 400; color: var(--yellow); opacity: 0.9; } .quote p { font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 420; line-height: 1.45; color: var(--white); text-wrap: pretty; } .quote cite { display: block; margin-top: 1.6rem; font-style: normal; font-size: 0.92rem; color: var(--text-dim); } .quote cite strong { color: var(--white); font-weight: 700; } .interlude .quote::before { color: var(--purple); } .interlude .quote p { color: var(--ink); } .interlude .quote cite { color: var(--ink-dim); } .interlude .quote cite strong { color: var(--ink); } /* ========================================================================== CTA · full yellow band ========================================================================== */ .cta { margin-top: var(--sp-section); background: var(--yellow); color: var(--purple-ink); position: relative; } .interlude + .cta { margin-top: 0; } .cta-inner { max-width: var(--w-content); margin: 0 auto; padding: clamp(4.5rem, 8vw, 7.5rem) var(--pad-x); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .cta h2 { font-family: var(--font-display); font-optical-sizing: auto; font-size: clamp(2.8rem, 5.6vw, 5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; } .cta-side p { font-size: 1.08rem; line-height: 1.65; color: rgba(31, 5, 47, 0.78); margin-bottom: 1.8rem; max-width: 44ch; } .cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .cta-fine { margin-top: 1.5rem; font-size: 0.85rem; line-height: 1.55; color: rgba(31, 5, 47, 0.68); max-width: 46ch; } /* ========================================================================== Rouanet strip + footer ========================================================================== */ .rouanet { padding: clamp(3rem, 5vw, 4.5rem) var(--pad-x); text-align: center; border-bottom: 1px solid var(--rule-soft); } .rouanet p { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.6rem; } .rouanet img { max-width: min(780px, 92vw); width: 100%; margin: 0 auto; opacity: 0.95; } .footer { background: var(--purple-ink); padding: clamp(3.5rem, 6vw, 5.5rem) var(--pad-x) 2.5rem; } .footer-grid { max-width: var(--w-content); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: 3rem; border-bottom: 1px solid var(--rule-soft); } .footer-brand img { height: 64px; margin-bottom: 1.2rem; } .footer-brand p { font-size: 0.92rem; color: var(--text-dim); max-width: 34ch; } .footer-social { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: 1.4rem; } .footer-social a { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .footer-social a:hover { color: var(--yellow); border-color: var(--yellow); } .footer-col h3 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.2rem; } .footer-col a { display: block; color: var(--text-dim); text-decoration: none; font-size: 0.94rem; padding: 0.28rem 0; transition: color 0.2s; } .footer-col a:hover { color: var(--yellow); } .footer-bottom { max-width: var(--w-content); margin: 0 auto; padding-top: 2.2rem; text-align: center; } .footer-bottom p { font-size: 0.82rem; color: var(--text-faint); margin-bottom: 0.4rem; } /* ========================================================================== Interior-page utilities ========================================================================== */ /* Two-column text/image split */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; } .split-img { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); } .split-img img { width: 100%; height: 100%; object-fit: cover; } /* Generic content grids */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } /* Generic dark card */ .card { border: 1px solid var(--rule); border-radius: 8px; padding: 2rem 1.8rem; background: rgba(255, 255, 255, 0.03); transition: transform 0.25s var(--ease), border-color 0.25s; } .card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.28); } .card h3 { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 0.6rem; } .card p { color: var(--text-dim); font-size: 0.98rem; } /* Long-form prose */ .prose { max-width: 68ch; } .prose p { color: var(--text-dim); margin-bottom: 1.2rem; } .prose p.lead { font-size: 1.18rem; color: var(--text); } .prose h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--white); margin: 2.2rem 0 0.8rem; } .prose a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .interlude .prose p { color: var(--ink-dim); } .interlude .prose p.lead { color: var(--ink); } .interlude .prose h3 { color: var(--ink); } .interlude .prose a { color: var(--purple); } /* Timeline (history) */ .timeline { position: relative; max-width: 760px; padding-left: 2.4rem; border-left: 1px solid var(--rule); display: grid; gap: 2.8rem; } .timeline-item { position: relative; } .timeline-item::before { content: ""; position: absolute; left: calc(-2.4rem - 5.5px); top: 0.55rem; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px var(--purple-ink); } .timeline-year { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--yellow); line-height: 1; } .timeline-item h3 { font-size: 1.15rem; font-weight: 700; color: var(--white); margin: 0.5rem 0 0.4rem; } .timeline-item p { color: var(--text-dim); font-size: 0.98rem; max-width: 58ch; } /* Team cards */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.4rem 1.8rem; } .team-card { text-align: left; } .team-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.06); } .team-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) saturate(1.02); transition: transform 0.5s var(--ease); } .team-card:hover .team-photo img { transform: scale(1.04); } .team-photo--initials { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 450; color: rgba(255, 255, 255, 0.4); } .team-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1.3; } .team-role { display: block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim); } /* Pathway cards (three-step ladder / how-to-help steps) */ .pathway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .pathway-card { position: relative; border: 1px solid var(--rule); border-radius: 8px; padding: 2.2rem 1.8rem; background: rgba(255, 255, 255, 0.03); transition: transform 0.25s var(--ease), border-color 0.25s; } .pathway-card:hover { transform: translateY(-4px); border-color: rgba(254, 241, 0, 0.45); } .pathway-num { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--yellow); margin-bottom: 1rem; line-height: 1; } .pathway-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 0.6rem; } .pathway-card p { color: var(--text-dim); font-size: 0.98rem; } /* Simple forms (contato) */ .form-field { margin-bottom: 1.3rem; } .form-field label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.5rem; } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 0.85rem 1.1rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--rule); border-radius: 8px; color: var(--white); font-family: inherit; font-size: 1rem; outline: none; transition: border-color 0.2s; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--yellow); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-faint); } /* Small helpers */ .center { text-align: center; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .prog-grid { gap: 1.4rem; } .feature-grid { grid-template-columns: 1fr; } .feature-photos { max-width: 680px; } .split { grid-template-columns: 1fr; } .grid-3, .pathway-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 820px) { .br-desk { display: none; } .nav { padding: 0.9rem 1.25rem; } .nav-logo img { height: 44px; } .nav-burger { display: flex; } .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2rem; background: rgba(31, 5, 47, 0.97); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1001; } .nav-links.open { opacity: 1; pointer-events: auto; } .nav-links a { font-size: 1.3rem; } .nav-links a.nav-lang, .nav-links button.nav-lang { font-family: var(--font-sans); background: none; cursor: pointer; font-size: 0.95rem; } .hero { min-height: 94svh; } .hero-photo { background-position: 30% 18%; } .hero-scrim { background: linear-gradient(180deg, rgba(31, 5, 47, 0.34) 0%, rgba(31, 5, 47, 0) 30%), linear-gradient(4deg, rgba(31, 5, 47, 0.97) 0%, rgba(31, 5, 47, 0.84) 30%, rgba(43, 7, 65, 0.28) 62%, rgba(43, 7, 65, 0) 80%); } .hero-credit { display: none; } .hero-ctas .btn { padding: 0.85rem 1.7rem; } .venues-inner { gap: 0.35rem 1rem; font-size: 0.68rem; } .numbers-grid { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; } .num { padding: 0.2rem 0 0.2rem 1.2rem; } .num:nth-child(odd) { border-left: 0; padding-left: 0; } .num-label { font-size: 0.72rem; } .section-head { grid-template-columns: 1fr; gap: 1.2rem; } .section-no { padding-top: 0; max-width: 200px; } .prog-grid { grid-template-columns: 1fr; gap: 3rem; } .prog-mid, .js .prog-mid.reveal, .js .prog-mid.reveal.visible { transform: none; } .js .prog-mid.reveal { transform: translateY(30px); } .js .prog-mid.reveal.visible { transform: translateY(0); } .prog-img { aspect-ratio: 4 / 3; } .feature-photos { padding-bottom: 4rem; padding-right: 1.25rem; } .stamp { top: -0.8rem; left: -0.3rem; font-size: 0.66rem; padding: 0.45rem 0.8rem; } .feature-dates li { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.9rem 0; } .quotes { grid-template-columns: 1fr; gap: 3.5rem; } .quote { padding-top: 3.6rem; } .quote::before { font-size: 5.5rem; } .cta-inner { grid-template-columns: 1fr; gap: 2rem; } .grid-2, .grid-3, .pathway-grid { grid-template-columns: 1fr; } .timeline { padding-left: 1.8rem; } .timeline-item::before { left: calc(-1.8rem - 5.5px); } .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.8rem 1.2rem; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { body { font-size: 1rem; } .numbers-grid { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; } .num-fig { font-size: 2.7rem; } .footer-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .anim, .reveal { animation: none; transition: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } }