/* ========================================================= Lauren Perdigão · Psicóloga Clínica — Design tokens + estilo Baseado no design system: paleta e fontes da identidade original + "o fio condutor" como elemento assinatura. ========================================================= */ @font-face{ font-family:'Beau Rivage'; src:url('../assets/fonts/beaurivage.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('../assets/fonts/instrument-serif.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('../assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Nunito'; src:url('../assets/fonts/nunito.woff2') format('woff2'); font-weight:200 900; font-style:normal; font-display:swap; } :root{ --areia:#FCEFDD; --marfim:#FFFBF5; --rosa:#FFE6E0; --lilas:#F0E4F5; --menta:#CDE2A0; --menta-tinta:#5C6E3E; --chumbo:#575759; --tinta:#3F3E3B; --vinho:#7C3F4D; --vinho-claro:#9B5B69; --vinho-fundo:#F4E4E6; --rosa-veu:#FDF5F2; --linha:rgba(87,87,89,.16); --sombra:0 20px 44px -24px rgba(87,60,50,.38); --serif:'Instrument Serif', Georgia, serif; --script:'Beau Rivage', cursive; --sans:'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif; --max:1180px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } html,body{ margin:0; padding:0; } body{ background:var(--areia); color:var(--tinta); font-family:var(--sans); font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--vinho); color:var(--marfim); } .wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,64px); } @media (min-width:1280px){ .wrap{ padding-left:190px; } } /* ================= fleuron: ornamento de transição entre seções ================= */ .fleuron{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 clamp(28px,4vw,40px); } .fleuron span{ width:52px; height:1px; background:var(--linha); } .fleuron img{ width:26px; height:auto; opacity:.8; } /* a section que abre com fleuron já ganha respiro dela; não soma com o padding padrão da section */ section:has(> .wrap > .fleuron:first-child){ padding-top:clamp(28px,4vw,40px); } /* ================= interlúdio: respiro editorial com a assinatura ================= */ .interlude{ padding:clamp(64px,10vw,110px) 0; background: radial-gradient(560px 280px at 18% 35%, var(--lilas) 0%, transparent 68%), radial-gradient(560px 280px at 82% 65%, var(--rosa) 0%, transparent 68%); } .interlude .wrap{ text-align:center; } .interlude-mark{ width:min(85%,440px); height:auto; margin:0 auto; display:block; } .interlude-caption{ margin:22px 0 0; font-family:var(--script); font-size:1.35rem; color:var(--vinho); } /* reveal ao rolar: só ativa depois de confirmado que o JS rodou (classe .js no ) */ .js .interlude-mark{ opacity:0; transform:translateY(18px); transition:opacity 1s ease, transform 1s ease; } .js .interlude-mark.in{ opacity:1; transform:translateY(0); } .js .interlude-caption{ opacity:0; transition:opacity 1.1s ease .25s; } .js .interlude-caption.in{ opacity:1; } @media (prefers-reduced-motion:reduce){ .js .interlude-mark, .js .interlude-caption{ transition:none; opacity:1; transform:none; } } h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; color:var(--tinta); } .eyebrow{ font-family:var(--sans); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:var(--vinho); display:inline-block; } .script{ font-family:var(--script); font-weight:400; color:var(--vinho); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } a:focus-visible, button:focus-visible{ outline:2px solid var(--vinho); outline-offset:3px; border-radius:4px; } /* ================= FIO (assinatura em SVG) ================= */ .fio path{ fill:none; stroke:var(--chumbo); stroke-width:1.5; stroke-linecap:round; } .fio .bloom{ fill:var(--vinho-claro); stroke:none; } .fio .leaf{ fill:var(--menta); stroke:none; } .fio-draw path{ stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.6s ease forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } @media (prefers-reduced-motion:reduce){ .fio-draw path{ animation:none; stroke-dashoffset:0; } } /* ================= FIO LATERAL (timeline de rolagem) ================= */ .fio-timeline{ position:fixed; left:26px; top:50%; transform:translateY(-50%); height:58vh; width:120px; z-index:40; pointer-events:none; } .fio-timeline .linha{ position:relative; width:1.5px; height:100%; margin-left:5px; background:var(--linha); } .fio-timeline .preenchido{ position:absolute; left:0; top:0; width:100%; height:0%; background:var(--vinho); transition:height .08s linear; } .fio-timeline .cursor{ position:absolute; left:1px; top:0%; width:7px; height:7px; border-radius:50%; background:var(--vinho-claro); box-shadow:0 0 0 5px rgba(124,63,77,.16); transform:translate(-50%,-50%); transition:top .08s linear; } .fio-timeline .ponto{ position:absolute; left:0; display:flex; align-items:center; gap:10px; transform:translateY(-50%); } .fio-timeline .ponto .marca{ width:6px; height:6px; border-radius:50%; background:var(--linha); border:1.5px solid var(--marfim); transition:background .2s ease, transform .2s ease; } .fio-timeline .ponto .rotulo{ font-family:var(--script); font-size:1.05rem; color:var(--chumbo); opacity:.55; white-space:nowrap; transition:opacity .2s ease, color .2s ease; text-shadow:0 0 6px var(--marfim), 0 0 10px var(--marfim); } .fio-timeline .ponto.ativo .marca{ background:var(--vinho); transform:scale(1.35); } .fio-timeline .ponto.ativo .rotulo{ color:var(--vinho); opacity:1; } @media (max-width:1279px){ .fio-timeline{ display:none; } } @media (prefers-reduced-motion:reduce){ .fio-timeline .preenchido, .fio-timeline .cursor{ transition:none; } } /* ================= HEADER ================= */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(252,239,221,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--linha); } .header-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; } .brand{ display:flex; align-items:center; gap:12px; } .brand-mark{ width:46px; height:46px; flex:none; object-fit:contain; } .brand-text{ line-height:1.15; } .brand-text .name{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.01em; } .brand-text .role{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--chumbo); } .nav-links{ display:flex; align-items:center; gap:28px; } .nav-links a{ font-size:.88rem; font-weight:700; color:var(--tinta); position:relative; } .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--vinho); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .nav-links a:hover::after{ transform:scaleX(1); } .header-actions{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--tinta); margin:4px 0; transition:.25s; } .btn{ display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:13px 24px; font-family:var(--sans); font-weight:700; font-size:.88rem; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-1px); } .btn-primary{ background:var(--vinho); color:var(--marfim); box-shadow:0 14px 26px -14px rgba(124,63,77,.55); } .btn-primary:hover{ background:var(--vinho-claro); } .btn-ghost{ background:transparent; color:var(--tinta); border-color:var(--chumbo); } .btn-ghost:hover{ border-color:var(--vinho); color:var(--vinho); } .btn-sm{ padding:10px 18px; font-size:.8rem; } .btn svg{ flex:none; } /* mobile drawer */ .mobile-drawer{ position:fixed; inset:0; z-index:60; background:var(--areia); display:flex; flex-direction:column; padding:20px clamp(20px,6vw,40px) 40px; transform:translateX(100%); transition:transform .35s ease; } .mobile-drawer.open{ transform:translateX(0); } .mobile-drawer .drawer-top{ display:flex; justify-content:flex-end; } .mobile-drawer .drawer-close{ background:none; border:none; font-size:1.6rem; color:var(--tinta); cursor:pointer; } .mobile-drawer nav{ display:flex; flex-direction:column; gap:26px; margin-top:40px; } .mobile-drawer nav a{ font-family:var(--serif); font-size:1.8rem; } .mobile-drawer .btn{ margin-top:36px; align-self:flex-start; } @media (max-width:880px){ .nav-links{ display:none; } .header-actions .btn-primary{ display:none; } .nav-toggle{ display:block; } .site-header .wrap{ padding-left:28px; padding-right:28px; } } /* ================= HERO ================= */ .hero{ position:relative; padding:clamp(48px,8vw,88px) 0 clamp(56px,8vw,100px); background: radial-gradient(640px 420px at 10% -10%, var(--rosa) 0%, transparent 60%), radial-gradient(620px 460px at 100% 0%, var(--lilas) 0%, transparent 58%); overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; } @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } } .hero-kicker{ display:flex; align-items:center; gap:12px; margin-bottom:24px; } .hero-kicker .fio-mini{ width:44px; } .hero h1{ font-size:clamp(2.5rem,5.6vw,4.1rem); line-height:1.06; letter-spacing:-.01em; max-width:14ch; } .hero h1 em{ font-style:italic; color:var(--vinho); } .hero .lead{ margin-top:22px; font-size:1.08rem; max-width:44ch; color:var(--chumbo); } .hero .cta-row{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; } .hero .crp{ margin-top:28px; font-size:.78rem; color:var(--chumbo); } .hero-photo{ position:relative; } .blob-shape{ width:100%; aspect-ratio:4/5; border-radius:44% 56% 61% 39% / 47% 41% 59% 53%; overflow:hidden; border:1px solid var(--linha); box-shadow:var(--sombra); position:relative; } .blob-shape img{ width:100%; height:100%; object-fit:cover; } .hero-photo .float-note{ position:absolute; bottom:-18px; left:-18px; background:var(--marfim); border:1px solid var(--linha); border-radius:16px; padding:14px 18px; box-shadow:var(--sombra); max-width:220px; } .hero-photo .float-note .script{ font-size:1.2rem; } .hero-photo .float-note p{ margin:4px 0 0; font-size:.76rem; color:var(--chumbo); } @media (max-width:560px){ .hero-photo .float-note{ left:0; bottom:-14px; } } /* ================= SECTION shell ================= */ section{ padding:clamp(56px,8vw,96px) 0; position:relative; } .section-alt{ background:linear-gradient(180deg, var(--areia), var(--rosa-veu) 14%, var(--rosa-veu) 86%, var(--areia)); } .head{ max-width:640px; margin:0 auto clamp(36px,5vw,56px); text-align:center; } .head .eyebrow{ margin-bottom:14px; } .head h2{ font-size:clamp(2rem,4vw,2.9rem); } .head p{ margin-top:16px; color:var(--chumbo); font-size:1rem; } .fio-hr{ display:block; width:min(100%,340px); height:44px; margin:0 auto clamp(28px,4vw,40px); } .fio-hr-img{ display:block; width:min(90%,360px); height:auto; margin:0 auto clamp(28px,4vw,40px); opacity:.9; } /* ================= SOBRE ================= */ .sobre-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,64px); align-items:center; } @media (max-width:900px){ .sobre-grid{ grid-template-columns:1fr; } .sobre-photo{ order:2; margin-top:8px; } .sobre-text{ order:1; } } .sobre-photo .blob-shape{ border-radius:58% 42% 39% 61% / 55% 48% 52% 45%; } .pillars{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; padding:0; list-style:none; } .pillars li{ background:var(--marfim); border:1px solid var(--linha); border-radius:999px; padding:9px 16px; font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:7px; } .pillars li svg{ flex:none; } .sobre-text p{ font-size:1rem; color:var(--tinta); } .sobre-text p + p{ margin-top:16px; } .sobre-text .assinatura{ margin-top:26px; font-size:1.5rem; } /* ================= SERVICOS ================= */ .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } } .service-card{ background:var(--marfim); border:1px solid var(--linha); border-radius:22px; padding:30px; box-shadow:var(--sombra); } .service-card .icon{ margin-bottom:18px; } .service-card h3{ font-size:1.5rem; } .service-card p{ margin-top:10px; font-size:.9rem; color:var(--chumbo); } .service-card .tag{ margin-top:16px; } .tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; } .tag-mint{ background:var(--menta); color:var(--menta-tinta); } .tag-vinho{ background:var(--vinho-fundo); color:var(--vinho); } .tag-ghost{ background:var(--areia); color:var(--chumbo); border:1px solid var(--linha); } /* ================= COMO FUNCIONA ================= */ .como-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:820px){ .como-grid{ grid-template-columns:1fr; } } .como-item{ text-align:center; padding:0 8px; } .como-item .num-mark{ margin:0 auto 16px; } .como-item h4{ font-size:1.25rem; } .como-item p{ margin-top:8px; font-size:.88rem; color:var(--chumbo); } /* CTA banda */ .cta-banda{ background:var(--vinho); color:var(--marfim); border-radius:28px; padding:clamp(36px,5vw,56px); display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,48px); flex-wrap:wrap; margin-top:clamp(40px,6vw,64px); max-width:900px; margin-inline:auto; } .cta-banda h3{ color:var(--marfim); font-size:clamp(1.5rem,3vw,2.1rem); max-width:26ch; text-align:left; } .cta-banda .btn-primary{ background:var(--marfim); color:var(--vinho); box-shadow:none; } .cta-banda .btn-primary:hover{ background:var(--areia); } /* ================= FAQ ================= */ .faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .faq-item{ background:var(--marfim); border:1px solid var(--linha); border-radius:16px; overflow:hidden; } .faq-q{ width:100%; background:none; border:none; text-align:left; cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--serif); font-size:1.1rem; color:var(--tinta); } .faq-q .plus{ flex:none; font-size:1.3rem; color:var(--vinho); transition:transform .25s ease; } .faq-item.open .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .faq-a p{ padding:0 24px 22px; margin:0; font-size:.92rem; color:var(--chumbo); } /* ================= CONTATO ================= */ .contato-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:stretch; } .contato-info{ display:flex; flex-direction:column; justify-content:center; } /* duas cópias da foto: uma pro desktop (coluna da direita), uma pro mobile (entre o texto e a lista de contato) */ .contato-photo--mobile{ display:none; } @media (max-width:900px){ .contato-grid{ grid-template-columns:1fr; } .contato-photo:not(.contato-photo--mobile){ display:none; } .contato-photo--mobile{ display:block; margin:4px 0 8px; } } .contato-list{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; } .contato-list li{ display:flex; gap:14px; align-items:flex-start; } .contato-list svg{ flex:none; margin-top:2px; color:var(--vinho); } .contato-list .k{ font-weight:800; font-size:.9rem; } .contato-list .v{ font-size:.88rem; color:var(--chumbo); margin-top:2px; } .contato-photo .blob-shape{ border-radius:39% 61% 55% 45% / 41% 55% 45% 59%; } .mapa-wrap{ margin-top:30px; border-radius:20px; overflow:hidden; border:1px solid var(--linha); box-shadow:var(--sombra); } .mapa-wrap iframe{ width:100%; height:280px; border:0; display:block; } /* ================= FOOTER ================= */ footer{ background:var(--tinta); color:var(--marfim); padding:clamp(48px,7vw,72px) 0 32px; } .foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; } .foot-brand .brand-text .name{ color:var(--marfim); } .foot-brand .brand-text .role{ color:rgba(255,251,245,.65); } .foot-brand p{ margin-top:16px; max-width:34ch; font-size:.85rem; color:rgba(255,251,245,.7); } .foot-nav{ display:flex; gap:56px; flex-wrap:wrap; } .foot-col h5{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,251,245,.55); margin:0 0 14px; font-weight:700; } .foot-col a{ display:block; font-size:.9rem; margin-bottom:10px; color:var(--marfim); } .foot-col a:hover{ color:var(--rosa); } .foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,251,245,.14); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.76rem; color:rgba(255,251,245,.55); } /* floating whatsapp — só no mobile: no desktop o header já tem CTA fixo sempre visível */ .float-wa{ position:fixed; right:18px; bottom:18px; z-index:40; width:50px; height:50px; border-radius:50%; background:var(--vinho); color:var(--marfim); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -10px rgba(124,63,77,.5); transition:transform .2s ease; } .float-wa svg{ width:22px; height:22px; } .float-wa:hover{ transform:scale(1.06); } @media (min-width:881px){ .float-wa{ display:none; } } @media (max-width:640px){ .cta-banda{ flex-direction:column; align-items:flex-start; text-align:left; } }