/* ========================================================================== Randy Sinda — link-in-bio hub (static QA/QC clone of jvwithrandy.com) Colors/metrics derived from live computed styles. ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: #0e1622; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* The hub renders as a centered ~430px column over the geometric bg image. The live column is content-height (not full viewport), with the geometric image stretched to cover exactly that content area. */ .hub { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; background: #0e1622; } .hub-inner { width: 100%; max-width: 430px; /* purple / dark geometric background image (portrait source). Column is content-height; image covers exactly that area (matches live). */ background-image: url("../img/hub-background.png"); background-size: cover; background-position: top center; background-repeat: no-repeat; background-color: #1b0f2e; padding: 30px 30px 40px; display: flex; flex-direction: column; align-items: center; } /* Profile image — white 3px border, radius 5, 120px */ .profile { margin-top: 5px; } .profile-img { width: 120px; height: auto; border: 3px solid #FFFFFF; border-radius: 5px; display: block; } /* Name */ .name { color: #FFFFFF; font-family: Roboto, sans-serif; font-size: 40px; font-weight: 700; text-align: center; margin: 22px 0 0; line-height: 1.1; } /* Headlines */ .headlines { color: #FFFFFF; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 700; text-align: center; line-height: 1.4; margin: 14px 0 26px; } /* CTA buttons — navy fill #17273B, magenta 3px border, radius 10 */ .cta-list { width: 100%; max-width: 336px; display: flex; flex-direction: column; gap: 20px; } .cta-btn { display: block; background: #17273B; /* rgb(23,39,59) */ color: #FFFFFF; border: 3px solid #EE82FF; /* rgb(238,130,255) */ border-radius: 10px; padding: 12px 30px; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } .cta-btn:hover { box-shadow: 0 0 12px rgba(238,130,255,0.55); transform: translateY(-1px); } /* Social row */ .socials { display: flex; gap: 22px; margin-top: 34px; justify-content: center; } .socials a { display: inline-flex; } .socials img { width: 42px; height: 42px; display: block; } @media (max-width: 460px) { .hub-inner { padding: 24px 22px 36px; } .name { font-size: 34px; } } /* ========================================================================== Clone-subtree isolation (Mission Control clone host). The clone is served inside our app whose Tailwind preflight sets html{line-height:1.5} + the app sets its own font inline. Both are INHERITED into the clone subtree, shifting text metrics vs the standalone deploy. Re-assert the clone's own body font + the browser-default line-height on the wrapper so descendants inherit exactly what they do live. Scoped to .site-root only — does not touch the real / or the app. ========================================================================== */ .site-root { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: normal; } /* Tailwind preflight (the host app) zeroes UA margins on flow elements (h1–h6, p, ul, ol, blockquote, figure, hr, dl/dd). The standalone clone relies on those default margins. Roll them back inside the clone subtree only. Selector specificity is 0,0,1 (bare element; .site-root is inside :where = 0) — it ties Tailwind preflight's own `h1{margin:0}` reset and wins by load order, while any real clone rule (a class, >=0,1,0) still beats it. */ :where(.site-root) h1, :where(.site-root) h2, :where(.site-root) h3, :where(.site-root) h4, :where(.site-root) h5, :where(.site-root) h6, :where(.site-root) p, :where(.site-root) ul, :where(.site-root) ol, :where(.site-root) blockquote, :where(.site-root) figure, :where(.site-root) hr, :where(.site-root) dl, :where(.site-root) dd, :where(.site-root) pre { margin: revert; }