/* ========================================================================= FK LAB — Colors & Type Agência de Performance — "Performance que transforma." ========================================================================= */ /* Google Fonts — Inter (body + headings) and Sora (alt heading). Loaded via Google CDN. If self-hosting, copy WOFF2s to fonts/ and swap. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap"); :root { /* ----------------------------------------------------------------------- CHROMIA — Base palette Extracted from the FK Lab logo: deep space black, off-white "FK", and the neon-orange gradient strip that powers every CTA. ----------------------------------------------------------------------- */ --fk-black: #0D0D0D; /* Preto Espacial — primary background */ --fk-graphite: #1A1A1A; /* Cinza Grafite — card / secondary bg */ --fk-graphite-2: #232323; /* Slightly raised surface */ --fk-line: #2A2A2A; /* Hairline border on dark */ --fk-line-soft: #1F1F1F; /* Even more subtle hairline */ --fk-offwhite: #E2E2D9; /* Off-White — main text on dark */ --fk-offwhite-2: #B9B9B0; /* Muted body / captions */ --fk-offwhite-3: #7A7A72; /* Disabled / meta */ --fk-orange: #FF5500; /* Laranja Neon — CTA / focus */ --fk-orange-hot: #FF6A1F; /* Hover lift */ --fk-orange-deep: #C73E00; /* Pressed */ --fk-cyan: #00E5FF; /* Azul Cyan — sparing data accent */ /* Logo gradient — used as a thin strip / underline motif */ --fk-spectrum: linear-gradient(90deg, #FF3A00 0%, #FFC400 22%, #FFF7C2 42%, #6DE9FF 60%, #00B8FF 82%, #1E4FE8 100%); /* Glow — orange "neon" CTA halo */ --fk-glow-orange: 0 0 0 1px rgba(255,85,0,0.35), 0 8px 32px rgba(255,85,0,0.35), 0 2px 0 rgba(0,0,0,0.6) inset; /* ----------------------------------------------------------------------- SEMANTIC COLOR TOKENS ----------------------------------------------------------------------- */ --bg: var(--fk-black); --bg-elevated: var(--fk-graphite); --bg-raised: var(--fk-graphite-2); --bg-invert: var(--fk-offwhite); --fg: var(--fk-offwhite); --fg-muted: var(--fk-offwhite-2); --fg-subtle: var(--fk-offwhite-3); --fg-invert: var(--fk-black); --accent: var(--fk-orange); --accent-hover: var(--fk-orange-hot); --accent-press: var(--fk-orange-deep); --accent-ink: var(--fk-black); /* text ON orange */ --info: var(--fk-cyan); --border: var(--fk-line); --border-soft: var(--fk-line-soft); /* Status — derived to stay on-brand */ --success: #2DD46E; --warning: #FFB020; --danger: #FF4D4D; /* ----------------------------------------------------------------------- SPACING / RADII / SHADOWS / MOTION ----------------------------------------------------------------------- */ --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; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* default — CTAs, cards */ --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45); --shadow-pop: 0 18px 60px rgba(0,0,0,0.6); --shadow-cta: 0 8px 24px rgba(255,85,0,0.28); --ease: cubic-bezier(.2,.7,.2,1); --ease-snap: cubic-bezier(.2,.9,.1,1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms; /* ----------------------------------------------------------------------- TYPOGRAPHY — Inter is primary; Sora reserved for hero/display moments ----------------------------------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; /* Modular type scale — built for dark-mode display */ --fs-display-xl: clamp(56px, 9vw, 120px); --fs-display: clamp(44px, 6.4vw, 80px); --fs-h1: clamp(36px, 4.6vw, 56px); --fs-h2: clamp(28px, 3.2vw, 40px); --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-eyebrow: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.55; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-eyebrow: 0.14em; } /* ========================================================================= ELEMENT DEFAULTS ========================================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--fg); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 900; } h2 { font-size: var(--fs-h2); font-weight: 800; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tracking-snug); } h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: var(--tracking-snug); } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; } p, li { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg); text-wrap: pretty; } .lead { font-size: var(--fs-body-lg); color: var(--fg-muted); line-height: var(--lh-normal); } .small, small { font-size: var(--fs-sm); color: var(--fg-muted); } .meta { font-size: var(--fs-xs); color: var(--fg-subtle); } .eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; } a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--accent-hover); } ::selection { background: var(--accent); color: var(--accent-ink); } /* Highlight a single keyword inside a heading — recurring brand move */ .kw { color: var(--accent); } .kw-underline { background-image: var(--fk-spectrum); background-repeat: no-repeat; background-size: 100% 0.18em; background-position: 0 92%; } /* The 4px spectrum strip — used as logo underline and as a section divider */ .fk-strip { display: block; height: 4px; width: 100%; background: var(--fk-spectrum); border-radius: 2px; }