/* Sony BRAVIA Remote TV Control — landing page One stylesheet, both directions. Every box offset uses logical properties, so dir="rtl" on mirrors the layout without a second sheet. */ :root { --grad-top: #2B0B3A; --grad-mid: #7A1140; --grad-bot: #B3123C; --ink: #0E0A12; --surface: #1C1C1E; --surface-2: #232326; --edge: rgba(255, 255, 255, .08); --blue: #0A84FF; --blue-hover: #3D9DFF; --blue-on-dark: #7CC0FF; --power: #FF3B30; --fg: #fff; --fg-2: rgba(255, 255, 255, .78); --fg-3: rgba(255, 255, 255, .56); --fg-4: rgba(255, 255, 255, .38); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px; --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-pill: 999px; --t-cap: 13px; --t-sm: 15px; --t-body: 17px; --t-lead: 19px; --t-h4: 21px; --t-h3: 26px; --t-h2: clamp(27px, 3.8vw, 36px); --t-h1: clamp(34px, 6.8vw, 58px); --lh-body: 1.65; --measure: 66ch; --shadow: 0 18px 48px rgba(0, 0, 0, .45); --rail: 1080px; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--fg); font-size: var(--t-body); line-height: var(--lh-body); text-wrap: pretty; font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Sans Arabic", "Noto Nastaliq Urdu", "Noto Sans Devanagari", "Noto Sans Thai", "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; line-height: 1.18; letter-spacing: -.02em; font-weight: 800; } /* Section titles sit on the type ramp; .eyebrow (a class) overrides this for the uppercase caption-sized headings in "Works with" and the footer. */ h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h4); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); text-decoration: underline; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--blue-on-dark); outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(10, 132, 255, .35); } /* ---------- per-script line-height overrides ---------- */ :lang(th) { line-height: 1.9; } :lang(hi) { line-height: 1.8; } :lang(ar) { line-height: 1.85; } :lang(ur) { font-family: "Noto Nastaliq Urdu", serif; line-height: 2.5; } :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(ko) { line-height: 1.75; letter-spacing: 0; } /* Nastaliq's deep descenders overflow tight boxes; give the interactive rows room. */ :lang(ur) .faq-trigger, :lang(ur) .step-title { line-height: 2; } /* The endonym lists carry a per-link lang attribute, so the script overrides above apply per row and knock the grid out of alignment. Pin one line-height for the lists — still roomy enough that Nastaliq descenders are not clipped. */ .footer-langs a, .lang-menu a { line-height: 1.9; } /* ---------- motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- shared ---------- */ .rail { max-width: var(--rail); margin-inline: auto; } .skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--s4); z-index: 60; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-sm); color: var(--fg); font-size: var(--t-sm); } .skip-link:focus { inset-block-start: var(--s2); text-decoration: none; } .eyebrow { font-size: var(--t-cap); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; } /* ---------- language-suggestion banner ---------- */ .lang-banner { display: none; background: var(--blue); color: #fff; padding: var(--s3) var(--s4); font-size: var(--t-sm); } .lang-banner[data-visible="true"] { display: block; } .lang-banner .rail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); } .lang-banner a { color: #fff; font-weight: 700; text-decoration: underline; } .lang-banner a:hover { color: #fff; } .lang-banner button { margin-inline-start: auto; padding: var(--s1) var(--s3); border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-pill); font-size: var(--t-cap); white-space: nowrap; } .lang-banner :focus-visible { outline-color: #fff; } /* ---------- header ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 40; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(43, 11, 58, .82); border-block-end: 1px solid var(--edge); } .site-header .rail { padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); } .brand { display: flex; align-items: center; gap: var(--s3); color: var(--fg); min-width: 0; } .brand:hover { text-decoration: none; color: var(--fg); } .brand-mark { inline-size: 36px; block-size: 36px; flex: none; border-radius: 9px; overflow: hidden; display: block; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; } .brand-name { font-weight: 700; font-size: var(--t-sm); line-height: 1.2; min-width: 0; } .brand-name span { color: var(--fg-3); font-weight: 500; } .header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); } .lang { position: relative; } .lang-button { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--edge); border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); font-size: var(--t-sm); white-space: nowrap; } .lang-button::before { content: ""; inline-size: 15px; block-size: 15px; flex: none; border: 1.5px solid var(--fg-2); border-radius: 50%; } .lang-menu { display: none; position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 10px); inline-size: min(80vw, 320px); max-block-size: 56vh; overflow: auto; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s2); grid-template-columns: 1fr 1fr; gap: 2px; } .lang-menu[data-open="true"] { display: grid; } .lang-menu a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--fg-2); font-size: var(--t-sm); } .lang-menu a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; } .lang-menu a[aria-current="true"] { background: var(--surface-2); color: var(--fg); } .cta-pill { padding: var(--s3) var(--s4); border-radius: var(--r-pill); background: var(--blue); color: #fff; font-weight: 700; font-size: var(--t-sm); white-space: nowrap; } .cta-pill:hover { background: var(--blue-hover); color: #fff; text-decoration: none; } /* ---------- hero ---------- */ .hero { background: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 60%, var(--grad-bot) 100%); padding-block: var(--s6) var(--s8); padding-inline: var(--s4); } .hero .rail { display: grid; gap: var(--s7); grid-template-columns: 1fr; align-items: center; } .hero h1 { font-size: var(--t-h1); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; } .hero-sub { font-size: var(--t-lead); color: rgba(255, 255, 255, .9); margin-block-start: var(--s4); max-width: 48ch; } .hero-trust { font-size: var(--t-sm); color: rgba(255, 255, 255, .82); margin-block-start: var(--s4); max-width: 44ch; } /* Apple's official badge. It ships with its own black fill and white keyline, so this link adds no background, border or radius of its own — Apple's identity guidelines forbid altering the artwork. The surrounding margins are the required clear space (at least 1/10th of the badge height, i.e. ~5px at this size). */ .badge { display: inline-block; margin-block-start: var(--s5); line-height: 0; } .badge:hover { text-decoration: none; opacity: .85; } .badge img { inline-size: 180px; block-size: auto; aspect-ratio: 1280 / 380; } .device { justify-self: center; inline-size: min(240px, 62vw); padding: 9px; border-radius: 40px; background: #0B0B0D; border: 1px solid rgba(255, 255, 255, .16); box-shadow: var(--shadow); } .device img { inline-size: 100%; block-size: auto; border-radius: 33px; /* The real screenshot ratio, so the box is reserved exactly and nothing shifts. */ aspect-ratio: 1055 / 2294; } /* ---------- works with ---------- */ .works { padding-block: var(--s6); padding-inline: var(--s4); border-block-end: 1px solid var(--edge); } .works-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-block-start: var(--s3); font-size: var(--t-h3); font-weight: 800; letter-spacing: -.02em; } .works-list .sep { color: var(--fg-4); } .works-note { font-size: var(--t-sm); color: var(--fg-3); margin-block-start: var(--s3); max-width: var(--measure); } /* ---------- how it works ---------- */ .how { padding-block: var(--s8); padding-inline: var(--s4); } .how-deck { color: var(--fg-2); margin-block-start: var(--s3); max-width: var(--measure); } .steps { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-block-start: var(--s6); } .step { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: var(--s5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .step-badge { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--r-pill); background: rgba(10, 132, 255, .16); color: var(--blue-on-dark); font-weight: 800; font-size: var(--t-h4); } /* Step 3 is the only red on the page besides the icon ring. */ .step:last-child .step-badge { background: rgba(255, 59, 48, .18); color: #FF6B62; } .step-title { font-size: var(--t-h4); margin-block-start: var(--s4); } .step-body { color: var(--fg-2); margin-block-start: var(--s2); font-size: var(--t-sm); } /* ---------- faq ---------- */ .faq { padding-block: 0 var(--s8); padding-inline: var(--s4); } .faq-rail { max-width: 820px; margin-inline: auto; } .faq-list { margin-block-start: var(--s5); display: grid; gap: var(--s2); } .faq-item { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); overflow: hidden; } .faq-q { margin: 0; } .faq-trigger { inline-size: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); text-align: start; font-size: var(--t-body); font-weight: 600; line-height: 1.4; } .faq-sign { flex: none; inline-size: 26px; block-size: 26px; border-radius: var(--r-pill); background: var(--surface-2); display: grid; place-items: center; color: var(--fg-2); font-weight: 700; } .faq-sign::before { content: "+"; } .faq-trigger[aria-expanded="true"] .faq-sign::before { content: "−"; } .faq-panel { display: none; padding: 0 var(--s5) var(--s5); color: var(--fg-2); font-size: var(--t-sm); max-width: var(--measure); } .faq-panel[data-open="true"] { display: block; } /* ---------- disclaimer ---------- */ .disclaimer { background: #141018; padding-block: var(--s5); padding-inline: var(--s4); border-block-start: 1px solid var(--edge); } .disclaimer p { font-size: var(--t-sm); color: var(--fg-3); } /* ---------- footer ---------- */ .site-footer { /* Bottom padding clears the mobile sticky bar. */ padding-block: var(--s7) calc(var(--s9) + var(--s5)); padding-inline: var(--s4); } .site-footer .rail { display: grid; gap: var(--s5); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--s5); font-size: var(--t-sm); } .footer-copy { font-size: var(--t-sm); color: var(--fg-3); } .footer-langs { border-block-start: 1px solid var(--edge); padding-block-start: var(--s5); } .footer-langs ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--s1) var(--s5); margin-block-start: var(--s3); font-size: var(--t-sm); } .footer-langs a { color: var(--fg-2); } .footer-langs a[aria-current="true"] { color: var(--fg); font-weight: 600; } /* ---------- mobile sticky cta ---------- */ .sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50; padding: var(--s3) var(--s4); background: rgba(14, 10, 18, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-start: 1px solid var(--edge); } .sticky-cta a { display: block; padding: var(--s4); border-radius: var(--r-pill); background: var(--blue); color: #fff; font-weight: 700; text-align: center; } .sticky-cta a:hover { background: var(--blue-hover); color: #fff; text-decoration: none; } /* ---------- breakpoints ---------- */ /* Below 420px the header cannot hold the wordmark, the language pill and the CTA without the wordmark collapsing to three lines — and a +40% translation makes it worse. Drop the header CTA there: the mobile sticky bar (visible on exactly this range) already carries a full-width App Store button, so nothing is lost. */ @media (max-width: 419px) { .site-header .cta-pill { display: none; } } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } .sticky-cta { display: none; } .site-footer { padding-block: var(--s7); } } @media (min-width: 1024px) { .hero .rail { grid-template-columns: 1.1fr .9fr; } } @media (min-width: 1440px) { .hero { padding-block: var(--s7) var(--s9); } .how { padding-block: var(--s9); } .faq { padding-block: 0 var(--s9); } }