mirror of
https://github.com/conorluddy/ios-simulator-skill.git
synced 2026-09-14 20:07:12 +08:00
Conor
8b686edc37
Single-page landing at /site/ with TE-inspired aesthetic (navy/yellow palette, Inter + Azeret Mono, numbered sections). Adds .github/workflows/pages.yml — deploys site/ to GitHub Pages on push to main using the official actions/configure-pages, upload-pages-artifact, and deploy-pages actions. After merge: enable Pages via Settings -> Pages -> Source: GitHub Actions to trigger first deploy.
643 lines
13 KiB
CSS
643 lines
13 KiB
CSS
:root {
|
|
--bg: #1f1f1f;
|
|
--panel: #2b2d42;
|
|
--panel-2: #252738;
|
|
--ink: #ffffff;
|
|
--ink-dim: #8d99ae;
|
|
--ink-faint: #5a6478;
|
|
--hair: #2b2d42;
|
|
--accent: #f8f32b;
|
|
--good: #f8f32b;
|
|
--warn: #f8f32b;
|
|
--bad: #8d99ae;
|
|
--info: #8d99ae;
|
|
--radius: 10px;
|
|
--container: 1200px;
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: 'Azeret Mono', "SF Mono", ui-monospace, Menlo, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--font-sans);
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a { color: var(--ink); text-decoration: none; transition: color 120ms; }
|
|
a:hover { color: var(--accent); }
|
|
|
|
code, pre, .mono {
|
|
font-family: var(--font-mono);
|
|
font-feature-settings: "ss01", "tnum";
|
|
}
|
|
|
|
code {
|
|
font-size: 0.9em;
|
|
color: var(--ink);
|
|
background: var(--panel);
|
|
border: 1px solid var(--hair);
|
|
padding: 0.08em 0.4em;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.container {
|
|
max-width: var(--container);
|
|
margin: 0 auto;
|
|
padding: 0 28px;
|
|
}
|
|
|
|
.eyebrow,
|
|
.label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
|
|
/* === NAV === */
|
|
.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: rgba(31, 31, 31, 0.88);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 56px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.brand:hover { color: var(--ink); }
|
|
.brand-mark {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(248, 243, 43, 0.22);
|
|
}
|
|
.brand-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink);
|
|
}
|
|
.brand-name span { color: var(--ink-dim); }
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
}
|
|
.nav-links a {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
}
|
|
.nav-links a:hover { color: var(--ink); }
|
|
|
|
@media (max-width: 640px) {
|
|
.nav-links a:not(.nav-github) { display: none; }
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
padding: 120px 0 96px;
|
|
border-bottom: 1px solid var(--hair);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(var(--hair) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--hair) 1px, transparent 1px);
|
|
background-size: 80px 80px;
|
|
opacity: 0.25;
|
|
mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 0%, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 0%, transparent 80%);
|
|
pointer-events: none;
|
|
}
|
|
.hero .container { position: relative; }
|
|
|
|
.hero-meta {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
align-items: center;
|
|
}
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 999px;
|
|
}
|
|
.tag-muted {
|
|
color: var(--ink-dim);
|
|
border-color: var(--hair);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(40px, 6.5vw, 76px);
|
|
font-weight: 500;
|
|
line-height: 1.02;
|
|
letter-spacing: -0.03em;
|
|
margin: 0 0 24px;
|
|
max-width: 920px;
|
|
}
|
|
.hero h1 em {
|
|
font-style: normal;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.lede {
|
|
font-size: clamp(15px, 1.5vw, 18px);
|
|
color: var(--ink-dim);
|
|
line-height: 1.5;
|
|
max-width: 640px;
|
|
margin: 0 0 40px;
|
|
}
|
|
.lede code {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--ink);
|
|
padding: 0;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.cta-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 80px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 42px;
|
|
padding: 0 20px;
|
|
border-radius: 999px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: all 120ms;
|
|
border: 1px solid transparent;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #1f1f1f;
|
|
}
|
|
.btn-primary:hover { background: #fff95a; color: #1f1f1f; }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border-color: var(--hair);
|
|
}
|
|
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); }
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
border-top: 1px solid var(--hair);
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.stat {
|
|
padding: 28px 0 24px;
|
|
border-right: 1px solid var(--hair);
|
|
}
|
|
.stat:last-child { border-right: none; }
|
|
.stat-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: var(--ink-faint);
|
|
margin-bottom: 12px;
|
|
}
|
|
.stat-value {
|
|
font-size: clamp(40px, 5vw, 56px);
|
|
font-weight: 500;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
color: var(--ink);
|
|
margin-bottom: 10px;
|
|
}
|
|
.stat-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
}
|
|
@media (max-width: 720px) {
|
|
.stats { grid-template-columns: 1fr; }
|
|
.stat { border-right: none; border-bottom: 1px solid var(--hair); }
|
|
.stat:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* === SECTIONS === */
|
|
.section {
|
|
padding: 96px 0;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.section-head {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
gap: 24px;
|
|
align-items: baseline;
|
|
margin-bottom: 56px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.section-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.14em;
|
|
color: var(--ink-faint);
|
|
}
|
|
.section-title {
|
|
font-size: clamp(28px, 3.5vw, 40px);
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
line-height: 1.1;
|
|
}
|
|
.section-sub {
|
|
grid-column: 2;
|
|
margin: 12px 0 0;
|
|
color: var(--ink-dim);
|
|
font-size: 15px;
|
|
max-width: 720px;
|
|
}
|
|
.section-sub code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--ink);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.section-head { grid-template-columns: 1fr; gap: 8px; }
|
|
.section-sub { grid-column: 1; }
|
|
}
|
|
|
|
/* === FEATURES === */
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.feature-card {
|
|
padding: 32px;
|
|
border-right: 1px solid var(--hair);
|
|
background: var(--panel);
|
|
}
|
|
.feature-card:last-child { border-right: none; }
|
|
.feature-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: var(--accent);
|
|
margin-bottom: 24px;
|
|
display: block;
|
|
}
|
|
.feature-card h3 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
margin: 0 0 12px;
|
|
color: var(--ink);
|
|
}
|
|
.feature-card p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: var(--ink-dim);
|
|
line-height: 1.55;
|
|
}
|
|
@media (max-width: 820px) {
|
|
.features { grid-template-columns: 1fr; }
|
|
.feature-card { border-right: none; border-bottom: 1px solid var(--hair); }
|
|
.feature-card:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* === COMPARE === */
|
|
.compare {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.compare-card {
|
|
padding: 28px;
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--hair);
|
|
}
|
|
.compare-card:last-child { border-right: none; }
|
|
.compare-task {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
margin: 0 0 20px;
|
|
}
|
|
.compare-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--hair);
|
|
font-size: 13px;
|
|
}
|
|
.compare-row:nth-of-type(2) { border-bottom: none; }
|
|
.compare-row > span:first-child {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
}
|
|
.compare-bad {
|
|
font-family: var(--font-mono);
|
|
color: var(--bad);
|
|
font-size: 13px;
|
|
}
|
|
.compare-good {
|
|
font-family: var(--font-mono);
|
|
color: var(--good);
|
|
font-size: 13px;
|
|
}
|
|
.compare-saving {
|
|
margin: 20px 0 0;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.02em;
|
|
color: var(--accent);
|
|
font-family: var(--font-sans);
|
|
}
|
|
@media (max-width: 820px) {
|
|
.compare { grid-template-columns: 1fr; }
|
|
.compare-card { border-right: none; border-bottom: 1px solid var(--hair); }
|
|
.compare-card:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* === CODE BLOCK === */
|
|
.codeblock {
|
|
position: relative;
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
background: var(--panel);
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.codeblock-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--hair);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.codeblock pre {
|
|
margin: 0;
|
|
padding: 20px 24px;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
overflow-x: auto;
|
|
color: var(--ink);
|
|
}
|
|
.codeblock pre code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
.copy-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--hair);
|
|
color: var(--ink-dim);
|
|
font: inherit;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: all 120ms;
|
|
}
|
|
.copy-btn:hover {
|
|
color: var(--ink);
|
|
border-color: var(--ink-dim);
|
|
}
|
|
.copy-btn.is-copied {
|
|
color: #1f1f1f;
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.install-prereqs {
|
|
text-align: center;
|
|
margin: 28px 0 0;
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
}
|
|
|
|
/* === CATALOG === */
|
|
.catalog {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.catalog-group {
|
|
padding: 28px 28px 12px;
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--hair);
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.catalog-group:nth-child(2n) { border-right: none; }
|
|
.catalog-group:nth-last-child(-n+1) { border-bottom: none; }
|
|
.catalog-group:nth-last-child(2):nth-child(odd) { border-bottom: none; }
|
|
|
|
.catalog-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.catalog-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: var(--accent);
|
|
}
|
|
.catalog-group h3 {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.catalog-group ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.catalog-group li {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--hair);
|
|
}
|
|
.catalog-group li:last-child { border-bottom: none; padding-bottom: 16px; }
|
|
.catalog-group li code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--accent);
|
|
font-size: 12px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.catalog-group li span {
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.catalog { grid-template-columns: 1fr; }
|
|
.catalog-group { border-right: none; border-bottom: 1px solid var(--hair); }
|
|
.catalog-group:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* === QUOTE / EVAL === */
|
|
.eval {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0;
|
|
border: 1px solid var(--hair);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.eval-card {
|
|
padding: 48px 40px;
|
|
background: var(--panel);
|
|
border-right: 1px solid var(--hair);
|
|
}
|
|
.eval-card:last-child {
|
|
border-right: none;
|
|
background: var(--panel-2);
|
|
}
|
|
.eval-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
color: var(--ink-faint);
|
|
margin-bottom: 16px;
|
|
}
|
|
.eval-stat {
|
|
font-size: clamp(48px, 7vw, 80px);
|
|
font-weight: 500;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1;
|
|
color: var(--accent);
|
|
margin: 0 0 16px;
|
|
}
|
|
.eval-card.muted .eval-stat { color: var(--ink-dim); }
|
|
.eval-desc {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
margin: 0;
|
|
}
|
|
.eval-source {
|
|
margin-top: 32px;
|
|
font-size: 13px;
|
|
color: var(--ink-dim);
|
|
text-align: center;
|
|
padding: 0 24px;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.eval { grid-template-columns: 1fr; }
|
|
.eval-card { border-right: none; border-bottom: 1px solid var(--hair); }
|
|
.eval-card:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
.footer {
|
|
padding: 40px 0;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.footer-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.footer p { margin: 0; }
|
|
.footer a { color: var(--ink-dim); }
|
|
.footer a:hover { color: var(--accent); }
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 24px;
|
|
}
|