/* styles.css LA Photographer’s Field Guide — shared styles + palettes Usage: data-theme: a | b | c | dn1 | dn2 | dn3 data-mode: light | dark */ /* ---------- TOKENS (DEFAULT) ---------- */ :root{ /* Default = Palette B Light */ --paper:#F3EFE7; --ink:#0F1115; --accent:#1E6F8C; /* pacific */ --muted:#B8BDC6; /* smog */ --max:1120px; --g:18px; --radius:18px; /* Derived */ --border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); --panel: color-mix(in srgb, var(--paper) 92%, var(--muted)); --panel2: color-mix(in srgb, var(--paper) 90%, var(--muted)); --subtext: color-mix(in srgb, var(--ink) 78%, var(--muted)); --kicker: color-mix(in srgb, var(--ink) 65%, var(--muted)); /* Toggle knob colors */ --sun: #F6C453; /* warm gold */ --moon: #FFFFFF; /* clean white */ } /* ---------- LIGHT PALETTES ---------- */ /* A — Sun-bleached Paper */ html[data-theme="a"][data-mode="light"]{ --paper:#FAF6EE; --ink:#111318; --accent:#C4662B; /* terracotta/sunset */ --muted:#C8C1B4; /* warm concrete */ } /* B — Pacific Smog */ html[data-theme="b"][data-mode="light"]{ --paper:#F3EFE7; --ink:#0F1115; --accent:#1E6F8C; /* pacific */ --muted:#B8BDC6; /* smog */ } /* C — Palm + Asphalt */ html[data-theme="c"][data-mode="light"]{ --paper:#F5F2EA; --ink:#101217; --accent:#2F6B4F; /* palm green */ --muted:#BDB7AE; /* asphalt dust */ } /* ---------- DARK / NIGHT PALETTES ---------- */ /* dn1 — Neon Noir */ html[data-theme="dn1"][data-mode="dark"]{ --paper:#0B0C10; --ink:#F2F2F3; --accent:#d24424; /* neon pink */ --muted:#6D727D; } /* dn2 — Midnight Boulevard */ html[data-theme="dn2"][data-mode="dark"]{ --paper:#0E1016; --ink:#F3F1EA; --accent:#FFB020; /* sodium amber */ --muted:#7A7F8A; } /* dn3 — Afterhours Pacific */ html[data-theme="dn3"][data-mode="dark"]{ --paper:#081219; --ink:#EAF2F3; --accent:#31D1C6; /* teal neon */ --muted:#5D7782; } /* Ensure derived tokens update for ALL themes */ html[data-theme]{ --border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); --panel: color-mix(in srgb, var(--paper) 92%, var(--muted)); --panel2: color-mix(in srgb, var(--paper) 90%, var(--muted)); --subtext: color-mix(in srgb, var(--ink) 78%, var(--muted)); --kicker: color-mix(in srgb, var(--ink) 65%, var(--muted)); } /* Helps native controls render correctly */ html[data-mode="light"]{ color-scheme: light; } html[data-mode="dark"] { color-scheme: dark; } /* ---------- BASE ---------- */ *{ box-sizing:border-box; } body{ margin:0; background:var(--paper); color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; line-height:1.45; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--accent); } .wrap{ max-width:var(--max); margin:0 auto; padding:24px 18px 80px; } /* ---------- HEADER / NAV ---------- */ header{ position:sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: var(--border); } .bar{ max-width:var(--max); margin:0 auto; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand{ display:flex; flex-direction:column; gap:2px; letter-spacing:.02em; } .brand .kicker{ font-size:12px; text-transform:uppercase; color: var(--kicker); } .brand .title{ font-size:16px; font-weight:600; } nav{ display:flex; gap:14px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; } .navlink{ padding:8px 10px; border-radius:999px; } .navlink.active{ border: var(--border); background: var(--panel2); } /* ---------- PAGE HEAD ---------- */ .pagehead{ padding: 28px 0 14px; display:grid; grid-template-columns: 1fr; gap: 10px; } h1{ margin:0; font-size:30px; line-height:1.1; letter-spacing:-.02em; font-weight:650; } .sub{ margin:0; max-width:70ch; color: var(--subtext); font-size:14px; } /* ---------- CONTROLS (SEARCH + CHIPS) ---------- */ .controls{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .input, .chip{ border: var(--border); border-radius: 999px; padding:10px 12px; background: var(--panel); font-size:13px; outline:none; /* IMPORTANT: forces correct text color in dark mode */ color: var(--ink); } .input::placeholder{ color: color-mix(in srgb, var(--ink) 55%, var(--muted)); } .input{ min-width:240px; } .chip{ cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:12px; /* button resets */ appearance:none; -webkit-appearance:none; border: var(--border); } .chip.active{ background: color-mix(in srgb, var(--accent) 22%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 55%, var(--muted)); } /* ---------- GRID + SECTION HEADINGS ---------- */ .grid{ margin-top:18px; display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); } .sectionhead{ grid-column: 1 / -1; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; border: var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 94%, var(--muted)); } .sectionhead h3{ margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.16em; } .sectionhead p{ margin:0; font-size:12px; color: var(--subtext); text-transform:uppercase; letter-spacing:.12em; } /* ---------- CARDS ---------- */ .card{ grid-column: span 4; border-radius: var(--radius); border: var(--border); overflow:hidden; background: var(--panel); display:flex; flex-direction:column; min-height:320px; } .thumb{ height:150px; background: linear-gradient( 120deg, color-mix(in srgb, var(--accent) 25%, var(--paper)), color-mix(in srgb, var(--muted) 45%, var(--paper)) ); border-bottom: var(--border); position:relative; } .thumb::after{ content:"NEIGHBORHOOD IMAGE"; position:absolute; left:16px; bottom:12px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--kicker); } .pad{ padding:16px; } .toprow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } h2{ margin:0; font-size:16px; letter-spacing:-.01em; } .zone{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color: var(--kicker); white-space:nowrap; } .desc{ margin:10px 0 0; font-size:13px; color: var(--subtext); } .meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; } .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; padding:6px 9px; border: var(--border); border-radius:999px; background: var(--panel2); color: var(--kicker); } .card .bottom{ margin-top:auto; padding: 0 16px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; color: var(--kicker); font-size:12px; text-transform:uppercase; letter-spacing:.12em; } .dot{ width:8px; height:8px; border-radius:999px; background: var(--accent); opacity:.9; } /* ---------- FOOTER ---------- */ footer{ margin-top:42px; padding-top:22px; border-top: var(--border); color: var(--kicker); font-size:12px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.12em; } /* ---------- TOGGLE (SUN / MOON) ---------- */ .theme-toggle{ display:flex; align-items:center; gap:10px; white-space:nowrap; user-select:none; } .theme-label{ font-size:12px; text-transform:uppercase; letter-spacing:.14em; color: var(--kicker); } .switch{ position:relative; width:44px; height:26px; display:inline-block; } .switch input{ position:absolute; opacity:0; width:0; height:0; } .slider{ position:absolute; inset:0; border-radius:999px; border: var(--border); background: var(--panel); transition: 220ms ease; } /* knob */ .slider::before{ content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; border-radius:999px; /* DAY default = sun */ background: var(--sun); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 2px 10px color-mix(in srgb, var(--sun) 35%, transparent); transition: 220ms ease; } /* Checked = Night -> moon */ .switch input:checked + .slider{ background: color-mix(in srgb, var(--accent) 18%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 40%, var(--muted)); } .switch input:checked + .slider::before{ transform: translateX(18px); background: var(--moon); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 2px 12px color-mix(in srgb, var(--moon) 22%, transparent); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 960px){ .card{ grid-column: span 6; } } @media (max-width: 640px){ nav{ gap:6px; } .navlink{ padding:8px 8px; } .card{ grid-column: span 12; } h1{ font-size:26px; } .input{ min-width:100%; } } /* ========================= Neighborhood: Rotating Gallery ========================= */ .nb-hero{ overflow:hidden; } .nb-gallery{ position:relative; border-bottom: var(--border); border-radius: var(--radius) var(--radius) 0 0; overflow:hidden; background: var(--panel); min-height: 360px; /* adjust */ } /* Slide stack */ .nb-slides{ position:relative; height: 360px; /* match min-height */ background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--paper)), color-mix(in srgb, var(--muted) 45%, var(--paper)) ); } .nb-slide{ position:absolute; inset:0; margin:0; opacity:0; transform: scale(1.01); transition: opacity 420ms ease, transform 900ms ease; } .nb-slide.is-active{ opacity:1; transform: scale(1.0); } .nb-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(0.95) contrast(1.02); } /* UI overlay */ .nb-gallery-ui{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; gap:14px; pointer-events:none; /* buttons will re-enable */ } .nb-gallery-kicker{ pointer-events:none; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: color-mix(in srgb, var(--ink) 70%, var(--muted)); background: color-mix(in srgb, var(--paper) 84%, transparent); border: var(--border); border-radius: 999px; padding: 8px 10px; backdrop-filter: blur(10px); } /* Controls */ .nb-gallery-controls{ pointer-events:auto; display:flex; align-items:center; gap:10px; background: color-mix(in srgb, var(--paper) 82%, transparent); border: var(--border); border-radius: 999px; padding: 8px 10px; backdrop-filter: blur(10px); } .nb-btn{ border: var(--border); background: color-mix(in srgb, var(--paper) 86%, var(--muted)); color: var(--ink); border-radius: 999px; padding: 8px 10px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; cursor:pointer; } .nb-btn:hover{ color: var(--accent); } .nb-btn:active{ transform: translateY(1px); } .nb-dots{ display:flex; gap:8px; align-items:center; } .nb-dot{ width:10px; height:10px; border-radius: 999px; border: var(--border); background: color-mix(in srgb, var(--paper) 78%, var(--muted)); cursor:pointer; } .nb-dot.is-active{ background: var(--accent); border-color: color-mix(in srgb, var(--accent) 65%, var(--muted)); } /* Optional meta under gallery */ .nb-hero-meta{ padding: 14px 16px 16px; } .nb-hero-meta-row{ display:flex; flex-wrap:wrap; gap:10px; color: var(--subtext); font-size:13px; } .nb-hero-meta-sep{ opacity:.6; } /* Mobile */ @media (max-width: 640px){ .nb-slides{ height: 280px; } .nb-gallery{ min-height: 280px; } .nb-gallery-ui{ left:10px; right:10px; bottom:10px; flex-direction:column; align-items:stretch; } .nb-gallery-controls{ justify-content:space-between; } } /* ========================= FIELD NOTES — ARTICLE LAYOUT ========================= */ .article-head{ padding: 28px 0 8px; display:grid; gap:10px; } .article-title{ margin:0; font-size:30px; line-height:1.1; letter-spacing:-.02em; font-weight:650; } .article-deck{ margin:0; max-width: 70ch; color: var(--subtext); font-size:14px; } /* Two-column “field guide” essay */ .essay{ margin-top: 18px; display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--g); align-items:start; } /* Left: continuous text */ .essay-body{ min-width: 0; } .essay-body p{ margin: 0 0 14px; max-width: 72ch; } .essay-body h2{ margin: 22px 0 10px; font-size:16px; letter-spacing:-.01em; } .rule{ border:0; border-top: var(--border); margin: 18px 0; opacity:.9; } /* Right: image rail */ .essay-rail{ position:sticky; top: 86px; /* below header */ display:grid; gap: 14px; } .figure{ border: var(--border); border-radius: var(--radius); background: var(--panel); overflow:hidden; } .figure .ph{ height: 220px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 22%, var(--paper)), color-mix(in srgb, var(--muted) 50%, var(--paper)) ); border-bottom: var(--border); position:relative; } .figure .ph::after{ content:"IMAGE PLACEHOLDER"; position:absolute; left:14px; bottom:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--kicker); } figcaption{ padding: 12px 14px 14px; font-size:12px; color: var(--subtext); line-height:1.35; } .fig-kicker{ display:block; margin-bottom:6px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color: var(--kicker); } /* Inline figures that appear only on mobile (under their paragraph) */ .inline-figure{ display:none; margin: 10px 0 16px; } .inline-figure .ph{ height: 200px; } /* Latest block */ .latest{ margin-top: 28px; border-top: var(--border); padding-top: 18px; } .latest-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom: 12px; } .latest-head h3{ margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.16em; } .latest-head p{ margin:0; font-size:12px; color: var(--subtext); text-transform:uppercase; letter-spacing:.12em; } .latest-list{ display:grid; gap:10px; } .latest-item{ display:flex; justify-content:space-between; gap:12px; padding: 12px 14px; border: var(--border); border-radius: var(--radius); background: var(--panel); } .latest-item .left{ display:grid; gap:4px; min-width: 0; } .latest-item .t{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .latest-item .m{ font-size:12px; color: var(--subtext); } .latest-item .r{ font-size:12px; color: var(--kicker); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; } /* Fix: chip text color in night mode (and all modes) */ .chip{ color: var(--ink); } /* Mobile behavior: images go below the paragraph they relate to */ @media (max-width: 900px){ .essay{ grid-template-columns: 1fr; } .essay-rail{ position:static; display:none; /* hide the right rail */ } .inline-figure{ display:block; /* show inline images */ } } /* --- Theme-Aware Dropdown --- */ /* --- NEW: Smooth Slide & Fade Dropdown --- */ /* 1. The Parent: Keeps the toggle and menu together */ nav .dropdown { position: relative; display: inline-flex; align-items: center; height: 100%; /* Ensures it aligns with other nav links */ } /* 2. The Menu: Floating, Hidden, and Animated */ .dropdown-content { display: block; /* Must be block to allow transform, but hidden via visibility */ visibility: hidden; /* Hides it from mouse/screen */ opacity: 0; /* Fully transparent */ /* The "Slide" Effect: Start 10px higher */ transform: translateY(-10px); /* CRITICAL: Pulls it out of the nav flex flow */ position: absolute; top: 100%; right: 0; /* Visuals */ min-width: 200px; background: var(--paper); border: var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.2); margin-top: 12px; z-index: 9999; /* The Smooth Animation */ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } /* 3. The Active State (Triggered by JS) */ .dropdown.is-active .dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); /* Slides down into place */ } /* 4. Link Styling */ .dropdown-content a { display: block; padding: 12px 16px; color: var(--ink); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; border-bottom: var(--border); transition: background 0.2s ease; text-align: left; /* Ensures text aligns left even if nav is centered */ } .dropdown-content a:last-child { border-bottom: none; } .dropdown-content a:hover { background: var(--panel2); color: var(--accent); } /* Optional: Rotate the arrow when open */ .dropdown.is-active .arrow { display: inline-block; transform: rotate(180deg); transition: transform 0.2s ease; }