WordPress.org
Get WordPress

Plugin Directory

Changeset 3787274


Ignore:
Timestamp:
11/06/2026 06:16:21 AM (3 days ago)
Author:
remwes
Message:

Redesigned upgrade window with Monthly/Yearly toggle, Enter your key button added

Location:
autocontent
Files:
12 edited
1 copied

Legend:

Unmodified
Added
Removed

  • autocontent/tags/1.38/autocontent-intro.php

    r3413209 r3787274  
    7878function autocontent_enqueue_styles($hook) {
    7979    if ($hook === 'toplevel_page_autocontent-setup') {
    80         wp_enqueue_style('autocontent-setup-style', plugins_url('css/intro-style.css?id=1', __FILE__));
     80        wp_enqueue_style('autocontent-setup-style', plugins_url('css/intro-style.css', __FILE__), array(), autocontent_asset_version('css/intro-style.css'));
    8181    }
    8282}

  • autocontent/tags/1.38/autocontent.php

    r3787244 r3787274  
    55 * Plugin URI:  https://autocontent.com/about/
    66 * Description:   The simplest solution for automating content creation on WordPress.
    7  * Version:  1.37
     7 * Version:  1.38
    88 * Requires at least:  6.5
    99 * Requires PHP:  8.2
    … …  
    2424add_action('wp_enqueue_scripts', 'autocontent_enqueue_jquery');
    2525
     26/**
     27 * Cache-busting version for a plugin asset: the file's modification time, which
     28 * changes whenever the plugin is updated, so browsers never keep a stale copy.
     29 */
     30function autocontent_asset_version($relative_path) {
     31    $mtime = @filemtime(plugin_dir_path(__FILE__) . $relative_path);
     32    return $mtime ? (string) $mtime : '1.38';
     33}
     34
    2635function autocontent_enqueue_admin_scripts($hook) {
    2736    $plugin_url = plugin_dir_url(__FILE__);
    … …  
    2938    // Load scripts only on the "AutoContent Settings" page
    3039    if ($hook === 'toplevel_page_autocontent-settings') {
    31         wp_enqueue_style('autocontent-admin-styles', $plugin_url . 'styles.css', array(), '1.2', 'all');
    32         wp_enqueue_script('autocontent-admin-scripts', $plugin_url . 'script.js', array('jquery'), '1.5', true);
     40        wp_enqueue_style('autocontent-admin-styles', $plugin_url . 'styles.css', array(), autocontent_asset_version('styles.css'), 'all');
     41        wp_enqueue_script('autocontent-admin-scripts', $plugin_url . 'script.js', array('jquery'), autocontent_asset_version('script.js'), true);
    3342        wp_localize_script('autocontent-admin-scripts', 'autocontent_vars', array(
    3443            'ac_domain' => AUTOCONTENT_DOMAIN,
    … …  
    4958        $current_tab = isset($_GET['tab']) ? sanitize_text_field($_GET['tab']) : 'intro';
    5059
    51         wp_enqueue_style('autocontent-setup-styles', $plugin_url . 'css/setup-style.css?id=20', array(), '1.0', 'all');
    52         wp_enqueue_script('autocontent-setup-scripts', $plugin_url . 'js/setup-wizard.js?id=22', array('jquery'), '1.0', true);
     60        wp_enqueue_style('autocontent-setup-styles', $plugin_url . 'css/setup-style.css', array(), autocontent_asset_version('css/setup-style.css'), 'all');
     61        wp_enqueue_script('autocontent-setup-scripts', $plugin_url . 'js/setup-wizard.js', array('jquery'), autocontent_asset_version('js/setup-wizard.js'), true);
    5362        wp_enqueue_script('confetti', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js', [], null, true);
    5463
    5564        if ($current_tab === 'precheck') {
    56             wp_enqueue_script('autocontent-precheck', $plugin_url . 'js/ac-precheck.js?id=2', ['jquery'], '1.0', true);
     65            wp_enqueue_script('autocontent-precheck', $plugin_url . 'js/ac-precheck.js', ['jquery'], autocontent_asset_version('js/ac-precheck.js'), true);
    5766        }
    5867

  • autocontent/tags/1.38/readme.txt

    r3787244 r3787274  
    44Requires at least: 6.5
    55Tested up to: 7.1
    6 Stable tag: 1.37
     6Stable tag: 1.38
    77Requires PHP: 8.2
    88License: GPLv2 or later
    … …  
    7171== Changelog ==
    7272
     73= 1.38 =
     74* Redesigned upgrade window: Monthly/Yearly toggle (save 25% yearly), clearer pricing and features, and a "Get Premium" button.
     75* "Already subscribed? Enter your key" is now a clear button, with a matching key screen and a way back to the plans.
     76* Plugin scripts and styles now update in the browser right after a plugin update (no more stale cached copies).
     77
    7378= 1.37 =
    7479* Upgrade window now offers Autocontent Premium at $25/month, or $225/year, matching autocontent.com pricing.

  • autocontent/tags/1.38/script.js

    r3787244 r3787274  
    2525        const modalHtml = `
    2626        <div id="upgradeModal" class="modal-overlay">
    27             <div class="modal-container">
    28                 <span class="modal-close">&times;</span>
    29                
     27            <div class="modal-container ac-upgrade" role="dialog" aria-modal="true" aria-labelledby="ac-upgrade-title">
     28                <button type="button" class="modal-close" aria-label="Close">&times;</button>
     29
    3030                <div id="modal-content-wrapper">
    31                     <!-- User Plans Block -->
    32                     <div class="ac-plans-section">
    33    
    34                         <!-- Autocontent Premium (matches autocontent.com/pricing) -->
    35                         <div class="ac-plan-card">
    36                             <div class="ac-plan-header">
    37                                 <h1>Autocontent Premium</h1>
    38                                 <p class="ac-plan-price">$25<span style="font-size: 12px; font-weight: normal;">/mo.</span></p>
    39                             </div>
    40                             <div class="ac-plan-body">
    41                                 <ul class="ac-plan-description">
    42                                     <li>Fresh, genuine content posted <strong>DAILY</strong></li>
    43                                     <li><strong>SEO optimized</strong> for your keywords</li>
    44                                     <li><strong>Unique image</strong> with every post</li>
    45                                     <li><strong>Increased</strong> crawl frequency and visibility</li>
    46                                     <li><strong>Twenty</strong> WriteNow* Credits</li>
    47                                     <li><strong>Automatically</strong> posted</li>
    48                                 </ul>
    49                             </div>
    50                             <div class="ac-plan-footer">
    51                                 <a href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=1"
    52                                     target="_blank" class="button button_theme">Purchase</a>
    53                                 <p style="margin: 8px 0 0; font-size: 12px;">or <a href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=2" target="_blank">$225/year</a></p>
    54                             </div>
    55 <!--                            <div class='ribbon-wrapper'>-->
    56 <!--                              <div class='ribbon ribbon-blue'>Best Value</div>-->
    57 <!--                            </div>-->
     31                    <div class="ac-upgrade__hero">
     32                        <span class="ac-upgrade__eyebrow">Upgrade</span>
     33                        <h2 id="ac-upgrade-title" class="ac-upgrade__title">Autocontent Premium</h2>
     34                        <p class="ac-upgrade__tagline">Fresh, SEO-optimized posts on your blog every day, on autopilot.</p>
     35                    </div>
     36
     37                    <div class="ac-upgrade__body">
     38                        <div class="ac-upgrade__toggle" role="group" aria-label="Billing period">
     39                            <button type="button" class="is-active" data-ac-billing="monthly" aria-pressed="true">Monthly</button>
     40                            <button type="button" data-ac-billing="yearly" aria-pressed="false">Yearly <span class="ac-upgrade__save">Save 25%</span></button>
    5841                        </div>
    59    
    60                     </div>
    61                     <br />
    62                     <center><span><strong>*</strong> "WriteNow" Credits: Allows you to generate a post on-demand.</span></center>
    63                     <br />
    64                
    65                     <div class="modal-content-upgrade">
    66                         <a href="#" id="have_key_link_modal">Already Subscribed?</a>
     42
     43                        <div class="ac-upgrade__price">
     44                            <span class="ac-upgrade__amount" data-ac-amount>$25</span>
     45                            <span class="ac-upgrade__period" data-ac-period>/month</span>
     46                        </div>
     47                        <p class="ac-upgrade__price-note" data-ac-note>Billed monthly</p>
     48
     49                        <ul class="ac-upgrade__features">
     50                            <li>Fresh, genuine content posted <strong>daily</strong></li>
     51                            <li><strong>SEO optimized</strong> for your keywords</li>
     52                            <li>A <strong>unique image</strong> with every post</li>
     53                            <li><strong>Increased</strong> crawl frequency and visibility</li>
     54                            <li><strong>Twenty</strong> WriteNow credits*</li>
     55                            <li><strong>Automatically</strong> posted for you</li>
     56                        </ul>
     57
     58                        <a class="ac-upgrade__cta" data-ac-cta target="_blank" rel="noopener"
     59                           href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=1">Get Premium</a>
     60                        <p class="ac-upgrade__secure">Secure checkout at autocontent.com</p>
     61
     62                        <div class="ac-upgrade__divider"><span>or</span></div>
     63
     64                        <div class="modal-content-upgrade">
     65                            <button type="button" id="have_key_link_modal" class="ac-enter-key-button">Already subscribed? Enter your key</button>
     66                        </div>
     67
     68                        <p class="ac-upgrade__footnote">* WriteNow credits let you generate a post on demand.</p>
    6769                    </div>
    6870                </div>
    69                        
     71
    7072                <!-- Hidden Key Activation Section -->
    7173                <div id="key_activation_section" class="hidden">
    72                     <label for="premium_activation_key">Enter the Activation Key for your Premium Plan Subscription</label>
    73                     <div class="key-input-wrapper">
    74                         <input type="text" id="premium_activation_key" name="premium_activation_key" class="edd-required edd-input" placeholder="Activation Key" required/>
    75                         <button type="button" id="activate_key_button" class="button button-secondary">Verify</button>
     74                    <div class="ac-upgrade__hero ac-upgrade__hero--compact">
     75                        <span class="ac-upgrade__eyebrow">Activate</span>
     76                        <h2 class="ac-upgrade__title">Enter your key</h2>
     77                        <p class="ac-upgrade__tagline">Find it on your order confirmation page or in your welcome email.</p>
     78                    </div>
     79                    <div class="ac-upgrade__body">
     80                        <label for="premium_activation_key">Your Autocontent Premium activation key</label>
     81                        <div class="key-input-wrapper">
     82                            <input type="text" id="premium_activation_key" name="premium_activation_key" class="edd-required edd-input" placeholder="AC-xxxxxxxxxxxxxxxx" autocomplete="off" spellcheck="false" required/>
     83                            <button type="button" id="activate_key_button" class="button button-secondary">Verify</button>
     84                        </div>
     85                        <button type="button" class="ac-upgrade__back" data-ac-back>&larr; Back to plans</button>
    7686                    </div>
    7787                </div>
    … …  
    96106        // Handle click events using event delegation
    97107        modal.addEventListener("click", function (event) {
    98             if (event.target.matches(".modal-close") || event.target === modal) {
     108            if (event.target.closest(".modal-close") || event.target === modal) {
    99109                closeModal();
    100             } else if (event.target.matches("#have_key_link_modal")) {
     110            } else if (event.target.closest("[data-ac-billing]")) {
     111                const choice = event.target.closest("[data-ac-billing]").getAttribute("data-ac-billing");
     112                const plans = {
     113                    monthly: { amount: "$25", period: "/month", note: "Billed monthly", priceId: 1 },
     114                    yearly:  { amount: "$225", period: "/year", note: "Just $18.75/month, save $75 a year", priceId: 2 }
     115                };
     116                const plan = plans[choice];
     117                modal.querySelectorAll("[data-ac-billing]").forEach(b => {
     118                    const on = b.getAttribute("data-ac-billing") === choice;
     119                    b.classList.toggle("is-active", on);
     120                    b.setAttribute("aria-pressed", on ? "true" : "false");
     121                });
     122                modal.querySelector("[data-ac-amount]").textContent = plan.amount;
     123                modal.querySelector("[data-ac-period]").textContent = plan.period;
     124                modal.querySelector("[data-ac-note]").textContent = plan.note;
     125                modal.querySelector("[data-ac-cta]").href =
     126                    "https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=" + plan.priceId;
     127            } else if (event.target.closest("[data-ac-back]")) {
     128                keyActivationSection.style.display = "none";
     129                modalContentWrapper.style.display = "block";
     130            } else if (event.target.closest("#have_key_link_modal")) {
    101131                event.preventDefault();
    102132                modalContentWrapper.style.display = "none"; // Hide everything else
    103133                keyActivationSection.style.display = "block"; // Show key activation
     134                document.getElementById("premium_activation_key")?.focus();
    104135            }
    105136        });

  • autocontent/tags/1.38/setup-wizard.php

    r3413209 r3787274  
    429429    autocontent_log_error_message('autocontent_enqueue_scripts function called for hook: ' . $hook);
    430430    if ($hook === 'toplevel_page_autocontent-setup') {
    431         wp_enqueue_script('autocontent-setup-script', plugins_url('js/setup-wizard.js?id=3', __FILE__), ['jquery'], null, true);
     431        wp_enqueue_script('autocontent-setup-script', plugins_url('js/setup-wizard.js', __FILE__), ['jquery'], autocontent_asset_version('js/setup-wizard.js'), true);
    432432        autocontent_log_error_message('autocontent-setup-script enqueued.');
    433433    }
    … …  
    439439    autocontent_log_error_message('autocontent_enqueue_styles function called for hook: ' . $hook);
    440440    if ($hook === 'toplevel_page_autocontent-setup') {
    441         wp_enqueue_style('autocontent-intro-style', plugins_url('css/intro-style.css?id=3', __FILE__));
    442         wp_enqueue_style('autocontent-setup-style', plugins_url('css/setup-style.css?id=3', __FILE__));
     441        wp_enqueue_style('autocontent-intro-style', plugins_url('css/intro-style.css', __FILE__), array(), autocontent_asset_version('css/intro-style.css'));
     442        wp_enqueue_style('autocontent-setup-style', plugins_url('css/setup-style.css', __FILE__), array(), autocontent_asset_version('css/setup-style.css'));
    443443        autocontent_log_error_message('autocontent-intro-style and autocontent-setup-style enqueued.');
    444444    }

  • autocontent/tags/1.38/styles.css

    r3413209 r3787274  
    237237}
    238238
     239/* "Already subscribed? Enter your key" button */
     240.modal-content-upgrade .ac-enter-key-button {
     241    align-self: center;
     242    padding: 10px 22px;
     243    border: 2px solid #007bff;
     244    border-radius: 6px;
     245    background: #fff;
     246    color: #007bff;
     247    font-weight: 600;
     248    font-size: 15px;
     249    line-height: 1.3;
     250    cursor: pointer;
     251    transition: background 0.2s, color 0.2s;
     252}
     253
     254.modal-content-upgrade .ac-enter-key-button:hover,
     255.modal-content-upgrade .ac-enter-key-button:focus-visible {
     256    background: #007bff;
     257    color: #fff;
     258    outline: none;
     259}
     260
    239261/* Fade-in animation */
    240262@keyframes fadeIn {
    … …  
    486508    right: 0;
    487509}
     510
     511/* ==========================================================================
     512   Upgrade pop-up (1.38): scoped to #upgradeModal so WP admin styles can't leak in
     513   ========================================================================== */
     514#upgradeModal {
     515    --ac-blue: #3d89fb;
     516    --ac-blue-dark: #2a6fd6;
     517    --ac-navy: #0b1220;
     518    --ac-navy-2: #16233d;
     519    --ac-ink: #1d2433;
     520    --ac-muted: #5b6577;
     521    --ac-line: #e6e9f0;
     522    --ac-green: #1f9d55;
     523}
     524
     525#upgradeModal .modal-container.ac-upgrade {
     526    padding: 0;
     527    max-width: 440px;
     528    max-height: calc(100vh - 40px);
     529    overflow-y: auto;
     530    border-radius: 16px;
     531    box-shadow: 0 24px 60px rgba(8, 15, 30, 0.35);
     532    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     533    color: var(--ac-ink);
     534}
     535
     536#upgradeModal .modal-close {
     537    top: 12px;
     538    right: 12px;
     539    width: 32px;
     540    height: 32px;
     541    padding: 0;
     542    border: 0;
     543    border-radius: 50%;
     544    background: rgba(255, 255, 255, 0.12);
     545    color: #fff;
     546    font-size: 22px;
     547    line-height: 32px;
     548    text-align: center;
     549    z-index: 2;
     550    transition: background 0.2s;
     551}
     552#upgradeModal .modal-close:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
     553
     554/* Header band */
     555#upgradeModal .ac-upgrade__hero {
     556    padding: 30px 32px 26px;
     557    text-align: center;
     558    color: #fff;
     559    background:
     560        radial-gradient(120% 140% at 100% 0%, rgba(61, 137, 251, 0.45) 0%, rgba(61, 137, 251, 0) 55%),
     561        linear-gradient(160deg, var(--ac-navy-2) 0%, var(--ac-navy) 100%);
     562}
     563#upgradeModal .ac-upgrade__hero--compact { padding: 26px 32px 22px; }
     564#upgradeModal .ac-upgrade__eyebrow {
     565    display: inline-block;
     566    padding: 4px 10px;
     567    border-radius: 999px;
     568    background: rgba(61, 137, 251, 0.2);
     569    color: #9cc3ff;
     570    font-size: 11px;
     571    font-weight: 700;
     572    letter-spacing: 0.12em;
     573    text-transform: uppercase;
     574}
     575#upgradeModal .ac-upgrade__title {
     576    margin: 12px 0 6px;
     577    padding: 0;
     578    color: #fff;
     579    font-size: 26px;
     580    font-weight: 800;
     581    line-height: 1.2;
     582    letter-spacing: -0.01em;
     583}
     584#upgradeModal .ac-upgrade__tagline {
     585    margin: 0;
     586    color: #c5d0e3;
     587    font-size: 14px;
     588    line-height: 1.5;
     589}
     590
     591/* Body */
     592#upgradeModal .ac-upgrade__body { padding: 24px 32px 26px; text-align: center; }
     593
     594/* Monthly / Yearly toggle */
     595#upgradeModal .ac-upgrade__toggle {
     596    display: inline-flex;
     597    gap: 4px;
     598    padding: 4px;
     599    border-radius: 999px;
     600    background: #eef2f8;
     601}
     602#upgradeModal .ac-upgrade__toggle button {
     603    display: inline-flex;
     604    align-items: center;
     605    gap: 6px;
     606    padding: 8px 16px;
     607    border: 0;
     608    border-radius: 999px;
     609    background: transparent;
     610    color: var(--ac-muted);
     611    font-size: 14px;
     612    font-weight: 600;
     613    cursor: pointer;
     614    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
     615}
     616#upgradeModal .ac-upgrade__toggle button.is-active {
     617    background: #fff;
     618    color: var(--ac-ink);
     619    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
     620}
     621#upgradeModal .ac-upgrade__save {
     622    padding: 2px 7px;
     623    border-radius: 999px;
     624    background: rgba(31, 157, 85, 0.12);
     625    color: var(--ac-green);
     626    font-size: 11px;
     627    font-weight: 700;
     628}
     629
     630/* Price */
     631#upgradeModal .ac-upgrade__price {
     632    display: flex;
     633    justify-content: center;
     634    align-items: baseline;
     635    gap: 4px;
     636    margin-top: 18px;
     637}
     638#upgradeModal .ac-upgrade__amount {
     639    font-size: 46px;
     640    font-weight: 800;
     641    line-height: 1;
     642    letter-spacing: -0.03em;
     643    color: var(--ac-ink);
     644}
     645#upgradeModal .ac-upgrade__period { font-size: 16px; font-weight: 600; color: var(--ac-muted); }
     646#upgradeModal .ac-upgrade__price-note { margin: 6px 0 0; font-size: 13px; color: var(--ac-muted); }
     647
     648/* Feature list with checkmarks */
     649#upgradeModal .ac-upgrade__features {
     650    margin: 20px auto 22px;
     651    padding: 0;
     652    max-width: 320px;
     653    list-style: none;
     654    text-align: left;
     655}
     656#upgradeModal .ac-upgrade__features li {
     657    position: relative;
     658    margin: 0;
     659    padding: 7px 0 7px 30px;
     660    font-size: 14px;
     661    line-height: 1.45;
     662    color: var(--ac-ink);
     663}
     664#upgradeModal .ac-upgrade__features li::before {
     665    content: "";
     666    position: absolute;
     667    left: 0;
     668    top: 8px;
     669    width: 20px;
     670    height: 20px;
     671    border-radius: 50%;
     672    background: rgba(61, 137, 251, 0.14)
     673        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%233d89fb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
     674        center / 14px no-repeat;
     675}
     676
     677/* Primary call to action */
     678#upgradeModal .ac-upgrade__cta {
     679    display: block;
     680    padding: 14px 20px;
     681    border-radius: 10px;
     682    background: linear-gradient(180deg, #4f97ff 0%, var(--ac-blue) 100%);
     683    box-shadow: 0 8px 18px rgba(61, 137, 251, 0.35);
     684    color: #fff;
     685    font-size: 16px;
     686    font-weight: 700;
     687    text-decoration: none;
     688    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
     689}
     690#upgradeModal .ac-upgrade__cta:hover,
     691#upgradeModal .ac-upgrade__cta:focus-visible {
     692    color: #fff;
     693    background: linear-gradient(180deg, var(--ac-blue) 0%, var(--ac-blue-dark) 100%);
     694    box-shadow: 0 10px 22px rgba(61, 137, 251, 0.45);
     695    transform: translateY(-1px);
     696    outline: none;
     697}
     698#upgradeModal .ac-upgrade__secure { margin: 10px 0 0; font-size: 12px; color: var(--ac-muted); }
     699#upgradeModal .ac-upgrade__secure::before { content: "\1F512\00a0"; }
     700
     701/* "or" divider */
     702#upgradeModal .ac-upgrade__divider {
     703    display: flex;
     704    align-items: center;
     705    gap: 12px;
     706    margin: 20px 0 16px;
     707    color: #9aa3b2;
     708    font-size: 12px;
     709    text-transform: uppercase;
     710    letter-spacing: 0.1em;
     711}
     712#upgradeModal .ac-upgrade__divider::before,
     713#upgradeModal .ac-upgrade__divider::after { content: ""; flex: 1; height: 1px; background: var(--ac-line); }
     714
     715/* Enter-your-key button (secondary) */
     716#upgradeModal .modal-content-upgrade .ac-enter-key-button {
     717    width: 100%;
     718    padding: 12px 18px;
     719    border: 1.5px solid var(--ac-line);
     720    border-radius: 10px;
     721    background: #fff;
     722    color: var(--ac-ink);
     723    font-size: 15px;
     724    font-weight: 600;
     725}
     726#upgradeModal .modal-content-upgrade .ac-enter-key-button:hover,
     727#upgradeModal .modal-content-upgrade .ac-enter-key-button:focus-visible {
     728    border-color: var(--ac-blue);
     729    background: #f4f8ff;
     730    color: var(--ac-blue-dark);
     731}
     732
     733#upgradeModal .ac-upgrade__footnote { margin: 16px 0 0; font-size: 12px; color: #8a93a3; }
     734
     735/* Key screen */
     736#upgradeModal #key_activation_section {
     737    max-width: none;
     738    margin: 0;
     739    padding: 0;
     740    border: 0;
     741    border-radius: 0;
     742    background: #fff;
     743    box-shadow: none;
     744}
     745#upgradeModal #key_activation_section label {
     746    margin-bottom: 10px;
     747    font-size: 14px;
     748    font-weight: 600;
     749    color: var(--ac-ink);
     750}
     751#upgradeModal #premium_activation_key {
     752    padding: 12px 14px;
     753    border: 1.5px solid var(--ac-line);
     754    border-radius: 10px;
     755    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     756    font-size: 15px;
     757    box-shadow: none;
     758}
     759#upgradeModal #premium_activation_key:focus {
     760    border-color: var(--ac-blue);
     761    box-shadow: 0 0 0 3px rgba(61, 137, 251, 0.18);
     762}
     763#upgradeModal #activate_key_button {
     764    min-height: 46px;
     765    padding: 0 22px;
     766    border-radius: 10px;
     767    background: var(--ac-blue);
     768    box-shadow: 0 6px 14px rgba(61, 137, 251, 0.3);
     769    color: #fff;
     770}
     771#upgradeModal #activate_key_button:hover { background: var(--ac-blue-dark); }
     772#upgradeModal .ac-upgrade__back {
     773    margin-top: 18px;
     774    padding: 0;
     775    border: 0;
     776    background: none;
     777    color: var(--ac-muted);
     778    font-size: 13px;
     779    font-weight: 600;
     780    cursor: pointer;
     781}
     782#upgradeModal .ac-upgrade__back:hover { color: var(--ac-blue); }
     783
     784@media (max-width: 480px) {
     785    #upgradeModal .modal-container.ac-upgrade { width: calc(100% - 24px); }
     786    #upgradeModal .ac-upgrade__hero,
     787    #upgradeModal .ac-upgrade__body { padding-left: 20px; padding-right: 20px; }
     788    #upgradeModal .ac-upgrade__title { font-size: 22px; }
     789    #upgradeModal .ac-upgrade__amount { font-size: 40px; }
     790}
     791
     792@media (prefers-reduced-motion: reduce) {
     793    #upgradeModal .ac-upgrade__cta,
     794    #upgradeModal .ac-upgrade__toggle button { transition: none; }
     795    #upgradeModal .ac-upgrade__cta:hover { transform: none; }
     796}

  • autocontent/trunk/autocontent-intro.php

    r3413209 r3787274  
    7878function autocontent_enqueue_styles($hook) {
    7979    if ($hook === 'toplevel_page_autocontent-setup') {
    80         wp_enqueue_style('autocontent-setup-style', plugins_url('css/intro-style.css?id=1', __FILE__));
     80        wp_enqueue_style('autocontent-setup-style', plugins_url('css/intro-style.css', __FILE__), array(), autocontent_asset_version('css/intro-style.css'));
    8181    }
    8282}

  • autocontent/trunk/autocontent.php

    r3787244 r3787274  
    55 * Plugin URI:  https://autocontent.com/about/
    66 * Description:   The simplest solution for automating content creation on WordPress.
    7  * Version:  1.37
     7 * Version:  1.38
    88 * Requires at least:  6.5
    99 * Requires PHP:  8.2
    … …  
    2424add_action('wp_enqueue_scripts', 'autocontent_enqueue_jquery');
    2525
     26/**
     27 * Cache-busting version for a plugin asset: the file's modification time, which
     28 * changes whenever the plugin is updated, so browsers never keep a stale copy.
     29 */
     30function autocontent_asset_version($relative_path) {
     31    $mtime = @filemtime(plugin_dir_path(__FILE__) . $relative_path);
     32    return $mtime ? (string) $mtime : '1.38';
     33}
     34
    2635function autocontent_enqueue_admin_scripts($hook) {
    2736    $plugin_url = plugin_dir_url(__FILE__);
    … …  
    2938    // Load scripts only on the "AutoContent Settings" page
    3039    if ($hook === 'toplevel_page_autocontent-settings') {
    31         wp_enqueue_style('autocontent-admin-styles', $plugin_url . 'styles.css', array(), '1.2', 'all');
    32         wp_enqueue_script('autocontent-admin-scripts', $plugin_url . 'script.js', array('jquery'), '1.5', true);
     40        wp_enqueue_style('autocontent-admin-styles', $plugin_url . 'styles.css', array(), autocontent_asset_version('styles.css'), 'all');
     41        wp_enqueue_script('autocontent-admin-scripts', $plugin_url . 'script.js', array('jquery'), autocontent_asset_version('script.js'), true);
    3342        wp_localize_script('autocontent-admin-scripts', 'autocontent_vars', array(
    3443            'ac_domain' => AUTOCONTENT_DOMAIN,
    … …  
    4958        $current_tab = isset($_GET['tab']) ? sanitize_text_field($_GET['tab']) : 'intro';
    5059
    51         wp_enqueue_style('autocontent-setup-styles', $plugin_url . 'css/setup-style.css?id=20', array(), '1.0', 'all');
    52         wp_enqueue_script('autocontent-setup-scripts', $plugin_url . 'js/setup-wizard.js?id=22', array('jquery'), '1.0', true);
     60        wp_enqueue_style('autocontent-setup-styles', $plugin_url . 'css/setup-style.css', array(), autocontent_asset_version('css/setup-style.css'), 'all');
     61        wp_enqueue_script('autocontent-setup-scripts', $plugin_url . 'js/setup-wizard.js', array('jquery'), autocontent_asset_version('js/setup-wizard.js'), true);
    5362        wp_enqueue_script('confetti', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js', [], null, true);
    5463
    5564        if ($current_tab === 'precheck') {
    56             wp_enqueue_script('autocontent-precheck', $plugin_url . 'js/ac-precheck.js?id=2', ['jquery'], '1.0', true);
     65            wp_enqueue_script('autocontent-precheck', $plugin_url . 'js/ac-precheck.js', ['jquery'], autocontent_asset_version('js/ac-precheck.js'), true);
    5766        }
    5867

  • autocontent/trunk/readme.txt

    r3787244 r3787274  
    44Requires at least: 6.5
    55Tested up to: 7.1
    6 Stable tag: 1.37
     6Stable tag: 1.38
    77Requires PHP: 8.2
    88License: GPLv2 or later
    … …  
    7171== Changelog ==
    7272
     73= 1.38 =
     74* Redesigned upgrade window: Monthly/Yearly toggle (save 25% yearly), clearer pricing and features, and a "Get Premium" button.
     75* "Already subscribed? Enter your key" is now a clear button, with a matching key screen and a way back to the plans.
     76* Plugin scripts and styles now update in the browser right after a plugin update (no more stale cached copies).
     77
    7378= 1.37 =
    7479* Upgrade window now offers Autocontent Premium at $25/month, or $225/year, matching autocontent.com pricing.

  • autocontent/trunk/script.js

    r3787244 r3787274  
    2525        const modalHtml = `
    2626        <div id="upgradeModal" class="modal-overlay">
    27             <div class="modal-container">
    28                 <span class="modal-close">&times;</span>
    29                
     27            <div class="modal-container ac-upgrade" role="dialog" aria-modal="true" aria-labelledby="ac-upgrade-title">
     28                <button type="button" class="modal-close" aria-label="Close">&times;</button>
     29
    3030                <div id="modal-content-wrapper">
    31                     <!-- User Plans Block -->
    32                     <div class="ac-plans-section">
    33    
    34                         <!-- Autocontent Premium (matches autocontent.com/pricing) -->
    35                         <div class="ac-plan-card">
    36                             <div class="ac-plan-header">
    37                                 <h1>Autocontent Premium</h1>
    38                                 <p class="ac-plan-price">$25<span style="font-size: 12px; font-weight: normal;">/mo.</span></p>
    39                             </div>
    40                             <div class="ac-plan-body">
    41                                 <ul class="ac-plan-description">
    42                                     <li>Fresh, genuine content posted <strong>DAILY</strong></li>
    43                                     <li><strong>SEO optimized</strong> for your keywords</li>
    44                                     <li><strong>Unique image</strong> with every post</li>
    45                                     <li><strong>Increased</strong> crawl frequency and visibility</li>
    46                                     <li><strong>Twenty</strong> WriteNow* Credits</li>
    47                                     <li><strong>Automatically</strong> posted</li>
    48                                 </ul>
    49                             </div>
    50                             <div class="ac-plan-footer">
    51                                 <a href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=1"
    52                                     target="_blank" class="button button_theme">Purchase</a>
    53                                 <p style="margin: 8px 0 0; font-size: 12px;">or <a href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=2" target="_blank">$225/year</a></p>
    54                             </div>
    55 <!--                            <div class='ribbon-wrapper'>-->
    56 <!--                              <div class='ribbon ribbon-blue'>Best Value</div>-->
    57 <!--                            </div>-->
     31                    <div class="ac-upgrade__hero">
     32                        <span class="ac-upgrade__eyebrow">Upgrade</span>
     33                        <h2 id="ac-upgrade-title" class="ac-upgrade__title">Autocontent Premium</h2>
     34                        <p class="ac-upgrade__tagline">Fresh, SEO-optimized posts on your blog every day, on autopilot.</p>
     35                    </div>
     36
     37                    <div class="ac-upgrade__body">
     38                        <div class="ac-upgrade__toggle" role="group" aria-label="Billing period">
     39                            <button type="button" class="is-active" data-ac-billing="monthly" aria-pressed="true">Monthly</button>
     40                            <button type="button" data-ac-billing="yearly" aria-pressed="false">Yearly <span class="ac-upgrade__save">Save 25%</span></button>
    5841                        </div>
    59    
    60                     </div>
    61                     <br />
    62                     <center><span><strong>*</strong> "WriteNow" Credits: Allows you to generate a post on-demand.</span></center>
    63                     <br />
    64                
    65                     <div class="modal-content-upgrade">
    66                         <a href="#" id="have_key_link_modal">Already Subscribed?</a>
     42
     43                        <div class="ac-upgrade__price">
     44                            <span class="ac-upgrade__amount" data-ac-amount>$25</span>
     45                            <span class="ac-upgrade__period" data-ac-period>/month</span>
     46                        </div>
     47                        <p class="ac-upgrade__price-note" data-ac-note>Billed monthly</p>
     48
     49                        <ul class="ac-upgrade__features">
     50                            <li>Fresh, genuine content posted <strong>daily</strong></li>
     51                            <li><strong>SEO optimized</strong> for your keywords</li>
     52                            <li>A <strong>unique image</strong> with every post</li>
     53                            <li><strong>Increased</strong> crawl frequency and visibility</li>
     54                            <li><strong>Twenty</strong> WriteNow credits*</li>
     55                            <li><strong>Automatically</strong> posted for you</li>
     56                        </ul>
     57
     58                        <a class="ac-upgrade__cta" data-ac-cta target="_blank" rel="noopener"
     59                           href="https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=1">Get Premium</a>
     60                        <p class="ac-upgrade__secure">Secure checkout at autocontent.com</p>
     61
     62                        <div class="ac-upgrade__divider"><span>or</span></div>
     63
     64                        <div class="modal-content-upgrade">
     65                            <button type="button" id="have_key_link_modal" class="ac-enter-key-button">Already subscribed? Enter your key</button>
     66                        </div>
     67
     68                        <p class="ac-upgrade__footnote">* WriteNow credits let you generate a post on demand.</p>
    6769                    </div>
    6870                </div>
    69                        
     71
    7072                <!-- Hidden Key Activation Section -->
    7173                <div id="key_activation_section" class="hidden">
    72                     <label for="premium_activation_key">Enter the Activation Key for your Premium Plan Subscription</label>
    73                     <div class="key-input-wrapper">
    74                         <input type="text" id="premium_activation_key" name="premium_activation_key" class="edd-required edd-input" placeholder="Activation Key" required/>
    75                         <button type="button" id="activate_key_button" class="button button-secondary">Verify</button>
     74                    <div class="ac-upgrade__hero ac-upgrade__hero--compact">
     75                        <span class="ac-upgrade__eyebrow">Activate</span>
     76                        <h2 class="ac-upgrade__title">Enter your key</h2>
     77                        <p class="ac-upgrade__tagline">Find it on your order confirmation page or in your welcome email.</p>
     78                    </div>
     79                    <div class="ac-upgrade__body">
     80                        <label for="premium_activation_key">Your Autocontent Premium activation key</label>
     81                        <div class="key-input-wrapper">
     82                            <input type="text" id="premium_activation_key" name="premium_activation_key" class="edd-required edd-input" placeholder="AC-xxxxxxxxxxxxxxxx" autocomplete="off" spellcheck="false" required/>
     83                            <button type="button" id="activate_key_button" class="button button-secondary">Verify</button>
     84                        </div>
     85                        <button type="button" class="ac-upgrade__back" data-ac-back>&larr; Back to plans</button>
    7686                    </div>
    7787                </div>
    … …  
    96106        // Handle click events using event delegation
    97107        modal.addEventListener("click", function (event) {
    98             if (event.target.matches(".modal-close") || event.target === modal) {
     108            if (event.target.closest(".modal-close") || event.target === modal) {
    99109                closeModal();
    100             } else if (event.target.matches("#have_key_link_modal")) {
     110            } else if (event.target.closest("[data-ac-billing]")) {
     111                const choice = event.target.closest("[data-ac-billing]").getAttribute("data-ac-billing");
     112                const plans = {
     113                    monthly: { amount: "$25", period: "/month", note: "Billed monthly", priceId: 1 },
     114                    yearly:  { amount: "$225", period: "/year", note: "Just $18.75/month, save $75 a year", priceId: 2 }
     115                };
     116                const plan = plans[choice];
     117                modal.querySelectorAll("[data-ac-billing]").forEach(b => {
     118                    const on = b.getAttribute("data-ac-billing") === choice;
     119                    b.classList.toggle("is-active", on);
     120                    b.setAttribute("aria-pressed", on ? "true" : "false");
     121                });
     122                modal.querySelector("[data-ac-amount]").textContent = plan.amount;
     123                modal.querySelector("[data-ac-period]").textContent = plan.period;
     124                modal.querySelector("[data-ac-note]").textContent = plan.note;
     125                modal.querySelector("[data-ac-cta]").href =
     126                    "https://autocontent.com/checkout/?edd_action=add_to_cart&download_id=249&edd_options[price_id]=" + plan.priceId;
     127            } else if (event.target.closest("[data-ac-back]")) {
     128                keyActivationSection.style.display = "none";
     129                modalContentWrapper.style.display = "block";
     130            } else if (event.target.closest("#have_key_link_modal")) {
    101131                event.preventDefault();
    102132                modalContentWrapper.style.display = "none"; // Hide everything else
    103133                keyActivationSection.style.display = "block"; // Show key activation
     134                document.getElementById("premium_activation_key")?.focus();
    104135            }
    105136        });

  • autocontent/trunk/setup-wizard.php

    r3413209 r3787274  
    429429    autocontent_log_error_message('autocontent_enqueue_scripts function called for hook: ' . $hook);
    430430    if ($hook === 'toplevel_page_autocontent-setup') {
    431         wp_enqueue_script('autocontent-setup-script', plugins_url('js/setup-wizard.js?id=3', __FILE__), ['jquery'], null, true);
     431        wp_enqueue_script('autocontent-setup-script', plugins_url('js/setup-wizard.js', __FILE__), ['jquery'], autocontent_asset_version('js/setup-wizard.js'), true);
    432432        autocontent_log_error_message('autocontent-setup-script enqueued.');
    433433    }
    … …  
    439439    autocontent_log_error_message('autocontent_enqueue_styles function called for hook: ' . $hook);
    440440    if ($hook === 'toplevel_page_autocontent-setup') {
    441         wp_enqueue_style('autocontent-intro-style', plugins_url('css/intro-style.css?id=3', __FILE__));
    442         wp_enqueue_style('autocontent-setup-style', plugins_url('css/setup-style.css?id=3', __FILE__));
     441        wp_enqueue_style('autocontent-intro-style', plugins_url('css/intro-style.css', __FILE__), array(), autocontent_asset_version('css/intro-style.css'));
     442        wp_enqueue_style('autocontent-setup-style', plugins_url('css/setup-style.css', __FILE__), array(), autocontent_asset_version('css/setup-style.css'));
    443443        autocontent_log_error_message('autocontent-intro-style and autocontent-setup-style enqueued.');
    444444    }

  • autocontent/trunk/styles.css

    r3413209 r3787274  
    237237}
    238238
     239/* "Already subscribed? Enter your key" button */
     240.modal-content-upgrade .ac-enter-key-button {
     241    align-self: center;
     242    padding: 10px 22px;
     243    border: 2px solid #007bff;
     244    border-radius: 6px;
     245    background: #fff;
     246    color: #007bff;
     247    font-weight: 600;
     248    font-size: 15px;
     249    line-height: 1.3;
     250    cursor: pointer;
     251    transition: background 0.2s, color 0.2s;
     252}
     253
     254.modal-content-upgrade .ac-enter-key-button:hover,
     255.modal-content-upgrade .ac-enter-key-button:focus-visible {
     256    background: #007bff;
     257    color: #fff;
     258    outline: none;
     259}
     260
    239261/* Fade-in animation */
    240262@keyframes fadeIn {
    … …  
    486508    right: 0;
    487509}
     510
     511/* ==========================================================================
     512   Upgrade pop-up (1.38): scoped to #upgradeModal so WP admin styles can't leak in
     513   ========================================================================== */
     514#upgradeModal {
     515    --ac-blue: #3d89fb;
     516    --ac-blue-dark: #2a6fd6;
     517    --ac-navy: #0b1220;
     518    --ac-navy-2: #16233d;
     519    --ac-ink: #1d2433;
     520    --ac-muted: #5b6577;
     521    --ac-line: #e6e9f0;
     522    --ac-green: #1f9d55;
     523}
     524
     525#upgradeModal .modal-container.ac-upgrade {
     526    padding: 0;
     527    max-width: 440px;
     528    max-height: calc(100vh - 40px);
     529    overflow-y: auto;
     530    border-radius: 16px;
     531    box-shadow: 0 24px 60px rgba(8, 15, 30, 0.35);
     532    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     533    color: var(--ac-ink);
     534}
     535
     536#upgradeModal .modal-close {
     537    top: 12px;
     538    right: 12px;
     539    width: 32px;
     540    height: 32px;
     541    padding: 0;
     542    border: 0;
     543    border-radius: 50%;
     544    background: rgba(255, 255, 255, 0.12);
     545    color: #fff;
     546    font-size: 22px;
     547    line-height: 32px;
     548    text-align: center;
     549    z-index: 2;
     550    transition: background 0.2s;
     551}
     552#upgradeModal .modal-close:hover { background: rgba(255, 255, 255, 0.25); color: #fff; }
     553
     554/* Header band */
     555#upgradeModal .ac-upgrade__hero {
     556    padding: 30px 32px 26px;
     557    text-align: center;
     558    color: #fff;
     559    background:
     560        radial-gradient(120% 140% at 100% 0%, rgba(61, 137, 251, 0.45) 0%, rgba(61, 137, 251, 0) 55%),
     561        linear-gradient(160deg, var(--ac-navy-2) 0%, var(--ac-navy) 100%);
     562}
     563#upgradeModal .ac-upgrade__hero--compact { padding: 26px 32px 22px; }
     564#upgradeModal .ac-upgrade__eyebrow {
     565    display: inline-block;
     566    padding: 4px 10px;
     567    border-radius: 999px;
     568    background: rgba(61, 137, 251, 0.2);
     569    color: #9cc3ff;
     570    font-size: 11px;
     571    font-weight: 700;
     572    letter-spacing: 0.12em;
     573    text-transform: uppercase;
     574}
     575#upgradeModal .ac-upgrade__title {
     576    margin: 12px 0 6px;
     577    padding: 0;
     578    color: #fff;
     579    font-size: 26px;
     580    font-weight: 800;
     581    line-height: 1.2;
     582    letter-spacing: -0.01em;
     583}
     584#upgradeModal .ac-upgrade__tagline {
     585    margin: 0;
     586    color: #c5d0e3;
     587    font-size: 14px;
     588    line-height: 1.5;
     589}
     590
     591/* Body */
     592#upgradeModal .ac-upgrade__body { padding: 24px 32px 26px; text-align: center; }
     593
     594/* Monthly / Yearly toggle */
     595#upgradeModal .ac-upgrade__toggle {
     596    display: inline-flex;
     597    gap: 4px;
     598    padding: 4px;
     599    border-radius: 999px;
     600    background: #eef2f8;
     601}
     602#upgradeModal .ac-upgrade__toggle button {
     603    display: inline-flex;
     604    align-items: center;
     605    gap: 6px;
     606    padding: 8px 16px;
     607    border: 0;
     608    border-radius: 999px;
     609    background: transparent;
     610    color: var(--ac-muted);
     611    font-size: 14px;
     612    font-weight: 600;
     613    cursor: pointer;
     614    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
     615}
     616#upgradeModal .ac-upgrade__toggle button.is-active {
     617    background: #fff;
     618    color: var(--ac-ink);
     619    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
     620}
     621#upgradeModal .ac-upgrade__save {
     622    padding: 2px 7px;
     623    border-radius: 999px;
     624    background: rgba(31, 157, 85, 0.12);
     625    color: var(--ac-green);
     626    font-size: 11px;
     627    font-weight: 700;
     628}
     629
     630/* Price */
     631#upgradeModal .ac-upgrade__price {
     632    display: flex;
     633    justify-content: center;
     634    align-items: baseline;
     635    gap: 4px;
     636    margin-top: 18px;
     637}
     638#upgradeModal .ac-upgrade__amount {
     639    font-size: 46px;
     640    font-weight: 800;
     641    line-height: 1;
     642    letter-spacing: -0.03em;
     643    color: var(--ac-ink);
     644}
     645#upgradeModal .ac-upgrade__period { font-size: 16px; font-weight: 600; color: var(--ac-muted); }
     646#upgradeModal .ac-upgrade__price-note { margin: 6px 0 0; font-size: 13px; color: var(--ac-muted); }
     647
     648/* Feature list with checkmarks */
     649#upgradeModal .ac-upgrade__features {
     650    margin: 20px auto 22px;
     651    padding: 0;
     652    max-width: 320px;
     653    list-style: none;
     654    text-align: left;
     655}
     656#upgradeModal .ac-upgrade__features li {
     657    position: relative;
     658    margin: 0;
     659    padding: 7px 0 7px 30px;
     660    font-size: 14px;
     661    line-height: 1.45;
     662    color: var(--ac-ink);
     663}
     664#upgradeModal .ac-upgrade__features li::before {
     665    content: "";
     666    position: absolute;
     667    left: 0;
     668    top: 8px;
     669    width: 20px;
     670    height: 20px;
     671    border-radius: 50%;
     672    background: rgba(61, 137, 251, 0.14)
     673        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%233d89fb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
     674        center / 14px no-repeat;
     675}
     676
     677/* Primary call to action */
     678#upgradeModal .ac-upgrade__cta {
     679    display: block;
     680    padding: 14px 20px;
     681    border-radius: 10px;
     682    background: linear-gradient(180deg, #4f97ff 0%, var(--ac-blue) 100%);
     683    box-shadow: 0 8px 18px rgba(61, 137, 251, 0.35);
     684    color: #fff;
     685    font-size: 16px;
     686    font-weight: 700;
     687    text-decoration: none;
     688    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
     689}
     690#upgradeModal .ac-upgrade__cta:hover,
     691#upgradeModal .ac-upgrade__cta:focus-visible {
     692    color: #fff;
     693    background: linear-gradient(180deg, var(--ac-blue) 0%, var(--ac-blue-dark) 100%);
     694    box-shadow: 0 10px 22px rgba(61, 137, 251, 0.45);
     695    transform: translateY(-1px);
     696    outline: none;
     697}
     698#upgradeModal .ac-upgrade__secure { margin: 10px 0 0; font-size: 12px; color: var(--ac-muted); }
     699#upgradeModal .ac-upgrade__secure::before { content: "\1F512\00a0"; }
     700
     701/* "or" divider */
     702#upgradeModal .ac-upgrade__divider {
     703    display: flex;
     704    align-items: center;
     705    gap: 12px;
     706    margin: 20px 0 16px;
     707    color: #9aa3b2;
     708    font-size: 12px;
     709    text-transform: uppercase;
     710    letter-spacing: 0.1em;
     711}
     712#upgradeModal .ac-upgrade__divider::before,
     713#upgradeModal .ac-upgrade__divider::after { content: ""; flex: 1; height: 1px; background: var(--ac-line); }
     714
     715/* Enter-your-key button (secondary) */
     716#upgradeModal .modal-content-upgrade .ac-enter-key-button {
     717    width: 100%;
     718    padding: 12px 18px;
     719    border: 1.5px solid var(--ac-line);
     720    border-radius: 10px;
     721    background: #fff;
     722    color: var(--ac-ink);
     723    font-size: 15px;
     724    font-weight: 600;
     725}
     726#upgradeModal .modal-content-upgrade .ac-enter-key-button:hover,
     727#upgradeModal .modal-content-upgrade .ac-enter-key-button:focus-visible {
     728    border-color: var(--ac-blue);
     729    background: #f4f8ff;
     730    color: var(--ac-blue-dark);
     731}
     732
     733#upgradeModal .ac-upgrade__footnote { margin: 16px 0 0; font-size: 12px; color: #8a93a3; }
     734
     735/* Key screen */
     736#upgradeModal #key_activation_section {
     737    max-width: none;
     738    margin: 0;
     739    padding: 0;
     740    border: 0;
     741    border-radius: 0;
     742    background: #fff;
     743    box-shadow: none;
     744}
     745#upgradeModal #key_activation_section label {
     746    margin-bottom: 10px;
     747    font-size: 14px;
     748    font-weight: 600;
     749    color: var(--ac-ink);
     750}
     751#upgradeModal #premium_activation_key {
     752    padding: 12px 14px;
     753    border: 1.5px solid var(--ac-line);
     754    border-radius: 10px;
     755    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     756    font-size: 15px;
     757    box-shadow: none;
     758}
     759#upgradeModal #premium_activation_key:focus {
     760    border-color: var(--ac-blue);
     761    box-shadow: 0 0 0 3px rgba(61, 137, 251, 0.18);
     762}
     763#upgradeModal #activate_key_button {
     764    min-height: 46px;
     765    padding: 0 22px;
     766    border-radius: 10px;
     767    background: var(--ac-blue);
     768    box-shadow: 0 6px 14px rgba(61, 137, 251, 0.3);
     769    color: #fff;
     770}
     771#upgradeModal #activate_key_button:hover { background: var(--ac-blue-dark); }
     772#upgradeModal .ac-upgrade__back {
     773    margin-top: 18px;
     774    padding: 0;
     775    border: 0;
     776    background: none;
     777    color: var(--ac-muted);
     778    font-size: 13px;
     779    font-weight: 600;
     780    cursor: pointer;
     781}
     782#upgradeModal .ac-upgrade__back:hover { color: var(--ac-blue); }
     783
     784@media (max-width: 480px) {
     785    #upgradeModal .modal-container.ac-upgrade { width: calc(100% - 24px); }
     786    #upgradeModal .ac-upgrade__hero,
     787    #upgradeModal .ac-upgrade__body { padding-left: 20px; padding-right: 20px; }
     788    #upgradeModal .ac-upgrade__title { font-size: 22px; }
     789    #upgradeModal .ac-upgrade__amount { font-size: 40px; }
     790}
     791
     792@media (prefers-reduced-motion: reduce) {
     793    #upgradeModal .ac-upgrade__cta,
     794    #upgradeModal .ac-upgrade__toggle button { transition: none; }
     795    #upgradeModal .ac-upgrade__cta:hover { transform: none; }
     796}
Note: See TracChangeset for help on using the changeset viewer.