/* Levain Craft — honor stand intro page. Palette and day/night behavior follow the landing page (and /breads/ pages): light "Cocoa Taupe" by day, dark "Pumpernickel" at night, switched via data-theme on (see script.js). */ :root { --bg: #f8fafc; --text: #0f172a; --muted: #475569; --panel: #ffffff; --line: rgba(2, 6, 23, .08); --accent: #f59e0b; --accent-2: #fbbf24; --ring: rgba(245, 158, 11, .35); } [data-theme="dark"] { --bg: #0b1220; --text: #f3f4f6; --muted: #94a3b8; --panel: rgba(255, 255, 255, .05); --line: rgba(148, 163, 184, .25); } * { box-sizing: border-box; } html, body { min-height: 100%; margin: 0; font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: var(--bg); color: var(--text); line-height: 1.6; } h1, h2, h3 { font-family: 'Montserrat', sans-serif; margin: 0; font-weight: 700; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Header (same as /breads/ pages) */ header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2rem; border-bottom: 1px solid var(--line); background: var(--panel); } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-family: 'Montserrat', sans-serif; color: var(--text); } .brand img { width: 36px; height: 36px; } .header-order-link { font-size: 0.9rem; font-weight: 600; white-space: nowrap; } main { max-width: 860px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; } /* Hero */ .hero { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); } .hero-kicker { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; } .hero h1 { font-size: 2.4rem; margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--muted); font-size: 1.15rem; font-weight: 300; max-width: 600px; margin: 0 auto; } /* Sections */ section { margin-bottom: 3rem; } section h2 { font-size: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--accent); display: inline-block; } .section-intro { color: var(--muted); margin: -0.5rem 0 1.25rem; } /* How it works */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .step { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.25rem 1.25rem; text-align: center; } .step-num { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111827; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .step-icon { font-size: 2rem; display: block; margin-bottom: 0.5rem; } .step h3 { font-size: 1rem; margin-bottom: 0.4rem; } .step p { margin: 0; font-size: 0.9rem; color: var(--muted); } /* Label showcase */ .label-showcase { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 2rem; align-items: center; } .label-art { position: relative; } .label-art img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 10px 34px rgba(0, 0, 0, .18); } /* The label artwork's white QR window sits at 413/1254 × 433/1254 with a 429×426 span; the faux code is inset within it like the real one (390px). */ .faux-qr { position: absolute; left: 34.45%; top: 35.9%; width: 31.1%; height: 31.1%; } .faux-qr svg { display: block; width: 100%; height: 100%; } .label-caption { margin: 0.75rem 0 0; text-align: center; font-size: 0.8rem; color: var(--muted); font-style: italic; } .label-copy p { margin: 0 0 1rem; } .label-copy p:last-child { margin-bottom: 0; } /* Trust grid */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .trust-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; } .trust-icon { font-size: 1.6rem; display: block; margin-bottom: 0.5rem; } .trust-card h3 { font-size: 1rem; margin-bottom: 0.4rem; } .trust-card p { margin: 0; font-size: 0.9rem; color: var(--muted); } /* Product lineup */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; } .product-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .product-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .product-photo-empty { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--line); } .product-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .product-name { font-family: 'Montserrat', sans-serif; font-weight: 700; } .product-desc { font-size: 0.85rem; color: var(--muted); flex: 1; } .product-price { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--accent); margin-top: 0.25rem; } .empty-state { color: var(--muted); font-style: italic; } /* Order CTA (same as /breads/ pages) */ .order-cta { display: block; text-align: center; margin: 2.5rem auto 0; max-width: 460px; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111827; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; box-shadow: 0 6px 20px rgba(245, 158, 11, .25); } .order-cta:hover { text-decoration: none; filter: brightness(1.05); } .commitment { text-align: center; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .commitment p { font-style: italic; color: var(--muted); font-size: 1rem; max-width: 500px; margin: 0 auto; } footer { text-align: center; padding: 1.5rem; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 2rem; } @media (max-width: 700px) { header { padding: 1rem; } main { padding: 1.5rem 1rem 2rem; } .hero h1 { font-size: 1.8rem; } .steps { grid-template-columns: 1fr; } .label-showcase { grid-template-columns: 1fr; } .label-figure { max-width: 300px; margin: 0 auto; } .trust-grid { grid-template-columns: 1fr; } }