/* Theme Name: PitchFest Theme URI: https://pitchfest.app Author: The Story Shop Description: Lightweight, accessible, fast theme for pitchfest.app — the companion to the Pitch Engine plugin. Classic PHP theme, no build step, system fonts, minimal payload. Version: 1.21.0 Requires at least: 6.4 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: loglineit */ /* Design tokens --------------------------------------------------------- */ /* PitchFest is a dark "screening room" by default — navy grounds with a steel- blue accent, a magenta and a teal. This is the world the site opens in for everyone; light is an explicit opt-in via the header toggle (see [data-theme="light"] below). The plugin's components read these same --brand-* tokens, so they retexture along with the theme. */ :root { --brand-bg: #0f1720; --brand-surface: #131d28; --brand-card: #16202b; --brand-text: #e8edf2; --brand-muted: #9aa7b4; --brand-border: #2a3746; --brand-blue: #6aa8c8; --brand-accent: #68a6c6; --brand-accent-hover: #7ab4d2; --brand-accent-contrast: #08131c; --brand-accent-2: #e5588f; --brand-accent-2-hover: #ef7aa8; --brand-maxw: 46rem; --brand-maxw-wide: 64rem; --brand-radius: 10px; --brand-space: clamp(1rem, 2.5vw, 1.5rem); /* Right rail / sidebar column width — shared so the header auth controls can line up with the widget below them. */ --sidebar-w: 300px; color-scheme: dark; } /* Light mode — explicit opt-in only (header toggle → light, or 'auto' resolving to light by time of day). The header sets [data-theme="light"] on . Blue-on-white, shared with the Logline It design foundations. */ :root[data-theme="light"] { --brand-bg: #f5f7fb; --brand-surface: #eef2f8; --brand-card: #ffffff; --brand-text: #16202b; --brand-muted: #5c6b8c; --brand-border: #dbe2ee; --brand-blue: #4880a0; --brand-accent: #3e7391; /* AA on white (~5:1) */ --brand-accent-hover: #2f5a73; --brand-accent-contrast: #ffffff; --brand-accent-2: #b00858; --brand-accent-2-hover: #8c0446; color-scheme: light; } /* Explicit dark (header toggle → dark) — identical to the default :root, kept so the toggle's data-theme="dark" is unambiguous. */ :root[data-theme="dark"] { --brand-bg: #0f1720; --brand-surface: #131d28; --brand-card: #16202b; --brand-text: #e8edf2; --brand-muted: #9aa7b4; --brand-border: #2a3746; --brand-blue: #6aa8c8; --brand-accent: #68a6c6; --brand-accent-hover: #7ab4d2; --brand-accent-contrast: #08131c; --brand-accent-2: #e5588f; --brand-accent-2-hover: #ef7aa8; color-scheme: dark; } /* Reset-ish ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--brand-bg); color: var(--brand-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; /* Lets the home banner break out to full width without a horizontal scrollbar; `clip` (unlike `hidden`) doesn't break the sticky header. */ overflow-x: clip; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: var(--brand-text); } a { color: var(--brand-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-accent-hover); } img { max-width: 100%; height: auto; } /* Visible, high-contrast focus for keyboard users. */ :focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; } /* Accessibility helpers ------------------------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; padding: 0.6rem 1rem; background: var(--brand-accent); color: var(--brand-accent-contrast); border-radius: 0 0 var(--brand-radius) 0; } .skip-link:focus { left: 0; color: var(--brand-accent-contrast); } /* Layout ---------------------------------------------------------------- */ .site-container { width: 100%; max-width: var(--brand-maxw-wide); margin: 0 auto; padding: 0 var(--brand-space); } /* Header ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--brand-border); background: var(--brand-bg); } /* Header is a 2x2 grid: logo spans both rows on the left; row 1 carries the site title (left) and the auth controls (right, flush); row 2 carries the tagline (left) and the primary menu (right, flush), aligned to the tagline. */ .site-header-inner { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 1rem; row-gap: 0.1rem; /* Horizontal padding matches .site-container so the header content lines up with the content + sidebar columns below. */ padding: 0.85rem var(--brand-space); } .site-logo { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; } .site-logo-link { display: block; flex: 0 0 auto; line-height: 0; } .site-logo-mark { display: block; width: 40px; height: 40px; flex: 0 0 auto; } /* Row 1: title left, auth right. */ .site-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; } .site-title a { color: var(--brand-text); text-decoration: none; } /* Row 2: tagline left, primary menu right. */ .site-description { grid-column: 2; grid-row: 2; align-self: start; margin: 0; color: var(--brand-muted); font-size: 0.9rem; } /* Primary nav ----------------------------------------------------------- */ /* Primary menu: row 2, right cell, flush to the right edge on the tagline line. */ .primary-nav { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; } .primary-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.25rem; margin: 0; padding: 0; list-style: none; } .primary-nav a { color: var(--brand-text); text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 0.1rem 0; border-bottom: 2px solid transparent; } .primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--brand-accent); border-bottom-color: var(--brand-accent); } /* Content --------------------------------------------------------------- */ .site-main { padding: var(--brand-space) 0 3rem; } .content-narrow { max-width: var(--brand-maxw); margin: 0 auto; } .page-title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 1rem; } .entry-content > * + * { margin-top: 1rem; } /* Search form ----------------------------------------------------------- */ .search-form { display: flex; gap: 0.5rem; max-width: 30rem; } .search-form input[type="search"] { flex: 1 1 auto; padding: 0.5rem 0.7rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); font: inherit; } .search-form button { padding: 0.5rem 1rem; border: 0; border-radius: var(--brand-radius); background: var(--brand-accent); color: var(--brand-accent-contrast); font: inherit; font-weight: 600; cursor: pointer; } /* Footer ---------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--brand-border); padding: 2rem 0; color: var(--brand-muted); font-size: 0.9rem; text-align: center; } .site-footer a { color: var(--brand-muted); } /* Home hub -------------------------------------------------------------- */ .home-hero { padding: 1.5rem 0 0.5rem; } .home-hero h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0 0 0.5rem; } .home-hero p { margin: 0; color: var(--brand-muted); font-size: 1.1rem; } .home-section-title { margin: 2rem 0 0.5rem; font-size: 1.2rem; } /* Logline list on theme pages (home hub, etc.). The plugin styles these on its own views; this covers pages where the plugin bundle is not loaded. */ .logline-list { margin: 0; padding: 0; list-style: none; } .logline-list-item { padding: 0.85rem 0; border-bottom: 1px solid var(--brand-border); } .logline-list-title { margin: 0 0 0.2rem; font-size: 1.1rem; line-height: 1.35; } /* Logline titles are clickable but read as titles, not hyperlinks: no underline, inherit the text colour, and shift to the accent on hover/focus so the affordance stays clear without an underline. */ .logline-list-title a, .logline-title a { color: inherit; text-decoration: none; } .logline-list-title a:hover, .logline-list-title a:focus-visible { color: var(--brand-accent); } .logline-list-meta { margin: 0; color: var(--brand-muted); font-size: 0.85rem; } /* Pagination (WordPress default markup). */ .pagination .page-numbers, .nav-links .page-numbers { display: inline-block; padding: 0.3rem 0.6rem; margin: 0 0.25rem 0.25rem 0; border: 1px solid var(--brand-border); border-radius: 6px; text-decoration: none; } .pagination .current, .nav-links .current { background: var(--brand-accent); color: var(--brand-accent-contrast); border-color: var(--brand-accent); } /* Home page ------------------------------------------------------------- */ /* Full-width banner: breaks out of the centred container to the viewport edges (body has overflow-x: clip to keep the page from scrolling sideways). */ .home-banner { position: relative; width: 100%; height: clamp(150px, 22vw, 250px); overflow: hidden; background: #0a1420; } .home-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .home-banner-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(0deg, rgba(6, 12, 20, 0.85), rgba(6, 12, 20, 0.05) 58%); } .home-banner-inner { position: relative; max-width: var(--brand-maxw-wide); width: 100%; height: 100%; margin: 0 auto; padding: 0 var(--brand-space) 1.75rem; color: #fff; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } /* "Post your logline" call to action — a prominent magenta button on the right, sitting roughly midway between the banner top and the stats widget that floats up into the lower-right below it. Fixed colours (not theme tokens) because it always sits on the dark banner image, in both light and dark modes. */ .home-banner-cta { position: absolute; top: clamp(2rem, 7vw, 4.25rem); right: var(--brand-space); } .banner-cta { display: inline-block; font: inherit; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.005em; padding: 0.85rem 1.6rem; border-radius: var(--brand-radius); border: 0; background: #b00858; color: #ffffff; text-decoration: none; cursor: pointer; box-shadow: 0 6px 20px rgba(6, 12, 20, 0.45); } .banner-cta:hover, .banner-cta:focus-visible { background: #cc176f; transform: translateY(-1px); } .home-banner-title { color: #fff; font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.4rem; } .home-banner-sub { color: #d3dde6; margin: 0; /* One line, always: the font shrinks responsively to fit the width. */ white-space: nowrap; font-size: clamp(0.8rem, 2.6vw, 1.1rem); } .secondary-nav { border-bottom: 1px solid var(--brand-border); } .secondary-nav ul { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0.65rem 0; list-style: none; } .secondary-nav a { color: var(--brand-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .secondary-nav a:hover, .secondary-nav .current-menu-item > a { color: var(--brand-accent); } /* Menu on the left, compact "Post your logline" button flush right. */ .secondary-nav-inner { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; } .secondary-nav .secondary-post-cta { margin-left: auto; flex: 0 0 auto; font: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.32rem 0.9rem; border: 0; border-radius: 999px; /* Same fixed magenta as the home-page banner CTA (.banner-cta) in both themes — not the theme token, which lightens to pink on dark. */ background: #b00858; color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; } .secondary-nav .secondary-post-cta:hover, .secondary-nav .secondary-post-cta:focus-visible { background: #cc176f; color: #fff; } /* Site-wide content + sidebar grid (the sidebar and its widgets show on every page, so navigation never disappears when you leave the home page). */ .site-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: 2rem; align-items: start; padding: var(--brand-space) 0 3rem; } .site-content { min-width: 0; } /* Single pitch = the full-bleed Screening Room (plugin single-logline template). Drop the readable container cap and the right sidebar, and remove the layout padding, so the dark theater owns the full viewport width instead of being squeezed into the content column beside the sidebar. */ body.single-pitch .site-container { max-width: none; padding: 0; } body.single-pitch .site-layout { display: block; padding: 0; } body.single-pitch .site-sidebar { display: none; } /* The theater carries its own slim view bar + "Post your pitch", so the global secondary nav/CTA would only duplicate it here. */ body.single-pitch .secondary-nav { display: none; } .home-feed { min-width: 0; } .home-section-title { margin: 0 0 0.75rem; font-size: 1.15rem; } .home-browse { margin-top: 1rem; } /* "Join — it's free" sidebar widget (logged-out only), under the stats widget. */ .widget-join-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; } .widget-join-list li { position: relative; padding-left: 1.5rem; } .widget-join-list li::before { content: "\2713"; /* check mark */ position: absolute; left: 0; top: -0.02em; color: var(--brand-accent); font-weight: 700; } .widget-join-cta { display: block; width: 100%; text-align: center; font-size: 0.95rem; padding: 0.6rem 1rem; } .widget-join-login { margin: 0.7rem 0 0; text-align: center; font-size: 0.88rem; color: var(--brand-muted); } .widget-join-loginbtn { font: inherit; font-weight: 600; background: transparent; border: 0; color: var(--brand-accent); cursor: pointer; padding: 0; } .widget-join-loginbtn:hover { color: var(--brand-accent-hover); } /* Courses promo band under the feed — the priority conversion call-out, so it carries the raspberry brand accent rather than the quieter card treatment. */ .home-courses { margin: 2.25rem 0 2rem; padding: 1.5rem 1.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; border-radius: 14px; background: linear-gradient(135deg, #b00858, #7c0446); color: #fff; box-shadow: 0 10px 30px rgba(123, 4, 70, 0.28); } .home-courses-text { min-width: 0; flex: 1 1 18rem; } .home-courses-kicker { margin: 0 0 0.2rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #f3b6d2; } .home-courses-title { margin: 0 0 0.25rem; font-size: 1.3rem; color: #fff; line-height: 1.2; } .home-courses-sub { margin: 0; color: #f6dbe8; font-size: 0.95rem; } .home-courses-cta { flex: 0 0 auto; display: inline-block; font-weight: 800; text-decoration: none; padding: 0.7rem 1.3rem; border-radius: var(--brand-radius); background: #fff; color: #8c0446; box-shadow: 0 4px 14px rgba(6, 12, 20, 0.25); } .home-courses-cta:hover, .home-courses-cta:focus-visible { background: #ffeaf4; color: #8c0446; transform: translateY(-1px); } /* "Today's tip" spotlight at the top of the home feed (motion-free). Framed like the "Write it for me" panel — a full 2px border in the tip accent, the same colour as the "TODAY'S TIP" glyph, so it reads as one bordered card. */ .logline-totd { --totd-accent: #15803d; /* green, AA on white for the glyph text */ margin: 0 0 1.5rem; padding: 0.9rem 1.15rem; border: 2px solid var(--totd-accent); border-radius: var(--brand-radius); background: var(--brand-card); } /* Brighter green on dark backgrounds where the deep green is muddy. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logline-totd { --totd-accent: #4ade80; } } :root[data-theme="dark"] .logline-totd { --totd-accent: #4ade80; } .logline-totd-kicker { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--totd-accent); } .logline-totd-glyph { flex: 0 0 auto; color: var(--totd-accent); } /* The kicker stays left-aligned; only the tip itself (title + hint) is centred. */ .logline-totd-label { margin: 0 0 0.25rem; font-size: 1.1rem; text-align: center; } .logline-totd-hint { margin: 0 0 0.5rem; color: var(--brand-muted); text-align: center; } .logline-totd-more { margin: 0; font-size: 0.9rem; font-weight: 600; text-align: right; } /* Home feed rows: score + content (the plugin styles the archive/profile; the home page carries its own copy). */ .logline-list-item { display: flex; gap: 0.85rem; align-items: baseline; } .logline-list-score { flex: 0 0 auto; min-width: 2.6rem; text-align: right; color: var(--brand-muted); font-weight: 600; } .logline-list-score.is-quiet { opacity: 0.4; font-weight: 400; } .logline-list-main { flex: 1 1 auto; min-width: 0; } .logline-meta-quiet { font-style: italic; } /* "Review now" CTA pill — bottom-right of feed cards, magenta (the site's call-to-action hue). Also styled in the plugin CSS for its own pages; here for the home feed. */ .logline-card-review { margin: 0.6rem 0 0; text-align: right; } .logline-review-now { display: inline-block; font-size: 0.82rem; font-weight: 700; text-decoration: none; padding: 0.3rem 0.85rem; border-radius: 999px; /* Fixed hex, NOT the accent token, so the magenta is identical in dark mode. */ background: #b00858; color: #fff; } .logline-review-now:hover, .logline-review-now:focus-visible { background: #8c0446; color: #fff; } /* Sidebar widgets */ .site-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .widget { border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-card); padding: 22px; } .widget-title { margin: 0 0 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-muted); } /* "By the numbers" stats card (design treatment 1a): a 4px accent bar tops the card in both modes — its colour is the only difference between light and dark (steel blue vs the lighter dark-mode blue). */ .widget-stats { position: relative; overflow: hidden; } .widget-stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-accent); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; } .stat { display: flex; flex-direction: column; gap: 4px; } a.stat { text-decoration: none; color: inherit; } a.stat:hover .stat-lab { text-decoration: underline; color: var(--brand-accent); } .stat-num { font-size: 1.7rem; font-weight: 800; color: var(--brand-accent); font-variant-numeric: tabular-nums; line-height: 1; } .stat-lab { font-size: 0.9rem; color: var(--brand-muted); margin-top: 0; } /* The Loglines tile is coloured magenta (word + number) — the site's CTA hue. */ .stat--loglines .stat-num, .stat--loglines .stat-lab { color: var(--brand-accent-2); } .widget-menu .menu { list-style: none; margin: 0; padding: 0; } .widget-menu .menu li { border-bottom: 1px solid var(--brand-border); } .widget-menu .menu li:last-child { border-bottom: 0; } .widget-menu .menu a { display: block; padding: 0.55rem 0; color: var(--brand-text); text-decoration: none; font-weight: 600; font-size: 0.92rem; } .widget-menu .menu a:hover { color: var(--brand-accent); } /* Front-page hero overlap: on desktop the stats widget lifts up so its top edge floats over the bottom of the hero banner. Gated to the two-column breakpoint — below it the layout is single-column and the widget sits in normal flow (no banner to overlap). The negative margin clears the layout top padding + the secondary-nav bar and dips ~25% of the card into the banner; the white fill + elevated shadow read as a floating card, and the z-index keeps it above the banner and nav it crosses. */ @media (min-width: 821px) { .widget-stats--hero { z-index: 2; margin-top: -230px; box-shadow: 0 12px 30px rgba(16, 32, 43, 0.16); } /* On the front page the lifted stats card floats up over the search widget, fully covering it. Hide that covered widget so its lower border can't peek out below the card as a stray second line — visibility (not display) so it keeps its space in the flow and the card's lift stays calibrated. */ body.home .widget-search { visibility: hidden; } } /* Post-your-logline page: flip the columns so the sidebar (with the "Before you post" flags) is on the left and the form is on the right. */ .logline-post-page .site-layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .logline-post-page .site-sidebar { grid-column: 1; grid-row: 1; } .logline-post-page .site-content { grid-column: 2; grid-row: 1; } /* "Before you post" critique flags (replaces the stats widget on that page). */ .widget-tips .logline-tips-intro { margin: 0 0 0.85rem; color: var(--brand-muted); font-size: 0.85rem; } .logline-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; } .logline-tips-flag { position: relative; padding-left: 1.4rem; } .logline-tips-flag::before { content: "\2691"; /* ⚑ */ position: absolute; left: 0; top: 0; color: var(--brand-accent-2); } .widget-tips .widget-title a { color: inherit; text-decoration: none; } .widget-tips .widget-title a:hover, .widget-tips .widget-title a:focus-visible { color: var(--brand-accent); text-decoration: underline; } .logline-tips-flag-label { display: block; font-weight: 700; font-size: 0.88rem; line-height: 1.3; color: var(--brand-text); text-decoration: none; } a.logline-tips-flag-label:hover, a.logline-tips-flag-label:focus-visible { color: var(--brand-accent); text-decoration: underline; } .logline-tips-flag-hint { display: block; margin-top: 0.1rem; color: var(--brand-muted); font-size: 0.8rem; line-height: 1.4; } @media (max-width: 820px) { .site-layout { grid-template-columns: 1fr; } /* Back to a single stacked column on narrow screens. */ .logline-post-page .site-content, .logline-post-page .site-sidebar { grid-column: auto; } } /* Device-based home (Phase 2): the swipe feed is the mobile home; the desktop keeps the standard banner + list view. The feed is hidden by default and revealed only at the mobile breakpoint, where the standard home chrome (banner, secondary nav, sidebar and the recent-loglines list) steps aside. */ .home-swipe { display: none; } @media (max-width: 768px) { body.has-swipe-home .home-swipe { display: block; padding-top: 1rem; } body.has-swipe-home .home-standard, body.has-swipe-home .home-banner, body.has-swipe-home .secondary-nav, body.has-swipe-home .site-sidebar { display: none; } } /* The Swipe menu link is mobile-only (swiping is the mobile experience); hidden on desktop, left at its natural display below the breakpoint. */ @media (min-width: 769px) { .nav-swipe-item { display: none; } } @media (max-width: 600px) { body { font-size: 1rem; } /* The tagline can sit on one long line and push the header wider than a phone viewport; drop it on small screens (the logo + title carry it). */ .site-description { display: none; } } /* Header auth control --------------------------------------------------- */ /* Row 1, right cell: mode switcher + Log in / Sign up, grouped flush-right on the site-title line. */ .site-auth { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; display: flex; align-items: center; gap: 0.75rem; } .site-auth-actions { display: flex; align-items: center; gap: 0.6rem; } /* Phone: two columns are too tight for text + controls, so each right-hand cluster wraps onto its own full-width row below the title, still flush-right. Placed after the base header rules so these overrides win the cascade. */ @media (max-width: 600px) { .site-header-inner { grid-template-columns: auto 1fr; column-gap: 0.75rem; row-gap: 0.5rem; } .site-logo { grid-row: 1; } .site-title { grid-column: 2; grid-row: 1; align-self: center; } .site-auth { grid-column: 1 / -1; grid-row: 2; align-self: center; } .primary-nav { grid-column: 1 / -1; grid-row: 3; } } /* Dark/light toggle. Shows a moon in light mode (switch to dark) and a sun in dark mode (switch to light); JS sets data-mode to the effective theme. */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); background: transparent; color: var(--brand-text); cursor: pointer; } .theme-toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent); } /* Custom tooltip — appears almost instantly (native title has a ~1s delay). */ .theme-toggle::after { content: attr(data-tip); position: absolute; top: 100%; right: 0; margin-top: 0.4rem; white-space: nowrap; background: var(--brand-text); color: var(--brand-bg); font-size: 0.72rem; font-weight: 600; line-height: 1.2; padding: 0.25rem 0.5rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.06s ease; z-index: 40; } .theme-toggle:hover::after, .theme-toggle:focus-visible::after { opacity: 1; } .theme-toggle svg { display: block; } /* Three-state icon (light = sun, dark = moon, auto = half-filled circle). The auto glyph is the default until JS assigns data-mode. */ .theme-toggle .tt-icon { display: none; } .theme-toggle .tt-auto { display: block; } .theme-toggle[data-mode="light"] .tt-auto, .theme-toggle[data-mode="dark"] .tt-auto { display: none; } .theme-toggle[data-mode="light"] .tt-light { display: block; } .theme-toggle[data-mode="dark"] .tt-dark { display: block; } .site-auth-btn { font: inherit; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: var(--brand-radius); border: 1px solid var(--brand-accent); background: var(--brand-accent); color: var(--brand-accent-contrast); cursor: pointer; } .site-auth-btn:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); } .site-auth-btn.is-ghost { background: transparent; color: var(--brand-accent); } .site-auth-btn.is-ghost:hover { background: var(--brand-surface); color: var(--brand-accent-hover); } .site-auth-account { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--brand-text); font-weight: 600; } .site-auth-name { font-size: 0.85rem; } .site-auth-account .avatar { border-radius: 50%; } .site-auth-link { color: var(--brand-muted); text-decoration: none; font-size: 0.9rem; } .site-auth-link:hover { color: var(--brand-accent); } /* Match the theme switcher: a bordered icon button. */ .site-auth-logout { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); color: var(--brand-text); line-height: 0; } .site-auth-logout:hover, .site-auth-logout:focus-visible { border-color: var(--brand-accent); color: var(--brand-accent); } /* Auth modal ------------------------------------------------------------ */ body.loglineit-auth-locked { overflow: hidden; } .loglineit-auth { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .loglineit-auth[hidden] { display: none; } .loglineit-auth-overlay { position: absolute; inset: 0; background: rgba(15, 23, 32, 0.55); } .loglineit-auth-dialog { position: relative; width: 100%; max-width: 26rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--brand-bg); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: 0 20px 60px rgba(15, 23, 32, 0.35); padding: 1.5rem; } .loglineit-auth-x { position: absolute; top: 0.4rem; right: 0.6rem; border: 0; background: transparent; color: var(--brand-muted); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .loglineit-auth-x:hover { color: var(--brand-text); } .loglineit-auth-title { margin: 0 0 1rem; font-size: 1.35rem; } .loglineit-auth-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--brand-border); } .loglineit-auth-tab { font: inherit; font-weight: 600; padding: 0.5rem 0.9rem; border: 0; background: transparent; color: var(--brand-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .loglineit-auth-tab.is-active { color: var(--brand-accent); border-bottom-color: var(--brand-accent); } .loglineit-auth-field { margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; } .loglineit-auth-field label { font-weight: 600; font-size: 0.9rem; } .loglineit-auth-field input[type="text"], .loglineit-auth-field input[type="email"], .loglineit-auth-field input[type="password"] { padding: 0.55rem 0.7rem; border: 1px solid var(--brand-border); border-radius: var(--brand-radius); font: inherit; width: 100%; } .loglineit-auth-field input.has-error { border-color: var(--brand-accent-2); outline: 1px solid var(--brand-accent-2); } /* Show / hide password toggle. */ .loglineit-auth-pass { position: relative; display: block; } .loglineit-auth-pass input[type="password"], .loglineit-auth-pass input[type="text"] { padding-right: 2.6rem; } .loglineit-auth-reveal { position: absolute; top: 0; right: 0; height: 100%; width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--brand-muted); cursor: pointer; border-radius: 0 var(--brand-radius) var(--brand-radius) 0; } .loglineit-auth-reveal:hover { color: var(--brand-text); } .loglineit-auth-reveal:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -2px; } .loglineit-auth-reveal .icon-eye-off { display: none; } .loglineit-auth-reveal[aria-pressed="true"] .icon-eye { display: none; } .loglineit-auth-reveal[aria-pressed="true"] .icon-eye-off { display: inline; } .loglineit-auth-remember { flex-direction: row; align-items: center; font-size: 0.9rem; color: var(--brand-muted); } .loglineit-auth-hint { font-size: 0.8rem; color: var(--brand-muted); } .loglineit-auth-submit { font: inherit; font-weight: 700; width: 100%; padding: 0.65rem 1rem; border: 0; border-radius: var(--brand-radius); background: var(--brand-accent); color: var(--brand-accent-contrast); cursor: pointer; margin-top: 0.25rem; } .loglineit-auth-submit:hover { background: var(--brand-accent-hover); } .loglineit-auth-submit.is-busy { opacity: 0.65; cursor: progress; } .loglineit-auth-msg { margin: 0 0 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--brand-radius); background: rgba(176, 8, 88, 0.08); color: var(--brand-accent-2); font-size: 0.9rem; } .loglineit-auth-alt { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--brand-muted); text-align: center; } .loglineit-auth-closed { margin: 0; color: var(--brand-muted); } /* Honeypot — hidden from people, visible to naive bots. */ .loglineit-auth-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* Turnstile widget spacing in the register form. */ .loglineit-turnstile { margin: 0 0 1rem; } /* Footer legal links + cookie consent banner --------------------------- */ .site-footer-legal { margin: 0.35rem 0 0; font-size: 0.85rem; } .site-footer-legal a { color: inherit; opacity: 0.85; } .site-footer-survey { margin: 0.5rem 0 0; font-size: 0.85rem; } .site-footer-survey a { color: var(--brand-accent); font-weight: 600; } /* Footer brand/external links (blog, courses, social) — prominent pill buttons, centred. */ .site-footer-nav { margin: 0 0 1.25rem; } .site-footer-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.75rem; margin: 0; padding: 0; list-style: none; } .site-footer-menu a { display: inline-block; color: var(--brand-text); text-decoration: none; font-weight: 600; padding: 0.5rem 1.15rem; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-card); } .site-footer-menu a:hover, .site-footer-menu a:focus-visible { color: var(--brand-accent-contrast); background: var(--brand-accent); border-color: var(--brand-accent); } /* Any menu link that leaves the site gets a discreet outbound ↗ marker (added site-wide via the menu-external class on external links). */ .menu-external::after { content: " \2197"; color: var(--brand-muted); font-weight: 400; } .cookie-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000; max-width: 46rem; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.15rem; border: 1px solid var(--brand-border, #d9dde1); border-radius: var(--brand-radius, 12px); background: var(--brand-card, #fff); color: var(--brand-text, #16202b); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } .cookie-consent-text { margin: 0; flex: 1 1 16rem; font-size: 0.9rem; line-height: 1.4; } .cookie-consent-text a { color: var(--brand-accent, #2563eb); } .cookie-consent-accept { flex: 0 0 auto; font: inherit; font-weight: 600; color: var(--brand-accent-contrast, #fff); background: var(--brand-accent, #2563eb); border: 0; border-radius: 8px; padding: 0.5rem 1.25rem; cursor: pointer; } /* One-off account flash notice ----------------------------------------- */ .site-flash { max-width: 46rem; margin: 1rem auto 0; padding: 0.85rem 1.15rem; border: 1px solid var(--brand-border, #d9dde1); border-left: 3px solid var(--brand-accent, #2563eb); border-radius: var(--brand-radius, 10px); background: var(--brand-card, #fff); color: var(--brand-text, #16202b); font-size: 0.95rem; } /* Search form + results ------------------------------------------------ */ .widget-search .search-form { display: flex; gap: 0.4rem; } .search-field { flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--brand-border, #d9dde1); border-radius: 8px; background: var(--brand-bg, #fff); color: inherit; font: inherit; } .search-form button { flex: 0 0 auto; font: inherit; font-weight: 600; color: var(--brand-accent-contrast, #fff); background: var(--brand-accent, #2563eb); border: 0; border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer; } .logline-search .logline-archive-header .search-form { display: flex; gap: 0.4rem; max-width: 26rem; margin-top: 0.75rem; } .logline-search-empty { color: var(--brand-muted, #5a6472); } /* The class sets display:flex, which otherwise defeats the [hidden] attribute — so "Got it" (and the initial hidden state) could never hide the banner. */ .cookie-consent[hidden] { display: none; }