/* ============================================================= CONNIE'S SWEETEST THINGS — design system v2.0 · board 03 palette with #D9578C in the accent seat Written against the class names the child theme's PHP templates already output, so the markup barely changes and all 25 recipes keep rendering from WPRM exactly as they do now. ============================================================= */ :root{ --pink:#D9578C; /* bands and large display accents */ --pink-aa:#C44276; /* buttons + any pink text under 24px, 4.79:1 */ --ink:#33402E; /* olive — every word of body copy */ --pistachio:#D9E7CB; --rose:#F3D3D8; --mist:#EDF2E4; --neutral:#F8FAF5; --line:#E3EAD9; --slate:#5A6456; /* 6.19:1 on white */ --white:#fff; /* scallop geometry — height must equal radius or the lobes clip */ --sc-w:40px; --sc-h:20px; --sc-r:20px; } /* ---------- 1. base ---------- */ *{box-sizing:border-box} body{margin:0;background:#fff;color:var(--slate); font-family:"Instrument Sans",system-ui,-apple-system,sans-serif; font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:var(--pink-aa)} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px)} .center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} .small{font-size:15px} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:12px 18px;z-index:99} /* full-bleed inside a constrained parent theme */ .cst-fullbleed{width:100vw;margin-left:calc(50% - 50vw);max-width:100vw} /* Kadence's own header and footer are hidden; this theme draws its own */ #masthead,#colophon,.site-header,.site-footer{display:none !important} /* ---------- 2. type ---------- */ .h1,.h2,.h3,h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:400; color:var(--ink);letter-spacing:-.022em;line-height:1.05;margin:0} .h1,h1{font-size:clamp(34px,4.6vw,52px);text-wrap:balance} .h2,h2{font-size:clamp(30px,3.9vw,42px)} .h3,h3{font-size:clamp(22px,2.4vw,26px);line-height:1.15} .h1 em,.h2 em,h1 em,h2 em{font-style:italic;color:var(--pink)} /* bold inside a serif heading reads as broken; italic carries the emphasis */ .h1 b,.h2 b,h1 b,h2 b{font-weight:400;font-style:italic;color:var(--pink)} .body{font-size:18px;color:var(--slate);margin:14px 0 0} .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--pink-aa);margin:0 0 14px} .script{font-family:"Alex Brush",cursive;font-weight:400;color:var(--pink);line-height:.9} /* ---------- 3. buttons ---------- */ .btn{display:inline-block;background:var(--pink-aa);color:#fff;text-decoration:none; font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:15px 28px;border-radius:100px;border:0;cursor:pointer;white-space:nowrap; box-shadow:none;transition:background .15s ease} .btn:hover,.btn:focus{background:var(--ink);color:#fff} .btn--sm{padding:13px 24px;font-size:12px} .btn--ghost{background:var(--pistachio);color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff} .btn--light{background:#fff;color:var(--ink)} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* ---------- 4. header ---------- */ /* the old plum utility bar isn't in the approved design; markup kept, hidden */ .topbar{display:none} .cst-header{background:#fff;position:relative;z-index:5} .masthead{display:flex;align-items:center;gap:26px;padding-top:20px;padding-bottom:20px} .masthead .logo{flex:none;line-height:0} .masthead .logo img{max-height:62px;width:auto} .nav{flex:1;display:flex;align-items:center;gap:26px;justify-content:center;flex-wrap:wrap} .nav a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;padding-bottom:3px;position:relative} .nav a:hover,.nav .current-menu-item > a{color:var(--pink-aa)} .nav .current-menu-item > a::after{content:"";position:absolute;left:0;right:0;bottom:-2px; height:2px;background:var(--pink)} .masthead__cta{flex:none} /* the pink category band, scalloped along its lower edge */ .chipband{background:var(--pink);position:relative;z-index:4;padding:15px 0 17px} .chipband::after{content:"";position:absolute;left:0;bottom:calc(var(--sc-h) * -1); width:100%;height:var(--sc-h);pointer-events:none; background-image:radial-gradient(circle at var(--sc-r) 0, var(--pink) var(--sc-r),rgba(255,255,255,0) calc(var(--sc-r) + .5px)); background-size:var(--sc-w) var(--sc-h);background-repeat:repeat-x} .chipbar{ display:flex; gap:7px; justify-content:center; align-items:center; /* one row. On a narrow screen it scrolls sideways rather than stacking, which is the usual pattern for a category bar and keeps the band height constant across every page. */ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; } .chipbar::-webkit-scrollbar{display:none} /* the chips get more room than the 1180px content column */ .chipband .wrap{max-width:1460px} .chip{background:#fff;color:var(--ink);text-decoration:none;font-size:11.5px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:100px; white-space:nowrap;flex:0 0 auto} .chip:hover{background:var(--mist)} .chip.is-active{background:var(--ink);color:#fff} /* everything after the header slides up under the scallop */ #main{position:relative;z-index:1;margin-top:calc(var(--sc-h) * -1)} @media(max-width:1100px){ .chipbar{justify-content:flex-start} .chipband .wrap{padding-right:0} } @media(max-width:860px){ .masthead{flex-wrap:wrap;justify-content:center;text-align:center;gap:14px} .masthead .logo{order:1;flex:0 0 100%;display:flex;justify-content:center} .nav{order:2;flex:0 0 100%;gap:20px} .masthead__cta{order:3} } /* ---------- 5. sections and bands ---------- */ .section{padding:clamp(50px,6vw,86px) 0} .section--stone{background:var(--mist)} /* kept its old name so no template edits were needed; it is the pink band now */ .section--navy{background:var(--pink);color:#fff;position:relative;z-index:2} .section--navy .h1,.section--navy .h2,.section--navy h2,.section--navy h3{color:#fff} .section--navy .h2 b,.section--navy h2 b{color:#fff;font-style:italic} .section--navy .eyebrow{color:#fff;opacity:.9} .section--navy .body{color:rgba(255,255,255,.93)} .section--navy .card h3{color:#fff} .section--navy .card p{color:rgba(255,255,255,.85)} .section--navy::after{content:"";position:absolute;left:0;bottom:calc(var(--sc-h) * -1); width:100%;height:var(--sc-h);pointer-events:none; background-image:radial-gradient(circle at var(--sc-r) 0, var(--pink) var(--sc-r),rgba(255,255,255,0) calc(var(--sc-r) + .5px)); background-size:var(--sc-w) var(--sc-h);background-repeat:repeat-x} .section--navy + *{margin-top:calc(var(--sc-h) * -1);position:relative;z-index:1} /* striped and dotted bands */ .band-stripe{background-image:repeating-linear-gradient(90deg, var(--pistachio) 0 15px,#fff 15px 30px);padding:clamp(46px,6vw,76px) 20px; display:grid;place-items:center} .band-dot{background-color:var(--neutral); background-image:radial-gradient(circle,var(--pistachio) 8px,rgba(255,255,255,0) 8.5px); background-size:46px 46px;padding:clamp(50px,6vw,82px) 0} .ruled{text-align:center;margin-bottom:34px} .head-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px; flex-wrap:wrap;margin-bottom:28px} .head-row .more{color:var(--pink-aa);text-decoration:none;font-size:13px;font-weight:700; letter-spacing:.12em;text-transform:uppercase} /* ---------- 6. photos ---------- */ .ph{overflow:hidden;background:var(--mist);position:relative} /* the image fills its frame; grid centring is only for the empty state, where it would otherwise fight width/height:100% on the img */ .ph img{width:100%;height:100%;object-fit:cover;display:block} .ph.is-missing{display:grid;place-items:center} .ph--3x4{aspect-ratio:3/4} .ph--4x5{aspect-ratio:4/5} .ph--16x9{aspect-ratio:16/9} .ph--circle{aspect-ratio:1/1;border-radius:50%;box-shadow:0 0 0 7px #fff} /* a missing featured image gets a monogram rather than an empty hole */ .ph.is-missing::before{content:"C";font-family:"Alex Brush",cursive;font-size:84px; color:rgba(51,64,46,.17);line-height:1} /* ---------- 7. hero ---------- */ .hero{background:var(--mist);position:relative} .hero .ph{aspect-ratio:auto;height:clamp(360px,50vw,620px);background:var(--pistachio)} .hero .ph img{height:100%;object-position:center 46%} .hero__card{background:#fff;max-width:640px;margin:-92px auto 0;position:relative;z-index:3; padding:34px 44px 38px;text-align:center;box-shadow:0 2px 30px rgba(51,64,46,.10)} .hero__card .h1{margin:0} .hero__rule{height:1px;background:var(--mist);margin:18px 0} .hero__card p{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--pink-aa)} @media(max-width:620px){.hero__card{margin:-48px 16px 0;padding:26px 24px 30px}} /* the About page keeps the old split hero; restyled, not replaced */ .hero--about{display:grid;grid-template-columns:.9fr 1fr;gap:0;align-items:center; background:var(--mist)} .hero--about .ph{height:100%;min-height:clamp(340px,42vw,540px);aspect-ratio:auto} .hero--about .hero__text{padding:clamp(34px,5vw,64px) clamp(26px,4vw,56px)} @media(max-width:860px){.hero--about{grid-template-columns:1fr}} /* ---------- 8. intro (home) ---------- */ .intro{background:var(--mist);padding:clamp(54px,7vw,94px) 0} .intro .wrap{display:grid;grid-template-columns:1fr .86fr;gap:clamp(30px,5vw,64px); align-items:center} @media(max-width:860px){.intro .wrap{grid-template-columns:1fr}} .intro .script{font-size:clamp(44px,5vw,62px);margin:0 0 6px} .intro .h2{margin-bottom:18px} .intro p{max-width:46ch;margin:0 0 14px} .stack{position:relative;min-height:380px} .stack .ph{position:absolute;box-shadow:0 2px 26px rgba(51,64,46,.13)} .stack .a{width:68%;aspect-ratio:3/4;left:0;top:0;z-index:2} .stack .b{width:52%;aspect-ratio:4/3;right:0;bottom:0;z-index:1;outline:9px solid #fff} @media(max-width:860px){.stack{min-height:320px}} /* ---------- 9. browse by category ---------- */ .browse .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,56px); align-items:center} @media(max-width:820px){.browse .wrap{grid-template-columns:1fr}} .feature{position:relative;display:block;text-decoration:none} .feature .ph{aspect-ratio:4/3} .feature__tag{position:absolute;top:18px;left:18px;background:#fff;color:var(--pink-aa); font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:9px 18px} .feature__cap{background:var(--pink);margin:-46px 26px 0;position:relative; padding:24px 26px 26px;text-align:center} /* scalloped top, so the plate bites into the photograph instead of sitting on it as a rectangle. Smaller lobes than the header band — at caption width the full-size ones look heavy. */ .feature__cap::before{content:"";position:absolute;left:0;top:-15px;width:100%;height:15px; background-image:radial-gradient(circle at 15px 15px, var(--pink) 15px,rgba(255,255,255,0) 15.5px); background-size:30px 15px;background-repeat:repeat-x;pointer-events:none} .feature__cap h3{margin:0 0 10px;color:#fff} .feature__cap .rule{width:46px;height:1px;background:rgba(255,255,255,.45); margin:0 auto 15px;border:0} .feature__cap .btn{background:#fff;color:var(--ink)} .feature__cap .btn:hover{background:var(--ink);color:#fff} /* the tag stays white with pink text — two pink elements on one photo is one too many */ .catlist{list-style:none;margin:0;padding:0} .catlist li{border-bottom:1px solid var(--line)} .catlist a{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:17px 2px;text-decoration:none;color:var(--ink); font-family:"Newsreader",Georgia,serif;font-size:clamp(25px,3vw,33px);letter-spacing:-.015em} .catlist a:hover{color:var(--pink)} .catlist a::after{content:"\2192";color:var(--pink);font-size:21px;line-height:1} /* circles row (Start Here) */ .circles{display:grid;grid-template-columns:repeat(6,1fr);gap:22px} @media(max-width:860px){.circles{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.circles{grid-template-columns:repeat(2,1fr)}} .circle-link{text-decoration:none;display:block;text-align:center} .circle-link b{display:block;margin-top:14px;font-family:"Newsreader",Georgia,serif; font-weight:400;font-size:19px;color:var(--ink)} .circle-link:hover b{color:var(--pink-aa)} /* ---------- 10. the start-here plate ---------- */ .plate{background:#fff;max-width:600px;padding:40px 44px 44px;text-align:center; position:relative;box-shadow:0 0 0 1px var(--line)} .plate .h2{margin-bottom:12px} .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--rose); color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; padding:8px 24px} /* ---------- 11. cards and grids ---------- */ .grid{display:grid;gap:26px} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.grid--3{grid-template-columns:minmax(0,1fr)}} @media(max-width:560px){.grid--4{grid-template-columns:minmax(0,1fr)}} .card{display:block;text-decoration:none;color:inherit} .card .ph{aspect-ratio:3/4} .card h3{margin:0;font-size:21px;line-height:1.2} .card p{margin:7px 0 0;font-size:15px;color:var(--slate)} .card:hover h3{color:var(--pink-aa)} .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;background:var(--pink-aa);color:#fff;padding:6px 13px; border-radius:100px;margin:16px 0 9px;text-decoration:none} .tagpill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;background:var(--pink-aa);color:#fff;padding:7px 15px; border-radius:100px;text-decoration:none} .pager{display:flex;gap:9px;justify-content:center;margin-top:46px} .pager .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px; padding:0 12px;border-radius:100px;text-decoration:none;color:var(--ink); font-weight:700;font-size:15px;box-shadow:inset 0 0 0 1px var(--line)} .pager .page-numbers.current{background:var(--pink-aa);color:#fff;box-shadow:none} .pager .page-numbers:hover{background:var(--mist)} /* ---------- 12. single recipe ---------- */ .layout-sidebar{max-width:820px;margin:0 auto} .layout-sidebar .widget-area,.layout-sidebar aside{display:none} .byline{font-size:15px;color:var(--slate);margin:16px 0 24px} .byline b{color:var(--ink);font-weight:600} .pinbar{display:inline-block;margin:16px 0 0;font-size:13px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--pink-aa);text-decoration:none} .prose{font-size:18px;color:var(--slate)} .prose p{margin:0 0 17px} .prose h2,.prose h3{margin:30px 0 12px} .prose a{color:var(--pink-aa)} .prose img{margin:22px 0} .rate-block{background:var(--pink);color:#fff;text-align:center;padding:44px 28px;margin:40px 0} .rate-block .eyebrow{color:#fff;opacity:.9} .rate-block .h2{color:#fff} .rate-block .h2 b{color:#fff;font-style:italic} .rate-block .body{color:rgba(255,255,255,.93);max-width:52ch} .rate-block .btn{background:#fff;color:var(--ink);margin-top:22px} .rate-block .btn:hover{background:var(--ink);color:#fff} .rate-block__stars{margin:16px 0 0} /* ---------- 13. footer ---------- */ .cst-footer{background:var(--ink);color:#fff;position:relative;z-index:2; margin-top:calc(var(--sc-h) * -1);padding:clamp(48px,5vw,72px) 0 34px} .cst-footer::before{content:"";position:absolute;left:0;top:calc(var(--sc-h) * -1); width:100%;height:var(--sc-h);pointer-events:none; background-image:radial-gradient(circle at var(--sc-r) var(--sc-h), var(--ink) var(--sc-r),rgba(255,255,255,0) calc(var(--sc-r) + .5px)); background-size:var(--sc-w) var(--sc-h);background-repeat:repeat-x} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:38px} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} .footer-logo{max-width:190px;height:auto;background:none} .cst-footer h2{font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--rose);margin:0 0 14px;font-weight:700;font-family:"Instrument Sans",sans-serif} .cst-footer ul{list-style:none;margin:0;padding:0;font-size:16px} .cst-footer li{margin-bottom:7px} /* the Recipes column now carries every category; keep it one column */ .cst-footer ul{columns:1} .cst-footer a{color:#fff;text-decoration:none;opacity:.9} .cst-footer a:hover{opacity:1;text-decoration:underline} .cst-footer .small{color:rgba(255,255,255,.78) !important} .fine{border-top:1px solid rgba(255,255,255,.17);margin-top:34px;padding-top:20px; font-size:13px;color:rgba(255,255,255,.72);display:flex;justify-content:space-between; gap:18px;flex-wrap:wrap} .footer-social{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap} .footer-social svg{width:20px;height:20px;fill:currentColor} .social-list{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap; justify-content:center} .social-list a{color:var(--ink);text-decoration:none;font-weight:600} .social-list svg{width:22px;height:22px;fill:currentColor} /* ---------- 14. forms ---------- */ input[type=text],input[type=email],input[type=url],textarea,select{ width:100%;border:1px solid var(--line);background:#fff;padding:14px 16px; font:inherit;font-size:16.5px;color:var(--ink);border-radius:0} input:focus,textarea:focus,select:focus{outline:2px solid var(--pink);outline-offset:-2px} /* scoped: as a bare element rule this reached Kadence's filter checkboxes and any other plugin's labels, turning readable words into tracked caps */ .cst-page form label,.comment-form label,.wpcf7 label,.cst-footer label{ display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--ink);margin:0 0 7px} /* ---------- 15. comments ---------- */ .comments-area{max-width:820px;margin:48px auto 0} .comments-area h2,.comments-area h3{margin-bottom:18px} .comment-list{list-style:none;margin:0;padding:0} .comment-body{border-top:1px solid var(--line);padding:22px 0} /* ---------- 16. odds and ends used by the templates ---------- */ .ph--4x3{aspect-ratio:4/3} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:760px){.grid--2{grid-template-columns:minmax(0,1fr)}} /* ---------- 17. collaborate band ---------- The photo breaks the top edge of the pink band rather than floating inside it. The band's top padding is removed and the photo pulled up by the same amount, so the overlap is exact at every width. */ .collab{margin-top:140px;padding-top:0} .collab-photo{width:min(460px,84vw);aspect-ratio:4/3;object-fit:cover; margin:-140px auto 26px;outline:10px solid #fff;position:relative;z-index:3} @media(max-width:860px){ .collab{margin-top:100px} .collab-photo{margin-top:-100px;outline-width:7px} } /* ---------- 18. About page prose ---------- */ .prose > p:first-child{font-size:21px;line-height:1.5;color:var(--ink)} .prose h2{font-size:clamp(25px,3vw,32px);margin:38px 0 14px;color:var(--ink)} .prose strong{color:var(--ink)} .hero--about .h1{margin-bottom:14px} /* ---------- 19. heading font, defended ---------- Kadence sets its own heading family with enough specificity to beat the rules in section 2, so headings were rendering in its sans rather than Newsreader. Scoped to this theme's own containers, so Kadence's admin and widget interfaces are untouched. */ .cst-header .logo, .cst-footer .logo, .script, .intro .script{ font-family:"Alex Brush",cursive !important; font-weight:400 !important; } #main h1, #main h2, #main h3, #main h4, #main .h1, #main .h2, #main .h3, .hero__card h1, .feature__cap h3, .card h3, .catlist a, .plate .h2{ font-family:"Newsreader",Georgia,serif !important; font-weight:400 !important; } #main .eyebrow, #main .tag, #main .tagpill, #main .btn, .chip, .feature__tag, .cst-footer h2, .nav a, .byline{ font-family:"Instrument Sans",system-ui,sans-serif !important; font-weight:700 !important; } #main .body, #main p, .prose p{font-family:"Instrument Sans",system-ui,sans-serif} /* ---------- 20. newsletter ---------- Two columns: the sign-up on the left, a photograph on the right. This is the layout from the approved concept; the earlier centred version left a bare band between two scalloped edges whenever no widget was placed. If a provider's form is dropped into the Newsletter widget area it replaces the theme's own fields entirely — only the surrounding layout stays. */ .news__grid{display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(26px,4.5vw,60px);align-items:center;text-align:left} .news__copy .h2{margin:0 0 10px} .news__copy .body{max-width:40ch;margin:0} .news__form{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;max-width:470px} /* width:auto is needed because the global input rule sets width:100% */ .news__form input[type=email]{flex:1 1 210px;min-width:0;width:auto} .news__form .btn{flex:0 0 auto} /* matched padding so the field and the button read as one control */ .news__form input[type=email],.news__form .btn{padding-top:15px;padding-bottom:15px} .news__fine{font-size:13.5px;color:var(--slate);margin:11px 0 0} .news__done{font-size:15.5px;color:var(--pink-aa);font-weight:600;margin:16px 0 0; max-width:40ch} .news__widget{margin-top:22px;max-width:470px} /* whatever the provider's embed brings with it, keep it inside the column */ .news__widget input,.news__widget select,.news__widget textarea{max-width:100%} /* reminder for logged-in editors only; visitors never see it */ .news__admin{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--slate); border-left:3px solid var(--pink);padding-left:12px;max-width:46ch} /* an explicit height rather than aspect-ratio: aspect-ratio on a grid item resolves against the intrinsic width and inflates the column */ .news__photo{position:relative;overflow:hidden;background:var(--pistachio); height:clamp(300px,33vw,430px)} .news__photo img{width:100%;height:100%;object-fit:cover;display:block} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media(max-width:820px){ .news__grid{grid-template-columns:1fr;gap:28px} .news__photo{height:clamp(230px,50vw,310px);order:-1} } /* the sidebar is too narrow for the field and button side by side */ .news__form--stack{flex-direction:column;margin-top:14px;max-width:none} .news__form--stack .btn{width:100%;text-align:center} @media(max-width:520px){ /* once the pair has wrapped, a half-width button looks like a mistake */ .news__form .btn{width:100%;text-align:center} } /* ---------- 21. editable intro prose ---------- The "Hi, I'm Connie" copy comes from the home page's own editor, so this has to style whatever the block editor emits rather than markup written by hand. Everything is scoped to .intro__prose so the editor's output can never reach the rest of the page. */ .intro__prose{margin-top:0} .intro__prose > :first-child{margin-top:0} .intro__prose > :last-child{margin-bottom:0} .intro__prose p{font-size:18px;color:var(--slate);max-width:46ch;margin:0 0 14px} .intro__prose a{color:var(--pink-aa);text-decoration:underline; text-underline-offset:2px} .intro__prose a:hover{color:var(--ink)} .intro__prose strong,.intro__prose b{font-weight:700;color:var(--ink)} .intro__prose em{font-style:italic} /* a heading pasted into the editor sits under the section's own h2, so it is sized as a subheading — at full h2 size the two would compete */ .intro__prose h2,.intro__prose h3,.intro__prose h4{font-size:21px;line-height:1.25; color:var(--ink);margin:22px 0 8px;font-weight:400} .intro__prose ul,.intro__prose ol{max-width:46ch;margin:0 0 14px;padding-left:1.15em; font-size:18px;color:var(--slate)} .intro__prose li{margin-bottom:6px} .intro__prose blockquote{border-left:3px solid var(--pink);margin:18px 0; padding-left:16px;font-family:"Newsreader",Georgia,serif;font-size:19px;color:var(--ink)} /* an image dropped into the copy would otherwise overflow the column */ .intro__prose img{max-width:100%;height:auto} /* the editor's own alignment and spacer blocks have no business in this slot */ .intro__prose .alignfull,.intro__prose .alignwide{width:auto;max-width:46ch; margin-left:0;margin-right:0} /* ---------- 22. footer social, icons only ---------- Names dropped: five of them stacked beside the category list read as clutter. Bare icons, no circles — the glyph itself goes hot pink on hover. The contact page keeps its labels. */ .footer-social.is-icononly{gap:18px;flex-wrap:wrap} .footer-social.is-icononly a{display:inline-flex;align-items:center;justify-content:center; color:#fff;opacity:.8;transition:color .15s ease,opacity .15s ease} .footer-social.is-icononly a:hover,.footer-social.is-icononly a:focus-visible{ color:var(--pink);opacity:1;text-decoration:none} .footer-social.is-icononly svg{width:22px;height:22px;fill:currentColor} /* The YouTube glyph is a white body with its play triangle punched out in white, which on the dark footer reads as a solid blank box. The triangle has to match whatever sits behind it, which is the footer either way. */ .footer-social.is-icononly svg path[fill="#fff"]{fill:var(--ink)} /* a visible focus ring, since there is no longer a circle to tint */ .footer-social.is-icononly a:focus-visible{outline:2px solid var(--pink); outline-offset:3px;border-radius:3px} /* the design credit, bottom right beside Accessibility */ .fine__right{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap; justify-content:flex-end} .fine .credit{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)} .fine .credit:hover,.fine .credit:focus-visible{color:#fff;border-bottom-color:var(--rose)} @media(max-width:560px){ /* stacked, the two halves of the fine print should both read left */ .fine{flex-direction:column;gap:10px} .fine__right{justify-content:flex-start} } /* ---------- 23. [cst_optin] shortcode ---------- The newsletter sign-up as a reusable section, for pages built in Kadence. Namespaced away from .news__* so it can never collide with the home page's own section when both appear on one page. */ .cst-optin{background:var(--mist);padding:clamp(40px,5.5vw,76px) clamp(20px,4vw,44px)} .cst-optin__inner{max-width:1120px;margin:0 auto;display:grid; grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.5vw,60px);align-items:center} .cst-optin h2{font-family:"Newsreader",Georgia,serif;font-weight:400; font-size:clamp(30px,3.9vw,42px);line-height:1.12;color:var(--ink);margin:0 0 10px} .cst-optin__sub{font-size:18px;line-height:1.5;color:var(--slate);max-width:40ch;margin:0} .cst-optin__form{display:flex;gap:10px;margin:24px 0 0;flex-wrap:wrap;max-width:470px} /* width:auto is needed because the global input rule sets width:100% */ .cst-optin__form input[type=email]{flex:1 1 210px;min-width:0;width:auto; padding-top:15px;padding-bottom:15px} .cst-optin__form button{flex:0 0 auto;border:0;cursor:pointer; background:var(--pink-aa);color:#fff;border-radius:100px; font-family:"Instrument Sans",system-ui,sans-serif;font-size:12.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;padding:15px 28px;white-space:nowrap; transition:background .15s ease} .cst-optin__form button:hover,.cst-optin__form button:focus-visible{background:var(--ink)} .cst-optin__fine{font-size:13.5px;color:var(--slate);margin:11px 0 0} .cst-optin__done{font-size:15.5px;font-weight:600;color:var(--pink-aa);margin:16px 0 0; max-width:40ch} .cst-optin__widget{margin-top:22px;max-width:470px} /* whatever the provider's embed brings with it, keep it inside the column */ .cst-optin__widget input,.cst-optin__widget select,.cst-optin__widget textarea{max-width:100%} .cst-optin__admin{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--slate); border-left:3px solid var(--pink);padding-left:12px;max-width:46ch} /* an explicit height, not aspect-ratio: aspect-ratio on a grid item resolves against the intrinsic width and blows the column out */ .cst-optin__photo{margin:0;overflow:hidden;background:var(--pistachio); height:clamp(300px,33vw,430px)} .cst-optin__photo img{width:100%;height:100%;object-fit:cover;display:block} /* layout="center", or split with no image given */ .cst-optin--center .cst-optin__inner, .cst-optin__inner:not(:has(.cst-optin__photo)){grid-template-columns:1fr} /* split layout with no image given: narrow the column, or the empty right half reads as a photo that failed to load */ .cst-optin__inner:not(:has(.cst-optin__photo)){max-width:720px} .cst-optin--center .cst-optin__inner{text-align:center;max-width:620px} .cst-optin--center .cst-optin__sub, .cst-optin--center .cst-optin__form{margin-left:auto;margin-right:auto} @media(max-width:820px){ .cst-optin__inner{grid-template-columns:1fr;gap:28px} .cst-optin__photo{height:clamp(230px,50vw,310px);order:-1} } @media(max-width:520px){.cst-optin__form button{width:100%;text-align:center}} /* ---------- 24. [cst_quotes] shortcode ---------- */ .cst-quotes{background-color:var(--neutral); background-image:radial-gradient(circle,var(--pistachio) 8px,rgba(255,255,255,0) 8.5px); background-size:46px 46px;padding:clamp(44px,5.5vw,82px) clamp(20px,4vw,44px)} .cst-quotes__inner{max-width:1120px;margin:0 auto} .cst-quotes__head{font-family:"Newsreader",Georgia,serif;font-weight:400; font-size:clamp(30px,3.9vw,42px);line-height:1.12;color:var(--ink); text-align:center;margin:0 0 34px} /* auto-fit, so a third or fourth quote needs no change here */ .cst-quotes__grid{display:grid;gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .cst-quotes blockquote{background:#fff;margin:0;padding:26px 28px; box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column} /* the quote marks are drawn here, so the text stays clean to edit */ .cst-quotes blockquote p{font-family:"Newsreader",Georgia,serif;font-size:19px; line-height:1.35;color:var(--ink);margin:0;flex:1 1 auto} .cst-quotes blockquote p::before{content:"\201C"} .cst-quotes blockquote p::after{content:"\201D"} .cst-quotes blockquote cite{display:block;font-style:normal; font-family:"Instrument Sans",system-ui,sans-serif;font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--pink-aa);font-weight:700;margin-top:13px} /* ---------- 25. pages built with Kadence blocks ---------- page-blocks.php renders the content with no wrapper of its own, so a Kadence Row Layout can decide its own width. These rules only stop the theme's own resets from interfering; they add no layout. */ .cst-blocks > *{max-width:none} /* Kadence paints its backgrounds on the inner element, not the outer one */ .cst-blocks .wp-block-kadence-rowlayout{width:100%} .cst-blocks .alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); max-width:100vw;width:100vw} .cst-blocks .alignwide{max-width:1180px;margin-left:auto;margin-right:auto} /* block editor colour slugs, so a swatch picked in Kadence matches the CSS */ .has-cst-pink-color{color:var(--pink)} .has-cst-pink-aa-color{color:var(--pink-aa)} .has-cst-ink-color{color:var(--ink)} .has-cst-slate-color{color:var(--slate)} .has-cst-pink-background-color{background-color:var(--pink)} .has-cst-pistachio-background-color{background-color:var(--pistachio)} .has-cst-rose-background-color{background-color:var(--rose)} .has-cst-mist-background-color{background-color:var(--mist)} .has-cst-neutral-background-color{background-color:var(--neutral)} .has-cst-ink-background-color{background-color:var(--ink)} .has-cst-white-background-color{background-color:#fff} /* ---------- 26. [cst_recipes] band ---------- The theme's recipe cards in a band of their own. On pink the card text inverts to white and the category pill flips to white-on-pink, because a pink pill on a pink band disappears. */ .cst-recipes{padding:clamp(46px,6vw,82px) 0} .cst-recipes .grid{align-items:start} .cst-recipes--pink{background:var(--pink);position:relative;z-index:2} .cst-recipes--pink .h2,.cst-recipes--pink h2{color:#fff} .cst-recipes--pink .card h3{color:#fff} .cst-recipes--pink .card p{color:rgba(255,255,255,.85)} .cst-recipes--pink .card:hover h3{color:var(--ink)} /* the pill inverts: white plate, pink type */ .cst-recipes--pink .tag{background:#fff;color:var(--pink-aa)} .cst-recipes--pink .card:hover .tag{background:var(--ink);color:#fff} /* scalloped lower edge, so the band sits in the page like the others */ .cst-recipes--pink::after{content:"";position:absolute;left:0;bottom:calc(var(--sc-h) * -1); width:100%;height:var(--sc-h);pointer-events:none; background-image:radial-gradient(circle at var(--sc-r) 0, var(--pink) var(--sc-r),rgba(255,255,255,0) calc(var(--sc-r) + .5px)); background-size:var(--sc-w) var(--sc-h);background-repeat:repeat-x} .cst-recipes--pink + *{margin-top:calc(var(--sc-h) * -1);position:relative;z-index:1} /* the striped variant: the pistachio band from the home page, with the cards on a white plate so the photographs and the pink pills stay readable */ .cst-recipes--stripe{ background-image:repeating-linear-gradient(90deg, var(--pistachio) 0 15px,#fff 15px 30px); padding:clamp(38px,5vw,72px) 0} .cst-recipes--stripe .cst-recipes__plate{ background:#fff; padding:clamp(28px,4vw,52px) clamp(22px,3.5vw,44px)} /* the plate already supplies the inset, so the band needs no extra gutter */ .cst-recipes--light{background:#fff} /* ---------- 27. Kadence Advanced Query cards ---------- Makes a Kadence query grid look like template-parts/card.php. Put the class cst-recipe-grid on the Query (Card) block. The inner blocks are CORE blocks, not Kadence ones, so the selectors are .wp-block-post-terms and .wp-block-post-excerpt — the kb-* names only cover the wrapper, the image and the heading link. */ .cst-recipe-grid .kb-query-grid-wrap{ display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:26px !important;margin:0 !important;padding:0 !important;list-style:none !important} @media(max-width:1024px){.cst-recipe-grid .kb-query-grid-wrap{grid-template-columns:repeat(3,minmax(0,1fr)) !important}} @media(max-width:780px){.cst-recipe-grid .kb-query-grid-wrap{grid-template-columns:repeat(2,minmax(0,1fr)) !important}} @media(max-width:480px){.cst-recipe-grid .kb-query-grid-wrap{grid-template-columns:1fr !important}} /* no card box — the photograph carries it, as in the coded cards */ .cst-recipe-grid .kb-query-item{background:transparent !important;border:0 !important; box-shadow:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important} .cst-recipe-grid .kb-query-item > .wp-block-kadence-column, .cst-recipe-grid .kb-query-item .kt-inside-inner-col{ background:transparent !important;box-shadow:none !important;border-radius:0 !important; padding:0 !important;text-align:left !important} .cst-recipe-grid figure,.cst-recipe-grid .wp-block-kadence-image{margin:0 !important} .cst-recipe-grid .kb-is-ratio-image,.cst-recipe-grid .kb-img{border-radius:0 !important} /* category -> the pink pill. Core's post-terms block. */ .cst-recipe-grid .wp-block-post-terms{margin:16px 0 9px !important;line-height:1 !important; font-size:0 !important} .cst-recipe-grid .wp-block-post-terms a{ display:inline-block;font-family:"Instrument Sans",system-ui,sans-serif !important; font-size:11px !important;font-weight:700 !important;letter-spacing:.14em !important; text-transform:uppercase !important;background:var(--pink-aa) !important;color:#fff !important; padding:6px 13px !important;border-radius:100px !important;text-decoration:none !important; line-height:1.2 !important} .cst-recipe-grid .wp-block-post-terms a:hover{background:var(--ink) !important} /* the separator between terms, and any "Categories:" prefix */ .cst-recipe-grid .wp-block-post-terms__separator, .cst-recipe-grid .wp-block-post-terms .wp-block-post-terms__prefix{display:none !important} /* title — Kadence wraps the heading in its own link */ .cst-recipe-grid .kb-advanced-heading-link, .cst-recipe-grid .kb-query-item h1,.cst-recipe-grid .kb-query-item h2, .cst-recipe-grid .kb-query-item h3,.cst-recipe-grid .kb-query-item h4, .cst-recipe-grid .kt-adv-heading-inner{ font-family:"Newsreader",Georgia,serif !important;font-size:21px !important; font-weight:400 !important;line-height:1.2 !important;letter-spacing:-.01em !important; color:var(--ink) !important;margin:0 !important;display:block; text-decoration:none !important;border-bottom:0 !important; text-underline-offset:unset !important;transition:color .15s ease} .cst-recipe-grid .kb-query-item:hover .kb-advanced-heading-link, .cst-recipe-grid .kb-query-item:hover h2, .cst-recipe-grid .kb-query-item:hover h3{color:var(--pink-aa) !important} /* excerpt — core's excerpt block */ .cst-recipe-grid .wp-block-post-excerpt{margin:0 !important} .cst-recipe-grid .wp-block-post-excerpt__excerpt, .cst-recipe-grid .wp-block-post-excerpt p{ font-family:"Instrument Sans",system-ui,sans-serif !important;font-size:15px !important; line-height:1.5 !important;color:var(--slate) !important;margin:7px 0 0 !important} .cst-recipe-grid .wp-block-post-excerpt__more-text, .cst-recipe-grid .wp-block-read-more{display:none !important} /* nothing in these cards is a blue underlined link */ .cst-recipe-grid a{text-decoration:none !important} /* ---------- 28. query cards: order and alignment ---------- The blocks inside the card come out as heading, category, excerpt. The design wants category, heading, excerpt, so the column is a flexbox and the children are ordered here — no need to rebuild the block layout. Everything is forced left: Kadence centres the advanced heading by default, which left the pills and titles on different axes. */ .cst-recipe-grid .kb-query-item .kt-inside-inner-col{ display:flex !important;flex-direction:column !important;align-items:flex-start !important; text-align:left !important} .cst-recipe-grid .kb-query-item .kt-inside-inner-col > .wp-block-post-terms{order:1} .cst-recipe-grid .kb-query-item .kt-inside-inner-col > .kb-advanced-heading-link, .cst-recipe-grid .kb-query-item .kt-inside-inner-col > h1, .cst-recipe-grid .kb-query-item .kt-inside-inner-col > h2, .cst-recipe-grid .kb-query-item .kt-inside-inner-col > h3{order:2} .cst-recipe-grid .kb-query-item .kt-inside-inner-col > .wp-block-post-excerpt{order:3} .cst-recipe-grid .kb-query-item .kt-inside-inner-col > style{display:none} /* the heading's own centring, wherever Kadence puts it */ .cst-recipe-grid .kb-advanced-heading-link, .cst-recipe-grid .kt-adv-heading-inner, .cst-recipe-grid .kb-query-item h1,.cst-recipe-grid .kb-query-item h2, .cst-recipe-grid .kb-query-item h3,.cst-recipe-grid .kb-query-item h4{ text-align:left !important;width:100% !important} /* with the pill first the spacing belongs to it, not the title */ .cst-recipe-grid .wp-block-post-terms{margin:14px 0 9px !important} .cst-recipe-grid .kb-advanced-heading-link{margin:0 !important} .cst-recipe-grid .wp-block-post-excerpt{margin:7px 0 0 !important} /* ---------- 29. Kadence query filters ---------- The filter panel beside a query grid: search box, checkbox groups, reset. The first rule is a repair. Section 14 styles every