/* ============================================================ CLARITY โ€” Design System Stylesheet clarity.nexirt.com ============================================================ */ /* --- Design tokens ----------------------------------------- */ :root { /* Backgrounds */ --bg: #0A0B10; --surface: #12141C; --surface-2: #171A24; --border: #232839; --hairline: rgba(255, 255, 255, 0.06); /* Text */ --text: #EDEFF5; --muted: #9AA3B7; --faint: #5C6478; /* Accents */ --accent: #5BE1F5; --accent-2: #8B7CFF; --accent-3: #5EEAD4; /* Gradient */ --grad: linear-gradient(110deg, #5BE1F5, #8B7CFF); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', 'Lucida Console', monospace; /* Type scale */ --fs-hero: clamp(2.5rem, 5.5vw, 5rem); --fs-h2: clamp(1.625rem, 2.8vw, 2.5rem); --fs-h3: clamp(1.0625rem, 1.6vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.6875rem; --fs-tag: 0.75rem; --fs-stat: 0.8125rem; /* Spacing */ --space-section: clamp(4.5rem, 9vw, 8rem); --space-px: clamp(1.25rem, 5vw, 5rem); --max-w: 1200px; --nav-h: 64px; /* Radius */ --r-card: 14px; --r-sm: 8px; --r-pill: 9999px; /* Animation */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 380ms; /* Z-index scale */ --z-base: 0; --z-card: 10; --z-sticky: 40; --z-modal: 100; } /* --- Reset & base ------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: calc(var(--z-modal) + 10); padding: 0.75rem 1.25rem; background: var(--accent); color: var(--bg); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; border-radius: var(--r-sm); text-decoration: none; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: 1rem; outline: 2px solid var(--bg); outline-offset: 2px; } /* Focus styles */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* --- Typography utilities ---------------------------------- */ .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .section-heading { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--text); } .lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--muted); line-height: 1.7; max-width: 62ch; } /* --- Layout utilities -------------------------------------- */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-px); } /* --- Scroll reveal ----------------------------------------- */ /* Progressive enhancement: the hidden initial state is gated on `.js` (set by an inline script in ). With JS off or failed to load, content stays visible โ€” the reveal is an enhancement, never a prerequisite for reading the page. */ .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js .reveal { opacity: 0; transform: translateY(22px); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 80ms; } .reveal-delay-2 { transition-delay: 160ms; } .reveal-delay-3 { transition-delay: 240ms; } .reveal-delay-4 { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); height: var(--nav-h); display: flex; align-items: center; background: rgba(10, 11, 16, 0.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--hairline); transition: background var(--dur-base) var(--ease-out); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-px); } /* Wordmark */ .nav-wordmark { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; flex-shrink: 0; } .nav-wordmark img { height: 26px; width: auto; display: block; } .nav-wordmark-text { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.1em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Desktop nav links */ .nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; } .nav-links a { display: inline-flex; align-items: center; height: 44px; padding-inline: 0.875rem; font-size: var(--fs-small); font-weight: 500; color: var(--muted); text-decoration: none; border-radius: var(--r-sm); transition: color var(--dur-fast) ease, background var(--dur-fast) ease; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); background: var(--hairline); } /* CTA button */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.625rem 1.25rem; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; text-decoration: none; border-radius: var(--r-sm); border: none; cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-base) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover, .btn-primary:focus-visible { background: #7AEAF8; box-shadow: 0 0 0 3px rgba(91, 225, 245, 0.25); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover, .btn-secondary:focus-visible { border-color: rgba(91, 225, 245, 0.35); color: var(--accent); background: rgba(91, 225, 245, 0.05); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); font-size: var(--fs-small); font-family: var(--font-mono); letter-spacing: 0.04em; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: rgba(91, 225, 245, 0.3); color: var(--accent); } /* Mobile nav toggle */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); cursor: pointer; flex-shrink: 0; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .nav-toggle:hover { color: var(--text); border-color: rgba(91,225,245,.3); } .nav-toggle svg { width: 20px; height: 20px; } /* Icon swap is driven purely by the toggle's aria-expanded state (which the JS maintains) โ€” no dependency on the HTML `hidden` attribute, which SVG elements don't reliably honor. Closed => hamburger; open => close (X). */ .nav-toggle [data-icon="close"] { display: none; } .nav-toggle [data-icon="menu"] { display: block; } .nav-toggle[aria-expanded="true"] [data-icon="menu"] { display: none; } .nav-toggle[aria-expanded="true"] [data-icon="close"] { display: block; } /* Mobile menu */ .mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sticky) - 1); background: rgba(10, 11, 16, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow-y: auto; padding: 1.5rem var(--space-px) 3rem; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--hairline); } .mobile-menu.is-open { display: flex; } .mobile-menu a { display: flex; align-items: center; min-height: 56px; padding-inline: 1rem; font-size: 1.0625rem; font-weight: 500; color: var(--muted); text-decoration: none; border-radius: var(--r-sm); border-bottom: 1px solid var(--hairline); transition: color var(--dur-fast) ease, background var(--dur-fast) ease; } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a:hover, .mobile-menu a:focus-visible { color: var(--text); background: var(--hairline); } .mobile-menu .btn { margin-top: 1.5rem; width: 100%; justify-content: center; } @media (max-width: 768px) { .nav-links { display: none; } .nav-cta { display: none; } .nav-toggle { display: flex; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding-top: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6rem)); padding-bottom: clamp(4rem, 8vw, 7rem); overflow: hidden; } /* Hero background texture */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -5%, rgba(91,225,245,0.09) 0%, transparent 70%), radial-gradient(ellipse 50% 35% at 78% 60%, rgba(139,124,255,0.07) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* Hairline grid overlay */ .hero::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M 32 0 L 0 0 0 32' fill='none' stroke='rgba(255,255,255,0.032)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, black 30%, transparent 100%); mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, black 30%, transparent 100%); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .hero-eyebrow { margin-bottom: 1.75rem; } .hero-h1 { font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); max-width: 16ch; margin-bottom: 2.75rem; } /* Gradient span inside H1 */ .hero-h1 .highlight { display: inline; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Acrostic strip */ .acrostic { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; width: 100%; max-width: 760px; margin-bottom: 2.5rem; } .acrostic-tile { --tile-bg: var(--surface); position: relative; display: flex; flex-direction: column; align-items: center; background: var(--tile-bg); border: 1px solid var(--border); border-radius: var(--r-card); padding: 0; cursor: pointer; overflow: hidden; transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out); /* Grid rows for height animation */ } .acrostic-tile:hover, .acrostic-tile:focus-visible, .acrostic-tile.is-expanded { border-color: rgba(91, 225, 245, 0.3); box-shadow: 0 4px 20px rgba(91, 225, 245, 0.07), 0 0 0 0.5px rgba(91, 225, 245, 0.12) inset; transform: translateY(-3px); } .acrostic-tile-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; min-height: 72px; padding: 0.875rem 0.5rem 0.625rem; } .acrostic-letter { font-family: var(--font-mono); font-size: 1.625rem; font-weight: 600; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .acrostic-name { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; } /* Expandable meaning panel */ .acrostic-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); width: 100%; } .acrostic-tile.is-expanded .acrostic-reveal { grid-template-rows: 1fr; } .acrostic-reveal-inner { overflow: hidden; padding: 0 0.625rem; } .acrostic-tile.is-expanded .acrostic-reveal-inner { padding-bottom: 0.75rem; } .acrostic-meaning { font-size: 0.6875rem; color: var(--muted); line-height: 1.5; text-align: center; border-top: 1px solid var(--hairline); padding-top: 0.5rem; } /* Hero sub-paragraph */ .hero-sub { font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--muted); line-height: 1.7; max-width: 58ch; margin-bottom: 2rem; } /* Hero CTAs */ .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-bottom: 2.75rem; } /* Stat strip */ .stat-strip { font-family: var(--font-mono); font-size: var(--fs-stat); color: var(--faint); letter-spacing: 0.04em; padding: 0.75rem 1.25rem; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 0; } .stat-strip span { color: var(--muted); } .stat-divider { color: var(--faint); margin: 0 0.75em; } /* ============================================================ SECTION: THESIS ============================================================ */ .section-thesis { padding-block: var(--space-section); border-top: 1px solid var(--hairline); } .thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .thesis-left .section-heading { margin-bottom: 1.5rem; } .thesis-left .lead { margin-bottom: 1.5rem; } /* Pull quote */ .pull-quote { position: relative; padding: 1.75rem 1.75rem 1.75rem 2.25rem; background: var(--surface-2); border-radius: var(--r-card); border: 1px solid var(--border); margin-block: 1.75rem; } .pull-quote::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 3px; border-radius: 2px; background: var(--grad); } .pull-quote p { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 500; line-height: 1.5; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .thesis-body { font-size: var(--fs-body); color: var(--muted); line-height: 1.75; } .thesis-body em { color: var(--text); font-style: italic; } /* Architecture inversion visual */ .arch-visual { display: flex; flex-direction: column; gap: 1.25rem; } .arch-stack { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } .arch-label { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0.625rem 1rem 0.5rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .arch-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--muted); } .arch-row:last-child { border-bottom: none; } .arch-row-arrow { width: 16px; height: 16px; color: var(--faint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .arch-row.highlight-row { background: rgba(91, 225, 245, 0.06); border-left: 3px solid var(--accent); padding-left: calc(1rem - 3px); color: var(--text); font-weight: 600; } .arch-row.highlight-row .arch-tag { color: var(--accent); } /* Three tiers row */ .tiers-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.5rem; } .tier-card { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); text-align: center; } .tier-label { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.25rem; } .tier-label.high { color: #F87171; } .tier-label.medium { color: var(--accent-3); } .tier-label.low { color: var(--muted); } .tier-desc { font-size: 0.6875rem; color: var(--muted); line-height: 1.5; } /* ============================================================ SECTION: COMPONENTS ============================================================ */ .section-components { padding-block: var(--space-section); border-top: 1px solid var(--hairline); } .section-header { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); } .section-header .section-heading { margin-bottom: 1rem; } .components-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .component-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 0.5px rgba(255,255,255,.03) inset; transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out); } .component-card:hover { border-color: rgba(91, 225, 245, 0.2); box-shadow: 0 6px 28px rgba(91, 225, 245, 0.06), 0 1px 2px rgba(0,0,0,.5), 0 0 0 0.5px rgba(91, 225, 245, 0.08) inset; transform: translateY(-2px); } .comp-tag { font-family: var(--font-mono); font-size: var(--fs-tag); font-weight: 500; letter-spacing: 0.06em; color: var(--accent); background: rgba(91, 225, 245, 0.08); border: 1px solid rgba(91, 225, 245, 0.18); border-radius: var(--r-sm); padding: 0.25em 0.625em; display: inline-flex; align-items: center; width: fit-content; } .comp-letter { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: -0.25rem; } .comp-title { font-size: var(--fs-h3); font-weight: 600; color: var(--text); letter-spacing: -0.015em; line-height: 1.3; } .comp-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.65; flex: 1; } .comp-io { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); margin-top: auto; } .io-row { display: flex; gap: 0.5rem; align-items: flex-start; } .io-label { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); min-width: 2.5rem; padding-top: 0.1em; flex-shrink: 0; } .io-val { font-size: 0.6875rem; color: var(--muted); line-height: 1.5; } /* ============================================================ SECTION: SEQUENCE ============================================================ */ .section-sequence { padding-block: var(--space-section); border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); } .sequence-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; max-width: 860px; } /* Vertical timeline line */ .sequence-steps::before { content: ''; position: absolute; left: 0; top: 0.75rem; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--accent) 0%, rgba(91,225,245,0.1) 100%); } .step { position: relative; padding: 1.5rem 1.5rem 1.5rem 2.25rem; border-bottom: 1px solid var(--hairline); grid-column: 1 / -1; } .step:last-child { border-bottom: none; } /* Timeline dot */ .step::before { content: ''; position: absolute; left: -4px; top: 1.75rem; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(91, 225, 245, 0.5); } .step-num { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.375rem; } .step-title { font-size: 1.0625rem; font-weight: 600; color: var(--text); letter-spacing: -0.015em; line-height: 1.3; margin-bottom: 0.375rem; } .step-tag { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); background: rgba(91, 225, 245, 0.07); border: 1px solid rgba(91, 225, 245, 0.15); border-radius: 4px; padding: 0.15em 0.5em; display: inline-block; margin-bottom: 0.375rem; } .step-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.6; } /* ============================================================ SECTION: METHOD / DOCTRINE (shared) ============================================================ */ .section-method { padding-block: var(--space-section); border-top: 1px solid var(--hairline); } /* Governing questions */ .questions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3.5rem; } .question-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.75rem 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; } .question-card:hover { border-color: rgba(91, 225, 245, 0.2); box-shadow: 0 4px 20px rgba(91, 225, 245, 0.05); } .q-num { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1; margin-bottom: 0.875rem; } .q-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.625rem; line-height: 1.3; } .q-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.65; } /* Operating rules */ .rules-heading { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .rules-list { list-style: none; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } .rule-item { display: flex; align-items: flex-start; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--muted); line-height: 1.6; transition: background var(--dur-fast) ease; } .rule-item:last-child { border-bottom: none; } .rule-item:hover { background: rgba(255,255,255,.018); } .rule-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 0.45em; } .rule-tag { font-family: var(--font-mono); font-size: 0.625rem; color: var(--accent); background: rgba(91, 225, 245, 0.07); border: 1px solid rgba(91, 225, 245, 0.15); border-radius: 3px; padding: 0.1em 0.45em; white-space: nowrap; } /* ============================================================ SECTION: DOCTRINE ============================================================ */ .section-doctrine { padding-block: var(--space-section); border-top: 1px solid var(--hairline); background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%); } .doctrine-table { width: 100%; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; margin-top: 2rem; } .doctrine-thead { display: grid; grid-template-columns: 1fr 1fr; } .doctrine-thead-cell { padding: 0.75rem 1.5rem; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: var(--surface-2); border-bottom: 1px solid var(--border); } .doctrine-thead-cell:first-child { color: var(--faint); border-right: 1px solid var(--border); } .doctrine-thead-cell:last-child { color: var(--accent); } .doctrine-tbody { display: flex; flex-direction: column; } .doctrine-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hairline); transition: background var(--dur-fast) ease; } .doctrine-row:last-child { border-bottom: none; } .doctrine-row:hover { background: rgba(255,255,255,.02); } .doctrine-cell { padding: 1rem 1.5rem; font-size: var(--fs-small); line-height: 1.6; } .doctrine-cell:first-child { color: var(--muted); border-right: 1px solid var(--hairline); position: relative; } .doctrine-cell:last-child { color: var(--text); display: flex; align-items: flex-start; gap: 0.5rem; } .doctrine-cell:last-child::before { content: 'ยท'; color: var(--accent); font-weight: 700; font-size: 1rem; line-height: 1.6; flex-shrink: 0; } /* ============================================================ SECTION: METHOD FLOW ============================================================ */ .section-flow { padding-block: var(--space-section); border-top: 1px solid var(--hairline); } .flow-diagram { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0; margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; } .flow-step { flex: 1; min-width: 180px; padding: 1.5rem 1.25rem; border-right: 1px solid var(--hairline); position: relative; background: var(--surface); transition: background var(--dur-fast) ease; } .flow-step:last-child { border-right: none; } .flow-step:hover { background: var(--surface-2); } .flow-step-num { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.375rem; } .flow-step-title { font-size: var(--fs-small); font-weight: 600; color: var(--text); margin-bottom: 0.5rem; line-height: 1.3; } .flow-step-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.55; } .flow-step-badge { display: inline-flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.75rem; } .badge { font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.06em; padding: 0.2em 0.5em; border-radius: 4px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .badge-a { border-color: rgba(91,225,245,.2); color: var(--accent); background: rgba(91,225,245,.05); } .badge-b { border-color: rgba(139,124,255,.2); color: var(--accent-2); background: rgba(139,124,255,.05); } .badge-c { border-color: rgba(94,234,212,.2); color: var(--accent-3); background: rgba(94,234,212,.05); } /* Gate callout */ .gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; } .gate-card { padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); border-left: 3px solid var(--accent-2); } .gate-card-title { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent-2); text-transform: uppercase; margin-bottom: 0.375rem; } .gate-card-desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.6; } .method-footer { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); } .method-footer strong { color: var(--text); } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--hairline); padding-block: clamp(2.5rem, 5vw, 4rem); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } .footer-logo { display: flex; flex-direction: column; gap: 0.625rem; } .footer-tagline { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; max-width: 40ch; } .footer-acrostic { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.24em; color: var(--faint); display: flex; gap: 0.25rem; } .footer-acrostic span { color: var(--accent); opacity: 0.6; } .footer-meta { font-size: 0.75rem; color: var(--faint); font-family: var(--font-mono); text-align: right; line-height: 1.7; } .footer-meta a { color: var(--muted); text-decoration: none; transition: color var(--dur-fast) ease; } .footer-meta a:hover { color: var(--accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .components-grid { grid-template-columns: repeat(2, 1fr); } .thesis-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 768px) { :root { --nav-h: 56px; } .acrostic { grid-template-columns: repeat(4, 1fr); } .components-grid { grid-template-columns: 1fr; } .questions-grid { grid-template-columns: 1fr; } .doctrine-thead, .doctrine-row { grid-template-columns: 1fr; } .doctrine-thead-cell:first-child { border-right: none; border-bottom: 1px solid var(--border); } .doctrine-cell:first-child { border-right: none; border-bottom: 1px solid var(--hairline); } .doctrine-cell:last-child::before { display: none; } .tiers-row { grid-template-columns: 1fr; } .flow-diagram { flex-direction: column; } .flow-step { border-right: none; border-bottom: 1px solid var(--hairline); } .flow-step:last-child { border-bottom: none; } .gate-row { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; align-items: flex-start; } .footer-meta { text-align: left; } } @media (max-width: 480px) { .acrostic { grid-template-columns: repeat(4, 1fr); gap: 0.375rem; } /* 4 + 3 layout: last 3 tiles centered */ .acrostic-tile:nth-child(5) { grid-column: 1; } .hero-ctas { flex-direction: column; width: 100%; } .hero-ctas .btn { width: 100%; justify-content: center; } .stat-strip { flex-wrap: wrap; gap: 0.25rem; font-size: 0.6875rem; } .sequence-steps::before { display: none; } .step::before { display: none; } .step { padding-left: 1rem; } } /* ============================================================ UTILITY: section divider glow ============================================================ */ .section-glow { position: relative; } .section-glow::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(600px, 90vw); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.25; }