/* ========================================================================== noahtrevino.studio — style.css -------------------------------------------------------------------------- THE FIBONACCI GRID Measured from the Figma comp, the five page columns are proportioned 5 : 3 : 5 : 8 : 13 — consecutive-ish fibonacci numbers summing to 34. They're expressed as `fr` units so the grid scales with the viewport while keeping the ratios exact. col 1 (5fr) bio + contact col 2 (3fr) project index (studio / photo lists) col 3 (5fr) active project name + description col 4 (8fr) image area, left col 5 (13fr) image area, right Spacing also steps through fibonacci: 1, 2, 3, 5, 8, 13, 21 × base unit. Adjust --u to scale the whole rhythm at once. ========================================================================== */ :root { /* -- color --------------------------------------------------------------- Two modes. Studio (default): blue on white. Photo: red on black. Everything derives from these three variables, so switching modes is just the .theme-photo class on (toggled in main.js). */ --ink: #006EB8; --paper: #ffffff; --placeholder: #d9d9d9; /* -- fibonacci spacing scale ------------------------------------------- */ --u: 8px; /* base unit */ --s1: calc(var(--u) * 1); /* 8px */ --s2: calc(var(--u) * 2); /* 16px */ --s3: calc(var(--u) * 3); /* 24px */ --s5: calc(var(--u) * 5); /* 40px */ --s8: calc(var(--u) * 8); /* 64px */ --s13: calc(var(--u) * 13); /* 104px */ /* -- type --------------------------------------------------------------- Typeface: Ellograph (regular + heavy), by Connary Fagen. "ellograph-cf" is the name Adobe Fonts uses; the self-hosted @font-face below registers the same name, so --font works with either loading method. System monospace stands in until one is set up. */ --font: "ellograph-cf", "Ellograph CF", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --heavy: 900; /* Ellograph Heavy (Adobe kit serves it at 900) */ --text: 13px; --leading: 1.45; } /* LOADING ELLOGRAPH — pick ONE of these two routes: A) Adobe Fonts (easiest if you have Creative Cloud): fonts.adobe.com → Ellograph CF → Add to Web Project (Regular + Heavy) → copy the tag into of index.html, above style.css. Done — no files needed. B) Self-hosted (buy a webfont license from connary.com): put the woff2 files in css/fonts/ and un-comment: @font-face { font-family: "ellograph-cf"; src: url("fonts/ellograph-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "ellograph-cf"; src: url("fonts/ellograph-heavy.woff2") format("woff2"); font-weight: 800; font-display: swap; } */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--text); line-height: var(--leading); text-transform: lowercase; /* the whole site displays lowercase, no matter how source text is capitalized */ transition: background-color 0.35s ease, color 0.35s ease; } /* -- photo mode: red on black --------------------------------------------- */ body.theme-photo { --ink: #E31F26; --paper: #000000; --placeholder: #1f1f1f; } /* -- page transitions ------------------------------------------------------ Moving between projects cross-fades the page (View Transitions API, wired up in main.js → withFade). These rules only set the fade timing — matched to the theme color transition on body above, so a project switch and a theme flip read as one motion. Browsers without support skip the fade and swap instantly. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; } a { color: inherit; } /* ========================================================================== PAGE GRID ========================================================================== */ .page { display: grid; grid-template-columns: 5fr 3fr 5fr 8fr 13fr; /* ← the fibonacci grid */ grid-template-rows: auto 1fr; /* header row, content row */ gap: var(--s3) var(--s2); height: 100vh; /* page is pinned to the viewport… */ overflow: hidden; /* …only the gallery scrolls (see .gallery) */ padding: var(--s2) var(--s2) 0 var(--s2); max-width: 2600px; margin: 0 auto; } /* left columns never scroll the page; if one outgrows the viewport (long photo list on a short window), it scrolls quietly by itself */ .bio, .index, .project-info { overflow-y: auto; scrollbar-width: none; } /* -- header ---------------------------------------------------------------- */ .site-header { grid-column: 1 / -1; grid-row: 1; } .logo img { height: 76px; display: block; } /* inline-flex + fit-content keeps the clickable area exactly the size of the logo mark — clicks elsewhere in the header row do nothing */ .logo { text-decoration: none; display: inline-flex; width: fit-content; } /* Logo swaps with the theme: both versions are in the HTML, only one shows. (Selectors include `img` to match the specificity of `.logo img` above — a bare class here would lose to its display: block.) */ .logo img.logo-red { display: none; } body.theme-photo .logo img.logo-blue { display: none; } body.theme-photo .logo img.logo-red { display: block; } .logo-fallback { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: var(--heavy); font-size: 26px; } /* -- column 1: bio --------------------------------------------------------- */ .bio { grid-column: 1; grid-row: 2; } .bio p { margin-bottom: var(--s2); max-width: 34ch; } .contact a { text-decoration: underline; } /* -- column 2: index ------------------------------------------------------- */ .index { grid-column: 2; grid-row: 2; } .index h2 { font-size: var(--text); font-weight: var(--heavy); margin-top: var(--s2); } .index h2:first-child { margin-top: 0; } .index ul { list-style: none; } .index a { text-decoration: none; } .index a:hover, .index a.active { text-decoration: underline; } /* -- column 3: project info ------------------------------------------------ */ .project-info { grid-column: 3; grid-row: 2; } .project-info h1 { font-size: var(--text); font-weight: 400; } .project-info p { margin-bottom: var(--s2); } .project-info h1 strong { font-weight: var(--heavy); } /* -- columns 4–5: gallery -------------------------------------------------- JUSTIFIED MOSAIC (like the previous site): images keep their natural aspect ratios — never cropped — and pack into rows that fill the full width. Row-building happens in js/main.js using the aspect ratios recorded in js/content.js; each row is a flex line whose items get explicit pixel sizes, so nothing here dictates shape. */ .gallery { grid-column: 4 / -1; grid-row: 2; overflow-y: auto; /* the one scrolling region on the page */ scrollbar-gutter: stable; /* keeps width constant when the scrollbar appears, so mosaic rows never overflow */ padding-bottom: var(--s3); scrollbar-width: thin; scrollbar-color: var(--placeholder) transparent; } .mosaic-row { display: flex; gap: var(--s1); margin-bottom: var(--s1); } .gallery img { display: block; cursor: zoom-in; /* hints that a full-screen preview is available */ } /* looping video clips sit in the mosaic exactly like images */ .gallery video { display: block; object-fit: cover; cursor: zoom-in; /* clips open in the lightbox too */ } /* ========================================================================== LIGHTBOX — full-screen image preview Opened by clicking a gallery image; closed by clicking anywhere (or Esc). ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--s3); background: rgba(0, 0, 0, 0.92); cursor: zoom-out; } .lightbox.open { display: flex; } .lightbox img, .lightbox video { max-width: 100%; max-height: 100%; object-fit: contain; /* full media, uncropped, as large as fits */ display: block; } /* ========================================================================== RESPONSIVE Below ~900px the five columns collapse into a single stack: bio → index → project info → images. ========================================================================== */ @media (max-width: 900px) { /* placeholder only — mobile is a later pass. Unlock the viewport pin so small screens at least scroll normally. */ .page { grid-template-columns: 1fr; grid-template-rows: none; height: auto; overflow: visible; } .gallery { overflow-y: visible; } .site-header, .bio, .index, .project-info, .gallery { grid-column: 1; grid-row: auto; } .gallery { grid-template-rows: repeat(3, 40vh); } }