/* ========================================================= GAMEDECK — MAIN STYLESHEET Color variables are injected in by functions.php (gamedeck_css_variables) so every color below is editable from the Customizer without touching this file. ========================================================= */ /* ---------- Fallback color system (overridden by inline vars) ---------- */ :root { --gd-primary: #7C3AED; --gd-secondary: #22D3EE; --gd-accent: #F59E0B; --gd-bg: #0B0B14; --gd-surface: #15151F; --gd-text: #F5F5F7; --gd-muted: #9A9AB0; --gd-border: #26263A; --gd-button: #7C3AED; --gd-glow: #7C3AED; --gd-radius-sm: 8px; --gd-radius-md: 14px; --gd-radius-lg: 22px; --gd-container: 1180px; --gd-transition: 220ms cubic-bezier(.2,.8,.2,1); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--gd-bg); color: var(--gd-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gd-secondary); text-decoration: none; transition: color var(--gd-transition); } a:hover { color: var(--gd-primary); } a:focus-visible, button:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 2px; border-radius: 2px; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .gd-skip-link:focus { position: fixed; top: 10px; left: 10px; z-index: 9999; background: var(--gd-surface); color: var(--gd-text); padding: 10px 16px; border-radius: var(--gd-radius-sm); width: auto; height: auto; clip: auto; } .gd-container { max-width: var(--gd-container); margin: 0 auto; padding: 0 24px; } /* ---------- Headings ---------- */ h1, h2, h3, h4, h5, h6 { color: var(--gd-text); font-weight: 800; line-height: 1.2; margin: 0 0 .6em; letter-spacing: -0.02em; } h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } h5 { font-size: .95rem; } h6 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gd-muted); } h1, h2, h3, h4, h5, h6, p, .gd-download-value, .gd-post-title { overflow-wrap: break-word; word-break: break-word; } .gd-section-title { text-align: center; margin-bottom: 44px; position: relative; } .gd-section-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--gd-primary), var(--gd-secondary)); } p { color: var(--gd-muted); margin: 0 0 1em; } /* ========================================================= BUTTONS — premium, animated, accessible ========================================================= */ .gd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--gd-radius-md); font-weight: 700; font-size: .98rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--gd-transition), box-shadow var(--gd-transition), background var(--gd-transition), color var(--gd-transition), border-color var(--gd-transition); will-change: transform; position: relative; } .gd-btn:hover { transform: translateY(-3px) scale(1.02); } .gd-btn:active { transform: translateY(-1px) scale(.99); } .gd-btn:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 3px; } .gd-btn-primary { background: linear-gradient(135deg, var(--gd-button), var(--gd-primary)); color: #fff; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--gd-glow) 70%, transparent); } .gd-btn-primary:hover { color: #fff; box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--gd-glow) 85%, transparent); } .gd-btn-ghost { background: transparent; color: var(--gd-text); border-color: var(--gd-border); } .gd-btn-ghost:hover { color: var(--gd-text); border-color: var(--gd-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-secondary) 15%, transparent); } .gd-btn-lg { padding: 16px 32px; font-size: 1.05rem; } .gd-btn-xl { padding: 18px 40px; font-size: 1.1rem; width: 100%; } .gd-btn-icon { font-size: 1.1em; } /* ========================================================= HEADER ========================================================= */ .gd-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--gd-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--gd-border); } /* Keep the sticky header below the WP admin bar instead of hiding under it */ .admin-bar .gd-header { top: 32px; } @media (max-width: 782px) { .admin-bar .gd-header { top: 46px; } } .gd-header-inner { display: flex; align-items: center; gap: 24px; height: 76px; } .gd-logo { flex-shrink: 0; } .gd-logo img { max-height: 44px; width: auto; } .gd-logo-text { font-weight: 800; font-size: 1.3rem; color: var(--gd-text); background: linear-gradient(135deg, var(--gd-primary), var(--gd-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gd-nav { flex: 1; } .gd-menu { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .gd-menu a { color: var(--gd-muted); font-weight: 600; font-size: .95rem; position: relative; padding: 6px 0; } .gd-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--gd-secondary); transition: width var(--gd-transition); } .gd-menu a:hover { color: var(--gd-text); } .gd-menu a:hover::after { width: 100%; } .gd-header-cta { flex-shrink: 0; } .gd-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--gd-border); border-radius: var(--gd-radius-sm); cursor: pointer; transition: border-color var(--gd-transition), background var(--gd-transition), transform var(--gd-transition); } .gd-menu-toggle:hover { border-color: var(--gd-secondary); background: color-mix(in srgb, var(--gd-secondary) 10%, transparent); } .gd-menu-toggle:active { transform: scale(.94); } .gd-menu-toggle:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 2px; } .gd-menu-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--gd-text); transition: transform var(--gd-transition), opacity var(--gd-transition); } .gd-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .gd-menu-toggle.is-active span:nth-child(2) { opacity: 0; } .gd-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= HERO ========================================================= */ .gd-hero { position: relative; padding: 96px 0 80px; overflow: hidden; } .gd-hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(600px 400px at 15% 20%, color-mix(in srgb, var(--gd-primary) 28%, transparent), transparent 70%), radial-gradient(500px 380px at 85% 10%, color-mix(in srgb, var(--gd-secondary) 22%, transparent), transparent 70%), var(--gd-bg); } .gd-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .gd-badge { display: inline-block; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--gd-primary) 18%, transparent); border: 1px solid color-mix(in srgb, var(--gd-primary) 45%, transparent); color: var(--gd-secondary); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 18px; } .gd-hero-title { margin-bottom: 18px; } .gd-hero-subtitle { font-size: 1.1rem; max-width: 52ch; margin-bottom: 26px; } .gd-hero-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; } .gd-meta-pill { background: var(--gd-surface); border: 1px solid var(--gd-border); padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--gd-text); } .gd-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .gd-hero-media { position: relative; } .gd-hero-media-glow { position: absolute; inset: -10%; background: radial-gradient(circle, color-mix(in srgb, var(--gd-glow) 40%, transparent), transparent 70%); filter: blur(30px); z-index: 0; } .gd-image-frame { position: relative; z-index: 1; border-radius: var(--gd-radius-lg); border: 1px solid var(--gd-border); background: linear-gradient(160deg, color-mix(in srgb, var(--gd-surface) 92%, white 8%), var(--gd-surface)); padding: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); } .gd-image-frame img { border-radius: calc(var(--gd-radius-lg) - 8px); width: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .gd-image-placeholder { display: flex; align-items: center; justify-content: center; min-height: 220px; border: 1px dashed var(--gd-border); border-radius: var(--gd-radius-md); background: var(--gd-surface); color: var(--gd-muted); font-size: .85rem; text-align: center; padding: 20px; } /* ========================================================= DOWNLOAD CARD ========================================================= */ .gd-download-section { padding: 0 0 80px; margin-top: -40px; position: relative; z-index: 2; } .gd-download-card { background: linear-gradient(160deg, color-mix(in srgb, var(--gd-surface) 95%, white 5%), var(--gd-surface)); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 36px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; box-shadow: 0 20px 50px -24px rgba(0,0,0,.55); } .gd-download-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .gd-download-row { display: flex; flex-direction: column; gap: 4px; } .gd-download-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gd-muted); font-weight: 700; } .gd-download-value { font-size: 1rem; font-weight: 700; color: var(--gd-text); } .gd-download-btn { min-width: 260px; } /* ========================================================= FEATURES ========================================================= */ .gd-features-section { padding: 80px 0; } .gd-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gd-feature-card { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); padding: 28px; transition: transform var(--gd-transition), border-color var(--gd-transition), box-shadow var(--gd-transition); } .gd-feature-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gd-secondary) 50%, var(--gd-border)); box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--gd-glow) 60%, transparent); } .gd-feature-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--gd-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--gd-primary) 25%, transparent), color-mix(in srgb, var(--gd-secondary) 20%, transparent)); font-size: 1.4rem; margin-bottom: 16px; } .gd-feature-title { margin-bottom: 8px; } .gd-feature-text { margin: 0; font-size: .94rem; } /* ========================================================= SCREENSHOTS ========================================================= */ .gd-screenshots-section { padding: 80px 0; background: var(--gd-surface); } .gd-screenshots-scroller { display: flex; gap: 20px; overflow-x: auto; padding: 6px 6px 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .gd-screenshots-scroller::-webkit-scrollbar { height: 8px; } .gd-screenshots-scroller::-webkit-scrollbar-thumb { background: var(--gd-border); border-radius: 8px; } .gd-screenshot-item { flex: 0 0 auto; width: 220px; scroll-snap-align: start; border-radius: var(--gd-radius-md); overflow: hidden; border: 1px solid var(--gd-border); background: var(--gd-bg); transition: transform var(--gd-transition); } .gd-screenshot-item:hover { transform: translateY(-4px) scale(1.02); } .gd-screenshot-item img { aspect-ratio: 9/16; object-fit: cover; width: 100%; } /* ========================================================= INSTALLATION STEPS ========================================================= */ .gd-install-section { padding: 80px 0; } .gd-steps { display: grid; gap: 18px; max-width: 760px; margin: 0 auto; } .gd-step { display: flex; gap: 20px; align-items: flex-start; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); padding: 22px 24px; transition: border-color var(--gd-transition), transform var(--gd-transition); } .gd-step:hover { border-color: color-mix(in srgb, var(--gd-primary) 45%, var(--gd-border)); transform: translateX(4px); } .gd-step-number { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gd-primary), var(--gd-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } .gd-step-title { margin-bottom: 4px; } .gd-step-text { margin: 0; font-size: .94rem; } /* ========================================================= IMPORTANT INFORMATION BOX ========================================================= */ .gd-notice-section { padding: 0 0 80px; } .gd-notice-box { display: flex; gap: 18px; align-items: flex-start; background: color-mix(in srgb, var(--gd-accent) 10%, var(--gd-surface)); border: 1px solid color-mix(in srgb, var(--gd-accent) 40%, var(--gd-border)); border-radius: var(--gd-radius-md); padding: 26px; } .gd-notice-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--gd-accent) 25%, transparent); color: var(--gd-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; } .gd-notice-title { margin-bottom: 6px; } .gd-notice-text p:last-child { margin-bottom: 0; } /* ========================================================= LATEST POSTS ========================================================= */ .gd-posts-section { padding: 80px 0; } .gd-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .gd-posts-grid-wide { grid-template-columns: repeat(3, 1fr); padding-top: 60px; } .gd-post-card { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); overflow: hidden; transition: transform var(--gd-transition), box-shadow var(--gd-transition); } .gd-post-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); } .gd-post-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--gd-bg); } .gd-post-thumb img { width: 100%; height: 100%; object-fit: cover; } .gd-post-body { padding: 20px; } .gd-post-title { font-size: 1.1rem; margin-bottom: 8px; } .gd-post-title a { color: var(--gd-text); } .gd-post-title a:hover { color: var(--gd-secondary); } .gd-post-excerpt { font-size: .9rem; margin-bottom: 12px; } .gd-post-link { font-weight: 700; font-size: .88rem; } .gd-pagination { margin-top: 40px; text-align: center; } .gd-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; margin: 4px; padding: 0 10px; border-radius: var(--gd-radius-sm); border: 1px solid var(--gd-border); color: var(--gd-text); transition: border-color var(--gd-transition), background var(--gd-transition), color var(--gd-transition), transform var(--gd-transition); } a.gd-pagination-link.page-numbers:hover, .gd-pagination a.page-numbers:hover { border-color: var(--gd-secondary); color: var(--gd-secondary); transform: translateY(-2px); } .gd-pagination a.page-numbers:active { transform: translateY(0); } .gd-pagination a.page-numbers:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 2px; } .gd-pagination .page-numbers.current { background: var(--gd-primary); border-color: var(--gd-primary); color: #fff; } /* ========================================================= GENERIC PAGE / SINGLE CONTENT ========================================================= */ .gd-content-page { padding: 60px 0 90px; } .gd-single-content { max-width: 820px; } .gd-page-header { margin-bottom: 24px; } .gd-post-meta-line { color: var(--gd-muted); font-size: .88rem; display: flex; gap: 8px; } .gd-page-thumb { border-radius: var(--gd-radius-md); overflow: hidden; margin-bottom: 28px; border: 1px solid var(--gd-border); } .gd-entry-content { font-size: 1.02rem; } .gd-entry-content h2, .gd-entry-content h3 { margin-top: 1.4em; } .gd-entry-content img { border-radius: var(--gd-radius-md); } .gd-post-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gd-border); } /* ========================================================= 404 PAGE ========================================================= */ .gd-404-inner { text-align: center; padding: 40px 0 20px; } .gd-404-code { font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 800; line-height: 1; margin: 0 0 8px; background: linear-gradient(135deg, var(--gd-primary), var(--gd-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .gd-404-text { max-width: 46ch; margin: 0 auto 28px; } /* ========================================================= FOOTER ========================================================= */ .gd-footer { background: var(--gd-surface); border-top: 1px solid var(--gd-border); padding: 64px 0 28px; margin-top: 40px; } .gd-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--gd-border); } .gd-footer-tagline { font-size: .9rem; margin-top: 10px; } .footer-widget-title { font-size: .95rem; margin-bottom: 14px; } .gd-footer-menu li { margin-bottom: 10px; } .gd-footer-menu a { color: var(--gd-muted); font-size: .92rem; } .gd-footer-menu a:hover { color: var(--gd-secondary); } .gd-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; font-size: .85rem; color: var(--gd-muted); } .gd-footer-bottom p { margin: 0; } .gd-back-to-top { position: fixed; right: max(22px, env(safe-area-inset-right)); /* Stacked above the floating action button (60px + 20px offset + gap) so the two never overlap */ bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)); width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--gd-button), var(--gd-primary)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gd-glow) 70%, transparent); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--gd-transition), transform var(--gd-transition); z-index: 90; } .gd-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .gd-back-to-top:hover { transform: translateY(-4px) scale(1.05); } .gd-back-to-top:active { transform: translateY(-1px) scale(1.01); } .gd-back-to-top:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 3px; } /* ========================================================= RESPONSIVE ========================================================= */ /* Large screens / wide monitors — a little extra breathing room */ @media (min-width: 1440px) { .gd-container { max-width: 1280px; } } @media (max-width: 980px) { .gd-hero-inner { grid-template-columns: 1fr; } .gd-hero-media { order: -1; max-width: 420px; margin: 0 auto; } .gd-download-card { grid-template-columns: 1fr; } .gd-download-info { grid-template-columns: repeat(2, 1fr); } .gd-download-btn { width: 100%; } .gd-features-grid { grid-template-columns: repeat(2, 1fr); } .gd-posts-grid, .gd-posts-grid-wide { grid-template-columns: repeat(2, 1fr); } .gd-footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .gd-nav { position: fixed; top: 76px; left: 0; right: 0; background: var(--gd-bg); border-bottom: 1px solid var(--gd-border); max-height: 0; overflow: hidden; transition: max-height var(--gd-transition); flex: none; } .gd-nav.is-open { max-height: 400px; } .gd-menu { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px; } .gd-menu li { width: 100%; } .gd-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--gd-border); } .gd-header-cta { display: none; } .gd-menu-toggle { display: flex; } .gd-download-info { grid-template-columns: 1fr 1fr; } .gd-features-grid { grid-template-columns: 1fr; } .gd-posts-grid, .gd-posts-grid-wide { grid-template-columns: 1fr; } .gd-footer-top { grid-template-columns: 1fr; } .gd-hero { padding: 64px 0 56px; } .gd-hero-actions { flex-direction: column; align-items: stretch; } .gd-hero-actions .gd-btn { width: 100%; } } @media (max-width: 420px) { .gd-container { padding: 0 16px; } .gd-download-card { padding: 24px; } /* Custom button text can run long once real copy is added — wrap instead of overflowing */ .gd-btn { white-space: normal; text-align: center; line-height: 1.3; } } /* ========================================================= COMMENTS ========================================================= */ .gd-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gd-border); } .gd-comments-title { margin-bottom: 20px; } .gd-comment-list { margin-bottom: 28px; } .gd-comment-list li { margin-bottom: 20px; } .comment-body { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); padding: 18px 20px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 14px; margin-bottom: 16px; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-sm); color: var(--gd-text); font-family: inherit; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--gd-secondary); } .comment-form label { display: block; margin-bottom: 6px; font-size: .88rem; color: var(--gd-muted); } /* ========================================================= PAGE 2 & 3 — SHARED SECTION LAYOUT (How to Download & Install / How to Register & Login) ========================================================= */ .gd-page-wide { max-width: 860px; } .gd-page-header-center { text-align: center; margin-bottom: 44px; } .gd-page-header-center .gd-page-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--gd-primary), var(--gd-secondary)); } .gd-section-block { margin-bottom: 56px; } .gd-section-block h2 { margin-bottom: 14px; } .gd-rich-text p:last-child { margin-bottom: 0; } .gd-empty-note { font-size: .9rem; font-style: italic; color: var(--gd-muted); border: 1px dashed var(--gd-border); border-radius: var(--gd-radius-sm); padding: 14px 16px; } /* ---------- Reusable Download Info Component ---------- */ .gd-download-info-card { background: linear-gradient(160deg, color-mix(in srgb, var(--gd-surface) 95%, white 5%), var(--gd-surface)); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 32px; box-shadow: 0 20px 50px -28px rgba(0,0,0,.55); margin-bottom: 24px; } .gd-download-info-head { margin-bottom: 20px; } .gd-download-info-name { margin: 0; } .gd-download-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; margin-bottom: 26px; } .gd-download-row-wide { grid-column: 1 / -1; } .gd-req-block { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); padding: 22px 24px; } .gd-req-block h3 { margin-bottom: 8px; } /* ---------- Final CTA block ---------- */ .gd-final-cta { text-align: center; background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-lg); padding: 44px 32px; } .gd-final-cta h2 { margin-bottom: 10px; } .gd-final-cta .gd-rich-text { max-width: 56ch; margin: 0 auto 22px; } /* ========================================================= FAQ ACCORDION (vanilla JS toggle, CSS-driven animation) ========================================================= */ .gd-faq-list { display: grid; gap: 14px; } .gd-faq-item { background: var(--gd-surface); border: 1px solid var(--gd-border); border-radius: var(--gd-radius-md); overflow: hidden; transition: border-color var(--gd-transition); } .gd-faq-item:hover { border-color: color-mix(in srgb, var(--gd-secondary) 40%, var(--gd-border)); } .gd-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; border: none; color: var(--gd-text); font-weight: 700; font-size: 1rem; text-align: left; padding: 18px 22px; cursor: pointer; } .gd-faq-question:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: -2px; } .gd-faq-icon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--gd-primary) 18%, transparent); color: var(--gd-secondary); font-size: 1.1rem; transition: transform var(--gd-transition); } .gd-faq-item.is-open .gd-faq-icon { transform: rotate(45deg); } .gd-faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--gd-transition), padding var(--gd-transition); padding: 0 22px; } .gd-faq-item.is-open .gd-faq-answer { padding: 0 22px 20px; } .gd-faq-answer p { margin: 0; font-size: .95rem; } /* ========================================================= FLOATING ACTION BUTTON — glass + glow + pulse ========================================================= */ .gd-floating-btn { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 95; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gd-surface) 65%, transparent); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid color-mix(in srgb, var(--gd-glow) 45%, var(--gd-border)); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--gd-glow) 70%, transparent); overflow: visible; transition: transform var(--gd-transition), box-shadow var(--gd-transition); } .gd-floating-btn:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px -8px color-mix(in srgb, var(--gd-glow) 85%, transparent); } .gd-floating-btn:active { transform: translateY(-1px) scale(1.01); } .gd-floating-btn:focus-visible { outline: 2px solid var(--gd-secondary); outline-offset: 3px; } .gd-floating-btn-img { width: 60%; height: 60%; object-fit: contain; border-radius: 50%; position: relative; z-index: 2; } .gd-floating-btn-fallback { font-size: 1.6rem; position: relative; z-index: 2; } .gd-floating-btn-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gd-glow) 60%, transparent); animation: gd-pulse 2.4s ease-out infinite; z-index: 1; pointer-events: none; } @keyframes gd-pulse { 0% { transform: scale(1); opacity: .65; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } @media (max-width: 720px) { .gd-floating-btn { width: 52px; height: 52px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } .gd-back-to-top { right: max(14px, env(safe-area-inset-right)); bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px)); } .gd-download-info-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .gd-download-info-grid { grid-template-columns: 1fr; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .gd-floating-btn-ring { display: none; } }