@import "/css/shared/theme/themeToggle.css"; @import "/css/shared/nav.css"; @import "/css/shared/nav-dropdowns.css"; /* ============================================================ MOBILE-FIRST FOUNDATION See MOBILE_RESPONSIVE_STANDARDS.md §3, §14 ============================================================ */ /* Box-sizing reset — required for predictable widths everywhere. */ *, *::before, *::after { box-sizing: border-box; } /* Root behaviours: native control colour-scheme, no iOS text-inflate, no 300ms tap delay. */ html { color-scheme: light dark; -webkit-text-size-adjust: 100%; touch-action: manipulation; } /* When the user has explicitly chosen a theme, tell the UA so native widgets (scrollbars, date pickers, autofill backgrounds) match. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } /* Horizontal-scroll prevention (rule 1 of the "five rules"). */ html, body { max-width: 100%; overflow-x: hidden; } /* The page background lives on , NOT on . The ambient card layer (shared/ambient-cards.css) is a fixed z-index:-1 child of ; it paints above the root canvas but below every in-flow box. An opaque background on would therefore hide it completely. Declaring the colour here makes that dependency explicit instead of relying on the body→canvas background-propagation rule that happened to make it work. Do NOT give a background again. */ html { background-color: var(--colour-bg, #FAFAFA); } /* Replaced media never busts its container (rule 2). */ img, video, svg, iframe { max-width: 100%; height: auto; } /* Long unbreakable strings (TCG card names) must wrap, not overflow. */ .card-name, .card-title { overflow-wrap: anywhere; } /* Heading wrap defaults — purely additive (does not change font-size), so safe to apply globally. Newer browsers prevent orphans; older ones just ignore the property. */ h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; } p, li, dd { text-wrap: pretty; } /* .page-h1 — emitted by partials/page-heading.php. Deliberately modest: on pages whose design has no visible heading slot it reads as a page label, not a hero. Pages with designed hero H1s keep their own markup. */ .page-h1 { font-size: var(--fs-h3); font-weight: 600; margin: var(--space-16) 0 var(--space-12); } /* Skip link — WCAG 2.4.1. Hidden until focused. */ .skip-link { position: absolute; inset-inline-start: 8px; inset-block-start: -40px; z-index: 10000; padding: 8px 12px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; } .skip-link:focus { inset-block-start: 8px; } /* REDUCED MOTION SUPPORT */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root { /* COLOUR PALETTE */ --colour-bg: #FFFFFF; /* page background */ --colour-paper: #F5F5F5; /* cards, panels */ --colour-text: #121212; /* primary body text */ --colour-border: #D6D6D6; /* borders, hairlines */ --colour-text-muted: #595959; /* secondary text */ --colour-primary: #104C91; --primary-hover: #1461B8; --colour-secondary: #1F8AC0; --colour-accent: #FFCB77; --colour-popup-paper: #FAFAFA; --colour-popup-bg: #D6D6D680; --colour-filter: #3D3D3D80; /* STATUS */ --colour-success: #10B981; --colour-warning: #F59E0B; --colour-error: #EF4444; /* CHART PALETTE */ --colour-chart-1: #1F8AC0; --colour-chart-2: #17B890; --colour-chart-3: #D4A84B; --colour-chart-4: #8B6CC1; --colour-chart-5: #E07A5F; --colour-chart-6: #3DBFA0; /* PRICE TREND PALETTE — teal/amber instead of green/red. Avoids the stock-app aesthetic and stays accessible for red-green colour blindness. Always paired with ▲ / ▼ glyphs (WCAG 1.4.1). */ --colour-trend-positive: #2D8A8A; --colour-trend-positive-bg: rgba(45, 138, 138, 0.08); --colour-trend-negative: #C2410C; --colour-trend-negative-bg: rgba(194, 65, 12, 0.08); --colour-trend-neutral: #64748B; --chart-fill-positive: rgba(45, 138, 138, 0.18); --chart-scrubber: rgba(201, 169, 97, 0.6); --colour-pricing-gold: #C9A961; --colour-pricing-gold-bg: rgba(201, 169, 97, 0.10); /* TILE TINTS */ --tile-tint-blue: rgba(31, 138, 192, 0.06); --tile-tint-teal: rgba(23, 184, 144, 0.06); --tile-tint-gold: rgba(212, 168, 75, 0.06); --tile-tint-violet: rgba(139, 108, 193, 0.06); --tile-tint-coral: rgba(224, 122, 95, 0.06); /* BAR TRACK */ --bar-track: #E8E8E8; /* WELCOME HERO GRADIENT */ --welcome-gradient: linear-gradient(135deg, #104C91 0%, #1F8AC0 60%, #17B890 100%); /* NAV SIDEBAR */ --nav-sidebar-width: calc(var(--card-width-xs) + var(--space-32)); --nav-sidebar-collapsed-width: 64px; /* HOLO PLACEHOLDER SHIMMER */ --holo-gradient: linear-gradient( 135deg, rgba(31, 138, 192, 0.15) 0%, rgba(139, 108, 193, 0.15) 25%, rgba(23, 184, 144, 0.15) 50%, rgba(212, 168, 75, 0.15) 75%, rgba(31, 138, 192, 0.15) 100% ); /* TYPOGRAPHY */ --font-header: "Montserrat", sans-serif; /* header font */ --font-paragraph: "Hind", sans-serif; /* paragraph font*/ --font-weight-sm: 400; --font-weight-md: 600; --font-weight-lg: 700; --text-xs: 12.8px; /* major third scale (1.250) */ --text-sm: 16px; --text-md: 25px; --text-lg: 39.06px; --text-xl: 61.04px; /* FLUID TYPE SCALE — opt-in, per MOBILE_RESPONSIVE_STANDARDS.md §5. Anchored 360px → 1240px viewport. Use these on new components; the fixed --text-* scale above still drives existing components until they're migrated one at a time. Never assign --fs-* to input/select/ textarea — they must keep the 16px floor to prevent iOS auto-zoom. */ --fs-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15 */ --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 */ --fs-h3: clamp(1.25rem, 1.10rem + 0.75vw, 1.5rem); /* 20 → 24 */ --fs-h2: clamp(1.5rem, 1.20rem + 1.5vw, 2.25rem); /* 24 → 36 */ --fs-h1: clamp(1.75rem, 1.10rem + 3.25vw, 3.5rem); /* 28 → 56 */ --fs-display: clamp(2.25rem, 1rem + 6vw, 4.5rem); /* 36 → 72 */ /* SPACING SCALE */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-80: 80px; /* SAFE-AREA INSETS — for notched iPhones in landscape and home-indicator clearance. Falls back to a 1rem floor when env() returns 0. */ --safe-pt: max(0px, env(safe-area-inset-top)); --safe-pb: max(0px, env(safe-area-inset-bottom)); --safe-pl: max(0px, env(safe-area-inset-left)); --safe-pr: max(0px, env(safe-area-inset-right)); /* BREAKPOINTS — reference values only. Cannot be used inside @media conditions (CSS spec limitation); inline the literal there. */ --bp-sm: 30rem; /* 480px — large phones */ --bp-md: 48rem; /* 768px — small tablets / iPad port */ --bp-lg: 64rem; /* 1024px — tablet landscape / laptop */ --bp-xl: 80rem; /* 1280px — desktop */ --bp-2xl: 96rem; /* 1536px — wide desktop */ /* RADIUS & SHADOWS */ --radius-xs: 8px; --radius-sm: 16px; --radius-md: 24px; --shadow-key-umbra: rgba(0,0,0,0.2); --shadow-key-penumbra: rgba(0,0,0,0.14); --shadow-key-ambient: rgba(0,0,0,0.12); /* Composite shadows — semantic aliases for the three depths the codebase already writes longhand. Values lifted verbatim from the existing rules so switching a selector to the alias is a no-op visually. resting → small controls, panels, stat tiles, back buttons floating → hero cards, expansion tiles, card tiles, modals lifted → hover state of floating elements Dark mode overrides all three below — dark surfaces need heavier shadows. */ --shadow-resting: 0 2px 1px -1px var(--shadow-key-umbra), 0 1px 1px 0 var(--shadow-key-penumbra), 0 1px 3px 0 var(--shadow-key-ambient); --shadow-floating: 0 20px 30px rgba(0,0,0,0.15), 0 8px 10px rgba(0,0,0,0.10); --shadow-lifted: 0 24px 38px rgba(0,0,0,0.20), 0 12px 16px rgba(0,0,0,0.14); /* Halo text-shadow — 8-direction outline in the page bg colour. Keeps text legible over blurred banner imagery (page headings that sit on card art via .ttcg-page-head--on-art). SCOPING WARNING: var() inside a custom property is substituted at computed-value time on the element that DECLARES it, so this token bakes in the :root value of --colour-bg. Do NOT back-port it onto the existing longhand halos in expansions.css / stats.css — .expansion locally overrides --colour-bg (expansions.css) and those sites need the local value. If a future pass wants them consolidated, re-declare --text-halo inside the .expansion block too. */ --text-halo: 0.1em 0 var(--colour-bg), 0 0.1em var(--colour-bg), -0.1em 0 var(--colour-bg), 0 -0.1em var(--colour-bg), -0.1em -0.1em var(--colour-bg), -0.1em 0.1em var(--colour-bg), 0.1em -0.1em var(--colour-bg), 0.1em 0.1em var(--colour-bg); /* TRANSITIONS */ /* --ease-fast: 150ms ease-out; --ease-normal: 300ms ease-out; */ /* DROPDOWN MENU */ --nav-dropdown-bg: var(--colour-paper); --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); --nav-dropdown-radius: var(--radius-sm); --dropdown-open-duration: 150ms; --dropdown-close-duration: 100ms; /* PREMIUM */ --colour-premium: #D4A84B; --colour-premium-hover: #C49A3D; --colour-premium-bg: rgba(212, 168, 75, 0.1); /* AVATAR */ --avatar-text: #FAFAFA; --avatar-size: 36px; --avatar-size-lg: 48px; /* CARD DIMENSIONS*/ --card-width-xs: 120px; --card-hight-xs: 168px; --card-width-sm: 286px; --card-hight-sm: 400px; --card-width-md: 437px; --card-hight-md: 608px; --card-width-lg: 572px; --card-hight-lg: 800px; /* ICON / CARD-FAN CONTROLS */ --icon-size: 32px; /* height of each icon box used by the button */ --overlap: -14px; /* negative left margin to overlap cards */ /* VARIANT COLOURS */ --ss-fill: #fafafa; /* default card body */ --ss-stroke: #1F1B24; /* dark stroke so outlines read on light bg */ --accent-ss: #C63B46; /* rich, warm red (SS) */ --accent-ps: #1F6FC8; /* solid, readable blue (PS) */ --accent-pps: #C66A53; /* warm terracotta (PPS) */ --accent-pms: #7C4FB0; /* muted violet (PMS) */ --accent-default: #fafafa; /* Z-INDEX SCALE */ --z-base: 1; --z-dropdown: 100; --z-sticky: 101; --z-navbar: 200; --z-overlay: 900; --z-modal: 1000; /* FAN BUTTON STATES */ --fan-gray: #B0B0B0; --fan-gray-stroke: #888888; --fan-owned-fill: var(--colour-secondary); --fan-owned-stroke: #165F85; --fan-complete-glow: var(--colour-accent); } [data-theme="dark"] { --colour-bg: #323232; --colour-paper: #3D3D3D; --colour-text: #FAFAFA; --colour-border: #6B6B6B; --colour-text-muted: #B0B0B0; --colour-popup-paper: #292929; --colour-popup-bg: #3D3D3D80; /* DROPDOWN MENU - dark mode */ --nav-dropdown-bg: #2A2A2A; --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); /* Composite shadows — dark mode. Same geometry, heavier alpha, matching the [data-theme="dark"] .popup-modal / .hero-card-suggest rules further down. */ --shadow-resting: 0 2px 1px -1px rgba(0,0,0,0.45), 0 1px 1px 0 rgba(0,0,0,0.32), 0 1px 3px 0 rgba(0,0,0,0.28); --shadow-floating: 0 20px 30px rgba(0,0,0,0.40), 0 8px 10px rgba(0,0,0,0.30); --shadow-lifted: 0 24px 38px rgba(0,0,0,0.45), 0 12px 16px rgba(0,0,0,0.30); /* ICON / CARD-FAN tuned for dark mode */ /* Card body sits a bit above the background so the white stroke sits on top */ --ss-fill: #1F1F1F; /* very dark card body (distinct from page bg) */ --ss-stroke: #F5F5F5; /* high-contrast stroke so card outlines read clearly */ /* Accents tuned for visibility on dark backgrounds. These work well as stroke accents (colored outline) or as fills if you prefer full-color cards. */ --accent-ss: #FF6B6B; /* warm but not neon red (Shiny/SS) */ --accent-ps: #4DA6FF; /* bright, readable blue (PS) */ --accent-pps: #FF8A5B; /* warm salmon/orange (PPS) */ --accent-pms: #C48CFF; /* soft violet (PMS) */ --accent-default: #2A2A2A; /* fallback card body for unknown variants */ /* FAN BUTTON STATES - dark mode */ --fan-gray: #555555; --fan-gray-stroke: #777777; --fan-owned-fill: #2BA0DB; --fan-owned-stroke: #1F8AC0; /* CHART PALETTE - dark */ --colour-chart-1: #2BA0DB; --colour-chart-2: #20D4A2; --colour-chart-3: #E8B84A; --colour-chart-4: #A78BDB; --colour-chart-5: #FF8A6A; --colour-chart-6: #4EEBD4; /* PRICE TREND PALETTE - dark */ --colour-trend-positive: #5EBDBD; --colour-trend-positive-bg: rgba(94, 189, 189, 0.12); --colour-trend-negative: #F97316; --colour-trend-negative-bg: rgba(249, 115, 22, 0.12); --colour-trend-neutral: #94A3B8; --chart-fill-positive: rgba(94, 189, 189, 0.18); --chart-scrubber: rgba(201, 169, 97, 0.6); --colour-pricing-gold: #C9A961; --colour-pricing-gold-bg: rgba(201, 169, 97, 0.15); /* STATUS - dark */ --colour-success: #34D399; --colour-warning: #FBBF24; --colour-error: #F87171; /* TILE TINTS - dark */ --tile-tint-blue: rgba(43, 160, 219, 0.10); --tile-tint-teal: rgba(32, 212, 162, 0.10); --tile-tint-gold: rgba(232, 184, 74, 0.10); --tile-tint-violet: rgba(167, 139, 219, 0.10); --tile-tint-coral: rgba(255, 138, 106, 0.10); /* BAR TRACK - dark */ --bar-track: #4A4A4A; /* WELCOME HERO GRADIENT - dark */ --welcome-gradient: linear-gradient(135deg, #0A2E56 0%, #104C91 50%, #0E5C5C 100%); /* HOLO GRADIENT - dark */ --holo-gradient: linear-gradient( 135deg, rgba(43, 160, 219, 0.12) 0%, rgba(167, 139, 219, 0.12) 25%, rgba(32, 212, 162, 0.12) 50%, rgba(232, 184, 74, 0.12) 75%, rgba(43, 160, 219, 0.12) 100% ); } /* GLOBAL FOCUS STYLES */ :focus-visible { outline: 3px solid var(--colour-primary); outline-offset: 2px; } /* Remove default focus ring only when custom is provided */ button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } body { /* Transparent on purpose — the colour is on (see the note there). An opaque background here hides the ambient card layer. */ background-color: transparent; color: var(--colour-text, #121212); font-family: var(--font-header, "Montserrat", sans-serif); font-weight: var(--font-weight-lg); font-optical-sizing: auto; font-style: normal; margin: 0; padding: 16px clamp(16px, 5vw, 140px) 0 clamp(16px, 5vw, 140px); } /* Old navbar styles moved to nav.css */ .hero-contents { min-height: 100vh; } .hero-signup { text-align: center; margin: 40px auto 16px; background: var(--colour-paper); border-radius: var(--radius-md); /* width: min() lets margin:auto center the box. Previously a separate margin-inline: clamp(...) overrode the auto centering and at wide viewports left the leftover max-width slack on the right edge. */ width: min(1640px, 100% - 2 * clamp(16px, 4vw, 32px)); box-shadow: 0 20px 30px rgba(0,0,0,0.15), 0 8px 10px rgba(0,0,0,0.10); } .hero-signup-text { /* Fluid: 28px on a 320px viewport up to 61.04px on desktop. */ font-size: clamp(1.75rem, 1.1rem + 3.5vw, var(--text-xl)); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; padding: clamp(24px, 6vw, 64px) 16px; margin: 0; } .signup-button { font-family: var(--font-header); font-weight: var(--font-weight-lg); font-style: normal; /* Retuned 2026-08 for the landing revamp. The old ramp (clamp(1.25rem, 0.95rem + 1.5vw, var(--text-lg)) with up to 32px of vertical padding) computed to ~81px tall / 29px text at 920px and ~112px tall / 39px text at 1600px — a call-to-action taller than a phone's navigation bar, sitting next to a 16px secondary link. The design handoff worked around it with zoom:0.78; zoom is non-standard and affects layout and hit-testing, so the ramp itself is fixed here instead — the handoff's own recommendation ("should become the site-wide default"). Now 18px text / ~50px tall on phones up to 22px / ~63px on wide desktop. Only two call sites: main/home.php and shared/tcg/stats.php. */ font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2; text-decoration: none; background-color: var(--colour-primary); border: none; color: #FAFAFA; /* text colour */ padding: clamp(14px, 1.4vw, 18px) clamp(24px, 3vw, 36px); min-height: 48px; margin: 0 16px clamp(24px, 6vw, 64px); max-width: calc(100% - 32px); cursor: pointer; border-radius: var(--radius-sm); transition: 0.3s } .signup-button:hover { background-color: var(--primary-hover); box-shadow: 0 0 2px 5px #104C915f; /* rework the shadow*/ color: #FAFAFA; } .signup-button:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 2px; } /* The Modal (background) */ .popup { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: var(--z-modal); /* Sit on top of everything */ padding-top: 120px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: var(--colour-popup-bg) /* Black w/ opacity */ } #popup { z-index: calc(var(--z-modal) + 100); } /* Modal Content */ .popup-modal { display: none; /* Hidden by default */ background-color: var(--colour-popup-paper); margin: auto; padding: var(--space-32) var(--space-48); border: 1px solid var(--colour-secondary); max-width: 450px; border-radius: var(--radius-sm); position: relative; color: var(--colour-text); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.10); } .popup-modal .popup-modal-title { font-size: var(--text-xl); margin: 0 0 var(--space-16) 0; text-align: center; } /* Subtitle paragraph (e.g., "Already have an account?") */ .popup-modal .popup-modal-title + p { font-size: var(--text-sm); margin: 0 0 var(--space-32) 0; text-align: center; } /* General paragraphs */ .popup-modal p { font-size: var(--text-sm); margin: var(--space-16) 0; text-align: center; } .popup-modal p a, .popup-modal a { color: var(--colour-primary); text-decoration: none; font-weight: var(--font-weight-md); transition: color 0.2s ease; } .popup-modal p a:hover, .popup-modal a:hover { color: var(--primary-hover); } .popup-modal p a:focus-visible, .popup-modal a:focus-visible { outline: 2px solid var(--colour-secondary); outline-offset: 2px; border-radius: 2px; } .popup-modal label { font-size: var(--text-sm); font-weight: var(--font-weight-md); margin-bottom: var(--space-8); display: block; } .popup-modal input { margin-bottom: var(--space-16); } .popup-modal small { display: block; font-size: var(--text-xs); color: var(--colour-text-muted); margin-top: calc(-1 * var(--space-8)); margin-bottom: var(--space-16); } /* Add space around submit button */ .popup-modal .submit { margin-top: var(--space-24); margin-bottom: var(--space-24); font-size: 18px; padding: 18px var(--space-32); } .popup-modal .signup-checkbox, .popup-modal .signup-age-note { font-size: var(--text-xs); } /* Close (×) button styling */ .popup-close { position: absolute; top: 12px; right: 12px; background: none; border: none; width: 32px; height: 32px; font-size: 24px; line-height: 1; color: var(--colour-text); cursor: pointer; border-radius: var(--radius-xs); transition: background-color 0.2s ease, color 0.2s ease; display: flex; align-items: center; justify-content: center; } .popup-close:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--colour-primary); } .popup-close:focus-visible { outline: 3px solid var(--colour-primary); outline-offset: 2px; } /* Full-width input fields. font-size: max(16px, ...) prevents iOS Safari auto-zoom on focus. min-height: 44px meets WCAG 2.5.8 AA touch-target minimum. */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=search], input[type=url], select, textarea { width: 100%; padding: 15px; display: inline-block; min-height: 44px; border: 1px solid var(--colour-border); border-radius: var(--radius-xs); background: var(--colour-paper); color: var(--colour-text); font-family: var(--font-paragraph); font-size: max(16px, var(--text-sm)); box-sizing: border-box; transition: border-color 0.2s ease, background-color 0.2s ease; } textarea { min-height: 88px; resize: vertical; } input[type=text]:hover, input[type=password]:hover, input[type=email]:hover, input[type=number]:hover, input[type=tel]:hover, input[type=search]:hover, input[type=url]:hover, select:hover, textarea:hover { border-color: var(--colour-secondary); } input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=email]:focus-visible, input[type=number]:focus-visible, input[type=tel]:focus-visible, input[type=search]:focus-visible, input[type=url]:focus-visible, select:focus-visible, textarea:focus-visible { background-color: var(--colour-popup-paper); border-color: var(--colour-secondary); outline: 3px solid var(--colour-secondary); outline-offset: 0; } .submit { background-color: var(--colour-primary); padding: 15px var(--space-32); border: none; border-radius: var(--radius-xs); cursor: pointer; color: #FAFAFA; font-family: var(--font-header); font-weight: var(--font-weight-lg); font-size: var(--text-sm); width: 50%; display: block; margin: 0 auto; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .submit:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .submit:active { transform: translateY(0); box-shadow: none; } .submit:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 2px; } .submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .space { padding: 64px; } .hero-cards-container { display: grid; /* min(100%, card-width-md) prevents the minmax floor from forcing horizontal scroll when the viewport is narrower than 437px. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-width-md)), 1fr)); gap: clamp(16px, 4vw, 32px); padding-inline: clamp(16px, 4vw, 32px); align-items: center; justify-items: center; position: relative; } .hero-card { position: relative; /* Fluid width up to the design max — no longer overflows narrow viewports. */ width: 100%; max-width: var(--card-width-md); aspect-ratio: 437 / 608; height: auto; overflow: hidden; margin: 16px 0; border-radius: var(--radius-sm); box-shadow: 0 20px 30px rgba(0,0,0,0.15), 0 8px 10px rgba(0,0,0,0.10); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: inherit; } .hero-card:hover { transform: translateY(-4px); box-shadow: 0 24px 38px rgba(0, 0, 0, 0.20), 0 12px 16px rgba(0, 0, 0, 0.14); } .hero-card-media { width: 100%; height: 100%; } .hero-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-card-media picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 4s ease; } .hero-card-media picture.active { opacity: 1; } .hero-card-info { position: absolute; left: 0; right: 0; width: 100%; /* Fluid height: ~88px on phones, 120px on desktop. */ height: clamp(88px, 18vw, 120px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background-color: var(--colour-popup-bg); bottom: 0; box-sizing: border-box; padding: 12px 24px; } .hero-filter { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; border-radius: var(--radius-sm); background-color: var(--colour-popup-bg); } .hero-card-beta { position: absolute; top: 16px; right: 16px; padding: 6px 14px; font-family: var(--font-header); font-size: var(--text-xs); font-weight: var(--font-weight-lg); text-transform: uppercase; letter-spacing: 2px; color: #FAFAFA; background: var(--colour-primary); border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .hero-card-info img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; } /* NOTE: `.hero-card-palworld { object-position: center 28% }` lived here to reframe a head-on sample card that the tile used as placeholder art. The tile now shows real set banners from the CDN, framed like the Pokémon and One Piece ones, so the offset would crop them wrongly. Rule and class both removed — .hero-card-palworld-logo below is a different, still-used class. */ .hero-card-palworld-logo { display: flex; flex-direction: column; align-items: center; color: #fff; font-family: Montserrat, sans-serif; font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 800; letter-spacing: .08em; line-height: 1; text-shadow: 0 2px 8px rgb(0 0 0 / 70%); } .hero-card-palworld-logo small { margin-top: .4rem; font-size: .42em; letter-spacing: .22em; } /* ======================================== SUGGEST-A-TCG HERO CARD ======================================== */ .hero-card-suggest { background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary)); text-decoration: none; display: flex; align-items: center; justify-content: center; } .hero-card-suggest:focus-visible { outline: 3px solid var(--colour-accent); outline-offset: 4px; } .hero-card-suggest-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-48); gap: var(--space-16); } .hero-card-suggest-icon { width: 80px; height: 80px; color: rgba(255, 255, 255, 0.6); margin-bottom: var(--space-8); flex-shrink: 0; } .hero-card-suggest-heading { font-family: var(--font-header); font-size: var(--text-lg); font-weight: var(--font-weight-lg); color: #FAFAFA; margin: 0; line-height: 1.2; } .hero-card-suggest-description { font-family: var(--font-paragraph); font-size: var(--text-sm); font-weight: var(--font-weight-sm); color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.5; max-width: 320px; } .hero-card-suggest-cta { display: inline-block; margin-top: var(--space-16); padding: 12px 32px; background-color: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-sm); color: #FAFAFA; font-family: var(--font-header); font-size: var(--text-sm); font-weight: var(--font-weight-md); transition: background-color 0.2s ease, border-color 0.2s ease; } .hero-card-suggest:hover .hero-card-suggest-cta { background-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.8); } /* ======================================== OAUTH BUTTONS ======================================== */ /* Divider between form and OAuth buttons */ .oauth-divider { display: flex; align-items: center; text-align: center; margin: var(--space-8) 0 var(--space-16) 0; } .oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--colour-border); } .oauth-divider span { padding: 0 16px; color: var(--colour-text); font-size: var(--text-xs); font-weight: var(--font-weight-sm); opacity: 0.7; } /* OAuth buttons container */ .oauth-buttons { display: flex; flex-direction: row; justify-content: center; gap: var(--space-16); margin-bottom: var(--space-8); } /* Base OAuth button style */ .oauth-btn { display: flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid var(--colour-border); border-radius: 50%; background: var(--colour-paper); color: var(--colour-text); cursor: pointer; transition: all 0.2s ease; } .oauth-btn:hover { background: var(--colour-bg); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .oauth-icon { width: 24px; height: 24px; flex-shrink: 0; } /* Provider-specific hover colors */ .oauth-google:hover { border-color: #4285f4; } .oauth-discord:hover { border-color: #5865F2; } .oauth-apple:hover { border-color: #000000; } /* Dark theme adjustments */ [data-theme="dark"] .oauth-btn { background: var(--colour-paper); border-color: #4a4a4a; } [data-theme="dark"] .oauth-btn:hover { background: #3a3a3a; } /* Dark mode modal adjustments */ [data-theme="dark"] .popup-modal { box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .hero-card-suggest { background: linear-gradient(135deg, #0D3A6E, #165F85); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .hero-card-suggest:hover { box-shadow: 0 24px 38px rgba(0, 0, 0, 0.45), 0 12px 16px rgba(0, 0, 0, 0.30); } [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=password], [data-theme="dark"] input[type=email] { background: var(--colour-paper); border-color: #4a4a4a; } [data-theme="dark"] input[type=text]:hover, [data-theme="dark"] input[type=password]:hover, [data-theme="dark"] input[type=email]:hover { border-color: var(--colour-secondary); } [data-theme="dark"] input[type=text]:focus-visible, [data-theme="dark"] input[type=password]:focus-visible, [data-theme="dark"] input[type=email]:focus-visible { background-color: var(--colour-popup-paper); } [data-theme="dark"] input::placeholder { color: var(--colour-text-muted); opacity: 1; } [data-theme="dark"] .popup-close:hover { background-color: rgba(255, 255, 255, 0.05); } /* OAuth status messages */ .oauth-message { padding: 12px 16px; border-radius: var(--radius-xs); margin-bottom: 16px; font-size: var(--text-sm); text-align: center; } .oauth-message.info { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; } .oauth-message.error { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; } .oauth-message.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } [data-theme="dark"] .oauth-message.info { background: #1e3a5f; color: #90caf9; border-color: #1565c0; } [data-theme="dark"] .oauth-message.error { background: #4a1c1c; color: #ef9a9a; border-color: #c62828; } [data-theme="dark"] .oauth-message.success { background: #1b4332; color: #a5d6a7; border-color: #2e7d32; } /* ======================================== PASSWORD TOGGLE ======================================== */ .password-input-wrapper { position: relative; width: 100%; margin-bottom: var(--space-16); } .password-input-wrapper input { width: 100%; padding: 15px 50px 15px 15px; margin-bottom: 0; box-sizing: border-box; border-radius: var(--radius-xs); } .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 10; background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; color: var(--colour-text); opacity: 0.6; transition: opacity 0.2s ease; } .password-toggle:hover { opacity: 1; } .password-toggle:focus-visible { opacity: 1; outline: 2px solid var(--colour-primary); outline-offset: 2px; border-radius: 4px; } .password-toggle svg { width: 20px; height: 20px; } .eye-icon, .eye-off-icon { pointer-events: none; } /* ── Loading Bar ── */ #page-loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--colour-primary) 0%, var(--colour-primary) 50%, color-mix(in srgb, var(--colour-primary) 70%, white) 100%); box-shadow: 0 0 10px color-mix(in srgb, var(--colour-primary) 60%, transparent); z-index: 9999; opacity: 0; pointer-events: none; will-change: width, opacity; } /* ── Screen-reader-only utility ────────────────────────────────────────── `.visually-hidden` was used by templates/auth/mfa-prompt.php and templates/auth/2fa-reverify.php but defined in NO stylesheet, so the "Verification code" label rendered as ordinary visible text above the input — a layout fault caused by a missing definition, not by bad styling. Standard clip-rect technique: removed from the visual flow, still read by assistive technology and still the target of the label's for="code". */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }