/* ========================================================================== Nilbyte Studio — app support / privacy pages -------------------------------------------------------------------------- One skeleton, one accent knob. Loaded after base.css, which supplies the colour system, spacing and shape scales, the reset and the layout primitives. Only what these pages need beyond that lives here. Structure, type and components come from the studio design language so every Nilbyte page feels like the same hand. Only the accent colour changes per app, set by `data-app` on . That split is the brand rule applied literally: the brand sheet says the signal colour "only ever appears as a thin accent. Everything else is Ink on white or white on Ink." Each app gets its own signal; the surfaces stay neutral studio ink and mist. A visitor arriving from inside the green golf app sees green and knows they're in the right place, and still recognises the page as ours. To add an app: copy one `[data-app='…']` block, drop in its Primary and PrimaryContainer from the app's Colors.xaml, and check the contrast note. Sections 1. Accent themes (per app) 2. Tokens specific to these pages 3. Typography 4. Layout 5. Components 6. Print ========================================================================== */ /* ========================================================================== 1. Accent themes -------------------------------------------------------------------------- `--accent` must reach 4.5:1 on --surface for body-size link text, so these are the darkened variants of each app's Primary rather than Primary itself. `--accent-strong` is the large-text/graphic version. ========================================================================== */ /* ForeWind — Material 3 palette from ForeWind/Resources/Styles/Colors.xaml. Primary #3D9046 is only ~3.4:1 on white, so links use #2F7238. */ :root[data-app='forewind'] { --accent: #3D9046; /* brand hue, for graphic accents */ --accent-strong: #2F7238; /* darkened — AA for link text on white */ --accent-container: #C2EDC4; --on-accent-container: #00210A; --accent-soft: rgba(61, 144, 70, 0.10); } @media (prefers-color-scheme: dark) { :root[data-app='forewind'] { --accent: #A7D9A9; --accent-strong: #A7D9A9; /* already light-on-dark; one value serves both */ --accent-container: #1F3F23; --on-accent-container: #A7D9A9; --accent-soft: rgba(167, 217, 169, 0.12); /* Same two-sided constraint as RefundHound's dark block: the bits must read against the #1F3F23 header AND against the pale #A7D9A9 stems that bits 1 and 8 overlap. Aqua scores 6.18 on the header but 1.19 on the stems. The darkened Signal balances at 2.31 / 3.17. */ --mark-bits: #0C7A87; } } /* RefundHound — "Harbor Teal", from RefundHound/Resources/Styles/Colors.xaml. Primary #00696D already passes on white, so it is used directly. */ :root[data-app='refundhound'] { --accent: #00696D; --accent-strong: #00696D; --accent-container: #9CF1F5; --on-accent-container: #002021; --accent-soft: rgba(0, 105, 109, 0.10); /* Override the studio Signal for the mark's bits here. Signal (#12A5B4) is only 3° of hue from this app's #9CF1F5 header — same colour family, 2.3:1 — so the diagonal would smudge into the background. RefundHound's own darker primary is 5.03:1 against it and separates cleanly. On ForeWind the gap is 63°, so Signal stays. */ --mark-bits: #00696D; } @media (prefers-color-scheme: dark) { :root[data-app='refundhound'] { --accent: #80D4D9; --accent-strong: #80D4D9; --accent-container: #004F53; --on-accent-container: #9CF1F5; --accent-soft: rgba(128, 212, 217, 0.12); /* Must be repeated here. The light override above is `:root[data-app='refundhound']` (0,2,0), which outranks the generic dark `:root` rule (0,1,0) — so without this the dark pages would keep the light #00696D and the bits would vanish into the #004F53 header. Studio Signal, not the app's own #80D4D9. The bits have to stay legible against two things at once: the dark header behind six of them, and the pale #9CF1F5 stems that bits 1 and 8 sit on top of. #80D4D9 scores 5.5:1 on the header but only 1.32:1 on the stems, so the two overlapping bits disappear. Signal balances at 3.15 and 2.31 — the weakest link is nearly twice as strong. Signal is wrong for this app in light mode and right in dark; the constraint is different in each. */ --mark-bits: #12A5B4; } } /* ========================================================================== 2. Tokens specific to these pages -------------------------------------------------------------------------- The colour system, spacing and shape scales come from base.css. What differs here is a fixed reading type scale — these are documents, not a marketing page, so the sizes do not need to grow with the viewport — a narrower measure, and the callout colours only these pages use. ========================================================================== */ :root { /* Callout for the things a reader must not skim past. */ --notice-bg: #FFE8C2; --notice-text: #6F4F00; --notice-border: #E5C36C; /* Studio Signal — the colour of the eight bits in the mark. The default is the studio's own colour, not the app's, because this is the Nilbyte mark linking back to the studio. An app overrides it only when Signal would be too close in hue to that app's own header to stay legible — see the RefundHound block above. */ --mark-bits: #12A5B4; --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.1875rem; --step-2: 1.375rem; --step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem); --step-4: clamp(2rem, 1.55rem + 2.1vw, 2.9rem); /* A reading measure, not the studio page's 1120px. */ --wrap-max: 46rem; --wrap-pad: clamp(1.25rem, 1rem + 2vw, 2rem); } @media (prefers-color-scheme: dark) { :root { --notice-bg: #2B1C00; --notice-text: #FFDDA8; --notice-border: #5D4200; /* Aqua rather than Signal on dark surfaces — same role, enough lift. */ --mark-bits: #3FD0C9; } } /* ========================================================================== 3. Typography for these pages -------------------------------------------------------------------------- base.css already zeroes heading margins, sets their colour and balances their wrapping. These pages are long-form documents, so unlike the studio page they keep real list bullets and unmeasured paragraphs. ========================================================================== */ html { scroll-padding-top: var(--space-5); } h1, h2, h3 { line-height: 1.2; letter-spacing: -0.018em; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } /* Prose lists keep their bullets; only the nav-like lists opt out. */ ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; } li { margin: var(--space-2) 0; } strong { font-weight: 600; color: var(--text-strong); } a { color: var(--accent-strong); text-underline-offset: 0.16em; } a:hover { color: var(--text-strong); } /* ========================================================================== 4. Layout ========================================================================== */ /* --- Page header ---------------------------------------------------------- The one place the app's colour fills a surface: it is the recognition cue for someone arriving straight from inside the app. */ .page-header { background: var(--accent-container); color: var(--on-accent-container); padding-block: var(--space-7) var(--space-6); margin-bottom: var(--space-7); } /* Studio lockup above the app name — the link back that the pages previously had no way of offering. Uses the full eight-bit mark, not the compact one-stroke variant. The brand sheet puts the compact file below ~24px, where the bits would merge; at that size it reads as a generic blocky N and throws away the whole idea. So the mark is set at 26px, just above that floor, where the byte is legible. Colour is a single ink (currentColor for both stems and bits) — the brand sheet's sanctioned MONO / ONE INK variant, which is what lets the same markup sit on a green header, a dark footer, or paper. */ .page-header__studio { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: inherit; text-decoration: none; opacity: 0.8; transition: opacity var(--dur-fast) var(--ease); } .page-header__studio:hover { opacity: 1; color: inherit; } .page-header__mark { width: 26px; height: 26px; flex: none; } /* The bits are OPAQUE and a different colour — never transparent. Bit 1 overlaps the left stem (x 32-36) and bit 8 the right (x 64-68). The whole read of the mark is that the byte falls *across* the two stems, so those two bits must sit on top of them. Knocking the bits back with opacity lets the stem show through underneath and they look sunken behind it, which is wrong. Separation comes from hue, not transparency. The bits keep the studio Signal colour rather than taking the app accent: this is the Nilbyte Studio mark linking back to the studio, and it should look like itself on every app's page. The app already owns the header surface and the page accent. Stems stay currentColor so they invert correctly — dark on the light header, white on a dark footer. CSS `fill` overrides the presentation attribute in the markup. */ .page-header__mark g + g, .page-footer__mark g + g { fill: var(--mark-bits); } /* Name + letterspaced descriptor, matching the studio site header exactly. */ .page-header__wordmark { display: flex; align-items: baseline; gap: 0.4rem; } .page-header__name { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; } .page-header__descriptor { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.72; } .page-header__title { font-size: var(--step-4); font-weight: 700; margin-bottom: var(--space-2); } .page-header__tagline { margin: 0; font-size: var(--step-1); opacity: 0.85; } .main { padding-bottom: var(--space-8); } h2 { font-size: var(--step-3); font-weight: 650; margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); } h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } h3 { font-size: var(--step-1); font-weight: 600; margin: var(--space-6) 0 var(--space-3); } /* ========================================================================== 5. Components ========================================================================== */ /* --- Contact card --------------------------------------------------------- */ .contact-card { background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); } .contact-card p { margin: var(--space-2) 0; } .contact-card__email { font-size: var(--step-2); font-weight: 600; word-break: break-word; } .muted { color: var(--text-muted); font-size: var(--step--1); } /* --- Quick links ---------------------------------------------------------- A task-shaped index at the top. Someone lands on a support page because something is wrong; this gets them to it without reading the explanations. */ .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); } .quick-links li { margin: 0; list-style: none; } .quick-links a { display: block; padding: var(--space-3) var(--space-4); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--step--1); font-weight: 550; text-decoration: none; color: var(--text-strong); transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .quick-links a:hover { border-color: var(--accent); background: var(--accent-soft); } /* --- Progressive disclosure ----------------------------------------------- Native
: no JavaScript, keyboard accessible, and findable by the browser's own in-page search in modern browsers. Used to keep the plain answer on top and the mechanism one click away. */ .detail { margin: var(--space-4) 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-tint); overflow: hidden; } .detail__summary { padding: var(--space-3) var(--space-4); font-size: var(--step--1); font-weight: 600; color: var(--text-strong); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-3); } .detail__summary::-webkit-details-marker { display: none; } /* Chevron drawn in CSS so there is no icon font or SVG to load. */ .detail__summary::before { content: ''; width: 0.42em; height: 0.42em; flex: none; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); } .detail[open] .detail__summary::before { transform: rotate(45deg); } .detail__body { padding: 0 var(--space-4) var(--space-4); font-size: var(--step--1); color: var(--text-muted); } .detail__body > :first-child { margin-top: 0; } /* --- Notice callout -------------------------------------------------------- */ .notice { background: var(--notice-bg); color: var(--notice-text); border: 1px solid var(--notice-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; } .notice p { margin: var(--space-2) 0; } .notice strong { color: inherit; } /* --- Summary box ---------------------------------------------------------- The 20-second version of a long document, before the long document. */ .summary-box { background: var(--bg-tint); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-6); } .summary-box h2 { margin: 0 0 var(--space-3); padding: 0; border: 0; font-size: var(--step-1); } .summary-box ul { margin-bottom: 0; } .summary-box li { font-size: var(--step--1); } /* The opening line is the whole point of the box — carry the emphasis the original page had. */ .summary-box > p:first-child { font-weight: 600; color: var(--text-strong); } /* --- Tables ---------------------------------------------------------------- */ .table-scroll { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); } table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } th { font-weight: 600; color: var(--text-strong); background: var(--bg-tint); white-space: nowrap; } /* --- Address block --------------------------------------------------------- */ .address-block { background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0 var(--space-5); font-style: normal; } .address-block p { margin: var(--space-1) 0; } /* --- Footer ---------------------------------------------------------------- Every app page ends by naming the studio and linking home. This is the bit that makes hosting them on one domain actually worth something. */ .page-footer { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--text-muted); } .page-footer a { color: var(--text-muted); } .page-footer a:hover { color: var(--text-strong); } .page-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-4); } .page-footer__links li { list-style: none; margin: 0; } .page-footer__studio { display: flex; align-items: center; gap: var(--space-3); } /* 26px for the same reason as the header — below ~24px the bits merge. */ .page-footer__mark { width: 26px; height: 26px; flex: none; color: var(--text-strong); } .page-footer__studio p { margin: 0; } .updated { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--text-muted); } /* ========================================================================== 6. Responsive & motion ========================================================================== */ @media print { .page-header { background: none; color: #000; padding-block: 0 var(--space-4); } .page-header__studio, .quick-links, .skip-link { display: none; } body { background: #fff; color: #000; } /* Nothing may hide behind a collapsed disclosure on paper. */ .detail { border: 0; background: none; } .detail__body { display: block !important; } a { text-decoration: underline; } }