/* Welcome page. Shown when has .view-landing. Toggled by src/ui/view.js — everything studio-related is hidden, the hero shows. Visual language mirrors Tomodachi Life's title screen: chunky rounded letterforms, sticker-style offset shadows, wobbly blob backdrop, scattered sparkle decorations. */ .landing { display: none; } .view-landing .landing { display: block; } .view-landing .app { display: none; } .view-studio .landing { display: none; } .landing { padding: 2.5rem 1.25rem 4rem; max-width: 760px; margin: 0 auto; position: relative; } .landing-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; } /* Wrapper that sizes the blob and centers the wordmark inside it. Keeping them in the same box means the title stays optically centered regardless of viewport width. */ .landing-blob-wrap { position: relative; z-index: 1; width: min(490px, 92%); height: clamp(200px, 40vw, 270px); display: flex; align-items: center; justify-content: center; /* Optically nudge the wordmark down so it sits in the blob's opaque centre (the SVG has ~13% top padding vs ~6% bottom, which pulls the visual centre slightly below geometric centre). */ padding-top: 4%; } /* Irregular hand-drawn blob behind the wordmark. Path is intentionally lumpy so it reads as a hand-drawn sticker rather than a rounded rectangle. Absolute-fills its wrap. */ .landing-blob { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-2deg); z-index: 0; filter: drop-shadow(5px 6px 0 var(--ink)); overflow: visible; pointer-events: none; } .landing-blob .blob-fill { fill: var(--sun); stroke: none; } .landing-blob .blob-grid-overlay { fill: url(#blob-grid); stroke: none; } .landing-blob .blob-outline { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linejoin: round; } /* Sticker-as-overlay — straddles the blob's lower edge to create depth, like a price tag stuck over the bottom of a sign. Negative margin-top pulls it up into the blob; margin-bottom separates it from the tagline. Rotated the opposite way from the blob so they read as two distinct stickers layered together. */ .landing-sticker-badge { position: relative; z-index: 3; display: inline-flex; flex-direction: column; align-items: center; padding: 0.7rem 1.5rem 0.65rem; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px; font-family: 'Fredoka', sans-serif; letter-spacing: 0.01em; box-shadow: 4px 4px 0 var(--ink); line-height: 1.1; white-space: nowrap; /* Pull-up so the sticker straddles the blob's lower edge — about a quarter of the sticker's height sits inside the blob, the rest hangs below. */ margin-top: -2.25rem; margin-bottom: 0; } .landing-sticker-game { font-weight: 700; font-size: 1.15rem; color: var(--ink); } .landing-sticker-sub { font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.09em; } /* Wordmark. "Living the" is a small serif-weight prefix; "Grid" is four rainbow sticker letters with heavy outlines and offset shadows, each rotated differently for the hand-placed feel. */ .landing-title { position: relative; z-index: 2; font-family: 'Fredoka', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 0.1em; margin: 0; } .lt-prefix { font-weight: 600; font-size: clamp(1.3rem, 3.8vw, 1.8rem); color: var(--ink); letter-spacing: -0.01em; transform: rotate(-1.5deg); } .lt-grid { display: inline-flex; align-items: flex-end; gap: 0.02em; font-weight: 700; font-size: clamp(4rem, 13vw, 6.5rem); line-height: 0.9; padding: 0 0.1em; } .lt-grid > span { position: relative; display: inline-block; /* Solid letter colour, no text-stroke on this element. The outline is drawn by a ::before pseudo-element with ink fill + ink stroke, so Fredoka's compound glyph subpaths (e.g. the bowl + leg of 'R', bowl + stem of 'd') don't produce visible seams — text-stroke would outline each subpath separately. */ color: var(--letter, var(--sun)); -webkit-text-fill-color: var(--letter, var(--sun)); /* Stacked sticker extrusion: tight paper-white lift, then the ink shadow, then a warm coral ambient glow. Mirrors the Tomodachi Life: Living the Dream logo's layered offset treatment. */ filter: drop-shadow(0 2px 0 var(--paper)) drop-shadow(5px 5px 0 var(--ink)) drop-shadow(7px 9px 0 rgba(255, 140, 121, 0.45)); transform: rotate(var(--rot, 0deg)) translateY(var(--ty, 0)); transition: transform 0.3s var(--ease-back); } .lt-grid > span::before { position: absolute; inset: 0; z-index: -1; color: var(--ink); -webkit-text-fill-color: var(--ink); -webkit-text-stroke: 3px var(--ink); } .lt-grid > span[data-c="coral"]::before { content: "G"; } .lt-grid > span[data-c="teal"]::before { content: "r"; } .lt-grid > span[data-c="violet"]::before { content: "i"; } .lt-grid > span[data-c="sun"]::before { content: "d"; } .lt-grid > span[data-c="coral"] { --letter: var(--coral); --rot: -5deg; --ty: -2px; } .lt-grid > span[data-c="teal"] { --letter: var(--teal); --rot: 3deg; --ty: 4px; } .lt-grid > span[data-c="violet"] { --letter: var(--violet); --rot: -3deg; --ty: -1px; } .lt-grid > span[data-c="sun"] { --letter: var(--sky); --rot: 4deg; --ty: 3px; } .lt-grid:hover > span { transform: rotate(var(--rot, 0deg)) translateY(calc(var(--ty, 0) - 4px)); } /* Compact variant for the topbar. Keeps the same colours, tilts, and outline treatment, but at small sizes the pixel grid pattern becomes illegible noise — so we revert to solid colour fill. */ .lt-grid-tiny { font-size: 1.5rem; line-height: 1; padding: 0; gap: 0; align-items: baseline; } .lt-grid-tiny > span { color: var(--letter, var(--sun)); -webkit-text-fill-color: var(--letter, var(--sun)); background: none; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; filter: drop-shadow(2px 2px 0 rgba(43, 30, 15, 0.28)); } .lt-grid-tiny > span::before { content: none; } .lt-grid-tiny > span[data-c="coral"] { --ty: -1px; } .lt-grid-tiny > span[data-c="teal"] { --ty: 1px; } .lt-grid-tiny > span[data-c="violet"] { --ty: -1px; } .lt-grid-tiny > span[data-c="sun"] { --ty: 1px; } /* Scattered decorative stickers — sized + positioned so they frame the title without crowding it. aria-hidden in the HTML keeps them off the a11y tree. */ .landing-sparkle { position: absolute; z-index: 1; font-family: 'Fredoka', sans-serif; font-size: 1.6rem; filter: drop-shadow(2px 2px 0 var(--ink)); pointer-events: none; user-select: none; } .landing-sparkle-1 { top: 0.2rem; left: 6%; transform: rotate(-12deg); } .landing-sparkle-2 { top: 1.2rem; right: 8%; transform: rotate(14deg); color: var(--coral); } .landing-sparkle-3 { top: 8.5rem; left: 4%; transform: rotate(8deg); color: var(--pink); } .landing-sparkle-4 { top: 7.5rem; right: 5%; transform: rotate(-10deg); color: var(--violet); } .landing-tag { position: relative; z-index: 2; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: clamp(0.95rem, 2.2vw, 1.08rem); color: var(--ink-soft); max-width: 520px; line-height: 1.5; margin-top: 0; } .landing-tag em { font-style: normal; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 6px; padding: 0 0.35em; font-weight: 600; color: var(--ink); } /* The primary CTA is the drop zone itself — everything on this page funnels the visitor toward putting an image in. */ .landing-drop { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; width: min(100%, 520px); padding: 2rem 1.5rem; background-color: var(--paper); border: 3px dashed var(--ink); border-radius: 20px; cursor: pointer; color: var(--ink); transition: background-color 0.15s ease, transform 0.25s var(--ease-back), border-color 0.15s ease; } .landing-drop:hover { background-color: var(--cream); transform: translate(-1px, -1px); } .landing-drop.is-dragging { background-color: var(--sun); border-style: solid; transform: translate(-1px, -1px); } .landing-drop-ico { width: 2rem; height: 2rem; color: var(--ink); display: block; } .landing-drop-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem; line-height: 1.2; } .landing-drop-hint { font-family: 'Fredoka', sans-serif; font-weight: 500; color: var(--ink-muted); font-size: 0.8rem; } .landing-demo { position: relative; z-index: 2; padding: 0.55rem 1rem; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 100px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.12s ease; } .landing-demo:hover { background: var(--sun); } .landing-privacy { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; max-width: 520px; padding: 0.7rem 1rem; background: #D3ECB6; background: color-mix(in srgb, var(--lime) 45%, var(--paper)); border: 2px solid var(--ink); border-radius: 12px; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 0.84rem; color: var(--ink); line-height: 1.4; text-align: left; box-shadow: 2px 2px 0 var(--ink); } .landing-privacy-ico { font-size: 1rem; flex-shrink: 0; } .landing-features { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.65rem; width: 100%; max-width: 640px; position: relative; z-index: 2; } .landing-features li { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 0.7rem 0.9rem; box-shadow: 2px 2px 0 var(--ink); display: flex; flex-direction: column; gap: 0.2rem; text-align: left; transition: transform 0.3s var(--ease-back), box-shadow 0.3s var(--ease-back); } .landing-features li:nth-child(1) { transform: rotate(-1deg); } .landing-features li:nth-child(3) { transform: rotate(1deg); } .landing-features li:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); } .landing-features li:nth-child(1):hover { transform: rotate(-2deg) translate(-2px, -2px); } .landing-features li:nth-child(3):hover { transform: rotate(2deg) translate(-2px, -2px); } .landing-features li b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--ink); } .landing-features li span { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.35; } @media (max-width: 520px) { .landing { padding: 1rem 0.9rem 2.5rem; } .landing-sparkle { font-size: 1.2rem; } .landing-sparkle-3, .landing-sparkle-4 { top: 6rem; } .landing-drop { padding: 1.4rem 1rem; } }