/* /promote — "Promote your Punjabi song or movie". * Loaded by promote.php alone, after assets/css/ui.css, whose tokens and components * (ui-page-head, ui-btn, ui-badge, ui-actions ...) it builds on. Dark only, like the * rest of the site. Surfaces are --r-lg, controls --r-sm, as in ui.css. */ /* ---------- Song / movie switch ---------- Both halves are in the HTML. Without JavaScript both show, song first. With it, hides the other half. The class is set by an inline script at the top of and data-pr-type is printed by the server, so the right half is the only one ever painted: nothing jumps. */ html.pr-js[data-pr-type="song"] [data-pr-kind="movie"], html.pr-js[data-pr-type="movie"] [data-pr-kind="song"] { display: none !important; } /* Copy that only makes sense with the switch working, and its no-JS stand-in. */ .pr-jsonly { display: none; } html.pr-js .pr-jsonly { display: inline; } html.pr-js .pr-nojs { display: none; } .pr { max-width: calc(1040px + 2 * var(--gutter)); padding-bottom: 64px; } /* ---------- 1. Hero ---------- */ .pr-hero h1 { max-width: 18ch; } .pr-answer { margin-top: 12px; max-width: 60ch; } .pr-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin: 24px 0 0; } .pr-choice__opt { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .15s, background-color .15s; } .pr-choice__opt:hover { border-color: var(--line-strong); background: var(--surface-2); } .pr-choice__opt.is-active { border-color: var(--accent); background: linear-gradient(120deg, var(--accent-soft), transparent 75%), var(--surface); } .pr-choice__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent-text); } .pr-choice__icon .ui-icon { width: 20px; height: 20px; } .pr-choice__text { display: flex; flex-direction: column; min-width: 0; } .pr-choice__text strong { font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--text); } .pr-choice__text span { margin-top: 2px; font-size: .8rem; line-height: 1.35; color: var(--text-2); } @media (max-width: 420px) { .pr-choice__opt { flex-direction: column; align-items: flex-start; gap: 8px; } } .pr-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 20px 0 0; } .pr-hero-note { max-width: 46ch; font-size: .85rem; line-height: 1.5; color: var(--text-3); } /* ---------- Section rhythm ---------- */ .pr-sec { padding-top: 40px; } @media (min-width: 768px) { .pr-sec { padding-top: 56px; } } .pr-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; } .pr-h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 750; } .pr-p { max-width: 64ch; margin: 0 0 18px; font-size: .95rem; line-height: 1.65; color: var(--text-2); } .pr-note { max-width: 64ch; margin-top: 16px; font-size: .8rem; line-height: 1.55; color: var(--text-3); } /* "Promoting a movie instead?" — only useful when the switch works. */ .pr-switch { display: none; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--accent-text) !important; } html.pr-js .pr-switch { display: inline-flex; } .pr-switch:hover { text-decoration: underline !important; } /* Without JS the two halves stack; a rule between them keeps them apart. */ html:not(.pr-js) .pr-kind + .pr-kind { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } /* ---------- 2. The offer: mock + what you get ---------- */ /* minmax(0, …) on every track: the mock's one-line, ellipsised titles would otherwise set the column's min-content width and push it past a phone screen. */ .pr-offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; } .pr-offer > * { min-width: 0; } @media (min-width: 860px) { .pr-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; } } /* Illustrations of the real slots, drawn from the same rules as the cards they show (index.php .home-promo, movies.php .is-promoted), with empty artwork and placeholder text so nothing here can be mistaken for a real release. */ .pr-mock { margin: 0; padding: 14px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line); } @media (min-width: 640px) { .pr-mock { padding: 18px; } } .pr-mock-h { margin: 0 0 10px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .pr-mock-foot { margin: 10px 0 0; font-size: .75rem; line-height: 1.4; color: var(--text-3); } .pr-mock-cap { margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-3); } .prm-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); } .prm-thumb { flex: none; display: grid; place-items: center; width: 88px; height: 50px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--line-strong); font-size: .58rem; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--text-3); } .prm-body { flex: 1; min-width: 0; } /* display:block is load-bearing: ellipsis does nothing on an inline box. */ .prm-title, .prm-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prm-title { margin-top: 6px; font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--text); } .prm-sub { font-size: .85rem; line-height: 1.4; color: var(--text-2); } .prm-go { flex: none; display: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: .875rem; font-weight: 600; color: var(--text); } @media (min-width: 640px) { .prm-card { gap: 14px; padding: 12px; } .prm-thumb { width: 104px; height: 59px; font-size: .6rem; } .prm-title { font-size: 1rem; } .prm-go { display: inline-flex; } } /* /movies mock: the promoted poster first, the ordinary catalogue greyed behind it. */ .prm-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .prm-posters > :nth-child(4) { display: none; } @media (min-width: 480px) { .prm-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .prm-posters > :nth-child(4) { display: block; } } .prm-poster { min-width: 0; } .prm-poster:not(.is-promoted) { opacity: .5; } .prm-poster__img { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; } .prm-poster.is-promoted .prm-poster__img { background: rgba(255, 255, 255, .03); border: 1px dashed var(--accent); } .prm-poster__img .ui-badge { position: absolute; top: 6px; left: 6px; height: 18px; padding: 0 6px; font-size: .62rem; } .prm-poster__txt { padding: 0 6px; font-size: .58rem; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--text-3); } .prm-poster__t { display: block; margin-top: 6px; font-size: .78rem; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prm-line { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: var(--surface-2); } .prm-line--s { width: 45%; margin-top: 5px; } .pr-list { list-style: none; margin: 0; padding: 0; max-width: 64ch; } .pr-list li { position: relative; margin: 0 0 14px; padding: 0 0 0 20px; font-size: .95rem; line-height: 1.6; color: var(--text-2); } .pr-list li:last-child { margin-bottom: 0; } .pr-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .pr-list strong { font-weight: 650; color: var(--text); } /* "What we will not do": same list, neutral marker — a statement, not a warning. */ .pr-list--plain li::before { background: var(--line-strong); } /* A real booking, when there is one. */ .pr-live { margin-top: 22px; } .pr-live-h { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } /* ---------- 3. More places ---------- */ .pr-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .pr-place { display: flex; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .pr-place__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); background: var(--surface-2); color: var(--text-2); } .pr-place.is-paid .pr-place__icon { background: var(--accent-soft); color: var(--accent-text); } .pr-place__icon .ui-icon { width: 20px; height: 20px; } .pr-place__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .pr-place__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; } .pr-place__t { font-size: .975rem; font-weight: 650; line-height: 1.3; color: var(--text); } .pr-place__d { font-size: .875rem; line-height: 1.5; color: var(--text-2); } .pr-place__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .85rem; font-weight: 600; color: var(--accent-text) !important; } .pr-place__go:hover { text-decoration: underline !important; } /* ---------- 4. Audience ---------- No boxes: a hairline over each figure groups them as one set, the number carries the section, tabular figures keep the digits in columns. */ .pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 24px 20px; } .pr-stat { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line-strong); } .pr-stat__k { display: block; margin-bottom: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .pr-stat__n { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: var(--accent-text); font-variant-numeric: tabular-nums; } .pr-stat__l { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: var(--text-2); } /* ---------- 5. Terms ---------- */ .pr-trust, .pr-panel { padding: 20px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } @media (min-width: 640px) { .pr-trust, .pr-panel { padding: 26px 24px; } } .pr-trust-lede { margin: 0 0 16px; font-size: 1rem; font-weight: 650; line-height: 1.5; color: var(--text); } /* ---------- 6. Enquiry form ---------- */ .pr-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } /* Without this the `hidden` the success handler sets would lose to display:grid (author rules beat the UA [hidden] rule) and the form would stay on screen. */ .pr-form[hidden], .pr-result[hidden] { display: none; } .pr-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @media (min-width: 640px) { .pr-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .pr-field { min-width: 0; } .pr-field label { display: block; margin: 0 0 7px; font-size: .875rem; font-weight: 600; color: var(--text); } .pr-opt { font-weight: 400; color: var(--text-3); } /* --bg-input, not a colour of our own: modern-theme.css already forces it (with !important) onto text, email and textarea fields, so tel, url and date fields use the same token or they come out a different shade from their neighbours. */ .pr-field input, .pr-field textarea { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; background: var(--bg-input, var(--surface-2)); border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4; box-shadow: none; } .pr-field textarea { min-height: 140px; resize: vertical; } .pr-field input:focus, .pr-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .pr-field input[aria-invalid="true"], .pr-field textarea[aria-invalid="true"] { border-color: var(--down); } .pr-err { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.4; color: var(--down); } /* Collapsed, not display:none: a live region that is display:none when it changes is not reliably announced. Empty, it already takes no height. */ .pr-err:empty { margin-top: 0; } /* "What are you promoting?" */ .pr-typeset { min-width: 0; margin: 0; padding: 0; border: 0; } .pr-typeset > legend { margin: 0 0 8px; padding: 0; font-size: .875rem; font-weight: 600; color: var(--text); } .pr-types { display: flex; flex-wrap: wrap; gap: 8px; } .pr-type { flex: 1 1 180px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; background: var(--bg-input, var(--surface-2)); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: .9rem; font-weight: 600; color: var(--text-2); } .pr-type:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .pr-type:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* miniAll.css styles every `label input` with a brown fill and an orange glow, !important. */ .pr-type input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); background: none !important; box-shadow: none !important; } /* The song and movie field groups. Without JS both show, framed and captioned so it is obvious which to fill in; with JS only the chosen one shows, unframed. */ .pr-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; margin: 0; padding: 14px 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); } .pr-group > legend { padding: 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } html.pr-js .pr-group { padding: 0; border: 0; border-radius: 0; } html.pr-js .pr-group > legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Honeypot: out of the layout and the tab order, but not display:none — some bots skip hidden inputs, and this one wants filling. */ .pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pr-submit { justify-self: stretch; } @media (min-width: 640px) { .pr-submit { justify-self: start; min-width: 200px; } } .pr-result { padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: .92rem; line-height: 1.55; color: var(--text); } .pr-result.is-ok { border-color: var(--accent); background: var(--accent-soft); } .pr-result.is-error { border-color: var(--down); background: var(--down-soft); } .pr-result:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .pr-result:not([hidden]) { margin-bottom: 16px; } /* "Prefer email?" */ .pr-mailbox { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .pr-mailbox__lede { font-size: 1rem; font-weight: 600; color: var(--text); } /* One tap selects the whole address, so it copies cleanly even without the button. */ .pr-addr { -webkit-user-select: all; user-select: all; color: var(--accent-text); overflow-wrap: anywhere; } .pr-mailbox__sub { margin-top: 4px; font-size: .85rem; color: var(--text-3); } .pr-mailbox .ui-actions { margin-top: 14px; } /* The copy button needs the script, so it is laid out only where the script runs — from first paint, via the class set in , never popped in later. The fixed width keeps "Copy address" -> "Copied" from nudging anything. */ .pr-copy { display: none; min-width: 10.5em; } html.pr-js .pr-copy { display: inline-flex; } /* ---------- 7. FAQ ---------- */ .pr-faq { max-width: 760px; } .pr-faq__item { padding: 16px 0; border-top: 1px solid var(--line); } .pr-faq__item:first-of-type { padding-top: 4px; border-top: 0; } .pr-faq__item h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 650; } .pr-faq__item p { max-width: 70ch; font-size: .925rem; line-height: 1.65; color: var(--text-2); }