/* ========================================================================== filexl-view.css - view_file.php ONLY -------------------------------------------------------------------------- SCOPING RULE, and the reason the last version broke your other pages: every selector in this file starts with .fx-page (the class) or .fx (the page container). Nothing here can reach index.php, script.php, the navbar or the footer. There are no bare .card / .btn / body overrides. Themes are page-local too: body.fx-page[data-fx-theme="dark"|"light"]. Toggling the theme on this page cannot repaint the rest of the site. Navbar (blue glass) and footer (bg-dark) are left exactly as they are. They already sit correctly on both a light and a dark canvas. ========================================================================== */ /* ------------------------------- NIGHT (default) ------------------------- */ /* -------- type system -------- --font-display : Inter Tight - the file name and the big payload number. Tighter set-widths than plain Inter; reads as designed. --font-body : Inter - sentences. --mono : IBM Plex Mono - anything a machine produced (size, speed, chunk counts, manifests). The split is the personality. */ :root{ --font-display:'Inter Tight','Inter',system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --fx-mono:var(--mono); /* page inline styles reference --fx-mono */ } body.fx-page, body.fx-page[data-fx-theme="dark"]{ --bg:#080b10; --panel:#0f141c; --panel-2:#0b1017; --line:#1e2836; --line-2:#2b3a4d; --txt:#cfd8e3; --dim:#5d6b7d; --strong:#ffffff; --cy:#22d3ee; --cy-ink:#04141a; --gr:#4ade80; --am:#fbbf24; --rd:#f87171; --wa:#25d366; --wa-ink:#04140a; --glow:0 0 34px -8px rgba(34,211,238,.7); --wa-glow:0 0 34px -10px rgba(37,211,102,.65); --grid:rgba(34,211,238,.06); --shadow:none; } /* -------------------------------- DAY ------------------------------------ */ body.fx-page[data-fx-theme="light"]{ --bg:#f2f5f9; --panel:#ffffff; --panel-2:#f7f9fc; --line:#e2e8f0; --line-2:#cbd5e1; --txt:#334155; --dim:#64748b; --strong:#0b1220; --cy:#0e7490; --cy-ink:#ffffff; --gr:#15803d; --am:#b45309; --rd:#be123c; --wa:#128c4a; --wa-ink:#ffffff; --glow:0 10px 24px -12px rgba(14,116,144,.55); --wa-glow:0 10px 24px -12px rgba(18,140,74,.5); --grid:rgba(14,116,144,.05); --shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -18px rgba(16,24,40,.25); } body.fx-page{ background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; max-width:100%; overflow-x:clip; transition:background-color .25s ease, color .25s ease; } /* ------------------------------- shell ----------------------------------- */ .fx{ width:100%;max-width:1240px;margin-inline:auto; padding:0 20px calc(84px + env(safe-area-inset-bottom)); font-family:'Inter',system-ui,-apple-system,sans-serif; -webkit-text-size-adjust:100%; } @media (min-width:992px){ .fx{padding-bottom:56px;} } .fx *{min-width:0;} .fx img,.fx video,.fx canvas,.fx iframe,.fx table,.fx pre{max-width:100%;} .fx-hide{display:none !important;} /* ------------------------- status + theme switch ------------------------- */ .fx-status{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font:600 11.5px/1.6 var(--mono,'IBM Plex Mono',monospace); letter-spacing:.06em;text-transform:uppercase;color:var(--txt);margin-bottom:18px; } .fx-status .dot{width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 12px var(--gr);flex:0 0 8px;} .fx-status .dot--am{background:var(--am);box-shadow:0 0 12px var(--am);} .fx-status .dot--rd{background:var(--rd);box-shadow:0 0 12px var(--rd);} .fx-status .sep{color:var(--dim);text-transform:none;letter-spacing:.03em;font-weight:400;} .fx-status .spacer{margin-left:auto;} .fx-status a{color:var(--cy);text-decoration:none;font-weight:600;white-space:nowrap;} .fx-status a:hover{text-decoration:underline;} /* the day/night switch lives on the page, not in the navbar - so it can't repaint index.php or leak styles into anyone else's stylesheet */ .fx-theme{ width:34px;height:34px;flex:0 0 34px;border-radius:50%; border:1px solid var(--line);background:var(--panel);color:var(--txt); display:grid;place-items:center;cursor:pointer;font-size:13px; transition:transform .2s ease,border-color .2s ease; } .fx-theme:hover{transform:rotate(-18deg);border-color:var(--line-2);color:var(--strong);} /* -------------------------------- grid ----------------------------------- */ .fx-grid{display:block;} @media (min-width:992px){ .fx-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start;} .fx-rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:14px;} .fx-rail > *{margin-bottom:0 !important;} } @media (min-width:1280px){ .fx-grid{grid-template-columns:minmax(0,1fr) 424px;gap:26px;} } /* ------------------------------- headline -------------------------------- */ .fx-title{ font:650 27px/1.22 var(--font-display);letter-spacing:-.035em;color:var(--strong); margin:0 0 8px;word-break:break-word; } @media (min-width:992px){ .fx-title{font-size:32px;letter-spacing:-.04em;} } .fx-meta{ font:400 12px/1.9 var(--mono,'IBM Plex Mono',monospace); color:var(--dim);margin:0 0 16px;overflow-wrap:anywhere; } .fx-meta b{color:var(--cy);font-weight:600;} .fx-meta em{font-style:normal;color:var(--gr);} .fx-meta .warn{color:var(--am);} .fx-meta .sep{opacity:.4;padding:0 6px;} /* ------------------------------- panels ---------------------------------- */ .fx-panel{ background:var(--panel);border:1px solid var(--line);border-radius:14px; padding:18px;margin-bottom:14px;box-shadow:var(--shadow); } .fx-lab{ font:600 10px/1 var(--mono,'IBM Plex Mono',monospace); letter-spacing:.16em;text-transform:uppercase;color:var(--dim); margin:0 0 12px;display:flex;align-items:center;gap:7px; } .fx-lab i{color:var(--cy);font-size:11px;} .fx-hr{border:0;border-top:1px solid var(--line);margin:16px 0;} .fx-note{font:400 12px/1.6 'Inter';color:var(--dim);margin:10px 0 0;} .fx-prose{ font:400 13.5px/1.72 var(--font-body);color:var(--dim); text-align:justify;text-justify:inter-word;hyphens:auto;overflow-wrap:anywhere; } @media (max-width:420px){ .fx-prose{text-align:left;} } /* ------------------------------- stage ----------------------------------- */ .fx-stage{ position:relative;border:1px solid var(--line);border-radius:14px; background:#05070b;overflow:hidden;margin:0 0 14px; aspect-ratio:16/9;max-height:72vh;box-shadow:var(--shadow); } .fx-stage[data-orient="portrait"]{aspect-ratio:9/16;max-height:74vh;max-width:min(100%,430px);margin-inline:auto;} .fx-stage[data-orient="square"]{aspect-ratio:1/1;max-width:min(100%,660px);margin-inline:auto;} .fx-stage::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,transparent 49.6%,var(--grid) 50%,transparent 50.4%) 0 0/48px 100%, linear-gradient(0deg,transparent 49.6%,var(--grid) 50%,transparent 50.4%) 0 0/100% 48px; } .fx-stage video,.fx-stage img.fx-full{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;} .fx-stage-bg{ position:absolute;inset:-8%;background-size:cover;background-position:center;z-index:0; filter:blur(34px) saturate(1.1) brightness(.42);transform:scale(1.12); } .fx-cover{ position:absolute;inset:0;z-index:3;display:grid;place-items:center;width:100%; background-size:cover;background-position:center;border:0;padding:0;cursor:pointer; } .fx-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,14,.2),rgba(4,8,14,.72));} .fx-play{ position:relative;z-index:2;width:76px;height:76px;border-radius:50%; border:2px solid #22d3ee;background:rgba(34,211,238,.12);backdrop-filter:blur(6px); color:#22d3ee;display:grid;place-items:center;font-size:22px;padding-left:4px; box-shadow:0 0 40px -6px rgba(34,211,238,.75);transition:transform .18s ease,background .18s ease; } .fx-cover:hover .fx-play{transform:scale(1.06);background:rgba(34,211,238,.22);} .fx-cover-meta{ position:absolute;z-index:2;left:12px;bottom:12px;right:12px; font:600 11px/1.5 var(--mono,'IBM Plex Mono',monospace); letter-spacing:.05em;text-transform:uppercase;color:#dbe4ee; } .fx-cover-meta span{ background:rgba(4,8,14,.74);border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px);padding:6px 10px;border-radius:8px;display:inline-block; } .fx-sound{ position:absolute;z-index:4;right:10px;top:10px;width:40px;height:40px;border-radius:50%; border:1px solid rgba(255,255,255,.18);background:rgba(4,8,14,.7);backdrop-filter:blur(8px); color:#dbe4ee;display:grid;place-items:center;font-size:14px; } .fx-stage-hint{ position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%); background:rgba(4,8,14,.8);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px); color:#dbe4ee;font:600 11px var(--mono,'IBM Plex Mono',monospace); letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:8px;white-space:nowrap; } .fx-codec{ position:absolute;inset:0;z-index:5;display:none;place-items:center;text-align:center; background:rgba(4,8,14,.92);backdrop-filter:blur(4px);padding:24px; } .fx-codec.show{display:grid;} .fx-codec p{color:#dbe4ee;font:400 13px/1.6 'Inter';max-width:360px;margin:0 auto 14px;} .fx-codec b{color:#fff;font-family:var(--mono,monospace);} .fx-stage--doc{aspect-ratio:auto;max-height:none;background:var(--panel);} .fx-stage--doc::before{display:none;} .fx-stage--img{aspect-ratio:auto;max-height:none;} .fx-stage--img img{max-height:72vh;height:auto;margin-inline:auto;} .fx-pad{padding:16px;} .fx-stage .table{color:var(--txt);} .fx-stage .table td{border-color:var(--line);} .fx-stage .table tbody tr:hover td{background:var(--panel-2);} /* ------------------------------- payload --------------------------------- */ .fx-size{ font:700 44px/.95 var(--font-display); letter-spacing:-.045em;color:var(--strong);display:flex;align-items:baseline;gap:7px; font-feature-settings:'tnum' 1; } .fx-size em{font-style:normal;font-size:16px;color:var(--cy);letter-spacing:.06em;} .fx-sub{ font:400 11px/1.7 var(--mono,'IBM Plex Mono',monospace); color:var(--dim);margin-top:8px;letter-spacing:.04em; } .fx-track{height:6px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin-top:14px;} .fx-track > div{height:100%;width:0;background:linear-gradient(90deg,var(--cy),var(--gr));transition:width .3s ease;} .fx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;} .fx-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center;} .fx-stat b{display:block;font:600 15px var(--mono);color:var(--strong);font-feature-settings:'tnum' 1;} .fx-stat span{font:400 9px var(--mono,'IBM Plex Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);} /* ------------------------------- buttons --------------------------------- */ .fx-btn{ display:flex;align-items:center;justify-content:center;gap:9px; width:100%;min-height:46px;border-radius:11px;border:1px solid transparent; font:600 14.5px var(--font-display);letter-spacing:-.01em;padding:14px 16px;cursor:pointer;text-decoration:none; position:relative;overflow:hidden;transition:filter .15s ease,transform .1s ease; } .fx-btn:active{transform:translateY(1px);} .fx-btn:focus-visible{outline:2px solid var(--cy);outline-offset:2px;} .fx-btn--go{background:var(--cy);color:var(--cy-ink);box-shadow:var(--glow);} .fx-btn--go:hover{color:var(--cy-ink);filter:brightness(1.08);} .fx-btn--wa{background:var(--wa);color:var(--wa-ink);box-shadow:var(--wa-glow);} .fx-btn--wa:hover{color:var(--wa-ink);filter:brightness(1.06);} .fx-btn--ghost{background:var(--panel-2);border-color:var(--line);color:var(--txt);} .fx-btn--ghost:hover{border-color:var(--line-2);color:var(--strong);} .fx-btn--dim{background:transparent;border-color:var(--line);color:var(--dim);font-weight:600;font-size:13px;min-height:40px;padding:10px;} .fx-btn--dim:hover{color:var(--txt);} .fx-btn[disabled]{opacity:.45;cursor:not-allowed;} .fx-btn small{display:block;font:500 11px 'Inter';opacity:.82;margin-top:4px;} .fx-btn-stack{display:flex;flex-direction:column;align-items:center;line-height:1.25;position:relative;z-index:2;} .fx-btn + .fx-btn{margin-top:8px;} .fx-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;} .fx-checks li{display:flex;gap:9px;font:400 12px/1.6 var(--mono,'IBM Plex Mono',monospace);color:var(--dim);} .fx-checks i{color:var(--gr);font-size:10px;margin-top:4px;flex:0 0 12px;} .fx-checks b{color:var(--txt);font-weight:600;} /* ======================= THE WHATSAPP MODULE ============================= This is the one place on the page allowed to raise its voice. Forwarding the link instead of the file is the single most valuable thing a visitor can do - for them (their gallery), for the recipients (their storage), and for the business (the link is the product). So it gets the green, and a number. */ .fx-wa{ border-radius:14px;padding:18px;margin-bottom:14px; border:1px solid color-mix(in srgb, var(--wa) 32%, transparent); background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--wa) 12%, transparent), transparent 70%), var(--panel); box-shadow:var(--shadow); } .fx-wa-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .fx-wa-ico{ width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center; background:var(--wa);color:#fff;font-size:19px; } .fx-wa-head b{display:block;font:700 15px 'Inter';color:var(--strong);letter-spacing:-.01em;} .fx-wa-head span{display:block;font:400 12px 'Inter';color:var(--dim);margin-top:1px;} .fx-wa-math{ display:flex;align-items:center;gap:10px;margin:0 0 14px; font:400 11.5px/1.5 var(--mono,'IBM Plex Mono',monospace);color:var(--dim); } .fx-wa-math .cell{ flex:1;background:var(--panel-2);border:1px solid var(--line); border-radius:10px;padding:10px;text-align:center; } .fx-wa-math .cell b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px;} .fx-wa-math .bad b{color:var(--rd);} .fx-wa-math .good b{color:var(--wa);} .fx-wa-math .vs{font-size:10px;letter-spacing:.14em;color:var(--dim);} .fx-linkrow{display:flex;gap:6px;} .fx-linkrow input{ flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line); border-radius:10px;padding:12px;color:var(--txt); font:400 11.5px var(--mono,'IBM Plex Mono',monospace);text-overflow:ellipsis; } .fx-linkrow input:focus{outline:none;border-color:var(--cy);} .fx-linkrow button{ border:0;border-radius:10px;padding:0 15px;background:var(--panel-2); border:1px solid var(--line);color:var(--txt); font:700 12px 'Inter';cursor:pointer;white-space:nowrap; } .fx-linkrow button:hover{color:var(--strong);border-color:var(--line-2);} .fx-share{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;} .fx-share a,.fx-share button{ background:var(--panel-2);border:1px solid var(--line);border-radius:10px; padding:11px 2px;text-align:center;text-decoration:none;cursor:pointer;color:var(--txt); font:600 9.5px var(--mono,'IBM Plex Mono',monospace);letter-spacing:.08em;text-transform:uppercase; display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;min-height:56px; } .fx-share i{font-size:15px;color:var(--dim);} .fx-share a:hover,.fx-share button:hover{border-color:var(--line-2);color:var(--strong);} /* ------------------------------ disclosure ------------------------------- */ .fx-more{margin-top:40px; margin-bottom:24px; position:relative; z-index:10; clear:both;} .fx-more summary{ list-style:none;cursor:pointer;padding:14px 18px; background:var(--panel);border:1px solid var(--line);border-radius:14px; display:flex;align-items:center;justify-content:space-between; font:600 11px var(--mono,'IBM Plex Mono',monospace);letter-spacing:.12em; text-transform:uppercase;color:var(--txt);box-shadow:var(--shadow); } .fx-more summary::-webkit-details-marker{display:none;} .fx-more[open] summary{border-radius:14px 14px 0 0;border-bottom:0;} .fx-more-body{ background:var(--panel);border:1px solid var(--line);border-top:0; border-radius:0 0 14px 14px;padding:18px;box-shadow:var(--shadow); } .fx-more summary i.fx-caret{transition:transform .2s;color:var(--dim);} .fx-more[open] summary i.fx-caret{transform:rotate(180deg);} .fx-cols{display:grid;gap:18px;} @media (min-width:768px){ .fx-cols{grid-template-columns:1fr 1fr;gap:24px;} } .fx-qr{display:grid;place-items:center;gap:10px;padding:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;} .fx-qr img{width:160px;height:160px;background:#fff;padding:6px;border-radius:8px;} .fx-scroll{overflow:auto;-webkit-overflow-scrolling:touch;} .fx-scroll::-webkit-scrollbar{width:8px;height:8px;} .fx-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;} .fx-scroll table{margin:0;font-size:12.5px;} .fx-scroll td:first-child{word-break:break-word;min-width:180px;} /* bootstrap widgets INSIDE this page only - .fx- prefix keeps them contained */ .fx .form-control,.fx .form-select{background:var(--panel-2);border-color:var(--line);color:var(--txt);} .fx .form-control:focus{background:var(--panel-2);border-color:var(--cy);color:var(--txt);box-shadow:none;} .fx .form-control::placeholder{color:var(--dim);opacity:.75;} .fx .btn-outline-secondary{border-color:var(--line);color:var(--txt);} .fx .btn-outline-secondary:hover{background:var(--panel-2);border-color:var(--line-2);color:var(--strong);} .fx .text-muted{color:var(--dim) !important;} .fx .loading-spinner{border-color:var(--line);border-top-color:var(--cy);} .fx .progress{background:var(--panel-2);} /* ------------------------------ mobile bar ------------------------------- */ .fx-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:1040; display:grid;grid-template-columns:1.4fr 1fr;gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(14px);border-top:1px solid var(--line); transform:translateY(120%);transition:transform .4s cubic-bezier(.22,1,.36,1); } .fx-tabbar.show{transform:translateY(0);} .fx-tabbar .fx-btn{min-height:44px;padding:12px 8px;font-size:13.5px;} @media (min-width:992px){ .fx-tabbar{display:none;} } body.fx-page .mobile-sticky-download{display:none !important;} @media (max-width:991px){ body.fx-page .fab-chat-container{bottom:94px !important;} } @media (prefers-reduced-motion:reduce){ body.fx-page *,body.fx-page *::before,body.fx-page *::after{ animation-duration:.001ms !important;transition-duration:.001ms !important; } }