/* --- Vivaldi Font Note --- */ /* To use the 'Vivaldi' font, you need to have its font files (e.g., .ttf, .woff, .woff2) hosted on your server. Then, add an @font-face rule like this at the very top of your style.css: @font-face { font-family: 'Vivaldi'; src: url('../fonts/vivaldi.woff2') format('woff2'), url('../fonts/vivaldi.woff') format('woff'), url('../fonts/vivaldi.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; /* Best practice for font loading */ /* Make sure the paths to your font files are correct. If you don't have the Vivaldi font file, consider using a similar elegant script font from Google Fonts (e.g., 'Dancing Script' or 'Great Vibes') by linking it in your HTML and then using its name in font-family. */ /* General Body and Background */ body { margin: 0; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000000; line-height: 1.2; min-height: 100vh; display: flex; /* Use flexbox to center the background-container */ align-items: flex-start; /* Align to the top of the viewport */ background-color: #a9bdff; /* Background color for areas not covered by image */ width: 100%; height: 100%; } .background-container { /* This container holds the background image and positions it */ position: relative; width: 1220px; /* Exact width from original background-size */ height: 880px; /* Exact height from original background-size */ background-image: url('../img/open-book.jpg'); background-repeat: no-repeat; background-position: left top; background-size: cover; /* Cover the entire container */ } .wrapper { /* This wrapper holds all visible page content */ width: 1074px; /* Width of the content table from original HTML */ height: 90%; /* Original height for main table, adjusted for responsiveness */ margin: 0 auto; /* Center the content wrapper horizontally */ position: relative; /* For z-index if needed, or children absolute positioning */ padding: 0 50px; /* Left and right padding to simulate original 'null' cells */ padding-top: 70px; /* Add some top padding if needed */ } /* Site Header */ .site-header { padding: 10px 0 20px 0; /* Adjust padding as needed */ text-align: left; /* Text alignment within the header */ } .main-title { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; /* Adjust size to match screenshot */ font-weight: bold; color: #333; /* Or specific color if identified from image */ } /* Main Layout Grid (Two Columns) */ .main-layout-grid { display: grid; grid-template-columns: 50% auto; /* Approximately 50% for left, auto for right */ gap: 40px; /* Space between columns */ } /* Left Column - About Me Section */ .about-me-section { grid-column: 1; /* Assign to the first column */ padding-right: 40px; /* Padding for separation */ position: relative; /* For image float */ } .profile-image { float: right; /* Float image to the right of text */ margin-left: 15px; /* Space between image and text */ margin-bottom: 15px; /* Space below image */ border: solid 2px #000000; max-width: 350px; /* Match original max-width */ width: 40%; /* Match original percentage width */ height: auto; } .about-content { font-size: 14px; text-align: justify; /* Justify text as per screenshot */ } .about-content ul { list-style: disc; /* Default disc bullets */ margin-left: 20px; /* Indent bullets */ padding-left: 0; margin-top: 15px; margin-bottom: 15px; } .about-content li { margin-bottom: 5px; /* Reduced space between list items */ } .signature { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; text-align: right; margin-top: 30px; margin-bottom: 5px; } /* Right Column */ .right-column { grid-column: 2; /* Assign to the second column */ padding-left: 20px; /* Padding for separation */ } .contact-link { font-size: 16px; text-align: right; } a { color: inherit; /* Inherit text color */ text-decoration: none; /* Keep underline for links */ } /* Pricing Section */ .pricing-section h2, .previous-work-section h2, .references-section h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: bold; margin-top: 0; margin-bottom: 10px; } .pricing-section ul { list-style: disc; /* Remove default list style */ padding-left: 0; margin-top: 0; margin-bottom: 20px; margin-left: 20px; } .pricing-section li { font-size: 16px; margin-bottom: 5px; } /* Previous Work Section (Image Scroller) */ .image-scroller-container { position: relative; width: 100%; /* Take full width of its parent column */ height: 330px; /* Fixed height from original HTML */ /* REMOVED: overflow: hidden; -- This was hiding the buttons */ margin-top: 10px; /* Adjust spacing */ } .image-list-wrapper { overflow: hidden; /* This acts as the viewport for the images */ width: 480px; /* Set to show approx 2 images based on original img width 150px * 2 */ height: 100%; position: relative; margin: 0 auto; /* Center the visible window if it's less than 100% width */ } .image-list { display: flex; transition: transform 0.5s ease-in-out; /* Smooth scroll effect */ position: absolute; /* Needed for transform */ left: 0; top: 0; height: 100%; } .image-item { flex-shrink: 0; /* Prevent items from shrinking */ width: 150px; /* Fixed width for each image item from original HTML */ /*box-sizing: border-box;*/ text-align: center; display: flex; flex-direction: column; justify-content: flex-start; /* Align content to the top within item */ align-items: center; /* Center items horizontally */ padding: 5px; /* Small padding within item */ } .image-item img { width: 150px; /* Match original image width */ height: auto; /* Maintain aspect ratio */ display: block; margin-bottom: 5px; /* Space between image and label */ border: solid 2px #000000; } .image-labels { background-color: #dddddd; padding: 3px; font-size: 12px; /* Smaller font for labels */ line-height: 1.3; width: 100%; /* Take full width of item for background */ box-sizing: border-box; border: solid; border-width: thin; } .nav-button { background-color: #000000; color: #eeeeee; font-size: 46px; /* Match original font size */ font-weight: bold; border: none; /* No border */ cursor: pointer; padding: 0; /* Remove default padding for precise sizing */ width: 50px; /* Match original button width */ height: 50px; /* Match original button height */ opacity: 0.92; position: absolute; top: 36%; /* Center vertically */ transform: translateY(-50%); /* Adjust for height */ z-index: 2; /* Ensure buttons are above images */ display: flex; /* Use flex to center the character */ justify-content: center; align-items: center; font-family: 'Vivaldi', cursive; /* Apply Vivaldi font */ } .nav-button:hover { opacity: 1; } #previous { left: -25px; /* Position relative to .image-scroller-container */ } #next { right: -25px; /* Position relative to .image-scroller-container */ } /* References Section */ .references-section { margin-top: 30px; /* Space above references */ } .references-section h2 { margin-bottom: 15px; } .reference-quote { font-size: 0.95em; font-style: italic; margin: 0; /* Reset default blockquote margin */ padding: 0; /* Reset default blockquote padding */ } .reference-quote a { text-decoration: none; /* Remove underline */ color: inherit; /* Inherit text color */ } .reference-quote cite { display: block; /* Make cite a block to move to new line */ text-align: right; font-weight: bold; font-style: normal; /* Remove italic from cite text */ margin-top: 10px; } hr { border: none; border-top: 1px solid #ccc; /* Thinner grey line */ margin: 20px 0; } /* Responsive Adjustments */ @media (max-width: 1200px) { .about-content { font-size: 0.95em; } .about-me-section, .right-column { padding: 0; /* Remove internal padding for columns when stacked */ } .background-container { background-color: #fff; background-image: none; } body { margin: 30px 0px 30px 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000000; line-height: 1.2; min-height: 100vh; display: flex; /* Use flexbox to center the background-container */ align-items: flex-start; /* Align to the top of the viewport */ background-color: #fff; /* Background color for areas not covered by image */ height: auto; } .contact-link { font-size: 14px; text-align: right; margin-bottom: 60px; } .image-item { flex-shrink: 0; /* Prevent items from shrinking */ width: 150px; /* Fixed width for each image item from original HTML */ /*box-sizing: border-box;*/ text-align: center; display: flex; flex-direction: column; justify-content: flex-start; /* Align content to the top within item */ align-items: center; /* Center items horizontally */ padding: 5px; /* Small padding within item */ } .image-item img { width: 150px; /* Match original image width */ height: auto; /* Maintain aspect ratio */ display: block; margin-bottom: 5px; /* Space between image and label */ border: solid 2px #000000; } .image-labels { background-color: #dddddd; padding: 3px; font-size: 12px; /* Smaller font for labels */ line-height: 1.3; width: 100%; /* Take full width of item for background */ box-sizing: border-box; border: solid; border-width: thin; } .image-list { display: flex; transition: transform 0.5s ease-in-out; /* Smooth scroll effect */ position: absolute; /* Needed for transform */ left: 0; top: 0; height: 100%; } .image-list-wrapper { overflow: hidden; /* This acts as the viewport for the images */ width: 100%; /* Set to show approx 2 images based on original img width 150px * 2 */ height: 100%; position: relative; margin: 0 auto; /* Center the visible window if it's less than 100% width */ } .image-scroller-container { position: relative; width: 100%; /* Take full width of its parent column */ height: 330px; /* Fixed height from original HTML */ /* REMOVED: overflow: hidden; -- This was hiding the buttons */ margin-top: 10px; /* Adjust spacing */ } .main-layout-grid { display: flow; grid-template-columns: 50% auto; /* Approximately 50% for left, auto for right */ gap: 40px; /* Space between columns */ } .main-title { font-size: 20px; } .nav-button { background-color: #000000; color: #eeeeee; font-size: 46px; /* Match original font size */ font-weight: bold; border: none; /* No border */ cursor: pointer; padding: 0; /* Remove default padding for precise sizing */ width: 50px; /* Match original button width */ height: 50px; /* Match original button height */ opacity: 0.92; position: absolute; top: 36%; /* Center vertically */ transform: translateY(-50%); /* Adjust for height */ z-index: 2; /* Ensure buttons are above images */ display: flex; /* Use flex to center the character */ justify-content: center; align-items: center; font-family: 'Vivaldi', cursive; /* Apply Vivaldi font */ } .nav-button:hover { opacity: 1; } #next { right: -25px; /* Position relative to .image-scroller-container */ } #previous { left: -25px; /* Position relative to .image-scroller-container */ } .profile-image { float: none; /* Remove float for better stacking */ margin: 0 10px 20px 10px; /* Center image and add space below */ width: 90%; /* Allow image to be larger on its own line */ } .signature { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; text-align: right; margin-top: 0px; margin-bottom: 5px; } .wrapper { width: 90%; height: auto; padding: 0px 20px 20px; } }