/* ===================================================== Pickett's Healthy Kitchen — shared styles Editorial navy & gold. The nav shell mirrors thepicketts.net so the kitchen reads as part of the family site; the pages themselves keep the warmer cookbook palette. Fonts are loaded with in each page's . ===================================================== */ :root { --navy: #0E1729; --navy-2: #16233c; --navy-3: #1e2f4f; --gold: #c9944a; --gold-light: #e6c48f; --green-dark: #1e5631; --green: #2e7d32; --green-light: #e8f3e9; --saffron: #e8871e; --saffron-light: #fdf0e0; --terracotta: #c05621; --cream: #faf7f1; --card: #ffffff; --text: #2b2620; --muted: #7a7268; --border: #eae4da; --shadow: 0 2px 10px rgba(14, 23, 41, .10); --shadow-hover: 0 12px 32px rgba(14, 23, 41, .22); --radius: 14px; } * { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; } /* scroll-padding keeps recipe anchors clear of the sticky nav */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; background: var(--cream); color: var(--text); line-height: 1.65; } h1, h2, h3, .brand { font-family: 'Playfair Display', Georgia, serif; } /* Hindi edition. The Latin faces have no Devanagari coverage, so text renders as empty boxes without these. Scoped to :lang(hi) so English is untouched. */ :lang(hi) body, :lang(hi) .topnav .links a, :lang(hi) .badges span, :lang(hi) .recipe h3, :lang(hi) .topnav .brand { font-family: 'Noto Sans Devanagari', 'Source Sans 3', 'Nirmala UI', sans-serif; } :lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) .brand { font-family: 'Noto Serif Devanagari', 'Playfair Display', 'Nirmala UI', serif; } :lang(hi) .recipe h3 { font-family: 'Noto Sans Devanagari', 'Source Sans 3', sans-serif; } h1 em, h2 em, .brand em { font-style: italic; color: var(--gold-light); } /* ---------- Skip link ---------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy); color: #fff; padding: 12px 18px; font-weight: 700; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ---------- Navigation (shell mirrors thepicketts.net) ---------- */ .topnav { position: sticky; top: 0; z-index: 50; background: rgba(14, 23, 41, .94); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(201, 148, 74, .25); } .nav-shell { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; gap: 22px; } .topnav .brand { font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #fff; text-decoration: none; white-space: nowrap; } .topnav .brand em { font-style: normal; color: var(--gold-light); } .topnav .links { margin-left: auto; display: flex; align-items: center; gap: 24px; } .topnav .links a { color: rgba(255, 255, 255, .86); text-decoration: none; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s; } .topnav .links a:hover { color: #fff; border-color: var(--gold-light); } .topnav .links a[aria-current="page"] { color: var(--gold-light); border-color: var(--gold-light); } /* Language toggle. Deliberately OUTSIDE the collapsible panel so it stays visible on a phone without opening the menu. */ .langtoggle { flex: 0 0 auto; color: var(--gold-light); text-decoration: none; font-size: .82rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; padding: 7px 14px; border: 1px solid rgba(201, 148, 74, .45); border-radius: 20px; transition: background .18s, border-color .18s, color .18s; } .langtoggle:hover { background: rgba(201, 148, 74, .14); border-color: var(--gold-light); color: #fff; } .navtoggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; place-items: center; } .navtoggle svg { width: 20px; height: 20px; } .navtoggle .close { display: none; } .navtoggle[aria-expanded="true"] .bars { display: none; } .navtoggle[aria-expanded="true"] .close { display: block; } /* ---------- Hero (shared) ---------- */ .hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 15% 10%, rgba(201, 148, 74, .16), transparent 50%), radial-gradient(ellipse at 85% 85%, rgba(46, 125, 50, .18), transparent 55%), linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%); } .hero .overline { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; color: var(--gold-light); margin-bottom: 14px; } .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; margin-bottom: 16px; } .hero .lede { max-width: 560px; font-size: 1.1rem; opacity: .92; } .badges { margin-top: 24px; } .badges span { display: inline-block; background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 148, 74, .45); border-radius: 20px; padding: 5px 16px; margin: 4px 6px 4px 0; font-size: .84rem; color: var(--gold-light); font-family: 'Source Sans 3', sans-serif; } /* Page hero (recipe pages) */ .page-hero { text-align: center; padding: 66px 20px 58px; } .page-hero .lede { margin: 0 auto; } .page-hero .badges span { margin: 4px; } /* Home hero with collage */ .home-hero { padding: 0; } .hero-inner { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 84px 28px 90px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; } .btn { display: inline-block; text-decoration: none; font-weight: 700; font-size: .98rem; padding: 12px 26px; border-radius: 28px; transition: transform .2s, box-shadow .2s, background .2s; } .btn.gold { background: var(--gold); color: var(--navy); } .btn.gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.3); } .btn.ghost { border: 1.5px solid rgba(255,255,255,.5); color: #fff; } .btn.ghost:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); } /* Food collage */ .hero-collage { position: relative; height: 430px; } .hero-collage img { position: absolute; object-fit: cover; border: 6px solid #fff; border-radius: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, .45); transition: transform .3s; } .hero-collage img:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 9; } .hero-collage .c1 { width: 58%; height: 200px; top: 8px; left: 0; transform: rotate(-4deg); z-index: 3; } .hero-collage .c2 { width: 52%; height: 185px; top: 40px; right: 0; transform: rotate(3deg); z-index: 2; } .hero-collage .c3 { width: 54%; height: 190px; bottom: 18px; left: 6%; transform: rotate(2.5deg); z-index: 4; } .hero-collage .c4 { width: 48%; height: 175px; bottom: 0; right: 2%; transform: rotate(-3deg); z-index: 1; } /* Butterfly & flower ornaments */ .ornament { position: absolute; z-index: 1; pointer-events: none; opacity: .5; } .ornament.b1 { top: 9%; right: 6%; width: 74px; animation: flutter 7s ease-in-out infinite; } .ornament.b2 { bottom: 14%; left: 4%; width: 52px; animation: flutter 9s ease-in-out infinite reverse; } .ornament.b3 { top: 20%; left: 40%; width: 40px; opacity: .32; animation: flutter 11s ease-in-out infinite; } .ornament.f1 { bottom: -22px; left: -18px; width: 190px; opacity: .30; } .ornament.f2 { top: -26px; right: -22px; width: 170px; opacity: .26; transform: rotate(160deg); } @keyframes flutter { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .ornament { animation: none !important; } } /* ---------- Layout ---------- */ main { max-width: 940px; margin: 0 auto; padding: 36px 18px 10px; } .note { background: var(--saffron-light); border-left: 4px solid var(--saffron); padding: 14px 18px; border-radius: 8px; font-size: .93rem; margin-bottom: 34px; } /* ---------- Table of contents / menu box ---------- */ .toc { background: var(--green-light); border-radius: var(--radius); padding: 20px 26px; margin-bottom: 38px; } .toc h2 { font-size: 1.2rem; color: var(--green-dark); margin-bottom: 10px; } .toc ol { padding-left: 22px; columns: 2; column-gap: 34px; } .toc li { margin-bottom: 4px; break-inside: avoid; } .toc a { color: var(--green); text-decoration: none; font-weight: 600; } .toc a:hover { text-decoration: underline; } /* ---------- Recipe cards ---------- */ .recipe { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px; margin-bottom: 34px; transition: box-shadow .25s, transform .25s; } .recipe:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .recipe h2 { color: var(--navy); font-size: 1.45rem; margin-bottom: 4px; } .recipe .cuisine { display: inline-block; background: var(--saffron-light); color: var(--terracotta); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 12px; padding: 2px 12px; margin-bottom: 8px; } .recipe .tagline { color: var(--muted); font-style: italic; margin-bottom: 16px; } .dish { width: 100%; height: 280px; object-fit: cover; display: block; border-radius: 10px; margin-bottom: 20px; background: linear-gradient(160deg, #f1f8e9, #e8f3e9); } .dish.noimg { display: none; } .stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .stat { background: var(--green-light); border-radius: 10px; padding: 8px 16px; font-size: .84rem; text-align: center; color: var(--muted); } .stat b { display: block; font-size: 1.02rem; color: var(--green-dark); font-weight: 700; } .recipe h3 { font-family: 'Source Sans 3', sans-serif; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; color: var(--terracotta); border-bottom: 1px solid var(--border); padding-bottom: 5px; } .recipe ul, .recipe ol { padding-left: 24px; } .recipe li { margin-bottom: 5px; } .tip { background: var(--green-light); border-radius: 10px; padding: 12px 16px; margin-top: 18px; font-size: .92rem; } .tip b { color: var(--green-dark); } /* ---------- Cook mode ---------- */ .cookbtn { display: inline-block; margin: 0 0 18px; padding: 11px 20px; font: inherit; font-size: .9rem; font-weight: 700; color: var(--navy); background: var(--gold-light); border: none; border-radius: 24px; cursor: pointer; transition: background .18s, transform .18s; } .cookbtn:hover { background: var(--gold); transform: translateY(-1px); } .cookbtn::before { content: '\2609'; margin-right: 8px; } .cookmode { position: fixed; inset: 0; z-index: 300; background: var(--cream); display: flex; flex-direction: column; } .cookmode[hidden] { display: none; } .cm-bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--navy); color: #fff; flex: 0 0 auto; } .cm-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cm-awake { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light); white-space: nowrap; } .cm-close { flex: 0 0 auto; font: inherit; font-size: .85rem; font-weight: 700; padding: 10px 18px; min-height: 44px; color: var(--navy); background: var(--gold-light); border: none; border-radius: 22px; cursor: pointer; } .cm-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 22px 60px; max-width: 760px; margin: 0 auto; width: 100%; } .cm-body h3 { font-family: 'Source Sans 3', sans-serif; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--terracotta); margin: 26px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } .cm-body h3:first-child { margin-top: 0; } /* Large enough to read from arm's length with a pan in the other hand. */ .cm-body ul, .cm-body ol { padding-left: 30px; font-size: 1.28rem; line-height: 1.75; } .cm-body li { margin-bottom: 14px; cursor: pointer; } .cm-body li.done { color: var(--muted); text-decoration: line-through; } @media (max-width: 620px) { .cm-body { padding: 20px 16px 60px; } .cm-body ul, .cm-body ol { font-size: 1.18rem; } .cm-awake { display: none; } } /* ---------- Star rating ---------- */ .rate { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); } .rate-label { font-size: .9rem; font-weight: 700; color: var(--navy); } .stars { display: flex; gap: 4px; } .stars button { background: none; border: none; cursor: pointer; font-size: 1.55rem; line-height: 1; padding: 2px; color: #d8d2c6; transition: color .15s, transform .15s; } .stars button:hover { transform: scale(1.2); } .stars button.lit { color: var(--gold); } .rate-msg { font-size: .85rem; color: var(--green); font-weight: 600; } /* Appears after a star is tapped. A sentence is worth more than a number. */ .rate-note { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .rate-note input { flex: 1 1 240px; font: inherit; font-size: 1rem; /* 16px or iOS zooms the page on focus */ padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); } .rate-note input:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .rate-note button { font: inherit; font-size: .9rem; font-weight: 700; padding: 11px 20px; min-height: 44px; color: var(--navy); background: var(--gold-light); border: none; border-radius: 10px; cursor: pointer; } .rate-note button:hover { background: var(--gold); } /* ---------- Home page: collection cards ---------- */ .collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-bottom: 44px; } .collection-card { display: block; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; } .collection-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .collection-card img { width: 100%; height: 190px; object-fit: cover; display: block; } /* Stands in for a dish photo until one is shot. Line art rather than an emoji, which renders as a missing-glyph box on systems without the newer sets. */ .collection-card .cc-banner { height: 190px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--saffron-light), var(--green-light)); } .collection-card .cc-art { width: 92px; height: 92px; opacity: .85; } .collection-card h3 { font-family: 'Playfair Display', serif; color: var(--navy); font-size: 1.25rem; margin-bottom: 6px; } .collection-card .cc-body { padding: 18px 22px 22px; } .collection-card p { font-size: .92rem; color: var(--muted); margin-bottom: 10px; } .collection-card .cc-count { font-size: .82rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; } /* ---------- Home page: full menu table ---------- */ .menu-section h2 { color: var(--navy); font-size: 1.7rem; text-align: center; margin-bottom: 6px; } .menu-section .sub { text-align: center; color: var(--muted); margin-bottom: 24px; } .menu-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .menu-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 16px; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; } .menu-table td { padding: 11px 16px; border-top: 1px solid var(--border); font-size: .95rem; } .menu-table tr:hover td { background: var(--green-light); } .menu-table a { color: var(--green); font-weight: 600; text-decoration: none; } .menu-table a:hover { text-decoration: underline; } .pill { display: inline-block; font-size: .75rem; font-weight: 700; border-radius: 12px; padding: 2px 10px; } .pill.snack { background: var(--saffron-light); color: var(--terracotta); } .pill.meal { background: var(--green-light); color: var(--green-dark); } .pill.sweet { background: #f6ecd9; color: #8a6416; } .pill.drink { background: #e8eef5; color: #2f4a6d; } /* ---------- Footer ---------- */ footer { text-align: center; color: rgba(255, 255, 255, .75); font-size: .85rem; padding: 38px 16px 48px; margin-top: 44px; background: var(--navy); } footer .brand { font-size: 1.05rem; display: block; margin-bottom: 8px; color: #fff; } footer .brand span, footer .brand em { color: var(--gold-light); } footer a { color: var(--gold-light); } footer .foot-links { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-weight: 600; letter-spacing: .04em; } .back-top { display: block; text-align: center; margin: 10px 0 30px; color: var(--green); font-weight: 600; text-decoration: none; } .back-top:hover { text-decoration: underline; } /* ---------- Touch targets ---------- Inline text links sit at 18 to 24px tall, well under the 44px that Apple and Google both recommend for a finger. Scoped to coarse pointers so it fixes phones and tablets without loosening the desktop line spacing. */ @media (pointer: coarse) { .toc a, .menu-table a, .back-top, footer a { display: inline-block; padding: 11px 0; } .toc li { margin-bottom: 0; } .topnav .brand { padding: 12px 0; } .stars button { padding: 10px 5px; } .navtoggle { width: 44px; height: 44px; } } /* ---------- Mobile ---------- */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); } .table-scroll .menu-table { min-width: 560px; } @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 64px 22px 72px; } .hero-collage { height: 360px; max-width: 480px; margin: 0 auto; width: 100%; } } /* Below 900px the nav links drop into a panel under the bar. This was 760px when there were three collections; at seven links the horizontal nav needs about 840px and blew a 126px hole out the side of an iPad in portrait. */ @media (max-width: 900px) { .navtoggle { display: grid; margin-left: 0; } .langtoggle { margin-left: auto; padding: 12px 14px; font-size: .78rem; } .nav-shell { gap: 10px; } .topnav .links { position: absolute; left: 0; right: 0; top: 62px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 30px rgba(0, 0, 0, .28); padding: 8px 24px 18px; display: none; } .topnav .links[data-open="true"] { display: flex; } .topnav .links a { font-size: .88rem; letter-spacing: .12em; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .10); } .topnav .links a[aria-current="page"] { border-bottom-color: var(--gold-light); } .toc ol { columns: 1; } /* On a phone the hero text fills the width, so the ornaments that sit in the middle of it land on the headline. Keep one butterfly in the corner. */ .ornament.b1, .ornament.b3 { display: none; } .ornament.b2 { bottom: 3%; left: 2%; width: 46px; opacity: .34; } .ornament.f1 { width: 120px; opacity: .18; } .ornament.f2 { width: 112px; opacity: .16; } } @media (max-width: 620px) { main { padding: 26px 12px 10px; } .page-hero { padding: 52px 16px 44px; } .hero .lede { font-size: 1rem; } .badges span { font-size: .78rem; padding: 4px 12px; } .recipe { padding: 22px 16px; } .recipe h2 { font-size: 1.25rem; } .dish { height: 200px; } .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat { padding: 8px 10px; } .toc { padding: 16px 18px; } .nav-shell { padding: 0 14px; } .menu-table td, .menu-table th { padding: 9px 10px; font-size: .87rem; } .collection-card img, .collection-card .cc-banner { height: 160px; } .hero-collage { height: 300px; } .ornament.f1, .ornament.f2 { width: 130px; } }