/* * lowrey.me * A small, hand-built site. Static. Quiet. Works without JavaScript * for everything except the lightbox (which is progressive, not required). * * Type: system serif for warmth, system sans for utility. * Color: parchment + forest, mirrored for night. */ :root { --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'URW Palladio L', P052, Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* light ivory day */ --bg: #fbf7ed; --bg-2: #f4eedf; --ink: #1c1f1a; --ink-soft: #5a635a; --rule: color-mix(in oklab, var(--ink) 10%, transparent); --accent: #2d4a36; --accent-2: #6b8a5a; /* sizes */ --measure: 38rem; --gutter: clamp(1rem, 2.4vw, 1.5rem); --shell: min(96rem, 100% - 2 * var(--gutter)); --radius: 2px; /* motion */ --ease: cubic-bezier(.2, .7, .2, 1); } /* * Theming. The element carries data-theme="light" | "dark" | "auto". * - "auto" → follow the OS preference * - "dark" → force dark, ignore OS * - "light" → force light, ignore OS (the :root block above is the default) */ :root[data-theme="dark"] { --bg: #0e1310; --bg-2: #141a16; --ink: #ece6d6; --ink-soft: #97a098; --rule: color-mix(in oklab, var(--ink) 14%, transparent); --accent: #b6cdb2; --accent-2: #8fb89a; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #0e1310; --bg-2: #141a16; --ink: #ece6d6; --ink-soft: #97a098; --rule: color-mix(in oklab, var(--ink) 14%, transparent); --accent: #b6cdb2; --accent-2: #8fb89a; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: clamp(16px, 1.05vw + 12px, 19px); line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-synthesis: none; /* the faintest warmth in the corners — pure CSS, no images */ background-image: radial-gradient(1100px 520px at 85% -10%, color-mix(in oklab, var(--accent-2) 7%, transparent), transparent 65%), radial-gradient(900px 460px at -10% 110%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 65%); background-attachment: fixed; } a { color: inherit; text-decoration: none; text-decoration-color: var(--rule); text-underline-offset: 0.2em; transition: color .25s var(--ease), text-decoration-color .25s var(--ease); } a:hover { text-decoration: underline; text-decoration-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--bg); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: var(--bg); padding: .5rem .75rem; border-radius: var(--radius); font-family: var(--sans); font-size: .9rem; z-index: 100; } /* —— masthead —————————————————————————————————————— */ .masthead { width: var(--shell); margin: 0 auto; padding: 1.5rem 0 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; font-family: var(--sans); } .brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em; } .brand-mark { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; } .brand-name { font-style: italic; } .brand { margin-right: auto; } .masthead-nav { display: flex; gap: 1.5rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .masthead-nav a:hover { color: var(--ink); } /* —— theme toggle ——————————————————————————————————— */ .theme-toggle { margin-left: 1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .35s var(--ease); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle:active { transform: scale(.94); } .theme-toggle .icon { width: 16px; height: 16px; display: none; } /* show the icon for the *target* theme — sun in dark mode means "click for light" */ :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } @media (max-width: 640px) { .masthead { flex-wrap: wrap; gap: .75rem; padding-bottom: .5rem; } .brand { margin-right: auto; } .masthead-nav { gap: 1rem; flex-wrap: wrap; order: 3; flex-basis: 100%; } .theme-toggle { margin-left: 0; } } /* —— gallery ————————————————————————————————————— */ .gallery { width: var(--shell); margin: 2.5rem auto 5rem; column-count: 3; column-gap: var(--gutter); } @media (max-width: 1100px) { .gallery { column-count: 2; } } @media (max-width: 640px) { .gallery { column-count: 1; } } .gallery .photo { break-inside: avoid; margin: 0 0 var(--gutter); background: var(--bg-2); cursor: zoom-in; position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: 0 1px 0 var(--rule); transform: translateZ(0); transition: transform .5s var(--ease); } .gallery .photo:hover { transform: translateY(-2px); } .gallery .photo img { width: 100%; height: auto; display: block; transition: opacity .6s var(--ease), transform 1.2s var(--ease); opacity: 0; } .gallery .photo img.is-loaded { opacity: 1; } .gallery .photo:hover img { transform: scale(1.012); } .gallery .meta { position: absolute; inset: auto 0 0 0; padding: 1.25rem 1rem .9rem; font-family: var(--sans); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .gallery .photo:hover .meta, .gallery .photo:focus-within .meta { opacity: 1; } .gallery .meta .where { font-size: .85rem; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .gallery .meta .when { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; } .noscript { font-family: var(--sans); color: var(--ink-soft); border: 1px solid var(--rule); padding: 1rem; border-radius: var(--radius); } /* —— footer ——————————————————————————————————————— */ .colophon { width: var(--shell); margin: 0 auto 4rem; border-top: 1px solid var(--rule); padding-top: 2rem; font-family: var(--sans); color: var(--ink-soft); font-size: .85rem; } .colophon-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; } .colophon .sig .dot { opacity: .35; margin: 0 .25rem; } .colophon .social { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; } .colophon .social a { letter-spacing: .04em; } .colophon .social a:hover { color: var(--accent); } .colophon .fineprint { margin: 1.5rem 0 0; font-size: .78rem; opacity: .8; } .colophon .fineprint a { border-bottom: 1px solid var(--rule); } /* —— lightbox dialog —————————————————————————————— */ .lightbox { margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: transparent; color: #f0ece2; overflow: hidden; } .lightbox::backdrop { background: rgba(8, 11, 8, 0.92); backdrop-filter: blur(6px); } .lightbox[open] { display: grid; grid-template-rows: 1fr auto; } .lightbox-stage { display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); cursor: zoom-out; position: relative; } .lightbox-stage img { max-width: min(96vw, 1600px); max-height: 78dvh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default; background: #0c0e0c; } .lightbox-cap { padding: 1.25rem clamp(1rem, 4vw, 3rem) 2rem; text-align: center; font-family: var(--serif); letter-spacing: .005em; } .lightbox-cap .where { font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: #f6f1e3; } .lightbox-cap .when { display: block; margin-top: .55rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(246, 241, 227, 0.6); } .lightbox-cap .extra { display: block; margin-top: 1.1rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .04em; color: rgba(246, 241, 227, 0.45); } .lightbox-cap .extra a { color: inherit; border-bottom: 1px solid rgba(246,241,227,0.25); } .lightbox-cap .extra a:hover { color: #fff; border-bottom-color: #fff; } .lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.25); color: #f0ece2; font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; font-family: var(--sans); transition: background .2s var(--ease), border-color .2s var(--ease); } .lightbox-close:hover { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.5); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; cursor: pointer; background: transparent; color: rgba(246, 241, 227, 0.5); font-family: var(--serif); font-size: 2rem; line-height: 1; transition: color .2s var(--ease); } .lightbox-nav:hover { color: #fff; } .lightbox-prev { left: clamp(.25rem, 2vw, 1.5rem); } .lightbox-next { right: clamp(.25rem, 2vw, 1.5rem); } @media (max-width: 640px) { .lightbox-nav { font-size: 1.5rem; } } /* —— motion preference —————————————————————————————— */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* —— view transitions (where supported) ———————————— */ @supports (view-transition-name: a) { ::view-transition-old(lightbox-image), ::view-transition-new(lightbox-image) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); } }