/* GuildedPreps — The Guild (page overrides) ----------------------------------------------------------------------------- Intended usage (recommended): - Add class "guild-page" to (or wrap the page in a .guild-page root). - Load this file AFTER your base CSS (tailwind.css, site.css, etc.). Scope: All rules are scoped to .guild-page so other pages remain unaffected. */ /* ---------- Design tokens (scoped) ---------- */ body.guild-page, .guild-page{ /* layout */ --gp-max: 1320px; /* palette */ --gp-bg: #07080c; --gp-bg2: #0b0d14; --gp-text: rgba(255,255,255,.94); --gp-muted: rgba(255,255,255,.78); --gp-muted2: rgba(255,255,255,.66); --gp-border: rgba(255,255,255,.10); --gp-border2: rgba(255,255,255,.11); --gp-shadow: 0 18px 60px rgba(0,0,0,.45); --gp-radius: 18px; --gp-radius2: 26px; /* spacing (slightly roomier than typical utility defaults) */ --gp-space-1: 10px; --gp-space-2: 14px; --gp-space-3: 18px; --gp-space-4: 24px; --gp-space-5: 32px; --gp-space-6: 44px; } /* ---------- Page base ---------- */ body.guild-page{ min-height: 100dvh; color: var(--gp-text); background: radial-gradient(1000px 600px at 15% 10%, rgba(99,102,241,.26), transparent 55%), radial-gradient(900px 520px at 85% 0%, rgba(168,85,247,.18), transparent 55%), radial-gradient(900px 600px at 50% 90%, rgba(250,204,21,.10), transparent 55%), linear-gradient(180deg, var(--gp-bg), var(--gp-bg2)); overflow-x: hidden; line-height: 1.45; } .guild-page a{ color: inherit; text-decoration: none; } .guild-page img, .guild-page svg, .guild-page video{ max-width: 100%; display: block; } /* Container */ .guild-page .container{ max-width: var(--gp-max); margin: 0 auto; padding: 0 20px; } /* ---------- Topbar / Nav ---------- */ .guild-page .topbar{ position: sticky; top: 0; z-index: 50; background: rgba(10,11,16,.55); border-bottom: 1px solid var(--gp-border2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .guild-page .topbar{ background: rgba(10,11,16,.82); } } .guild-page .nav{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; min-width: 0; } .guild-page .brand{ display: flex; align-items: center; gap: 12px; min-width: 0; } .guild-page .mark{ width: 40px; height: 40px; border-radius: 14px; background: radial-gradient(18px 18px at 30% 30%, rgba(250,204,21,.9), rgba(250,204,21,.15) 62%, transparent 70%), linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.35); } .guild-page .name{ display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .guild-page .name b{ font-size: 1.02rem; letter-spacing: .2px; white-space: nowrap; } .guild-page .name span{ font-size: .82rem; color: var(--gp-muted2); font-weight: 800; white-space: nowrap; } .guild-page .navlinks{ display: flex; gap: 6px; align-items: center; border: 1px solid var(--gp-border2); border-radius: 999px; background: rgba(255,255,255,.022); padding: 6px; min-width: 0; } .guild-page .navlinks a{ font-weight: 800; font-size: .9rem; color: var(--gp-muted); padding: 6px 8px; border-radius: 999px; transition: background .15s ease, color .15s ease; white-space: nowrap; } .guild-page .navlinks a:hover{ background: rgba(255,255,255,.06); color: var(--gp-text); } .guild-page .navcta{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .guild-page .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.042); color: var(--gp-text); font-weight: 900; letter-spacing: .2px; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .15s ease, background .15s ease, border-color .15s ease; cursor: pointer; user-select: none; } .guild-page .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.18); } .guild-page .btn:active{ transform: translateY(0); } .guild-page .btn.small{ padding: 9px 12px; font-size: .9rem; } .guild-page .btn.gold{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.18); } .guild-page .btn.gold:hover{ background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.24); } .guild-page .btn.ghost{ background: transparent; border-color: rgba(255,255,255,.16); } /* Secondary CTA link */ .guild-page .mini-link{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 2px; font-weight: 950; letter-spacing: .15px; color: rgba(255,255,255,.84); border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; transition: color .15s ease, border-color .15s ease, transform .15s ease; white-space: nowrap; } .guild-page .mini-link:hover{ color: var(--gp-text); border-bottom-color: rgba(250,204,21,.60); transform: translateY(-1px); } .guild-page .mini-link:active{ transform: translateY(0); } /* Hide any legacy per-card actions (cards are fully clickable) */ .guild-page .class-actions{ display: none !important; } /* ---------- Hero ---------- */ .guild-page .hero{ padding: 56px 0 18px; } .guild-page .hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: stretch; min-width: 0; } .guild-page .chip{ display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: var(--gp-muted); font-weight: 900; font-size: .9rem; } .guild-page .dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(250,204,21,.9); box-shadow: 0 0 0 4px rgba(250,204,21,.16); } .guild-page h1{ margin: 14px 0 10px; font-size: clamp(2.1rem, 3vw, 3.1rem); line-height: 1.05; letter-spacing: -0.6px; } .guild-page .lead{ margin: 0 0 16px; color: var(--gp-muted); font-size: 1.05rem; font-weight: 800; max-width: 52ch; } .guild-page .hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .guild-page .micro{ margin-top: 14px; color: var(--gp-muted2); font-weight: 800; font-size: .9rem; } .guild-page .stats{ margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .guild-page .stat{ padding: 14px 14px; border-radius: var(--gp-radius); border: 1px solid var(--gp-border2); background: rgba(255,255,255,.03); min-width: 0; } .guild-page .stat b{ display: block; font-size: .98rem; } .guild-page .stat span{ display: block; margin-top: 4px; color: var(--gp-muted2); font-weight: 800; font-size: .85rem; } .guild-page .divider{ margin: 30px 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } .guild-page .subhead{ display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .guild-page .subhead b{ font-size: 1rem; } .guild-page .subhead span{ color: var(--gp-muted2); font-weight: 800; font-size: .92rem; } /* ---------- Toolbar / Inputs ---------- */ .guild-page .toolbar{ margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .guild-page .input{ padding: 13px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: var(--gp-text); font-weight: 800; outline: none; min-width: 0; } .guild-page .input::placeholder{ color: rgba(255,255,255,.45); } .guild-page .select{ min-width: 170px; flex: 0 0 auto; } /* ---------- Forms ---------- */ .guild-page .form{ margin-top: 14px; display: grid; gap: 12px; } .guild-page .form-row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .guild-page .field label{ display: block; margin: 0 0 8px; color: var(--gp-muted2); font-weight: 900; font-size: .85rem; } .guild-page .textarea{ padding: 13px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: var(--gp-text); font-weight: 800; outline: none; min-height: 120px; resize: vertical; } .guild-page .textarea::placeholder{ color: rgba(255,255,255,.45); } .guild-page .form-foot{ color: var(--gp-muted2); font-weight: 850; font-size: .86rem; margin-top: 4px; } /* ---------- Cards / Panels ---------- */ .guild-page .card{ border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 420px at 18% 0%, rgba(250,204,21,.08), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); box-shadow: var(--gp-shadow); overflow: hidden; min-width: 0; } .guild-page .card-inner{ padding: 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; } .guild-page .title-row{ display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; min-width: 0; } .guild-page .title-row h3{ margin: 0; font-size: 1.08rem; } .guild-page .title-row p{ margin: 0; color: var(--gp-muted2); font-weight: 800; } .guild-page .mosaic{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; } .guild-page .portrait{ position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); min-width: 0; aspect-ratio: 4 / 3; } .guild-page .portrait img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .guild-page .label{ position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 12px; border-radius: 16px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .guild-page .label{ background: rgba(0,0,0,.72); } } .guild-page .label b{ display: block; font-size: .95rem; } .guild-page .label span{ display: block; color: rgba(255,255,255,.72); font-weight: 800; font-size: .85rem; margin-top: 2px; } .guild-page section{ padding: 46px 0; } /* Browse section - positioned between hero and categories */ .guild-page .browse-section{ padding: 24px 0; } .guild-page .section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .guild-page .section-head h2{ margin: 0; font-size: 1.55rem; letter-spacing: -0.3px; } .guild-page .section-head p{ margin: 6px 0 0; color: var(--gp-muted2); font-weight: 800; max-width: 70ch; } /* Tags: typography-first */ .guild-page .tags{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .guild-page .tag{ display: inline-flex; align-items: center; padding: 5px 2px; border: none; background: transparent; color: rgba(255,255,255,.70); font-weight: 900; font-size: .82rem; letter-spacing: .12px; white-space: nowrap; } .guild-page .tag::before{ content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.20); margin-right: 8px; } .guild-page .tag.gold{ color: rgba(255,255,255,.92); } .guild-page .tag.gold::before{ background: rgba(250,204,21,.92); } /* Actions row */ .guild-page .actions{ margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } /* ---------- Categories ---------- */ .guild-page .category-grid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .guild-page .cat{ display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 16px; border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.028); transition: transform .15s ease, background .15s ease, border-color .15s ease; min-height: 92px; min-width: 0; } .guild-page .cat:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); } .guild-page .cat small{ color: var(--gp-muted2); font-weight: 900; } .guild-page .icon{ width: 38px; height: 38px; border-radius: 14px; border: 1px solid rgba(250,204,21,.28); background: rgba(250,204,21,.10); display: grid; place-items: center; flex: 0 0 auto; } .guild-page .icon svg{ width: 20px; height: 20px; } /* ---------- Simple grid helpers (match the HTML demo) ---------- */ .guild-page .guild-grid{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px; } .guild-page .col-12{ grid-column: span 12; } .guild-page .col-8{ grid-column: span 8; } .guild-page .col-6{ grid-column: span 6; } .guild-page .col-4{ grid-column: span 4; } .guild-page .col-3{ grid-column: span 3; } .guild-page .panel{ border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.028); overflow: hidden; min-width: 0; } .guild-page .panel.gold{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); } .guild-page .panel-inner{ padding: 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; } .guild-page .panel-inner h3{ margin: 0 0 6px; font-size: 1.08rem; } .guild-page .panel-inner p{ margin: 0; color: var(--gp-muted2); font-weight: 800; } .guild-page .list{ margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } .guild-page .list li{ padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.022); color: rgba(255,255,255,.82); font-weight: 800; min-width: 0; } /* ---------- Video module ---------- */ .guild-page .video-card{ border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); overflow: hidden; box-shadow: var(--gp-shadow); } .guild-page .video-thumb{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(900px 420px at 20% 10%, rgba(250,204,21,.10), transparent 55%), radial-gradient(800px 420px at 85% 0%, rgba(168,85,247,.14), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } .guild-page .video-thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) contrast(1.03); opacity: .78; transform: scale(1.02); } .guild-page .video-thumb::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 30% 10%, rgba(0,0,0,.10), rgba(0,0,0,.50) 55%), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)); pointer-events: none; } .guild-page .play-btn{ position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; } .guild-page .play-core{ width: 84px; height: 84px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 16px 60px rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .guild-page .play-core:hover{ transform: translateY(-2px); background: rgba(0,0,0,.55); border-color: rgba(250,204,21,.35); } .guild-page .play-core svg{ width: 26px; height: 26px; } .guild-page .video-meta{ padding: 18px 18px 18px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .guild-page .video-meta b{ display: block; font-size: 1.02rem; letter-spacing: -0.2px; } .guild-page .video-meta span{ display: block; margin-top: 6px; color: var(--gp-muted2); font-weight: 850; max-width: 66ch; } /* ---------- Format blocks + class cards ---------- */ .guild-page .format-block{ margin-top: 24px; padding: 20px 20px; border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } .guild-page .format-head{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .guild-page .format-head b{ font-size: 1.02rem; } .guild-page .format-head span{ display: inline-block; margin-left: 10px; color: var(--gp-muted2); font-weight: 800; font-size: .9rem; } .guild-page .class-grid{ margin-top: 14px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 14px; } .guild-page .class-card{ border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.028); overflow: hidden; transition: transform .15s ease, background .15s ease, border-color .15s ease; display: flex; flex-direction: column; min-width: 0; height: 100%; } .guild-page .class-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); } .guild-page .class-card.lg{ grid-column: span 6; } .guild-page .class-card.md{ grid-column: span 3; } .guild-page .class-card.sm{ grid-column: span 3; } .guild-page .class-media{ position: relative; aspect-ratio: 16 / 9; background: rgba(255,255,255,.02); overflow: hidden; } .guild-page .class-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.32)), radial-gradient(600px 260px at 30% 10%, rgba(250,204,21,.14), transparent 55%); pointer-events: none; } .guild-page .class-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .guild-page .class-badge{ position: absolute; top: 10px; left: 10px; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.45); color: rgba(255,255,255,.90); font-weight: 900; font-size: .8rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .guild-page .class-badge.gold{ border-color: rgba(255,255,255,.20); background: rgba(0,0,0,.40); } .guild-page .class-info{ padding: 14px 14px 15px; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; } .guild-page .class-title{ margin: 0; font-size: 1.02rem; letter-spacing: -0.2px; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.36em; } .guild-page .class-by{ margin: 0; color: var(--gp-muted2); font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em; } /* Programs: portraits tend to need a higher focal point */ .guild-page .format-programs .class-media img{ object-position: 50% 22%; } /* Clickable cards */ .guild-page .js-card{ cursor: pointer; } /* ---------- Masters grid ---------- */ .guild-page .masters-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .guild-page .master-card{ display: flex; flex-direction: column; border-radius: var(--gp-radius2); border: 1px solid rgba(255,255,255,.095); background: rgba(255,255,255,.028); overflow: hidden; transition: transform .15s ease, background .15s ease, border-color .15s ease; min-width: 0; cursor: pointer; } .guild-page .master-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); } .guild-page .master-media{ aspect-ratio: 1 / 1; background: rgba(255,255,255,.02); overflow: hidden; } .guild-page .master-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .guild-page .master-body{ padding: 12px 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .guild-page .master-name{ margin: 0; font-size: 1.02rem; letter-spacing: -0.2px; } .guild-page .master-role{ margin: 6px 0 10px; color: var(--gp-muted2); font-weight: 800; font-size: .92rem; } /* ---------- Meet carousel ---------- */ .guild-page .meet{ padding: 34px 0 6px; } .guild-page .meet-head{ display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; margin: 0 auto 16px; max-width: 72ch; } .guild-page .meet-head h2{ margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.35rem); line-height: 1.06; letter-spacing: -0.5px; } .guild-page .meet-head p{ margin: 0; color: var(--gp-muted2); font-weight: 850; font-size: .98rem; } .guild-page .br-md{ display: none; } .guild-page .meet-shell{ position: relative; border-radius: 28px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.02); overflow: hidden; box-shadow: var(--gp-shadow); } .guild-page .meet-viewport{ overflow: hidden; } .guild-page .meet-track{ display: flex; width: 100%; transform: translateX(0%); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .guild-page .meet-slide{ flex: 0 0 100%; min-width: 100%; } .guild-page .meet-tile{ position: relative; display: block; aspect-ratio: 21 / 9; min-height: 260px; background: rgba(255,255,255,.02); } .guild-page .meet-tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .88; filter: saturate(1.05) contrast(1.03); } .guild-page .meet-overlay{ position: absolute; inset: 0; background: radial-gradient(1200px 520px at 20% 10%, rgba(0,0,0,.10), rgba(0,0,0,.58) 60%), linear-gradient(to left, rgba(0,0,0,.85) 10%, rgba(0,0,0,.58) 22%, rgba(0,0,0,0) 52%); pointer-events: none; } .guild-page .meet-caption{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 18px 18px; gap: 14px; } .guild-page .meet-badge{ align-self: flex-end; display: inline-flex; padding: 8px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.42); color: rgba(255,255,255,.92); font-weight: 950; font-size: .78rem; letter-spacing: .25px; } .guild-page .meet-nameplate{ display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.44); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: min(520px, 92%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .guild-page .meet-nameplate{ background: rgba(0,0,0,.64); } } .guild-page .meet-avatar{ width: 54px; height: 54px; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); flex: 0 0 auto; } .guild-page .meet-avatar img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .guild-page .meet-name{ min-width: 0; } .guild-page .meet-name b{ display: block; font-size: 1.02rem; letter-spacing: -0.2px; } .guild-page .meet-name span{ display: block; color: rgba(255,255,255,.74); font-weight: 850; font-size: .9rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .guild-page .meet-actions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .guild-page .meet-meta{ color: rgba(255,255,255,.78); font-weight: 850; font-size: .9rem; padding: 10px 0; } .guild-page .meet-arrow{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.42); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; box-shadow: 0 16px 60px rgba(0,0,0,.45); } .guild-page .meet-arrow:hover{ background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.22); transform: translateY(-50%) translateY(-1px); } .guild-page .meet-arrow:active{ transform: translateY(-50%); } .guild-page .meet-arrow.left{ left: 12px; } .guild-page .meet-arrow.right{ right: 12px; } .guild-page .meet-arrow svg{ width: 20px; height: 20px; } .guild-page .meet-dots{ display: flex; justify-content: center; gap: 10px; margin-top: 12px; } .guild-page .meet-dot{ width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); cursor: pointer; padding: 0; } .guild-page .meet-dot[aria-current="true"]{ background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.44); } /* ---------- Modal ---------- */ .guild-page .modal{ position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 18px; background: rgba(0,0,0,.65); } .guild-page .modal[aria-hidden="false"]{ display: grid; } .guild-page .modal-card{ width: min(1020px, 100%); border-radius: 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,11,16,.88); box-shadow: 0 30px 120px rgba(0,0,0,.70); overflow: hidden; } .guild-page .modal-top{ display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } .guild-page .modal-top b{ font-weight: 950; letter-spacing: .1px; } .guild-page .icon-btn{ width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: var(--gp-text); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .guild-page .icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); } .guild-page .player{ aspect-ratio: 16 / 9; width: 100%; background: #000; } .guild-page .player iframe, .guild-page .player video{ width: 100%; height: 100%; border: 0; display: block; } /* ---------- Footer ---------- */ .guild-page footer{ padding: 46px 0 56px; border-top: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.20); } .guild-page .footer-grid{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .guild-page footer h2{ margin: 0 0 8px; font-size: 1.25rem; } .guild-page footer p{ margin: 0 0 14px; color: var(--gp-muted2); font-weight: 800; max-width: 70ch; } .guild-page .foot-links{ display: flex; gap: 12px; flex-wrap: wrap; } .guild-page .foot-links a{ color: var(--gp-muted); font-weight: 900; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } .guild-page .foot-links a:hover{ background: rgba(255,255,255,.05); color: var(--gp-text); } /* ---------- Responsive ---------- */ @media (max-width: 980px){ .guild-page .hero-grid{ grid-template-columns: 1fr; } .guild-page .navlinks{ display: none; } .guild-page .col-8{ grid-column: span 12; } .guild-page .col-6{ grid-column: span 12; } .guild-page .col-4{ grid-column: span 12; } .guild-page .col-3{ grid-column: span 6; } } @media (max-width: 900px){ .guild-page .br-md{ display: block; } .guild-page .meet-tile{ aspect-ratio: 16 / 9; } .guild-page .meet-caption{ align-items: center; text-align: center; justify-content: flex-end; padding: 16px 14px 16px; } .guild-page .meet-overlay{ background: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,0) 55%); } .guild-page .meet-actions{ justify-content: center; } .guild-page .meet-nameplate{ max-width: 96%; } } @media (max-width: 720px){ .guild-page .form-row{ grid-template-columns: 1fr; } } @media (max-width: 520px){ .guild-page .container{ padding: 0 14px; } .guild-page .stats{ grid-template-columns: 1fr; } .guild-page .category-grid{ grid-template-columns: 1fr; } .guild-page .class-card.md, .guild-page .class-card.sm{ grid-column: span 12; } .guild-page .col-3{ grid-column: span 12; } .guild-page .meet-arrow{ display: none; } .guild-page .meet-avatar{ width: 48px; height: 48px; } .guild-page .meet-name b{ font-size: .98rem; } } /* ---------- Focus ---------- */ .guild-page :focus-visible{ outline: 2px solid rgba(250,204,21,.7); outline-offset: 2px; border-radius: 12px; } /* ============================================ HERO SECTION FIXES ============================================ */ /* Hero grid - 12 columns for col-7/col-5 split */ .guild-page .guild-hero .guild-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: start; } /* Column span classes */ .guild-page .col-7 { grid-column: span 7; } .guild-page .col-5 { grid-column: span 5; } /* Card in hero should not overflow */ .guild-page .guild-hero .col-5 .card { height: fit-content; } /* Stats grid - horizontal layout */ .guild-page .guild-hero .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 2rem; } /* Stat cards styling */ .guild-page .guild-hero .stats-grid .stat { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.5rem; padding: 1rem; } /* Mosaic grid - 2x2 */ .guild-page .guild-hero .mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } /* Mosaic images */ .guild-page .guild-hero .mosaic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; } /* ============================================ FOOTER FIXES ============================================ */ .guild-page footer .grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .guild-page footer .grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .guild-page .guild-hero .guild-grid { grid-template-columns: 1fr; } .guild-page .col-7, .guild-page .col-5 { grid-column: span 1; } .guild-page .guild-hero .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================ MASTERCLASSES BROWSE PAGE ============================================ */ /* Hero for masterclasses */ .guild-page .hero{ position:relative; padding: 14px 0 10px; } .guild-page .hero-inner{ padding: 14px 0 10px; } /* Quickbar */ .guild-page .quickbar{ margin-top: 12px; border-radius: 20px; background: rgba(255,255,255,.04); padding: 10px 0; display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .guild-page .qrow{ width:100%; display:flex; align-items:center; gap: 12px; flex-wrap: nowrap; min-width: 0; } .guild-page .qwrap{ position:relative; flex: 1 1 460px; min-width: 260px; } .guild-page .qinput{ width:100%; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.95); padding: 12px 14px 12px 42px; font-size: 13px; font-weight: 900; outline:none; } .guild-page .qinput::placeholder{ color: rgba(255,255,255,.40); font-weight: 850; } .guild-page .qicon{ position:absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.60); } .guild-page .qchips{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; } .guild-page .qchip{ display:inline-flex; align-items:center; gap: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 9px 12px; font-size: 12px; font-weight: 950; color: rgba(255,255,255,.80); cursor:pointer; user-select:none; transition: background .18s ease, border-color .18s ease, color .18s ease; } .guild-page .qchip:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.92); } .guild-page .qchip.active{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.95); } .guild-page .qd{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.35); } .guild-page .qchip.active .qd{ background: rgba(250,204,21,.92); } .guild-page .qrow2{ width:100%; display:flex; align-items:center; justify-content:flex-end; gap: 10px; flex-wrap: wrap; } .guild-page .qsel{ border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color: rgba(255,255,255,.92); padding: 10px 12px; font-size: 13px; font-weight: 950; outline:none; } /* Hero status */ .guild-page .herostatus{ margin-top: 10px; display:flex; align-items:center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .guild-page .activechips{ display:flex; flex-wrap: wrap; gap: 8px; align-items:center; } .guild-page .count span{ font-size: 13px; font-weight: 850; color: var(--gp-muted); } /* KPIs */ .guild-page .kpis{ margin-top: 10px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .guild-page .kpi{ border-radius: 18px; border: 1px solid var(--gp-border); background: rgba(255,255,255,.05); padding: 10px 12px; } .guild-page .kpi b{ display:block; font-size: 13px; font-weight: 950; } .guild-page .kpi span{ display:block; margin-top:4px; font-size: 12px; font-weight: 850; color: var(--gp-muted2); } /* Divider */ .guild-page .divider{ margin-top: 12px; height:1px; width:100%; background: linear-gradient(to right, transparent, rgba(255,255,255,.14), transparent); } /* Results */ .guild-page .results{ padding: 8px 0 64px; } /* Masterclass grid */ .guild-page .masterclass-grid{ display:grid; grid-template-columns: 1fr; gap: 16px; } /* Masterclass card */ .guild-page .masterclass-card{ border-radius: 24px; border: 1px solid var(--gp-border); background: rgba(255,255,255,.05); box-shadow: var(--gp-shadow); overflow:hidden; cursor:pointer; transition: background .18s ease, border-color .18s ease, transform .12s ease; outline: none; } .guild-page .masterclass-card:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); } .guild-page .masterclass-card:active{ transform: translateY(1px); } /* Media */ .guild-page .masterclass-card .media{ position:relative; width:100%; padding-top:56.25%; background: rgba(255,255,255,.05); overflow:hidden; } .guild-page .masterclass-card .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center; opacity: .90; transition: opacity .2s ease, transform .3s ease; transform: translateZ(0) scale(1.01); } .guild-page .masterclass-card:hover .media img{ opacity: .96; transform: translateZ(0) scale(1.03); } .guild-page .masterclass-card .overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,.28), rgba(0,0,0,.10)); pointer-events:none; } .guild-page .masterclass-card .badge{ position:absolute; top: 12px; left: 12px; display:inline-flex; align-items:center; gap: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.20); background: rgba(0,0,0,.52); padding: 9px 12px; font-size: 12px; font-weight: 950; color: rgba(255,255,255,.92); pointer-events:none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .guild-page .masterclass-card .badge-dot{ width:6px; height:6px; border-radius:999px; background: rgba(250,204,21,.92); } .guild-page .masterclass-card .badge.dim .badge-dot{ background: rgba(255,255,255,.45); } .guild-page .masterclass-card .card-body{ padding: 16px; display:flex; flex-direction: column; gap: 10px; } .guild-page .masterclass-card .title{ font-size: 14px; font-weight: 950; letter-spacing: -0.02em; line-height: 1.18; margin:0; } .guild-page .masterclass-card .clamp2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; } .guild-page .masterclass-card .master{ font-size: 13px; font-weight: 850; color: var(--gp-muted); margin:0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .guild-page .masterclass-card .meta{ display:flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; font-weight: 850; color: var(--gp-muted2); } .guild-page .masterclass-card .meta .m{ display:inline-flex; align-items:center; gap: 8px; } .guild-page .masterclass-card .meta .mdot{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.25); } .guild-page .masterclass-card .meta .mdot.gold{ background: rgba(250,204,21,.92); } .guild-page .masterclass-card .card-foot{ margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10); display:flex; align-items:center; justify-content: space-between; gap: 10px; } .guild-page .masterclass-card .when{ font-size: 13px; font-weight: 850; color: rgba(255,255,255,.78); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .guild-page .masterclass-card .view{ font-size: 13px; font-weight: 950; color: rgba(255,255,255,.90); white-space: nowrap; opacity: .92; } /* Masterclass card tags */ .guild-page .masterclass-card .tags{ margin-top: 2px; display:flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; font-weight: 950; color: rgba(255,255,255,.70); } .guild-page .masterclass-card .tag{ display:inline-flex; align-items:center; gap: 8px; } .guild-page .masterclass-card .tdot{ width:6px; height:6px; border-radius:999px; background: rgba(255,255,255,.25); } .guild-page .masterclass-card .tdot.gold{ background: rgba(250,204,21,.92); } /* Pagination */ .guild-page .pagination-row{ margin-top: 18px; display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .guild-page .pagination-row .tip{ font-size: 12px; font-weight: 850; color: var(--gp-muted2); } .guild-page .pagination-row .tip strong{ color: rgba(255,255,255,.88); } .guild-page .pagination-ctas{ display:flex; gap: 10px; flex-wrap: wrap; } /* Responsive for masterclasses */ @media (min-width: 960px){ .guild-page .kpis{ grid-template-columns: repeat(4, minmax(0,1fr)); } .guild-page .masterclass-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 1280px){ .guild-page .masterclass-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 860px){ .guild-page .qrow{ flex-wrap: wrap; } .guild-page .qwrap{ flex: 1 1 100%; min-width: 240px; } .guild-page .qchips{ width:100%; flex: 1 1 100%; } .guild-page .qrow2{ justify-content:flex-start; } } @media (max-height: 760px){ .guild-page .kpis{ display:none; } .guild-page .hero-inner{ padding-bottom: 6px; } }