/* ========================================================================= Shri Kalyan Kirana Store — styles.css Plain CSS, mobile-first, CSS custom properties for theming. Sections: 1. Fonts 6. Buttons 11. Breadcrumbs 16. Offers 2. Variables 7. Header / Nav 12. Products/filter 17. 404 3. Reset/base 8. Hero 13. Category page 18. Utilities 4. a11y 9. Highlights 14. About 19. Media queries 5. Layout 10. Category cards 15. Contact/form 20. Reduced motion ========================================================================= */ /* 1. FONTS — self-hosted Poppins is applied only when is present (set from site.json). If the woff2 files aren't shipped, the @font-face simply goes unused and the system stack is used instead. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); } /* 2. VARIABLES */ :root { /* Brand — Fresh Green & Amber (all text pairings meet WCAG AA) */ --color-primary: #1B7A43; --color-primary-dark: #145C32; --color-primary-darker: #0F4526; --color-primary-light: #E8F3EC; --color-accent: #E8930C; --color-accent-dark: #8F5800; --color-accent-light: #FBE9CB; --color-whatsapp: #25D366; /* Ink & surfaces */ --color-ink: #1E2A22; --color-body: #2C3A31; --color-muted: #566459; --color-bg: #FFFBF3; --color-surface: #FFFFFF; --color-surface-2: #F6F1E6; --color-border: #E6DFD1; --color-focus: #0B65C2; /* Typography */ --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Layout */ --maxw: 1120px; --radius: 16px; --radius-sm: 10px; --pad-inline: clamp(1rem, 5vw, 2rem); --section-y: clamp(2.75rem, 6vw, 4.75rem); --shadow-sm: 0 1px 2px rgba(20, 40, 25, .06), 0 2px 6px rgba(20, 40, 25, .06); --shadow-md: 0 8px 24px rgba(20, 40, 25, .10); } .font-poppins { --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* 3. RESET / BASE */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-body); background: var(--color-bg); line-height: 1.65; font-size: 1rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--color-ink); line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: clamp(1.95rem, 1.4rem + 2.5vw, 3rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .55vw, 1.4rem); } p { text-wrap: pretty; } a { color: var(--color-primary-dark); text-underline-offset: 2px; } a:hover { color: var(--color-primary); } img, svg { max-width: 100%; height: auto; display: block; } ul, ol { padding: 0; list-style: none; } strong { color: var(--color-ink); } /* 4. ACCESSIBILITY */ .skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 1000; background: var(--color-ink); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); transition: top .15s ease; } .skip-link:focus { top: 0; color: #fff; } :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 3px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 5. LAYOUT */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-inline); } .section { padding-block: var(--section-y); } .section--tint { background: var(--color-surface-2); } .section--primary { background: var(--color-primary); color: #fff; } .section--primary h2, .section--primary h3 { color: #fff; } .section__head { max-width: 60ch; margin-bottom: clamp(1.25rem, 3vw, 2rem); } .eyebrow { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: .5rem; } .lede { font-size: 1.075rem; color: var(--color-muted); } .center { text-align: center; margin-inline: auto; } /* 6. BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .7rem 1.15rem; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--sm { min-height: 38px; padding: .5rem .85rem; font-size: .9rem; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-dark); color: #fff; } .btn--accent { background: var(--color-accent); color: var(--color-ink); } .btn--accent:hover { background: var(--color-accent-dark); color: #fff; } .btn--call { background: var(--color-primary); color: #fff; } .btn--call:hover { background: var(--color-primary-dark); color: #fff; } .btn--whatsapp { background: var(--color-whatsapp); color: var(--color-ink); } .btn--whatsapp:hover { background: #1Fc25d; color: var(--color-ink); } .btn--ghost { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); } .btn--ghost:hover { background: var(--color-primary-light); color: var(--color-primary-darker); } .btn--light { background: #fff; color: var(--color-primary-dark); } .btn--light:hover { background: var(--color-surface-2); color: var(--color-primary-darker); } .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; } /* 7. HEADER / NAV */ .site-header { position: sticky; top: 0; z-index: 100; /* Solid, opaque background — no backdrop-filter, so the sticky header stays smooth on low-end phones (no per-scroll compositing / repaint jank). */ background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .6rem; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--color-ink); } .brand__logo { width: 44px; height: 44px; border-radius: 10px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--color-primary-darker); } .brand__place { font-size: .74rem; color: var(--color-muted); } .nav-toggle { display: none; align-items: center; gap: .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: .5rem .85rem; min-height: 44px; font-family: var(--font-head); font-weight: 600; color: var(--color-ink); cursor: pointer; } .nav-toggle__box { display: inline-grid; gap: 4px; width: 20px; } .nav-toggle__bar { height: 2.5px; width: 100%; background: var(--color-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .primary-nav { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding-block: .5rem 1rem; } .primary-nav__list { display: flex; flex-direction: column; gap: .15rem; } .primary-nav__list a { display: block; padding: .7rem .4rem; font-family: var(--font-head); font-weight: 600; color: var(--color-ink); text-decoration: none; border-radius: 8px; } .primary-nav__list a:hover { background: var(--color-primary-light); color: var(--color-primary-darker); } .primary-nav__list a[aria-current="page"] { color: var(--color-primary-dark); box-shadow: inset 0 -2px 0 var(--color-accent); } .primary-nav__cta { display: flex; flex-wrap: wrap; gap: .55rem; } /* JS active: collapse the mobile nav behind the toggle */ html.js .nav-toggle { display: inline-flex; } html.js .primary-nav { display: none; } html.js .primary-nav.is-open { display: flex; } /* 7b. FOOTER (dark green, NAP prominent) */ .site-footer { background: var(--color-primary-darker); color: #E4F0E8; } /* Text links go white — but not .btn buttons, which keep their own accessible colours. */ .site-footer a:not(.btn) { color: #fff; } .site-footer a:not(.btn):hover { color: var(--color-accent-light); } .site-footer strong { color: #fff; } .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; padding-block: clamp(2.25rem, 5vw, 3.25rem); } .site-footer__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff; } .site-footer__desc { color: #C7DCCE; font-size: .92rem; margin-top: .4rem; max-width: 36ch; } .site-footer__address { margin-top: .75rem; color: #E4F0E8; font-style: normal; } .site-footer__prop { margin-top: .5rem; color: #C7DCCE; font-size: .9rem; } .site-footer__h { font-family: var(--font-head); font-size: 1rem; color: #fff; margin-bottom: .75rem; } .site-footer__links { display: grid; gap: .45rem; } .site-footer__links a, .site-footer__contact a { text-decoration: none; } .site-footer__hours, .site-footer__contact { margin-bottom: .65rem; font-size: .95rem; } .site-footer__delivery { color: #C7DCCE; font-size: .9rem; margin-bottom: .8rem; } .site-footer__cta { display: flex; flex-wrap: wrap; gap: .5rem; } .site-footer__bar { border-top: 1px solid rgba(255, 255, 255, .16); } .site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; align-items: center; padding-block: 1rem; font-size: .82rem; color: #BFD4C6; } .site-footer__bar-inner a { color: #fff; } @media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.3fr; gap: 2.5rem; } } /* 8. HERO */ .hero { position: relative; background: radial-gradient(1200px 400px at 12% -10%, rgba(232, 147, 12, .16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(27, 122, 67, .16), transparent 55%), linear-gradient(180deg, #FFFDF8 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border); } .hero__inner { padding-block: clamp(2.5rem, 7vw, 5rem); display: grid; gap: 1.4rem; max-width: 46rem; } .hero__badge { display: inline-flex; align-items: center; gap: .45rem; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-primary-darker); font-weight: 600; font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; width: fit-content; box-shadow: var(--shadow-sm); } .hero h1 { margin-bottom: .1rem; } .hero h1 .hi { display: block; font-size: .5em; font-weight: 600; color: var(--color-primary-dark); letter-spacing: 0; margin-top: .4rem; } .hero__sub { font-size: 1.1rem; color: var(--color-body); max-width: 42ch; } .hero__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .92rem; color: var(--color-muted); } .hero__meta strong { color: var(--color-ink); } /* status chip (JS enhanced) */ .status-chip { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .status-chip::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-muted); } .status-chip[data-state="open"] { color: var(--color-primary-dark); } .status-chip[data-state="open"]::before { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .status-chip[data-state="closed"] { color: var(--color-accent-dark); } .status-chip[data-state="closed"]::before { background: var(--color-accent-dark); } /* 9. HIGHLIGHTS */ .highlights { display: grid; grid-template-columns: 1fr; gap: 1rem; } .highlight { display: flex; gap: .85rem; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-sm); } .highlight__icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.5rem; background: var(--color-primary-light); border-radius: 12px; } .highlight h3 { font-size: 1.05rem; margin-bottom: .15rem; } .highlight p { font-size: .92rem; color: var(--color-muted); } /* 10. CATEGORY CARDS */ .cat-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .cat-card { display: flex; align-items: center; gap: .9rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem; text-decoration: none; color: var(--color-ink); box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease; } .cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary); color: var(--color-ink); } .cat-card__icon { flex: none; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.7rem; background: var(--color-primary-light); border-radius: 14px; } .cat-card__body { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; } .cat-card__name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; } .cat-card__hi { font-weight: 600; font-size: .82em; color: var(--color-primary-dark); } .cat-card__summary { font-size: .9rem; color: var(--color-muted); } .cat-card__arrow { flex: none; color: var(--color-primary); font-size: 1.2rem; font-weight: 700; } /* 11. BREADCRUMBS */ .breadcrumbs { padding-block: .9rem 0; } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: .3rem .55rem; font-size: .85rem; color: var(--color-muted); } .breadcrumbs__item { display: flex; align-items: center; gap: .55rem; } .breadcrumbs__item + .breadcrumbs__item::before { content: "›"; color: var(--color-border); } .breadcrumbs__item a { color: var(--color-primary-dark); text-decoration: none; } .breadcrumbs__item a:hover { text-decoration: underline; } .breadcrumbs__item [aria-current="page"] { color: var(--color-ink); font-weight: 600; } /* 12. PRODUCTS / FILTER */ .filter { margin-bottom: 1.5rem; max-width: 30rem; } .filter label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--color-ink); } .filter__field { position: relative; } .filter input { width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.6rem; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; background: var(--color-surface) ; } .filter__field::before { content: "🔎"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1rem; } .filter__empty { display: none; color: var(--color-muted); padding: 1rem 0; } .filter__empty.is-visible { display: block; } .cat-card[hidden] { display: none; } /* 13. CATEGORY PAGE */ .cat-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .cat-hero__icon { flex: none; width: 68px; height: 68px; display: grid; place-items: center; font-size: 2.1rem; background: var(--color-primary-light); border-radius: 18px; } .cat-hero__hi { display: block; font-weight: 600; font-size: 1rem; color: var(--color-primary-dark); } .items-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: 1.25rem; } .item { display: flex; align-items: center; gap: .6rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: .75rem .9rem; font-weight: 500; } .item::before { content: "✓"; color: var(--color-primary); font-weight: 700; flex: none; } .note-card { margin-top: 1.75rem; background: var(--color-accent-light); border: 1px solid var(--color-accent); border-radius: var(--radius); padding: 1.1rem 1.25rem; font-size: .95rem; color: var(--color-ink); } /* 14. ABOUT */ .prose { max-width: 65ch; } .prose > * + * { margin-top: 1rem; } .prose h2 { margin-top: 2rem; } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .feature { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--shadow-sm); } .feature h3 { font-size: 1.05rem; margin-bottom: .3rem; } .feature p { font-size: .93rem; color: var(--color-muted); } .fact-list { display: grid; gap: .6rem; margin-top: 1.25rem; } .fact-list div { display: flex; gap: .6rem; padding: .7rem .9rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } .fact-list dt { font-weight: 700; color: var(--color-ink); min-width: 7.5rem; } /* 15. CONTACT / FORM */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow-sm); } .info-card h2 { font-size: 1.2rem; } .info-list { display: grid; gap: .9rem; margin-top: 1rem; } .info-list > div { display: flex; gap: .7rem; } .info-list .ico { flex: none; font-size: 1.15rem; width: 1.6rem; text-align: center; } .info-list a { color: var(--color-primary-dark); font-weight: 600; } address { font-style: normal; } .map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); aspect-ratio: 16 / 10; background: var(--color-surface-2); } .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } .form { display: grid; gap: 1rem; } .form__row { display: grid; gap: .35rem; } .form label { font-weight: 600; font-size: .92rem; color: var(--color-ink); } .form label .req { color: var(--color-accent-dark); } .form input, .form textarea { width: 100%; padding: .75rem .9rem; min-height: 48px; border: 1px solid var(--color-border); border-radius: 12px; font: inherit; color: var(--color-ink); background: var(--color-surface); } .form textarea { min-height: 130px; resize: vertical; } .form input:focus, .form textarea:focus { border-color: var(--color-primary); } .form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form__status { font-weight: 600; border-radius: 12px; padding: .75rem .9rem; display: none; } .form__status.is-error { display: block; background: #FDECEC; color: #8A1C1C; border: 1px solid #E9A5A5; } .form__status.is-success { display: block; background: var(--color-primary-light); color: var(--color-primary-darker); border: 1px solid var(--color-primary); } .form__hint { font-size: .85rem; color: var(--color-muted); } /* FAQ accordion */ .faq { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); } .faq summary { cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 600; color: var(--color-ink); padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--color-primary); font-size: 1.4rem; font-weight: 700; line-height: 1; flex: none; } .faq[open] summary::after { content: "\2013"; } .faq p { padding: 0 1rem 1rem; margin: 0; color: var(--color-body); } /* 16. OFFERS */ .offer-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .offer { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); border-top: 4px solid var(--color-accent); } .offer__badge { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-dark); background: var(--color-accent-light); padding: .2rem .6rem; border-radius: 999px; margin-bottom: .6rem; } .offer h3 { font-size: 1.15rem; margin-bottom: .35rem; } .offer__validity { font-size: .85rem; color: var(--color-muted); margin-top: .7rem; } /* 17. 404 */ .status-page { text-align: center; padding-block: clamp(3rem, 12vw, 6rem); } .status-page .big { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 800; color: var(--color-primary); font-family: var(--font-head); line-height: 1; } /* 18. UTILITIES */ .cta-band { text-align: center; } .cta-band .btn-row { justify-content: center; } .mt-0 { margin-top: 0; } .hidden { display: none !important; } /* 19. MEDIA QUERIES */ @media (min-width: 40em) { .highlights { grid-template-columns: repeat(2, 1fr); } .cat-grid { grid-template-columns: repeat(2, 1fr); } .items-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .offer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 48em) { /* Desktop nav: single row, always visible, no toggle */ .site-header__inner { flex-wrap: nowrap; } .nav-toggle, html.js .nav-toggle { display: none; } .primary-nav, html.js .primary-nav, html.js .primary-nav.is-open { display: flex; flex-direction: row; align-items: center; width: auto; gap: 1.25rem; padding-block: 0; } .primary-nav__list { flex-direction: row; gap: .2rem; } .primary-nav__list a { padding: .55rem .7rem; } .contact-grid { grid-template-columns: 1.05fr .95fr; align-items: start; } } @media (min-width: 64em) { .highlights { grid-template-columns: repeat(4, 1fr); } .cat-grid { grid-template-columns: repeat(3, 1fr); } .items-grid { grid-template-columns: repeat(3, 1fr); } .feature-grid { grid-template-columns: repeat(3, 1fr); } .offer-grid { grid-template-columns: repeat(3, 1fr); } .split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } } /* 20. REDUced MOTION */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }