/* ============================================================ swissstyle.css — Swiss / brutalist / minimalist treatment. Loaded AFTER style.css, only on the pages it's meant for: home · about · now · active · lorem · attitude (Linking the file is what opts a page in — nothing else.) The ONLY per-page detail is the colour, declared inline on each page's element: --paper = background, --ink = foreground. Everything below is generic and reads those two variables. ============================================================ */ :root { /* Fallbacks if a page forgets to declare its colours. */ --paper: #DD6A3C; --ink: #F2EAD8; /* Re-paint every variable the base stylesheet draws with, so all of style.css follows the page ink in light AND dark mode. */ --bg: var(--paper); --bg-dark: var(--paper); --text: var(--ink); --text-dark: var(--ink); --title: var(--ink); --title-dark: var(--ink); --avatar-border: var(--ink); --avatar-border-dark: var(--ink); --item-bar: var(--ink); } /* ---- The whole viewport gets the colour (light + dark) ---- */ html { background-color: var(--paper); } body { background-color: var(--paper); color: var(--ink); min-height: 100vh; } /* ---- Printed-paper grain over everything ---- */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; mix-blend-mode: multiply; opacity: 0.07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Remove ONLY the "rise up on appear" entrance animation. Other animations are JS-driven (now's table fade, active's scramble + timeline) and are left untouched. ---- */ .title, .sub, .avatar, .header, .page-head, .home-hero, .home-nav, .active-head, .button-container, .extra-buttons { animation: none !important; opacity: 1 !important; } /* ---- Type + container. Content is left-aligned (leading) and the title shares that same left edge, so body text lines up under the headline. ---- */ body { font-family: 'Geist', sans-serif; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 820px; margin: 0; padding: 4vh 5vw 6em; text-align: left; --swiss-title-size: clamp(5.1rem, 18vw, 15rem); } /* ---- Header block: big title on the leading edge, small subtitle trailing it, both pinned to the bottom of the first screen. ---- */ .page-head { position: fixed; left: 5vw; right: 5vw; bottom: 8vh; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; pointer-events: none; } .title { margin: 0; flex: 1 1 auto; font-size: var(--swiss-title-size); line-height: 0.76; font-weight: 700; letter-spacing: -0.03em; } .titlelink, .titlelink:hover { font-weight: 700 !important; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; box-shadow: none; } .page-head a, .active-head a, .home-hero a { pointer-events: auto; } /* Subtitle: trailing the title, smaller, bold, uppercase, ~two lines. */ .sub { flex: 0 0 auto; align-self: flex-end; margin: 0 0 0.4em 0; max-width: 16ch; text-align: right; font-size: clamp(0.68rem, 1vw, 0.86rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; color: var(--ink); } .top-head { position: static; display: block; margin: 0 0 2rem; pointer-events: auto; } .top-head .sub { display: none; } body:has(.top-head) { padding-top: 8vh; padding-bottom: 6em; } .bottom-head { display: block; } .bottom-content { max-width: 820px; width: 100%; margin-bottom: 2rem; pointer-events: auto; } .bottom-content p:first-child, .bottom-content table { margin-top: 0; } .bottom-title-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; } .bottom-title-row .sub { position: fixed; right: calc(5vw + 1lh); bottom: 8vh; margin: 0; max-width: none; white-space: nowrap; transform: rotate(90deg); transform-origin: right bottom; } /* Section headings — quiet uppercase labels. */ h2 { font-size: clamp(1.05rem, 2.5vw, 1.4rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2.2em; color: var(--ink); } h3, h4, h5, h6 { color: var(--ink); } .text-columns { max-width: calc(((100vw - 10vw - (5 * clamp(0.75rem, 1.25vw, 1.25rem))) / 6 * 2) + clamp(0.75rem, 1.25vw, 1.25rem)); } .text-columns > * { break-inside: avoid; } @media (max-width: 720px) { .text-columns { max-width: 820px; } } /* ---- Links — bold, no resting underline; the old blue gradient is replaced by a printed-marker invert on hover. ---- */ a:link, a:visited { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; -webkit-background-clip: border-box; background-clip: border-box; font-weight: 700; text-decoration: none; box-shadow: none; transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } a:hover { color: var(--paper); background: var(--ink); -webkit-text-fill-color: var(--paper); box-shadow: 0 0 0 0.1em var(--ink); text-decoration: none; } a.titlelink:link, a.titlelink:visited, a.titlelink:hover { background: none; box-shadow: none; color: var(--ink); -webkit-text-fill-color: currentColor; } /* ---- Attitude / item bars: ink, square, a touch bolder. ---- */ .item::before { background-color: var(--ink); width: 4px; } /* ============================================================ NOW — keep the JS table fade; left-align the first column. ============================================================ */ #animated-table th { color: var(--ink); text-align: left; padding-right: 1.5em; font-size: clamp(0.68rem, 1vw, 0.86rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } #animated-table { border-collapse: separate; border-spacing: 0 0.35rem; margin-left: 0; } #animated-table td { padding-left: 0; text-align: left; font-size: clamp(0.68rem, 1vw, 0.86rem); font-weight: 500; line-height: 1.2; opacity: 0; transition: opacity 0.25s ease; } #animated-table td.visible { opacity: 1; } #animated-table th, #animated-table td { width: auto; padding-top: 0.08rem; padding-bottom: 0.08rem; } #animated-table th { min-width: 9rem; } #animated-table tr { opacity: 1 !important; } #counter { color: var(--ink); } /* ============================================================ HOME — poster layout: menu across the top in three left-aligned columns; big two-line wordmark bottom-left; tagline trailing; avatar large and printed in the background. ============================================================ */ body:has(.home-hero) { max-width: none; min-width: 320px; padding: 2.2rem 5vw calc(8vh + 10rem); min-height: 100vh; position: relative; overflow: hidden; --home-inset-x: 5vw; --home-inset-y: 8vh; --home-grid-gap: clamp(0.75rem, 1.25vw, 1.25rem); --home-rule: color-mix(in srgb, var(--ink) 70%, transparent); --home-title-size: var(--swiss-title-size); --home-title-block: calc(var(--home-title-size) * 0.76 * 2); } body:has(.home-hero)::after { content: ""; position: fixed; left: var(--home-inset-x); right: var(--home-inset-x); bottom: calc(var(--home-inset-y) + var(--home-title-block) + 1rem); height: 1px; background: var(--home-rule); z-index: 1; pointer-events: none; } .home-nav { position: fixed; top: 2.2rem; left: var(--home-inset-x); right: var(--home-inset-x); z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--home-grid-gap); line-height: 1.35; margin: 0; font-size: clamp(0.68rem, 1vw, 0.86rem); } .home-nav .nav-col { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .home-nav .nav-col:nth-child(1) { grid-column: 1 / span 1; } .home-nav .nav-col:nth-child(2) { grid-column: 2 / span 1; } .home-nav .nav-col:nth-child(3) { grid-column: 6 / span 1; } .home-nav .nav-col:last-child { align-items: flex-end; text-align: right; } .home-nav .section-label { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--ink); margin: 0 0 0.45em 0; font-size: inherit; } .home-nav a { text-transform: uppercase; font-weight: 500; margin-right: 0; } .home-meta { position: fixed; left: 55vw; top: 2.2rem; z-index: 2; margin: 0; grid-column: 1 / span 2; font-size: clamp(0.68rem, 1vw, 0.86rem); line-height: 1.2; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .home-meta::after { content: ""; position: fixed; top: 2.2rem; bottom: var(--home-inset-y); left: 20vw; width: 1px; background: var(--home-rule); } .home-hero { position: fixed; left: var(--home-inset-x); right: var(--home-inset-x); bottom: var(--home-inset-y); z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--home-grid-gap); align-items: end; } .home-hero .title { grid-column: 1 / span 4; text-transform: none; font-size: var(--home-title-size); line-height: 0.76; letter-spacing: -0.045em; } .home-hero .sub { position: fixed; right: calc(var(--home-inset-x) + 2lh); bottom: var(--home-inset-y); margin-bottom: 0; max-width: none; white-space: nowrap; font-size: clamp(0.68rem, 1vw, 0.86rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; transform: rotate(90deg); transform-origin: right bottom; } /* Large printed avatar, closer to the original treatment. */ .home-bg-avatar { position: fixed; z-index: 0; left: 10vw; bottom: 6vh; width: min(64vw, 52vh); height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: none; border-radius: 50%; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: 0.85; pointer-events: none; } @media (max-width: 640px) { body:has(.home-hero)::after { bottom: calc(var(--home-inset-y) - 1.25rem); } .home-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--home-grid-gap); } .home-nav .nav-col:nth-child(1) { grid-column: 1; } .home-nav .nav-col:nth-child(2) { grid-column: 2; } .home-nav .nav-col:nth-child(3) { grid-column: 3; } .home-meta { left: var(--home-inset-x); top: 9.75rem; } .home-meta::after { display: none; } .home-hero .title { grid-column: 1 / span 5; font-size: clamp(4.4rem, 24vw, 7.5rem); } .home-bg-avatar { width: 72vw; height: auto; } .home-hero .sub { right: calc(var(--home-inset-x) + 1lh); top: 50%; bottom: auto; transform: translateY(-50%) rotate(90deg); } .home-hero .sub br { display: none; } } @media (max-width: 768px) { .active-head .active-summary-workouts { display: none !important; } } /* ============================================================ ACTIVE — title + stat subtitle sit just above the pinned timeline. The timeline keeps its full-bleed layout & behaviour; only the hover line changes (solid ink, same as the bars — no gradient). ============================================================ */ body:has(.active-head) { max-width: none; padding: 4vh 5vw calc(8vh + 10rem); } body:has(#dash) { /* beat style.css's id-level rule (loaded later) */ margin-top: 0; margin-bottom: 0; overflow: hidden; } .active-head { position: fixed; left: 5vw; right: 5vw; bottom: 8vh; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; pointer-events: none; } .active-head .title { flex: 1 1 auto; } .active-head .sub { position: relative; right: 3lh; margin-bottom: 0; max-width: none; transform: rotate(90deg); transform-origin: right bottom; } .active-head .sub span { display: block; } .timeline-outer { height: 100vh; } .timeline-scroll, .tl-fade, .tl-scrub { top: 50%; bottom: auto; transform: translateY(-50%); } .tl-line { background: var(--ink); } /* ============================================================ Dark mode — keep the colour background; do NOT fall back to the base stylesheet's dark palette. ============================================================ */ @media (prefers-color-scheme: dark) { html { background-color: var(--paper); } body { background-color: var(--paper); color: var(--ink); } h1, h2, h3, h4, h5, h6 { color: var(--ink); } a:link, a:visited { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; box-shadow: none; } a:hover { color: var(--paper); background: var(--ink); -webkit-text-fill-color: var(--paper); box-shadow: 0 0 0 0.1em var(--ink); } a.titlelink:link, a.titlelink:visited, a.titlelink:hover { background: none; box-shadow: none; color: var(--ink); -webkit-text-fill-color: currentColor; } .tl-seg { background: var(--ink); } .tl-line { background: var(--ink); } .tl-fade.left { background: linear-gradient(to right, var(--paper), transparent); } .tl-fade.right { background: linear-gradient(to left, var(--paper), transparent); } }