/* ============================================================ SOVA Network — Shared Stylesheet Three themes via CSS custom properties on ============================================================ */ /* --- Reset & Base ------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--text); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none;transition:color .15s} a:hover{color:var(--accent-dark)} /* --- Theme tokens ------------------------------------------ */ :root{ --text:#1a1a2e; --text-secondary:#4a5568; --text-muted:#64748b; --bg:#ffffff; --bg-page:#f8f9fa; --radius:14px; --radius-sm:8px; --shadow-card:0 2px 12px rgba(15,23,42,.06); --shadow-card-hover:0 8px 28px rgba(15,23,42,.1); --max-w:1140px; --content-w:740px; } /* receptovod (кулинария) */ html[data-theme="receptovod"]{ --accent:#c4513f; --accent-soft:#f7e3db; --accent-dark:#7b261c; --surface:#fff7f2; --border:#ebc7bc; --hero-gradient:linear-gradient(135deg,#7b261c 0%,#c4513f 52%,#f3b08b 100%); } /* dacha (сад/огород) */ html[data-theme="dacha"]{ --accent:#2c8b57; --accent-soft:#dff3e7; --accent-dark:#1f5d3c; --surface:#f4fbf6; --border:#bfdcc9; --hero-gradient:linear-gradient(135deg,#1f5d3c 0%,#2c8b57 48%,#91d1a9 100%); } /* remont (ремонт) */ html[data-theme="remont"]{ --accent:#35516f; --accent-soft:#dfe8f0; --accent-dark:#1d2f43; --surface:#f5f8fb; --border:#c8d5e2; --hero-gradient:linear-gradient(135deg,#1d2f43 0%,#35516f 52%,#8fb3d9 100%); } /* --- Layout ------------------------------------------------ */ .container{ width:100%; max-width:var(--max-w); margin:0 auto; padding:0 20px; } /* --- Header ------------------------------------------------ */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height:60px; } .site-logo{ display:inline-flex; align-items:center; gap:8px; font-size:1.25rem; font-weight:700; color:var(--accent); letter-spacing:-.02em; } .site-logo:hover{color:var(--accent-dark)} .site-logo__icon{width:30px;height:30px;flex-shrink:0} .site-logo__text{line-height:1} /* Desktop nav */ .main-nav{display:flex;gap:6px;align-items:center} .main-nav a{ padding:6px 14px; font-size:.875rem; font-weight:500; color:var(--text-secondary); border-radius:var(--radius-sm); transition:background .15s,color .15s; } .main-nav a:hover, .main-nav a[aria-current="true"]{ background:var(--accent-soft); color:var(--accent); } /* Mobile hamburger */ .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--text); } .nav-toggle svg{width:24px;height:24px} /* Mobile nav overlay */ .mobile-nav{ display:none; position:fixed; inset:60px 0 0; z-index:99; background:var(--bg); padding:20px; overflow-y:auto; border-top:1px solid var(--border); } .mobile-nav.is-open{display:block} .mobile-nav a{ display:block; padding:12px 16px; font-size:1rem; font-weight:500; color:var(--text); border-radius:var(--radius-sm); } .mobile-nav a:hover, .mobile-nav a[aria-current="true"]{ background:var(--accent-soft); color:var(--accent); } /* --- Hero (homepage) --------------------------------------- */ .hero{ position:relative; overflow:hidden; background:var(--hero-gradient); color:#fff; padding:56px 0 48px; } .hero-kicker{ font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-bottom:12px; } .hero h1{ font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; line-height:1.15; margin-bottom:16px; } .hero-description{ max-width:600px; font-size:1.05rem; line-height:1.65; opacity:.92; } /* --- Ad slots ---------------------------------------------- */ .ad-slot{ margin:32px auto; padding:16px; text-align:center; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-sm); font-size:.8rem; color:var(--text-muted); } .ad-slot--header{margin:0 0 0;padding:10px;border:none;border-bottom:1px dashed var(--border);border-radius:0} .ad-slot--sidebar{margin:0 0 24px} .ad-slot--inline{margin:24px 0} /* --- Section headers --------------------------------------- */ .section{padding:48px 0} .section--alt{background:var(--surface)} .section-title{ font-size:clamp(1.25rem,2.5vw,1.75rem); font-weight:700; color:var(--text); margin-bottom:8px; } .section-subtitle{ font-size:.95rem; color:var(--text-secondary); margin-bottom:32px; } /* --- Category pills ---------------------------------------- */ .cat-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; } .cat-pill{ display:inline-flex; align-items:center; padding:8px 16px; font-size:.875rem; font-weight:500; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius-sm); transition:background .15s,color .15s; } .cat-pill:hover{ background:var(--accent); color:#fff; border-color:var(--accent); } /* --- Card grid --------------------------------------------- */ .card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } /* --- Article card ------------------------------------------ */ .article-card{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-card); overflow:hidden; transition:box-shadow .2s,transform .2s; display:flex; flex-direction:column; } .article-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); } .article-card__img{ aspect-ratio:16/10; object-fit:cover; width:100%; } .article-card__body{ padding:20px; flex:1; display:flex; flex-direction:column; } .article-card__cat{ font-size:.75rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; } .article-card__title{ font-size:1.05rem; font-weight:600; line-height:1.3; color:var(--text); margin-bottom:8px; } .article-card__title a{color:inherit} .article-card__title a:hover{color:var(--accent)} .article-card__excerpt{ font-size:.9rem; color:var(--text-secondary); line-height:1.6; flex:1; } .article-card__meta{ margin-top:12px; font-size:.8rem; color:var(--text-muted); } /* --- Category cards (homepage) ----------------------------- */ .category-card{ padding:28px 24px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-card); transition:box-shadow .2s,transform .2s; } .category-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-2px); } .category-card__title{ font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:8px; } .category-card__desc{ font-size:.9rem; color:var(--text-secondary); line-height:1.6; margin-bottom:16px; } .category-card__link{ font-size:.9rem; font-weight:600; color:var(--accent); } .category-card__link::after{content:" \2192";transition:margin .15s} .category-card__link:hover::after{margin-left:4px} /* --- Article page ------------------------------------------ */ .article-header{ padding:40px 0 32px; border-bottom:1px solid var(--border); } .article-header__cat{ font-size:.8rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; display:inline-block; } .article-header h1{ font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:800; line-height:1.2; color:var(--text); margin-bottom:12px; } .article-header__meta{ font-size:.9rem; color:var(--text-muted); } .article-featured-img{ margin:32px auto; max-width:var(--content-w); border-radius:var(--radius); overflow:hidden; } .article-featured-img img{width:100%;aspect-ratio:16/9;object-fit:cover} /* Article body prose */ .article-body{ max-width:var(--content-w); margin:0 auto; padding:32px 0 48px; font-size:1.05rem; line-height:1.8; color:var(--text); } .article-body h2{ font-size:1.4rem; font-weight:700; margin:40px 0 16px; color:var(--text); } .article-body h3{ font-size:1.15rem; font-weight:600; margin:32px 0 12px; color:var(--text); } .article-body p{margin-bottom:20px} .article-body ul,.article-body ol{margin:0 0 20px 1.5rem} .article-body li{margin-bottom:6px} .article-body img{ border-radius:var(--radius-sm); margin:24px 0; } .article-body blockquote{ margin:24px 0; padding:16px 24px; border-left:4px solid var(--accent); background:var(--surface); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; color:var(--text-secondary); } .article-body table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:.95rem; } .article-body th,.article-body td{ padding:10px 14px; border:1px solid var(--border); text-align:left; } .article-body th{ background:var(--surface); font-weight:600; } /* --- Pagination -------------------------------------------- */ .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; padding:40px 0; } .pagination a,.pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; border:1px solid var(--border); color:var(--text-secondary); transition:background .15s,color .15s,border-color .15s; } .pagination a:hover{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); } .pagination .is-current{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; } .pagination .dots{border:none;background:none;color:var(--text-muted)} /* --- Two-column layout (article + sidebar) ----------------- */ .layout-2col{ display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; } .sidebar{position:sticky;top:80px} /* --- Footer ------------------------------------------------ */ .site-footer{ background:var(--text); color:rgba(255,255,255,.7); padding:40px 0 24px; margin-top:48px; } .footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; } .footer-brand{ display:inline-flex; align-items:center; gap:8px; font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:8px; } .footer-logo__icon{width:28px;height:28px;flex-shrink:0} .footer-tagline{ font-size:.85rem; max-width:320px; line-height:1.5; } .footer-nav{display:flex;gap:32px} .footer-nav-col h4{ color:#fff; font-size:.85rem; font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em; } .footer-nav-col a{ display:block; padding:3px 0; font-size:.85rem; color:rgba(255,255,255,.6); transition:color .15s; } .footer-nav-col a:hover{color:#fff} .footer-bottom{ margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.8rem; text-align:center; } /* --- SVG Decorations ---------------------------------------- */ .hero .container{position:relative;z-index:1} .hero-deco{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .category-card__icon{ width:40px; height:40px; margin-bottom:12px; color:var(--accent); } .cat-icon{width:100%;height:100%} .section-accent{ width:60px; height:6px; margin-bottom:16px; color:var(--accent); } .footer-deco{ width:100%; height:40px; display:block; margin-bottom:-1px; } /* --- Breadcrumbs ------------------------------------------- */ .breadcrumbs{ padding:12px 0; font-size:.85rem; color:var(--text-muted); } .breadcrumbs a{color:var(--text-secondary)} .breadcrumbs a:hover{color:var(--accent)} .breadcrumbs span{margin:0 6px;opacity:.5} /* --- Responsive -------------------------------------------- */ @media(max-width:1024px){ .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .layout-2col{grid-template-columns:1fr;gap:32px} .sidebar{position:static} } @media(max-width:768px){ .main-nav{display:none} .nav-toggle{display:block} .hero{padding:40px 0 36px} .hero h1{font-size:1.6rem} .section{padding:36px 0} .footer-inner{flex-direction:column;gap:24px} .footer-nav{flex-direction:column;gap:20px} } @media(max-width:540px){ .card-grid{grid-template-columns:1fr} .container{padding:0 16px} .header-inner{height:52px} }