/* public/css/main.css Design system for Daina's Diner. Aesthetic: clean editorial, warm, food-magazine quality. Fonts: Playfair Display (display) + DM Sans (body) Loaded via Google Fonts in each HTML page's . */ /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #FAFAF8; --bg-card: #FFFFFF; --text: #1A1A18; --text-muted: #6B6B67; --accent: #C8622A; --accent-hover: #A84E20; --border: #E8E8E4; --border-strong: #D0D0CA; /* Section badge colors — muted earth tones */ --badge-main: #7A4A2A; --badge-starter: #3A6B4A; --badge-dessert: #6B3A6B; --badge-bread: #7A6B2A; --badge-drink: #2A5A7A; --badge-other: #5A5A56; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --radius: 6px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } img { max-width: 100%; display: block; } /* --- Layout --- */ .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; } /* --- Nav --- */ .nav { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 100; } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 1100px; margin: 0 auto; padding: 0 24px; } .nav__brand { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.01em; } .nav__brand:hover { color: var(--accent); text-decoration: none; } .nav__links { display: flex; align-items: center; gap: 24px; list-style: none; } .nav__links a { color: var(--text-muted); font-size: 0.9rem; font-weight: 500; transition: color 0.15s; } .nav__links a:hover { color: var(--text); text-decoration: none; } .nav__links .nav__logout { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; font-family: var(--font-body); padding: 0; transition: color 0.15s; } .nav__links .nav__logout:hover { color: var(--text); } /* --- Page Header --- */ .page-header { padding: 48px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 40px; } .page-header__title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .page-header__subtitle { color: var(--text-muted); margin-top: 8px; font-size: 1rem; } /* --- Search Bar --- */ .search-wrap { margin-bottom: 40px; } .search-bar { position: relative; max-width: 520px; } .search-bar__input { width: 100%; padding: 12px 16px 12px 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.975rem; background: var(--bg-card); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; } .search-bar__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,98,42,0.12); } .search-bar__input::placeholder { color: var(--text-muted); } .search-bar__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; width: 18px; height: 18px; } /* --- Section Filter --- */ .section-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .section-filter__btn { padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .section-filter__btn:hover { border-color: var(--accent); color: var(--accent); } .section-filter__btn--active { background: var(--accent); border-color: var(--accent); color: white; } /* --- Recipe Grid --- */ .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } /* --- Recipe Card --- */ .recipe-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s; box-shadow: var(--shadow); } .recipe-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); text-decoration: none; color: inherit; } .recipe-card__section { display: inline-block; } .recipe-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .recipe-card__meta { color: var(--text-muted); font-size: 0.825rem; margin-top: auto; } /* --- Section Badge --- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .badge--main { background: #F5EAE0; color: var(--badge-main); } .badge--starter { background: #E0F0E5; color: var(--badge-starter); } .badge--dessert { background: #F0E0F0; color: var(--badge-dessert); } .badge--bread { background: #F0EDE0; color: var(--badge-bread); } .badge--drink { background: #E0EDF5; color: var(--badge-drink); } .badge--other { background: #EBEBEA; color: var(--badge-other); } /* --- Recipe Page --- */ .recipe-page { padding: 48px 0 80px; } .recipe-page__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 0.875rem; margin-bottom: 32px; transition: color 0.15s; } .recipe-page__back:hover { color: var(--text); text-decoration: none; } .recipe-page__header { margin-bottom: 40px; } .recipe-page__title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 12px; } .recipe-page__meta { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.875rem; } .recipe-page__body { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } /* --- Ingredients Sidebar --- */ .ingredients { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 80px; } .ingredients__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .ingredients__list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .ingredients__list li { font-size: 0.925rem; line-height: 1.5; padding-left: 16px; position: relative; color: var(--text); } .ingredients__list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-size: 0.75rem; top: 3px; } /* --- Instructions --- */ .instructions__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.01em; } .instructions__body { font-size: 1rem; line-height: 1.8; color: var(--text); white-space: pre-wrap; } .instructions__source { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.825rem; color: var(--text-muted); } /* --- Login Page --- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); } .login-card__brand { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: 8px; letter-spacing: -0.02em; } .login-card__tagline { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 36px; } .login-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 28px; } .login-tab { flex: 1; padding: 10px; text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-body); transition: all 0.15s; } .login-tab--active { color: var(--accent); border-bottom-color: var(--accent); } .login-panel { display: none; } .login-panel--active { display: block; } /* --- Forms --- */ .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 6px; color: var(--text); } .form-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.975rem; background: var(--bg-card); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,98,42,0.12); } .form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.925rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; text-decoration: none; line-height: 1; } .btn--primary { background: var(--accent); color: white; } .btn--primary:hover { background: var(--accent-hover); color: white; text-decoration: none; } .btn--primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn--secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border-strong); } .btn--secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .btn--danger { background: #DC2626; color: white; } .btn--danger:hover { background: #B91C1C; color: white; text-decoration: none; } .btn--full { width: 100%; } .btn--sm { padding: 6px 14px; font-size: 0.825rem; } /* --- Alerts --- */ .alert { padding: 12px 16px; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 16px; } .alert--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } .alert--success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; } .alert--info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; } /* --- Empty State --- */ .empty-state { text-align: center; padding: 80px 24px; color: var(--text-muted); } .empty-state__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin-bottom: 8px; } /* --- Loading Skeleton --- */ .skeleton { background: linear-gradient(90deg, #F0F0EC 25%, #E8E8E4 50%, #F0F0EC 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* --- Utility --- */ .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- Responsive --- */ @media (max-width: 768px) { .page-header__title { font-size: 1.75rem; } .recipe-page__title { font-size: 1.875rem; } .recipe-page__body { grid-template-columns: 1fr; } .ingredients { position: static; } .recipe-grid { grid-template-columns: 1fr; } .login-card { padding: 36px 24px; } } /* Auth gate — hide page content until session is verified */ body:not(.authenticated) .container, body:not(.authenticated) .nav { visibility: hidden; }