/* GrailSociety public homepage, "By Invitation" (2026-09-23). Unlayered and loaded after app.css: index.html links it in the head; app.html loads it through hpEnsureView() the first time the home view opens. Every selector starts from one of three roots so nothing reaches the dashboard, viewer or other screens: #gg-profile .hp-page>.hpx the page (a container root for its bands) #gg-profile[data-app-view=home]>.gg-top the shared header, only while home shows #gg-profile .gg-dialog:has(.hpx-preview) the simple piece preview Colours come from gs-tokens.css; no --gs-* token is redeclared here. Opal is limited to the logo, the main call-to-action ring and the score card; gold is not used on this page, except the example podium's --gs-metal-* gold, silver and bronze in the standing section. */ /* ---------- Loading gate (reverses homepage.css) ---------- */ #gg-profile .hp-page>.hpx{display:block} #gg-profile .hp-page>.hpx~.hpx-wait{display:none} /* ---------- Page base ---------- */ #gg-profile .hp-page>.hpx{--hpx-gutter:32px;--hpx-head:72px;position:relative;overflow-x:clip;background:var(--gs-surface-page);color:var(--gs-text-primary);font-family:var(--gs-font-text);font-size:var(--gs-type-body);line-height:1.6;-webkit-font-smoothing:antialiased} #gg-profile .hp-page>.hpx *,#gg-profile .hp-page>.hpx *::before,#gg-profile .hp-page>.hpx *::after{box-sizing:border-box} #gg-profile .hp-page>.hpx :where(h1,h2,h3,h4,p,ol,ul,figure,figcaption){margin:0} #gg-profile .hp-page>.hpx :where(ol,ul){padding:0;list-style:none} #gg-profile .hp-page>.hpx :where(h1,h2,h3,h4){font-family:var(--gs-font-display);font-weight:500} #gg-profile .hp-page>.hpx img{display:block;max-width:100%;height:auto} #gg-profile .hp-page>.hpx picture{display:block} #gg-profile .hp-page>.hpx svg{flex:none} #gg-profile .hp-page>.hpx button{font:inherit;color:inherit} #gg-profile .hp-page>.hpx a:not(.gs-btn){color:inherit} #gg-profile .hp-page>.hpx em{font-family:var(--gs-font-serif);font-style:italic;font-weight:400;letter-spacing:-.035em;color:inherit} #gg-profile .hp-page>.hpx .hpx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #gg-profile .hp-page>.hpx .hpx-wrap{width:min(1320px,100% - 2 * var(--hpx-gutter));margin-inline:auto} #gg-profile .hp-page>.hpx .hpx-anchor{display:block;height:0} #gg-profile .hp-page>.hpx :is(section,.hpx-anchor){scroll-margin-top:calc(var(--hpx-head) + var(--gg-safe-top,0px))} #gg-profile .hp-page>.hpx :focus-visible{outline:2px solid var(--gs-focus-ring);outline-offset:2px} #gg-profile .hp-page>.hpx :is(a[href],button,input,summary,[tabindex]:not([tabindex="-1"])){scroll-margin-block:calc(var(--hpx-head) + var(--gg-safe-top,0px) + 8px) 88px} /* The black object bands stay black in both themes; the token contract flips --gs-* under data-theme, and the product's --gg-* aliases are re-pointed so shared components follow. */ #gg-profile .hp-page>.hpx [data-theme=dark]{--gg-bg:var(--gs-surface-page);--gg-panel:var(--gs-surface-raised);--gg-ink:var(--gs-text-primary);--gg-muted:var(--gs-text-secondary);--gg-soft:var(--gs-surface-sunken);--gg-line:var(--gs-border-subtle);--gg-accent:var(--gs-text-link);--gg-primary:var(--gs-action-primary-bg);--gg-primary-hover:var(--gs-action-primary-bg-hover);--gg-on-primary:var(--gs-text-on-action);--gg-primary-line:var(--gs-action-primary-border);background:var(--gs-color-night-900);color:var(--gs-text-primary);color-scheme:dark} #gg-profile .hp-page>.hpx>:is(section,footer){container-type:inline-size;container-name:hpx-band} /* Parallax: homepage-view.js writes --hpx-tx/--hpx-ty; the translate property keeps it independent of every transform used for turning, tilting and reveals. */ #gg-profile .hp-page>.hpx :is([data-hpx-depth],[data-hpx-pointer]){translate:var(--hpx-tx,0px) var(--hpx-ty,0px)} /* Atmospheric light on the black bands */ #gg-profile .hp-page>.hpx .hpx-atmos{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} #gg-profile .hp-page>.hpx .hpx-atmos>span{position:absolute;display:block} #gg-profile .hp-page>.hpx .hpx-atmos-key{left:34%;top:-34%;width:86%;height:120%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gs-color-night-text) 8.5%,transparent),color-mix(in srgb,var(--gs-color-night-text) 2.8%,transparent) 52%,transparent)} #gg-profile .hp-page>.hpx .hpx-atmos-fill{left:-24%;bottom:-46%;width:76%;height:92%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gs-color-line) 4.5%,transparent),transparent)} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-atmos-key{left:5%;top:-20%;width:90%;height:80%} /* After the showcase (the same black), the invitation's light fades in instead of starting at a clipped edge. */ #gg-profile .hp-page>.hpx .hpx-show+.hpx-invitation>.hpx-atmos{-webkit-mask-image:linear-gradient(transparent,black 240px);mask-image:linear-gradient(transparent,black 240px)} /* Shared type */ #gg-profile .hp-page>.hpx .hpx-h2{font:500 clamp(34px,4.2cqi,54px)/1.1 var(--gs-font-display);letter-spacing:-.055em;text-wrap:balance} #gg-profile .hp-page>.hpx .hpx-h2 em{font-size:1.04em;padding-right:.04em} #gg-profile .hp-page>.hpx .hpx-lede{font-size:var(--gs-type-quote);line-height:1.5;color:var(--gs-text-secondary);text-wrap:pretty} #gg-profile .hp-page>.hpx .hpx-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1px solid var(--gs-color-night-stone);border-radius:var(--gs-radius-pill);font:500 12.5px/1 var(--gs-font-text);letter-spacing:.01em;color:var(--gs-text-primary);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-chip--finish{border-color:var(--gs-color-line)} /* ---------- Calls to action ---------- */ #gg-profile .hp-page>.hpx .hpx-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px} #gg-profile .hp-page>.hpx .hpx-ctas .gs-btn{padding-inline:28px} #gg-profile .hp-page>.hpx .hpx-code{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--gs-text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--gs-text-secondary);border-radius:var(--gs-radius-xs);transition:text-decoration-color var(--gs-duration-base) var(--gs-ease-out)} @media (hover:hover){#gg-profile .hp-page>.hpx .hpx-code:hover{text-decoration-color:currentColor}} #gg-profile .hp-page>.hpx .hpx-micro{margin-top:16px;font-size:var(--gs-type-body-s);line-height:1.57;color:var(--gs-text-secondary)} /* The Opal ring: one thin prism edge on the main action, flat, with no glow and no filter. The border goes clear so the ring is the button's visible edge inside .gs-prism-sweep's clip. */ #gg-profile .hp-page>.hpx .hpx-ring{border-color:transparent;background-clip:padding-box} #gg-profile .hp-page>.hpx .hpx-ring::before{content:"";position:absolute;inset:0;z-index:1;padding:3px;border-radius:inherit;background:var(--gs-prism-ring);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);pointer-events:none} /* ---------- Hero, variant H (approved 2026-09-24): the copy on the left, a sample profile in a minimal browser window on the right, and an illustrative wall of posts drifting behind both. The approved mock-up and variant F live in docs/design/2026-09-24-homepage-hero/. The hero stays obsidian in both themes (data-theme=dark on the band). --hpx-SH is the shelf's unit height; homepage-view.js fits it to the row on wide screens. ---------- */ #gg-profile .hp-page>.hpx .hpx-hero{position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(28px,3vw,64px)} #gg-profile .hp-page>.hpx .hpx-hwrap{position:relative;width:100%;max-width:2240px;margin-inline:auto;padding-inline:clamp(24px,4.2cqi,80px)} #gg-profile .hp-page>.hpx .hpx-hgrid{display:grid;grid-template-columns:minmax(410px,1.12fr) minmax(0,2.3fr);column-gap:clamp(40px,4cqi,96px);align-items:center;padding-top:clamp(24px,2.6cqi,56px)} #gg-profile .hp-page>.hpx .hpx-hcopy{position:relative;z-index:3;padding-bottom:40px} #gg-profile .hp-page>.hpx .hpx-h1{font:500 clamp(40px,3.3cqi,84px)/1.02 var(--gs-font-display);letter-spacing:-.045em;text-wrap:balance} #gg-profile .hp-page>.hpx .hpx-h1 em{display:block;font-size:1.04em;line-height:1.02} /* The subline is lighter than the secondary text so it reads on the wall (Will, round 6). */ #gg-profile .hp-page>.hpx :is(.hpx-sub,.hpx-hafter){color:color-mix(in srgb,var(--gs-color-night-text) 62%,var(--gs-color-night-muted));text-wrap:pretty} #gg-profile .hp-page>.hpx .hpx-sub{margin-top:clamp(16px,1.4cqi,26px);max-width:40ch;font-size:clamp(17px,1.2cqi,22px);line-height:1.5} #gg-profile .hp-page>.hpx .hpx-hero .hpx-ctas{margin-top:clamp(22px,2cqi,36px)} #gg-profile .hp-page>.hpx .hpx-hero .hpx-micro{margin-top:14px;font-size:var(--gs-type-body-s)} #gg-profile .hp-page>.hpx .hpx-hafter{display:none} /* The wall: illustrative posts and comments by the four demo collectors. No timestamps and no claims of recent or live activity. Only transform animates; it pauses off screen, while a dialog is open and under reduced motion. data-hpx-wall=still is the low-activity collage. */ #gg-profile .hp-page>.hpx .hpx-wall{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict} #gg-profile .hp-page>.hpx .hpx-wall-cols{position:absolute;top:-40px;bottom:-40px;left:-90px;right:-90px;display:flex;gap:16px;transform:rotate(-3deg);opacity:0;transition:opacity 600ms var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-wall[data-hpx-ready] .hpx-wall-cols{opacity:1} #gg-profile .hp-page>.hpx .hpx-wall-col{flex:none;width:188px;display:flex;flex-direction:column;gap:16px;contain:layout paint;animation:hpx-drift var(--hpx-dur,90s) linear infinite;animation-direction:var(--hpx-dir,normal)} #gg-profile .hp-page>.hpx .hpx-wall[data-hpx-paused] .hpx-wall-col{animation-play-state:paused} @keyframes hpx-drift{to{transform:translateY(-50%)}} #gg-profile .hp-page>.hpx .hpx-tile{flex:none;overflow:hidden;border:1px solid color-mix(in srgb,var(--gs-color-night-700) 80%,var(--gs-color-night-stone));border-radius:var(--gs-radius-md);background:color-mix(in srgb,var(--gs-color-night-800) 85%,var(--gs-color-night-700));font-size:var(--gs-type-meta);line-height:1.35;color:color-mix(in srgb,var(--gs-color-night-muted) 70%,var(--gs-color-night-text))} #gg-profile .hp-page>.hpx .hpx-tile img{display:block} #gg-profile .hp-page>.hpx .hpx-tile b{font-weight:600;color:var(--gs-color-white)} #gg-profile .hp-page>.hpx .hpx-tile-ph{display:grid;place-items:center;padding:14px 18px 8px;background:color-mix(in srgb,var(--gs-color-night-800) 70%,var(--gs-color-night-900))} #gg-profile .hp-page>.hpx .hpx-tile-ph img{width:auto;height:156px} #gg-profile .hp-page>.hpx .hpx-tile-ft{display:flex;align-items:center;gap:7px;padding:8px 10px} #gg-profile .hp-page>.hpx .hpx-tile-av{flex:none;width:20px;height:20px;border-radius:var(--gs-radius-pill);object-fit:cover} #gg-profile .hp-page>.hpx .hpx-tile-q{padding:11px 12px} #gg-profile .hp-page>.hpx .hpx-tile-hd{display:flex;align-items:center;gap:7px;margin-bottom:6px} #gg-profile .hp-page>.hpx .hpx-tile-hd .hpx-tile-av{width:22px;height:22px} #gg-profile .hp-page>.hpx .hpx-tile-q p{font-size:var(--gs-type-caption);line-height:1.4;color:color-mix(in srgb,var(--gs-color-night-text) 94%,var(--gs-color-night-muted))} #gg-profile .hp-page>.hpx .hpx-tile-q small{display:block;margin-top:6px;font-size:11px;color:color-mix(in srgb,var(--gs-color-night-muted) 70%,var(--gs-color-night-stone))} #gg-profile .hp-page>.hpx .hpx-tile-cv{height:56px;background:center/cover no-repeat;opacity:.8} #gg-profile .hp-page>.hpx .hpx-tile-bd{position:relative;margin-top:-16px;padding:0 10px 10px} #gg-profile .hp-page>.hpx .hpx-tile-bd .hpx-tile-av{width:34px;height:34px;outline:3px solid color-mix(in srgb,var(--gs-color-night-800) 85%,var(--gs-color-night-700))} #gg-profile .hp-page>.hpx .hpx-tile-bd p{margin-top:6px} #gg-profile .hp-page>.hpx .hpx-tile-mini{display:flex;gap:6px;margin-top:8px} #gg-profile .hp-page>.hpx .hpx-tile-mini img{width:auto;height:44px} #gg-profile .hp-page>.hpx .hpx-wall-still{position:absolute;top:-40px;bottom:-40px;left:-60px;right:-60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px;align-content:center;opacity:.5;transform:rotate(-4deg)} #gg-profile .hp-page>.hpx .hpx-wall-still img{width:auto;height:190px;margin:auto} /* The shade keeps the copy crisp; the wall stays visible around and through the window. */ #gg-profile .hp-page>.hpx .hpx-wall-shade{position:absolute;inset:0;background:radial-gradient(30% 52% at 17% 50%,color-mix(in srgb,var(--gs-color-night-900) 90%,transparent) 0%,color-mix(in srgb,var(--gs-color-night-900) 72%,transparent) 55%,transparent 100%),linear-gradient(90deg,color-mix(in srgb,var(--gs-color-night-900) 50%,transparent) 0%,color-mix(in srgb,var(--gs-color-night-900) 30%,transparent) 34%,color-mix(in srgb,var(--gs-color-night-900) 22%,transparent) 60%,color-mix(in srgb,var(--gs-color-night-900) 30%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--gs-color-night-900) 30%,transparent) 0%,transparent 20%,transparent 78%,var(--gs-color-night-900) 100%)} /* The sample profile: a minimal browser window of frosted glass with an Opal edge, floating above the wall. The glass lives on ::before and the shadow on ::after, so no 3D piece is ever inside a filtered group. The shelf sits above the Opal edge (z-index 7 over 6), so a magnified piece passes over the border. */ #gg-profile .hp-page>.hpx .hpx-win-wrap{position:relative;z-index:2;min-width:0} #gg-profile .hp-page>.hpx .hpx-win{position:relative;isolation:isolate;container:hpx-card / inline-size;border:1px solid color-mix(in srgb,var(--gs-color-white) 10%,transparent);border-top-color:color-mix(in srgb,var(--gs-color-white) 24%,transparent);border-radius:18px} #gg-profile .hp-page>.hpx .hpx-win::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(180deg,rgb(24 24 28 / .74),rgb(14 14 16 / .8));-webkit-backdrop-filter:blur(28px) saturate(1.25);backdrop-filter:blur(28px) saturate(1.25);pointer-events:none} #gg-profile .hp-page>.hpx .hpx-win::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 2px 4px rgb(0 0 0 / .6),0 18px 34px -6px rgb(2 2 4 / .75),0 60px 120px -20px rgb(2 2 4 / .9),0 0 0 1px rgb(0 0 0 / .5),0 0 200px 70px rgb(6 6 9 / .7)} #gg-profile .hp-page>.hpx .hpx-win>*{position:relative;z-index:1} #gg-profile .hp-page>.hpx .hpx-win>.hpx-win-ring{position:absolute;inset:-1px;z-index:6;display:block;padding:1.5px;border-radius:inherit;background:var(--gs-prism-ring);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);filter:drop-shadow(0 0 6px rgb(150 193 255 / .45)) drop-shadow(0 0 16px rgb(255 185 212 / .22));pointer-events:none} #gg-profile .hp-page>.hpx .hpx-win>.hpx-win-shelf{z-index:7} #gg-profile .hp-page>.hpx .hpx-win-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:clamp(38px,2.6cqi,46px);padding:0 16px;border-bottom:1px solid color-mix(in srgb,var(--gs-color-white) 7%,transparent);border-radius:17px 17px 0 0;background:linear-gradient(180deg,rgb(38 38 43 / .92),rgb(28 28 32 / .92))} #gg-profile .hp-page>.hpx .hpx-win-dots{display:flex;gap:7px} #gg-profile .hp-page>.hpx .hpx-win-dots i{width:10px;height:10px;border-radius:var(--gs-radius-pill);background:color-mix(in srgb,var(--gs-color-night-700) 70%,var(--gs-color-night-stone))} #gg-profile .hp-page>.hpx .hpx-win-url{display:inline-flex;align-items:center;gap:7px;height:clamp(26px,1.8cqi,30px);padding:0 18px 0 12px;border:1px solid color-mix(in srgb,var(--gs-color-white) 5%,transparent);border-radius:var(--gs-radius-pill);background:color-mix(in srgb,var(--gs-color-white) 6%,transparent);font:500 clamp(12.5px,.8cqi,14px)/1 var(--gs-font-text);letter-spacing:.005em;color:color-mix(in srgb,var(--gs-color-night-muted) 60%,var(--gs-color-night-text));white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-win-url b{font-weight:600;color:var(--gs-color-night-text)} #gg-profile .hp-page>.hpx .hpx-win-url svg{width:12px;height:12px;fill:none;stroke:color-mix(in srgb,var(--gs-color-night-stone) 70%,var(--gs-color-night-muted));stroke-width:2;stroke-linecap:round} #gg-profile .hp-page>.hpx .hpx-win-cover{height:clamp(92px,11cqi,220px);overflow:hidden} #gg-profile .hp-page>.hpx .hpx-win-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgb(15 15 17 / .9))} #gg-profile .hp-page>.hpx .hpx-win-cover :is(picture,img){width:100%;height:100%;max-width:none} #gg-profile .hp-page>.hpx .hpx-win-cover img{object-fit:cover;object-position:50% 58%;filter:brightness(.66) saturate(.9)} /* [AF-2186] The window's header is profile header P (Will, Nov 4 2026): the photo over the cover, the score plate (gem and score, a still Opal edge) on its lower edge, the name, "@alex · 52 pieces · …" and the standings pills. */ #gg-profile .hp-page>.hpx .hpx-win-head{--hpx-avs:clamp(68px,8.4cqi,128px);display:grid;grid-template-columns:var(--hpx-avs) auto minmax(0,1fr);grid-template-areas:"av name name" "av hd soc" "pl . .";column-gap:clamp(12px,1.6cqi,24px);align-items:end;margin-top:calc(var(--hpx-avs) * -.5);padding:0 clamp(18px,2.8cqi,44px)} #gg-profile .hp-page>.hpx .hpx-win-av{grid-area:av;width:var(--hpx-avs);height:var(--hpx-avs);border-radius:var(--gs-radius-pill);object-fit:cover;outline:clamp(3px,.4cqi,5px) solid color-mix(in srgb,var(--gs-color-night-800) 80%,var(--gs-color-night-900))} #gg-profile .hp-page>.hpx .hpx-win-id{display:contents} #gg-profile .hp-page>.hpx .hpx-win-name{grid-area:name;font:500 clamp(22px,2.6cqi,40px)/1.08 var(--gs-font-display);letter-spacing:-.03em} #gg-profile .hp-page>.hpx .hpx-win-id p,#gg-profile .hp-page>.hpx .hpx-win-soc{grid-area:hd;align-self:start;margin-top:4px;font-size:clamp(12.5px,1.1cqi,15.5px);color:var(--gs-color-night-muted);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-win-soc{grid-area:soc;margin-left:calc(-1 * clamp(12px,1.6cqi,24px));overflow:hidden;text-overflow:ellipsis} #gg-profile .hp-page>.hpx .hpx-win-soc>span::before{content:"·";margin:0 .45em} #gg-profile .hp-page>.hpx .hpx-win-soc b{font-weight:600;color:var(--gs-color-night-text)} #gg-profile .hp-page>.hpx .hpx-win-score{grid-area:pl;position:relative;z-index:1;justify-self:center;display:inline-flex;align-items:center;gap:5px;margin-top:-15px;padding:0 11px;height:28px;border-radius:var(--gs-radius-pill);background:var(--gs-surface-raised);box-shadow:var(--gs-shadow-sm);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-win-score::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--pr-opal);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0)} #gg-profile .hp-page>.hpx .hpx-win-score svg{width:13px;height:15px} #gg-profile .hp-page>.hpx .hpx-win-score b{font:600 14px/1 var(--gs-font-text);font-variant-numeric:tabular-nums} #gg-profile .hp-page>.hpx .hpx-win-score small{display:none} #gg-profile .hp-page>.hpx .hpx-win .hpx-ranks{margin:14px clamp(18px,2.8cqi,44px) 0} @container hpx-card (max-width:560px){#gg-profile .hp-page>.hpx .hpx-win .hpx-ranks{display:none}} /* The shelf: five big pieces on a walnut plank. The pieces never turn on the page; a mouse magnifies them like a dock (profile-dock maths in homepage-view.js) and a click or tap opens the product viewer. */ #gg-profile .hp-page>.hpx .hpx-win-shelf{--hpx-SH:min(18.5cqi,30vh,330px);padding:calc(var(--hpx-SH) * .42 + 6px) clamp(24px,3.4cqi,64px) 0} #gg-profile .hp-page>.hpx .hpx-win-row{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(var(--hpx-SH) * .06)} #gg-profile .hp-page>.hpx .hpx-sp{position:relative;flex:none;width:calc(var(--hpx-SH) * var(--hpx-s) * var(--hpx-a))} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=wade]{--hpx-s:1.3;--hpx-a:.7143} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=bryce]{--hpx-s:1.4;--hpx-a:.5996} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=lebron]{--hpx-s:1.55;--hpx-a:.5932} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=cooper]{--hpx-s:1.3;--hpx-a:.7143} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=jordan]{--hpx-s:1.45;--hpx-a:.6034} #gg-profile .hp-page>.hpx .hpx-sp-dock{position:relative;z-index:2;transform-origin:50% 100%} #gg-profile .hp-page>.hpx .hpx-sp-btn{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--gs-radius-xs);background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} #gg-profile .hp-page>.hpx .hpx-sp-btn:focus-visible{outline-offset:6px} #gg-profile .hp-page>.hpx .hpx-sp-btn::after{content:"";position:absolute;left:8%;right:8%;bottom:-3.5%;z-index:-1;height:6%;border-radius:var(--gs-radius-pill);background:radial-gradient(closest-side,rgb(0 0 0 / .8),transparent);pointer-events:none} #gg-profile .hp-page>.hpx .hpx-sp-btn img{width:100%;height:auto;filter:drop-shadow(0 18px 18px rgb(0 0 0 / .55));-webkit-user-drag:none;user-select:none} #gg-profile .hp-page>.hpx .hpx-sp-btn[data-hpx-lifted] img{visibility:hidden} #gg-profile .hp-page>.hpx .hpx-win-plank{position:relative;z-index:1;height:clamp(14px,1.5cqi,24px);margin:-3px clamp(10px,1.4cqi,24px) 0;border-radius:4px;background:linear-gradient(180deg,#95633d 0%,#744729 40%,#4a2c19 100%);box-shadow:0 18px 30px -10px rgb(0 0 0),inset 0 1px 0 rgb(255 220 180 / .4)} #gg-profile .hp-page>.hpx .hpx-win-plank::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(91deg,transparent 0 50px,rgb(0 0 0 / .09) 50px 52px,transparent 52px 130px);mix-blend-mode:multiply} #gg-profile .hp-page>.hpx .hpx-win-more{display:none} /* Two chat bubbles, each directly under the piece it is about, with a tail pointing up at it (--hpx-tx, set from the piece's centre). On wide screens the placard sits between them. */ #gg-profile .hp-page>.hpx .hpx-win-talk{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:clamp(16px,2cqi,40px);margin:0 clamp(4px,1cqi,16px) clamp(18px,1.8cqi,32px);padding-top:26px} #gg-profile .hp-page>.hpx .hpx-cb{justify-self:start;max-width:min(330px,100%)} #gg-profile .hp-page>.hpx .hpx-cb--r{justify-self:end} #gg-profile .hp-page>.hpx .hpx-cb-bub{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px 16px 12px 11px;border:1px solid color-mix(in srgb,var(--gs-color-white) 12%,transparent);border-radius:18px;background:color-mix(in srgb,var(--gs-color-night-700) 88%,var(--gs-color-night-900));box-shadow:0 16px 32px -14px rgb(0 0 0 / .75)} #gg-profile .hp-page>.hpx .hpx-cb-bub::before{content:"";position:absolute;top:-7px;left:calc(var(--hpx-tx,40px) - 7px);width:13px;height:13px;border-top:1px solid color-mix(in srgb,var(--gs-color-white) 12%,transparent);border-left:1px solid color-mix(in srgb,var(--gs-color-white) 12%,transparent);border-radius:3px 0 0 0;background:inherit;transform:rotate(45deg)} #gg-profile .hp-page>.hpx .hpx-cb-bub>img{flex:none;width:34px;height:34px;border-radius:var(--gs-radius-pill);object-fit:cover} #gg-profile .hp-page>.hpx .hpx-cb figcaption{min-width:0} #gg-profile .hp-page>.hpx .hpx-cb figcaption>b{display:block;font:600 13px/1.3 var(--gs-font-text);color:var(--gs-color-night-text)} #gg-profile .hp-page>.hpx .hpx-cb q{display:block;margin-top:3px;font:400 clamp(14px,.85cqi,16px)/1.45 var(--gs-font-text);color:var(--gs-color-night-text);text-wrap:pretty;quotes:"“" "”"} #gg-profile .hp-page>.hpx .hpx-win-mid .hpx-placard{margin:2px auto 0} #gg-profile .hp-page>.hpx .hpx-win-mid .hpx-placard-row{gap:6px 10px} /* Front photo aspect ratios (width / height of the published derivatives). */ #gg-profile .hp-page>.hpx :is([data-hpx-slot=lebron],[data-hpx-piece=lebron]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=lebron]{--hpx-a:.5932} #gg-profile .hp-page>.hpx :is([data-hpx-slot=bryce],[data-hpx-piece=bryce]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=bryce]{--hpx-a:.5996} #gg-profile .hp-page>.hpx :is([data-hpx-slot=cooper],[data-hpx-piece=cooper]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=cooper]{--hpx-a:.71429} #gg-profile .hp-page>.hpx :is([data-hpx-slot=wade],[data-hpx-piece=wade]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=wade]{--hpx-a:.71429} #gg-profile .hp-page>.hpx :is([data-hpx-slot=game],[data-hpx-piece=game]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=game]{--hpx-a:.7292} #gg-profile .hp-page>.hpx :is([data-hpx-slot=figure],[data-hpx-piece=figure]),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-piece=figure]{--hpx-a:.6948} /* ---------- The turner (hero and preview). homepage-view.js sets only the body's inline transform and --hpx-depth; faces and edges are placed here. ---------- */ #gg-profile .hp-page>.hpx .hpx-turn,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-turn{position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--gs-radius-xs);background:none;perspective:1600px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} #gg-profile .hp-page>.hpx .hpx-turn[data-hpx-dragging],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-turn[data-hpx-dragging]{cursor:grabbing} #gg-profile .hp-page>.hpx .hpx-turn:focus-visible{outline-offset:8px} #gg-profile .hp-page>.hpx .hpx-body,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-body{position:relative;display:block;transform-style:preserve-3d;transform-origin:50% 50%} #gg-profile .hp-page>.hpx .hpx-face,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face{display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden} #gg-profile .hp-page>.hpx .hpx-face--front,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--front{position:relative;transform:translateZ(calc(var(--hpx-depth,0px) / 2))} #gg-profile .hp-page>.hpx .hpx-face--back,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--back{position:absolute;inset:0;overflow:hidden;border-radius:2.5% / 1.6%;background:var(--gs-color-night-900);transform:rotateY(180deg) translateZ(calc(var(--hpx-depth,0px) / 2))} #gg-profile .hp-page>.hpx .hpx-face img,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none} #gg-profile .hp-page>.hpx .hpx-face--back img,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--back img{height:100%;object-fit:cover} #gg-profile .hp-page>.hpx .hpx-face--back[data-hpx-back=branded],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--back[data-hpx-back=branded]{background:linear-gradient(160deg,var(--gs-color-night-700),var(--gs-color-night-900) 55%,var(--gs-color-night-800));border:1px solid var(--gs-color-night-stone)} #gg-profile .hp-page>.hpx .hpx-face--back,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--back{container-type:inline-size} #gg-profile .hp-page>.hpx .hpx-face--back[data-card-corners=sharp],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-face--back[data-card-corners=sharp]{border-radius:initial} /* The GrailSociety presentation backing (collectibleBackLayout): a clear case, a label band and the branded art, never a reconstruction of the real reverse. */ #gg-profile .hp-page>.hpx .hpx-backing,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing{position:absolute;inset:0;display:block;border-radius:inherit} #gg-profile .hp-page>.hpx .hpx-backing[data-hpx-layout=graded]::after,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing[data-hpx-layout=graded]::after{content:"";position:absolute;inset:var(--hpx-case-inset,2%);border:1px solid color-mix(in srgb,var(--gs-color-line) 26%,transparent);border-radius:2% / 1.4%;pointer-events:none} #gg-profile .hp-page>.hpx .hpx-backing[data-hpx-layout=graded]::before,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing[data-hpx-layout=graded]::before{content:"";position:absolute;left:var(--hpx-case-inset,2%);right:var(--hpx-case-inset,2%);top:var(--hpx-divider,20%);height:1px;background:color-mix(in srgb,var(--gs-color-line) 20%,transparent)} #gg-profile .hp-page>.hpx .hpx-backing-label,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-label{position:absolute;left:var(--hpx-bl-x);top:var(--hpx-bl-y);width:var(--hpx-bl-w);height:var(--hpx-bl-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqi;overflow:hidden;border:1px solid color-mix(in srgb,var(--gs-color-line) 18%,transparent);border-radius:1.6cqi;background:linear-gradient(180deg,var(--gs-color-night-700),var(--gs-color-night-800));text-align:center;color:var(--gs-color-night-text)} #gg-profile .hp-page>.hpx .hpx-backing-label b,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-label b{font:600 max(8px,5.6cqi)/1 var(--gs-font-display);letter-spacing:-.02em} #gg-profile .hp-page>.hpx .hpx-backing-label span,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-label span{font:500 max(6px,3.2cqi)/1 var(--gs-font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-color-night-muted)} #gg-profile .hp-page>.hpx .hpx-backing-content,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-content{position:absolute;left:var(--hpx-bc-x);top:var(--hpx-bc-y);width:var(--hpx-bc-w);height:var(--hpx-bc-h);overflow:hidden;border-radius:1cqi} #gg-profile .hp-page>.hpx .hpx-backing-art,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-art{display:block;width:100%;height:100%;object-fit:cover} #gg-profile .hp-page>.hpx .hpx-backing-cap,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-backing-cap{position:absolute;left:50%;bottom:1.6%;z-index:2;translate:-50% 0;padding:max(3px,1.1cqi) max(6px,3cqi);border:1px solid var(--gs-color-night-stone);border-radius:var(--gs-radius-pill);background:color-mix(in srgb,var(--gs-color-night-900) 82%,transparent);font:600 max(8px,3.6cqi)/1 var(--gs-font-text);letter-spacing:.04em;white-space:nowrap;color:var(--gs-color-night-text)} #gg-profile .hp-page>.hpx .hpx-placard-busy,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-placard-busy{display:inline-flex;align-items:center} #gg-profile .hp-page>.hpx .hpx-edge,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-edge{position:absolute;display:block;pointer-events:none;background:linear-gradient(90deg,var(--gs-color-night-stone),var(--gs-color-line) 50%,var(--gs-color-night-stone))} #gg-profile .hp-page>.hpx .hpx-edge[data-hpx-edge=left],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-edge[data-hpx-edge=left]{left:calc(var(--hpx-depth,0px) / -2);top:0;width:var(--hpx-depth,0px);height:100%;transform:rotateY(-90deg)} #gg-profile .hp-page>.hpx .hpx-edge[data-hpx-edge=right],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-edge[data-hpx-edge=right]{right:calc(var(--hpx-depth,0px) / -2);top:0;width:var(--hpx-depth,0px);height:100%;transform:rotateY(90deg)} #gg-profile .hp-page>.hpx .hpx-edge[data-hpx-edge=top],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-edge[data-hpx-edge=top]{top:calc(var(--hpx-depth,0px) / -2);left:0;width:100%;height:var(--hpx-depth,0px);transform:rotateX(90deg);background:linear-gradient(180deg,var(--gs-color-night-stone),var(--gs-color-line) 50%,var(--gs-color-night-stone))} #gg-profile .hp-page>.hpx .hpx-edge[data-hpx-edge=bottom],#gg-profile .gg-dialog:has(.hpx-preview) .hpx-edge[data-hpx-edge=bottom]{bottom:calc(var(--hpx-depth,0px) / -2);left:0;width:100%;height:var(--hpx-depth,0px);transform:rotateX(-90deg);background:linear-gradient(180deg,var(--gs-color-night-stone),var(--gs-color-line) 50%,var(--gs-color-night-stone))} #gg-profile .hp-page>.hpx .hpx-turn>.hpx-contact{position:absolute;left:8%;right:8%;bottom:-3.5%;z-index:-1;height:6%;border-radius:var(--gs-radius-pill);background:radial-gradient(closest-side,color-mix(in srgb,var(--gs-color-night-950) 80%,transparent),transparent);pointer-events:none} /* Silver glare on the Refractor and Prizm slabs: shared with the profile shelf (shelf-light.css). */ /* A photo that fails to load keeps its box and says so. */ #gg-profile .hp-page>.hpx [data-hpx-failed],#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-failed]{position:relative;background:var(--gs-surface-sunken);border-radius:var(--gs-radius-sm)} #gg-profile .hp-page>.hpx [data-hpx-failed]>:is(picture,img),#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-failed]>:is(picture,img){visibility:hidden} #gg-profile .hp-page>.hpx [data-hpx-failed]::after,#gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-failed]::after{content:"Photo unavailable";position:absolute;inset:0;display:grid;place-items:center;padding:8px;text-align:center;font:500 13px/1.3 var(--gs-font-text);color:var(--gs-text-secondary)} /* Placard: the wall label for the piece in hand */ #gg-profile .hp-page>.hpx .hpx-placard{margin:14px auto 0;display:grid;justify-items:center;gap:4px;max-width:100%;text-align:center} #gg-profile .hp-page>.hpx .hpx-placard-title{max-width:100%;font:500 15px/1.3 var(--gs-font-text);color:var(--gs-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #gg-profile .hp-page>.hpx .hpx-placard-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;min-width:0} #gg-profile .hp-page>.hpx .hpx-placard-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} #gg-profile .hp-page>.hpx .hpx-turnover{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--gs-radius-pill);background:transparent;color:var(--gs-text-primary);cursor:pointer;transition:background-color var(--gs-duration-base) var(--gs-ease-out)} @media (hover:hover){#gg-profile .hp-page>.hpx .hpx-turnover:hover{background:var(--gs-surface-raised)}} #gg-profile .hp-page>.hpx .hpx-turnover svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #gg-profile .hp-page>.hpx .hpx-placard[aria-busy=true] .hpx-turnover{cursor:progress} #gg-profile .hp-page>.hpx .hpx-placard-note{font-size:var(--gs-type-caption);line-height:1.4;color:var(--gs-text-secondary)} /* ---------- grailsociety.co/yourname: the example profile ---------- */ #gg-profile .hp-page>.hpx .hpx-yourpage{position:relative;padding:96px 0 112px;background:light-dark(var(--gs-color-ivory),var(--gs-color-night-800));color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-yourpage-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end} #gg-profile .hp-page>.hpx .hpx-yourpage .hpx-h2{grid-column:1/span 6} #gg-profile .hp-page>.hpx .hpx-yourpage .hpx-h2 span{color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-yourpage-head .hpx-lede{grid-column:8/span 5;margin-bottom:6px;max-width:44ch;font-size:var(--gs-type-h3);line-height:1.6} #gg-profile .hp-page>.hpx .hpx-example{position:relative;margin-top:48px;overflow:hidden;container-type:inline-size;container-name:hpx-frame;border:1px solid var(--gs-border-subtle);border-radius:var(--gs-radius-lg);background:var(--gs-surface-page);box-shadow:var(--gs-shadow-lg)} #gg-profile .hp-page>.hpx .hpx-example-url{grid-column:2} #gg-profile .hp-page>.hpx .hpx-example-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:48px;padding:0 20px;border-bottom:1px solid var(--gs-border-subtle);background:var(--gs-surface-raised);font-size:var(--gs-type-caption);line-height:1.2;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-example-url{display:inline-flex;align-items:center;gap:8px;min-width:0;height:30px;padding:0 16px 0 12px;border-radius:var(--gs-radius-pill);background:var(--gs-surface-sunken);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-example-url>span{overflow:hidden;text-overflow:ellipsis} #gg-profile .hp-page>.hpx .hpx-example-url svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #gg-profile .hp-page>.hpx .hpx-example-url b{font-weight:500;color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-cover{position:relative;aspect-ratio:3.6;overflow:hidden;background:var(--gs-surface-sunken)} #gg-profile .hp-page>.hpx .hpx-cover-plx{position:absolute;left:0;right:0;top:-34px;bottom:-34px} #gg-profile .hp-page>.hpx .hpx-cover-plx :is(picture,img){width:100%;height:100%;max-width:none} #gg-profile .hp-page>.hpx .hpx-cover-plx img{object-fit:cover;object-position:50% 52%} #gg-profile .hp-page>.hpx .hpx-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--gs-color-night-900) 10%,transparent))} /* [AF-2186] The redesigned profile, as a visitor sees it. */ #gg-profile .hp-page>.hpx .hpx-pr .hpx-identity{position:relative;z-index:2;display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-areas:"av name" "av by" "av bio" "av ranks";column-gap:36px;align-items:start;padding:0 48px 4px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avcol{grid-area:av;display:flex;flex-direction:column;align-items:center;margin-top:-70px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avatar{width:140px;height:140px;overflow:hidden;border:4px solid var(--gs-surface-page);border-radius:var(--gs-radius-pill);background:var(--gs-surface-raised);box-shadow:var(--gs-shadow-sm)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avatar img{width:100%;height:100%;object-fit:cover} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:120px;height:30px;margin-top:-16px;padding:0 10px;border-radius:var(--gs-radius-pill);background:var(--gs-surface-raised);color:var(--gs-text-primary);box-shadow:var(--gs-shadow-sm);white-space:nowrap;font:600 14px/1 var(--gs-font-text);font-variant-numeric:tabular-nums} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--pr-opal);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);pointer-events:none} #gg-profile .hp-page>.hpx .hpx-pr .hpx-gem{display:inline-flex} #gg-profile .hp-page>.hpx .hpx-pr .hpx-gem svg{display:block;width:13px;height:15px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate b{font-weight:600;letter-spacing:-.01em} #gg-profile .hp-page>.hpx .hpx-pr .hpx-name{grid-area:name;margin-top:22px;font:500 44px/1.08 var(--gs-font-display);letter-spacing:-1.4px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-byline{grid-area:by;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:8px;font:400 var(--gs-type-body-s)/1.4 var(--gs-font-text);color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-bio{grid-area:bio;max-width:640px;margin-top:16px;font-size:var(--gs-type-body);line-height:1.5;color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-ranks{grid-area:ranks;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;padding:0;list-style:none} #gg-profile .hp-page>.hpx .hpx-rank{height:36px;cursor:default} #gg-profile .hp-page>.hpx .hpx-rank .pr-mark{width:24px;height:24px;border-radius:var(--gs-radius-pill);font-size:calc(var(--gs-type-meta) - 3px)} #gg-profile .hp-page>.hpx .hpx-rmore{display:flex;align-items:center;height:36px;font:500 var(--gs-type-body-s)/1 var(--gs-font-text);color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-collection{padding:0 48px 36px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs{display:flex;gap:34px;overflow:hidden;border-bottom:1px solid var(--gs-border-subtle);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>span{position:relative;padding:12px 0 14px;font:500 18px/1.2 var(--gs-font-text);color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs small{margin-left:4px;font-size:var(--gs-type-caption);font-weight:400} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>.hpx-on{font-weight:650;color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>.hpx-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--gs-radius-pill);background:var(--pr-opal)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests li{position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 6px;border:1px solid var(--gs-border-subtle);border-radius:calc(var(--gs-radius-sm) + 2px);background:var(--gs-surface-raised);box-shadow:var(--gs-shadow-sm);font:500 var(--gs-type-body-s)/1 var(--gs-font-text);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests .hpx-on{border-color:transparent} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests .hpx-on::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:var(--pr-opal);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);pointer-events:none} #gg-profile .hp-page>.hpx .hpx-pr .hpx-well{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:calc(var(--gs-radius-xs) + 2px);background:var(--gs-surface-sunken);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests .hpx-on .hpx-well{background:var(--gs-text-primary);color:var(--gs-surface-page)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-well svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #gg-profile .hp-page>.hpx .hpx-paints{position:absolute;inset:0;z-index:1;pointer-events:none} #gg-profile .hp-page>.hpx .hpx-paints>i{position:absolute;border-radius:1px;background:var(--hpx-paint)} #gg-profile .hp-page>.hpx .hpx-pt-bryce{--hpx-paint:color-mix(in srgb,var(--gs-color-ink) 14%,var(--gs-color-white))} #gg-profile .hp-page>.hpx .hpx-pt-bryce>i:first-child{left:68.7%;top:14.3%;width:20.7%;height:2.5%} #gg-profile .hp-page>.hpx .hpx-pt-bryce>i+i{left:12%;top:14.6%;width:22.7%;height:2.2%} #gg-profile .hp-page>.hpx .hpx-pt-lebron{--hpx-paint:color-mix(in srgb,var(--gs-color-line) 93%,var(--gs-color-stone-500))} #gg-profile .hp-page>.hpx .hpx-pt-lebron>i:first-child{left:68.2%;top:14.9%;width:20.5%;height:2.5%} #gg-profile .hp-page>.hpx .hpx-pt-lebron>i+i{left:11%;top:14.5%;width:23%;height:3.1%} #gg-profile .hp-page>.hpx .hpx-pt-jordan{--hpx-paint:color-mix(in srgb,var(--gs-color-ivory-dim) 91%,var(--gs-color-lake-600))} #gg-profile .hp-page>.hpx .hpx-pt-jordan>i:first-child{left:66%;top:13.9%;width:22.7%;height:2.8%} #gg-profile .hp-page>.hpx .hpx-pt-jordan>i+i{left:10.5%;top:13.6%;width:23.5%;height:3.1%} /* The walnut shelf: the product's plank (.sc-shelf-plank), warm 3900K spotlights, and much larger pieces than the product shelf so the objects carry the section. */ #gg-profile .hp-page>.hpx .hpx-showcase{padding:30px 36px 8px} #gg-profile .hp-page>.hpx .hpx-shelf-eyebrow{display:inline;margin-right:14px;font:500 13px/1.4 var(--gs-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-shelf-title{display:inline;font:400 var(--gs-type-body-s)/1.4 var(--gs-font-text);color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-shelf-title span{margin-left:6px} #gg-profile .hp-page>.hpx .hpx-shelf{--hpx-ph:clamp(130px,18.6cqi,260px);--hpx-gap:clamp(16px,2.4cqi,32px);--hpx-plank:20px;position:relative;isolation:isolate;display:flex;justify-content:center;align-items:flex-end;gap:var(--hpx-gap);margin:0 0 96px;padding-top:96px} #gg-profile .hp-page>.hpx .hpx-shelf-row{display:contents} #gg-profile .hp-page>.hpx .hpx-plank-row{display:none} #gg-profile .hp-page>.hpx .sc-shelf-plank{height:var(--hpx-plank)} #gg-profile .hp-page>.hpx .hpx-plank-full{position:absolute;left:-11px;right:-11px;top:100%;z-index:1} #gg-profile .hp-page>.hpx .hpx-slot{position:relative;flex:none;display:flex;flex-direction:column;align-items:center} /* Each slot's warm beam (.hp-beam) is the shared shelf light in shelf-light.css. */ #gg-profile .hp-page>.hpx .hpx-shelf-piece{position:relative;z-index:2;display:block;margin:0;padding:0;border:0;border-radius:var(--gs-radius-xs);background:none;cursor:pointer;-webkit-tap-highlight-color:transparent} #gg-profile .hp-page>.hpx .hpx-shelf-piece:focus-visible{outline-offset:6px} #gg-profile .hp-page>.hpx .hpx-dock{position:relative;display:block;border-radius:3% / 2%;background:color-mix(in srgb,var(--gs-text-primary) 5%,transparent);transform-origin:50% 100%} #gg-profile .hp-page>.hpx .hpx-dock img{width:auto;height:var(--hpx-ph);max-width:none;filter:drop-shadow(4px 9px 5px color-mix(in srgb,var(--gs-color-night-950) 27%,transparent));-webkit-user-drag:none;user-select:none} /* Oct 1, Will: the dock is the hero's (homepage-view.js dockShelf), driven per frame; no hover transform here. */ #gg-profile .hp-page>.hpx .hpx-slot>.hpx-contact{position:absolute;left:6%;right:6%;bottom:-4px;z-index:1;height:9px;border-radius:var(--gs-radius-pill);background:radial-gradient(closest-side,rgb(38 22 8 / .42),transparent);pointer-events:none} #gg-profile .hp-page>.hpx .hpx-cap{position:absolute;left:50%;top:calc(100% + var(--hpx-plank) + 14px);z-index:3;width:max-content;max-width:calc(100% + var(--hpx-gap));translate:-50% 0;overflow:hidden;font-size:var(--gs-type-meta);line-height:1.35;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-cap b{font-weight:500;color:var(--gs-text-primary)} /* Narrow windows: the product's wrap, 2-2-1, each row on its own plank. */ @container hpx-frame (max-width:760px){ #gg-profile .hp-page>.hpx .hpx-shelf{--hpx-ph:min(220px,56cqi);--hpx-gap:24px;--hpx-plank:18px;display:block;margin:0;padding:0} #gg-profile .hp-page>.hpx .hpx-shelf-row{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:var(--hpx-gap);margin-bottom:58px;padding-top:60px} #gg-profile .hp-page>.hpx .hpx-plank-row{display:block;position:absolute;left:-6px;right:-6px;top:100%;z-index:1} #gg-profile .hp-page>.hpx .hpx-plank-full{display:none} #gg-profile .hp-page>.hpx .hpx-cap{top:calc(100% + var(--hpx-plank) + 12px)} } @container hpx-frame (max-width:760px){ #gg-profile .hp-page>.hpx .hpx-pr .hpx-identity{grid-template-columns:112px minmax(0,1fr);column-gap:22px;padding:0 24px 4px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avcol{margin-top:-56px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avatar{width:112px;height:112px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate{width:100px;margin-top:-14px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-name{margin-top:14px;font-size:calc(var(--gs-type-h1) + 2px)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-shelf{--hpx-ph:min(200px,42cqi);--hpx-gap:14px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-collection{padding:0 24px 28px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs{gap:24px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>span{font-size:var(--gs-type-body)} } @container hpx-frame (max-width:520px){ #gg-profile .hp-page>.hpx .hpx-pr .hpx-cover{aspect-ratio:2.65} #gg-profile .hp-page>.hpx .hpx-pr .hpx-identity{grid-template-columns:80px minmax(0,1fr);grid-template-areas:"av name" "av by" "bio bio" "ranks ranks";column-gap:14px;padding:0 16px 2px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avcol{margin-top:-40px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-avatar{width:80px;height:80px;border-width:3px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate{width:86px;height:24px;margin-top:-12px;padding:0 6px;gap:3px;font-size:var(--gs-type-meta)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-gem svg{width:10px;height:12px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-name{align-self:end;margin-top:10px;font-size:calc(var(--gs-type-h1) - 4px);letter-spacing:-.8px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-byline{margin-top:2px;gap:0 5px;font-size:calc(var(--gs-type-meta) + .5px)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-bio{margin-top:14px;font-size:var(--gs-type-body-s)} #gg-profile .hp-page>.hpx .hpx-ranks{flex-wrap:nowrap;margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent)} #gg-profile .hp-page>.hpx .hpx-ranks>li{flex:none} #gg-profile .hp-page>.hpx .hpx-rank{height:34px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-showcase{padding:24px 16px 4px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-shelf{--hpx-ph:min(170px,40cqi);--hpx-gap:12px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-shelf-row{margin-bottom:64px;padding-top:44px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-cap{left:-6px;right:-6px;width:auto;max-width:none;translate:none;white-space:normal;font-size:calc(var(--gs-type-meta) - 1px)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-collection{padding:12px 16px 22px} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs{gap:20px;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>span{padding:10px 0 12px;font-size:calc(var(--gs-type-body) - 1px)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests{flex-wrap:nowrap;gap:8px;margin-top:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 36px),transparent)} #gg-profile .hp-page>.hpx .hpx-pr .hpx-interests li{flex:none;height:36px} } /* ---------- Showcase: "Pick a card. See it up close." Three of Will's photographed cards stand in a gentle arc; each opens the product viewer (the Lift) with its example conversation. The layout, rest pose, idle float and light sweep live here; homepage-showcase.css/.js (loaded as the section nears) add the pointer tilt, the metal chips and the viewer panel. Idle motion runs only while [data-hpx-show-live] is set: on screen, no dialog open, full motion. ---------- */ #gg-profile .hp-page>.hpx .hpx-show{position:relative;isolation:isolate;overflow:hidden;padding:128px 0 96px} #gg-profile .hp-page>.hpx .hpx-show .hpx-atmos-key{left:auto;right:-16%;top:-24%;width:88%;height:128%} #gg-profile .hp-page>.hpx .hpx-show-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center} #gg-profile .hp-page>.hpx .hpx-show-copy{grid-column:1/span 4;min-width:0} #gg-profile .hp-page>.hpx .hpx-show-kicker{font:600 12px/1.2 var(--gs-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-show .hpx-h2{margin-top:18px} #gg-profile .hp-page>.hpx .hpx-show .hpx-h2 em{display:block} #gg-profile .hp-page>.hpx .hpx-show .hpx-lede{margin-top:24px;max-width:32ch} #gg-profile .hp-page>.hpx .hpx-show-hint{display:flex;align-items:center;gap:14px;margin-top:36px;font:500 15px/1.35 var(--gs-font-text);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-show-hint-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--gs-border-control);border-radius:var(--gs-radius-pill)} #gg-profile .hp-page>.hpx .hpx-show-hint-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #gg-profile .hp-page>.hpx .hpx-show-hint-fine{display:none} @media (hover:hover) and (pointer:fine){#gg-profile .hp-page>.hpx .hpx-show-hint-touch{display:none}#gg-profile .hp-page>.hpx .hpx-show-hint-fine{display:inline}} #gg-profile .hp-page>.hpx .hpx-show-stage{grid-column:5/span 8;min-width:0} /* Cards stand on one floor at their physical scale: a slab is --hpx-show-h tall, a raw card about two thirds. */ #gg-profile .hp-page>.hpx .hpx-show-cards{--hpx-show-h:404px;display:flex;justify-content:center;align-items:flex-end;gap:clamp(28px,3.2cqi,60px);padding-top:28px;perspective:1500px} #gg-profile .hp-page>.hpx .hpx-show-slot{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0} #gg-profile .hp-page>.hpx .hpx-show-slot:first-child{--hpx-show-yaw:13deg} #gg-profile .hp-page>.hpx .hpx-show-slot:last-child{--hpx-show-yaw:-13deg} #gg-profile .hp-page>.hpx .hpx-show-slot[data-hpx-show-k=cooper]{--hpx-s:.66} #gg-profile .hp-page>.hpx .hpx-show-card{position:relative;display:block;margin:0;padding:0;border:0;border-radius:var(--gs-radius-sm);background:none;cursor:pointer;touch-action:manipulation;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent} #gg-profile .hp-page>.hpx .hpx-show-card:focus-visible{outline-offset:8px} #gg-profile .hp-page>.hpx .hpx-show-body{position:relative;display:block;transform:translate3d(0,var(--hpx-show-lift,0px),0) rotateX(var(--hpx-show-rx,0deg)) rotateY(calc(var(--hpx-show-yaw,0deg) + var(--hpx-show-ry,0deg)));transition:transform 560ms cubic-bezier(.2,.8,.2,1),scale 180ms var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-show-body img{width:auto;max-width:none;height:calc(var(--hpx-show-h) * var(--hpx-s,1));filter:drop-shadow(0 22px 22px color-mix(in srgb,var(--gs-color-night-950) 70%,transparent));user-select:none;-webkit-user-drag:none} /* One soft light: it sweeps across a card now and then, and follows the pointer on hover. */ #gg-profile .hp-page>.hpx .hpx-show-glare{position:absolute;inset:0;border-radius:var(--gs-radius-xs);pointer-events:none;background:linear-gradient(112deg,transparent 40%,color-mix(in srgb,var(--gs-color-white) 38%,transparent) 50%,transparent 60%) no-repeat;background-size:280% 100%;background-position:var(--hpx-show-gx,140%) 0;mix-blend-mode:screen} #gg-profile .hp-page>.hpx .hpx-show-floor{display:block;width:88%;height:24px;margin-top:-10px;background:radial-gradient(closest-side,color-mix(in srgb,var(--gs-color-night-950) 92%,transparent),transparent);transition:opacity 400ms var(--gs-ease-out),transform 560ms cubic-bezier(.2,.8,.2,1)} #gg-profile .hp-page>.hpx .hpx-show-cap{display:grid;justify-items:center;gap:8px;margin-top:14px;text-align:center} #gg-profile .hp-page>.hpx .hpx-show-cap>b{font:600 16px/1.3 var(--gs-font-text);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-show-cap>span{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.3 var(--gs-font-text);color:var(--gs-text-secondary)} /* The chip before homepage-showcase.js turns it into the metal finish chip. */ #gg-profile .hp-page>.hpx .hpx-show-finish{display:inline-flex;align-items:center;height:21px;padding:0 6px;border:1.5px solid var(--gs-color-night-stone);border-radius:var(--gs-radius-xs);font:600 12px/1 var(--gs-font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-show-foot{margin-top:44px;font-size:var(--gs-type-caption);line-height:1.5;text-align:center;color:var(--gs-text-secondary)} /* Hover (mouse) and keyboard focus: the card turns to face you and rises; the pointer tilts it. */ @media (hover:hover){#gg-profile .hp-page>.hpx .hpx-show-slot:hover .hpx-show-body{--hpx-show-lift:-16px;--hpx-show-yaw:0deg}#gg-profile .hp-page>.hpx .hpx-show-slot:hover .hpx-show-floor{opacity:.55;transform:scale(.9)}} #gg-profile .hp-page>.hpx .hpx-show-card:focus-visible .hpx-show-body{--hpx-show-lift:-16px;--hpx-show-yaw:0deg} #gg-profile .hp-page>.hpx .hpx-show-card:active .hpx-show-body{scale:.97} /* While its card is in the viewer, the slot keeps its place and a faint floor. */ #gg-profile .hp-page>.hpx .hpx-show-slot[data-hpx-show-open] .hpx-show-floor{opacity:.3} #gg-profile .hp-page>.hpx .hpx-show[data-hpx-show-live] .hpx-show-card{animation:hpx-show-float 7.2s ease-in-out calc(var(--hpx-i,0) * -2.4s) infinite} #gg-profile .hp-page>.hpx .hpx-show[data-hpx-show-live] .hpx-show-glare{animation:hpx-show-sweep 9s cubic-bezier(.45,0,.25,1) calc(var(--hpx-i,0) * 3s + 1.4s) infinite} #gg-profile .hp-page>.hpx .hpx-show[data-hpx-show-live] .hpx-show-slot:is(:hover,:focus-within) :is(.hpx-show-card,.hpx-show-glare){animation:none} #gg-profile .hp-page>.hpx .hpx-show-cards[data-hpx-show-hello] .hpx-show-slot:nth-child(2) .hpx-show-body{animation:hpx-show-hello 1500ms cubic-bezier(.2,.8,.2,1) 300ms} #gg-profile .hp-page>.hpx .hpx-show[data-hpx-show-hello] .hpx-show-hint-icon{animation:hpx-show-ping 1500ms var(--gs-ease-out) 200ms} @keyframes hpx-show-float{0%,100%{translate:0 0}50%{translate:0 -7px}} @keyframes hpx-show-sweep{0%{background-position:140% 0}16%,100%{background-position:-40% 0}} @keyframes hpx-show-hello{0%,100%{translate:0 0}38%{translate:0 -18px}} @keyframes hpx-show-ping{0%,100%{border-color:var(--gs-border-control);scale:1}35%{border-color:var(--gs-text-primary);scale:1.12}} #gg-profile .hp-page>.hpx .hpx-more{margin-top:48px} #gg-profile .hp-page>.hpx .hpx-more a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;color:var(--gs-text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-more a>span{display:inline-block;transition:transform var(--gs-duration-slow) var(--gs-ease-out)} @media (hover:hover){#gg-profile .hp-page>.hpx .hpx-more a:hover{text-decoration-color:currentColor}#gg-profile .hp-page>.hpx .hpx-more a:hover>span{transform:translateX(4px)}} /* ---------- Standing: "Show off your favorites. Rise to the top." The example boards reuse the leaderboard podium's language (live-leaderboards.css): a staircase with #1 left and tallest, foil rings, a foil keyline on each plinth and metal rank numerals, drawn here from the --gs-metal-* tokens because the board sheet's --lb-* properties live only inside .lb-live. ---------- */ #gg-profile .hp-page>.hpx .hpx-standing{position:relative;padding:128px 0;background:light-dark(var(--gs-color-ivory),var(--gs-color-night-800));color:var(--gs-text-primary)} /* The boards follow the example profile on the same ground: its bottom padding already makes the break. */ #gg-profile .hp-page>.hpx .hpx-yourpage+.hpx-anchor+.hpx-standing{padding-top:24px} #gg-profile .hp-page>.hpx .hpx-standing-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end} #gg-profile .hp-page>.hpx .hpx-standing-head>div{grid-column:1/span 7;min-width:0} #gg-profile .hp-page>.hpx .hpx-standing-kicker{font:600 12px/1.2 var(--gs-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-standing .hpx-h2{margin-top:18px} #gg-profile .hp-page>.hpx .hpx-standing-head .hpx-lede{grid-column:8/span 5;margin-bottom:6px;max-width:44ch;font-size:var(--gs-type-h3);line-height:1.6} /* The boards: three example boards in a row (drawn by homepage-rise.js, loaded as the section nears) and a caption. No pause control (Will, 2026-10-09): the example always plays; Reduce Motion shows its final state. */ #gg-profile .hp-page>.hpx .hpx-boards{margin-top:56px;min-width:0} #gg-profile .hp-page>.hpx .hpx[data-hpx-mounted] .hpx-boards-row:empty{min-height:560px} /* Below the boards, one row: the score and the perks (the house rules went: Will, 2026-10-09). */ #gg-profile .hp-page>.hpx .hpx-score-col{grid-column:1/span 6;min-width:0} #gg-profile .hp-page>.hpx .hpx-score-kicker{font:600 12px/1.2 var(--gs-font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-score-lede{margin:12px 0 28px;max-width:40ch;font-size:var(--gs-type-body);line-height:1.6;color:var(--gs-text-secondary)} /* The member card (Rookie Hero, member-card.js) for the example collector, as the score chip opens it in the app; the fallback keeps the card's portrait shape and width, so nothing moves when the card arrives. */ #gg-profile .hp-page>.hpx .hpx-score{position:relative;width:min(272px,100%);margin-inline:auto} #gg-profile .hp-page>.hpx .hpx-score-fallback{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:80.264/135.128;padding:24px 28px;border:1px solid color-mix(in srgb,var(--gs-color-white) 60%,transparent);border-radius:var(--gs-radius-lg);background:var(--gs-prism-pearl);color:var(--gs-prism-ink);box-shadow:var(--gs-shadow-md)} #gg-profile .hp-page>.hpx .hpx-score-fallback strong{font:500 clamp(56px,16cqi,88px)/1 var(--gs-font-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums} #gg-profile .hp-page>.hpx .hpx-score-fallback>span:last-child{font:500 14px/1.3 var(--gs-font-text);color:var(--gs-prism-ink-soft)} #gg-profile .hp-page>.hpx [data-hpx-score]:not([data-hpx-near]) *{animation-play-state:paused} #gg-profile .hp-page>.hpx .hpx-member-card{margin:0} #gg-profile .hp-page>.hpx .hpx-member-card .mc-slab{margin-bottom:0} #gg-profile .hp-page>.hpx .hpx-member-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-top:40px;font:500 13px/1.35 var(--gs-font-text);color:var(--gs-text-secondary);text-align:center;font-variant-numeric:tabular-nums} #gg-profile .hp-page>.hpx .hpx-score-cap{margin-top:16px;font-size:var(--gs-type-caption);line-height:1.5;text-align:center;color:var(--gs-text-secondary);text-wrap:pretty} #gg-profile .hp-page>.hpx .hpx-standing-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:80px} /* Perks: their own element so the wording can change on its own. Planned, not yet in the product. */ #gg-profile .hp-page>.hpx .hpx-perks{grid-column:8/span 5;align-self:center;min-width:0;padding:28px 28px 16px;border:1px solid var(--gs-border-subtle);border-radius:var(--gs-radius-lg);background:color-mix(in srgb,var(--gs-surface-sunken) 55%,transparent)} #gg-profile .hp-page>.hpx .hpx-perks-title{display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1px solid var(--gs-border-control);border-radius:var(--gs-radius-pill);font:600 11.5px/1 var(--gs-font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-perks-head p{margin-top:14px;max-width:24ch;font:500 24px/1.25 var(--gs-font-display);letter-spacing:-.03em;color:var(--gs-text-primary);text-wrap:balance} #gg-profile .hp-page>.hpx .hpx-perks-list{margin-top:18px} #gg-profile .hp-page>.hpx .hpx-perks-list li{display:flex;align-items:center;gap:14px;min-width:0;padding:12px 0;font:600 16px/1.35 var(--gs-font-text)} #gg-profile .hp-page>.hpx .hpx-perks-list li+li{border-top:1px solid var(--gs-border-subtle)} #gg-profile .hp-page>.hpx .hpx-perks-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--gs-radius-pill);background:var(--gs-surface-sunken);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-perks-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* ---------- Invitation ---------- */ #gg-profile .hp-page>.hpx .hpx-invitation{position:relative;isolation:isolate;overflow:hidden;padding:128px 0 104px} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-h2{font-size:clamp(40px,5cqi,72px);line-height:1.05;letter-spacing:-.06em;text-align:center} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-h2>span{display:block} #gg-profile .hp-page>.hpx .hpx-invitation-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;margin-top:72px} #gg-profile .hp-page>.hpx .hpx-card-stage{grid-column:1/span 6;display:flex;justify-content:center;perspective:1200px} #gg-profile .hp-page>.hpx .hpx-card{position:relative;width:320px;max-width:100%;aspect-ratio:400/561;overflow:hidden;container-type:inline-size;border-radius:var(--gs-radius-md);background:var(--gs-color-night-900);box-shadow:var(--gs-shadow-lg);transform:rotateX(var(--hpx-tilt-x,0deg)) rotateY(var(--hpx-tilt-y,0deg));transition:transform 500ms var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-card-leather{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none} /* The live Opal emblem sits over the stamped one in the leather, blended so the grain shows. */ #gg-profile .hp-page>.hpx .hpx-card-emblem{position:absolute;left:-1.5%;top:12.1%;width:103.3%;aspect-ratio:1;mix-blend-mode:overlay;opacity:.72;pointer-events:none} #gg-profile .hp-page>.hpx .hpx-card-emblem>svg{display:block;width:100%;height:100%} #gg-profile .hp-page>.hpx .hpx-card-by{position:absolute;left:0;right:0;bottom:14.3%;font:600 3.6cqi/1 var(--gs-font-text);letter-spacing:.22em;text-align:center;text-transform:uppercase;color:var(--gs-color-line)} #gg-profile .hp-page>.hpx .hpx-card-name{position:absolute;left:6%;right:6%;bottom:5.8%;overflow:hidden;font:500 5.9cqi/1.2 var(--gs-font-display);letter-spacing:-.01em;text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--gs-color-line);text-shadow:0 -1px 0 rgb(0 0 0 / .85),0 1px 0 rgb(255 255 255 / .14)} #gg-profile .hp-page>.hpx .hpx-card-name[data-hpx-empty]{color:var(--gs-color-night-muted)} #gg-profile .hp-page>.hpx .hpx-invitation-actions{grid-column:8/span 5;min-width:0} #gg-profile .hp-page>.hpx .hpx-name-label{display:block;margin-bottom:8px;font:500 15px/1.3 var(--gs-font-text);color:var(--gs-text-primary)} #gg-profile .hp-page>.hpx .hpx-name-input{display:block;width:100%;height:52px;margin:0;padding:0 16px;border:1px solid var(--gs-border-control);border-radius:var(--gs-control-radius);background:var(--gs-color-night-900);color:var(--gs-text-primary);font:400 16px/1 var(--gs-font-text);-webkit-appearance:none;appearance:none;transition:border-color var(--gs-duration-base) var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-name-input::placeholder{color:var(--gs-text-secondary);opacity:1} #gg-profile .hp-page>.hpx .hpx-name-input:hover{border-color:var(--gs-color-night-muted)} #gg-profile .hp-page>.hpx .hpx-name-input:focus-visible{border-color:var(--gs-color-line)} #gg-profile .hp-page>.hpx .hpx-name-note{margin-top:8px;font-size:var(--gs-type-caption);line-height:1.5;color:var(--gs-text-secondary)} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-ctas{margin-top:28px} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-micro{margin-top:14px} #gg-profile .hp-page>.hpx .hpx-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:112px;padding-top:56px;border-top:1px solid var(--gs-border-subtle)} #gg-profile .hp-page>.hpx .hpx-faq-title{grid-column:1/span 4;font:500 28px/1.2 var(--gs-font-display);letter-spacing:-.04em} #gg-profile .hp-page>.hpx .hpx-q{grid-column:6/span 7;border-bottom:1px solid var(--gs-border-subtle)} #gg-profile .hp-page>.hpx .hpx-faq-title+.hpx-q{border-top:1px solid var(--gs-border-subtle)} #gg-profile .hp-page>.hpx .hpx-q summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 0;list-style:none;border-radius:var(--gs-radius-xs);font:600 18px/1.4 var(--gs-font-text);color:var(--gs-text-primary);cursor:pointer} #gg-profile .hp-page>.hpx .hpx-q summary::-webkit-details-marker{display:none} #gg-profile .hp-page>.hpx .hpx-q summary svg{width:20px;height:20px;fill:none;stroke:var(--gs-text-secondary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-q[open] summary svg{transform:rotate(180deg)} #gg-profile .hp-page>.hpx .hpx-q p{max-width:62ch;padding:0 48px 22px 0;font-size:var(--gs-type-body);line-height:1.625;color:var(--gs-text-secondary)} /* The footer is the site footer (company_footer.py), dark on this page like the bands above it. */ /* ---------- Phone sticky call to action ---------- */ #gg-profile .hp-page>.hpx .hpx-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:22px 16px calc(12px + var(--gg-safe-bottom,0px));background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gs-color-night-900) 90%,transparent) 32%,var(--gs-color-night-900) 62%);animation:hpx-bar-in 320ms var(--gs-ease-out)} #gg-profile .hp-page>.hpx .hpx-bar .hpx-ctas{flex-wrap:nowrap;gap:14px} #gg-profile .hp-page>.hpx .hpx-bar .gs-btn{flex:1;min-height:50px;padding-inline:18px;font-size:var(--gs-type-body)} #gg-profile .hp-page>.hpx .hpx-bar .hpx-code{padding:0;font-size:14.5px;white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-bar[data-hpx-leaving]{animation:hpx-bar-out 140ms ease-in forwards} @keyframes hpx-bar-in{from{transform:translateY(100%)}to{transform:none}} @keyframes hpx-bar-out{to{transform:translateY(100%)}} /* ---------- Scroll reveals and the shelf fly-in. Start states exist only once the view is mounted with full motion (data-hpx-armed); without it every element is simply present. */ #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-reveal]:not([data-hpx-shown]){opacity:0} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-reveal=up]:not([data-hpx-shown]){transform:translate3d(0,24px,0)} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-reveal=right]:not([data-hpx-shown]){transform:translate3d(32px,0,0)} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-reveal=rise]:not([data-hpx-shown]){transform:translate3d(0,56px,0) scale(.98)} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-reveal][data-hpx-shown]{transition:opacity 300ms var(--gs-ease-out) calc(var(--hpx-delay,0ms) * .5),transform 420ms var(--gs-ease-out) calc(var(--hpx-delay,0ms) * .5)} #gg-profile .hp-page>.hpx .hpx-slot[data-hpx-from=left]{--hpx-fx:-220px;--hpx-fy:-36px} #gg-profile .hp-page>.hpx .hpx-slot[data-hpx-from=right]{--hpx-fx:220px;--hpx-fy:-36px} #gg-profile .hp-page>.hpx .hpx-slot[data-hpx-from=above]{--hpx-fy:-170px} #gg-profile .hp-page>.hpx .hpx-slot[data-hpx-from=depth]{--hpx-fy:-30px;--hpx-fs:.58} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-shelf]:not([data-hpx-landed]) .hpx-shelf-piece{opacity:0;transform:translate3d(var(--hpx-fx,0px),var(--hpx-fy,0px),0) scale(var(--hpx-fs,1))} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-shelf]:not([data-hpx-landed]) .hpx-slot>.hpx-contact{opacity:0;transform:scaleX(.3)} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-shelf][data-hpx-landed] .hpx-shelf-piece{transition:opacity 180ms ease calc(var(--hpx-i,0) * 40ms),transform 360ms cubic-bezier(.2,1.28,.36,1) calc(var(--hpx-i,0) * 40ms)} #gg-profile .hp-page>.hpx[data-hpx-armed] [data-hpx-shelf][data-hpx-landed] .hpx-slot>.hpx-contact{transition:opacity 180ms ease calc(var(--hpx-i,0) * 40ms + 160ms),transform 300ms cubic-bezier(.2,1.28,.36,1) calc(var(--hpx-i,0) * 40ms + 150ms)} /* ---------- The shared header while the homepage shows: obsidian in both themes ---------- */ #gg-profile[data-app-view=home]>.gg-top{--gg-bg:var(--gs-color-night-900);--gg-panel:var(--gs-color-night-800);--gg-ink:var(--gs-color-night-text);--gg-muted:var(--gs-color-night-muted);--gg-soft:var(--gs-color-night-800);--gg-line:var(--gs-color-night-line);--gg-accent:var(--gs-color-night-text);position:relative;z-index:50;box-sizing:border-box;width:auto;height:calc(var(--gs-control-height-md) + 28px + var(--gg-safe-top,0px));margin:0;padding:var(--gg-safe-top,0px) max(32px,(100% - 1320px) / 2) 0;gap:28px;border:0;border-bottom:1px solid var(--gs-color-night-line);border-radius:0;background:var(--gs-color-night-900);box-shadow:none;color:var(--gs-color-night-text);color-scheme:dark;-webkit-backdrop-filter:none;backdrop-filter:none} #gg-profile[data-app-view=home]>.gg-top :focus-visible{outline-color:var(--gs-color-line)} /* Header: aligned with the wide hero (the approved mock-up's 80 px margin at 1920). */ #gg-profile[data-app-view=home]>.gg-top{padding-inline:max(clamp(24px,4.2vw,80px),(100% - 2240px) / 2 + 80px)} #gg-profile[data-app-view=home]>.gg-top .gs-logo{position:static;width:auto;height:auto;min-height:44px;transform:none;margin-right:auto;border-radius:var(--gs-radius-xs)} #gg-profile[data-app-view=home]>.gg-top .gs-wordmark{display:inline} #gg-profile[data-app-view=home]>.gg-top .hp-nav{gap:28px} #gg-profile[data-app-view=home]>.gg-top .hp-nav a{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--gs-radius-xs);font:500 15px/1 var(--gs-font-text);color:var(--gs-color-night-text);text-decoration:none} @media (hover:hover){#gg-profile[data-app-view=home]>.gg-top .hp-nav a:hover{color:var(--gs-color-night-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}} #gg-profile[data-app-view=home]>.gg-top .gg-top-right{gap:16px} #gg-profile[data-app-view=home]>.gg-top .hp-account-actions{gap:16px} #gg-profile[data-app-view=home]>.gg-top [data-hp-login]{--_fg:var(--gs-color-night-text);--_bg-hover:var(--gs-color-night-800);--_bg-pressed:var(--gs-color-night-700);border-color:transparent;background-color:transparent;color:var(--gs-color-night-text)} @media (hover:hover){#gg-profile[data-app-view=home]>.gg-top [data-hp-login]:hover{background-color:var(--gs-color-night-800)}} #gg-profile[data-app-view=home]>.gg-top [data-hp-login]{min-height:44px;padding-inline:12px;font:500 15px/1 var(--gs-font-text)} /* On obsidian the primary action is platinum; the Opal ring shows only while neither the hero nor the invitation call to action is on screen (data-hpx-ring). */ #gg-profile[data-app-view=home]>.gg-top [data-hp-join]{--_bg:var(--gs-color-night-text);--_bg-hover:var(--gs-color-white);--_bg-pressed:var(--gs-color-line);--_fg:var(--gs-color-night-900);--_bd:var(--gs-color-night-text);position:relative;min-height:44px;padding-inline:18px;background-color:var(--_bg);color:var(--_fg);border-color:var(--_bd);font:600 15px/1 var(--gs-font-text)} @media (hover:hover){#gg-profile[data-app-view=home]>.gg-top [data-hp-join]:hover{background-color:var(--_bg-hover)}} #gg-profile[data-app-view=home]>.gg-top [data-hp-join][data-hpx-ring]::before{content:"";position:absolute;inset:calc(-1 * var(--gs-control-border-width));z-index:1;padding:3px;border-radius:inherit;background:var(--gs-prism-ring);-webkit-mask:linear-gradient(black 0 0) content-box,linear-gradient(black 0 0);-webkit-mask-composite:xor;mask:linear-gradient(black 0 0) content-box exclude,linear-gradient(black 0 0);pointer-events:none} /* ---------- The simple piece preview ---------- */ #gg-profile .gg-dialog:has(.hpx-preview) .gg-dialog-inner{max-width:720px;padding:14px 22px 24px} #gg-profile .gg-dialog:has(.hpx-preview) :focus-visible{outline:2px solid var(--gs-focus-ring);outline-offset:2px} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview{container-type:inline-size;color:var(--gs-text-primary)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-head{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;padding:10px 48px 0;text-align:center} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-title{min-width:0;margin:0;font:600 20px/1.3 var(--gs-font-display);letter-spacing:-.4px;text-wrap:balance} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage{--hpx-ph:min(56vh,560px,calc(84cqi / var(--hpx-a,.66)));position:relative;display:grid;place-items:center;min-height:calc(var(--hpx-ph) + 56px);margin-top:14px;padding:28px 0;border-radius:var(--gs-radius-lg);background:radial-gradient(58% 52% at 50% 46%,var(--gs-surface-sunken),transparent 72%)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=lebron]){--hpx-a:.5932} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=bryce]){--hpx-a:.5996} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=cooper]){--hpx-a:.71429} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=wade]){--hpx-a:.71429} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=game]){--hpx-a:.7292} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage:has([data-hpx-piece=figure]){--hpx-a:.6948} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage>.hpx-turn{width:calc(var(--hpx-ph) * var(--hpx-a,.66));border-radius:var(--gs-radius-sm)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage .hpx-face--front img{width:100%;height:auto} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-load{position:absolute;inset:0;z-index:4;display:grid;place-items:center;border-radius:inherit;background:color-mix(in srgb,var(--gs-surface-raised) 55%,transparent)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-load .gs-loading{min-height:0} #gg-profile .gg-dialog:has(.hpx-preview) [data-hpx-retry]{min-height:44px;padding:0 18px;border:1px solid var(--gs-border-control);border-radius:var(--gs-control-radius);background:var(--gs-surface-raised);color:var(--gs-text-primary);font:500 15px/1 var(--gs-font-text);cursor:pointer} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--gs-border-subtle);border-radius:var(--gs-radius-md);background:var(--gs-surface-raised)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-seg button{min-height:44px;padding:0 16px;border:0;border-radius:var(--gs-radius-sm);background:transparent;color:var(--gs-text-secondary);font:500 15px/1 var(--gs-font-text);cursor:pointer;white-space:nowrap} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-seg button[aria-pressed=true]{background:var(--gs-text-primary);color:var(--gs-surface-page)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-controls>[data-hpx-turnover]{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;border:1px solid var(--gs-border-subtle);border-radius:var(--gs-radius-md);background:var(--gs-surface-raised);color:var(--gs-text-primary);font:500 15px/1 var(--gs-font-text);cursor:pointer} @media (hover:hover){#gg-profile .gg-dialog:has(.hpx-preview) :is(.hpx-seg button:not([aria-pressed=true]),.hpx-preview-controls>[data-hpx-turnover]):hover{background:var(--gs-surface-sunken)}} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-caption{min-height:20px;margin:10px 0 0;font-size:var(--gs-type-caption);line-height:1.5;text-align:center;color:var(--gs-text-secondary)} /* ---------- Breakpoints. Sections are containers; the header and section padding use media. ---------- */ @container hpx-band (max-width:1200px){ } @container hpx-band (max-width:1120px){ #gg-profile .hp-page>.hpx .hpx-show-grid{display:block} #gg-profile .hp-page>.hpx .hpx-show-copy{max-width:620px} #gg-profile .hp-page>.hpx .hpx-show-stage{margin-top:48px} #gg-profile .hp-page>.hpx .hpx-show-cards{--hpx-show-h:380px} #gg-profile .hp-page>.hpx .hpx-hgrid{grid-template-columns:minmax(0,1fr);row-gap:28px} #gg-profile .hp-page>.hpx .hpx-hcopy{padding-bottom:0} } /* Phones: the headline, the profile, then the value proposition; the invitation lives in the bar pinned to the bottom of the screen (Will, round 7). */ @container hpx-band (max-width:760px){ #gg-profile .hp-page>.hpx .hpx-hero{padding-bottom:28px} #gg-profile .hp-page>.hpx .hpx-hwrap{padding-inline:16px} #gg-profile .hp-page>.hpx .hpx-hgrid{display:block;padding-top:18px} #gg-profile .hp-page>.hpx .hpx-h1{font-size:38px;line-height:1.04} #gg-profile .hp-page>.hpx .hpx-hcopy :is(.hpx-sub,.hpx-ctas,.hpx-micro){display:none} #gg-profile .hp-page>.hpx .hpx-hafter{display:block;margin-top:20px;font-size:17px;line-height:1.5} #gg-profile .hp-page>.hpx .hpx-win-wrap{margin-top:20px} #gg-profile .hp-page>.hpx .hpx-win{border-radius:16px} #gg-profile .hp-page>.hpx .hpx-win-bar{height:34px;padding:0 12px;border-radius:15px 15px 0 0} #gg-profile .hp-page>.hpx .hpx-win-dots{gap:5px} #gg-profile .hp-page>.hpx .hpx-win-dots i{width:8px;height:8px} #gg-profile .hp-page>.hpx .hpx-win-url{height:24px;padding:0 12px 0 9px;font-size:var(--gs-type-meta)} #gg-profile .hp-page>.hpx .hpx-win-cover{height:78px} #gg-profile .hp-page>.hpx .hpx-win-head{--hpx-avs:64px;column-gap:10px;padding:0 14px} #gg-profile .hp-page>.hpx .hpx-win-name{font-size:var(--gs-type-h3);white-space:nowrap} #gg-profile .hp-page>.hpx .hpx-win-id p{font-size:var(--gs-type-meta)} #gg-profile .hp-page>.hpx .hpx-win-score{height:22px;margin-top:-11px;padding:0 7px} #gg-profile .hp-page>.hpx .hpx-win-score b{font-size:var(--gs-type-meta)} #gg-profile .hp-page>.hpx .hpx-win-head{grid-template-areas:"av name name" "av hd hd" "pl . ."} #gg-profile .hp-page>.hpx .hpx-win-soc{display:none} #gg-profile .hp-page>.hpx :is(.hpx-win-mid,.hpx-sp[data-hpx-more]){display:none} #gg-profile .hp-page>.hpx .hpx-win-shelf{--hpx-SH:min(38cqi,168px);padding:22px 16px 0} #gg-profile .hp-page>.hpx .hpx-win-row{justify-content:space-evenly;gap:calc(var(--hpx-SH) * .08)} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=wade]{--hpx-s:1} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=lebron]{--hpx-s:1.15} #gg-profile .hp-page>.hpx .hpx-sp[data-hpx-k=jordan]{--hpx-s:1.05} #gg-profile .hp-page>.hpx .hpx-win-talk{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px} #gg-profile .hp-page>.hpx .hpx-cb{max-width:88%} #gg-profile .hp-page>.hpx .hpx-win-more{display:block;margin:-8px auto 12px;font-size:var(--gs-type-meta);text-align:center;color:var(--gs-color-night-muted)} #gg-profile .hp-page>.hpx .hpx-wall-cols{top:20px;bottom:auto;left:-40px;right:-220px;height:1120px;gap:12px;transform:rotate(-3deg) scale(.6);transform-origin:0 0} #gg-profile .hp-page>.hpx .hpx-wall-still{top:20px;bottom:auto;height:640px;opacity:.45} #gg-profile .hp-page>.hpx .hpx-wall-shade{background:linear-gradient(180deg,color-mix(in srgb,var(--gs-color-night-900) 94%,transparent) 0px,color-mix(in srgb,var(--gs-color-night-900) 88%,transparent) 190px,color-mix(in srgb,var(--gs-color-night-900) 30%,transparent) 270px,color-mix(in srgb,var(--gs-color-night-900) 28%,transparent) 640px,color-mix(in srgb,var(--gs-color-night-900) 92%,transparent) 760px,var(--gs-color-night-900) 100%)} } @container hpx-band (max-width:1180px) and (min-width:901px){ #gg-profile .hp-page>.hpx .hpx-score-col{grid-column:1/span 6} #gg-profile .hp-page>.hpx .hpx-perks{grid-column:7/span 6} } @container hpx-band (max-width:900px){ #gg-profile .hp-page>.hpx .hpx-yourpage-head{display:block} #gg-profile .hp-page>.hpx .hpx-yourpage-head .hpx-lede{margin-top:18px} #gg-profile .hp-page>.hpx .hpx-standing-head{display:block} #gg-profile .hp-page>.hpx .hpx-standing-head .hpx-lede{margin-top:18px} #gg-profile .hp-page>.hpx .hpx-boards{margin-top:40px} #gg-profile .hp-page>.hpx .hpx-standing-foot{display:block;width:min(560px,100%);margin:64px auto 0} #gg-profile .hp-page>.hpx .hpx-perks{margin-top:48px} #gg-profile .hp-page>.hpx .hpx-invitation-grid{display:block;margin-top:48px} #gg-profile .hp-page>.hpx .hpx-invitation-actions{max-width:480px;margin:40px auto 0} #gg-profile .hp-page>.hpx .hpx-faq{display:block;margin-top:72px} #gg-profile .hp-page>.hpx .hpx-faq-title{margin-bottom:18px} } @container hpx-frame (max-width:760px){ #gg-profile .hp-page>.hpx .hpx-showcase{padding:24px 18px 4px} } @container hpx-band (max-width:600px){ #gg-profile .hp-page>.hpx .hpx-placard{margin-top:6px;gap:0} #gg-profile .hp-page>.hpx .hpx-placard-title{font-size:var(--gs-type-body-s)} #gg-profile .hp-page>.hpx .hpx-chip{height:24px;padding:0 9px;font-size:var(--gs-type-meta)} #gg-profile .hp-page>.hpx .hpx-ctas .gs-btn{width:100%} #gg-profile .hp-page>.hpx .hpx-code{justify-content:center} #gg-profile .hp-page>.hpx .hpx-yourpage-head .hpx-lede{font-size:var(--gs-type-body)} #gg-profile .hp-page>.hpx .hpx-lede{font-size:var(--gs-type-h3)} #gg-profile .hp-page>.hpx .hpx-example{margin-top:32px;border-radius:var(--gs-radius-md)} #gg-profile .hp-page>.hpx .hpx-example-bar{grid-template-columns:auto minmax(0,1fr);gap:10px;min-height:44px;padding:0 10px 0 12px} #gg-profile .hp-page>.hpx .hpx-example-url{justify-self:center;padding:0 12px 0 10px} #gg-profile .hp-page>.hpx .hpx-showcase{padding:22px 14px 4px} #gg-profile .hp-page>.hpx .hpx-show-cards{--hpx-show-h:300px;justify-content:flex-start;gap:32px;margin-inline:calc(-1 * var(--hpx-gutter));padding:30px var(--hpx-gutter) 6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hpx-gutter);scrollbar-width:none;perspective:none} #gg-profile .hp-page>.hpx .hpx-show-cards::-webkit-scrollbar{display:none} #gg-profile .hp-page>.hpx .hpx-show-slot{flex:none;scroll-snap-align:start;--hpx-show-yaw:0deg} #gg-profile .hp-page>.hpx .hpx-show-slot:last-child{padding-right:var(--hpx-gutter)} #gg-profile .hp-page>.hpx .hpx-show-foot{margin-top:28px;text-align:left} #gg-profile .hp-page>.hpx .hpx-show-hint{margin-top:28px} #gg-profile .hp-page>.hpx .hpx-more{margin-top:20px} #gg-profile .hp-page>.hpx .hpx-standing-head .hpx-lede{font-size:var(--gs-type-body)} #gg-profile .hp-page>.hpx .hpx-standing .hpx-h2{margin-top:14px} #gg-profile .hp-page>.hpx .hpx-perks{padding:22px 18px 10px} #gg-profile .hp-page>.hpx .hpx-perks-head p{font-size:var(--gs-type-quote)} #gg-profile .hp-page>.hpx .hpx-card{width:240px} #gg-profile .hp-page>.hpx .hpx-invitation-actions{margin-top:36px;max-width:none} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-ctas{flex-direction:column;align-items:stretch;gap:0} #gg-profile .hp-page>.hpx .hpx-invitation .hpx-micro{text-align:center} #gg-profile .hp-page>.hpx .hpx-faq{margin-top:64px;padding-top:36px} #gg-profile .hp-page>.hpx .hpx-faq-title{font-size:var(--gs-type-h2)} #gg-profile .hp-page>.hpx .hpx-q summary{min-height:52px;font-size:var(--gs-type-body)} #gg-profile .hp-page>.hpx .hpx-q p{padding-right:8px} } @container hpx-band (max-width:374px){ #gg-profile .hp-page>.hpx .hpx-example-url{display:none} #gg-profile .hp-page>.hpx .hpx-cap{font-size:11px} } @media (max-width:600px){ #gg-profile .hp-page>.hpx{--hpx-gutter:16px;--hpx-head:64px} #gg-profile .hp-page>.hpx .hpx-yourpage{padding:72px 0} #gg-profile .hp-page>.hpx .hpx-standing{padding:80px 0} #gg-profile .hp-page>.hpx .hpx-show{padding:80px 0 72px} #gg-profile .hp-page>.hpx .hpx-yourpage+.hpx-anchor+.hpx-standing{padding-top:8px} #gg-profile .hp-page>.hpx .hpx-invitation{padding:80px 0 56px} #gg-profile[data-app-view=home]>.gg-top{height:calc(64px + var(--gg-safe-top,0px));padding-inline:16px;gap:8px} #gg-profile[data-app-view=home]>.gg-top .hp-account-actions [data-hp-join]{display:none} #gg-profile[data-app-view=home]>.gg-top .hp-account-actions:has([data-hp-login][hidden]) [data-hp-join]{display:inline-flex} #gg-profile .gg-dialog:has(.hpx-preview) .gg-dialog-inner{padding:10px 12px 22px} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-head{gap:8px;padding:8px 44px 0} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-title{flex-basis:100%} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-title{font-size:var(--gs-type-h3)} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview-stage{--hpx-ph:min(46vh,380px,calc(84cqi / var(--hpx-a,.66)))} #gg-profile .gg-dialog:has(.hpx-preview) .hpx-seg button{padding:0 13px} } @media (min-width:761px){ #gg-profile .hp-page>.hpx .hpx-bar{display:none} } /* Short windows (a phone in landscape, 400% zoom) keep the page: no sticky header, no bar. */ @media (min-height:480px){ #gg-profile[data-app-view=home]>.gg-top{position:sticky;top:0} } @media (max-height:479px){ #gg-profile .hp-page>.hpx .hpx-bar{display:none} } @media (max-width:820px){ #gg-profile[data-app-view=home]>.gg-top .hp-nav{display:none} } @media (hover:none){ #gg-profile .hp-page>.hpx .hpx-dock{transform:none} } @media (forced-colors:active){ #gg-profile .hp-page>.hpx :is(.hpx-show-glare,.hpx-atmos,.hpx-wall){display:none} #gg-profile .hp-page>.hpx .hpx-ring::before,#gg-profile[data-app-view=home]>.gg-top [data-hp-join]::before{display:none} #gg-profile .hp-page>.hpx .hpx-ring{border-color:ButtonText} #gg-profile .hp-page>.hpx .hpx-pr .hpx-plate{border:1px solid CanvasText} #gg-profile .hp-page>.hpx .hpx-pr :is(.hpx-plate,.hpx-interests .hpx-on)::before,#gg-profile .hp-page>.hpx .hpx-pr .hpx-tabs>.hpx-on::after{background:CanvasText} #gg-profile .hp-page>.hpx .hpx-paints>i{forced-color-adjust:none} } /* ---------- Reduced motion: no fly-in, parallax, drift, hologram, spin-in or coasting. Drags still turn and flips are instant (homepage-view.js). Both switches are required. ---------- */ @media (prefers-reduced-motion:reduce){#gg-profile .hp-page>.hpx *,#gg-profile[data-app-view=home]>.gg-top *,#gg-profile .gg-dialog:has(.hpx-preview) *{animation:none!important;transition:none!important}} #gg-profile .hp-page>.hpx[data-hpx-motion=reduced] *,#gg-profile[data-app-view=home]>.gg-top[data-hpx-motion=reduced] *,#gg-profile .gg-dialog:has(.hpx-preview) .hpx-preview[data-hpx-motion=reduced] *{animation:none!important;transition:none!important}