/* ========================================================================== Armour Wireless Solutions — Design System Direction: military spec-sheet / signal dossier, built around the crest ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* Color tokens */ --navy-900: #0B1D2E; --navy-800: #132A3E; --navy-700: #1C3A54; --steel-500: #5C7086; --steel-300: #8FA0B2; --paper-100: #F2EFE7; --paper-200: #E8E2D2; --paper-300: #DCD4BE; --ink-900: #1B1F23; --ink-700: #3A4045; --brass-500: #B8863B; --brass-400: #CB9E52; --brass-200: #E7CE9C; --brass-700: #7A5620; /* darker, for text on light backgrounds — brass-500 fails AA there */ --brick-600: #8A392D; /* Type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --container: 1140px; /* Theme-aware tokens — light values (default) */ --accent-text: var(--brass-700); --surface: var(--paper-100); --surface-alt: var(--paper-200); --surface-card: var(--paper-100); --surface-card-hover: #ffffff; --border-light: var(--paper-300); --text-primary: var(--ink-900); --text-secondary: var(--ink-700); } /* Dark theme — wins when explicitly set via the header toggle (persisted in localStorage, applied pre-paint by an inline head script to avoid a flash) */ :root[data-theme="dark"] { --accent-text: var(--brass-400); --surface: #10161D; --surface-alt: #161E27; --surface-card: #161E27; --surface-card-hover: #1C2733; --border-light: #263140; --text-primary: #F2EFE7; --text-secondary: #A9B4BE; } /* Falls back to OS preference only when the visitor hasn't picked explicitly */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --accent-text: var(--brass-400); --surface: #10161D; --surface-alt: #161E27; --surface-card: #161E27; --surface-card-hover: #1C2733; --border-light: #263140; --text-primary: #F2EFE7; --text-secondary: #A9B4BE; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* The [hidden] attribute must always win over any component's own display rule (.btn, .dropzone-preview, etc. all set an explicit display value at equal specificity, which otherwise silently un-hides them). */ [hidden] { display: none !important; } /* Applied synchronously pre-paint (see the inline script) from a cached "last known signed-in" localStorage hint, so returning to any page while signed in shows Sign Out / Admin immediately instead of flashing Sign In first and correcting once nav.js's async session check resolves. */ :root[data-admin="in"] #nav-signin-link { display: none !important; } :root[data-admin="in"] #nav-admin-link { display: inline !important; } :root[data-admin="in"] #nav-signout-btn { display: inline-flex !important; } body { margin: 0; background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 28px; } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.4em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); } h3 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 1em; color: var(--text-secondary); } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent-text); display: inline-block; } .on-dark .eyebrow, .on-dark .eyebrow::before { color: var(--brass-400); background: var(--brass-400); } .lede { font-size: 1.15rem; color: var(--ink-700); max-width: 620px; } .on-dark { color: var(--paper-100); } .on-dark p, .on-dark .lede { color: var(--steel-300); } .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper-100); } /* ---------- Route divider (signature motif) ---------- */ /* A dotted "route line" nodding to motorcade routes / cell-site paths */ .route-divider { display: flex; align-items: center; gap: 6px; padding: 36px 0; opacity: 0.7; } .route-divider .node { width: 6px; height: 6px; border-radius: 50%; background: var(--brass-700); flex-shrink: 0; } .route-divider .node.big { width: 9px; height: 9px; background: var(--navy-800); } .route-divider .seg { flex: 1; height: 1px; background-image: linear-gradient(to right, var(--steel-300) 0 4px, transparent 4px 10px); background-size: 10px 1px; } .route-divider.on-dark .node.big { background: var(--paper-100); } .route-divider.on-dark .node { background: var(--brass-400); } .route-divider.on-dark .seg { background-image: linear-gradient(to right, var(--steel-500) 0 4px, transparent 4px 10px); } /* ---------- Header / Nav ---------- */ .site-header { background: var(--navy-900); border-bottom: 1px solid rgba(242,239,231,0.12); position: sticky; top: 0; z-index: 50; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand img { height: 42px; width: auto; } .brand-text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-300); line-height: 1.4; border-left: 1px solid rgba(242,239,231,0.25); padding-left: 12px; } .nav-cluster { display: flex; align-items: center; } nav.main-nav { display: flex; gap: 2px; align-items: center; } nav.main-nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--steel-300); padding: 10px 16px; border-radius: 3px; transition: color 0.15s ease, background 0.15s ease; } nav.main-nav a:hover { color: var(--paper-100); background: rgba(242,239,231,0.06); } nav.main-nav a.active { color: var(--brass-400); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin: -10px; flex-direction: column; justify-content: center; gap: 5px; z-index: 60; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--paper-100); transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span:nth-child(2) { opacity: 0; } .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-toggle:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 4px; } /* ---------- Hero ---------- */ .hero { background: var(--navy-900); position: relative; overflow: hidden; padding: 90px 0 100px; } .hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; } .hero-copy .tagline { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--brass-400); font-size: 1.2rem; margin-bottom: 10px; display: block; } .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; } .badge { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-300); border: 1px solid rgba(242,239,231,0.22); padding: 7px 12px; border-radius: 3px; } /* Radar signature element */ .radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .radar-ring { position: absolute; border: 1px solid rgba(203,158,82,0.25); border-radius: 50%; } .radar-ring:nth-child(1) { width: 100%; height: 100%; } .radar-ring:nth-child(2) { width: 72%; height: 72%; } .radar-ring:nth-child(3) { width: 44%; height: 44%; } .radar-sweep { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(203,158,82,0.35), transparent 28%); animation: sweep 7s linear infinite; } .radar-crest { position: relative; width: 46%; z-index: 2; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); } @keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .radar-sweep { animation: none; } } /* ---------- Sections ---------- */ .section { padding: 84px 0; } .section.tight { padding: 60px 0; } .section.alt { background: var(--surface-alt); } .section.dark { background: var(--navy-900); } .section-head { max-width: 680px; margin-bottom: 48px; } /* Two column */ .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .split-media { position: sticky; top: 110px; display: flex; align-items: center; justify-content: center; background: var(--navy-900); border-radius: 4px; padding: 48px; } .split-media img { width: 100%; max-width: 220px; } /* Dossier blocks (About page career sections) */ .dossier-block { border-top: 1px solid var(--border-light); padding: 30px 0; } .dossier-block:first-child { border-top: none; padding-top: 0; } .dossier-block .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; display: block; } /* Capability cards */ .grid-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); } .cap-card { background: var(--surface-card); padding: 32px 28px; transition: background 0.15s ease; } .cap-card:hover { background: var(--surface-card-hover); } .cap-card .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--accent-text); text-transform: uppercase; display: block; margin-bottom: 14px; } .cap-card h3 { margin-bottom: 10px; } .cap-card p { font-size: 0.95rem; margin-bottom: 0; } /* Dossier / spec-sheet table (Contracting Info) — dark plate for contrast against the page */ .spec-sheet { background: var(--navy-900); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 60px rgba(11,29,46,0.18); } .spec-sheet-head { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-400); padding: 16px 24px; border-bottom: 1px solid rgba(242,239,231,0.1); background: rgba(242,239,231,0.03); } .spec-row { display: grid; grid-template-columns: 240px 1fr; border-top: 1px solid rgba(242,239,231,0.08); } .spec-row:first-child { border-top: none; } .spec-key { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-300); padding: 18px 24px; background: rgba(242,239,231,0.025); display: flex; align-items: center; } .spec-val { font-family: var(--font-mono); font-size: 0.95rem; padding: 18px 24px; color: var(--paper-100); display: flex; align-items: center; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5FBF6A; margin-right: 9px; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(95,191,106,0.18); } .note-box { border-left: 3px solid var(--brass-500); background: var(--surface-alt); padding: 18px 22px; font-size: 0.92rem; color: var(--text-secondary); margin-top: 24px; } .note-box strong { color: var(--text-primary); } /* Buttons / links */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 14px 24px; border: 1px solid var(--accent-text); color: var(--accent-text); border-radius: 2px; transition: all 0.15s ease; } .btn:hover { background: var(--accent-text); color: var(--navy-900); } .btn.solid { background: var(--brass-500); color: var(--navy-900); border-color: var(--brass-500); } .btn.solid:hover { background: var(--brass-400); border-color: var(--brass-400); } .btn.on-dark { color: var(--brass-400); border-color: var(--brass-400); } .btn.on-dark:hover { background: var(--brass-400); color: var(--navy-900); } .link-arrow { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; color: var(--accent-text); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.15s ease; } .link-arrow:hover { border-color: var(--accent-text); } .on-dark .link-arrow { color: var(--brass-400); } .on-dark .link-arrow:hover { border-color: var(--brass-400); } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .contact-item { display: block; padding: 26px 0; border-top: 1px solid rgba(242,239,231,0.14); text-decoration: none; } .contact-item:first-child { border-top: none; } .contact-item .label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-400); display: block; margin-bottom: 6px; } .contact-item .value { font-family: var(--font-display); font-size: 1.6rem; color: var(--paper-100); } .form-field { margin-bottom: 20px; } .form-field label { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-300); margin-bottom: 8px; } .form-field input, .form-field textarea { width: 100%; background: var(--navy-800); border: 1px solid rgba(242,239,231,0.2); color: var(--paper-100); font-family: var(--font-body); font-size: 0.95rem; padding: 13px 14px; border-radius: 2px; } .form-field textarea { resize: vertical; min-height: 110px; } .form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--brass-400); outline-offset: 1px; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-900); border-top: 1px solid rgba(242,239,231,0.1); padding: 40px 0; } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .site-footer .foot-brand { display: flex; align-items: center; gap: 12px; } .site-footer .foot-brand img { height: 26px; } .site-footer p { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--steel-300); margin: 0; } .site-footer p a { color: var(--brass-400); text-decoration: none; } .site-footer p a:hover { text-decoration: underline; } .footer-credit { border-top: 1px solid rgba(242,239,231,0.08); margin-top: 24px; padding-top: 18px; text-align: center; } .footer-credit p { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--steel-300); opacity: 0.85; margin: 0; } .footer-credit a { color: var(--brass-400); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .footer-credit a:hover { border-bottom-color: var(--brass-400); } .footer-credit .version-tag { margin-top: 4px; font-size: 0.62rem; color: var(--steel-300); } /* ---------- Focus visibility ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 2px; } /* ---------- Page hero (interior pages) ---------- */ .page-hero { background: var(--navy-900); padding: 64px 0 56px; } .page-hero h1 { max-width: 780px; } .page-hero .lede { color: var(--steel-300); } /* ---------- Anchor scroll offset (single-page nav) ---------- */ #home, #about, #capabilities, #contracting, #contact { scroll-margin-top: 78px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .radar { max-width: 280px; } .split { grid-template-columns: 1fr; } .split-media { position: static; padding: 32px; } .split-media img { max-width: 140px; } .grid-cap { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 0; } .spec-row { grid-template-columns: 1fr; } .spec-key { padding: 12px 18px; } .spec-val { padding: 12px 18px 18px; } } @media (max-width: 720px) { .nav-toggle { display: flex; } nav.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--navy-900); border-top: 1px solid rgba(242,239,231,0.12); border-bottom: 1px solid rgba(242,239,231,0.12); padding: 8px 0; box-shadow: 0 16px 32px rgba(11,29,46,0.35); } nav.main-nav.is-open { display: flex; } nav.main-nav a { padding: 15px 28px; width: 100%; border-radius: 0; } .brand-text { display: none; } .site-header .wrap { height: 64px; } } /* ---------- Skip link (accessibility) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--brass-500); color: var(--navy-900); padding: 12px 20px; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; z-index: 200; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } /* ---------- Theme toggle ---------- */ .theme-toggle { background: none; border: 1px solid rgba(242,239,231,0.22); color: var(--steel-300); border-radius: 3px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; flex-shrink: 0; } .theme-toggle:hover { color: var(--paper-100); border-color: rgba(242,239,231,0.4); } .theme-toggle:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 2px; } /* ---------- Cookie notice ---------- */ .cookie-notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--navy-900); border-top: 1px solid rgba(242,239,231,0.14); padding: 16px 0; box-shadow: 0 -12px 32px rgba(11,29,46,0.3); } .cookie-notice .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cookie-notice p { margin: 0; font-size: 0.85rem; color: var(--steel-300); max-width: 640px; } .cookie-notice a { color: var(--brass-400); } .cookie-notice .btn { flex-shrink: 0; } @media (max-width: 640px) { .cookie-notice .wrap { flex-direction: column; align-items: stretch; text-align: center; } } /* ---------- Breadcrumb & in-page anchor nav ---------- */ .breadcrumb { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-300); padding-top: 18px; } .breadcrumb a { color: var(--steel-300); text-decoration: none; } .breadcrumb a:hover { color: var(--paper-100); } .breadcrumb .sep { margin: 0 8px; opacity: 0.5; } .breadcrumb .current { color: var(--brass-400); } .page-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 22px 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } .page-toc a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; } .page-toc a:hover { border-bottom-color: var(--accent-text); } .on-dark .page-toc a { color: var(--brass-400); } .on-dark .page-toc a:hover { border-bottom-color: var(--brass-400); } .anchor-target { scroll-margin-top: 96px; } /* ---------- Legal page prose (Privacy / Terms) ---------- */ .legal-content { max-width: 780px; } .legal-content .updated { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel-500); margin-bottom: 2.4em; } .legal-content h2 { font-size: 1.3rem; margin-top: 2.2em; } .legal-content h2:first-of-type { margin-top: 0; } .legal-content ul { padding-left: 1.2em; color: var(--text-secondary); margin: 0 0 1em; } .legal-content li { margin-bottom: 0.5em; } /* ---------- 404 page ---------- */ .error-page { padding: 130px 0; text-align: center; } .error-page .code { font-family: var(--font-mono); font-size: 4.5rem; color: var(--accent-text); margin-bottom: 0.2em; line-height: 1; } /* ---------- Photo gallery (public) ---------- */ /* Large single-column showcase feed -- one big photo "post" at a time, visitors scroll to see more, rather than a dense small-thumbnail grid. */ .photo-feed { display: flex; flex-direction: column; gap: 64px; max-width: 860px; margin: 0 auto; } .photo-post { border-top: 1px solid var(--border-light); padding-top: 40px; } .photo-post:first-child { border-top: none; padding-top: 0; } .photo-post .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 16px; display: block; } .photo-post img { width: 100%; height: auto; border-radius: 4px; display: block; box-shadow: 0 24px 60px rgba(11,29,46,0.16); } .photo-post .caption { margin-top: 20px; font-size: 1.05rem; color: var(--text-secondary); max-width: 640px; } @media (max-width: 720px) { .photo-feed { gap: 48px; } .photo-post { padding-top: 32px; } .photo-post .caption { font-size: 0.95rem; } } .photo-empty { padding: 70px 20px; text-align: center; color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ---------- Photo admin panel ---------- */ .admin-panel { max-width: 460px; margin: 0 auto; background: var(--navy-900); border-radius: 4px; padding: 40px 36px; } .admin-panel h2 { color: var(--paper-100); } .admin-panel p { color: var(--steel-300); } .admin-panel .form-field label { color: var(--steel-300); } .admin-wide { max-width: 780px; margin: 0 auto; } .status-msg { font-family: var(--font-mono); font-size: 0.8rem; padding: 12px 16px; border-radius: 3px; margin-bottom: 20px; line-height: 1.5; } .status-msg.error { background: rgba(138,57,45,0.15); color: #E39084; border: 1px solid rgba(138,57,45,0.4); } .status-msg.success { background: rgba(95,191,106,0.12); color: #8FDF9A; border: 1px solid rgba(95,191,106,0.35); } .status-msg a { color: inherit; font-weight: 600; text-decoration: underline; } .admin-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; } /* Password show/hide toggle */ .password-field { position: relative; } .password-field input { padding-right: 60px; } .password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--steel-300); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; padding: 6px 8px; } .password-toggle:hover { color: var(--paper-100); } .password-toggle:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Upload dropzone */ .upload-card { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid rgba(242,239,231,0.1); } .dropzone { display: block; cursor: pointer; border: 2px dashed rgba(242,239,231,0.18); border-radius: 6px; padding: 36px 24px; text-align: center; background: rgba(242,239,231,0.02); transition: border-color 0.15s ease, background 0.15s ease; margin-bottom: 20px; } .dropzone:hover, .dropzone:focus-within { border-color: var(--brass-400); } .dropzone.is-dragover { border-color: var(--brass-400); background: rgba(203,158,82,0.08); } .dropzone-icon { font-size: 1.8rem; color: var(--brass-400); display: block; margin-bottom: 10px; } .dropzone-text { color: var(--paper-100); margin: 0 0 6px; } .dropzone-hint { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel-300); margin: 0; } .dropzone-preview { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; text-align: left; } .dropzone-preview img { max-width: 150px; max-height: 110px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .dropzone-preview .file-name { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: var(--paper-100); word-break: break-word; } .dropzone-preview .replace-hint { display: block; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brass-400); margin-top: 6px; } .admin-photo-list { display: flex; flex-direction: column; gap: 10px; } .admin-photo-row { display: flex; align-items: center; gap: 16px; background: rgba(242,239,231,0.03); border: 1px solid rgba(242,239,231,0.08); border-radius: 3px; padding: 10px 14px; } .admin-photo-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 2px; flex-shrink: 0; } .admin-photo-row .meta { flex: 1; min-width: 0; } .admin-photo-row .meta .name { font-size: 0.85rem; color: var(--paper-100); word-break: break-word; } .admin-photo-row .meta .date { font-family: var(--font-mono); font-size: 0.68rem; color: var(--steel-300); display: block; margin-top: 2px; } .btn.danger { border-color: var(--brick-600); color: #E39084; } .btn.danger:hover { background: var(--brick-600); color: var(--paper-100); } .btn.small { padding: 9px 16px; font-size: 0.7rem; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } @media (max-width: 560px) { .admin-panel { padding: 32px 22px; } .admin-photo-row { flex-wrap: wrap; } }