/* ========================================================================= FORGEBUILD CMS TEMPLATE — style.css A reusable design system for a web-development agency site (fintech, banking, investment, POS, VTU, forum, blog, corporate builds). Design language: near-black technical surfaces, a single flat accent colour (no gradients, no colour blends), directional hard-offset shadows for depth instead of blurred glow, a hand-built geometric SVG icon set, and a small library of purposeful motion (line-drawn logomark, animated network diagram, count-up stats, cursor spotlight, staggered reveals). ========================================================================= */ /* ---------- 1. TOKENS ---------------------------------------------------- */ :root{ /* surfaces */ --bg: #0a0a0c; --bg-soft: #0e0f12; --panel: #131417; --panel-raised: #1a1b1f; --panel-hi: #202126; --line: #2a2b30; --line-soft: #1e1f23; /* text */ --ink: #f2f2f0; --ink-dim: #a3a4ab; --ink-mute: #64656c; /* brand — one flat accent, used deliberately and sparingly */ --accent: #ff5a1f; --accent-dim: #7a2e10; --accent-tint: rgba(255,90,31,.12); --accent-ink: #0b0b0c; /* system / status colours — kept distinct from the brand accent */ --success: #33cc7a; --warn: #f2c230; --fail: #ff5d5d; /* elevation — hard, directional offsets instead of blurred colour glow */ --sh-1: 4px 4px 0 rgba(0,0,0,.4); --sh-2: 6px 6px 0 rgba(0,0,0,.45); --sh-3: 10px 10px 0 rgba(0,0,0,.5); --sh-press: 2px 2px 0 rgba(0,0,0,.5); --sh-btn: 4px 4px 0 var(--ink); --sh-btn-hover: 6px 6px 0 var(--ink); --sh-btn-press: 1px 1px 0 var(--ink); /* type */ --f-display: "Space Grotesk", "Segoe UI", sans-serif; --f-body: "Inter", "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", "Consolas", monospace; /* radii — small and consistent; sharper corners read more "engineered" */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; /* layout */ --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --header-h: 80px; /* background dot-grid tint — swapped by the light theme override below */ --dot: rgba(255,255,255,.05); } /* ---------- 1b. LIGHT THEME OVERRIDE -------------------------------------- Toggled by setting data-theme="light" on (see js/components.js). Every other rule in this file reads colours through the variables above, so overriding them here is enough to re-theme the whole site — no duplicate component CSS needed. ---------------------------------------- */ :root[data-theme="light"]{ --bg: #f6f6f3; --bg-soft: #eeeeea; --panel: #ffffff; --panel-raised: #f2f2ef; --panel-hi: #e8e8e3; --line: #dcdcd6; --line-soft: #e6e6e1; --ink: #16171a; --ink-dim: #52535b; --ink-mute: #82838b; --success: #1f9d5c; --warn: #a8720a; --fail: #d5393e; --dot: rgba(0,0,0,.05); } :root[data-theme="light"] .nav{ background:rgba(246,246,243,.86); } /* ---------- 2. RESET ------------------------------------------------------ */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background-color:var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 28px 28px; color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .25s ease, color .25s ease; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } input,textarea,select{ font-family:inherit; } h1,h2,h3,h4{ font-family:var(--f-display); margin:0; line-height:1.15; letter-spacing:-.01em; } p{ margin:0; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .panel, .card, .nav, .footer, .field input, .field textarea, .field select{ transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .22s ease; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* Theme toggle button — shows a sun in dark mode (click for light) and a moon in light mode (click for dark). */ .theme-toggle{ position:relative; } .theme-toggle .theme-icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .theme-icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .theme-icon-moon{ display:inline-flex; } /* SVG icon sizing — every icon in the template is mounted via icons.js */ .icon{ display:inline-flex; width:1em; height:1em; } .icon svg{ width:100%; height:100%; display:block; } i[data-icon]{ display:inline-flex; } /* ---------- 3. LAYOUT HELPERS ------------------------------------------- */ .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block: clamp(56px, 9vw, 120px); position:relative; } .section-head{ max-width:640px; margin-bottom:clamp(32px,5vw,56px); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .eyebrow::before{ content:""; width:18px; height:1px; background:var(--accent); display:inline-block; } .grid{ display:grid; gap:22px; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } /* ---------- 4. PANEL / CARD SYSTEM (hard-offset "3D", no gradients) ----- */ .panel{ background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); position:relative; } .panel-flat{ box-shadow:var(--sh-1); } .panel-deep{ box-shadow:var(--sh-3); } .card{ background:var(--panel); border:1.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:clamp(22px,3vw,30px); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; } .card:hover, .card.lift:hover{ transform:translate(-4px,-4px); box-shadow:var(--sh-3); border-color:#3a3b42; } a.card{ display:block; } /* Icon box — square outlined tile (replaces the old circular gradient chip) */ .icon-box{ width:52px; height:52px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; background:var(--panel-raised); border:1.5px solid var(--line); box-shadow:var(--sh-1); font-size:22px; margin-bottom:18px; color:var(--accent); } .icon-box .icon{ width:24px; height:24px; } /* ---------- 5. BUTTONS — flat fill, hard offset shadow, no gradients ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 26px; border-radius:999px; font-family:var(--f-body); font-weight:600; font-size:14.5px; border:1.5px solid transparent; transition:transform .16s ease, box-shadow .16s ease, background .2s ease, border-color .2s ease; transform:translate(0,0); white-space:nowrap; } .btn .icon{ width:16px; height:16px; } .btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--ink); box-shadow:var(--sh-btn); } .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh-btn-hover); } .btn-primary:active{ transform:translate(2px,2px); box-shadow:var(--sh-btn-press); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink-dim); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line); } .btn-ghost:active{ transform:translate(1px,1px); box-shadow:none; } .btn-sm{ padding:10px 18px; font-size:13px; } /* ---------- 6. HEADER / NAV ---------------------------------------------- */ #site-header{ position:sticky; top:0; z-index:200; } .nav{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; background:rgba(10,10,12,.86); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease; } .nav.is-scrolled{ border-bottom-color:var(--line-soft); box-shadow:0 8px 0 -6px rgba(0,0,0,.4); } .brand{ display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:18px; letter-spacing:-.01em; } /* Logomark: a small hand-drawn square mark whose strokes animate in once on load — a deliberate, singular motion moment rather than a generic gradient badge. */ .brand-mark{ display:inline-flex; width:34px; height:34px; } .logomark{ width:100%; height:100%; overflow:visible; } .logomark-frame{ fill:none; stroke:var(--line); stroke-width:1.6; } .logomark-stroke{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; animation:draw 900ms 200ms cubic-bezier(.3,.8,.3,1) forwards; } .logomark-stroke-2{ stroke-dasharray:10; stroke-dashoffset:10; animation-delay:650ms; } @keyframes draw{ to{ stroke-dashoffset:0; } } .nav-links{ display:flex; align-items:center; gap:4px; } .nav-links a{ padding:10px 15px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink-dim); transition:background .2s ease, color .2s ease; } .nav-links a:hover{ color:var(--ink); background:var(--panel-raised); } .nav-links a.active{ color:var(--accent-ink); background:var(--accent); font-weight:600; } .nav-cta{ display:flex; align-items:center; gap:12px; } .nav-toggle{ display:none; width:42px; height:42px; border-radius:var(--r-sm); background:var(--panel-raised); border:1.5px solid var(--line); align-items:center; justify-content:center; flex-direction:column; gap:5px; } .nav-toggle span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .3s ease; } .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2){ opacity:0; } .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .nav-drop{ position:relative; } .nav-drop-btn{ display:flex; align-items:center; gap:7px; background:none; border:none; padding:10px 15px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink-dim); font-family:inherit; transition:background .2s ease, color .2s ease; } .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn{ color:var(--ink); background:var(--panel-raised); } .nav-drop-btn .caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; margin-top:2px; transition:transform .2s ease; } .nav-drop.open .nav-drop-btn .caret{ transform:rotate(180deg); } .nav-drop-menu{ position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%,-6px); min-width:210px; background:var(--panel-raised); border:1.5px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .nav-drop.open .nav-drop-menu{ opacity:1; pointer-events:auto; transform:translate(-50%,0); } .nav-drop-menu a{ padding:10px 12px; border-radius:8px; font-size:13.5px; color:var(--ink-dim); display:flex; align-items:center; } .nav-drop-menu a:hover{ background:var(--panel-hi); color:var(--ink); } .nav-drop-menu a .icon{ width:15px; height:15px; margin-right:8px; color:var(--accent); flex-shrink:0; } .nav-drop-menu-wide{ min-width:600px; grid-template-columns:repeat(3,1fr); display:grid; } @media (max-width:1100px){ .nav-drop-menu-wide{ min-width:440px; grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .nav-drop-menu-wide{ min-width:0; grid-template-columns:1fr; } } .btn-icon-only{ width:40px; height:40px; border-radius:var(--r-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--panel-raised); border:1.5px solid var(--line); color:var(--ink-dim); transition:color .2s ease, border-color .2s ease, transform .2s ease; } .btn-icon-only .icon{ width:18px; height:18px; } .btn-icon-only:hover{ color:var(--success); border-color:var(--success); transform:translate(-2px,-2px); } @media (max-width:900px){ .nav-links{ position:fixed; inset:var(--header-h) 16px auto 16px; flex-direction:column; align-items:stretch; gap:4px; background:var(--panel-raised); border:1.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:14px; transform:translateY(-14px); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease; } .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-links a{ text-align:center; } .nav-toggle{ display:flex; } .nav-cta .btn-ghost{ display:none; } .nav-drop-menu{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; border:none; background:none; padding:4px 0 4px 14px; display:none; } .nav-drop.open .nav-drop-menu{ display:flex; } .nav-drop-btn{ width:100%; justify-content:center; } } /* ---------- 7. HERO — network diagram motion graphic --------------------- */ .hero{ padding-block:clamp(56px,9vw,100px) clamp(36px,7vw,80px); position:relative; } .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; } @media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } } .hero h1{ font-size:clamp(34px,5.2vw,56px); } .hero .accent-word{ color:var(--accent); background:var(--accent-tint); padding:0 8px; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .hero p.lede{ margin-top:20px; font-size:17px; color:var(--ink-dim); max-width:52ch; } .hero-cta{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; } .hero-stats{ display:flex; gap:32px; margin-top:44px; flex-wrap:wrap; } .hero-stats div b{ display:block; font-family:var(--f-display); font-size:26px; } .hero-stats div span{ font-size:12px; color:var(--ink-mute); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.08em; } /* the diagram frame + cursor spotlight */ .hero-graphic{ position:relative; border-radius:var(--r-xl); border:1.5px solid var(--line); background:var(--panel); box-shadow:var(--sh-3); overflow:hidden; height:420px; display:flex; align-items:center; justify-content:center; } @media (max-width:640px){ .hero-graphic{ height:320px; } } @media (max-width:420px){ .hero-graphic{ height:280px; } } .hero-graphic::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(220px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,90,31,.16), transparent 70%); transition:opacity .3s ease; } .hero-graphic:hover::before{ opacity:1; } .hero-graphic svg{ width:100%; height:100%; } .node-ring{ fill:var(--panel-raised); stroke:var(--line); stroke-width:1.5; } .node-hub{ fill:var(--accent); } .node-icon{ stroke:var(--ink); } .node-icon-hub{ stroke:var(--accent-ink); } .node-link{ fill:none; stroke:var(--line); stroke-width:1.5; } .node-link-flow{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:6 10; animation:dashflow 2.4s linear infinite; } @keyframes dashflow{ to{ stroke-dashoffset:-32; } } .node-pulse{ animation:pulseNode 3.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; } @keyframes pulseNode{ 0%,100%{ opacity:.85; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} } .node-label{ font-family:var(--f-mono); font-size:8.5px; fill:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; } /* ---------- 8. MARQUEE STRIP ---------------------------------------------- */ .marquee{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg-soft); overflow:hidden; } .marquee-track{ display:flex; gap:0; padding:20px 0; width:max-content; animation:scrollx 28s linear infinite; } .marquee-track span{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; padding:0 32px; position:relative; } .marquee-track span::after{ content:""; position:absolute; right:0; top:50%; width:4px; height:4px; background:var(--line); transform:translateY(-50%); } @keyframes scrollx{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* ---------- 9. SERVICES / VERTICALS GRID --------------------------------- */ .vert-card h3{ font-size:19px; margin-bottom:8px; } .vert-card p{ color:var(--ink-dim); font-size:14.5px; } .vert-card .tags{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } .vert-card .tags span{ font-family:var(--f-mono); font-size:11px; padding:5px 10px; border-radius:999px; background:var(--panel-raised); border:1px solid var(--line); color:var(--ink-mute); } /* ---------- 10. PROCESS / TIMELINE ---------------------------------------- */ .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media (max-width:900px){ .timeline{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .timeline{ grid-template-columns:1fr; } } .timeline .step{ padding-top:8px; border-top:2px solid var(--line); position:relative; } .timeline .step::before{ content:attr(data-n); position:absolute; top:-13px; left:0; width:24px; height:24px; border-radius:6px; background:var(--accent); color:var(--accent-ink); font-family:var(--f-mono); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); } .timeline .step h4{ margin-top:22px; font-size:16.5px; } .timeline .step p{ margin-top:8px; font-size:14px; color:var(--ink-dim); } /* ---------- 11. STAT / TESTIMONIAL PANELS --------------------------------- */ .stat-panel{ display:flex; flex-direction:column; gap:6px; padding:26px; } .stat-panel b{ font-family:var(--f-display); font-size:32px; } .stat-panel span{ font-size:12.5px; color:var(--ink-mute); } .quote-panel{ padding:30px; } .quote-panel p{ font-size:16.5px; color:var(--ink); } .quote-panel .who{ margin-top:18px; display:flex; align-items:center; gap:12px; } .avatar-mark{ width:40px; height:40px; border-radius:var(--r-sm); background:var(--panel-raised); border:1.5px solid var(--line); flex-shrink:0; } .who b{ display:block; font-size:14px; } .who span{ font-size:12.5px; color:var(--ink-mute); } /* ---------- 12. PRICING ---------------------------------------------------- */ .price-card{ display:flex; flex-direction:column; gap:16px; } .price-card.is-highlight{ border-color:var(--accent); box-shadow:6px 6px 0 var(--accent-dim); } .price-card .amount{ font-family:var(--f-display); font-size:34px; } .price-card .amount small{ font-family:var(--f-body); font-size:13px; color:var(--ink-mute); font-weight:400; } .price-card ul{ display:flex; flex-direction:column; gap:11px; margin:8px 0; } .price-card li{ font-size:14px; color:var(--ink-dim); display:flex; align-items:center; gap:9px; } .price-card li i[data-icon]{ color:var(--accent); width:15px; height:15px; flex-shrink:0; } /* ---------- 13. FORM ELEMENTS ---------------------------------------------- */ .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .field label{ font-size:12.5px; color:var(--ink-dim); font-family:var(--f-mono); letter-spacing:.03em; } .field input, .field textarea, .field select{ background:var(--bg-soft); border:1.5px solid var(--line); color:var(--ink); padding:13px 15px; border-radius:var(--r-sm); font-size:14.5px; transition:border-color .2s ease, box-shadow .2s ease; } .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); outline:none; } .field textarea{ resize:vertical; min-height:120px; } /* ---------- 14. FOOTER ------------------------------------------------------ */ #site-footer{ margin-top:80px; } .footer{ background:var(--bg-soft); border-top:1px solid var(--line-soft); padding-block:clamp(48px,7vw,72px) 28px; } .footer-grid{ display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:32px; } @media (max-width:1080px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } } .footer h5{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); margin-bottom:16px; } .footer ul{ display:flex; flex-direction:column; gap:11px; } .footer a{ font-size:14.5px; color:var(--ink-dim); transition:color .2s ease; } .footer a:hover{ color:var(--accent); } .footer-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; } .footer-bottom span{ font-size:12.5px; color:var(--ink-mute); } .socials{ display:flex; gap:10px; } .socials a{ width:36px; height:36px; border-radius:var(--r-sm); background:var(--panel-raised); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:color .2s ease, border-color .2s ease, transform .2s ease; } .socials a .icon{ width:16px; height:16px; } .socials a:hover{ color:var(--accent); border-color:var(--accent-dim); transform:translate(-2px,-2px); } /* ---------- 15. UTILITIES --------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:translateY(0); } .text-center{ text-align:center; margin-inline:auto; } .mt-lg{ margin-top:clamp(32px,5vw,56px); } .badge{ display:inline-block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; padding:6px 12px; border-radius:999px; background:var(--panel-raised); border:1px solid var(--line); color:var(--accent); } .divider{ height:1px; background:var(--line-soft); border:0; margin:0; } .back-to-top{ position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-2); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease; z-index:150; } .back-to-top .icon{ width:18px; height:18px; } .back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); } .back-to-top:hover{ transform:translate(-2px,-2px); box-shadow:var(--sh-3); } /* ---------- 16. PAGE HERO (inner pages) ------------------------------------- */ .page-hero{ padding-block:52px 38px; border-bottom:1px solid var(--line-soft); } .page-hero .crumb{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-mute); margin-bottom:14px; } .page-hero .crumb a{ color:var(--accent); } .page-hero h1{ font-size:clamp(28px,4.4vw,42px); } /* ---------- 17. BLOG TEMPLATE ---------------------------------------------- */ .post-feature{ display:grid; grid-template-columns:1fr; gap:0; overflow:hidden; padding:0; } .post-feature .cover{ height:220px; border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:1.5px solid var(--line); background:var(--panel-raised); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:22px; } .post-feature .cover-graphic{ position:absolute; inset:0; opacity:.9; } .post-feature .cover span{ position:relative; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--bg); padding:6px 12px; border-radius:999px; border:1px solid var(--line); } .post-feature .body{ padding:28px; } .post-feature h2{ font-size:clamp(22px,3vw,28px); } .post-feature p{ color:var(--ink-dim); margin-top:12px; max-width:65ch; } .post-meta{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:12.5px; color:var(--ink-mute); font-family:var(--f-mono); } .post-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-mute); } .post-card{ display:flex; flex-direction:column; gap:0; overflow:hidden; padding:0; } .post-card .thumb{ height:140px; background:var(--panel-raised); border-bottom:1.5px solid var(--line); position:relative; display:flex; align-items:flex-start; padding:14px; } .post-card .thumb-graphic{ position:absolute; inset:0; opacity:.85; } .post-card .thumb span{ position:relative; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); background:var(--bg); padding:5px 10px; border-radius:999px; border:1px solid var(--line); } .post-card .body{ padding:20px; } .post-card h3{ font-size:16.5px; } .post-card p{ color:var(--ink-dim); font-size:13.5px; margin-top:8px; } .newsletter-panel{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(24px,4vw,36px); } .newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; } .newsletter-form input{ background:var(--bg-soft); border:1.5px solid var(--line); color:var(--ink); padding:13px 16px; border-radius:999px; font-size:14px; min-width:240px; } .article-body{ max-width:70ch; margin-inline:auto; } .article-body h1{ font-size:clamp(28px,4.4vw,42px); } .article-body p{ color:var(--ink-dim); margin-top:18px; font-size:16.5px; line-height:1.75; } .article-body h3{ margin-top:34px; font-size:21px; color:var(--ink); } .article-body blockquote{ margin:28px 0; padding:20px 24px; border-left:3px solid var(--accent); background:var(--panel); border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink-dim); font-style:italic; } /* ---------- 18. FORUM TEMPLATE --------------------------------------------- */ .forum-cat{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; } .forum-cat .info{ display:flex; align-items:center; gap:16px; } .forum-cat h4{ font-size:16px; } .forum-cat p{ color:var(--ink-mute); font-size:13px; margin-top:4px; } .forum-cat .nums{ display:flex; gap:26px; } .forum-cat .nums div{ text-align:right; } .forum-cat .nums b{ display:block; font-family:var(--f-display); font-size:18px; } .forum-cat .nums span{ font-size:11px; color:var(--ink-mute); font-family:var(--f-mono); text-transform:uppercase; } @media (max-width:640px){ .forum-cat{ flex-direction:column; align-items:flex-start; } .forum-cat .nums{ align-self:stretch; justify-content:space-between; } } .thread-row{ display:flex; align-items:center; gap:18px; padding:18px 22px; } .thread-row .avatar-mark{ flex-shrink:0; } .thread-row .main{ flex:1; min-width:0; } .thread-row h4{ font-size:15px; } .thread-row .thread-tags{ display:flex; gap:6px; margin-top:6px; } .thread-row .thread-tags span{ font-family:var(--f-mono); font-size:10.5px; padding:3px 9px; border-radius:999px; background:var(--panel-raised); border:1px solid var(--line); color:var(--ink-mute); } .thread-row .stats{ display:flex; gap:22px; flex-shrink:0; } .thread-row .stats div{ text-align:center; } .thread-row .stats b{ display:block; font-size:14px; font-family:var(--f-display); } .thread-row .stats span{ font-size:10.5px; color:var(--ink-mute); font-family:var(--f-mono); text-transform:uppercase; } .thread-row .status{ font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; padding:5px 10px; border-radius:999px; flex-shrink:0; } .status-hot{ background:rgba(255,90,31,.12); color:var(--accent); border:1px solid rgba(255,90,31,.3); } .status-open{ background:rgba(51,204,122,.12); color:var(--success); border:1px solid rgba(51,204,122,.28); } @media (max-width:760px){ .thread-row{ flex-wrap:wrap; } .thread-row .stats{ display:none; } } /* ---------- 19. ADMIN / DASHBOARD (POS / VTU console) ---------------------- */ .dash-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; } @media (max-width:960px){ .dash-shell{ grid-template-columns:1fr; } } .dash-sidebar{ background:var(--bg-soft); border-right:1px solid var(--line-soft); padding:20px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto; } .dash-brand{ display:flex; align-items:center; gap:10px; padding:8px 10px 22px; font-family:var(--f-display); font-weight:700; font-size:14.5px; } .dash-nav-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); padding:16px 12px 8px; } .dash-link{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); color:var(--ink-dim); font-size:13.5px; font-weight:500; transition:background .2s ease, color .2s ease; } .dash-link .icon{ width:17px; height:17px; flex-shrink:0; } .dash-link:hover{ background:var(--panel-raised); color:var(--ink); } .dash-link.active{ background:var(--accent); color:var(--accent-ink); font-weight:600; } /* Below 960px the sidebar becomes a horizontal, swipeable tab strip along the top of the panel instead of vanishing — the nav stays reachable on a phone, it just changes shape. */ @media (max-width:960px){ .dash-sidebar{ flex-direction:row; align-items:center; gap:6px; position:static; height:auto; width:100%; overflow-x:auto; overflow-y:visible; white-space:nowrap; border-right:none; border-bottom:1px solid var(--line-soft); padding:12px; -ms-overflow-style:none; scrollbar-width:none; } .dash-sidebar::-webkit-scrollbar{ display:none; } .dash-brand, .dash-nav-label{ display:none; } .dash-link{ flex-shrink:0; } .dash-link span{ display:none; } } .dash-main{ padding:24px clamp(18px,3vw,32px) 56px; } @media (max-width:560px){ .dash-main{ padding:18px 16px 40px; } } .dash-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; } .dash-topbar h1{ font-size:21px; } @media (max-width:480px){ .dash-topbar h1{ font-size:18px; } } .dash-search{ display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1.5px solid var(--line); border-radius:999px; padding:10px 16px; min-width:220px; flex:1; color:var(--ink-mute); font-size:13px; } @media (max-width:480px){ .dash-search{ min-width:0; width:100%; } } .dash-search .icon{ width:15px; height:15px; flex-shrink:0; } .kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; } @media (max-width:960px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .kpi-grid{ grid-template-columns:1fr; } } .kpi-card{ padding:20px; } .kpi-card .top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; } .kpi-card .label{ font-size:12px; color:var(--ink-mute); font-family:var(--f-mono); text-transform:uppercase; } .kpi-card .delta{ font-family:var(--f-mono); font-size:11px; padding:4px 9px; border-radius:999px; white-space:nowrap; } .delta-up{ color:var(--success); background:rgba(51,204,122,.12); border:1px solid rgba(51,204,122,.28); } .delta-down{ color:var(--fail); background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.28); } .kpi-card b{ display:block; font-family:var(--f-display); font-size:24px; margin-top:14px; word-break:break-word; } .kpi-card span.sub{ font-size:12px; color:var(--ink-mute); } .quick-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; } @media (max-width:760px){ .quick-actions{ grid-template-columns:repeat(2,1fr); } } .qa-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 12px; border-radius:var(--r-md); background:var(--panel-raised); border:1.5px solid var(--line); font-size:12.5px; color:var(--ink-dim); font-weight:500; text-align:center; transition:transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease; } .qa-btn .icon{ width:20px; height:20px; color:var(--accent); } .qa-btn:hover{ transform:translate(-3px,-3px); box-shadow:var(--sh-1); color:var(--ink); border-color:#3a3b42; } .dash-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .dash-panel-head h3{ font-size:16px; } .data-table{ width:100%; border-collapse:collapse; font-size:13.5px; } .data-table th{ text-align:left; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); padding:12px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; } .data-table td{ padding:13px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-dim); white-space:nowrap; } .data-table tr:last-child td{ border-bottom:none; } .data-table td.strong{ color:var(--ink); font-weight:600; } .pill{ font-family:var(--f-mono); font-size:10.5px; padding:5px 11px; border-radius:999px; display:inline-block; } .pill-success{ background:rgba(51,204,122,.12); color:var(--success); border:1px solid rgba(51,204,122,.28); } .pill-pending{ background:rgba(242,194,48,.14); color:var(--warn); border:1px solid rgba(242,194,48,.3); } .pill-failed{ background:rgba(255,93,93,.12); color:var(--fail); border:1px solid rgba(255,93,93,.28); } .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .dash-frame{ border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); } .dash-frame .dash-shell{ min-height:auto; } .dash-frame .dash-sidebar{ position:static; height:auto; min-height:640px; } @media (max-width:960px){ .dash-frame .dash-sidebar{ min-height:auto; } } @media (max-width:600px){ .dash-frame{ border-radius:var(--r-md); } } /* ---------- 20. SHARED WIDGETS FOR THE NEWER TEMPLATES --------------------- */ /* Progress bars — delivery / M&E indicator tracking */ .progress-row{ padding:16px 0; border-bottom:1px solid var(--line-soft); } .progress-row:last-child{ border-bottom:none; } .progress-row .head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:12px; } .progress-row .head h4{ font-size:14.5px; } .progress-row .head span{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-mute); flex-shrink:0; } .progress-track{ height:8px; border-radius:999px; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; } .progress-fill{ height:100%; background:var(--accent); border-radius:999px; transition:width 1s cubic-bezier(.2,.8,.2,1); } .progress-fill.is-warn{ background:var(--warn); } .progress-fill.is-fail{ background:var(--fail); } /* Inline up/down deltas for table rows (crypto holdings, etc.) */ .txt-up{ color:var(--success); font-family:var(--f-mono); font-size:13px; } .txt-down{ color:var(--fail); font-family:var(--f-mono); font-size:13px; } /* Simple line/area chart wrapper (raw inline SVG per page) */ .mini-chart{ width:100%; height:180px; } .mini-chart .chart-line{ fill:none; stroke:var(--accent); stroke-width:2; } .mini-chart .chart-area{ fill:var(--accent); opacity:.08; } .mini-chart .chart-grid{ stroke:var(--line-soft); stroke-width:1; } /* Phone mockup frame — used on the app-development template instead of stock screenshots; built entirely from borders/shadows, no bitmap. */ .phone-frame{ width:230px; border:8px solid var(--panel-hi); border-radius:34px; background:var(--bg-soft); box-shadow:var(--sh-3); overflow:hidden; flex-shrink:0; } .phone-frame .phone-notch{ height:22px; display:flex; align-items:center; justify-content:center; } .phone-frame .phone-notch::after{ content:""; width:60px; height:6px; border-radius:999px; background:var(--panel-hi); } .phone-frame .phone-screen{ padding:14px; height:420px; display:flex; flex-direction:column; gap:10px; } .phone-frame .phone-app-header{ display:flex; align-items:center; justify-content:space-between; } .phone-frame .phone-app-header b{ font-size:13px; } .phone-frame .phone-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; } .phone-frame .phone-line{ height:8px; border-radius:4px; background:var(--panel-hi); } .phone-frame .phone-btn{ margin-top:auto; background:var(--accent); color:var(--accent-ink); text-align:center; padding:10px; border-radius:999px; font-size:12px; font-weight:700; } .phone-frame .phone-tabbar{ display:flex; justify-content:space-around; padding-top:8px; border-top:1px solid var(--line-soft); } .phone-frame .phone-tabbar .icon{ width:16px; height:16px; color:var(--ink-mute); } .phone-frame .phone-tabbar .icon.is-active{ color:var(--accent); } .platform-row{ display:flex; gap:12px; flex-wrap:wrap; } .platform-row .badge{ display:flex; align-items:center; gap:7px; padding:9px 15px; } .platform-row .badge .icon{ width:14px; height:14px; } .stack-grid{ display:flex; flex-wrap:wrap; gap:10px; } .stack-pill{ font-family:var(--f-mono); font-size:13px; padding:9px 16px; border-radius:999px; background:var(--panel-raised); border:1.5px solid var(--line); color:var(--ink-dim); transition:border-color .2s ease, color .2s ease, transform .2s ease; } .stack-pill:hover{ border-color:var(--accent); color:var(--ink); transform:translate(-2px,-2px); } /* ---------- 21. REAL ESTATE — property cards -------------------------------- */ .property-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; } .property-card .shot{ height:170px; background:var(--panel-raised); border-bottom:1.5px solid var(--line); position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:14px; } .property-card .shot-graphic{ position:absolute; inset:0; opacity:.85; } .property-card .shot span{ position:relative; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--bg); } .property-card .shot .tag-status{ color:var(--success); } .property-card .shot .tag-price{ color:var(--accent); } .property-card .body{ padding:20px; display:flex; flex-direction:column; gap:10px; } .property-card h3{ font-size:16.5px; } .property-card .loc{ font-size:13px; color:var(--ink-mute); display:flex; align-items:center; gap:6px; } .property-card .loc .icon{ width:13px; height:13px; } .property-card .meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:4px; padding-top:12px; border-top:1px solid var(--line-soft); } .property-card .meta span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-dim); } .property-card .meta .icon{ width:15px; height:15px; color:var(--accent); } .filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:16px 18px; margin-bottom:28px; } .filter-bar select, .filter-bar input{ background:var(--bg-soft); border:1.5px solid var(--line); color:var(--ink); padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px; } @media (max-width:640px){ .filter-bar{ flex-direction:column; align-items:stretch; } .filter-bar select, .filter-bar input, .filter-bar button{ width:100%; } } /* ---------- 22. ECOMMERCE — product / vendor cards -------------------------- */ .product-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; } .product-card .shot{ height:150px; background:var(--panel-raised); border-bottom:1.5px solid var(--line); position:relative; display:flex; align-items:flex-start; padding:12px; } .product-card .shot-graphic{ position:absolute; inset:0; opacity:.85; } .product-card .shot span{ position:relative; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding:4px 9px; border-radius:999px; border:1px solid var(--line); background:var(--bg); } .product-card .body{ padding:16px; } .product-card h4{ font-size:14.5px; } .product-card .price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:10px; } .product-card .price-row b{ font-family:var(--f-display); font-size:16px; } .product-card .price-row button{ width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink); border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .16s ease; } .product-card .price-row button:hover{ transform:translate(-2px,-2px); } .product-card .price-row button .icon{ width:15px; height:15px; } .vendor-row{ display:flex; align-items:center; gap:16px; padding:18px 22px; flex-wrap:wrap; } .vendor-row .icon-box{ margin:0; flex-shrink:0; } .vendor-row .info{ flex:1; min-width:160px; } .vendor-row h4{ font-size:15px; } .vendor-row p{ font-size:12.5px; color:var(--ink-mute); margin-top:3px; } .vendor-row .nums{ text-align:right; flex-shrink:0; margin-left:auto; } .vendor-row .nums b{ display:block; font-family:var(--f-display); font-size:16px; } .vendor-row .nums span{ font-size:11px; color:var(--ink-mute); font-family:var(--f-mono); text-transform:uppercase; } /* ---------- 23. LOAN APPLICATION — stepper ---------------------------------- */ .stepper{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; } .stepper .step{ flex:1; text-align:center; position:relative; min-width:0; } .stepper .step::before{ content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; } .stepper .step:first-child::before{ display:none; } .stepper .step.is-done::before{ background:var(--accent); } .stepper .dot{ width:32px; height:32px; border-radius:50%; background:var(--panel-raised); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; position:relative; z-index:1; font-family:var(--f-mono); font-size:13px; color:var(--ink-mute); flex-shrink:0; } .stepper .step.is-done .dot{ background:var(--accent); border-color:var(--ink); color:var(--accent-ink); } .stepper .step.is-active .dot{ border-color:var(--accent); color:var(--accent); } .stepper .step span{ font-size:12px; color:var(--ink-mute); } .stepper .step.is-done span, .stepper .step.is-active span{ color:var(--ink); } @media (max-width:640px){ .stepper .step span{ display:none; } } @media (max-width:420px){ .stepper .dot{ width:26px; height:26px; font-size:11px; } .stepper .step::before{ top:12px; } }