:root { /* Typography */ --magt-font-serif: "Fraunces", "Libre Baskerville", Georgia, serif; --magt-font-sans: "IBM Plex Sans", system-ui, sans-serif; --magt-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Scale */ --magt-space-1: .25rem; --magt-space-2: .5rem; --magt-space-3: .75rem; --magt-space-4: 1rem; --magt-space-5: 1.5rem; --magt-space-6: 2rem; --magt-space-7: 3rem; --magt-space-8: 4.5rem; --magt-radius-sm: .55rem; --magt-radius-md: .9rem; --magt-radius-lg: 1.25rem; --magt-shadow: 0 16px 45px rgb(0 0 0 / .28); --magt-border-width: 1px; --magt-shell: 1180px; /* Motion */ --magt-motion-fast: 160ms; --magt-motion-base: 320ms; --magt-motion-slow: 620ms; /* Semantic colour slots; overridden by themes */ --magt-bg: #0c1513; --magt-bg-alt: #111d1a; --magt-panel: #172622; --magt-panel-strong: #1d302a; --magt-text: #f2efe8; --magt-text-soft: #d4d4cc; --magt-muted: #9eaea6; --magt-line: #2b443a; --magt-line-strong: #456b5b; --magt-primary: #5e927d; --magt-primary-hover: #74a28f; --magt-primary-contrast: #0a120f; --magt-accent: #d8a15a; --magt-accent-soft: #efc982; --magt-focus: #f3d69a; --magt-grid-minor: rgb(255 255 255 / .035); --magt-grid-major: rgb(255 255 255 / .06); --magt-glow: rgb(216 161 90 / .10); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--magt-bg); color: var(--magt-text); font-family: var(--magt-font-sans); line-height: 1.65; } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; } :focus-visible { outline: 3px solid var(--magt-focus); outline-offset: 4px; } .magt-shell { width: min(calc(100% - 2rem), var(--magt-shell)); margin-inline: auto; } .magt-section { padding-block: var(--magt-space-8); border-top: var(--magt-border-width) solid var(--magt-line); } .magt-section--alt { background: var(--magt-bg-alt); } .magt-serif { font-family: var(--magt-font-serif); } .magt-sans { font-family: var(--magt-font-sans); } .magt-mono { font-family: var(--magt-font-mono); } .magt-eyebrow, .magt-kicker { margin: 0 0 var(--magt-space-4); color: var(--magt-accent); font: 600 .75rem var(--magt-font-mono); letter-spacing: .17em; text-transform: uppercase; } .magt-display { margin: 0; font-family: var(--magt-font-serif); font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; } .magt-display em { color: var(--magt-accent-soft); font-style: italic; } .magt-heading { margin: 0 0 var(--magt-space-4); font-family: var(--magt-font-serif); font-size: clamp(2rem, 4vw, 4rem); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; } .magt-lead { max-width: 48rem; color: var(--magt-text-soft); font-size: clamp(1.1rem, 2vw, 1.45rem); } /* Theme switching: or any descendant container with data-magt-theme. */ [data-magt-theme="magt"] { --magt-bg: #0b1513; --magt-bg-alt: #101d1a; --magt-panel: #172724; --magt-panel-strong: #1c302b; --magt-text: #f4f1e8; --magt-text-soft: #d8d5ca; --magt-muted: #a8b8b0; --magt-line: #29433a; --magt-line-strong: #3c6656; --magt-primary: #5f8f7d; --magt-primary-hover: #72a08d; --magt-primary-contrast: #09110e; --magt-accent: #d8a15a; --magt-accent-soft: #efc982; --magt-focus: #f2d294; --magt-grid-minor: rgb(255 255 255 / .035); --magt-grid-major: rgb(255 255 255 / .06); --magt-glow: rgb(216 161 90 / .10); } [data-magt-theme="magtk"] { --magt-bg: #10161b; --magt-bg-alt: #151d24; --magt-panel: #1b2630; --magt-panel-strong: #22313d; --magt-text: #edf2f5; --magt-text-soft: #d0d9df; --magt-muted: #9fb0bc; --magt-line: #314350; --magt-line-strong: #506b7d; --magt-primary: #6f91a8; --magt-primary-hover: #83a6bd; --magt-primary-contrast: #0e151a; --magt-accent: #91a6b6; --magt-accent-soft: #b9c7d0; --magt-focus: #b9d4e5; --magt-grid-minor: rgb(160 190 210 / .035); --magt-grid-major: rgb(160 190 210 / .065); --magt-glow: rgb(111 145 168 / .12); } [data-magt-theme="ambr0wl"] { --magt-bg: #161613; --magt-bg-alt: #1d1d18; --magt-panel: #24231d; --magt-panel-strong: #2b2a22; --magt-text: #f3dfb0; --magt-text-soft: #d9c69d; --magt-muted: #a8946a; --magt-line: #554522; --magt-line-strong: #7a5f25; --magt-primary: #9b7a32; --magt-primary-hover: #b08b39; --magt-primary-contrast: #17140d; --magt-accent: #ffb000; --magt-accent-soft: #ffd16a; --magt-focus: #ffd16a; --magt-grid-minor: rgb(255 176 0 / .04); --magt-grid-major: rgb(255 176 0 / .08); --magt-glow: rgb(255 176 0 / .14); } [data-magt-theme="anovi"] { --magt-bg: #160f0f; --magt-bg-alt: #1d1414; --magt-panel: #281a1a; --magt-panel-strong: #332020; --magt-text: #f2e7d9; --magt-text-soft: #d8c8b6; --magt-muted: #ad9986; --magt-line: #4f3030; --magt-line-strong: #704343; --magt-primary: #7d4e4e; --magt-primary-hover: #956060; --magt-primary-contrast: #160d0d; --magt-accent: #a16d4a; --magt-accent-soft: #c79a74; --magt-focus: #dfb58f; --magt-grid-minor: rgb(199 154 116 / .028); --magt-grid-major: rgb(199 154 116 / .05); --magt-glow: rgb(101 21 21 / .16); } .magt-bg-grid { background-color: var(--magt-bg); background-image: linear-gradient(var(--magt-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--magt-grid-major) 1px, transparent 1px), linear-gradient(var(--magt-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--magt-grid-minor) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 18px 18px, 18px 18px; } .magt-bg-gradient { background: radial-gradient(circle at 20% 0%, var(--magt-glow), transparent 42%), linear-gradient(135deg, var(--magt-bg-alt), var(--magt-bg)); } .magt-corners { position: relative; } .magt-corners::before, .magt-corners::after { content: ""; position: absolute; width: 2rem; height: 2rem; pointer-events: none; opacity: .55; } .magt-corners::before { top: 1rem; left: 1rem; border-top: 1px solid var(--magt-accent); border-left: 1px solid var(--magt-accent); } .magt-corners::after { right: 1rem; bottom: 1rem; border-right: 1px solid var(--magt-accent); border-bottom: 1px solid var(--magt-accent); } .magt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .72rem 1.05rem; border: 1px solid var(--magt-line-strong); border-radius: var(--magt-radius-md); background: transparent; color: var(--magt-text); text-decoration: none; cursor: pointer; transition: background-color var(--magt-motion-fast), border-color var(--magt-motion-fast), transform var(--magt-motion-fast); } .magt-btn:hover { border-color: var(--magt-primary); transform: translateY(-1px); } .magt-btn--primary { border-color: var(--magt-primary); background: var(--magt-primary); color: var(--magt-primary-contrast); font-weight: 600; } .magt-btn--primary:hover { border-color: var(--magt-primary-hover); background: var(--magt-primary-hover); } .magt-btn--accent { border-color: color-mix(in srgb, var(--magt-accent) 55%, transparent); color: var(--magt-accent-soft); } .magt-btn--ghost { border-color: transparent; color: var(--magt-muted); } .magt-divider { display: flex; align-items: center; gap: 1rem; width: 100%; margin-block: var(--magt-space-6); } .magt-divider::before, .magt-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--magt-accent) 75%, transparent), transparent ); box-shadow: 0 0 12px var(--magt-glow); } .magt-divider__diamond { width: .55rem; height: .55rem; border: 1px solid var(--magt-accent); background: color-mix(in srgb, var(--magt-accent) 10%, transparent); transform: rotate(45deg); } .magt-divider--solid::before, .magt-divider--solid::after { background: var(--magt-line-strong); box-shadow: none; } .magt-light-streak { display: flex; align-items: center; gap: 1rem; } .magt-light-streak::before, .magt-light-streak::after { content: ""; height: 1px; flex: 1; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--magt-accent) 14%, transparent) 20%, color-mix(in srgb, var(--magt-accent-soft) 85%, transparent) 50%, color-mix(in srgb, var(--magt-accent) 14%, transparent) 80%, transparent ); box-shadow: 0 0 14px var(--magt-glow); } .magt-light-streak__label { color: var(--magt-text-soft); font: 500 .72rem var(--magt-font-mono); letter-spacing: .16em; text-transform: uppercase; } .magt-card { display: flex; flex-direction: column; min-height: 14rem; padding: var(--magt-space-5); border: 1px solid var(--magt-line); border-radius: var(--magt-radius-lg); background: var(--magt-panel); box-shadow: var(--magt-shadow); } .magt-card--accent { border-left: 3px solid var(--magt-accent); } .magt-card--outline { background: transparent; box-shadow: none; } .magt-card__tag, .magt-tag { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; color: var(--magt-accent-soft); font: 600 .68rem var(--magt-font-mono); letter-spacing: .08em; text-transform: uppercase; } .magt-card__tag::before, .magt-tag::before { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--magt-accent); } .magt-card__title { margin: var(--magt-space-4) 0 var(--magt-space-3); font-family: var(--magt-font-serif); font-size: 1.45rem; font-weight: 400; line-height: 1.25; } .magt-card__body { color: var(--magt-text-soft); } .magt-flip { min-height: 16rem; perspective: 1200px; cursor: pointer; } .magt-flip__inner { position: relative; min-height: inherit; height: 100%; transform-style: preserve-3d; transition: transform var(--magt-motion-slow) cubic-bezier(.2,.7,.2,1); } .magt-flip.is-flipped .magt-flip__inner { transform: rotateY(180deg); } .magt-flip__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--magt-space-5); border: 1px solid var(--magt-line); border-radius: var(--magt-radius-lg); background: var(--magt-panel); backface-visibility: hidden; box-shadow: var(--magt-shadow); } .magt-flip__front { justify-content: space-between; } .magt-flip__back { transform: rotateY(180deg); background: var(--magt-panel-strong); border-color: var(--magt-line-strong); } .magt-flip__hint { color: var(--magt-muted); font: .72rem var(--magt-font-mono); } .magt-flip__question { margin-top: auto; color: var(--magt-accent-soft); font-weight: 600; } .magt-accordion { border-top: 1px solid var(--magt-line); } .magt-accordion__item { border-bottom: 1px solid var(--magt-line); } .magt-accordion__trigger { display: flex; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 0; border: 0; background: transparent; color: var(--magt-text); text-align: left; cursor: pointer; } .magt-accordion__trigger::after { content: "+"; color: var(--magt-accent); font-family: var(--magt-font-mono); } .magt-accordion__item.is-open .magt-accordion__trigger::after { content: "−"; } .magt-accordion__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--magt-motion-base) ease, opacity var(--magt-motion-base) ease; } .magt-accordion__item.is-open .magt-accordion__panel { grid-template-rows: 1fr; opacity: 1; } .magt-accordion__panel-inner { min-height: 0; overflow: hidden; } .magt-accordion__content { max-width: 48rem; padding: 0 0 1.25rem; color: var(--magt-text-soft); } .magt-form { display: grid; gap: var(--magt-space-4); } .magt-field { display: grid; gap: .35rem; } .magt-field__label { color: var(--magt-text-soft); font-size: .9rem; } .magt-input, .magt-textarea, .magt-select { width: 100%; padding: .75rem .8rem; border: 1px solid var(--magt-line); border-radius: var(--magt-radius-sm); background: var(--magt-panel); color: var(--magt-text); } .magt-input:focus, .magt-textarea:focus, .magt-select:focus { border-color: var(--magt-primary); } .magt-cursor { display: inline-block; width: .55em; height: 1em; margin-left: .12em; vertical-align: -.12em; background: var(--magt-accent); animation: magt-blink 1s steps(1,end) infinite; } @keyframes magt-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .magt-cursor { animation: none; } }