/* ios.css — bright, colourful iOS-style theme for the /display-tools HUB and * CATEGORY pages only. * * Scope rule: every selector below is namespaced under .dt-ios (set on ) * or uses a .dt- prefix, so this file can never restyle the site nav, the site * footer, or any of the tool pages (they keep clay.css / tools.css untouched). * * Performance rules baked in: * - system font stack, no webfont request * - only transform/opacity animate on hover (no shadow repaints) * - fixed min-heights + aspect ratios on tiles => no CLS * - colour previews are CSS gradients, not images => no extra LCP request */ .dt-ios { --dt-bg: #f2f3f7; --dt-card: #ffffff; --dt-ink: #1c1c1e; --dt-ink-soft: #56565c; --dt-ink-mute: #8a8a8f; --dt-line: #e4e5ec; --dt-blue: #007aff; --dt-indigo: #5e5ce6; --dt-pink: #ff2d55; --dt-orange: #ff9500; --dt-green: #34c759; --dt-teal: #30b0c7; --dt-purple: #af52de; --dt-yellow: #ffcc00; --dt-r: 22px; --dt-r-sm: 16px; --dt-r-pill: 999px; --dt-shadow: 0 1px 2px rgba(28, 28, 30, .06), 0 12px 28px -12px rgba(28, 28, 30, .18); --dt-shadow-sm: 0 1px 2px rgba(28, 28, 30, .05), 0 6px 16px -10px rgba(28, 28, 30, .22); --dt-maxw: 1180px; } body.dt-ios { margin: 0; background: radial-gradient(1100px 520px at 8% -8%, rgba(0, 122, 255, .13), transparent 60%), radial-gradient(900px 480px at 95% -4%, rgba(255, 45, 85, .11), transparent 62%), radial-gradient(800px 500px at 50% 105%, rgba(52, 199, 89, .10), transparent 60%), var(--dt-bg); color: var(--dt-ink); font: 400 17px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; /* The sitewide nav is Bootstrap .fixed-top; nav.php keeps --nav-h in sync. Reserve that height so the hub/category content never sits under it. */ padding-top: var(--nav-h, 62px); } .dt-ios .dt-wrap { max-width: var(--dt-maxw); margin: 0 auto; padding: 0 20px; } .dt-ios h1, .dt-ios h2, .dt-ios h3 { line-height: 1.18; letter-spacing: -.022em; margin: 0 0 .45em; color: var(--dt-ink); } .dt-ios h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem); font-weight: 800; } .dt-ios h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 750; } .dt-ios h3 { font-size: 1.14rem; font-weight: 700; } .dt-ios p { margin: 0 0 1.05em; max-width: 74ch; color: var(--dt-ink-soft); } .dt-ios li { color: var(--dt-ink-soft); } .dt-ios strong { color: var(--dt-ink); } .dt-ios a { color: var(--dt-blue); text-underline-offset: 3px; } .dt-ios :focus-visible { outline: 3px solid var(--dt-blue); outline-offset: 3px; border-radius: 10px; } .dt-ios kbd { font: 600 .82em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 1px solid var(--dt-line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; color: var(--dt-ink); } .dt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── breadcrumbs ───────────────────────────────────────────── */ .dt-ios .dt-crumbs { max-width: var(--dt-maxw); margin: 0 auto; padding: 18px 20px 0; } .dt-ios .dt-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .88rem; } .dt-ios .dt-crumbs li { color: var(--dt-ink-mute); } .dt-ios .dt-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--dt-ink-mute); } .dt-ios .dt-crumbs a { color: var(--dt-ink-soft); text-decoration: none; } .dt-ios .dt-crumbs a:hover { color: var(--dt-blue); text-decoration: underline; } /* ── hero ──────────────────────────────────────────────────── */ .dt-hero { padding: 26px 0 6px; } .dt-hero-card { background: var(--dt-card); border-radius: 30px; box-shadow: var(--dt-shadow); padding: clamp(24px, 4.2vw, 46px); position: relative; overflow: hidden; } .dt-hero-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--dt-blue), var(--dt-purple) 32%, var(--dt-pink) 62%, var(--dt-orange)); } .dt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-indigo); background: rgba(94, 92, 230, .10); border-radius: var(--dt-r-pill); padding: 6px 14px; margin-bottom: 14px; } .dt-gradient-text { background: linear-gradient(92deg, var(--dt-blue), var(--dt-purple) 45%, var(--dt-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dt-lede { font-size: 1.1rem; max-width: 70ch; } .dt-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; padding: 0; list-style: none; } .dt-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--dt-ink); background: #f4f5fa; border: 1px solid var(--dt-line); border-radius: var(--dt-r-pill); padding: 7px 14px; } .dt-pill i { color: var(--dt-blue); } /* ── search / filter ───────────────────────────────────────── */ .dt-filter { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dt-filter input { flex: 1 1 320px; min-width: 0; font: inherit; font-size: 1rem; color: var(--dt-ink); background: #f4f5fa; border: 1px solid var(--dt-line); border-radius: var(--dt-r-pill); padding: 14px 20px; -webkit-appearance: none; appearance: none; } .dt-filter input::placeholder { color: var(--dt-ink-mute); } .dt-filter input:focus { background: #fff; border-color: var(--dt-blue); outline: none; box-shadow: 0 0 0 4px rgba(0, 122, 255, .15); } .dt-filter-status { font-size: .88rem; color: var(--dt-ink-mute); } /* ── category jump chips ───────────────────────────────────── */ .dt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .dt-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 650; text-decoration: none; color: #fff; border-radius: var(--dt-r-pill); padding: 9px 16px; transition: transform .18s ease; } .dt-chip, .dt-chip:visited, .dt-chip:hover { color: #fff; } .dt-chip:hover { transform: translateY(-2px); } .dt-chip { text-shadow: 0 1px 1px rgba(0, 0, 0, .18); } .dt-chip .dt-chip-n { font-weight: 600; opacity: .85; } .dt-chip[data-cat="colors"] { background: linear-gradient(120deg, #007aff, #5e5ce6); } .dt-chip[data-cat="screen-tests"] { background: linear-gradient(120deg, #34c759, #30b0c7); } .dt-chip[data-cat="screensavers"] { background: linear-gradient(120deg, #af52de, #ff2d55); } .dt-chip[data-cat="fake-updates"] { background: linear-gradient(120deg, #ff9500, #ff2d55); } /* ── sections & cards ──────────────────────────────────────── */ .dt-section { padding: 26px 0 4px; scroll-margin-top: 90px; } .dt-card { background: var(--dt-card); border-radius: var(--dt-r); box-shadow: var(--dt-shadow); padding: clamp(20px, 3vw, 34px); margin-bottom: 24px; } .dt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 4px; } .dt-card-head h2 { margin: 0; } .dt-card-head h2 a { color: inherit; text-decoration: none; } .dt-card-head h2 a:hover { color: var(--dt-blue); } .dt-badge { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; border-radius: var(--dt-r-pill); padding: 5px 11px; background: var(--dt-blue); } .dt-section[data-cat="colors"] .dt-badge { background: linear-gradient(120deg, #007aff, #5e5ce6); } .dt-section[data-cat="screen-tests"] .dt-badge { background: linear-gradient(120deg, #34c759, #30b0c7); } .dt-section[data-cat="screensavers"] .dt-badge { background: linear-gradient(120deg, #af52de, #ff2d55); } .dt-section[data-cat="fake-updates"] .dt-badge { background: linear-gradient(120deg, #ff9500, #ff2d55); } .dt-more { margin-left: auto; font-weight: 650; font-size: .94rem; text-decoration: none; white-space: nowrap; } .dt-more:hover { text-decoration: underline; } /* ── tiles ─────────────────────────────────────────────────── */ .dt-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); margin-top: 18px; } .dt-tile { display: flex; flex-direction: column; gap: 7px; min-height: 168px; padding: 16px; border-radius: var(--dt-r-sm); background: #fbfbfd; border: 1px solid var(--dt-line); box-shadow: var(--dt-shadow-sm); color: var(--dt-ink); text-decoration: none; transition: transform .18s ease, border-color .18s ease; } .dt-tile:hover, .dt-tile:focus-visible { transform: translateY(-3px); border-color: #cfd2e2; } .dt-tile-visual { width: 100%; height: 62px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef1fb, #e6ecff); color: var(--dt-blue); border: 1px solid rgba(28, 28, 30, .07); } .dt-tile-visual svg { width: 26px; height: 26px; } .dt-tile.is-color .dt-tile-visual { background: var(--swatch, #fff); } .dt-tile-name { font-weight: 700; font-size: .98rem; line-height: 1.3; } .dt-tile-desc { font-size: .8rem; line-height: 1.45; color: var(--dt-ink-mute); } .dt-section[data-cat="screen-tests"] .dt-tile-visual { background: linear-gradient(135deg, #e4f8ea, #dff3f7); color: #1f9d4d; } .dt-section[data-cat="screensavers"] .dt-tile-visual { background: linear-gradient(135deg, #f6e9fd, #ffe6ee); color: #9b3fc7; } .dt-section[data-cat="fake-updates"] .dt-tile-visual { background: linear-gradient(135deg, #fff0dc, #ffe4e9); color: #d97706; } /* ── prose blocks ──────────────────────────────────────────── */ .dt-prose h2 { margin-top: 1.5em; } .dt-prose h2:first-child { margin-top: 0; } .dt-prose ul, .dt-prose ol { max-width: 74ch; padding-left: 1.25em; } .dt-prose li { margin-bottom: .5em; } .dt-steps { list-style: none; padding: 0; margin: 18px 0 0; counter-reset: dtstep; display: grid; gap: 14px; } .dt-steps li { counter-increment: dtstep; position: relative; padding: 16px 18px 16px 60px; background: #fbfbfd; border: 1px solid var(--dt-line); border-radius: var(--dt-r-sm); margin: 0; } .dt-steps li::before { content: counter(dtstep); position: absolute; left: 16px; top: 15px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--dt-blue), var(--dt-indigo)); } .dt-qa { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; } .dt-qa-item { background: #fbfbfd; border: 1px solid var(--dt-line); border-radius: var(--dt-r-sm); padding: 16px 18px; } .dt-qa-item h3 { margin-bottom: .35em; } .dt-qa-item p { margin: 0; font-size: .92rem; } /* ── FAQ ───────────────────────────────────────────────────── */ .dt-faq details { background: #fbfbfd; border: 1px solid var(--dt-line); border-radius: var(--dt-r-sm); padding: 14px 18px; margin-bottom: 10px; } .dt-faq summary { font-weight: 650; cursor: pointer; list-style: none; } .dt-faq summary::-webkit-details-marker { display: none; } .dt-faq summary::after { content: "+"; float: right; color: var(--dt-blue); font-weight: 700; } .dt-faq details[open] summary::after { content: "–"; } .dt-faq details p { margin: .7em 0 0; font-size: .94rem; } /* ── in-page directory (internal linking) ──────────────────── */ .dt-dir-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 14px; } .dt-dir-col h3 { margin-bottom: .5em; } .dt-dir-col h3 a { color: inherit; text-decoration: none; } .dt-dir-col h3 a:hover { color: var(--dt-blue); } .dt-dir-col ul { list-style: none; margin: 0; padding: 0; } .dt-dir-col li { font-size: .9rem; margin-bottom: 6px; } .dt-dir-col a { text-decoration: none; } .dt-dir-col a:hover { text-decoration: underline; } .dt-dir-col [aria-current="page"] { color: var(--dt-ink-mute); font-weight: 650; } .dt-meta-note { font-size: .86rem; color: var(--dt-ink-mute); margin: 6px 0 34px; } @media (max-width: 560px) { body.dt-ios { font-size: 16px; } .dt-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .dt-tile { min-height: 156px; } } @media (prefers-reduced-motion: reduce) { .dt-ios * { transition: none !important; animation: none !important; } }