/* ═══════════════════════════════════════════════════════════ SLOTSGAMBLERS · Mega Header (Elementor widget — scoped) ─────────────────────────────────────────────────────────── Minden szabály .sgmh-wrap alá van scope-olva, hogy ne ütközzön más plugin (pl. sgmh-footer) / téma / Elementor CSS-ével. A natív CSS nesting helyett expicit szelektorok használata. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ STICKY ANCESTOR CHAIN — html, body, and EVERY wrapper between the .sgmh-wrap and must allow sticky. ─────────────────────────────────────────────────────────── The killer combo every WP theme has: `html, body { overflow-x: hidden }`. Per CSS spec, when overflow-x !== visible on html/body, the browser forces overflow-y: auto on body — body becomes a scroll container — sticky breaks silently for ALL descendants. Fix: overflow-x: clip (sticky-safe) + overflow-y: visible, both !important to beat the theme stylesheet. ═══════════════════════════════════════════════════════════ */ html:has(.sgmh-wrap){ padding: 0 !important; margin: 0 !important; overflow-x: clip !important; overflow-y: visible !important; } body:has(.sgmh-wrap){ margin: 0 !important; overflow-x: clip !important; overflow-y: visible !important; /* Block any theme/plugin from making body a scroll container. */ overflow: visible !important; overflow-x: clip !important; height: auto !important; min-height: 0 !important; max-height: none !important; } /* ═══════════════════════════════════════════════════════════ FULL WIDTH (edge-to-edge) — Elementor szülő override Both the Elementor wrappers AND a viewport break-out on .sgmh-wrap so the header is edge-to-edge even inside narrow column layouts. ═══════════════════════════════════════════════════════════ */ /* All Elementor / theme ancestors must have overflow:visible and no transform — anything else will trap position:sticky inside that ancestor. */ .elementor-section:has(.elementor-widget-sgmh_header), .elementor-section.elementor-section-full_width:has(.elementor-widget-sgmh_header){ padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; transform: none !important; } .elementor-element:has(.elementor-widget-sgmh_header), .e-con:has(.elementor-widget-sgmh_header), .e-con-inner:has(.elementor-widget-sgmh_header){ padding: 0 !important; margin: 0 !important; --padding-top: 0px !important; --padding-right: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important; --content-width: 100% !important; --container-max-width: 100% !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; transform: none !important; } .elementor-column:has(.elementor-widget-sgmh_header), .elementor-column:has(.elementor-widget-sgmh_header) > .elementor-widget-wrap{ padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; transform: none !important; } .elementor-widget-sgmh_header, .elementor-widget-sgmh_header > .elementor-widget-container{ padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; transform: none !important; } /* Theme/WP wrapper override — overflow:visible on EVERY ancestor between body and the widget. Anything with overflow:hidden/clip/auto/scroll OR a transform/filter/will-change/perspective/contain traps the sticky. List sourced from common WP themes (Astra, GeneratePress, OceanWP, Twenty Twenty-X, Elementor Hello) + Elementor 3.x containers. */ html:has(.sgmh-wrap) #page, html:has(.sgmh-wrap) #wrapper, html:has(.sgmh-wrap) #wrapper-navbar, html:has(.sgmh-wrap) .site, html:has(.sgmh-wrap) .site-wrapper, body:has(.sgmh-wrap) #page, body:has(.sgmh-wrap) #wrapper, body:has(.sgmh-wrap) .site, body:has(.sgmh-wrap) .site-wrapper, body:has(.sgmh-wrap) #masthead, body:has(.sgmh-wrap) #content, body:has(.sgmh-wrap) #primary, body:has(.sgmh-wrap) .content-area, body:has(.sgmh-wrap) .page-content, body:has(.sgmh-wrap) .site-content, body:has(.sgmh-wrap) .site-main, body:has(.sgmh-wrap) .entry-content, body:has(.sgmh-wrap) main, body:has(.sgmh-wrap) article, body:has(.sgmh-wrap) .post, body:has(.sgmh-wrap) .page, body:has(.sgmh-wrap) .hfeed, body:has(.sgmh-wrap) .ast-container, body:has(.sgmh-wrap) .ast-row, body:has(.sgmh-wrap) .gp-container, body:has(.sgmh-wrap) .elementor, body:has(.sgmh-wrap) .elementor-inner, body:has(.sgmh-wrap) .elementor-section, body:has(.sgmh-wrap) .elementor-section-wrap, body:has(.sgmh-wrap) .elementor-container, body:has(.sgmh-wrap) .elementor-row, body:has(.sgmh-wrap) .elementor-column, body:has(.sgmh-wrap) .elementor-column-wrap, body:has(.sgmh-wrap) .elementor-widget-wrap, body:has(.sgmh-wrap) .elementor-widget, body:has(.sgmh-wrap) .elementor-widget-container, body:has(.sgmh-wrap) .elementor-widget-html, body:has(.sgmh-wrap) .e-con, body:has(.sgmh-wrap) .e-con-full, body:has(.sgmh-wrap) .e-con-inner, body:has(.sgmh-wrap) .e-con-boxed, body:has(.sgmh-wrap) .e-flex, body:has(.sgmh-wrap) .e-grid, body:has(.sgmh-wrap) .e-parent, body:has(.sgmh-wrap) .e-child{ overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; transform: none !important; filter: none !important; -webkit-filter: none !important; perspective: none !important; will-change: auto !important; contain: none !important; /* No padding-top on these so the hero butts directly under the WP nav. */ padding-top: 0 !important; margin-top: 0 !important; } /* Viewport break-out + STICKY pinning on the wrap itself — guarantees: 1) edge-to-edge full-width regardless of container width 2) the header stays pinned to the top of the viewport while scrolling The sticky is on the OUTER wrap so the viewport break-out (-50vw margins) and the sticky live on the same element. -webkit-sticky added for older iOS Safari. */ /* position:fixed is more reliable than position:sticky for a SITE-WIDE header that must stay pinned to the viewport top regardless of where Elementor / the theme places the widget in the DOM. Sticky requires every ancestor to have overflow:visible — fixed escapes the parent flow entirely. To prevent content jump, JS measures the wrap height and applies a matching padding-top to on pages that contain the wrap. */ .sgmh-wrap{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; z-index: 9999 !important; transform: none !important; filter: none !important; -webkit-filter: none !important; will-change: auto !important; contain: none !important; overflow: visible !important; } /* Spacer placeholder: same height as the fixed header, sits in normal flow so the page content does not jump under the header. JS sets the height. */ .sgmh-wrap-spacer{ width: 100%; height: 0; flex: none; pointer-events: none; } /* Force EVERY ancestor of the wrap (up to ) to allow sticky. The widget is always rendered inside multiple Elementor wrappers — each of them must be overflow:visible AND have no transform. We covered the named classes earlier; here we also catch any flex/grid container Elementor 3.x creates for the "Container" widget. */ body:has(.sgmh-wrap), body:has(.sgmh-wrap) > *, body:has(.sgmh-wrap) [class*="elementor-"], body:has(.sgmh-wrap) [class*="e-con"], body:has(.sgmh-wrap) [class*="e-flex"], body:has(.sgmh-wrap) [class*="e-grid"]{ transform: none !important; filter: none !important; -webkit-filter: none !important; perspective: none !important; will-change: auto !important; contain: none !important; } /* WP wrapper / theme reset — kill any white gap above the sticky header */ body:has(.sgmh-wrap) .entry-content, body:has(.sgmh-wrap) .site-main, body:has(.sgmh-wrap) .site-content, body:has(.sgmh-wrap) main, body:has(.sgmh-wrap) #content, body:has(.sgmh-wrap) #primary, body:has(.sgmh-wrap) .content-area, body:has(.sgmh-wrap) article, body:has(.sgmh-wrap) .post, body:has(.sgmh-wrap) .page, body:has(.sgmh-wrap) .elementor, body:has(.sgmh-wrap) .e-con, body:has(.sgmh-wrap) .e-con-full, body:has(.sgmh-wrap) .elementor-section, body:has(.sgmh-wrap) .elementor-container, body:has(.sgmh-wrap) .elementor-column, body:has(.sgmh-wrap) .elementor-widget-wrap, body:has(.sgmh-wrap) .elementor-widget, body:has(.sgmh-wrap) .elementor-widget-container, body:has(.sgmh-wrap) .elementor-widget-html{ padding-top: 0 !important; margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════ BASE RESET — only inside .sgmh-wrap .sgmh-art Hard-overrides ANY theme/Elementor/WP

/ rules so the dynamic SEO tags (default

) render exactly like the original spans/h-tags — no theme margins, no theme line-height, no font-size leak, no text-transform leak. ═══════════════════════════════════════════════════════════ */ .sgmh-wrap .sgmh-art, .sgmh-wrap .sgmh-art *{box-sizing:border-box} .sgmh-wrap .sgmh-art button{font:inherit;color:inherit;letter-spacing:inherit;margin:0} /* Default

/ reset for any visible-text wrapper. We do NOT force a display value here — each USE SITE picks its own (block for stacked items inside .brand .name, inline-block for nav-link-label inside a flex pill). Forcing inline-block globally breaks the brand .name column layout. */ .sgmh-wrap .sgmh-art p, .sgmh-wrap .sgmh-art h1, .sgmh-wrap .sgmh-art h2, .sgmh-wrap .sgmh-art h3, .sgmh-wrap .sgmh-art h4, .sgmh-wrap .sgmh-art h5, .sgmh-wrap .sgmh-art h6{ margin: 0 !important; padding: 0 !important; font: inherit !important; color: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; text-transform: inherit !important; text-align: inherit !important; background: transparent !important; border: 0 !important; } /* Stacked items (one per line, like the brand name + tagline) use block. */ .sgmh-wrap .sgmh-art .brand .name > p, .sgmh-wrap .sgmh-art .brand .name > h1, .sgmh-wrap .sgmh-art .brand .name > h2, .sgmh-wrap .sgmh-art .brand .name > h3, .sgmh-wrap .sgmh-art .brand .name > h4, .sgmh-wrap .sgmh-art .brand .name > h5, .sgmh-wrap .sgmh-art .brand .name > h6, .sgmh-wrap .sgmh-art .md-body .sub, .sgmh-wrap .sgmh-art .md-row-body .md-sub-h{ display: block !important; } /* Inline-flex items (inside flex pills/buttons) keep inline-block so the parent flex layout is not broken by a block-level child. */ /* Inline-flex pills/buttons (single-line content on a flex parent) */ .sgmh-wrap .sgmh-art .nav-link .nav-link-label, .sgmh-wrap .sgmh-art .nav-cta .cta-label, .sgmh-wrap .sgmh-art .feat-cta .feat-cta-label, .sgmh-wrap .sgmh-art summary.md-row-h .md-row-h-label, .sgmh-wrap .sgmh-art .md-body > a .md-link-label, .sgmh-wrap .sgmh-art .md-foot .cta .cta-label{ display: inline-flex !important; align-items: center; } /* mega-link / drawer link names: block-level so the text + pill flow naturally and the parent .lbl controls width. NOT inline-flex — that forces flex-shrink which causes mid-word breaks like "Real Time | Gaming" splitting on two lines inside the same .nm. */ .sgmh-wrap .sgmh-art .mega-link .nm, .sgmh-wrap .sgmh-art .md-row-body a .nm{ display: block !important; white-space: normal; overflow-wrap: normal; word-break: keep-all; } .sgmh-wrap .sgmh-art .mega-link .nm .pill, .sgmh-wrap .sgmh-art .md-row-body a .nm .pill{ display: inline-block; vertical-align: middle; flex: none; white-space: nowrap; } .sgmh-wrap .sgmh-art{ --bg-0:#f6f3ec; --bg-1:#ffffff; --bg-2:#efeadd; --bg-3:#e6dfcc; --line:#e7e0cf; --line-2:#cdc4ad; --ink-0:#16140f; --ink-1:#3a362b; --ink-2:#6c6552; --ink-3:#a39c84; --gold: oklch(0.72 0.15 75); --gold-deep: oklch(0.56 0.16 60); --green: oklch(0.55 0.14 150); --green-deep: oklch(0.42 0.13 150); --rose: oklch(0.60 0.18 22); --blue: oklch(0.50 0.15 250); --radius:14px; --radius-lg:22px; --shadow-sm: 0 1px 2px rgba(22,20,15,.06); --shadow-md: 0 1px 0 rgba(22,20,15,.04), 0 10px 28px -14px rgba(22,20,15,.18); --shadow-lg: 0 24px 60px -28px rgba(22,20,15,.25); background:var(--bg-0);color:var(--ink-0); font-family:'Inter','Inter Variable',system-ui,sans-serif!important; -webkit-font-smoothing:antialiased; position:static; overflow:visible; } .sgmh-wrap .sgmh-art *{box-sizing:border-box;font-family:inherit} .sgmh-wrap .sgmh-art .display{font-family:'Inter Tight',sans-serif;letter-spacing:-0.02em} .sgmh-wrap .sgmh-art .mono{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0.01em} .sgmh-wrap .sgmh-art .wrap{max-width:max(1400px, var(--sg-band, 1400px));margin:0 auto;padding:0 24px} .sgmh-wrap .sgmh-art a{color:inherit} /* ═══════════════════════════════════════════════════════════ NAV SHELL ═══════════════════════════════════════════════════════════ */ /* Sticky pinning is on .sgmh-wrap (the outer wrap) — keep .nav-shell relative here, otherwise the inner sticky would compete with the outer one. */ .sgmh-wrap .sgmh-art .nav-shell{position:relative;z-index:50;background:color-mix(in oklab, var(--bg-0) 95%, transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)} .sgmh-wrap .sgmh-art .nav{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;height:72px !important;width:100%;flex-wrap:nowrap} .sgmh-wrap .sgmh-art .brand{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;flex-wrap:nowrap !important;gap:10px !important;font-family:'Inter Tight',sans-serif !important;font-weight:800 !important;font-size:21px !important;letter-spacing:-0.03em !important;color:var(--ink-0) !important;text-decoration:none !important;flex:none;line-height:1 !important;height:auto;width:auto} .sgmh-wrap .sgmh-art .brand-mark{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important;border-radius:11px;background:var(--ink-0);display:grid !important;place-items:center;position:relative;box-shadow:var(--shadow-md);flex:none !important;align-self:center !important} .sgmh-wrap .sgmh-art .brand-mark svg{position:relative;z-index:1} .sgmh-wrap .sgmh-art .brand .name{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;line-height:1 !important;gap:0 !important;flex:none !important;align-self:center !important;min-width:0;text-align:left !important} .sgmh-wrap .sgmh-art .brand .name > *{display:block !important;width:auto;text-align:left !important} .sgmh-wrap .sgmh-art .brand .name .brand-name{ font-family:'Inter Tight',sans-serif !important; font-weight:800 !important;font-size:21px !important; letter-spacing:-0.03em !important;color:var(--ink-0) !important; line-height:1 !important;text-transform:none !important; margin:0 !important;padding:0 !important; } .sgmh-wrap .sgmh-art .brand .name .brand-tagline, .sgmh-wrap .sgmh-art .brand .name small{ color:var(--ink-2) !important;font-weight:500 !important; font-size:10px !important;letter-spacing:0.16em !important; text-transform:uppercase !important;margin:4px 0 0 !important; padding:0 !important;font-family:'Inter',sans-serif !important; line-height:1 !important;display:block !important; } .sgmh-wrap .sgmh-art .brand .name .accent{color:var(--gold-deep) !important;font:inherit !important} .sgmh-wrap .sgmh-art .nav-links{display:flex !important;flex-direction:row !important;align-items:center !important;gap:2px !important;margin-left:14px !important;position:static;flex:1 1 auto;min-width:0} .sgmh-wrap .sgmh-art .nav-item{position:relative} .sgmh-wrap .sgmh-art .nav-link{color:var(--ink-1) !important;text-decoration:none !important;font-weight:600 !important;font-size:14px !important;padding:9px 13px !important;border-radius:99px !important;display:inline-flex !important;align-items:center !important;gap:6px !important;transition:.15s;cursor:pointer;border:0 !important;background:transparent;font-family:inherit !important;line-height:1 !important;text-transform:none !important;letter-spacing:0 !important;margin:0 !important;height:auto;width:auto;flex:none;white-space:nowrap !important} .sgmh-wrap .sgmh-art .nav-link .nav-link-label{margin:0 !important;padding:0 !important;font:inherit !important;color:inherit !important;letter-spacing:inherit !important;line-height:1 !important;display:inline-block !important;text-transform:none !important;white-space:nowrap !important} .sgmh-wrap .sgmh-art .nav-link:hover{background:var(--bg-2) !important;color:var(--ink-0) !important} .sgmh-wrap .sgmh-art .nav-link.active, .sgmh-wrap .sgmh-art .nav-link.active:hover{background:var(--ink-0) !important;color:#fff !important} .sgmh-wrap .sgmh-art .nav-link.active .nav-link-label{color:#fff !important} .sgmh-wrap .sgmh-art .nav-link .crt{transition:transform .2s;color:var(--ink-3)} .sgmh-wrap .sgmh-art .nav-link.active .crt{color:#fff !important} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] > .nav-link{background:var(--bg-2) !important;color:var(--ink-0) !important} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] > .nav-link.active{background:var(--ink-0) !important;color:#fff !important} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] > .nav-link.active .nav-link-label{color:#fff !important} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] > .nav-link .crt{transform:rotate(180deg);color:var(--gold-deep)} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] > .nav-link.active .crt{color:#fff !important} .sgmh-wrap .sgmh-art .nav-link .badge{font-size:10px;font-weight:700;background:var(--gold);color:#1a1408;padding:2px 6px;border-radius:99px;letter-spacing:0.04em} /* Country picker dropdown (works via JS — data-country-dd) */ .sgmh-wrap .sgmh-art .country-dd{margin-left:auto !important;position:relative;flex:none;display:inline-flex} .sgmh-wrap .sgmh-art .country{display:inline-flex !important;align-items:center !important;gap:8px !important;background:var(--bg-1) !important;border:1px solid var(--line) !important;border-radius:99px !important;padding:7px 12px 7px 8px !important;font-weight:600 !important;font-size:13px !important;line-height:1 !important;cursor:pointer;box-shadow:var(--shadow-sm);flex:none;height:auto;color:var(--ink-0) !important;transition:background .15s,border-color .15s} .sgmh-wrap .sgmh-art .country:hover{background:var(--bg-2) !important;border-color:var(--line-2) !important} .sgmh-wrap .sgmh-art .country svg{transition:transform .2s ease;color:var(--ink-3)} .sgmh-wrap .sgmh-art .country-dd[data-open="true"] .country svg{transform:rotate(180deg);color:var(--gold-deep)} .sgmh-wrap .sgmh-art .country-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-md),0 18px 50px -16px rgba(15,12,8,.28);padding:6px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1),visibility .16s} .sgmh-wrap .sgmh-art .country-dd[data-open="true"] .country-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .sgmh-wrap .sgmh-art .country-panel-hd{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:10px;color:var(--ink-2);letter-spacing:0.12em;text-transform:uppercase;padding:8px 10px 6px} .sgmh-wrap .sgmh-art .country-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink-0) !important;font-weight:600;font-size:13.5px;line-height:1;transition:background .12s} .sgmh-wrap .sgmh-art .country-opt:hover{background:var(--bg-2)} .sgmh-wrap .sgmh-art .country-opt.is-current{background:var(--bg-2)} .sgmh-wrap .sgmh-art .country-opt .country-opt-flag{font-size:16px;line-height:1;flex:none} .sgmh-wrap .sgmh-art .country-opt .country-opt-name{flex:1 1 auto;white-space:nowrap} .sgmh-wrap .sgmh-art .country-opt .country-opt-tick{flex:none;color:var(--green-deep)} .sgmh-wrap .sgmh-art .flag-au{width:22px;height:16px;border-radius:3px;overflow:hidden;display:inline-block;background:linear-gradient(180deg,#012169 50%, #012169 50%);position:relative;flex:none} .sgmh-wrap .sgmh-art .flag-au::before{content:"";position:absolute;left:0;top:0;width:11px;height:8px;background:linear-gradient(45deg,transparent 45%, #fff 45% 55%, transparent 55%),linear-gradient(-45deg,transparent 45%, #fff 45% 55%, transparent 55%),#012169} .sgmh-wrap .sgmh-art .flag-au::after{content:"★";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:#fff;font-size:9px;font-weight:700} /* Geo-neutral globe marker (default for multi-market: UK/US/CA). A round teal-to-blue globe with a meridian highlight — no single country flag. */ .sgmh-wrap .sgmh-art .flag-globe{width:18px;height:18px;border-radius:50%;display:inline-block;flex:none;background:radial-gradient(circle at 32% 30%, #5ec8d8 0%, #2f8fb0 48%, #1f6e92 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);position:relative;overflow:hidden} .sgmh-wrap .sgmh-art .flag-globe::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:rgba(255,255,255,.45)} .sgmh-wrap .sgmh-art .flag-globe::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;transform:translateY(-50%);background:rgba(255,255,255,.4)} .sgmh-wrap .sgmh-art .md-foot .country-row .flag-globe{width:16px;height:16px;border-radius:50%} .sgmh-wrap .sgmh-art .nav-cta{background:var(--ink-0) !important;color:#fff !important;border:0 !important;padding:10px 18px !important;border-radius:99px !important;font-weight:700 !important;font-size:14px !important;cursor:pointer;font-family:'Inter',sans-serif !important;text-decoration:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;flex:none !important;height:auto;width:auto;min-width:max-content;white-space:nowrap !important;text-transform:none !important;letter-spacing:0 !important} .sgmh-wrap .sgmh-art .nav-cta:hover{background:var(--ink-1) !important;color:#fff !important} .sgmh-wrap .sgmh-art .nav-cta .cta-label{margin:0 !important;padding:0 !important;font:inherit !important;color:inherit !important;letter-spacing:inherit !important;line-height:1 !important;display:inline-block !important;text-transform:none !important;white-space:nowrap} /* ═══════════════════════════════════════════════════════════ MEGA MENU ═══════════════════════════════════════════════════════════ */ .sgmh-wrap .sgmh-art .mega-bar{position:fixed;left:0;right:0;top:72px;z-index:55;pointer-events:none} .sgmh-wrap .sgmh-art .mega{position:absolute;left:50%;top:8px;transform:translateX(-50%) translateY(-8px);width:min(1240px, calc(100vw - 24px));background:#fbf6ea;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 30px 80px -20px rgba(15,12,8,.28),0 8px 18px rgba(15,12,8,.06);opacity:0;pointer-events:none;transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);overflow:hidden} .sgmh-wrap .sgmh-art .mega.narrow{width:min(720px, calc(100vw - 24px))} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)} .sgmh-wrap .sgmh-art .nav-item[data-open="true"] .mega-bar::before{content:"";position:absolute;left:0;right:0;top:-4px;height:16px;background:transparent;pointer-events:auto} /* Slightly wider columns for text breathing room — original 1fr 1fr 1fr is too tight at 1080px width once the icon (34px) + gap (12px) + arrow are subtracted. At 1240px width, three equal columns give ~265px text area each, plenty for "Real Time Gaming" / "High RTP (97%+)" on a single line. */ .sgmh-wrap .sgmh-art .mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr 320px;gap:0;min-height:340px} .sgmh-wrap .sgmh-art .mega-grid.cols-3{grid-template-columns:1fr 1fr 320px} .sgmh-wrap .sgmh-art .mega-grid.cols-2{grid-template-columns:1fr 320px} .sgmh-wrap .sgmh-art .mega-col{min-width:0} .sgmh-wrap .sgmh-art .mega-col{padding:24px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px} .sgmh-wrap .sgmh-art .mega-col:last-of-type{border-right:0} .sgmh-wrap .sgmh-art .mega-col h6, .sgmh-wrap .sgmh-art .mega-col .col-h{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:10.5px;color:var(--ink-2);letter-spacing:0.14em;text-transform:uppercase;margin:0 0 10px;padding:0;display:flex;align-items:center;gap:8px} .sgmh-wrap .sgmh-art .mega-col .col-h.col-h-secondary{margin-top:14px} .sgmh-wrap .sgmh-art .mega-col h6::after, .sgmh-wrap .sgmh-art .mega-col .col-h::after{content:"";flex:1;height:1px;background:linear-gradient(to right, var(--line), transparent)} .sgmh-wrap .sgmh-art .mega-link{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;text-decoration:none;color:var(--ink-0);transition:.12s;position:relative;cursor:pointer} .sgmh-wrap .sgmh-art .mega-link:hover{background:#fff} .sgmh-wrap .sgmh-art .mega-link .icn{width:34px;height:34px;border-radius:9px;background:var(--bg-2);display:grid;place-items:center;flex:none;color:var(--ink-1);font-family:'Inter Tight';font-weight:800;font-size:13px;border:1px solid var(--line);transition:.12s} .sgmh-wrap .sgmh-art .mega-link:hover .icn{background:var(--ink-0);color:var(--gold);border-color:var(--ink-0)} .sgmh-wrap .sgmh-art .mega-link .lbl{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;overflow:visible} .sgmh-wrap .sgmh-art .mega-link .nm{font-family:'Inter Tight';font-weight:700;font-size:14px;letter-spacing:-0.012em;color:var(--ink-0);display:flex;align-items:center;gap:6px;margin:0;padding:0;line-height:1.2} .sgmh-wrap .sgmh-art .mega-link .nm .pill{font-size:9.5px;font-weight:800;background:var(--rose);color:#fff;padding:2px 6px;border-radius:99px;letter-spacing:0.06em;text-transform:uppercase} .sgmh-wrap .sgmh-art .mega-link .nm .pill.gold{background:var(--gold);color:#1a1408} .sgmh-wrap .sgmh-art .mega-link .nm .pill.green{background:var(--green);color:#fff} .sgmh-wrap .sgmh-art .mega-link .ds{font-size:11.5px;color:var(--ink-2);font-weight:500;line-height:1.35} .sgmh-wrap .sgmh-art .mega-link .arr{margin-left:auto;color:var(--ink-3);font-size:14px;flex:none;transition:.12s} .sgmh-wrap .sgmh-art .mega-link:hover .arr{color:var(--gold-deep);transform:translateX(2px)} .sgmh-wrap .sgmh-art .mega-link[data-sub] > .submenu{position:absolute;top:-12px;left:calc(100% + 14px);width:max-content;min-width:280px;max-width:340px;background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:0 20px 50px -10px rgba(15,12,8,.22);padding:14px;opacity:0;pointer-events:none;transform:translateX(-6px);transition:.16s;z-index:2} .sgmh-wrap .sgmh-art .mega-link[data-sub] > .submenu::before{content:"";position:absolute;top:0;bottom:0;left:-18px;width:18px;background:transparent} .sgmh-wrap .sgmh-art .mega-link[data-sub]:hover > .submenu, .sgmh-wrap .sgmh-art .mega-link[data-sub]:focus-within > .submenu, .sgmh-wrap .sgmh-art .mega-link[data-sub] > .submenu:hover{opacity:1;pointer-events:auto;transform:translateX(0)} .sgmh-wrap .sgmh-art .submenu h6, .sgmh-wrap .sgmh-art .submenu .submenu-h{margin:0 0 8px;padding:0;font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:10.5px;color:var(--ink-2);letter-spacing:0.14em;text-transform:uppercase} .sgmh-wrap .sgmh-art .submenu .sub-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--ink-0);font-size:13px;font-weight:600;white-space:nowrap} .sgmh-wrap .sgmh-art .submenu .sub-item:hover{background:var(--bg-2)} .sgmh-wrap .sgmh-art .submenu .sub-item .meta{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-2);font-weight:700} .sgmh-wrap .sgmh-art .submenu .sub-item .meta.up{color:var(--green-deep)} .sgmh-wrap .sgmh-art .submenu .sub-item .meta.hot{color:var(--rose)} .sgmh-wrap .sgmh-art .mega-feat{padding:0;background:linear-gradient(180deg, #1c1812 0%, #0f0d09 100%);color:#f4ecd5;position:relative;overflow:hidden} .sgmh-wrap .sgmh-art .mega-feat::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 100% 0%, color-mix(in oklab, var(--gold) 38%, transparent), transparent 65%);pointer-events:none} .sgmh-wrap .sgmh-art .mega-feat .inner{position:relative;padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;height:100%} .sgmh-wrap .sgmh-art .mega-feat .feat-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#ffd271;width:max-content;margin:0} .sgmh-wrap .sgmh-art .mega-feat h5, .sgmh-wrap .sgmh-art .mega-feat .feat-h{font-family:'Inter Tight';font-weight:800;font-size:22px;letter-spacing:-0.022em;line-height:1.05;margin:6px 0 0;padding:0;color:#fbf6ea} .sgmh-wrap .sgmh-art .mega-feat h5 em, .sgmh-wrap .sgmh-art .mega-feat .feat-h em{font-style:normal;color:#ffd271} .sgmh-wrap .sgmh-art .mega-feat .feat-lead{margin:0;padding:0;color:#cfc7af;font-size:12.5px;line-height:1.45;font-weight:400} .sgmh-wrap .sgmh-art .mega-feat .feat-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px dashed rgba(255,255,255,.16);border-bottom:1px dashed rgba(255,255,255,.16);margin-top:auto} .sgmh-wrap .sgmh-art .mega-feat .feat-row .lg{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;background:linear-gradient(135deg,#7a3cff,#3517a3);flex:none} .sgmh-wrap .sgmh-art .mega-feat .feat-row .who{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0} .sgmh-wrap .sgmh-art .mega-feat .feat-row .who b{font-family:'Inter Tight';font-weight:700;font-size:14px;color:#fff} .sgmh-wrap .sgmh-art .mega-feat .feat-row .who small{font-size:11px;color:#a8a08a;font-weight:500} .sgmh-wrap .sgmh-art .mega-feat .feat-row .scr{font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:#1a1408;background:var(--gold);padding:4px 8px;border-radius:6px} .sgmh-wrap .sgmh-art .mega-feat .feat-cta{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--gold);color:#1a1408;border:0;padding:11px;border-radius:99px;font-family:'Inter';font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;line-height:1} .sgmh-wrap .sgmh-art .mega-feat .feat-cta:hover{background:#ffe19c} .sgmh-wrap .sgmh-art .mega-feat .feat-cta .feat-cta-label{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:1;display:inline-block} .sgmh-wrap .sgmh-art .mega-feat .terms{font-size:10.5px;color:#8d8570;text-align:center;line-height:1.4;margin:0;padding:0;font-weight:400} /* Stats list inside featured panel — replaces feat-row in narrow/methodology mode */ .sgmh-wrap .sgmh-art .mega-feat .feat-row-stats{flex-direction:column;align-items:stretch;gap:6px;border-top:0;border-bottom:0;padding:0;margin-top:auto} .sgmh-wrap .sgmh-art .mega-feat .feat-stat-row{display:flex;justify-content:space-between;font-size:11.5px;line-height:1.4} .sgmh-wrap .sgmh-art .mega-feat .feat-stat-row .lbl{color:#a8a08a} .sgmh-wrap .sgmh-art .mega-feat .feat-stat-row b{color:#fff;font-weight:700;font-family:'Inter Tight'} .sgmh-wrap .sgmh-art .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 22px;background:#f3eddc;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)} .sgmh-wrap .sgmh-art .mega-foot .left{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .sgmh-wrap .sgmh-art .mega-foot b{color:var(--ink-0);font-weight:700} .sgmh-wrap .sgmh-art .mega-foot .updot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in oklab, var(--green) 30%, transparent);animation:upDot 1.4s infinite} .sgmh-wrap .sgmh-art .mega-foot a.see-all{color:var(--ink-0);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px} .sgmh-wrap .sgmh-art .mega-foot a.see-all:hover{color:var(--gold-deep)} .sgmh-wrap .sgmh-art .mega-scrim{position:fixed;inset:0;top:72px;background:rgba(15,12,8,.18);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:48} .sgmh-wrap .sgmh-art .mega-scrim[data-on="true"]{opacity:1;pointer-events:auto} /* ═══════════════════════════════════════════════════════════ MOBILE BURGER + DRAWER ═══════════════════════════════════════════════════════════ */ .sgmh-wrap .sgmh-art .nav-burger{display:none;width:40px !important;height:40px !important;min-width:40px !important;min-height:40px !important;border-radius:12px !important;border:1px solid var(--line) !important;background:var(--bg-1) !important;align-items:center !important;justify-content:center !important;cursor:pointer;flex:none !important;margin-left:auto !important;padding:0 !important;box-shadow:var(--shadow-sm)} .sgmh-wrap .sgmh-art .nav-burger svg{ width:22px !important; height:22px !important; color:var(--ink-0) !important; stroke:currentColor !important; fill:none !important; flex:none !important; display:block !important; } .sgmh-wrap .sgmh-art .nav-burger svg path{ stroke:currentColor !important; fill:none !important; stroke-width:2 !important; stroke-linecap:round !important; } .sgmh-wrap .sgmh-art .mobile-drawer{position:fixed;inset:0;z-index:80;background:rgba(15,12,8,.5);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s} .sgmh-wrap .sgmh-art .mobile-drawer[data-open="true"]{opacity:1;pointer-events:auto} .sgmh-wrap .sgmh-art .mobile-drawer .panel{position:absolute;top:0;right:0;bottom:0;width:100%;max-width:none;background:var(--bg-1);box-shadow:-20px 0 60px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column} .sgmh-wrap .sgmh-art .mobile-drawer[data-open="true"] .panel{transform:translateX(0)} .sgmh-wrap .sgmh-art .md-head{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)} .sgmh-wrap .sgmh-art .md-head .title{font-family:'Inter Tight';font-weight:800;font-size:18px;letter-spacing:-0.02em;margin:0;padding:0;line-height:1.2} .sgmh-wrap .sgmh-art .md-close{width:36px;height:36px;border-radius:50%;background:var(--bg-2);border:0;display:grid;place-items:center;cursor:pointer;font-size:18px;color:var(--ink-0)} .sgmh-wrap .sgmh-art .md-body{padding:14px 16px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:4px} .sgmh-wrap .sgmh-art .md-body > a{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-radius:14px;color:var(--ink-0);text-decoration:none;font-family:'Inter Tight';font-weight:700;font-size:16px;line-height:1.2} .sgmh-wrap .sgmh-art .md-body > a:active{background:var(--bg-2)} .sgmh-wrap .sgmh-art .md-body > a .arr{color:var(--ink-2);font-size:14px} .sgmh-wrap .sgmh-art .md-body > a .badge{font-size:10px;font-weight:800;background:var(--gold);color:#1a1408;padding:3px 7px;border-radius:99px;letter-spacing:0.04em} .sgmh-wrap .sgmh-art .md-body > a .md-link-label{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;display:inline-block;flex:1 1 auto} .sgmh-wrap .sgmh-art .md-body hr{border:0;border-top:1px solid var(--line);margin:12px 0} .sgmh-wrap .sgmh-art .md-body .sub{font-size:12px;font-weight:700;color:var(--ink-2);letter-spacing:0.1em;text-transform:uppercase;padding:6px 14px;margin:0} .sgmh-wrap .sgmh-art .md-foot{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px} .sgmh-wrap .sgmh-art .md-foot .cta{background:var(--ink-0);color:#fff;border:0;padding:14px;border-radius:99px;font-family:'Inter Tight';font-weight:800;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1} .sgmh-wrap .sgmh-art .md-foot .cta .cta-label{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:1;display:inline-block} .sgmh-wrap .sgmh-art .md-foot .country-row{display:flex !important;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);margin:0;padding:0;font-weight:400} .sgmh-wrap .sgmh-art .md-foot .country-row .flag-au{display:inline-block;width:22px;height:14px;border-radius:2px;background:linear-gradient(#012169,#012169);position:relative} .sgmh-wrap .sgmh-art .md-foot .country-row .flag-au::after{content:"★";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:#fff;font-size:8px} /* ═══════════════════════════════════════════════════════════ DRAWER ACCORDION (native

) ═══════════════════════════════════════════════════════════ */ .sgmh-wrap .sgmh-art details.md-row{display:block;width:100%;box-sizing:border-box;border-radius:14px;background:transparent;transition:background .2s;margin:0} .sgmh-wrap .sgmh-art details.md-row[open]{background:#efeadd} .sgmh-wrap .sgmh-art summary.md-row-h{ -webkit-appearance:none;-moz-appearance:none;appearance:none; display:flex;align-items:center;gap:10px;width:100%; box-sizing:border-box;padding:14px; background:transparent;cursor:pointer; font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px; color:#16140f;text-align:left;border-radius:14px;line-height:1.2; letter-spacing:-0.012em;min-height:52px; list-style:none; user-select:none;-webkit-user-select:none; } .sgmh-wrap .sgmh-art summary.md-row-h::-webkit-details-marker{display:none} .sgmh-wrap .sgmh-art summary.md-row-h::marker{display:none;content:""} .sgmh-wrap .sgmh-art summary.md-row-h:active{background:#e6dfcc} .sgmh-wrap .sgmh-art summary.md-row-h .md-row-h-label{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;display:inline-block;flex:0 1 auto} .sgmh-wrap .sgmh-art summary.md-row-h .badge{ display:inline-block;font-size:10px;font-weight:800; background:oklch(0.72 0.15 75);color:#1a1408; padding:3px 7px;border-radius:99px;letter-spacing:0.04em; } .sgmh-wrap .sgmh-art summary.md-row-h .crt{margin-left:auto;color:#6c6552;transition:transform .25s ease;flex:none} .sgmh-wrap .sgmh-art details.md-row[open] summary.md-row-h .crt{transform:rotate(180deg);color:oklch(0.56 0.16 60)} .sgmh-wrap .sgmh-art .md-row-body{ display:grid; grid-template-columns:1fr 1fr; gap:6px 8px; padding:8px 10px 14px; animation:sgmhRowOpen .25s ease; } @keyframes sgmhRowOpen{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} } .sgmh-wrap .sgmh-art .md-row-body .md-sub-h{ grid-column:1 / -1; font-family:'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:10px; color:#6c6552;letter-spacing:0.14em;text-transform:uppercase; margin:8px 2px 2px;display:flex;align-items:center;gap:8px; } .sgmh-wrap .sgmh-art .md-row-body .md-sub-h:first-child{margin-top:2px} .sgmh-wrap .sgmh-art .md-row-body .md-sub-h::after{content:"";flex:1;height:1px;background:linear-gradient(to right, #cdc4ad, transparent)} .sgmh-wrap .sgmh-art .md-row-body a{ display:flex;align-items:center;gap:8px; padding:9px 10px;border-radius:10px; color:#3a362b;text-decoration:none; font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;line-height:1.2; background:linear-gradient(180deg,#ffffff,#fbf8f0); border:1px solid #e7e0cf; box-shadow:0 1px 2px rgba(22,20,15,.04); min-width:0; min-height:46px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .sgmh-wrap .sgmh-art .md-row-body a:active{ transform:scale(.97); background:#ffffff; border-color:oklch(0.72 0.15 75); box-shadow:0 2px 8px rgba(202,138,4,.18); } .sgmh-wrap .sgmh-art .md-row-body a .icn{ width:26px;height:26px;border-radius:7px; background:linear-gradient(160deg,#f6f3ec,#ffffff); display:grid;place-items:center;flex:none;color:#3a362b; font-family:'Inter Tight',sans-serif;font-weight:800;font-size:10.5px; border:1px solid #e7e0cf; } .sgmh-wrap .sgmh-art .md-row-body a .nm{ display:flex;align-items:center;gap:5px;flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:1.2; } .sgmh-wrap .sgmh-art .md-row-body a .pill{ font-size:8.5px;font-weight:800;background:oklch(0.60 0.18 22);color:#fff; padding:2px 6px;border-radius:99px;letter-spacing:0.04em;text-transform:uppercase;flex:none; } .sgmh-wrap .sgmh-art .md-row-body a .pill.gold{background:oklch(0.72 0.15 75);color:#1a1408} .sgmh-wrap .sgmh-art .md-row-body a .pill.green{background:oklch(0.55 0.14 150);color:#fff} @media (max-width: 430px){ .sgmh-wrap .sgmh-art .md-row-body{gap:5px 6px;padding:6px 8px 12px} .sgmh-wrap .sgmh-art .md-row-body a{padding:8px 9px;font-size:12px;min-height:44px;gap:7px} .sgmh-wrap .sgmh-art .md-row-body a .icn{width:24px;height:24px;font-size:10px} .sgmh-wrap .sgmh-art .md-row-body a .pill{font-size:8px;padding:2px 5px} } @keyframes upDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}} /* RESPONSIVE — switch to mobile burger + hide nav-links/mega/CTA at ≤980px. Every rule needs !important here because the desktop layout above also uses !important (to defeat theme stylesheets). */ @media (max-width: 980px){ .sgmh-wrap .sgmh-art .nav-links{display:none !important} .sgmh-wrap .sgmh-art .mega-bar, .sgmh-wrap .sgmh-art .mega-scrim{display:none !important} .sgmh-wrap .sgmh-art .nav{height:64px !important;gap:10px !important} .sgmh-wrap .sgmh-art .nav-burger{display:inline-flex !important} .sgmh-wrap .sgmh-art .nav-cta{display:none !important} .sgmh-wrap .sgmh-art .country{display:none !important} } @media (max-width: 640px){ .sgmh-wrap .sgmh-art .wrap{padding:0 18px} } @media (max-width: 420px){ .sgmh-wrap .sgmh-art .wrap{padding:0 14px} } /* ═══════════════════════════════════════════════════════════ SITE FOOTER (sgmh_footer widget) — ported 1:1 from footer.html Scoped under .sgmh-art .ft so it works in BOTH the header's fixed .sgmh-wrap AND the footer's static .sgmh-wrap-static. Design tokens are (re)declared on the static wrapper below so a standalone footer page (no header) still has --ink-0 / --gold etc. Dark multi-col · trust badges · responsible-gambling · legal nav. ═══════════════════════════════════════════════════════════ */ /* Footer static wrapper — edge-to-edge, no sticky, own token scope. */ .sgmh-wrap-static{width:100%;margin:0;padding:0} .sgmh-wrap-static .sgmh-art, .sgmh-wrap-static .sgmh-art *{box-sizing:border-box} .sgmh-wrap-static .sgmh-art{ --bg-0:#f6f3ec;--bg-1:#ffffff;--bg-2:#efeadd;--bg-3:#e6dfcc; --line:#e7e0cf;--line-2:#cdc4ad; --ink-0:#16140f;--ink-1:#3a362b;--ink-2:#6c6552;--ink-3:#a39c84; --gold:oklch(0.72 0.15 75);--gold-deep:oklch(0.56 0.16 60); --green:oklch(0.55 0.14 150);--green-deep:oklch(0.42 0.13 150);--rose:oklch(0.60 0.18 22); --shadow-sm:0 1px 2px rgba(22,20,15,.06); --shadow-md:0 1px 0 rgba(22,20,15,.04),0 10px 28px -14px rgba(22,20,15,.18); font-family:'Inter','Inter Variable',system-ui,sans-serif; -webkit-font-smoothing:antialiased;color:var(--ink-0);position:relative; } .sgmh-wrap-static .sgmh-art *{font-family:inherit} .sgmh-wrap-static .sgmh-art a{color:inherit} .sgmh-art .ft{background:var(--ink-0);color:#cfc7b1;padding:56px 0 24px;font-size:13.5px} .sgmh-art .ft .wrap{max-width:max(1400px, var(--sg-band, 1400px));margin:0 auto;padding:0 24px} .sgmh-art .ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)} .sgmh-art .ft-brand{display:flex;flex-direction:column;gap:14px;max-width:300px} .sgmh-art .ft-brand .logo{display:flex;align-items:center;gap:10px;font-family:'Inter Tight';font-weight:800;font-size:21px;color:#fff} .sgmh-art .ft-brand .logo .mk{width:36px;height:36px;border-radius:10px;background:#1f1c14;display:grid;place-items:center;flex:none} .sgmh-art .ft-brand .logo .ft-brand-name{font:inherit;color:inherit;margin:0;padding:0;line-height:1.1} .sgmh-art .ft-brand p{margin:0;color:#a8a08a;line-height:1.5;font-size:13px} .sgmh-art .ft-brand .socials{display:flex;gap:8px;margin-top:4px} .sgmh-art .ft-brand .socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#cfc7b1;text-decoration:none;transition:.15s} .sgmh-art .ft-brand .socials a:hover{background:rgba(255,255,255,.12);color:#fff} .sgmh-art .ft-col .ft-col-h5{font-family:'Inter Tight';font-weight:700;font-size:13px;color:#fff;letter-spacing:0.06em;text-transform:uppercase;margin:0 0 14px;padding:0} .sgmh-art .ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .sgmh-art .ft-col li{margin:0;padding:0} .sgmh-art .ft-col a{color:#a8a08a;text-decoration:none;font-size:13.5px} .sgmh-art .ft-col a:hover{color:#fff} .sgmh-art .ft-mid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.08)} .sgmh-art .ft-mid-hd{color:#fff;font-family:'Inter Tight';font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;margin:0 0 12px;padding:0} .sgmh-art .ft-licenses{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .sgmh-art .ft-licenses .lic{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#cfc7b1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:10px;font-weight:600} .sgmh-art .ft-resp{font-size:12.5px;color:#a8a08a;line-height:1.6} .sgmh-art .ft-resp p{font-size:12.5px;color:#a8a08a;line-height:1.6;margin:0} .sgmh-art .ft-resp b{color:#fff;font-weight:700} .sgmh-art .ft-resp .orgs{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap} .sgmh-art .ft-resp .orgs span{font-family:'Inter Tight';font-weight:700;font-size:13px;color:#fff;background:rgba(255,255,255,.06);padding:5px 10px;border-radius:6px} .sgmh-art .ft-bot{display:flex;align-items:center;justify-content:space-between;padding-top:24px;flex-wrap:wrap;gap:14px;font-size:12px;color:#8d8570} .sgmh-art .ft-bot .ft-copy{margin:0;padding:0;font:inherit;color:inherit} .sgmh-art .ft-bot .legal{display:flex;gap:18px;flex-wrap:wrap} .sgmh-art .ft-bot .legal a{color:#cfc7b1;text-decoration:none} .sgmh-art .ft-bot .legal a:hover{color:#fff} /* Footer responsive — 1100 / 768 / 430 / 375 (1:1 from source) */ @media (max-width: 1100px){ .sgmh-art .ft-top{grid-template-columns:1fr 1fr 1fr;gap:24px} .sgmh-art .ft-brand{grid-column:1/-1} .sgmh-art .ft-mid{grid-template-columns:1fr} } @media (max-width: 768px){ .sgmh-art .ft{padding:36px 0 22px;font-size:13px} .sgmh-art .ft .wrap{padding:0 20px} .sgmh-art .ft-top{grid-template-columns:1fr 1fr!important;gap:22px 18px!important;padding-bottom:24px} .sgmh-art .ft-brand{grid-column:1/-1;max-width:none;align-items:center;text-align:center;gap:12px;padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)} .sgmh-art .ft-brand .logo{justify-content:center;font-size:22px} .sgmh-art .ft-brand .logo .mk{width:38px;height:38px} .sgmh-art .ft-brand p{font-size:13px;line-height:1.55;max-width:38ch} .sgmh-art .ft-brand .socials{justify-content:center;gap:10px;margin-top:4px} .sgmh-art .ft-brand .socials a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);font-size:14px;transition:transform .15s, background .15s} .sgmh-art .ft-brand .socials a:active{transform:scale(.92);background:rgba(207,165,72,.2)} .sgmh-art .ft-col .ft-col-h5{font-size:11px;color:#e0c98a;letter-spacing:0.1em;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)} .sgmh-art .ft-col ul{gap:9px} .sgmh-art .ft-col a{font-size:13px;line-height:1.3;display:inline-block;padding:1px 0} .sgmh-art .ft-col a:active{color:#e0c98a} .sgmh-art .ft-mid{gap:20px!important;padding:22px 0!important} .sgmh-art .ft-mid-hd{font-size:12px!important;letter-spacing:0.1em!important;margin-bottom:10px!important} .sgmh-art .ft-licenses{gap:8px} .sgmh-art .ft-licenses .lic{font-size:11.5px;padding:7px 11px;border-radius:9px} .sgmh-art .ft-resp{font-size:12.5px;line-height:1.55} .sgmh-art .ft-resp p{font-size:12.5px;line-height:1.55;margin:0} .sgmh-art .ft-resp .orgs{gap:7px;margin-top:10px} .sgmh-art .ft-resp .orgs span{font-size:11.5px;padding:5px 10px;border-radius:6px} .sgmh-art .ft-bot{flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:20px;font-size:11.5px;line-height:1.5} .sgmh-art .ft-bot .ft-copy{max-width:34ch;color:#8d8570} .sgmh-art .ft-bot .legal{justify-content:center;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;font-weight:500} .sgmh-art .ft-bot .legal a{color:#cfc7b1;text-decoration:none;padding:2px 0} .sgmh-art .ft-bot .legal a:active{color:#e0c98a} } @media (max-width: 430px){ .sgmh-art .ft{padding:30px 0 20px} .sgmh-art .ft .wrap{padding:0 18px} .sgmh-art .ft-top{gap:18px 14px!important;padding-bottom:20px} .sgmh-art .ft-brand{padding-bottom:20px;gap:10px} .sgmh-art .ft-brand .logo{font-size:20px} .sgmh-art .ft-brand p{font-size:12.5px;max-width:34ch} .sgmh-art .ft-brand .socials a{width:36px;height:36px;font-size:13px} .sgmh-art .ft-col .ft-col-h5{font-size:10.5px;letter-spacing:0.08em;margin:0 0 10px;padding-bottom:7px} .sgmh-art .ft-col ul{gap:8px} .sgmh-art .ft-col a{font-size:12.5px} .sgmh-art .ft-mid{gap:18px!important;padding:20px 0!important} .sgmh-art .ft-licenses{gap:7px} .sgmh-art .ft-licenses .lic{font-size:11px;padding:6px 10px} .sgmh-art .ft-resp p{font-size:12px} .sgmh-art .ft-resp .orgs span{font-size:11px;padding:4px 9px} .sgmh-art .ft-bot{gap:12px;padding-top:18px;font-size:11px} .sgmh-art .ft-bot .legal{font-size:11.5px;gap:6px 14px} } @media (max-width: 375px){ .sgmh-art .ft .wrap{padding:0 16px} .sgmh-art .ft-top{gap:16px 12px!important} .sgmh-art .ft-col .ft-col-h5{font-size:10px} .sgmh-art .ft-col a{font-size:12px} .sgmh-art .ft-licenses .lic{font-size:10.5px;padding:6px 9px} }