/* ============================================ HOT WHEELS & HIGH HEELS — styles.css Colors: #ff00a3 (pink), #a300ff (purple), white, #0a0608 (off-black) Fonts: Playfair Display (h1/names), Cormorant Garamond (h2/nav-logo), Lora (body/h3) ============================================ */ /* --- GOOGLE FONTS IMPORT --- Loads all three typefaces from Google Fonts. Playfair Display: italic serif for h1 (contributor names) Cormorant Garamond: elegant serif for h2 and nav logo Lora: warm readable serif for body text, h3, links Multiple weights loaded so we can use bold, regular, and italic variants */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap'); :root { --bg: #0a0608; --text: #f5f0f5; --pink: #ff00a3; --purple: #a300ff; } [data-theme="light"] { --bg: #f5f0f5; --text: #0a0608; } /* --- CONTAINER --- Centers all page content and caps the width at 900px. margin: auto pushes equal space on left and right, centering the block. display: block is explicit to prevent browser defaults from interfering. padding-bottom: keeps page content from touching bottom of screen. */ .container { margin: auto; max-width: 900px; display: block; padding-bottom: 120px; } /* --- BANNER --- The hero image at the top of the home page. width: 100% makes it stretch edge to edge of the container. */ .banner { width: 100%; box-shadow: 0 4px 24px rgba(255, 0, 163, 0.2), 0 0 48px rgba(163, 0, 255, 0.1); display: block; } /* --- FOOTER IMAGE --- The 4Runner photo in the footer. max-height caps it so it doesn't take over the page. */ .footer { max-height: 150pt; filter: drop-shadow(0 0 12px rgba(255, 0, 163, 0.4)) drop-shadow(0 0 24px rgba(163, 0, 255, 0.2)); } /* --- FOOTER DEDICATION --- Eulogy chic — Cormorant Garamond italic for the 4Runner memorial text. First line in purple, second line smaller and off-white. */ .footer-dedication { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18pt; color: var(--purple); margin: 0 0 4px 0; } .footer-dedication-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13pt; color: var(--text); opacity: 0.6; margin: 0; } /* --- IMAGES (GLOBAL) --- Prevents any image from overflowing its container. height: auto preserves the original aspect ratio. */ img { max-width: 100%; height: auto; } /* --- BODY --- Off-black background instead of pure #000000. Pure black is harsh on the eyes with white text. #0a0608 has a barely-there warm undertone that makes the pink and purple glow. */ body { background-color: var(--bg); } /* --- HEADINGS --- h1: Playfair Display italic — used for contributor names. Editorial, fashion-forward. h2: Cormorant Garamond — section headers. Structured and elegant. h3: Lora uppercase — labels and subcategories. Clean and readable. margin: 0 0 8px 0 resets browser default large margins (top right bottom left). */ h1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 24pt; color: var(--pink); margin: 0 0 8px 0; } /* Centers h1 on post pages only (contributor name as byline). Uses body.post to scope it — only fires when is present. Default pages and home page h1s are unaffected. */ body.post h1 { text-align: center; } h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24pt; color: var(--purple); margin: 0 0 8px 0; } h3 { font-family: 'Lora', serif; font-weight: 500; font-size: 12pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); margin: 0 0 8px 0; } /* --- PARAGRAPH --- Lora at weight 300 (light) feels warm and literary. line-height: 1.75 adds generous spacing between lines for readability. margin-bottom: 12px adds space between paragraphs. */ p { font-family: 'Lora', serif; font-weight: 300; font-size: 14pt; line-height: 1.75; margin-bottom: 12px; color: var(--text); } /* --- LINKS --- Pink by default, no underline at rest. Underline appears on hover as a subtle interactive signal. */ a { font-family: 'Lora', serif; font-size: 14pt; color: var(--pink); text-decoration: none; } a:hover { text-decoration: underline; } /* --- LISTS --- */ .ugh-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; list-style: none; padding-bottom: 20pt; margin: 0; font-family: 'Lora', serif; font-size: 12pt; color: var(--text); } .ugh-list li { box-sizing: border-box; } /* --- NAVIGATION BAR --- flex + space-between pushes the logo left and links right. border-bottom is a barely-visible pink line that grounds the nav. */ nav { background: var(--bg); padding: 10px 32px; margin-bottom: 16px; border-bottom: 0.5px solid rgba(245,240,245,0.06); /* #ff00a322 = pink at ~13% opacity */ display: flex; align-items: center; justify-content: space-between; } /* --- NAV LOGO --- The site title on the left of the nav. It's an tag so we override link defaults (color, underline). white-space: nowrap prevents it from wrapping onto two lines. !important on color overrides the global a { color: #ff00a3 } rule. */ .nav-logo { font-family: 'Cormorant Garamond', serif; font-size: 13pt; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--purple) !important; opacity: 0.85; white-space: nowrap; text-decoration: none; } .nav-logo:hover { text-decoration: none; } /* --- NAV LINKS --- Links displayed in a horizontal row. Uppercase + letter-spacing gives them a refined editorial feel. opacity: 0.7 at rest, 1 on hover for a subtle interactive effect. */ nav ul { display: flex; list-style: none; margin: 0; padding: 0; justify-content: space-around; } nav ul li { margin-right: 10px; } nav ul li a { text-decoration: none; font-size: 11pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); opacity: 0.7; } nav ul li a:hover { text-decoration: none; opacity: 1; color: var(--pink); } /* Highlights the current page link in pink. !important overrides the inherited white color and opacity from nav ul li a. */ .active { color: var(--pink) !important; opacity: 1 !important; } /* --- HAMBURGER MENU BUTTON --- Hidden on desktop (display: none). Shows on mobile via the @media query below. Three tags inside form the three lines of the hamburger icon. */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--pink); transition: all 0.3s ease; } /* When .open class is added via JavaScript, the three lines animate into an X. First line rotates 45deg down, middle line disappears, third line rotates 45deg up. */ .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* --- MOBILE STYLES --- Everything inside @media (max-width: 600px) only applies on screens 600px wide or less. This is where we override desktop styles for phone screens. */ @media (max-width: 600px) { nav { flex-wrap: nowrap; /* keeps logo and hamburger on the same line */ padding: 12px 20px; align-items: center; } /* Smaller logo font so it fits on one line next to the hamburger */ nav .nav-logo { font-size: 9pt; letter-spacing: 0.12em; } /* Show the hamburger button on mobile */ .nav-toggle { display: flex; } /* Hide the nav links by default on mobile. They appear when .open class is toggled by the hamburger button. */ nav ul { display: none; flex-direction: column; width: 100%; padding: 12px 0; gap: 4px; } nav ul.open { display: flex; } nav ul li { margin: 0; } nav ul li a { display: block; padding: 10px 0; border-bottom: 0.5px solid rgba(245,240,245,0.06); /* barely visible divider between links */ font-size: 11pt; } .ugh-list { grid-template-columns: repeat(2, 1fr); font-size: 10pt; } /* Smaller font sizes on mobile — pt values scale up on phone screens so we bring them down to keep proportions feeling right */ p { font-size: 10pt; } h1 { font-size: 20pt; } h2 { font-size: 18pt; } a { font-size: 10pt; } /* Bio card stacks vertically on mobile instead of side by side */ .bio-card { flex-direction: column; } /* Image goes full width when stacked */ .bio-image { width: 100%; } } /* --- BACK TO TOP BUTTON --- Scoped to body.post so it only appears on post pages, not default pages. position: fixed keeps it stuck to the bottom right of the viewport while scrolling. border-radius: 50% makes it a circle (only works because width and height are equal). */ .back-to-top { position: fixed; bottom: 24px; right: 24px; background: transparent; border: 1px solid var(--pink); color: var(--pink); font-size: 18px; width: 40px; height: 40px; border-radius: 50%; cursor: url('/assets/Images/cursor.svg'), auto; opacity: 0.7; transition: opacity 0.3s ease; /* smooth fade on hover */ display: flex; align-items: center; justify-content: center; } .back-to-top:hover { opacity: 1; } /* --- BIO CARD --- Flexbox layout for contributor profile: photo on the left, bio text on the right. gap: 24px is the space between the photo and text columns. align-items: flex-start lines both columns up from the top edge. */ .bio-card { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 24px; } /* flex-shrink: 0 prevents flexbox from squishing the photo to make room for text. The photo stays locked at 200px regardless of screen size (until mobile breakpoint). */ .bio-image { flex-shrink: 0; width: 200px; } .bio-image img { width: 100%; border-radius: 4px; /* subtle rounded corners, softer than a hard square edge */ } /* flex: 1 tells the bio text column to take up all remaining space after the fixed 200px photo column has claimed its share. */ .bio-text { flex: 1; } /* --- HORIZONTAL RULE --- Used as a divider between the bio section and interview content. border: none resets the browser's default hr styling first, then we draw only the top border in pink at 0.5px for a delicate line. */ hr { border: none; border-top: 0.5px solid var(--pink); margin: 24px 0; /* 24px above and below, 0 on the sides */ } /* --- IMAGE GALLERY (DRIVERS PAGE) --- .container prefix adds specificity to override browser's default display: block on divs. Without this, the grid doesn't fire on the live site even though CSS is correct. */ .container .gallery { display: grid; } /* 3 equal columns on desktop, gap between cards, space below the whole gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 1fr = 1 fraction of available space */ gap: 16px; margin-bottom: 48px; } /* position: relative is required so the overlay child can use position: absolute relative to this card, not the whole page. overflow: hidden clips the image and overlay to the card's border-radius. */ .gallery-card { position: relative; overflow: hidden; border-radius: 4px; display: block; } /* object-fit: cover fills the fixed height without stretching — crops if needed. This keeps all cards the same height regardless of original image dimensions. filter: brightness(0.6) darkens the image to ~60% at rest for moody effect. */ .gallery-card img { width: 100%; height: 300px; object-fit: cover; display: block; filter: brightness(0.6); transition: filter 0.3s ease; } /* Image brightens to full on hover */ .gallery-card:hover img { filter: brightness(1); } /* The name overlay sits at the bottom of the card using absolute positioning. gradient fades from transparent to dark so the name is readable over the image. translateY(8px) nudges it slightly down at rest — on hover it slides back to 0. */ .gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); transform: translateY(8px); transition: transform 0.3s ease; } .gallery-overlay p { font-family: 'Cormorant Garamond', serif; font-size: 16pt; font-style: italic; color: var(--pink); margin: 0; } /* Slides the overlay up to its natural position on hover */ .gallery-card:hover .gallery-overlay { transform: translateY(0); } /* --- POETRY LINKS --- Centered text block below the gallery on the Drivers page. */ .poetry-links { text-align: center; margin-top: 24px; } .poetry-links a { display: block; margin-bottom: 8px; } /* Gallery drops to 2 columns on mobile */ @media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } } /* --- CUSTOM CURSOR --- Replaces the default browser cursor with our SVG double heart on all elements. The two numbers after the URL on a, button are the hotspot coordinates (x y) — where exactly on the cursor image the click registers. */ body { cursor: url('/assets/Images/cursor.svg'), auto; } a, button { cursor: url('/assets/Images/cursor.svg') 8 2, auto; } /* --- EMAIL SIGNUP FORM (BUTTONDOWN) --- .container prefix adds specificity to override browser's default display: block. Same fix as .container .gallery above — needed on live site. */ .container .embeddable-buttondown-form { display: flex; } /* Centered single-line form: email input + subscribe button side by side. max-width + auto margins centers the form within the container. */ .embeddable-buttondown-form { display: flex; align-items: center; gap: 8px; margin-top: 48px; max-width: 500px; margin-left: auto; margin-right: auto; } /* Label is hidden visually but kept in HTML for accessibility (screen readers). display: none removes it from the layout entirely. */ .embeddable-buttondown-form label { display: none; } /* Email input: transparent background matches the page, pink border matches the theme. flex: 1 makes it take up all available space next to the button. outline: none removes the default browser focus ring. */ .embeddable-buttondown-form input[type="email"] { flex: 1; background: transparent; border: 0.5px solid var(--pink); color: var(--text); font-family: 'Lora', serif; font-size: 11pt; padding: 10px 16px; outline: none; } /* Submit button matches the back-to-top button style: transparent + pink border. Consistent design language across interactive elements. */ .embeddable-buttondown-form input[type="submit"] { background: transparent; border: 0.5px solid var(--pink); color: var(--pink); font-family: 'Lora', serif; font-size: 11pt; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 20px; cursor: url('/assets/Images/cursor.svg'), auto; transition: opacity 0.3s ease; } .embeddable-buttondown-form input[type="submit"]:hover { opacity: 0.7; } /* Hides the "Powered by Buttondown" link. display: none removes it from the layout completely. */ .embeddable-buttondown-form p { display: none; } /* --- THEME TOGGLE BUTTON --- Mirrors the back-to-top button but sits in the bottom LEFT corner. Shows on all pages unlike back-to-top which is post only. ☼ = dark mode active (click for light), ☾ = light mode active (click for dark) body prefix adds specificity to override browser default button sizing — same pattern as body .theme-toggle, .container .gallery, etc. */ body .theme-toggle { position: fixed; bottom: 24px; left: 24px; background: transparent; border: 1px solid var(--pink); color: var(--pink); font-size: 16px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: url('/assets/Images/cursor.svg') 8 2, auto; opacity: 0.7; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } body .theme-toggle:hover { opacity: 1; } /* --- FEATURE CARD --- Always last in the gallery grid — links to the coming soon page. Transparent with pink border at rest, pulses on hover. No image — pure CSS card. */ .feature-card { background: transparent; border: 1px solid var(--pink); height: 300px; /* matches gallery-card img height */ display: flex; align-items: center; justify-content: center; } /* pulse animation — border and text glow pink on hover */ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } .feature-card:hover { border-color: var(--pink); box-shadow: 0 0 12px var(--pink); animation: pulse 1.5s ease-in-out infinite; } /* --- TEASER PAGE (REVVING UP) --- Full height static effect page for upcoming features. Static lines animate with flicker effect behind centered text. Subscribe form at the bottom as call to action. */ .teaser-page { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 48px 0; } .teaser-static { position: relative; width: 100%; height: 320px; display: flex !important; } /* static lines sit behind the text using z-index */ .static-lines { position: absolute; top: 60px; left: 0; right: 0; bottom: 60px; overflow: hidden; z-index: 0; } .static-line { height: 2px; margin-bottom: 3px; background: linear-gradient(90deg, transparent, var(--pink), var(--purple), transparent); animation: flicker 2s ease-in-out infinite; } .static-line:nth-child(odd) { animation-delay: 1s; opacity: 0.5; } .static-line:nth-child(3n) { background: linear-gradient(90deg, transparent, var(--purple), transparent); } @keyframes flicker { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* text sits on top of the static lines */ .teaser-content { position: relative; z-index: 1; text-align: center; width: 100%; min-height: 200px; display: flex !important; flex-direction: column; align-items: center; } .teaser-label { font-family: 'Lora', serif; font-size: 10pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); opacity: 0.7; margin-bottom: 16px; } /* overrides the global h1 style for this page */ .teaser-title { font-family: 'Playfair Display', serif; font-style: italic; font-size: 48pt; color: var(--pink); margin: 0 0 8px 0; } .teaser-sub { font-family: 'Cormorant Garamond', serif; font-size: 13pt; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple); opacity: 0.6; } .teaser-subscribe { text-align: center; width: 100%; margin-top: 16px; } .teaser-subscribe-label { font-family: 'Lora', serif; font-size: 10pt; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text); opacity: 0.4; margin-bottom: 16px; } /* --- 4RUNNER SHAKE ANIMATION --- Triggered by JavaScript when the image is clicked. Mimics a car engine starting — quick left/right vibration. */ @keyframes carShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px) rotate(-0.5deg); } 80% { transform: translateX(4px) rotate(0.5deg); } } .footer-shake { animation: carShake 0.5s ease-in-out; } /* --- LIGHTBOX --- Full screen overlay for cover photos on post pages. position: fixed covers the entire viewport regardless of scroll position. z-index: 1000 puts it on top of everything including the nav and buttons. Hidden by default — JavaScript adds .open class to show it. */ .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 6, 8, 0.95); z-index: 1000; display: none; align-items: center; justify-content: center; cursor: url('/assets/Images/cursor.svg') 8 2, auto; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 0 48px rgba(255, 0, 163, 0.2), 0 0 96px rgba(163, 0, 255, 0.1); } /* X close button — top right corner */ .lightbox-close { position: absolute; top: 24px; right: 24px; font-family: 'Lora', serif; font-size: 14pt; color: var(--pink); cursor: url('/assets/Images/cursor.svg') 8 2, auto; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; } .lightbox-close:hover { opacity: 1; } /* subtle link style — matches connect links on post pages */ .cover-photo-link { font-family: 'Lora', serif; font-size: 14pt; font-style: italic; color: var(--pink); cursor: url('/assets/Images/cursor.svg') 8 2, auto; opacity: 0.7; display: block; margin-bottom: 12px; } .cover-photo-link:hover { opacity: 1; text-decoration: underline; } /* --- BLOCKQUOTE / PULL QUOTE --- For pull quotes from interviews or poems. Left border in pink, italic Cormorant Garamond, indented. */ .pull-quote { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20pt; color: var(--text); border-left: 2px solid var(--pink); margin: 24px 0; padding: 8px 24px; opacity: 0.85; } /* --- IMAGE CAPTION --- Small label below images for photo credits or descriptions. */ .caption { font-family: 'Lora', serif; font-size: 9pt; color: var(--text); opacity: 0.4; letter-spacing: 0.1em; text-align: center; margin-top: 4px; margin-bottom: 16px; } /* --- TAG / BADGE --- Small pill labels for categorizing content. Transparent with purple border, uppercase Lora. */ .tag { display: inline-block; font-family: 'Lora', serif; font-size: 9pt; letter-spacing: 0.15em; text-transform: uppercase; color: var(--purple); border: 0.5px solid var(--purple); border-radius: 20px; padding: 4px 12px; margin-right: 6px; margin-bottom: 6px; } /* --- CALLOUT BOX --- Highlighted aside or editor's note. Subtle pink left border, slightly muted background. */ .callout { border-left: 2px solid var(--pink); padding: 12px 20px; margin: 24px 0; background: rgba(255, 0, 163, 0.04); } .callout p { margin: 0; font-size: 12pt; opacity: 0.8; } /* --- AUDIO PLAYER --- Wrapper for contributor audio recordings or sound clips. Native browser audio element styled to match the site. */ .audio-player { margin: 24px 0; } .audio-label { font-family: 'Lora', serif; font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase; color: var(--purple); opacity: 0.6; margin-bottom: 8px; } audio { width: 100%; filter: invert(1) hue-rotate(180deg); opacity: 0.7; } audio:hover { opacity: 1; } /* --- VIDEO EMBED --- Responsive 16:9 video wrapper for YouTube or Vimeo embeds. padding-top: 56.25% is the magic number for 16:9 aspect ratio. */ .video-wrap { position: relative; padding-top: 56.25%; margin: 24px 0; overflow: hidden; } .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0.5px solid rgba(255, 0, 163, 0.2); } /* --- WIKI PAGE --- Wikipedia-style layout for Trunk pages. Clean, structured, editorial. */ .wiki-page { max-width: 800px; margin: 0 auto; } .wiki-intro { font-style: italic; opacity: 0.7; } .wiki-toc { border: 0.5px solid rgba(163, 0, 255, 0.3); padding: 16px 24px; display: inline-block; min-width: 200px; margin: 16px 0; } .wiki-toc h3 { margin-bottom: 8px; } .wiki-toc-list { margin: 0; padding-left: 20px; font-family: 'Lora', serif; font-size: 12pt; } .wiki-toc-list li { margin-bottom: 4px; } /* --- SLIDESHOW --- Single image at a time with caption and navigation arrows. Add slides by duplicating the .slide div pattern. Only .active slide is visible at any time. */ .slideshow { margin: 24px 0; height: 500px; display: flex; flex-direction: column; } .slide { flex: 1; display: none; overflow: hidden; } .container .slide { display: none; } .slide.active { display: flex; flex-direction: column; justify-content: center; align-items: center; } .container .slide.active { display: flex; flex-direction: column; justify-content: center; align-items: center; } .slide img { width: 100%; flex: 1; object-fit: contain; border: 0.5px solid rgba(255, 0, 163, 0.2); min-height: 0; } .slideshow-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; } .slide-btn { background: transparent; border: 0.5px solid var(--pink); color: var(--pink); font-size: 16px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; opacity: 0.7; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; } .slide-btn:hover { opacity: 1; } .slide-count { font-family: 'Lora', serif; font-size: 10pt; letter-spacing: 0.15em; color: var(--text); opacity: 0.5; } /* --- ACCORDION --- Expandable content sections. Click header to show/hide content. + icon rotates to — when open. */ .accordion { border-bottom: 0.5px solid var(--pink); margin-bottom: 8px; } .accordion-header { width: 100%; background: transparent; border: none; color: var(--text); font-family: 'Lora', serif; font-size: 12pt; letter-spacing: 0.1em; text-align: left; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; opacity: 0.8; } .accordion-header:hover { opacity: 1; color: var(--pink); } .accordion-icon { color: var(--pink); font-size: 18px; transition: transform 0.3s ease; } .accordion-content { display: none; padding: 0 0 16px 0; } .accordion-content.open { display: block; }