Uncategorized – aagap.com.br

/* ========================================================================= AAGAP — Colors & Type tokens Grupo de Apoio aos Pacientes com Alopecia Areata ========================================================================= */ /* ------- Fonts (Google Fonts) ------- Newsreader — humane editorial serif (display + long-form headlines) Manrope — warm rounded sans (UI + body) IBM Plex Mono — clean mono for data / captions ----------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Manrope:wght@300..800&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { /* ========================================================================= COLORS — Brand The palette grew out of the existing logo: warm charcoal + a red gradient. We surround it with cream + blush + a calming sage so the system can carry content about an autoimmune condition with tenderness, not alarm. ========================================================================= */ /* Reds (from the logo gradient) — used sparingly, mostly for accent. Never use pure red as a background for body copy. */ --aagap-red-50: #FBECEA; --aagap-red-100: #F5CDC8; --aagap-red-200: #E89E97; --aagap-red-300: #DC6F67; --aagap-red-400: #CC4A45; /* primary brand red, sampled from logo */ --aagap-red-500: #B3322F; --aagap-red-600: #8E2522; --aagap-red-700: #5E1A17; /* deepest — used for emphasis on warm bg */ /* Warm charcoal — sampled from logo "shell" */ --aagap-ink-50: #F4F1ED; --aagap-ink-100: #E6DFD7; --aagap-ink-200: #C7BDB1; --aagap-ink-300: #97897B; --aagap-ink-400: #6B5F53; --aagap-ink-500: #463E37; --aagap-ink-600: #2F2B27; --aagap-ink-700: #1C1A18; /* near-black for headings */ /* Cream & blush — the "skin" of the brand */ --aagap-cream-50: #FBF7F1; /* default page background */ --aagap-cream-100: #F4ECE0; --aagap-cream-200: #ECDFCD; --aagap-blush-100: #F8E3D7; --aagap-blush-200: #F0C7B3; --aagap-blush-300: #E2A488; /* Sage — calm accent, also acknowledges the SBD partnership without copying */ --aagap-sage-50: #EEF3EC; --aagap-sage-100: #D4E0CD; --aagap-sage-300: #94B187; --aagap-sage-500: #547A4A; --aagap-sage-700: #2F4929; /* ========================================================================= COLORS — Semantic Use these in product. The brand palette above can shift; semantics shouldn't. ========================================================================= */ --bg: var(--aagap-cream-50); --bg-surface: #FFFFFF; /* cards on cream */ --bg-sunken: var(--aagap-cream-100); --bg-tinted: var(--aagap-blush-100); --bg-inverse: var(--aagap-ink-700); --fg: var(--aagap-ink-700); --fg-muted: var(--aagap-ink-400); --fg-subtle: var(--aagap-ink-300); --fg-inverse: var(--aagap-cream-50); --fg-on-brand: #FFFFFF; --brand: var(--aagap-red-400); --brand-hover: var(--aagap-red-500); --brand-press: var(--aagap-red-600); --brand-soft: var(--aagap-red-50); --accent: var(--aagap-sage-500); /* gentle "ok / calm" */ --accent-soft: var(--aagap-sage-50); --border: rgba(70, 62, 55, 0.14); --border-strong:rgba(70, 62, 55, 0.28); --divider: rgba(70, 62, 55, 0.08); --focus-ring: var(--aagap-red-300); /* Status — warm, low-anxiety */ --status-info: #4A6FA5; --status-success: var(--aagap-sage-500); --status-warn: #C68A2E; --status-care: var(--aagap-red-500); /* "care" — not "danger" */ /* ========================================================================= TYPE — Families ========================================================================= */ --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif; --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; /* ========================================================================= TYPE — Scale (modular, 1.200 minor third on a 16px base) ========================================================================= */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; --fs-64: 4rem; --lh-tight: 1.08; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed:1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; /* ========================================================================= SPACING & RADIUS — soft, generous ========================================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; /* ========================================================================= SHADOWS — soft, low contrast (we avoid drama on a "care" brand) ========================================================================= */ --shadow-1: 0 1px 2px rgba(70, 62, 55, 0.06), 0 1px 1px rgba(70,62,55,0.04); --shadow-2: 0 2px 4px rgba(70, 62, 55, 0.06), 0 6px 14px rgba(70, 62, 55, 0.06); --shadow-3: 0 6px 14px rgba(70, 62, 55, 0.08), 0 18px 36px rgba(70, 62, 55, 0.08); --shadow-inset: inset 0 0 0 1px rgba(70, 62, 55, 0.08); /* Motion */ --ease-soft: cubic-bezier(.2,.7,.2,1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ========================================================================= SEMANTIC TYPE — element-level defaults so HTML "just works" ========================================================================= */ html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); } body { font-size: var(--fs-16); line-height: var(--lh-relaxed); text-wrap: pretty; } .h-display, h1.display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(var(--fs-40), 5.5vw, var(--fs-64)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 60; color: var(--fg); } h1, .h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(var(--fs-32), 4vw, var(--fs-48)); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 40; } h2, .h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-32); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-variation-settings: "opsz" 24; } h3, .h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-20); line-height: var(--lh-snug); letter-spacing: -0.005em; } h4, .h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-18); line-height: var(--lh-snug); } p, .body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-relaxed); font-weight: 400; } .lede { font-family: var(--font-serif); font-size: var(--fs-24); line-height: var(--lh-normal); font-weight: 300; color: var(--fg-muted); font-variation-settings: "opsz" 18; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand); } .caption, small { font-family: var(--font-sans); font-size: var(--fs-14); color: var(--fg-muted); line-height: var(--lh-normal); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; background: var(--bg-sunken); border-radius: var(--radius-xs); padding: 0.1em 0.35em; } a { color: var(--brand-press); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(204, 74, 69, 0.45); transition: color var(--dur-fast) var(--ease-soft); } a:hover { color: var(--brand); text-decoration-color: currentColor; } /* Quote treatment — used for patient stories */ blockquote, .quote { font-family: var(--font-serif); font-size: var(--fs-24); line-height: var(--lh-normal); font-style: italic; color: var(--fg); font-variation-settings: "opsz" 24; border-left: 2px solid var(--brand); padding-left: var(--space-5); margin: var(--space-6) 0; } /* AAGAP — Shared chrome (header, toolbar, footer, buttons, icons) */ /* Inherits tokens from tokens.css */ *,*::before,*::after { box-sizing: border-box; } html,body { margin: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } a { color: var(--brand-press); text-decoration: none; } a:hover { color: var(--brand); } .icon { width: 20px; height: 20px; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 28px; height: 28px; } .wrap { max-width: 1240px; margin: 0 auto; padding-inline: 36px; } .wrap--narrow { max-width: 880px; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand); display: inline-flex; align-items: center; gap: 8px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-16); border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); } .btn-primary { background: var(--brand); color: var(--fg-on-brand); } .btn-primary:hover { background: var(--brand-hover); color: var(--fg-on-brand); } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background: var(--bg-surface); color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-sunken); border-color: var(--fg-muted); } .btn-link { color: var(--brand-press); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .btn-link:hover { color: var(--brand); } /* ---- Toolbar ---- */ .toolbar { background: var(--aagap-ink-700); color: var(--aagap-cream-50); font-size: 12.5px; } .toolbar__inner { display: flex; justify-content: space-between; align-items: center; height: 36px; gap: 24px; } .toolbar__inner > div { display: flex; gap: 20px; align-items: center; } .toolbar a { color: rgba(244,236,224,0.85); display: inline-flex; align-items: center; gap: 6px; } .toolbar a:hover { color: white; } /* ---- Header ---- */ .header { position: sticky; top: 0; z-index: 50; padding: 16px 0; background: rgba(251, 247, 241, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--divider); } .header__inner { display: flex; align-items: center; gap: 36px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 42px; } .brand-text strong { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; display: block; line-height: 1; } .brand-text small { font-size: 10.5px; color: var(--fg-muted); letter-spacing: 0.05em; } .nav { display: flex; gap: 22px; margin-left: auto; } .nav a { color: var(--fg); font-weight: 500; font-size: 14.5px; padding: 6px 0; position: relative; } .nav a.active { color: var(--brand-press); } .nav a.active::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--brand); border-radius: 2px; } .nav a:hover { color: var(--brand-press); } .header__cta { display: flex; gap: 10px; align-items: center; } .partner-mini { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--bg-sunken); font-size: 11.5px; color: var(--fg-muted); } .partner-mini img { height: 22px; } /* ---- Breadcrumb ---- */ .crumbs { padding: 18px 0; font-size: 13px; color: var(--fg-muted); display: flex; gap: 10px; align-items: center; } .crumbs a { color: var(--fg-muted); } .crumbs a:hover { color: var(--brand-press); } .crumbs .sep { opacity: 0.4; } .crumbs .here { color: var(--fg); font-weight: 600; } /* ---- Page hero (small) ---- */ .page-hero { padding: 56px 0 72px; background: radial-gradient(ellipse at 88% 18%, var(--aagap-blush-200) 0%, transparent 42%), radial-gradient(ellipse at 8% 92%, var(--aagap-sage-50) 0%, transparent 45%), var(--bg); border-bottom: 1px solid var(--divider); } .page-hero__inner { max-width: 880px; } .page-hero h1 { font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1.04; letter-spacing: -0.025em; margin: 18px 0 22px; color: var(--fg); font-variation-settings: "opsz" 60; text-wrap: balance; } .page-hero h1 em { font-style: italic; color: var(--brand-press); } .page-hero p.deck { font-family: var(--font-serif); font-size: 22px; line-height: 1.5; font-weight: 300; color: var(--fg-muted); margin: 0; max-width: 640px; font-variation-settings: "opsz" 24; text-wrap: pretty; } /* ---- Section primitives ---- */ .section { padding: 96px 0; } .section--cream { background: var(--aagap-cream-100); } .section--sage { background: var(--aagap-sage-50); } .section--ink { background: var(--aagap-ink-700); color: var(--aagap-cream-50); } .section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .section-head--left { margin-left: 0; text-align: left; } .section-head .eyebrow { justify-content: center; } .section-head--left .eyebrow { justify-content: flex-start; } .section-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.08; letter-spacing: -0.022em; margin: 14px 0 14px; font-variation-settings: "opsz" 48; text-wrap: balance; } .section-head h2 em { font-style: italic; color: var(--brand-press); } .section-head p { font-family: var(--font-serif); font-size: 19px; line-height: 1.5; font-weight: 300; color: var(--fg-muted); margin: 0; } /* ---- Photo placeholder ---- */ .ph-label { position: absolute; bottom: 12px; left: 12px; background: rgba(28,26,24,0.55); color: white; padding: 6px 12px; border-radius: 6px; font-size: 11px; display: flex; align-items: center; gap: 6px; backdrop-filter: blur(6px); } /* ---- Footer (Editorial style) ---- */ .footer { background: var(--aagap-cream-100); padding: 84px 0 28px; color: var(--fg); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; } .footer__brand { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .footer__brand img { height: 44px; } .footer__brand strong { font-family: var(--font-serif); font-size: 22px; font-weight: 500; } .footer__brand small { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 1px; } .footer p.footer__about { font-size: 14px; line-height: 1.6; color: var(--fg-muted); margin: 0 0 22px; max-width: 320px; } .footer__socials { display: flex; gap: 10px; } .footer__socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-surface); display: grid; place-items: center; color: var(--fg); box-shadow: var(--shadow-inset); } .footer__socials a:hover { color: var(--brand); background: var(--brand-soft); } .footer h5 { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); margin: 0 0 18px; font-weight: 700; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer ul a { color: var(--fg); font-size: 14px; } .footer ul a:hover { color: var(--brand-press); } .footer__contact li { display: flex; align-items: center; gap: 10px; color: var(--fg-muted); font-size: 13.5px; } .footer__contact li .icon-sm { color: var(--brand); } .footer__partners { border-top: 1px solid var(--border); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .footer__partners .partner-block { display: flex; align-items: center; gap: 16px; } .footer__partners .partner-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); font-weight: 600; } .footer__partners img.sbd { height: 56px; background: white; padding: 6px 10px; border-radius: 8px; box-shadow: var(--shadow-inset); } .footer__legal { font-size: 12.5px; color: var(--fg-muted); text-align: right; } .footer__legal strong { color: var(--fg); display: block; } .footer__legal a { color: var(--fg-muted); } .footer__legal a:hover { color: var(--brand-press); } @media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr; } .page-hero h1 { font-size: 44px; } .section-head h2 { font-size: 34px; } .nav { display: none; } }

Latest posts

Hello world!