/* * XO DNA Site Logo — frontend + editor shared styles. * * Loaded on the frontend and inside the block editor. */ /* * The block wrapper (.wp-block-xo-dna-site-logo) receives its configured * width from the render callback as a --xo-site-logo-width custom property, * not a literal "width" declaration — the property only supplies the value; * this rule is what actually declares "width". That keeps the declaration * itself in a normal, overridable stylesheet rule, so a child theme can * resize the logo (e.g. for a condensed sticky-header state) with a plain * later-loaded rule targeting this class, no !important needed: * * body.xo-condensed-sticky-header.xo-header-is-stuck .xo-site-header .wp-block-xo-dna-site-logo { * width: 3rem; * } * * Everything inside fills the wrapper. */ .wp-block-xo-dna-site-logo { display: block; width: var(--xo-site-logo-width, 180px); max-width: 100%; } .xo-dna-site-logo { display: block; width: 100%; text-decoration: none; } .xo-dna-site-logo--text { font-weight: 700; color: inherit; } .xo-dna-site-logo__picture { display: block; width: 100%; } .xo-dna-site-logo__image { display: block; width: 100%; max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- Dark-mode logo switching -------------------------------------------------------------------------- */ /* * Light logo is the safe fallback. Dark logo is hidden unless the resolved * active theme is dark. The canonical theme state is the data-xo-theme * attribute set on by the XO DNA theme initialisation script. * The @media (prefers-color-scheme) rule is intentionally absent: system * preference is resolved by PHP/JS and expressed exclusively through * data-xo-theme so the dark_mode_enabled setting is always honoured. */ .xo-dna-site-logo__image.xo-dna-site-logo__image--dark { display: none; } [data-xo-theme="dark"] .xo-dna-site-logo__image--light { display: none; } [data-xo-theme="dark"] .xo-dna-site-logo__image--dark { display: block; }