/* Yachay — Dala design variant (kb/design/templates/Dala) Void black canvas, Inter substitute for PPNeueMontreal. Hierarchy through scale + negative tracking, never weight. No cards, no borders, no shadows — whitespace only. Derived from rikuna/static/dala.css (S1540). Deviation from the Dala reference, deliberate and in line with what Rikuna and Khipu already did: the single saturated accent is Yachay's blue #2A7FBF, not Dala's violet — same role, same exclusivity (filled buttons and the brand mark only). Amber (#ffb829) stays as the second chromatic voice for labels, the founding counter and form errors. Everything below the "partner page" rule is new here: a commission table, an earnings calculator, an FAQ and a three-step form have no counterpart on the Rikuna landing. They follow the same law — type and whitespace carry the structure, a hairline separates a row where a table genuinely needs one, and nothing gets a filled container. */ :root { --color-void: #000000; --color-bone-white: #ffffff; --color-ash-gray: #9a9a9a; --color-silver-mist: #bdbdbd; --color-yachay-blue: #2A7FBF; --color-blue-bright: #3FA3E8; --color-saffron-spark: #ffb829; --color-blue-deep: #1B4F72; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --text-caption: 12px; --text-nav-label: 14px; --text-body: 18px; --text-heading-2xs: 24px; --text-heading-xs: 27px; /* floors are sized for a 360px viewport, not for the desktop cap */ --text-heading-sm: clamp(25px, 3.4vw, 42px); --text-heading: clamp(27px, 3.9vw, 48px); --text-heading-lg: clamp(32px, 6.2vw, 68px); --text-display: clamp(32px, 4.4vw, 68px); --page-max-width: 1280px; --pad-x: clamp(20px, 4vw, 48px); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Everything that used to be a hardcoded white or black veil. They are tokens so the light view below can restate them in one place. */ --line-hairline: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.2); --surface-card: rgba(255, 255, 255, 0.022); --surface-card-border: rgba(255, 255, 255, 0.085); --track: rgba(255, 255, 255, 0.18); --nav-veil: linear-gradient(rgba(0, 0, 0, 0.97) 62%, rgba(0, 0, 0, 0.6) 84%, rgba(0, 0, 0, 0)); --menu-bg: rgba(0, 0, 0, 0.97); --color-warning: var(--color-saffron-spark); } /* ---------- light view ---------- Owner call 2026-08-30 (S1659). Neutral greys, no cream and no beige, per the house rule. Only the tokens are restated; every rule below keeps the one definition it already has. The attribute is set on before paint by the inline script in the page head, so there is no flash. */ :root[data-theme="light"] { --color-void: #f4f5f6; --color-bone-white: #14161a; --color-silver-mist: #3d4147; --color-ash-gray: #6a6f77; --color-yachay-blue: #1a5f94; --color-blue-bright: #14507d; /* Amber turns brown on a light ground, and brown is out of the palette by house rule. The second voice is a neutral slate here; the two places where it carries a warning get their own colour below. */ --color-saffron-spark: #4b5158; --color-warning: #b3261e; --color-blue-deep: #123f63; --line-hairline: rgba(20, 22, 26, 0.14); --line-strong: rgba(20, 22, 26, 0.26); --surface-card: rgba(20, 22, 26, 0.028); --surface-card-border: rgba(20, 22, 26, 0.1); --track: rgba(20, 22, 26, 0.18); --nav-veil: linear-gradient(rgba(244, 245, 246, 0.97) 62%, rgba(244, 245, 246, 0.6) 84%, rgba(244, 245, 246, 0)); --menu-bg: rgba(244, 245, 246, 0.98); } * { margin: 0; padding: 0; box-sizing: border-box; } /* overflow-x on alone does not hold on iOS — the viewport still rubber-bands sideways. clip is preferred over hidden because it does not turn the element into a scroll container. */ html { overflow-x: hidden; scroll-behavior: smooth; } @supports (overflow: clip) { html { overflow-x: clip; } } body { background: var(--color-void); color: var(--color-bone-white); font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } ::selection { background: var(--color-yachay-blue); color: #000; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } em { font-style: normal; color: var(--color-yachay-blue); } .wrap { max-width: var(--page-max-width); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } /* ---------- type ---------- */ h1, h2, h3 { font-weight: 400; } /* The blue half of a hero headline is its own sentence, so it gets its own line at every width. Left to the viewport it broke mid-sentence: "Answer every message. Type" / "none of them." */ .hero .t-display em { display: block; } .t-display { font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; } .t-lg { font-size: var(--text-heading-lg); line-height: 1.06; letter-spacing: -0.04em; } .t-heading { font-size: var(--text-heading); line-height: 1.1; letter-spacing: -0.035em; } .t-sm { font-size: var(--text-heading-sm); line-height: 1.15; letter-spacing: -0.03em; } .t-xs { font-size: var(--text-heading-xs); line-height: 1.2; letter-spacing: -0.015em; } .label { display: block; font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-saffron-spark); } /* Where the lines fall is not left to the viewport. Measured across EN, DE and ES at seven widths, the body blocks dropped two or three words onto a line of their own under a full paragraph, 151 times. Every one of these is a short block of three to five lines, so they all get `balance`: the lines come out the same length and there is no tail. `pretty` was tried first on the copy inside the areas and only removed 65 of the 151, because it does no more than pull a word down when the last line would be an orphan. Falls back to today's behaviour where the property is unsupported, so nothing gets worse anywhere. */ .hero .body-copy, .section-head .body-copy, .cta-sec p, .value-item p, .area p, .svc-item p { text-wrap: balance; } /* The bullets are one line each at most widths; pretty is enough and cheaper. */ .area li { text-wrap: pretty; } .body-copy { color: var(--color-silver-mist); font-weight: 400; max-width: 52ch; } .body-copy strong { color: var(--color-bone-white); font-weight: 600; } /* ---------- buttons ---------- */ .btn-pill { display: inline-block; background: var(--color-yachay-blue); color: #04121d; font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; padding: 14px 24px; border-radius: 24px; border: 0; cursor: pointer; transition: transform 0.35s var(--ease), background 0.35s; } .btn-pill:hover { transform: translateY(-2px); background: var(--color-blue-bright); } .btn-ghost { display: inline-block; color: var(--color-ash-gray); font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; padding: 14px 6px; transition: color 0.3s; } .btn-ghost:hover { color: var(--color-bone-white); } .btn-ghost .arrow { color: var(--color-saffron-spark); margin-left: 6px; } /* ---------- canvas ---------- */ /* partners.html runs the dala field, creator.html the particle network of the main page. Same job for the canvas element either way. */ #field, #particle-canvas { position: fixed; inset: 0; /* A canvas is a replaced element: without an explicit size it takes its intrinsic width/height attributes (W * dpr) and ignores inset. */ width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* On the light ground the same field would read as noise, so it is dimmed -- the value index.html already uses for its light theme. */ :root[data-theme="light"] #particle-canvas { opacity: 0.45; } main { position: relative; z-index: 1; } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background 0.4s; } .nav.scrolled { background: var(--nav-veil); backdrop-filter: blur(14px); } @supports not (backdrop-filter: blur(10px)) { .nav.scrolled { background: var(--menu-bg); } } /* light or dark, on the creator page. The button shows the view it switches to, so the sun stands in the dark view and the moon in the light one. */ .view-toggle { margin-left: auto; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--color-ash-gray); display: flex; align-items: center; transition: color 0.25s; } .view-toggle:hover { color: var(--color-bone-white); } .view-toggle .v-moon { display: none; } .view-toggle .v-sun { display: block; } :root[data-theme="light"] .view-toggle .v-moon { display: block; } :root[data-theme="light"] .view-toggle .v-sun { display: none; } .nav-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 22px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* The mark stands in for the Y of the wordmark, the way it does in the nav of index.html -- so it sits against "achay" as a glyph would, not a nav item's gap away from it. */ .logo { position: relative; z-index: 2; display: flex; align-items: center; gap: 3px; font-size: 17px; font-weight: 400; letter-spacing: -0.01em; } .logo svg, .logo img { display: block; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); } .nav-links a:not(.btn-pill) { font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--color-ash-gray); transition: color 0.3s; } .nav-links a:not(.btn-pill):hover { color: var(--color-bone-white); } .lang-select { background: transparent; border: 0; color: var(--color-ash-gray); font-family: inherit; font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; cursor: pointer; padding: 6px 2px; transition: color 0.3s; } .lang-select:hover { color: var(--color-bone-white); } .lang-select option { background: #0a0a0a; color: var(--color-bone-white); } /* burger: hidden until the links collapse into the panel */ .nav-toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; margin: -11px -12px -11px 0; align-items: center; justify-content: flex-end; background: none; border: 0; padding: 0; color: var(--color-bone-white); cursor: pointer; } .nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 0.35s var(--ease), background 0.15s; } .nav-toggle i { position: relative; } .nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; } .nav-toggle i::before { top: -7px; } .nav-toggle i::after { top: 7px; } .nav.open .nav-toggle i { background: transparent; } .nav.open .nav-toggle i::before { transform: translateY(7px) rotate(45deg); } .nav.open .nav-toggle i::after { transform: translateY(-7px) rotate(-45deg); } body.nav-open { overflow: hidden; } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 80px; } .hero-copy { max-width: min(900px, 70vw); } .hero .label { margin-bottom: 24px; } .hero h1 { margin-bottom: 30px; } .hero .body-copy { max-width: 46ch; margin-bottom: 36px; } .hero-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } /* the four proof points, set as a quiet type row under the CTAs */ .hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px; font-size: 15px; color: var(--color-ash-gray); } .hero-points span { display: inline-flex; align-items: center; gap: 9px; } .hero-points span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-yachay-blue); flex: none; } .scroll-hint { position: absolute; bottom: 30px; left: var(--pad-x); z-index: 2; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); display: flex; align-items: center; gap: 10px; } .scroll-hint::after { content: ""; width: 48px; height: 1px; background: var(--color-ash-gray); display: block; animation: hintPulse 2.4s ease-in-out infinite; transform-origin: left; } @keyframes hintPulse { 0%,100% { transform: scaleX(0.3); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } } /* ---------- sections ---------- */ section { position: relative; padding: clamp(80px, 10vw, 150px) 0; } .section-head { max-width: 820px; margin-bottom: clamp(48px, 6vw, 90px); } .section-head .label { margin-bottom: 20px; } .section-head .body-copy { margin-top: 24px; } /* value — four statements, no boxes */ .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(44px, 5vw, 76px); max-width: 1000px; } /* Three statements in a grid capped at 1000px leave the third one alone on a second row: three columns of 300 plus two gaps of 72 need 1044. The two creator sections that carry three get the width their own row needs. */ #gain .value-grid, #trial .value-grid { max-width: 1180px; } .value-item h3 { font-size: var(--text-heading-2xs); letter-spacing: -0.02em; margin-bottom: 12px; } .value-item p { color: var(--color-silver-mist); } /* the six areas — numbered typographic list, the figure sits right */ .areas { display: grid; gap: clamp(52px, 6vw, 84px); } .area { display: grid; grid-template-columns: 62px 1fr; gap: 26px; align-items: baseline; } .area .num { font-size: var(--text-heading-xs); font-weight: 200; color: transparent; -webkit-text-stroke: 1px rgba(42, 127, 191, 0.8); text-shadow: 0 0 22px rgba(42, 127, 191, 0.4); } .area h3 { font-size: var(--text-heading-2xs); letter-spacing: -0.02em; margin-bottom: 12px; } .area p { color: var(--color-silver-mist); max-width: 46ch; } .area ul { margin-top: 18px; display: grid; gap: 9px; } .area li { font-size: 15px; color: var(--color-ash-gray); display: grid; grid-template-columns: 14px 1fr; gap: 10px; } /* a drawn rule, not a dash character: an em dash set at list-item size reads as a stray line of body text rather than as a bullet. */ .area li::before { content: ""; align-self: start; justify-self: start; width: 9px; height: 1px; margin-top: 12px; background: var(--color-yachay-blue); } /* desktop: the #what figure assembles in the right column, so the list keeps out of it. Without this the six branches land on the copy. */ @media (min-width: 901px) { #who .section-head, #who .value-grid { max-width: 62%; } } /* service — four columns of plain type */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(40px, 4.5vw, 64px); } .svc-item h3 { font-size: var(--text-heading-2xs); letter-spacing: -0.02em; margin-bottom: 12px; } .svc-item p { color: var(--color-silver-mist); font-size: 16px; } /* final cta */ .cta-sec { text-align: center; padding-bottom: clamp(96px, 12vw, 170px); } .cta-sec h2 { margin: 0 auto 24px; max-width: 14ch; } .cta-sec .body-copy { margin: 0 auto 40px; max-width: 46ch; } .cta-ctas { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } /* footer */ footer { position: relative; z-index: 1; padding: 60px 0 70px; font-size: var(--text-nav-label); color: var(--color-ash-gray); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(32px, 4vw, 60px); } .foot-brand { display: flex; align-items: center; gap: 3px; font-size: 17px; color: var(--color-bone-white); margin-bottom: 14px; } .foot-brand img { display: block; } .footer-tagline { color: var(--color-ash-gray); } .footer-copy { margin-top: 10px; color: #6d6d6d; font-size: var(--text-caption); } .footer-col-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-silver-mist); margin-bottom: 16px; } .footer-col-links { display: grid; gap: 10px; } .footer-col-links a { color: var(--color-ash-gray); transition: color 0.3s; } .footer-col-links a:hover { color: var(--color-saffron-spark); } /* ---------- reveals ---------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* Reveals only start hidden when the script that reveals them actually ran. Without it -- no JS, a link preview renderer, a blocked file -- the class stays off and every block keeps its place, visible and unanimated. dala-field.js is deferred, so the page sets it inline in the head. */ html:not(.reveals-armed) .reveal { opacity: 1; transform: none; transition: none; } /* the hero rises on load, in step with the aperture assembling behind it */ .rise > * { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease) forwards; } .rise > *:nth-child(1) { animation-delay: 0.15s; } .rise > *:nth-child(2) { animation-delay: 0.28s; } .rise > *:nth-child(3) { animation-delay: 0.41s; } .rise > *:nth-child(4) { animation-delay: 0.54s; } .rise > *:nth-child(5) { animation-delay: 0.67s; } .rise > *:nth-child(6) { animation-delay: 0.80s; } @keyframes rise { to { opacity: 1; transform: none; } } /* ---------- responsive ---------- */ /* A 1280x720 laptop is wide enough for the desktop type scale but not tall enough for it: the display plus the lead pushed the CTA under the fold. Trim the scale against the height, not the width. */ @media (min-width: 901px) and (max-height: 820px) { :root { --text-display: clamp(32px, 3.9vw, 58px); } .hero-inner { padding-top: 96px; padding-bottom: 56px; } .hero .label { margin-bottom: 18px; } .hero h1 { margin-bottom: 22px; } .hero .body-copy { margin-bottom: 28px; } .hero-points { margin-top: 28px; } } @media (max-width: 900px) { .nav-toggle { display: flex; } /* full-screen panel instead of dropping the links entirely */ .nav-menu { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; background: var(--menu-bg); padding: 0 var(--pad-x); opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0.35s; } .nav.open .nav-menu { opacity: 1; visibility: visible; transform: none; } .nav-menu a:not(.btn-pill) { display: block; font-size: var(--text-heading-sm); font-weight: 400; letter-spacing: -0.03em; text-transform: none; color: var(--color-bone-white); padding: 12px 0; } .nav-menu .btn-pill { margin-top: 26px; } .nav-menu .lang-select { font-size: 16px; margin-top: 20px; } .hero-copy { max-width: 100%; } /* Mobile runs one figure, the hero's, and it stands under the copy (js/dala-field.js). The room for it comes from here: the hero stops centring itself in the viewport and goes to the top instead. The hero is a
, so it also carries the generic section padding above -- 80px of it at this width, on top of .hero-inner's own. Dropped here, or the copy starts a sixth of the screen down before its first line. */ .hero { align-items: flex-start; padding-top: 0; padding-bottom: 0; } .hero-inner { padding-top: 88px; padding-bottom: 44px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .nav-inner { padding: 16px var(--pad-x); gap: 14px; } /* 26px of glyph is not a tap target; grow it without growing the bar */ .logo { padding: 9px 0; margin: -9px 0; } .hero-inner { padding-top: 76px; padding-bottom: 36px; } .hero .label { margin-bottom: 18px; } .hero h1 { margin-bottom: 22px; } .hero .body-copy { margin-bottom: 28px; } .hero-ctas { gap: 10px; } .btn-ghost { padding-left: 0; padding-right: 0; } /* would sit under the mobile browser chrome, and the space is needed */ .scroll-hint { display: none; } .area { grid-template-columns: 40px 1fr; gap: 14px; } /* minmax floors above exceed the content box at 360px and force overflow */ .value-grid, .svc-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .cta-sec h2 { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-hint::after { animation: none; } .rise > * { opacity: 1; transform: none; animation: none; } .reveal { opacity: 1; transform: none; transition: none; } } /* ===================================================================== partner page ===================================================================== */ /* founding counter — a type row, not a badge on a pill */ .founding-line { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-saffron-spark); margin-bottom: 22px; } .founding-line .fc-num { font-size: 15px; letter-spacing: 0.04em; color: var(--color-bone-white); } .founding-line .fc-of { color: var(--color-ash-gray); letter-spacing: 0.1em; } /* the two commission figures, set as type */ .stat-row { display: flex; flex-wrap: wrap; gap: 18px 56px; margin-top: 44px; } .stat .stat-num { font-size: var(--text-heading-sm); font-weight: 200; line-height: 1; letter-spacing: -0.03em; color: var(--color-bone-white); } .stat .stat-lab { margin-top: 8px; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); } /* ---------- earnings calculator ---------- */ .calc { max-width: 680px; } /* market toggles: text, never filled — the violet-equivalent pill is reserved for the single primary action per view */ .calc-markets { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 44px; } .calc-market-btn { background: none; border: 0; padding: 6px 0; font-family: inherit; font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--color-ash-gray); cursor: pointer; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .calc-market-btn:hover { color: var(--color-bone-white); } .calc-market-btn.active { color: var(--color-bone-white); border-bottom-color: var(--color-yachay-blue); } .calc-slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; } .calc-slider-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); } .calc-count { font-size: var(--text-heading-2xs); font-weight: 200; color: var(--color-bone-white); } .calc-count span:last-child { font-size: 15px; color: var(--color-ash-gray); margin-left: 6px; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--track); cursor: pointer; margin: 0 0 48px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--color-yachay-blue); border: 0; transition: transform 0.25s var(--ease), background 0.25s; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); background: var(--color-blue-bright); } input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--color-yachay-blue); border: 0; } input[type="range"]::-moz-range-track { height: 1px; background: var(--track); } input[type="range"]:focus-visible { outline: 1px solid var(--color-yachay-blue); outline-offset: 8px; } .calc-result-label { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); margin-bottom: 12px; } .calc-main-num { font-size: var(--text-heading-lg); font-weight: 200; line-height: 1; letter-spacing: -0.04em; } .calc-main-unit { margin-top: 10px; color: var(--color-silver-mist); } .calc-setup-line { margin-top: 6px; color: var(--color-ash-gray); font-size: 16px; } .calc-miss { margin-top: 26px; color: var(--color-warning); font-size: 15px; max-width: 46ch; } /* ---------- tier table ---------- */ /* Rows, not cards: a hairline is a rule between two lines of type, which is what a three-row table needs to stay readable. No fills, no radius, no box. */ .tier-table { margin-top: clamp(56px, 6vw, 84px); max-width: 780px; } .tier-header, .tier-row { display: grid; grid-template-columns: 1.1fr 0.8fr 1.6fr auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-hairline); } .tier-header { border-top: 0; padding-bottom: 10px; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); } .tier-row { font-size: 16px; color: var(--color-silver-mist); transition: color 0.3s; } .tier-row .tier-name { font-size: var(--text-heading-2xs); font-weight: 200; color: var(--color-bone-white); letter-spacing: -0.02em; } .tier-row.active .tier-name { color: var(--color-yachay-blue); } .tier-row[role="button"]:hover { color: var(--color-bone-white); } .tier-row.compare-active { color: var(--color-bone-white); } .tier-row.compare-active .tier-name { color: var(--color-saffron-spark); } .tier-status { font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); } .tier-status.open { color: var(--color-yachay-blue); } .tier-info { margin-top: 24px; font-size: 15px; color: var(--color-ash-gray); max-width: 60ch; } /* The copy above a table and the table itself are one column, not two of different widths: .body-copy runs to 52ch and the table to 780px, which read as a ragged step down the page (Owner S1659). */ #pricing .section-head .body-copy, #honest .section-head .body-copy { max-width: 720px; } #pricing .tier-table, #honest .tier-table { max-width: 720px; } #pricing .tier-info, #honest .tier-info { max-width: 100%; } /* the pro-tip flow is four labels, not four blocks of copy */ #tip .areas { gap: clamp(22px, 2.4vw, 34px); } #tip .area h3 { margin-bottom: 0; } /* ---------- faq ---------- */ .faq-list { max-width: 860px; } .faq-item { border-top: 1px solid var(--line-hairline); } .faq-item:last-child { border-bottom: 1px solid var(--line-hairline); } .faq-q { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: var(--text-heading-2xs); font-weight: 200; letter-spacing: -0.02em; color: var(--color-bone-white); transition: color 0.3s; } .faq-q:hover { color: var(--color-silver-mist); } .faq-q .plus { flex: none; font-size: 22px; font-weight: 200; color: var(--color-yachay-blue); transition: transform 0.4s var(--ease); } .faq-item.open .faq-q .plus { transform: rotate(45deg); } /* grid-rows animates without measuring the content */ .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { color: var(--color-silver-mist); font-size: 17px; max-width: 62ch; padding-bottom: 26px; } /* ---------- apply wizard ---------- */ /* The section is centred, the form is not: a label centred over a left-aligned field reads as a misprint (Owner S1659). The heading of the step keeps the centre, the fields hold their own edge. */ .wizard { max-width: 560px; margin: 0 auto; text-align: left; } .wizard-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 46px; } .wizard-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background 0.35s, transform 0.35s var(--ease); } .wizard-dot.active { background: var(--color-yachay-blue); transform: scale(1.5); } .wizard-dot.done { background: var(--color-ash-gray); } .wizard-card { position: relative; } .wizard-slide { display: none; opacity: 0; transform: translateX(24px); transition: opacity 0.25s ease, transform 0.25s var(--ease); } .wizard-slide.active { display: block; } .wizard-slide.slide-in { opacity: 1; transform: none; } .wizard-slide.slide-out-left { opacity: 0; transform: translateX(-24px); } .wizard-slide.slide-out-right { opacity: 0; transform: translateX(24px); } .wizard-question { font-size: var(--text-heading-2xs); font-weight: 200; letter-spacing: -0.02em; margin-bottom: 34px; text-align: center; } .wizard-field { margin-bottom: 26px; } .wizard-field label { display: block; margin-bottom: 8px; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ash-gray); } .wizard-field input, .wizard-field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 10px 0; font-family: inherit; font-size: 17px; font-weight: 200; color: var(--color-bone-white); transition: border-color 0.3s; } .wizard-field select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--color-ash-gray) 50%), linear-gradient(135deg, var(--color-ash-gray) 50%, transparent 50%); background-position: right 8px center, right 3px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 22px; } .wizard-field select option, .wizard-field select optgroup { background: #0a0a0a; color: var(--color-bone-white); } .wizard-field input:focus, .wizard-field select:focus { outline: 0; border-bottom-color: var(--color-yachay-blue); } .wizard-field input::placeholder { color: #5a5a5a; } .phone-row { display: flex; align-items: baseline; gap: 10px; } .phone-prefix { color: var(--color-ash-gray); font-size: 17px; font-weight: 200; white-space: nowrap; padding: 10px 0; border-bottom: 1px solid var(--line-strong); } .lang-hint { font-size: var(--text-caption); color: var(--color-ash-gray); margin: -14px 0 22px; } .lang-hint strong { color: var(--color-silver-mist); font-weight: 600; } .wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 38px; } .wizard-nav .wz-next { margin-left: auto; } /* Creator signup: terms row and the bot check above the submit button. */ .wizard-terms { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; font-size: 13px; line-height: 1.5; cursor: pointer; } .wizard-terms input { width: auto; margin: 0; } .wizard-terms a { text-decoration: underline; } .cf-turnstile { margin: 14px 0 4px; } .wizard-error { margin-top: 18px; color: var(--color-warning); font-size: 15px; min-height: 1em; } .wizard-success { text-align: center; } .wizard-success .ws-icon { font-size: 34px; color: var(--color-yachay-blue); margin-bottom: 20px; } .wizard-success h3 { font-size: var(--text-heading-sm); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 18px; } .wizard-success p { color: var(--color-silver-mist); max-width: 42ch; margin: 0 auto; } /* ---------- language switch in the nav ---------- */ .lang-switch { display: flex; align-items: center; gap: 4px; } .lang-btn { background: none; border: 0; padding: 6px 6px; font-family: inherit; font-size: var(--text-nav-label); font-weight: 600; letter-spacing: 0.025em; color: #6d6d6d; cursor: pointer; transition: color 0.3s; } .lang-btn:hover { color: var(--color-bone-white); } .lang-btn.active { color: var(--color-bone-white); } @media (max-width: 900px) { .nav-menu .lang-switch { margin-top: 22px; } .nav-menu .lang-btn { font-size: 16px; } } @media (max-width: 640px) { .stat-row { gap: 18px 36px; } .tier-header, .tier-row { grid-template-columns: 1fr 0.7fr; gap: 4px 12px; } /* Two of the four heads are hidden on a phone and the price moves under the name, which left PER MONTH standing over the status column. The row carries its own labels at this width, so the head goes. */ .tier-header { display: none; } .tier-row .tier-rate { grid-column: 1 / -1; font-size: 15px; color: var(--color-ash-gray); } .tier-row .tier-status { grid-column: 2; justify-self: end; grid-row: 1; } .faq-q { font-size: 19px; padding: 20px 0; } .wizard-question { font-size: 20px; } } /* channels — one card per platform, on the creator page. Owner call 2026-08-30 (S1644): the "no cards, no borders, no shadows" law at the top of this file does not govern this block. These are the .social-card of index.html carried into the dark palette -- brand bar, lifted surface, hairline, corner glow, hover lift -- because the block's job is to be the one place on the page where the eye stops, and a hairline could not do that job. The list keeps the drawn rule of .area li, and a thing the channel cannot do is marked as such rather than left out. Scoped to #channels; nothing else on either page picks these up. */ .chan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 26px); max-width: 1000px; } .chan { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 34px); border-radius: 16px; background: var(--surface-card); border: 1px solid var(--surface-card-border); transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s ease, box-shadow .45s ease; } /* the platform's colour, as the bar across the top */ .chan::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--chan-bar, var(--chan)); } /* and once more as the light falling into the corner */ .chan::after { content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, var(--chan) 0%, transparent 72%); opacity: .16; transition: opacity .45s ease, transform .45s ease; } .chan:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--chan) 55%, transparent); box-shadow: 0 18px 44px -20px var(--chan); } .chan:hover::after { opacity: .28; transform: scale(1.15); } @media (prefers-reduced-motion: reduce) { .chan, .chan::after { transition: none; } .chan:hover { transform: none; } } .chan-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .chan-head svg { flex-shrink: 0; } .chan-head h3 { font-size: var(--text-heading-2xs); letter-spacing: -0.02em; margin: 0; } .chan > p { color: var(--color-silver-mist); font-size: 16px; } .chan ul { margin-top: 20px; margin-bottom: 0; display: grid; gap: 10px; } /* Not the grid of .area li: these items carry inline markup, and a splits the text into two anonymous grid items, so everything after the bold run lands in the 14px rule column and wraps one letter per line. The rule is positioned out of flow instead, which leaves the text one normal block. */ .chan li { font-size: 15px; color: var(--color-ash-gray); position: relative; padding-left: 24px; } /* the drawn rule of .area li, in the channel's own colour */ .chan li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--chan); } /* what the channel cannot do. A crossed rule, not a missing line: leaving it out is what every competitor page does, and it is the omission this block exists to avoid. */ .chan li.no { color: #7d7d7d; } .chan li.no::before { width: 9px; height: 9px; top: 8px; background: none; border-top: 1px solid #6a6a6a; transform: rotate(-45deg); } .chan li.no strong { color: var(--color-silver-mist); font-weight: 600; } @media (max-width: 900px) { .chan-grid { grid-template-columns: 1fr; } } /* ---------- stack comparison (creator) ---------- */ .stack-calc { margin-top: clamp(56px, 6vw, 84px); max-width: 780px; } .stack-row { display: grid; grid-template-columns: 1.15fr 1.45fr 104px; gap: 22px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line-hairline); } .stack-row:first-child { border-top: 0; } .stack-name { color: var(--color-silver-mist); font-size: 16px; } .stack-price { font-size: 16px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .stack-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--surface-card); border: 1px solid var(--surface-card-border); } .stack-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 3px; background: var(--color-silver-mist); opacity: 0.7; } /* the sum closes the list, so it carries the stronger rule above it */ .stack-row.is-sum { border-top: 1px solid var(--line-strong); margin-top: 10px; padding-top: 24px; } .stack-row.is-sum .stack-bar { height: 10px; border-radius: 5px; } .stack-row.is-sum .stack-fill { border-radius: 5px; opacity: 1; } .stack-row.is-sum .stack-name, .stack-row.is-sum .stack-price { color: var(--color-bone-white); font-size: 18px; font-weight: 600; } /* ours sits directly under the sum, on the same scale, so the gap is the argument */ .stack-row.is-ours { border-top: 0; padding-top: 10px; } .stack-row.is-ours .stack-fill { border-radius: 5px; background: var(--color-blue-bright); opacity: 1; } .stack-row.is-ours .stack-name { color: var(--color-bone-white); font-size: 18px; font-weight: 600; } .stack-row.is-ours .stack-price { color: var(--color-blue-bright); font-size: 24px; } .stack-foot { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-hairline); color: var(--color-silver-mist); font-size: 16px; max-width: 56ch; } @media (max-width: 640px) { .stack-row { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 14px 0; } .stack-name { grid-column: 1; grid-row: 1; } .stack-price { grid-column: 2; grid-row: 1; } .stack-bar { grid-column: 1 / -1; grid-row: 2; } .stack-row.is-ours { padding-top: 14px; } } /* the way back out of step 2 of the creator signup */ .wz-back { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--color-silver-mist); cursor: pointer; transition: color 0.2s var(--ease); } .wz-back:hover { color: var(--color-bone-white); } /* ---------- the creator hero's right half ---------- Owner call S1857: no dashboard shot, no stock face, no shelf -- something of its own that a creator recognises. What a creator recognises is the hour. The clock is read from the visitor's own machine, so the line under it is true at the moment it is read, and the night below it is marked as an example and set as type. A chat bubble in a card would be a picture of a product this page can simply name, and cards are not this design. */ @media (min-width: 1101px) { .hero-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 72px); align-items: center; } .hero-split .hero-copy { max-width: none; } .hero-ledger { margin-top: 0; } /* Two columns carry the hero now, so the display no longer has 900px to itself. Left at 68px the headline broke into a fourth line and pushed the CTA under the fold on a 1440x900 laptop -- the same fold this file already trims the scale for at max-height 820. */ .hero-split .t-display { font-size: clamp(40px, 3.8vw, 58px); } } /* The plan's second hero finding: $49 and 3 stood in the same size, a price and a feature count competing for the same glance. The price keeps the figure size, the channel count steps back to a quiet line. */ .hero-copy .stat + .stat .stat-num { font-size: var(--text-heading-xs); color: var(--color-silver-mist); } /* Hidden until the first founder seat is actually gone (S1857). The class sits on the creator page only; partners.html keeps its own row. */ .founding-line.fc-gated { display: none; } .hero-ledger { margin-top: 64px; } .hl-now-label, .hl-log-head { display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .hl-now-label { color: var(--color-saffron-spark); margin-bottom: 14px; } .hl-now-time { display: block; font-size: clamp(44px, 4.2vw, 60px); font-weight: 200; line-height: 1; letter-spacing: -0.045em; color: var(--color-bone-white); font-variant-numeric: tabular-nums; } .hl-now-line { display: block; margin-top: 14px; font-size: 17px; color: var(--color-silver-mist); max-width: 34ch; text-wrap: balance; } .hl-log { margin-top: 34px; } .hl-log-head { color: var(--color-ash-gray); margin-bottom: 10px; } /* the one place this block earns a rule: a time column beside a text column is a table, and a hairline is what the house style gives a table row */ .hl-row { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; padding: 13px 0; border-top: 1px solid var(--line-hairline); } .hl-t { font-size: 15px; color: var(--color-ash-gray); font-variant-numeric: tabular-nums; padding-top: 2px; } .hl-c { display: block; font-size: 15px; font-weight: 600; color: var(--color-bone-white); } .hl-e { display: block; margin-top: 5px; font-size: 15px; color: var(--color-silver-mist); text-wrap: pretty; } .hl-note { margin-top: 18px; font-size: 13px; color: var(--color-ash-gray); max-width: 42ch; }