David/jeisaimporters-WEBSITE
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: round buttons (pill) and give hero image breathing room on mobile

Browse source 
- .btn gets border-radius: 999px so all CTAs render as pills instead of
  hard rectangles.
- .hero__art mobile padding bumped 16px -> 24px so the MagBeast schematic
  has more inset from the screen edge on phones.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Dave 2026-08-19 12:54:42 +02:00
parent d032e44702
commit 56e0b930b0
4 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
about.html
View file

@ -148,7 +148,7 @@
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ink { background: var(--fg); color: #fff; }

2
contact.html
View file

@ -126,7 +126,7 @@
.form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.form__note { font-size: 12.5px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ink { background: var(--fg); color: #fff; }

4
index.html
View file

@ -96,7 +96,7 @@
.hero h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: #fff; max-width: 22ch; }
.hero p.lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 0 32px; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
@ -245,7 +245,7 @@
.hero__wordmark .mark { height: 52px; }
.hero h1 { font-size: 30px; }
.hero__meta { gap: 24px; }
.hero__art { max-width: 100%; padding: 16px; }
.hero__art { max-width: 100%; padding: 24px; }
.section { padding: 64px 0; }
.grid-cats, .grid-vp, .grid-feat, .industries, .footer__top { grid-template-columns: 1fr; }
.range__grid { grid-template-columns: repeat(2, 1fr); }

2
products.html
View file

@ -224,7 +224,7 @@
.cta-strip h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 8px; }
.cta-strip p { margin: 0; color: var(--muted); max-width: 56ch; }
.cta-strip__actions { display: flex; gap: 12px; justify-self: end; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-size: 14px; font-weight: 600; border: 1px solid transparent; border-radius: 999px; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: #FFD96A; }
.btn--ink { background: var(--fg); color: #fff; }