/* * Flowly Framework Experience Layer * Shared interaction and accessibility polish for every standalone framework. * Each document keeps its own visual language and supplies a theme name on . */ body[data-framework-theme] { --ux-accent: #216b57; --ux-accent-strong: #164b3d; --ux-focus: rgba(33, 107, 87, 0.34); --ux-selection: #dff2e9; --ux-selection-ink: #132d25; --ux-control-min: 42px; accent-color: var(--ux-accent); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; scrollbar-color: color-mix(in srgb, var(--ux-accent) 42%, transparent) transparent; } body[data-framework-theme="affiliate"] { --ux-accent: #ed6b2d; --ux-accent-strong: #b94718; --ux-focus: rgba(237, 107, 45, 0.34); --ux-selection: #ffe4d6; --ux-selection-ink: #5f250c; } body[data-framework-theme="frontend-admin"] { --ux-accent: #1e6954; --ux-accent-strong: #123c31; --ux-focus: rgba(30, 105, 84, 0.34); --ux-selection: #dff2e8; --ux-selection-ink: #123c31; } body[data-framework-theme="parent-pause"] { --ux-accent: #2d7a63; --ux-accent-strong: #1f5949; --ux-focus: rgba(45, 122, 99, 0.32); --ux-selection: #e3f4f3; --ux-selection-ink: #173f36; } body[data-framework-theme="lead-system"] { --ux-accent: #f26522; --ux-accent-strong: #c44810; --ux-focus: rgba(242, 101, 34, 0.34); --ux-selection: #fff0e8; --ux-selection-ink: #672406; } body[data-framework-theme="competitor-scan"] { --ux-accent: #7055d8; --ux-accent-strong: #3b1e50; --ux-focus: rgba(112, 85, 216, 0.34); --ux-selection: #e8ffae; --ux-selection-ink: #25300c; } body[data-framework-theme="meta-mcp"] { --ux-accent: #1c8064; --ux-accent-strong: #145b48; --ux-focus: rgba(28, 128, 100, 0.34); --ux-selection: #d7ef9b; --ux-selection-ink: #20310d; } body[data-framework-theme="story-connection"] { --ux-accent: #7a5688; --ux-accent-strong: #5d4069; --ux-focus: rgba(122, 86, 136, 0.34); --ux-selection: #eee5f2; --ux-selection-ink: #35223c; } body[data-framework-theme="parent-product"] { --ux-accent: #df755b; --ux-accent-strong: #9e4e3b; --ux-focus: rgba(223, 117, 91, 0.32); --ux-selection: #fff0eb; --ux-selection-ink: #592b20; } body[data-framework-theme="printable-creator"] { --ux-accent: #754573; --ux-accent-strong: #542c55; --ux-focus: rgba(117, 69, 115, 0.34); --ux-selection: #f1e7f2; --ux-selection-ink: #3a1e3a; } body[data-framework-theme="search-delivery"] { --ux-accent: #0071e3; --ux-accent-strong: #0058b0; --ux-focus: rgba(0, 113, 227, 0.32); --ux-selection: #e5f1ff; --ux-selection-ink: #003d79; } body[data-framework-theme="website-launch"] { --ux-accent: #2c72dd; --ux-accent-strong: #1d55a9; --ux-focus: rgba(44, 114, 221, 0.32); --ux-selection: #ddebff; --ux-selection-ink: #123c7c; } body[data-framework-theme="booking-recovery"] { --ux-accent: #087b70; --ux-accent-strong: #075e56; --ux-focus: rgba(8, 123, 112, 0.34); --ux-selection: #dff5ed; --ux-selection-ink: #06463f; } body[data-framework-theme="local-market"] { --ux-accent: #55989a; --ux-accent-strong: #1e5d60; --ux-focus: rgba(85, 152, 154, 0.34); --ux-selection: #d9eff0; --ux-selection-ink: #153f41; } body[data-framework-theme="positioning-moat"] { --ux-accent: #d99a32; --ux-accent-strong: #9a6612; --ux-focus: rgba(217, 154, 50, 0.36); --ux-selection: #fff0cf; --ux-selection-ink: #563706; } body[data-framework-theme="opportunity-finder"] { --ux-accent: #21785a; --ux-accent-strong: #15523d; --ux-focus: rgba(33, 120, 90, 0.34); --ux-selection: #dfff72; --ux-selection-ink: #15241f; } body[data-framework-theme="parenting-activity"] { --ux-accent: #2b7361; --ux-accent-strong: #173f38; --ux-focus: rgba(43, 115, 97, 0.34); --ux-selection: #f6cc57; --ux-selection-ink: #173f38; } body[data-framework-theme] ::selection { background: var(--ux-selection); color: var(--ux-selection-ink); } body[data-framework-theme] :where(h1, h2, h3) { text-wrap: balance; } body[data-framework-theme] :where(p, li, .lead, .subtitle) { text-wrap: pretty; } body[data-framework-theme] :where( button, .btn, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select ) { min-height: var(--ux-control-min); } body[data-framework-theme] :where( button, .btn, a[href], input, select, textarea, summary, [role="button"], [tabindex] ):focus-visible { outline: 3px solid var(--ux-focus) !important; outline-offset: 2px; } body[data-framework-theme] :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea ) { caret-color: var(--ux-accent); transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } body[data-framework-theme] :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea ):focus { border-color: var(--ux-accent) !important; box-shadow: 0 0 0 4px var(--ux-focus) !important; } body[data-framework-theme] :where(input, textarea)::placeholder { opacity: 0.72; } body[data-framework-theme] :where(button, .btn, [role="button"]) { touch-action: manipulation; transition: translate 160ms ease, box-shadow 160ms ease, filter 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease; } body[data-framework-theme] :where(button, .btn, [role="button"]):active { translate: 0 1px; } body[data-framework-theme] :where( .section, .card, .panel, .box, [id] ) { scroll-margin-top: 88px; } body[data-framework-theme] :where( .amount, .metric, .stat, .score, .summary-pill, table ) { font-variant-numeric: tabular-nums; } body[data-framework-theme] :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ux-accent); } body[data-framework-theme] :where(button, .btn, [role="button"])[disabled], body[data-framework-theme] :where(button, .btn, [role="button"])[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(0.25); opacity: 0.56; translate: none; } @media (hover: hover) and (pointer: fine) { body[data-framework-theme] :where(button, .btn, [role="button"]):not([disabled]):not([aria-disabled="true"]):hover { filter: saturate(1.06); translate: 0 -1px; } body[data-framework-theme] :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea ):not(:focus):hover { border-color: color-mix(in srgb, var(--ux-accent) 54%, transparent); } } @media (max-width: 760px) { body[data-framework-theme] { --ux-control-min: 46px; } body[data-framework-theme] :where( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea ) { font-size: 16px !important; } body[data-framework-theme] :where(h1) { line-height: 1.12; } } @media (prefers-reduced-motion: reduce) { body[data-framework-theme], body[data-framework-theme] *, body[data-framework-theme] *::before, body[data-framework-theme] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }