/* ============================================================ STYLE.CSS - the entire look of the site ============================================================ HOW CSS WORKS (the 30-second version): selector { property: value; } .project { color: red; } ← every element with class="project" h1 { ... } ← every

tag #contact { ... } ← the one element with id="contact" The browser reads top-to-bottom; later rules can override earlier ones. /* like this *​/ is a comment. ✏️ THE MOST IMPORTANT EDIT SPOT IS RIGHT BELOW: the :root block. Change a value there and it updates everywhere at once. ============================================================ */ /* ============================================================ 1. DESIGN TOKENS - your design system in one place ------------------------------------------------------------ These are CSS "custom properties" (variables). Everywhere else in this file says var(--ink) instead of repeating #1A1A1A, so one edit here recolours the whole site. ✏️ EDIT HERE to change colours, fonts, or spacing site-wide. ============================================================ */ :root { /* --- colours (from your notes, page 3) --- */ --bg: #FAFAF8; /* warm near-white background */ --ink: #1A1A1A; /* main text - soft black */ --ink-soft: #6b6b66; /* secondary text (dates, captions) */ --accent: #140110; /* near-black deep plum - used sparingly */ --plum: #5b2a5e; /* mid plum - links & hovers */ --lilac: #cdb9d4; /* pale lilac - dots, borders, whispers */ --line: #e8e6e0; /* hairline borders */ --green: #2f9e44; /* the “available for work” dot */ /* --- fonts (loaded in index.html ) --- */ --font-head: "Fraunces", Georgia, serif; --font-body: "DM Sans", Arial, sans-serif; /* --- layout --- */ --content-width: 680px; /* your note: don't stretch text full width; keep it centred. This is the single column everything sits in. */ } /* ============================================================ 2. RESET + BASE ------------------------------------------------------------ Browsers ship with inconsistent default margins/sizing. These few lines level the playing field. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; /* width includes padding - saner maths */ } html { scroll-behavior: smooth; /* side-nav clicks glide, not jump */ } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 300; font-size: 1.0625rem; /* 17px - rem units scale with the visitor's browser font settings */ line-height: 1.65; /* breathing room between lines */ -webkit-font-smoothing: antialiased; } /* default link style - plum, underlined on hover only */ a { color: var(--plum); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* respect visitors who turn off animations in their OS settings. This kills every transition/animation for them in one rule. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ============================================================ 3. HERO - first screen: dot canvas + name/location/title ============================================================ */ .hero { position: relative; /* so the canvas can pin itself to it */ min-height: 100svh; /* fill the screen (svh = safe screen height, correct on mobile too) */ display: flex; /* flexbox: the modern way to centre */ align-items: center; /* …vertically */ justify-content: center; /* …horizontally */ text-align: center; overflow: hidden; padding: 2rem; } /* the dot-art crest - the Roman arch drawn in dots. It lives ABOVE the headline, never behind text (readability: low-contrast texture under words makes them measurably harder to read, so art and text each get their own space). ✏️ EDIT HERE: make it bigger/smaller by changing the 240px. */ .dot-crest { display: block; width: min(240px, 55vw); /* 240px on desktop, shrinks on phones */ aspect-ratio: 4 / 3; /* height stays in proportion to width */ margin: 0 auto 1.6rem; /* centred, with air below it */ } .hero-inner { position: relative; max-width: var(--content-width); /* entrance: one gentle fade-up, then done. Your note: no slow animations that don't add anything - 0.7s, once. */ animation: rise 0.7s ease-out both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* --- green “available for work” pill --- */ .available { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; /* huge radius = pill shape */ padding: 0.35rem 0.9rem; background: rgba(255, 255, 255, 0.6); margin-bottom: 2rem; } .available-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); /* the soft pulse - box-shadow grows and fades */ animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(47, 158, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); } } /* --- name --- */ .hero-name { font-family: var(--font-head); font-weight: 400; /* clamp(min, preferred, max): the font scales with the window width but never below 2.6rem or above 4.6rem. This one line is most of “mobile friendly” for headings. */ font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.05; letter-spacing: -0.01em; } /* the italic “Iffy” - Fraunces italics are the jewellery here */ .hero-name em { font-style: italic; color: var(--accent); } .hero-meta { margin-top: 1rem; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .hero-pitch { margin: 1.6rem auto 0; max-width: 34ch; /* ch = width of a “0” - keeps the line comfortably short for reading */ font-size: 1.125rem; } .hero-links { margin-top: 2rem; display: flex; justify-content: center; gap: 2rem; font-size: 0.95rem; } /* the “scroll” whisper at the bottom of the hero */ .scroll-hint { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); z-index: 1; } /* ============================================================ 4. SIDE CONTENTS NAV (desktop only) ------------------------------------------------------------ Fixed to the left edge; script.js adds .active to the link for the section currently on screen. ============================================================ */ .side-nav { position: fixed; /* stays put while the page scrolls */ left: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.9rem; z-index: 10; } .side-link { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.55; transition: opacity 0.25s, color 0.25s, padding-left 0.25s; border-left: 2px solid transparent; padding-left: 0.7rem; } .side-link:hover { opacity: 1; text-decoration: none; } /* the highlighted state - plum text + plum tick mark */ .side-link.active { opacity: 1; color: var(--plum); border-left-color: var(--plum); } /* hide the side nav when the window is narrow (tablet/phone) - it would crowd the content. Sections are short; scrolling works. */ @media (max-width: 980px) { .side-nav { display: none; } } /* ============================================================ 5. SECTIONS - shared bones for Projects/Experience/Contact ============================================================ */ .section { max-width: var(--content-width); margin: 0 auto; /* auto left/right margins = centred */ padding: 7rem 1.5rem 2rem; /* big top padding = generous white space between sections */ } .section-title { font-family: var(--font-head); font-weight: 400; font-size: 2rem; margin-bottom: 2.5rem; } /* scroll-reveal: script.js adds .visible when a section enters the viewport; this fades it up. Subtle and fast. */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ 6. PROJECTS ============================================================ */ .project-list { list-style: none; /* remove the default bullet points */ } .project { padding: 1.8rem 0; border-top: 1px solid var(--line); cursor: default; transition: padding-left 0.3s ease; } .project:last-child { border-bottom: 1px solid var(--line); } /* tiny nudge right on hover - feedback without fireworks */ .project:hover { padding-left: 0.6rem; } .project-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; /* tags drop below the title on narrow screens instead of clipping */ } .project h3 { font-family: var(--font-head); font-weight: 500; font-size: 1.35rem; } .project:hover h3 { color: var(--plum); } .project-tags { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .project p { margin-top: 0.6rem; color: var(--ink-soft); max-width: 56ch; } /* placeholder “coming soon” cards - quieter, dashed top border. ✏️ When the project is real, just remove class="project-soon". */ .project-soon { opacity: 0.55; } .project-soon h3 { font-style: italic; } /* --- the cursor-following preview card --- UX rules baked in (script.js enforces the first two): 1. It APPEARS AT the cursor - new info shows up where the eye already is (no head-turning across the screen). 2. It never leaves the viewport - it flips to the other side of the cursor near edges instead of getting cut off. 3. pointer-events:none - it can never block a click. */ .cursor-preview { position: fixed; /* positioned relative to the window; script.js moves it with transform */ top: 0; left: 0; pointer-events: none; z-index: 50; display: flex; /* HORIZONTAL layout: image | caption. A short, wide card hugs the cursor - a tall card pushed content far below it. */ align-items: stretch; width: 330px; overflow: hidden; /* clips the image to the rounded corners */ background: var(--accent); /* the deep plum, finally let loose */ color: #f5eef4; font-size: 0.75rem; line-height: 1.45; border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 1, 16, 0.28); opacity: 0; /* hidden until JS shows it */ transform: translate(-40px, -40px); transition: opacity 0.18s ease; } .cursor-preview.on { opacity: 1; } /* the screenshot / demo clip - a thumbnail on the card's left side */ .cursor-preview img, .cursor-preview video { display: block; width: 132px; height: 96px; /* this also sets the card's height */ object-fit: cover; /* fill the box, crop overflow - no squish */ flex-shrink: 0; /* caption can't squash the image */ } /* the one-line caption to the right of the image */ .cursor-preview .caption { align-self: center; /* vertically centred next to the image */ padding: 0.5rem 0.85rem; } /* no cursor on touch screens → no preview. (hover:none) is true on phones and tablets. */ @media (hover: none) { .cursor-preview { display: none; } } /* ============================================================ 7. EXPERIENCE ============================================================ */ .exp-list { list-style: none; } .exp { display: grid; /* two columns: year | details */ grid-template-columns: 5.5rem 1fr; gap: 1.2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); } .exp:last-child { border-bottom: 1px solid var(--line); } .exp-when { font-size: 0.85rem; color: var(--ink-soft); padding-top: 0.25rem; font-variant-numeric: tabular-nums; /* digits align vertically */ } .exp-what h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; } .exp-what p { margin-top: 0.3rem; font-size: 0.95rem; color: var(--ink-soft); } /* the single-column collapse on small screens: year above title */ @media (max-width: 540px) { .exp { grid-template-columns: 1fr; gap: 0.2rem; } } /* toolkit line - a plain, unrated list of tools. Quiet on purpose: it is there for recruiters scanning for keywords, not for show. */ .toolkit { margin-top: 2.4rem; text-align: center; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-soft); line-height: 2; } /* awards line - quiet, italic, prestigious without badges */ .awards { margin-top: 2rem; font-family: var(--font-head); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); text-align: center; line-height: 2; } /* the single human line under the awards - small and unshowy */ .beyond { margin-top: 1.2rem; text-align: center; font-size: 0.85rem; color: var(--ink-soft); } /* ============================================================ 8. CONTACT + FOOTER ============================================================ */ .section-contact { text-align: center; padding-bottom: 6rem; } .contact-line { max-width: 38ch; margin: 0 auto 2.2rem; } /* the one loud plum moment on the whole site */ .contact-button { display: inline-block; background: var(--accent); color: #f5eef4; font-size: 1.05rem; padding: 0.9rem 2.2rem; border-radius: 999px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .contact-button:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 1, 16, 0.25); } .contact-alt { margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-soft); } .footer { text-align: center; padding: 2.5rem 1rem; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--line); }