/* ============================================================ Interstellar Resonance — styles Colours and fonts are defined as CSS custom properties in :root. Light is the default; [data-theme="dark"] on overrides. ============================================================ */ /* --- Local font placeholders -------------------------------------------- Drop your chosen Google fonts (woff2) into /assets/fonts/, then uncomment and point --font-heading / --font-body at the families below. @font-face { font-family: 'Heading'; src: url('/assets/fonts/heading.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Body'; src: url('/assets/fonts/body.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } ------------------------------------------------------------------------- */ :root { /* Fonts — self-hosted, declared in /assets/css/fonts.css */ --font-heading: 'Science Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-article: 'Marcellus', Georgia, 'Times New Roman', serif; /* Brand accents (shared by both themes) */ --accent: #7c5cff; --accent-2: #29c5ff; /* Light theme */ --bg: #f6f7fb; --bg-elev: #ffffff; --text: #15161d; --text-muted: #5b6172; --border: #e3e6ef; --shadow: 0 6px 24px rgba(20, 22, 40, 0.08); --hero-overlay: linear-gradient(180deg, rgba(8,10,25,.30), rgba(8,10,25,.72)); } [data-theme="dark"] { --bg: #0a0b14; --bg-elev: #12131f; --text: #e8eaf2; --text-muted: #9aa0b5; --border: #232539; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); --hero-overlay: linear-gradient(180deg, rgba(4,5,15,.40), rgba(4,5,15,.85)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; } .container { width: min(1100px, 100% - 2.5rem); margin-inline: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg-elev) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-weight: 700; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { display: block; border-radius: 6px; } .site-nav { display: flex; align-items: center; gap: 1.25rem; } .site-nav a { color: var(--text-muted); } .site-nav a:hover { color: var(--text); text-decoration: none; } .theme-toggle { border: 1px solid var(--border); background: var(--bg); color: var(--text); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: grid; place-items: center; line-height: 1; } .theme-toggle .theme-toggle-light { display: none; } .theme-toggle .theme-toggle-dark { display: block; } [data-theme="dark"] .theme-toggle .theme-toggle-light { display: block; } [data-theme="dark"] .theme-toggle .theme-toggle-dark { display: none; } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; min-height: 52vh; display: grid; align-items: end; overflow: hidden; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); } .hero-content { position: relative; padding: 3rem 0; color: #fff; } .hero-content h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 0 0 .25rem; } .hero-content p { font-size: 1.2rem; color: rgba(255,255,255,.85); margin: 0; } /* --- Main / sections ---------------------------------------------------- */ .main { padding: 3rem 0 4rem; } .section-title { font-size: 1.4rem; margin: 0 0 1.5rem; } .empty { color: var(--text-muted); } /* --- Article grid ------------------------------------------------------- */ .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; } .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .card-link { color: inherit; display: block; } .card-link:hover { text-decoration: none; } .card-thumb { aspect-ratio: 16 / 9; background: #000; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-body { padding: 1.1rem 1.2rem 1.3rem; } .card-body h3 { margin: 0 0 .35rem; font-size: 1.15rem; font-family: var(--font-article); } .card-body time { color: var(--text-muted); font-size: .82rem; } .card-body p { color: var(--text-muted); margin: .6rem 0 0; font-size: .94rem; } /* --- Single post -------------------------------------------------------- */ .post { max-width: 760px; margin-inline: auto; } .post-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 .5rem; font-family: var(--font-article); } .post-meta { color: var(--text-muted); font-size: .9rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .post-body { font-size: 1.08rem; margin-top: 2rem; font-family: var(--font-article); } .post-body p { margin: 0 0 1.3rem; } /* --- YouTube embed ------------------------------------------------------ */ .video-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.6rem 0; border-radius: 12px; overflow: hidden; background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Badges ------------------------------------------------------------- */ .badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 999px; background: var(--border); color: var(--text-muted); } .badge-published { background: color-mix(in srgb, #22c55e 25%, transparent); color: #16a34a; } .badge-draft { background: color-mix(in srgb, #f59e0b 28%, transparent); color: #d97706; } /* --- Forms / admin ------------------------------------------------------ */ .form { max-width: 720px; display: grid; gap: 1.1rem; } .form.editor { max-width: 820px; } .form label { display: grid; gap: .4rem; font-weight: 600; font-size: .9rem; } .form label.inline { display: inline-grid; } .form label small { font-weight: 400; color: var(--text-muted); } .form input, .form textarea, .form select { font: inherit; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); color: var(--text); width: 100%; } .form textarea { resize: vertical; line-height: 1.6; min-height: 320px; } .form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent); border-color: var(--accent); } .form-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .editor-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .hint { color: var(--text-muted); font-size: .85rem; } .btn { display: inline-block; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: .7rem 1.3rem; font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn-sm { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: .45rem .8rem; font: inherit; cursor: pointer; } .btn-sm:hover { border-color: var(--accent); } .btn-ghost { color: var(--text-muted); padding: .7rem 1rem; } .link-danger { background: none; border: 0; color: #ef4444; cursor: pointer; font: inherit; padding: 0; } .auth-card { max-width: 380px; margin: 3rem auto; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); } .auth-card h1 { margin-top: 0; font-size: 1.4rem; } .form-error { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; } .notice { background: color-mix(in srgb, #22c55e 16%, transparent); color: #16a34a; padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; } /* --- Account ------------------------------------------------------------ */ .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; align-items: start; } .account-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow); } .account-card h2 { margin: 0 0 1rem; font-size: 1.1rem; } .account-card .form { gap: .8rem; } .account-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 1rem; } .account-dl dt { color: var(--text-muted); font-size: .85rem; } .account-dl dd { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; } .admin-head h1 { margin: 0; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .row-actions { display: flex; gap: 1rem; align-items: center; } .row-actions form { display: inline; margin: 0; } /* --- Nav dropdown (Tools menu) ------------------------------------------ */ .nav-dropdown { position: relative; } .nav-dropdown > summary { list-style: none; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; gap: .3rem; user-select: none; } .nav-dropdown > summary::-webkit-details-marker { display: none; } .nav-dropdown > summary::after { content: "▾"; font-size: .7em; line-height: 1; } .nav-dropdown > summary:hover { color: var(--text); } .nav-dropdown[open] > summary { color: var(--text); } .nav-menu { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 230px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: .4rem; display: grid; gap: .1rem; z-index: 20; } .nav-menu a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--text-muted); } .nav-menu a:hover { background: var(--bg); color: var(--text); text-decoration: none; } /* --- Tools landing ------------------------------------------------------ */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .tool-card { display: block; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.4rem; box-shadow: var(--shadow); color: inherit; transition: transform .15s ease, border-color .15s ease; } .tool-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); text-decoration: none; } .tool-card h3 { margin: 0 0 .4rem; font-size: 1.2rem; } .tool-card p { color: var(--text-muted); margin: 0; font-size: .94rem; } .tool-card .tool-icon { font-size: 1.6rem; display: block; margin-bottom: .6rem; } /* --- Embedded tool surface ---------------------------------------------- */ .tool { max-width: 720px; margin-inline: auto; } .tool button { font: inherit; cursor: pointer; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: .55rem 1rem; } .tool button:hover { border-color: var(--accent); } .tool button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* String tuner: map its design-system variables onto the site's tokens. */ .tool-tuner { --color-background-secondary: var(--bg-elev); --color-text-secondary: var(--text-muted); --color-text-tertiary: color-mix(in srgb, var(--text-muted) 70%, transparent); --color-border-primary: var(--text-muted); --color-border-tertiary: var(--border); --border-radius-lg: 14px; --color-background-info: color-mix(in srgb, var(--accent) 18%, var(--bg-elev)); --color-border-info: var(--accent); --color-text-info: var(--accent); } /* --- Screen-reader-only ------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--text-muted); font-size: .9rem; margin-top: 2rem; }