/* ============================================================ HostMyBlog — components & sections (v3) ============================================================ */ [data-reveal], [data-reveal].in { opacity: 1; transform: none; } /* ---- chips / tags ---- */ .tag { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.45em 0.8em; border-radius: 999px; background: var(--violet-12); color: #A83112; font-weight: 500; } .tag .ic { font-size: 1.05em; } .tag--coral { background: var(--coral-12); color: var(--coral-deep); } .tag--teal { background: var(--teal-12); color: #0c7a55; } .tag--ghost { background: rgba(255,255,255,0.12); color: #fff; } /* ============================================================ MARQUEE / TICKER ============================================================ */ .ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); } .ticker--night { background: var(--night-2); border-color: rgba(255,255,255,0.08); } .ticker-track { display: flex; align-items: center; width: max-content; animation: ticker 38s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 16px 0; font-size: 0.96rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; } .ticker--night .ticker-item { color: rgba(234,230,245,0.8); } .ticker-item .ic { color: var(--coral); font-size: 1.15rem; } .ticker-sep { display: inline-flex; align-items: center; justify-content: center; padding: 0 28px; font-size: 0.66rem; line-height: 1; color: var(--violet); opacity: 0.55; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ============================================================ HERO ============================================================ */ .hero { padding-top: clamp(118px, 16vh, 172px); padding-bottom: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; } .hero-glow { position: absolute; top: -10%; right: -8%; width: 60vw; max-width: 760px; aspect-ratio: 1; background: var(--grad); filter: blur(120px); opacity: 0.16; border-radius: 50%; pointer-events: none; z-index: 0; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(32px, 5vw, 70px); align-items: center; } .hero h1 { margin-top: 22px; line-height: 1.05; } .hero h1 .grad-text { display: inline-block; padding-bottom: 0.08em; } .hero .lead { margin-top: 30px; max-width: 47ch; } .hero-ctas { display: flex; align-items: center; gap: 20px; margin-top: 34px; flex-wrap: wrap; } /* ============================================================ CARE REPORT CARD ============================================================ */ .care-card { background: var(--card); border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; } .care-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--night); color: #fff; } .care-card__top .label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; white-space: nowrap; } .care-card__top .month { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; white-space: nowrap; margin-top: 2px; } .care-pill { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; flex-shrink: 0; font-family: var(--font-mono); font-size: 0.7rem; padding: 0.42em 0.8em; border-radius: 999px; background: var(--teal); color: #04231a; font-weight: 600; } .care-card__body { padding: 22px; display: flex; flex-direction: column; gap: 15px; } .care-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .care-stat { background: var(--bg); border-radius: 12px; padding: 14px; } .care-stat .n { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .care-stat .k { font-size: 0.73rem; color: var(--muted); margin-top: 4px; } .care-line { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; padding: 9px 0; border-top: 1px solid var(--line-2); } .care-line:first-of-type { border-top: none; } .care-line .ic { color: var(--teal); font-size: 1.25rem; margin-top: 1px; } .care-line .t b { color: var(--ink); font-weight: 600; } .care-sign { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-2); } .care-sign .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; } .care-sign .who { font-size: 0.85rem; } .care-sign .who b { color: var(--ink); } .care-sign .who span { color: var(--muted); display: block; font-size: 0.78rem; } /* ============================================================ WITHOUT / WITH ============================================================ */ .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; align-items: stretch; } .cmp-col { border-radius: 20px; padding: 32px; } .cmp-col--without { background: var(--card); border: 1px solid var(--line); } .cmp-col--with { background: var(--night); color: #F3ECDF; position: relative; overflow: hidden; } .cmp-col--with::after { content: ""; position: absolute; top: -40%; right: -20%; width: 60%; aspect-ratio: 1; background: var(--grad); filter: blur(80px); opacity: 0.25; border-radius: 50%; } .cmp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; position: relative; } .cmp-head .badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; } .cmp-col--without .badge { background: var(--coral-12); color: var(--coral-deep); } .cmp-col--with .badge { background: var(--grad); color: #fff; } .cmp-head h3 { font-family: var(--font-sans); font-size: 1.12rem; font-weight: 600; } .cmp-col--with .cmp-head h3 { color: #fff; } .cmp-col--without .cmp-head h3 { color: var(--ink); } .cmp-head span { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 400; font-family: var(--font-mono); margin-top: 2px; } .cmp-col--with .cmp-head span { color: rgba(234,230,245,0.55); } .cmp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; font-size: 0.97rem; line-height: 1.45; border-top: 1px solid var(--line-2); position: relative; } .cmp-col--with .cmp-list li { border-color: rgba(255,255,255,0.1); color: rgba(234,230,245,0.92); } .cmp-list li:first-child { border-top: none; } .cmp-list .ic { font-size: 1.2rem; margin-top: 1px; } .cmp-col--without .cmp-list .ic { color: var(--coral); } .cmp-col--with .cmp-list .ic { color: var(--teal); } /* ============================================================ FEATURE CARDS (even height title for alignment) ============================================================ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; } .feature-grid--4 { grid-template-columns: repeat(4, 1fr); } .feature-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .feature-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; } .feature-ico .ic { font-size: 1.6rem; } .i-blue { background: var(--blue-12); color: var(--blue); } .i-violet { background: var(--violet-12); color: var(--violet); } .i-coral { background: var(--coral-12); color: var(--coral-deep); } .i-teal { background: var(--teal-12); color: #0c7a55; } .i-gold { background: var(--gold-12); color: #a9760a; } .i-pink { background: var(--pink-12); color: #C0431A; } .feature-card h3 { font-size: 1.22rem; min-height: 2.5em; display: flex; align-items: flex-end; } .feature-card p { margin-top: 9px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; } .feature-card.is-feature { background: var(--night); border-color: var(--night); position: relative; overflow: hidden; } .feature-card.is-feature::after { content: ""; position: absolute; bottom: -30%; right: -20%; width: 70%; aspect-ratio: 1; background: var(--grad); filter: blur(70px); opacity: 0.3; border-radius: 50%; } .feature-card.is-feature h3 { color: #fff; } .feature-card.is-feature p { color: rgba(234,230,245,0.8); position: relative; } .feature-card.is-feature .feature-ico { background: rgba(255,255,255,0.12); color: #fff; position: relative; } .feature-card.is-feature .tag { position: absolute; top: 22px; right: 22px; margin: 0; z-index: 1; background: rgba(255,255,255,0.16); color: #fff; } /* ============================================================ SOLUTIONS ============================================================ */ .sol-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; } .sol-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; position: relative; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .sol-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(23,19,31,0.18); } .sol-card:hover .sol-num { color: rgba(23,19,31,0.22); } .sol-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .sol-ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; } .sol-ico .ic { font-size: 1.55rem; } .sol-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: rgba(23,19,31,0.13); line-height: 1; } .sol-card h3 { font-size: 1.2rem; font-family: var(--font-sans); font-weight: 600; color: var(--ink); } .sol-card p { font-size: 0.93rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; flex: 1; } .sol-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); } .sol-req { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--coral); transition: gap 0.2s var(--ease); } .sol-req:hover { gap: 10px; } .sol-req .ic { font-size: 1rem; } .sol-foot { display: flex; align-items: center; gap: 18px; justify-content: center; margin-top: 30px; flex-wrap: wrap; color: var(--ink-soft); font-size: 0.97rem; } .wa-cta-row { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; } /* ============================================================ PRICING — fixed-height rows for perfect alignment ============================================================ */ .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; align-items: stretch; } .price-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 34px; display: flex; flex-direction: column; } .price-card.is-pro { background: var(--night); border-color: var(--night); color: #F3ECDF; position: relative; overflow: hidden; } .price-card.is-pro::after { content: ""; position: absolute; top: -25%; right: -15%; width: 55%; aspect-ratio: 1; background: var(--grad); filter: blur(80px); opacity: 0.28; border-radius: 50%; } .price-card > * { position: relative; } .p-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-height: 2.6em; display: flex; align-items: flex-start; line-height: 1.3; } .price-card.is-pro .p-eyebrow { color: rgba(234,230,245,0.6); } .p-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--ink); margin-top: 6px; } .price-card.is-pro .p-name { color: #fff; } .price-amt { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; min-height: 64px; } .price-amt .big { font-family: var(--font-display); font-size: 3rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .price-card.is-pro .price-amt .big { color: #fff; font-size: 2.4rem; } .price-amt .per { color: var(--muted); font-size: 0.95rem; } .price-card.is-pro .price-amt .per { color: rgba(234,230,245,0.65); } .price-sub { color: var(--ink-soft); font-size: 0.9rem; min-height: 3em; } .p-trust { margin-top: 10px; text-align: center; font-size: 0.78rem; color: var(--muted); } .price-card.is-pro .price-sub { color: rgba(234,230,245,0.7); } .price-tagline { margin-top: 16px; color: var(--ink); font-size: 0.98rem; min-height: 3.2em; } .price-card.is-pro .price-tagline { color: rgba(234,230,245,0.88); } .price-incl { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .price-card.is-pro .price-incl { border-color: rgba(255,255,255,0.18); color: rgba(234,230,245,0.6); } .price-list { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; flex: 1; } .price-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.93rem; line-height: 1.4; } .price-list .ic { color: var(--teal); font-size: 1.2rem; margin-top: 1px; } .price-list li b { color: var(--ink); font-weight: 600; } .price-card.is-pro .price-list li { color: rgba(234,230,245,0.9); } .price-card.is-pro .price-list li b { color: #fff; } .price-list li.plus { color: var(--muted); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; margin-block: 2px; } .price-card.is-pro .price-list li.plus { color: rgba(234,230,245,0.55); } .price-card .btn { margin-top: 26px; } .price-note { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 13px; font-size: 0.82rem; color: var(--muted); } .price-card.is-pro .price-note { color: rgba(234,230,245,0.6); } .agency-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 30px 34px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); flex-wrap: wrap; } .agency-strip p { color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; flex: 1 1 auto; min-width: 0; } .agency-strip .btn { flex-shrink: 0; } .agency-strip span { display: block; color: var(--ink-soft); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 400; margin-top: 4px; } /* ============================================================ TESTIMONIALS (real) ============================================================ */ .tcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; } .tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; } .tcard .stars { color: var(--gold); font-size: 0.95rem; display: flex; gap: 2px; } .tcard blockquote { font-size: 1.04rem; line-height: 1.5; color: var(--ink); margin-top: 14px; flex: 1; } .tcard blockquote b { font-weight: 600; } .tcard .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); } .tcard .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: #fff; flex-shrink: 0; } .tcard .who b { color: var(--ink); font-size: 0.92rem; display: block; } .tcard .who span { color: var(--muted); font-size: 0.8rem; font-family: var(--font-mono); } .tverified { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; font-size: 0.84rem; color: var(--ink-soft); } .tverified .ic { color: var(--teal); } /* ============================================================ FOUNDERS ============================================================ */ .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .founder-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .founder-grid--3 { grid-template-columns: 1fr 1fr; } } .founder { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; } .founder:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(20,20,40,.28); border-color: transparent; } /* gradient cover band */ .founder__cover { position: relative; height: 110px; background: linear-gradient(135deg, var(--c1, #FF8A52), var(--c2, #FB6A24)); overflow: visible; border-radius: var(--radius) var(--radius) 0 0; } .founder__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(255,255,255,.32), transparent 42%), radial-gradient(circle at 82% 78%, rgba(255,255,255,.18), transparent 46%); opacity: .9; transition: transform .9s cubic-bezier(.2,.8,.2,1); } .founder:hover .founder__cover::after { transform: scale(1.35) translate(6%, -6%); } /* circular avatar overlapping the cover */ .founder__avatar { position: absolute; left: 28px; bottom: -44px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; background: linear-gradient(135deg, var(--c1, #FF8A52), var(--c2, #FB6A24)); border: 5px solid var(--card); box-shadow: 0 12px 28px -10px rgba(20,20,40,.55); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 3; } .founder__avatar img { width: 100%; height: 100%; object-fit: cover; } .founder:hover .founder__avatar { transform: translateY(-4px) scale(1.06); } .founder__body { padding: 62px 28px 28px; } .founder h3 { font-size: 1.3rem; } .founder .role { font-family: var(--font-mono); font-size: 0.74rem; color: var(--coral-deep); letter-spacing: 0.03em; margin-top: 3px; text-transform: uppercase; } .founder p { font-size: 0.92rem; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; } .founder-closer { margin-top: 30px; text-align: center; max-width: 62ch; margin-inline: auto; color: var(--ink-soft); font-size: 1.06rem; } .founder-closer b { color: var(--ink); } /* subtle hover micro-interactions */ .stat-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: rgba(23,19,31,0.16); } .qa { transition: border-color .25s var(--ease); } .qa:hover { border-top-color: var(--coral-deep); } /* ============================================================ WE DON'T DO ============================================================ */ .dont-list { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; } .dont-item { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); } .dont-item .ic { color: var(--coral); font-size: 1.4rem; margin-top: 2px; } .dont-item h3 { font-size: 1.12rem; font-family: var(--font-sans); font-weight: 600; color: var(--ink); } .dont-item p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; } .dont-closer { margin-top: 30px; font-style: italic; color: var(--muted); font-size: 1.05rem; } /* ============================================================ WHATSAPP COMMUNITY ============================================================ */ .wa-band { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; background: var(--night); border-radius: 26px; padding: clamp(34px,4vw,56px); color: #F3ECDF; position: relative; overflow: hidden; } .wa-band::after { content: ""; position: absolute; bottom: -40%; left: -10%; width: 50%; aspect-ratio: 1; background: var(--grad); filter: blur(90px); opacity: 0.3; border-radius: 50%; } .wa-band > * { position: relative; } .wa-band h2 { color: #fff; } .wa-band p { color: rgba(234,230,245,0.82); margin-top: 16px; font-size: 1.05rem; line-height: 1.55; max-width: 46ch; } .wa-visual { display: flex; flex-direction: column; gap: 12px; } .wa-bubble { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px 16px 16px 4px; padding: 13px 17px; font-size: 0.94rem; max-width: 90%; } .wa-bubble.me { background: var(--grad); border: none; color: #fff; border-radius: 16px 16px 4px 16px; align-self: flex-end; } .wa-bubble .who { font-size: 0.72rem; font-weight: 600; opacity: 0.85; margin-bottom: 3px; display: block; } .news-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 26px; } .news-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(234,230,245,0.55); } .news-list { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .news-list li { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 0.98rem; font-weight: 500; } .news-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .news-ico .ic { font-size: 1.2rem; } .news-ico.n-teal { background: rgba(16,185,129,0.18); color: #35d6a4; } .news-ico.n-violet { background: rgba(227,154,43,0.24); color: #FBC0A0; } .news-ico.n-coral { background: rgba(255,153,51,0.2); color: #FFAB8A; } .news-ico.n-gold { background: rgba(232,163,23,0.22); color: #f3c265; } /* ============================================================ CONTACT CTA ============================================================ */ .contact-cta { text-align: center; position: relative; z-index: 1; } .contact-cta .h2 { margin-top: 18px; } .contact-cta .promise { max-width: 54ch; margin: 22px auto 0; color: rgba(234,230,245,0.85); font-size: 1.15rem; line-height: 1.55; } .contact-cta .promise b { color: #fff; } .contact-cta .cta-row { display: flex; gap: 16px; justify-content: center; margin-top: 36px; flex-wrap: wrap; } @media (max-width: 900px) { .feature-grid, .tcard-grid { grid-template-columns: 1fr 1fr; } .hero-grid, .price-grid, .founder-grid { grid-template-columns: 1fr; } .feature-card h3 { min-height: 0; } } @media (max-width: 760px) { .cmp-grid, .sol-grid, .wa-band, .dont-list { grid-template-columns: 1fr; } .wa-visual { display: none; } .price-amt, .p-eyebrow, .price-sub, .price-tagline { min-height: 0; } } @media (max-width: 620px) { .feature-grid, .tcard-grid { grid-template-columns: 1fr; } .care-stat-row { grid-template-columns: 1fr 1fr 1fr; } .founder { flex-direction: column; } } .lead-form select{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 14px;-webkit-appearance:none;appearance:none;cursor:pointer;} .lead-form select:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-12);} .sol-foot{grid-column:1 / -1;} /* ---- de-slop: kill gradient-glow blobs, add editorial film grain ---- */ .hero-glow{ display:none !important; } body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.055; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='hmb-grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/wp-content/themes/hostmyblog/assets/css/%23hmb-grain)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce){ body::after{ opacity:0.04; } } /* ---- on-your-domain: subfolder vs subdomain ---- */ .url-compare{ display:flex; flex-direction:column; gap:12px; } .url-row{ display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:13px; border:1px solid var(--line); background:var(--card); } .url-row--good{ border-color:rgba(253,90,30,0.35); box-shadow:0 16px 34px -24px rgba(253,90,30,0.55); } .url-ico{ display:flex; flex:none; } .url-ico .ic{ width:26px; height:26px; } .url-row--bad .url-ico{ color:#C0392B; } .url-row--good .url-ico{ color:var(--coral); } .url-text{ display:flex; flex-direction:column; gap:4px; min-width:0; } .url-text code{ font-family:var(--font-mono, ui-monospace, monospace); font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; } .url-row--bad .url-text code{ text-decoration:line-through; text-decoration-color:rgba(192,57,43,0.55); text-decoration-thickness:2px; } .url-text code .dim{ color:var(--ink-soft); font-weight:400; } .url-note{ font-size:0.82rem; color:var(--ink-soft); } .url-arrow{ display:flex; justify-content:center; color:var(--ink-soft); } .url-arrow .ic{ width:20px; height:20px; transform:rotate(90deg); } /* newsletter nav link */ .nav-links button.nav-link, button.nav-link--news{ background:none; border:none; cursor:pointer; font:inherit; } .nav-links .nav-link--news{ color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-weight:600; transition:border-color .18s var(--ease), color .18s var(--ease); } .nav-links .nav-link--news .ic{ color:var(--coral); } .nav-links .nav-link--news:hover{ border-color:var(--coral); color:var(--coral); } /* comment form polish */ .comment-form{ padding:24px; } .comment-form .cf-foot{ margin-top:18px; } /* ---- the-cited landing ---- */ .modal.modal--inline{ position:static; display:block; padding:0; z-index:auto; overflow:visible; } .modal--inline::before{ display:none; } .modal--inline .modal-card{ width:100%; max-width:none; background:var(--card); box-shadow:0 30px 60px -30px rgba(23,19,31,0.28); animation:none; margin:0; } .modal--inline .modal-close{ display:none; } .cited-points{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:24px; padding:0; } .cited-points li{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:0.98rem; } .cited-points li .ic{ color:var(--coral); width:22px; height:22px; flex:none; } /* ---- the-cited sections v2 ---- */ .flow-diagram{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:44px; flex-wrap:wrap; } .flow-node{ flex:1 1 200px; max-width:250px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 20px; text-align:center; display:flex; flex-direction:column; gap:5px; } .flow-node b{ font-size:1.05rem; color:var(--ink); } .flow-node > span:last-child{ color:var(--ink-soft); font-size:0.85rem; } .flow-ico{ width:46px; height:46px; margin:0 auto 10px; display:grid; place-items:center; border-radius:12px; background:var(--bg); } .flow-ico .ic{ width:22px; height:22px; color:var(--coral); } .flow-node--hot{ background:var(--night); border-color:var(--night); } .flow-node--hot b{ color:#fff; } .flow-node--hot > span:last-child{ color:rgba(255,255,255,0.7); } .flow-node--hot .flow-ico{ background:rgba(255,255,255,0.12); } .flow-arrow .ic{ width:22px; height:22px; color:var(--muted); } .flow-caption{ max-width:62ch; margin:34px auto 0; text-align:center; color:var(--ink-soft); line-height:1.65; } @media(max-width:720px){ .flow-diagram{ flex-direction:column; align-items:stretch; } .flow-node{ max-width:none; } .flow-arrow{ text-align:center; } .flow-arrow .ic{ transform:rotate(90deg); } } .big-stat{ display:flex; align-items:center; gap:36px; background:var(--night); color:#F3ECDF; border-radius:20px; padding:46px 52px; flex-wrap:wrap; } .big-stat-n{ font-family:var(--font-display); font-size:5rem; line-height:0.9; color:var(--coral); font-weight:600; flex:none; } .big-stat-copy{ flex:1 1 300px; font-size:1.18rem; line-height:1.55; } .big-stat-copy b{ color:#fff; } .big-stat-src{ display:block; margin-top:12px; font-size:0.78rem; color:rgba(255,255,255,0.5); font-family:var(--font-mono); } .issue-list{ margin-top:40px; border-top:1px solid var(--line); } .issue-row{ display:flex; align-items:flex-start; gap:24px; padding:26px 4px; border-bottom:1px solid var(--line); } .issue-num{ font-family:var(--font-display); font-size:2.1rem; color:var(--coral); font-weight:600; line-height:1; min-width:54px; } .issue-body{ flex:1; } .issue-body h3{ font-size:1.25rem; } .issue-body p{ color:var(--ink-soft); margin-top:6px; max-width:62ch; } .issue-ico{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--bg); } .issue-ico .ic{ width:22px; height:22px; color:var(--ink); } @media(max-width:640px){ .issue-ico{ display:none; } .issue-num{ font-size:1.7rem; min-width:42px; } .issue-row{ gap:16px; } } .chairs{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px; } .chair{ padding:10px 30px; text-align:center; } .chair + .chair{ border-left:1px solid var(--line); } .chair .feature-ico{ margin:0 auto 16px; } .chair h3{ font-size:1.2rem; } .chair p{ color:var(--ink-soft); margin-top:8px; font-size:0.95rem; } @media(max-width:760px){ .chairs{ grid-template-columns:1fr; } .chair + .chair{ border-left:none; border-top:1px solid var(--line); } .chair{ padding:28px 16px; } } /* cited hero founder row */ .cited-by{ display:flex; align-items:center; gap:14px; margin-top:40px; color:var(--ink-soft); font-size:0.92rem; max-width:34ch; } .cited-avatars{ display:flex; flex:none; } .cited-avatars .ca{ width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:0.9rem; border:2px solid var(--bg); margin-left:-10px; } .cited-avatars .ca:first-child{ margin-left:0; } /* about founder cards a touch larger */ .page-template-template-about .founder__avatar{ width:104px; height:104px; bottom:-50px; left:30px; } .page-template-template-about .founder__body{ padding-top:64px; } /* ===== go-live fixes (ported from Aug 5 static build) ===== */ .hero-figure{ position:relative; margin:0 0 0 auto; max-width:420px; } .hero-figure .hero-info{ width:100%; height:auto; display:block; filter:drop-shadow(0 22px 50px rgba(23,19,31,.16)); } @media (max-width:980px){ .hero-figure{ margin-inline:0; } } .founder__avatar, .founder__avatar img{ filter:grayscale(1) contrast(1.04); } body.modal-open .woot-widget-bubble, body.modal-open .woot--bubble-holder, body.modal-open .woot-widget-holder{ display:none !important; } :focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:inherit; } .drawer{ visibility:hidden; transition:transform .32s var(--ease-out), visibility 0s .32s; } .drawer.is-open{ visibility:visible; transform:translateX(0); transition:transform .32s var(--ease-out), visibility 0s 0s; } .arch-row{ margin-inline:-18px; padding-inline:18px; } .arch-row:hover{ padding-inline:18px; } /* ===== go-live defect fixes ===== */ /* submit label overflowed its pill at 375 */ @media (max-width:520px){ .modal .btn--block, .modal button[type=submit]{ white-space:normal; line-height:1.35; padding-inline:18px; } } /* CTA contrast: white on coral measured 3.15:1, needs 4.5:1 */ :root{ --coral-cta:#CF4918; } .btn--primary{ background:var(--coral-cta) !important; } .btn--primary:hover{ background:#B83F14 !important; } /* footer muted text was 4.41:1 */ .footer .footer-col h4, .footer-legal, .footer-copy{ color:#8E8A8D; } /* ============================================================ REVIEW PHOTOS + AGGREGATE PROOF Self-hosted reviewer photos from facebook.com/hostmyblog/reviews. The initial letter stays in the DOM behind the photo, so a failed image load falls back to the lettered avatar instead of a gap. ============================================================ */ .tcard .avatar, .avatar--photo { position: relative; overflow: hidden; } .avatar--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .rev-agg { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 0.88rem; text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease; } .rev-agg:hover { border-color: var(--brand, var(--teal)); transform: translateY(-1px); } .rev-agg .stars { color: var(--gold); display: flex; gap: 2px; } .rev-agg-txt b { font-weight: 600; } .rev-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.88rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; } .rev-all:hover { border-bottom-color: currentColor; } /* Full reviews page: quotes vary from 6 to 300 words, so let them flow in columns instead of forcing every card in a row to the tallest one. */ .tcard-grid--flow { display: block; columns: 3; column-gap: 20px; margin-top: 40px; } .tcard-grid--flow .tcard { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 20px; display: block; } .tcard-grid--flow .tcard blockquote p { margin: 0 0 0.85em; } .tcard-grid--flow .tcard blockquote p:last-child { margin-bottom: 0; } .tcard-grid--flow .tcard .who { display: flex; } @media (max-width: 900px) { .tcard-grid--flow { columns: 2; } } @media (max-width: 620px) { .tcard-grid--flow { columns: 1; } } /* Byline avatars on The Cited: real team photos, monochrome to match .founder__avatar sitewide. The initial stays under the photo so a failed image degrades to a letter rather than an empty circle. */ .cited-avatars .ca { position: relative; overflow: hidden; } .cited-avatars .ca img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; filter: grayscale(1) contrast(1.04); } /* author bio, added 2026-08-26 */ .author-card .ac-bio{margin:.55rem 0 .75rem;font-size:.98rem;line-height:1.62;color:var(--ink,#1B1710);opacity:.82;max-width:62ch;} /* ============================================================ Article image lightbox — added 2026-08-27 ------------------------------------------------------------ single-docs.php renders `
`, so every bare `.prose` rule also lands on docs. A previous 960px figure breakout leaked that way and pushed docs screenshots 480px out of their column. Every rule that touches an in-column element here is therefore `.prose:not(.docs-prose)`. Docs are also excluded server-side (the figure markup is only rewritten on `is_singular('post')`), so this is belt and braces. Palette note: the brief asked for plum #3D2645 / cream #FAF5EE / coral #D97757, but the live theme's tokens are an orange trio (--coral is #FD5A1E) with no plum. Tokens win where they exist so the viewer matches the site; plum is used only for the control chips, where it reads as neutral dark. ============================================================ */ /* iOS Safari only synthesises a click on a non-interactive element when it looks clickable; the onclick attribute plus a non-default cursor both count. touch-action removes the 300ms double-tap-zoom wait. The 44px