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
1 file src/popup/styles/popup.css+59 −35
src/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 {

view file