/* justamanda.net design system, ported from the static site's style.css. Values live in theme.json. These names are aliases so the rules below read exactly as they did, and a token changed in theme.json reaches all of them. */ :root{ --forest:var(--wp--preset--color--forest); --terracotta:var(--wp--preset--color--terracotta); --ivory:var(--wp--preset--color--ivory); --sage:var(--wp--preset--color--sage); --amethyst:var(--wp--preset--color--amethyst); --lavender:var(--wp--preset--color--lavender); --bg:var(--wp--preset--color--ivory); --bg-wash:var(--wp--preset--color--bg-wash); --card:var(--wp--preset--color--card); --ink:var(--wp--preset--color--forest); --ink-soft:var(--wp--preset--color--ink-soft); --ink-faint:var(--wp--preset--color--ink-faint); --terracotta-dim:var(--wp--preset--color--terracotta-dim); --sage-deep:var(--wp--preset--color--sage-deep); --gold:var(--wp--preset--color--gold); --line:var(--wp--custom--line); --shadow:var(--wp--preset--shadow--card); --radius:var(--wp--custom--radius--card); } *{box-sizing:border-box;} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink); font-family:'Inter',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;} .wp-site-blocks img{max-width:100%;display:block;} a{color:var(--terracotta);text-decoration:none;} a:hover{text-decoration:underline;text-underline-offset:3px;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} /* ---------- masthead ---------- */ .masthead{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;} .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px;} /* The logotype is artwork, not text. Height-constrained so the masthead sets the scale and the 3:1 image follows; the footer reuses it smaller. */ .logo{display:inline-block;line-height:0;flex-shrink:0;} /* flex-shrink:0 is load-bearing. As a flex item beside a seven-item nav the anchor was being narrowed, and the global img{max-width:100%} then squashed the logotype's width while its fixed height held, distorted on phones. */ .logo:hover{text-decoration:none;opacity:.82;} .logo img{height:66px;width:auto;} /* The footer takes the circular badge rather than the wide logotype, on a cream disc, because it is Deep Forest artwork and would sink into the sage ground. The disc is padding, not a fixed size, so it follows the badge instead of leaving a bare ring if the logo is ever rescaled. And the badge is nudged down 1.6%: its ink is NOT centred in its own PNG. The dark ring runs y 13..470 on a 500px square, so it sits 8px above the file's centre, and centring the box leaves the ring visibly high inside a circle. */ footer .logo{background:var(--ivory);border-radius:50%;display:grid;place-items:center;padding:8px;} footer .logo img{height:46px;width:46px;transform:translateY(1.6%);} /* The artwork occupies roughly a quarter of the logotype's width, so the wordmark reads smaller than its height suggests, so it needs more than a text logo would. */ @media (max-width:900px){ .logo img{height:52px;} } .wp-block-navigation__container{display:flex;gap:26px;flex-wrap:wrap;} .wp-block-navigation a{color:var(--ink-soft);font-size:15px;padding-bottom:4px;border-bottom:2px solid transparent;} .wp-block-navigation a:hover{color:var(--ink);text-decoration:none;} .wp-block-navigation a[aria-current="page"]{color:var(--terracotta);border-bottom-color:var(--terracotta);} /* ---------- hero ---------- */ .hero{background:linear-gradient(180deg,var(--bg-wash),var(--bg));border-bottom:1px solid var(--line);} .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center; padding-top:48px;padding-bottom:40px;} .hero h1{font-family:'Playfair Display',Georgia,serif;font-size:60px;line-height:1.05; font-weight:500;margin:0 0 20px;letter-spacing:-.5px;} /* The only lavender above the fold, and it is load-bearing. Without it the page ran terracotta and forest all the way down to the journal strip and then went lavender at once, which read as two designs stacked rather than one. A background-image band rather than a positioned pseudo-element: .hero paints a background but opens no stacking context, so a z-index:-1 layer would sit behind the section itself and never be seen. width:fit-content keeps the band on the words instead of running the full column. */ .hero h1 em{font-style:italic;color:var(--terracotta);display:inline; background-image:linear-gradient(to top,rgba(216,207,229,.9) 0 .34em,transparent .34em); -webkit-box-decoration-break:clone;box-decoration-break:clone;} /* The em has to stay INLINE for the band to work, because only an inline box fragments per line, and box-decoration-break:clone is what redraws the background on each fragment so it hugs the words. As a block it drew one band the width of the longest line, which under a two-line headline (the Tech page) left a lavender bar running off into empty space. The forced newline here is what keeps the italic line on its own row now that display:block is gone. */ .hero h1 em::before{content:"\A";white-space:pre;} .hero p{font-size:18.5px;color:var(--ink-soft);max-width:34em;margin:0 0 30px;} .hero-art{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); aspect-ratio:4/3;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow);color:var(--ink-faint);font-size:14px;text-align:center;padding:24px;} /* Per the brand board: solid Deep Forest, or an outlined Terracotta. Both uppercase and tracked out, with a trailing arrow. */ .btn{display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border-radius:9px; font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase; border:1.5px solid transparent;} .btn-primary{background:var(--forest);color:var(--ivory);} .btn-primary:hover{background:var(--wp--custom--tone--primary-hover);text-decoration:none;} .btn-ghost{background:transparent;color:var(--terracotta);border-color:var(--terracotta);} .btn-ghost:hover{background:rgba(200,100,74,.07);text-decoration:none;} .btn-row{display:flex;gap:14px;flex-wrap:wrap;} /* ---------- sections ---------- */ section{padding:34px 0;} /* flex-end, not center: several headings wrap to two lines, and a centred sprig then floats in the gap between them instead of sitting with the words. */ .sec-head{display:flex;align-items:flex-end;gap:10px;margin:0 0 22px;} .sec-head h2{font-family:'Playfair Display',Georgia,serif;font-size:31px;font-weight:500;margin:0;} .sec-head::after{content:"";width:26px;height:26px;background:url(../images/accent-lavender.png) center/contain no-repeat;flex-shrink:0;} /* Ornamental rule. The artwork carries a lot of transparent margin, so it is held to a modest width and centred rather than stretched across the page. */ .divider-wrap{display:flex;justify-content:center;padding:0 24px;} .divider-wrap img{width:100%;max-width:330px;height:auto;opacity:.9;} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px;} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow);display:flex;gap:16px;align-items:flex-start;} .card:hover{border-color:rgba(180,85,63,.35);} /* Illustration beside the text, as in the mockups. Fixed box so a set of cards keeps one baseline even though the artwork is loosely cropped. */ .card img{width:78px;height:78px;object-fit:contain;flex-shrink:0;} .card-body{display:flex;flex-direction:column;gap:6px;min-width:0;} /* Section-card headings sit in Deep Forest, not terracotta. Four large serif headings in a row, under a hero that already carries a terracotta line, put far too much of one warm colour on the page and left lavender and amethyst looking like a different design. Terracotta now means action: the arrows, the buttons, the links. Colour on a HEADING means "something to read", which is amethyst and the journal alone. */ .card h3{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:500;margin:0;color:var(--ink);line-height:1.2;} .card p{margin:0;font-size:14px;color:var(--ink-soft);} .go,.card .go{font-size:13.5px;color:var(--terracotta);font-weight:600;} /* The journal strip stacks instead, because those cards carry no artwork. auto-FILL, not auto-fit: with a single published post, auto-fit collapses the empty tracks and stretches that one card the full width of the page. The 300px floor gives three columns at desktop width. */ .cards.stacked{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));} .cards.stacked .card{flex-direction:column;gap:8px;} /* AMETHYST AND LAVENDER, given a job rather than sprinkled. Terracotta means "a place to go" (the section cards, the primary actions). Amethyst means "something to read": the journal, and nothing else. Keeping the two apart is what stops a six-colour palette turning into confetti. */ .cards.stacked .card h3{color:var(--amethyst);} .cards.stacked .card .go{color:var(--amethyst);} .cards.stacked .card .tagline{color:var(--amethyst);opacity:.85; font-size:11.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;} .cards.stacked .card:hover{border-color:rgba(141,121,166,.45);} .cards.stacked .card::before{content:"";display:block;width:34px;height:2px; background:var(--lavender);border-radius:2px;margin-bottom:2px;} /* ---------- the explore row: five doors, not four ---------- The horizontal card could not hold its shape at a fifth of 1132px: 78px of illustration plus 40px of padding left under 80px for words. So this row stacks its artwork above the text instead of setting it beside. The narrower column is the point rather than a cost: these are doors, not summaries, and the copy is one line each. Explicit column counts rather than auto-fit. auto-fit lands on four at tablet width and leaves a single orphan card on its own row; stepping 5 -> 3 -> 2 keeps the last row at worst half full. */ /* Six hobby cards since Photography (2026-11-08): 6 across, then 3 + 3, then 2 + 2 + 2, so no row is ever short. */ .cards.explore{grid-template-columns:repeat(6,1fr);gap:18px;} .cards.explore .card{flex-direction:column;align-items:center;text-align:center; gap:10px;padding:22px 16px;} .cards.explore .card img{width:84px;height:84px;} .cards.explore .card-body{align-items:center;gap:6px;} .cards.explore .card p{font-size:13.5px;} @media (max-width:1080px){ .cards.explore{grid-template-columns:repeat(3,1fr);} } @media (max-width:640px){ .cards.explore{grid-template-columns:repeat(2,1fr);} } @media (max-width:400px){ .cards.explore{grid-template-columns:1fr;} } /* The explore row's headings are all one colour, deliberately. Books briefly wore amethyst here on the "something to read" argument; in a row of five it read as one card being broken rather than one card being special. Amethyst now starts at the journal strip, where the whole band supports it. */ /* Section headings get a lavender hairline, which ties the ornament to the rule. */ .sec-head{border-bottom:1.5px solid rgba(216,207,229,.95);padding-bottom:10px;} /* The second voice a section can have, under the rule rather than beside the heading. The books page had this and nothing else did. Handwriting, so it reads as an aside rather than a subheading. */ .sec-sub{font-family:'Caveat',cursive;font-weight:500;font-size:22px; color:var(--terracotta);margin:-16px 0 22px;} /* Hero art is the real illustration now, not a placeholder box. */ .hero-art{background:none;border:none;box-shadow:none;aspect-ratio:auto;padding:0;display:block;} .hero-art img{width:100%;height:auto;} .two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;} .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:30px 32px;box-shadow:var(--shadow);} /* The collection as it actually is, full width. The Fred Ives above is the beginning and this is the same story's other end, so it gets the whole measure rather than a column. */ .wall-photo{margin:0;} .attempt-photo{margin:18px 0 20px;} .wall-photo img,.attempt-photo img{width:100%;height:auto;border-radius:var(--radius); border:1px solid var(--line);box-shadow:var(--shadow);} .wall-photo figcaption,.attempt-photo figcaption{font-size:13px;color:var(--ink-faint); margin-top:10px;line-height:1.5;} .attempt-photo figcaption{font-size:12.5px;} /* The plant the page opens on. It sits under the collection numbers rather than in the story panel, because the right column runs out of content long before the story on the left does, and this puts the photograph level with the paragraph that describes it. */ .origin-photo{margin:18px 0 0;} .origin-photo img{width:100%;height:auto;border-radius:var(--radius); border:1px solid var(--line);box-shadow:var(--shadow);} .origin-photo figcaption{font-size:12.5px;color:var(--ink-faint); line-height:1.5;margin-top:9px;} /* Collection numbers on the Plants page. */ .stat-row{display:flex;gap:28px;margin:0 0 16px;flex-wrap:wrap;} .stat b{font-family:'Playfair Display',Georgia,serif;font-size:30px;font-weight:600; display:block;line-height:1;color:var(--terracotta);} .stat span{font-size:12.5px;color:var(--ink-faint);letter-spacing:.4px;text-transform:uppercase;} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;} .tag{font-size:13px;padding:6px 14px;border-radius:20px;background:var(--bg-wash); color:var(--ink-soft);border:1px solid var(--line);} .tag.is-sage{background:rgba(167,184,151,.24);color:var(--wp--custom--tone--tag-sage);border-color:rgba(167,184,151,.55);} .tag.is-terra{background:rgba(200,100,74,.12);color:var(--terracotta-dim);border-color:rgba(200,100,74,.30);} .tag.is-amethyst{background:rgba(141,121,166,.16);color:var(--wp--custom--tone--tag-amethyst);border-color:rgba(141,121,166,.35);} /* ---------- section grounds ---------- The reason the page read washed out was never a shortage of colour: it was white cards on an ivory ground, two shades of the same non-colour, so nothing had an edge. Giving alternating sections a ground of their own is what gives the cards something to sit ON, and it is the cheapest change here by far. */ .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .band.is-wash{background:var(--bg-wash);} /* Lavender under the journal specifically. That is the one place the site already means purple, so the ground carries the reading colour beneath the reading content rather than decorating an unrelated band. */ .band.is-reading{background:linear-gradient(180deg,rgba(216,207,229,.55),rgba(216,207,229,.22));} /* ---------- one colour per obsession ---------- A wash falling from the top of each explore card, fading out by 60% so the text still sits on plain paper. Sage, lavender, amethyst and gold barely appeared anywhere in this stylesheet before this; now each has a card. Classes rather than :nth-child, because reordering the row would otherwise silently reassign every colour, and the order of Amanda's obsessions is not something the stylesheet should have an opinion about. The top bar takes the card's own colour instead of terracotta for all five, which is the only place the "terracotta means a place to go" rule is relaxed: here the bar is identification, not an invitation. */ .cards.explore .card.is-succulents{background-image:linear-gradient(180deg,rgba(167,184,151,.42),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--sage);} .cards.explore .card.is-chickens{background-image:linear-gradient(180deg,rgba(200,100,74,.30),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--terracotta);} .cards.explore .card.is-crochet{background-image:linear-gradient(180deg,rgba(216,207,229,.70),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--wp--custom--tone--crochet-bar);} .cards.explore .card.is-books{background-image:linear-gradient(180deg,rgba(141,121,166,.30),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--amethyst);} .cards.explore .card.is-tech{background-image:linear-gradient(180deg,rgba(192,161,90,.34),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--gold);} .cards.explore .card.is-photography{background-image:linear-gradient(180deg,rgba(46,61,47,.16),rgba(255,255,255,0) 60%); box-shadow:var(--shadow), inset 0 2.5px 0 var(--forest);} .cards.explore .card[class*="is-"]{background-repeat:no-repeat;background-color:var(--card);} /* ---------- a wash of artwork ---------- The illustrations are the richest thing the brand owns and every instance of them on the site is postage-stamp sized. This runs one large and faint behind a section, as a ground rather than a picture. Decoration only: aria-hidden in the markup, positioned so it never sits under body copy, and dropped entirely on a phone where there is no margin for it to live in. .washed > .wrap needs the stacking context or the art covers it. */ .washed{position:relative;overflow:hidden;} .washed > .wrap{position:relative;} .washed::before{content:"";aspect-ratio:1;background:url(../images/ornament-amethyst.png) center/contain no-repeat;position:absolute;right:-60px;top:50%;transform:translateY(-50%); width:430px;opacity:.22;pointer-events:none;} @media (max-width:900px){ .washed::before{display:none;} } /* ---------- footer ---------- Horizontal, and on deepened sage. It used to be five centred rows (badge, tagline, nav, icons, legal) and ran 411px tall to carry what is, in content terms, one line of links and three icons. Every element is still here; it simply stops giving each one a row of its own. 137px. Everything that has to read on --sage-deep is cream or lavender. Gold and terracotta both fail against it (2.95:1 and 1.87:1), which is why no accent colour appears down here at all. */ footer{background:var(--sage-deep);border-top:none;padding:18px 0 14px;margin-top:0;} footer .wrap{display:block;text-align:left;} /* Scoped to `footer` on purpose. A bare `.foot-main` is specificity 0,0,1,0 and loses to `footer .wrap{display:block}` above it at 0,0,1,1. The row stayed stacked and looked like the flexbox simply had not been written. */ footer .foot-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap;} footer .brand-block{display:flex;flex-direction:row;align-items:center;gap:11px;} /* Scoped to the footer, since .tagline is also the journal cards' eyebrow label. */ footer .tagline{font-size:13px;color:rgba(247,243,235,.64);margin:0;line-height:1.45;} /* margin-left:auto is what pushes the links away from the brand and holds the icons at the far right without a spacer element. */ .foot-nav{display:flex;gap:6px 15px;flex-wrap:wrap;font-size:13.5px;margin:0 0 0 auto;} footer .foot-nav a{color:rgba(247,243,235,.86);} footer .foot-nav a:hover{color:#FFFFFF;} /* Five brand marks. Framed in a ring rather than set bare: at this size an unframed glyph reads as debris beside the text links, and the circle gives the row the same optical weight the nav beside it has. currentColor on the paths is what lets one hover rule move icon, ring and wash together. */ .social{display:flex;justify-content:center;gap:14px;} /* padding:0 is load-bearing. This row is a