/* * The look of all three pages: spruce, kraft paper and a cranberry tick. * * The one loud thing is the gift tag — kraft paper, a punched hole, the * name written on it by hand. Everything around it is quiet: dark green, * plain type, no decoration that is not a tag. * * Linked from each page's ; the page's own stylesheet (inlined by * the build) only lays that page out. */ :root { --spruce-deep: #15201c; --spruce: #1c2b25; --fir: #25382f; --fir-line: #36503f; --kraft: #d8c29a; --kraft-edge: #bfa67a; --ink: #2b2219; --ink-soft: #5d4f3c; --parchment: #e8e0cf; --sage: #9db0a2; --cranberry: #b5423c; --cranberry-deep: #983630; --berry-light: #e39a90; --gold: #c9a24b; --hand: 'Shantell Sans', 'Comic Sans MS', 'Segoe Print', cursive; --text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 10px; --tap: 48px; /* the shared dialog component, in this site's colours */ --popup-bg: var(--fir); --popup-color: var(--parchment); --popup-header-bg: var(--fir); --popup-border: var(--fir-line); --popup-close-color: var(--sage); --popup-close-hover-color: var(--parchment); --popup-backdrop: rgba(8, 14, 12, 0.72); --popup-radius: 14px; --popup-font-size: 1.0625rem; --popup-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); --popup-max-width: min(560px, 100vw); --popup-min-width: min(360px, 100vw); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--spruce); color: var(--parchment); font-family: var(--text); font-size: 1.0625rem; line-height: 1.5; } h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; } p { margin: 0; } a { color: var(--berry-light); text-underline-offset: 0.18em; } [hidden] { display: none !important; } .hand { font-family: var(--hand); font-weight: 600; letter-spacing: 0.01em; } .muted { color: var(--sage); } .small { font-size: 0.9rem; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--tap); padding: 0 1.15em; border: 1px solid var(--fir-line); border-radius: var(--radius); background: var(--fir); color: var(--parchment); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; touch-action: manipulation; } .btn:hover { background: var(--fir-line); } .btn:disabled { opacity: 0.55; cursor: default; } .btn.primary { background: var(--cranberry); border-color: var(--cranberry); color: #f6ece0; } .btn.primary:hover { background: var(--cranberry-deep); border-color: var(--cranberry-deep); } .btn.quiet { background: transparent; border-color: transparent; color: var(--sage); font-weight: 400; } .btn.quiet:hover { color: var(--parchment); background: transparent; text-decoration: underline; } .btn.danger { color: var(--berry-light); } .btn.wide { width: 100%; } /* ----------------------------------------------------------------- fields */ .field { display: grid; gap: 0.3rem; } .field > span { font-size: 0.9rem; color: var(--sage); } .field input, .field textarea, .field select { width: 100%; min-height: var(--tap); padding: 0.6em 0.75em; border: 1px solid var(--fir-line); border-radius: var(--radius); background: var(--spruce-deep); color: var(--parchment); font: inherit; } .field textarea { min-height: 5.5em; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #6f8377; } .form { display: grid; gap: 0.9rem; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 400px) { .form .row { grid-template-columns: 1fr; } } .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; } .actions.spread { justify-content: space-between; } .notice { padding: 0.7em 0.9em; border-radius: var(--radius); background: var(--spruce-deep); border: 1px solid var(--fir-line); } .notice.bad { border-color: var(--cranberry); color: var(--berry-light); } .notice.good { border-color: #5d8a6b; color: #b9d8c0; } /* ------------------------------------------------------------ the gift tag * Kraft paper with the two corners at the string end cut off and a hole * punched between them. The hole is drawn, not cut, so it shows the page's * green through a gold eyelet. */ .tag { position: relative; display: block; padding: 0.85rem 1rem 0.85rem 2.6rem; background: radial-gradient(circle at 1.25rem 50%, var(--spruce) 0 0.34rem, var(--gold) 0.36rem 0.5rem, transparent 0.52rem), linear-gradient(175deg, #dfcaa4, var(--kraft) 55%, #cfb88e); color: var(--ink); clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 calc(100% - 1.1rem), 0 1.1rem); border-radius: 0 6px 6px 0; text-align: left; text-decoration: none; } .tag .hand { display: block; font-size: 1.45rem; line-height: 1.15; overflow-wrap: anywhere; } .tag .muted { color: var(--ink-soft); } /* ------------------------------------------------------------------ toast */ .toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw, 30rem); padding: 0.7em 1.1em; border-radius: 999px; background: var(--parchment); color: var(--ink); font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); z-index: 50; pointer-events: none; } /* The dialog becomes a sheet rising from the bottom edge on a phone: the * thumb is down there, and so is the keyboard. No `width` here — the * component's resize grip writes that inline, and a rule would freeze it. */ @media (max-width: 640px) { popup-template::part(dialog) { margin: auto 0 0; min-width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); } } popup-template::part(header) { padding: 0.9rem 1rem 0.5rem; border-bottom: none; } popup-template::part(body) { padding: 0.4rem 1rem 1.1rem; } popup-template [slot="title"] { font-family: var(--hand); font-weight: 600; font-size: 1.3rem; } @media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in 160ms ease-out; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } } }