/* --------------------------------------------------------------- Cristobal Castilla — portfolio Runtime values main.js writes onto : --bg current background colour --fg text colour picked for contrast --shift glitch x-offset transform --shadow chromatic text-shadow Type scale, layout and the globe's framing all live here. --------------------------------------------------------------- */ :root { --city-color: oklch(0.7 0.21 40); --body-scale: 1; --globe-size: clamp(680px, 148vmin, 2000px); --globe-right: -22vmin; --globe-bottom: -40vmin; --font-head: "Familjen Grotesk", Helvetica, Arial, sans-serif; --font-body: "Sometype Mono", ui-monospace, monospace; --font-tag: "Sometype Mono", ui-monospace, monospace; --head-weight: 600; --head-tracking: -0.028em; --body-weight: 500; --body-tracking: 0em; --body-measure: 56ch; } /* "plain type" variant — body.plain-type */ body.plain-type { --font-head: Inter, Helvetica, Arial, sans-serif; --font-body: Inter, Helvetica, Arial, sans-serif; --font-tag: Inter, Helvetica, Arial, sans-serif; --body-weight: 400; --body-tracking: -0.011em; --body-measure: 50ch; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg, oklch(0.36 0.11 22)); color: var(--fg, oklch(0.97 0.006 90)); font-family: var(--font-head); font-weight: 400; -webkit-font-smoothing: antialiased; } a { color: inherit; } .stage { min-height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 12vmin 7vmin; position: relative; overflow: hidden; } /* --- globe + marker layers ------------------------------------- */ .layer { position: absolute; pointer-events: none; right: var(--globe-right); bottom: var(--globe-bottom); width: var(--globe-size); height: var(--globe-size); transform: var(--shift, translate3d(0, 0, 0)); } .globe-layer { z-index: 0; } .place-layer, .ring-layer { z-index: 1; } dotted-globe { display: block; width: 100%; height: 100%; } .place-tag { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; padding: 5px 9px; background: var(--bg); transform: translate(calc(clamp(14px, 1.6vmin, 30px) + 5px), -50%); white-space: nowrap; font-family: var(--font-tag); font-size: clamp(11px, 0.95vw, 14px); letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 220ms ease; } /* typing caret */ .caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; } .caret.hidden { width: 0; margin-left: 0; opacity: 0; } .rings { position: absolute; left: 50%; top: 50%; width: 15%; height: 15%; margin: -7.5% 0 0 -7.5%; } .rings span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--city-color); animation: cityPulse 1.9s linear infinite; } .rings span:last-child { animation-delay: -0.95s; } @keyframes cityPulse { from { transform: scale(0.08); opacity: 0.75; } to { transform: scale(1); opacity: 0; } } /* hidden states driven from main.js */ .is-hidden { display: none !important; } .is-dimmed { opacity: 0; } /* --- glitch overlay -------------------------------------------- */ .glitch-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; } /* --- content ---------------------------------------------------- */ main { position: relative; z-index: 1; max-width: min(90vw, 1040px); display: flex; flex-direction: column; gap: 1.1em; transform: var(--shift, translate3d(0, 0, 0)); text-shadow: var(--shadow, none); } h1 { margin: 0; max-width: var(--body-measure); text-wrap: pretty; font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: 1.03; font-size: 36px; /* fixed — matches reference headline */ } main p { margin: 0; opacity: 0.9; text-wrap: pretty; max-width: var(--body-measure); font-family: var(--font-body); font-weight: var(--body-weight); letter-spacing: var(--body-tracking); line-height: 1.62; font-size: calc(16px * var(--body-scale)); /* fixed — matches reference body */ } body.plain-type main p { line-height: 1.5; font-size: calc(clamp(16px, 1.4vw, 21px) * var(--body-scale)); } main p a { text-decoration: underline 1px color-mix(in srgb, currentcolor 40%, transparent); text-underline-offset: 4px; transition: text-decoration-color 200ms; } main p a:hover { text-decoration-color: currentcolor; } /* the active (last-hovered) project — inverted colours. Solid background on the link itself so it wraps cleanly across lines. */ main p a.is-active { color: var(--bg); background: var(--fg); text-decoration: none; padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* pulse only the highlight's alpha (not element opacity) so the text stays solid */ animation: activePulse 2.4s ease-in-out infinite; } @keyframes activePulse { 0%, 100% { background-color: var(--fg); } 50% { background-color: color-mix(in srgb, var(--fg) 68%, transparent); } } /* motion opt-out: hold the highlight steady */ @media (prefers-reduced-motion: reduce) { main p a.is-active { animation: none; } } .connect { text-transform: uppercase; margin-top: 80px; } /* matches reference spacing from body */