/* Shared components. They read only semantic tokens (tokens.css), so they * are restyled by changing tokens, not by overriding these rules. */ /* ---- Site header -------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-s) var(--gutter); color: var(--header-ink, var(--color-ink)); pointer-events: none; transition: color var(--dur-slow) var(--ease-out), background-color var(--dur-m) var(--ease-out), padding var(--dur-m) var(--ease-out); } .site-header > * { pointer-events: auto; } /* Once the page moves, the header gets a ground of its own so it never sits * on top of the scene's text. No backdrop blur: it would re-filter every * animated frame behind it, which phones pay for. */ [data-scrolled] .site-header { padding-block: var(--space-xs); background: var(--header-bg, var(--color-bg)); box-shadow: 0 1px 0 var(--header-rule, var(--color-rule)); } .wordmark { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-variation-settings: var(--display-variation); font-size: var(--step-1); font-weight: var(--display-weight); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .wordmark__mark { width: 1.6em; height: 1.6em; --art-stroke: 2.4; } /* The fairy is the one thing in colour, painted the same wherever she * appears: the wordmark, the footer and the landing page's two fairies. */ .wordmark__mark, .site-footer__mark, .sb-flyer, .sb-fairy { --art-fill: var(--fairy-dress); --art-fill-a: var(--fairy-cap); --art-fill-2: var(--fairy-face); --art-light: var(--fairy-wings); --art-accent: var(--fairy-star); } .site-nav { display: flex; margin-inline-start: auto; gap: clamp(var(--space-s), 3vw, var(--space-l)); font-size: var(--step--1); letter-spacing: 0.02em; white-space: nowrap; } .site-nav a { text-decoration: none; padding-block: var(--space-3xs); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-m) var(--ease-out); } .site-nav a:hover { background-size: 100% 1px; } /* ---- Day or night --------------------------------------------------------- * * A little sky: by night a moon at the right of a dark track with stars * behind it, by day a sun at the left of a blue one with a cloud. theme.js * runs it and sets ; without script it is hidden, and the * site is the night. */ .theme-toggle { --track: #0f1d33; --edge: rgb(228 217 193 / 0.38); --knob-x: calc(var(--toggle-w) - var(--knob) - 2 * var(--knob-gap) - 2px); --toggle-w: 3.1rem; --knob: 1.25rem; --knob-gap: 0.18rem; position: relative; flex: none; width: var(--toggle-w); height: calc(var(--knob) + 2 * var(--knob-gap) + 2px); padding: 0; border: 1px solid var(--edge); border-radius: var(--radius-pill); background: radial-gradient(circle at 22% 34%, #fff 0 0.7px, transparent 1.3px), radial-gradient(circle at 38% 66%, rgb(255 255 255 / 0.8) 0 0.6px, transparent 1.1px), radial-gradient(circle at 12% 70%, rgb(255 255 255 / 0.7) 0 0.5px, transparent 1px), var(--track); cursor: pointer; transition: background-color var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out); } .theme-toggle__knob { position: absolute; top: var(--knob-gap); left: var(--knob-gap); width: var(--knob); height: var(--knob); border-radius: 50%; translate: var(--knob-x) 0; /* The moon, with a few seas. */ background: radial-gradient(circle at 36% 60%, #d6c9a4 0 13%, transparent 15%), radial-gradient(circle at 62% 34%, #d6c9a4 0 10%, transparent 12%), radial-gradient(circle at 64% 70%, #dccfac 0 7%, transparent 9%), #f4ecd3; box-shadow: 0 0 9px rgb(246 232 192 / 0.45); transition: translate 560ms cubic-bezier(0.5, 1.5, 0.45, 1), scale var(--dur-fast) ease, box-shadow var(--dur-m) var(--ease-out); } .theme-toggle:hover .theme-toggle__knob { scale: 1.08; } :root[data-theme="day"] .theme-toggle { --track: #bfe0f4; --edge: rgb(31 43 36 / 0.26); --knob-x: 0px; background: radial-gradient(ellipse 15% 24% at 64% 60%, #fff 62%, transparent 70%), radial-gradient(ellipse 17% 30% at 75% 52%, #fff 62%, transparent 70%), radial-gradient(ellipse 13% 22% at 85% 62%, #fff 62%, transparent 70%), var(--track); } /* The sun. */ :root[data-theme="day"] .theme-toggle__knob { background: radial-gradient(circle at 40% 38%, #fff8d6, #ffd35a 68%, #f2b53a); box-shadow: 0 0 0 3px rgb(255 211 90 / 0.3), 0 0 10px rgb(255 196 70 / 0.55); } :root:not([data-theme]) .theme-toggle { display: none; } /* Switching, the new theme opens in a circle from the switch (theme.js * animates the new snapshot's clip); the old one simply stays under it. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* While the theme changes nothing eases into its new colours on its own * time, or the circle would uncover a page still changing behind it. The * switch's knob, which slides across, is the one thing that moves. */ [data-theme-swap] *:not(.theme-toggle__knob), [data-theme-swap] *::before, [data-theme-swap] *::after { transition: none !important; } @media (max-width: 34rem) { .site-header { gap: var(--space-xs); } .site-nav { gap: var(--space-xs); font-size: var(--step--2); } .theme-toggle { --toggle-w: 2.6rem; --knob: 1.05rem; --knob-gap: 0.15rem; } .site-nav .nav-optional { display: none; } .wordmark { font-size: var(--step-0); } } /* Small phones: the links go by their short names ("New", "Cottage"; each * keeps its full name for assistive tech), and on the smallest only the * cottage is left, so the wordmark and the switch still fit. */ @media (max-width: 25rem) { .site-nav .nav-more { display: none; } .site-nav .nav-cap { text-transform: capitalize; } } @media (max-width: 21.5rem) { .site-nav a:not(.nav-cottage) { display: none; } } /* ---- Eyebrow + section title -------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-soft); } .section-title { font-size: var(--step-4); max-width: 18ch; } .lede { font-size: var(--step-1); line-height: var(--leading-snug); color: var(--color-ink-soft); max-width: var(--measure); } /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0.8em 1.4em; border: 1px solid currentColor; border-radius: var(--radius-pill); background: transparent; font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, translate var(--dur-fast) ease; } .btn:hover { translate: 0 -1px; } .btn--solid { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } .btn--solid:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-bg)); } .btn svg { width: 1.1em; height: 1.1em; } /* ---- Tag and price -------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.7em; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--color-ink-soft); white-space: nowrap; } .tag--new { border-color: var(--color-accent); color: var(--color-accent); } .price { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-size: var(--step-1); font-weight: 500; font-variant-numeric: lining-nums; } /* ---- Plant card ----------------------------------------------------------- */ .plant-card { position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--space-s); padding: var(--space-m) var(--space-m) var(--space-l); background: var(--card-bg, var(--color-surface)); border: 1px solid var(--card-border, var(--color-rule)); border-radius: var(--radius-l); color: var(--card-ink, var(--color-ink)); transition: translate var(--dur-m) var(--ease-out), box-shadow var(--dur-m) var(--ease-out); } .plant-card:hover { translate: 0 -4px; box-shadow: var(--card-shadow, 0 18px 40px -24px var(--color-shadow)); } .plant-card__art { aspect-ratio: 4 / 5; padding: var(--card-art-pad, var(--space-xs) var(--space-m) 0); color: var(--card-art, var(--color-line)); } /* Both dimensions definite: the drawing's own viewBox keeps its aspect and * centres it, so it fills the box however the card is sized. */ .plant-card__art .art { display: block; width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-out); transform-origin: 50% 100%; } .plant-card:hover .plant-card__art .art { transform: rotate(-1.5deg) scale(1.03); } .plant-card__body { display: grid; gap: var(--space-3xs); align-content: start; } .plant-card__kind { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-soft); } .plant-card__name { font-size: var(--step-2); } .plant-card__botanical { font-family: var(--font-display); font-style: italic; font-size: var(--step--1); color: var(--color-ink-soft); } .plant-card__note { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-ink-soft); } .plant-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); margin-top: var(--space-s); padding-top: var(--space-s); border-top: 1px dashed var(--color-rule); } .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-m); } /* ---- Scroll hint ---------------------------------------------------------- */ .scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2xs); font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-soft); } .scroll-hint__line { width: 1px; height: 3rem; background: linear-gradient(currentColor, transparent); transform-origin: top; animation: hint-fall 2.4s var(--ease-in-out) infinite; } @keyframes hint-fall { 0% { scale: 1 0; opacity: 1; } 60% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } } /* ---- Footer --------------------------------------------------------------- */ .site-footer { padding: var(--space-xl) var(--gutter) var(--space-2xl); text-align: center; font-size: var(--step--1); color: var(--footer-ink, var(--color-ink-soft)); background: var(--footer-bg, transparent); } .site-footer__mark { width: 3rem; margin: 0 auto var(--space-s); color: var(--footer-ink, var(--color-ink-soft)); } .site-footer p + p { margin-top: var(--space-3xs); }