/* ============================================================ Approach A — shared stylesheet for the multi-game studio site. One file for every page: the studio hub and each game page. A game page overrides --primary only; nothing else changes. ============================================================ */ :root { --primary: #d32f2f; /* studio red; per-game pages override this */ --primary-dim: rgba(211, 47, 47, 0.3); --bg: #0a0a0c; --bg-alt: #121215; --bg-card: #17171b; --text: #ffffff; --muted: #999999; --line: rgba(255, 255, 255, 0.07); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } /* ---------- Navbar (identical markup on every page) ---------- */ nav { position: fixed; top: 0; width: 100%; padding: 18px 50px; display: flex; justify-content: space-between; align-items: center; z-index: 100; background: rgba(10, 10, 12, 0.85); backdrop-filter: blur(15px); border-bottom: 1px solid var(--line); } .logo { font-family: 'Oswald', sans-serif; font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: 3px; text-decoration: none; text-shadow: 2px 2px 0 var(--primary); white-space: nowrap; } .logo small { display: block; font-family: 'Inter', sans-serif; font-size: 0.55rem; letter-spacing: 4px; color: var(--muted); font-weight: 600; text-shadow: none; margin-top: 2px; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-links a { color: var(--text); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; transition: 0.3s; } .nav-links a:hover, .nav-links a.active { color: var(--primary); } .nav-btn { padding: 12px 28px; background: var(--primary); color: #fff; text-decoration: none; font-weight: bold; font-family: 'Oswald', sans-serif; letter-spacing: 1px; transition: 0.3s; transform: skewX(-10deg); font-size: 1rem; border: 2px solid var(--primary); white-space: nowrap; } .nav-btn span { display: block; transform: skewX(10deg); } .nav-btn:hover { background: transparent; color: var(--primary); } .nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 4px; transition: 0.3s; } .nav-toggle:hover { color: var(--primary); } /* ---------- Generic section furniture ---------- */ section { padding: 100px 10%; position: relative; } .sec-title { font-family: 'Oswald', sans-serif; font-size: 3.2rem; text-transform: uppercase; color: #fff; margin-bottom: 18px; border-left: 6px solid var(--primary); padding-left: 20px; line-height: 1; } .sec-lede { color: var(--muted); font-size: 1.15rem; line-height: 1.8; max-width: 70ch; margin-bottom: 50px; } .kicker { font-family: 'Oswald', sans-serif; letter-spacing: 4px; font-size: 0.85rem; color: var(--primary); text-transform: uppercase; margin-bottom: 14px; } /* ---------- Studio hero ---------- */ .hero-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn-ghost { padding: 12px 28px; background: transparent; color: #fff; text-decoration: none; font-weight: bold; font-family: 'Oswald', sans-serif; letter-spacing: 1px; transition: 0.3s; transform: skewX(-10deg); font-size: 1rem; border: 2px solid rgba(255,255,255,0.3); } .btn-ghost span { display: block; transform: skewX(10deg); } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* ---------- Studio hero ---------- The live SHALTER-03 hero, kept as-is: rotated white badge, huge Oswald title with a hard red shadow, status line, standfirst, one skewed CTA. What is new is that it now carries all three games — the strip at the bottom switches it. --primary is re-set on the header per game, so the badge shadow, the title shadow, the status colour and the button all follow along. */ .studio-hero { height: 100vh; min-height: 640px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 10% 0 10%; overflow: hidden; background: var(--bg); } /* One layer per game; only the active one is opaque. The picture is shown whole (contain), never cropped or blown up past its frame. Whatever the box has left over around it is filled by the same picture again, blurred and darkened, so the hero never shows bare bars. */ .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; } /* Each layer names its picture once, as --img, with its aspect ratio as --ar (width / height); both halves below use them. */ .hero-bg span { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; } .hero-bg span.on { opacity: 1; } .hero-bg span::before, .hero-bg span::after { content: ''; position: absolute; background-image: var(--img); background-repeat: no-repeat; } .hero-bg span::before { inset: -60px; background-size: cover; background-position: center; filter: blur(40px) brightness(0.5) saturate(1.1); } /* The whole picture: the largest box of its own shape that fits, against the right edge, its other edges feathered into the blur so there is no seam. */ .hero-bg span::after { right: 0; top: 50%; translate: 0 -50%; aspect-ratio: var(--ar, 16 / 9); width: min(100cqw, calc(100cqh * var(--ar, 16 / 9))); background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 12%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent), linear-gradient(to right, transparent, #000 12%); mask-composite: intersect; } /* A phone's hero is taller than it is wide: a whole picture would be a thin strip, so there it fills the frame instead. */ @media (max-width: 768px) { .hero-bg span::after { inset: 0; translate: none; width: auto; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; } } .studio-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,10,12,1) 0%, rgba(10,10,12,0.7) 50%, transparent 100%); } .studio-hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; background: linear-gradient(0deg, var(--bg) 0%, transparent 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; } .release-badge { display: inline-block; background: #fff; color: #000; padding: 10px 25px; font-weight: 800; font-size: 1.2rem; transform: rotate(-2deg); margin-bottom: 20px; box-shadow: 5px 5px 0 var(--primary); } .studio-hero h1 { font-family: 'Oswald', sans-serif; font-size: 8rem; margin: 0; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 5px 5px 0 var(--primary); letter-spacing: 2px; } .hero-status { font-family: 'Oswald', sans-serif; font-size: 3rem; color: var(--primary); margin: 20px 0; letter-spacing: 4px; text-transform: uppercase; } .studio-hero p { font-size: 1.4rem; color: #ccc; max-width: 650px; margin-bottom: 40px; line-height: 1.6; } .hero-cta { display: inline-block; padding: 18px 50px; font-size: 1.5rem; } /* The next milestone under the status, e.g. "TAM SÜRÜM 30 EKİM". */ .hero-next { font-family: 'Oswald', sans-serif; font-size: 1.3rem; color: #fff; letter-spacing: 4px; text-transform: uppercase; opacity: 0.85; margin: -8px 0 24px; } .hero-next[hidden] { display: none; } /* ---------- Game switcher ---------- Sits in the flow right under the CTA, not pinned to the bottom of the hero. Inactive cards drift and brighten in turn so the strip reads as clickable before anyone touches it; the cue stops the moment a pointer arrives. */ .hero-switch { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; position: relative; z-index: 3; } .hero-switch button { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 0; background: rgba(10, 10, 12, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 3px solid rgba(255, 255, 255, 0.16); font: inherit; cursor: pointer; overflow: hidden; backdrop-filter: blur(6px); transition: border-color 0.25s, background 0.25s, transform 0.25s; } .hero-switch button img { width: 84px; height: 50px; object-fit: cover; display: block; opacity: 0.5; transition: opacity 0.25s; } .hero-switch button b { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 0.92rem; letter-spacing: 2px; text-transform: uppercase; color: #b9b9c1; transition: color 0.25s; } .hero-switch button:hover { border-color: rgba(255, 255, 255, 0.34); transform: translateY(-3px); } .hero-switch button:hover img { opacity: 0.95; } .hero-switch button:hover b { color: #fff; } .hero-switch button.is-on { border-bottom-color: var(--g); background: rgba(10, 10, 12, 0.92); } .hero-switch button.is-on img { opacity: 1; } .hero-switch button.is-on b { color: #fff; } .hero-switch button:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; } /* A sweep of light crossing each card, one after the other. */ .hero-switch button::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%); transform: translateX(-120%); } .hero-switch button:not(.is-on) { animation: sw-lift 7.5s ease-in-out infinite; } .hero-switch button:not(.is-on)::after { animation: sw-shine 7.5s ease-in-out infinite; } .hero-switch button:not(.is-on), .hero-switch button:not(.is-on)::after { animation-delay: calc(var(--d) * 0.9s); } @keyframes sw-lift { 0%, 8%, 100% { transform: translateY(0); border-bottom-color: rgba(255,255,255,0.16); } 3% { transform: translateY(-4px); border-bottom-color: var(--g); } } @keyframes sw-shine { 0% { transform: translateX(-120%); } 9%, 100% { transform: translateX(120%); } } /* The cue is an invitation, not a loop to sit through — kill it on contact. */ .hero-switch:hover button, .hero-switch:hover button::after, .hero-switch:focus-within button, .hero-switch:focus-within button::after { animation: none; } @media (prefers-reduced-motion: reduce) { .hero-switch button, .hero-switch button::after { animation: none; } } @media (max-width: 1024px) { .studio-hero h1 { font-size: 6rem; } } @media (max-width: 768px) { .studio-hero { padding: 110px 7% 70px; height: auto; min-height: 100vh; justify-content: center; } .studio-hero h1 { font-size: 3.4rem; } .hero-status { font-size: 1.7rem; letter-spacing: 2px; } .hero-next { font-size: 1rem; letter-spacing: 2px; } .release-badge { font-size: 0.95rem; padding: 8px 18px; } .studio-hero p { font-size: 1.1rem; margin-bottom: 28px; } .hero-cta { padding: 14px 32px; font-size: 1.15rem; } .hero-switch { gap: 8px; margin-top: 22px; } .hero-switch button { padding-right: 12px; } .hero-switch button img { width: 58px; height: 38px; } .hero-switch button b { font-size: 0.72rem; letter-spacing: 1px; } } @media (max-width: 480px) { .studio-hero h1 { font-size: 2.6rem; } } /* ---------- Game grid (the point of approach A) ---------- */ #games .game-grid { margin-top: 42px; } .game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 28px; } .game-card { background: var(--bg-card); border: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; overflow: hidden; transition: 0.3s; border-top: 4px solid var(--g, var(--primary)); } .game-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,0.6); border-color: var(--g, var(--primary)); } .game-card .shot { aspect-ratio: 16/9; overflow: hidden; background: #000; position: relative; } .game-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .game-card:hover .shot img { transform: scale(1.06); } .game-card .status { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 2px; background: var(--g, var(--primary)); color: #fff; padding: 5px 12px; } .game-card .status.soon { background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.35); } .game-card .body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; } .game-card h3 { font-family: 'Oswald', sans-serif; font-size: 2rem; letter-spacing: 1px; margin-bottom: 6px; } .byline { font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 16px; } .byline b { color: var(--g, var(--primary)); font-weight: 700; } .game-card p { color: var(--muted); line-height: 1.7; font-size: 1rem; flex: 1; margin-bottom: 20px; } .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; } .chips span { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); padding: 4px 10px; } .card-cta { font-family: 'Oswald', sans-serif; letter-spacing: 2px; color: var(--g, var(--primary)); font-size: 0.95rem; } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .team-card { background: var(--bg-card); padding: 34px; border: 1px solid var(--line); border-top: 4px solid var(--primary); transition: 0.3s; } .team-card:hover { transform: translateY(-8px); } .team-card h3 { font-family: 'Oswald', sans-serif; font-size: 2rem; margin-bottom: 4px; letter-spacing: 1px; } .team-card .role { color: var(--primary); font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 2px; margin-bottom: 16px; display: block; } .team-card p { color: var(--muted); line-height: 1.8; } /* ---------- Newsletter / footer ---------- */ .newsletter { background: var(--bg-alt); text-align: center; } .newsletter form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; } .newsletter input { flex: 1; padding: 15px; background: #1a1a1d; border: 1px solid #333; color: #fff; font-size: 1rem; outline: none; } footer { padding: 70px 10% 40px; border-top: 1px solid var(--line); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 50px; } .foot-grid h4 { font-family: 'Oswald', sans-serif; letter-spacing: 2px; font-size: 1rem; text-transform: uppercase; margin-bottom: 16px; color: #fff; } .foot-grid a, .foot-grid p { display: block; color: var(--muted); text-decoration: none; line-height: 2; font-size: 0.95rem; } .foot-grid a:hover { color: var(--primary); } .copyright { text-align: center; color: #666; font-size: 0.9rem; font-weight: 600; letter-spacing: 2px; } /* ---------- Game page ---------- */ .game-hero { min-height: 78vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px 10% 60px; position: relative; overflow: hidden; background: var(--bg); } /* Dark where the text sits (bottom, left), light over the picture's right. */ .game-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--bg) 4%, rgba(10,10,12,0.3) 45%, rgba(10,10,12,0.45) 100%), linear-gradient(90deg, rgba(10,10,12,0.85) 0%, rgba(10,10,12,0.35) 50%, transparent 100%); } .game-hero > * { position: relative; z-index: 2; } /* Same whole-picture layer as the studio hero (.hero-bg above). */ .game-hero > .hero-bg { position: absolute; z-index: 0; } .game-hero h1 { font-family: 'Oswald', sans-serif; font-size: 5rem; text-transform: uppercase; line-height: 1; text-shadow: 4px 4px 0 var(--primary); letter-spacing: 2px; margin-bottom: 14px; } .breadcrumb { font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .game-body { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; } .game-body h2 { font-family: 'Oswald', sans-serif; font-size: 2.2rem; text-transform: uppercase; margin: 40px 0 16px; letter-spacing: 1px; } .game-body h2:first-child { margin-top: 0; } .game-body p { color: var(--muted); line-height: 1.9; font-size: 1.1rem; margin-bottom: 16px; } .feature-list { list-style: none; margin: 10px 0 0; } .feature-list li { color: var(--muted); line-height: 1.8; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); position: relative; } .feature-list li::before { content: '▸'; position: absolute; left: 0; color: var(--primary); } .feature-list b { color: #fff; } .factbox { background: var(--bg-card); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: 28px; position: sticky; top: 100px; } .factbox dl { display: grid; grid-template-columns: 1fr; gap: 0; } .factbox dt { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 16px; } .factbox dt:first-child { margin-top: 0; } .factbox dd { font-family: 'Oswald', sans-serif; font-size: 1.15rem; letter-spacing: 0.5px; margin-top: 3px; } .factbox .nav-btn, .factbox .btn-ghost { display: block; text-align: center; margin-top: 24px; } .shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 10px; } .shot-grid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--line); transition: 0.3s; } .shot-grid img:hover { border-color: var(--primary); transform: translateY(-4px); } @media (max-width: 1024px) { .studio-hero h1 { font-size: 4rem; } .game-body { grid-template-columns: 1fr; } .factbox { position: static; } } @media (max-width: 768px) { nav { padding: 14px 20px; } section { padding: 70px 7%; } .studio-hero { padding: 110px 7% 70px; } .studio-hero h1 { font-size: 2.8rem; } .game-hero { padding: 120px 7% 50px; } .game-hero h1 { font-size: 2.6rem; } .sec-title { font-size: 2.2rem; } .team-grid, .foot-grid { grid-template-columns: 1fr; } .newsletter form { flex-direction: column; } .nav-toggle { display: block; margin-left: auto; margin-right: 14px; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10,10,12,0.98); backdrop-filter: blur(15px); border-bottom: 2px solid var(--primary); padding: 8px 22px 22px; } .nav-links.open { display: flex; } .nav-links a { padding: 15px 2px; border-bottom: 1px solid var(--line); } } /* A control with nothing behind it yet is inert, never href="#": a dead link scrolls the reader back to the top and reads as a broken click. */ .nav-btn.is-disabled, .is-disabled { cursor: default; opacity: 0.45; background: transparent; border-color: rgba(255,255,255,0.25); color: var(--muted); } .nav-btn.is-disabled:hover { background: transparent; color: var(--muted); } /* ---------- Language switcher ---------- A bare