/* ========================================================== THEME: collage — a warm-neutral editorial mood board, built for drama rather than tidiness. The background is a deep, lit-from-one-corner gradient instead of a flat color. A large photo overlaps the masthead's top-right corner, torn loose and laid IN FRONT of the card — not tucked behind it — with a second, smaller photo pinned just outside its bottom-left edge. Every folder card underneath carries its own pair of pinned photos too, cycling through a pool of six source images at sharply different sizes, corners, and angles — never the same two corners at the same size twice in a row — so the photos read as scattered across a corkboard rather than lined up in two neat columns. Everything the visitor actually reads still sits on a flat cream card with a thin black hairline border, upright and legible — the drama lives in the photography around it, never in the type. ========================================================== */ [data-theme="collage"] { --cl-bg-deep: #5f3c22; --cl-bg-mid: #a9744a; --cl-bg-pale: #ecccA0; --cl-panel: #f6e6d8; --cl-ink: #140f0a; --cl-accent: #c8431f; --cl-frame: #faf3ea; --cl-green: #2f5940; --cl-ochre: #b87a2e; --cl-plum: #74405a; /* Retune the shared accent palette to warm, saturated print tones — each folder's card edge, corner tag, and link hover state cycle through these instead of the neons. */ --c-magenta: var(--cl-accent); --c-cyan: var(--cl-green); --c-amber: var(--cl-ochre); --c-violet: var(--cl-plum); } /* ---------- Background & page-wide layout fix ---------- */ /* A dramatic corner-lit gradient instead of a flat fill, plus a faint grain layer (body::before) for a printed, not digital, feel. The gradient is sized to the full page (not the viewport — background-attachment:fixed looked right at first, but it only paints one viewport-height's worth and leaves everything below that blank on a page taller than the screen), so the "lit from the top-right corner" effect describes the whole page's corners, however long the page turns out to be. The tricky part: base.css caps itself at max-width:1040 and centers it, so on any screen wider than that, body's own box sits in the middle with empty space on both sides — and the pinned photos need to bleed out into that space. Clipping the bleed with overflow-x:hidden on body would clip it at body's own narrow 1040px edge, well short of the actual browser edge (that's the "cut off" look from before). So here body itself is widened to fill the whole window — its own left/right padding still provides the usual page-edge gutter — and the 1040px centered column is rebuilt one level down, on header, #dynamic-index and footer directly. Net effect: the visible text column lines up exactly where it always has, but there's now real room on either side of it for photos to bleed into, and overflow-x:hidden on body only ever clips at the true window edge. */ [data-theme="collage"] { --cl-gutter: clamp(18px, 5vw, 28px); } /* Belt and braces: this browser only reliably suppresses the scrollbar the bleed would otherwise cause when overflow-x is hidden on BOTH html and body, not either alone. That's safe to do here now that body spans the full window — the clip only ever kicks in at the true window edge either way. */ html[data-theme="collage"] { overflow-x: hidden; background: var(--cl-bg-deep); } [data-theme="collage"] body { position: relative; max-width: none; margin: 0; overflow-x: hidden; background: radial-gradient(ellipse 900px 700px at 10% 92%, rgba(0, 0, 0, 0.22), transparent 60%), radial-gradient(ellipse 900px 700px at 92% 4%, rgba(255, 241, 222, 0.28), transparent 55%), linear-gradient(155deg, var(--cl-bg-deep) 0%, var(--cl-bg-mid) 46%, var(--cl-bg-pale) 100%), var(--cl-bg-deep); color: var(--cl-ink); font-family: 'Inter', sans-serif; } [data-theme="collage"] header, [data-theme="collage"] #dynamic-index, [data-theme="collage"] footer { max-width: calc(1040px - 2 * var(--cl-gutter)); margin-left: auto; margin-right: auto; } [data-theme="collage"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="collage"] a:focus-visible, [data-theme="collage"] button:focus-visible { outline-color: var(--cl-accent); } /* ---------- Header ---------- */ [data-theme="collage"] header { position: relative; z-index: 1; background: var(--cl-panel); border: 1px solid var(--cl-ink); box-shadow: 0 22px 46px rgba(10, 7, 4, 0.4); padding: clamp(16px, 3vw, 24px); margin: 0 auto 60px; transform: rotate(-0.5deg); } /* The hero photo genuinely overlaps the masthead — z-index puts it above the card's own background (and above the title, which it never reaches horizontally: it's pinned to the right third of a left-aligned card), casting its own shadow onto the panel underneath. That's the "above, not behind" fix: it sits in front of the header, corner torn loose and laid on top of it, rather than tucked behind and only peeking out at the edges. The second photo runs the opposite trick in the opposite corner: it sits entirely outside the card's left edge — no horizontal overlap at all — so no matter how tall a long quote makes the header, it can never land on top of the text. */ [data-theme="collage"] header::before, [data-theme="collage"] header::after { content: ""; position: absolute; z-index: 2; background-size: cover; background-position: center; border: 10px solid var(--cl-frame); pointer-events: none; } [data-theme="collage"] header::before { top: -58px; right: -42px; width: clamp(230px, 23vw, 360px); aspect-ratio: 4 / 3; background-image: url("../Images/collage-falls.jpg"); box-shadow: 0 34px 60px rgba(10, 7, 4, 0.55); transform: rotate(2deg); } [data-theme="collage"] header::after { top: 260px; left: -168px; width: clamp(110px, 11vw, 160px); aspect-ratio: 3 / 4; background-image: url("../Images/collage-calligraphy.jpg"); box-shadow: 0 24px 46px rgba(10, 7, 4, 0.45); transform: rotate(-2deg); } [data-theme="collage"] h1 { display: block; font-family: var(--font-title); font-weight: 900; font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.05; letter-spacing: -0.01em; background: none; border-radius: 0; padding: 0; color: var(--cl-ink); text-shadow: 3px 3px 0 rgba(20, 15, 10, 0.08); } [data-theme="collage"] .cursor { display: none; } [data-theme="collage"] .subtitle { display: block; font-family: 'Fraunces', Georgia, serif; font-style: normal; font-weight: 500; color: var(--cl-ink); opacity: 0.85; font-size: 1.08rem; line-height: 1.6; max-width: 58ch; margin-top: 10px; white-space: pre-line; } [data-theme="collage"] .subtitle .attribution { display: block; margin-top: 10px; font-style: normal; font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; color: var(--cl-accent); } [data-theme="collage"] .subtitle .attribution em { font-style: normal; text-transform: none; letter-spacing: 0.01em; color: var(--cl-ink); opacity: 0.75; } /* ---------- Folder cards ---------- */ [data-theme="collage"] #dynamic-index { position: relative; z-index: 1; display: grid; gap: 18px; } /* Flat cream card, thin black hairline border, and a heavier top edge in the folder's own accent color — the closest thing here to the reference's colored sale tags and CTA buttons. */ [data-theme="collage"] #dynamic-index .group { position: relative; display: block; background: var(--cl-panel); border: 1px solid var(--cl-ink); border-top: 8px solid var(--accent, var(--cl-accent)); box-shadow: inset 0 0 0 1px rgba(10, 7, 4, 0.05), 0 16px 34px rgba(10, 7, 4, 0.32); padding: 18px 26px 16px; margin: 0; } /* Two pinned photos per card instead of one repeated swatch, cycling through a six-image pool. Deliberately NOT a matching pair in matching corners at a matching size each time — the corner (sometimes top-right, sometimes top-left; sometimes hanging low, sometimes riding the side edge), the size (from a small 34px tag up to a 96px print), and the tilt all change from one variant to the next, so the pinned photos read as scattered across a corkboard rather than lined up in two neat columns down the page. */ [data-theme="collage"] #dynamic-index .group::before, [data-theme="collage"] #dynamic-index .group::after { content: ""; position: absolute; background-color: var(--cl-frame); background-size: cover; background-position: center; border: 4px solid var(--cl-frame); box-shadow: 0 12px 22px rgba(10, 7, 4, 0.38), 0 0 0 1px rgba(10, 7, 4, 0.12); pointer-events: none; } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+1)::before { top: -56px; right: 54px; width: 88px; height: 88px; background-image: url("../Images/collage-abstract.jpg"); transform: rotate(-2deg); } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+1)::after { bottom: -24px; left: 164px; width: 34px; height: 34px; background-image: url("../Images/collage-snail.jpg"); transform: rotate(4deg); } /* This pair sits entirely outside the card's left edge (like the header's second photo) rather than overlapping onto it — safe at any card height, and it puts real weight on the left side for once instead of every primary photo crowding the right. */ [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+2)::before { top: -22px; left: -55px; width: 60px; height: 80px; background-image: url("../Images/collage-portrait.jpg"); transform: rotate(1deg); } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+2)::after { bottom: -24px; right: 46px; width: 80px; height: 80px; background-image: url("../Images/collage-fish.jpg"); transform: rotate(-11deg); } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+3)::before { top: -32px; right: -8px; width: 68px; height: 50px; background-image: url("../Images/collage-farmhouse.jpg"); transform: rotate(4deg); } /* Vertically centered and, again, entirely outside the card — percentage-based vertical centering is only safe here because there's no horizontal overlap to land on a short card's text. */ [data-theme="collage"] #dynamic-index .group:nth-of-type(4n+3)::after { top: 50%; left: -54px; width: 46px; height: 60px; background-image: url("../Images/collage-poster.jpg"); transform: translateY(-50%) rotate(-13deg); } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n)::before { top: 20%; right: 140px; width: 72px; height: 96px; background-image: url("../Images/collage-monstera.jpg"); transform: translateY(-50%) rotate(4deg); } [data-theme="collage"] #dynamic-index .group:nth-of-type(4n)::after { bottom: -14px; right: 40px; width: 40px; height: 30px; background-image: url("../Images/collage-farmhouse.jpg"); transform: rotate(-8deg); } [data-theme="collage"] #dynamic-index h2 { font-family: 'Inter', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.82rem; color: var(--cl-ink); margin: 4px 0 10px; } [data-theme="collage"] #dynamic-index h2::before { content: ""; } [data-theme="collage"] #dynamic-index li:not(:last-child)::after { content: "\2022"; color: var(--accent, var(--cl-accent)); opacity: 0.8; margin: 0 14px; } [data-theme="collage"] #dynamic-index a { padding: 4px 2px; border: none; border-bottom: 1px solid transparent; border-radius: 0; background: none; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--cl-ink); transition: color 0.15s ease, border-color 0.15s ease; } [data-theme="collage"] #dynamic-index a:hover, [data-theme="collage"] #dynamic-index a:focus-visible { color: var(--cl-accent); border-bottom-color: var(--cl-accent); } /* ---------- Footer ---------- */ [data-theme="collage"] footer { position: relative; z-index: 1; font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; border-top: 1px solid var(--cl-ink); color: var(--cl-ink); opacity: 0.8; } @media (max-width: 560px) { [data-theme="collage"] header { padding: 14px; margin: 14px 0 16px; transform: none; } [data-theme="collage"] header::before, [data-theme="collage"] header::after { display: none; } [data-theme="collage"] #dynamic-index { gap: 12px; } [data-theme="collage"] #dynamic-index .group { padding: 14px 18px 12px; } [data-theme="collage"] #dynamic-index .group::before, [data-theme="collage"] #dynamic-index .group::after { display: none; } [data-theme="collage"] #dynamic-index h2 { font-size: 1.05rem; } [data-theme="collage"] #dynamic-index a { font-size: 1.35rem; padding: 6px 2px; } [data-theme="collage"] #dynamic-index li:not(:last-child)::after { margin: 0 12px; } }