/* ======================================================================= */ /* SYSTEM FILE: styles.css */ /* VERSION: cwc_styles_v1.0 */ /* LAST UPDATED: June 29, 2026 */ /* ======================================================================= */ /* ======================================================================= */ /* 1. GLOBAL SETTINGS */ /* The top-level defaults for the entire website, including font families, */ /* color variables, and box-sizing rules. */ /* ======================================================================= */ /* Does it feel better to have one rule handling the whole site, or would you like to double-check how this affects your "Parent-Child" key? */ /* GLOBAL SETTINGS */ /* The "20px" Global Scale Check By setting html { font-size: 20px; }, you have made every rem unit on the site significantly larger. Your .instruction-box at 1.4rem is now 28px. Your h1 at 3rem is now 60px. On your 27-inch iMac, this will look grand and cinematic. On smaller laptops, it might feel a bit "loud." This is a bold design choice—it's very "Art Gallery"—but just be prepared for how much screen real estate that 60px gold heading will take up! I don't want the site to look terrible on small screens, should I back this down to 16px or so? These are great questions. Balancing a high-end display like your 27-inch iMac with smaller devices is the "constant mix" of web development. */ html { font-size: 20px; /* Optimal for 27-inch iMac */ } /* ======================================================================= */ /* 2. GLOBAL BASE PAGE SETUP */ /* Default styling for the and main containers, setting the */ /* background color and default text rendering. */ /* ======================================================================= */ /* GLOBAL BASE PAGE SETUP - No Flexbox needed for the main container */ body { background-color: #000000; color: #ffffff; font-family: 'Baskerville', 'Palatino', 'Garamond', 'Georgia', 'Times New Roman', serif; /* could use "'Helvetica', sans-serif;" etc, which would look more modern, but a serif font is more elegant and classic */ line-height: 1.8; margin: 0; text-align: center; } /* GLOBAL LINK TRANSITION - a fade timer for links */ /* This targets every single link on the entire website. */ /* It ensures a smooth 0.3s fade for any color changes on hover. */ /* Here's how this site's Key Items are affected: */ /* nav a: White menu links at the top will now fade smoothly if you add a hover color. */ /* .card a: These will still fade from Gold to White over 0.3 seconds. */ /* .nav-links a: Red "Next/Previous" links will now have that same professional fade. */ /* footer a: Even the small links at the very bottom will behave exactly the same way. */ a { transition: 0.3s; /* TIMER: causes a slow fade transition for every link on site */ text-underline-offset: 8px; /* Keeps the line from touching the letters */ text-decoration-thickness: 1px; /* Keeps the line elegant and thin */ } /* ======================================================================= */ /* 3. GLOBAL SITE HEADER & MAIN MENU */ /* Controls the main navigation bar, the site-wide top menu links, */ /* and the specific header padding adjustments. */ /* ======================================================================= */ /* Specific Header adjustment for Sculpture Hubs */ header { /* The Global header (the site-wide top menu) */ padding: 40px 20px; } nav { background: #111111; /* subtle "offset black" #111111 contrasts to bgcolor black */ padding: 40px 0; /* Adds 40px space top and bottom, 0px to sides of nav bar */ text-align: center; /* Keeps your links centered in the nav bar */ background-color: #000000; /* Ensures the background stays solid black */ border-bottom: 2px solid #CC9900; /* Exquisite definitive bottom line */ margin-bottom: 40px; /* pushes content away from the gold line, uncluttered look */ } /* nav a - Location: Top (Header). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: site-wide navigation bar (horizontal menu at the very top). Action: styles the main menu items like Home, Sculptures, and Contact. Does: makes these links White Bold Uppercase, a website GPS visitors see 1st. Functional Role: Site GPS: Home, About, Contact. Styling goal: White/Bold/Caps. Constant and clear across every page. */ /* "nav a" looks for the primary navigation bar (the site-wide top menu) and styles those specific links. in my CSS code here, it makes those top links white, bold, ALL CAPS */ nav a { /* "nav a" targets 2 things at once: the container & the link inside it. */ color: #ffffff; /* white menu links */ text-decoration: none; margin: 0 15px; font-weight: bold; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; } nav a:hover { color: #CC9900; /* makes the white menu links turn gold to match the cards */ } /* nav a.active -- When a user is on a "nav a.active" page, the menu item for that page turns gold, bold, and underlined in gold too, with a sophisticated underline offset and thin underline -- if this looks cheap, we can remove the underline and bold later but keep the color so that only the color changes for the active page in the top site menu */ nav a.active { color: #CC9900; font-weight: bold; text-decoration: underline; } /* ======================================================================= */ /* 4. NARRATIVE & STORY NAVIGATION (BOTTOM OF PAGE) */ /* Styling for the "Next" and "Previous" links used to navigate between */ /* individual stories or sculpture portfolio pages. */ /* ======================================================================= */ /* NAVIGATION LINKS (NARRATIVE NAVIGATION) (Used on Charles.html, Crabbing, etc.) */ /* These are the bottom-of-the-page story links */ .nav-links { grid-column: 1 / -1; text-align: center; padding-top: 40px; border-top: 1px solid #333; margin-top: 20px; } /* .nav-links a - Location: Bottom (Story). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: navigation area at bottom of the narrative or story pages. Action: targets the specific "Previous" and "Next" links ("Narrative Navigation"). Does: makes links Red (#FF0000) & larger than top menu, turn page & browse chapters. Functional Role: Flow: Moving between story chapters. Styling goal: Red. High visibility to help the user "turn the page." */ /* "nav-links a" looks for the narrative navigation (the "Next" and "Previous" links at the bottom of Alyse's story pages). in my CSS, this makes those specific links Red (#FF0000) */ .nav-links a { /* "nav-links a" targets 2 things: the container & link inside it. */ color: #FF0000; font-weight: bold; text-decoration: none; margin: 0 15px; } .nav-links a:hover { text-decoration: underline; color: #CC9900; } /* ======================================================================= */ /* 5. SITE ARCHITECTURE - PAGE TYPES & LOGIC */ /* ALYSE'S SCULPTURE COLLECTION: Definitions for Navigation Indexes */ /* versus individual Sculpture Portfolios. */ /* ======================================================================= */ /* *********************** PAGE TYPES AND LOGIC ************************ */ /* SITE ARCHITECTURE - PAGE TYPES & LOGIC - ALYSE'S SCULPTURE COLLECTION */ /* 1. NAVIGATION INDEXES: Parent menus (hubs or directories) used to */ /* categorize and route to specific sculptures or collections. */ /* "Directories" - like ".directory-title" */ /* 2. SCULPTURE PORTFOLIOS: Individual detail pages showcasing */ /* specific artwork, photography, and narrative. */ /* "Featured Items" - like ".layout-grid" */ /* *************************** PAGE HEADINGS *************************** */ /* INSTRUCTIONS FOR SCULPTURE MENU PAGES VS INDIVIDUAL PORTFOLIO PAGES */ /* 1. HEADINGS FOR SCULPTURE MENU PAGES (NAVIGATION INDEX) */ /* If you want a page to be a "Navigation Index" (List): */ /* You type:

Sculptures

*/ /* Computer sees a class and switches to White ALL CAPS and Spaced Out. */ /* 2. HEADINGS FOR SCULPTURE INDIVIDUAL PORTFOLIO PAGES */ /* If you want a page to be a "Sculpture Portfolio" (Individual Piece): */ /* You just type:

Papa John and Me

*/ /* The computer sees no special class, so it makes it Gold and Italic. */ /* ======================================================================= */ /* 6. HEADINGS */ /* Typography for h1 and h2 tags, including the .directory-title */ /* alternative used for the white, spaced-out menu titles. */ /* ======================================================================= */ /* HEADINGS */ /* NOTE currently the h1 is set to Gold (#CC9900) in this Master "styles.css". */ /* NOTE the red color used elsewhere is Red (#FF0000). */ /* NOTE if I want any page's h1 to be Red instead, I can either: */ /* NOTE (a) change it here in the Master "styles.css" to change it on ALL pages, or, */ /* NOTE (b) or, on the individual file where I want it to be a different color, */ /* NOTE simply add style="color: #FF0000;" directly to the

tag in that one file */ /* NOTE such as:

*/ /* 3. The Heading Color Conflict In Section 6, you have a note about making headings Red. Problem: You have h2 set to Red (#FF0000) globally. However, in Section 15 (Contact Form), you have .contact-box h2 set to Gold (#CC9900). The Result: This is actually a "Good Conflict." Because .contact-box h2 is more specific, your contact header will be Gold, but every other h2 on the 34 pages will be Red. The Check: Is that what you want? If you want all "Subtitle" style headings to be Red, you’re all set. If you wanted the Contact form to match the other h2s, you'd need to remove the Gold rule from Section 15. */ h1 { /* This is the "Global Standard (Option A)", the default rule for heading1's" */ /* Alt heading is the newer "Navigation Hub (Option B)", .directory-title */ color: #CC9900; /* gold color */ font-size: 3rem; /* font size 3rem = ~60px on computer screen */ font-style: italic; /* italic font */ margin-top: 0; } /* DIRECTORY HEADINGS: Option B (White, Uppercase, Spaced) */ /* Used for master menus like Sculptures and Sculpture Series */ /* This .directory-title is an alternative to the default "h1" heading */ /* What this does is makes menu titles White, Uppercase (ALL CAPS), and Spaced Out */ /* see the bottom of this document for instructions on how to use this feature */ /* One "Pro Tip" for the iMac Display Your .directory-title uses !important on the color and font-style. color: #ffffff !important; While this works, it's usually a "last resort" in coding. You need it here because your global h1 rule is so strong. Since you can't see the site yet, keep it for now— it's your "safety net" to ensure those hub titles stay white and architectural. */ .directory-title { color: #ffffff !important; /* Forces the text to White */ text-transform: uppercase; /* Forces ALL CAPS */ font-style: normal !important; /* Forces "normal", turns off Master Italic setting */ font-size: 2.5rem; /* Scaled for a 27-inch iMac (approx 50px) */ letter-spacing: 2px; /* Adds that wider, architectural spacing and feel */ font-weight: bold; margin-top: 50px; text-align: center; } h2 { color: #FF0000; font-size: 1.8rem; text-transform: uppercase; border-bottom: 1px solid #333; display: inline-block; padding-bottom: 5px; margin-top: 40px; } /* ======================================================================= */ /* 7. LAYOUTS */ /* The structural blueprints of the site, including .layout-grid, */ /* the .series-container (Hub Grid), and .card styling. */ /* ======================================================================= */ /* LAYOUTS */ /* ========================================= */ /* Layout: SCULPTURE & NARRATIVE LAYOUT */ .layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 20px; text-align: left; } /* ========================================= */ /* Layout: HUB GRID LAYOUT */ /* A modern flexible table, used on index.html for the main series cards */ .series-container { display: grid; max-width: 1100px; margin: 50px auto; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; padding: 20px; } /* Layout: CARDS IN HUB GRID LAYOUT */ /* Card styling for the links inside that HUB GRID container */ .card { border: 1px solid #333; padding: 30px; text-align: center; transition: 0.3s; /* TIMER: KEEP this so the BOX BORDER will fade smoothly */ } /* .card a - Location: Middle (Home). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: "cards" on the home page (like "Icons of Charleston"). Action: styles only the "View Collection" links. Does: makes these links Gold, sophisticated, primary "call to action" on main page. Functional Role: Galleries: Entrance to her specific collections. Styling goal: Gold. Acts as a "Call to Action" that feels like a gallery plaque. */ .card a { /* "card a" targets 2 things at once: the container & the link inside it. */ color: #CC9900; /* Use the same Gold as the headings, formerly white #ffffff */ text-decoration: none; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; /* Adds a bit of that architectural feel */ } /* .card:hover handles the "frame" of the box (turning the border Gold). */ .card:hover { /* Makes border of box turn gold when you hover over the card */ border-color: #CC9900; background: #111111; /* #111111 slightly lighter black than orig #0a0a0a for lift */ } /* .card a:hover" handles the specific text color of the link (turning it White). */ .card a:hover { /* This makes the gold link turn white when the mouse touches it */ color: #ffffff; text-decoration: underline; } .card h3 { color: #FF0000; margin-top: 0; } /* ========================================= */ /* Layout: HERO SECTION: Unique to index.html for the main introduction */ /* "HERO is the web development industry term meaning "top of main page, high-impact" */ /* This section uses large typography and introduces the overall purpose of the site */ .hero { text-align: center; padding: 100px 20px; border-bottom: 1px solid #222; } .hero h1 { color: #CC9900; font-size: 3.5rem; /* Matches your 20px base scaling */ margin: 0; letter-spacing: 2px; } .hero p { font-style: italic; font-size: 1.5rem; /* Scaled up for iMac readability */ color: #aaa; } .hero .subtitle { font-style: italic; font-size: 1.5rem; color: #aaa; margin-bottom: 5px; /* Dials in how much space is below the subtitle */ } .hero .mission { font-size: 1.2rem; color: #aaa; margin-top: 5px; /* Dials in how much space is above the mission statement */ } /* ========================================= */ /* Layout: GALLERY GRID */ /* Used for pages with multiple views of one sculpture (like angels.html) */ /* This grid makes photos sit side-by-side on computer, but stack vertically on a phone */ /* Specialty Layout for pages like angels.html with several views of a single sculpture */ /* NOTE that this can be re-used on other pages just by using the class name */ /* The class name is called this way, simply:
*/ .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1200px; margin: 40px auto; padding: 0 20px; } .image-grid img { width: 100%; height: auto; border: 1px solid #333; transition: 0.3s; /* TIMER: Keep this code, it applies to a hover glow for images */ } .image-grid img:hover { border-color: #CC9900; } /* ======================================================================= */ /* 8. IMAGE STANDARDIZATION */ /* Global rules for images and the specialty .image-grid used for */ /* multi-view sculpture galleries. */ /* ======================================================================= */ /* IMAGE STANDARDIZATION */ .image-side img, .grid img, .image-container img { width: 100%; max-width: 600px; height: auto; border: 1px solid #222; margin-bottom: 20px; display: block; } /* ======================================================================= */ /* 9. MENU & LIST LAYOUT */ /* Formatting for the .sculpture-list and other bulleted or link-based */ /* menus found on the hub pages. */ /* ======================================================================= */ /* MENU & LIST LAYOUT */ .list-container { max-width: 800px; margin: 40px auto; list-style: none; padding: 0; } .list-container li { margin: 25px 0; } /* .list-container a - Location: Middle (Story). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: main wrapper for the story pages. Action: targets any link inside a narrative or story block. Does: ensures links in a story are padded, w/good color against black background. Functional Role: Narrative: Links tucked inside her stories/text. Styling goal: Functional. Ensures links within paragraphs don't vanish. */ .list-container a { color: #ffffff; text-decoration: none; font-size: 1.5rem; } .list-container a:hover { color: #CC9900; text-decoration: underline; } /* ========================================= */ /* Custom list for Navigation Index pages like the Sculptures.html page */ .sculpture-list { max-width: 700px; margin: 20px auto; list-style: none; padding: 0; } .sculpture-list li { margin: 25px 0; } /* .sculpture-list a - Location: Middle (List). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: specific section with individual sculpture names list (like Spirit). Action: styles the names of the sculptures themselves. Does: removes default blue underline, ensures a clean pro list of sculptures. Functional Role: Catalog: Individual titles of her art pieces. Styling goal: Clean/No Underline. Makes the list of titles look professional. */ .sculpture-list a { color: #ffffff; text-decoration: none; font-size: 1.6rem; /* Specifically larger for menu visibility */ transition: 0.3s; /* TIMER: Keep this code, it applies to a hover glow for images */ } .sculpture-list a:hover { color: #CC9900; text-decoration: underline; } /* ======================================================================= */ /* 10. TYPOGRAPHY - SPECIAL BLOCKS */ /* Reusable styles for callouts, quotes, narratives, poetry, lyrics, and */ /* emphasized text blocks, optimized for readability and elegance. */ /* ======================================================================= */ /* --- 10A: GLOBAL HTML TAGS (The Foundation) --- */ /* --- Global Utility: Simple Bold --- */ b, strong, .text-bold { font-weight: 700; color: #ffffff; } /* --- Global Utility: Simple Italics --- */ i, em, .italic { font-style: italic; letter-spacing: 0.5px; /* Makes italics more readable */ } /* --- 10B: SEMANTIC UTILITIES (Specific Meanings) --- */ /* Sculpture Titles (Alyse's Masterpieces) */ .sculpture-title { font-style: italic; letter-spacing: 0.5px; /* Makes italics more readable */ color: #ffffff; /* White but can change to Gold (#CC9900) site-wide later if desired */ } /* Press & Publications (Newspapers/Magazines) */ .publication { font-style: italic; letter-spacing: 0.5px; /* Makes italics more readable */ opacity: 0.9; /* Subtle "ink" look */ } /* GLOBAL UTILITY: EMPHASIS (Within Text) */ .emphasis { font-weight: 700; /* Strong bold */ text-transform: uppercase; letter-spacing: 2px; /* Tighter for inline use, the seret to making CAPS look elegant */ color: #CC9900; /* Optional: Use your gold for theme names */ } /* --- THEME/SERIES LABELS (For Gallery Organization) --- */ /* We'll start with Spaced-Out CAPS (The Gallery Look) */ .theme-label { text-transform: uppercase; letter-spacing: 3px; /* Airier for "Category" headers */ font-weight: 600; /* Semi-bold so it doesn't get too "chunky" */ color: #CC9900; /* Gold */ } /* --- 10C: TEXT BLOCKS (Layout-heavy styles) --- */ /* Narrative Prose - 1.4rem, longer stories, e.g., "Papa John" or "Crabbing at Dusk" */ .story-text { /* formerly called .story */ font-size: 1.4rem; line-height: 1.8; margin: 0 auto 25px auto; /* margins combined: top-right-bottom-left */ text-align: justify; /* "justify" for clean book look vs "left" */ max-width: 900px; /* limits width of lines */ } /* Poetry & Lyrics - 1.4rem + italics + linebreaks, e.g., "September Eleventh" */ .verse-text { /* formerly called .verse */ font-size: 1.4rem; line-height: 1.8; font-style: italic; /* auto italicizes verses */ white-space: pre-line; /* respects line breaks in the verse */ text-align: center; /* keeps verses distinguished from stories */ margin: 0 auto 25px auto; /* margins combined: top-right-bottom-left */ max-width: 800px; } /* Featured Quotes - e.g., About Page, Alyse's personal quotations */ .quote { font-size: 1.3rem; line-height: 1.5; /* can be adjusted down if needed */ font-style: italic; color: #FFCC99; /* Artist's Flesh (Peach), can change if needed */ text-align: center; margin: 50px 0; padding: 20px 0; /* the border-top and border-bottom make the quote feel "framed" */ border-top: 1px solid rgba(255, 218, 185, 0.3); /* Transparent peach line */ border-bottom: 1px solid rgba(255, 218, 185, 0.3); /* Peach line */ } /* ======================================================================= */ /* 11. UTILITIES */ /* Visual aids and callout boxes, including the Prominent and Subtle */ /* yellow Instruction Box variations. */ /* ======================================================================= */ /* UTILITIES */ .highlight-box { border: 1px solid #333; padding: 40px; margin: 40px auto; max-width: 900px; text-align: left; } .gold-text { color: #CC9900; font-weight: bold; } .instruction-box { /* This instruction-box is used in sculptures.html */ background-color: #FFFF00; /* Bright Yellow */ color: #0000FF; /* High-Contrast Blue Text */ display: inline-block; padding: 15px 30px; margin: 30px auto; font-weight: bold; font-style: italic; font-size: 1.4rem; /* 1.4 rem = 28px text, when html font size is 20px */ border: 2px solid #000000; /* High visibility border, could be thin crisp 1px */ } /* Preservation of the tighter yellow box style for menus */ .instruction-box-bordered { background-color: #FFFF00; /* Bright Yellow */ color: #0000FF; /* High-Contrast Blue Text */ display: inline-block; padding: 10px 20px; /* Tighter padding, for a subtle look */ margin: 30px auto; font-weight: bold; font-style: italic; font-size: 1.2rem; /* 24px text */ border: none; /* No border, for the subtle look */ } /* ======================================================================= */ /* 12. FOOTER */ /* Styling for the very bottom of the page, including copyright text */ /* and final site-wide contact or credit links. */ /* ======================================================================= */ /* FOOTER */ /* NOTE In some pages I previously used a footer style called "site-footer" */ /* NOTE I no longer use that, I just use "footer" now */ /* To use the footer and .site footer in HTML pages:
© 2026 Alyse Lucas Corcoran. All Rights Reserved.
*/ /* .footer = The Container: Handles the physical space at the bottom of every page */ /* footer tag handles the "Big Picture" (spacing and borders) */ footer { padding: 60px 20px; border-top: 1px solid #222; margin-top: 60px; text-align: center; } /* .site-footer = The Content: Handles the specific look of the text/copyright info */ /* .site-footer class handles the "Fine Tuning" (text color and size) */ .site-footer { color: #666; /* #666 = Soft grey, darker (#aaa = Soft grey, lighter more readable) */ font-size: 0.8rem; /* 0.8 = Smaller/subtle, 0.9 = Smaller than body text but clear */ line-height: 1.5; } /* ========================================= */ /* footer a - Location: Very Bottom. Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: very bottom of the page (where the copyright notice is). Action: targets links in footer, a "Contact" link or your professional link. Does: footer links usually styled smaller or more subtle than main page content. Functional Role: Details: Copyright or professional links. Styling goal: Subtle. Keeps the focus on the art, not the legal text. */ footer a { /* "footer a" can preserve Gold links in the footer section */ color: #CC9900; /* gold link text */ text-decoration: none; font-weight: bold; } footer a:hover { text-decoration: underline; color: #ffffff; } /* ======================================================================= */ /* 13. CONTACT PAGE SPECIFIC STYLES */ /* Specific layout and typography for the contact.html page, including */ /* the studio title, address blocks, and the yellow email link. */ /* ======================================================================= */ /* CONTACT PAGE SPECIFIC STYLES (contact.html) */ .contact-container { max-width: 600px; margin: 80px auto; padding: 20px; border: 1px solid #333; } .studio-title { color: #FF0000; font-size: 1.4rem; font-weight: bold; margin: 20px 0; } .address-block { margin-bottom: 40px; } .address-title { color: #FF0000; font-size: 1.5rem; margin-bottom: 5px; } .phone { font-size: 1.3rem; margin-top: 5px; } /* In Section 13 (Contact Page), you have .email-link set to Yellow (#FFFF00) with an underline. This is a very "loud" color compared to the elegant Gold (#CC9900) and Peach (#FFCC99) used elsewhere. Since we're going for a gallery look, would you like that email to eventually transition to Gold to match the "Call to Action" links, or do you want that high-voltage Yellow to ensure people don't miss it? Note on 04/30/2026: I changed the color of .email-link to Gold (#CC9900) but am keeping these notes here in case we need to change the color later. */ .email-link { display: block; margin: 30px 0; color: #CC9900; font-size: 1.4rem; font-weight: bold; text-decoration: underline; } /* ======================================================================= */ /* 14. ABOUT PAGE SPECIFIC STYLES */ /* Specific layout and typography for the about.html page, including */ /* the centered portrait, elegant artist statement, and readable text. */ /* ======================================================================= */ /* ABOUT PAGE SPECIFIC STYLES (about.html) */ .about-container { max-width: 750px; /* Narrower width makes it much easier to read long stories */ margin: 60px auto; /* Pushes it down from the nav bar for a clean look */ padding: 20px; line-height: 1.9; /* Extra "breathing room" between lines */ color: #ffffff; /* Pure white text against your black background */ } .profile-photo { display: block; margin: 0 auto 60px auto; /* Centered with a large gap before the text starts */ max-width: 400px; /* A balanced size for the artist's portrait */ height: auto; border: 1px solid #333; } .statement-text p { margin-bottom: 30px; /* Large gaps between paragraphs to prevent "fatigue" */ font-size: 1.1rem; /* Slightly larger text to make it feel important */ } /* ======================================================================= */ /* 15. CONTACT FORM STYLES (Refined & Elegant) */ /* ======================================================================= */ /* 1. The Decorative Icon (Top-most element) - a Thin-Lined 4-point Celestial Star SVG */ .form-icon { text-align: center; margin-bottom: 20px; opacity: 0.8; /* Makes it slightly subtle against the black */ } .form-icon svg { display: inline-block; /* This ensures the thin stroke stays elegant */ vector-effect: non-scaling-stroke; } /* 2. The Form Header */ /* --- Foundation Part 1 (Keep this!) --- */ .contact-box h2 { color: #CC9900; text-align: center; margin-bottom: 30px; } /* 3. The Container Box */ .contact-box { max-width: 600px; margin: 80px auto; padding: 60px; /* Increased padding for a more "luxurious" feel */ background: #000000; /* Pure black to blend with the site */ border: 1px solid #222; /* Very faint border to define the space */ } /* 4. Labels and Inputs (The rest of the code follows...) */ /* --- Foundation Part 2 (Keep this!) --- */ .contact-box label { display: block; color: #ffffff; margin-bottom: 10px; font-weight: bold; font-size: 0.9rem; /* Slightly smaller for an elegant look */ letter-spacing: 1px; } /* Elegant Underlined Inputs */ .contact-box input, .contact-box textarea { width: 100%; padding: 10px 0; /* Only vertical padding */ margin-bottom: 40px; background: transparent; /* Makes it feel airy */ border: none; border-bottom: 1px solid #444; /* A single thin line */ color: #fff; font-size: 1.1rem; transition: border-color 0.4s ease; } /* The Interaction */ .contact-box input:focus, .contact-box textarea:focus { outline: none; border-bottom: 1px solid #CC9900; /* Gold Line when typing ("Gold focus state"") */ } /* The Centered Outline Button */ .contact-box button { display: block; margin: 0 auto; /* Centers the button */ background: transparent; border: 1px solid #CC9900; color: #CC9900; padding: 15px 40px; letter-spacing: 2px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: all 0.4s; } .contact-box button:hover { background: #CC9900; color: #000; } /* ======================================================================= */ /* 16. TESTIMONIALS & ACCLAIM (External Voices) */ /* ======================================================================= */ .testimonial-container { max-width: 1000px; margin: 60px auto; padding: 0 40px; } .testimonial-item { max-width: 900px; margin-bottom: 80px; /* Large space between different voices */ padding: 0 40px; border-left: 2px solid #CC9900; /* Gold "Award" Line, thin gold vertical on left, could be 1px */ } .testimonial-text { font-family: inherit; font-size: 1.25rem; line-height: 1.7; color: #ffffff; /* Keeping the text white makes it feel like "fact" */ font-style: italic; margin-bottom: 20px; } .long-form .testimonial-text { font-size: 1.1rem; /* Slightly smaller for density, for longer quotes */ line-height: 1.6; /* Slightly tighter line height so longer quotes take less space */ } .testimonial-author { display: block; font-size: 0.9rem; color: #CC9900; /* Gold Attribution */ text-transform: uppercase; letter-spacing: 2px; font-style: normal; } /* ======================================================================= */ /* 17. MOBILE RESPONSIVENESS (Laptops, Tablets, and Phones) */ /* Media queries specifically tuned for mobile viewing, including */ /* optimizations for the iPhone 16 Pro Max. */ /* ======================================================================= */ /* A "Stepped Attenuator" — just like a high-end volume knob that clicks into perfect presets for every device size. This is called a "Cascade" in CSS (Cascading Style Sheets like this one, "styles.css"!)*/ /* GRAND SCALE - Screens wider than 1440px (Like my 27-inch iMac) */ /* We need to scrutinize this code to be sure the final look and feel are acceptable */ /* We haven't yet fine-tuned the 1441px min-width GRAND SCALE as of 04/30/2026 */ /* ------------------------- */ /* This is a min-width query, an "Additive" rule. My main styles (Sections 1-16) are the baseline. On my iMac (huge screen), the computer sees "min-width: 1441px" and replaces the font-size with 22px and padding with 80px. For all other rules (for the smaller screens), I used "max-width" instead of "min-width", which means the iMac only looks at the Grand Scale and not the Mobile Rules. This allows me to separate the "Cinematic" (huge) view from the "Handheld" (small) view. */ @media (min-width: 1441px) { html { font-size: 22px; } /* Bump the "Volume" to fill the 27-inch screen */ /* Here, the implied h1 value is automatically 22px, 3rem = 22 x 3 = 66px */ .contact-box { padding: 80px; } /* Maximum luxury padding */ } /* LARGE TABLETS & SMALL LAPTOPS - 1024px wide */ /* Scale down slightly from 20px iMac... for laptops */ @media (max-width: 1024px) { /* Max-width rule applies when screen is < 1024px wide */ html { font-size: 18px; } /* Scales EVERYTHING down proportionally */ body { line-height: 1.7; } /* Here, the implied h1 value is automatically 18px, 3rem, = 18 x 3 = 54px */ .contact-box { padding: 50px; } /* Slightly tighter than the 60px default */ } /* SMALLER TABLETS AND LARGE PHONES - 850px wide */ @media (max-width: 850px) { /* Max-width rule applies when screen is < 850px wide */ html { font-size: 16px; } /* Scales EVERYTHING down proportionally */ body { line-height: 1.6; } /* Note that .layout-grid settings apply to all "children" (downward steps from here) */ .layout-grid { grid-template-columns: 1fr; text-align: center; } /* force 1column */ /* Tighten the image margin to 20px here */ .image-side img { margin: 0 auto 20px auto; } /* Margins Top-Right-Bottom-Left */ /* Here, the h1 value is 16px, 2.2rem, = 16 x 2.2 = 35.2px */ h1 { font-size: 2.2rem; } /* Target large headings if they are too big */ .testimonial-item { padding: 0 20px; } /* Tighten padding for smaller screens */ .contact-box { padding: 40px; } /* Getting more compact for standard mobile */ } /* MIDSIZE PHONES - 600px wide */ /* Standard size for phones/small tablets, should cover Mama's 450px phone perfectly */ @media (max-width: 600px) { /* Max-width rule applies when screen is < 600px wide */ html { font-size: 15px; } /* Scales EVERYTHING down proportionally */ body { line-height: 1.55; } /* Tighten the image margin to 12px here */ .image-side img { margin: 0 auto 12px auto; } /* Margins Top-Right-Bottom-Left */ /* Here, the h1 value is 15px, 1.9rem, = 15 x 1.9 = 28.5px */ h1 { font-size: 1.9rem; } /* Target large headings if they are too big */ .testimonial-item { padding: 0 12px; } /* Tighten padding for smaller screens */ .contact-box { padding: 30px; } /* 30px is perfect for your Mom's 450px screen */ } /* SMALL PHONES - 450px wide, covers my 430px iPhone Pro Max and Mama's 450px phone */ @media (max-width: 450px) { html { font-size: 14px; } body { line-height: 1.5; } /* Here, the h1 value is 14px, 1.7rem, = 14 x 1.7 = 23.8px */ h1 { font-size: 1.7rem; } /* Tighten the image margin to 10px here */ .image-side img { margin: 0 auto 10px auto; } /* "Inverse Scale" for nav links on smaller screens: */ /* Here, as screen size drops, the "nav a" font-size increases to keep links tappable */ /* at 450px max-width and font-size 0.9rem, links are 12.6px clean and readable */ nav a { margin: 0 8px; font-size: 0.9rem; } .contact-box { padding: 20px; } } /* SMALLER VINTAGE PHONES - 400px wide */ @media (max-width: 400px) { /* Max-width rule applies when screen is <400px wide */ html { font-size: 13px; } /* Scales EVERYTHING down proportionally */ body { line-height: 1.45; } /* "hyphens: auto" will allow words to elegantly break on the very smallest screens */ /* Here, the h1 value is 13px, 1.5rem, = 13 x 1.5 = 19.5px */ h1 { font-size: 1.5rem; hyphens: auto; } /* Target large headings if they are too big */ /* Tighten the image margin to 9px here */ .image-side img { margin: 0 auto 9px auto; } /* "Inverse Scale" for nav links on smaller screens: */ /* Here, as screen size drops, the "nav a" font-size increases to keep links tappable */ /* at 400px max-width and font-size 0.95rem, links are 12.35px staying consistent */ nav a { margin: 0 6px; font-size: 0.95rem; letter-spacing: 0; } /* Keeps the menu from wrapping */ .contact-box { padding: 16px; } /* Very tight for small screens */ } /* TINY VINTAGE PHONES - 320px wide */ @media (max-width: 320px) { /* Max-width rule applies when screen is <320px wide */ html { font-size: 12px; } /* Scales EVERYTHING down proportionally */ body { line-height: 1.4; } /* "hyphens: auto" will allow words to elegantly break on the very smallest screens */ /* Here, the h1 value is 12px, 1.2rem, = 12 x 1.2 = 14.4px */ h1 { font-size: 1.2rem; hyphens: auto; } /* Target large headings if they are too big */ /* Tighten the image margin to 8px for the smallest screens */ .image-side img { margin: 0 auto 8px auto; } /* "Inverse Scale" for nav links on smaller screens: */ /* Here, as screen size drops, the "nav a" font-size increases to keep links tappable */ /* at 320px max-width and font-size 1.0rem, links are 12.0px absolute "floor" for thumbs */ nav a { margin: 0 4px; font-size: 1.0rem; letter-spacing: 0; } /* Tightens the "mix" so it fits */ .contact-box { padding: 15px; } /* Prevents the box from feeling like a tiny sliver */ } /* <--- THIS BRACKET IS IMPORTANT, DON'T REMOVE IT, IT CLOSES THE 320PX MEDIA QUERY! */ /* =============================================================================== */ /* =============================================================================== */ /* STUDY KEY */ /* =============================================================================== */ /* =============================================================================== */ /* nav a - Location: Top (Header). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: site-wide navigation bar (horizontal menu at the very top). Action: styles the main menu items like Home, Sculptures, and Contact. Does: makes these links White Bold Uppercase, a website GPS visitors see 1st. Functional Role: Site GPS: Home, About, Contact. Styling goal: White/Bold/Caps. Constant and clear across every page. .nav-links a - Location: Bottom (Story). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: navigation area at bottom of the narrative or story pages. Action: targets the specific "Previous" and "Next" links ("Narrative Navigation"). Does: makes links Red (#FF0000) & larger than top menu, turn page & browse chapters. Functional Role: Flow: Moving between story chapters. Styling goal: Red. High visibility to help the user "turn the page." .card a - Location: Middle (Home). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: "cards" on the home page (like "Icons of Charleston"). Action: styles only the "View Collection" links. Does: makes these links Gold, sophisticated, primary "call to action" on main page. Functional Role: Galleries: Entrance to her specific collections. Styling goal: Gold. Acts as a "Call to Action" that feels like a gallery plaque. .list-container a - Location: Middle (Story). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: main wrapper for the story pages. Action: targets any link inside a narrative or story block. Does: ensures links in a story are padded, w/good color against black background. Functional Role: Narrative: Links tucked inside her stories/text. Styling goal: Functional. Ensures links within paragraphs don't vanish. .sculpture-list a - Location: Middle (List). Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: specific section with individual sculpture names list (like Spirit). Action: styles the names of the sculptures themselves. Does: removes default blue underline, ensures a clean pro list of sculptures. Functional Role: Catalog: Individual titles of her art pieces. Styling goal: Clean/No Underline. Makes the list of titles look professional. footer a - Location: Very Bottom. Follows the "Parent-Child" relationship. Each one targets 2 things: (1) The Parent = a specific Container. (2) The Child = the Link inside it. Container: very bottom of the page (where the copyright notice is). Action: targets links in footer, a "Contact" link or your professional link. Does: footer links usually styled smaller or more subtle than main page content. Functional Role: Details: Copyright or professional links. Styling goal: Subtle. Keeps the focus on the art, not the legal text. */ /* MENU LINKS: Governed by the "a" in the ".card a", ".nav a", and ".nav-links a". Allows you to have different colored links on same page without computer getting confused. -TOP = "nav a" -- The top menu links stay White. "WHERE AM I" -MIDDLE = ".card a" -- The middle collection links stay Gold. "WHAT ART TO SEE" -BOTTOM = ".nav-links a" -- The bottom story links stay Red. "CONTINUE READING" */ /* PHOTOS NEW LONGER (AND OLD SHORTER) FILENAMES - replaced in HTML files 04/29/2026: crabbing-at-dusk-01-front-full-view.jpg (crabbing-at-dusk.jpg) lucas-fourteen-and-waiting-for-the-wind-01.jpg (waiting-for-the-wind.jpg) ol-ander-shrimper-man-01-front-full-view.jpg (ol-ander-01.jpg) ol-ander-shrimper-man-02-left-primary-view.jpg (ol-ander-02.jpg) ol-ander-shrimper-man-03-left-detail-view.jpg (ol-ander-03.jpg) papa-john-and-me-01-front-detail-view.jpg (papa-john.jpg) sand-castles-01-front-primary-view.jpg (sand-castles-01.jpg) sand-castles-02-front-detail-view.jpg (sand-castles-02.jpg) the-night-before-01-back-full-view.jpg (night-before-b.jpg) the-night-before-02-left-primary-view.jpg (night-before-l.jpg) the-night-before-03-isometric-full-view.jpg (night-before-iso.jpg) the-spirit-of-september-eleventh-01-head-right-detail-view.jpg (spirit-head.jpg) the-spirit-of-september-eleventh-02-unveiling-front-primary-view.jpg (spirit-unveiling.jpg) */ /* CONTACT FORMS: The Reality of Contact Forms: There is one "robust" thing to keep in mind: HTML and CSS cannot send email by themselves. - HTML builds the boxes (the "Look"). - CSS styles the boxes (the "Feel"). - A Script (PHP or a Form Service) is required to actually "push" the message from the website into your inbox. For the Script, we have two choices for the "sending" part: - PHP (The cPanel Way): I can write a small script in the file manager that uses the new alyse@lionessart.net email (or any email of your choosing) to send the mail. - Form Service: Use a service like "Formspree" where I just add one line to the HTML and they handle the "sending" logic for free. */ /* WHEN TO USE ITALICS VS BOLD VS ALL CAPS ETC Content Type Formatting Style Sculpture Titles Italics Newspapers/Books Italics Specific Quotes "Quotation Marks" Series/Themes CAPS + Letter Spacing (could use Bold text but Bold isn't as elegant) */ /* POSSIBLE COLORS: */ /* Soft Peach - #FFDAB9 - A very ight, airy peach (highly readable). */ /* Warm Sand - #F4A460 - A deeper, more "earthy" tone. */ /* Artist's Flesh - #FFCC99 - A classic mid-tone peach that feels very human. */ /* Gold - #CC9900 - The color used throughout Alyse's site */ /* White - #FFFFFF - Plain white could keep the look as minimal as possible */ /* Sophistication - Sophistication: Peach and Gold (#CC9900) live in the same */ /* "warm" family, so they won't clash. */ /* */