/* Ink theme — the fishing pages (home, videos, conditions, gear). * * Opt-in via . The legacy app pages stay on the white * style.css look until they're retired, so nothing here touches them. * The idea is borrowed from gethooked.fish: a deep ground with the brand * blue used as light — a fixed wash behind the first screen that runs up * through the header, which is transparent until the page scrolls. */ body.ink { --ink: #0b1a28; --ink-2: #10243a; --ink-3: #071220; --hair: rgba(53, 118, 181, .28); --hair-soft: rgba(255, 255, 255, .08); --ink-text: #e8eef5; --ink-text-2: rgba(232, 238, 245, .72); --ink-text-3: rgba(232, 238, 245, .55); --ink-blue: #6fb1ea; background: var(--ink); color: var(--ink-text); position: relative; } body.ink::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 12% -10%, rgba(53, 118, 181, .34), transparent 60%), radial-gradient(90% 60% at 92% 0%, rgba(39, 86, 127, .26), transparent 55%), radial-gradient(60% 40% at 80% 100%, rgba(255, 107, 0, .08), transparent 60%); } body.ink .page-content, body.ink .site-footer { position: relative; z-index: 1; } /* ---- Header: see-through at the top, frosted once scrolled ---- */ body.ink .site-header { background: transparent; border-bottom: 0; transition: background .2s, border-color .2s; } body.ink .site-header.is-scrolled { background: rgba(11, 26, 40, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-soft); } body.ink .site-header .header-inner a, body.ink .site-header .header-inner span { color: #fff; } body.ink .nav-desktop a, body.ink .nav-desktop .dropdown-toggle { color: var(--ink-text-2); } body.ink .nav-desktop a:hover, body.ink .nav-desktop .dropdown-toggle:hover { color: #fff; } body.ink .nav-desktop .dropdown-menu { background: var(--ink-2); border-color: var(--hair-soft); } body.ink .nav-desktop .dropdown-menu a:hover { background: rgba(255, 255, 255, .06); } body.ink .nav-toggle svg { color: #fff; } body.ink .nav-mobile { background: var(--ink-2); border-color: var(--hair-soft); } body.ink .nav-mobile a { color: var(--ink-text); border-bottom-color: var(--hair-soft); } body.ink .nav-mobile-section-title { color: var(--ink-text-3); } body.ink .site-footer { background: var(--ink-3); border-top: 1px solid var(--hair-soft); } body.ink h1, body.ink h2, body.ink h3 { color: #fff; } /* Button-styled links carry their own text color; this rule would outrank it. */ body.ink a:where(:not([class*="btn"])) { color: var(--ink-blue); } /* Shared style.css tokens, restated for the dark ground. Pages built from the shared components (events) carry inline var(--gray) / var(--border) all over their markup, so moving the tokens themes them without touching the markup. */ body.ink { --dark: #e8eef5; --gray: #93a7bd; --gray-light: #7d92a9; --border: rgba(255, 255, 255, .08); --light: rgba(255, 255, 255, .06); --surface: #10243a; --text: #e8eef5; } body.ink .card { background: var(--ink-2); border-color: var(--hair-soft); } body.ink .card:hover { border-color: var(--ink-blue); box-shadow: none; } body.ink .section-header h2 { color: #fff; } body.ink .hero-icon { background: rgba(255, 255, 255, .10); } body.ink .evt-link { color: var(--ink-blue); text-decoration: underline; } /* The "Past" pill: the shared --gray reads as text, not as a badge ground. */ body.ink .evt-past { background: rgba(255, 255, 255, .10); color: var(--ink-text-2); border: 1px solid var(--hair-soft); } /* ---- Shared hero (affiliate page) ---- */ body.ink .hero--blue { background: linear-gradient(135deg, var(--ink-2) 0%, rgba(53, 118, 181, .55) 100%); border: 1px solid var(--hair-soft); } /* ---- Home ---- */ body.ink .hoy-home-root { color: var(--ink-text); } body.ink .hoy-home-hero { background: linear-gradient(120deg, rgba(11, 26, 40, .92) 0%, rgba(16, 36, 58, .80) 55%, rgba(53, 118, 181, .45) 100%), url('../images/IMG_3211.webp') center 30% / cover no-repeat; border: 1px solid var(--hair-soft); } body.ink .hoy-cond-banner { background: var(--ink-2); border: 1px solid var(--hair); } body.ink .hoy-yt-feature-label { color: var(--ink-blue); } body.ink .hoy-yt-kind { color: var(--ink-text-3); } body.ink .hoy-yt-latest a { box-shadow: none; border: 1px solid var(--hair-soft); } body.ink .hoy-yt-video-title { color: var(--ink-text); } body.ink .hoy-home-find-card { background: var(--ink-2); border-color: var(--hair-soft); } body.ink .hoy-home-find-card:hover { border-color: var(--hoy-orange); box-shadow: none; } body.ink .hoy-home-find-card p { color: var(--ink-text-2); } /* ---- Videos ---- */ body.ink .hoy-vid-root { color: var(--ink-text); } body.ink .hoy-vid-kicker { color: var(--ink-blue); } body.ink .hoy-vid-head p, body.ink .hoy-vid-meta, body.ink .hoy-vid-status { color: var(--ink-text-2); } body.ink .hoy-vid-tabs button { background: transparent; border-color: var(--hair-soft); color: var(--ink-text-2); } body.ink .hoy-vid-tabs button:hover { border-color: var(--ink-blue); color: var(--ink-blue); } body.ink .hoy-vid-tabs button.is-active { background: var(--hoy-blue); border-color: var(--hoy-blue); color: #fff; } body.ink .hoy-vid-thumb { box-shadow: none; border: 1px solid var(--hair-soft); } body.ink .hoy-vid-card h2 { color: var(--ink-text); font-size: 1rem; } /* ---- Conditions: the page is token-driven, so swap the tokens ---- */ body.ink .hoy-cond-root { --c-ink: var(--ink-text); --c-muted: var(--ink-text-2); --c-surface: var(--ink-2); --c-border: var(--hair-soft); --c-soft: rgba(255, 255, 255, .06); --c-blue: var(--ink-blue); } body.ink .hoy-cond-hero { background: var(--ink-2); border: 1px solid var(--hair); } body.ink .hoy-cond-msg button { background: var(--hoy-blue); } /* ---- Gear / affiliate ---- */ body.ink .hoy-aff-root { color: var(--ink-text); } body.ink .hoy-aff-nav { background: rgba(11, 26, 40, .88); border-bottom-color: var(--hair-soft); } body.ink .hoy-aff-nav::before { background: linear-gradient(to right, var(--ink), rgba(11, 26, 40, 0)); } body.ink .hoy-aff-nav::after { background: linear-gradient(to left, var(--ink), rgba(11, 26, 40, 0)); } body.ink .hoy-aff-nav a { color: var(--ink-text-2); border-color: var(--hair-soft); } body.ink .hoy-aff-nav a:hover { color: var(--ink-blue); border-color: var(--ink-blue); } body.ink .hoy-aff-nav a.is-active { color: #fff; background: var(--hoy-blue); border-color: var(--hoy-blue); } body.ink .hoy-aff-nav-sep { background: var(--hair-soft); } body.ink .hoy-aff-category-icon { background: rgba(53, 118, 181, .18); } body.ink .hoy-aff-category h2, body.ink .hoy-aff-sub h3, body.ink .hoy-aff-card-title, body.ink .hoy-aff-sub-recipe b { color: #fff; } body.ink .hoy-aff-category-desc, body.ink .hoy-aff-sub-recipe, body.ink .hoy-aff-card-note { color: var(--ink-text-2); } body.ink .hoy-aff-sub { border-left-color: var(--ink-blue); } body.ink .hoy-aff-card { background: var(--ink-2); border-color: var(--hair-soft); } body.ink .hoy-aff-card:hover { box-shadow: none; } body.ink .hoy-aff-card-note a { color: var(--ink-blue); } body.ink .hoy-aff-pick { background: var(--ink-2); border-color: var(--ink-blue); } body.ink .hoy-aff-pick-eyebrow { color: var(--ink-blue); } body.ink .hoy-aff-pick-body h2 { color: #fff; } body.ink .hoy-aff-pick-body p { color: var(--ink-text-2); }