/* PCF Hub — front-end app styles. GENERATED FILE. Built from preview/pcf-preview.css by tools/build-app-css.mjs, with every rule scoped under .pcf-app so no theme rule leaks in and none of ours leaks out. Edit the preview sheet and re-run the tool; changes made here are lost on the next build. */ /* Perfect Circle Format — front-end preview Tokens shared with the PCF Hub plugin (simonemissaglia.com family). */ .pcf-app { --bg: #f6f6f3; --surface: #ffffff; --surface-2: #f0f0ec; --surface-3: #e8e8e3; --text: #111111; --muted: #575757; --faint: #8a8a86; --line: #d8d8d4; --accent: #111111; --on-accent: #ffffff; /* Categorical series, for the representation chart. Six fixed hues assigned in order and never cycled — a seventh deck folds into "Other" in grey. Both sets are checked (lightness band, chroma, colour-blind separation and contrast against this theme's surface) rather than picked by eye. */ --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-rest: #9a9a96; --forbidden: #b3261e; --limited: #b4690e; --semi: #2f6f3e; --monster: #a9762f; --spell: #1c7a6b; --trap: #9b2f6f; --perfect: #4b3fbf; --gold: #d9a520; --r: 12px; --r-sm: 8px; --r-lg: 20px; --ease: cubic-bezier(.22, 1, .36, 1); --fast: 180ms; --shadow: 0 20px 45px -34px rgba(0, 0, 0, .45); --shadow-lg: 0 32px 70px -40px rgba(0, 0, 0, .6); --head-h: 58px; /* One decklist strip is ten cards across at --ev-card plus nine 3px gaps; a row card is that plus its own padding and border. Both live here because the deck preview, the sheet image and the card width have to agree — see .ev-mini / .ev-deck / .ev-row. */ --ev-card: 46px; --ev-deck-w: 487px; --ev-row-w: 517px; } .pcf-app[data-theme="dark"] { --bg: #141618; --surface: #1d2023; --surface-2: #24282c; --surface-3: #2c3135; --text: #f3f3f2; --muted: #d0d0cc; --faint: #9a9a96; --line: #3a3e42; --accent: #f3f3f2; --on-accent: #141618; --forbidden: #e2695f; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-rest: #7d8288; --limited: #dc9a3e; --semi: #6fbf85; --monster: #d8ab68; --spell: #56bfad; --trap: #dd7ab0; --perfect: #9b91f5; --gold: #e6bb45; --shadow: 0 20px 45px -30px rgba(0, 0, 0, .8); --shadow-lg: 0 32px 70px -36px rgba(0, 0, 0, .9); } .pcf-app, .pcf-app * { box-sizing: border-box; } /* Smooth crossfade between pages instead of the browser's default flash of white while a full-page navigation loads: the View Transitions API keeps the old page's pixels on screen and fades straight into the new page's, with no blank gap between them. Same-origin navigations only, and only where the browser supports it — everywhere else this block is simply ignored and navigation looks exactly as it did before. */ @view-transition { navigation: auto; } /* the ::view-transition pseudo-tree sits outside .pcf-app's box, at the document root — it cannot see --ease (defined on .pcf-app so no theme rule leaks out of it), so the curve is spelled out here rather than referenced */ ::view-transition-group(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } /* the old page fades out, the new page fades in over the tail of that; any real gap between the two falls back to the live page's own background (this stylesheet has nothing themed to offer at that scope — see above), which is never white to begin with */ ::view-transition-old(root) { animation: pcf-fade-out 260ms cubic-bezier(.22, 1, .36, 1) both; } ::view-transition-new(root) { animation: pcf-fade-in 260ms cubic-bezier(.22, 1, .36, 1) both; } @keyframes pcf-fade-out { to { opacity: 0; } } @keyframes pcf-fade-in { from { opacity: 0; } } .pcf-app, .pcf-app { height: 100%; } .pcf-app { overflow-x: hidden; } .pcf-app { margin: 0; /* kills the double-tap zoom, which fired on every card tap; pinch to zoom is left alone so the page can still be enlarged on purpose */ touch-action: manipulation; background: var(--bg); color: var(--text); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; overflow: hidden; } .pcf-app a { color: inherit; } .pcf-app button, .pcf-app input, .pcf-app select, .pcf-app textarea { font: inherit; color: inherit; } .pcf-app ::-webkit-scrollbar { width: 10px; height: 10px; } .pcf-app ::-webkit-scrollbar-track { background: transparent; } .pcf-app ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); } .pcf-app ::-webkit-scrollbar-thumb:hover { background: var(--faint); } /* ---------- header ---------- */ .pcf-app .site-head { height: var(--head-h); flex: 0 0 auto; display: flex; align-items: center; gap: 22px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 40; } .pcf-app .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } .pcf-app .brand { order: -1; margin-right: 0; } /* As tall as the 58px bar allows once its own padding is accounted for. The header keeps its height; only the mark grows into it. */ .pcf-app .brand .mark { position: relative; top: auto; right: auto; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 0; box-shadow: none; background: url("../img/pc-icon.png") center / contain no-repeat; } /* the mark is black line art on a transparent ground: in the dark theme it would sink into the surface. Inverting it is no longer enough — the logo has a red triangle, which invert() turns cyan — so the white artwork is swapped in instead. */ .pcf-app[data-theme="dark"] .brand .mark { background-image: url("../img/pc-icon-light.png"); } /* restored: without this the subtitle runs on after the title and the brand becomes one long line that shoves the rest of the bar sideways */ .pcf-app .brand small { display: block; font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); line-height: 1.1; } .pcf-app .nav { display: flex; gap: 4px; margin-left: 6px; } .pcf-app .nav a { text-decoration: none; padding: 7px 13px; border-radius: 99px; color: var(--muted); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .pcf-app .nav a:hover { background: var(--surface-2); color: var(--text); } .pcf-app .nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); } .pcf-app .head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* the phone-only hamburger and the panel it opens — on a wide screen the button never shows and the panel is display:contents, which erases it from layout entirely, so .nav and .head-right sit exactly where they already did */ .pcf-app .menu-toggle { display: none; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; } .pcf-app .menu-toggle span, .pcf-app .menu-toggle span::before, .pcf-app .menu-toggle span::after { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform 220ms var(--ease), opacity 140ms var(--ease); } .pcf-app .menu-toggle span { position: relative; } .pcf-app .menu-toggle span::before, .pcf-app .menu-toggle span::after { content: ""; position: absolute; left: 0; } .pcf-app .menu-toggle span::before { top: -5px; } .pcf-app .menu-toggle span::after { top: 5px; } /* open: the middle bar fades and the other two cross into an X, so the button always says what the next tap does */ .pcf-app .menu-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); } .pcf-app .menu-toggle[aria-expanded="true"] span { background: transparent; } .pcf-app .menu-toggle[aria-expanded="true"] span::before, .pcf-app .menu-toggle[aria-expanded="true"] span::after { background: var(--on-accent); } .pcf-app .menu-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); } .pcf-app .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); } .pcf-app .menu-panel { display: contents; } .pcf-app .fmt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); text-decoration: none; font-size: 12.5px; color: var(--muted); transition: border-color var(--fast) var(--ease); } .pcf-app .fmt-chip:hover { border-color: var(--faint); color: var(--text); } .pcf-app .fmt-chip .fmt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; margin-left: 4px; } /* the Goat / Perfect Circle switch — a two-way segmented control next to the banlist chip, present on every app screen since it is rendered once, in the shared header (PCF_App::head()), not per-screen */ .pcf-app .fmt-toggle { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); gap: 2px; } .pcf-app .fmt-toggle button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; cursor: pointer; /* "Perfect Circle" is long enough that a tight flex row (the mobile menu shelf, squeezed alongside the account avatar and theme toggle) would otherwise shrink the button until the words wrapped — JS swaps in the short label there (see initChrome()), but nothing should ever wrap or collapse the pill into a circle while that happens or if it fails */ white-space: nowrap; flex: 0 0 auto; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .pcf-app .fmt-toggle button:hover { color: var(--text); } .pcf-app .fmt-toggle button.active { background: var(--accent); color: var(--on-accent); } .pcf-app .icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); } .pcf-app .icon-btn:hover { background: var(--surface-2); } /* Safari does not honour grid/flex centring on a