/* DIScovery News — marketing site components. * The site lives on the app's cosmic dark world (data-theme="dark" on * flips the design-system tokens): deep navy surfaces, liquid-glass cards and * chrome, the blue→purple brand gradient, and big Poppins display type. * Everything token-driven; see css/tokens/. */ html { scroll-behavior: smooth; scroll-padding-top: 110px; } body { background: var(--surface-1); min-height: 100vh; } /* Cosmic glow field behind the whole site — brighter toward the upper right, * echoing the app icon. Fixed so sections float over it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(58% 42% at 82% -6%, rgba(77, 145, 252, 0.20), transparent 62%), radial-gradient(46% 34% at -4% 28%, rgba(138, 97, 251, 0.16), transparent 60%), radial-gradient(40% 30% at 68% 78%, rgba(33, 19, 109, 0.55), transparent 65%), linear-gradient(180deg, #060B1B 0%, #0A1030 55%, #140F3C 100%); } img { max-width: 100%; } a { color: var(--dis-blue-600); } ::selection { background: rgba(77, 145, 252, 0.35); } :is(a, button, summary):focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-sm); } /* Anchor targets clear the floating nav. */ [id] { scroll-margin-top: 110px; } /* ---------- Utilities ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-6); } .section { padding: var(--sp-12) 0; } .section--tight { padding: var(--sp-10) 0; } /* Soft gradient panel used to break up long pages. */ .section--panel { background: linear-gradient(120deg, rgba(77, 145, 252, 0.07), rgba(138, 97, 251, 0.06)); border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.08); border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.08); } .section-head { max-width: 780px; margin: 0 auto var(--sp-9); text-align: center; } .section-head--left { margin: 0 0 var(--sp-7); text-align: left; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-meta); font-weight: var(--fw-medium); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--dis-blue-300); margin: 0 0 var(--sp-3); } h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: var(--ls-tight); margin: 0; text-wrap: balance; } h1 { font-size: clamp(44px, 6.6vw, 92px); font-weight: var(--fw-extrabold); line-height: 1.02; letter-spacing: -0.03em; } h2 { font-size: clamp(30px, 4.4vw, 54px); font-weight: var(--fw-extrabold); line-height: 1.08; } h3 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); } .lede { font-size: clamp(16px, 1.8vw, 20px); line-height: var(--lh-relaxed); color: var(--ink-700); margin: var(--sp-5) 0 0; } .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Cosmic sections (now open space over the glow field) ---------- */ .cosmic { position: relative; color: #fff; } .cosmic h1, .cosmic h2, .cosmic h3 { color: #fff; } .cosmic .lede { color: var(--text-on-dark-muted); } .sparkle { position: absolute; pointer-events: none; } /* ---------- Navigation: floating liquid-glass pill ---------- */ .site-nav { position: sticky; top: 0; z-index: 40; padding: var(--sp-3) 0; } .site-nav .container { position: relative; max-width: 1040px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 60px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5); border-radius: var(--r-pill); background: rgba(10, 18, 46, 0.62); border: var(--bw-hair) solid rgba(255, 255, 255, 0.13); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 36px rgba(2, 6, 23, 0.45); } @media (min-width: 761px) { .site-nav .container { margin-left: auto; margin-right: auto; width: calc(100% - var(--sp-8)); } } .nav-brand { display: inline-flex; align-items: center; } .nav-brand img { height: 26px; display: block; } .nav-links { display: flex; align-items: center; gap: var(--sp-6); } .nav-links a:not(.btn) { font-family: var(--font-display); font-size: 14.5px; font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.8); text-decoration: none; padding: 8px 4px; transition: color 160ms ease; } .nav-links a:not(.btn):hover { color: #fff; } .nav-links a[aria-current="page"] { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-toggle { display: none; appearance: none; border: var(--bw-hair) solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); color: #fff; font-family: var(--font-display); font-weight: var(--fw-semibold); cursor: pointer; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; line-height: 1; padding: 13px 22px; border-radius: var(--r-pill); border: var(--bw-hair) solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 140ms ease, background 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .btn:active { transform: scale(0.97); } .btn--lg { font-size: 16.5px; padding: 17px 30px; } .btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-glow-blue); } .btn--primary:hover { filter: brightness(1.08); box-shadow: 0 10px 34px rgba(77, 145, 252, 0.5); } .btn--glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn--glass:hover { background: rgba(255, 255, 255, 0.14); } .btn--quiet { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; } .btn--quiet:hover { background: rgba(255, 255, 255, 0.14); } .btn .btn-spark { flex: none; } /* ---------- Hero ---------- */ .hero { overflow: hidden; } .hero .container { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: var(--sp-9); padding-top: var(--sp-10); padding-bottom: var(--sp-12); } .hero--center .container { display: block; text-align: center; padding-bottom: var(--sp-10); } .hero--center .lede { margin-left: auto; margin-right: auto; } .hero--center .hero-copy .lede { margin-left: auto; margin-right: auto; } .status-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px 16px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); border: var(--bw-hair) solid rgba(255, 255, 255, 0.14); font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: rgba(255, 255, 255, 0.85); letter-spacing: 0.04em; margin-bottom: var(--sp-6); } .status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive-500); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.45; } } .hero-copy .lede { max-width: 560px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); } .hero--center .hero-ctas { justify-content: center; } .hero-note { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: rgba(255, 255, 255, 0.62); } /* ---------- Glass cards ---------- */ .card-grid { display: grid; gap: var(--sp-6); } .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } .feature-card, .value-card, .perk-card, .story-card { position: relative; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); border-radius: var(--r-xl); box-shadow: var(--shadow-md); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .feature-card:hover, .value-card:hover, .perk-card:hover, .story-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-cosmic); } .feature-card { overflow: hidden; } .feature-card .media { position: relative; height: 168px; background-size: cover; background-position: center; } .feature-card .media .sparkle { top: 14px; right: 16px; } .feature-card .body { padding: var(--sp-6); } .feature-card h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--sp-2); } .feature-card p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-700); } .value-card { padding: var(--sp-6); } .value-card .icon, .perk-card .icon { width: 46px; height: 46px; border-radius: var(--r-md); background: linear-gradient(135deg, rgba(77, 145, 252, 0.22), rgba(138, 97, 251, 0.22)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); } .value-card .icon svg { stroke: var(--dis-blue-300); } .value-card h3 { color: #fff; margin-bottom: var(--sp-2); } .value-card p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-700); } .value-card .meta { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: var(--ink-500); } /* ---------- Story-card mock (sample content) ---------- */ .story-card { overflow: hidden; display: flex; flex-direction: column; } .story-card .media { height: 150px; background-size: cover; background-position: center; position: relative; } .story-card .media::after { content: ""; position: absolute; inset: 0; background: var(--grad-scrim); } .story-card .body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .source-row { display: flex; align-items: center; gap: var(--sp-2); } .source-row .avatar { width: 24px; height: 24px; border-radius: 7px; background: var(--dis-purple-100); color: var(--dis-purple-300); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; } .source-row .name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 12.5px; color: var(--ink-700); } .source-row time { font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: var(--ink-500); margin-left: auto; } .story-card h3 { font-size: var(--fs-title); line-height: 1.35; font-weight: var(--fw-bold); color: #fff; } .story-card .meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; } .tag { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 11px; padding: 4px 10px; border-radius: var(--r-pill); } .tag--wdw { background: var(--dis-blue-100); color: var(--dis-blue-300); } .tag--dlr { background: var(--warning-100); color: var(--warning-500); } .tag--podcast { background: var(--dis-purple-100); color: var(--dis-purple-300); } .cluster-note { font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: var(--ink-500); } .scoop { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--dis-blue-300); } /* ---------- Page header (subpages) ---------- */ .page-hero { overflow: hidden; } .page-hero .container { position: relative; padding-top: var(--sp-10); padding-bottom: var(--sp-9); max-width: 920px; text-align: center; } .page-hero .lede { margin-left: auto; margin-right: auto; max-width: 660px; } /* ---------- FAQ ---------- */ .faq-wrap { max-width: 800px; margin: 0 auto; } .faq-group { margin-bottom: var(--sp-9); } .faq-group > h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: var(--sp-5); } .faq-item { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.11); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; transition: border-color 200ms ease; } .faq-item:hover { border-color: rgba(255, 255, 255, 0.2); } .faq-item[open] { border-color: rgba(122, 122, 252, 0.35); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 17px; color: #fff; transition: background 160ms ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: rgba(255, 255, 255, 0.04); } .faq-item summary:focus-visible { box-shadow: inset 0 0 0 3px rgba(77, 145, 252, 0.55); border-radius: var(--r-lg); } .faq-item summary .chev { margin-left: auto; flex: none; transition: transform 200ms ease; } .faq-item summary .chev svg { display: block; stroke: var(--ink-500); } .faq-item[open] summary .chev { transform: rotate(180deg); } .faq-item .answer { padding: 0 var(--sp-6) var(--sp-6); } .faq-item .answer p { margin: 0 0 var(--sp-3); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--ink-700); } .faq-item .answer p:last-child { margin-bottom: 0; } .faq-item .answer ul { margin: 0 0 var(--sp-3); padding-left: 20px; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--ink-700); } .faq-item .answer li { margin-bottom: var(--sp-1); } .faq-item .answer strong { color: #fff; } /* ---------- Premium ---------- */ .perk-card { padding: var(--sp-6); } .perk-card .icon svg { stroke: var(--dis-purple-300); } .perk-card h3 { color: #fff; margin-bottom: var(--sp-2); } .perk-card p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--ink-700); } .edition-card { position: relative; border-radius: var(--r-xl); background: var(--grad-cosmic-radial); border: var(--bw-hair) solid rgba(255, 255, 255, 0.14); color: #fff; padding: var(--sp-7) var(--sp-6); overflow: hidden; box-shadow: var(--shadow-cosmic); } .edition-card .when { font-family: var(--font-mono); font-size: var(--fs-mono-meta); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--dis-blue-300); margin-bottom: var(--sp-3); } .edition-card h3 { color: #fff; font-size: var(--fs-h3); margin-bottom: var(--sp-2); } .edition-card p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-on-dark-muted); } .compare-wrap { overflow-x: auto; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); border-radius: var(--r-lg); overflow: hidden; min-width: 560px; } .compare th, .compare td { padding: var(--sp-4) var(--sp-6); text-align: left; border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.07); } .compare thead th { border-top: none; background: rgba(255, 255, 255, 0.06); font-family: var(--font-display); font-size: var(--fs-body-sm); color: #fff; } .compare thead th:last-child { color: var(--dis-purple-300); } .compare td:first-child { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); color: #fff; width: 44%; } .compare td { font-size: var(--fs-body-sm); color: var(--ink-700); } .compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 28%; } .compare .yes { color: var(--positive-500); font-family: var(--font-display); font-weight: var(--fw-bold); } .compare .no { color: var(--ink-500); } /* ---------- CTA card ---------- */ .cta-card { position: relative; border-radius: var(--r-2xl); background: radial-gradient(120% 140% at 85% 0%, rgba(77, 145, 252, 0.34), transparent 55%), radial-gradient(110% 130% at 0% 100%, rgba(138, 97, 251, 0.30), transparent 55%), var(--grad-cosmic-radial); border: var(--bw-hair) solid rgba(255, 255, 255, 0.15); color: #fff; padding: clamp(44px, 7vw, 80px) clamp(28px, 5vw, 64px); overflow: hidden; box-shadow: var(--shadow-cosmic); } .cta-card h2 { color: #fff; max-width: 640px; } .cta-card .lede { color: var(--text-on-dark-muted); max-width: 540px; } .cta-card .hero-ctas { margin-top: var(--sp-7); } .cta-card .fine { margin-top: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: rgba(255, 255, 255, 0.62); } /* ---------- Banner strip (publisher link) ---------- */ .strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-7); } .strip h3 { font-size: var(--fs-h4); color: #fff; margin-bottom: var(--sp-1); } .strip p { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-700); } /* ---------- Disclosure / notice boxes ---------- */ .notice { background: rgba(255, 255, 255, 0.04); border: var(--bw-hair) solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); padding: var(--sp-6); font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--ink-500); } .notice p { margin: 0 0 var(--sp-3); } .notice p:last-child { margin: 0; } /* ---------- Legal pages ---------- */ .legal { max-width: var(--content-measure); margin: 0 auto; } .legal .updated { font-family: var(--font-mono); font-size: var(--fs-mono-meta); color: var(--ink-500); margin: 0 0 var(--sp-7); } .legal h2 { font-size: var(--fs-h3); margin: var(--sp-8) 0 var(--sp-3); } .legal h3 { font-size: var(--fs-h4); margin: var(--sp-6) 0 var(--sp-2); } .legal p, .legal ul { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--ink-700); margin: 0 0 var(--sp-4); } .legal ul { padding-left: 22px; } .legal li { margin-bottom: var(--sp-2); } .legal strong { color: var(--ink-900); } /* ---------- Footer ---------- */ .site-footer { background: rgba(3, 8, 24, 0.55); color: rgba(255, 255, 255, 0.72); border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.09); padding: var(--sp-10) 0 var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-8); } .site-footer img { height: 24px; display: block; margin-bottom: var(--sp-4); } .site-footer .about { font-size: var(--fs-body-sm); line-height: 1.6; max-width: 340px; margin: 0; } .site-footer h4 { font-family: var(--font-mono); font-size: var(--fs-overline); font-weight: var(--fw-medium); letter-spacing: var(--ls-overline); text-transform: uppercase; color: rgba(255, 255, 255, 0.52); margin: 0 0 var(--sp-4); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .site-footer ul a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-medium); transition: color 160ms ease; } .site-footer ul a:hover { color: #fff; } .fineprint { border-top: var(--bw-hair) solid rgba(255, 255, 255, 0.08); padding-top: var(--sp-6); font-family: var(--font-mono); font-size: var(--fs-mono-meta); line-height: 1.7; color: rgba(255, 255, 255, 0.62); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero .container { grid-template-columns: 1fr; text-align: center; } .hero-copy .lede { margin-left: auto; margin-right: auto; } .hero-ctas { justify-content: center; } .card-grid--3 { grid-template-columns: 1fr; } .card-grid--2 { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-7); } .strip { flex-direction: column; align-items: flex-start; } } @media (max-width: 760px) { .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(8, 14, 38, 0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: var(--bw-hair) solid rgba(255, 255, 255, 0.12); border-radius: var(--r-xl); padding: var(--sp-3) var(--sp-6) var(--sp-6); box-shadow: 0 18px 48px rgba(2, 6, 23, 0.6); } .nav-links.open { display: flex; } .nav-links a:not(.btn) { padding: var(--sp-4) 0; border-bottom: var(--bw-hair) solid rgba(255, 255, 255, 0.07); } .nav-links .btn { margin-top: var(--sp-4); } .nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } @media (max-width: 640px) { .compare { min-width: 0; } .compare th, .compare td { padding: var(--sp-3); font-size: 13px; } .compare td:first-child { width: auto; } .cta-card .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; } .cta-card .sparkle { display: none; } } /* ---------- Beta signup form ---------- */ .signup { display: flex; gap: var(--sp-3); max-width: 540px; margin-top: var(--sp-7); } .signup-input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 16px; color: #fff; padding: 15px 18px; border-radius: var(--r-md); border: var(--bw-hair) solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); transition: border-color 160ms ease, background 160ms ease; } .signup-input::placeholder { color: rgba(255, 255, 255, 0.45); } .signup-input:hover { border-color: rgba(255, 255, 255, 0.32); } .signup-input:focus { outline: none; border-color: var(--dis-blue-500); box-shadow: var(--ring-focus); background: rgba(255, 255, 255, 0.09); } .signup .btn { border-radius: var(--r-md); } .signup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .signup-status { margin: var(--sp-3) 0 0; min-height: 20px; font-family: var(--font-mono); font-size: 12.5px; color: var(--dis-blue-300); } .signup-status.error { color: #FF8FB1; } @media (max-width: 560px) { .signup { flex-direction: column; } .signup .btn { width: 100%; } }