/* ============================================================ CLOVER TCG — MANGA / COMIC DESIGN SYSTEM New aesthetic: dark inked panels, paper grain, halftone dots, Japanese SFX accents, brush-stroke text, speech-bubble prices. Layered ON TOP of (and overriding) the legacy styles.css/inline. ============================================================ */ :root { /* INK + PAPER */ --ink: #0a0807; --ink-soft: #1a1614; --paper: #f5ecd8; --paper-aged: #e8dcc0; --paper-warm: #f1e6cc; /* ACCENTS */ --red-ink: #c8102e; /* signature One Piece red */ --red-blood: #8b1a1a; --pink-soft: #e8758f; /* Boa pink, secondary variant */ --gold-rim: #d4a347; /* TEXT */ --text-light: #f5ecd8; --text-dim: #b8aa92; --text-muted: #5a5550; /* SHADOWS — heavy ink drop */ --ink-shadow: 6px 6px 0 var(--ink), 10px 10px 24px rgba(0,0,0,0.6); --panel-shadow: 4px 4px 0 var(--ink), 8px 12px 30px rgba(0,0,0,0.55); --bubble-shadow:3px 3px 0 var(--ink); /* TYPOGRAPHY */ --font-display: 'Bangers', 'Anton', 'Impact', sans-serif; --font-brush: 'Permanent Marker', 'Bangers', cursive; --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; --font-body: 'Outfit', system-ui, sans-serif; } /* ===== GLOBAL OVERRIDES ===== */ body.manga { background: var(--ink); color: var(--text-light); font-family: var(--font-body); position: relative; overflow-x: hidden; } /* Fixed manga collage layer — SVG art lives in /assets/manga/ */ body.manga::before { content: ""; position: fixed; inset: 0; background-image: url('assets/manga/collage-straw-hats.webp'); background-size: cover; background-position: center; /* No background-attachment: fixed — the ::before is already position:fixed, which pins the image to the viewport smoothly on mobile too (fixed attachment is buggy/janky on iOS Safari). */ filter: contrast(1.1) brightness(0.55); opacity: 0.7; z-index: -3; pointer-events: none; } /* Drifting particle layer (ash / embers / ink flecks) — sits above the background + halftone but behind all content. Canvas is painted by JS. */ #manga-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #manga-particles { display: none; } } /* Halftone dot overlay — pure CSS, no asset needed */ body.manga::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(245, 236, 216, 0.06) 1px, transparent 1.5px), radial-gradient(rgba(10, 8, 7, 0.4) 1px, transparent 1.5px); background-size: 4px 4px, 6px 6px; background-position: 0 0, 2px 2px; z-index: -2; pointer-events: none; mix-blend-mode: overlay; opacity: 0.85; } /* Homepage-only background (other manga pages keep the base collage) */ body.manga.home::before { background-image: url('assets/manga/4emp.webp'); } /* Collections / extras page background */ body.manga.set-extras::before { background-image: url('assets/manga/chopper.webp'); } /* About + FAQ + Contact page backgrounds */ body.manga.set-about::before { background-image: url('assets/manga/usopp.webp'); } body.manga.set-faq::before { background-image: url('assets/manga/sanji.webp'); } body.manga.set-contact::before { background-image: url('assets/manga/brook.webp'); } /* EB-03 Heroines Edition background */ body.manga.set-eb03::before { background-image: url('assets/manga/ladies.webp'); } /* Per-set collage variants — swap by adding class on */ body.manga.set-op16::before { background-image: url('assets/manga/op16-admirals.webp'); } body.manga.set-op14::before { background-image: url('assets/manga/op14-boa.webp'); } body.manga.set-op15::before { background-image: url('assets/manga/op15.webp'); } body.manga.set-op13::before { background-image: url('assets/manga/op13-luffy.webp'); } /* ===== TYPOGRAPHY ===== */ .manga h1, .manga h2, .manga h3, .manga .display { font-family: var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; color: var(--paper); text-shadow: 4px 4px 0 var(--ink), 6px 6px 0 var(--red-ink); } .manga h1 { font-size: clamp(3rem, 8vw, 7rem); } .manga h2 { font-size: clamp(2.2rem, 5vw, 4rem); } .manga h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } .manga .brush { font-family: var(--font-brush); color: var(--paper); text-transform: uppercase; display: inline-block; position: relative; padding: 0.15em 0.6em; z-index: 1; } .manga .brush::before { content: ""; position: absolute; inset: -10% -5%; background: var(--red-ink); z-index: -1; transform: skew(-6deg) rotate(-1.5deg); clip-path: polygon(2% 18%, 98% 8%, 99% 88%, 1% 96%, 4% 60%, 0% 40%); } .manga .jp { font-family: var(--font-jp); font-weight: 700; letter-spacing: 0; } .manga .eyebrow { font-family: var(--font-display); letter-spacing: 0.25em; color: var(--gold-rim); /* default: eyebrows usually sit over the dark bg */ font-size: 0.9rem; text-transform: uppercase; display: inline-flex; gap: 0.6em; align-items: center; } .manga .eyebrow::before, .manga .eyebrow::after { content: ""; width: 36px; height: 2px; background: var(--gold-rim); } /* On light/cream panels the gold is low-contrast — use red there instead */ .manga .panel--paper .eyebrow, .manga .panel--pink .eyebrow { color: var(--red-ink); } .manga .panel--paper .eyebrow::before, .manga .panel--paper .eyebrow::after, .manga .panel--pink .eyebrow::before, .manga .panel--pink .eyebrow::after { background: var(--red-ink); } /* ===== PANELS (comic frames) ===== */ .panel { position: relative; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--panel-shadow); padding: 28px; transform: rotate(-0.35deg); isolation: isolate; } .panel--dark { background: var(--ink); color: var(--paper); border-color: var(--paper); } .panel--red { background: var(--red-ink); color: var(--paper); } .panel--pink { background: var(--pink-soft); color: var(--ink); } .panel--paper { background: var(--paper-aged); color: var(--ink); } .panel--tilt-l { transform: rotate(-1.2deg); } .panel--tilt-r { transform: rotate(1deg); } .panel--flat { transform: rotate(0); } /* Halftone texture inside a panel */ .panel.halftone::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--ink) 1px, transparent 1.5px); background-size: 6px 6px; opacity: 0.08; pointer-events: none; z-index: 0; } .panel > * { position: relative; z-index: 1; } /* ===== SPEECH BUBBLES ===== */ .bubble { position: relative; display: inline-block; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 30px / 22px; padding: 12px 22px; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.04em; box-shadow: var(--bubble-shadow); transform: rotate(-1deg); } .bubble::after { content: ""; position: absolute; left: 22px; bottom: -18px; width: 24px; height: 24px; background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) skew(-8deg, -8deg); } .bubble--right::after { left: auto; right: 22px; } .bubble--red { background: var(--red-ink); color: var(--paper); } .bubble--red::after { background: var(--red-ink); } .bubble--ink { background: var(--ink); color: var(--paper); border-color: var(--paper); } .bubble--ink::after { background: var(--ink); border-color: var(--paper); } /* ===== SFX (the ドン!! BAM!! POW!! decorations) ===== */ .sfx { position: absolute; font-family: var(--font-display); color: var(--paper); font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.02em; text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--red-ink); pointer-events: none; transform: rotate(-8deg) skew(-6deg); user-select: none; z-index: 4; white-space: nowrap; } .sfx--jp { font-family: var(--font-jp); font-weight: 900; } .sfx--red { color: var(--red-ink); text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--paper); } .sfx--small { font-size: clamp(1.6rem, 3vw, 2.6rem); } @keyframes sfxPulse { 0%, 100% { transform: rotate(-8deg) skew(-6deg) scale(1); } 50% { transform: rotate(-8deg) skew(-6deg) scale(1.06); } } .sfx--pulse { animation: sfxPulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .sfx--pulse { animation: none; } } /* Homepage hero SFX placement (moved off inline styles so they stay responsive) */ .manga .hsfx-1 { top: 6%; left: 4%; } .manga .hsfx-2 { top: 12%; right: 8%; } .manga .hsfx-3 { bottom: 8%; left: 16%; transform: rotate(8deg) skew(4deg); } /* ===== STAMP (Clover crest seal style) ===== */ .stamp { display: inline-grid; place-items: center; width: 96px; height: 96px; border: 3px solid var(--red-ink); border-radius: 50%; color: var(--red-ink); font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.15em; text-align: center; line-height: 1.1; padding: 8px; transform: rotate(-12deg); background: rgba(245, 236, 216, 0.08); text-transform: uppercase; } /* ===== INKED BUTTONS ===== */ .manga .btn-ink { display: inline-flex; align-items: center; gap: 10px; background: var(--red-ink); color: var(--paper); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.08em; padding: 16px 32px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-transform: uppercase; transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .manga .btn-ink:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .manga .btn-ink:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .manga .btn-ink--paper { background: var(--paper); color: var(--ink); } .manga .btn-ink--ghost { background: transparent; color: var(--paper); } /* ===== TORN PAPER DIVIDER ===== */ .torn-divider { height: 28px; background: var(--ink); clip-path: polygon( 0 0, 4% 60%, 9% 20%, 14% 70%, 19% 30%, 24% 65%, 29% 25%, 34% 70%, 39% 35%, 44% 60%, 49% 20%, 54% 65%, 59% 30%, 64% 70%, 69% 25%, 74% 60%, 79% 30%, 84% 65%, 89% 25%, 94% 70%, 100% 30%, 100% 100%, 0 100% ); } .torn-divider--flip { transform: scaleY(-1); } /* ===== NAV ===== */ .manga .site-header { background: rgba(10, 8, 7, 0.78); border-bottom: 3px solid var(--paper); box-shadow: 0 4px 0 var(--red-ink), 0 5px 30px rgba(0,0,0,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50; } .manga .nav-wrap { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .manga .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.85rem; letter-spacing: 0.08em; color: var(--paper); text-decoration: none; flex-shrink: 0; } .manga .brand-logo { height: 48px; width: auto; display: block; border-radius: 8px; } .manga .nav { display: flex; align-items: center; flex-wrap: wrap; font-family: var(--font-display); letter-spacing: 0.08em; font-size: 1rem; gap: 26px; color: var(--paper); } .manga .nav a { color: var(--paper); position: relative; padding: 4px 0; } .manga .nav a:hover { color: var(--red-ink); } .manga .nav a.is-active { color: var(--red-ink); } .manga .nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--red-ink); } /* ===== MARQUEE STRIP ===== */ .manga .premium-strip { background: var(--paper); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); color: var(--ink); overflow: hidden; /* clip the scrolling track */ } .manga .premium-strip-track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; padding: 10px 0; color: var(--ink); font-family: var(--font-display); letter-spacing: 0.3em; font-size: 0.85rem; /* Two identical halves in the markup → translate -50% loops seamlessly. */ animation: clvMarquee 30s linear infinite; will-change: transform; } .manga .premium-strip:hover .premium-strip-track { animation-play-state: paused; } .manga .premium-strip-track span { display: inline-block; padding: 0 26px; } .manga .premium-strip-track span::before { content: "☘\FE0E"; /* \FE0E forces text (red) rendering, not a green emoji on mobile */ margin-right: 12px; color: var(--red-ink); } @keyframes clvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .manga .premium-strip-track { animation: none; } } /* ===== HERO ===== */ .manga .cover-hero { position: relative; padding: 48px 0 56px; } .manga .cover-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; } /* Centered hero variant — single column, content centered over the background */ .manga .cover-grid--center { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* Manga narration/caption box — cream "cardboard" with heavy ink border. */ .manga .cover-grid--center .cover-lead { margin-left: auto; margin-right: auto; background: var(--paper-aged); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--panel-shadow); padding: 18px 24px; transform: rotate(-0.6deg); } /* Manga caption-box image replacing the lead text */ .manga .cover-lead-img { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto 36px; transform: rotate(-0.6deg); } .manga .cover-grid--center .cover-actions, .manga .cover-grid--center .cover-meta { justify-content: center; } .manga .cover-title { font-size: clamp(4rem, 11vw, 9rem); margin: 12px 0 6px; color: var(--paper); text-shadow: 5px 5px 0 var(--red-ink), 9px 9px 0 var(--ink); } .manga .cover-subtitle { font-family: var(--font-jp); font-size: clamp(1.4rem, 3vw, 2.6rem); color: var(--red-ink); letter-spacing: 0.1em; margin: 0 0 22px; } .manga .cover-lead { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-dim); line-height: 1.7; max-width: 52ch; margin: 0 0 36px; } .manga .cover-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } .manga .cover-meta { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-display); letter-spacing: 0.08em; color: var(--paper); } .manga .cover-meta span { border: 2px solid var(--paper); padding: 8px 14px; background: rgba(10, 8, 7, 0.6); } .manga .cover-meta strong { color: var(--red-ink); } /* Character collage column — 2×2 grid of four (the Four Emperors) */ .manga .cover-cast { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; position: relative; } .manga .cast-tile { border: 3px solid var(--paper); background: var(--ink); aspect-ratio: 3/4; position: relative; overflow: hidden; box-shadow: 4px 4px 0 var(--red-ink); } .manga .cast-tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.6) contrast(1.2); } .manga .cast-tile--wide { grid-column: 1 / -1; aspect-ratio: 16/9; } .manga .cast-label { position: absolute; bottom: 8px; left: 8px; right: 8px; font-family: var(--font-display); font-size: 1rem; color: var(--paper); background: var(--ink); padding: 4px 10px; border: 2px solid var(--paper); letter-spacing: 0.08em; display: flex; justify-content: space-between; gap: 8px; } .manga .cast-label .jp { color: var(--red-ink); font-size: 0.9rem; } /* ===== HERO FEATURED-SET SPOTLIGHT ===== */ .manga .hero-spotlight { position: relative; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--panel-shadow); transform: rotate(-1deg); display: flex; flex-direction: column; } .manga .hero-spotlight-img { background: var(--paper-aged); padding: 30px 28px; display: grid; place-items: center; border-bottom: 3px solid var(--ink); } .manga .hero-spotlight-img img { max-width: 100%; max-height: 320px; object-fit: contain; filter: drop-shadow(5px 7px 0 rgba(10,8,7,0.28)); } .manga .hero-spotlight-body { padding: 24px 26px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .manga .hero-spotlight-body h3 { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); text-transform: uppercase; margin: 0; line-height: 1.04; } .manga .hero-spotlight-body h3 .jp { display: block; font-family: var(--font-jp); font-size: 0.5em; color: var(--red-ink); letter-spacing: 0; margin-top: 6px; } /* ===== FEATURED PRODUCT PANELS ===== */ .manga .featured-row { padding: 80px 0; position: relative; } .manga .featured-grid { display: grid; /* Cap card width and center so a lone product card doesn't stretch to the full container (which threw off the image centering, tilt and borders). */ grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 32px; margin-top: 48px; } .manga .feature-card { background: var(--paper); border: 3px solid var(--ink); color: var(--ink); box-shadow: var(--panel-shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; transform: rotate(-0.4deg); transition: transform 0.2s ease, box-shadow 0.2s ease; } .manga .feature-card:nth-child(even) { transform: rotate(0.5deg); } .manga .feature-card:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink), 12px 16px 36px rgba(0,0,0,0.6); } .manga .feature-card-img { background: var(--paper-aged); padding: 24px; display: grid; place-items: center; height: 220px; border-bottom: 3px solid var(--ink); position: relative; } .manga .feature-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(4px 6px 0 rgba(10,8,7,0.3)); } .manga .feature-card-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .manga .feature-card h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); text-shadow: none; text-transform: uppercase; margin: 0; line-height: 1.05; } .manga .feature-card .price-bubble { align-self: flex-start; background: var(--red-ink); color: var(--paper); font-family: var(--font-display); font-size: 1.5rem; padding: 6px 16px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 30px / 22px; letter-spacing: 0.04em; } .manga .feature-card .price-bubble.is-soldout { background: var(--ink); color: var(--paper); } .manga .feature-card .feature-card-cta { margin-top: auto; } /* Pill on the corner of a featured card */ .manga .corner-pill { position: absolute; top: 12px; right: 12px; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; padding: 5px 12px; border: 2px solid var(--paper); transform: rotate(4deg); z-index: 2; } .manga .corner-pill--gold { background: var(--gold-rim); color: var(--ink); } .manga .corner-pill--red { background: var(--red-ink); color: var(--paper); border-color: var(--ink); } /* ===== TWO-UP SECTIONS (about teaser, contact teaser) ===== */ .manga .twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 80px 0; } .manga .twoup .panel { padding: 36px; } .manga .twoup h2 { color: var(--ink); text-shadow: 3px 3px 0 var(--red-ink); } .manga .twoup p { color: var(--ink-soft); line-height: 1.7; } /* ===== FOOTER ===== */ .manga .site-footer { background: var(--ink); border-top: 3px solid var(--paper); box-shadow: 0 -4px 0 var(--red-ink); color: var(--text-dim); padding: 48px 0 32px; font-family: var(--font-body); } .manga .footer-wrap a { color: var(--paper); margin-right: 14px; font-family: var(--font-display); letter-spacing: 0.08em; } .manga .footer-wrap a:hover { color: var(--red-ink); } /* ===== RESPONSIVE ===== */ @media (max-width: 980px) { .manga .cover-grid, .manga .twoup { grid-template-columns: 1fr; gap: 36px; } .manga .nav { display: none; } .manga .cover-title { text-shadow: 3px 3px 0 var(--red-ink), 5px 5px 0 var(--ink); } .manga .sfx { font-size: clamp(2.2rem, 8vw, 3.6rem); } } @media (max-width: 600px) { .manga .feature-card { transform: rotate(0) !important; } .manga .panel { transform: rotate(0) !important; } /* Lighten the background on phones — it reads darker on small screens. */ body.manga::before { filter: contrast(1.05) brightness(0.85); opacity: 0.82; } } /* On small screens the decorative SFX overlap the hero title — shrink them and tuck them into the corners (adjusted, not hidden). */ @media (max-width: 760px) { .manga .cover-hero .sfx, .manga .set-hero .sfx { font-size: 1.5rem !important; opacity: 0.6; } .manga .hsfx-1 { top: 1.5%; left: 3%; } .manga .hsfx-2 { top: 2.5%; right: 3%; } .manga .hsfx-3 { bottom: 2%; left: auto; right: 4%; } } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { .manga * { transition: none !important; animation: none !important; } } /* ===== SET PAGES (shop hub + per-set landings) ===== */ /* Per-set hero band — set number/name over the themed background */ .manga .set-hero { position: relative; padding: 96px 0 72px; text-align: center; } .manga .set-hero .set-no { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 6rem); line-height: 0.9; color: var(--paper); text-shadow: 4px 4px 0 var(--red-ink), 8px 8px 0 var(--ink); margin: 0; } .manga .set-hero .set-name { font-family: var(--font-display); letter-spacing: 0.05em; color: var(--gold-rim); font-size: clamp(1.1rem, 3vw, 1.8rem); margin: 14px 0 0; } .manga .set-hero .set-jp { font-family: var(--font-jp); color: var(--paper); opacity: 0.9; margin: 8px 0 0; } .manga .set-hero .set-lead { max-width: 640px; margin: 22px auto 0; color: var(--text-dim); line-height: 1.7; } /* Shop hub — grid of set cards */ .manga .set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 36px; } .manga .set-card { position: relative; display: block; aspect-ratio: 16 / 10; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--red-ink); overflow: hidden; background: var(--ink); text-decoration: none; } .manga .set-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.15) brightness(0.68); transition: transform 0.45s ease, filter 0.45s ease; } .manga .set-card:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.2) brightness(0.85); } .manga .set-card-body { position: absolute; inset: auto 0 0 0; padding: 16px 18px 18px; background: linear-gradient(transparent, rgba(10, 8, 7, 0.92)); } .manga .set-card-body .eyebrow { color: var(--gold-rim); } .manga .set-card-body h3 { margin: 4px 0 0; color: var(--paper); font-family: var(--font-display); letter-spacing: 0.04em; text-shadow: 2px 2px 0 var(--red-ink); } .manga .set-card .set-status { position: absolute; top: 10px; right: 10px; background: var(--red-ink); color: var(--paper); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.1em; padding: 4px 10px; border: 2px solid var(--ink); transform: rotate(4deg); z-index: 2; } .manga .set-card .set-status--gold { background: var(--gold-rim); color: var(--ink); } @media (max-width: 600px) { .manga .set-card { transform: rotate(0) !important; } } /* Add-to-cart button uses the manga ink-button look on a real