protokeyandClaude Opus 5.5
672467a699
Landings get per-project themes (params.theme, params.fonts) and optional chat/start/note/engine sections, so they don't look like clones. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
125 lines
5.5 KiB
CSS
125 lines
5.5 KiB
CSS
/* MyPoint VPN theme: light paper, emerald accent, split hero with a chat, dark "under the hood" block. */
|
||
|
||
.theme-mypointvpn {
|
||
--bg: #f6f4ee;
|
||
--bg-alt: #eeebe2;
|
||
--surface: #fffdf8;
|
||
--border: #ddd8cb;
|
||
--text: #16201c;
|
||
--muted: #5c6862;
|
||
--accent: #0d8a5f;
|
||
--accent-strong: #0a6e4c;
|
||
--lime: #c8f169;
|
||
--ink: #0f1a16;
|
||
--radius: 1.1rem;
|
||
font-family: 'Manrope', system-ui, sans-serif;
|
||
}
|
||
.theme-mypointvpn h1,
|
||
.theme-mypointvpn h2 { font-family: 'Unbounded', 'Manrope', sans-serif; font-weight: 700; letter-spacing: -.01em; }
|
||
.theme-mypointvpn h3 { font-weight: 800; }
|
||
.theme-mypointvpn code { background: rgba(13, 138, 95, .1); padding: .05em .35em; border-radius: .35em; font-size: .9em; }
|
||
|
||
/* nav */
|
||
.theme-mypointvpn .nav { background: rgba(246, 244, 238, .85); }
|
||
.theme-mypointvpn .nav__logo { font-family: 'Unbounded', sans-serif; font-weight: 700; }
|
||
.theme-mypointvpn .nav__logo::before {
|
||
content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem;
|
||
border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25rem rgba(13, 138, 95, .2);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* hero: text left, chat right */
|
||
.theme-mypointvpn .hero {
|
||
text-align: left;
|
||
background:
|
||
radial-gradient(40rem 26rem at 85% 20%, rgba(200, 241, 105, .45), transparent 70%),
|
||
var(--bg);
|
||
}
|
||
.theme-mypointvpn .hero--split .wrap {
|
||
display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center;
|
||
}
|
||
.theme-mypointvpn .hero__title { margin-inline: 0; max-width: 16ch; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; }
|
||
.theme-mypointvpn .hero__lead { margin-inline: 0; }
|
||
.theme-mypointvpn .hero__cta { justify-content: flex-start; }
|
||
.theme-mypointvpn .badge { border-color: var(--accent); color: var(--accent-strong); background: var(--surface); }
|
||
.theme-mypointvpn .btn { background: var(--surface); border-color: var(--border); color: var(--text); border-radius: 999px; }
|
||
.theme-mypointvpn .btn:hover { background: #fff; }
|
||
.theme-mypointvpn .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--lime); }
|
||
.theme-mypointvpn .btn--primary:hover { background: var(--accent-strong); color: #fff; }
|
||
@media (max-width: 820px) {
|
||
.theme-mypointvpn .hero--split .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
|
||
}
|
||
|
||
.chat {
|
||
display: flex; flex-direction: column; gap: .55rem;
|
||
padding: 1.1rem; border-radius: 1.4rem;
|
||
background: var(--ink); color: #e9f1ec;
|
||
box-shadow: 0 1.5rem 3rem -1.5rem rgba(15, 26, 22, .5);
|
||
transform: rotate(1.2deg);
|
||
}
|
||
.chat__title { margin: 0 0 .3rem; color: #8fa39a; font-size: .8rem; text-align: center; }
|
||
.chat__msg {
|
||
margin: 0; max-width: 85%; padding: .55rem .85rem;
|
||
border-radius: 1rem; font-size: .92rem; line-height: 1.45;
|
||
}
|
||
.chat__msg--bot { align-self: flex-start; background: #1d2b25; border-bottom-left-radius: .3rem; }
|
||
.chat__msg--me { align-self: flex-end; background: var(--lime); color: var(--ink); border-bottom-right-radius: .3rem; font-weight: 600; }
|
||
.theme-mypointvpn .chat code { background: none; padding: 0; font-size: .95em; }
|
||
@media (max-width: 820px) { .chat { transform: none; } }
|
||
|
||
/* features */
|
||
.theme-mypointvpn .section--alt { background: var(--bg-alt); }
|
||
.theme-mypointvpn .card { background: var(--surface); box-shadow: 0 1px 0 var(--border); }
|
||
.theme-mypointvpn .card h3 { color: var(--text); }
|
||
.theme-mypointvpn .card code { background: rgba(13, 138, 95, .1); }
|
||
.theme-mypointvpn .card--link:hover { border-color: var(--accent); }
|
||
.theme-mypointvpn .card--link h3 { color: var(--accent-strong); }
|
||
|
||
/* get started: big numbered steps */
|
||
.start {
|
||
list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: s;
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem;
|
||
}
|
||
.start li { counter-increment: s; position: relative; padding: 4.2rem 1.25rem 1.25rem; border-top: 3px solid var(--ink); }
|
||
.start li::before {
|
||
content: counter(s, decimal-leading-zero); position: absolute; top: .9rem; left: 1.25rem;
|
||
font: 700 2.2rem/1 'Unbounded', sans-serif; color: var(--accent);
|
||
}
|
||
.start p { margin: .5rem 0 0; color: var(--muted); }
|
||
|
||
/* note */
|
||
#note { padding-top: 0; }
|
||
.note {
|
||
padding: 1.5rem 1.75rem; border-radius: var(--radius);
|
||
background: var(--lime); color: var(--ink);
|
||
}
|
||
.note h2 { font-size: 1.25rem; }
|
||
.note p { margin: .6rem 0 0; max-width: 52rem; }
|
||
.theme-mypointvpn .note code { background: rgba(15, 26, 22, .1); }
|
||
|
||
/* under the hood */
|
||
.engine { background: var(--ink); color: #e9f1ec; }
|
||
.engine .section__lead { color: #a9bab2; }
|
||
.engine code { background: rgba(200, 241, 105, .12) !important; color: var(--lime); }
|
||
.engine__kicker {
|
||
margin: 0 0 .5rem; color: var(--lime);
|
||
font: 600 .8rem/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em;
|
||
}
|
||
.engine__list {
|
||
list-style: none; margin: 2rem 0 0; padding: 0;
|
||
display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem 2rem;
|
||
}
|
||
.engine__list li { position: relative; padding-left: 1.4rem; color: #d3ddd8; }
|
||
.engine__list li::before { content: "›"; position: absolute; left: 0; color: var(--lime); font-weight: 800; }
|
||
.engine__callout {
|
||
margin-top: 2.5rem; padding: 1.25rem 1.5rem;
|
||
border: 1px solid rgba(200, 241, 105, .35); border-radius: var(--radius);
|
||
background: rgba(200, 241, 105, .06);
|
||
}
|
||
.engine__callout h3 { color: var(--lime); font-size: 1.1rem; }
|
||
.engine__callout p { margin: .5rem 0 0; color: #d3ddd8; }
|
||
|
||
/* community + footer */
|
||
.theme-mypointvpn .grid--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
|
||
.theme-mypointvpn .footer { background: var(--bg-alt); }
|