/* ============================================================ ISAC LACERDA — DESIGN SYSTEM Sprint Master · Theme tokens, typography, primitives ============================================================ 3 palettes available via data-palette attribute on : - vogue (default) — Vogue Cream & Bordeaux - brutal — Brutalist Editorial (carmín) - brasil — Soft Brasil-Modernismo (musgo) ============================================================ */ :root, :root[data-palette="vogue"] { --is-bg: #F4EFE6; --is-bg-2: #EDE6D8; --is-bg-deep: #E4DBC8; --is-card: #FBF8F2; --is-card-2: #F7F2E7; --is-text: #1F1A17; --is-text-2: #6B5F54; --is-text-3: #A39689; --is-accent: #5C1A2B; /* bordeaux */ --is-accent-deep: #3D0E1C; --is-accent-light: #7D2E40; --is-accent-warm: #C9A876; /* champagne */ --is-border: rgba(92,26,43,.10); --is-border-soft: rgba(92,26,43,.06); --is-hairline: rgba(31,26,23,.14); --is-hairline-soft:rgba(31,26,23,.06); --is-shadow: 0 1px 0 rgba(92,26,43,.04), 0 20px 50px -30px rgba(31,26,23,.18); --is-noise-opacity: .035; } :root[data-palette="brutal"] { --is-bg: #F2EDE3; --is-bg-2: #E9E2D2; --is-bg-deep: #DED4BE; --is-card: #FAF6EC; --is-card-2: #F4EEDE; --is-text: #0A0A0A; --is-text-2: #4B453A; --is-text-3: #7A6F62; --is-accent: #D9263F; --is-accent-deep: #A91929; --is-accent-light: #E94B5F; --is-accent-warm: #C9A876; --is-border: rgba(217,38,63,.12); --is-border-soft: rgba(10,10,10,.08); --is-hairline: rgba(10,10,10,.18); --is-hairline-soft:rgba(10,10,10,.08); --is-shadow: 0 1px 0 rgba(217,38,63,.04), 0 18px 48px -30px rgba(10,10,10,.20); --is-noise-opacity: .04; } :root[data-palette="brasil"] { --is-bg: #EFE9DC; --is-bg-2: #E6DFCD; --is-bg-deep: #D9D0B9; --is-card: #FAF5EB; --is-card-2: #F4EEDF; --is-text: #20221E; --is-text-2: #5A5C53; --is-text-3: #8A8C81; --is-accent: #5C1A2B; /* bordeaux brasileiro */ --is-accent-deep: #3D0E1C; --is-accent-light: #7D2E40; --is-accent-warm: #3E5B45; /* verde-musgo Burle Marx */ --is-border: rgba(62,91,69,.12); --is-border-soft: rgba(32,34,30,.06); --is-hairline: rgba(32,34,30,.14); --is-hairline-soft:rgba(32,34,30,.06); --is-shadow: 0 1px 0 rgba(62,91,69,.04), 0 20px 50px -30px rgba(32,34,30,.18); --is-noise-opacity: .035; } /* ── Reset / base ───────────────────────────────────────── */ *,*::before,*::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--is-bg); color: var(--is-text); font-family: 'Inter', ui-sans-serif, -apple-system, system-ui, sans-serif; font-size: 17px; line-height: 1.55; font-feature-settings: 'ss01','ss02','cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } ::selection { background: var(--is-accent); color: var(--is-bg); } /* Paper grain overlay (sensação tátil de revista) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml;utf8,"); opacity: var(--is-noise-opacity); mix-blend-mode: multiply; } /* ── Typography scale ───────────────────────────────────── */ .is-display { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-weight: 360; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1; letter-spacing: -0.022em; line-height: .92; } .is-display em, .is-display i { font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-weight: 360; color: var(--is-text); } .is-serif { font-family: 'Fraunces', Georgia, serif; font-weight: 360; letter-spacing: -0.014em; line-height: 1.05; } .is-serif em, .is-serif i { font-style: italic; font-variation-settings: 'opsz' 60, 'SOFT' 100, 'WONK' 1; } .is-italic { font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.005em; line-height: 1.25; } .is-mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--is-text-2); } .is-mono-sm { font-size: .62rem; letter-spacing: .18em; } .is-body { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.7; color: var(--is-text-2); } .is-body-lg { font-size: 1.125rem; line-height: 1.65; color: var(--is-text-2); } /* Drop cap */ .is-dropcap::first-letter { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 360; font-size: 5.6em; line-height: .82; float: left; padding: .1em .14em 0 0; color: var(--is-accent); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; } /* ── Layout primitives ──────────────────────────────────── */ .is-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); position: relative; z-index: 2; } .is-wrap-narrow { max-width: 980px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); position: relative; z-index: 2; } .is-section { padding-block: clamp(80px, 10vw, 160px); position: relative; } .is-section-tight { padding-block: clamp(56px, 7vw, 110px); position: relative; } .is-hairline { height: 1px; background: var(--is-hairline); width: 100%; } .is-hairline-soft { height: 1px; background: var(--is-hairline-soft); width: 100%; } /* ── Section divider ────────────────────────────────────── */ .is-divider { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(40px, 6vw, 80px); } .is-divider .line { flex: 1; height: 1px; background: var(--is-hairline); } .is-divider .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-accent); font-weight: 500; } .is-divider .lbl { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-text-2); font-weight: 500; } /* ── Buttons ────────────────────────────────────────────── */ .is-btn { display: inline-flex; align-items: center; gap: .6rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; padding: 1.05em 1.6em; border-radius: 999px; transition: all .35s cubic-bezier(.4,0,.2,1); white-space: nowrap; position: relative; } .is-btn-fill { background: var(--is-accent); color: var(--is-bg); } .is-btn-fill:hover { background: var(--is-accent-deep); transform: translateY(-1px); box-shadow: 0 14px 30px -16px rgba(92,26,43,.55); } .is-btn-outline { border: 1px solid var(--is-accent); color: var(--is-accent); } .is-btn-outline:hover { background: var(--is-accent); color: var(--is-bg); } .is-btn-ghost { color: var(--is-accent); border-bottom: 1px solid var(--is-accent); border-radius: 0; padding: .3em 0 .2em; } .is-btn-ghost:hover { color: var(--is-accent-deep); letter-spacing: .26em; } .is-btn .arrow { display: inline-block; transition: transform .35s; } .is-btn:hover .arrow { transform: translateX(4px); } /* ── Card / surface ─────────────────────────────────────── */ .is-card { background: var(--is-card); border: 1px solid var(--is-border); position: relative; } .is-card-frame { background: var(--is-card); border: 1px solid var(--is-hairline); padding: clamp(28px, 3vw, 44px); } /* Editorial photo frame */ .is-photo-frame { position: relative; background: var(--is-bg-deep); overflow: hidden; outline: 1px solid var(--is-border); outline-offset: -1px; } .is-photo-frame .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--is-bg); background: linear-gradient(0deg, rgba(31,26,23,.7), transparent); } /* Placeholder stripe pattern */ .is-placeholder { background: repeating-linear-gradient(135deg, var(--is-bg-deep) 0 14px, var(--is-card-2) 14px 28px); } .is-placeholder .ph-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-text-2); text-align: center; padding: 12px; } /* Pull quote */ .is-pullquote { border-left: 2px solid var(--is-accent); padding: 1.6rem 0 1.6rem 1.8rem; font-family: 'Cormorant Garamond', 'Fraunces', serif; font-style: italic; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.3; color: var(--is-text); letter-spacing: -0.005em; font-weight: 400; } .is-pullquote cite { display: block; margin-top: 1rem; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--is-text-2); font-weight: 500; } /* ── Headlines responsive scale ─────────────────────────── */ .h-display-1 { font-size: clamp(3.2rem, 9vw, 8.2rem); } .h-display-2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); } .h-display-3 { font-size: clamp(2rem, 4.4vw, 3.6rem); } .h-display-4 { font-size: clamp(1.6rem, 3vw, 2.4rem); } /* ── Marquee ticker ─────────────────────────────────────── */ .is-ticker { overflow: hidden; border-top: 1px solid var(--is-hairline); border-bottom: 1px solid var(--is-hairline); padding: 18px 0; background: var(--is-bg-2); } .is-ticker-track { display: flex; gap: 3.5rem; width: max-content; animation: is-marquee 60s linear infinite; font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-text); } .is-ticker-track span { display: inline-flex; align-items: center; gap: 3.5rem; } .is-ticker-track .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--is-accent); } @keyframes is-marquee { to { transform: translateX(-50%); } } /* ── Reveal anims ───────────────────────────────────────── */ @keyframes is-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes is-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes is-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes is-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes is-blur-in { from { opacity: 0; filter: blur(14px); transform: translateY(20px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } .reveal-rise { animation: is-rise 1s cubic-bezier(.2,.7,.2,1) both; } .reveal-fade { animation: is-fade 1.4s ease-out both; } .reveal-curtain{ animation: is-curtain 1.2s cubic-bezier(.65,.05,.36,1) both; } .reveal-blur { animation: is-blur-in 1.2s cubic-bezier(.2,.7,.2,1) both; } .reveal-line { animation: is-line-grow 1s cubic-bezier(.7,0,.2,1) both; transform-origin: left; } /* IO stagger helper — apply via class + style="--d:120ms" */ .io-stagger > * { opacity: 0; } .io-stagger.is-in > * { animation: is-rise 1s cubic-bezier(.2,.7,.2,1) both; } .io-stagger.is-in > *:nth-child(1) { animation-delay: 0ms; } .io-stagger.is-in > *:nth-child(2) { animation-delay: 90ms; } .io-stagger.is-in > *:nth-child(3) { animation-delay: 180ms; } .io-stagger.is-in > *:nth-child(4) { animation-delay: 270ms; } .io-stagger.is-in > *:nth-child(5) { animation-delay: 360ms; } .io-stagger.is-in > *:nth-child(6) { animation-delay: 450ms; } /* ── Bordeaux Aurora (subtle drift orbs over bege) ──────── */ .is-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .is-aurora::before, .is-aurora::after { content: ""; position: absolute; width: 56vw; height: 56vw; max-width: 800px; max-height: 800px; border-radius: 50%; filter: blur(120px); opacity: .14; animation: is-drift 24s ease-in-out infinite alternate; } .is-aurora::before { background: var(--is-accent); top: -20%; left: -10%; } .is-aurora::after { background: var(--is-accent-warm); bottom: -25%; right: -15%; animation-delay: -12s; opacity: .12; } @keyframes is-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(6vw, 4vh) scale(1.1); } } /* ── Nav ────────────────────────────────────────────────── */ .is-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); background: rgba(244,239,230,.78); border-bottom: 1px solid var(--is-hairline-soft); transition: all .3s; } [data-palette="brutal"] .is-nav { background: rgba(242,237,227,.82); } [data-palette="brasil"] .is-nav { background: rgba(239,233,220,.82); } .is-nav.scrolled { background: rgba(244,239,230,.92); border-bottom-color: var(--is-hairline); } .is-nav-row { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(20px, 4vw, 56px); } .is-nav-logo { font-family: 'Fraunces', serif; font-weight: 380; font-size: 1.5rem; letter-spacing: -.02em; font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1; } .is-nav-logo em { font-style: italic; color: var(--is-accent); font-weight: 360; } .is-nav-links { display: flex; gap: 2.2rem; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .is-nav-links a { color: var(--is-text-2); transition: color .25s; position: relative; } .is-nav-links a:hover { color: var(--is-accent); } .is-nav-links a.cta { color: var(--is-bg); background: var(--is-accent); padding: .85em 1.4em; border-radius: 999px; } .is-nav-links a.cta:hover { background: var(--is-accent-deep); color: var(--is-bg); } /* Language toggle */ .is-lang { display: inline-flex; border: 1px solid var(--is-hairline); border-radius: 999px; padding: 3px; font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; } .is-lang button { padding: .55em 1em; border-radius: 999px; color: var(--is-text-2); transition: all .25s; } .is-lang button.on { background: var(--is-text); color: var(--is-bg); } /* ── Footer ─────────────────────────────────────────────── */ .is-footer { background: var(--is-bg-2); border-top: 1px solid var(--is-hairline); padding-block: clamp(60px, 8vw, 100px) 30px; margin-top: clamp(60px, 8vw, 100px); } /* ── Floating WhatsApp ──────────────────────────────────── */ .is-wa { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: .7rem; padding: 14px 18px 14px 14px; background: var(--is-text); color: var(--is-bg); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; box-shadow: 0 14px 40px -12px rgba(31,26,23,.4); transition: all .3s; } .is-wa:hover { background: var(--is-accent); transform: translateY(-2px); } .is-wa .dot { width: 8px; height: 8px; border-radius: 50%; background: #4AE57C; box-shadow: 0 0 0 4px rgba(74,229,124,.18); } /* ── Consent banner ─────────────────────────────────────── */ .is-consent { position: fixed; bottom: 22px; left: 22px; z-index: 41; max-width: 360px; background: var(--is-card); border: 1px solid var(--is-border); padding: 18px 20px; font-size: .82rem; line-height: 1.55; color: var(--is-text-2); box-shadow: 0 30px 60px -20px rgba(31,26,23,.3); transition: all .35s; } .is-consent strong { color: var(--is-text); font-weight: 600; } .is-consent .row { display: flex; gap: 10px; margin-top: 12px; } .is-consent button { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; padding: .7em 1em; border-radius: 999px; font-weight: 500; } .is-consent .accept { background: var(--is-text); color: var(--is-bg); } .is-consent .accept:hover { background: var(--is-accent); } .is-consent .reject { border: 1px solid var(--is-hairline); } /* ── Hero ───────────────────────────────────────────────── */ .is-hero { position: relative; min-height: 100vh; padding-top: 120px; padding-bottom: 80px; display: flex; align-items: center; } .is-hero .grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 100px); align-items: end; width: 100%; } @media (max-width: 880px) { .is-hero .grid { grid-template-columns: 1fr; gap: 50px; } .is-hero { padding-top: 100px; min-height: auto; } } /* ── Pricing cards (Club da Lulu) ───────────────────────── */ .is-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--is-hairline); border: 1px solid var(--is-hairline); } @media (max-width: 980px) { .is-pricing { grid-template-columns: 1fr; } } .is-pricing .tier { background: var(--is-card); padding: clamp(32px, 3vw, 48px) clamp(28px, 2.6vw, 40px); position: relative; display: flex; flex-direction: column; transition: background .3s; } .is-pricing .tier:hover { background: var(--is-card-2); } .is-pricing .tier.featured { background: var(--is-text); color: var(--is-bg); } .is-pricing .tier.featured:hover { background: #2A2421; } .is-pricing .tier.featured .price-row { color: var(--is-bg); } .is-pricing .tier.featured .price-cur { color: var(--is-accent-warm); } .is-pricing .tier .name { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; } .is-pricing .tier .pill { position: absolute; top: -1px; right: -1px; background: var(--is-accent); color: var(--is-bg); padding: .6em 1.1em; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; } .is-pricing .tier .price-row { font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 360; letter-spacing: -.02em; line-height: 1; margin-bottom: .2rem; } .is-pricing .tier .price-row sub { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .16em; vertical-align: middle; color: var(--is-text-3); font-weight: 500; margin-left: .3rem; } .is-pricing .tier.featured .price-row sub { color: rgba(244,239,230,.55); } .is-pricing .tier .price-cur { font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; color: var(--is-accent); margin-bottom: 1.6rem; } .is-pricing .tier ul { list-style: none; padding: 0; margin: 0 0 2rem; } .is-pricing .tier ul li { padding: .55em 0; font-size: .9rem; line-height: 1.5; border-bottom: 1px solid var(--is-hairline-soft); color: var(--is-text-2); position: relative; padding-left: 1.4em; } .is-pricing .tier.featured ul li { color: rgba(244,239,230,.78); border-bottom-color: rgba(244,239,230,.1); } .is-pricing .tier ul li::before { content: "—"; position: absolute; left: 0; top: .55em; color: var(--is-accent); font-weight: 500; } .is-pricing .tier.featured ul li::before { color: var(--is-accent-warm); } .is-pricing .tier .btn-wrap { margin-top: auto; } .is-pricing .tier.featured .is-btn-fill { background: var(--is-accent-warm); color: var(--is-text); } .is-pricing .tier.featured .is-btn-fill:hover { background: var(--is-bg); color: var(--is-text); } /* ── Metric counter ─────────────────────────────────────── */ .is-metrics { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--is-hairline); border-bottom: 1px solid var(--is-hairline); } @media (max-width: 980px) { .is-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .is-metrics { grid-template-columns: 1fr; } } .is-metric { padding: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); border-right: 1px solid var(--is-hairline-soft); position: relative; } .is-metric:last-child { border-right: 0; } @media (max-width: 980px) { .is-metric { border-right: 1px solid var(--is-hairline-soft); border-bottom: 1px solid var(--is-hairline-soft); } } .is-metric .num { font-family: 'Fraunces', serif; font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 360; letter-spacing: -.025em; line-height: 1; color: var(--is-text); } .is-metric .num em { font-style: italic; color: var(--is-accent); font-size: .55em; vertical-align: super; margin-left: .1em; } .is-metric .lbl { margin-top: .6rem; font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--is-text-2); font-weight: 500; line-height: 1.5; } /* ── Gallery mosaic ─────────────────────────────────────── */ .is-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 100px; gap: 14px; } @media (max-width: 880px) { .is-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 90px; gap: 10px; } } .is-mosaic .tile { position: relative; overflow: hidden; background: var(--is-bg-deep); outline: 1px solid var(--is-border-soft); outline-offset: -1px; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .is-mosaic .tile:hover { transform: scale(1.012); } .is-mosaic .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(92,26,43,.55)); opacity: 0; transition: opacity .4s; } .is-mosaic .tile:hover::after { opacity: 1; } .is-mosaic .tile .cap { position: absolute; left: 16px; bottom: 14px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-bg); opacity: 0; transform: translateY(8px); transition: all .4s; z-index: 2; } .is-mosaic .tile:hover .cap { opacity: 1; transform: translateY(0); } /* ── FAQ ────────────────────────────────────────────────── */ .is-faq { border-top: 1px solid var(--is-hairline); } .is-faq details { border-bottom: 1px solid var(--is-hairline); padding: 1.4rem 0; } .is-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Fraunces', serif; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 400; letter-spacing: -.01em; color: var(--is-text); gap: 1rem; } .is-faq summary::-webkit-details-marker { display: none; } .is-faq summary .plus { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--is-accent); transition: transform .35s; flex-shrink: 0; } .is-faq details[open] summary .plus { transform: rotate(45deg); } .is-faq details > div { padding-top: 1rem; font-size: 1rem; line-height: 1.7; color: var(--is-text-2); max-width: 70ch; } /* ── Form (consultoria/mentoria) ────────────────────────── */ .is-form-steps { display: flex; gap: 6px; margin-bottom: 2.4rem; } .is-form-steps .step { flex: 1; height: 2px; background: var(--is-hairline); position: relative; } .is-form-steps .step.on { background: var(--is-accent); } .is-form-steps .step .lbl { position: absolute; top: 10px; left: 0; font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--is-text-3); font-weight: 500; } .is-form-steps .step.on .lbl { color: var(--is-accent); } .is-input-grp { display: flex; flex-direction: column; gap: .55em; margin-bottom: 1.4rem; } .is-input-lbl { font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--is-text-2); font-weight: 500; } .is-input, .is-textarea, .is-select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--is-hairline); padding: .65em 0; font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--is-text); letter-spacing: -.005em; transition: border-color .25s; font-weight: 360; } .is-input:focus, .is-textarea:focus, .is-select:focus { outline: 0; border-color: var(--is-accent); } .is-input::placeholder, .is-textarea::placeholder { color: var(--is-text-3); font-style: italic; } .is-textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .is-chips { display: flex; flex-wrap: wrap; gap: 8px; } .is-chips .chip { padding: .65em 1.1em; border-radius: 999px; border: 1px solid var(--is-hairline); font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--is-text-2); font-weight: 500; transition: all .25s; cursor: pointer; } .is-chips .chip:hover { border-color: var(--is-accent-light); color: var(--is-accent); } .is-chips .chip.on { background: var(--is-text); color: var(--is-bg); border-color: var(--is-text); } /* ── Utility ────────────────────────────────────────────── */ .is-eyebrow { display: inline-flex; align-items: center; gap: .8rem; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--is-accent); font-weight: 600; margin-bottom: 1.5rem; } .is-eyebrow .bar { width: 28px; height: 1px; background: currentColor; } .txt-balance { text-wrap: balance; } .txt-pretty { text-wrap: pretty; } .flex-col-mobile { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 880px) { .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); } } @media (min-width: 880px) { .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(40px, 5vw, 80px); } } @media (min-width: 880px) { .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 5vw, 80px); } } .txt-right { text-align: right; } .txt-accent { color: var(--is-accent); } .txt-mute { color: var(--is-text-2); } .txt-faint { color: var(--is-text-3); }