/* Lsany "sunlit" preview. Bright bands, soft light, no outlines. */ @font-face { font-family: "Unbounded"; src: url("/fonts/Unbounded-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Tajawal"; src: url("/fonts/Tajawal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --ink: #2B1500; --ink-soft: #7A6048; --paper: #FFFBF2; --cream: #FFF4DE; --gold: #FFB300; --yolk: #FFC93C; --amber: #E88A00; --sun-1: #FFE38C; --sun-2: #FFB147; --sun-3: #FF8E52; --coral: #FF6B5A; --peach: #FFE0C7; --sky: #D5EFFE; --sky-2: #A9DDFB; --sea: #1C8FE0; --deep: #0B5FA8; --night: #0A3D6E; --teal: #00A79B; --mint: #C9F2E6; --green: #2EC66D; --green-deep: #157A41; --red: #D9202E; --pink: #FFD3DE; --rose: #FF7FA0; --white: #FFFFFF; --f-disp: "Unbounded", "Arial Black", sans-serif; --f-body: "Instrument Sans", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --f-ar: "Tajawal", "Noto Sans Arabic", sans-serif; --g-gold: linear-gradient(180deg, #FFD55C 0%, #FFB300 100%); --g-sun: linear-gradient(95deg, #F2541B 0%, #FF7A1A 45%, #FF9F00 100%); --g-sea: linear-gradient(180deg, #38AEF5 0%, #1C8FE0 100%); --soft: 0 1px 2px rgba(43, 21, 0, .05), 0 18px 40px -20px rgba(43, 21, 0, .28); --soft-lg: 0 2px 4px rgba(43, 21, 0, .05), 0 34px 70px -30px rgba(43, 21, 0, .38); --glow-gold: 0 14px 30px -12px rgba(232, 138, 0, .7); --spring: cubic-bezier(.2, 1.35, .35, 1); --ease: cubic-bezier(.22, .8, .26, 1); --gutter: clamp(16px, 4vw, 56px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; } /* ---------- Buttons: sunny pills that lift and press ---------- */ /* Buttons: a pressable 3D key. The lip is part of the body (same hue, deeper), it rises on hover and sinks on press. */ .btn { --top: #FFDA6B; --bot: #FFC11F; --lip: #E39A00; --fg: var(--ink); --glow: rgba(214, 132, 0, .45); --d: 6px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 18px; background: linear-gradient(180deg, var(--top), var(--bot)); color: var(--fg); font-family: var(--f-body); font-weight: 700; font-size: 17px; letter-spacing: -.005em; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .05), 0 var(--d) 0 var(--lip), 0 calc(var(--d) + 10px) 22px -8px var(--glow); transition: transform .2s var(--spring), box-shadow .2s var(--ease), filter .2s; } .btn::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 3px; height: 46%; border-radius: 14px 14px 50% 50% / 14px 14px 60% 60%; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; } .btn::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--spring); } .btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.03); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), inset 0 -2px 0 rgba(0, 0, 0, .05), 0 calc(var(--d) + 2px) 0 var(--lip), 0 calc(var(--d) + 16px) 28px -10px var(--glow); } .btn:hover::after { transform: translateX(4px); } .btn:active { transform: translateY(calc(var(--d) - 1px)); transition-duration: .06s; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .05), 0 1px 0 var(--lip), 0 4px 8px -4px var(--glow); } .btn:focus-visible { outline: 3px solid var(--sea); outline-offset: 5px; } .btn-white { --top: #FFFFFF; --bot: #FFF6E3; --lip: #E6D1A8; --glow: rgba(120, 80, 20, .28); } .btn-sea { --top: #45B4F7; --bot: #1C8FE0; --lip: #0B5FA8; --fg: var(--white); --glow: rgba(11, 95, 168, .45); } .btn-sea::before { opacity: .6; } .btn-plain::after, .btn-sm::after, .btn-split::after { display: none; } .btn-sm { --d: 4px; min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 14px; } .btn-lg { --d: 7px; min-height: 66px; padding: 0 32px; font-size: 18px; border-radius: 20px; } .btn-block { width: 100%; } .btn-split { width: 100%; justify-content: space-between; padding: 0 22px; font-size: 16px; } .btn-split span:last-child { padding-left: 16px; border-left: 2px solid rgba(43, 21, 0, .14); font-size: 15px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px var(--gutter); background: rgba(255, 251, 242, .82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow .3s; } .nav.scrolled { box-shadow: 0 10px 30px -22px rgba(43, 21, 0, .5); } .nav-left { display: flex; gap: 6px; } .nav-left a, .nav-login { font-family: var(--f-disp); font-weight: 600; font-size: 14px; text-decoration: none; padding: 9px 14px; border-radius: 999px; transition: background-color .2s, color .2s; } .nav-left a:hover, .nav-login:hover, .nav-left a[aria-current] { background: var(--sun-1); } .brand { font-family: var(--f-disp); font-weight: 800; font-size: 26px; text-decoration: none; letter-spacing: -.02em; display: inline-flex; align-items: baseline; gap: 8px; } .brand .ar, .foot-brand .ar { font-family: var(--f-ar); color: var(--amber); font-size: .9em; } .nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } /* ---------- Shared type ---------- */ .display { font-family: var(--f-disp); font-weight: 800; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 20px; } .display span { display: block; } .display.center { text-align: center; } .display.light { color: var(--white); } .grad { background: var(--g-sun); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; } .grad-green { color: #16A558; } .accent { color: #F07A1A; } .grad-sea { color: var(--sea); } .accent-gold { color: var(--yolk); } .eyebrow { margin: 0 0 14px; font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #C26A00; } .eyebrow.on-dark { color: var(--sun-1); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 15px 8px 12px; background: var(--white); border-radius: 999px; box-shadow: var(--soft); font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .eyebrow-pill svg { width: 16px; height: 16px; fill: var(--gold); } .eyebrow-pill.on-dark { background: rgba(255, 255, 255, .18); color: var(--white); box-shadow: none; backdrop-filter: blur(6px); } .eyebrow-pill.on-dark svg { fill: var(--sun-1); } .lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch; } .center-block { margin-left: auto; margin-right: auto; text-align: center; } .doodle { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); opacity: .55; pointer-events: none; } .spark { display: none; } @keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .7; } } .wave-top { position: absolute; top: -39px; left: 0; width: 100%; height: 40px; display: block; } .blob { display: none; } @keyframes drift { to { transform: translate(40px, -30px) scale(1.12); } } /* Word bubble: transliteration big, Arabic under it in gold. Flat, never tilted. */ .say { position: absolute; z-index: 5; background: var(--white); border-radius: 22px; padding: 12px 18px 10px; box-shadow: var(--soft-lg); text-align: center; animation: bob 5s ease-in-out infinite; } .say.swap { animation: popIn .5s var(--spring) both, bob 5s ease-in-out infinite .5s !important; } .say b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -.01em; line-height: 1.1; } .say i { display: block; font-style: normal; font-family: var(--f-ar); font-weight: 700; color: var(--amber); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.3; margin-top: 2px; } .say::after { content: ""; position: absolute; bottom: -9px; width: 20px; height: 20px; background: var(--white); border-radius: 0 0 6px 0; transform: rotate(45deg); } .say.tail-l::after { left: 26px; } .say.tail-r::after { right: 26px; } @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } /* ---------- HERO ---------- */ .hero { position: relative; overflow: hidden; background: #8FD3F7 url("/theme/20260926/assets/waterfront.webp") center 40% / cover no-repeat; min-height: min(86vh, 860px); display: flex; align-items: center; } .hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(56, 174, 245, .38) 0%, rgba(56, 174, 245, .06) 40%, rgba(255, 244, 222, 0) 60%), linear-gradient(90deg, rgba(255, 251, 242, .9) 0%, rgba(255, 251, 242, .55) 38%, rgba(255, 251, 242, 0) 62%); pointer-events: none; } .hero-inner { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(28px, 4.5vh, 56px) var(--gutter) clamp(36px, 5vh, 60px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px; } .hero-title { font-family: var(--f-disp); font-weight: 800; font-size: clamp(44px, 5.2vw, 84px); line-height: .98; letter-spacing: -.045em; margin: 0 0 22px; color: var(--ink); } .hero-title .ht-line { display: block; } .hero-lede { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; max-width: 34ch; margin: 0 0 26px; color: #4A3319; } .hero-buy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 22px; } .price { display: flex; align-items: center; gap: 12px; } .price strong { font-family: var(--f-disp); font-weight: 800; font-size: clamp(32px, 3vw, 42px); letter-spacing: -.03em; } .price-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .price-meta s { font-family: var(--f-mono); font-weight: 700; font-size: 14px; color: var(--ink-soft); } .price-meta em { font-style: normal; font-family: var(--f-mono); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(95deg, #FF5A4E, #FF7A45); color: var(--white); padding: 5px 10px; border-radius: 999px; box-shadow: 0 8px 16px -8px rgba(255, 90, 78, .8); } .hero-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; } .hero-checks li { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .78); padding: 7px 13px 7px 9px; border-radius: 999px; backdrop-filter: blur(6px); } .hero-checks svg { width: 16px; height: 16px; fill: var(--green); } .hero-stage { position: relative; height: clamp(420px, 58vh, 620px); } .stage-sun { position: absolute; left: 50%; top: 44%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 200, .95) 0%, rgba(255, 210, 110, .6) 36%, rgba(255, 177, 71, 0) 68%); pointer-events: none; animation: breathe 7s ease-in-out infinite; } @keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.07); opacity: .85; } } .fan { position: absolute; left: 47%; bottom: 15%; width: 0; height: 0; } .fan-book { position: absolute; bottom: 0; left: 0; display: block; width: clamp(150px, 15vw, 220px); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 30px 50px -22px rgba(43, 21, 0, .55), 0 8px 16px -8px rgba(43, 21, 0, .25); transform-origin: 50% 100%; transition: transform .5s var(--spring), box-shadow .3s; will-change: transform; } .fan-book img { width: 100%; aspect-ratio: 720 / 1303; object-fit: cover; } .fb-m { transform: translate(calc(-50% + var(--px, 0px)), var(--py, 0px)); z-index: 3; width: clamp(170px, 17vw, 250px); } .fb-l { transform: translate(calc(-112% + var(--px, 0px)), calc(-4% + var(--py, 0px))) rotate(-10deg); z-index: 1; } .fb-r { transform: translate(calc(12% + var(--px, 0px)), calc(-4% + var(--py, 0px))) rotate(10deg); z-index: 2; } .hero-stage:hover .fb-l { transform: translate(calc(-128% + var(--px, 0px)), calc(-6% + var(--py, 0px))) rotate(-15deg); } .hero-stage:hover .fb-r { transform: translate(calc(28% + var(--px, 0px)), calc(-6% + var(--py, 0px))) rotate(15deg); } .hero-saqr { position: absolute; right: -5%; bottom: 3%; width: clamp(120px, 11vw, 165px); z-index: 4; filter: drop-shadow(0 16px 20px rgba(43, 21, 0, .2)); } .hero-stage .fan, .coll-art .fan { left: 36%; bottom: 13%; } #bundle .hero-stage .fan { left: 58%; } .hero-stage .fan-book, .coll-art .fan-book { width: clamp(130px, 12vw, 175px); } .hero-stage .fb-m, .coll-art .fb-m { width: clamp(150px, 14vw, 205px); } .hero-stage:hover .fb-r, .coll-art:hover .fb-r { transform: translate(calc(18% + var(--px, 0px)), calc(-6% + var(--py, 0px))) rotate(13deg); } .stage-shadow { position: absolute; left: 6%; right: -4%; bottom: 3%; height: 34px; background: radial-gradient(ellipse at center, rgba(43, 21, 0, .22), rgba(43, 21, 0, 0) 70%); z-index: 0; } .spark.s1 { width: 44px; height: 44px; top: 8%; left: 12%; } .spark.s2 { width: 28px; height: 28px; top: 20%; right: 12%; fill: var(--yolk); animation-delay: -1.2s; } .hero .say-1 { left: -2%; top: 14%; } .hero .say-2 { right: -7%; top: auto; bottom: calc(3% + clamp(120px, 11vw, 165px) * 1.25 + 16px); animation-delay: -2.5s; } /* Load choreography: the fan deals itself out once, bubbles pop after. */ .fan-in .fb-m { animation: dealM .8s var(--spring) both .15s; } .fan-in .fb-l { animation: dealL .9s var(--spring) both .35s; } .fan-in .fb-r { animation: dealR .9s var(--spring) both .45s; } @keyframes dealM { from { opacity: 0; transform: translate(-50%, 60px) scale(.9); } } @keyframes dealL { from { opacity: 0; transform: translate(-50%, 40px) rotate(0); } } @keyframes dealR { from { opacity: 0; transform: translate(-50%, 40px) rotate(0); } } .fan-in .hero-title .ht-line { animation: rise .8s var(--spring) both; } .fan-in .hero-title .ht-line + .ht-line { animation-delay: .1s; } .intro .say { animation: popIn .6s var(--spring) both 1s, bob 5s ease-in-out infinite 1.6s; } .intro .say-2 { animation-delay: 1.25s, 1.85s; } @keyframes rise { from { opacity: 0; transform: translateY(40px); } } @keyframes popIn { from { opacity: 0; transform: scale(.6) translateY(14px); } } /* ---------- Bands ---------- */ .band-peach { background: linear-gradient(180deg, #FFE7CF 0%, #FFD7B5 100%); } .band-sky { background: linear-gradient(180deg, #DDF2FF 0%, #BFE6FB 100%); } .band-cream { background: var(--cream); } .band-mint { background: linear-gradient(180deg, #E3F9F1 0%, #C9F2E6 100%); } .band-pink { background: linear-gradient(180deg, #FFE6EC 0%, #FFD3DE 100%); } .band-sun { background: linear-gradient(180deg, #FFFBF0 0%, #FFF3D6 100%); } .sect { position: relative; overflow: hidden; padding: clamp(56px, 6.5vw, 88px) var(--gutter); } .sect-inner { position: relative; max-width: 1240px; margin: 0 auto; } /* ---------- MEET ---------- */ .meet { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 80px); } .meet-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .meet-art { position: relative; padding: 0 0 40px; } .bubble { position: absolute; top: 0; left: 0; z-index: 2; background: var(--white); border-radius: 26px; box-shadow: var(--soft-lg); padding: 18px 24px; font-family: var(--f-disp); font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.3; letter-spacing: -.01em; } .bubble::after { content: ""; position: absolute; left: 58%; bottom: -10px; width: 24px; height: 24px; background: var(--white); border-radius: 0 0 7px 0; transform: rotate(45deg); } .meet-saqr { position: relative; z-index: 1; width: min(88%, 440px); margin: -20px auto 0; } .ground-shadow { display: block; width: 60%; height: 26px; margin: -16px auto 0; background: radial-gradient(ellipse, rgba(170, 80, 0, .25), transparent 70%); } .spark.s3 { width: 40px; height: 40px; right: 6%; top: 40%; fill: var(--white); } .meet-lede { font-size: 18px; margin: 0 0 24px; max-width: 46ch; color: #5E4428; } .ingredients { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; } .ing { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; background: rgba(255, 255, 255, .55); border-radius: 22px; transition: transform .3s var(--spring), background-color .2s, box-shadow .3s; } .ing:hover { transform: translateX(6px); background: rgba(255, 255, 255, .85); } .ing:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; } .ing[aria-pressed="true"] { background: var(--white); box-shadow: 0 14px 30px -18px rgba(120, 60, 0, .45); transform: translateX(10px); } .ing .ing-ico { transition: transform .4s var(--spring); } .ing[aria-pressed="true"] .ing-ico { transform: scale(1.08) rotate(-6deg); } .ing small { display: block; } .ing::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; } .ingredients.run .ing[aria-pressed="true"]::after { animation: ingProg var(--dwell, 5s) linear forwards; } body.paused .ing::after { animation-play-state: paused !important; } @keyframes ingProg { to { transform: scaleX(1); } } /* The showcase screen: one live demo per ingredient. */ .sc-device { position: relative; z-index: 2; width: min(100%, 520px); height: 380px; background: var(--white); border-radius: 30px; box-shadow: 0 40px 70px -40px rgba(140, 60, 0, .55), 0 0 0 8px rgba(255, 255, 255, .5); overflow: hidden; } .sc-bar { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; background: #FFF5EA; } .sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FFB199; } .sc-bar i:nth-child(2) { background: #FFD66B; } .sc-bar i:nth-child(3) { background: #7EDC9C; } .sc-bar span { margin-left: 12px; flex: 1; font: 600 12px var(--f-mono); color: #A0805E; background: var(--white); border-radius: 99px; padding: 5px 12px; } .sc-screen { position: absolute; inset: 44px 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 24px 28px; text-align: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s, transform .45s var(--spring), visibility 0s .35s; } .sc-screen.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s var(--spring); } .sc-kicker { margin: 0 0 8px; font: 700 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #A0805E; } .sc-tl { margin: 0; font: 700 clamp(30px, 3.4vw, 42px)/1.1 var(--f-disp); letter-spacing: -.02em; } .sc-ar { margin: 0; font: 700 26px/1.4 var(--f-ar); color: #D98A00; } .sc-en { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); } .sc-screen.on > * { animation: scRise .6s var(--spring) both; } .sc-screen.on > :nth-child(2) { animation-delay: .12s; } .sc-screen.on > :nth-child(3) { animation-delay: .24s; } .sc-screen.on > :nth-child(4) { animation-delay: .36s; } @keyframes scRise { from { opacity: 0; transform: translateY(16px); } } .sc-read .sc-tl { color: var(--ink); } .sc-read .sc-en { padding: 4px 12px; border-radius: 99px; background: #FFF1C9; } .sc-hear .sc-tl { color: #1C8FE0; } .sc-eq { display: flex; align-items: center; gap: 4px; height: 56px; margin: 8px 0 2px; } .sc-eq i { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(#5BC2FA, #1C8FE0); transform: scaleY(.18); } .sc-hear.on .sc-eq i { animation: scEq .9s ease-in-out infinite alternate; } .sc-eq i:nth-child(3n) { animation-delay: -.3s !important; } .sc-eq i:nth-child(3n+1) { animation-delay: -.6s !important; } .sc-eq i:nth-child(4n) { animation-duration: .7s !important; } .sc-eq i:nth-child(5n) { animation-duration: 1.1s !important; } @keyframes scEq { 0% { transform: scaleY(.15); } 100% { transform: scaleY(1); } } .sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; } .sc-tiles span { padding: 18px 10px; border-radius: 18px; background: #FFF5EA; box-shadow: inset 0 -4px 0 #FFE0C2; font: 700 17px var(--f-body); } .sc-prac.on .t1, .sc-prac.on .t4 { animation: scPick 3.6s both; } .sc-prac.on .t4 { animation-delay: .7s; } .sc-prac.on .t3, .sc-prac.on .t2 { animation: scPick 3.6s 1.9s both; } .sc-prac.on .t2 { animation-delay: 2.5s; } @keyframes scPick { 0% { background: #FFF5EA; transform: none; } 8% { background: #FFE3B8; box-shadow: inset 0 0 0 3px #F07A1A; transform: scale(1.05); } 22% { background: #D8F6E3; box-shadow: inset 0 0 0 3px #16A558; color: #157A41; transform: scale(1); } 36%, 100% { background: #D8F6E3; box-shadow: inset 0 -4px 0 #B6E9C8; color: #157A41; opacity: .55; transform: scale(.94); } } .sc-use { align-items: stretch; gap: 14px; } .sc-bub { margin: 0; max-width: 78%; padding: 12px 16px; border-radius: 20px; text-align: left; } .sc-bub b { display: block; font: 700 18px var(--f-body); } .sc-bub i { font-style: normal; font-size: 14px; } .sc-bub.them { align-self: flex-start; background: #E8F5F3; border-bottom-left-radius: 6px; } .sc-bub.them i { font: 700 17px var(--f-ar); color: #00857B; } .sc-bub.you { align-self: flex-end; background: #00A79B; color: var(--white); border-bottom-right-radius: 6px; } .sc-use.on .sc-bub.you { animation-delay: 1.1s; } .sc-file { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 360px; padding: 16px; border-radius: 20px; background: #F0FAF3; text-align: left; } .sc-file > div { flex: 1; min-width: 0; } .sc-file b { display: block; font: 700 15px var(--f-body); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-pdf { flex: none; width: 46px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: #E5484D; color: var(--white); font: 700 12px var(--f-mono); } .sc-prog { display: block; height: 8px; border-radius: 99px; background: #D5EFDD; overflow: hidden; } .sc-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #2EC66D; transform: scaleX(0); transform-origin: left; } .sc-keep.on .sc-prog i { animation: ingProg 1.8s .5s cubic-bezier(.5, 0, .3, 1) forwards; } .sc-done { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2EC66D; transform: scale(0); } .sc-done svg { width: 18px; height: 18px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .sc-keep.on .sc-done { animation: scPop .5s 2.3s var(--spring) forwards; } @keyframes scPop { to { transform: scale(1); } } body.paused .sc-device * { animation-play-state: paused !important; } .meet-art { padding-top: 190px; } .meet-art .meet-saqr { position: absolute; z-index: 1; top: 0; right: 9%; width: clamp(140px, 13vw, 176px); margin: 0; } .sc-device { box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--sc, #FFB300) 70%, #5a2a00), 0 0 0 10px color-mix(in srgb, var(--sc, #FFB300) 38%, white) !important; transition: box-shadow .6s; } .sc-bar { transition: background-color .6s; background: color-mix(in srgb, var(--sc, #FFB300) 14%, white); } .meet-art .ground-shadow { display: none; } .ingredients b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 18px; letter-spacing: -.01em; } .ingredients small { font-size: 15px; color: var(--ink-soft); font-weight: 500; } .ing-ico { flex: none; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; } .ing-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ico-gold { background: linear-gradient(160deg, #FFC93C, #FF9A2E); box-shadow: 0 10px 18px -10px rgba(232, 138, 0, .9); } .ico-teal { background: linear-gradient(160deg, #3ED6C4, #00A79B); box-shadow: 0 10px 18px -10px rgba(0, 140, 130, .9); } .ico-sea { background: linear-gradient(160deg, #5BC2FA, #1C8FE0); box-shadow: 0 10px 18px -10px rgba(11, 95, 168, .9); } .ico-rose { background: linear-gradient(160deg, #FF9DB5, #FF5F86); box-shadow: 0 10px 18px -10px rgba(220, 60, 100, .9); } .ico-green { background: linear-gradient(160deg, #6BE08F, #22B45F); box-shadow: 0 10px 18px -10px rgba(21, 122, 65, .9); } .stat-row { position: relative; max-width: 900px; margin: clamp(48px, 6vw, 80px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .stat-row > span { display: flex; flex-direction: column; align-items: center; padding: 20px 12px 16px; background: rgba(255, 255, 255, .7); border-radius: 26px; font-family: var(--f-disp); font-weight: 600; font-size: clamp(13px, 1.2vw, 15px); } .stat-row b { font-weight: 800; font-size: clamp(38px, 4.6vw, 60px); line-height: 1; letter-spacing: -.04em; background: var(--g-sun); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- PICK ---------- */ .pick { position: relative; padding: clamp(64px, 8vw, 110px) var(--gutter) clamp(72px, 8vw, 110px); } .pick .wave-top { fill: #DDF2FF; } .pick-head { max-width: 1100px; margin: 0 auto clamp(36px, 5vw, 60px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .pick-head .display { margin: 0; } .flank { width: clamp(100px, 11vw, 150px); } .flank-l { justify-self: end; } .flank-r { justify-self: start; } .tiles { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); } .tile { position: relative; background: var(--white); border-radius: 32px; box-shadow: 0 2px 4px rgba(11, 95, 168, .05), 0 30px 60px -30px rgba(11, 95, 168, .45); padding: 14px 14px 22px; text-align: center; display: flex; flex-direction: column; transition: transform .4s var(--spring), box-shadow .4s var(--ease); } .tile:hover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(11, 95, 168, .05), 0 44px 70px -30px rgba(11, 95, 168, .55); } .tile-art { position: relative; display: grid; place-items: center; padding: 34px 0 30px; border-radius: 24px; overflow: hidden; margin-bottom: 18px; } .tile-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .45) 2.6px, transparent 3px); background-size: 22px 22px; } .tile-1 .tile-art { background: linear-gradient(160deg, #FFD45E 0%, #FF9A3D 100%); } .tile-3 .tile-art { background: linear-gradient(160deg, #FFB3C6 0%, #FF6F91 100%); } .tile-4 .tile-art { background: linear-gradient(160deg, #8FD6FF 0%, #2F9BEA 100%); } .tile-art img { position: relative; width: 52%; border-radius: 10px; box-shadow: 0 26px 40px -18px rgba(43, 21, 0, .55); transition: transform .5s var(--spring); } .tile:hover .tile-art img { transform: translateY(-10px) rotate(-4deg) scale(1.05); } .ts-tile { width: 30px; height: 30px; top: 16px; right: 16px; filter: none; } .tile-kicker { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; } .tile-1 .tile-kicker { color: var(--amber); } .tile-3 .tile-kicker { color: #D6406A; } .tile-4 .tile-kicker { color: var(--deep); } .tile h3 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 8px; min-height: 2.24em; display: grid; place-items: center; } .tile-line { margin: 0 0 18px; color: var(--ink-soft); font-size: 15px; flex: 1; } .tile-link { margin-top: 14px; font-family: var(--f-disp); font-weight: 600; font-size: 13px; text-decoration: none; color: var(--deep); } .tile-link::after { content: " →"; display: inline-block; transition: transform .25s var(--spring); } .tile-link:hover::after { transform: translateX(4px); } .pick-note { text-align: center; font-weight: 600; margin: 34px auto 0; color: var(--night); } /* ---------- CHAPTERS: pick a book, swipe its ten worlds ---------- */ .chapters { position: relative; background: linear-gradient(180deg, #3AB0F5 0%, #1C8FE0 55%, #0B6FC0 100%); color: var(--white); padding: clamp(64px, 8vw, 110px) 0 clamp(56px, 6vw, 90px); overflow: hidden; } .chapters::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -10%, rgba(255, 227, 140, .55), transparent 55%); pointer-events: none; } .chapters-head { position: relative; text-align: center; padding: 0 var(--gutter); margin-bottom: 28px; } .chapters-head .display span { display: inline; } .chapters-lede { font-size: 18px; font-weight: 500; margin: 0; opacity: .92; } .book-tabs { position: relative; display: flex; justify-content: center; gap: 6px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 30px; padding: 6px; background: rgba(255, 255, 255, .16); border-radius: 999px; backdrop-filter: blur(8px); } .book-tabs button { font: inherit; font-family: var(--f-disp); font-weight: 600; font-size: 14px; color: var(--white); background: none; border: 0; padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--spring); white-space: nowrap; } .book-tabs button:hover { background: rgba(255, 255, 255, .15); } .book-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(0, 30, 70, .6); } .shelf-wrap { position: relative; } .shelf { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 14px var(--gutter) 30px; scrollbar-width: none; } .shelf::-webkit-scrollbar { display: none; } .ch { flex: none; width: 210px; scroll-snap-align: start; background: var(--white); color: var(--ink); border-radius: 24px; box-shadow: 0 30px 50px -26px rgba(0, 30, 70, .7); padding: 8px 8px 14px; transition: transform .4s var(--spring); text-decoration: none; } .ch:hover { transform: translateY(-10px); } .ch img { width: 100%; aspect-ratio: 1410 / 2000; object-fit: cover; object-position: center 75%; border-radius: 18px; } .ch b { display: block; margin: 12px 6px 0; font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .ch span { display: block; margin: 3px 6px 0; font-family: var(--f-disp); font-weight: 700; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; } .ch.b1 b { color: var(--amber); } .ch.b3 b { color: #D6406A; } .ch.b4 b { color: var(--deep); } .shelf.swap .ch { animation: cardIn .6s var(--spring) both; animation-delay: calc(var(--i) * 45ms); } @keyframes cardIn { from { opacity: 0; transform: translateY(30px) scale(.94); } } .shelf-nav { display: flex; justify-content: center; gap: 12px; } .shelf-nav button { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 24px -14px rgba(0, 30, 70, .7); transition: transform .25s var(--spring); } .shelf-nav button:hover { transform: scale(1.08); } .shelf-nav button:active { transform: scale(.94); } .shelf-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* ---------- WATCH ---------- */ .watch { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 120px) var(--gutter); } .watch-inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; } .phone { position: relative; width: clamp(260px, 26vw, 340px); aspect-ratio: 9 / 16; border-radius: 40px; overflow: hidden; background: #111; box-shadow: 0 0 0 10px var(--white), 0 50px 80px -30px rgba(43, 21, 0, .55); } .phone video { width: 100%; height: 100%; object-fit: cover; } .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; border: 0; background: var(--g-gold); box-shadow: var(--glow-gold); display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--spring), opacity .2s; } .play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(255, 201, 60, .35); animation: ring 2.2s ease-out infinite; z-index: -1; } @keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } } .play svg { width: 32px; height: 32px; fill: var(--ink); margin-left: 5px; } .play:hover { transform: translate(-50%, -50%) scale(1.08); } .phone.playing .play { opacity: 0; pointer-events: none; } .phone-tag { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: center; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-radius: 18px; padding: 10px; font-family: var(--f-disp); font-weight: 700; font-size: 14px; } .watch-lede { font-size: 19px; max-width: 40ch; margin: 0 0 30px; color: var(--ink-soft); } .voices { position: relative; max-width: 1180px; margin: clamp(56px, 7vw, 90px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; } .voice { margin: 0; transition: transform .4s var(--spring); } .voice:hover { transform: translateY(-6px); } .voice blockquote { position: relative; margin: 0 0 22px; padding: 24px 24px 26px; border-radius: 28px; font-size: 16px; font-weight: 500; line-height: 1.55; box-shadow: var(--soft); } .voice blockquote::after { content: ""; position: absolute; left: 36px; bottom: -9px; width: 22px; height: 22px; background: inherit; border-radius: 0 0 6px 0; transform: rotate(45deg); } .v-gold { --bub: #FFF0B8; } .v-teal { --bub: #CFF3EC; } .v-pink { --bub: #FFDCE5; } .v-sky { --bub: #D5EFFE; } .v-peach { --bub: #FFE3CC; } .v-mint { --bub: #DDF6D8; } .voice blockquote { background: var(--bub, #fff); } .voice figcaption { display: flex; align-items: center; gap: 10px; padding-left: 18px; } .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-disp); font-weight: 800; color: var(--white); background: var(--g-sun); box-shadow: 0 8px 16px -8px rgba(232, 138, 0, .9); } .v-teal .av { background: linear-gradient(160deg, #3ED6C4, #00A79B); } .v-pink .av { background: linear-gradient(160deg, #FF9DB5, #FF5F86); } .v-sky .av { background: linear-gradient(160deg, #5BC2FA, #1C8FE0); } .v-mint .av { background: linear-gradient(160deg, #6BE08F, #22B45F); } .voice figcaption b { font-family: var(--f-disp); font-weight: 700; } .voice figcaption small { color: var(--ink-soft); font-size: 14px; display: block; line-height: 1.2; } /* ---------- PROMISE ---------- */ .promise { padding: clamp(28px, 4vw, 48px) var(--gutter); background: var(--cream); } .promise-inner { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 36px) clamp(24px, 4vw, 48px); border-radius: 36px; background: linear-gradient(120deg, #1FB866 0%, #13894A 100%); color: var(--white); box-shadow: 0 30px 60px -30px rgba(21, 122, 65, .8); position: relative; overflow: hidden; } .promise-inner::before { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 227, 140, .45), transparent 70%); } .promise img { position: relative; width: clamp(84px, 9vw, 120px); flex: none; filter: drop-shadow(0 12px 18px rgba(0, 40, 20, .35)); } .promise h2 { position: relative; font-family: var(--f-disp); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 8px; color: var(--sun-1); } .promise p { position: relative; margin: 0; font-size: 17px; max-width: 58ch; } /* ---------- FAQ ---------- */ .faq { padding: clamp(72px, 9vw, 120px) var(--gutter); } .faq-inner { max-width: 880px; margin: 0 auto; } .faq-sub { text-align: center; margin: 0 0 40px; font-size: 17px; color: var(--ink-soft); } .faq-sub a, .qa-list a { font-weight: 700; color: var(--deep); } .qa-list { display: grid; gap: 12px; } .qa-list details { background: var(--white); border-radius: 24px; box-shadow: 0 1px 2px rgba(43, 21, 0, .04), 0 12px 30px -22px rgba(43, 21, 0, .35); transition: box-shadow .3s; } .qa-list details[open] { box-shadow: 0 2px 4px rgba(43, 21, 0, .04), 0 26px 50px -28px rgba(232, 138, 0, .6); } .qa-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 20px 20px 26px; font-family: var(--f-disp); font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); letter-spacing: -.01em; line-height: 1.3; } .qa-list summary::-webkit-details-marker { display: none; } .qa-list summary i { flex: none; position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--sun-1); transition: transform .4s var(--spring), background-color .25s; } .qa-list summary i::before, .qa-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.6px; background: var(--ink); transform: translate(-50%, -50%); border-radius: 2px; } .qa-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); } .qa-list details[open] summary i { transform: rotate(135deg); background: var(--yolk); } .qa-list details p { margin: 0; padding: 0 26px 24px; font-size: 16px; color: var(--ink-soft); max-width: 70ch; } /* ---------- FINAL ---------- */ .final { position: relative; overflow-x: clip; background: linear-gradient(180deg, #FFE38C 0%, #FFB147 55%, #FF8E52 100%); padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(72px, 8vw, 110px); } .final .wave-top { fill: #FFE38C; } .final-sun { position: absolute; right: 8%; top: 10%; width: clamp(220px, 28vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF8D6 0%, rgba(255, 246, 201, .55) 40%, transparent 70%); pointer-events: none; animation: breathe2 8s ease-in-out infinite; } @keyframes breathe2 { 50% { transform: scale(1.1); opacity: .8; } } .final-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } .final-title { font-size: clamp(38px, 4.6vw, 72px); } .final-title .ht-accent { color: var(--white); text-shadow: 0 10px 30px rgba(200, 80, 0, .35); } .final-copy > p { font-size: 19px; font-weight: 500; max-width: 38ch; margin: 0 0 26px; color: #4A2A08; } .final-single { display: inline-block; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .final-art { position: relative; height: clamp(360px, 40vw, 480px); } .final-art .fan { left: 50%; bottom: 12%; } .fan-sm .fan-book { width: clamp(130px, 12vw, 180px); } .fan-sm .fb-m { width: clamp(150px, 14vw, 205px); } .price.on-sun s { color: #6B3E0C; } /* ---------- FREE ---------- */ .free { background: linear-gradient(180deg, #DDF2FF, #BFE6FB); padding: clamp(48px, 6vw, 80px) var(--gutter); } .free-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); } .free img { width: clamp(120px, 14vw, 170px); border-radius: 12px; box-shadow: 0 30px 50px -24px rgba(11, 95, 168, .7); flex: none; transition: transform .5s var(--spring); } .free-inner:hover img { transform: rotate(-5deg) translateY(-6px); } .free h2 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 10px; } .free p { margin: 0 0 22px; font-size: 17px; color: #36506A; } /* ---------- FOOTER ---------- */ .foot { position: relative; background: linear-gradient(180deg, #0B5FA8 0%, #0A3D6E 100%); color: #EAF6FF; padding: 64px var(--gutter) 28px; overflow: hidden; } .foot::before { content: ""; position: absolute; left: 50%; top: -220px; width: 700px; height: 440px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 201, 60, .22), transparent 70%); pointer-events: none; } .foot-top { position: relative; max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 36px; border-bottom: 1px solid rgba(234, 246, 255, .16); } .foot-brand { font-family: var(--f-disp); font-weight: 800; font-size: clamp(40px, 6vw, 72px); letter-spacing: -.04em; margin: 0 0 12px; line-height: 1; color: var(--white); } .foot-brand .ar { color: var(--yolk); } .foot-wait { font-family: var(--f-disp); font-weight: 600; margin: 0 0 14px; } .foot-form { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px; background: rgba(255, 255, 255, .12); border-radius: 999px; max-width: 460px; } .foot-form input { flex: 1 1 200px; min-width: 0; padding: 11px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--white); font: inherit; font-size: 15px; outline: none; } .foot-form input::placeholder { color: rgba(234, 246, 255, .6); } .foot-links { position: relative; display: grid; grid-template-columns: repeat(2, auto); gap: 10px 48px; align-content: start; } .foot-links a { text-decoration: none; font-weight: 500; opacity: .9; } .foot-links a:hover { color: var(--yolk); opacity: 1; } .foot-bottom { position: relative; max-width: 1240px; margin: 0 auto; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .foot-bottom a { text-decoration: none; color: var(--yolk); } /* ===================================================================== HOME ===================================================================== */ .home-hero { position: relative; overflow: hidden; background: #FFE9B8 url("/theme/20260926/assets/home-hero.webp?v=hero2") center top / 100% auto no-repeat; height: clamp(600px, 62.5vw, calc(100vh - 66px)); min-height: 600px; display: flex; align-items: center; } .home-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 246, 222, .88) 0%, rgba(255, 246, 222, .5) 34%, rgba(255, 246, 222, 0) 52%); pointer-events: none; } .home-hero .hero-inner { grid-template-columns: 1fr; z-index: 1; } .home-hero .hero-copy { max-width: 620px; } .home-hero .hero-title { font-size: clamp(46px, 5.6vw, 92px); } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .not-tb { font-family: var(--f-disp); font-weight: 800; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; margin: -6px 0 22px; } .strike { position: relative; display: inline-block; } .strike svg { position: absolute; left: -4%; top: 38%; width: 108%; height: .6em; color: var(--coral); overflow: visible; } .strike path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: strikeIn .7s var(--ease) .9s forwards; } @keyframes strikeIn { to { stroke-dashoffset: 0; } } .not-textbook { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--white); box-shadow: var(--soft); font-family: var(--f-disp); font-weight: 700; font-size: 14px; } .not-textbook s { text-decoration-color: var(--coral); text-decoration-thickness: 3px; } .not-textbook span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--g-sun); color: var(--white); font-size: 13px; } .home-hero .say-saqr { left: 76%; top: calc(62.5vw * .33); animation: bob 5s ease-in-out infinite; } .home-hero .say-saqr::after { left: 40%; top: -8px; bottom: auto; border-radius: 6px 0 0 0; } .hero-shine { position: absolute; inset: 0; background: radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .55), transparent 40%); pointer-events: none; } .kb { animation: kenburns 24s ease-in-out infinite alternate; } @keyframes kenburns { to { background-size: 104% auto; background-position: 60% top; } } .num-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .num-eyebrow b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--white); color: var(--amber); box-shadow: var(--soft); font-size: 11px; letter-spacing: 0; } /* 01 collection */ .coll-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .coll-art { position: relative; height: clamp(380px, 38vw, 500px); } .coll-art .stage-sun { top: 50%; } .price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 22px; } .pcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 28px; background: var(--white); box-shadow: var(--soft); text-decoration: none; transition: transform .35s var(--spring), box-shadow .35s; } .pcard:hover { transform: translateY(-5px); box-shadow: var(--soft-lg); } .pcard small { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .pcard strong { font-family: var(--f-disp); font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; } .pcard strong s { font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--ink-soft); letter-spacing: 0; margin-left: 6px; } .pcard span { font-family: var(--f-disp); font-weight: 600; font-size: 13px; color: var(--deep); margin-top: 6px; } .pcard.best { background: var(--g-gold); box-shadow: var(--glow-gold); } .pcard.best small, .pcard.best strong s { color: #6B4200; } .pcard.best span { color: var(--ink); } .pcard em { position: absolute; top: -10px; right: 16px; font-style: normal; font-family: var(--f-mono); font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: linear-gradient(95deg, #FF5A4E, #FF7A45); color: var(--white); padding: 5px 10px; border-radius: 999px; box-shadow: 0 8px 16px -8px rgba(255, 90, 78, .8); } .mini-books { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; } .mini-books a { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 20px; background: rgba(255, 255, 255, .6); text-decoration: none; transition: background-color .2s, transform .3s var(--spring); } .mini-books a:hover { background: var(--white); transform: translateX(6px); } .mini-books img { width: 40px; border-radius: 6px; box-shadow: 0 8px 14px -8px rgba(43, 21, 0, .5); } .mini-books b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 15px; letter-spacing: -.01em; } .mini-books small { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.35; } .coll-close { font-family: var(--f-disp); font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.02em; margin: 0; } /* 02 talk back */ .talk-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .feat { position: relative; overflow: hidden; border-radius: 30px; padding: 12px 12px 24px; min-height: 330px; display: flex; flex-direction: column; background: var(--white); box-shadow: 0 2px 4px rgba(20, 80, 140, .05), 0 26px 50px -30px rgba(20, 80, 140, .35); transition: transform .4s var(--spring), box-shadow .4s; } .feat:hover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(20, 80, 140, .05), 0 40px 60px -30px rgba(20, 80, 140, .45); } .feat h3 { font-family: var(--f-disp); font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; margin: 0 10px 8px; } .feat p { margin: 0 10px; font-size: 15px; color: rgba(43, 21, 0, .72); } /* Each card gets a light, cool stage with its own pattern. */ .feat .vig { --tint: #EAF5FF; --dot: #CFE6FB; height: 176px; margin-bottom: 20px; padding: 14px; box-sizing: border-box; border-radius: 22px; background-color: var(--tint); } .f-match .vig { --tint: #E9F4FF; background-image: radial-gradient(#CBE3FA 1.6px, transparent 2px); background-size: 16px 16px; } .f-hear .vig { --tint: #E4F9F5; background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(94, 214, 196, .18) 14px 16px); } .f-flash .vig { --tint: #EEF0FF; background-image: linear-gradient(rgba(130, 145, 255, .13) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(130, 145, 255, .13) 1.5px, transparent 1.5px); background-size: 20px 20px; } .f-qr .vig { --tint: #E8FAEE; background-image: radial-gradient(circle at 100% 0, #C8F1D6 0 60px, transparent 61px), radial-gradient(circle at 0 100%, #D5F5E0 0 44px, transparent 45px); } .pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; } .pairs span { padding: 8px 6px; white-space: nowrap; border-radius: 14px; background: var(--white); text-align: center; font-family: var(--f-disp); font-weight: 700; font-size: 13px; box-shadow: 0 1px 0 #D6E7F8, 0 8px 16px -12px rgba(20, 80, 140, .5); transition: background-color .3s, color .3s, transform .3s var(--spring); } .pairs span.sel { background: #D4EBFF; color: #0B5FA8; box-shadow: inset 0 0 0 2px #5BB0F0; transform: scale(1.04); } .pairs span.ok { background: #D8F6E3; color: #157A41; box-shadow: inset 0 0 0 2px #5FD08D; animation: nudge .45s var(--spring); } .pairs span.done { opacity: .35; transform: scale(.94); } .pairs .match-clock { grid-column: 1 / -1; align-self: center; padding: 0; box-shadow: none; height: 6px; border-radius: 99px; background: var(--white); overflow: hidden; } .match-clock i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7CC4FF, #1C8FE0); transform-origin: left; transform: scaleX(var(--t, 1)); transition: transform .9s linear; } @keyframes nudge { 50% { transform: scale(1.08); } } .wave { display: flex; align-items: center; gap: 5px; justify-content: center; } .wave i { width: 7px; border-radius: 99px; background: linear-gradient(#7FE3D5, #1FB5A6); height: 30%; animation: eq 1.1s ease-in-out infinite; } .wave i:nth-child(2n) { animation-delay: -.3s; } .wave i:nth-child(3n) { animation-delay: -.6s; } .wave i:nth-child(5n) { animation-delay: -.8s; } @keyframes eq { 50% { height: 90%; } } .f-flash .vig { display: grid; place-items: center; } .flip { perspective: 800px; width: 116px; height: 146px; margin: 0 auto; } .flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--spring); } .flip-in { animation: flipLoop 5s var(--ease) infinite; } @keyframes flipLoop { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } .flip-in > * { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 20px; background: var(--white); backface-visibility: hidden; box-shadow: 0 1px 0 #D9DDFB, 0 14px 24px -14px rgba(80, 95, 220, .55); } .flip-in .front { font-family: var(--f-ar); font-size: 64px; color: #5C6FF0; } .flip-in .back { transform: rotateY(180deg); font-family: var(--f-disp); font-weight: 800; font-size: 20px; text-align: center; } .flip-in .back small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 13px; color: var(--ink-soft); } .qr-card { display: flex; align-items: center; gap: 14px; } .qr-scan { position: relative; flex: none; } .qr-scan::after { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 3px; border-radius: 3px; background: var(--green); animation: scan 2.2s ease-in-out infinite alternate; } @keyframes scan { to { top: calc(100% - 11px); } } .qr-card img { width: 110px; border-radius: 16px; background: var(--white); padding: 8px; box-shadow: 0 14px 24px -14px rgba(0, 120, 90, .5); } .qr-card b { font-family: var(--f-disp); font-weight: 700; font-size: 15px; line-height: 1.25; } .talk-foot { max-width: 1240px; margin: 34px auto 0; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; text-align: center; } .talk-foot p { margin: 0; font-weight: 600; } .talk-video { max-width: 1240px; margin: 0 auto 40px; display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 80px); align-items: start; } .talk-video > div:first-child { padding-top: clamp(12px, 5vw, 72px); } .sect.tight-b { padding-bottom: clamp(40px, 4vw, 56px); } .sect.tight-t { padding-top: clamp(40px, 4vw, 56px); } /* 03 compare */ .vs { max-width: 1000px; margin: 0 auto; display: grid; gap: 12px; } .vs-head, .vs-row { display: grid; grid-template-columns: .7fr 1.2fr 1fr; gap: 12px; align-items: stretch; } .vs-head span { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 0 20px; color: var(--ink-soft); } .vs-head .us { color: var(--green-deep); } .vs-row > * { border-radius: 24px; padding: 20px 22px; display: flex; align-items: center; gap: 12px; } .vs-row .k { font-family: var(--f-disp); font-weight: 700; font-size: 16px; background: rgba(255, 255, 255, .45); } .vs-row .y { background: var(--white); font-weight: 600; font-size: 16px; box-shadow: 0 20px 40px -26px rgba(21, 122, 65, .6); transition: transform .35s var(--spring); } .vs-row:hover .y { transform: scale(1.02); } .vs-row .n { color: rgba(43, 21, 0, .55); font-size: 15px; background: rgba(255, 255, 255, .3); } .tick, .cross { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .tick { background: linear-gradient(160deg, #6BE08F, #22B45F); box-shadow: 0 8px 14px -8px rgba(21, 122, 65, .9); } .cross { background: rgba(188, 68, 72, .12); } .tick svg, .cross svg { width: 15px; height: 15px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .tick svg { stroke: var(--white); } .cross svg { stroke: rgba(165, 62, 67, .58); } /* 04 voices grid of six */ .voices.six { grid-template-columns: repeat(3, 1fr); margin-top: 0; } .stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; display: block; margin-bottom: 8px; } /* 05 AI suite: the live layout, redrawn without outlines */ .suite-sect { background: var(--white); } .suite-head { text-align: center; max-width: 760px; margin: 0 auto 34px; } .suite-head .lede { margin-left: auto; margin-right: auto; } .soon { display: inline-block; margin: 0 0 14px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); } .show { max-width: 780px; margin: 0 auto; } .show-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } .show-tab { font-family: var(--f-body); font-weight: 700; font-size: 15px; background: #F4EFE4; color: var(--ink); border: 0; cursor: pointer; padding: 11px 20px; border-radius: 999px; transition: background-color .2s, color .2s, transform .2s var(--spring); } .show-tab:hover { background: #ECE3D0; transform: translateY(-2px); } .show-tab.is-on { background: #00695F; color: var(--white); } .slide { display: none; } .slide.is-on { display: block; animation: slidein .35s ease; } @keyframes slidein { from { opacity: 0; transform: translateY(10px); } } .slide-cap { text-align: center; color: var(--ink-soft); font-size: 16px; margin: 0 0 22px; } .show-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; } .show-dot { position: relative; width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer; background: #E6DccA; border: 0; transition: background-color .15s, transform .15s; } .show-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } .show-dot.is-on { background: var(--teal); transform: scale(1.3); } .demo { background: var(--white); border-radius: 26px; box-shadow: 0 1px 2px rgba(43, 21, 0, .06), 0 30px 60px -30px rgba(43, 21, 0, .35), 0 0 0 1px rgba(43, 21, 0, .05); max-width: 560px; margin: 0 auto; overflow: hidden; } .demo-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: #FFE9A8; } .demo-title { font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } .demo-badge { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: var(--green); padding: 4px 10px; border-radius: 999px; } .demo-badge-ghost { background: var(--white); color: var(--ink-soft); } .demo-chat { display: flex; flex-direction: column; gap: 10px; padding: 22px; } .bub { max-width: 84%; border-radius: 18px; padding: 12px 16px; font-size: 15px; line-height: 1.5; } .bub-user { align-self: flex-end; background: #00695F; color: var(--white); border-bottom-right-radius: 6px; } .bub-user i { font-style: normal; opacity: .85; } .bub-ai { align-self: flex-start; background: #FFE9A8; border-bottom-left-radius: 6px; } .bub-ai .ar, .turn .ar { display: block; font-family: var(--f-ar); font-size: 18px; color: #B26800; margin-bottom: 2px; } .bub-ai b { font-weight: 700; } .bub-ai i { display: block; font-style: normal; color: var(--ink-soft); font-size: 13px; margin-top: 2px; } .demo-inrow { display: flex; align-items: center; gap: 12px; margin: 0 22px 22px; padding: 8px 8px 8px 18px; background: #F7F3EA; border-radius: 999px; } .demo-in { flex: 1; color: var(--ink-soft); font-size: 15px; } .demo-send { background: var(--green); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; } .demo-call { min-height: 380px; } .call-ring { position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 22px; text-align: center; } .call-pulse { position: absolute; top: 26px; width: 130px; height: 130px; border-radius: 50%; border: 3px solid var(--green); opacity: 0; animation: ringPulse 1.8s ease-out infinite; } @keyframes ringPulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } } .call-ava { width: 110px; height: auto; } .call-name { font-family: var(--f-disp); font-weight: 700; font-size: 20px; margin-top: 14px; } .call-status { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; } .call-answer { width: 62px; height: 62px; border-radius: 50%; cursor: pointer; background: var(--green); color: var(--ink); border: 0; display: flex; align-items: center; justify-content: center; margin-top: 22px; box-shadow: 0 12px 24px -10px rgba(21, 122, 65, .8); animation: answerBob 1.4s ease-in-out infinite; transition: transform .15s; } @keyframes answerBob { 50% { transform: translateY(-4px); } } .call-answer:hover { transform: scale(1.06); } .call-hint { font-size: 13px; color: var(--ink-soft); margin-top: 14px; } .call-live { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .call-live:not([hidden]) > * { animation: slidein .45s ease both; } .call-live > *:nth-child(3) { animation-delay: .5s !important; } .call-live > *:nth-child(4) { animation-delay: 1s !important; } .call-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px dashed #F0DCA8; } .call-mini { width: 40px; height: auto; } .call-meta b { display: block; font-size: 15px; } .call-meta i { font-style: normal; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--green-deep); } .turn { border-radius: 18px; padding: 12px 16px; max-width: 88%; } .turn.them { background: #FFE9A8; align-self: flex-start; border-bottom-left-radius: 6px; } .turn.you { background: #00695F; color: var(--white); align-self: flex-end; border-bottom-right-radius: 6px; } .turn.you .ar { color: #FFE9A8; } .turn .who { display: block; font-family: var(--f-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; } .turn b { display: block; font-size: 15px; } .turn .ar { font-size: 15px; margin: 2px 0; } .turn i { display: block; font-style: normal; font-size: 13px; opacity: .8; } .trace-pad { margin: 22px; height: 200px; border-radius: 18px; background: #E0F6F2; border: 2.5px dashed rgba(0, 105, 95, .3); display: flex; align-items: center; justify-content: center; } .trace-letter { font-family: var(--f-ar); font-size: 110px; line-height: 1; color: rgba(43, 21, 0, .28); } .trace-row { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 22px; } .trace-name { font-weight: 700; font-size: 16px; } .trace-name em { font-style: normal; font-family: var(--f-mono); font-size: 13px; color: var(--ink-soft); margin-left: 6px; } .pron { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 22px 30px; text-align: center; } .pron-word .ar { display: block; font-family: var(--f-ar); font-size: 40px; color: #B26800; line-height: 1.3; } .pron-word b { display: block; font-family: var(--f-mono); font-size: 15px; } .pron-word i { display: block; font-style: normal; color: var(--ink-soft); font-size: 14px; } .pron-wave { display: flex; align-items: center; gap: 4px; height: 30px; } .pron-wave span { width: 5px; border-radius: 3px; background: var(--teal); animation: wavey 1.1s ease-in-out infinite; } .pron-wave span:nth-child(odd) { height: 12px; } .pron-wave span:nth-child(even) { height: 24px; animation-delay: .18s; background: var(--gold); } .pron-wave span:nth-child(3n) { height: 18px; animation-delay: .32s; background: var(--red); } @keyframes wavey { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1.25); } } .pron-mic { width: 58px; height: 58px; border-radius: 50%; background: var(--red); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -10px rgba(217, 32, 46, .7); } .pron-hint { font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); } .ebook-suite-tour { --font-display: var(--f-disp); --font-body: var(--f-body); --font-mono: var(--f-mono); --font-arabic: var(--f-ar); } /* 06 why */ /* Why: illustrated bento */ .why-sect { background: linear-gradient(180deg, #E4F3FF 0%, #F3FAFF 55%, #FFF8EA 100%); } .why-bento { max-width: 1240px; margin: 40px auto 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 300px 290px; gap: 16px; } .wb { position: relative; overflow: hidden; display: flex; border-radius: 30px; box-shadow: var(--soft); transition: transform .4s var(--spring), box-shadow .4s; } .wb:hover { transform: translateY(-6px); box-shadow: var(--soft-lg); } .wb-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wb-copy { position: relative; z-index: 1; } .wb-tag { display: block; margin: 0 0 8px; font-family: var(--f-disp); font-weight: 800; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.035em; line-height: 1.05; } .wb p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); } .wb-belong { grid-row: 1 / 3; } .wb-belong .wb-scene { object-position: 72% center; } .wb-edge { grid-column: 2 / 4; } .wb-edge .wb-scene { object-position: center 30%; } .wb-belong .wb-copy, .wb-edge .wb-copy { align-self: flex-end; margin: 16px; padding: 20px 22px; max-width: 400px; background: rgba(255, 255, 255, .94); border-radius: 22px; box-shadow: 0 14px 30px -18px rgba(43, 21, 0, .45); } .wb-belong .wb-tag { color: #E27100; } .wb-edge .wb-tag { color: var(--sea); } .wb-respect { background: linear-gradient(160deg, #FFE8EE 0%, #FFC9D7 100%); } .wb-identity { background: linear-gradient(160deg, #E1F8EA 0%, #B9EECF 100%); } .wb-respect .wb-copy, .wb-identity .wb-copy { padding: 26px 24px; max-width: 64%; } .wb-respect .wb-tag { color: #D93A6A; } .wb-identity .wb-tag { color: var(--green-deep); } .wb-identity p { color: var(--ink); } .wb-saqr { position: absolute; right: -2%; bottom: -4%; width: 44%; max-width: 190px; filter: drop-shadow(0 14px 18px rgba(43, 21, 0, .22)); } /* Feed: Instagram marquee */ .feed-sect { background: var(--white); padding-left: 0; padding-right: 0; } .feed-head { max-width: 900px; margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; } .ig-handle { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 7px 20px 7px 7px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px rgba(43, 21, 0, .06), 0 14px 30px -16px rgba(43, 21, 0, .4); color: var(--ink); text-decoration: none; text-align: left; transition: transform .3s var(--spring); } .ig-handle:hover { transform: translateY(-2px); } .ig-logo { width: 46px; height: 46px; flex: none; } .ig-handle b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: 16px; letter-spacing: -.02em; } .ig-handle small { font-size: 13px; color: var(--ink-soft); } .marquee { overflow: hidden; padding: 10px 0; } .marquee-track { display: flex; gap: 16px; width: max-content; animation: marq 80s linear infinite; } .marquee.rev .marquee-track { animation-direction: reverse; animation-duration: 95s; } .marquee:hover .marquee-track, body.paused .marquee-track { animation-play-state: paused; } @keyframes marq { to { transform: translateX(calc(-50% - 8px)); } } .reel { position: relative; flex: none; display: block; width: clamp(150px, 13vw, 196px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #F4EFE4; box-shadow: 0 16px 30px -18px rgba(43, 21, 0, .5); transition: transform .35s var(--spring), box-shadow .35s; } .reel:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 24px 40px -20px rgba(43, 21, 0, .6); } .reel img, .reel video { width: 100%; height: 100%; object-fit: cover; } .reel-ig { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(4px); } .reel-ig svg { width: 17px; height: 17px; } .btn-ig { --top: #F2608E; --bot: #D6249F; --lip: #9A1672; --fg: var(--white); --glow: rgba(214, 36, 159, .42); } .btn-ig::before { opacity: .5; } @media (max-width: 760px) { .why-bento { grid-template-columns: 1fr; grid-template-rows: none; } .wb-belong { grid-row: auto; min-height: 420px; } .wb-edge { grid-column: auto; min-height: 360px; } .wb-respect, .wb-identity { min-height: 300px; } .reel { width: 140px; } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } } /* ===================================================================== BOOK DETAIL ===================================================================== */ .pdp { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(64px, 8vw, 100px); } .pdp.b1 { background: linear-gradient(180deg, #FFF3CF 0%, #FFE0A3 100%); } .pdp.b3 { background: linear-gradient(180deg, #FFEAF0 0%, #FFD0DC 100%); } .pdp.b4 { background: linear-gradient(180deg, #E4F5FF 0%, #BFE6FB 100%); } .crumb { max-width: 1240px; margin: 0 auto 22px; font-family: var(--f-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .crumb a { text-decoration: none; } .crumb a:hover { color: var(--ink); } .pdp-inner { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .pdp-art { position: relative; height: clamp(460px, 48vw, 640px); display: grid; place-items: center; } .pdp-cover { position: relative; z-index: 2; width: clamp(230px, 24vw, 330px); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 80px -34px rgba(43, 21, 0, .6), 0 10px 20px -10px rgba(43, 21, 0, .3); transform: rotate(-4deg) translate(var(--px, 0px), var(--py, 0px)); transition: transform .6s var(--spring); } .pdp-art:hover .pdp-cover { transform: rotate(0deg) translateY(-8px) scale(1.02); } .pdp-art .stage-sun { top: 50%; width: 100%; } .pdp-art .say { z-index: 3; } .pdp-art .say-a { left: 0; top: 16%; } .pdp-art .say-b { right: 0; bottom: 22%; animation-delay: -2.5s; } .pdp-saqr { position: absolute; z-index: 3; right: 2%; bottom: 0; width: clamp(110px, 11vw, 160px); filter: drop-shadow(0 14px 18px rgba(43, 21, 0, .2)); } .pdp-kicker { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; } .b1 .pdp-kicker { color: var(--amber); } .b3 .pdp-kicker { color: #D6406A; } .b4 .pdp-kicker { color: var(--deep); } .pdp h1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(38px, 4.6vw, 66px); line-height: 1; letter-spacing: -.045em; margin: 0 0 18px; } .pdp .lede { color: #5A4128; } .checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; } .checks li { display: flex; align-items: center; gap: 12px; font-weight: 500; } .checks .tick { width: 26px; height: 26px; } .checks .tick svg { width: 13px; height: 13px; } .buybox { padding: 22px; border-radius: 30px; background: var(--white); box-shadow: var(--soft-lg); } .buybox-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .buybox .price strong { font-size: clamp(34px, 3.2vw, 44px); } .buybox .price small { font-size: 14px; color: var(--ink-soft); max-width: 16ch; line-height: 1.3; } .buybox ul { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(43, 21, 0, .08); display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); } .buybox li::before { content: "✦ "; color: var(--gold); } .part-of { margin: 16px 0 0; font-size: 15px; } .part-of a { font-weight: 700; color: var(--deep); } .chapter-list { list-style: none; max-width: 1000px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; counter-reset: ch; } .chapter-list li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; background: var(--white); font-family: var(--f-disp); font-weight: 700; font-size: 17px; letter-spacing: -.02em; box-shadow: 0 1px 2px rgba(43, 21, 0, .05), 0 14px 30px -24px rgba(43, 21, 0, .5); transition: transform .3s var(--spring); } .chapter-list li:hover { transform: translateX(6px); } .chapter-list li::before { counter-increment: ch; content: counter(ch, decimal-leading-zero); flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-family: var(--f-mono); font-size: 14px; background: var(--sun-1); color: var(--ink); } .b3-list li::before { background: #FFD3DE; } .b4-list li::before { background: #CDEBFF; } .worlds { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .world { position: relative; display: block; border-radius: 26px; overflow: hidden; background: var(--white); box-shadow: var(--soft); text-decoration: none; transition: transform .45s var(--spring), box-shadow .45s; } .world:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--soft-lg); } .world img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 70%; transition: transform .8s var(--ease); } .world:hover img { transform: scale(1.06); } .world div { padding: 12px 14px 16px; } .world b { display: block; font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); } .world span { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.2; margin-top: 3px; } .reader-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 90px); align-items: center; } .reader-card { position: relative; border-radius: 34px; background: var(--white); padding: 22px; box-shadow: var(--soft-lg); } .rc-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--cream); font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); margin-bottom: 22px; } .rc-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FFB3A6; } .rc-bar i + i { background: #FFD66B; } .rc-bar i + i + i { background: #8FE0AE; margin-right: 8px; } .rc-ch { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin: 0 0 12px; } .rc-line { font-family: var(--f-disp); font-weight: 800; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.03em; line-height: 1.1; margin: 0; } .rc-line mark { background: linear-gradient(transparent 55%, rgba(255, 201, 60, .75) 55%); color: inherit; padding: 0 2px; background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1s var(--ease) .3s; } .in .rc-line mark, .reader-card.in mark { background-size: 100% 100%; } .rc-ar { font-family: var(--f-ar); color: var(--amber); font-size: 26px; margin: 6px 0 2px; direction: rtl; text-align: left; } .rc-en { color: var(--ink-soft); margin: 0 0 18px; } .rc-actions { display: flex; gap: 10px; flex-wrap: wrap; } .rc-actions span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-family: var(--f-disp); font-weight: 600; font-size: 13px; background: var(--cream); } .rc-actions span:first-child { background: var(--g-gold); box-shadow: var(--glow-gold); } .rc-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .feat-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .feat-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--white); box-shadow: 0 12px 26px -22px rgba(43, 21, 0, .5); font-weight: 600; font-size: 15px; line-height: 1.3; } .feat-list .ing-ico { width: 40px; height: 40px; border-radius: 13px; } .feat-list .ing-ico svg { width: 18px; height: 18px; } .upsell { max-width: 1180px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 40px; background: linear-gradient(120deg, #FFD55C 0%, #FFB147 50%, #FF8E52 100%); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; box-shadow: 0 40px 80px -40px rgba(232, 110, 0, .8); } .upsell::before { content: ""; position: absolute; left: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 214, .7), transparent 70%); } .upsell > * { position: relative; } .upsell .best-tag { display: inline-block; font-family: var(--f-mono); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--white); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; } .upsell h2 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.035em; line-height: 1.05; margin: 0 0 10px; } .upsell p { margin: 0 0 20px; font-size: 17px; max-width: 44ch; color: #4A2A08; } .upsell .fan { position: relative; left: auto; bottom: auto; width: 320px; height: 290px; } .upsell .fan-sm .fan-book { width: 128px; } .upsell .fan-sm .fb-m { width: 148px; } .upsell .fan .fan-book { left: 50%; bottom: 0; } .buybar { display: none; } /* ===================================================================== FREE HANDBOOK ===================================================================== */ .gift { position: relative; overflow: hidden; background: linear-gradient(180deg, #DDF2FF 0%, #BFE6FB 60%, #FFE7CF 100%); padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(72px, 9vw, 120px); } .gift-inner { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 6vw, 90px); align-items: center; } .gift-art { position: relative; height: clamp(460px, 46vw, 620px); display: grid; place-items: center; } .gift-cover { position: relative; z-index: 2; width: clamp(220px, 22vw, 300px); border-radius: 14px; box-shadow: 0 50px 80px -34px rgba(11, 60, 110, .7); transform: rotate(-5deg); transition: transform .6s var(--spring); animation: floaty 6s ease-in-out infinite; } .gift-art:hover .gift-cover { transform: rotate(0) scale(1.03); } @keyframes floaty { 50% { translate: 0 -12px; } } .gift-ribbon { position: absolute; z-index: 3; top: 12%; right: 10%; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--g-sun); color: var(--white); font-family: var(--f-disp); font-weight: 800; font-size: 15px; line-height: 1.05; box-shadow: 0 16px 30px -12px rgba(242, 84, 27, .8); animation: spinSlow 16s linear infinite; } .gift-ribbon span { animation: spinBack 16s linear infinite; } @keyframes spinSlow { to { transform: rotate(360deg); } } @keyframes spinBack { to { transform: rotate(-360deg); } } .gift-saqr { position: absolute; z-index: 3; left: 0; bottom: 2%; width: clamp(110px, 12vw, 170px); filter: drop-shadow(0 14px 18px rgba(11, 60, 110, .25)); } .claim { padding: clamp(22px, 3vw, 32px); border-radius: 34px; background: var(--white); box-shadow: var(--soft-lg); } .claim h2 { font-family: var(--f-disp); font-weight: 700; font-size: 20px; letter-spacing: -.02em; margin: 0 0 16px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .field input { padding: 16px 20px; border-radius: 18px; border: 0; background: var(--cream); font: inherit; font-size: 17px; color: var(--ink); outline: none; transition: box-shadow .2s, background-color .2s; } .field input:focus { background: var(--white); box-shadow: 0 0 0 3px var(--sun-1), 0 10px 20px -14px rgba(232, 138, 0, .8); } .consent { font-size: 13px; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.5; } .consent a { color: var(--deep); font-weight: 600; } .skip { display: block; margin: 14px auto 0; text-align: center; font-weight: 600; font-size: 15px; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .gift-foot { margin: 18px 0 0; font-size: 14px; color: #36506A; } /* ---------- Responsive additions ---------- */ @media (max-width: 1100px) { .talk-grid { grid-template-columns: repeat(2, 1fr); } .worlds { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1000px) { .home-hero { height: auto; min-height: 0; background-size: 100% auto; padding-top: 56vw; background-color: var(--paper); align-items: flex-start; } .home-hero::before { background: linear-gradient(180deg, rgba(255, 251, 242, 0) 0%, rgba(255, 251, 242, 0) calc(56vw - 120px), var(--paper) 56vw); } .home-hero .say-saqr { top: calc(62.5vw * .3); left: auto; right: 3%; } .kb { animation: none; } .coll-inner, .suite-grid, .reader-grid, .pdp-inner, .gift-inner, .talk-video { grid-template-columns: 1fr; } .coll-art { height: 360px; } .talk-video .phone { justify-self: center; } .voices.six { grid-template-columns: 1fr 1fr; max-width: none; } .upsell { grid-template-columns: 1fr; } .upsell .fan { margin: 0 auto; } .pdp-art { height: 460px; } .gift-art { height: 440px; } } @media (max-width: 760px) { .home-hero .hero-title { font-size: 44px; } .home-hero { background-size: 170% auto; background-position: 75% 0; padding-top: 92vw; } .home-hero::before { background: linear-gradient(180deg, rgba(255, 251, 242, 0) 0%, rgba(255, 251, 242, 0) calc(92vw - 110px), var(--paper) 92vw); } .home-hero .say-saqr { top: 58vw; right: 3%; } .hero-ctas .btn { flex: 1 1 100%; } .price-cards { grid-template-columns: 1fr; } .talk-grid { grid-template-columns: 1fr; } .feat { min-height: 0; } .vs-head { display: none; } .vs-row { grid-template-columns: 1fr; gap: 6px; padding: 8px; border-radius: 28px; background: rgba(255, 255, 255, .4); } .vs-row .k { background: none; padding: 8px 12px 0; } .vs-row > * { padding: 14px 16px; } .voices.six { grid-template-columns: 1fr; } .worlds { grid-template-columns: repeat(2, 1fr); gap: 12px; } .feat-list { grid-template-columns: 1fr; } .screen { min-height: 400px; padding: 16px; } .pdp-art { height: 400px; } .pdp-cover { width: 210px; } .pdp-saqr { width: 96px; } .buybar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 80; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: var(--soft-lg); transform: translateY(140%); transition: transform .45s var(--spring); } .buybar.show { transform: none; } .buybar b { font-family: var(--f-disp); font-size: 15px; display: block; line-height: 1.1; } .buybar small { font-size: 12px; color: var(--ink-soft); } .buybar .btn { padding: 12px 20px; font-size: 13px; } .has-buybar .preview-pill { bottom: 84px; } .gift-art { height: 380px; } .gift-cover { width: 200px; } .gift-ribbon { width: 80px; height: 80px; font-size: 13px; right: 4%; } } /* ---------- Preview pill ---------- */ .preview-pill { position: fixed; right: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: var(--soft); font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .preview-pill a { text-decoration: none; padding: 5px 6px; border-radius: 999px; } .preview-pill a:hover, .preview-pill a[aria-current] { background: var(--sun-1); } .preview-pill button { font: inherit; font-weight: 700; background: var(--sun-1); border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; } /* ---------- Scroll reveal ---------- */ .js [data-pop] { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .5s ease, transform .8s var(--spring); transition-delay: var(--d, 0s); } .js [data-pop].in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; text-align: left; } .hero-stage { height: 420px; order: -1; margin-top: -10px; } #bundle .hero-stage .fan { left: 50%; } .hero { min-height: 0; } .meet-inner { grid-template-columns: 1fr; } .meet-art { width: 100%; max-width: 520px; margin: 0 auto; padding-top: 150px; } .meet-art .meet-saqr { width: 130px; right: 8%; } .meet-copy { display: contents; } .meet-copy > h2 { order: 1; } .meet-lede { order: 2; } .meet-art { order: 3; } .ingredients { order: 4; } .meet-copy > .btn { order: 5; } .meet-inner { gap: 0; } .meet-art { margin-bottom: 8px; } .sc-device { height: 330px; } .tiles { grid-template-columns: 1fr; max-width: 460px; } .watch-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .watch-lede { margin-left: auto; margin-right: auto; } .voices { grid-template-columns: 1fr; max-width: 560px; } .final-inner { grid-template-columns: 1fr; } .final-art { height: 360px; order: -1; } } @media (max-width: 760px) { body { font-size: 16px; } .nav { grid-template-columns: auto 1fr; } .nav-left, .nav-login { display: none; } .brand { font-size: 20px; } .hero-stage { height: 370px; } .fan-book { width: 118px; } .fb-m { width: 140px; } .hero-saqr { width: 112px; right: 0; } .hero .say-1 { left: 0; top: 4%; } .hero .say-2 { right: 0; top: auto; bottom: calc(3% + 150px); } .hero-stage .fan, .coll-art .fan { left: 42%; bottom: 12%; } #bundle .hero-stage .fan { left: 50%; } .hero-stage .fan-book, .coll-art .fan-book { width: 100px; } .hero-stage .fb-m, .coll-art .fb-m { width: 122px; } .hero-stage .hero-saqr, .coll-art .hero-saqr { width: 96px; right: -2%; } .hero-buy .btn { width: 100%; } .hero-sky { background: linear-gradient(180deg, rgba(56, 174, 245, .35) 0%, rgba(56, 174, 245, .08) 35%, rgba(255, 251, 242, .8) 55%, rgba(255, 251, 242, .95) 100%); } .pick-head { grid-template-columns: 1fr; } .flank { display: none; } .ch { width: 168px; } .book-tabs button { padding: 10px 13px; font-size: 12px; } .promise-inner, .free-inner { flex-direction: column; text-align: center; } .foot-links { grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .stat-row { gap: 8px; } .fan-sm .fan-book { width: 110px; } .fan-sm .fb-m { width: 130px; } .final-art { height: 300px; } .final-title { font-size: 34px; } .nav-right .btn-sm { padding: 10px 14px; font-size: 11px; white-space: nowrap; } .foot-form { flex-wrap: nowrap; } .foot-form input { flex: 1 1 auto; } .foot-form .btn { flex: none; } .suite-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 22px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 8px; scrollbar-width: none; } .suite-tabs::-webkit-scrollbar { display: none; } .suite-tabs button { flex: none; padding: 8px 16px 8px 8px; border-radius: 999px; gap: 10px; } .suite-tabs button[aria-selected="true"] { transform: none; } .suite-tabs small { display: none; } .suite-tabs .ing-ico { width: 34px; height: 34px; border-radius: 50%; } .suite-tabs b { font-size: 14px; } .preview-pill { padding: 4px; } .preview-pill button { padding: 6px 9px; } .preview-pill span, .preview-pill a { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } .js [data-pop] { opacity: 1; transform: none; transition: none; } } /* A continuous illustrated section, fading softly beneath the feature row. */ .sect.talk-art { padding-top: 0; background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) calc(100% - 120px), #E3F9F1 100%); } .talk-scene { box-sizing: border-box; margin-inline: calc(-1 * var(--gutter)); padding: clamp(40px, 4vw, 56px) var(--gutter) 64px; min-height: max(740px, 57.2vw); background-image: linear-gradient(to bottom, #FFF3D6 0%, rgba(255, 243, 214, .85) 4%, rgba(255, 243, 214, .35) 11%, transparent 20%, transparent 78%, rgba(255, 244, 222, .35) 88%, var(--cream) 100%), url("assets/talk-back-together-v12.webp"); background-position: center top; background-size: cover; background-repeat: no-repeat; } .talk-scene .talk-video { margin-bottom: 0; } .talk-art .talk-grid { position: relative; margin-top: -48px; } @media (max-width: 1000px) { .talk-scene { min-height: 0; background-position: left top; } .talk-art .talk-grid { margin-top: -20px; } } /* Carry the hero into the collection and give the real covers a quiet stage. */ .home-hero::after { content: ""; position: absolute; inset: auto 0 0; height: clamp(32px, 4vw, 58px); background: linear-gradient(to bottom, rgba(255, 251, 240, 0) 0%, rgba(255, 251, 240, .18) 45%, #FFFBF0 100%); pointer-events: none; } .coll-art .fan { left: 50%; } .coll-art .stage-sun { left: 50%; top: 49%; width: 94%; background: radial-gradient(ellipse, rgba(255, 199, 61, .48), rgba(255, 216, 132, .2) 48%, transparent 72%); animation: none; } @media (max-width: 1000px) { .home-hero::after { height: 28px; } .coll-art { width: min(100%, 520px); margin-inline: auto; } } @media (max-width: 760px) { .coll-art { height: 345px; } .coll-art .fan { left: 50%; bottom: 12%; } .coll-art .fan-book { width: 112px; } .coll-art .fb-m { width: 136px; } } /* Quiet shop surfaces keep attention on the covers. */ .pick.band-sky { background: linear-gradient(180deg, #EAF7FB 0%, #F5FAF6 48%, #FFF4DE 100%); } .pick .wave-top { fill: #EAF7FB; } .pick .tile-art::before { display: none; } .pick .tile-1 .tile-art { background: radial-gradient(ellipse at 50% 35%, #FFF2C6, #F5CC80 74%, #EABB75); } .pick .tile-3 .tile-art { background: radial-gradient(ellipse at 50% 35%, #FFF0E8, #EAC7B6 74%, #DFAF9B); } .pick .tile-4 .tile-art { background: radial-gradient(ellipse at 50% 35%, #E5F8F5, #A9D9D5 74%, #83BFBD); } .pick .flank { height: 150px; width: 150px; object-fit: contain; } @media (max-width: 760px) { .pick-head { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; } .pick .flank-l { display: block; width: 74px; height: 88px; } .pick .flank-r { display: none; } .pick-head .display { font-size: clamp(27px, 7vw, 40px); text-align: left; } } /* A calm setting for the actual interactive book demo. */ .shop-study { background: linear-gradient(to bottom, #FFF4DE 0%, rgba(255,244,222,.45) 8%, transparent 19%, transparent 81%, #FFF4DE 100%), url("assets/shop-study-v1.webp") center / cover no-repeat; } .shop-study .meet-art { padding-top: 0; padding-bottom: 0; } .shop-study .ing { background: rgba(255,255,255,.88); } @media (max-width: 1000px) { .shop-study { background-color: #FFF4DE; background-size: auto, auto 720px; background-position: center, left 130px; } .shop-study .meet-art { margin-block: 24px; } .shop-study::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #FFF4DE 0, #FFF4DE 210px, rgba(255,244,222,.25) 410px, transparent 650px); pointer-events: none; } } /* Light and texture give the demo breathing room between illustrated sections. */ .watch.watch-light { background: linear-gradient(to bottom, #FFF4DE 0%, rgba(255,244,222,0) 14%, rgba(255,244,222,0) 86%, #FFF4DE 100%), url("assets/shop-watch-light-v2.webp") right center / 100% 100% no-repeat; } @media (max-width: 760px) { .watch.watch-light { background-size: auto, auto 100%; background-position: center, 45% center; } } /* One calm collection heading; the covers carry the brand characters. */ .pick.band-sky { background: linear-gradient(to bottom, rgba(255,251,240,.35), rgba(255,244,222,0) 35%, #FFF4DE 85%), url("assets/shop-picker-light-v2.webp") center top / 100% auto no-repeat, #FFF4DE; } .pick .wave-top { fill: #FFFBF0; } .pick-head { display: block; } .pick-head .display { text-align: center; } @media (max-width: 760px) { .pick.band-sky { background-size: auto, auto 520px; background-position: center, 65% top; } .pick-head .display { font-size: clamp(32px, 8vw, 40px); } } /* Keep the collection clean after rejecting decorative backdrops. */ .pick.band-sky { background: linear-gradient(180deg, #FFFBF0, #FFF4DE); } /* ---------- Motion pass (2026-09-26) ---------- */ /* Reviews arrive like chat messages: typing dots, then the bubble. */ .voice.pending { opacity: 0; transform: translateY(14px); } .voice.typing, .voice.said { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s var(--spring); } .voice .typing-dots { position: absolute; left: 0; bottom: 0; display: none; gap: 5px; align-items: center; padding: 15px 18px; border-radius: 22px 22px 22px 6px; background: var(--bub, #fff); box-shadow: var(--soft); } .voice .typing-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(43, 21, 0, .4); animation: typeDot 1s ease-in-out infinite; } .voice .typing-dots i:nth-child(2) { animation-delay: .15s; } .voice .typing-dots i:nth-child(3) { animation-delay: .3s; } @keyframes typeDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } } .voice.typing blockquote { background: transparent; box-shadow: none; color: transparent; } .voice.typing blockquote::after, .voice.typing .stars { visibility: hidden; } .voice.typing .typing-dots { display: flex; } .voice.said blockquote { transform-origin: 30px 100%; animation: bubPop .55s var(--spring) both; } @keyframes bubPop { from { opacity: 0; transform: scale(.55); } } .stars i { display: inline-block; font-style: normal; } .voice.said .stars i { animation: starOn .35s var(--spring) both; animation-delay: calc(.3s + var(--k) * .08s); } @keyframes starOn { from { color: rgba(43, 21, 0, .15); transform: scale(.4); } } /* Demo phones play silently in view; a tap turns the sound on. */ .snd { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 10px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); font: 700 12px var(--f-body); color: var(--ink); cursor: pointer; box-shadow: 0 8px 18px -10px rgba(43, 21, 0, .5); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s, transform .4s var(--spring); } .snd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .phone.auto .snd { opacity: 1; transform: none; pointer-events: auto; } .snd:hover { transform: scale(1.05); } /* Page transition: the shop cover grows into the book page cover. */ @view-transition { navigation: auto; } .nav { view-transition-name: site-nav; } ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .9, .3, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; } /* Reader demo: a pen draws the highlight, then the practice chip presses itself. */ .rc-line mark { position: relative; } .rc-pen { position: absolute; left: 0; bottom: 4px; width: 26px; height: 26px; margin-left: -6px; opacity: 0; pointer-events: none; color: #D98A00; filter: drop-shadow(0 4px 6px rgba(120, 60, 0, .3)); } .rc-pen svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .reader-card.hl .rc-line mark { background-size: 0% 100%; transition: none; } .reader-card.hl.go .rc-line mark { background-size: 100% 100%; transition: background-size 1.1s cubic-bezier(.5, 0, .3, 1); } .reader-card.hl.go .rc-pen { animation: penRide 1.1s cubic-bezier(.5, 0, .3, 1) forwards; } @keyframes penRide { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; left: 100%; } } .rc-actions span { transition: transform .15s ease, box-shadow .15s ease; } .reader-card.hl.press .rc-actions span:first-child { transform: translateY(3px) scale(.97); box-shadow: 0 2px 6px -2px rgba(232, 138, 0, .6); } .rc-saved { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 12px; border-radius: 99px; background: #D8F6E3; color: #157A41; font: 700 13px var(--f-body); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--spring); } .rc-saved svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .reader-card.hl.saved .rc-saved { opacity: 1; transform: none; } /* FAQ answers open smoothly where the browser supports it. */ .qa-list { interpolate-size: allow-keywords; } .qa-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.3, .9, .3, 1), content-visibility .4s allow-discrete; } .qa-list details[open]::details-content { block-size: auto; } .qa-list details[open] p { animation: scRise .45s var(--spring) both; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .qa-list details::details-content { transition: none; } } /* Shared consent surface in the refreshed brand. */ body .lsany-consent{background:#fffbf2;border-top:1px solid #eee5d6;box-shadow:0 -8px 32px rgba(43,21,0,.08);gap:14px;padding:16px 24px calc(16px + env(safe-area-inset-bottom))} body .lsany-consent-text{font-size:13px;line-height:1.55;color:#725f4c} body .lsany-consent-text a{color:#2b1500} body .lsany-consent-btn{min-height:44px;border-radius:14px;padding:10px 22px;border:1px solid #e7dfd2;box-shadow:none} body .lsany-consent-accept{background:linear-gradient(180deg,#ffdf6b,#ffcb25);border-color:#ffd85a;box-shadow:inset 0 2px 0 #fff2b1,0 3px 0 #dfa000} body .lsany-consent-decline{background:#fff;border-color:#e7dfd2;box-shadow:none} body .lsany-consent-accept:hover,body .lsany-consent-decline:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(43,21,0,.08)} @media(max-width:560px){body .lsany-consent{padding:14px 18px calc(14px + env(safe-area-inset-bottom));gap:12px}body .lsany-consent-text{flex-basis:100%}body .lsany-consent-actions{width:100%}} /* Portrait artwork composed specifically for the phone shop hero. */ @media(max-width:760px){ #bundle.hero{background-image:url('assets/shop-hero-phone-v2.webp');background-size:100% auto;background-position:center top;background-repeat:no-repeat;background-color:#fffbf2} #bundle .hero-sky{background:none} } #bundle .hero-payment-logos{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0 0;max-width:430px} #bundle .hero-payment-logos img{display:block;object-fit:contain;height:24px;width:auto;max-width:56px} @media(max-width:760px){ #bundle .hero-inner{padding-top:16px;gap:12px} #bundle .hero-stage{height:clamp(230px,64vw,280px);margin-top:0} #bundle .hero-copy .eyebrow{margin-bottom:12px} #bundle .hero-copy .hero-lede{margin-top:18px;margin-bottom:20px} #bundle .hero-buy{gap:16px} #bundle .hero-payment-logos{margin-top:14px;max-width:none} } #bundle .hero-payment-cta{display:grid;gap:0} @media(max-width:760px){#bundle .hero-payment-cta{width:100%}#bundle .hero-sky{background:linear-gradient(to bottom,transparent 260px,#fffbf2 420px)}} .shop-palm-canvas{position:absolute;pointer-events:none;z-index:0;max-width:none!important} .shop-palm-canvas[hidden]{display:none} @media(prefers-reduced-motion:reduce){.shop-palm-canvas{display:none}} /* Center the mobile demo introduction over a calm, readable part of the scene. */ @media(max-width:1000px){ .talk-scene .talk-video > div:first-child{text-align:center;} .talk-scene .talk-video .display{margin-inline:auto;} .talk-scene .talk-video .lede{margin-inline:auto;} .talk-scene .talk-video .display .accent{text-shadow:0 2px 16px #fff3d6;} .talk-scene{background-image:linear-gradient(to bottom,#fff3d6 0%,rgba(255,243,214,.94) 15%,rgba(255,243,214,.75) 28%,transparent 43%,transparent 78%,var(--cream) 100%),url("assets/talk-back-together-v12.webp");} } /* Keep the upgrade note connected to the included-features section. */ #books.pick{padding-bottom:clamp(24px,3vw,36px)} #books + .shop-study{padding-top:clamp(28px,3vw,44px)} /* Bring the book selection closer to the shop hero. */ #bundle + #books{padding-top:clamp(28px,3vw,44px)} @media(max-width:1000px){#bundle .hero-inner{padding-bottom:24px}} /* Close the gap between homepage artwork and copy on phones. */ @media(max-width:760px){.home-hero .hero-inner{padding-top:6px}} /* Simplify the phone shop hero and lift the purchase content slightly. */ @media(max-width:760px){#bundle .hero-copy>.eyebrow{display:none}#bundle .hero-inner{gap:20px}} /* Give the phone shop heading a little breathing room below the artwork. */ @media(max-width:760px){#bundle .hero-title{position:relative;top:8px}} /* Shop hero: hold the live book covers in a clear scene and keep every badge together. */ #bundle.hero { background-image: url("/theme/20260926/assets/shop-hero-desktop-v2.webp"); background-position: center center; background-color: #fffbf2; } #bundle .hero-sky { background: linear-gradient(90deg, rgba(255,251,242,.22), transparent 54%); } #bundle .hero-checks { flex-wrap: nowrap; gap: 5px; font-size: 12px; } #bundle .hero-checks li { white-space: nowrap; min-width: 0; gap: 5px; padding: 7px 8px 7px 7px; } #bundle .hero-checks svg { width: 14px; height: 14px; flex: none; } @media (max-width: 760px) { #bundle.hero { background-image: url("/theme/20260926/assets/shop-hero-phone-v2.webp"); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } #bundle .hero-sky { background: linear-gradient(to bottom, transparent 190px, rgba(255,251,242,.18) 230px, #fffbf2 330px); } #bundle .hero-checks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; width: 100%; font-size: 10px; } #bundle .hero-checks li { justify-content: center; padding: 7px 3px; gap: 3px; } #bundle .hero-checks svg { width: 11px; height: 11px; } } @media (max-width: 350px) { #bundle .hero-checks { font-size: 9px; } } /* Give the talk-back section a real introduction, and put the CTA below the demo. */ .talk-art { padding-top: 0; } .talk-intro { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; padding: clamp(52px,6vw,82px) 20px 36px; text-align: center; } .talk-intro .display { margin: 0 auto 18px; } .talk-intro .lede { max-width: 680px; margin: 0 auto; } .talk-scene { min-height: 690px; padding-top: 35px; padding-bottom: 56px; background-position: center center; } .talk-scene .talk-video { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,390px); min-height: 590px; align-items: center; margin: 0 auto; } .talk-demo { grid-column: 2; display: grid; justify-items: center; gap: 18px; width: 100%; box-sizing: border-box; padding: 20px; border: 1px solid rgba(255,255,255,.7); border-radius: 34px; background: rgba(255,251,242,.84); box-shadow: 0 26px 60px -30px rgba(43,21,0,.35); backdrop-filter: blur(10px); } .talk-demo .phone { margin: 0; } .talk-cta { width: min(100%,310px); box-sizing: border-box; text-align: center; } .talk-art .talk-grid { margin-top: 0; } @media (max-width: 1000px) { .talk-scene .talk-video { grid-template-columns: 1fr; min-height: 0; } .talk-demo { grid-column: 1; width: min(390px,100%); margin-left: auto; } } @media (max-width: 760px) { .talk-intro { padding: 54px 18px 26px; } .talk-intro .display { font-size: clamp(36px,10vw,48px); } .talk-scene { min-height: 0; padding: clamp(225px,75vw,310px) 18px 28px; background-image: linear-gradient(to bottom, transparent 18%, rgba(255,251,242,.12) 48%, var(--cream) 95%), url("assets/lsany-mobile-talk-back.webp"); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: var(--cream); } .talk-demo { margin: 0 auto; padding: 14px; border-radius: 26px; } .talk-cta { width: 100%; } .talk-art .talk-grid { margin-top: 0; } } /* Shop feature screens are real small interactions. */ .sc-screen:not(.on) { pointer-events: none; } .sc-screen button { font: 700 14px var(--f-body); cursor: pointer; } .sc-screen button:focus-visible { outline: 3px solid #ffb300; outline-offset: 3px; } .sc-word { display: grid; gap: 4px; border: 0; background: transparent; color: inherit; padding: 6px 18px; border-radius: 16px; } .sc-word:hover { background: #fff1c9; } .sc-word .sc-tl, .sc-word .sc-ar { display: block; } .sc-hint { margin: 7px 0 0; font: 500 12px/1.35 var(--f-body); color: #7a684f; } .sc-audio-play, .sc-save { border: 0; border-radius: 999px; background: #1c8fe0; color: #fff; min-height: 42px; padding: 9px 18px; box-shadow: 0 4px 0 #176fae; } .sc-audio-play { margin-top: 4px; } .sc-hear .sc-eq i { animation: none; } .sc-hear.audio-playing .sc-eq i { animation: scEq .9s ease-in-out infinite alternate; } .sc-tiles { max-width: 360px; gap: 10px; } .sc-tiles-col { display: grid; gap: 10px; } .sc-tiles button, .sc-use-choices button { border: 0; border-radius: 14px; background: #fff5ea; color: #351c08; padding: 11px 7px; min-height: 47px; box-shadow: inset 0 -3px 0 #ffe0c2; } .sc-tiles button.selected, .sc-use-choices button.selected { background: #ffe0a8; box-shadow: inset 0 0 0 2px #f07a1a; } .sc-tiles button.done, .sc-use-choices button.done { background: #d8f6e3; color: #157a41; box-shadow: inset 0 0 0 2px #16a558; } .sc-tiles button.miss, .sc-use-choices button.miss { background: #ffe1e1; box-shadow: inset 0 0 0 2px #e5484d; } .sc-use-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sc-use .sc-bub.you[hidden], .sc-read .sc-en[hidden] { display: none; } .sc-save { background: #2ec66d; box-shadow: 0 4px 0 #178344; margin-top: 5px; } .sc-save[aria-pressed="true"] { background: #157a41; } @media (max-width: 760px) { .sc-device { min-height: 395px; } .sc-screen { padding: 18px; } } /* 2026-09-27: place the talk-back copy in the open sky and fade the art. */ .sect.band-sun.tight-b { padding-bottom: clamp(18px, 2vw, 30px); } .sect.talk-art { padding-top: 0; padding-bottom: clamp(42px, 5vw, 70px); background: var(--cream); } .talk-scene { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 390px); align-items: center; gap: clamp(28px, 4vw, 64px); min-height: clamp(590px, 53vw, 730px); box-sizing: border-box; padding: clamp(28px, 3vw, 48px) max(var(--gutter), calc((100vw - 1320px)/2)) clamp(20px, 2.5vw, 36px); margin-inline: calc(-1 * var(--gutter)); background: var(--cream) !important; } .talk-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(255,243,214,.42), rgba(255,243,214,.08) 52%, transparent 76%), url('assets/talk-back-together-v12.webp') center top / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 86%, transparent 100%); } .talk-intro { grid-column: 1; align-self: start; max-width: 570px; padding: clamp(55px, 7vw, 104px) 0 0; margin: 0; text-align: left; } .talk-intro .display, .talk-intro .lede { margin-left: 0; margin-right: 0; } .talk-intro .lede { max-width: 32ch; } .talk-scene .talk-video { grid-column: 2; display: block; min-height: 0; margin: 0; } .talk-art .talk-grid { margin-top: -12px; } @media (max-width: 1000px) { .talk-scene { grid-template-columns: minmax(0, 1fr) minmax(260px, 350px); } .talk-demo { grid-column: auto; margin: 0; } } @media (max-width: 760px) { .sect.band-sun.tight-b { padding-bottom: 12px; } .talk-scene { display: block; min-height: 0; padding: 20px 18px 32px; } .talk-scene::before { inset: 0 0 auto; height: clamp(600px, 175vw, 740px); background: linear-gradient(to bottom, rgba(255,243,214,.24), transparent 36%), url('assets/lsany-mobile-talk-back.webp') center top / 100% auto no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 62%, transparent 100%); } .talk-intro { padding: clamp(35px, 8vw, 55px) 0 0; margin: 0 auto; text-align: center; } .talk-intro .display, .talk-intro .lede { margin-left: auto; margin-right: auto; } .talk-intro .lede { max-width: 31ch; } .talk-scene .talk-video { display: block; margin: clamp(150px, 38vw, 205px) auto 0; } .talk-demo { width: min(390px, 100%); margin: 0 auto; } .talk-art .talk-grid { margin-top: 0; } } /* Keep the bundle trust row above every scenic and decorative layer. */ #bundle .hero-sky { z-index: 0; } #bundle .hero-copy { position: relative; z-index: 5; } #bundle .hero-stage { z-index: 1; } #bundle .hero-checks { position: relative; z-index: 6; } #bundle .hero-checks li { position: relative; z-index: 1; background: #fffdfa; box-shadow: 0 3px 13px rgba(43,21,0,.08); backdrop-filter: none; } /* The shop uses the exact same seven-station Suite, over softly fading art. */ .shop-study.ebook-suite-tour.sp-plus { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(24px, 3vw, 40px) !important; background: #fff4de !important; } .shop-study.ebook-suite-tour.sp-plus::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('assets/shop-study-v1.webp') left center / auto 760px no-repeat; opacity: .58; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 69%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 69%, transparent 100%); } .shop-study.ebook-suite-tour.sp-plus::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, transparent 0%, rgba(255,244,222,.5) 55%, #fff4de 94%); } .shop-study .ms-heading { position: relative; z-index: 1; } .shop-study + .watch { padding-top: clamp(30px, 4vw, 52px); } .shop-study .ms-heading h2 span { color: #16834e !important; } .shop-study .ms-explore, .shop-suite-action { position: relative; z-index: 1; } .shop-suite-action { text-align: center; margin: 30px auto 0; padding: 0 18px; } @media (max-width: 760px) { .shop-study.ebook-suite-tour.sp-plus::before { inset: 0 0 auto; height: 350px; background-size: 100% auto; background-position: center top; opacity: .45; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%); } .shop-study.ebook-suite-tour.sp-plus::after { display: none; } .shop-suite-action { margin-top: 22px; } .shop-suite-action .btn { width: min(100%, 360px); box-sizing: border-box; } } /* The Suite demonstration supplies its own visual detail. */ .shop-study.ebook-suite-tour { background: var(--cream) !important; background-image: none !important; } .shop-study.ebook-suite-tour::before, .shop-study.ebook-suite-tour::after { content: none !important; display: none !important; } /* Let the talk-back illustration frame the video, beginning below the cream introduction. */ .sect.talk-art { padding-bottom: clamp(36px, 4vw, 56px); } .talk-scene { display: block; min-height: 0; padding: 0; background: var(--cream) !important; } .talk-scene::before { content: none; } .talk-intro { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: clamp(36px, 4vw, 54px) var(--gutter) clamp(20px, 3vw, 36px); background: var(--cream); text-align: center; } .talk-intro .display, .talk-intro .lede { margin-left: auto; margin-right: auto; } .talk-intro .lede { max-width: 42ch; } .talk-scene .talk-video { position: relative; isolation: isolate; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: flex-start; width: 100%; max-width: none; min-height: 0; margin: 0; padding: clamp(70px, 7vw, 100px) max(var(--gutter), calc((100vw - 1320px)/2)) 42px; background: var(--cream); } .talk-scene .talk-video::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('assets/talk-back-together-v12.webp') center center / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 19%, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 19%, #000 91%, transparent 100%); } .talk-demo { display: grid; justify-items: center; gap: 18px; width: min(340px, 100%); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .talk-scene .talk-video > .talk-demo { padding: 0; } .talk-demo .phone { width: min(100%, 300px); margin: 0; box-shadow: 0 28px 64px -24px rgba(31, 20, 7, .5); } .talk-demo .phone-tag { display: none; } .talk-cta { width: min(100%, 300px); } .talk-art .talk-grid { margin-top: 0; } @media (max-width: 760px) { .talk-intro { padding: 28px 18px 24px; } .talk-intro .display { font-size: clamp(36px, 10vw, 48px); } .talk-intro .lede { max-width: 32ch; } .talk-scene .talk-video { justify-content: center; padding: clamp(72px, 18vw, 96px) 18px 42px; } .talk-scene .talk-video::before { background-image: url('assets/lsany-mobile-talk-back.webp'); background-position: center center; background-size: cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 91%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 91%, transparent 100%); } .talk-demo { width: min(100%, 340px); margin: 0 auto; } .talk-demo .phone { width: min(72vw, 290px); } .talk-cta { width: min(100%, 290px); } } /* Header actions use the same typeface as Log in. */ .nav .nav-right .btn-sm { font-family: var(--f-disp); font-weight: 600; } .promise img { height: auto; object-fit: contain; } @media (max-width: 640px) { .tile-art img { width: 64%; height: auto; object-fit: contain; } }