/* ========================================================= HeyDrew! Partner Hub Design tokens ========================================================= */ :root { --bg: #f9fafb; --card-bg: #ffffff; --card-border: rgba(27, 39, 42, 0.08); --ink: #101828; /* card titles */ --muted: #9ca3af; /* labels & subtitles */ --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --card-shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.12); --content-max: 1024px; --gap: 16px; --radius: 16px; --rainbow: linear-gradient(90deg, rgb(168, 224, 99) 0%, rgb(250, 204, 21) 20%, rgb(251, 146, 60) 40%, rgb(244, 114, 180) 60%, rgb(192, 132, 252) 80%, rgb(96, 165, 250) 100%); } /* ========================================================= Reset / base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } /* Shared custom elements render their real markup (.hero/.footer) as if they were direct children of — the wrapper generates no box. */ site-hero, site-footer, page-header { display: contents; } /* ========================================================= Rainbow accent bar ========================================================= */ .rainbow-bar { display: block; background-image: var(--rainbow); border-radius: 9999px; } .rainbow-bar--lg { width: 80px; height: 4px; } .rainbow-bar--sm { width: 56px; height: 2px; } /* ========================================================= Hero ========================================================= */ .hero { position: relative; height: 280px; background: #cfe4c4 url("assets/hero-forest.jpg") center / cover no-repeat; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0) 100%); } .hero__inner { position: relative; height: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 32px; display: flex; align-items: flex-end; gap: 24px; } .hero__mascot { height: 256px; width: auto; object-fit: contain; filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15)); flex-shrink: 0; } .hero__text { padding-bottom: 4px; min-width: 0; margin-bottom: 32px; } .hero__title { margin: 12px 0 0; font-size: 36px; font-weight: 700; line-height: 40px; letter-spacing: -0.36px; color: #fff; } .hero__subtitle { margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 20px; color: rgba(255, 255, 255, 0.75); } /* ========================================================= Main content ========================================================= */ .main { max-width: var(--content-max); margin: 0 auto; padding: 40px 24px; } .section + .section { margin-top: 40px; } .section__label { margin: 0; font-size: 11px; font-weight: 700; line-height: 16.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); } /* Affiliates collapse toggle */ .section__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; } .section__chevron { width: 14px; height: 14px; flex-shrink: 0; background: currentColor; color: var(--muted); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); transition: transform 0.25s ease; } .section__toggle[aria-expanded="false"] .section__chevron { transform: rotate(-90deg); } /* ========================================================= Card grid ========================================================= */ .grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } /* Collapsed affiliates grid */ .grid[hidden] { display: none; } .card { display: flex; flex-direction: column; min-height: 172.5px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; } .card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); outline: none; } .card:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .card__icon { height: 96px; display: flex; align-items: center; justify-content: center; color: #fff; } .card__icon svg { width: 32px; height: 32px; } .card__body { padding: 16px; } .card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 22.5px; color: var(--ink); } .card__sub { margin: 2px 0 0; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--muted); } /* ---- Card header gradients (angle 161deg, matches Figma) ---- */ .g-purple { background-image: linear-gradient(161deg, rgb(155, 89, 212), rgb(196, 79, 216)); } .g-green { background-image: linear-gradient(161deg, rgb(61, 217, 68), rgb(34, 168, 50)); } .g-orange { background-image: linear-gradient(161deg, rgb(245, 166, 35), rgb(249, 115, 22)); } .g-bluePurple { background-image: linear-gradient(161deg, rgb(91, 155, 213), rgb(123, 111, 212)); } .g-orangePink { background-image: linear-gradient(161deg, rgb(245, 166, 35), rgb(225, 48, 108)); } .g-facebook { background-image: linear-gradient(161deg, rgb(100, 149, 237), rgb(24, 119, 242)); } .g-linkedin { background-image: linear-gradient(161deg, rgb(91, 155, 213), rgb(10, 102, 194)); } .g-dark { background-image: linear-gradient(161deg, rgb(80, 80, 80), rgb(15, 15, 15)); } .g-red { background-image: linear-gradient(161deg, rgb(255, 100, 100), rgb(220, 38, 38)); } /* ========================================================= Footer ========================================================= */ .footer { margin-top: 56px; border-top: 1px solid var(--card-border); } .footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .footer__copy { margin: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 16.5px; color: var(--muted); } /* ========================================================= Responsive ========================================================= */ @media (max-width: 880px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .hero { height: auto; } .hero__inner { padding: 32px 24px 0; align-items: flex-end; gap: 16px; } .hero__mascot { height: 168px; } .hero__title { font-size: 30px; line-height: 34px; } } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } /* mobile only: text on the left, mascot on the right, side by side */ .hero__inner { gap: 14px; justify-content: space-between; } .hero__mascot { height: 132px; order: 2; } .hero__title { font-size: 24px; line-height: 28px; } .hero__subtitle { font-size: 13px; } .footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 380px) { .hero__inner { gap: 10px; } .hero__mascot { height: 112px; } .hero__title { font-size: 21px; line-height: 25px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ========================================================= Per-platform page header (Instagram, Facebook, …) ========================================================= */ .pheader { width: 100%; } .pheader__inner { max-width: var(--content-max); margin: 0 auto; min-height: 160px; display: flex; align-items: flex-end; padding: 0 24px 24px; } .pheader__row { display: flex; align-items: center; gap: 16px; min-width: 0; } .pheader__badge { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; color: #fff; } .pheader__badge svg { width: 36px; height: 36px; display: block; } .pheader__text { min-width: 0; } .pheader__title { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.24px; color: #fff; } .pheader__subtitle { margin: 2px 0 0; font-size: 13px; line-height: 19.5px; color: rgba(255, 255, 255, 0.7); } /* Per-platform gradients (angle matches the Figma header) */ .pheader--instagram { background-image: linear-gradient(174deg, rgb(245, 166, 35), rgb(225, 48, 108)); } .pheader--facebook { background-image: linear-gradient(174deg, rgb(100, 149, 237), rgb(24, 119, 242)); } .pheader--linkedin { background-image: linear-gradient(174deg, rgb(91, 155, 213), rgb(10, 102, 194)); } .pheader--twitter { background-image: linear-gradient(174deg, rgb(80, 80, 80), rgb(15, 15, 15)); } .pheader--youtube { background-image: linear-gradient(174deg, rgb(255, 100, 100), rgb(220, 38, 38)); } /* Per-platform accent gradient (top bar, count badge, download button) */ .pp--instagram { --grad: linear-gradient(160deg, rgb(245, 166, 35), rgb(225, 48, 108)); } .pp--facebook { --grad: linear-gradient(160deg, rgb(100, 149, 237), rgb(24, 119, 242)); } .pp--linkedin { --grad: linear-gradient(160deg, rgb(91, 155, 213), rgb(10, 102, 194)); } .pp--twitter { --grad: linear-gradient(160deg, rgb(80, 80, 80), rgb(15, 15, 15)); } .pp--youtube { --grad: linear-gradient(160deg, rgb(255, 100, 100), rgb(220, 38, 38)); } /* ========================================================= Platform asset pages (toolbar + accordion asset grids) ========================================================= */ .pp-subnav { border-bottom: 1px solid var(--card-border); background: var(--bg); } .pp-subnav__inner { max-width: var(--content-max); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .pp-back { display: inline-flex; align-items: center; gap: 8px; color: #4a5565; font-size: 13px; font-weight: 600; text-decoration: none; } .pp-back:hover { color: var(--ink); } .pp-back svg { width: 15px; height: 15px; } .pp-subnav__right { display: flex; align-items: center; gap: 16px; } .pp-count { font-size: 12px; color: var(--muted); white-space: nowrap; } .pp-count strong { color: var(--ink); font-weight: 700; } .pp-filter { position: relative; width: 160px; } .pp-filter svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--muted); pointer-events: none; } .pp-filter input { width: 100%; height: 37.5px; padding: 9px 13px 9px 33px; background: #f3f4f6; border: 1px solid var(--card-border); border-radius: 14px; font-family: inherit; font-size: 13px; color: var(--ink); } .pp-filter input::placeholder { color: var(--muted); } .pp-sections { display: flex; flex-direction: column; gap: 12px; } .pp-empty { padding: 40px 4px; color: var(--muted); font-size: 14px; text-align: center; } .pp-section { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); overflow: hidden; } .pp-section[hidden] { display: none; } .pp-section__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; } .pp-section__label { display: flex; align-items: center; gap: 10px; } .pp-section__title { font-size: 15px; font-weight: 700; color: var(--ink); } .pp-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 9999px; background-image: var(--grad); color: #fff; font-size: 11px; font-weight: 600; } .pp-section__chevron { display: inline-flex; color: var(--muted); transition: transform 0.2s ease; } .pp-section__chevron svg { width: 16px; height: 16px; display: block; } .pp-section__head[aria-expanded="false"] .pp-section__chevron { transform: rotate(-90deg); } .pp-section__body { padding: 0 20px 20px; } .pp-section__body[hidden] { display: none; } .pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); overflow: hidden; } .pp-card[hidden] { display: none; } .pp-card__bar { height: 4px; background-image: var(--grad); } .pp-card__img { background: #f0f0f2; } .pp-card__img img { display: block; width: 100%; height: auto; max-height: 224px; object-fit: contain; } .pp-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; } .pp-card__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 19.25px; color: var(--ink); } .pp-card__size { margin: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.275px; color: var(--muted); } .pp-card__desc { margin: 0; font-size: 13px; line-height: 21.125px; color: #4a5565; } .pp-tag { align-self: flex-start; padding: 2px 8px; border-radius: 9999px; background: rgba(112, 8, 231, 0.08); color: #7008e7; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .pp-download { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 39.5px; border-radius: 14px; background-image: var(--grad); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter 0.12s ease; } .pp-download:hover { filter: brightness(1.05); } .pp-download svg { width: 13px; height: 13px; } @media (max-width: 900px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pp-grid { grid-template-columns: 1fr; } .pp-subnav__inner { flex-wrap: wrap; } .pp-filter { width: 100%; } .pp-subnav__right { width: 100%; justify-content: space-between; } } /* ========================================================= Detail pages (Profile Pictures, etc.) ========================================================= */ .back-link { display: inline-flex; align-items: center; gap: 8px; color: #4a5565; font-size: 13px; font-weight: 600; text-decoration: none; } .back-link:hover { color: var(--ink); } .back-link svg { width: 15px; height: 15px; } .page-head { margin-top: 28px; } .page-head__title { margin: 0; font-size: 22px; font-weight: 700; line-height: 33px; color: var(--ink); } .page-head__desc { margin: 4px 0 0; max-width: 576px; font-size: 14px; line-height: 21px; color: #4a5565; } /* Platform color tokens */ .pf--ig { --pf: #e1306c; --pf-rgb: 225, 48, 108; } .pf--fb { --pf: #1877f2; --pf-rgb: 24, 119, 242; } .pf--li { --pf: #0a66c2; --pf-rgb: 10, 102, 194; } .pf--x { --pf: #101828; --pf-rgb: 0, 0, 0; } .pf--yt { --pf: #dc2626; --pf-rgb: 220, 38, 38; } /* Recommended sizes panel */ .sizes-panel { margin-top: 32px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); padding: 21px; } .sizes-panel__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink); } .sizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .size-cell { background: rgba(var(--pf-rgb), 0.05); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .size-cell__name { font-size: 11px; font-weight: 700; line-height: 16.5px; color: var(--pf); } .size-cell__dim { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 11px; line-height: 16.5px; color: #4a5565; } .sizes-panel__note { margin: 12px 0 0; font-size: 11px; line-height: 16.5px; color: var(--muted); } /* Profile-picture card grid */ .pfp-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .pfp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; } .pfp-card__img { width: 100%; height: auto; /* override the width/height HTML attrs so aspect-ratio wins */ aspect-ratio: 1 / 1; object-fit: cover; background: #f3f4f6; display: block; } .pfp-card__body { padding: 16px; } .pfp-card__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 21px; color: var(--ink); } .pfp-card__sub { margin: 2px 0 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 11px; line-height: 16.5px; color: var(--muted); } .pfp-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pfp-tag { background: rgba(var(--pf-rgb), 0.08); color: var(--pf); font-size: 10px; font-weight: 600; line-height: 15px; padding: 2px 8px; border-radius: 9999px; } .pfp-card__download { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 14px; background-image: linear-gradient(163deg, rgb(155, 89, 212), rgb(196, 79, 216)); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .pfp-card__download:hover { filter: brightness(1.06); transform: translateY(-1px); } .pfp-card__download svg { width: 13px; height: 13px; } /* ========================================================= Handles page (Username & Handle Ideas) ========================================================= */ .handles-topbar { margin-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; } .filter { position: relative; width: 192px; max-width: 100%; } .filter svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--muted); pointer-events: none; } .filter__input { width: 100%; height: 37.5px; padding: 9px 13px 9px 33px; background: #fff; border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); font-family: inherit; font-size: 13px; color: var(--ink); } .filter__input::placeholder { color: var(--muted); } .filter__input:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; } .handles-grid { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; } .handle-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; background: #fff; border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 19.5px; color: #4a5565; cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease; } .handle-pill[hidden] { display: none; } /* author rule must beat .handle-pill's display */ .handle-pill:hover { transform: translateY(-1px); border-color: rgba(27, 39, 42, 0.18); } .handle-pill:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .handle-pill__icon { display: inline-flex; color: var(--muted); } .handle-pill__icon svg { width: 12px; height: 12px; display: block; } .handle-pill.is-copied { background: #ecfdf5; border-color: #a7f3d0; color: #059669; } .handle-pill.is-copied .handle-pill__icon { color: #059669; } .handle-pill.is-error { background: #fef2f2; border-color: #fecaca; color: #dc2626; } .handle-pill.is-error .handle-pill__icon { color: #dc2626; } .show-toggle { margin-top: 24px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 45.5px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; font-family: inherit; font-size: 13px; font-weight: 600; color: #4a5565; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .show-toggle[hidden] { display: none; } .show-toggle:hover { background: #f9fafb; border-color: rgba(27, 39, 42, 0.18); } .show-toggle__icon { display: inline-flex; } .show-toggle__icon svg { width: 15px; height: 15px; display: block; } .handles-note { margin-top: 16px; font-size: 11px; line-height: 16.5px; color: var(--muted); } @media (max-width: 560px) { .handles-topbar { align-items: stretch; } .filter { width: 100%; } } /* ========================================================= Bios page (Profile Bios) ========================================================= */ .bios-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .bio-card { display: flex; flex-direction: column; gap: 12px; padding: 21px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); } .bio-card[hidden] { display: none; } .bio-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bio-badge { display: inline-block; padding: 3px 10px; border-radius: 9999px; background-image: linear-gradient(154deg, rgb(155, 89, 212), rgb(196, 79, 216)); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; letter-spacing: 1px; text-transform: uppercase; } .bio-copy { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); transition: color 0.12s ease; } .bio-copy:hover { color: #4a5565; } .bio-copy:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 6px; } .bio-copy__icon { display: inline-flex; } .bio-copy__icon svg { width: 12px; height: 12px; display: block; } .bio-copy.is-copied { color: #059669; } .bio-copy.is-error { color: #dc2626; } .bio-card__body p { margin: 0; font-size: 13px; line-height: 21px; letter-spacing: -0.08px; color: var(--ink); } @media (max-width: 640px) { .bios-grid { grid-template-columns: 1fr; } } /* ========================================================= Content Guide page ========================================================= */ .guide-sections { margin-top: 32px; display: flex; flex-direction: column; gap: 32px; } .guide-card { padding: 25px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); } .guide-card--notes { background: #fffbeb; border-color: #fef3c6; box-shadow: none; } .guide-card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--ink); } .guide-card__title--notes { font-size: 15px; color: #973c00; } /* Numbered steps */ .guide-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .step { display: flex; align-items: flex-start; gap: 12px; } .step__num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background-image: linear-gradient(132deg, rgb(245, 166, 35), rgb(225, 48, 108)); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .step__text { font-size: 14px; line-height: 22.75px; color: #4a5565; } /* Notes list */ .notes-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .note-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 21.125px; color: #973c00; } .note-item__bullet { flex-shrink: 0; } /* Checklist */ .checklist { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .check-item { display: flex; align-items: center; gap: 12px; cursor: pointer; } .check-item__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .check-box { flex-shrink: 0; width: 20px; height: 20px; border: 2px solid rgba(27, 39, 42, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.12s ease, border-color 0.12s ease; } .check-box svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: opacity 0.12s ease, transform 0.12s ease; } .check-item__input:checked ~ .check-box { background: #16a34a; border-color: #16a34a; } .check-item__input:checked ~ .check-box svg { opacity: 1; transform: scale(1); } .check-item__input:focus-visible ~ .check-box { outline: 2px solid #60a5fa; outline-offset: 2px; } .check-item__text { font-size: 14px; font-weight: 500; line-height: 22.75px; color: #4a5565; transition: color 0.12s ease; } .check-item__input:checked ~ .check-item__text { color: #9ca3af; text-decoration: line-through; } /* Checklist-complete celebration: canvas confetti burst + green thumbs-up, fired from the center of the checklist card. Rendered at the top layer so the full burst is never clipped by the card, yet stays centered on it. */ .celebrate-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; } .celebrate-thumb { position: fixed; transform: translate(-50%, -50%); z-index: 9999; pointer-events: none; } .celebrate-thumb.is-leaving { animation: celebrate-out 380ms ease forwards; } .celebrate-thumb svg { display: block; width: 150px; height: 150px; color: #16a34a; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 12px 26px rgba(0, 0, 0, 0.28)); transform-origin: center; animation: thumb-pop 460ms cubic-bezier(0.2, 1.5, 0.35, 1) both; } @keyframes thumb-pop { 0% { transform: scale(0.2); opacity: 0; } 55% { transform: scale(1.18); opacity: 1; } 75% { transform: scale(0.92); } 100% { transform: scale(1); opacity: 1; } } @keyframes celebrate-out { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .celebrate-thumb svg { animation: none; } } /* ========================================================= Content Calendar page ========================================================= */ #calendar-root { margin-top: 24px; } /* "How to post a Carousel or Reel" accordion */ .disclosure { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); overflow: hidden; } .disclosure__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; } .disclosure__label { font-size: 15px; font-weight: 700; color: var(--ink); } .disclosure__chevron { display: inline-flex; color: var(--muted); transition: transform 0.2s ease; } .disclosure__chevron svg { width: 16px; height: 16px; display: block; } .disclosure__head[aria-expanded="true"] .disclosure__chevron { transform: rotate(180deg); } .disclosure__body { padding: 0 20px 20px; } .disclosure__body[hidden] { display: none; } .howto-group + .howto-group { margin-top: 16px; } .howto-group__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); } .howto-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .howto-steps li { font-size: 13px; line-height: 20px; color: #4a5565; } /* Day cards */ .calendar-days { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .day-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); } .day-card__num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background-image: linear-gradient(132deg, rgb(245, 166, 35), rgb(225, 48, 108)); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .day-card__content { flex: 1; min-width: 0; } .day-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .day-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 22.5px; color: var(--ink); } .day-card__actions { display: flex; gap: 8px; flex-shrink: 0; } .cal-copy, .cal-dropbox { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .cal-copy { background: #f3f4f6; border: 1px solid var(--card-border); color: #4a5565; } .cal-copy:hover { background: #eceef1; } .cal-copy__icon { display: inline-flex; } .cal-copy svg { width: 12px; height: 12px; display: block; } .cal-copy.is-copied { background: #ecfdf5; border-color: #a7f3d0; color: #059669; } .cal-dropbox { border: 1px solid transparent; background-image: linear-gradient(165deg, rgb(245, 166, 35), rgb(225, 48, 108)); color: #fff; text-decoration: none; } .cal-dropbox:hover { filter: brightness(1.05); } .cal-dropbox--disabled { background-image: none; background: #f3f4f6; border-color: var(--card-border); color: #9ca3af; cursor: not-allowed; } .cal-dropbox--disabled:hover { filter: none; } .cal-dropbox svg { width: 12px; height: 12px; display: block; } .cal-copy:focus-visible, .cal-dropbox:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .day-card__caption { margin: 12px 0 0; font-size: 13px; line-height: 21.125px; color: #4a5565; white-space: pre-wrap; } @media (max-width: 560px) { .day-card__actions { width: 100%; } } /* ========================================================= Language Guide page ========================================================= */ #lg-root { margin-top: 32px; display: flex; flex-direction: column; gap: 32px; } /* "One Rule" purple callout */ .lg-callout { background: #faf5ff; border: 1px solid #f3e8ff; border-radius: 16px; padding: 25px; } .lg-callout__title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.65px; text-transform: uppercase; color: #9810fa; } .lg-callout__body { margin: 8px 0 0; font-size: 15px; font-weight: 500; line-height: 24.375px; color: #59168b; } .lg-callout__note { margin: 12px 0 0; font-size: 13px; line-height: 19.5px; color: #8200db; } /* Generic section card */ .lg-card { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1); padding: 25px; } .lg-card__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--ink); } .lg-emoji { font-size: 18px; line-height: 1; } .lg-subtitle { margin: 8px 0 0; font-size: 13px; line-height: 19.5px; color: #4a5565; } /* Numbered "Never Say" list */ .lg-numbered { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .lg-num-item { display: flex; gap: 10px; font-size: 13px; line-height: 21.125px; color: #4a5565; } .lg-num { flex-shrink: 0; min-width: 20px; font-weight: 700; color: #ff2056; } /* Bulleted lists */ .lg-bullets { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .lg-bullets li { position: relative; padding-left: 18px; font-size: 13px; line-height: 21.125px; color: #4a5565; } .lg-bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); } .lg-bullets--green { --dot: #00d492; } .lg-bullets--pink { --dot: #ff637e; } /* "Say This, Not That" table */ .saynot { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); overflow: hidden; } .saynot__title { padding: 24px 24px 16px; font-size: 16px; font-weight: 700; color: var(--ink); } .saynot-table { display: grid; grid-template-columns: 1fr 1fr; } .saynot__head { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #f9fafb; border-bottom: 1px solid rgba(27, 39, 42, 0.06); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; } .saynot__head--say { color: #007a55; border-right: 1px solid rgba(27, 39, 42, 0.06); } .saynot__head--not { color: #ec003f; } .saynot__say, .saynot__not { padding: 14px 20px; font-size: 13px; line-height: 21.125px; border-bottom: 1px solid rgba(27, 39, 42, 0.06); } .saynot__say { background: rgba(236, 253, 245, 0.3); color: #006045; border-right: 1px solid rgba(27, 39, 42, 0.06); } .saynot__not { color: #c70036; } .saynot-table > *:nth-last-child(-n + 2) { border-bottom: 0; } /* Redirect script blocks */ .lg-scripts { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; } .lg-script { margin: 0; padding: 12px 16px 12px 20px; background: #f9fafb; border-left: 4px solid #dab2ff; border-radius: 0 14px 14px 0; font-size: 13px; font-style: italic; line-height: 21.125px; color: #4a5565; } .lg-confidential { margin: 0; text-align: center; font-size: 11px; font-weight: 500; line-height: 16.5px; color: var(--muted); } @media (max-width: 560px) { .saynot__say, .saynot__not { padding: 12px 12px; } .saynot__title { padding: 20px 16px 14px; } .saynot__head { padding: 10px 12px; } } /* ========================================================= Terms & Trust page ========================================================= */ #terms-root { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; } /* Intro / preamble card */ .terms-intro { background: #fff7ed; border: 1px solid #ffedd5; border-radius: 16px; padding: 25px; } .terms-intro__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.65px; text-transform: uppercase; color: #ea580c; } .terms-intro__entity { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); } .terms-intro__body { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: #57534e; } .terms-download { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; background-image: linear-gradient(161deg, rgb(245, 166, 35), rgb(249, 115, 22)); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .terms-download:hover { filter: brightness(1.05); transform: translateY(-1px); } .terms-download svg { width: 14px; height: 14px; } /* Numbered term sections (reuse .lg-card) */ .terms-card__title { align-items: flex-start; } .terms-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background-image: linear-gradient(161deg, rgb(245, 166, 35), rgb(249, 115, 22)); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; } .terms-body { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: #4a5565; } /* ========================================================= HeyDrew Affiliate Guide page ========================================================= */ #ag-root { margin-top: 28px; display: flex; flex-direction: column; gap: 30px; } /* Header */ .ag-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ag-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #bfdbfe; color: #1e3a8a; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; } .ag-download { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 14px; background-image: linear-gradient(161deg, rgb(96, 165, 250), rgb(37, 99, 235)); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: filter 0.15s ease, transform 0.15s ease; } .ag-download:hover { filter: brightness(1.06); transform: translateY(-1px); } .ag-download svg { width: 14px; height: 14px; } .ag-title { margin: 16px 0 0; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink); } .ag-subtitle { margin: 8px 0 0; max-width: 640px; font-size: 15px; line-height: 22px; color: #475569; } .ag-rainbow { height: 4px; margin-top: 18px; border-radius: 999px; background: var(--rainbow); } .ag-rainbow--foot { margin: 8px 0 0; } /* Green mandate banner */ .ag-banner { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 14px; background-image: linear-gradient(90deg, #22c55e, #16a34a); color: #fff; font-size: 15px; } .ag-banner__icon { flex-shrink: 0; display: inline-flex; } .ag-banner__icon svg { width: 20px; height: 20px; } .ag-banner__lead { font-weight: 700; } .ag-banner__rest { font-weight: 700; color: #0b5b2e; } /* Generic block + heading + paragraph */ .ag-h { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); } .ag-p { margin: 0 0 10px; font-size: 14px; line-height: 22px; color: #475569; } .ag-p:last-child { margin-bottom: 0; } /* Two-column layout */ .ag-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Who should you send? */ .ag-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ag-who__item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #334155; } .ag-who__ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #e0f2fe; color: #0369a1; } .ag-who__ic svg { width: 17px; height: 17px; } /* Best Fit */ .ag-bestfit { background: #bae6fd; border-radius: 16px; padding: 24px; min-height: 120px; display: flex; align-items: flex-start; } .ag-bestfit p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: #0c4a6e; } /* Why it's different — comparison */ .ag-compare { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; } .ag-compare__col { padding: 22px; display: flex; flex-direction: column; } .ag-compare__col--trad { background-image: linear-gradient(135deg, #1e293b, #0f172a); } .ag-compare__col--hd { background-image: linear-gradient(135deg, #16a34a, #15803d); } .ag-compare__label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.65); } .ag-compare__col--hd .ag-compare__label { color: rgba(255, 255, 255, 0.82); } .ag-compare__headline { margin-top: 6px; font-size: 20px; font-weight: 700; color: #fff; } .ag-compare__body { margin-top: 10px; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.82); } .ag-note { margin: 14px 0 0; font-size: 14px; line-height: 22px; color: #334155; } /* Say This / If they ask — light-blue container with cards */ .ag-bluebox { background: #e0f2fe; border-radius: 18px; padding: 20px; } .ag-cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ag-qcard { background: #f8fbff; border: 1px solid #e0f2fe; border-radius: 14px; padding: 20px; } .ag-qcard__label { display: block; font-size: 14px; font-weight: 600; color: #64748b; } .ag-qcard__text { margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 21px; color: #1e293b; } /* Do / Don't */ .ag-dd { display: flex; flex-direction: column; gap: 10px; } .ag-dd__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .ag-dd__head svg { width: 18px; height: 18px; } .ag-dd__head--do { color: #15803d; } .ag-dd__head--dont { color: #b91c1c; } .ag-bar { padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #fff; } .ag-bar--do { background: #16a34a; } .ag-bar--dont { background: #dc2626; } /* The affiliate success formula */ .ag-formula { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; } .ag-step { flex: 1 1 0; min-width: 150px; background: #e0f2fe; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .ag-step__label { font-size: 14px; font-weight: 600; color: #64748b; } .ag-step__text { font-size: 15px; font-weight: 700; color: #0c4a6e; } .ag-formula__sep { display: flex; align-items: center; color: #3b82f6; } .ag-formula__sep svg { width: 20px; height: 20px; } /* Approved channels */ .ag-pills { display: flex; flex-wrap: wrap; gap: 12px; } .ag-pill { padding: 12px 24px; border-radius: 999px; background: #eff6ff; border: 1px solid #e0f2fe; font-size: 14px; font-weight: 600; color: #1e293b; } /* Approved assets */ .ag-assets { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ag-assets .ag-p { flex: 1 1 260px; margin: 0; } .ag-assets__link { flex: 0 0 auto; padding: 16px 28px; border-radius: 12px; background: #bae6fd; color: #0c4a6e; font-size: 15px; font-weight: 700; text-decoration: underline; } /* Compensation & tracking */ .ag-comp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ag-comp__card { background-image: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 4px; } .ag-comp__label { font-size: 13px; font-weight: 600; color: #94a3b8; } .ag-comp__value { font-size: 16px; font-weight: 700; color: #fff; } .ag-comp__sub { font-size: 12px; color: #cbd5e1; } .ag-linkcard { margin-top: 16px; background-image: linear-gradient(135deg, #1e293b, #0f172a); border-radius: 16px; padding: 22px; } .ag-linkcard__title { display: block; font-size: 15px; font-weight: 700; color: #fff; } .ag-linkcard__input { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: #fff; color: #64748b; font-size: 14px; } .ag-linkcard__note { margin: 12px 0 0; font-size: 13px; line-height: 19px; color: #cbd5e1; } /* Disclaimer */ .ag-disclaimer { margin: 0; font-size: 12px; line-height: 18px; color: var(--muted); } @media (max-width: 640px) { .ag-2col, .ag-cards2, .ag-compare { grid-template-columns: 1fr; } .ag-comp { grid-template-columns: 1fr 1fr; } .ag-formula__sep { display: none; } .ag-step { min-width: 0; } .ag-title { font-size: 22px; } .ag-assets__link { width: 100%; text-align: center; } }