/* ========================= SEEME BASE DESIGN SYSTEM Single source of truth for global tokens and base layout only. ========================= */ :root { /* surfaces */ --color-bg-main: #0b0f19; --color-bg-box: rgba(22, 30, 56, 0.82); --color-bg-soft: rgba(255, 255, 255, 0.08); /* text */ --color-text-main: #eef2ff; --color-text-muted: rgba(238, 242, 255, 0.75); /* accents */ --color-accent: #40b6ff; --color-accent-soft: rgba(64, 182, 255, 0.16); /* borders & status */ --color-border-light: rgba(255, 255, 255, 0.14); --color-error: #ff4d4d; /* semantic theme roles Migration target for component CSS. Values intentionally preserve the current dark UI exactly. */ /* page */ --surface-page: #07111f; --surface-page-glow: rgba(64, 182, 255, 0.18); /* controls & secondary surfaces */ --surface-control: rgba(255, 255, 255, 0.04); --surface-control-focus: rgba(255, 255, 255, 0.06); --surface-control-focus-strong: rgba(255, 255, 255, 0.07); --surface-control-readonly: rgba(255, 255, 255, 0.03); --surface-subtle: rgba(255, 255, 255, 0.05); --surface-secondary-action: rgba(255, 255, 255, 0.08); --surface-modal: rgba(15, 22, 41, 0.96); --surface-modal-strong: rgba(15, 22, 41, 0.97); /* elevated / overlay controls */ --surface-floating-control: rgba(18, 23, 42, 0.55); --surface-elevated: rgba(18, 23, 42, 0.92); --surface-overlay-action: rgba(0, 0, 0, 0.38); --surface-control-neutral: rgba(255, 255, 255, 0.06); --surface-follow-tab-active: rgba(255, 255, 255, 0.075); --surface-interactive-hover: rgba(255, 255, 255, 0.10); --surface-interactive-hover-strong: rgba(255, 255, 255, 0.11); --surface-control-faint: rgba(255, 255, 255, 0.035); --surface-control-hover-emphasis: rgba(255, 255, 255, 0.13); --surface-media-canvas: #000000; --surface-preview-close: rgba(0, 0, 0, 0.52); --surface-delete-action: rgba(235, 238, 242, 0.90); --surface-post-processing: rgba(255, 255, 255, 0.04); /* text roles */ --text-label: rgba(238, 242, 255, 0.86); --text-secondary: rgba(238, 242, 255, 0.82); --text-subtle: rgba(238, 242, 255, 0.72); --text-on-accent: #0b0f19; --text-on-accent-deep: #07111f; --text-meta-strong: rgba(238, 242, 255, 0.80); --text-control-dim: rgba(238, 242, 255, 0.74); --text-overlay-bright: rgba(238, 242, 255, 0.95); --text-on-dark-bright: rgba(255, 255, 255, 0.98); --text-faint: rgba(238, 242, 255, 0.48); --text-emphasis: rgba(238, 242, 255, 0.98); --text-status-muted: rgba(238, 242, 255, 0.68); --text-section-label: rgba(238, 242, 255, 0.58); --text-note: rgba(238, 242, 255, 0.46); /* neutral control text */ --text-neutral-muted: rgba(255, 255, 255, 0.72); --text-neutral: rgba(255, 255, 255, 0.86); --text-neutral-strong: rgba(255, 255, 255, 0.92); --text-neutral-bright: rgba(255, 255, 255, 0.95); --text-composer-label: rgba(245, 248, 255, 0.88); --text-composer-hover: rgba(245, 248, 255, 0.92); --text-moderation-explain: #888; --text-post-processing: rgba(255, 255, 255, 0.78); /* borders */ --border-control: rgba(255, 255, 255, 0.12); --border-control-strong: rgba(255, 255, 255, 0.13); --border-subtle: rgba(255, 255, 255, 0.10); --border-divider: rgba(255, 255, 255, 0.08); --border-control-emphasis: rgba(255, 255, 255, 0.18); --border-control-focus-neutral: rgba(255, 255, 255, 0.34); --border-interactive-hover-strong: rgba(255, 255, 255, 0.20); --border-follow-tab-active: rgba(255, 255, 255, 0.20); --border-overlay-strong: rgba(255, 255, 255, 0.15); --border-post-processing: rgba(255, 255, 255, 0.16); /* accent states */ --accent-strong: rgba(64, 182, 255, 0.95); --accent-border-strong: rgba(64, 182, 255, 0.62); --accent-gradient-start: rgba(18, 148, 230, 0.95); --accent-gradient-end: rgba(64, 182, 255, 0.82); --focus-outline: rgba(64, 182, 255, 0.72); --accent-surface-prominent: rgba(47, 162, 245, 0.75); --accent-surface-active: rgba(47, 162, 245, 0.18); /* composer selection */ --accent-border-selection: rgba(64, 182, 255, 0.50); --accent-border-action: rgba(64, 182, 255, 0.38); --accent-border-action-hover: rgba(64, 182, 255, 0.56); --accent-border-selection-strong: rgba(64, 182, 255, 0.60); --accent-surface-selection: rgba(64, 182, 255, 0.11); --accent-surface-strong: rgba(64, 182, 255, 0.16); --accent-ring-selection: rgba(64, 182, 255, 0.08); /* warning */ --status-warning-border: rgba(255, 189, 89, 0.28); --status-warning-surface: rgba(255, 189, 89, 0.08); --status-warning-text: rgba(255, 231, 184, 0.96); /* danger */ --status-danger-border: rgba(255, 77, 77, 0.25); --status-danger-surface: rgba(255, 77, 77, 0.06); --status-danger-text: rgba(255, 196, 196, 0.96); --status-danger-strong: rgba(255, 77, 77, 0.95); --status-danger-gradient-end: rgba(255, 145, 145, 0.80); /* destructive controls */ --status-danger-control-surface: rgba(255, 77, 77, 0.12); --status-danger-control-surface-hover: rgba(255, 77, 77, 0.18); --status-danger-control-border: rgba(255, 77, 77, 0.55); --status-danger-control-border-strong: rgba(255, 77, 77, 0.75); --status-danger-control-text: rgba(255, 77, 77, 0.90); --status-danger-control-text-strong: rgba(255, 120, 120, 0.98); /* positive / negative change states */ --status-positive-text: rgba(125, 220, 170, 0.90); --status-negative-text: rgba(255, 145, 145, 0.90); /* post activity deltas */ --activity-positive-text: #9df0ba; --activity-positive-surface: rgba(55, 200, 110, 0.16); --activity-positive-border: rgba(93, 224, 140, 0.32); --activity-negative-text: #ffabab; --activity-negative-surface: rgba(255, 85, 85, 0.14); --activity-negative-border: rgba(255, 110, 110, 0.30); /* moderation states */ --moderation-review-surface: rgba(255, 214, 102, 0.16); --moderation-removed-surface: rgba(255, 99, 99, 0.16); --moderation-preview-close-surface: rgba(220, 53, 69, 0.55); --status-processing-failed-border: rgba(255, 90, 90, 0.40); --status-processing-failed-text: rgba(255, 180, 180, 0.95); --status-danger-action-border: rgba(255, 92, 92, 0.46); --status-danger-action-surface: rgba(255, 77, 77, 0.08); --status-danger-action-text: rgba(255, 128, 128, 0.96); --status-danger-action-surface-hover: rgba(255, 77, 77, 0.14); --status-danger-action-border-hover: rgba(255, 110, 110, 0.64); /* notification / live status */ --status-notification-surface: #e5484d; --status-notification-border: rgba(20, 24, 30, 0.96); --text-on-status: #ffffff; /* live / online status */ --status-live-surface: #55e58a; --status-live-ring: rgba(85, 229, 138, 0.34); --status-live-ring-clear: rgba(85, 229, 138, 0); --status-live-ring-soft: rgba(85, 229, 138, 0.12); /* decorative accent */ --accent-decoration: rgba(39, 221, 214, 0.85); /* overlays & themed effects */ --overlay-backdrop: rgba(2, 6, 23, 0.72); --overlay-preview: rgba(0, 0, 0, 0.72); --overlay-dialog: rgba(0, 0, 0, 0.55); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.42); --shadow-accent-sm: 0 14px 40px rgba(64, 182, 255, 0.16); --shadow-accent-md: 0 18px 55px rgba(64, 182, 255, 0.22); --shadow-avatar: 0 16px 40px rgba(0, 0, 0, 0.35); --shadow-avatar-hover: 0 18px 55px rgba(0, 0, 0, 0.45); --shadow-control-strong: 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-composer-control: 0 10px 28px rgba(0, 0, 0, 0.18); --focus-ring-neutral: 0 0 0 3px rgba(255, 255, 255, 0.10); --focus-ring-neutral-soft: 0 0 0 3px rgba(255, 255, 255, 0.04); --shadow-action-soft: 0 10px 28px rgba(0, 0, 0, 0.14); /* browse / feed roles */ /* text */ --text-placeholder: rgba(238, 242, 255, 0.55); --text-control: rgba(238, 242, 255, 0.90); --text-overlay-control: rgba(238, 242, 255, 0.92); --text-overlay-control-strong: rgba(238, 242, 255, 0.94); --text-overlay-control-active: rgba(238, 242, 255, 0.96); /* panel/dialog text roles: visually identical in dark mode, independent in light mode */ --text-panel-control: rgba(238, 242, 255, 0.92); --text-panel-strong: rgba(238, 242, 255, 0.94); --text-solid-action: rgba(238, 242, 255, 0.92); --text-meta: rgba(238, 242, 255, 0.78); /* feed surfaces */ --surface-panel-muted: rgba(255, 255, 255, 0.03); --surface-card-muted: rgba(255, 255, 255, 0.02); --surface-control-hover: rgba(255, 255, 255, 0.12); --surface-overlay-label: rgba(0, 0, 0, 0.26); --surface-overlay-control: rgba(0, 0, 0, 0.32); --surface-card-footer: rgba(0, 0, 0, 0.18); /* quiet / compact controls */ --surface-control-quiet: rgba(255, 255, 255, 0.025); --surface-control-soft: rgba(255, 255, 255, 0.045); --surface-control-selected-neutral: rgba(255, 255, 255, 0.055); --surface-control-hover-neutral: rgba(255, 255, 255, 0.09); --surface-control-focus-neutral: rgba(255, 255, 255, 0.10); --text-control-hover: rgba(255, 255, 255, 0.88); --text-control-active: rgba(255, 255, 255, 0.96); --text-strong: rgba(238, 242, 255, 0.96); --text-body-strong: rgba(238, 242, 255, 0.88); --text-placeholder-faint: rgba(238, 242, 255, 0.44); --text-icon-muted: rgba(238, 242, 255, 0.58); --text-on-accent-soft: rgba(238, 246, 255, 0.96); --text-on-selected-accent: #ffffff; /* faint accent interaction */ --accent-surface-faint: rgba(64, 182, 255, 0.08); --accent-border-faint: rgba(64, 182, 255, 0.28); /* stronger borders */ --border-strong: rgba(255, 255, 255, 0.16); --border-control-hover: rgba(255, 255, 255, 0.22); /* accent interaction levels */ --accent-surface-soft: rgba(64, 182, 255, 0.10); --accent-surface-selected: rgba(64, 182, 255, 0.12); --accent-surface-hover: rgba(64, 182, 255, 0.14); --accent-border-soft: rgba(64, 182, 255, 0.24); --accent-border-selected: rgba(64, 182, 255, 0.42); --accent-border-hover: rgba(64, 182, 255, 0.36); --accent-border-medium: rgba(64, 182, 255, 0.34); /* like animation effects */ --like-fx-shadow: rgba(64, 182, 255, 0.36); --like-fx-ring: rgba(64, 182, 255, 0.46); --like-fx-burst-wide: rgba(64, 182, 255, 0.13); --like-fx-burst-a: rgba(64, 182, 255, 0.16); --like-fx-burst-b: rgba(64, 182, 255, 0.14); --like-fx-burst-c: rgba(64, 182, 255, 0.12); /* soft danger state */ --status-danger-border-soft: rgba(255, 120, 120, 0.22); --status-danger-surface-soft: rgba(255, 120, 120, 0.05); /* skeleton */ --skeleton-line-surface: rgba(255, 255, 255, 0.08); --skeleton-surface: rgba(255, 255, 255, 0.07); --skeleton-border: rgba(255, 255, 255, 0.08); --skeleton-shimmer-clear: rgba(255, 255, 255, 0); --skeleton-shimmer-soft: rgba(255, 255, 255, 0.08); --skeleton-shimmer-strong: rgba(255, 255, 255, 0.16); /* processing indicators */ --spinner-track: rgba(255, 255, 255, 0.30); --spinner-head: rgba(255, 255, 255, 0.95); --spinner-processing-track: rgba(255, 255, 255, 0.25); --spinner-processing-head: rgba(255, 255, 255, 0.90); /* feed shadows */ --shadow-overlay-control: 0 10px 24px rgba(0, 0, 0, 0.28); --shadow-skeleton-pill: 0 10px 24px rgba(0, 0, 0, 0.16); /* shared authenticated shell / dialogs / PWA */ --shadow-auth-header: 0 6px 18px rgba(0, 0, 0, 0.12); --filter-auth-logo-shadow: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); --filter-footer-active-icon: drop-shadow(0 10px 24px rgba(64, 182, 255, 0.20)); --surface-language-menu: rgba(11, 18, 32, 0.96); --shadow-language-menu: 0 14px 32px rgba(0, 0, 0, 0.28); --shadow-toast: 0 18px 55px rgba(0, 0, 0, 0.45); --toast-success-border: rgba(64, 182, 255, 0.22); --toast-warning-border: rgba(255, 201, 84, 0.22); --toast-error-border: rgba(255, 77, 77, 0.22); --text-toast-close: rgba(238, 242, 255, 0.70); --shadow-confirm: 0 26px 90px rgba(0, 0, 0, 0.55); --text-confirm-title: rgba(238, 242, 255, 0.62); --accent-surface-confirm-hover: rgba(64, 182, 255, 0.18); --accent-border-confirm-hover: rgba(64, 182, 255, 0.32); --status-danger-confirm-surface: rgba(255, 77, 77, 0.16); --status-danger-confirm-border: rgba(255, 77, 77, 0.26); --status-danger-confirm-surface-hover: rgba(255, 77, 77, 0.22); --status-danger-confirm-border-hover: rgba(255, 77, 77, 0.34); --accent-border-pwa-ready: rgba(64, 182, 255, 0.72); /* company profile controls */ --status-field-error: #d64545; /* Company Post Normal / Grid controls. Shared by the view selector and Post flip control. */ --post-view-control-surface: linear-gradient( 180deg, rgba(10, 42, 49, 0.72), rgba(5, 28, 34, 0.66) ); --post-view-control-border: rgba(39, 221, 214, 0.42); --post-view-control-text: #f2fbfb; --post-view-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 13px rgba(0, 0, 0, 0.14); --post-view-control-filter: blur(10px) saturate(125%); --post-view-control-active-surface: linear-gradient( 180deg, rgba(255, 151, 74, 0.42), rgba(243, 111, 33, 0.32) ); --post-view-control-active-border: rgba(255, 139, 56, 0.92); --post-view-control-active-text: #fff8f1; --post-view-control-active-shadow: inset 0 1px 0 rgba(255, 218, 180, 0.18), 0 0 0 1px rgba(255, 139, 56, 0.14), 0 0 10px rgba(255, 126, 42, 0.34); --post-view-control-hover-surface: linear-gradient( 180deg, rgba(16, 60, 67, 0.82), rgba(7, 39, 45, 0.76) ); --post-view-control-hover-border: rgba(83, 247, 238, 0.70); /* Post flip switch — DARK canonical appearance. */ --post-flip-toggle-track-surface: var(--post-view-control-surface); --post-flip-toggle-track-border: var(--post-view-control-border); --post-flip-toggle-track-shadow: var(--post-view-control-shadow); --post-flip-toggle-track-filter: var(--post-view-control-filter); --post-flip-toggle-thumb-surface: #00aeba; --post-flip-toggle-thumb-shadow: 0 0 7px rgba(0, 174, 186, 0.42); /* authenticated Aurora shared choice selection */ --auth-choice-selected-surface: linear-gradient( 180deg, rgba(255, 139, 56, 0.34), rgba(243, 111, 33, 0.28) ); --auth-choice-selected-border: rgba(255, 139, 56, 0.92); --auth-choice-selected-text: #f4ffff; --text-counter-muted: rgba(238, 242, 255, 0.62); --status-limit-warning-text: rgba(255, 196, 92, 0.95); /* mixed public/auth company view */ --surface-card-navigation-control: rgba(0, 0, 0, 0.22); --text-card-navigation-control: rgba(238, 242, 255, 0.85); --accent-surface-action-solid: rgba(64, 182, 255, 0.90); --border-content-divider-soft: rgba(255, 255, 255, 0.09); --text-content-secondary: rgba(238, 242, 255, 0.76); /* radar */ --text-radar-placeholder: rgba(238, 242, 255, 0.38); --surface-radar-menu: #0d1725; --shadow-radar-menu: 0 16px 36px rgba(0, 0, 0, 0.34); --status-danger-radar-surface: rgba(255, 88, 88, 0.10); --status-danger-radar-text: #ff7474; --shadow-radar-primary: 0 10px 28px rgba(64, 182, 255, 0.12); --accent-surface-radar-secondary: rgba(64, 182, 255, 0.07); --accent-border-radar-secondary-hover: rgba(64, 182, 255, 0.44); --border-radar-stage: rgba(64, 182, 255, 0.20); --radar-stage-gradient-center: rgba(64, 182, 255, 0.075); --radar-stage-gradient-mid: rgba(64, 182, 255, 0.025); --radar-stage-gradient-edge-soft: rgba(11, 15, 25, 0.10); --radar-stage-gradient-edge: rgba(11, 15, 25, 0.28); --shadow-radar-stage: inset 0 0 45px rgba(64, 182, 255, 0.035), 0 14px 40px rgba(0, 0, 0, 0.16); --accent-radar-axis: rgba(64, 182, 255, 0.09); --accent-radar-ring: rgba(64, 182, 255, 0.18); --surface-radar-ring-label: rgba(8, 16, 29, 0.78); --accent-border-radar-center: rgba(64, 182, 255, 0.58); --accent-surface-radar-center: rgba(64, 182, 255, 0.18); --shadow-radar-center: 0 0 0 7px rgba(64, 182, 255, 0.07), 0 0 28px rgba(64, 182, 255, 0.28); --shadow-radar-marker: 0 0 14px rgba(64, 182, 255, 0.48); --shadow-radar-label: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.65); --status-following-surface: #39c86a; --shadow-status-following: 0 0 6px rgba(57, 200, 106, 0.42); --shadow-radar-label-hover: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(64, 182, 255, 0.72), 0 0 18px rgba(64, 182, 255, 0.28); --shadow-radar-marker-hover: 0 0 0 4px rgba(64, 182, 255, 0.10), 0 0 18px rgba(64, 182, 255, 0.64); --focus-outline-radar: rgba(64, 182, 255, 0.82); --surface-radar-zoom-control: rgba(11, 15, 25, 0.84); --shadow-radar-pan-active: 0 0 0 2px rgba(64, 182, 255, 0.10), 0 0 14px rgba(64, 182, 255, 0.22); --overlay-radar-save: rgba(3, 7, 14, 0.72); --surface-radar-save-dialog: rgba(18, 25, 46, 0.98); --shadow-radar-save-dialog: 0 24px 70px rgba(0, 0, 0, 0.46); --border-radar-result-divider: rgba(255, 255, 255, 0.055); --status-live-ring-pulse-soft: rgba(85, 229, 138, 0.11); /* effects */ --radius-sm: 10px; --radius-md: 14px; --shadow-sm: 0 8px 26px rgba(0, 0, 0, 0.30); --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.40); --ring: 0 0 0 4px rgba(64, 182, 255, 0.22); /* layout constants */ --footer-h: 72px; --app-content-max: 1200px; --container-max: 1100px; /* Theme-sensitive normal-state opacity. Dark values preserve the current visual exactly. */ --opacity-composer-cancel: 0.86; --opacity-site-title: 0.95; --opacity-footer-icon: 0.92; --opacity-footer-label: 0.88; --opacity-readonly-control: 0.9; --opacity-posts-muted: 0.78; --opacity-post-icon: 0.88; --opacity-add-post-icon: 0.95; --opacity-browse-hint: 0.58; --opacity-like-count: 0.92; --opacity-browse-card-icon: 0.95; --opacity-browse-like-icon: 0.90; --opacity-follow-tab-inactive: 0.82; --opacity-follow-search-hint: 0.75; --opacity-browse-meaning: 0.78; --opacity-follow-tab-meta: 0.62; --opacity-company-type-option-icon: 0.92; --opacity-browse-type-badge-icon: 0.92; --opacity-company-type-badge-icon: 0.9; --opacity-filter-chip-icon: 0.92; --opacity-filter-active-mark: 0.9; --opacity-now-secondary: 0.58; --opacity-now-hint: 0.72; --opacity-radar-note: 0.82; --opacity-radar-status: 0.76; --opacity-radar-status-hint: 0.66; --opacity-user-search-supporting: 0.78; } /* ========================================================== SIMINEO LIGHT V6 Clean brand-inverse palette Core identity: - deep SIMINEO navy: #07111f - primary brand blue: #40b6ff - deep brand blue: #1294e6 - bright cold surfaces, not pure white ========================================================== */ html[data-theme="light"] { color-scheme: light; /* ====================================================== PAGE ====================================================== */ --color-bg-main: #cfe6f5; --surface-page: #d4eaf8; --surface-page-glow: rgba(64, 182, 255, 0.22); --color-bg-box: rgba(251, 253, 255, 0.99); --color-bg-soft: rgba(64, 182, 255, 0.10); /* ====================================================== TYPOGRAPHY Deep dark-theme navy becomes the light-theme ink. ====================================================== */ --color-text-main: #07111f; --accent-decoration: rgba(0, 145, 160, 0.82); --color-text-muted: rgba(7, 17, 31, 0.64); --text-label: rgba(7, 17, 31, 0.88); --text-secondary: rgba(7, 17, 31, 0.78); --text-subtle: rgba(7, 17, 31, 0.62); --text-meta-strong: rgba(7, 17, 31, 0.76); --text-control-dim: rgba(7, 17, 31, 0.82); --text-faint: rgba(7, 17, 31, 0.46); --text-emphasis: #07111f; --text-status-muted: rgba(7, 17, 31, 0.58); --text-section-label: rgba(7, 17, 31, 0.54); --text-note: rgba(7, 17, 31, 0.46); --text-neutral-muted: rgba(7, 17, 31, 0.62); --text-neutral: rgba(7, 17, 31, 0.80); --text-neutral-strong: rgba(7, 17, 31, 0.90); --text-neutral-bright: #07111f; --text-composer-label: rgba(7, 17, 31, 0.82); --text-composer-hover: #07111f; --text-moderation-explain: rgba(7, 17, 31, 0.56); --text-post-processing: rgba(7, 17, 31, 0.70); --text-placeholder: rgba(7, 17, 31, 0.50); --text-placeholder-faint: rgba(7, 17, 31, 0.40); --text-control: #07111f; --text-meta: rgba(7, 17, 31, 0.68); --text-control-hover: rgba(7, 17, 31, 0.88); --text-control-active: #07111f; --text-strong: #07111f; --text-body-strong: rgba(7, 17, 31, 0.84); --text-icon-muted: rgba(7, 17, 31, 0.56); --text-counter-muted: rgba(7, 17, 31, 0.54); --text-content-secondary: rgba(7, 17, 31, 0.68); --text-radar-placeholder: rgba(7, 17, 31, 0.42); /* ====================================================== PANEL / BUTTON TEXT ====================================================== */ --text-panel-control: rgba(7, 17, 31, 0.86); --text-panel-strong: #07111f; --text-solid-action: #07111f; --text-overlay-control: rgba(7, 17, 31, 0.86); --text-overlay-control-strong: #07111f; --text-overlay-control-active: #07111f; --text-card-navigation-control: #07111f; --text-on-selected-accent: #07111f; --text-on-accent-soft: #07111f; /* ====================================================== CORE LIGHT SURFACES Only a few levels – avoid washed-out blue soup. ====================================================== */ --surface-control: #f3f8fc; --surface-control-focus: #e5eff7; --surface-control-focus-strong: #e2edf6; --surface-control-readonly: #f6fafc; --surface-subtle: #edf5fa; --surface-secondary-action: #dfeaf4; --surface-modal: rgba(252, 254, 255, 0.985); --surface-modal-strong: rgba(255, 255, 255, 0.995); --surface-elevated: rgba(252, 254, 255, 0.985); --surface-control-neutral: #e7f1f8; --surface-follow-tab-active: rgba(64, 182, 255, 0.15); --surface-interactive-hover: #d7e5f0; --surface-interactive-hover-strong: #d3e2ee; --surface-control-faint: #f5f9fd; --surface-control-hover-emphasis: #cbdceb; --surface-panel-muted: #f7fbfe; --surface-card-muted: #fbfdff; --surface-control-hover: #cfdfec; --surface-control-quiet: #f9fcff; --surface-control-soft: #eff6fb; --surface-control-selected-neutral: #eaf3f9; --surface-control-hover-neutral: #dbe8f2; --surface-control-focus-neutral: #d7e5f0; --surface-post-processing: #f3f8fc; /* ====================================================== CARD / CHIP / FLOATING SURFACES Near-white, blue-edged – like the approved mockup. ====================================================== */ --surface-overlay-action: rgba(252, 254, 255, 0.92); --surface-overlay-label: rgba(221, 235, 245, 0.96); --surface-overlay-control: rgba(217, 232, 243, 0.97); --surface-floating-control: rgba(224, 237, 246, 0.96); --surface-card-footer: #e4eff7; --surface-card-navigation-control: rgba(214, 230, 241, 0.97); --surface-language-menu: rgba(252, 254, 255, 0.99); /* ====================================================== OUTLINES Medium/deep brand-blue outline supplies the character. ====================================================== */ --color-border-light: rgba(7, 17, 31, 0.26); --border-control: rgba(7, 17, 31, 0.22); --border-control-strong: rgba(7, 17, 31, 0.24); --border-subtle: rgba(7, 17, 31, 0.18); --border-divider: rgba(7, 17, 31, 0.10); --border-control-emphasis: rgba(7, 17, 31, 0.34); --border-control-focus-neutral: rgba(7, 17, 31, 0.50); --border-interactive-hover-strong: rgba(7, 17, 31, 0.38); --border-follow-tab-active: rgba(7, 17, 31, 0.36); --border-overlay-strong: rgba(7, 17, 31, 0.34); --border-post-processing: rgba(7, 17, 31, 0.30); --border-strong: rgba(7, 17, 31, 0.30); --border-control-hover: rgba(7, 17, 31, 0.42); --border-content-divider-soft: rgba(7, 17, 31, 0.12); /* ====================================================== BRAND BLUE The brand itself does not change between themes. ====================================================== */ --color-accent-soft: rgba(64, 182, 255, 0.16); --accent-surface-faint: rgba(64, 182, 255, 0.08); --accent-surface-soft: rgba(64, 182, 255, 0.12); --accent-surface-selection: rgba(64, 182, 255, 0.14); --accent-surface-selected: rgba(64, 182, 255, 0.16); --accent-surface-hover: rgba(64, 182, 255, 0.20); --accent-surface-active: rgba(64, 182, 255, 0.18); --accent-border-faint: rgba(64, 182, 255, 0.28); --accent-border-soft: rgba(64, 182, 255, 0.34); --accent-border-medium: rgba(64, 182, 255, 0.46); --accent-border-selected: rgba(64, 182, 255, 0.56); --accent-border-hover: rgba(64, 182, 255, 0.50); --accent-border-strong: rgba(64, 182, 255, 0.66); --accent-ring-selection: rgba(64, 182, 255, 0.12); --ring: 0 0 0 4px rgba(64, 182, 255, 0.18); --focus-ring-neutral: 0 0 0 3px rgba(7, 17, 31, 0.14); --focus-ring-neutral-soft: 0 0 0 3px rgba(7, 17, 31, 0.08); /* ====================================================== SHADOWS Blue/navy depth instead of grey haze. ====================================================== */ --shadow-sm: 0 8px 26px rgba(22, 68, 103, 0.12); --shadow-md: 0 16px 48px rgba(22, 68, 103, 0.16); --shadow-modal: 0 24px 80px rgba(7, 17, 31, 0.18); --shadow-avatar: 0 16px 40px rgba(22, 68, 103, 0.14); --shadow-avatar-hover: 0 18px 55px rgba(22, 68, 103, 0.18); --shadow-control-strong: 0 10px 24px rgba(22, 68, 103, 0.14); --shadow-composer-control: 0 10px 28px rgba(22, 68, 103, 0.11); --shadow-action-soft: 0 10px 28px rgba(22, 68, 103, 0.09); --shadow-overlay-control: 0 10px 24px rgba(7, 17, 31, 0.14); --shadow-skeleton-pill: 0 10px 24px rgba(22, 68, 103, 0.08); --shadow-auth-header: 0 6px 18px rgba(22, 68, 103, 0.10); --shadow-language-menu: 0 14px 32px rgba(22, 68, 103, 0.14); --shadow-toast: 0 18px 55px rgba(7, 17, 31, 0.18); --shadow-confirm: 0 26px 90px rgba(7, 17, 31, 0.22); --filter-auth-logo-shadow: drop-shadow( 0 5px 12px rgba(18, 148, 230, 0.16) ); --filter-footer-active-icon: drop-shadow( 0 8px 20px rgba(64, 182, 255, 0.36) ); /* ====================================================== SKELETON / SPINNER ====================================================== */ --skeleton-line-surface: rgba(18, 148, 230, 0.08); --skeleton-surface: rgba(18, 148, 230, 0.06); --skeleton-border: rgba(7, 17, 31, 0.10); --skeleton-shimmer-clear: rgba(255, 255, 255, 0); --skeleton-shimmer-soft: rgba(255, 255, 255, 0.42); --skeleton-shimmer-strong: rgba(255, 255, 255, 0.80); --spinner-track: rgba(7, 17, 31, 0.16); --spinner-head: rgba(7, 17, 31, 0.72); --spinner-processing-track: rgba(7, 17, 31, 0.14); --spinner-processing-head: rgba(7, 17, 31, 0.68); /* ====================================================== STATUS TEXT ON LIGHT SURFACES ====================================================== */ --status-warning-text: #805500; --status-danger-text: #a9232e; --status-danger-strong: #d64545; --status-danger-control-text: #b52d38; --status-danger-control-text-strong: #a9232e; --status-positive-text: #14764a; --status-negative-text: #a9232e; --activity-positive-text: #14764a; --activity-negative-text: #a9232e; --status-processing-failed-text: #a9232e; --status-danger-action-text: #a9232e; --status-field-error: #b52d38; --status-limit-warning-text: #805500; --status-notification-border: rgba(255, 255, 255, 0.96); /* ====================================================== OVERLAYS Backdrops remain dark intentionally. ====================================================== */ --overlay-backdrop: rgba(7, 17, 31, 0.48); --overlay-dialog: rgba(7, 17, 31, 0.42); --overlay-radar-save: rgba(7, 17, 31, 0.46); /* ====================================================== RADAR ====================================================== */ --surface-radar-menu: #f8fbfe; --shadow-radar-menu: 0 16px 36px rgba(22, 68, 103, 0.14); --status-danger-radar-text: #b52d38; --border-radar-stage: rgba(64, 182, 255, 0.30); --radar-stage-gradient-center: rgba(64, 182, 255, 0.10); --radar-stage-gradient-mid: rgba(64, 182, 255, 0.035); --radar-stage-gradient-edge-soft: rgba(237, 246, 252, 0.22); --radar-stage-gradient-edge: rgba(237, 246, 252, 0.64); --shadow-radar-stage: inset 0 0 45px rgba(64, 182, 255, 0.035), 0 14px 40px rgba(22, 68, 103, 0.09); --accent-radar-axis: rgba(18, 148, 230, 0.14); --accent-radar-ring: rgba(18, 148, 230, 0.24); --surface-radar-ring-label: rgba(249, 252, 255, 0.90); --shadow-radar-label: 0 1px 2px rgba(255, 255, 255, 0.96), 0 0 7px rgba(255, 255, 255, 0.72); --shadow-radar-label-hover: 0 1px 2px rgba(255, 255, 255, 0.98), 0 0 10px rgba(64, 182, 255, 0.52), 0 0 18px rgba(64, 182, 255, 0.20); --surface-radar-zoom-control: rgba(249, 252, 255, 0.96); --surface-radar-save-dialog: rgba(249, 252, 255, 0.99); --shadow-radar-save-dialog: 0 24px 70px rgba(7, 17, 31, 0.20); --border-radar-result-divider: rgba(7, 17, 31, 0.08); /* Same visual hierarchy in light mode, with less whole-element washout. */ --opacity-composer-cancel: 0.94; --opacity-site-title: 1; --opacity-footer-icon: 0.98; --opacity-footer-label: 0.96; --opacity-readonly-control: 0.97; --opacity-posts-muted: 0.86; --opacity-post-icon: 0.96; --opacity-add-post-icon: 1; --opacity-browse-hint: 0.72; --opacity-like-count: 0.98; --opacity-browse-card-icon: 1; --opacity-browse-like-icon: 0.97; --opacity-follow-tab-inactive: 0.90; --opacity-follow-search-hint: 0.84; --opacity-browse-meaning: 0.86; --opacity-follow-tab-meta: 0.74; --opacity-company-type-option-icon: 0.98; --opacity-browse-type-badge-icon: 0.98; --opacity-company-type-badge-icon: 0.97; --opacity-filter-chip-icon: 0.98; --opacity-filter-active-mark: 0.97; --opacity-now-secondary: 0.72; --opacity-now-hint: 0.82; --opacity-radar-note: 0.90; --opacity-radar-status: 0.85; --opacity-radar-status-hint: 0.78; --opacity-user-search-supporting: 0.86; } /* ========================================================== SIMINEO LIGHT V6 – GLASS AUTH SHELL ========================================================== */ /* ===== LIGHT AUTH GLASS TOKENS START ===== */ html[data-theme="light"] { /* Header + every authenticated LIGHT post card */ --auth-glass-surface: linear-gradient( 180deg, rgba(248, 253, 255, 0.28), rgba(226, 246, 250, 0.22) ); --auth-glass-border: rgba(0, 174, 186, 0.24); --auth-glass-shadow: 0 6px 24px rgba(10, 91, 104, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.20); --auth-glass-filter: blur(12px) saturate(125%); --auth-glass-hover-border: rgba(0, 174, 186, 0.42); --auth-glass-hover-shadow: 0 7px 26px rgba(10, 91, 104, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.24); /* Company Post Normal / Grid controls. Exact accepted LIGHT Aurora values. */ --post-view-control-surface: linear-gradient( 180deg, rgba(190, 226, 232, 0.76), rgba(153, 204, 213, 0.68) ); --post-view-control-border: rgba(0, 128, 145, 0.58); --post-view-control-text: #0b3038; --post-view-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 4px 13px rgba(11, 68, 80, 0.09); --post-view-control-filter: blur(10px) saturate(120%); --post-view-control-active-surface: linear-gradient( 180deg, rgba(42, 211, 205, 0.64), rgba(0, 159, 172, 0.42) ); --post-view-control-active-border: rgba(244, 112, 32, 0.90); --post-view-control-active-text: #07343b; --post-view-control-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 0 0 1px rgba(255, 131, 56, 0.16), 0 0 8px rgba(255, 131, 56, 0.34), 0 0 15px rgba(0, 174, 186, 0.14); --post-view-control-hover-surface: linear-gradient( 180deg, rgba(171, 219, 226, 0.86), rgba(128, 190, 201, 0.78) ); --post-view-control-hover-border: rgba(0, 145, 160, 0.78); /* Post flip switch — LIGHT canonical appearance. Track follows the authenticated light Post card. Outline + thumb follow Normal / Grid text. */ --post-flip-toggle-track-surface: var(--auth-glass-surface); --post-flip-toggle-track-border: var(--accent-decoration); --post-flip-toggle-track-shadow: none; --post-flip-toggle-thumb-surface: var(--accent-decoration); --post-flip-toggle-thumb-shadow: none; /* Shared selected choice language: Type / Mood / period */ --auth-choice-selected-surface: linear-gradient( 180deg, rgba(48, 226, 218, 0.62), rgba(0, 174, 186, 0.34) ); --auth-choice-selected-border: rgba(244, 112, 32, 0.90); --auth-choice-selected-text: #07343b; /* NOW / MOST */ --auth-now-surface: linear-gradient( 135deg, rgba(39, 221, 214, 0.54), rgba(0, 174, 186, 0.38) ); --auth-now-border: rgba(0, 128, 145, 0.62); --auth-now-text: #07373e; --auth-now-shadow: inset 0 1px 0 rgba(255,255,255,0.36), 0 0 8px rgba(0,174,186,0.16); } /* ===== LIGHT AUTH GLASS TOKENS END ===== */ html[data-theme="light"] .profile-header { background: var(--auth-glass-surface); border-bottom: 1px solid var(--auth-glass-border); box-shadow: var(--auth-glass-shadow); -webkit-backdrop-filter: var(--auth-glass-filter); backdrop-filter: var(--auth-glass-filter); } html[data-theme="light"] .profile-footer { background: linear-gradient( 180deg, rgba(248, 253, 255, 0.16), rgba(220, 243, 247, 0.20) ); border-top: 1px solid rgba(0, 174, 186, 0.26); box-shadow: 0 -8px 24px rgba(10, 91, 104, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); } html[data-theme="light"] .profile-footer .footer-btn { background: transparent; } html[data-theme="light"] .profile-footer .footer-btn.active { background: linear-gradient( 180deg, rgba(64, 182, 255, 0.14), rgba(18, 148, 230, 0.08) ); box-shadow: inset 0 0 0 1px rgba(64, 182, 255, 0.18), 0 6px 18px rgba(64, 182, 255, 0.08); } html[data-theme="light"] .profile-footer .footer-label { color: rgba(7, 17, 31, 0.72); } html[data-theme="light"] .profile-footer .footer-btn.active .footer-label { color: #07111f; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--color-text-main); letter-spacing: 0.2px; } a { color: inherit; text-underline-offset: 3px; } /* === SIMINEO BACKGROUND AUTHORITY START === */ /* * One background authority for the whole application. * * Public/guest surfaces use the dark Aurora environment. * Authenticated surfaces declare data-auth-surface on . * theme-bootstrap resolves data-theme before the render-blocking * stylesheets are parsed, so the correct authenticated background * is known for the first paint. * * The html canvas and the fixed body::before artwork consume the * same authenticated theme variables. There is therefore no dark * intermediary canvas during LIGHT document navigation. */ /* Public / guest default */ html { background: #07171b; } body { background: transparent !important; position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #07171b url("/images/backgrounds/simineo_texture_bg_out_v3.webp") center center / cover no-repeat; } /* Authenticated DARK default */ html[data-auth-surface] { --auth-page-bg-color: #07171b; --auth-page-bg-image: url("/images/backgrounds/simineo_texture_bg_v2.webp"); background: var(--auth-page-bg-color) var(--auth-page-bg-image) center center / cover no-repeat; } /* Authenticated LIGHT */ html[data-auth-surface][data-theme="light"] { --auth-page-bg-color: #eef9fb; --auth-page-bg-image: url("/images/backgrounds/simineo_texture_light_bg_v2.webp"); } /* * Keep the existing fixed viewport artwork, but source it from * the same authoritative variables as the html canvas. */ html[data-auth-surface] body::before { background: var(--auth-page-bg-color) var(--auth-page-bg-image) center center / cover no-repeat; } /* === SIMINEO BACKGROUND AUTHORITY END === */ /* === Hide native page scrollbar, keep scrolling enabled === */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* === Atomic public shell boot === Keep public pages visually stable until i18n and shared partials are ready. CSS provides an independent fail-open if the boot script cannot run. */ @keyframes public-shell-fail-open { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } } html[data-public-shell="booting"] body > #header, html[data-public-shell="booting"] body > .main-container, html[data-public-shell="booting"] body > #footer { visibility: hidden; opacity: 0; animation: public-shell-fail-open 0s linear 3s forwards; } html[data-public-shell="ready"] body > #header, html[data-public-shell="ready"] body > .main-container, html[data-public-shell="ready"] body > #footer { visibility: visible; opacity: 1; } /* === Authenticated i18n first-paint guard === */ /* * Keep the static authenticated shell paintable immediately. * Only untranslated fallback text is visually suppressed until * the selected dictionary has been applied. */ html[data-i18n-boot="pending"] main [data-i18n], html[data-i18n-boot="pending"]:not([data-auth-shell-localized="true"]) #header [data-i18n], html[data-i18n-boot="pending"]:not([data-auth-shell-localized="true"]) #footer [data-i18n] { color: transparent !important; text-shadow: none !important; } html[data-i18n-boot="pending"] [data-i18n-placeholder]::placeholder { color: transparent !important; } /* === Authenticated i18n first-paint guard end === */ /* === Authenticated static shell lifecycle === */ /* * The authenticated document is always paintable. * Auth/gate/data state may affect content, never BODY visibility. */ #footer.auth-static-footer [data-footer-shell][hidden] { display: none !important; } /* * A previously verified shell may be painted immediately on * same-session document navigation. The authoritative viewer * will confirm or correct it during normal boot. */ html[data-auth-shell-hint="company"] #footer.auth-static-footer [data-footer-shell="company"][hidden], html[data-auth-shell-hint="private"] #footer.auth-static-footer [data-footer-shell="private"][hidden] { display: block !important; } /* === Atomic shared public-entry boot === Shared company and public-post pages stay visually stable until their viewer context, optional authenticated shell and critical public data have reached one final first-render state. */ @keyframes public-entry-fail-open { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } } html[data-public-entry-boot="locked"] body { visibility: hidden; opacity: 0; animation: public-entry-fail-open 0s linear 3s forwards; } html[data-public-entry-boot-state="ready"] body, html[data-public-entry-boot-state="failed"] body { visibility: visible; opacity: 1; } /* === PWA STARTUP GATE V20 === */ html[data-pwa-runtime="standalone"]:not([data-auth-surface]) { background: #07171b; } .pwa-startup-overlay { display: none; } html[data-pwa-runtime="standalone"][data-pwa-entry-state="booting"] { color-scheme: dark; } html[data-pwa-runtime="standalone"][data-pwa-entry-state="booting"] body.login-page { overflow: hidden; } html[data-pwa-runtime="standalone"][data-pwa-entry-state="booting"] body.login-page > :not(#pwaStartup) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html[data-pwa-runtime="standalone"][data-pwa-entry-state="booting"] #pwaStartup { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #07171b url("/images/backgrounds/simineo_texture_bg_v2.webp") center center / cover no-repeat; color: rgba(242, 251, 251, 0.96); text-align: center; } .pwa-startup-overlay__content { display: flex; flex-direction: column; align-items: center; width: min(100%, 320px); } .pwa-startup-overlay__logo { display: block; width: 120px; height: 120px; object-fit: contain; } .pwa-startup-overlay__loader { width: 24px; height: 24px; margin-top: 26px; box-sizing: border-box; border: 2px solid rgba(39, 221, 214, 0.20); border-top-color: #27ddd6; border-radius: 50%; animation: simineo-pwa-startup-spin 0.75s linear infinite; } .pwa-startup-overlay__text { min-height: 20px; margin: 13px 0 0; color: rgba(226, 244, 245, 0.80); font-size: 13px; line-height: 1.45; } @keyframes simineo-pwa-startup-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pwa-startup-overlay__loader { animation-duration: 1.5s; } } /* * Standalone launch must not use the normal * cross-document slide transition. The user * sees one stable boot surface and then the * completed destination document. */ @media (display-mode: standalone) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transform: none !important; } } /* === PWA STARTUP GATE V20 END === */ /* Manual cold-start retry; never auto-reloads the PWA. */ .pwa-startup-overlay__retry { margin-top: 16px; min-height: 40px; padding: 9px 16px; border: 1px solid rgba(39, 221, 214, 0.42); border-radius: 10px; background: rgba(7, 23, 27, 0.72); color: rgba(242, 251, 251, 0.96); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; } .pwa-startup-overlay__retry[hidden] { display: none !important; } /* === Authenticated navigation feedback === */ /* * Purely visual feedback for native document navigation. * Does not delay, intercept or retry navigation. */ html[data-navigation-pending="true"] body::before { content: ""; position: fixed; top: 0; left: 0; width: 42%; height: 3px; z-index: 10000; pointer-events: none; background: var(--color-text-main); opacity: 0.9; transform-origin: left center; animation: simineo-navigation-pending 0.9s ease-in-out infinite; } .profile-footer .footer-btn.is-navigation-pending img { animation: simineo-footer-navigation-pending 0.65s ease-in-out infinite alternate; } @keyframes simineo-navigation-pending { 0% { transform: translateX(-105%) scaleX(0.55); } 55% { transform: translateX(115%) scaleX(1); } 100% { transform: translateX(245%) scaleX(0.55); } } @keyframes simineo-footer-navigation-pending { from { opacity: 0.48; } to { opacity: 1; } } /* === Authenticated navigation feedback end === */ /* === PWA notification first-paint layout === */ /* * The notification card ships with the HTML `hidden` attribute * because it must not appear on unsupported/browser surfaces. * * theme-bootstrap determines PWA push capability before CSS paint. * In a supported installed PWA, reserve/render the card immediately * so pwa-push.js only updates its state instead of inserting the * entire block later and causing layout shift. */ html[data-pwa-push-ui="available"] #pwaNotificationSection[hidden] { display: block !important; } /* === PWA notification first-paint layout end === */ /* ============================================================ Authenticated standalone PWA — pull to refresh ============================================================ */ .auth-pull-refresh { --pull-refresh-offset: 0px; --pull-refresh-progress: 0; position: fixed; z-index: 10000; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix( in srgb, currentColor 34%, transparent ); border-radius: 999px; color: var( --accent-decoration, currentColor ); background: color-mix( in srgb, currentColor 10%, transparent ); box-shadow: 0 6px 20px color-mix( in srgb, currentColor 16%, transparent ); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transform: translate3d( -50%, calc( -48px + var(--pull-refresh-offset) ), 0 ); transition: opacity 100ms ease, transform 80ms linear; will-change: transform, opacity; } html[data-theme="light"] .auth-pull-refresh { color: var(--text-overlay-control); } .auth-pull-refresh.is-active { opacity: 1; } .auth-pull-refresh.is-ready { border-color: currentColor; } .auth-pull-refresh__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transform: rotate( calc( var(--pull-refresh-progress) * 180deg ) ); transform-origin: center; } .auth-pull-refresh.is-refreshing .auth-pull-refresh__icon { animation: auth-pull-refresh-spin 700ms linear infinite; } @keyframes auth-pull-refresh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .auth-pull-refresh { transition: none; } .auth-pull-refresh.is-refreshing .auth-pull-refresh__icon { animation: none; } }