/** * File: assets/css/theme.css * Version: 3.0.0 * Description: Shared public-page theme engine. Theme presets are routed from assets/css/theme/*.css; this file contains only common tokens, typography, rendering, admin, responsive and accessibility rules. */ /* CI_PAGE_THEME_GLOBAL_TRANSPARENCY_V2 Main Bio surface: 82% transparent for steadier text contrast over image themes. Embedded chat shell remains 70% transparent; form controls use validated link surfaces. Content opacity is never changed. */ /* CI_PAGE_THEME_SELF_HOSTED_FONTS_V1 Production-local Fontsource 5.3.0 assets. Latin, Latin Extended, Cyrillic and Cyrillic Extended are included so English, Polish and Ukrainian render with the same typography on Android, iOS, Windows, macOS and Linux. */ @font-face { font-family: "CI Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "CI Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/page-theme-v1/manrope-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/page-theme-v1/manrope-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/page-theme-v1/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/page-theme-v1/manrope-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "CI Source Serif"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI Source Serif"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI Source Serif"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI Source Serif"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "CI Source Serif"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-cyrillic-ext-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI Source Serif"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-cyrillic-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI Source Serif"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-latin-ext-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI Source Serif"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/page-theme-v1/source-serif-4-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "CI Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-tight-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-tight-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI Inter Tight"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/page-theme-v1/inter-tight-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "CI JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/fonts/page-theme-v1/jetbrains-mono-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face { font-family: "CI JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/fonts/page-theme-v1/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "CI JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/fonts/page-theme-v1/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "CI JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/assets/fonts/page-theme-v1/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* END CI_PAGE_THEME_SELF_HOSTED_FONTS_V1 */ /* -------------------------------------------------------------------------- Theme token contract -------------------------------------------------------------------------- */ [data-page-theme] { --bio-theme-font-family: "CI Inter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bio-theme-heading-font-family: "CI Inter", Inter, ui-sans-serif, system-ui, sans-serif; --bio-theme-heading-font-style: normal; --bio-theme-heading-font-weight: 800; --bio-theme-heading-letter-spacing: -0.025em; --bio-theme-heading-text-transform: none; --bio-theme-page-background: radial-gradient(circle at 15% 8%, rgba(243, 199, 164, 0.55), transparent 28rem), radial-gradient(circle at 90% 15%, rgba(223, 238, 232, 0.95), transparent 26rem), linear-gradient(135deg, #f7f3ea, #eee6d5); --bio-theme-page-pattern: linear-gradient(rgba(23, 20, 17, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 20, 17, 0.035) 1px, transparent 1px); --bio-theme-page-pattern-size: 38px 38px; --bio-theme-page-pattern-opacity: 1; --bio-theme-text: #171411; --bio-theme-muted: #756f65; --bio-theme-accent: #174f3f; --bio-theme-accent-2: #226a55; --bio-theme-accent-soft: #dfeee8; --bio-theme-danger: #a33a2e; --bio-theme-surface-background: rgba(255, 255, 255, 0.18); --bio-theme-surface-border: rgba(255, 255, 255, 0.76); --bio-theme-surface-shadow: 0 10px 30px rgba(52, 39, 21, 0.065); --bio-theme-surface-backdrop: none; --bio-theme-cover-background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.34), transparent 24%), linear-gradient(135deg, #f3c7a4 0%, #dfeee8 54%, #f7f3ea 100%); --bio-theme-cover-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(23, 20, 17, 0.08)); --bio-theme-avatar-background: linear-gradient(135deg, #174f3f, #d9a441); --bio-theme-avatar-color: #ffffff; --bio-theme-avatar-border: rgba(255, 255, 255, 0.94); --bio-theme-avatar-shadow: 0 10px 28px rgba(23, 79, 63, 0.16); --bio-theme-link-background: rgba(255, 255, 255, 0.96); --bio-theme-link-hover-background: #ffffff; --bio-theme-link-border: rgba(31, 24, 17, 0.10); --bio-theme-link-hover-border: rgba(23, 79, 63, 0.20); --bio-theme-link-text: #171411; --bio-theme-link-muted: var(--bio-theme-muted); --bio-theme-link-icon-background: rgba(223, 238, 232, 0.88); --bio-theme-link-icon-text: #174f3f; --bio-theme-link-arrow: #174f3f; --bio-theme-link-shadow: 0 7px 20px rgba(52, 39, 21, 0.052); --bio-theme-link-hover-shadow: 0 13px 30px rgba(52, 39, 21, 0.11); --bio-theme-link-radius: 22px; --bio-theme-social-background: rgba(255, 255, 255, 0.90); --bio-theme-social-hover-background: rgba(255, 255, 255, 0.98); --bio-theme-social-border: rgba(31, 24, 17, 0.10); --bio-theme-social-text: #174f3f; --bio-theme-social-hover-text: var(--bio-theme-social-text); --bio-theme-social-shadow: 0 10px 24px rgba(52, 39, 21, 0.08), 0 1px 0 rgba(255, 255, 255, 0.90) inset; --bio-theme-contact-background: rgba(255, 255, 255, 0.88); --bio-theme-contact-border: rgba(31, 24, 17, 0.10); --bio-theme-contact-text: #174f3f; --bio-theme-contact-shadow: 0 8px 22px rgba(52, 39, 21, 0.06); --bio-theme-action-text: #174f3f; --bio-theme-action-background: transparent; --bio-theme-action-hover: #226a55; --bio-theme-chat-background: rgba(255, 255, 255, 0.30); --bio-theme-chat-border: rgba(31, 24, 17, 0.12); --bio-theme-chat-shadow: 0 10px 30px rgba(52, 39, 21, 0.065); --bio-theme-chat-messages-background: rgba(251, 248, 241, 0.30); --bio-theme-chat-input-background: rgba(251, 248, 241, 0.30); --bio-theme-input-text: var(--bio-theme-text); --bio-theme-chat-input-focus-background: rgba(255, 255, 255, 0.30); --bio-theme-chat-input-border: rgba(31, 24, 17, 0.12); --bio-theme-chat-placeholder: #756f65; --bio-theme-chat-visitor-background: #ffffff; --bio-theme-chat-visitor-text: #171411; --bio-theme-chat-visitor-border: rgba(31, 24, 17, 0.10); --bio-theme-chat-owner-background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 26%), linear-gradient(135deg, #174f3f, #226a55); --bio-theme-chat-owner-text: #ffffff; --bio-theme-chat-owner-border: rgba(23, 79, 63, 0.10); --bio-theme-send-background: radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.24), transparent 26%), linear-gradient(135deg, #174f3f, #226a55); --bio-theme-send-text: #ffffff; --bio-theme-send-shadow: 0 10px 22px rgba(23, 79, 63, 0.20); --bio-theme-footer-background: rgba(255, 255, 255, 0.88); --bio-theme-footer-text: #174f3f; --bio-theme-footer-border: rgba(31, 24, 17, 0.10); --bio-theme-footer-shadow: 0 14px 34px rgba(52, 39, 21, 0.12), 0 1px 0 rgba(255, 255, 255, 0.92) inset; --bio-theme-mobile-footer-fade: linear-gradient( 180deg, rgba(7, 15, 18, 0) 0%, rgba(7, 15, 18, 0.08) 28%, rgba(7, 15, 18, 0.42) 68%, rgba(7, 15, 18, 0.76) 100% ); --bio-theme-focus-ring: rgba(23, 79, 63, 0.28); --bio-theme-focus-contrast: #ffffff; /* Semantic readable colors preserve each theme hue instead of forcing pure black/white. */ --bio-theme-readable-muted: var(--bio-theme-muted); --bio-theme-readable-action: var(--bio-theme-action-text); --bio-theme-readable-action-hover: var(--bio-theme-action-hover); --bio-theme-readable-link-icon-text: var(--bio-theme-link-icon-text); --bio-theme-readable-social-text: var(--bio-theme-social-text); --bio-theme-readable-contact-text: var(--bio-theme-contact-text); --bio-theme-readable-footer-text: var(--bio-theme-footer-text); /* Dedicated claim-modal contract. */ --bio-theme-modal-background: linear-gradient(var(--bio-theme-footer-background), var(--bio-theme-footer-background)), var(--bio-theme-link-background); --bio-theme-modal-border: var(--bio-theme-footer-border); --bio-theme-modal-shadow: 0 28px 84px rgba(0, 0, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.10) inset; --bio-theme-modal-title: var(--bio-theme-text); --bio-theme-modal-muted: var(--bio-theme-readable-muted); --bio-theme-modal-accent: var(--bio-theme-readable-action); --bio-theme-modal-backdrop: rgba(7, 9, 12, 0.46); --bio-theme-modal-backdrop-filter: blur(5px) saturate(0.90); --bio-theme-modal-close-color: var(--bio-theme-readable-social-text); --bio-theme-modal-close-background: var(--bio-theme-social-background); --bio-theme-modal-close-border: var(--bio-theme-social-border); --bio-theme-modal-close-shadow: var(--bio-theme-contact-shadow); /* Bridge the current Bio/Public CSS variables without affecting dashboard UI. */ --text: var(--bio-theme-text); --muted: var(--bio-theme-readable-muted); --primary: var(--bio-theme-accent); --primary-2: var(--bio-theme-accent-2); --primary-soft: var(--bio-theme-accent-soft); --danger: var(--bio-theme-danger); --surface-solid: var(--bio-theme-chat-background); --surface-soft: var(--bio-theme-chat-messages-background); --line: var(--bio-theme-chat-border); } @supports (color: color-mix(in srgb, #000 50%, #fff 50%)) { [data-page-theme] { --bio-theme-readable-muted: color-mix(in srgb, var(--bio-theme-muted) 82%, var(--bio-theme-text) 18%); --bio-theme-readable-action: color-mix(in srgb, var(--bio-theme-action-text) 86%, var(--bio-theme-text) 14%); --bio-theme-readable-action-hover: color-mix(in srgb, var(--bio-theme-action-hover) 68%, var(--bio-theme-text) 32%); --bio-theme-readable-link-icon-text: color-mix(in srgb, var(--bio-theme-link-icon-text) 75%, var(--bio-theme-link-text) 25%); --bio-theme-readable-social-text: color-mix(in srgb, var(--bio-theme-social-text) 82%, var(--bio-theme-link-text) 18%); --bio-theme-readable-contact-text: color-mix(in srgb, var(--bio-theme-contact-text) 82%, var(--bio-theme-link-text) 18%); --bio-theme-readable-footer-text: color-mix(in srgb, var(--bio-theme-footer-text) 82%, var(--bio-theme-text) 18%); } } /* -------------------------------------------------------------------------- Theme preset routing -------------------------------------------------------------------------- Theme-specific declarations live in assets/css/theme/.css. Public pages load only the selected preset; admin previews load the generated assets/css/theme-admin-presets.css bundle. */ /* -------------------------------------------------------------------------- Public Bio Page and admin public-page preview application -------------------------------------------------------------------------- */ .public-shell-bio[data-page-theme], .bio-preview-public-copy[data-page-theme], .bio-preview-public-copy [data-page-theme] { position: relative; isolation: isolate; color: var(--bio-theme-text) !important; font-family: var(--bio-theme-font-family) !important; font-optical-sizing: auto; font-synthesis: none; } .public-shell-bio[data-page-theme] .bio-public-name, .public-shell-bio[data-page-theme] .bio-public-headline, .public-shell-bio [data-page-theme] .bio-public-name, .public-shell-bio [data-page-theme] .bio-public-headline, .bio-preview-public-copy[data-page-theme] .bio-public-name, .bio-preview-public-copy[data-page-theme] .bio-public-headline, .bio-preview-public-copy [data-page-theme] .bio-public-name, .bio-preview-public-copy [data-page-theme] .bio-public-headline { font-family: var(--bio-theme-heading-font-family) !important; font-style: var(--bio-theme-heading-font-style) !important; font-weight: var(--bio-theme-heading-font-weight) !important; letter-spacing: var(--bio-theme-heading-letter-spacing) !important; text-transform: var(--bio-theme-heading-text-transform) !important; } .public-shell-bio[data-page-theme] { background: var(--bio-theme-page-background) !important; background-attachment: fixed !important; } .public-shell-bio[data-page-theme]::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; background-image: var(--bio-theme-page-pattern); background-size: var(--bio-theme-page-pattern-size); opacity: var(--bio-theme-page-pattern-opacity); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.72) 68%, transparent 100%); } .public-shell-bio[data-page-theme] .bio-public-card, .public-shell-bio [data-page-theme] .bio-public-card, .bio-preview-public-copy[data-page-theme] .bio-public-card, .bio-preview-public-copy [data-page-theme] .bio-public-card { color: var(--bio-theme-text) !important; background: var(--bio-theme-surface-background) !important; border-color: var(--bio-theme-surface-border) !important; box-shadow: var(--bio-theme-surface-shadow) !important; backdrop-filter: var(--bio-theme-surface-backdrop) !important; -webkit-backdrop-filter: var(--bio-theme-surface-backdrop) !important; transition: color 180ms ease, background 240ms ease, border-color 180ms ease, box-shadow 240ms ease !important; } .public-shell-bio[data-page-theme] .bio-public-cover, .public-shell-bio [data-page-theme] .bio-public-cover, .bio-preview-public-copy[data-page-theme] .bio-public-cover, .bio-preview-public-copy [data-page-theme] .bio-public-cover { background: var(--bio-theme-cover-background) !important; } .public-shell-bio[data-page-theme] .bio-public-cover::after, .public-shell-bio [data-page-theme] .bio-public-cover::after, .bio-preview-public-copy[data-page-theme] .bio-public-cover::after, .bio-preview-public-copy [data-page-theme] .bio-public-cover::after { position: absolute; inset: 0; z-index: 3; pointer-events: none; content: ""; background: var(--bio-theme-cover-overlay) !important; } .public-shell-bio[data-page-theme] .bio-public-avatar, .public-shell-bio [data-page-theme] .bio-public-avatar, .bio-preview-public-copy[data-page-theme] .bio-public-avatar, .bio-preview-public-copy [data-page-theme] .bio-public-avatar { color: var(--bio-theme-avatar-color) !important; background: var(--bio-theme-avatar-background) !important; border-color: var(--bio-theme-avatar-border) !important; box-shadow: var(--bio-theme-avatar-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-name, .public-shell-bio[data-page-theme] .bio-public-headline, .public-shell-bio [data-page-theme] .bio-public-name, .public-shell-bio [data-page-theme] .bio-public-headline, .bio-preview-public-copy[data-page-theme] .bio-public-name, .bio-preview-public-copy[data-page-theme] .bio-public-headline, .bio-preview-public-copy [data-page-theme] .bio-public-name, .bio-preview-public-copy [data-page-theme] .bio-public-headline { color: var(--bio-theme-text) !important; } .public-shell-bio[data-page-theme] .bio-public-text, .public-shell-bio [data-page-theme] .bio-public-text, .bio-preview-public-copy[data-page-theme] .bio-public-text, .bio-preview-public-copy [data-page-theme] .bio-public-text { color: var(--bio-theme-readable-muted) !important; } .public-shell-bio[data-page-theme] .bio-public-action-button, .public-shell-bio [data-page-theme] .bio-public-action-button, .bio-preview-public-copy[data-page-theme] .bio-public-action-button, .bio-preview-public-copy [data-page-theme] .bio-public-action-button { color: var(--bio-theme-readable-action) !important; background: var(--bio-theme-action-background) !important; } .public-shell-bio[data-page-theme] .bio-public-action-button:hover, .public-shell-bio [data-page-theme] .bio-public-action-button:hover, .bio-preview-public-copy[data-page-theme] .bio-public-action-button:hover, .bio-preview-public-copy [data-page-theme] .bio-public-action-button:hover { color: var(--bio-theme-readable-action-hover) !important; } .public-shell-bio[data-page-theme] .bio-public-link, .public-shell-bio [data-page-theme] .bio-public-link, .bio-preview-public-copy[data-page-theme] .bio-public-link, .bio-preview-public-copy [data-page-theme] .bio-public-link { color: var(--bio-theme-link-text) !important; background: var(--bio-theme-link-background) !important; border-color: var(--bio-theme-link-border) !important; border-radius: var(--bio-theme-link-radius) !important; clip-path: var(--bio-theme-link-clip-path) !important; box-shadow: var(--bio-theme-link-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-link:hover, .public-shell-bio [data-page-theme] .bio-public-link:hover, .bio-preview-public-copy[data-page-theme] .bio-public-link:hover, .bio-preview-public-copy [data-page-theme] .bio-public-link:hover { background: var(--bio-theme-link-hover-background) !important; border-color: var(--bio-theme-link-hover-border) !important; box-shadow: var(--bio-theme-link-hover-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-link-label, .public-shell-bio [data-page-theme] .bio-public-link-label, .bio-preview-public-copy[data-page-theme] .bio-public-link-label, .bio-preview-public-copy [data-page-theme] .bio-public-link-label { color: var(--bio-theme-link-text) !important; } .public-shell-bio[data-page-theme] .bio-public-link-icon, .public-shell-bio [data-page-theme] .bio-public-link-icon, .bio-preview-public-copy[data-page-theme] .bio-public-link-icon, .bio-preview-public-copy [data-page-theme] .bio-public-link-icon { color: var(--bio-theme-readable-link-icon-text) !important; background: var(--bio-theme-link-icon-background) !important; border-color: var(--bio-theme-link-border) !important; border-radius: var(--bio-theme-icon-radius) !important; } .public-shell-bio[data-page-theme] .bio-public-link-arrow, .public-shell-bio [data-page-theme] .bio-public-link-arrow, .bio-preview-public-copy[data-page-theme] .bio-public-link-arrow, .bio-preview-public-copy [data-page-theme] .bio-public-link-arrow { color: var(--bio-theme-link-arrow) !important; } .public-shell-bio[data-page-theme] .bio-public-social-link, .public-shell-bio [data-page-theme] .bio-public-social-link, .bio-preview-public-copy[data-page-theme] .bio-public-social-link, .bio-preview-public-copy [data-page-theme] .bio-public-social-link { color: var(--bio-theme-readable-social-text) !important; background: var(--bio-theme-social-background) !important; border-color: var(--bio-theme-social-border) !important; border-radius: var(--bio-theme-social-radius) !important; clip-path: var(--bio-theme-social-clip-path) !important; box-shadow: var(--bio-theme-social-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-social-link:hover, .public-shell-bio [data-page-theme] .bio-public-social-link:hover, .bio-preview-public-copy[data-page-theme] .bio-public-social-link:hover, .bio-preview-public-copy [data-page-theme] .bio-public-social-link:hover { color: var(--bio-theme-readable-social-text) !important; background: var(--bio-theme-social-hover-background) !important; border-color: var(--bio-theme-link-hover-border) !important; } .public-shell-bio[data-page-theme] .bio-public-social-link .bio-public-link-icon, .public-shell-bio [data-page-theme] .bio-public-social-link .bio-public-link-icon, .bio-preview-public-copy[data-page-theme] .bio-public-social-link .bio-public-link-icon, .bio-preview-public-copy [data-page-theme] .bio-public-social-link .bio-public-link-icon { color: currentColor !important; background: transparent !important; border: 0 !important; } .public-shell-bio[data-page-theme] .bio-public-contact-link, .public-shell-bio [data-page-theme] .bio-public-contact-link, .bio-preview-public-copy[data-page-theme] .bio-public-contact-link, .bio-preview-public-copy [data-page-theme] .bio-public-contact-link { color: var(--bio-theme-readable-contact-text) !important; background: var(--bio-theme-contact-background) !important; border-color: var(--bio-theme-contact-border) !important; border-radius: var(--bio-theme-contact-radius) !important; box-shadow: var(--bio-theme-contact-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-join-text, .public-shell-bio [data-page-theme] .bio-public-join-text, .bio-preview-public-copy[data-page-theme] .bio-public-join-text, .bio-preview-public-copy [data-page-theme] .bio-public-join-text { color: var(--bio-theme-readable-footer-text) !important; background: var(--bio-theme-footer-background) !important; border-color: var(--bio-theme-footer-border) !important; box-shadow: var(--bio-theme-footer-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-join-text:hover, .public-shell-bio [data-page-theme] .bio-public-join-text:hover, .bio-preview-public-copy[data-page-theme] .bio-public-join-text:hover, .bio-preview-public-copy [data-page-theme] .bio-public-join-text:hover { background: var(--bio-theme-link-hover-background) !important; box-shadow: var(--bio-theme-link-hover-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-action-button:focus-visible, .public-shell-bio[data-page-theme] .bio-public-link:focus-visible, .public-shell-bio[data-page-theme] .bio-public-social-link:focus-visible, .public-shell-bio[data-page-theme] .bio-public-contact-link:focus-visible, .public-shell-bio[data-page-theme] .bio-public-join-pill:focus-visible, .public-shell-bio[data-page-theme] .bio-public-join-text:focus-visible, .public-shell-bio [data-page-theme] .bio-public-action-button:focus-visible, .public-shell-bio [data-page-theme] .bio-public-link:focus-visible, .public-shell-bio [data-page-theme] .bio-public-social-link:focus-visible, .public-shell-bio [data-page-theme] .bio-public-contact-link:focus-visible, .bio-preview-public-copy[data-page-theme] .bio-public-action-button:focus-visible, .bio-preview-public-copy[data-page-theme] .bio-public-link:focus-visible, .bio-preview-public-copy[data-page-theme] .bio-public-social-link:focus-visible, .bio-preview-public-copy[data-page-theme] .bio-public-contact-link:focus-visible { outline-color: var(--bio-theme-focus-ring) !important; } /* Public Bio embedded chat */ .public-shell-bio[data-page-theme] .public-chat-bio, .public-shell-bio [data-page-theme] .public-chat-bio, .bio-preview-public-copy[data-page-theme] .public-chat-bio, .bio-preview-public-copy [data-page-theme] .public-chat-bio { color: var(--bio-theme-text) !important; background: var(--bio-theme-chat-background) !important; border-color: var(--bio-theme-chat-border) !important; border-radius: var(--bio-theme-chat-radius) !important; box-shadow: var(--bio-theme-chat-shadow) !important; backdrop-filter: var(--bio-theme-surface-backdrop) !important; -webkit-backdrop-filter: var(--bio-theme-surface-backdrop) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .messages, .public-shell-bio [data-page-theme] .public-chat-bio .messages, .bio-preview-public-copy[data-page-theme] .public-chat-bio .messages, .bio-preview-public-copy [data-page-theme] .public-chat-bio .messages { color: var(--bio-theme-text) !important; background: var(--bio-theme-chat-messages-background) !important; border-color: var(--bio-theme-chat-input-border) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .empty-state, .public-shell-bio [data-page-theme] .public-chat-bio .empty-state, .bio-preview-public-copy[data-page-theme] .public-chat-bio .empty-state, .bio-preview-public-copy [data-page-theme] .public-chat-bio .empty-state { color: var(--bio-theme-readable-muted) !important; } .public-shell-bio[data-page-theme] .public-chat-bio input, .public-shell-bio[data-page-theme] .public-chat-bio textarea, .public-shell-bio [data-page-theme] .public-chat-bio input, .public-shell-bio [data-page-theme] .public-chat-bio textarea, .bio-preview-public-copy[data-page-theme] .public-chat-bio input, .bio-preview-public-copy[data-page-theme] .public-chat-bio textarea, .bio-preview-public-copy [data-page-theme] .public-chat-bio input, .bio-preview-public-copy [data-page-theme] .public-chat-bio textarea { color: var(--bio-theme-input-text) !important; background: var(--bio-theme-chat-input-background) !important; border-color: var(--bio-theme-chat-input-border) !important; } .public-shell-bio[data-page-theme] .public-chat-bio input::placeholder, .public-shell-bio[data-page-theme] .public-chat-bio textarea::placeholder, .public-shell-bio [data-page-theme] .public-chat-bio input::placeholder, .public-shell-bio [data-page-theme] .public-chat-bio textarea::placeholder, .bio-preview-public-copy[data-page-theme] .public-chat-bio input::placeholder, .bio-preview-public-copy[data-page-theme] .public-chat-bio textarea::placeholder, .bio-preview-public-copy [data-page-theme] .public-chat-bio input::placeholder, .bio-preview-public-copy [data-page-theme] .public-chat-bio textarea::placeholder { color: var(--bio-theme-chat-placeholder) !important; opacity: 1 !important; } .public-shell-bio[data-page-theme] .public-chat-bio input:focus, .public-shell-bio[data-page-theme] .public-chat-bio textarea:focus, .public-shell-bio [data-page-theme] .public-chat-bio input:focus, .public-shell-bio [data-page-theme] .public-chat-bio textarea:focus, .bio-preview-public-copy[data-page-theme] .public-chat-bio input:focus, .bio-preview-public-copy[data-page-theme] .public-chat-bio textarea:focus, .bio-preview-public-copy [data-page-theme] .public-chat-bio input:focus, .bio-preview-public-copy [data-page-theme] .public-chat-bio textarea:focus { background: var(--bio-theme-chat-input-focus-background) !important; border-color: var(--bio-theme-accent) !important; box-shadow: 0 0 0 4px var(--bio-theme-focus-ring) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .public-message-composer, .public-shell-bio [data-page-theme] .public-chat-bio .public-message-composer, .bio-preview-public-copy[data-page-theme] .public-chat-bio .public-message-composer, .bio-preview-public-copy [data-page-theme] .public-chat-bio .public-message-composer { background: var(--bio-theme-chat-input-background) !important; border-color: var(--bio-theme-chat-input-border) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .public-message-composer:focus-within, .public-shell-bio [data-page-theme] .public-chat-bio .public-message-composer:focus-within, .bio-preview-public-copy[data-page-theme] .public-chat-bio .public-message-composer:focus-within, .bio-preview-public-copy [data-page-theme] .public-chat-bio .public-message-composer:focus-within { background: var(--bio-theme-chat-input-focus-background) !important; border-color: var(--bio-theme-accent) !important; box-shadow: 0 0 0 4px var(--bio-theme-focus-ring) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .public-message-composer textarea, .public-shell-bio[data-page-theme] .public-chat-bio .public-message-composer textarea:focus, .public-shell-bio [data-page-theme] .public-chat-bio .public-message-composer textarea, .public-shell-bio [data-page-theme] .public-chat-bio .public-message-composer textarea:focus, .bio-preview-public-copy[data-page-theme] .public-chat-bio .public-message-composer textarea, .bio-preview-public-copy[data-page-theme] .public-chat-bio .public-message-composer textarea:focus, .bio-preview-public-copy [data-page-theme] .public-chat-bio .public-message-composer textarea, .bio-preview-public-copy [data-page-theme] .public-chat-bio .public-message-composer textarea:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; } .public-shell-bio[data-page-theme] .public-chat-bio .public-send-button, .public-shell-bio [data-page-theme] .public-chat-bio .public-send-button, .bio-preview-public-copy[data-page-theme] .public-chat-bio .public-send-button, .bio-preview-public-copy [data-page-theme] .public-chat-bio .public-send-button { color: var(--bio-theme-send-text) !important; background: var(--bio-theme-send-background) !important; box-shadow: var(--bio-theme-send-shadow) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .message.visitor, .public-shell-bio [data-page-theme] .public-chat-bio .message.visitor, .bio-preview-public-copy[data-page-theme] .public-chat-bio .message.visitor, .bio-preview-public-copy [data-page-theme] .public-chat-bio .message.visitor { color: var(--bio-theme-chat-visitor-text) !important; background: var(--bio-theme-chat-visitor-background) !important; border-color: var(--bio-theme-chat-visitor-border) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .message.owner, .public-shell-bio [data-page-theme] .public-chat-bio .message.owner, .bio-preview-public-copy[data-page-theme] .public-chat-bio .message.owner, .bio-preview-public-copy [data-page-theme] .public-chat-bio .message.owner { color: var(--bio-theme-chat-owner-text) !important; background: var(--bio-theme-chat-owner-background) !important; border-color: var(--bio-theme-chat-owner-border) !important; } .public-shell-bio[data-page-theme] .public-chat-bio .form-result:not(.error), .public-shell-bio [data-page-theme] .public-chat-bio .form-result:not(.error), .bio-preview-public-copy[data-page-theme] .public-chat-bio .form-result:not(.error), .bio-preview-public-copy [data-page-theme] .public-chat-bio .form-result:not(.error) { color: var(--bio-theme-accent) !important; background: var(--bio-theme-accent-soft) !important; border-color: var(--bio-theme-chat-input-border) !important; } /* CI_BIO_CLAIM_MODAL_THEME_CONTRACT_V2 Near-opaque readable modal surface with dedicated semantic theme tokens. Footer/link/social changes can no longer accidentally restyle the modal. */ .public-shell-bio[data-page-theme] .bio-claim-backdrop, .public-shell-bio [data-page-theme] .bio-claim-backdrop { background: var(--bio-theme-modal-backdrop) !important; backdrop-filter: var(--bio-theme-modal-backdrop-filter) !important; -webkit-backdrop-filter: var(--bio-theme-modal-backdrop-filter) !important; } .public-shell-bio[data-page-theme] .bio-claim-dialog, .public-shell-bio [data-page-theme] .bio-claim-dialog { color: var(--bio-theme-modal-title) !important; background: var(--bio-theme-modal-background) !important; border-color: var(--bio-theme-modal-border) !important; box-shadow: var(--bio-theme-modal-shadow) !important; backdrop-filter: blur(20px) saturate(1.05) !important; -webkit-backdrop-filter: blur(20px) saturate(1.05) !important; } .public-shell-bio[data-page-theme] .bio-claim-close, .public-shell-bio [data-page-theme] .bio-claim-close { color: var(--bio-theme-modal-close-color) !important; background: var(--bio-theme-modal-close-background) !important; border-color: var(--bio-theme-modal-close-border) !important; box-shadow: var(--bio-theme-modal-close-shadow) !important; } /* END CI_BIO_CLAIM_MODAL_THEME_CONTRACT_V2 */ .public-shell-bio[data-page-theme] .bio-claim-copy h2, .public-shell-bio [data-page-theme] .bio-claim-copy h2 { color: var(--bio-theme-modal-title) !important; font-family: var(--bio-theme-heading-font-family) !important; font-style: var(--bio-theme-heading-font-style) !important; font-weight: var(--bio-theme-heading-font-weight) !important; letter-spacing: var(--bio-theme-heading-letter-spacing) !important; } .public-shell-bio[data-page-theme] .bio-claim-kicker, .public-shell-bio[data-page-theme] .bio-claim-brand, .public-shell-bio [data-page-theme] .bio-claim-kicker, .public-shell-bio [data-page-theme] .bio-claim-brand { color: var(--bio-theme-modal-accent) !important; } .public-shell-bio[data-page-theme] .bio-claim-copy p:not(.bio-claim-kicker), .public-shell-bio [data-page-theme] .bio-claim-copy p:not(.bio-claim-kicker) { color: var(--bio-theme-modal-muted) !important; } .public-shell-bio[data-page-theme] .bio-claim-slug-field, .public-shell-bio [data-page-theme] .bio-claim-slug-field { color: var(--bio-theme-input-text) !important; background: var(--bio-theme-chat-input-background) !important; border-color: var(--bio-theme-chat-input-border) !important; } .public-shell-bio[data-page-theme] .bio-claim-primary, .public-shell-bio [data-page-theme] .bio-claim-primary { color: var(--bio-theme-send-text) !important; background: var(--bio-theme-send-background) !important; box-shadow: var(--bio-theme-send-shadow) !important; } .public-shell-bio[data-page-theme] .bio-claim-secondary, .public-shell-bio [data-page-theme] .bio-claim-secondary { color: var(--bio-theme-readable-contact-text) !important; background: var(--bio-theme-contact-background) !important; border-color: var(--bio-theme-contact-border) !important; } @media (max-width: 720px) { .public-shell-bio[data-page-theme] .bio-public-join-cta::before, .public-shell-bio [data-page-theme] .bio-public-join-cta::before { background: var(--bio-theme-mobile-footer-fade) !important; } .public-shell-bio[data-page-theme] .bio-public-join-pill, .public-shell-bio [data-page-theme] .bio-public-join-pill { color: var(--bio-theme-text) !important; background: var(--bio-theme-link-hover-background) !important; border-color: var(--bio-theme-footer-border) !important; box-shadow: var(--bio-theme-footer-shadow) !important; } .public-shell-bio[data-page-theme] .bio-public-join-text, .public-shell-bio [data-page-theme] .bio-public-join-text { color: var(--bio-theme-readable-footer-text) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } } /* -------------------------------------------------------------------------- Image-backed public theme effects -------------------------------------------------------------------------- */ .bio-preview-public-copy[data-page-theme] { background: var(--bio-theme-page-background) !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; } .bio-preview-public-copy[data-page-theme]::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background-image: var(--bio-theme-page-pattern); background-size: var(--bio-theme-page-pattern-size); opacity: var(--bio-theme-page-pattern-opacity); } @media (max-width: 720px) { .public-shell-bio[data-page-theme], .public-shell[data-page-theme], .public-shell-onepage[data-page-theme], body:has(.public-shell[data-page-theme]) { background-attachment: scroll !important; } } /* -------------------------------------------------------------------------- Admin Theme panel — always follows the normal the project dashboard style -------------------------------------------------------------------------- */ .page-theme-admin, .page-theme-admin * { box-sizing: border-box; } /* CI_PAGE_THEME_OUTER_FRAME_REMOVED_V1 Match the Page tab: the Theme workspace has no separate outer card. */ .page-theme-admin { position: relative; display: grid; width: 100%; min-width: 0; gap: 0; padding: 0; color: var(--text); background: transparent; border: 0; border-radius: 0; box-shadow: none; } .page-theme-admin[aria-busy="true"] { cursor: progress; } /* CI_PAGE_THEME_COMPACT_HEADER_V1 */ .page-theme-section-tabs { min-width: 0; } .page-theme-tab-current { display: none; flex: 0 1 auto; align-items: center; min-width: 0; max-width: min(260px, 38vw); margin-left: auto; margin-right: 4px; padding: 5px 9px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; background: rgba(255, 255, 255, 0.34); border: 1px solid rgba(31, 24, 17, 0.10); border-radius: 999px; } .page-theme-section-tabs > [data-onepage-section-tab="theme"].active ~ .page-theme-tab-current { display: inline-flex; } .page-theme-locked-notice { display: grid; min-height: 48px; place-items: center start; padding: 11px 14px; color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.4; background: rgba(31, 24, 17, 0.045); border: 1px dashed var(--line-strong); border-radius: 16px; } /* CI_PAGE_THEME_COMPACT_LINK_CARDS_CARDS_V1 */ .page-theme-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .page-theme-card { position: relative; display: grid; min-width: 0; gap: 6px; padding: 0; color: var(--text); text-align: center; background: transparent; border: 0; border-radius: 14px; outline: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 160ms ease, opacity 180ms ease; } .page-theme-card:hover { transform: translateY(-2px); background: transparent; box-shadow: none; } .page-theme-card:active { transform: translateY(-1px) scale(0.988); } .page-theme-card:focus-visible { background: transparent; box-shadow: none; } .page-theme-card:focus-visible .page-theme-card-preview { border-color: rgba(23, 79, 63, 0.58); box-shadow: 0 0 0 3px rgba(23, 79, 63, 0.12), 0 12px 28px rgba(52, 39, 21, 0.14); } .page-theme-card.is-selected .page-theme-card-preview { border-color: var(--primary); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px var(--primary), 0 12px 28px rgba(23, 79, 63, 0.18); } .page-theme-card:disabled, .page-theme-card[aria-disabled="true"] { cursor: not-allowed; transform: none; opacity: 0.58; box-shadow: none; } .page-theme-card-selected-mark { position: absolute; top: 6px; right: 6px; z-index: 8; display: grid; width: 18px; height: 18px; place-items: center; color: #ffffff; font-size: 10px; font-weight: 950; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border: 1px solid rgba(255, 255, 255, 0.96); border-radius: 999px; box-shadow: 0 6px 14px rgba(23, 79, 63, 0.26); opacity: 0; transform: scale(0.72); transition: opacity 160ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } .page-theme-card.is-selected .page-theme-card-selected-mark { opacity: 1; transform: scale(1); } .page-theme-card-copy { display: grid; min-width: 0; gap: 0; padding: 0 3px; } .page-theme-card-copy strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 800; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .page-theme-card-copy small { display: none; } /* CI_PAGE_THEME_UNIFORM_LINK_CARDS_CARDS_V1 Every Theme selector card uses exactly the same geometry. Theme presets may change only visual tokens such as background, text, font, border and shadow. */ .page-theme-card-preview { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden; box-sizing: border-box; color: var(--bio-theme-text); font-family: var(--bio-theme-font-family); background: var(--bio-theme-page-background); background-position: center center; background-size: cover; background-repeat: no-repeat; border: 1px solid transparent; border-radius: 14px; box-shadow: 0 8px 20px rgba(52, 39, 21, 0.10); isolation: isolate; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .page-theme-card-preview::before { position: absolute; inset: 0; z-index: -1; pointer-events: none; content: ""; background-image: var(--bio-theme-page-pattern); background-size: var(--bio-theme-page-pattern-size); opacity: calc(var(--bio-theme-page-pattern-opacity) * 0.72); } .page-theme-card-preview-art { position: absolute; inset: 0; display: block; padding: 0; } .page-theme-card-preview-aa { position: absolute; top: 14%; left: 13%; z-index: 2; display: block; color: var(--bio-theme-text); font-family: var(--bio-theme-heading-font-family, var(--bio-theme-font-family)); font-size: clamp(20px, 1.85vw, 27px); font-style: var(--bio-theme-heading-font-style, normal); font-weight: var(--bio-theme-heading-font-weight, 700); line-height: 0.95; letter-spacing: var(--bio-theme-heading-letter-spacing, -0.06em); text-shadow: 0 3px 10px rgba(0, 0, 0, 0.14); } .page-theme-card-preview-button { position: absolute; right: -5%; bottom: 8%; left: 13%; display: block; width: auto; height: 27%; min-height: 0; max-height: none; box-sizing: border-box; background: var(--bio-theme-link-background); border: 1px solid var(--bio-theme-link-border); border-radius: max(8px, calc(var(--bio-theme-link-radius) * 0.55)); clip-path: var(--bio-theme-link-clip-path); box-shadow: var(--bio-theme-link-shadow); } .page-theme-card-preview-detail { display: none; } .page-theme-result { margin: 0; } .page-theme-result.success { color: var(--primary); background: var(--primary-soft); border-color: rgba(23, 79, 63, 0.14); } .page-theme-admin.is-saving::after { position: absolute; inset: 0; z-index: 20; pointer-events: none; content: ""; background: rgba(251, 248, 241, 0.28); border-radius: inherit; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } .page-theme-admin.is-saving .page-theme-card.is-selected .page-theme-card-preview { animation: bioThemeSavingPulse 1.1s ease-in-out infinite; } @keyframes bioThemeSavingPulse { 0%, 100% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(23, 79, 63, 0.72), 0 16px 36px rgba(23, 79, 63, 0.14); } 50% { box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgba(23, 79, 63, 0.28), 0 20px 44px rgba(23, 79, 63, 0.20); } } /* -------------------------------------------------------------------------- Responsive Theme panel -------------------------------------------------------------------------- */ @media (min-width: 360px) and (max-width: 719px) { .page-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 720px) { .page-theme-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 96px)); justify-content: start; gap: 14px 10px; } } @media (min-width: 1320px) { .page-theme-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 100px)); gap: 15px 11px; } } @media (max-width: 719px) { .page-theme-tab-current { max-width: 34vw; margin-right: 2px; padding: 4px 7px; font-size: 11px; } .page-theme-grid { gap: 13px 9px; } .page-theme-card-preview { border-radius: 13px; } .page-theme-card-preview-aa { font-size: clamp(20px, 6.2vw, 27px); } } @media (max-width: 350px) { .page-theme-grid { gap: 12px 8px; } .page-theme-card-preview { border-radius: 12px; } .page-theme-card-copy strong { font-size: 10px; } } /* -------------------------------------------------------------------------- Accessibility and platform fallbacks -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page-theme-card, .page-theme-card-preview, .page-theme-card-selected-mark, .public-shell-bio[data-page-theme] .bio-public-card, .public-shell-bio [data-page-theme] .bio-public-card { transition: none !important; } .page-theme-admin.is-saving .page-theme-card.is-selected .page-theme-card-preview { animation: none !important; } } @media (prefers-contrast: more) { .page-theme-card-preview { border-color: var(--line-strong); } .page-theme-card.is-selected .page-theme-card-preview { border-width: 2px; border-color: var(--primary); } .public-shell-bio[data-page-theme] .bio-public-link, .public-shell-bio[data-page-theme] .bio-public-social-link, .public-shell-bio[data-page-theme] .bio-public-contact-link, .public-shell-bio[data-page-theme] .public-chat-bio { border-width: 2px !important; } } @media (forced-colors: active) { .page-theme-card-preview, .page-theme-locked-notice { forced-color-adjust: auto; border: 1px solid CanvasText; } .page-theme-card.is-selected .page-theme-card-preview { outline: 3px solid Highlight; outline-offset: 2px; } .page-theme-card-selected-mark { color: HighlightText; background: Highlight; border-color: Highlight; } } @media print { .page-theme-admin { box-shadow: none; } .page-theme-card { break-inside: avoid; box-shadow: none; } } /* CI_PAGE_THEME_IMAGE_PRESETS_CSS_V1 */ /* CI_PAGE_THEME_REUSABLE_LIVE_PREVIEW_CSS_V3 Theme uses the exact Page layout and preview dimensions. No Theme-only heading, card, padding, background, width cap or responsive order remains. */ .page-theme-admin-shell, .page-theme-workspace { min-width: 0; } .page-theme-selector-column { display: grid; min-width: 0; gap: 22px; } @media (max-width: 719px) { .page-theme-selector-column { gap: 18px; } } /* END CI_PAGE_THEME_REUSABLE_LIVE_PREVIEW_CSS_V3 */ /* CI_PAGE_THEME_ALL_PUBLIC_TYPES_V1 */ .public-shell[data-page-theme], .public-shell-onepage[data-page-theme] { --bg: var(--bio-theme-page-background); --surface: var(--bio-theme-surface-background); --surface-solid: var(--bio-theme-link-background); --surface-soft: var(--bio-theme-chat-messages-background); --text: var(--bio-theme-text); --muted: var(--bio-theme-readable-muted); --line: var(--bio-theme-surface-border); --line-strong: var(--bio-theme-link-hover-border); --primary: var(--bio-theme-accent); --primary-2: var(--bio-theme-accent-2); --primary-soft: var(--bio-theme-accent-soft); --danger: var(--bio-theme-danger); color: var(--bio-theme-text); font-family: var(--bio-theme-font-family); background: var(--bio-theme-page-background); background-attachment: fixed; } body:has(.public-shell[data-page-theme]) { color: var(--bio-theme-text); font-family: var(--bio-theme-font-family); background: var(--bio-theme-page-background); background-attachment: fixed; } body:has(.public-shell[data-page-theme])::before { background-image: var(--bio-theme-page-pattern); background-size: var(--bio-theme-page-pattern-size); opacity: var(--bio-theme-page-pattern-opacity); } .public-shell[data-page-theme] .public-card, .public-shell-onepage[data-page-theme] .onepage-block, .public-shell-onepage[data-page-theme] .public-header, .public-shell-onepage[data-page-theme] .public-nav { color: var(--bio-theme-text); background: var(--bio-theme-surface-background); border-color: var(--bio-theme-surface-border); box-shadow: var(--bio-theme-surface-shadow); backdrop-filter: var(--bio-theme-surface-backdrop); } .public-shell[data-page-theme] .public-avatar, .public-shell-onepage[data-page-theme] .brand-mark { color: var(--bio-theme-avatar-color); background: var(--bio-theme-avatar-background); border-color: var(--bio-theme-avatar-border); box-shadow: var(--bio-theme-avatar-shadow); } .public-shell[data-page-theme] .public-identity h1, .public-shell-onepage[data-page-theme] h1, .public-shell-onepage[data-page-theme] h2, .public-shell-onepage[data-page-theme] h3, .public-shell-onepage[data-page-theme] .brand { color: var(--bio-theme-text); } .public-shell[data-page-theme] .public-identity p, .public-shell-onepage[data-page-theme] p, .public-shell-onepage[data-page-theme] .header-pill { color: var(--bio-theme-readable-muted); } .public-shell[data-page-theme] .public-chat { color: var(--bio-theme-text); background: var(--bio-theme-chat-background); border-color: var(--bio-theme-chat-border); box-shadow: var(--bio-theme-chat-shadow); } .public-shell[data-page-theme] .messages { background: var(--bio-theme-chat-messages-background); } .public-shell[data-page-theme] .message-form, .public-shell[data-page-theme] .public-message-composer { background: var(--bio-theme-chat-input-background); border-color: var(--bio-theme-chat-input-border); } .public-shell[data-page-theme] input, .public-shell[data-page-theme] textarea, .public-shell-onepage[data-page-theme] input, .public-shell-onepage[data-page-theme] textarea, .public-shell-onepage[data-page-theme] select { color: var(--bio-theme-input-text); background: var(--bio-theme-chat-input-background); border-color: var(--bio-theme-chat-input-border); } .public-shell[data-page-theme] input::placeholder, .public-shell[data-page-theme] textarea::placeholder, .public-shell-onepage[data-page-theme] input::placeholder, .public-shell-onepage[data-page-theme] textarea::placeholder { color: var(--bio-theme-chat-placeholder); opacity: 1; } .public-shell[data-page-theme] input:focus, .public-shell[data-page-theme] textarea:focus, .public-shell-onepage[data-page-theme] input:focus, .public-shell-onepage[data-page-theme] textarea:focus, .public-shell-onepage[data-page-theme] select:focus { color: var(--bio-theme-input-text); background: var(--bio-theme-chat-input-focus-background); border-color: var(--bio-theme-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bio-theme-accent) 18%, transparent); } .public-shell[data-page-theme] .message.owner, .public-shell[data-page-theme] .message.is-owner, .public-shell[data-page-theme] [data-message-sender="owner"] { color: var(--bio-theme-chat-owner-text); background: var(--bio-theme-chat-owner-background); border-color: var(--bio-theme-chat-owner-border); } .public-shell[data-page-theme] .message.visitor, .public-shell[data-page-theme] .message.is-visitor, .public-shell[data-page-theme] [data-message-sender="visitor"] { color: var(--bio-theme-chat-visitor-text); background: var(--bio-theme-chat-visitor-background); border-color: var(--bio-theme-chat-visitor-border); } .public-shell[data-page-theme] .public-send-button, .public-shell-onepage[data-page-theme] .btn, .public-shell-onepage[data-page-theme] .onepage-inline-button { color: var(--bio-theme-send-text); background: var(--bio-theme-send-background); border-color: var(--bio-theme-accent); box-shadow: var(--bio-theme-send-shadow); } .public-shell[data-page-theme] .public-send-button:hover, .public-shell[data-page-theme] .public-send-button:focus-visible, .public-shell-onepage[data-page-theme] .btn:hover, .public-shell-onepage[data-page-theme] .btn:focus-visible, .public-shell-onepage[data-page-theme] .onepage-inline-button:hover, .public-shell-onepage[data-page-theme] .onepage-inline-button:focus-visible { color: var(--bio-theme-send-text); filter: brightness(1.07) saturate(1.04); outline: 3px solid color-mix(in srgb, var(--bio-theme-send-text) 52%, transparent); outline-offset: 2px; } .public-shell-onepage[data-page-theme] .public-nav a, .public-shell-onepage[data-page-theme] .onepage-markdown a:not(.btn) { color: var(--bio-theme-readable-action); border-color: transparent; } .public-shell-onepage[data-page-theme] .public-nav a:hover, .public-shell-onepage[data-page-theme] .public-nav a:focus-visible, .public-shell-onepage[data-page-theme] .onepage-markdown a:not(.btn):hover, .public-shell-onepage[data-page-theme] .onepage-markdown a:not(.btn):focus-visible { color: var(--bio-theme-readable-action-hover); background: var(--bio-theme-action-background); outline: 2px solid var(--bio-theme-accent); outline-offset: 2px; } .public-shell-onepage[data-page-theme] .public-nav a.active { color: var(--bio-theme-link-text); background: var(--bio-theme-link-background); border-color: var(--bio-theme-link-hover-border); } .public-shell-onepage[data-page-theme] .onepage-inline-image, .public-shell-onepage[data-page-theme] .onepage-video-frame { border-color: var(--bio-theme-surface-border); box-shadow: var(--bio-theme-surface-shadow); } .public-shell[data-page-theme] .ci-catalog-public-card, .public-shell[data-page-theme] .ci-catalog-public-dialog, .public-shell[data-page-theme] .ci-catalog-filter-popover, .public-shell[data-page-theme] .ci-catalog-view-menu { color: var(--bio-theme-link-text); background: var(--bio-theme-link-background); border-color: var(--bio-theme-link-border); box-shadow: var(--bio-theme-link-shadow); } .public-shell[data-page-theme] .ci-catalog-public-card:hover, .public-shell[data-page-theme] .ci-catalog-public-card:focus-visible { color: var(--bio-theme-link-text); background: var(--bio-theme-link-hover-background); border-color: var(--bio-theme-link-hover-border); box-shadow: var(--bio-theme-link-hover-shadow); outline: 3px solid color-mix(in srgb, var(--bio-theme-accent) 32%, transparent); outline-offset: 2px; } .public-shell[data-page-theme] .ci-catalog-public-card-title, .public-shell[data-page-theme] .ci-catalog-public-detail-body h3, .public-shell[data-page-theme] .ci-catalog-public-detail-price { color: var(--bio-theme-link-text); } .public-shell[data-page-theme] .ci-catalog-public-card-description, .public-shell[data-page-theme] .ci-catalog-public-detail-description, .public-shell[data-page-theme] .ci-catalog-public-subtitle { color: var(--bio-theme-link-muted); } .public-shell[data-page-theme] .ci-catalog-type-badge, .public-shell[data-page-theme] .ci-catalog-category-badge, .public-shell[data-page-theme] .ci-catalog-view-trigger, .public-shell[data-page-theme] .ci-catalog-public-detail-thumbnail { color: var(--bio-theme-readable-link-icon-text); background: var(--bio-theme-link-icon-background); border-color: var(--bio-theme-link-border); } .public-shell[data-page-theme] .ci-catalog-public-detail-action { color: var(--bio-theme-send-text); background: var(--bio-theme-send-background); box-shadow: var(--bio-theme-send-shadow); } .public-shell[data-page-theme] :focus-visible, .public-shell-onepage[data-page-theme] :focus-visible { outline-color: var(--bio-theme-accent); } @media (hover: none) { .public-shell[data-page-theme] .public-send-button:active, .public-shell-onepage[data-page-theme] .btn:active, .public-shell[data-page-theme] .ci-catalog-public-card:active { filter: brightness(0.96); } } /* END CI_PAGE_THEME_ALL_PUBLIC_TYPES_V1 */ /* CI_PAGE_THEME_ACCESSIBILITY_STATES_V2 Per-theme color corrections now live in each canonical preset. Shared focus and touch behavior stays centralized here. */ /* Keep pointer, keyboard and touch states visible on every public theme. */ .public-shell-bio[data-page-theme] .bio-public-link:focus-visible, .public-shell-bio[data-page-theme] .bio-public-social-link:focus-visible, .public-shell-bio[data-page-theme] .bio-public-contact-link:focus-visible, .public-shell[data-page-theme] .public-send-button:focus-visible, .public-shell[data-page-theme] .ci-catalog-public-card:focus-visible, .public-shell-onepage[data-page-theme] a:focus-visible, .public-shell-onepage[data-page-theme] button:focus-visible { outline: 3px solid var(--bio-theme-focus-contrast) !important; box-shadow: 0 0 0 6px var(--bio-theme-accent) !important; outline-offset: 2px; } @media (hover: none) { .public-shell-bio[data-page-theme] .bio-public-link:active { color: var(--bio-theme-link-text) !important; background: var(--bio-theme-link-hover-background) !important; border-color: var(--bio-theme-link-hover-border) !important; } .public-shell-bio[data-page-theme] .bio-public-social-link:active { color: var(--bio-theme-readable-social-text) !important; background: var(--bio-theme-social-hover-background) !important; border-color: var(--bio-theme-link-hover-border) !important; } .public-shell[data-page-theme] .public-send-button:active, .public-shell-onepage[data-page-theme] .btn:active, .public-shell[data-page-theme] .ci-catalog-public-card:active { opacity: 1 !important; filter: brightness(0.92) saturate(1.08); } } /* END CI_PAGE_THEME_ACCESSIBILITY_STATES_V2 */ /* CI_PAGE_THEME_FORM_READABILITY_V2_BEGIN Form controls use each theme's already-validated link surface so text and placeholders stay readable over patterned desktop and mobile backgrounds. */ [data-page-theme] { --bio-theme-chat-input-background: var(--bio-theme-link-background); --bio-theme-chat-input-focus-background: var(--bio-theme-link-hover-background); --bio-theme-input-text: var(--bio-theme-link-text); --bio-theme-chat-placeholder: var(--bio-theme-link-muted); --bio-theme-result-text: var(--bio-theme-link-text); --bio-theme-result-background: var(--bio-theme-link-background); } .public-shell-bio[data-page-theme] .public-chat-bio .form-result:not(.error), .public-shell-bio [data-page-theme] .public-chat-bio .form-result:not(.error), .bio-preview-public-copy[data-page-theme] .public-chat-bio .form-result:not(.error), .bio-preview-public-copy [data-page-theme] .public-chat-bio .form-result:not(.error), .public-shell[data-page-theme] .form-result:not(.error) { color: var(--bio-theme-result-text) !important; background: var(--bio-theme-result-background) !important; } /* CI_PAGE_THEME_FORM_READABILITY_V2_END */ /* CI_PAGE_THEME_DESKTOP_WORKSPACE_LAYOUT_V1 Restore the established Theme desktop geometry after migration from the Bio-only theme module to the shared page-theme module. */ .page-theme-workspace { display: grid; width: 100%; min-width: 0; gap: 20px; align-items: start; } .page-theme-selector-column { display: grid; min-width: 0; gap: 22px; } .page-theme-preview-column { display: grid; width: 100%; min-width: 0; gap: 12px; align-self: start; } .page-theme-preview-column > * { min-width: 0; } @media (min-width: 1180px) { .page-theme-workspace { grid-template-columns: minmax(0, 1fr) minmax(320px, 410px); gap: 22px; } .page-theme-selector-column { grid-column: 1; grid-row: 1; } .page-theme-preview-column { grid-column: 2; grid-row: 1; position: sticky; top: 14px; } } @media (max-width: 1179px) { .page-theme-preview-column { order: -1; } } @media (max-width: 719px) { .page-theme-workspace, .page-theme-selector-column { gap: 18px; } } /* END CI_PAGE_THEME_DESKTOP_WORKSPACE_LAYOUT_V1 */ /* CI_BIO_TOP_SOCIAL_THEME_FRAME_V1 Top social rail only. Its outside width is exactly the same responsive rail used by .bio-public-links. The 1px outline derives from each theme's focus colour; radius and optional clip shape derive from the active link-card design. Bottom social icons are intentionally unchanged. */ .public-shell-bio[data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .public-shell-bio [data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .bio-preview-public-copy[data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .bio-preview-public-copy [data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"] { box-sizing: border-box !important; width: min(var(--bio-link-max-width), calc(100% - (var(--bio-link-side-inset) * 2))) !important; max-width: 100% !important; justify-self: center !important; padding: clamp(5px, 0.55vw, 7px) clamp(7px, 0.8vw, 10px) !important; border: 1px solid var(--bio-theme-focus-ring, var(--bio-theme-social-border, rgba(31, 24, 17, 0.10))) !important; border-radius: var(--bio-theme-link-radius, var(--bio-link-radius, 22px)) !important; clip-path: var(--bio-theme-link-clip-path, none) !important; background: transparent !important; box-shadow: none !important; } @supports (color: color-mix(in srgb, #000 50%, transparent)) { .public-shell-bio[data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .public-shell-bio [data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .bio-preview-public-copy[data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"], .bio-preview-public-copy [data-page-theme] .bio-public-social-links[data-bio-public-social-position="top"] { border-color: color-mix( in srgb, var(--bio-theme-focus-ring, var(--bio-theme-accent, #174f3f)) 55%, transparent ) !important; } } /* END CI_BIO_TOP_SOCIAL_THEME_FRAME_V1 */