/* InvoiceSoftwareSimple — premium design system. All colour tokens are CSS variables. */ :root{ --brand:#12325e; --brand-2:#1e4a8a; --accent:#2a56d6; --accent-strong:#1f45b8; --accent-soft:#eef3ff; --accent-ink:#ffffff; --ink:#111c30; --ink-2:#33425c; --muted:#647089; --line:#e5e9f2; --line-2:#eef1f7; --bg:#f5f7fc; --bg-2:#eef2f9; --card:#ffffff; --field:#ffffff; --field-line:#ccd5e4; --ok:#0a7a52; --ok-soft:#e6f6ef; --danger:#c02718; --danger-soft:#fdecea; --warn:#b45309; --warn-soft:#fdf1e3; --info:#1d4ed8; --info-soft:#e9f0ff; --radius:14px; --radius-lg:20px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,32,63,.05),0 10px 30px rgba(16,32,63,.06); --shadow-lg:0 24px 60px rgba(16,32,63,.14); --ring:0 0 0 4px rgba(42,86,214,.28); --sans:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } [data-theme="dark"]{ --brand:#dbe6fb; --brand-2:#9db8ec; --accent:#5b83f0; --accent-strong:#7397f4; --accent-soft:#1a2740; --accent-ink:#0a1120; --ink:#eaf0fb; --ink-2:#c2cee2; --muted:#93a1bd; --line:#26324a; --line-2:#1f2a40; --bg:#0b1220; --bg-2:#0f1828; --card:#141d30; --field:#0f1828; --field-line:#31405c; --ok:#41c791; --ok-soft:#122c25; --danger:#f2836f; --danger-soft:#341a17; --warn:#e0a24a; --warn-soft:#33260f; --info:#7ea2f5; --info-soft:#16223a; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px rgba(0,0,0,.36); --shadow-lg:0 30px 70px rgba(0,0,0,.55); --ring:0 0 0 4px rgba(91,131,240,.34); /* V59: the V41 premium pass introduced these in a second :root block but never gave them dark values. --ink-1 was #0b1220, identical to the dark --bg, so every h1/h2/h3 rendered invisible. */ --ink-1:#f2f6fd; /* headings */ --ink-3:#9aa8c4; /* meta */ --rule:#26324a; --surface:#141d30; --surface-2:#0f1828; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 2px 4px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.42); } *{box-sizing:border-box} html,body{max-width:100%;overflow-x:clip} @supports not (overflow-x:clip){body{overflow-x:hidden}} body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,canvas,svg,video,table,pre{max-width:100%} button,a,input,select,textarea{font:inherit} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-strong);text-decoration:underline} h1,h2,h3{color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.15} h1{letter-spacing:-.03em} .muted{color:var(--muted)} .danger-text{color:var(--danger);font-weight:700} .good-text{color:var(--ok);font-weight:700} .warn-text{color:var(--warn);font-weight:700} .skip-link{position:absolute;left:-9999px;top:8px;background:var(--card);color:var(--brand);padding:12px 16px;border-radius:10px;z-index:100;box-shadow:var(--shadow)} .skip-link:focus{left:12px} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} /* Header */ .top{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,4vw,42px);background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--brand);font-size:1.08rem;letter-spacing:-.02em} .brand:hover{text-decoration:none} .brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff;display:grid;place-items:center;font-size:.95rem;font-weight:800;box-shadow:0 6px 16px rgba(42,86,214,.35);flex:none} .brand-logo{height:30px;width:auto;max-width:150px;border-radius:6px;display:block} .top nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-left:auto} .top nav a{font-size:.9rem;font-weight:600;color:var(--ink-2);padding:8px 11px;border-radius:9px;line-height:1} .top nav a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none} .nav-toggle{display:none;margin-left:auto;background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-weight:700} .theme-toggle{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line);padding:8px 12px;border-radius:9px;font-weight:600} .theme-toggle:hover{color:var(--ink)} .wrap{width:min(1180px,92%);margin:32px auto 72px} .breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:20px} .breadcrumbs a{color:var(--muted)} .breadcrumbs a:hover{color:var(--accent)} /* Buttons */ .btn,button,input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-sm);padding:11px 18px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.94rem;line-height:1;cursor:pointer;transition:transform .06s ease,box-shadow .15s ease,background .15s ease;box-shadow:0 1px 2px rgba(16,32,63,.12),0 6px 16px rgba(42,86,214,.22)} .btn:hover,button:hover,input[type=submit]:hover{background:var(--accent-strong);color:var(--accent-ink);text-decoration:none;box-shadow:0 2px 4px rgba(16,32,63,.16),0 10px 22px rgba(42,86,214,.3)} .btn:active,button:active{transform:translateY(1px)} .btn.secondary,button.secondary{background:var(--card);color:var(--accent-strong);border-color:var(--line);box-shadow:var(--shadow)} .btn.secondary:hover,button.secondary:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} .btn.danger,button.danger{background:var(--danger);color:#fff;box-shadow:0 6px 16px rgba(192,39,24,.25)} .btn.danger:hover{background:#a71f12;color:#fff} .btn.small,button.small{padding:8px 13px;font-size:.86rem} .btn.ghost{background:transparent;color:var(--accent-strong);box-shadow:none;border-color:transparent} .btn.ghost:hover{background:var(--accent-soft)} .actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;align-items:center} /* Cards & layout */ .card,.hero-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)} .section{margin-top:30px} .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden} .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--accent),var(--brand));opacity:.85} .stat .muted{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .stat strong{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 2px} .stat small{color:var(--muted)} /* Hero */ .hero{padding:64px 0 48px;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center} .hero h1{font-size:clamp(2.3rem,4.6vw,3.9rem);margin:.15em 0 .3em} .hero p{font-size:1.14rem;color:var(--ink-2);max-width:640px} .eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);padding:6px 12px;border-radius:999px;margin-bottom:8px} .hero-card{border-radius:var(--radius-lg);padding:28px;background: radial-gradient(120% 120% at 100% 0,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card) 60%)} .hero-card h2{margin-top:0} .hero-card ol,.hero-card ul{margin:.4em 0;padding-left:1.15em} .hero-card li{margin:.35em 0;color:var(--ink-2)} .hero-card .metric{font-size:2.1rem;font-weight:800;color:var(--ink)} .answer-block{font-size:1.06rem;color:var(--ink-2);max-width:680px} /* Tables */ .mobile-table{overflow:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)} table{width:100%;border-collapse:collapse;background:var(--card);overflow:hidden} .mobile-table table{border:0;box-shadow:none} th,td{padding:13px 15px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top} th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg-2);font-weight:700} tr:last-child td{border-bottom:0} tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)} /* Badges */ .badge{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);font-size:.76rem;font-weight:700;letter-spacing:.02em;border:1px solid var(--line)} .badge.paid,.badge.accepted,.badge.completed,.badge.won{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)} .badge.overdue,.badge.rejected,.badge.lost{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)} .badge.sent,.badge.scheduled,.badge.open,.badge.unpaid,.badge.draft{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)} /* Forms */ .form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form label,.form>label{display:block;font-weight:650;margin-bottom:6px;color:var(--ink);font-size:.92rem} .form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--field);color:var(--ink);transition:border-color .15s,box-shadow .15s} .form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)} .form textarea{min-height:100px;resize:vertical} .form small.muted{font-weight:400} fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px} legend{padding:0 8px;font-weight:700;color:var(--ink-2)} .full{grid-column:1/-1} .items-row{display:grid;grid-template-columns:2fr .6fr .8fr;gap:10px;margin-bottom:10px} /* Flash & empty */ .flash{padding:13px 16px;border-radius:var(--radius-sm);margin:12px 0;font-weight:600;border:1px solid transparent} .flash.success{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)} .flash.error{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent)} .empty{padding:34px;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--field-line);border-radius:var(--radius)} .note{padding:14px 16px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius-sm);color:var(--ink-2)} /* Documents (quote / invoice) */ .doc{background:var(--card);padding:clamp(24px,4vw,44px);border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)} .doc-head{display:flex;justify-content:space-between;gap:34px;padding-bottom:22px;margin-bottom:22px;border-bottom:2px solid var(--line)} .doc h1{margin:0 0 4px;font-size:1.5rem;letter-spacing:.12em;color:var(--accent-strong)} .doc-logo{max-height:64px;max-width:220px;width:auto;margin-bottom:12px;display:block} .doc-brandname{font-size:1.15rem;font-weight:800;color:var(--ink);margin-bottom:6px} .totals{margin-left:auto;width:min(360px,100%);margin-top:22px} .totals div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2)} .totals .grand{font-size:1.2rem;font-weight:800;border-bottom:0;border-top:2px solid var(--line);margin-top:4px;padding-top:12px;color:var(--ink)} /* Kanban */ .kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .lane{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px} .lane h3{margin-top:0;font-size:.95rem} .task{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px;margin:10px 0;box-shadow:var(--shadow)} /* Feature & pricing grids */ .feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .feature-list .card h3{margin-top:0} .landing-sections{padding:32px 0} .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pricing .card{position:relative} .pricing .price{font-size:2.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em} .plan-free{border:2px solid var(--accent);box-shadow:0 20px 44px rgba(42,86,214,.18)} .plan-badge{position:absolute;top:-12px;right:20px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px} /* Footer */ footer{padding:44px clamp(16px,4vw,42px) 34px;border-top:1px solid var(--line);color:var(--muted);background:var(--card)} .footer-grid{width:min(1180px,92%);margin:auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;text-align:left} .footer-grid strong{display:block;margin-bottom:10px;color:var(--ink);font-size:.9rem} .footer-grid a{display:block;margin-bottom:6px;color:var(--muted);font-size:.82rem} .footer-grid a:hover{color:var(--accent)} .footer-grid p{max-width:300px;font-size:.9rem} .footer-note{width:min(1180px,92%);margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line-2);font-size:.84rem} /* Cookie banner */ .cookie-banner{position:fixed;z-index:100;left:16px;right:16px;bottom:16px;max-width:760px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-lg)} .cookie-banner p{margin-top:0;color:var(--ink-2)} .cookie-banner .actions{margin-bottom:0} .sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .print-only{display:none} /* Responsive */ @media(max-width:900px){ .hero{grid-template-columns:1fr;padding-top:40px;gap:34px} .grid,.grid.three,.grid.two,.feature-list,.pricing{grid-template-columns:1fr 1fr} .kanban{grid-template-columns:1fr 1fr} .nav-toggle{display:inline-flex} .top nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);flex-direction:column;align-items:stretch;padding:14px clamp(16px,4vw,42px);gap:4px;box-shadow:var(--shadow-lg);border-bottom:1px solid var(--line)} .top nav.open{display:flex} .top nav a,.top nav button{min-height:44px;display:flex;align-items:center} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .grid,.grid.three,.grid.two,.feature-list,.pricing,.kanban,.form-grid{grid-template-columns:1fr} .items-row{grid-template-columns:1fr 1fr} .items-row input:first-child{grid-column:1/-1} .doc-head{display:block} .doc-head>div+div{margin-top:18px} .footer-grid{grid-template-columns:1fr} .wrap{width:94%} } @media print{ .top,footer,.no-print,.actions,.cookie-banner,.skip-link,.breadcrumbs{display:none!important} .wrap{width:100%;margin:0} .doc{border:0;box-shadow:none;padding:0} .print-only{display:block} body{background:#fff} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ---- Document builder (create quote / invoice) ---- */ .builder-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px} .builder-head h1{margin:0;margin-right:auto} .builder-grid{display:grid;grid-template-columns:1.7fr .9fr;gap:22px;align-items:start} .field-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px} .field-card h2{margin:0 0 14px;font-size:1.05rem} .line-head,.line-item{display:grid;grid-template-columns:1fr 78px 116px 108px 40px;gap:10px;align-items:center} .line-head{padding:0 2px 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} .line-item{margin-bottom:10px} .line-item input{width:100%;padding:11px 12px;border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--field);color:var(--ink)} .line-item input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)} .li-total{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;padding-right:2px} .li-remove{background:transparent;color:var(--muted);box-shadow:none;border:1px solid var(--line);border-radius:9px;padding:9px 0;font-weight:700;width:40px} .li-remove:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent} .new-customer{margin-top:6px;padding-top:14px;border-top:1px dashed var(--field-line)} .builder-summary{position:sticky;top:88px} .summary-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .summary-card h2{margin:0 0 8px;font-size:1.05rem} .summary-card .totals{margin:0 0 16px;width:100%} .summary-card .btn{width:100%} /* ---- Reviews / testimonials ---- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px} .review .stars{color:#e8a317;letter-spacing:2px;font-size:1rem} .review blockquote{margin:0;font-size:1.02rem;color:var(--ink);line-height:1.55} .review .who{display:flex;align-items:center;gap:11px;margin-top:auto} .review .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff;display:grid;place-items:center;font-weight:800;flex:none} .review .who b{display:block;font-size:.92rem} .review .who span{color:var(--muted);font-size:.82rem} .trust-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px} .trust-band .card{padding:18px;text-align:center} .trust-band .card strong{display:block;font-size:1.5rem;color:var(--ink)} .trust-band .card span{color:var(--muted);font-size:.86rem} @media(max-width:900px){ .builder-grid{grid-template-columns:1fr} .builder-summary{position:static} .reviews{grid-template-columns:1fr 1fr} .trust-band{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .line-head{display:none} .line-item{grid-template-columns:1fr 1fr;gap:8px} .line-item .li-desc{grid-column:1/-1} .li-total{grid-column:1/2;text-align:left} .li-remove{grid-column:2/3;justify-self:end} .reviews,.trust-band{grid-template-columns:1fr} } /* Button legibility: keep fill-button text white regardless of container link colours (fixes nav CTA) */ .btn,input[type=submit],a.btn{color:var(--accent-ink)!important} .tmpl-chip{color:var(--ink)!important} .tmpl-chip.is-active{color:#fff!important} .btn.secondary,button.secondary,a.btn.secondary{color:var(--accent-strong)!important} .btn.ghost,a.btn.ghost{color:var(--accent-strong)!important} .btn.danger,button.danger{color:#fff!important} /* ---- Free invoice generator (mobile-first) ---- */ .gen-hero{margin:6px 0 18px} .gen-hero h1{margin:.2em 0} .gen-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start} .gen-form .field-card{margin-bottom:16px} .gen-preview-wrap{display:flex;flex-direction:column;gap:12px} .gen-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .gen-actions .btn{flex:0 0 auto} #genUses{font-weight:600} .gen-privacy{margin:0} .gen-steps{counter-reset:step;list-style:none;padding-left:0} .gen-steps li{position:relative;padding:8px 0 8px 42px;border-bottom:1px solid var(--line)} .gen-steps li:last-child{border-bottom:0} .gen-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:7px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:.85rem} /* Avatar in the header */ .avatar-link{display:inline-flex;align-items:center;padding:4px!important;border-radius:50%} .avatar-link:hover{background:transparent!important;text-decoration:none} .avatar-mini{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;box-shadow:0 4px 12px rgba(42,86,214,.35)} /* Signup gate modal */ .gate{position:fixed;inset:0;z-index:120;background:rgba(12,20,38,.55);backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center;padding:0} .gate.is-open{display:flex} .gate[hidden]{display:none!important} .gate-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(12,20,38,.3);padding:26px 20px calc(26px + env(safe-area-inset-bottom));width:100%;max-width:520px} .gate-card h2{margin:0 0 8px;padding-right:34px} .gate-close{position:absolute;top:12px;right:12px;width:38px;height:38px;padding:0;background:var(--bg-2)!important;color:var(--ink)!important;border-radius:50%;box-shadow:none;font-size:1rem} @media(min-width:640px){ .gate{align-items:center;padding:20px} .gate-card{border-radius:20px} } @media(min-width:960px){ .gen-grid{grid-template-columns:1fr 1fr;gap:26px} .gen-preview-wrap{position:sticky;top:88px} } /* Desktop preview scale: keep the invoice readable in the sticky pane */ @media(min-width:1200px){.gen-grid{grid-template-columns:1.05fr .95fr}} /* Print: show only the invoice preview */ @media print{ .top,.breadcrumbs,.gen-hero,.gen-form,.gen-actions,.gen-privacy,.landing-sections,footer,.gate,.cookie-banner,.theme-toggle,.nav-toggle,.sr-live,.skip-link,.flash,.template-bar,.doc-controls,.autosave-note{display:none!important} .wrap{max-width:none;margin:0;padding:0} .gen-grid{display:block} .gen-preview-wrap{position:static;gap:0} #invPreview{box-shadow:none;border:0;margin:0;padding:0} .doc,.doc[class*="doc-tmpl-"]{box-shadow:none!important;border:0!important;padding:0!important} @page{margin:14mm} } /* ===== V19: advanced builder, doc types, modes, template gallery ===== */ .doc-controls{background:linear-gradient(180deg,var(--bg-2),var(--card))} .mode-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mode-switch .btn.is-active{background:var(--brand);color:#fff} .mode-hint{flex-basis:100%;font-size:.85rem} label.check{display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer} label.check input{width:auto;margin:0} /* Simple mode hides advanced-only fields */ .mode-simple .adv-only{display:none!important} .mode-advanced .adv-only{display:block} .mode-advanced td.adv-only,.mode-advanced th.adv-only{display:table-cell} .line-head.adv-head{display:grid;grid-template-columns:2fr .7fr 1fr 1fr .4fr;gap:8px} .mode-simple .line-head.adv-head{grid-template-columns:2fr .7fr 1fr 1fr .4fr} .mode-simple .line-item{grid-template-columns:2fr .7fr 1fr 1fr .4fr} .mode-advanced .line-item{grid-template-columns:2fr .6fr .9fr .7fr 1fr .4fr} .line-item .li-tax{display:none} .mode-advanced .line-item .li-tax{display:block} /* Template chips */ .template-bar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin} .tmpl-chip{flex:0 0 auto;padding:6px 12px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;font-size:.85rem;cursor:pointer} .tmpl-chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand)} /* Document extras */ .doc-notice{margin-top:14px;padding:10px 12px;background:var(--bg-2);border-left:3px solid var(--brand);border-radius:8px;font-size:.9rem} .doc-warn{margin-top:12px;padding:10px 12px;background:#fff4e5;border-left:3px solid #d98324;border-radius:8px;color:#7a4a12;font-size:.9rem} [data-theme="dark"] .doc-warn{background:#3a2a12;color:#f0c98a} .doc-sign{display:flex;justify-content:flex-end;gap:12px;align-items:flex-end;margin-top:34px} .doc-sign .sign-line{display:inline-block;width:200px;border-bottom:1px solid var(--ink);height:1px} .doc-foot{margin-top:16px;font-size:.8rem} /* 12 templates: accent + header treatment on the .doc preview */ .doc-tmpl-modern{--t:#102449} .doc-tmpl-clean{--t:#1f6feb} .doc-tmpl-minimal{--t:#111} .doc-tmpl-corporate{--t:#0b3d2e} .doc-tmpl-blue{--t:#1350a8} .doc-tmpl-elegant{--t:#6b4a8a} .doc-tmpl-creative{--t:#c2410c} .doc-tmpl-construction{--t:#b45309} .doc-tmpl-cleaning{--t:#0891b2} .doc-tmpl-consulting{--t:#334155} .doc-tmpl-healthcare{--t:#0e7490} .doc-tmpl-mono{--t:#000} .doc[class*="doc-tmpl-"] h1{color:var(--t)} .doc[class*="doc-tmpl-"] .doc-brandname{color:var(--t)} .doc[class*="doc-tmpl-"] .totals .grand{border-top:2px solid var(--t)} .doc[class*="doc-tmpl-"] table thead th{border-bottom:2px solid var(--t)} .doc-tmpl-minimal table thead th,.doc-tmpl-mono table thead th{border-bottom:1px solid #000} .doc-tmpl-creative .doc-head,.doc-tmpl-construction .doc-head,.doc-tmpl-cleaning .doc-head{padding:14px;border-radius:10px;background:color-mix(in srgb,var(--t) 8%,transparent)} .doc-tmpl-mono *{color:#000!important} .doc-tmpl-mono table thead th{background:#000;color:#fff!important} .doc-page .doc-fields{margin:0 0 12px 1.1em} .doc-page .doc-fields li{margin:4px 0} .doc-page .faq details{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0;background:var(--card)} .doc-page .faq summary{cursor:pointer;font-weight:600} .doc-page .faq p{margin:8px 0 0;color:var(--muted)} .sibling{display:flex;flex-direction:column;gap:6px;text-decoration:none} .sibling strong{color:var(--brand)} .sibling span{color:var(--muted);font-size:.9rem} .template-grid .template-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;align-items:flex-start} .template-thumb{display:inline-flex;width:44px;height:44px;border-radius:10px;background:var(--brand);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem} /* ===== V20: premium builder polish + live preview ===== */ .autosave-note{display:flex;align-items:center;gap:10px;justify-content:space-between} .link-btn{background:none!important;border:0!important;box-shadow:none!important;color:var(--accent-strong)!important;text-decoration:underline;padding:0!important;font-weight:600;cursor:pointer;width:auto!important} /* Builder: give the two panes a clear premium relationship */ .gen-grid{gap:28px} .gen-form .field-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:0} .gen-form .field-card h2{font-size:1.02rem;margin:0 0 14px;letter-spacing:-.01em} .gen-form{display:flex;flex-direction:column;gap:18px} /* Preview pane: make the invoice look like real paper on a desk */ .gen-preview-wrap{background:linear-gradient(160deg,var(--bg-2),var(--bg));border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;box-shadow:inset 0 1px 3px rgba(16,32,63,.05)} #invPreview.doc,.gen-preview-wrap .doc{box-shadow:0 10px 40px rgba(16,32,63,.16),0 2px 8px rgba(16,32,63,.08);border:1px solid var(--line);background:#fff;max-width:100%;width:100%;margin:0 auto;overflow-wrap:anywhere} .gen-preview-wrap .doc{padding:clamp(18px,3vw,32px)} [data-theme="dark"] .gen-preview-wrap .doc{background:#fff;color:#111} [data-theme="dark"] .gen-preview-wrap .doc *{color:inherit} .gen-actions{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .gen-actions #genDownload{box-shadow:0 6px 18px rgba(42,86,214,.32)} /* Live-preview label chip so users notice it updates */ .live-badge{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-strong);background:var(--accent-soft);padding:5px 10px;border-radius:999px;margin-bottom:10px} .live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(10,122,82,.5);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(10,122,82,.45)}70%{box-shadow:0 0 0 7px rgba(10,122,82,0)}100%{box-shadow:0 0 0 0 rgba(10,122,82,0)}} @media (prefers-reduced-motion:reduce){.live-badge::before{animation:none}} /* Document paper detail */ .doc .doc-head{display:flex;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:1px solid #eef1f7;margin-bottom:18px} .doc .doc-head h1{font-size:1.7rem;letter-spacing:.02em;margin:.2em 0 .1em} .doc .doc-brandname{font-weight:800;font-size:1.05rem} .doc .doc-logo{max-height:64px;max-width:200px;margin-bottom:8px;object-fit:contain} .doc table{width:100%;border-collapse:collapse;margin:8px 0} .doc table th{text-align:left;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#647089;padding:8px 10px} .doc table td{padding:10px;border-top:1px solid #eef1f7;font-size:.92rem;color:#111c30} .doc .totals{margin-top:16px;margin-left:auto;max-width:320px} .doc .totals>div{display:flex;justify-content:space-between;padding:6px 0;font-size:.92rem;color:#33425c} .doc .totals .grand{font-weight:800;font-size:1.08rem;color:#111c30;padding-top:12px;margin-top:6px} .doc h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:#647089;margin:18px 0 4px} /* Template chips: premium pill row */ .template-bar{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow);margin-bottom:12px} .tmpl-chip{border:1px solid transparent;background:transparent} .tmpl-chip:hover{background:var(--bg-2)} /* Share menu */ .share-menu{display:flex;flex-wrap:wrap;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);margin-bottom:12px} .share-opt{flex:1 1 auto;text-align:center;min-width:90px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--ink)!important;font-weight:600;font-size:.88rem;cursor:pointer;text-decoration:none;box-shadow:none} .share-opt:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))} /* ============================================================ V24 — MOBILE-FIRST OVERHAUL (this block intentionally last so it wins) ============================================================ */ /* Buttons: text must ALWAYS be visible. Active/selected states win over the earlier !important colour rules by using higher specificity. */ .btn.is-active,button.is-active,.btn.secondary.is-active,button.secondary.is-active{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important} .tmpl-chip{background:transparent;border:1px solid transparent} .tmpl-chip.is-active{background:var(--brand)!important;color:#fff!important} /* Any button on a brand background keeps white text */ .gen-actions .btn{color:var(--accent-ink)!important} .gen-actions .btn.secondary{color:var(--accent-strong)!important;background:var(--card)!important} .share-opt{color:var(--ink)!important;background:var(--bg-2)!important} /* Always-advanced: no hidden fields */ .mode-simple .adv-only,.adv-only{display:block!important} label.check.adv-only,.adv-only label.check{display:flex!important} td.adv-only,th.adv-only{display:table-cell!important} .line-item .li-tax{display:block!important} /* ---------- Document: compact so nothing is cut off ---------- */ .gen-preview-wrap .doc{padding:20px;font-size:.9rem} .doc .doc-head{gap:16px} .doc .doc-head h1{font-size:1.35rem} .doc table{table-layout:fixed;width:100%} .doc table th,.doc table td{padding:7px 8px;font-size:.84rem;word-break:break-word} .doc table th:first-child,.doc table td:first-child{width:44%} .doc table th:nth-child(2),.doc table td:nth-child(2){width:14%;text-align:right} .doc table th:nth-child(3),.doc table td:nth-child(3){width:21%;text-align:right} .doc table th:nth-child(4),.doc table td:nth-child(4){width:21%;text-align:right} .doc .totals{max-width:280px} .doc .totals>div{font-size:.86rem} /* ---------- MOBILE ---------- */ @media(max-width:820px){ /* Invoice stays put at the top; the form scrolls underneath it. */ .gen-grid{display:flex;flex-direction:column-reverse;gap:14px} .gen-preview-wrap{position:sticky;top:0;z-index:30;padding:10px;border-radius:0 0 var(--radius) var(--radius); background:var(--bg);border:0;border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(16,32,63,.10)} .gen-preview-wrap .doc{max-height:38vh;overflow:auto;padding:14px;font-size:.82rem;-webkit-overflow-scrolling:touch} .doc .doc-head{flex-direction:column;gap:8px;padding-bottom:12px;margin-bottom:12px} .doc .doc-head h1{font-size:1.15rem} .doc table th,.doc table td{padding:6px;font-size:.76rem} .doc .totals{max-width:100%} .live-badge{font-size:.65rem;padding:3px 8px;margin-bottom:6px} /* Actions: full-width, tappable, always readable */ .gen-actions{margin-bottom:8px;padding:8px;gap:6px} .gen-actions .btn{flex:1 1 auto;min-height:44px;font-size:.9rem} .gen-actions #genUses{flex-basis:100%;text-align:center;font-size:.78rem} .template-bar{padding:4px;margin-bottom:8px} .tmpl-chip{min-height:38px;font-size:.8rem;padding:6px 12px} .share-menu{padding:8px;gap:6px} .share-opt{min-height:44px;display:flex;align-items:center;justify-content:center;flex:1 1 45%} /* Line items become stacked cards with visible labels */ .line-head,.line-head.adv-head{display:none} .line-item{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;margin-bottom:10px;position:relative} .line-item .li-desc{grid-column:1/-1} .line-item input{min-height:44px;width:100%} .line-item .li-qty::placeholder,.line-item .li-price::placeholder{color:var(--muted)} .line-item .li-total{grid-column:1/-1;text-align:right;font-weight:700;padding-top:4px;border-top:1px dashed var(--line)} .line-item .li-remove{position:absolute;top:6px;right:6px;width:32px;height:32px;min-height:32px;border-radius:50%; background:var(--card)!important;color:var(--danger)!important;border:1px solid var(--line);padding:0;display:flex;align-items:center;justify-content:center} /* Floating labels so each field is identifiable without a header row */ .line-item .li-desc::before{content:"Description"} .line-item::after{content:"Qty · Unit price";position:absolute;left:12px;bottom:44px;font-size:.68rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;pointer-events:none;opacity:.85} /* Form fields: one column, big tap targets */ .form-grid{grid-template-columns:1fr!important;gap:12px} .form-grid .full{grid-column:1/-1} .gen-form .field-card{padding:14px} .gen-form input,.gen-form select,.gen-form textarea{min-height:44px;font-size:16px} /* 16px stops iOS zoom */ .gen-form label{font-size:.86rem;margin-bottom:4px;display:block} .gen-form h2{font-size:.98rem} /* Logo upload made obvious on mobile */ .logo-field{background:var(--accent-soft);border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:var(--radius-sm);padding:12px} .logo-field input[type=file]{font-size:.85rem} /* Tables anywhere (comparison table) scroll instead of clipping */ .mobile-table,.landing-sections table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .landing-sections table{min-width:520px} .compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Footer: readable dense link list */ .footer-grid{grid-template-columns:1fr 1fr;gap:16px} .footer-grid a{font-size:.78rem;margin-bottom:5px} } @media(max-width:420px){ .gen-preview-wrap .doc{max-height:32vh;font-size:.78rem} .line-item{grid-template-columns:1fr!important} .line-item::after{display:none} .footer-grid{grid-template-columns:1fr} .share-opt{flex:1 1 100%} } /* ---- V24 fix: flex/grid children must be allowed to shrink on mobile ---- */ .gen-grid,.gen-form,.gen-preview-wrap{min-width:0} .gen-grid>*{min-width:0;max-width:100%} .gen-preview-wrap,.gen-form{width:100%;max-width:100%;box-sizing:border-box} .gen-preview-wrap>*{min-width:0;max-width:100%;box-sizing:border-box} .template-bar{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;white-space:nowrap;display:flex;flex-wrap:nowrap} .template-bar .tmpl-chip{flex:0 0 auto} .gen-actions,.share-menu{max-width:100%;box-sizing:border-box;flex-wrap:wrap} #invPreview,.gen-preview-wrap .doc{max-width:100%;box-sizing:border-box;overflow-x:auto} .doc table{table-layout:fixed;width:100%;max-width:100%} .doc .mobile-table{max-width:100%;overflow-x:auto} .doc-head{flex-wrap:wrap;min-width:0} .doc-head>*{min-width:0;max-width:100%;overflow-wrap:anywhere} /* ---- V25: actions bar sits AFTER the form (bottom), not above the invoice ---- */ .gen-actions-bar{min-width:0;max-width:100%} .gen-actions-bar .gen-actions{margin-bottom:10px} /* Desktop: full-width action bar under both columns */ @media(min-width:821px){ .gen-grid{grid-template-areas:"form preview" "actions actions"} .gen-form{grid-area:form} .gen-preview-wrap{grid-area:preview} .gen-actions-bar{grid-area:actions} .gen-actions{justify-content:flex-start} } /* Mobile: invoice sticky at top, form scrolls, actions LAST */ @media(max-width:820px){ .gen-grid{display:flex;flex-direction:column;gap:14px} .gen-preview-wrap{order:1} .gen-form{order:2} .gen-actions-bar{order:3} /* keep the action bar reachable while scrolling the long form */ .gen-actions-bar{position:sticky;bottom:0;z-index:35;background:var(--bg); padding:10px 0 8px;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(16,32,63,.10)} .gen-actions-bar .gen-actions{margin-bottom:0} .gen-actions-bar .share-menu{margin-top:8px;margin-bottom:0} } /* ============================================================ V26 — mobile: unfreeze actions, show every invoice value ============================================================ */ @media(max-width:820px){ /* 4. Actions are NO LONGER sticky/frozen — they sit after the form so typing is unobstructed */ .gen-actions-bar{position:static!important;bottom:auto!important;z-index:auto!important; box-shadow:none!important;border-top:0!important;background:transparent!important;padding:0!important;margin-top:4px} .gen-actions-bar .gen-actions{margin-bottom:10px} /* Preview stays pinned but takes less height so there is room to type */ .gen-preview-wrap{max-height:46vh;overflow:hidden} .gen-preview-wrap .doc{max-height:30vh} .gen-privacy{font-size:.76rem;margin:6px 0 0;line-height:1.35} /* 5. Invoice table stacks so DESCRIPTION, QTY, UNIT PRICE and AMOUNT are ALL visible */ .doc .mobile-table{overflow:visible} .doc table,.doc thead,.doc tbody,.doc tr,.doc td{display:block;width:100%} .doc thead{display:none} .doc tbody tr{border:1px solid #eef1f7;border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fbfcfe} .doc tbody td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:10px; font-size:.8rem;text-align:right;width:100%} .doc tbody td::before{content:attr(data-label);font-weight:600;color:#647089;text-align:left; font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto} .doc tbody td:first-child{font-weight:600;text-align:right} .doc tbody td[data-label]:last-child{border-top:1px dashed #e5e9f2;margin-top:4px;padding-top:6px;font-weight:700} .doc .totals{max-width:100%;margin-top:10px} .doc .totals>div{font-size:.84rem} } /* V26b: preview needs more height now rows stack; keep internal scroll */ @media(max-width:820px){ .gen-preview-wrap{max-height:56vh} .gen-preview-wrap .doc{max-height:40vh} } /* V26c: stacked rows must ignore the desktop fixed column widths */ @media(max-width:820px){ .doc table{table-layout:auto!important} .doc tbody td, .doc table td:first-child, .doc table td:nth-child(2), .doc table td:nth-child(3), .doc table td:nth-child(4){width:100%!important;max-width:100%!important;text-align:right} .doc tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:4px 0;font-size:.82rem;overflow-wrap:anywhere} .doc tbody td::before{flex:0 0 auto;max-width:46%;white-space:normal} .doc tbody td:first-child{font-weight:600} } /* ============================================================ V27 — share fix, labelled line fields, full-screen preview ============================================================ */ /* Share menu: the hidden attribute must beat display:flex (this was the "Share does nothing" bug) */ .share-menu[hidden]{display:none!important} .share-menu{display:none} .share-menu.is-open{display:flex} /* Line item fields now carry their own label */ .li-f{display:flex;flex-direction:column;gap:4px;min-width:0} .li-f>span{display:none;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700} .li-f input{width:100%} /* Full-screen preview */ .preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .preview-head .live-badge{margin-bottom:0} #previewExpand{display:none} .preview-close{display:none} body.doc-fs .gen-preview-wrap{position:fixed!important;inset:0;z-index:200;max-height:none!important; height:100dvh;background:var(--bg);padding:14px;overflow:auto;border-radius:0} body.doc-fs .gen-preview-wrap .doc{max-height:none!important;overflow:visible;max-width:760px;margin:0 auto} body.doc-fs .preview-close{display:inline-flex;align-items:center;gap:6px;margin:0 auto 12px; background:var(--card);color:var(--ink)!important;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600} body.doc-fs{overflow:hidden} body.doc-fs .preview-head{position:sticky;top:0;background:var(--bg);padding-bottom:8px;z-index:2} @media(max-width:820px){ /* Labels visible so Qty / Unit price / Tax are never mistaken for duplicate boxes */ .li-f>span{display:block} .line-item{grid-template-columns:1fr 1fr!important;gap:10px} .line-item .li-f-desc{grid-column:1/-1} .line-item::after{display:none!important} #previewExpand{display:inline-flex} /* Compact peek panel; the real view is full screen */ .gen-preview-wrap{max-height:none;overflow:visible} .gen-preview-wrap .doc{max-height:34vh;overflow:hidden;position:relative} .gen-preview-wrap .doc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none} body.doc-fs .gen-preview-wrap .doc::after{display:none} } /* ============================================================ V28 — invoice always renders as white paper; mobile shows it whole ============================================================ */ /* 3) THEME FIX: a document is printed paper, so it stays light in every theme. Every colour below is a fixed value so no dark-theme variable can bleed in. */ .gen-preview-wrap .doc, [data-theme="dark"] .gen-preview-wrap .doc{background:#ffffff!important;color:#111c30!important} [data-theme="dark"] .gen-preview-wrap .doc *{color:#111c30!important;border-color:#e8ecf4!important} [data-theme="dark"] .gen-preview-wrap .doc .muted, [data-theme="dark"] .gen-preview-wrap .doc table th, [data-theme="dark"] .gen-preview-wrap .doc .totals>div{color:#5b6982!important} [data-theme="dark"] .gen-preview-wrap .doc h1, [data-theme="dark"] .gen-preview-wrap .doc .doc-brandname, [data-theme="dark"] .gen-preview-wrap .doc .totals .grand{color:#102449!important} [data-theme="dark"] .gen-preview-wrap .doc table, [data-theme="dark"] .gen-preview-wrap .doc thead, [data-theme="dark"] .gen-preview-wrap .doc tbody, [data-theme="dark"] .gen-preview-wrap .doc tr, [data-theme="dark"] .gen-preview-wrap .doc td, [data-theme="dark"] .gen-preview-wrap .doc th, [data-theme="dark"] .gen-preview-wrap .doc .mobile-table{background:transparent!important} [data-theme="dark"] .gen-preview-wrap .doc thead th{background:#f4f7fc!important} [data-theme="dark"] .gen-preview-wrap .doc tbody tr{background:#ffffff!important} /* keep the paper legible against a dark page */ [data-theme="dark"] .gen-preview-wrap{background:#0f1626} /* 1) MOBILE: show the WHOLE invoice, scaled down, without needing full screen */ @media(max-width:820px){ .gen-preview-wrap .doc{ zoom:.56; /* shrinks layout so the entire document fits */ max-height:none!important; overflow:visible!important; padding:22px; font-size:.95rem; } .gen-preview-wrap .doc::after{display:none!important} /* no fade: nothing is cut off */ /* Safety cap: only very long documents scroll, and only inside the panel */ .gen-preview-wrap{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch} /* Full screen restores true size */ body.doc-fs .gen-preview-wrap{max-height:none!important;overflow:auto} body.doc-fs .gen-preview-wrap .doc{zoom:1!important;padding:20px} /* At small scale, the stacked-row layout is unnecessary: keep the real table */ .doc table{table-layout:auto!important} .doc thead{display:table-header-group!important} .doc table,.doc tbody,.doc tr{display:table!important;width:100%!important} .doc tbody{display:table-row-group!important} .doc tr{display:table-row!important} .doc td,.doc th{display:table-cell!important;width:auto!important;max-width:none!important; text-align:left;padding:8px 6px;font-size:.92rem} .doc td::before{display:none!important} .doc td:nth-child(2),.doc th:nth-child(2), .doc td:nth-child(3),.doc th:nth-child(3), .doc td:nth-child(4),.doc th:nth-child(4){text-align:right} .doc tbody tr{border:0!important;border-radius:0!important;padding:0!important;margin:0!important;background:transparent!important} .doc tbody td{border-top:1px solid #eef1f7!important;display:table-cell!important} .doc .totals{max-width:300px;margin-left:auto} } /* V28b: at reduced scale the table needs fixed columns and non-wrapping headers */ @media(max-width:820px){ .doc table{table-layout:fixed!important} .doc th{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis} .doc th:first-child,.doc td:first-child{width:46%!important;text-align:left} .doc th:nth-child(2),.doc td:nth-child(2){width:10%!important} .doc th:nth-child(3),.doc td:nth-child(3){width:22%!important} .doc th:nth-child(4),.doc td:nth-child(4){width:22%!important} .doc td{overflow-wrap:anywhere} } /* ============================================================ V30 — accessibility, backup controls, undo, empty states ============================================================ */ /* ACCESSIBILITY: a visible, high-contrast focus ring on every interactive element. Focus must never be invisible - that is what blocks keyboard and assistive-tech users. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,label.file-btn:focus-within{ outline:3px solid var(--accent);outline-offset:2px;border-radius:6px} .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#fff!important; padding:12px 18px;border-radius:0 0 10px 0;font-weight:700} .skip-link:focus{left:0} /* Never remove focus outlines for mouse users without a replacement */ :focus{outline-color:var(--accent)} @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} @media (prefers-contrast:more){ .muted{color:#3b4761!important} .doc table th{color:#3b4761!important} } /* Backup controls */ .backup-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card); border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px} .file-btn{position:relative;overflow:hidden;cursor:pointer;display:inline-flex;align-items:center} .file-btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .shortcut-help{flex-basis:100%;margin:6px 0 0;font-size:.82rem;line-height:1.45} /* Undo toast */ .undo-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:250; display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:12px 18px; border-radius:999px;box-shadow:var(--shadow-lg);transition:transform .22s ease;font-size:.9rem} .undo-bar.is-open{transform:translate(-50%,0)} .undo-bar .link-btn{color:#8fb4ff!important} /* Empty-state guidance inside the document */ .doc .empty-hint{color:#7b879e;font-style:normal} /* Skeleton shimmer while the PDF engine loads */ .skeleton{position:relative;overflow:hidden;background:var(--bg-2);border-radius:8px;min-height:14px} .skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.4s infinite} @keyframes shimmer{100%{transform:translateX(100%)}} @media(max-width:820px){ .backup-bar{padding:8px} .backup-bar .btn{flex:1 1 auto;min-height:44px} .undo-bar{left:12px;right:12px;transform:translateY(140%);border-radius:14px;justify-content:space-between} .undo-bar.is-open{transform:translateY(0)} } /* ============================================================ V31 — tablet breakpoint, share groups, logo controls ============================================================ */ /* Share menu grouped by what actually happens */ .share-menu{flex-direction:column;gap:14px} .share-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .share-label{flex-basis:100%;font-size:.72rem;font-weight:800;letter-spacing:.05em; text-transform:uppercase;color:var(--muted)} .share-note{flex-basis:100%;margin:2px 0 0;font-size:.78rem;line-height:1.4} .share-opt.primary-opt{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)} /* Logo thumbnail + remove */ .logo-row{display:flex;align-items:center;gap:10px;margin:8px 0 4px;flex-wrap:wrap} #logoThumb{max-height:48px;max-width:150px;object-fit:contain;background:#fff; border:1px solid var(--line);border-radius:8px;padding:4px} /* ---------- TABLET / iPad: 821px to 1024px ---------- iPad Air and Pro in portrait land here. Previously they fell into the desktop two-column grid on a narrow screen, which squeezed the document badly. */ @media(min-width:821px) and (max-width:1024px){ .gen-grid{display:flex!important;flex-direction:column!important;gap:16px} .gen-form{order:2;width:100%} .gen-preview-wrap{order:1;width:100%;position:sticky;top:0;z-index:30; max-height:52vh;overflow:auto;background:var(--bg); border-radius:0 0 var(--radius) var(--radius);border-bottom:1px solid var(--line)} .gen-preview-wrap .doc{zoom:.72;max-height:none;overflow:visible} body.doc-fs .gen-preview-wrap{max-height:none} body.doc-fs .gen-preview-wrap .doc{zoom:1} .gen-actions-bar{order:3;width:100%} #previewExpand{display:inline-flex} .form-grid{grid-template-columns:1fr 1fr} .form-grid .full{grid-column:1/-1} /* Touch targets: iPad is a touch device even at desktop widths */ .gen-form input,.gen-form select,.gen-form textarea{min-height:44px;font-size:16px} .btn,.share-opt,.tmpl-chip{min-height:44px} .gen-actions{flex-wrap:wrap} .gen-actions .btn{flex:1 1 auto} .share-opt{flex:1 1 30%} .line-item{grid-template-columns:1fr 1fr!important;gap:10px} .line-item .li-f-desc{grid-column:1/-1} .li-f>span{display:block} .footer-grid{grid-template-columns:1fr 1fr 1fr} } /* Any coarse-pointer device gets touch-sized controls regardless of width */ @media (pointer:coarse){ .btn,.share-opt,.tmpl-chip,.li-remove{min-height:44px} .gen-form input,.gen-form select,.gen-form textarea{font-size:16px} } /* Offscreen raster clone: force full desktop-style document layout regardless of device */ .doc-raster{zoom:1!important;transform:none!important;max-height:none!important;overflow:visible!important; width:820px!important;max-width:820px!important;background:#fff!important;color:#111c30!important; font-size:14px!important;box-shadow:none!important;border:0!important} .doc-raster *{zoom:1!important;max-height:none!important;overflow:visible!important;color:#111c30!important} .doc-raster table{table-layout:fixed!important;width:100%!important;display:table!important;border-collapse:collapse!important} .doc-raster thead{display:table-header-group!important} .doc-raster tbody{display:table-row-group!important} .doc-raster tr{display:table-row!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important} .doc-raster th,.doc-raster td{display:table-cell!important;width:auto!important;max-width:none!important; padding:9px 8px!important;font-size:13px!important;text-align:left!important;border:0!important; border-top:1px solid #eef1f7!important} .doc-raster td::before{display:none!important} .doc-raster th:first-child,.doc-raster td:first-child{width:46%!important} .doc-raster th:nth-child(2),.doc-raster td:nth-child(2), .doc-raster th:nth-child(3),.doc-raster td:nth-child(3), .doc-raster th:nth-child(4),.doc-raster td:nth-child(4){text-align:right!important} .doc-raster thead th{background:#f4f7fc!important;color:#5b6982!important;font-size:11px!important; text-transform:uppercase!important;letter-spacing:.05em!important;border-top:0!important} .doc-raster .doc-head{display:flex!important;flex-direction:row!important;justify-content:space-between!important; gap:28px!important;align-items:flex-start!important;padding-bottom:18px!important;margin-bottom:18px!important; border-bottom:1px solid #eef1f7!important} .doc-raster .doc-head h1{font-size:30px!important;margin:4px 0 2px!important} .doc-raster .doc-brandname{font-size:17px!important} .doc-raster .doc-head::after{display:none!important} .doc-raster .totals{max-width:320px!important;margin-left:auto!important;margin-top:18px!important} .doc-raster .totals>div{display:flex!important;justify-content:space-between!important;padding:7px 0!important;font-size:13px!important} .doc-raster .totals .grand{font-size:17px!important;font-weight:800!important;border-top:2px solid #102449!important;padding-top:12px!important} .doc-raster .doc-logo{max-height:70px!important;max-width:220px!important} .doc-raster::after{display:none!important} /* ============================================================ V33 — share menu must sit above the sticky preview, and buttons are smaller ============================================================ */ /* The sticky preview column (z-index 30) was covering the actions and share menu. The action area now sits above it and is width-constrained so it cannot run underneath the preview column. */ .gen-actions-bar{position:relative;z-index:60} .gen-actions,.share-menu{position:relative;z-index:61;background:var(--card)} /* Smaller, tidier controls: eight competing buttons was too many */ .gen-actions{gap:6px;padding:10px} .gen-actions .btn{font-size:.85rem;padding:9px 14px} .gen-actions .btn.small{font-size:.8rem;padding:8px 12px} #genUses{font-size:.8rem;margin-left:auto} .share-menu{padding:12px;gap:10px} .share-opt{font-size:.83rem;padding:8px 12px;min-width:0} .share-group{gap:6px} .share-label{font-size:.68rem;margin-bottom:2px} .share-note{font-size:.75rem} /* Desktop: keep the action area in the left column's track so nothing overlaps */ @media(min-width:1025px){ .gen-actions-bar{grid-area:actions;max-width:100%} .gen-actions{flex-wrap:wrap} .share-menu{max-width:720px} .share-group .share-opt{flex:0 1 auto} } @media(max-width:820px){ .gen-actions .btn{flex:1 1 30%;min-height:44px;font-size:.82rem;padding:8px 10px} #genUses{flex-basis:100%;text-align:center;margin-left:0} .share-opt{flex:1 1 46%;min-height:44px} } /* ============================================================ V41 — PREMIUM PASS The old look failed because everything was the same card, the same radius, the same shadow, in even grids. Premium design varies rhythm: a real type scale, restrained surfaces, one confident accent, and generous space. ============================================================ */ :root{ --ink-1:#0b1220; /* headings */ --ink-2:#39445c; /* body */ --ink-3:#6b7690; /* meta */ --rule:#e8ecf3; --surface:#ffffff; --surface-2:#f7f9fc; --accent-ink:#ffffff; --shadow-sm:0 1px 2px rgba(11,18,32,.04); --shadow-md:0 2px 4px rgba(11,18,32,.04),0 8px 24px rgba(11,18,32,.06); } /* ---- Typography: a real scale, not one size for everything ---- */ h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.15rem);line-height:1.06;letter-spacing:-.03em; font-weight:800;color:var(--ink-1);margin:0 0 .5em;max-width:20ch} h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.85rem);line-height:1.18;letter-spacing:-.02em; font-weight:750;color:var(--ink-1);margin:2.4em 0 .6em;max-width:26ch} h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-1);margin:1.8em 0 .4em} p{color:var(--ink-2);line-height:1.62;max-width:68ch} .answer-block{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.6;color:var(--ink-2); max-width:64ch;margin-bottom:1.6em} .muted{color:var(--ink-3)} .eyebrow{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-strong);background:none;padding:0;margin-bottom:1em} /* ---- Fewer boxes. Content sits on the page; only tools get a surface. ---- */ .landing-sections .card{background:none;border:0;box-shadow:none;padding:0} .landing-sections .grid,.landing-sections .feature-list{gap:34px 40px} .feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .feature-list .card h3{margin-top:0;padding-top:14px;border-top:2px solid var(--ink-1)} .feature-list .card p{font-size:.94rem;color:var(--ink-3);margin:0} /* Trust band: numerals as the hero, hairline rules, no boxes */ .trust-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0; border-top:1px solid var(--rule);margin-top:1.5em} .trust-band .card{border-right:1px solid var(--rule);padding:26px 24px 26px 0;background:none; border-radius:0;box-shadow:none} .trust-band .card:last-child{border-right:0} .trust-band strong{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.03em; color:var(--ink-1);margin-bottom:.2em} .trust-band span{color:var(--ink-3);font-size:.88rem;line-height:1.45} /* Related links: editorial rows, not tiles */ .sibling{background:none!important;border:0!important;box-shadow:none!important; border-top:1px solid var(--rule)!important;border-radius:0!important;padding:18px 0!important} .sibling strong{font-size:1.02rem;color:var(--ink-1)!important} .sibling span{color:var(--ink-3)!important} .sibling:hover strong{color:var(--accent-strong)!important} /* Numbered lists as a designed element */ .gen-steps{counter-reset:s;list-style:none;padding:0;background:none;border:0;box-shadow:none} .gen-steps li{counter-increment:s;position:relative;padding:16px 0 16px 52px; border-top:1px solid var(--rule);color:var(--ink-2)} .gen-steps li::before{content:counter(s);position:absolute;left:0;top:14px;width:30px;height:30px; border-radius:50%;background:var(--ink-1);color:#fff;display:flex;align-items:center; justify-content:center;font-size:.82rem;font-weight:700} .doc-fields{list-style:none;padding:0;counter-reset:f} .doc-fields li{counter-increment:f;position:relative;padding:11px 0 11px 30px; border-top:1px solid var(--rule);color:var(--ink-2);font-size:.96rem} .doc-fields li::before{content:"";position:absolute;left:4px;top:20px;width:6px;height:6px; border-radius:50%;background:var(--accent)} /* FAQ: quiet until opened */ .faq details{background:none;border:0;border-top:1px solid var(--rule);border-radius:0; padding:0;margin:0} .faq summary{padding:20px 44px 20px 0;font-weight:650;font-size:1.02rem;color:var(--ink-1); position:relative;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:17px;font-size:1.4rem; font-weight:400;color:var(--ink-3);transition:transform .2s} .faq details[open] summary::after{content:"\2212"} .faq details[open] summary{color:var(--accent-strong)} .faq p{padding:0 0 22px;color:var(--ink-2);max-width:68ch} /* Buttons: quieter, more considered */ .btn{border-radius:10px;font-weight:650;letter-spacing:-.01em;box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease} .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn.secondary{background:var(--surface);border:1px solid var(--rule);box-shadow:none} /* Tool surfaces keep a card, but a restrained one */ .gen-form .field-card{background:var(--surface);border:1px solid var(--rule); border-radius:14px;box-shadow:var(--shadow-sm);padding:22px} .gen-form .field-card h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em; color:var(--ink-3);font-weight:800;margin:0 0 16px;max-width:none} .promise-card{border:1px solid var(--rule);border-left:3px solid var(--accent); background:var(--surface-2);padding:14px 18px;margin:0 0 22px;max-width:600px} .promise-card strong{color:var(--ink-1)} /* Generous section rhythm */ .landing-sections{margin-top:3.2em} .landing-sections + .landing-sections{margin-top:4em} footer{border-top:1px solid var(--rule);margin-top:5em;padding-top:3em} @media(max-width:820px){ h1{max-width:none} h2{margin:2em 0 .5em;max-width:none} .trust-band{grid-template-columns:1fr 1fr} .trust-band .card{padding:20px 16px 20px 0} .trust-band .card:nth-child(2n){border-right:0} .faq summary{font-size:.98rem;padding:17px 40px 17px 0} } /* V41b: FAQ must be flat (an earlier .doc-page rule was still painting cards) */ .doc-page .faq details,.faq details{background:none!important;border:0!important; border-top:1px solid var(--rule)!important;border-radius:0!important; padding:0!important;margin:0!important;box-shadow:none!important} .doc-page .faq p,.faq p{margin:0!important;padding:0 0 22px!important} .faq details:last-of-type{border-bottom:1px solid var(--rule)} /* Headings should not wrap mid-phrase on desktop */ @media(min-width:900px){ h2{max-width:none} .doc-page h2,.landing-sections h2{max-width:34ch} } /* Sibling rows: give the group a closing rule so it reads as a set */ .grid.three:has(.sibling){border-bottom:1px solid var(--rule)} .access-nav[data-state="loading"] .nav-signin, .access-nav[data-state="loading"] .access-account{display:none!important} /* Header access state */ .access-nav{display:inline-flex;align-items:center;gap:10px} .access-account{position:relative;display:inline-flex} .avatar-mini{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff!important; border:0;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center} .access-menu{position:absolute;right:0;top:44px;z-index:120;min-width:240px;display:flex;flex-direction:column;gap:6px; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow-lg)} .access-email{font-weight:700;color:var(--ink-1);word-break:break-all;font-size:.9rem} .access-note{color:var(--ink-3);font-size:.82rem} .access-menu .link-btn{align-self:flex-start} /* hidden attribute must beat the display rules above */ .access-account[hidden],.access-menu[hidden],#accessSignUp[hidden]{display:none!important} .access-nav[data-state="loading"] #accessSignUp, .access-nav[data-state="loading"] .access-account{display:none!important} @media(max-width:820px){ .access-menu{right:auto;left:0} } /* ---- Recently used documents panel ---- */ .history-panel{grid-column:1/-1;background:var(--card);border:1px solid var(--line); border-radius:var(--radius);margin-bottom:14px;overflow:hidden} .history-panel[hidden]{display:none!important} .history-panel summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700; font-size:.9rem;display:flex;align-items:center;justify-content:space-between;gap:8px} .history-panel summary::-webkit-details-marker{display:none} .history-panel summary::after{content:"\25BE";margin-left:auto;color:var(--muted);flex-shrink:0} .history-panel[open] summary::after{content:"\25B4"} .history-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line); max-height:260px;overflow-y:auto} .history-item{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;text-align:left;padding:11px 16px;border:0;border-bottom:1px solid var(--line); background:none;cursor:pointer;font:inherit;color:inherit;min-height:44px} .history-item:last-child{border-bottom:0} .history-item:hover,.history-item:focus-visible{background:var(--bg-2)} .history-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-size:.88rem} .history-meta{flex:0 0 auto;color:var(--muted);font-size:.82rem;font-weight:600} @media(max-width:820px){ .history-panel summary{font-size:.85rem;padding:11px 14px} .history-item{padding:10px 14px} .history-label{white-space:normal;word-break:break-word} } /* ============================================================ DIRECT EDITING: the document is the form ============================================================ */ .ed{display:inline-block;min-width:2ch;outline:0;border-radius:4px;padding:1px 3px;margin:-1px -3px; cursor:text;transition:background .12s ease,box-shadow .12s ease;max-width:100%; word-break:break-word;vertical-align:top} .ed:hover{background:rgba(37,99,235,.07);box-shadow:inset 0 0 0 1px rgba(37,99,235,.18)} .ed:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--accent,#2563eb);position:relative;z-index:2} /* Placeholder shown only when the field is genuinely empty */ .ed:empty::before{content:attr(data-ph);color:#9aa4b8;font-weight:400;pointer-events:none} .ed.ed-ml{display:block;min-height:1.2em;white-space:pre-wrap} .ed.ed-num{text-align:right;min-width:3ch} .ed.ed-rate{min-width:2.5ch;font-weight:700} .ed.ed-date{font-variant-numeric:tabular-nums} /* Add-line control, sitting inside the document like a real row */ .doc-addline{display:block;width:100%;padding:11px;margin:0 0 14px;border:1px dashed var(--line,#d8dee9); border-radius:8px;background:var(--bg-2,#f6f8fc);color:var(--accent,#2563eb);font-weight:650; cursor:pointer;font-size:.92rem;min-height:44px} .doc-addline:hover{background:#eef3fb;border-color:var(--accent,#2563eb)} /* Per-row remove, revealed on hover on desktop, always visible on touch */ .doc-items .col-act{width:34px;padding:0!important;text-align:center} .li-del{border:0;background:none;color:#9aa4b8;cursor:pointer;font-size:.95rem;line-height:1; padding:6px;border-radius:6px;opacity:0;transition:opacity .12s ease} .doc-items tr:hover .li-del,.li-del:focus-visible{opacity:1} .li-del:hover{color:#c0392b;background:rgba(192,57,43,.08)} /* Optional total rows fade until they carry a value, so the block stays calm */ .totals .opt-row{opacity:.55;transition:opacity .12s ease} .totals .opt-row:hover,.totals .opt-row:focus-within{opacity:1} /* Notes and payment side by side on desktop, stacked on mobile */ .doc-foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px} @media(max-width:820px){ /* Touch: editing must be comfortable, and iOS must not zoom on focus */ .ed{font-size:16px;padding:3px 5px;margin:-3px -5px;min-height:24px} .ed.ed-num{min-width:4ch} .li-del{opacity:1;padding:10px;min-width:34px;min-height:34px} .doc-foot-cols{grid-template-columns:1fr;gap:14px} .doc-addline{min-height:48px;font-size:.95rem} } /* The original form panels are the state store, not the interface. */ .legacy-fields{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Compact options panel, for controls with no place on a printed document */ .doc-options{grid-column:1/-1;background:var(--card,#fff);border:1px solid var(--line,#e5e9f2); border-radius:var(--radius,12px);margin-bottom:14px;overflow:hidden} .doc-options summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;font-size:.9rem} .doc-options summary::-webkit-details-marker{display:none} .doc-options summary::after{content:"\25BE";float:right;color:var(--muted,#6b7690)} .doc-options[open] summary::after{content:"\25B4"} .doc-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px; padding:0 16px 16px;border-top:1px solid var(--line,#e5e9f2)} .doc-options-grid .full{grid-column:1/-1} .doc-options-grid label{display:block;font-size:.82rem;font-weight:650;margin-bottom:5px} .doc-options-grid select,.doc-options-grid input[type=file]{width:100%;min-height:44px;font-size:16px} .doc-options-grid .check{display:flex;align-items:center;gap:9px;font-weight:500;min-height:44px} .doc-options-grid .check input{width:auto;min-height:auto} @media(max-width:820px){ .doc-options-grid{grid-template-columns:1fr} } /* ============================================================ DIRECT-EDIT LAYOUT The form is gone, so the document becomes the page. Controls sit above it in a slim bar; the document itself gets the full width and is centred. ============================================================ */ @media(min-width:1025px){ .gen-grid{grid-template-columns:1fr!important;max-width:960px;margin-inline:auto} .gen-preview-wrap{position:static!important;top:auto!important;max-height:none!important} /* Document type + options sit side by side above the document */ .gen-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .gen-form .doc-controls{margin-bottom:0} .doc-options{margin-bottom:0} /* Give the editable document real page width and drop the small-preview scale */ .gen-preview-wrap .doc{zoom:1!important;max-width:none} .gen-preview-wrap{max-width:none} } @media(min-width:1025px) and (max-width:1240px){ .gen-grid{max-width:100%} } /* The document is now the primary surface, so give it page-like presence */ .gen-preview-wrap .doc{background:#fff;box-shadow:0 1px 2px rgba(11,18,32,.05),0 12px 32px rgba(11,18,32,.08); border-radius:10px} @media(max-width:1024px){ .gen-form{display:block} } /* Direct-edit layout: override the old form/preview named grid areas. The form is no longer a column, it is a control bar above the document. */ @media(min-width:1025px){ .gen-grid{ grid-template-areas:"form" "preview" "actions"!important; grid-template-columns:minmax(0,1fr)!important; } .gen-form{grid-area:form!important;width:100%} .gen-preview-wrap{grid-area:preview!important;width:100%} .gen-actions-bar{grid-area:actions!important;width:100%} } /* ============================================================ MOBILE DIRECT EDITING The document is no longer a preview to glance at, it is the thing you type into. Shrinking it to 56% made text ~9px and impossible to edit. Instead render it at a readable size and let the document scroll horizontally inside its own pane. ============================================================ */ @media(max-width:820px){ .gen-preview-wrap{max-height:none!important;overflow:visible!important} /* V60: the inline document REFLOWS. WCAG 1.4.10 (AA) forbids two-dimensional scrolling at 320px except for parts that genuinely need a 2D layout. The text blocks here do not, so nothing scrolls sideways. The line-item table stacks via the rules further up, which were written for exactly this and were previously defeated by min-width:660px. */ .gen-preview-wrap .doc-scroll{overflow-x:visible;width:100%} .gen-preview-wrap .doc{ zoom:1!important; /* full size: text stays legible while editing */ min-width:0!important; /* reflow, do not force a page width */ width:100%;max-width:100%; padding:18px!important; font-size:13.5px; } /* Full screen is the print-accurate check: real layout, pinch-zoom, 2D scroll. This is the scoped exception, deliberately opt-in. */ body.doc-fs .gen-preview-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch} body.doc-fs .gen-preview-wrap .doc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} body.doc-fs .gen-preview-wrap .doc{min-width:660px!important;width:660px;max-width:none; padding:26px!important;font-size:13px} /* Editable targets stay comfortable for thumbs */ .gen-preview-wrap .ed{min-height:26px} .doc-items th,.doc-items td{padding:9px 7px!important;font-size:12.5px!important} } /* ========================================================================== V58 — mobile & cross-device hardening Appended deliberately so it overrides earlier rules without editing them. ========================================================================== */ /* 1. iOS zoom-on-focus. Safari zooms the viewport whenever a focused control renders below 16px. The generator form was already covered; the signup / contact forms and any loose controls were not. This closes the gap for every control on the site. */ @media (max-width:820px){ input,select,textarea, .form input,.form select,.form textarea{font-size:16px} } @media (pointer:coarse){ input,select,textarea, .form input,.form select,.form textarea{font-size:16px} } /* 2. Touch target floor. WCAG 2.5.8 asks for 24px minimum; Apple and Google both recommend 44px. Several small circular controls sat at 30-38px. */ @media (pointer:coarse){ .li-remove,.li-del,.gate-close,.avatar-mini,.tmpl-chip,.nav-toggle, .share-opt,.access-nav .btn{min-width:44px;min-height:44px} .li-remove,.li-del,.gate-close{display:grid;place-items:center} .form input,.form select,.form textarea{min-height:44px} label.check{min-height:44px;display:flex;align-items:center;gap:8px} label.check input{min-height:0;width:22px;height:22px} } /* 3. Small-phone safety (360px and below — Galaxy A-series, iPhone SE). Stops long unbroken strings (emails, invoice refs, URLs) forcing a horizontal scrollbar. */ @media (max-width:400px){ h1{font-size:1.55rem} h2{font-size:1.25rem} .gen-hero .eyebrow{font-size:.7rem;letter-spacing:.08em} body{font-size:.97rem} .doc,.field-card{padding-left:14px;padding-right:14px} } h1,h2,h3,p,td,th,li,label,summary{overflow-wrap:break-word} input,select,textarea{max-width:100%} /* 4. Landscape phones — a short viewport must not trap the preview pane. */ @media (max-height:520px) and (orientation:landscape){ .gen-preview-wrap{max-height:none} .gate-panel{max-height:92vh;overflow-y:auto} } /* 5. Notched devices — keep the sticky header and any fixed bar clear of the home indicator and the rounded corners. */ @supports (padding:max(0px)){ .top{padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right))} body{padding-bottom:env(safe-area-inset-bottom)} } /* 6. Tablet portrait (iPad 768-1024). The generator was collapsing to a single narrow column here despite ample width. */ @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){ .gen-grid{grid-template-columns:1fr;gap:22px} .gen-preview-wrap{position:static;max-height:none} } /* 7. Large screens — stop the text column growing unreadably wide. */ @media (min-width:1600px){ .landing-sections,.gen-hero{max-width:1240px;margin-left:auto;margin-right:auto} } /* ========================================================================== V59 — mobile wayfinding + dark-theme contrast ========================================================================== */ /* Smooth anchor jump, and stop the target hiding under the sticky header. */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} #docControls{scroll-margin-top:76px} /* --- Jump to controls ------------------------------------------------- The document stays first on mobile, so the controls sit below it. This pill gives a one-tap route to them instead of a long scroll. Desktop already shows the controls above the document, so it is hidden there. */ .jump-controls{display:none} @media(max-width:820px){ .jump-controls{ display:inline-flex;align-items:center;justify-content:center;gap:8px; width:100%;min-height:48px;margin:10px 0 2px; background:var(--accent);color:var(--accent-ink); border-radius:var(--radius-sm);font-weight:700;font-size:.95rem; text-decoration:none; box-shadow:0 1px 2px rgba(16,32,63,.12),0 6px 16px rgba(42,86,214,.22); } .jump-controls:hover,.jump-controls:focus{ background:var(--accent-strong);color:var(--accent-ink);text-decoration:none} } /* --- Dark theme corrections ------------------------------------------ Rules that hardcoded a light surface now follow the token, so they flip with the theme instead of staying white on a dark page. */ [data-theme="dark"] .gen-form .field-card{background:var(--surface);border-color:var(--rule)} [data-theme="dark"] .doc-options{background:var(--surface);border-color:var(--rule)} [data-theme="dark"] .feature-list .card h3{border-top-color:var(--ink-1)} [data-theme="dark"] .trust-band strong{color:var(--ink-1)} [data-theme="dark"] .sibling strong{color:var(--ink-1)!important} /* ========================================================================== V60 — mobile information architecture + dark-theme cascade fix ========================================================================== */ /* -------------------------------------------------------------------------- 2. DARK THEME — cascade fix The V41 premium pass added a SECOND :root block (line ~896) defining --ink-1/2/3, --rule, --surface, --surface-2, --accent-ink and the shadows. :root and [data-theme="dark"] have identical specificity (0,1,0), so the later :root won and the dark values never applied — --ink-1 stayed #0b1220, the same colour as the dark --bg, which is why every heading was invisible. This block fixes it twice over: it sits AFTER the :root block, and html[data-theme="dark"] is (0,1,1), which outranks :root regardless. -------------------------------------------------------------------------- */ html[data-theme="dark"]{ --ink-1:#f2f6fd; /* headings 17.28:1 on --bg */ --ink-2:#c9d4e8; /* body text 12.31:1 on --bg */ --ink-3:#9aa8c4; /* meta text 7.82:1 on --bg */ --rule:#26324a; --surface:#141d30; --surface-2:#0f1828; --accent-ink:#ffffff; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 2px 4px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.42); } /* Surfaces that were hardcoded light now follow the token. */ html[data-theme="dark"] .gen-form .field-card, html[data-theme="dark"] .doc-options{background:var(--surface);border-color:var(--rule)} html[data-theme="dark"] .feature-list .card h3{border-top-color:var(--ink-1)} html[data-theme="dark"] .trust-band strong, html[data-theme="dark"] .sibling strong{color:var(--ink-1)!important} html[data-theme="dark"] .landing-sections .card{background:none} /* ========================================================================== V61 — mobile order, static heading, real table reflow This block is last in the file on purpose, so it wins on source order as well as specificity. Nothing below it may override these. ========================================================================== */ /* Desktop keeps the heading out of the way entirely. */ .build-heading{display:none} @media(max-width:820px){ /* ---- 1. ORDER ----------------------------------------------------- Mirrors desktop: controls first, document, then actions LAST. 1 "Build Document" heading 2 Document type + language 3 Currency, logo & options 4 the document 5 line items and the rest of the form 6 download / share <- bottom, as asked display:contents lifts the form's children into the grid's flex flow so they can be ordered individually. The form never submits (onsubmit returns false), so nothing depends on its box. */ .gen-grid{display:flex;flex-direction:column;gap:14px} .gen-form{display:contents} .gen-form > *{order:5} /* default for everything in the form */ .build-heading {order:1} #docControls {order:2} .gen-form > .doc-options{order:3} .gen-preview-wrap{order:4} .gen-actions-bar {order:6} .history-panel {order:7} /* ---- 2. THE HEADING ------------------------------------------------ Static text, not a control. No href, no pointer, no hover state. */ .build-heading{ display:block;margin:2px 0 0;padding:0; font-size:1.3rem;font-weight:800;letter-spacing:-.02em; color:var(--ink-1);cursor:default} /* ---- 3. ACTIONS AT THE BOTTOM -------------------------------------- They were floating over the document because an earlier rule pins the bar with position:sticky;bottom:0. At the foot of the page that is exactly what "hangs in the middle of the invoice" looks like. It now sits in normal flow, after everything. */ .gen-actions-bar{ position:static!important;bottom:auto!important;top:auto!important; z-index:auto!important;box-shadow:none!important; background:transparent!important;border-top:0!important; padding:0!important;margin:2px 0 0!important;width:100%} .gen-actions-bar .gen-actions{ display:grid;grid-template-columns:repeat(3,1fr);gap:9px; background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:12px;margin:0} .gen-actions-bar .gen-actions #genDownload{ grid-column:1/-1;min-height:52px;font-size:1rem} .gen-actions-bar .gen-actions .btn.secondary{ min-height:46px;font-size:.88rem;padding:10px 8px} .gen-actions-bar .gen-actions #genUses{ grid-column:1/-1;text-align:center;font-size:.8rem;margin:2px 0 0} /* ---- 5. FULL SCREEN keeps the true, print-accurate layout ------------ This is the scoped 1.4.10 exception: deliberate, opt-in, pinch-zoom. */ body.doc-fs .gen-preview-wrap .doc{min-width:660px!important;width:660px!important; max-width:none!important} body.doc-fs .gen-preview-wrap .doc table.doc-items, body.doc-fs .gen-preview-wrap .doc table.doc-items tbody{display:table!important} body.doc-fs .gen-preview-wrap .doc table.doc-items thead{display:table-header-group!important} body.doc-fs .gen-preview-wrap .doc table.doc-items tr{ display:table-row!important;border:0;border-radius:0;padding:0;margin:0} body.doc-fs .gen-preview-wrap .doc table.doc-items td{ display:table-cell!important;width:auto!important;text-align:left!important; padding:8px 6px!important} body.doc-fs .gen-preview-wrap .doc table.doc-items td::before{content:none!important} body.doc-fs .gen-preview-wrap .doc table.doc-items td.col-act{position:static;width:34px!important} } /* Dark mode: the stacked line-item cards follow the theme. */ html[data-theme="dark"] .gen-preview-wrap .doc table.doc-items tr{border-color:var(--rule)} /* ========================================================================== V62 — line-item cards and bigger typing targets Last block in the file. Nothing below may override these. ========================================================================== */ /* Labels are real elements now. A previous attempt used td::before, which line 708 kills with display:none!important — content was set, display was not, so the labels existed but never painted. Real spans cannot be hidden by a ::before rule. */ .li-lbl{display:none} .doc-raster .li-lbl{display:none!important} @media(max-width:820px){ /* ---- The document fills the screen and never scrolls sideways ---- */ .gen-preview-wrap .doc{min-width:0!important;width:100%!important; max-width:100%!important;overflow:visible!important;padding:16px!important} .gen-preview-wrap .doc .mobile-table{overflow:visible!important;width:100%!important} /* ---- Each line item becomes a card ------------------------------ Description spans the full width; Qty, Unit price and Amount sit in a three-up row beneath it. That is the shape of the printed line, kept readable at 360px, rather than four lonely stacked rows. */ .gen-preview-wrap .doc table.doc-items{display:block!important;width:100%!important; min-width:0!important;border-collapse:separate!important;border-spacing:0!important} .gen-preview-wrap .doc table.doc-items thead{display:none!important} .gen-preview-wrap .doc table.doc-items tbody{display:block!important;width:100%!important} .gen-preview-wrap .doc table.doc-items tr{ display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:10px 10px; width:100%!important;position:relative; border:1px solid var(--line);border-radius:12px; padding:12px 40px 12px 12px;margin:0 0 10px; background:var(--bg-2)} .gen-preview-wrap .doc table.doc-items td{ display:block!important;width:auto!important;max-width:none!important; border:0!important;padding:0!important;margin:0!important; text-align:left!important;vertical-align:top} .gen-preview-wrap .doc table.doc-items td:nth-child(1){grid-column:1/-1} /* The label sits above its field, small and quiet. */ .gen-preview-wrap .doc table.doc-items .li-lbl{ display:block;margin:0 0 4px; font-size:10.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);line-height:1.2} /* ---- Bigger boxes to type in ------------------------------------ The editable fields were bare inline text with no affordance. They now read as inputs: a real box, 44px minimum, 15px text so iOS does not zoom on focus. */ .gen-preview-wrap .doc .ed{ display:block!important;width:100%;box-sizing:border-box; min-height:44px;padding:11px 12px; font-size:15px!important;line-height:1.35; background:var(--card);border:1px solid var(--line);border-radius:9px; color:var(--ink-1)} .gen-preview-wrap .doc .ed:focus{outline:none;border-color:var(--accent); box-shadow:var(--ring);background:var(--card)} .gen-preview-wrap .doc .ed:empty:before, .gen-preview-wrap .doc .ed[data-empty]:before{color:var(--ink-3)} /* Numeric fields are narrower in intent but keep the full tap target. */ .gen-preview-wrap .doc table.doc-items .ed-num{text-align:left} /* Amount is computed, not typed — style it as a value, not a field. */ .gen-preview-wrap .doc table.doc-items .li-amount{align-self:end} .gen-preview-wrap .doc table.doc-items .li-amt-v{ display:block;min-height:44px;padding:11px 0; font-size:15px;font-weight:700;color:var(--ink-1)} /* Remove control: inside the card, top right, out of the content flow. */ .gen-preview-wrap .doc table.doc-items td.col-act{ position:absolute!important;top:8px;right:8px; width:auto!important;padding:0!important} .gen-preview-wrap .doc table.doc-items .li-del{ opacity:1!important;width:28px;height:28px;line-height:1; display:grid;place-items:center;border-radius:8px; border:1px solid var(--line);background:var(--card);color:var(--ink-3); font-size:13px} .gen-preview-wrap .doc .doc-addline{min-height:48px;font-size:.95rem;width:100%} /* Totals stay legible and aligned at the foot of the document. */ .gen-preview-wrap .doc .totals > div{padding:9px 0;font-size:14px} .gen-preview-wrap .doc .totals .ed{display:inline-block!important;width:auto; min-width:56px;min-height:36px;padding:6px 8px;text-align:center} /* ---- Full screen keeps the true printed layout ------------------- */ body.doc-fs .gen-preview-wrap .doc{min-width:660px!important;width:660px!important; max-width:none!important;padding:26px!important} body.doc-fs .gen-preview-wrap .doc .li-lbl{display:none!important} body.doc-fs .gen-preview-wrap .doc table.doc-items{display:table!important} body.doc-fs .gen-preview-wrap .doc table.doc-items thead{display:table-header-group!important} body.doc-fs .gen-preview-wrap .doc table.doc-items tbody{display:table-row-group!important} body.doc-fs .gen-preview-wrap .doc table.doc-items tr{ display:table-row!important;border:0;border-radius:0;padding:0;margin:0;background:none} body.doc-fs .gen-preview-wrap .doc table.doc-items td{ display:table-cell!important;width:auto!important;padding:8px 6px!important} body.doc-fs .gen-preview-wrap .doc table.doc-items td.col-act{ position:static!important;width:34px!important} body.doc-fs .gen-preview-wrap .doc .ed{ display:inline!important;min-height:0;padding:0;background:none;border:0; box-shadow:none;font-size:13px!important;border-radius:0} body.doc-fs .gen-preview-wrap .doc table.doc-items .li-amt-v{ display:inline;min-height:0;padding:0;font-weight:inherit;font-size:13px} } /* Dark theme: cards and fields follow the tokens. */ html[data-theme="dark"] .gen-preview-wrap .doc table.doc-items tr{ border-color:var(--rule);background:var(--surface-2)} html[data-theme="dark"] .gen-preview-wrap .doc .ed{ background:var(--surface);border-color:var(--rule);color:var(--ink-1)} /* ========================================================================== V63 — date entry ========================================================================== */ .date-hint{display:block;margin:5px 0 0;font-size:.72rem;line-height:1.3} /* Dates in the document on touch: the printed ISO text, with a transparent native date input laid exactly over it. The user taps a real date input, so the browser opens its own picker with no scripting involved. */ .ed-date-wrap{position:relative;display:inline-flex!important;align-items:center; width:auto;min-width:9.5em;cursor:pointer} .ed-date-text{pointer-events:none} .ed-date-input{ position:absolute;top:0;left:0;width:100%;height:100%; margin:0;padding:0;border:0;background:transparent;color:transparent; opacity:0;cursor:pointer; font-size:16px; /* keeps iOS from zooming the page on focus */ -webkit-appearance:none;appearance:none} .ed-date-input::-webkit-calendar-picker-indicator{opacity:0;width:100%;height:100%; position:absolute;top:0;left:0;cursor:pointer} /* The overlay is an editing control, never part of the printed document. */ .doc-raster .ed-date-input{display:none!important} .doc-raster .ed-date-wrap{display:inline!important;min-width:0} /* Desktop: the date reads as clickable without shouting. A faint underline on hover is enough of a cue inside a document; a full input box would make the invoice look like a form. */ @media(hover:hover) and (pointer:fine){ .ed-date-wrap:hover .ed-date-text{text-decoration:underline; text-decoration-style:dotted;text-underline-offset:3px} } .ed-date-input:focus-visible + .ed-date-text, .ed-date-wrap:focus-within .ed-date-text{outline:2px solid var(--accent); outline-offset:2px;border-radius:4px} @media(pointer:coarse){ /* A 44px target for a value only ten characters wide. */ .gen-preview-wrap .doc .ed-date-wrap{min-height:44px} } /* Full screen prints the true document: no control affordances. */ body.doc-fs .gen-preview-wrap .doc .ed-date-wrap{ display:inline!important;min-height:0;min-width:0;cursor:default} body.doc-fs .gen-preview-wrap .doc .ed-date-input{display:none!important} /* ========================================================================== V69 — document-specific layouts Balance letters and payment reminders are letters, not tables: one figure, one date. Everything else keeps its existing table styling. ========================================================================== */ .doc-figure{ margin:18px 0 6px;padding:18px 20px; border:1px solid var(--rule);border-radius:var(--radius); background:var(--surface-2)} .doc-figure-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px} .doc-figure-label{font-size:.82rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3)} .doc-figure-amount{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)} .doc .ed.ed-figure{font-size:1.9rem;font-weight:800;text-align:right;min-width:5em} .doc-figure-meta{margin-top:8px;font-size:.85rem;color:var(--ink-3); display:flex;align-items:center;gap:8px} .doc-figure-meta span{font-weight:650} /* Extra line-item columns only occupy space when the document uses them. */ .li-f-x1[hidden],.li-f-x2[hidden]{display:none!important} @media(max-width:820px){ .doc-figure{padding:14px 15px;margin:14px 0 4px} .doc-figure-row{flex-direction:column;align-items:stretch;gap:6px} .doc-figure-amount,.doc .ed.ed-figure{font-size:1.5rem;text-align:left} .doc .ed.ed-figure{width:100%} } html[data-theme="dark"] .doc-figure{background:var(--surface);border-color:var(--rule)} /* ========================================================================== V73 — the document controls read as the starting point The two boxes that decide WHAT you are making sat in the same plain card as every other panel, so nothing marked them as the first decision. They now carry the accent: a tinted field, a defined border and accent-outlined selects. Placed last in the file so it beats the generic .field-card and dark-theme rules above rather than fighting them with !important. ========================================================================== */ .gen-form .field-card.doc-controls, .gen-form > .doc-options{ background:var(--accent-soft); border:1.5px solid var(--accent); box-shadow:none} .gen-form .field-card.doc-controls label, .gen-form > .doc-options > summary{ color:var(--brand);font-weight:600} /* Selects sit on white inside the tint so the value stays the highest-contrast thing in the box — the tint frames the control, it does not compete. */ .gen-form .field-card.doc-controls select, .gen-form .field-card.doc-controls input{ background:var(--card); border:1px solid var(--accent); color:var(--ink)} .gen-form .field-card.doc-controls select:focus, .gen-form .field-card.doc-controls input:focus{ border-color:var(--accent-strong);box-shadow:var(--ring);outline:none} .gen-form > .doc-options > summary::marker, .gen-form > .doc-options > summary::-webkit-details-marker{color:var(--accent)} /* The helper line under the language select stays quiet against the tint. */ .gen-form .field-card.doc-controls small.muted{color:var(--ink-2)} /* Dark: --accent-soft is a deep navy and --accent lifts to #5b83f0, so the same treatment reads correctly rather than turning into a pale box. */ html[data-theme="dark"] .gen-form .field-card.doc-controls, html[data-theme="dark"] .gen-form > .doc-options{ background:var(--accent-soft);border-color:var(--accent)} html[data-theme="dark"] .gen-form .field-card.doc-controls label, html[data-theme="dark"] .gen-form > .doc-options > summary{color:var(--brand)} html[data-theme="dark"] .gen-form .field-card.doc-controls select, html[data-theme="dark"] .gen-form .field-card.doc-controls input{ background:var(--card);border-color:var(--accent);color:var(--ink)} html[data-theme="dark"] .gen-form .field-card.doc-controls small.muted{color:var(--ink-2)} @media(max-width:820px){ .gen-form .field-card.doc-controls, .gen-form > .doc-options{border-width:1.5px} } /* ========================================================================== V74 — the header Sign up button .top nav a:hover (0,2,2) outranks .btn:hover (0,2,0), so hovering the nav CTA replaced its accent background with var(--bg-2) - a near-white panel - while .btn keeps colour:var(--accent-ink) forced with !important. White text on #eef2f9 measures 1.12:1, which is why the button vanished under the cursor. Restated here at a specificity that wins, rather than by weakening the nav rule other links depend on. ========================================================================== */ .top nav a.btn, .top nav a.btn:hover, .top nav a.btn:focus-visible{ background:var(--accent); color:var(--accent-ink)!important} .top nav a.btn:hover{background:var(--accent-strong)} .top nav a.btn:focus-visible{outline:none;box-shadow:var(--ring)} html[data-theme="dark"] .top nav a.btn, html[data-theme="dark"] .top nav a.btn:hover{color:var(--accent-ink)!important}