/* ══════════════════════════════════════════════════════════════ * Illusia Frame — Page Style (Customizer) * * Moldura decorativa sutil com ornamento de canto âmbar. * Ativada via Customizer > Layout > Page Style > "Illusia Frame". * Classe gerada no : .page-style-illusia-frame * * Alvo: .main__background (elemento decorativo do Fictioneer, * mesmo alvo dos page styles nativos como Chamfered, etc.). * Usa tokens bridge (--bg-* / --fg-*) para dark+light mode. * * @since 1.10.1 * ══════════════════════════════════════════════════════════════ */ /* ── 1. Frame — only when page style is active ── */ /* * .main__background já é position:absolute com inset:0, * background-color:var(--page-bg-color) e border-radius do pai. * Não precisamos sobrescrever nada no elemento — só nos pseudos. */ /* Outer frame border */ :root.page-style-illusia-frame .main__background::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--border-0); border-radius: inherit; pointer-events: none; z-index: 1; } /* Corner ornament — top left */ :root.page-style-illusia-frame .main__background::after { content: ''; position: absolute; top: -1px; left: -1px; width: 3rem; height: 3rem; border-top: 1px solid hsl(var(--amber-free) / .2); border-left: 1px solid hsl(var(--amber-free) / .2); border-radius: var(--r-lg) 0 0 0; pointer-events: none; z-index: 1; } /* ── 2. Light Mode ── */ :root[data-mode=light].page-style-illusia-frame .main__background::before { border-color: hsl(var(--illusia-border-base) / .08); } :root[data-mode=light].page-style-illusia-frame .main__background::after { border-top-color: hsl(var(--amber-dim-free) / .15); border-left-color: hsl(var(--amber-dim-free) / .15); } /* ── 3. Responsive — Small (<=400px) ── */ @media (max-width: 400px) { /* Frame too tight on small screens — remove */ :root.page-style-illusia-frame .main__background::before, :root.page-style-illusia-frame .main__background::after { display: none; } }