/* ============================================================================ CAMP MISCO — design system Neon "Spice World" base that auto-shifts to a Dune desert palette on Friday / .theme-dune content. Plain CSS, easy to iterate. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); /* --------------------------------------------------------------------------- Theme tokens --------------------------------------------------------------------------- */ :root { /* SPICE WORLD (default / Saturday) — neon */ /* Spice default = pink. theme.js randomizes these per page (pink/purple/blue/green). */ --bg: #120010; --bg-soft: #1c0420; --text: #ffffff; --muted: #c9c2d6; --accent-1: #ff2d95; /* primary neon (randomized) */ --accent-2: #00e5ff; /* electric cyan */ --accent-3: #c6ff00; /* lime */ --line: color-mix(in srgb, var(--accent-1) 20%, transparent); --card: rgba(255, 255, 255, 0.035); --time-blue: #2f9bff; /* neon blue for schedule times */ /* wave hue stops (HSL hue degrees) — read by waves-bg.js */ --wave-hue-a: 320; /* pink */ --wave-hue-b: 188; /* cyan */ --wave-hue-c: 80; /* lime */ --wave-sat: 95%; --wave-light: 62%; --font-display: 'Cinzel', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --maxw: 1180px; --nav-h: 64px; } /* DUNE (Friday) — desert. Apply .theme-dune to or any section. */ .theme-dune { --bg: #0d0a07; --bg-soft: #161009; --text: #f0ead6; --muted: #c9a86a; --accent-1: #e8a020; /* amber */ --accent-2: #c2410c; /* rust */ --accent-3: #e6b35c; /* sand-gold */ --line: rgba(232, 160, 32, 0.18); --card: rgba(240, 234, 214, 0.04); --wave-hue-a: 38; /* amber */ --wave-hue-b: 24; /* orange */ --wave-hue-c: 16; /* rust */ --wave-sat: 85%; --wave-light: 58%; } /* BLACKLIGHT (Saturday night) — late-night UV. Pinned (theme.js randomizes the Spice accents per load, so the night column needs its own to stay distinct). */ .theme-blacklight { --bg-soft: #0a0416; --text: #f4ecff; --muted: #bda8d9; --accent-1: #b026ff; /* ultraviolet */ --accent-2: #ccff00; /* acid lime */ --accent-3: #00e5ff; --line: rgba(176, 38, 255, 0.22); --card: rgba(176, 38, 255, 0.05); --time-blue: #8b5cf6; } /* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.7; letter-spacing: 0.01em; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; animation: page-in 0.4s ease; transition: background 0.5s ease, color 0.5s ease; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } a { color: var(--accent-2); text-decoration: none; transition: color .2s, opacity .2s; } a:hover { color: var(--accent-3); } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: 0.02em; } /* Background layers ---------------------------------------------------------*/ /* full-page festival photo behind every page; parallax driven by parallax.js */ .site-bg { position: fixed; left: 0; right: 0; top: 0; height: 120vh; /* 20vh of headroom for the parallax pan */ z-index: -1; pointer-events: none; background-image: url('../../photos/header.jpeg'); background-size: cover; background-position: center top; filter: brightness(0.45) saturate(1.1); will-change: transform; } .site-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 22%, transparent), color-mix(in srgb, var(--bg) 45%, transparent)); } #waves-bg { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - var(--nav-h)); z-index: 1; pointer-events: none; mix-blend-mode: screen; } /* film grain (from steezy) */ body::after { content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Everything readable sits above the waves */ .page { position: relative; z-index: 3; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* --------------------------------------------------------------------------- Nav --------------------------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-brand { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; letter-spacing: 0.18em; color: var(--text); text-shadow: 0 0 10px color-mix(in srgb, var(--accent-1) 70%, transparent); } .nav-brand .brand-edition { font-size: 1em; font-weight: 900; color: var(--accent-3); vertical-align: baseline; margin-left: 0.15em; text-shadow: 0 0 8px color-mix(in srgb, var(--accent-3) 70%, transparent); } .nav-links { display: flex; gap: 1.5rem; align-items: center; } .nav-links a { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); padding: 0.35rem 0; border-bottom: 1px solid transparent; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent-1); border-bottom-color: var(--accent-1); } .nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; font-size: 1.4rem; } /* --------------------------------------------------------------------------- Hero / neon wordmark --------------------------------------------------------------------------- */ .hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: calc(var(--nav-h) + 2rem) 1.5rem 4rem; } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.42em; font-size: 0.74rem; color: var(--accent-2); margin-bottom: 1.4rem; } /* glowing neon-sign wordmark */ .neon { font-family: var(--font-display); font-weight: 900; line-height: 0.92; letter-spacing: 0.04em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 16px var(--accent-1), 0 0 34px var(--accent-1), 0 0 60px var(--accent-1), 0 0 90px color-mix(in srgb, var(--accent-2) 80%, transparent); animation: neon-flicker 9s infinite; } /* steady (no flash) when hovering the sign */ .neon:hover { animation: none; opacity: 1; } .neon .small { display: block; font-size: 0.78em; letter-spacing: 0.16em; color: var(--accent-2); text-shadow: 0 0 6px var(--accent-2), 0 0 20px var(--accent-2); margin-bottom: 0.2em; } .neon .edition { font-size: 0.92em; color: var(--accent-3); margin-left: 0.1em; vertical-align: baseline; text-shadow: 0 0 6px var(--accent-3), 0 0 22px var(--accent-3); } .hero .neon { font-size: clamp(3.4rem, 13vw, 9.5rem); } @keyframes neon-flicker { 0%, 100% { opacity: 1; } 9% { opacity: 1; } 10% { opacity: 0.78; } 12% { opacity: 1; } 39% { opacity: 1; } 41% { opacity: 0.82; } 43% { opacity: 1; } 70% { opacity: 1; } 72% { opacity: 0.7; } 74% { opacity: 1; } } .hero-meta { margin-top: 1.6rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(0.78rem, 2vw, 1rem); color: var(--text); } .hero-meta span { color: var(--accent-3); } /* countdown to the first night */ .countdown { display: flex; gap: 1.4rem; justify-content: center; margin-top: 1.8rem; } .countdown .cd-unit { display: flex; flex-direction: column; align-items: center; line-height: 1; } .countdown .cd-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 5vw, 2.8rem); color: var(--accent-3); text-shadow: 0 0 18px color-mix(in srgb, var(--accent-3) 55%, transparent); } .countdown .cd-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.6rem; color: var(--muted); margin-top: 0.5rem; } .countdown .cd-go { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--accent-3); text-shadow: 0 0 18px color-mix(in srgb, var(--accent-3) 55%, transparent); } /* --------------------------------------------------------------------------- Buttons --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; font-weight: 500; padding: 0.95rem 2.1rem; border: 1px solid var(--accent-1); color: var(--text); background: color-mix(in srgb, var(--accent-1) 12%, transparent); border-radius: 2px; cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent-1) 26%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent-1) 55%, transparent); color: #fff; } .btn-ghost { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); } .btn-ghost:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--accent-2) 55%, transparent); } .btn-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; } /* --------------------------------------------------------------------------- Sections + headings --------------------------------------------------------------------------- */ .section { padding: 5rem 0 2.5rem; position: relative; } .section-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.72rem; color: var(--accent-2); margin-bottom: 0.8rem; } .section-title { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 0.6rem; } .section-title.glow { text-shadow: 0 0 24px color-mix(in srgb, var(--accent-1) 45%, transparent); } .lead { color: var(--muted); max-width: 60ch; font-size: 1.02rem; } .showtime { font-family: var(--font-display); font-weight: 900; line-height: 1.05; font-size: clamp(1.6rem, 4.6vw, 2.8rem); color: var(--accent-3); letter-spacing: 0.02em; margin: 0.2rem 0 0.7rem; text-shadow: 0 0 22px color-mix(in srgb, var(--accent-1) 50%, transparent); } .center { text-align: center; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------------- Double-feature cards (home) --------------------------------------------------------------------------- */ .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.6rem; } /* Retro 50s movie-poster cards (clickable -> trailer) */ .feature { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; color: var(--text); text-decoration: none; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent-1) 24%, transparent) 0%, transparent 55%), var(--bg-soft); border: 3px solid var(--accent-3); border-radius: 2px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transform: rotate(-1.2deg); transition: transform .25s ease, box-shadow .25s ease; } .feature:nth-child(2) { transform: rotate(1.2deg); } .feature:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 50px color-mix(in srgb, var(--accent-1) 35%, transparent); } /* banner ribbon at top */ .feature .tag { align-self: stretch; margin-bottom: 0.9rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.64rem; font-weight: 600; color: #120010; background: var(--accent-3); padding: 0.5rem; border-radius: 1px; } /* DVD cover image — swap background-image when real art exists; remove .placeholder */ .feature-cover { width: 100%; aspect-ratio: 2 / 3; background-size: cover; background-position: center; border: 1px solid color-mix(in srgb, var(--accent-1) 50%, transparent); } .feature-cover.placeholder { background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 14px, color-mix(in srgb, var(--accent-1) 10%, var(--bg-soft)) 14px, color-mix(in srgb, var(--accent-1) 10%, var(--bg-soft)) 28px); display: grid; place-items: center; } .feature-cover.placeholder span { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); } .feature .film { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 0.96; margin: 0.9rem 0 0.2rem; color: #fff; text-shadow: 0 0 8px var(--accent-1), 0 0 22px var(--accent-1); } .feature .feature-caption { margin: 0 0 0.6rem; color: var(--muted); font-style: italic; font-size: 0.9rem; line-height: 1.35; } .feature .watch { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.6rem; color: var(--accent-2); } /* --------------------------------------------------------------------------- Lineup (festival poster) --------------------------------------------------------------------------- */ .poster { text-align: center; padding: calc(var(--nav-h) + 3rem) 0 2.5rem; } .poster .wrap { max-width: 1320px; } /* wider than the default so two big names fit per line */ .poster .section-title { font-size: clamp(3rem, 7.5vw, 5.4rem); } /* poster lineup: balanced rows, all names about the same size */ .poster-names { display: flex; flex-direction: column; align-items: center; gap: 0.6em; max-width: 78rem; margin: 1rem auto 0; line-height: 1.15; } .poster-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.4em 1.6em; } .poster-names a { display: inline-flex; align-items: baseline; gap: 0.3em; font-family: var(--font-display); font-weight: 800; color: var(--text); font-size: clamp(2.25rem, 5.1vw, 3.9rem); letter-spacing: 0.01em; padding: 0 0.5em; /* breathing room so acts sharing a line don't crowd, and each stays centered */ transition: color .2s, text-shadow .2s, transform .2s; } .poster-names a:hover { color: var(--band-color, var(--accent-1)); transform: scale(1.04); text-shadow: 0 0 26px color-mix(in srgb, var(--band-color, var(--accent-1)) 60%, transparent); } .poster-names a:has(.sub) { flex-wrap: wrap; justify-content: center; } /* headliner act drops onto its own full-width line, kept on a single centered line */ .poster-names a.poster-headliner { flex-basis: 100%; margin-top: 0.2em; display: block; text-align: center; } .poster-names a.poster-headliner .sub { display: inline; margin-left: 0.3em; } .poster-names a .sub { flex-basis: 100%; text-align: center; font-size: 0.5em; font-weight: 600; color: var(--text); letter-spacing: 0.03em; transition: color .2s, text-shadow .2s; } .poster-names a:hover .sub { color: var(--band-color, var(--accent-1)); } /* a sub that sits inline to the right of the name instead of dropping below it */ .poster-names a .sub.sub-side { flex-basis: auto; text-align: left; } /* stage / sound / lights credits under the lineup poster */ .lineup-credits { max-width: 40rem; margin: 1.6rem auto 0; text-align: center; font-family: var(--font-mono); font-size: 1.2rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--muted); } .lineup-credits a { color: var(--accent-1); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-1) 50%, transparent); } .lineup-credits a:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); } /* --------------------------------------------------------------------------- Schedule --------------------------------------------------------------------------- */ /* 3 days side by side (slightly wider page) */ .wrap.wide { max-width: 1360px; } .sched-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; align-items: start; } .sched-block { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 1.6rem 1.4rem; transition: background .5s ease; } .sched-block h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: 0.3rem; } .sched-block .day-sub { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.64rem; color: var(--accent-2); margin-bottom: 1.2rem; } /* Ticket-stub sets — height proportional to set length, band name biggest */ .ticket { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--card); margin-bottom: 0.7rem; transition: box-shadow .2s ease, border-color .2s ease; } .ticket:hover { border-color: color-mix(in srgb, var(--accent-1) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent-1) 22%, transparent); } /* duration -> height (proportional, 0.5 / 1 / 1.5 hr) */ .ticket.dur-05 { min-height: 56px; } .ticket.dur-1 { min-height: 92px; } .ticket.dur-15 { min-height: 132px; } /* the torn stub */ .ticket .stub { flex: 0 0 72px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0.4rem 0.3rem; gap: 0.15rem; background: color-mix(in srgb, var(--time-blue) 12%, transparent); border-right: 2px dashed color-mix(in srgb, var(--accent-1) 45%, transparent); } .ticket .stub .time { font-family: var(--font-mono); font-size: 1.02rem; letter-spacing: 0.02em; color: #fff; font-weight: 700; text-shadow: 0 0 10px color-mix(in srgb, var(--time-blue) 60%, transparent); } .ticket .stub .dur { font-family: var(--font-mono); font-size: 0.74rem; color: #fff; letter-spacing: 0.04em; } /* main billing — band name is the biggest element */ .ticket .ticket-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.9rem; } .ticket .act { font-family: var(--font-display); font-weight: 800; line-height: 1.0; font-size: clamp(1.1rem, 1.7vw, 1.6rem); color: var(--text); transition: color .2s, text-shadow .2s; } .ticket:hover .act { color: var(--band-color, var(--accent-1)); text-shadow: 0 0 16px color-mix(in srgb, var(--band-color, var(--accent-1)) 55%, transparent); } .ticket .act.headliner { font-size: clamp(1.4rem, 2.3vw, 2.1rem); color: #fff; text-shadow: 0 0 14px var(--accent-1); } .ticket:hover .act.headliner { color: var(--band-color, var(--accent-1)); text-shadow: 0 0 20px color-mix(in srgb, var(--band-color, var(--accent-1)) 60%, transparent); } .ticket .act .sub { font-size: 0.6em; font-weight: 700; margin-left: 0.35em; } .ticket .where { align-self: flex-start; font-family: var(--font-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.12em 0.5em; border-radius: 2px; border: 1px solid var(--line); } .ticket .where.inside { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); } .ticket .where.outside { color: var(--accent-1); border-color: color-mix(in srgb, var(--accent-1) 40%, transparent); } @media (max-width: 820px) { .sched-cols { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- Amenities --------------------------------------------------------------------------- */ /* fixed 3x3 grid */ .amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.4rem; } .amenity-card { position: relative; z-index: 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); transition: transform .28s ease, box-shadow .28s ease; } /* subtle ~10% popout on hover — small lift, solid background so it's easy to see */ .amenity-card:hover { transform: scale(1.1) translateY(-2%); z-index: 50; background: var(--bg); box-shadow: 0 24px 70px rgba(0,0,0,0.8), 0 0 50px color-mix(in srgb, var(--accent-1) 30%, transparent); } .amenity-card:hover .amenity-photo { filter: brightness(0.95) saturate(1.05); } @media (max-width: 760px) { .amenity-grid { grid-template-columns: 1fr 1fr; } .amenity-card:hover { transform: scale(1.1) translateY(-2%); } } @media (max-width: 460px) { .amenity-grid { grid-template-columns: 1fr; } .amenity-card:hover { transform: scale(1.12); } } .amenity-photo { height: 170px; background-size: cover; background-position: center; filter: brightness(0.78) saturate(1.05); display: flex; align-items: flex-end; } .amenity-photo.placeholder { background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 12px, color-mix(in srgb, var(--accent-1) 8%, var(--bg-soft)) 12px, color-mix(in srgb, var(--accent-1) 8%, var(--bg-soft)) 24px); align-items: center; justify-content: center; } .amenity-photo.placeholder span { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); } .amenity-body { padding: 1.1rem 1.2rem 1.4rem; } .amenity-body h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; } .amenity-body p { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; } /* Full site map — same framed card + hover popout as the amenities, but the whole image shows (no cover-crop) so it's readable end to end. */ .map-card { max-width: 900px; margin: 2.4rem auto 0; } .map-photo { display: block; width: 100%; height: auto; filter: brightness(0.92) saturate(1.03); transition: filter .28s ease; } .map-card:hover .map-photo { filter: brightness(1) saturate(1.05); } /* --------------------------------------------------------------------------- RSVP --------------------------------------------------------------------------- */ .rsvp-shell { max-width: 620px; margin: 0 auto; padding: calc(var(--nav-h) + 3rem) 1.5rem 2.5rem; } .gate, .form-card { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 2.4rem 2rem; backdrop-filter: blur(6px); } .field { margin-bottom: 1.6rem; } .field > label { display: block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-2); margin-bottom: 0.6rem; } .field-hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin: -0.3rem 0 0.55rem; letter-spacing: 0.02em; } /* RSVP teaser — who's coming so far */ .rsvp-teaser { margin-bottom: 1.6rem; border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1rem; background: color-mix(in srgb, var(--accent-1) 6%, transparent); } .teaser-count { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--accent-3); text-shadow: 0 0 16px color-mix(in srgb, var(--accent-3) 45%, transparent); margin-bottom: 0.6rem; } .teaser-list { list-style: none; max-height: 132px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.1rem; } .teaser-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.28rem 0.1rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); } .teaser-list li:last-child { border-bottom: 0; } .teaser-list li .arr { flex: 0 0 auto; color: var(--accent-2); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; } .teaser-empty { color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; } .teaser-list::-webkit-scrollbar { width: 6px; } .teaser-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-1) 40%, transparent); border-radius: 3px; } .field input[type=text], .field input[type=password], .field input[type=email] { width: 100%; padding: 0.85rem 1rem; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text); background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 3px; outline: none; transition: border-color .2s, box-shadow .2s; } .field input:focus { border-color: var(--accent-1); box-shadow: 0 0 16px color-mix(in srgb, var(--accent-1) 35%, transparent); } .choice { display: flex; gap: 0.8rem; flex-wrap: wrap; } .choice label { flex: 1 1 160px; cursor: pointer; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-mono); font-size: 0.84rem; text-align: center; transition: border-color .2s, background .2s, color .2s; } .choice input { position: absolute; opacity: 0; } .choice input:checked + span { color: #fff; } .choice label:has(input:checked) { border-color: var(--accent-1); background: color-mix(in srgb, var(--accent-1) 20%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--accent-1) 35%, transparent); } .notice { border-left: 3px solid var(--accent-3); padding: 0.9rem 1.1rem; margin-bottom: 1.6rem; background: color-mix(in srgb, var(--accent-3) 8%, transparent); border-radius: 0 4px 4px 0; font-size: 0.9rem; color: var(--text); } .notice strong { color: var(--accent-3); } .notice.cost strong { font-size: 1.05rem; } .form-status { margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.2em; } .form-status.error { color: var(--accent-1); } .form-status.ok { color: var(--accent-3); } .thanks { text-align: center; padding: 2rem 0; } .thanks h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 0.8rem; } .hidden { display: none !important; } /* --------------------------------------------------------------------------- Footer --------------------------------------------------------------------------- */ /* closing quote above the footer */ .page-quote { position: relative; z-index: 3; max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 0; text-align: center; } .page-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.4; color: var(--text); text-shadow: 0 0 18px color-mix(in srgb, var(--accent-1) 35%, transparent); } .page-quote cite { display: block; margin-top: 1rem; font-style: normal; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-3); } .site-footer { position: relative; z-index: 3; border-top: 1px solid var(--line); margin-top: 1.5rem; padding: 1.5rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); } /* --------------------------------------------------------------------------- Responsive --------------------------------------------------------------------------- */ @media (max-width: 760px) { .nav-links { position: fixed; top: var(--nav-h); right: 0; left: 0; flex-direction: column; gap: 0; align-items: stretch; background: color-mix(in srgb, var(--bg) 96%, transparent); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .3s ease; } .nav-links.open { max-height: 340px; } .nav-links a { padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); } .nav-links a.active { border-bottom-color: var(--line); color: var(--accent-1); } .nav-toggle { display: block; } .feature-grid { grid-template-columns: 1fr; } }