/* amethystscene.com, matched to the Squarespace template it replaces (site.css of Nov 2026: canvas 1200, 17px block padding, 12 columns). The three font variables hold stand-ins until the licensed fonts arrive: Jost for futura-pt, Figtree for proxima-nova. Swap them here only. Night mode uses the app's dark surfaces (AmethystSurface, amethystSecondary, trueAmethyst). Light is the default. */ :root { --font-caps: 'Josefin Sans', sans-serif; --font-display: 'futura-pt', 'Jost', sans-serif; --font-body: 'proxima-nova', 'Figtree', sans-serif; --page: #fcfcfc; --text: #575757; --h1: #222; --h2: #c38dce; --h2-grey: #8b888e; --h3: #d1d1d1; --link: #111; --link-hover: #444; --nav: #999; --nav-active: #111; --logo: #8a6cc4; --meta: #b3b3b3; --rule: #e6e6e6; --field: #fafafa; --field-border: #a9a9a9; --button: #272727; --button-text: #fff; /* Hairline controls: the app's shape and lavender, the site's type (2026-11-03). Ink is a deeper amethyst by day: the app's #C7B3FF is 1.8:1 on white. */ --control-ink: #6f57bd; --hero-title: #8a6cc4; --hero-grey: #6e6980; --hero-payoff: #8a6cc4; /* Whispers (the night switch, "follow the purple rabbit.."): the logo's colour, faint. */ --switch: rgba(170, 125, 166, .55); /* the logo's #aa7da6, faint */ --control-line: rgba(111, 87, 189, .55); --control-hover: rgba(199, 179, 255, .10); --field-bg: #fff; --field-line: rgba(199, 179, 255, .55); --focus-line: #c7b3ff; --focus-ring: rgba(199, 179, 255, .22); --panel: rgba(0, 0, 0, .05); --icon: #111; } :root[data-theme="dark"] { --page: #1b1a20; /* AmethystSurface page */ --text: #bcb6d0; /* amethystSecondary, dark */ --h1: #ecebf2; --h2: #c7b3ff; /* trueAmethyst */ --h2-grey: #8e89a3; --h3: #57536a; --link: #ecebf2; --link-hover: #c7b3ff; --nav: #8e89a3; --nav-active: #ecebf2; --logo: #c7b3ff; --meta: #7d7892; --rule: #34323e; --field: #26252e; /* AmethystSurface card */ --field-border: #45424f; --button: #ecebf2; --button-text: #1b1a20; --control-ink: #c7b3ff; --hero-title: #c7b3ff; --hero-grey: #bcb6d0; --hero-payoff: #c7b3ff; --switch: rgba(199, 179, 255, .55); /* the logo's #c7b3ff, faint */ --control-line: rgba(199, 179, 255, .55); --control-hover: rgba(199, 179, 255, .10); --field-bg: #26252e; --field-line: rgba(199, 179, 255, .26); --focus-line: #c7b3ff; --focus-ring: rgba(199, 179, 255, .18); --panel: #26252e; --icon: #ecebf2; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.8em; -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; } a, a:visited { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } img { display: block; max-width: 100%; } [hidden] { display: none !important; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 1em 0 .5em; } h1 { font-family: var(--font-caps); font-weight: 300; font-size: .9em; line-height: 1.2em; text-transform: uppercase; letter-spacing: .06em; color: var(--h1); } h2 { font-family: var(--font-display); font-weight: 300; font-size: 1.2em; line-height: 1.2em; letter-spacing: .06em; color: var(--h2); } h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.3em; line-height: 1.2em; text-transform: uppercase; letter-spacing: .06em; color: var(--h3); } p { margin: 0 0 1em; } ul, ol { margin: 1em 0; } blockquote { margin: 1em 0; padding: 0 0 0 1em; border-left: 1px solid var(--text); } .center { text-align: center; } .right { text-align: right; } /* Canvas, header, nav */ #canvas { box-sizing: content-box; max-width: 1200px; margin: 10px auto; padding: 50px; } #header { margin-bottom: 40px; display: flow-root; } #logo { float: left; } h1.logo { margin: 0; display: inline-block; font-family: var(--font-caps); font-weight: 285; font-size: 17px; line-height: 1.2em; text-transform: uppercase; letter-spacing: 7.5px; /* the wordmark everywhere: Josefin 285, 17, 7.5 (Lucas, 2026-11-06) */ } h1.logo a { color: var(--logo); } /* The rabbit leads the wordmark, as on the app's launch screen (rabbitLeadsTitle): the artwork's own margins trimmed, a 30pt gap, raised 4pt; sized to the 16px wordmark. */ h1.logo a { display: inline-flex; align-items: center; } .logo-rabbit { width: 30px; height: 30px; margin: 0 calc(30px - 30px * .26) 0 calc(30px * -.30); transform: translateY(-3px); } /* 30 everywhere, app included (Lucas, 2026-11-06) */ h1.logo a:hover { color: var(--link-hover); } #topNav { float: right; display: flex; align-items: center; position: relative; z-index: 890; } .main-nav { display: flex; gap: 30px; } .main-nav a, #mobileNav a { font-family: var(--font-caps); font-weight: 300; font-size: 12px; line-height: 24px; text-transform: uppercase; letter-spacing: 1px; color: var(--nav); } .main-nav a:hover, .main-nav a.active-link { color: var(--nav-active); } #mobileMenuLink, #mobileNav { display: none; } /* Language picker: the launch screen's capsule. One capsule; tapping it opens a rail of every offered language in place; choosing one asks first. */ .language-picker { margin-left: 30px; display: flex; align-items: center; } .language-picker:empty { display: none; } .capsule { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 11px; border: .8px solid color-mix(in srgb, var(--logo) 45%, transparent); font-family: var(--font-caps); font-weight: 300; font-size: 11px; line-height: 1; letter-spacing: .5px; color: var(--logo); white-space: nowrap; position: relative; } .capsule::after { content: ''; position: absolute; inset: -11px -4px; } /* 44pt hit area */ .capsule svg { width: 11px; height: 11px; flex: none; } .capsule svg { color: #c7b3ff; } /* The rabbit's own lavender, day and night; weight untouched (Lucas, 2026-11-06). */ .capsule[aria-pressed="true"] { background: color-mix(in srgb, var(--logo) 12%, transparent); } .rail { display: flex; gap: 6px; max-width: min(520px, 46vw); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); padding: 2px 14px; animation: rail-in .22s ease-out; } .rail::-webkit-scrollbar { display: none; } .rail .capsule { scroll-snap-align: center; } @keyframes rail-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } .confirm-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--page) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rail-in .2s ease-out; } .confirm-card { width: min(320px, 100%); padding: 26px 24px 20px; text-align: center; border-radius: 18px; background: var(--page); border: 1px solid color-mix(in srgb, var(--logo) 18%, transparent); box-shadow: 0 18px 50px rgba(110, 67, 128, .14); } .confirm-card h2 { margin: 0 0 8px; font-family: var(--font-caps); font-size: 12.6px; text-transform: uppercase; color: var(--h1); } .confirm-card p { margin: 0 0 18px; font-size: 13px; line-height: 20px; } .confirm-actions { display: flex; gap: 8px; justify-content: center; } .confirm-actions button { min-height: 40px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--rule); font-size: 13px; } .confirm-actions .primary { background: var(--button); border-color: var(--button); color: var(--button-text); } /* Squarespace layout: 12 columns, 34px gutters, 17px block padding */ #page { position: relative; } .sqs-layout { display: flow-root; } .row { margin: 0 -17px; display: flow-root; } .col { float: left; padding: 0 17px; min-height: 1px; } .row .row { margin: 0 -17px; } .span-0 { display: none; } .span-1 { width: 8.3333%; } .span-2 { width: 16.6667%; } .span-3 { width: 25%; } .span-4 { width: 33.3333%; } .span-5 { width: 41.6667%; } .span-6 { width: 50%; } .span-7 { width: 58.3333%; } .span-8 { width: 66.6667%; } .span-9 { width: 75%; } .span-10 { width: 83.3333%; } .span-11 { width: 91.6667%; } .span-12 { width: 100%; } .block { position: relative; padding: 17px 0; } .block:not(.text) { clear: both; } .row .block:not(.float):first-child { padding-top: 0; } .row .block:not(.float):first-child:last-child { padding-bottom: 0; } .block + .row .block:not(.float):first-child, .row + .row .block:not(.float):first-child { padding-top: 17px; } .block + .row .block:not(.float):first-child:last-child, .row + .row .block:not(.float):first-child:last-child { padding-bottom: 17px; } .sqs-layout > .row:first-child > .col:first-child > .block:not(:first-child):last-child, .block + .row .block:not(.float):last-child, .row + .row:not(:last-child) .block:last-child { padding-bottom: 17px; } .page-header .sqs-layout > .row:first-child .col .block:first-child { margin-top: 0; } /* Blocks floated inside text (posts): N of the column's 12. */ .block.float-right, .block.float-left { float: right; clear: none; z-index: 1; } .block.float-left { float: left; } .block.float-right { margin-left: 34px; } .block.float-left { margin-right: 34px; } .block.float-right.span-5, .block.float-left.span-5 { width: calc((100% + 34px) * 5 / 12 - 34px); } .block.float-right.span-6, .block.float-left.span-6 { width: calc((100% + 34px) * 6 / 12 - 34px); } .block.float-right.span-7, .block.float-left.span-7 { width: calc((100% + 34px) * 7 / 12 - 34px); } .block.float-right.span-8, .block.float-left.span-8 { width: calc((100% + 34px) * 8 / 12 - 34px); } .block.text > :first-child { margin-top: 0; } .block.text > :last-child { margin-bottom: 0; } .block.text.third-line-grey h2:nth-of-type(3) { color: var(--h2-grey); } /* Language hero, option A1 (2026-11-03): lavender first, then lavender greys. The lead keeps the original's face and size (Jost 16.8, tracking 1), one line per sentence across the full column, every row on one 2.0 leading. */ h2.hero-title { font-size: 20px; letter-spacing: 2.5px; line-height: 1.4; color: var(--hero-title); } h1.hero-tagline, .route-english .block.text.third-line-grey > h1:first-child, .route-chinese .block.text.third-line-grey > h1:first-child, .route-spanish .block.text.third-line-grey > h1:first-child { margin: 0 auto 34px; font-size: 14px; letter-spacing: 2px; line-height: 1.6; color: var(--hero-grey); } .hero-lead { margin: 0 auto; text-align: center; font-family: var(--font-display); font-size: 16.8px; font-weight: 300; letter-spacing: 1px; line-height: 2; color: var(--hero-grey); } .hero-lead p { margin: 0; text-wrap: balance; } /* a wrapped sentence splits evenly, no stray last words */ /* one leading throughout: no extra gap between paragraphs */ .hero-lead p.payoff { text-wrap: balance; } .nowrap { white-space: nowrap; } /* keeps a dash from opening a line */ .hero-lead p.payoff { margin: 0; color: var(--hero-payoff); } /* The edition pages (English, Chinese, Spanish) take the same classes: their opening line is the tagline, their three paragraphs the lead, the third the payoff. */ .route-english .block.text.third-line-grey > h2, .route-chinese .block.text.third-line-grey > h2, .route-spanish .block.text.third-line-grey > h2 { margin: 0 auto; font-family: var(--font-display); font-size: 16.8px; font-weight: 300; letter-spacing: 1px; line-height: 2; text-transform: none; color: var(--hero-grey); text-wrap: pretty; } .route-english .block.text.third-line-grey > h2:nth-of-type(3), .route-chinese .block.text.third-line-grey > h2:nth-of-type(3), .route-spanish .block.text.third-line-grey > h2:nth-of-type(3) { margin-bottom: 0; color: var(--hero-payoff); text-wrap: balance; } .block.image figure { margin: 0 auto; } .block.image a, .block.image button.lightbox { display: block; width: 100%; } .frame { overflow: hidden; } .frame.ratio { position: relative; height: 0; } .frame.ratio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .frame:not(.ratio) img { width: 100%; height: auto; } /* Language page: the edition images answer the pointer the way the app's launch rows do (LaunchLanguageButtonStyle): a lavender wash when lit (0.72/0.62/0.94, eased 0.25s), a deeper one while pressed (0.78/0.66/1.0) with a 0.985 press-in (ease-out 0.10s). The app's 0.14 / 0.30 read too faint over pictures, so 0.28 / 0.42 here (Lucas, 2026-11-03). */ /* The same wash on every linked picture: the Language editions, the Lifestyle tile, the product thumbnails. */ .route-language .block.image a .frame, .product-tile .tile-image, .thumbs button { position: relative; transition: transform .1s ease-out; } .route-language .block.image a .frame::after, .product-tile .tile-image::after, .thumbs button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(184, 158, 240, .28); opacity: 0; transition: opacity .25s ease-in-out; } .route-language .block.image a:hover .frame::after, .route-language .block.image a:focus-visible .frame::after, .product-tile:hover .tile-image::after, .product-tile:focus-visible .tile-image::after, .thumbs button:hover::after, .thumbs button:focus-visible::after { opacity: 1; } .route-language .block.image a:active .frame, .product-tile:active .tile-image, .thumbs button:active { transform: scale(.985); } .route-language .block.image a:active .frame::after, .product-tile:active .tile-image::after, .thumbs button:active::after { opacity: 1; background: rgba(199, 168, 255, .42); transition-duration: .1s; } .block.image figcaption { padding-top: 18px; } .block.image figcaption p { margin: 0 0 12px; font-size: 12px; line-height: 1.68em; } .block.image figcaption strong { font-weight: 700; } .block.spacer { min-height: 1px; } .block.spacer.vsize-1 { height: 70px; } figure.quote { margin: 0; } figure.quote blockquote { border: 0; padding: 0; margin: 0; font-size: 1.3em; line-height: 1.5em; } figure.quote figcaption { margin-top: .5em; } /* Newsletter (Storyline's footer field) */ .newsletter { padding: 34px 17px; background: var(--panel); text-align: center; color: #272727; } .newsletter h2 { margin: 0 0 17px; font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.2em; letter-spacing: 1.8px; color: var(--h1); } .newsletter .desc:empty { display: none; } .newsletter .fields { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin-top: 12px; padding-bottom: 12px; } .newsletter input { width: 244px; padding: 1em; font: inherit; font-size: 15px; font-weight: 400; line-height: normal; background: #fff; color: #222; border: 1px solid rgba(0, 0, 0, .12); outline: none; margin: 6px 0; } .newsletter button { margin: 6px 0; padding: 1em 2.25em; font-size: 15px; font-weight: 400; line-height: normal; color: var(--button-text); background: var(--button); border: 1px solid var(--button); text-transform: uppercase; cursor: pointer; } .newsletter .note { margin: 0; font-size: 12px; min-height: 0; } .newsletter .note:empty { display: none; } /* Storyline */ .article-list, .article-wrapper { margin-right: 200px; } /* One centred reading column (M2, 2026-11-03): the post, its pagination and the Subscribe box share one width and equal margins, the text keeping the line length Squarespace's 200px sidebar gap gave it. */ .layout-blog .article-list, .layout-blog .article-wrapper { max-width: 1100px; margin: 0 auto; } /* widened (Lucas, 2026-11-03): 980 read too narrow */ .layout-blog .page-header > .sqs-layout, .layout-blog .page-footer > .sqs-layout { max-width: 1100px; margin: 0 auto; } article.hentry { margin-bottom: 80px; } article.hentry header h1.entry-title { margin: 0 0 .2em; } article.hentry header h1.entry-title a { color: var(--h1); } article.hentry header h1.entry-title a:hover { color: var(--link-hover); } article .meta, article .meta a, article .meta button { color: var(--meta); } article header .meta { font-size: .9em; } article .entry-content { margin: 1em 0; } article footer .meta-row { margin: 1em 0; display: flow-root; } article footer .meta a:hover, article footer .meta button:not(.sqs-simple-like):hover { color: var(--link); } article footer .comments { margin-right: 14px; } /* Likes sit in the same quiet grey as Share beside them, liked or not. Liking fills the heart in the logo's lavender; the count never turns black. The heart is drawn at the text's weight and centred on its capitals, not its box. */ .sqs-simple-like { float: right; display: inline-flex; align-items: center; gap: 5px; } .sqs-simple-like svg { width: 11px; height: 11px; transform: translateY(-.5px); stroke-width: 1.3; transition: fill .2s ease-out, color .2s ease-out, transform .2s ease-out; } .sqs-simple-like[aria-pressed="true"] svg { fill: var(--logo); color: var(--logo); } /* A like pulses once: the heart swells and flushes to the lavender, then settles. */ .sqs-simple-like.is-pulsing svg { animation: like-pulse .55s ease-out; } @keyframes like-pulse { 0% { transform: translateY(-.5px) scale(1); } 30% { transform: translateY(-.5px) scale(1.32); fill: var(--logo); color: var(--logo); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--logo) 55%, transparent)); } 100% { transform: translateY(-.5px) scale(1); } } .pagination { margin: 34px 0 68px; padding: 17px 0; border: 1px solid var(--rule); border-width: 1px 0; display: flow-root; } .pagination a { display: block; width: 50%; float: left; text-align: left; } .pagination a.next-item, .pagination a.older-posts { float: right; text-align: right; } /* Contact form (Squarespace's form block) */ .contact-form { line-height: normal; } .contact-form .name-fields { display: flex; gap: 10px; } .contact-form .name-fields label { flex: 1; } .contact-form label { display: block; margin-bottom: 18px; } .contact-form .req { margin-left: 4px; font-size: 12px; opacity: .7; } .contact-form .field-title { display: block; font-size: 14px; line-height: 24px; } .contact-form input, .contact-form textarea { display: block; width: 100%; height: 38px; padding: 8px 12px; margin: 0; font: inherit; font-size: 14px; color: var(--link); background: var(--field); border: 1px solid var(--field-border); border-radius: 0; } .contact-form textarea { height: 100px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--logo); } /* Squarespace's own form button (Lucas, 2026-11-03: back to the original). */ .contact-form button[type="submit"], .comment-form button[type="submit"] { min-width: 124px; height: 48px; padding: 0 24px; margin-top: 0; border: 0; border-radius: 0; font-family: var(--font-body); font-weight: 300; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; background: var(--button); color: var(--button-text); cursor: pointer; } .contact-form button[type="submit"]:disabled, .comment-form button[type="submit"]:disabled { opacity: .6; cursor: default; } .contact-form .note { margin: 14px 0 0; font-size: 12.6px; color: var(--meta); } .contact-form .note:empty { display: none; } /* Comments: the originals from Squarespace, then the form (held for approval). */ .comments { margin: 0 0 60px; } .comments-title { margin: 0 0 24px; font-family: var(--font-body); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--text); } /* the form's own type, a step up */ .comment-list { list-style: none; margin: 0 0 40px; padding: 0; } .comment { margin: 0 0 22px calc(var(--depth, 0) * 34px); padding: 0 0 22px; border-bottom: 1px solid var(--rule); } .comment-meta { margin: 0 0 6px; display: flex; gap: 12px; align-items: baseline; font-size: 12.6px; } .comment-author { color: var(--link); } .comment-meta time { color: var(--meta); } .comment-body p { margin: 0; } .comment-form label { display: block; margin-bottom: 18px; } .comment-form .field-title { display: block; font-size: 14px; line-height: 24px; } .comment-form input, .comment-form textarea { display: block; width: 100%; height: 38px; padding: 8px 12px; margin: 0; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--link); background: var(--field); border: 1px solid var(--field-border); border-radius: 0; } .comment-form textarea { height: 100px; resize: vertical; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--logo); } .comment-form .note { margin: 14px 0 0; font-size: 12.6px; color: var(--meta); } .comment-form .note:empty { display: none; } /* The bot trap: off screen, never seen or tabbed to. */ .trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Image lightbox */ .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 2%; background: color-mix(in srgb, var(--page) 95%, transparent); cursor: zoom-out; animation: rail-in .2s ease-out; } /* A stated size, not max- limits: Safari left a large picture far smaller than the window (Lucas, 2026-11-05). */ .lightbox-overlay img { width: 96vw; height: 96vh; max-width: none; object-fit: contain; } /* An enlarged picture sized to itself (its width set from its own proportions), so the rounded corners land on the picture, not on empty room around it (Lucas, 2026-11-06). */ .lightbox-overlay > img.is-sized { height: auto; max-width: 96vw; max-height: 96vh; border-radius: 24px; object-fit: cover; } /* Footer */ #footer { margin-top: 50px; display: grid; grid-template-columns: 1fr auto; align-items: start; } #footerBlock { min-height: 34px; } /* Study and interface language, one quiet row on the Language page: study in the centre, interface at the right, a step smaller and fainter (the launch screen's compact 85%). Each capsule opens in place to its choices. */ /* The Language pages' picture controls: three identical capsules in one row, in a slim bar pinned under the menu (Lucas, 2026-11-03, option A). */ .shot-bar { position: sticky; top: 0; z-index: 20; margin: -28px 0 28px; padding: 8px 0; background: color-mix(in srgb, var(--page) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .shot-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } .shot-control { display: flex; justify-content: center; min-width: 0; } .shot-control .rail { max-width: min(420px, 80vw); } /* The rail's 2px padding must not grow the pinned bar and shift the page when it opens. */ .shot-bar .shot-control .rail { margin-block: -2px; } .language-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 40px 0 12px; } .language-row > .language-picker { margin: 0; justify-content: center; } .language-row .interface-subtle { justify-self: end; } .interface-subtle .capsule { height: 19px; padding: 0 7.5px; border-radius: 9.5px; font-size: 9.5px; gap: 3.5px; opacity: .75; } .interface-subtle .capsule svg { width: 9.5px; height: 9.5px; } .interface-subtle .rail { max-width: min(420px, 40vw); } #footerBlock p { margin: 0; font-size: 13.8px; } /* the footer line, a step below body text */ /* The footer's links read as links: the logo's colour, deepening on hover. */ #footerBlock a { color: var(--logo); transition: color .15s; } #footerBlock a:hover { color: var(--hero-payoff); } #socialLinks { justify-self: end; display: flex; align-items: center; gap: 2px; } #socialLinks a, #socialLinks button { display: inline-flex; align-items: center; justify-content: center; width: 36.8px; height: 36.8px; color: var(--icon); } #socialLinks svg { width: 36.8px; height: 36.8px; } /* Instagram in the rabbit line's whisper, not black (Lucas, 2026-11-03: "this doesn't look right"). */ #socialLinks .instagram { color: var(--switch); } #socialLinks .instagram:hover { color: var(--logo); opacity: 1; } .theme-switch svg { width: 14px; height: 14px; } /* Ink centred on the menu's capital height (measured: caps centre 70.6, moon ink 72.4, sun 72.0). */ #topNav .theme-switch .moon { transform: translateY(-1.85px); } #topNav .theme-switch .sun { transform: translateY(-1.45px); } .theme-switch .sun, :root[data-theme="dark"] .theme-switch .moon { display: none; } :root[data-theme="dark"] .theme-switch .sun { display: block; } /* "follow the purple rabbit..": the copyright's own type, on its first line, the rabbit inline at the end as the sign-in door. */ .rabbit-line { display: flex; align-items: center; margin: 0 0 0 12px; font-size: 13.8px; line-height: 1; white-space: nowrap; color: var(--switch); transition: color .25s; } /* A whisper, like the night switch: the logo's colour, faint; it wakes on hover. */ /* Its drawn height matches the Instagram glyph's 17.25. */ .rabbit-line img { width: 22.7px; height: 22.7px; margin-left: 13px; object-fit: contain; opacity: .7; transition: opacity .25s; } .rabbit-line:hover img { opacity: 1; } .rabbit-line:hover { color: var(--logo); } .rabbit-line:hover .rabbit-link img { opacity: 1; } #socialLinks .rabbit-line a.rabbit-link { display: inline-flex; width: auto; height: auto; } .rabbit-link img { display: block; flex: none; width: 21px; height: 21px; margin-left: 16px; } /* centred, the rabbit's foot meets the Instagram icon's bottom edge (Lucas, 2026-11-04); 6.3px empty on its left, so the visible gap matches Instagram's to the text */ /* Day and night: far right after CONTACT, at the menu's own 30px gap. */ #topNav .theme-switch { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 24px; margin-left: 30px; color: var(--switch); } #topNav .theme-switch:hover { color: var(--logo); } #socialLinks a:hover, #socialLinks button:hover { opacity: .6; } /* Home: the app's launch screen (LaunchScreenView, LargeScreenLayout.Launch). Phone values first; tablet and desktop below, as the app scales them. */ .layout-home #canvas { padding: 0; margin: 0; max-width: none; } .layout-home #header, .layout-home #footer, .layout-home #mobileMenuLink, .layout-home #mobileNav { display: none !important; } .launch { --chooser-scale: 1; --title-tracking: 7.5px; --lavender: rgb(224, 214, 255); /* wordmarkLavender */ position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; /* the window under the photo */ } :root[data-theme="dark"] .launch { background: #000; } .launch-backdrop { position: absolute; inset: 0; background: linear-gradient(rgba(175, 120, 235, .42), rgba(175, 120, 235, .42)), /* lilac (Lucas, 2026-11-07); the app launch screen keeps the old purple */ url('/assets/img/empyrean.jpg') center / cover no-repeat; } .launch-backdrop::before { /* the photo at 0.7: the window shows through */ content: ''; position: absolute; inset: 0; background: inherit; background: url('/assets/img/empyrean.jpg') center / cover no-repeat; opacity: .7; } .launch-backdrop { background: #fff; } :root[data-theme="dark"] .launch-backdrop { background: #000; } .launch-backdrop::after { content: ''; position: absolute; inset: 0; background: rgba(175, 120, 235, .42); } .launch-title { position: relative; margin: 0; padding: calc(20px + env(safe-area-inset-top, 0px) + 12px) 0 0 32px; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; } .launch-title a { display: inline-flex; align-items: center; color: var(--lavender); } .launch-rabbit { width: 30px; height: 30px; margin: 0 calc(30px - 30px * .26) 0 calc(30px * -.30); /* trimmed artwork margins, 30pt gap; 12% down (Lucas, 2026-11-06) */ transform: translateY(-4px); /* rabbitRaise */ opacity: .92; } .launch-title span { font-family: 'Josefin Sans', sans-serif; font-weight: 285; font-size: 17px; line-height: 1; text-transform: uppercase; letter-spacing: var(--title-tracking); color: rgba(224, 214, 255, .99); text-shadow: 0 1px 5px rgba(255, 255, 255, .10); white-space: nowrap; } .launch-chooser { position: relative; margin-top: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; padding: 0 24px calc(64px + env(safe-area-inset-bottom, 0px)); } /* The menu itself as on the Squarespace cover page: spaced Josefin, no capsules. */ .launch-capsule { display: inline-flex; align-items: center; min-height: 44px; padding: 9px var(--menu-gap, 20px) 9px 0; font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 11px; line-height: 11px; letter-spacing: 4.4px; text-transform: uppercase; color: rgb(242, 232, 247) !important; transition: opacity .15s; } .launch-capsule:last-child { padding-right: 0; margin-right: -4.4px; } .launch-capsule:hover { opacity: .7; } /* iPad: tablet scale; the chooser in the lower third (3 shares above, 1 below) */ @media (min-width: 751px) { .launch { --chooser-scale: 1.2; --title-tracking: 7.5px; --menu-gap: 48px; } .launch-chooser { position: absolute; left: 0; right: 0; top: 75%; transform: translateY(-50%); margin: 0; padding: 0 24px; gap: 0; } } /* Mac */ @media (min-width: 1200px) { .launch { --chooser-scale: 1.35; --menu-gap: 60px; } } /* The header pinned to the launch screen's place (Lucas, 2026-11-03): rabbit and wordmark at the window's edge, where the launch screen puts them, on every page; the menu on the wordmark's line at the window's right edge. Only the content keeps the column's margins. Phones keep their own centred header below. */ @media only screen and (min-width: 751px) { #header { margin: -60px calc(50% - 50vw) 40px; padding: 32px 32px 0; display: flex; align-items: center; justify-content: space-between; } #logo, #topNav { float: none; } #topNav { transform: translateY(-4px); } /* the menu's capitals centred on the wordmark's line */ h1.logo { line-height: 1; } .logo-rabbit { width: 30px; height: 30px; margin: 0 calc(30px - 30px * .26) 0 calc(30px * -.30); transform: translateY(-4px); } } /* Phone (the template's 750px breakpoint) */ @media only screen and (max-width: 750px) { #canvas { margin: 0 auto; padding: 0 20px 20px; } #header { margin-bottom: 30px; } #logo { float: none; } h1.logo { display: block; text-align: center; letter-spacing: 7.5px; margin: 0 -7.5px 0 0; } /* the wordmark's phone tracking; trailing space trimmed */ #topNav { float: none; } #footer { grid-template-columns: 1fr; justify-items: center; gap: 14px; text-align: center; } #socialLinks { justify-self: center; order: 2; } /* After the copyright on phones (Lucas, 2026-11-06). */ .rail { max-width: calc(100vw - 40px); } .main-nav { display: none; } /* Menu and the moon, a pair centred on one row, every page, menu open or closed (Lucas, 2026-11-06). */ #mobileMenuLink button { transform: translateX(-25px); } /* The crescent's mass sits low under its z's: raised so the crescent, not the box, centres on MENU. */ .theme-switch .moon, #topNav .theme-switch .moon { transform: translateY(-3.4px) !important; } .theme-switch .sun, #topNav .theme-switch .sun { transform: translateY(-4px) !important; } /* measured on his iPhone */ #canvas { position: relative; } #header, #topNav { position: static; } body:not(.route-language-new-31) #logo { margin-top: -14px; } #topNav .theme-switch { position: absolute; right: auto; left: calc(50% + 37.5px); top: 17px; transform: none; margin: 0; z-index: 900; } .language-picker { margin: 0; } .language-row { grid-template-columns: 1fr; justify-items: center; gap: 14px; } .language-row > span { display: none; } .language-row .interface-subtle { justify-self: center; } #mobileMenuLink { display: block; margin: 0 0 25px; padding: 15px 0; text-align: center; } #mobileMenuLink button { font-family: var(--font-caps); font-weight: 300; font-size: 16px; line-height: .9em; letter-spacing: 1px; text-transform: uppercase; color: var(--nav); } /* Room between the divider and the wordmark (Lucas, 2026-11-06). */ #mobileNav.open { display: block; margin: 0 0 40px; padding: 0 0 1em; border-bottom: .75px solid rgba(184, 158, 240, .3); } #mobileNav a { display: block; text-align: center; font-size: 16px; line-height: 2.5em; color: rgba(153, 153, 153, .7); } .col, .block.float-right, .block.float-left { float: none; width: auto !important; margin-left: 0; margin-right: 0; } .block.spacer { display: none; } .row .block:first-child { padding-top: 17px !important; } .row .block:last-child { padding-bottom: 17px !important; } .article-list, .article-wrapper { margin: 0; } .contact-form .name-fields { display: block; } } /* Lifestyle (the template's product list and product page) */ .product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; } .product-tile { display: block; text-align: center; color: var(--link); } .tile-image { aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; border-radius: 10px; } /* the blog images' 10px */ .tile-image img { width: 100%; height: 100%; object-fit: cover; } .product-tile .product-title { font-size: 15px; line-height: 1.5em; } .product-tile .product-price { font-size: 12px; line-height: 1.5em; } .product-page .back { margin: 3px 0 89px; text-transform: uppercase; } .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; } /* A long address (the lab report link) breaks instead of pushing the column off the page. */ .product-page p, .product-page a, .entry-content a { overflow-wrap: anywhere; } .product-gallery { position: relative; } .slides { position: relative; aspect-ratio: 1; } .slides img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; } /* rounded on the picture itself, not its square */ .slides .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); } .slides .arrow.prev { left: 6px; } .slides .arrow.next { right: 6px; } .product-gallery:hover .arrow, .slides .arrow:focus-visible { opacity: 1; } .thumbs { display: flex; align-items: center; gap: 5px; margin-top: -8px; } /* Squarespace's thumbnails: equal squares in one row, each picture cropped to fill. */ .thumbs button { width: 50px; height: 50px; display: flex; overflow: hidden; opacity: .6; border-radius: 4px; } .thumbs button:hover, .thumbs button[aria-current="true"] { opacity: 1; } .thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } .product-title { margin: 0 0 6px; } .product-details .store-rating { margin: 0 0 35px; } .product-details .product-price { font-size: 16px; line-height: 24px; margin-bottom: 18px; } .product-share button { color: var(--text); } .reviews { margin-top: 70px; clear: both; } .reviews h2 { color: var(--text); margin: 0 0 20px; } .stars { display: inline-flex; gap: 6px; color: var(--text); } .stars svg { width: 16px; height: 16px; } .reviews .summary { display: flex; align-items: center; gap: 10px; } .reviews .average { font-size: 18px; font-weight: 700; } .reviews .count { margin: 40px 0 20px; } .reviews .count button { font-weight: 700; color: var(--text); } .reviews hr { border: 0; border-top: 1px solid #ccc; margin: 0; } .review { display: grid; grid-template-columns: 236px 1fr; padding: 28px 0; border-bottom: 1px solid #ccc; } .review[hidden] { display: none; } .review dl { margin: 0; } .review dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .review dd { margin: 0; font-size: 16px; } .review dd.name { font-weight: 700; line-height: 36px; } .review .text { margin: 6px 0 12px; } .review .photo { max-width: 120px; margin: 0 0 12px; } .review .posted { margin: 0 0 12px; } .review .product { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 14px; } .reviews .more { text-align: center; margin: 30px 0 0; } .reviews .more button { padding: 12px 28px; border: 1px solid #e7e7e7; text-transform: uppercase; color: var(--text); } @media only screen and (max-width: 750px) { .product-list, .product { grid-template-columns: 1fr; } .review { grid-template-columns: 1fr; } } /* PROPOSAL: the Language page in two acts (/language-next, 2026-11-03). It speaks only in the agreed classes (hero-title, hero-tagline, hero-lead, payoff); the act labels are taglines, the act statements payoff lines; slides and rooms stay a step quieter. */ .next { text-align: center; } .next-hero { margin: 0 0 44px; } /* Act I follows closely (Lucas, 2026-11-03; was 96) */ .next-act { margin: 0 0 56px; } /* acts follow closely (Lucas, 2026-11-03; was 96) */ /* The Language page's own rhythm (measured there): title to tagline 35, tagline to the lines 34, the lines to what follows 40. The acts keep the same steps. */ .next-hero .hero-title { margin: 0 0 35px; } /* H3 (Lucas, 2026-11-03): a smaller picture tucked to the right; the text stays centred in the room left of it. On phones it drops below the text. */ .next-hero { position: relative; } /* Beside the picture the hero reads left-aligned, flush with the page's left edge (Lucas, 2026-11-03). */ .next-hero .center, .next-hero .hero-lead, .next-hero .hero-lead p { text-align: left; } .next-hero .hero-lead p { text-wrap: pretty; } .next-hero-shot { position: relative; display: block; width: min(360px, 100%); margin: 28px auto 0; padding: 0; overflow: hidden; border-radius: 12px; cursor: zoom-in; } @media (max-width: 899px) { .next-hero { display: flex; flex-direction: column; } .next-hero-shot { order: 9; } /* below the text on narrow screens */ } @media (min-width: 900px) { .next-hero { padding-right: 330px; min-height: 300px; } .next-hero-shot { position: absolute; top: 0; right: 0; width: 300px; margin: 0; } } .next-hero-shot img { display: block; width: 100%; height: auto; } /* The live hero (Lucas, 2026-11-03): the recording plays where the frame's screen is, under the frame (tie-dye, bezel and the still's status bar; record_hero.py). The numbers are the upper frame's screen in its 2000-pixel square: x 389, y 384, 1223 wide. */ .next-hero-shot.is-live { aspect-ratio: 1; cursor: zoom-in; background: none; border: 0; } /* The video runs a little under the frame on both sides, so the page never shows through at the screen's edge (white lines at night, Lucas 2026-11-04). The frame's opening is 19.5%–80.5%. */ .next-hero-shot.is-live video { position: absolute; left: 19.2%; top: 19.2%; width: 61.6%; height: auto; display: block; } .next-hero-shot.is-live .next-hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .next-hero-shot.is-live::after { display: none; } /* Opened larger: the whole phone, with the screen's numbers from frame.py's full layout (2000 × 3429; screen x 389, y 385, 1223 wide). */ .hero-full { position: relative; height: min(96vh, 96vw * 3429 / 2000); aspect-ratio: 2000 / 3429; cursor: zoom-out; } .hero-full video { position: absolute; left: 19.2%; top: 11.23%; width: 61.6%; height: auto; display: block; } .hero-full img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; pointer-events: none; } .next-hero-shot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(184, 158, 240, .28); opacity: 0; transition: opacity .25s ease-in-out; } .next-hero-shot:hover::after, .next-hero-shot:focus-visible::after { opacity: 1; } .next-hero > .edit-text > .hero-tagline { font-size: 12px; } /* below the 14px hook (2026-11-03) */ .next-hero .hero-title.next-hook { font-size: 15px; letter-spacing: 4.8px; } /* a step up and airier (Lucas, 2026-11-03), still below the 16px wordmark */ .next .hero-tagline.next-act-no { margin-bottom: 34px; font-size: 13px; } /* a step up (Lucas, 2026-11-03; was 12) */ .next .hero-lead { margin-bottom: 40px; } .next-stage { position: relative; } /* The banner: your current pictures, one large at a time, a caption beneath in the page's own classes, the four as thumbnails below. Any picture opens full size. */ .next-slide { animation: next-in .45s ease-out; } @keyframes next-in { from { opacity: 0; } to { opacity: 1; } } .next-shot, .next-room { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: 10px; cursor: zoom-in; transition: transform .1s ease-out; } .next-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .next-room img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .next-shot::after, .next-room::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(184, 158, 240, .28); opacity: 0; transition: opacity .25s ease-in-out; } .next-shot:hover::after, .next-room:hover::after, .next-shot:focus-visible::after, .next-room:focus-visible::after { opacity: 1; } .next-shot:active, .next-room:active { transform: scale(.985); } .next-caption { max-width: 760px; margin: 26px auto 0; } .next-tag { margin: 0 0 10px; font-family: var(--font-caps); font-weight: 300; font-size: 11px; letter-spacing: 2.2px; color: var(--hero-title); } .next-caption h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 300; font-size: 20px; line-height: 1.4; letter-spacing: 1px; text-transform: none; color: var(--hero-grey); } .next-caption p:last-child { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 15px; line-height: 1.9; letter-spacing: .6px; color: var(--hero-grey); text-wrap: balance; } .next-thumbs { display: flex; gap: 14px; margin-top: 30px; } .next-thumbs button { flex: 1; font-family: var(--font-caps); font-weight: 300; font-size: 10px; letter-spacing: 2px; color: var(--hero-grey); cursor: pointer; } .next-thumbs .t { display: block; margin-bottom: 9px; border-radius: 8px; overflow: hidden; opacity: .55; transition: opacity .2s, box-shadow .2s; } .next-thumbs .t img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .next-thumbs button:hover .t { opacity: .8; } .next-thumbs button[aria-selected="true"] { color: var(--hero-title); } .next-thumbs button[aria-selected="true"] .t { opacity: 1; box-shadow: 0 0 0 2px #c7b3ff; } .next-rooms { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 20px; align-items: start; } /* the Atlas leads the home base */ .next-rooms.is-even { grid-template-columns: repeat(4, 1fr); } /* Act I: four equal ways in */ .next-rooms .next-room { margin-bottom: 16px; } .next-rooms .is-lead .next-room img { aspect-ratio: 4 / 3; } .next-rooms p:last-child { max-width: 220px; margin: 0 auto; font-family: var(--font-display); font-weight: 300; font-size: 14px; line-height: 1.8; letter-spacing: .5px; color: var(--hero-grey); } .next-rooms .is-lead p:last-child { max-width: 300px; } @media only screen and (max-width: 750px) { .next-rooms, .next-rooms.is-even { grid-template-columns: 1fr 1fr; } .next-thumbs { gap: 8px; } } .next .next-gamut { margin: 10px auto 0; max-width: 1000px; font-size: 12px; line-height: 2; } .next .next-close { margin: 0 0 70px; } .next .next-left, .next .next-left p { text-align: left; } /* Act I's opening sits flush with its images (Lucas, 2026-11-03) */ .next .next-left p { text-wrap: wrap; } .next .next-left span.payoff, .next-hero .hero-lead span.payoff { color: var(--hero-payoff); } /* The micro-video Language page, /language-story (preview, Lucas 2026-11-04): Netflix first, then one line followed through, picture and words alternating sides. */ .story-hero { margin: 0 0 72px; } .story-hero .next-hero-shot { position: relative; top: auto; right: auto; width: min(360px, 100%); margin: 0 auto 36px; } .story-hero .hero-title { margin: 0 0 24px; } .story-hero .hero-title.next-hook { font-size: 15px; letter-spacing: 4.8px; } .story-hero .hero-tagline { font-size: 12px; } .story-hero .hero-lead { max-width: 820px; margin: 28px auto 0; } .story-hero .hero-lead span.payoff { color: var(--hero-payoff); } .story-chain { display: flex; flex-direction: column; gap: 64px; margin: 0 0 80px; } .story-row { display: grid; grid-template-columns: 300px minmax(0, 460px); gap: 56px; align-items: center; justify-content: center; } .story-row:nth-child(even) { grid-template-columns: minmax(0, 460px) 300px; } .story-row:nth-child(even) .next-room { order: 2; } .story .next-room img { aspect-ratio: 1; } .story-copy { text-align: left; } .story-copy h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 1.4; letter-spacing: 1px; text-transform: none; color: var(--hero-grey); } .story-copy p:last-child { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 15px; line-height: 1.9; letter-spacing: .6px; color: var(--hero-grey); } .next-rooms.story-doors { grid-template-columns: repeat(2, 240px); justify-content: center; gap: 48px; } @media only screen and (max-width: 750px) { .story-row, .story-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; } .story-row .next-room, .story-row:nth-child(even) .next-room { order: 0; max-width: 300px; margin: 0 auto; } .story-copy { text-align: center; } .next-rooms.story-doors { grid-template-columns: minmax(0, 300px); } } /* Banner options, language new 3, 4 and 5 and /banner-options (Lucas, 2026-11-04). */ .banner-options .banner-label { margin: 0 0 22px; text-align: center; } .banner-options header { margin: 0 0 72px; } .banner-options .next-hero-shot { position: relative; top: auto; right: auto; margin: 0; width: 100%; } .banner-options .next-room img { aspect-ratio: 1; } .banner-options .hero-title.next-hook { margin: 36px 0 20px; font-size: 15px; letter-spacing: 4.8px; } .banner-options .hero-tagline { font-size: 12px; } .banner-options .hero-lead { max-width: 900px; margin: 24px auto 0; } .banner-options .hero-lead .payoff { color: var(--hero-payoff); } .banner-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 8px; box-sizing: border-box; } .banner-strip .next-room { border-radius: 10px; } .banner-b { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: center; } .banner-b-copy, .banner-b-copy .center, .banner-b-copy .hero-lead, .banner-b-copy .hero-lead p { text-align: left; } .banner-b-copy .hero-title.next-hook { margin-top: 0; } .banner-b-copy .hero-lead p { text-wrap: pretty; } .banner-options .banner-trio.is-airy.is-even { grid-template-columns: minmax(0, 240px) minmax(0, 290px) minmax(0, 240px); } .banner-options .banner-trio.is-airy { grid-template-columns: minmax(0, 240px) minmax(0, 340px) minmax(0, 240px); gap: clamp(32px, 6vw, 80px); justify-content: center; } .banner-trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: center; } @media only screen and (max-width: 750px) { .banner-strip .next-room { display: none; } .banner-strip { grid-template-columns: minmax(0, 1fr); width: auto; margin-left: 0; padding: 0; } .banner-b { grid-template-columns: minmax(0, 1fr); gap: 8px; } .banner-trio { gap: 8px; } } /* New 8: three features, each row the full width of the page: the picture at one edge, the words reaching toward the other. */ @media only screen and (min-width: 751px) { .story-chain.is-wide .story-row { grid-template-columns: 280px minmax(0, 1fr); justify-content: stretch; } .story-chain.is-wide .story-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 280px; } } /* New 9: the features on one rail that scrolls sideways, the next card peeking in. */ .story-rail-wrap { margin: 0 0 80px; } .story-rail { display: flex; gap: 24px; margin: 0; padding: 0 0 18px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .story-rail:focus-visible { outline: 2px solid var(--hero-title); outline-offset: 4px; } .story-card { flex: 0 0 270px; scroll-snap-align: start; text-align: left; } .story-card .next-room { margin-bottom: 16px; } .story-card .story-copy h3 { font-size: 19px; line-height: 1.35; } .story-card .story-copy p:last-child, .story-card > .edit-text p:last-child { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 14px; line-height: 1.8; letter-spacing: .5px; color: var(--hero-grey); } @media only screen and (max-width: 750px) { .story-card { flex-basis: 78%; } } /* New 10: the headline and tagline above the pictures. */ .banner-options .story-title-top { margin: 0 0 36px; } .banner-options .story-title-top .hero-title.next-hook { margin: 0 0 16px; } .banner-options .story-title-top + .banner-trio + .hero-lead { margin-top: 36px; max-width: none; } /* Page 10: three themes, each its own rail of pictures, top and bottom views alternating. */ .themes { display: flex; flex-direction: column; gap: 64px; margin: 0 0 80px; } .theme-head { margin: 0 0 24px; text-align: left; } .next .theme-head .hero-tagline.next-act-no { margin: 0 0 8px; text-align: left; } .theme-head p { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 14.5px; line-height: 1.8; letter-spacing: .8px; color: var(--hero-grey); } .theme-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: calc((100% - 880px) / 3); justify-content: start; margin: 0; padding: 0; list-style: none; } /* The categories take turns: left, right, left (Lucas, 2026-11-04). */ .next .theme:nth-child(even) .theme-head, .next .theme:nth-child(even) .theme-head .hero-tagline.next-act-no { text-align: right; } .theme:nth-child(even) .theme-rail { justify-content: end; } .theme-card { min-width: 0; text-align: center; } .theme-card .next-room { margin-bottom: 14px; } .theme-card .next-room img { aspect-ratio: 1; object-fit: cover; } .theme-card p:last-child { margin: 0 auto; max-width: 240px; font-family: var(--font-display); font-weight: 300; font-size: 14px; line-height: 1.8; letter-spacing: .5px; color: var(--hero-grey); } .theme-pair { margin: 0 0 6px; font-family: var(--font-display); font-weight: 300; font-size: 12px; letter-spacing: .4px; color: var(--hero-title); } .next .story-avail { margin: 28px auto 0; max-width: none; } @media only screen and (max-width: 750px) { .theme-rail, .theme:nth-child(even) .theme-rail { grid-auto-columns: 72%; gap: 20px; justify-content: start; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; } .theme-card { scroll-snap-align: start; } } /* Page 10: banner, paragraph and rails share one 1100-pixel column, so their edges line up (Lucas, 2026-11-04). */ @media only screen and (min-width: 751px) { .banner-options .story-title-top + .banner-trio.is-airy.is-even { max-width: 1100px; margin: 0 auto; justify-content: space-between; gap: 0; } .banner-options .story-title-top + .banner-trio + .hero-lead { max-width: 1100px; } .banner-options .story-title-top + .banner-trio + .hero-lead p { text-wrap: wrap; } /* runs to the column's edges, not balanced short */ .themes { max-width: 1100px; margin-left: auto; margin-right: auto; } .next .story-avail { max-width: 1100px; } } .story-pair { display: grid; grid-template-columns: minmax(0, 220px); gap: 40px; justify-content: center; margin: 36px 0 8px; } .story-pair .next-room img { aspect-ratio: 1; } .watch-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 28px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(154, 123, 208, .22); text-align: left; } .watch-modes .next-tag { margin: 0 0 6px; } .watch-modes p:last-child { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 13.5px; line-height: 1.7; letter-spacing: .4px; color: var(--hero-grey); } @media only screen and (max-width: 750px) { .watch-modes { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* Page 10: five pictures at the top: launch, Panorama, the video, launch, Atlas. */ @media only screen and (min-width: 751px) { .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { max-width: 1100px; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.65fr) repeat(2, minmax(0, 1fr)) !important; justify-content: stretch; gap: 0 36px; } } .banner-options .banner-trio.is-five .next-room { align-self: center; } @media only screen and (max-width: 750px) { .banner-options .banner-trio.is-five { grid-template-columns: 1fr 1fr; } .banner-options .banner-trio.is-five .next-hero-shot { order: -1; grid-column: 1 / -1; } } /* Catch scrolls sideways from its first card; the left/right turn-taking must not push it off the edge. */ .route-language-new-10 .theme-rail { justify-content: safe center !important; } /* Every row centred when it fits; a long one starts at its left edge (Lucas, 2026-11-04). */ /* Phones: sentences kept whole on wide screens may wrap here; the product stacks. */ @media only screen and (max-width: 750px) { .hero-lead .nowrap, .next .nowrap { white-space: normal; } .product { grid-template-columns: minmax(0, 1fr); gap: 24px; } .product-gallery, .slides { min-width: 0; max-width: 100%; } } /* Page 10 only: three equal large pictures, alternating with two smaller ones. Keep the original photographs, central video, 36px gaps and 1100px column. */ @media only screen and (min-width: 751px) { .route-language-new-10 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr) !important; } .route-language-new-10 .banner-trio.is-five .next-hero-shot { order: 0; } } /* Page 10: each heading introduces its full image rail. */ .route-language-new-10 .theme .theme-head, .route-language-new-10 .theme .theme-head .hero-tagline, .route-language-new-10 .theme .theme-head p { text-align: center !important; } /* Page 10: streaming modes and social capture, approved November 4. */ .route-language-new-10 .catch-clean{max-width:1100px;margin:auto!important}.route-language-new-10 .catch-heading{text-align:center;margin:35px auto 48px}.route-language-new-10 .catch-heading h1{font:300 12px/1.6 var(--font-display);letter-spacing:.15em;color:var(--hero-grey);margin:0 0 12px}.route-language-new-10 .catch-heading>p{font:300 20px/1.6 var(--font-display);letter-spacing:.03em;color:var(--hero-grey);margin:0}.route-language-new-10 .watch-grid,.route-language-new-10 .social-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.route-language-new-10 .watch-grid article{text-align:center;min-width:0}.route-language-new-10 .watch-grid h2{font:300 12px/1.6 var(--font-display);letter-spacing:.12em;color:var(--hero-title);margin:0 0 12px}.route-language-new-10 .mode-description{font:300 15px/1.7 var(--font-display);color:var(--hero-grey);margin:0 0 22px;min-height:52px}.route-language-new-10 .watch-photo{position:relative;display:block;aspect-ratio:1;width:100%;border:0;padding:0;background:none;overflow:hidden;border-radius:12px;cursor:zoom-in}.route-language-new-10 .watch-photo video{position:absolute;left:19.2%;top:19.2%;width:61.6%;height:auto}.route-language-new-10 .watch-photo .next-hero-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.route-language-new-10 .capture-placeholder{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;border-radius:12px;background:color-mix(in srgb,var(--hero-title) 5%,var(--page));padding:25px;color:var(--hero-grey)}.route-language-new-10 .capture-placeholder span{font:300 12px/1.5 var(--font-display);letter-spacing:.05em}.route-language-new-10 .capture-placeholder p{font:300 15px/1.7 var(--font-display);margin:0;max-width:210px}.route-language-new-10 .mode-footnote{font:300 13px/1.7 var(--font-display);color:var(--hero-grey);margin:15px 0 0}.route-language-new-10 .capture-note{font:300 12px/1.7 var(--font-display);color:var(--hero-grey);text-align:center;margin:26px auto 0;max-width:650px}.route-language-new-10 .social-section{margin:70px 0 30px}.route-language-new-10 .social-heading{text-align:center;font:300 21px/1.6 var(--font-display);letter-spacing:.035em;color:var(--hero-grey);margin:0 0 30px}.route-language-new-10 .social-grid figure{margin:0;min-width:0;text-align:center}.route-language-new-10 .social-grid button{width:100%;padding:0;border:0;display:block;background:none;cursor:zoom-in}.route-language-new-10 .social-grid img{width:100%;display:block;aspect-ratio:1;object-fit:cover;border-radius:12px}.route-language-new-10 .social-grid figcaption{font:300 12px/1.6 var(--font-display);letter-spacing:.12em;color:var(--hero-title);margin:18px 0 0}.route-language-new-10 .stand-in{font:300 11px/1.6 var(--font-display);color:var(--hero-grey);margin:8px auto 0} .route-language-new-10 .catch-heading h1{font-size:24px;letter-spacing:.16em;margin-bottom:23px;color:var(--hero-grey)} .route-language-new-10 .catch-heading .streaming-title{font-size:22px;color:var(--hero-title);margin:0 0 10px} .route-language-new-10 .catch-heading .streaming-subtitle{font-size:18px;color:var(--hero-grey);margin:0} @media(max-width:750px){.route-language-new-10 .watch-grid,.route-language-new-10 .social-grid{gap:20px;grid-template-columns:1fr}.route-language-new-10 .watch-grid article,.route-language-new-10 .social-grid figure{max-width:450px;width:100%;margin:0 auto 25px}.route-language-new-10 .mode-description{min-height:0}.route-language-new-10 .catch-heading h1{font-size:22px}.route-language-new-10 .catch-heading .streaming-title{font-size:21px}.route-language-new-10 .catch-heading .streaming-subtitle{font-size:17px}} /* Page 10: study left, interface right, within the shared content column. */ .route-language-new-10 .shot-bar .shot-controls{max-width:1100px;margin-inline:auto;justify-content:space-between;flex-wrap:nowrap;gap:16px} .route-language-new-10 .shot-bar .shot-control{max-width:calc(50% - 8px);justify-content:flex-start} .route-language-new-10 .shot-bar .shot-control:last-child{justify-content:flex-end} .route-language-new-10 .shot-bar .shot-control .rail{max-width:100%;min-width:0} /* Feature plates match the smaller hero image size, leaving the hero unchanged. */ .route-language-new-10 .watch-photo,.route-language-new-10 .capture-placeholder,.route-language-new-10 .social-grid button{width:173px;max-width:100%;margin-inline:auto} .route-language-new-10 .watch-photo>img{display:block;width:100%;height:100%;object-fit:cover} .route-language-new-10 .capture-placeholder{box-sizing:border-box;padding:16px} .route-language-new-10 .capture-placeholder p{font-size:13px;line-height:1.6} /* Feature headings sit below the unchanged 15px/12px hero hierarchy. */ .route-language-new-10 .catch-heading h1{font-size:13px;letter-spacing:2.2px;margin-bottom:14px} .route-language-new-10 .catch-heading .streaming-title,.route-language-new-10 .social-heading{font-size:12px} .route-language-new-10 .catch-heading .streaming-subtitle{font-size:11.5px} /* Major sections repeat the hero's exact two-level typography. */ .route-language-new-10 .catch-heading h1, .route-language-new-10 .theme .theme-head .hero-tagline.next-act-no{font:300 15px/1.4 var(--font-display);letter-spacing:4.8px;color:var(--hero-title);text-transform:none;margin:0 0 16px} .route-language-new-10 .catch-heading .streaming-subtitle, .route-language-new-10 .theme .theme-head>p{font:300 12px/1.6 var(--font-caps);letter-spacing:2px;color:var(--hero-grey);text-transform:uppercase;margin:0} .route-language-new-10 .catch-heading{display:flex;flex-direction:column} .route-language-new-10 .catch-heading h1{order:0} .route-language-new-10 .catch-heading .streaming-subtitle{order:1} .route-language-new-10 .catch-heading .streaming-title{order:2;font:300 12px/1.6 var(--font-display);letter-spacing:.03em;color:var(--hero-title);margin:30px 0 0} /* Compact the streaming introduction and mode spacing. */ .route-language-new-10 .catch-heading .streaming-subtitle .streaming-title{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:var(--hero-title);margin:0 0 0 .55em} .route-language-new-10 .catch-heading{margin-bottom:26px} .route-language-new-10 .watch-grid h2{margin-bottom:8px} .route-language-new-10 .mode-description{min-height:0;margin-bottom:12px} .route-language-new-10 .watch-grid article{display:flex;flex-direction:column;align-items:center} .route-language-new-10 .watch-grid .watch-photo,.route-language-new-10 .watch-grid .capture-placeholder{margin-top:auto} .route-language-new-10 .mode-footnote{margin-top:10px} .route-language-new-10 .capture-note{margin-top:14px} .route-language-new-10 .catch-heading .streaming-subtitle .streaming-title{text-transform:inherit;font:inherit;letter-spacing:inherit} .route-language-new-10 .watch-grid article{display:grid;grid-template-rows:auto 52px 173px auto;align-content:start;justify-items:center;align-items:start}.route-language-new-10 .watch-grid .watch-photo,.route-language-new-10 .watch-grid .capture-placeholder{margin-top:0}@media(max-width:750px){.route-language-new-10 .watch-grid article{grid-template-rows:auto auto 173px auto}} .route-language-new-10 .social-heading{font:300 12px/1.6 var(--font-caps);letter-spacing:2px;text-transform:uppercase;color:var(--hero-title)} .route-language-new-10 .mode-footnote{width:173px;max-width:100%;margin:10px auto 0} .route-language-new-10 .watch-grid article{display:flex;flex-direction:column;align-items:center}.route-language-new-10 .watch-grid h2{margin-bottom:12px}.route-language-new-10 .mode-description{margin:12px 0 0;min-height:0}.route-language-new-10 .watch-grid .watch-photo,.route-language-new-10 .watch-grid .capture-placeholder{margin-top:0;flex-shrink:0} .route-language-new-10 .watch-grid,.route-language-new-10 .social-grid{max-width:591px;margin-inline:auto;gap:36px}@media(max-width:750px){.route-language-new-10 .watch-grid,.route-language-new-10 .social-grid{gap:20px}} @media(min-width:751px){.route-language-new-10 .watch-grid h2{min-height:38.4px}} .route-language-new-10 .catch-rail{grid-auto-columns:220px;gap:36px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px}.route-language-new-10 .catch-rail .theme-card{scroll-snap-align:start}.route-language-new-10 .catch-rail .capture-placeholder{width:220px;margin:0 0 14px;max-width:100%}.route-language-new-10 .theme-head .social-heading{margin-top:12px;font:300 12px/1.6 var(--font-caps);letter-spacing:2px;color:var(--hero-title)}.route-language-new-10 .theme-head .streaming-title{color:var(--hero-title)}@media(max-width:750px){.route-language-new-10 .catch-rail{grid-auto-columns:72%;gap:20px}.route-language-new-10 .catch-rail .capture-placeholder{width:100%}} /* Every feature plate uses the small hero reference size. */ .route-language-new-10 .theme-rail,.route-language-new-10 .theme:nth-child(even) .theme-rail{grid-auto-columns:173px;gap:36px;justify-content:start;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px} .route-language-new-10 .theme-card .next-room,.route-language-new-10 .theme-card .capture-placeholder{width:173px;aspect-ratio:1;max-width:100%;margin:0 0 14px} .route-language-new-10 .theme-card .next-room img{width:100%;height:100%;aspect-ratio:1;object-fit:cover} .route-language-new-10 .devices-section{margin:64px 0}.route-language-new-10 .devices-section .theme-rail{justify-content:center}@media(max-width:650px){.route-language-new-10 .devices-section .theme-rail{justify-content:start}} /* Center complete rows, while preserving a reachable start for overflowing rails. */ .route-language-new-10 .theme .theme-rail,.route-language-new-10 .theme:nth-child(even) .theme-rail{justify-content:safe center} /* Page 10 on phones, its own layout (Lucas, 2026-11-04: most people will judge it here). */ @media only screen and (max-width: 750px) { /* The language choices: one rail across the whole row, faded at the screen's edges. */ .route-language-new-10 .shot-bar .shot-controls.has-open-rail .shot-control:not(.is-open) { display: none; } .route-language-new-10 .shot-bar .shot-control.is-open { flex: 1 1 100%; max-width: none; justify-content: flex-start; } .route-language-new-10 .shot-bar .shot-control.is-open .rail { flex: 1 1 auto; width: calc(100% + 40px); max-width: none; margin: -2px -20px; padding: 2px 28px; scroll-snap-type: none; animation: none; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; height: 26px; align-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); } .route-language-new-10 .shot-bar .shot-control.is-open .rail .capsule { flex: none; scroll-snap-align: none; } /* The capsule's larger tap area hung 11px below it, and that was what let the rail drift. */ .route-language-new-10 .shot-bar .shot-control.is-open .rail .capsule::after { inset: 0; } /* The title midway between the menu and the capsules, measured from the letters. */ /* Same 14px lift, by margin: a positioned header became the moon's anchor and dropped it into the wordmark (fixed 2026-11-06). */ .route-language-new-10 #header { position: static; margin-top: -14px; margin-bottom: 44px; } /* The banner: one picture under another (Lucas, 2026-11-04). */ .route-language-new-10 .banner-trio.is-five { display: flex !important; flex-direction: column; gap: 20px !important; max-width: none !important; } .route-language-new-10 .banner-trio.is-five > * { width: 100%; margin: 0; transform: none; } .route-language-new-10 .banner-trio.is-five > .next-hero-shot { order: -1; } /* The moon, centred between the two capsules; it steps aside with the other capsule. */ .route-language-new-10 .shot-bar > .theme-switch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; right: auto; color: rgb(170, 125, 166); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: 0; padding: 0; } .route-language-new-10 .shot-bar .has-open-rail + .theme-switch { display: none; } /* The rows: one card centred at a time, swiped, the next just showing at the edge. */ .route-language-new-10 .theme-rail, .route-language-new-10 .catch-rail { grid-auto-columns: 76vw !important; gap: 16px !important; margin-inline: -20px; padding-inline: 12vw !important; justify-content: start !important; justify-items: stretch; scroll-padding-inline: 12vw; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .route-language-new-10 .theme-rail::-webkit-scrollbar { display: none; } .route-language-new-10 .theme-card { scroll-snap-align: center; min-width: 0; width: 100%; max-width: none; } .route-language-new-10 .theme-card .next-room, .route-language-new-10 .theme-card .next-room img { display: block; width: 100% !important; max-width: none !important; margin: 0; } .route-language-new-10 .theme-card .edit-text { width: 100%; max-width: none; padding-inline: 0; text-align: center; } .route-language-new-10 .themes > .theme, .route-language-new-10 section.theme { margin-top: 64px !important; } } /* Clear air between the sections of page 10 (Lucas, 2026-11-04: Curate sat on Discover's captions). */ .route-language-new-10 section.theme { margin-top: 56px !important; } .route-language-new-10 .next-everyone { margin-top: 56px !important; } .route-language-new-10 .story-avail { margin: 0 auto !important; padding: 28px 0 !important; } .route-language-new-10 .next-everyone .next-gamut { margin-top: 0 !important; margin-bottom: 0 !important; } .route-language-new-10 .theme-head { margin-bottom: 24px !important; } .route-language-new-10 .social-head { margin: 36px auto 24px !important; } .route-language-new-10 .theme-rail, .route-language-new-10 .catch-rail { padding-bottom: 0 !important; } @media only screen and (max-width: 750px) { .route-language-new-10 section.theme { margin-top: 44px !important; } .route-language-new-10 .next-everyone { margin-top: 44px !important; } } /* Every card label in the same capitals, whichever table wrote it (Lucas, 2026-11-04). */ .route-language-new-10 .theme-card .next-tag { text-transform: uppercase; } .route-language-new-10 .theme-card .edit-text p:last-child { line-height: 1.45 !important; } /* Air between each picture and its label. */ .route-language-new-10 .theme-card .edit-text { margin-top: 14px; } @media only screen and (max-width: 750px) { /* The pinned capsule bar reaches both screen edges, so nothing slides past beside it. */ .route-language-new-10 .shot-bar { margin-inline: -20px; padding-inline: 20px; width: auto; } .route-language-new-10 .shot-bar .shot-control.is-open .rail { width: calc(100% + 40px); } } /* Mock-up, page 11: the six menu pages as a strip before CATCH (Lucas, 2026-11-05). */ .menu-strip { margin: 56px auto 0; max-width: 1100px; } .menu-strip ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; } .menu-strip li { text-align: center; } .menu-strip img { display: block; width: 32px; height: 32px; margin: 0 auto 12px; } .menu-strip .menu-name { margin: 0 0 6px; font: 300 12px/1.4 var(--font-caps); letter-spacing: 2px; text-transform: uppercase; color: var(--hero-title); } .menu-strip .menu-line { margin: 0 auto; max-width: 150px; font-family: var(--font-display); font-weight: 300; font-size: 13px; line-height: 1.45; letter-spacing: .3px; color: var(--hero-grey); } @media only screen and (max-width: 750px) { .menu-strip { margin-top: 44px; } .menu-strip ul { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; } .menu-strip .menu-name { letter-spacing: 1.5px; font-size: 11px; } .menu-strip .menu-line { font-size: 12px; } } /* The scrollbar of a long row clears the captions (Lucas, 2026-11-05: it ran over the last line). */ @media only screen and (min-width: 751px) { .route-language-new-10 .catch-rail { padding-bottom: 16px !important; } } /* Mock-up, page 12: the caption alone under each picture, in the label's font (Lucas, 2026-11-05). */ .route-language-new-12 .theme-card .next-tag { display: none; } .route-language-new-12 .theme-card .edit-text p:last-child { font-family: var(--font-caps); font-weight: 300; font-size: 11px; letter-spacing: 2.2px; line-height: 1.6 !important; color: var(--hero-title); } /* One block under each picture: the name in lavender, running into its line in grey, all in the label font (Lucas, 2026-11-05). */ .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text { font-family: var(--font-caps); font-weight: 300; font-size: 11px; letter-spacing: 1.6px; line-height: 1.35; text-align: center; } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text .next-tag, .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text p:last-child { display: inline; margin: 0; max-width: none; font: inherit; letter-spacing: inherit; line-height: inherit !important; } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text .next-tag { color: var(--hero-title); } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text .next-tag::after { content: " "; } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text p:last-child { color: var(--hero-grey); } /* Page 12's own mock tightened the same way. */ .route-language-new-12 .theme-card .edit-text p:last-child { line-height: 1.35 !important; } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text .next-tag, .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text p:last-child { font-size: 11px !important; line-height: 1.35 !important; } .route-language-new-10:not(.route-language-new-12) .theme-card .edit-text { line-height: 1.35 !important; font-size: 11px !important; } /* Mock-up, page 13: the name as a band on the picture, Squarespace's hover caption (Lucas, 2026-11-05). */ .route-language-new-13 .theme-card .next-room .next-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 12px 14px; background: rgba(38, 34, 46, .62); color: #fff; font-family: var(--font-caps); font-weight: 400; font-size: 11px; line-height: 1.35; letter-spacing: 1.4px; text-align: left; pointer-events: none; opacity: 0; transition: opacity .25s ease-in-out; } .route-language-new-13 .theme-card .next-room:hover .next-tag, .route-language-new-13 .theme-card .next-room:focus-visible .next-tag { opacity: 1; } @media (hover: none) { .route-language-new-13 .theme-card .next-room .next-tag { opacity: 1; } } /* Rows fade at an edge only while there is more to scroll that way (Lucas, 2026-11-05). */ .route-language-new-10 .theme-rail { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-start, 0px), #000 calc(100% - var(--fade-end, 0px)), transparent 100%); } /* The block in the readable body font: names as words, no tracking; page 10 and 11 (Lucas, 2026-11-05: the tracked capitals looked awful). */ .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card .edit-text, .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card .edit-text .next-tag, .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card .edit-text p:last-child { font-family: var(--font-display) !important; font-weight: 300 !important; font-size: 14px !important; letter-spacing: .3px !important; line-height: 1.35 !important; text-transform: none !important; } .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card .edit-text .next-tag { font-weight: 400 !important; } /* Names back in capitals, in the label font; the sentence stays in the body font (Lucas, 2026-11-05: "i liked that for subtitles"). */ .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card .edit-text .next-tag { font-family: var(--font-caps) !important; font-weight: 300 !important; font-size: 11px !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; margin-right: 3px; } /* CATCH: the label alone; the pictures do the explaining (Lucas, 2026-11-05: "first column here should be enough"). */ .route-language-new-10 .catch-rail [data-watch-mode] .edit-text p:last-child { display: none !important; } .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .catch-rail [data-watch-mode] .edit-text .next-tag { display: block; margin: 0; } /* One caption per card, in capitals; the name inside it in purple; minimal and airy (Lucas, 2026-11-05). */ .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card:not([data-watch-mode]) .edit-text .next-tag { display: none !important; } .route-language-new-10:not(.route-language-new-12):not(.route-language-new-13) .theme-card:not([data-watch-mode]) .edit-text p:last-child { display: block !important; font-family: var(--font-caps) !important; font-size: 11px !important; letter-spacing: 1.8px !important; line-height: 1.5 !important; text-transform: uppercase !important; color: var(--hero-grey) !important; } .route-language-new-10 .card-name { color: var(--hero-title); } /* One caption under each group of pictures; on a phone it stays in view while the group swipes (Lucas, 2026-11-05). */ .route-language-new-10 .theme-rail.has-group-caps { grid-template-rows: auto auto; row-gap: 14px; } .route-language-new-10 .has-group-caps > .theme-card { display: contents; } .route-language-new-10 .has-group-caps > .theme-card > .next-room { grid-row: 1; margin: 0 !important; } .route-language-new-10 .has-group-caps > .theme-card > .edit-text { display: none !important; } .route-language-new-10 .group-cap { grid-row: 2; margin: 0 !important; padding: 0 6px; text-align: center; font-family: var(--font-caps); font-weight: 300; font-size: 11px; letter-spacing: 1.8px; line-height: 1.5; text-transform: uppercase; color: var(--hero-grey); } @media only screen and (max-width: 750px) { .route-language-new-10 .group-cap { position: sticky; left: 12vw; justify-self: start; width: 76vw; box-sizing: border-box; } } /* Pages 14 to 16: three storyboard layouts, same pictures and draft words (Lucas, 2026-11-05: "routine", not "a storyboard"). */ .sb { max-width: 1100px; margin: 0 auto; padding: 0 16px 72px; } .sb ol, .sb ul { list-style: none; margin: 0; padding: 0; } .sb .sb-banner { text-align: center; margin: 0 0 72px; } .sb .sb-banner .hero-title { margin: 0 0 16px; } .sb .sb-verbs { margin: 0 0 8px; font-size: 12px; letter-spacing: 2px; line-height: 1.6; color: var(--hero-title); } .sb .sb-banner .hero-tagline { margin: 0 auto; font-size: 12px; } .sb .sb-verb { margin: 0 0 8px; font: 300 15px/1.4 var(--font-display); letter-spacing: 4.8px; color: var(--hero-title); } .sb .sb-hook { margin: 0; font-size: 22px; line-height: 1.3; } .sb .sb-line { margin: 0; font-size: 15px; line-height: 1.5; } .sb .sb-pic .next-room { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .sb .sb-pic img { display: block; width: 100%; height: auto; } .sb .sb-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px dashed currentColor; opacity: .45; text-align: center; font-size: 11px; letter-spacing: 1.8px; line-height: 1.6; } /* 14: one thread down the page, pictures stepping from side to side. */ .sb-thread .sb-act { margin: 0 0 72px; } .sb-thread .sb-head { text-align: center; margin: 0 0 40px; } .sb-thread .sb-beats { position: relative; } .sb-thread .sb-beats::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(184, 158, 240, .55); } .sb-thread .sb-beat { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; margin: 0 0 32px; } .sb-thread .sb-beat.is-right .sb-pic { order: 2; } .sb-thread .sb-beat.is-left .sb-line { text-align: left; } .sb-thread .sb-beat.is-right .sb-line { text-align: right; } @media (max-width: 767px) { .sb-thread .sb-beats::before { left: 0; } .sb-thread .sb-beat { display: block; padding-left: 16px; margin: 0 0 32px; } .sb-thread .sb-beat .sb-line, .sb-thread .sb-beat.is-right .sb-line { margin-top: 12px; text-align: left; } } /* 15: every act has its own composition. */ .sb-scale .sb-act { margin: 0 0 88px; } .sb-scale .sb-head { margin: 0 0 28px; } .sb-scale .sb-line { margin-top: 12px; } .sb-scale .sb-tiles { display: grid; gap: 28px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .sb-scale .sb-tile { grid-column: span 4; } .sb-scale .sb-comp-1 .sb-tile:nth-child(1) { grid-column: 1 / span 8; grid-row: 1 / span 3; } .sb-scale .sb-comp-1 .sb-tile:nth-child(n+2) { grid-column: 9 / span 4; } .sb-scale .sb-comp-2 .sb-head { text-align: right; } .sb-scale .sb-comp-2 .sb-tile { grid-column: span 3; } .sb-scale .sb-comp-2 .sb-tile:nth-child(even) { margin-top: 72px; } .sb-scale .sb-comp-3 .sb-tile:nth-child(1) { grid-column: 5 / span 8; grid-row: 1 / span 2; order: 2; } .sb-scale .sb-comp-3 .sb-tile:nth-child(2) { grid-column: 1 / span 4; } .sb-scale .sb-comp-3 .sb-tile:nth-child(3) { grid-column: 1 / span 4; } .sb-scale .sb-comp-4 .sb-head { text-align: center; } @media (max-width: 767px) { .sb-scale .sb-tiles { gap: 20px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-scale .sb-act .sb-tile, .sb-scale .sb-comp-1 .sb-tile:nth-child(n+2), .sb-scale .sb-comp-3 .sb-tile:nth-child(n) { grid-column: auto; grid-row: auto; order: 0; margin-top: 0; } .sb-scale .sb-act .sb-tile:nth-child(1) { grid-column: 1 / -1; } .sb-scale .sb-comp-1 .sb-tile:nth-child(4), .sb-scale .sb-comp-2 .sb-tile:nth-child(4) { grid-column: 1 / -1; margin-top: 0; } /* large, two small, large: no orphan */ .sb-scale .sb-comp-2 .sb-head { text-align: left; } .sb-scale .sb-comp-2 .sb-tile:nth-child(even) { margin-top: 28px; } .sb-scale .sb-line { font-size: 13px; } .sb-scale .sb-tile:nth-child(1) .sb-line { font-size: 15px; } } /* 16: the words hold still while the pictures pass. */ .sb-pinned .sb-act { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; margin: 0 0 72px; align-items: start; } .sb-pinned .sb-pin { position: sticky; top: 96px; } .sb-pinned .sb-frame { margin: 0 0 40px; } .sb-pinned .sb-line { margin-top: 12px; } @media (max-width: 767px) { .sb-pinned .sb-act { display: block; margin: 0 0 40px; } .sb-pinned .sb-pin { top: 56px; z-index: 2; margin: 0 -16px 20px; padding: 12px 16px; background: var(--page); } .sb-pinned .sb-hook { font-size: 17px; } } /* Approved banner, pages 10 to 13 (Lucas, 2026-11-05): the four verbs over the tagline. */ .banner-options .story-title-top .hero-verbs { margin: 0 0 8px; text-align: center; font-size: 12px; letter-spacing: 2px; line-height: 1.6; color: var(--hero-title); } /* Page 17: one picture holds still and changes as the words pass. */ .ss-story .ss-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; } .ss-story .ss-stage { position: sticky; top: 24px; grid-column: 2; grid-row: 1; } .ss-story .ss-steps { grid-column: 1; grid-row: 1; } .ss-story .ss-step { display: flex; flex-direction: column; justify-content: center; min-height: 72vh; } .ss-story .ss-step .sb-hook { margin-bottom: 20px; } .ss-story .ss-step .sb-line { font-size: 17px; } .ss-story .ss-chapters { display: flex; justify-content: space-between; margin: 0 0 14px; } .ss-story .ss-chapter { font-size: 11px; letter-spacing: 1.8px; opacity: .35; transition: opacity .3s ease-in-out; } .ss-story .ss-chapter.is-on { color: var(--hero-title); opacity: 1; } .ss-story .ss-pics { position: relative; aspect-ratio: 1; } .ss-story .ss-pic { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease-in-out; } .ss-story .ss-pic.is-on { opacity: 1; pointer-events: auto; } .ss-story .ss-pic .next-room, .ss-story .ss-pic img { width: 100%; height: 100%; } .ss-story .ss-pic img { object-fit: cover; } .ss-story .ss-pic .sb-missing { height: 100%; aspect-ratio: auto; background: var(--page); } @media (max-width: 767px) { .ss-story .ss-layout { display: block; } .ss-story .ss-stage { top: 0; z-index: 2; margin: 0 -16px; padding: 10px 16px 12px; background: var(--page); } .ss-story .ss-chapters { margin-bottom: 10px; } .ss-story .ss-chapter { font-size: 10px; letter-spacing: 1.2px; } .ss-story .ss-pics { width: min(100%, 50vh); margin: 0 auto; } .ss-story .ss-step { min-height: 42vh; padding: 16px 0; } .ss-story .ss-step:last-child { min-height: 50vh; } } /* Page 18: page 14's thread with a cluster of photos at each beat, the video first. */ .sb-clusters { max-width: 1240px; } .sb-clusters .sb-beat { gap: 64px; margin-bottom: 56px; } .sb-clusters .cl-cluster { display: grid; gap: 12px; grid-template-columns: 2fr 1fr; align-items: start; } .sb-clusters .cl-cluster.is-3 .sb-pic:first-child { grid-row: 1 / span 2; } .sb-clusters .cl-cluster.is-2 { grid-template-columns: 1fr 1fr; } .sb-clusters .sb-beat.is-right .cl-cluster { order: 2; } .sb-clusters .sb-beat.is-right .cl-cluster.is-3 { grid-template-columns: 1fr 2fr; } .sb-clusters .sb-beat.is-right .cl-cluster.is-3 .sb-pic:first-child { grid-column: 2; } .sb-clusters .sb-line { font-size: 17px; } .sb-clusters .next-hero-shot.is-live { position: relative; top: auto; right: auto; order: 0; width: 100%; margin: 0; } @media (max-width: 767px) { .sb-clusters .sb-beat { margin-bottom: 40px; } .sb-clusters .cl-cluster, .sb-clusters .sb-beat.is-right .cl-cluster.is-3, .sb-clusters .cl-cluster.is-2 { grid-template-columns: 1fr 1fr; gap: 8px; } .sb-clusters .cl-cluster.is-3 .sb-pic:first-child, .sb-clusters .sb-beat.is-right .cl-cluster.is-3 .sb-pic:first-child { grid-column: 1 / -1; grid-row: auto; } .sb-clusters .sb-line { font-size: 15px; } } /* Pages 10 to 13: one gap above every section, the first included (Lucas, 2026-11-05). The banner's own 72 made the first one larger. */ .route-language-new-10 .banner-c { margin-bottom: 0 !important; } .route-language-new-10 section.theme, .route-language-new-10 .next-everyone { margin-top: 48px !important; } @media (max-width: 767px) { .route-language-new-10 section.theme, .route-language-new-10 .next-everyone { margin-top: 40px !important; } } /* Page 19: the thread steps between a different composition at each station. */ .sb-stations, .sb-rows { max-width: 1240px; } .sb-stations .sb-banner, .sb-rows .sb-banner { margin-bottom: 48px; } .sb-stations .sb-act, .sb-rows .sb-act { margin-bottom: 48px; } .sb-stations .sb-head, .sb-rows .sb-head { margin-bottom: 28px; text-align: center; } .sb-stations .sb-line, .sb-rows .sb-line { font-size: 17px; } .sb-stations .next-hero-shot.is-live, .sb-rows .next-hero-shot.is-live { position: relative; top: auto; right: auto; order: 0; width: 100%; margin: 0; } .st-beat { position: relative; display: grid; gap: 64px; align-items: center; padding-bottom: 48px; } .st-beat.is-left { grid-template-columns: 2fr 1fr; } .st-beat.is-right { grid-template-columns: 1fr 2fr; } .st-beat.is-right .st-group { order: 2; } .st-beat.is-right .sb-line { text-align: right; } .st-beat::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(184, 158, 240, .55); } .st-beat.is-left::before { left: calc((100% - 64px) * 2 / 3 + 32px); } .st-beat.is-right::before { left: calc((100% - 64px) / 3 + 32px); } .st-beat:not(:last-child)::after { content: ''; position: absolute; bottom: 0; height: 1px; left: calc((100% - 64px) / 3 + 32px); right: calc((100% - 64px) / 3 + 32px); background: rgba(184, 158, 240, .55); } .st-beat:last-child { padding-bottom: 0; } .st-group { display: grid; gap: 12px; align-items: start; } .st-group img { object-fit: cover; } .st-echo { grid-template-columns: 3fr 1fr; align-items: end; } .st-devices { grid-template-columns: 1fr 1fr; max-width: 640px; } .st-beat.is-right .st-devices { justify-self: end; } .st-devices .sb-pic:first-child { grid-column: 1 / -1; } .st-devices .sb-pic:first-child img { aspect-ratio: 3 / 2; object-position: center 45%; } .st-share { grid-template-columns: repeat(3, 1fr); padding-bottom: 56px; } .st-share .sb-pic:nth-child(2) { margin-top: 28px; } .st-share .sb-pic:nth-child(3) { margin-top: 56px; } .st-aura { width: 62%; } .st-beat.is-left .st-aura { justify-self: end; } .st-atlas { grid-template-columns: 3fr 2fr; } .st-atlas .sb-pic:first-child { grid-row: 1 / span 2; } .st-atlas .sb-pic:first-child img { aspect-ratio: 3 / 4; } .st-scenes { grid-template-columns: 1fr 1fr; } .st-collect { grid-template-columns: 1fr 1fr; gap: 8px; max-width: 560px; } .st-beat.is-right .st-collect { justify-self: end; } .st-interplay { width: 62%; } .st-beat.is-right .st-interplay { justify-self: end; } .st-practice { grid-template-columns: 1fr 1fr; max-width: 560px; } @media (max-width: 767px) { .st-beat, .st-beat.is-left, .st-beat.is-right { display: block; padding: 0 0 36px 16px; } .st-beat::before, .st-beat.is-left::before, .st-beat.is-right::before { left: 0; } .st-beat:not(:last-child)::after { display: none; } .st-beat:last-child { padding-bottom: 0; } .st-beat .sb-line, .st-beat.is-right .sb-line { margin-top: 12px; text-align: left; font-size: 15px; } .st-group { gap: 8px; max-width: none; } .st-echo { grid-template-columns: 1fr; } .st-echo .sb-pic:last-child { width: 50%; } .st-share { gap: 6px; padding-bottom: 28px; } .st-share .sb-pic:nth-child(2) { margin-top: 14px; } .st-share .sb-pic:nth-child(3) { margin-top: 28px; } .st-aura, .st-interplay { width: 60%; } } /* Page 20: a sideways row of photos at each station, the opening picture larger. */ .sb-rows .rw-station { position: relative; padding: 0 0 40px 24px; } .sb-rows .rw-station::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(184, 158, 240, .55); } .sb-rows .rw-station:last-child { padding-bottom: 0; } .sb-rows .rw-station .sb-line { margin: 0 0 14px; } .sb-rows .rw-rail { display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .sb-rows .rw-rail::-webkit-scrollbar { display: none; } .sb-rows .rw-rail > .sb-pic { flex: 0 0 280px; scroll-snap-align: start; } .sb-rows .rw-rail > .sb-pic:first-child { flex-basis: 400px; } @media (max-width: 767px) { .sb-rows .rw-station { padding: 0 0 32px 12px; } .sb-rows .rw-rail { gap: 8px; margin-right: -16px; padding-right: 16px; } .sb-rows .rw-rail > .sb-pic { flex-basis: 56vw; } .sb-rows .rw-rail > .sb-pic:first-child { flex-basis: 76vw; } .sb-rows .rw-station .sb-line { font-size: 15px; } } /* Page 21: page 10 with one change. Rails alternate sides: about four pictures, then three larger (Lucas, 2026-11-05). */ .route-language-new-21 section.theme { width: 100%; max-width: 1100px !important; margin-inline: auto !important; } .route-language-new-21 .theme .theme-rail { --tile: 190px; width: 900px; max-width: 100%; margin: 0 auto 0 0; grid-auto-columns: var(--tile) !important; gap: 14px 24px !important; justify-content: start !important; } .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { --tile: 270px; margin: 0 0 0 auto; } .route-language-new-21 .theme-card .next-room, .route-language-new-21 .theme-card .next-room img { width: 100% !important; max-width: none !important; } @media (max-width: 767px) { .route-language-new-21 .theme .theme-rail { --tile: 44vw; width: 100vw; max-width: none; margin: 0 calc(50% - 50vw); padding-inline: 4vw 12vw !important; gap: 14px 8px !important; scroll-padding-inline: 4vw; } .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { --tile: 72vw; margin: 0 calc(50% - 50vw); padding-inline: 24vw 4vw !important; scroll-padding-inline: 24vw; } .route-language-new-21 .theme-card { scroll-snap-align: start; } .route-language-new-21 .group-cap { position: static; justify-self: stretch; width: auto; max-width: 84vw; padding: 0 8px 0 0; text-align: left; } .route-language-new-21 .social-rail .group-cap, .route-language-new-21 [aria-label="CURATE"] .group-cap { max-width: 72vw; } } /* Pages 21 and 22 on Mac and iPad (Lucas, 2026-11-05): blocks run wider than the opening block; verbs stay centred; each subtitle lines up with its own rail. */ @media (min-width: 768px) { .route-language-new-21 section.theme { --block: min(1500px, max(1180px, calc(100vw - 200px)), calc(100vw - 48px)); width: var(--block) !important; max-width: none !important; margin-left: calc(50% - var(--block) / 2) !important; margin-right: 0 !important; } .route-language-new-21 .theme .theme-rail { --tile: 250px; width: 1132px; max-width: 100%; margin: 0 auto 0 0; } .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { --tile: 250px; width: 858px; margin: 0 0 0 auto; } .route-language-new-21 .theme .theme-head { width: 100%; max-width: none; margin-inline: 0; text-align: left; } .route-language-new-21 .theme .theme-head .hero-tagline.next-act-no { text-align: center; } .route-language-new-21 .theme .theme-head > p { width: 1132px; max-width: 100%; margin: 0 auto 0 0; text-align: left; } .route-language-new-21 [aria-label="CURATE"] .theme-head > p { width: 858px; margin: 0 0 0 auto; text-align: right; } .route-language-new-21 .social-head { width: 858px !important; max-width: 100%; margin: 36px 0 24px auto !important; text-align: right; } .route-language-new-21 .social-head .social-heading { text-align: right; } } /* Page 22: the opening block's large-small rhythm (203 to 173). */ @media (min-width: 768px) { .route-language-new-22 .theme .theme-rail, .route-language-new-22 .theme .theme-rail.social-rail, .route-language-new-22 [aria-label="CURATE"] .theme-rail { grid-auto-columns: 250px 213px !important; align-items: center; } } /* Pages 21 and 22: older centring rules use !important, so these must too. */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-head > p, .route-language-new-21 .theme .theme-head > p.streaming-subtitle { text-align: left !important; margin: 0 auto 0 0 !important; } .route-language-new-21 [aria-label="CURATE"] .theme-head > p { text-align: right !important; margin: 0 0 0 auto !important; } .route-language-new-21 .social-head, .route-language-new-21 .social-head .social-heading { text-align: right !important; } } /* Pages 21 and 22: one symmetrical frame for every block; rails show as many pictures as fit (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-rail, .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { width: 100% !important; max-width: 100%; margin: 0 !important; } .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { justify-content: safe end !important; } .route-language-new-21 .theme .theme-head > p, .route-language-new-21 [aria-label="CURATE"] .theme-head > p { width: 100% !important; } .route-language-new-21 .social-head { width: 100% !important; margin: 36px 0 24px !important; } } /* Pages 21 and 22: rows use the opening block's small size, never larger than its pictures (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-rail, .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { --tile: 173px; gap: 14px 36px !important; } .route-language-new-22 .theme .theme-rail, .route-language-new-22 .theme .theme-rail.social-rail, .route-language-new-22 [aria-label="CURATE"] .theme-rail { grid-auto-columns: 203px 173px !important; } } /* Pages 21 and 22: four pictures showing, the rail does the rest; rows sit at the frame's left and right edges in turn (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-rail, .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { width: 1070px !important; max-width: 100% !important; justify-content: start !important; } .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { margin: 0 0 0 auto !important; } } /* More room inside the language capsules, tried here first. */ .route-language-new-21 .shot-bar .capsule { height: 24px; padding: 2px 12px 0; box-sizing: border-box; border-radius: 12px; gap: 5px; } .route-language-new-21 .shot-bar .capsule svg { transform: translateY(-1px); } /* The caps font sits high: the words come down, the icon stays centred. */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-head.social-head > p { text-align: right !important; margin: 0 0 0 auto !important; } } /* Pages 21 and 22: the headline 20 percent bigger, its tracking in proportion (Lucas, 2026-11-05). */ .route-language-new-21 .story-title-top .hero-title.next-hook { font-size: 18px !important; letter-spacing: 5.76px !important; } /* Pages 21 to 23: five-picture rows on the right end flush with their subtitle. */ @media (min-width: 768px) { .route-language-new-21 .theme .theme-rail.social-rail, .route-language-new-21 [aria-label="CURATE"] .theme-rail { justify-content: safe end !important; } } /* Page 23: a curved line around the blocks. It sits behind everything, and headings knock it out. */ .route-language-new-23 #page { position: relative; } .route-language-new-23 .story-line { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; } .route-language-new-23 .story-line path { fill: none; stroke: var(--hero-title); stroke-opacity: .55; stroke-width: 1.5; stroke-linecap: round; } .route-language-new-23 .story-line circle { fill: var(--hero-title); } @media (min-width: 768px) { .route-language-new-23 #page > :not(.story-line) { position: relative; z-index: 1; } .route-language-new-23 .theme .theme-head .hero-tagline.next-act-no { width: fit-content; margin-inline: auto; padding-inline: 16px; background: var(--page); } .route-language-new-23 .theme .theme-head > p { width: fit-content !important; padding-inline: 0 16px; background: var(--page); } .route-language-new-23 .theme .theme-head.social-head > p, .route-language-new-23 [aria-label="CURATE"] .theme-head > p { padding-inline: 16px 0; } } @media (max-width: 767px) { .route-language-new-23 .story-line { display: none; } } /* Pages 21 to 23: no verb line in the banner; rail ends fade in a soft curve, not a straight edge (Lucas, 2026-11-05). */ .route-language-new-21 .hero-verbs { display: none; } .route-language-new-21 .theme .theme-rail { --fs: calc(var(--fade-start, 0px) * 2); --fe: calc(var(--fade-end, 0px) * 2); -webkit-mask-image: linear-gradient(to right, transparent var(--fs), #000 var(--fs), #000 calc(100% - var(--fe)), transparent calc(100% - var(--fe))), radial-gradient(ellipse var(--fs) 62% at var(--fs) 50%, #000 35%, transparent 100%), radial-gradient(ellipse var(--fe) 62% at calc(100% - var(--fe)) 50%, #000 35%, transparent 100%); mask-image: linear-gradient(to right, transparent var(--fs), #000 var(--fs), #000 calc(100% - var(--fe)), transparent calc(100% - var(--fe))), radial-gradient(ellipse var(--fs) 62% at var(--fs) 50%, #000 35%, transparent 100%), radial-gradient(ellipse var(--fe) 62% at calc(100% - var(--fe)) 50%, #000 35%, transparent 100%); } @media (min-width: 768px) { .route-language-new-23 section.theme, .route-language-new-23 .banner-c, .route-language-new-23 .next-everyone { position: relative; z-index: 1; } } /* Pages 21 to 23: soft rail ends with no hard edge; little lines instead of the browser's scrollbar (Lucas, 2026-11-05). */ .route-language-new-21 .theme .theme-rail { scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%), radial-gradient(ellipse var(--fs) 70% at var(--fs) 50%, #000 25%, transparent 100%), radial-gradient(ellipse var(--fe) 70% at calc(100% - var(--fe)) 50%, #000 25%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fs), #000 calc(100% - var(--fe)), transparent 100%), radial-gradient(ellipse var(--fs) 70% at var(--fs) 50%, #000 25%, transparent 100%), radial-gradient(ellipse var(--fe) 70% at calc(100% - var(--fe)) 50%, #000 25%, transparent 100%); } .route-language-new-21 .theme .theme-rail::-webkit-scrollbar { display: none; } .rail-ticks { display: none; } @media (min-width: 768px) { .route-language-new-21 .rail-ticks { display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 1009px; max-width: 100%; height: 22px; margin: 6px auto 0 0; } .route-language-new-21 .rail-ticks.is-right { margin: 6px 0 0 auto; } .route-language-new-21 .rail-tick { width: 1px; height: 4px; padding: 0; border: 0; background: var(--hero-title); opacity: .35; cursor: pointer; transition: height .2s ease-in-out, opacity .2s ease-in-out; position: relative; } .route-language-new-21 .rail-tick::after { content: ''; position: absolute; inset: -18px -3px 0; } .route-language-new-21 .rail-tick.is-on { height: 9px; opacity: .8; } } /* Pages 21 to 23: the rail's fade is one large soft ellipse, so it curves and has no seam. Script sets its centre as the rail scrolls. */ .route-language-new-21 .theme .theme-rail { -webkit-mask-image: radial-gradient(ellipse var(--rx, 100%) 125% at var(--cx, 0%) 50%, #000 var(--solid, 91%), rgba(0,0,0,.55) calc((var(--solid, 91%) + 100%) / 2), transparent 100%); mask-image: radial-gradient(ellipse var(--rx, 100%) 125% at var(--cx, 0%) 50%, #000 var(--solid, 91%), rgba(0,0,0,.55) calc((var(--solid, 91%) + 100%) / 2), transparent 100%); } .route-language-new-21 .theme .theme-rail.fits-rail { -webkit-mask-image: none; mask-image: none; } @media (min-width: 768px) { .route-language-new-22 .theme .theme-rail, .route-language-new-22 .theme .theme-rail.social-rail, .route-language-new-22 [aria-label="CURATE"] .theme-rail { grid-auto-columns: 173px !important; } } /* Page 23: separate faint U curves in the margins, not one long line (Lucas, 2026-11-05). */ .route-language-new-23 .story-line path { stroke-opacity: .32; stroke-width: .75; } .route-language-new-23 .story-line circle { display: none; } /* Page 23: pictures grow slightly under a pointer, with room inside the rail so nothing clips (Lucas, 2026-11-05). */ @media (min-width: 768px) and (hover: hover) { .route-language-new-23 .theme .theme-rail { box-sizing: border-box; width: 1082px !important; max-width: calc(100% + 12px) !important; padding: 8px 6px !important; margin: -8px auto -8px -6px !important; } .route-language-new-23 .theme .theme-rail.social-rail, .route-language-new-23 [aria-label="CURATE"] .theme-rail { margin: -8px -6px -8px auto !important; } .route-language-new-23 .theme-rail .next-room { transition: transform .25s ease-in-out; } .route-language-new-23 .theme-rail .next-room:hover, .route-language-new-23 .theme-rail .next-room:focus-visible { transform: scale(1.035); } } /* Page 26: the opening block's shape carried down: pyramids on the same 1100 column, no rails (Lucas, 2026-11-05). */ .route-language-new-26 .pyr { max-width: 1100px; margin: 64px auto 0; text-align: center; } .route-language-new-26 .pyr-verb { margin: 0 0 12px; font: 300 15px/1.4 var(--font-display); letter-spacing: 4.8px; color: var(--hero-title); } .route-language-new-26 .pyr-sub { margin: 0 0 24px; font: 300 12px/1.6 var(--font-caps); letter-spacing: 2px; text-transform: uppercase; color: var(--hero-grey); } .route-language-new-26 .pyr-row { display: grid; gap: 22px; } .route-language-new-26 .pyr-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .route-language-new-26 .pyr-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-language-new-26 .pyr-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .route-language-new-26 .pyr-row .next-room { margin: 0; } .route-language-new-26 .pyr-row img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .route-language-new-26 .pyr-cap { margin: 12px 0 24px; font: 300 11px/1.5 var(--font-caps); letter-spacing: 1.8px; text-transform: uppercase; color: var(--hero-grey); } .route-language-new-26 .pyr-cap .pu { color: var(--hero-title); } .route-language-new-26 .pyr-sub .pu { color: var(--hero-title); } @media (max-width: 767px) { .route-language-new-26 .pyr { margin-top: 44px; } .route-language-new-26 .pyr-row { gap: 8px; } .route-language-new-26 .pyr-row.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Page 26: the opening block is the biggest thing on the page; rows below step down from it (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-26 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { --hero-w: min(1400px, calc(100vw - 96px)); width: var(--hero-w) !important; max-width: none !important; margin-left: calc(50% - var(--hero-w) / 2) !important; margin-right: 0 !important; } .route-language-new-26 .pyr-row { justify-content: center; } .route-language-new-26 .pyr-row.n2 { grid-template-columns: repeat(2, 240px); } .route-language-new-26 .pyr-row.n3 { grid-template-columns: repeat(3, 200px); } .route-language-new-26 .pyr-row.n4 { grid-template-columns: repeat(4, 170px); } } /* Page 27: the opening is a big pyramid, video first; rows below on a column about 25 percent narrower (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-27 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { --hero-w: min(1100px, calc(100vw - 48px)); display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; align-items: start; } .route-language-new-27 .banner-trio.is-five > * { grid-column: span 2; width: 100% !important; max-width: none !important; margin: 0 !important; } .route-language-new-27 .banner-trio.is-five > .next-hero-shot { grid-column: span 3; order: -2; } .route-language-new-27 .banner-trio.is-five > .next-room:first-child { grid-column: span 3; order: -1; } .route-language-new-27 .banner-trio.is-five > * img:not(.next-hero-frame) { width: 100%; aspect-ratio: 1; object-fit: cover; } .route-language-new-27 .pyr-row { max-width: 825px; margin-inline: auto; } .route-language-new-27 .pyr-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .route-language-new-27 .pyr-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-language-new-27 .pyr-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Page 27: each caption sits in the grid under its own picture or group. */ .route-language-new-27 .pyr-row { row-gap: 12px !important; margin-bottom: 24px; } .route-language-new-27 .pyr-row .pyr-cap { margin: 0; padding-inline: 6px; text-wrap: balance; } .route-language-new-27 .pyr-row .pyr-cap[data-span="1"] { grid-column: span 1; } .route-language-new-27 .pyr-row .pyr-cap[data-span="2"] { grid-column: span 2; } .route-language-new-27 .pyr-row .next-room { grid-row: 1; } @media (max-width: 767px) { .route-language-new-27 .pyr-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Page 28: flatter blocks after the big opening: five across, then three (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-28 .pyr-row { max-width: 1100px; } .route-language-new-28 .pyr-row.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .route-language-new-28 .pyr-row.n3 { grid-template-columns: repeat(3, 240px); justify-content: center; } .route-language-new-28 .pyr-row.n4 { grid-template-columns: repeat(4, 202px); justify-content: center; } } @media (max-width: 767px) { .route-language-new-28 .pyr-row.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Page 29: feature sections; Catalyst stays secondary in the headings that carry it. */ .route-language-new-29 .pyr-parent { color: var(--hero-grey); opacity: .75; } .route-language-new-29 .pyr-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; box-sizing: border-box; border: 1px dashed var(--hero-grey); border-radius: 10px; font: 300 10px/1.7 var(--font-caps); letter-spacing: 1.6px; color: var(--hero-grey); grid-row: 1; } /* Page 30: each section repeats the opening's shape at about 70 percent. */ @media (min-width: 768px) { .route-language-new-30 .pyr-row { max-width: 770px; margin-bottom: 18px; } } /* Page 30: the tagline at the section headings' 15 pt, its tracking in proportion (Lucas, 2026-11-05). */ .route-language-new-30 .story-title-top h1.hero-tagline { font-size: 15px !important; letter-spacing: 2.5px !important; } /* Page 30: availability closes the intro. */ .route-language-new-30 .banner-c .story-avail { max-width: 1100px; margin: 8px auto 0; text-align: center; } .route-language-new-30 .banner-c .story-avail p { margin: 0; text-wrap: balance; } /* Page 30: the opening alternates phone views: top, bottom; then top, bottom, top (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-30 .banner-trio.is-five > :nth-child(3) { order: 1 !important; grid-column: span 3 !important; } .route-language-new-30 .banner-trio.is-five > :nth-child(4) { order: 2 !important; grid-column: span 3 !important; } .route-language-new-30 .banner-trio.is-five > :nth-child(5) { order: 3 !important; grid-column: span 2 !important; } .route-language-new-30 .banner-trio.is-five > :nth-child(2) { order: 4 !important; grid-column: span 2 !important; } .route-language-new-30 .banner-trio.is-five > :nth-child(1) { order: 5 !important; grid-column: span 2 !important; } } /* Page 31: three big over two small, only a little under the opening's size; captions carry the feature's icon (Lucas, 2026-11-05). */ .route-language-new-31 .cap-ico { height: 12px; width: auto; margin-right: 6px; vertical-align: -2px; } @media (min-width: 768px) { .route-language-new-31 .pyr-row { max-width: 990px; } .route-language-new-31 .pyr-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, 240px); justify-content: center; } } /* Page 31: opening is three over two, video centred between the launch screens; section pictures 10 percent smaller (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-31 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { --hero-w: min(1400px, calc(100vw - 96px)); grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4) { order: 1 !important; grid-column: span 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(3) { order: 2 !important; grid-column: span 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(1) { order: 3 !important; grid-column: span 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { order: 4 !important; grid-column: 4 / span 3 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { order: 5 !important; grid-column: 7 / span 3 !important; } .route-language-new-31 .pyr { max-width: none; } .route-language-new-31 .pyr-row { max-width: min(1260px, calc(90vw - 86px)); } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, calc((min(1260px, calc(90vw - 86px)) - 44px) / 3 * .75)); } } .route-language-new-31 .pyr-row .pyr-cap .cap-ico { display: inline-block; width: auto; height: 12px; aspect-ratio: auto; object-fit: contain; margin: 0 6px 0 0; vertical-align: -2px; } /* Page 31: the two below grow to about 87 percent of the three above, in the opening and the sections (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-31 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { grid-template-columns: repeat(24, minmax(0, 1fr)) !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4), .route-language-new-31 .banner-trio.is-five > :nth-child(3), .route-language-new-31 .banner-trio.is-five > :nth-child(1) { grid-column: span 8 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { grid-column: 6 / span 7 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { grid-column: 13 / span 7 !important; } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, calc((min(1260px, calc(90vw - 86px)) - 44px) / 3 * .87)); } } /* Page 31: the two below match the three above, offset half a picture, like bricks (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-31 .banner-trio.is-five > :nth-child(2) { grid-column: 5 / span 8 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { grid-column: 13 / span 8 !important; } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, calc((min(1260px, calc(90vw - 86px)) - 44px) / 3)); } } /* Page 31: the Amethyst Scene launch screen comes first, language choice last. */ @media (min-width: 768px) { .route-language-new-31 .banner-trio.is-five > :nth-child(1) { order: 1 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(3) { order: 2 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4) { order: 3 !important; } } /* The headline stays in capitals in every language (Lucas, 2026-11-05). */ .route-language-new-10 .story-title-top .hero-title.next-hook { text-transform: uppercase; } /* Page 31: three smaller over two larger, both rows the same width (Lucas, 2026-11-05). Sections at 90 percent of the opening. */ @media (min-width: 768px) { .route-language-new-31 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { --hero-w: min(1100px, calc(100vw - 48px)); grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(1), .route-language-new-31 .banner-trio.is-five > :nth-child(3), .route-language-new-31 .banner-trio.is-five > :nth-child(4) { grid-column: span 2 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2), .route-language-new-31 .banner-trio.is-five > :nth-child(5) { grid-column: span 3 !important; } .route-language-new-31 .pyr-row { max-width: min(990px, calc(100vw - 96px)); } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } } /* Page 31: two large over four, launch screens at the ends: top, bottom; top, bottom, top, bottom (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-31 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(3) { order: 1 !important; grid-column: span 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(6) { order: 2 !important; grid-column: span 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(1) { order: 3 !important; grid-column: span 3 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { order: 4 !important; grid-column: span 3 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { order: 5 !important; grid-column: span 3 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4) { order: 6 !important; grid-column: span 3 !important; } .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, calc((min(990px, calc(100vw - 96px)) - 44px) / 3)); justify-content: center; } } /* Page 31: availability back near the foot; one tighter gap above each section. */ .route-language-new-31 .pyr { margin-top: 44px; } .route-language-new-31 .banner-c .hero-lead { margin-bottom: 0; } /* Page 31: pyramids alternate, every row the same width; one heading line, icon then dots (Lucas, 2026-11-05). */ .route-language-new-31 .pyr-verb { text-wrap: balance; margin-bottom: 20px; } .route-language-new-31 .pyr-line { color: var(--hero-grey); letter-spacing: 3.2px; text-transform: uppercase; } .route-language-new-31 .pyr-verb .head-ico { display: inline-block; width: auto; height: 15px; margin-right: 10px; vertical-align: -2px; } @media (min-width: 768px) { .route-language-new-31 .pyr-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } .route-language-new-31 .pyr-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-language-new-31 .pyr-row.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { order: 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { order: 5 !important; } } .route-language-new-31 .pyr-row .pyr-cap .cap-ico { margin: 0 5px 0 2px; height: 11px; } /* Page 31: a true pyramid: the video alone, then two, then four (Lucas, 2026-11-05). App Store icon restored. */ @media (min-width: 768px) { .route-language-new-31 .banner-trio.is-five > :nth-child(3) { order: 1 !important; grid-column: 4 / span 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(6) { order: 2 !important; grid-column: span 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(7) { order: 3 !important; grid-column: span 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(1) { order: 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { order: 5 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { order: 6 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4) { order: 7 !important; } } .route-language-new-31 .store-icon { display: block; width: 50px; margin: 22px auto; } .route-language-new-31 .store-icon img { display: block; width: 100%; height: auto; } /* Page 31: the top picture fills the row's width, the phone centred on a wider plate (Lucas, 2026-11-05). */ @media (min-width: 768px) { .route-language-new-31 .banner-trio.is-five > :nth-child(3) { grid-column: 1 / -1 !important; } .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live { aspect-ratio: 2 / 1; } .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live video { left: 34.6%; top: 19.2%; width: 30.8%; } } .route-language-new-31 .next-hero-shot.is-live .next-hero-frame-wide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } @media (max-width: 767px) { .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live { aspect-ratio: 2 / 1; } .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live video { left: 34.6%; top: 19.2%; width: 30.8%; } } /* Page 31: the phone larger on a plate 7:5, no ghost panel (Lucas, 2026-11-05). */ .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live { aspect-ratio: 7 / 5 !important; } .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live video { left: 28.18% !important; top: 19.2% !important; width: 43.68% !important; } /* Page 31: the heading's two icons, and the path above the sections. */ .route-language-new-31 .pyr-verb .head-ico + .pyr-parent { margin-left: 0; } .route-language-new-31 .pyr-verb .pyr-parent + .head-ico, .route-language-new-31 .pyr-verb .head-ico { margin-right: 9px; } .route-language-new-31 .ascent { margin: 44px auto 0; text-align: center; } .route-language-new-31 .ascent-name { margin: 0 0 16px; font-size: 13px; letter-spacing: 3.2px; color: var(--hero-grey); } .route-language-new-31 .ascent ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 12px; } .route-language-new-31 .ascent li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: #6d5a95; } .route-language-new-31 .ascent li img { width: auto; height: 14px; } .route-language-new-31 .ascent li + li::before { content: "→"; margin: 0 14px; color: #b9a8dc; letter-spacing: 0; } @media (max-width: 767px) { .route-language-new-31 .ascent li { font-size: 10px; letter-spacing: 1.6px; gap: 4px; } .route-language-new-31 .ascent li img { height: 11px; } .route-language-new-31 .ascent li + li::before { margin: 0 6px; } } /* Page 31 on phones: subtitle under the heading, smaller captions, the path as one row. */ .route-language-new-31 .pyr-name { white-space: nowrap; } @media (max-width: 767px) { .route-language-new-31 .pyr-line { display: block; margin-top: 14px; font-size: .86em; letter-spacing: 2px; } /* 14 (was 6): the subtitle given room under its title (Lucas, 2026-11-07) */ .route-language-new-31 .pyr-dot { display: none; } .route-language-new-31 .pyr-row .pyr-cap { font-size: 9.5px; letter-spacing: 1.3px; line-height: 1.5; } .route-language-new-31 .ascent ol { flex-wrap: nowrap; justify-content: space-between; max-width: 340px; margin-inline: auto; } .route-language-new-31 .ascent li { position: relative; flex-direction: column; gap: 7px; font-size: 9px; letter-spacing: 1.1px; } .route-language-new-31 .ascent li img { height: 16px; } .route-language-new-31 .ascent li + li::before { position: absolute; left: -15px; top: 0; margin: 0; font-size: 11px; line-height: 16px; } } /* Page 31 on phones: a row of four with its own captions becomes two over two. */ @media (max-width: 767px) { .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) > .next-room:nth-child(n+3) { grid-row: 3; } .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) > .pyr-cap:nth-child(5), .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) > .pyr-cap:nth-child(6) { grid-row: 2; } .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) > .pyr-cap:nth-child(7), .route-language-new-31 .pyr-row.n4:has(.pyr-cap[data-span="1"]) > .pyr-cap:nth-child(8) { grid-row: 4; } } /* Page 31 on phones: one picture at a time, swiped. The rails exist only here. */ .route-language-new-31 .pyr-rail { display: none; } @media (max-width: 767px) { .route-language-new-31 .pyr > .pyr-row { display: none !important; } .route-language-new-31 .pyr-rail { display: block; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 18px; } .route-language-new-31 .pyr-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-inline: 11vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .route-language-new-31 .pyr-track::-webkit-scrollbar { display: none; } .route-language-new-31 .pyr-slide { flex: 0 0 78vw; margin: 0; scroll-snap-align: center; } .route-language-new-31 .pyr-slide .next-room { display: block; width: 100%; padding: 0; border: 0; background: none; } .route-language-new-31 .pyr-slide .next-room img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .route-language-new-31 .pyr-slide .pyr-cap { margin: 12px 0 0; text-align: center; font-size: 11px; letter-spacing: 1.6px; line-height: 1.5; text-wrap: balance; text-transform: uppercase; color: var(--hero-grey); } .route-language-new-31 .pyr-slide .pyr-cap .cap-ico { display: inline-block; width: auto; height: 11px; margin: 0 5px 0 2px; vertical-align: -2px; } .route-language-new-31 .pyr-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-size: 11px; letter-spacing: 1.4px; color: #8f7bb8; } .route-language-new-31 .pyr-nav button { width: 36px; height: 30px; padding: 0; border: 0; background: none; color: #8f7bb8; font-size: 22px; line-height: 1; cursor: pointer; } .route-language-new-31 .pyr-nav button:disabled { opacity: .25; cursor: default; } } /* Page 31 on phones: the opening is one simple column: the video, then each picture (Lucas, 2026-11-06). */ @media (max-width: 767px) { .route-language-new-31 .banner-options .story-title-top + .banner-trio.is-airy.is-even.is-five { display: flex !important; flex-direction: column !important; gap: 14px !important; } .route-language-new-31 .banner-trio.is-five > * { width: 100% !important; margin: 0 !important; transform: none !important; } .route-language-new-31 .banner-trio.is-five > .next-hero-shot.is-live { order: 0 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(6) { order: 1 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(7) { order: 2 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(1) { order: 3 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(5) { order: 4 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(2) { order: 5 !important; } .route-language-new-31 .banner-trio.is-five > :nth-child(4) { order: 6 !important; } } } /* Page 31: the heading's dots carry weight (Lucas, 2026-11-06). */ .route-language-new-31 .pyr-sep { display: inline-block; font-weight: 700; font-size: 1.35em; line-height: 0; vertical-align: -.04em; color: #8f7bb8; letter-spacing: 0; margin-inline: .12em; } /* Page 31: each section's tagline sits lighter than its name (Lucas, 2026-11-06). */ .route-language-new-31 .pyr-line { color: #7d788c; font-weight: 300; } :root[data-theme="dark"] .route-language-new-31 .pyr-line { color: #9490a3; } /* Page 31: captions on one line where the picture is wide enough; the path closes the sections. */ @media (min-width: 768px) { .route-language-new-31 .pyr-row .pyr-cap { font-size: 11px; letter-spacing: 1.8px; } } .route-language-new-31 .ascent { margin: 56px auto 12px; } /* Page 31: captions under the larger pictures keep to one line on Mac (Lucas, 2026-11-06). */ @media (min-width: 1100px) { .route-language-new-31 .pyr-row.n2 .pyr-cap, .route-language-new-31 .pyr-row.n3 .pyr-cap { white-space: nowrap; text-wrap: nowrap; } } /* Launch: capsules wait for the translations; the moon stays (Lucas, 2026-11-06). */ /* Study language is fixed for now; the interface capsule shows (Lucas, 2026-11-06). */ .route-language-new-31 .store-icon img { border-radius: 22%; } /* Launch: Storyline's likes, comments and sign-up have no backend on this hosting yet. */ .layout-blog .sqs-simple-like, .layout-blog .comments, .layout-blog .newsletter { display: none !important; } /* Page 31: the promise, in the headline's colour, over the tagline (Lucas, 2026-11-06). */ .route-language-new-31 .hero-lead-in { color: var(--logo); margin: 0 0 6px; } /* Page 31: the tagline sits lighter beside the promise, one line where it fits (Lucas, 2026-11-06). */ .route-language-new-31 .story-title-top h1.hero-tagline { color: #9490a3; font-weight: 300; } /* Page 31: the pinned bar: only the moon's row on phones, with room and a fade beneath. */ @media (max-width: 750px) { .route-language-new-31 .shot-bar { padding-bottom: 12px; background: var(--page); } .route-language-new-31 .shot-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(var(--page), transparent); pointer-events: none; } } /* Page 31: the video enlarged: the tile's own view, larger. */ /* The enlarged film: square like every enlarged picture, so its phone shows at the same size (61% of the frame), not smaller (Lucas, 2026-11-06). The wide plate is cropped evenly at the sides. */ .route-language-new-31 .hero-video-overlay { display: block; overflow-y: auto; padding: 2vh 2vw; } .route-language-new-31 .hero-wide { position: relative; width: min(96vw, max(96vh, var(--hero-expanded-width, 0px))); margin: 0 auto; aspect-ratio: 1; overflow: hidden; border-radius: 24px; } .route-language-new-31 .hero-wide video { position: absolute; left: 19.43%; top: 19.2%; width: 61.15%; height: auto; } .route-language-new-31 .hero-wide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Page 31: the promise tracks like the tagline beneath it; it had no tracking at all (Lucas, 2026-11-06). */ .route-language-new-31 .story-title-top .hero-lead-in { font: 300 15px/24px "Josefin Sans", sans-serif; letter-spacing: min(5.6px, calc((100vw - 250px) / 22)); text-transform: uppercase; margin: 10px 0 0; } /* One line where it fits; on a phone it breaks at the comma, same tracking as the heading. */ .route-language-new-31 .story-title-top .hero-lead-in .line-keep { display: inline-block; white-space: nowrap; } /* Page 31 on phones: one whole picture at a time, nothing cut off at the edges. */ @media (max-width: 767px) { .route-language-new-31 .pyr-track { padding-inline: 16px; gap: 32px; scroll-padding-inline: 16px; } .route-language-new-31 .pyr-slide { flex: 0 0 calc(100vw - 32px); } } /* Page 31: the Netflix line is the opening's feature line: the same gap to its image as a section's line (Lucas, 2026-11-06). */ .route-language-new-31 .story-title-top { margin-bottom: 20px !important; } .route-language-new-31 .story-title-top .hero-lead-in { line-height: 21px; } @media (max-width: 767px) { .route-language-new-31 .pyr-rail { margin-top: 0; } } /* Page 31: the wordmark leads at 16; the headline matches its size, never larger (Lucas, 2026-11-06). */ .route-language-new-31 .story-title-top .hero-title.next-hook { font-size: 16px !important; letter-spacing: min(5.6px, calc((100vw - 250px) / 22)) !important; } /* Page 31: the line before each block, more open (Lucas, 2026-11-06). */ .route-language-new-31 .pyr-line { letter-spacing: 4px; } @media (max-width: 767px) { .route-language-new-31 .pyr-line { letter-spacing: 2.7px; text-wrap: balance; } } /* The one dash: the font's own em dash, stretched (Lucas, 2026-11-06). The margins make room for the stretch. */ .long-dash { display: inline-block; letter-spacing: 0; transform: scaleX(1.4); margin: 0 .2em; } .pyr-sub .long-dash { transform: scaleX(1.7); margin: 0 .24em; } /* Echo's captions: device, layout, content; "via" on its own line only where one line will not fit (Lucas, 2026-11-06). */ .pyr-cap .via-line { display: block; } .pyr-cap.one-line { white-space: nowrap !important; text-wrap: nowrap !important; } .pyr-cap.one-line .via-line { display: inline; } .route-language-new-31 .pyr-row .pyr-cap, .route-language-new-31 .pyr-slide .pyr-cap { line-height: 1.95; } .dash-keep { white-space: nowrap; } /* The audience line stays on one line wherever the window has room (Lucas, 2026-11-06). */ /* One line when it fits; longer languages wrap into balanced lines inside the window instead of running off it (Lucas, 2026-11-06, French). */ @media (min-width: 1200px) { .route-language-new-31 .next-gamut:not(.avail-now) { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 96px) !important; white-space: normal; text-wrap: balance; } } /* The availability sentence and its capitals read as one block, the App Store icon after them (Lucas, 2026-11-06). */ .route-language-new-31 .next-everyone .story-avail { margin-bottom: 0 !important; padding-bottom: 0 !important; } .route-language-new-31 .next-everyone .avail-now { margin-top: 28px !important; margin-bottom: 0 !important; } .route-language-new-31 .next-everyone .store-icon { margin-top: 28px; } /* Rounder pictures on Language, Storyline and Lifestyle: 24 (Lucas, 2026-11-06). */ .route-language-new-31 .next-room, .route-language-new-31 .next-shot, .route-language-new-31 .pyr-slide .next-room, .tile-image, .frame, .frame img, img[data-slide] { border-radius: 24px !important; overflow: hidden; } .route-language-new-31 .next-hero-shot, .route-language-new-31 .hero-wide { border-radius: 24px !important; } /* The intro breaks at its sentences on a wide window. */ .hero-lead .wide-br { display: none; } @media (min-width: 1100px) { .hero-lead .wide-br { display: inline; } } /* The closing block is the App Store line and icon alone; iCloud is on the Account picture's caption (Lucas, 2026-11-06). */ .route-language-new-31 .next-everyone .story-avail { display: none; } /* Room between the contact line and the form (Lucas, 2026-11-06). */ .contact-form { margin-top: 14px; } @media (max-width: 750px) { .page-header { margin-bottom: 0 !important; padding-bottom: 0 !important; } .page-header .row, .page-header .block { margin-bottom: 0 !important; padding-bottom: 0 !important; } .page-header p { margin-bottom: 0; } } .contact-form .name-fields { gap: 18px; } /* The opening page on a phone: one column of pages, no wrap; the rabbit smaller beside the name (Lucas, 2026-11-06). */ @media (max-width: 750px) { .launch-chooser { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center; row-gap: 26px !important; } .launch-capsule, .launch-capsule:last-child { padding: 0 !important; margin: 0 !important; } } /* The moon wears the rabbit's lavender on every device (Lucas, 2026-11-06). */ .theme-switch, #topNav .theme-switch { color: #c7b3ff !important; } /* One violet for the brand's voice, one grey for support, lavender for icons (Lucas, 2026-11-06). */ #mobileMenuLink button, #mobileNav a, .main-nav a { color: var(--hero-grey) !important; } #mobileNav a[aria-current], .main-nav a[aria-current], #mobileNav a.current, .main-nav a.current { color: var(--hero-title) !important; } .route-language-new-31 .pyr-parent { color: var(--hero-grey); opacity: 1; } .route-language-new-31 .hero-lead-in { color: var(--hero-title) !important; } /* Wordmark evenly between Menu and the first header, centre to centre: 55 each (phone). */ @media (max-width: 750px) { .route-language-new-31 .story-title-top { margin-top: -18.5px; } } /* The payoff stands apart from the paragraph before it (Lucas, 2026-11-06). */ .route-language-new-31 .hero-lead p:has(.payoff) { margin-top: 18px; } /* The interface language capsule: its own centred row under the wordmark, unpinned (Lucas, 2026-11-06). */ .route-language-new-31 .shot-bar { position: static !important; display: flex; justify-content: center; margin: -14px 0 46px !important; padding: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .route-language-new-31 .shot-bar::after { display: none !important; } /* An open rail stays inside the screen: the row no longer grows to the rail's full width and pushes the page sideways (Lucas, 2026-11-06). */ @media only screen and (max-width: 750px) { .route-language-new-31 .shot-bar .shot-controls.has-open-rail { width: 100%; min-width: 0; } } /* Wider screens: as on the phone, an open rail takes the row alone, centred, so nothing jumps sideways. */ @media only screen and (min-width: 751px) { .route-language-new-31 .shot-bar .shot-controls:has(.rail) { justify-content: center; } .route-language-new-31 .shot-bar .shot-controls:has(.rail) .shot-control:not(:has(.rail)) { display: none; } } .route-language-new-31 #page, .route-language-new-31 #content { position: relative; } @media (max-width: 750px) { .route-language-new-31 .story-title-top { margin-top: 0; } } /* Phone: the open rail is 26 tall in a 24 tall row, so it overhangs by 1, not 2; the headline no longer moves 2px (Lucas, 2026-11-06). */ @media only screen and (max-width: 750px) { .route-language-new-31 .shot-bar .shot-control.is-open .rail { margin-top: -1px; margin-bottom: -1px; } /* A rail shorter than the screen sits centred; a longer one still scrolls from its first choice (auto margins, not justify-content, so nothing is cut off). */ .route-language-new-31 .shot-bar .shot-control.is-open .rail > :first-child { margin-left: auto; } .route-language-new-31 .shot-bar .shot-control.is-open .rail > :last-child { margin-right: auto; } /* Room either side so any choice, even the first or last, can open in the middle of the screen (Lucas: both rails centred). */ .route-language-new-31 .shot-bar .shot-control.is-open .rail { padding-left: calc(50% - 16px); padding-right: calc(50% - 16px); } } /* TRIAL (Lucas, 2026-11-06): phone header row = rabbit at the left margin, MENU centred, moon at the right margin; rabbit 28, moon 24. To revert: delete this whole block (through "END TRIAL"). */ @media only screen and (max-width: 750px) { #mobileMenuLink button { transform: none; } .logo-rabbit { position: absolute; left: 11.6px; top: 13px; width: 28px; height: 28px; margin: 0; transform: none; z-index: 900; } /* 28: the slim rabbit reads as large as the 24 moon */ #topNav .theme-switch { left: auto; right: 18.8px; top: 14px; width: 18px; height: 24px; } /* ink, not box, on the 20px margin */ /* edges: rabbit and moon on the page's 20px margin (Lucas, 2026-11-06) */ #topNav .theme-switch svg { width: 18px; height: 18px; } /* smaller than the rabbit: the logo leads, the switch is quiet (Lucas, 2026-11-06) */ /* Ink centres on MENU's capitals (26.7px from the top): rabbit ink, the crescent's body, the sun's disc; measured in Chromium. */ .theme-switch .moon, #topNav .theme-switch .moon { transform: translateY(-1.3px) !important; } .theme-switch .sun, #topNav .theme-switch .sun { transform: translateY(0.7px) !important; } } /* END TRIAL */ /* Phone footer (Lucas, 2026-11-06): Instagram on the left margin, "follow the purple rabbit.." and its rabbit on the right, both by their ink on the page's 20px margin; the footer rabbit 10% larger (22.7 to 25). */ @media only screen and (max-width: 750px) { #socialLinks { justify-self: stretch; width: 100%; justify-content: space-between; } #socialLinks .instagram { margin-left: -9.8px; } .rabbit-line img { width: 25px; height: 25px; margin-right: -6.4px; } } /* The study capsule, inert for now: no pointer, no hover change. */ .capsule.is-inert { cursor: default; } .capsule.is-inert:hover { opacity: 1; } /* Phone: capsules to LANGUAGE, REMEMBERED matches ERA. to NETFLIX AND YOUTUBE (46px, letter to letter; Lucas, 2026-11-06). */ @media only screen and (max-width: 750px) { .route-language-new-31 .shot-bar { margin-bottom: 40.8px !important; } } /* Contact: Lucas's anime portrait, small and round in the form's bottom-right corner (level with Submit), in the app's lavender treatment (AccountSignature.swift): colour at 55%, the app's lavender at 62% on "screen", a deeper lavender at 45% on "color", the whole at 88%. */ .contact-form-block { position: relative; } .contact-avatar { position: absolute; right: 0; bottom: 6px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; isolation: isolate; opacity: .88; } .contact-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); } .contact-avatar::before, .contact-avatar::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .contact-avatar::before { background: rgba(199, 179, 255, .62); mix-blend-mode: screen; } .contact-avatar::after { background: rgba(168, 133, 255, .45); mix-blend-mode: color; } @media (max-width: 640px) { .contact-avatar { width: 32px; height: 32px; bottom: 25px; } }