/* ============ J.E. Hernández — shared styles ============ Colors live in :root below (light theme) and html.dark (dark theme). Fonts in the @font-face blocks. Page layout: left-aligned, generous type. */ @font-face { font-family: 'Academico'; src: url(../assets/fonts/Academico-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Academico'; src: url(../assets/fonts/Academico-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Academico'; src: url(../assets/fonts/Academico-Italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Academico'; src: url(../assets/fonts/Academico-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Mallory'; src: url(../assets/fonts/Mallory-Book.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Mallory'; src: url(../assets/fonts/Mallory-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Mallory'; src: url(../assets/fonts/Mallory-BookItalic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Mallory'; src: url(../assets/fonts/Mallory-BoldItalic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ============ COLORS ============ Light theme is the default; html.dark below inverts page + text. The accent trio (main/icon/deep) works on both and doesn't flip. */ :root { --color-main: #f00; /* accent at full strength: hovers, the date on black */ --color-icon: #d40000; /* icons + hints at rest (teponaztli, arrows) */ --color-deep: #8a0008; /* dim landing chrome (menu at rest) */ --color-page: #f0f0f0; /* inner-page + overlay background */ --ink: #020202; /* text on the pages */ --color-overlay: 240, 240, 240; /* --color-page as bare R,G,B for the overlay's rgba() */ --color-modal: #fdfdfd; /* "why this date?" card background (flips with the theme) */ } html.dark { --color-page: #0f0f0f; --ink: #fdfdfd; --color-overlay: 15, 15, 15; --color-modal: #161616; } /* smooth theme swap: site.js adds this class for ~0.7s around the toggle so everything cross-fades instead of snapping (and hovers stay instant otherwise) */ html.theming, html.theming body, html.theming *, html.theming *::before { transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease !important; } /* ============ FONT SWITCH ============ Pick the site typeface here (this is the "font value"): 0 = 'Academico' serif, Century Schoolbook flavor 1 = 'Mallory' sans, Frere-Jones (Book + Bold weights) Change the name on the next line to switch the whole site. To add a font "2": copy the four Mallory @font-face blocks above, point them at your new .woff2 files with a new family name, then put that name here. Only 400 (regular), 700 (bold) and their italics are ever used, so four files per family is all you need. */ :root { --site-font: 'Academico'; } * { box-sizing: border-box; } /* scrollbars are hidden on as well as : inner pages scroll on , and a visible window scrollbar would shrink the viewport there, nudging the fixed menu/date/corner-skull left relative to the landing page */ html, body { -ms-overflow-style: none; scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } body { background: #000; margin: 0; font-family: var(--site-font), 'Academico', Georgia, serif; } /* ============ header: long count date + menu ============ */ .lc-wrap { position: fixed; /* top + height give the date the SAME 52px band as the menu and the top-right mini skull; align-items:center then drops the text to that band's vertical centre, lining it up with them (desktop menu, mobile mini skull). Raise `top` to move the whole band down. */ top: 1.3vmax; height: 52px; left: 50%; transform: translateX(-50%); z-index: 30; color: var(--color-main); font-weight: 700; font-size: clamp(17px, 3.4vmin, 30px); letter-spacing: 0.14em; white-space: nowrap; transition: left 0.5s ease, transform 0.5s ease; display: flex; align-items: center; gap: 0.55em; } body.overlay-open .lc-wrap, body.page .lc-wrap { left: 2.5vmax; transform: none; color: var(--ink); } .why-btn { display: none; width: 1.25em; height: 1.25em; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: inherit; font: inherit; font-size: 0.72em; line-height: 1; cursor: pointer; padding: 0; } body.overlay-open .why-btn, body.page .why-btn { display: inline-flex; align-items: center; justify-content: center; } /* both "?" buttons (date + Cuicatl) turn the accent color on hover, the same as links (.sheet a:hover / .why-card a:hover) — the ? glyph and its circle border both use currentColor, so setting color recolors the whole button */ .why-btn:hover { color: var(--color-main); } .menu { position: fixed; top: 1.3vmax; /* same top as the corner skull... */ height: 52px; /* ...and centered against its 52px height */ right: calc(2.5vmax + 72px); /* clears the corner skull */ z-index: 30; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); font-size: clamp(14px, 2vmin, 18px); } .menu a { color: var(--color-deep); text-decoration: none; } .menu a:hover { color: var(--color-main); } body.overlay-open .menu a, body.page .menu a { color: var(--ink); } body.overlay-open .menu a:hover, body.page .menu a:hover { color: var(--color-main); } .menu svg { width: 1.15em; height: 1.15em; display: block; } @media (max-width: 700px) { .lc-wrap { top: 1.3vmax; font-size: clamp(15px, 4.6vw, 22px); } /* stays in the mini-skull band */ .menu { top: auto; bottom: 2.5vmax; /* matches the light/dark toggle's height */ right: 2.5vmax; height: auto; /* single line: tighter gaps + smaller type so the icon never wraps */ flex-wrap: nowrap; white-space: nowrap; justify-content: flex-end; max-width: calc(100vw - 5vmax); gap: clamp(6px, 2.2vw, 12px); font-size: clamp(11px, 3.4vw, 14px); /* translucent dark scrim so the menu reads on any background color */ background: rgba(0, 0, 0, 0.7); padding: 0.5em 0.85em; border-radius: 3px; } /* fixed light links on the dark scrim — readable in both themes */ .menu a, body.page .menu a, body.overlay-open .menu a { color: #f0f0f0; } .menu a:hover, body.page .menu a:hover, body.overlay-open .menu a:hover { color: var(--color-main); } } /* ============ mini corner skull (all pages) ============ */ canvas#mini { position: fixed; top: 1.3vmax; right: 2.5vmax; width: 52px; height: 52px; z-index: 35; pointer-events: none; } a#corner { position: fixed; top: 1.3vmax; right: 2.5vmax; width: 52px; height: 52px; z-index: 36; display: block; } /* ============ light/dark toggle (injected by js/site.js) ============ */ #themeT { position: fixed; left: 2.5vmax; /* mobile / base; desktop nudges left in the @media below */ bottom: 2.5vmax; z-index: 40; width: 34px; height: 34px; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink); opacity: 0.7; transition: opacity 0.2s ease; } #themeT:hover { opacity: 1; } #themeT svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.45s ease, transform 0.45s ease; } /* light theme shows the moon (click -> dark); dark shows the sun (click -> light) */ #themeT .sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } #themeT .moon { opacity: 1; transform: rotate(0deg) scale(1); } html.dark #themeT .sun { opacity: 1; transform: rotate(0deg) scale(1); } html.dark #themeT .moon { opacity: 0; transform: rotate(90deg) scale(0.6); } /* desktop only: nudge the toggle a little further left (smaller = closer to the edge). Mobile keeps the 2.5vmax above. */ @media (min-width: 701px) { #themeT { left: 1.3vmax; } } /* ============ "why this date" modal ============ */ .why-modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 5vmin; } .why-modal.open { display: flex; } .why-card { position: relative; max-width: 34rem; background: var(--color-modal); color: var(--ink); border: 1px solid var(--color-main); padding: 2.2rem 2.4rem; font-size: clamp(15px, 2.2vmin, 18px); line-height: 1.55; } .why-close { position: absolute; top: 0.4rem; right: 0.7rem; background: none; border: none; color: var(--color-main); font-size: 1.6rem; cursor: pointer; line-height: 1; } /* links inside the modal follow the site convention (like .sheet a): body-ink underlined, accent on hover — never the browser's default blue */ .why-card a { color: inherit; text-decoration: underline; } .why-card a:hover { color: var(--color-main); } /* ============ inner pages (left-aligned, big type) ============ */ body.page { background: var(--color-page); color: var(--ink); } .sheet { max-width: 70rem; margin: 0; /* the 3rd value (5vmax) = space under the footer on every page */ padding: calc(2.5vmax + 80px) 6vmin 5vmax 8vmin; font-size: clamp(17px, 2.4vmin, 21px); line-height: 1.55; } @media (max-width: 700px) { /* extra bottom room so the last line clears the fixed bottom-right menu */ .sheet { padding-bottom: calc(5vmax + 4rem); } } .sheet h1 { font-size: clamp(34px, 7vmin, 64px); font-weight: 700; line-height: 1.05; margin: 0 0 1.4rem; } .sheet h2 { font-size: clamp(22px, 3.6vmin, 32px); margin: 2.6rem 0 0.9rem; font-weight: 700; } .sheet p { margin: 0 0 1em; } .sheet a { color: var(--ink); text-decoration: underline; } .sheet a:hover { color: var(--color-main); } .sheet .muted { opacity: 0.75; font-size: 0.9em; } .center { text-align: center; } .embed { margin: 1.8rem 0; max-width: 54rem; } .embed iframe { width: 100%; border: 0; display: block; } .embed iframe.video { aspect-ratio: 16 / 9; height: auto; } /* bio layout: text left, full (uncropped) photo right; photo drops below on phones */ .bio-flex { display: flex; gap: 3rem; align-items: flex-start; } .bio-flex .bio-text { flex: 1; min-width: 0; } .bio-photo { display: block; width: min(58%, 980px); height: auto; margin: 0; } @media (max-width: 700px) { .bio-flex { display: block; } .bio-photo { width: min(340px, 85%); margin-top: 1.6rem; } } /* the "featured work / full list of works" line at the foot of each work page (filled by js/site.js into the

shell) */ .worknav { margin-top: 3rem; } .works-list p { margin: 0 0 0.45em; } .works-list h2 { margin-top: 2.8rem; } .jump { display: flex; flex-wrap: wrap; gap: 0.4em 1.1em; margin: 1rem 0 2rem; font-size: 0.95em; } /* ============ featured-work banner gallery (work.html) ============ Banners are pre-cropped 1200x280 images in assets/work/.jpg. At rest they sit slightly faded (still legible); hover brings them to full strength. All are the same height unless a long title wraps, in which case that banner grows. No vertical gaps: they stack flush. */ .wgallery { margin-top: 2.2rem; max-width: 62rem; } .wgallery .wbanner { position: relative; display: flex; align-items: center; min-height: clamp(84px, 12vmin, 118px); padding: 0.7em 1.3em; background-size: cover; background-position: center; text-decoration: none; opacity: 0.82; transition: opacity 0.2s ease; } .wgallery .wbanner:hover { opacity: 1; } .wgallery .wbanner::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); /* scrim so titles read on any photo */ } .wgallery .wbanner span { position: relative; color: #fff; font-weight: 700; font-size: clamp(19px, 2.8vmin, 28px); line-height: 1.15; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); } #topBtn { position: fixed; right: 2.5vmax; bottom: 2.5vmax; z-index: 40; background: none; border: 1px solid var(--ink); color: var(--ink); font: inherit; font-size: clamp(12px, 1.8vmin, 15px); padding: 0.45em 0.9em; cursor: pointer; } #topBtn:hover { background: var(--ink); color: var(--color-page); } @media (max-width: 700px) { #topBtn { bottom: calc(4vmax + 3rem); } } /* about page: wider canvas so the big photo and the text both breathe */ .about-sheet { max-width: 100rem; padding-right: 8vmin; } .about-sheet .bio-flex { gap: clamp(2rem, 4vw, 5rem); } .about-sheet .bio-text { flex: 1 1 30rem; } /* the "Hello. I'm a composer." title, a notch smaller than other page titles */ .about-sheet h1 { font-size: clamp(26px, 4.6vmin, 44px); } /* ============ footer (every page, filled by js/site.js) ============ */ .foot { margin-top: 4.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(128, 128, 128, 0.45); font-size: 0.85em; } .foot p { margin: 0; } /* ============ contact form ============ */ .cform { margin-top: 1.5rem; display: grid; gap: 0.9rem; max-width: 44rem; } .cform input, .cform textarea { width: 100%; background: rgba(128, 128, 128, 0.14); border: 1px solid var(--ink); color: var(--ink); font: inherit; padding: 0.6em 0.8em; } .cform ::placeholder { color: var(--ink); opacity: 0.55; } .cform button { justify-self: start; background: var(--ink); color: var(--color-page); border: none; font: inherit; padding: 0.6em 1.4em; cursor: pointer; } .cform button:hover { background: var(--color-main); color: #fff; } .copy-email { cursor: pointer; }