/* Approved Home chrome 2026-09-23 installpop2. Presentation overlay only. */ html body.page-home{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} /* Retired persistent install bars; also neutralize stale cached banner markup. */ html body #ma-install-chip,html body #chrome-install-card,html body.page-home #install-bubble{display:none!important;} /* Small optional, per-opening browser-only app invitation. No page reflow. */ html body.page-home #ma-install-offer{ position:fixed;right:18px;bottom:18px;z-index:220; width:min(376px,calc(100vw - 24px));max-height:min(88dvh,470px);overflow-y:auto; box-sizing:border-box;padding:14px;border-radius:20px; border:1px solid rgba(246,211,111,.76); background:linear-gradient(145deg,#281935 0%,#160f22 100%); box-shadow:0 18px 44px rgba(0,0,0,.53),inset 0 1px rgba(255,255,255,.12); color:#fff;font:500 13px/1.45 Outfit,Inter,system-ui,sans-serif; } #ma-install-offer .ma-offer-head{display:flex;align-items:flex-start;gap:10px;padding-right:28px;} #ma-install-offer .ma-offer-head img{width:40px;height:40px;border-radius:12px;object-fit:cover;flex-shrink:0;} #ma-install-offer .ma-offer-title{display:block;margin:0 0 4px;font-size:16px;line-height:1.25;font-weight:850;color:#ffe6a3;} #ma-install-offer .ma-offer-description{margin:0;color:#e2d9ec;font-size:12.5px;line-height:1.42;} #ma-install-offer .ma-offer-close{position:absolute;right:8px;top:7px;display:grid;place-items:center;min-width:42px;min-height:42px;padding:0;border:0;border-radius:50%;background:transparent;color:#dfd1e9;font-size:23px;cursor:pointer;} #ma-install-offer .ma-offer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px;} #ma-install-offer .ma-offer-actions>*,#ma-install-offer .ma-offer-never{box-sizing:border-box;cursor:pointer;min-height:44px;border-radius:11px;font:800 12px/1.24 Outfit,Inter,system-ui,sans-serif;text-align:center;} #ma-install-offer .ma-offer-browser{border:1px solid #ffdf89;background:linear-gradient(135deg,#ffe195,#d5ab49);color:#251528;padding:9px;} #ma-install-offer .ma-offer-play{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,227,151,.74);background:rgba(255,255,255,.075);color:#ffe9b6;text-decoration:none;padding:9px;} #ma-install-offer .ma-offer-play[hidden]{display:none!important;} #ma-install-offer .ma-offer-play[disabled]{opacity:.65;cursor:not-allowed;background:rgba(255,255,255,.035);border-color:rgba(255,227,151,.35);color:#bdb3ca;} #ma-install-offer .ma-offer-actions:has(.ma-offer-play[hidden]){grid-template-columns:1fr;} #ma-install-offer .ma-offer-never{display:block;min-height:42px;margin:7px auto 0;padding:9px 8px;color:#cabbd5;border:0;background:transparent;font-weight:700;text-decoration:underline;text-underline-offset:3px;} #ma-install-offer :is(button,a):focus-visible{outline:2px solid #fce6a1;outline-offset:3px;} html.ma-native-shell body #ma-install-offer,html.matchapp-android body #ma-install-offer{display:none!important;} @media(max-width:1100px){html body.page-home #ma-install-offer{bottom:calc(78px + env(safe-area-inset-bottom,0px));left:50%;right:auto;transform:translateX(-50%);}} @media(max-width:420px){html body.page-home #ma-install-offer{padding:12px;width:calc(100vw - 20px);}#ma-install-offer .ma-offer-actions{gap:6px;}} @media(prefers-reduced-motion:reduce){html body.page-home #ma-install-offer{scroll-behavior:auto;}} html body.page-home .home-hero .ma-how-link{margin-top:8px} html body.page-home .ma-brand-orb, html body.page-home .header-brand-area img:not(.matchapp-wordmark){ border-radius:50%!important;object-fit:cover!important;clip-path:circle(49.5% at 50% 50%) } /* 2026-09-24 continuous perimeter polish. Visual-only correction for the dark-bottom edge created by the shared ma-depth layer. These rules stay inside that same layer so its !important lighting declarations cannot hide the lower perimeter on dark screens. */ @layer ma-depth { html body.page-home #mh-topbox.app-header{ border-color:rgba(229,193,88,.62)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.30), var(--d3-hi),var(--d3-lo),var(--d3-raise-2)!important; } html body.page-home #awareness-spotlight .awareness-card{ border-color:color-mix(in srgb,var(--awareness) 76%,#fff 16%)!important; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--awareness) 58%,#fff 10%), var(--d3-hi),var(--d3-lo),var(--d3-raise-2)!important; } html body.page-home :is(#daily-match-checkin.dc,.daily-checkin.dc){ border-color:rgba(243,207,105,.72)!important; box-shadow: inset 0 0 0 1px rgba(243,207,105,.34), var(--d3-hi),var(--d3-lo),var(--d3-raise-2)!important; } html body.page-home #awareness-spotlight .awareness-cta{ border-color:rgba(255,255,255,.38)!important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), var(--d3-hi),var(--d3-lo),var(--d3-raise-1)!important; } } /* These two surfaces are not ma-depth participants, but receive the same finished 360-degree inner edge so the mobile stack reads as one polished UI. */ html body.page-home .matchapp-growth-disclosure{ border-color:rgba(229,193,88,.42)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.18), 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045)!important; } /* 2026-09-24 phone/tablet perimeter coherence. Presentation only. Extends the finished 360-degree perimeter used by the Home header/check-in/awareness cards to the remaining adult Home surfaces. Web scope stops at 1100px so the independently handled desktop treatment is untouched. Android WebViews also receive this at any logical width through the existing html.matchapp-android shell class. No ad surfaces are included. */ @media (max-width:1100px){ @layer ma-depth{ html body.page-home :is( .premium-card, .marquee-wrapper, .ma-concierge, .global-events-fold ){ border-color:rgba(229,193,88,.46)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.18), var(--d3-hi),var(--d3-lo),var(--d3-raise-2)!important; } html body.page-home .tg-entry{ border-color:rgba(229,193,88,.46)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.18), var(--d3-hi),var(--d3-lo),var(--d3-raise-1)!important; } } html body.page-home :is( .lazy-head, #premiere-disclosure>summary, #weekly-pick-disclosure>summary, #latest-news>summary, #global-events .global-events-summary, .ma-news, #swifties-spotify, .live-strip, .info-panel ){ border-color:rgba(229,193,88,.38)!important; } } /* Native Android shell parity. The normal Android Studio app renders the same production Home in a WebView and injects matchapp-android on . */ @layer ma-depth{ html.matchapp-android body.page-home :is( .premium-card, .marquee-wrapper, .ma-concierge, .global-events-fold ){ border-color:rgba(229,193,88,.46)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.18), var(--d3-hi),var(--d3-lo),var(--d3-raise-2)!important; } html.matchapp-android body.page-home .tg-entry{ border-color:rgba(229,193,88,.46)!important; box-shadow: inset 0 0 0 1px rgba(229,193,88,.18), var(--d3-hi),var(--d3-lo),var(--d3-raise-1)!important; } } html.matchapp-android body.page-home :is( .lazy-head, #premiere-disclosure>summary, #weekly-pick-disclosure>summary, #latest-news>summary, #global-events .global-events-summary, .ma-news, #swifties-spotify, .live-strip, .info-panel ){ border-color:rgba(229,193,88,.38)!important; } /* 2026-09-24 premium How it works CTA. Visual-only recreation of the approved gold/violet glass pill. The existing onboarding click handler and text stay untouched. Shared Home CSS means the same treatment reaches desktop, phones, tablets and the Android WebView. */ html body.page-home :is(.ma-how-link,.ma-how-button){ --ma-how-gold:#f6d36f; --ma-how-gold-soft:#fff0bd; --ma-how-violet:#a54cff; position:relative!important; isolation:isolate!important; overflow:hidden!important; appearance:none!important; -webkit-appearance:none!important; min-height:52px!important; padding:0 26px!important; border:1px solid transparent!important; border-radius:999px!important; background: linear-gradient(145deg,rgba(74,49,102,.78) 0%,rgba(39,20,67,.90) 48%,rgba(24,10,49,.96) 100%) padding-box, linear-gradient(105deg,#ffe79a 0%,#e7b84c 28%,#f6c96d 46%,#9f55ff 78%,#d678ff 100%) border-box!important; color:#fff3d3!important; font:800 clamp(14px,1.5vw,18px)/1 Outfit,Inter,system-ui,sans-serif!important; letter-spacing:.01em!important; text-shadow:0 1px 1px rgba(31,12,36,.55),0 0 16px rgba(255,235,176,.12)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -12px 28px rgba(25,7,48,.34), 0 10px 28px rgba(0,0,0,.30), -4px 0 18px rgba(235,185,69,.22), 4px 0 22px rgba(166,77,255,.24)!important; cursor:pointer!important; transform:translateZ(0)!important; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important; } html body.page-home :is(.ma-how-link,.ma-how-button)::before{ content:""!important; position:absolute!important; z-index:-1!important; pointer-events:none!important; left:5%!important;right:5%!important;top:4px!important; height:48%!important; border-radius:999px!important; background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.07) 55%,transparent)!important; filter:blur(.1px)!important; } html body.page-home :is(.ma-how-link,.ma-how-button)::after{ content:""!important; position:absolute!important; z-index:-2!important; pointer-events:none!important; inset:-10px!important; border-radius:999px!important; background: radial-gradient(circle at 18% 50%,rgba(246,211,111,.28),transparent 38%), radial-gradient(circle at 84% 50%,rgba(165,76,255,.30),transparent 42%)!important; filter:blur(14px)!important; opacity:.82!important; } @media(hover:hover){ html body.page-home :is(.ma-how-link,.ma-how-button):hover{ transform:translateY(-2px) scale(1.025)!important; filter:saturate(1.08) brightness(1.05)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -12px 30px rgba(25,7,48,.30), 0 14px 34px rgba(0,0,0,.34), -5px 0 24px rgba(235,185,69,.34), 5px 0 30px rgba(166,77,255,.36)!important; } } html body.page-home :is(.ma-how-link,.ma-how-button):active{ transform:translateY(0) scale(.985)!important; } html body.page-home :is(.ma-how-link,.ma-how-button):focus-visible{ outline:2px solid #fff0bd!important; outline-offset:4px!important; box-shadow: 0 0 0 5px rgba(165,76,255,.18), 0 12px 32px rgba(0,0,0,.32), -4px 0 20px rgba(235,185,69,.30), 4px 0 24px rgba(166,77,255,.30)!important; } @media(max-width:700px){ html body.page-home :is(.ma-how-link,.ma-how-button){ min-height:44px!important; padding:0 18px!important; font-size:13.5px!important; } } @media(prefers-reduced-motion:reduce){ html body.page-home :is(.ma-how-link,.ma-how-button){ transition:none!important; } } html.reduce-motion body.page-home :is(.ma-how-link,.ma-how-button){ transition:none!important; } /* 2026-09-24 desktop video-scan repairs. Desktop-only presentation fixes observed in the supplied production recording. No matching/AI/auth/AdSense markup, slot sizing or ad initialization is changed. */ @media (min-width:1180px) and (hover:hover) and (pointer:fine){ /* The two locked AdSense rails appear before the center container in DOM order. Explicitly keep the product column in the same first grid row so the rail height can never create a 600px blank gap before Home content. */ html body.page-home main.page-wrapper>.main-layout>.container{ grid-column:2!important; grid-row:1!important; align-self:start!important; } /* Desktop disclosures were drawing a narrow 720px control inside a wider 980px shell, producing unfinished empty wings/double boxes. Make each control own the full module width. */ html body.page-home :is( #latest-news>summary, #premiere-disclosure>summary, #weekly-pick-disclosure>summary, #global-events>.global-events-fold>.global-events-summary, #swifties-spotify .swifties-fold ){ width:100%!important; max-width:none!important; margin-left:0!important; margin-right:0!important; } /* Closed native disclosures are one finished bar, not a bar floating inside another empty outlined rectangle. */ html body.page-home #latest-news:not([open]), html body.page-home #global-events>.global-events-fold:not([open]){ border-color:transparent!important; background:transparent!important; box-shadow:none!important; } /* When open, the parent becomes the card and its header becomes the top edge of that same card, eliminating the doubled outline. */ html body.page-home #latest-news[open]>summary, html body.page-home #global-events>.global-events-fold[open]>.global-events-summary{ border:0!important; border-bottom:1px solid rgba(232,186,64,.20)!important; border-radius:22px 22px 0 0!important; box-shadow:none!important; } /* The Spotify section follows the same single-shell language. */ html body.page-home #swifties-spotify:has(.swifties-fold[aria-expanded="false"]){ border-color:transparent!important; background:transparent!important; box-shadow:none!important; } html body.page-home #swifties-spotify .swifties-fold[aria-expanded="true"]{ border:0!important; border-bottom:1px solid rgba(29,185,84,.24)!important; border-radius:22px 22px 0 0!important; box-shadow:none!important; } /* Spotify's desktop embeds were stacked as 830px canvases whose actual player UI occupied only the left third. Two balanced columns remove the huge dead area while preserving both official embeds and all links. */ html body.page-home #swifties-spotify-body:not([hidden]){ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px 16px!important; align-items:start!important; padding:14px 16px 16px!important; } html body.page-home #swifties-spotify-body:not([hidden])> :not(.swifties-player-block){ grid-column:1 / -1!important; } html body.page-home #swifties-spotify .swifties-player-block{ width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; } html body.page-home #swifties-spotify .swifties-embed{ display:block!important; width:100%!important; max-width:none!important; height:352px!important; } /* Reserve the poster's final footprint before remote/fallback artwork loads. This removes the large result-page jump visible in the recording while keeping every poster fully contained and uncropped. */ html body.page-home #result-box .poster-stage{ width:min(38vw,380px)!important; max-width:380px!important; aspect-ratio:2 / 3!important; min-height:0!important; margin-inline:auto!important; } html body.page-home #result-box #res-poster-img{ width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center!important; } } /* 2026-09-24 Awareness width alignment. Desktop-only, design-only: make Awareness Spotlight exactly the same horizontal length as the existing Always growing and Daily Check-in cards. Their dimensions and all product behavior remain untouched. */ @media (min-width:1000px){ html body.page-home #awareness-spotlight{ width:min(1180px,calc(100% - 28px))!important; max-width:1180px!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; } } /* 2026-09-26 compact adult Home hero: retain original actions, focus and tour. CSS-only spacing change shared by desktop, browser and adult Android WebView. */ html body.page-home .home-hero{ padding:0 8px 2px!important; margin-top:0!important; margin-bottom:5px!important; } html body.page-home .home-hero .home-h1{ font-size:clamp(22px,2.65vw,36px)!important; line-height:1.12!important; letter-spacing:-.02em!important; margin:0 0 3px!important; } html body.page-home .home-hero .home-h1-sub{ max-width:600px!important; font-size:clamp(12px,1.25vw,14px)!important; line-height:1.34!important; margin:0 auto 3px!important; } html body.page-home .home-hero .ma-how-link{ box-sizing:border-box!important; min-height:44px!important; padding:0 19px!important; margin:4px auto 0!important; font-size:clamp(13px,1.3vw,15px)!important; line-height:1.2!important; } @media(max-width:600px){ html body.page-home .home-hero{padding:0 6px 2px!important} html body.page-home .home-hero .home-h1{font-size:clamp(21px,5.7vw,29px)!important} html body.page-home .home-hero .home-h1-sub{font-size:12px!important;line-height:1.32!important} html body.page-home .home-hero .ma-how-link{ min-height:44px!important;padding:0 17px!important;margin-top:4px!important; font-size:13.5px!important; } } /* The spoken page title remains available to assistive technology; the visible hero headline and CTA row are retired. */ html body.page-home .home-hero{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* 2026-10-01 owner-requested adult top-box tone. Presentation only: retain every control, dimension, border, animation hook, layout rule and mechanism; reduce the purple wash into a mature ink/plum fill that sits naturally against the rest of the adult MatchApp page. */ html body.page-home #mh-topbox.app-header.ma-home-header{ background-color:#100c14!important; background: linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%), radial-gradient(520px 150px at 12% 18%,rgba(113,77,135,.105),transparent 72%), radial-gradient(420px 140px at 88% 85%,rgba(72,49,92,.075),transparent 74%), linear-gradient(122deg,rgba(21,15,26,.985),rgba(10,8,13,.992) 58%,rgba(17,12,22,.988))!important; }