/* ========================================================================== BIPBIP — styles.css · v4 "Apple × Uber Freight" (BRIEF §5-B + §10-A) -------------------------------------------------------------------------- Gramática: canvas branco/quase-preto, vermelho #E4002D cirúrgico (máx. 2 momentos full-red por página), header de vidro, bento, tipografia gigante Saira Condensed + Inter 19-21px, pills radius 980px, sombras Apple, footer claro. Alma Ivity intocável: grelha BIP BIP, between-points ›————›, listas "+", FILL BETTER., chevron ›. Zero dependências. Mobile-first. Breakpoints 375 / 768 / 1024 / 1440. prefers-reduced-motion desliga TUDO. ========================================================================== */ /* -------------------------------------------------------------------------- 0. FONTS Nota (§10-A.7): cada página faz preload no (preconnect + preload as="style" + stylesheet com o MESMO URL — o browser deduplica). Este @import fica como fallback para o CSS nunca ficar sem fonts. -------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,600;0,700;0,800;1,800&family=Inter:wght@400;500;600;700&display=swap"); /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Marca (inegociável) */ --red: #E4002D; /* Pantone 185C */ --red-hover: #CE0029; /* hover: escurece ~6% (§5-B.5) */ --red-pressed: #B50024; /* pressed */ --red-small-on-white: #C10025; /* vermelho para texto pequeno sobre branco (AA ≥4.5) */ --red-on-dark: #FF3355; /* vermelho para texto pequeno sobre escuro (AA ≥4.5) */ --line-on-red: rgba(255, 255, 255, .28); /* grelha Ivity */ /* Canvas */ --white: #FFFFFF; --ink: #0B0B0F; /* quase-preto */ --ink-2: #131318; /* superfície elevada sobre escuro */ --ink-3: #1B1B21; /* superfície mais elevada sobre escuro */ /* Cinzas Apple */ --gray-bg: #F5F5F7; /* secções alternadas claras + footer */ --hairline: #D2D2D7; /* linhas 1px sobre claro */ --hairline-dark: rgba(255, 255, 255, .12); /* linhas 1px sobre escuro */ --muted: #6E6E73; /* texto secundário sobre claro (só ≥14px) */ --muted-dark: #A1A1A6; /* texto secundário sobre escuro */ --success: #0E7A3C; /* Tipografia */ --font-display: "Saira Condensed", "Arial Narrow", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Raios */ --r-pill: 980px; /* botões / chips / tabs (estilo Apple) */ --r-tile: 24px; /* tiles bento / cards */ --r-card: 28px; /* cards grandes / calculadora-produto */ --r-input: 12px; /* Sombras Apple (§5-B.6) */ --shadow-soft: 0 4px 24px rgba(0, 0, 0, .06); --shadow-lift: 0 12px 40px rgba(0, 0, 0, .10); --shadow-deep: 0 30px 90px rgba(0, 0, 0, .35), 0 4px 20px rgba(0, 0, 0, .30); /* Movimento */ --ease-apple: cubic-bezier(.25, .1, .25, 1); --dur-story: 600ms; /* scroll-story (exceção justificada, §5-B.4) */ --dur-ui: 200ms; /* Layout */ --container: 1200px; --header-h: 52px; --section-y: clamp(88px, 10vw, 144px); --gap: 24px; } @media (min-width: 768px) { :root { --header-h: 56px; } } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @media (min-width: 768px) { body { font-size: 19px; } } @media (min-width: 1440px) { body { font-size: 21px; } } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--red-small-on-white); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--red); color: var(--white); } /* Foco visível 3px — sempre */ :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; } .section--ink :focus-visible, .result-card :focus-visible, .calc-card :focus-visible, .cta-band :focus-visible, .manifesto :focus-visible, .hero-red :focus-visible, .error-hero :focus-visible, .bento__tile--red :focus-visible, .bento__tile--dark :focus-visible { outline-color: var(--white); } /* Âncoras não desaparecem sob o header fixo */ [id] { scroll-margin-top: calc(var(--header-h) + 24px); } /* Utilitários */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 32px); } .text-center { text-align: center; } .text-red { color: var(--red); } .muted { color: var(--muted); } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mb-2 { margin-bottom: 16px; } .mb-4 { margin-bottom: 40px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 1200; background: var(--ink); color: var(--white); padding: 12px 20px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; } .skip-link:focus { top: 12px; text-decoration: none; } /* -------------------------------------------------------------------------- 3. TIPOGRAFIA — escala Apple (§5-B) -------------------------------------------------------------------------- */ .display-xl, .display-lg, .display-md { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; } .display-xl { font-size: clamp(56px, 9vw, 128px); line-height: 0.98; } .display-lg { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; } .display-md { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; font-weight: 700; } .eyebrow { font-family: var(--font-body); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red); margin-bottom: 16px; } .lead { font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; font-weight: 400; max-width: 62ch; } /* FILL BETTER. — assinatura Ivity (Saira Condensed 800 italic) */ .fill-better { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; color: var(--red); } /* Números tabulares para dados */ [data-count], .stat__value, .result-number, .result-mini__value, .intensity__value, .calc-compare__value { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 4. ÍCONES (Lucide stroke 2 + chevron da marca) -------------------------------------------------------------------------- */ .i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .i-lead { width: 28px; height: 28px; color: var(--red); margin-bottom: 20px; } .i-bip { fill: currentColor; stroke: none; } /* -------------------------------------------------------------------------- 5. HEADER DE VIDRO (§5-B.1 + §10-A.4) Barra fixa translúcida, hairline, logo vermelho ~28px, CTA pill. .scrolled (via main.js): hairline mais presente + sombra suave. -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(210, 210, 215, .5); transition: border-color var(--dur-ui) var(--ease-apple), box-shadow var(--dur-ui) var(--ease-apple); } @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) { .site-header { background: rgba(255, 255, 255, .97); } } .site-header.scrolled { border-bottom-color: var(--hairline); box-shadow: 0 1px 12px rgba(0, 0, 0, .05); } /* v3 usava uma variante transparente; no v4 o header é SEMPRE claro (legibilidade primeiro, §5-B.1) — a classe fica neutralizada. */ .site-header--transparent { background: rgba(255, 255, 255, .72); } .site-header .container { display: flex; align-items: center; gap: 20px; height: 100%; } .brand { display: inline-flex; align-items: center; flex-shrink: 0; } .brand-logo { height: 24px; width: auto; } @media (min-width: 768px) { .brand-logo { height: 28px; } } .brand-logo--white { display: none; } /* legado v3: o header nunca é escuro no v4 */ /* Nav desktop */ .site-nav { display: none; } .site-nav__list { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); } .site-nav__link { font-size: 14px; font-weight: 500; color: rgba(11, 11, 15, .78); padding: 6px 2px; white-space: nowrap; } .site-nav__link:hover { color: var(--ink); text-decoration: none; } .site-nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; } .site-nav__actions { display: none; } .header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; } .header-login { display: none; font-size: 14px; font-weight: 500; color: var(--muted); } .header-login:hover { color: var(--ink); text-decoration: none; } /* CTA do header: pill vermelho pequeno (radius 980, estilo Apple). Especificidade dupla: vence o .btn base definido mais abaixo. */ .site-header .header-cta.btn { font-size: 13px; padding: 7px 16px; min-height: 34px; } /* Hamburger acessível */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-ui) var(--ease-apple), opacity var(--dur-ui) var(--ease-apple); } .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Painel mobile (vidro) */ @media (max-width: 1023.98px) { .site-nav { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); padding: 8px clamp(20px, 4vw, 32px) 20px; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--dur-ui) var(--ease-apple), transform var(--dur-ui) var(--ease-apple), visibility var(--dur-ui); } @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) { .site-nav { background: rgba(255, 255, 255, .98); } } .nav-open .site-nav { opacity: 1; transform: translateY(0); visibility: visible; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav__link { display: block; font-size: 17px; padding: 13px 0; border-bottom: 1px solid var(--hairline); } .site-nav__list li:last-child .site-nav__link { border-bottom: 0; } .site-nav__actions { display: flex; gap: 12px; padding-top: 16px; flex-wrap: wrap; } } @media (min-width: 1024px) { .site-nav { display: block; margin-inline: auto; } .header-login { display: inline-block; } .nav-toggle { display: none; } } /* -------------------------------------------------------------------------- 6. BOTÕES — pills (§5-B.5) -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2; padding: 12px 26px; min-height: 48px; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-ui) var(--ease-apple), border-color var(--dur-ui) var(--ease-apple), color var(--dur-ui) var(--ease-apple); } .btn:hover { text-decoration: none; } .btn--lg { font-size: 17px; padding: 16px 34px; min-height: 56px; } /* Primário: vermelho, hover escurece ~6% */ .btn--primary { background: var(--red); color: var(--white); } .btn--primary:hover { background: var(--red-hover); } .btn--primary:active { background: var(--red-pressed); } /* Sobre escuro: pill branco texto preto (§5-B.5) */ .btn--white { background: var(--white); color: var(--ink); } .btn--white:hover { background: #EDEDF0; } /* …e nos momentos full-red mantém a alma Ivity: branco com texto vermelho */ .cta-band .btn--white, .manifesto .btn--white, .hero-red .btn--white, .error-hero .btn--white, .on-red .btn--white { color: var(--red); } /* Secundário claro: hairline */ .btn--outline { background: transparent; border-color: var(--hairline); color: var(--ink); } .btn--outline:hover { background: var(--gray-bg); border-color: #B9B9BF; } /* Secundário sobre escuro/vermelho */ .btn--outline-white { background: transparent; border-color: rgba(255, 255, 255, .44); color: var(--white); } .btn--outline-white:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); } /* Link Apple: texto vermelho + chevron ›, sem caixa (§5-B.5) */ .link-apple { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: var(--red-small-on-white); min-height: 44px; } .link-apple::after { content: "›"; font-family: var(--font-display); font-weight: 800; font-size: 1.2em; line-height: 1; transition: transform var(--dur-ui) var(--ease-apple); } .link-apple:hover { text-decoration: underline; text-underline-offset: 4px; } .link-apple:hover::after { transform: translateX(3px); } .section--ink .link-apple, .calc-card .link-apple, .result-card .link-apple { color: var(--red-on-dark); } /* -------------------------------------------------------------------------- 7. SECÇÕES + CABEÇAS DE SECÇÃO -------------------------------------------------------------------------- */ .section { padding: var(--section-y) 0; } .section--paper { background: var(--gray-bg); } .section--ink { background: var(--ink); color: var(--white); } .section--ink .muted, .section--ink .lead { color: var(--muted-dark); } .section--ink .eyebrow { color: var(--red-on-dark); } .section--ink + .section--ink { border-top: 1px solid var(--hairline-dark); } /* Momentos de história full-viewport (1 ideia por ecrã, §5-B.4) */ .section--story { min-height: 80vh; display: flex; align-items: center; } .section--story > .container { width: 100%; } .section-head { max-width: 880px; margin-bottom: clamp(40px, 6vw, 72px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lead { margin-inline: auto; } .section-head .lead { margin-top: 20px; } /* -------------------------------------------------------------------------- 8. BIP BIP GRID — grelha Ivity sobre vermelho (mantém-se nos full-red) Linhas brancas finas 1px + células cruzadas em X (opacity ~.25). Anima subtilmente (drift lento) — desligado com reduced-motion. -------------------------------------------------------------------------- */ .bipbip-grid { position: relative; overflow: hidden; } .bipbip-grid::before { content: ""; position: absolute; inset: -120px; pointer-events: none; opacity: .25; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480' width='480' height='480'%3E%3Cg stroke='%23FFFFFF' stroke-width='1.5' fill='none'%3E%3Cpath d='M126 6l108 108M234 6L126 114'/%3E%3Cpath d='M366 246l108 108M474 246L366 354'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(var(--line-on-red) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-red) 1px, transparent 1px); background-size: 480px 480px, 120px 120px, 120px 120px; animation: bipbip-grid-drift 48s linear infinite; } .bipbip-grid > * { position: relative; z-index: 1; } @keyframes bipbip-grid-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(120px, 120px, 0); } } /* -------------------------------------------------------------------------- 9. HEROES -------------------------------------------------------------------------- */ /* Hero branco (gramática v4: tipografia gigante centrada, hairline no fim) */ .hero-light { background: var(--white); text-align: center; padding: calc(var(--header-h) + clamp(72px, 11vw, 152px)) 0 clamp(64px, 9vw, 120px); } .hero-light .display-xl, .hero-light .display-lg { max-width: 1080px; margin-inline: auto; } .hero-light .lead { margin: clamp(20px, 3vw, 32px) auto 0; color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: clamp(28px, 4vw, 44px); } .hero-light .hero-actions, .hero-red .hero-actions, .error-hero .hero-actions { justify-content: center; } /* Badges: pills hairline discretas */ .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 44px); } .hero-light .badges { justify-content: center; } .badge { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 7px 16px; font-size: 14px; font-weight: 500; color: var(--muted); } /* Hero vermelho (momento full-red — sobre.html, 404) */ .hero-red { background: var(--red); color: var(--white); text-align: center; padding: calc(var(--header-h) + clamp(72px, 11vw, 152px)) 0 clamp(72px, 10vw, 136px); } .hero-red .eyebrow { color: var(--white); opacity: .9; } .hero-red .lead { margin: clamp(20px, 3vw, 32px) auto 0; color: rgba(255, 255, 255, .92); font-weight: 500; } .hero-red .display-xl, .hero-red .display-lg { max-width: 1080px; margin-inline: auto; } .hero-red .badges { justify-content: center; } .hero-red .badge { border-color: rgba(255, 255, 255, .44); color: var(--white); } /* Stagger da headline (§10-A.1) — palavra a palavra, 40ms */ [data-stagger] .w { display: inline-block; opacity: 0; transform: translateY(.35em); } .stagger-ready .w { animation: word-in var(--dur-story) var(--ease-apple) forwards; animation-delay: calc(var(--i) * 40ms); } @keyframes word-in { to { opacity: 1; transform: translateY(0); } } .no-js [data-stagger] .w { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 10. SCROLL-STORY — reveals (fade + translateY, 600ms, §5-B.4) -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-story) var(--ease-apple), transform var(--dur-story) var(--ease-apple); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; } .no-js .reveal { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 11. BETWEEN POINTS ›————› (§10-A.2) currentColor; vermelho por defeito, --white sobre escuro/vermelho. .bp-animated + .is-drawn (main.js): a linha desenha-se (stroke-dashoffset). -------------------------------------------------------------------------- */ .between-points { display: block; width: 100%; max-width: 420px; color: var(--red); } .between-points svg { width: 100%; height: 24px; } .between-points--white { color: var(--white); } .between-points--center { margin-inline: auto; } .between-points--wide { max-width: 720px; } .bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; } .bp-animated .bp-chev { opacity: 0; transition: opacity 400ms var(--ease-apple); } .bp-animated .bp-chev--end { transition-delay: 900ms; } .bp-animated.is-drawn .bp-draw { transition: stroke-dashoffset 1200ms var(--ease-apple) 150ms; stroke-dashoffset: 0; } .bp-animated.is-drawn .bp-chev { opacity: 1; } .no-js .bp-draw { stroke-dashoffset: 0; } .no-js .bp-animated .bp-chev { opacity: 1; } /* Conector vertical entre passos empilhados (mobile) */ .bp-vertical { width: 2px; height: 36px; margin: 20px auto 0; background: var(--hairline); } /* -------------------------------------------------------------------------- 12. STATS GIGANTES (§5-B.4) — clamp(80px, 10vw, 160px), contam ao entrar -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px) var(--gap); text-align: center; } @media (min-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8.5vw, 140px); line-height: .95; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; } .section--ink .stat__value { color: var(--white); } .stat__label { display: block; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--muted); max-width: 24ch; margin-inline: auto; } .section--ink .stat__label { color: var(--muted-dark); } /* -------------------------------------------------------------------------- 13. GRELHAS + CARDS (§5-B.6) -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--gap); } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: clamp(24px, 4vw, 56px); } } .card { background: var(--white); border: 1px solid rgba(0, 0, 0, .04); border-radius: var(--r-tile); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-soft); transition: transform var(--dur-ui) var(--ease-apple), box-shadow var(--dur-ui) var(--ease-apple); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .card h3 { margin-bottom: 10px; } .card p { color: var(--muted); font-size: 16px; } /* Card de audiência: bento largo (§5-B home 5) */ .card--audience { border-radius: var(--r-card); padding: clamp(32px, 4.5vw, 56px); display: flex; flex-direction: column; align-items: flex-start; min-height: 300px; } .card--audience p { font-size: 17px; max-width: 44ch; } .card--audience:hover { transform: scale(1.01); } .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 28px; font-size: 17px; font-weight: 600; color: var(--red-small-on-white); min-height: 44px; } .card-link .i { width: 18px; height: 18px; transition: transform var(--dur-ui) var(--ease-apple); } .card-link:hover { text-decoration: underline; text-underline-offset: 4px; } .card-link:hover .i { transform: translateX(3px); } /* Card benefício com marcador "+" (listas + do brand book) */ .card--plus h3::before { content: "+ "; color: var(--red); font-family: var(--font-display); font-weight: 800; } /* Cards de contacto */ .card--contact { display: block; } .card--contact:hover { text-decoration: none; } .contact-value { display: block; font-size: 19px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; } .contact-note { font-size: 14px; color: var(--muted); } /* Equipa (sobre.html) */ .team-card { text-align: center; } .avatar { width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: .02em; } /* -------------------------------------------------------------------------- 14. BENTO GRID (§5-B.2) — "Porquê a BIPBIP" Sobre #F5F5F7: tiles 24px mistas (2 grandes + 4 pequenas), UMA quase-preta e UMA vermelha com grelha Ivity. -------------------------------------------------------------------------- */ .bento { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); } } .bento__tile { background: var(--white); border: 1px solid rgba(0, 0, 0, .04); border-radius: var(--r-tile); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-height: 220px; transition: transform var(--dur-ui) var(--ease-apple), box-shadow var(--dur-ui) var(--ease-apple); } .bento__tile:hover { transform: scale(1.01); box-shadow: var(--shadow-lift); } @media (min-width: 768px) { .bento__tile--wide { grid-column: span 2; } } .bento__tile h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 10px; } .bento__tile p { color: var(--muted); font-size: 16px; max-width: 46ch; } .bento__label, .bento__tile .bento__label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 14px; } .bento__num, .bento__tile .bento__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6vw, 96px); line-height: .95; letter-spacing: -0.02em; color: inherit; margin-top: auto; padding-top: 20px; max-width: none; } .bento__num small { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0; margin-top: 8px; color: var(--muted); } /* Tile quase-preta */ .bento__tile--dark { background: var(--ink); border-color: transparent; color: var(--white); } .bento__tile--dark p { color: var(--muted-dark); } .bento__tile--dark .bento__label { color: var(--red-on-dark); } .bento__tile--dark .bento__num small { color: var(--muted-dark); } /* Tile vermelha com grelha Ivity */ .bento__tile--red { background: var(--red); border-color: transparent; color: var(--white); } .bento__tile--red p { color: rgba(255, 255, 255, .92); } .bento__tile--red .bento__label { color: var(--white); opacity: .85; } .bento__tile--red .bento__num small { color: rgba(255, 255, 255, .85); } .bento__tile--red .i-lead, .bento__tile--dark .i-lead { color: var(--white); } /* -------------------------------------------------------------------------- 15. PASSOS (como funciona / tutoriais) -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 48px) var(--gap); } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps .bp-vertical { display: none; } } .step { text-align: left; } .step__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--red); margin-bottom: 14px; } .step h3 { margin-bottom: 10px; } .step p { color: var(--muted); font-size: 17px; max-width: 40ch; } /* Trilhas de tutoriais: passos empilhados, número à esquerda */ .steps--tutorial { grid-template-columns: 1fr; max-width: 800px; gap: clamp(28px, 4vw, 40px); } @media (min-width: 768px) { .steps--tutorial { grid-template-columns: 1fr; } .steps--tutorial .bp-vertical { display: block; } } .steps--tutorial .step { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: start; } .steps--tutorial .step__num { min-width: 64px; margin-bottom: 0; } .steps--tutorial .step h3, .steps--tutorial .step p, .steps--tutorial .step .step__head { grid-column: 2; } .steps--tutorial .bp-vertical { grid-column: 1; margin: 12px auto 0; } /* -------------------------------------------------------------------------- 16. LISTA "+" (BIPBIP significa / brand book) -------------------------------------------------------------------------- */ .plus-list li { position: relative; padding-left: 1.2em; margin-bottom: .5em; } .plus-list li::before { content: "+"; position: absolute; left: 0; color: var(--red); font-family: var(--font-display); font-weight: 800; } .plus-list--display li { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: .35em; padding-left: 1.05em; } .plus-list--on-red li, .plus-list--on-red li::before { color: var(--white); } /* -------------------------------------------------------------------------- 17. MOMENTOS FULL-RED (máx. 2 por página, §5-B) Manifesto + banda CTA — grelha Ivity animada, texto branco. -------------------------------------------------------------------------- */ .manifesto { background: var(--red); color: var(--white); padding: var(--section-y) 0; } .manifesto .eyebrow { color: var(--white); opacity: .9; } .manifesto .lead { color: rgba(255, 255, 255, .92); } .on-red { color: var(--white); } .cta-band { background: var(--red); color: var(--white); text-align: center; padding: var(--section-y) 0; } .cta-band .fill-better { display: block; color: var(--white); font-size: clamp(40px, 6vw, 80px); line-height: 1.02; margin-bottom: 10px; } .cta-band h2 { color: var(--white); margin-bottom: clamp(28px, 4vw, 40px); } .cta-band .display-lg { font-size: clamp(32px, 4.5vw, 56px); } /* -------------------------------------------------------------------------- 18. CALCULADORA COMO PRODUTO (§5-B.3 + §10-A.5) Secção quase-preta; card flutuante radius 28px, sombra profunda. -------------------------------------------------------------------------- */ .calc-card { background: var(--ink-2); border: 1px solid var(--hairline-dark); border-radius: var(--r-card); box-shadow: var(--shadow-deep); padding: clamp(24px, 4vw, 56px); } /* Formulários — claros por defeito; escuros dentro de contexto escuro */ .field { margin-bottom: 22px; } .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 17px; color: var(--ink); background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-input); padding: 13px 16px; min-height: 52px; transition: border-color var(--dur-ui) var(--ease-apple), box-shadow var(--dur-ui) var(--ease-apple); appearance: none; -webkit-appearance: none; } .field textarea { min-height: 140px; resize: vertical; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(228, 0, 45, .18); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); } .field__error, .form-error { font-size: 14px; font-weight: 500; color: var(--red-small-on-white); margin-top: 8px; } .field__error:empty { display: none; } .hint { font-size: 14px; color: var(--muted); margin-top: 8px; } /* Chips de rota (pills) */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .chip { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 8px 14px; min-height: 36px; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-apple), border-color var(--dur-ui) var(--ease-apple), color var(--dur-ui) var(--ease-apple); } .chip:hover { border-color: #B9B9BF; background: var(--gray-bg); } .chip.is-active, .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); } /* Switch (retorno em vazio) — estilo iOS */ .switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; font-weight: 500; cursor: pointer; } .switch input { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; flex-shrink: 0; border-radius: var(--r-pill); background: var(--hairline); position: relative; cursor: pointer; margin: 0; transition: background-color var(--dur-ui) var(--ease-apple); } .switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: transform var(--dur-ui) var(--ease-apple); } .switch input:checked { background: var(--red); } .switch input:checked::before { transform: translateX(20px); } /* Formulário DENTRO de contexto escuro (calc-card / secção ink) */ .calc-card .field label, .section--ink .field label { color: var(--white); } .calc-card .field input, .calc-card .field select, .section--ink .field input, .section--ink .field select { color: var(--white); background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); } .calc-card .field select, .section--ink .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .calc-card .field select option, .section--ink .field select option { color: var(--ink); background: var(--white); } .calc-card .field input:focus, .calc-card .field select:focus, .section--ink .field input:focus, .section--ink .field select:focus { border-color: var(--red-on-dark); box-shadow: 0 0 0 3px rgba(255, 51, 85, .22); } .calc-card .hint, .section--ink .hint { color: var(--muted-dark); } .calc-card .field__error, .section--ink .field__error, .result-card .form-error { color: var(--red-on-dark); } .calc-card .chip, .section--ink .chip { color: var(--white); border-color: rgba(255, 255, 255, .22); } .calc-card .chip:hover, .section--ink .chip:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); } .calc-card .chip.is-active, .calc-card .chip[aria-pressed="true"], .section--ink .chip.is-active, .section--ink .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); } .calc-card .switch, .section--ink .switch { color: var(--white); } .calc-card .switch input, .section--ink .switch input { background: rgba(255, 255, 255, .22); } .calc-card .switch input:checked, .section--ink .switch input:checked { background: var(--red); } /* Card de RESULTADOS (escuro, estilo plataforma) */ .result-card { background: var(--ink); color: var(--white); border: 1px solid var(--hairline-dark); border-radius: var(--r-card); box-shadow: var(--shadow-deep); padding: clamp(24px, 3.5vw, 44px); } /* Dentro do calc-card flutuante: superfície elevada, sem sombra dupla */ .calc-card .result-card { background: var(--ink-3); box-shadow: none; border-radius: 20px; } .result-card__route { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 15px; font-weight: 500; color: var(--muted-dark); margin-bottom: clamp(20px, 3vw, 28px); } .result-card__route .between-points { flex-shrink: 0; } .result-label { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--red-on-dark); } .result-number { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: .95; letter-spacing: -0.02em; color: var(--white); margin: 8px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .result-number small { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--muted-dark); letter-spacing: 0; } .result-subgrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: clamp(20px, 3vw, 28px); } @media (min-width: 480px) { .result-subgrid { grid-template-columns: 1fr 1fr; } } .result-mini { background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline-dark); border-radius: 16px; padding: 16px 18px; } .result-mini__value { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; margin-top: 6px; } .result-mini__hint { font-size: 12.5px; color: var(--muted-dark); margin-top: 6px; } .intensity { margin-top: clamp(20px, 3vw, 28px); } .intensity__title { color: var(--muted-dark); text-transform: none; letter-spacing: 0.02em; font-size: 14px; } .intensity__title span { color: var(--white); } /* Barra comparativa — visualização elegante, hairlines, sem gradientes. Serve o markup estático (.intensity__row) e o gerado (.calc-compare). */ .intensity__row, .calc-compare__item { display: grid; grid-template-columns: minmax(88px, 110px) 1fr 48px; align-items: center; gap: 12px; font-size: 13px; color: var(--muted-dark); margin-top: 10px; } .calc-compare { margin-top: 8px; } .intensity__track, .calc-compare__track { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; } .intensity__bar, .calc-compare__bar { display: block; height: 100%; border-radius: 2px; background: var(--muted-dark); width: var(--w, 100%); } .intensity__value, .calc-compare__value { text-align: right; } .intensity__row.is-active, .calc-compare__item.is-active { color: var(--white); font-weight: 600; } .intensity__row.is-active .intensity__bar, .calc-compare__item.is-active .calc-compare__bar { background: var(--red); } .result-insight { font-size: 15px; font-weight: 500; color: var(--white); border-left: 2px solid var(--red); padding-left: 14px; margin-top: clamp(20px, 3vw, 28px); } .result-insight:empty { display: none; } .result-disclaimer { font-size: 13px; line-height: 1.55; color: var(--muted-dark); border-top: 1px solid var(--hairline-dark); padding-top: 16px; margin-top: clamp(20px, 3vw, 28px); } .result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .result-actions .btn { flex: 1 1 auto; } /* Estado vazio */ .result-card.is-empty .result-number, .result-card.is-empty .result-mini__value { opacity: .35; } /* Mini-secção calculadora transversal (expedidores/transportadores) */ .calc-mini { background: var(--gray-bg); border-radius: var(--r-card); padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .calc-mini h2 { margin-bottom: 8px; } .calc-mini p { color: var(--muted); max-width: 52ch; } /* -------------------------------------------------------------------------- 19. FAQ — hairlines Apple (details/summary) -------------------------------------------------------------------------- */ .faq { max-width: 800px; border-top: 1px solid var(--hairline); } .faq details { border-bottom: 1px solid var(--hairline); } .faq summary { list-style: none; cursor: pointer; position: relative; font-size: 18px; font-weight: 600; padding: 22px 44px 22px 0; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-ui) var(--ease-apple); } .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); } .faq__answer { padding: 0 0 24px; } .faq__answer p { color: var(--muted); font-size: 17px; max-width: 68ch; } .faq__answer p + p { margin-top: 12px; } /* -------------------------------------------------------------------------- 20. TABS — controlo segmentado (pill) -------------------------------------------------------------------------- */ .tabs__list { display: inline-flex; gap: 4px; background: var(--gray-bg); border: 1px solid rgba(0, 0, 0, .04); border-radius: var(--r-pill); padding: 4px; } .tab { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-pill); padding: 10px 24px; min-height: 44px; cursor: pointer; transition: background-color var(--dur-ui) var(--ease-apple), color var(--dur-ui) var(--ease-apple), box-shadow var(--dur-ui) var(--ease-apple); } .tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, .10); } .tabpanel { padding-top: clamp(40px, 6vw, 64px); } .tabpanel:focus { outline: none; } /* -------------------------------------------------------------------------- 21. FORMULÁRIO DE CONTACTO -------------------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--gap); } @media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } } .contact-form { max-width: 760px; } .apps-actions { display: flex; flex-wrap: wrap; gap: 16px; } /* -------------------------------------------------------------------------- 22. FOOTER CLARO APPLE (§5-B.7) #F5F5F7, texto 12-13px #6E6E73, hairlines, logo tagline VERMELHO, FILL BETTER. discreto no fecho. -------------------------------------------------------------------------- */ .site-footer { background: var(--gray-bg); border-top: 1px solid var(--hairline); padding: clamp(40px, 6vw, 64px) 0 32px; font-size: 13px; color: var(--muted); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px var(--gap); padding-bottom: 36px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .footer-brand img { height: 44px; width: auto; /* v4: o footer claro usa o logo VERMELHO com tagline. Páginas que ainda tragam logo-tagline-white.png (v3) são corrigidas aqui (shim). */ content: url("../img/logo-tagline-red.png"); } .footer-brand p { margin-top: 18px; max-width: 34ch; line-height: 1.6; } .footer-col h2 { font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 14px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col ul li { margin-bottom: 10px; } .footer-col a { color: var(--muted); font-weight: 400; } .footer-col a:hover { color: var(--ink); } .footer-contacts { font-style: normal; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; } .footer-contacts a { color: var(--muted); font-weight: 400; } .footer-contacts a:hover { color: var(--ink); } .footer-bottom { border-top: 1px solid var(--hairline); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; } .footer-bottom .fill-better { font-size: 18px; color: var(--red); } /* -------------------------------------------------------------------------- 23. BARRA CTA MOBILE (§10-A.3) — vidro, aparece após ~60% de scroll -------------------------------------------------------------------------- */ .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 10px clamp(16px, 4vw, 24px) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--hairline); transform: translateY(105%); transition: transform 300ms var(--ease-apple); } @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) { .cta-bar { background: rgba(255, 255, 255, .98); } } .cta-bar.is-visible { transform: translateY(0); } .cta-bar[hidden] { display: none; } .cta-bar .btn { flex: 1; } .cta-bar__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; } .cta-bar__close:hover { color: var(--ink); background: rgba(0, 0, 0, .05); } @media (min-width: 1024px) { .cta-bar { display: none; } /* em desktop o CTA do header basta */ } /* -------------------------------------------------------------------------- 24. 404 (error-hero) — momento full-red com humor de marca -------------------------------------------------------------------------- */ .error-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--red); color: var(--white); text-align: center; padding: calc(var(--header-h) + 48px) 0 64px; } .error-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 22vw, 260px); line-height: .9; letter-spacing: -0.02em; } .error-hero .between-points { margin: 24px auto; max-width: 280px; } .error-hero h1 { margin-bottom: 16px; } .error-body { max-width: 56ch; margin: 0 auto 8px; color: rgba(255, 255, 255, .92); } /* -------------------------------------------------------------------------- 25. REDUCED MOTION — desliga TUDO (inegociável) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .bipbip-grid::before { animation: none; } .reveal { opacity: 1; transform: none; } .bp-draw { stroke-dashoffset: 0; } .bp-animated .bp-chev { opacity: 1; } [data-stagger] .w { opacity: 1; transform: none; animation: none; } .cta-bar { transition: none; } } /* -------------------------------------------------------------------------- 26. PRINT -------------------------------------------------------------------------- */ @media print { .site-header, .cta-bar, .skip-link { display: none; } .hero-light, .hero-red { padding-top: 24px; } body { color: #000; } }