/* PolyGotcha site. Ink-on-paper palette lifted from the app: warm off-white canvas and near-black ink in light mode, lifted charcoal and soft white in dark. One design system for the landing page and the privacy policy. */ :root { --bg: #f7f6f3; --ink: #1a1c20; --muted: rgba(26, 28, 32, 0.6); --faint: rgba(26, 28, 32, 0.38); --hairline: rgba(26, 28, 32, 0.12); --glass: rgba(247, 246, 243, 0.68); --card: #ffffff; } /* The theme toggle stamps data-theme on ; absent means auto. The manual choice must win over the system preference in both directions, hence the explicit dark block plus the :not() guard on the media query. */ :root[data-theme="dark"] { --bg: #121316; --ink: #f2f2ef; --muted: rgba(242, 242, 239, 0.62); --faint: rgba(242, 242, 239, 0.4); --hairline: rgba(242, 242, 239, 0.14); --glass: rgba(18, 19, 22, 0.62); --card: #1a1b1f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121316; --ink: #f2f2ef; --muted: rgba(242, 242, 239, 0.62); --faint: rgba(242, 242, 239, 0.4); --hairline: rgba(242, 242, 239, 0.14); --glass: rgba(18, 19, 22, 0.62); --card: #1a1b1f; } } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--ink); color: var(--bg); } /* ---------- Nav: the floating glass pill plus the theme bubble ---------- */ .navwrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none; } .navwrap > * { pointer-events: auto; } .nav { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--hairline); transition: box-shadow 0.4s ease, background 0.4s ease; white-space: nowrap; } .theme-bubble, .lang-bubble { width: 53px; height: 53px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--hairline); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: box-shadow 0.4s ease, color 0.25s ease, transform 0.25s ease; flex-shrink: 0; } .theme-bubble:hover, .lang-bubble:hover { color: var(--ink); transform: scale(1.06); } .lang-bubble { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; } .lang-wrap { position: relative; } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; display: none; flex-direction: column; min-width: 158px; padding: 6px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--hairline); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); } .lang-menu.open { display: flex; } .lang-menu button { font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; color: var(--muted); background: none; border: none; border-radius: 12px; padding: 9px 14px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .lang-menu button:hover { color: var(--ink); background: var(--hairline); } .lang-menu button.active { color: var(--ink); font-weight: 650; } .theme-bubble svg { width: 21px; height: 21px; fill: currentColor; transition: transform 0.3s ease; animation: theme-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .theme-bubble:hover svg { transform: rotate(18deg); } /* The icon shows the theme you are IN: an amber sun or a periwinkle moon, popping in with a spin every time the theme flips. */ .theme-bubble.is-light svg { fill: #f5a81c; } .theme-bubble.is-dark svg { fill: #93a5ff; } @keyframes theme-pop { from { transform: rotate(-130deg) scale(0.3); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .theme-bubble svg { animation: none; transition: none; } } .navwrap.scrolled .nav, .navwrap.scrolled .theme-bubble { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .nav .wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; font-size: 16px; margin-right: 14px; } /* The real app icon, so the compressed mobile nav still reads as the logo. */ .nav .mark { width: 26px; height: 26px; border-radius: 8px; display: block; object-fit: cover; } .nav .links { display: flex; align-items: center; gap: 2px; } .nav .links a { font-size: 14px; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: 999px; transition: color 0.25s ease, background 0.25s ease; } .nav .links a:hover { color: var(--ink); background: var(--hairline); } .nav .cta { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 999px; margin-left: 10px; transition: transform 0.25s ease, opacity 0.25s ease; } .nav .cta:hover { transform: scale(1.04); } .nav .cta-icon { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Mobile nav: the ends collapse to icons (the app icon and a download glyph). With two bubbles alongside, the Support link (email is in the footer) yields on phones. Long localized labels (French) can outgrow a narrow pill, so the row is allowed to wrap: the bubbles drop to a second centered line instead of anything getting cropped. */ @media (max-width: 640px) { .navwrap { top: 10px; gap: 6px; padding: 0 10px; flex-wrap: wrap; row-gap: 8px; } .nav { padding: 5px 5px 5px 8px; gap: 0; max-width: 100%; } .nav .wordmark { margin-right: 4px; } .nav .wordmark .name { display: none; } .nav .mark { width: 30px; height: 30px; border-radius: 9px; } .nav .links a { font-size: 13px; padding: 7px 8px; } .nav .links .sup { display: none; } .nav .cta { margin-left: 4px; padding: 0; width: 40px; height: 40px; } .nav .cta-text { display: none; } .nav .cta-icon { display: block; } .theme-bubble, .lang-bubble { width: 44px; height: 44px; } .theme-bubble svg { width: 19px; height: 19px; } .lang-bubble { font-size: 11.5px; } } /* Very narrow screens with long localized labels: tighten the links a notch further so the pill itself never clips. */ @media (max-width: 400px) { .nav .links a { font-size: 12px; padding: 7px 6px; letter-spacing: -0.01em; } .nav .wordmark { margin-right: 2px; } } /* The binding-text note only carries information on translated views. */ html[lang="en"] [data-i18n="priv.note"] { display: none; } /* ---------- Shared layout ---------- */ /* Horizontal padding only, deliberately via longhand: the shorthand form once zeroed every section's vertical padding by specificity, which is why the page looked cramped. */ .wrap { max-width: 1060px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } section { padding: clamp(80px, 11vw, 140px) 0; } /* ---------- Hero ---------- */ .hero { padding-top: clamp(140px, 22vw, 220px); padding-bottom: clamp(40px, 6vw, 80px); text-align: center; } .hero h1 { font-size: clamp(2.9rem, 9vw, 6.2rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; max-width: 14ch; margin: 0 auto; } .hero h1 .theirs { color: var(--faint); } .hero p { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5; color: var(--muted); max-width: 34ch; margin: 28px auto 0; letter-spacing: -0.01em; } .hero .cta-row { margin-top: 38px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .pill { display: inline-block; background: var(--ink); color: var(--bg); font-size: 16px; font-weight: 600; padding: 15px 28px; border-radius: 999px; letter-spacing: -0.01em; } /* The App Store download badge: the pill with the store glyph in front. */ .store-pill { display: inline-flex; align-items: center; gap: 10px; transition: transform 0.25s ease; } .store-pill:hover { transform: scale(1.04); } .store-pill .applogo { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* Anchored jumps must land below the floating nav, never behind it. */ [id] { scroll-margin-top: 120px; } .hero .quiet-link { font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; } .hero .quiet-link:hover { color: var(--ink); border-color: var(--ink); } /* ---------- The keyboard demo ---------- */ /* The device is sized against the viewport (94vw), so the section sheds the wrap's side padding: inside the padded box, 94vw outgrows the content width on phones and the overflow leans right, off-center. */ .demo { padding-top: 0; padding-left: 0; padding-right: 0; } .device { width: min(430px, 94vw); margin: 0 auto; background: #0b0c0e; border-radius: 40px; padding: 22px 12px 12px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.28), 0 4px 18px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .chat { padding: 4px 10px 14px; min-height: 108px; } .bubble { display: inline-block; background: #24262b; color: #e8e8e4; font-size: 15px; line-height: 1.35; padding: 9px 14px; border-radius: 18px; border-bottom-left-radius: 6px; max-width: 80%; } .compose { display: flex; align-items: center; gap: 8px; margin: 14px 2px 0; background: #1a1b1f; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; padding: 9px 14px; min-height: 40px; } .compose .text { font-size: 15px; color: #f0f0ec; line-height: 1.35; min-height: 20px; } .compose .caret { display: inline-block; width: 2px; height: 17px; background: #6ea8ff; vertical-align: text-bottom; margin-left: 1px; animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Keyboard chrome mirrors the real thing: bar of glass controls, then the key grid with gaps drawn inside each cell. Always dark, like the app's marketing shots, whatever the page's scheme. */ .kbd { background: #17181c; border-radius: 26px; padding: 10px 6px 8px; margin-top: 12px; } .kbar { display: flex; align-items: center; gap: 7px; padding: 2px 4px 9px; } .kchip { font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: #ececec; background: rgba(255, 255, 255, 0.09); padding: 8px 12px; border-radius: 999px; flex-shrink: 0; } .kchip .arrows { opacity: 0.55; font-weight: 500; padding: 0 2px; } .kstatus { flex: 1; font-size: 12.5px; color: rgba(236, 236, 236, 0.55); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kstatus .preview { display: inline-block; color: #101114; background: #ececec; font-weight: 600; padding: 7px 12px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .kround { width: 38px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); color: #ececec; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; } .kround.prime { background: #ececec; color: #101114; } .krow { display: flex; } .key { flex: 1 1 0; height: 42px; margin: 2.5px 2px; background: #2a2c31; border-radius: 7px; color: #f0f0ec; font-size: 16px; display: grid; place-items: center; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); transition: background 0.09s ease, transform 0.09s ease; text-transform: uppercase; font-weight: 400; user-select: none; } .key.special { flex-grow: 1.35; background: #202226; font-size: 12px; } .key.space { flex-grow: 4.2; font-size: 12px; text-transform: none; color: rgba(240, 240, 236, 0.6); } .key.hit { background: #4b4e55; transform: scale(0.96); } .krow.indent { padding: 0 5%; } /* ---------- Feature statements ---------- */ .feature { text-align: center; } .feature .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin-bottom: 22px; } .feature h2 { font-size: clamp(2rem, 5.4vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.06; font-weight: 700; max-width: 18ch; margin: 0 auto; } .feature p { font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.6; color: var(--muted); max-width: 46ch; margin: 24px auto 0; } .langline { font-size: clamp(1.6rem, 4.4vw, 2.8rem); letter-spacing: -0.03em; font-weight: 600; color: var(--faint); margin-top: 34px; } .langline em { font-style: normal; color: var(--ink); } /* ---------- Split features and their animated line drawings ---------- */ /* Below the demo, each statement pairs its text with a big illustration: inline SVG line art, so the drawings inherit the theme via currentColor and cost no requests. The blue accent is the demo caret's blue. Every animation is transform or opacity only, waits for the section's reveal to fire (.in), and is disabled entirely under reduced motion, where the resting markup already shows each drawing's finished state. */ .feature.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(36px, 6vw, 80px); text-align: left; } .feature.split h2 { margin: 0; } .feature.split p { margin: 22px 0 0; } .feature.split .langline { margin-top: 30px; } .feature.split .fig { display: grid; place-items: center; } .feature.split.flip .fig { order: -1; } @media (max-width: 720px) { .feature.split { grid-template-columns: 1fr; gap: 40px; text-align: center; } .feature.split .fig, .feature.split.flip .fig { order: -1; } .feature.split h2, .feature.split p { margin-left: auto; margin-right: auto; } } .art { display: block; width: min(330px, 72vw); height: auto; color: var(--ink); } @media (max-width: 720px) { .art { width: min(240px, 62vw); } } .art .ln { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .art .dim { color: var(--faint); } .art .acc { stroke: #6ea8ff; } .art .skel { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; } /* The lock: an OS boundary orbiting a shut padlock, the crossed-out cloud drifting outside it. */ .art-lock .keyhole { fill: currentColor; } .art-lock .pulse { stroke: #6ea8ff; stroke-width: 3; opacity: 0; } .art-lock .slash { stroke-dasharray: 82 82; } .art-lock .orbit, .art-lock .cloud, .art-lock .pulse { transform-box: fill-box; transform-origin: center; } .fig.in .art-lock .orbit { animation: art-orbit 70s linear infinite; } .fig.in .art-lock .shackle { animation: art-shut 0.8s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .fig.in .art-lock .cloud { animation: art-bob 7s 1.2s ease-in-out infinite; } .fig.in .art-lock .slash { animation: art-draw 0.5s 0.9s ease both; } .fig.in .art-lock .pulse { animation: art-pulse 3.8s 1.4s ease-out infinite; } /* The chip: a breathing Apple Intelligence glint inside marching dashes, two small sparks twinkling in the corners. */ .art-chip .spark4 { fill: currentColor; } .art-chip .ring { opacity: 0.85; } .art-chip .spark, .art-chip .mini { transform-box: fill-box; transform-origin: center; } .fig.in .art-chip .ring { animation: art-march 12s linear infinite; } .fig.in .art-chip .spark { animation: art-breathe 5s ease-in-out infinite; } .fig.in .art-chip .m1 { animation: art-twinkle 2.8s 0.4s ease-in-out infinite; } .fig.in .art-chip .m2 { animation: art-twinkle 3.6s 1.3s ease-in-out infinite; } /* The exchange: typing dots become the sent translation on one shared clock, and the plane takes off in the gap between the two phases. */ .art-send .bfill { fill: currentColor; } .art-send .dots { opacity: 0; } .art-send .dots circle { fill: var(--bg); } .art-send .sent path { stroke: var(--bg); } .art-send .plane path { fill: #6ea8ff; } .art-send .inbubble, .art-send .plane { transform-box: fill-box; transform-origin: center; } .art-send .dots circle:nth-of-type(2) { animation-delay: 0.16s; } .art-send .dots circle:nth-of-type(3) { animation-delay: 0.32s; } .fig.in .art-send .inbubble { animation: art-bob 9s ease-in-out infinite; } .fig.in .art-send .dots { animation: art-turn-dots 7.5s linear infinite; } .fig.in .art-send .dots circle { animation: art-dot 1.05s ease-in-out infinite; } .fig.in .art-send .sent { animation: art-turn-sent 7.5s linear infinite; } .fig.in .art-send .plane { animation: art-fly 7.5s cubic-bezier(0.3, 0, 0.4, 1) infinite; } @keyframes art-orbit { to { transform: rotate(360deg); } } @keyframes art-shut { from { transform: translateY(-16px); } to { transform: translateY(0); } } @keyframes art-bob { 50% { transform: translateY(-7px); } } @keyframes art-draw { from { stroke-dashoffset: 82; } to { stroke-dashoffset: 0; } } @keyframes art-pulse { 0% { transform: scale(0.62); opacity: 0.5; } 70% { opacity: 0; } 100% { transform: scale(1.06); opacity: 0; } } /* The offset step is a multiple of the 26px dash period, so the loop restart lands exactly on pattern and never visibly jumps. */ @keyframes art-march { to { stroke-dashoffset: -364; } } @keyframes art-breathe { 50% { transform: scale(1.08) rotate(7deg); } } @keyframes art-twinkle { 0%, 100% { opacity: 0.22; transform: scale(0.72); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes art-dot { 35% { transform: translateY(-7px); } } @keyframes art-turn-dots { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } } @keyframes art-turn-sent { 0%, 46% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes art-fly { 0%, 46% { opacity: 0; transform: translate(-10px, 10px) scale(0.7); } 54% { opacity: 1; transform: translate(0, 0) scale(1); } 64% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(38px, -38px) scale(1); } } @media (prefers-reduced-motion: reduce) { .art g, .art path, .art circle, .art rect { animation: none !important; } } /* ---------- Manifesto ---------- */ .manifesto { background: var(--ink); color: var(--bg); text-align: center; padding: clamp(90px, 14vw, 170px) 0; } .manifesto h2 { font-size: clamp(2.1rem, 6vw, 4.2rem); letter-spacing: -0.04em; line-height: 1.05; font-weight: 700; max-width: 17ch; margin: 0 auto; } .manifesto p { font-size: clamp(1.02rem, 2vw, 1.25rem); color: color-mix(in srgb, var(--bg) 66%, transparent); line-height: 1.6; max-width: 44ch; margin: 26px auto 0; } .manifesto .pill { background: var(--bg); color: var(--ink); margin-top: 36px; } /* ---------- Footer ---------- */ footer { padding: 54px 0 60px; text-align: center; font-size: 13.5px; color: var(--faint); } footer .frow { display: flex; justify-content: center; gap: 26px; margin-bottom: 14px; } footer a { color: var(--muted); transition: color 0.25s ease; } footer a:hover { color: var(--ink); } /* ---------- Scroll reveals ---------- */ /* The slide is shallow on purpose: reveals fire as content crosses the viewport edge (see the observer's rootMargin), and iOS delivers observer callbacks lazily mid-scroll, so a deep slide reads as popping in. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .compose .caret { animation: none; } } /* ---------- Features page ---------- */ .fhero { text-align: center; padding: clamp(140px, 20vw, 200px) 24px 20px; } .fhero h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); letter-spacing: -0.045em; line-height: 1.03; font-weight: 700; } .fhero p { font-size: clamp(1.02rem, 2.1vw, 1.3rem); color: var(--muted); line-height: 1.55; max-width: 40ch; margin: 22px auto 0; } .fgroup { max-width: 880px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px 0; } .fgroup > .kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .fgrid { grid-template-columns: 1fr; } } .fcell { background: var(--card); border: 1px solid var(--hairline); border-radius: 20px; padding: 22px 24px; } .fcell h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.015em; margin-bottom: 7px; } .fcell p { font-size: 0.95rem; line-height: 1.55; color: var(--muted); } .statband { text-align: center; padding: clamp(70px, 10vw, 110px) 24px; } .statband .big { font-size: clamp(3.4rem, 11vw, 7rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; } .statband p { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted); line-height: 1.6; max-width: 44ch; margin: 20px auto 0; } .fcta { text-align: center; padding: 20px 24px clamp(80px, 10vw, 120px); } .fcta .small-note { display: block; font-size: 13.5px; color: var(--faint); margin-top: 16px; } /* ---------- Privacy page ---------- */ .doc { max-width: 660px; margin: 0 auto; padding: clamp(140px, 20vw, 200px) 24px 80px; } .doc h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); letter-spacing: -0.04em; line-height: 1.05; font-weight: 700; } .doc .effective { color: var(--faint); font-size: 14px; margin-top: 14px; } .doc h2 { font-size: 1.28rem; letter-spacing: -0.02em; font-weight: 700; margin: 44px 0 12px; } .doc p, .doc li { font-size: 1.02rem; line-height: 1.65; color: var(--muted); } .doc p + p { margin-top: 12px; } .doc ul { padding-left: 22px; margin-top: 10px; } .doc li { margin-bottom: 8px; } .doc strong { color: var(--ink); font-weight: 600; } .doc a { border-bottom: 1px solid var(--hairline); } .doc a:hover { border-color: var(--ink); }