/* geogou splash — tokens + animation One SVG, two themes. Theme switches via [data-theme] on (or .gg-splash). Requires the logo markup INLINE in the DOM (an cannot be styled). */ :root { /* --- brand tiles (identical in both themes) --- */ --gg-red: #E63329; --gg-yellow: #F5C300; --gg-blue: #1A47B8; /* --- dark theme (default) --- */ --gg-bg: #000000; --gg-ink: #FAF9F5; /* wordmark */ --gg-sub: #C2C0B6; /* STUDIO */ --gg-glow-opacity: 0.42; /* --- layout --- */ --gg-logo-width: 72vw; /* clamp below caps it on tablets */ --gg-logo-max: 780px; --gg-gap: 12vh; /* logo -> loading dots */ --gg-dot: 26px; } [data-theme="light"] { --gg-bg: #FAF9F5; --gg-ink: #171614; --gg-sub: #6E6C64; --gg-glow-opacity: 0.20; } /* wide / landscape (site on desktop): keep the logo close to the header's size */ @media (min-aspect-ratio: 1/1) { :root { --gg-logo-width: 46vw; --gg-logo-max: 620px; --gg-gap: 9vh; } } /* ---------- easings (authored curves, do not substitute) ---------- */ :root { --gg-ease-enter: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */ --gg-ease-draw: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */ --gg-ease-pop: cubic-bezier(0.340, 1.560, 0.640, 1.000); /* easeOutBack */ } /* ---------- shell ---------- */ .gg-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gg-gap); background: var(--gg-bg); overflow: hidden; font-family: Roboto, -apple-system, system-ui, sans-serif; /* Capacitor: keep clear of notches */ padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); } /* warm flash behind the tiles when they lock */ .gg-glow { position: absolute; left: 50%; top: 44%; width: min(1000px, 130vw); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(245,195,0,0.34) 0%, rgba(230,51,41,0.14) 30%, rgba(26,71,184,0.05) 48%, rgba(0,0,0,0) 66%); animation: gg-glow 0.80s linear 1.30s both; } .gg-stack { display: flex; flex-direction: column; align-items: center; gap: var(--gg-gap); } #gg-logo { display: block; width: min(var(--gg-logo-width), var(--gg-logo-max)); overflow: visible; /* tiles fly in from outside the box */ /* the site variant hands the logo over to the header instead of drifting */ animation: none; } /* type baked into the SVG (Roboto must be bundled locally for offline WebView) */ #gg-word-geo, #gg-word-gou { font-family: Roboto, sans-serif; font-size: 32px; letter-spacing: -0.01em; } #gg-word-geo { font-weight: 400; } #gg-word-gou { font-weight: 500; } #gg-tagline { font-family: Roboto, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.90em; opacity: 0; animation: gg-tagline 0.55s var(--gg-ease-enter) 2.70s both; } /* ---------- tiles ---------- */ .gg-tile { transform-box: fill-box; transform-origin: center; opacity: 0; animation: gg-tile-in 0.85s var(--gg-ease-pop) var(--gg-delay) both, gg-fade 0.28s linear var(--gg-delay) both; } .gg-tile-box { /* separate node so the lock pulse doesn't fight the fly-in transform */ transform-box: fill-box; transform-origin: center; animation: gg-tile-settle 0.32s ease-in-out var(--gg-settle-delay) both; } /* ---------- wordmark wipe ---------- */ #gg-wordmark { transform-box: fill-box; clip-path: inset(0 100% 0 0); animation: gg-wipe 0.75s var(--gg-ease-draw) 2.10s both, gg-shift 0.90s var(--gg-ease-draw) 2.10s both; } /* ---------- loading dots ---------- */ .gg-dots { display: flex; gap: 30px; opacity: 0; animation: gg-fade-slow 0.60s var(--gg-ease-enter) 3.25s both; } .gg-dots i { width: var(--gg-dot); height: var(--gg-dot); border-radius: calc(var(--gg-dot) * 0.27); animation: gg-dot-pulse 0.667s ease-in-out infinite both; } .gg-dots i:nth-child(1) { background: var(--gg-red); animation-delay: 3.25s; } .gg-dots i:nth-child(2) { background: var(--gg-yellow); animation-delay: 3.37s; } .gg-dots i:nth-child(3) { background: var(--gg-blue); animation-delay: 3.49s; } /* ---------- exit ---------- */ /* fixed-length variant (4.8s, matches the reference video / loop seam) */ .gg-splash.is-timed .gg-stack { animation: gg-out 0.35s var(--gg-ease-enter) 4.40s both; } /* app-driven exit: add .is-done when the app is ready */ .gg-splash { transition: opacity 0.35s var(--gg-ease-enter), visibility 0.35s, background-color 0.5s var(--gg-ease-enter); } .gg-splash.is-done { opacity: 0; visibility: hidden; } /* ---------- hand-off: the logo flies to its place in the header ---------- */ .gg-splash.is-transfer { background-color: transparent; } .gg-splash.is-transfer .gg-glow, .gg-splash.is-transfer .gg-dots { opacity: 0; transition: opacity 0.22s linear; animation: none; } #header img.gg-handover { opacity: 0; } /* ---------- keyframes ---------- */ @keyframes gg-tile-in { from { transform: translate(var(--gg-dx), var(--gg-dy)) rotate(var(--gg-rot)) scale(0.5); } to { transform: translate(0, 0) rotate(0deg) scale(1); } } @keyframes gg-tile-settle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } @keyframes gg-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes gg-shift { from { transform: translateX(-7px); } to { transform: translateX(0); } } @keyframes gg-tagline { from { opacity: 0; letter-spacing: 0.90em; } to { opacity: 1; letter-spacing: 0.35em; } } @keyframes gg-glow { 0% { opacity: 0; } 35% { opacity: var(--gg-glow-opacity); } 100% { opacity: calc(var(--gg-glow-opacity) * 0.34); } } @keyframes gg-dot-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes gg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes gg-fade-slow { from { opacity: 0; } to { opacity: 1; } } @keyframes gg-out { from { opacity: 1; } to { opacity: 0; } } @keyframes gg-drift { from { transform: scale(1); } to { transform: scale(1.035); } } /* ---------- accessibility ---------- */ @media (prefers-reduced-motion: reduce) { .gg-splash *, .gg-splash *::before { animation-duration: 0.01ms !important; animation-delay: 0s !important; } .gg-glow { opacity: calc(var(--gg-glow-opacity) * 0.34); } }