/* ========================================================================== main.css — amata-alenapak.com Design System: design/design_system_20260722.md Direction: Dark Glass Editorial ========================================================================== */ /* === Font Loading === */ /* Lora is loaded in HTML . */ /* === CSS Custom Properties === */ :root { /* Colours */ --color-page: #0B0D12; --color-page-glow: #111525; --color-glass: rgba(250, 250, 249, 0.055); --color-glass-hover: rgba(250, 250, 249, 0.09); --color-glass-border: rgba(250, 250, 249, 0.10); --color-glass-border-strong: rgba(250, 250, 249, 0.18); --color-ink: #FAFAF9; --color-ink-muted: #B0ACA3; --color-ivory: #F4F1EA; --color-navy: #1B2A4A; --color-crimson: #8B1A2B; --color-crimson-glow: rgba(139, 26, 43, 0.35); /* Typography */ --font-display: 'Lora', Georgia, 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Type Scale */ --text-h1: clamp(2rem, 1.25rem + 3.25vw, 3.5rem); --text-h2: clamp(1.5rem, 1rem + 2.25vw, 2.25rem); --text-h3: clamp(1.125rem, 0.95rem + 0.875vw, 1.375rem); --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem); --text-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-mono: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem); /* Line Heights */ --leading-display: 1.15; --leading-heading: 1.25; --leading-body: 1.7; --leading-mono: 1.4; /* Spacing */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Layout */ --container-max: 72rem; --measure: 42rem; /* Radius */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px; /* Motion */ --motion-fast: 150ms ease; --motion-medium: 250ms ease; } /* === Reset & Base === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-ink); background-color: var(--color-page); background-image: radial-gradient(circle at 10% 0%, rgba(27, 42, 74, 0.35) 0%, transparent 40%), radial-gradient(circle at 90% 10%, rgba(139, 26, 43, 0.12) 0%, transparent 30%), radial-gradient(circle at 50% 100%, rgba(27, 42, 74, 0.25) 0%, transparent 45%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } /* === Skip Link === */ .skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: 1000; padding: var(--space-sm) var(--space-md); background: var(--color-navy); color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-small); text-decoration: none; border-radius: var(--radius-sm); border: 1px solid var(--color-glass-border-strong); } .skip-link:focus { top: var(--space-md); } /* === Typography === */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); line-height: var(--leading-display); } h1 { font-size: var(--text-h1); margin-bottom: var(--space-lg); } h2 { font-size: var(--text-h2); line-height: var(--leading-heading); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-glass-border); } h3 { font-size: var(--text-h3); line-height: var(--leading-heading); margin-bottom: var(--space-sm); } p { margin-bottom: var(--space-md); } p:last-child { margin-bottom: 0; } a:link, a:visited { color: var(--color-ivory); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--motion-fast), text-decoration-thickness var(--motion-fast); } a:hover, a:active { color: var(--color-ink); text-decoration-thickness: 2px; } strong { font-weight: 600; color: var(--color-ink); } /* === Focus === */ :focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* === Container === */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); } /* === Utility === */ .measure { max-width: var(--measure); } .mono { font-family: var(--font-mono); } .text-muted { color: var(--color-ink-muted); } /* === Glass Card === */ .glass { background: var(--color-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--color-glass-border); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(250, 250, 249, 0.06), 0 24px 60px rgba(0, 0, 0, 0.45); } .glass-hover { transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); } @media (prefers-reduced-motion: no-preference) { .glass-hover:hover { background: var(--color-glass-hover); border-color: var(--color-glass-border-strong); box-shadow: inset 0 1px 0 rgba(250, 250, 249, 0.08), 0 32px 80px rgba(0, 0, 0, 0.55); transform: translateY(-2px); } } /* === Header === */ .page__header { position: sticky; top: 0; z-index: 900; background: rgba(11, 13, 18, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-glass-border); } .page__header .container { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .dossier-bar { padding: var(--space-2xs) 0; } .dossier-bar__content { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 479px) { .dossier-bar__content { white-space: normal; line-height: var(--leading-mono); } } .page__nav { display: flex; justify-content: flex-end; } .lang-switch { display: inline-flex; list-style: none; gap: var(--space-2xs); background: var(--color-glass); border: 1px solid var(--color-glass-border); border-radius: var(--radius-full); padding: var(--space-2xs); } .lang-switch__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 var(--space-xs); font-family: var(--font-mono); font-size: var(--text-small); color: var(--color-ink-muted); text-decoration: none; border-radius: var(--radius-full); transition: background var(--motion-fast), color var(--motion-fast); } .lang-switch__link[aria-current="page"], .lang-switch__link:hover, .lang-switch__link:focus { background: var(--color-navy); color: var(--color-ink); } /* === Sections === */ .section { padding: var(--space-2xl) 0; } @media (min-width: 1024px) { .section { padding: var(--space-3xl) 0; } } .section--hero { padding-top: var(--space-xl); } /* === Hero === */ .hero__heading { max-width: var(--container-max); margin-bottom: var(--space-lg); } .hero__heading::after { content: ''; display: block; width: 5rem; height: 3px; margin-top: var(--space-md); background: var(--color-crimson); } .hero__lead { font-size: var(--text-lead); max-width: var(--measure); color: var(--color-ivory); margin-bottom: var(--space-lg); } .hero__body { max-width: var(--measure); margin-bottom: var(--space-xl); } .hero__body p { margin-bottom: var(--space-md); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); } .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: var(--space-sm) var(--space-md); font-family: var(--font-mono); font-size: var(--text-small); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast); } .button--primary { background: var(--color-crimson); color: var(--color-ink); border: 1px solid var(--color-crimson); } .button--primary:hover, .button--primary:focus { background: #6f1522; color: var(--color-ink); box-shadow: 0 0 24px var(--color-crimson-glow); } .button--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-glass-border-strong); } .button--secondary:hover, .button--secondary:focus { background: var(--color-glass-hover); color: var(--color-ink); } /* === Identity Dossier === */ .dossier-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); } @media (min-width: 640px) { .dossier-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .dossier-grid { grid-template-columns: repeat(3, 1fr); } } .dossier-cell { padding: var(--space-md); } .dossier-cell__label { display: block; font-family: var(--font-mono); font-size: var(--text-mono); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2xs); } .dossier-cell__value { font-size: var(--text-body); color: var(--color-ink); } .dossier-cell--highlight .dossier-cell__value { font-family: var(--font-mono); font-size: var(--text-h3); color: var(--color-crimson); } /* === Perpetrators === */ .perpetrators-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .perpetrators-grid { grid-template-columns: repeat(2, 1fr); } } .perpetrator-card { display: flex; flex-direction: column; overflow: hidden; } .perpetrator-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-page); border-bottom: 1px solid var(--color-glass-border); } .perpetrator-card__media img { width: 100%; height: 100%; object-fit: cover; } .perpetrator-card__body { padding: var(--space-lg); } .perpetrator-card__role { display: inline-block; font-family: var(--font-mono); font-size: var(--text-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink); background: var(--color-crimson); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); margin-bottom: var(--space-sm); } .perpetrator-card__name { font-size: var(--text-h2); margin-bottom: var(--space-sm); } .perpetrator-card__meta { list-style: none; display: grid; gap: var(--space-xs); } .perpetrator-card__meta li { display: flex; flex-wrap: wrap; gap: var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-body); } .perpetrator-card__meta strong { color: var(--color-ink); font-weight: 600; } /* === Scheme Timeline === */ .scheme-timeline { display: flex; flex-direction: column; gap: var(--space-lg); position: relative; } @media (min-width: 768px) { .scheme-timeline::before { content: ''; position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 1px; background: var(--color-glass-border-strong); } } .scheme-phase { display: grid; grid-template-columns: 1fr; gap: var(--space-md); position: relative; padding: var(--space-lg); } @media (min-width: 768px) { .scheme-phase { grid-template-columns: auto 1fr; gap: var(--space-lg); padding-left: 3.5rem; } } .scheme-phase__marker { display: flex; align-items: center; gap: var(--space-sm); } @media (min-width: 768px) { .scheme-phase__marker { position: absolute; left: 0; top: var(--space-lg); flex-direction: column; align-items: center; gap: 0; } } .scheme-phase__number { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--color-ink); background: var(--color-crimson); border-radius: 50%; flex-shrink: 0; z-index: 1; } .scheme-phase__label { font-family: var(--font-mono); font-size: var(--text-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ivory); } .scheme-phase__content { max-width: var(--measure); } .scheme-phase__images { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); } @media (min-width: 768px) { .scheme-phase__images--two { grid-template-columns: repeat(2, 1fr); } } /* === Red Flags === */ .redflags-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 640px) { .redflags-grid { grid-template-columns: repeat(2, 1fr); } } .redflag-card { padding: var(--space-lg); } .redflag-card__number { display: inline-grid; place-items: center; width: 2rem; height: 2rem; font-family: var(--font-display); font-weight: 700; color: var(--color-ink); background: var(--color-navy); border-radius: 50%; margin-bottom: var(--space-sm); } .redflag-card__title { font-size: var(--text-h3); margin-bottom: var(--space-xs); } .redflag-card__text { color: var(--color-ink-muted); font-size: var(--text-body); } /* === FAQ === */ .faq__list { display: flex; flex-direction: column; gap: var(--space-md); } .faq__item { padding: var(--space-md); } .faq__item > summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; color: var(--color-ink); display: flex; align-items: flex-start; gap: var(--space-sm); min-height: 44px; } .faq__item > summary::-webkit-details-marker { display: none; } .faq__item > summary::before { content: '—'; display: inline-block; flex-shrink: 0; width: 1.25em; font-family: var(--font-mono); color: var(--color-crimson); font-weight: 700; text-align: center; } .faq__answer { padding: var(--space-sm) 0 0 calc(1.25em + var(--space-sm)); color: var(--color-ink-muted); } .faq__answer p { max-width: var(--measure); } /* === Gallery === */ .gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 480px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } } .gallery__group { margin-bottom: var(--space-xl); } .gallery__group:last-child { margin-bottom: 0; } .gallery__label { font-size: var(--text-h3); margin-bottom: var(--space-md); color: var(--color-ivory); } .figure--exhibit { position: relative; margin: 0; background: var(--color-page); border: 1px solid var(--color-glass-border); border-radius: var(--radius-md); overflow: hidden; } .figure--exhibit::before { content: attr(data-exhibit-label); position: absolute; top: 0; left: 0; z-index: 1; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink); background: var(--color-crimson); padding: var(--space-2xs) var(--space-sm); border-bottom-right-radius: var(--radius-sm); } .figure--exhibit img { width: 100%; height: auto; } .figure--exhibit--portrait img { aspect-ratio: 3 / 4; object-fit: cover; } .figure--exhibit figcaption { font-family: var(--font-mono); font-size: var(--text-small); color: var(--color-ink-muted); padding: var(--space-sm); line-height: var(--leading-mono); } .figure--exhibit figcaption strong { color: var(--color-crimson); } /* === Contact === */ .contact-card { padding: var(--space-xl); max-width: var(--measure); } .contact-card__email { font-family: var(--font-mono); font-size: var(--text-lead); color: var(--color-crimson); word-break: break-all; } .contact-card__note { font-size: var(--text-small); color: var(--color-ink-muted); } /* === Footer === */ .page__footer { padding: var(--space-xl) 0; border-top: 1px solid var(--color-glass-border); text-align: center; } .page__footer p { font-family: var(--font-mono); font-size: var(--text-small); color: var(--color-ink-muted); margin-bottom: 0; } /* === Reduced Motion === */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; } html { scroll-behavior: auto; } } /* === Print === */ @media print { body { background: #fff; color: #000; } .page__header, .skip-link { display: none; } .glass, .glass-hover { background: #f5f5f5; border: 1px solid #ccc; box-shadow: none; } a { color: #000; } } /* Contact form additions */ .form-group[aria-hidden="true"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .form-status { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-weight: 600; text-align: center; display: none; } .form-status:not(:empty) { display: block; } .form-status-success { background: rgba(57, 255, 20, 0.1); border: 1px solid #39FF14; color: #39FF14; } .form-status-error { background: rgba(255, 16, 240, 0.1); border: 1px solid #FF10F0; color: #FF10F0; } .contact-form .form-group { margin-bottom: 1.25rem; } .contact-form .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; } .contact-form .form-group input, .contact-form .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 0.5rem; font: inherit; background: rgba(0,0,0,0.3); color: inherit; box-sizing: border-box; } .contact-form .form-group textarea { min-height: 140px; resize: vertical; } .contact-form .form-group input:focus, .contact-form .form-group textarea:focus { outline: 2px solid rgba(255,255,255,0.4); } .contact-form .button, .contact-form button[type="submit"] { cursor: pointer; } .form-note { font-size: 0.875rem; opacity: 0.8; margin-top: 0.75rem; }