/* ============================================================= Thais Caroline Alves — Cirurgiã-Dentista Brand foundations: colors, typography, spacing, elevation ------------------------------------------------------------- Source of truth for the brand. Import this file into any HTML artifact, marketing piece, slide, or component: ============================================================= */ /* ------------------------------------------------------------- 1. WEBFONTS The brand uses three typefaces, none of which ship as standard webfonts. Closest Google Fonts substitutes are loaded below; the primary brand-board names are kept as `--font-*` aliases so real font files can be dropped in later. BRAND → GOOGLE FONTS SUBSTITUTE Bohems Floral → "Style Script" (signature script, used in logo) Autography → "Sacramento" (relaxed handwritten script — body display, "Muito obrigada", etc.) Carot → "Cormorant Garamond"(elegant serif — display & body) ------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Sacramento&family=Style+Script&family=Inter:wght@300;400;500;600;700&display=swap'); /* ------------------------------------------------------------- 2. CORE COLOR TOKENS Brand-board palette. CMYK values from the print spec are noted for reference; hex values are the screen source of truth. ------------------------------------------------------------- */ :root { /* — Brand palette ———————————————————————————————————— */ --color-cocoa: #684B44; /* Primary brown — C0 M28 Y35 K59 */ --color-camel: #D6B799; /* Warm beige — C0 M14 Y29 K16 */ --color-blush: #E2B7BD; /* Dusty pink — C0 M19 Y16 K11 */ --color-cream: #F4EDE9; /* Off-white — C0 M3 Y5 K4 */ /* — Tonal extensions (derived, used in print pieces) ————— */ --color-cocoa-deep: #4F362F; /* deeper brown for hover/press states */ --color-camel-soft: #E6CFB6; --color-blush-soft: #EBD0D4; /* pasta-impressa pink panel */ --color-blush-pale: #F5E4E5; /* envelope / thankyou-card pink */ --color-cream-warm: #FBF6F2; /* page background */ --color-paper: #FFFFFF; /* — Neutrals ————————————————————————————————————————— */ --color-ink: #3D2A26; /* darkest text — softer than pure black */ --color-ink-soft: #6B5550; --color-ink-mute: #9B847E; --color-line: #E8DDD6; /* hairline rules, dividers */ --color-line-soft: #F0E6E0; /* — Semantic ——————————————————————————————————————— */ --bg-page: var(--color-cream-warm); --bg-elevated: var(--color-paper); --bg-tinted: var(--color-blush-pale); --bg-deep: var(--color-cocoa); --bg-deep-grad: radial-gradient(ellipse at 30% 20%, #7a5d54 0%, #5a3f37 70%, #4a322c 100%); --fg-primary: var(--color-ink); --fg-secondary: var(--color-ink-soft); --fg-muted: var(--color-ink-mute); --fg-on-deep: var(--color-cream); --fg-accent: var(--color-camel); --border: var(--color-line); --border-strong: var(--color-camel); --border-on-deep: rgba(255, 255, 255, 0.18); /* ------------------------------------------------------------- 3. TYPEFACE TOKENS Three font families, each with a clear job to do. - Display script (Sacramento) → headlines that should feel handwritten, like the "Muito obrigada" thank-you card - Logo script (Style Script) → reserved for logo lockups and monogram-ish signatures - Serif (Cormorant Garamond) → editorial body & UI display; an elegant pairing for the script - Sans utility (Inter) → small UI metadata, captions, forms — used sparingly, not part of the printed identity but needed for legible web UI at small sizes ------------------------------------------------------------- */ --font-display-script: "Sacramento", "Style Script", cursive; /* Autography substitute */ --font-logo-script: "Style Script", "Sacramento", cursive; /* Bohems Floral substitute */ --font-serif: "Cormorant Garamond", "Carot", "Cormorant", Georgia, "Times New Roman", serif; /* Carot substitute */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* small UI only */ /* — Type scale (modular, ratio ~1.25 / major-third around 16px) — */ --fs-3xs: 11px; --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-base:16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 88px; --fs-6xl: 120px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.55; --lh-loose: 1.8; /* tracking — printed pieces use VERY wide tracking on small caps ("CIRURGIÃ - DENTISTA"). Match it. */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; --tracking-widest: 0.32em; /* sub-line under logo */ /* ------------------------------------------------------------- 4. SPACING 8-pt baseline grid with a few half-steps for tight UI moments. ------------------------------------------------------------- */ --space-0: 0; --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; --space-10:128px; /* ------------------------------------------------------------- 5. RADII — the brand is decidedly soft. Hard 90° corners only show up on photographic frames; everything UI is rounded. ------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --radius-circle: 50%; /* ------------------------------------------------------------- 6. ELEVATION — soft, blush-tinted shadows. Never grey/black. ------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(104, 75, 68, 0.06), 0 1px 1px rgba(104, 75, 68, 0.04); --shadow-md: 0 6px 16px rgba(104, 75, 68, 0.08), 0 2px 4px rgba(104, 75, 68, 0.05); --shadow-lg: 0 18px 40px rgba(104, 75, 68, 0.12), 0 6px 12px rgba(104, 75, 68, 0.06); --shadow-xl: 0 32px 80px rgba(104, 75, 68, 0.16), 0 12px 24px rgba(104, 75, 68, 0.08); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ------------------------------------------------------------- 7. MOTION The identity is calm and considered — animations should feel like watercolor settling, not snappy. ------------------------------------------------------------- */ --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-vlow: 720ms; } /* ------------------------------------------------------------- 8. SEMANTIC TYPE STYLES Apply via class or use the bare element selectors below. ------------------------------------------------------------- */ /* Page baseline ------------------------------------------------ */ html, body { font-family: var(--font-serif); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* DISPLAY SCRIPT ---- the signature voice. Use sparingly. Examples in printed ID: "Muito obrigada", "Thais Caroline Alves", "Dra. Thais Caroline" sign-off. Always large, never tracked, always in --color-ink or --color-cocoa. */ .t-script, .t-display-script { font-family: var(--font-display-script); font-weight: 400; line-height: 1.0; letter-spacing: var(--tracking-normal); color: var(--color-ink); } .t-script--xl { font-size: var(--fs-5xl); } .t-script--lg { font-size: var(--fs-4xl); } .t-script--md { font-size: var(--fs-3xl); } .t-script--sm { font-size: var(--fs-2xl); } /* HEADLINES (serif) ----- editorial, generous leading. */ h1, .t-h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); margin: 0; } h2, .t-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-primary); margin: 0; } h3, .t-h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg-primary); margin: 0; } h4, .t-h4 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--fg-primary); margin: 0; } /* EYEBROW / SUB-LABEL — wide-tracked small caps, the signature secondary voice. Used everywhere: "CIRURGIÃ - DENTISTA", "DOCUMENTOS", "PALETA DE CORES". */ .t-eyebrow { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--fg-secondary); } .t-eyebrow--accent { color: var(--color-camel); } .t-eyebrow--on-deep { color: var(--color-cream); } /* BODY ----- */ p, .t-body { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-primary); text-wrap: pretty; margin: 0 0 var(--space-4); } .t-body--lg { font-size: var(--fs-lg); line-height: var(--lh-normal); } .t-body--sm { font-size: var(--fs-sm); } .t-lead { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-secondary); } /* UI sans (small captions, inputs, badges only) ---- */ .t-ui { font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: var(--tracking-normal); color: var(--fg-secondary); } .t-ui--xs { font-family: var(--font-sans); font-size: var(--fs-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } /* MONO — receipts, technical specs, prescription codes */ .t-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-sm); color: var(--fg-secondary); } /* Links ---- understated. */ a { color: var(--color-cocoa); text-decoration: none; border-bottom: 1px solid var(--color-camel); transition: opacity var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft); } a:hover { opacity: 0.7; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; } /* Selection ------- */ ::selection { background: var(--color-blush-soft); color: var(--color-ink); }