/* ================================================================ Society of Open Systems — Design System Dark-mode-first, modern, premium aesthetic ================================================================ */ /* --- Google Fonts are loaded in HTML --- */ /* ================================================================ 1. CSS Custom Properties (Design Tokens) ================================================================ */ :root { /* Backgrounds — Plain / Clean */ --bg-deep: #f0f0f0; --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-card: #ffffff; --bg-card-hover: #f9f9f9; --bg-glass: rgba(255, 255, 255, 0.85); --bg-glass-border: rgba(0, 0, 0, 0.05); /* Text — Dark-first for plain background */ --text-primary: #1a1a1a; --text-secondary: #4a4a4a; --text-muted: #7a7a7a; --text-inverse: #ffffff; /* Accents - International Orange */ --accent-amber: #ff5800; --accent-amber-light: #ff752e; --accent-amber-glow: rgba(255, 88, 0, 0.1); --accent-teal: #1a1a1a; --accent-teal-light: #333333; --accent-teal-glow: rgba(0, 0, 0, 0.05); /* Borders & Lines */ --line: rgba(0, 0, 0, 0.1); --line-strong: rgba(0, 0, 0, 0.2); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45); --shadow-glow-amber: 0 0 40px rgba(245, 166, 35, 0.12); --shadow-glow-teal: 0 0 40px rgba(79, 195, 247, 0.1); /* Spacing */ --container: min(1180px, calc(100% - 2rem)); --container-narrow: min(850px, calc(100% - 2rem)); /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.2s var(--ease-out); --transition-normal: 0.35s var(--ease-out); --transition-slow: 0.6s var(--ease-out); } /* ================================================================ 2. Reset & Base ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; background: var(--bg-primary); color: var(--text-primary); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 1.25rem; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--accent-amber); } /* Specific Page Watermark */ .page-watermark { position: absolute; top: 10vh; right: -10vw; width: 70vw; max-width: 700px; height: 70vw; max-height: 700px; background-image: url('/icon.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.12; pointer-events: none; z-index: 0; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font: inherit; } ::selection { background: var(--accent-amber); color: var(--text-inverse); } /* ================================================================ 3. Typography ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: clamp(3rem, 7.5vw, 5.8rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; } h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); } h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); } p { color: var(--text-secondary); font-size: 1.25rem; line-height: 1.75; } .eyebrow { display: inline-block; margin-bottom: 0.75rem; color: var(--accent-amber); font-family: system-ui, -apple-system, sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .lead { max-width: 720px; margin-top: 1.5rem; color: var(--text-secondary); font-size: clamp(1.35rem, 2.5vw, 1.6rem); line-height: 1.72; } /* ================================================================ 4. Layout Utilities ================================================================ */ .container { width: var(--container); margin: 0 auto; } .container-narrow { width: var(--container-narrow); margin: 0 auto; } .section { padding: 5rem 0; } .section + .section { padding-top: 0; } /* ================================================================ 5. Header (Glassmorphism) ================================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--transition-normal), box-shadow var(--transition-normal); } .site-header.scrolled { background: var(--bg-glass); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 1px 0 var(--bg-glass-border), var(--shadow-md); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: var(--container); margin: 0 auto; padding: 1rem 0; transition: padding var(--transition-normal); } .site-header.scrolled .header-inner { padding: 0.65rem 0; } .brand-mark { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; transition: opacity var(--transition-fast); } .brand-mark:hover { color: var(--text-primary); opacity: 0.85; } .brand-mark img { width: 56px; height: 56px; border-radius: var(--radius-sm); } .brand-mark span { font-family: system-ui, -apple-system, sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-primary); } .site-nav { display: flex; align-items: center; gap: 0.25rem; } .site-nav a { position: relative; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: color var(--transition-fast), background var(--transition-fast); } .site-nav a:hover, .site-nav a.active { color: var(--accent-amber); background: var(--accent-amber-glow); } /* Mobile nav toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; cursor: pointer; z-index: 110; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--transition-fast), opacity var(--transition-fast); } .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ================================================================ 6. Hero Section ================================================================ */ .hero { position: relative; display: grid; grid-template-columns: 1fr; align-items: center; min-height: 92vh; padding: 8rem 0 4rem; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(245, 158, 11, 0.07) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 60%, rgba(6, 182, 212, 0.05) 0%, transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; width: var(--container); margin: 0 auto; position: relative; z-index: 1; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .hero-content { align-items: center; max-width: 800px; margin: 0 auto; } } .hero-content { display: flex; flex-direction: column; } .hero-content h1 { color: var(--text-primary); font-weight: 800; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.2rem; } .hero-image-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg), var(--shadow-glow-amber); } .hero-image-wrap::before { content: ''; position: absolute; inset: -2px; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--accent-amber), var(--accent-teal), var(--accent-amber)); background-size: 300% 300%; animation: border-glow 6s ease infinite; z-index: -1; } @keyframes border-glow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-image-wrap img { width: 100%; aspect-ratio: 16/9; max-height: 450px; object-fit: cover; border-radius: var(--radius-xl); border: 2px solid var(--bg-primary); } @media (min-width: 900px) { .hero-image-wrap img { aspect-ratio: 21/9; } } .hero-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(6, 10, 20, 0.92) 0%, transparent 100%); } .hero-image-overlay .quote { color: rgba(255, 255, 255, 0.88); font-size: clamp(0.95rem, 2vw, 1.25rem); font-style: italic; font-weight: 400; line-height: 1.5; } /* ================================================================ 7. Buttons ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0 1.5rem; border-radius: var(--radius-md); font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: all var(--transition-fast); cursor: pointer; } .btn-primary { background: var(--accent-amber); color: var(--text-inverse); border: none; box-shadow: 0 4px 16px rgba(255, 88, 0, 0.25); } .btn-primary:hover { color: var(--text-inverse); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245, 158, 11, 0.35); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--line-strong); } .btn-secondary:hover { color: var(--accent-amber); border-color: var(--accent-amber); background: var(--accent-amber-glow); } /* ================================================================ 8. Cards ================================================================ */ .card { position: relative; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .card h2, .card h3 { margin-bottom: 0.75rem; } .card p { font-size: 1.25rem; } .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1.25rem; border-radius: var(--radius-md); background: var(--accent-amber-glow); color: var(--accent-amber); } .card-icon svg { width: 28px; height: 28px; } .card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } } /* ================================================================ 9. Info / Pillar Section ================================================================ */ .pillars { padding: 5rem 0; } .pillars .section-header { text-align: center; margin-bottom: 3rem; } .pillar-card { text-align: center; padding: 2.5rem 1.5rem; } .pillar-card .card-icon { margin: 0 auto 1.25rem; } .pillar-card h3 { color: var(--accent-amber); font-size: 1.3rem; margin-bottom: 0.75rem; } /* ================================================================ 10. Page Layout (Manifesto, Policies, Dispatches) ================================================================ */ .page-hero { padding: 8rem 0 3rem; position: relative; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 158, 11, 0.06) 0%, transparent 70%); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero.centered { text-align: center; } .page-hero.centered .lead { margin-left: auto; margin-right: auto; } /* Article Stack (Manifesto, Privacy, Terms) */ .article-stack { display: grid; gap: 1.25rem; max-width: 850px; margin: 0 auto; } .text-article { padding: clamp(1.5rem, 4vw, 2.5rem); } .text-article h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1rem; } .text-article p { margin-bottom: 1rem; } .text-article p:last-child { margin-bottom: 0; } .text-article blockquote { margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--accent-amber); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--accent-amber-glow); color: var(--text-primary); font-size: 1.25rem; font-weight: 600; font-style: italic; line-height: 1.5; } /* Protocol Grid */ .protocol-section { max-width: 980px; margin: 3rem auto 0; } .protocol-section h2 { margin-bottom: 0.5rem; } .protocol-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } @media (min-width: 640px) { .protocol-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .protocol-grid { grid-template-columns: repeat(3, 1fr); } } .protocol-card { padding: 1.5rem; } .protocol-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; } /* Covenant Block */ .covenant-block { max-width: 980px; margin: 3rem auto 0; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); background: var(--accent-amber); color: var(--text-inverse); text-align: center; } .covenant-block .eyebrow { color: rgba(255, 255, 255, 0.85); } .covenant-block h2 { color: var(--text-inverse); margin-bottom: 1.5rem; } .covenant-block p { color: rgba(255, 255, 255, 0.95); max-width: 720px; margin: 0 auto 1.5rem; font-size: 1.25rem; line-height: 1.7; } .covenant-block p:last-child { margin-bottom: 0; } /* ================================================================ 11. Dispatches / Article Reader ================================================================ */ .dispatch-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 2rem; } .search-input { flex: 1; min-width: 220px; min-height: 48px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font-size: 0.95rem; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .search-input::placeholder { color: var(--text-muted); } .search-input:focus { border-color: var(--accent-amber); box-shadow: 0 0 0 3px var(--accent-amber-glow); } .filter-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-pill { padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: all var(--transition-fast); } .filter-pill:hover, .filter-pill.active { border-color: var(--accent-amber); background: var(--accent-amber-glow); color: var(--accent-amber); } .dispatch-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .dispatch-grid { grid-template-columns: repeat(2, 1fr); } } .dispatch-card { padding: 0; overflow: hidden; cursor: default; } .dispatch-card-body { padding: 1.5rem; } .dispatch-meta { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .dispatch-meta span { color: var(--accent-teal); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .dispatch-card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; transition: color var(--transition-fast); } .dispatch-card:hover h3 { color: var(--accent-amber); } .dispatch-card .summary { font-size: 1.05rem; margin-bottom: 1rem; } .tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--accent-teal-glow); color: var(--accent-teal); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; } /* Article full view */ .article-full { max-width: 780px; margin: 0 auto; } .article-full .back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 2rem; color: var(--text-secondary); font-size: 1.1rem; font-weight: 600; } .article-full .back-link:hover { color: var(--accent-amber); } .prose h1, .prose h2, .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; } .prose p { margin-bottom: 1.25rem; } .prose ul, .prose ol { margin: 0 0 1.25rem 1.5rem; color: var(--text-secondary); } .prose li { margin-bottom: 0.4rem; line-height: 1.7; } .prose blockquote { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--accent-amber); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--accent-amber-glow); color: var(--text-primary); font-style: italic; } .prose code { padding: 0.15em 0.4em; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--accent-teal); font-size: 0.88em; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; } .prose pre { margin: 1.5rem 0; padding: 1.25rem; border-radius: var(--radius-md); background: var(--bg-deep); border: 1px solid var(--line); overflow-x: auto; } .prose pre code { padding: 0; background: transparent; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; } .prose img { margin: 1.5rem 0; border-radius: var(--radius-md); border: 1px solid var(--line); } .prose a { color: var(--accent-amber); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--accent-amber-light); } .prose hr { margin: 2rem 0; border: none; border-top: 1px solid var(--line); } .empty-state { padding: 3rem 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-muted); text-align: center; font-size: 1rem; } /* ================================================================ 12. Footer ================================================================ */ .site-footer { border-top: 1px solid var(--line); padding: 3rem 0 2.5rem; margin-top: 5rem; } .footer-inner { width: var(--container); margin: 0 auto; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; } .footer-nav a { color: var(--text-secondary); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .footer-nav a:hover { color: var(--accent-amber); } .footer-text { color: var(--text-muted); font-size: 1.15rem; line-height: 1.6; } .footer-text strong { color: var(--text-secondary); } .footer-copy { margin-top: 0.75rem; color: var(--text-muted); font-size: 1.05rem; } /* ================================================================ 13. Scroll Reveal Animation ================================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .stagger-children .reveal:nth-child(1) { transition-delay: 0.05s; } .stagger-children .reveal:nth-child(2) { transition-delay: 0.12s; } .stagger-children .reveal:nth-child(3) { transition-delay: 0.19s; } .stagger-children .reveal:nth-child(4) { transition-delay: 0.26s; } .stagger-children .reveal:nth-child(5) { transition-delay: 0.33s; } .stagger-children .reveal:nth-child(6) { transition-delay: 0.40s; } /* ================================================================ 14. Loading Spinner ================================================================ */ .loading-spinner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem; color: var(--text-muted); } .loading-spinner::before { content: ''; width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--accent-amber); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ================================================================ 15. Responsive ================================================================ */ @media (max-width: 880px) { .nav-toggle { display: flex; } .site-nav { position: fixed; top: 0; right: -100%; width: min(320px, 85vw); height: 100vh; flex-direction: column; align-items: stretch; gap: 0; padding: 5rem 1.5rem 2rem; background: var(--bg-secondary); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transition: right var(--transition-normal); overflow-y: auto; } .site-nav.open { right: 0; } .site-nav a { padding: 1rem; font-size: 0.85rem; border-bottom: 1px solid var(--line); border-radius: 0; } .hero { min-height: auto; padding: 7rem 0 3rem; } .hero-grid { grid-template-columns: 1fr; } .hero-image-wrap img { aspect-ratio: 16/10; } } @media (max-width: 640px) { h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); } .card { padding: 1.5rem; } .dispatch-controls { flex-direction: column; } .search-input { width: 100%; } } /* Mobile nav overlay */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 90; } .nav-overlay.visible { display: block; } /* ================================================================ 13. Accessibility (A11y) Assistive Mode ================================================================ */ html.a11y-large-text { /* Scale up the root em to proportionally increase everything using rems */ font-size: 130%; } html.a11y-large-text body { letter-spacing: 0.02em; /* Improve readability for older eyes */ } html.a11y-large-text p, html.a11y-large-text .prose p, html.a11y-large-text .prose li { line-height: 1.8; /* More breathing room between lines */ } html.a11y-large-text .search-input, html.a11y-large-text select { font-size: 1.15rem; padding: 0.6rem 1.25rem; } html.a11y-large-text .btn { font-size: 1.1rem; min-height: 56px; }