@charset "UTF-8"; /* ============================================================ Disposable Celebrities — master.css One stylesheet for the whole site (replaces master.css + master2.css). Dark scheme is the default; add class "light" to to switch. ============================================================ */ :root { --bg: #000; --text: #a0a3a2; --text-strong: #d0d1d1; --muted: #717474; --faint: #414645; --red: #d03333; --red-dim: #842828; --bar: #181f1e; --bar-hover: #1e2726; --glow-color: #fff; --glow: rgba(255, 255, 255, 0.55); --font: "Avenir Next", Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; } body.light { --bg: #fff; --text: #717474; --text-strong: #414645; --muted: #717474; --faint: #b8baba; --bar: #dadada; --bar-hover: #cccdcd; --glow-color: #d03333; --glow: rgba(208, 51, 51, 0.45); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; min-height: 100vh; padding: 125px 0 80px; transition: background 0.3s ease, color 0.3s ease; } body::after { content: ""; display: block; clear: both; } /* ---------- Header (left column, like the original) ---------- */ .site-header { float: left; width: 22%; margin-left: 62px; } .site-header .logo img { display: block; margin-top: 60px; height: 190px; width: auto; } /* ---------- Dark / light switch ---------- */ #switch { position: fixed; top: 0; right: 40px; z-index: 10; border: 0; font: inherit; font-size: 13px; letter-spacing: 0.04em; padding: 0.6rem 1.25rem; background: var(--bar); color: var(--text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } #switch:hover { background: var(--bar-hover); color: var(--text-strong); } #switch:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ---------- Main accordion ---------- */ main { float: right; width: 70%; } .panel { margin-bottom: 2px; } /* The accordion JS animates this wrapper's height for the slide-open effect; overflow keeps content clipped mid-slide. */ .panel .slide { overflow: hidden; } .panel summary { list-style: none; padding: 0.7rem 1.5rem; background: var(--bar); color: var(--text); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: color 0.25s ease, text-shadow 0.25s ease, background 0.25s ease; } .panel summary::-webkit-details-marker { display: none; } .panel summary::marker { content: ""; } .panel summary:hover { color: var(--glow-color); text-shadow: 0 0 8px var(--glow), 0 0 20px var(--glow); } .panel[open] summary { background: var(--red); color: #fff; text-shadow: none; } .panel .content { padding: 1.5rem 1.25rem 1rem; max-width: 72ch; } .panel .content p { margin: 0 0 1.25rem; } .panel .content a { color: var(--red); } .panel .content a:visited { color: var(--red-dim); } .panel .content a:hover { text-decoration: none; } /* ---------- Samples grid (samples.html) ---------- */ .page-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-strong); margin: 0 0 1.5rem; } .samples { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(231px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .samples a { display: flex; flex-direction: column; gap: 0.25rem; min-height: 130px; padding: 1rem; background: var(--bar); color: var(--text); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .samples a:hover { background: var(--red); color: #fff; } .samples img { display: block; width: 100%; height: auto; aspect-ratio: 231 / 121; object-fit: cover; margin-bottom: 0.5rem; } .samples + p a { color: var(--red); text-decoration: none; border-bottom: 2px solid var(--red); transition: border-color 0.2s ease; } .samples + p a:hover { border-bottom-color: transparent; } /* ---------- Contact form ---------- */ #contactform { max-width: 480px; margin: 0 0 1.5rem; } #contactform .field { margin-bottom: 1rem; } #contactform label { display: block; margin-bottom: 0.3rem; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-strong); } #contactform input, #contactform textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--faint); background: var(--bar); color: var(--text-strong); font: inherit; transition: border-color 0.2s ease; } #contactform input:focus, #contactform textarea:focus { outline: none; border-color: var(--red); } #contactform textarea { resize: vertical; } #contactform .errorbox { color: var(--red); font-weight: 700; margin: 0 0 1rem; } #contactform button { border: 0; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.7rem 1.5rem; background: var(--red); color: #fff; cursor: pointer; transition: background 0.2s ease; } #contactform button:hover { background: #b52c2c; } #contactform .form-note { margin-top: 0.75rem; font-size: 13px; color: var(--muted); } #contactform .form-note a { color: inherit; } /* ---------- Splash page (index) ---------- */ .splash { float: none; width: auto; min-height: calc(100vh - 205px); display: flex; align-items: center; justify-content: center; padding: 2rem 5vw; } .splash img { display: block; max-width: min(500px, 90vw); height: auto; } /* ---------- Footer ---------- */ .site-footer { clear: both; float: right; width: 70%; padding: 2.5rem 40px 0 0; text-align: right; color: var(--faint); font-size: 13px; } .site-footer a { color: var(--faint); text-decoration: none; } .site-footer a:hover { color: var(--red); } /* ---------- Small screens ---------- */ @media (max-width: 700px) { body { padding-top: 70px; } .site-header { float: none; width: auto; margin-left: 5vw; } .site-header .logo img { margin-top: 0; height: 130px; } main { float: none; width: 100%; margin-top: 2rem; } .site-footer { float: none; width: auto; padding-right: 5vw; } .panel summary { font-size: 17px; } #switch { right: 0; } } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } /* ---------- Print ---------- */ @media print { #switch, .site-footer { display: none !important; } body { background: #fff; color: #000; font: 10pt Calibri, sans-serif; } .panel .content { display: block !important; } }