/* ============================================================= PARTIK — OFFICIAL STYLESHEET Classification: Approved / Ministry of Truth Verified Version: 1.0 ============================================================= */ /* Fonts loaded via preconnect in each page for performance */ /* ── Design Tokens ─────────────────────────────────────────── */ :root { --telescreen-black: #0A0A0A; --decree-white: #F0EDE6; --party-crimson: #CC1200; --ministry-grey: #2E2E2E; --compliance-amber: #D4820A; /* Ministry Accents */ --minitrue: #1A3A5C; --minipax: #4A5240; --miniluv: #8C3A4A; --miniplenty: #B8960C; /* Typography */ --font-headline: 'Bebas Neue', 'Arial Black', sans-serif; --font-decree: 'IBM Plex Mono', 'Courier New', monospace; --font-ui: 'Inter', 'Helvetica Neue', sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; /* Layout */ --max-width: 1200px; --border-colour: rgba(240, 237, 230, 0.12); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { background-color: var(--telescreen-black); color: var(--decree-white); font-family: var(--font-ui); font-weight: 400; line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* Scanline overlay */ body::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.04) 3px, rgba(0, 0, 0, 0.04) 4px ); pointer-events: none; z-index: 9999; } /* ── Typography ─────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; color: var(--decree-white); } h1 { font-size: clamp(3rem, 8vw, 6rem); } h2 { font-size: clamp(2rem, 5vw, 3.5rem); } h3 { font-size: clamp(1.4rem, 3vw, 2rem); } h4 { font-size: 1.2rem; } p { font-family: var(--font-ui); font-size: 0.95rem; color: rgba(240, 237, 230, 0.75); max-width: 68ch; } a { color: var(--decree-white); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--party-crimson); } strong { color: var(--decree-white); font-weight: 600; } .decree { font-family: var(--font-decree); font-size: 0.85rem; line-height: 1.7; color: rgba(240, 237, 230, 0.7); } .redacted { background: var(--decree-white); color: var(--decree-white); user-select: none; border-radius: 1px; padding: 0 2px; } /* ── Layout Utilities ───────────────────────────────────────── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } .section { padding: var(--space-xl) 0; border-bottom: 1px solid var(--border-colour); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .container { padding: 0 var(--space-md); } } /* ── State Ticker ────────────────────────────────────────────── */ .state-ticker { background: var(--party-crimson); color: var(--decree-white); font-family: var(--font-decree); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 0; overflow: hidden; white-space: nowrap; } .ticker-track { display: inline-block; animation: ticker-scroll 60s linear infinite; } .ticker-track span { padding: 0 3rem; } .ticker-track span::after { content: ' ░ '; opacity: 0.5; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Navigation ─────────────────────────────────────────────── */ .site-nav { background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid var(--border-colour); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: 0.8rem var(--space-lg); max-width: var(--max-width); margin: 0 auto; } .nav-logo { font-family: var(--font-headline); font-size: 1.8rem; letter-spacing: 0.1em; color: var(--decree-white); flex-shrink: 0; } .nav-logo .logo-subtitle { display: block; font-family: var(--font-decree); font-size: 0.55rem; letter-spacing: 0.25em; color: rgba(240, 237, 230, 0.4); margin-top: -4px; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-links a { font-family: var(--font-decree); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 237, 230, 0.55); transition: color 0.15s ease; padding: 4px 0; border-bottom: 1px solid transparent; } .nav-links a:hover, .nav-links a.active { color: var(--decree-white); border-bottom-color: var(--party-crimson); } .nav-status { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--compliance-amber); text-transform: uppercase; flex-shrink: 0; } .nav-status::before { content: '● '; animation: blink 2s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* Mobile nav */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--decree-white); margin: 5px 0; transition: all 0.2s ease; } @media (max-width: 760px) { .nav-toggle { display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--telescreen-black); border-top: 1px solid var(--border-colour); flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-md) var(--space-lg); display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 10px 0; width: 100%; } .nav-status { display: none; } .site-nav { position: relative; } } /* ── Hero ────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-xl) var(--space-lg); overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(204, 18, 0, 0.08) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(26, 58, 92, 0.06) 0%, transparent 50%), var(--telescreen-black); z-index: 0; } /* Vertical scan line sweep */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 1px, rgba(240, 237, 230, 0.015) 1px, rgba(240, 237, 230, 0.015) 2px ); } .hero-content { position: relative; z-index: 1; max-width: 900px; } .hero-eyebrow { font-family: var(--font-decree); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--party-crimson); margin-bottom: var(--space-md); } .hero-slogan { font-family: var(--font-headline); font-size: clamp(4rem, 12vw, 9rem); line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; color: var(--decree-white); min-height: 1.1em; } .hero-slogan .slogan-line { display: block; transition: opacity 0.4s ease; } .hero-divider { width: 60px; height: 2px; background: var(--party-crimson); margin: var(--space-lg) auto; } .hero-sub { font-family: var(--font-decree); font-size: 0.85rem; line-height: 1.8; color: rgba(240, 237, 230, 0.5); letter-spacing: 0.06em; max-width: 55ch; margin: 0 auto; } .hero-cta { margin-top: var(--space-lg); display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-block; font-family: var(--font-decree); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 28px; border: 1px solid currentColor; transition: all 0.15s ease; cursor: pointer; } .btn-primary { background: var(--party-crimson); border-color: var(--party-crimson); color: var(--decree-white); } .btn-primary:hover { background: transparent; color: var(--party-crimson); } .btn-ghost { background: transparent; border-color: rgba(240, 237, 230, 0.3); color: rgba(240, 237, 230, 0.6); } .btn-ghost:hover { border-color: var(--decree-white); color: var(--decree-white); } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: var(--ministry-grey); border: 1px solid var(--border-colour); padding: var(--space-lg); transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover { border-color: rgba(240, 237, 230, 0.25); transform: translateY(-2px); } .card-tag { font-family: var(--font-decree); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--party-crimson); margin-bottom: var(--space-sm); } .card-date { font-family: var(--font-decree); font-size: 0.62rem; color: rgba(240, 237, 230, 0.3); letter-spacing: 0.1em; margin-top: var(--space-md); } .card-title { font-family: var(--font-headline); font-size: 1.4rem; line-height: 1.1; margin-bottom: var(--space-sm); text-transform: uppercase; } .card-body { font-family: var(--font-ui); font-size: 0.85rem; color: rgba(240, 237, 230, 0.6); line-height: 1.6; } /* ── Ministry Cards ──────────────────────────────────────────── */ .ministry-card { border-left: 3px solid var(--accent, var(--party-crimson)); padding: var(--space-lg); background: var(--ministry-grey); transition: background 0.2s ease, transform 0.2s ease; } .ministry-card:hover { background: rgba(46, 46, 46, 0.8); transform: translateY(-3px); } .ministry-card .mc-label { font-family: var(--font-decree); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent, var(--party-crimson)); margin-bottom: var(--space-sm); } .ministry-card .mc-name { font-family: var(--font-headline); font-size: 1.8rem; text-transform: uppercase; margin-bottom: var(--space-sm); } .ministry-card .mc-mandate { font-family: var(--font-decree); font-size: 0.75rem; color: rgba(240, 237, 230, 0.45); line-height: 1.6; margin-bottom: var(--space-md); } .ministry-card .mc-domain { font-family: var(--font-decree); font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(240, 237, 230, 0.25); margin-top: var(--space-md); } /* ── Section Labels ──────────────────────────────────────────── */ .section-label { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .section-label .label-tag { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--party-crimson); } .section-label .label-line { flex: 1; height: 1px; background: var(--border-colour); } .section-label .label-ref { font-family: var(--font-decree); font-size: 0.55rem; color: rgba(240, 237, 230, 0.2); letter-spacing: 0.15em; } /* ── Bulletin Feed ───────────────────────────────────────────── */ .bulletin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-colour); } .bulletin-grid > * { background: var(--telescreen-black); } @media (max-width: 900px) { .bulletin-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bulletin-grid { grid-template-columns: 1fr; } } /* ── Compliance Bar ──────────────────────────────────────────── */ .compliance-bar-wrap { margin: var(--space-sm) 0; } .compliance-bar-label { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(240, 237, 230, 0.35); margin-bottom: 4px; display: flex; justify-content: space-between; } .compliance-bar-track { height: 3px; background: rgba(240, 237, 230, 0.08); } .compliance-bar-fill { height: 100%; background: var(--compliance-amber); transition: width 1.5s ease; } /* ── State Seal ──────────────────────────────────────────────── */ .seal { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; border: 2px solid rgba(240, 237, 230, 0.15); border-radius: 50%; position: relative; } .seal-inner { font-family: var(--font-headline); font-size: 1.6rem; color: rgba(240, 237, 230, 0.4); } /* ── Stats Row ───────────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-colour); margin: var(--space-lg) 0; } .stat-block { background: var(--ministry-grey); padding: var(--space-lg); text-align: center; } .stat-number { font-family: var(--font-headline); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--decree-white); display: block; } .stat-label { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240, 237, 230, 0.35); margin-top: var(--space-xs); } @media (max-width: 700px) { .stats-row { grid-template-columns: repeat(2, 1fr); } } /* ── Footer ──────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-colour); padding: var(--space-xl) 0 var(--space-lg); margin-top: var(--space-xl); } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-xl); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand .logo { font-family: var(--font-headline); font-size: 2.2rem; letter-spacing: 0.1em; display: block; margin-bottom: var(--space-sm); } .footer-brand p { font-family: var(--font-decree); font-size: 0.72rem; color: rgba(240, 237, 230, 0.3); line-height: 1.7; max-width: 36ch; } .footer-col h5 { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(240, 237, 230, 0.35); margin-bottom: var(--space-md); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 8px; } .footer-col ul li a { font-family: var(--font-ui); font-size: 0.82rem; color: rgba(240, 237, 230, 0.5); } .footer-col ul li a:hover { color: var(--decree-white); } .footer-disclaimer { border-top: 1px solid var(--border-colour); padding-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; align-items: flex-start; } .footer-disclaimer p { font-family: var(--font-decree); font-size: 0.65rem; color: rgba(240, 237, 230, 0.25); line-height: 1.7; max-width: 80ch; } .footer-ref { font-family: var(--font-decree); font-size: 0.58rem; color: rgba(240, 237, 230, 0.15); letter-spacing: 0.1em; text-align: right; flex-shrink: 0; } /* ── Page Header (inner pages) ───────────────────────────────── */ .page-header { padding: var(--space-xl) 0 var(--space-lg); border-bottom: 1px solid var(--border-colour); } .page-header .ph-ref { font-family: var(--font-decree); font-size: 0.62rem; letter-spacing: 0.25em; color: var(--party-crimson); text-transform: uppercase; margin-bottom: var(--space-md); } .page-header h1 { margin-bottom: var(--space-md); } .page-header .ph-sub { font-family: var(--font-decree); font-size: 0.85rem; color: rgba(240, 237, 230, 0.45); max-width: 65ch; line-height: 1.7; } /* ── Accordion / FAQ ─────────────────────────────────────────── */ .faq-item { border-bottom: 1px solid var(--border-colour); } .faq-question { width: 100%; background: none; border: none; color: var(--decree-white); font-family: var(--font-decree); font-size: 0.85rem; letter-spacing: 0.06em; text-align: left; padding: var(--space-md) 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); } .faq-question:hover { color: var(--decree-white); } .faq-icon { font-size: 1rem; color: var(--party-crimson); flex-shrink: 0; transition: transform 0.2s ease; } .faq-answer { font-family: var(--font-decree); font-size: 0.8rem; color: rgba(240, 237, 230, 0.55); line-height: 1.8; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 300px; padding-bottom: var(--space-md); } .faq-item.open .faq-icon { transform: rotate(45deg); } /* ── Hierarchy Tree ──────────────────────────────────────────── */ .hierarchy { font-family: var(--font-decree); font-size: 0.82rem; color: rgba(240, 237, 230, 0.6); line-height: 2.2; background: var(--ministry-grey); border: 1px solid var(--border-colour); border-left: 3px solid var(--party-crimson); padding: var(--space-lg); } .hierarchy .h-root { font-size: 0.95rem; color: var(--decree-white); font-weight: 700; } .hierarchy .h-branch { color: rgba(240, 237, 230, 0.25); } .hierarchy .h-node { color: var(--decree-white); } .hierarchy .h-domain { color: rgba(240, 237, 230, 0.3); } /* ── Stub / Coming Soon ──────────────────────────────────────── */ .stub-section { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-xl); } .stub-code { font-family: var(--font-headline); font-size: clamp(5rem, 15vw, 10rem); color: rgba(240, 237, 230, 0.05); display: block; margin-bottom: var(--space-md); } .stub-section h2 { color: rgba(240, 237, 230, 0.4); margin-bottom: var(--space-md); } .stub-section p { font-family: var(--font-decree); font-size: 0.8rem; color: rgba(240, 237, 230, 0.25); max-width: 45ch; margin: 0 auto; } /* ── Utility ─────────────────────────────────────────────────── */ .text-crimson { color: var(--party-crimson); } .text-amber { color: var(--compliance-amber); } .text-muted { color: rgba(240, 237, 230, 0.35); } .text-mono { font-family: var(--font-decree); } .text-center { text-align: center; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } /* ── Animations ──────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.6s ease both; } .fade-in-delay-1 { animation-delay: 0.1s; } .fade-in-delay-2 { animation-delay: 0.25s; } .fade-in-delay-3 { animation-delay: 0.4s; } .fade-in-delay-4 { animation-delay: 0.55s; } /* ── Print ───────────────────────────────────────────────────── */ @media print { body::after { display: none; } .state-ticker, .site-nav, .hero-cta { display: none; } }