/* Selah - shared site styles. visionOS-inspired: deep ambient backdrop, frosted-glass panels, soft depth, generous rounding, bottom glass nav. */ @font-face { font-family: "PlayfairDisplay"; src: url("PlayfairDisplay-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "PlayfairDisplay"; src: url("PlayfairDisplay-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } :root { --base: #0b0d12; --text: #f5f5f7; --text-secondary: rgba(235, 235, 245, 0.6); --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.18); --glass-bg-strong: rgba(255, 255, 255, 0.12); --radius: 28px; --maxw: 900px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background-color: var(--base); } body { margin: 0; min-height: 100vh; padding-bottom: 104px; /* clear the fixed bottom nav */ color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.6; /* Transparent so the fixed backdrop layers below (body::before/::after, which sit in the root stacking context at negative z-index) show through. The base colour lives on as the fallback. */ background-color: transparent; -webkit-font-smoothing: antialiased; } /* ---- Ambient backdrop ---- A tiled confetti pattern, blurred hard so the repeat dissolves into a soft wash of colour, then dimmed by a translucent layer so light text stays legible. Two fixed layers sit behind all content (negative z-index). */ body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; } body::before { inset: -10%; /* overscan so blurred edges never reveal the viewport edge */ z-index: -2; background: url("Media/icon_bg.webp") repeat; background-size: 360px 360px; filter: blur(24px) saturate(115%) brightness(0.92) hue-rotate(190deg); transform: translateZ(0); /* own compositing layer = smoother */ } body::after { inset: 0; background: radial-gradient(130% 110% at 50% -10%, rgba(10, 22, 14, 0.34), rgba(9, 18, 12, 0.54) 70%), rgba(10, 20, 13, 0.44); } .serif { font-family: "PlayfairDisplay", Georgia, serif; font-weight: 700; } /* ---- Layout ---- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ---- Bottom glass navigation (visionOS ornament style) ---- */ .nav { position: fixed; bottom: 20px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } .nav-inner { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; pointer-events: auto; padding: 8px 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px; backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .nav a.pill { text-decoration: none; color: var(--text); padding: 8px 18px; border-radius: 999px; font-size: 15px; transition: background 0.2s ease, transform 0.15s ease; } .nav a.pill:hover { background: var(--glass-bg-strong); transform: translateY(-1px); } .nav a.pill.active { background: rgba(255, 255, 255, 0.2); } /* ---- Hero ---- */ .hero { text-align: center; padding: 84px 0 36px; } .logo { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 18px; display: block; /* drop-shadow follows the thorns' transparency; box-shadow would paint a disc around the element's box instead. */ filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)); } .title { font-size: clamp(56px, 12vw, 92px); line-height: 1; margin: 6px 0 6px; } .subtitle { color: var(--text-secondary); font-size: 18px; letter-spacing: 0.3px; margin: 0; } .tagline { font-family: "PlayfairDisplay", serif; font-weight: 700; font-size: clamp(24px, 4vw, 34px); margin: 52px auto 0; max-width: 640px; line-height: 1.25; } .epigraph { font-family: "PlayfairDisplay", serif; font-style: italic; font-weight: 700; font-size: clamp(19px, 3.2vw, 24px); margin: 22px auto 0; max-width: 620px; } .epigraph .ref { display: block; font-style: normal; font-size: 15px; color: var(--text-secondary); margin-top: 8px; font-family: -apple-system, sans-serif; } /* ---- Glass cards ---- */ .card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); padding: 30px 32px; margin: 18px 0; } .card h2, .card h3 { margin-top: 0; } h1.page-title { font-family: "PlayfairDisplay", serif; font-weight: 700; font-size: clamp(34px, 7vw, 48px); text-align: center; margin: 56px 0 6px; } .lede { text-align: center; color: var(--text-secondary); max-width: 640px; margin: 0 auto 8px; } a { color: #9db8ff; } .secondary { color: var(--text-secondary); } strong { color: #fff; } /* ---- Apple-style pitch sections ---- */ .pitch { text-align: center; padding: 64px 0 28px; } .pitch h2 { font-family: "PlayfairDisplay", serif; font-weight: 700; font-size: clamp(30px, 5.5vw, 46px); line-height: 1.1; margin: 0 0 14px; } .pitch p { color: var(--text-secondary); font-size: clamp(17px, 2.4vw, 20px); max-width: 600px; margin: 0 auto; } /* ---- Media frames (image / video placeholders) ---- */ .media-frame { position: relative; margin: 30px 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .media-frame.video { aspect-ratio: 16 / 9; } .media-frame .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .placeholder-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 15px; letter-spacing: 0.4px; text-transform: uppercase; } /* ---- Toggle media: a reusable gallery that swaps between any mix of images and videos via radio pills. Generic & position-based (no per-item IDs in CSS): the Nth checked radio reveals the Nth .media-item and lights the Nth pill, so a section just needs matching counts of radio / item / pill in source order. Each item keeps its own aspect (its own box). ---- */ .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-stage { margin-top: 30px; } .toggle-media .media-item { display: none; margin: 0; } /* Inside a toggle, media flows to its own intrinsic size rather than being cropped into a fixed-ratio frame — so a 16:9 video and a tall screenshot each get a box that fits them. */ .toggle-stage .media-frame { aspect-ratio: auto; margin: 0; } .toggle-stage .media { position: static; width: 100%; height: auto; display: block; } /* A placeholder has no flowing media to give it height, so keep a box for it. */ .toggle-stage .media-frame:has(.placeholder-label) { aspect-ratio: 16 / 9; } /* Reveal the item matching the checked radio (matched by position). */ .toggle-media:has(.toggle-input:nth-of-type(1):checked) .media-item:nth-of-type(1), .toggle-media:has(.toggle-input:nth-of-type(2):checked) .media-item:nth-of-type(2), .toggle-media:has(.toggle-input:nth-of-type(3):checked) .media-item:nth-of-type(3), .toggle-media:has(.toggle-input:nth-of-type(4):checked) .media-item:nth-of-type(4), .toggle-media:has(.toggle-input:nth-of-type(5):checked) .media-item:nth-of-type(5), .toggle-media:has(.toggle-input:nth-of-type(6):checked) .media-item:nth-of-type(6) { display: block; } .toggle-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; } /* A lone pill is noise — hide the bar until there are at least two choices. */ .toggle-pills:not(:has(.pill ~ .pill)) { display: none; } .toggle-pills .pill { cursor: pointer; user-select: none; padding: 8px 22px; border-radius: 999px; font-size: 15px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); transition: background 0.2s ease, transform 0.15s ease; } .toggle-pills .pill:hover { background: var(--glass-bg-strong); transform: translateY(-1px); } /* Light the pill matching the checked radio (matched by position). */ .toggle-media:has(.toggle-input:nth-of-type(1):checked) .toggle-pills .pill:nth-of-type(1), .toggle-media:has(.toggle-input:nth-of-type(2):checked) .toggle-pills .pill:nth-of-type(2), .toggle-media:has(.toggle-input:nth-of-type(3):checked) .toggle-pills .pill:nth-of-type(3), .toggle-media:has(.toggle-input:nth-of-type(4):checked) .toggle-pills .pill:nth-of-type(4), .toggle-media:has(.toggle-input:nth-of-type(5):checked) .toggle-pills .pill:nth-of-type(5), .toggle-media:has(.toggle-input:nth-of-type(6):checked) .toggle-pills .pill:nth-of-type(6) { background: rgba(255, 255, 255, 0.2); } .toggle-media:has(.toggle-input:nth-of-type(1):focus-visible) .toggle-pills .pill:nth-of-type(1), .toggle-media:has(.toggle-input:nth-of-type(2):focus-visible) .toggle-pills .pill:nth-of-type(2), .toggle-media:has(.toggle-input:nth-of-type(3):focus-visible) .toggle-pills .pill:nth-of-type(3), .toggle-media:has(.toggle-input:nth-of-type(4):focus-visible) .toggle-pills .pill:nth-of-type(4), .toggle-media:has(.toggle-input:nth-of-type(5):focus-visible) .toggle-pills .pill:nth-of-type(5), .toggle-media:has(.toggle-input:nth-of-type(6):focus-visible) .toggle-pills .pill:nth-of-type(6) { outline: 2px solid #9db8ff; outline-offset: 2px; } /* ---- Buttons ---- */ .btn { display: inline-block; text-decoration: none; color: var(--text); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); padding: 14px 28px; border-radius: 999px; font-size: 16px; font-weight: 500; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform 0.15s ease, background 0.2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.2); } .cta { text-align: center; margin: 56px 0 8px; } .cta .note { color: var(--text-secondary); font-size: 14px; margin-top: 12px; } /* ---- Footer ---- */ .footer { text-align: center; color: var(--text-secondary); font-size: 14px; padding: 56px 24px 10px; max-width: var(--maxw); margin: 0 auto; } .footer a { color: var(--text-secondary); } .footer p:first-child a { font-size: 18px; } /* Liquid Glass displacement removed: the feDisplacementMap warped the straight edges of large cards (jagged top border). Cards/nav now use the clean frosted-glass blur defined above. The inert SVG defs stay hidden. */ .liquid-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---- Help: keyboard shortcuts table ---- */ .shortcuts { width: 100%; border-collapse: collapse; margin-top: 8px; } .shortcuts th, .shortcuts td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--glass-border); vertical-align: top; } .shortcuts th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .shortcuts td.key { white-space: nowrap; color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .shortcuts tr:last-child td { border-bottom: none; } /* ---- Help page ---- */ .help-card > section { margin-top: 32px; } .help-card > .toc { margin-bottom: 4px; } .ui { font-weight: 700; color: #ff8a8a; } .fn { color: #9db8ff; font-weight: 600; } .help-ic { height: 26px; width: auto; vertical-align: middle; border-radius: 6px; margin: 0 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .help-shot { display: block; max-width: 320px; width: 100%; height: auto; margin: 14px auto; border-radius: 12px; border: 1px solid var(--glass-border); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); } .help-shot.lg { max-width: 540px; } .help-btn { display: block; height: 88px; width: auto; margin: 12px auto; border-radius: 12px; border: 1px solid var(--glass-border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .toc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); margin: 16px 0 6px; } .toc h3:first-of-type { margin-top: 0; } .toc ul { margin: 0; padding-left: 18px; } .toc li { margin: 3px 0; } .toc a { color: #9db8ff; text-decoration: none; } .toc a:hover { text-decoration: underline; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .sec-head h2 { margin: 0; } .totop { font-size: 13px; font-weight: 400; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .totop:hover { color: #fff; } .qa { margin-top: 22px; } .qa:first-of-type { margin-top: 14px; } .qa h4 { font-size: 18px; margin: 0 0 6px; } .qa p, .qa li { color: var(--text-secondary); } .qa p { margin: 0 0 10px; } .qa ol, .qa ul { margin: 0 0 10px; padding-left: 22px; } .qa li { margin: 4px 0; }