/* ============================================================================ WebAppsToolBox — design system Dark Solarized (Ethan Schoonover's canonical palette) + an Apple-style bar. No frameworks, no CDN, no external fonts. Self-contained by choice: it is faster, it survives the NAS being the only host, and it leaks nothing. ========================================================================= */ /* --- Tokens -------------------------------------------------------------- */ :root { /* Solarized greys. Do not invent values between these — the palette is the palette, and its whole point is the fixed relative luminance steps. */ --base03: #002b36; /* page background */ --base02: #073642; /* cards, raised surfaces, the nav */ --base01: #586e75; /* ⛔ NON-TEXT. rules, dividers, disabled states */ --base00: #657b83; /* ⛔ NON-TEXT. fails AA on both grounds — see below */ --base0: #839496; /* body text, on --base03 only */ --base1: #93a1a1; /* body text on --base02; emphasis on --base03 */ --base2: #eee8d5; /* headings */ --base3: #fdf6e3; /* highest-contrast text, used sparingly */ /* Solarized accents. One is assigned per product; the rest carry state. */ --yellow: #b58900; --orange: #cb4b16; --red: #dc322f; --magenta: #d33682; --violet: #6c71c4; --blue: #268bd2; --cyan: #2aa198; --green: #859900; /* Semantic aliases — reach for these in components, not the raw names. 🔴 There are TWO body-text tokens because there are two grounds, and the one that passes on --base03 does not pass on --base02. See the contrast table below. */ --bg: var(--base03); --bg-raised: var(--base02); --text: var(--base0); /* on --bg 4.75:1 ✅ AA */ --text-raised: var(--base1); /* on --bg-raised 4.86:1 ✅ AA */ --text-strong: var(--base2); --text-muted: var(--base0); --rule: var(--base01); /* decorative only — never text */ --accent: var(--blue); /* Per-product accents, one each. Set --accent and --tint on to re-tint a page. Five products, five distinct hues. */ --accent-air: var(--cyan); /* AirLog */ --accent-scrubber: var(--green); /* ScrubLog */ --accent-formulas: var(--blue); /* DiveCalc */ --accent-poseidon: var(--orange); /* Se7enCodes */ --accent-service: var(--violet); /* ServiceCal */ --accent-sites: var(--yellow); /* DiveSites */ /* 🔴 THE PALETTE IS NOW FULL. Eight Solarized accents: six are products, magenta is reserved for the About page, and red is the only one left — which is semantically wrong for a product, because red means error everywhere else in this stylesheet. A SEVENTH PRODUCT HAS NO ACCENT. Do not invent a colour between the Solarized steps to make room; the fixed relative luminances are the entire point of the palette. The honest options are: retire a product, let two share a hue and distinguish them another way, or accept red. Decide it deliberately rather than reaching for a hex value. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nav-h: 48px; --wrap: 980px; /* Apple's content measure, and it reads well */ --wrap-wide: 1180px; --radius: 12px; --radius-sm: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed: 220ms; } /* ============================================================================ ⚠️ CONTRAST — measured, not estimated. WCAG AA needs 4.5:1 for normal text. on --base03 on --base02 --base01 2.79 ⛔ 2.42 ⛔ --base00 3.37 ⛔ 2.92 ⛔ --base0 4.75 ✅ 4.11 ⛔ --base1 5.61 ✅ 4.86 ✅ --base2 12.25 ✅ 10.61 ✅ --base3 13.92 ✅ 12.05 ✅ 🔴 TWO RULES FOLLOW, AND THEY ARE NOT NEGOTIABLE: 1. --base00 and --base01 NEVER carry text. Not muted text, not captions, not footer small print. They are rules, dividers and disabled states. (An earlier version of this file used --base00 for card body copy on a raised surface — 2.92:1 — on the strength of an eyeballed guess.) 2. On a --base02 surface, body text is --base1, not --base0. The token that passes on the page background fails on a card, and the difference is invisible until it is measured. ⚠️ AND THE ACCENTS: not one Solarized accent reaches 4.5:1 as text on either dark ground — blue is the best at 4.08, orange and violet are near 3.3. Nor does any single text colour pass on every accent as a fill. 🔴 So accents carry COLOUR, never LEGIBILITY. They are borders, dots, rules, top edges and tints. Text that has to be read is a base token. This is a property of Solarized, not something to tune around, and "just make the button blue with dark text" is the mistake it prevents. ========================================================================= */ /* --- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; /* Painted explicitly. Never inherit a ground from the host. */ background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* belt and braces; nothing should overflow anyway */ } h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 600; } h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); letter-spacing: -0.03em; } h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* Links in body copy: readable base colour, accent in the underline. The accent alone is 4.08:1 at best and would fail as link text. */ a { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } img, svg { max-width: 100%; height: auto; display: block; } code, kbd { font-family: var(--font-mono); font-size: 0.88em; background: var(--base02); padding: 0.15em 0.4em; border-radius: 4px; color: var(--base1); } hr { border: 0; border-top: 1px solid var(--rule); opacity: 0.4; margin: 3rem 0; } /* Focus. Visible everywhere, always — this is not decoration. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--base02); color: var(--base3); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* --- Layout -------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .wrap--wide { max-width: var(--wrap-wide); } .section { padding-block: clamp(3rem, 8vw, 6rem); } .section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .section--raised { background: var(--bg-raised); color: var(--text-raised); } .lede { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--base1); max-width: 62ch; } .center { text-align: center; } .center .lede { margin-inline: auto; } /* ============================================================================ NAV — the Apple pattern: thin, sticky, translucent, centred, with a full-width panel that drops beneath it. ========================================================================= */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: rgba(7, 54, 66, 0.72); border-bottom: 1px solid rgba(88, 110, 117, 0.35); } /* The blur is the whole effect, but it must not be the only thing keeping the text readable — the rgba above is opaque enough to stand alone where backdrop-filter is unsupported. */ @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) { .nav { background: rgba(7, 54, 66, 0.62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } } .nav__bar { height: var(--nav-h); max-width: var(--wrap-wide); margin-inline: auto; padding-inline: 22px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav__brand { text-decoration: none; display: flex; align-items: center; gap: 0.5rem; color: var(--base2); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .nav__brand:hover { text-decoration: none; color: var(--base3); } .nav__brand svg { width: 20px; height: 20px; flex: none; } /* Centred items, small type, low contrast at rest — Apple's restraint is the point. They come up to --base2 on hover. */ .nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); list-style: none; margin: 0; padding: 0; } .nav__link { text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; letter-spacing: 0.01em; color: var(--base1); cursor: pointer; transition: color var(--speed) var(--ease); white-space: nowrap; } .nav__link:hover { color: var(--base2); text-decoration: none; } .nav__link[aria-current="page"] { color: var(--base3); } .nav__chev { width: 8px; height: 8px; flex: none; transition: transform var(--speed) var(--ease); } .nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); } /* --- The dropdown panel --------------------------------------------------- */ .nav__panel { position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--base02); border-bottom: 1px solid rgba(88, 110, 117, 0.35); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility 0s linear var(--speed); } .nav__panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); } .nav__panel-inner { max-width: var(--wrap-wide); margin-inline: auto; padding: 2.2rem 22px 2.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1.6rem 2rem; } .nav__panel-head { grid-column: 1 / -1; font-size: 12px; color: var(--text-raised); margin: 0; } .nav__product { text-decoration: none; display: block; color: var(--base2); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; border-left: 2px solid transparent; padding-left: 0.85rem; transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease); } .nav__product:hover { text-decoration: none; color: var(--base3); } .nav__product:hover, .nav__product:focus-visible { border-left-color: var(--tint, var(--accent)); } .nav__product span { display: block; font-size: 13px; font-weight: 400; color: var(--text-raised); margin-top: 0.2rem; line-height: 1.45; } /* Scrim. Sits under the panel, over the page. */ .nav__scrim { position: fixed; inset: var(--nav-h) 0 0; z-index: 99; background: rgba(0, 43, 54, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--speed) var(--ease), visibility 0s linear var(--speed); } .nav__scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--speed) var(--ease); } /* --- Hamburger ------------------------------------------------------------ */ .nav__toggle { display: none; background: none; border: 0; padding: 6px; margin-right: -6px; cursor: pointer; color: var(--base0); } .nav__toggle:hover { color: var(--base2); } .nav__toggle svg { width: 18px; height: 18px; } .nav__toggle .nav__icon-close { display: none; } .nav__toggle[aria-expanded="true"] .nav__icon-close { display: block; } .nav__toggle[aria-expanded="true"] .nav__icon-open { display: none; } /* --- Under 768px: the bar collapses -------------------------------------- */ @media (max-width: 767px) { .nav__links { display: none; } .nav__toggle { display: block; } .nav__mobile { position: fixed; inset: var(--nav-h) 0 0; z-index: 98; background: var(--base03); overflow-y: auto; padding: 1.5rem 22px 4rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility 0s linear var(--speed); } .nav__mobile.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); } /* The page must not scroll behind an open full-screen panel. */ body.nav-locked { overflow: hidden; } } @media (min-width: 768px) { .nav__mobile { display: none; } } .nav__m-list { list-style: none; margin: 0; padding: 0; } .nav__m-list > li { border-bottom: 1px solid rgba(88, 110, 117, 0.28); } .nav__m-link { text-decoration: none; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 1rem 0; font: inherit; font-size: 1.15rem; color: var(--base1); text-align: left; cursor: pointer; } .nav__m-link:hover { text-decoration: none; color: var(--base2); } .nav__m-link[aria-current="page"] { color: var(--base3); } .nav__m-link .nav__chev { width: 10px; height: 10px; } /* Accordion. grid-template-rows 0fr → 1fr animates to content height without guessing a max-height. */ .nav__m-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--speed) var(--ease); } .nav__m-sub.is-open { grid-template-rows: 1fr; } .nav__m-sub > div { overflow: hidden; } .nav__m-sub ul { list-style: none; margin: 0; padding: 0 0 0.75rem 0.9rem; } .nav__m-sub a { text-decoration: none; display: block; padding: 0.55rem 0; color: var(--base0); font-size: 1rem; } .nav__m-sub a:hover { color: var(--base2); text-decoration: none; } /* ============================================================================ Components ========================================================================= */ /* --- Buttons -------------------------------------------------------------- */ .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.5rem; border: 1px solid var(--base2); border-radius: 980px; /* Apple's pill */ background: var(--base2); color: var(--base03); /* 12.25:1 ✅ on every page */ font-size: 15px; font-weight: 500; cursor: pointer; transition: opacity var(--speed) var(--ease); } .btn:hover { text-decoration: none; opacity: 0.85; } .btn--ghost { background: transparent; border-color: var(--accent); /* accent as the boundary, not the label */ color: var(--text-strong); } .btn--ghost:hover { background: rgba(238, 232, 213, 0.08); opacity: 1; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; } .center .btn-row { justify-content: center; } /* --- Short name chip ------------------------------------------------------ */ /* The name the app carries on a phone home screen, where roughly 12 characters is all a launcher will show. Worth stating on the page: the two names differ, and a reader should not have to guess they are the same product. */ .shortname { display: inline-block; font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.5em; border: 1px solid var(--tint, var(--accent)); border-radius: var(--radius-sm); color: var(--text-strong); } /* --- Badge ---------------------------------------------------------------- */ /* 🔴 The honest-state badge. Nothing here is built yet and the site must not imply otherwise — no fake screenshots, no store badges, no pricing. */ .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border: 1px solid var(--tint, var(--accent)); border-radius: 980px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-strong); } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tint, var(--accent)); } /* --- Cards ---------------------------------------------------------------- */ .grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.7rem; background: var(--bg-raised); border: 1px solid rgba(88, 110, 117, 0.28); border-top: 3px solid var(--tint, var(--accent)); border-radius: var(--radius); } .card h3 { margin: 0; } .card p { color: var(--text-raised); font-size: 15px; margin: 0; } .card .card__more { margin-top: auto; padding-top: 0.6rem; font-size: 14px; } a.card { color: inherit; text-decoration: none; } a.card:hover { text-decoration: none; border-color: var(--tint, var(--accent)); } /* --- Hero ----------------------------------------------------------------- */ .hero { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; } .hero .lede { margin-inline: auto; } .hero__eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin-bottom: 1rem; } /* --- Page header (for the skeleton pages) --------------------------------- */ .page-head { padding-block: clamp(2.8rem, 7vw, 4.5rem) clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(88, 110, 117, 0.28); } .page-head .badge { margin-bottom: 1.1rem; } /* --- Definition-style rows ------------------------------------------------ */ .rows { display: grid; gap: 0; margin: 1.5rem 0 0; } .rows > div { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(88, 110, 117, 0.22); font-size: 15px; } .rows dt { color: var(--text); } .rows dd { margin: 0; color: var(--base1); } @media (max-width: 560px) { .rows > div { grid-template-columns: 1fr; gap: 0.15rem; } } /* --- Notice --------------------------------------------------------------- */ .notice { padding: 1.2rem 1.4rem; background: var(--bg-raised); border-left: 3px solid var(--tint, var(--accent)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; color: var(--base1); } .notice strong { color: var(--base2); } /* --- Lists ---------------------------------------------------------------- */ .ticks { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; } .ticks li { position: relative; padding-left: 1.5rem; font-size: 15px; color: var(--base1); } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--tint, var(--accent)); } /* --- Footer --------------------------------------------------------------- */ .footer { border-top: 1px solid rgba(88, 110, 117, 0.28); padding-block: 2.5rem 3rem; font-size: 13px; color: var(--text); } .footer__cols { display: grid; gap: 1.8rem 2rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 2.2rem; } .footer h4 { font-size: 12px; color: var(--base1); margin-bottom: 0.7rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .footer a { color: var(--text); text-decoration: none; } .footer a:hover { color: var(--text-strong); text-decoration: underline; } .footer__base { padding-top: 1.5rem; border-top: 1px solid rgba(88, 110, 117, 0.22); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; } /* --- Motion --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }