/* ============================================================ ESP "Short Shot" article format Hook -> Story -> Why It Matters -> Tap, + vertical-video companion. Mobile: stacked. Desktop: hero with overlaid headline + two columns. Colour follows the theme: light by default, dark under body.zox-dark. Scoped under .zox-ss so it never leaks into the rest of the theme. ============================================================ */ .zox-ss { --ss-accent: #c21f25; /* ESP brand red */ --ss-on-accent: #ffffff; --ss-ink: #14171a; /* primary text (light mode) */ --ss-ink-soft: #5b6570; /* secondary text */ --ss-line: #e7e9ec; /* hairlines */ --ss-surface: #f5f6f8; /* cards (why block) */ --ss-radius: 18px; --ss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; float: none !important; width: 100%; background: transparent; /* inherit the page (white, or #111 in night mode) */ color: var(--ss-ink); font-family: var(--ss-font); -webkit-font-smoothing: antialiased; } /* ---- night mode: follow the theme's .zox-dark ------------- ZoxPress puts the night-mode class on the #zox-site wrapper (not ), and prints it server-side when zox_dark_mode=3, so we match .zox-dark as an ancestor. */ .zox-dark .zox-ss { --ss-ink: #efefef; --ss-ink-soft: #9aa0a8; --ss-line: rgba(255,255,255,.12); --ss-surface: #1b1c1f; } .zox-ss * { box-sizing: border-box; } .zox-ss-inner { max-width: 1180px; margin: 0 auto; padding: 26px 20px 72px; } /* ---- hero ------------------------------------------------- */ .zox-ss-hero { margin-bottom: 30px; } .zox-ss-hero__img { line-height: 0; border-radius: var(--ss-radius); overflow: hidden; } .zox-ss-hero__img img { width: 100%; height: auto; display: block; } .zox-ss-hero__head { padding-top: 18px; } .zox-ss-cat { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 6px; background: var(--ss-accent); color: #fff !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; } .zox-ss-hook { margin: 0; font-size: clamp(2rem, 6.4vw, 3rem); line-height: 1.04; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; color: var(--ss-ink); } .zox-ss-byline { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--ss-ink-soft); } .zox-ss-dot { opacity: .5; } /* ---- grid (mobile = single column) ------------------------ */ .zox-ss-grid { display: block; } .zox-ss-col-rail { margin-top: 28px; } /* ---- story: one idea per line ----------------------------- */ .zox-ss-story { margin: 0 0 28px; } .zox-ss-line { margin: 0 0 26px; font-size: clamp(1.2rem, 3.6vw, 1.5rem); line-height: 1.38; font-weight: 500; color: var(--ss-ink); } .zox-ss-line:last-child { margin-bottom: 0; } .zox-ss-line-key { color: var(--ss-accent); font-weight: 900; } /* ---- why it matters --------------------------------------- */ .zox-ss-why { margin: 4px 0 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--ss-accent); } .zox-ss-why-label { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 6px; background: var(--ss-accent); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .zox-ss-why p { margin: 0; font-size: 1.2rem; line-height: 1.45; font-weight: 600; color: var(--ss-ink); } /* ---- vertical video companion ----------------------------- */ .zox-ss-video { position: relative; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--ss-radius); overflow: hidden; background-color: #15171a; background-size: cover; background-position: center top; } .zox-ss-video-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); } .zox-ss-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--ss-accent); font-size: 24px; padding-left: 4px; box-shadow: 0 0 0 6px rgba(255,255,255,.25); } .zox-ss-video-tag { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(3px); } /* ---- the tap (CTA) ---------------------------------------- */ .zox-ss-tap { margin: 36px 0 8px; } .zox-ss-tap-lead { margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; color: var(--ss-ink); } .zox-ss-tap-btns { display: flex; flex-wrap: wrap; gap: 14px; } .zox-ss-btn { display: inline-block; padding: 15px 30px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; border: 2px solid transparent; transition: transform .08s ease, opacity .15s ease; } .zox-ss-btn:hover { transform: translateY(-1px); } .zox-ss-btn--solid { background: var(--ss-accent); color: var(--ss-on-accent) !important; border-color: var(--ss-accent); box-shadow: 0 8px 22px rgba(194,31,37,.32); } .zox-ss-btn--ghost { background: transparent; color: var(--ss-ink) !important; border-color: var(--ss-ink); opacity: .9; } /* ---- the full case (long-form depth) ---------------------- */ /* The "Read the full case" Tap button opens this panel, so hide the redundant

header; show a divider only once expanded. */ .zox-ss-fullcase { margin: 0 0 24px; border: 0; } .zox-ss-fullcase[open] { margin-top: 36px; border-top: 1px solid var(--ss-line); } .zox-ss-fullcase[open] .zox-ss-longform { padding-top: 28px; } .zox-ss-fullcase > summary { display: none; } .zox-ss-fullcase-label { font-size: 1.1rem; font-weight: 900; color: var(--ss-ink); } .zox-ss-fullcase-label::before { content: "\203A\00a0"; color: var(--ss-accent); } .zox-ss-fullcase[open] .zox-ss-fullcase-label::before { content: "\2039\00a0"; } .zox-ss-fullcase-hint { font-size: 13px; color: var(--ss-ink-soft); font-weight: 600; } .zox-ss-longform { max-width: 760px; padding: 4px 2px 26px; font-size: 1.06rem; line-height: 1.72; color: var(--ss-ink); } .zox-ss-longform p { margin: 0 0 1.25em; } /* headings inherit the theme's global h1-h6{color:#000}; force ink so the long-form subheads aren't black on the dark page */ .zox-ss-longform h1, .zox-ss-longform h2, .zox-ss-longform h3, .zox-ss-longform h4, .zox-ss-longform h5, .zox-ss-longform h6, .zox-ss-longform h1 a, .zox-ss-longform h2 a, .zox-ss-longform h3 a, .zox-ss-longform h4 a, .zox-ss-longform h5 a, .zox-ss-longform h6 a { color: var(--ss-ink) !important; } .zox-ss-longform h2 { margin: 1.6em 0 .5em; font-size: 1.45rem; font-weight: 800; line-height: 1.2; } .zox-ss-longform a { color: var(--ss-accent); } /* ---- fallback (auto) body --------------------------------- */ /* Posts without hand-authored Short Shot fields keep the Short Shot hero, then render their own content here: full-width, centred under the hero. */ .zox-ss-auto-body { margin: 8px auto 0; } .zox-ss-auto-body img { max-width: 100%; height: auto; border-radius: 10px; } .zox-ss-auto-body ul, .zox-ss-auto-body ol { margin: 0 0 1.25em 1.2em; } .zox-ss-auto-body li { margin: 0 0 .5em; } /* ---- footer / tags ---------------------------------------- */ .zox-ss-foot { font-size: 13px; color: var(--ss-ink-soft); } .zox-ss-foot a { color: var(--ss-ink-soft); } .zox-ss-tags-h { font-weight: 800; color: var(--ss-ink); } /* ============================================================ DESKTOP — hero overlay + two columns ============================================================ */ @media (min-width: 880px) { .zox-ss-inner { padding: 34px 32px 96px; } /* hero: headline overlaid bottom-left on the image */ .zox-ss-hero { margin-bottom: 56px; } .zox-ss-hero.has-img { position: relative; border-radius: var(--ss-radius); overflow: hidden; } .zox-ss-hero.has-img .zox-ss-hero__img { border-radius: 0; } .zox-ss-hero.has-img .zox-ss-hero__img img { aspect-ratio: 16 / 9; height: 100%; object-fit: cover; } .zox-ss-hero.has-img .zox-ss-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 72%); } .zox-ss-hero.has-img .zox-ss-hero__head { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 72%; padding: 48px; } .zox-ss-hero.has-img .zox-ss-hook { color: #fff; font-size: clamp(2.6rem, 4vw, 3.6rem); } .zox-ss-hero.has-img .zox-ss-byline { color: rgba(255,255,255,.82); } /* two columns: story left, video rail right */ .zox-ss-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 64px; align-items: stretch; } /* image fills the rail so it matches the story height (no dead space) */ .zox-ss-col-rail { display: flex; flex-direction: column; } .zox-ss-video { max-width: none; aspect-ratio: auto; flex: 1 1 auto; min-height: 400px; } .zox-ss-story { margin-bottom: 36px; } /* CTAs left-aligned, natural width */ .zox-ss-tap { margin-top: 8px; } .zox-ss-tap-btns { justify-content: flex-start; } } /* ---- small phones ----------------------------------------- */ @media (max-width: 560px) { .zox-ss-inner { padding: 20px 16px 56px; } .zox-ss-btn { flex: 1 1 100%; text-align: center; } }