/* ============================================================ NRDDA — privacy policy pages. Same tactile light surface as the brand site: thick bottom edges, solid under-shadows, Nunito throughout. ============================================================ */ :root { --indigo: #4F46E5; --indigo-edge: #3730A3; --indigo-tint: #EEEDFD; --sky: #0EA5E9; --sky-edge: #0369A1; --sky-tint: #E0F2FE; --grass: #58CC02; --grass-edge: #43A302; --grass-tint: #EBFADD; --grape: #9333EA; --grape-edge: #6B21A8; --grape-tint: #F5E9FE; --coral: #F97316; --coral-edge: #C2410C; --coral-tint: #FFF0E4; --page: #FFFFFF; --band: #F6F8FC; --card: #FFFFFF; --line: #E3E8F0; --line-strong: #CBD5E1; --ink: #1B2333; --ink-soft: #5A6781; --ink-faint: #8A94A8; --r-lg: 20px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --measure: 1040px; --lift: 4px; /* per-page accent, overridden inline on */ --accent: var(--indigo); --accent-edge: var(--indigo-edge); --accent-tint: var(--indigo-tint); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { font-family: "Nunito", system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.75; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } img, svg { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 50%; top: -120px; transform: translateX(-50%); z-index: 3000; background: var(--accent); color: #fff; font-weight: 800; font-size: .9rem; padding: .75rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md); text-decoration: none; } .skip-link:focus { top: 0; } h1, h2, h3, h4 { font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; } a { color: var(--accent-edge); font-weight: 700; } a:hover { text-decoration-thickness: 2px; } .shell { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); } .topbar__inner { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; } .brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .brand__bolt { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-tint); border-bottom: 3px solid var(--accent); font-size: .95rem; } .topbar__links { display: flex; gap: 1.25rem; align-items: center; } .topbar__links a { font-size: .92rem; font-weight: 800; color: var(--ink-soft); text-decoration: none; } .topbar__links a:hover { color: var(--accent-edge); } /* ---------- masthead ---------- */ .masthead { background: var(--band); border-bottom: 2px solid var(--line); padding: clamp(2.25rem, 6vw, 3.75rem) 0; } .eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-edge); background: var(--accent-tint); padding: .35rem .75rem; border-radius: var(--r-pill); } .masthead h1 { font-size: clamp(1.9rem, 5vw, 2.85rem); margin: 1rem 0 .75rem; } .masthead__lede { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--ink-soft); max-width: 62ch; } .appmeta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .metapill { display: inline-flex; align-items: baseline; gap: .45rem; background: var(--card); border: 2px solid var(--line); border-bottom-width: 3px; border-radius: var(--r-pill); padding: .4rem .9rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft); } .metapill b { color: var(--ink); font-weight: 900; } /* ---------- layout ---------- */ .layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3.25rem) 0 4rem; align-items: start; } @media (max-width: 880px) { .layout { grid-template-columns: 1fr; } .toc { position: static; } } .toc { position: sticky; top: 92px; background: var(--card); border: 2px solid var(--line); border-bottom-width: var(--lift); border-radius: var(--r-md); padding: 1.15rem 1.25rem; } .toc h2 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .75rem; } .toc ol { list-style: none; counter-reset: toc; } .toc li { counter-increment: toc; } .toc a { display: block; padding: .3rem 0; font-size: .89rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; } .toc a::before { content: counter(toc, decimal-leading-zero) " "; color: var(--ink-faint); font-weight: 900; font-size: .8rem; } .toc a:hover { color: var(--accent-edge); } /* ---------- sections ---------- */ .doc > section { margin-bottom: 2.75rem; scroll-margin-top: 96px; } .doc h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--line); } .doc h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; } .doc p { margin-bottom: .9rem; color: var(--ink-soft); } .doc p strong, .doc li strong { color: var(--ink); font-weight: 800; } .doc ul { margin: 0 0 1rem 1.15rem; color: var(--ink-soft); } .doc li { margin-bottom: .45rem; } /* ---------- cards ---------- */ .card { background: var(--card); border: 2px solid var(--line); border-bottom-width: var(--lift); border-radius: var(--r-md); padding: 1.25rem 1.35rem; margin-bottom: 1rem; } .card--accent { border-bottom-color: var(--accent); } .card__head { display: flex; align-items: center; gap: .65rem; margin-bottom: .35rem; flex-wrap: wrap; } .tag { font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r-pill); background: var(--accent-tint); color: var(--accent-edge); } .tag--grass { background: var(--grass-tint); color: var(--grass-edge); } .tag--coral { background: var(--coral-tint); color: var(--coral-edge); } .tag--grape { background: var(--grape-tint); color: var(--grape-edge); } .tag--sky { background: var(--sky-tint); color: var(--sky-edge); } .card__head h3 { margin: 0; font-size: 1.05rem; } .keypoints { background: var(--accent-tint); border: 2px solid var(--line); border-bottom-width: var(--lift); border-bottom-color: var(--accent); border-radius: var(--r-md); padding: 1.25rem 1.35rem; margin: 1.25rem 0; } .keypoints h3 { margin-top: 0; } .keypoints ul { margin-bottom: 0; color: var(--ink); } .note { background: var(--coral-tint); border: 2px solid var(--line); border-bottom-width: var(--lift); border-bottom-color: var(--coral); border-radius: var(--r-md); padding: 1.1rem 1.25rem; margin: 1.25rem 0; } .note p:last-child { margin-bottom: 0; } /* ---------- tables ---------- */ .tablewrap { overflow-x: auto; border: 2px solid var(--line); border-bottom-width: var(--lift); border-radius: var(--r-md); margin: 1rem 0 1.5rem; -webkit-overflow-scrolling: touch; } table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9rem; } thead th { background: var(--band); text-align: left; font-weight: 900; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: .75rem 1rem; border-bottom: 2px solid var(--line); white-space: nowrap; } tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody td:first-child { color: var(--ink); font-weight: 800; } code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; background: var(--band); border: 1px solid var(--line); border-radius: 6px; padding: .1rem .35rem; color: var(--ink); } /* ---------- app index grid ---------- */ .appgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; padding: clamp(2rem, 5vw, 3.25rem) 0 4rem; } .appcard { display: flex; flex-direction: column; gap: .6rem; background: var(--card); border: 2px solid var(--line); border-bottom-width: 6px; border-bottom-color: var(--tone, var(--indigo)); border-radius: var(--r-lg); padding: 1.4rem; text-decoration: none; color: inherit; transition: transform .12s ease; } .appcard:hover { transform: translateY(-3px); } .appcard__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tone-tint, var(--indigo-tint)); font-size: 1.5rem; } .appcard h3 { font-size: 1.2rem; } .appcard p { color: var(--ink-soft); font-size: .92rem; margin: 0; } .appcard code { font-size: .78rem; } .appcard__go { margin-top: auto; padding-top: .6rem; font-weight: 900; font-size: .9rem; color: var(--tone-edge, var(--indigo-edge)); } /* ---------- footer ---------- */ .foot { background: var(--band); border-top: 2px solid var(--line); padding: 2.25rem 0; } .foot__inner { width: min(100% - (var(--gutter) * 2), var(--measure)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .foot__brand { font-weight: 900; font-size: 1.05rem; } .foot__note { color: var(--ink-faint); font-size: .87rem; } @media print { .topbar, .toc, .skip-link { display: none; } .layout { grid-template-columns: 1fr; } body { font-size: 11pt; } }