/* ══════════════════════════════════════════════════════════════ Geodineum Iris — Visual Identity CSS Child theme of gTemplate ══════════════════════════════════════════════════════════════ */ :root { /* Colors — overridden by dynamic CSS from Customizer */ --iris-gold: #c5a059; --iris-gold-light: #d4aa6a; --iris-gold-soft: #8d7944; --iris-bg: #060504; --iris-bg-panel: rgba(6,5,4,0.94); --iris-panel-border-20: rgba(197,160,89,0.2); --iris-panel-border-30: rgba(197,160,89,0.3); --iris-panel-border-40: rgba(197,160,89,0.4); --iris-hud-color: #c5a059; --iris-hud-35: rgba(197,160,89,0.35); /* Typography — overridden by dynamic CSS from Customizer */ --iris-font: 'Josefin Sans', sans-serif; --iris-heading-font: 'Josefin Sans', sans-serif; --iris-panel-text: #c5a059; --iris-panel-heading: #d4aa6a; --iris-panel-link: #d4aa6a; --iris-panel-font-size: 13px; --iris-panel-line-height: 1.9; } /* ── Light theme (site toggle sets data-theme="light" on ) ── Attribute selector outranks both the base :root and the Customizer's runtime :root emission, so light wins whenever chosen. The toroid's own colors live in iris.js and re-tint via the geo:themechange event. */ :root[data-theme="light"] { --iris-gold: #8a6a1f; --iris-gold-light: #6b5416; --iris-gold-soft: #b6a06a; --iris-bg: #ffffff; --iris-bg-panel: rgba(255, 255, 255, 0.92); --iris-panel-border-20: rgba(138, 106, 31, 0.25); --iris-panel-border-30: rgba(138, 106, 31, 0.40); --iris-panel-border-40: rgba(138, 106, 31, 0.55); --iris-hud-color: #6b5416; --iris-hud-35: rgba(107, 84, 22, 0.40); --iris-panel-text: #2a2620; --iris-panel-heading: #6b5416; --iris-panel-link: #8a6a1f; --iris-read: #5f4a12; --iris-read-dim: #7c6428; } /* Reading surfaces: flip the dark scrim to a light veil and the hardcoded bright-gold emphasis to a dark gold so text stays legible on white. */ :root[data-theme="light"] #iris-scrim { background: rgba(255, 255, 255, 0.86); } :root[data-theme="light"] .idoc-body em, :root[data-theme="light"] .idoc-mono, :root[data-theme="light"] .idoc-pillar-k, :root[data-theme="light"] .idoc-teaser-tag, :root[data-theme="light"] .idoc-dim { color: #6b5416; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ── geodineum.com mobile/theme polish — iris.css cascades after the gTemplate sheets, so these win without editing shared CSS (keeps nierto untouched) ── */ /* Long-press surfaces the geo-term tooltip, not the OS copy menu. Inputs stay selectable. */ .iris-body, .iris-doc, .geo, #content-panel, .post-expanded-overlay { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* Light-mode gold darkened so gold TEXT is readable on white (gTemplate's is too pale). */ :root[data-theme="light"] { --gold: #6f5820; --gold-soft: #6b5a2c; } /* Remap the remaining hardcoded pale gold (#f6dca0) so those roles read on white too. */ :root[data-theme="light"] .idoc-substrate b, :root[data-theme="light"] .idoc-comp-k, :root[data-theme="light"] .idoc-comp-line b, :root[data-theme="light"] .idoc-links a, :root[data-theme="light"] .idoc-teaser-sub { color: #6b5416; } /* Theme toggle chip: solid gold, visible on any page/ground (was off-white on white = invisible, which read as "the toggle only works on the front page"). */ .geo-theme-toggle { background: var(--gold); border-color: var(--gold); color: var(--bg-0); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); } body { background: var(--iris-bg); color: var(--iris-gold); font-family: var(--iris-font); overflow: hidden; /* Native pointer restored: the custom #cursor dot vanished on zoomed-in sections, leaving no cursor at all. A reliable OS cursor everywhere beats a flaky bespoke one. (#cursor disabled below; revert both to restore it.) */ cursor: auto; } /* Hide parent theme default elements we don't need */ .site-logo, .site-footer, .gtemplate-standalone { display: none !important; } /* ── Custom Cursor (disabled — see body{cursor} note above) ── */ #cursor { display: none; position: fixed; width: 6px; height: 6px; background: var(--iris-gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, opacity 0.2s; } #cursor.hovering { width: 32px; height: 32px; background: transparent; border: 1px solid var(--iris-gold); opacity: 0.6; } /* ── Three.js Canvas ──────────────────────────────────────── */ #canvas-container { position: fixed; width: 100%; height: 100%; } /* ── Texture Overlays ─────────────────────────────────────── */ .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px ); } .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at center, transparent 40%, rgba(4,3,2,0.7) 100%); } /* ── HUD Overlay ──────────────────────────────────────────── */ .hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; padding: 36px 44px; display: flex; flex-direction: column; justify-content: space-between; } .hud-row { display: flex; justify-content: space-between; align-items: flex-start; } .hud-label { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--iris-hud-color); opacity: 0.82; font-weight: 300; } /* Corner tick marks */ .corner { width: 18px; height: 18px; opacity: 0.35; } .corner-tl { border-top: 1px solid var(--iris-hud-35); border-left: 1px solid var(--iris-hud-35); } .corner-tr { border-top: 1px solid var(--iris-hud-35); border-right: 1px solid var(--iris-hud-35); } .corner-bl { border-bottom: 1px solid var(--iris-hud-35); border-left: 1px solid var(--iris-hud-35); } .corner-br { border-bottom: 1px solid var(--iris-hud-35); border-right: 1px solid var(--iris-hud-35); } /* ── Center Section Label ─────────────────────────────────── */ #section-display { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 20; } #section-display .enter-label { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; opacity: 0.6; font-weight: 300; margin-bottom: 12px; } #section-display h1 { font-size: 36px; font-weight: 100; letter-spacing: 12px; text-transform: uppercase; color: var(--iris-panel-heading); font-family: var(--iris-heading-font); } /* ── Section Index Ring ───────────────────────────────────── */ #section-index { position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; pointer-events: none; } .section-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--iris-gold); opacity: 0.2; transition: opacity 0.3s, transform 0.3s; } .section-dot.active { opacity: 0.9; transform: scale(1.5); } /* ── Content Panel ────────────────────────────────────────── */ #content-panel { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } #content-panel.visible { opacity: 1; pointer-events: all; } .panel-inner { position: relative; width: min(780px, 90vw); max-height: 80vh; overflow-y: auto; border: 1px solid var(--iris-panel-border-20); background: var(--iris-bg-panel); backdrop-filter: blur(12px); padding: 56px 60px; scrollbar-width: thin; scrollbar-color: var(--iris-panel-border-30) transparent; } .panel-inner::-webkit-scrollbar { width: 3px; } .panel-inner::-webkit-scrollbar-thumb { background: var(--iris-panel-border-30); } /* Panel corner ticks */ .panel-inner::before, .panel-inner::after { content: ''; position: absolute; width: 20px; height: 20px; } .panel-inner::before { top: -1px; left: -1px; border-top: 1px solid var(--iris-panel-border-40); border-left: 1px solid var(--iris-panel-border-40); } .panel-inner::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--iris-panel-border-40); border-right: 1px solid var(--iris-panel-border-40); } .panel-section-id { font-size: 8px; letter-spacing: 6px; text-transform: uppercase; opacity: 0.35; font-weight: 300; margin-bottom: 6px; } .panel-title { font-size: 38px; font-weight: 100; letter-spacing: 10px; text-transform: uppercase; color: var(--iris-panel-heading); font-family: var(--iris-heading-font); margin-bottom: 36px; line-height: 1; } .panel-divider { width: 40px; height: 1px; background: var(--iris-panel-border-40); margin-bottom: 32px; } .panel-body { font-size: var(--iris-panel-font-size); line-height: var(--iris-panel-line-height); letter-spacing: 1px; font-weight: 300; opacity: 0.7; color: var(--iris-panel-text); } /* Style WordPress content rendered inside panels */ .panel-body p { margin-bottom: 1em; } .panel-body h2, .panel-body h3 { color: var(--iris-panel-heading); font-family: var(--iris-heading-font); font-weight: 300; letter-spacing: 3px; margin: 1.5em 0 0.5em; } .panel-body a { color: var(--iris-panel-link); text-decoration: underline; text-underline-offset: 3px; } .panel-body a:hover { opacity: 0.8; } .panel-body img { max-width: 100%; height: auto; margin: 1em 0; opacity: 0.9; } .panel-body ul, .panel-body ol { padding-left: 1.5em; margin-bottom: 1em; } .panel-body li { margin-bottom: 0.3em; } /* ── Back Button ──────────────────────────────────────────── */ #back-btn { position: fixed; top: 40px; /* Clear the fixed top-left .iris-logo (2vmin offset + 8vmin wide) so the Return button never sits under it. vmin, not px, tracks the logo size. */ left: 15vmin; z-index: 60; display: flex; align-items: center; gap: 12px; font-family: var(--iris-font); font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: var(--iris-hud-color); opacity: 0; pointer-events: none; cursor: none; transition: opacity 0.4s ease; background: none; border: none; padding: 0; } #back-btn.visible { opacity: 0.6; pointer-events: all; } #back-btn:hover { opacity: 1 !important; } #back-btn svg { width: 16px; height: 16px; stroke: var(--iris-hud-color); fill: none; stroke-width: 1; stroke-linecap: round; } /* ── Mobile Navigation Pointers ───────────────────────────── */ #mobile-nav { display: none; position: fixed; inset: 0; z-index: 15; pointer-events: none; transition: opacity 0.4s ease; } #mobile-nav.hidden { opacity: 0; pointer-events: none !important; } .mobile-nav-svg { position: fixed; inset: 0; pointer-events: none; } .mobile-nav-svg line { stroke: var(--iris-hud-color); stroke-width: 0.5; stroke-dasharray: 3 3; opacity: 0.2; } .mobile-nav-label { position: fixed; transform: translate(-50%, -50%); font-family: var(--iris-font); font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: var(--iris-hud-color); opacity: 0.5; background: none; border: none; padding: 10px 14px; pointer-events: all; cursor: pointer; white-space: nowrap; } .mobile-nav-label:active { opacity: 1; } .mnl-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--iris-hud-color); margin-right: 5px; vertical-align: middle; opacity: 0.6; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { body { cursor: auto; } #cursor { display: none; } #mobile-nav { display: block; } .hud { padding: 20px 24px; } .hud-label { font-size: 7px; letter-spacing: 3px; } .panel-inner { padding: 32px 28px; } .panel-title { font-size: 24px; letter-spacing: 6px; } #section-display h1 { font-size: 24px; letter-spacing: 8px; } /* On mobile the top-left logo IS the back affordance (tapping it returns), so hide the Return / Navigation buttons that only overlapped it and looked cluttered. */ #back-btn, #iris-dock-return { display: none !important; } /* Nav labels: a readable chip that stands off the toroid (was 7px / 0.5 opacity, no background → invisible against the torus). */ .mobile-nav-label { font-size: 9px; opacity: 0.95; padding: 6px 11px; background: var(--iris-bg-panel); border: 1px solid var(--iris-panel-border-30); border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .mobile-nav-svg line { opacity: 0.35; } /* Standalone-page hero h1 was unclamped (.geo h1 = --t-9 6.6rem ≈ 106px on a phone). */ .geo h1 { font-size: var(--t-7); line-height: 1.05; } } @media (max-width: 400px) { .geo h1 { font-size: 2.35rem; } } /* ══════════════════════════════════════════════════════════════ EXPLORE MODE — toroid shrinks (golden), page scrolls over it ────────────────────────────────────────────────────────────── Golden-ratio modular scale (φ = 1.618). Spacing and type both step by φ so every element relates to the next by the same proportion — the geometry we sell, applied to the page itself. ══════════════════════════════════════════════════════════════ */ :root { --phi: 1.618; /* Spacing scale (φ-stepped, px) */ --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px; --s6: 89px; --s7: 144px; /* Type scale (φ-stepped, rem). Floor raised one notch — body/eyebrow/label land comfortably above "reach for your glasses"; display sizes nudged only gently so the heroes don't balloon. One scale, every .idoc surface. */ --f1: 0.98rem; --f2: 1.14rem; --f3: 1.42rem; --f4: 1.78rem; --f5: 2.2rem; --f6: 2.85rem; --f7: 3.7rem; /* Radiant gold for reading (brighter than the chrome gold) */ --iris-read: #e9c878; --iris-read-dim: #cfa856; } body.iris-docked { overflow-y: auto; overflow-x: hidden; cursor: auto; } body.iris-docked #cursor { display: none; } /* The toroid stays full-screen and fixed; the document scrolls over it, dimmed by the scrim. No band, no per-frame resize, no scene transform. */ body.iris-docked .hud { pointer-events: none; } /* Translucent veil between the toroid (z auto) and the document (z2). JS fades opacity 0→1 on explore; the 0.7 dim lives in the colour. */ #iris-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(8, 6, 5, 0.7); opacity: 0; pointer-events: none; } /* While docked, let the scrim take clicks so tapping the dim area beside/below the reading column returns to the toroid (see the exitDock click handlers). */ body.iris-docked #iris-scrim { pointer-events: auto; } /* ── "Explore Geodineum" enter affordance ─────────────────── */ #iris-enter { position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: var(--iris-hud-color); font-family: var(--iris-font); opacity: 1; transition: opacity 0.3s ease; } #iris-enter:hover { opacity: 1; } .iris-enter-label { font-size: 10px; letter-spacing: 5px; text-transform: uppercase; font-weight: 500; /* Launch red so it reads in both themes (was near-invisible HUD grey) */ color: #ff3b30; text-shadow: 0 0 10px rgba(255, 59, 48, 0.45); } /* ── Launch countdown: fixed above the enter affordance, launch-red ── */ #launch-eta { position: fixed; bottom: 118px; left: 50%; transform: translateX(-50%); z-index: 26; font-family: var(--iris-font); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; color: #ff3b30; text-shadow: 0 0 10px rgba(255, 59, 48, 0.45); font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity 0.3s ease; } #launch-eta .eta-clock { font-weight: 600; } #launch-eta.launched { font-weight: 700; letter-spacing: 4px; } /* Hide while docked in the scroll narrative (mirrors #iris-enter) */ body.iris-docked #launch-eta { opacity: 0; pointer-events: none; } @media (max-width: 560px) { #launch-eta { bottom: 96px; font-size: 9px; letter-spacing: 1.5px; } } /* A bronze down-arrow beating like a heart: the subtle nudge that there is more below the fold (the Ecosystem Launch scroll narrative). */ #iris-enter svg { width: 32px; height: 32px; stroke: var(--iris-gold-light); fill: none; stroke-width: 2; stroke-linecap: round; transform-origin: center; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5)); animation: iris-heartbeat 1.5s ease-in-out infinite; } #iris-enter:hover svg { stroke: var(--iris-gold-light); } @keyframes iris-heartbeat { 0%, 45%, 100% { transform: scale(1) translateY(0); opacity: 0.9; } 12% { transform: scale(1.30) translateY(2px); opacity: 1; } 24% { transform: scale(1.00) translateY(0); opacity: 0.92; } 33% { transform: scale(1.16) translateY(1px); opacity: 0.98; } } @media (prefers-reduced-motion: reduce) { #iris-enter svg { animation: none; } } /* ── "Navigation" return affordance (while docked) ────────── */ #iris-dock-return { position: fixed; top: 26px; left: 28px; z-index: 60; display: flex; align-items: center; gap: 11px; background: rgba(6,5,4,0.7); border: 1px solid var(--iris-panel-border-20); padding: 9px 16px 9px 12px; cursor: pointer; font-family: var(--iris-font); font-size: 8px; letter-spacing: 5px; text-transform: uppercase; color: var(--iris-hud-color); opacity: 0; pointer-events: none; backdrop-filter: blur(8px); transition: opacity 0.3s ease, background 0.2s ease; } #iris-dock-return:hover { opacity: 1 !important; background: rgba(6,5,4,0.92); } #iris-dock-return svg { width: 14px; height: 14px; stroke: var(--iris-hud-color); fill: none; stroke-width: 1; stroke-linecap: round; } /* ══════════════════════════════════════════════════════════════ SCROLL DOCUMENT — radiant gold, golden-ratio rhythm The toroid (fixed, full-screen) is the hero; this document scrolls up over it. Background is solid so reading is clean once you pass the hero; a top gradient melts the first section into the toroid. ══════════════════════════════════════════════════════════════ */ .iris-doc { position: relative; z-index: 2; /* above the scrim — toroid shows through */ background: transparent; /* the scrim provides the dim */ color: var(--iris-read); font-family: var(--iris-font); /* Josefin, not the browser default */ cursor: auto; } .iris-doc[hidden] { display: none; } /* Narrative links: previously only .idoc-links a was styled, so links inside body/teaser/footer/component copy fell through to browser-default blue. */ .iris-doc a { color: var(--iris-panel-link); text-decoration: none; border-bottom: 1px solid rgba(233, 200, 120, 0.3); transition: color 0.2s ease, border-color 0.2s ease; } .iris-doc a:hover, .iris-doc a:focus-visible { color: #fff0cc; border-bottom-color: rgba(246, 220, 160, 0.9); } /* The first heading sits below the toroid's upper bulk; the toroid stays visible above and behind it through the scrim. */ .idoc-hero { padding-top: 46vh; } .iris-doc-inner { /* φ-proportioned column: ~38em ≈ golden reading measure */ max-width: 41em; margin: 0 auto; padding: 0 var(--s4) var(--s7); } .iris-doc section { padding: var(--s6) 0; border-bottom: 1px solid rgba(233,200,120,0.14); } .iris-doc section:last-of-type { border-bottom: 0; } /* Reveal-on-scroll */ .iris-reveal { opacity: 0; transform: translateY(var(--s3)); transition: opacity 0.8s ease, transform 0.8s ease; } .iris-reveal.in { opacity: 1; transform: translateY(0); } .idoc-eyebrow { font-size: var(--f1); letter-spacing: 0.3em; text-transform: uppercase; color: var(--iris-read-dim); margin-bottom: var(--s3); } .idoc-h2 { font-family: var(--iris-heading-font); font-weight: 400; font-size: var(--f7); line-height: 1.12; letter-spacing: 0.01em; color: var(--iris-read); text-shadow: 0 0 28px rgba(233,200,120,0.18); margin-bottom: var(--s4); } .idoc-h3 { font-family: var(--iris-heading-font); font-weight: 400; font-size: var(--f5); line-height: 1.2; letter-spacing: 0.02em; color: var(--iris-read); text-shadow: 0 0 22px rgba(233,200,120,0.16); margin-bottom: var(--s3); } .idoc-dim { color: var(--iris-read); opacity: 0.62; } .idoc-lede { font-size: var(--f4); line-height: 1.5; font-weight: 300; color: var(--text); margin-bottom: var(--s2); } .idoc-body { font-size: var(--f3); line-height: 1.62; /* φ-ish leading */ font-weight: 400; color: var(--text); margin-bottom: var(--s2); } .idoc-body em { font-style: normal; color: #f6dca0; font-weight: 500; } .idoc-mono { font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace; font-size: 0.92em; color: #f6dca0; letter-spacing: 0; } /* Pillars — three across, golden gap */ .idoc-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin-top: var(--s5); } .idoc-pillar { border: 1px solid rgba(233,200,120,0.2); padding: var(--s3) var(--s3) var(--s4); position: relative; } .idoc-pillar::before { content: ''; position: absolute; top: -1px; left: -1px; width: var(--s2); height: var(--s2); border-top: 1px solid rgba(233,200,120,0.45); border-left: 1px solid rgba(233,200,120,0.45); } .idoc-pillar-k { font-size: var(--f1); letter-spacing: 0.28em; text-transform: uppercase; color: #f6dca0; margin-bottom: var(--s2); } .idoc-pillar p { font-size: var(--f2); line-height: 1.6; font-weight: 400; color: var(--iris-read); opacity: 0.92; } /* Chapter 1 substrate note + component grid */ .idoc-substrate { margin-top: var(--s4); font-size: var(--f2); line-height: 1.6; color: var(--iris-read); opacity: 0.85; } .idoc-substrate b { color: #f6dca0; font-weight: 500; opacity: 1; } .idoc-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s5); } .idoc-comp { border: 1px solid rgba(233, 200, 120, 0.2); padding: var(--s3) var(--s3) var(--s4); position: relative; } .idoc-comp::before { content: ''; position: absolute; top: -1px; left: -1px; width: var(--s2); height: var(--s2); border-top: 1px solid rgba(233, 200, 120, 0.45); border-left: 1px solid rgba(233, 200, 120, 0.45); } .idoc-comp-k { font-family: var(--iris-heading-font); font-size: var(--f3); letter-spacing: 0.04em; color: #f6dca0; margin-bottom: 2px; } .idoc-comp-role { font-size: var(--f1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--iris-read-dim); line-height: 1.4; margin-bottom: var(--s2); } .idoc-comp-line { font-size: var(--f2); line-height: 1.55; color: var(--text); opacity: 0.92; margin-bottom: 4px; } .idoc-comp-line b { color: #f6dca0; font-weight: 500; opacity: 1; } .idoc-comp-links { margin-top: var(--s2); font-size: var(--f1); letter-spacing: 0.06em; } /* External dependency — visibly not one of the ten Geodineum components */ .idoc-comp-ext { border-style: dashed; } .idoc-comp-ext-tag { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--iris-read-dim); border: 1px solid rgba(233, 200, 120, 0.35); border-radius: 999px; padding: 2px 9px; } /* Repo link row */ .idoc-links { margin-top: var(--s4); font-size: var(--f2); line-height: 1.9; color: var(--iris-read); opacity: 0.9; } .idoc-links a { color: #f6dca0; text-decoration: none; border-bottom: 1px solid rgba(233,200,120,0.32); transition: border-color 0.2s ease, color 0.2s ease; } .idoc-links a:hover, .idoc-links a:focus-visible { color: #fff0cc; border-bottom-color: rgba(246,220,160,0.9); } /* Teasers */ .idoc-teaser { background: linear-gradient(180deg, rgba(233,200,120,0.06), transparent 62%); border: 1px solid rgba(233,200,120,0.22) !important; padding: var(--s5) var(--s4) !important; position: relative; } .idoc-teaser-tag { display: inline-block; font-size: var(--f1); letter-spacing: 0.28em; text-transform: uppercase; color: #f6dca0; border: 1px solid rgba(233,200,120,0.3); padding: 5px 13px; border-radius: 999px; margin-bottom: var(--s3); } .idoc-teaser-title { font-family: var(--iris-heading-font); font-weight: 400; font-size: var(--f6); letter-spacing: 0.05em; color: var(--iris-read); text-shadow: 0 0 26px rgba(233,200,120,0.22); margin-bottom: var(--s1); } .idoc-teaser-sub { font-family: var(--iris-heading-font); font-size: var(--f4); font-weight: 300; letter-spacing: 0.01em; color: #f6dca0; margin-bottom: var(--s3); } .idoc-teaser-foot { margin-top: var(--s3); font-size: var(--f1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--iris-read-dim); } /* CTA / waitlist */ /* The waitlist form now uses the canonical .geo-form system (gTemplate/geodineum-content.css); page-only layout stays below. */ .idoc-cta .geo-form, .idoc-cta .geo-form-note { max-width: 36em; } .idoc-footer { text-align: left; } .idoc-wordmark { font-family: var(--iris-heading-font); letter-spacing: 0.5em; font-size: var(--f3); color: var(--iris-read); display: block; margin-bottom: var(--s2); } .idoc-faint { color: var(--iris-read-dim); font-size: var(--f1); line-height: 1.7; opacity: 0.85; } /* ── Explore + document responsive ────────────────────────── */ @media (max-width: 768px) { :root { --s5: 40px; --s6: 60px; --s7: 88px; --f5: 1.9rem; --f6: 2.3rem; --f7: 2.75rem; } .iris-doc-inner { padding: 0 var(--s3) var(--s6); } #iris-enter { bottom: 42px; } #iris-dock-return { top: 16px; left: 16px; } } /* ─── Persistent home logo ────────────────────────────────────── Fixed top-left, above every toroid/dock/panel layer so it is a one-click return home from any Iris state. Class .iris-logo (NOT .site-logo, which is hidden). Rendered in header.php. */ .iris-logo { position: fixed; top: 2vmin; left: 2vmin; z-index: 10000; display: block; line-height: 0; } .iris-logo img { height: auto; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; } .iris-logo:hover img { opacity: 1; transform: scale(1.05); } /* ── Blog face: compact index in the panel, full-screen reader overlay ── Rendered by giris_source_blog(). The index lives in the toroid panel; a Read button opens .post-expanded-overlay at body level with golden-ratio reading measure. Both carry .geo so the --s-*/--t-* tokens resolve. */ /* The blog index needs more room than the default section panel. */ #content-panel .panel-inner:has(.geo-blog) { width: min(940px, 94vw); } .geo-blog { display: block; } .geo-blog-h { margin: 0 0 var(--s-4); } .blog-index { display: grid; gap: var(--s-5); } .blog-item { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); } .blog-item:last-child { border-bottom: 0; padding-bottom: 0; } .blog-item-title { margin: 0 0 var(--s-1); color: var(--gold-bright); font-size: var(--t-6); } .blog-item-meta { margin: 0 0 var(--s-2); font-size: var(--t-2); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; } .blog-item-excerpt { margin: 0 0 var(--s-3); font-size: var(--t-3); line-height: 1.65; color: var(--text); } .blog-read { margin-top: var(--s-1); } .geo-blog-empty { padding: var(--s-6) 0; text-align: center; } /* Full-screen reading overlay (mirrors the gTesseract post overlay). */ .post-expanded-overlay { position: fixed; inset: 0; z-index: 100050; background: var(--bg-0, #0a0a0f); overflow-y: auto; overflow-x: hidden; opacity: 0; transform: scale(0.985); transition: opacity .38s ease, transform .38s ease; } .post-expanded-overlay.active { opacity: 1; transform: scale(1); } body.blog-reading { overflow: hidden; } .single-post-expanded { position: relative; max-width: 72ch; margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-8); min-height: 100vh; } .single-post-expanded .blog-close { position: sticky; top: 0; float: right; margin: 0 0 var(--s-4) var(--s-4); } .single-post-expanded .post-header { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); } .single-post-expanded .post-title { margin: 0 0 var(--s-2); color: var(--gold-bright); font-size: var(--t-7); line-height: 1.15; } .single-post-expanded .post-meta { margin: 0; font-size: var(--t-2); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; } .single-post-expanded .post-content { max-width: 66ch; font-size: var(--t-5); line-height: 1.75; color: var(--text); } .single-post-expanded .post-content > * + * { margin-top: var(--s-4); } .single-post-expanded .post-content > p:first-of-type { font-size: var(--t-6); line-height: 1.6; } .single-post-expanded .post-content h2 { font-size: var(--t-6); color: var(--gold-bright); margin-top: var(--s-6); line-height: 1.2; } .single-post-expanded .post-content h3 { font-size: var(--t-5); color: var(--gold-bright); margin-top: var(--s-5); } .single-post-expanded .post-content blockquote { border-left: 2px solid var(--gold); padding: var(--s-2) var(--s-4); font-family: Georgia, serif; font-size: var(--t-6); color: var(--text); margin: var(--s-5) 0; } .single-post-expanded .post-content img { max-width: 100%; height: auto; border-radius: 2px; } .single-post-expanded .post-content a { color: var(--gold-bright); } @media (max-width: 560px) { .single-post-expanded { padding: var(--s-6) var(--s-4) var(--s-7); } .single-post-expanded .post-content { font-size: var(--t-4); } }