/* Garden Journal pages only. Every class is prefixed gj- so nothing collides with /style.css. Built from the Garden Journal website kit (DESIGN_GUIDE.md, reference/style.css Part B). */ /* ---- B1. Fitting into sofritoconrecao.com (guide section 2) ---- */ .gj-body::before, .gj-body::after { content: none; } /* no grain, scanlines or vignette over the pixel art */ .gj-body > footer { background: #050506; } /* keep the site footer dark under the cream page */ .gj-body > nav { background: rgba(5, 5, 6, .94); } /* optional: a solid black bar over cream */ main.gj { max-width: none; width: 100%; margin: 0; padding: 0; } /* site main is 920 px with padding */ /* ---- B2. Tokens: color (section 3), fonts (section 4), spacing (section 5) ---- */ .gj-body { /* Meadow: lib/core/theme/theme_presets.dart */ --gj-bg: #FDF7EC; --gj-band: #FFF8E7; --gj-surface: #FFFFFF; --gj-well: #EAF1DD; --gj-note: #FFF2D9; --gj-hairline: #EFE3CB; --gj-border: #C4AD8A; --gj-text: #3E2E1C; --gj-muted: #6B5740; --gj-forest: #3D6B35; --gj-link: #3D6B35; --gj-primary: #3D6B35; --gj-on-primary: #FFFFFF; --gj-green: #5A8F4A; --gj-leaf: #7CB860; --gj-gold: #E8B84B; --gj-focus: #3D6B35; --gj-shadow: #3E2E1C; --gj-shadow-soft: #EFE3CB; color-scheme: light; background: var(--gj-bg); color: var(--gj-text); } @media (prefers-color-scheme: dark) { .gj-body { /* Meadow Night */ --gj-bg: #201A12; --gj-band: #292214; --gj-surface: #2C251A; --gj-well: #37422C; --gj-note: #332A16; --gj-hairline: #453A28; --gj-border: #5A4C33; --gj-text: #F2E8D5; --gj-muted: #CBBA9B; --gj-forest: #A9CD8E; --gj-link: #8CC873; --gj-primary: #6FAE58; --gj-on-primary: #201A12; --gj-green: #6FAE58; --gj-leaf: #8CC873; --gj-gold: #E8B84B; --gj-focus: #E8B84B; --gj-shadow: #140D05; --gj-shadow-soft: #140D05; color-scheme: dark; } } .gj-body { --gj-font-display: "Pixelify Sans", "Nunito", system-ui, sans-serif; --gj-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .gj-body { --gj-1: 4px; --gj-2: 8px; --gj-3: 12px; --gj-4: 16px; --gj-5: 24px; --gj-6: 32px; --gj-7: 48px; --gj-8: 64px; --gj-9: 96px; --gj-10: 128px; --gj-px: 4px; /* one "pixel" for stepped corners */ --gj-max: 920px; --gj-gutter: 16px; } @media (min-width: 640px) { .gj-body { --gj-gutter: 24px; } } @media (min-width: 1024px) { .gj-body { --gj-gutter: 32px; } } /* ---- B3. Typography (section 4) ---- */ .gj { font: 400 1.0625rem/1.65 var(--gj-font-body); color: var(--gj-text); } @media (min-width: 1024px) { .gj { font-size: 1.125rem; } } .gj :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; } /* the site resets these too */ .gj p + p { margin-top: var(--gj-4); } .gj h1, .gj h2 { font-family: var(--gj-font-display); font-weight: 700; color: var(--gj-text); letter-spacing: 0; text-transform: none; /* never uppercase Pixelify */ text-wrap: balance; } .gj h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); line-height: 1.05; } .gj h2 { font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); line-height: 1.1; } .gj h3 { font: 800 clamp(1.25rem, 1.15rem + .4vw, 1.375rem)/1.3 var(--gj-font-body); } .gj-kicker { /* "Garden Journal" + icon, the first line of the H1 */ display: flex; align-items: center; justify-content: center; gap: var(--gj-3); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.1; color: var(--gj-forest); margin-bottom: var(--gj-3); } .gj-kicker img { width: 48px; height: 48px; image-rendering: pixelated; } .gj-headline { display: block; } .gj-lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.55; font-weight: 600; color: var(--gj-muted); max-width: 40rem; } .gj-small { font-size: .875rem; line-height: 1.5; font-weight: 600; color: var(--gj-muted); } .gj-eyebrow { display: inline-flex; align-items: center; gap: var(--gj-2); font: 800 .8125rem/1.2 var(--gj-font-body); letter-spacing: .12em; text-transform: uppercase; /* fine: this is Nunito */ color: var(--gj-forest); margin-bottom: var(--gj-4); } .gj-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--gj-gold); } /* ---- B4. Layout (section 5) ---- */ .gj-wrap { max-width: calc(var(--gj-max) + 2 * var(--gj-gutter)); margin-inline: auto; padding-inline: var(--gj-gutter); } .gj-section { padding-block: var(--gj-8); scroll-margin-top: 72px; } /* the site nav is sticky */ @media (min-width: 1024px) { .gj-section { padding-block: var(--gj-9); } } .gj-section--band { background: var(--gj-band); } /* ---- B5. Components (section 7) ---- */ /* Links and focus. Keep this block before the buttons: `.gj :focus-visible` has the same specificity as `.gj-btn:focus-visible`, so it would override the buttons' wider 8 px focus offset if it came later. */ .gj a { color: var(--gj-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .gj a:hover { text-decoration-thickness: 3px; } .gj :focus-visible { outline: 3px solid var(--gj-focus); outline-offset: 3px; } /* Pixel frame (stepped corners) */ .gj-pixel { --edge: var(--gj-border); margin: var(--gj-px); /* room for the edges, which sit outside the box */ box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } /* Buttons */ .gj-btn { --edge: var(--gj-primary); display: inline-flex; align-items: center; justify-content: center; gap: var(--gj-2); min-height: 48px; padding: 12px 24px; margin: var(--gj-px); border: 0; border-radius: 0; cursor: pointer; font: 800 1.125rem/1.2 var(--gj-font-body); color: var(--gj-on-primary); background: var(--edge); text-decoration: none; box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge), 0 calc(2 * var(--gj-px)) 0 0 var(--gj-shadow); /* the hard "key" shadow */ transition: transform .08s steps(1); } .gj a.gj-btn { color: var(--gj-on-primary); text-decoration: none; } .gj-btn:hover { transform: translateY(-2px); } .gj-btn:active { /* pressed: sinks onto its shadow */ transform: translateY(var(--gj-px)); box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } .gj-btn:focus-visible { outline: 3px solid var(--gj-focus); outline-offset: 8px; } .gj-btn--secondary { --edge: var(--gj-forest); background: var(--gj-surface); color: var(--gj-forest); } .gj a.gj-btn--secondary { color: var(--gj-forest); } .gj-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gj-4); } /* Cards */ .gj-card { --edge: var(--gj-hairline); background: var(--gj-surface); padding: var(--gj-5); margin: var(--gj-px); box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge), calc(2 * var(--gj-px)) calc(2 * var(--gj-px)) 0 0 var(--gj-shadow-soft); } @media (min-width: 640px) { .gj-card { padding: var(--gj-6); } } /* Art frame (every feature image and the hat row): a light Meadow window, also in dark mode */ .gj-art { --edge: #C4AD8A; /* fixed Meadow borderBrown */ width: 100%; max-width: 480px; margin: var(--gj-px); background: #FFF8E7; /* fixed Meadow cream, in both modes */ box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } .gj-art img { display: block; width: 100%; height: auto; } .gj-art--pixel img { image-rendering: pixelated; } /* pure pixel art only (section 8) */ .gj-art--wide { max-width: 600px; } /* hats_row.png */ .gj-art--center { margin: var(--gj-6) auto 0; } /* the hat row, centered under its section head */ /* Feature row */ .gj-feature { display: grid; gap: var(--gj-6); justify-items: center; text-align: center; } .gj-feature-text { max-width: 34rem; } .gj-feature-text h2 { margin-bottom: var(--gj-4); } .gj-feature .gj-list { text-align: left; margin-top: var(--gj-5); } .gj-feature .gj-chips { justify-content: center; margin-top: var(--gj-5); } @media (min-width: 1024px) { .gj-feature { grid-template-columns: 480px 1fr; gap: var(--gj-7); align-items: center; justify-items: start; text-align: left; } .gj-feature--flip { grid-template-columns: 1fr 480px; } .gj-feature--flip .gj-art { order: 2; } .gj-feature .gj-chips { justify-content: flex-start; } } /* Centered section head (Earn hats, FAQ) and the text under the hat list */ .gj-head { max-width: 40rem; margin-inline: auto; text-align: center; } .gj-head h2 { margin-bottom: var(--gj-4); } .gj-head + .gj-faq { margin-top: var(--gj-6); } .gj-after { max-width: 40rem; margin: var(--gj-5) auto 0; text-align: center; } /* Chips: labels, not buttons */ .gj-chips { display: flex; flex-wrap: wrap; gap: var(--gj-2); list-style: none; padding: 0; } .gj-chips--center { justify-content: center; margin-top: var(--gj-4); } .gj-chip { --edge: var(--gj-well); display: inline-block; padding: 4px 12px; margin: 2px; font: 800 .875rem/1.4 var(--gj-font-body); color: var(--gj-forest); background: var(--edge); box-shadow: 0 -2px 0 0 var(--edge), 0 2px 0 0 var(--edge), -2px 0 0 0 var(--edge), 2px 0 0 0 var(--edge); } /* Lists: pixel bullets and pixel checks */ .gj-list { list-style: none; padding: 0; display: grid; gap: var(--gj-3); } .gj-list li { position: relative; padding-left: 28px; } .gj-list li::before { /* a square pixel bullet */ content: ""; position: absolute; left: 4px; top: .6em; width: 10px; height: 10px; background: var(--gj-green); } .gj-checks li { padding-left: 32px; } .gj-checks li::before { /* an 8x8 pixel check, colored by the token */ left: 0; top: .3em; width: 20px; height: 20px; background: var(--gj-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v1H6zM5 2h2v1H5zM0 3h1v1H0zM4 3h2v1H4zM0 4h2v1H0zM3 4h2v1H3zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v1H6zM5 2h2v1H5zM0 3h1v1H0zM4 3h2v1H4zM0 4h2v1H0zM3 4h2v1H3zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E") center / contain no-repeat; } /* FAQ accordion (details/summary, no JavaScript) */ .gj-faq { display: grid; gap: var(--gj-4); max-width: 46rem; margin-inline: auto; } .gj-faq details { --edge: var(--gj-hairline); background: var(--gj-surface); margin: var(--gj-px); box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } .gj-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--gj-4); min-height: 48px; padding: var(--gj-4) var(--gj-5); font: 800 1.0625rem/1.35 var(--gj-font-body); color: var(--gj-text); } .gj-faq summary::-webkit-details-marker { display: none; } .gj-faq summary::marker { content: ""; } .gj-faq summary::after { /* a pixel plus... */ content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--gj-green), var(--gj-green)) center / 16px 4px no-repeat, linear-gradient(var(--gj-green), var(--gj-green)) center / 4px 16px no-repeat; } .gj-faq details[open] summary::after { /* ...that turns into a minus */ background: linear-gradient(var(--gj-green), var(--gj-green)) center / 16px 4px no-repeat; } .gj-faq details[open] summary { padding-bottom: var(--gj-2); } .gj-faq-a { padding: 0 var(--gj-5) var(--gj-5); overflow-wrap: break-word; } /* long email addresses wrap */ .gj-faq summary:focus-visible { outline: 3px solid var(--gj-focus); outline-offset: 4px; } /* Privacy summary box: a
holding the quote's
, then the checklist */ .gj-privacy-box { --edge: var(--gj-green); max-width: 40rem; margin: var(--gj-px); padding: var(--gj-5); background: var(--gj-well); text-align: left; box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } @media (min-width: 640px) { .gj-privacy-box { padding: var(--gj-6); } } .gj-privacy-box blockquote { font-weight: 700; font-size: 1.1875rem; line-height: 1.45; } .gj-privacy-box figcaption { margin-top: var(--gj-2); } .gj-privacy-box > .gj-checks { margin-top: var(--gj-5); } .gj-privacy-box + .gj-small { margin-top: var(--gj-5); } /* the small print under the box */ .gj-feature-text .gj-more { margin-top: var(--gj-3); font-weight: 700; } /* "Read the privacy policy" */ /* Numbered steps (join the test) */ .gj-steps { list-style: none; padding: 0; counter-reset: gj-step; display: grid; gap: var(--gj-4); max-width: 34rem; margin: var(--gj-5) auto; text-align: left; } .gj-steps li { counter-increment: gj-step; position: relative; padding-left: 56px; min-height: 40px; display: flex; align-items: center; } .gj-steps li::before { content: counter(gj-step); position: absolute; left: 4px; top: 0; width: 36px; height: 36px; display: grid; place-items: center; font: 800 1.125rem/1 var(--gj-font-body); color: var(--gj-on-primary); background: var(--gj-primary); box-shadow: 0 -2px 0 0 var(--gj-primary), 0 2px 0 0 var(--gj-primary), -2px 0 0 0 var(--gj-primary), 2px 0 0 0 var(--gj-primary); } /* Get-the-app card. The sunflower sprite sits in a fixed light-sage well so its dark outline still reads on the Meadow Night card. */ .gj-cta { max-width: 40rem; margin: var(--gj-px) auto; text-align: center; } .gj-cta-sprite { --edge: #EAF1DD; /* fixed Meadow spriteWell, in both modes */ box-sizing: content-box; /* the site sets border-box on everything */ width: 96px; height: 108px; /* 32×36 at ×3 */ padding: var(--gj-2); margin: 0 auto var(--gj-5); background: var(--edge); image-rendering: pixelated; box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } .gj-cta h2 { margin-bottom: var(--gj-4); } .gj-cta .gj-btn-row { margin-top: var(--gj-5); } .gj-cta .gj-small { margin-top: var(--gj-4); } /* Hat list (earn hats) */ .gj-hat-list { display: grid; gap: var(--gj-3); max-width: 46rem; margin: var(--gj-6) auto 0; text-align: left; } .gj-hat-list > div { --edge: var(--gj-hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--gj-4); padding: var(--gj-3) var(--gj-4); margin: var(--gj-px); background: var(--gj-surface); box-shadow: 0 calc(-1 * var(--gj-px)) 0 0 var(--edge), 0 var(--gj-px) 0 0 var(--edge), calc(-1 * var(--gj-px)) 0 0 0 var(--edge), var(--gj-px) 0 0 0 var(--edge); } .gj-hat-list dt { font-weight: 800; } .gj-hat-list dd { color: var(--gj-muted); } @media (min-width: 640px) { .gj-hat-list { grid-template-columns: 1fr 1fr; } } /* Sprite: a plant wearing a hat, built from the raw sprites (not used on these three pages, kept for 404 pages, blog posts and the like) */ .gj-sprite { --s: 6; /* screen px per PLANT pixel: keep it even (2, 4, 6, 8…) */ --dx: 0; --dy: 0; /* Fit to head, in plant pixels (guide table) */ --p: calc(var(--s) * 1px); position: relative; display: inline-block; vertical-align: bottom; width: calc(16 * var(--p)); height: calc(18 * var(--p)); } .gj-sprite img { position: absolute; left: 0; top: calc(2 * var(--p)); width: calc(16 * var(--p)); height: calc(16 * var(--p)); max-width: none; image-rendering: pixelated; } .gj-sprite .gj-sprite-hat { transform: translate(calc(var(--dx) * var(--p)), calc(var(--dy) * var(--p))); } /* Footer and the grass strip */ .gj-footer { padding: var(--gj-8) var(--gj-gutter) calc(48px + var(--gj-7)); text-align: center; background: url("/garden-journal/images/grass_tile.png") left bottom / 144px 48px repeat-x; image-rendering: pixelated; border-top: 0; /* the site gives every