/* The world the app sits in, matching the landing page: a scene (sky, sun or moon, weather, and hills with the habitat's scenery) fixed behind every screen, glassy navigation over it, and chunky game cards and buttons on top. The scene's colours are set on by scenes.js. */ /* ---------- the scenery layer ---------- */ .scenery { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, var(--s0) 0%, var(--s1) 55%, var(--s2) 100%); } .scenery.in { animation: scene-in .9s ease-out; } @keyframes scene-in { from { opacity: 0; } } .shell { position: relative; z-index: 1; } .scenery .sky-layer .cloud { opacity: .7; } .scenery .sky-layer .cloud:not(.near) { opacity: .42; } .scenery .flock-sky .fb { stroke: #5E627E; opacity: .5; } html.scene-dark .sky-layer .cloud { opacity: .07; } html.scene-dark .sky-layer .cloud:not(.near) { opacity: .05; } .sc-orb { position: absolute; border-radius: 50%; translate: -50% -50%; } .sc-orb.sun { width: 240px; height: 240px; background: radial-gradient(circle, #FFF8D6 0 36%, #FFD978 58%, rgba(255, 190, 90, 0) 71%); animation: orb-glow 6s ease-in-out infinite; } .sc-orb.pale { width: 190px; height: 190px; background: radial-gradient(circle, #FFFDF2 0 34%, rgba(255, 255, 255, .55) 52%, rgba(255, 255, 255, 0) 70%); } .sc-orb.moon { width: 96px; height: 96px; background: radial-gradient(circle at 35% 35%, #FFFBEA, #F3E6B8); box-shadow: 0 0 70px 20px rgba(255, 240, 190, .22); } .sc-orb.moon::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(200, 180, 120, .3); top: 50%; left: 56%; box-shadow: -30px -22px 0 -3px rgba(200, 180, 120, .25); } @keyframes orb-glow { 50% { scale: 1.06; } } .sc-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; } .sc-far { position: absolute; left: 0; bottom: 48px; width: 100%; height: 110px; fill: var(--far); } .sc-hills .scene { position: absolute; left: 0; bottom: 0; width: 100%; height: 128px; } .sc-hills .scene .g2 { fill-opacity: 1; fill: var(--hill); } .sc-hills .scene g { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-sway 4.5s ease-in-out infinite; } .sc-hills .scene g:nth-of-type(2n) { animation-delay: -1.6s; animation-duration: 5.5s; } @keyframes sc-sway { 50% { rotate: 2.5deg; } } /* Weather. Falling things start above the top edge and are spread out by negative delays. */ .sc-bits { position: absolute; inset: 0; } .sb { position: absolute; left: var(--x); top: -6%; display: block; } .sb.petal, .sb.leaf, .sb.snow { animation: sb-fall calc(10s + var(--r) * 8s) linear infinite; animation-delay: calc(var(--i) * -1.7s); } .sb.petal { width: 11px; height: 7px; border-radius: 80% 0 80% 0; background: #F4A3B8; } .sb.petal:nth-child(3n) { background: #FAD0DC; } .sb.leaf { width: 13px; height: 8px; border-radius: 100% 0 100% 0; background: #D9A441; animation-duration: calc(12s + var(--r) * 8s); } .sb.leaf:nth-child(2n) { background: #7FB85A; } .sb.leaf:nth-child(5n) { background: #C9663A; } .sb.snow { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; animation-duration: calc(14s + var(--r) * 10s); } .sb.snow:nth-child(3n) { width: 4px; height: 4px; opacity: .7; } @keyframes sb-fall { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4vw, 55vh) rotate(260deg); } to { transform: translate(-2vw, 112vh) rotate(540deg); } } .sb.rain { width: 2px; height: 20px; border-radius: 2px; background: rgba(255, 255, 255, .6); rotate: 12deg; animation: sb-rain calc(.7s + var(--r) * .5s) linear infinite; animation-delay: calc(var(--i) * -.13s); } @keyframes sb-rain { to { transform: translate(-6vw, 112vh); } } .sb.bubble { top: auto; bottom: -4%; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); animation: sb-rise calc(9s + var(--r) * 7s) ease-in infinite; animation-delay: calc(var(--i) * -1.4s); } @keyframes sb-rise { 50% { transform: translate(2vw, -55vh); } to { transform: translate(-1vw, -110vh); opacity: .2; } } .sb.dust { top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 236, 200, .85); animation: sb-drift calc(14s + var(--r) * 8s) linear infinite; animation-delay: calc(var(--i) * -2s); } @keyframes sb-drift { from { transform: translateX(-10vw); } to { transform: translateX(110vw); } } .sb.star { top: calc(var(--y) * .62); width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: sb-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); } .sb.star:nth-child(4n) { width: 3px; height: 3px; } @keyframes sb-twinkle { 50% { opacity: .15; scale: .6; } } .sb.firefly { top: calc(55% + var(--y) * .35); width: 6px; height: 6px; border-radius: 50%; background: #FFF3A0; box-shadow: 0 0 10px 3px rgba(255, 240, 150, .7); animation: sb-wander calc(6s + var(--r) * 5s) ease-in-out infinite alternate, sb-twinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); } @keyframes sb-wander { to { transform: translate(6vw, -8vh); } } .sb.mist { top: calc(35% + var(--i) * 12%); left: -40%; width: 80vw; height: 20vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); animation: sb-drift calc(40s + var(--i) * 12s) linear infinite; animation-delay: calc(var(--i) * -11s); } .sb.aurora { inset: -10% -10% 45%; left: -10%; top: -10%; background: linear-gradient(100deg, transparent 15%, rgba(80, 240, 180, .45) 38%, rgba(120, 140, 255, .4) 58%, transparent 80%); filter: blur(14px); animation: sb-aurora 8s ease-in-out infinite alternate; } @keyframes sb-aurora { to { transform: translateX(8%) skewX(-8deg); opacity: .6; } } /* Dark scenes use the app's night colours whatever the system setting. */ html.scene-dark { color-scheme: dark; --sky: #14172E; --paper: #1C2042; --ink: #ECEBFA; --ink-2: #BDBEDC; --ink-3: #8D90B4; --rule: #2E3360; --rule-strong: #444A80; --yolk-soft: #4A3B16; --miss: #555A84; --rail: #0E1024; --ivory: #F3F0E6; --ebony: #0E1024; --leaf-ink: #5BC894; --amber-ink: #E7A24A; --berry: #E0607F; --focus: var(--yolk); } html.scene-dark .key { border-color: transparent; } /* ---------- navigation over the scene ---------- */ .rail { background: color-mix(in srgb, var(--rail) 80%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .tabbar { background: color-mix(in srgb, var(--rail) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* The sticky top bar is glass tinted with the top of the scene's sky, so it melts into it. */ .top { background: color-mix(in srgb, var(--s0, var(--sky)) 55%, transparent); } html.scene-dark .top { background: color-mix(in srgb, var(--s0) 70%, transparent); } /* On desktop the rail already stays on screen, so the bar scrolls away with the page: its chips and menu float on the sky with no glass strip behind them, and page headers (the journey's) stick to the very top. */ @media (min-width: 861px) { .top, html.scene-dark .top, html:not(.scene-dark) .top { position: relative; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: 0; } html { scroll-padding-top: 12px; } .jtop { top: 0; } } /* While feathers fly to the purse from further down the page, the bar drops back in to catch them. */ @media (min-width: 861px) { html.purse-peek .top { position: sticky; animation: purse-peek .3s cubic-bezier(.3,1.5,.5,1); } @keyframes purse-peek { from { translate: 0 -100%; } } } @media (min-width: 861px) and (prefers-reduced-motion: reduce) { html.purse-peek .top { animation: none; } } .view h1 { text-shadow: 0 2px 0 rgba(255, 255, 255, .3); } html.scene-dark .view h1 { text-shadow: none; } /* ---------- chunky cards ---------- */ :root { --lift: 0 6px 0 rgba(30, 35, 68, .1), 0 24px 40px -28px rgba(30, 35, 68, .55); } html.scene-dark, :root.scene-dark { --lift: 0 6px 0 rgba(0, 0, 0, .35), 0 24px 40px -28px rgba(0, 0, 0, .8); } .stave, .pcard, .meet, .nest-card, .chest, .feat, .badge-card, .cosy, .shop-panel .ware { border-radius: 22px; box-shadow: var(--lift); } .today { border-radius: 22px; box-shadow: inset 5px 0 0 var(--yolk), var(--lift); } .today.done { box-shadow: inset 5px 0 0 var(--leaf), var(--lift); } .card { border-radius: 20px; box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--c) 45%, transparent), var(--lift); } .board { box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--leaf) 40%, transparent), var(--lift); } .jhud { border-radius: 18px; box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--c) 55%, transparent), var(--lift); } .garden { box-shadow: inset 0 -6px 0 color-mix(in srgb, #8A5A2B 35%, transparent), var(--lift); } .bench { box-shadow: inset 0 -6px 0 color-mix(in srgb, #8A5A2B 30%, transparent), var(--lift); } .world-card { box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--c) 45%, transparent), var(--lift); } .purse { box-shadow: inset 0 -3px 0 var(--yolk), var(--lift); } .modal .panel { border-radius: 26px; box-shadow: 0 8px 0 rgba(30, 35, 68, .15), 0 40px 80px -30px rgba(10, 12, 40, .6); } .shop-tab { box-shadow: 0 3px 0 var(--rule-strong); } .shop-tab[aria-selected="true"] { box-shadow: 0 3px 0 #0B0E24; } /* ---------- buttons with a press ---------- */ .btn { box-shadow: 0 4px 0 rgba(0, 0, 0, .3); } .btn.sun { box-shadow: 0 4px 0 #D39A22; } .btn.go { box-shadow: 0 4px 0 #15603F; } .btn.quiet { background: color-mix(in srgb, var(--paper) 82%, transparent); box-shadow: 0 4px 0 var(--rule-strong); } .btn.quiet:hover:not(:disabled) { background: var(--paper); } .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); } .btn.sun:active:not(:disabled) { box-shadow: 0 1px 0 #D39A22; } .btn.quiet:active:not(:disabled) { box-shadow: 0 1px 0 var(--rule-strong); } .btn:disabled { box-shadow: none; } /* ---------- scenes in the shop, and the unlock moment ---------- */ .scene-thumb { position: relative; display: block; width: 132px; height: 84px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--s0), var(--s1) 60%, var(--s2)); box-shadow: inset 0 0 0 1px rgba(30, 35, 68, .08); } .scene-thumb .scene { position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; } .scene-thumb .scene .g2 { fill-opacity: 1; fill: var(--hill); } .scene-thumb.follow { display: flex; } .st-band { flex: 1; background: var(--c); } .st-orb { position: absolute; translate: -50% -50%; border-radius: 50%; } .st-orb.sun { width: 34px; height: 34px; background: radial-gradient(circle, #FFF8D6 0 36%, #FFD978 58%, rgba(255, 190, 90, 0) 71%); } .st-orb.pale { width: 30px; height: 30px; background: radial-gradient(circle, #FFFDF2 0 34%, rgba(255, 255, 255, 0) 70%); } .st-orb.moon { width: 16px; height: 16px; background: #FBF1CF; box-shadow: 0 0 12px 3px rgba(255, 240, 190, .35); } .journey-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; color: var(--ink-2); text-decoration: none; } .journey-tag .ic { width: 14px; height: 14px; } .scene-unlock { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 16px; } .su-preview { width: 100%; } .su-preview .scene-thumb { width: 100%; height: 170px; border-radius: 20px; animation: su-pop .7s cubic-bezier(.3, 1.6, .5, 1); } .su-preview .scene-thumb .scene { height: 60px; } .su-preview .st-orb.sun { width: 70px; height: 70px; } .su-preview .st-orb.moon { width: 34px; height: 34px; } @keyframes su-pop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } } .su-kicker { margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--yolk); color: var(--on-yolk); font-weight: 800; font-size: 13px; } .scene-unlock h2 { font-size: 30px; } @media (prefers-reduced-motion: reduce) { .sc-bits, .sc-hills .scene g, .sc-orb { animation: none !important; } .sc-bits .sb { animation: none !important; } .sc-bits .sb.rain, .sc-bits .sb.bubble, .sc-bits .sb.dust, .sc-bits .sb.mist { display: none; } .sc-bits .sb.petal, .sc-bits .sb.leaf, .sc-bits .sb.snow { top: var(--y); } .scenery.in, .su-preview .scene-thumb { animation: none; } } /* ---------- surfaces that used to be the flat page colour ---------- */ /* Sticky strips become glass tinted with the scene's sky; rows and cards that sat straight on the page become paper cards, so they read on any scene. */ .jtop { background: color-mix(in srgb, var(--s0, var(--sky)) 60%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .jtop { margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 0 0 20px 20px; } html.scene-dark .jtop { background: color-mix(in srgb, var(--s0) 75%, transparent); } @media (max-width: 860px) { .next-row { background: linear-gradient(to top, color-mix(in srgb, var(--s2, var(--sky)) 92%, transparent) 70%, transparent); } } .lcard, .lrow { background: var(--paper); box-shadow: var(--lift); } .lv-track > li, .podium li { background: color-mix(in srgb, var(--paper) 88%, transparent); } /* ---------- the journey, after a playthrough ---------- */ /* The result's buttons stay in reach at the bottom of the screen, so "Next song" never needs a scroll to find. On phones app.css already does this above the tab bar. */ @media (min-width: 861px) { .round .next-row { position: sticky; bottom: 14px; z-index: 5; margin: 0 -14px; padding: 12px 14px; border-radius: 22px; background: color-mix(in srgb, var(--paper) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px -18px rgba(30, 35, 68, .45); } } @media (max-width: 860px) { .round .next-row { background: linear-gradient(to top, color-mix(in srgb, var(--s2, var(--sky)) 94%, transparent) 72%, transparent); } } /* A pip per song in the stop: gold for three stars' worth, green for two, amber for one. */ .stop-pips { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: 1px; } .stop-pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); } .stop-pips i.p3 { background: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); } .stop-pips i.p2 { background: var(--leaf); } .stop-pips i.p1 { background: var(--amber); } .stop-pips i.p0 { background: var(--miss); } .stop-pips i.now { background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--yolk); animation: pip-now 1.1s ease-in-out infinite; } @keyframes pip-now { 50% { transform: scale(1.35); } } /* The stop's story, told on the song screen: the speaker's bird and their line. */ .story-strip { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; } .ss-line { display: flex; align-items: center; gap: 12px; padding: 10px 44px 10px 12px; border-radius: 18px; background: var(--paper); box-shadow: var(--lift); animation: ss-in .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.3s + var(--k) * .5s); } .ss-line .bird { width: 52px; height: 50px; flex: none; } .ss-line b { font-family: var(--serif); font-weight: 400; font-size: 17px; } .ss-line p { color: var(--ink-2); font-size: 15px; } @keyframes ss-in { from { opacity: 0; transform: translateY(10px) scale(.96); } } .ss-close { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); font-size: 22px; line-height: 1; } .ss-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .stop-pips i.now, .ss-line { animation: none; } } /* Once the answer is in, the story has been told: the result gets the space. */ .round:has(#next) .story-strip { display: none; } .story-strip.gone { opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; pointer-events: none; } /* On a phone the story floats over the top of the song card rather than pushing the keys down. */ @media (max-width: 860px) { .round { position: relative; } .story-strip { position: absolute; left: 0; right: 0; top: 46px; z-index: 6; margin: 0; } .ss-line { padding: 8px 40px 8px 10px; box-shadow: 0 12px 30px -12px rgba(30, 35, 68, .5); } .ss-line .bird { width: 40px; height: 38px; } .ss-line b { font-size: 15px; } .ss-line p { font-size: 14px; line-height: 1.35; } } /* ================= one world with the landing page ================= */ /* The landing page is sky and scenery with light, frosted things floating on it and chunky tiles with a coloured edge. The app now speaks the same language: no dark slab down the side. */ /* ---------- the sidebar: a frosted card floating on the sky ---------- */ .rail { top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border-radius: 26px; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 66%, transparent); --focus: var(--ink); box-shadow: 0 6px 0 rgba(30, 35, 68, .08), 0 24px 50px -30px rgba(30, 35, 68, .5); } .rail .wordmark { color: var(--ink); } .nav a { color: var(--ink-2); } .nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--paper) 70%, transparent); } .nav a.on { color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--yolk), 0 10px 20px -12px rgba(30, 35, 68, .45); } .nav a.on .ic { color: #E0A020; } .nav-group { color: var(--ink-3); font-weight: 600; } .rail-toggle { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); } .rail-toggle:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); } .shell.folded .nav-group { background: color-mix(in srgb, var(--ink) 12%, transparent); } .rail-plus { border-color: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink-2); background: color-mix(in srgb, var(--paper) 55%, transparent); } .rail-plus b { color: #B87A10; } .rail-foot a { color: var(--ink); } .nav a.has-gift::after, .tabbar a.has-gift::after { box-shadow: 0 0 0 2px var(--paper); } html.scene-dark .rail-plus b, html.scene-dark .nav a.on .ic { color: var(--yolk); } /* ---------- the phone tab bar: a frosted pill above the hills ---------- */ @media (max-width: 860px) { .tabbar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 24px; background: color-mix(in srgb, var(--paper) 72%, transparent); --focus: var(--ink); box-shadow: 0 6px 0 rgba(30, 35, 68, .1), 0 18px 40px -20px rgba(30, 35, 68, .55); } .tabbar a { color: var(--ink-2); } .tabbar a.on { color: var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--yolk); } .tabbar a.on .ic { color: #E0A020; } html.scene-dark .tabbar a.on .ic { color: var(--yolk); } .round .next-row { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } /* ---------- cards: the landing's tiles, a tinted rim and a thick coloured edge ---------- */ .today, .board, .card, .jhud, .world-card, .pcard, .meet, .cosy, .garden, .bench, .nest-card, .chest, .feat, .badge-card, .stave { border: 3px solid color-mix(in srgb, var(--edge, var(--rule-strong)) 26%, var(--paper)); border-bottom: 7px solid var(--edge, var(--rule-strong)); box-shadow: 0 22px 40px -28px rgba(30, 35, 68, .5); } .today { --edge: var(--yolk); } .today.done { --edge: var(--leaf); } .board { --edge: var(--leaf); } /* Home cards stay in the sunrise palette: no forest green. Today's song done is peach, the bird board is blossom pink, and the board's progress, count and claimed ticks follow it. The game keeps its green only where it means a note was right. */ .today.done { --edge: #F6B08F; box-shadow: 0 22px 40px -28px rgba(30, 35, 68, .5); } .board { --edge: #F2A6BE; box-shadow: 0 22px 40px -28px rgba(30, 35, 68, .5); } .bd-count { color: #B24C74; } .bt-body .meter i { background: linear-gradient(90deg, #F7B3C8, #F2A6BE); } .bd-task.claimed .bt-ic { background: #F2A6BE; color: #fff; } /* The journey card keeps the chapter's picture, but its wash, edge and stop dots are sunrise yellow to match its Continue button, rather than the chapter's colour (green in the Meadow). */ .jcard { background: linear-gradient(to right, color-mix(in srgb, var(--yolk) 16%, var(--paper)), var(--paper)); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--yolk) 55%, transparent); } .jc-strip i { border-color: color-mix(in srgb, var(--yolk) 80%, var(--amber)); } .jc-strip i.got { background: var(--yolk); } .card, .jhud, .world-card { --edge: var(--c, var(--rule-strong)); } .garden, .bench { --edge: #A0703C; } .stave.habitat { --edge: var(--hab); } .chest, .feat, .cosy { --edge: #E3B23C; } .pcard, .meet, .nest-card, .badge-card { --edge: color-mix(in srgb, var(--ink) 22%, var(--paper)); } html.scene-dark .today, html.scene-dark .board, html.scene-dark .card, html.scene-dark .stave { box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .8); } /* ---------- page titles: the landing's headline voice ---------- */ .view > h1, .view > section > h1, .view .shop-head h1, .jtop h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.02em; } /* On a phone the journey's pinned header stays short: world tabs on one swipeable line, a smaller title beside the star total. */ @media (max-width: 860px) { .jtop .world-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; } .jtop .world-tabs::-webkit-scrollbar { display: none; } .jtop .world-tabs a { flex: none; white-space: nowrap; } .jtop > .row.split { flex-wrap: nowrap; align-items: center !important; } .jtop h1 { font-size: 28px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jtop .jtotal { flex: none; font-size: 16px; } } .view h2 { letter-spacing: -.01em; } /* ---------- the map, between stops ---------- */ /* The stop just played gets its stars one by one, then the next stop's card bounces in. */ .node.earned .stars i.on { animation: star-land .55s cubic-bezier(.3, 1.9, .5, 1) both; animation-delay: calc(.35s + var(--k, 0) * .16s); } @keyframes star-land { 0% { transform: scale(0) translateY(-30px) rotate(-120deg); } 70% { transform: scale(1.5); } } .nextcard.arrive { animation: card-arrive .6s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes card-arrive { from { opacity: 0; transform: translateY(-60%) scale(.7); } } .nextcard.arrive [data-play] { animation: play-nudge 1.6s ease-in-out .7s infinite; } @keyframes play-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px) scale(1.06); } 90% { transform: translateY(1px); } } .nextcard { border: 3px solid color-mix(in srgb, var(--c) 26%, var(--paper)); border-bottom: 6px solid var(--c); box-shadow: 0 16px 30px -18px rgba(30, 35, 68, .5); } .nextcard .ms { color: var(--ink-2); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .node.earned .stars i.on, .nextcard.arrive, .nextcard.arrive [data-play] { animation: none; } } .rail .wordmark { font-size: 27px; gap: 8px; } .rail .wordmark .mark { width: 26px; height: 26px; } /* ---------- small fixes from a full playthrough ---------- */ /* An icon inside a small line of text (a lock beside "At Cosy nest") stays text-sized. */ .small > .ic, .muted > .ic, small > .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; flex: none; } /* Keyboard colours in the featured strip, as they look in the shop aisles. */ .feat .keys { display: flex; gap: 2px; height: 40px; width: 110px; align-items: flex-end; } .feat .keys i { flex: 1; height: 100%; background: var(--ivory); border: 1px solid var(--rule-strong); border-top: 0; border-radius: 0 0 4px 4px; box-shadow: inset 0 -6px 0 var(--c); } /* ---------- hear what you missed ---------- */ .coach { border: 3px solid color-mix(in srgb, var(--amber) 28%, var(--paper)); border-bottom: 7px solid var(--amber); border-radius: 22px; background: var(--paper); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 22px 40px -28px rgba(30, 35, 68, .5); animation: coach-in .5s cubic-bezier(.3, 1.4, .5, 1) .5s both; } @keyframes coach-in { from { opacity: 0; transform: translateY(12px); } } .coach-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .coach-head h3 { font-size: 21px; } .coach-shape { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--yolk) 18%, var(--paper)); max-width: none; } .coach ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .coach li { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; } .coach .cn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #fff; font-weight: 800; font-size: 14px; } .coach .cw { color: var(--ink-2); font-size: 15px; } .coach .cw b { color: var(--ink); font-weight: 700; } .ss-line.tip { border: 2px solid color-mix(in srgb, var(--yolk) 50%, var(--paper)); } @media (max-width: 560px) { .coach li { grid-template-columns: 26px 1fr; } .coach li .btn { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .coach { animation: none; } } /* On a phone the result lifts its most important parts to the top; the coaching joins the bird card there. */ @media (max-width: 860px) { #result > .coach { order: -2; } } /* ---------- pastel banners, like the welcome page ---------- */ /* Every mode's banner is its colour washed into warm cream, with the app's ink on top. Each mode names one accent (--mh-c); the gradient, badge ring and kicker all come from it. Colours are fixed, not tokens, so a banner reads the same over a dark scene. */ .m-ranked { --mh-c: #8E7CF0; } .m-puzzles { --mh-c: #4FC2AE; } .m-rush { --mh-c: #F48A6A; } .m-practice { --mh-c: #7CC47A; } .m-learn { --mh-c: #EE8AB0; } .m-leaders { --mh-c: #F2BE4A; } .m-worlds { --mh-c: #7FA8E8; } :where(.mode-hero) { --mh-c: #F2BE4A; } .mode-hero { --mh-ring: color-mix(in srgb, var(--mh-c) 85%, #1E2344); color: #1E2344; --mh-bg: linear-gradient(135deg, color-mix(in srgb, var(--mh-c) 16%, #FFFDF9), color-mix(in srgb, var(--mh-c) 30%, #FFF4EC) 60%, color-mix(in srgb, var(--mh-c) 46%, #FFEBDD)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mh-c) 30%, transparent), 0 6px 0 color-mix(in srgb, var(--mh-c) 34%, #FBE7B8); } .mode-hero .sky-layer .flock-sky .fb { stroke: rgba(30, 35, 68, .35); } .mh-text h1, html.scene-dark .mh-text h1 { color: #1E2344; text-shadow: none; } .mh-text .lede { color: #4A4F70; } .mh-kicker { background: rgba(255, 255, 255, .7); color: color-mix(in srgb, var(--mh-c) 55%, #1E2344); } .mh-kicker .ic { background: color-mix(in srgb, var(--mh-c) 30%, #fff); } .mode-hero .btn.quiet { color: #1E2344; border-color: color-mix(in srgb, var(--mh-c) 45%, transparent); background: rgba(255, 255, 255, .6); } .mb-ring { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 6px var(--mh-ring), 0 0 0 10px color-mix(in srgb, var(--mh-c) 18%, transparent); } @keyframes ring-glow { 50% { box-shadow: inset 0 0 0 6px var(--mh-ring), 0 0 0 16px color-mix(in srgb, var(--mh-c) 8%, transparent); } } .mb-ring .figure { color: #1E2344; } .mb-ring small { color: #4A4F70; } .mb-sub { color: #4A4F70; } .mh-fly .bird.flyer { filter: drop-shadow(0 6px 8px rgba(30, 35, 68, .15)); } /* The season pass offer: lilac to blush instead of a deep violet slab. */ .sp-upsell { background: linear-gradient(120deg, #ECE4FF, #FCE3EC); color: #4A4F70; box-shadow: inset 0 0 0 1.5px rgba(142, 124, 240, .25); --focus: #1E2344; } .sp-upsell b { color: #1E2344; } .sp-upsell > div:first-child { background: #fff; color: #B87A10; } /* ---------- the season track: one paper panel ---------- */ /* The whole timeline sits on a paper card. The label column is the same paper, so tiers slide under it without a tinted strip or seam; Free and Pass are small upright lane tags in it. Reward cards take the softer sky colour so they still stand out on the panel. */ /* On the frame, not the scroller: the scroller's edge-fade mask would fade the panel too. */ .sp-frame { background: var(--paper); border-radius: 22px; box-shadow: var(--lift); } .sp-lane { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: center; } .sp-lane::after { background: linear-gradient(90deg, var(--paper), transparent); } .lane-tag { writing-mode: vertical-rl; rotate: 180deg; display: flex; align-items: center; gap: 5px; padding: 12px 5px; border-radius: 999px; font: 700 13px var(--sans); text-transform: none; letter-spacing: 0; background: var(--sky); color: var(--ink-3); } .sp-lane.pass .lane-tag { background: #ECE4FF; color: #5A48C8; } .lane-tag svg { rotate: 180deg; } .sp-card { background: var(--sky); } /* At tier 0 the "You" marker starts on the rail's first point, over the label column's empty middle row. */ .sp-you { z-index: 4; } @media (max-width: 560px) { .lane-tag { font-size: 12px; padding: 10px 4px; } }