/* =============================================================================
SITE STYLESHEET
=============================================================================
HOW THIS FILE IS ORGANIZED:
1. CSS Variables (colors, sizes, fonts — edit these to restyle the whole site)
2. Reset & Base Styles
3. Splash Page
4. Main Layout (header, margins, content area)
5. Scroll Indicator Menu (the floating image that acts as a scrollbar)
6. Navigation Dropdown
7. Footer
8. Footer — Writing Link (tongue slide effect)
9. Footer — Instagram Link
10. Footer — Contact Popup
11. Tablet Styles (max-width: 1024px)
12. Phone Styles (max-width: 600px)
TO CHANGE COLORS: edit the variables in section 1.
TO CHANGE FONTS: edit --font-body and --font-display in section 1.
TO CHANGE SPACING: edit the spacing variables in section 1.
============================================================================= */
/* =============================================================================
1. CSS VARIABLES — Edit these to restyle the whole site
=============================================================================
CSS variables start with -- and are used throughout the file with var(--name).
Change a value here and it updates everywhere on the site automatically.
============================================================================= */
:root {
/* --- COLORS ---
Background and text are currently black and white.
To add an accent color, define it here and use it below. */
--color-bg: #ffffff; /* Main page background */
--color-text: #111111; /* Main text color */
--color-header-bg: #ffffff; /* Header/nav bar background (tablet + phone) */
--color-rule: #000000; /* The horizontal break line on tablet/phone */
--color-menu-bg: #ffffff; /* Dropdown menu background */
--color-menu-border: #000000; /* Dropdown menu border color */
--color-overlay: rgba(0,0,0,0.55); /* Contact popup dark background overlay */
--color-popup-bg: #ffffff; /* Contact popup box background */
--color-btn-bg: #111111; /* Copy email button background */
--color-btn-text: #ffffff; /* Copy email button text */
/* --- TYPOGRAPHY ---
Using system fonts by default so no external requests needed.
To use a Google Font: add a tag in each HTML file's ,
then replace the font name below. Example: 'Playfair Display', serif */
--font-body: Georgia, 'Times New Roman', serif;
--font-display: Georgia, 'Times New Roman', serif;
--font-ui: Helvetica, Arial, sans-serif; /* Used for buttons, labels */
/* --- SPACING ---
These control margins and padding throughout the layout.
--margin-side is the left/right margin on desktop (the blank space beside content). */
--margin-side: 160px; /* Left + right margin on desktop */
--margin-side-tablet: 32px; /* Left + right margin on tablet */
--margin-side-phone: 18px; /* Left + right margin on phone */
--footer-padding: 32px; /* Top + bottom padding inside footer */
/* --- SCROLL INDICATOR (the floating menu image) ---
These control the size and position of the floating menu image on desktop. */
--indicator-size: 140px; /* Width and height of the menu image */
--indicator-right: 40px; /* Distance from the right edge of the viewport */
--indicator-top-min: 24px; /* Closest it can get to the top of the viewport */
--indicator-top-max: 24px; /* Closest it can get to the bottom (measured from bottom) */
/* --- NAVIGATION DROPDOWN ---
Controls the look of the menu that appears when you click/hover the indicator. */
--nav-item-padding: 14px 24px; /* Padding inside each nav link */
--nav-font-size: 1rem; /* Font size of nav links */
--nav-min-width: 180px; /* Minimum width of the dropdown box */
/* --- SMOOTH SCROLL ---
Controls the scroll speed/feel on desktop.
TO DISABLE smooth scrolling: comment out the line in section 2 below
that says scroll-behavior: smooth; */
/* --- TRANSITIONS ---
Controls how fast animations happen. */
--transition-speed: 0.3s; /* General transition speed */
--tongue-speed: 0.45s; /* How fast the tongue/slide image deploys */
--menu-speed: 0.28s; /* How fast the nav dropdown opens */
}
/* =============================================================================
2. RESET & BASE STYLES
Removes browser default spacing and sets up the foundation.
============================================================================= */
*, *::before, *::after {
box-sizing: border-box; /* Makes width calculations predictable */
margin: 0;
padding: 0;
}
html {
/* SMOOTH SCROLL: this is what makes the page glide instead of jump.
To disable it, delete or comment out the line below. */
scroll-behavior: smooth;
/* Prevent horizontal scrollbar caused by overflow elements */
overflow-x: hidden;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
/* =============================================================================
3. SPLASH PAGE (splash.html)
Full-screen image or video. Click/tap anywhere to go to main page.
The splash is a separate HTML file so it only shows on first visit to the site.
============================================================================= */
/* The splash page body — no scroll, no overflow */
body.splash-page {
overflow: hidden;
width: 100vw;
height: 100vh;
/* Lock to portrait on mobile — handled by JS + CSS below */
}
/* The full-screen wrapper that captures clicks */
.splash-wrapper {
position: fixed;
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
cursor: pointer;
z-index: 1;
}
/* The image version of the splash */
.splash-image {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Fill the screen, crop edges before letterboxing */
object-position: center; /* Default focal point — overridden per breakpoint in JS */
z-index: 0;
}
/* The video version of the splash */
.splash-video {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Same fill behavior as the image */
z-index: 0;
}
/* PORTRAIT LOCK MESSAGE
Shows only on phones/tablets that are in landscape.
The JS (splash.js) controls showing/hiding this. */
.rotate-message {
display: none; /* Hidden by default — JS shows it when needed */
position: fixed;
inset: 0;
background: var(--color-bg);
z-index: 100;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 1rem;
text-align: center;
padding: 2rem;
}
/* =============================================================================
4. MAIN LAYOUT
The outer structure of every page except the splash.
A content column centered in the viewport with equal side margins.
============================================================================= */
/* The main page wrapper — everything sits inside this */
.site-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* The centered content column.
padding-right reserves space so content doesn't slide under the scroll indicator. */
.content-column {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: var(--margin-side);
padding-right: var(--margin-side);
overflow: hidden; /* clips anything that tries to exceed the column width */
flex: 1;
}
/* Generic section spacing — wrap page sections in */
.page-section {
padding-top: 64px;
padding-bottom: 64px;
}
/* Placeholder content block — replace with real content */
.placeholder-block {
background: #f5f5f5;
border: 1px dashed #ccc;
padding: 48px;
text-align: center;
font-family: var(--font-ui);
font-size: 0.9rem;
color: #888;
margin-bottom: 32px;
}
/* =============================================================================
5. SCROLL INDICATOR MENU IMAGE
The floating image in the right margin that acts as a custom scroll indicator.
It moves vertically as you scroll — top of page = top of margin,
bottom of page = bottom of margin.
DESKTOP ONLY — on tablet/phone it becomes a fixed top-right image instead.
============================================================================= */
/* The indicator container — positioned by JavaScript (scroll-indicator.js) */
.scroll-indicator {
position: fixed;
right: var(--indicator-right);
top: var(--indicator-top-min); /* Starting position — JS updates this on scroll */
width: 140px;
height: 108px;
z-index: 500; /* Above page content, below popup */
cursor: pointer;
/* Movement is handled entirely by the JS lerp animation in scroll-indicator.js.
To tune the lag/inertia feel, edit LERP_FACTOR in scroll-indicator.js.
DO NOT add a CSS transition here — it will fight with the JS and cause jitter. */
transition: none;
}
/* The actual image inside the indicator */
.scroll-indicator img {
width: 100%;
height: 100%;
object-fit: contain; /* Shows the full image, no cropping */
display: block;
/* TO MAKE IT ROUND: add border-radius: 50%; */
image-rendering: -webkit-optimize-contrast;
-webkit-transform: translateZ(0);
transform: translateZ(0); /* ADD THIS LINE */
}
/* Hover state — subtle feedback that it's clickable */
.scroll-indicator:hover img {
opacity: 1;
transition: opacity var(--transition-speed);
}
/* =============================================================================
6. NAVIGATION DROPDOWN
Appears when the scroll indicator is clicked or hovered.
Drops DOWN when the indicator is in the top half of the viewport.
Opens UP when the indicator is in the bottom half of the viewport.
This is controlled by JavaScript adding .menu-up or .menu-down class.
The top border of the dropdown matches the header color on tablet/phone.
On desktop there is no visible header so it uses the menu background color.
TO ADD A NEW NAV ITEM: go to each HTML file and add an tag inside
the