/* ================================================================= GENDER REVEAL — Design System & Effects Neutral/grey before the reveal (no spoilers); blooms into colour once gets the .revealed class. ================================================================= */ /* ---------- Design Tokens ---------- */ :root { /* Neutral pre-reveal palette */ --slate-1: #b9c0cc; --slate-2: #828c9e; --slate-3: #59617240; --pink-1: #ff8fc7; --pink-2: #ff5ea8; --pink-3: #ff2e83; --blue-1: #8fb8ff; --blue-2: #5e8bff; --blue-3: #2e5bff; --gold: #e9c46a; --ink: #2c313c; --ink-soft: #5b6473; /* Active accent — neutral by default, overwritten by .revealed */ --acc-1: var(--slate-1); --acc-2: var(--slate-2); --acc-3: #5b6678; --acc-glow: rgba(120, 132, 156, 0.40); --glass: rgba(255, 255, 255, 0.14); --glass-brd: rgba(255, 255, 255, 0.40); --font-display: "Poppins", "Segoe UI", system-ui, sans-serif; --font-script: "Pacifico", "Brush Script MT", cursive; --ease-spring: cubic-bezier(.22, 1.2, .36, 1); } /* ---- Revealed: GIRL (pink) ---- */ body.revealed { --acc-1: var(--pink-1); --acc-2: var(--pink-2); --acc-3: var(--pink-3); --acc-glow: rgba(255, 94, 168, 0.55); } /* ---- Revealed: BOY (blue) ---- */ body.revealed.theme-boy { --acc-1: var(--blue-1); --acc-2: var(--blue-2); --acc-3: var(--blue-3); --acc-glow: rgba(94, 139, 255, 0.55); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.gender-reveal-page { font-family: var(--font-display); color: var(--ink); min-height: 100vh; overflow-x: hidden; position: relative; -webkit-font-smoothing: antialiased; /* Neutral pearl-grey backdrop */ background: radial-gradient(1200px 700px at 15% -10%, #ffffff 0%, transparent 55%), radial-gradient(1000px 800px at 110% 10%, #cfd6e2 0%, transparent 50%), linear-gradient(160deg, #f4f6fa 0%, #e7ebf2 35%, #dde2ec 65%, #eef0f4 100%); background-attachment: fixed; transition: background 1.4s ease; } /* Bloom into colour after the reveal */ body.gender-reveal-page.revealed { background: radial-gradient(1200px 700px at 15% -10%, #fff 0%, transparent 55%), radial-gradient(1000px 800px at 110% 10%, var(--acc-1) 0%, transparent 50%), linear-gradient(160deg, #fff0f7 0%, #ffe3f1 30%, #ffd0e8 60%, #ffe9d6 100%); } body.gender-reveal-page.revealed.theme-boy { background: radial-gradient(1200px 700px at 15% -10%, #fff 0%, transparent 55%), radial-gradient(1000px 800px at 110% 10%, var(--acc-1) 0%, transparent 50%), linear-gradient(160deg, #eef4ff 0%, #dfeaff 30%, #cfe0ff 60%, #d6ecff 100%); } /* Defensive resets — the Divi parent theme is still loaded via wp_head(), so scope-override anything it might impose on our elements. */ body.gender-reveal-page .page, body.gender-reveal-page .page * { box-sizing: border-box; } body.gender-reveal-page a { color: inherit; text-decoration: none; box-shadow: none; } body.gender-reveal-page button { font-family: inherit; line-height: 1.2; letter-spacing: normal; text-transform: none; } body.gender-reveal-page input { font-family: inherit; line-height: normal; box-shadow: none; } body.gender-reveal-page h1, body.gender-reveal-page h2, body.gender-reveal-page p { padding: 0; color: inherit; } /* Remove any stray parent margin on this page */ body.gender-reveal-page { margin: 0 !important; } /* Animated aurora shimmer */ body.gender-reveal-page::before { content: ""; position: fixed; inset: -20%; z-index: 0; background: radial-gradient(40% 40% at 20% 30%, var(--acc-glow), transparent 60%), radial-gradient(35% 35% at 80% 20%, rgba(233,196,106,.30), transparent 60%), radial-gradient(45% 45% at 60% 90%, var(--acc-glow), transparent 60%); filter: blur(40px); animation: drift 18s ease-in-out infinite alternate; pointer-events: none; transition: background 1.4s ease; } @keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.04); } } /* ---------- Floating décor ---------- */ .decor { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .balloon { position: absolute; bottom: -160px; width: 60px; height: 76px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 30%, #ffffffcc, var(--acc-2) 60%, var(--acc-3)); box-shadow: inset -6px -8px 14px rgba(0,0,0,.10), 0 8px 24px var(--acc-glow); opacity: .55; animation: rise linear infinite; transition: background 1.4s ease; } .balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 90px; background: rgba(255,255,255,.6); transform: translateX(-50%); } .balloon::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: var(--acc-3); } @keyframes rise { 0% { transform: translateY(0) translateX(0) rotate(-4deg); } 50% { transform: translateY(-55vh) translateX(30px) rotate(4deg); } 100% { transform: translateY(-115vh) translateX(-10px) rotate(-2deg); } } .spark { position: absolute; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .7; animation: twinkle 3.5s ease-in-out infinite; } @keyframes twinkle { 0%,100% { transform: scale(.3) rotate(0deg); opacity: .12; } 50% { transform: scale(1) rotate(180deg); opacity: .85; } } /* ---------- Layout shell ---------- */ .page { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 5vw, 60px); text-align: center; } /* ---------- Glass card ---------- */ .glass { position: relative; background: var(--glass); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--glass-brd); border-radius: 28px; box-shadow: 0 20px 60px rgba(60, 70, 90, 0.18), inset 0 1px 0 rgba(255,255,255,.6); padding: clamp(28px, 5vw, 56px); max-width: 720px; width: 100%; animation: cardIn .9s var(--ease-spring) both; } @keyframes cardIn { 0% { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: blur(0); } } /* ---------- Typography ---------- */ .eyebrow { text-transform: uppercase; letter-spacing: .42em; font-size: clamp(11px, 1.6vw, 14px); font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; padding-left: .42em; } .script { font-family: var(--font-script); font-weight: 400; line-height: 1.05; font-size: clamp(38px, 8.5vw, 86px); background: linear-gradient(120deg, var(--acc-3), var(--acc-2), var(--gold), var(--acc-3)); background-size: 280% 280%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 18px var(--acc-glow)); animation: shine 8s ease infinite; } @keyframes shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } h1, h2 { font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .h-lg { font-size: clamp(26px, 4.5vw, 40px); } p.lead { font-size: clamp(16px, 2.3vw, 20px); color: var(--ink-soft); max-width: 48ch; margin: 18px auto 0; line-height: 1.6; } .hint { font-size: 13px; color: var(--ink-soft); margin-top: 12px; opacity: .85; } .question-mark { font-family: var(--font-script); font-size: clamp(90px, 22vw, 220px); line-height: 1; background: linear-gradient(135deg, var(--acc-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 30px var(--acc-glow)); animation: bob 4s ease-in-out infinite; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } } /* ---------- Buttons ---------- */ .btn { --b1: var(--acc-2); --b2: var(--acc-3); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 18px); color: #fff; padding: 16px 34px; border: none; border-radius: 999px; background: linear-gradient(120deg, var(--b1), var(--b2)); background-size: 200% 200%; cursor: pointer; text-decoration: none; box-shadow: 0 12px 30px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .25s var(--ease-spring), box-shadow .25s, background-position .5s, opacity .25s; position: relative; overflow: hidden; } .btn:hover { transform: translateY(-3px) scale(1.03); background-position: 100% 50%; box-shadow: 0 18px 44px var(--acc-glow); } .btn:active { transform: translateY(0) scale(.98); } .btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); } .btn:disabled:hover { transform: none; box-shadow: 0 12px 30px var(--acc-glow); } .btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-20deg); animation: sheen 3.5s ease-in-out infinite; } .btn:disabled::after { display: none; } @keyframes sheen { 0% { left: -60%; } 60%,100% { left: 130%; } } .btn.ghost { background: transparent; color: var(--acc-3); border: 2px solid var(--acc-2); box-shadow: none; } .btn.ghost::after { display: none; } .btn.ghost:hover { background: rgba(255,255,255,.4); } .btn-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } /* ---------- Step dots ---------- */ .steps { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; } .steps i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.6); border: 1px solid var(--acc-2); transition: .3s; } .steps i.on { background: var(--acc-2); box-shadow: 0 0 12px var(--acc-glow); transform: scale(1.25); } /* ---------- Countdown ---------- */ .countdown { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; margin-top: 28px; flex-wrap: wrap; } .cd-cell { background: rgba(255,255,255,.35); border: 1px solid var(--glass-brd); border-radius: 18px; padding: 14px clamp(10px, 2.5vw, 22px); min-width: 74px; backdrop-filter: blur(8px); } .cd-num { font-size: clamp(26px, 5vw, 44px); font-weight: 800; line-height: 1; color: var(--acc-3); font-variant-numeric: tabular-nums; text-shadow: 0 4px 14px var(--acc-glow); } .cd-lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; } /* ---------- Gender choice ---------- */ .choice-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .choice { flex: 1 1 200px; max-width: 260px; border: 2px solid transparent; border-radius: 24px; padding: 28px 20px; cursor: pointer; background: rgba(255,255,255,.32); transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s; position: relative; overflow: hidden; } .choice .emoji { font-size: 56px; line-height: 1; display: block; margin-bottom: 12px; transition: transform .4s var(--ease-spring); filter: drop-shadow(0 8px 16px rgba(0,0,0,.12)); } .choice .name { font-weight: 800; font-size: 22px; margin-top: 0; } .choice .pct { font-weight: 700; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; } .choice .bar { height: 8px; border-radius: 99px; background: rgba(0,0,0,.08); margin-top: 12px; overflow: hidden; } .choice .bar > i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .8s var(--ease-spring); } .choice.boy { --c1: var(--blue-2); --c2: var(--blue-3); } .choice.girl { --c1: var(--pink-2); --c2: var(--pink-3); } .choice .bar > i { background: linear-gradient(90deg, var(--c1), var(--c2)); } .choice:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.14); } .choice:hover .emoji { transform: scale(1.15) rotate(-6deg); } .choice.selected { border-color: var(--c2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 25%, transparent), 0 18px 40px rgba(0,0,0,.16); } .choice.selected::before { content: "✓"; position: absolute; top: 12px; right: 16px; font-weight: 900; color: var(--c2); font-size: 22px; } /* ---------- Inputs ---------- */ .field { margin-top: 22px; } .field input { width: 100%; font-family: var(--font-display); font-size: 18px; padding: 16px 20px; border-radius: 16px; border: 2px solid var(--glass-brd); background: rgba(255,255,255,.55); color: var(--ink); outline: none; transition: .25s; } .field input:focus { border-color: var(--acc-2); box-shadow: 0 0 0 4px var(--acc-glow); background: #fff; } .field input::placeholder { color: #9aa3b2; } /* ---------- Reveal stage ---------- */ .reveal-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; } /* When the reveal fires, the card drops out of view so ONLY the reveal text is left on screen. */ .gr-stage.fall-away { animation: fallAway 0.95s cubic-bezier(.5, .05, .6, 1) forwards; pointer-events: none; } @keyframes fallAway { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 35% { transform: translateY(-4vh) rotate(-1deg); opacity: 1; } 100% { transform: translateY(125vh) rotate(7deg); opacity: 0; } } .tap-orb { --size: clamp(200px, 42vw, 320px); width: var(--size); height: var(--size); border-radius: 50%; border: none; cursor: pointer; position: relative; background: radial-gradient(circle at 35% 30%, #fff, var(--slate-2) 55%, #5b6678); box-shadow: 0 0 0 0 var(--acc-glow), 0 30px 70px var(--acc-glow); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: clamp(18px, 3vw, 26px); text-shadow: 0 2px 10px rgba(0,0,0,.25); animation: heartbeat 1.4s ease-in-out infinite; transition: transform .2s; } .tap-orb span { line-height: 1.2; } .tap-orb small { display:block; font-weight:600; font-size: 13px; opacity:.85; letter-spacing:.2em; text-transform:uppercase; margin-top:6px; } .tap-orb:hover { transform: scale(1.04); } .tap-orb:active { transform: scale(.96); } .tap-orb:disabled { cursor: default; } @keyframes heartbeat { 0%, 100% { box-shadow: 0 0 0 0 var(--acc-glow), 0 30px 70px var(--acc-glow); } 50% { box-shadow: 0 0 0 26px transparent, 0 30px 90px var(--acc-glow); } } /* Suspense overlay */ .suspense { position: fixed; inset: 0; z-index: 40; background: rgba(18, 20, 26, 0); display: grid; place-items: center; pointer-events: none; opacity: 0; transition: background 1.2s, opacity .4s; } .suspense.show { opacity: 1; pointer-events: all; background: rgba(18, 20, 26, .85); } .suspense .pulse { font-family: var(--font-script); font-size: clamp(40px, 9vw, 90px); color: #fff; text-align: center; animation: suspensePulse 1.1s ease-in-out infinite; } @keyframes suspensePulse { 0%,100% { opacity: .4; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } } /* Big result */ .result { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .6s; } .result.show { opacity: 1; pointer-events: all; } .result .inner { text-align: center; transform: scale(.6); transition: transform 1s var(--ease-spring); } .result.show .inner { transform: scale(1); } .result .big { font-family: var(--font-script); font-size: clamp(48px, 13vw, 150px); line-height: .95; background: linear-gradient(120deg, var(--acc-3), var(--acc-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 12px 40px var(--acc-glow)); animation: shine 6s ease infinite; } .result .sub { font-size: clamp(18px, 3vw, 28px); color: #fff; margin-top: 10px; font-weight: 600; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .result .verdict { margin-top: 22px; display: inline-block; background: rgba(255,255,255,.92); color: var(--ink); padding: 14px 26px; border-radius: 999px; font-weight: 700; box-shadow: 0 16px 40px rgba(0,0,0,.3); } /* Confetti + click hearts */ #gr-confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; } .heart-burst { position: fixed; z-index: 60; pointer-events: none; font-size: 22px; animation: floatHeart 1.2s ease-out forwards; } @keyframes floatHeart { 0% { transform: translateY(0) scale(.6); opacity: 1; } 100% { transform: translateY(-120px) scale(1.3); opacity: 0; } } /* Footer / utilities */ .foot { margin-top: 28px; font-size: 13px; color: var(--ink-soft); } .hidden { display: none !important; } .fade-up { animation: fadeUp .8s var(--ease-spring) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ================================================================= Responsive — tablet & mobile ================================================================= */ @media (max-width: 768px) { .glass { padding: 30px 22px; } .choice { flex: 1 1 140px; } } @media (max-width: 540px) { .page { padding: 14px; } .glass { padding: 24px 18px; border-radius: 22px; } .eyebrow { letter-spacing: .26em; } .script { font-size: clamp(32px, 13vw, 52px); } .question-mark { font-size: clamp(72px, 30vw, 130px); } .h-lg { font-size: clamp(21px, 6.4vw, 30px); } p.lead { font-size: 15px; line-height: 1.55; } /* countdown: 4 compact cells that always fit */ .countdown { gap: 7px; margin-top: 22px; } .cd-cell { min-width: 0; flex: 1 1 0; padding: 10px 6px; } .cd-num { font-size: clamp(20px, 6.6vw, 30px); } .cd-lbl { font-size: 9px; letter-spacing: .12em; } /* gender choices stay two-up */ .choice-row { gap: 12px; margin-top: 22px; } .choice { flex: 1 1 0; max-width: none; padding: 18px 10px; border-radius: 20px; } .choice .emoji { font-size: 42px; margin-bottom: 8px; } .choice .name { font-size: 17px; } .choice .pct { font-size: 14px; } .field input { font-size: 16px; padding: 14px 16px; } /* buttons stack full-width and are easy to tap */ .btn-row { gap: 12px; margin-top: 26px; flex-direction: column; align-items: stretch; } .btn { width: 100%; justify-content: center; padding: 15px 22px; font-size: 16px; } .tap-orb { --size: min(72vw, 290px); font-size: 20px; } .result { padding: 18px; } .result .big { font-size: clamp(40px, 17vw, 92px); } .result .sub { font-size: 16px; } .result .verdict { font-size: 14px; padding: 12px 18px; } .suspense .pulse { font-size: clamp(38px, 16vw, 80px); } } /* very small / older phones */ @media (max-width: 360px) { .script { font-size: 30px; } .choice .emoji { font-size: 40px; } .cd-lbl { font-size: 8px; } } /* short landscape — keep the orb from overflowing */ @media (max-height: 560px) and (orientation: landscape) { .page { padding: 18px; } .tap-orb { --size: min(38vh, 220px); } .question-mark { font-size: 90px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } .gr-stage.fall-away { opacity: 0; } }