/* TechFinLens brand layer (2026 logo). Loaded last on every page. Colour tokens: brand blue #0B6BB8 "TechFin", links, accents deep blue #0A4E9B primary buttons, active states cyan #22C3F8 highlights lens purple #5B2BC4 "Lens", secondary accent */ :root{ --tfl-blue:#0B6BB8; --tfl-blue-deep:#0A4E9B; --tfl-cyan:#22C3F8; --tfl-purple:#5B2BC4; --tfl-indigo:#2A0E66; --tfl-gradient:linear-gradient(135deg,#0B6BB8 0%,#5B2BC4 100%); } .tfl-logo-mark,.tfl-logo-mark-lg{background:transparent!important;box-shadow:none!important;border-radius:0!important;} .tfl-logo-mark img,.tfl-logo-mark-lg img{width:100%;height:100%;display:block;} .tfl-brand-name,.brand-name,.word{ font-family:'Poppins',var(--font,'DM Sans'),sans-serif!important; font-weight:600!important;letter-spacing:-.3px!important;color:#0B6BB8!important;} .tfl-brand-name em,.tfl-brand-name span,.brand-name span,.word em{ font-style:normal!important;font-weight:600!important;color:#5B2BC4!important;} .tfl-logo-full{display:block;width:210px;max-width:72%;height:auto;margin:0 auto;} /* ── Lens loader (AI is reading the invoice) ───────────────────────────── */ .tfl-lens-loader{width:64px;height:64px;display:block;flex-shrink:0;} .tfl-lens-loader.sm{width:18px;height:18px;} /* ── Login entrance: shutter opens, then a glint sweeps the logo ──────── */ .tfl-logo-reveal{position:relative;display:block;width:210px;max-width:72%;margin:0 auto;overflow:hidden;} .tfl-logo-reveal .tfl-logo-full{width:100%;max-width:none; animation:tflIris .9s cubic-bezier(.22,1,.36,1) .05s both;} .tfl-logo-reveal::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%); transform:skewX(-18deg);animation:tflGlint .9s ease-out .85s both;mix-blend-mode:screen;} @keyframes tflIris{0%{clip-path:circle(0% at 44% 52%);transform:scale(.92) rotate(-8deg);opacity:.2} 100%{clip-path:circle(80% at 44% 52%);transform:none;opacity:1}} @keyframes tflGlint{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}} /* ── Empty states ──────────────────────────────────────────────────────── */ .tfl-empty{grid-column:1/-1;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px;gap:6px;} .tfl-empty-mark{width:60px;height:60px;margin-bottom:8px;animation:tflFloat 4s ease-in-out infinite; filter:drop-shadow(0 6px 14px rgba(11,107,184,.18));} .tfl-empty h3{font-size:16px;font-weight:700;color:#0F172A;margin:0;letter-spacing:-.2px;} .tfl-empty p{font-size:13px;color:#64748B;margin:0;max-width:380px;line-height:1.55;} .tfl-empty-cta{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:10px; background:var(--tfl-gradient);color:#fff!important;font-size:13px;font-weight:600;text-decoration:none;border:none;cursor:pointer; box-shadow:0 6px 16px rgba(11,107,184,.22);transition:transform .15s ease,box-shadow .15s ease;} .tfl-empty-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(91,43,196,.25);} .tfl-empty.sm{padding:22px 12px;} .tfl-empty.sm .tfl-empty-mark{width:40px;height:40px;} .tfl-empty.good .tfl-empty-mark{filter:drop-shadow(0 6px 14px rgba(5,150,105,.20));} .tfl-empty-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px; background:rgba(5,150,105,.10);color:#059669;font-size:11.5px;font-weight:700;margin-bottom:4px;} @keyframes tflFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* ── Celebration (approve / clean invoice) ─────────────────────────────── */ .tfl-celebrate{position:fixed;inset:0;z-index:100000;pointer-events:none;display:flex;align-items:center;justify-content:center;} .tfl-cel-card{pointer-events:none;background:#fff;border-radius:20px;padding:26px 34px 22px;text-align:center; box-shadow:0 24px 70px rgba(15,23,42,.22),0 0 0 1px rgba(15,23,42,.05);animation:tflPop .45s cubic-bezier(.34,1.56,.64,1) both;} .tfl-cel-card.out{animation:tflOut .3s ease-in both;} .tfl-cel-icon{position:relative;width:74px;height:74px;margin:0 auto 10px;} .tfl-cel-icon img{width:100%;height:100%;} .tfl-cel-check{position:absolute;right:-4px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:#059669; border:3px solid #fff;display:flex;align-items:center;justify-content:center;animation:tflPop .4s cubic-bezier(.34,1.56,.64,1) .25s both;} .tfl-cel-title{font-size:17px;font-weight:700;color:#0F172A;letter-spacing:-.2px;} .tfl-cel-sub{font-size:12.5px;color:#64748B;margin-top:3px;} .tfl-confetti{position:fixed;top:50%;left:50%;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:100001; animation:tflBurst 1.1s cubic-bezier(.15,.6,.35,1) forwards;} @keyframes tflPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}} @keyframes tflOut{to{transform:scale(.92);opacity:0}} @keyframes tflBurst{0%{transform:translate(-50%,-50%) rotate(0);opacity:1} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot));opacity:0}} /* ── Cross-page morph (View Transitions) ────────────────────────────────── Where the browser supports it, the lens on the sign-in card and the mark in the dashboard topbar are the SAME element as far as the transition is concerned, so it flies into place while the rest of the page cross-fades. This is the only way to animate across a real navigation; browsers without it fall back to the aperture tunnel below, which still works. */ @view-transition{navigation:auto} ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.55s; animation-timing-function:cubic-bezier(.22,1,.36,1); } ::view-transition-old(root){animation-name:tflVtOut} ::view-transition-new(root){animation-name:tflVtIn} @keyframes tflVtOut{to{opacity:0;transform:scale(1.02)}} @keyframes tflVtIn{from{opacity:0;transform:scale(.995)}} /* the lens itself travels rather than fading */ ::view-transition-group(tfl-lens){animation-duration:.62s; animation-timing-function:cubic-bezier(.32,.9,.28,1)} ::view-transition-old(tfl-lens), ::view-transition-new(tfl-lens){ animation-duration:.62s;mix-blend-mode:normal; animation-timing-function:cubic-bezier(.32,.9,.28,1)} .tfl-vt-lens{view-transition-name:tfl-lens;contain:layout} @media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important} } /* ── Login → dashboard tunnel ────────────────────────────────────────────── The lens is the doorway. While credentials are checked it works (blades turning). On success the PUPIL expands until it swallows the screen — you pass through the aperture rather than watching a logo grow — and the dashboard emerges from the same opening. Everything animates transform and opacity only, so it stays composited and smooth. */ /* 1. working — while the password is being checked */ .tfl-lens-busy{animation:tflBusy 1.1s ease-in-out infinite;transform-origin:50% 50%; will-change:transform;backface-visibility:hidden} @keyframes tflBusy{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(26deg) scale(.93)}} /* 2. rejected — the aperture snaps shut and recoils */ .tfl-lens-deny{animation:tflDeny .5s cubic-bezier(.36,.07,.19,.97) both;transform-origin:50% 50%} @keyframes tflDeny{ 0%{transform:translateX(0) scale(1)} 15%{transform:translateX(-9px) scale(.94)} 32%{transform:translateX(8px) scale(.94)} 50%{transform:translateX(-6px) scale(.96)} 68%{transform:translateX(4px) scale(.98)} 100%{transform:translateX(0) scale(1)}} .tfl-deny-msg{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px; font-size:.86rem;font-weight:600;color:#B42318;animation:tflFadeUp .3s ease-out both} @keyframes tflFadeUp{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* 3. accepted — the pupil opens and takes the whole screen */ .tfl-tunnel{position:fixed;inset:0;z-index:99999;overflow:hidden;pointer-events:none;contain:strict} .tfl-tunnel .tfl-iris{position:absolute;width:120px;height:120px;border-radius:50%; background:radial-gradient(circle at 38% 34%,#EEF3FA 0%,#E4EDF8 48%,#DCE7F5 100%); transform:translate(-50%,-50%) scale(0);will-change:transform;backface-visibility:hidden; animation:tflIrisOpen .62s cubic-bezier(.55,0,.9,.35) both} @keyframes tflIrisOpen{0%{transform:translate(-50%,-50%) scale(0);opacity:.9} 12%{opacity:1}100%{transform:translate(-50%,-50%) scale(var(--iris-scale,26))}} .tfl-tunnel .tfl-ring{position:absolute;width:120px;height:120px;border-radius:50%; border:2px solid rgba(11,107,184,.30);transform:translate(-50%,-50%) scale(.4);opacity:0; will-change:transform,opacity;backface-visibility:hidden; animation:tflRingOut .62s cubic-bezier(.5,0,.85,.3) both} .tfl-tunnel .tfl-ring:nth-of-type(2){animation-delay:.07s;border-color:rgba(11,107,184,.34)} .tfl-tunnel .tfl-ring:nth-of-type(3){animation-delay:.14s;border-color:rgba(91,43,196,.30)} @keyframes tflRingOut{0%{transform:translate(-50%,-50%) scale(.4);opacity:0} 22%{opacity:.85}100%{transform:translate(-50%,-50%) scale(var(--ring-scale,30));opacity:0}} .tfl-tunnel .tfl-mark{position:absolute;width:96px;height:96px;transform:translate(-50%,-50%); will-change:transform,opacity;animation:tflMarkGo .42s ease-in both} @keyframes tflMarkGo{0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1} 100%{transform:translate(-50%,-50%) scale(2.6) rotate(34deg);opacity:0}} /* 4. arrival — the dashboard comes out of the same opening */ .tfl-arrive-veil{position:fixed;inset:0;z-index:99998;pointer-events:none; background:radial-gradient(circle at 50% 45%,#F4F7FC 0%,#E8EFF8 70%); will-change:transform,opacity;animation:tflVeil .66s cubic-bezier(.22,1,.36,1) .03s both} @keyframes tflVeil{0%{opacity:1;transform:scale(1)} 45%{opacity:.72}100%{opacity:0;transform:scale(1.35)}} @media (prefers-reduced-motion:reduce){ .tfl-lens-busy,.tfl-lens-deny,.tfl-tunnel *,.tfl-arrive-veil{animation:none!important} .tfl-tunnel,.tfl-arrive-veil{display:none!important} } /* — Page entrance: cards and panels settle in, slightly staggered — */ .tfl-in{opacity:0;transform:translateY(14px) scale(.985); animation:tflIn .52s cubic-bezier(.16,1,.3,1) forwards;} @keyframes tflIn{to{opacity:1;transform:none}} /* — Sidebar links fan in on first paint — */ .tfl-nav-in{opacity:0;transform:translateX(-10px);animation:tflNavIn .38s cubic-bezier(.16,1,.3,1) forwards;} @keyframes tflNavIn{to{opacity:1;transform:none}} /* — Hover lift on cards — */ .tfl-lift{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease;} .tfl-lift:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.05);} /* — Light sweeps across primary buttons on hover — */ .tfl-sheen{position:relative;overflow:hidden;} .tfl-sheen::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%); transform:skewX(-20deg);opacity:0;} .tfl-sheen:hover::after{animation:tflSheen .72s ease-out;} @keyframes tflSheen{0%{left:-75%;opacity:0}12%{opacity:1}100%{left:125%;opacity:0}} .tfl-sheen:active{transform:translateY(1px);} /* — Leaving a page dims it, so navigation feels continuous — */ body.tfl-leaving{animation:tflLeave .2s ease-in forwards;pointer-events:none;} @keyframes tflLeave{to{opacity:.55;transform:scale(.995)}} /* — Numbers roll up to their value — */ .tfl-rolling{font-variant-numeric:tabular-nums;} @media (prefers-reduced-motion:reduce){ .tfl-in,.tfl-nav-in{animation:none!important;opacity:1!important;transform:none!important;} .tfl-tunnel .tfl-ring{display:none!important;} .tfl-lift:hover{transform:none!important;} .tfl-sheen:hover::after{animation:none!important;} body.tfl-leaving{animation:none!important;} }