/* ════════════════════════════════════════════════════════════ 11-ORIGAMI — קיפול נייר Paper-folding 3D interface. Warm paper palette. CSS 3D fold animations: rotateX on scroll, rotateY on hover. ════════════════════════════════════════════════════════════ */ /* ── Design tokens ── */ :root { --paper: #faf8f3; /* warm white paper substrate */ --paper-deep: #f2ede2; /* folded-shadow side */ --paper-cream: #f5f1e8; /* secondary surface */ --ink: #1a1a1a; /* charcoal ink */ --ink-soft: #3a3a3a; /* secondary text */ --ink-mute: #6b6b6b; /* tertiary text */ --terracotta: #c65d3a; /* primary accent */ --terracotta-d: #a84a2c; /* accent shadow */ --terracotta-l: #e07a52; /* accent highlight */ --sage: #8b9d77; /* soft sage secondary */ --sage-d: #6f8160; /* sage deep */ --line: #d9d2c4; /* hairline rule */ --fold-shadow: rgba(26, 26, 26, 0.12); /* Chat skins */ --wa-green: #25D366; --wa-dark: #075E54; --wa-bg: #ece5dd; --tg-blue: #2AABEE; --tg-bg: #e8f5fe; --ms-1: #0099FF; --ms-2: #A033FF; /* 3D */ --persp: 1200px; --fold-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Type */ --serif: 'Frank Ruhl Libre', 'Times New Roman', serif; --sans: 'Heebo', 'Arial Hebrew', sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; } /* ── Reset (scoped, no global leaks to switcher) ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--sans); font-weight: 400; color: var(--ink); background-color: var(--paper); line-height: 1.65; direction: rtl; text-align: right; /* Subtle paper grain via layered gradients */ background-image: radial-gradient(rgba(26,26,26,0.018) 1px, transparent 1px), radial-gradient(rgba(26,26,26,0.012) 1px, transparent 1px); background-size: 24px 24px, 31px 31px; background-position: 0 0, 12px 16px; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: var(--terracotta); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Typography ── */ .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; color: var(--ink); margin: 0 0 0.5em; line-height: 1.15; } p { margin: 0 0 1em; } /* ════════════════════════════════════════ 3D FOLD FOUNDATION ════════════════════════════════════════ */ /* The stage that enables 3D for all children */ .fold-stage { perspective: var(--persp); perspective-origin: 50% 40%; } /* A foldable section: starts rotated on X axis (folded shut), JS/GSAP rotates it open to flat on scroll. Without JS (reduced motion / no GSAP), content shows flat. */ .fold-section { position: relative; transform-style: preserve-3d; transform-origin: center top; will-change: transform; } /* When JS opts the page into animation, sections start folded. This class is added to only when animation is active. */ body.fold-anim .fold-section { transform: rotateX(38deg); opacity: 0; } /* The shadow line under a fold */ .fold-section::after { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 18px; background: linear-gradient(to bottom, var(--fold-shadow), transparent); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } body.fold-anim .fold-section::after { opacity: 0.7; } /* Inner crease lines — decorative paper fold lines */ .crease { position: relative; } .crease::before { content: ''; position: absolute; top: 0; bottom: 0; right: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent); opacity: 0.5; pointer-events: none; } /* ════════════════════════════════════════ LAYOUT PRIMITIVES ════════════════════════════════════════ */ .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } .section-pad { padding: 72px 0; } .section-pad-sm { padding: 48px 0; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; display: inline-block; } .divider-rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ════════════════════════════════════════ MASTHEAD ════════════════════════════════════════ */ .masthead { background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 0; position: relative; } .masthead::before { /* top crease shadow */ content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 12px; background: linear-gradient(to bottom, var(--fold-shadow), transparent); pointer-events: none; } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .masthead-brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 38px; height: 38px; flex-shrink: 0; } .brand-name { font-family: var(--serif); font-weight: 900; font-size: 20px; color: var(--ink); line-height: 1; } .brand-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; margin-top: 3px; } .masthead-nav { display: flex; align-items: center; gap: 22px; } .masthead-nav a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .masthead-nav a:hover, .masthead-nav a[aria-current="page"] { color: var(--terracotta); border-bottom-color: var(--terracotta); text-decoration: none; } @media (max-width: 640px) { .masthead-nav { gap: 14px; } .masthead-nav a { font-size: 11px; } .brand-sub { display: none; } } /* ════════════════════════════════════════ HERO — folds open on load ════════════════════════════════════════ */ .hero { position: relative; padding: 80px 0 64px; overflow: hidden; } .hero-inner { position: relative; z-index: 2; } .hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-d); margin-bottom: 22px; } .hero-title { font-family: var(--serif); font-weight: 900; font-size: clamp(38px, 7vw, 78px); line-height: 1.02; color: var(--ink); margin: 0 0 22px; letter-spacing: -0.01em; } .hero-title .accent { color: var(--terracotta); } .hero-tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 2.4vw, 22px); color: var(--ink-soft); max-width: 620px; line-height: 1.5; margin: 0 0 32px; } .hero-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .hero-meta-row span { display: inline-flex; align-items: center; gap: 8px; } .hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); } /* Decorative folded-paper SVG layer behind hero */ .hero-origami-art { position: absolute; top: 40px; left: -40px; width: 340px; height: 340px; opacity: 0.5; z-index: 1; pointer-events: none; } @media (max-width: 900px) { .hero-origami-art { width: 220px; height: 220px; opacity: 0.35; top: 10px; } } /* ════════════════════════════════════════ SECTION HEADERS (reusable) ════════════════════════════════════════ */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .section-head h2 { font-size: clamp(26px, 4vw, 38px); margin: 0; } .section-head .section-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); white-space: nowrap; } /* ════════════════════════════════════════ FLIP CARDS (article cards — rotateY on hover) ════════════════════════════════════════ */ .flip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .flip-card { perspective: 1000px; height: 340px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s var(--fold-ease); transform-style: preserve-3d; } .flip-card:hover .flip-card-inner, .flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); } .flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); background: var(--paper-cream); border-radius: 4px; box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 12px 28px -16px rgba(26,26,26,0.18); } .flip-front { /* paper front */ } .flip-front::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--terracotta); } .flip-back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); border-color: var(--ink); } .flip-back::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--terracotta-l); } .card-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; } .flip-back .card-cat { color: var(--terracotta-l); } .card-title { font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.22; margin: 0 0 12px; color: var(--ink); } .flip-back .card-title { color: var(--paper); font-size: 18px; } .card-excerpt { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 auto; } .card-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .flip-back .card-meta { color: rgba(250,248,243,0.65); border-top-color: rgba(250,248,243,0.16); } .card-meta span { display: inline-flex; align-items: center; gap: 5px; } .card-hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-d); margin-top: 12px; text-align: center; } .flip-back .card-hint { color: var(--sage); } /* ════════════════════════════════════════ ARTICLE LISTING (article.html) — paper sheets ════════════════════════════════════════ */ .page-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); position: relative; } .page-hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 14px; background: linear-gradient(to bottom, var(--fold-shadow), transparent); pointer-events: none; } .page-hero h1 { font-size: clamp(32px, 5.5vw, 54px); margin: 0 0 12px; } .page-hero p { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); max-width: 580px; margin: 0; } .article-sheet { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); } .sheet-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; } .sheet-num { font-family: var(--mono); font-size: 14px; color: var(--terracotta); letter-spacing: 0.1em; padding-top: 4px; } .sheet-body { min-width: 0; } .sheet-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-d); margin-bottom: 8px; } .sheet-title { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; margin: 0 0 10px; color: var(--ink); transition: color 0.2s ease; } .sheet-item:hover .sheet-title { color: var(--terracotta); } .sheet-excerpt { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; max-width: 640px; } .sheet-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); } .sheet-meta span { display: inline-flex; align-items: center; gap: 6px; } .sheet-meta .sep { color: var(--line); } @media (max-width: 600px) { .sheet-item { grid-template-columns: 1fr; gap: 8px; } .sheet-num { padding-top: 0; } } /* ════════════════════════════════════════ NEWS LISTING (news.html) ════════════════════════════════════════ */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; } .news-card { position: relative; padding: 24px; background: var(--paper-cream); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 24px -18px rgba(26,26,26,0.2); overflow: hidden; } .news-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--sage); } /* Urgency variants */ .news-card.urgency-breaking::before { background: var(--terracotta); } .news-card.urgency-high::before { background: var(--terracotta-l); } .news-card.urgency-normal::before { background: var(--sage); } .news-urgency { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; border: 1px solid currentColor; } .news-card.urgency-breaking .news-urgency { color: var(--terracotta); background: rgba(198,93,58,0.08); font-weight: 700; } .news-card.urgency-breaking .news-urgency::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); animation: pulse-dot 1.6s ease-in-out infinite; } .news-card.urgency-high .news-urgency { color: var(--terracotta-l); background: rgba(224,122,82,0.08); } .news-card.urgency-normal .news-urgency { color: var(--sage-d); background: rgba(139,157,119,0.1); } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .news-headline { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0 0 10px; color: var(--ink); } .news-dek { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 16px; } .news-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding-top: 12px; border-top: 1px solid var(--line); } /* Breaking news featured strip on home */ .news-highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .news-mini { padding: 18px; background: var(--paper-cream); border: 1px solid var(--line); border-right: 3px solid var(--sage); border-radius: 3px; } .news-mini.urgency-breaking { border-right-color: var(--terracotta); } .news-mini.urgency-high { border-right-color: var(--terracotta-l); } .news-mini .mini-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 8px; } .news-mini.urgency-normal .mini-tag { color: var(--sage-d); } .news-mini h3 { font-size: 16px; line-height: 1.3; margin: 0 0 8px; } .news-mini .mini-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.06em; } /* ════════════════════════════════════════ QUOTE STRIP ════════════════════════════════════════ */ .quote-strip { background: var(--ink); color: var(--paper); padding: 64px 0; position: relative; overflow: hidden; } .quote-strip::before, .quote-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 18px; background: linear-gradient(to bottom, rgba(250,248,243,0.1), transparent); pointer-events: none; } .quote-strip::before { top: 0; } .quote-strip::after { bottom: 0; transform: rotate(180deg); } .quote-mark { font-family: var(--serif); font-size: 72px; line-height: 0.5; color: var(--terracotta-l); margin-bottom: 8px; } .quote-text { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(20px, 3vw, 30px); line-height: 1.4; margin: 0 0 20px; max-width: 760px; } .quote-author { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-l); } .quote-author .role { color: rgba(250,248,243,0.6); margin-right: 8px; } /* ════════════════════════════════════════ CHAT PHONE — paper-frame aesthetic ════════════════════════════════════════ */ .chat-section { background: var(--paper-cream); padding: 72px 0; position: relative; } .chat-section::before, .chat-section::after { content: ''; position: absolute; left: 0; right: 0; height: 16px; pointer-events: none; } .chat-section::before { top: 0; background: linear-gradient(to bottom, var(--fold-shadow), transparent); } .chat-section::after { bottom: 0; background: linear-gradient(to top, var(--fold-shadow), transparent); } .chat-layout { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; } @media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; gap: 36px; } } .chat-intro h2 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 16px; } .chat-intro p { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); line-height: 1.55; max-width: 480px; margin: 0 0 22px; } .chat-intro .chat-points { list-style: none; padding: 0; margin: 0; } .chat-intro .chat-points li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; } .chat-intro .chat-points li::before { content: '✦'; color: var(--terracotta); } /* The paper-wrapped phone frame */ .phone-paper-wrap { position: relative; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px rgba(26,26,26,0.05), 0 22px 48px -24px rgba(26,26,26,0.28); transform-style: preserve-3d; } .phone-paper-wrap::before { /* corner fold decoration */ content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 28px; background: linear-gradient(135deg, var(--paper-deep) 50%, transparent 50%); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); } .phone-paper-wrap::after { content: 'ערוץ'; position: absolute; top: 6px; right: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .phone-device { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); transition: background-color 0.3s ease; } .phone-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); transition: background-color 0.3s ease; } .phone-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 18px; color: #fff; background: var(--terracotta); flex-shrink: 0; transition: background-color 0.3s ease; } .phone-head-info { min-width: 0; } .phone-head-name { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.2; } .phone-head-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 2px; } .phone-messages { height: 320px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: background-color 0.3s ease; scrollbar-width: thin; } .phone-messages::-webkit-scrollbar { width: 5px; } .phone-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; } .msg-date-sep { align-self: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: rgba(0,0,0,0.05); padding: 4px 12px; border-radius: 999px; margin: 4px 0; } .bubble { max-width: 84%; padding: 10px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); background: var(--paper-cream); box-shadow: 0 1px 2px rgba(0,0,0,0.05); position: relative; align-self: flex-start; transition: background-color 0.3s ease, color 0.3s ease; } .bubble-row { display: flex; flex-direction: column; gap: 6px; } .bubble-top { display: flex; align-items: center; gap: 8px; } .bubble-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--sage); color: #fff; font-weight: 700; } .bubble.urgent .bubble-tag { background: var(--terracotta); } .bubble.urgent { border-right: 3px solid var(--terracotta); } .urgent-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); font-weight: 700; } .urgent-badge::before { content: '⚡'; font-size: 11px; } .bubble-time { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 4px; align-self: flex-end; } /* Typing indicator */ .typing { align-self: flex-start; padding: 12px 16px; background: var(--paper-cream); border-radius: 10px; display: inline-flex; align-items: center; gap: 5px; transition: background-color 0.3s ease; } .typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); animation: typing-bounce 1.2s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: 0.18s; } .typing-dot:nth-child(3) { animation-delay: 0.36s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } } /* Input bar */ .phone-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(0,0,0,0.06); transition: background-color 0.3s ease; } .phone-input-field { flex: 1; height: 36px; border-radius: 18px; background: var(--paper-cream); border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--ink-mute); padding: 0 14px; display: flex; align-items: center; transition: background-color 0.3s ease, border-color 0.3s ease; } .phone-send { width: 36px; height: 36px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; flex-shrink: 0; transition: background-color 0.3s ease; font-size: 15px; } /* ── Skin: WhatsApp ── */ .phone-device.skin-wa .phone-header { background: var(--wa-dark); } .phone-device.skin-wa .phone-head-name, .phone-device.skin-wa .phone-head-status { color: #fff; } .phone-device.skin-wa .phone-avatar { background: var(--wa-green); } .phone-device.skin-wa .phone-messages { background: var(--wa-bg); } .phone-device.skin-wa .bubble { background: #fff; } .phone-device.skin-wa .typing { background: #fff; } .phone-device.skin-wa .phone-input { background: var(--wa-dark); } .phone-device.skin-wa .phone-input-field { background: #fff; border-color: transparent; } .phone-device.skin-wa .phone-send { background: var(--wa-green); } /* ── Skin: Telegram ── */ .phone-device.skin-tg .phone-header { background: var(--tg-blue); } .phone-device.skin-tg .phone-head-name, .phone-device.skin-tg .phone-head-status { color: #fff; } .phone-device.skin-tg .phone-avatar { background: #1c94d4; } .phone-device.skin-tg .phone-messages { background: var(--tg-bg); } .phone-device.skin-tg .bubble { background: #fff; } .phone-device.skin-tg .typing { background: #fff; } .phone-device.skin-tg .phone-input { background: #fff; border-top-color: var(--line); } .phone-device.skin-tg .phone-input-field { background: var(--tg-bg); border-color: transparent; } .phone-device.skin-tg .phone-send { background: var(--tg-blue); } /* ── Skin: Messenger ── */ .phone-device.skin-ms .phone-header { background: linear-gradient(135deg, var(--ms-1), var(--ms-2)); } .phone-device.skin-ms .phone-head-name, .phone-device.skin-ms .phone-head-status { color: #fff; } .phone-device.skin-ms .phone-avatar { background: linear-gradient(135deg, var(--ms-1), var(--ms-2)); } .phone-device.skin-ms .phone-messages { background: #f5f0fe; } .phone-device.skin-ms .bubble { background: #fff; } .phone-device.skin-ms .typing { background: #fff; } .phone-device.skin-ms .phone-input { background: #fff; border-top-color: var(--line); } .phone-device.skin-ms .phone-input-field { background: #f0ecff; border-color: transparent; } .phone-device.skin-ms .phone-send { background: linear-gradient(135deg, var(--ms-1), var(--ms-2)); } /* Skin switcher buttons */ .skin-switcher { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; } .skin-switcher .skin-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-left: 4px; } .skin-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .skin-btn:hover { transform: translateY(-2px); } .skin-btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } .skin-btn.active { color: #fff; border-color: transparent; } .skin-btn[data-skin="wa"].active { background: var(--wa-green); } .skin-btn[data-skin="tg"].active { background: var(--tg-blue); } .skin-btn[data-skin="ms"].active { background: linear-gradient(135deg, var(--ms-1), var(--ms-2)); } /* ════════════════════════════════════════ TICKER ════════════════════════════════════════ */ .ticker { background: var(--ink); color: var(--paper); padding: 12px 0; overflow: hidden; position: relative; } .ticker-label { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; padding: 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-l); background: var(--ink); z-index: 2; border-left: 1px solid rgba(250,248,243,0.15); } .ticker-track { display: inline-flex; white-space: nowrap; animation: ticker-scroll 40s linear infinite; padding-right: 120px; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 13px; color: rgba(250,248,243,0.85); } .ticker-item .t-time { font-family: var(--mono); font-size: 11px; color: var(--terracotta-l); } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(50%); } /* RTL: scroll toward start */ } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ════════════════════════════════════════ FOOTER ════════════════════════════════════════ */ .footer { background: var(--ink); color: rgba(250,248,243,0.7); padding: 48px 0 32px; position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: linear-gradient(to bottom, rgba(250,248,243,0.08), transparent); } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px; } .footer-brand { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--paper); margin-bottom: 6px; } .footer-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--terracotta-l); text-transform: uppercase; } .footer-meta { font-family: var(--mono); font-size: 11px; color: rgba(250,248,243,0.5); letter-spacing: 0.08em; } .footer-meta a { color: var(--terracotta-l); } /* ════════════════════════════════════════ FEATURED ARTICLES (home) — 2-col lead ════════════════════════════════════════ */ .featured-lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-bottom: 36px; } @media (max-width: 820px) { .featured-lead { grid-template-columns: 1fr; } } .feature-main { padding: 32px; background: var(--paper-cream); border: 1px solid var(--line); border-radius: 4px; position: relative; overflow: hidden; } .feature-main::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: var(--terracotta); } .feature-main .feat-cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 14px; display: block; } .feature-main h3 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0 0 14px; } .feature-main p { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 18px; } .feature-main .feat-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-mute); padding-top: 14px; border-top: 1px solid var(--line); } .feature-side { display: flex; flex-direction: column; gap: 16px; } .feature-mini { padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; border-right: 3px solid var(--sage); flex: 1; } .feature-mini h4 { font-size: 18px; line-height: 1.25; margin: 0 0 8px; } .feature-mini .mini-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-d); margin-bottom: 6px; display: block; } .feature-mini p { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; } /* ════════════════════════════════════════ CTA strip ════════════════════════════════════════ */ .cta-strip { text-align: center; padding: 64px 0; } .cta-strip h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 16px; } .cta-strip p { font-family: var(--serif); font-size: 18px; color: var(--ink-soft); max-width: 540px; margin: 0 auto 24px; } .cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--terracotta); color: var(--paper); font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border-radius: 4px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; border: 0; cursor: pointer; } .cta-btn:hover { background: var(--terracotta-d); transform: translateY(-2px); text-decoration: none; color: var(--paper); } /* ════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .flip-card-inner { transition: none; } .fold-section { transform: none !important; opacity: 1 !important; } } /* ════════════════════════════════════════ MOBILE ════════════════════════════════════════ */ @media (max-width: 480px) { .section-pad { padding: 48px 0; } .hero { padding: 56px 0 48px; } .container { padding: 0 16px; } .flip-grid { grid-template-columns: 1fr; } .flip-card { height: 300px; } }