/* Theme Name: Tigerpalooza '97 Theme URI: https://reunions.princeton97.com Description: Child theme of Twenty Twenty-Four for the Princeton Class of 1997 30th Reunion — "The Reunion Tour, Volume 30". Palette, type and patterns per the Tigerpalooza '97 brand guidelines. Author: Princeton Class of 1997 Reunion Committee Template: twentytwentyfour Version: 1.6.8 License: GNU General Public License v2 or later Text Domain: tigerpalooza-child */ /* --------------------------------------------------------------- Tokens. Colors + fonts are also declared in theme.json so they appear as native options in the editor; these vars are for the custom bits below (hard shadows, hero backdrop, marquee). --------------------------------------------------------------- */ :root { --tp-black: #0F0E0D; --tp-orange: #F0561D; --tp-pink: #FF2E7E; --tp-paper: #F4F0E6; --tp-kraft: #E2D9C6; --tp-body: #40382F; --tp-muted: #8A8177; --tp-display: Anton, Impact, sans-serif; --tp-strong: "Archivo Black", Helvetica, sans-serif; --tp-text: Barlow, Helvetica, sans-serif; --tp-mono: "Space Mono", monospace; --tp-shadow: 8px 8px 0 var(--tp-black); } /* --------------------------------------------------------------- Box model (1.4.9) THE right-margin bug. Neither TT4 nor core sets a global box-sizing, so width:100% meant 100% PLUS padding and border — every full-width box with a gutter (the cards worst of all: 100% + 40px padding + 4px border) ran past the right edge of the screen, while its left edge stayed correctly inside the section gutter. Exactly what the iPhone screenshots showed. Earlier releases patched this one element at a time (see the card-media rules below, which set box-sizing locally). This is the baseline those patches were standing in for. --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* --------------------------------------------------------------- Display type. theme.json sets the families; these fix the optical details Anton needs and TT4 does not provide. --------------------------------------------------------------- */ /* Anton and Archivo Black ship ONE weight (400). Anything that asks for bold gets a browser-faked bold — Safari's is a smeared double-strike, which is what made the header title look out of focus. Refuse synthesis and pin the real weight everywhere those two families are used. */ :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title, .wp-block-site-title a, .wp-block-navigation a, .wp-block-button__link, .tp-eyebrow, .tp-card__title, .tp-row__day) { font-weight: 400; font-synthesis: none; -webkit-font-synthesis: none; } /* The site title is an

/

whose UA default is bold; theme.json pins a weight on the heading element but not on the site-title block. */ .wp-block-site-title, .wp-block-site-title a, header.wp-block-template-part .wp-block-site-title a, .wp-site-blocks > header .wp-block-site-title a { font-weight: 400 !important; font-synthesis: none; -webkit-font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, .wp-block-post-title, .wp-block-site-title { text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.94; text-wrap: pretty; } h1, .wp-block-post-title { font-size: clamp(44px, 6vw, 92px); } h2 { font-size: clamp(30px, 3.4vw, 40px); } h3 { font-size: clamp(22px, 2.2vw, 30px); } /* Eyebrow / date / ticket-detail lines. Add "tp-eyebrow" as an Additional CSS Class on any paragraph. */ .tp-eyebrow { font-family: var(--tp-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tp-pink); margin-bottom: 0.6em; } .tp-eyebrow--muted { color: var(--tp-muted); } /* --------------------------------------------------------------- Header + nav --------------------------------------------------------------- */ /* The header is a template part. It renders as

with a group inside; TT4 (and any color you picked in the Site Editor) sets a background on the part or on that group, which beats a plain rule. So: paint the part AND its immediate group, and use !important to win over the inline `has-background` style the editor writes. */ header.wp-block-template-part, .wp-site-blocks > header, header.wp-block-template-part > .wp-block-group, .wp-site-blocks > header > .wp-block-group, .tp-header { background-color: var(--tp-black) !important; background-image: none !important; color: var(--tp-paper); } /* The bar itself: orange rule under it, and the padding lives on the inner group so the background still runs edge to edge. */ header.wp-block-template-part, .wp-site-blocks > header, .tp-header { border-bottom: 3px solid var(--tp-orange); } header.wp-block-template-part > .wp-block-group, .wp-site-blocks > header > .wp-block-group, .tp-header { padding: 14px clamp(20px, 5vw, 40px); border-bottom: 0; } /* Everything inside the bar reads cream on black, including the site title, tagline, cart/account icons and any paragraph the editor left dark. */ header.wp-block-template-part :is(a, p, h1, h2, span, .wp-block-site-title a, .wp-block-site-tagline), .wp-site-blocks > header :is(a, p, h1, h2, span, .wp-block-site-title a, .wp-block-site-tagline) { color: var(--tp-paper); } header.wp-block-template-part svg, .wp-site-blocks > header svg { fill: currentColor; } .wp-block-navigation a { font-family: var(--tp-strong); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .wp-block-navigation .current-menu-item > a, header.wp-block-template-part .wp-block-navigation a:hover, .wp-block-navigation a:hover { color: var(--tp-orange); } /* Mobile nav overlay: black ground, cream links. */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--tp-black) !important; } .wp-block-navigation__responsive-container.is-menu-open a { color: var(--tp-paper); } /* Logo: wide lockup, 40px tall in the header. Guidelines: clear space = height of the "T"; never on orange; never under 28px. */ .wp-block-site-logo img, .custom-logo { height: 40px; width: auto; } .tp-logo-plate { background: var(--tp-black); padding: 30px; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------- Buttons — core blocks + WooCommerce --------------------------------------------------------------- */ .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce #respond input#submit, input[type="submit"] { font-family: var(--tp-strong); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--tp-orange); color: var(--tp-black); border: 0; border-radius: 2px; padding: 15px 26px; transition: background 0.18s, color 0.18s, box-shadow 0.18s; } .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover, input[type="submit"]:hover { background: var(--tp-pink); color: var(--tp-paper); box-shadow: 0 6px 26px rgba(255, 46, 126, 0.42); } /* Outline button that survives sitting on a photo. */ .wp-block-button.is-style-outline .wp-block-button__link, .tp-btn-ghost .wp-block-button__link { background: rgba(15, 14, 13, 0.35); backdrop-filter: blur(3px); border: 2px solid rgba(244, 240, 230, 0.55); color: var(--tp-paper); } .wp-block-button.is-style-outline .wp-block-button__link:hover, .tp-btn-ghost .wp-block-button__link:hover { border-color: var(--tp-orange); background: rgba(240, 86, 29, 0.16); color: var(--tp-paper); } /* --------------------------------------------------------------- Buttons: "coming later" state Block → Styles → "Coming later (muted)", or add the class tp-btn-soon by hand. Kraft fill, muted ink, no hover, not clickable. --------------------------------------------------------------- */ .wp-block-button.is-style-coming-soon .wp-block-button__link, .tp-btn-soon .wp-block-button__link, a.tp-btn-soon { background: #E2D9C6 !important; color: #6E665E !important; border: 2px dashed #B6AB95 !important; box-shadow: none !important; cursor: not-allowed; pointer-events: none; } /* On the black cards the kraft fill would glare — go quiet instead. */ .tp-card--dark .wp-block-button.is-style-coming-soon .wp-block-button__link, .tp-dark .wp-block-button.is-style-coming-soon .wp-block-button__link { background: transparent !important; color: #7A736A !important; border-color: #3A342D !important; } a { color: var(--tp-orange); } a:hover { color: var(--tp-pink); } /* --------------------------------------------------------------- Cards + product tiles — hard offset shadow, no blur --------------------------------------------------------------- */ /* Card media fills the top edge of the card at a fixed ratio, so cards stay the same height whatever photo you drop in. */ .tp-card__media { margin: 0 0 22px; } .tp-card__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Opt-out for artwork that must not be cropped (tickets, jackets, logos): add the class "tp-card__media--fit" to the image block (Block → Advanced → Additional CSS class(es)). The 4/3 box and the card height stay identical; the whole image is letterboxed inside it. */ .tp-card__media--fit img { object-fit: contain; background: var(--tp-black); padding: 14px; box-sizing: border-box; } .tp-card:not(.tp-card--dark) .tp-card__media--fit img { background: #F4F0E6; } /* Same treatment, keyed to the file name, for images sitting inside a pattern where the Advanced panel (and so the class field) isn't reachable. Add file names here as needed. */ .tp-card__media img[src*="Ticket"], .tp-card__media img[src*="ticket"], .tp-card__media img[src*="jacket"], .tp-card__media img[src*="Jacket"] { object-fit: contain; background: #F4F0E6; padding: 14px; box-sizing: border-box; } .tp-card--dark .tp-card__media img[src*="Ticket"], .tp-card--dark .tp-card__media img[src*="ticket"] { background: var(--tp-black); } .tp-card, .woocommerce ul.products li.product { background: #fff; border: 2px solid var(--tp-black); box-shadow: var(--tp-shadow); transition: box-shadow 0.18s; } .tp-card:hover, .woocommerce ul.products li.product:hover { box-shadow: 12px 12px 0 var(--tp-orange); } .tp-card--dark { background: var(--tp-black); color: #C4BCB1; box-shadow: 8px 8px 0 var(--tp-orange); } .tp-card--dark h1, .tp-card--dark h2, .tp-card--dark h3 { color: var(--tp-paper); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--tp-strong); font-size: 17px; text-transform: none; padding: 0 20px; } .woocommerce ul.products li.product .price { font-family: var(--tp-display); font-size: 26px; color: var(--tp-black); padding: 0 20px; } .woocommerce span.onsale, .tp-badge { font-family: var(--tp-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--tp-pink); color: var(--tp-paper); border-radius: 0; padding: 5px 9px; min-height: 0; min-width: 0; line-height: 1.4; } /* --------------------------------------------------------------- Full-bleed section stacking TT4 puts a block-gap margin between every top-level block, which lets the paper background show as a tan stripe between our dark bands. Sections own their own vertical padding, so kill the gap at the top level only — groups nested inside keep theirs. --------------------------------------------------------------- */ .wp-site-blocks > *, .wp-site-blocks > * + *, .wp-site-blocks > .alignfull, .wp-site-blocks > main > *, .wp-site-blocks > main > * + *, .wp-block-post-content > .alignfull, .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; margin-block-end: 0; } /* Full-bleed sections must span the viewport even when they sit inside a constrained, padded wrapper (TT4's "no title" template wraps content in a group with side padding — that padding was the tan on the sides). The breakout is measured from the wrapper, so it survives any depth. */ .wp-block-post-content > .alignfull, .entry-content > .alignfull, .wp-block-group > .alignfull, .wp-site-blocks main > .alignfull { width: auto; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Belt and braces: our section classes are ALWAYS full-bleed, whether or not the saved block carries align:full. Patterns are snapshotted into a page when inserted, so pages built from an earlier version of a pattern keep the old alignment attributes — this makes the section right regardless of what's in the database. */ .tp-hero, .tp-dark, .tp-band, .tp-ticker, .tp-section { width: auto !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Inner measure. WordPress generates per-block layout CSS with the 760px content size BAKED IN (".wp-container-core-group-layout-N > *"), and prints it after the theme stylesheet — so setting the content-size variable here does nothing. The measure has to be overridden directly, hence !important. */ .tp-hero > *:not([aria-hidden="true"]), .tp-dark > *, .tp-band > *, .tp-section > *, .wp-site-blocks main > .wp-block-group.alignfull > *, .wp-block-post-content > .wp-block-group.alignfull > * { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; } /* The hero's decorative layers (photo stack, scrim, poster grid) are direct children too, and must span the whole section — never the 1240px measure above, which cropped them into a centred band. */ .tp-hero__crowd, .tp-hero__scrim, .tp-hero__grid { max-width: none !important; width: 100% !important; margin: 0 !important; } /* Columns, rows and grids anywhere inside a section fill the measure rather than inheriting the narrow cap. */ .tp-hero :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-dark :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-band :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-section :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards) { /* 1240px, not none: these must line up with the headings above them, which are capped at the same measure. "none" let the card rows bleed to the viewport edge while the heading stayed centred in 1240. */ max-width: 1240px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; } /* Three-up cards: equal columns, equal heights, gap clear of the 8px offset shadows. */ .tp-cards.wp-block-columns, .tp-section .wp-block-columns { align-items: stretch; gap: clamp(24px, 3vw, 42px); } .tp-cards.wp-block-columns > .wp-block-column, .tp-section .wp-block-columns > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; min-width: 0; max-width: none !important; } .tp-card { height: 100%; display: flex; flex-direction: column; padding: clamp(22px, 2vw, 30px); } /* Pin each card's last element to the bottom so links/buttons align. */ .tp-card > :last-child { margin-top: auto; } /* Default step between blocks inside a card. Deliberately low-specificity and NOT !important, so any Margin you set in the editor wins over it. Change the default for every card at once by editing --tp-card-step. */ .tp-card { --tp-card-step: 14px; } .tp-card > * + *, .tp-card .wp-block-group > * + * { margin-top: var(--tp-card-step); } /* Card headings are display type in a narrow column — let them breathe and never hyphen-break mid-word. */ .tp-card h2, .tp-card h3 { font-size: clamp(24px, 2vw, 30px); overflow-wrap: normal; hyphens: none; } .tp-card p { max-width: none; } /* Default breathing room above a card's button row. Editor Margin values override this (inline styles beat class rules), so tune it there per card, or change --tp-card-button-gap once for all cards. */ .tp-card { --tp-card-button-gap: 26px; } .tp-card .wp-block-buttons { margin-top: var(--tp-card-button-gap); } /* --------------------------------------------------------------- Housing page: auto-wrapping card grid, hotel card fields, table --------------------------------------------------------------- */ /* Price-band header strip above each row of cards. */ .tp-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; background: var(--tp-black); padding: 14px 20px; margin-top: 52px; } .tp-band-head > * { margin: 0 !important; } .tp-band-head__price { font-family: var(--tp-display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1; text-transform: uppercase; color: var(--tp-orange); } .tp-band-head__note { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #9A9188; } /* Intro line + the one control that opens every card's fine print. */ .tp-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; } .tp-intro > p { max-width: 62ch; margin: 0 !important; } .tp-intro .wp-block-buttons { margin: 0 !important; } .tp-fine-all .wp-block-button__link { font-family: var(--tp-mono) !important; font-size: 12px; letter-spacing: 0.12em; background: transparent; backdrop-filter: none; border: 2px solid var(--tp-black); color: var(--tp-black); padding: 13px 18px; white-space: nowrap; } .tp-fine-all .wp-block-button__link:hover { background: var(--tp-black); border-color: var(--tp-black); color: var(--tp-paper); box-shadow: none; } /* Card grid. Each card is a 7-row subgrid so the badge row, name, rates, address block, dates box, fine-print link and button line up across the row — no vertical drift between neighbours. auto-fill (not auto-fit) keeps the empty tracks, so the last band's single card is the same width as a card in a full row of three. */ .tp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 373px), 1fr)); column-gap: clamp(24px, 3vw, 42px); row-gap: 14px; grid-auto-rows: auto; margin-top: 20px; margin-bottom: 34px; } .tp-hotel { display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; } .tp-hotel > *, .tp-hotel > * + * { margin-top: 0 !important; margin-bottom: 0 !important; } /* Hotel names wrap often — 0.94 was too tight for two- and three-liners. */ .tp-hotel .wp-block-heading { font-size: clamp(21px, 1.6vw, 25px); line-height: 1.08; letter-spacing: -0.005em; align-self: start; } /* Shuttle indicator, two opposite states: filled pink pill with a bus for yes, hollow dashed pill with a struck-through bus for no. Orange is reserved for the single booking button in each card. */ .tp-hotel__flags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* The generic .tp-card group step would push the second chip down. */ .tp-hotel__flags > * { margin: 0 !important; align-self: center; } .tp-pill, .tp-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tp-strong); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; padding: 6px 12px; border: 2px solid transparent; line-height: 1.25; } .tp-pill::before { content: ""; width: 15px; height: 15px; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 16v2M17 16v2'/%3E%3Ccircle cx='7.5' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.5' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 16v2M17 16v2'/%3E%3Ccircle cx='7.5' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.5' cy='19' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain; } .tp-pill--yes { background: var(--tp-pink); border-color: var(--tp-pink); color: var(--tp-black); } .tp-pill--no { background: transparent; border-style: dashed; border-color: #C7BEAF; color: #6E665E; } .tp-pill--no::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 16v2M17 16v2M2 22 22 2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 16v2M17 16v2M2 22 22 2'/%3E%3C/svg%3E") no-repeat center / contain; } .tp-chip { background: #EFE9DA; border-color: #EFE9DA; color: #6E665E; font-family: var(--tp-mono); letter-spacing: 0.12em; padding: 7px 11px; } /* Rate rows: price first, room type after it. */ .tp-rates { align-self: start; } .tp-rates > * { margin: 0 !important; } .tp-rate { display: flex; align-items: baseline; gap: 9px; padding: 2px 0; } .tp-rate__price { font-family: var(--tp-display); font-size: 21px; line-height: 1; color: var(--tp-black); min-width: 62px; } .tp-rate__room { font-size: 14px; line-height: 1.3; color: var(--tp-body); } /* Address, phone, distance — one per line. */ .tp-hotel__meta { font-family: var(--tp-mono); font-size: 12.5px; line-height: 1.55; color: #6E665E; align-self: start; } .tp-hotel__meta > * { margin: 0 !important; } .tp-hotel__meta a { color: inherit; text-decoration: none; } .tp-hotel__meta a:hover { color: var(--tp-orange); } .tp-maps { white-space: nowrap; border-bottom: 1px solid currentColor; } /* The three dates that decide whether you can still get out of a booking. Label left, value right, values in the strong face so they scan. */ .tp-dates { background: #EFE9DA; border-left: 4px solid var(--tp-orange); padding: 12px 14px; align-self: start; } .tp-dates > * { margin: 0 !important; } .tp-dates__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid #DCD3C0; } .tp-dates__row:last-child, .tp-dates__row--last { border-bottom: 0; } .tp-dates__row span { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: #6E665E; white-space: nowrap; } .tp-dates__row strong { font-family: var(--tp-strong); font-weight: 400; font-size: 14px; color: var(--tp-black); text-align: right; } /* Everything else about charges and cancellation folds away. */ .tp-fine { align-self: start; } .tp-fine > summary { display: inline-block; font-family: var(--tp-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6E665E; border-bottom: 1px solid #DCD3C0; cursor: pointer; list-style: none; padding: 2px 0; } .tp-fine > summary::marker, .tp-fine > summary::-webkit-details-marker { display: none; content: ""; } .tp-fine > summary:hover { color: var(--tp-orange); border-color: var(--tp-orange); } .tp-fine p { font-size: 13.5px; line-height: 1.55; color: #6E665E; margin-top: 10px !important; } .tp-hotel__fine { font-size: 14px; line-height: 1.5; color: #6E665E; } /* Compare table, collapsed by default, sitting above the first price band. Deliberately a wide black bar so it does not read as another small mono "Fine print" link. */ .tp-compare { margin-top: 34px !important; margin-bottom: 8px !important; } .tp-compare > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--tp-strong); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--tp-black); color: var(--tp-paper); padding: 16px 20px; cursor: pointer; list-style: none; } .tp-compare > summary::marker, .tp-compare > summary::-webkit-details-marker { display: none; content: ""; } .tp-compare > summary::after { content: "Show +"; font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tp-orange); white-space: nowrap; } .tp-compare[open] > summary::after { content: "Hide –"; } .tp-compare > summary:hover { background: #221E1A; } .tp-compare > summary:hover::after { color: var(--tp-pink); } .tp-compare .tp-table { margin-top: 0 !important; } .tp-table-head { margin-bottom: 18px !important; } .tp-table table { border-collapse: collapse; width: 100%; background: #fff; border: 2px solid var(--tp-black); } .tp-table th { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-align: left; background: var(--tp-black); color: var(--tp-paper); padding: 12px 14px; } .tp-table td { font-size: 15px; padding: 13px 14px; border-top: 1px solid #E2D9C6; vertical-align: top; } .tp-table tbody tr:hover { background: #FBF8F0; } @media (max-width: 781px) { /* One column: drop the subgrid so stacked cards get real space between them instead of the 13px internal row gap. */ .tp-cards-grid { grid-template-columns: 1fr; row-gap: 40px; } .tp-hotel { grid-row: auto; grid-template-rows: none; row-gap: 13px; } .tp-table table, .tp-table td, .tp-table th { font-size: 14px; } .tp-cards.wp-block-columns, .tp-section .wp-block-columns { gap: 32px; } } /* Kill the wrapper's own side padding so nothing is inset by it. */ .wp-site-blocks > main, .wp-block-post-content, .entry-content { padding-left: 0; padding-right: 0; } /* The header/footer parts are already full width; never let the breakout math touch them. */ .wp-site-blocks > header, .wp-site-blocks > footer { width: auto; max-width: none; margin-left: 0; margin-right: 0; } /* No horizontal scrollbar from the 50vw breakout. "clip" rather than "hidden": iOS Safari does not reliably honour overflow-x:hidden on html/body, which is how a section one or two pixels wider than the viewport ended up painting off the right edge instead of being contained. */ html, body { overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* Nothing may exceed its box on a phone-width screen. */ img, video, iframe, table, pre { max-width: 100%; } /* Anything sitting directly on the paper background gets the section rhythm back via its own padding, never a margin. */ .tp-dark + .tp-dark { border-top: 1px solid #2C2823; } /* --------------------------------------------------------------- Section bands --------------------------------------------------------------- */ .tp-dark { background: var(--tp-black); color: #C4BCB1; } .tp-dark h1, .tp-dark h2, .tp-dark h3 { color: var(--tp-paper); } .tp-band { background: var(--tp-orange); color: var(--tp-black); } .tp-band a, .tp-band h2 { color: var(--tp-black); } /* Setlist rows */ .tp-setlist { margin-top: 36px; } .tp-row { display: grid; grid-template-columns: 56px minmax(120px, 170px) minmax(0, 1fr) auto; gap: clamp(14px, 2vw, 26px); align-items: center; padding: 26px 0; border-bottom: 1px solid #2C2823; } .tp-row:hover { background: #1A1714; } /* Rows are built from ordinary paragraph/group blocks so every line is editable in the editor. Kill the default block margins that would otherwise break the grid, then style each field by its class. */ .tp-row > *, .tp-row__body > * { margin-top: 0; margin-bottom: 0; } .tp-row__num { font-family: var(--tp-mono); font-size: 12px; color: #4E4842; } .tp-row__title { font-family: var(--tp-strong); font-size: 19px; color: var(--tp-paper); margin-bottom: 5px !important; } .tp-row__detail { color: #9A9188; } .tp-row__day { font-family: var(--tp-display); font-size: 24px; text-transform: uppercase; color: var(--tp-orange); } .tp-row__venue { font-family: var(--tp-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid #4A443C; padding: 8px 14px; } /* Tablet: drop the venue chip to its own line before the grid overflows. */ @media (max-width: 1024px) { .tp-row { grid-template-columns: 46px minmax(110px, 150px) minmax(0, 1fr); } .tp-row__venue { grid-column: 2 / -1; justify-self: start; margin-top: 4px; } } @media (max-width: 781px) { .tp-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; } .tp-row__venue { grid-column: auto; } } /* --------------------------------------------------------------- Hero crowd backdrop — four layers on a 36s cross-fade. Markup comes from the "Tigerpalooza Hero" pattern. --------------------------------------------------------------- */ .tp-hero { position: relative; overflow: hidden; background: var(--tp-black); } .tp-hero > *:not([aria-hidden="true"]) { position: relative; z-index: 3; } .tp-hero__crowd { position: absolute; inset: 0; z-index: 0; opacity: 0.95; filter: blur(4px) saturate(0.8) contrast(1.02) brightness(0.95); pointer-events: none; } .tp-hero__crowd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: tp-crowd 36s linear infinite; } /* Three layers on a 27s loop — 9s per photo, 1.5s cross-fade. Negative delay on the first so the hero is never black on load. */ .tp-hero__crowd img { animation-duration: 27s; } .tp-hero__crowd img:nth-child(1) { opacity: 1; animation-delay: -2s; } .tp-hero__crowd img:nth-child(2) { animation-delay: 7s; } .tp-hero__crowd img:nth-child(3) { animation-delay: 16s; } @keyframes tp-crowd { 0% { opacity: 0; transform: scale(1.06); } 6%, 33% { opacity: 1; } 39%, 100% { opacity: 0; transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .tp-hero__crowd img { animation: none; } .tp-hero__crowd img:nth-child(n+2) { display: none; } } /* Scrim: heavy behind the headline, light over the photo side. */ .tp-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Heavier on the text side so a bright, busy photo can't wash out the copy — the brightest frames were the ones that broke legibility. */ background: linear-gradient(90deg, rgba(15,14,13,0.94) 0%, rgba(15,14,13,0.88) 34%, rgba(15,14,13,0.6) 62%, rgba(15,14,13,0.24) 100%), linear-gradient(180deg, rgba(15,14,13,0.5) 0%, transparent 26%, transparent 68%, rgba(15,14,13,0.6) 100%); } /* Last-resort legibility: a soft dark halo on the hero copy itself, so it holds up over whichever frame is showing. */ .tp-hero h1, .tp-hero p { text-shadow: 0 2px 18px rgba(15, 14, 13, 0.85); } /* The muted mono lines were the hardest to read — lift them off the photo. */ .tp-hero .tp-eyebrow--muted { color: #B8AEA2; } /* Tighten the headline-to-eyebrow gap. TT4 applies blockGap as a top margin on every following sibling, which reads as a dead band under Anton's already-tight 0.94 line-height. Tune the 10px only. */ .tp-hero h1 { margin-bottom: 0; } .tp-hero h1 + .tp-eyebrow, .tp-hero h1 + .tp-eyebrow--muted { margin-top: 10px !important; } /* Faint vertical rules, like a poster grid. */ .tp-hero__grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(240,86,29,0.055) 0 2px, transparent 2px 46px); } /* Mascot art with its glow. Hero-scale on the homepage only. */ .tp-hero__art { position: relative; display: flex; justify-content: center; align-items: flex-end; } .tp-hero__art::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240,86,29,0.42) 0%, rgba(255,46,126,0.16) 42%, transparent 70%); filter: blur(30px); pointer-events: none; } .tp-hero__art img { position: relative; filter: drop-shadow(0 0 34px rgba(240,86,29,0.5)) drop-shadow(0 24px 60px rgba(0,0,0,0.7)); } /* --------------------------------------------------------------- Ticker --------------------------------------------------------------- */ .tp-ticker { background: var(--tp-black); overflow: hidden; border-bottom: 1px solid #2C2823; } .tp-ticker__track { display: flex; width: max-content; animation: tp-marquee 28s linear infinite; } .tp-ticker__track > div { display: flex; gap: 34px; padding: 9px 34px 9px 0; flex: 0 0 auto; font-family: var(--tp-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8177; white-space: nowrap; } .tp-ticker__track span[aria-hidden] { color: var(--tp-orange); } @keyframes tp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .tp-ticker__track { animation: none; } } /* --------------------------------------------------------------- Stats band + footer --------------------------------------------------------------- */ .tp-stat { font-family: var(--tp-display); font-size: clamp(34px, 3.6vw, 46px); line-height: 1; color: var(--tp-black); margin: 0; } .tp-stat + p { font-family: var(--tp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(15,14,13,0.7); margin-top: 4px; } .wp-block-template-part footer { border-top: 6px solid var(--tp-orange); background: var(--tp-paper); } /* --------------------------------------------------------------- Phones — three-up cards (1.4.6) The rule at "Three-up cards" above sets flex-basis:0 !important on every column so the three cards share the row equally. Core WordPress stacks columns below 782px with flex-basis:100% !important — same specificity, and this stylesheet loads after core, so ours won a fight it was never meant to enter and the cards stayed in a three-across row on phones (~100px each). Release it here. --------------------------------------------------------------- */ @media (max-width: 781px) { .tp-cards.wp-block-columns, .tp-section .wp-block-columns { flex-wrap: wrap !important; } .tp-cards.wp-block-columns > .wp-block-column, .tp-section .wp-block-columns > .wp-block-column { flex-basis: 100% !important; flex-grow: 1 !important; flex-shrink: 0 !important; } /* The card carries 22px of padding and the group inside it another 26px from the pattern — 96px of a 350px screen. Drop the inner one; the card's own padding is the gutter. */ .tp-card { padding: 20px; } .tp-section .tp-card > .wp-block-group[style*="padding"] { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } /* Keep the hard shadow inside the 20px section gutter. */ .tp-card, .tp-card:hover { box-shadow: 6px 6px 0 var(--tp-black); } .tp-card--dark, .tp-card--dark:hover { box-shadow: 6px 6px 0 var(--tp-orange); } /* Full-width tap targets, stacked with a real gap. */ .tp-card .wp-block-buttons { flex-direction: column; gap: 10px; } .tp-card .wp-block-button { width: 100%; } .tp-card .wp-block-button__link { display: block; width: 100%; text-align: center; padding-top: 16px !important; padding-bottom: 16px !important; } /* Card headings get the room a full-width card allows. */ .tp-card h2, .tp-card h3 { font-size: 28px; } } /* --------------------------------------------------------------- Phones — right-edge overflow (1.4.7) Every band is pushed full-bleed with margin-inline: calc(50% - 50vw). That math assumes 50vw equals half the container, which on iOS it does not: Safari measures vw against the layout viewport, so each section came out a few pixels wider than the screen and hung off the right edge (clipped, not scrollable, so it read as "cut off"). On phones the wrapper is already edge to edge — the theme zeroes its padding above — so the breakout is unnecessary. Turn it off. --------------------------------------------------------------- */ @media (max-width: 781px) { .tp-hero, .tp-dark, .tp-band, .tp-ticker, .tp-section, .wp-block-post-content > .alignfull, .entry-content > .alignfull, .wp-block-group > .alignfull, .wp-site-blocks main > .alignfull { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* The 1240px inner measure can't be wider than the screen either. */ .tp-hero > *:not([aria-hidden="true"]), .tp-dark > *, .tp-band > *, .tp-section > *, .tp-hero :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-dark :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-band :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards), .tp-section :is(.wp-block-columns, .wp-block-group.is-layout-flex, .tp-setlist, .tp-cards) { max-width: 100% !important; } /* The seven-column compare table can't fit 390px and shouldn't try. Scroll it inside its own box rather than widening the page. */ .tp-table { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .tp-table table { min-width: 620px; } } /* --------------------------------------------------------------- Footer — gutter at every width (1.5.0) The mobile gutter below only fired under 782px, so tablets (and any width where the Site Editor value is zero/small) still rendered the footer flush to the left edge. Set a real horizontal gutter on the footer group unconditionally; the inner content is still max-width constrained on desktop, so wide screens stay centered as before. --------------------------------------------------------------- */ footer.wp-block-template-part > .wp-block-group, .wp-site-blocks > footer > .wp-block-group { padding-inline: clamp(24px, 4vw, 56px) !important; } /* Nested groups/columns inherit the gutter — don't double it. */ .wp-site-blocks > footer > .wp-block-group > .wp-block-group, .wp-site-blocks > footer > .wp-block-group > .wp-block-columns { padding-inline: 0 !important; } /* Tablet: two link columns are plenty; keep them from crowding. */ @media (min-width: 782px) and (max-width: 1024px) { .wp-site-blocks > footer .wp-block-columns { gap: 40px !important; } } /* --------------------------------------------------------------- Footer — mobile margins (1.4.7) The footer is TT4's template part, so its padding comes from the Site Editor and is usually a desktop-sized value. Give it a real gutter and vertical rhythm on phones, and let the link columns stack with room between them. --------------------------------------------------------------- */ @media (max-width: 781px) { footer.wp-block-template-part > .wp-block-group, .wp-site-blocks > footer > .wp-block-group { padding: 44px clamp(20px, 5vw, 32px) 36px !important; } .wp-site-blocks > footer .wp-block-columns { gap: 34px !important; } .wp-site-blocks > footer .wp-block-column { flex-basis: 100% !important; } /* Column headings read as labels, not as section heads. */ .wp-site-blocks > footer h2, .wp-site-blocks > footer h3 { font-size: 22px !important; margin-bottom: 12px !important; } /* Comfortable tap spacing on the link lists. */ .wp-site-blocks > footer li + li { margin-top: 10px; } .wp-site-blocks > footer :is(li a, p a) { display: inline-block; padding: 4px 0; } .wp-site-blocks > footer .wp-block-site-logo img { height: 34px; } } /* --------------------------------------------------------------- Phones — three-up cards, unconditional stack (1.4.8) 1.4.7 released the flex-basis override, which is necessary but not sufficient. Two things still kept the cards in a row: 1. If "Stack on mobile" is switched off on the Columns block, core adds .is-not-stacked-on-mobile and "flex-wrap: nowrap !important". Equal specificity to ours, so the outcome depended on load order, and a 100% basis under nowrap just overflows sideways instead. 2. The row only stacked when it was inside .tp-section. A section rebuilt in the editor — or a Grid/Group block instead of Columns — matched nothing. So: target any block that CONTAINS a .tp-card and force a single column with flex-direction, which no wrap or basis value can undo. Structure-agnostic, and independent of the section class. --------------------------------------------------------------- */ @media (max-width: 781px) { :is(.wp-block-columns, .wp-block-group, .wp-block-post-template):not(.tp-cards-grid):has(> .tp-card), :is(.wp-block-columns, .wp-block-group):not(.tp-cards-grid):has(> .wp-block-column > .tp-card) { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 32px !important; width: 100% !important; max-width: 100% !important; } :is(.wp-block-columns, .wp-block-group):not(.tp-cards-grid):has(> .tp-card) > *, :is(.wp-block-columns, .wp-block-group):not(.tp-cards-grid):has(> .wp-block-column > .tp-card) > * { /* align-self:stretch + width:auto, never width:100% — the card carries padding and a border, and 100% is measured on the content box. This is what hung the cards off the right edge. */ flex: 0 0 auto !important; align-self: stretch !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin-top: 0 !important; } /* A Grid block used for the same row. */ :is(.wp-block-columns, .wp-block-group).is-layout-grid:not(.tp-cards-grid):has(> .tp-card) { grid-template-columns: 1fr !important; } /* Belt and braces for the class the pattern actually ships. */ .tp-cards.wp-block-columns.is-not-stacked-on-mobile, .tp-section .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap !important; flex-direction: column !important; } /* A card is never taller than its content once it is full width. */ .tp-card { height: auto !important; } } /* No :has() (Safari under 15.4, older Android): fall back to the class selectors, and give up the not-stacked case rather than the row. */ @supports not selector(:has(*)) { @media (max-width: 781px) { .tp-cards.wp-block-columns, .tp-section .wp-block-columns { display: flex !important; flex-direction: column !important; gap: 32px !important; } .tp-cards.wp-block-columns > .wp-block-column, .tp-section .wp-block-columns > .wp-block-column { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } } } /* --------------------------------------------------------------- Phones — final overflow guard (1.4.9) With border-box in place nothing should exceed its box; this catches anything with a hard-coded width left in page content. --------------------------------------------------------------- */ @media (max-width: 781px) { .tp-card, .tp-hotel, .tp-card > .wp-block-group, .tp-section .wp-block-columns, .tp-section .wp-block-columns > .wp-block-column { box-sizing: border-box !important; max-width: 100% !important; } /* Buttons and media inside a card measure on the same box. */ .tp-card .wp-block-button__link, .tp-card .wp-block-buttons, .tp-card__media, .tp-card__media img { max-width: 100% !important; } } /* --------------------------------------------------------------- FAQ page — Ultimate FAQ plugin restyle (1.6.0) Two separate problems on /faqs/: 1. INDENTATION. The plugin ships its own layout CSS: the answer body is pushed right by a floated symbol column, and its nested
    /