/* ============================================================ Jessica Savitch — Single-Page Stylesheet ============================================================ This page now has two visually distinct zones sharing one document: the black hero (name/photo panels) and the white biography content below. Each section sets its own explicit background-color rather than relying on , since two different background colors can't both come from one shared body rule. ============================================================ */ /* ------------------------------------------------------------ Base / Reset ------------------------------------------------------------ */ * { box-sizing: border-box; } body { margin: 0; color: #1a1a1a; font-family: Georgia, "Times New Roman", serif; line-height: 1.6; } a { color: #1a6faf; text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ HERO SECTION (black) — name/photo panels ============================================================ */ .home-container { display: flex; width: 100%; background-color: #000000; } .panel { position: relative; width: 50%; aspect-ratio: 1920 / 1710; background-color: #000000; overflow: hidden; } .panel-bg { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------ Nav Links (Biography / Links) Real, ordinary tags, positioned absolutely over the spot "Biography" and "Links" already occupy in heading-left.jpg. Percentages are converted directly from Norm's exact measured pixel coordinates (1065,120 to 1370,200 for Biography; 1500,120 to 1670,200 for Links, against the 1920x1710 image), so they scale correctly with the image at any screen size. Both now jump to same-page anchors rather than a second page. ------------------------------------------------------------ */ .home-nav { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .nav-link { position: absolute; color: transparent; display: block; } .nav-biography { left: 55.47%; top: 7.02%; width: 15.89%; height: 4.68%; } .nav-links { left: 78.125%; top: 7.02%; width: 8.85%; height: 4.68%; } /* ------------------------------------------------------------ Visually Hidden Text Standard accessible-hiding technique: removed from the visual layout but still fully present for screen readers and search engines. Must match the image content exactly. ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ BIOGRAPHY CONTENT (white) — continues directly below the hero ============================================================ */ .page-container { width: 90%; max-width: 900px; margin: 0 auto; padding: 70px 0 60px 0; /* extra top padding = breathing room below the hero */ background-color: #ffffff; } /* ------------------------------------------------------------ Top Navigation (Videos / Books / Photos) ------------------------------------------------------------ */ .top-nav { margin-bottom: 30px; } .top-nav a { color: #1a6faf; font-weight: bold; margin-right: 25px; font-size: 1.05em; } /* ------------------------------------------------------------ Page Title ------------------------------------------------------------ */ .page-title { font-size: 2em; margin-bottom: 30px; color: #1a6faf; border-bottom: 2px solid #1a1a1a; padding-bottom: 10px; } /* ------------------------------------------------------------ Biography Section Text ------------------------------------------------------------ */ .bio-section h2 { font-size: 1.4em; margin-top: 45px; margin-bottom: 15px; color: #1a6faf; } .bio-section p { margin: 0 0 18px 0; } .bio-section ul { margin: 0 0 18px 0; padding-left: 25px; } .bio-section li { margin-bottom: 10px; } /* ------------------------------------------------------------ Editor's Note ------------------------------------------------------------ */ .editors-note { margin-top: 50px; padding-top: 30px; border-top: 1px solid #ccc; } .editors-note h2 { font-size: 1.4em; margin-bottom: 15px; color: #1a6faf; } .editors-note p { margin: 0 0 18px 0; } /* ------------------------------------------------------------ Section Dividers (heavy rule between Videos / Books / Photos) ------------------------------------------------------------ */ .section-divider { border: none; border-top: 3px solid #1a1a1a; margin: 50px 0; } /* ------------------------------------------------------------ Videos Section ------------------------------------------------------------ */ .section-heading { font-size: 1.3em; color: #1a6faf; margin-bottom: 20px; } .video-list { list-style: none; margin: 0; padding: 0; } .video-list li { margin-bottom: 16px; } .video-list .runtime { color: #555; font-weight: normal; } .video-list a { font-weight: bold; font-size: 1.05em; } /* ------------------------------------------------------------ Books Section ------------------------------------------------------------ */ .books-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; margin-bottom: 25px; } .amazon-logo { width: 140px; height: auto; } .book-cover { width: 140px; height: auto; border: 1px solid #999; } .book-entry { margin-bottom: 14px; } .book-entry .book-title { font-style: italic; } /* ------------------------------------------------------------ Photos Section Two independent columns (left/right) so each column's height is determined only by its own two photos, not matched to the other column. ------------------------------------------------------------ */ .photo-grid { display: flex; gap: 30px; margin-bottom: 40px; } .photo-col { display: flex; flex-direction: column; gap: 30px; flex: 1; } .photo-grid figure { margin: 0; } .photo-grid img { width: 100%; height: auto; display: block; border: 1px solid #999; } .photo-grid figcaption { margin-top: 8px; font-size: 0.95em; color: #333; } /* ------------------------------------------------------------ Final Large Photo (uncaptioned, full resolution) ------------------------------------------------------------ */ .final-photo { text-align: center; margin-bottom: 40px; } .final-photo img { max-width: 100%; height: auto; border: 1px solid #999; } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .site-footer { font-style: italic; color: #555; font-size: 0.9em; } /* ------------------------------------------------------------ Mobile Breakpoint ------------------------------------------------------------ */ @media (max-width: 600px) { .home-container { flex-direction: column; } .panel { width: 100%; } .photo-grid { flex-direction: column; } .photo-col { display: contents; } .photo-a { order: 1; } .photo-b { order: 2; } .photo-c { order: 3; } .photo-d { order: 4; } .top-nav a { margin-right: 15px; font-size: 1em; } .page-title { font-size: 1.6em; } }