/* ========================================================================== brands.css — shared layout for Specular imprint landing pages Loaded AFTER styles.css. Reuses the parent site's shell (header/footer), adds the landing-page sections + per-brand accent theming. Set the theme with (etc.). ========================================================================== */ /* ---- Per-brand accent themes -------------------------------------------- */ body[data-brand] { --accent: var(--color-rose-lacquer); --accent-ink: var(--color-ink-cypress); --hero-bg: var(--color-ink-cypress); --hero-glow: rgba(255, 250, 241, 0.10); } body[data-brand="thinknetic"] { --accent: #c8a24a; /* warm gold */ --accent-ink: #1a2b45; /* deep navy */ --hero-bg: #1a2b45; --hero-glow: rgba(200, 162, 74, 0.22); } body[data-brand="rodney-noble"] { --accent: #c98a6a; /* warm clay */ --accent-ink: #33465e; /* calm slate */ --hero-bg: #33465e; --hero-glow: rgba(201, 138, 106, 0.24); } body[data-brand="social-iq"] { --accent: #e8735f; /* coral */ --accent-ink: #1f6f70; /* teal */ --hero-bg: #1f6f70; --hero-glow: rgba(232, 115, 95, 0.26); } body[data-brand="couples-connect"] { --accent: #d8a48f; /* dusty rose clay */ --accent-ink: #44503f; /* deep sage */ --hero-bg: #44503f; --hero-glow: rgba(216, 164, 143, 0.26); } body[data-brand="infinite-lights"] { --accent: #e0a92e; /* radiant gold */ --accent-ink: #4a3b66; /* gentle plum */ --hero-bg: #4a3b66; --hero-glow: rgba(224, 169, 46, 0.30); } /* ---- Back-to-parent link in the header ---------------------------------- */ .brand-return { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; } .brand-return::before { content: "←"; font-size: 14px; } /* ---- Imprint hero ------------------------------------------------------- */ .lp-hero { position: relative; min-height: 82svh; display: grid; align-items: center; overflow: hidden; color: var(--color-white); background: radial-gradient(120% 90% at 82% 12%, var(--hero-glow), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--hero-bg) 88%, black), var(--hero-bg)); } .lp-hero-inner { position: relative; z-index: 1; width: min(880px, calc(100% - 40px)); margin-left: clamp(20px, 6vw, 78px); padding: 140px 0 40px; } .lp-hero .eyebrow { color: color-mix(in srgb, var(--accent) 78%, white); } .lp-hero h1 { max-width: 15ch; } .lp-slogan { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.3vw, 30px); color: color-mix(in srgb, var(--accent) 82%, white); } .lp-hero-lede { max-width: 620px; margin: 20px 0 0; color: rgba(255, 250, 241, 0.84); font-size: clamp(17px, 1.9vw, 22px); } .lp-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .button-accent { color: #fff; background: var(--accent); border-color: var(--accent); } .button-accent:hover { filter: brightness(0.95); } .button-ghost { color: var(--color-white); border-color: rgba(255, 250, 241, 0.5); background: rgba(255, 250, 241, 0.06); } /* ---- Free-gift / opt-in section (the funnel replacement) ---------------- */ .lp-offer { position: relative; } .offer-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.85fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px); border: 1px solid rgba(16, 34, 31, 0.14); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 250, 241, 0.7), rgba(216, 208, 191, 0.22)), rgba(255, 250, 241, 0.5); box-shadow: var(--shadow-soft); } .offer-card .section-kicker { color: var(--accent-ink); } .offer-gift { margin: 14px 0 0; padding-left: 18px; list-style: none; } .offer-gift li { position: relative; margin: 10px 0; font-size: clamp(15px, 1.4vw, 17px); color: rgba(16, 34, 31, 0.82); } .offer-gift li::before { content: ""; position: absolute; left: -18px; top: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); } .signup-form { display: grid; gap: 12px; } .signup-form label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(16, 34, 31, 0.6); } .signup-form input { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid rgba(16, 34, 31, 0.22); border-radius: 999px; font: inherit; background: var(--color-white); } .signup-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } .signup-form button { min-height: 52px; border: 0; border-radius: 999px; color: #fff; background: var(--accent); font-size: 15px; font-weight: 800; cursor: pointer; } .signup-form button:hover { filter: brightness(0.95); } .form-fineprint { margin: 4px 0 0; font-size: 12px; color: rgba(16, 34, 31, 0.55); } /* Hosted-form CTA (opt-in handled by Zoho's hosted signup form) */ .signup-cta { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(16, 34, 31, 0.14); border-radius: var(--radius); background: var(--color-white); box-shadow: var(--shadow-soft); } .signup-cta-lede { margin: 0; font-size: clamp(15px, 1.4vw, 17px); color: rgba(16, 34, 31, 0.78); } .signup-cta-btn { min-height: 54px; padding: 0 30px; font-size: 15px; font-weight: 800; } /* ---- Featured books ----------------------------------------------------- */ .book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .book-card { display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid rgba(16, 34, 31, 0.14); border-radius: var(--radius); background: rgba(255, 250, 241, 0.5); box-shadow: 0 12px 36px rgba(16, 34, 31, 0.05); } .book-card .rating { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent-ink); } .book-card h3 { margin: 10px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; } .book-card .card-link { color: var(--accent-ink); margin-top: auto; padding-top: 18px; } .books-cta { margin-top: 30px; } /* ---- "What to expect" mini-grid ----------------------------------------- */ .value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(16, 34, 31, 0.14); border-radius: var(--radius); background: rgba(16, 34, 31, 0.14); } .value-grid article { min-height: 210px; padding: clamp(20px, 2.4vw, 30px); background: rgba(255, 250, 241, 0.64); } .value-grid h3 { font-size: clamp(19px, 1.6vw, 23px); } .value-grid p { margin: 12px 0 0; color: rgba(16, 34, 31, 0.72); font-size: 15px; } /* ---- Provisional / needs-input banner ----------------------------------- */ .wip-note { margin: 0 auto clamp(24px, 4vw, 40px); width: min(1180px, calc(100% - 40px)); padding: 16px 20px; border: 1px dashed var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 14px; color: var(--accent-ink); } .wip-note strong { font-weight: 800; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 980px) { .offer-card { grid-template-columns: 1fr; } .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .lp-hero-inner { width: calc(100% - 32px); margin: 0 auto; padding-top: 110px; } .book-grid { grid-template-columns: 1fr; } } /* --- Free toolkit library (Thinknetic) --- */ .toolkit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 30px); margin-top: clamp(26px, 3.5vw, 40px); } @media (max-width: 900px) { .toolkit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .toolkit-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid rgba(16, 34, 31, 0.14); border-radius: var(--radius); background: rgba(255, 250, 241, 0.6); box-shadow: 0 10px 34px rgba(16, 34, 31, 0.08); } .toolkit-card img { width: 100%; height: auto; max-width: 164px; margin: 0 auto 16px; border-radius: 4px; box-shadow: 0 12px 30px rgba(16, 34, 31, 0.18); } .toolkit-card h3 { margin: 0 0 8px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.3; } .toolkit-card p { margin: 0; font-size: clamp(14px, 1.3vw, 15px); line-height: 1.55; color: rgba(16, 34, 31, 0.76); } .offer-card-cta { margin-top: clamp(26px, 3.5vw, 40px); } .cover-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 26px; } @media (max-width: 720px) { .cover-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { .toolkit-card img { max-width: 132px; } } .chapter-series { margin: clamp(30px, 4vw, 44px) 0 16px; font-family: var(--serif); font-size: clamp(19px, 1.9vw, 23px); color: var(--accent-ink); border-bottom: 1px solid rgba(16, 34, 31, 0.16); padding-bottom: 10px; } .chapter-series:first-of-type { margin-top: clamp(22px, 3vw, 32px); } .book-card .card-link { display: block; white-space: nowrap; align-self: stretch; } .book-card .card-link + .card-link { margin-top: 0; padding-top: 8px; opacity: 0.78; font-size: 0.94em; } .toolkit-card .card-link { margin-top: 14px; } .chapter-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: rgba(16, 34, 31, 0.68); } .chapter-note em { font-style: italic; } /* ---- Free-chapter reading page ------------------------------------------ */ .reader-col { width: min(70ch, calc(100% - 40px)); margin: 0 auto; } section.reader-head { padding: clamp(155px, 17vw, 200px) 0 clamp(30px, 4vw, 48px); background: radial-gradient(120% 90% at 82% 12%, var(--hero-glow), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--hero-bg) 88%, black), var(--hero-bg)); color: var(--color-white); } section.reader-head .eyebrow { color: color-mix(in srgb, var(--accent) 78%, white); } .reader-book { margin: 10px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 250, 241, 0.66); } section.reader-head h1 { margin: 10px 0 0; max-width: 18ch; } .reader-sub { margin: 16px 0 0; color: rgba(255, 250, 241, 0.8); font-size: clamp(15px, 1.6vw, 18px); } .reader { padding: clamp(34px, 5vw, 60px) 0 clamp(20px, 3vw, 34px); } .reader p { margin: 0 0 1.05em; font-size: clamp(17px, 1.65vw, 19px); line-height: 1.72; color: rgba(16, 34, 31, 0.9); } .reader-lede { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 27px) !important; line-height: 1.45 !important; color: var(--accent-ink) !important; margin-bottom: 1.1em !important; } .reader h2 { margin: clamp(34px, 4.5vw, 52px) 0 14px; font-size: clamp(23px, 2.4vw, 30px); color: var(--accent-ink); } .reader-quote { margin: 0 0 1.1em; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; } .reader-quote sup { font-style: normal; } .refmark { color: var(--accent); font-size: 0.7em; padding-left: 1px; } .reader-terms { margin: 6px 0 0; } .reader-terms dt { margin: 26px 0 6px; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); color: var(--accent-ink); } .reader-terms dd { margin: 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; color: rgba(16, 34, 31, 0.86); } .reader-steps { margin: 4px 0 1.2em; padding-left: 22px; } .reader-steps li { margin: 9px 0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; } .reader-example { margin: 26px 0 1.4em; padding: clamp(20px, 2.6vw, 28px); border: 1px solid rgba(16, 34, 31, 0.16); border-radius: var(--radius); background: rgba(255, 250, 241, 0.62); } .reader-example-label { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink) !important; } .reader-example p:last-child { margin-bottom: 0; } .reader-refs { margin: 6px 0 0; padding-left: 20px; } .reader-refs li { margin: 8px 0; font-size: 14px; line-height: 1.55; color: rgba(16, 34, 31, 0.66); } .series-blurb { margin: -6px 0 16px; font-size: 15px; color: rgba(16,34,31,0.66); } /* ---- Book catalog: cover grid + audiobook badge ------------------------- */ .cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: clamp(20px, 2.6vw, 32px); margin: 0 0 clamp(30px, 4vw, 46px); } .cover-card { display: flex; flex-direction: column; } .cover-link { display: block; } .cover-card img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 14px 34px rgba(16, 34, 31, 0.20); transition: transform 160ms ease, box-shadow 160ms ease; } .cover-link:hover img { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16, 34, 31, 0.28); } .cover-card h4 { margin: 12px 0 0; font-family: var(--serif); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.28; color: var(--accent-ink); font-weight: 600; } .fmt-line { margin: 5px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(16, 34, 31, 0.5); } .fmt-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .fmt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-decoration: none; border: 1px solid rgba(16, 34, 31, 0.22); color: var(--accent-ink); background: rgba(255, 250, 241, 0.7); } .fmt-badge:hover { border-color: var(--accent-ink); } .fmt-audio { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .fmt-audio:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } @media (max-width: 520px) { .cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- Individual book landing page --------------------------------------- */ section.book-hero { padding: clamp(150px, 16vw, 190px) 0 clamp(34px, 4vw, 52px); background: radial-gradient(120% 90% at 82% 12%, var(--hero-glow), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--hero-bg) 88%, black), var(--hero-bg)); color: var(--color-white); } .book-hero-inner { width: min(1000px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: start; } .book-hero-cover img { width: 100%; height: auto; border-radius: 5px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42); } .book-hero-copy .eyebrow { color: color-mix(in srgb, var(--accent) 78%, white); } .book-hero-copy h1 { margin: 10px 0 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; } .book-sub { margin: 14px 0 0; max-width: 52ch; font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.7vw, 20px); color: rgba(255, 250, 241, 0.82); } .book-formats { margin: 18px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 250, 241, 0.55); } .book-rating { display: inline-block; margin: 12px 0 0; font-size: 15px; font-weight: 800; color: color-mix(in srgb, var(--accent) 88%, white); text-decoration: none; border-bottom: 1px solid currentColor; } .book-hero .fmt-badges { margin-top: 18px; } .book-hero .fmt-badge { border-color: rgba(255, 250, 241, 0.42); background: rgba(255, 250, 241, 0.07); color: var(--color-white); } .book-hero .fmt-audio { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); } .chapter-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; } .chapter-read, .chapter-download { font-size: 14px; font-weight: 700; color: rgba(255, 250, 241, 0.8); text-decoration: underline; text-underline-offset: 3px; } .chapter-download:hover, .chapter-read:hover { color: #fffaf1; } .book-desc { padding: clamp(22px, 2.6vw, 32px) 0 clamp(6px, 1vw, 12px); } .book-desc-inner { width: min(70ch, calc(100% - 40px)); margin: 0 auto; } .book-desc-inner h4 { margin: 0 0 14px; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.3; color: var(--accent-ink); } .book-desc-inner p { margin: 0 0 0.85em; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; color: rgba(16,34,31,0.88); } .book-desc-inner ul { margin: 0 0 1.2em; padding-left: 20px; } .book-desc-inner li { margin: 9px 0; font-size: clamp(16px, 1.55vw, 17px); line-height: 1.6; } .brand-mark-icon img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 720px) { .book-hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .book-hero-cover { max-width: 190px; } .book-hero .fmt-badges, .chapter-cta { justify-content: center; } } /* Retailer-branded buttons (colours only — no marks, to stay clear of trademark use) */ .fmt-badge.fmt-book { background: #FF9900; border-color: #e08600; color: #14100b; font-weight: 800; } .fmt-badge.fmt-book:hover { background: #ffad33; border-color: #c97800; } .fmt-badge.fmt-audio { background: #111417; border-color: #111417; color: #F8991C; font-weight: 800; } .fmt-badge.fmt-audio:hover { background: #23282d; border-color: #F8991C; } .book-hero .fmt-badge.fmt-book { background: #FF9900; border-color: #e08600; color: #14100b; } .book-hero .fmt-badge.fmt-audio { background: #0d1013; border-color: #F8991C; color: #F8991C; } /* toolkit cards no longer carry cover art */ .toolkit-card { justify-content: flex-start; padding: 22px 20px; } .toolkit-card h3 { margin-top: 0; } .desc-cta { margin: 26px 0 4px; padding: 22px 24px; border: 1px solid rgba(16, 34, 31, 0.16); border-radius: var(--radius); background: rgba(255, 250, 241, 0.7); } .desc-cta-line { margin: 0 0 14px !important; font-family: var(--serif); font-size: clamp(17px, 1.8vw, 21px) !important; line-height: 1.4 !important; color: var(--accent-ink) !important; } .desc-cta .fmt-badges { margin: 0; } /* ---- Print / PDF --------------------------------------------------------- The site chrome is fixed-position, so without this it repeats on every printed page and lands on top of the text. */ .print-header { display: none; } @media print { @page { margin: 16mm 16mm 24mm; } /* full-bleed paper colour: the root background propagates to the canvas, covering the entire sheet including margins */ html { background: #f6eedd !important; } body { background: transparent !important; } html, body { margin: 0 !important; padding: 0 !important; } main { margin: 0 !important; } .site-header, .nav-toggle, .site-nav, .site-footer, #get, .lp-offer, .books-cta { display: none !important; } /* keep the navy hero band on page 1 — sized for paper, not for a viewport */ section.reader-head { margin: 0 0 6mm !important; padding: 7mm 6mm 8mm !important; background: #1a2b45 !important; color: #fffaf1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; } section.reader-head .eyebrow { color: #c8a24a !important; } .reader-book { color: rgba(255, 250, 241, 0.66) !important; } section.reader-head h1 { color: #fffaf1 !important; } .reader-sub { color: rgba(255, 250, 241, 0.8) !important; } body, .reader p, .reader-terms dd, .reader-steps li { color: #111 !important; } .reader-col { width: 100% !important; } .reader { padding-top: 0 !important; } .reader h2, .reader-terms dt { break-after: avoid; page-break-after: avoid; } .reader-example, .reader-quote { break-inside: avoid; page-break-inside: avoid; } .reader-refs li { font-size: 8.5pt; } a { color: inherit !important; text-decoration: none !important; } /* print trailing-space reset — stops an empty final page */ html, body { margin-bottom: 0 !important; padding-bottom: 0 !important; } main { margin-bottom: 0 !important; padding-bottom: 0 !important; } .reader { padding-bottom: 0 !important; margin-bottom: 0 !important; } .reader-refs { margin-bottom: 0 !important; padding-bottom: 0 !important; } .reader-refs li:last-child { margin-bottom: 0 !important; } main > section:last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ---- Writers page -------------------------------------------------------- */ .writer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 16px; } .writer-card { padding: 22px 20px; border: 1px solid rgba(16,34,31,0.14); border-radius: var(--radius); background: rgba(255,250,241,0.55); } .writer-card h3 { margin: 0; font-size: clamp(17px,1.6vw,20px); } .writer-count { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); opacity: 0.7; } .writer-titles { margin: 0; padding-left: 17px; } .writer-titles li { margin: 4px 0; font-size: 14px; line-height: 1.45; color: rgba(16,34,31,0.78); } .writer-titles li.muted { list-style: none; margin-left: -17px; color: rgba(16,34,31,0.5); font-style: italic; } body:not([data-brand]) .reader-head { background: linear-gradient(135deg, #101820, #10221f); } .intro-signature { font-family: var(--serif); font-style: italic; text-align: right; color: rgba(16,34,31,0.7); margin: 0 0 1.4em !important; } /* not-medical-advice note on wellbeing chapters */ .reader-disclaimer { margin: 26px 0 0; padding: 16px 18px; border-left: 3px solid rgba(16, 34, 31, 0.22); background: rgba(16, 34, 31, 0.035); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; line-height: 1.6; color: rgba(16, 34, 31, 0.7); } /* ---- Free reader library: the offer printed inside the books --------------- */ .gift-card { border-color: rgba(200, 162, 74, 0.5); } .gift-tag { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); opacity: 0.85; } .gift-plus { margin: 18px 0 0; padding: 16px 18px; border: 1px dashed rgba(200, 162, 74, 0.6); border-radius: var(--radius); font-size: clamp(15px, 1.4vw, 17px); color: rgba(16, 34, 31, 0.82); } .gift-extras { margin: 18px 0 0; } .gift-extras > summary { cursor: pointer; font-weight: 700; font-size: 15px; color: rgba(16, 34, 31, 0.7); padding: 8px 0; } .gift-extras > summary:hover { color: var(--accent-ink); } .gift-extras .toolkit-grid { margin-top: 12px; } /* ---- Inline library signup form (Thinknetic hero) ------------------------- */ .gift-hero .lp-hero-inner { max-width: 720px; } .hero-form { margin-top: 28px; } .hero-form-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .hero-form-fields input[type="text"], .hero-form-fields input[type="email"] { flex: 1 1 180px; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255, 250, 241, 0.35); background: rgba(255, 250, 241, 0.08); color: #fffaf1; font-size: 16px; outline: none; } .hero-form-fields input::placeholder { color: rgba(255, 250, 241, 0.55); } .hero-form-fields input:focus { border-color: #c8a24a; background: rgba(255, 250, 241, 0.14); } .hero-form-fields .button { flex: 0 0 auto; white-space: nowrap; } .hero-fineprint { margin-top: 12px; color: rgba(255, 250, 241, 0.6); } .form-error { display: none; margin: 0 0 12px; padding: 10px 16px; border-radius: var(--radius); background: rgba(180, 60, 50, 0.25); border: 1px solid rgba(220, 120, 110, 0.6); color: #ffd9d4; font-size: 14px; } .hero-h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; color: #fffaf1; } /* Zoho scriptless response artifacts — keep invisible on our page */ #Zc_SignupSuccess, #zcOptinOverLay, #zcOptinSuccessPopup { display: none !important; } @media (max-width: 560px) { .hero-form-fields { flex-direction: column; } .hero-form-fields input[type="text"], .hero-form-fields input[type="email"] { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .hero-form-fields .button { width: 100%; } } /* ---- Hero split: brand copy left, signup panel right ---------------------- */ .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(28px, 4vw, 56px); align-items: center; } .hero-signup { background: rgba(255, 250, 241, 0.06); border: 1px solid rgba(255, 250, 241, 0.16); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); backdrop-filter: blur(4px); } .hero-signup h2 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 27px); line-height: 1.2; color: #fffaf1; } .hero-signup-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 250, 241, 0.75); } .hero-form-panel .hero-form-fields { flex-direction: column; } .hero-form-panel .hero-form-fields input[type="text"], .hero-form-panel .hero-form-fields input[type="email"] { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .hero-form-panel .hero-form-fields .button { width: 100%; } .hero-form-panel { margin-top: 0; } .hero-form-panel .hero-fineprint { font-size: 12.5px; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .hero-signup { max-width: 480px; } } /* ---- Floating signup panel: shared bits ----------------------------------- */ .hero-signup { border-radius: 26px; } .hero-signup-close { display: none; } .hero-signup-reopen { display: none; } /* ---- Floating signup rail (thinknetic page, wide screens) ----------------- */ @media (min-width: 1000px) { .rail-page .hero-signup { position: fixed; top: 50%; transform: translateY(-50%); right: max(24px, calc((100vw - 1500px) / 2 + 24px)); width: 380px; z-index: 60; background: var(--hero-bg, #1a2b45); background-image: linear-gradient(150deg, color-mix(in srgb, var(--hero-bg, #1a2b45) 82%, #0a1220), var(--hero-bg, #1a2b45)); border: 1px solid rgba(255, 250, 241, 0.2); box-shadow: 0 18px 44px rgba(10, 18, 32, 0.45); max-height: calc(100vh - 48px); overflow-y: auto; } /* hero copy keeps its column; the reserved grid track stays as breathing room */ .rail-page .hero-split { grid-template-columns: minmax(0, 1fr) 404px; } /* content sections make room for the rail */ .rail-page .lp-offer .section-inner, .rail-page .lp-books .section-inner, .rail-page .lp-about .section-inner { width: auto; max-width: 1040px; margin-left: max(40px, calc((100vw - 1500px) / 2 + 40px)); margin-right: calc(max(24px, calc((100vw - 1500px) / 2 + 24px)) + 404px); } .rail-page .footer-inner { width: auto; max-width: 1040px; margin-left: max(40px, calc((100vw - 1500px) / 2 + 40px)); margin-right: calc(max(24px, calc((100vw - 1500px) / 2 + 24px)) + 404px); } } /* ---- Floating signup card (mobile) ---------------------------------------- */ @media (max-width: 899px) { .rail-page .hero-signup { position: fixed; left: 14px; right: 14px; bottom: 14px; top: auto; margin: 0; width: auto; max-width: none; z-index: 90; background: var(--hero-bg, #1a2b45); background-image: linear-gradient(150deg, color-mix(in srgb, var(--hero-bg, #1a2b45) 82%, #0a1220), var(--hero-bg, #1a2b45)); border: 1px solid rgba(255, 250, 241, 0.2); box-shadow: 0 -12px 40px rgba(10, 18, 32, 0.5); max-height: min(76vh, calc(100vh - 28px)); overflow-y: auto; } .rail-page .hero-signup .hero-signup-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 250, 241, 0.35); background: rgba(255, 250, 241, 0.08); color: #fffaf1; font-size: 21px; line-height: 1; padding: 0; cursor: pointer; } .rail-page .hero-signup h2 { padding-right: 38px; } .rail-page.rail-closed .hero-signup { display: none; } .rail-page.rail-closed .hero-signup-reopen { display: inline-flex; align-items: center; position: fixed; right: 14px; bottom: 14px; z-index: 90; border-radius: 999px; box-shadow: 0 10px 28px rgba(10, 18, 32, 0.4); } } /* ---- Couples Connect ------------------------------------------------------ */ .tag-soon { display: inline-block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }