/* ======================================================================== Futura Motion — Foundations: Color & Typography ======================================================================== Premium fisioterapia, performance & reabilitação clinic in São Paulo. Editorial, elegant, direct — like a high-end lifestyle magazine. ======================================================================== */ /* Webfont (Poppins is the official brand face). Loaded from Google Fonts CDN; for production, swap to self-hosted in /fonts. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { /* -------------------------------------------------------------------- COLOR — Brand palette (from IDV - Futura Motion.pdf) -------------------------------------------------------------------- */ /* Primary blues — the signature of the brand mark */ --fm-azure: #6FABDD; /* C54 M21 Y0 K0 — light, optimistic, motion */ --fm-cobalt: #2D689A; /* C87 M59 Y18 K2 — primary action / link */ --fm-deep: #00273D; /* C99 M78 Y48 K54 — primary text on light, dark surfaces */ /* Neutrals — clinical, restrained */ --fm-graphite: #404B54; /* C74 M60 Y50 K34 — secondary text, supporting */ --fm-bone: #E9EBED; /* C7 M4 Y4 K0 — section backgrounds, dividers */ --fm-paper: #F6F7F8; /* derived: warmer paper for body bg */ --fm-white: #FFFFFF; --fm-ink: #00273D; /* alias for --fm-deep used as ink */ /* Tints / scales (algorithmic, for hovers/strokes/overlays) */ --fm-azure-12: rgba(111,171,221,0.12); --fm-azure-24: rgba(111,171,221,0.24); --fm-cobalt-12: rgba(45,104,154,0.12); --fm-deep-08: rgba(0,39,61,0.08); --fm-deep-16: rgba(0,39,61,0.16); --fm-deep-60: rgba(0,39,61,0.60); --fm-deep-80: rgba(0,39,61,0.80); /* -------------------------------------------------------------------- SEMANTIC — surfaces, foreground, borders -------------------------------------------------------------------- */ --bg-page: var(--fm-paper); --bg-surface: var(--fm-white); --bg-muted: var(--fm-bone); --bg-inverse: var(--fm-deep); --fg-primary: var(--fm-deep); /* body text on light */ --fg-secondary: var(--fm-graphite); /* meta / captions */ --fg-tertiary: #6E7882; /* hint / disabled */ --fg-on-dark: var(--fm-white); --fg-on-dark-soft: rgba(255,255,255,0.72); --fg-link: var(--fm-cobalt); --fg-accent: var(--fm-azure); --border-soft: rgba(0,39,61,0.08); --border-strong: rgba(0,39,61,0.16); --border-on-dark: rgba(255,255,255,0.12); /* Status (derived; brand uses cool palette so we stay restrained) */ --status-success: #2F8F6F; --status-warning: #C8862C; --status-danger: #B94A48; /* -------------------------------------------------------------------- TYPE — Poppins, used like an editorial sans -------------------------------------------------------------------- */ --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Weight scale (the IDV shows Bold + Regular; we add 500/600 as bridges) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale — editorial. Display tier is tight, body is generous. */ --fs-display-xl: clamp(56px, 8vw, 112px); --fs-display-lg: clamp(44px, 6vw, 80px); --fs-display: clamp(36px, 4.5vw, 56px); --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-overline: 11px; /* Line heights */ --lh-display: 1.02; --lh-heading: 1.15; --lh-body: 1.55; --lh-tight: 1.25; /* Letter spacing — display is tight, overline/eyebrow is wide */ --ls-display: -0.025em; --ls-heading: -0.01em; --ls-body: 0; --ls-eyebrow: 0.18em; /* THE MAGAZINE EYEBROW */ --ls-button: 0.06em; /* -------------------------------------------------------------------- SPACING — 4px base -------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Radii — restrained. Editorial = softer-than-square but not pillowy. */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 24px; --r-pill: 999px; /* Shadows — clinical, almost-none. Used sparingly. */ --shadow-1: 0 1px 0 0 rgba(0,39,61,0.04), 0 1px 2px rgba(0,39,61,0.04); --shadow-2: 0 4px 16px -4px rgba(0,39,61,0.10); --shadow-3: 0 16px 40px -12px rgba(0,39,61,0.18); --shadow-inset: inset 0 0 0 1px rgba(0,39,61,0.06); /* Motion */ --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; } /* ============================================================ BASE ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--fg-primary); background: var(--bg-page); } ::selection { background: var(--fm-azure); color: var(--fm-deep); } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .fm-eyebrow { font-family: var(--font-sans); font-size: var(--fs-overline); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fm-cobalt); } .fm-display-xl { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg-primary); } .fm-display-lg { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg-primary); } .fm-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg-primary); } .fm-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } .fm-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } .fm-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-tight); } .fm-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-tight); } .fm-lede { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--fg-secondary); font-weight: var(--fw-regular); } .fm-body { font-size: var(--fs-body); line-height: var(--lh-body); } .fm-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; } .fm-caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-secondary); } .fm-button-text { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); letter-spacing: var(--ls-button); text-transform: uppercase; } a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--fm-deep); }