/* Phase 5 — Entity design presets. * * A curated, finite vocabulary (see core/EntityLayout.php's whitelists), * not arbitrary CSS: every selector below is gated on one of a fixed set of * data-* attribute VALUES this codebase itself writes onto — an * owner never supplies a selector, a property, or a raw value here, only a * choice from a dropdown that maps to one of these presets. * * Scope: every rule is qualified by body.entity-scope[data-*], so a page * that never sets these attributes (i.e. everything except a listing or * engine-single detail page) is completely unaffected. */ /* ---------- Button style ---------- */ body.entity-scope[data-button-style="outline"] .btn-ink, body.entity-scope[data-button-style="outline"] .btn-accent { background: transparent; color: var(--accent, var(--primary)); border: 1.5px solid var(--accent, var(--primary)); } body.entity-scope[data-button-style="outline"] .btn-ink:hover, body.entity-scope[data-button-style="outline"] .btn-accent:hover { background: var(--accent, var(--primary)); color: #fff; } body.entity-scope[data-button-style="soft"] .btn-ink, body.entity-scope[data-button-style="soft"] .btn-accent { background: color-mix(in srgb, var(--accent, var(--primary)) 14%, #fff); color: var(--accent, var(--primary)); border-color: transparent; } body.entity-scope[data-button-style="soft"] .btn-ink:hover, body.entity-scope[data-button-style="soft"] .btn-accent:hover { background: color-mix(in srgb, var(--accent, var(--primary)) 26%, #fff); } /* ---------- Card style ---------- */ body.entity-scope[data-card-style="elevated"] .panel, body.entity-scope[data-card-style="elevated"] .lp-contact-card { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); border-color: transparent; } body.entity-scope[data-card-style="bordered"] .panel, body.entity-scope[data-card-style="bordered"] .lp-contact-card { box-shadow: none; border: 1.5px solid var(--line, #E5E7EB); } /* ---------- Typography ---------- */ body.entity-scope[data-typography="serif-heading"] h1, body.entity-scope[data-typography="serif-heading"] h2, body.entity-scope[data-typography="serif-heading"] .lp-section-title { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; } body.entity-scope[data-typography="rounded"] h1, body.entity-scope[data-typography="rounded"] h2, body.entity-scope[data-typography="rounded"] .lp-section-title, body.entity-scope[data-typography="rounded"] .btn-ink, body.entity-scope[data-typography="rounded"] .btn-accent { font-family: ui-rounded, 'Segoe UI', system-ui, sans-serif; border-radius: 14px; } /* ---------- Density ---------- */ body.entity-scope[data-density="compact"] .panel { padding: .85rem 1rem; } body.entity-scope[data-density="compact"] .lp-section, body.entity-scope[data-density="compact"] section.panel { margin-top: .75rem !important; } /* ---------- Layout presets ---------- * Each preset is a small, curated bundle of the dimensions above rather * than a sixth independent axis — this is what keeps "hundreds of options" * from happening while still giving six visibly different looks. An owner * who also sets button/card/typography/density explicitly is not * overridden by these (the individual data-* rules above are more specific * and load after), so a preset is a starting point, not a lock-in. */ body.entity-scope[data-layout-preset="modern"] .panel { border-radius: 16px; } body.entity-scope[data-layout-preset="compact"] .lp-gallery-main, body.entity-scope[data-layout-preset="compact"] .lp-gallery-thumb { border-radius: 8px; } body.entity-scope[data-layout-preset="editorial"] .lp-section-title, body.entity-scope[data-layout-preset="editorial"] h1 { font-family: Georgia, 'Times New Roman', serif; } body.entity-scope[data-layout-preset="editorial"] .lp-content, body.entity-scope[data-layout-preset="editorial"] .pb-content { max-width: 68ch; } body.entity-scope[data-layout-preset="bento"] .panel { border-radius: 20px; } body.entity-scope[data-layout-preset="bento"] .lp-gallery-thumb { border-radius: 14px; } body.entity-scope[data-layout-preset="showcase"] .lp-gallery-main { border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }