/* Mintayn TCG – UI Skin Layer (neutral baseline) * Build 3.5 SkinLayer10 * Purpose: Provide design tokens (CSS variables) and safe scoping hooks. * IMPORTANT: No UX/visual changes by default (variables only, not applied to elements). */ :root{ /* Surfaces */ --mintayn-bg: #ffffff; --mintayn-surface: #ffffff; --mintayn-surface-2: #ffffff; /* Text */ --mintayn-text: #111111; --mintayn-text-muted: #666666; /* Brand / Accent */ --mintayn-accent: #2d6cdf; --mintayn-accent-2: #8b5cf6; /* Borders / Radius / Shadow */ --mintayn-border: rgba(0,0,0,0.12); --mintayn-radius-sm: 6px; --mintayn-radius-md: 10px; --mintayn-radius-lg: 14px; --mintayn-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --mintayn-shadow-md: 0 6px 18px rgba(0,0,0,0.10); /* Spacing */ --mintayn-space-1: 4px; --mintayn-space-2: 8px; --mintayn-space-3: 12px; --mintayn-space-4: 16px; --mintayn-space-5: 20px; --mintayn-space-6: 24px; /* Typography */ --mintayn-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --mintayn-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --mintayn-text-xs: 12px; --mintayn-text-sm: 13px; --mintayn-text-base: 14px; --mintayn-text-lg: 16px; /* Component tokens (future) */ --mintayn-card-gap: 12px; --mintayn-chip-bg: rgba(0,0,0,0.04); } /* Optional scoping hook: If you wrap your frontend output in .mintayn-tcg, you can override variables there later. This block intentionally contains no rules that change layout/appearance. */ .mintayn-tcg{} /* ========================= Skin presets (opt-in only) ========================= These presets ONLY apply if you add one of the classes below to or (e.g., via your theme, a small snippet plugin, or a page builder): - mintayn-skin--clean - mintayn-skin--dark - mintayn-skin--neon - mintayn-skin--lux By default (no class), nothing changes in the UI. */ /* Clean: modern, neutral, “Cardmarket-like” baseline */ html.mintayn-skin--clean, body.mintayn-skin--clean{ --mintayn-bg:#ffffff; --mintayn-surface:#ffffff; --mintayn-surface-2: #ffffff; --mintayn-text:#111111; --mintayn-text-muted:#666666; --mintayn-accent:#2d6cdf; --mintayn-border: rgba(0,0,0,0.12); } /* Dark: contrasty, minimal */ html.mintayn-skin--dark, body.mintayn-skin--dark{ --mintayn-bg:#0b0e14; --mintayn-surface:#111827; --mintayn-surface-2: #ffffff; --mintayn-text:#e5e7eb; --mintayn-text-muted:#9ca3af; --mintayn-accent:#60a5fa; --mintayn-border: rgba(255,255,255,0.12); } /* Neon: cyberpunk-ish (colors only, still neutral unless used) */ html.mintayn-skin--neon, body.mintayn-skin--neon{ --mintayn-bg:#05060a; --mintayn-surface:#0b1020; --mintayn-surface-2: #ffffff; --mintayn-text:#e9f2ff; --mintayn-text-muted:#9fb2d9; --mintayn-accent:#00d4ff; --mintayn-accent-2:#ff3bd4; --mintayn-border: rgba(0,212,255,0.22); } /* Lux: collectible / premium */ html.mintayn-skin--lux, body.mintayn-skin--lux{ --mintayn-bg:#ffffff; --mintayn-surface:#ffffff; --mintayn-surface-2: #ffffff; --mintayn-text:#111111; --mintayn-text-muted:#6b6257; --mintayn-accent:#b68d40; /* gold-ish */ --mintayn-border: rgba(182,141,64,0.28); } /* ========================= Scoped skin presets (opt-in only) ========================= Use these if you do NOT want to affect the whole site /. They only apply inside a wrapper with class .mintayn-tcg. Example usage in your theme/page-builder:

...shortcode output...

IMPORTANT: This file still does NOT apply any visual styles to elements. It only changes token values (CSS variables). */ .mintayn-tcg.mintayn-skin--clean{ --mintayn-bg:#ffffff; --mintayn-surface:#ffffff; --mintayn-surface-2: #ffffff; --mintayn-text:#111111; --mintayn-text-muted:#666666; --mintayn-accent:#2d6cdf; --mintayn-border: rgba(0,0,0,0.12); } .mintayn-tcg.mintayn-skin--dark{ --mintayn-bg:#0b0e14; --mintayn-surface:#111827; --mintayn-surface-2: #ffffff; --mintayn-text:#e5e7eb; --mintayn-text-muted:#9ca3af; --mintayn-accent:#60a5fa; --mintayn-border: rgba(255,255,255,0.12); } .mintayn-tcg.mintayn-skin--neon{ --mintayn-bg:#05060a; --mintayn-surface:#0b1020; --mintayn-surface-2: #ffffff; --mintayn-text:#e9f2ff; --mintayn-text-muted:#9fb2d9; --mintayn-accent:#00d4ff; --mintayn-accent-2:#ff3bd4; --mintayn-border: rgba(0,212,255,0.22); } .mintayn-tcg.mintayn-skin--lux{ --mintayn-bg:#ffffff; --mintayn-surface:#ffffff; --mintayn-surface-2: #ffffff; --mintayn-text:#111111; --mintayn-text-muted:#6b6257; --mintayn-accent:#b68d40; --mintayn-border: rgba(182,141,64,0.28); } /* ========================= Component hooks (no styles applied) ========================= These selectors intentionally DO NOT change appearance. They exist as stable anchors for future design work. */ /* Card containers */ .mintayn-card{} .mintayn-card__image{} .mintayn-card__body{} .mintayn-card__title{} .mintayn-card__meta{} .mintayn-card__abilities{} .mintayn-card__formats{} .mintayn-card__lore{} .mintayn-card__footer{} /* UI elements */ .mintayn-btn{} .mintayn-btn--primary{} .mintayn-btn--secondary{} .mintayn-chip{} .mintayn-chip--rarity{} .mintayn-chip--class{} .mintayn-chip--type{} /* Lists & grids */ .mintayn-grid{} .mintayn-grid--cards{} .mintayn-filterbar{} .mintayn-filter{} /* ========================= SkinLayer6: Minimal baseline styles (scoped) ========================= Applies ONLY inside .mintayn-tcg wrapper to avoid impacting the WP theme. These are conservative defaults: font + text color + box sizing + neutral surfaces. */ /* Scope baseline typography & rendering */ .mintayn-tcg{ font-family: var(--mintayn-font); color: var(--mintayn-text); } /* Ensure predictable box sizing within Mintayn UI only */ .mintayn-tcg, .mintayn-tcg *{ box-sizing: border-box; } /* Neutral surfaces (only when component classes are used) */ .mintayn-tcg .mintayn-card{ background: var(--mintayn-surface); border: 1px solid var(--mintayn-border); border-radius: var(--mintayn-radius-md); box-shadow: var(--mintayn-shadow-sm); } .mintayn-tcg .mintayn-chip{ display: inline-flex; align-items: center; gap: var(--mintayn-space-1); padding: 2px 8px; border-radius: 999px; background: var(--mintayn-chip-bg); border: 1px solid var(--mintayn-border); font-size: var(--mintayn-text-xs); line-height: 1.2; color: var(--mintayn-text); } .mintayn-tcg .mintayn-btn{ font-family: inherit; border-radius: var(--mintayn-radius-sm); border: 1px solid var(--mintayn-border); padding: 8px 12px; background: var(--mintayn-surface); color: var(--mintayn-text); cursor: pointer; } .mintayn-tcg .mintayn-btn--primary{ background: var(--mintayn-accent); border-color: var(--mintayn-accent); color: #fff; } .mintayn-tcg .mintayn-btn--secondary{ background: transparent; } /* ========================= SkinLayer7: Grid & spacing defaults (scoped) ========================= Adds conservative spacing + responsive grid helpers inside .mintayn-tcg only. Does not change data/UX logic; only improves visual rhythm when hooks are present. */ .mintayn-tcg .mintayn-grid{ display: grid; gap: var(--mintayn-card-gap); } /* Card grids: responsive by default */ .mintayn-tcg .mintayn-grid--cards{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Card internal spacing defaults */ .mintayn-tcg .mintayn-card__body{ padding: var(--mintayn-space-4); } .mintayn-tcg .mintayn-card__title{ font-size: var(--mintayn-text-lg); line-height: 1.25; margin: 0 0 var(--mintayn-space-2) 0; } .mintayn-tcg .mintayn-card__meta{ font-size: var(--mintayn-text-sm); color: var(--mintayn-text-muted); margin: 0 0 var(--mintayn-space-3) 0; } .mintayn-tcg .mintayn-card__footer{ padding: var(--mintayn-space-3) var(--mintayn-space-4); border-top: 1px solid var(--mintayn-border); color: var(--mintayn-text-muted); font-size: var(--mintayn-text-sm); } /* Filterbar spacing */ .mintayn-tcg .mintayn-filterbar{ display: flex; flex-wrap: wrap; gap: var(--mintayn-space-2); margin: 0 0 var(--mintayn-space-4) 0; } .mintayn-tcg .mintayn-filter{ display: inline-flex; align-items: center; gap: var(--mintayn-space-2); } /* ========================= SkinLayer8: Interaction states (scoped) ========================= Adds conservative hover/focus styles for better usability. Scoped to .mintayn-tcg only. */ .mintayn-tcg .mintayn-card{ transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; } .mintayn-tcg .mintayn-card:hover{ transform: translateY(-1px); box-shadow: var(--mintayn-shadow-md); border-color: rgba(0,0,0,0.18); } .mintayn-tcg .mintayn-btn{ transition: transform 100ms ease, box-shadow 120ms ease, opacity 120ms ease; } .mintayn-tcg .mintayn-btn:hover{ box-shadow: var(--mintayn-shadow-sm); } .mintayn-tcg .mintayn-btn:active{ transform: translateY(1px); } .mintayn-tcg .mintayn-btn:focus, .mintayn-tcg .mintayn-btn:focus-visible, .mintayn-tcg a:focus, .mintayn-tcg a:focus-visible, .mintayn-tcg input:focus, .mintayn-tcg select:focus, .mintayn-tcg textarea:focus{ outline: 2px solid var(--mintayn-accent); outline-offset: 2px; } .mintayn-tcg a{ color: var(--mintayn-accent); text-decoration: none; } .mintayn-tcg a:hover{ text-decoration: underline; } /* ========================= SkinLayer9: Form controls (scoped) ========================= Minimal normalization for inputs/selects/textarea within .mintayn-tcg. Does not change field order/UX, only appearance. */ .mintayn-tcg input[type="text"], .mintayn-tcg input[type="search"], .mintayn-tcg input[type="number"], .mintayn-tcg input[type="email"], .mintayn-tcg input[type="url"], .mintayn-tcg select, .mintayn-tcg textarea{ font-family: inherit; font-size: var(--mintayn-text-base); color: var(--mintayn-text); background: var(--mintayn-surface); border: 1px solid var(--mintayn-border); border-radius: var(--mintayn-radius-sm); padding: 8px 10px; line-height: 1.3; box-shadow: none; max-width: 100%; } .mintayn-tcg textarea{ min-height: 96px; resize: vertical; } .mintayn-tcg input::placeholder, .mintayn-tcg textarea::placeholder{ color: var(--mintayn-text-muted); opacity: 1; } .mintayn-tcg input:disabled, .mintayn-tcg select:disabled, .mintayn-tcg textarea:disabled{ opacity: 0.6; cursor: not-allowed; } .mintayn-tcg select{ appearance: auto; } .mintayn-tcg .mintayn-filterbar input, .mintayn-tcg .mintayn-filterbar select{ min-height: 36px; } /* ========================= SkinLayer10: Tabs, badges, status (scoped) ========================= Minimal styling for tab-like controls, badges and status rows inside .mintayn-tcg. Works with existing hooks; no UX logic changes. */ /* Tabs */ .mintayn-tcg .mintayn-tabs{ display: inline-flex; gap: var(--mintayn-space-2); padding: var(--mintayn-space-2); border: 1px solid var(--mintayn-border); border-radius: var(--mintayn-radius-md); background: var(--mintayn-surface-2); } .mintayn-tcg .mintayn-tab{ display: inline-flex; align-items: center; gap: var(--mintayn-space-1); padding: 6px 10px; border-radius: var(--mintayn-radius-sm); border: 1px solid transparent; background: transparent; color: var(--mintayn-text); cursor: pointer; text-decoration: none; } .mintayn-tcg .mintayn-tab:hover{ background: var(--mintayn-surface); border-color: var(--mintayn-border); } .mintayn-tcg .mintayn-tab.is-active{ background: var(--mintayn-surface); border-color: var(--mintayn-accent); } /* Badges */ .mintayn-tcg .mintayn-badge{ display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--mintayn-border); background: var(--mintayn-surface-2); font-size: var(--mintayn-text-xs); line-height: 1.2; color: var(--mintayn-text); } /* Status row (e.g., “x results”, “sorted by…”) */ .mintayn-tcg .mintayn-statusbar{ display: flex; flex-wrap: wrap; gap: var(--mintayn-space-2); align-items: center; justify-content: space-between; padding: var(--mintayn-space-2) var(--mintayn-space-3); border: 1px solid var(--mintayn-border); border-radius: var(--mintayn-radius-md); background: var(--mintayn-surface-2); color: var(--mintayn-text-muted); font-size: var(--mintayn-text-sm); }