/* ========================= Gahanna Delivery – styles.css Lightweight brand system + components ========================= */ /* ---- Brand Tokens ---- */ :root{ /* Colors */ --gd-bg: #ffffff; --gd-surface: #f7f8fa; --gd-elev: #ffffff; --gd-text: #1d2330; --gd-muted: #667085; /* Brand palette (Green forward, friendly, local) */ --gd-primary: #1f8d5f; /* Gahanna Green */ --gd-primary-600:#18724d; --gd-primary-100:#e5f4ed; --gd-accent: #2f6df6; /* Link/secondary actions */ --gd-accent-100:#eaf0ff; --gd-border: #e5e7eb; --gd-success:#179c6d; --gd-warning:#f59e0b; --gd-error:#e11d48; /* Shadows & radii */ --gd-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); --gd-radius-lg: 16px; --gd-radius-md: 12px; --gd-radius-sm: 10px; /* Typography */ --gd-font-sans: ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"; --gd-font-size-hero: clamp(28px, 3.3vw, 40px); --gd-font-size-h1: clamp(24px, 2.6vw, 32px); --gd-font-size-h2: clamp(20px, 2vw, 24px); --gd-font-size-body: 16px; /* Spacing scale */ --gd-space-1: 4px; --gd-space-2: 8px; --gd-space-3: 12px; --gd-space-4: 16px; --gd-space-5: 20px; --gd-space-6: 24px; --gd-space-8: 32px; --gd-space-10: 40px; --gd-space-12: 48px; --gd-maxw: 1120px; } /* Optional Dark Mode: set */ :root[data-theme="dark"]{ --gd-bg:#0c1016; --gd-surface:#0f141b; --gd-elev:#151b25; --gd-text:#e6eaf0; --gd-muted:#a9b2c1; --gd-border:#1f2a37; --gd-shadow: 0 10px 28px rgba(0,0,0,0.45); --gd-primary-100:#113c2c; --gd-accent-100:#162142; } /* ---- Base ---- */ *{ box-sizing: border-box; } html,body{ padding:0; margin:0; background: var(--gd-bg); color: var(--gd-text); font-family: var(--gd-font-sans); font-size: var(--gd-font-size-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img{ max-width: 100%; display:block; } a{ color: var(--gd-accent); text-decoration: none; } a:hover{ text-decoration: underline; } hr{ border:0; height:1px; background: var(--gd-border); } /* ---- Layout ---- */ .container{ width:100%; max-width: var(--gd-maxw); margin-inline: auto; padding-inline: var(--gd-space-6); } .section{ padding: var(--gd-space-12) 0; } .stack > * + *{ margin-top: var(--gd-space-6); } .grid{ display:grid; gap: var(--gd-space-6); } @media (min-width: 768px){ .grid-2{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } } /* ---- Header ---- */ .header{ position: sticky; top:0; z-index: 50; background: var(--gd-bg); border-bottom: 1px solid var(--gd-border); backdrop-filter: saturate(120%) blur(8px); } .nav{ display:flex; align-items:center; justify-content:space-between; padding: var(--gd-space-4) 0; } .brand{ display:flex; align-items:center; gap: var(--gd-space-3); font-weight: 700; letter-spacing: .2px; } .brand-mark{ width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center; background: linear-gradient(135deg, var(--gd-primary), var(--gd-primary-600)); color:#fff; font-weight:700; } /* ---- Hero ---- */ .hero{ background: radial-gradient(800px 300px at 50% -10%, var(--gd-primary-100), transparent 60%), radial-gradient(600px 250px at 120% 20%, var(--gd-accent-100), transparent 60%), var(--gd-surface); border-bottom: 1px solid var(--gd-border); } .hero-inner{ text-align:center; padding: var(--gd-space-12) 0 var(--gd-space-10); } .hero h1{ margin:0 0 var(--gd-space-4); font-size: var(--gd-font-size-hero); line-height: 1.15; } .hero p{ color: var(--gd-muted); max-width: 680px; margin: 0 auto var(--gd-space-8); } /* ---- Cards ---- */ .card{ background: var(--gd-elev); border:1px solid var(--gd-border); border-radius: var(--gd-radius-lg); box-shadow: var(--gd-shadow); padding: var(--gd-space-6); } .card h3{ margin-top:0; font-size: var(--gd-font-size-h2); } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: var(--gd-space-2); padding: 12px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform .05s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; user-select: none; } .btn:active{ transform: translateY(1px); } .btn-primary{ color:#fff; background: var(--gd-primary); border-color: var(--gd-primary-600); box-shadow: 0 6px 18px rgba(31,141,95,.25); } .btn-primary:hover{ background: var(--gd-primary-600); } .btn-outline{ background: transparent; color: var(--gd-text); border-color: var(--gd-border); } .btn-outline:hover{ background: var(--gd-surface); } .cta-bar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; /* <-- center buttons horizontally */ } #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 20px; border-radius: 6px; opacity: 0; transition: opacity .3s; } #toast.show { opacity: 1; } /* ---- Badges ---- */ .badge{ display:inline-block; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--gd-primary-100); color: var(--gd-primary-600); font-weight: 600; } /* ---- Lists ---- */ .checklist{ list-style: none; padding:0; margin:0; } .checklist li{ display:flex; align-items:flex-start; gap: var(--gd-space-3); padding: 6px 0; } .check{ inline-size: 20px; block-size: 20px; border-radius: 6px; display:grid; place-items:center; flex: 0 0 auto; background: var(--gd-primary-100); color: var(--gd-primary-600); font-weight:700; } /* Ensure the 2-col layout on larger screens */ .item-row { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; } /* Make the right column behave consistently */ .item-row > :last-child { display:flex; /* qty + button side by side */ gap:8px; align-items:center; justify-content:flex-start; /* <-- left aligned */ } /* Mobile: stack to one column, keep controls left and full-width button if you want */ @media (max-width: 520px){ .item-row { grid-template-columns: 1fr; } .item-row > :last-child { justify-self:start; /* left edge of the grid */ } .item-row .btn { width:100%; } /* optional: button spans full width */ .item-row .qty { width: 84px; } /* keep qty compact so it doesn’t stretch */ } .tip-btn { border: 1px solid #ccc; background: #f9f9f9; transition: all 0.2s; } .tip-btn.active { border: 2px solid var(--gd-accent, #007bff); background: #e9f3ff; font-weight: 600; } .tip-btn:hover { border-color: var(--gd-accent, #007bff); } /* ---- Forms ---- */ .form{ display:grid; gap: var(--gd-space-4); } .input, .select, .textarea{ width:100%; padding: 12px 14px; border-radius: var(--gd-radius-sm); border:1px solid var(--gd-border); background: var(--gd-elev); color: var(--gd-text); } .input:focus, .select:focus, .textarea:focus{ outline: 2px solid var(--gd-primary); border-color: var(--gd-primary); } .help{ color: var(--gd-muted); font-size: 13px; } /* ---- Footer ---- */ .footer{ border-top:1px solid var(--gd-border); background: var(--gd-bg); color: var(--gd-muted); padding: var(--gd-space-8) 0; font-size: 14px; } /* ---- Motion preferences ---- */ @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }