/* ============================================================================= COLOR TOKENS — replace globally by editing these variables only Accent: #153C2D (forest) | Paper: #FFFFFF | Warm wash: #FDE5BE ============================================================================= */ :root { --color-accent: #153C2D; --color-accent-soft: rgba(21, 60, 45, 0.08); --color-paper: #ffffff; --color-wash: #fde5be; --color-wash-deep: #f4d49a; --color-text: #153c2d; --color-text-muted: rgba(21, 60, 45, 0.72); --color-border: rgba(21, 60, 45, 0.12); --font-display: "Fraunces", "Georgia", serif; --font-body: "Source Sans 3", system-ui, sans-serif; --radius-lg: 1.25rem; --radius-md: 0.75rem; --shadow-soft: 0 12px 40px rgba(21, 60, 45, 0.08); --shadow-card: 0 4px 24px rgba(21, 60, 45, 0.06); --max-read: 42rem; --nav-h: 4rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; color: var(--color-text); background: var(--color-wash); } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } /* ----- Layout utilities ----- */ .wrap { width: min(1120px, 92vw); margin-inline: auto; } .stack { display: flex; flex-direction: column; gap: 1rem; } /* ----- Rice grain pattern (SVG inline in HTML uses --grain-color) ----- */ .grain-field { position: relative; background-color: var(--color-wash); /* Do not use overflow:hidden here when .grain-field is on — it breaks vertical scroll on mobile Safari */ overflow-x: clip; } .grain-field::before { content: ""; position: absolute; inset: 0; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23153C2D' stroke-width='0.6' opacity='0.25'%3E%3Cellipse cx='22' cy='28' rx='5' ry='9' transform='rotate(-18 22 28)'/%3E%3Cellipse cx='52' cy='18' rx='5' ry='9' transform='rotate(12 52 18)'/%3E%3Cellipse cx='58' cy='56' rx='5' ry='9' transform='rotate(-8 58 56)'/%3E%3Cellipse cx='14' cy='62' rx='5' ry='9' transform='rotate(22 14 62)'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } .grain-field > * { position: relative; z-index: 1; } /* ----- Navigation ----- */ .site-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: min(5vw, 2rem); background: color-mix(in srgb, var(--color-wash) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--color-accent); text-decoration: none; } .brand:hover { text-decoration: none; } .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 0.92rem; font-weight: 600; text-decoration: none; color: var(--color-text); } .nav-links a:hover { color: var(--color-accent); } .nav-cta { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; background: var(--color-accent); color: var(--color-paper) !important; border-radius: 999px; text-decoration: none !important; font-size: 0.88rem; } .nav-cta:hover { filter: brightness(1.08); } /* ----- Hero (home only) ----- */ .hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem); position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 880px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; } } .hero-watermark { position: absolute; right: -5%; top: 10%; font-family: var(--font-display); font-size: clamp(4rem, 14vw, 12rem); font-weight: 700; color: var(--color-accent); opacity: 0.06; line-height: 0.85; pointer-events: none; user-select: none; z-index: 0; } .hero-copy { position: relative; z-index: 1; } .hero-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.75rem; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.35rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 0.75rem; color: var(--color-accent); } .hero-sub { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--color-text-muted); margin: 0 0 1.5rem; max-width: 36ch; } .hero-keywords { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .kw { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.35rem; background: var(--color-accent); color: var(--color-paper); font-weight: 700; border: none; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: 1rem; text-decoration: none; } .btn-primary:hover { filter: brightness(1.06); } .btn-ghost { display: inline-flex; align-items: center; padding: 0.75rem 1.1rem; background: transparent; color: var(--color-accent); font-weight: 700; border: 2px solid var(--color-accent); border-radius: var(--radius-md); font-family: inherit; font-size: 0.95rem; text-decoration: none; } .btn-ghost:hover { background: var(--color-accent-soft); } /* Decorative pot + steam */ .hero-art { display: flex; justify-content: center; align-items: flex-end; min-height: 220px; } .steam-pot { width: min(320px, 100%); } .steam-pot svg { width: 100%; height: auto; } @keyframes drift { 0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.4; } 50% { transform: translateY(-12px) scaleY(1.08); opacity: 0.75; } } .steam-line { animation: drift 3.2s ease-in-out infinite; } .steam-line:nth-child(2) { animation-delay: 0.6s; } .steam-line:nth-child(3) { animation-delay: 1.2s; } /* ----- Screenshots ----- */ .shots { padding: clamp(2rem, 5vw, 4rem) 0; background: linear-gradient(180deg, var(--color-wash-deep) 0%, var(--color-wash) 45%); } .shots-header { text-align: center; max-width: 560px; margin: 0 auto 2rem; } .shots-header h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.5rem; color: var(--color-accent); } .shots-header p { margin: 0; color: var(--color-text-muted); font-size: 1rem; } .shot-strip { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .shot-strip::-webkit-scrollbar { height: 6px; } .shot-strip::-webkit-scrollbar-thumb { background: var(--color-accent-soft); border-radius: 99px; } .shot-card { flex: 0 0 auto; width: min(240px, 70vw); scroll-snap-align: center; background: var(--color-paper); border-radius: var(--radius-lg); padding: 0.65rem; box-shadow: var(--shadow-card); border: 1px solid var(--color-border); } .shot-card img { border-radius: calc(var(--radius-lg) - 6px); aspect-ratio: 9 / 19.5; object-fit: cover; width: 100%; background: var(--color-accent-soft); } .shot-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-top: 0.5rem; text-align: center; } /* ----- Story / description ----- */ .story { padding: clamp(2.5rem, 6vw, 5rem) 0; } .story-panel { background: var(--color-paper); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); position: relative; } .story-panel::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; opacity: 0.12; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23153C2D' d='M24 4c-6 8-12 14-12 22a12 12 0 1 0 24 0c0-8-6-14-12-22z'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; } .story-lead { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.45; margin: 0 0 1.25rem; color: var(--color-accent); } .story-body { columns: 1; gap: 2rem; } @media (min-width: 720px) { .story-body { columns: 2; column-gap: 2.5rem; } } .story-body p { margin: 0 0 1rem; break-inside: avoid; color: var(--color-text); } .story-body p:last-child { margin-bottom: 0; } /* ----- Bento features ----- */ .bento { padding: 0 0 clamp(3rem, 7vw, 5.5rem); } .bento h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.2rem); text-align: center; margin: 0 0 1.75rem; color: var(--color-accent); } .bento-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .bento-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; } .bento-span-2 { grid-column: span 2; } .bento-tall { grid-row: span 2; } } .bento-card { background: var(--color-paper); border-radius: var(--radius-lg); padding: 1.35rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 0.65rem; } .bento-card h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; color: var(--color-accent); } .bento-card p { margin: 0; font-size: 0.95rem; color: var(--color-text-muted); } .bento-icon { width: 44px; height: 44px; color: var(--color-accent); } /* ----- Legal / inner pages ----- */ .page-hero { padding: clamp(2rem, 5vw, 3rem) 0 1.5rem; text-align: center; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(1.85rem, 4vw, 2.5rem); margin: 0 0 0.5rem; color: var(--color-accent); } .page-hero .meta { font-size: 0.9rem; color: var(--color-text-muted); } .prose { max-width: var(--max-read); margin: 0 auto; padding: 0 0 clamp(3rem, 6vw, 4rem); } .prose section { margin-bottom: 2rem; } .prose h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 2rem 0 0.75rem; color: var(--color-accent); } .prose h2:first-child { margin-top: 0; } .prose p, .prose li { color: var(--color-text); } .prose ul { padding-left: 1.25rem; } .prose li { margin-bottom: 0.35rem; } .legal-note { font-size: 0.9rem; padding: 1rem 1.15rem; background: var(--color-paper); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 2rem; color: var(--color-text-muted); } /* ----- Contacts ----- */ .contact-grid { display: grid; gap: 2rem; padding-bottom: clamp(3rem, 6vw, 4rem); } @media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } } .contact-card { background: var(--color-paper); border-radius: var(--radius-lg); padding: 1.75rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); } .contact-card h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 1rem; color: var(--color-accent); } .def-list { margin: 0; padding: 0; list-style: none; } .def-list li { display: grid; gap: 0.15rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); } .def-list li:last-child { border-bottom: none; } .def-list dt { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .def-list dd { margin: 0; font-size: 1.05rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--color-text-muted); } .form-group input, .form-group textarea { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; background: var(--color-wash); } .form-group textarea { min-height: 140px; resize: vertical; } .form-hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.75rem; } /* ----- Footer ----- */ .site-footer { padding: 2.5rem 0; background: var(--color-accent); color: var(--color-paper); } .site-footer a { color: var(--color-paper); } .footer-inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; } @media (min-width: 640px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; } .footer-links a { font-size: 0.92rem; font-weight: 600; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .footer-copy { font-size: 0.85rem; opacity: 0.85; margin: 0; } /* ----- Mobile nav toggle (simple) ----- */ .nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--color-accent); align-items: center; justify-content: center; } .nav-toggle svg { display: block; } @media (max-width: 720px) { .nav-toggle { display: flex; } .nav-panel { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--color-wash); border-bottom: 1px solid var(--color-border); padding: 1rem min(5vw, 2rem) 1.25rem; transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; } .nav-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-panel .nav-links { flex-direction: column; align-items: flex-start; } } @media (min-width: 721px) { .nav-panel { display: contents; } .nav-links { margin-left: auto; } }