/* Otek Commerce — commerce.otek.io Studio canvas (#07070b / #fafaf7) with the product green as the ONE accent. Dark and light sections alternate to give the page rhythm. Everything is logical-property based (margin-inline, inset-inline) so an LTR English build is a flip, not a rewrite. */ /* ---- fonts: self-hosted, no third-party round trip on the LCP path ---- */ @font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/tajawal-400-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap; src:url(assets/fonts/tajawal-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap; src:url(assets/fonts/tajawal-700-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap; src:url(assets/fonts/tajawal-700-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Tajawal;font-style:normal;font-weight:900;font-display:swap; src:url(assets/fonts/tajawal-900-arabic.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:Tajawal;font-style:normal;font-weight:900;font-display:swap; src:url(assets/fonts/tajawal-900-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --ink:#07070b; --ink-soft:#101018; --paper:#fafaf7; --paper-2:#f2f1ec; --t1:#4a4a52; /* secondary text on light */ --t2:#8b8b93; /* tertiary text on light */ --line:#e3e2dc; --line-dark:#26262e; --d1:#c9c9cf; /* secondary text on dark */ --d2:#7d7d87; --green:#5E9F3C; --green-lift:#6fb84a; --green-dark:#4E8A30; --wrap:1200px; --r:3px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:Tajawal,system-ui,-apple-system,'Segoe UI',sans-serif; font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} /* 1.22, not the 1.1 a Latin display face would take: Arabic needs headroom for diacritics — at 1.1 the shadda on "كبّر" clips against the line above. */ h1,h2,h3{line-height:1.22;letter-spacing:-.015em;margin:0;text-wrap:balance} h1 em,h2 em{font-style:normal;color:var(--green)} /* On the dark panels the mid green loses too much contrast — lift it. */ .hero h1 em,.market h2 em,.ownapp h2 em,.close h2 em{color:var(--green-lift)} p{margin:0} ul,ol,dl{margin:0;padding:0;list-style:none} .wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto} .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{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:99} .skip:focus{inset-inline-start:0} :focus-visible{outline:2px solid var(--green);outline-offset:3px} /* Film grain — the single texture that stops the dark panels reading as flat CSS blocks. */ .grain{position:relative;isolation:isolate} .grain::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- eyebrow ---- */ .eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700; letter-spacing:.14em;color:var(--t2);margin:0 0 26px} .eyebrow .rule{display:block;width:34px;height:1px;background:var(--green);flex:none} .eyebrow.light{color:var(--d2)} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 28px;border:1px solid transparent;border-radius:var(--r); font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--green);border-color:var(--green);color:#fff} .btn-primary:hover{background:var(--green-lift);border-color:var(--green-lift)} .btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--paper)} .btn-outline-light{background:transparent;border-color:#3d3d46;color:#fff} .btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--ink)} .btn-sm{padding:10px 20px;font-size:15px} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .micro{color:var(--t2);font-size:14px;margin-top:16px} .micro.light{color:var(--d2)} /* ---- header ---- */ .site-head{position:fixed;inset-inline:0;top:0;z-index:50;transition:background .3s ease,border-color .3s ease} .site-head{border-bottom:1px solid transparent} .head-inner{display:flex;align-items:center;gap:30px;height:74px} /* Lockup: the studio wordmark + a hairline + the product name. Built in markup rather than baked into a PNG so it stays crisp at any DPR and can recolour per background. */ .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;transition:color .3s ease} .brand-logo{ width:auto;height:26px;flex:none; /* The mark is red — on the dark hero that drops to ~3:1, so it renders white there and reverts to brand red once the header goes solid over the light page. */ filter:brightness(0) invert(1); transition:filter .3s ease; } .site-head.stuck .brand-logo,.foot-brand .brand-logo{filter:none} /* Wide-tracked small caps rather than a lowercase word behind a rule: it reads as a product lockup instead of a tagline, and it stays neutral so the red mark never fights the green accent. padding-top nudges the caps onto the mark's optical centre. */ .brand-sub{ font-size:10.5px;font-weight:700;line-height:1; letter-spacing:.28em;text-transform:uppercase; opacity:.66;padding-top:2px;white-space:nowrap; } .foot-brand{color:var(--t1)} .foot-brand .brand-logo{height:22px} @media (max-width:420px){.brand-sub{display:none}} .site-head nav{display:flex;gap:26px;margin-inline-start:auto;font-size:15px} .site-head nav a{text-decoration:none;color:rgba(255,255,255,.72);transition:color .2s ease} .site-head nav a:hover{color:#fff} /* Leaving for the parent site — set apart from the in-page anchors so it doesn't read as another section of this page. */ .nav-up{display:inline-flex;align-items:center;gap:6px;padding-inline-start:22px; margin-inline-start:4px;border-inline-start:1px solid rgba(255,255,255,.18);direction:ltr} .nav-up svg{width:12px;height:12px;opacity:.7} .site-head.stuck .nav-up{border-inline-start-color:var(--line)} .foot-up{font-weight:700;border-bottom:1px solid var(--green);text-decoration:none} /* solid once scrolled off the hero (main.js toggles .stuck) */ .site-head.stuck{background:rgba(250,250,247,.9);backdrop-filter:blur(12px);border-bottom-color:var(--line)} .site-head.stuck .brand{color:var(--ink)} .site-head.stuck nav a{color:var(--t1)} .site-head.stuck nav a:hover{color:var(--ink)} @media (max-width:900px){.site-head nav{display:none}.head-inner{gap:14px}.btn-sm{margin-inline-start:auto}} /* ---- hero ---- */ .hero{position:relative;background:var(--ink);color:#fff;min-height:min(94vh,860px); display:flex;flex-direction:column;justify-content:center;padding-top:120px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 50%} /* Scrim is heaviest on the RIGHT, where the RTL copy sits, and lightest on the LEFT so the photograph's subject stays visible. Physical direction on purpose — an LTR build must mirror it. */ .hero::before{content:"";position:absolute;inset:0;z-index:1; background: linear-gradient(to right,rgba(7,7,11,.18) 0%,rgba(7,7,11,.62) 52%,rgba(7,7,11,.88) 100%), linear-gradient(to bottom,rgba(7,7,11,.55) 0%,rgba(7,7,11,0) 26%)} .hero-inner{position:relative;z-index:2;padding-block:clamp(40px,7vw,80px) clamp(90px,12vw,150px)} .hero h1{font-size:clamp(46px,8.6vw,104px);font-weight:900;letter-spacing:-.03em} .hero .lede{margin-top:28px;font-size:clamp(17px,2vw,21px);color:var(--d1);max-width:47ch;line-height:1.7} @media (max-width:600px){.nb{display:none}} /* stats band welded to the hero's lower edge */ .hero-stats{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14); background:rgba(7,7,11,.5);backdrop-filter:blur(6px)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr)} .stats-grid div{padding:26px 22px;display:flex;flex-direction:column;gap:5px; border-inline-start:1px solid rgba(255,255,255,.12)} .stats-grid div:first-child{border-inline-start:0} .stats-grid strong{font-size:clamp(19px,2.3vw,26px);font-weight:900;letter-spacing:-.02em;color:#fff} .stats-grid span{font-size:13.5px;color:var(--d2);line-height:1.5} @media (max-width:820px){ .stats-grid{grid-template-columns:repeat(2,1fr)} .stats-grid div:nth-child(3){border-inline-start:0} .stats-grid div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)} } /* ---- generic section ---- */ section{padding-block:clamp(76px,10vw,140px)} .sec-h{font-size:clamp(34px,5.6vw,68px);font-weight:900;letter-spacing:-.025em} .sec-lede{margin-top:22px;font-size:clamp(16px,1.85vw,19px);color:var(--t1);max-width:52ch;line-height:1.7} .market .sec-lede,.ownapp .sec-lede,.close .sec-lede{color:var(--d1)} /* ---- journey ---- */ .beats{margin-top:clamp(50px,7vw,90px);position:relative} .beats::before{content:"";position:absolute;inset-block:0;inset-inline-start:7px;width:1px;background:var(--line)} .beats::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:7px;width:1px; height:var(--thread,0%);background:var(--green);transition:height .25s linear} .beat{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px); align-items:center;padding-block:clamp(36px,5vw,62px);padding-inline-start:52px} .beat::before{content:"";position:absolute;inset-inline-start:0;top:calc(clamp(36px,5vw,62px) + 14px); width:15px;height:15px;border-radius:50%;background:var(--paper);border:1px solid var(--line); transition:background .3s ease,border-color .3s ease} .beat.on::before{background:var(--green);border-color:var(--green)} .beat-n{display:block;font-size:12.5px;font-weight:700;color:var(--green);letter-spacing:.16em;margin-bottom:14px} .beat h3{font-size:clamp(24px,3.2vw,36px);font-weight:900} .beat p{margin-top:15px;color:var(--t1)} .beat-img{margin:0;overflow:hidden;border-radius:var(--r)} .beat-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)} .beat:hover .beat-img img{transform:scale(1.035)} .beat:nth-child(even) .beat-img{order:-1} @media (max-width:820px){ .beat{grid-template-columns:1fr;gap:24px;padding-inline-start:40px} .beat:nth-child(even) .beat-img{order:0} } /* beat 5 — deliberately breaks the alternating rhythm */ .beat-final{position:relative;margin-top:clamp(34px,5vw,60px);background:var(--ink);color:#fff; border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr; gap:clamp(28px,4vw,60px);align-items:center;padding:clamp(28px,4vw,56px)} .bf-img{margin:0;overflow:hidden;border-radius:var(--r)} .bf-img img{width:100%;aspect-ratio:3/2;object-fit:cover} .bf-txt h3{font-size:clamp(26px,3.6vw,42px);font-weight:900} .bf-txt p{margin-top:16px;color:var(--d1)} .bf-txt strong{color:#fff} .bf-txt .mark{color:var(--green);border-bottom:2px solid var(--green);padding-bottom:1px} @media (max-width:820px){.beat-final{grid-template-columns:1fr}} /* ---- market: paired rows, reality muted / Otek bold on the accent side ---- */ .market{background:var(--ink);color:#fff} .cmp{margin-top:clamp(46px,6vw,72px);border-top:1px solid var(--line-dark)} .cmp li{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,4vw,56px); padding-block:26px;border-bottom:1px solid var(--line-dark);align-items:start; transition:background .25s ease} .cmp li:hover{background:rgba(255,255,255,.025)} .cmp-real{color:var(--d2);font-size:16px;position:relative;padding-inline-start:24px} .cmp-real::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:11px;height:1px;background:var(--d2)} .cmp-otek{font-weight:700;font-size:17px;position:relative;padding-inline-start:30px} /* A checkmark is a glyph, not a layout edge — it must NOT mirror in RTL, so these are deliberately PHYSICAL borders. With inset-inline-start the tick came out as a backwards chevron. */ .cmp-otek::before{ content:"";position:absolute;inset-inline-start:2px;top:8px;width:14px;height:8px; border-left:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(-45deg)} @media (max-width:760px){ .cmp li{grid-template-columns:1fr;gap:10px;padding-block:22px} } /* ---- cards ---- */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:clamp(46px,6vw,72px)} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px; transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease} .card:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 12px 34px -20px rgba(7,7,11,.35)} .ico{width:30px;height:30px;stroke:var(--green);stroke-width:1.4;fill:none; stroke-linecap:round;stroke-linejoin:round;margin-bottom:22px} .card h3{font-size:19px;font-weight:900} .card p{margin-top:12px;color:var(--t1);font-size:15px;line-height:1.65} @media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.cards{grid-template-columns:1fr}} /* ---- grow: sticky heading beside a list ---- */ .grow{background:var(--paper-2)} .grow-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:start} .grow-head{position:sticky;top:110px} .grow-list>div{display:grid;grid-template-columns:170px 1fr;gap:24px;padding-block:24px; border-bottom:1px solid var(--line)} .grow-list>div:first-child{border-top:1px solid var(--line)} .grow-list dt{font-weight:900;font-size:18px} .grow-list dd{margin:0;color:var(--t1)} @media (max-width:900px){ .grow-inner{grid-template-columns:1fr;gap:34px} .grow-head{position:static} .grow-list>div{grid-template-columns:1fr;gap:6px} } /* ---- own app ---- */ .ownapp{background:var(--ink);color:#fff} .ownapp-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,90px);align-items:center} .ownapp-img{margin:0;border-radius:var(--r);overflow:hidden;max-width:420px;justify-self:center} .ownapp-img img{width:100%;aspect-ratio:4/5;object-fit:cover} .ticks{margin-top:34px;display:flex;flex-direction:column;gap:13px} .ticks li{position:relative;padding-inline-start:30px;color:var(--d1);font-weight:700} .ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:9px;width:14px;height:8px; border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)} @media (max-width:820px){.ownapp-inner{grid-template-columns:1fr}.ownapp-img{max-width:300px;justify-self:start}} /* ---- pricing ---- */ .pricing{background:var(--paper-2)} .price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:clamp(34px,6vw,72px);max-width:760px} .price-card .sec-h{font-size:clamp(30px,4.4vw,52px)} /* ---- client ---- */ .client{background:var(--paper)} .client-card{margin-top:clamp(40px,5vw,64px);background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:clamp(28px,4vw,52px)} .cc-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding-bottom:26px;border-bottom:1px solid var(--line)} .cc-logo{width:58px;height:auto;flex:none} .cc-head h3{font-size:clamp(22px,2.8vw,30px);font-weight:900} .cc-kind{color:var(--t2);font-size:15px;margin-top:4px} .cc-visit{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px; font-weight:700;font-size:15px;text-decoration:none;color:var(--green-dark); border:1px solid var(--line);border-radius:var(--r);padding:11px 18px;direction:ltr; transition:border-color .2s ease,background .2s ease} .cc-visit:hover{border-color:var(--green);background:rgba(94,159,60,.07)} .cc-visit svg{width:15px;height:15px} .cc-desc{margin-top:26px;color:var(--t1);max-width:60ch;font-size:17px} /* Facts as tags rather than a stat grid: four oversized numbers competed with the section heading and pushed the card tall for very little extra meaning. */ .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .tags li{display:inline-flex;align-items:baseline;gap:6px; border:1px solid var(--line);border-radius:100px;padding:7px 15px; font-size:14.5px;color:var(--t1);background:var(--paper);white-space:nowrap} .tags b{font-weight:900;font-size:15.5px;color:var(--green-dark);letter-spacing:-.01em} .cc-apps{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)} .cc-apps-label{font-size:14px;color:var(--t2);margin-bottom:14px} .storebtns{display:flex;flex-wrap:wrap;gap:12px} /* Drawn rather than using the official badge artwork — those ship as fixed-size raster assets that never match a page's own type, and both stores permit an equivalent text treatment. */ .storebtn{display:inline-flex;align-items:center;gap:11px;text-decoration:none; border:1px solid var(--ink);border-radius:var(--r);padding:9px 18px 9px 16px; background:var(--ink);color:#fff;transition:opacity .2s ease,transform .2s ease} .storebtn:hover{opacity:.86;transform:translateY(-1px)} .storebtn svg{width:21px;height:21px;flex:none} .storebtn span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:15px;direction:ltr;text-align:left} .storebtn small{font-weight:400;font-size:10.5px;opacity:.72;letter-spacing:.02em} .cc-note{margin-top:24px;font-size:13.5px;color:var(--t2)} @media (max-width:820px){ .cc-visit{margin-inline-start:0;width:100%;justify-content:center} .storebtns{flex-direction:column} .storebtn{justify-content:center} } /* ---- faq ---- */ .faq-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:start} .faq-head{position:sticky;top:110px} .faq-list{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{padding:24px 38px 24px 0;font-weight:700;cursor:pointer;list-style:none;position:relative;font-size:17px;line-height:1.5} .faq summary::-webkit-details-marker{display:none} /* Chevron must point DOWN in both directions — physical borders, like the checkmarks. With border-inline-end it mirrored into a left-pointing arrow under dir="rtl". */ .faq summary::after{content:"";position:absolute;inset-inline-end:4px;top:30px;width:10px;height:10px; border-right:2px solid var(--green);border-bottom:2px solid var(--green); transform:rotate(45deg);transition:transform .25s ease} .faq details[open] summary::after{transform:rotate(-135deg);top:34px} .faq details p{padding-bottom:26px;color:var(--t1);max-width:64ch} @media (max-width:900px){.faq-inner{grid-template-columns:1fr;gap:32px}.faq-head{position:static}} /* ---- close ---- */ .close{background:var(--ink);color:#fff} .close-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center} /* No form — three direct routes instead. Each row is one big tap target, which is the right call for a phone-first audience anyway. */ .contacts{display:flex;flex-direction:column;gap:14px} .contacts a{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px; padding:22px 24px;border:1px solid #2b2b34;border-radius:var(--r);text-decoration:none; background:rgba(255,255,255,.02); transition:border-color .25s ease,background .25s ease,transform .25s ease; } .contacts a:hover{border-color:var(--green);background:rgba(94,159,60,.09);transform:translateY(-2px)} .contacts svg{width:22px;height:22px;color:var(--green-lift);flex:none} .c-label{font-weight:700;font-size:16px;color:#fff} .c-value{font-size:15px;color:var(--d2);letter-spacing:.01em;white-space:nowrap} .contacts a:hover .c-value{color:var(--d1)} @media (max-width:820px){.close-inner{grid-template-columns:1fr;align-items:start}} @media (max-width:520px){ .contacts a{grid-template-columns:auto 1fr;gap:14px;padding:18px} .c-value{grid-column:2;font-size:14px} } /* ---- footer ---- */ .site-foot{border-top:1px solid var(--line);padding-block:36px;font-size:14px;color:var(--t2);background:var(--paper)} .foot-inner{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center} .foot-inner p{margin-inline-end:auto} .site-foot nav{display:flex;gap:22px} .site-foot a{color:var(--t1);text-decoration:none} .site-foot a:hover{color:var(--ink)} /* ---- reveal (only when JS runs, so a no-JS page is never blank) ---- */ @media (prefers-reduced-motion:no-preference){ .js .beat,.js .card,.js .cmp li,.js .beat-final,.js .grow-list>div{ opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.2,1)} .js .beat.on,.js .card.on,.js .cmp li.on,.js .beat-final.on,.js .grow-list>div.on{opacity:1;transform:none} }