/* ───────────────────────────────────────────── FUTURS POLICIES · Brand Layer v1.4 Micro-interaccions, reveals, paleta ⌘K, frases manuscrites en or (Caveat) com la landing ───────────────────────────────────────────── */ ::selection { background: rgba(56,189,248,.30); color: #fff; } /* ── Accessibilitat: reduir moviment ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .llum-fons, #cursor { display: none !important; } } /* ── Animacions desactivades per preferència de l'usuari (perfil) ── La classe la posa layout_top.php a i el toggle del perfil en viu. */ html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.no-anim .llum-fons, html.no-anim #cursor { display: none !important; } /* ── Ripple ── */ .fp-rippled { position: relative; overflow: hidden; } .fp-ripple { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(56,189,248,.20) 55%, transparent 70%); transform: scale(0); animation: fpRipple .55s var(--ease-out, cubic-bezier(.2,.8,.2,1)) forwards; pointer-events: none; } @keyframes fpRipple { to { transform: scale(2.6); opacity: 0; } } /* ── Scroll reveal ── */ .fp-rv { opacity: 0; transform: translateY(14px); } .fp-rv.fp-rv-in { opacity: 1; transform: translateY(0); transition: opacity .5s var(--ease-out, cubic-bezier(.2,.8,.2,1)), transform .5s var(--ease-out, cubic-bezier(.2,.8,.2,1)); } /* ── Botons: barra de llum en hover ── */ .boto::after, .tk-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 62%); transform: translateX(-130%); pointer-events: none; } .boto:hover::after, .tk-btn:hover::after { animation: fpSweep .65s ease forwards; } @keyframes fpSweep { to { transform: translateX(130%); } } .boto, .tk-btn { position: relative; overflow: hidden; } /* Gradient viu als botons primaris: la marca respira */ .boto:not(.sec):not(.ghost):not(.danger), .tk-btn-primary, .plan-cta, .modal-cta { background-size: 160% auto !important; animation: fpBtnGrad 5s ease-in-out infinite; } @keyframes fpBtnGrad { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* ── Icones SVG de marca ── */ .fp-i { display: inline-block; vertical-align: -2px; flex-shrink: 0; } .pc-link-i .fp-i, .tn-dlink-ico .fp-i, .mega-ico .fp-i { vertical-align: middle; } /* ── kbd ── */ kbd, .fp-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; padding: .12em .42em; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); border-bottom-width: 2px; background: rgba(255,255,255,.07); font-family: inherit; font-size: .72em; font-weight: 900; color: rgba(255,255,255,.70); line-height: 1.3; } /* ── Paleta de comandes (Ctrl/⌘+K) ── */ .fp-pal-bg { position: fixed; inset: 0; z-index: 30000; background: rgba(2,4,9,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .18s ease; } .fp-pal-bg.show { opacity: 1; pointer-events: auto; } .fp-pal { position: fixed; top: min(16vh, 130px); left: 50%; z-index: 30001; width: min(560px, 92vw); transform: translateX(-50%) translateY(-8px) scale(.98); background: rgba(8,15,30,.97); border: 1px solid rgba(56,189,248,.22); border-radius: 18px; box-shadow: 0 40px 120px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(56,189,248,.07); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s var(--ease-out, cubic-bezier(.2,.8,.2,1)); overflow: hidden; } .fp-pal.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .fp-pal-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); } .fp-pal-glass { font-size: .9rem; opacity: .45; flex-shrink: 0; } .fp-pal-input { flex: 1; background: none !important; border: none !important; box-shadow: none !important; outline: none; padding: 0 !important; color: #fff; font-family: inherit; font-size: .95rem; font-weight: 700; } .fp-pal-input::placeholder { color: rgba(255,255,255,.28); font-weight: 600; } .fp-pal-esc { flex-shrink: 0; } .fp-pal-list { max-height: min(46vh, 380px); overflow-y: auto; padding: .45rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.10) transparent; } .fp-pal-sec { padding: .55rem .75rem .25rem; font-size: .58rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.25); } .fp-pal-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .75rem; border-radius: 11px; border: 1px solid transparent; background: none; color: rgba(255,255,255,.62); font-family: inherit; font-size: .87rem; font-weight: 800; text-align: left; text-decoration: none; cursor: pointer; transition: background .1s, color .1s, border-color .1s; } .fp-pal-item .fp-pal-ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; background: rgba(255,255,255,.055); } .fp-pal-item.on, .fp-pal-item:hover { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.20); color: #fff; } .fp-pal-item.on .fp-pal-ico { background: rgba(56,189,248,.16); } .fp-pal-item-hint { margin-left: auto; flex-shrink: 0; font-size: .62rem; font-weight: 800; color: rgba(255,255,255,.22); } .fp-pal-empty { padding: 1.6rem 1rem; text-align: center; font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.30); } .fp-pal-foot { display: flex; align-items: center; gap: 1rem; padding: .55rem .9rem; border-top: 1px solid rgba(255,255,255,.05); font-size: .64rem; font-weight: 800; color: rgba(255,255,255,.25); } .fp-pal-foot span { display: inline-flex; align-items: center; gap: .3rem; } @media (max-width: 520px) { .fp-pal { top: 8vh; } .fp-pal-foot { display: none; } } /* ── Barra de progrés de scroll (opt-in amb body.fp-scrollbar) ── */ .fp-scroll-progress { position: fixed; top: 0; left: 0; z-index: 29000; height: 2px; width: 0; background: linear-gradient(90deg, var(--cyan, #38bdf8), var(--indigo, #818cf8)); box-shadow: 0 0 8px rgba(56,189,248,.55); pointer-events: none; transition: width .08s linear; } /* ── Llenguatge de marca: capçaleres de pàgina ── L'estètica de futurspolicies.com portada a dins de l'app. Frases manuscrites en OR (Caveat + #f5d18a), com a la landing. Ús: .fp-eyebrow + .fp-page-title + .fp-page-sub */ :root { --gold: #f5d18a; --gold-dim: rgba(245,209,138,.85); } .fp-hand { font-family: 'Caveat', cursive; font-weight: 700; } .fp-eyebrow { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.6rem); letter-spacing: 0; text-transform: none; color: var(--gold, #f5d18a); margin-bottom: .3rem; display: block; line-height: 1.15; transform: rotate(-1.5deg); transform-origin: left bottom; } .fp-eyebrow::before { content: none; } /* Text amb degradat animat blanc→cian, com el "quan no vas sol" de la web */ @keyframes fpShimmer { 0% { background-position: 0% center; } 100% { background-position: 260% center; } } .fp-shimmer { background: linear-gradient(100deg, #fff 0%, #a8f0ff 28%, #4cc9f0 52%, #00b4d8 76%, #fff 100%); background-size: 260% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fpShimmer 5s linear infinite; display: inline-block; } /* Subratllat de retolador ambre que entra en scroll (brand.js li posa .on) */ .fp-hl { background-image: linear-gradient(180deg, transparent 74%, rgba(251,191,36,.85) 74%, rgba(251,191,36,.85) 90%, transparent 90%); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 100%; transition: background-size .7s cubic-bezier(.22,1,.36,1) .15s; padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .fp-hl.on { background-size: 100% 100%; } .fp-page-title { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 950; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 .35rem; background: linear-gradient(100deg, #fff 0%, #c8eeff 55%, var(--cyan, #38bdf8) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .fp-page-sub { font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.42); margin: 0; line-height: 1.6; } .fp-page-head { margin-bottom: 1.5rem; } /* Targeta glass amb línia de llum inferior en hover (com la landing) */ .fp-glass { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); transition: border-color .18s, transform .18s, box-shadow .18s; } .fp-glass::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.45), transparent); transform: scaleX(0); transition: transform .25s ease; transform-origin: left; } .fp-glass:hover { border-color: rgba(56,189,248,.26); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.30); } .fp-glass:hover::after { transform: scaleX(1); } /* Punt de pols de marca (el brand-dot de la landing) */ .fp-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan, #38bdf8); box-shadow: 0 0 10px rgba(56,189,248,.8); animation: fpPdot 2.5s ease-in-out infinite; flex-shrink: 0; display: inline-block; } @keyframes fpPdot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.65); } } /* Enllaç de tornada estàndard */ .fp-back { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.45); text-decoration: none; font-size: .76rem; font-weight: 800; margin-bottom: 1.1rem; transition: color .14s; } .fp-back:hover { color: #7dd3fc; } /* ── Anunci de novetats (un cop per versió) ── */ .fp-news-bg { position: fixed; inset: 0; z-index: 40000; background: rgba(2,4,9,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; padding: 1rem; } .fp-news-bg.show { opacity: 1; pointer-events: auto; } .fp-news { width: min(480px, 100%); background: linear-gradient(165deg, rgba(12,22,40,.99), rgba(5,10,20,.99)); border: 1px solid rgba(56,189,248,.28); border-radius: 24px 24px 20px 20px; padding: 1.6rem 1.5rem calc(1.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -20px 80px rgba(0,0,0,.6), 0 0 60px rgba(56,189,248,.10); transform: translateY(40px); transition: transform .35s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; } .fp-news::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent); } .fp-news-bg.show .fp-news { transform: translateY(0); } .fp-news-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .26rem .7rem; border-radius: 999px; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.30); font-size: .60rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: #7dd3fc; margin-bottom: .8rem; } .fp-news-title { font-size: 1.25rem; font-weight: 950; letter-spacing: -.03em; color: #fff; margin: 0 0 1rem; line-height: 1.2; } .fp-news-list { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.2rem; } .fp-news-item { display: flex; gap: .7rem; align-items: flex-start; } .fp-news-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.20); font-size: .95rem; } .fp-news-item-t { font-size: .85rem; font-weight: 900; color: #f1f5f9; } .fp-news-item-d { font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.42); line-height: 1.5; margin-top: .1rem; } .fp-news-ok { width: 100%; padding: .85rem 1rem; border-radius: 13px; border: none; background: linear-gradient(90deg, #0ea5e9, #38bdf8); color: #020509; font-family: inherit; font-size: .92rem; font-weight: 950; cursor: pointer; box-shadow: 0 5px 22px rgba(56,189,248,.30); transition: transform .15s, filter .15s; } .fp-news-ok:hover { transform: translateY(-2px); filter: brightness(1.08); } @media (min-width: 640px) { .fp-news-bg { align-items: center; } .fp-news { border-radius: 24px; } } /* ── Botó tornar a dalt ── */ .fp-top-btn { position: fixed; right: 1.1rem; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 28000; width: 42px; height: 42px; border-radius: 13px; border: 1px solid rgba(56,189,248,.28); background: rgba(4,9,18,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #7dd3fc; font-size: 1rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, border-color .15s, box-shadow .15s; box-shadow: 0 8px 28px rgba(0,0,0,.40); } .fp-top-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .fp-top-btn:hover { border-color: rgba(56,189,248,.55); box-shadow: 0 8px 28px rgba(0,0,0,.40), 0 0 18px rgba(56,189,248,.20); } @media (max-width: 860px) { /* Als exàmens la barra mòbil ocupa el peu: puja el botó */ .tk-page ~ .fp-top-btn, body:has(.tk-mob) .fp-top-btn { bottom: calc(92px + env(safe-area-inset-bottom)); } } /* ── Focus ring coherent per a targetes clicables ── */ a.card:focus-visible, button.card:focus-visible { outline: 2px solid var(--cyan, #38bdf8); outline-offset: 3px; }