/* ============================================================ FLUJOGYM — Global Reset & Base ============================================================ */ /* Inter is loaded via in index.html (no @import — avoids a duplicate, render-blocking fetch). */ /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: var(--lh-normal); color: var(--clr-text-1); background: var(--clr-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video { display: block; max-width: 100%; height: auto; } svg { display: block; } a { color: inherit; text-decoration: none; transition: color var(--ease-fast); } button { font: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; } /* ── Keyboard focus ───────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; border-radius: var(--r-sm); } /* Inputs draw their own focus ring (box-shadow) — avoid doubling it. */ .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible, .form-input:focus-visible { outline: none; } h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -.02em; } /* ── Container ────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } /* ── Utilities ────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-gradient { background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 60%, #FBBF24 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Icon ─────────────────────────────────────────────────── */ .icon { width: 1.25em; height: 1.25em; flex-shrink: 0; } .icon--sm { width: 1em; height: 1em; } .icon--lg { width: 1.5em; height: 1.5em; } /* ── Section header ───────────────────────────────────────── */ .section-header { text-align: center; max-width: 660px; margin-inline: auto; margin-bottom: var(--sp-12); } .section-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--clr-text-3); border: 1px solid var(--clr-border); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); } .section-tag--orange { color: var(--clr-primary); border-color: rgba(var(--clr-primary-rgb), .3); background: var(--clr-primary-subtle); } .section-title { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: var(--fw-extrabold); color: var(--clr-text-1); letter-spacing: -.03em; line-height: var(--lh-tight); margin-bottom: var(--sp-4); } .section-subtitle { font-size: var(--text-lg); color: var(--clr-text-2); line-height: var(--lh-relaxed); max-width: 560px; margin-inline: auto; } /* ── Badge ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); background: var(--clr-primary-subtle); color: var(--clr-primary-dark); } .badge--outline { background: transparent; border: 1px solid rgba(var(--clr-primary-rgb), .35); color: var(--clr-primary); } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--text-base); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-lg); border: 2px solid transparent; transition: all var(--ease-normal); cursor: pointer; white-space: nowrap; text-decoration: none; position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.08); opacity: 0; transition: opacity var(--ease-fast); } .btn:hover::after { opacity: 1; } /* Primary */ .btn--primary { background: var(--clr-primary); color: var(--clr-white); box-shadow: var(--shadow-primary); } .btn--primary:hover { background: var(--clr-primary-hover); box-shadow: var(--shadow-primary-lg); transform: translateY(-1px); } .btn--primary:active { transform: translateY(0); } /* Ghost (light background) */ .btn--ghost { background: var(--clr-surface); color: var(--clr-text-1); border-color: var(--clr-border); } .btn--ghost:hover { background: var(--clr-surface-2); border-color: var(--clr-primary); color: var(--clr-primary); } /* Outline */ .btn--outline { background: transparent; border-color: var(--clr-border-s); color: var(--clr-text-1); } .btn--outline:hover { border-color: var(--clr-primary); color: var(--clr-primary); } .btn--outline-light { background: transparent; border-color: rgba(255,255,255,.3); color: var(--clr-white); } .btn--outline-light:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); } .btn--outline-white { background: transparent; border-color: rgba(255,255,255,.5); color: var(--clr-white); } .btn--outline-white:hover { border-color: var(--clr-white); background: rgba(255,255,255,.08); } /* White */ .btn--white { background: var(--clr-white); color: var(--clr-primary); font-weight: var(--fw-bold); } .btn--white:hover { background: var(--clr-primary-subtle); transform: translateY(-1px); } /* Sizes */ .btn--sm { font-size: var(--text-sm); padding: var(--sp-2) var(--sp-4); } .btn--lg { font-size: var(--text-lg); padding: var(--sp-4) var(--sp-8); } .btn--full { width: 100%; } .btn--block { display: flex; width: 100%; } /* Link-style button */ .btn--link { background: transparent; color: var(--clr-primary); padding: var(--sp-3) var(--sp-4); border: none; } .btn--link:hover { color: var(--clr-primary-hover); } /* WhatsApp */ .btn--whatsapp { background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,.30); } .btn--whatsapp:hover { background: #1FB855; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(37,211,102,.35); } /* ── Form elements ────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--clr-text-2); } .form-input { width: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--clr-border); border-radius: var(--r-md); font-size: var(--text-base); background: var(--clr-white); color: var(--clr-text-1); transition: border-color var(--ease-fast), box-shadow var(--ease-fast); outline: none; } .form-input:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glow); } .form-input::placeholder { color: var(--clr-text-3); } .form-error { font-size: var(--text-sm); color: var(--clr-error); min-height: 1.2em; } /* ── Modal overlay ────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--ease-normal); } .modal-overlay.is-open { opacity: 1; pointer-events: all; } .modal { background: var(--clr-white); border-radius: var(--r-2xl); box-shadow: var(--shadow-xl); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; transform: translateY(20px); transition: transform var(--ease-slow); } .modal-overlay.is-open .modal { transform: translateY(0); } .modal__close { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 36px; height: 36px; border-radius: var(--r-md); background: var(--clr-surface); color: var(--clr-text-2); display: flex; align-items: center; justify-content: center; transition: background var(--ease-fast); z-index: 1; } .modal__close:hover { background: var(--clr-surface-2); } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--clr-border-s); border-radius: var(--r-full); } /* ── Animations ───────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-up { animation: fadeUp .6s var(--ease-slow) both; } .animate-fade-in { animation: fadeIn .5s ease both; } /* Stagger delays */ .delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .4s; } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }