/* ============================================================ PHOENIX ALAPRÉTEG — px-alap.css ------------------------------------------------------------ A Phoenix felületek KÖZÖS alapja: meleg papír-háttér finom szemcsével. Ez az alapértelmezés minden új felületen. Használat: (a szemcse magától rákerül) A szemcse egy beágyazott SVG-zaj — nincs külső kérés, nincs képfájl, offline is működik, és nem lassítja az oldalt. Csökkentett mozgás / nyomtatás esetén kikapcsol. ============================================================ */ :root { /* ── papír és tinta ── */ --px-papir: #faf7f2; /* az e-bookok alap krémje */ --px-papir-melyebb:#f4ede2; --px-lap: #fffdf9; /* kártya, doboz */ --px-lap-2: #f7f2e9; --px-vonal: #e3d8c6; --px-tinta: #2a241e; --px-tinta-lagy: #5a4f44; --px-tinta-halvany:#8a7d6e; /* ── arany ── */ --px-arany: #b8924a; --px-arany-vilagos:#d4aa6a; --px-arany-melyebb:#9a7b3f; /* ── jelzés ── */ --px-jelzes: #a8532e; /* A szemcse maga. baseFrequency = a szemcse finomsága; 0.9 elég sűrű ahhoz, hogy papírnak érződjön, és ne mintának. */ --px-szemcse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)' opacity='0.42'/%3E%3C/svg%3E"); } /* A papír maga: krém alap + egy nagyon halvány meleg fény felül. */ .px-papir { background-color: var(--px-papir); color: var(--px-tinta); } /* A szemcse a tartalom FÖLÖTT ül, nem alatta. Ez azért fontos: ha alá tennénk, minden olyan elem eltakarná, aminek saját átlátszatlan háttere van (kártya, doboz, maga az app-konténer) — és a szemcse csak a lapszéleken látszana. Fölötte, multiply módban viszont EGYSÉGESEN szemcsés lesz az egész felület, mint a valódi papír. pointer-events:none — soha nem fog el kattintást. */ .px-papir::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; /* minden fölött, de a natív dialógusok alatt */ pointer-events: none; background-image: var(--px-szemcse); opacity: .34; mix-blend-mode: multiply; } /* Sötét felületen ugyanez a szemcse világosít, nem sötétít. */ .px-papir-sotet::after { mix-blend-mode: screen; opacity: .22; } /* Nyomtatásnál nem kell a zaj. */ @media print { .px-papir::after { display: none; } }