/* ========================================================================== The Father's Day Potato — site styles Mobile-first; desktop overrides at min-width: 900px. ========================================================================== */ /* ----- Type pairings (switched via [data-type-pairing] on ) -------- */ :root[data-type-pairing="storybook"] { --font-display: "Caprasimo", "Georgia", serif; --font-body: "Quicksand", system-ui, sans-serif; --display-tracking: 0; --display-weight: 400; } :root[data-type-pairing="editorial"] { --font-display: "Fraunces", "Caprasimo", serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; --display-tracking: -0.02em; --display-weight: 600; } :root[data-type-pairing="playful"] { --font-display: "Sniglet", "Caprasimo", system-ui; --font-body: "Nunito", system-ui, sans-serif; --display-tracking: 0; --display-weight: 800; } /* ----- Palettes (switched via [data-palette] on ) ----------------- */ :root[data-palette="cover"] { --sky-1: #d6ecf3; --sky-2: #b8dceb; --sky-3: #8fc3d8; --paper: #f7eedf; --paper-2: #efe2ca; --ink: #1a2438; --ink-soft: #2c3a52; --tan: #d99a5e; --tan-deep: #b87538; --brick: #b94a3a; --ochre: #e8b04a; --rose: #e98a78; --green: #3f6b4a; } :root[data-palette="warm"] { --sky-1: #f5e8d3; --sky-2: #ecd4ad; --sky-3: #d9b27e; --paper: #fbf3e3; --paper-2: #f3e4c5; --ink: #3b2a1d; --ink-soft: #5e4632; --tan: #d99a5e; --tan-deep: #a55f2a; --brick: #c2462e; --ochre: #e8b04a; --rose: #e98a78; --green: #6a8a4a; } :root[data-palette="dusk"] { --sky-1: #e7d8eb; --sky-2: #c9b3d9; --sky-3: #9b86c2; --paper: #f4ecde; --paper-2: #e8d8c4; --ink: #2a1f3d; --ink-soft: #4a3d63; --tan: #d99a5e; --tan-deep: #a55f2a; --brick: #c54f4a; --ochre: #e8b04a; --rose: #ea8f8a; --green: #4f7a64; } /* ----- Page reset ------------------------------------------------------- */ html, body { margin: 0; padding: 0; background: var(--paper); } body.fdp-body { font-family: var(--font-body); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fdp-root, .fdp-root *, .fdp-root *::before, .fdp-root *::after { box-sizing: border-box; } .fdp-root { font-family: var(--font-body); color: var(--ink); background: var(--paper); scroll-behavior: smooth; } .fdp-root img { max-width: 100%; display: block; } .fdp-root h1, .fdp-root h2, .fdp-root h3, .fdp-root .fdp-display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); color: var(--ink); line-height: 1.05; margin: 0; } .fdp-root p { margin: 0; } .fdp-root button { font: inherit; cursor: pointer; } .fdp-root section { position: relative; } /* ----- Texture system --------------------------------------------------- */ .fdp-root[data-texture="paper"] .tex-bg { background-image: radial-gradient(circle at 15% 20%, rgba(0,0,0,0.025) 0px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.02) 0px, transparent 1px), radial-gradient(circle at 40% 80%, rgba(0,0,0,0.025) 0px, transparent 1px); background-size: 7px 7px, 11px 11px, 13px 13px; } .fdp-root[data-texture="flat"] .tex-bg { background-image: none; } .paper-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.7; } /* ----- Buttons ---------------------------------------------------------- */ .fdp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15px; border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; text-decoration: none; } .fdp-btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 rgba(0,0,0,0.12); } .fdp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.14); } .fdp-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid currentColor; } .fdp-btn-ghost:hover { background: rgba(34,50,77,0.06); } /* ----- Animations ------------------------------------------------------- */ @keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .wiggle:hover { animation: wiggle 0.6s ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float { animation: float 4s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.05); } } .twinkle { animation: twinkle 3.2s ease-in-out infinite; transform-origin: center; } .twinkle-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .twinkle-bg svg { display: block; } .twinkle { position: absolute; display: inline-block; } /* ----- Site shell ------------------------------------------------------- */ .fdp-root { width: 100%; max-width: 100%; overflow-x: hidden; position: relative; } /* ----- Nav -------------------------------------------------------------- */ .fdp-nav { position: sticky; top: 0; z-index: 10; background: rgba(247, 238, 223, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(34,50,77,0.08); } .fdp-nav__brand { font-family: var(--font-display); font-size: 17px; color: var(--ink); display: flex; align-items: center; min-width: 0; } .fdp-nav__brand .accent { color: var(--tan-deep); } .fdp-nav__logo { display: block; height: 36px; width: auto; max-width: 220px; object-fit: contain; } @media (min-width: 900px) { .fdp-nav__logo { height: 44px; max-width: 300px; } } .fdp-nav__menu-btn { background: transparent; border: none; padding: 6px; color: var(--ink); display: inline-flex; } .fdp-nav__links { display: none; } /* ----- Section base ----------------------------------------------------- */ .fdp-section { position: relative; overflow: hidden; } .fdp-section__inner { position: relative; z-index: 1; } .fdp-eyebrow { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brick); } .fdp-display { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--ink); } .text-tan-deep { color: var(--tan-deep); } .text-brick { color: var(--brick); } .text-ink { color: var(--ink); } /* ----- Hero ------------------------------------------------------------- */ .hero-sky { background: radial-gradient(120% 80% at 50% 0%, var(--sky-1) 0%, var(--sky-2) 60%, var(--sky-3) 100%); } .fdp-hero { padding: 36px 22px 60px; } .fdp-hero__inner { text-align: center; } .fdp-hero__pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,0.7); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; } .fdp-hero__title { font-size: 44px; line-height: 0.95; color: var(--ink); } .fdp-hero__lede { margin-top: 16px; font-size: 16px; color: var(--ink); padding: 0 8px; font-weight: 500; } .fdp-hero__cover-wrap { margin-top: 28px; position: relative; z-index: 1; display: flex; justify-content: center; } .fdp-cover-frame { width: 240px; transform: rotate(-2deg); box-shadow: 0 24px 50px -10px rgba(34,50,77,0.35), 0 6px 12px rgba(34,50,77,0.15); border-radius: 6px; overflow: hidden; border: 6px solid #fff; } .fdp-hero__cta { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; align-items: center; position: relative; z-index: 1; } .fdp-hero__cta .fdp-btn { min-width: 220px; } .fdp-hero__splat { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); width: 320px; height: 100px; background: radial-gradient(ellipse, rgba(217,154,94,0.35), transparent 70%); z-index: 0; } /* ----- About the Book --------------------------------------------------- */ .fdp-section--book { padding: 48px 22px; background: var(--paper); } .fdp-section--book h2 { font-size: 30px; text-align: center; margin: 8px 0 18px; } .fdp-prose { font-size: 16.5px; color: var(--ink); text-align: center; margin-bottom: 14px; line-height: 1.55; text-wrap: pretty; } .fdp-prose:last-child { margin-bottom: 0; } .fdp-prose strong { color: var(--brick); } .fdp-stat-grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fdp-stat-card { background: #fff; border-radius: 14px; padding: 14px 12px; text-align: center; border: 1px solid rgba(34,50,77,0.08); } .fdp-stat-card__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; color: var(--tan-deep); line-height: 1; } .fdp-stat-card__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; } /* ----- Why It Matters --------------------------------------------------- */ .fdp-section--why { padding: 52px 22px; background: var(--paper-2); } .fdp-section--why h2 { font-size: 28px; text-align: center; margin: 6px 0 22px; } .fdp-reasons { display: flex; flex-direction: column; gap: 12px; } .fdp-reason { background: #fff; border-radius: 16px; padding: 18px; border: 1px solid rgba(34,50,77,0.08); box-shadow: 0 2px 8px rgba(34,50,77,0.04); display: flex; gap: 14px; align-items: flex-start; } .fdp-reason__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; color: var(--tan-deep); line-height: 1; flex: 0 0 auto; min-width: 32px; } .fdp-reason__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; color: var(--ink); line-height: 1.25; margin-bottom: 6px; } .fdp-reason__sub { font-size: 14px; color: var(--ink); opacity: 0.78; line-height: 1.5; text-wrap: pretty; } /* ----- Potatoes --------------------------------------------------------- */ .fdp-section--potatoes { padding: 48px 22px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .fdp-section--potatoes h2 { font-size: 28px; text-align: center; margin-bottom: 6px; } .fdp-section--potatoes .fdp-section__sub { text-align: center; font-size: 14px; color: var(--ink); margin-bottom: 22px; font-weight: 500; } .fdp-potato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fdp-potato-grid--bottom { display: none; } .fdp-potato-card { background: #fff; border-radius: 18px; padding: 14px 12px 16px; text-align: center; border: 1px solid rgba(34,50,77,0.08); box-shadow: 0 4px 12px rgba(34,50,77,0.06); cursor: pointer; } .fdp-potato-card--sky { background: var(--sky-1); } .fdp-potato-card__svg { display: flex; justify-content: center; height: 130px; } .fdp-potato-card__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 15px; margin-top: 4px; color: var(--ink); } .fdp-potato-card__trait { font-size: 12px; color: var(--ink); margin-top: 2px; line-height: 1.35; opacity: 0.78; } /* On mobile we only show the first 6 — hide the 7th. */ .fdp-potato-grid > .fdp-potato-card:nth-child(n+7) { display: none; } /* ----- Praise ----------------------------------------------------------- */ .fdp-section--praise { padding: 48px 0; background: var(--paper); } .fdp-section--praise .fdp-section__head { text-align: center; margin-bottom: 18px; padding: 0 22px; position: relative; z-index: 1; } .fdp-section--praise h2 { font-size: 26px; margin-top: 6px; } .fdp-praise-track { display: flex; gap: 12px; overflow-x: auto; padding: 4px 22px 14px; scroll-snap-type: x mandatory; position: relative; z-index: 1; scrollbar-width: none; } .fdp-praise-track::-webkit-scrollbar { display: none; } .fdp-review { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border-radius: 16px; padding: 18px; border: 1px solid rgba(34,50,77,0.08); box-shadow: 0 2px 8px rgba(34,50,77,0.05); } .fdp-review__quote-mark { color: var(--ochre); font-size: 22px; line-height: 1; margin-bottom: 4px; font-family: serif; } .fdp-review__body { font-size: 15px; line-height: 1.4; color: var(--ink); text-wrap: pretty; } .fdp-review__attr { margin-top: 10px; font-size: 12px; color: var(--brick); font-weight: 700; } /* ----- Author ----------------------------------------------------------- */ .fdp-section--author { padding: 48px 22px; background: linear-gradient(180deg, var(--paper) 0%, var(--sky-1) 100%); } .fdp-author__head { text-align: center; margin-bottom: 16px; } .fdp-author__photo-wrap { display: flex; justify-content: center; margin-bottom: 16px; } .fdp-author__photo { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--tan), var(--ochre)); border: 6px solid #fff; box-shadow: 0 12px 30px -8px rgba(34,50,77,0.3); display: grid; place-items: center; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; overflow: hidden; } .fdp-author__photo img { width: 100%; height: 100%; object-fit: cover; } .fdp-author h2 { font-size: 28px; text-align: center; margin-bottom: 4px; } .fdp-author__role { text-align: center; font-size: 13px; color: var(--brick); margin-bottom: 14px; font-style: italic; font-weight: 600; } .fdp-author__bio { font-size: 15.5px; color: var(--ink); text-align: center; text-wrap: pretty; line-height: 1.55; } .fdp-author__credit { font-size: 13px; color: var(--ink); text-align: center; margin-top: 14px; } /* ----- Activities ------------------------------------------------------- */ .fdp-section--activities { padding: 48px 22px; background: var(--sky-1); } .fdp-section--activities .fdp-section__head { text-align: center; margin-bottom: 16px; } .fdp-section--activities h2 { font-size: 26px; margin-top: 6px; } .fdp-activities { display: flex; flex-direction: column; gap: 10px; } .fdp-activity { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid rgba(34,50,77,0.08); } .fdp-activity__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; } .fdp-activity__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px; } .fdp-activity__sub { font-size: 12.5px; color: var(--ink); opacity: 0.78; } .fdp-activity__arrow { color: var(--ink); flex: 0 0 auto; } /* ----- Buy -------------------------------------------------------------- */ .fdp-section--buy { padding: 48px 22px; background: linear-gradient(180deg, var(--sky-2) 0%, var(--sky-1) 100%); color: var(--ink); } .fdp-section--buy .fdp-section__head { text-align: center; margin-bottom: 16px; } .fdp-section--buy h2 { font-size: 30px; margin-top: 6px; } .fdp-section--buy .fdp-section__sub { margin-top: 8px; font-size: 14px; color: var(--ink); opacity: 0.75; text-align: center; } .fdp-buy-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .fdp-store { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.7); border: 1px solid rgba(34,50,77,0.1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: inherit; text-decoration: none; } .fdp-store__name { font-weight: 700; font-size: 15px; color: var(--ink); } .fdp-store__sub { font-size: 12px; color: var(--ink); opacity: 0.7; } .fdp-store__cta { font-size: 12px; color: var(--brick); font-weight: 700; } /* ----- Signup ----------------------------------------------------------- */ .fdp-section--signup { padding: 48px 22px; background: var(--paper); text-align: center; } .fdp-signup__stars { display: inline-flex; gap: 4px; margin-bottom: 8px; } .fdp-signup h2 { font-size: 26px; margin-bottom: 8px; } .fdp-signup__lede { font-size: 14.5px; color: var(--ink); margin-bottom: 16px; font-weight: 500; } .fdp-signup__form { display: flex; gap: 8px; padding: 6px; background: #fff; border-radius: 999px; border: 1px solid rgba(34,50,77,0.12); max-width: 460px; margin: 0 auto; } .fdp-signup__form input[type="email"] { flex: 1; border: none; outline: none; background: transparent; padding: 8px 14px; font-size: 14px; color: var(--ink); font-family: inherit; min-width: 0; } .fdp-signup__form button { padding: 10px 18px; font-size: 13px; } /* ----- Press ------------------------------------------------------------ */ .fdp-section--press { padding: 36px 22px; background: var(--paper-2); } .fdp-press-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; } .fdp-press-card { background: #fff; border-radius: 14px; padding: 16px 14px; border: 1px solid rgba(34,50,77,0.08); } .fdp-press-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; margin-bottom: 4px; } .fdp-press-card__sub { font-size: 12.5px; color: var(--ink); opacity: 0.78; margin-bottom: 10px; } .fdp-press-card__cta { font-size: 12px; font-weight: 700; color: var(--brick); } /* ----- Preview ---------------------------------------------------------- */ .fdp-section--preview { padding: 52px 0 48px; background: var(--paper); scroll-margin-top: 60px; } .fdp-section--preview .fdp-section__head { text-align: center; margin-bottom: 16px; padding: 0 22px; } .fdp-section--preview h2 { font-size: 28px; margin-top: 6px; } .fdp-section--preview .fdp-section__sub { font-size: 14px; color: var(--ink); margin-top: 8px; opacity: 0.85; text-align: center; } .fdp-preview-track { display: flex; gap: 14px; overflow-x: auto; padding: 8px 22px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; } .fdp-preview-track::-webkit-scrollbar { display: none; } .fdp-preview-page { flex: 0 0 280px; scroll-snap-align: center; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(34,50,77,0.1); box-shadow: 0 12px 30px -10px rgba(34,50,77,0.25); } .fdp-preview-page__art { aspect-ratio: 4 / 5; position: relative; display: grid; place-items: end; } .fdp-preview-page__num { position: absolute; top: 10px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255,255,255,0.85); text-transform: uppercase; } .fdp-preview-page__placeholder { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.5; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; } .fdp-preview-page__caption { padding: 14px 16px 16px; background: #fff; font-size: 14px; color: var(--ink); text-wrap: pretty; line-height: 1.45; font-style: italic; } .fdp-preview__dots { display: flex; justify-content: center; gap: 8px; padding: 4px 22px 0; } .fdp-preview__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(34,50,77,0.2); transition: width .25s ease, background .25s ease; } .fdp-preview__dot.is-active { width: 22px; background: var(--brick); } .fdp-preview__caveat { text-align: center; margin-top: 22px; padding: 0 22px; font-size: 13px; color: var(--ink); opacity: 0.75; font-style: italic; } /* ----- Footer ----------------------------------------------------------- */ .fdp-footer { padding: 32px 22px 24px; background: var(--ink); color: var(--paper); text-align: center; } .fdp-footer__brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 18px; margin-bottom: 6px; color: var(--paper); } .fdp-footer__copy { font-size: 12px; color: rgba(247,238,223,0.6); margin-bottom: 16px; } .fdp-footer__links { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: rgba(247,238,223,0.7); } .fdp-footer__links a { color: inherit; text-decoration: none; } .fdp-footer__links a:hover { color: var(--paper); } .fdp-footer__divider { display: none; } .fdp-footer__bottom { display: none; } /* ========================================================================== DESKTOP — 900px and up ========================================================================== */ @media (min-width: 900px) { /* Nav: show links + waitlist button */ .fdp-nav { padding: 16px 56px; } .fdp-nav__brand { font-size: 20px; } .fdp-nav__menu-btn { display: none; } .fdp-nav__links { display: flex; align-items: center; gap: 28px; } .fdp-nav__links a:not(.fdp-btn) { font-size: 13px; color: var(--ink); font-weight: 600; opacity: 0.85; text-decoration: none; } .fdp-nav__links a:not(.fdp-btn):hover { opacity: 1; } .fdp-nav__cta { padding: 10px 18px; font-size: 13px; } /* Hero — two-column */ .fdp-hero { padding: 72px 56px 96px; } .fdp-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; max-width: 1180px; margin: 0 auto; text-align: left; } .fdp-hero__pill { padding: 5px 14px; font-size: 12px; letter-spacing: 0.14em; margin-bottom: 22px; } .fdp-hero__title { font-size: 88px; } .fdp-hero__lede { margin-top: 24px; font-size: 19px; max-width: 480px; padding: 0; line-height: 1.5; } .fdp-hero__cover-wrap { margin-top: 0; justify-content: center; position: relative; } .fdp-cover-frame { width: 420px; border-radius: 8px; border-width: 8px; box-shadow: 0 36px 70px -14px rgba(34,50,77,0.4), 0 10px 20px rgba(34,50,77,0.18); } .fdp-hero__cta { margin-top: 32px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; } .fdp-hero__cta .fdp-btn { min-width: 0; padding: 14px 22px; font-size: 15px; } .fdp-hero__cta .fdp-btn-primary { padding: 14px 26px; } .fdp-hero__splat { bottom: -40px; width: 480px; height: 140px; } /* Book */ .fdp-section--book { padding: 88px 56px; } .fdp-section--book .fdp-section__inner { max-width: 1000px; margin: 0 auto; } .fdp-section--book h2 { font-size: 52px; margin-bottom: 28px; } .fdp-book__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 12px; } .fdp-book__columns .fdp-prose { text-align: left; font-size: 18px; line-height: 1.6; margin-bottom: 0; } .fdp-stat-grid { margin-top: 48px; grid-template-columns: repeat(4, 1fr); gap: 16px; } .fdp-stat-card { padding: 22px 16px; border-radius: 18px; } .fdp-stat-card__num { font-size: 44px; } .fdp-stat-card__label { font-size: 12px; margin-top: 6px; opacity: 0.7; color: var(--ink); } /* Why */ .fdp-section--why { padding: 88px 56px; } .fdp-section--why .fdp-section__inner { max-width: 1180px; margin: 0 auto; } .fdp-section--why h2 { font-size: 44px; margin-bottom: 36px; } .fdp-reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .fdp-reason { border-radius: 18px; padding: 24px; gap: 18px; box-shadow: 0 4px 12px rgba(34,50,77,0.05); } .fdp-reason__num { font-size: 36px; min-width: 50px; } .fdp-reason__title { font-size: 21px; margin-bottom: 8px; } .fdp-reason__sub { font-size: 15px; line-height: 1.55; } /* Potatoes — 4 + 3 */ .fdp-section--potatoes { padding: 88px 56px; } .fdp-section--potatoes .fdp-section__inner { max-width: 1180px; margin: 0 auto; } .fdp-section--potatoes h2 { font-size: 44px; margin-bottom: 8px; } .fdp-section--potatoes .fdp-section__sub { font-size: 16px; opacity: 0.8; margin-bottom: 32px; } .fdp-potato-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } .fdp-potato-grid > .fdp-potato-card:nth-child(n+5) { display: none; } .fdp-potato-grid--bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; padding: 0 14%; } .fdp-potato-card { border-radius: 20px; padding: 20px 16px 22px; box-shadow: 0 6px 18px rgba(34,50,77,0.07); } .fdp-potato-card__svg { height: 170px; } .fdp-potato-card__name { font-size: 19px; margin-top: 6px; } .fdp-potato-card__trait { font-size: 13px; line-height: 1.4; margin-top: 4px; } /* Praise — 3-up grid */ .fdp-section--praise { padding: 88px 56px; background: var(--paper-2); } .fdp-section--praise .fdp-section__inner { max-width: 1180px; margin: 0 auto; } .fdp-section--praise .fdp-section__head { padding: 0; margin-bottom: 32px; } .fdp-section--praise h2 { font-size: 40px; margin-top: 8px; } .fdp-praise-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: visible; padding: 0; } .fdp-review { flex: none; border-radius: 20px; padding: 28px; box-shadow: 0 4px 14px rgba(34,50,77,0.06); } .fdp-review__quote-mark { font-size: 36px; line-height: 0.6; margin-bottom: 10px; } .fdp-review__body { font-size: 17px; line-height: 1.45; } .fdp-review__attr { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 16px; } /* Author — two column */ .fdp-section--author { padding: 88px 56px; } .fdp-section--author .fdp-section__inner { max-width: 1080px; margin: 0 auto; } .fdp-author__head { margin-bottom: 36px; } .fdp-author__row { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; } .fdp-author__photo-wrap { justify-content: flex-start; margin-bottom: 0; } .fdp-author__photo { width: 260px; height: 260px; border-width: 10px; font-size: 13px; box-shadow: 0 18px 40px -10px rgba(34,50,77,0.3); } .fdp-author h2 { font-size: 52px; text-align: left; margin-bottom: 8px; } .fdp-author__role { text-align: left; font-size: 14px; letter-spacing: 0.04em; margin-bottom: 18px; } .fdp-author__bio { text-align: left; font-size: 18px; line-height: 1.6; margin-bottom: 18px; } .fdp-author__credit { text-align: left; font-size: 14px; opacity: 0.85; margin-top: 0; } /* Activities — 3-up */ .fdp-section--activities { padding: 88px 56px; } .fdp-section--activities .fdp-section__inner { max-width: 1180px; margin: 0 auto; } .fdp-section--activities h2 { font-size: 40px; margin: 8px 0 32px; } .fdp-activities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fdp-activity { border-radius: 18px; padding: 22px; gap: 18px; box-shadow: 0 4px 12px rgba(34,50,77,0.05); } .fdp-activity__icon { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; } .fdp-activity__title { font-size: 19px; } .fdp-activity__sub { font-size: 13px; margin-top: 2px; } /* Buy */ .fdp-section--buy { padding: 88px 56px; } .fdp-section--buy .fdp-section__inner { max-width: 1080px; margin: 0 auto; } .fdp-section--buy .fdp-section__head { margin-bottom: 36px; } .fdp-section--buy h2 { font-size: 52px; margin-top: 8px; } .fdp-section--buy .fdp-section__sub { margin-top: 12px; font-size: 17px; opacity: 0.78; } .fdp-buy-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 0; } .fdp-store { padding: 20px 22px; border-radius: 16px; } .fdp-store__name { font-size: 17px; } .fdp-store__sub { font-size: 13px; margin-top: 2px; } .fdp-store__cta { font-size: 13px; } /* Signup */ .fdp-section--signup { padding: 88px 56px; } .fdp-section--signup .fdp-section__inner { max-width: 620px; margin: 0 auto; } .fdp-signup__stars { gap: 6px; margin-bottom: 12px; } .fdp-signup h2 { font-size: 44px; margin-bottom: 12px; } .fdp-signup__lede { font-size: 17px; margin-bottom: 24px; opacity: 0.85; } .fdp-signup__form { padding: 8px; box-shadow: 0 4px 14px rgba(34,50,77,0.06); } .fdp-signup__form input[type="email"] { padding: 10px 18px; font-size: 15px; } .fdp-signup__form button { padding: 12px 24px; font-size: 14px; } /* Preview — 4-up grid */ .fdp-section--preview { padding: 88px 56px; } .fdp-section--preview .fdp-section__inner { max-width: 1180px; margin: 0 auto; } .fdp-section--preview .fdp-section__head { padding: 0; margin-bottom: 32px; } .fdp-section--preview h2 { font-size: 44px; margin-top: 8px; } .fdp-section--preview .fdp-section__sub { font-size: 16px; opacity: 0.8; } .fdp-preview-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; overflow: visible; padding: 0; } .fdp-preview-page { flex: none; border-radius: 16px; } .fdp-preview-page__num { top: 12px; left: 14px; } .fdp-preview-page__caption { padding: 16px 18px 20px; line-height: 1.5; } .fdp-preview__dots, .fdp-preview__caveat { display: none; } /* Press */ .fdp-section--press { padding: 64px 56px; } .fdp-press-grid { max-width: 1180px; margin: 0 auto; gap: 18px; } .fdp-press-card { border-radius: 18px; padding: 28px; box-shadow: 0 4px 12px rgba(34,50,77,0.05); } .fdp-press-card__title { font-size: 24px; margin-bottom: 6px; } .fdp-press-card__sub { font-size: 14px; margin-bottom: 16px; line-height: 1.5; } .fdp-press-card__cta { font-size: 13px; } /* Footer — two-row layout */ .fdp-footer { padding: 48px 56px 36px; text-align: left; } .fdp-footer__inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(247,238,223,0.15); } .fdp-footer__brand { font-size: 24px; margin-bottom: 6px; } .fdp-footer__tagline { font-size: 13px; color: rgba(247,238,223,0.65); max-width: 380px; line-height: 1.5; margin: 0; } .fdp-footer__copy { display: none; } .fdp-footer__links { gap: 28px; font-size: 13px; color: rgba(247,238,223,0.78); } .fdp-footer__bottom { display: flex; max-width: 1180px; margin: 0 auto; padding-top: 16px; font-size: 12px; color: rgba(247,238,223,0.55); justify-content: space-between; } }