/* ================================================================= WERAN SOLAR — TAG PAGES STYLESHEET File: tag-style.css Scope rule: every selector is rooted in a class (never a bare element selector) — see project brief requirement #5. Top-level scope class: .wr-page (applied to ) ================================================================= */ /* ---- 1. Fonts -------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* ---- 2. Design tokens ------------------------------------------- */ .wr-page{ --c-primary:#bf0000; --c-primary-dark:#8f0000; --c-primary-soft:#fdecec; --c-primary-soft-2:#fff6f6; --c-ink:#1c1a19; --c-ink-soft:#6b6560; --c-ink-faint:#9a938d; --c-paper:#ffffff; --c-surface:#f7f4f0; --c-surface-2:#f1ece5; --c-line:#e7e0d8; --c-gold:#c98a2b; --font-display:'Oswald', 'Arial Narrow', sans-serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-s:4px; --radius-m:8px; --radius-l:16px; --shadow-s:0 2px 10px rgba(28,26,25,.06); --shadow-m:0 12px 32px rgba(28,26,25,.10); --shadow-primary:0 10px 24px rgba(191,0,0,.22); --maxw:1200px; font-family:var(--font-body); color:var(--c-ink); background:var(--c-paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ---- 3. Reset (scoped) ------------------------------------------ */ .wr-page, .wr-page *, .wr-page *::before, .wr-page *::after{ box-sizing:border-box; margin:0; padding:0; } .wr-page{ line-height:1.6; font-size:16px; } .wr-page img{ max-width:100%; display:block; } .wr-page a{ color:inherit; text-decoration:none; } .wr-page ul, .wr-page ol{ list-style:none; } .wr-page button, .wr-page input, .wr-page textarea{ font-family:inherit; font-size:inherit; color:inherit; border:none; background:none; } .wr-page button{ cursor:pointer; } .wr-page svg{ display:block; } .wr-page .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- 4. Layout utilities ----------------------------------------- */ .wr-page .ui.container{ max-width:var(--maxw); margin:0 auto; padding:0 5px; } .wr-page section{ position:relative; } /* ---- 5. Buttons ---------------------------------------------------- */ .wr-page .wr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; border-radius:var(--radius-s); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; } .wr-page .wr-btn-primary{ background:var(--c-primary); color:#fff; box-shadow:var(--shadow-primary); } .wr-page .wr-btn-primary:hover{ background:var(--c-primary-dark); transform:translateY(-2px); } .wr-page .wr-btn-outline{ background:transparent; color:var(--c-ink); border:1.5px solid var(--c-line); } .wr-page .wr-btn-outline:hover{ border-color:var(--c-primary); color:var(--c-primary); } .wr-page .wr-btn-block{ width:100%; } /* ================================================================= 6. HEADER / NAVIGATION ================================================================= */ .wr-page .wr-header{ position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--c-line); } .wr-page .wr-topbar{ background:var(--c-ink); color:#d9d3cc; font-size:12.5px; } .wr-page .wr-topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:36px; } .wr-page .wr-topbar-contact{ display:flex; gap:20px; } .wr-page .wr-topbar-item i{ font-style:normal; color:var(--c-primary); margin-right:6px; } .wr-page .wr-lang-toggle{ display:flex; align-items:center; gap:4px; color:#d9d3cc; font-weight:500; } .wr-page .wr-lang{ position:relative; } .wr-page .wr-lang-menu{ position:absolute; right:0; top:calc(100% + 8px); background:#fff; color:var(--c-ink); border-radius:var(--radius-s); box-shadow:var(--shadow-m); min-width:150px; padding:6px 0; opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .16s ease; } .wr-page .wr-lang:hover .wr-lang-menu, .wr-page .wr-lang-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); } .wr-page .wr-lang-menu li a{ display:block; padding:8px 16px; font-size:13px; } .wr-page .wr-lang-menu li a:hover{ background:var(--c-primary-soft); color:var(--c-primary); } .wr-page .wr-mainnav-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; } .wr-page .wr-logo img{ height:40px; width:auto; } .wr-page .wr-nav{ flex:1; } .wr-page .wr-nav > ul{ display:flex; align-items:center; gap:6px; justify-content:center; } .wr-page .wr-nav > ul > li{ position:relative; } .wr-page .wr-nav > ul > li > a{ display:flex; align-items:center; gap:5px; padding:14px 14px; font-family:var(--font-display); font-weight:500; font-size:14.5px; letter-spacing:.01em; color:var(--c-ink); border-bottom:2px solid transparent; transition:color .16s ease, border-color .16s ease; } .wr-page .wr-nav > ul > li > a:hover, .wr-page .wr-nav > ul > li > a.is-active{ color:var(--c-primary); border-color:var(--c-primary); } .wr-page .wr-nav .wr-dropdown{ position:absolute; top:100%; left:0; background:#fff; min-width:230px; border-radius:0 0 var(--radius-m) var(--radius-m); box-shadow:var(--shadow-m); padding:10px 0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .18s ease; z-index:50; } .wr-page .wr-nav li.has-dropdown:hover > .wr-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .wr-page .wr-dropdown > li{ position:relative; } .wr-page .wr-dropdown > li > a{ display:block; padding:10px 20px; font-size:13.5px; font-weight:500; } .wr-page .wr-dropdown > li > a:hover{ background:var(--c-primary-soft); color:var(--c-primary); } .wr-page .wr-dropdown ul{ padding:2px 0 8px 0; } .wr-page .wr-dropdown ul li a{ display:block; padding:7px 20px 7px 32px; font-size:12.5px; color:var(--c-ink-soft); } .wr-page .wr-dropdown ul li a:hover{ color:var(--c-primary); } .wr-page .wr-nav-actions{ display:flex; align-items:center; gap:14px; } .wr-page .wr-nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; } .wr-page .wr-nav-toggle span{ display:block; height:2px; width:100%; background:var(--c-ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } /* ---- Breadcrumb ---- */ .wr-page .wr-breadcrumb{ background:var(--c-surface); border-bottom:1px solid var(--c-line); } .wr-page .wr-breadcrumb-inner{ display:flex; align-items:center; gap:8px; height:52px; font-size:13px; color:var(--c-ink-soft); } .wr-page .wr-breadcrumb-inner a:hover{ color:var(--c-primary); } .wr-page .wr-breadcrumb-sep{ color:var(--c-ink-faint); } .wr-page .wr-breadcrumb-current{ color:var(--c-primary); font-weight:600; } /* ================================================================= 7. TAG CATEGORY PAGE — HERO + SEARCH ================================================================= */ .wr-page .tagcat-hero{ background: linear-gradient(135deg, rgba(191,0,0,.94), rgba(143,0,0,.92)), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); color:#fff; padding:64px 0 80px; text-align:center; } .wr-page .tagcat-hero-inner{ max-width:760px; } .wr-page .tagcat-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#ffd9d9; margin-bottom:18px; } .wr-page .tagcat-eyebrow span{ color:var(--c-gold); } .wr-page .tagcat-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px, 4.4vw, 46px); line-height:1.16; margin-bottom:16px; } .wr-page .tagcat-lead{ font-size:16px; color:#ffe4e4; line-height:1.7; max-width:620px; margin:0 auto 34px; } .wr-page .tagcat-search{ display:flex; max-width:520px; margin:0 auto; background:#fff; border-radius:999px; padding:6px; box-shadow:0 14px 30px rgba(0,0,0,.22); } .wr-page .tagcat-search input{ flex:1; padding:12px 20px; color:var(--c-ink); font-size:14.5px; border-radius:999px; } .wr-page .tagcat-search input::placeholder{ color:var(--c-ink-faint); } .wr-page .tagcat-search button{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase; background:var(--c-ink); color:#fff; padding:0 26px; border-radius:999px; transition:background .16s ease; } .wr-page .tagcat-search button:hover{ background:var(--c-primary); } /* ---- Grid section wrapper (matches B-backend call markup) ---- */ .wr-page .tagcat-grid-section{ background:var(--c-surface); padding:64px 0 76px; } .wr-page .tagcat-grid-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:34px; } .wr-page .tagcat-grid-head h2{ font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--c-ink); } .wr-page .tagcat-grid-head h2 span{ color:var(--c-primary); } .wr-page .tagcat-count{ font-size:13.5px; color:var(--c-ink-soft); background:#fff; border:1px solid var(--c-line); padding:6px 14px; border-radius:999px; } .wr-page .tagcat-count b{ color:var(--c-primary); } /* .pro-list is the fixed call-code grid wrapper: implemented with CSS grid as a safe standalone fallback. If the Semantic UI grid framework is already loaded site-wide, these rules simply confirm the same responsive breakpoints used across the rest of the site. */ .wr-page .pro-list.ui.grid.three.column{ display:grid; grid-template-columns:1fr; gap:20px; } @media (min-width:768px){ .wr-page .pro-list.ui.grid.three.column{ grid-template-columns:repeat(2,1fr); gap:22px; } } @media (min-width:1024px){ .wr-page .pro-list.ui.grid.three.column{ grid-template-columns:repeat(3,1fr); gap:24px; } } .wr-page .pro-list.ui.grid.three.column > .column{ width:auto; } /* individual tag card — targets the fixed .con-box / .inner-box / .tit classes coming from the CMS call code, no class renaming needed */ .wr-page .pro-list .con-box{ height:100%; background:#fff; border:1px solid var(--c-line); border-left:3px solid var(--c-primary); border-radius:var(--radius-m); padding:26px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .wr-page .pro-list .con-box:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--c-primary); } .wr-page .pro-list .inner-box{ position:relative; } .wr-page .pro-list .inner-box::before{ content:"\25C6"; display:inline-block; color:var(--c-gold); font-size:12px; margin-bottom:12px; } .wr-page .pro-list .tit{ font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.4; color:var(--c-ink); } .wr-page .pro-list .tit a{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .wr-page .pro-list .tit a:hover{ color:var(--c-primary); } .wr-page .pro-list .tit a::after{ content:"\2192"; font-size:16px; color:var(--c-primary-soft-2); background:var(--c-primary-soft); color:var(--c-primary); width:26px; height:26px; min-width:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .18s ease; } .wr-page .pro-list .con-box:hover .tit a::after{ transform:translateX(3px); } .wr-page .tagcat-empty{ display:none; text-align:center; padding:50px 20px; color:var(--c-ink-soft); font-size:14.5px; } .wr-page .tagcat-empty.is-visible{ display:block; } /* ---- Category CTA band ---- */ .wr-page .tagcat-cta{ background:var(--c-ink); color:#fff; padding:56px 0; text-align:center; } .wr-page .tagcat-cta h2{ font-family:var(--font-display); font-weight:600; font-size:26px; margin-bottom:12px; } .wr-page .tagcat-cta p{ color:#c8c2ba; max-width:560px; margin:0 auto 26px; font-size:14.5px; } /* ================================================================= 8. TAG DETAIL PAGE — HERO ================================================================= */ .wr-page .tagdet-hero{ background:linear-gradient(120deg, #180000 0%, #4a0000 46%, var(--c-primary) 100%); color:#fff; padding:60px 0 0; overflow:hidden; } .wr-page .tagdet-hero-inner{ display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:center; padding-bottom:50px; } .wr-page .tagdet-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gold); margin-bottom:16px; } .wr-page .tagdet-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,44px); line-height:1.15; margin-bottom:16px; } .wr-page .tagdet-hero p{ color:#ffdede; font-size:15.5px; line-height:1.75; max-width:520px; } .wr-page .tagdet-hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; } .wr-page .tagdet-hero-actions .wr-btn-outline{ color:#fff; border-color:rgba(255,255,255,.4); } .wr-page .tagdet-hero-actions .wr-btn-outline:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); } .wr-page .tagdet-hero-art{ position:relative; justify-self:center; width:100%; max-width:320px; aspect-ratio:1/1; } .wr-page .tagdet-hero-art .ray{ position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(255,255,255,.22); } .wr-page .tagdet-hero-art .ray-2{ inset:34px; border-color:rgba(255,255,255,.32); } .wr-page .tagdet-hero-art .core{ position:absolute; inset:78px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffd98a, var(--c-gold) 60%, #a8650f 100%); box-shadow:0 0 60px rgba(201,138,43,.55); } .wr-page .tagdet-stats{ border-top:1px solid rgba(255,255,255,.16); padding:26px 0; } .wr-page .tagdet-stats-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .wr-page .tagdet-stat{ text-align:center; } .wr-page .tagdet-stat b{ display:block; font-family:var(--font-display); font-size:24px; color:#fff; } .wr-page .tagdet-stat span{ font-size:12px; color:#ffc9c9; letter-spacing:.03em; } /* ================================================================= 9. DET6 — TAG RICH CONTENT (backend field: {$v2['meta']['det01']}) Every element below is scoped under .det01-content so any HTML an editor pastes into the backend field inherits styling automatically as long as it reuses these class names. ================================================================= */ .wr-page .det01-section{ padding:72px 0; background:#fff; } .wr-page .det01-section .wr-section-head{ max-width:680px; margin:0 auto 44px; text-align:center; } .wr-page .wr-section-head .wr-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-primary); margin-bottom:12px; } .wr-page .wr-eyebrow span{ color:var(--c-gold); } .wr-page .wr-section-head h2{ font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--c-ink); margin-bottom:12px; } .wr-page .wr-section-head p{ color:var(--c-ink-soft); font-size:15px; line-height:1.7; } .wr-page .wr-section-head-left{ text-align:left; margin:0 0 24px; max-width:none; } .wr-page .wr-section-head-left .wr-eyebrow{ justify-content:flex-start; } .wr-page .det01-content{ max-width:1150px; margin:0 auto; } .wr-page .det01-content .det01-lead{ font-size:16.5px; line-height:1.85; color:var(--c-ink-soft); margin-bottom:36px; } .wr-page .det01-content h3{ font-family:var(--font-display); font-weight:600; font-size:21px; color:var(--c-ink); margin:0 0 18px; } .wr-page .det01-content p{ color:var(--c-ink-soft); font-size:15px; line-height:1.8; margin-bottom:16px; } .wr-page .det01-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 0 48px; } .wr-page .det01-benefit-card{ background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius-m); padding:26px 20px; text-align:left; } .wr-page .det01-benefit-card .det01-icon{ width:46px; height:46px; margin-bottom:16px; color:var(--c-primary); } .wr-page .det01-benefit-card .det01-icon svg{ width:100%; height:100%; } .wr-page .det01-benefit-card .det01-icon svg circle{ fill:var(--c-primary-soft); } .wr-page .det01-benefit-card .det01-icon svg path, .wr-page .det01-benefit-card .det01-icon svg rect, .wr-page .det01-benefit-card .det01-icon svg polyline, .wr-page .det01-benefit-card .det01-icon svg line{ stroke:var(--c-primary); fill:none; } .wr-page .det01-benefit-card h4{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--c-ink); margin-bottom:8px; } .wr-page .det01-benefit-card p{ font-size:13.5px; color:var(--c-ink-soft); margin:0; line-height:1.65; } .wr-page .det01-flow{ background:var(--c-surface); border-radius:var(--radius-l); padding:40px 30px; margin-bottom:48px; } .wr-page .det01-flow-title{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.03em; color:var(--c-ink); margin-bottom:26px; text-align:center; } .wr-page .det01-flow-svg{ width:100%; height:auto; } .wr-page .det01-flow-svg .flow-line{ stroke:var(--c-line); stroke-width:2; } .wr-page .det01-flow-svg .flow-dot{ fill:#fff; stroke:var(--c-primary); stroke-width:2.5; } .wr-page .det01-flow-svg .flow-dot-fill{ fill:var(--c-primary); } .wr-page .det01-flow-svg .flow-icon{ stroke:var(--c-primary); fill:none; stroke-width:1.6; } .wr-page .det01-flow-svg text{ font-family:var(--font-body); font-size:11.5px; fill:var(--c-ink-soft); font-weight:600; } .wr-page .det01-flow-svg .flow-step-num{ font-family:var(--font-display); fill:var(--c-primary); font-size:12px; } .wr-page .det01-checklist{ display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; list-style:none; margin:0; } .wr-page .det01-checklist li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--c-ink-soft); line-height:1.6; } .wr-page .det01-checklist li i{ font-style:normal; color:var(--c-primary); font-weight:700; margin-top:1px; } /* ================================================================= 10. PRODUCT SHOWCASE (article loop, cat="product") ================================================================= */ .wr-page .tag-products-section{ padding:72px 0; background:var(--c-surface); } .wr-page .tag-products-section .pro-list.ui.grid.three.column{ display:grid; grid-template-columns:1fr; gap:24px; } @media (min-width:768px){ .wr-page .tag-products-section .pro-list.ui.grid.three.column{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1024px){ .wr-page .tag-products-section .pro-list.ui.grid.three.column{ grid-template-columns:repeat(3,1fr); gap:26px; } } .wr-page .tag-products-section .con-box{ background:#fff; border-radius:var(--radius-m); overflow:hidden; border:1px solid var(--c-line); transition:transform .2s ease, box-shadow .2s ease; height:100%; display:flex; flex-direction:column; } .wr-page .tag-products-section .con-box:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); } .wr-page .tag-products-section .img-box{ aspect-ratio:4/3; overflow:hidden; background:#f1ece5; } .wr-page .tag-products-section .img-box img{ width:100%; height:120%; object-fit:cover; transition:transform .35s ease; } .wr-page .tag-products-section .con-box:hover .img-box img{ transform:scale(1.06); } .wr-page .tag-products-section .inner-box{ padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; } .wr-page .tag-products-section .tit{ font-family:var(--font-display); font-weight:500; font-size:16.5px; color:var(--c-ink); margin-bottom:10px; } .wr-page .tag-products-section .tit a:hover{ color:var(--c-primary); } .wr-page .tag-products-section .abst{ font-size:13.5px; color:var(--c-ink-soft); line-height:1.7; margin-bottom:16px; flex:1; } .wr-page .tag-products-section .more{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--c-primary); align-self:flex-start; } .wr-page .tag-products-section .more i{ font-style:normal; transition:transform .18s ease; } .wr-page .tag-products-section .more:hover i{ transform:translateX(4px); } .wr-page .tag-products-section-foot{ text-align:center; margin-top:40px; } /* ================================================================= 11. COMPANY INTRO ================================================================= */ .wr-page .company-section{ padding:76px 0; background:#fff; } .wr-page .company-inner{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; } .wr-page .company-media{ position:relative; } .wr-page .company-media img{ border-radius:var(--radius-l); width:100%; aspect-ratio:4/3.1; object-fit:cover; box-shadow:var(--shadow-m); } .wr-page .company-media-badge{ position:absolute; left:-22px; bottom:-22px; background:var(--c-primary); color:#fff; border-radius:var(--radius-m); padding:18px 22px; box-shadow:var(--shadow-primary); font-family:var(--font-display); } .wr-page .company-media-badge b{ display:block; font-size:26px; line-height:1; } .wr-page .company-media-badge span{ font-size:11.5px; letter-spacing:.04em; color:#ffdcdc; } .wr-page .company-text .wr-eyebrow{ justify-content:flex-start; } .wr-page .company-text h2{ font-family:var(--font-display); font-weight:600; font-size:29px; color:var(--c-ink); margin-bottom:16px; line-height:1.25; } .wr-page .company-text p{ color:var(--c-ink-soft); font-size:15px; line-height:1.8; margin-bottom:22px; } .wr-page .company-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin-bottom:26px; } .wr-page .company-fact{ display:flex; gap:10px; align-items:flex-start; font-size:13.8px; color:var(--c-ink-soft); } .wr-page .company-fact i{ font-style:normal; color:var(--c-primary); font-weight:700; } .wr-page .company-text-cta{ display:flex; gap:14px; flex-wrap:wrap; } /* ================================================================= 12. RELATED TAGS (fuzzy_search loop) ================================================================= */ .wr-page .related-tags-section{ padding:64px 0; background:var(--c-surface); } .wr-page .related-tags-list{ display:flex; flex-wrap:wrap; gap:12px; } .wr-page .related-tags-list a{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--c-line); padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--c-ink); transition:all .16s ease; } .wr-page .related-tags-list a::before{ content:"\0023"; color:var(--c-gold); font-weight:700; } .wr-page .related-tags-list a:hover{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; } .wr-page .related-tags-list a:hover::before{ color:#ffdcdc; } /* ================================================================= 13. CONTACT FORM SECTION ================================================================= */ .wr-page .contact-section{ padding:80px 0; background:var(--c-ink); color:#fff; } .wr-page .contact-inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; } .wr-page .contact-info .wr-eyebrow{ color:var(--c-gold); } .wr-page .contact-info h2{ font-family:var(--font-display); font-weight:600; font-size:28px; margin-bottom:16px; line-height:1.28; } .wr-page .contact-info p{ color:#c8c2ba; font-size:14.5px; line-height:1.75; margin-bottom:28px; } .wr-page .contact-info-list li{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:13.8px; color:#e5e0d9; } .wr-page .contact-info-list li:first-child{ border-top:none; } .wr-page .contact-info-list i{ font-style:normal; width:26px; height:26px; min-width:26px; display:flex; align-items:center; justify-content:center; background:rgba(191,0,0,.24); color:#ff8f8f; border-radius:50%; font-size:13px; } .wr-page .contact-form-card{ background:#fff; color:var(--c-ink); border-radius:var(--radius-l); padding:36px; box-shadow:var(--shadow-m); } .wr-page .contact-form-card h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin-bottom:22px; } .wr-page .wr-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; } .wr-page .wr-form-grid .wr-field-full{ grid-column:1 / -1; } .wr-page .wr-field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--c-ink-soft); margin-bottom:7px; text-transform:uppercase; } .wr-page .wr-field label i{ font-style:normal; color:var(--c-primary); } .wr-page .wr-field input, .wr-page .wr-field textarea{ width:100%; border:1.5px solid var(--c-line); border-radius:var(--radius-s); padding:12px 14px; font-size:14px; transition:border-color .16s ease; background:var(--c-surface); } .wr-page .wr-field input:focus, .wr-page .wr-field textarea:focus{ outline:none; border-color:var(--c-primary); background:#fff; } .wr-page .wr-field textarea{ resize:vertical; min-height:110px; } .wr-page .contact-form-card .wr-btn{ margin-top:20px; } .wr-page .wr-form-note{ font-size:11.5px; color:var(--c-ink-faint); margin-top:12px; text-align:center; } .wr-page .wr-form-success{ display:none; text-align:center; padding:30px 10px; font-size:14.5px; color:var(--c-ink-soft); } .wr-page .wr-form-success.is-visible{ display:block; } .wr-page .wr-form-success b{ display:block; color:var(--c-primary); font-family:var(--font-display); font-size:18px; margin-bottom:8px; } /* ================================================================= 14. FLOATING BALL + MODAL ================================================================= */ .wr-page .wr-float-ball{ position:fixed; right:26px; bottom:100px; z-index:400; display:flex; align-items:center; gap:10px; background:var(--c-primary); color:#fff; border-radius:999px; padding:15px; box-shadow:0 12px 26px rgba(191,0,0,.4); cursor:pointer; transition:padding .22s ease, box-shadow .2s ease, transform .2s ease; overflow:hidden; width:54px; } .wr-page .wr-float-ball:hover, .wr-page .wr-float-ball:focus-visible{ width:auto; padding:15px 22px 15px 15px; transform:translateY(-3px); box-shadow:0 16px 32px rgba(191,0,0,.48); } .wr-page .wr-float-ball-icon{ font-size:20px; min-width:24px; text-align:center; line-height:1; } .wr-page .wr-float-ball-text{ font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.03em; white-space:nowrap; } .wr-page .wr-modal-overlay{ position:fixed; inset:0; z-index:500; background:rgba(20,10,10,.6); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; } .wr-page .wr-modal-overlay.is-open{ opacity:1; visibility:visible; } .wr-page .wr-modal{ background:#fff; border-radius:var(--radius-l); width:100%; max-width:440px; padding:34px 32px; position:relative; box-shadow:0 30px 60px rgba(0,0,0,.35); transform:translateY(14px) scale(.98); transition:transform .22s ease; } .wr-page .wr-modal-overlay.is-open .wr-modal{ transform:translateY(0) scale(1); } .wr-page .wr-modal-close{ position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%; background:var(--c-surface); color:var(--c-ink-soft); display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .16s ease, color .16s ease; } .wr-page .wr-modal-close:hover{ background:var(--c-primary); color:#fff; } .wr-page .wr-modal h3{ font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:8px; color:var(--c-ink); } .wr-page .wr-modal > p{ font-size:13.5px; color:var(--c-ink-soft); margin-bottom:22px; line-height:1.6; } .wr-page .wr-modal-form label{ display:block; font-size:12px; font-weight:600; color:var(--c-ink-soft); text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px; } .wr-page .wr-modal-form input, .wr-page .wr-modal-form textarea{ width:100%; border:1.5px solid var(--c-line); border-radius:var(--radius-s); padding:11px 13px; font-size:13.8px; margin-bottom:15px; background:var(--c-surface); transition:border-color .16s ease; } .wr-page .wr-modal-form input:focus, .wr-page .wr-modal-form textarea:focus{ outline:none; border-color:var(--c-primary); background:#fff; } .wr-page .wr-modal-form textarea{ min-height:80px; resize:vertical; } /* ================================================================= 15. FOOTER ================================================================= */ .wr-page .wr-footer{ background:#171412; color:#cfc9c2; } .wr-page .wr-footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; padding:64px 0 44px; } .wr-page .wr-footer-logo{ height:34px; filter:brightness(0) invert(1); margin-bottom:18px; } .wr-page .wr-footer-brand p{ font-size:13.5px; line-height:1.75; color:#a8a19a; margin-bottom:20px; } .wr-page .wr-footer-social{ display:flex; gap:10px; } .wr-page .wr-footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:11.5px; font-weight:600; letter-spacing:.02em; transition:background .16s ease, color .16s ease; } .wr-page .wr-footer-social a:hover{ background:var(--c-primary); color:#fff; } .wr-page .wr-footer-col h3{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:#fff; letter-spacing:.03em; text-transform:uppercase; margin-bottom:20px; } .wr-page .wr-footer-col ul li{ margin-bottom:12px; } .wr-page .wr-footer-col ul li a{ font-size:13.8px; color:#a8a19a; transition:color .16s ease; } .wr-page .wr-footer-col ul li a:hover{ color:var(--c-primary); } .wr-page .wr-footer-contact p{ font-size:13.5px; color:#a8a19a; line-height:1.7; margin-bottom:12px; } .wr-page .wr-footer-contact a:hover{ color:var(--c-primary); } .wr-page .wr-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; } .wr-page .wr-footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .wr-page .wr-footer-tagline{ font-size:12.5px; color:#8a837c; font-style:italic; } .wr-page .wr-footer-copy{ font-size:12.5px; color:#8a837c; } .wr-page .wr-footer-copy a:hover{ color:var(--c-primary); } /* ================================================================= 16. RESPONSIVE ================================================================= */ @media (max-width:1023px){ .wr-page .wr-nav{ position:fixed; top:0; right:-320px; height:100vh; width:300px; background:#fff; padding:90px 24px 24px; overflow-y:auto; box-shadow:-8px 0 30px rgba(0,0,0,.15); transition:right .26s ease; z-index:150; } .wr-page .wr-nav.is-open{ right:0; } .wr-page .wr-nav > ul{ flex-direction:column; align-items:stretch; gap:0; } .wr-page .wr-nav > ul > li > a{ border-bottom:1px solid var(--c-line); padding:14px 4px; justify-content:space-between; } .wr-page .wr-nav .wr-dropdown{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; padding-left:10px; border-left:2px solid var(--c-primary-soft); } .wr-page .wr-nav li.has-dropdown.is-open .wr-dropdown{ display:block; } .wr-page .wr-nav-toggle{ display:flex; } .wr-page .wr-topbar-contact{ display:none; } .wr-page .tagdet-hero-inner{ grid-template-columns:1fr; text-align:center; } .wr-page .tagdet-hero p{ margin:0 auto; } .wr-page .tagdet-hero-art{ display:none; } .wr-page .tagdet-hero-actions{ justify-content:center; } .wr-page .company-inner, .wr-page .contact-inner{ grid-template-columns:1fr; } .wr-page .det01-benefits{ grid-template-columns:repeat(2,1fr); } .wr-page .wr-footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .wr-page .tagdet-stats-inner{ grid-template-columns:repeat(2,1fr); row-gap:18px; } .wr-page .det01-benefits{ grid-template-columns:1fr; } .wr-page .det01-checklist{ grid-template-columns:1fr; } .wr-page .wr-form-grid{ grid-template-columns:1fr; } .wr-page .wr-footer-top{ grid-template-columns:1fr; } .wr-page .company-media-badge{ left:12px; bottom:-18px; padding:14px 18px; } .wr-page .wr-float-ball{ right:16px; bottom:84px; } .wr-page .tagcat-search{ flex-direction:column; border-radius:16px; gap:8px; padding:10px; } .wr-page .tagcat-search input{ border-radius:10px; } .wr-page .tagcat-search button{ border-radius:10px; padding:12px; } } /* ================================================================= 17. DET01 EXAMPLE / CODE-PREVIEW PAGE Standalone reference file (det01-example.html) — shows editors what backend field det01 should look like once rendered, plus a copyable source block. Scoped under .det01-demo (body class), independent from the .wr-page site-chrome scope. ================================================================= */ .det01-demo{ font-family:var(--font-body, 'Inter', sans-serif); background:#f3efe9; color:#1c1a19; -webkit-font-smoothing:antialiased; } .det01-demo, .det01-demo *, .det01-demo *::before, .det01-demo *::after{ box-sizing:border-box; margin:0; padding:0; } .det01-demo img{ max-width:100%; display:block; } .det01-demo a{ color:inherit; } .det01-demo ul, .det01-demo ol{ list-style:none; } .det01-demo svg{ display:block; } .det01-demo-header{ background:linear-gradient(120deg,#180000,#4a0000 55%,#bf0000); color:#fff; padding:44px 24px 40px; text-align:center; } .det01-demo-header .ui.container{ max-width:820px; margin:0 auto; } .det01-demo-header .det01-demo-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display,'Oswald',sans-serif); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#c98a2b; margin-bottom:14px; } .det01-demo-header h1{ font-family:var(--font-display,'Oswald',sans-serif); font-weight:600; font-size:clamp(22px,3.4vw,30px); margin-bottom:14px; line-height:1.3; } .det01-demo-header p{ font-size:14.5px; color:#ffdede; line-height:1.75; max-width:640px; margin:0 auto; } .det01-demo-header code{ background:rgba(255,255,255,.14); padding:2px 8px; border-radius:4px; font-size:13px; font-family:'SFMono-Regular',Consolas,monospace; } .det01-demo-tabs{ display:flex; justify-content:center; gap:10px; padding:22px 24px 0; background:#f3efe9; } .det01-demo-tab{ font-family:var(--font-display,'Oswald',sans-serif); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:11px 22px; border-radius:999px 999px 0 0; background:#e7e0d8; color:#6b6560; border:1px solid #e0d8cc; border-bottom:none; cursor:pointer; transition:background .16s ease, color .16s ease; } .det01-demo-tab.is-active{ background:#fff; color:#bf0000; } .det01-demo-tab:hover{ color:#bf0000; } .det01-demo-panel{ display:none; } .det01-demo-panel.is-active{ display:block; } .det01-demo-preview{ background:#fff; padding:8px 0 70px; } .det01-demo-preview-note{ max-width:960px; margin:0 auto; padding:22px 24px 0; font-size:13px; color:#6b6560; text-align:center; } .det01-demo-preview-note b{ color:#bf0000; } .det01-code-wrap{ padding:36px 24px 70px; background:#f3efe9; } .det01-code-panel{ max-width:960px; margin:0 auto; background:#1c1a19; border-radius:12px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.18); } .det01-code-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:#262220; border-bottom:1px solid #34302c; } .det01-code-panel-head span{ font-family:var(--font-display,'Oswald',sans-serif); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:#cfc9c2; } .det01-copy-btn{ font-family:var(--font-display,'Oswald',sans-serif); font-weight:600; font-size:12px; letter-spacing:.03em; text-transform:uppercase; background:#bf0000; color:#fff; border:none; border-radius:6px; padding:8px 16px; cursor:pointer; transition:background .16s ease; } .det01-copy-btn:hover{ background:#8f0000; } .det01-copy-btn.is-copied{ background:#3c8f4a; } .det01-code-panel pre{ margin:0; padding:22px 24px; overflow-x:auto; max-height:640px; overflow-y:auto; } .det01-code-panel code{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:12.8px; line-height:1.7; color:#e5e0d9; white-space:pre; } .det01-demo-footer{ text-align:center; padding:30px 24px 50px; background:#f3efe9; font-size:12.5px; color:#9a938d; } .det01-demo-footer a{ color:#bf0000; font-weight:600; } @media (max-width:640px){ .det01-demo-tabs{ padding:18px 16px 0; } .det01-demo-tab{ flex:1; text-align:center; padding:11px 10px; } .det01-code-panel pre{ padding:18px 16px; } } .wr-page .tag-products-section .inner-main-box { margin-top: 50px; } a.foota { text-overflow: ellipsis; vertical-align: middle; overflow: hidden; white-space: nowrap; display: inline-block; width: 300px; margin-left: 3px; } /* ================================================================= BULK SUPPLY INQUIRY FORM — STYLE ONLY Scope: .contact-form-card (the existing form markup / class names are untouched — just include this stylesheet on the same page). All selectors are rooted under .contact-form-card, no bare tag selectors are used. ================================================================= */ .contact-form-card{ --form-primary:#bf0000; --form-primary-dark:#8f0000; --form-primary-soft:#fdecec; --form-ink:#1c1a19; --form-ink-soft:#6b6560; --form-ink-faint:#9a938d; --form-surface:#f7f4f0; --form-line:#e7e0d8; --form-radius-s:4px; --form-radius-l:16px; --form-shadow:0 12px 32px rgba(28,26,25,.10); --form-shadow-primary:0 10px 24px rgba(191,0,0,.22); background:#ffffff; color:var(--form-ink); border-radius:var(--form-radius-l); padding:36px; box-shadow:var(--form-shadow); font-family:Arial, Helvetica, sans-serif; } .contact-form-card *{ box-sizing:border-box; } .contact-form-card h3{ font-weight:600; font-size:19px; margin-bottom:22px; color:var(--form-ink); } /* ---- trust banner: "Over 13,286+ people have already made an inquiry." ---- */ .contact-form-card .des{ display:flex; align-items:center; gap:10px; background:linear-gradient(120deg, var(--form-primary-soft) 0%, #ffffff 100%); border:1px solid var(--form-primary-soft); border-radius:999px; padding:10px 18px; margin-bottom:14px; } .contact-form-card .des::before{ content:""; width:8px; height:8px; min-width:8px; border-radius:50%; background:var(--form-primary); box-shadow:0 0 0 4px var(--form-primary-soft); } .contact-form-card .des p{ margin:0; font-size:13.5px; color:var(--form-ink-soft); } .contact-form-card .des .strong{ color:var(--form-primary); font-weight:700; } .contact-form-card .des .strong em{ font-style:normal; font-weight:700; } /* ---- supporting subtext line ---- */ .contact-form-card .des2{ font-size:13px; color:var(--form-ink-faint); margin-bottom:22px; line-height:1.6; } /* ---- field grid (Name/Email, Phone/Company side by side; Needs and Send full width) ---- */ .contact-form-card .Auxil-form ul{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; list-style:none; margin:0; padding:0; } .contact-form-card .Auxil-form ul li{ list-style:none; } .contact-form-card .Auxil-form ul li:nth-child(5), .contact-form-card .Auxil-form ul li:nth-child(6){ grid-column:1 / -1; } .contact-form-card .Auxil-form label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--form-ink-soft); margin-bottom:7px; text-transform:uppercase; } .contact-form-card .Auxil-form label em{ font-style:normal; color:var(--form-primary); margin-right:2px; } .contact-form-card .Auxil-form input[type="text"], .contact-form-card .Auxil-form textarea{ width:100%; border:1.5px solid var(--form-line); border-radius:var(--form-radius-s); padding:12px 14px; font-size:14px; font-family:inherit; color:var(--form-ink); background:var(--form-surface); transition:border-color .16s ease, background .16s ease; } .contact-form-card .Auxil-form input[type="text"]:focus, .contact-form-card .Auxil-form textarea:focus{ outline:none; border-color:var(--form-primary); background:#ffffff; } .contact-form-card .Auxil-form textarea{ resize:vertical; min-height:110px; } /* ---- submit button (input.inquery) ---- */ .contact-form-card .Auxil-form input.inquery{ width:100%; padding:14px 20px; font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; background:var(--form-primary); color:#ffffff; border:none; border-radius:var(--form-radius-s); cursor:pointer; box-shadow:var(--form-shadow-primary); transition:background .18s ease, transform .18s ease; } .contact-form-card .Auxil-form input.inquery:hover{ background:var(--form-primary-dark); transform:translateY(-2px); } /* ---- responsive ---- */ @media (max-width:640px){ .contact-form-card .Auxil-form ul{ grid-template-columns:1fr; } .contact-form-card .Auxil-form ul li:nth-child(5), .contact-form-card .Auxil-form ul li:nth-child(6){ grid-column:auto; } }