/* v7 polish layer – loaded LAST on every page (functions.php → pkt_page_css). Calm, premium academy look: the type scale lives in main.css tokens (--fs-h1/2/3, --fs-body), rhythm in --sec/--s*; this file only settles page sheets that load after main.css, and fixes phone layouts. Class names only – no JS hooks are touched. */ /* ---------- 1. type: nothing may exceed the scale; display titles balance their lines ---------- */ .phead h1,.dark-hero h1,.lf h1,.hk h1{text-wrap:balance} .h2s,.b2 h2.h2s{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.018em;margin:var(--s8) 0 var(--s3)} .b2 h2.h2s:first-child{margin-top:0} :is(.tile b,.hmis b,.mcard b,.how__t b,.sim__card b,.td__cont b,.pextra__i b,.path__head b,.ccard__t,.pk-rel__card b,.org-feats b,.inst-steps b,.gterm a){text-wrap:balance} :is(.tile__p,.hmis small,.aud__c p,.mcard .mute,.pk-rel__card small,.org-feats small,.inst-steps small,.ccard p){text-wrap:pretty} .mute,.lead,.tag{letter-spacing:0} /* a calmer weight system: 400/500 text, 600 UI, 700–750 titles */ :is(.hero__trust,.hero__micro,.lf__bul,.pnote,.steps4 span,.trk-tabs a,.chip,.status-pill){font-weight:500} .ftr__slogan{font-size:clamp(22px,2.6vw,32px);font-weight:750;letter-spacing:-.022em} .ftr h4{font-weight:700;font-size:15px} /* measure: running text never wider than ~65 characters */ :is(.phead,.dark-hero) .lead,.sec__head .lead,.lvl__head p,.inq__copy p,.demo .lead,.cta-band p,.fcta p{max-width:60ch} .prose p,.prose li,.lblock p,.lblock li{max-width:var(--measure)} /* ---------- 2. rhythm ---------- */ .phead,.dark-hero,.phead--dark{padding-top:clamp(20px,3vw,36px)!important;padding-bottom:clamp(40px,5vw,72px)!important} .phead+.wrap,.dark-hero+.wrap{padding-top:clamp(32px,4vw,48px)} .inq{padding:var(--sec) 0} .pk-rel{padding:var(--s4) 0 var(--sec-t)} .lvl{margin:0 0 var(--s8)} .faq{margin-bottom:var(--s4)} /* cards: one radius scale (12 controls · 16 cards · 20–24 media) and one padding rule */ .card,.lblock,.course-mod,.tier,.org-feats li,.inst-steps li,.pk-rel__card,.glink,.related a,.toc,.facts,.hk__card,.inq__form{border-radius:16px} .lblock{padding:clamp(20px,3vw,36px)} .mcard{border-radius:18px} /* depth: layered, quiet */ :root{--sh:0 1px 2px rgba(11,12,11,.04),0 2px 6px -2px rgba(11,12,11,.06);--sh2:0 1px 2px rgba(11,12,11,.05),0 16px 36px -16px rgba(11,12,11,.2)} .btn--acc:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -12px rgba(25,163,90,.55)} .btn--glow{animation:none!important} .btn:focus-visible,.card--link:focus-visible,.tile:focus-visible,.hmis:focus-visible,.mcard:focus-visible,.pk-rel__card:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px} /* consistent icon sizes */ .btn .ic,.link-arrow .ic{width:18px;height:18px} .ticks li{line-height:1.5} /* ---------- 3. hover only where a pointer can hover ---------- */ @media (hover:none){ .card--link:hover,.glink:hover,.mcard:hover,.pextra__i:hover,.td__tile:hover,.sim__card:hover,.pk-rel__card:hover,.hcard:hover,.related a:hover{transform:none!important;box-shadow:var(--sh)} .tile:hover .tile__m .pkm,.hmis:hover .hmis__m .pkm,.aud__c:hover .aud__m .pkm,.mcard.is-shot:hover::before{transform:none} .tilt::before{display:none} } /* ---------- 4. components fixed for clarity ---------- */ /* scenario stage: text must stay light on the dark glass card (was inheriting dark ink in light theme) */ .scn__stage,.scn__card{color:#f3f4f1} .scn__card .lead,.scn__card p{color:rgba(243,244,241,.86)} /* breadcrumbs: one baseline */ .crumbs{margin:18px 0 12px;font-size:14px} .crumbs span::before{margin-right:6px} /* course lesson rows */ .lrow b{font-weight:600;line-height:1.35}.lrow span small{display:block;margin-top:2px;line-height:1.45} .lrow .chip{height:22px!important;padding:0 8px;font-size:12px} /* hangar cards */ .hcard{display:flex;flex-direction:column} .hcard__f .tag{font-size:12.5px} /* level heads (programa, situacijos) */ .lvl__head .kicker{font-size:14px} .lvl__head>.tag{font:600 12.5px/1.2 var(--sans);padding:6px 10px;border-radius:999px;background:var(--alt);color:var(--ink2);text-decoration:none;white-space:nowrap} .lvl__head>.tag.tag--ok{background:var(--ok-soft);color:var(--ok)} /* programme course cards: titles are links, not underlined spam */ .ccard__t a{text-decoration:none}.ccard__t a:hover{color:var(--acc-ink)} .ccard__t{font-size:17px;font-weight:700;line-height:1.3} /* tables always scroll inside their own box */ .scroll-x,.prose table,.cmp-wrap{max-width:100%} .table{min-width:100%} /* tiny labels → readable */ .inst-dash__k small{font-size:12.5px} .tag--xs{font-size:12px} .smap__legend{font-size:13.5px} /* empty states */ .empty{padding:32px 24px;border-radius:16px;font-size:15.5px;line-height:1.5;background:var(--alt);border:1px dashed var(--line2)} /* ---------- 5. phones (≤640): one column, full-width primary actions, no cramped type ---------- */ @media (max-width:640px){ .wrap{padding-left:var(--pad);padding-right:var(--pad)} .lead{font-size:17px} .phead h1,.dark-hero h1{margin-top:8px} /* primary actions span the screen; groups stack */ :is(.hero__cta,.fcta__a,.lfb__cta,.sheet__cta,.cta-band,.demo,.inq__form,.pcard,.tier,.hk__cta,.sec__more) .btn, :is(.phead,.dark-hero) .btn--acc,:is(.phead,.dark-hero) .btn--lg,main .btn--lg:not(.sim-mount .btn--lg){width:100%} :is(.phead,.dark-hero) .btn{min-height:48px} .sec__more{flex-direction:column;align-items:stretch} .ftr__cta{width:100%}.ftr__cta .btn{width:100%} .card{padding:20px} .lblock{padding:20px;border-radius:16px} .lblock .answer{margin-left:-4px;margin-right:-4px} .pk-rel__card{padding:16px 18px} .tier,.pcard{padding:22px 20px} .faq summary{font-size:16.5px} .faq-sec .faq summary{padding:14px 16px;font-size:16px} .faq-sec .faq p{padding:0 16px 16px;font-size:15.5px} /* footer: calm two-column list with breathing room */ .ftr{font-size:15px} .ftr__top{padding:36px 0;margin-bottom:32px} .ftr__g{gap:28px 20px} .ftr ul{gap:12px}.ftr ul a{line-height:1.35;display:inline-block} .ftr__b{margin-top:32px} /* level heads: number + tag on one row, text full width below */ .lvl__head h2{font-size:22px} /* hangar 2-col cards */ .hgrid .hcard__f{flex-direction:row} .hgrid .hcard__go{margin-left:auto} /* scenario intro card */ .scn__card h1{font-size:24px} /* dashboards demo */ .inst-dash{padding:16px}.inst-dash__k{gap:8px} /* hook */ .hk h1{font-size:clamp(30px,8.4vw,36px)} .hk__go{width:100%} } @media (max-width:380px){ :root{--pad:18px} .hero__h{font-size:34px} .hero__trust{gap:6px 18px} } /* ---------- 6. app chrome: nothing hides behind the tab bar or the sticky header ---------- */ @media (max-width:1119px){ html{scroll-padding-bottom:calc(var(--tb) + 24px)} .inq__form .btn,.hk__cta .btn{scroll-margin-bottom:calc(var(--tb) + 24px)} } :target{scroll-margin-top:calc(var(--hh) + 20px)} /* ---------- 7. forms ---------- */ /* grid columns may never be wider than the phone (a long