/* ========================================================= Global variables – change these ONCE to affect all pages ========================================================= */ :root{ --font-family: "Kalam", "Trebuchet MS", Arial, sans-serif; --base-font-size: 20px; --line-height: 1.55; --text-color: #222; --bg-color: #ffffff; --nav-bg: #f4f4f4; --nav-border: #ccc; --nav-link: #333; --nav-hover: #ddd; --nav-active-bg: #333; --nav-active-color: #fff; --page-max-width: 900px; } /* Prevent weird overflow from padding/borders */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================= Base page styling (ALL pages, INCLUDING Dad/Home/etc.) ========================================================= */ html, body { margin: 0; padding: 0; background: var(--bg-color); color: var(--text-color); font-family: var(--font-family); font-size: var(--base-font-size); line-height: var(--line-height); } /* ========================================================= Content page layout (Dad / Mom / etc.) ========================================================= */ .page { max-width: var(--page-max-width); margin: 0 auto; padding: 28px 18px 40px; } .page h1, .page h2 { margin: 0 0 12px 0; } .page p { margin: 0 0 12px 0; } /* ========================================================= Family photo (Home page) ========================================================= */ .family-photo { display: block; width: 100%; max-width: 700px; max-height: 55vh; object-fit: contain; height: auto; margin: 24px auto 0 auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); } /* ========================================================= OUTER SHELL ONLY (index.html) — iframe layout + no double scrollbars Apply only when ========================================================= */ body.shell { height: 100vh; overflow: hidden; /* important: shell never scrolls */ } body.shell .container { display: flex; flex-direction: column; height: 100vh; } body.shell .topnav { background-color: var(--nav-bg); display: flex; justify-content: flex-start; border-bottom: 1px solid var(--nav-border); flex-shrink: 0; } body.shell .topnav a { text-decoration: none; color: var(--nav-link); padding: 10px 15px; display: block; cursor: pointer; border-radius: 10px; margin: 6px 4px; } body.shell .topnav a:hover { background-color: var(--nav-hover); } body.shell .topnav a.active { background-color: var(--nav-active-bg); color: var(--nav-active-color); } body.shell .main { flex: 1; overflow: hidden; /* shell doesn't scroll */ } body.shell iframe { width: 100%; height: 100%; border: none; display: block; /* removes tiny baseline gap */ } /* ========================================================= Gift List Form (Dad’s List – Phase 2) ========================================================= */ .gift-form { max-width: 500px; margin-top: 20px; } .gift-form label { display: block; margin-bottom: 6px; font-weight: bold; } .gift-form input { width: 100%; padding: 10px; font-size: 1em; border-radius: 8px; border: 1px solid #ccc; margin-bottom: 12px; font-family: var(--font-family); } .gift-form button { padding: 10px 16px; font-size: 1em; border-radius: 8px; border: none; cursor: pointer; background-color: var(--nav-active-bg); color: var(--nav-active-color); font-family: var(--font-family); } .gift-form button:hover { opacity: 0.9; } /* ========================================================= Gift list display ========================================================= */ .gift-list-wrap { margin-top: 22px; max-width: 650px; } .gift-list { list-style: none; padding: 0; margin: 0; } .gift-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 10px; background: #fff; } .gift-text { flex: 1; } .gift-delete { padding: 8px 12px; border-radius: 8px; border: 1px solid #bbb; background: #f6f6f6; cursor: pointer; font-family: var(--font-family); } .gift-delete:hover { background: #eee; } .gift-empty { margin-top: 10px; opacity: 0.8; } /* ========================================================= Mobile adjustments ========================================================= */ @media (max-width: 768px) { :root{ --base-font-size: 18px; } body.shell .topnav { flex-wrap: wrap; } body.shell .topnav a { flex: 1 1 auto; text-align: center; } .family-photo { max-width: 100%; } }