/* ProfileEvidence — landing. Disseny "registre d'evidència notarial". Paleta: tinta / paper / blau / or / gris. Serif Spectral + sans Inter + mono IBM Plex Mono. */ :root { --ink: #0F1B2D; --paper: #F7F5F0; --blue: #2E5090; --blue-hover: #24406f; --gold: #C9A961; --gray: #4A5568; --paper-card: #FCFBF8; --hairline: rgba(15, 27, 45, 0.12); --hairline-soft: rgba(15, 27, 45, 0.07); --hairline-gold: rgba(201, 169, 97, 0.45); --ink-tint: rgba(15, 27, 45, 0.55); --on-ink: #E9E4D8; --on-ink-dim: #9AA6B8; --shadow: 0 18px 40px -24px rgba(15, 27, 45, 0.35); --shadow-lift: 0 26px 60px -28px rgba(15, 27, 45, 0.5); --serif: "Spectral", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1160px; --radius: 4px; --section-y: clamp(72px, 10vw, 128px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Idioma: mostra CA per defecte; commuta amb data-lang a . */ [data-l="es"] { display: none; } html[data-lang="es"] [data-l="ca"] { display: none; } html[data-lang="es"] [data-l="es"] { display: inline; } html[data-lang="es"] [data-l="es"].block { display: block; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.012em; margin: 0; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); } img, svg { max-width: 100%; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* Etiquetes mono estil registre legal */ .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); } .on-ink .eyebrow { color: var(--gold); } .on-ink .eyebrow::before { background: var(--hairline-gold); } /* Botons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 0.98rem; padding: 13px 24px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-hover); color: #fff; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .on-ink .btn-ghost { color: var(--on-ink); border-color: rgba(233, 228, 216, 0.25); } .on-ink .btn-ghost:hover { border-color: var(--gold); color: #fff; } /* Focus accessible per a teclat */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 240, 0.86); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--hairline-soft); } .header-row { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.01em; } .brand:hover { color: var(--ink); } .brand .seal-mini { width: 26px; height: 26px; flex: none; } .nav { display: flex; align-items: center; gap: 28px; } .nav-links { display: flex; gap: 26px; } .nav-links a { color: var(--gray); font-size: 0.94rem; font-weight: 500; } .nav-links a:hover { color: var(--ink); } .header-cta { display: flex; align-items: center; gap: 14px; } /* Selector d'idioma */ .lang { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; font-family: var(--mono); } .lang button { background: transparent; border: 0; padding: 7px 11px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gray); cursor: pointer; } .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } /* ---------- Hero ---------- */ .hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); text-align: center; position: relative; } .hero .eyebrow { justify-content: center; } .hero h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); max-width: 16ch; margin: 0 auto 22px; } .hero .lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--gray); max-width: 60ch; margin: 0 auto 30px; line-height: 1.65; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .hero-note { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-tint); } .hero-note .dot { color: var(--gold); } /* ---------- Element signatura: llibre de registre de segells ---------- */ .ledger { margin-top: clamp(44px, 6vw, 76px); } .ledger-cap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 26px; } .ledger-cap .line { height: 1px; width: 46px; background: var(--hairline); } .ledger-cap span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-tint); } .stamps { display: flex; gap: 18px; justify-content: center; align-items: flex-end; padding: 8px 4px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .stamps::-webkit-scrollbar { display: none; } .stamp { scroll-snap-align: center; flex: 0 0 208px; background: var(--paper-card); border: 1px solid var(--hairline); border-top: 2px solid var(--gold); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); text-align: left; /* Estat inicial per a revelació en scroll */ opacity: 0; transform: translateY(26px) rotate(var(--rot, 0deg)); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .stamp.in { opacity: 1; transform: translateY(var(--stagger, 0)) rotate(var(--rot, 0deg)); } .stamp:nth-child(odd) { --rot: -1.4deg; --stagger: 10px; } .stamp:nth-child(even) { --rot: 1.2deg; --stagger: -6px; } .stamp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .stamp-date { font-family: var(--mono); font-size: 0.74rem; color: var(--ink); letter-spacing: 0.02em; } .stamp-verify { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7434; } .stamp-verify .chk { width: 15px; height: 15px; color: var(--gold); } .mini { border: 1px solid var(--hairline-soft); border-radius: var(--radius); background: #fff; padding: 11px 12px; } .mini-name { font-family: var(--serif); font-size: 0.94rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .mini-meta { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--gray); } .mini-stars { color: var(--gold); letter-spacing: 1px; font-size: 0.8rem; } .mini-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-tint); } .mini-pin { width: 11px; height: 11px; color: var(--blue); flex: none; } .stamp-hash { margin-top: 11px; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-tint); letter-spacing: 0.02em; word-break: break-all; } /* ---------- Seccions genèriques ---------- */ section { padding: var(--section-y) 0; } .section-head { max-width: 60ch; } .section-head.center { margin: 0 auto; text-align: center; } .section-head h2 { font-size: clamp(1.8rem, 3.1vw, 2.65rem); margin-bottom: 18px; } .section-head p { color: var(--gray); font-size: 1.08rem; margin: 0; } .on-ink { background: var(--ink); color: var(--on-ink); } .on-ink h2 { color: #fff; } .on-ink .section-head p, .on-ink p { color: var(--on-ink-dim); } /* Problema */ .problem { position: relative; } .problem .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .facts { display: grid; gap: 2px; border: 1px solid rgba(233, 228, 216, 0.14); border-radius: var(--radius); overflow: hidden; } .fact { padding: 20px 22px; background: rgba(255, 255, 255, 0.02); } .fact .n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--gold); } .fact p { margin: 6px 0 0; color: var(--on-ink); font-size: 0.98rem; line-height: 1.6; } /* Com funciona */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; counter-reset: step; } .step { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 26px 30px; position: relative; } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: 0.78rem; color: var(--blue); letter-spacing: 0.08em; } .step .ico { width: 34px; height: 34px; color: var(--blue); margin: 18px 0 14px; } .step h3 { font-size: 1.28rem; margin-bottom: 10px; } .step p { margin: 0; color: var(--gray); font-size: 0.98rem; } /* Per a qui */ .audience { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; } .aud-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 32px; background: var(--paper-card); } .aud-card.primary { border-color: var(--hairline-gold); box-shadow: var(--shadow); } .aud-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); } .aud-card h3 { font-size: 1.5rem; margin: 12px 0 12px; } .aud-card p { margin: 0 0 18px; color: var(--gray); } .aud-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .aud-list li { display: flex; gap: 10px; font-size: 0.95rem; color: var(--ink); } .aud-list .chk { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 3px; } /* Preus */ .prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; align-items: stretch; } .price { background: var(--paper-card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px 28px 32px; display: flex; flex-direction: column; } .price.featured { border: 1.5px solid var(--blue); box-shadow: var(--shadow-lift); position: relative; } .price .plan { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); } .price.featured .plan { color: var(--blue); } .price .amount { font-family: var(--serif); font-size: 2.7rem; font-weight: 600; margin: 14px 0 2px; letter-spacing: -0.02em; } .price .amount span { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--gray); letter-spacing: 0; } .price .cap { color: var(--gray); font-size: 0.92rem; margin: 0 0 20px; min-height: 2.6em; } .price ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; } .price li { display: flex; gap: 10px; font-size: 0.93rem; } .price li .chk { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; } .price .btn { margin-top: auto; width: 100%; } .badge-free { position: absolute; top: -12px; right: 22px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7434; background: var(--paper); border: 1px solid var(--hairline-gold); padding: 4px 10px; border-radius: 100px; } .prices-note { text-align: center; margin-top: 26px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--ink-tint); } /* CTA final */ .final { text-align: center; } .final .seal-big { width: 66px; height: 66px; margin: 0 auto 24px; display: block; color: var(--gold); } .final h2 { font-size: clamp(2rem, 3.6vw, 3rem); color: #fff; max-width: 20ch; margin: 0 auto 18px; } .final p { max-width: 52ch; margin: 0 auto 30px; } .final .btn-primary { background: var(--gold); color: var(--ink); } .final .btn-primary:hover { background: #d8bd7f; color: var(--ink); } /* Footer */ .site-footer { background: var(--ink); color: var(--on-ink-dim); border-top: 1px solid rgba(233, 228, 216, 0.1); padding: 56px 0 40px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; } .footer-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.15rem; color: #fff; margin-bottom: 14px; } .footer-brand .seal-mini { width: 24px; height: 24px; } .disclaimer { font-size: 0.9rem; line-height: 1.6; max-width: 46ch; } .footer-links { display: flex; gap: 44px; } .footer-col h4 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-dim); margin: 0 0 14px; font-weight: 500; } .footer-col a, .footer-col span { display: block; color: var(--on-ink); font-size: 0.94rem; margin-bottom: 9px; } .footer-col a:hover { color: var(--gold); } .footer-mail { font-family: var(--mono); font-size: 0.88rem; } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(233, 228, 216, 0.1); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-tint); } .footer-bottom .sep { color: var(--on-ink-dim); } /* Revelació en scroll genèrica */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-links { display: none; } .problem .grid { grid-template-columns: 1fr; gap: 34px; } .steps { grid-template-columns: 1fr; } .audience { grid-template-columns: 1fr; } .prices { grid-template-columns: 1fr; } .price.featured { order: -1; } .footer-top { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 560px) { .header-cta .btn-primary { display: none; } .stamp { flex-basis: 78%; } .hero-cta .btn { flex: 1 1 auto; } } /* Menys moviment: mostra-ho tot estàtic */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .stamp { opacity: 1 !important; transform: none !important; transition: none !important; } .stamp:nth-child(odd), .stamp:nth-child(even) { --rot: 0deg; --stagger: 0; } }