6d1a5e56e758
remove borders from header icon buttons, always-accent lock, glow hover; redesign pro upgrade hero with ambient glow, larger mark, visible tagline and pricing, borderless key-link
- time
- 2026-05-18 22:16 UTC · 5 months ago
- machine
- koh2
- parent
- 4ee346a17757
↓ peach-browser-6d1a5e56.tar.gzatlas at this save
files changed1 file
src/popup/styles/popup.css+59 −35src/popup/styles/popup.css+59 −35
@@ -873,7 +873,18 @@873873 .peach-icon-btn {874874 min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;875875 display: inline-flex; align-items: center; justify-content: center;876+ border-color: transparent;877+ transition:878+ color var(--peach-dur-80) var(--peach-curve-arrival),879+ box-shadow var(--peach-dur-150) var(--peach-curve-arrival),880+ background-color var(--peach-dur-80) var(--peach-curve-arrival);876881 }882+.peach-icon-btn:hover:not(:disabled) {883+ background: transparent;884+ color: var(--peach-accent);885+ box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),886+ 0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);887+}877888 878889 .peach-btn:focus-visible {879890 outline: none;@@ -882,7 +893,7 @@882893 883894 /* Lock button */884895 .peach-lock-icon { transform-origin: center; }885-.peach-lock-btn.is-locking { color: var(--peach-accent); }896+.peach-lock-btn { color: var(--peach-accent); }886897 .peach-lock-btn.is-locking .peach-lock-icon {887898 animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);888899 }@@ -5939,34 +5950,43 @@59395950 display: flex;59405951 flex-direction: column;59415952 align-items: stretch;5942- gap: 10px;5943- padding: 0 4px 8px;5953+ gap: 12px;5954+ padding: 0 4px 12px;59445955 }59455956 59465957 .peach-pro-upgrade-hero {59475958 display: flex;59485959 flex-direction: column;59495960 align-items: center;5950- gap: 4px;5951- padding: 10px 0 6px;5961+ gap: 6px;5962+ padding: 18px 0 10px;5963+ position: relative;59525964 }5965+.peach-pro-upgrade-hero::before {5966+ content: "";5967+ position: absolute;5968+ inset: 0;5969+ background: radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--peach-accent) 14%, transparent), transparent 70%);5970+ pointer-events: none;5971+}59535972 59545973 .peach-pro-upgrade-mark-wrap {59555974 display: flex;59565975 align-items: center;59575976 justify-content: center;5958- margin-bottom: 2px;5977+ margin-bottom: 4px;5978+ filter: drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 40%, transparent));59595979 }59605980 59615981 .peach-pro-upgrade-mark {5962- width: 38px;5963- height: 38px;5964- opacity: 0.9;5982+ width: 46px;5983+ height: 46px;5984+ opacity: 1;59655985 }59665986 59675987 .peach-pro-upgrade-title {59685988 font-family: var(--font-display, var(--font-ui));5969- font-size: 22px;5989+ font-size: 24px;59705990 margin: 0;59715991 color: var(--peach-t0);59725992 letter-spacing: 0.01em;@@ -5975,22 +5995,22 @@59755995 .peach-pro-upgrade-tagline {59765996 margin: 0;59775997 font-style: italic;5978- color: var(--peach-t2);5979- font-size: 0.6875rem;5998+ color: var(--peach-t1);5999+ font-size: 0.75rem;59806000 }59816001 59826002 .peach-pro-features {59836003 display: flex;59846004 flex-direction: column;5985- gap: 8px;6005+ gap: 9px;59866006 border-top: 1px solid var(--peach-border);59876007 border-bottom: 1px solid var(--peach-border);5988- padding: 10px 4px;6008+ padding: 12px 6px;59896009 }59906010 59916011 .peach-pro-feature {59926012 display: flex;5993- gap: 9px;6013+ gap: 10px;59946014 align-items: baseline;59956015 }59966016 @@ -6000,23 +6020,23 @@60006020 flex-shrink: 0;60016021 display: inline-block;60026022 transform-origin: center;6003- opacity: 0.8;6023+ opacity: 0.9;60046024 }60056025 60066026 .peach-pro-feature-text {60076027 display: flex;60086028 flex-direction: column;6009- gap: 1px;6029+ gap: 2px;60106030 }60116031 60126032 .peach-pro-feature-name {6013- font-size: 0.75rem;6033+ font-size: 0.8125rem;60146034 color: var(--peach-t0);60156035 }60166036 60176037 .peach-pro-feature-desc {6018- font-size: 0.625rem;6019- color: var(--peach-t2);6038+ font-size: 0.6875rem;6039+ color: var(--peach-t1);60206040 }60216041 60226042 .peach-pro-feature.is-highlighted .peach-pro-feature-mark {@@ -6025,23 +6045,23 @@60256045 60266046 @keyframes peach-pulse-accent {60276047 0% { opacity: 1; transform: scale(1.4); }6028- 100% { opacity: 0.7; transform: scale(1); }6048+ 100% { opacity: 0.9; transform: scale(1); }60296049 }60306050 60316051 .peach-pro-upgrade-actions {60326052 display: flex;60336053 flex-direction: column;60346054 align-items: center;6035- gap: 8px;6055+ gap: 10px;60366056 padding-top: 2px;60376057 }60386058 60396059 .peach-pro-pricing {60406060 margin: 0;60416061 text-align: center;6042- font-size: 0.6875rem;6043- color: var(--peach-t2);6044- letter-spacing: 0.04em;6062+ font-size: 0.75rem;6063+ color: var(--peach-t0);6064+ letter-spacing: 0.05em;60456065 }60466066 60476067 .peach-pro-upgrade-cta {@@ -6049,9 +6069,9 @@60496069 text-align: center;60506070 text-decoration: none;60516071 display: block;6052- padding: 9px 32px;6072+ padding: 10px 36px;60536073 font-size: 0.8125rem;6054- min-width: 180px;6074+ min-width: 190px;60556075 }60566076 60576077 .peach-pro-key-divider {@@ -6059,7 +6079,7 @@60596079 align-items: center;60606080 gap: 8px;60616081 width: 100%;6062- color: var(--peach-t3);6082+ color: var(--peach-t2);60636083 font-size: 0.625rem;60646084 letter-spacing: 0.08em;60656085 }@@ -6074,19 +6094,18 @@60746094 60756095 .peach-pro-key-link {60766096 background: transparent;6077- border: 1px solid var(--peach-border);6097+ border: none;60786098 border-radius: 8px;6079- color: var(--peach-t1);6099+ color: var(--peach-t2);60806100 font-size: 0.75rem;60816101 cursor: pointer;60826102 align-self: stretch;6083- padding: 8px 12px;6103+ padding: 6px 12px;60846104 text-align: center;6085- transition: border-color 0.2s, color 0.2s;6105+ transition: color 0.2s;60866106 }60876107 60886108 .peach-pro-key-link:hover {6089- border-color: var(--peach-accent);60906109 color: var(--peach-accent);60916110 }60926111 @@ -8729,11 +8748,16 @@87298748 87308749 /* Secondary action buttons (ghost / subtle): filled with input-well surface87318750 so they read as recessed against the parchment card background. */8732-.light .peach-btn--ghost,8733-[data-theme="light"] .peach-btn--ghost {8751+.light .peach-btn--ghost:not(.peach-icon-btn),8752+[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {87348753 background: #EEE7DD;87358754 border-color: #DDD5CB;87368755 color: #1A1208;8756+}8757+.light .peach-icon-btn,8758+[data-theme="light"] .peach-icon-btn {8759+ background: transparent;8760+ border-color: transparent;87378761 }87388762 .light .peach-btn--subtle,87398763 [data-theme="light"] .peach-btn--subtle {