:root { --page-max: 1280px; --gutter: 36px; --section-gap: 34px; --pane-radius: 20px; --pane-pad: 32px; --pane-border: 1px solid rgba(255, 255, 255, 0.08); --control-h: 52px; --utility-h: 36px; --field-gap-x: 12px; --field-gap-y: 10px; --header-stack-offset: 0px; --ymxb-text-primary: rgba(255, 255, 255, 0.96); --ymxb-text-muted: rgba(255, 255, 255, 0.82); --ymxb-accent-1: #6fe7ff; --ymxb-accent-2: #ffb35c; --ymxb-accent: var(--ymxb-accent-1); --ymxb-accent-gradient: linear-gradient(90deg, var(--ymxb-accent-1), var(--ymxb-accent-2)); --ymxb-pane-radius: var(--pane-radius); --ymxb-pane-border: var(--pane-border); --ymxb-pane-shadow: 0 14px 38px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.1) inset; --ymxb-pane-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); --ymxb-pane-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1)); --ymxb-pane-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0) 68%); --ymxb-field-bg: rgba(255, 255, 255, 0.16); --ymxb-field-border: 1px solid rgba(255, 255, 255, 0.16); --ymxb-ring: 0 0 0 2px rgba(255, 255, 255, 0.48); --ymxb-glass-blur: 9px; --ymxb-glass-sat: 112%; --ymxb-font-body: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", sans-serif; --ymxb-font-display: "Sora", "Plus Jakarta Sans", sans-serif; } /* Accent palettes: switch by setting `data-accent` on the element. */ html[data-accent="coast"] { --ymxb-accent-1: #003cd7; --ymxb-accent-2: #765cbf; } html[data-accent="sunset"] { --ymxb-accent-1: #ffb35c; --ymxb-accent-2: #ff5aa5; } html[data-accent="midnight"] { --ymxb-accent-1: #a88bff; --ymxb-accent-2: #6fe7ff; } html[data-contrast="high"], body[data-contrast="high"] { --ymxb-text-primary: #ffffff; --ymxb-text-muted: rgba(255, 255, 255, 0.94); --ymxb-pane-border: 1px solid rgba(255, 255, 255, 0.22); --ymxb-pane-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.14)); --ymxb-pane-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.18)); --ymxb-pane-shadow: 0 16px 42px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.14) inset; --ymxb-field-bg: rgba(255, 255, 255, 0.2); --ymxb-field-border: 1px solid rgba(255, 255, 255, 0.28); --ymxb-ring: 0 0 0 2px rgba(255, 255, 255, 0.62); --ymxb-glass-blur: 8px; --ymxb-glass-sat: 108%; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background-color: #05070c; } body { margin: 0; font-family: var(--ymxb-font-body); color: var(--ymxb-text-primary); background: transparent; min-height: 100vh; overflow-x: hidden; position: relative; isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #05070c; background-image: url("../Background/12019-panorama-2154194.jpg"); background-position: center 46%; background-repeat: no-repeat; /* Keep the image filling the viewport as the screen narrows (no "shrinking" background). */ background-size: cover; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } .shell { width: min(980px, calc(100% - 1rem)); margin-inline: auto; } .page-shell { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); } .ymxb-home .shell { width: 100%; margin-inline: auto; } .pane, .pane-surface { position: relative; width: 100%; margin-inline: auto; border-radius: var(--ymxb-pane-radius); border: var(--ymxb-pane-border); background: var(--ymxb-pane-fill), var(--ymxb-pane-scrim); box-shadow: var(--ymxb-pane-shadow); -webkit-backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); overflow: hidden; } .pane { padding: var(--pane-pad); } .pane::before, .pane-surface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ymxb-pane-sheen); pointer-events: none; } .pane > *, .pane-surface > * { position: relative; z-index: 1; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --ymxb-pane-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.22)); --ymxb-pane-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.16)); --ymxb-field-bg: rgba(255, 255, 255, 0.24); --ymxb-field-border: 1px solid rgba(255, 255, 255, 0.4); } html[data-contrast="high"], body[data-contrast="high"] { --ymxb-pane-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.26)); --ymxb-pane-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.22)); --ymxb-field-bg: rgba(255, 255, 255, 0.28); --ymxb-field-border: 1px solid rgba(255, 255, 255, 0.54); } } .floating-brand { --brand-subtitle-left-inset-ratio: 0; width: min(var(--page-max), calc(100% - (var(--gutter) * 2))); margin: 1.1rem auto 0; display: grid; justify-items: center; gap: 0.14rem; text-align: center; } .ymxb-home .floating-brand { /* Optical align: the logo SVG has extra whitespace before the "Y". */ --brand-subtitle-left-inset-ratio: 0.036; } .header-title, .header-subtitle, .section-heading, .tier-title, .faq-question { position: relative; display: inline-block; color: var(--ymxb-text-primary); isolation: isolate; } .header-title::before, .header-subtitle::before { content: none; } .header-title { font-family: var(--ymxb-font-display); font-size: clamp(2.65rem, 9.1vw, 6.05rem); line-height: 0.92; letter-spacing: 0.045em; font-weight: 700; text-decoration: none; width: fit-content; max-width: 100%; margin-inline: auto; text-align: center; } .header-title--logo { font-size: 0; line-height: 0; letter-spacing: 0; } .header-logo { display: block; width: clamp(210px, 50vw, 540px); max-width: 100%; height: auto; } .header-title::after { content: none; } .header-subtitle { margin: 0 auto; font-family: var(--ymxb-font-body); font-weight: 600; text-transform: uppercase; letter-spacing: clamp(0.17em, 0.62vw, 0.255em); font-size: clamp(1.15rem, 2.2vw, 1.65rem); text-align: center; white-space: nowrap; max-width: 100%; } .ymxb-header-shell { margin-top: 3rem; padding-bottom: 0; display: grid; gap: 8px; } .utility-link { border: var(--ymxb-field-border); background: var(--ymxb-field-bg); color: var(--ymxb-text-primary); border-radius: 999px; height: var(--utility-h); min-height: var(--utility-h); padding: 0 0.88rem; font-family: var(--ymxb-font-body); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; } .corner-control { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 5px); z-index: 60; } .corner-control-left { left: calc(env(safe-area-inset-left, 0px) + 4px); } .corner-control-right { right: calc(env(safe-area-inset-right, 0px) + 4px); } .portal-corner { inline-size: clamp(62px, 7.6vw, 78px); block-size: clamp(62px, 7.6vw, 78px); min-width: 0; min-height: 0; padding: 0.3rem; border: 0; background: var(--ymxb-pane-sheen), var(--ymxb-pane-fill), var(--ymxb-pane-scrim); box-shadow: var(--ymxb-pane-shadow); -webkit-backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); border-radius: 0; clip-path: polygon(29.289% 0, 70.711% 0, 100% 29.289%, 100% 70.711%, 70.711% 100%, 29.289% 100%, 0 70.711%, 0 29.289%); line-height: 1; text-align: center; } .portal-corner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='30%2C2 70%2C2 98%2C30 98%2C70 70%2C98 30%2C98 2%2C70 2%2C30' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); } .nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 56px; gap: clamp(6px, 1.2vw, 12px); margin-top: 8px; padding: 6px 10px; } .nav-mark-link { min-width: 0; width: auto; block-size: clamp(34px, 3.8vw, 44px); aspect-ratio: 1671 / 1501; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0; line-height: 0; } .nav-mark { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .nav-right { display: none; } .nav-reserve { visibility: hidden; } .nav-links { list-style: none; margin: 0; padding: 0; min-width: 0; width: 100%; max-width: 100%; justify-self: end; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: clamp(6px, 0.9vw, 10px); align-items: center; } .nav-links li { min-width: 0; flex: 0 1 clamp(90px, 11.5ch, 104px); } .nav-row .menu-link { width: 100%; min-height: clamp(34px, 3.8vw, 44px); padding-inline: clamp(0.5rem, 1.1vw, 0.9rem); border-radius: 999px; font-size: clamp(0.72rem, 1vw, 0.86rem); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar { width: min(var(--page-max), calc(100% - (var(--gutter) * 2))); margin: 2.28rem auto 20px; padding: 6px 10px; } .topbar nav { width: 100%; } .topbar .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topbar .menu > li:first-child { margin-right: auto; } .topbar .menu-home-link { text-decoration: none; text-transform: none; letter-spacing: 0.03em; font-size: 0.95rem; font-family: var(--ymxb-font-display); font-weight: 600; font-style: normal; height: var(--control-h); display: inline-flex; align-items: center; color: var(--ymxb-text-primary); } .topbar .menu-home-link:hover, .topbar .menu-home-link:focus-visible { color: #ffffff; } .topbar .contrast-toggle { min-height: var(--control-h); height: var(--control-h); border-radius: 0.56rem; } .menu-link, .contrast-toggle { border: var(--ymxb-field-border); background: var(--ymxb-field-bg); color: var(--ymxb-text-primary); border-radius: 0.56rem; min-height: var(--control-h); padding: 0 0.95rem; font-family: var(--ymxb-font-body); font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; } .menu-link { min-width: 0; width: 100%; min-height: clamp(2.35rem, 4.2vw, var(--control-h)); padding-inline: clamp(0.55rem, 1vw, 0.95rem); font-size: clamp(0.64rem, 0.95vw, 0.8rem); letter-spacing: clamp(0.045em, 0.08vw, 0.07em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-link:hover, .menu-link:focus-visible, .contrast-toggle:hover, .contrast-toggle:focus-visible, .utility-link:hover, .utility-link:focus-visible { border-color: rgba(255, 255, 255, 0.46); background: rgba(255, 255, 255, 0.22); } .contrast-toggle { cursor: pointer; min-height: var(--utility-h); height: var(--utility-h); border-radius: 999px; } .contrast-switch { position: relative; width: 3.2rem; min-width: 3.2rem; padding: 0; border-radius: 999px; overflow: hidden; text-indent: -9999px; } .contrast-switch::before { content: ""; position: absolute; top: 50%; left: 0; width: 1.16rem; height: 1.16rem; border-radius: 50%; background: rgba(255, 255, 255, 0.95); transform: translate(0.25rem, -50%); transition: transform 180ms ease, background-color 180ms ease; } .contrast-switch[aria-checked="true"]::before { transform: translate(1.72rem, -50%); background: rgba(255, 255, 255, 0.98); } .ymxb-home main.page-shell { margin-top: var(--section-gap); display: grid; gap: var(--section-gap); padding-bottom: 40px; } .section-pane { padding: var(--pane-pad); } .release-panel, .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "copy media"; align-items: center; gap: 28px; } .release-copy { grid-area: copy; display: grid; gap: 0.8rem; justify-items: center; text-align: center; } .release-copy h1 { margin: 0; justify-self: start; width: 100%; text-align: left; font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 0.95; letter-spacing: -0.01em; } .release-copy .subtitle { margin: 0; max-width: 46ch; color: var(--ymxb-text-muted); font-size: 1.16rem; line-height: 1.62; } .release-copy .status { margin: 0; width: fit-content; color: var(--ymxb-accent-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.96rem; } .hero-bubbles { --hero-bubble-gap: clamp(8px, 2.4vw, 18px); --hero-bubble-inset: 0px; /* Keep three bubbles on one row by shrinking the circles instead of wrapping them. */ --hero-bubble-size: min( clamp(170px, 15vw, 230px), calc((100% - (var(--hero-bubble-gap) * 2)) / 3) ); margin-top: 0.35rem; display: flex; flex-wrap: nowrap; width: 100%; justify-content: space-between; gap: var(--hero-bubble-gap); align-items: center; padding-inline: var(--hero-bubble-inset); } .bubble-tag { inline-size: var(--hero-bubble-size); aspect-ratio: 1 / 1; flex: 0 0 var(--hero-bubble-size); display: grid; place-items: center; padding: 10px; border-radius: 50%; position: relative; overflow: hidden; border: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)), var(--ymxb-pane-scrim); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.14) inset; -webkit-backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); color: var(--ymxb-text-primary); font-size: clamp(0.86rem, 1.25vw, 1.08rem); font-weight: 700; transition: transform 160ms ease, box-shadow 160ms ease; will-change: transform; } .bubble-tag::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ymxb-pane-sheen); pointer-events: none; } .bubble-tag__text { display: grid; gap: 0.18rem; justify-items: center; text-align: center; max-inline-size: 10ch; overflow-wrap: anywhere; } .bubble-tag__line { line-height: 1.05; } .bubble-tag:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.14) inset; } .release-copy-list { margin: 0.1rem 0 0; padding-left: 1rem; color: var(--ymxb-text-muted); display: grid; gap: 0.25rem; } .release-media { grid-area: media; justify-self: stretch; margin-left: 0; min-width: 0; display: flex; align-items: stretch; } .release-video-crop { width: 100%; min-height: clamp(250px, 36vw, 360px); aspect-ratio: auto; border: 0; background: transparent; border-radius: 0; padding: clamp(18px, 6.25vw, 50px); display: flex; align-items: center; justify-content: center; overflow: visible; } .release-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; border-radius: 0.44rem; } .release-logo { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .release-hoodies-row, .hero-thumbs { grid-area: strip; width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .release-hoodie-tile { margin: 0; max-width: 150px; width: 100%; justify-self: center; border: var(--ymxb-field-border); border-radius: 0.56rem; background: var(--ymxb-field-bg); padding: 0.3rem 0.38rem; display: flex; align-items: flex-end; justify-content: center; } .release-hoodie-tile img { display: block; width: 100%; height: clamp(88px, 11vw, 132px); object-fit: contain; object-position: center bottom; } .section-heading { margin: 0; font-family: var(--ymxb-font-display); font-size: clamp(2.05rem, 3.8vw, 3.25rem); font-weight: 800; line-height: 1.05; display: block; width: 100%; text-align: center; } .pane-surface .section-heading::before, .pane-surface .tier-title::before, .pane-surface .faq-question::before { content: none; } .pane-surface .section-heading, .pane-surface .faq-question { color: var(--ymxb-text-primary); } .section-heading { color: var(--ymxb-accent); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .section-heading { background: var(--ymxb-accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } } .section-copy { margin: 0.5rem 0 0; color: var(--ymxb-text-muted); line-height: 1.62; font-size: 1.12rem; } #prototypes { text-align: center; } #prototypes .section-copy, #prototypes .refinement-note { text-align: center; margin-inline: auto; } .detail-chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .detail-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16); -webkit-backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); backdrop-filter: blur(var(--ymxb-glass-blur)) saturate(var(--ymxb-glass-sat)); color: var(--ymxb-text-primary); font-size: 1rem; font-weight: 600; line-height: 1.1; } .story-pane .section-copy { max-width: 72ch; } .story-pane .section-copy + .section-copy { margin-top: 0.75rem; } .prototype-grid, .details-prototype-grid { margin-top: 0.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .prototype-grid figure { margin: 0; border: var(--ymxb-field-border); background: var(--ymxb-field-bg); border-radius: 0.56rem; padding: 0.45rem; text-align: center; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16); } .prototype-grid img { width: 100%; height: clamp(100px, 11vw, 145px); object-fit: contain; object-position: center; display: block; } .tier-grid, .details-tier-grid { margin-top: 0.85rem; display: grid; gap: clamp(8px, 2vw, 12px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .tier-card { border: var(--ymxb-field-border); border-radius: 0.62rem; background: var(--ymxb-field-bg); padding: 0.75rem; display: grid; gap: 0.38rem; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); } .tier-title { margin: 0; font-family: var(--ymxb-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: clamp(0.04em, 0.25vw, 0.08em); color: var(--ymxb-text-primary); overflow-wrap: anywhere; word-break: break-word; } .tier-price { font-weight: 800; letter-spacing: 0.03em; } .tier-copy { margin: 0; color: var(--ymxb-text-muted); line-height: 1.42; font-size: 1.06rem; } .tier-card--support { appearance: none; -webkit-appearance: none; text-align: center; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; justify-items: center; border: var(--ymxb-pane-border); background: var(--ymxb-pane-fill), var(--ymxb-pane-scrim); box-shadow: var(--ymxb-pane-shadow); padding: clamp(0.72rem, 2.2vw, 1rem); gap: 0.65rem; transition: transform 160ms ease, box-shadow 160ms ease; overflow-wrap: anywhere; word-break: break-word; } .tier-card--support::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ymxb-pane-sheen); pointer-events: none; } .tier-card--support::after { content: ""; position: absolute; inset: -18%; border-radius: inherit; background: linear-gradient( 112deg, transparent 30%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 58%, transparent 70% ); transform: translate3d(-135%, 0, 0) rotate(8deg); opacity: 0; pointer-events: none; z-index: 0; } .tier-card--support > * { position: relative; z-index: 1; } .tier-card--support:hover { transform: translateY(-1px); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.14) inset; } .tier-card--support:hover::after, .tier-card--support:focus-visible::after { opacity: 1; animation: ymxb-tier-shimmer 1230ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .tier-card--support:focus-visible { outline: none; box-shadow: var(--ymxb-ring), var(--ymxb-pane-shadow); } @keyframes ymxb-tier-shimmer { 0% { transform: translate3d(-135%, 0, 0) rotate(8deg); } 100% { transform: translate3d(135%, 0, 0) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .tier-card--support:hover::after, .tier-card--support:focus-visible::after { animation: none; opacity: 0.34; transform: translate3d(0, 0, 0) rotate(8deg); } } .tier-divider { height: 1px; width: calc(100% - 1.4rem); margin-inline: auto; background: rgba(255, 255, 255, 0.22); opacity: 0.72; } .tier-includes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.42rem; width: min(32ch, 100%); margin-inline: auto; justify-items: start; text-align: left; color: var(--ymxb-text-muted); font-size: 1.04rem; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; } .tier-includes li { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 0.6rem; } .tier-includes li::before { content: ""; width: 9px; height: 9px; margin-top: 0.55em; border-radius: 50%; background: transparent; border: 2px solid rgba(255, 255, 255, 0.52); opacity: 0.85; } .support-layout, .support-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) 380px; gap: 18px; align-items: start; } .support-form { display: grid; gap: 0.6rem; } .form-grid, .support-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--field-gap-x); row-gap: var(--field-gap-y); } .form-field { display: grid; gap: 0.33rem; } .form-field--full { grid-column: 1 / -1; } .full-row { grid-column: 1 / -1; } .form-field label { font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ymxb-text-muted); font-weight: 600; } .form-field input, .form-field select, .form-field textarea { appearance: none; border: var(--ymxb-field-border); background: var(--ymxb-field-bg); color: var(--ymxb-text-primary); border-radius: 0.55rem; min-height: var(--control-h); padding: 0.55rem 0.65rem; font: inherit; } .form-field textarea { min-height: 5.2rem; resize: vertical; } .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible, .submit-button:focus-visible, .contrast-toggle:focus-visible, .menu-link:focus-visible, .utility-link:focus-visible, .nav-mark-link:focus-visible, .menu-home-link:focus-visible { outline: none; box-shadow: var(--ymxb-ring); } .checkbox-field { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 1.02rem; color: var(--ymxb-text-muted); } .checkbox-field input { margin-top: 0.15rem; } .refinement-note { margin: 0; color: var(--ymxb-text-muted); font-size: 0.84rem; margin-top: 5px; /* margin-top: 5px added for organic spacing above text */ } .support-copy { margin-top: 0.65rem; text-align: center; max-width: 72ch; margin-inline: auto; } .support-meta { margin: 0.8rem 0 0; color: var(--ymxb-text-muted); font-size: 1.08rem; line-height: 1.58; text-align: center; } .support-meta--prompt { margin: 1rem 0 0.85rem; } .support-actions { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .support-primary { border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)); } .support-secondary { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.1); } .support-perks { margin-top: 1.4rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1.1rem; box-shadow: 0 22px 56px rgba(0, 0, 0, 0.18); } .perk-lead { margin: 1.05rem 0 0; font-weight: 700; text-align: center; font-size: 1.12rem; color: var(--ymxb-accent-2); } .perk-note { margin: 0.5rem 0 0; color: var(--ymxb-text-muted); text-align: center; line-height: 1.55; font-size: 1.04rem; } .submit-button { border: var(--ymxb-field-border); background: rgba(255, 255, 255, 0.18); color: var(--ymxb-text-primary); border-radius: 0.62rem; min-height: var(--control-h); padding: 0 1.1rem; font-family: var(--ymxb-font-body); font-size: 0.96rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; cursor: pointer; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16); } .submit-button:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.22); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.2); } .submit-button:active { transform: translateY(0); } .input, .select, .button { min-height: var(--control-h); } .submit-button[disabled] { cursor: wait; opacity: 0.75; } .form-feedback { min-height: 1.25rem; margin: 0; font-size: 0.88rem; } .form-feedback.is-error { color: rgba(255, 255, 255, 0.9); } .form-feedback.is-success { color: rgba(255, 255, 255, 0.9); } .order-summary, .order-summary-card { border: var(--ymxb-field-border); background: var(--ymxb-field-bg); border-radius: 0.7rem; padding: 0.9rem; display: grid; gap: 0.62rem; align-content: start; align-self: start; height: fit-content; position: sticky; top: calc(var(--header-stack-offset, 0px) + 16px); } .order-summary h3 { margin: 0; font-size: 1.05rem; } .summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.92rem; } .summary-row.total { padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.26); font-size: 1rem; font-weight: 700; } .summary-note { margin: 0; color: var(--ymxb-text-muted); font-size: 0.82rem; } .faq-list { margin-top: 0.85rem; display: grid; gap: 10px; } .faq-item { border: var(--ymxb-field-border); border-radius: 0.58rem; background: var(--ymxb-field-bg); min-height: 60px; padding: 14px 18px; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16); } .faq-item summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none; font-family: var(--ymxb-font-display); font-weight: 700; font-size: 1.12rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-answer { margin: 0.45rem 0 0; color: var(--ymxb-text-muted); line-height: 1.5; font-size: 1.06rem; } .site-footer { width: calc(100% - (var(--gutter) * 2)); max-width: calc(var(--page-max) - (var(--gutter) * 2)); margin: var(--section-gap) auto 0; padding: var(--pane-pad); } .footer-grid, .footer-inner { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .site-footer .footer-inner { width: 100% !important; margin: 0 !important; padding: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 16px !important; } .footer-links a, .footer-links span { color: var(--ymxb-text-muted); } @media (min-width: 1680px) { :root { --section-gap: 40px; --pane-pad: 38px; --control-h: 56px; --field-gap-x: 14px; --field-gap-y: 12px; } .floating-brand { margin-top: 1rem; gap: 0.14rem; } .ymxb-header-shell { margin-top: 3.4rem; gap: 10px; } .nav-row { min-height: 60px; gap: clamp(8px, 0.9vw, 14px); padding: 8px 12px; } .menu-link { min-height: clamp(2.45rem, 3.2vw, var(--control-h)); font-size: clamp(0.7rem, 0.76vw, 0.86rem); padding-inline: clamp(0.68rem, 0.9vw, 1.08rem); } .header-title { font-size: clamp(2.9rem, 7vw, 6.8rem); } .header-subtitle { font-size: clamp(1.3rem, 1.6vw, 2.05rem); } .release-panel, .hero-grid { gap: 26px; } .release-copy { gap: 0.6rem; } .release-copy h1 { font-size: clamp(3.1rem, 4.1vw, 4.9rem); } .release-copy .status { font-size: 1.08rem; } .release-copy .subtitle, .section-copy, .faq-answer { font-size: 1.22rem; line-height: 1.65; } .release-copy-list { gap: 0.38rem; font-size: 1.01rem; } .section-heading { font-size: clamp(2.35rem, 3.1vw, 3.8rem); } .tier-grid, .details-tier-grid { margin-top: 1.05rem; gap: 14px; } .prototype-grid, .details-prototype-grid { margin-top: 14px; gap: 14px; } .tier-card { padding: 0.92rem; gap: 0.45rem; } .tier-title { font-size: 1.35rem; } .tier-copy { font-size: 1.16rem; line-height: 1.55; } .support-layout, .support-grid { gap: 22px; } .faq-list { margin-top: 1rem; gap: 12px; } .faq-item { padding: 16px 20px; } } @media (max-width: 1199px) { :root { --gutter: 28px; --pane-pad: 24px; --section-gap: 28px; } .support-layout, .support-grid { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 899px) { :root { --gutter: 16px; --pane-pad: 16px; --pane-radius: 16px; } .release-panel, .hero-grid { grid-template-columns: 1fr; } .release-panel, .hero-grid { grid-template-areas: "copy" "media"; } /* iPad-ish widths: tighten the hero stack without changing type scale. */ .release-panel, .hero-grid { gap: 20px; } .release-copy { gap: 0.7rem; } .hero-bubbles { /* Pull the bubble row inward a bit on iPad-ish widths. */ --hero-bubble-inset: clamp(8px, 2.8vw, 20px); } .order-summary, .order-summary-card { position: static; } } @media (max-width: 430px) { .corner-control { top: calc(env(safe-area-inset-top, 0px) + 5px); } .corner-control-left { left: calc(env(safe-area-inset-left, 0px) + 2px); } .corner-control-right { right: calc(env(safe-area-inset-right, 0px) + 2px); } .release-video-crop { min-height: 190px; } } body.modal-open { overflow: hidden; } .support-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gutter) 20px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .support-modal.is-open { opacity: 1; pointer-events: auto; } .support-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 7, 12, 0.42); } .support-modal-panel { position: relative; width: min(720px, 100%); max-height: min(82vh, 820px); overflow: auto; transform: translateY(12px) scale(0.99); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; } .support-modal.is-open .support-modal-panel { transform: translateY(0) scale(1); opacity: 1; } .support-modal-close { position: absolute; top: 14px; right: 14px; width: auto; min-height: 40px; height: 40px; padding-inline: 0.9rem; } .support-modal-header { padding-top: 16px; text-align: center; } .support-modal-header .section-copy { max-width: 54ch; margin-inline: auto; } .support-modal-form { margin-top: 1.2rem; display: grid; gap: 0.75rem; } .modal-form-grid { grid-template-columns: 1fr; } .support-modal-actions { display: flex; justify-content: center; gap: 12px; margin-top: 1rem; } .support-modal-actions-split { justify-content: space-between; } .support-modal-footnote { margin-top: 0.85rem; text-align: center; } .modal-success-title { font-weight: 800; text-align: center; } @media (max-width: 699px) { .support-modal { padding-inline: 16px; } .support-modal-actions-split { justify-content: center; flex-wrap: wrap; } .support-modal-close { top: 10px; right: 10px; } }