/* ============================================================ SBM Offshore Adventures — bespoke stylesheet Targets clean post-export HTML5 tags; no WP class residue WCAG AA contrast on all text / background combinations ============================================================ */ /* ── Custom properties ──────────────────────────────────────── */ :root { --text: #1f2937; /* 15.3:1 on white */ --text-light: #374151; --bg: #ffffff; --bg-alt: #f8f7f4; /* warm off-white for section fills */ --bg-dark: #0f172a; /* footer + dark CTA */ --border: #d1cdc7; --surface: #f2f0ec; --cta: #0f172a; /* 19.1:1 on white */ --cta-hover: #1e293b; --accent: #1a3a5c; /* deep navy */ --muted: #6b7280; --font-serif: Georgia, "Times New Roman", Times, serif; --font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --max-width: 820px; --gutter: 1.5rem; } /* ── Reset / base ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); font-size: 1.0625rem; /* 17px – comfortable reading size */ line-height: 1.75; color: var(--text); background: var(--bg); } img, video { max-width: 100%; height: auto; display: block; } figure { margin: 0; } /* ── Skip link (a11y) ────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--cta); color: #fff; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; border-radius: 0 0 4px 4px; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; } /* ── Links ───────────────────────────────────────────────────── */ a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--cta); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ── Typography ──────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: normal; line-height: 1.25; color: var(--accent); margin-bottom: 0.5em; } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); } h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin-top: 2rem; } h3 { font-size: 1.25rem; margin-top: 1.5rem; } h4 { font-size: 1.05rem; } p { margin-bottom: 1.25rem; max-width: 68ch; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.5rem; margin-bottom: 1.25rem; } li { margin-bottom: 0.35rem; } blockquote { border-left: 3px solid var(--accent); margin: 2rem 0; padding: 0.75rem 1.5rem; background: var(--bg-alt); border-radius: 0 4px 4px 0; font-style: italic; color: var(--text-light); } blockquote p { margin-bottom: 0; max-width: none; } hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } time { font-variant-numeric: tabular-nums; } /* ── Layout wrapper ──────────────────────────────────────────── */ .site-wrapper, .wp-site-blocks, /* legacy class left on wrapper */ main > .wp-block-group { width: 100%; } /* Constrain content columns */ main, .entry-content, .wp-block-post-content, article { max-width: var(--max-width); margin-left: auto; margin-right: auto; padding: var(--gutter); } /* ── Header ──────────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } header > div, header > .wp-block-group__inner-container, .site-header__inner { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 0.75rem var(--gutter); gap: 1rem; } /* Site title / logo */ header h1, header .site-title, header p.site-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: normal; color: var(--accent); margin: 0; white-space: nowrap; } header h1 a, header .site-title a { color: inherit; text-decoration: none; } /* ── Navigation ──────────────────────────────────────────────── */ nav, .wp-block-navigation { flex-shrink: 0; } nav ul, .wp-block-navigation ul { display: flex; list-style: none; flex-wrap: wrap; gap: 0.1rem; padding: 0; margin: 0; align-items: center; } nav ul li a, .wp-block-navigation ul li a, .wp-block-navigation__responsive-container a { display: block; padding: 0.4rem 0.7rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--text-light); text-decoration: none; border-radius: 4px; transition: background 0.15s, color 0.15s; } nav ul li a:hover, .wp-block-navigation ul li a:hover { background: var(--bg-alt); color: var(--accent); } nav ul li a[aria-current="page"], .wp-block-navigation ul li a[aria-current="page"] { background: var(--accent); color: #fff; } /* ── Hero / featured image ───────────────────────────────────── */ .wp-block-post-featured-image, .hero-image, .entry-thumbnail { margin-bottom: 2rem; } .wp-block-post-featured-image img, .hero-image img, .entry-thumbnail img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 6px; } /* Inline post images */ .entry-content img, article img { border-radius: 4px; margin: 1rem auto; } /* ── Post list (index / captain's log archive) ───────────────── */ .wp-block-post-template, .post-list { list-style: none; padding: 0; margin: 2rem 0; display: flex; flex-direction: column; gap: 2rem; } .wp-block-post, .post-list-item { display: flex; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .wp-block-post:last-child, .post-list-item:last-child { border-bottom: none; } .wp-block-post .wp-block-post-featured-image, .post-list-item .post-thumb { flex: 0 0 180px; margin: 0; } .wp-block-post .wp-block-post-featured-image img, .post-list-item .post-thumb img { width: 180px; height: 130px; object-fit: cover; border-radius: 4px; } .wp-block-post .wp-block-post-title, .post-list-item h2 { font-size: 1.2rem; margin-top: 0; } .wp-block-post .wp-block-post-title a, .post-list-item h2 a { text-decoration: none; } .wp-block-post .wp-block-post-title a:hover, .post-list-item h2 a:hover { text-decoration: underline; } /* ── CTA buttons ─────────────────────────────────────────────── */ .wp-block-button, .wp-block-buttons { margin: 1.5rem 0; } .wp-block-button a, a.wp-block-button__link, .wp-block-button__link, .wp-element-button, .wp-block-button > a { display: inline-block; padding: 0.65rem 1.4rem; background: var(--cta); color: #fff !important; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; border-radius: 3px; border: 2px solid transparent; transition: background 0.15s, box-shadow 0.15s; } .wp-block-button a:hover, a.wp-block-button__link:hover, .wp-element-button:hover { background: var(--cta-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .wp-block-button a:focus-visible, a.wp-block-button__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ── Buy Me a Coffee widget ──────────────────────────────────── */ .bmc-widget { display: inline-block; margin-top: 1rem; padding: 0.55rem 1.3rem; background: #FFDD00; color: #0f172a !important; font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; border-radius: 6px; text-decoration: none; transition: background 0.15s; } .bmc-widget:hover { background: #f0ce00; } /* ── Affiliate block ─────────────────────────────────────────── */ .affiliate-block { margin: 2.5rem 0 1.5rem; padding: 1.25rem 1.5rem; background: var(--surface); border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0; } .affiliate-block h3 { margin-top: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); } .affiliate-block ul { margin-bottom: 0; } .affiliate-block a { font-weight: 600; color: var(--accent); } /* ── Photo gallery ───────────────────────────────────────────── */ .log-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 2rem 0; list-style: none; padding: 0; } .log-gallery figure { margin: 0; } .log-gallery img { width: 100%; height: 210px; object-fit: cover; border-radius: 4px; } .log-gallery figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; padding: 0 0.1rem; } /* ── Before / After slider ───────────────────────────────────── */ .ba-slider { position: relative; overflow: hidden; border-radius: 5px; max-width: 680px; margin: 2.5rem auto; cursor: col-resize; user-select: none; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } .ba-slider img { display: block; width: 100%; } .ba-slider .ba-after { position: absolute; top: 0; left: 0; width: 50%; overflow: hidden; } .ba-slider .ba-after img { max-width: none; width: 200%; } .ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: rgba(255, 255, 255, 0.9); transform: translateX(-50%); } .ba-slider .ba-handle::before, .ba-slider .ba-handle::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: 0 1px 5px rgba(0,0,0,0.3); } .ba-slider .ba-handle::before { top: 50%; margin-top: -18px; } .ba-slider .ba-handle::after { display: none; } /* ── Crew / team cards ───────────────────────────────────────── */ .crew-card { display: flex; gap: 1.5rem; margin: 2rem 0; padding: 1.5rem; background: var(--bg-alt); border-radius: 6px; align-items: flex-start; } .crew-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .crew-card h3 { margin-top: 0; } /* ── Gear page table / list ──────────────────────────────────── */ .gear-list { list-style: none; padding: 0; } .gear-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; align-items: baseline; } .gear-list li:last-child { border-bottom: none; } .gear-list .gear-name { font-weight: 600; flex: 0 0 220px; } .gear-list .gear-note { color: var(--text-light); font-size: 0.9rem; } /* ── Footer ──────────────────────────────────────────────────── */ footer { background: var(--bg-dark); color: #94a3b8; margin-top: 4rem; padding: 3rem var(--gutter) 2rem; font-size: 0.875rem; line-height: 1.7; } footer > div, footer .wp-block-group__inner-container { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2.5rem; } footer h2, footer h3 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #e2e8f0; margin-top: 0; margin-bottom: 0.75rem; } footer p, footer li { color: #94a3b8; } footer a { color: #93c5fd; text-decoration: none; } footer a:hover { color: #bfdbfe; text-decoration: underline; } footer ul { list-style: none; padding: 0; margin: 0; } footer ul li { margin-bottom: 0.4rem; } .footer-no-social { font-size: 0.8rem; color: #64748b; margin-top: 0.5rem; font-style: italic; } .footer-legal { width: 100%; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #1e293b; font-size: 0.72rem; color: #4b5563; line-height: 1.6; } /* ── Utility ─────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-muted { color: var(--muted); } .text-small { font-size: 0.875rem; } /* ── Responsive — tablet ─────────────────────────────────────── */ @media (max-width: 768px) { :root { --gutter: 1rem; } header > div, header > .wp-block-group__inner-container { flex-wrap: wrap; gap: 0.5rem; padding: 0.65rem var(--gutter); } nav ul, .wp-block-navigation ul { gap: 0; flex-wrap: wrap; } nav ul li a, .wp-block-navigation ul li a { font-size: 0.85rem; padding: 0.35rem 0.55rem; } .wp-block-post, .post-list-item { flex-direction: column; gap: 1rem; } .wp-block-post .wp-block-post-featured-image, .post-list-item .post-thumb { flex: none; } .wp-block-post .wp-block-post-featured-image img, .post-list-item .post-thumb img { width: 100%; height: 220px; } .crew-card { flex-direction: column; } footer > div, footer .wp-block-group__inner-container { flex-direction: column; gap: 1.5rem; } } /* ── Responsive — mobile ─────────────────────────────────────── */ @media (max-width: 480px) { h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } .log-gallery { grid-template-columns: 1fr; } .ba-slider { border-radius: 2px; } .affiliate-block { padding: 1rem; } .gear-list li { flex-direction: column; gap: 0.2rem; } .gear-list .gear-name { flex: none; } }