@font-face { font-family: "Lora"; src: url("/fonts/lora-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/fonts/lora-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Lora"; src: url("/fonts/lora-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("/fonts/lora-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Popi Greek"; src: url("/fonts/greek-italic.woff2") format("woff2"); font-style: italic; unicode-range: U+0370-03FF, U+1F00-1FFF; font-display: swap; } :root { --navy: #16415F; --navy-deep: #103249; --terracotta: #B5552B; --terracotta-dark: #963F1B; --grey: #6B665E; --text: #2A2825; --limewash: #F8F3EA; --paper: #FFFDF8; --sea-tint: #E4ECF1; --rule: #D9CFBF; --on-navy: #F6EFE2; --serif: "Lora", "Popi Greek", Georgia, "Times New Roman", serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--limewash); color: var(--text); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; font-variant-numeric: lining-nums; } @media (min-width: 900px) { body { font-size: 1.25rem; } } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-underline-offset: 0.18em; } a:hover { color: var(--terracotta-dark); } :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; color: var(--navy); margin: 0; text-wrap: balance; } h2 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.6em; } h3 { font-size: 1.5rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .for-grid, .note-grid, .part-with-photo, .extras, .faq-grid, .final-grid { grid-template-columns: minmax(0, 1fr); } .wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 700px) { .wrap { padding: 0 2rem; } } main > section { padding: 4rem 0; } @media (min-width: 900px) { main > section { padding: 6rem 0; } } .section-intro { color: var(--grey); font-size: 1.125em; margin-top: -0.3em; } /* Prices: main.js sets data-price on . */ [data-price="regular"] .price-launch, [data-price="launch"] .price-regular { display: none; } /* Hero: the book against a shutter-blue panel */ .hero { display: grid; } .hero-shutter { background-color: var(--navy); background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 26px, rgba(0,0,0,0.16) 26px 28px); display: flex; justify-content: center; align-items: flex-end; padding: 1.75rem 1.25rem 0; margin-bottom: 5rem; } .cover { width: min(50vw, 260px); margin-bottom: -5rem; border-radius: 2px 5px 5px 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, -6px 0 0 -3px rgba(0,0,0,0.12), 0 28px 50px -18px rgba(8, 25, 38, 0.65), 0 8px 18px -8px rgba(8, 25, 38, 0.45); } .hero-text { padding: 1.75rem 1.25rem 3.5rem; max-width: 40rem; margin: 0 auto; } .hero h1 { font-size: clamp(2.9rem, 11vw, 5.25rem); line-height: 1.02; letter-spacing: -0.01em; } .subtitle { font-style: italic; color: var(--grey); font-size: 1.1em; line-height: 1.35; margin-top: 0.6rem; } .lede { font-size: clamp(1.4rem, 4.6vw, 1.9rem); line-height: 1.35; margin: 1.1rem 0 0.9rem; color: var(--text); } .hero-what { color: var(--text); } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 44rem; } .hero-shutter { margin: 0; padding: 4rem 0 4rem 3rem; align-items: center; justify-content: flex-end; } .cover { width: min(80%, 380px); margin: 0 -110px 0 0; position: relative; z-index: 1; } .hero-text { padding: 5rem 3rem 5rem calc(110px + 4rem); align-self: center; margin: 0; max-width: 46rem; } } /* Buying */ .buy { margin-top: 1.75rem; } .price { font-size: 1.2em; font-weight: 700; color: var(--navy); margin-bottom: 0.9rem; } .price-regular.price { font-size: 1.9em; } .btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.75rem; width: 100%; max-width: 26rem; padding: 0.9rem 1.5rem; background: var(--terracotta); color: #fff; font-weight: 700; font-size: 1.2em; line-height: 1.25; text-decoration: none; border-radius: 10px; box-shadow: 0 3px 0 var(--terracotta-dark); } .btn:hover { background: var(--terracotta-dark); color: #fff; } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--terracotta-dark); } .buy-small { color: var(--grey); margin-top: 0.9rem; } .doctor { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 4px solid var(--navy); background: var(--sea-tint); color: var(--text); } /* Who it's for */ .for { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .for-grid { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .for-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } } .book-quote { margin: 0; } .book-quote blockquote { margin: 0; font-style: italic; font-size: clamp(1.3rem, 3.6vw, 1.6rem); line-height: 1.5; color: var(--navy); } .book-quote blockquote em { font-style: normal; } .book-quote figcaption { margin-top: 1rem; color: var(--grey); } .dots { list-style: none; padding: 0; margin: 0; } .dots li { position: relative; padding-left: 1.75rem; margin-bottom: 1rem; } .dots li::before { content: ""; position: absolute; left: 0.2rem; top: 0.62em; width: 0.6rem; height: 0.6rem; border-radius: 50% 0; background: var(--terracotta); transform: rotate(-45deg); } /* A note from Popi */ .note { background: var(--navy); color: var(--on-navy); } .note h2 { color: var(--on-navy); } .note-grid { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .note-grid { grid-template-columns: 400px 1fr; gap: 5rem; align-items: start; } } .note-photo { margin: 0; } .note-photo img { border-radius: 4px; } .ai-label { margin-top: 0.9rem; padding: 0.75rem 1rem; background: var(--paper); color: var(--text); border-radius: 4px; font-size: 1rem; line-height: 1.5; } .ai-label a { color: var(--navy); font-weight: 700; } .letter { max-width: 36rem; font-size: 1.08em; } .letter p { margin-bottom: 1.1em; } .signoff { font-style: italic; } .signoff span { font-size: 1.5em; font-weight: 700; font-style: italic; } /* What's inside */ .parts { list-style: none; padding: 0; margin: 2.5rem 0 0; } .part { padding: 2.5rem 0; border-top: 1px solid var(--rule); } .part:first-child { border-top: 0; padding-top: 0.5rem; } .part > p, .part > div > p { max-width: 40rem; } .part h3 { font-size: clamp(1.6rem, 4vw, 2.1rem); } .part-no { display: block; font-size: 1rem; color: var(--terracotta); font-style: italic; font-weight: 400; margin-bottom: 0.25rem; } .tagline { font-style: italic; color: var(--grey); margin: 0.4rem 0 1rem; } .part-with-photo { display: grid; gap: 1.75rem; } .part-with-photo figure { margin: 0; } .part-with-photo img { border-radius: 4px; } @media (min-width: 900px) { .part-with-photo { grid-template-columns: 1fr 420px; gap: 4rem; align-items: center; } } /* The recipe list, set like a taverna menu card */ .menu { margin: 2rem 0 1.5rem; padding: 1.75rem 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--navy); outline: 1px solid var(--navy); outline-offset: -7px; max-width: 46rem; } @media (min-width: 700px) { .menu { padding: 2.5rem 3rem 2.25rem; } } .menu h4 { text-align: center; font-size: 1.5rem; margin-bottom: 1.5rem; } .menu-list { list-style: none; padding: 0; margin: 0; } .menu-list li { display: grid; grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) auto; column-gap: 0.5rem; align-items: end; padding: 0.75rem 0; border-bottom: 1px solid #EDE5D8; } .menu-list li:last-child { border-bottom: 0; } .dish { font-weight: 700; color: var(--text); } .leader { border-bottom: 2px dotted #BDB3A3; margin-bottom: 0.4em; } .pg { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; } .sub { grid-column: 1 / -1; font-size: 0.95em; } .greek { display: block; color: var(--terracotta); font-style: italic; } .gloss { color: var(--grey); } @media (min-width: 700px) { .greek { display: inline; margin-right: 0.5rem; } } .food { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 700px) { .food { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .food { grid-template-columns: repeat(6, 1fr); } } .food img { border-radius: 4px; aspect-ratio: 1; object-fit: cover; } .food span { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--grey); margin-top: 0.45rem; } .extras { display: grid; gap: 1.5rem; margin-top: 1rem; } @media (min-width: 900px) { .extras { grid-template-columns: 1fr 1fr; } } .daphne, .curious { padding: 1.5rem 1.4rem; border-radius: 4px; } .daphne { background: var(--sea-tint); border-top: 4px solid var(--navy); } .curious { background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--terracotta); } .daphne h3, .curious h3 { font-size: 1.35rem; margin-bottom: 0.6rem; } /* Look inside */ .look { background: var(--paper); border-top: 1px solid var(--rule); } .pages { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; margin-top: 2rem; } .pages figure { margin: 0; } .pages .spread { grid-column: 1 / -1; } @media (min-width: 900px) { .pages { grid-template-columns: 2fr 1fr 1fr; align-items: end; } .pages .spread { grid-column: auto; } } .pages a { display: block; border: 1px solid var(--rule); box-shadow: 0 10px 24px -14px rgba(22, 65, 95, 0.45); background: #fff; } .pages a:hover { border-color: var(--navy); } .pages figcaption { font-size: 1rem; color: var(--grey); margin-top: 0.7rem; line-height: 1.45; } .viewer { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; } .viewer::backdrop { background: rgba(10, 30, 45, 0.88); } .viewer img { max-width: 96vw; max-height: 86vh; width: auto; margin: 0 auto; background: #fff; } .viewer-close { display: block; margin: 0 0 0.75rem auto; min-height: 3rem; padding: 0.5rem 1.4rem; font: 700 1.1rem/1 var(--serif); color: var(--navy); background: var(--paper); border: 0; border-radius: 8px; cursor: pointer; } /* Bundle */ .bundle-card { max-width: 46rem; background: var(--paper); border: 2px solid var(--terracotta); border-radius: 6px; padding: 2rem 1.5rem; } @media (min-width: 700px) { .bundle-card { padding: 2.5rem 3rem; } } .bundle[hidden] { display: none; } /* FAQ */ .faq-grid { display: grid; gap: 2rem; } @media (min-width: 900px) { .faq-grid { grid-template-columns: 360px 1fr; gap: 5rem; align-items: start; } } .faq-side img { border-radius: 4px; margin-top: 0.5rem; } @media (max-width: 899px) { .faq-side img { max-width: min(100%, 420px); } } .faq-list details { border-bottom: 1px solid var(--rule); } .faq-list details:first-child { border-top: 1px solid var(--rule); } .faq-list summary { cursor: pointer; list-style: none; position: relative; padding: 1.2rem 2.5rem 1.2rem 0; min-height: 3.5rem; font-weight: 700; color: var(--navy); font-size: 1.1em; line-height: 1.35; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; position: absolute; right: 0.2rem; top: 0.95rem; font-size: 1.7rem; line-height: 1; color: var(--terracotta); font-weight: 400; } .faq-list details[open] summary::after { content: "\2212"; } .faq-list details p { padding-bottom: 1.3rem; max-width: 40rem; } /* Final call */ .final { background: var(--sea-tint); } .final-grid { display: grid; gap: 2rem; align-items: center; } .final-cover { width: 160px; border-radius: 2px 4px 4px 2px; box-shadow: 0 18px 34px -16px rgba(8, 25, 38, 0.6); } @media (min-width: 700px) { .final-grid { grid-template-columns: 220px 1fr; gap: 3.5rem; } .final-cover { width: 220px; } } .final .buy { margin-top: 0; } /* Footer */ .footer { background: var(--navy-deep); color: var(--on-navy); padding: 4rem 0 3rem; } .footer h2 { color: var(--on-navy); font-size: 1.6rem; } .footer a { color: #fff; } .footer-grid { display: grid; gap: 2.5rem; } @media (min-width: 900px) { .footer-grid { grid-template-columns: 3fr 2fr; gap: 5rem; } } .footer-about p { max-width: 40rem; } .footer-small { font-size: 1.05rem; } /* Download and error pages */ .plain-page { background: var(--limewash); } .plain { max-width: 38rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .plain-brand { display: inline-block; font-weight: 700; font-size: 1.15rem; color: var(--navy); text-decoration: none; padding: 0.35rem 0; margin-bottom: 2.5rem; border-bottom: 3px solid var(--terracotta); } .plain h1 { font-size: clamp(2rem, 7vw, 2.75rem); margin-bottom: 1rem; } .downloads { list-style: none; padding: 0; margin: 1.75rem 0 2rem; display: grid; gap: 1rem; } .btn-download { max-width: none; } .plain-note { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1.4rem 1.3rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .btn:active { transform: none; } }