/* ========================================================================== DriveXos — Smart Storage Manager · CoderXpoint Dark design system. The palette comes from the application's own dark theme (src/CleanOSx.App/Themes/Dark.xaml) so the site and the product read as one piece of software: one accent, one gradient, one neutral ramp. Surfaces are glass — a translucent white wash over the near-black ground, with a 1px luminous border. Depth comes from glow, not from drop shadow. ========================================================================== */ /* ---------- Design tokens ---------- */ :root{ /* Ground — Dark.xaml WindowBackground / Surface / SurfaceAlt / Sidebar */ --bg: #070B14; --bg-2: #0A0F1C; --raise: #0F1626; --raise-2: #1A2438; /* Glass surfaces */ --glass: rgba(255,255,255,.034); --glass-2: rgba(255,255,255,.058); --glass-line: rgba(255,255,255,.085); --glass-line-2: rgba(255,255,255,.15); /* Ink — Dark.xaml TextPrimary / TextSecondary */ --ink: #EEF2FA; --ink-2: #C2CCDE; --muted: #8592AC; --muted-2: #6B7893; /* Brand — Dark.xaml Accent / GradientStart / GradientEnd */ --brand: #4F7CFF; --brand-hover: #6B90FF; --grad-start: #3D7BFF; --grad-end: #9B5CFF; --gradient: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%); --brand-wash: rgba(79,124,255,.12); --brand-line: rgba(79,124,255,.30); /* Status — Healthy / Warning / Critical */ --ok: #22C99A; --warn: #F5A524; --bad: #F0616A; /* Shape */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; /* Depth is glow, not shadow */ --glow-brand: 0 0 0 1px rgba(79,124,255,.28), 0 18px 44px -16px rgba(61,123,255,.65); --glow-soft: 0 24px 60px -26px rgba(0,0,0,.9); --glow-card: 0 0 40px -18px rgba(79,124,255,.45); --wrap: 1200px; --nav-h: 78px; --ease: cubic-bezier(.4,0,.2,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; background:var(--bg); color-scheme:dark; } body{ margin:0; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size:16px; line-height:1.65; color:var(--ink-2); /* No background here on purpose: the ground colour lives on , so the fixed light/grid layers below are not painted over by the body box. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } /* A single ambient light source, fixed behind the whole document. */ body::before{ content:''; position:fixed; inset:-20%; z-index:-2; pointer-events:none; background: radial-gradient(46% 36% at 50% 8%, rgba(61,123,255,.42) 0%, transparent 62%), radial-gradient(36% 30% at 84% 20%, rgba(155,92,255,.30) 0%, transparent 60%), radial-gradient(40% 34% at 10% 40%, rgba(61,123,255,.16) 0%, transparent 62%); } /* A faint engineering grid over the ground. */ body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 5%, transparent 70%); mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 5%, transparent 70%); } img,svg{ max-width:100%; display:block; } /* One icon weight across the whole site. The application's sidebar uses Segoe Fluent line icons; these match that thin, rounded, single-weight look. CSS wins over the inline stroke-width attributes, so every icon is normalised here rather than in eleven files. */ svg[stroke]{ stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .btn svg[stroke]{ stroke-width:1.9; } .ticks li::before, .hero-meta svg, .trust svg{ stroke-width:2.4; } a{ color:var(--brand-hover); text-decoration:none; transition:color .16s var(--ease); } a:hover{ color:#8FACFF; } h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.14; letter-spacing:-.028em; font-weight:700; color:#fff; } h1{ font-size:clamp(2.3rem, 1.3rem + 3.2vw, 4.1rem); letter-spacing:-.04em; } h2{ font-size:clamp(1.75rem, 1.2rem + 1.9vw, 2.8rem); letter-spacing:-.033em; } h3{ font-size:1.16rem; letter-spacing:-.018em; } p{ margin:0 0 1rem; } ul{ margin:0; padding:0; list-style:none; } b,strong{ color:#fff; font-weight:600; } code{ font-family:'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; font-size:.88em; color:#A9C1FF; background:rgba(79,124,255,.11); border:1px solid rgba(79,124,255,.17); border-radius:5px; padding:.1em .38em; word-break:break-word; overflow-wrap:anywhere; } pre code{ word-break:normal; overflow-wrap:normal; } :focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; } ::selection{ background:rgba(79,124,255,.34); color:#fff; } /* ---------- Layout ---------- */ .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; } .section{ padding:88px 0; position:relative; } .section--tight{ padding:68px 0; } /* A hairline of light instead of a background swap. */ .section--alt{ background:rgba(255,255,255,.018); } .section--alt::before, .section--alt::after{ content:''; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.11) 22%, rgba(79,124,255,.34) 50%, rgba(255,255,255,.11) 78%, transparent); } .section--alt::before{ top:0; } .section--alt::after{ bottom:0; } .center{ text-align:center; } .muted{ color:var(--muted); } /* Vertical rhythm utilities. These exist because an inline `style="margin-top:88px"` cannot respond to a breakpoint — it stays 88px on a phone whose sections are only 52px apart, which makes the gap inside a section larger than the gap between two. */ .mt-xl{ margin-top:88px; } .mt-lg{ margin-top:40px; } .mt-md{ margin-top:30px; } .pt-sm{ padding-top:56px; } .mx-auto{ margin-left:auto; margin-right:auto; } @media (max-width:760px){ .mt-xl{ margin-top:44px; } .mt-lg{ margin-top:26px; } .mt-md{ margin-top:20px; } .pt-sm{ padding-top:36px; } } .lead{ font-size:1.12rem; color:var(--muted); max-width:62ch; } .center .lead{ margin-inline:auto; } .grid{ display:grid; gap:20px; } /* Grid and flex children default to min-width:auto, which lets wide content (a 760px figure, a long path string) force the track wider than its column and blow the layout out sideways. Every layout child opts out of that. */ .grid > *, .bento > *, .split > *, .plans > *, .dl-grid > *, .checkout > *, .stats > *, .steps > *, .assure > *, .footer-grid > *, .blog-grid > *, .blog-featured > *{ min-width:0; } .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(3,1fr); } .g-4{ grid-template-columns:repeat(4,1fr); } .section-head{ max-width:66ch; margin:0 auto 56px; text-align:center; } .section-head p{ color:var(--muted); font-size:1.08rem; margin-bottom:0; } /* ---------- Eyebrow / pills ---------- */ .eyebrow, .eyebrow--light{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#A9C1FF; background:rgba(79,124,255,.10); border:1px solid rgba(79,124,255,.26); padding:7px 15px; border-radius:999px; margin-bottom:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } .pill{ display:inline-flex; align-items:center; gap:6px; font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:6px; } .pill--pro{ background:var(--gradient); color:#fff; box-shadow:0 4px 14px -6px rgba(155,92,255,.9); } .pill--free{ background:rgba(255,255,255,.07); color:var(--muted); border:1px solid var(--glass-line); } .pill--ok{ background:rgba(34,201,154,.14); color:#4FE0B8; border:1px solid rgba(34,201,154,.28); } .pill--soon{ background:rgba(245,165,36,.14); color:#F7BC5C; border:1px solid rgba(245,165,36,.3); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:600; font-size:.94rem; line-height:1; padding:14px 25px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:all .2s var(--ease); } .btn svg{ flex:none; } .btn--primary{ background:var(--gradient); color:#fff; box-shadow:0 0 0 1px rgba(140,165,255,.35) inset, 0 16px 38px -14px rgba(61,123,255,.9); } .btn--primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 0 0 1px rgba(170,190,255,.5) inset, 0 22px 48px -14px rgba(88,120,255,1); } .btn--solid{ background:rgba(79,124,255,.16); color:#BFD2FF; border-color:var(--brand-line); } .btn--solid:hover{ background:rgba(79,124,255,.26); color:#fff; } .btn--ghost, .btn--onDark{ background:var(--glass); color:var(--ink); border-color:var(--glass-line-2); } .btn--ghost:hover, .btn--onDark:hover{ color:#fff; background:var(--glass-2); border-color:rgba(255,255,255,.26); transform:translateY(-2px); } .btn--lg{ padding:17px 32px; font-size:1rem; border-radius:14px; } .btn--block{ width:100%; } .btn--sm{ padding:9px 16px; font-size:.85rem; } .btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; } .btn-row{ display:flex; flex-wrap:wrap; gap:14px; } .center .btn-row{ justify-content:center; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:60; height:var(--nav-h); background:rgba(7,11,20,.72); backdrop-filter:saturate(170%) blur(16px); border-bottom:1px solid rgba(255,255,255,.06); } .nav{ display:flex; align-items:center; gap:14px; height:var(--nav-h); } .brand{ display:flex; align-items:center; gap:13px; font-weight:800; font-size:1.42rem; color:#fff; letter-spacing:-.03em; } .brand:hover{ color:#fff; } .brand img{ width:46px; height:46px; border-radius:12px; flex:none; filter:drop-shadow(0 4px 16px rgba(79,124,255,.55)); transition:transform .3s var(--ease), filter .3s var(--ease); } .brand:hover img{ transform:scale(1.06) rotate(-3deg); filter:drop-shadow(0 6px 22px rgba(79,124,255,.85)); } .brand small{ display:block; font-size:.66rem; font-weight:600; color:var(--muted-2); letter-spacing:.16em; text-transform:uppercase; line-height:1.3; margin-top:1px; } /* The footer signature is larger still. */ .footer-brand .brand{ font-size:1.7rem; gap:15px; } .footer-brand .brand img{ width:58px; height:58px; border-radius:15px; } .footer-brand .brand small{ font-size:.7rem; } .nav-links{ display:flex; align-items:center; gap:2px; margin-left:30px; } .nav-links a{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:9px; font-size:.92rem; font-weight:500; color:var(--muted); transition:all .16s var(--ease); } /* Nav icons sit a shade dimmer than the label, and light up together. */ .nav-links a svg{ flex:none; opacity:.72; transition:opacity .16s var(--ease), transform .16s var(--ease); } .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.05); } .nav-links a:hover svg{ opacity:1; transform:translateY(-1px); } .nav-links a.is-active{ color:#fff; background:rgba(79,124,255,.14); } .nav-links a.is-active svg{ opacity:1; color:#8FACFF; } /* The CTA inside the link list exists only for the mobile menu — on desktop the same action already sits in .nav-cta on the right. The explicit colour is needed because `.nav-links a` outranks `.btn--primary`. */ .nav-links a.nav-mobile-cta{ display:none; justify-content:center; color:#fff; } .nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; } .nav-toggle{ display:none; margin-left:auto; width:42px; height:42px; align-items:center; justify-content:center; background:var(--glass); border:1px solid var(--glass-line-2); border-radius:10px; cursor:pointer; color:#fff; } /* ---------- Hero ---------- */ .hero{ position:relative; padding:110px 0 0; } .hero h1{ max-width:19ch; margin-inline:auto; } .hero h1 .grad{ background:linear-gradient(104deg,#6E9BFF 0%,#B98CFF 58%,#E0C8FF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-sub{ font-size:1.14rem; color:var(--muted); max-width:60ch; margin:0 auto 32px; } .hero-note{ font-size:.85rem; color:var(--muted-2); margin-top:22px; } .hero-note b{ color:var(--ink); } .hero-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:28px; font-size:.86rem; color:var(--muted); } .hero-meta span{ display:inline-flex; align-items:center; gap:7px; } .hero-meta svg{ color:var(--ok); flex:none; } .hero-stage{ position:relative; margin-top:70px; } .hero-shot{ border-radius:16px 16px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-bottom:0; background:var(--raise); box-shadow:0 -6px 90px -22px rgba(79,124,255,.75), 0 50px 90px -40px rgba(0,0,0,1); } .hero-shot img{ width:100%; } /* Glass readouts floating over the product screenshot. */ .hero-chip{ position:absolute; z-index:2; display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; text-align:left; background:rgba(12,18,32,.86); border:1px solid var(--glass-line-2); backdrop-filter:saturate(160%) blur(14px); box-shadow:0 24px 50px -18px rgba(0,0,0,.95), var(--glow-card); } .hero-chip i{ width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--gradient); color:#fff; } .hero-chip b{ display:block; font-size:1.02rem; font-weight:700; color:#fff; line-height:1.2; } .hero-chip span{ display:block; font-size:.73rem; color:var(--muted); white-space:nowrap; } .hero-chip--a{ left:-3%; top:24%; } .hero-chip--b{ right:-3%; top:54%; } @media (max-width:1100px){ .hero-chip{ display:none; } } /* ---------- Page header (inner pages) ---------- */ .page-head{ padding:92px 0 76px; position:relative; text-align:center; } .page-head h1{ margin-bottom:16px; } .page-head p{ color:var(--muted); font-size:1.1rem; max-width:62ch; margin:0 auto; } /* ========================================================================== Glass surfaces — cards, panels, plans all share one recipe ========================================================================== */ /* No backdrop-filter here on purpose. These surfaces sit on an almost solid ground, so a blur costs a great deal of compositing for no visible gain — it is reserved for the header and the mobile menu, which really do sit over moving content. */ .card, .panel, .plan, .dl-card, .table-scroll, .faq details{ position:relative; background:var(--glass); border:1px solid var(--glass-line); border-radius:var(--r-lg); } /* The luminous top edge that sells the glass. */ .card::before, .panel::before, .plan::before, .dl-card::before{ content:''; position:absolute; top:0; left:14%; right:14%; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); } .card{ padding:26px; transition:all .26s var(--ease); } .card--hover:hover{ transform:translateY(-4px); background:var(--glass-2); border-color:var(--brand-line); box-shadow:var(--glow-card), 0 26px 50px -28px rgba(0,0,0,.9); } .card h3{ margin-bottom:9px; } .card p{ color:var(--muted); font-size:.93rem; margin-bottom:0; } .card-icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(79,124,255,.13); border:1px solid var(--brand-line); color:#9FBAFF; margin-bottom:18px; transition:transform .28s var(--ease), box-shadow .28s var(--ease); } .card-icon--grad{ background:var(--gradient); border-color:transparent; color:#fff; box-shadow:0 10px 26px -10px rgba(88,120,255,.95); } .card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .card-head h3{ margin:0; } .panel{ padding:30px; border-radius:var(--r-xl); } .panel + .panel{ margin-top:22px; } .panel--sticky{ position:sticky; top:98px; } .panel h2{ font-size:1.2rem; margin-bottom:6px; } /* ---------- Tick lists ---------- */ .ticks li{ position:relative; padding-left:30px; margin-bottom:11px; font-size:.93rem; color:var(--ink-2); } .ticks li::before{ content:''; position:absolute; left:0; top:.42em; width:18px; height:18px; border-radius:50%; background:rgba(34,201,154,.15); border:1px solid rgba(34,201,154,.3); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C99A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:11px; } .ticks--muted li{ color:var(--muted); } .ticks--muted li::before{ background-color:rgba(255,255,255,.06); border-color:var(--glass-line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592AC' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } /* ========================================================================== Bento — the dense feature mosaic on the home page ========================================================================== */ .bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; } .bento > *{ grid-column:span 2; } .bento .b-wide{ grid-column:span 3; } .bento .b-full{ grid-column:span 6; } .bento .b-tall{ grid-row:span 2; } .bento-figure{ margin-top:20px; border-radius:var(--r); overflow:hidden; border:1px solid var(--glass-line); background:var(--bg-2); } .bento-figure img{ width:100%; display:block; } /* Monospace path chips — the "it speaks developer" texture. */ .paths{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .paths span{ font-family:'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; font-size:.76rem; color:#A9C1FF; background:rgba(79,124,255,.09); border:1px solid rgba(79,124,255,.2); border-radius:7px; padding:5px 10px; white-space:nowrap; } .paths span.is-dim{ color:var(--muted); background:rgba(255,255,255,.04); border-color:var(--glass-line); } /* A meter bar, used to show reclaimable proportions. */ .meter{ margin-top:18px; } .meter-row{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin-bottom:7px; } .meter-row b{ color:#fff; } .meter-track{ height:8px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; } .meter-fill{ height:100%; border-radius:99px; background:var(--gradient); box-shadow:0 0 18px rgba(79,124,255,.75); } .meter-fill--ok{ background:linear-gradient(90deg,#22C99A,#3DD6AB); box-shadow:0 0 18px rgba(34,201,154,.6); } /* ---------- Stats ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .stat{ text-align:center; padding:26px 18px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); } .stat b{ display:block; font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1.1; background:linear-gradient(135deg,#8FACFF,#C9A6FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .stat span{ font-size:.85rem; color:var(--muted); } /* ========================================================================== Pricing ========================================================================== */ .plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:900px; margin:0 auto; align-items:stretch; } .plan{ padding:34px; border-radius:var(--r-xl); display:flex; flex-direction:column; } .plan--featured{ border-color:var(--brand-line); background:linear-gradient(180deg, rgba(79,124,255,.10) 0%, rgba(255,255,255,.03) 46%); box-shadow:var(--glow-card), 0 30px 70px -34px rgba(0,0,0,.95); } .plan--featured::before{ background:linear-gradient(90deg, transparent, rgba(155,180,255,.75), transparent); } .plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--gradient); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:7px 17px; border-radius:999px; box-shadow:0 10px 26px -8px rgba(88,120,255,1); white-space:nowrap; } .plan-name{ font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:5px; } .plan-tag{ font-size:.89rem; color:var(--muted); margin-bottom:24px; min-height:3.4em; } .plan-price{ display:flex; align-items:baseline; gap:8px; margin-bottom:7px; } .plan-price b{ font-size:3.2rem; font-weight:800; letter-spacing:-.045em; line-height:1; color:#fff; } .plan-price span{ color:var(--muted); font-size:.94rem; font-weight:500; } .plan-price-note{ font-size:.82rem; color:var(--muted); margin-bottom:26px; min-height:1.2em; } .plan .btn{ margin-bottom:28px; } .plan-divider{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); padding-bottom:15px; margin-bottom:18px; border-bottom:1px solid var(--glass-line); } .plan ul{ flex:1; } .plan-foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--glass-line); font-size:.81rem; color:var(--muted-2); } .save-hint{ font-size:.88rem; color:#4FE0B8; font-weight:600; } /* The price set inside the pricing headline. */ .price-grad{ background:linear-gradient(104deg,#6E9BFF 0%,#B98CFF 58%,#E0C8FF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .price-grad b{ font-weight:inherit; color:inherit; } /* Reassurance strip under the plans. */ .assure{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:900px; margin:34px auto 0; } .assure-item{ text-align:center; padding:20px 14px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); } .assure-item svg{ margin:0 auto 11px; color:var(--ok); } .assure-item b{ display:block; font-size:.88rem; color:#fff; } .assure-item span{ display:block; font-size:.78rem; color:var(--muted); margin-top:2px; } @media (max-width:760px){ .assure{ grid-template-columns:1fr 1fr; } } /* ---------- Comparison table ---------- */ .table-scroll{ overflow-x:auto; border-radius:var(--r-lg); } table.cmp{ width:100%; border-collapse:collapse; min-width:660px; font-size:.92rem; } table.cmp th, table.cmp td{ padding:15px 22px; text-align:left; border-bottom:1px solid rgba(255,255,255,.055); } table.cmp thead th{ background:rgba(255,255,255,.045); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; } table.cmp thead th:last-child{ color:#A9C1FF; } table.cmp td{ color:var(--ink-2); } table.cmp td:not(:first-child), table.cmp th:not(:first-child){ text-align:center; width:158px; } table.cmp tbody tr:last-child td{ border-bottom:0; } table.cmp tbody tr:hover{ background:rgba(79,124,255,.055); } table.cmp .grp td{ background:rgba(255,255,255,.032); font-weight:700; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); } .yes{ color:var(--ok); font-weight:700; } .no{ color:var(--muted-2); } /* ========================================================================== Download ========================================================================== */ .dl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; } .dl-card{ padding:36px; text-align:center; border-radius:var(--r-xl); display:flex; flex-direction:column; transition:all .26s var(--ease); } .dl-card:hover{ transform:translateY(-4px); border-color:var(--brand-line); box-shadow:var(--glow-card); } .dl-card.is-detected{ border-color:var(--brand-line); background:linear-gradient(180deg, rgba(79,124,255,.09), rgba(255,255,255,.03) 50%); } .dl-os{ width:54px; height:54px; margin:0 auto 18px; color:#fff; } .dl-card h3{ font-size:1.35rem; margin-bottom:6px; } .dl-card .dl-meta{ font-size:.85rem; color:var(--muted); margin-bottom:24px; } .dl-card .btn{ margin-bottom:16px; } .dl-specs{ margin-top:auto; padding-top:20px; border-top:1px solid var(--glass-line); font-size:.82rem; color:var(--muted); text-align:left; } .dl-specs li{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; } .dl-specs li b{ color:var(--ink); font-weight:600; } .dl-detected{ font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#A9C1FF; margin-bottom:12px; } /* ---------- Steps ---------- */ .steps{ counter-reset:step; display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .step{ position:relative; padding:26px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-line); } .step::before{ counter-increment:step; content:counter(step); width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--gradient); color:#fff; font-weight:700; font-size:1rem; margin-bottom:18px; box-shadow:0 12px 28px -10px rgba(88,120,255,1); } .step h3{ font-size:1.05rem; } .step p{ color:var(--muted); font-size:.92rem; margin:0; } /* ========================================================================== Forms / checkout ========================================================================== */ .checkout{ display:grid; grid-template-columns:1.25fr .95fr; gap:30px; align-items:start; } .field{ margin-bottom:18px; } .field label{ display:block; font-size:.84rem; font-weight:600; margin-bottom:8px; color:var(--ink); } .field .hint{ font-size:.78rem; color:var(--muted-2); font-weight:400; margin-top:7px; } .field input, .field select, .field textarea{ width:100%; font:inherit; font-size:.94rem; color:#fff; padding:13px 15px; border:1px solid var(--glass-line-2); border-radius:var(--r); background:rgba(255,255,255,.045); transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease); } .field textarea{ min-height:135px; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand); background:rgba(79,124,255,.08); box-shadow:0 0 0 3px rgba(79,124,255,.2); } .field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); } .field select option{ background:var(--raise); color:#fff; } .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:var(--bad); } .field .err{ display:none; font-size:.78rem; color:var(--bad); margin-top:7px; } .field.invalid .err{ display:block; } .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; } .opt-group{ display:grid; gap:12px; margin-bottom:22px; } .opt{ display:flex; align-items:flex-start; gap:13px; padding:17px 19px; cursor:pointer; border:1px solid var(--glass-line); border-radius:var(--r); background:rgba(255,255,255,.025); transition:all .18s var(--ease); } .opt:hover{ border-color:var(--brand-line); background:rgba(79,124,255,.07); } .opt input{ margin:3px 0 0; accent-color:var(--brand); width:17px; height:17px; flex:none; } .opt-body{ flex:1; } .opt-title{ display:flex; justify-content:space-between; gap:12px; font-weight:600; font-size:.95rem; color:#fff; } .opt-desc{ font-size:.83rem; color:var(--muted); margin-top:4px; } .opt.is-selected{ border-color:var(--brand); background:rgba(79,124,255,.11); box-shadow:0 0 0 3px rgba(79,124,255,.12); } /* A currency with no live payment link: shown, so the price stays visible, but not selectable. */ .opt.is-unavailable{ opacity:.5; cursor:not-allowed; } .opt.is-unavailable:hover{ border-color:var(--glass-line); background:transparent; box-shadow:none; } .opt.is-unavailable input{ cursor:not-allowed; } .summary-line{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:.92rem; } .summary-line span:first-child{ color:var(--muted); } .summary-line b{ font-weight:600; color:#fff; } .summary-total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; padding-top:17px; border-top:1px solid var(--glass-line); } .summary-total b{ font-size:1.85rem; font-weight:800; letter-spacing:-.035em; color:#fff; } .trust{ display:grid; gap:11px; margin-top:22px; padding-top:20px; border-top:1px solid var(--glass-line); } .trust li{ display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--muted); } .trust svg{ flex:none; color:var(--ok); margin-top:2px; } /* ---------- Notices ---------- */ .notice{ display:flex; gap:13px; padding:17px 19px; border-radius:var(--r); background:rgba(79,124,255,.08); border:1px solid rgba(79,124,255,.22); font-size:.87rem; color:var(--ink-2); } .notice svg{ flex:none; color:#8FACFF; margin-top:2px; } .notice--warn{ background:rgba(245,165,36,.08); border-color:rgba(245,165,36,.24); } .notice--warn svg{ color:var(--warn); } .notice--ok{ background:rgba(34,201,154,.08); border-color:rgba(34,201,154,.24); } .notice--ok svg{ color:var(--ok); } .notice p{ margin:0; } .notice p + p{ margin-top:7px; } /* ---------- FAQ ---------- */ .faq{ max-width:820px; margin:0 auto; } .faq details{ margin-bottom:12px; overflow:hidden; transition:all .2s var(--ease); } .faq details[open]{ border-color:var(--brand-line); background:var(--glass-2); } .faq summary{ cursor:pointer; list-style:none; padding:20px 58px 20px 24px; position:relative; font-weight:600; font-size:1rem; color:#fff; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:''; position:absolute; right:24px; top:50%; width:10px; height:10px; margin-top:-8px; border-right:2.2px solid var(--muted); border-bottom:2.2px solid var(--muted); transform:rotate(45deg); transition:transform .22s var(--ease), border-color .22s var(--ease); } .faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; border-color:#8FACFF; } .faq .faq-body{ padding:0 24px 22px; color:var(--muted); font-size:.93rem; } .faq .faq-body p:last-child{ margin-bottom:0; } .faq > h2{ color:#fff; } /* Group heading inside a long FAQ list. */ .faq-group{ font-size:1.3rem; margin:48px 0 18px; } .faq-group.is-first{ margin-top:0; } @media (max-width:760px){ .faq-group{ font-size:1.15rem; margin:32px 0 14px; } } /* ---------- Screenshot frame ---------- */ .shot{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-line-2); background:var(--raise); box-shadow:0 30px 70px -34px rgba(0,0,0,1), var(--glow-card); } .shot-bar{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--glass-line); } .shot-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.17); display:block; } .shot-bar span{ margin-left:10px; font-size:.76rem; color:var(--muted-2); } /* A diagram rather than an app screen — no window chrome, because it is not pretending to be a window. */ .figure{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--glass-line); background:#0B111D; box-shadow:0 30px 70px -34px rgba(0,0,0,1), var(--glow-card); } .figure img{ width:100%; height:auto; display:block; } /* ---------- Split rows ---------- */ .split{ display:grid; grid-template-columns:1fr 1.12fr; gap:60px; align-items:center; } .split + .split{ margin-top:88px; } .split--flip .split-media{ order:-1; } .split h2{ font-size:clamp(1.6rem,1.2rem+1.3vw,2.2rem); } .split p{ color:var(--muted); } /* ---------- CTA band ---------- */ .cta-band{ border-radius:var(--r-xl); padding:72px 48px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(79,124,255,.14), rgba(155,92,255,.07)); border:1px solid var(--brand-line); box-shadow:var(--glow-card), inset 0 1px 0 rgba(255,255,255,.1); } .cta-band::before{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(62% 120% at 50% 0%, rgba(79,124,255,.30) 0%, transparent 66%), radial-gradient(50% 100% at 86% 100%, rgba(155,92,255,.24) 0%, transparent 70%); } .cta-band > *{ position:relative; z-index:1; } .cta-band h2{ margin-bottom:14px; } .cta-band p{ color:var(--muted); max-width:54ch; margin:0 auto 30px; } /* ---------- Footer ---------- */ .site-footer{ padding:70px 0 30px; margin-top:0; border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); } .footer-grid{ display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:42px; } .footer-brand .brand{ margin-bottom:16px; } .footer-brand p{ font-size:.88rem; color:var(--muted); max-width:34ch; } .site-footer h3{ color:#fff; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; } .site-footer li{ margin-bottom:10px; } .site-footer a{ color:var(--muted); font-size:.89rem; } .site-footer a:hover{ color:#fff; } .footer-bottom{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center; margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.06); font-size:.83rem; color:var(--muted-2); } .footer-bottom .os-tags{ display:flex; gap:18px; align-items:center; } .footer-bottom .os-tags span{ display:inline-flex; align-items:center; gap:7px; } /* ---------- Long-form / legal ---------- */ .prose{ max-width:74ch; margin:0 auto; } .prose h2{ font-size:1.4rem; margin-top:2.3em; color:#fff; } .prose h3{ font-size:1.05rem; margin-top:1.8em; color:var(--ink); } .prose ul{ list-style:disc; padding-left:1.3em; margin-bottom:1rem; color:var(--muted); } .prose ul li{ margin-bottom:.5em; } .prose p{ color:var(--muted); } .prose .updated{ font-size:.85rem; color:var(--muted-2); padding-bottom:1.5em; border-bottom:1px solid var(--glass-line); } /* ---------- Utilities ---------- */ .hide{ display:none !important; } .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; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1000px){ .bento{ grid-template-columns:repeat(4,1fr); } .bento .b-wide, .bento .b-full{ grid-column:span 4; } .bento .b-tall{ grid-row:auto; } .g-4{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(2,1fr); } .stats{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:1fr; } .checkout{ grid-template-columns:1fr; } .panel--sticky{ position:static; } .split{ grid-template-columns:1fr; gap:36px; } .split + .split{ margin-top:64px; } .split--flip .split-media{ order:0; } .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } .footer-brand{ grid-column:1/-1; } } @media (max-width:760px){ .nav-links{ position:fixed; inset:var(--nav-h) 0 auto; flex-direction:column; align-items:stretch; gap:2px; margin:0; padding:16px 18px 22px; /* Fully opaque: this panel covers page content, so any translucency just makes the links harder to read. */ background:var(--bg-2); border-bottom:1px solid var(--glass-line); box-shadow:0 30px 60px -20px rgba(0,0,0,1); transform:translateY(-150%); transition:transform .28s var(--ease); z-index:50; } .nav-links.is-open{ transform:translateY(0); } .nav-links a{ padding:13px 14px; font-size:1rem; } .nav-links a.nav-mobile-cta{ display:inline-flex; margin-top:12px; } .nav-cta{ display:none; } .nav-toggle{ display:flex; } .section{ padding:70px 0; } .bento{ grid-template-columns:1fr; } .bento > *, .bento .b-wide, .bento .b-full{ grid-column:span 1; } .g-2,.g-3,.g-4{ grid-template-columns:1fr; } .plans{ grid-template-columns:1fr; } .dl-grid{ grid-template-columns:1fr; } .row-2{ grid-template-columns:1fr; } .stats{ grid-template-columns:1fr 1fr; gap:12px; } .stat{ padding:20px 12px; } .stat b{ font-size:1.9rem; } .hero{ padding-top:76px; } .hero-stage{ margin-top:48px; } .cta-band{ padding:52px 24px; } .panel,.plan,.dl-card{ padding:26px; } body::after{ background-size:48px 48px; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ---------- Print ---------- */ @media print{ .site-header,.site-footer,.btn,.cta-band,.nav-toggle{ display:none !important; } body{ background:#fff; color:#000; } body::before, body::after{ display:none; } } /* ========================================================================== Changelog ========================================================================== */ .releases{ max-width:820px; margin:0 auto; position:relative; } /* The spine the release markers sit on. */ .releases::before{ content:''; position:absolute; left:11px; top:8px; bottom:8px; width:2px; border-radius:2px; background:linear-gradient(180deg, var(--brand-line), rgba(255,255,255,.06) 70%, transparent); } .release{ position:relative; padding-left:48px; padding-bottom:44px; } .release:last-child{ padding-bottom:0; } .release::before{ content:''; position:absolute; left:4px; top:6px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:2px solid var(--brand); box-shadow:0 0 0 4px rgba(79,124,255,.14); } .release--current::before{ background:var(--gradient); border-color:transparent; box-shadow:0 0 0 5px rgba(79,124,255,.2); } .release--planned::before{ border-color:var(--muted-2); box-shadow:none; } .release-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:6px; } .release-ver{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:#fff; } .release-date{ font-size:.85rem; color:var(--muted); } .release-note{ color:var(--muted); font-size:.95rem; margin-bottom:20px; max-width:62ch; } .change-group{ margin-bottom:22px; } .change-group:last-child{ margin-bottom:0; } .change-label{ display:inline-flex; align-items:center; gap:7px; font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:4px 10px; border-radius:6px; margin-bottom:12px; } .change-label--added{ background:rgba(34,201,154,.13); color:#4FE0B8; border:1px solid rgba(34,201,154,.28); } .change-label--premium{ background:rgba(155,92,255,.14); color:#C4A6FF; border:1px solid rgba(155,92,255,.3); } .change-label--platform{ background:rgba(79,124,255,.12); color:#A9C1FF; border:1px solid var(--brand-line); } .change-label--planned{ background:rgba(255,255,255,.05); color:var(--muted); border:1px solid var(--glass-line); } .change-list li{ position:relative; padding-left:20px; margin-bottom:9px; font-size:.93rem; color:var(--ink-2); } .change-list li::before{ content:''; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--muted-2); } .change-list li b{ color:#fff; } .change-list--planned li{ color:var(--muted); } @media (max-width:760px){ .releases::before{ left:8px; } .release{ padding-left:34px; padding-bottom:34px; } .release::before{ left:1px; width:14px; height:14px; } .release-ver{ font-size:1.3rem; } } /* Version stamp in the footer, linking to the changelog. */ .footer-version{ color:var(--muted); font-size:inherit; } .footer-version:hover{ color:#fff; } .release-ver{ margin:0; } /* Checkout: which gateway the country suggests. */ .pay-reco{ font-size:.9rem; color:var(--muted); margin:0; } .pay-reco b{ color:#fff; } .opt-title .pill{ vertical-align:middle; } /* Pricing: which currency prices are shown in, with a one-click switch. */ .currency-switch{ display:inline-flex; align-items:center; gap:10px; margin:22px auto 0 !important; font-size:.85rem; color:var(--muted); padding:6px 6px 6px 16px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line); } .currency-switch b{ color:#fff; } .currency-switch-btn{ font:inherit; font-size:.8rem; font-weight:600; color:#BFD2FF; cursor:pointer; background:rgba(79,124,255,.14); border:1px solid var(--brand-line); border-radius:999px; padding:6px 13px; transition:background .16s var(--ease); } .currency-switch-btn:hover{ background:rgba(79,124,255,.24); color:#fff; } /* Download: the Mac card offers one build per processor. */ .dl-builds{ text-align:left; } .dl-builds .btn{ margin-bottom:6px !important; } .dl-build-note{ font-size:.8rem; color:var(--muted); text-align:center; margin:0 0 16px; } .dl-which{ margin:4px 0 18px; font-size:.84rem; color:var(--muted); } .dl-which summary{ cursor:pointer; color:#A9C1FF; text-align:center; list-style:none; } .dl-which summary::-webkit-details-marker{ display:none; } .dl-which p{ margin:10px 0 0; } .dl-specs li span{ white-space:nowrap; } /* ========================================================================== Blog — Index & Article styles ========================================================================== */ .blog-hero{ text-align:center; max-width:760px; margin:0 auto 52px; } .blog-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .blog-featured{ grid-column:1 / -1; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; } a.blog-card, a.blog-card:hover, .blog-card, .blog-card:hover{ display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--glass); border:1px solid var(--glass-line); transition:transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease), background .26s var(--ease); text-decoration:none !important; color:inherit; } .blog-card *, .blog-card:hover *{ text-decoration:none; } .blog-card:hover{ transform:translateY(-5px); background:var(--glass-2); border-color:var(--brand-line); box-shadow:var(--glow-card), 0 28px 60px -28px rgba(0,0,0,.95); color:inherit; } .blog-thumb{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--glass-line); } .blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); } .blog-card:hover .blog-thumb img{ transform:scale(1.03); } .blog-body{ padding:24px; display:flex; flex-direction:column; flex:1; } .blog-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.8rem; color:var(--muted); margin-bottom:14px; } .blog-meta time{ display:inline-flex; align-items:center; gap:5px; } .blog-meta-dot{ opacity:.4; } .blog-title{ font-size:1.22rem; font-weight:700; line-height:1.35; color:#fff; margin-bottom:12px; letter-spacing:-.02em; transition:color .18s var(--ease); } .blog-card:hover .blog-title{ color:#8FACFF; text-decoration:underline; text-underline-offset:4px; } .blog-excerpt{ font-size:.92rem; line-height:1.6; color:var(--muted); margin-bottom:20px; flex:1; } .blog-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--glass-line); font-size:.84rem; font-weight:600; color:var(--brand-hover); } .blog-foot svg{ transition:transform .2s var(--ease); } .blog-card:hover .blog-foot svg{ transform:translateX(4px); } /* Article layout */ .article-wrap{ max-width:820px; margin:0 auto; padding:0 24px; } .article-head{ margin-bottom:36px; text-align:left; } .article-head h1{ font-size:clamp(2.1rem, 1.4rem + 2.5vw, 3.4rem); line-height:1.15; margin:16px 0 20px; } .article-lead{ font-size:1.18rem; line-height:1.65; color:var(--ink-2); margin-bottom:24px; } .article-hero-img{ width:100%; border-radius:var(--r-xl); overflow:hidden; border:1px solid rgba(255,255,255,.12); margin:32px 0 44px; box-shadow:0 24px 70px -28px rgba(0,0,0,.9); } .article-hero-img img{ width:100%; height:auto; display:block; } .article-content{ font-size:1.05rem; line-height:1.78; color:var(--ink-2); } .article-content h2{ font-size:1.75rem; margin:48px 0 18px; color:#fff; letter-spacing:-.03em; } .article-content h3{ font-size:1.3rem; margin:34px 0 14px; color:#fff; } .article-content p{ margin-bottom:1.4rem; } .article-content ul, .article-content ol{ margin:0 0 1.6rem 1.4rem; } .article-content ul{ list-style:disc; } .article-content ol{ list-style:decimal; } .article-content li{ margin-bottom:.6rem; padding-left:.2rem; } .article-content blockquote{ margin:28px 0; padding:18px 24px; border-left:3px solid var(--brand); background:var(--glass); border-radius:0 var(--r) var(--r) 0; font-style:italic; color:var(--ink); } .article-callout{ margin:32px 0; padding:24px; border-radius:var(--r); background:rgba(79,124,255,.08); border:1px solid rgba(79,124,255,.24); } .article-callout--warn{ background:rgba(245,165,36,.08); border-color:rgba(245,165,36,.28); } .article-callout--ok{ background:rgba(34,201,154,.08); border-color:rgba(34,201,154,.28); } .article-callout h4{ font-size:1.05rem; margin-bottom:8px; color:#fff; } .article-callout p:last-child{ margin-bottom:0; } .code-block{ margin:26px 0; border-radius:var(--r); overflow:hidden; background:#080D18; border:1px solid rgba(255,255,255,.08); } .code-block-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 18px; background:#0E1626; border-bottom:1px solid rgba(255,255,255,.06); font-family:'SF Mono', ui-monospace, Consolas, monospace; font-size:.8rem; color:var(--muted); } .code-block pre{ margin:0; padding:18px; overflow-x:auto; font-family:'SF Mono', ui-monospace, Consolas, monospace; font-size:.9rem; line-height:1.6; color:#C2CCDE; } .article-table{ width:100%; border-collapse:collapse; margin:30px 0; border-radius:var(--r); overflow:hidden; border:1px solid var(--glass-line); } .article-table th, .article-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--glass-line); font-size:.93rem; } .article-table th{ background:rgba(255,255,255,.04); color:#fff; font-weight:600; } .article-table tr:hover td{ background:rgba(255,255,255,.02); } .article-cta{ margin:64px 0 40px; padding:40px; border-radius:var(--r-xl); text-align:center; background:linear-gradient(180deg, rgba(79,124,255,.14) 0%, rgba(15,22,38,.85) 100%); border:1px solid var(--brand-line); box-shadow:var(--glow-card); } .article-cta h3{ font-size:1.8rem; margin-bottom:12px; } .article-cta p{ max-width:54ch; margin:0 auto 24px; color:var(--muted); } .article-nav{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; padding-top:36px; border-top:1px solid var(--glass-line); } .breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.84rem; color:var(--muted); margin-bottom:24px; } .breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:#fff; } .breadcrumb-sep{ opacity:.4; } @media (max-width:980px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } .blog-featured{ grid-template-columns:1fr; } } @media (max-width:760px){ .blog-grid{ grid-template-columns:1fr !important; gap:18px; } .blog-featured{ grid-template-columns:1fr !important; gap:20px !important; padding:18px !important; border-radius:18px; } .blog-featured .blog-thumb{ aspect-ratio:16/9; width:100%; } .blog-card{ border-radius:16px; } .blog-body{ padding:20px 16px; } .blog-title{ font-size:1.15rem; line-height:1.35; } .blog-excerpt{ font-size:.88rem; margin-bottom:16px; } .blog-meta{ gap:6px 8px; font-size:.76rem; } .article-wrap{ padding-inline:16px !important; max-width:100% !important; min-width:0 !important; overflow-x:hidden; } .article-head{ margin-bottom:24px; } .article-head h1{ font-size:clamp(1.65rem, 1.25rem + 2vw, 2.3rem) !important; line-height:1.2 !important; margin:12px 0 16px; overflow-wrap:break-word; word-break:break-word; } .article-lead{ font-size:1.02rem; line-height:1.6; margin-bottom:18px; } .article-hero-img{ margin:20px 0 28px; border-radius:12px; } .article-content{ font-size:.98rem; line-height:1.7; min-width:0; } .article-content h2{ font-size:1.4rem; margin:36px 0 14px; overflow-wrap:break-word; } .article-content h3{ font-size:1.18rem; margin:26px 0 10px; overflow-wrap:break-word; } .article-callout{ padding:18px 16px; margin:24px 0; } .code-block{ margin:20px 0; max-width:100% !important; min-width:0 !important; overflow:hidden; } .code-block-head{ padding:8px 14px; font-size:.75rem; flex-wrap:wrap; gap:6px; } .code-block pre{ padding:14px; font-size:.82rem; max-width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch; } .code-block pre code{ word-break:normal !important; white-space:pre !important; } .article-table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:24px 0; border-radius:var(--r); border:1px solid var(--glass-line); } .table-scroll .article-table{ margin:0; border:0; min-width:540px; } .article-cta{ padding:28px 16px; margin:44px 0 24px; border-radius:18px; } .article-cta h3{ font-size:1.45rem; } .article-nav{ grid-template-columns:1fr; gap:20px; margin-top:40px; padding-top:24px; } .article-nav > div:last-child{ text-align:left; } .breadcrumb{ font-size:.78rem; gap:6px; margin-bottom:18px; } }