@beforesemicolon/builder 1.7.0 → 1.8.1

package/dist/cjs/docs/templates/fading-citrus/stylesheets/common.css

@@ -0,0 +1,815 @@
+@import 'normalize.css';
+@import 'fonts.css';
+
+:root {
+    --background: oklch(0.18 0.015 250);
+    --foreground: oklch(0.96 0.005 250);
+    --card: oklch(0.22 0.018 250);
+    --primary: oklch(0.74 0.18 45);
+    --primary-glow: oklch(0.78 0.19 50);
+    --primary-foreground: oklch(0.18 0.02 250);
+    --secondary: oklch(0.27 0.02 250);
+    --muted: oklch(0.25 0.018 250);
+    --muted-foreground: oklch(0.68 0.02 250);
+    --accent: oklch(0.7 0.16 200);
+    --border: oklch(0.3 0.02 250);
+    --ring: oklch(0.74 0.18 45);
+    --radius: 0.75rem;
+    --code-bg: oklch(0.16 0.015 250);
+    --syntax-comment: oklch(0.55 0.02 250);
+    --syntax-keyword: oklch(0.78 0.19 50);
+    --syntax-string: oklch(0.78 0.15 145);
+    --syntax-tag: oklch(0.72 0.16 200);
+    --syntax-attr: oklch(0.82 0.14 90);
+
+    --font-sans:
+        ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+        sans-serif;
+    --font-title: var(--font-sans);
+    --font-mono:
+        'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo,
+        monospace;
+
+    --gradient-hero: radial-gradient(
+        ellipse at top,
+        oklch(0.28 0.08 45 / 0.35),
+        transparent 60%
+    );
+    --gradient-primary: linear-gradient(
+        135deg,
+        var(--primary),
+        var(--primary-glow)
+    );
+    --gradient-text: linear-gradient(
+        135deg,
+        oklch(0.98 0.005 250),
+        oklch(0.78 0.05 250)
+    );
+    --gradient-border: linear-gradient(
+        135deg,
+        oklch(0.74 0.18 45 / 0.5),
+        oklch(0.7 0.16 200 / 0.3)
+    );
+    --shadow-glow: 0 0 60px -15px oklch(0.74 0.18 45 / 0.5);
+    --shadow-card:
+        0 1px 0 0 oklch(1 0 0 / 0.05) inset,
+        0 20px 40px -20px oklch(0 0 0 / 0.5);
+
+    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    min-width: 100vw;
+    scroll-behavior: smooth;
+    scroll-padding-top: 6rem;
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+body {
+    font-size: 16px;
+    font-family: var(--font-sans);
+    line-height: 1.6;
+    letter-spacing: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    max-width: 1280px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 24px;
+    padding-right: 24px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-title);
+    color: oklch(1 0 0);
+    font-weight: 800;
+}
+
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+    text-decoration: none;
+    position: relative;
+    color: inherit;
+}
+
+h2 a::before,
+h3 a::before,
+h4 a::before,
+h5 a::before,
+h6 a::before {
+    content: '#';
+    opacity: 0;
+    font-size: 70%;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(calc(-100% - 4px), -50%);
+    color: var(--primary);
+    transition: opacity 0.2s ease;
+}
+
+h2 a::before {
+    font-size: 50%;
+}
+
+h2 a:hover::before,
+h3 a:hover::before,
+h4 a:hover::before,
+h5 a:hover::before,
+h6 a:hover::before {
+    opacity: 0.7;
+}
+
+p {
+    margin-top: 0;
+    line-height: 1.6;
+    font-weight: 400;
+    color: var(--muted-foreground);
+}
+
+a {
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+/* Gradients & Utilities */
+.text-gradient {
+    background: var(--gradient-text);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.text-gradient-primary {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.bg-grid {
+    background-size: 48px 48px;
+    background-image:
+        linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
+        linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
+    mask-image: radial-gradient(
+        ellipse 80% 60% at 50% 0%,
+        black 30%,
+        transparent 80%
+    );
+    -webkit-mask-image: radial-gradient(
+        ellipse 80% 60% at 50% 0%,
+        black 30%,
+        transparent 80%
+    );
+}
+
+.glow {
+    box-shadow: var(--shadow-glow);
+}
+
+/* Animations */
+@keyframes float-up {
+    0% {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes pulse-glow {
+    0%,
+    100% {
+        opacity: 0.4;
+    }
+    50% {
+        opacity: 0.8;
+    }
+}
+
+.animate-float-up {
+    animation: float-up 0.8s var(--transition-smooth) forwards;
+}
+
+.animate-pulse-glow {
+    animation: pulse-glow 4s ease-in-out infinite;
+}
+
+/* header ---------------- */
+header {
+    height: 4rem;
+    max-width: 1280px;
+    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.5);
+    background-color: oklch(0.18 0.015 250 / 0.6);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+header h1 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+}
+
+header h1 a {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--foreground);
+    text-decoration: none;
+    transition: transform 0.2s ease;
+}
+
+header h1 a:hover {
+    transform: scale(1.02);
+}
+
+header h1 a svg {
+    height: 1.5rem;
+    width: auto;
+}
+
+header nav {
+    display: flex;
+    align-items: center;
+    gap: 48px;
+}
+
+header nav.nav-actions {
+    gap: 16px;
+}
+
+header nav.nav-actions .btn-primary {
+    height: 34px;
+    border-radius: 6px;
+}
+
+header nav a {
+    text-decoration: none;
+    transition: all 0.2s ease;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+}
+
+header nav a:hover,
+header nav a.active {
+    color: var(--foreground);
+}
+
+header nav a.github-link {
+    width: 36px;
+    height: 36px;
+    display: inline-grid;
+    place-items: center;
+    border: 1px solid oklch(0.3 0.02 250 / 0.7);
+    border-radius: 8px;
+}
+
+header nav a.github-link:hover {
+    border-color: oklch(0.74 0.18 45 / 0.45);
+    color: var(--primary);
+}
+
+/* footer ------------------- */
+footer {
+    background: oklch(0.14 0.012 250);
+    color: var(--muted-foreground);
+    border-top: 1px solid var(--border);
+    padding-top: 60px;
+    padding-bottom: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+}
+
+footer .footer-brand {
+    flex: 1;
+    min-width: 280px;
+}
+
+footer .footer-brand svg {
+    margin-bottom: 16px;
+    display: block;
+}
+
+footer .footer-brand p {
+    font-size: 0.9rem;
+    max-width: 320px;
+    margin-bottom: 20px;
+}
+
+footer h4 {
+    color: var(--foreground);
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-bottom: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+}
+
+footer .learning-resources,
+footer .about-bfs {
+    width: 20%;
+    min-width: 180px;
+}
+
+footer .learning-resources li,
+footer .about-bfs li {
+    padding: 6px 0;
+    font-size: 0.9rem;
+}
+
+footer .learning-resources li a,
+footer .about-bfs li a {
+    color: var(--muted-foreground);
+}
+
+footer .learning-resources li a:hover,
+footer .about-bfs li a:hover {
+    color: var(--foreground);
+}
+
+footer address {
+    margin-top: 16px;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+footer address a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: oklch(1 1 1 / 0.02);
+    transition: all 0.2s ease;
+}
+
+footer address a img {
+    filter: invert(1);
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+}
+
+footer address a:hover {
+    border-color: var(--primary);
+    background: oklch(0.74 0.18 45 / 0.05);
+}
+
+footer address a:hover img {
+    opacity: 1;
+}
+
+footer .copyright-section {
+    width: 100%;
+    border-top: 1px solid oklch(1 1 1 / 0.05);
+    padding-top: 24px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 16px;
+    font-size: 0.85rem;
+}
+
+footer .copyright-section .brand-logo-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+footer .copyright-section .brand-logo-container img {
+    height: 20px;
+    opacity: 0.8;
+}
+
+/* .code-snippet ------------------- */
+.code-snippet {
+    background: var(--code-bg);
+    border-radius: 0.75rem;
+    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    margin: 16px 0;
+    width: 100%;
+    max-width: 100%;
+    max-height: 80vh;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: var(--shadow-card);
+}
+
+.code-snippet .header {
+    flex: 0 0 41px;
+    min-height: 41px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 10px 0 16px;
+    background: oklch(0.22 0.018 250 / 0.6);
+    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.6);
+}
+
+.code-snippet .mac-dots {
+    flex: 0 0 auto;
+    display: flex;
+    gap: 6px;
+}
+
+.code-snippet .mac-dots span {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.code-snippet .mac-dots .dot-red {
+    background-color: oklch(0.62 0.22 25 / 0.7);
+}
+
+.code-snippet .mac-dots .dot-yellow {
+    background-color: oklch(0.78 0.14 90 / 0.7);
+}
+
+.code-snippet .mac-dots .dot-green {
+    background-color: oklch(0.78 0.15 145 / 0.7);
+}
+
+.code-snippet .filename {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+    line-height: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.code-snippet .label {
+    flex: 0 0 auto;
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    line-height: 20px;
+    opacity: 0.6;
+}
+
+.code-snippet .content {
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+    overflow: auto;
+    padding: 12px;
+}
+
+.code-snippet pre {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 1.5rem;
+    width: max-content;
+    min-width: 100%;
+}
+
+.code-snippet pre code {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.code-snippet .syntax-comment {
+    color: var(--syntax-comment);
+    font-style: italic;
+}
+
+.code-snippet .syntax-keyword {
+    color: var(--syntax-keyword);
+}
+
+.code-snippet .syntax-string {
+    color: var(--syntax-string);
+}
+
+.code-snippet .syntax-tag {
+    color: var(--syntax-tag);
+}
+
+.code-snippet .syntax-attr {
+    color: var(--syntax-attr);
+}
+
+.code-snippet .syntax-expression {
+    color: var(--foreground);
+}
+
+.code-snippet .code-line {
+    display: flex;
+}
+
+.code-snippet .line-number {
+    user-select: none;
+    width: 32px;
+    padding-right: 16px;
+    flex-shrink: 0;
+    text-align: right;
+    color: oklch(0.68 0.02 250 / 0.5);
+}
+
+.code-snippet .line-code {
+    flex: 1;
+    white-space: pre;
+}
+
+.code-snippet .code-copy-btn {
+    all: unset;
+    position: relative;
+    flex: 0 0 28px;
+    width: 28px;
+    height: 28px;
+    overflow: hidden;
+    text-indent: 999px;
+    white-space: nowrap;
+    color: var(--muted-foreground);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border-radius: 6px;
+}
+
+.code-snippet .code-copy-btn::before,
+.code-snippet .code-copy-btn::after {
+    content: '';
+    position: absolute;
+    border: 1.5px solid currentColor;
+    border-radius: 2px;
+    width: 10px;
+    height: 12px;
+    text-indent: 0;
+}
+
+.code-snippet .code-copy-btn::before {
+    top: 10px;
+    left: 8px;
+    opacity: 0.55;
+}
+
+.code-snippet .code-copy-btn::after {
+    top: 7px;
+    left: 12px;
+    background: oklch(0.22 0.018 250);
+}
+
+.code-snippet .code-copy-btn:hover {
+    color: var(--foreground);
+    background: oklch(0.25 0.018 250 / 0.6);
+}
+
+.code-snippet .code-copy-btn.copied {
+    color: oklch(0.78 0.15 145);
+}
+
+@media screen and (max-width: 768px) {
+    .code-snippet pre code {
+        font-size: 0.7rem !important;
+        line-height: 150% !important;
+    }
+
+    footer {
+        padding-top: 40px;
+        padding-bottom: 30px;
+    }
+
+    footer .copyright-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+    }
+}
+
+/* React landing shell parity */
+header.site-header {
+    position: fixed;
+    inset: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    height: auto;
+    padding: 0;
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+
+header.site-header .header-inner {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header.site-header h1 a svg {
+    height: 28px;
+}
+
+header.site-header nav a {
+    letter-spacing: 0;
+}
+
+header.site-header nav a.github-link {
+    width: 36px;
+    height: 36px;
+}
+
+header.site-header nav a.docs-github-link {
+    width: auto;
+    min-width: 36px;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+}
+
+.site-footer {
+    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    background: transparent;
+    padding: 56px 0 36px;
+}
+
+.site-footer .footer-inner {
+    display: grid;
+    grid-template-columns: minmax(240px, 1fr) minmax(180px, auto) minmax(
+            220px,
+            auto
+        );
+    align-items: start;
+    gap: 40px;
+}
+
+.site-footer .footer-brand svg {
+    height: 28px;
+    width: auto;
+    color: var(--foreground);
+}
+
+.site-footer .footer-brand p {
+    max-width: 360px;
+    margin: 16px 0 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+}
+
+.footer-links {
+    margin: 0;
+    padding: 0;
+}
+
+.footer-links li {
+    margin: 0 0 8px;
+    padding: 0;
+}
+
+.footer-links h4 {
+    margin: 0 0 14px;
+    color: var(--foreground);
+    font-size: 0.8125rem;
+    line-height: 1.25;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.footer-links a {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+}
+
+.footer-links a:hover {
+    color: var(--primary);
+}
+
+.footer-credit {
+    grid-column: 1 / -1;
+    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    padding-top: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 0.8125rem;
+}
+
+.footer-social {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.footer-social a {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 6px;
+    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    color: var(--muted-foreground);
+    background: oklch(0.22 0.018 250 / 0.25);
+    transition: all 0.2s ease;
+}
+
+.footer-social img {
+    filter: invert(1);
+    opacity: 0.62;
+    transition: opacity 0.2s ease;
+}
+
+.footer-social a:hover {
+    color: var(--primary);
+    border-color: oklch(0.74 0.18 45 / 0.5);
+    background: oklch(0.74 0.18 45 / 0.06);
+}
+
+.footer-social a:hover img {
+    opacity: 1;
+}
+
+@media screen and (max-width: 768px) {
+    header.site-header .nav-links {
+        display: none;
+    }
+
+    header.site-header .github-link {
+        display: none;
+    }
+
+    .site-footer .footer-inner {
+        grid-template-columns: 1fr;
+        gap: 28px;
+    }
+
+    .footer-social {
+        justify-content: flex-start;
+    }
+
+    .footer-credit {
+        align-items: flex-start;
+    }
+}