/* ============================================================ CAIS — Clínica de Atenção Integral à Saúde Design system: DESIGN.md (Areia · Duna · Lagoa · Noite · Ouro) Light-first; dark = inversão documentada no design system. ============================================================ */ /* ---------- Fontes (self-hosted, subset latin) ---------- */ @font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-600i.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces Soft"; src: url("assets/fonts/fraunces-soft-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("assets/fonts/ss3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("assets/fonts/ss3-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("assets/fonts/ss3-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("assets/fonts/ss3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { color-scheme: light; --areia: #efe7d8; --duna: #d8cbaf; --lagoa: #0e6152; --noite: #1c1b17; --ouro: #a6904e; --surface: var(--areia); --surface-container: #f7f3ec; --surface-dim: #e7ddca; --on-surface: var(--noite); --on-surface-variant: #66625b; --primary: var(--lagoa); --on-primary: var(--areia); --primary-hover: #105649; --outline: var(--duna); --display: "Fraunces", "Iowan Old Style", Georgia, serif; --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --content-max: 1120px; --margin: 32px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Inversão documentada no design system. A marca é light-first: o modo escuro NÃO segue o sistema; só ativa com . */ :root[data-theme="dark"] { color-scheme: dark; --surface: #1c1b17; --surface-container: #292723; --surface-dim: #22211c; --on-surface: #efe7d8; --on-surface-variant: #9b958b; --primary: #5d9081; /* Lagoa clareada: a Lagoa pura reprova sobre Noite */ --on-primary: #1c1b17; --primary-hover: #6da295; --outline: #47443e; } /* ---------- Base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { background: var(--surface); color: var(--on-surface); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin); } h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; } ::selection { background: var(--lagoa); color: var(--areia); } /* ---------- Reveal on scroll (desliga sob reduced motion) ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); } .nav.scrolled { border-bottom-color: var(--outline); } .nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .nav-brand .simbolo { width: auto; height: 38px; } .nav-brand span { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: 0.06em; margin-right: -0.06em; transform: translateY(1px); /* centro óptico com o símbolo */ white-space: nowrap; } .nav-brand .logo-dark { display: none; } :root[data-theme="dark"] .nav-brand .logo-light { display: none; } :root[data-theme="dark"] .nav-brand .logo-dark { display: block; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--on-surface); padding-block: 4px; border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); } .nav-links a:hover { border-bottom-color: var(--primary); } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .nav-burger span { display: block; height: 1.5px; width: 100%; background: var(--on-surface); transition: transform 0.3s var(--ease); } .nav.open .nav-burger span:first-child { transform: translateY(4.25px) rotate(45deg); } .nav.open .nav-burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); } @media (max-width: 799px) { .nav-burger { display: flex; } .nav-links { /* absolute, não fixed: o backdrop-filter da nav vira containing block */ position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 72px); overflow-y: auto; background: var(--surface); flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 32px; visibility: hidden; opacity: 0; } .nav-links a { font-size: 17px; padding-block: 10px; } .nav.open .nav-links { visibility: visible; opacity: 1; } @media (prefers-reduced-motion: no-preference) { .nav-links { transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s; } .nav.open .nav-links { transform: none; } } } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 9999px; padding: 14px 28px; font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 0.25s var(--ease), transform 0.15s var(--ease); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); } .link-quiet { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface); text-decoration: none; border-bottom: 1.5px solid var(--outline); padding-bottom: 3px; transition: border-color 0.25s var(--ease); } .link-quiet:hover { border-bottom-color: var(--primary); } /* ---------- Hero ---------- */ .hero { min-height: calc(100dvh - 72px); display: grid; align-items: center; padding-block: 48px 64px; } .hero-grid { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.85rem); line-height: 1.08; letter-spacing: -0.01em; padding-bottom: 4px; /* clearance p/ descendente do itálico "vínculo" */ } .hero h1 em { font-style: italic; color: var(--primary); } .hero-sub { margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--on-surface-variant); max-width: 54ch; } .hero-sub em { font-style: italic; color: var(--on-surface); } .hero-actions { margin-top: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 28px; } .hero-media { position: relative; } .hero-media img { width: 100%; height: min(74vh, 640px); object-fit: cover; object-position: center top; /* retrato: preservar o topo do cabelo no crop */ border-radius: var(--r-xl); } @media (max-width: 899px) { .hero { min-height: 0; padding-block: 40px 56px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-media img { height: min(52vh, 440px); } } /* ---------- Seções ---------- */ section { padding-block: 96px; } @media (max-width: 899px) { section { padding-block: 64px; } } .label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); } /* Filosofia: coluna editorial */ .filosofia .label { margin-bottom: 20px; } .filosofia h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em; max-width: 24ch; } .filosofia .prose { margin-top: 40px; max-width: 66ch; display: grid; gap: 24px; } .filosofia .prose p { font-size: 18px; line-height: 1.65; } .filosofia .prose em { color: var(--primary); } .arc { width: 96px; margin-top: 48px; color: var(--outline); } /* Pull quote: faixa de água */ .quote-band { position: relative; padding-block: 128px; isolation: isolate; overflow: hidden; } .quote-band img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; /* mostrar dunas e lagoa, não só céu */ z-index: -2; } .quote-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 27, 23, 0.62), rgba(28, 27, 23, 0.5)); z-index: -1; } .quote-band blockquote { max-width: 780px; } .quote-band blockquote p { font-family: "Fraunces Soft", var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.3; color: var(--areia); text-wrap: balance; } .quote-band cite { display: block; margin-top: 28px; font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--areia) 78%, transparent); } /* Pilares: trilho esquerdo fixo + fluxo à direita */ .pilares-grid { display: grid; grid-template-columns: 4fr 1fr 7fr; align-items: start; } .pilares-intro { position: sticky; top: 112px; } .pilares-intro h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; } .pilares-intro p { margin-top: 20px; font-size: 17px; color: var(--on-surface-variant); max-width: 34ch; } .pilares-list { grid-column: 3; list-style: none; display: grid; gap: 56px; } .pilar h3 { font-size: 25px; line-height: 1.2; } .pilar p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--on-surface-variant); max-width: 52ch; } .pilar .arc { width: 64px; margin: 0 0 14px; } .pilar:last-child h3 em { font-style: normal; color: var(--primary); } @media (max-width: 899px) { .pilares-grid { grid-template-columns: 1fr; gap: 48px; } .pilares-intro { position: static; } .pilares-list { grid-column: 1; gap: 44px; } } /* A clínica */ .clinica { background: var(--surface-dim); } .clinica-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; } .clinica-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; /* priorizar bancada sobre o teto no crop 4:3 */ border-radius: var(--r-lg); } .clinica h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.16; letter-spacing: -0.01em; max-width: 22ch; } .modalidades { margin-top: 32px; display: flex; align-items: baseline; gap: 24px; } .modalidades .sep { width: 1px; height: 28px; background: var(--outline); align-self: center; } .modalidades span { font-family: var(--display); font-weight: 600; font-size: 20px; } .clinica .label { margin-top: 40px; } .chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .chips li { border: 1px solid var(--outline); border-radius: 9999px; padding: 7px 16px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-surface); } @media (max-width: 899px) { .clinica-grid { grid-template-columns: 1fr; gap: 40px; } } /* Atendimento: colagem de 3 fotos — sala alta à esquerda, recepção e cadeira de exame empilhadas à direita */ .clinica-collage { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; aspect-ratio: 10 / 11; } .clinica-collage img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; border-radius: var(--r-md); } .clinica-collage .collage-tall { grid-row: 1 / 3; border-radius: var(--r-lg); object-position: center 30%; /* quadros e poltronas, sem teto */ } .clinica-collage .collage-cadeira { object-position: center 38%; /* quadros e encosto da cadeira no recorte menor */ } /* Atendimento: parágrafo entre modalidades e link */ .prose-clinica { margin-top: 32px; max-width: 56ch; } .prose-clinica p { font-size: 17px; line-height: 1.65; color: var(--on-surface-variant); } .clinica .link-quiet { display: inline-block; margin-top: 32px; } /* CTA final */ .cta-final { padding-block: 128px; text-align: center; } .cta-final h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 18ch; margin-inline: auto; } .cta-final .btn { margin-top: 44px; } .cta-final .arc { margin: 0 auto 40px; color: var(--outline); } /* Footer: Noite nos dois modos */ .footer { background: var(--noite); color: #9b958b; padding-block: 72px 48px; } .footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: end; } .footer img { width: auto; height: 90px; } .footer address { font-style: normal; font-size: 14px; line-height: 1.7; } .footer address strong { color: var(--areia); font-weight: 500; } .footer a { color: var(--areia); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid #47443e; padding-bottom: 3px; transition: border-color 0.25s var(--ease); } .footer a:hover { border-bottom-color: #5d9081; } .footer-links { list-style: none; display: grid; gap: 14px; justify-items: start; } .footer-meta { margin-top: 56px; padding-top: 24px; border-top: 1px solid #2e2c27; font-size: 12px; letter-spacing: 0.04em; } @media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; } .footer-grid a { justify-self: start; } }