/* ============================================================================ Bonpopup — Editorial design layer ---------------------------------------------------------------------------- Implements DESIGN.md ("ElevenLabs-design-analysis"): an off-white editorial canvas holding warm near-black ink, a light-weight serif display voice, Inter for everything else, near-black pill CTAs, hairline-bordered white cards and pastel atmospheric gradient orbs as the only colour moments. This file is loaded LAST by app/(site)/layout.tsx so it can retheme the purchased Bootstrap theme (public/css/style.css) as well as every page-level stylesheet that Next injects into . It only ever changes appearance — no layout structure, no selectors that depend on interactive state logic and no changes to any markup. Font substitution: Waldenburg is licensed. DESIGN.md nominates EB Garamond as the open-source substitute, so display copy runs EB Garamond. EB Garamond has no 300 cut, so `--ds-display-weight` is 400 (its lightest) — the editorial "never bold display" rule is preserved through the token, change it in one place if a true 300 face is licensed later. Rem base: style.css, products.css, auth.css, account.css, my-products.css and popup-builder.css were all authored against `html { font-size: 62.5% }` (1rem = 10px). app/globals.css declares that rule but is imported nowhere, so the site was rendering ~1.6x oversized. The base is restored below; px-authored layers (marketing.css, landing-hero.css, header-floating.css) are unaffected. ============================================================================ */ /* Inter + EB Garamond are linked from app/layout.tsx so they are discovered on the first paint instead of behind a stylesheet round-trip. */ html { font-size: 62.5%; /* 1rem = 10px — restores the scale every layer was drawn for */ } /* =========================================================================== 1 — Tokens =========================================================================== */ :root { /* Ink & action */ --ds-primary: #292524; --ds-primary-active: #0c0a09; --ds-ink: #0c0a09; --ds-body: #4e4e4e; --ds-body-strong: #292524; --ds-muted: #777169; --ds-muted-soft: #a8a29e; /* Hairlines */ --ds-hairline: #e7e5e4; --ds-hairline-soft: #f0efed; --ds-hairline-strong: #d6d3d1; /* Surfaces */ --ds-canvas: #f5f5f5; --ds-canvas-soft: #fafafa; --ds-canvas-deep: #0c0a09; --ds-surface-card: #ffffff; --ds-surface-strong: #f0efed; --ds-surface-dark: #0c0a09; --ds-surface-dark-elevated: #1c1917; /* On-colour */ --ds-on-primary: #ffffff; --ds-on-dark: #ffffff; --ds-on-dark-soft: #a8a29e; /* Atmospheric gradient stops — decoration only, never a fill or a text colour */ --ds-mint: #a7e5d3; --ds-peach: #f4c5a8; --ds-lavender: #c8b8e0; --ds-sky: #a8c8e8; --ds-rose: #e8b8c4; /* Semantic */ --ds-success: #16a34a; --ds-error: #dc2626; /* Type */ --ds-display: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif; --ds-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ds-display-weight: 400; --ds-track-body: 0.16px; /* Shape */ --ds-r-xs: 4px; --ds-r-sm: 6px; --ds-r-md: 8px; --ds-r-lg: 12px; --ds-r-xl: 16px; --ds-r-xxl: 24px; --ds-r-pill: 9999px; /* Elevation — a single soft drop tier, depth otherwise comes from orbs */ --ds-shadow: 0 4px 16px rgba(12, 10, 9, 0.04); --ds-shadow-lift: 0 8px 28px rgba(12, 10, 9, 0.07); /* Rhythm */ --ds-section: 96px; /* ---- Remap the legacy theme variables (public/css/style.css) ---- */ --white: #ffffff; --black: #0c0a09; --body: #4e4e4e; --accent-color: #292524; --primaryfont: var(--ds-sans); --secondaryfont: var(--ds-display); --thirdfont: var(--ds-sans); --figtree: var(--ds-display); --menuHeight: 7.2rem; /* ---- Remap the marketing primitives (components/site/marketing.css) ---- Defined here as well as on `.mk` so the pages that read `--mk-*` from outside a `.mk` root (pricing.css, docs.css) resolve to the new palette. */ --mk-ink: var(--ds-ink); --mk-ink-soft: var(--ds-body); --mk-muted: var(--ds-muted); --mk-line: var(--ds-hairline); --mk-line-soft: var(--ds-hairline-soft); --mk-surface: var(--ds-surface-card); --mk-surface-soft: var(--ds-canvas-soft); --mk-brand: var(--ds-primary); --mk-brand-ink: var(--ds-ink); --mk-brand-wash: var(--ds-surface-strong); --mk-radius-sm: var(--ds-r-md); --mk-radius: var(--ds-r-xl); --mk-radius-lg: var(--ds-r-xxl); --mk-shadow: var(--ds-shadow); --mk-shadow-lift: var(--ds-shadow-lift); } /* =========================================================================== 2 — Base canvas & type =========================================================================== */ body { font-family: var(--ds-sans); font-size: 1.6rem; font-weight: 400; line-height: 1.5; letter-spacing: var(--ds-track-body); color: var(--ds-body); background: var(--ds-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display voice — light-weight serif, tight tracking, never bold. */ h1, h2, h3, h4, h5, h6 { font-family: var(--ds-display); font-weight: var(--ds-display-weight); color: var(--ds-ink); letter-spacing: -0.02em; text-transform: none; } h1 { line-height: 1.05; letter-spacing: -0.03em; } h2 { line-height: 1.08; letter-spacing: -0.02em; } h3 { line-height: 1.17; } /* Component titles and labels stay on Inter at 500 for legibility. */ h5, h6 { font-family: var(--ds-sans); font-weight: 500; letter-spacing: 0; } a { color: inherit; transition: color 0.18s ease, opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } ::selection { background: var(--ds-lavender); color: var(--ds-ink); } :focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; } /* Legacy theme type scale, retuned to the editorial hierarchy. */ .title_56 { font-family: var(--ds-display); font-size: clamp(3.6rem, 5.2vw, 6.4rem); font-weight: var(--ds-display-weight); line-height: 1.05; letter-spacing: -0.03em; color: var(--ds-ink); } .title_40 { font-family: var(--ds-display); font-size: clamp(3rem, 3.8vw, 4.8rem); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; color: var(--ds-ink); } .title_32 { font-family: var(--ds-display); font-size: 3.2rem; font-weight: var(--ds-display-weight); line-height: 1.13; letter-spacing: -0.01em; color: var(--ds-ink); } .title_24 { font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); line-height: 1.2; letter-spacing: 0; color: var(--ds-ink); } .text_xl { font-size: 1.8rem; } .text_lg { font-size: 1.7rem; } .text_md { font-size: 1.6rem; } .text_sm { font-size: 1.5rem; } .text_xsm { font-size: 1.4rem; } /* The theme's weight utilities are used on body copy; cap them so Inter never goes heavier than the editorial 500/600 and display never bolds. */ .f_600 { font-weight: 500 !important; } .f_700, .f_800, .f_900 { font-weight: 600 !important; } /* Section labels / eyebrows share one uppercase caption treatment. */ .mk_kicker, .pp__hero-badge, .pt-market__eyebrow, .pp__section-eyebrow, .tg_eyebrow, .tg_kicker, .tg_info_eyebrow, .tg_flow_eyebrow, .mpop_group_kicker, .mpop_recs_kicker, .ba_kicker, .auth_intro_badge { font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.96px; text-transform: uppercase; } /* =========================================================================== 3 — Atmospheric gradient orbs Pure decoration: soft radial blooms, no content, never a button or text fill. =========================================================================== */ .ds-orb-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ds-orb { position: absolute; border-radius: var(--ds-r-pill); filter: blur(72px); opacity: 0.55; pointer-events: none; } .ds-orb--mint { background: radial-gradient(circle, var(--ds-mint) 0%, transparent 70%); } .ds-orb--peach { background: radial-gradient(circle, var(--ds-peach) 0%, transparent 70%); } .ds-orb--lavender { background: radial-gradient(circle, var(--ds-lavender) 0%, transparent 70%); } .ds-orb--sky { background: radial-gradient(circle, var(--ds-sky) 0%, transparent 70%); } .ds-orb--rose { background: radial-gradient(circle, var(--ds-rose) 0%, transparent 70%); } /* =========================================================================== 4 — Buttons One primary: the near-black ink pill. One secondary: transparent outline. No saturated action colour anywhere. =========================================================================== */ .button, .header_cta_btn, .mk_btn, .mpop_btn, .mpop_empty_cta, .mpop_hub_action, .pp__empty-reset, .acct_btn_secondary, .auth_submit, .tg_primary_cta, .tg_secondary_cta, .product-button, .ba_form button { font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: 0; border-radius: var(--ds-r-pill) !important; text-transform: none; } /* Legacy theme button: strip the offset drop-shadow slab treatment. */ .button { height: 4rem; min-width: auto; padding: 0 2rem !important; color: var(--ds-on-primary); box-shadow: none; } .button::after { display: none; } .button::before { right: 0; bottom: 0; border-radius: var(--ds-r-pill); background: var(--ds-primary); } .button:hover::before, .button_green::before { background: var(--ds-primary); } .button:hover::before { background: var(--ds-primary-active); } /* =========================================================================== 5 — Top navigation 64px band on the canvas, ink wordmark, Inter 500 links, ink pill CTA. =========================================================================== */ .site_header { height: var(--menuHeight); background: var(--ds-canvas); border-bottom: 1px solid var(--ds-hairline); box-shadow: none; backdrop-filter: saturate(180%) blur(12px); } .site_header.sticky { background: rgba(245, 245, 245, 0.88); box-shadow: 0 1px 0 var(--ds-hairline); } .site_header .container { max-width: 120rem; } .menu_container { gap: 2.4rem; } .menu_link_style, .menu_link, .nav_link { font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ds-body); opacity: 1; } .menu_link_style:not(.active):hover, .menu_link:hover, .nav_link:hover { color: var(--ds-ink); opacity: 1; } .menu_link_style.active, .nav_link.active { color: var(--ds-ink); font-weight: 500; opacity: 1; } /* Wordmark — ink type, no gradient chip. */ .bp_brand { color: var(--ds-ink); gap: 1rem; } .bp_brand_mark { width: 2.8rem; height: 2.8rem; border-radius: var(--ds-r-md); background: var(--ds-primary); box-shadow: none; } .bp_brand_mark i { border-color: var(--ds-on-primary); } .bp_brand_mark i:last-child { background: rgba(255, 255, 255, 0.22); } .bp_brand_name { font-family: var(--ds-display) !important; font-size: 2.2rem !important; font-weight: var(--ds-display-weight) !important; letter-spacing: -0.02em; color: var(--ds-ink); } .header_login_link, .site_header:not(.site_header--floating) .header_login_link, .site_header--floating .header_login_link { font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; color: var(--ds-body); } .header_login_link:hover, .site_header:not(.site_header--floating) .header_login_link:hover, .site_header--floating .header_login_link:hover { color: var(--ds-ink); } .header_cta_btn, .site_header:not(.site_header--floating) .header_cta_btn, .site_header--floating .header_cta_btn { height: 4rem; padding: 0 2rem; border: 1px solid var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .header_cta_btn:hover, .site_header:not(.site_header--floating) .header_cta_btn:hover, .site_header--floating .header_cta_btn:hover { border-color: var(--ds-primary-active); background: var(--ds-primary-active); color: var(--ds-on-primary); transform: none; } /* The homepage header no longer floats over a dark hero — the hero is canvas, so the pill flattens into the same off-white band as every other page. */ .site_header--floating { padding: 0 !important; height: var(--menuHeight) !important; display: flex !important; align-items: center; background: var(--ds-canvas) !important; border-bottom: 1px solid var(--ds-hairline) !important; } .site_header--floating.sticky { background: rgba(245, 245, 245, 0.88) !important; } .site_header--floating .site_header_pill { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .site_header--floating .logo, .site_header--floating .logo span, .site_header--floating .bp_brand_name { color: var(--ds-ink) !important; font-size: 2.2rem !important; } .site_header--floating .menu_link, .site_header--floating .menu_link_style, .site_header--floating .nav_link { color: var(--ds-body) !important; font-weight: 500; padding: 6px 0; } .site_header--floating .menu_link:hover, .site_header--floating .nav_link:hover, .site_header--floating .nav_link.active { color: var(--ds-ink) !important; } .site_header--floating .bp_brand_mark { box-shadow: none; } .site_header--floating .user_menu_iconbtn, .site_header--floating .user_menu_trigger { color: var(--ds-ink); } @media (max-width: 991.98px) { .site_header--floating { padding: 0 !important; } .header_cta_btn, .site_header--floating .header_cta_btn { height: 3.6rem; padding: 0 1.6rem; font-size: 1.4rem; } } /* =========================================================================== 6 — Account menu =========================================================================== */ .user_menu_iconbtn, .user_menu_trigger { border: 1px solid var(--ds-hairline-strong); background: var(--ds-surface-card); color: var(--ds-ink); } .user_menu_iconbtn::before, .user_menu_trigger::before { display: none; } .user_menu_iconbtn:hover, .user_menu_iconbtn.is-open, .user_menu_trigger:hover, .user_menu_trigger.is-open { border-color: var(--ds-primary); background: var(--ds-surface-card); box-shadow: var(--ds-shadow); } .user_menu_iconbtn:hover { color: var(--ds-ink); } .user_menu_iconbtn.is-open { background: var(--ds-surface-strong); color: var(--ds-ink); } .user_menu_avatar, .acct_avatar { background: var(--ds-primary); color: var(--ds-on-primary); font-family: var(--ds-sans); font-weight: 500; box-shadow: none; } .user_menu_chevron { color: var(--ds-muted); } .user_menu_trigger.is-open .user_menu_chevron { color: var(--ds-ink); } .user_menu_panel { background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); box-shadow: 0 12px 40px rgba(12, 10, 9, 0.1); backdrop-filter: none; -webkit-backdrop-filter: none; } .user_menu_panel::before { border-left-color: var(--ds-hairline); border-top-color: var(--ds-hairline); } .user_menu_header, .user_menu_footer { border-color: var(--ds-hairline-soft); } .user_menu_name, .user_menu_guest_title { font-family: var(--ds-sans); font-weight: 500; color: var(--ds-ink); letter-spacing: 0; } .user_menu_email, .user_menu_guest_text { color: var(--ds-muted); } .user_menu_guest_header { background: var(--ds-surface-strong); border-bottom-color: var(--ds-hairline-soft); } .user_menu_guest_icon { background: var(--ds-surface-card); border-color: var(--ds-hairline); color: var(--ds-ink); box-shadow: none; } .user_menu_item { font-family: var(--ds-sans); font-weight: 400; color: var(--ds-body); border-radius: var(--ds-r-md); } .user_menu_item::before, .user_menu_logout::before { background: var(--ds-primary); } .user_menu_item:hover { background: var(--ds-surface-strong); color: var(--ds-ink); } .user_menu_item--primary, .user_menu_item--primary:hover { background: var(--ds-primary); color: var(--ds-on-primary); border-radius: var(--ds-r-pill); box-shadow: none; font-weight: 500; transform: none; } .user_menu_item--primary:hover { background: var(--ds-primary-active); } .user_menu_item--admin { color: var(--ds-body-strong); } .user_menu_item--admin::before { background: var(--ds-primary); } .user_menu_item--admin:hover { background: var(--ds-surface-strong); color: var(--ds-ink); } .user_menu_logout { font-family: var(--ds-sans); color: var(--ds-error); border-radius: var(--ds-r-md); } .user_menu_logout:hover { background: rgba(220, 38, 38, 0.06); color: var(--ds-error); } /* =========================================================================== 7 — Footer =========================================================================== */ .footer_section, .site_footer_rich { background: var(--ds-canvas); color: var(--ds-body); padding: 64px 0 24px; border-top: 1px solid var(--ds-hairline); } .footer_top, .site_footer_rich .footer_top { border-bottom: 1px solid var(--ds-hairline); margin-bottom: 3.6rem; } .site_footer_rich .footer_box h5 { font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ds-muted); } .site_footer_rich .footer_box p { color: var(--ds-body); font-size: 1.5rem; line-height: 1.47; } .site_footer_rich .footer_box ul * { font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 400; color: var(--ds-body); } .site_footer_rich .footer_box a:hover, .site_footer_rich .copywrite a:hover, .footer_box ul li a:hover { color: var(--ds-ink); text-decoration: underline !important; } .site_footer_promise { font-family: var(--ds-display); font-size: 2.4rem !important; font-weight: var(--ds-display-weight); line-height: 1.2; color: var(--ds-ink) !important; } .site_footer_trust { display: flex; flex-wrap: wrap; gap: 0.8rem; } .site_footer_trust span { padding: 4px 10px; border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .site_footer_rich .footer_box_v2, .site_footer_rich .social_icons a { background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); } .site_footer_rich .footer_box_v2 span { color: var(--ds-muted); } .site_footer_rich .footer_box_v2 a, .site_footer_rich .site_footer_credit a { color: var(--ds-ink); font-weight: 500; } .site_footer_rich .copywrite { border-top: 1px solid var(--ds-hairline); } .site_footer_rich .copywrite p { color: var(--ds-muted); font-size: 1.4rem; } .site_footer_rich .footer_top .button, .footer_top .button { background: var(--ds-primary); border-radius: var(--ds-r-pill); height: 4rem; } .site_footer_rich .footer_top .button:hover { background: var(--ds-primary-active); } .site_footer_rich .footer_logo img, .footer_logo img { max-width: 16rem; } /* =========================================================================== 8 — Marketing primitives (components/site/marketing.css) The `mk_` layer carried a saturated indigo brand, dark dev-tools bands and 750–850 display weights. Everything below returns it to the editorial system: canvas bands, hairline white cards, ink pills, light serif display. =========================================================================== */ .mk { --mk-ink: var(--ds-ink); --mk-ink-soft: var(--ds-body); --mk-muted: var(--ds-muted); --mk-line: var(--ds-hairline); --mk-line-soft: var(--ds-hairline-soft); --mk-surface: var(--ds-surface-card); --mk-surface-soft: var(--ds-canvas-soft); --mk-brand: var(--ds-primary); --mk-brand-ink: var(--ds-ink); --mk-brand-wash: var(--ds-surface-strong); --mk-radius-sm: var(--ds-r-md); --mk-radius: var(--ds-r-xl); --mk-radius-lg: var(--ds-r-xxl); --mk-shadow: var(--ds-shadow); --mk-shadow-lift: var(--ds-shadow-lift); font-family: var(--ds-sans); color: var(--ds-body); } /* ---- Section rhythm: 96px bands, alternating canvas / canvas-soft ---- */ .mk_section { padding: var(--ds-section) 0; background: var(--ds-canvas); } .mk_section--soft, .mk_campaign_section, .mk_feature_section, .mk_analyzer_section, .mk_platform_section { background: var(--ds-canvas-soft); } .mk_section--tight { padding: 64px 0; } @media (max-width: 767px) { .mk_section { padding: 64px 0; } } /* ---- Heads ---- */ .mk_head { max-width: 800px; margin-bottom: 56px; } .mk_kicker { padding: 4px 10px; color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); } .mk_title { font-family: var(--ds-display); font-size: clamp(32px, 4.4vw, 48px); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; color: var(--ds-ink); text-wrap: balance; } .mk_hero .mk_title { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.03em; } /* The theme used inside headlines as a colour accent. There is no accent colour in this system, so it becomes a true italic — the editorial emphasis. */ .mk_title em, .mk_section--dark .mk_title em { font-style: italic; color: inherit; } .mk_lede { max-width: 700px; margin: 20px auto 0; font-family: var(--ds-sans); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: var(--ds-track-body); color: var(--ds-body); } /* ---- Page hero: canvas + atmospheric bloom, no dot grid, no blue wash ---- */ .mk_hero { padding: 128px 0 96px; background: radial-gradient(760px 420px at 18% -10%, rgba(167, 229, 211, 0.5) 0%, transparent 62%), radial-gradient(680px 380px at 84% 4%, rgba(200, 184, 224, 0.45) 0%, transparent 60%), radial-gradient(560px 320px at 50% 108%, rgba(244, 197, 168, 0.34) 0%, transparent 62%), var(--ds-canvas); } .mk_hero_dots { display: none; } /* ---- Buttons ---- */ .mk_btn { padding: 10px 20px; min-height: 40px; font-size: 15px; font-weight: 500; border: 1px solid transparent; border-radius: var(--ds-r-pill); } .mk_btn:hover { transform: none; } .mk_btn:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; } .mk_btn--primary, .mk_btn--brand { color: var(--ds-on-primary); background: var(--ds-primary); border-color: var(--ds-primary); box-shadow: none; } .mk_btn--primary:hover, .mk_btn--brand:hover { color: var(--ds-on-primary); background: var(--ds-primary-active); border-color: var(--ds-primary-active); box-shadow: none; } .mk_btn--ghost { padding: 9px 19px; color: var(--ds-ink); background: transparent; border-color: var(--ds-hairline-strong); } .mk_btn--ghost:hover { color: var(--ds-ink); background: transparent; border-color: var(--ds-primary); box-shadow: none; } .mk_btn_note { font-size: 14px; color: var(--ds-muted); } /* ---- Cards ---- */ .mk_card, .mk_install_details, .mk_stats, .mk_campaign_card, .mk_tpl_card, .mk_moments_card, .mk_moment_card, .mk_plan { background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); box-shadow: none; } .mk_card { padding: 24px; } .mk_card--hover:hover, .mk_campaign_card:hover, .mk_tpl_card:hover, .mk_moments_card:hover, .mk_moment_card:hover { transform: none; border-color: var(--ds-hairline-strong); box-shadow: var(--ds-shadow); } /* Icon plates: neutral surface-strong circles/squares, never a brand wash. */ .mk_card_icon, .mk_campaign_card > span, .mk_moments_icon, .mk_moment_card > span, .mk_analyzer_mock_body > div > span { color: var(--ds-ink) !important; background: var(--ds-surface-strong) !important; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); box-shadow: none !important; } .mk_feature_grid .mk_card_icon { border-radius: var(--ds-r-pill); } .mk_card_title, .mk_tpl_name, .mk_moments_body h3, .mk_campaign_card h3 { font-family: var(--ds-sans); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: 0; color: var(--ds-ink); } .mk_card_text, .mk_tpl_sub, .mk_moments_body p, .mk_campaign_card p { font-family: var(--ds-sans); font-size: 15px; font-weight: 400; line-height: 1.47; letter-spacing: 0.15px; color: var(--ds-body); } .mk_moments_card::before { background: var(--ds-primary); } .mk_moments_num, .mk_campaign_card small, .mk_moment_card small { color: var(--ds-muted-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mk_step_num { color: var(--ds-on-primary); background: var(--ds-primary); font-family: var(--ds-sans); font-weight: 500; border-radius: var(--ds-r-pill); } /* ---- Stats ---- */ .mk_stat_value, .mk_plan_amount, .mk_metric_mock strong { font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; } .mk_stat_label { font-family: var(--ds-sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ds-muted); } /* ---- Lists ---- */ .mk_list li, .mk_plan_features li, .mk_faq_body, .mk_prose { color: var(--ds-body); } .mk_list li::before { background: var(--ds-primary); box-shadow: none; } .mk_plan_features li::before { color: var(--ds-primary); } .mk_plan_features li.is_off { color: var(--ds-muted-soft); } .mk_plan_features li.is_off::before { color: var(--ds-hairline-strong); } .mk_install_link { color: var(--ds-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .mk_install_link:hover { color: var(--ds-primary-active); } .mk_install_title { font-family: var(--ds-display); font-size: clamp(28px, 3.4vw, 36px); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; color: var(--ds-ink); } /* ---- Code: the one place a deep surface is allowed ---- */ .mk_code { padding: 22px 24px; font-family: var(--ds-mono); font-size: 13.5px; color: #e7e5e4; background: var(--ds-surface-dark); border-radius: var(--ds-r-xl); } .mk_code_tok { color: var(--ds-sky); } .mk_code_attr { color: var(--ds-peach); } .mk_code_str { color: var(--ds-mint); } .mk_code_muted { color: var(--ds-on-dark-soft); } .mk_copy_btn { font-family: var(--ds-sans); font-size: 12px; font-weight: 500; color: #e7e5e4; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--ds-r-pill); } .mk_copy_btn:hover { background: rgba(255, 255, 255, 0.16); } .mk_copy_btn.is_copied { color: var(--ds-ink); background: var(--ds-mint); border-color: var(--ds-mint); } /* ---- Pricing tiers: featured tier inverts to the dark surface ---- */ .mk_plan { padding: 32px; border-radius: var(--ds-r-xl); } .mk_plan--featured { color: var(--ds-on-dark); background: var(--ds-surface-dark); border-color: var(--ds-surface-dark); box-shadow: none; } .mk_plan--featured .mk_plan_name, .mk_plan--featured .mk_plan_amount, .mk_plan--featured .mk_plan_features li { color: var(--ds-on-dark); } .mk_plan--featured .mk_plan_desc, .mk_plan--featured .mk_plan_period { color: var(--ds-on-dark-soft); } .mk_plan--featured .mk_plan_price { border-bottom-color: rgba(255, 255, 255, 0.14); } .mk_plan--featured .mk_plan_features li::before { color: var(--ds-mint); } .mk_plan--featured .mk_btn--primary { color: var(--ds-ink); background: var(--ds-on-dark); border-color: var(--ds-on-dark); } .mk_plan--featured .mk_btn--primary:hover { color: var(--ds-ink); background: var(--ds-surface-strong); border-color: var(--ds-surface-strong); } .mk_plan_flag, .pr_current_flag { padding: 4px 10px; font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; color: var(--ds-on-primary); background: var(--ds-primary); border-radius: var(--ds-r-pill); } .mk_plan_name { font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; color: var(--ds-muted); } .mk_plan_amount { font-size: 48px; } /* ---- FAQ ---- */ .mk_faq_item summary { font-family: var(--ds-sans); font-size: 18px; font-weight: 500; letter-spacing: 0.18px; color: var(--ds-ink); } .mk_faq_item summary::after { color: var(--ds-muted); font-weight: 300; } .mk_faq_item { border-bottom-color: var(--ds-hairline); } /* ---- Template showcase thumbs ---- */ .mk_tpl_thumb { background: radial-gradient(420px 220px at 20% 10%, rgba(200, 184, 224, 0.55) 0%, transparent 65%), radial-gradient(380px 220px at 88% 92%, rgba(167, 229, 211, 0.5) 0%, transparent 62%), var(--ds-canvas-soft); } .mk_tpl_ph { background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow); } .mk_tpl_ph i { background: var(--ds-hairline); } .mk_tpl_ph i:nth-child(1) { background: var(--ds-hairline-strong); } .mk_tpl_ph span { background: var(--ds-primary) !important; border-radius: var(--ds-r-pill); } .mk_tag { padding: 4px 10px; font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); } .mk_tag--premium { color: var(--ds-on-primary); background: var(--ds-primary); border-color: var(--ds-primary); } /* ---- Closing CTA band: canvas, not a dark slab ---- */ .mk_cta { padding: var(--ds-section) 56px; color: var(--ds-ink); border-radius: var(--ds-r-xxl); background: radial-gradient(620px 300px at 50% 0%, rgba(200, 184, 224, 0.5) 0%, transparent 66%), radial-gradient(520px 280px at 12% 100%, rgba(167, 229, 211, 0.42) 0%, transparent 64%), radial-gradient(520px 280px at 88% 100%, rgba(244, 197, 168, 0.38) 0%, transparent 64%), var(--ds-canvas-soft); border: 1px solid var(--ds-hairline); } .mk_cta .mk_title { color: var(--ds-ink); font-size: clamp(30px, 3.8vw, 36px); } .mk_cta .mk_lede { color: var(--ds-body); } .mk_cta .mk_btn--ghost { color: var(--ds-ink); background: transparent; border-color: var(--ds-hairline-strong); } .mk_cta .mk_btn--ghost:hover { color: var(--ds-ink); background: transparent; border-color: var(--ds-primary); } .mk_cta .mk_btn_note { color: var(--ds-muted); } @media (max-width: 767px) { .mk_cta { padding: 56px 24px; } } /* ---- Prose ---- */ .mk_prose { font-size: 16px; line-height: 1.75; letter-spacing: var(--ds-track-body); } .mk_prose h2 { font-family: var(--ds-display); font-size: 32px; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; color: var(--ds-ink); } .mk_prose h3 { font-family: var(--ds-sans); font-size: 18px; font-weight: 500; letter-spacing: 0.18px; color: var(--ds-ink); } .mk_prose a { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; } .mk_prose code, .dc_step code, .dc_platform code { font-family: var(--ds-mono); color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xs); } .mk_prose_meta { font-size: 14px; color: var(--ds-muted); } /* ---- Status pages ---- */ .mk_status_code { font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.04em; color: var(--ds-ink); opacity: 0.14; } /* ---- Dark bands become light editorial bands ---- DESIGN.md is explicit: no developer-tools dark canvas. The optimisation and platform sections invert back to canvas with pastel atmosphere. */ .mk_section--dark { color: var(--ds-body); background: radial-gradient(720px 380px at 88% 0%, rgba(167, 229, 211, 0.42) 0%, transparent 60%), radial-gradient(680px 360px at 6% 100%, rgba(200, 184, 224, 0.42) 0%, transparent 60%), var(--ds-canvas); } .mk_section--dark .mk_title { color: var(--ds-ink); } .mk_section--dark .mk_lede { color: var(--ds-body); } .mk_section--dark .mk_kicker { color: var(--ds-ink); background: var(--ds-surface-strong); border-color: var(--ds-hairline); } .mk_metric_mock, .mk_test_grid article { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; backdrop-filter: none; } .mk_metric_mock span { color: var(--ds-muted); font-size: 14px; } .mk_metric_mock strong { color: var(--ds-ink); font-size: 48px; } .mk_metric_mock small { color: var(--ds-success); font-size: 14px; } .mk_metric_mock i { background: var(--ds-surface-strong); } .mk_metric_mock b { background: var(--ds-primary); } .mk_test_grid article > span { color: var(--ds-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mk_test_grid h3 { font-family: var(--ds-sans); color: var(--ds-ink); font-size: 20px; font-weight: 500; } .mk_test_grid li { border-top-color: var(--ds-hairline-soft); color: var(--ds-body); font-size: 14px; } .mk_roadmap_note { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); color: var(--ds-body); background: var(--ds-surface-strong); font-size: 14px; } .mk_roadmap_note strong { color: var(--ds-ink); } /* Featured campaign tile + platform shell: dark inversion is kept only where DESIGN.md allows it (a single dark surface for emphasis), stripped of gradient. */ .mk_campaign_card--featured { color: var(--ds-on-dark); background: var(--ds-surface-dark); border-color: var(--ds-surface-dark); box-shadow: none; } .mk_campaign_card--featured > span { color: var(--ds-ink) !important; background: var(--ds-on-dark) !important; border-color: transparent; } .mk_campaign_card--featured small { color: var(--ds-on-dark-soft); } .mk_campaign_card--featured h3 { color: var(--ds-on-dark); font-family: var(--ds-display); font-size: 32px; font-weight: var(--ds-display-weight); } .mk_campaign_card--featured p { color: var(--ds-on-dark-soft); } .mk_platform_shell { color: var(--ds-on-dark); background: var(--ds-surface-dark); border-radius: var(--ds-r-xxl); } .mk_platform_shell .mk_title { color: var(--ds-on-dark); } .mk_platform_shell .mk_lede { color: var(--ds-on-dark-soft); } .mk_platform_shell .mk_kicker { color: var(--ds-on-dark); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); } .mk_platform_shell .mk_install_link { color: var(--ds-on-dark); } .mk_platform_grid span { color: var(--ds-on-dark); background: var(--ds-surface-dark-elevated); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ds-r-lg); font-family: var(--ds-sans); font-size: 15px; font-weight: 500; } .mk_platform_grid span:hover { transform: none; background: rgba(255, 255, 255, 0.09); } .mk_trust_rail { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-hairline); box-shadow: none; } .mk_trust_rail p { color: var(--ds-body); background: var(--ds-surface-card); font-size: 15px; } .mk_trust_rail p > span { color: var(--ds-ink); background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); font-size: 12px; font-weight: 600; } .mk_trust_rail strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 16px; font-weight: 500; } /* ---- Analyzer showcase ---- */ .mk_analyzer_shell { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: radial-gradient(620px 320px at 6% 0%, rgba(244, 197, 168, 0.45) 0%, transparent 60%), radial-gradient(620px 340px at 100% 100%, rgba(167, 229, 211, 0.48) 0%, transparent 62%), var(--ds-canvas-soft); } .mk_analyzer_mock, .mk_analyzer_mock_bar, .mk_analyzer_mock_body { border-color: var(--ds-hairline); } .mk_analyzer_mock { border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: var(--ds-shadow-lift); transform: none; } .mk_analyzer_mock_bar { background: var(--ds-canvas-soft); } .mk_analyzer_mock_bar i { background: var(--ds-hairline-strong); } .mk_analyzer_mock_bar span { color: var(--ds-muted); font-size: 12px; font-weight: 500; } .mk_analyzer_mock_body { background: var(--ds-canvas-soft); } .mk_analyzer_url, .mk_analyzer_palette, .mk_analyzer_result { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-lg); background: var(--ds-surface-card) !important; } .mk_analyzer_mock small { color: var(--ds-muted-soft); font-size: 11px; } .mk_analyzer_mock strong { color: var(--ds-ink); font-size: 13px; } .mk_analyzer_mock b { color: var(--ds-ink); background: var(--ds-mint); border-radius: var(--ds-r-pill); font-size: 10px; } .mk_analyzer_palette p i:nth-child(1) { background: var(--ds-lavender); } .mk_analyzer_palette p i:nth-child(2) { background: var(--ds-peach); } .mk_analyzer_palette p i:nth-child(3) { background: var(--ds-primary); } .mk_analyzer_palette p i:nth-child(4) { background: var(--ds-mint); } .mk_analyzer_result p { color: var(--ds-muted); font-size: 11px; } /* ---- Human story band ---- */ .mk_story_stage { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); box-shadow: none; background: radial-gradient(620px 340px at 0% 0%, rgba(244, 197, 168, 0.48) 0%, transparent 62%), radial-gradient(620px 340px at 100% 100%, rgba(167, 229, 211, 0.5) 0%, transparent 62%), var(--ds-canvas-soft); } .mk_story_overline { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); color: var(--ds-ink); background: var(--ds-surface-card); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; } .mk_story_copy > h2 { font-family: var(--ds-display); font-size: clamp(32px, 4.2vw, 48px); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; color: var(--ds-ink); } .mk_story_copy > p:not(.mk_story_overline) { color: var(--ds-body); font-size: 16px; line-height: 1.5; } .mk_story_copy blockquote { border-left: 2px solid var(--ds-primary); border-radius: 0; color: var(--ds-ink); background: transparent; font-family: var(--ds-display); font-size: 24px; font-weight: var(--ds-display-weight); line-height: 1.3; } .mk_story_copy cite { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; } .mk_moment_card h3 { font-family: var(--ds-sans); color: var(--ds-ink); font-size: 18px; font-weight: 500; letter-spacing: 0.18px; } .mk_moment_card p { color: var(--ds-body); font-size: 14px; } .mk_moment_card:nth-child(2) { margin-left: 0; } .mk_moment_card:hover { transform: none; } .mk_control_note { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); color: var(--ds-body); background: var(--ds-surface-card); font-size: 14px; } .mk_control_note > span:first-child { color: var(--ds-ink); background: var(--ds-mint); font-weight: 600; } .mk_control_note strong { color: var(--ds-ink); } .mk_feature_card_top small { color: var(--ds-muted-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mk_feature_grid .mk_card_title { font-size: 20px; } .mk_feature_grid .mk_card_text { font-size: 15px; } /* =========================================================================== 9 — Homepage hero (components/site/landing-hero.css) Was an indigo product-led panel. Becomes the editorial `hero-band`: off-white canvas, pastel atmospheric blooms behind the headline, serif display at the light weight, one ink pill. The email capture form is untouched structurally. =========================================================================== */ .hero { display: block; min-height: 0; background: var(--ds-canvas); } /* The old design floated an absolutely-positioned inset card inside a fixed-height section (min-height: 900px). The editorial hero is a flowing canvas band instead, so the inset returns to normal flow and the content defines the height. Keep this static — reverting it to `absolute` without a height on `.hero` collapses the whole banner, URL form included. */ .hero__inset { position: static; inset: auto; width: 100%; } .hero__card { height: auto; min-height: 0; border: 0; border-radius: 0; background: radial-gradient(820px 460px at 12% 4%, rgba(167, 229, 211, 0.55) 0%, transparent 60%), radial-gradient(760px 420px at 92% 0%, rgba(244, 197, 168, 0.5) 0%, transparent 58%), radial-gradient(900px 480px at 62% 100%, rgba(200, 184, 224, 0.5) 0%, transparent 62%), radial-gradient(620px 340px at 0% 92%, rgba(168, 200, 232, 0.4) 0%, transparent 62%), var(--ds-canvas); } .hero__bg-img, .hero__bg-video { opacity: 0.06; mix-blend-mode: multiply; } .hero__bg-img.is-ready { opacity: 0.06; } .hero__overlay { background: transparent !important; } .hero__content { height: auto; min-height: 0; padding: 136px 48px 96px; } .hero__inner::before { display: none; } .hero__eyebrow { margin-bottom: 24px; padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; box-shadow: none; } .hero__eyebrow span { font-size: 12px; } .hero__title { max-width: 720px; margin: 0 0 24px; color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(40px, 5.4vw, 64px); font-weight: var(--ds-display-weight); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; } .hero__subtitle { max-width: 600px; margin: 0 0 32px; color: var(--ds-body); font-family: var(--ds-sans); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: var(--ds-track-body); } /* ---- Email capture: white card, hairline, ink pill submit ---- */ .hero__glass { gap: 8px; padding: 6px; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .hero__input-wrap { color: var(--ds-muted-soft); } .hero__input { color: var(--ds-ink); caret-color: var(--ds-ink); font-family: var(--ds-sans); font-size: 16px; letter-spacing: var(--ds-track-body); } .hero__input::placeholder { color: var(--ds-muted-soft); } .hero__input:focus::placeholder { color: var(--ds-hairline-strong); } .hero__input:-webkit-autofill, .hero__input:-webkit-autofill:hover, .hero__input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ds-ink); } .hero__submit { min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; font-family: var(--ds-sans); font-size: 15px; font-weight: 500; } .hero__submit:hover { background: var(--ds-primary-active); transform: none; } .hero__note { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 14px; } /* ---- Value points / principles ---- */ .hero__value-points { color: var(--ds-body); font-size: 14px; font-weight: 400; } .hero__value-points span { width: 18px; height: 18px; color: var(--ds-ink); background: var(--ds-mint); font-size: 10px; } .hero__principles li { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); } .hero__principles li > span { width: 26px; height: 26px; border-radius: var(--ds-r-pill); color: var(--ds-ink); background: var(--ds-surface-strong); font-size: 9px; font-weight: 600; } .hero__principles strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 13px; font-weight: 500; } .hero__principles small { color: var(--ds-muted); font-size: 11px; } /* ---- Product mock ---- */ .hero__browser { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.08); transform: none; } .hero__browser-bar { border-bottom-color: var(--ds-hairline); background: var(--ds-canvas-soft); } .hero__browser-bar > span, .hero__browser-bar > span:first-child, .hero__browser-bar > span:nth-child(2), .hero__browser-bar > span:nth-child(3) { background: var(--ds-hairline-strong); } .hero__browser-bar i { color: var(--ds-muted); background: var(--ds-surface-strong); border-radius: var(--ds-r-sm); font-size: 10px; } .hero__workspace aside { border-right-color: var(--ds-hairline); background: var(--ds-canvas-soft); } .hero__workspace aside b { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 12px; font-weight: 500; } .hero__workspace aside span { border-radius: var(--ds-r-sm); color: var(--ds-muted); font-size: 10px; font-weight: 400; } .hero__workspace aside .is-active { color: var(--ds-ink); background: var(--ds-surface-strong); } .hero__canvas { background: radial-gradient(320px 200px at 20% 20%, rgba(200, 184, 224, 0.5) 0%, transparent 65%), radial-gradient(300px 200px at 85% 85%, rgba(167, 229, 211, 0.45) 0%, transparent 65%), var(--ds-canvas); } .hero__popup-mock { border-radius: var(--ds-r-xl); color: var(--ds-ink); background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-lift); } .hero__popup-mock small { color: var(--ds-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.96px; } .hero__popup-mock strong { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; } .hero__popup-mock p { color: var(--ds-body); font-size: 11px; } .hero__popup-mock button { border-radius: var(--ds-r-pill); color: var(--ds-on-primary); background: var(--ds-primary); font-family: var(--ds-sans); font-size: 9px; font-weight: 500; } .hero__popup-mock em { color: var(--ds-muted); } .hero__popup-mock em span { color: var(--ds-muted-soft); } .hero__float-card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); box-shadow: var(--ds-shadow); backdrop-filter: none; } .hero__float-card span { color: var(--ds-muted); font-size: 10px; font-weight: 500; } .hero__float-card--palette i { background: var(--ds-peach); } .hero__float-card--palette i:nth-of-type(2) { background: var(--ds-primary); } .hero__float-card--palette i:nth-of-type(3) { background: var(--ds-mint); } .hero__float-card--metric strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 12px; font-weight: 500; } .hero__float-card--moment strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 11px; font-weight: 500; } /* Logos were pinned to the bottom of the old fixed-height card; in the flowing band they sit in normal flow below the hero content. */ .hero__brands { position: static; inset: auto; transform: none; max-width: 1240px; margin: 0 auto; padding: 0 48px 56px; } .hero__logo { filter: grayscale(1); opacity: 0.4; } /* ---- The animated shine ring is a neon device; the editorial system has no glow, so it is reduced to a static hairline. ---- */ .shine-border-glow-orb, .shine-border-light { display: none; } .shine-border-frame { padding: 0; border: 1px solid var(--ds-hairline); -webkit-mask: none; mask: none; } @media (max-width: 1100px) { .hero__content { padding: 128px 40px 88px; } } @media (max-width: 639px) { .hero__content { padding: 112px 18px 64px; } .hero__title { font-size: 32px; } .hero__subtitle { font-size: 16px; } } /* =========================================================================== 10 — Product & template gallery (app/(site)/products/products.css) =========================================================================== */ .pp { background: var(--ds-canvas); color: var(--ds-body); font-family: var(--ds-sans); } .pp__hero { padding: 14rem 2rem 6rem; border-bottom: 1px solid var(--ds-hairline); background: radial-gradient(760px 400px at 16% 0%, rgba(167, 229, 211, 0.5) 0%, transparent 62%), radial-gradient(700px 380px at 86% 6%, rgba(200, 184, 224, 0.45) 0%, transparent 60%), var(--ds-canvas); } .pp__hero-badge { padding: 4px 10px; border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-pill); background: var(--ds-surface-strong) !important; color: var(--ds-ink) !important; font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pp__hero-title, .pt-market__heading h2, .pp__section-heading h2 { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3.6rem, 5.4vw, 6.4rem); font-weight: var(--ds-display-weight); line-height: 1.05; letter-spacing: -0.03em; } .pt-market__heading h2, .pp__section-heading h2 { font-size: clamp(3rem, 3.8vw, 4.8rem); line-height: 1.08; letter-spacing: -0.02em; } .pp__hero-word { color: var(--ds-ink) !important; } .pp__hero-body, .pt-market__intro, .pp__section-heading p:last-child { color: var(--ds-body) !important; font-family: var(--ds-sans); font-size: 1.6rem; font-weight: 400; line-height: 1.5; letter-spacing: var(--ds-track-body); } /* ---- Stat cards ---- */ .pp__stat-card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .pp__stat-card:hover { border-color: var(--ds-hairline-strong); background: var(--ds-surface-card); box-shadow: var(--ds-shadow); transform: none; } .pp__stat-icon { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); } .pp__stat-value { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); font-size: 3.2rem; letter-spacing: -0.02em; } .pp__stat-label { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 400; letter-spacing: 0; text-transform: none; } /* ---- Toolbar, search, filter pills ---- */ .pp__toolbar, .pt-market__toolbar { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .pp__search, .pt-market__search input { height: 4.4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; font-weight: 400; letter-spacing: var(--ds-track-body); } .pp__search::placeholder, .pt-market__search input::placeholder { color: var(--ds-muted-soft); } .pp__search:focus, .pt-market__search input:focus { border-width: 2px; border-color: var(--ds-ink); background: var(--ds-surface-card); box-shadow: none; } .pp__search-icon, .pt-market__search svg { color: var(--ds-muted-soft); } .pp__pill, .pt-market__categories button, .pt-market__categories--goals button { height: 3.6rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; letter-spacing: 0; } .pp__pill:hover:not(.pp__pill--active), .pt-market__categories button:hover, .pt-market__categories--goals button:hover { border-color: var(--ds-primary); background: transparent; color: var(--ds-ink); transform: none; } .pp__pill--active, .pt-market__categories button.is-active, .pt-market__categories--goals button.is-active { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .pp__count, .pt-card__meta { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 400; } .pp__count strong { color: var(--ds-ink); font-weight: 500; } .pt-market__total, .pp__section-count, .tg_section_count { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } /* ---- Product / template cards ---- */ .product-card, .pt-card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; color: var(--ds-body); font-family: var(--ds-sans); } .product-card:hover, .pt-card:hover { border-color: var(--ds-hairline-strong); box-shadow: var(--ds-shadow-lift); transform: translateY(-2px); } .product-card:hover .product-button { box-shadow: none; filter: none; transform: none; } .product-badge, .pt-card__badge { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; box-shadow: none; backdrop-filter: none; } .product-badge--new { background: var(--ds-mint); border-color: var(--ds-mint); color: var(--ds-ink); } .pt-card__badge--premium { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); } .product-image, .pt-card__visual { background: radial-gradient(380px 220px at 22% 14%, rgba(200, 184, 224, 0.42) 0%, transparent 66%), radial-gradient(360px 220px at 84% 88%, rgba(167, 229, 211, 0.4) 0%, transparent 64%), var(--ds-canvas-soft); } .pt-card__visual { border-bottom-color: var(--ds-hairline); } .product-image__empty { color: var(--ds-hairline-strong); } .product-category, .pt-card__cat { color: var(--ds-muted) !important; font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .product-title, .pt-card__title { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 2rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; } .product-description p, .pt-card__description { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.5rem; line-height: 1.47; letter-spacing: 0.15px; } .feature, .pt-card__category { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; } .price-was { color: var(--ds-muted-soft); font-size: 1.3rem; } .price-now { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .product-button, .pt-card__preview { padding: 1rem 2rem; border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill); background: var(--ds-primary) !important; color: var(--ds-on-primary); box-shadow: none; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .product-button:hover, .pt-card__preview:hover { border-color: var(--ds-primary-active); background: var(--ds-primary-active) !important; } .product-meta { border-top-color: var(--ds-hairline-soft); font-size: 1.3rem; } .product-rating { color: var(--ds-body); } .product-rating strong { color: var(--ds-ink); font-weight: 500; } .rating-count { color: var(--ds-muted-soft); } .product-stock { color: var(--ds-success); font-weight: 500; } .product-stock--off { color: var(--ds-muted); } .pt-card__product { color: var(--ds-ink); } .pt-card__cta { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .pt-card__cta:hover { color: var(--ds-primary-active); text-decoration: underline !important; text-underline-offset: 3px; } .pt-card__mock { border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-lift); } .pt-card__mock-content strong { font-family: var(--ds-display); font-weight: var(--ds-display-weight); font-size: 2rem; } .pt-card__mock-content i { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .pt-card__mock-mode, .pt-card__mock-features span { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } /* ---- Empty states ---- */ .pp__empty-icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-muted); } .pp__empty-title, .pt-market__empty h3 { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); letter-spacing: 0; } .pp__empty-text, .pt-market__empty p { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.6rem; } .pp__empty-reset { height: 4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .pp__empty-reset:hover { border-color: var(--ds-primary); background: transparent; color: var(--ds-ink); } .pt-market__empty { border: 1px dashed var(--ds-hairline-strong); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); } /* =========================================================================== 11 — Template gallery (app/(site)/products/[productSlug]/template-gallery.css) The page had three near-black purple bands (hero, flow showcase, closing CTA). DESIGN.md rules out the dark dev-tools canvas, so all three become off-white editorial bands carrying pastel atmosphere. Note: the hero CTA, card CTA and popup mock button receive an inline `background: product.accent` from the database. DESIGN.md is explicit that the ink pill is the only CTA colour, so those inline accents are overridden here. Delete the three `!important` background rules below to hand the per-product accent back to the buttons. =========================================================================== */ .tg_page { background: var(--ds-canvas); } .tg_page .tg_hero { padding: 14rem 0 6rem; color: var(--ds-body); border-bottom: 1px solid var(--ds-hairline); background: radial-gradient(820px 440px at 78% 10%, rgba(200, 184, 224, 0.5) 0%, transparent 60%), radial-gradient(700px 400px at 8% 0%, rgba(167, 229, 211, 0.45) 0%, transparent 60%), radial-gradient(620px 340px at 40% 104%, rgba(232, 184, 196, 0.34) 0%, transparent 62%), var(--ds-canvas); } .tg_hero_orb { display: none; } .tg_page .tg_back { color: var(--ds-body); background: var(--ds-surface-card); border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); backdrop-filter: none; font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .tg_page .tg_back:hover { color: var(--ds-ink); background: var(--ds-surface-card); border-color: var(--ds-primary); } .tg_page .tg_eyebrow { padding: 4px 10px; color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; } .tg_eyebrow i { background: var(--ds-success); box-shadow: none; } .tg_kicker, .tg_page .tg_info_eyebrow, .tg_page .tg_flow_eyebrow, .tg_bottom_cta p { color: var(--ds-muted) !important; font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .tg_page .tg_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(4rem, 5.2vw, 6.4rem); font-weight: var(--ds-display-weight); line-height: 1.05; letter-spacing: -0.03em; } .tg_page .tg_tagline { color: var(--ds-body-strong); font-family: var(--ds-sans); font-size: 1.8rem; font-weight: 500; letter-spacing: 0.18px; } .tg_page .tg_desc, .tg_page .tg_product_info_head p, .tg_page .tg_section_desc, .tg_page .tg_feature_card p, .tg_flow_description, .tg_page .tg_card_desc, .tg_page .tg_empty p { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.6rem; line-height: 1.5; letter-spacing: var(--ds-track-body); } /* ---- Hero CTAs ---- */ .tg_primary_cta, .tg_secondary_cta { min-height: 4rem; padding: 10px 20px; border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .tg_primary_cta { color: var(--ds-on-primary) !important; background: var(--ds-primary) !important; border: 1px solid var(--ds-primary); box-shadow: none; } .tg_primary_cta:hover { background: var(--ds-primary-active) !important; box-shadow: none; transform: none; } .tg_secondary_cta { color: var(--ds-ink) !important; background: transparent; border: 1px solid var(--ds-hairline-strong); } .tg_secondary_cta:hover { background: transparent; border-color: var(--ds-primary); } .tg_hero_proof { color: var(--ds-muted); font-size: 1.4rem; } .tg_hero_proof b { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); } /* ---- Hero browser mock ---- */ .tg_browser { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.08); transform: none; } .tg_browser_bar { color: var(--ds-muted); background: var(--ds-canvas-soft); border-bottom-color: var(--ds-hairline); } .tg_browser_dots i, .tg_browser_dots i:first-child, .tg_browser_dots i:nth-child(2), .tg_browser_dots i:last-child { background: var(--ds-hairline-strong); } .tg_browser_url { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-sm); background: var(--ds-surface-card); color: var(--ds-muted); } .tg_browser_canvas { background: radial-gradient(360px 220px at 20% 18%, rgba(200, 184, 224, 0.45) 0%, transparent 66%), radial-gradient(340px 220px at 84% 86%, rgba(167, 229, 211, 0.42) 0%, transparent 64%), var(--ds-canvas); } .tg_site_skeleton i, .tg_site_skeleton i:nth-child(2), .tg_site_skeleton i:last-child { background: var(--ds-hairline); border-radius: var(--ds-r-md); } .tg_mock_popup { border-radius: var(--ds-r-xl); background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-lift); } .tg_mock_art { color: var(--ds-ink); background: radial-gradient(circle at 25% 20%, var(--ds-peach) 0%, transparent 55%), linear-gradient(145deg, var(--ds-lavender), var(--ds-mint)); } .tg_mock_art span { font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.03em; } .tg_mock_art small { font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; } .tg_mock_content { color: var(--ds-ink); } .tg_mock_label { color: var(--ds-muted); font-family: var(--ds-sans); font-weight: 600; letter-spacing: 0.96px; } .tg_mock_content strong { font-family: var(--ds-display); font-weight: var(--ds-display-weight); font-size: 2.4rem; } .tg_mock_content p { color: var(--ds-body); } .tg_mock_input { color: var(--ds-muted-soft); border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); } .tg_mock_button { color: var(--ds-on-primary); background: var(--ds-primary) !important; border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .tg_mock_close { color: var(--ds-muted-soft); } .tg_float_card { color: var(--ds-ink); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); box-shadow: var(--ds-shadow); backdrop-filter: none; } .tg_float_card--conversion small { color: var(--ds-muted); } .tg_float_card--conversion b { color: var(--ds-success); font-family: var(--ds-sans); font-weight: 500; } .tg_float_icon { color: var(--ds-ink); background: var(--ds-mint); border-radius: var(--ds-r-pill); font-weight: 600; } .tg_float_card--live { font-family: var(--ds-sans); font-weight: 500; } .tg_float_card--live i { background: var(--ds-success); box-shadow: none; } /* ---- Trigger strip ---- */ .tg_page .tg_trigger_strip { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); backdrop-filter: none; } .tg_page .tg_trigger_card { color: var(--ds-body); border: 1px solid var(--ds-hairline-soft); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); } .tg_page .tg_trigger_card span { color: var(--ds-ink); background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); } .tg_page .tg_trigger_card strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } /* ---- Feature grid ---- */ .tg_page .tg_product_info { background: var(--ds-canvas); } .tg_page .tg_product_info_head h2, .tg_page .tg_section_title, .tg_page .tg_flow_title, .tg_bottom_cta h2 { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3rem, 4.2vw, 4.8rem); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; } .tg_page .tg_feature_card, .tg_feature_card--1, .tg_feature_card--5, .tg_feature_card--2, .tg_feature_card--6 { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .tg_page .tg_feature_card:hover { transform: none; border-color: var(--ds-hairline-strong); box-shadow: var(--ds-shadow); } .tg_feature_number { color: var(--ds-muted-soft); font-family: var(--ds-mono); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.96px; } .tg_page .tg_feature_card h3 { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 2rem; font-weight: 500; letter-spacing: 0; } .tg_feature_arrow { color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); } /* ---- Flow showcase: light editorial panel ---- */ .tg_page .tg_flow_showcase { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: radial-gradient(680px 340px at 92% 0%, rgba(200, 184, 224, 0.4) 0%, transparent 62%), radial-gradient(560px 320px at 4% 100%, rgba(167, 229, 211, 0.4) 0%, transparent 62%), var(--ds-canvas-soft); box-shadow: none; } .tg_page .tg_flow_tab { min-height: 4rem; color: var(--ds-body); border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .tg_page .tg_flow_tab span { color: var(--ds-ink); background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); } .tg_page .tg_flow_tab.is-active { color: var(--ds-on-primary); border-color: var(--ds-primary); background: var(--ds-primary); } .tg_page .tg_flow_tab.is-active span { color: var(--ds-ink); background: var(--ds-on-primary); } .tg_flow_frame { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); } .tg_flow_frame_bar { color: var(--ds-muted); background: var(--ds-canvas-soft); border-bottom-color: var(--ds-hairline); } .tg_flow_frame-bar i, .tg_flow_frame_bar i { background: var(--ds-hairline-strong); } .tg_flow_frame_bar b { color: var(--ds-ink); font-weight: 500; } .tg_flow_frame_bar em { color: var(--ds-success); } /* ---- Template grid ---- */ .tg_page .tg_section { background: var(--ds-canvas-soft); } .tg_filters button { color: var(--ds-body); border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; text-transform: none; } .tg_filters button span { color: var(--ds-muted); background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); } .tg_filters button:hover { color: var(--ds-ink); border-color: var(--ds-primary); background: transparent; } .tg_filters button.is-active { color: var(--ds-on-primary); border-color: var(--ds-primary); background: var(--ds-primary); } .tg_filters button.is-active span { color: var(--ds-ink); background: var(--ds-on-primary); } .tg_page .tg_card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .tg_page .tg_card:hover { transform: translateY(-2px); border-color: var(--ds-hairline-strong); box-shadow: var(--ds-shadow-lift); } .tg_page .tg_card_preview_wrapper, .tg_page .tg_card_preview { border-radius: var(--ds-r-lg); } .tg_page .tg_card_preview_btn { border-radius: var(--ds-r-pill); background: var(--ds-primary); box-shadow: none; font-family: var(--ds-sans); font-weight: 500; } .tg_page .tg_card_pill, .tg_page .tg_card_pill--free { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); color: var(--ds-ink); background: var(--ds-surface-card); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .tg_page .tg_card_pill { color: var(--ds-on-primary); background: var(--ds-primary); border-color: var(--ds-primary); } .tg_card_meta { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 500; text-transform: none; } .tg_page .tg_card_cat { color: var(--ds-muted); } .tg_page .tg_card_title { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 2rem; font-weight: 500; letter-spacing: 0; } .tg_page .tg_card_action { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .tg_page .tg_card_action:hover { color: var(--ds-ink); } .tg_page .tg_card_cta { min-height: 4rem; padding: 10px 20px; border-radius: var(--ds-r-pill); color: var(--ds-on-primary) !important; background: var(--ds-primary) !important; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .tg_page .tg_card_cta:hover { background: var(--ds-primary-active) !important; filter: none; transform: none; } .tg_page .tg_empty { border: 1px dashed var(--ds-hairline-strong); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); } .tg_page .tg_empty > span { color: var(--ds-ink); background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); } .tg_page .tg_empty h3 { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); } /* ---- Closing CTA band ---- */ .tg_bottom_cta_inner { color: var(--ds-ink); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: radial-gradient(620px 300px at 80% 0%, rgba(200, 184, 224, 0.5) 0%, transparent 62%), radial-gradient(520px 280px at 10% 100%, rgba(244, 197, 168, 0.42) 0%, transparent 62%), var(--ds-canvas-soft); } .tg_bottom_cta_inner::after { display: none; } .tg_bottom_spark { color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); } .tg_bottom_link { min-height: 4rem; padding: 10px 20px; border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .tg_bottom_link:hover { background: var(--ds-primary-active); color: var(--ds-on-primary); } /* =========================================================================== 12 — My popups hub (app/(site)/my-products/my-products.css) =========================================================================== */ .mpop_hero { background: radial-gradient(760px 380px at 14% 0%, rgba(167, 229, 211, 0.42) 0%, transparent 62%), radial-gradient(680px 360px at 88% 8%, rgba(200, 184, 224, 0.4) 0%, transparent 60%), var(--ds-canvas); border-bottom: 1px solid var(--ds-hairline); } .mpop_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3.2rem, 4.4vw, 4.8rem); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; } .mpop_desc, .mpop_empty p, .mpop_group_head p { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.6rem; line-height: 1.5; letter-spacing: var(--ds-track-body); } .mpop_back_link { color: var(--ds-body); font-family: var(--ds-sans); font-weight: 500; } .mpop_back_link:hover { color: var(--ds-ink); } .mpop_section { background: var(--ds-canvas); } .mpop_empty, .mpop_card, .mpop_hub_card, .mpop_group_head--panel, .mpop_workspace_panel, .mpop_group_empty, .mpop_rec_card, .mpop_review_export, .mpop_feedback_link_box, .mpop_feedback_responses .mpop_review_card { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-xl); background: var(--ds-surface-card) !important; box-shadow: none !important; } .mpop_card:hover, .mpop_hub_card:hover, .mpop_hub_card.is-open, .mpop_rec_card:hover { transform: none; border-color: var(--ds-hairline-strong) !important; box-shadow: var(--ds-shadow) !important; } .mpop_hub_card::before, .mpop_hub_card--feedback::before { background: radial-gradient(420px 260px at 88% 12%, rgba(167, 229, 211, 0.34) 0%, transparent 60%), radial-gradient(420px 260px at 8% 96%, rgba(200, 184, 224, 0.3) 0%, transparent 60%) !important; } .mpop_hub_card:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; } .mpop_empty h2, .mpop_group_head h2 { color: var(--ds-ink); font-family: var(--ds-display); font-size: 3.2rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; text-transform: none; } .mpop_empty_illu { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-muted); } .mpop_hub_badge, .mpop_test_badge, .mpop_status, .mpop_status--published, .mpop_status--paused, .mpop_status--draft { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mpop_status--published { background: var(--ds-mint); border-color: var(--ds-mint); } .mpop_status--paused { background: var(--ds-peach); border-color: var(--ds-peach); } .mpop_hub_card > strong { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .mpop_hub_card > small, .mpop_hub_metrics small, .mpop_metric_label, .mpop_card_meta, .mpop_feedback_target span, .mpop_feedback_link_box > span, .mpop_feedback_response_head span, .mpop_review_export p { color: var(--ds-muted); font-family: var(--ds-sans); } .mpop_metric_label { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mpop_metric_value, .mpop_hub_metrics b { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .mpop_card_name, .mpop_feedback_target strong, .mpop_feedback_response_head strong, .mpop_review_export h3, .mpop_rec_body h3 { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; letter-spacing: 0; } .mpop_card_meta code { background: var(--ds-surface-strong); border-radius: var(--ds-r-xs); font-family: var(--ds-mono); color: var(--ds-ink); } /* ---- Buttons ---- */ .mpop_btn { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .mpop_btn:hover:not(:disabled) { border-color: var(--ds-primary); background: transparent; color: var(--ds-ink); } .mpop_btn--primary, .mpop_empty_cta, .mpop_hub_action { border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; font-family: var(--ds-sans); font-weight: 500; } .mpop_btn--primary:hover:not(:disabled), .mpop_empty_cta:hover, .mpop_hub_action:hover { border-color: var(--ds-primary-active); background: var(--ds-primary-active); color: var(--ds-on-primary); transform: none; } .mpop_btn--danger { border-color: var(--ds-hairline-strong); background: transparent; color: var(--ds-error); } .mpop_btn--danger:hover:not(:disabled) { border-color: var(--ds-error); background: rgba(220, 38, 38, 0.05); color: var(--ds-error); } .mpop_snippet { background: var(--ds-surface-dark); border-radius: var(--ds-r-xl); font-family: var(--ds-mono); color: #e7e5e4; } /* ---- Card preview / feedback mocks ---- */ .mpop_card_preview, .mpop_feedback_preview, .mpop_hub_art { background: radial-gradient(360px 220px at 22% 16%, rgba(200, 184, 224, 0.4) 0%, transparent 64%), radial-gradient(340px 220px at 84% 88%, rgba(167, 229, 211, 0.38) 0%, transparent 62%), var(--ds-canvas-soft) !important; } .mpop_card_preview_title { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); } .mpop_card_preview_cta { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .mpop_feedback_bubble { border-radius: var(--ds-r-lg); background: var(--ds-surface-card); border: 1px solid var(--ds-hairline); color: var(--ds-body); } .mpop_feedback_bubble--user { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); } .mpop_feedback_stars { color: var(--ds-peach); } .mpop_feedback_link_box a { color: var(--ds-ink); font-family: var(--ds-mono); } .mpop_feedback_link_box a:hover { color: var(--ds-primary-active); } /* ---- Export controls ---- */ .mpop_export_modes { background: var(--ds-surface-strong); border-radius: var(--ds-r-pill); } .mpop_export_modes button { border-radius: var(--ds-r-pill); color: var(--ds-body); font-family: var(--ds-sans); font-weight: 500; } .mpop_export_modes button.is-active { background: var(--ds-surface-card); box-shadow: var(--ds-shadow); color: var(--ds-ink); } .mpop_export_filters label { color: var(--ds-body); font-family: var(--ds-sans); } .mpop_export_filters input, .mpop_export_filters select { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); } .mpop_review_state, .mpop_review_state.is-complete, .mpop_review_state.is-partial { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .mpop_rec_icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); } .mpop_recs_head h2 { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); } /* =========================================================================== 13 — Authentication pages (app/(site)/(auth-pages)/auth.css) The coral/blue accent and animated blobs become the five pastel atmospheric orbs; the split panel becomes a hairline white card on canvas. =========================================================================== */ .auth_section { background: var(--ds-canvas); } .auth_blob { filter: blur(72px); } .auth_blob--a { background: radial-gradient(circle, var(--ds-mint) 0%, transparent 70%); } .auth_blob--b { background: radial-gradient(circle, var(--ds-lavender) 0%, transparent 70%); } .auth_blob--c { background: radial-gradient(circle, var(--ds-peach) 0%, transparent 70%); } .auth_blob--d { background: radial-gradient(circle, var(--ds-sky) 0%, transparent 70%); } .auth_bg_pattern { display: none; } .auth_shell { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: var(--ds-surface-card); box-shadow: var(--ds-shadow-lift); overflow: hidden; } /* Intro half becomes a gradient-orb card: soft pastel bloom, ink type. */ .auth_intro { color: var(--ds-ink); background: radial-gradient(620px 340px at 8% 4%, rgba(167, 229, 211, 0.6) 0%, transparent 62%), radial-gradient(560px 320px at 96% 96%, rgba(200, 184, 224, 0.55) 0%, transparent 62%), var(--ds-canvas-soft); } .auth_intro::before, .auth_intro::after { display: none; } .auth_intro_badge { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); } .auth_intro_badge_dot { background: var(--ds-success); } .auth_intro_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3.2rem, 3.8vw, 4.8rem); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; } .auth_intro_word, .auth_intro_word--gradient, .auth_intro_word--soft { color: var(--ds-ink); background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; animation: none; } .auth_intro_word--underline { border-bottom: 1px solid var(--ds-hairline-strong); } .auth_intro_text, .auth_intro_feature { color: var(--ds-body); font-family: var(--ds-sans); } .auth_intro_check { border-radius: var(--ds-r-pill); background: var(--ds-mint); color: var(--ds-ink); } .auth_intro_cta { border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); font-family: var(--ds-sans); font-weight: 500; box-shadow: none; } .auth_intro_cta:hover { background: var(--ds-primary-active); border-color: var(--ds-primary-active); color: var(--ds-on-primary); } .auth_intro_stat { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); } .auth_intro_stat_value { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); } .auth_intro_stat_label { color: var(--ds-muted); font-family: var(--ds-sans); } /* ---- Form half ---- */ .auth_form_panel { background: var(--ds-surface-card); } .auth_brand { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .auth_form_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(2.8rem, 3vw, 3.6rem); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; background: none; -webkit-text-fill-color: currentColor; } .auth_form_subtitle { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.6rem; } .auth_input { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; letter-spacing: var(--ds-track-body); } .auth_input:hover { border-color: var(--ds-muted-soft); background: var(--ds-surface-card); } .auth_input:focus { border-width: 2px; border-color: var(--ds-ink); background: var(--ds-surface-card); box-shadow: none; } .auth_label { color: var(--ds-muted); font-family: var(--ds-sans); } .auth_input_underline { background: var(--ds-primary); } .auth_password_toggle { color: var(--ds-muted); border-radius: var(--ds-r-pill); } .auth_password_toggle:hover { color: var(--ds-ink); background: var(--ds-surface-strong); } .auth_field_hint { color: var(--ds-muted-soft); } .auth_strength_seg { border-radius: var(--ds-r-pill); background: var(--ds-hairline); } .auth_strength_seg.is-on-1 { background: var(--ds-error); } .auth_strength_seg.is-on-2 { background: var(--ds-peach); } .auth_strength_seg.is-on-3 { background: var(--ds-sky); } .auth_strength_seg.is-on-4 { background: var(--ds-success); } .auth_strength_text { color: var(--ds-muted); font-family: var(--ds-sans); } .auth_strength_text strong { color: var(--ds-ink); font-weight: 500; } .auth_check input[type="checkbox"] { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-xs); } .auth_check input[type="checkbox"]:hover { border-color: var(--ds-muted); } .auth_check input[type="checkbox"]:checked { background: var(--ds-primary); border-color: var(--ds-primary); } .auth_link, .auth_footer_text a { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .auth_link:hover, .auth_footer_text a:hover { color: var(--ds-primary-active); } .auth_submit { height: 4.8rem; border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill) !important; background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .auth_submit::before, .auth_submit::after, .auth_submit_glow { display: none; } .auth_submit:hover { background: var(--ds-primary-active); border-color: var(--ds-primary-active); } .auth_divider span { color: var(--ds-muted); background: var(--ds-surface-card); font-family: var(--ds-sans); font-size: 1.3rem; } .auth_divider::before { background: var(--ds-hairline); } .auth_social { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .auth_social::before { display: none; } .auth_social:hover:not(:disabled) { border-color: var(--ds-primary); background: var(--ds-surface-card); box-shadow: none; transform: none; } .auth_alert { border-radius: var(--ds-r-md); font-family: var(--ds-sans); font-size: 1.4rem; } .auth_alert--error { color: var(--ds-error); background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.2); } .auth_alert--success { color: var(--ds-success); background: rgba(22, 163, 74, 0.06); border: 1px solid rgba(22, 163, 74, 0.2); } .auth_footer_text { color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.4rem; } /* =========================================================================== 14 — Account section (app/(site)/account/account.css) =========================================================================== */ .acct_section { background: radial-gradient(760px 400px at 0% -6%, rgba(167, 229, 211, 0.34) 0%, transparent 60%), radial-gradient(680px 380px at 100% 106%, rgba(200, 184, 224, 0.32) 0%, transparent 60%), var(--ds-canvas); } .acct_sidebar, .acct_panel, .acct_stat_card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .acct_user { border-bottom-color: var(--ds-hairline-soft); } .acct_user_name { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .acct_user_email, .acct_subtitle, .acct_panel_desc, .acct_empty_text { color: var(--ds-muted); font-family: var(--ds-sans); } .acct_nav_link { color: var(--ds-body); border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 400; } .acct_nav_link:hover { background: var(--ds-surface-strong); color: var(--ds-ink); } .acct_nav_link.active { background: var(--ds-primary); color: var(--ds-on-primary); font-weight: 500; } .acct_nav_link--danger { color: var(--ds-error); border-top-color: var(--ds-hairline-soft); border-radius: 0; } .acct_nav_link--danger:hover { background: rgba(220, 38, 38, 0.05); color: var(--ds-error); } .acct_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3.2rem, 3.6vw, 4.8rem); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; text-transform: none; } .acct_panel_title, .acct_empty_title { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 2rem; font-weight: 500; letter-spacing: 0; } .acct_field_label, .acct_stat_label { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; } .acct_field_value { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 400; } .acct_field_value--muted { color: var(--ds-muted-soft); } .acct_input { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; letter-spacing: var(--ds-track-body); } .acct_input:hover { border-color: var(--ds-muted-soft); } .acct_input:focus { border-width: 2px; border-color: var(--ds-ink); box-shadow: none; } .acct_input:disabled { background: var(--ds-surface-strong); color: var(--ds-muted-soft); } .acct_btn_secondary { height: 4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .acct_btn_secondary:hover { border-color: var(--ds-primary); background: transparent; color: var(--ds-ink); } .acct_btn_danger { height: 4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-error); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .acct_btn_danger:hover { border-color: var(--ds-error); background: rgba(220, 38, 38, 0.05); } .acct_alert { border-radius: var(--ds-r-md); font-family: var(--ds-sans); font-size: 1.4rem; } .acct_alert--error { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.2); color: var(--ds-error); } .acct_alert--success { background: rgba(22, 163, 74, 0.06); border: 1px solid rgba(22, 163, 74, 0.2); color: var(--ds-success); } .acct_alert--info { background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); color: var(--ds-body); } .acct_stat_value { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; } .acct_empty_icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-muted); } /* =========================================================================== 15 — Docs & pricing page extras =========================================================================== */ .dc_step, .dc_platform, .pr_table_wrap { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .dc_step a, .pr_note a { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 3px; } .pr_note { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 14px; } .pr_plan--current { border-color: var(--ds-primary); } .pr_table thead th { color: var(--ds-muted); background: var(--ds-canvas-soft); border-bottom-color: var(--ds-hairline); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; } .pr_group_row th { color: var(--ds-ink); background: var(--ds-surface-strong); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; } .pr_table tbody th[scope="row"] { color: var(--ds-body); border-top-color: var(--ds-hairline-soft); font-family: var(--ds-sans); font-size: 15px; font-weight: 400; } .pr_table tbody td { border-top-color: var(--ds-hairline-soft); } .pr_table tbody tr:hover th[scope="row"], .pr_table tbody tr:hover td { background: var(--ds-canvas-soft); } .pr_yes { color: var(--ds-on-primary); background: var(--ds-primary); border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .pr_no { color: var(--ds-hairline-strong); } .pr_cell_text { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 14px; font-weight: 500; } /* =========================================================================== 16 — Website analyzer (components/site/brand-analyzer.css) =========================================================================== */ .ba_page { --ba-ink: var(--ds-ink); --ba-muted: var(--ds-muted); --ba-line: var(--ds-hairline); --ba-purple: var(--ds-primary); --ba-teal: var(--ds-success); background: var(--ds-canvas); color: var(--ds-body); font-family: var(--ds-sans); } .ba_hero { padding: 148px 20px 96px; border-bottom: 1px solid var(--ds-hairline); background: radial-gradient(760px 400px at 50% 0%, rgba(200, 184, 224, 0.5) 0%, transparent 60%), radial-gradient(620px 340px at 8% 30%, rgba(167, 229, 211, 0.42) 0%, transparent 62%), radial-gradient(620px 340px at 94% 16%, rgba(244, 197, 168, 0.4) 0%, transparent 62%), var(--ds-canvas); } .ba_hero::before { display: none; } .ba_orb { display: none; } .ba_badge { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); box-shadow: none; } .ba_badge, .ba_kicker { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; } .ba_badge span, .ba_confidence i { background: var(--ds-success); box-shadow: none; } .ba_hero h1 { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(40px, 5.6vw, 64px); font-weight: var(--ds-display-weight); line-height: 1.05; letter-spacing: -0.03em; } .ba_hero h1 em { font-style: italic; color: inherit; } .ba_intro { color: var(--ds-body); font-family: var(--ds-sans); font-size: 16px; line-height: 1.5; letter-spacing: var(--ds-track-body); } .ba_form { padding: 6px; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); box-shadow: none; } .ba_form_icon { color: var(--ds-muted-soft); } .ba_form input { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 16px; letter-spacing: var(--ds-track-body); } .ba_form input::placeholder { color: var(--ds-muted-soft); } .ba_form button { height: 40px; padding: 0 20px; border-radius: var(--ds-r-pill) !important; color: var(--ds-on-primary); background: var(--ds-primary); box-shadow: none; font-family: var(--ds-sans); font-size: 15px; font-weight: 500; } .ba_form button:hover:not(:disabled) { background: var(--ds-primary-active); } .ba_trustline { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 14px; } .ba_trustline span::first-letter { color: var(--ds-success); } .ba_error { border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--ds-r-md); color: var(--ds-error); background: rgba(220, 38, 38, 0.06); font-family: var(--ds-sans); } .ba_loading { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); } .ba_loading_track { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); } .ba_loading_track i { background: var(--ds-primary); } .ba_loading strong { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .ba_results { background: var(--ds-canvas); } .ba_library { background: var(--ds-canvas-soft); } .ba_result_head h2, .ba_recommend_head h2, .ba_library_head h2, .ba_handoff h2 { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(30px, 3.8vw, 36px); font-weight: var(--ds-display-weight); line-height: 1.17; letter-spacing: -0.01em; } .ba_result_head > div > p:last-child, .ba_library_head > p, .ba_brand_description, .ba_use_card p, .ba_recommend_card div > span { color: var(--ds-body); font-family: var(--ds-sans); } .ba_confidence { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); color: var(--ds-ink); background: var(--ds-surface-strong); font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .ba_brand_card, .ba_preview_card, .ba_recommend_card, .ba_use_card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } .ba_recommend_card:hover, .ba_use_card:hover { transform: none; border-color: var(--ds-hairline-strong); box-shadow: var(--ds-shadow); } .ba_logo { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); } .ba_logo span { font-family: var(--ds-display); font-weight: var(--ds-display-weight); } .ba_brand_identity h3, .ba_recommend_card h3, .ba_use_card h3, .ba_popup_mock h3 { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; letter-spacing: 0; } .ba_brand_identity div:last-child span, .ba_attributes span, .ba_recommend_card p, .ba_use_card small, .ba_recommend_num, .ba_handoff > div > span, .ba_popup_mock small { color: var(--ds-muted) !important; font-family: var(--ds-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .ba_attributes { border-top-color: var(--ds-hairline-soft); border-bottom-color: var(--ds-hairline-soft); } .ba_attributes strong { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .ba_palette i { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-md); } .ba_palette span { color: var(--ds-muted); } .ba_palette code { color: var(--ds-body); font-family: var(--ds-mono); } .ba_browser_bar { border-bottom-color: var(--ds-hairline); background: var(--ds-canvas-soft); } .ba_browser_bar i, .ba_browser_bar i:first-child, .ba_browser_bar i:nth-child(2), .ba_browser_bar i:last-child { background: var(--ds-hairline-strong); } .ba_browser_bar p { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-sm); color: var(--ds-muted); background: var(--ds-surface-card); } .ba_browser_bar b { color: var(--ds-muted-soft); } .ba_site_mock { overflow: hidden; } /* Live site render behind the popup mock. The frame is given a viewport twice the card width and scaled back by half, so the target site lays out as a desktop page rather than collapsing to its mobile breakpoint. */ .ba_site_frame { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: 0 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; background: var(--ds-surface-card); } /* Screenshot fallback for sites that refuse framing. Anchored to the top so the header and hero read as a real page rather than a stretched thumbnail. */ .ba_site_shot { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.4s ease; } .ba_site_mock[data-site-loaded="true"] .ba_site_frame, .ba_site_mock[data-site-loaded="true"] .ba_site_shot { opacity: 1; } /* Skeleton is the loading / embedding-blocked fallback. */ .ba_site_mock[data-site-loaded="true"] .ba_mock_nav, .ba_site_mock[data-site-loaded="true"] .ba_mock_copy { opacity: 0; transition: opacity 0.3s ease; } .ba_mock_nav strong { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .ba_mock_nav span, .ba_mock_copy i, .ba_mock_copy i:first-child, .ba_mock_copy i:last-child { background: var(--ds-hairline); border-radius: var(--ds-r-pill); } .ba_popup_mock { z-index: 2; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.18); } .ba_popup_mock button { color: var(--ds-muted-soft); } .ba_popup_mock p { color: var(--ds-body); } .ba_popup_mock > span { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .ba_preview_note { border-top-color: var(--ds-hairline); color: var(--ds-muted); font-family: var(--ds-sans); font-weight: 400; } .ba_preview_note i { background: var(--ds-success); box-shadow: none; } .ba_primary_link, .ba_handoff > a, .ba_library_action a { padding: 10px 20px; border-radius: var(--ds-r-pill); color: var(--ds-on-primary); background: var(--ds-primary); font-family: var(--ds-sans); font-size: 15px; font-weight: 500; } .ba_primary_link:hover, .ba_library_action a:hover { background: var(--ds-primary-active); color: var(--ds-on-primary); } /* Handoff band inverts to the single permitted dark surface. */ .ba_handoff { color: var(--ds-on-dark); border-radius: var(--ds-r-xxl); background: var(--ds-surface-dark); } .ba_handoff h2 { color: var(--ds-on-dark); } .ba_handoff p { color: var(--ds-on-dark-soft); } .ba_handoff > div > span { color: var(--ds-on-dark-soft) !important; } .ba_handoff > a { color: var(--ds-ink); background: var(--ds-on-dark); } .ba_handoff > a:hover { color: var(--ds-ink); background: var(--ds-surface-strong); } .ba_use_icon { border-radius: var(--ds-r-pill); color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); font-family: var(--ds-sans); font-weight: 500; } .ba_recommend_action { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } /* =========================================================================== 17 — Shared odds and ends =========================================================================== */ /* Legacy theme badges become caption-uppercase pills. */ .badge, .badge.popular, .badge.best_seller, .badge.new, .badge.deal { height: auto; padding: 4px 10px; border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .badge.popular { background: var(--ds-lavender); } .badge.best_seller { background: var(--ds-peach); width: auto; } .badge.new { background: var(--ds-mint); } .badge.deal { background: var(--ds-rose); width: auto; } /* Scroll-to-top control */ .progress-wrap { background: var(--ds-primary); box-shadow: inset 0 0 0 0.2rem var(--ds-hairline); } .progress-wrap:hover { background: var(--ds-primary-active); } /* Pagination */ .pagination a { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .pagination_num:hover, .pagination_arrow:hover { background: var(--ds-surface-strong); color: var(--ds-ink); } /* Legacy form controls */ .form_control, .textarea_control { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; letter-spacing: var(--ds-track-body); } .form_control:focus, .textarea_control:focus { border-width: 2px; border-color: var(--ds-ink); } .form_group label { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .form_group label span { color: var(--ds-error); } /* Toasts (declared in app/globals.css, which the site does not load — these are the runtime styles for the shared toast viewport). */ .bm-toast { font-family: var(--ds-sans); border-radius: var(--ds-r-lg); box-shadow: 0 12px 32px rgba(12, 10, 9, 0.14); border: 1px solid rgba(255, 255, 255, 0.12); } .bm-toast--success { background: var(--ds-success); } .bm-toast--error { background: var(--ds-error); } .bm-toast--warning { background: var(--ds-primary); } .bm-toast--info { background: var(--ds-primary); } /* Honour reduced-motion for the atmospheric layer. */ @media (prefers-reduced-motion: reduce) { .ds-orb, .auth_blob { animation: none !important; } } /* =========================================================================== 18 — Popup builder chrome (components/popup/popup-builder.css) Only the *editor chrome* is rethemed. Every `.bm_popup_*` rule is deliberately left alone: those styles render the customer's own popup from their saved config, so touching them would change the product output rather than our UI. =========================================================================== */ .pb_root, .pb_root--admin { --pb-bg: var(--ds-canvas); --pb-surface: var(--ds-surface-card); --pb-surface-2: var(--ds-canvas-soft); --pb-surface-3: var(--ds-surface-strong); --pb-border: var(--ds-hairline); --pb-border-soft: var(--ds-hairline-soft); --pb-text: var(--ds-ink); --pb-text-muted: var(--ds-body); --pb-text-soft: var(--ds-muted); --pb-text-faint: var(--ds-muted-soft); --pb-accent: var(--ds-primary); --pb-accent-dark: var(--ds-primary-active); --pb-accent-light: var(--ds-hairline-strong); --pb-accent-glow: var(--ds-hairline-strong); --pb-success: var(--ds-success); --pb-success-bg: var(--ds-mint); --pb-warn: var(--ds-primary); --pb-warn-bg: var(--ds-peach); --pb-danger: var(--ds-error); --pb-radius: var(--ds-r-xl); --pb-radius-sm: var(--ds-r-md); --pb-shadow: var(--ds-shadow); --pb-shadow-lg: var(--ds-shadow-lift); --pb-shadow-xl: var(--ds-shadow-lift); font-family: var(--ds-sans); color: var(--ds-ink); } .pb_root { background: radial-gradient(760px 400px at 18% 0%, rgba(167, 229, 211, 0.34) 0%, transparent 58%), radial-gradient(680px 360px at 84% 100%, rgba(200, 184, 224, 0.3) 0%, transparent 56%), var(--ds-canvas); } .pb_topbar, .pb_root--admin .pb_topbar { background: rgba(245, 245, 245, 0.92); border-bottom: 1px solid var(--ds-hairline); box-shadow: none; } .pb_topbar_back, .pb_root--admin .pb_topbar_back { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); } .pb_topbar_back:hover { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; transform: none; } /* Kickers only. `.pb_field_label` used to sit in this group, which uppercased every control label in the builder panel and made it read as shouty noise. */ .pb_kicker, .pb_root--admin .pb_kicker, .pb_experiment_kicker, .pa_kicker, .pb_stage_title { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pb_topbar_name, .pb_root--admin .pb_topbar_name { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .pb_topbar_name:hover { border-color: var(--ds-hairline-strong); } .pb_topbar_name:focus { border-color: var(--ds-ink); background: transparent; } .pb_topbar_meta, .pb_status_badge, .pb_status_badge[data-status="published"], .pb_status_badge[data-status="paused"] { border-radius: var(--ds-r-pill); border: 1px solid var(--ds-hairline); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pb_status_badge[data-status="published"] { background: var(--ds-mint); border-color: var(--ds-mint); } .pb_status_badge[data-status="paused"] { background: var(--ds-peach); border-color: var(--ds-peach); } .pb_topbar_meta { font-family: var(--ds-mono); letter-spacing: 0; text-transform: none; } .pb_feedback { border-radius: var(--ds-r-pill); background: var(--ds-mint); border-color: var(--ds-mint); color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_status { height: 4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } /* ---- Buttons: one ink pill, one outline, no gradients ---- */ .pb_btn { height: 4rem; padding: 0 2rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); box-shadow: none; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .pb_btn:hover:not(:disabled) { background: transparent; border-color: var(--ds-primary); transform: none; box-shadow: none; } .pb_btn--ghost { border-color: transparent; color: var(--ds-body); } .pb_btn--ghost:hover:not(:disabled) { background: var(--ds-surface-strong); border-color: transparent; color: var(--ds-ink); } .pb_btn--primary, .pb_btn--cta { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .pb_btn--primary:hover:not(:disabled), .pb_btn--cta:hover:not(:disabled) { background: var(--ds-primary-active); border-color: var(--ds-primary-active); color: var(--ds-on-primary); box-shadow: none; } .pb_btn--danger { color: var(--ds-error); } .pb_btn--danger:hover:not(:disabled) { border-color: var(--ds-error); background: rgba(220, 38, 38, 0.05); color: var(--ds-error); } .pb_btn--xs, .pb_btn--sm { height: 3.2rem; padding: 0 1.4rem; font-size: 1.3rem; } /* ---- Panels & sections ---- */ .pb_panel, .pb_root--admin .pb_panel { background: var(--ds-surface-card); border-right: 1px solid var(--ds-hairline); } .pb_panel_tabs, .pb_root--admin .pb_panel_tabs { background: var(--ds-canvas-soft); border-bottom: 1px solid var(--ds-hairline); } .pb_panel_tab, .pb_root--admin .pb_panel_tab { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-body); box-shadow: none; font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .pb_panel_tab:hover { border-color: var(--ds-primary); box-shadow: none; transform: none; } .pb_panel_tab.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; transform: none; } .pb_panel_tab_icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); } .pb_panel_tab:hover .pb_panel_tab_icon { background: var(--ds-surface-strong); color: var(--ds-ink); } .pb_panel_tab.is-active .pb_panel_tab_icon { background: var(--ds-on-primary); color: var(--ds-ink); } .pb_panel_body, .pb_root--admin .pb_panel_body { background: var(--ds-surface-card); } .pb_section, .pb_root--admin .pb_section, .pb_editor_details, .pb_experiment, .pb_step_card, .pb_typography_group { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-xl); background: var(--ds-surface-card) !important; box-shadow: none !important; } .pb_section_head h3, .pb_root--admin .pb_section_head h3, .pb_typography_group h4, .pb_experiment_head strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; font-weight: 500; letter-spacing: 0; text-transform: none; } .pb_section_head h3::after { background: var(--ds-hairline); } .pb_section_head p, .pb_field_hint, .pb_modal_sub, .pb_experiment_help, .pb_schedule_hint, .pb_empty_hint, .pb_img_drop_hint, .pb_img_dropzone_hint { color: var(--ds-muted); font-family: var(--ds-sans); } /* ---- Inputs ---- */ .pb_input, .pb_textarea, select.pb_input, .pb_root--admin .pb_input, .pb_root--admin .pb_textarea, .pb_root--admin select.pb_input, .pb_experiment_split input, .ppt_input, .pa_run_selector select { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); box-shadow: none; font-family: var(--ds-sans); font-size: 1.5rem; letter-spacing: var(--ds-track-body); } .pb_input:hover, .pb_textarea:hover, select.pb_input:hover { border-color: var(--ds-muted-soft); box-shadow: none; } .pb_input:focus, .pb_textarea:focus, select.pb_input:focus, .ppt_input:focus { border-width: 2px; border-color: var(--ds-ink); box-shadow: none; } .pb_input:disabled, .pb_textarea:disabled { background: var(--ds-surface-strong); color: var(--ds-muted-soft); } .pb_input--mono { font-family: var(--ds-mono); } /* ---- Segmented controls, pills, tiles ---- */ .pb_seg, .pb_experiment_tabs, .pb_embed_platforms, .pb_stage_device, .pa_range, .ppt_devices { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); } .pb_seg_btn, .pb_pill, .pb_experiment_tabs button, .pb_embed_platforms button, .pb_device_btn, .pa_range_btn, .pa_export_btn, .ppt_devices button, .pa_experiment_actions button { border-radius: var(--ds-r-pill); color: var(--ds-body); font-family: var(--ds-sans); font-size: 1.3rem; font-weight: 500; } .pb_seg_btn:hover, .pb_pill:hover, .pb_device_btn:hover, .pa_range_btn:hover, .pa_export_btn:hover { color: var(--ds-ink); background: var(--ds-surface-card); } .pb_seg_btn.is-active, .pb_pill.is-active, .pb_experiment_tabs button.is-active, .pb_embed_platforms button.is-active, .pb_device_btn.is-active, .pa_range_btn.is-active, .ppt_devices button.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .pb_palette, .pb_fonttile, .pb_root--admin .pb_fonttile, .pb_img_tile, .pb_check { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); box-shadow: none; } .pb_palette:hover, .pb_fonttile:hover, .pb_img_tile:hover, .pb_check:hover { border-color: var(--ds-primary); box-shadow: none; transform: none; } .pb_fonttile.is-active, .pb_img_tile.is-selected { border-color: var(--ds-primary); border-width: 2px; } .pb_palette_name, .pb_fonttile_name, .pb_root--admin .pb_fonttile_name { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_fonttile_sample, .pb_root--admin .pb_fonttile_sample { color: var(--ds-body); } .pb_experiment_toggle { border-radius: var(--ds-r-pill); border: 1px solid var(--ds-hairline-strong); background: transparent; color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_experiment_toggle.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); } /* ---- Image picker ---- */ .pb_img_drop, .pb_img_dropzone { border: 1px dashed var(--ds-hairline-strong); border-radius: var(--ds-r-xl); background: var(--ds-canvas-soft); } .pb_img_drop:hover, .pb_img_drop.is-over, .pb_img_dropzone:hover, .pb_img_dropzone.is-over { border-color: var(--ds-primary); background: var(--ds-surface-strong); } .pb_img_drop_icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-muted); } .pb_img_drop_title, .pb_img_dropzone_title { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_img_error { border-radius: var(--ds-r-md); color: var(--ds-error); background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.2); } .pb_img_preview, .pb_img_tile_pick { border-radius: var(--ds-r-lg); } .pb_img_tile_remove { border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); } /* ---- Modals ---- */ .pb_img_modal, .pb_modal, .pb_preview_modal { background: rgba(12, 10, 9, 0.4); } .pb_img_modal_inner, .pb_modal_inner, .pb_preview_modal_inner { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: var(--ds-surface-card); box-shadow: 0 24px 72px rgba(12, 10, 9, 0.18); } .pb_img_modal_head, .pb_modal_head, .pb_preview_head { border-bottom: 1px solid var(--ds-hairline); } .pb_img_modal_head h3, .pb_modal_head h3, .pb_preview_head h3 { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); letter-spacing: 0; } .pb_modal_hint { color: var(--ds-muted); font-family: var(--ds-sans); } .pb_modal_hint code, .pb_placeholder_grid code { font-family: var(--ds-mono); color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xs); } .pb_snippet { border-radius: var(--ds-r-xl); background: var(--ds-surface-dark); color: #e7e5e4; font-family: var(--ds-mono); } /* ---- Preview stage & browser mock ---- */ .pb_stage { background: radial-gradient(700px 380px at 30% 0%, rgba(200, 184, 224, 0.3) 0%, transparent 58%), radial-gradient(620px 340px at 72% 100%, rgba(167, 229, 211, 0.28) 0%, transparent 56%), var(--ds-canvas); } .pb_stage_toolbar { border-bottom: 1px solid var(--ds-hairline); background: rgba(245, 245, 245, 0.88); } .pb_stage_frame, .pb_flow_frame { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.08); } .pb_browser_chrome { border-bottom: 1px solid var(--ds-hairline); background: var(--ds-canvas-soft); } .pb_browser_chrome > span, .pb_browser_chrome > span:nth-child(1), .pb_browser_chrome > span:nth-child(2), .pb_browser_chrome > span:nth-child(3) { background: var(--ds-hairline-strong); } .pb_browser_url { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-sm); background: var(--ds-surface-card); color: var(--ds-muted); font-family: var(--ds-sans); } .pb_browser_skeleton, .pb_browser_skeleton--row { background: var(--ds-hairline); border-radius: var(--ds-r-md); } .pb_site_blocked { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); } .pb_site_blocked span { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); } .pb_site_blocked p { color: var(--ds-body); font-family: var(--ds-sans); } .pb_site_blocked strong { color: var(--ds-ink); font-weight: 500; } /* =========================================================================== 19 — Popup analytics (components/popup/popup-analytics.css) =========================================================================== */ .pa_wrap { background: var(--ds-canvas); font-family: var(--ds-sans); color: var(--ds-body); } .pa_back, .pa_edit_link { border-radius: var(--ds-r-pill); color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pa_back:hover, .pa_edit_link:hover { color: var(--ds-primary-active); } .pa_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3.2rem, 4vw, 4.8rem); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; text-transform: none; } .pa_sub, .pa_range_meta, .pa_kpi_label, .pa_chart_card header p, .pa_table_card header p, .pa_breakdowns_head p, .pa_breakdown_card header p, .pa_table_empty, .pa_breakdown_empty { color: var(--ds-muted); font-family: var(--ds-sans); } .pa_sub code, .pa_table code, .pa_experiment_header code { font-family: var(--ds-mono); color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xs); } .pa_status, .pa_status--published, .pa_status--paused, .pa_status--draft, .pa_experiment_status, .pa_experiment_status.is-running, .ph_badge, .ph_badge--live, .ph_badge--inactive { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_status--published, .ph_badge--live, .pa_experiment_status.is-running { background: var(--ds-mint); border-color: var(--ds-mint); } .pa_status--paused { background: var(--ds-peach); border-color: var(--ds-peach); } .ph_dot { background: var(--ds-ink); } .ph_badge--live .ph_dot { background: var(--ds-success); } .pa_toolbar, .pa_kpi, .pa_chart_card, .pa_table_card, .pa_experiment_card, .pa_breakdown_card, .pa_run_selector { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-xl); background: var(--ds-surface-card) !important; box-shadow: none !important; } .pa_kpi_value, .pa_experiment_summary strong { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; } .pa_kpi_label { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_kpi_delta { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .pa_kpi_delta.is-up { color: var(--ds-success); } .pa_kpi_delta.is-down { color: var(--ds-error); } .pa_chart_card h3, .pa_table_card h3, .pa_experiment_header h3, .pa_breakdowns_head h3, .pa_breakdown_card h4 { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.8rem; font-weight: 500; letter-spacing: 0.18px; } .pa_chart_card > header, .pa_table_card > header, .pa_breakdown_card > header { border-bottom: 1px solid var(--ds-hairline-soft); } .pa_legend li { color: var(--ds-body); font-family: var(--ds-sans); } .pa_legend_swatch { border-radius: var(--ds-r-pill); } .pa_chart_skeleton { background: var(--ds-surface-strong); border-radius: var(--ds-r-lg); } .pa_table th, .pa_breakdown_table th, .pa_experiment_table th { color: var(--ds-muted); background: var(--ds-canvas-soft); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_table td, .pa_breakdown_table td { color: var(--ds-body); border-color: var(--ds-hairline-soft); font-family: var(--ds-sans); } .pa_experiment_note, .ph_warnings { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-md); background: var(--ds-surface-strong); color: var(--ds-body); font-family: var(--ds-sans); } .pa_experiment_note strong, .ph_warnings summary { color: var(--ds-ink); font-weight: 500; } .pa_experiment_note.is-warning { background: rgba(244, 197, 168, 0.28); border-color: var(--ds-peach); } .pa_error, .pa_experiment_error { border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--ds-r-md); background: rgba(220, 38, 38, 0.06); color: var(--ds-error); font-family: var(--ds-sans); } .ph_meta { color: var(--ds-muted); font-family: var(--ds-sans); } .ph_meta--warn { color: var(--ds-error); } /* =========================================================================== 20 — Popup preview tester (components/popup/popup-preview-tester.css) =========================================================================== */ .ppt_wrap { background: var(--ds-canvas); font-family: var(--ds-sans); } .ppt_title { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; text-transform: none; } .ppt_sub, .ppt_note, .ppt_empty p { color: var(--ds-muted); font-family: var(--ds-sans); } .ppt_sub code { font-family: var(--ds-mono); color: var(--ds-ink); background: var(--ds-surface-strong); border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xs); } .ppt_back { color: var(--ds-ink); font-weight: 500; } .ppt_btn { height: 4rem; padding: 0 2rem; border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .ppt_btn:hover { background: var(--ds-primary-active); border-color: var(--ds-primary-active); } .ppt_frame_wrap, .ppt_empty { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } /* =========================================================================== 18 — Popup builder chrome (components/popup/popup-builder.css) --------------------------------------------------------------------------- Only the BUILDER CHROME is rethemed here (`.pb_*`). The popup renderer output (`.bm_popup_*`) is deliberately left alone — those colours, fonts and radii come from each user's saved popup config, and restyling them would change what their visitors see. The editor around it moves to the editorial system: off-white workspace, hairline panel, ink pills, no indigo gradients or glows. `.pb_root--admin` is untouched because this stylesheet only loads on (site) routes; the admin panel keeps its own look. =========================================================================== */ .pb_root { --pb-bg: var(--ds-canvas); --pb-surface: var(--ds-surface-card); --pb-surface-2: var(--ds-canvas-soft); --pb-surface-3: var(--ds-surface-strong); --pb-border: var(--ds-hairline); --pb-border-soft: var(--ds-hairline-soft); --pb-text: var(--ds-ink); --pb-text-muted: var(--ds-body); --pb-text-soft: var(--ds-muted); --pb-text-faint: var(--ds-muted-soft); --pb-accent: var(--ds-primary); --pb-accent-dark: var(--ds-primary-active); --pb-accent-light: var(--ds-hairline-strong); --pb-accent-glow: var(--ds-hairline-strong); --pb-success: var(--ds-success); --pb-success-bg: rgba(22, 163, 74, 0.1); --pb-warn: var(--ds-peach); --pb-warn-bg: rgba(244, 197, 168, 0.3); --pb-danger: var(--ds-error); --pb-radius: var(--ds-r-xl); --pb-radius-sm: var(--ds-r-md); --pb-shadow: var(--ds-shadow); --pb-shadow-lg: var(--ds-shadow-lift); --pb-shadow-xl: var(--ds-shadow-lift); font-family: var(--ds-sans); color: var(--ds-ink); background: radial-gradient(760px 420px at 16% 0%, rgba(167, 229, 211, 0.28) 0%, transparent 60%), radial-gradient(680px 380px at 88% 100%, rgba(200, 184, 224, 0.26) 0%, transparent 60%), var(--ds-canvas); } /* ---- Topbar ---- */ .pb_topbar { background: rgba(245, 245, 245, 0.92); border-bottom: 1px solid var(--ds-hairline); box-shadow: none; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } .pb_topbar_back { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); } .pb_topbar_back:hover { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); transform: none; box-shadow: none; } .pb_kicker, .pb_experiment_kicker { color: var(--ds-muted) !important; font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pb_topbar_name { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.2rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .pb_topbar_name:hover { border-color: var(--ds-hairline-strong); } .pb_topbar_name:focus { border-color: var(--ds-ink); background: transparent; } .pb_topbar_meta, .pb_status_badge, .pb_status_badge[data-status="published"], .pb_status_badge[data-status="paused"] { padding: 4px 10px; height: auto; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pb_topbar_meta { font-family: var(--ds-mono); letter-spacing: 0; text-transform: none; color: var(--ds-body); } .pb_status_badge[data-status="published"] { background: var(--ds-mint); border-color: var(--ds-mint); } .pb_status_badge[data-status="paused"] { background: var(--ds-peach); border-color: var(--ds-peach); } .pb_feedback { border: 1px solid rgba(22, 163, 74, 0.24); border-radius: var(--ds-r-pill); background: rgba(22, 163, 74, 0.08); color: var(--ds-success); font-family: var(--ds-sans); font-weight: 500; } .pb_status { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-body); font-family: var(--ds-sans); font-weight: 500; } .pb_status[data-status="draft"] .pb_status_dot { background: var(--ds-muted-soft); } /* ---- Buttons ---- */ .pb_btn { height: 3.6rem; padding: 0 1.6rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); box-shadow: none; font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .pb_btn:hover:not(:disabled) { background: transparent; border-color: var(--ds-primary); transform: none; box-shadow: none; } .pb_btn--ghost { border-color: transparent; color: var(--ds-body); } .pb_btn--ghost:hover:not(:disabled) { background: var(--ds-surface-strong); border-color: transparent; color: var(--ds-ink); } .pb_btn--primary, .pb_btn--cta { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .pb_btn--primary:hover:not(:disabled), .pb_btn--cta:hover:not(:disabled) { border-color: var(--ds-primary-active); background: var(--ds-primary-active); color: var(--ds-on-primary); box-shadow: none; } .pb_btn--danger { border-color: var(--ds-hairline-strong); color: var(--ds-error); } .pb_btn--danger:hover:not(:disabled) { border-color: var(--ds-error); background: rgba(220, 38, 38, 0.05); color: var(--ds-error); } .pb_btn--xs, .pb_btn--sm { height: 3rem; } /* ---- Split & panel ---- */ .pb_split_resizer::after { background: var(--ds-hairline-strong); } .pb_split_resizer:hover::after, .pb_split_resizer.is-dragging::after { background: var(--ds-primary); } .pb_split_resizer:hover, .pb_split_resizer.is-dragging { background: var(--ds-surface-strong); } .pb_panel { background: var(--ds-surface-card); border-right: 1px solid var(--ds-hairline); box-shadow: none; } .pb_panel_tabs { background: var(--ds-canvas-soft); border-bottom: 1px solid var(--ds-hairline); box-shadow: none; } /* ---- Vertical icon rail (Canva-style builder shell) ---- */ .pb_rail { background: var(--ds-surface-card); border-right: 1px solid var(--ds-hairline); } .pb_rail_btn { color: var(--ds-muted); font-family: var(--ds-sans); } .pb_rail_btn:hover:not(:disabled) { background: var(--ds-surface-strong); color: var(--ds-ink); } .pb_rail_btn.is-active { background: var(--ds-primary); color: var(--ds-on-primary); } .pb_rail_label { font-weight: 500; } .pb_panel_heading h2 { color: var(--ds-ink); font-family: var(--ds-display); font-size: 2.4rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .pb_panel_tab { min-height: 3.6rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-body); box-shadow: none; font-family: var(--ds-sans); font-size: 1.3rem; font-weight: 500; } .pb_panel_tab:hover { color: var(--ds-ink); background: var(--ds-surface-card); border-color: var(--ds-primary); transform: none; box-shadow: none; } .pb_panel_tab.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; transform: none; } .pb_panel_tab_icon { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-weight: 500; } .pb_panel_tab:hover .pb_panel_tab_icon { background: var(--ds-surface-strong); color: var(--ds-ink); } .pb_panel_tab.is-active .pb_panel_tab_icon { background: rgba(255, 255, 255, 0.2); color: var(--ds-on-primary); } /* ---- Sections & fields ---- */ .pb_section, .pb_section:hover { background: var(--ds-surface-card); border-bottom: 1px solid var(--ds-hairline-soft); } .pb_section_head h3 { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.6rem; font-weight: 500; letter-spacing: 0; } .pb_section_head h3::after { background: var(--ds-primary); } .pb_section_head p, .pb_field_hint, .pb_empty_hint, .pb_modal_hint, .pb_experiment_help { color: var(--ds-muted); font-family: var(--ds-sans); } .pb_field_label { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.3rem; font-weight: 500; } .pb_field_label::after { color: var(--ds-muted-soft); } .pb_input, .pb_textarea, select.pb_input { min-height: 4.4rem; border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); box-shadow: none; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 400; letter-spacing: var(--ds-track-body); } .pb_input:hover, .pb_textarea:hover, select.pb_input:hover { border-color: var(--ds-muted-soft); box-shadow: none; } .pb_input:focus, .pb_textarea:focus, select.pb_input:focus { border-width: 2px; border-color: var(--ds-ink); box-shadow: none; } .pb_input:disabled, .pb_textarea:disabled { background: var(--ds-surface-strong); color: var(--ds-muted-soft); } .pb_input--mono, .pb_placeholder_grid code, .pb_modal_hint code { font-family: var(--ds-mono); } /* ---- Colour, palette, font pickers ---- */ .pb_color input[type="color"] { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); } .pb_palette, .pb_fonttile { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-lg); background: var(--ds-surface-card); } .pb_palette:hover, .pb_fonttile:hover { border-color: var(--ds-primary); box-shadow: none; } .pb_fonttile.is-active { border-color: var(--ds-primary); box-shadow: 0 0 0 1px var(--ds-primary); } .pb_palette_name, .pb_fonttile_name { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_fonttile_sample { color: var(--ds-muted); } .pb_palette_swatches { border-radius: var(--ds-r-xs); } /* ---- Segmented / pills / range / check ---- */ .pb_seg, .pb_experiment_tabs, .pb_embed_platforms, .pb_stage_device { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); } .pb_seg_btn, .pb_experiment_tabs button, .pb_embed_platforms button, .pb_device_btn { border-radius: var(--ds-r-pill); color: var(--ds-body); background: transparent; font-family: var(--ds-sans); font-weight: 500; } .pb_seg_btn:hover, .pb_device_btn:hover { color: var(--ds-ink); background: rgba(255, 255, 255, 0.6); } .pb_seg_btn.is-active, .pb_experiment_tabs button.is-active, .pb_embed_platforms button.is-active, .pb_device_btn.is-active { background: var(--ds-primary); color: var(--ds-on-primary); box-shadow: none; } .pb_pill { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-body); font-family: var(--ds-sans); font-weight: 500; } .pb_pill:hover { color: var(--ds-ink); border-color: var(--ds-primary); } .pb_pill.is-active { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); } .pb_range { accent-color: var(--ds-primary); background: var(--ds-surface-strong); } .pb_check { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 400; } .pb_check:hover { background: var(--ds-surface-strong); border-color: var(--ds-hairline-strong); box-shadow: none; } .pb_check input[type="checkbox"] { accent-color: var(--ds-primary); border-radius: var(--ds-r-xs); } /* ---- Image picker ---- */ .pb_img_drop, .pb_img_dropzone { border: 1px dashed var(--ds-hairline-strong); border-radius: var(--ds-r-xl); background: var(--ds-canvas-soft); color: var(--ds-body); } .pb_img_drop:hover, .pb_img_drop.is-over, .pb_img_dropzone:hover, .pb_img_dropzone.is-over { border-color: var(--ds-primary); background: var(--ds-surface-strong); } .pb_img_drop_title, .pb_img_dropzone_title { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_img_drop_hint, .pb_img_dropzone_hint, .pb_img_state { color: var(--ds-muted); } .pb_img_preview, .pb_img_tile { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); } .pb_img_tile:hover { border-color: var(--ds-hairline-strong); } .pb_img_tile.is-selected { border-color: var(--ds-primary); box-shadow: 0 0 0 1px var(--ds-primary); } .pb_img_tile_remove { border-radius: var(--ds-r-pill); } .pb_img_error { border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--ds-r-md); background: rgba(220, 38, 38, 0.06); color: var(--ds-error); } /* ---- Modals ---- */ .pb_img_modal_inner, .pb_modal_inner, .pb_preview_modal_inner { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.16); } .pb_img_modal_head, .pb_modal_head, .pb_preview_head { border-bottom: 1px solid var(--ds-hairline); } .pb_img_modal_head h3, .pb_modal_head h3, .pb_preview_head h3 { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .pb_modal_sub { color: var(--ds-muted); } .pb_snippet { border-radius: var(--ds-r-xl); background: var(--ds-surface-dark); color: #e7e5e4; font-family: var(--ds-mono); } /* ---- Stage / device preview chrome ---- */ .pb_stage_toolbar { border-bottom: 1px solid var(--ds-hairline); background: var(--ds-canvas-soft); } .pb_stage_title { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; } .pb_stage_canvas { background: radial-gradient(620px 340px at 20% 8%, rgba(200, 184, 224, 0.26) 0%, transparent 62%), radial-gradient(560px 320px at 84% 94%, rgba(167, 229, 211, 0.24) 0%, transparent 62%), var(--ds-canvas); } .pb_stage_frame { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.08); } .pb_browser_chrome { border-bottom: 1px solid var(--ds-hairline); background: var(--ds-canvas-soft); } .pb_browser_chrome > span, .pb_browser_chrome > span:nth-child(1), .pb_browser_chrome > span:nth-child(2), .pb_browser_chrome > span:nth-child(3) { background: var(--ds-hairline-strong); } .pb_browser_url { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-sm); background: var(--ds-surface-card); color: var(--ds-muted); font-family: var(--ds-sans); } .pb_browser_skeleton, .pb_browser_skeleton--row { border-radius: var(--ds-r-md); background: var(--ds-hairline); } .pb_phone_shell { border-radius: 40px; background: var(--ds-surface-dark); } .pb_site_blocked { background: var(--ds-canvas-soft); color: var(--ds-body); font-family: var(--ds-sans); } .pb_site_blocked strong { color: var(--ds-ink); font-weight: 500; } /* ---- A/B experiment & multi-step ---- */ .pb_experiment { border-bottom: 1px solid var(--ds-hairline-soft); background: var(--ds-canvas-soft); } .pb_experiment_head strong { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; } .pb_experiment_toggle { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-body); font-family: var(--ds-sans); font-weight: 500; } .pb_experiment_toggle.is-active { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary); } .pb_experiment_split { color: var(--ds-muted); font-family: var(--ds-sans); font-weight: 400; } .pb_experiment_split b { color: var(--ds-ink); font-weight: 500; } .pb_experiment_split input { accent-color: var(--ds-primary); } .pb_schedule_hint, .pb_placeholder_grid, .pb_editor_details, .pb_typography_group { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft) !important; color: var(--ds-body); } .pb_step_card { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); } .pb_step_card[open] { border-color: var(--ds-hairline-strong); } .pb_step_card summary { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.4rem; font-weight: 500; } .pb_step_card summary button { border-radius: var(--ds-r-pill); background: rgba(220, 38, 38, 0.08); color: var(--ds-error); } .pb_typography_toggle > summary { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .pb_typography_toggle > summary:hover, .pb_typography_toggle[open] > summary { color: var(--ds-primary-active); } .pb_typography_group h4 { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } /* =========================================================================== 19 — Popup analytics (components/popup/popup-analytics.css) =========================================================================== */ .pa_wrap { background: var(--ds-canvas); font-family: var(--ds-sans); color: var(--ds-body); } .pa_back, .pa_edit_link, .pa_view, .pa_range_btn, .pa_export_btn, .pa_experiment_actions button { border: 1px solid var(--ds-hairline-strong) !important; border-radius: var(--ds-r-pill) !important; background: transparent !important; color: var(--ds-ink) !important; box-shadow: none !important; font-family: var(--ds-sans); font-weight: 500; } .pa_back:hover, .pa_edit_link:hover, .pa_range_btn:hover, .pa_export_btn:hover, .pa_experiment_actions button:hover:not(:disabled) { border-color: var(--ds-primary) !important; background: transparent !important; color: var(--ds-ink) !important; } .pa_range_btn.is-active { border-color: var(--ds-primary) !important; background: var(--ds-primary) !important; color: var(--ds-on-primary) !important; } .pa_range { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); } .pa_kicker { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_title { color: var(--ds-ink); font-family: var(--ds-display); font-size: clamp(3rem, 3.8vw, 4.8rem); font-weight: var(--ds-display-weight); line-height: 1.08; letter-spacing: -0.02em; text-transform: none; } .pa_sub, .pa_range_meta, .pa_chart_card header p, .pa_table_card header p, .pa_breakdowns_head p, .pa_breakdown_card header p, .pa_experiment_header p { color: var(--ds-muted); font-family: var(--ds-sans); } .pa_sub code, .pa_table code, .pa_experiment_header code { border-radius: var(--ds-r-xs); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-mono); } .pa_status, .pa_status--published, .pa_status--paused, .pa_status--draft, .pa_experiment_status, .pa_experiment_status.is-running, .ph_badge, .ph_badge--live, .ph_badge--inactive { padding: 4px 10px; border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_status--published, .pa_experiment_status.is-running, .ph_badge--live { background: var(--ds-mint); border-color: var(--ds-mint); } .pa_status--paused { background: var(--ds-peach); border-color: var(--ds-peach); } .ph_dot { background: var(--ds-ink); } .ph_meta { color: var(--ds-muted); font-family: var(--ds-sans); } .ph_meta--warn { color: var(--ds-error); } .ph_warnings { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); color: var(--ds-body); } .pa_error, .pa_experiment_error { border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--ds-r-md); background: rgba(220, 38, 38, 0.06); color: var(--ds-error); font-family: var(--ds-sans); } .pa_kpi, .pa_chart_card, .pa_table_card, .pa_experiment_card, .pa_breakdown_card { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-xl); background: var(--ds-surface-card) !important; box-shadow: none !important; } .pa_chart_card > header, .pa_table_card > header, .pa_breakdown_card > header, .pa_experiment_header { border-bottom: 1px solid var(--ds-hairline-soft); } .pa_chart_card h3, .pa_table_card h3, .pa_breakdown_card h4, .pa_breakdowns_head h3, .pa_experiment_header h3 { color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.8rem; font-weight: 500; letter-spacing: 0; } .pa_kpi_value, .pa_experiment_summary strong { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; } .pa_kpi_label, .pa_experiment_summary span, .pa_experiment_summary small { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_kpi_delta { border-radius: var(--ds-r-pill); font-family: var(--ds-sans); font-weight: 500; } .pa_kpi_delta.is-up { color: var(--ds-success); } .pa_kpi_delta.is-down { color: var(--ds-error); } .pa_legend li { color: var(--ds-muted); font-family: var(--ds-sans); } .pa_legend_swatch { border-radius: var(--ds-r-pill); } .pa_table th, .pa_breakdown_table th { color: var(--ds-muted); background: var(--ds-canvas-soft); border-bottom-color: var(--ds-hairline); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .pa_table td, .pa_breakdown_table td { border-top-color: var(--ds-hairline-soft); color: var(--ds-body); font-family: var(--ds-sans); } .pa_table_empty, .pa_breakdown_empty { color: var(--ds-muted); font-family: var(--ds-sans); } .pa_experiment_note { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); color: var(--ds-body); font-family: var(--ds-sans); } .pa_experiment_note strong { color: var(--ds-ink); font-weight: 500; } .pa_experiment_note.is-warning { border-color: rgba(244, 197, 168, 0.6); background: rgba(244, 197, 168, 0.18); } .pa_run_selector select { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); } /* =========================================================================== 20 — Popup preview tester (components/popup/popup-preview-tester.css) =========================================================================== */ .ppt_wrap { background: var(--ds-canvas); font-family: var(--ds-sans); color: var(--ds-body); } .ppt_title { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.02em; text-transform: none; } .ppt_sub, .ppt_note, .ppt_empty p { color: var(--ds-muted); font-family: var(--ds-sans); } .ppt_sub code { border-radius: var(--ds-r-xs); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-mono); } .ppt_back, .ppt_devices button { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } .ppt_back:hover, .ppt_devices button:hover { border-color: var(--ds-primary); color: var(--ds-ink); } .ppt_devices button.is-active { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary); } .ppt_devices { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); } .ppt_input { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); letter-spacing: var(--ds-track-body); } .ppt_input:focus { border-width: 2px; border-color: var(--ds-ink); box-shadow: none; } .ppt_btn { border: 1px solid var(--ds-primary); border-radius: var(--ds-r-pill); background: var(--ds-primary); color: var(--ds-on-primary); font-family: var(--ds-sans); font-weight: 500; box-shadow: none; } .ppt_btn:hover { border-color: var(--ds-primary-active); background: var(--ds-primary-active); color: var(--ds-on-primary); } .ppt_frame_wrap, .ppt_frame, .ppt_empty { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: none; } /* =========================================================================== 21 — Feedback template picker & builder (template-gallery.css, lower half) --------------------------------------------------------------------------- The chrome moves to the editorial system. The platform preview swatches (`--whatsapp`, `--google-forms`, `--chatgpt`) keep their own brand colours on purpose: they identify a third-party product, the way a logo does, so recolouring them would strip the meaning out of the preview. =========================================================================== */ .feedback-template-picker, .feedback-user-builder__panel, .feedback-user-builder__preview, .feedback-user-builder__brand-panel, .feedback-user-builder__style-panel, .feedback-user-builder__questions article, .feedback-user-builder__result, .feedback-user-builder__selected-template { border: 1px solid var(--ds-hairline) !important; border-radius: var(--ds-r-xl) !important; background: var(--ds-surface-card) !important; box-shadow: none !important; } .feedback-template-picker__intro span, .feedback-user-builder__selected-template span, .feedback-user-builder__eyebrow { color: var(--ds-muted) !important; font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .feedback-template-picker__intro h3, .feedback-user-builder h2, .feedback-user-builder h3, .feedback-template-picker__title-row h4 { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; letter-spacing: 0; } .feedback-user-builder h2 { font-family: var(--ds-display); font-size: 3.2rem; font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .feedback-template-picker__intro p, .feedback-template-picker__body p, .feedback-user-builder p, .feedback-user-builder__hint, .feedback-template-picker__modal-toolbar span { color: var(--ds-body); font-family: var(--ds-sans); } .feedback-template-picker__grid article { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); color: var(--ds-body); } .feedback-template-picker__grid article:hover, .feedback-template-picker__grid article.is-selected { transform: none; border-color: var(--ds-primary); box-shadow: var(--ds-shadow) !important; } /* Generic (non-platform) sample stage picks up the atmospheric wash. */ .feedback-template-picker__sample { background: radial-gradient(340px 220px at 20% 12%, rgba(200, 184, 224, 0.4) 0%, transparent 64%), radial-gradient(320px 200px at 86% 90%, rgba(167, 229, 211, 0.36) 0%, transparent 62%), var(--ds-canvas-soft); } .feedback-template-picker__sample > span { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-pill); background: var(--ds-surface-card); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .feedback-template-picker__sample-shell { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xl); background: var(--ds-surface-card); box-shadow: var(--ds-shadow); } .feedback-template-picker__title-row em { border-radius: var(--ds-r-pill); background: var(--ds-surface-strong); color: var(--ds-ink); font-family: var(--ds-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } /* ---- Buttons across the feedback builder ---- */ .feedback-template-picker__card-actions button, .feedback-user-builder__actions button, .feedback-user-builder__choice-grid button, .feedback-user-builder__ghost, .feedback-user-builder__steps button, .feedback-user-builder__questions button, .feedback-user-builder__options button, .feedback-user-builder__preview-modes button, .feedback-user-builder__edit-style, .feedback-user-builder__logo-row button, .feedback-share-modal__actions button, .feedback-share-modal__actions a { border: 1px solid var(--ds-hairline-strong) !important; border-radius: var(--ds-r-pill) !important; background: transparent !important; color: var(--ds-ink) !important; box-shadow: none !important; font-family: var(--ds-sans); font-weight: 500; } .feedback-template-picker__card-actions button:hover, .feedback-user-builder__actions button:hover:not(:disabled), .feedback-user-builder__choice-grid button:hover, .feedback-user-builder__steps button:hover, .feedback-user-builder__preview-modes button:hover, .feedback-user-builder__edit-style:hover { transform: none; border-color: var(--ds-primary) !important; background: transparent !important; box-shadow: none !important; } .feedback-template-picker__card-actions button.is-primary, .feedback-template-picker__grid article.is-selected .feedback-template-picker__card-actions button.is-primary, .feedback-user-builder__actions button.is-primary, .feedback-user-builder__primary, .feedback-user-builder__choice-grid button.is-active, .feedback-user-builder__steps button.is-active, .feedback-user-builder__preview-modes button.is-active, .feedback-share-modal__actions .is-primary { border-color: var(--ds-primary) !important; background: var(--ds-primary) !important; color: var(--ds-on-primary) !important; border-radius: var(--ds-r-pill) !important; box-shadow: none !important; font-family: var(--ds-sans); font-weight: 500; } .feedback-user-builder__questions button.is-danger { border-color: var(--ds-hairline-strong) !important; color: var(--ds-error) !important; } .feedback-template-picker__card-actions button:focus-visible, .feedback-user-builder__primary:focus-visible, .feedback-template-picker__modal-toolbar button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; } /* ---- Inputs ---- */ .feedback-user-builder input, .feedback-user-builder select, .feedback-user-builder__target-field input, .feedback-user-builder__inline input, .feedback-user-builder__logo-row input { border: 1px solid var(--ds-hairline-strong) !important; border-radius: var(--ds-r-md) !important; background: var(--ds-surface-card) !important; color: var(--ds-ink) !important; font-family: var(--ds-sans); letter-spacing: var(--ds-track-body); } .feedback-user-builder input:focus, .feedback-user-builder select:focus { border-width: 2px !important; border-color: var(--ds-ink) !important; box-shadow: none !important; } .feedback-user-builder label, .feedback-user-builder__style-panel label, .feedback-user-builder__options label { color: var(--ds-body); font-family: var(--ds-sans); } .feedback-user-builder__target-field.has-error input, .feedback-user-builder__field-error { border-color: var(--ds-error) !important; color: var(--ds-error); } .feedback-user-builder__color-swatch { border: 1px solid var(--ds-hairline-strong); border-radius: var(--ds-r-md); } .feedback-user-builder__result code, .feedback-share-modal__link code { border-radius: var(--ds-r-md); background: var(--ds-surface-dark); color: #e7e5e4; font-family: var(--ds-mono); } .feedback-user-builder__preview-head, .feedback-template-picker__modal-toolbar { border-bottom: 1px solid var(--ds-hairline); background: var(--ds-canvas-soft); } .feedback-user-builder__preview-head strong { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } /* ---- Share modal ---- */ .feedback-share-modal__backdrop, .feedback-preview-modal__backdrop { background: rgba(12, 10, 9, 0.44); } .feedback-share-modal__panel { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-xxl); background: var(--ds-surface-card); box-shadow: 0 24px 64px rgba(12, 10, 9, 0.16); } .feedback-share-modal__panel header { border-bottom: 1px solid var(--ds-hairline); } .feedback-share-modal__panel header span { color: var(--ds-muted); font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; } .feedback-share-modal__panel h2 { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } .feedback-share-modal__panel header p, .feedback-share-modal__link span { color: var(--ds-muted); font-family: var(--ds-sans); } .feedback-share-modal__link { border: 1px solid var(--ds-hairline); border-radius: var(--ds-r-lg); background: var(--ds-canvas-soft); } .feedback-share-modal__link strong { color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 500; } /* ---- Template preview modal on the gallery ---- */ .tg_preview_modal__close, .feedback-share-modal__panel header button, .feedback-preview-modal__header button { border-radius: var(--ds-r-pill); border: 1px solid var(--ds-hairline-strong); background: var(--ds-surface-card); color: var(--ds-ink); } .tg_preview_modal__close:hover { border-color: var(--ds-primary); background: var(--ds-surface-card); color: var(--ds-ink); } .tg_preview_modal__header { border-bottom: 1px solid var(--ds-hairline); background: var(--ds-canvas-soft); } .tg_preview_modal__header h3, .feedback-preview-modal__header h2 { color: var(--ds-ink); font-family: var(--ds-display); font-weight: var(--ds-display-weight); letter-spacing: -0.01em; } /* =========================================================================== 22 — Standalone status pages (root 404) These render outside the (site) layout, so they carry their own wordmark and need the canvas applied directly. =========================================================================== */ .mk_status_page { display: flex; flex-direction: column; min-height: 100vh; background: radial-gradient(760px 420px at 18% 0%, rgba(167, 229, 211, 0.45) 0%, transparent 60%), radial-gradient(700px 400px at 86% 8%, rgba(200, 184, 224, 0.42) 0%, transparent 60%), radial-gradient(600px 340px at 50% 104%, rgba(244, 197, 168, 0.32) 0%, transparent 62%), var(--ds-canvas); } .mk_status_page > .container { display: flex; flex-direction: column; flex: 1; } .mk_status_brand { align-self: flex-start; padding: 32px 0 0; } .mk_status_page .mk_status { flex: 1; padding: 64px 20px 96px; } /* =========================================================================== 23 — Popup builder: calmer, denser control panel --------------------------------------------------------------------------- The builder was reading as cluttered: a full marketing footer under a full-height tool, an oversized serif panel heading duplicating the rail label, uppercase-plus-colon on every control label, and decorative rules between every section. This pass strips the ornament and tightens spacing so the panel is a quiet list of controls next to the canvas. Loaded after section 18, so these win over the earlier `.pb_*` overrides. =========================================================================== */ /* ---- The builder is a full workspace; the marketing footer does not belong. Scoped with :has() so no other page is affected. ---- */ body:has(.pb_root) .footer_section, body:has(.pb_root) .site_footer_rich { display: none; } /* ---- Panel heading: the rail already names the active section, so this drops from a 24px serif display to a quiet caption. ---- */ .pb_panel_heading { padding: 1.4rem 1.6rem 0.2rem; } .pb_panel_heading h2 { font-family: var(--ds-sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ds-muted); } /* ---- Section rhythm: hairline separators only, no gradient fills ---- */ .pb_section, .pb_section:hover { padding: 1.6rem; background: var(--ds-surface-card); border-bottom: 1px solid var(--ds-hairline-soft); } .pb_section_head { margin-bottom: 1rem; } .pb_section_head h3 { padding-bottom: 0; font-family: var(--ds-sans); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; color: var(--ds-ink); } /* The little accent bar under every section title was pure decoration. */ .pb_section_head h3::after { display: none; } .pb_section_head p { margin-top: 0.3rem; font-size: 1.2rem; line-height: 1.45; color: var(--ds-muted); } .pb_section_body { gap: 1.4rem; } /* ---- Control labels: sentence case, no trailing colon ---- */ .pb_field { gap: 0.5rem; } .pb_field_label { display: block; font-family: var(--ds-sans); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ds-ink); } .pb_field_label::after { content: none; } .pb_field_hint { margin-top: 0; font-size: 1.15rem; line-height: 1.45; color: var(--ds-muted); } /* ---- Inputs: slightly shorter, softer radius, no inner shadow ---- */ .pb_input, .pb_textarea, select.pb_input { min-height: 4rem; padding: 0.7rem 1rem; border-radius: var(--ds-r-md); font-size: 1.35rem; box-shadow: none; } .pb_textarea { min-height: 7rem; } /* ---- Palette swatches: a tighter grid with less chrome ---- */ .pb_palettes { gap: 0.5rem; } .pb_palette { gap: 0.35rem; padding: 0.5rem; border-radius: var(--ds-r-md); } .pb_palette_swatches { height: 1.4rem; border-radius: var(--ds-r-xs); } .pb_palette_name { font-size: 1.1rem; font-weight: 400; color: var(--ds-body); } /* ---- Segmented controls and checks: less padding, no heavy fills ---- */ .pb_seg { gap: 0.2rem; padding: 0.3rem; } .pb_seg_btn { min-height: 3rem; padding: 0.4rem 1.1rem; font-size: 1.25rem; font-weight: 500; } .pb_check { gap: 0.7rem; padding: 0.9rem 1.1rem; border-radius: var(--ds-r-md); font-size: 1.3rem; font-weight: 400; } .pb_check input[type="checkbox"] { width: 1.7rem; height: 1.7rem; } /* ---- Colour row ---- */ .pb_color input[type="color"] { width: 3.2rem; height: 3.2rem; border-radius: var(--ds-r-md); } /* ---- Collapsible detail blocks: flatten the nesting ---- */ .pb_editor_details, .pb_typography_group, .pb_placeholder_grid, .pb_schedule_hint { padding: 1rem; border-radius: var(--ds-r-md); } .pb_typography_toggle > summary { font-size: 1.3rem; font-weight: 500; } /* ---- Stage toolbar: match the panel's quieter voice ---- */ .pb_stage_toolbar { padding: 1rem 1.6rem; } .pb_stage_title { font-size: 1.2rem; }