Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<!-- SPDX-License-Identifier: MPL-2.0-or-later -->
Comment thread
hyperpolymath marked this conversation as resolved.
<!-- Owner: Jonathan D.A. Jewell <j.d.a.jewell@open.ac.uk> -->
<!--
SPDX-License-Identifier: CC-BY-SA-4.0
Copyright (c) Jonathan D.A. Jewell <j.d.a.jewell@open.ac.uk>
Expand Down
303 changes: 303 additions & 0 deletions _site/assets/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
/* Premium Casket-SSG Design System */
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--secondary: #a855f7;
--accent: #ec4899;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--bg-base: #0f172a;
--bg-surface: rgba(30, 41, 59, 0.7);
--border-glass: rgba(255, 255, 255, 0.1);
--font-heading: 'Outfit', sans-serif;
--font-body: 'Inter', sans-serif;
}

@media (prefers-color-scheme: light) {
:root {
--text-main: #0f172a;
--text-muted: #64748b;
--bg-base: #f8fafc;
--bg-surface: rgba(255, 255, 255, 0.8);
--border-glass: rgba(0, 0, 0, 0.1);
}
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: var(--font-body);
color: var(--text-main);
background-color: var(--bg-base);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}

.glow-bg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 800px;
background: radial-gradient(circle 600px at 50% 200px, rgba(99, 102, 241, 0.15), transparent 80%);
z-index: -1;
pointer-events: none;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

/* Header & Nav */
.site-header {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: transparent;
border-bottom: 1px solid var(--border-glass);
position: sticky;
top: 0;
z-index: 100;
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
}

.brand {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 800;
text-decoration: none;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: opacity 0.2s;
}

.brand:hover {
opacity: 0.9;
}

.nav-links {
display: flex;
align-items: center;
gap: 2rem;
}

.nav-link {
color: var(--text-muted);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}

.nav-link:hover {
color: var(--text-main);
}

/* Buttons */
.btn-primary, .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-weight: 600;
text-decoration: none;
border-radius: 0.5rem;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #ffffff;
border: none;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
background: var(--bg-surface);
color: var(--text-main);
border: 1px solid var(--border-glass);
backdrop-filter: blur(8px);
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}

.large {
padding: 1rem 2rem;
font-size: 1.1rem;
}

/* Hero Section */
.hero {
text-align: center;
padding: 8rem 0 6rem;
max-width: 800px;
margin: 0 auto;
}

.hero-badge {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--secondary);
background: rgba(168, 85, 247, 0.1);
border: 1px solid rgba(168, 85, 247, 0.2);
border-radius: 2rem;
margin-bottom: 2rem;
}

.hero h1 {
font-family: var(--font-heading);
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #ffffff 30%, var(--text-muted));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: light) {
.hero h1 {
background: linear-gradient(135deg, #0f172a 30%, var(--primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}

.hero-subtitle {
font-size: 1.25rem;
color: var(--text-muted);
margin-bottom: 3rem;
}

.cta-group {
display: flex;
justify-content: center;
gap: 1.5rem;
}

/* Feature Grid */
.grid-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 6rem;
}

.glass {
background: var(--bg-surface);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-glass);
border-radius: 1rem;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, border-color 0.3s ease;
}

.glass:hover {
transform: translateY(-4px);
border-color: var(--secondary);
}

.card-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

.card h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-main);
}

.card p {
color: var(--text-muted);
}

/* Content Section */
.content-section {
margin-bottom: 8rem;
}

.content-section h2 {
font-family: var(--font-heading);
font-size: 2.5rem;
margin-bottom: 2rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.prose h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
margin: 2rem 0 1rem;
}

.prose p {
color: var(--text-muted);
margin-bottom: 1.5rem;
}

.prose pre {
background: #0b0f19;
border: 1px solid var(--border-glass);
padding: 1.5rem;
border-radius: 0.5rem;
overflow-x: auto;
margin: 2rem 0;
}

.prose code {
font-family: monospace;
color: #38bdf8;
}

/* Footer */
.site-footer {
border-top: 1px solid var(--border-glass);
padding: 4rem 0;
text-align: center;
}

.footer-content {
display: flex;
flex-direction: column;
gap: 1rem;
}

.muted {
color: var(--text-muted);
font-size: 0.9rem;
}

@media (max-width: 768px) {
.hero h1 { font-size: 2.5rem; }
.nav-links { display: none; }
.cta-group { flex-direction: column; }
}
Loading
Loading