/* ═══════════════════════════════════════════════════════ INSTITUTO ARIA — V3 REDESIGN Design System: Botanical · Orgânico · Institucional Kupim Digital · 2026 ═══════════════════════════════════════════════════════ */ /* ─── TRANSIÇÃO ENTRE PÁGINAS ─── A troca de conteúdo real (fetch + swap) fica em js/spa-nav.js, que anima o próprio bloco .page — não o inteiro. Removido o fade de opacity do , que causava um flash branco/de cor antes do JS aplicar a classe de "carregado". */ /* ─── 1. VARIÁVEIS ─── */ :root { /* Paleta principal — derivada da logo */ --aria-rose: #B8737D; --aria-plum: #5A3447; --aria-bg: #D8C8B6; --aria-cream: #F4EDE3; --aria-blush: #DFA5A0; --aria-brown: #3B251A; --aria-wine: #8B4A5E; --aria-gold: #C6A15B; --aria-card: #E8D8CA; --aria-sage: #6F7468; --aria-ivory: #FAF7EF; /* Variantes vívidas — interativos */ --aria-rose-vivid: #C76F85; --aria-wine-vivid: #98445F; --aria-blush-vivid: #E7A0A8; --aria-plum-vivid: #67334E; --aria-gold-vivid: #D2A84F; --aria-gold-text: #7A5514; /* âmbar escuro — texto sobre fundo claro */ --aria-sage-vivid: #748B72; /* Derivados */ --aria-plum-d: #3D2334; --aria-text: #3B251A; --aria-muted: #5A4037; /* escurecido para contraste 5.5:1 em fundos claros */ --aria-rose-text: #7A2F3E; /* rosa escuro — texto em fundos claros */ --aria-sage-text: #3D4A3A; /* sage escuro — texto em fundos claros */ --aria-border: rgba(216,200,182,.55); --aria-border-gold: rgba(198,161,91,.22); /* Sombras quentes */ --shadow-sm: 0 2px 8px rgba(59,37,26,.07); --shadow-md: 0 8px 24px rgba(59,37,26,.10); --shadow-lg: 0 20px 48px rgba(59,37,26,.14); --shadow-xl: 0 32px 64px rgba(59,37,26,.18); /* Raios */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; --hero-content-lift: 70px; /* Transições */ --t: 240ms ease; } /* ─── 2. RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } script, noscript { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } html { font-size: 16px; overflow-x: clip; background: var(--aria-plum-d); } /* clip no html: propaga ao viewport sem criar BFC nem travar scroll vertical */ body { font-family: 'Nunito Sans', system-ui, sans-serif; background: var(--aria-cream); color: var(--aria-text); line-height: 1.72; position: relative; max-width: 100vw; overflow-x: clip; /* clip: corta overflow horizontal sem criar BFC — não interfere no scroll vertical */ } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; touch-action: manipulation; } input, textarea, select { font-family: inherit; font-size: 15px; } ul { list-style: none; } /* ─── 3. TIPOGRAFIA ─── */ h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: 1.12; color: var(--aria-brown); text-wrap: balance; } h4, h5 { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; line-height: 1.3; color: var(--aria-brown); } h1 { font-size: clamp(38px, 5.5vw, 68px); } h2 { font-size: clamp(30px, 4vw, 52px); } h3 { font-size: clamp(22px, 2.8vw, 36px); } h4 { font-size: clamp(16px, 1.8vw, 22px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--aria-rose-text); margin-bottom: 14px; } .eyebrow::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--aria-rose-text); flex-shrink: 0; } /* ─── 4. LAYOUT ─── */ .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } .container-wide { max-width: 1360px; margin: 0 auto; padding: 0 32px; } .section { padding: 96px 0; } .section-sm { padding: 64px 0; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .section-header { text-align: center; max-width: 620px; margin: 0 auto 56px; } .section-header p { color: var(--aria-muted); font-size: 16px; margin-top: 12px; line-height: 1.75; } /* ─── 5. SISTEMA DE PÁGINAS ─── */ .page { display: none; } .page.active { display: block; } /* ─── 6. ANIMAÇÕES BOTÂNICAS ─── */ @keyframes aria-soft-sway { 0%,100% { transform: rotate(-1.5deg) translateX(-1.5px); } 50% { transform: rotate(1.5deg) translateX(1.5px); } } @keyframes aria-soft-sway-slow { 0%,100% { transform: rotate(-1deg) translateX(-1px); } 50% { transform: rotate(1deg) translateX(1px); } } @keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.9);} } @keyframes fadeInUp { from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);} } .aria-sway { transform-origin: bottom center; animation: aria-soft-sway 6s ease-in-out infinite; } .aria-sway-alt { transform-origin: bottom center; animation: aria-soft-sway 7.5s ease-in-out infinite; animation-delay: -2.5s; } .aria-sway-slow{ transform-origin: bottom center; animation: aria-soft-sway-slow 8.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .aria-sway, .aria-sway-alt, .aria-sway-slow { animation: none; } } /* Fade-up ao scroll */ .fade-up { opacity: 0; transform: translateY(26px); transition: opacity 2000ms ease, transform 2000ms ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.delay-1.visible { transition-delay: 100ms; } .fade-up.delay-2.visible { transition-delay: 200ms; } .fade-up.delay-3.visible { transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .fade-up { opacity:1; transform:none; transition:none; } } /* ═══════════════════════════════════════════════════════════ CARROSSEL COVERFLOW — imagem central em destaque, laterais parciais à esquerda/direita; clique gira para revelar a próxima. ═══════════════════════════════════════════════════════════ */ .carousel-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .carousel-nav { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--aria-border-gold); background: var(--aria-ivory); color: var(--aria-wine); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--t), transform var(--t); z-index: 2; } .carousel-nav:hover { background: var(--aria-gold); color: #fff; } .carousel-nav:active { transform: scale(.94); } .carousel-nav:disabled { opacity: .35; cursor: default; } .carousel-nav:disabled:hover { background: var(--aria-ivory); color: var(--aria-wine); } .coverflow-stage { position: relative; flex: 1; min-width: 0; height: 640px; /* ajustado dinamicamente por JS conforme o card ativo */ overflow: hidden; outline: none; perspective: 1400px; /* profundidade para a rotação 3D dos cards */ } .coverflow-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--aria-gold); } .carousel-card { position: absolute; top: 0; left: 50%; width: min(624px, 70vw); /* 3x o original, -20% conforme ajuste, limitado à largura da tela */ background: var(--aria-card, #fff); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md, 0 8px 24px rgba(59,37,26,.08)); display: flex; flex-direction: column; transition: transform 620ms cubic-bezier(.22,1,.36,1), opacity 460ms ease, box-shadow 460ms ease; cursor: pointer; transform-style: preserve-3d; backface-visibility: hidden; } .carousel-card.is-active { cursor: default; box-shadow: var(--shadow-xl, 0 20px 44px rgba(59,37,26,.18)); } .carousel-card:focus-visible { outline: 3px solid var(--aria-gold); outline-offset: 3px; } /* Escurece levemente os cards laterais para reforçar a leitura da rotação 3D, mesmo quando a foto ocupa quase toda a borda do card (casos de resgate). */ .carousel-card:not(.is-active)::after { content: ''; position: absolute; inset: 0; background: rgba(43,26,20,.28); pointer-events: none; } .carousel-card.is-active .carousel-expand-btn { pointer-events: auto; } .carousel-card:not(.is-active) .carousel-expand-btn { pointer-events: none; } /* Foto: amplia até no máximo 2x, sem cortar bordas (object-fit: contain) */ .carousel-card-photo { height: clamp(210px, 26vw, 400px); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--aria-cream); } .carousel-card-photo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .carousel-card-body { padding: 27px 30px 30px; } /* Depoimentos do Se Prepara Menina: foto circular, tamanho fixo (referência enviada) */ #dep-track .carousel-card-photo { width: 280px; height: 280px; flex: 0 0 auto; margin: 32px auto 0; border-radius: 50%; background: var(--aria-cream); } #dep-track .carousel-card-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } #dep-track .carousel-card-body { text-align: center; } .carousel-card-name { display: block; font-family: 'Libre Baskerville', serif; font-weight: 700; font-size: 22.5px; /* +50% sobre 15px */ color: var(--aria-wine); margin-bottom: 12px; } .carousel-card-quote, .carousel-card-quote-plain { font-family: 'Libre Baskerville', Georgia, serif; font-size: 21.75px; /* +50% sobre 14.5px */ line-height: 1.55; color: var(--aria-brown); margin: 0; } .carousel-card-quote { font-style: italic; } .carousel-expand-btn { margin-top: 12px; background: none; border: none; padding: 8px 0 0; font-family: 'Montserrat', sans-serif; font-size: 17px; /* +50% sobre 11.5px */ font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--aria-wine); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; } .carousel-expand-btn:hover { text-decoration: underline; } /* Abrir/fechar "Ler depoimento completo" / "Ver jornada": altura + fade, para que a revelação sempre pareça uma animação completa, mesmo quando o conteúdo é mais curto que o teto de altura. */ .carousel-expand-panel { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 420ms cubic-bezier(.22,1,.36,1), opacity 320ms ease; /* rolagem funcional (se precisar), mas sem barra visível */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge legado */ } .carousel-expand-panel::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .carousel-card.expanded .carousel-expand-panel { max-height: 820px; /* espaço suficiente pra timeline + prévia ampliada, sem cortar */ opacity: 1; overflow-y: auto; pointer-events: auto; margin-top: 6px; } /* Depoimento completo entre aspas tipográficas */ .carousel-expand-panel > p { font-family: 'Libre Baskerville', Georgia, serif; font-size: 20.25px; /* +50% sobre 13.5px */ line-height: 1.65; color: var(--aria-muted); margin: 0; } .carousel-expand-panel > p:first-child::before { content: '\201C'; } .carousel-expand-panel > p:last-of-type::after { content: '\201D'; } .rescue-mini-timeline { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; } .rescue-mini-timeline::-webkit-scrollbar { display: none; } .rescue-mini-timeline > div { flex: 0 0 90px; text-align: center; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 320ms ease; } .carousel-card.expanded .rescue-mini-timeline > div { opacity: 1; transform: translateY(0); } .carousel-card.expanded .rescue-mini-timeline > div:nth-child(1) { transition-delay: 40ms; } .carousel-card.expanded .rescue-mini-timeline > div:nth-child(2) { transition-delay: 100ms; } .carousel-card.expanded .rescue-mini-timeline > div:nth-child(3) { transition-delay: 160ms; } .carousel-card.expanded .rescue-mini-timeline > div:nth-child(4) { transition-delay: 220ms; } .rescue-mini-timeline img { width: 90px; height: 90px; object-fit: contain; background: var(--aria-cream); border-radius: var(--r-md); display: block; border: 1px solid var(--aria-border-gold); transition: border-color var(--t), box-shadow var(--t); } .rescue-mini-timeline > div:hover img { border-color: var(--aria-gold); } .rescue-mini-timeline > div.is-selected img { border-color: var(--aria-wine); box-shadow: 0 0 0 2px rgba(139,74,94,.25); } .rescue-mini-timeline span { display: block; margin-top: 6px; font-family: 'Montserrat', sans-serif; font-size: 13.5px; /* +50% sobre 9px */ font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--aria-wine); line-height: 1.3; } /* Prévia grande da miniatura clicada — expande para baixo, dentro do painel */ .rescue-mini-preview { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 380ms cubic-bezier(.22,1,.36,1), opacity 280ms ease; } .rescue-mini-preview.is-open { max-height: 700px; /* 2x a foto (560px) + preenchimento/rótulo */ opacity: 1; margin-top: 14px; } .rescue-mini-preview-inner { display: flex; align-items: center; justify-content: center; background: var(--aria-cream); border-radius: var(--r-md); padding: 10px; } .rescue-mini-preview img { max-width: 100%; max-height: 560px; /* 2x o tamanho anterior (280px) */ width: auto; height: auto; object-fit: contain; border-radius: calc(var(--r-md) - 4px); display: block; } .rescue-mini-preview-label { display: block; text-align: center; margin-top: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--aria-wine); } /* Respeita quem pede menos movimento: sem o giro/profundidade 3D e com transições curtas, mas ainda visíveis (não trocar tudo instantaneamente). */ @media (prefers-reduced-motion: reduce) { .carousel-card { transition: opacity 200ms linear, transform 200ms linear; } .carousel-expand-panel, .rescue-mini-preview, .rescue-mini-timeline > div { transition-duration: 150ms; transition-delay: 0ms !important; } } /* ─── 7. BARRA DE ANÚNCIO ─── */ #announce-bar { background: var(--aria-plum); color: var(--aria-ivory); font-family: 'Montserrat', sans-serif; font-size: 13px; padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; position: relative; z-index: 95; overflow: hidden; } #announce-bar a { color: var(--aria-blush); font-weight:700; cursor:pointer; text-decoration:underline; white-space:nowrap; } .ann-close { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; transition:background var(--t); } .ann-close:hover { background:rgba(255,255,255,.22); } /* ─── 8. NAVBAR STICKY ─── */ #sticky-nav { position: fixed; top:0;left:0;right:0; z-index: 90; background: rgba(244,237,227,.93); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--aria-border-gold); transform: translateY(0); transition: box-shadow 360ms ease; } #sticky-nav.visible { box-shadow: 0 4px 24px rgba(59,37,26,.07); } .nav-inner { max-width:1120px;margin:0 auto;padding:0 32px; height:66px;display:flex;align-items:center;gap:36px; } .nav-logo { display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0; } .nav-logo-icon { width:38px;height:38px;border-radius:50%; border:1.5px solid rgba(184,115,125,.5); display:flex;align-items:center;justify-content:center; background:var(--aria-cream); } .nav-logo-text { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--aria-brown);line-height:1; } .nav-logo-text small { display:block;font-family:'Montserrat',sans-serif;font-size:8.5px; font-weight:700;letter-spacing:2.2px;text-transform:uppercase; color:var(--aria-muted);line-height:1.4; } .nav-links { display:flex;align-items:center;gap:4px;margin-left:auto; } .nav-link { font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500; color:var(--aria-brown);padding:8px 14px;border-radius:var(--r-pill); cursor:pointer;transition:color var(--t),background var(--t); white-space:nowrap; } .nav-link:hover { background:var(--aria-card);color:var(--aria-wine); } .nav-link.active-link { color:var(--aria-wine); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; } .nav-cta { margin-left:6px; background:var(--aria-wine);color:var(--aria-ivory)!important; padding:10px 20px;border-radius:var(--r-pill); font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700; cursor:pointer;border:2px solid transparent; box-shadow:0 4px 12px rgba(139,74,94,.25); transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t); white-space:nowrap; } .nav-cta:hover { background:var(--aria-plum);transform:translateY(-1px);box-shadow:0 6px 18px rgba(90,52,71,.3); } .nav-cta.nav-cta-active { background:var(--aria-ivory);color:var(--aria-wine)!important; border-color:var(--aria-wine); } .nav-cta.nav-cta-active:hover { background:var(--aria-cream); } .hamburger { display:none;width:40px;height:40px;border-radius:10px; align-items:center;justify-content:center; background:var(--aria-card);margin-left:auto; transition:background var(--t); } .hamburger:hover { background:var(--aria-bg); } /* ─── 9. MOBILE OVERLAY ─── */ #mobile-overlay { position:fixed;inset:0;z-index:100; background:var(--aria-plum-d); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:48px 32px; opacity:0;pointer-events:none; transition:opacity 300ms ease; } #mobile-overlay.open { opacity:1;pointer-events:all; } .overlay-close { position:absolute;top:22px;right:22px; width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; transition:background var(--t); } .overlay-close:hover { background:rgba(255,255,255,.2); } .overlay-nav { display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-bottom:28px; } .overlay-nav a { font-family:'Cormorant Garamond',serif; font-size:34px;font-weight:400; color:var(--aria-ivory);text-align:center; padding:8px 24px;border-radius:8px;cursor:pointer; transition:color var(--t);line-height:1.2; } .overlay-nav a:hover { color:var(--aria-blush); } .overlay-cta { margin-top:4px; } .overlay-contact { margin-top:20px; font-family:'Montserrat',sans-serif;font-size:13px; color:rgba(255,255,255,.45); } .overlay-contact a { color:var(--aria-blush); } /* ─── 10. HERO ─── */ .hero-section { min-height:100vh; background:var(--aria-cream); background-image: radial-gradient(ellipse at 72% 18%, rgba(223,165,160,.14) 0%, transparent 52%), radial-gradient(ellipse at 18% 85%, rgba(198,161,91,.06) 0%, transparent 50%); display:flex;flex-direction:column; position:relative;overflow:visible; isolation:isolate; } .hero-bg-logo { position:absolute; width:96vw; height:auto; top:0px; right:-38.4vw; opacity:.30; pointer-events:none; user-select:none; z-index:0; } /* Hero nav (inside hero section) */ .hero-nav { position:absolute;top:0;left:0;right:0;z-index:10; padding:26px 48px;display:flex;align-items:center;gap:36px; } .hero-wordmark { display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0; } .hero-wm-icon { width:44px;height:44px;border-radius:50%; border:1.5px solid rgba(184,115,125,.45); background:rgba(244,237,227,.55); display:flex;align-items:center;justify-content:center; } .hero-wm-text { font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--aria-brown);line-height:1; } .hero-wm-text small { display:block;font-family:'Montserrat',sans-serif; font-size:8.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase; color:var(--aria-muted);line-height:1.5; } .hero-nav-links { display:flex;gap:4px;margin-left:auto;align-items:center; } .hero-nav-links a { font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500; color:var(--aria-brown);padding:8px 14px;border-radius:var(--r-pill); cursor:pointer;transition:color var(--t),background var(--t); } .hero-nav-links a:hover { color:var(--aria-wine);background:rgba(139,74,94,.07); } .hero-hamburger { display:none;width:40px;height:40px;border-radius:10px; align-items:center;justify-content:center;background:var(--aria-card); margin-left:auto;border:none; } /* Hero content grid */ .hero-body { flex:1;display:flex;align-items:center; padding:60px 0 80px; } .hero-grid { display:grid;grid-template-columns:1fr 1fr; gap:56px;align-items:center;position:relative;z-index:2; } .hero-text .eyebrow { color:var(--aria-rose); margin-bottom:16px; } .hero-h1 { font-size:clamp(38px,5vw,66px);font-weight:500; color:var(--aria-brown);line-height:1.1;margin-bottom:22px; } .hero-h1 em { color:var(--aria-wine);font-style:italic; } .hero-sub { font-size:clamp(17.25px,1.955vw,20.7px);color:var(--aria-muted); line-height:1.8;margin-bottom:36px;max-width:460px; } .hero-cycle-word { display:inline;color:var(--aria-rose-vivid); font-style:italic;transition:opacity 280ms ease; } .hero-cycle-word.fading { opacity:0; } .tier-cycle { display:inline;transition:opacity 280ms ease; } .tier-cycle.fading { opacity:0; } .hero-ctas { display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px; } .hero-trust { display:flex;align-items:center;gap:20px;flex-wrap:wrap; } .hero-trust-item { display:flex;align-items:center;gap:6px; font-family:'Montserrat',sans-serif;font-size:11.5px; color:var(--aria-muted);font-weight:600; } .hero-trust-item svg { width:15px;height:15px;stroke:var(--aria-gold);fill:none;stroke-width:1.5;flex-shrink:0; } /* Hero visual (right column) */ .hero-visual { position:relative;display:flex;align-items:center; justify-content:center;height:520px; } .hero-orb { position:absolute; width:440px;height:440px; border-radius:58% 42% 60% 40% / 52% 56% 44% 48%; background:radial-gradient(ellipse at 38% 35%, var(--aria-blush), var(--aria-wine)); opacity:.13; top:50%;left:50%;transform:translate(-50%,-50%); pointer-events:none; } .hero-img-wrap { position:relative;width:380px;height:410px;z-index:2; } .hero-img-wrap img { width:100%;height:100%;object-fit:cover; border-radius:52% 48% 44% 56% / 48% 54% 46% 52%; border:3px solid rgba(198,161,91,.28); box-shadow:var(--shadow-xl); } .hero-img-placeholder { width:100%;height:100%; border-radius:52% 48% 44% 56% / 48% 54% 46% 52%; background:linear-gradient(148deg, var(--aria-blush), var(--aria-card), var(--aria-bg)); border:3px solid rgba(198,161,91,.28); display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-xl); } /* Hero carousel */ .hero-carousel { position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit; } .hero-slide { position:absolute;inset:0;opacity:0; transition:opacity 1s ease; } .hero-slide.active { opacity:1; } .hero-slide img { width:100%;height:100%;object-fit:cover;display:block; transform-origin:center center; transform:scale(1.45); } /* Escala a imagem além do necessário pro "cover", criando folga real pra deslizar horizontalmente. O movimento em si (translateX) é controlado via JS (js/core.js → ARIA_reinitHeroPan), atualizando o transform a cada frame — mas só na foto ATIVA (as outras ficam paradas nesse scale, já que estão com opacity:0). `will-change` também é aplicado só na ativa, via JS, pra não manter 6 camadas de composição à toa. Intencionalmente NÃO respeita prefers-reduced-motion aqui: o pan é um efeito decorativo pedido explicitamente pelo cliente pra esse carrossel. */ /* Floating badges on hero visual */ .hero-badge { position:absolute;background:var(--aria-ivory); border-radius:var(--r-md);padding:12px 16px; box-shadow:var(--shadow-md);border:1px solid var(--aria-border-gold);z-index:5; } .hero-badge-num { font-family:'Cormorant Garamond',serif;font-size:28px; font-weight:600;color:var(--aria-wine);line-height:1; } .hero-badge-label { font-family:'Montserrat',sans-serif;font-size:10px; color:var(--aria-muted);font-weight:600;margin-top:2px; } /* Botanical positions in hero visual */ .hero-branch-tl { position:absolute;top:20px;left:-18px;z-index:3;opacity:.7; } .hero-branch-br { position:absolute;bottom:30px;right:-28px;z-index:3;opacity:.65; } .hero-flower-tr { position:absolute;top:32px;right:24px;z-index:5;opacity:.85; } .hero-flower-bl { position:absolute;bottom:64px;left:-4px;z-index:5;opacity:.75; } .hero-badge-1 { top:20px;right:-20px; } .hero-badge-2 { bottom:60px;left:-20px; } /* ─── 11. DIVISOR BOTÂNICO ─── */ .botanical-divider { display:flex;align-items:center;justify-content:center; gap:14px;padding:12px 0;opacity:.7; } .bot-line { flex:1;height:1px;max-width:120px; background:linear-gradient(to right,transparent,rgba(184,115,125,.45)); } .bot-line.r { background:linear-gradient(to left,transparent,rgba(184,115,125,.45)); } /* ─── 12. BOTÕES ─── */ .btn-primary { display:inline-flex;align-items:center;gap:8px; background:var(--aria-wine);color:var(--aria-ivory); border-radius:var(--r-pill);padding:14px 28px; font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700; cursor:pointer;border:none; box-shadow:0 8px 20px rgba(139,74,94,.22); transition:background var(--t),transform var(--t),box-shadow var(--t); touch-action:manipulation;white-space:nowrap; } .btn-primary:hover { background:var(--aria-plum);transform:translateY(-2px);box-shadow:0 12px 28px rgba(90,52,71,.3); } .btn-secondary { display:inline-flex;align-items:center;gap:8px; background:transparent;color:var(--aria-wine); border-radius:var(--r-pill);padding:13px 28px; font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700; cursor:pointer;border:1.5px solid var(--aria-wine); transition:background var(--t),color var(--t),transform var(--t); touch-action:manipulation;white-space:nowrap; } .btn-secondary:hover { background:var(--aria-card);transform:translateY(-1px); } .btn-ghost { display:inline-flex;align-items:center;gap:8px; background:transparent;color:var(--aria-ivory); border-radius:var(--r-pill);padding:13px 28px; font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700; cursor:pointer;border:1.5px solid rgba(255,255,255,.4); transition:background var(--t),border-color var(--t); touch-action:manipulation; } .btn-ghost:hover { background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65); } .btn-gold { display:inline-flex;align-items:center;gap:8px; background:var(--aria-gold);color:var(--aria-brown); border-radius:var(--r-pill);padding:14px 28px; font-family:'Montserrat',sans-serif;font-size:13.5px;font-weight:700; cursor:pointer;border:none; box-shadow:0 6px 16px rgba(198,161,91,.35); transition:background var(--t),transform var(--t); touch-action:manipulation; } .btn-gold:hover { background:var(--aria-gold-vivid);transform:translateY(-2px); } .btn-sm { padding:10px 20px!important;font-size:12.5px!important; } /* ─── 13. CARDS ─── */ .aria-card { background:var(--aria-card);border-radius:var(--r-lg); padding:32px;border:1px solid var(--aria-border-gold); box-shadow:var(--shadow-sm); transition:transform var(--t),box-shadow var(--t); position:relative;overflow:visible; } .aria-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-md); } .aria-card-ivory { background:var(--aria-ivory);border-radius:var(--r-lg); padding:32px;border:1px solid var(--aria-border); box-shadow:var(--shadow-sm); transition:transform var(--t),box-shadow var(--t); } .aria-card-ivory:hover { transform:translateY(-4px);box-shadow:var(--shadow-md); } .gov-link-card { display:block;text-decoration:none;color:inherit;cursor:pointer; } .gov-link-icon { width:42px;height:42px;border-radius:12px;background:rgba(184,115,125,.12); display:flex;align-items:center;justify-content:center; } .gov-link-icon svg { width:20px;height:20px;fill:none;stroke:var(--aria-wine,#8B4A5E);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; } .partner-icon { width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .partner-icon svg { width:20px;height:20px; } .why-vol-icon { width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center; } .why-vol-icon svg { width:26px;height:26px; } /* Project cards */ .project-card { background:var(--aria-ivory);border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--aria-border-gold);box-shadow:var(--shadow-sm); cursor:pointer;transition:transform var(--t),box-shadow var(--t); } .project-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg); } .project-card-img { width:100%;height:210px;object-fit:cover; } .project-card-img-ph { width:100%;height:210px; display:flex;align-items:center;justify-content:center; } .project-card-body { padding:26px 24px; } .project-status { display:inline-flex;align-items:center;gap:6px; background:rgba(139,74,94,.08);color:var(--aria-wine); border-radius:var(--r-pill);padding:4px 12px; font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700; letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px; } .status-dot { width:5px;height:5px;border-radius:50%;background:var(--aria-wine-vivid);animation:pulse-dot 2s infinite; } .project-card h3 { font-size:22px;margin-bottom:10px; } .project-card p { color:var(--aria-muted);font-size:14px;line-height:1.7;margin-bottom:16px; } .project-card-link { display:inline-flex;align-items:center;gap:6px; font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700; color:var(--aria-wine);letter-spacing:.5px;text-transform:uppercase; transition:gap var(--t); } .project-card:hover .project-card-link { gap:10px; } /* Story cards */ .story-card { background:var(--aria-cream);border-radius:var(--r-lg);padding:30px; border:1px solid var(--aria-border);position:relative;overflow:hidden; transition:transform var(--t),box-shadow var(--t); } .story-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-md); } .story-accent { position:absolute;top:0;left:0;width:4px;height:100%;border-radius:2px 0 0 2px; } .story-avatar-ph { width:54px;height:54px;border-radius:50%;margin-bottom:16px; background:var(--aria-card);border:2px solid var(--aria-border-gold); display:flex;align-items:center;justify-content:center; } .story-quote { font-family:'Libre Baskerville',Georgia,serif; font-size:15.5px;font-style:italic;color:var(--aria-brown); line-height:1.65;margin-bottom:16px; } .story-name { font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;display:block;margin-bottom:2px; } .story-role { font-family:'Montserrat',sans-serif;font-size:11px;color:var(--aria-muted); } /* Team cards */ .team-card { background:var(--aria-ivory);border-radius:var(--r-md); padding:26px 20px;text-align:center; border:1px solid var(--aria-border-gold); transition:transform var(--t),box-shadow var(--t); } .team-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-md); } .team-photo-wrap { width:78px;height:78px;border-radius:50%; background:var(--aria-card);margin:0 auto 14px; border:2px solid var(--aria-border-gold); display:flex;align-items:center;justify-content:center;overflow:hidden; } .team-name { font-family:'Libre Baskerville',serif;font-size:15.5px;font-weight:700;color:var(--aria-brown);margin-bottom:4px; } .team-role { font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;color:var(--aria-rose-text);text-transform:uppercase;letter-spacing:1px; } .team-groups { display:grid;gap:34px; } .team-group { background:rgba(255,255,255,.4);border:1px solid var(--aria-border); border-radius:var(--r-lg);padding:28px; } .team-group-heading { display:flex;align-items:center;gap:12px;margin-bottom:22px; padding-bottom:14px;border-bottom:1px solid var(--aria-border-gold); } .team-group-number { width:32px;height:32px;border-radius:50%;flex:0 0 32px; display:flex;align-items:center;justify-content:center; background:var(--aria-wine);color:#fff; font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700; } .team-group-title { font-size:24px;margin:0; } .team-group-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px; } .team-group-grid--founders { grid-template-columns:minmax(180px,280px); } .team-community-card { display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:var(--aria-ivory);border:1px solid var(--aria-border-gold); border-radius:var(--r-md);padding:24px; } .team-community-card p { color:var(--aria-muted);font-size:14px;line-height:1.7;margin:0;max-width:680px; } /* Donation tier cards */ .tier-card { border-radius:var(--r-lg);padding:36px 26px;text-align:center; background:var(--aria-ivory);border:1.5px solid var(--aria-border); transition:transform var(--t),box-shadow var(--t);position:relative; } .tier-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-md); } .tier-card.featured { border-color:var(--aria-wine);border-width:2px; transform:translateY(-8px);box-shadow:0 16px 44px rgba(139,74,94,.2); } .tier-card.featured:hover { transform:translateY(-12px);box-shadow:0 24px 52px rgba(139,74,94,.28); } .tier-badge { position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--aria-wine);color:var(--aria-ivory); padding:5px 18px;border-radius:var(--r-pill); font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700; letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap; } .tier-name { font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--aria-muted);margin-bottom:16px; } .tier-price { font-family:'Cormorant Garamond',serif;font-size:58px;font-weight:500;color:var(--aria-brown);line-height:1;margin-bottom:12px; } .tier-desc { font-size:13px;color:var(--aria-muted);line-height:1.65;margin-bottom:22px; } /* ─── 14. STAT BOXES ─── */ .stat-box { text-align:center;padding:32px 20px; } .stat-num { font-family:'Cormorant Garamond',serif; font-size:clamp(48px,7vw,80px);font-weight:500; color:var(--aria-ivory);line-height:1;margin-bottom:8px; } .stat-label { font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600; color:rgba(250,247,239,.6);letter-spacing:.5px;text-transform:uppercase;line-height:1.5; } /* ─── 15. FORMULÁRIOS ─── */ .form-card { background:var(--aria-ivory);border-radius:var(--r-lg); padding:40px;border:1px solid var(--aria-border-gold);box-shadow:var(--shadow-sm); } .form-card h3 { font-size:28px;margin-bottom:6px; } .form-lead { color:var(--aria-muted);font-size:14px;margin-bottom:26px; } .form-row { display:grid;grid-template-columns:1fr 1fr;gap:16px; } .form-group { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; } .form-group label { font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700; color:var(--aria-brown);text-transform:uppercase;letter-spacing:.8px; } .form-group input, .form-group textarea, .form-group select { background:var(--aria-cream);border:1.5px solid var(--aria-border); border-radius:16px;padding:13px 18px; font-size:14px;color:var(--aria-text);outline:none; transition:border-color var(--t),box-shadow var(--t); width:100%;-webkit-appearance:none; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--aria-wine);box-shadow:0 0 0 3px rgba(139,74,94,.09); } .form-group textarea { resize:vertical;min-height:110px; } .form-submit { width:100%;justify-content:center;margin-top:8px; } /* ─── 16. FAQ ─── */ .faq-item { background:var(--aria-ivory);border-radius:var(--r-md); border:1px solid var(--aria-border);overflow:hidden; transition:border-color var(--t); } .faq-btn { width:100%;display:flex;align-items:center;justify-content:space-between; padding:19px 24px;background:none;border:none;cursor:pointer; text-align:left;font-family:'Libre Baskerville',Georgia,serif; font-size:14.5px;font-weight:700;color:var(--aria-brown);gap:16px; touch-action:manipulation; } .faq-icon { flex-shrink:0;transition:transform .28s ease;stroke:var(--aria-wine);fill:none; } .faq-answer { max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 24px; } .faq-answer p { color:var(--aria-muted);font-size:14px;line-height:1.78;padding-bottom:20px; } /* ─── 17. PIX / DOAÇÃO ─── */ .donate-opt { background:var(--aria-card);border-radius:var(--r-md); padding:16px 20px;display:flex;align-items:center;gap:16px; cursor:pointer;border:1px solid var(--aria-border-gold); transition:background var(--t),box-shadow var(--t); } .donate-opt:hover { background:var(--aria-bg);box-shadow:var(--shadow-sm); } .donate-icon { width:44px;height:44px;border-radius:13px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .ic-pix{background:#e6f7f0;} .ic-vak{background:rgba(139,74,94,.1);} .ic-ted{background:#ebf1fd;} .donate-text { flex:1; } .donate-text strong { display:block;font-size:14px;color:var(--aria-brown);margin-bottom:2px; } .donate-text span { font-size:12px;color:var(--aria-muted); } .pix-detail { background:var(--aria-ivory);border-radius:var(--r-md);padding:16px 20px; display:flex;align-items:center;gap:12px; border:1.5px solid var(--aria-border-gold);margin-top:-4px; } .pix-qr { width:38px;height:38px;flex-shrink:0; } .pix-info { flex:1; } .pix-info .pix-label { font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--aria-muted);margin-bottom:2px; } .pix-info .pix-key { font-size:13px;font-weight:700;color:var(--aria-wine);font-family:'Courier New',monospace; } .pix-info .pix-name { font-size:11px;color:var(--aria-muted);margin-top:2px; } .pix-copy { flex-shrink:0;padding:8px 16px;border-radius:var(--r-pill); background:var(--aria-wine);color:var(--aria-ivory); font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700; cursor:pointer;border:none;transition:background var(--t); } .pix-copy:hover { background:var(--aria-plum); } /* ─── 18. BLOCKQUOTE ─── */ .blockquote-card { background:var(--aria-card); border-left:4px solid var(--aria-gold); border-radius:0 var(--r-md) var(--r-md) 0; padding:28px 32px; } .blockquote-card blockquote { font-family:'Libre Baskerville',serif;font-style:italic; font-size:17px;color:var(--aria-brown);line-height:1.7;margin-bottom:16px; } .blockquote-card cite { font-family:'Montserrat',sans-serif;font-size:12px;color:var(--aria-muted);font-style:normal; } /* ─── 19. FOOTER ─── */ footer { background:var(--aria-plum-d);color:var(--aria-ivory); padding:80px 0 0;position:relative;overflow:visible; } footer::before { content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(to right,transparent,rgba(198,161,91,.3),transparent); } .footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr 1.2fr;gap:20px 24px;margin-bottom:60px;position:relative;z-index:2; } .footer-brand p { font-size:13.5px;color:rgba(250,247,239,.58); line-height:1.75;margin:18px 0 6px;max-width:270px; } .footer-cnpj { font-family:'Montserrat',sans-serif;font-size:10.5px;color:rgba(250,247,239,.3)!important;margin:4px 0 18px!important;letter-spacing:.5px; } .footer-wm { display:flex;align-items:center;gap:10px; } .footer-wm-icon { width:38px;height:38px;border-radius:50%; border:1.5px solid rgba(184,115,125,.4); display:flex;align-items:center;justify-content:center; } .footer-wm-text { font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--aria-ivory);line-height:1; } .footer-wm-text small { display:block;font-family:'Montserrat',sans-serif;font-size:8px; font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:rgba(250,247,239,.38); } .footer-social { display:flex;gap:8px;margin-top:18px; } .social-btn { width:34px;height:34px;border-radius:9px; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; transition:background var(--t),transform var(--t); } .social-btn:hover { background:rgba(255,255,255,.16);transform:translateY(-2px); } .social-btn svg { width:16px;height:16px;fill:var(--aria-ivory); } /* ======================================================== ICONES REDES SOCIAIS - NAO ALTERAR Proporcoes definidas e aprovadas. Ajustes feitos manualmente. Para mudar, altere apenas aqui neste bloco. ======================================================== */ .social-icon-ig { width:35px!important;height:35px!important; object-fit:contain!important;display:block!important; position:relative!important;top:1px!important; transform:scale(1.5)!important;flex-shrink:0!important; } .social-icon-fb { width:22px!important;height:22px!important; object-fit:contain!important;display:block!important; position:relative!important;top:-3px!important; transform:scale(1.5)!important;flex-shrink:0!important; } .social-icon-wa { width:28px!important;height:28px!important; flex-shrink:0!important; position:relative!important;top:-1px!important;left:1px!important; } .footer-col h5 { font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700; letter-spacing:2.5px;text-transform:uppercase;color:var(--aria-gold);margin-bottom:18px; white-space:nowrap; } /* ======================================================== ANIMACAO: NAV VOLUNTARIOS - pisca a cada 7s ======================================================== */ @keyframes vol-pulse { 0%, 38% { color: inherit; text-shadow: none; background-color: transparent; box-shadow: 0 0 0 0 rgba(198,161,91,0); opacity: 1; } 44.25%, 56.75%, 69.25% { color: var(--aria-gold); text-shadow: 0 0 14px rgba(198,161,91,.95), 0 0 26px rgba(198,161,91,.6); background-color: rgba(198,161,91,.22); box-shadow: 0 0 22px 6px rgba(198,161,91,.65), 0 0 46px 14px rgba(198,161,91,.35); opacity: 1; } 50.5%, 63% { color: var(--aria-gold); text-shadow: none; background-color: transparent; box-shadow: 0 0 0 0 rgba(198,161,91,0); opacity: .5; } 75.5%, 100% { color: inherit; text-shadow: none; background-color: transparent; box-shadow: 0 0 0 0 rgba(198,161,91,0); opacity: 1; } } #nav-voluntarios { animation: vol-pulse 16s ease-in-out infinite; } /* ======================================================== ANIMACAO: FOOTER "SEJA UMA EMPRESA PARCEIRA" - piscar com brilho ======================================================== */ @keyframes partner-blink { 0%, 51.28%, 100% { color: var(--aria-rose-vivid); background-color: transparent; box-shadow: 0 0 0 0 rgba(198,161,91,0); } 25.64% { color: rgb(240,228,203); background-color: transparent; box-shadow: 0 0 0 1.5px rgba(198,161,91,.9); } } .footer-link-partner { position: relative; z-index: 0; display: inline-block; padding: 3px 9px; margin: -3px -9px; border-radius: var(--r-pill, 999px); background-color: transparent; animation: partner-blink 3.9s ease-in-out infinite; } .footer-col ul { display:flex;flex-direction:column;gap:9px; } .footer-link-partner { color:var(--aria-rose-vivid);font-weight:600;white-space:nowrap; } .footer-col ul li a { font-size:13.5px;color:rgba(250,247,239,.58);cursor:pointer; transition:color var(--t); } .footer-col ul li a:hover { color:var(--aria-ivory); } .footer-contact-item { display:flex;align-items:flex-start;gap:10px;margin-bottom:10px; } .footer-contact-item svg { width:14px;height:14px;stroke:var(--aria-gold);fill:none;stroke-width:1.5;flex-shrink:0;margin-top:3px; } .footer-contact-item a, .footer-contact-item span { font-size:13px;color:rgba(250,247,239,.58);transition:color var(--t);line-height:1.5; } .footer-contact-item a:hover { color:var(--aria-ivory); } .footer-col-title-link { color:inherit;text-decoration:none;cursor:pointer;transition:color var(--t); } .footer-col-title-link:hover { color:var(--aria-rose-vivid); } .footer-partner-icon { width:14px;height:14px;stroke:var(--aria-rose-vivid);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:2px; } .footer-newsletter { margin-top:22px; } .footer-newsletter p { font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(250,247,239,.32)!important;margin-bottom:10px!important; } .footer-nl-form { display:flex;gap:8px; } .footer-nl-form input { flex:1;min-width:0;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);border-radius:10px; padding:10px 14px;color:var(--aria-ivory);font-size:13px; font-family:'Nunito Sans',sans-serif;outline:none; transition:border-color var(--t); } .footer-nl-form input:focus { border-color:rgba(223,165,160,.5); } .footer-nl-form button { background:var(--aria-wine);border:none;border-radius:10px; padding:10px 14px;cursor:pointer;flex-shrink:0;transition:background var(--t); } .footer-nl-form button:hover { background:var(--aria-plum-vivid); } .footer-bottom { border-top:1px solid rgba(255,255,255,.07);padding:22px 0; padding-left:50px; padding-bottom:calc(22px + 90px); /* espaço extra p/ não ficar coberto pela barra "Doe agora" fixa no rodapé */ display:flex;align-items:center;justify-content:flex-start; gap:16px;flex-wrap:wrap;position:relative;z-index:2; } .footer-bottom span { font-family:'Montserrat',sans-serif;font-size:11.5px;color:rgba(250,247,239,.3); } .footer-bottom-links { display:flex;gap:22px; } .footer-bottom-links a { font-family:'Montserrat',sans-serif;font-size:11.5px;color:rgba(250,247,239,.3);cursor:pointer;transition:color var(--t); } .footer-bottom-links a:hover { color:rgba(250,247,239,.65); } /* Footer botanical bg */ .footer-bg-botanical { position:absolute;bottom:-20px;right:-20px;opacity:.045;pointer-events:none;z-index:1; } /* ─── SACO DE SEMENTES (posição fixa) ─── */ #seed-bag-container { position: relative; margin-left: 14px; z-index: 9990; display: flex; flex-direction: column; align-items: center; gap: 4px; } /* #seed-bag-container visível em todos os tamanhos de tela */ #seed-bag-btn { display: flex; align-items: center; cursor: pointer; padding: 0; border: none; background: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: filter .2s; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); } #seed-bag-btn:hover { filter: drop-shadow(0 0 10px rgba(198,161,91,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.45)); } #seed-bag-btn:hover #seed-bag-svg { animation: bagShake .55s ease-in-out; } #seed-bag-btn.glowing { animation: bagGlowPulse 1.2s ease-in-out 2 forwards; } #seed-bag-btn svg { width: 38px; height: 44px; flex-shrink: 0; } @keyframes bagShake { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-8deg)} 30%{transform:rotate(8deg)} 45%{transform:rotate(-5deg)} 60%{transform:rotate(5deg)} 75%{transform:rotate(-2deg)} 90%{transform:rotate(2deg)} } @keyframes bagGlowPulse { 0%,100%{ filter: drop-shadow(0 0 4px rgba(198,161,91,.3)) drop-shadow(0 2px 6px rgba(0,0,0,.45)); } 50%{ filter: drop-shadow(0 0 18px rgba(198,161,91,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.45)); } } #seed-help-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(198,161,91,.38); background: rgba(41,25,15,.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(250,247,239,.55); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.32); } #seed-help-btn:hover { border-color: rgba(198,161,91,.78); color: #C6A15B; } #seed-help-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; width: 220px; background: rgba(33,16,8,.97); border: 1px solid rgba(198,161,91,.28); border-radius: 12px; padding: 14px 16px; color: rgba(250,247,239,.82); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 12px; line-height: 1.65; z-index: 9999; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(6px); transition: opacity .22s, transform .22s; box-shadow: 0 8px 28px rgba(0,0,0,.45); } #seed-help-tooltip.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .tip-title { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #C6A15B; margin-bottom: 8px; } #seed-help-tooltip ol { list-style: decimal; padding-left: 16px; color: rgba(250,247,239,.72); } #seed-help-tooltip ol li { margin-bottom: 4px; } /* Semente flutuante */ .floating-seed { position: fixed; z-index: 10001; width: 26px; height: 26px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; pointer-events: auto; touch-action: none; filter: drop-shadow(0 3px 8px rgba(198,161,91,.65)); animation: seedFloat 2.2s ease-in-out infinite; } .floating-seed.dragging { cursor: grabbing; animation: none; } @keyframes seedFloat { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-8px) rotate(8deg)} } /* Anel de efeito no plantio */ .plant-drop-ring { position: absolute; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; border-radius: 50%; border: 2px solid rgba(198,161,91,.75); pointer-events: none; z-index: 9995; animation: ringPulse .8s ease-out forwards; } @keyframes ringPulse { 0%{transform:scale(.4);opacity:1} 100%{transform:scale(2.4);opacity:0} } /* Plantas plantadas pelo utilizador */ .user-planted { position: absolute; z-index: 9997; pointer-events: auto; } .user-planted.ghost { opacity: 1 !important; } .user-planted .plant-slot { width: 44px; margin-left: -22px; } /* ─── 20. FLOATING ─── */ .wa-float { position:fixed;bottom:90px;right:24px;z-index:9998; width:56px;height:56px;border-radius:50%; background:transparent; padding:0;border:none; box-shadow:0 4px 20px rgba(139,74,94,.45); transition:transform var(--t),box-shadow var(--t),filter var(--t); overflow:hidden; display:block; line-height:0; } .wa-float:hover { transform:scale(1.10); box-shadow:0 8px 28px rgba(90,52,71,.60); filter:brightness(.85); } .wa-float img { width:56px;height:56px; display:block; object-fit:cover; border-radius:50%; } #mobile-cta-bar { display:flex;position:fixed;bottom:0;left:0;right:0;z-index:79; background:var(--aria-ivory);border-top:1px solid var(--aria-border-gold); padding:12px 20px;padding-bottom:calc(12px + env(safe-area-inset-bottom)); gap:12px;align-items:center;box-shadow:0 -4px 20px rgba(59,37,26,.10); transform:translateY(100%);pointer-events:none; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); } #mobile-cta-bar.visible { transform:translateY(0);pointer-events:auto; } .mob-cta-text { flex:1;font-size:12.5px;color:var(--aria-muted);line-height:1.3; } .mob-cta-text strong { display:block;font-size:13.5px;color:var(--aria-brown);font-family:'Libre Baskerville',serif; } .mob-cta-btn { background:var(--aria-wine);color:var(--aria-ivory);border:none; border-radius:var(--r-pill);padding:12px 22px; font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700; cursor:pointer;flex-shrink:0;touch-action:manipulation; transition:background var(--t),transform var(--t); } .mob-cta-btn:hover { background:var(--aria-plum);transform:scale(.98); } @media (min-width: 769px) { .hero-body > .container { transform: translateY(-70px); } } @media (min-width:769px) { #mobile-cta-bar { justify-content:center;gap:24px;padding:14px 40px; } .mob-cta-text { flex:none;display:flex;align-items:center;gap:10px;font-size:15px; } .mob-cta-text strong { display:inline;font-size:16px; } .mob-cta-text strong::after { content:' ·'; color:var(--aria-border); } .mob-cta-btn { font-size:14px;padding:12px 28px; } } /* Cookie */ #cookie { position:fixed;bottom:24px;left:24px;right:24px;max-width:500px; background:var(--aria-brown);color:var(--aria-ivory); border-radius:var(--r-lg);padding:20px 24px; display:flex;align-items:center;gap:18px;flex-wrap:wrap;z-index:88; box-shadow:0 8px 32px rgba(59,37,26,.3); opacity:0;transform:translateY(20px);pointer-events:none; transition:opacity 300ms ease,transform 300ms ease; } #cookie.show { opacity:1;transform:translateY(0);pointer-events:all; } #cookie p { font-size:13px;color:rgba(250,247,239,.8);flex:1;line-height:1.6; } #cookie a { color:var(--aria-blush);cursor:pointer; } .cookie-btns { display:flex;gap:8px;flex-shrink:0; } .btn-decline { padding:8px 18px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);color:rgba(250,247,239,.8);border:none;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--t); } .btn-decline:hover { background:rgba(255,255,255,.18); } .btn-accept { padding:8px 18px;border-radius:var(--r-pill);background:var(--aria-wine);color:var(--aria-ivory);border:none;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:background var(--t); } .btn-accept:hover { background:var(--aria-plum); } /* ─── 21. HEROES DE PÁGINAS INTERNAS ─── */ .page-hero { padding:140px 0 64px; background:var(--aria-cream); background-image:radial-gradient(ellipse at 80% 40%, rgba(223,165,160,.12), transparent 60%); position:relative;overflow:visible; } .page-hero-bg-orb { position:absolute;bottom:-40px;left:-40px;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(139,74,94,.06),transparent 70%);pointer-events:none; } .page-hero h1 { max-width:660px;margin-bottom:18px; } .page-hero p { font-size:17.5px;color:var(--aria-muted);max-width:500px;line-height:1.82; } .page-hero em { color:var(--aria-wine);font-style:italic; } /* ─── 22. INSTAGRAM ─── */ .insta-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:6px; } .insta-item { aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;cursor:pointer; } .insta-item img { width:100%;height:100%;object-fit:cover;transition:transform 350ms ease; } .insta-item:hover img { transform:scale(1.06); } .insta-overlay { position:absolute;inset:0;background:rgba(90,52,71,0); display:flex;align-items:center;justify-content:center;transition:background 250ms ease; } .insta-item:hover .insta-overlay { background:rgba(90,52,71,.5); } .insta-overlay svg { width:26px;height:26px;stroke:#fff;stroke-width:1.5;fill:none;opacity:0;transition:opacity 250ms ease; } .insta-item:hover .insta-overlay svg { opacity:1; } .behold-feed-wrap { width:100%;min-height:220px;position:relative; } .behold-feed-wrap behold-widget { display:block;width:100%; } /* Cobre o skeleton colorido padrão do widget do Behold enquanto ele carrega: um grid de quadrados discretos (cinza/rosa clarinho) marcando o espaço de cada foto, em vez de um bloco sólido escondendo tudo. */ .behold-loading-veil { position:absolute;inset:0;z-index:2;pointer-events:none; transition:opacity 400ms ease; display:grid;grid-template-columns:repeat(3,1fr);gap:10px; } .behold-loading-veil.hidden { opacity:0; } .behold-loading-veil span { background:#EAE0DC;border-radius:6px;aspect-ratio:1/1; } @media (max-width:640px) { .behold-loading-veil { grid-template-columns:repeat(2,1fr); } } /* ─── 23. BADGE DE CONFIANÇA ─── */ .badge-trust { display:inline-flex;align-items:center;gap:8px; background:var(--aria-card);border:1px solid var(--aria-border-gold); border-radius:var(--r-pill);padding:7px 16px; font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600; color:var(--aria-brown);margin-bottom:20px; } .badge-trust-dot { width:6px;height:6px;border-radius:50%;background:var(--aria-sage-vivid);animation:pulse-dot 2s infinite; } /* ─── 24. CHIPS ─── */ .chip { display:inline-flex;align-items:center;gap:6px; background:rgba(139,74,94,.08);color:var(--aria-wine); border-radius:var(--r-pill);padding:5px 14px; font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:600; border:1px solid rgba(139,74,94,.14);transition:background var(--t); } .chip-sage { background:rgba(111,116,104,.10);color:var(--aria-sage-text);border-color:rgba(61,74,58,.18); } .chip-gold { background:rgba(198,161,91,.12);color:var(--aria-brown);border-color:rgba(198,161,91,.22); } /* ─── 25. CONTACT CARDS ─── */ .contact-card { background:var(--aria-card);border-radius:var(--r-md); padding:20px 22px;display:flex;align-items:center;gap:16px; border:1px solid var(--aria-border-gold); transition:transform var(--t),box-shadow var(--t); } .contact-card:hover { transform:translateY(-2px);box-shadow:var(--shadow-sm); } .contact-card-icon { width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .contact-card-label { font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--aria-muted);margin-bottom:3px; } .contact-card-value { font-size:14.5px;font-weight:600;color:var(--aria-wine);transition:color var(--t); } /* ─── 26. RESPONSIVO ─── */ @media (max-width:1024px) { .footer-grid { grid-template-columns:1.5fr 1fr 1fr; } .footer-grid .footer-brand { grid-column:1/-1; } } @media (max-width:768px) { h1{font-size:34px;} h2{font-size:28px;} h3{font-size:22px;} .section{padding:64px 0;} .section-sm{padding:46px 0;} .container,.container-wide{padding:0 20px;} .grid-2{grid-template-columns:1fr;gap:36px;} .grid-3{grid-template-columns:1fr;gap:20px;} .grid-4{grid-template-columns:1fr 1fr;gap:16px;} .hero-grid{grid-template-columns:1fr;} .hero-visual{display:none;} .hero-section{min-height:auto;padding-top:10px;} .hero-bg-logo{width:1600vw!important;top:120px!important;left:70%!important;right:auto!important;transform:translateX(-50%)!important;opacity:.30!important;} .hero-nav{padding:18px 20px;} .hero-body{padding:120px 0 60px;} .hero-nav-links{display:none;} .hero-hamburger{display:flex;} .nav-links{display:none;} .hamburger{display:flex;} .insta-grid{grid-template-columns:repeat(3,1fr);} .footer-grid{grid-template-columns:1fr 1fr;gap:20px 24px;} .footer-grid .footer-brand{grid-column:1/-1;} .footer-contato-col{grid-column:1/-1;} .footer-gov-col{grid-column:1/-1;} .footer-newsletter-col{grid-column:1/-1;} .form-row{grid-template-columns:1fr;} .form-card{padding:28px 20px;} .wa-float{bottom:90px;} #cookie{left:12px;right:12px;bottom:80px;} .hero-ctas{flex-direction:column;align-items:flex-start;} .section-header{margin-bottom:40px;} #priv-layout{grid-template-columns:1fr!important;} .priv-sidebar{display:none!important;} } @media (max-width:480px) { .grid-4{grid-template-columns:1fr;} .stat-num{font-size:44px;} .hero-bg-logo{width:1600vw!important;top:120px!important;left:70%!important;right:auto!important;transform:translateX(-50%)!important;opacity:.30!important;} } @media (max-width:768px) { /* Plantas: tamanho original fixo, sem variação de escala */ .plant-graphic.born { transform: scale(1) !important; } /* Slots menores no mobile */ .plant-point .plant-slot { width: 32px; margin-left: -16px; } .plant-slot.wide { width: 46px; margin-left: -23px; } .plant-point.nav-deco .plant-slot { width: 22px; margin-left: -11px; } .plant-point.nav-deco .plant-slot.wide { width: 30px; margin-left: -15px; } /* Performance: renderização lazy das seções fora do viewport */ .section, .section-sm, .page-hero { content-visibility: auto; contain-intrinsic-size: 0 550px; } /* Impede que plantas nas bordas causem scroll horizontal */ .plant-zone { overflow-x: clip; } } .responsive-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} @media(max-width:768px){.responsive-grid-3{grid-template-columns:1fr;gap:14px;}} @media(min-width:769px) and (max-width:1024px){.responsive-grid-3{grid-template-columns:repeat(2,1fr);}} /* ─── PROJETOS: imagens sem corte ─── */ .proj-img-contain-wrap { border-radius: var(--r-lg); background: var(--aria-card); display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 280px; } .proj-img-contain-wrap img { width: 100%; height: auto; max-height: 340px; object-fit: contain; display: block; } /* Emerging initiative cards with image */ .emerging-img-wrap { display: flex; align-items: center; justify-content: center; padding: 18px 18px 0; background: transparent; } .emerging-img-wrap img { width: 100%; height: auto; max-height: 175px; object-fit: contain; display: block; } /* WhatsApp icon in button */ .wa-btn-icon { width: 28px; height: 28px; object-fit: contain; display: inline-block; vertical-align: middle; margin: -4px 0 -4px; flex-shrink: 0; position: relative; top: 1px; } /* Projeto Se Prepara Menina: título em linha */ .proj-title-nowrap { font-size: clamp(22px, 3.5vw, 36px); } /* Iniciativas em desenvolvimento: título em linha */ .iniciativas-nowrap { font-size: clamp(20px, 3vw, 32px); } @media (min-width: 541px) { .proj-title-nowrap { white-space: nowrap; } .iniciativas-nowrap { white-space: nowrap; } } /* Distância extra entre roupinha e iniciativas */ .section-iniciativas { margin-top: 72px; } /* ─── FLOATING FIGURES (Depoimentos & Casos de Resgate) ─── */ .floating-figures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 36px 24px; justify-items: center; padding: 8px 0 16px; } .floating-story-trigger { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; border: none; background: none; padding: 0; text-align: center; } .floating-story-shape { overflow: hidden; transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 380ms ease; will-change: transform; } .floating-story-shape img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Shape variants */ .shape-circle .floating-story-shape { width: 112px; height: 112px; border-radius: 50%; } .shape-organic .floating-story-shape { width: 112px; height: 122px; border-radius: 58% 42% 60% 40% / 52% 56% 44% 48%; } .shape-rect .floating-story-shape { width: 100px; height: 130px; border-radius: 38% 62% 42% 58% / 44% 40% 60% 56%; } .floating-story-trigger:hover .floating-story-shape { transform: translateY(-10px) scale(1.06); box-shadow: var(--shadow-lg); } .floating-story-trigger:focus-visible .floating-story-shape { outline: 2px solid var(--aria-wine); outline-offset: 4px; } .floating-story-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; } .floating-story-name { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--aria-brown); text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.3; max-width: 120px; } @keyframes floating-sway { 0%, 100% { transform: translateY(0px) rotate(-1.2deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } } .floating-story-trigger .floating-story-shape { animation: floating-sway 5.2s ease-in-out infinite; } .floating-story-trigger:nth-child(2n) .floating-story-shape { animation-delay: -1.8s; animation-duration: 6.1s; } .floating-story-trigger:nth-child(3n) .floating-story-shape { animation-delay: -3.2s; animation-duration: 4.8s; } .floating-story-trigger:nth-child(4n) .floating-story-shape { animation-delay: -2.4s; animation-duration: 7s; } .floating-story-trigger:nth-child(5n) .floating-story-shape { animation-delay: -0.9s; animation-duration: 5.7s; } .floating-story-trigger:hover .floating-story-shape { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .floating-story-trigger .floating-story-shape { animation: none; } } /* ─── IMPACT MODAL ─── */ .impact-modal-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(29, 13, 10, 0.72); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 300ms ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .impact-modal-backdrop.open { opacity: 1; pointer-events: all; } .impact-modal-panel { background: var(--aria-ivory); border-radius: var(--r-xl); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-xl); position: relative; transform: scale(0.88) translateY(28px); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 360ms ease; opacity: 0; display: flex; flex-direction: column; } .impact-modal-backdrop.open .impact-modal-panel { transform: scale(1) translateY(0); opacity: 1; } .impact-modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(59,37,26,.12); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background var(--t), transform var(--t); } .impact-modal-close:hover { background: rgba(59,37,26,.22); transform: scale(1.1); } .impact-modal-photo { width: 100%; height: 280px; object-fit: cover; border-radius: var(--r-xl) var(--r-xl) 0 0; display: block; flex-shrink: 0; } .impact-modal-photo-ph { width: 100%; height: 200px; border-radius: var(--r-xl) var(--r-xl) 0 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .impact-modal-content { padding: 28px 36px 36px; flex: 1; } .impact-modal-content .modal-name { font-family: 'Libre Baskerville', serif; font-size: 18px; font-weight: 700; color: var(--aria-brown); margin-bottom: 4px; } .impact-modal-content .modal-role { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; color: var(--aria-rose); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; } .impact-modal-content .modal-text { font-family: 'Libre Baskerville', Georgia, serif; font-size: 16px; font-style: italic; color: var(--aria-brown); line-height: 1.76; } .impact-modal-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; } .impact-placeholder { aspect-ratio: 1; border-radius: var(--r-md); background: var(--aria-card); border: 1.5px dashed var(--aria-border-gold); display: flex; align-items: center; justify-content: center; } .impact-placeholder-inner { font-family: 'Montserrat', sans-serif; font-size: 10px; color: var(--aria-muted); text-align: center; padding: 8px; line-height: 1.5; } /* Variação para casos de resgate */ .impact-modal-panel.rescue-variant { border-top: 4px solid var(--aria-wine); } .impact-modal-panel.rescue-variant .modal-name { color: var(--aria-wine); } /* ── Logo hero mobile: regra de alta especificidade, breakpoint amplo ── */ @media (max-width:1100px) { section.hero-section img.hero-bg-logo { width: 200vw !important; top: 400px !important; left: 88% !important; right: auto !important; transform: translateX(-50%) !important; opacity: .30 !important; } } @media (max-width: 768px) { .floating-figures-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 24px 14px; } .shape-circle .floating-story-shape { width: 84px; height: 84px; } .shape-organic .floating-story-shape { width: 84px; height: 92px; } .shape-rect .floating-story-shape { width: 78px; height: 102px; } .impact-modal-content { padding: 22px 20px 28px; } .impact-modal-content .modal-text { font-size: 14.5px; } .impact-modal-gallery { grid-template-columns: repeat(2, 1fr); } .impact-modal-photo { height: 220px; } } /* ─── SELO KUPIM DIGITAL ─── */ #kupim-badge-wrap{ position:absolute; bottom:174px; right:0; z-index:9999; height:64px; } #kupim-badge{ position:absolute; top:0; right:0; height:100%; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; background:#0f1d31; opacity:0; cursor:pointer; white-space:nowrap; box-sizing:border-box; clip-path: inset(0 0 0 calc(100% - 44px) round 32px); transition: clip-path 1.5s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease, box-shadow 0.6s ease; box-shadow:0 4px 14px rgba(0,0,0,0); } #kupim-badge-wrap:hover #kupim-badge, #kupim-badge-wrap:focus-within #kupim-badge, #kupim-badge-wrap.is-open #kupim-badge{ opacity:0.9; clip-path: inset(0 0 0 0 round 32px 0 0 32px); box-shadow:0 6px 24px rgba(0,0,0,0.35); } #kupim-badge .k-logo-spacer{ flex:0 0 44px; width:44px; height:44px; } .k-logo-wrap{ position:absolute; top:0; right:0; width:44px; height:64px; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; opacity:0.3; transform:translateX(0) scale(1); transition: transform 1.5s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease; } #kupim-badge-wrap:hover .k-logo-wrap, #kupim-badge-wrap:focus-within .k-logo-wrap, #kupim-badge-wrap.is-open .k-logo-wrap{ opacity:1.0; transform:translateX(calc(-1 * var(--k-shift, 596px))) scale(3); } @keyframes k-hue-wave{ 0% { filter:hue-rotate(0deg) saturate(1); } 18% { filter:hue-rotate(14deg) saturate(1); } 36% { filter:hue-rotate(0deg) saturate(1); } 54% { filter:hue-rotate(14deg) saturate(1); } 70% { filter:hue-rotate(0deg) saturate(1); } 78% { filter:hue-rotate(100deg) saturate(2.6); } 84% { filter:hue-rotate(160deg) saturate(2.8); } 90% { filter:hue-rotate(160deg) saturate(2.8); } 96% { filter:hue-rotate(60deg) saturate(1.6); } 100% { filter:hue-rotate(0deg) saturate(1); } } .k-logo-wrap svg{ width:20px; height:auto; fill:#eff3f8; display:block; animation: k-hue-wave 8s ease-in-out infinite; } .k-logo-wrap stop{ transition: stop-color 0.4s ease; } #kupim-badge .badge-text{ flex:0 0 auto; width:max-content; max-width:500px; padding-left:2px; padding-right:35px; font-size:1.0rem; line-height:1.6; color:#eff3f8; opacity:0.92; white-space:normal; text-align:right; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } #kupim-badge .badge-text b{ font-weight:600; opacity:1; } /* ═══ ESCALA ÓPTICA 125% — ampliação real de layout, sem zoom/scale global ═══ */ @media (min-width:860px) { body { font-size:18px; } h1 { font-size:clamp(46px,6.6vw,82px); } h2 { font-size:clamp(36px,4.8vw,62px); } h3 { font-size:clamp(27px,3.3vw,43px); } h4 { font-size:clamp(19px,2.1vw,27px); } .eyebrow { gap:12px; font-size:12px; letter-spacing:2.8px; margin-bottom:17px; } .eyebrow::before { width:27px; } .container { max-width:1180px; padding-inline:26px; } .container-wide { max-width:1480px; padding-inline:26px; } .section { padding-block:clamp(104px,8.5vw,120px); } .section-sm { padding-block:clamp(72px,6vw,82px); } .grid-2 { gap:clamp(54px,5vw,78px); } .grid-3 { gap:clamp(28px,2.5vw,36px); } .grid-4 { gap:clamp(22px,2vw,30px); } .section-header { max-width:720px; margin-bottom:clamp(60px,5vw,70px); } .section-header p { font-size:19px; margin-top:15px; line-height:1.72; } #announce-bar { min-height:42px; padding:10px 52px; font-size:14.5px; } .ann-close { width:30px;height:30px;right:16px; } .nav-inner { max-width:1180px; height:76px; padding-inline:26px; gap:28px; } .nav-logo { gap:12px; } .nav-logo-icon { width:44px;height:44px; } .nav-logo-text { font-size:24px; } .nav-logo-text small { font-size:9.5px;letter-spacing:2.4px; } .nav-link { font-size:14px;padding:10px 14px; } .nav-cta { padding:12px 24px;font-size:14.5px; } .hero-body { padding-block:clamp(132px,11vw,160px) 94px; } .hero-grid { grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:clamp(34px,4vw,56px); } .hero-h1 { font-size:clamp(48px,6.25vw,80px); margin-bottom:27px; } .hero-sub { max-width:540px; font-size:clamp(20px,2.2vw,23px); line-height:1.72; margin-bottom:42px; } .hero-ctas { gap:17px;margin-bottom:52px; } .hero-trust { gap:24px; } .hero-trust-item { gap:8px;font-size:13.5px; } .hero-trust-item svg { width:18px;height:18px; } .hero-visual { height:590px; } .hero-orb { width:500px;height:500px; } .hero-img-wrap { width:440px;height:465px; } .hero-badge { padding:15px 20px; } .hero-badge-num { font-size:34px; } .hero-badge-label { font-size:11.5px; } .hero-badge-1 { top:16px;right:-12px; } .hero-badge-2 { bottom:54px;left:-16px; } .badge-trust { gap:10px; padding:9px 20px; font-size:13px; margin-bottom:24px; } .badge-trust-dot { width:7px;height:7px; } .btn-primary, .btn-secondary, .btn-ghost, .btn-gold { min-height:50px; gap:10px; padding:15px 34px; font-size:15.5px; } .btn-sm { min-height:44px!important; padding:12px 25px!important; font-size:14px!important; } .aria-card, .aria-card-ivory { padding:clamp(36px,3vw,42px); } .project-card-img, .project-card-img-ph { height:250px; } .project-card-body { padding:32px 30px; } .project-status { font-size:12.5px;padding:6px 14px; } .project-card-link { font-size:14px; } .story-card { padding:36px; } .story-avatar-ph { width:64px;height:64px; } .story-name { font-size:14px; } .story-role { font-size:12.5px; } .team-card { padding:32px 24px; } .team-photo-wrap { width:94px;height:94px;margin-bottom:17px; } .team-name { font-size:18px; } .team-role { font-size:12px; } .tier-card { padding:44px 32px; } .tier-desc { font-size:15.5px; } .stat-box { padding:38px 24px; } .stat-num { font-size:clamp(60px,7.8vw,96px);margin-bottom:10px; } .stat-label { font-size:13px;letter-spacing:.65px; } .form-card { padding:48px; } .form-card h3 { font-size:34px; } .form-lead { font-size:16.5px;margin-bottom:31px; } .form-row { gap:20px; } .form-group { gap:8px;margin-bottom:20px; } .form-group label { font-size:12.5px;letter-spacing:.9px; } .form-group input, .form-group textarea, .form-group select { border-radius:18px; padding:16px 21px; font-size:16.5px; } .form-group textarea { min-height:138px; } .faq-btn { padding:23px 30px;font-size:17px;gap:20px; } .faq-answer { padding-inline:30px; } .faq-answer p { font-size:16.5px;padding-bottom:25px; } .donate-opt { padding:20px 25px;gap:20px; } .donate-icon { width:52px;height:52px; } .donate-text strong { font-size:16.5px; } .donate-text span { font-size:14px; } .pix-detail { padding:20px 25px;gap:15px; } .pix-qr { width:46px;height:46px; } .pix-info .pix-label { font-size:11.5px; } .pix-info .pix-key { font-size:15px; } .pix-info .pix-name { font-size:12.5px; } .pix-copy { padding:10px 20px;font-size:13.5px; } .blockquote-card { padding:34px 40px; } .blockquote-card blockquote { font-size:20px;margin-bottom:19px; } .blockquote-card cite { font-size:14px; } .page-hero { padding:clamp(156px,13vw,180px) 0 78px; } .page-hero h1 { max-width:790px;margin-bottom:22px; } .page-hero p { max-width:610px;font-size:21px;line-height:1.75; } .page-hero-bg-orb { width:310px;height:310px; } #page-quemsomos .page-hero, #page-projetos .page-hero, #page-voluntarios .page-hero, #page-parceria .page-hero, #page-produtos .page-hero, #page-impacto .page-hero, #page-contato .page-hero, #page-apoie .page-hero { padding-top:clamp(70px,6vw,86px); } .chip { gap:8px;padding:7px 17px;font-size:13px; } .contact-card { padding:25px 27px;gap:20px; } .contact-card-icon { width:56px;height:56px;border-radius:16px; } .contact-card-label { font-size:11.5px; } .contact-card-value { font-size:17px; } footer { padding-top:96px; } .footer-grid { gap:clamp(44px,4vw,60px);margin-bottom:72px; } .footer-brand p { max-width:330px;font-size:16px; } .footer-cnpj { font-size:12px; } .footer-wm-icon { width:46px;height:46px; } .footer-wm-text { font-size:24px; } .footer-wm-text small { font-size:9px; } .social-btn { width:41px;height:41px;border-radius:11px; } .social-btn svg { width:19px;height:19px; } .footer-col h5 { font-size:11.5px;margin-bottom:22px; } .footer-col ul { gap:11px; } .footer-col ul li a { font-size:15.5px; } .footer-contact-item { gap:12px;margin-bottom:12px; } .footer-contact-item svg { width:17px;height:17px; } .footer-contact-item a, .footer-contact-item span { font-size:15px; } .footer-newsletter p { font-size:11.5px; } .footer-nl-form input { padding:12px 16px;font-size:15px; } .footer-nl-form button { padding:12px 16px; } .footer-bottom span, .footer-bottom-links a { font-size:13px; } #cookie { max-width:600px;padding:25px 30px;gap:22px; } #cookie p { font-size:15.5px; } .btn-decline, .btn-accept { padding:10px 22px;font-size:13.5px; } } @media (min-width:860px) and (max-width:1024px) { .nav-inner { padding-inline:18px; gap:12px; } .nav-logo { gap:9px; } .nav-logo-icon { width:38px;height:38px; } .nav-logo-text { font-size:20px; } .nav-logo-text small { font-size:8px;letter-spacing:2px; } .nav-links { gap:1px; } .nav-link { padding:9px 9px;font-size:12.5px; } .nav-cta { margin-left:3px;padding:11px 17px;font-size:13px; } } /* Programa ARIA — Mulheres que Lideram */ .program-details { margin:0 0 72px;padding:clamp(22px,4vw,42px); border:1px solid var(--aria-border-gold);border-radius:var(--r-lg); background:linear-gradient(145deg,var(--aria-cream),var(--aria-ivory)); box-shadow:var(--shadow-sm); } .program-details-header { max-width:780px;margin:0 auto 32px;text-align:center; } .program-details-header h3 { font-size:clamp(28px,4vw,42px);margin-bottom:12px; } .program-details-header p { color:var(--aria-muted);font-size:clamp(14px,1.8vw,17px);line-height:1.75; } .program-info-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:20px;margin-bottom:34px; } .program-info-panel { padding:clamp(20px,3vw,28px);border-radius:var(--r-md); background:#fff;border:1px solid var(--aria-border); } .program-info-panel h4 { font-size:clamp(20px,2.8vw,25px);margin-bottom:16px; } .program-check-list { display:grid;gap:10px; } .program-check-list li { position:relative;padding-left:25px;color:var(--aria-muted); font-size:13.5px;line-height:1.6; } .program-check-list li::before { content:"✓";position:absolute;left:0;top:0;width:18px;height:18px; display:flex;align-items:center;justify-content:center;border-radius:50%; background:var(--aria-wine);color:#fff;font-size:10px;font-weight:700; } .program-section-title { text-align:center;font-size:clamp(25px,3.8vw,35px);margin:0 0 24px; } .program-track-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px;margin-bottom:38px; } .program-track-card { overflow:hidden;border-radius:var(--r-md);background:#fff; border:1px solid var(--aria-border);box-shadow:var(--shadow-sm); } .program-track-card header { min-height:92px;padding:20px;background:var(--aria-wine);color:#fff; } .program-track-card:nth-child(2) header { background:#B77A3F; } .program-track-card:nth-child(3) header { background:var(--aria-plum); } .program-track-card header span { display:block;margin-bottom:5px;font:700 10px 'Montserrat',sans-serif; text-transform:uppercase;letter-spacing:.8px;opacity:.78; } .program-track-card header h4 { color:#fff;font-size:19px;margin:0;line-height:1.35; } .program-track-content { padding:20px; } .program-track-content strong { display:block;margin:0 0 9px;color:var(--aria-brown); font:700 10.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.6px; } .program-track-content ul { display:grid;gap:7px;margin-bottom:18px; } .program-track-content li { position:relative;padding-left:14px;color:var(--aria-muted); font-size:12.5px;line-height:1.5; } .program-track-content li::before { content:"";position:absolute;left:0;top:.62em;width:5px;height:5px; border-radius:50%;background:var(--aria-rose); } .program-course-note { padding:12px;border-radius:10px;background:var(--aria-cream); color:var(--aria-muted);font-size:11.5px;line-height:1.6; } .program-journey-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:14px;margin-bottom:34px;counter-reset:program-stage; } .program-journey-step { position:relative;padding:54px 18px 20px;border-radius:var(--r-md); background:#fff;border:1px solid var(--aria-border);counter-increment:program-stage; } .program-journey-step::before { content:counter(program-stage);position:absolute;left:18px;top:16px; width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--aria-wine);color:#fff;font:700 12px 'Montserrat',sans-serif; } .program-journey-step h4 { font-size:17px;margin-bottom:7px; } .program-journey-step span { display:block;margin-bottom:8px;color:var(--aria-wine); font:700 10.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.5px; } .program-journey-step p { color:var(--aria-muted);font-size:12.5px;line-height:1.6; } .program-format-card { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:20px;padding:clamp(20px,3vw,30px);border-radius:var(--r-md); background:var(--aria-plum);color:#fff; } .program-format-card h4 { color:#fff;font-size:24px;margin-bottom:12px; } .program-format-card p { color:rgba(255,255,255,.82);line-height:1.7;font-size:13.5px; } .program-format-points { display:grid;gap:10px;align-content:center; } .program-format-point { padding:10px 13px;border-radius:10px;background:rgba(255,255,255,.1); color:rgba(255,255,255,.9);font-size:12.5px;line-height:1.5; } .program-detail-actions { display:flex;align-items:center;justify-content:center;gap:12px; flex-wrap:wrap;margin-top:28px; } /* Calendário e inscrição de voluntários — página Projetos */ .project-planning-shell { background:var(--aria-cream);border:1px solid var(--aria-border-gold); border-radius:var(--r-lg);padding:clamp(18px,3vw,34px);box-shadow:var(--shadow-sm); } .project-view-switch { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px; } .project-view-button { min-height:44px;padding:10px 18px;border-radius:999px; border:1px solid var(--aria-border-gold);background:var(--aria-ivory); color:var(--aria-brown);font-family:'Montserrat',sans-serif;font-size:13px; font-weight:700;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t); } .project-view-button[aria-selected="true"] { background:var(--aria-wine);border-color:var(--aria-wine);color:#fff; } .project-view-panel[hidden] { display:none; } .project-timeline-groups { display:grid;gap:24px; } .project-timeline-group { padding:clamp(18px,2.5vw,26px);border-radius:var(--r-md); background:var(--aria-ivory);border:1px solid var(--aria-border); } .project-timeline-heading { display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:16px; } .project-timeline-heading h3 { font-size:clamp(21px,2.6vw,27px);margin:0; } .project-timeline-count { padding:5px 11px;border-radius:999px;background:var(--aria-card); color:var(--aria-wine);font:700 11px 'Montserrat',sans-serif; text-transform:uppercase;letter-spacing:.7px; } .project-timeline-items { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px; } .project-timeline-card { position:relative;padding:18px 18px 18px 22px;border-radius:var(--r-sm); background:#fff;border:1px solid var(--aria-border);min-width:0; } .project-timeline-card::before { content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px; border-radius:0 4px 4px 0;background:var(--aria-rose); } .project-timeline-card.is-future::before { background:var(--aria-gold); } .project-timeline-card h4 { font-size:17px;margin:0 0 7px; } .project-timeline-card p { color:var(--aria-muted);font-size:13px;line-height:1.6;margin:0; } .project-timeline-meta { display:block;margin-top:9px;color:var(--aria-wine); font:700 10.5px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:.6px; } .project-empty-state { color:var(--aria-muted);font-size:14px;line-height:1.7; padding:18px;border:1px dashed var(--aria-border-gold);border-radius:var(--r-sm); } .project-month-toolbar { display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-bottom:18px; } .project-month-toolbar h3 { font-size:clamp(22px,3vw,30px);margin:0;text-transform:capitalize; } .project-month-nav { display:flex;gap:8px; } .project-month-nav button { width:44px;height:44px;border-radius:50%;border:1px solid var(--aria-border-gold); background:var(--aria-ivory);color:var(--aria-wine);font-size:20px;cursor:pointer; } .continuous-projects { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding:14px; background:rgba(155,107,140,.08);border-radius:var(--r-sm); } .continuous-projects strong { width:100%;font:700 11px 'Montserrat',sans-serif; text-transform:uppercase;letter-spacing:.7px;color:var(--aria-brown); } .continuous-project-pill { padding:6px 10px;border-radius:999px;background:var(--aria-ivory); border:1px solid var(--aria-border-gold);color:var(--aria-wine); font:700 10.5px 'Montserrat',sans-serif; } .project-calendar-weekdays, .project-calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px; } .project-calendar-weekdays { margin-bottom:6px; } .project-calendar-weekdays span { text-align:center;color:var(--aria-muted); font:700 10px 'Montserrat',sans-serif;text-transform:uppercase; } .project-calendar-day { min-width:0;min-height:92px;padding:8px;border-radius:10px; background:var(--aria-ivory);border:1px solid var(--aria-border); } .project-calendar-day.is-outside { opacity:.42;background:transparent; } .project-calendar-day.is-today { border-color:var(--aria-wine);box-shadow:inset 0 0 0 1px var(--aria-wine); } .project-calendar-day-number { display:block;margin-bottom:6px;color:var(--aria-brown); font:700 11px 'Montserrat',sans-serif; } .project-calendar-event { display:block;width:100%;margin-top:4px;padding:4px 5px;border-radius:6px; background:var(--aria-card);color:var(--aria-wine); font:700 9px/1.3 'Montserrat',sans-serif;overflow-wrap:anywhere; } .project-calendar-note { margin-top:16px;color:var(--aria-muted);font-size:13px;line-height:1.65; } .volunteer-project-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(20px,3vw,34px);align-items:stretch; } .volunteer-process-card, .volunteer-form-card { border-radius:var(--r-lg);padding:clamp(22px,3vw,34px); border:1px solid var(--aria-border-gold); } .volunteer-process-card { background:var(--aria-cream); } .volunteer-form-card { background:var(--aria-plum);color:#fff; } .volunteer-steps { display:grid;gap:14px;margin-top:24px; } .volunteer-step { display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start; } .volunteer-step-number { width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--aria-wine);color:#fff;font:700 12px 'Montserrat',sans-serif; } .volunteer-step strong { display:block;color:var(--aria-brown);font-size:14px;margin-bottom:3px; } .volunteer-step p { color:var(--aria-muted);font-size:13px;line-height:1.6;margin:0; } .volunteer-form-card h3 { color:#fff;margin-bottom:12px; } .volunteer-form-card p { color:rgba(255,255,255,.82);line-height:1.75;margin-bottom:18px; } .volunteer-form-card ul { display:grid;gap:9px;margin:0 0 24px;padding-left:20px;color:rgba(255,255,255,.88); font-size:13.5px;line-height:1.55; } .volunteer-form-open { width:100%;min-height:48px;border:0;border-radius:999px; background:#fff;color:var(--aria-wine); font:700 13px 'Montserrat',sans-serif;cursor:pointer; transition:transform var(--t),box-shadow var(--t),background var(--t); } .volunteer-form-open:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18); background:var(--aria-cream); } .volunteer-form-status { margin:12px 0 0!important;color:rgba(255,255,255,.72)!important; font-size:12px;line-height:1.55; } .volunteer-questionnaire-dialog-page-wrap { display:block; } .volunteer-questionnaire-dialog { width:100%;background:var(--aria-ivory); border:1px solid var(--aria-border-gold);border-radius:var(--r-lg); box-shadow:0 20px 56px rgba(31,18,23,.16); } .volunteer-questionnaire-header { position:sticky;top:0;z-index:2;display:flex;align-items:flex-start; justify-content:space-between;gap:20px;padding:clamp(20px,3vw,30px); background:rgba(250,247,239,.97);border-bottom:1px solid var(--aria-border); backdrop-filter:blur(8px); } .volunteer-questionnaire-header h2 { font-size:clamp(25px,4vw,36px);margin:3px 0 0; } .volunteer-questionnaire-close { width:44px;height:44px;flex:0 0 44px;border-radius:50%; border:1px solid var(--aria-border-gold);background:var(--aria-cream); color:var(--aria-wine);font-size:25px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;text-decoration:none; } .volunteer-questionnaire-body { padding:clamp(20px,4vw,38px); } .questionnaire-notice { padding:15px 17px;margin-bottom:24px;border-radius:var(--r-sm); background:rgba(198,161,91,.13);border:1px solid rgba(198,161,91,.32); color:var(--aria-brown);font-size:13px;line-height:1.7; } .questionnaire-section { border:1px solid var(--aria-border);border-radius:var(--r-md); padding:clamp(18px,3vw,28px);margin:0 0 22px;background:#fff; } .questionnaire-section legend { max-width:100%;padding:0 10px;color:var(--aria-wine); font-family:'Libre Baskerville',serif;font-size:clamp(18px,2.8vw,23px); font-weight:700; } .questionnaire-help { color:var(--aria-muted);font-size:12.5px;line-height:1.6;margin:-2px 0 16px; } .questionnaire-choice-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:10px;margin-bottom:18px; } .questionnaire-choice { display:flex;align-items:flex-start;gap:10px;min-height:46px;padding:11px 13px; border:1px solid var(--aria-border);border-radius:12px; background:var(--aria-cream);color:var(--aria-brown); font:600 12.5px/1.45 'Montserrat',sans-serif;cursor:pointer; } .questionnaire-choice input { width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--aria-wine); } .questionnaire-consent { display:flex;align-items:flex-start;gap:10px;margin-bottom:13px; color:var(--aria-brown);font-size:13px;line-height:1.6;cursor:pointer; } .questionnaire-consent input { width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--aria-wine); } .questionnaire-actions { display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:26px; } .questionnaire-actions .btn-primary, .questionnaire-actions .btn-secondary { min-height:48px; } .questionnaire-success { text-align:center;padding:clamp(22px,5vw,46px) 10px; } .questionnaire-success-icon { width:64px;height:64px;margin:0 auto 18px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--aria-sage);color:#fff;font-size:28px; } .questionnaire-success h3 { font-size:clamp(24px,4vw,34px);margin-bottom:10px; } .questionnaire-success p { max-width:580px;margin:0 auto 22px;color:var(--aria-muted);line-height:1.75; } @media (max-width:540px) { .project-view-button { flex:1 1 140px;padding-inline:12px; } .project-calendar-weekdays, .project-calendar-grid { gap:3px; } .project-calendar-day { min-height:62px;padding:5px;border-radius:7px; } .project-calendar-day-number { font-size:10px;margin-bottom:3px; } .project-calendar-event { padding:3px;font-size:8px; } .continuous-project-pill { width:100%;text-align:center; } .volunteer-questionnaire-dialog { max-height:96dvh;border-radius:18px; } .volunteer-questionnaire-header { padding:18px; } .volunteer-questionnaire-body { padding:16px; } .questionnaire-section { padding:17px 14px; } .questionnaire-actions > * { width:100%;justify-content:center; } } @media (max-width:480px){ #kupim-badge{ max-width:min(88vw,420px); } #kupim-badge .badge-text{ font-size:0.78rem; } }