/* ========================================================================== Cloudgods — Design System Light-first, softly animated background with a purple/blue accent system. Dark mode available via [data-theme="dark"] on . ========================================================================== */ /* Inter is loaded via a tag in each page's , not @import, so the browser's preload scanner can discover and fetch it immediately instead of waiting for this stylesheet to finish downloading first. */ :root{ /* ---- surfaces : light mode (default) ---- */ --bg-0:#fbfbfd; --bg-1:#ffffff; --bg-2:#f5f5f7; --bg-3:#eceef2; /* ---- text ---- */ --text-primary:#15161a; --text-secondary:#5b5d66; --text-tertiary:#98999f; /* ---- borders / hairlines ---- */ --border: rgba(15,16,20,0.09); --border-strong: rgba(15,16,20,0.14); --border-glow: rgba(90,90,255,0.35); /* ---- glass surfaces ---- */ --glass-bg: rgba(255,255,255,0.55); --glass-bg-strong: rgba(255,255,255,0.5); --glass-bg-scrolled: rgba(255,255,255,0.75); --glass-border: rgba(15,16,20,0.08); /* ---- inputs / raised surfaces ---- */ --surface-1: rgba(15,16,20,0.035); --surface-hover: rgba(15,16,20,0.05); /* ---- accents (kept consistent across themes) ---- */ --blue:#3b6dff; --teal:#12b3c9; --purple:#9b4dff; --indigo:#6a5cff; --green:#1fb257; --amber:#ff9500; --accent-grad: linear-gradient(135deg, var(--blue), var(--purple) 55%, var(--teal)); /* ---- button contrast ---- */ --btn-primary-bg:#15161a; --btn-primary-text:#ffffff; /* ---- shadows ---- */ --shadow-sm: 0 1px 2px rgba(20,20,40,0.05), 0 0 0 0.5px rgba(20,20,40,0.04); --shadow-md: 0 8px 24px rgba(20,20,50,0.08), 0 0 0 0.5px rgba(20,20,40,0.05); --shadow-lg: 0 24px 60px rgba(20,20,50,0.12), 0 2px 8px rgba(20,20,50,0.06), 0 0 0 0.5px rgba(20,20,40,0.06); --shadow-glow: 0 0 40px rgba(59,109,255,0.10), 0 0 90px rgba(155,77,255,0.08); --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; --radius-xs: 10px; --ease: cubic-bezier(.16,1,.3,1); color-scheme: light; } /* ---- surfaces : dark mode ---- */ :root[data-theme="dark"]{ --bg-0:#07080b; --bg-1:#0c0e13; --bg-2:#12141b; --bg-3:#1a1d26; --text-primary:#f5f5f7; --text-secondary:#98989f; --text-tertiary:#63636a; --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --border-glow: rgba(255,255,255,0.22); --glass-bg: rgba(255,255,255,0.055); --glass-bg-strong: rgba(20,22,29,0.45); --glass-bg-scrolled: rgba(20,22,29,0.72); --glass-border: rgba(255,255,255,0.09); --surface-1: rgba(255,255,255,0.045); --surface-hover: rgba(255,255,255,0.06); --blue:#0a84ff; --teal:#64d2ff; --purple:#bf5af2; --indigo:#6f6fff; --green:#30d158; --amber:#ff9f0a; --btn-primary-bg:#f5f5f7; --btn-primary-text:#0a0a0c; --shadow-sm: 0 0 0 0.5px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 0 0 0.5px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 0 0 0.5px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.55); --shadow-glow: 0 0 40px rgba(10,132,255,0.18), 0 0 90px rgba(191,90,242,0.10); color-scheme: dark; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg-0); color:var(--text-primary); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; transition: background .4s var(--ease), color .4s var(--ease); } h1,h2,h3,h4{ margin:0; letter-spacing:-0.03em; font-weight:800; } p{ margin:0; color:var(--text-secondary); line-height:1.6; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } img{ max-width:100%; display:block; } button{ font-family:inherit; } .container{ max-width:1200px; margin:0 auto; padding:0 32px; } section{ position:relative; padding:64px 0; } @media (max-width: 720px){ section{ padding:60px 0; } .container{ padding:0 22px; } } /* ---------------------------------------------------------------------- */ /* Ambient background — soft animated color wash */ /* ---------------------------------------------------------------------- */ .mesh{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--bg-0); transition: background .4s var(--ease); } .mesh::before, .mesh::after, .mesh span{ content:''; position:absolute; border-radius:50%; filter:blur(110px); will-change: transform; opacity:0.4; transition: opacity .5s var(--ease); } .mesh::before{ width:680px; height:680px; background:radial-gradient(circle, var(--blue), transparent 70%); top:-220px; left:-180px; animation: drift1 30s ease-in-out infinite; } .mesh::after{ width:600px; height:600px; background:radial-gradient(circle, var(--purple), transparent 70%); bottom:-220px; right:-160px; animation: drift2 34s ease-in-out infinite; } .mesh span{ width:520px; height:520px; background:radial-gradient(circle, var(--teal), transparent 70%); top:35%; left:52%; opacity:0.22; animation: drift3 38s ease-in-out infinite; } :root[data-theme="dark"] .mesh::before, :root[data-theme="dark"] .mesh::after{ opacity:0.55; } :root[data-theme="dark"] .mesh span{ opacity:0.28; } @keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(90px,70px) scale(1.08)} } @keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-70px,-90px) scale(1.1)} } @keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-110px,50px) scale(1.18)} } .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.02; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .grain{ opacity:0.035; } /* ---------------------------------------------------------------------- */ /* Glass surfaces */ /* ---------------------------------------------------------------------- */ .glass{ background: var(--glass-bg); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); border:0.5px solid var(--glass-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } /* ---------------------------------------------------------------------- */ /* Nav */ /* ---------------------------------------------------------------------- */ .nav-wrap{ position:fixed; top:18px; left:0; right:0; z-index:100; display:flex; flex-direction:column; align-items:center; padding:0 20px; } .nav-wrap .mobile-menu{ width:100%; } .nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; max-width:1080px; padding:10px 10px 10px 20px; background: var(--glass-bg-strong); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border:0.5px solid var(--glass-border); border-radius:100px; box-shadow: var(--shadow-lg); transition: background .3s var(--ease), border-color .3s var(--ease); } .nav.scrolled{ background: var(--glass-bg-scrolled); } .nav-logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; } .nav-logo .mark{ width:26px; height:26px; border-radius:8px; background:var(--accent-grad); box-shadow:0 0 16px rgba(90,90,255,0.35); flex:none; } .nav-links{ display:flex; align-items:center; gap:4px; font-size:13.5px; font-weight:500; } .nav-links a{ padding:8px 14px; border-radius:100px; color:var(--text-secondary); transition: color .2s, background .2s; } .nav-links a:hover{ color:var(--text-primary); background:var(--surface-hover); } .nav-links a.active{ color:var(--text-primary); background:var(--surface-1); } .nav-cta{ padding:9px 18px; border-radius:100px; background:var(--btn-primary-bg); color:var(--btn-primary-text); font-size:13.5px; font-weight:700; white-space:nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(20,20,40,0.18); } .nav-toggle{ display:none; } .theme-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; flex:none; background:var(--surface-1); border:0.5px solid var(--glass-border); cursor:pointer; color:var(--text-secondary); transition: background .2s, color .2s; } .theme-toggle:hover{ background:var(--surface-hover); color:var(--text-primary); } .theme-toggle svg{ width:16px; height:16px; } .theme-toggle .sun{ display:none; } :root[data-theme="dark"] .theme-toggle .sun{ display:block; } :root[data-theme="dark"] .theme-toggle .moon{ display:none; } @media (max-width: 860px){ .nav-links{ display:none; } .nav-toggle{ display:flex; flex:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--surface-1); border:0.5px solid var(--glass-border); cursor:pointer; color:var(--text-primary); } .nav{ padding:10px 10px 10px 18px; } } .mobile-menu{ display:none; flex-direction:column; gap:4px; max-width:1080px; margin:8px auto 0; padding:10px; background: var(--glass-bg-strong); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border:0.5px solid var(--glass-border); border-radius:22px; box-shadow: var(--shadow-lg); } .mobile-menu.open{ display:flex; } .mobile-menu a{ padding:12px 16px; border-radius:14px; font-size:15px; font-weight:500; color:var(--text-secondary); } .mobile-menu a:hover, .mobile-menu a.active{ color:var(--text-primary); background:var(--surface-hover); } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:100px; font-size:14.5px; font-weight:700; letter-spacing:-0.01em; cursor:pointer; border:none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(20,20,40,0.2); } .btn-ghost{ background:var(--surface-1); border:0.5px solid var(--border-strong); color:var(--text-primary); } .btn-ghost:hover{ background:var(--surface-hover); transform:translateY(-2px); } .btn-arrow{ transition: transform .3s var(--ease); } .btn:hover .btn-arrow{ transform:translateX(3px); } /* ---------------------------------------------------------------------- */ /* Eyebrow / pill labels */ /* ---------------------------------------------------------------------- */ .pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px; font-size:12.5px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; color:var(--text-secondary); background:var(--surface-1); border:0.5px solid var(--border); } .pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); } /* ---------------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------------- */ .hero{ padding:200px 0 70px; text-align:center; position:relative; } .hero h1{ font-size:clamp(30px, 4.2vw, 52px); line-height:1.1; margin:22px auto 20px; max-width:680px; } .hero h1 .grad{ background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero .lead{ max-width:620px; margin:0 auto 40px; font-size:18px; line-height:1.6; } .hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ---------------------------------------------------------------------- */ /* Section heading */ /* ---------------------------------------------------------------------- */ .section-head{ max-width:640px; margin-bottom:42px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .section-head h2{ font-size:clamp(30px,4vw,46px); line-height:1.08; margin-top:16px; } .section-head p{ margin-top:16px; font-size:16.5px; } /* ---------------------------------------------------------------------- */ /* Cards */ /* ---------------------------------------------------------------------- */ .grid{ display:grid; gap:20px; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-2{ grid-template-columns:repeat(2,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-3, .grid-4, .grid-2{ grid-template-columns:1fr; } } .card{ padding:30px; position:relative; overflow:hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } .card:hover{ transform:translateY(-4px); border-color:var(--border-glow); box-shadow: var(--shadow-lg), var(--shadow-glow); } .card .icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--surface-1); border:0.5px solid var(--border); margin-bottom:20px; color:var(--teal); } .card .icon svg{ width:22px; height:22px; } .card h3{ font-size:18.5px; font-weight:700; margin-bottom:10px; letter-spacing:-0.01em; } .card p{ font-size:14.5px; } .card .num{ position:absolute; top:22px; right:26px; font-size:13px; font-weight:700; color:var(--text-tertiary); font-family: "SF Mono", Menlo, monospace; } .card ul.list{ margin-top:16px; display:flex; flex-direction:column; gap:8px; } .card ul.list li{ font-size:13.5px; color:var(--text-secondary); padding-left:18px; position:relative; } .card ul.list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--teal); } /* ---------------------------------------------------------------------- */ /* Reveal on scroll */ /* ---------------------------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity:1; transform:translateY(0); } .reveal-delay-1{ transition-delay:.08s; } .reveal-delay-2{ transition-delay:.16s; } .reveal-delay-3{ transition-delay:.24s; } .reveal-delay-4{ transition-delay:.32s; } /* ---------------------------------------------------------------------- */ /* Stats strip */ /* ---------------------------------------------------------------------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-radius:var(--radius-md); overflow:hidden; border:0.5px solid var(--border); } .stat{ padding:34px 20px; text-align:center; background:var(--surface-1); } .stat .n{ font-size:36px; font-weight:800; letter-spacing:-0.02em; } .stat .l{ font-size:12.5px; color:var(--text-secondary); margin-top:6px; } @media (max-width:720px){ .stats{ grid-template-columns:repeat(2,1fr); } } /* ---------------------------------------------------------------------- */ /* Trust strip */ /* ---------------------------------------------------------------------- */ .trust-strip{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .trust-strip .pill{ font-size:12px; text-transform:none; letter-spacing:0; font-weight:500; } /* ---------------------------------------------------------------------- */ /* Divider glow line */ /* ---------------------------------------------------------------------- */ .hairline{ height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--border-strong), transparent); } /* ---------------------------------------------------------------------- */ /* Timeline (Approach / Story) */ /* ---------------------------------------------------------------------- */ .timeline{ position:relative; padding-left:36px; } .timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, var(--blue), var(--purple), var(--teal)); opacity:0.5; } .tl-item{ position:relative; padding-bottom:44px; } .tl-item:last-child{ padding-bottom:0; } .tl-item::before{ content:''; position:absolute; left:-36px; top:4px; width:19px; height:19px; border-radius:50%; background:var(--bg-1); border:2px solid var(--blue); box-shadow:0 0 0 4px rgba(59,109,255,0.14); } .tl-item h3{ font-size:18px; margin-bottom:8px; } .tl-item .tag{ font-size:12px; color:var(--teal); font-weight:700; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:6px; display:block; } .tl-item p{ font-size:14.5px; max-width:560px; } /* ---------------------------------------------------------------------- */ /* Team */ /* ---------------------------------------------------------------------- */ .person{ padding:26px; text-align:left; } .person .avatar{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; background:var(--accent-grad); color:#fff; margin-bottom:18px; } .person h3{ font-size:16.5px; margin-bottom:3px; } .person .role{ font-size:13px; color:var(--teal); font-weight:600; margin-bottom:12px; display:block; } .person p{ font-size:13.5px; } /* ---------------------------------------------------------------------- */ /* CTA band */ /* ---------------------------------------------------------------------- */ .cta-band{ padding:70px 50px; text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:''; position:absolute; inset:-40%; background:radial-gradient(circle at 30% 20%, rgba(59,109,255,0.16), transparent 60%), radial-gradient(circle at 80% 80%, rgba(155,77,255,0.14), transparent 60%); pointer-events:none; } :root[data-theme="dark"] .cta-band::before{ background:radial-gradient(circle at 30% 20%, rgba(10,132,255,0.25), transparent 60%), radial-gradient(circle at 80% 80%, rgba(191,90,242,0.22), transparent 60%); } .cta-band h2{ font-size:clamp(28px,4vw,42px); margin-bottom:14px; position:relative; } .cta-band p{ max-width:480px; margin:0 auto 30px; position:relative; } .cta-band .hero-cta{ position:relative; } /* ---------------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------------- */ footer{ padding:70px 0 40px; position:relative; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; } .footer-grid h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-tertiary); margin-bottom:16px; font-weight:700; } .footer-grid a, .footer-grid p{ font-size:14px; color:var(--text-secondary); display:block; margin-bottom:10px; } .footer-grid a:hover{ color:var(--text-primary); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; border-top:0.5px solid var(--border); font-size:12.5px; color:var(--text-tertiary); } @media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr 1fr; } } /* ---------------------------------------------------------------------- */ /* Page hero (non-home) */ /* ---------------------------------------------------------------------- */ .page-hero{ padding:170px 0 60px; } .page-hero h1{ font-size:clamp(36px,5.6vw,64px); line-height:1.04; margin:22px 0 18px; max-width:760px; } .page-hero p{ font-size:17px; max-width:560px; } /* ---------------------------------------------------------------------- */ /* Form elements */ /* ---------------------------------------------------------------------- */ input, textarea, select{ color-scheme: light dark; } input::placeholder, textarea::placeholder{ color:var(--text-tertiary); } /* ---------------------------------------------------------------------- */ /* Utility */ /* ---------------------------------------------------------------------- */ .flex{ display:flex; } .items-center{ align-items:center; } .gap-3{ gap:12px; } .mt-lg{ margin-top:32px; } .text-center{ text-align:center; } .two-col{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; } .two-col.align-start{ align-items:start; } @media (max-width: 900px){ .two-col{ grid-template-columns:1fr; } } /* ---------------------------------------------------------------------- */ /* Services page: one unified panel per service, consistent every time */ /* ---------------------------------------------------------------------- */ .service-block{ padding:26px 0; } .service-block:first-of-type{ padding-top:10px; } .service-panel{ padding:44px; } .service-panel-grid{ gap:52px; } .service-panel-list{ padding-left:40px; border-left:0.5px solid var(--border); } .service-panel-list h3{ font-size:18.5px; font-weight:700; margin-bottom:16px; letter-spacing:-0.01em; } .service-panel-list ul.list{ display:flex; flex-direction:column; gap:10px; } .service-panel-list ul.list li{ font-size:14.5px; color:var(--text-secondary); padding-left:18px; position:relative; } .service-panel-list ul.list li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--teal); } @media (max-width: 900px){ .service-panel{ padding:30px 24px; } .service-panel-list{ padding-left:0; padding-top:28px; margin-top:8px; border-left:none; border-top:0.5px solid var(--border); } } /* ---------------------------------------------------------------------- */ /* Blog: search, filters, sort */ /* ---------------------------------------------------------------------- */ .blog-controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:36px; } .search-box{ position:relative; flex:1; min-width:240px; max-width:420px; } .search-box svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-tertiary); pointer-events:none; } .search-box input{ width:100%; padding:12px 16px 12px 42px; border-radius:100px; background:var(--surface-1); border:0.5px solid var(--border-strong); color:var(--text-primary); font-size:14px; font-family:inherit; transition: background .2s, border-color .2s; } .search-box input:focus{ outline:none; border-color:var(--border-glow); background:var(--surface-hover); } .sort-select{ padding:11px 36px 11px 16px; border-radius:100px; background:var(--surface-1); border:0.5px solid var(--border-strong); color:var(--text-primary); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2398989f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .filter-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; } .filter-pill{ padding:9px 18px; border-radius:100px; font-size:13px; font-weight:600; background:var(--surface-1); border:0.5px solid var(--border); color:var(--text-secondary); cursor:pointer; transition: background .2s, color .2s, border-color .2s; } .filter-pill:hover{ background:var(--surface-hover); color:var(--text-primary); } .filter-pill.active{ background:var(--btn-primary-bg); color:var(--btn-primary-text); border-color:transparent; } .blog-empty{ display:none; text-align:center; padding:60px 20px; color:var(--text-secondary); } .blog-empty.show{ display:block; } .results-count{ font-size:13px; color:var(--text-tertiary); margin-bottom:20px; } /* ---------------------------------------------------------------------- */ /* Blog: post cards & image placeholders */ /* ---------------------------------------------------------------------- */ .post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width: 980px){ .post-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px){ .post-grid{ grid-template-columns:1fr; } } .post-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .post-card:hover{ transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--shadow-lg), var(--shadow-glow); } .post-card .post-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; } .post-card .cat-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--teal); margin-bottom:10px; display:block; } .post-card h3{ font-size:17px; line-height:1.3; margin-bottom:8px; } .post-card p{ font-size:13.5px; flex:1; } .post-card .post-meta{ display:flex; gap:10px; align-items:center; margin-top:16px; font-size:12px; color:var(--text-tertiary); } .post-card .post-meta .dotsep::before{ content:'·'; margin-right:10px; } .img-placeholder{ width:100%; aspect-ratio:16/10; position:relative; overflow:hidden; background: linear-gradient(135deg, rgba(59,109,255,0.16), rgba(155,77,255,0.14) 55%, rgba(18,179,201,0.14)), var(--surface-1); display:flex; align-items:center; justify-content:center; flex:none; } .img-placeholder svg{ width:34px; height:34px; color:var(--text-tertiary); opacity:0.6; } .img-placeholder::after{ content:'Image placeholder'; position:absolute; bottom:10px; left:12px; font-size:10.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-tertiary); opacity:0.8; } .img-placeholder.hero-img{ aspect-ratio:16/7; border-radius:var(--radius-md); } /* ---------------------------------------------------------------------- */ /* Bare illustrations — no box, no background, no frame. Just the image. */ /* ---------------------------------------------------------------------- */ .media{ width:100%; aspect-ratio:1/1; display:grid; place-items:center; padding:5%; box-sizing:border-box; flex:none; } .media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(20,20,50,0.12)); } .media.hero{ aspect-ratio:16/7; padding:0; } .media.hero img{ max-height:88%; } .media.square{ aspect-ratio:1/1; padding:0; } /* ---------------------------------------------------------------------- */ /* Blog: article page prose */ /* ---------------------------------------------------------------------- */ .article-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:var(--text-tertiary); margin-top:18px; } .article-meta .dotsep::before{ content:'·'; margin-right:10px; } .prose{ max-width:680px; margin:0 auto; font-size:17px; line-height:1.75; } .prose h2{ font-size:26px; font-weight:800; letter-spacing:-0.02em; margin:48px 0 16px; line-height:1.2; } .prose h2:first-child{ margin-top:0; } .prose p{ color:var(--text-secondary); margin-bottom:20px; font-size:17px; line-height:1.75; } .prose ul{ margin:20px 0; display:flex; flex-direction:column; gap:10px; } .prose ul li{ padding-left:24px; position:relative; color:var(--text-secondary); font-size:16.5px; } .prose ul li::before{ content:''; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--teal); } .prose strong{ color:var(--text-primary); font-weight:700; } .prose .callout{ margin:32px 0; padding:22px 24px; border-radius:var(--radius-sm); display:flex; gap:14px; align-items:flex-start; } .prose .callout p{ margin:0; font-size:15.5px; } .prose .callout .icon{ margin:0; flex:none; } .article-header{ max-width:760px; margin:0 auto; text-align:center; } .article-header h1{ font-size:clamp(30px,4.6vw,46px); line-height:1.12; margin-top:18px; } .article-wrap{ max-width:820px; margin:0 auto; } /* ---------------------------------------------------------------------- */ /* Blog: related articles */ /* ---------------------------------------------------------------------- */ .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media (max-width: 900px){ .related-grid{ grid-template-columns:1fr; } }