/* ============================================================ /private — bring him to you. Built for the group organiser, not the browser (F12). Prices are stated plainly on purpose (F8). This page runs palette B "Blush & Ink" via . Everything below uses tokens, so it follows whichever palette is active — no hard-coded colours, which is what made the last palette change painful. ============================================================ */ /* ---------- packages ---------- */ .packs { display: grid; gap: var(--s3); margin-top: var(--s5); align-items: start; } @media (min-width: 58rem) { .packs { grid-template-columns: repeat(3, 1fr); } } .pack { background: var(--card); border: 1px solid var(--edge); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); position: relative; } /* the middle card inverts — a dark card on blush carries the eye (F2) */ .pack-featured { background: var(--night); border-color: var(--night); color: var(--on-night); } .pack-flag { position: absolute; top: -.72rem; left: var(--s3); background: var(--accent-fill); color: var(--on-accent); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .25rem .6rem; } .pack h3 { color: inherit; font-size: 1.65rem; } .pack-featured h3 { color: var(--on-night); } .pack-price { font-family: var(--body); font-size: .9rem; letter-spacing: .06em; color: var(--text-dim); margin: 0; } .pack-price strong { display: inline-block; font-family: var(--display); font-size: 2.6rem; font-weight: 400; letter-spacing: -.01em; color: var(--accent-text); margin-left: .3rem; font-variant-numeric: tabular-nums; } /* on the dark card the rose would sink, so the price goes ivory */ .pack-featured .pack-price { color: var(--on-night-2); } .pack-featured .pack-price strong { color: var(--on-night); } .pack-sub { font-size: .98rem; color: var(--text-mid); margin: 0; } .pack-featured .pack-sub { color: var(--on-night-2); } .pack ul { margin: var(--s2) 0 var(--s3); padding-left: 1.15rem; display: flex; flex-direction: column; gap: .5rem; } .pack li { font-size: .95rem; color: var(--text-mid); } .pack-featured li { color: var(--on-night-2); } .pack .btn { margin-top: auto; align-self: flex-start; } .pack-featured .btn-ghost { border-color: var(--line-night); color: var(--on-night); } .pack-featured .btn-ghost:hover { border-color: var(--on-night); color: var(--on-night); } /* ---------- two-column blocks ---------- */ .split-2 { display: grid; gap: var(--s5); align-items: start; } @media (min-width: 58rem) { .split-2 { grid-template-columns: 1fr 1fr; gap: var(--s6); } } .how { border-left: 2px solid var(--accent-fill); padding-left: var(--s3); } .how h3 { font-family: var(--body); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s3); } .how ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--s2); } .how li { color: var(--text-mid); } .how li strong { color: var(--text); } /* ---------- trust ---------- */ .visually-quiet { font-family: var(--body); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s4); } .trust { display: grid; gap: var(--s3); } @media (min-width: 48rem) { .trust { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 72rem) { .trust { grid-template-columns: repeat(4, 1fr); } } .trust-card { border-top: 1px solid var(--edge); padding-top: var(--s3); } .trust-card h3 { font-size: 1.25rem; margin-bottom: var(--s2); } .trust-card p { font-size: .93rem; color: var(--text-mid); margin: 0; } /* ---------- enquiry form ---------- */ .enq { background: var(--card); border: 1px solid var(--edge); padding: var(--s4) var(--s3); } .enq .row { display: grid; gap: var(--s2); } @media (min-width: 34rem) { .enq .row { grid-template-columns: 1fr 1fr; gap: var(--s3); } } .enq .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--s3); } .enq label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; } .enq input, .enq select, .enq textarea { padding: .95rem 1rem; font-size: 1.02rem; font-family: var(--body); background: var(--ground); border: 1px solid var(--edge); color: var(--text); } .enq input:focus, .enq select:focus, .enq textarea:focus { border-color: var(--accent-text); outline: 2px solid color-mix(in srgb, var(--accent-text) 30%, transparent); outline-offset: 1px; } .enq input[type="range"] { padding: 0; border: 0; background: none; height: 2.2rem; accent-color: var(--accent-fill); } .enq textarea { resize: vertical; } .enq .btn { width: 100%; justify-content: center; } .fineprint { font-size: .82rem; color: var(--text-dim); margin: var(--s2) 0 0; } .enq .err { background: color-mix(in srgb, var(--error) 12%, transparent); border: 1px solid var(--error); color: var(--error); padding: .7rem 1rem; font-size: .92rem; margin-bottom: var(--s3); } .enq-done { text-align: center; padding: var(--s4) var(--s3); } .enq-done h3 { color: var(--text); margin-bottom: var(--s2); } .enq-done p { color: var(--text-mid); margin: 0 auto var(--s2); max-width: 40ch; } .enq-done p:last-child { margin-bottom: 0; } /* Package card image plates and placeholders */ .pack-plate { margin: calc(-1 * var(--s4)) calc(-1 * var(--s3)) var(--s3); overflow: hidden; border-bottom: 1px solid var(--edge); aspect-ratio: 16 / 10; position: relative; } .pack-plate img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); } .pack:hover .pack-plate img { transform: scale(1.03); } .pack-plate .plate-placeholder { border: none; aspect-ratio: 16 / 10; height: 100%; } /* Non-scrollable background wrapper extending across letters section and footer */ .private-letters-foot-wrap { position: relative; background-attachment: fixed; background-position: center 25%; background-repeat: no-repeat; background-size: cover; overflow: hidden; } @media (hover: none) and (pointer: coarse) { .private-letters-foot-wrap { background-attachment: scroll; } } /* Tint on letters section so the photo is visible while keeping text legible */ .private-letters-foot-wrap .scrim-letters { background: rgba(14, 9, 12, 0.58); position: relative; z-index: 1; } /* Glassmorphic letter cards on this background */ .private-letters-foot-wrap .letter { background: rgba(26, 17, 21, 0.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); border-top: 2px solid var(--stage); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); } .private-letters-foot-wrap .band-index { color: var(--stage-lit); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } /* Footer with darker tint and blur so contents are cleanly legible */ .private-letters-foot-wrap .foot.private-foot-blurred { background: rgba(10, 6, 8, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, 0.12); position: relative; z-index: 2; } .private-letters-foot-wrap .foot.private-foot-blurred h4 { color: var(--on-night); } .private-letters-foot-wrap .foot.private-foot-blurred p, .private-letters-foot-wrap .foot.private-foot-blurred a { color: var(--on-night-2); } .private-letters-foot-wrap .foot.private-foot-blurred a:hover { color: #fff; } /* Phones: show the package photos at their own shape. The 16:10 plate suits the desktop grid, but on a phone it was cutting up to 166% off portrait shots. This lives here, not in main.css, because private.css loads later. */ @media (max-width: 62rem) { .pack-plate { aspect-ratio: auto; } .pack-plate img { height: auto; aspect-ratio: auto; object-position: center !important; } }