/* ============================================================ BillKit — single-page invoice generator (self-contained) ============================================================ */ :root{ color-scheme:light; --bg:#e7edee; --bg-2:#eef3f3; --surface:rgba(255,255,255,.74); --surface-solid:#fff; --surface-2:#f2f6f6; --ink:#0f1714; --muted:#51605c; --faint:#5f6d68; --line:rgba(15,23,20,.09); --line-2:rgba(15,23,20,.16); --brand:#0a6e5c; --brand-d:#075144; --brand-l:#e0f1ec; --danger:#c0453b; --paper:#fffdf8; --grad:linear-gradient(135deg,#0a6e5c 0%,#11997e 52%,#1fc7a4 100%); --grad-soft:linear-gradient(135deg,rgba(10,110,92,.12),rgba(31,199,164,.12)); --aur-1:rgba(31,199,164,.40); --aur-2:rgba(10,110,92,.30); --aur-3:rgba(216,154,31,.16); --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace; --r:16px; --r-sm:10px; --shadow:0 1px 2px rgba(15,23,20,.05),0 12px 28px -14px rgba(15,23,20,.18); --shadow-lg:0 30px 70px -28px rgba(10,90,74,.40); --glow:0 10px 30px -8px rgba(16,153,126,.45); } [data-theme="dark"]{ color-scheme:dark; --bg:#070c0b; --bg-2:#0a1110; --surface:rgba(20,28,26,.62); --surface-solid:#121a18; --surface-2:#18211f; --ink:#eaf3f0; --muted:#93a39e; --faint:#88968f; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --brand:#2fd0b0; --brand-d:#28b89b; --brand-l:#12302a; --paper:#161e1c; --grad:linear-gradient(135deg,#0e8c74 0%,#1bbf9f 52%,#41e3c2 100%); --grad-soft:linear-gradient(135deg,rgba(47,208,176,.16),rgba(14,140,116,.14)); --aur-1:rgba(31,199,164,.22); --aur-2:rgba(14,140,116,.20); --aur-3:rgba(240,184,64,.10); --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -18px rgba(0,0,0,.7); --shadow-lg:0 34px 80px -30px rgba(0,0,0,.8); --glow:0 12px 36px -10px rgba(47,208,176,.45); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;min-height:100vh} body::before{content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none; background:radial-gradient(40vw 40vw at 12% 8%,var(--aur-1),transparent 60%),radial-gradient(46vw 46vw at 88% 0,var(--aur-2),transparent 62%),radial-gradient(40vw 40vw at 78% 92%,var(--aur-3),transparent 60%); filter:blur(20px) saturate(120%);animation:aurora 26s ease-in-out infinite alternate} body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;background-image:radial-gradient(currentColor .6px,transparent .6px);background-size:22px 22px;color:rgba(15,23,20,.05)} [data-theme="dark"] body::after{color:rgba(255,255,255,.04)} @keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.08)}} a{color:var(--brand-d);text-decoration:none} [data-theme="dark"] a{color:var(--brand)} .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px} h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.025em} h1{font-size:clamp(2.2rem,5.4vw,3.7rem);font-weight:800} h2{font-size:clamp(1.6rem,3.6vw,2.4rem)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-d);font-weight:600} [data-theme="dark"] .eyebrow{color:var(--brand)} .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* buttons */ .btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--body);font-weight:600;font-size:.95rem;padding:.78rem 1.35rem;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:transform .14s,box-shadow .18s,background .18s;overflow:hidden;line-height:1} .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow)} .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(16,153,126,.6)} .btn-primary:hover::after{left:130%} .btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(10px)} .btn-ghost:hover{background:var(--surface-solid);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-lg{padding:.95rem 1.7rem;font-size:1rem} .btn-block{width:100%;justify-content:center;padding-block:.9rem} .btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px} /* header */ .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s} .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 30px -22px rgba(15,23,20,.5)} .nav{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.24rem;color:var(--ink);letter-spacing:-.03em} .brand-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;font-family:var(--mono);font-weight:700;font-size:.98rem;box-shadow:var(--glow)} .nav-links{display:flex;align-items:center;gap:.2rem;list-style:none} .nav-links a{position:relative;color:var(--muted);font-weight:500;font-size:.92rem;padding:.55rem .8rem;border-radius:8px;transition:color .15s} .nav-links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.34rem;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .2s} .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{transform:scaleX(1)} .nav-right{display:flex;align-items:center;gap:.5rem} .icon-btn{width:40px;height:40px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:1.05rem;transition:background .15s,transform .15s;backdrop-filter:blur(10px)} .icon-btn:hover{background:var(--surface-solid);transform:translateY(-1px)} .theme-icon-dark{display:none} [data-theme="dark"] .theme-icon-dark{display:block} [data-theme="dark"] .theme-icon-light{display:none} .nav-cta{display:inline-flex} @media(max-width:640px){.nav-cta{display:none}} /* hero */ .hero{padding:clamp(3rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem);position:relative;text-align:center} .hero::before{content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:70vw;height:70vw;max-width:820px;max-height:820px;background:radial-gradient(circle,var(--aur-1),transparent 62%);filter:blur(40px);z-index:-1} .hero .eyebrow{justify-content:center} .hero h1{margin:1.1rem auto 1.1rem;max-width:16ch} .hero p.lede{font-size:1.18rem;color:var(--muted);max-width:54ch;margin:0 auto} .hero-cta{display:flex;gap:.8rem;margin-top:1.8rem;justify-content:center;flex-wrap:wrap} .hero-stats{display:flex;gap:2.4rem;margin-top:2.4rem;justify-content:center;flex-wrap:wrap} .hero-stats .s b{font-family:var(--mono);font-size:1.5rem;display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero-stats .s span{font-size:.8rem;color:var(--faint)} /* tool */ .tool{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,4.5rem);scroll-margin-top:80px} .app{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:start} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow);backdrop-filter:blur(12px)} .panel h2{font-size:1.12rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem} .panel h2 .dot{width:9px;height:9px;border-radius:50%;background:var(--grad)} .panel-sticky{position:sticky;top:88px} .field{margin-bottom:.95rem} .field label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.34rem} .field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:.92rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.64rem .75rem;transition:border-color .15s,box-shadow .15s,background .15s} .field input::placeholder,.field textarea::placeholder{color:var(--faint)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);background:var(--surface-solid);box-shadow:0 0 0 3px var(--brand-l)} .field textarea{resize:vertical;min-height:62px} .field input.num{font-family:var(--mono)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem} .divider{height:1px;background:var(--line);margin:1.25rem 0} .items-head{display:grid;grid-template-columns:1fr 58px 86px 86px 30px;gap:.5rem;font-size:.7rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;padding-inline:.1rem} .item{display:grid;grid-template-columns:1fr 58px 86px 86px 30px;gap:.5rem;align-items:center;margin-bottom:.5rem;animation:rowIn .3s ease} @keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .item.removing{animation:rowOut .25s ease forwards} @keyframes rowOut{to{opacity:0;transform:translateX(20px);height:0;margin:0}} .item input{padding:.5rem .55rem} .item .it-amt{font-family:var(--mono);font-size:.84rem;text-align:right;color:var(--muted);padding-right:.2rem} .row-del{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--danger);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;line-height:1;transition:background .15s} .row-del:hover{background:var(--surface-solid)} .add-row{margin-top:.35rem;font-size:.85rem;color:var(--brand-d);background:var(--grad-soft);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:.6rem;width:100%;cursor:pointer;font-weight:600} [data-theme="dark"] .add-row{color:var(--brand)} .add-row:hover{filter:brightness(1.04)} .totals{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.85rem} .t-row{display:flex;justify-content:space-between;font-size:.9rem;padding:.26rem 0;color:var(--muted)} .t-row span:last-child{font-family:var(--mono);color:var(--ink)} .t-grand{font-weight:700;font-size:1.15rem;color:var(--ink);border-top:1px solid var(--line);margin-top:.45rem;padding-top:.6rem} .t-grand span:last-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:opacity .2s} .btn-row{display:flex;gap:.6rem;margin-top:1.1rem} @media(max-width:560px){.btn-row{flex-wrap:wrap}.btn-row>#downloadBtn{flex:1 0 100%!important}.btn-row>#imgBtn,.btn-row>#saveBtn,.btn-row>#resetBtn{flex:1 1 0;min-width:0}} /* preview paper */ .preview-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow);backdrop-filter:blur(12px)} .preview-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem} .preview-bar span{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .paper{background:var(--paper);color:#14181c;border-radius:10px;padding:34px 32px;box-shadow:0 18px 44px -20px rgba(15,23,20,.5);position:relative;overflow:hidden;min-height:420px} [data-theme="dark"] .paper{color:var(--ink)} .paper::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--paper-accent,var(--grad))} .paper::after{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:shimmer 4.5s ease-in-out infinite} @keyframes shimmer{0%,60%{transform:translateX(-100%)}80%,100%{transform:translateX(220%)}} .pp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:8px} .pp-title{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;line-height:1} #paper .pp-title{color:var(--paper-accent-readable,var(--paper-accent,#0a6e5c))} .pp-issuer{text-align:right;font-size:12px} .pp-issuer b{font-size:13px} .pp-meta{font-family:var(--mono);font-size:11px;color:#5b6670;margin-top:5px;line-height:1.7} [data-theme="dark"] .pp-meta{color:var(--faint)} .pp-parties{margin:20px 0 6px} .pp-parties .lab{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a949d;margin-bottom:3px} .pp-parties b{font-size:12.5px} .pp-parties .det{font-size:11.5px;color:#5b6670;white-space:pre-line} [data-theme="dark"] .pp-parties .det{color:var(--faint)} table.pp-tbl{width:100%;border-collapse:collapse;margin-top:14px} table.pp-tbl th{text-align:left;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#8a949d;border-bottom:1.5px solid #14181c;padding:7px 4px} [data-theme="dark"] table.pp-tbl th{border-bottom-color:var(--line-2)} table.pp-tbl th.r,table.pp-tbl td.r{text-align:right} table.pp-tbl td{font-size:12px;padding:8px 4px;border-bottom:1px solid #ececec;vertical-align:top} [data-theme="dark"] table.pp-tbl td{border-bottom-color:var(--line)} table.pp-tbl td.r,table.pp-tbl td.amt{font-family:var(--mono)} .pp-tot{margin-top:14px;margin-left:auto;width:58%} .pp-tot .row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:#5b6670} [data-theme="dark"] .pp-tot .row{color:var(--faint)} .pp-tot .row span:last-child{font-family:var(--mono);color:#14181c} [data-theme="dark"] .pp-tot .row span:last-child{color:var(--ink)} .pp-tot .grand{font-weight:700;font-size:14.5px;border-top:1.5px solid #14181c;margin-top:5px;padding-top:7px;color:#14181c} [data-theme="dark"] .pp-tot .grand{border-top-color:var(--line-2);color:var(--ink)} .pp-tot .grand span:last-child{color:var(--paper-accent,var(--brand-d))} [data-theme="dark"] .pp-tot .grand span:last-child{color:var(--paper-accent,var(--brand))} .pp-notes{margin-top:22px;border-top:1px dashed #d3dade;padding-top:11px;font-size:11px;color:#5b6670;white-space:pre-line} [data-theme="dark"] .pp-notes{border-top-color:var(--line);color:var(--faint)} /* section shells */ .section{padding:clamp(2.5rem,6vw,4.5rem) 0;position:relative} .section-head{max-width:60ch;margin:0 auto 2.4rem;text-align:center} .section-head h2{margin:.6rem 0 .6rem} .section-head p{color:var(--muted)} .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px} .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow);backdrop-filter:blur(10px);transition:transform .18s,box-shadow .18s} .feat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .feat .f-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-d);font-size:1.35rem;margin-bottom:.9rem} [data-theme="dark"] .feat .f-ico{color:var(--brand)} .feat h3{font-size:1.05rem;margin-bottom:.3rem} .feat p{font-size:.9rem;color:var(--muted)} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px} .step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;box-shadow:var(--shadow);backdrop-filter:blur(10px);overflow:hidden} .step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)} .step .n{font-family:var(--mono);font-weight:700;color:var(--brand-d);font-size:.95rem} [data-theme="dark"] .step .n{color:var(--brand)} .step h3{font-size:1.02rem;margin:.35rem 0} .step p{font-size:.88rem;color:var(--muted)} /* faq */ .faq{max-width:760px;margin:0 auto} .faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:.65rem;background:var(--surface);overflow:hidden;backdrop-filter:blur(10px);transition:box-shadow .2s,border-color .2s} .faq details[open]{box-shadow:var(--shadow);border-color:var(--line-2)} .faq summary{cursor:pointer;padding:1.05rem 1.15rem;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--brand-d);font-size:1.35rem;transition:transform .25s} [data-theme="dark"] .faq summary::after{color:var(--brand)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 1.15rem 1.15rem;color:var(--muted);font-size:.92rem} /* footer */ .site-footer{position:relative;background:var(--surface-solid);border-top:1px solid var(--line);padding:2.6rem 0;margin-top:2rem;text-align:center} body.bk-mounting #bk-main,body.bk-mounting .site-footer{pointer-events:none} body.bk-mounting::after{content:"";position:fixed;top:0;left:0;height:3px;width:100%;background:var(--grad);z-index:9999;transform-origin:left;animation:bkbar 1.1s ease-in-out infinite} @keyframes bkbar{0%{transform:scaleX(.08)}50%{transform:scaleX(.66)}100%{transform:scaleX(.08)}} .site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--grad);opacity:.5} .site-footer p{color:var(--muted);font-size:.9rem;margin-top:.6rem} .site-footer .foot-mini{color:var(--faint);font-size:.82rem;margin-top:1.2rem} /* toast */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--bg);padding:.85rem 1.3rem;border-radius:12px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-lg);z-index:100;transition:transform .35s cubic-bezier(.2,.8,.2,1)} .toast.show{transform:translateX(-50%) translateY(0)} /* reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s} /* responsive */ @media(max-width:900px){.app{grid-template-columns:1fr}.panel-sticky{position:static}.preview-wrap{order:0}} @media(max-width:520px){.wrap{padding-inline:16px}.grid-2,.grid-3{grid-template-columns:1fr}.items-head{display:none} .item{grid-template-columns:1fr 1fr;gap:.45rem;padding:.7rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);position:relative} .item .it-desc{grid-column:1/-1}.item .it-amt{text-align:left}.row-del{position:absolute;top:.5rem;right:.5rem} .paper{padding:24px 18px}.hero-stats{gap:1.4rem}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}} /* print → clean PDF */ @media print{ @page{margin:14mm} body{background:#fff!important} body::before,body::after{display:none!important} body *{visibility:hidden!important} #paper,#paper *{visibility:visible!important} #paper{position:absolute;left:0;top:0;width:100%;min-height:0;box-shadow:none!important;border-radius:0;background:#fff!important;color:#14181c!important;padding:0} #paper::before,#paper::after{display:none!important} #paper .pp-meta,#paper .pp-parties .det,#paper .pp-tot .row{color:#5b6670!important} #paper .pp-tot .row span:last-child,#paper table.pp-tbl td{color:#14181c!important} #paper table.pp-tbl th{border-bottom-color:#14181c!important} #paper .pp-tot .grand{border-top-color:#14181c!important;color:#14181c!important} #paper .pp-tot .grand span:last-child{color:var(--paper-accent-readable,var(--paper-accent,#0a6e5c))!important;-webkit-text-fill-color:var(--paper-accent-readable,var(--paper-accent,#0a6e5c))!important} } /* ═══ BillKit Extra CSS v2 ═══ */ /* ── progress bar ── */ #bk-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:9999;transition:width .3s ease,opacity .5s .3s;pointer-events:none;box-shadow:0 0 8px rgba(17,153,126,.6);} /* ── toast ── */ #bk-toast{position:fixed;bottom:24px;right:24px;min-width:240px;max-width:340px;padding:.75rem 1rem;border-radius:12px;display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500;z-index:9999;transform:translateY(20px);opacity:0;transition:all .3s cubic-bezier(.2,.8,.2,1);pointer-events:none} #bk-toast.show{transform:translateY(0);opacity:1;pointer-events:auto} #bk-toast.info{background:var(--surface-solid);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--shadow-lg)} #bk-toast.success{background:#0a6e5c;color:#fff;box-shadow:0 4px 20px rgba(10,110,92,.35)} #bk-toast.loading{background:var(--surface-solid);border:1px solid var(--brand);color:var(--ink);box-shadow:var(--shadow-lg)} .bk-toast-icon{font-size:1.1rem} .btn-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px} @keyframes spin{to{transform:rotate(360deg)}} /* ── back to top ── */ #backToTop{position:fixed;bottom:80px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;border:0;cursor:pointer;font-size:1.2rem;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(12px);transition:all .3s;z-index:200;box-shadow:0 4px 16px rgba(10,110,92,.35)} #backToTop.visible{opacity:1;visibility:visible;transform:translateY(0)} #backToTop:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(10,110,92,.4)} /* ── form field focus glow ── */ input.focused,textarea.focused,select.focused{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(17,153,126,.18)!important} /* ── tool cards — stagger ── */ .tool-card{transition:transform .18s,box-shadow .18s,border-color .18s,opacity .5s,translate .5s;opacity:0;translate:0 20px} .tool-card.in{opacity:1;translate:0 0} .tool-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lg)} /* ── CTA pulse ── */ .btn-pulse{animation:pulse-glow 2.5s ease-in-out infinite} @keyframes pulse-glow{0%,100%{box-shadow:0 4px 20px rgba(17,153,126,.3)}50%{box-shadow:0 4px 32px rgba(17,153,126,.6),0 0 0 6px rgba(17,153,126,.1)}} @media(prefers-reduced-motion:reduce){.btn-pulse{animation:none}} /* ── PDF preview slide-in ── */ .panel-sticky{animation:slideUp .5s .2s cubic-bezier(.2,.8,.2,1) both} @keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.panel-sticky{animation:none}} /* ── download btn loading state ── */ #downloadBtn:disabled{opacity:.7;cursor:wait} /* ── mobile menu slide ── */ @media(max-width:640px){ .nav-links{position:fixed;top:60px;left:0;right:0;background:var(--surface-solid);border-bottom:1px solid var(--line);padding:.5rem;flex-direction:column;transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;transition:all .25s cubic-bezier(.2,.8,.2,1);z-index:50} .nav-links.mobile-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto} #mobileMenuBtn{display:grid} } /* ── tools dropdown mega ── */ .has-menu{position:relative} .menu-trigger{font-family:var(--body);font-weight:500;font-size:.92rem;color:var(--muted);background:none;border:0;padding:.55rem .8rem;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:color .15s,background .15s} .menu-trigger:hover{color:var(--ink);background:var(--surface-2)} .menu-trigger .caret{font-size:.66rem;transition:transform .2s} .has-menu.open .menu-trigger .caret{transform:rotate(180deg)} .menu-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:256px;background:var(--surface-solid);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60} .has-menu.open .menu-panel,.has-menu:hover .menu-panel{opacity:1;visibility:visible;transform:none} .menu-panel a{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:10px;color:var(--ink);font-size:.92rem;font-weight:500;transition:background .14s} .menu-panel a:hover{background:var(--surface-2);text-decoration:none} .menu-panel a[aria-current="page"]{background:var(--brand-l)} .menu-panel a .mi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--grad-soft);font-size:1.05rem;flex:none} .menu-panel a small{display:block;color:var(--faint);font-weight:400;font-size:.76rem;margin-top:1px} .menu-panel.mega{min-width:600px;display:grid;grid-template-columns:repeat(3,1fr);gap:.1rem .8rem;padding:1rem 1.1rem 1.1rem} .menu-group{display:flex;flex-direction:column;min-width:0} .menu-group h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:.45rem .7rem .35rem;font-weight:600} .menu-panel.mega a{padding:.5rem .7rem;gap:.6rem} .menu-panel.mega a .mi{width:30px;height:30px;font-size:1rem;border-radius:8px} .menu-panel.mega a span small{display:none} .menu-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.3rem} .menu-foot a{justify-content:center;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--brand-d)!important} [data-theme="dark"] .menu-foot a{color:var(--brand)!important} @media(max-width:640px){ .menu-panel.mega{min-width:0;grid-template-columns:1fr;max-height:72vh;overflow:auto;left:0;right:0;position:fixed;top:60px;border-radius:0;border-left:0;border-right:0} } /* ── receipt paper ── */ .pp-amount-big{text-align:center;margin:26px 0 4px} .pp-amount-big .lab{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8a949d} .pp-amount-big .val{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--brand-d);margin-top:4px} [data-theme="dark"] .pp-amount-big .val{color:var(--brand)} .pp-words{text-align:center;font-size:11px;color:#8a949d;margin-bottom:10px;font-style:italic} .pp-kv{margin:16px 0} .pp-kv .kv{display:flex;padding:7px 0;border-bottom:1px dashed #e2e7eb;font-size:12px} [data-theme="dark"] .pp-kv .kv{border-bottom-color:var(--line)} .pp-kv .kv .k{width:46%;color:#8a949d} .pp-kv .kv .v{font-family:var(--mono);color:#14181c} [data-theme="dark"] .pp-kv .kv .v{color:var(--ink)} .pp-sign{display:flex;justify-content:flex-end;margin-top:36px} .pp-sign .line{width:160px;border-top:1px solid #14181c;text-align:center;padding-top:6px;font-size:10px;color:#8a949d} [data-theme="dark"] .pp-sign .line{border-top-color:var(--line-2)} /* ── hero compact ── */ .hero.compact{padding-bottom:0} .hero.compact h1{max-width:22ch} /* ── SEO content sections ── */ .breadcrumb{font-size:.8rem;color:var(--faint);margin-bottom:1rem;font-family:var(--mono)} .breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--brand-d)} .breadcrumb span{margin:0 .4rem;opacity:.5} .quick-answer{background:var(--grad-soft);border:1px solid var(--line-2);border-radius:var(--r);padding:1.15rem 1.3rem;margin:0 0 1.5rem;font-size:1.02rem;line-height:1.65;color:var(--ink)} .quick-answer b{color:var(--brand-d)}[data-theme="dark"] .quick-answer b{color:var(--brand)} .prose{max-width:760px;margin:0 auto} .prose h2{font-size:1.7rem;margin:2.4rem 0 .9rem} .prose h3{font-size:1.2rem;margin:1.6rem 0 .6rem} .prose p{color:var(--muted);line-height:1.75;margin:.7rem 0} .prose ul,.prose ol{color:var(--muted);line-height:1.75;margin:.7rem 0 .7rem 1.2rem} .prose li{margin:.4rem 0} .prose strong{color:var(--ink)} .steps{list-style:none;counter-reset:s;margin:1rem 0;padding:0} .steps li{counter-increment:s;position:relative;padding:.85rem 0 .85rem 3rem;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.6} .steps li::before{content:counter(s);position:absolute;left:0;top:.8rem;width:32px;height:32px;border-radius:9px;background:var(--grad);color:#fff;font-family:var(--mono);font-weight:700;font-size:.9rem;display:grid;place-items:center;box-shadow:var(--glow)} .steps li strong{color:var(--ink)} .cmp-table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .cmp-table th,.cmp-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} .cmp-table thead th{background:var(--surface-2);color:var(--ink);font-weight:700;font-family:var(--display)} .cmp-table td{color:var(--muted)}.cmp-table tbody tr:last-child td{border-bottom:0} .cmp-table td:first-child{color:var(--ink);font-weight:600} .related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:1.5rem 0} .related a{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-weight:500;font-size:.9rem;transition:border-color .15s,transform .15s} .related a:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none} .related a .ri{font-size:1.2rem} /* ── blog ── */ .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:1.5rem} .post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;text-decoration:none;color:inherit} .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-2);text-decoration:none} .post-card .pc-top{height:7px;background:var(--grad)} .post-card .pc-body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .post-card .pc-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-d)} [data-theme="dark"] .post-card .pc-tag{color:var(--brand)} .post-card h3{font-size:1.12rem;line-height:1.3} .post-card p{font-size:.9rem;color:var(--muted);flex:1} .post-card .pc-meta{font-size:.78rem;color:var(--faint);font-family:var(--mono)} .article{max-width:740px;margin:0 auto} .article .art-head{margin-bottom:1.5rem} .article .art-head .pc-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-d)} [data-theme="dark"] .article .art-head .pc-tag{color:var(--brand)} .article h1{font-size:2.2rem;margin:.4rem 0} .article .art-meta{font-size:.82rem;color:var(--faint);font-family:var(--mono);margin-bottom:1rem} /* ── contact ── */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start} @media(max-width:760px){.contact-grid{grid-template-columns:1fr}} .contact-info p{color:var(--muted);line-height:1.7;margin:.6rem 0} .contact-info a{color:var(--brand-d);font-weight:600}[data-theme="dark"] .contact-info a{color:var(--brand)} /* ── homepage tool cards (cat heads) ── */ .tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .tool-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);backdrop-filter:blur(10px)} .tool-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s} .tool-card:hover::before{transform:scaleX(1)} .tool-card .tc-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-d);font-size:1.4rem;transition:transform .2s} [data-theme="dark"] .tool-card .tc-ico{color:var(--brand)} .tool-card:hover .tc-ico{transform:scale(1.08) rotate(-4deg)} .tool-card h3{font-size:1.05rem;color:var(--ink)} .tool-card p{font-size:.88rem;color:var(--muted);flex:1} .tool-card .tc-go{font-family:var(--mono);font-size:.76rem;color:var(--brand-d);font-weight:600;letter-spacing:.04em} [data-theme="dark"] .tool-card .tc-go{color:var(--brand)} .cat-head{display:flex;align-items:center;gap:.7rem;margin:2.2rem 0 1rem} .cat-head h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-family:var(--mono);font-weight:600;white-space:nowrap} .cat-head .ln{flex:1;height:1px;background:var(--line)} /* ── footer grid ── */ .foot-grid{display:grid;grid-template-columns:1.7fr repeat(6,1fr);gap:1.4rem 1.2rem;text-align:left;margin-bottom:2rem;align-items:start} @media(max-width:980px){.foot-grid{grid-template-columns:repeat(3,1fr)}.foot-grid>.fcol:first-child{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;margin-bottom:.4rem}} @media(max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>.fcol:first-child{grid-column:1/-1}} .fcol h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-family:var(--mono);margin-bottom:.7rem} .fcol a{display:block;color:var(--muted);font-size:.87rem;margin:.35rem 0} .fcol a:hover{color:var(--brand-d);text-decoration:none} [data-theme="dark"] .fcol a:hover{color:var(--brand)} .fcol .foot-tag{color:var(--muted);font-size:.87rem;margin-top:.6rem;line-height:1.6} .site-footer .foot-grid .brand{justify-content:flex-start;margin-bottom:.2rem} /* ── page head ── */ .page-head{padding:3rem 0 1rem;text-align:center} .page-head h1{font-size:2.5rem;margin-bottom:.5rem} .page-head p{color:var(--muted);max-width:60ch;margin:0 auto;font-size:1.05rem} /* ── social share ── */ .share-row{display:flex;gap:10px;margin:1.5rem 0;flex-wrap:wrap} .share-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:8px;font-size:.85rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s} .share-btn:hover{transform:translateY(-2px);text-decoration:none} .share-btn.tw{background:#1da1f2;color:#fff} .share-btn.li{background:#0077b5;color:#fff} .share-btn.wa{background:#25d366;color:#fff} /* ── WordPress compatibility ── */ /* Ensure site renders correctly inside WP page/post content area */ .bk-standalone{max-width:100%;overflow-x:hidden} .bk-standalone .site-header,.bk-standalone .site-footer{display:block!important} /* ── cookie consent ── */ #bk-cookie{position:fixed;bottom:0;left:0;right:0;background:var(--surface-solid);border-top:1px solid var(--line-2);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:8888;box-shadow:0 -4px 24px rgba(0,0,0,.08);animation:slideUpFade .4s ease} @keyframes slideUpFade{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}} #bk-cookie p{margin:0;font-size:.87rem;color:var(--muted);max-width:600px} #bk-cookie a{color:var(--brand-d);text-decoration:underline} .cookie-btns{display:flex;gap:.5rem;flex-shrink:0} @media(max-width:600px){#bk-cookie{flex-direction:column;align-items:flex-start}} /* ── WordPress host: ensure full width ── */ @media(max-width:480px){ .app{grid-template-columns:1fr} #paper{display:block} } /* SPA view transitions */ #bk-home,#bk-view{transition:opacity .22s ease,transform .22s ease} #bk-view>*{animation:bkFadeUp .4s cubic-bezier(.2,.8,.2,1) both} @keyframes bkFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){#bk-view>*{animation:none!important}#bk-home,#bk-view{transition:none!important}} /* nav active */ .nav-links a[aria-current="page"]{color:var(--brand-d);font-weight:600} [data-theme="dark"] .nav-links a[aria-current="page"]{color:var(--brand)} /* blog card hover bar */ .post-card:hover .pc-top{height:10px} /* about/blog/contact hero */ .content-hero{padding:4rem 0 2.5rem;text-align:center} .content-hero .eyebrow{display:inline-block;margin-bottom:.8rem} .content-hero h1{font-size:3rem;margin:0 0 .8rem} .content-hero p{color:var(--muted);max-width:56ch;margin:0 auto;font-size:1.08rem;line-height:1.7} @media(max-width:640px){.content-hero h1{font-size:2rem}} /* ── two-column hero + invoice mockups ── */ .hero-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;text-align:left} .hero-split .hero-left{text-align:left} .hero-split .hero-cta{justify-content:flex-start} .hero-split .hero-stats{justify-content:flex-start} .hero-right{position:relative;perspective:1600px} .mockup-stack{position:relative;height:480px} .mockup{position:absolute;background:#fff;border-radius:14px;box-shadow:0 30px 60px -15px rgba(15,23,20,.35),0 0 0 1px rgba(15,23,20,.05);padding:26px 24px;width:340px;font-family:Inter,sans-serif;color:#0f1714;transition:transform .4s cubic-bezier(.2,.8,.2,1)} .mockup-1{top:0;right:10px;z-index:3;transform:rotate(-3deg)} .mockup-2{top:40px;right:60px;z-index:2;transform:rotate(4deg) scale(.96);opacity:.92} .mockup-3{top:80px;right:110px;z-index:1;transform:rotate(8deg) scale(.92);opacity:.8} .hero-right:hover .mockup-1{transform:rotate(-2deg) translateY(-6px)} .mk-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #f0f2f4;padding-bottom:14px;margin-bottom:14px} .mk-logo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem} .mk-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em} .mk-meta{font-size:.62rem;color:#8a949d;text-align:right;line-height:1.5;margin-top:4px} .mk-row{display:flex;justify-content:space-between;font-size:.66rem;padding:5px 0;color:#5b6670} .mk-row b{color:#0f1714} .mk-tbl{margin:12px 0;border-radius:8px;overflow:hidden;border:1px solid #eef1f3} .mk-tbl .mk-th{display:grid;grid-template-columns:2fr .6fr .8fr;gap:6px;padding:7px 10px;font-size:.58rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em} .mk-tbl .mk-tr{display:grid;grid-template-columns:2fr .6fr .8fr;gap:6px;padding:7px 10px;font-size:.64rem;border-top:1px solid #f0f2f4} .mk-tot{display:flex;justify-content:space-between;font-size:.7rem;padding:5px 0} .mk-tot.grand{font-weight:800;font-size:.82rem;border-top:2px solid #f0f2f4;padding-top:8px;margin-top:4px} .mk-badge{position:absolute;font-family:var(--mono);font-size:.6rem;font-weight:700;padding:5px 11px;border-radius:20px;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:5} .mk-badge.b1{top:-14px;left:-10px;background:#0a6e5c;color:#fff} .mk-badge.b2{bottom:30px;left:-24px;background:#fff;color:#0f1714;border:1px solid #eef1f3} @media(max-width:880px){.hero-split{grid-template-columns:1fr;gap:2rem;text-align:center}.hero-split .hero-left,.hero-split .hero-cta,.hero-split .hero-stats{text-align:center;justify-content:center}.hero-right{display:none}} /* ── theme color picker + templates ── */ .tpl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:1rem} .tpl-group{display:flex;align-items:center;gap:.6rem} .tpl-group .tpl-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-family:var(--mono)} .swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;position:relative} .swatch:hover{transform:scale(1.12)} .swatch.active{border-color:var(--ink)} .swatch.active::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:800} .tpl-btn{padding:.4rem .8rem;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);font-size:.78rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all .15s} .tpl-btn:hover{border-color:var(--brand)} .tpl-btn.active{background:var(--grad);color:#fff;border-color:transparent} /* paper template variants */ #paper.tpl-modern .pp-title{letter-spacing:.04em} #paper.tpl-classic{font-family:Georgia,serif} #paper.tpl-classic .pp-title{font-family:Georgia,serif} #paper.tpl-minimal .pp-top{border:none} #paper.tpl-minimal .pp-tbl thead th{background:transparent!important;color:var(--paper-accent-readable,var(--paper-accent,#0a6e5c))!important;border-bottom:2px solid var(--paper-accent,#0a6e5c)} /* ── Aurora signup page ── */ .auth-wrap{display:grid;grid-template-columns:52% 48%;min-height:calc(100vh - 60px);gap:0} .auth-hero{position:relative;border-radius:24px;overflow:hidden;margin:1rem;display:flex;flex-direction:column;justify-content:flex-end;padding:0 3rem 6rem;color:#fff;background:linear-gradient(150deg,#06483c 0%,#0a6e5c 36%,#11997e 68%,#22cda6 100%);box-shadow:0 28px 64px -22px rgba(8,81,68,.85),0 10px 24px -14px rgba(8,81,68,.55),inset 0 1.5px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.20);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s} .auth-hero:hover{transform:translateY(-6px) scale(1.006);box-shadow:0 38px 80px -22px rgba(8,81,68,.9),0 14px 30px -14px rgba(8,81,68,.6),inset 0 1.5px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.22)} .auth-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none;z-index:1} .auth-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.15),transparent 60%)} .auth-hero-content{position:relative;z-index:2;max-width:22rem} .auth-brand{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;font-weight:700;margin-bottom:3rem} .auth-hero h2{font-size:2.4rem;font-weight:700;margin-bottom:.8rem;letter-spacing:-.02em} .auth-hero .sub{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.6;margin-bottom:2rem} .step-item{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border-radius:14px;margin-bottom:.7rem;transition:all .2s} .step-item.active{background:#fff;color:#0f1714} .step-item:not(.active){background:rgba(255,255,255,.1)} .step-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none} .step-item.active .step-num{background:#0f1714;color:#fff} .step-item:not(.active) .step-num{background:rgba(255,255,255,.15);color:rgba(255,255,255,.5)} .step-item .step-txt{font-weight:600;font-size:.92rem} .auth-form-col{display:flex;flex-direction:column;justify-content:center;padding:2rem clamp(1.5rem,5vw,5rem);overflow-y:auto} .auth-form{width:100%;max-width:34rem;margin:0 auto} .auth-form h1{font-size:2rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.02em} .auth-form .sub{color:var(--faint);font-size:.9rem;margin-bottom:1.8rem} .social-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem} .social-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink);transition:all .15s} .social-btn:hover{background:var(--surface-2)} .auth-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:var(--faint);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em} .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)} .auth-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .auth-field{margin-bottom:1.1rem} .auth-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem} .auth-field input{width:100%;height:46px;padding:0 1rem;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font-size:.92rem} .auth-field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(17,153,126,.15)} .auth-field .pw-wrap{position:relative} .auth-field .pw-toggle{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--faint);font-size:1rem} .auth-field .hint{font-size:.72rem;color:var(--faint);margin-top:.3rem} .auth-submit{width:100%;height:52px;background:var(--grad);color:#fff;font-weight:700;border:none;border-radius:14px;cursor:pointer;font-size:1rem;margin-top:.6rem;transition:transform .12s} .auth-submit:hover{transform:translateY(-2px)} .auth-foot{text-align:center;margin-top:1.4rem;font-size:.9rem;color:var(--muted)} .auth-foot a{color:var(--brand-d);font-weight:600} @media(max-width:880px){.auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}} /* ── blog step visuals ── */ .blog-steps{counter-reset:bs;margin:2rem 0} .blog-step{display:flex;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid var(--line);align-items:flex-start} .blog-step .bs-num{counter-increment:bs;flex:none;width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1.2rem;box-shadow:var(--glow)} .blog-step .bs-num::before{content:counter(bs)} .blog-step .bs-body h3{font-size:1.15rem;margin-bottom:.4rem} .blog-step .bs-body p{color:var(--muted);line-height:1.65;font-size:.95rem} .invoice-anatomy{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:2rem;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .anatomy-item{display:flex;gap:.8rem;align-items:flex-start} .anatomy-item .ai-dot{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.7rem;font-weight:700;flex:none} .anatomy-item h4{font-size:.92rem;margin-bottom:.2rem} .anatomy-item p{font-size:.82rem;color:var(--muted);line-height:1.5} @media(max-width:640px){.invoice-anatomy{grid-template-columns:1fr;padding:1.2rem}} /* ═══ BillKit v3 — dark buttons, animated hero, how-to, logo, templates ═══ */ /* ── dark-mode button text fix (anchor buttons were inheriting link teal) ── */ [data-theme="dark"] a.btn,[data-theme="dark"] .btn{color:var(--ink)} [data-theme="dark"] a.btn-primary,[data-theme="dark"] .btn-primary,[data-theme="dark"] .nav-cta{color:#fff} [data-theme="dark"] a.btn-ghost,[data-theme="dark"] .btn-ghost{color:var(--ink)} .btn-primary{text-shadow:0 1px 2px rgba(8,60,50,.35)} [data-theme="dark"] .btn-ghost{border-color:var(--line-2);background:var(--surface-2)} /* ── home hero: auto-cycling document mockup ── */ .doc-cycle{position:relative;height:470px;max-width:392px;margin-inline:auto} .doc-frame{position:absolute;inset:0;background:#fff;border-radius:16px;box-shadow:0 34px 80px -26px rgba(15,23,20,.45),0 0 0 1px rgba(15,23,20,.05);padding:30px 28px 26px;color:#0f1714;font-family:Inter,sans-serif;opacity:0;transform:translateY(26px) scale(.95) rotate(1.5deg);transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1);pointer-events:none;overflow:hidden} .doc-frame.active{opacity:1;transform:none;pointer-events:auto;z-index:2} .doc-frame.leaving{opacity:0;transform:translateY(-20px) scale(.97) rotate(-1.5deg);z-index:1} .doc-frame::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--df-accent,#0a6e5c)} .doc-cycle .mk-head{border-bottom-color:#eef1f3} .doc-tag{position:absolute;top:-14px;left:18px;z-index:6;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:20px;background:var(--grad);color:#fff;box-shadow:0 10px 24px -6px rgba(10,110,92,.5)} .doc-badge{position:absolute;top:64px;right:-18px;font-family:var(--mono);font-size:.6rem;font-weight:700;padding:5px 11px;border-radius:20px;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:5;background:#fff;color:#0f1714;border:1px solid #eef1f3;animation:floaty 3.6s ease-in-out infinite} .doc-badge.b-bottom{top:auto;bottom:26px;right:-18px;animation-delay:.6s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .doc-dots{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6} .doc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all .3s;cursor:pointer} .doc-dots i.on{width:22px;border-radius:6px;background:var(--grad)} @media(prefers-reduced-motion:reduce){.doc-frame{transition:none}.doc-badge{animation:none}} /* ── how-to step timeline (per tool) ── */ .howto{max-width:780px;margin:2.6rem auto 0} .howto>h2{font-size:1.7rem;margin:0 0 1.6rem} .howto-track{position:relative} .howto-step{position:relative;display:flex;gap:1.15rem;padding:0 0 1.7rem;align-items:flex-start} .howto-step:last-child{padding-bottom:0} .howto-step::before{content:"";position:absolute;left:21px;top:46px;bottom:-2px;width:2px;background:linear-gradient(var(--line-2),var(--line));opacity:0;transition:opacity .5s .2s} .howto-step.in::before{opacity:1} .howto-step:last-child::before{display:none} .hs-node{flex:none;width:44px;height:44px;border-radius:13px;background:var(--surface);border:1px solid var(--line-2);color:var(--brand-d);font-family:var(--mono);font-weight:700;font-size:1.05rem;display:grid;place-items:center;box-shadow:var(--shadow);transition:background .4s,color .4s,border-color .4s,box-shadow .4s} [data-theme="dark"] .hs-node{color:var(--brand)} .howto-step.in .hs-node{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow)} .hs-body{padding-top:.3rem} .hs-body h3{font-size:1.1rem;margin:0 0 .3rem;color:var(--ink);font-family:var(--display)} .hs-body p{color:var(--muted);line-height:1.65;margin:0;font-size:.95rem} .hs-body p strong{color:var(--ink)} /* ── company logo upload control ── */ .logo-field{margin-bottom:.95rem} .logo-upload{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap} .logo-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--body);font-weight:600;font-size:.85rem;color:var(--brand-d);background:var(--grad-soft);border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:.6rem .95rem;cursor:pointer;transition:filter .15s,border-color .15s} [data-theme="dark"] .logo-btn{color:var(--brand)} .logo-btn:hover{filter:brightness(1.05);border-color:var(--brand)} .logo-preview{position:relative;display:inline-flex;align-items:center} .logo-preview img{max-height:48px;max-width:140px;border-radius:8px;border:1px solid var(--line-2);background:#fff;padding:4px;object-fit:contain} .logo-remove{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-solid);color:var(--danger);font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow)} .logo-remove:hover{background:var(--surface-2)} .pp-logo{max-height:56px;max-width:170px;object-fit:contain;margin-bottom:12px;display:block} .pp-issuer .pp-logo{margin-left:auto} /* ── paper template variants — more distinct ── */ #paper.tpl-modern .pp-title{letter-spacing:.04em} #paper.tpl-classic{font-family:Georgia,'Times New Roman',serif} #paper.tpl-classic .pp-title{font-family:Georgia,serif;letter-spacing:0;font-weight:700} #paper.tpl-classic .pp-top{border-bottom:1.5px double #14181c;padding-bottom:16px} [data-theme="dark"] #paper.tpl-classic .pp-top{border-bottom-color:var(--line-2)} #paper.tpl-classic table.pp-tbl th{text-transform:none;font-size:11px;letter-spacing:0} #paper.tpl-classic .pp-parties .lab{font-style:italic;text-transform:none;letter-spacing:0;font-size:11px} #paper.tpl-minimal::before{display:none} #paper.tpl-minimal{padding-top:32px} #paper.tpl-minimal .pp-title{font-weight:600;letter-spacing:-.01em} #paper.tpl-minimal .pp-top{border:none} #paper.tpl-minimal table.pp-tbl thead tr{background:transparent!important} #paper.tpl-minimal table.pp-tbl th{background:transparent!important;color:var(--paper-accent-readable,var(--paper-accent,#0a6e5c))!important;border-bottom:2px solid var(--paper-accent,#0a6e5c)} #paper.tpl-minimal .pp-tot .grand{border-top:1px solid #14181c} /* ═══ BillKit v4 — white preview in dark, readable accent headers, logo slot ═══ */ /* ── keep the document preview WHITE in dark mode (like a real printed page) ── */ [data-theme="dark"] .paper{background:#fffdf8;color:#14181c} [data-theme="dark"] .paper .pp-meta, [data-theme="dark"] .paper .pp-parties .det, [data-theme="dark"] .paper .pp-tot .row, [data-theme="dark"] .paper .pp-words, [data-theme="dark"] .paper .pp-kv .k, [data-theme="dark"] .paper .pp-amount-big .lab, [data-theme="dark"] .paper .pp-sign .line, [data-theme="dark"] .paper .pp-notes{color:#5b6670} [data-theme="dark"] .paper .pp-parties .lab{color:#8a949d} [data-theme="dark"] .paper .pp-tot .row span:last-child, [data-theme="dark"] .paper table.pp-tbl td, [data-theme="dark"] .paper .pp-kv .v{color:#14181c} [data-theme="dark"] .paper table.pp-tbl td{border-bottom-color:#ececec} [data-theme="dark"] .paper table.pp-tbl th{border-bottom-color:#14181c} [data-theme="dark"] .paper .pp-tot .grand{border-top-color:#14181c;color:#14181c} [data-theme="dark"] .paper .pp-tot .grand span:last-child{color:var(--paper-accent,#0a6e5c)} [data-theme="dark"] .paper .pp-kv .kv{border-bottom-color:#e2e7eb} [data-theme="dark"] .paper .pp-notes{border-top-color:#d3dade} [data-theme="dark"] .paper .pp-sign .line{border-top-color:#14181c} /* ── colored table header is ALWAYS readable: accent background + white text ── */ #paper.tpl-modern table.pp-tbl thead tr, #paper.tpl-classic table.pp-tbl thead tr{background:var(--paper-accent,#0a6e5c)} #paper.tpl-modern table.pp-tbl thead th, #paper.tpl-classic table.pp-tbl thead th{color:var(--paper-accent-ink,#fff)!important;border-bottom-color:transparent!important;padding-left:8px;padding-right:8px} #paper.tpl-modern table.pp-tbl thead th:first-child, #paper.tpl-classic table.pp-tbl thead th:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px} #paper.tpl-modern table.pp-tbl thead th:last-child, #paper.tpl-classic table.pp-tbl thead th:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px} /* ── logo slot + placeholder in the document header ── */ .pp-logo-ph{display:flex;align-items:center;justify-content:center;width:132px;height:48px;margin-bottom:12px;border:1.5px dashed #c9d3d0;border-radius:8px;color:#9aa6a2;font-size:11px;font-weight:600;letter-spacing:.02em;font-family:var(--mono)} [data-theme="dark"] .paper .pp-logo-ph{border-color:#c9d3d0;color:#9aa6a2} /* ═══ BillKit v5 — document credit line, save-to-account, your projects, auth ═══ */ /* ── "Generated with FreeBillKit.com" credit line (shows in preview + PDF, above notes) ── */ .pp-gen{margin-top:18px;padding-top:10px;border-top:1px dashed #d8dee2;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#9aa6a2;text-transform:uppercase} .pp-gen b{color:var(--paper-accent,#0a6e5c);font-weight:700;letter-spacing:.02em;text-transform:none} [data-theme="dark"] .paper .pp-gen{color:#9aa6a2;border-top-color:#d8dee2} /* ── Save button in the tool toolbar ── */ .btn-save{background:rgba(17,153,126,.1);color:var(--brand-d);border:1px solid rgba(17,153,126,.28)} .btn-save:hover{background:rgba(17,153,126,.18)} [data-theme="dark"] .btn-save{color:#5fe0c0;background:rgba(31,199,164,.12);border-color:rgba(31,199,164,.32)} /* ── account controls in the nav ── */ #bkAccount{display:inline-flex;align-items:center;gap:.5rem} .bk-acct-chip{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.86rem;color:var(--ink);padding:.42rem .7rem;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;transition:background .15s} .bk-acct-chip:hover{background:var(--surface-2)} .bk-acct-chip .av{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:.68rem;font-weight:700;font-family:var(--mono)} @media(max-width:640px){#bkAccount{display:none}} /* ── auth: tabs + panes (sign up / log in toggle) ── */ .auth-tabs{display:flex;gap:.4rem;background:var(--surface-2);padding:.3rem;border-radius:12px;margin-bottom:1.6rem} .auth-tab{flex:1;padding:.62rem;border:none;border-radius:9px;background:transparent;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;transition:all .15s} .auth-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)} .auth-pane{display:none} .auth-pane.active{display:block} .auth-err{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:#dc2626;padding:.6rem .8rem;border-radius:10px;font-size:.82rem;margin-bottom:1rem;display:none} .auth-err.show{display:block} .social-stack{display:grid;gap:.6rem;margin-bottom:1.3rem} .social-stack .social-btn{width:100%;height:46px} .social-stack .social-btn svg{flex:none} /* ── Your projects page ── */ .proj-page{max-width:1080px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2rem)} .proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem} .proj-head h1{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.3rem} .proj-head .sub{color:var(--muted);font-size:.92rem} .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem} .proj-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:1.2rem;display:flex;flex-direction:column;gap:.85rem;transition:transform .15s,box-shadow .15s} .proj-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.1)} .proj-card .pc-top{display:flex;align-items:center;gap:.7rem} .proj-card .pc-ic{width:42px;height:42px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.2rem;flex:none} .proj-card .pc-title{font-weight:700;font-size:.98rem;line-height:1.3} .proj-card .pc-meta{font-size:.76rem;color:var(--faint);font-family:var(--mono);margin-top:.15rem} .proj-card .pc-actions{display:flex;gap:.5rem;margin-top:auto} .proj-card .pc-btn{flex:1;text-align:center;padding:.52rem;border-radius:9px;font-weight:600;font-size:.82rem;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:all .15s} .proj-card .pc-btn.primary{background:var(--grad);color:#fff;border-color:transparent} .proj-card .pc-btn:hover{filter:brightness(1.04)} .proj-card .pc-btn.danger:hover{background:rgba(220,38,38,.1);color:#dc2626;border-color:rgba(220,38,38,.3);filter:none} .proj-empty{text-align:center;padding:clamp(2.5rem,6vw,4rem) 1rem;border:2px dashed var(--line-2);border-radius:20px} .proj-empty .pe-ic{font-size:2.6rem;margin-bottom:.8rem} .proj-empty h3{font-size:1.2rem;margin-bottom:.5rem} .proj-empty p{color:var(--muted);margin-bottom:1.4rem;max-width:30rem;margin-left:auto;margin-right:auto} /* ═══ BillKit v6 — template gallery + professional document templates ═══ */ /* ── template picker gallery (in the side panel, with the colour swatches) ── */ .tpl-group-full{flex-direction:column;align-items:flex-start;gap:.65rem;width:100%} .tpl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem;width:100%} .tpl-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.5rem .3rem .45rem;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;color:var(--muted);font-size:.68rem;font-weight:600;transition:transform .15s,border-color .15s,background .15s} .tpl-card:hover{border-color:var(--brand);transform:translateY(-2px)} .tpl-card.active{border-color:var(--brand);background:var(--grad-soft);color:var(--brand-d)} [data-theme="dark"] .tpl-card.active{color:var(--brand)} .tpl-thumb{width:44px;height:58px;border-radius:5px;background:#fff;border:1px solid #e2e7e5;position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12)} .tpl-thumb i{position:absolute;left:6px;right:6px;top:36px;height:2px;border-radius:1px;background:#e6eae9;box-shadow:0 5px 0 #e9edec,0 10px 0 #eef1f0,0 15px 0 #eef1f0} .tpl-thumb::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--paper-accent,#0a6e5c)} .tpl-thumb::after{content:"";position:absolute;left:6px;right:6px;top:24px;height:6px;border-radius:1px;background:var(--paper-accent,#0a6e5c)} .tt-classic::before{height:15px;background:transparent;border-bottom:1.5px solid #2b2f36} .tt-classic::after{background:#c4ccca} .tt-minimal::before{display:none} .tt-minimal::after{height:2px;top:16px;left:6px;right:24px} .tt-wave::before{height:22px;background:linear-gradient(115deg,#262b31 58%,var(--paper-accent,#0a6e5c))} .tt-band::before{height:20px} .tt-band::after{top:auto;bottom:7px;left:20px;height:7px;border-radius:2px} .tt-geo::before{height:20px;border-radius:0 0 10px 0} .tt-grid{border-color:#aab2b0} .tt-grid::before{height:13px;background:#eef1f0;border-bottom:1px solid #aab2b0} .tt-grid::after{display:none} .tt-grid i{left:0;right:0;top:13px;height:0;box-shadow:0 11px 0 -1px #d7dddb,0 22px 0 -1px #d7dddb,0 33px 0 -1px #d7dddb;background:transparent} /* ── WAVE — dark + accent header (corporate) ── */ #paper.tpl-wave{padding-top:28px} #paper.tpl-wave::before{inset:0 0 auto 0;height:var(--band-h,162px);background:linear-gradient(115deg,#262b31 55%,var(--paper-accent,#0a6e5c));border-radius:0} #paper.tpl-wave::after{display:none} #paper.tpl-wave>*{position:relative;z-index:1} #paper.tpl-wave .pp-title{color:#fff} #paper.tpl-wave .pp-top .pp-meta{color:rgba(255,255,255,.78)!important} #paper.tpl-wave .pp-issuer,#paper.tpl-wave .pp-issuer b{color:#fff} #paper.tpl-wave .pp-issuer .pp-meta{color:rgba(255,255,255,.72)!important} #paper.tpl-wave .pp-logo-ph{border-color:rgba(255,255,255,.55);color:rgba(255,255,255,.85)} #paper.tpl-wave table.pp-tbl thead tr{background:var(--paper-accent,#0a6e5c)} #paper.tpl-wave table.pp-tbl thead th{color:var(--paper-accent-ink,#fff)!important;border-bottom-color:transparent!important;padding-left:8px;padding-right:8px} /* ── BAND — full accent header + highlighted total (bold/colourful) ── */ #paper.tpl-band{padding-top:28px} #paper.tpl-band::before{inset:0 0 auto 0;height:var(--band-h,124px);background:var(--paper-accent,#0a6e5c);border-radius:0} #paper.tpl-band::after{display:none} #paper.tpl-band>*{position:relative;z-index:1} #paper.tpl-band .pp-title{color:var(--paper-accent-ink,#fff)} #paper.tpl-band .pp-top .pp-meta{color:var(--paper-accent-ink,#fff)!important;opacity:.85} #paper.tpl-band .pp-issuer,#paper.tpl-band .pp-issuer b{color:var(--paper-accent-ink,#fff)} #paper.tpl-band .pp-issuer .pp-meta{color:var(--paper-accent-ink,#fff)!important;opacity:.82} #paper.tpl-band .pp-logo-ph{border-color:var(--paper-accent-ink,#fff);color:var(--paper-accent-ink,#fff);opacity:.75} #paper.tpl-band table.pp-tbl thead tr{background:var(--paper-accent,#0a6e5c)} #paper.tpl-band table.pp-tbl thead th{color:var(--paper-accent-ink,#fff)!important;border-bottom-color:transparent!important;padding-left:8px;padding-right:8px} #paper.tpl-band .pp-tot .grand{background:var(--paper-accent,#0a6e5c);border-radius:7px;border-top:none;padding:9px 12px;margin-top:8px;color:var(--paper-accent-ink,#fff)} #paper.tpl-band .pp-tot .grand span:last-child{color:var(--paper-accent-ink,#fff)!important;-webkit-text-fill-color:var(--paper-accent-ink,#fff)!important} /* ── GEOMETRIC — accent block header with rounded corner + decorative circle ── */ #paper.tpl-geo{padding-top:28px} #paper.tpl-geo::before{inset:0 0 auto 0;height:var(--band-h,132px);background:var(--paper-accent,#0a6e5c);border-radius:0 0 70px 0} #paper.tpl-geo::after{content:"";position:absolute;top:-46px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.13);z-index:0;animation:none;transform:none} #paper.tpl-geo>*{position:relative;z-index:1} #paper.tpl-geo .pp-title{color:var(--paper-accent-ink,#fff)} #paper.tpl-geo .pp-top .pp-meta{color:var(--paper-accent-ink,#fff)!important;opacity:.85} #paper.tpl-geo .pp-issuer,#paper.tpl-geo .pp-issuer b{color:var(--paper-accent-ink,#fff)} #paper.tpl-geo .pp-issuer .pp-meta{color:var(--paper-accent-ink,#fff)!important;opacity:.8} #paper.tpl-geo .pp-logo-ph{border-color:var(--paper-accent-ink,#fff);color:var(--paper-accent-ink,#fff);opacity:.75} #paper.tpl-geo table.pp-tbl thead tr{background:var(--paper-accent,#0a6e5c)} #paper.tpl-geo table.pp-tbl thead th{color:var(--paper-accent-ink,#fff)!important;border-bottom-color:transparent!important;padding-left:8px;padding-right:8px} /* ── GRID — fully bordered tax-invoice form ── */ #paper.tpl-grid{padding:26px} #paper.tpl-grid::before{display:none} #paper.tpl-grid::after{display:none} #paper.tpl-grid .pp-top{border:1.5px solid #2b2f36;padding:12px;margin-top:0} #paper.tpl-grid .pp-parties{border:1.5px solid #2b2f36;border-top:none;padding:9px 12px;margin:0} #paper.tpl-grid table.pp-tbl{border:1.5px solid #2b2f36;margin-top:0} #paper.tpl-grid table.pp-tbl thead tr{background:#f1f3f5!important} #paper.tpl-grid table.pp-tbl th{border:1px solid #2b2f36;background:#f1f3f5!important;color:#2b2f36!important;padding:7px 6px;border-radius:0!important} #paper.tpl-grid table.pp-tbl td{border:1px solid #c4ccca;padding:7px 6px} #paper.tpl-grid .pp-tot{border:1.5px solid #2b2f36;border-top:none;width:100%;margin:0;padding:8px 12px} #paper.tpl-grid .pp-tot .grand{border-top:1.5px solid #2b2f36} /* ═══ BillKit v7 — richer template thumbnails + home template carousel + invoice anatomy ═══ */ /* ── upgraded mini-invoice thumbnails in the tool gallery ── */ .tpl-gallery{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))} .tpl-thumb{width:100%;max-width:58px;height:auto;aspect-ratio:5/6.4;border-radius:6px;border:1px solid #e2e7e5;background:#fff;position:relative;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.13)} .tpl-thumb::before,.tpl-thumb::after{display:none!important} .tpl-thumb b{position:absolute;display:block} .th-hd{left:0;right:0;top:0;height:5px;background:var(--paper-accent,#0a6e5c)} .th-lg{left:7px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--paper-accent,#0a6e5c)} .th-iv{right:7px;top:11px;width:15px;height:3px;border-radius:1px;background:#c4ccca} .th-bd{left:7px;right:7px;top:28px;height:6px;border-radius:1px;background:var(--paper-accent,#0a6e5c)} .tpl-thumb i{position:absolute;left:7px;right:7px;top:40px;height:2px;border-radius:1px;background:#edf0ef;box-shadow:0 5px 0 #edf0ef,0 10px 0 #f1f4f3,0 15px 0 #f1f4f3} .tt-classic .th-hd{height:15px;background:transparent;border-bottom:1.5px solid #2b2f36} .tt-classic .th-bd{background:#c4ccca} .tt-minimal .th-hd{display:none} .tt-minimal .th-bd{height:2px} .tt-minimal .th-lg{background:#cdd5d3} .tt-wave .th-hd{height:26px;background:linear-gradient(115deg,#262b31 58%,var(--paper-accent,#0a6e5c))} .tt-wave .th-lg,.tt-band .th-lg,.tt-geo .th-lg{background:#fff} .tt-wave .th-iv,.tt-band .th-iv,.tt-geo .th-iv{background:rgba(255,255,255,.85)} .tt-wave .th-bd,.tt-band .th-bd,.tt-geo .th-bd{top:32px} .tt-band .th-hd{height:24px;background:var(--paper-accent,#0a6e5c)} .tt-geo .th-hd{height:24px;background:var(--paper-accent,#0a6e5c);border-radius:0 0 11px 0} .tt-grid{border-color:#aab2b0} .tt-grid .th-hd{height:14px;background:#eef1f0;border-bottom:1px solid #aab2b0} .tt-grid .th-lg{top:4px;width:7px;height:7px;background:#9aa6a2} .tt-grid .th-iv{top:6px;background:#b8c0c4} .tt-grid .th-bd{top:18px;background:#d7dddb} .tt-grid i{top:30px;box-shadow:0 6px 0 #e0e5e3,0 12px 0 #e0e5e3,0 18px 0 #e0e5e3} /* ── home: template carousel ── */ .tpl-carousel{position:relative;margin-top:1.8rem} .tcar-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1.6rem;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none} .tcar-track::-webkit-scrollbar{display:none} .tcar-card{flex:0 0 232px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:var(--shadow);text-align:left;font:inherit;color:inherit;padding:0} .tcar-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .tcar-cap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;font-weight:700;font-size:.95rem;color:var(--ink)} .tcar-cap .go{color:var(--brand);font-size:1.1rem} .tcar-arrow{position:absolute;top:36%;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:1.3rem;line-height:1;z-index:4;box-shadow:var(--shadow);transition:background .15s} .tcar-arrow:hover{background:var(--surface-2)} .tcar-prev{left:-14px}.tcar-next{right:-14px} @media(max-width:640px){.tcar-arrow{top:38%;width:40px;height:40px;font-size:1.15rem;background:rgba(255,255,255,.92);box-shadow:0 4px 14px -2px rgba(15,23,20,.3)}.tcar-prev{left:4px}.tcar-next{right:4px}} [data-theme="dark"] .tcar-arrow{background:rgba(20,28,26,.92)} .foot-social{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap;max-width:230px} .foot-social a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);transition:transform .15s,background .15s,color .15s} .foot-social svg{width:16px;height:16px} .foot-social a:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px)} .author-box{display:flex;gap:1rem;align-items:flex-start;margin-top:2.5rem;padding:1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .author-av{width:48px;height:48px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.2rem;flex:0 0 auto;font-family:var(--mono)} .author-meta{display:flex;flex-direction:column;gap:.25rem} .author-meta strong{font-size:.95rem;color:var(--ink)} .author-meta span{font-size:.88rem;color:var(--muted);line-height:1.55} .cprev{height:174px;background:#fff;position:relative;overflow:hidden;padding:14px} .cprev-hd{display:flex;align-items:center;justify-content:space-between;margin:-14px -14px 12px;padding:13px 14px} .cprev-logo{width:20px;height:20px;border-radius:50%;background:var(--paper-accent,#0a6e5c);flex:none} .cprev-ttl{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.04em;color:var(--paper-accent,#0a6e5c)} .cprev-tb{height:13px;border-radius:3px;background:var(--paper-accent,#0a6e5c);margin-bottom:9px} .cprev-rows i{display:block;height:5px;border-radius:2px;background:#eceff0;margin-bottom:8px} .cprev-rows i:nth-child(2){width:86%}.cprev-rows i:nth-child(3){width:68%} .cprev-tot{position:absolute;left:14px;right:14px;bottom:13px;display:flex;justify-content:space-between;border-top:1.5px solid #d7dddb;padding-top:7px;font-size:.72rem;font-weight:800;color:var(--paper-accent,#0a6e5c)} .cprev.tt-wave .cprev-hd{background:linear-gradient(115deg,#262b31 58%,var(--paper-accent,#0a6e5c))} .cprev.tt-band .cprev-hd{background:var(--paper-accent,#0a6e5c)} .cprev.tt-geo .cprev-hd{background:var(--paper-accent,#0a6e5c);border-radius:0 0 24px 0} .cprev.tt-wave .cprev-ttl,.cprev.tt-band .cprev-ttl,.cprev.tt-geo .cprev-ttl{color:#fff} .cprev.tt-wave .cprev-logo,.cprev.tt-band .cprev-logo,.cprev.tt-geo .cprev-logo{background:#fff} .cprev.tt-modern{border-top:4px solid var(--paper-accent,#0a6e5c)} .cprev.tt-classic .cprev-hd{border-bottom:2px solid #2b2f36} .cprev.tt-classic .cprev-ttl{color:#2b2f36;font-family:Georgia,serif} .cprev.tt-minimal .cprev-tb{height:3px} .cprev.tt-grid .cprev-tb{background:#eef1f0;border:1px solid #aab2b0;color:#2b2f36} .cprev.tt-grid .cprev-ttl{color:#2b2f36} /* ── home: invoice anatomy / format ── */ .inv-anatomy{display:grid;grid-template-columns:1fr minmax(208px,272px) 1fr;gap:1.3rem;align-items:center;max-width:1000px;margin:1rem auto 0} .ana-col{display:flex;flex-direction:column;gap:1.7rem} .ana-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.5} .ana-col.left .ana-item{flex-direction:row-reverse;text-align:right} .ana-col.right .ana-item{flex-direction:row;text-align:left} .ana-dot{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--brand);background:var(--surface);margin-top:2px;position:relative} .ana-dot::after{content:"";position:absolute;top:50%;width:22px;height:1.5px;background:var(--line-2)} .ana-col.left .ana-dot::after{left:100%} .ana-col.right .ana-dot::after{right:100%} .ana-item b{color:var(--ink)} .ana-doc{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:15px;color:#2b2f36;font-size:9px;line-height:1.4} .ad-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px} .ad-logo{width:22px;height:22px;border-radius:50%;background:#2b2f36;flex:none} .ad-ttl{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#2b2f36;letter-spacing:.03em;text-align:right;line-height:1} .ad-ttl span{display:block;font-family:var(--mono);font-size:8px;font-weight:500;color:#8a949d;margin-top:3px} .ad-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:8px;color:#5b6670} .ad-meta b{display:block;color:#2b2f36;font-size:9px} .ad-meta .r{text-align:right;font-family:var(--mono)} .ad-tb,.ad-row{display:grid;grid-template-columns:1fr 18px 26px 30px;gap:5px} .ad-tb{background:#2b2f36;color:#fff;padding:4px 6px;border-radius:3px;font-weight:700;font-size:7.5px;text-transform:uppercase} .ad-row{padding:4px 6px;border-bottom:1px solid #eee;font-size:8px} .ad-row span:nth-child(n+2),.ad-tb span:nth-child(n+2){text-align:right} .ad-tot{display:flex;justify-content:space-between;margin-top:8px;padding-top:6px;border-top:1.5px solid #2b2f36;font-weight:800;font-size:9.5px} .ad-notes{margin-top:9px;border-top:1px dashed #d3dade;padding-top:6px;font-size:7.5px;color:#8a949d} @media(max-width:760px){.inv-anatomy{grid-template-columns:1fr;max-width:380px}.ana-col{gap:1.1rem;margin:1.2rem 0}.ana-col.left .ana-item{flex-direction:row;text-align:left}.ana-dot::after{display:none}} /* ── social login modal ── */ .socmod-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s} .socmod-overlay.open{opacity:1;pointer-events:all} .socmod-box{background:var(--surface-solid);border-radius:24px;padding:2rem 2.4rem 2.4rem;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(0,0,0,.3);transform:translateY(16px);transition:transform .2s;position:relative} .socmod-overlay.open .socmod-box{transform:none} .socmod-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:50%;border:none;background:var(--surface-2);cursor:pointer;font-size:.95rem;color:var(--ink);display:grid;place-items:center;line-height:1} .socmod-logo{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem} .socmod-logo.google{background:#fff;border:1.5px solid #e8eaed;box-shadow:0 1px 4px rgba(0,0,0,.1)} .socmod-logo.github{background:#24292e;color:#fff} .socmod-logo.facebook{background:#1877f2;color:#fff} .socmod-box h3{text-align:center;font-size:1.2rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.01em} .socmod-sub{text-align:center;color:var(--faint);font-size:.86rem;margin-bottom:1.4rem;line-height:1.5} .socmod-field{margin-bottom:.85rem} .socmod-field label{display:block;font-size:.78rem;font-weight:600;color:var(--faint);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em} .socmod-field input{width:100%;padding:.72rem 1rem;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font-size:.95rem;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .15s} .socmod-field input:focus{border-color:var(--brand)} .socmod-submit{width:100%;padding:.88rem;border-radius:12px;border:none;font-size:.97rem;font-weight:700;cursor:pointer;color:#fff;background:var(--brand-d);margin-top:.5rem;transition:opacity .15s;letter-spacing:-.01em;font-family:inherit} .socmod-submit:hover{opacity:.88} .socmod-err{color:#d63031;font-size:.83rem;margin-top:.55rem;min-height:1.1rem} /* ── image (PNG) download button ── */ #imgBtn:disabled{opacity:.7;cursor:wait} /* custom colour picker (rainbow wheel that opens the native colour input) */ .swatch-wheel{width:26px;height:26px;border-radius:50%;cursor:pointer;display:inline-block;vertical-align:middle;position:relative;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);background:conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#2563eb,#af52de,#ff3b30);flex:none} .swatch-wheel:hover{transform:scale(1.12)} .swatch-wheel input{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:none;padding:0;margin:0} /* ════════ MOBILE / RESPONSIVE ════════ */ /* hamburger */ .nav-burger{display:none;position:relative;width:42px;height:42px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface-2);cursor:pointer;padding:0;flex:none} .nav-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:top .25s,transform .25s,opacity .2s} .nav-burger span:nth-child(1){top:14px} .nav-burger span:nth-child(2){top:20px} .nav-burger span:nth-child(3){top:26px} .nav-burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){top:20px;transform:rotate(-45deg)} .nav-mobile-cta{display:none} /* tool layout: let grid tracks shrink so the form never overflows; preview scrolls inside its own box */ .app>*{min-width:0} .preview-wrap{overflow-x:auto} .field input,.field textarea,.field select{max-width:100%} @media(max-width:900px){ .nav-burger{display:block} .nav-links{position:fixed;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface-solid);border-bottom:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,0,0,.45);padding:.6rem .9rem!important;gap:.1rem;max-height:calc(100vh - 60px);overflow-y:auto;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:all .25s cubic-bezier(.2,.8,.2,1);z-index:60} .nav-links.mobile-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto} .nav-links>li{width:100%} .nav-links a{display:block;padding:.78rem .6rem;font-size:1rem;border-radius:9px} .nav-links a::after{display:none} .has-menu .menu-trigger{width:100%;justify-content:space-between;font-size:1rem;padding:.78rem .6rem} .menu-panel.mega{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;box-shadow:none!important;border:none!important;background:transparent!important;padding:.1rem 0 .4rem .4rem!important;margin:0!important;min-width:0!important;width:100%!important;left:auto!important;right:auto!important;display:block!important;columns:auto!important} .nav-links:not(.mobile-open) .menu-panel.mega{pointer-events:none!important;visibility:hidden!important} .nav-links:not(.mobile-open),.nav-links:not(.mobile-open) *{pointer-events:none!important} .menu-panel.mega .menu-group{margin-bottom:.3rem} .menu-panel.mega .menu-group h5{margin:.5rem 0 .1rem;font-size:.72rem} .menu-panel.mega .menu-group a{padding:.55rem .5rem} .menu-panel.mega .menu-group a small{display:none} .menu-foot{padding:.4rem .5rem} .nav-mobile-cta{display:flex;flex-direction:column;gap:.55rem;padding:.7rem .2rem .3rem;border-top:1px solid var(--line);margin-top:.4rem} .nav-mobile-cta .btn{width:100%;justify-content:center} } @media(max-width:560px){ .grid-2{grid-template-columns:1fr;gap:.2rem} .panel{padding:1.1rem} .preview-wrap{padding:.9rem} .tpl-bar{padding:.85rem .9rem;gap:.7rem} .tpl-gallery{grid-template-columns:repeat(4,1fr)} h1{font-size:clamp(1.9rem,8vw,2.6rem)} } /* ── mobile fixes (corrective, high-priority) ── */ @media(max-width:900px){ .nav-links.mobile-open{visibility:visible!important;opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important} } @media(max-width:560px){ .items-head{display:none!important} .item{grid-template-columns:1fr 1fr 1fr 28px!important;gap:.4rem!important;margin-bottom:.55rem} .it-desc{grid-column:1/-1!important} .item input{min-width:0!important} .it-desc input{font-weight:600} } @media(max-width:680px){ .preview-wrap{overflow:hidden;padding:.7rem} .preview-bar{margin-bottom:.5rem} } .field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:.65} .item input::placeholder{color:var(--faint);opacity:.6} .gloss{margin:.4rem 0 0} .gloss dt{font-weight:700;color:var(--ink);margin-top:1rem;font-family:var(--display)} .gloss dt a{color:var(--brand-d)} [data-theme="dark"] .gloss dt a{color:var(--brand)} .gloss dd{margin:.25rem 0 0;color:var(--muted);line-height:1.65} .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;max-width:1000px;margin:2rem auto 0} .tm-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s} .tm-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .tm-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:.9rem} .tm-av{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.3rem;font-family:var(--display);background:linear-gradient(135deg,var(--a),var(--b))} .tm-name{font-size:1.08rem;margin:0;font-family:var(--display)} .tm-role{font-size:.85rem;color:var(--brand-d);font-weight:600} [data-theme="dark"] .tm-role{color:var(--brand)} .tm-exp{font-size:.76rem;color:var(--faint);margin-top:.15rem;font-family:var(--mono)} .tm-bio{font-size:.9rem;color:var(--muted);line-height:1.65;margin:0 0 1rem} .tm-skills{display:flex;flex-wrap:wrap;gap:.4rem} .tm-chip{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:.25rem .6rem} .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;max-width:820px;margin:0 auto;text-align:center} .stat b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat span{font-size:.82rem;color:var(--muted)} .trust-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.7rem;max-width:820px;margin:1.4rem auto 0} .trust-grid li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--muted)} .trust-grid .tk{color:#fff;background:var(--brand-d);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:.7rem;flex:none;margin-top:2px} [data-theme="dark"] .trust-grid .tk{background:var(--brand);color:#06231d} /* ── post-download review popup ── */ .revmod-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s} .revmod-overlay.open{opacity:1;pointer-events:all} .revmod-box{background:var(--surface-solid);border-radius:22px;padding:1.8rem 1.9rem 1.6rem;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,.32);transform:translateY(16px);transition:transform .2s;position:relative;text-align:center} .revmod-overlay.open .revmod-box{transform:none} .revmod-close{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border:none;border-radius:50%;background:var(--surface-2);color:var(--ink);cursor:pointer;font-size:.9rem;line-height:1} .revmod-emoji{font-size:2.2rem;line-height:1;margin-bottom:.4rem} .revmod-box h3{font-family:var(--display);font-size:1.25rem;margin-bottom:.3rem} .revmod-sub{color:var(--faint);font-size:.86rem;line-height:1.5;margin-bottom:1rem} .revmod-stars{display:flex;justify-content:center;gap:.25rem;margin-bottom:1rem} .revstar{background:none;border:none;cursor:pointer;font-size:2rem;line-height:1;color:var(--line-2);transition:transform .12s,color .12s;padding:0 .1rem} .revstar:hover{transform:scale(1.15)} .revstar.on{color:#f5a623} .revmod-text{width:100%;min-height:74px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:.92rem;padding:.7rem .85rem;box-sizing:border-box;resize:vertical;margin-bottom:.6rem} .revmod-name{width:100%;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:.92rem;padding:.65rem .85rem;box-sizing:border-box;margin-bottom:.9rem} .revmod-text:focus,.revmod-name:focus{outline:none;border-color:var(--brand)} .revmod-submit{width:100%;border:none;border-radius:12px;background:var(--brand-d);color:#fff;font-weight:700;font-size:.97rem;padding:.85rem;cursor:pointer;font-family:inherit;transition:opacity .15s} .revmod-submit:hover{opacity:.9} .revmod-later{width:100%;background:none;border:none;color:var(--faint);font-size:.82rem;padding:.6rem;margin-top:.3rem;cursor:pointer} /* ── reviews section (real, owner-approved) ── */ .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;max-width:1000px;margin:1.6rem auto 0} .rev-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.4rem;margin:0} .rev-stars{color:#f5a623;letter-spacing:1px;font-size:.95rem;margin-bottom:.6rem} .rev-text{font-size:.92rem;line-height:1.65;color:var(--ink);margin:0 0 .9rem} .rev-who{display:flex;align-items:center;gap:.6rem} .rev-av{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;flex:none} .rev-name{font-weight:700;font-size:.86rem;display:block} .rev-role{font-size:.76rem;color:var(--muted)} .rev-head-rating{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem} .rev-head-rating .s{color:#f5a623;font-size:1.15rem;letter-spacing:1px} /* a11y: skip link + focus fallback (Novamira) */ .skip-link{position:fixed;left:-9999px;top:8px;z-index:2000;background:var(--brand);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2)} .skip-link:focus{left:8px;outline:3px solid #fff;outline-offset:2px} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}