/* * World Cup 2026 — standalone page styles * Loaded only by the world_cup layout; isolated from the rest of the app * via the .wc-page wrapper on . */ .wc-page { --wc-red: #D10A25; --wc-blue: #002FA7; --wc-off: #EDE5CC; --wc-ink: #0A0A0A; --wc-mid: #1A1A1A; --wc-muted: #888; background: var(--wc-off); color: var(--wc-ink); font-family: 'Space Mono', monospace; overflow-x: hidden; } .wc-page *, .wc-page *::before, .wc-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .wc-page { scroll-behavior: smooth; } /* ── GRAIN — heavy paper texture ── */ .wc-page::before { content: ''; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 120px; mix-blend-mode: multiply; animation: wc-grain 0.1s steps(1) infinite; } .wc-page::after { content: ''; position: fixed; inset: 0; z-index: 8999; pointer-events: none; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); background-size: 280px; mix-blend-mode: overlay; animation: wc-grain2 0.2s steps(1) infinite; } @keyframes wc-grain { 0% { background-position: 0 0; } 25% { background-position: -18px 12px; } 50% { background-position: 14px -8px; } 75% { background-position: -8px 20px; } } @keyframes wc-grain2 { 0% { background-position: 0 0; } 50% { background-position: 40px -30px; } } /* ════════════════════════════════ NAV ════════════════════════════════ */ .wc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; height: 56px; display: flex; align-items: stretch; background: var(--wc-ink); } .wc-nav-logo-cell { display: flex; align-items: center; padding: 0 24px 0 40px; border-right: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .wc-nav-logo-cell img { height: 38px; display: block; width: auto; transition: filter 0.15s; } /* hover: tint the white logo red. The filter chain turns white pixels into approx #D10A25 (the brand red). */ .wc-nav-logo-cell:hover img { filter: brightness(0) saturate(100%) invert(13%) sepia(95%) saturate(7488%) hue-rotate(351deg) brightness(89%) contrast(106%); } .wc-nav-links { display: flex; list-style: none; flex: 1; } .wc-nav-links li { border-right: 1px solid rgba(255,255,255,0.07); } .wc-nav-links a { display: flex; align-items: center; height: 100%; padding: 0 22px; font-family: 'Space Mono', monospace; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s, background 0.15s; } .wc-nav-links a:hover { color: #fff; background: rgba(255,255,255,0.05); } .wc-nav-right { display: flex; align-items: center; margin-left: auto; border-left: 1px solid rgba(255,255,255,0.1); } .wc-nav-cta { display: flex; align-items: center; height: 100%; padding: 0 22px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: var(--wc-red); border: none; text-decoration: none; transition: background 0.15s; } .wc-nav-cta:hover { background: #e8324a; color: #fff; } /* mobile-only "Join" inside the slide-out menu — hidden by default */ .wc-nav-mobile-cta { display: none; } /* hamburger — hidden by default, shown on mobile */ .wc-nav-burger { display: none; background: none; border: none; border-left: 1px solid rgba(255,255,255,0.1); width: 56px; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; padding: 0; } .wc-nav-burger span { display: block; width: 22px; height: 2px; background: #fff; transition: transform 0.2s, opacity 0.2s; } .wc-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .wc-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .wc-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ════════════════════════════════ HERO ════════════════════════════════ */ .wc-hero { min-height: 100vh; padding-top: 56px; background: var(--wc-off); position: relative; overflow: hidden; display: flex; flex-direction: column; } .wc-hero-side-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center center; font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(10,10,10,0.2); white-space: nowrap; z-index: 1; } .wc-hero-meta-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; border-bottom: 1px solid rgba(10,10,10,0.12); font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(10,10,10,0.35); flex-shrink: 0; } .wc-hero-meta-bar .wc-crop { display: flex; align-items: center; gap: 6px; } .wc-crosshair { display: inline-block; width: 12px; height: 12px; position: relative; } .wc-crosshair::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:currentColor; } .wc-crosshair::after { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:currentColor; } .wc-hero-type-block { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 36px 0; position: relative; z-index: 2; } .wc-ht-eyebrow { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--wc-red); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .wc-ht-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--wc-red); } .wc-ht-line1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; font-size: clamp(5rem, 17vw, 14rem); line-height: 0.82; text-transform: uppercase; letter-spacing: -0.02em; color: var(--wc-blue); display: block; } .wc-ht-line2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4.5rem, 15vw, 13rem); line-height: 0.82; text-transform: uppercase; letter-spacing: 0.01em; color: var(--wc-red); display: block; text-shadow: 4px 4px 0 rgba(0,0,0,0.1); } .wc-ht-line3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(6rem, 20vw, 18rem); line-height: 0.78; text-transform: uppercase; letter-spacing: -0.03em; -webkit-text-stroke: 2px var(--wc-ink); color: transparent; display: block; } .wc-hero-tagline { padding: 24px 36px 48px; z-index: 2; } .wc-ht-tag { font-family: 'Space Mono', monospace; font-size: clamp(0.7rem, 1.5vw, 1rem); letter-spacing: 0.35em; text-transform: uppercase; color: var(--wc-red); display: inline-block; border-left: 3px solid var(--wc-red); padding-left: 14px; line-height: 1; } /* ════════════════════════════════ FULL-WIDTH STRIP ════════════════════════════════ */ .wc-fullwidth-strip { width: 100%; line-height: 0; overflow: hidden; background: var(--wc-ink); } .wc-fullwidth-strip img { width: 100%; display: block; filter: contrast(1.08) brightness(0.9) grayscale(0.4); } /* ════════════════════════════════ SECTION BASE ════════════════════════════════ */ .wc-section-wrap { max-width: 1400px; margin: 0 auto; padding: 80px 40px; position: relative; z-index: 1; } .wc-sec-header { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--wc-ink); padding-top: 16px; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; } .wc-sec-num { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.3em; color: var(--wc-muted); text-transform: uppercase; } .wc-sec-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(3rem, 7vw, 6rem); text-transform: uppercase; line-height: 0.85; letter-spacing: -0.01em; color: var(--wc-ink); } .wc-sec-title .wc-accent { color: var(--wc-red); } .wc-sec-link { font-family: 'Space Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wc-muted); text-decoration: none; border-bottom: 1px solid var(--wc-muted); transition: color 0.15s, border-color 0.15s; } .wc-sec-link:hover { color: var(--wc-red); border-color: var(--wc-red); } /* ════════════════════════════════ MATCHES ════════════════════════════════ */ .wc-matches-bg { background: var(--wc-off); background-image: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(0,0,0,0.025) 31px, rgba(0,0,0,0.025) 32px ); position: relative; z-index: 1; } .wc-match-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 36px; padding: 24px 0; border-bottom: 1px solid rgba(10,10,10,0.1); transition: background 0.15s, padding 0.15s, margin 0.15s; text-decoration: none; color: inherit; } .wc-match-row:hover { background: rgba(209,10,37,0.04); margin: 0 -20px; padding-left: 20px; padding-right: 20px; color: inherit; } /* DATE column */ .wc-match-date { border-left: 3px solid var(--wc-red); padding-left: 14px; line-height: 1; } .wc-match-date-day { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wc-ink); } .wc-match-date-time { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--wc-muted); margin-top: 8px; } /* MATCH column */ .wc-match-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .wc-match-stage { display: inline-block; align-self: flex-start; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 3px 8px; border: 1px solid rgba(10,10,10,0.2); color: var(--wc-muted); } .wc-match-teams { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: var(--wc-ink); } .wc-match-vs { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--wc-red); } /* VENUE column */ .wc-match-venue { text-align: right; font-family: 'Space Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.5; color: var(--wc-muted); text-transform: uppercase; } .wc-match-venue-stadium { color: var(--wc-ink); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 4px; } .wc-match-empty { padding: 60px 0; text-align: center; font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--wc-muted); } /* ════════════════════════════════ CHANTS ════════════════════════════════ */ .wc-chants-section { background: var(--wc-red); position: relative; overflow: hidden; } .wc-chants-inner { max-width: 1400px; margin: 0 auto; padding: 80px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .wc-chants-text .wc-sec-header { border-color: rgba(255,255,255,0.2); } .wc-chants-text .wc-sec-num { color: rgba(255,255,255,0.4); } .wc-chants-text .wc-sec-title { color: #fff; } .wc-chants-text p { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.8); margin-bottom: 18px; } .wc-chants-collage { position: relative; height: 560px; } .wc-cc-photo { position: absolute; overflow: hidden; box-shadow: 4px 4px 0 rgba(0,0,0,0.4), 10px 10px 28px rgba(0,0,0,0.35); transition: transform 0.3s, z-index 0s; } .wc-cc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.1) contrast(1.08) brightness(0.92); transition: filter 0.3s; } .wc-cc-photo:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 20; } .wc-cc-photo:hover img { filter: sepia(0) contrast(1.05) brightness(1.0); } .wc-cc-photo:nth-child(1) { width:65%; aspect-ratio:3/2; top:0; left:0; transform:rotate(-2.5deg); z-index:2; } .wc-cc-photo:nth-child(2) { width:55%; aspect-ratio:2/3; top:15%; right:0; transform:rotate(3deg); z-index:3; } .wc-cc-photo:nth-child(3) { width:50%; aspect-ratio:4/3; bottom:0; left:8%; transform:rotate(1.5deg); z-index:4; } .wc-cc-photo:nth-child(4) { width:40%; aspect-ratio:3/4; bottom:5%; right:5%; transform:rotate(-2deg); z-index:1; } /* ════════════════════════════════ FANDOM / GALLERY ════════════════════════════════ */ .wc-fandom-section { background: var(--wc-off); padding: 80px 40px; background-image: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(0,0,0,0.025) 31px, rgba(0,0,0,0.025) 32px ); position: relative; z-index: 1; } .wc-fandom-inner { max-width: 1400px; margin: 0 auto; } .wc-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 320px 320px; gap: 3px; margin-top: 48px; } .wc-gal-item { overflow: hidden; position: relative; background: var(--wc-ink); } .wc-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.1) contrast(1.06) brightness(0.95); transition: filter 0.4s, transform 0.4s; } .wc-gal-item:hover img { filter: sepia(0) contrast(1.03) brightness(1.0); transform: scale(1.04); } .wc-gal-wide { grid-column: span 2; } .wc-gal-tall { grid-row: span 2; } .wc-gal-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px 22px; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; } .wc-gal-item:hover .wc-gal-overlay { opacity: 1; } .wc-gal-overlay span { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; } /* ════════════════════════════════ WATCH PARTY ════════════════════════════════ */ .wc-watchparty-bg { background: var(--wc-ink); color: var(--wc-off); background-image: repeating-linear-gradient( 0deg, transparent, transparent 23px, rgba(255,255,255,0.018) 23px, rgba(255,255,255,0.018) 24px ); position: relative; z-index: 1; } .wc-watchparty-bg .wc-sec-title { color: var(--wc-off); } .wc-watchparty-bg .wc-sec-title .wc-accent { color: var(--wc-red); } .wc-watchparty-bg .wc-sec-num { color: rgba(240,235,224,0.3); } .wc-watchparty-bg .wc-sec-header { border-color: rgba(240,235,224,0.12); } .wc-watchparty-bg .wc-sec-link { color: rgba(240,235,224,0.35); border-color: rgba(240,235,224,0.2); } .wc-watchparty-bg .wc-sec-link:hover { color: var(--wc-red); border-color: var(--wc-red); } .wc-wp-finder { display: grid; grid-template-columns: 1fr 380px; gap: 2px; height: 640px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); } .wc-wp-map { position: relative; background: var(--wc-mid); overflow: hidden; } .wc-wp-map .mapboxgl-canvas { outline: none; } .wc-wp-map .mapboxgl-ctrl-attrib, .wc-wp-map .mapboxgl-ctrl-logo { display: none !important; } .wc-wp-panel { background: rgba(10,10,10,0.96); display: flex; flex-direction: column; min-height: 0; } .wc-wp-panel-head { padding: 24px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } .wc-wp-panel-eyebrow { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.28em; color: rgba(240,235,224,0.4); text-transform: uppercase; margin-bottom: 10px; } .wc-wp-panel-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 2.4rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; color: var(--wc-off); } .wc-wp-panel-sub { font-family: 'Space Mono', monospace; font-size: 0.7rem; line-height: 1.6; color: rgba(240,235,224,0.5); margin-top: 12px; } .wc-wp-search { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); } .wc-wp-search input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--wc-off); font-family: 'Space Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em; padding: 10px 12px; outline: none; transition: border-color 0.15s, background 0.15s; } .wc-wp-search input::placeholder { color: rgba(240,235,224,0.3); } .wc-wp-search input:focus { border-color: var(--wc-red); background: rgba(255,255,255,0.06); } .wc-wp-detail { margin: 14px 18px 0; padding: 16px 18px 18px; background: var(--wc-red); position: relative; } .wc-wp-detail-close { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: rgba(255,255,255,0.85); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 6px; } .wc-wp-detail-close:hover { color: #fff; } .wc-wp-detail-eyebrow { font-family: 'Space Mono', monospace; font-size: 0.5rem; letter-spacing: 0.3em; color: rgba(255,255,255,0.6); text-transform: uppercase; } .wc-wp-detail-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; color: #fff; margin: 6px 0 10px; } .wc-wp-detail-bar-name { font-family: 'Space Mono', monospace; font-size: 0.72rem; color: #fff; } .wc-wp-detail-bar-addr { font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-top: 2px; } .wc-wp-detail-link { display: inline-block; margin-top: 12px; font-family: 'Space Mono', monospace; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 2px; } .wc-wp-detail-link:hover { border-color: #fff; } .wc-wp-list { flex: 1; overflow-y: auto; padding: 16px 24px 24px; min-height: 0; } .wc-wp-list::-webkit-scrollbar { width: 6px; } .wc-wp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); } .wc-wp-state-group { margin-bottom: 18px; } .wc-wp-state-name { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.28em; color: rgba(240,235,224,0.45); text-transform: uppercase; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.05); } .wc-wp-state-chapters { display: flex; flex-wrap: wrap; gap: 4px 14px; } .wc-wp-chapter-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: rgba(240,235,224,0.75); text-decoration: none; text-transform: uppercase; transition: color 0.12s; cursor: pointer; } .wc-wp-chapter-link:hover { color: var(--wc-red); } .wc-wp-empty { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: rgba(240,235,224,0.4); text-align: center; padding: 24px 0; } /* ════════════════════════════════ STORE ════════════════════════════════ */ .wc-store-bg { background: var(--wc-off); background-image: repeating-linear-gradient( 0deg, transparent, transparent 31px, rgba(0,0,0,0.025) 31px, rgba(0,0,0,0.025) 32px ); position: relative; z-index: 1; } .wc-store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .wc-store-item { position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; } .wc-store-item:hover { color: inherit; } .wc-store-item-img { aspect-ratio: 3/4; background: #d8d0bc; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform 0.3s; } .wc-store-item:hover .wc-store-item-img { transform: scale(1.02); } .wc-store-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wc-store-item-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #c8c0a8 0%, #d8d0bc 100%); } .wc-store-item-placeholder .wc-item-icon { font-size: 2rem; opacity: 0.3; } .wc-store-item-placeholder .wc-item-label { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.25em; color: rgba(10,10,10,0.35); text-transform: uppercase; } .wc-store-badge { position: absolute; top: 10px; left: 10px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 8px; background: var(--wc-red); color: #fff; } .wc-store-badge.wc-blue { background: var(--wc-blue); } .wc-store-badge.wc-ink { background: var(--wc-ink); } .wc-store-item-info { padding: 14px 0 20px; border-bottom: 1px solid rgba(10,10,10,0.1); } .wc-store-item-name { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wc-ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc-store-item-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .wc-store-item-price { font-family: 'Space Mono', monospace; font-size: 0.75rem; color: var(--wc-ink); letter-spacing: 0.05em; } .wc-store-item-type { font-family: 'Space Mono', monospace; font-size: 0.55rem; letter-spacing: 0.2em; color: var(--wc-muted); text-transform: uppercase; } .wc-store-cta-bar { margin-top: 40px; display: flex; justify-content: center; } /* ════════════════════════════════ ABOUT ════════════════════════════════ */ .wc-about-bg { background: var(--wc-blue); color: #fff; position: relative; z-index: 1; } .wc-about-inner { max-width: 1400px; margin: 0 auto; padding: 80px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .wc-about-bg .wc-sec-title { color: #fff; } .wc-about-bg .wc-sec-title .wc-accent { color: var(--wc-off); } .wc-about-bg .wc-sec-num { color: rgba(255,255,255,0.4); } .wc-about-bg .wc-sec-header { border-color: rgba(255,255,255,0.15); } .wc-about-text p { font-size: 0.88rem; line-height: 1.9; color: rgba(255,255,255,0.7); margin-bottom: 16px; letter-spacing: 0.02em; } .wc-about-photos { position: relative; height: 500px; } .wc-a-photo { position: absolute; padding: 8px 8px 28px; background: var(--wc-off); box-shadow: 4px 4px 0 rgba(0,0,0,0.4), 10px 10px 24px rgba(0,0,0,0.3); transition: transform 0.3s; } .wc-a-photo:nth-child(1) { width:60%; top:0; left:0; transform:rotate(-3.5deg); z-index:1; } .wc-a-photo:nth-child(2) { width:52%; top:28%; left:34%; transform:rotate(2deg); z-index:2; } .wc-a-photo:nth-child(3) { width:46%; top:54%; left:4%; transform:rotate(1deg); z-index:3; } .wc-a-photo:hover { transform:rotate(0deg) scale(1.04) !important; z-index:10; } .wc-a-photo-inner { width: 100%; aspect-ratio: 4/3; overflow: hidden; } .wc-a-photo-inner img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.25) contrast(1.05) brightness(0.95); } /* ════════════════════════════════ JOIN ════════════════════════════════ */ .wc-join-bg { background-color: var(--wc-ink); background-image: url("/images/wc/join-bg.jpg"); background-size: cover; background-position: center top; background-blend-mode: luminosity; padding: 100px 40px; text-align: left; position: relative; overflow: hidden; z-index: 1; } .wc-join-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; } .wc-join-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; } .wc-join-super { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(5rem, 18vw, 16rem); line-height: 0.82; text-transform: uppercase; letter-spacing: -0.02em; color: var(--wc-red); display: block; text-shadow: 5px 5px 0 rgba(0,0,0,0.3); } .wc-join-sub-text { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.5rem, 4vw, 3.5rem); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240,235,224,0.7); display: block; margin-top: 4px; } .wc-join-body { font-family: 'Space Mono', monospace; font-size: 0.78rem; color: rgba(240,235,224,0.35); max-width: 640px; margin: 20px 0 0; line-height: 1.9; letter-spacing: 0.04em; } /* ── BUTTONS ── */ .wc-btn { display: inline-block; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 14px 32px; cursor: pointer; text-decoration: none; border: 2px solid currentColor; transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.1s; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); } .wc-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,0.2); } .wc-btn-red { background: var(--wc-red); color: #fff; border-color: var(--wc-red); } .wc-btn-red:hover { background: #b8001e; border-color: #b8001e; color: #fff; } .wc-btn-ghost-dark { color: rgba(240,235,224,0.6); border-color: rgba(240,235,224,0.25); background: transparent; } .wc-btn-ghost-dark:hover { color: #fff; border-color: #fff; } .wc-btn-ghost-ink { color: var(--wc-ink); border-color: rgba(10,10,10,0.25); background: transparent; } .wc-btn-ghost-ink:hover { background: var(--wc-ink); color: var(--wc-off); border-color: var(--wc-ink); } .wc-btn-chants { background: #fff; color: var(--wc-red); border-color: #fff; } .wc-btn-chants:hover { background: var(--wc-ink); color: #fff; border-color: var(--wc-ink); } .wc-btn-group { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } /* ════════════════════════════════ FOOTER ════════════════════════════════ */ .wc-footer-outer { background: var(--wc-ink); border-top: 3px solid var(--wc-red); position: relative; z-index: 1; } .wc-footer { max-width: 1400px; margin: 0 auto; padding: 56px 40px 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; } .wc-footer-brand { display: flex; flex-direction: column; gap: 16px; } .wc-footer-brand img { height: 60px; filter: invert(1) brightness(0.85); width: auto; } .wc-footer-brand p { font-family: 'Space Mono', monospace; font-size: 0.85rem; color: rgba(240,235,224,0.45); line-height: 1.7; max-width: 320px; } .wc-footer-col h4 { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(240,235,224,0.55); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .wc-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .wc-footer-col a { font-family: 'Space Mono', monospace; font-size: 0.85rem; letter-spacing: 0.06em; color: rgba(240,235,224,0.5); text-decoration: none; transition: color 0.15s; } .wc-footer-col a:hover { color: var(--wc-off); } .wc-footer-bottom { max-width: 1400px; margin: 40px auto 0; padding: 22px 40px 26px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .wc-footer-bottom p { font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; color: rgba(240,235,224,0.3); text-transform: uppercase; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .wc-wp-finder { grid-template-columns: 1fr; height: auto; } .wc-wp-map { height: 360px; order: -1; } .wc-wp-panel { max-height: 560px; } .wc-footer { grid-template-columns: 1fr 1fr; } .wc-about-inner { grid-template-columns: 1fr; } .wc-about-photos { height: 320px; order: -1; } .wc-match-row { grid-template-columns: 110px 1fr auto; gap: 24px; } .wc-match-teams { font-size: 1.6rem; } .wc-match-date-day { font-size: 1.6rem; } .wc-chants-inner { grid-template-columns: 1fr; } .wc-chants-collage { height: 420px; } .wc-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .wc-gal-wide { grid-column: span 2; } .wc-gal-tall { grid-row: span 1; } .wc-gallery-grid .wc-gal-item { aspect-ratio: 4/3; } } @media (max-width: 700px) { .wc-nav-burger { display: flex; margin-left: auto; } .wc-nav-right { display: none; } .wc-nav-mobile-cta { display: block; } .wc-nav-links { position: fixed; top: 56px; left: 0; right: 0; height: calc(100vh - 56px); background: var(--wc-ink); flex-direction: column; padding: 0; overflow-y: auto; z-index: 7999; transform: translateX(100%); transition: transform 0.25s ease-out; } .wc-nav.is-open .wc-nav-links { transform: translateX(0); } .wc-nav-links li { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); } .wc-nav-links a { padding: 20px 28px; font-size: 1rem; color: rgba(255,255,255,0.85); } .wc-nav-links .wc-nav-mobile-cta a { background: var(--wc-red); color: #fff; font-weight: 700; margin-top: 8px; } .wc-nav-links .wc-nav-mobile-cta a:hover { background: #e8324a; } } @media (max-width: 600px) { .wc-nav { padding: 0; height: 50px; } .wc-nav-logo-cell { padding: 0 16px 0 20px; } .wc-nav-links { top: 50px; height: calc(100vh - 50px); } .wc-hero-meta-bar { display: none; } .wc-hero-type-block { padding: 20px 20px 0; } .wc-hero-tagline { padding: 24px 20px 40px; } .wc-footer { grid-template-columns: 1fr; padding: 40px 20px 0; } .wc-section-wrap { padding: 60px 20px; } .wc-match-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; } .wc-match-row:hover { margin: 0; padding-left: 0; padding-right: 0; } .wc-match-venue { text-align: left; } .wc-match-teams { font-size: 1.5rem; gap: 12px; } .wc-match-date-day { font-size: 1.5rem; } .wc-fandom-section { padding: 60px 20px; } .wc-chants-inner { padding: 60px 20px; } .wc-about-inner { padding: 60px 20px; } .wc-join-bg { padding: 60px 20px; } }