/* Patty book-site theme layer. Loads after styles.css; use class on and */ html.theme-book { color-scheme: light; } .theme-book { --color-void: #0c0a09; --color-night: #15100e; --color-leather: #241814; --color-bg-top: #8f5345; --color-bg-mid: #6d3d34; --color-bg-bottom: #4a2822; --color-ink: #3e2b1e; --color-ink-muted: #5c4536; /* Solid browns read on cover-parchment cards */ --color-ink-soft: #6a5344; --color-chocolate: #5c3828; --color-chocolate-deep: #2d2118; /* Lifted toward cover parchment / warm tan (#e5d3b3 family) */ --color-cream: #faf3e6; --color-paper: #fffef8; --color-accent: #e06448; --color-accent-soft: rgba(224, 100, 72, 0.9); --color-gold: #f7f3ea; --color-gold-deep: #2b1d14; --card-surface-pro: #f7f3ea; --card-surface-depth: #f7f3ea; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.94) inset, 0 1px 2px rgba(35, 22, 18, 0.035), 0 16px 40px -20px rgba(35, 22, 18, 0.13), 0 40px 80px -36px rgba(24, 16, 12, 0.11); --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 26px 56px -14px rgba(35, 22, 18, 0.22), 0 56px 100px -38px rgba(24, 16, 12, 0.16); --shadow-soft: 0 12px 40px rgba(15, 10, 8, 0.14); --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.97) inset, 0 3px 10px rgba(35, 22, 18, 0.045), 0 22px 44px -18px rgba(35, 22, 18, 0.16), 0 48px 88px -40px rgba(24, 16, 12, 0.13); --card-foil: transparent; --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --radius-md: 12px; --radius-sm: 8px; --line-hair: rgba(45, 24, 21, 0.07); --line-strong: rgba(45, 24, 21, 0.11); --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --prose-width: min(40rem, 100%); --head-to-content: clamp(1.65rem, 4vw, 2.65rem); --font-display: "Playfair Display", Georgia, serif; --font-body: "Lora", Georgia, serif; --font-ui: "Outfit", system-ui, sans-serif; --shell-max: min(1180px, 93vw); --shell-pad-x: clamp(1.2rem, 3.6vw, 1.85rem); --section-space: clamp(3.15rem, 8.2vw, 6.5rem); --hero-s1: 0.5rem; --hero-s2: 0.75rem; --hero-s3: 1rem; --hero-s4: 1.5rem; --hero-s5: 2rem; --focus-ring: #f0c48a; --focus-offset-on-light: #fffef9; --focus-offset-on-dark: #0f0c0a; /* Raj compatibility */ --ease-out: var(--ease-smooth); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --header-h: 4.5rem; --container: min(1180px, calc(93vw - 2 * var(--shell-pad-x))); --radius-lg: 24px; --radius-xl: 28px; --radius-full: 999px; --shadow-xs: 0 1px 2px rgba(22, 18, 14, 0.06); --shadow-sm: 0 4px 16px rgba(22, 18, 14, 0.08); --shadow-md: 0 12px 36px rgba(22, 18, 14, 0.12); --shadow-lg: 0 22px 56px rgba(22, 18, 14, 0.14); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72); --color-white: var(--color-paper); --color-tan-deep: var(--color-gold-deep); --color-tan: var(--color-gold); --color-sand: #f7f3ea; --color-paper-mid: #f7f3ea; --color-shadow: rgba(22, 18, 14, 0.12); --color-shadow-deep: rgba(12, 10, 8, 0.38); --font-serif: var(--font-display); --font-sans: var(--font-ui); /* Header / chrome: cover ink bar on parchment field */ --header-surface: #3e2b1e; --header-surface-soft: #4a3628; --header-edge: rgba(255, 248, 240, 0.14); --header-text: #faf3ea; --header-muted: rgba(250, 243, 234, 0.72); /* Section polish: warm paper, no cool cast */ --section-sheen: linear-gradient(163deg, rgba(255, 255, 255, 0.38) 0%, transparent 48%); --section-glow: radial-gradient(ellipse 115% 70% at 50% -12%, rgba(255, 255, 255, 0.28) 0%, transparent 58%); --section-inner-glow: radial-gradient(ellipse 80% 55% at 85% 100%, rgba(62, 43, 30, 0.08) 0%, transparent 55%); --card-surface: linear-gradient(178deg, #fffef9 0%, #f5ecdf 100%); --card-border: rgba(62, 43, 30, 0.125); --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.97) inset, 0 0 0 1px rgba(255, 252, 247, 0.45) inset, 0 1px 2px rgba(62, 43, 30, 0.04), 0 10px 32px -14px rgba(45, 33, 24, 0.14), 0 32px 64px -32px rgba(45, 33, 24, 0.2), 0 72px 110px -52px rgba(35, 22, 18, 0.1); --card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.99) inset, 0 0 0 1px rgba(255, 254, 250, 0.65) inset, 0 2px 8px rgba(62, 43, 30, 0.06), 0 14px 36px -12px rgba(224, 100, 72, 0.12), 0 28px 56px -24px rgba(45, 33, 24, 0.2), 0 64px 120px -48px rgba(35, 22, 18, 0.14); } .theme-book body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.74; letter-spacing: 0.009em; color: var(--color-ink); background-color: var(--color-parchment); background-image: linear-gradient(180deg, #f2e6d4 0%, #e8d4bc 42%, #dec0a1 100%); background-attachment: fixed; } @media (max-width: 768px) { .theme-book body { background-attachment: scroll; } } /* Default copy on light section bands (thesis, facts, FAQ, etc.) */ .theme-book main { color: var(--color-ink); } /* Section shells: cover ink on parchment field; cards stay cream below */ .theme-book .section:not(.section--hero), .theme-book .page-section, .theme-book .highlights, .theme-book .faq, .theme-book .band--paper { color: var(--color-on-navy-muted); } .theme-book .pillar, .theme-book .facts-card, .theme-book .book-details__card, .theme-book .inside-list__item, .theme-book .scope-aside, .theme-book .toc-panel, .theme-book .depth-block, .theme-book .faq__item, .theme-book .highlights__item, .theme-book .quote__inner, .theme-book .book-showcase, .theme-book .author-aside { color: var(--color-ink); } .theme-book ::selection { background: rgba(247, 243, 234, 0.35); color: var(--color-ink); } .theme-book .page-noise { z-index: 0; opacity: 0.052; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .theme-book .page-texture { pointer-events: none; position: fixed; inset: 0; z-index: 0; opacity: 0; background: transparent; } body.theme-book > *:not(.page-texture):not(.page-noise):not(header):not(.nav-backdrop):not(.nav-panel):not(.skip-link) { position: relative; z-index: 1; } .theme-book a { color: var(--color-chocolate); transition: color 0.22s var(--ease-smooth), opacity 0.2s ease; } .theme-book a:hover { color: var(--color-ink); } .theme-book .skip-link { position: absolute; left: -9999px; top: 0.5rem; padding: 0.5rem 1rem; background: var(--color-paper); color: var(--color-ink); z-index: 100; transform: none; border-radius: 0; } .theme-book .skip-link:focus, .theme-book .skip-link:focus-visible { left: 0.5rem; outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .theme-book .shell { width: var(--shell-max); margin-inline: auto; padding-left: max(var(--shell-pad-x), env(safe-area-inset-left, 0px)); padding-right: max(var(--shell-pad-x), env(safe-area-inset-right, 0px)); box-sizing: border-box; } /* Header: editorial navy bar */ .theme-book .site-header { z-index: 50; border-bottom: 1px solid var(--header-edge); background: linear-gradient(180deg, var(--header-surface-soft) 0%, var(--header-surface) 100%); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 24px -8px rgba(0, 0, 0, 0.45); } .theme-book .site-header::before { display: none; } /* Mobile full-screen panel uses position:fixed; header backdrop-filter would trap it to the bar height */ .theme-book .site-header.is-nav-open { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; } .theme-book .site-header__ribbon { display: none !important; } .theme-book .site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem 1.25rem; min-height: 4.5rem; flex-wrap: nowrap; width: min(1320px, 96vw); max-width: 100%; } .theme-book .logo { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(0.78rem, 0.9vw + 0.65rem, 0.95rem); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; line-height: 1.2; color: var(--header-text); display: block; transition: color 0.2s ease, opacity 0.2s ease; } .theme-book .logo:hover { color: #fff; opacity: 1; } .theme-book .logo:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.75); outline-offset: 4px; border-radius: 10px; } .theme-book .nav { display: none; align-items: center; gap: 0.12rem; flex-wrap: nowrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(247, 243, 234, 0.35) transparent; } .theme-book .nav::-webkit-scrollbar { height: 4px; } .theme-book .nav::-webkit-scrollbar-thumb { background: rgba(247, 243, 234, 0.35); border-radius: 999px; } .theme-book .nav a { font-family: var(--font-ui); text-decoration: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--header-muted); padding: 0.52rem 0.88rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .theme-book .nav a:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.65); outline-offset: 2px; } .theme-book .nav a:not(.nav__cta)::after { display: none; } .theme-book .nav a:not(.nav__cta):hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .theme-book .nav__cta { margin-left: 0.25rem; padding: 0.55rem 1.35rem !important; background: linear-gradient(180deg, #faf8f4 0%, #f0ebe3 100%); color: var(--color-navy-deep) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 8px 22px -6px rgba(0, 0, 0, 0.35); } .theme-book .nav__cta:hover { color: #0a1520 !important; filter: brightness(1.03); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 12px 32px -8px rgba(0, 0, 0, 0.4); transform: none; } .theme-book .nav-shell { display: none; } .theme-book .nav-toggle { width: 38px; height: 38px; border: 1px solid var(--header-edge); border-radius: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); color: inherit; } .theme-book .nav-toggle:hover { border-color: rgba(255, 248, 240, 0.35); background: rgba(255, 255, 255, 0.1); } .theme-book .nav-toggle:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.65); outline-offset: 2px; } .theme-book .nav-toggle[aria-expanded="true"] { border-color: rgba(255, 248, 240, 0.38); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .theme-book .nav-toggle__bar { width: 17px; height: 2px; border-radius: 1px; background: #f7f3ea; position: relative; transition: background 0.22s var(--ease-smooth); } .theme-book .nav-toggle__bar::before, .theme-book .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 1px; background: #f7f3ea; transition: transform 0.28s var(--ease-smooth), top 0.28s var(--ease-smooth), background 0.22s ease; } .theme-book .nav-toggle__bar::before { top: -5px; } .theme-book .nav-toggle__bar::after { top: 5px; } .theme-book .nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; } .theme-book .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); } .theme-book .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); } .theme-book .site-header__menu { position: relative; z-index: 20; flex-shrink: 0; align-self: center; } .theme-book .nav-backdrop { position: fixed; inset: 0; z-index: 200; margin: 0; padding: 0; border: 0; background: #0a0705; backdrop-filter: none; -webkit-backdrop-filter: none; cursor: pointer; } .theme-book .nav-backdrop[hidden] { display: none !important; } @keyframes theme-nav-drawer-in { from { transform: translateX(100%); opacity: 0.96; } to { transform: translateX(0); opacity: 1; } } /* Panel: right drawer (typical mobile pattern), not full-screen slab */ .theme-book .nav-panel { margin: 0; padding: 0; list-style: none; } .theme-book .nav-panel[hidden] { display: none !important; } body.theme-book.nav-open .nav-panel:not([hidden]) { position: fixed; top: max(0.65rem, env(safe-area-inset-top, 0px)); right: max(0.45rem, env(safe-area-inset-right, 0px)); bottom: auto; left: auto; width: min(13.5rem, 70vw); max-width: calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: auto; max-height: calc( 100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) ); min-height: 0; z-index: 210; margin: 0 0 max(0.65rem, env(safe-area-inset-bottom, 0px)) 0; padding: 0; border-radius: 14px; border: 1px solid rgba(255, 248, 240, 0.12); background: linear-gradient(180deg, #3e2b1e 0%, #2f221a 52%, #261c14 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.32); display: flex !important; flex-direction: column; overflow: hidden; box-sizing: border-box; animation: theme-nav-drawer-in 0.32s var(--ease-smooth) forwards; } @media (prefers-reduced-motion: reduce) { body.theme-book.nav-open .nav-panel:not([hidden]) { animation: none; transform: none; opacity: 1; } } .theme-book .nav-panel__header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.5rem 0.65rem 0.75rem; border-bottom: 1px solid rgba(255, 248, 240, 0.12); background: rgba(0, 0, 0, 0.12); } .theme-book .nav-panel__brand { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; color: #faf3ea; line-height: 1.25; padding: 0.25rem 0; max-width: 9.5rem; } .theme-book .nav-panel__brand:hover { color: #fff; } .theme-book .nav-panel__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(255, 248, 240, 0.22); border-radius: 10px; background: rgba(255, 248, 240, 0.08); color: #faf3ea; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .theme-book .nav-panel__close:hover { background: rgba(255, 248, 240, 0.14); border-color: rgba(255, 248, 240, 0.35); } .theme-book .nav-panel__close:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.85); outline-offset: 2px; } .theme-book .nav-panel__close-icon { position: relative; display: block; width: 18px; height: 18px; } .theme-book .nav-panel__close-icon::before, .theme-book .nav-panel__close-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 1px; background: currentColor; } .theme-book .nav-panel__close-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .theme-book .nav-panel__close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); } .theme-book .nav-panel__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.45rem 0.55rem 0.85rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.4rem; align-content: start; } .theme-book .nav-panel__body > a { font-family: var(--font-ui); font-weight: 600; font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.55rem 0.35rem; margin: 0; text-decoration: none; color: rgba(253, 246, 238, 0.95); border-radius: 8px; line-height: 1.25; border: 1px solid rgba(255, 248, 240, 0.08); background: rgba(0, 0, 0, 0.12); text-align: center; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .theme-book .nav-panel__body > a:hover:not(.nav__cta), .theme-book .nav-panel__body > a:focus-visible:not(.nav__cta) { background: rgba(255, 248, 240, 0.07); color: #fff; } .theme-book .nav-panel__body > a.nav__cta { grid-column: 1 / -1; margin: 0.35rem 0 0; padding: 0.62rem 0.75rem; text-align: center; letter-spacing: 0.07em; font-size: 0.65rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px; color: var(--color-navy-deep) !important; background: linear-gradient(180deg, #faf8f4 0%, #f0ebe3 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset; } .theme-book .nav-panel__body > a.nav__cta:hover { filter: brightness(1.03); color: #1a120d !important; } @media (min-width: 768px) { .theme-book .nav-backdrop { display: none !important; } .theme-book .nav { display: flex; } .theme-book .site-header__menu { display: none; } .theme-book .nav-panel { display: none !important; } } .theme-book .site-header.is-scrolled { background: linear-gradient(180deg, var(--header-surface-soft) 0%, var(--header-surface) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px -10px rgba(0, 0, 0, 0.5); } /* Hero (Patty layout) */ .theme-book .hero.section--hero { padding-top: clamp(2rem, 5vw, 3.35rem); padding-bottom: clamp(2rem, 5vw, 3rem); padding-inline: 0; overflow: visible; position: relative; min-height: max(560px, calc(100svh - 4.5rem)); background: radial-gradient(ellipse 95% 75% at 15% 20%, rgba(255, 255, 255, 0.45) 0%, transparent 52%), radial-gradient(ellipse 70% 55% at 92% 78%, rgba(207, 174, 136, 0.5) 0%, transparent 56%), linear-gradient(180deg, #f2e6d4 0%, #e8d4bc 45%, #dec0a1 100%); border-bottom: 1px solid var(--color-navy-border); } .theme-book .hero.section--hero::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(82%, 54rem); height: 1px; background: linear-gradient(90deg, transparent, rgba(62, 43, 30, 0.22), transparent); box-shadow: none; } .theme-book .hero__grid { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: stretch; } @media (min-width: 900px) { .theme-book .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; } .theme-book .hero__intro { display: flex; flex-direction: column; min-height: 0; } .theme-book .hero__content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; max-width: min(38rem, 100%); } .theme-book .hero__social-proof { margin-top: auto; } } .theme-book .hero__content { position: relative; padding: clamp(0.35rem, 2vw, 1rem) 0 clamp(0.35rem, 2vw, 1rem) clamp(1.1rem, 3vw, 1.35rem); } .theme-book .hero__content::before { content: ""; position: absolute; left: 0; top: 0.15rem; bottom: 0.5rem; width: 3px; border-radius: 4px; background: linear-gradient(180deg, rgba(62, 43, 30, 0.55) 0%, rgba(62, 43, 30, 0.25) 100%); opacity: 0.95; pointer-events: none; } .theme-book .hero__copy { margin: 0; } .theme-book .hero__series { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(62, 43, 30, 0.72); margin: 0 0 var(--hero-s2); line-height: 1.45; text-shadow: none; } .theme-book .hero__genre { font-family: var(--font-ui); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(62, 43, 30, 0.52); margin: 0 0 var(--hero-s4); line-height: 1.4; } .theme-book .hero__title { margin: 0 0 var(--hero-s3); padding-bottom: var(--hero-s3); border-bottom: 1px solid rgba(62, 43, 30, 0.16); } .theme-book .hero__title-text { display: block; font-family: var(--font-display); font-size: clamp(1.85rem, 4.2vw + 1rem, 3.35rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.03em; color: #3e2b1e; text-wrap: balance; filter: none; } .theme-book .hero__tagline { margin: 0 0 var(--hero-s4); padding: var(--hero-s1) 0 var(--hero-s2) 1.65rem; border: none; border-left: 2px solid rgba(62, 43, 30, 0.22); max-width: 38rem; position: relative; } .theme-book .hero__tagline::before { content: "\201C"; position: absolute; left: 0.35rem; top: -0.05rem; font-family: var(--font-display); font-size: 2.15rem; line-height: 1; color: rgba(62, 43, 30, 0.28); pointer-events: none; } .theme-book .hero__tagline p { font-family: var(--font-body); font-size: 1.06rem; font-style: italic; font-weight: 400; line-height: 1.72; letter-spacing: 0.015em; color: rgba(62, 43, 30, 0.88); margin: 0; text-wrap: pretty; text-shadow: none; } .theme-book .hero__author-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hero-s1); margin: 0 0 var(--hero-s4); padding-top: var(--hero-s3); border-top: 1px solid rgba(62, 43, 30, 0.14); } .theme-book .hero__author-strip-kicker { margin: 0; font-family: var(--font-ui); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(62, 43, 30, 0.48); } .theme-book .hero__author-strip-byline { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.28rem); font-weight: 600; line-height: 1.25; letter-spacing: 0.02em; color: #3e2b1e; } .theme-book .hero__author-strip-byline em { font-style: italic; font-weight: 600; margin-right: 0.2em; } /* Plain supporting line under the byline (no display type, no chips) */ .theme-book .hero__author-plain { margin: 0.15rem 0 0; max-width: 38rem; font-family: var(--font-body); font-size: 0.94rem; font-weight: 400; font-style: normal; line-height: 1.65; letter-spacing: 0.01em; color: rgba(62, 43, 30, 0.78); text-wrap: pretty; } .theme-book .hero__social-proof { margin-top: var(--hero-s4); padding-top: var(--hero-s3); border-top: 1px solid rgba(62, 43, 30, 0.12); display: flex; flex-direction: column; gap: 0.65rem; max-width: 26rem; } .theme-book .hero__chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; } .theme-book .hero__chip { font-family: var(--font-ui); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.65rem; border-radius: 999px; border: 1px solid rgba(62, 43, 30, 0.2); background: rgba(255, 254, 249, 0.55); color: rgba(62, 43, 30, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .theme-book .hero__chip--accent { border-color: rgba(62, 43, 30, 0.28); background: rgba(62, 43, 30, 0.1); color: #3e2b1e; } .theme-book .btn { font-family: var(--font-ui); display: inline-flex; align-items: center; justify-content: center; padding: 0.82rem 1.5rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: transform 0.24s var(--ease-smooth), box-shadow 0.24s ease, background 0.24s ease, filter 0.24s ease, border-color 0.24s ease; } .theme-book .btn__text { position: relative; top: 0.5px; } .theme-book .btn--primary { background: linear-gradient(180deg, #faf8f4 0%, #f0ebe3 100%); color: var(--color-navy-deep); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 10px 28px -8px rgba(0, 0, 0, 0.4); } .theme-book .btn--primary:hover { color: #0a1520; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.45); } .theme-book .btn--primary:focus-visible { outline: 2px solid rgba(201, 160, 107, 0.85); outline-offset: 3px; } .theme-book .btn--ghost { background: rgba(253, 249, 243, 0.72); color: var(--color-chocolate-deep); border: 2px solid rgba(107, 61, 50, 0.28); backdrop-filter: blur(8px); } .theme-book .btn--ghost:hover { background: #fffefb; border-color: rgba(107, 61, 50, 0.42); transform: translateY(-2px); } .theme-book .btn--ghost:focus-visible { outline: 2px solid rgba(201, 160, 107, 0.65); outline-offset: 3px; } .theme-book .hero .hero__btn-primary.btn--primary { letter-spacing: 0.1em; } .theme-book .hero .hero__btn-ghost.btn--ghost { border-width: 1px; border-color: rgba(62, 43, 30, 0.35); color: #3e2b1e; background: rgba(255, 254, 249, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } .theme-book .hero .hero__btn-ghost.btn--ghost:hover { background: rgba(255, 254, 249, 0.72); border-color: rgba(62, 43, 30, 0.48); color: #2a1e15; } .theme-book .hero .hero__btn-ghost.btn--ghost:focus-visible { outline: 2px solid rgba(201, 160, 107, 0.75); outline-offset: 3px; } .theme-book .hero__btn-primary, .theme-book .hero__btn-ghost { flex: 1 1 0; min-width: 0; justify-content: center; } .theme-book .hero__visual { position: relative; display: flex; justify-content: center; align-items: center; } @media (min-width: 900px) { .theme-book .hero__visual { justify-content: flex-end; align-items: stretch; align-self: stretch; height: 100%; min-height: 0; padding-right: 0; } } .theme-book .hero__glow { display: none; } @media (prefers-reduced-motion: no-preference) { @keyframes theme-hero-glow-breathe { 0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.09); } } .theme-book .hero__glow { animation: theme-hero-glow-breathe 9s ease-in-out infinite; } } .theme-book .hero__book { position: relative; z-index: 1; width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; } @media (prefers-reduced-motion: no-preference) { @keyframes theme-hero-book-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .theme-book .hero__book { animation: theme-hero-book-float 5.5s ease-in-out infinite; } } @media (min-width: 900px) { .theme-book .hero__book { display: flex; justify-content: flex-end; align-items: center; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; max-width: 100%; } } .theme-book .hero__book::after { display: none; } .theme-book .hero__book-stage { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } @media (min-width: 900px) { .theme-book .hero__book-stage { justify-content: flex-end; } } .theme-book .hero__book-img { width: 100%; height: auto; max-width: min(560px, 100%); margin-inline: auto; display: block; border-radius: 12px; border: none; filter: drop-shadow(0 28px 48px rgba(45, 33, 24, 0.28)) drop-shadow(0 12px 24px rgba(45, 33, 24, 0.16)); mix-blend-mode: normal; } @media (min-width: 900px) { .theme-book .hero__book-img { width: 100%; max-width: 100%; max-height: min(90vh, 760px); object-fit: contain; object-position: right center; margin-inline: 0; margin-left: auto; } } /* Moment band: slightly deeper tan strip (still cover family) */ .theme-book .moment-band { position: relative; padding-block: 0.85rem; background: linear-gradient(90deg, #d4b896 0%, #cfae88 50%, #d4b896 100%); border-block: 1px solid rgba(62, 43, 30, 0.14); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .theme-book .moment-band__mesh { position: absolute; inset: 0; opacity: 0; background: transparent; pointer-events: none; } .theme-book .moment-band__fade { position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 5rem); z-index: 2; pointer-events: none; } .theme-book .moment-band__fade--left { left: 0; background: transparent; } .theme-book .moment-band__fade--right { right: 0; background: transparent; } .theme-book .moment-band__viewport { position: relative; z-index: 1; overflow: hidden; mask-image: none; -webkit-mask-image: none; } .theme-book .moment-band__track { display: flex; width: max-content; animation: theme-moment-marquee 46s linear infinite; } @keyframes theme-moment-marquee { to { transform: translateX(-50%); } } .theme-book .moment-band__row { display: flex; align-items: center; gap: 0.35rem 1.15rem; flex-shrink: 0; padding-inline: 0.5rem 1.75rem; } .theme-book .moment-band__chip { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(62, 43, 30, 0.9); white-space: nowrap; padding: 0.44rem 1rem; border-radius: 999px; border: 1px solid rgba(62, 43, 30, 0.18); background: rgba(255, 254, 249, 0.55); backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 2px 10px rgba(45, 33, 24, 0.08); } .theme-book .moment-band__dot { color: rgba(62, 43, 30, 0.35); font-size: 0.45rem; line-height: 1; user-select: none; } /* Particulars band (navy shell) */ .theme-book .section--book-details { position: relative; overflow: hidden; border-block: 1px solid var(--color-navy-border); } .theme-book .section--book-details .section__label { color: var(--color-on-navy-muted); } .theme-book .section--book-details .section__title, .theme-book .section--book-details .section__head h2 { color: var(--color-on-navy); background: none; -webkit-text-fill-color: unset; background-clip: unset; -webkit-background-clip: unset; filter: none; } .theme-book .section--book-details .section__lede { color: var(--color-on-navy-muted); } /* --- Per-section backgrounds (warm book palette, each band distinct) --- */ .theme-book .quote { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.08); background-color: var(--color-ink-cover); background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.06) 0%, transparent 38%, rgba(0, 0, 0, 0.14) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } .theme-book .quote::before { display: none; } .theme-book .quote > * { position: relative; z-index: 1; } .theme-book .highlights { position: relative; border-bottom: 1px solid var(--color-navy-border); } .theme-book .highlights::before { display: none; } .theme-book .highlights__inner { position: relative; z-index: 1; } .theme-book .section--thesis { position: relative; border-top: 1px solid var(--color-navy-border); } .theme-book .section--thesis::after { display: none; } .theme-book .section--thesis > * { position: relative; z-index: 1; } .theme-book .section--inside { border-top: 1px solid var(--color-navy-border); } .theme-book .page-section--facts { position: relative; border-top: 1px solid var(--color-navy-border); } .theme-book .page-section--facts::before { display: none; } .theme-book .page-section--facts > * { position: relative; z-index: 1; } .theme-book .page-section--scope { border-top: 1px solid var(--color-navy-border); } .theme-book .band--paper { border-top: 1px solid var(--color-navy-border); } .theme-book .page-section--toc { border-top: 1px solid var(--color-navy-border); } .theme-book .page-section--depth { position: relative; border-top: 1px solid var(--color-navy-border); } .theme-book .page-section--depth::before { display: none; } .theme-book .page-section--depth > * { position: relative; z-index: 1; } .theme-book .faq { border-top: 1px solid var(--color-navy-border); } .theme-book .band--deep.band--contact { background-color: #1c1410; background-image: radial-gradient(ellipse 120% 80% at 20% 0%, rgba(222, 192, 161, 0.09), transparent 55%), radial-gradient(ellipse 90% 60% at 100% 100%, rgba(62, 43, 30, 0.35), transparent 50%), linear-gradient(180deg, #2a1f18 0%, #1c1410 45%, #16100c 100%); border-top: 1px solid rgba(255, 248, 240, 0.08); } .theme-book .band--deep::before { display: none; } /* Layered navy shells: depth without heavy gradients */ .theme-book .section--book-details, .theme-book .highlights, .theme-book .section--thesis, .theme-book .section--inside, .theme-book .page-section--facts, .theme-book .page-section--scope, .theme-book .band--paper, .theme-book .page-section--toc, .theme-book .page-section--depth, .theme-book .faq, .theme-book .section--book-showcase { background-image: var(--section-sheen), var(--section-glow), var(--section-inner-glow); background-color: var(--color-navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* --- Modern professional section system (editorial / product polish) --- */ .theme-book .section:not(.section--hero), .theme-book .page-section, .theme-book .quote, .theme-book .highlights, .theme-book .faq, .theme-book .band { padding-block: clamp(4.25rem, 9vw, 7.75rem); } .theme-book .section__head, .theme-book .page-section__head, .theme-book .inside-section__head, .theme-book .faq__head, .theme-book .highlights__head { margin-bottom: clamp(2.35rem, 4.5vw, 3.5rem); position: relative; } /* Subtle rule under centered section intros */ .theme-book .section__head::after, .theme-book .page-section__head::after, .theme-book .inside-section__head::after, .theme-book .faq__head::after { content: ""; display: block; width: min(4rem, 18vw); height: 2px; margin: clamp(1.35rem, 2.8vw, 1.85rem) auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(62, 43, 30, 0.22), transparent); opacity: 0.9; } .theme-book .highlights__head::after { content: ""; display: block; width: min(4rem, 18vw); height: 2px; margin: clamp(1.15rem, 2.5vw, 1.55rem) auto 0; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(62, 43, 30, 0.22), transparent); opacity: 0.9; } /* Eyebrow: ink on parchment field */ .theme-book .section__head .section__label, .theme-book .page-section__head .section__label, .theme-book .inside-section__head .section__label, .theme-book .faq__head .section__label, .theme-book .author-block .section__label { font-family: var(--font-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(62, 43, 30, 0.88); padding: 0.42rem 1.05rem; border-radius: 999px; background: rgba(255, 254, 249, 0.55); border: 1px solid rgba(62, 43, 30, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset; } .theme-book .highlights__kicker { font-family: var(--font-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; color: rgba(62, 43, 30, 0.88); padding: 0.42rem 1.05rem; border-radius: 999px; background: rgba(255, 254, 249, 0.55); border: 1px solid rgba(62, 43, 30, 0.16); display: inline-block; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset; } .theme-book .section__head .section__label::after, .theme-book .page-section__head .section__label::after, .theme-book .inside-section__head .section__label::after, .theme-book .faq__head .section__label::after, .theme-book .author-block .section__label::after { display: none; } /* Left-aligned scope keeps classic rule */ .theme-book .scope-copy .section__label { padding: 0; border-radius: 0; background: none; border: none; box-shadow: none; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--color-on-navy-muted); } .theme-book .scope-copy .section__label::after { display: block; } /* Display titles: tighter tracking, optical balance */ .theme-book .section__head .section__title, .theme-book .page-section__head .section__title, .theme-book .inside-section__head .section__title, .theme-book .faq__head .section__title, .theme-book .highlights__title, .theme-book .author-block .section__title { letter-spacing: -0.025em; font-weight: 700; line-height: 1.08; max-width: min(100%, 30rem); margin-left: auto; margin-right: auto; color: var(--color-on-navy); } .theme-book .section--book-details .section__head > h2:first-of-type { letter-spacing: -0.025em; font-weight: 700; line-height: 1.08; max-width: min(100%, 30rem); margin-left: auto; margin-right: auto; } .theme-book .section__lede, .theme-book .page-section__intro, .theme-book .faq__lede { max-width: 52ch; margin-left: auto; margin-right: auto; font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.14rem); line-height: 1.68; color: var(--color-on-navy-muted); } .theme-book .inside-section__head .section__lede { max-width: 42ch; } .theme-book .scope-copy .section__title { max-width: none; margin-left: 0; margin-right: 0; letter-spacing: -0.02em; color: var(--color-on-navy); } .theme-book .depth-block .section__title { max-width: none; margin-left: 0; margin-right: 0; letter-spacing: -0.02em; } .theme-book .page-section--scope .scope-lede, .theme-book .page-section--scope .scope-list { color: var(--color-on-navy-muted); } .theme-book .page-section--scope .scope-list li strong { color: var(--color-on-navy); } .theme-book .scope-copy .section__label::after { background: rgba(62, 43, 30, 0.28); opacity: 1; } .theme-book .page-section--scope .scope-list li::before { background: rgba(62, 43, 30, 0.42); box-shadow: 0 0 0 2px rgba(62, 43, 30, 0.1); opacity: 1; } .theme-book .band--paper .band__text { color: var(--color-on-navy-muted); } /* Elevated paper surfaces on navy */ .theme-book .pillar, .theme-book .highlights__item, .theme-book .book-details__card, .theme-book .facts-card, .theme-book .faq__item, .theme-book .quote__inner, .theme-book .inside-list__item, .theme-book .toc-panel, .theme-book .depth-block, .theme-book .scope-aside { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--card-border); background-color: #faf6ef; background-image: linear-gradient(118deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 252, 247, 0) 38%), radial-gradient(ellipse 100% 75% at 100% -5%, rgba(222, 192, 161, 0.28), transparent 52%), radial-gradient(ellipse 70% 50% at 0% 105%, rgba(62, 43, 30, 0.055), transparent 52%), radial-gradient(ellipse 55% 45% at 92% 88%, rgba(224, 100, 72, 0.07), transparent 58%), linear-gradient(178deg, #fffefb 0%, #f9f2e8 38%, #f0e4d4 72%, #e8d9c4 100%); backdrop-filter: blur(16px) saturate(1.12); -webkit-backdrop-filter: blur(16px) saturate(1.12); box-shadow: var(--card-shadow); transform: translate3d(var(--hover-x, 0), var(--hover-y, 0), 0); transition: transform 0.38s var(--ease-smooth), box-shadow 0.38s ease, border-color 0.32s ease, filter 0.32s ease; } .theme-book .quote__inner { overflow: visible; border-radius: var(--radius-xl); } /* Specular paper sheen (under copy; no z-index hacks on children) */ .theme-book .pillar::before, .theme-book .highlights__item::before, .theme-book .book-details__card::before, .theme-book .facts-card::before, .theme-book .faq__item::before, .theme-book .inside-list__item::before, .theme-book .toc-panel::before, .theme-book .scope-aside::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 36%, transparent 58%, rgba(62, 43, 30, 0.03) 100% ); opacity: 0.85; pointer-events: none; z-index: 0; } .theme-book .pillar > *, .theme-book .highlights__item > *, .theme-book .book-details__card > *, .theme-book .facts-card > *, .theme-book .faq__item > *, .theme-book .inside-list__item > *, .theme-book .toc-panel > *, .theme-book .scope-aside > * { position: relative; z-index: 1; } .theme-book .book-details__grid { gap: 1.1rem 1.2rem; } .theme-book .book-details__card { padding: 1.15rem 1.2rem; } .theme-book .facts-card { padding: 1.25rem 1.35rem; } .theme-book .highlights__item { padding: 1.35rem 1.45rem; } .theme-book .highlights__value { font-size: clamp(1.22rem, 0.35vw + 1.08rem, 1.32rem); letter-spacing: 0.015em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } .theme-book .inside-list__n { background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 252, 247, 0) 55%), linear-gradient(178deg, rgba(62, 43, 30, 0.1) 0%, rgba(62, 43, 30, 0.06) 100%); border-color: rgba(62, 43, 30, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 6px 16px -10px rgba(45, 33, 24, 0.18); transition: transform 0.32s var(--ease-smooth), box-shadow 0.32s ease, border-color 0.28s ease; } .theme-book .inside-list__item:hover .inside-list__n { transform: scale(1.04); border-color: rgba(224, 100, 72, 0.32); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 8px 22px -10px rgba(224, 100, 72, 0.2); } /* Spotlight: framed feature card on navy */ .theme-book .book-showcase { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(1.2rem, 3.2vw, 1.85rem); border: 1px solid var(--card-border); background-color: #faf6ef; background-image: linear-gradient(122deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 252, 247, 0) 40%), radial-gradient(ellipse 90% 60% at 95% 8%, rgba(222, 192, 161, 0.2), transparent 55%), linear-gradient(178deg, #fffefb 0%, #f7efe2 55%, #efe4d2 100%); box-shadow: var(--card-shadow); gap: 1.35rem; } .theme-book .book-showcase::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(175deg, rgba(255, 255, 255, 0.35) 0%, transparent 42%); opacity: 0.75; pointer-events: none; z-index: 0; } .theme-book .book-showcase > * { position: relative; z-index: 1; } .theme-book .book-showcase .section__label { font-family: var(--font-ui); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-chocolate); padding: 0.4rem 1rem; border-radius: 999px; background: rgba(62, 43, 30, 0.06); border: 1px solid rgba(62, 43, 30, 0.12); display: inline-block; margin-bottom: 0.35rem; box-shadow: none; } .theme-book .book-showcase .section__title { letter-spacing: -0.02em; margin-bottom: 0.65rem; } .theme-book .book-showcase__img { border: none; box-shadow: 0 14px 40px -18px rgba(45, 33, 24, 0.22); } .theme-book .book-showcase__buy-btn { color: #ece6d9; } .theme-book .book-showcase__buy-btn:hover { color: #faf6ef; } .theme-book .book-showcase__buy-btn:focus-visible { outline-color: var(--color-chocolate, #3e2b1e); } .theme-book .book-showcase__buy-btn--ghost { color: #3e2b1e; background: rgba(255, 254, 249, 0.78); border: 1px solid rgba(62, 43, 30, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset; } .theme-book .book-showcase__buy-btn--ghost:hover { color: #2a1d14; background: #fffefb; border-color: rgba(62, 43, 30, 0.28); } .theme-book .book-showcase__buy-btn--ghost:focus-visible { outline-color: rgba(62, 43, 30, 0.45); } .theme-book .highlights__list { gap: 1.15rem; } @media (min-width: 700px) { .theme-book .highlights__list { gap: 1.35rem; } } .theme-book .scope-grid { gap: clamp(2rem, 4vw, 2.85rem); } @media (min-width: 900px) { .theme-book .scope-grid { gap: clamp(2.5rem, 4.5vw, 3.25rem); } } .theme-book .pillar:hover, .theme-book .highlights__item:hover, .theme-book .book-details__card:hover, .theme-book .facts-card:hover, .theme-book .inside-list__item:hover { transform: translate3d(var(--hover-x, 0), calc(-6px + var(--hover-y, 0)), 0); border-color: rgba(62, 43, 30, 0.26); box-shadow: var(--card-shadow-hover); filter: saturate(1.04); } .theme-book .pillar:hover::before, .theme-book .highlights__item:hover::before, .theme-book .book-details__card:hover::before, .theme-book .facts-card:hover::before, .theme-book .inside-list__item:hover::before { opacity: 1; } .theme-book .pillar__icon { border-radius: 16px; width: 3.5rem; height: 3.5rem; transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease, border-color 0.28s ease, background 0.28s ease; } .theme-book .pillar:hover .pillar__icon { transform: scale(1.06); border-color: rgba(224, 100, 72, 0.28); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 10px 28px -12px rgba(224, 100, 72, 0.22); } .theme-book .faq__item { border-radius: var(--radius-lg); overflow: hidden; } .theme-book .faq__item:hover:not([open]) { transform: translate3d(var(--hover-x, 0), calc(-2px + var(--hover-y, 0)), 0); border-color: rgba(62, 43, 30, 0.2); box-shadow: var(--card-shadow-hover); } .theme-book .faq__item[open] { border-color: rgba(62, 43, 30, 0.26); filter: saturate(1.03); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 0 0 1px rgba(255, 252, 247, 0.5) inset, 0 0 0 1px rgba(62, 43, 30, 0.06), 0 12px 36px -18px rgba(224, 100, 72, 0.1), 0 28px 56px -28px rgba(45, 33, 24, 0.16), 0 56px 100px -44px rgba(35, 22, 18, 0.12); } .theme-book .faq__item[open]::before { opacity: 0.92; } .theme-book .faq__q { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; } .theme-book .faq__q:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(62, 43, 30, 0.28); } .theme-book .author-aside { border-radius: 20px; border-left: 4px solid rgba(62, 43, 30, 0.55); background: var(--card-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--card-shadow); } .theme-book .theme-chips li { padding: 0.42rem 0.95rem; font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(45, 32, 26, 0.1); box-shadow: 0 1px 2px rgba(22, 16, 12, 0.05); } .theme-book .depth-guide__steps span:first-child { background: linear-gradient(145deg, #3e2b1e, #5c4030); box-shadow: 0 2px 8px rgba(45, 33, 24, 0.2); } /* Contact: modern card on ink field */ .theme-book .contact-eyebrow { color: rgba(222, 192, 161, 0.75); } .theme-book .contact-heading { font-family: var(--font-display); color: #faf3ea; } .theme-book .contact-lede { color: rgba(250, 243, 234, 0.72); } .theme-book .contact-card { border-color: rgba(255, 248, 240, 0.12); background: rgba(255, 248, 240, 0.05); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); box-shadow: 0 1px 0 rgba(255, 248, 240, 0.08) inset, 0 28px 56px -32px rgba(0, 0, 0, 0.55); } .theme-book .contact-card__mail { color: #2a1f18; border-color: rgba(255, 255, 255, 0.42); } .theme-book .contact-card__mail:hover { color: #1a120d; } .theme-book .contact-card__mail:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.85); outline-offset: 3px; } .theme-book .contact-card__footer { border-top-color: rgba(255, 248, 240, 0.08); background: rgba(0, 0, 0, 0.2); } .theme-book .contact-card__secondary:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.65); outline-offset: 3px; } .theme-book .band--deep .btn.btn--light { background: linear-gradient(180deg, #faf8f4 0%, #f0ebe3 100%); color: var(--color-navy-deep); border: 1px solid rgba(255, 255, 255, 0.38); font-weight: 650; letter-spacing: 0.06em; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 10px 28px -8px rgba(0, 0, 0, 0.35); } .theme-book .band--deep .btn.btn--light:hover { transform: translateY(-2px); color: #1a120d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.42); } .theme-book .band--deep .btn.btn--light:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.9); outline-offset: 3px; } .theme-book .band--deep .link-ghost { border-bottom-color: rgba(255, 255, 255, 0.32); } .theme-book .band--deep .link-ghost:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.62); } .theme-book .band--deep .link-ghost:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.65); outline-offset: 3px; border-radius: 4px; } /* Footer: deepest cover ink */ .theme-book .site-footer { background-color: #261c14; background-image: linear-gradient(180deg, #2d2118 0%, #261c14 55%, #1f1610 100%); border-top: 1px solid rgba(255, 248, 240, 0.1); } .theme-book .site-footer__main { padding-block: clamp(2rem, 4.5vw, 2.9rem); } .theme-book .site-footer__monogram { background: rgba(255, 248, 240, 0.06); border-color: rgba(255, 248, 240, 0.2); color: #faf3ea; } .theme-book .site-footer__wordmark-kicker { color: rgba(222, 192, 161, 0.88); } .theme-book .site-footer__h { color: rgba(250, 243, 234, 0.9); } .theme-book .site-footer__list a { color: rgba(250, 243, 234, 0.75); } .theme-book .site-footer__list a:hover { color: #fff; border-bottom-color: rgba(222, 192, 161, 0.45); } .theme-book .site-footer__cta-mail { border-bottom-color: rgba(222, 192, 161, 0.4); } .theme-book .site-footer__cta-mail:hover { color: #fff; border-bottom-color: rgba(250, 243, 234, 0.55); } .theme-book .site-footer__wordmark:focus-visible { outline: 2px solid rgba(222, 192, 161, 0.55); outline-offset: 4px; } .theme-book h1, .theme-book h2, .theme-book h3 { font-family: var(--font-display); } @media (prefers-reduced-motion: reduce) { .theme-book .pillar, .theme-book .highlights__item, .theme-book .book-details__card, .theme-book .facts-card, .theme-book .faq__item, .theme-book .inside-list__item { transform: none; } .theme-book .pillar:hover, .theme-book .highlights__item:hover, .theme-book .book-details__card:hover, .theme-book .facts-card:hover, .theme-book .inside-list__item:hover, .theme-book .faq__item:hover:not([open]) { transform: none; filter: none; } .theme-book .pillar:hover .pillar__icon { transform: none; } .theme-book .inside-list__item:hover .inside-list__n { transform: none; } .theme-book .faq__item[open] { filter: none; } .theme-book .moment-band__track { animation: none; transform: none; flex-wrap: wrap; justify-content: center; width: 100%; max-width: min(52rem, 100%); margin-inline: auto; padding: 0.35rem var(--shell-pad-x); box-sizing: border-box; } .theme-book .moment-band__row[aria-hidden="true"] { display: none; } .theme-book .moment-band__viewport { overflow: visible; mask-image: none; -webkit-mask-image: none; } .theme-book .moment-band__row:not([aria-hidden="true"]) { flex-wrap: wrap; justify-content: center; row-gap: 0.45rem; column-gap: 0.85rem; padding-inline: var(--shell-pad-x); max-width: 100%; } .theme-book .hero__book { animation: none !important; } .theme-book .hero__glow { animation: none !important; opacity: 0.88; transform: translate(-50%, -50%); } } /* --- Narrow screens (≤899px): layout + overflow; desktop unchanged at 900px+ --- */ @media (max-width: 899px) { html.theme-book { overflow-x: clip; --shell-pad-x: clamp(1rem, 4vw, 1.65rem); } body.theme-book { overflow-x: clip; } .theme-book .site-header .shell { width: 100%; max-width: 100%; box-sizing: border-box; } .theme-book .hero.section--hero { min-height: 0; padding-top: clamp(1.1rem, 3.5vw, 2rem); padding-bottom: clamp(1.35rem, 4.5vw, 2.75rem); } .theme-book .hero__title-text { font-size: clamp(1.42rem, 5.2vw + 0.82rem, 2.55rem); line-height: 1.08; } .theme-book .hero__tagline p { font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.06rem); } .theme-book .hero__content { padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } .theme-book .moment-band__chip { font-size: clamp(0.56rem, 2.6vw, 0.6875rem); letter-spacing: 0.1em; padding: 0.38rem 0.78rem; } .theme-book .moment-band__row { gap: 0.3rem 0.85rem; } } @media (max-width: 767px) { .theme-book .nav-panel__body > a { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; } .theme-book .nav-panel__body > a.nav__cta { min-height: 46px; } .theme-book .nav-toggle { width: 44px; height: 44px; } }