1<!DOCTYPE html> 2<html class="dark" lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta content="width=device-width, initial-scale=1.0" name="viewport" /> 7 <title>Gullesur Games - Mobile Games Studio</title> 8 9 <!-- SEO & Social --> 10 <meta name="description" 11 content="Forging legends in the digital realm. Creators of Just Euchre and other immersive mobile experiences." /> 12 <meta property="og:type" content="website" /> 13 <meta property="og:title" content="Gullesur Games" /> 14 <meta property="og:description" content="Forging legends in the digital realm. Creators of Just Euchre." /> 15 <meta property="og:url" content="https://gullesurgames.com/" /> 16 <meta property="og:image" content="https://gullesurgames.com/assets/images/splash.png" /> 17 <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg"> 18 19 <!-- Analytics --> 20
20<script data-goatcounter="https://gullesurgames.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
20 21 22 <link href="https://fonts.googleapis.com" rel="preconnect" /> 23 <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" /> 24 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" 25 rel="stylesheet" /> 26 <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap" 27 rel="stylesheet" /> 28 <link 29 href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" 30 rel="stylesheet" /> 31
31<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
31 32
32<script> 33 tailwind.config = { 34 darkMode: "class", 35 theme: { 36 extend: { 37 colors: { 38 "primary": "#f2cc0d", 39 "primary-dark": "#c2a30a", 40 "background-light": "#f8f8f5", 41 "background-dark": "#121212", "surface": "#1E1E1E", 42 "surface-highlight": "#2A2A2A", 43 }, 44 fontFamily: { 45 "display": ["Space Grotesk", "sans-serif"], 46 "serif-display": ["Cinzel", "serif"], 47 "body": ["Space Grotesk", "sans-serif"] 48 }, 49 backgroundImage: { 50 'brushed-gold': 'linear-gradient(135deg, #b8860b 0%, #f2cc0d 25%, #ffd700 50%, #f2cc0d 75%, #b8860b 100%)', 51 'brushed-gold-text': 'linear-gradient(180deg, #fceda4 0%, #f2cc0d 40%, #c2a30a 100%)', 52 }, 53 borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" }, 54 }, 55 }, 56 } 57 </script>
57 58 <link rel="stylesheet" href="assets/css/styles.css"> 59</head> 60 61<body 62 class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display antialiased overflow-x-hidden selection:bg-primary selection:text-black"> 63 <div class="flex min-h-screen w-full flex-col"> 64 <header 65 class="sticky top-0 z-50 w-full border-b border-[#333333] bg-background-dark/95 backdrop-blur-sm px-6 py-4"> 66 <div class="mx-auto flex max-w-7xl items-center justify-between"> 67 <a href="index.html" class="flex items-center gap-3 group cursor-pointer"> 68 <div 69 class="relative flex h-8 w-8 items-center justify-center bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_10px_rgba(242,204,13,0.3)]"> 70 <div 71 class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center"> 72 <span class="material-symbols-outlined text-sm text-primary">flare</span> 73 </div> 74 </div> 75 <h2 76 class="text-white text-xl font-bold tracking-tight font-serif-display group-hover:text-primary transition-colors"> 77 Gullesur Games</h2> 78 </a> 79 <nav class="hidden md:flex items-center gap-8"> 80 <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors" 81 href="#games">Games</a> 82 <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors" 83 href="about.html">Studio</a> 84 <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors" 85 href="support.html">Contact</a> 86 </nav> 87 <div class="flex md:hidden items-center gap-4"> 88 <button class="flex md:hidden text-white"> 89 <span class="material-symbols-outlined">menu</span> 90 </button> 91 </div> 92 </div> 93 </header> 94 <section class="relative flex min-h-[600px] w-full flex-col justify-center overflow-hidden"> 95 <div class="absolute inset-0 z-0 h-full w-full bg-cover bg-center" 96 data-alt="Abstract dark digital landscape with subtle golden geometric shapes" 97 style='background-image: linear-gradient(to bottom, rgba(18, 18, 18, 0.6) 0%, rgba(18, 18, 18, 0.9) 50%, rgba(18, 18, 18, 1) 100%), url("assets/images/hero-bg.jpg");'> 98 </div> 99 <div class="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center px-6 text-center py-20"> 100 <div class="mb-10 flex flex-col items-center justify-center group"> 101 <div class="relative mb-6 h-32 w-32 flex items-center justify-center"> 102 <div class="absolute inset-0 sun-rays animate-pulse opacity-50"></div> 103 <div class="absolute inset-0 rounded-full border-2 border-primary/30 rotate-12"></div> 104 <div class="absolute inset-0 rounded-full border border-primary/20 -rotate-12 scale-110"></div> 105 <div 106 class="relative h-24 w-24 bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_30px_rgba(242,204,13,0.2)] flex items-center justify-center transform transition-transform duration-700 group-hover:rotate-180"> 107 <div 108 class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center"> 109 <span 110 class="material-symbols-outlined text-6xl text-primary bg-clip-text text-transparent bg-brushed-gold-text">flare</span> 111 </div> 112 </div> 113 <div 114 class="absolute -left-16 top-1/2 h-[1px] w-12 bg-gradient-to-l from-primary/50 to-transparent"> 115 </div> 116 <div 117 class="absolute -right-16 top-1/2 h-[1px] w-12 bg-gradient-to-r from-primary/50 to-transparent"> 118 </div> 119 </div> 120 <h1 121 class="font-serif-display text-5xl md:text-7xl lg:text-8xl font-black tracking-widest text-white uppercase drop-shadow-xl relative pl-4">
122 <span class="text-brushed-gold">Gullesur</span> 123 <span 124 class="block text-2xl md:text-3xl font-light tracking-[0.5em] text-gray-300 mt-2 font-display uppercase border-t border-primary/30 pt-3 mx-auto w-fit">Games</span> 125 </h1> 126 </div> 127 <h2 class="mb-10 max-w-2xl text-lg font-light leading-relaxed text-gray-400 md:text-xl font-display"> 128 Forging legends in the digital realm. Where ancient inspiration meets cutting-edge gameplay. 129 </h2> 130 <div class="flex flex-col sm:flex-row gap-4"> 131 <a href="#games" 132 class="flex h-12 min-w-[160px] cursor-pointer items-center justify-center rounded-lg bg-primary px-8 text-base font-bold text-black transition-transform hover:scale-105 hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)]"> 133 Explore Realms 134 </a> 135 <a href="about.html" 136 class="flex h-12 min-w-[160px] cursor-pointer items-center justify-center rounded-lg border border-white/20 bg-white/5 px-8 text-base font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/10 hover:border-white/40"> 137 Our Saga 138 </a> 139 </div> 140 </div> 141 </section> 142 <section class="w-full bg-background-dark pt-24 pb-12"> 143 <div class="mx-auto max-w-7xl px-6"> 144 <!-- Announcement Carousel Wrapper --> 145 <div class="relative group"> 146 <div id="announcement-carousel" 147 class="flex w-full overflow-x-auto no-scrollbar snap-x snap-mandatory scroll-smooth rounded-3xl"> 148 149 <!-- Slide 1: iOS Launch --> 150 <div class="w-full flex-shrink-0 snap-center"> 151 <div class="announcement-card announcement-glow rounded-3xl overflow-hidden bg-announcement-gradient"> 152 <div class="grid grid-cols-1 lg:grid-cols-2 gap-0"> 153 <div class="p-8 lg:p-16 flex flex-col justify-center"> 154 <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6 w-fit"> 155 <span class="relative flex h-2 w-2"> 156 <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> 157 <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> 158 </span> 159 New Release 160 </div> 161 <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-serif-display leading-tight"> 162 Just Euchre <span class="text-brushed-gold">Arrives on iOS!</span> 163 </h2> 164 <p class="text-gray-400 text-lg mb-8 leading-relaxed max-w-xl"> 165 The classic card game reimagined for mobile is now live on the Apple App Store! Join the tables on iPhone and iPad, featuring slick animations, dark mode aesthetics, and ranked play. 166 </p> 167 <div class="flex flex-wrap gap-4 items-center"> 168 <a href="https://apps.apple.com/app/id6775664646" target="_blank" 169 class="flex h-14 px-8 items-center justify-center rounded-xl bg-primary text-black font-bold text-lg hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)] transition-all transform hover:-translate-y-1 gap-2">
170 <span class="material-symbols-outlined">apple</span> 171 App Store 172 </a> 173 <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank" 174 class="flex h-14 px-8 items-center justify-center rounded-xl border border-white/20 bg-surface-highlight text-white font-bold text-lg hover:bg-white hover:text-black hover:border-white transition-all transform hover:-translate-y-1 gap-2"> 175 <span class="material-symbols-outlined">android</span> 176 Google Play 177 </a> 178 </div> 179 </div> 180 <div class="relative aspect-square lg:aspect-auto overflow-hidden"> 181 <img src="assets/images/euchre-gameplay.png" alt="Just Euchre iOS Release" 182 class="absolute inset-0 h-full w-full object-cover transform hover:scale-105 transition-transform duration-1000"> 183 <div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 via-transparent to-transparent lg:hidden"></div> 184 </div> 185 </div> 186 </div> 187 </div> 188 189 <!-- Slide 2: Achievement Hunt Update --> 190 <div class="w-full flex-shrink-0 snap-center"> 191 <div class="announcement-card announcement-glow rounded-3xl overflow-hidden bg-announcement-gradient"> 192 <div class="grid grid-cols-1 lg:grid-cols-2 gap-0"> 193 <div class="p-8 lg:p-16 flex flex-col justify-center"> 194 <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6 w-fit"> 195 <span class="relative flex h-2 w-2"> 196 <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span> 197 <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span> 198 </span> 199 News Alert 200 </div> 201 <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-serif-display leading-tight"> 202 Major Update: <span class="text-brushed-gold">The Achievement Hunt Begins!</span> 203 </h2> 204 <p class="text-gray-400 text-lg mb-10 leading-relaxed max-w-xl"> 205 Starting May 1st, Just Euchre is getting its biggest update yet. Sign in with Google Play Services to start earning points and unlocking over 40 brand-new achievements. Hit the tables and show off your card skills! 206 </p> 207 <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank" 208 class="flex h-14 w-full sm:w-fit px-10 items-center justify-center rounded-xl bg-primary text-black font-bold text-lg hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)] transition-all transform hover:-translate-y-1"> 209 Update on Google Play 210 </a> 211 </div> 212 <div class="relative aspect-square lg:aspect-auto overflow-hidden"> 213 <img src="assets/images/announcements/wolf-promo.png" alt="Just Euchre Achievement Hunt Update" 214 class="absolute inset-0 h-full w-full object-cover transform hover:scale-110 transition-transform duration-1000"> 215 <div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 via-trans
215parent to-transparent lg:hidden"></div> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 222 <!-- Carousel Indicators & Nav Controls --> 223 <div class="mt-6 flex items-center justify-between"> 224 <div class="flex items-center gap-2" id="announcement-dots"> 225 <button class="h-2.5 w-8 rounded-full bg-primary transition-all duration-300" aria-label="Announcement 1"></button> 226 <button class="h-2.5 w-2.5 rounded-full bg-white/20 hover:bg-white/50 transition-all duration-300" aria-label="Announcement 2"></button> 227 </div> 228 <div class="flex gap-2"> 229 <button id="announcement-prev" aria-label="Previous Announcement" 230 class="h-10 w-10 rounded-full bg-surface-highlight border border-white/10 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all"> 231 <span class="material-symbols-outlined">arrow_back</span> 232 </button> 233 <button id="announcement-next" aria-label="Next Announcement" 234 class="h-10 w-10 rounded-full bg-surface-highlight border border-white/10 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all"> 235 <span class="material-symbols-outlined">arrow_forward</span> 236 </button> 237 </div> 238 </div> 239 </div> 240 </div> 241 </section> 242 243 <section class="w-full bg-background-dark py-24" id="games"> 244 <div class="mx-auto max-w-7xl px-6"> 245 <div class="mb-12 flex items-center justify-between border-b border-[#333333] pb-6"> 246 <div> 247 <h2 class="text-3xl font-bold tracking-tight text-white md:text-4xl font-serif-display">Featured 248 Release</h2> 249 <p class="mt-2 text-gray-400">Our latest flagship title available now.</p> 250 </div> 251 <div class="hidden md:flex gap-2"> 252 <span class="material-symbols-outlined text-primary">verified</span> 253 <span class="text-sm font-medium text-primary uppercase tracking-widest">Editor's Choice</span> 254 </div> 255 </div> 256 <div class="group relative overflow-hidden rounded-2xl border border-[#333333] bg-surface shadow-2xl"> 257 <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]"> 258 <div class="flex flex-col justify-center p-8 lg:col-span-4 lg:p-12 z-10 bg-surface"> 259 <div 260 class="mb-4 h-12 w-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary"> 261 <span class="material-symbols-outlined text-3xl">playing_cards</span> 262 </div> 263 <h3 class="mb-4 text-4xl font-bold text-white tracking-tighter">Just Euchre</h3> 264 <p class="mb-8 text-lg text-gray-400 leading-relaxed"> 265 The classic card game, reimagined for the modern era. Featuring slick animations, dark 266 mode aesthetics, and a competitive ranking system. 267 </p> 268 <div class="flex flex-col gap-4"> 269 <div class="flex items-center gap-4 mb-4"> 270 <div class="flex flex-col"> 271 <span class="text-xs text-gray-500 uppercase">Rating</span> 272 <span class="text-white font-bold flex items-center gap-1">3.0 <span 273 class="material-symbols-outlined text-xs text-primary">star</span></span> 274 </div> 275 <div class="h-8 w-px bg-[#333333]"></div> 276 <div class="flex flex-col">
277 <span class="text-xs text-gray-500 uppercase">Downloads</span> 278 <span class="text-white font-bold">50+</span> 279 </div> 280 <div class="h-8 w-px bg-[#333333]"></div> 281 <div class="flex flex-col"> 282 <span class="text-xs text-gray-500 uppercase">Platform</span> 283 <span class="text-white font-bold">iOS & Android</span> 284 </div> 285 </div> 286 <div class="flex flex-wrap items-center justify-center gap-3 pt-2"> 287 <a href="https://apps.apple.com/app/id6775664646" target="_blank" 288 class="inline-block transition-transform hover:scale-105"> 289 <img src="assets/images/app-store-badge.svg" alt="Download on the App Store" 290 class="h-11 w-auto"> 291 </a> 292 <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank" 293 class="inline-block transition-transform hover:scale-105"> 294 <img src="assets/images/google-play-badge.svg" alt="Get it on Google Play" 295 class="h-11 w-auto"> 296 </a> 297 </div> 298 </div> 299 </div> 300 <div class="relative bg-black lg:col-span-8 overflow-hidden"> 301 <div 302 class="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-surface to-transparent z-10 hidden lg:block"> 303 </div> 304 <div id="carousel-container" 305 class="flex h-full w-full items-center overflow-x-auto no-scrollbar snap-x snap-mandatory py-8 lg:py-0 scroll-smooth"> 306 <div 307 class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]"> 308 <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]" 309 data-alt="Just Euchre game interface showing a hand of cards with a dark modern theme" 310 style='background-image: url("assets/images/euchre-gameplay.png");'> 311 <div 312 class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6"> 313 <span 314 class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">In-Game 315 Match</span> 316 </div> 317 </div> 318 </div> 319 <div 320 class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]"> 321 <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]" 322 data-alt="Just Euchre main menu with golden accents and ranked mode selection" 323 style='background-image: url("assets/images/euchre-lobby.png");'> 324 <div 325 class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6">
326 <span 327 class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">Lobby 328 Interface</span> 329 </div> 330 </div> 331 </div> 332 <div 333 class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]"> 334 <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]" 335 data-alt="Detailed view of playing cards with custom artwork on a dark felt table" 336 style='background-image: url("assets/images/euchre-cards.png");'> 337 <div 338 class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6"> 339 <span 340 class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">Trump 341 Picking</span> 342 </div> 343 </div> 344 </div> 345 </div> 346 <!-- Carousel Controls (Static for now) --> 347 <div class="absolute bottom-6 right-6 flex gap-2 z-20"> 348 <button id="carousel-prev" 349 class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all"> 350 <span class="material-symbols-outlined">arrow_back</span> 351 </button> 352 <button id="carousel-next" 353 class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all"> 354 <span class="material-symbols-outlined">arrow_forward</span> 355 </button> 356 </div> 357 </div> 358 </div> 359 </div> 360 </div> 361 </section> 362 <section class="w-full bg-[#0d0d0d] py-24 border-t border-[#333333]" id="just-runes"> 363 <div class="mx-auto max-w-7xl px-6"> 364 <div class="mb-12 flex items-center justify-between"> 365 <div> 366 <h2 class="text-3xl font-bold tracking-tight text-white md:text-4xl font-serif-display">Latest 367 Release</h2> 368 <p class="mt-2 text-gray-400">Available now on the Google Play Store.</p> 369 </div> 370 </div> 371 <div class="group relative overflow-hidden rounded-2xl border border-[#333333] bg-surface shadow-2xl"> 372 <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]"> 373 <!-- Content --> 374 <div 375 class="flex flex-col justify-center p-8 lg:col-span-4 lg:p-12 z-10 bg-surface order-last lg:order-first"> 376 <div 377 class="mb-4 h-12 w-12 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400"> 378 <span class="material-symbols-outlined text-3xl">grid_on</span> 379 </div> 380 <h3 class="mb-4 text-4xl font-bold text-white tracking-tighter">Just Runes</h3> 381 <p class="mb-6 text-lg text-gray-400 leading-relaxed"> 382 Unleash the elements. Solve the mystery. Re
382imagining the classic logic puzzle with a 383 mystical twist. 384 </p> 385 386 <div class="space-y-4 mb-8"> 387 <div class="flex items-start gap-3"> 388 <span 389 class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">auto_awesome</span> 390 <div> 391 <h4 class="text-white font-bold text-sm">Elemental Logic</h4> 392 <p class="text-xs text-gray-500">Place runes following the rules of nature. Fire 393 burns, Water flows.</p> 394 </div> 395 </div> 396 <div class="flex items-start gap-3"> 397 <span 398 class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">dark_mode</span> 399 <div> 400 <h4 class="text-white font-bold text-sm">Atmospheric Design</h4> 401 <p class="text-xs text-gray-500">Sleek, distraction-free aesthetic with glowing 402 runes.</p> 403 </div> 404 </div> 405 <div class="flex items-start gap-3"> 406 <span 407 class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">psychology</span> 408 <div> 409 <h4 class="text-white font-bold text-sm">Pure Logic</h4> 410 <p class="text-xs text-gray-500">No guessing. Every puzzle has a single 411 solution.</p> 412 </div> 413 </div> 414 </div> 415 416 <div class="flex flex-col gap-4"> 417 <div class="flex items-center gap-4 mb-4"> 418 <div class="flex flex-col"> 419 <span class="text-xs text-gray-500 uppercase">Rating</span> 420 <span class="text-white font-bold flex items-center gap-1">-.- <span 421 class="material-symbols-outlined text-xs text-indigo-400">star</span></span> 422 </div> 423 <div class="h-8 w-px bg-[#333333]"></div> 424 <div class="flex flex-col"> 425 <span class="text-xs text-gray-500 uppercase">Downloads</span> 426 <span class="text-white font-bold">50+</span> 427 </div> 428 <div class="h-8 w-px bg-[#333333]"></div> 429 <div class="flex flex-col"> 430 <span class="text-xs text-gray-500 uppercase">Platform</span> 431 <span class="text-white font-bold">Android</span> 432 </div> 433 </div> 434 <a href="https://play.google.com/store/apps/details?id=com.gullesurgames.justrunes" 435 target="_blank" 436 class="w-full h-12 rounded-lg bg-indigo-500 font-bold text-white hover:bg-indigo-400 transition-colors flex items-center justify-center gap-2"> 437 <span class="material-symbols-outlined">shopping_cart</span> 438 Buy Now 439 </a> 440 <a href="https://play.google.com/store/apps/details?id=com.gullesurgames.justrunes" 441 target="_blank" class="inline-block transition-transform hover:scale-105 mx-auto"> 442 <img src="assets/images/google-play-badge.svg" alt="Get it on Google Play" 443 class="h-12 w-auto"> 444 </a> 445 </div> 446 </div> 447 448 <!-- Carousel --> 449 <div class="relative bg-black lg:col-span-8 overflow-hidden order-first lg:order-last"> 450 <div 451 class="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-surface to-transparent z-10 hidden lg:block"> 452 </div> 453 454 <div id="runes-carousel-container" 455 class="flex h-full w-full items-center overflow-x-auto no-scrollbar snap-x snap-mandatory py-8 lg:py-0 scroll-smooth"> 456 <!-- Slide 1 --> 457 <div 458 class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center"> 459 <div 460 class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img"> 461 <img src="assets/images/just-runes/screenshot-1.png" 462 alt="Just Runes Gameplay Level 8" class="h-full w-full object-cover"> 463 <div 464 class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"> 465 </div> 466 </div> 467 </div> 468 <!-- Slide 2 --> 469 <div 470 class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center"> 471 <div 472 class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img"> 473 <img src="assets/images/just-runes/screenshot-2.png" 474 alt="Just Runes Achievements" class="h-full w-full object-cover"> 475 <div 476 class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"> 477 </div> 478 </div> 479 </div> 480 <!-- Slide 3 --> 481 <div 482 class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center"> 483 <div 484 class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img"> 485 <img src="assets/images/just-runes/screenshot-3.png" 486 alt="Just Runes Title Screen" class="h-full w-full object-cover"> 487 <div 488 class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors"> 489 </div> 490 </div> 491 </div> 492 </div> 493 494 <!-- Carousel Controls --> 495 <div class="absolute bottom-6 right-6 flex gap-2 z-20"> 496 <button id="runes-carousel-prev" 497 class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-indigo-500 hover:border-indigo-500 transition-all">
498 <span class="material-symbols-outlined">arrow_back</span> 499 </button> 500 <button id="runes-carousel-next" 501 class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-indigo-500 hover:border-indigo-500 transition-all"> 502 <span class="material-symbols-outlined">arrow_forward</span> 503 </button> 504 </div> 505 </div> 506 </div> 507 </div> 508 </div> 509 </section> 510 <section class="w-full bg-background-dark pb-32"> 511 <div class="mx-auto max-w-7xl px-6"> 512 <div class="mb-16 flex flex-col items-center text-center"> 513 <span 514 class="text-primary font-bold tracking-widest text-sm uppercase mb-2 font-display">Roadmap</span> 515 <h2 class="text-3xl font-bold tracking-tight text-white md:text-5xl font-serif-display">On the 516 Horizon</h2> 517 <p class="mt-4 max-w-2xl text-gray-400">We are expanding our universe. Here is a glimpse into the 518 future genres coming to Gullesur Games.</p> 519 </div> 520 <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> 521 <!-- Roadmap items mostly unchanged, just ensured non-dead links if possible --> 522 <div 523 class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow"> 524 <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity"> 525 <span class="material-symbols-outlined text-[100px] text-white">swords</span> 526 </div> 527 <div 528 class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors"> 529 <span class="material-symbols-outlined text-3xl">swords</span> 530 </div> 531 <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Deep RPGs</h3> 532 <p class="text-gray-400 text-sm leading-relaxed mb-6"> 533 Immersive narrative-driven experiences where every choice echoes through eternity. Character 534 building reimagined. 535 </p> 536 <span 537 class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default"> 538 Coming Soon 539 </span> 540 </div> 541 <div 542 class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow"> 543 <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity"> 544 <span class="material-symbols-outlined text-[100px] text-white">castle</span> 545 </div> 546 <div 547 class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors"> 548 <span class="material-symbols-outlined text-3xl">castle</span> 549 </div> 550 <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Grand Strategy</h3> 551 <p class="text-gray-400 text-sm leading-relaxed mb-6"> 552 Complex systems and tactical warfare. Manage empires, economies, and armies in a stark, 553 unforgiving universe. 554 </p>
555 <span 556 class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default"> 557 Coming Soon 558 </span> 559 </div> 560 <div 561 class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow"> 562 <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity"> 563 <span class="material-symbols-outlined text-[100px] text-white">extension</span> 564 </div> 565 <div 566 class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors"> 567 <span class="material-symbols-outlined text-3xl">psychology</span> 568 </div> 569 <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Mind-Bending Puzzles</h3> 570 <p class="text-gray-400 text-sm leading-relaxed mb-6"> 571 Abstract challenges designed to test logic and perception. Beautifully minimal, 572 frustratingly brilliant. 573 </p> 574 <span 575 class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default"> 576 Coming Soon 577 </span> 578 </div> 579 </div> 580 </div> 581 </section> 582 <footer class="mt-auto w-full border-t border-[#333333] bg-[#0a0a0a] py-12"> 583 <div class="mx-auto max-w-7xl px-6 flex flex-col md:flex-row justify-between items-center gap-6"> 584 <div class="flex flex-col gap-2"> 585 <div class="flex items-center gap-2"> 586 <div 587 class="relative flex h-6 w-6 items-center justify-center bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_10px_rgba(242,204,13,0.3)]"> 588 <div 589 class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center"> 590 <span class="material-symbols-outlined text-[10px] text-primary">flare</span> 591 </div> 592 </div> 593 <span class="text-lg font-bold text-white font-serif-display">Gullesur Games</span> 594 </div> 595 <p class="text-xs text-gray-500">© 2026 Gullesur Games. All rights reserved.</p> 596 </div> 597 <div class="flex gap-6 flex-wrap justify-center md:justify-end"> 598 <a class="text-gray-400 hover:text-primary transition-colors" href="april-major/index.html">April Major Guide</a> 599 <a class="text-gray-400 hover:text-primary transition-colors" href="privacy-policy.html">Privacy 600 Policy</a> 601 <a class="text-gray-400 hover:text-primary transition-colors" href="terms.html">Terms of Service</a> 602 <a class="text-gray-400 hover:text-primary transition-colors" href="support.html">Support</a> 603 </div> 604 <div class="flex gap-4"> 605 <!-- Removed Social links as no URL provided, preventing dead links. If user has them, they can add back. --> 606 </div> 607 </div> 608 </footer> 609 </div> 610
610<script> 611 document.addEventListener('DOMContentLoaded', () => { 612 const setupCarousel = (containerId, prevId, nextId) => { 613 const container = document.getElementById(containerId); 614 const prevBtn = document.getElementById(prevId); 615 const nextBtn = document.getElementById(nextId); 616 617 if (container && prevBtn && nextBtn) { 618 prevBtn.addEventListener('click', () => { 619 container.scrollBy({ left: -container.clientWidth * 0.8, behavior: 'smooth' }); 620 }); 621 nextBtn.addEventListener('click', () => { 622 container.scrollBy({ left: container.clientWidth * 0.8, behavior: 'smooth' }); 623 }); 624 } 625 }; 626 627 // Existing Euchre Carousel 628 setupCarousel('carousel-container', 'carousel-prev', 'carousel-next'); 629 630 // New Runes Carousel 631 setupCarousel('runes-carousel-container', 'runes-carousel-prev', 'runes-carousel-next'); 632 633 // Announcement Carousel logic 634 const annContainer = document.getElementById('announcement-carousel'); 635 const annPrev = document.getElementById('announcement-prev'); 636 const annNext = document.getElementById('announcement-next'); 637 const annDots = document.querySelectorAll('#announcement-dots button'); 638 639 if (annContainer) { 640 const updateDots = () => { 641 const index = Math.round(annContainer.scrollLeft / annContainer.clientWidth); 642 annDots.forEach((dot, i) => { 643 if (i === index) { 644 dot.className = 'h-2.5 w-8 rounded-full bg-primary transition-all duration-300'; 645 } else { 646 dot.className = 'h-2.5 w-2.5 rounded-full bg-white/20 hover:bg-white/50 transition-all duration-300'; 647 } 648 }); 649 }; 650 651 if (annPrev && annNext) { 652 annPrev.addEventListener('click', () => { 653 annContainer.scrollBy({ left: -annContainer.clientWidth, behavior: 'smooth' }); 654 }); 655 annNext.addEventListener('click', () => { 656 annContainer.scrollBy({ left: annContainer.clientWidth, behavior: 'smooth' }); 657 }); 658 } 659 660 annDots.forEach((dot, i) => { 661 dot.addEventListener('click', () => { 662 annContainer.scrollTo({ left: i * annContainer.clientWidth, behavior: 'smooth' }); 663 }); 664 }); 665 666 annContainer.addEventListener('scroll', updateDots); 667 } 668 }); 669 </script>
669 670</body> 671 672</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.