/* ========================================================================== La Moon Tea — static site styles Converted from the Hostinger Horizon / Tailwind build into plain CSS. Google Fonts are loaded via tags in each page's (not via @import here) — @import inside CSS is what was breaking the fonts on the live site, since some static hosts/CDNs and CSP setups don't reliably fetch font stylesheets nested inside another stylesheet. ========================================================================== */ :root { --background: 0 0% 100%; --foreground: 24 10% 12%; --primary: 26 91% 54%; --primary-dark: 26 91% 48%; --secondary: 223 63% 58%; --muted: 30 20% 96%; --muted-foreground: 25 6% 42%; --border: 30 14% 90%; --cream: 34 60% 97%; --radius: 1rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: hsl(var(--background)); color: hsl(var(--foreground)); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } ::selection { background-color: hsl(var(--primary) / 0.85); color: #fff; } h1, h2, h3 { margin: 0; } p { margin: 0; } .font-display { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; } .eyebrow { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--primary)); } .label { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; } .hairline { border-color: hsl(var(--border)) !important; } .container-x { width: 100%; max-width: 76rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .text-balance { text-wrap: balance; } /* -------------------- buttons -------------------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: hsl(var(--primary)); color: #fff; border: none; padding: 0.95rem 1.8rem; border-radius: 9999px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.95rem; box-shadow: 0 10px 24px -8px hsl(var(--primary) / 0.6); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn-primary:hover { background: hsl(var(--primary-dark)); transform: translateY(-2px); box-shadow: 0 16px 30px -10px hsl(var(--primary) / 0.7); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: #fff; color: hsl(var(--foreground)); padding: 0.95rem 1.8rem; border-radius: 9999px; border: 1.5px solid hsl(var(--border)); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.95rem; transition: transform .18s ease, border-color .18s ease, color .18s ease; } .btn-outline:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); transform: translateY(-2px); } .ink-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: hsl(var(--primary)); color: #fff; padding: 1rem 1.75rem; border-radius: 9999px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.85rem; border: none; transition: background .2s ease, transform .2s ease; } .ink-btn:hover { background: hsl(var(--primary-dark)); transform: translateY(-1px); } .link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; color: hsl(var(--foreground)); transition: color .2s ease; } .link-arrow:hover { color: hsl(var(--primary)); } /* -------------------- cards / chips -------------------- */ .soft-card { background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1.5rem; box-shadow: 0 24px 48px -32px rgba(28, 25, 23, 0.35); } .chip { display: inline-flex; align-items: center; gap: 0.25rem; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.7rem; font-weight: 600; padding: 0.28rem 0.65rem; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .bg-cream { background: hsl(var(--cream)); } /* -------------------- icon circle helper -------------------- */ .icon-circle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; gap: 1rem; } @media (min-width: 768px) { .site-header .bar { height: 5rem; } } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: hsl(var(--primary)); } .brand .dot { color: hsl(var(--secondary)); } .brand-logo { height: 2.5rem; width: auto; display: block; } @media (min-width: 768px) { .brand-logo { height: 3rem; } } .footer-brand .brand-logo { height: 3rem; } .main-nav { display: none; align-items: center; gap: 2rem; } @media (min-width: 768px) { .main-nav { display: flex; } } .main-nav a { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.9rem; font-weight: 600; color: hsl(var(--foreground) / 0.7); transition: color .2s ease; } .main-nav a:hover { color: hsl(var(--primary)); } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .cart-btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; border: 1px solid hsl(var(--border)); background: #fff; padding: 0.5rem 1rem; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.9rem; font-weight: 600; transition: border-color .2s ease, color .2s ease; } .cart-btn:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } .cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; font-size: 0.65rem; font-weight: 700; border-radius: 9999px; padding: 0 0.35rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .cart-count.has-items { background: hsl(var(--primary)); color: #fff; } .menu-toggle { display: inline-flex; background: none; border: none; padding: 0.5rem; } @media (min-width: 768px) { .menu-toggle { display: none; } } .mobile-nav { display: none; border-top: 1px solid hsl(var(--border)); background: #fff; } .mobile-nav.open { display: block; } .mobile-nav ul { display: flex; flex-direction: column; padding: 0.75rem 1.5rem; } .mobile-nav a { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; padding: 0.75rem 0; color: hsl(var(--foreground) / 0.8); } @media (min-width: 768px) { .mobile-nav { display: none !important; } } /* icon sizing */ .icon { width: 1.1rem; height: 1.1rem; stroke-width: 2; } .icon-sm { width: 0.9rem; height: 0.9rem; } .icon-lg { width: 1.5rem; height: 1.5rem; } .icon-xl { width: 3rem; height: 3rem; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; } .hero-grid { display: grid; gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; padding-top: 6rem; padding-bottom: 6rem; } } .hero h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.02em; } .hero h1 .accent { color: hsl(var(--primary)); } .hero-copy { margin-top: 1.5rem; font-size: 1.125rem; color: hsl(var(--foreground) / 0.7); max-width: 32rem; line-height: 1.6; } .hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; } .hero-rating { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: hsl(var(--foreground) / 0.7); } .hero-rating .stars { display: flex; color: hsl(var(--primary)); gap: 2px; } .hero-visual { position: relative; } .hero-visual-card { aspect-ratio: 4 / 5; border-radius: 2.5rem; overflow: hidden; background: linear-gradient(to bottom right, hsl(26 90% 86%), hsl(223 60% 86%)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; } .hero-visual-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-visual-inner .icon-circle { height: 6rem; width: 6rem; margin: 0 auto 1.5rem; background: hsl(var(--primary)); color: #fff; box-shadow: 0 10px 24px -8px hsl(var(--primary) / 0.6); } .hero-visual-inner p { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.5rem; color: hsl(var(--foreground) / 0.8); } .price-badge { position: absolute; bottom: -1.25rem; left: -1rem; background: #fff; border-radius: 1rem; padding: 0.75rem 1.25rem; } .price-badge .amount { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: hsl(var(--primary)); font-size: 1.25rem; line-height: 1; } .price-badge .sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } /* ========================================================================== Trust bar ========================================================================== */ .trust-bar { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: #fff; } .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem 0; } @media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } } .trust-item { display: flex; align-items: center; gap: 0.75rem; } .trust-item .icon-circle { height: 2.5rem; width: 2.5rem; } .trust-item .t { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.9rem; line-height: 1.2; } .trust-item .d { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* ========================================================================== Section generic ========================================================================== */ section { } .section-pad { padding-top: 5rem; padding-bottom: 5rem; } @media (min-width: 768px) { .section-pad { padding-top: 7rem; padding-bottom: 7rem; } } .section-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; } .section-head h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: 2.25rem; } @media (min-width: 768px) { .section-head h2 { font-size: 3rem; } } .section-head p { margin-top: 1rem; color: hsl(var(--muted-foreground)); } /* ========================================================================== Product grid ========================================================================== */ .product-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .product-card { overflow: hidden; display: flex; flex-direction: column; } .product-media { position: relative; aspect-ratio: 1 / 1; background: hsl(var(--cream)); } .product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .badge { position: absolute; top: 1rem; z-index: 1; border-radius: 9999px; color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 0.7rem; padding: 0.4rem 0.7rem; } .badge.save { left: 1rem; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .badge.tag { right: 1rem; } .badge.tag.blue { background: hsl(var(--secondary)); } .badge.tag.primary { background: hsl(var(--primary)); } .badge.tag.dark { background: hsl(var(--foreground)); } .product-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .product-body h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; } .product-body .blurb { margin-top: 0.5rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } .product-chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.375rem; } .product-price { margin-top: 1.25rem; display: flex; align-items: flex-end; gap: 0.5rem; } .product-price .now { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.875rem; } .product-price .was { color: hsl(var(--muted-foreground)); text-decoration: line-through; margin-bottom: 0.25rem; } .product-body .btn-primary { width: 100%; margin-top: 1.25rem; } .product-body .fine { text-align: center; font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.75rem; } .grid-status { text-align: center; padding: 4rem 0; color: hsl(var(--muted-foreground)); } .spinner { width: 2rem; height: 2rem; border-radius: 9999px; border: 3px solid hsl(var(--primary) / 0.25); border-top-color: hsl(var(--primary)); margin: 0 auto; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Why us / brew tools / steps ========================================================================== */ .why-grid, .tools-grid, .steps-grid { display: grid; gap: 1.5rem; } .why-grid { grid-template-columns: 1fr; } @media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); } } .why-card { padding: 2rem; } .why-card .num { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; width: 2.5rem; border-radius: 9999px; background: hsl(var(--secondary) / 0.1); color: hsl(var(--secondary)); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; margin-bottom: 1rem; } .why-card h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.125rem; } .why-card p { margin-top: 0.75rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .tools-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } } .tool-card { padding: 1.5rem; text-align: center; } .tool-card .icon-circle { height: 3rem; width: 3rem; border-radius: 1rem; margin: 0 auto 1rem; } .tool-card h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; } .tool-card p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; } .brew-note { text-align: center; font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin: 1.5rem auto 0; max-width: 36rem; } .steps-grid { grid-template-columns: 1fr; margin-top: 3.5rem; } @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } .step-card { padding: 2rem; position: relative; } .step-card .n { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 3rem; color: hsl(var(--primary) / 0.2); } .step-card h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.125rem; margin-top: 0.5rem; } .step-card p { margin-top: 0.5rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); line-height: 1.6; } /* ========================================================================== Comparison ========================================================================== */ .compare-grid { display: grid; gap: 1.5rem; max-width: 56rem; margin: 0 auto; grid-template-columns: 1fr; } @media (min-width: 768px) { .compare-grid { grid-template-columns: 1fr 1fr; } } .compare-card { padding: 2rem; } .compare-card.bad h3 { color: hsl(var(--muted-foreground)); } .compare-card ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .compare-card li { display: flex; align-items: flex-start; gap: 0.75rem; } .compare-card.bad { color: hsl(var(--foreground) / 0.7); } .compare-card.bad .icon { color: hsl(var(--muted-foreground)); flex-shrink: 0; margin-top: 2px; } .compare-card.good { border-radius: 1.5rem; padding: 2rem; color: #fff; background: linear-gradient(to bottom right, hsl(var(--primary)), hsl(18 85% 50%)); box-shadow: 0 20px 40px -20px rgba(0,0,0,.3); } .compare-card.good h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; } .compare-card.good .icon { flex-shrink: 0; margin-top: 2px; } .compare-card h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; } /* ========================================================================== FAQ accordion ========================================================================== */ .faq-wrap { max-width: 48rem; margin: 0 auto; } .faq-item { border-bottom: 1px solid hsl(var(--border)); } .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1rem; } @media (min-width: 768px) { .faq-q { font-size: 1.125rem; } } .faq-q .chevron { transition: transform .2s ease; flex-shrink: 0; color: hsl(var(--muted-foreground)); } .faq-item.open .faq-q .chevron { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: hsl(var(--muted-foreground)); font-size: 0.95rem; line-height: 1.6; } .faq-a-inner { padding-bottom: 1.25rem; } .faq-item.open .faq-a { max-height: 20rem; } /* ========================================================================== Final CTA ========================================================================== */ .final-cta { border-radius: 2.5rem; text-align: center; padding: 4rem 1.5rem; color: #fff; background: linear-gradient(to bottom right, hsl(var(--primary)), hsl(22 88% 52%), hsl(16 84% 48%)); } @media (min-width: 768px) { .final-cta { padding: 6rem 1.5rem; } } .final-cta h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 2.25rem; max-width: 42rem; margin: 0 auto; } @media (min-width: 768px) { .final-cta h2 { font-size: 3rem; } } .final-cta .sub { margin-top: 1.25rem; color: rgba(255,255,255,.9); max-width: 36rem; margin-left: auto; margin-right: auto; font-size: 1.125rem; } .final-cta .cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; border-radius: 9999px; background: #fff; color: hsl(var(--primary)); padding: 1rem 2rem; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.125rem; box-shadow: 0 15px 30px rgba(0,0,0,.15); transition: transform .18s ease; } .final-cta .cta-btn:hover { transform: translateY(-2px); } .final-cta .fine { margin-top: 1.25rem; font-size: 0.9rem; color: rgba(255,255,255,.8); } .final-cta .more { margin-top: 2rem; color: rgba(255,255,255,.9); } .final-cta .more a { text-decoration: underline; font-weight: 700; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: hsl(var(--cream)); border-top: 1px solid hsl(var(--border)); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 0; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-brand p { margin-top: 1rem; color: hsl(var(--muted-foreground)); max-width: 24rem; line-height: 1.6; } .footer-social { margin-top: 1.5rem; display: flex; gap: 0.75rem; } .footer-social a { height: 2.5rem; width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid hsl(var(--border)); transition: border-color .2s ease, color .2s ease; } .footer-social a:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); } .footer-col p.label { color: hsl(var(--muted-foreground) / .8); margin-bottom: 1rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); } .footer-col a:hover { color: hsl(var(--primary)); } .footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; color: hsl(var(--muted-foreground)); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; } } /* ========================================================================== Cart drawer ========================================================================== */ .cart-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(28,25,23,.3); backdrop-filter: blur(2px); display: none; } .cart-overlay.open { display: block; } .cart-drawer { position: absolute; right: 0; top: 0; height: 100%; width: 100%; max-width: 460px; background: hsl(var(--background)); display: flex; flex-direction: column; border-left: 1px solid hsl(var(--border)); box-shadow: -20px 0 40px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .3s ease; } .cart-overlay.open .cart-drawer { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid hsl(var(--border)); } .cart-head h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1.5rem; margin-top: 0.25rem; } .cart-close { height: 2.5rem; width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; } .cart-close:hover { background: hsl(var(--foreground) / .05); } .cart-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .cart-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: hsl(var(--foreground) / .6); } .cart-empty .icon-xl { opacity: .4; margin-bottom: 1.25rem; } .cart-empty .msg { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1.5rem; } .cart-empty .hint { margin-top: 0.75rem; color: hsl(var(--foreground) / .5); } .cart-items { display: flex; flex-direction: column; gap: 1.5rem; } .cart-line { display: flex; gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border)); } .cart-line:last-child { border-bottom: none; padding-bottom: 0; } .cart-thumb { width: 6rem; height: 8rem; flex-shrink: 0; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(150deg, hsl(34 90% 92%), hsl(26 90% 88%)); } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-line-body { flex: 1; display: flex; flex-direction: column; } .cart-line-body .title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; } .cart-line-body .price { font-weight: 700; margin-top: auto; } .cart-qty { display: inline-flex; align-items: center; border: 1px solid hsl(var(--border)); border-radius: 0.5rem; } .cart-qty button { height: 2rem; width: 2rem; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; } .cart-qty button:hover { background: hsl(var(--foreground) / .05); } .cart-qty span { padding: 0 0.75rem; font-size: 0.8rem; } .cart-line-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; } .cart-remove { background: none; border: none; font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .cart-remove:hover { color: hsl(var(--primary)); } .cart-foot { border-top: 1px solid hsl(var(--border)); padding: 1.5rem; } .cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; } .cart-subtotal .amt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 1.5rem; } .cart-foot .note { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; } .cart-foot .ink-btn { width: 100%; height: 3.25rem; } .cart-foot .ship { text-align: center; font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 1rem; } /* ========================================================================== Ebook page ========================================================================== */ .ebook-hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding: 4rem 0; } @media (min-width: 1024px) { .ebook-hero-grid { grid-template-columns: 1fr 1fr; padding: 6rem 0; } } .ebook-hero h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; } @media (min-width: 768px) { .ebook-hero h1 { font-size: 3rem; } } .checklist { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .checklist li { display: flex; align-items: flex-start; gap: 0.75rem; } .checklist .icon-circle { height: 1.5rem; width: 1.5rem; margin-top: 2px; } .checklist span.txt { color: hsl(var(--foreground) / .8); } .ebook-card { padding: 2rem; } .ebook-card p.title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; } .ebook-card p.sub { color: hsl(var(--muted-foreground)); font-size: 0.9rem; margin-top: 0.25rem; margin-bottom: 1.5rem; } .recipe-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .recipe-grid { grid-template-columns: repeat(3, 1fr); } } .recipe-card { padding: 1.75rem; } .recipe-card .icon-circle { height: 3rem; width: 3rem; border-radius: 1rem; margin-bottom: 1rem; } .recipe-card h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.125rem; } .recipe-card p { font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; line-height: 1.6; } .ebook-strip { border-radius: 2rem; color: #fff; padding: 2.5rem; display: grid; gap: 2rem; background: linear-gradient(to bottom right, hsl(var(--primary)), hsl(18 85% 50%)); grid-template-columns: 1fr; align-items: center; } @media (min-width: 1024px) { .ebook-strip { grid-template-columns: 1fr 1fr; padding: 3.5rem; } } .ebook-strip h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.875rem; letter-spacing: -0.02em; } @media (min-width: 768px) { .ebook-strip h2 { font-size: 2.25rem; } } .ebook-strip .sub { margin-top: 1rem; color: rgba(255,255,255,.9); max-width: 28rem; } .ebook-strip-cta { text-align: center; } .ebook-strip-cta .btn-primary { background: #fff; color: hsl(var(--primary)); box-shadow: none; } .ebook-strip-cta .btn-primary:hover { background: #f5f5f5; } .ebook-strip-card { background: #fff; border-radius: 1.5rem; padding: 1.75rem; color: hsl(var(--foreground)); text-align: left; } /* ---- e-book signup form ---- */ .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; } .form-input { border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 0.75rem 1rem; font: inherit; outline: none; transition: border-color .2s ease; background: #fff; color: hsl(var(--foreground)); } .form-input:focus { border-color: hsl(var(--primary)); } .form-note { font-size: 0.75rem; color: hsl(var(--muted-foreground)); text-align: center; margin-top: 0.75rem; } .signup-done { text-align: center; padding: 1.5rem 0; } .signup-done .icon-circle { height: 3.5rem; width: 3.5rem; margin: 0 auto 1rem; } .signup-done .msg { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.25rem; } .signup-done .hint { margin-top: 0.5rem; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } .signup-done .hint a { color: hsl(var(--primary)); font-weight: 700; text-decoration: underline; } /* ========================================================================== Success page ========================================================================== */ .success-wrap { max-width: 68rem; margin: 0 auto; padding: 6rem 1.5rem 8rem; } @media (min-width: 768px) { .success-wrap { padding-top: 8rem; padding-bottom: 9rem; } } .success-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 768px) { .success-grid { grid-template-columns: 5fr 7fr; gap: 3rem; } } .success-title p.label { margin-bottom: 1.5rem; color: hsl(var(--foreground) / .6); } .success-title h1 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; line-height: .98; letter-spacing: -0.02em; font-size: clamp(2.5rem, 6vw, 5rem); } .success-title h1 .accent { font-style: italic; color: hsl(var(--primary)); } .success-copy { color: hsl(var(--foreground) / .8); font-size: 1.05rem; line-height: 1.7; display: flex; flex-direction: column; gap: 2rem; } .success-facts { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); padding: 1.5rem 0; display: grid; grid-template-columns: 1fr 1fr; row-gap: 0.75rem; } .success-facts dt { color: hsl(var(--foreground) / .55); } .success-facts dd { margin: 0; font-variant-numeric: tabular-nums; } .success-quote { font-style: italic; color: hsl(var(--foreground) / .7); } .success-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: 0.5rem; } /* ========================================================================== 404-style empty state (used only if a page is missing) ========================================================================== */ .not-found { min-height: 60vh; display: flex; align-items: center; } .not-found-inner { text-align: center; } /* ========================================================================== Full product detail page (products.html) ========================================================================== */ .products-intro { text-align: center; max-width: 42rem; margin: 0 auto 4rem; } .products-intro h1 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.02em; font-size: 2.25rem; } @media (min-width: 768px) { .products-intro h1 { font-size: 3rem; } } .products-intro p { margin-top: 1rem; color: hsl(var(--muted-foreground)); } .product-detail { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; padding: 3rem 0; border-bottom: 1px solid hsl(var(--border)); scroll-margin-top: 6rem; } .product-detail:last-of-type { border-bottom: none; } @media (min-width: 1024px) { .product-detail { grid-template-columns: 5fr 7fr; gap: 3.5rem; } } .product-detail:nth-of-type(even) .pd-media { order: 2; } @media (min-width: 1024px) { .product-detail:nth-of-type(even) .pd-media { order: 0; } .product-detail:nth-of-type(even) .pd-body { order: -1; } } .pd-media { position: relative; } .pd-media-card { aspect-ratio: 1 / 1; border-radius: 1.75rem; overflow: hidden; background: hsl(var(--cream)); position: relative; } .pd-media-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pd-badges { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .pd-eyebrow { margin-bottom: 0.5rem; } .pd-body h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; } @media (min-width: 768px) { .pd-body h2 { font-size: 1.875rem; } } .pd-subtitle { margin-top: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.95rem; line-height: 1.6; } .pd-price { margin-top: 1.25rem; display: flex; align-items: flex-end; gap: 0.6rem; } .pd-price .now { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 2rem; } .pd-price .was { color: hsl(var(--muted-foreground)); text-decoration: line-through; margin-bottom: 0.3rem; } .pd-price .save { align-self: center; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 9999px; } .pd-features { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .pd-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.92rem; line-height: 1.6; color: hsl(var(--foreground) / 0.85); } .pd-features li .icon-circle { height: 1.4rem; width: 1.4rem; margin-top: 2px; flex-shrink: 0; } .pd-features li b { font-family: "Plus Jakarta Sans", sans-serif; } .pd-chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .pd-buy-row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .pd-buy-row .btn-primary { flex: 1 1 12rem; } .pd-fine { margin-top: 0.75rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .pd-meta { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } @media (min-width: 640px) { .pd-meta { grid-template-columns: 1fr 1fr; } } .pd-meta dt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: hsl(var(--foreground) / 0.75); display: inline; } .pd-meta dd { margin: 0 0 0.5rem; display: inline; } .pd-meta .row { grid-column: 1 / -1; }