/* ============================================================ THE PROPER PLATES BOOK — landing page Premium editorial cookbook system ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* warm stone / paper */ --bg: #EAE4D7; --bg-2: #E2DAC8; --paper: #F8F4EB; --paper-2: #FBF8F1; /* ink */ --ink: #29271F; --ink-soft: #5E5949; --ink-faint: #8B8675; /* brand greens (from the cover) */ --green: #344528; --green-700: #28361D; --green-900: #1E2A15; /* dark navy (matches the recipe pages) */ --navy: #182530; --navy-2: #1F313E; /* warm accent — butter / amber */ --butter: #E0A638; --butter-deep:#C8862A; /* the live accent (driven by Tweaks) */ --accent: var(--green); --accent-ink:#F8F4EB; /* text on accent */ --highlight: var(--butter); /* small pops: price, stars, underline */ --line: rgba(41,39,31,.14); --line-soft: rgba(41,39,31,.08); --shadow-sm: 0 2px 8px rgba(30,28,20,.08); --shadow-md: 0 18px 50px -20px rgba(30,28,20,.45); --shadow-lg: 0 40px 90px -30px rgba(20,18,12,.6); --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --radius: 16px; --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesque", system-ui, sans-serif; --font-script: "Caveat", "Hanken Grotesque", cursive; } /* density / vibe flags set by tweaks on */ html[data-vibe="punchy"]{ --highlight: var(--butter); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--bg); background-image: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.5), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(255,255,255,.35), transparent 60%); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } /* ---------- Type ---------- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.01em; margin:0; } .serif-i{ font-family:var(--font-display); font-style:italic; font-weight:500; } .script{ font-family:var(--font-script); font-weight:700; } .kicker{ font-family:var(--font-sans); font-weight:700; text-transform:uppercase; letter-spacing:.22em; font-size:12.5px; color:var(--accent); } .kicker.on-dark{ color:var(--highlight); } .eyebrow-script{ font-family:var(--font-script); font-size:clamp(26px,3.4vw,40px); color:var(--accent); line-height:.9; } /* ---------- Layout ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } section{ position:relative; } .band-cream{ background:transparent; } .band-alt{ background:var(--bg-2); } .band-paper{ background:var(--paper); } .band-dark{ background:var(--navy); color:#EDE7DA; } .band-green{ background:var(--green); color:#EDE7DA; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-sans); font-weight:700; font-size:16px; padding:16px 26px; border-radius:999px; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; line-height:1; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, black); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px color-mix(in srgb, var(--accent) 70%, black); } .btn-primary .price-pill{ background:var(--accent-ink); color:var(--accent); font-weight:800; padding:4px 9px; border-radius:999px; font-size:13.5px; margin-left:.2em; } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); } .btn-lg{ padding:19px 34px; font-size:17.5px; } .btn-light{ background:var(--paper); color:var(--ink); } .btn-light:hover{ transform:translateY(-2px); } /* ---------- Top bar ---------- */ .topbar{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line-soft); } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; } .wordmark{ font-family:var(--font-sans); font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink); display:inline-flex; align-items:baseline; } .wordmark .us{ color:var(--accent); } .wordmark .dot{ color:var(--highlight); } .topbar nav{ display:flex; gap:30px; font-weight:600; font-size:15px; color:var(--ink-soft); } .topbar nav a:hover{ color:var(--ink); } .topbar .actions{ display:flex; align-items:center; gap:14px; } @media(max-width:860px){ .topbar nav{ display:none; } } /* ---------- Hero ---------- */ .hero{ padding:clamp(40px,7vw,92px) 0 clamp(54px,8vw,104px); } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; } .hero h1{ font-size:clamp(48px,7.4vw,98px); margin:.18em 0 .12em; } .hero h1 .the{ display:block; font-size:.34em; letter-spacing:.06em; font-weight:600; color:var(--ink-soft); text-transform:uppercase; font-family:var(--font-sans); margin-bottom:.2em; } .hero h1 em{ color:var(--accent); font-style:normal; } .hero .tagline{ font-size:clamp(19px,2.1vw,23px); color:var(--ink-soft); max-width:30ch; margin:.3em 0 0; } .hero .benefits{ list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:11px; } .hero .benefits li{ display:flex; align-items:flex-start; gap:11px; font-size:16.5px; color:var(--ink); } .hero .benefits .tick{ flex:none; width:23px; height:23px; border-radius:50%; background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); display:grid; place-items:center; font-size:13px; font-weight:800; margin-top:1px; } .hero-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .hero-price{ display:flex; align-items:center; gap:14px; margin:26px 0 22px; } .hero-price .was{ font-family:var(--font-display); font-size:30px; color:var(--ink-faint); text-decoration:line-through; line-height:1; } .hero-price .now{ font-family:var(--font-display); font-weight:800; font-size:52px; color:var(--accent); line-height:.9; } .hero-price .lab{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; line-height:1.3; } .hero-trust{ display:flex; align-items:center; gap:12px; margin-top:22px; color:var(--ink-soft); font-size:14.5px; } .stars{ color:var(--highlight); letter-spacing:2px; font-size:15px; } /* iPad */ .device-stage{ position:relative; display:grid; place-items:center; } .ipad{ position:relative; width:min(380px,80%); aspect-ratio:1055/1491; background:linear-gradient(145deg,#23211c,#100f0c); border-radius:30px; padding:14px; box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06); transform:rotate(-3deg); transition:transform .5s cubic-bezier(.2,.8,.2,1); } .device-stage:hover .ipad{ transform:rotate(-1deg) translateY(-6px); } .ipad::before{ content:""; position:absolute; top:50%; left:7px; width:4px; height:42px; transform:translateY(-50%); background:rgba(255,255,255,.07); border-radius:3px; } .ipad-screen{ position:relative; border-radius:18px; overflow:hidden; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .ipad-screen img{ width:100%; height:100%; object-fit:cover; } .ipad-cam{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#3a3a3a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); z-index:2; } /* starburst price badge */ .burst{ position:absolute; z-index:5; top:-6px; right:2%; width:108px; height:108px; display:grid; place-items:center; text-align:center; color:var(--accent-ink); background:var(--highlight); font-family:var(--font-sans); transform:rotate(8deg); clip-path:polygon(50% 0,61% 12%,77% 6%,80% 23%,96% 27%,89% 42%,100% 54%,87% 64%,93% 81%,76% 81%,68% 96%,53% 88%,38% 98%,30% 82%,13% 84%,17% 67%,3% 56%,15% 43%,7% 27%,24% 25%,26% 8%,42% 14%); box-shadow:0 14px 30px -12px rgba(0,0,0,.5); } .burst b{ display:block; font-size:30px; font-weight:800; line-height:.9; color:var(--navy); } .burst small{ display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); font-weight:700; margin-top:3px; } @media(max-width:880px){ .hero-grid{ grid-template-columns:1fr; } .device-stage{ order:-1; margin-bottom:8px; } .ipad{ width:min(300px,72%); } } /* ---------- Logos / social proof strip ---------- */ .proof{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:22px 0; } .proof .wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,60px); flex-wrap:wrap; } .proof .stat{ text-align:center; } .proof .stat b{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--accent); display:block; line-height:1; } .proof .stat span{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; } .proof .sep{ width:1px; height:34px; background:var(--line); } @media(max-width:620px){ .proof .sep{ display:none; } } /* ---------- Inside / benefits ---------- */ .section-head{ max-width:680px; margin:0 auto clamp(34px,5vw,56px); text-align:center; } .section-head h2{ font-size:clamp(33px,4.6vw,56px); margin:.18em 0 0; } .section-head h2 em{ color:var(--accent); font-style:normal; } .section-head p{ color:var(--ink-soft); font-size:18px; margin:.7em auto 0; max-width:54ch; } .pad-y{ padding:clamp(56px,8vw,108px) 0; } .feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .feature{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 28px 28px; box-shadow:var(--shadow-sm); } .feature .num{ display:flex; align-items:center; gap:14px; margin-bottom:16px; } .feature .num b{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:30px; color:var(--accent); line-height:1; } .feature .num i{ flex:1; height:1px; background:var(--line); } .feature h3{ font-size:22px; margin-bottom:9px; } .feature p{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.55; } @media(max-width:920px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:520px){ .feature-grid{ grid-template-columns:1fr; } } /* ---------- Recipe showcase ---------- */ .recipes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); } .rcard{ text-align:center; } .rcard .pageframe{ position:relative; border-radius:12px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid rgba(0,0,0,.18); transition:transform .35s ease; background:var(--navy); } .rcard:nth-child(1) .pageframe{ transform:rotate(-2deg); } .rcard:nth-child(2) .pageframe{ transform:translateY(-18px); } .rcard:nth-child(3) .pageframe{ transform:rotate(2deg); } .rcard .pageframe:hover{ transform:translateY(-10px) rotate(0); } .rcard .pageframe img{ width:100%; } .rcard .cap{ margin-top:18px; } .rcard .cap .tag{ font-family:var(--font-script); font-size:25px; color:var(--accent); line-height:.9; } .rcard .cap p{ margin:4px 0 0; color:var(--ink-soft); font-size:14.5px; } @media(max-width:760px){ .recipes{ grid-template-columns:1fr; max-width:380px; margin:0 auto; gap:34px; } .rcard:nth-child(2) .pageframe{ transform:none; } } /* ---------- What's Included (dark value stack) ---------- */ .included{ overflow:hidden; } .included .wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(34px,6vw,80px); align-items:center; } .included h2{ font-size:clamp(32px,4.4vw,52px); color:#F4EEE1; } .included h2 em{ color:var(--highlight); font-style:normal; } .inc-list{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; } .inc-list li{ display:flex; gap:14px; align-items:flex-start; font-size:16.5px; color:#DAD3C4; } .inc-list .chk{ flex:none; width:26px; height:26px; border-radius:8px; background:color-mix(in srgb,var(--highlight) 90%, transparent); color:var(--navy); display:grid; place-items:center; font-weight:800; font-size:14px; } .inc-list li b{ color:#fff; font-weight:700; } .inc-price{ display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap; } .inc-price .tag{ display:flex; align-items:baseline; gap:8px; } .inc-price .tag .now{ font-family:var(--font-display); font-weight:800; font-size:52px; color:#fff; line-height:1; } .inc-price .tag .was{ color:rgba(218,211,196,.6); text-decoration:line-through; font-size:22px; } .inc-price .tag .lab{ font-size:13px; color:rgba(218,211,196,.7); letter-spacing:.1em; text-transform:uppercase; } /* fanned pages */ .fan{ position:relative; min-height:420px; display:grid; place-items:center; } .fan img{ position:absolute; width:46%; border-radius:10px; box-shadow:var(--shadow-lg); border:1px solid rgba(0,0,0,.3); } .fan img:nth-child(1){ transform:rotate(-13deg) translate(-44%,8px); z-index:1; } .fan img:nth-child(2){ transform:rotate(0deg) translateY(-14px); z-index:3; } .fan img:nth-child(3){ transform:rotate(13deg) translate(44%,8px); z-index:1; } @media(max-width:860px){ .included .wrap{ grid-template-columns:1fr; } .fan{ order:-1; min-height:360px; } } /* ---------- Author ---------- */ .author .wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,72px); align-items:center; } .author-photo{ position:relative; justify-self:center; } .author-photo img{ width:min(320px,72vw); aspect-ratio:1; border-radius:50%; object-fit:cover; filter:grayscale(1) contrast(1.04); box-shadow:0 30px 60px -28px rgba(0,0,0,.7); border:6px solid rgba(255,255,255,.06); } .author-photo .ring{ position:absolute; inset:-14px; border:1px dashed rgba(224,166,56,.5); border-radius:50%; } .author h2{ font-size:clamp(32px,4.4vw,52px); color:#F4EEE1; } .author .role{ color:var(--highlight); font-weight:700; letter-spacing:.04em; margin-top:6px; } .author p.bio{ color:#CFC8B9; font-size:16.5px; margin:18px 0 0; max-width:52ch; } .author .socials{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; } .chiplink{ display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border-radius:999px; border:1px solid rgba(237,231,218,.22); color:#EDE7DA; font-weight:600; font-size:14.5px; transition:.2s; } .chiplink:hover{ background:rgba(237,231,218,.1); border-color:rgba(237,231,218,.4); } .chiplink svg{ width:17px; height:17px; } @media(max-width:820px){ .author .wrap{ grid-template-columns:1fr; text-align:center; } .author p.bio{ margin-inline:auto; } .author .socials{ justify-content:center; } .author-photo .ring{ inset:-10px; } } /* ---------- Testimonials ---------- */ .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .tcard{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; } .tcard .stars{ font-size:16px; } .tcard blockquote{ margin:0; font-size:16.5px; line-height:1.55; color:var(--ink); } .tcard .who{ display:flex; align-items:center; gap:12px; margin-top:auto; } .tcard .who .av{ width:42px; height:42px; border-radius:50%; background:color-mix(in srgb,var(--accent) 18%, var(--paper-2)); color:var(--accent); display:grid; place-items:center; font-weight:800; font-family:var(--font-display); } .tcard .who b{ display:block; font-size:15px; } .tcard .who span{ font-size:13px; color:var(--ink-faint); } @media(max-width:840px){ .tgrid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } } /* ---------- Final CTA ---------- */ .finalcta{ text-align:center; } .finalcta h2{ font-size:clamp(36px,5.6vw,68px); color:#F4EEE1; max-width:16ch; margin:0 auto; } .finalcta h2 em{ color:var(--highlight); font-style:normal; } .finalcta p{ color:rgba(237,231,218,.8); font-size:18px; margin:18px auto 30px; max-width:46ch; } .finalcta .mini{ margin-top:18px; color:rgba(237,231,218,.65); font-size:14px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; } .finalcta .mini span{ display:inline-flex; gap:7px; align-items:center; } /* ---------- Footer ---------- */ .footer{ background:var(--green-900); color:rgba(237,231,218,.7); padding:40px 0; } .footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; } .footer .wordmark{ color:#EDE7DA; font-size:20px; } .footer .wordmark .us{ color:var(--highlight); } .footer a:hover{ color:#fff; } /* ---------- Sticky buy bar ---------- */ .buybar{ position:fixed; left:0; right:0; bottom:0; z-index:50; transform:translateY(120%); transition:transform .35s cubic-bezier(.2,.8,.2,1); background:color-mix(in srgb,var(--navy) 96%, black); color:#EDE7DA; box-shadow:0 -10px 40px -18px rgba(0,0,0,.6); } .buybar.show{ transform:translateY(0); } .buybar .wrap{ display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px; } .buybar .mini{ display:flex; align-items:center; gap:13px; min-width:0; } .buybar .mini img{ width:34px; border-radius:4px; box-shadow:0 3px 10px rgba(0,0,0,.4); } .buybar .mini .t{ font-family:var(--font-display); font-weight:800; font-size:17px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .buybar .mini .s{ font-size:13px; color:rgba(237,231,218,.6); } .buybar .spacer{ flex:1; } .buybar .price{ font-family:var(--font-display); font-weight:800; font-size:26px; } @media(max-width:600px){ .buybar .mini .s{ display:none; } .buybar .price{ font-size:22px; } .buybar .btn{ padding:13px 18px; font-size:15px; } } /* reveal on scroll */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.in{ opacity:1; transform:none; } /* tweaks root never blocks */ #tweaks-root{ position:fixed; z-index:60; } /* tweak-driven toggles */ html[data-burst="off"] .burst{ display:none; } html[data-was="off"] .hero-price .was{ display:none; } html[data-vibe="punchy"] .burst{ width:120px; height:120px; } html[data-vibe="punchy"] .hero h1 em{ color:var(--highlight); } html[data-vibe="punchy"] .btn-primary{ text-transform:uppercase; letter-spacing:.04em; }