/* ========================================================================== VOIPNOX — main stylesheet 1. Tokens 2. Reset/base 3. Utilities 4. Buttons 5. Header/nav 6. Hero 7. Sections 8. Components 9. Footer 10. Floating UI 11. Motion 12. Responsive ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* brand */ --red:#d21f2e; --red-bright:#ef2b3c; --red-deep:#a5141f; --red-tint:#fdeced; /* neutrals */ --ink:#0b0e14; --ink-2:#12171f; --ink-3:#1b222d; --ink-4:#2a3341; --slate:#5a6577; --slate-2:#7b8598; --line:rgba(11,14,20,.10); --line-2:rgba(11,14,20,.06); --bg:#ffffff; --bg-soft:#f7f6f3; /* warm off-white reads richer than a cold grey */ --bg-alt:#f1efea; /* semantic */ --wa:#25d366; --wa-dark:#1da851; /* type — display face for headings, Inter for running text */ --font-display:"Plus Jakarta Sans","Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; --font:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif; /* rhythm */ --shell:1200px; --gut:clamp(1.15rem,4vw,2rem); --sec-y:clamp(4.5rem,9vw,7.5rem); --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; /* elevation — negative spread keeps large shadows soft instead of muddy */ --sh-1:0 2px 8px rgba(11,14,20,.06), 0 1px 2px rgba(11,14,20,.04); --sh-2:0 10px 30px -12px rgba(11,14,20,.16), 0 4px 12px rgba(11,14,20,.05); --sh-3:0 26px 60px -22px rgba(11,14,20,.24), 0 8px 24px rgba(11,14,20,.07); --sh-4:0 44px 90px -30px rgba(11,14,20,.34); --sh-red:0 14px 32px -12px rgba(210,31,46,.45); --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.8); --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --header-h:80px; } /* ---------- 2. Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); /* The closed mobile drawer is parked off to the right with a transform, and it is position:fixed — so it is laid out against the viewport, not the body, and body's overflow-x cannot clip it. Left alone it adds ~44px of scrollable width to every page on a phone: a blank strip down the right. Clipping has to happen here, at the root. `clip` rather than `hidden` for the same reason as on body: hidden forces overflow-y to auto. */ overflow-x:hidden; overflow-x:clip; } body{ margin:0; font-family:var(--font); font-size:clamp(1rem,.97rem + .18vw,1.0625rem); line-height:1.68; color:var(--slate); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* `clip` keeps the other axis from being forced to `auto`, which would turn body into a scroll container and break the sticky header. */ overflow-x:hidden; overflow-x:clip; } body.is-locked{overflow:hidden} img,svg,video{display:block;max-width:100%} img{height:auto} /* The elements only exist to offer WebP; they must not become a box of their own, or the img inside loses the grid slot, the absolute positioning and the percentage heights its container gives it. */ picture{display:contents} h1,h2,h3,h4{ margin:0;font-family:var(--font-display);color:var(--ink); line-height:1.14;letter-spacing:-.024em;font-weight:800; } p{margin:0 0 1.05em} p:last-child{margin-bottom:0} a{color:var(--red);text-decoration:none;transition:color .2s var(--ease)} a:hover{color:var(--red-deep)} ul,ol{margin:0;padding:0;list-style:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} :focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px} ::selection{background:var(--red);color:#fff} .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; } .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ink);color:#fff;padding:.85rem 1.4rem;border-radius:0 0 var(--r-sm) 0;font-weight:700; } .skip-link:focus{left:0;color:#fff} /* ---------- 2b. Brand preloader ---------- */ .preloader{ position:fixed;inset:0;z-index:9999; display:grid;place-items:center;gap:1.6rem; background:#fff; transition:opacity .55s var(--ease), visibility .55s var(--ease); } /* never trap the page: hidden without JS, and hidden once the session has seen it */ .no-js .preloader{display:none} .preloader.is-done{opacity:0;visibility:hidden;pointer-events:none} .vx-loading{overflow:hidden} .preloader__inner{display:grid;justify-items:center;gap:1.5rem} .preloader__mark{width:clamp(88px,17vw,116px);height:auto;overflow:visible} .vx-arc{ fill:none;stroke-width:5;stroke-linecap:round; stroke-dasharray:88 176; /* 120deg drawn, 240deg gap */ transform-origin:60px 60px; } .vx-arc--a{stroke:var(--ink);transform:rotate(-60deg);animation:vx-spin 2.6s linear infinite, vx-hue-a 2.6s ease-in-out infinite} .vx-arc--b{stroke:var(--red);transform:rotate(120deg);animation:vx-spin-rev 2.6s linear infinite, vx-hue-b 2.6s ease-in-out infinite} .vx-eight{ fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:195; /* matches the path's measured length */ animation:vx-trace 2.6s var(--ease) infinite; } .vx-dot{fill:var(--red);animation:vx-pulse 1.3s var(--ease) infinite} @keyframes vx-spin{to{transform:rotate(300deg)}} @keyframes vx-spin-rev{to{transform:rotate(-240deg)}} @keyframes vx-hue-a{0%,100%{stroke:var(--ink)}50%{stroke:var(--red)}} @keyframes vx-hue-b{0%,100%{stroke:var(--red)}50%{stroke:var(--ink)}} @keyframes vx-trace{ 0%{stroke-dashoffset:195;opacity:.35} 55%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:-195;opacity:.35} } @keyframes vx-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.6}} .vx-dot{transform-origin:60px 60px} .preloader__word{width:clamp(132px,22vw,168px);height:auto;opacity:0;animation:vx-fade .7s var(--ease) .15s forwards} @keyframes vx-fade{to{opacity:1}} .preloader__bar{ width:150px;height:3px;border-radius:3px;overflow:hidden; background:rgba(11,14,20,.09); } .preloader__bar span{ display:block;width:40%;height:100%;border-radius:3px; background:linear-gradient(90deg,var(--red-bright),var(--red-deep)); animation:vx-sweep 1.25s var(--ease) infinite; } @keyframes vx-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}} @media (prefers-reduced-motion:reduce){ .preloader{display:none} } /* ---------- 3. Utilities ---------- */ .container{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)} .container--narrow{max-width:860px} .ic{width:1.25em;height:1.25em;flex:none;fill:none} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; margin:0 0 1.15rem; font-size:.775rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.82); } .eyebrow--dark{color:var(--red)} .eyebrow__pip{ width:26px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--red),var(--red-bright)); box-shadow:0 0 12px rgba(239,43,60,.6); } .eyebrow--dark .eyebrow__pip{box-shadow:none} .sec-head{max-width:720px;margin:0 auto clamp(2.5rem,5vw,3.75rem);text-align:center} .sec-head .eyebrow{justify-content:center} .sec-title{font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem)} .sec-sub{margin-top:1.1rem;font-size:1.06rem} .section--dark .sec-title{color:#fff} .section--dark .sec-sub{color:rgba(255,255,255,.68)} .grad{ background:linear-gradient(100deg,var(--red-bright) 0%,#ff6472 55%,var(--red-bright) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent; } /* ---------- 4. Buttons ---------- */ .btn{ --btn-py:.82rem; --btn-px:1.5rem; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:var(--btn-py) var(--btn-px); border-radius:999px; font-family:var(--font-display); font-weight:700;font-size:.945rem;letter-spacing:-.005em;line-height:1.2; white-space:nowrap; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } .btn .ic{width:1.1em;height:1.1em;transition:transform .25s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--sm{--btn-py:.6rem; --btn-px:1.1rem; font-size:.875rem} .btn--lg{--btn-py:1rem; --btn-px:1.95rem; font-size:1rem} .btn--full{width:100%} .btn--primary{ background:linear-gradient(135deg,var(--red-bright),var(--red) 60%,var(--red-deep)); color:#fff;box-shadow:var(--sh-red); } .btn--primary:hover{color:#fff;box-shadow:0 12px 28px rgba(210,31,46,.36), 0 3px 8px rgba(210,31,46,.24)} .btn--primary:hover .ic{transform:translateX(3px)} .btn--glass{ background:rgba(255,255,255,.1);color:#fff; border:1px solid rgba(255,255,255,.34); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .btn--glass:hover{background:rgba(255,255,255,.98);color:var(--ink);border-color:transparent;box-shadow:var(--sh-2)} .btn--ghost{ background:transparent;color:var(--ink); border:1.5px solid var(--line); } .btn--ghost:hover{color:var(--red);border-color:var(--red);background:var(--red-tint)} .btn--outline{ background:#fff;color:var(--ink);border:1.5px solid var(--line); } .btn--outline:hover{color:var(--red);border-color:var(--red);box-shadow:var(--sh-1)} .btn--wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(37,211,102,.28)} .btn--wa:hover{background:var(--wa-dark);color:#fff;box-shadow:0 10px 24px rgba(37,211,102,.36)} .btn--wa .ic{width:1.2em;height:1.2em} /* ---------- 5. Header / nav ---------- */ .topbar{ position:relative;z-index:60; background:var(--ink);color:rgba(255,255,255,.72); font-size:.815rem; } .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:38px} .topbar__msg{margin:0;display:flex;align-items:center;gap:.55rem;font-weight:500} .topbar .dot{ width:7px;height:7px;border-radius:50%;background:var(--wa);flex:none; box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulse 2.4s infinite; } @keyframes pulse{ 70%{box-shadow:0 0 0 9px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} } .topbar__links{display:flex;align-items:center;gap:1.5rem} .topbar__links a{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.72);font-weight:600} .topbar__links a:hover{color:#fff} .topbar__links .ic{width:1rem;height:1rem;opacity:.75} .header{ position:sticky;top:0;z-index:70; background:rgba(255,255,255,.86); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid rgba(11,14,20,.07); transition:box-shadow .3s var(--ease), background-color .3s var(--ease); } .header.is-stuck{box-shadow:0 6px 24px rgba(11,14,20,.08);background:rgba(255,255,255,.95)} .header__inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)} .brand{flex:none;display:flex;align-items:center} /* wordmark lockup — wide and short, so it is sized by height */ .brand__img{width:auto;height:38px;transition:transform .3s var(--ease)} .brand:hover .brand__img{transform:scale(1.03)} .nav{margin-left:auto;display:flex;align-items:center;gap:2rem} .nav__list{display:flex;align-items:center;gap:.35rem} .nav__link{ position:relative;display:block;padding:.55rem .85rem;border-radius:var(--r-sm); color:var(--ink-3);font-weight:600;font-size:.945rem; transition:color .2s var(--ease), background-color .2s var(--ease); } .nav__link::after{ content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--red),var(--red-bright)); transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease); } .nav__link:hover{color:var(--red);background:var(--line-2)} .nav__link.is-active{color:var(--red)} .nav__link.is-active::after{transform:scaleX(1)} .nav__cta{display:flex;align-items:center;gap:.6rem} /* ---- Services dropdown ---- */ .nav__item{position:relative} .nav__item--has-sub > .nav__link{display:flex;align-items:center;gap:.35rem} .nav__caret{width:.85rem;height:.85rem;transition:transform .28s var(--ease)} .nav__toggle{display:none} .nav__sub{ position:absolute;top:100%;left:0;z-index:5; width:400px;padding:.6rem;margin-top:.45rem; background:rgba(255,255,255,.94); backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-3); opacity:0;visibility:hidden;transform:translateY(9px); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } /* bridges the gap so the menu survives the cursor crossing it */ .nav__item--has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:.6rem} .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)} .nav__item--has-sub:hover .nav__caret, .nav__item--has-sub:focus-within .nav__caret{transform:rotate(180deg)} .nav__sub ul{display:block} .nav__sub a{ display:flex;align-items:center;gap:.85rem; padding:.7rem .8rem;border-radius:var(--r); color:var(--ink-3);font-size:.9rem;font-weight:600;line-height:1.35; transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .nav__sub a:hover,.nav__sub a:focus-visible{background:var(--red-tint);color:var(--red);transform:translateX(3px)} .nav__sub a[aria-current]{background:var(--red-tint);color:var(--red)} .nav__sub-icon{ display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px; background:rgba(210,31,46,.1);color:var(--red); transition:background .18s var(--ease), color .18s var(--ease); } .nav__sub a:hover .nav__sub-icon{background:var(--red);color:#fff} .nav__sub-icon .ic{width:1.15rem;height:1.15rem} .nav__sub-text{display:grid;gap:.1rem;min-width:0} .nav__sub-text strong{font-family:var(--font-display);font-size:.895rem;font-weight:700} .nav__sub-text small{font-size:.775rem;font-weight:500;color:var(--slate-2);line-height:1.4} .nav__sub a:hover .nav__sub-text small{color:var(--slate)} .nav__sub li+li{margin-top:1px} .nav__sub__all{margin-top:.3rem;padding-top:.55rem;border-top:1px solid var(--line)} .nav__sub__all a{color:var(--red);font-weight:700;font-family:var(--font-display)} /* No colour of its own: the tile turns red on hover and sets the icon to white. Pinning the arrow red here made it vanish into that background. */ .nav__sub__all .ic{width:1.1rem;height:1.1rem} .burger{ display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;margin-left:auto;border-radius:var(--r-sm); } .burger span{display:block;height:2px;width:22px;margin-inline:auto;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-scrim{ position:fixed;inset:0;z-index:65; background:rgba(11,14,20,.5);backdrop-filter:blur(3px); opacity:0;transition:opacity .3s var(--ease); } .nav-scrim.is-on{opacity:1} /* ---------- 6. Hero ---------- */ .hero{ position:relative;isolation:isolate; display:flex;align-items:center; min-height:clamp(600px,92svh,900px); /* bottom padding leaves room for the scroll cue above the overlapping strip */ padding:clamp(5rem,11vw,8rem) 0 clamp(12rem,15vw,14rem); background:var(--ink); overflow:hidden; } .hero__media{position:absolute;inset:0;z-index:-3} .hero__poster,.hero__video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } .hero__video{opacity:0;transition:opacity 1.2s var(--ease)} .hero__video.is-on{opacity:1} .hero__veil{ position:absolute;inset:0;z-index:-2; background: radial-gradient(120% 85% at 8% 12%, rgba(210,31,46,.30) 0%, rgba(210,31,46,0) 55%), radial-gradient(90% 70% at 92% 88%, rgba(30,80,200,.24) 0%, rgba(30,80,200,0) 60%), linear-gradient(104deg, rgba(11,14,20,.95) 0%, rgba(11,14,20,.82) 42%, rgba(11,14,20,.55) 100%); } /* soft brand-coloured light sources drifting behind the veil */ .hero__orbs{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform} .orb--1{ width:460px;height:460px;top:-150px;left:-110px; background:radial-gradient(circle,rgba(239,43,60,.55),transparent 70%); animation:drift-a 19s ease-in-out infinite alternate; } .orb--2{ width:520px;height:520px;top:18%;right:-190px; background:radial-gradient(circle,rgba(45,105,220,.34),transparent 70%); animation:drift-b 23s ease-in-out infinite alternate; } .orb--3{ width:380px;height:380px;bottom:-140px;left:34%; background:radial-gradient(circle,rgba(210,31,46,.38),transparent 70%); animation:drift-a 27s ease-in-out infinite alternate-reverse; } @keyframes drift-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(46px,-34px,0)}} @keyframes drift-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(-52px,30px,0)}} /* hero badge — glass pill with a live dot */ .hero__badge{ display:inline-flex;align-items:center;gap:.6rem; margin:0 0 1.35rem;padding:.5rem 1.1rem; border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); font-family:var(--font-display); font-size:.79rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.88); } .hero__badge-dot{ width:7px;height:7px;border-radius:50%;flex:none;background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 2.4s infinite; } .hero__grid{ position:absolute;inset:0;z-index:-1;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:66px 66px; -webkit-mask-image:radial-gradient(115% 85% at 50% 45%,#000 25%,transparent 78%); mask-image:radial-gradient(115% 85% at 50% 45%,#000 25%,transparent 78%); } .hero__inner{position:relative;max-width:830px} .hero__title{ color:#fff; font-size:clamp(2.5rem,1.35rem + 4.9vw,4.65rem); line-height:1.05;letter-spacing:-.035em; text-shadow:0 2px 28px rgba(0,0,0,.32); } .hero__lead{ margin-top:1.5rem;max-width:640px; color:rgba(255,255,255,.8); font-size:clamp(1.05rem,1rem + .35vw,1.24rem); line-height:1.66; } .hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem} .hero__trust{ display:flex;flex-wrap:wrap;gap:.7rem 1.9rem; margin-top:2.9rem;padding-top:1.9rem; border-top:1px solid rgba(255,255,255,.14); } .hero__trust li{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.78);font-size:.925rem;font-weight:600} .hero__trust .ic{width:1.05rem;height:1.05rem;color:var(--wa)} .hero__scroll{ /* The strip is pulled up 46px over the hero AND its shadow (0 28px 60px) reaches a further 32px above the card. Clear both, plus breathing room. */ position:absolute;left:50%;bottom:calc(46px + 3.5rem);translate:-50% 0;z-index:3; width:26px;height:42px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3); transition:border-color .25s var(--ease); } .hero__scroll:hover{border-color:rgba(255,255,255,.7)} .hero__scroll span{ position:absolute;left:50%;top:9px;translate:-50% 0; width:3px;height:7px;border-radius:2px;background:rgba(255,255,255,.85); animation:wheel 1.9s var(--ease) infinite; } @keyframes wheel{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(15px)}} /* ---------- 7. Sections ---------- */ .section{padding-block:var(--sec-y)} .section--soft{background:var(--bg-soft)} .section--dark{background:var(--ink);color:rgba(255,255,255,.7)} /* capability strip */ .strip{ position:relative;z-index:2;margin-top:-46px; } .strip__inner{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden; } .strip__item{ display:flex;align-items:center;gap:.85rem; padding:1.5rem 1.6rem; font-size:.9rem;font-weight:600;color:var(--ink-3);line-height:1.45; border-right:1px solid var(--line-2); } .strip__item:last-child{border-right:0} .strip__item .ic{width:1.55rem;height:1.55rem;color:var(--red)} /* service cards */ .cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1.4rem; } .card{ position:relative;isolation:isolate;overflow:hidden; padding:2.1rem 1.9rem; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(160deg,rgba(210,31,46,.055),rgba(210,31,46,0) 48%); opacity:0;transition:opacity .35s var(--ease); } .card::after{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--red),var(--red-bright)); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } /* corner light that warms up on hover */ .card__glow{ position:absolute;top:-60px;right:-60px;width:180px;height:180px;z-index:-1; border-radius:50%;filter:blur(26px);opacity:0; background:radial-gradient(circle,rgba(210,31,46,.34),transparent 68%); transition:opacity .55s var(--ease); pointer-events:none; } .card:hover .card__glow,.mini:hover .card__glow,.value:hover .card__glow{opacity:.85} .card:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:rgba(210,31,46,.24)} .card:hover::before{opacity:1} .card:hover::after{transform:scaleX(1)} .card__icon{ display:grid;place-items:center;width:56px;height:56px;margin-bottom:1.35rem; border-radius:16px; background:linear-gradient(140deg,var(--red-tint),#fff); border:1px solid rgba(210,31,46,.16); color:var(--red); transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); } .card__icon .ic{width:1.65rem;height:1.65rem} .card:hover .card__icon{ transform:translateY(-2px) rotate(-4deg); background:linear-gradient(140deg,var(--red-bright),var(--red-deep)); color:#fff;border-color:transparent; } .card__title{font-size:1.24rem;letter-spacing:-.02em} .card__badge{ display:inline-block;margin:.7rem 0 .95rem;padding:.24rem .68rem; background:var(--line-2);border-radius:999px; font-size:.735rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate); } .card__text{font-size:.945rem;line-height:1.65} .card__list{margin-top:1.15rem;padding-top:1.15rem;border-top:1px dashed var(--line);display:grid;gap:.55rem} .card__list li{position:relative;padding-left:1.4rem;font-size:.885rem;font-weight:600;color:var(--ink-3)} .card__list li::before{ content:"";position:absolute;left:0;top:.55em; width:7px;height:7px;border-radius:50%; background:linear-gradient(135deg,var(--red-bright),var(--red)); } .card--cta{ display:flex;flex-direction:column;justify-content:center;gap:1.1rem;align-items:flex-start; background:linear-gradient(150deg,var(--ink-2),var(--ink));border-color:transparent; } .card--cta::before{background:radial-gradient(90% 80% at 15% 10%,rgba(239,43,60,.28),transparent 60%);opacity:1} .card--cta::after{display:none} .card--cta .card__title{color:#fff;font-size:1.32rem} .card--cta .card__text{color:rgba(255,255,255,.68)} .card--cta:hover{border-color:transparent} /* why choose */ .why{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center} .why__media{position:relative} .why__media img{ width:100%;aspect-ratio:4/3.35;object-fit:cover; border-radius:var(--r-xl); box-shadow:0 30px 70px rgba(0,0,0,.45); } .why__media::after{ content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;z-index:-1; border-radius:var(--r-xl); background:linear-gradient(140deg,rgba(239,43,60,.35),rgba(239,43,60,0)); filter:blur(4px); } .why__badge{ position:absolute;left:-14px;bottom:26px; display:flex;align-items:center;gap:.8rem; padding:.95rem 1.25rem; background:#fff;border-radius:var(--r);box-shadow:var(--sh-3); } .why__badge .ic{width:1.5rem;height:1.5rem;color:var(--red)} .why__badge strong{display:block;color:var(--ink);font-size:.94rem;line-height:1.3} .why__badge span{display:block;color:var(--slate);font-size:.8rem} .why__list{display:grid;gap:1.5rem;margin-top:2.4rem} .why__list li{display:flex;gap:1.15rem} .why__ic{ display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--red-bright); transition:background .3s var(--ease), color .3s var(--ease); } .why__ic .ic{width:1.35rem;height:1.35rem} .why__list li:hover .why__ic{background:var(--red);color:#fff;border-color:transparent} .why__list h3{font-size:1.06rem;color:#fff;margin-bottom:.35rem} .why__list p{font-size:.925rem;color:rgba(255,255,255,.62);line-height:1.6;margin:0} /* process */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;counter-reset:s} .step{ position:relative;padding:2rem 1.7rem 1.8rem; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .step__n{ display:block;margin-bottom:.85rem; font-size:1.9rem;font-weight:800;letter-spacing:-.04em; background:linear-gradient(135deg,var(--red-bright),var(--red-deep)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .step h3{font-size:1.06rem;margin-bottom:.5rem} .step p{font-size:.9rem;line-height:1.6;margin:0} /* pricing */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.5rem;align-items:start} /* two-plan layout — keep the cards from stretching across the full shell */ .plans--two{max-width:860px;margin-inline:auto} .plan{ position:relative;display:flex;flex-direction:column; padding:2.2rem 1.9rem; background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-1); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .plan--featured{ background:linear-gradient(165deg,var(--ink-2),var(--ink)); border-color:transparent;box-shadow:var(--sh-3); } .plan--featured::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(80% 60% at 50% 0%,rgba(239,43,60,.3),transparent 65%); } .plan__tag{ position:absolute;top:-13px;left:50%;translate:-50% 0; padding:.35rem 1rem;border-radius:999px; background:linear-gradient(135deg,var(--red-bright),var(--red-deep));color:#fff; font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; box-shadow:var(--sh-red); } .plan__name{position:relative;font-size:1.22rem} .plan__desc{position:relative;margin:.55rem 0 1.5rem;font-size:.9rem;line-height:1.55} .plan__price{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem;padding-bottom:1.6rem;border-bottom:1px solid var(--line)} .plan__from{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2)} .plan__price strong{font-size:2.05rem;font-weight:800;letter-spacing:-.035em;color:var(--ink)} .plan__unit{font-size:.86rem;color:var(--slate-2)} .plan__list{position:relative;display:grid;gap:.75rem;margin-bottom:1.9rem;flex:1} .plan__list li{display:flex;gap:.65rem;font-size:.92rem;font-weight:500;color:var(--ink-3);line-height:1.5} .plan__list .ic{width:1.05rem;height:1.05rem;margin-top:.22em;color:var(--red)} .plan--featured .plan__name{color:#fff} .plan--featured .plan__desc{color:rgba(255,255,255,.62)} .plan--featured .plan__price{border-bottom-color:rgba(255,255,255,.14)} .plan--featured .plan__price strong{color:#fff} .plan--featured .plan__from,.plan--featured .plan__unit{color:rgba(255,255,255,.55)} .plan--featured .plan__list li{color:rgba(255,255,255,.86)} .plan--featured .plan__list .ic{color:var(--red-bright)} .plan--featured .btn{position:relative} .plans__note{ max-width:640px;margin:2.4rem auto 0;text-align:center; font-size:.885rem;color:var(--slate-2); } /* about */ .about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center} .about__body p{font-size:1.0125rem} .about__facts{display:grid;gap:1rem;margin-top:2.2rem} .fact{ display:flex;align-items:center;gap:.95rem; padding:1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--r); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .fact:hover{transform:translateX(4px);box-shadow:var(--sh-1)} .fact .ic{width:1.4rem;height:1.4rem;color:var(--red);flex:none} .fact strong{display:block;color:var(--ink);font-size:.95rem;line-height:1.3} .fact span{display:block;color:var(--slate-2);font-size:.845rem} .about__media{position:relative;min-height:400px} .about__img{ position:absolute;border-radius:var(--r-xl);object-fit:cover;box-shadow:var(--sh-3); } .about__img--a{width:76%;aspect-ratio:4/3.2;top:0;left:0;z-index:1} .about__img--b{width:58%;aspect-ratio:4/3.4;right:0;bottom:0;z-index:2;border:6px solid var(--bg-soft)} /* faq */ .faq{display:grid;gap:.85rem} .faq__item{ background:#fff;border:1px solid var(--line);border-radius:var(--r); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); } .faq__item.is-open{border-color:rgba(210,31,46,.28);box-shadow:var(--sh-2)} .faq__q{ display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%; padding:1.25rem 1.45rem;text-align:left; font-size:1.02rem;font-weight:700;color:var(--ink);letter-spacing:-.012em;line-height:1.4; border-radius:var(--r); } .faq__chev{ width:1.2rem;height:1.2rem;flex:none;color:var(--red); transition:transform .35s var(--ease); } .faq__item.is-open .faq__chev{transform:rotate(135deg)} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)} .faq__item.is-open .faq__a{grid-template-rows:1fr} .faq__a > div{overflow:hidden} .faq__a p{padding:0 1.45rem 1.35rem;font-size:.945rem;line-height:1.68;margin:0} /* cta band */ .cta{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(3.75rem,7vw,5.75rem);background:var(--ink)} .cta__bg{ position:absolute;inset:0;z-index:-1; background-image:linear-gradient(105deg,rgba(11,14,20,.95),rgba(11,14,20,.72)),url("../img/cta.jpg"); background-size:cover;background-position:center; } @supports (background-image:image-set(url("../img/cta.webp") type("image/webp"))){ .cta__bg{ background-image:linear-gradient(105deg,rgba(11,14,20,.95),rgba(11,14,20,.72)), image-set(url("../img/cta.webp") type("image/webp")); } @media (max-width:760px){ .cta__bg{ background-image:linear-gradient(105deg,rgba(11,14,20,.95),rgba(11,14,20,.72)), image-set(url("../img/cta-700.webp") type("image/webp")); } } } .cta__inner{text-align:center;max-width:760px;margin-inline:auto} .cta h2{color:#fff;font-size:clamp(1.65rem,1.15rem + 2vw,2.65rem)} .cta p{margin-top:1rem;color:rgba(255,255,255,.72);font-size:1.05rem} .cta__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.1rem} /* ---------- inner-page banner ---------- */ .page-hero{ position:relative;isolation:isolate;overflow:hidden; padding-block:clamp(3.25rem,8vw,5.5rem); background:var(--ink); text-align:center; } .page-hero::before{ content:"";position:absolute;inset:0;z-index:-2; background-size:cover;background-position:center; opacity:.55; } /* Banner images are set here rather than via an inline custom property: a relative url() inside a var() resolves against this stylesheet's folder, not the page, which silently breaks the path. Plain rules are unambiguous. */ .page-hero--services::before{background-image:url("../img/network.jpg")} .page-hero--pricing::before {background-image:url("../img/cta.jpg")} .page-hero--about::before {background-image:url("../img/team.jpg")} .page-hero--contact::before {background-image:url("../img/why.jpg")} .page-hero--blog::before {background-image:url("../img/blog/webdev.jpg")} .page-hero--routes::before {background-image:url("../img/cta.jpg")} .page-hero--dids::before {background-image:url("../img/blog/dids.jpg")} .page-hero--pbx::before {background-image:url("../img/blog/asterisk.jpg")} .page-hero--ivr::before {background-image:url("../img/blog/ivr.jpg")} .page-hero--firewall::before{background-image:url("../img/blog/security.jpg")} .page-hero--vpn::before {background-image:url("../img/network.jpg")} .page-hero--web::before {background-image:url("../img/blog/webdev.jpg")} .page-hero--post::before {background-image:url("../img/hero-poster.jpg")} .page-hero--trunking::before{background-image:url("../img/blog/trunking.jpg")} .page-hero--isdn::before {background-image:url("../img/blog/pstn.jpg")} .page-hero--faq::before {background-image:url("../img/blog/provider.jpg")} /* The same banners in WebP, roughly half the bytes, and the 700px cut on phones. Guarded by @supports because a browser that cannot parse image-set() would drop the declaration and show no banner at all; those fall back to the JPEG rules above. The banner sits at opacity .55 under a dark overlay, so the smaller file costs nothing visually. */ @supports (background-image:image-set(url("../img/why.webp") type("image/webp"))){ .page-hero--services::before{background-image:image-set(url("../img/network.webp") type("image/webp"))} .page-hero--pricing::before {background-image:image-set(url("../img/cta.webp") type("image/webp"))} .page-hero--about::before {background-image:image-set(url("../img/team.webp") type("image/webp"))} .page-hero--contact::before {background-image:image-set(url("../img/why.webp") type("image/webp"))} .page-hero--blog::before {background-image:image-set(url("../img/blog/webdev.webp") type("image/webp"))} .page-hero--routes::before {background-image:image-set(url("../img/cta.webp") type("image/webp"))} .page-hero--dids::before {background-image:image-set(url("../img/blog/dids.webp") type("image/webp"))} .page-hero--pbx::before {background-image:image-set(url("../img/blog/asterisk.webp") type("image/webp"))} .page-hero--ivr::before {background-image:image-set(url("../img/blog/ivr.webp") type("image/webp"))} .page-hero--firewall::before{background-image:image-set(url("../img/blog/security.webp") type("image/webp"))} .page-hero--vpn::before {background-image:image-set(url("../img/network.webp") type("image/webp"))} .page-hero--web::before {background-image:image-set(url("../img/blog/webdev.webp") type("image/webp"))} .page-hero--post::before {background-image:image-set(url("../img/hero-poster.webp") type("image/webp"))} .page-hero--trunking::before{background-image:image-set(url("../img/blog/trunking.webp") type("image/webp"))} .page-hero--isdn::before {background-image:image-set(url("../img/blog/pstn.webp") type("image/webp"))} .page-hero--faq::before {background-image:image-set(url("../img/blog/provider.webp") type("image/webp"))} @media (max-width:760px){ .page-hero--services::before{background-image:image-set(url("../img/network-700.webp") type("image/webp"))} .page-hero--pricing::before {background-image:image-set(url("../img/cta-700.webp") type("image/webp"))} .page-hero--about::before {background-image:image-set(url("../img/team-700.webp") type("image/webp"))} .page-hero--contact::before {background-image:image-set(url("../img/why-700.webp") type("image/webp"))} .page-hero--blog::before {background-image:image-set(url("../img/blog/webdev-700.webp") type("image/webp"))} .page-hero--routes::before {background-image:image-set(url("../img/cta-700.webp") type("image/webp"))} .page-hero--dids::before {background-image:image-set(url("../img/blog/dids-700.webp") type("image/webp"))} .page-hero--pbx::before {background-image:image-set(url("../img/blog/asterisk-700.webp") type("image/webp"))} .page-hero--ivr::before {background-image:image-set(url("../img/blog/ivr-700.webp") type("image/webp"))} .page-hero--firewall::before{background-image:image-set(url("../img/blog/security-700.webp") type("image/webp"))} .page-hero--vpn::before {background-image:image-set(url("../img/network-700.webp") type("image/webp"))} .page-hero--web::before {background-image:image-set(url("../img/blog/webdev-700.webp") type("image/webp"))} .page-hero--post::before {background-image:image-set(url("../img/hero-poster-700.webp") type("image/webp"))} .page-hero--trunking::before{background-image:image-set(url("../img/blog/trunking-700.webp") type("image/webp"))} .page-hero--isdn::before {background-image:image-set(url("../img/blog/pstn-700.webp") type("image/webp"))} .page-hero--faq::before {background-image:image-set(url("../img/blog/provider-700.webp") type("image/webp"))} } } .page-hero::after{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(95% 80% at 10% 0%, rgba(210,31,46,.34) 0%, rgba(210,31,46,0) 58%), linear-gradient(180deg, rgba(11,14,20,.78) 0%, rgba(11,14,20,.9) 100%); } .page-hero .eyebrow{justify-content:center} .page-hero h1{ color:#fff; font-size:clamp(2rem,1.3rem + 2.9vw,3.35rem); letter-spacing:-.033em; } .page-hero__lead{ max-width:660px;margin:1.15rem auto 0; color:rgba(255,255,255,.76);font-size:1.06rem;line-height:1.65; } .crumb{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem; margin-top:1.7rem;font-size:.84rem;font-weight:600; } .crumb li{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.5)} .crumb li+li::before{content:"/";color:rgba(255,255,255,.3)} .crumb a{color:rgba(255,255,255,.72)} .crumb a:hover{color:#fff} .crumb [aria-current]{color:var(--red-bright)} /* ---------- compact service cards (home overview) ---------- */ .svc-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.15rem} .mini{ position:relative;display:flex;gap:1.05rem;align-items:flex-start; padding:1.5rem 1.5rem; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); } .mini:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(210,31,46,.22)} .mini__icon{ display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px; background:linear-gradient(140deg,var(--red-tint),#fff); border:1px solid rgba(210,31,46,.16);color:var(--red); transition:background .32s var(--ease), color .32s var(--ease); } .mini__icon .ic{width:1.4rem;height:1.4rem} .mini:hover .mini__icon{background:linear-gradient(140deg,var(--red-bright),var(--red-deep));color:#fff;border-color:transparent} .mini h3{font-size:1.03rem;margin-bottom:.3rem;letter-spacing:-.015em} .mini h3 a{color:inherit} .mini h3 a::after{content:"";position:absolute;inset:0} .mini:hover h3{color:var(--red)} .mini p{font-size:.885rem;line-height:1.55;margin:0} .sec-more{display:flex;justify-content:center;margin-top:2.5rem} /* ---------- detailed service rows (services page) ---------- */ .svc-rows{display:grid;gap:1.5rem} .svc-row{ position:relative;overflow:hidden; display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.5rem,3.5vw,3rem); padding:clamp(1.7rem,3.5vw,2.4rem); background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-1); scroll-margin-top:calc(var(--header-h) + 20px); transition:box-shadow .35s var(--ease), border-color .35s var(--ease); } .svc-row::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease); } .svc-row:hover{box-shadow:var(--sh-2);border-color:rgba(210,31,46,.2)} .svc-row:hover::after,.svc-row:target::after{transform:scaleY(1)} .svc-row:target{border-color:rgba(210,31,46,.35);box-shadow:var(--sh-2)} .svc-row__icon{ display:grid;place-items:center;width:58px;height:58px;margin-bottom:1.2rem;border-radius:16px; background:linear-gradient(140deg,var(--red-tint),#fff); border:1px solid rgba(210,31,46,.16);color:var(--red); } .svc-row__icon .ic{width:1.7rem;height:1.7rem} .svc-row h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);letter-spacing:-.022em} .svc-row__badge{ display:inline-block;margin:0 0 .7rem;padding:.24rem .68rem; background:var(--line-2);border-radius:999px; font-size:.735rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate); } .svc-row__body p{font-size:.975rem;line-height:1.68} .svc-row__list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.65rem 1.4rem; margin-top:1.35rem;padding-top:1.35rem;border-top:1px dashed var(--line); } .svc-row__list li{display:flex;gap:.6rem;font-size:.895rem;font-weight:600;color:var(--ink-3);line-height:1.5} .svc-row__list .ic{width:1.05rem;height:1.05rem;margin-top:.2em;flex:none;color:var(--red)} .svc-row__link{margin:1.35rem 0 0} /* ---------- pricing comparison table ---------- */ .ptable-wrap{ margin-top:clamp(2.5rem,5vw,3.5rem); overflow-x:auto; border:1px solid var(--line);border-radius:var(--r-lg);background:#fff; box-shadow:var(--sh-1); -webkit-overflow-scrolling:touch; } .ptable{width:100%;border-collapse:collapse;min-width:640px} .ptable caption{ padding:1.4rem 1.5rem .35rem;text-align:left; font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em; } .ptable th,.ptable td{padding:.95rem 1.25rem;text-align:left;font-size:.91rem;border-bottom:1px solid var(--line-2)} .ptable thead th{ background:var(--bg-soft); font-size:.775rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-2); border-bottom:1px solid var(--line); position:sticky;top:0; } .ptable thead th:first-child{width:38%} .ptable tbody th{font-weight:700;color:var(--ink-3)} .ptable td{text-align:center;color:var(--slate)} .ptable thead th:not(:first-child){text-align:center} .ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0} .ptable tbody tr:hover{background:#fcfdff} .ptable .yes{color:#12734a} .ptable .no{color:#c3cad6} .ptable .ic{width:1.15rem;height:1.15rem;margin-inline:auto} .ptable .featured-col{background:rgba(210,31,46,.045)} /* ---------- single service figure ---------- */ .svc-figure{position:relative} .svc-figure img{ width:100%;aspect-ratio:4/3.15;object-fit:cover; border-radius:var(--r-xl);box-shadow:var(--sh-3); } .svc-figure::after{ content:"";position:absolute;inset:auto -16px -16px auto;width:58%;height:58%;z-index:-1; border-radius:var(--r-xl); background:linear-gradient(140deg,rgba(210,31,46,.22),rgba(210,31,46,0)); } /* ---------- blog listing ---------- */ .posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem} .post{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); } .post:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:rgba(210,31,46,.2)} .post__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)} .post__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .post:hover .post__media img{transform:scale(1.05)} .post__tag{ position:absolute;left:.9rem;top:.9rem; padding:.3rem .7rem;border-radius:999px; background:rgba(11,14,20,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; } .post__body{display:flex;flex-direction:column;flex:1;padding:1.5rem 1.5rem 1.6rem} .post__meta{ display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; margin-bottom:.7rem;font-size:.79rem;font-weight:600;color:var(--slate-2); } .post__meta span+span::before{content:"·";margin-right:.45rem} .post h3{font-size:1.12rem;line-height:1.35;letter-spacing:-.018em;margin-bottom:.55rem} .post h3 a{color:inherit} .post h3 a::after{content:"";position:absolute;inset:0} .post:hover h3{color:var(--red)} .post p{font-size:.9rem;line-height:1.6;margin:0 0 1.15rem} .post__more{ margin-top:auto;display:inline-flex;align-items:center;gap:.45rem; font-size:.875rem;font-weight:700;color:var(--red); } .post__more .ic{width:1rem;height:1rem;transition:transform .25s var(--ease)} .post:hover .post__more .ic{transform:translateX(4px)} .post--wide{grid-column:1/-1;flex-direction:row} .post--wide .post__media{flex:0 0 46%;aspect-ratio:auto} .post--wide .post__body{padding:clamp(1.6rem,3vw,2.4rem)} .post--wide h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem)} .post--wide p{font-size:.975rem} /* ---------- article ---------- */ .article{max-width:760px;margin-inline:auto} .article__meta{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem; margin-top:1.5rem;font-size:.87rem;font-weight:600;color:rgba(255,255,255,.62); } .article__meta span+span::before{content:"·";margin-right:.5rem} .article__lead{ font-size:1.13rem;line-height:1.7;color:var(--ink-3);font-weight:500; padding-bottom:1.6rem;margin-bottom:1.9rem;border-bottom:1px solid var(--line); } .article h2{ font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem); margin:2.4rem 0 .9rem;scroll-margin-top:calc(var(--header-h) + 20px); } .article h3{font-size:1.12rem;margin:1.9rem 0 .6rem} .article p{font-size:1.0125rem;line-height:1.75;margin-bottom:1.15rem} .article ul,.article ol{margin:0 0 1.3rem;padding-left:0} .article li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;font-size:1.0125rem;line-height:1.7} .article ul li::before{ content:"";position:absolute;left:.25rem;top:.72em;width:7px;height:7px;border-radius:50%; background:linear-gradient(135deg,var(--red-bright),var(--red)); } .article ol{counter-reset:a} .article ol li{counter-increment:a} .article ol li::before{ content:counter(a) ".";position:absolute;left:0;top:0; font-weight:800;color:var(--red);font-size:.95em; } .article strong{color:var(--ink);font-weight:700} .article__note{ margin:1.9rem 0;padding:1.3rem 1.5rem; background:var(--bg-soft);border-left:4px solid var(--red);border-radius:0 var(--r) var(--r) 0; } .article__note p{margin:0;font-size:.96rem} .article__note strong{display:block;margin-bottom:.3rem} .article__end{ margin-top:2.75rem;padding-top:1.9rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;gap:.85rem; } .article__end p{margin:0;flex:1 1 240px;font-size:.95rem} /* ---------- value grid (about) ---------- */ .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem} .value{ padding:1.9rem 1.65rem; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .value:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .value__icon{ display:grid;place-items:center;width:50px;height:50px;margin-bottom:1.1rem;border-radius:14px; background:var(--red-tint);color:var(--red); } .value__icon .ic{width:1.5rem;height:1.5rem} .value h3{font-size:1.06rem;margin-bottom:.45rem} .value p{font-size:.9rem;line-height:1.6;margin:0} /* contact */ .contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4rem);align-items:start} .contact__details{display:grid;gap:.75rem;margin-top:2.2rem} .contact__details li{ display:flex;align-items:center;gap:1rem; padding:1rem 1.15rem;background:#fff;border:1px solid var(--line);border-radius:var(--r); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .contact__details li:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:rgba(210,31,46,.2)} .contact__ic{ display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px; background:var(--red-tint);color:var(--red); } .contact__ic .ic{width:1.3rem;height:1.3rem} .contact__details strong{display:block;font-size:.775rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)} .contact__details a{display:block;font-size:1rem;font-weight:700;color:var(--ink)} .contact__details a:hover{color:var(--red)} .contact__formwrap{ padding:clamp(1.6rem,3.5vw,2.5rem); background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-2); } .form__title{font-size:1.24rem;margin-bottom:1.6rem} .form__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem} .field{margin-bottom:1.05rem} .field label{display:block;margin-bottom:.42rem;font-size:.855rem;font-weight:700;color:var(--ink-3)} .field label span{color:var(--red)} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem; background:var(--bg-soft);border:1.5px solid var(--line);border-radius:var(--r-sm); font-size:.95rem;color:var(--ink); transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea{resize:vertical;min-height:120px;line-height:1.6} .field select{ appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6577' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:1.05rem; padding-right:2.6rem; } .field input::placeholder,.field textarea::placeholder{color:#a6afbe} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;background:#fff;border-color:var(--red); box-shadow:0 0 0 4px rgba(210,31,46,.11); } .field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:var(--red);background:var(--red-tint)} .field__err{margin:.4rem 0 0;font-size:.8rem;font-weight:600;color:var(--red);min-height:0} .field__err:empty{display:none} .check{display:flex;align-items:flex-start;gap:.7rem;margin:.4rem 0 .3rem;font-size:.885rem;line-height:1.5;cursor:pointer} .check input{ appearance:none;-webkit-appearance:none;flex:none; width:20px;height:20px;margin-top:.12rem; background:var(--bg-soft);border:1.5px solid var(--line);border-radius:6px; transition:background .2s var(--ease), border-color .2s var(--ease); } .check input:checked{ background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/13px no-repeat; border-color:var(--red); } .check.is-bad input{border-color:var(--red)} /* ---------- custom select ---------- A native