/* ============================================================ BUREAU OF MINOR SUFFERINGS — PREMIUM DESIGN LAYER v1 Additive polish layer. Loads AFTER main.min.css. Rules: - NEVER sets display/visibility (iib-mode + JS state classes own those) - No !important on properties JS toggles (transform on tier cards, etc.) - Only decorates: color, shadow, border, type, micro-interaction ============================================================ */ :root{ /* foil ramp — the "14k gold-foil federal seal", literalized */ --foil-dark:#8a6d1f; --foil:#c9a033; --foil-light:#f0d878; --foil-ramp:linear-gradient(115deg,var(--foil-dark) 0%,var(--foil) 30%,var(--foil-light) 50%,var(--foil) 70%,var(--foil-dark) 100%); --elev-1:0 1px 2px rgba(4,10,20,.28),0 2px 8px rgba(4,10,20,.22); --elev-2:0 2px 6px rgba(4,10,20,.30),0 10px 28px rgba(4,10,20,.35); --elev-3:0 4px 12px rgba(4,10,20,.35),0 24px 64px rgba(4,10,20,.45); --focus-ring:0 0 0 2px rgba(10,22,40,.9),0 0 0 4px var(--gold); --press-ease:cubic-bezier(.2,.7,.3,1); } /* ── Global finish ─────────────────────────────────────────── */ html{scrollbar-color:rgba(201,160,51,.45) rgba(10,22,40,.9);} body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} ::selection{background:rgba(201,160,51,.85);color:#0a1628;} ::-webkit-scrollbar{width:10px;} ::-webkit-scrollbar-track{background:#0a1628;} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(201,160,51,.55),rgba(138,109,31,.55));border:2px solid #0a1628;border-radius:6px;} ::-webkit-scrollbar-thumb:hover{background:var(--gold);} /* Keyboard focus — gold ring on navy, everywhere */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-radius:2px; } .submit-btn:focus-visible,.premium-cta-btn:focus-visible,.hero-cta-btn:focus-visible{ outline:none;box-shadow:var(--focus-ring); } /* ── Display typography — engraved, not printed ────────────── */ .agency-title{ letter-spacing:clamp(1px,.35vw,3px); text-wrap:balance; background:linear-gradient(180deg,#fdfaf2 0%,#efe6cf 55%,#d9c795 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:#f5f0e8; filter:drop-shadow(0 2px 22px rgba(201,160,51,.18)); } .agency-header{letter-spacing:clamp(2px,.6vw,5px);} .agency-subtitle{opacity:.92;} .hero-divider{position:relative;} /* Signature: foil-catch — light travelling across the wordmark, slow */ @keyframes bmsFoilSweep{0%,72%{background-position:130% 0;}92%,100%{background-position:-30% 0;}} .nav-brand,.nav-logo{ background:linear-gradient(100deg,var(--gold) 40%,var(--foil-light) 50%,var(--gold) 60%); background-size:250% 100%;background-position:130% 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; animation:bmsFoilSweep 9s ease-in-out infinite; } /* Typewriter — steadier caret, official-ledger feel */ .hero-typewriter{letter-spacing:.2px;} .hero-typewriter-text{ border-right:8px solid rgba(201,160,51,.55); /* block caret — ledger cursor, not a hairline */ padding-right:5px; } .hero-typewriter-prefix{color:rgba(201,160,51,.6);} /* Hero stats — engraved counters */ .stat-number{font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 24px rgba(201,160,51,.12);} .stat-label{letter-spacing:2.5px;} /* ── Filing form — the primary act ─────────────────────────── */ .filing-form{ box-shadow:0 0 0 4px rgba(201,160,51,.08),0 0 0 5px rgba(201,160,51,.04),0 1px 0 rgba(255,255,255,.06) inset,var(--elev-3); } .filing-form input[type="text"],.filing-form input[type="email"],.filing-form textarea,.filing-form select{ transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease; } .filing-form input[type="text"]:focus,.filing-form input[type="email"]:focus,.filing-form textarea:focus,.filing-form select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,160,51,.16),0 1px 2px rgba(26,18,9,.12) inset; outline:none; } .field-label{letter-spacing:1.6px;} /* Submit — letterpress: lifts to invite, stamps down on press */ .submit-btn{ transition:transform .16s var(--press-ease),box-shadow .16s var(--press-ease),filter .16s ease; will-change:transform; } .submit-btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(26,18,9,.28),0 14px 40px rgba(201,160,51,.22);} .submit-btn:not(:disabled):active{transform:translateY(1px) scale(.995);box-shadow:0 1px 3px rgba(26,18,9,.35);transition-duration:.06s;} .submit-btn:disabled{filter:saturate(.55);} /* Trust badges — quiet engraved chips, credibility not noise */ .trust-badge-enhanced{ border:1px solid rgba(201,160,51,.22); background:linear-gradient(180deg,rgba(245,240,232,.045),rgba(245,240,232,.015)); box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 1px 2px rgba(4,10,20,.25); transition:border-color .25s ease,box-shadow .25s ease; } .trust-badge-enhanced:hover{border-color:rgba(201,160,51,.5);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,var(--elev-1);} /* ── PAYWALL — where the $4.99 decision happens ────────────── */ /* Free tier recedes: flat, matte, archival */ .premium-tier-card.free-tier{ filter:saturate(.82); box-shadow:0 1px 3px rgba(4,10,20,.3); } /* Official tier advances: foil-edged document under desk light */ .premium-tier-card.official-tier{ border:1px solid rgba(201,160,51,.65); box-shadow:0 0 0 1px rgba(240,216,120,.14),0 1px 0 rgba(255,255,255,.08) inset,var(--elev-3),0 0 60px rgba(201,160,51,.10); position:relative; background-clip:padding-box; } .premium-tier-card.official-tier::after{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 30%,rgba(240,216,120,.10) 48%,rgba(240,216,120,.16) 50%,rgba(240,216,120,.10) 52%,transparent 70%); background-size:280% 100%;background-position:130% 0; animation:bmsFoilSweep 7s ease-in-out infinite; } .premium-cta-title{text-wrap:balance;} .premium-cta-eyebrow{letter-spacing:2.5px;} /* The buy button — foil bar with tactile press */ .premium-cta-btn{ background-image:var(--foil-ramp); background-size:220% 100%;background-position:50% 0; border:1px solid rgba(240,216,120,.7); text-shadow:0 1px 0 rgba(255,255,255,.25); box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(90,68,12,.35) inset,var(--elev-2); transition:transform .18s var(--press-ease),box-shadow .18s var(--press-ease),background-position .5s ease; } .premium-cta-btn:hover{background-position:0% 0;} .premium-cta-btn:active{transform:translateY(1px) scale(.99);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 4px rgba(4,10,20,.4);transition-duration:.06s;} /* Sticky unlock bar — heavier authority when it appears (visibility untouched) */ .sticky-unlock-bar{ border-top:1px solid rgba(201,160,51,.5); box-shadow:0 -8px 32px rgba(4,10,20,.55),0 1px 0 rgba(240,216,120,.12) inset; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* ── Certificate output frame — museum glass ───────────────── */ .cert-scale-wrapper{filter:drop-shadow(0 18px 50px rgba(4,10,20,.5));} /* ── FAQ & sections — ledger rules, not boxes ──────────────── */ .faq-item{transition:border-color .25s ease,background-color .25s ease;} .faq-item:hover{border-color:rgba(201,160,51,.45);} .section-label,.how-title,.faq-title{letter-spacing:clamp(2px,.5vw,4px);} /* ── Nav & footer — stationery head and foot ───────────────── */ .top-nav{ -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid rgba(201,160,51,.18); } .top-nav.scrolled{box-shadow:0 4px 24px rgba(4,10,20,.45);} .nav-links a{ position:relative;transition:color .2s ease; /* The "File a Case" link leads with a ⚖ emoji that renders taller than the plain-text items; without a shared line-box its baseline drops below the others in the vertical hamburger menu. Flex + fixed line-height puts every item on one consistent centered baseline. */ display:inline-flex;align-items:center;line-height:1; } .nav-links a::after{ content:'';position:absolute;left:50%;right:50%;bottom:-3px;height:1px; background:var(--gold);transition:left .22s ease,right .22s ease; } .nav-links a:hover::after,.nav-links a:focus-visible::after{left:0;right:0;} /* In the open hamburger dropdown, stretch each item so the emoji line aligns flush-left with the text-only items (not centered by the taller glyph). */ .nav-links.open a{display:flex;align-items:center;line-height:1.1;} .footer-links a{transition:color .2s ease;} .footer-links a:hover{color:var(--gold);} /* ── Subpages & complaint library (shares this file) ───────── */ .bureau-card,.complaint-card{ transition:transform .22s var(--press-ease),box-shadow .22s ease,border-color .22s ease; } .bureau-card:hover{border-color:rgba(201,160,51,.45);box-shadow:var(--elev-2);} .complaint-card:hover{transform:translateY(-3px);border-color:rgba(201,160,51,.5);box-shadow:var(--elev-2),0 0 40px rgba(201,160,51,.07);} .cta-btn{ transition:transform .16s var(--press-ease),box-shadow .16s var(--press-ease),background-position .5s ease; } .cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,160,51,.25),var(--elev-1);} .cta-btn:active{transform:translateY(1px);transition-duration:.06s;} /* ── Quality floor ─────────────────────────────────────────── */ @media (max-width:640px){ .premium-tier-card.official-tier{box-shadow:0 0 0 1px rgba(240,216,120,.14),var(--elev-2),0 0 40px rgba(201,160,51,.08);} .hero-typewriter-text{border-right-width:6px;} } @media (prefers-reduced-motion:reduce){ .nav-brand,.nav-logo,.premium-tier-card.official-tier::after{animation:none;} /* reduced-motion: no sweep, but keep the gold (engraved shadow still applies) */ .nav-brand,.nav-logo{background:none;-webkit-text-fill-color:currentColor;color:var(--gold);} .submit-btn,.premium-cta-btn,.cta-btn,.complaint-card,.bureau-card{transition-duration:.01ms;} .submit-btn:not(:disabled):hover,.premium-cta-btn:hover,.cta-btn:hover,.complaint-card:hover{transform:none;} } /* ============================================================ CERTIFICATE REFINEMENT — the product itself Restyle-only layer over the real cert selectors. No HTML/JS changes; every dynamic hook (#cert-title, .sev-tier-N, .cert-finding-classified, severity markup) is preserved. Screenshot-safe: adds NO new border-image / filter:blur / backdrop-filter to anything captured by html2canvas. Thesis: deadpan-rigid layout + one accent discipline (red = severity + the single punchline, nothing else) so the comedy in the copy lands. Two screenshot heroes: name + score. ============================================================ */ .certificate{ --rule-line:rgba(184,134,11,.35); /* the ONE separator color */ --rule-soft:rgba(26,18,9,.12); --gold-deep:#8a6d1f; } /* 1 · FRAME — crisper double-mat, same footprint */ .certificate{ box-shadow:0 0 0 6px var(--paper),0 0 0 7px rgba(201,160,51,.55), 0 0 0 8px var(--paper),0 0 0 9px var(--gold), 0 30px 80px rgba(0,0,0,.6); } .cert-inner{padding:30px 40px 22px;} /* 2 · HEADER */ .cert-agency-name{font-weight:700;letter-spacing:2.5px;line-height:1.7;} .cert-top{margin-bottom:10px;padding-bottom:12px;} /* 3 · STAMP COLLISION FIX — the #1 screenshot-killer. main.min.css pins .cert-stamp at top:140px right:40px (fixed), and a 3-line title grows down into it. bottom:118px/right:44px was the first re-anchor, but that lands on the REF/DEPT/PAGE/RETENTION case block and the 3-line tier-4 text ("SOUL ERODING…") turns both into mush — on exactly the hero certs. Final anchor: the empty paper between the signature block and the gold seal, beside Dr. Calloway's name — where a real clerk actually stamps. A ~2px graze of the signature tail / seal edge is deliberate (physical), full text overlap is not. */ .cert-stamp{ top:auto;bottom:130px;left:195px;right:auto; width:104px;height:104px;border-width:2.5px; transform:rotate(-13deg);opacity:.5; } .cert-stamp-inner{font-size:8px;letter-spacing:1px;line-height:1.4;} /* 4 · CLASSIFICATION BAND — calmer, more legible */ .cert-classification-bar{padding:5px 0;letter-spacing:3.5px;margin:14px 0 6px;font-size:8.5px;} /* 5 · TITLE — the centerpiece: larger, balanced, breathing */ .cert-title-block{margin:10px 0 12px;padding:0 20px;} .cert-title-label{font-size:8.5px;letter-spacing:3px;opacity:.75;margin-bottom:9px;} .cert-title{font-size:24px;line-height:1.22;letter-spacing:.4px;text-wrap:balance;margin-top:0;} /* 6 · CLAIMANT (hero #1) — elegant, framed by one gold rule */ .cert-recipient-block{ margin:8px 0 4px;padding:11px 0;border-image:none; border-top:1px solid var(--rule-line);border-bottom:1px solid var(--rule-line); } .cert-recipient-label{font-size:8.5px;letter-spacing:4px;opacity:.8;margin-bottom:6px;} .cert-recipient-name{font-size:34px;line-height:1;} /* 7 · SYNOPSIS / BODY */ .cert-body{font-size:11px;line-height:1.72;margin:16px 0;} .cert-body p{margin-bottom:9px;} /* 8 · ANNEX (evidence + forensic) — quiet single-rule blocks */ .cert-forensic{ border-left:2px solid var(--rule-line);border-image:none; font-size:10px;line-height:1.8;margin:12px 0;padding:2px 0 2px 14px; } .cert-forensic-label{opacity:.7;} .cert-evidence-list li{line-height:1.85;} /* 9 · OFFICIAL CLASSIFICATION LINE — demote from red to calm navy tag (red is being reserved for severity) */ .cert-classification-line{ background:rgba(10,22,40,.05);border-left:3px solid var(--navy);border-image:none; color:var(--navy);letter-spacing:1px;padding:6px 14px; } /* 10 · FINDINGS — gold serif numerals, clean hairlines */ .cert-findings-title{letter-spacing:3px;opacity:.7;color:var(--navy);margin-bottom:10px;} .cert-finding-primary{ display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline; padding:9px 0;margin:0;border-bottom:1px solid var(--rule-soft); /* clean numbered rows — no gold chip / vertical rule left over from main.min */ background:none;border-left:none;border-radius:0; } #cert-findings-list > .cert-finding-primary:last-child{border-bottom:none;} .cert-finding-primary .cert-finding-number{ font-family:'Cinzel',serif;font-size:19px;font-weight:700;color:var(--gold-deep);line-height:1; } .cert-finding-primary .cert-finding-text{font-size:11px;line-height:1.55;color:var(--ink);} /* 11 · SEVERITY VERDICT (hero #2) — lift OFF the dark UI chip, rebuild as a serif verdict on the paper. The ONE place strong red lives. */ .cert-severity-bar{ background:var(--paper-dark);border:1px solid var(--rule-line);border-radius:2px; padding:22px 20px 14px;margin:18px 0;gap:20px;align-items:center; } /* label stays pinned top-left (it's position:absolute in main.min.css) — recolor only */ .cert-severity-bar-label{color:var(--ink-faded);opacity:.7;font-size:8px;letter-spacing:3px;} .cert-severity-bar-score{ font-family:'Cinzel',serif;font-weight:900;color:var(--navy); font-size:46px;min-width:auto;line-height:.85; } .cert-severity-bar-score .sev-decimal{font-size:22px;opacity:.55;} .cert-severity-bar-track{gap:5px;} .cert-severity-bar-fill-wrap{height:8px;background:rgba(26,18,9,.10);border-radius:4px;} .cert-severity-bar-scale{color:rgba(26,18,9,.4);font-size:8px;} .cert-severity-bar-badge{ background:transparent;border:1px solid var(--rule-line);color:var(--navy); font-size:9px;letter-spacing:1.5px;padding:6px 12px; } .sev-tier-1 .cert-severity-bar-fill{background:#5a7a4a;} .sev-tier-2 .cert-severity-bar-fill{background:var(--gold-deep);} .sev-tier-3 .cert-severity-bar-fill{background:#c07a1a;} .sev-tier-4 .cert-severity-bar-fill{background:var(--red);} .sev-tier-5 .cert-severity-bar-fill{background:var(--red);} .sev-tier-4 .cert-severity-bar-badge,.sev-tier-5 .cert-severity-bar-badge{color:var(--red);border-color:rgba(139,26,26,.4);} /* 12 · RULING — navy authority; red only on the punchline (2nd sanctioned red) */ .cert-ruling-block{background:transparent;border-left:3px solid var(--navy);padding:2px 0 2px 16px;margin:18px 0;} .cert-ruling-label{color:var(--navy);opacity:.7;letter-spacing:3px;} .cert-ruling-text{color:var(--ink);line-height:1.75;} .cert-ruling-punchline{margin:16px 0 4px;padding:13px 16px;font-size:13px;letter-spacing:1.5px;} /* 13 · BOTTOM THIRD — collapse the stacked "endings" into one calm zone */ .cert-crossref{text-align:center;opacity:.7;margin:10px 0 2px;font-size:8.5px;} .cert-legal-footnote{text-align:center;border-left:none;opacity:.7;margin:2px auto 0;max-width:88%;font-size:8.5px;} .cert-footer{margin-top:16px;padding-top:14px;border-top:2px solid var(--navy);} .cert-signature-line{font-family:'IM Fell English',serif;font-style:italic;font-size:18px;color:var(--navy);} /* Director sign-off: name stays full-size outside the bracket; any qualifier ("on behalf of a very tired Bureau", etc.) sits in parens at a smaller size. */ .cert-signoff-suffix{font-size:11px;letter-spacing:.2px;opacity:.68;} .cert-bureau-dna{opacity:.55!important;} @media (prefers-reduced-motion:reduce){ .sev-tier-5 .cert-severity-bar-fill{animation:none;} } /* ── Resume banner — "pending case file" dossier (JS-injected on return) ── Replaces the old flat inline banner. Frosted navy panel, brass seal mark, proper primary/ghost buttons. Matches the filing-form material language. */ .resume-banner{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin:0 0 18px;padding:14px 18px; background:linear-gradient(135deg,rgba(13,31,60,.72),rgba(8,18,32,.82)); border:1px solid rgba(201,160,51,.32); border-left:3px solid var(--foil,#c9a033); border-radius:5px; box-shadow:0 6px 20px -10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .resume-banner-mark{ flex-shrink:0;width:40px;height:40px;display:grid;place-items:center; font-size:20px;color:#0b1c38;border-radius:50%; background:linear-gradient(180deg,var(--foil-light,#f0d878),var(--foil,#c9a033) 55%,var(--foil-dark,#8a6d1f)); box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 6px rgba(0,0,0,.4); } .resume-banner-body{flex:1 1 220px;min-width:0;} .resume-banner-title{ font-family:'Cinzel',serif;font-size:14px;font-weight:700;letter-spacing:.4px; color:var(--paper,#f4efe3);margin-bottom:3px; } .resume-banner-sub{ font-family:'Courier Prime',monospace;font-size:11px;line-height:1.5; color:rgba(244,239,227,.62); } .resume-banner-sub strong{color:rgba(244,239,227,.85);font-weight:700;} .resume-banner-time{color:var(--foil-light,#f0d878);font-weight:700;white-space:nowrap;} .resume-banner-actions{display:flex;gap:9px;flex-shrink:0;} .resume-btn{ font-family:'Courier Prime',monospace;font-size:10.5px;letter-spacing:1.2px; text-transform:uppercase;padding:9px 16px;border-radius:3px;cursor:pointer; transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease; } .resume-btn:active{transform:translateY(1px);} .resume-btn-primary{ border:none;color:#0b1c38;font-weight:700; background:linear-gradient(180deg,var(--foil-light,#f0d878),var(--foil,#c9a033) 55%,var(--foil-dark,#8a6d1f)); box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 3px 8px -3px rgba(0,0,0,.5); } .resume-btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 12px -3px rgba(201,160,51,.5);} .resume-btn-ghost{ background:transparent;color:rgba(244,239,227,.55); border:1px solid rgba(201,160,51,.28); } .resume-btn-ghost:hover{color:rgba(244,239,227,.85);border-color:rgba(201,160,51,.5);} @media (max-width:520px){ .resume-banner-actions{width:100%;} .resume-btn{flex:1;text-align:center;} } /* ══════════════════════════════════════════════════════════════════════ THE ROUTING v2 — Processing overlay redesign ────────────────────────────────────────────────────────────────────── Replaces the seven-desk .terminal-step stack. Three big station cards stacked vertically (zigzag left/right on desktop, straight on phone), each connected by a hand-drawn ink curve with a small "file" dot that animates along it. Card visibility scales from awaiting → active → done with a soft gold glow at the active moment. All base .terminal-* layout in main.min.css is bypassed by the .rv2-window class; legacy step DOM is not rendered in the new markup. ══════════════════════════════════════════════════════════════════════ */ .rv2-window{ width:min(94%,600px)!important;max-width:600px!important; padding:34px 34px 28px!important; background: radial-gradient(ellipse 620px 300px at 50% -6%, rgba(201,160,51,.10), transparent 62%), radial-gradient(ellipse 900px 700px at 50% 120%, rgba(0,0,0,.5), transparent 60%), linear-gradient(168deg,#122745 0%,#0b1a30 46%,#070f1d 100%)!important; border:1px solid rgba(201,160,51,.4)!important; box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(240,216,120,.14), inset 0 0 0 6px rgba(201,160,51,.05), 0 50px 140px rgba(0,0,0,.78)!important; border-radius:5px!important;position:relative;overflow:hidden; font-family:'Courier Prime',monospace; } .rv2-window::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5; background:repeating-linear-gradient(94deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px); } .rv2-watermark{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg); font-family:'Cinzel',serif;font-weight:900; font-size:clamp(56px,10vw,92px);letter-spacing:16px; color:rgba(201,160,51,.03);pointer-events:none;white-space:nowrap;z-index:0;user-select:none; } .rv2-header{ position:relative;z-index:2;text-align:center; padding-bottom:18px;margin-bottom:20px; border-bottom:1px solid rgba(201,160,51,.22); display:flex;flex-direction:column;align-items:center;gap:9px; } .rv2-header-seal{line-height:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation:rv2SealPulse 3.6s ease-in-out infinite;} @keyframes rv2SealPulse{0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}50%{filter:drop-shadow(0 4px 16px rgba(201,160,51,.45));}} .rv2-header-title{ font-family:'Cinzel',serif;font-weight:700; font-size:clamp(13px,2.8vw,16px);letter-spacing:5px;text-transform:uppercase; background:linear-gradient(90deg,#b8891f,#f0d878 50%,#b8891f); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; background-size:220% 100%;animation:rv2Shimmer 5s linear infinite; text-shadow:0 1px 0 rgba(0,0,0,.4); } @keyframes rv2Shimmer{0%{background-position:120% 0;}100%{background-position:-120% 0;}} .rv2-header-case{ font-family:'Courier Prime',monospace;font-size:9.5px;letter-spacing:3px;text-transform:uppercase; color:rgba(201,160,51,.6);border:1px solid rgba(201,160,51,.28);border-radius:2px; padding:2px 10px;background:rgba(201,160,51,.05); } .rv2-route{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;} .rv2-station{ display:flex;justify-content:center; opacity:.4;transition:opacity .7s ease,transform .7s ease; transform:translateY(8px);will-change:opacity,transform; } @media (min-width:520px){ .rv2-station-left {justify-content:flex-start;padding-left:6px;} .rv2-station-right{justify-content:flex-end;padding-right:6px;} } .rv2-station.rv2-active{opacity:1;transform:translateY(0);} .rv2-station.rv2-done {opacity:.62;} .rv2-card{ width:min(100%,380px);position:relative; background:linear-gradient(168deg,#f7f2e7,#ece3cf)!important; border:1px solid rgba(120,90,30,.35)!important;border-radius:3px!important; padding:16px 18px 17px!important; box-shadow:0 10px 24px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)!important; transition:transform .5s ease,box-shadow .5s ease,filter .5s ease!important; transform:rotate(-.5deg); } .rv2-station-right .rv2-card{transform:rotate(.6deg);} .rv2-card::before{ content:'';position:absolute;top:-9px;left:18px;width:96px;height:12px;border-radius:3px 3px 0 0; background:linear-gradient(180deg,#e6cd84,#c9a033);box-shadow:0 -1px 3px rgba(0,0,0,.2); } .rv2-station.rv2-active .rv2-card{ transform:rotate(0deg) translateY(-3px) scale(1.015); box-shadow:0 22px 46px -16px rgba(0,0,0,.7),0 0 46px rgba(201,160,51,.28),inset 0 1px 0 rgba(255,255,255,.7)!important; } .rv2-station.rv2-done .rv2-card{filter:saturate(.9) brightness(.98);} .rv2-card::after{ content:'PENDING';position:absolute;top:12px;right:14px; font-family:'Courier Prime',monospace;font-size:8px;font-weight:700;letter-spacing:1.5px; color:rgba(120,90,30,.5);border:1.5px solid rgba(120,90,30,.35);border-radius:2px; padding:2px 6px;transform:rotate(6deg);transition:color .4s ease,border-color .4s ease,background .4s ease; } .rv2-station.rv2-active .rv2-card::after{ content:'PROCESSING';color:#8b1a1a;border-color:rgba(139,26,26,.5);background:rgba(139,26,26,.05); animation:rv2StampBlink 1.1s ease-in-out infinite; } @keyframes rv2StampBlink{0%,100%{opacity:1;}50%{opacity:.45;}} .rv2-station.rv2-done .rv2-card::after{ content:'CLEARED';color:#1a3d2b;border-color:rgba(26,61,43,.5);background:rgba(26,61,43,.06);transform:rotate(-7deg); } .rv2-card-badge{ font-family:'Cinzel',serif;font-weight:700; font-size:10px;letter-spacing:3px;color:#8a6d1f; text-transform:uppercase;margin-bottom:12px;display:flex;align-items:baseline; } .rv2-roman{color:#8b1a1a;margin-right:8px;font-size:12px;letter-spacing:1px;} .rv2-badge-sep{opacity:.5;margin:0 8px 0 0;color:#8a6d1f;} .rv2-card-body{display:flex;align-items:center;gap:15px;} .rv2-clerk{ flex-shrink:0;line-height:0;width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 40% 35%,#f2d98a,#c9a033 65%,#9c7817); box-shadow:0 3px 8px -2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(90,60,10,.4); transition:filter .5s ease,background .5s ease; } .rv2-clerk svg{width:34px!important;height:34px!important;} .rv2-clerk svg *{stroke:#3a2c08!important;} .rv2-clerk svg [fill]:not([fill="none"]){fill:#3a2c08!important;} .rv2-station.rv2-active .rv2-clerk{filter:drop-shadow(0 0 10px rgba(201,160,51,.5));} .rv2-card-text{flex:1;min-width:0;} .rv2-card-dept{ font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:1.5px; text-transform:uppercase;color:#8a6d1f;margin-bottom:3px; } .rv2-card-who{ font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:.3px; color:var(--ink);margin-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.5); } .rv2-card-status{ font-family:'Courier Prime',monospace;font-size:12.5px;line-height:1.45; color:var(--ink-faded);letter-spacing:.2px;min-height:1.6em;transition:color .4s ease; } .rv2-station.rv2-active .rv2-card-status{color:#1a1209;} .rv2-station.rv2-done .rv2-card-status{color:rgba(61,47,26,.7);} .rv2-status-swap{animation:rv2StatusIn .5s ease both;} @keyframes rv2StatusIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}} .rv2-connector{position:relative;width:100%;height:58px;margin:2px 0;pointer-events:none;} .rv2-connector svg{width:100%;height:100%;overflow:visible;display:block;} .rv2-connector path{stroke:rgba(201,160,51,.35)!important;stroke-width:2!important;stroke-dasharray:2 7!important;} .rv2-connector .rv2-file{opacity:0;fill:#8b1a1a!important;filter:drop-shadow(0 0 6px rgba(139,26,26,.7));} .rv2-connector.rv2-flowing .rv2-file{opacity:1;} .rv2-connector.rv2-flowing path{stroke:rgba(201,160,51,.7)!important;animation:rv2InkPulse 1.6s ease-out;} @keyframes rv2InkPulse{0%{opacity:.4;}50%{opacity:.9;}100%{opacity:.55;}} @media (min-width:520px){.rv2-connector{height:74px;}} .rv2-station-final.rv2-active .rv2-card{ box-shadow:0 24px 50px -16px rgba(0,0,0,.72),0 0 56px rgba(201,160,51,.36),inset 0 1px 0 rgba(255,255,255,.7)!important; } .rv2-station-final.rv2-active .rv2-clerk{ background:radial-gradient(circle at 40% 35%,#f6e4a4,#d4a017 60%,#8b1a1a); } .rv2-progress-track{margin-top:28px!important;height:5px!important;background:rgba(201,160,51,.12)!important;border-radius:3px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)!important;overflow:hidden;} .terminal-progress-fill{background:linear-gradient(90deg,#8a6d1f,#e6cd84 60%,#c9a033)!important;box-shadow:0 0 10px rgba(201,160,51,.5)!important;} .rv2-progress-pct{margin-top:14px!important;font-family:'Cinzel',serif!important;font-size:20px!important;letter-spacing:2px!important;color:#e6cd84!important;text-shadow:0 1px 0 rgba(0,0,0,.4);} .rv2-skip{ margin:22px auto 0!important;display:block; background:rgba(201,160,51,.08)!important;border:1px solid rgba(201,160,51,.3)!important; color:rgba(201,160,51,.75)!important;font-family:'Courier Prime',monospace!important; font-size:10px!important;letter-spacing:2px!important;padding:8px 18px!important;border-radius:2px!important; cursor:pointer;transition:all .2s ease!important; } .rv2-skip:hover{background:rgba(201,160,51,.16)!important;color:var(--gold)!important;} @media (max-width:519px){ .rv2-window{padding:24px 16px 20px!important;} .rv2-card{width:100%;padding:14px 14px 15px!important;transform:none;} .rv2-station-right .rv2-card{transform:none;} .rv2-card-who{font-size:14px;} .rv2-card-status{font-size:12px;} .rv2-header-title{letter-spacing:4px;} .rv2-connector{height:48px;} .rv2-station-left,.rv2-station-right{justify-content:center;padding:0;} } @media (prefers-reduced-motion:reduce){ .rv2-header-seal,.rv2-header-title{animation:none!important;} .rv2-connector.rv2-flowing path{animation:none!important;} .rv2-file-motion{display:none;} .rv2-connector .rv2-file{opacity:1;} .rv2-station.rv2-active .rv2-card::after{animation:none!important;} } /* ══ PHYSICAL BUREAU FOOTER — brass nameplate + embossed medallion + directory ══ */ .bureau-footer{ position:relative; margin-top:0; padding:0; background: radial-gradient(ellipse 900px 340px at 50% 0%, rgba(201,160,51,0.07), transparent 68%), linear-gradient(180deg, #0a1628 0%, #081120 55%, #050b16 100%); border-top:none; text-align:center; overflow:hidden; display:block; } .bf-glow{position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.55),transparent);} .bf-rule{position:absolute;top:2px;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.14),transparent);} .bf-inner{max-width:760px;margin:0 auto;padding:56px 24px 40px; display:flex;flex-direction:column;align-items:center;gap:22px;} .bf-medallion{filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));line-height:0;} /* ── Brass engraved nameplate (the door plaque) ── */ .brass-plate{ position:relative;display:inline-flex;flex-direction:column;gap:3px;align-items:center; padding:13px 34px;border-radius:3px; background:linear-gradient(180deg,#e6cd84 0%,#d3ad4e 30%,#c9a033 52%,#a5801f 78%,#7e611f 100%); box-shadow: 0 10px 26px -8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(90,60,10,.5), inset 0 0 0 1px rgba(120,85,20,.35); } .brass-plate::before{content:'';position:absolute;inset:3px;border-radius:2px; border:1px solid rgba(90,60,15,.3);pointer-events:none;} .brass-plate-main{ font-family:'Cinzel',serif;font-weight:700;font-size:16px;letter-spacing:2.5px; color:#3a2c0a;text-transform:uppercase;line-height:1.2; text-shadow:0 1px 0 rgba(255,255,255,.4),0 -1px 1px rgba(60,40,8,.35);} .brass-plate-sub{ font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:1.5px; color:#4d3a12;text-transform:uppercase;opacity:.85; text-shadow:0 1px 0 rgba(255,255,255,.28);} /* ── Directory board ── */ .bf-directory{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px; max-width:660px;padding-top:2px;} .bf-link{ font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:2px; color:rgba(233,226,207,.5);text-decoration:none;text-transform:uppercase; position:relative;transition:color .22s ease;padding-bottom:3px;} .bf-link::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--gold);transition:width .3s ease;} .bf-link:hover{color:var(--gold);} .bf-link:hover::after{width:100%;} .bf-link-primary{color:var(--gold);font-weight:700; text-shadow:0 0 14px rgba(201,160,51,.25);} /* ── Legal + faint rust stamp ── */ .bf-legal{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:10px;} .bf-stamp{ font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:2.5px;text-transform:uppercase; color:rgba(139,26,26,.55);border:1.5px solid rgba(139,26,26,.35); padding:4px 12px;border-radius:2px;transform:rotate(-1.5deg);font-weight:700;} .bf-legal p{font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:1px; color:rgba(233,226,207,.28);text-transform:uppercase;line-height:2;margin:0;} .bf-copy{font-family:'Courier Prime',monospace;font-size:9.5px;letter-spacing:1.5px; color:rgba(233,226,207,.34);} @media (max-width:640px){ .bf-inner{padding:44px 20px 34px;gap:18px;} .brass-plate{padding:11px 22px;} .brass-plate-main{font-size:13px;letter-spacing:1.8px;} .brass-plate-sub{font-size:8px;letter-spacing:1px;} .bf-directory{gap:9px 18px;} .bf-link{font-size:9.5px;letter-spacing:1.5px;} } /* ═══════════ POST-GENERATION CTA — physical bureau (case dossier) ═══════════ */ /* ══ PHYSICAL BUREAU — POST-GENERATION CTA (case dossier on the desk) ══ */ .cta-section{ background: radial-gradient(ellipse 800px 380px at 50% 0%, rgba(201,160,51,0.08), transparent 65%), linear-gradient(180deg,#0c1a30 0%,#0a1628 60%,#070f1d 100%) !important; border:none !important; box-shadow:none !important; padding:44px 24px 52px !important; } .cta-section::before{background:linear-gradient(90deg,transparent,rgba(201,160,51,.5),transparent) !important;height:2px !important;} .cta-section::after{display:none !important;} /* header */ .premium-cta-eyebrow{ background:rgba(139,26,26,.12) !important;border:1px solid rgba(139,26,26,.4) !important; color:rgba(201,160,51,.95) !important;border-radius:2px !important;transform:rotate(-.6deg); box-shadow:0 2px 8px rgba(0,0,0,.3);} .premium-cta-title{color:#f4efe3 !important;} /* grid: documents laid on the desk */ .premium-cta-grid{align-items:start !important;gap:30px !important;padding-top:10px;} /* ── FREE card = flimsy carbon-copy draft (cold, cheap, diminished) ── */ .premium-tier-card.free-tier{ background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(60,80,120,.05) 22px 23px), linear-gradient(160deg,#cdc7b6 0%,#c1bba6 60%,#b6b09a 100%) !important; border:1px solid rgba(70,60,40,.28) !important;border-radius:2px !important; box-shadow:0 10px 22px -12px rgba(0,0,0,.5) !important; transform:rotate(-1.4deg) !important;padding:28px 26px 30px !important; clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%); /* dog-ear */ } .free-tier .tier-header{border-bottom:1px solid rgba(70,60,40,.25) !important;} .free-tier .tier-name{color:#5a5140 !important;font-family:'Courier Prime',monospace !important;letter-spacing:2px !important;} .free-tier .tier-price{color:#4a4234 !important;font-family:'Cinzel',serif !important;} .free-tier .tier-features{color:#4a4234 !important;} .free-tier .tier-features li{color:#5a5140 !important;} .free-tier .tier-features .check{color:#4a6b47 !important;} .free-tier .tier-features .cross{color:#8b1a1a !important;opacity:.7;} .free-tier .draft-stamp{ color:rgba(139,26,26,.6) !important;border:2px solid rgba(139,26,26,.45) !important; font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:3px; padding:4px 10px;border-radius:2px;transform:rotate(9deg); position:absolute;top:16px;right:-6px;background:transparent;} /* ── OFFICIAL card = warm cream filing document (elevated, valuable) ── */ .premium-tier-card.official-tier{ background: radial-gradient(ellipse 340px 220px at 78% 8%, rgba(201,160,51,.10), transparent 60%), linear-gradient(170deg,#f7f2e7 0%,#f1ead9 100%) !important; border:2px solid var(--gold) !important;border-radius:3px !important; box-shadow:0 26px 50px -16px rgba(0,0,0,.62), inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 5px rgba(201,160,51,.35) !important; transform:rotate(.5deg) !important;padding:34px 30px 30px !important;overflow:visible !important; } .official-tier .tier-header{border-bottom:1px solid rgba(201,160,51,.4) !important;} .official-tier .tier-name{color:var(--ink) !important;font-family:'Cinzel',serif !important;font-weight:700 !important;letter-spacing:2px !important;} .official-tier .tier-price{color:var(--ink) !important;font-family:'Cinzel',serif !important;} .official-tier .tier-features{color:var(--ink-faded) !important;} .official-tier .tier-features li{color:var(--ink-faded) !important;} .official-tier .tier-features li strong{color:var(--ink) !important;} .official-tier .tier-features .check{color:#1a3d2b !important;} .official-tier .secure-checkout{color:rgba(61,47,26,.7) !important;} .official-tier .uniqueness-signal{color:rgba(61,47,26,.6) !important;opacity:1 !important;} .official-glow{display:none !important;} /* brass filed-tab replacing the pill 'Most Selected' */ .official-tier .tier-popular{ background:linear-gradient(180deg,#e6cd84,#c9a033 52%,#8a6d1f) !important; color:#3a2c0a !important;font-family:'Cinzel',serif !important;font-weight:700 !important; letter-spacing:2.5px !important;border-radius:2px !important;top:-13px !important; box-shadow:0 6px 14px -4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px rgba(90,60,10,.4) !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important;padding:5px 20px !important;} /* ── Button = pressed brass authorization plate ── */ .official-tier .premium-cta-btn{ background:linear-gradient(180deg,#e6cd84 0%,#d3ad4e 30%,#c9a033 52%,#a5801f 78%,#7e611f 100%) !important; border:none !important;border-radius:3px !important;padding:0 !important;margin-top:6px !important; box-shadow:0 10px 22px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35) !important; min-height:60px;display:flex;align-items:center;justify-content:center; transition:transform .12s ease,box-shadow .12s ease !important;position:relative;overflow:hidden; } .official-tier .premium-cta-btn:hover{ transform:translateY(1px) !important; box-shadow:0 6px 14px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35) !important;} .official-tier .premium-cta-btn .btn-text{ display:flex !important;flex-direction:column;line-height:1.2; font-family:'Cinzel',serif !important;font-weight:700 !important;font-size:15px !important;letter-spacing:1.5px !important; color:#3a2c0a !important;text-shadow:0 1px 0 rgba(255,255,255,.4) !important;text-transform:uppercase;padding:12px 18px;} .official-tier .premium-cta-btn .btn-shine,.official-tier .premium-cta-btn .btn-glow-ring{display:none !important;} /* ── free-notice = rust rubber-stamp slip ── */ .free-notice{ background:rgba(139,26,26,.06) !important;border:1.5px solid rgba(139,26,26,.3) !important; border-radius:2px !important;transform:rotate(-.4deg);margin-top:20px !important;padding:13px 16px !important;} .free-notice p{color:rgba(244,239,227,.85) !important;font-family:'Courier Prime',monospace;} .free-notice p strong{color:var(--gold) !important;} @media (max-width:640px){ /* keep everything inside the viewport — the long eyebrow + button text otherwise overflow and get clipped by .cta-section{overflow:hidden} */ .premium-cta-container{width:100% !important;max-width:100% !important;box-sizing:border-box !important;} .premium-cta-header{max-width:100% !important;} .premium-cta-eyebrow{ white-space:normal !important;flex-wrap:wrap !important;justify-content:center !important; text-align:center !important;max-width:100% !important; font-size:8.5px !important;letter-spacing:1.4px !important;line-height:1.5 !important;padding:5px 12px !important;} .premium-cta-subtitle{letter-spacing:.2px !important;font-size:12px !important;} .premium-cta-grid{grid-template-columns:1fr !important;gap:34px !important;} .premium-tier-card{width:100% !important;max-width:100% !important;box-sizing:border-box !important;min-width:0 !important;} .zeigarnik-bar{max-width:100% !important;} .premium-tier-card.free-tier{transform:rotate(-.8deg) !important;padding:24px 20px 26px !important;} .premium-tier-card.official-tier{transform:rotate(.3deg) !important;padding:30px 18px 26px !important;} .official-tier .premium-cta-btn{min-height:54px;} .official-tier .premium-cta-btn .btn-text{ font-size:12px !important;letter-spacing:.6px !important;white-space:normal !important; text-align:center !important;padding:10px 12px !important;} } /* ═══════════ SUBPAGE SHELL — physical bureau (shared hero + filing cards) ═══════════ */ /* ══ PHYSICAL BUREAU — SUBPAGE SHELL (shared across about/faq/terms/privacy/security) ══ */ /* top-bar = engraved brass door lintel */ .top-bar{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border-bottom:1px solid rgba(201,160,51,.3) !important; color:rgba(201,160,51,.7) !important; font-family:'Courier Prime',monospace !important;letter-spacing:2px !important; box-shadow:inset 0 -1px 0 rgba(0,0,0,.4); } /* page-hero = frosted-glass office-door header with etched seal + brass rule */ .page-hero{ position:relative;overflow:hidden; padding:64px 22px 46px !important; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, rgba(255,255,255,0.008) 1px 3px), radial-gradient(ellipse 620px 320px at 50% 22%, rgba(243,227,180,0.10), transparent 66%), linear-gradient(160deg,#16283f 0%,#0c1a2e 62%,#0a1628 100%) !important; border-bottom:none !important; } .page-hero::before{ /* etched circular seal watermark, behind text */ content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%); width:66px;height:66px;border-radius:50%;z-index:0; border:1.5px solid rgba(201,160,51,.20); box-shadow:inset 0 0 0 4px rgba(201,160,51,.05); pointer-events:none;} .page-hero .page-eyebrow,.page-hero .page-title,.page-hero .page-sub{position:relative;z-index:2;} .page-hero::after{ /* brass rule under the header */ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.55),transparent);} .page-eyebrow{ font-family:'Courier Prime',monospace !important;font-size:10px !important;letter-spacing:3.5px !important; text-transform:uppercase !important;color:rgba(201,160,51,.85) !important; display:inline-block;padding:5px 14px;border:1px solid rgba(201,160,51,.3);border-radius:2px; background:rgba(201,160,51,.06);margin-bottom:14px !important;} .page-title{ font-family:'Cinzel',serif !important;color:#f4efe3 !important; text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 26px rgba(201,160,51,.16) !important;} .page-sub{ font-family:'Courier Prime',monospace !important;color:rgba(244,239,227,.55) !important; letter-spacing:2px !important;text-transform:uppercase !important;font-size:11px !important;margin-top:12px !important;} /* section eyebrow + rule → engraved file-divider */ .sect-eyebrow{color:rgba(201,160,51,.55) !important;letter-spacing:3px !important;} .sect-rule{background:linear-gradient(90deg,rgba(201,160,51,.4),transparent) !important;height:1px !important;} /* content boxes → cream filing cards on the desk */ .doc-box{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(201,160,51,.5) !important;border-left:4px solid var(--gold) !important; border-radius:2px !important;color:var(--ink-faded) !important; box-shadow:0 16px 34px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6) !important;} .doc-box, .doc-box p, .doc-box li{color:var(--ink-faded) !important;} .doc-box h2,.doc-box h3,.doc-box strong{color:var(--ink) !important;} .critical-box{ background:linear-gradient(168deg,#faf4ea,#f2ead8) !important; border:1.5px solid rgba(139,26,26,.45) !important;border-radius:2px !important; box-shadow:0 16px 34px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55) !important; position:relative;} .critical-box h3{color:#8b1a1a !important;} .critical-box, .critical-box p, .critical-box li{color:var(--ink-faded) !important;} .contact-box{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.35) !important;border-radius:2px !important; box-shadow:0 10px 24px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05) !important;} .effective{ font-family:'Courier Prime',monospace !important;color:rgba(201,160,51,.7) !important; border:1px dashed rgba(201,160,51,.35);border-radius:2px;padding:8px 14px;display:inline-block; letter-spacing:1.5px;} @media (max-width:640px){ .page-hero{padding:48px 18px 34px !important;} .page-hero::before{width:54px;height:54px;top:10px;} .page-eyebrow{font-size:8.5px !important;letter-spacing:2px !important;} .page-sub{font-size:9.5px !important;letter-spacing:1.2px !important;} } /* ═══════════ ABOUT · ACTIVE DIVISIONS → manila folders (about.html inline .dept-card overridden) ═══════════ */ /* ══ ACTIVE DIVISIONS → manila file folders with brass index tab ══ */ .dept-grid{gap:16px 16px !important;margin-top:30px !important;} .dept-card{ background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(120,90,40,.04) 25px 26px), linear-gradient(158deg,#e9dcb8 0%,#e0d0a4 55%,#d4c191 100%) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; border:1px solid rgba(120,90,40,.35) !important;border-top:none !important;border-radius:0 3px 3px 3px !important; box-shadow:0 12px 26px -14px rgba(40,28,8,.6),inset 0 1px 0 rgba(255,255,255,.4) !important; padding:26px 22px 22px !important;overflow:visible !important;margin-top:16px; transition:transform .3s cubic-bezier(.34,1.2,.5,1),box-shadow .3s ease !important; } .dept-card::before{ /* brass index tab on top-left */ content:'' !important;position:absolute !important;top:-14px !important;left:0 !important; width:120px !important;height:16px !important;border-radius:4px 4px 0 0 !important; background:linear-gradient(180deg,#e6cd84,#c9a033 60%,#8a6d1f) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 -1px 3px rgba(0,0,0,.2) !important; left:14px !important;opacity:1 !important;transition:none !important;} .dept-card:hover{transform:translateY(-4px) rotate(-.4deg) !important; box-shadow:0 18px 34px -14px rgba(40,28,8,.7),inset 0 1px 0 rgba(255,255,255,.4) !important; border-color:rgba(120,90,40,.5) !important;} .dept-card:hover::before{left:14px !important;} .dept-card .dc-icon{opacity:.85 !important;filter:saturate(.9);} .dept-card .dc-class{color:#7e611f !important;font-family:'Courier Prime',monospace !important;font-weight:700 !important;} .dept-card .dc-name{color:#2a1f0a !important;} .dept-card:hover .dc-name{color:#7e611f !important;} .dept-card .dc-desc{color:#4a3c22 !important;} @media (max-width:640px){ .dept-grid{grid-template-columns:1fr !important;} .dept-card::before{width:100px !important;} } /* ═══════════ DOCKET / HOW-IT-WORKS / HOME-FAQ — physical bureau ═══════════ */ /* ══ PHYSICAL BUREAU — DOCKET (case files on the record) ══ */ .docket-case{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(201,160,51,.4) !important;border-top:3px solid var(--gold) !important; border-radius:2px !important; box-shadow:0 14px 30px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6) !important; transition:transform .25s ease,box-shadow .25s ease,opacity .45s ease !important;} .docket-case:hover{transform:translateY(-4px) rotate(-.4deg) !important; box-shadow:0 22px 40px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6) !important;} .docket-case-status{ border:1px solid rgba(139,26,26,.4);border-radius:2px;padding:2px 7px !important; background:rgba(139,26,26,.06);opacity:1 !important;font-weight:700 !important;} .docket-stamp{transform:rotate(-1deg);border-radius:2px !important; box-shadow:0 2px 8px rgba(139,26,26,.15);} /* ══ HOW IT WORKS (numbered filing procedure) ══ */ .how-item{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.28) !important;border-top:2px solid rgba(201,160,51,.5) !important; border-radius:2px !important; box-shadow:0 12px 26px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) !important; transition:transform .25s ease,box-shadow .25s ease !important;} .how-item:hover{transform:translateY(-4px) !important; box-shadow:0 20px 36px -16px rgba(0,0,0,.6),0 0 40px rgba(201,160,51,.08) !important;} .how-number{color:rgba(201,160,51,.14) !important;font-family:'Cinzel',serif !important;} .how-step-label{color:rgba(201,160,51,.6) !important;letter-spacing:2.5px !important;} /* ══ HOME FAQ (filed index cards) ══ */ .faq-section{border-top:1px solid rgba(201,160,51,.2) !important;} .faq-label{ display:inline-block;color:rgba(201,160,51,.8) !important;opacity:1 !important; border:1px solid rgba(201,160,51,.3);border-radius:2px;padding:4px 12px; background:rgba(201,160,51,.06);left:50%;position:relative;transform:translateX(-50%);} .faq-item{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(201,160,51,.35) !important;border-left:3px solid var(--gold) !important; border-radius:2px !important; box-shadow:0 10px 22px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55) !important;} .faq-q{color:var(--ink) !important;font-family:'Cinzel',serif !important;opacity:1 !important;} .faq-a{color:var(--ink-faded) !important;} .faq-a a{color:#8a6d1f !important;} .faq-toggle-btn{ background:linear-gradient(180deg,#e6cd84,#c9a033 52%,#8a6d1f) !important; color:#3a2c0a !important;font-family:'Cinzel',serif !important;font-weight:700 !important; border:none !important;border-radius:2px !important;letter-spacing:1.5px !important; box-shadow:0 6px 14px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5) !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important;padding:9px 20px !important;margin-top:20px;} .docket-case .docket-case-no{color:var(--navy) !important;opacity:.8 !important;} .docket-case .docket-case-class{color:#8b1a1a !important;} .docket-case .docket-case-title{color:var(--navy) !important;} .docket-case .docket-case-excerpt{color:var(--ink-faded) !important;} /* ═══════════ SUBPAGE SHELL (hero + content boxes) — physical bureau ═══════════ */ /* ══ PHYSICAL BUREAU — SUBPAGE SHELL (shared across about/faq/terms/privacy/security) ══ */ /* top-bar = engraved brass door lintel */ .top-bar{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border-bottom:1px solid rgba(201,160,51,.3) !important; color:rgba(201,160,51,.7) !important; font-family:'Courier Prime',monospace !important;letter-spacing:2px !important; box-shadow:inset 0 -1px 0 rgba(0,0,0,.4); } /* page-hero = frosted-glass office-door header with etched seal + brass rule */ .page-hero{ position:relative;overflow:hidden; padding:64px 22px 46px !important; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, rgba(255,255,255,0.008) 1px 3px), radial-gradient(ellipse 620px 320px at 50% 22%, rgba(243,227,180,0.10), transparent 66%), linear-gradient(160deg,#16283f 0%,#0c1a2e 62%,#0a1628 100%) !important; border-bottom:none !important; } .page-hero::before{ /* etched circular seal watermark, behind text */ content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%); width:66px;height:66px;border-radius:50%;z-index:0; border:1.5px solid rgba(201,160,51,.20); box-shadow:inset 0 0 0 4px rgba(201,160,51,.05); pointer-events:none;} .page-hero .page-eyebrow,.page-hero .page-title,.page-hero .page-sub{position:relative;z-index:2;} .page-hero::after{ /* brass rule under the header */ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.55),transparent);} .page-eyebrow{ font-family:'Courier Prime',monospace !important;font-size:10px !important;letter-spacing:3.5px !important; text-transform:uppercase !important;color:rgba(201,160,51,.85) !important; display:inline-block;padding:5px 14px;border:1px solid rgba(201,160,51,.3);border-radius:2px; background:rgba(201,160,51,.06);margin-bottom:14px !important;} .page-title{ font-family:'Cinzel',serif !important;color:#f4efe3 !important; text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 26px rgba(201,160,51,.16) !important;} .page-sub{ font-family:'Courier Prime',monospace !important;color:rgba(244,239,227,.55) !important; letter-spacing:2px !important;text-transform:uppercase !important;font-size:11px !important;margin-top:12px !important;} /* section eyebrow + rule → engraved file-divider */ .sect-eyebrow{color:rgba(201,160,51,.55) !important;letter-spacing:3px !important;} .sect-rule{background:linear-gradient(90deg,rgba(201,160,51,.4),transparent) !important;height:1px !important;} /* content boxes → cream filing cards on the desk */ .doc-box{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(201,160,51,.5) !important;border-left:4px solid var(--gold) !important; border-radius:2px !important;color:var(--ink-faded) !important; box-shadow:0 16px 34px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6) !important;} .doc-box, .doc-box p, .doc-box li{color:var(--ink-faded) !important;} .doc-box h2,.doc-box h3,.doc-box strong{color:var(--ink) !important;} .critical-box{ background:linear-gradient(168deg,#faf4ea,#f2ead8) !important; border:1.5px solid rgba(139,26,26,.45) !important;border-radius:2px !important; box-shadow:0 16px 34px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55) !important; position:relative;} .critical-box h3{color:#8b1a1a !important;} .critical-box, .critical-box p, .critical-box li{color:var(--ink-faded) !important;} .contact-box{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.35) !important;border-radius:2px !important; box-shadow:0 10px 24px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05) !important;} .effective{ font-family:'Courier Prime',monospace !important;color:rgba(201,160,51,.7) !important; border:1px dashed rgba(201,160,51,.35);border-radius:2px;padding:8px 14px;display:inline-block; letter-spacing:1.5px;} /* ═══════════ ABOUT interior — DEFCON ladder / timeline / fee cards ═══════════ */ .defcon-scale{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.28) !important;border-top:2px solid rgba(201,160,51,.5) !important; border-radius:2px !important;padding:8px 20px !important; box-shadow:0 14px 30px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) !important;} .defcon-row{border-bottom:1px solid rgba(201,160,51,.1) !important;} .process-timeline::before{background:linear-gradient(180deg,var(--gold),rgba(201,160,51,.15)) !important;width:2px !important;} .pt-step::before{ box-shadow:0 0 0 3px rgba(10,22,40,.9),0 0 10px rgba(201,160,51,.4) !important; background:radial-gradient(circle at 35% 30%,#f3e3b4,#c9a033 55%,#8a6d1f) !important;} .tier-cards .tier-card{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.28) !important;border-top:2px solid rgba(201,160,51,.45) !important; border-radius:2px !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important; box-shadow:0 12px 26px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) !important;} .tier-cards .tier-card.tier-paid{ border:1px solid var(--gold) !important;border-top:3px solid var(--gold) !important; box-shadow:0 16px 32px -14px rgba(0,0,0,.55),0 0 34px rgba(201,160,51,.08),inset 0 1px 0 rgba(255,255,255,.06) !important;} /* ═══════════ ARCHIVE — 151 category cards as paper cards in the drawer ═══════════ */ .complaint-card{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; -webkit-backdrop-filter:none !important;backdrop-filter:none !important; border:1px solid rgba(120,90,30,.28) !important;border-radius:2px !important; box-shadow:0 10px 22px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6) !important;} .complaint-card:hover{transform:translateY(-3px) rotate(-.3deg) !important; box-shadow:0 18px 32px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6) !important;} .complaint-card .complaint-title{color:var(--navy) !important;} .complaint-card:hover .complaint-title{color:#8b1a1a !important;} .complaint-card .complaint-desc{color:var(--ink-faded) !important;opacity:.85;} /* ═══════════ FIX PASS — bold visibility, brass FILE buttons, footer stamp ═══════════ */ /* ══ FIX 1: bold text visible inside cream filing cards (was white-on-cream) ══ */ .critical-box strong,.critical-box b,.doc-box strong,.doc-box b, .faq-item .faq-a strong,.faq-item .faq-a b,.docket-case strong{color:var(--ink) !important;} .critical-box p,.critical-box li{color:var(--ink-faded) !important;} /* ══ FIX 3: footer 'FILED · NOT LEGALLY BINDING' stamp — readable on navy ══ */ .bf-stamp{ color:#e6a99a !important; /* warm rust, bright enough on navy */ border:1.5px solid rgba(214,120,100,.55) !important; background:rgba(139,26,26,.14) !important; box-shadow:0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important; text-shadow:0 1px 1px rgba(0,0,0,.4) !important;} /* ══ FIX 2: unified pressed-brass 'FILE' plaque (design-direction door plate) ══ */ .cta-btn,.classified-promo-cta{ background:linear-gradient(180deg,#e6cd84 0%,#d3ad4e 30%,#c9a033 52%,#a5801f 78%,#7e611f 100%) !important; color:#3a2c0a !important;border:none !important;border-radius:3px !important; font-family:'Cinzel',serif !important;font-weight:700 !important;letter-spacing:2px !important; text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.4) !important; box-shadow:0 10px 22px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35) !important; transition:transform .12s ease,box-shadow .12s ease !important;} .cta-btn:hover,.classified-promo-cta:hover{ transform:translateY(1px) !important; box-shadow:0 6px 14px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35) !important;} .cta-btn::after,.classified-promo-cta::after{display:none !important;} /* gift/self mode tabs — active = brass plate, inactive = engraved */ .mode-tab{font-family:'Courier Prime',monospace !important;color:rgba(201,160,51,.6) !important; border-radius:2px !important;transition:all .15s ease !important;} .mode-tab.active{ background:linear-gradient(180deg,#e6cd84,#c9a033 52%,#8a6d1f) !important;color:#3a2c0a !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important;font-weight:700 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(90,60,10,.4),0 3px 8px -3px rgba(0,0,0,.5) !important;} /* ═══════════ TYPOGRAPHY PASS — official-document text design ═══════════ */ /* ══ TYPOGRAPHY — "official document" text design (existing fonts only) ══ */ /* 1 · Illuminated drop cap on document openers (subpage summary boxes) */ .doc-box > p:first-of-type::first-letter{ float:left;font-family:'Cinzel',serif;font-weight:700; font-size:3.4em;line-height:.82;padding:6px 12px 0 0;margin-top:2px; color:#8a6d1f;text-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 3px rgba(90,60,10,.28);} /* 2 · Embossed / engraved display headings (light-on-dark) — pressed into surface */ .page-title,.docket-title,.faq-title,.section-title{ text-shadow:0 1px 0 rgba(255,255,255,.10),0 -1px 1px rgba(0,0,0,.5),0 2px 22px rgba(201,160,51,.14) !important;} /* 2b · Nav brand title — SAME engraved treatment site-wide (home .nav-brand + subpages/complaints .nav-logo) so the topmost "BUREAU OF MINOR SUFFERINGS" is consistent everywhere. Dim-gold, pressed into the navy bar. */ .nav-brand,.nav-logo{ color:var(--gold) !important; text-shadow:0 1px 0 rgba(255,255,255,.10),0 -1px 1px rgba(0,0,0,.5),0 2px 22px rgba(201,160,51,.14) !important;} .nav-brand:hover,.nav-logo:hover{ text-shadow:0 1px 0 rgba(255,255,255,.14),0 -1px 1px rgba(0,0,0,.5),0 0 20px rgba(201,160,51,.35) !important;} /* engraved headings on cream cards (dark-on-light) */ .doc-box h2,.doc-box h3,.faq-q,.docket-case-title{ text-shadow:0 1px 0 rgba(255,255,255,.55) !important;} /* 3 · Stamped field-labels — consistent bracket ornament on section eyebrows */ .faq-label,.sect-eyebrow,.docket-stamp{position:relative;} .faq-label::before,.faq-label::after{ content:'';position:absolute;top:50%;width:16px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.5));} .faq-label::before{right:100%;margin-right:10px;transform:scaleX(-1);} .faq-label::after{left:100%;margin-left:10px;} /* 4 · Better prose rhythm — constrain measure + open leading on long-form mono */ .doc-box > p,.critical-box p{max-width:64ch;line-height:1.85 !important;} .doc-box h2{margin-top:1.6em;} /* ═══════════ HOME MICRO-SURFACES — physical bureau ═══════════ */ /* 1 · Filing-now ticker → brass-edged live dispatch strip (before "File Your Case") */ .filing-ticker{ background:linear-gradient(180deg,#12233d,#0b1526) !important; border:1px solid rgba(201,160,51,.28) !important;border-left:3px solid var(--gold) !important; border-radius:2px !important; box-shadow:0 8px 20px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05) !important;} .filing-ticker-dot{display:inline-block;width:7px;height:7px;border-radius:50%; background:#4caf6a;box-shadow:0 0 8px rgba(76,175,106,.7);margin-right:8px;vertical-align:middle; animation:tickerPulse 1.6s ease-in-out infinite;} @keyframes tickerPulse{0%,100%{opacity:1}50%{opacity:.4}} .filing-ticker-name{color:var(--gold) !important;font-weight:700;letter-spacing:.5px;} .filing-ticker-loc{color:rgba(245,240,232,.4) !important;} .filing-ticker-stat{color:rgba(245,240,232,.62) !important;} /* 2 · Sticky payment bar → brass authorization ledger fixed to the base */ .sticky-unlock-bar{ background:linear-gradient(180deg,#12233d,#0a1424) !important; border-top:2px solid var(--gold) !important; box-shadow:0 -10px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(240,216,120,.16) !important; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);} .sticky-unlock-title{color:#f4efe3 !important;text-shadow:0 1px 0 rgba(0,0,0,.4);} .sticky-unlock-progress-fill{background:linear-gradient(90deg,#e6cd84,var(--gold)) !important;} .sticky-unlock-btn{ background:linear-gradient(180deg,#e6cd84 0%,#c9a033 52%,#8a6d1f 100%) !important; color:#3a2c0a !important;border:none !important;border-radius:3px !important; font-family:'Cinzel',serif !important;font-weight:700 !important;letter-spacing:1px !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important;white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(90,60,10,.4),0 4px 10px -3px rgba(0,0,0,.5) !important; transition:transform .12s ease !important;} .sticky-unlock-btn:hover{transform:translateY(1px) !important;} /* 3 · Error box → official "Filing Rejected" rejection notice (cream slip + rust stamp) */ .error-box{ background:linear-gradient(168deg,#faf4ea,#f2ead8) !important; border:1.5px solid rgba(139,26,26,.4) !important;border-radius:2px !important; color:var(--ink-faded) !important; box-shadow:0 16px 34px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55) !important; text-align:left !important;position:relative;} .error-box-head{margin-bottom:10px;} .error-box-stamp{ display:inline-block;font-family:'Courier Prime',monospace;font-size:10px;font-weight:700; letter-spacing:2.5px;text-transform:uppercase;color:#8b1a1a; border:2px solid rgba(139,26,26,.5);border-radius:2px;padding:3px 10px;transform:rotate(-1.5deg); box-shadow:0 1px 6px rgba(139,26,26,.12);} .error-box-msg{font-family:'Courier Prime',monospace;font-size:12px;line-height:1.6;color:var(--ink-faded);margin-bottom:14px;} .error-box-msg strong{color:#8b1a1a;} .error-retry-btn{ background:linear-gradient(180deg,#e6cd84 0%,#c9a033 52%,#8a6d1f 100%); color:#3a2c0a;border:none;border-radius:3px;padding:9px 20px;cursor:pointer; font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase; text-shadow:0 1px 0 rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(90,60,10,.4),0 4px 10px -3px rgba(0,0,0,.5); transition:transform .12s ease;} .error-retry-btn:hover{transform:translateY(1px);} /* 4 · BACKLOG "file your own" CTA → released case-file slip on the desk (physical bureau: cream filing paper + rust stamps + pressed-brass plate) */ .backlog-cta{text-align:center;} .backlog-slip{ position:relative;max-width:560px;margin:0 auto;padding:38px 36px 34px; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,40,.05) 26px 27px), linear-gradient(168deg,#f7f2e7 0%,#efe7d5 100%); border:1px solid rgba(201,160,51,.4);border-top:3px solid var(--gold);border-radius:2px; box-shadow:0 26px 50px -16px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.6); transform:rotate(-.5deg); } .backlog-slip-stamp{ position:absolute;top:16px;right:-8px;transform:rotate(8deg); font-family:'Courier Prime',monospace;font-weight:700;font-size:10px;letter-spacing:2.5px; color:rgba(139,26,26,.6);border:2px solid rgba(139,26,26,.45);border-radius:2px; padding:4px 10px;text-transform:uppercase;pointer-events:none;} .backlog-slip-eyebrow{ display:inline-block;margin-bottom:18px;padding:5px 13px;transform:rotate(-1.2deg); font-family:'Courier Prime',monospace;font-weight:700;font-size:10px;letter-spacing:2.5px; color:rgba(139,26,26,.8);background:rgba(139,26,26,.05); border:1.5px solid rgba(139,26,26,.4);border-radius:2px;text-transform:uppercase;} .backlog-slip-title{ font-family:'Cinzel',serif;font-weight:700;font-size:clamp(24px,4vw,31px); color:var(--ink);margin:0 0 14px;line-height:1.25;} .backlog-slip-rule{height:1px;max-width:300px;margin:0 auto 16px; background:linear-gradient(90deg,transparent,rgba(201,160,51,.55),transparent);} .backlog-slip-sub{ font-family:'Courier Prime',monospace;font-size:12.5px;line-height:1.9; color:rgba(61,47,26,.85);max-width:420px;margin:0 auto 26px;} .backlog-brass-btn{ display:inline-flex;flex-direction:column;align-items:center;gap:3px; padding:14px 34px;cursor:pointer;border:none;border-radius:3px; background:linear-gradient(180deg,#e6cd84 0%,#d3ad4e 30%,#c9a033 52%,#a5801f 78%,#7e611f 100%); box-shadow:0 10px 22px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35); transition:transform .12s ease,box-shadow .12s ease;} .backlog-brass-btn:hover{transform:translateY(1px); box-shadow:0 6px 14px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35);} .backlog-brass-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);} .backlog-brass-main{ font-family:'Cinzel',serif;font-weight:700;font-size:15px;letter-spacing:2px; color:#3a2c0a;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.4);} .backlog-brass-sub{ font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:1.5px; color:#4d3a12;text-transform:uppercase;} @media (max-width:640px){ .backlog-slip{padding:32px 20px 28px;transform:none;} .backlog-slip-stamp{right:14px;top:10px;font-size:9px;transform:rotate(6deg);} .backlog-brass-btn{width:100%;padding:14px 20px;} } /* ═══════════ INCINERATION / RETENTION WINDOW — cream notice, ember countdown ═══════════ */ .cert-retention-bar{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(139,26,26,.35) !important;border-left:4px solid #8b1a1a !important; border-radius:2px !important;padding:14px 18px !important; margin:40px auto !important;max-width:560px;text-align:center;cursor:pointer; box-shadow:0 14px 30px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55) !important; transition:transform .18s ease,box-shadow .18s ease;} .cert-retention-bar:hover{transform:translateY(-2px); box-shadow:0 20px 38px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55) !important;} .cert-retention-head{margin-bottom:7px;} .cert-retention-stamp{ display:inline-block;font-family:'Courier Prime',monospace;font-size:9.5px;font-weight:700; letter-spacing:2.5px;text-transform:uppercase;color:#8b1a1a; border:1.5px solid rgba(139,26,26,.4);border-radius:2px;padding:3px 11px;transform:rotate(-1deg);} .cert-retention-msg{ font-family:'Courier Prime',monospace;font-size:11px;letter-spacing:.5px;color:var(--ink-faded);line-height:1.5;} .cert-retention-time{font-weight:700;color:#8b1a1a;font-size:13px;letter-spacing:1px;} .cert-retention-track{ margin-top:10px;height:4px;background:rgba(139,26,26,.12);border-radius:2px;overflow:hidden; box-shadow:inset 0 1px 2px rgba(90,20,20,.15);} .cert-retention-fill{ height:100%;width:100%;border-radius:2px;transition:width 1s linear; background:linear-gradient(90deg,#c9a033,#c1541f 60%,#8b1a1a) !important; box-shadow:0 0 8px rgba(193,84,31,.5);} /* ═══════════ EXIT MODAL — physical "FINAL NOTICE" document ═══════════ */ .premium-exit-modal{ background:linear-gradient(168deg,#f7f2e7,#efe7d5) !important; border:1px solid rgba(201,160,51,.5) !important;border-top:4px solid #8b1a1a !important; border-radius:3px !important; box-shadow:0 30px 70px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6) !important; overflow:hidden;} .premium-exit-aurora{display:none !important;} .premium-exit-header{border-bottom:1px dashed rgba(139,26,26,.25);padding-bottom:14px !important;margin-bottom:4px;} .premium-exit-alert{ color:#8b1a1a !important;font-family:'Courier Prime',monospace !important;font-weight:700 !important; letter-spacing:2.5px !important;text-transform:uppercase; border:1.5px solid rgba(139,26,26,.4);border-radius:2px;padding:3px 10px;display:inline-block; transform:rotate(-1deg);} .premium-exit-title{ color:var(--ink) !important;font-family:'Cinzel',serif !important;font-weight:700 !important; text-shadow:0 1px 0 rgba(255,255,255,.5) !important;} .premium-exit-cert-title{color:#8a6d1f !important;font-style:italic;} .premium-exit-desc{color:var(--ink-faded) !important;font-family:'Courier Prime',monospace !important;} .premium-exit-desc strong{color:#8b1a1a !important;} .premium-exit-perks{ background:rgba(201,160,51,.06) !important;border:1px solid rgba(201,160,51,.3) !important; border-radius:2px !important;padding:14px 16px !important;} .premium-perk{color:var(--ink-faded) !important;font-family:'Courier Prime',monospace !important;} .premium-perk .perk-check{color:#1a3d2b !important;font-weight:700;} .premium-exit-countdown{ color:#8b1a1a !important;font-size:32px !important; text-shadow:0 1px 2px rgba(139,26,26,.2) !important;} .premium-exit-countdown-label{color:rgba(61,47,26,.55) !important;} .premium-exit-cta{ background:linear-gradient(180deg,#e6cd84 0%,#c9a033 52%,#8a6d1f 100%) !important; color:#3a2c0a !important;border:none !important;border-radius:3px !important; font-family:'Cinzel',serif !important;font-weight:700 !important;letter-spacing:1.5px !important; text-shadow:0 1px 0 rgba(255,255,255,.4) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(90,60,10,.4),0 6px 16px -4px rgba(0,0,0,.4) !important; transition:transform .12s ease !important;} .premium-exit-cta:hover{transform:translateY(1px) !important;} .premium-exit-cta .btn-because{color:#4d3a12 !important;} .premium-exit-dismiss{color:rgba(61,47,26,.5) !important;} .premium-exit-dismiss:hover{color:rgba(139,26,26,.7) !important;} .exit-modal-close{color:rgba(61,47,26,.5) !important;background:rgba(139,26,26,.06) !important;border:1px solid rgba(139,26,26,.2) !important;} .exit-modal-close:hover{color:#8b1a1a !important;} /* ── FUNNEL COPY TOGGLE (reach vs convert) ────────────────────────────────── Source of truth = js/funnel.js, which sets html.funnel-reach / .funnel-convert. Default (convert, or before JS runs) shows .funnel-convert-only and hides .funnel-reach-only — revenue-safe: the paywall copy is what renders if the flag/JS is unavailable. html.funnel-reach flips the two. Apply these classes to elements whose natural display is correct when shown (span→inline, li→list-item, p/div→block); do not put them on flex/grid containers — wrap the changing text/children instead. */ .funnel-reach-only{display:none !important;} html.funnel-reach .funnel-reach-only{display:revert !important;} html.funnel-reach .funnel-convert-only{display:none !important;} /* ── REACH-FUNNEL RELEASE SLIP + KEEPSAKE BAR — the one conversion moment ─── Physical bureau: the post-gen CTA is Form BMS-9, a certified-copy requisition slip extending the .backlog-slip family (cream ruled paper, stamps, pressed brass). Release stamps are GREEN ink (approved/released); rust stays for denials and pending actions. Dossier rows are typed per case with dotted leader lines, so no two slips read the same. */ .reach-cta{text-align:center;} .release-slip{transform:rotate(.4deg);padding-top:54px;} /* different sheet on the desk; top padding clears the stamp zone */ .release-slip-stamp{ color:rgba(26,61,43,.68);border-color:rgba(26,61,43,.5);transform:rotate(-7deg); box-shadow:0 1px 6px rgba(26,61,43,.12);} .release-slip-dossier{max-width:400px;margin:0 auto 18px;text-align:left;} .release-slip-row{ display:flex;align-items:baseline;gap:8px;padding:3px 0; font-family:'Courier Prime',monospace;font-size:11.5px;letter-spacing:.5px;} .release-slip-row span{ flex:0 0 auto;color:rgba(61,47,26,.55);text-transform:uppercase; font-size:10px;letter-spacing:1.5px;white-space:nowrap;} .release-slip-row i{flex:1 1 auto;border-bottom:1px dotted rgba(120,90,40,.4);transform:translateY(-3px);} .release-slip-row b{ flex:0 1 auto;color:var(--ink);font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%;} .release-brass-btn{padding:16px 38px;} .release-brass-btn .backlog-brass-main{font-size:16px;} .release-slip-note{ margin-top:16px;font-family:'Courier Prime',monospace;font-size:10px; letter-spacing:2.5px;text-transform:uppercase;color:rgba(139,26,26,.45);} @media (max-width:640px){ .release-slip{transform:none;padding-top:58px;} .release-slip-row b{max-width:68%;font-size:10.5px;letter-spacing:0;} /* full case no. must survive — never truncate the ref */ .release-brass-btn .backlog-brass-main{font-size:12.5px;letter-spacing:1px;} .release-brass-btn .backlog-brass-sub{letter-spacing:1px;} /* keeps the wrap at a “·”, not inside “one-time” */ .release-slip-note{letter-spacing:1.5px;} } /* Keepsake bar — a paper docket strip slid across the records counter. Twin of #sticky-unlock-bar (same fixed-bottom slot, z-index, .visible toggle) but cream paper + brass instead of navy + gold. */ .sticky-keepsake-bar{ display:none;position:fixed;bottom:0;left:0;right:0;z-index:8000; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,40,.05) 26px 27px), linear-gradient(180deg,#f7f2e7,#efe7d5); border-top:3px solid var(--gold); box-shadow:0 -14px 34px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6); animation:keepsakeRise .3s ease;} .sticky-keepsake-bar.visible{display:block;} .sticky-keepsake-inner{ max-width:960px;margin:0 auto;padding:10px 18px; display:flex;align-items:center;justify-content:space-between;gap:14px;} .sticky-keepsake-left{display:flex;align-items:center;gap:12px;min-width:0;} .sticky-keepsake-stamp{ flex:0 0 auto;transform:rotate(-4deg); font-family:'Courier Prime',monospace;font-weight:700;font-size:9px; letter-spacing:2px;text-transform:uppercase; color:rgba(26,61,43,.7);border:1.5px solid rgba(26,61,43,.5);border-radius:2px;padding:3px 8px;} .sticky-keepsake-text{min-width:0;text-align:left;} .sticky-keepsake-title{ font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:.3px; color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sticky-keepsake-sub{ font-family:'Courier Prime',monospace;font-size:10.5px;letter-spacing:.3px; color:rgba(61,47,26,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sticky-keepsake-btn{ flex:0 0 auto;cursor:pointer;border:none;border-radius:3px;padding:11px 20px; background:linear-gradient(180deg,#e6cd84 0%,#d3ad4e 30%,#c9a033 52%,#a5801f 78%,#7e611f 100%); font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:1.5px; text-transform:uppercase;color:#3a2c0a;text-shadow:0 1px 0 rgba(255,255,255,.4); box-shadow:0 6px 14px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(90,60,10,.5),inset 0 0 0 1px rgba(120,85,20,.35); transition:transform .12s ease;} .sticky-keepsake-btn:hover{transform:translateY(1px);} .sticky-keepsake-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);} body:has(.sticky-keepsake-bar.visible){padding-bottom:80px;} html.iib-mode .sticky-keepsake-bar{display:none !important;} @keyframes keepsakeRise{from{transform:translateY(100%);}to{transform:translateY(0);}} @media (prefers-reduced-motion: reduce){.sticky-keepsake-bar{animation:none;}} @media (max-width:640px){ .sticky-keepsake-inner{padding:9px 12px;gap:10px;} .sticky-keepsake-stamp{display:none;} .sticky-keepsake-title{font-size:11px;white-space:normal;} .sticky-keepsake-sub{display:none;} .sticky-keepsake-btn{padding:10px 14px;font-size:11px;letter-spacing:1px;} } /* Funnel hard-gates — each funnel's bar is structurally impossible in the other mode, even if JS state leaks (reach/convert mixing is unforgivable). Before funnel.js resolves, html has neither class → keepsake bar gated off (convert fail-safe, matches the rest of the funnel system). */ html.funnel-reach .sticky-unlock-bar{display:none !important;} html:not(.funnel-reach) .sticky-keepsake-bar{display:none !important;} /* ── ON-SCREEN BRAND WATERMARK RESCUE ─────────────────────────────────────── main.min.css (late block) repurposes .cert-watermark as a near-invisible crosshatch texture (opacity:.035, z-index:0) — which also crushed the brand SVG watermark (#cert-watermark). Restore the branded one by id: parent back to full opacity + above the paper; the SVG keeps its own .15 opacity so the diagonal BUREAU OF MINOR SUFFERINGS repeat is subtle but clearly present. Visibility (display) stays JS-owned via syncCertWatermark() — do not set it here. */ #cert-watermark{opacity:1;z-index:10;background-image:none;} /* Diagonal SVG lattice RESTORED (was display:none): the downloaded free copy bakes a full-bleed diagonal band lattice (bakeBrandStamp step 1) — the on-screen cert must show the same protection so the download isn't a surprise. Opacity ~.10 ≈ the bake's 0.085 multiply pass; the centered stamp (injected by syncCertWatermark) sits on top, matching the bake's stamp-on-lattice layering. */ #cert-watermark .cert-watermark-svg{display:block;opacity:.10;} /* ═══════════ NAV WORDMARK — first-impression lockup ═══════════ The engraved text-shadow (2b above) leaked THROUGH the foil gradient's transparent fill as a muddy blur — killing the top bar. Shadow moves to filter:drop-shadow (respects the clipped glyph alpha), and the wordmark becomes a lockup: the Bureau's footnote-asterisk mark in brass, then the foil letters, then a ledger hairline that draws itself on hover. */ .nav-brand,.nav-logo{ text-shadow:none !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 2px 8px rgba(201,160,51,.18)); position:relative;display:inline-flex;align-items:center;gap:9px; padding:3px 2px 5px; } .nav-brand::before,.nav-logo::before{ content:'\2731'; /* ✱ the footnote asterisk — the brand mark */ font-family:'Cinzel',serif;font-weight:400; font-size:1.05em;line-height:1; background:linear-gradient(180deg,#f0d878 0%,#c9a033 55%,#8a6d1f 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; transform:rotate(-8deg); animation:none; } .nav-brand::after,.nav-logo::after{ content:'';position:absolute;left:26px;right:0;bottom:0;height:1px; background:linear-gradient(90deg,rgba(201,160,51,.55),rgba(201,160,51,.08)); transform:scaleX(.35);transform-origin:left center; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .nav-brand:hover::after,.nav-logo:hover::after{transform:scaleX(1);} .nav-brand:hover,.nav-logo:hover{ text-shadow:none !important; filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(201,160,51,.4)); } @media (prefers-reduced-motion:reduce){ .nav-brand::after,.nav-logo::after{transition:none;} } @media (max-width:480px){ .nav-brand,.nav-logo{gap:6px;} .nav-brand::after,.nav-logo::after{left:20px;} } /* ═══════════ PHYSICAL BUREAU — POST-GENERATION PAPERWORK ═══════════ The three post-cert cards (share dossier, email slip, Form 11-B survey) were still flat dark console panels. Reskin: documents on the desk, same material language as the CTA tier cards (cream filing paper, brass plates, ink text, slight rotations). Inline styles exist in BOTH copies of the survey markup (index.html static + app.js post-purchase injection), hence the !important discipline — same approach as the rest of this layer. */ /* ── shared: filing paper ── */ .post-purchase-card{ background: radial-gradient(ellipse 340px 200px at 80% 0%, rgba(201,160,51,.10), transparent 60%), linear-gradient(170deg,#f7f2e7 0%,#efe8d6 100%) !important; border:1px solid rgba(120,95,40,.35) !important;border-radius:3px !important; box-shadow:0 18px 38px -14px rgba(0,0,0,.55), inset 0 0 0 4px rgba(255,255,255,.45), inset 0 0 0 5px rgba(201,160,51,.28) !important; transform:rotate(-.5deg); } .post-purchase-card.email-card{transform:rotate(.4deg);} .post-purchase-card::before{ /* brass rule along the top, not a glow line */ background:linear-gradient(90deg,transparent,rgba(166,128,31,.75),transparent) !important; height:2px !important;} .post-purchase-icon{ -webkit-animation:none !important;animation:none !important; filter:sepia(.6) saturate(.7);opacity:.85;} .post-purchase-title{color:var(--ink,#1a1209) !important;} .post-purchase-sub{color:rgba(61,47,26,.75) !important;} .post-purchase-disclaimer{color:rgba(61,47,26,.65) !important;} .post-purchase-disclaimer a{color:#7a5c14 !important;} .post-purchase-disclaimer a:hover{color:#5a430e !important;} /* primary = red wax authorization stamp */ .post-purchase-btn.primary{ background:linear-gradient(180deg,#9c2020 0%,#8b1a1a 55%,#6e1414 100%) !important; border:1px solid rgba(90,15,15,.8) !important;border-radius:3px !important; box-shadow:0 8px 18px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(40,5,5,.5) !important; color:#f4efe3 !important;text-shadow:0 1px 1px rgba(0,0,0,.4);} .post-purchase-btn.primary:hover{ background:linear-gradient(180deg,#a82525 0%,#962020 55%,#7a1818 100%) !important; transform:translateY(1px) !important; box-shadow:0 5px 12px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 3px rgba(40,5,5,.5) !important;} /* secondary = manila index-tab slips */ .post-purchase-btn.secondary{ background:linear-gradient(180deg,#e9e2cf,#ded5bd) !important; border:1px solid rgba(120,95,40,.45) !important;border-radius:2px !important; color:#4a3a18 !important; box-shadow:0 3px 8px -4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6) !important;} .post-purchase-btn.secondary:hover{ background:linear-gradient(180deg,#efe8d6,#e4dbc4) !important; border-color:rgba(120,95,40,.7) !important;color:#2e2410 !important; transform:translateY(1px);} /* email slip: ledger-line input + brass SEND plate */ .post-purchase-card .email-capture-input{ background:rgba(255,255,255,.55) !important; border:1px solid rgba(120,95,40,.4) !important;border-radius:2px !important; color:var(--ink,#1a1209) !important;font-family:'Courier Prime',monospace !important; box-shadow:inset 0 1px 3px rgba(60,40,10,.12) !important;} .post-purchase-card .email-capture-input::placeholder{color:rgba(61,47,26,.45) !important;} .post-purchase-card .email-capture-input:focus{ border-color:rgba(166,128,31,.8) !important;outline:none !important; box-shadow:inset 0 1px 3px rgba(60,40,10,.12), 0 0 0 2px rgba(201,160,51,.25) !important;} .post-purchase-card .email-capture-btn{ background:linear-gradient(180deg,#e6cd84 0%,#c9a033 55%,#8a6d1f 100%) !important; border:none !important;border-radius:2px !important;color:#3a2c0a !important; font-family:'Cinzel',serif !important;font-weight:700 !important; text-shadow:0 1px 0 rgba(255,255,255,.35) !important; box-shadow:0 4px 10px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 2px rgba(90,60,10,.4) !important;} .post-purchase-card .email-capture-btn:hover{transform:translateY(1px);} .post-purchase-opt{color:rgba(61,47,26,.8) !important;} .post-purchase-opt input[type=checkbox]{accent-color:#8a6d1f;} .email-capture-msg{color:#1a3d2b !important;} /* ── FORM 11-B — the survey becomes an actual paper form ── */ #bureau-feedback-form{ background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,95,40,.07) 26px 27px), linear-gradient(170deg,#f7f2e7 0%,#efe8d6 100%) !important; border:1px solid rgba(120,95,40,.4) !important;border-radius:2px !important; box-shadow:0 14px 30px -12px rgba(0,0,0,.5), inset 0 0 0 3px rgba(255,255,255,.4) !important; transform:rotate(.35deg);position:relative; } #bureau-feedback-form::after{ /* punched filing holes along the left edge */ content:'';position:absolute;left:10px;top:18px;bottom:18px;width:6px; background:radial-gradient(circle 3px at 3px 8px, rgba(60,40,10,.25) 2.6px, transparent 3px); background-size:6px 44px;background-repeat:repeat-y;pointer-events:none;} #bureau-feedback-form > div:first-child{color:#7a5c14 !important;} /* FORM 11-B header */ #bureau-feedback-form > div:nth-child(2){color:rgba(26,18,9,.85) !important;} #feedback-stars .fb-star{ background:linear-gradient(180deg,#efe8d6,#e2d9c2) !important; border:1px solid rgba(120,95,40,.4) !important;border-radius:2px !important; color:rgba(120,95,40,.45) !important; box-shadow:0 2px 5px -3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55) !important;} #feedback-stars .fb-star:hover{border-color:rgba(166,128,31,.8) !important;} #feedback-stars .fb-star.lit{ /* selected — inked brass; JS toggles the class */ background:linear-gradient(180deg,#e6cd84,#cfa93f) !important; border-color:rgba(138,109,31,.9) !important;color:#5a430e !important; box-shadow:inset 0 1px 2px rgba(90,60,10,.35) !important;} #feedback-text{ background:rgba(255,255,255,.55) !important; border:1px solid rgba(120,95,40,.4) !important;border-radius:2px !important; color:var(--ink,#1a1209) !important; box-shadow:inset 0 1px 3px rgba(60,40,10,.12) !important;} #feedback-text::placeholder{color:rgba(61,47,26,.45) !important;} #feedback-submit-btn{ background:linear-gradient(180deg,#e6cd84 0%,#c9a033 55%,#8a6d1f 100%) !important; border:none !important;border-radius:2px !important;color:#3a2c0a !important; font-weight:700 !important;text-shadow:0 1px 0 rgba(255,255,255,.35) !important; box-shadow:0 4px 10px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 2px rgba(90,60,10,.4) !important;} #feedback-submit-btn[disabled]{ background:linear-gradient(180deg,#ddd3ba,#cdc3a8) !important; color:rgba(74,58,24,.45) !important;cursor:not-allowed !important; box-shadow:none !important;text-shadow:none !important;} #feedback-submit-btn:not([disabled]):hover{transform:translateY(1px);} /* filed-confirmation state (innerHTML swap keeps the container) */ .survey-filed-head{font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#1a3d2b !important;margin-bottom:10px;} .survey-filed-quote{font-family:'IM Fell English',serif;font-size:14px;color:rgba(26,18,9,.8) !important;line-height:1.7;font-style:italic;} /* post-render fixes from harness capture: icons inherited pale paper color (invisible on cream); textarea scrollbar rendered navy on paper */ .post-purchase-icon{color:#4a3a18 !important;text-shadow:none !important;} #feedback-text{scrollbar-color:rgba(120,95,40,.5) rgba(255,255,255,.3);scrollbar-width:thin;} .post-purchase-opt input[type=checkbox]{border:1px solid rgba(120,95,40,.6);} .post-purchase-opt span{color:rgba(61,47,26,.8) !important;} /* ── LAUNCH-FUNNEL FIXES (post HN/b3ta traffic audit) ───────────────────── Mobile: wide letter-spacing pushed hero lines past the viewport edge — first impression on a phone was clipped text. */ @media (max-width:480px){ .agency-header,.agency-subtitle{ letter-spacing:1.6px !important;font-size:9.5px !important; max-width:100% !important;padding:0 12px;box-sizing:border-box;} .agency-title{font-size:31px !important;letter-spacing:1px !important;} } /* ═══════════ FIRST-ACT HOOKS — specimen exhibit + RECEIVED slam ═══════════ Psychology: cold visitors got zero visible payoff and zero weirdness above the fold — deadpan so complete it read as a corporate site. These two elements are the first act: proof-of-joke (specimen) + one involuntary "wait, what?" moment (stamp). */ /* ── RECEIVED stamp — slams onto the hero after load ── */ .public-record-head{position:relative;} .record-received-stamp{ position:absolute;top:-18px;right:8%;z-index:3;pointer-events:none; font-family:'Courier Prime',monospace;font-weight:700;font-size:19px;letter-spacing:4px; color:rgba(160,32,32,.85);border:3px double rgba(160,32,32,.8);border-radius:4px; padding:7px 15px 6px;text-align:center;line-height:1.35; transform:rotate(8deg) scale(3);opacity:0; mix-blend-mode:screen; } .record-received-stamp span{display:block;font-size:8px;letter-spacing:2.5px;opacity:.85;} @keyframes bmsStampSlam{ 0%{transform:rotate(8deg) scale(3);opacity:0;} 55%{transform:rotate(8deg) scale(3);opacity:0;} /* wait a beat */ 70%{transform:rotate(8deg) scale(.94);opacity:1;} /* SLAM */ 80%{transform:rotate(8deg) scale(1.05);} 100%{transform:rotate(8deg) scale(1);opacity:1;} } .record-received-stamp.slammed{animation:bmsStampSlam 2.3s cubic-bezier(.22,.61,.36,1) both;} @media (max-width:640px){ .record-received-stamp{top:-12px;right:3%;font-size:12px;letter-spacing:2.5px;padding:4px 9px;} .record-received-stamp span{font-size:6px;letter-spacing:1.5px;} } @media (prefers-reduced-motion:reduce){ .record-received-stamp.slammed{animation:none;opacity:1;transform:rotate(8deg) scale(1);} } /* ── SPECIMEN EXHIBIT — pinned paper certificate excerpt ── */ .specimen-strip{ background:linear-gradient(180deg,#0a1628 0%,#0c1a30 100%); padding:34px 20px 46px;text-align:center;position:relative; } .specimen-tag{ display:inline-block;font-family:'Courier Prime',monospace;font-size:9px; letter-spacing:3px;color:rgba(201,160,51,.65);margin-bottom:18px; border-bottom:1px solid rgba(201,160,51,.25);padding-bottom:6px; } .specimen-paper{ position:relative;max-width:640px;margin:0 auto;cursor:pointer; background: radial-gradient(ellipse 300px 160px at 82% 4%, rgba(201,160,51,.09), transparent 60%), linear-gradient(172deg,#f7f2e7 0%,#efe8d6 100%); border:1px solid rgba(120,95,40,.4);border-radius:2px; box-shadow:0 22px 44px -16px rgba(0,0,0,.6), inset 0 0 0 4px rgba(255,255,255,.45), inset 0 0 0 5px rgba(201,160,51,.3); transform:rotate(-1.1deg); padding:22px 26px 18px;text-align:left; transition:transform .25s ease, box-shadow .25s ease; } .specimen-paper:hover{ transform:rotate(-.4deg) translateY(-3px); box-shadow:0 30px 54px -18px rgba(0,0,0,.65), inset 0 0 0 4px rgba(255,255,255,.45), inset 0 0 0 5px rgba(201,160,51,.3); } .specimen-head{ display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap; font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:1.6px; color:rgba(61,47,26,.65);border-bottom:1px solid rgba(120,95,40,.3); padding-bottom:8px;margin-bottom:12px; } .specimen-title{ font-family:'Cinzel',serif;font-weight:700;font-size:clamp(15px,2.6vw,21px); line-height:1.3;color:#1a1209;letter-spacing:.5px;margin-bottom:10px; } .specimen-line{ font-family:'Courier Prime',monospace;font-size:11px;line-height:1.6; color:rgba(26,18,9,.8);margin-bottom:10px; } .specimen-meta{ display:flex;gap:18px;flex-wrap:wrap; font-family:'Courier Prime',monospace;font-size:9.5px;letter-spacing:.8px; color:rgba(61,47,26,.7);border-top:1px dashed rgba(120,95,40,.35);padding-top:9px; } .specimen-meta b{color:#1a1209;} .specimen-meta i{opacity:.7;font-style:italic;} .specimen-stamp{ position:absolute;top:12px;right:14px; font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;letter-spacing:3px; color:rgba(160,32,32,.55);border:2px double rgba(160,32,32,.5);border-radius:3px; padding:4px 10px;transform:rotate(7deg);pointer-events:none; } .specimen-cta{ margin-top:14px;text-align:center; font-family:'Cinzel',serif;font-weight:700;font-size:11px;letter-spacing:2px; color:#7a5c14;border-top:1px solid rgba(120,95,40,.3);padding-top:11px; } .specimen-paper:hover .specimen-cta{color:#5a430e;} @media (max-width:640px){ .specimen-paper{padding:16px 16px 14px;transform:rotate(-.7deg);} .specimen-head{font-size:7px;} .specimen-stamp{font-size:10px;padding:3px 7px;top:8px;right:8px;} } /* capture fixes: 4th stat orphaned on its own row; CERTIFIED stamp overlapped the case number in the specimen head */ .hero-stats{gap:26px !important;} @media (max-width:760px){.hero-stats{gap:16px !important;}.hero-stats .stat{min-width:130px;}} .specimen-head{padding-right:96px;} @media (max-width:640px){.specimen-head{padding-right:70px;}} /* TURNSTILE interaction-only styles REMOVED (07/21/26): invisible mode's token frequently never arrived → users blocked at submit with no widget to click. Reverted to the visible managed widget (main.min.css styles). */ /* ── SPECIMEN FULL-DOCUMENT MODAL — zero-friction payoff taste ── */ .specimen-view-link{ cursor:pointer;text-decoration:underline;text-underline-offset:3px; color:#7a5c14;} .specimen-view-link:hover{color:#5a430e;} #specimen-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px;} .specimen-modal-backdrop{position:absolute;inset:0;background:rgba(4,9,18,.82);backdrop-filter:blur(3px);} .specimen-modal-doc{ position:relative;max-width:620px;width:100%;max-height:86vh;overflow-y:auto; background: radial-gradient(ellipse 300px 160px at 82% 4%, rgba(201,160,51,.09), transparent 60%), linear-gradient(172deg,#f7f2e7 0%,#efe8d6 100%); border:1px solid rgba(120,95,40,.45);border-radius:2px; box-shadow:0 34px 70px -20px rgba(0,0,0,.8), inset 0 0 0 4px rgba(255,255,255,.45), inset 0 0 0 5px rgba(201,160,51,.3); padding:26px 30px 24px;text-align:left;transform:rotate(-.4deg); animation:specimenDocIn .32s cubic-bezier(.22,.61,.36,1) both; } @keyframes specimenDocIn{from{transform:rotate(-.4deg) translateY(26px) scale(.96);opacity:0;}to{transform:rotate(-.4deg) translateY(0) scale(1);opacity:1;}} .specimen-modal-close{ position:absolute;top:10px;right:12px;z-index:2; background:none;border:1px solid rgba(120,95,40,.4);border-radius:2px; color:#4a3a18;font-size:13px;line-height:1;padding:5px 8px;cursor:pointer;} .specimen-modal-close:hover{background:rgba(120,95,40,.1);} .specimen-modal-doc .specimen-stamp{top:44px;right:22px;} .specimen-syn{ font-family:'Courier Prime',monospace;font-size:11px;line-height:1.65; color:rgba(26,18,9,.85);margin:2px 0 14px;} .specimen-syn b{letter-spacing:1px;} .specimen-findings-head{ font-family:'Courier Prime',monospace;font-size:9px;letter-spacing:2.5px; color:rgba(61,47,26,.7);border-bottom:1px solid rgba(120,95,40,.3); padding-bottom:5px;margin-bottom:9px;} .specimen-fx{ font-family:'Courier Prime',monospace;font-size:11px;line-height:1.6; color:rgba(26,18,9,.82);margin-bottom:7px;padding-left:4px;} .specimen-fx b{color:#8b1a1a;margin-right:4px;} .specimen-modal-doc .specimen-meta{margin:12px 0;} .specimen-ruling{ font-family:'Courier Prime',monospace;font-size:11px;line-height:1.7; color:rgba(26,18,9,.85);border-left:3px solid rgba(139,26,26,.5); padding:8px 0 8px 12px;margin:12px 0 14px;} .specimen-sig{ display:flex;flex-direction:column;gap:2px;border-top:1px dashed rgba(120,95,40,.35); padding-top:10px;margin-bottom:14px;} .specimen-sig-name{font-family:'IM Fell English',serif;font-style:italic;font-size:19px;color:#1a1209;} .specimen-sig-title{font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:2px;color:rgba(61,47,26,.6);} .specimen-modal-cta{ display:block;width:100%; background:linear-gradient(180deg,#e6cd84 0%,#c9a033 55%,#8a6d1f 100%); border:none;border-radius:3px;color:#3a2c0a; font-family:'Cinzel',serif;font-weight:700;font-size:12px;letter-spacing:2px; padding:13px 18px;cursor:pointer;text-shadow:0 1px 0 rgba(255,255,255,.35); box-shadow:0 8px 18px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(90,60,10,.4);} .specimen-modal-cta:hover{transform:translateY(1px);} @media (max-width:640px){ .specimen-modal-doc{padding:18px 16px 16px;max-height:90vh;} .specimen-modal-doc .specimen-stamp{top:38px;right:10px;} } /* 3 stats: equal-width row on desktop, clean single row on phones too */ .hero-stats{gap:26px !important;flex-wrap:nowrap !important;justify-content:center !important;} .hero-stats .stat{flex:0 1 auto;min-width:0;} @media (max-width:760px){ .hero-stats{gap:8px !important;padding:0 8px;} .hero-stats .stat{flex:1 1 0 !important;min-width:0 !important;padding:10px 6px !important;} .hero-stats .stat-number{font-size:15px !important;letter-spacing:.5px;} .hero-stats .stat-label{font-size:7px !important;letter-spacing:1px !important;white-space:nowrap;} } /* fix: nowrap labels forced 3-card overflow on narrow phones — let labels wrap to two lines instead; row always fits the viewport */ @media (max-width:760px){ .hero-stats .stat-label{white-space:normal !important;line-height:1.4;} .hero-stats .stat{padding:9px 4px !important;} .hero-stats .stat-number{font-size:14px !important;} } /* ═══════════ LEGIBILITY PASS (b3ta: "font-size: 9px!?") ═══════════ Reading text (things a human must actually read) moves to 13px. Decorative letterhead micro-type (form numbers, OMB, classification bar) stays small — that's period flavor, not content. main.min.css untouched. */ .cert-body{font-size:13px !important;line-height:1.65 !important;} .cert-finding-item{font-size:13px !important;line-height:1.6 !important;} .cert-ruling-text,.cert-ruling{font-size:13px !important;line-height:1.65 !important;} .findings-upgrade-prompt{font-size:10.5px !important;} .form-trust-note{font-size:10.5px !important;} .turnstile-label{font-size:10px !important;} @media (max-width:640px){ .cert-body,.cert-finding-item{font-size:12.5px !important;} } /* ═══════════ THE PUBLIC RECORD — the collection IS the product ═══════════ b3ta: "the AI detracts from the interesting bit, which is the collection of petty grievances." A browsable docket of unprocessed complaints — paper slips on the record, zero AI framing. Each slip is claimable: one click files it as your own complaint. */ .public-record{background:linear-gradient(180deg,#0c1a30,#0a1628);padding:52px 20px 58px;} .public-record-head{text-align:center;margin-bottom:26px;} .public-record-eyebrow{ display:inline-block;font-family:'Courier Prime',monospace;font-size:10px; letter-spacing:3px;color:rgba(201,160,51,.65);border-bottom:1px solid rgba(201,160,51,.25); padding-bottom:6px;margin-bottom:12px;text-transform:uppercase;} .public-record-title{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(19px,3vw,26px);color:#f4efe3;letter-spacing:1px;margin:0 0 6px;} .public-record-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:14px;color:rgba(244,239,227,.65);} .record-grid{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .record-slip{ background:linear-gradient(172deg,#f2ecdb,#e9e1cb); border:1px solid rgba(120,95,40,.4);border-radius:2px;padding:14px 15px 11px; box-shadow:0 8px 18px -10px rgba(0,0,0,.55), inset 0 0 0 3px rgba(255,255,255,.35); font-family:'Courier Prime',monospace;position:relative;cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;text-align:left;} .record-slip:nth-child(3n){transform:rotate(.5deg);} .record-slip:nth-child(3n+1){transform:rotate(-.6deg);} .record-slip:nth-child(3n+2){transform:rotate(.2deg);} .record-slip:hover{transform:rotate(0) translateY(-3px);box-shadow:0 14px 26px -12px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.35);z-index:2;} .record-slip-no{font-size:8px;letter-spacing:1.6px;color:rgba(61,47,26,.55);display:flex;justify-content:space-between;border-bottom:1px dashed rgba(120,95,40,.35);padding-bottom:5px;margin-bottom:8px;} .record-slip-status{color:rgba(139,26,26,.75);font-weight:700;} .record-slip-text{font-size:12.5px;line-height:1.55;color:rgba(26,18,9,.85);min-height:58px;} .record-slip-act{ margin-top:10px;border-top:1px solid rgba(120,95,40,.3);padding-top:8px; font-family:'Cinzel',serif;font-weight:700;font-size:9.5px;letter-spacing:1.8px; color:#7a5c14;text-transform:uppercase;} .record-slip:hover .record-slip-act{color:#5a430e;} .record-more{ display:block;margin:22px auto 0;background:none;cursor:pointer; border:1px solid rgba(201,160,51,.3);border-radius:2px;color:rgba(201,160,51,.8); font-family:'Courier Prime',monospace;font-size:10px;letter-spacing:2.5px; text-transform:uppercase;padding:10px 26px;transition:all .25s;} .record-more:hover{border-color:rgba(201,160,51,.7);color:var(--gold);} @media (max-width:900px){.record-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:600px){.record-grid{grid-template-columns:1fr;gap:12px;}.public-record{padding:40px 16px 46px;}.record-slip-text{min-height:0;}} /* phone: 9 stacked slips = a scroll wall — show 4, desktop keeps 9 */ @media (max-width:600px){ .record-grid .record-slip:nth-child(n+5){display:none;} } /* ═══════════ AUTH CEREMONY → PROCESSING SLIP (physical bureau) ═══════════ The post-payment reveal was still the old green-on-black hacker console — the one surface untouched by the physical redesign (user catch). Same DOM, same JS timings; the material changes: clerk's desk backdrop, a cream routing slip typed line-by-line in ink, red rubber AUTHORIZED stamp. */ .auth-ceremony{ background: radial-gradient(ellipse 700px 420px at 50% 38%, rgba(201,160,51,.07), transparent 65%), linear-gradient(180deg,rgba(7,12,22,.985),rgba(5,9,17,.99)) !important; } .auth-ceremony-inner{max-width:560px !important;} .auth-terminal{ background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(120,95,40,.08) 25px 26px), linear-gradient(172deg,#f7f2e7 0%,#efe8d6 100%) !important; border:1px solid rgba(120,95,40,.45);border-radius:2px; box-shadow:0 22px 44px -16px rgba(0,0,0,.7), inset 0 0 0 4px rgba(255,255,255,.4); padding:20px 22px 16px;transform:rotate(-.5deg); min-height:0 !important;margin-bottom:30px !important;position:relative; } .auth-terminal::before{ /* slip letterhead */ content:'BUREAU OF MINOR SUFFERINGS — RELEASE & ROUTING SLIP · FORM 44-C'; display:block;font-family:'Courier Prime',monospace;font-size:8px;letter-spacing:2px; color:rgba(61,47,26,.6);border-bottom:1px solid rgba(120,95,40,.35); padding-bottom:6px;margin-bottom:10px; } .auth-terminal::after{ /* punched filing holes, matches Form 11-B */ content:'';position:absolute;left:8px;top:16px;bottom:16px;width:6px; background:radial-gradient(circle 3px at 3px 8px, rgba(60,40,10,.22) 2.6px, transparent 3px); background-size:6px 40px;background-repeat:repeat-y;pointer-events:none; } .auth-term-line{ font-family:'Courier Prime',monospace !important; font-size:12.5px !important;color:rgba(26,18,9,.85) !important; letter-spacing:.4px !important;line-height:1.9 !important; padding-left:20px;position:relative; } .auth-term-line::before{ /* clerk's check tick, inked */ content:'✓';position:absolute;left:2px;top:0; color:#1a3d2b;font-weight:700; } .auth-term-line:last-child::before{content:'➤';color:#8b1a1a;} /* AUTHORIZED — red rubber stamp (matches RECEIVED/CERTIFIED family), not gold glow-text */ .auth-stamp{ font-family:'Courier Prime',monospace !important; font-size:34px !important;font-weight:700 !important; color:rgba(160,32,32,.9) !important;letter-spacing:7px !important; border:4px double rgba(160,32,32,.85);border-radius:6px; display:inline-block;padding:10px 26px 8px; text-shadow:none !important; transform:scale(4) rotate(-8deg); } .auth-stamp.slam{transform:scale(1) rotate(-6deg) !important;} .auth-case-line{ color:rgba(244,239,227,.85) !important; font-size:12px !important;letter-spacing:2px !important; text-shadow:none !important; } @media (max-width:600px){ /* the flex inner sizes to max-content (letterhead + case line are wide one-liners) and sails past a 375px viewport — pin it to the screen */ .auth-ceremony-inner{width:100% !important;max-width:430px !important;padding:32px 14px !important;} .auth-stamp{font-size:22px !important;letter-spacing:4px !important;padding:8px 16px 6px;} .auth-terminal{padding:16px 14px 12px;} .auth-term-line{font-size:11px !important;} .auth-terminal::before{font-size:7px;letter-spacing:1px;} .auth-case-line{font-size:10.5px !important;letter-spacing:1.4px !important;} } /* ============ LAST GREEN LEDs → BRASS PIN-HEADS ============ */ /* The "live" dots were terminal-green pilot lamps (ticker strip kept a softened one; the CTA eyebrow still had neon #4ade80). Both sit on dark navy/brass surfaces, so: a brass pin-head with a faint warm halo — the Bureau's one moving part. Pulse cadence unchanged. (.stat-live-dot is orphaned today but inked anyway.) */ .live-dot, .stat-live-dot, .filing-ticker-dot{ background:radial-gradient(circle at 35% 30%, #e8cd82, #b8902e 55%, #8a6a1e) !important; box-shadow:0 0 6px rgba(201,160,51,.45), 0 1px 2px rgba(0,0,0,.4) !important; } /* ============ COGNITIVE LOAD REDUCTION ============ */ /* Cut: form-live-preview (empty pre-gen noise), filing-activity (fake urgency redundant with live-feed), live-feed aside (animated distraction; filing-ticker post-interaction is better), trust badges 3+4 (4 competing items → 2 that actually land). */ .form-live-preview{display:none !important;} #filing-activity{display:none !important;} .live-feed{display:none !important;} .trust-badges-row .trust-badge-enhanced:nth-child(n+3){display:none !important;} /* ============ NAV: drop the asterisk, fix underline offset ============ */ .nav-brand::before,.nav-logo::before{display:none !important;} /* ::after underline was left:26px to clear the asterisk — reset to edge */ .nav-brand::after,.nav-logo::after{left:0 !important;} /* ============ BUREAU MOTTO — hero letterhead ============ */ /* Fiat Querela ("let the complaint be made") — engraved beneath the registry line where a seal carries its motto. Same Cinzel gold system as the letterhead; kept deadpan, untranslated on the face (translation lives in the title attr for the curious). */ .agency-subtitle{margin-bottom:15px !important;} .agency-motto{ font-family:'Cinzel',serif; font-size:clamp(10px,1.4vw,12px); letter-spacing:3px;text-transform:uppercase; color:var(--gold);opacity:.72; margin:0 0 30px;cursor:default; animation:heroEntrance .7s ease both;animation-delay:.6s; } .agency-motto::before,.agency-motto::after{ content:'\2726';opacity:.5;font-size:.7em;vertical-align:1px; } .agency-motto::before{margin-right:12px;} .agency-motto::after{margin-left:12px;}