/* ========================================================================== pages.css — inner pages: gift cards, private events, gallery, about, contact, accessibility, the generic page and 404. Scoped to .fox-pages / .fox-pages-*. The kit (tones, tone variables, buttons, chips, cards, bands, section heads, page head, forms) comes from style.css; nothing here redefines it. Colours are tone variables only, so every block works on a light section and on a dark band. ========================================================================== */ /* ---- Shared ------------------------------------------------------------- */ .fox-pages .fox-split--top { align-items: start; } .fox-pages-intro { margin-bottom: var(--space-6); } .fox-pages .fox-actions--tight { margin-top: var(--space-3); gap: var(--space-2) var(--space-4); } .fox-pages .fox-head + .fox-notice, .fox-pages .fox-notice + .fox-prose, .fox-pages .fox-head + .fox-prose { margin-top: var(--space-5); } .fox-pages .fox-notice { margin-bottom: var(--space-5); } .fox-pages .fox-notice p { margin: 0; } .fox-pages .fox-notice + .fox-notice { margin-top: var(--space-3); } /* Prose links are underlined (D10) with a visible rule: the shared kit's #E0E0E0 underline is too faint on #FCFCFC to count as a non-colour cue. */ .fox-pages .fox-prose a:not(.fox-btn):not(.fox-link-arrow), .fox-article .fox-prose a:not(.fox-btn):not(.fox-link-arrow) { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .2em; } .fox-pages .fox-sample-note { margin-bottom: var(--space-4); } /* Centred heads sit over left-aligned reading text at 68ch. */ .fox-pages .fox-wrap--narrow > .fox-prose { margin-inline: auto; } /* A framed picture: a rounded photo, no border or shadow (MOCKUP: no boxes). */ .fox-pages-frame { border-radius: var(--radius-img); overflow: hidden; background: var(--tone-media); } .fox-pages-frame .fox-img { width: 100%; height: 100%; } /* Plain points: title, grey line, optional arrow link. A hairline above, no box. */ .fox-pages-point, .fox-pages-pillar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--tone-border-strong); } .fox-pages-point h3, .fox-pages-pillar h3 { margin: 0; font-size: var(--fs-h4); font-weight: 700; color: var(--tone-heading); } .fox-pages-point p, .fox-pages-pillar p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--tone-text); } .fox-pages-point a:not(.fox-link-arrow), .fox-pages-contact a:not(.fox-btn):not(.fox-link-arrow) { color: var(--tone-link); text-decoration: underline; text-decoration-color: var(--tone-border-strong); text-underline-offset: .2em; overflow-wrap: anywhere; } .fox-pages-point a:not(.fox-link-arrow):hover, .fox-pages-contact a:not(.fox-btn):not(.fox-link-arrow):hover { text-decoration-color: currentColor; } .fox-pages-point .fox-link-arrow, .fox-pages-pillar .fox-link-arrow { margin-top: auto; padding-top: var(--space-1); } /* ---- Legal pages (page.php) and the accessibility statement ------------ */ .fox-article--legal .fox-prose { max-width: 66ch; } .fox-article--legal .fox-prose h2 { font-size: var(--fs-h3); } /* ---- Gift cards --------------------------------------------------------- */ /* Suggested amounts are information, not controls (F14): plain Inter figures separated by hairlines; no box, no border, nothing that looks tappable. */ .fox-pages-amounts { margin: var(--space-6) auto 0; max-width: 68ch; } .fox-pages-amounts__title { margin: 0 0 var(--space-3); font-size: var(--fs-kicker); font-weight: 500; letter-spacing: var(--tracking-kicker, .06em); text-transform: uppercase; color: var(--tone-accent); } .fox-pages-preset--buy { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; text-decoration-color: var(--c-gold-ink); border-radius: 2px; } .fox-pages-preset--buy:hover, .fox-pages-preset--buy:focus-visible { color: var(--c-gold-ink); text-decoration-thickness: 2px; } .fox-pages-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-3); } .fox-pages-preset { font-size: var(--fs-h3); font-weight: 500; line-height: 1; color: var(--tone-heading); font-variant-numeric: lining-nums tabular-nums; } .fox-pages-presets__sep { width: 1px; height: 1.6em; background: var(--tone-border-strong); } .fox-pages-presets__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; max-width: 70ch; color: var(--tone-text); } /* ---- Private events ----------------------------------------------------- */ .fox-pages-occasions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tone-border-strong); } .fox-pages-occasions li { padding: var(--space-4) 0; border-bottom: 1px solid var(--tone-border); } .fox-pages-occasions h3 { margin: 0 0 .2em; font-size: var(--fs-h4); font-weight: 700; color: var(--tone-heading); } .fox-pages-occasions p { margin: 0; color: var(--tone-text); } /* Space cards reuse the lounge card (photo, title link stretched over it, grey subline); the lounge's own private-event text sits below. */ .fox-card--space .fox-card__body { gap: 6px; } .fox-card--space .fox-card__text { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--tone-text); } .fox-card--space .fox-pages-spacecopy > * { margin: 0 0 var(--space-2); } .fox-card--space .fox-pages-spacebadge { margin: 4px 0 0; } .fox-pages-after-grid { text-align: center; margin: var(--space-6) 0 0; } .fox-pages-formwrap { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1000px) { .fox-pages-formwrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } .fox-pages-formintro { position: sticky; top: calc(var(--fox-header-h) + var(--fox-admin-bar, 0px) + 32px); } } .fox-pages-formintro .fox-head { margin-bottom: 0; } .fox-pages-steps { list-style: none; counter-reset: fox-step; margin: var(--space-5) 0; padding: 0; } .fox-pages-steps li { counter-increment: fox-step; display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-top: 1px solid var(--tone-border); color: var(--tone-heading); } .fox-pages-steps li:last-child { border-bottom: 1px solid var(--tone-border); } .fox-pages-steps li::before { content: counter(fox-step); flex: none; display: grid; place-items: center; width: 32px; height: 32px; font-size: var(--fs-small); font-weight: 500; color: var(--tone-heading); border: 1px solid var(--tone-border-strong); border-radius: 50%; } /* The enquiry form sits on a light panel; its white fields read against the #F3F3F3 surface. Two columns of fields from tablet up, wide rows span both. */ .fox-pages-formpanel { background: var(--tone-surface); } .fox-pages .fox-form--enquiry { grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 640px) { .fox-pages .fox-form--enquiry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fox-pages .fox-form--enquiry > :not(.fox-field), .fox-pages .fox-form--enquiry > .fox-field--wide { grid-column: 1 / -1; } } .fox-pages .fox-form--enquiry .fox-field select, .fox-pages .fox-form--enquiry .fox-field input:not([type="checkbox"]) { width: 100%; } /* ---- Gallery ------------------------------------------------------------ */ /* Chips and the one-line sample note open the light body, so the first photographs land inside the first screen (F21). */ .fox-pages-galbody { padding-top: var(--space-5); } .fox-pages-galchips { margin: 0 0 var(--space-3); } .fox-pages-galnote { margin: 0 0 var(--space-5); font-size: var(--fs-small); } .fox-pages-lounge { margin-top: var(--space-7); } .fox-pages-lounge:first-of-type { margin-top: 0; } .fox-pages-lounge[hidden] { display: none; } .fox-pages-lounge > .fox-head { margin-bottom: var(--space-4); } /* Rounded 4:3 tiles, no frame. Two across on phones, three from 640px, four from 1200px; gap 16 like every card grid. */ .fox-pages-gal { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .fox-pages-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 1200px) { .fox-pages-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fox-pages-gal__item { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tone-media); border-radius: var(--radius-img); transition: transform var(--dur-slow) var(--ease-premium), box-shadow var(--dur-slow) var(--ease-premium); } .fox-pages-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium); } .fox-pages-gal__item::after { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 20, .16); opacity: 0; transition: opacity var(--dur-slow) var(--ease-premium); pointer-events: none; } /* Hover and keyboard focus share one state (D5). */ .fox-pages-gal__item:hover::after, .fox-pages-gal__item:focus-visible::after { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .fox-pages-gal__item:hover, .fox-pages-gal__item:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); } .fox-pages-gal__item:hover img, .fox-pages-gal__item:focus-visible img { transform: scale(1.03); } } .fox-pages-insta .fox-insta-grid { margin-bottom: var(--space-2); } span.fox-insta-tile { cursor: default; } /* ---- About -------------------------------------------------------------- */ .fox-pages-pillars { row-gap: var(--space-5); } /* ---- Contact ------------------------------------------------------------ */ .fox-pages-contacts { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); align-items: stretch; } /* /contact/: the lounges on the left, the message form on the right (Andrus, 2026-10-20). The form column is held to a readable width and does not stretch with the page — a form field wider than about 40em is harder to fill in, not easier. Below 1000px there is no room for two columns, so they stack with the lounges first: someone who wants a phone number should not have to scroll past a form to reach it. */ .fox-contact-split { display: grid; gap: var(--space-5); align-items: start; } @media (min-width: 1000px) { .fox-contact-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: clamp(32px, 4vw, 64px); } /* In the narrower left column the lounge cards sit one per row rather than squeezing two into a space that fits neither. */ .fox-contact-split__main .fox-pages-contacts { grid-template-columns: 1fr; } .fox-contact-split__form { position: sticky; top: calc(var(--fox-header-h) + var(--space-4)); } } @media (prefers-reduced-motion: reduce) { .fox-contact-split__form { position: static; } } /* The form's own head needs no extra space above it when it is a column. */ .fox-contact-split__form .fox-head { margin-top: 0; } .fox-pages-contact { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .fox-pages-contact.fox-panel { background: none; border: 0; border-top: 1px solid var(--tone-border); border-radius: 0; padding: var(--space-4) 0 0; } .fox-pages-contact h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; color: var(--tone-heading); } .fox-pages-contact p { margin: 0; font-size: var(--fs-small); color: var(--tone-text); } .fox-pages-contact__list { gap: 8px 16px; font-size: var(--fs-small); } .fox-pages-contact .fox-actions { margin-top: auto; padding-top: var(--space-2); } .fox-pages-contact .fox-link-arrow { margin-top: auto; align-self: flex-start; } .fox-pages-ways { row-gap: var(--space-5); } /* ---- Accessibility ------------------------------------------------------ */ .fox-prose .fox-pages-venues, .fox-pages-venues { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tone-border-strong); } .fox-pages-venues li { margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--tone-border); } .fox-pages-venues h3 { margin: 0 0 .3em; font-size: var(--fs-h4); font-weight: 700; } .fox-pages-venues p { margin: .4em 0 0; } /* Editorial notes inside legal text: quiet but unmistakable. */ .fox-prose .fox-editorial-note { margin-bottom: var(--space-5); } .fox-editorial-note strong { color: var(--tone-heading); } /* ========================================================================== Gift Cards: how it works, the design chooser, where the card works (page-gift-cards.php, assets/js/giftcards.js) ========================================================================== */ .fox-gift-steps__list { list-style: none; display: grid; gap: 18px; margin: 28px 0 0; padding: 0; } @media (min-width: 760px) { .fox-gift-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } .fox-gift-step { position: relative; padding: 22px 22px 20px; border: 1px solid var(--tone-border); border-radius: var(--radius-img); background: var(--c-white); } .fox-gift-step__n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-band-dark); color: var(--c-warm-white); font-weight: 700; font-size: .9375rem; margin-bottom: 12px; } .fox-gift-step__title { margin: 0 0 6px; font-size: var(--fs-h4); } .fox-gift-step p { margin: 0; color: var(--tone-text); font-size: var(--fs-small); line-height: 1.6; } .fox-gift-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 4px; } .fox-gift-filter { cursor: pointer; } .fox-gift-filter.is-on { background: var(--c-band-dark); color: var(--c-warm-white); border-color: var(--c-band-dark); } .fox-gift-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; padding: 0; } @media (min-width: 700px) { .fox-gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } } @media (min-width: 1100px) { .fox-gift-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fox-gift-grid > li { margin: 0; min-width: 0; } .fox-gift-card { display: block; text-decoration: none; color: inherit; cursor: pointer; } .fox-gift-card__art { display: block; border-radius: var(--radius-img); overflow: hidden; background: var(--tone-media); box-shadow: 0 1px 2px rgba(0, 0, 0, .10); } .fox-gift-card__art img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 567; object-fit: cover; transition: transform var(--dur) var(--ease-premium); } .fox-gift-card__name { display: block; margin-top: 10px; font-weight: 500; color: var(--tone-heading); } .fox-gift-card__occasion { display: block; font-size: var(--fs-small); color: var(--tone-text); } @media (prefers-reduced-motion: no-preference) { .fox-gift-card:hover .fox-gift-card__art img, .fox-gift-card:focus-visible .fox-gift-card__art img { transform: scale(1.03); } } .fox-gift-card:focus-visible { outline: 2px solid var(--c-gold-ink); outline-offset: 3px; border-radius: 3px; } .fox-gift-card.is-selected .fox-gift-card__art { outline: 3px solid var(--c-gold-ink); outline-offset: 2px; } .fox-gift-card.is-selected .fox-gift-card__name::after { content: " \2713"; color: var(--c-gold-ink); } /* The bar that carries the choice to the shop. */ .fox-gift-bar { display: grid; gap: 14px; align-items: center; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--tone-border); border-radius: var(--radius-img); background: var(--c-white); } @media (min-width: 900px) { .fox-gift-bar { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; } } .fox-gift-bar__pick { display: flex; align-items: center; gap: 12px; min-width: 0; } .fox-gift-bar__thumb { width: 96px; height: 60px; object-fit: cover; border-radius: 4px; flex: none; } .fox-gift-bar__text, .fox-gift-bar__amounts { margin: 0; min-width: 0; } .fox-gift-bar__label { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tone-text); } .fox-gift-bar__name { display: block; font-weight: 500; color: var(--tone-heading); } .fox-gift-bar__amounts span:last-child { color: var(--tone-heading); } @media (min-width: 900px) { .fox-gift-bar__go { justify-self: end; } } .fox-gift-where__list { list-style: none; display: grid; gap: 12px; margin: 26px 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 760px) { .fox-gift-where__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .fox-gift-where__item > a { display: block; padding: 16px 18px; text-decoration: none; border: 1px solid var(--tone-border); border-radius: var(--radius-img); background: var(--c-white); color: inherit; } .fox-gift-where__item > a:hover, .fox-gift-where__item > a:focus-visible { border-color: var(--tone-border-strong); } .fox-gift-where__name { display: block; font-weight: 500; color: var(--tone-heading); } .fox-gift-where__city { display: block; font-size: var(--fs-small); color: var(--tone-text); } /* -------------------------------------------------------------------------- FAQ (page-faq.php) — the client's redesign of 2026-10-20, to its own measurements. Every number below is lifted from the file he supplied (Fox_Cigar_Bar_FAQ_Redesign.html): card radius 15, section inset 31, icon tile 44 at radius 11, name 20px/650, count 13px, answer 15px/1.75 to an 820px measure, and the rest. His earlier version of this was approximated from a screenshot and was not the same thing. Two deliberate differences, both invisible: - A category is a
, not a