/* Theme Name: Clinica dos Afectos - Blog Author: takto Description: Tema a medida para o blog da Clinica dos Afectos, alinhado com o site principal. Reutiliza a identidade visual (bege quente, verde da clinica, tipografia Fraunces e Figtree). Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: cda-blog */ /* ============================================================================ Clínica dos Afectos — identidade visual Bege quente · glassmorphism fosco · premium · acolhedor ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Figtree:wght@400;500;600;700&display=swap'); :root{ --cream:#F6F1E8; --cream-2:#EFE7D9; --surface:#FFFDF9; --sand:#EFE6D5; --ink:#2C2A26; --ink-soft:#57534B; --ink-mute:#8B857A; --line:#E7DECE; --line-soft:#F0E9DC; --sage:#5E7E71; --sage-deep:#3F5A4E; --clay:#BC7B52; --clay-deep:#9C5C37; --gold:#C9A45B; --glass:rgba(255,253,249,.62); --glass-line:rgba(255,255,255,.55); --shadow-sm:0 2px 10px rgba(44,42,38,.05); --shadow:0 18px 50px rgba(44,42,38,.10); --shadow-lg:0 30px 70px rgba(44,42,38,.14); --r-sm:8px; --r:10px; --r-lg:12px; --display:'Fraunces',Georgia,serif; --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wrap:1180px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.7; color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; background-image: radial-gradient(60vw 60vw at 85% -10%, rgba(201,164,91,.10), transparent 60%), radial-gradient(50vw 50vw at -10% 20%, rgba(94,126,113,.08), transparent 55%); background-attachment:fixed; } /* Textura de ruído subtil (SVG embutido, sem ficheiros externos) */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; opacity:.035; mix-blend-mode:multiply; } @media (prefers-reduced-motion:reduce){ body::before{opacity:.03;} } img{max-width:100%; display:block;} a{color:var(--clay-deep); text-decoration:none;} h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.14; margin:0; letter-spacing:-.01em;} em{font-style:italic;} ::selection{background:var(--sage); color:#fff;} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(22px,4vw,48px);} .wrap.narrow{max-width:920px;} /* ---------- Reveal on scroll (progressive enhancement) ---------- Sem JS, o conteúdo fica visível. Só quando o JS marca é que aplicamos o estado inicial escondido + animação. */ .js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);} .js .reveal.in{opacity:1; transform:none;} .js .reveal.d1{transition-delay:.08s;} .js .reveal.d2{transition-delay:.16s;} .js .reveal.d3{transition-delay:.24s;} .js .reveal.d4{transition-delay:.32s;} /* ---------- Navbar (floating glass) ---------- */ .nav{position:sticky; top:0; z-index:50; padding:16px clamp(14px,3vw,28px) 0;} .nav-inner{ max-width:var(--wrap); margin:0 auto; display:flex; align-items:center; gap:18px; background:var(--glass); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border:1px solid var(--glass-line); border-radius:8px; box-shadow:var(--shadow-sm); padding:11px 14px 11px 22px; } .nav .brand{display:flex; align-items:center; gap:10px; margin-right:auto;} .nav .brand img{height:38px; width:auto;} .nav .brand .word{font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; line-height:1;} .nav .brand .word small{display:block; font-family:var(--sans); font-weight:600; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-deep); margin-top:3px;} .nav-links{display:flex; align-items:center; gap:4px;} .nav-links a{ font-size:.86rem; font-weight:600; color:var(--ink-soft); padding:9px 15px; border-radius:6px; transition:background .2s, color .2s; } .nav-links a:hover{background:rgba(94,126,113,.10); color:var(--sage-deep);} .nav-links a.current{background:var(--sage-deep); color:#fff;} .nav-cta{margin-left:6px;} .nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; border-radius:12px;} .nav-toggle svg{width:26px; height:26px; stroke:var(--ink);} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.01em; padding:13px 24px; border-radius:8px; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; min-height:46px; } .btn svg{width:18px; height:18px;} .btn.primary{background:var(--clay-deep); color:#fff; box-shadow:0 10px 26px rgba(156,92,55,.28);} .btn.primary:hover{background:#8a4f2d; transform:translateY(-2px); box-shadow:0 16px 34px rgba(156,92,55,.34);} .btn.ghost{background:rgba(255,253,249,.6); color:var(--ink); border-color:var(--line);} .btn.ghost:hover{border-color:var(--sage); color:var(--sage-deep); transform:translateY(-2px);} .btn.small{padding:9px 16px; font-size:.82rem; min-height:0; border-radius:7px;} .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible{ outline:3px solid var(--sage); outline-offset:2px; } /* ---------- Eyebrow / section headers ---------- */ .eyebrow{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep);} .section{padding-top:clamp(52px,8vw,100px); padding-bottom:clamp(52px,8vw,100px);} .section-head{max-width:720px; margin-bottom:clamp(34px,5vw,56px);} .section-head .eyebrow{margin-bottom:16px;} .section-head h2{font-size:clamp(1.9rem,4.4vw,3rem);} .section-head p{color:var(--ink-soft); font-size:1.08rem; margin:18px 0 0; max-width:60ch;} /* ---------- Bandas full-width com cores intercaladas ---------- */ .band{position:relative; isolation:isolate;} .band::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; } .b-surface::before{background:var(--surface);} .b-sand::before{background:var(--sand);} .b-green::before{background:var(--sage-deep);} /* Texto claro sobre a banda verde */ .b-green .eyebrow{color:#D8C79A;} .b-green h2, .b-green h3{color:#fff;} .b-green .section-head p, .b-green p{color:rgba(255,255,255,.82);} .b-green .tst{background:transparent; border:0; box-shadow:none; padding:6px 0;} .b-green .tst .q{color:#F4EFE4;} .b-green .tst .q::before{color:var(--gold);} .b-green .tst cite{color:#CDB782;} @media (min-width:781px){ .b-green .tst + .tst{border-left:1px solid rgba(255,255,255,.14); padding-left:28px;} } .lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft); line-height:1.65;} .muted{color:var(--ink-mute);} /* ---------- Hero (split) ---------- */ .hero{padding-top:clamp(30px,5vw,60px); padding-bottom:clamp(40px,6vw,80px);} .hero-split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,64px); align-items:center;} .hero-split h1{font-size:clamp(2.5rem,6vw,4.4rem);} .hero-split h1 .accent{color:var(--clay-deep); font-style:italic; font-weight:500;} .hero-copy .eyebrow{margin-bottom:20px;} .hero-copy .lead{margin-top:26px; max-width:46ch;} .hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;} .hero-trust{margin-top:38px; display:flex; gap:30px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line);} .hero-trust span{font-size:.92rem; color:var(--ink-mute);} .hero-trust strong{display:block; font-family:var(--display); font-size:1.7rem; color:var(--ink); font-weight:600; line-height:1;} /* photo stage + glass cards */ .stage{position:relative; border-radius:var(--r-lg); overflow:visible;} .stage>img{border-radius:var(--r-lg); width:100%; aspect-ratio:4/5; object-fit:cover; box-shadow:var(--shadow-lg);} .stage.wide>img{aspect-ratio:5/4;} .glass{ position:absolute; background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border:1px solid var(--glass-line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; } .glass .eyebrow{font-size:.6rem; margin-bottom:7px;} .glass p{margin:0; font-size:.9rem; line-height:1.5; color:var(--ink);} .glass.tl{top:18px; left:-22px;} .glass.tr{top:18px; right:-22px;} .glass.bl{bottom:20px; left:-24px;} .glass.br{bottom:20px; right:-22px;} .glass-quote{max-width:250px; font-family:var(--display); font-style:italic;} .glass-chip{display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;} .glass-chip .av{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 auto;} .glass-chip .who{display:flex; flex-direction:column;} .glass-chip .name{font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--ink);} .glass-chip .role{font-size:.72rem; color:var(--sage-deep); font-weight:600;} .glass-stat{display:flex; align-items:center; gap:14px;} .glass-stat .num{font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--clay-deep); font-weight:600;} .glass-stat .meta{display:flex; flex-direction:column;} .glass-stat .lab{font-weight:600; font-size:.9rem; color:var(--ink);} .glass-stat .sub{font-size:.76rem; color:var(--ink-mute);} .glass-info p{font-family:var(--sans); font-style:normal; font-size:.92rem; color:var(--ink); line-height:1.45;} /* hero banner (full-width image) */ .hero-banner{position:relative; min-height:64vh; display:flex; align-items:center; justify-content:center; text-align:center; margin:16px clamp(14px,3vw,28px) 0; border-radius:var(--r-lg); overflow:hidden;} .hero-banner>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;} .hero-banner::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(44,42,38,.28), rgba(44,42,38,.42));} .hero-banner .inner{position:relative; z-index:2; color:#fff; padding:40px 24px; max-width:680px;} .hero-banner .inner h1{color:#fff; font-size:clamp(2.4rem,6vw,4rem);} .hero-banner .inner .eyebrow{color:#F3E7CE;} .hero-banner .inner .lead{color:rgba(255,255,255,.9); margin:26px auto 0; max-width:540px;} /* ---------- Split layout ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;} .split.narrow-left{grid-template-columns:.85fr 1.15fr; align-items:start;} .split h2{font-size:clamp(1.8rem,3.6vw,2.7rem);} .split p{color:var(--ink-soft);} .card-link{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--sage-deep); margin-top:14px;} .card-link::after{content:"→"; transition:transform .2s;} .card-link:hover::after{transform:translateX(4px);} /* figure */ .figure{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);} .figure img{width:100%; height:100%; object-fit:cover;} .figure.tall img{aspect-ratio:3/4;} .figure.square img{aspect-ratio:1/1;} .figure.wide img{aspect-ratio:4/3;} .framed{padding:12px; background:var(--glass); border:1px solid var(--glass-line); border-radius:12px; box-shadow:var(--shadow-sm);} /* ---------- Services ---------- */ .svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;} .svc-pill{ display:flex; align-items:center; gap:12px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:8px; transition:border-color .2s, transform .2s, box-shadow .2s; color:var(--ink); font-weight:600; font-size:.98rem; } .svc-pill:hover{border-color:var(--sage); transform:translateY(-3px); box-shadow:var(--shadow-sm);} .svc-pill .idx{font-family:var(--display); font-size:.9rem; color:var(--clay); min-width:26px;} .svc-entry{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); align-items:center; padding:clamp(30px,5vw,54px) 0; border-top:1px solid var(--line-soft);} .svc-entry.flip .svc-media{order:2;} .svc-num{font-family:var(--display); font-size:.9rem; font-weight:600; letter-spacing:.16em; color:var(--clay); text-transform:uppercase;} .svc-entry h3{font-size:clamp(1.5rem,2.8vw,2.1rem); margin:8px 0 14px;} .svc-entry p{color:var(--ink-soft); margin:0 0 .8em;} .svc-entry ul{color:var(--ink-soft); padding-left:1.1em; margin:.4em 0;} .svc-entry li{margin:.3em 0;} .svc-media .figure img{aspect-ratio:4/3;} .svc-tag{display:inline-block; margin-top:12px; font-size:.72rem; font-weight:600; color:var(--sage-deep); background:rgba(94,126,113,.10); border:1px solid rgba(94,126,113,.2); padding:5px 12px; border-radius:6px;} /* decorative service tile (design intencional, sem foto) */ .svc-visual{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, var(--cream-2), var(--surface) 55%, #eef2ec); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .svc-visual::before{content:""; position:absolute; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(94,126,113,.16), transparent 70%); top:-60px; right:-50px;} .svc-visual::after{content:""; position:absolute; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle at 60% 60%, rgba(188,123,82,.14), transparent 70%); bottom:-50px; left:-30px;} .svc-visual .v-ic{position:relative; z-index:2; width:56px; height:56px; color:var(--sage-deep); opacity:.85;} .svc-visual .v-num{position:absolute; z-index:2; bottom:18px; right:22px; font-family:var(--display); font-size:2.6rem; color:rgba(156,92,55,.35); font-weight:600; line-height:1;} /* Cards de serviço — painel colorido (ícone + título) + corpo neutro */ .svc-cards{display:flex; flex-direction:column; gap:22px;} .svc-card{ display:grid; grid-template-columns:minmax(250px,300px) 1fr; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); scroll-margin-top:90px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .svc-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--sage);} /* painel lateral colorido */ .svc-side{ display:flex; flex-direction:column; align-items:flex-start; padding:40px 34px; color:#fff; } .svc-side.c-green{background:var(--sage-deep);} .svc-side.c-ochre{background:#8A6A2E;} .svc-side.c-clay{background:var(--clay-deep);} .svc-side .svc-ic{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:16px; margin-bottom:22px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); } .svc-side .svc-ic svg{width:31px; height:31px;} .svc-side .svc-num{ display:block; font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.18em; color:rgba(255,255,255,.72); text-transform:uppercase; margin-bottom:10px; } .svc-side h3{font-size:clamp(1.4rem,2.2vw,1.75rem); line-height:1.18; color:#fff; margin:0;} /* corpo neutro */ .svc-body{padding:40px 46px; display:flex; flex-direction:column; justify-content:center;} .svc-body p{color:var(--ink-soft); font-size:1.04rem; line-height:1.75; max-width:64ch; margin:0 0 .85em;} .svc-body p:last-child{margin-bottom:0;} .svc-body .muted{font-size:.92rem;} .svc-body ul{color:var(--ink-soft); padding-left:1.1em; margin:.5em 0; max-width:64ch;} .svc-body li{margin:.35em 0; line-height:1.7;} @media (max-width:680px){ .svc-cards{gap:16px;} .svc-card{grid-template-columns:1fr;} .svc-side{flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; padding:26px 28px;} .svc-side .svc-ic{width:52px; height:52px; margin-bottom:0;} .svc-side .svc-ic svg{width:26px; height:26px;} .svc-side .svc-num{position:absolute; opacity:0; width:0; height:0; margin:0; overflow:hidden;} .svc-side h3{font-size:1.35rem; flex:1;} .svc-body{padding:28px 28px;} } /* placeholder media (no photo yet) */ .ph{display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; border-radius:var(--r); background: linear-gradient(135deg, var(--cream-2), var(--surface)); border:1px solid var(--line); color:var(--ink-mute);} .ph .ph-in{text-align:center; padding:20px;} .ph .ph-mark{width:44px; height:44px; margin:0 auto 12px; color:var(--sage); opacity:.6;} .ph .ph-t{font-size:.78rem; letter-spacing:.06em;} /* ---------- Team ---------- */ .team-group{margin-bottom:44px;} .team-group h3{font-size:1.15rem; display:flex; align-items:center; gap:14px; margin-bottom:20px; color:var(--ink);} .team-group h3::after{content:""; flex:1; height:1px; background:var(--line);} .team-group h3 .n{font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.1em; color:var(--sage-deep); background:rgba(94,126,113,.1); padding:3px 10px; border-radius:6px;} .team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;} .team-card{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); transition:transform .2s, box-shadow .2s, border-color .2s; } .team-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--sage);} .team-av{ width:52px; height:52px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:1.1rem; color:#fff; background:linear-gradient(135deg, var(--sage), var(--sage-deep)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.25); } .team-av.clay{background:linear-gradient(135deg, var(--clay), var(--clay-deep));} .team-av.gold{background:linear-gradient(135deg, var(--gold), #a8863f);} .team-card .t-name{font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); line-height:1.2;} .team-card .t-role{font-size:.78rem; color:var(--ink-mute); margin-top:3px;} .team-card .t-soon{font-size:.68rem; color:var(--sage-deep); margin-top:2px; opacity:.75;} /* ---------- Testimonials ---------- */ .tst-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;} .tst{background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-line); border-radius:var(--r); padding:28px 26px; box-shadow:var(--shadow-sm);} .tst .q{font-family:var(--display); font-style:italic; font-size:1.08rem; color:var(--ink); line-height:1.55;} .tst .q::before{content:"“"; font-size:2.4rem; color:var(--clay); line-height:0; vertical-align:-.35em; margin-right:4px;} .tst cite{display:block; margin-top:16px; font-style:normal; font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--sage-deep);} /* ---------- Cards (blog/soon) ---------- */ .soon{display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; padding:clamp(48px,8vw,96px) 24px; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);} .soon .mark{width:64px; height:64px; color:var(--sage);} .soon h2{font-size:clamp(1.8rem,4vw,2.6rem);} .soon p{max-width:52ch; color:var(--ink-soft);} .chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px;} .chips span{font-size:.82rem; font-weight:600; color:var(--sage-deep); background:rgba(94,126,113,.1); border:1px solid rgba(94,126,113,.2); padding:7px 15px; border-radius:6px;} /* ---------- CTA band ---------- */ .cta-band{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); background:linear-gradient(135deg, var(--sage-deep), #33493e); color:#fff; box-shadow:var(--shadow);} .cta-band::after{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(201,164,91,.18); top:-120px; right:-80px; filter:blur(10px);} .cta-band .inner{position:relative; z-index:2; max-width:600px;} .cta-band h2{color:#fff; font-size:clamp(1.8rem,4vw,2.7rem);} .cta-band p{color:rgba(255,255,255,.85); margin:16px 0 28px;} .cta-band .btn.ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff;} .cta-band .btn.ghost:hover{background:rgba(255,255,255,.2); color:#fff;} .cta-band .btn.primary{background:#fff; color:var(--sage-deep); box-shadow:none;} .cta-band .btn.primary:hover{background:#fff; opacity:.92;} /* ---------- Contact ---------- */ .info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;} .info-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px;} .info-item .ic{width:26px; height:26px; color:var(--sage); margin-bottom:14px;} .info-item h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin-bottom:8px;} .info-item p{margin:0; color:var(--ink); font-size:.98rem; line-height:1.5;} .info-item a{color:var(--ink);} .info-item a:hover{color:var(--clay-deep);} .unit-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .unit{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; position:relative;} .unit .badge{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--sage-deep); padding:5px 12px; border-radius:6px;} .unit h3{font-size:1.3rem; margin:16px 0 6px;} .unit .addr{color:var(--ink-soft); font-size:.96rem;} .unit .hours{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:.9rem; color:var(--ink-soft);} .unit .hours b{color:var(--ink); font-weight:600;} /* form */ .form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-sm);} .form-notice{background:rgba(94,126,113,.1); border:1px solid var(--sage); border-radius:10px; padding:14px 16px; margin-bottom:20px; font-size:.9rem; line-height:1.55; color:var(--ink-soft);} .form-notice a{color:var(--sage-deep); font-weight:600;} .field{margin-bottom:18px;} .field label{display:block; font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); margin-bottom:7px;} .field input, .field select, .field textarea{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:13px 15px; } .field textarea{min-height:130px; resize:vertical;} .field input:focus, .field select:focus, .field textarea:focus{background:#fff; border-color:var(--sage); outline:none; box-shadow:0 0 0 3px rgba(94,126,113,.15);} .check{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); margin-bottom:12px; line-height:1.5;} .check input{width:18px; height:18px; margin-top:3px; accent-color:var(--sage-deep); flex:0 0 auto;} /* ---------- Footer ---------- */ .footer{margin-top:clamp(40px,6vw,80px); background:var(--cream-2); border-top:1px solid var(--line);} .footer-inner{max-width:var(--wrap); margin:0 auto; padding:clamp(44px,6vw,72px) clamp(22px,4vw,48px) 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;} .footer .brand img{height:34px;} .footer .about{margin-top:16px; font-size:.92rem; color:var(--ink-soft); max-width:34ch;} .footer h4{font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); font-weight:700; margin-bottom:16px;} .footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;} .footer ul a, .footer ul li{font-size:.92rem; color:var(--ink-soft);} .footer ul a:hover{color:var(--clay-deep);} .footer .social{display:flex; gap:10px; margin-top:4px;} .footer .social a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--sage-deep); transition:transform .2s, border-color .2s;} .footer .social a:hover{transform:translateY(-3px); border-color:var(--sage);} .footer .social svg{width:19px; height:19px;} .copyright{max-width:var(--wrap); margin:0 auto; padding:20px clamp(22px,4vw,48px); border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--ink-mute);} .copyright .takto{font-family:var(--sans); font-weight:700; letter-spacing:-.04em; color:var(--ink-soft);} /* ---------- Responsive ---------- */ @media (max-width:920px){ .hero-split{grid-template-columns:1fr;} .stage{margin-top:8px;} .split, .split.narrow-left, .svc-entry, .svc-entry.flip{grid-template-columns:1fr;} .svc-entry.flip .svc-media{order:0;} .unit-grid{grid-template-columns:1fr;} .footer-inner{grid-template-columns:1fr 1fr;} .glass.tl,.glass.bl{left:10px;} .glass.tr,.glass.br{right:10px;} } @media (max-width:680px){ body{font-size:16px;} .nav-links{ position:absolute; top:calc(100% + 10px); left:14px; right:14px; flex-direction:column; align-items:stretch; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px; box-shadow:var(--shadow); display:none; } .nav-links.open{display:flex;} .nav-links a{padding:12px 16px;} .nav-toggle{display:inline-flex;} .nav-cta{display:none;} .footer-inner{grid-template-columns:1fr;} .hero-trust{gap:22px;} .glass{position:static; margin-top:12px; max-width:none; box-shadow:var(--shadow-sm);} .stage{display:flex; flex-direction:column;} } @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important;} .reveal{opacity:1 !important; transform:none !important; transition:none !important;} .btn:hover, .team-card:hover, .svc-pill:hover, .figure:hover{transform:none !important;} } /* ============================================================================ BLOG (tema WordPress) - reutiliza os tokens e o registo visual do site ============================================================================ */ /* hero do blog */ .blog-hero{padding-top:clamp(30px,5vw,64px); padding-bottom:clamp(18px,3vw,32px); text-align:center;} .blog-hero .inner{max-width:640px; margin:0 auto;} .blog-hero h1{font-size:clamp(2.4rem,6vw,4rem); margin-top:16px;} .blog-hero h1 .accent{color:var(--clay-deep); font-style:italic; font-weight:500;} .blog-hero .lead{margin:24px auto 0; max-width:490px;} /* filtros por categoria */ .blog-filters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0 auto clamp(30px,5vw,48px); max-width:840px;} .blog-filters a{font-size:.82rem; font-weight:600; color:var(--sage-deep); background:rgba(94,126,113,.1); border:1px solid rgba(94,126,113,.2); padding:8px 16px; border-radius:6px; transition:background .2s, color .2s, border-color .2s;} .blog-filters a:hover{background:rgba(94,126,113,.18);} .blog-filters a.active{background:var(--sage-deep); color:#fff; border-color:var(--sage-deep);} /* grelha de artigos */ .post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px;} .post-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s;} .post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sage);} .pc-thumb{display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--cream-2),var(--surface));} .pc-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;} .post-card:hover .pc-thumb img{transform:scale(1.04);} .pc-ph{display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--sage); opacity:.5;} .pc-ph svg{width:44px; height:44px;} .pc-body{display:flex; flex-direction:column; flex:1; padding:24px 26px 26px;} .pc-cats{margin-bottom:12px;} .pc-cats span{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep);} .post-card h3{font-size:1.32rem; line-height:1.25; margin-bottom:10px;} .post-card h3 a{color:var(--ink);} .post-card h3 a:hover{color:var(--clay-deep);} .pc-body p{color:var(--ink-soft); font-size:.96rem; line-height:1.6; margin:0 0 18px;} .pc-meta{margin-top:auto; display:flex; gap:14px; align-items:center; font-size:.8rem; color:var(--ink-mute); padding-top:14px; border-top:1px solid var(--line-soft);} .pc-meta span{display:inline-flex; align-items:center; gap:6px;} /* paginacao */ .pagination{display:flex; justify-content:center; gap:8px; margin-top:clamp(36px,5vw,56px); flex-wrap:wrap;} .pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 14px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:600; font-size:.9rem; transition:border-color .2s, color .2s;} .pagination .page-numbers:hover{border-color:var(--sage); color:var(--sage-deep);} .pagination .page-numbers.current{background:var(--sage-deep); color:#fff; border-color:var(--sage-deep);} .pagination .page-numbers.dots{border:0; background:transparent;} /* cabecalho de arquivo (categoria / autor) */ .archive-head{text-align:center; max-width:660px; margin:0 auto clamp(30px,5vw,48px);} .archive-head .eyebrow{margin-bottom:14px;} .archive-head h1{font-size:clamp(2rem,4.6vw,3.2rem);} .archive-head p{color:var(--ink-soft); margin-top:14px;} /* artigo (single) */ .post-single{padding-top:clamp(26px,4vw,48px); padding-bottom:clamp(40px,6vw,80px);} .post-head{max-width:760px; margin:0 auto; text-align:center;} .post-cats{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;} .post-cats a{font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); background:rgba(94,126,113,.1); border:1px solid rgba(94,126,113,.2); padding:6px 13px; border-radius:6px;} .post-head h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.12;} .post-meta{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:22px; font-size:.9rem; color:var(--ink-mute);} .post-meta span{display:inline-flex; align-items:center; gap:7px;} .post-meta svg{width:16px; height:16px; color:var(--sage);} .post-cover{margin:clamp(30px,5vw,52px) auto 0; max-width:1000px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);} .post-cover img{width:100%; max-height:520px; object-fit:cover;} /* corpo do artigo */ .entry-content{max-width:720px; margin:clamp(32px,5vw,52px) auto 0; font-size:1.1rem; line-height:1.85; color:#3a372f;} .entry-content > *{margin:0 0 1.3em;} .entry-content > *:last-child{margin-bottom:0;} .entry-content h2{font-family:var(--display); font-size:clamp(1.5rem,3vw,2rem); margin:1.8em 0 .6em; color:var(--ink);} .entry-content h3{font-family:var(--display); font-size:clamp(1.25rem,2.4vw,1.55rem); margin:1.6em 0 .5em; color:var(--ink);} .entry-content a{color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px;} .entry-content ul, .entry-content ol{padding-left:1.3em;} .entry-content li{margin:.5em 0;} .entry-content img{border-radius:var(--r); box-shadow:var(--shadow-sm); margin-left:auto; margin-right:auto;} .entry-content blockquote{margin:1.6em 0; padding:6px 0 6px 26px; border-left:3px solid var(--sage); font-family:var(--display); font-style:italic; font-size:1.2rem; color:var(--ink-soft);} .entry-content blockquote p:last-child{margin-bottom:0;} .entry-content figure{margin:1.6em 0;} .entry-content figcaption{font-size:.82rem; color:var(--ink-mute); text-align:center; margin-top:8px;} .entry-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--cream-2); padding:2px 6px; border-radius:5px;} .entry-content hr{border:0; border-top:1px solid var(--line); margin:2em 0;} /* caixa do autor */ .post-author{max-width:720px; margin:clamp(40px,6vw,64px) auto 0; display:flex; gap:20px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--shadow-sm);} .post-author .pa-av{width:64px; height:64px; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg,var(--sage),var(--sage-deep)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-size:1.4rem; font-weight:600; overflow:hidden; box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);} .post-author .pa-av img{width:100%; height:100%; object-fit:cover; border-radius:50%;} .post-author .pa-name{font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--ink);} .post-author .pa-role{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); font-weight:700; margin-top:3px;} .post-author .pa-bio{margin-top:8px; font-size:.94rem; color:var(--ink-soft); line-height:1.6;} /* navegacao entre artigos + voltar */ .post-nav{max-width:720px; margin:clamp(32px,5vw,48px) auto 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); padding-top:26px;} .post-nav a{font-weight:600; font-size:.92rem; color:var(--sage-deep);} .post-nav a:hover{color:var(--clay-deep);} .post-back{display:inline-flex; align-items:center; gap:8px;} .post-back::before{content:"\2190";} /* pesquisa */ .search-form{display:flex; gap:10px; max-width:440px; margin:0 auto;} .search-form input[type=search]{flex:1; font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:12px 15px;} .search-form input[type=search]:focus{background:#fff; border-color:var(--sage); outline:none; box-shadow:0 0 0 3px rgba(94,126,113,.15);} @media (max-width:680px){ .post-author{flex-direction:column; text-align:center;} .post-meta{gap:12px;} .post-nav{justify-content:center;} }