/* hkglobal.css — the rules that apply on EVERY page. * * GENERATED by extraction from the 18 stylesheets the site loads, in their * load order, so the cascade is preserved exactly. Do not hand-edit: re-derive * it, or the copy and the source disagree. * * WHAT "GLOBAL" MEANS HERE, MEASURED NOT ASSUMED * The DOM of 32 routes covering every page type was read, and the hooks * present on ALL of them intersected: * * 153 classes · 2 ids · 28 element types * * A rule is kept when EVERY hook its selector names is in that set, so a * rule cannot arrive here on the strength of one universal class beside a * page-specific one. :root, html, body and * are kept unconditionally. * * CONTENTS * 475 rules · 576 selectors * 61 inside @media · 32 @font-face * 52 custom properties referenced · 14 CSS functions * * THIS FILE IS NOT WIRED IN. Nothing links it. It is the extraction, for * review — swapping it for the 18 needs a pixel diff, and the screenshot * harness on this site is not yet reproducible (same code, two runs, 6 of 24 * renders differed). * * GROUPING APPLIED, AND WHAT WAS DELIBERATELY NOT * * APPLIED — all provably order-preserving: * selector grouping consecutive rules sharing a declaration block are * merged into one selector list. CONSECUTIVE only: * two rules of equal specificity are decided by * order, so merging non-adjacent ones would silently * reorder the cascade. * media grouping consecutive @media blocks with the same condition * are merged. 20 blocks remain, one per condition run. * de-duplication 5 rules identical in media, selector and body; the * last occurrence is kept, because last wins. * * NOT APPLIED, each for a specific reason: * :where() specificity 0. Rewriting extracted vendor rules * into :where() lowers their specificity and changes * which rule wins. That is the utility-precedence * defect in a new costume — 56 table cells lost their * padding the last time specificity moved silently. * @layer changes precedence against every other stylesheet * and against page-local page.css. Safe only if this * file REPLACES the 18, layered as a whole system — * not while it is one sheet among them. * :is() factoring equivalent only when every argument contributes the * same specificity. True for most of these but not * all, and the check costs more than the bytes save. * reordering into TOKENS / RESET / BASE / LAYOUT / COMPONENTS / * an architecture UTILITIES is the right structure for CSS being * AUTHORED. This file is EXTRACTED, and its order is * the load order of 18 stylesheets. Reordering it * into sections would rebuild the cascade from * scratch. The architecture belongs to whatever * replaces these files, not to a faithful extract. * * Verified after: 603 selector-level declarations, none lost, none added. */ /* ── from /assets/css/bundle.css ───────────────────────────── */ :root { --woocommerce:#720eec; --wc-green:#7ad03a; --wc-red:#a00; --wc-orange:#ffba00; --wc-blue:#2ea2cc; --wc-primary:#720eec; --wc-primary-text:#fcfbfe; --wc-secondary:#e9e6ed; --wc-secondary-text:#515151; --wc-highlight:#958e09; --wc-highligh-text:white; --wc-content-bg:#fff; --wc-subtext:#767676; --wc-form-border-color:rgba(32, 7, 7, 0.8); --wc-form-border-radius:4px; --wc-form-border-width:1px } :root { --woocommerce:#720eec; --wc-green:#7ad03a; --wc-red:#a00; --wc-orange:#ffba00; --wc-blue:#2ea2cc; --wc-primary:#720eec; --wc-primary-text:#fcfbfe; --wc-secondary:#e9e6ed; --wc-secondary-text:#515151; --wc-highlight:#958e09; --wc-highligh-text:white; --wc-content-bg:#fff; --wc-subtext:#767676; --wc-form-border-color:rgba(32, 7, 7, 0.8); --wc-form-border-radius:4px; --wc-form-border-width:1px } :root { --woocommerce:#720eec; --wc-green:#7ad03a; --wc-red:#a00; --wc-orange:#ffba00; --wc-blue:#2ea2cc; --wc-primary:#720eec; --wc-primary-text:#fcfbfe; --wc-secondary:#e9e6ed; --wc-secondary-text:#515151; --wc-highlight:#958e09; --wc-highligh-text:white; --wc-content-bg:#fff; --wc-subtext:#767676; --wc-form-border-color:rgba(32, 7, 7, 0.8); --wc-form-border-radius:4px; --wc-form-border-width:1px } @font-face {font-family:star;src:url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff2) format("woff2"),url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff) format("woff"),url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf) format("truetype");font-weight:400;font-style:normal} @font-face {font-family:WooCommerce;src:url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff2) format("woff2"),url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff) format("woff"),url(/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf) format("truetype");font-weight:400;font-style:normal} @font-face {font-display:block;font-family:vcpb-plugin-icons;font-style:normal;font-weight:400;src:url(/wp-content/plugins/js-composer/assets/fonts/vc_icons/fonts/vcpb-plugin-icons.eot?30guqj);src:url(/wp-content/plugins/js-composer/assets/fonts/vc_icons/fonts/vcpb-plugin-icons.eot?30guqj#iefix) format("embedded-opentype"),url(/wp-content/plugins/js-composer/assets/fonts/vc_icons/fonts/vcpb-plugin-icons.ttf?30guqj) format("truetype"),url(/wp-content/plugins/js-composer/assets/fonts/vc_icons/fonts/vcpb-plugin-icons.woff?30guqj) format("woff"),url(/wp-content/plugins/js-composer/assets/fonts/vc_icons/fonts/vcpb-plugin-icons.svg?30guqj#vcpb-plugin-icons) format("svg")} @font-face {font-family:vc_grid_v1;font-style:normal;font-weight:400;src:url(/wp-content/plugins/js-composer/assets/fonts/vc_grid/vc_grid_v1.eot?-9hbgac);src:url(/wp-content/plugins/js-composer/assets/fonts/vc_grid/vc_grid_v1.eot?#iefix-9hbgac) format("embedded-opentype"),url(/wp-content/plugins/js-composer/assets/fonts/vc_grid/vc_grid_v1.woff?-9hbgac) format("woff"),url(/wp-content/plugins/js-composer/assets/fonts/vc_grid/vc_grid_v1.ttf?-9hbgac) format("truetype"),url(/wp-content/plugins/js-composer/assets/fonts/vc_grid/vc_grid_v1.svg?-9hbgac#vc_grid_v1) format("svg")} @font-face {font-family:'FontAwesome';font-display:swap;src:url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('/wp-content/themes/jnews/assets/fonts/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal} .fa { display:inline-block; font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .fa-search:before { content:"\f002" } .fa-twitter:before { content:"\f099" } .fa-facebook:before { content:"\f09a" } .fa-bars:before { content:"\f0c9" } .fa-angle-up:before { content:"\f106" } .fa-youtube-play:before { content:"\f16a" } .fa-instagram:before { content:"\f16d" } @font-face {font-family:jegicon;src:url(/wp-content/themes/jnews/assets/fonts/jegicon/fonts/jegicon.eot);src:url(/wp-content/themes/jnews/assets/fonts/jegicon/fonts/jegicon.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/jnews/assets/fonts/jegicon/fonts/jegicon.woff) format("woff"),url(/wp-content/themes/jnews/assets/fonts/jegicon/fonts/jegicon.ttf) format("truetype"),url(/wp-content/themes/jnews/assets/fonts/jegicon/fonts/jegicon.svg#jegicon) format("svg");font-weight:400;font-style:normal;font-display:swap} .jegicon-cross:before { content:"\64" } button::-moz-focus-inner { padding:0; border:0 } a, address, body, dd, div, dl, dt, em, figcaption, figure, footer, form, h1, h2, html, i, iframe, img, li, nav, ol, p, section, span, ul { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline } figcaption, figure, footer, nav, section { display:block } body { line-height:1 } ol, ul { list-style:none } body { color:#53585c; background:#fff; font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif; font-size:14px; line-height:1.6em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-anchor:none } body, html { height:100%; margin:0 } a { color:#f70d28; text-decoration:none } a:focus, a:hover { color:#212121; outline:0 } img { vertical-align:middle } img { max-width:100%; -ms-interpolation-mode:bicubic; height:auto } figcaption { margin:3px 0 1em; font-size:11px; color:#a0a0a0 } button, input { font:inherit } .container:after { content:""; display:table; clear:both } h1, h2 { color:#212121; text-rendering:optimizeLegibility } h1 { font-size:2.25em; margin:.67em 0 .5em; line-height:1.25; letter-spacing:-.02em } h2 { font-size:1.953em; margin:.83em 0 .5em; line-height:1.35 } em, i { font-style:italic } p { margin:0 0 1.75em; text-rendering:optimizeLegibility } @media (max-width:767px) { .container { width:98%; width:calc(100% - 10px) } } @media (max-width:479px) { .container { width:100% } } @media (min-width:768px) { .container { max-width:750px } } @media (min-width:992px) { .container { max-width:970px } } @media (min-width:1200px) { .container { max-width:1170px } } .container { padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto } * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .jeg_viewport { position:relative } .jeg_container { width:auto; margin:0 auto; padding:0 } input:not([type=submit]) { background:#fff; border:1px solid #e0e0e0; border-radius:0; padding:7px 14px; height:40px; outline:0; font-size:14px; font-weight:300; margin:0; width:100%; max-width:100%; -webkit-transition:all .2s ease; transition:.25s ease; box-shadow:none } input[type=checkbox], input[type=radio] { width:auto; height:auto; line-height:inherit; display:inline } input:not([type=submit]):focus { border-color:#ccc; box-shadow:inset 0 2px 2px rgba(0,0,0,.05) } .btn, input[type=submit] { border:none; border-radius:0; background:#f70d28; color:#fff; padding:0 20px; line-height:40px; height:40px; display:inline-block; cursor:pointer; text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:1px; outline:0; -webkit-appearance:none; -webkit-transition:.3s ease; transition:.3s ease } .btn:focus, input[type=submit]:focus { color:#fff; outline:thin dotted #666 } .btn:hover, input[type=submit]:hover { color:#fff; box-shadow:inset 0 0 0 100px rgba(0,0,0,.15) } .jeg_header { position:relative } .jeg_header .container { height:100% } .jeg_nav_row { position:relative; -js-display:flex; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:row nowrap; -ms-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; height:100% } .jeg_nav_grow { -webkit-box-flex:1; -ms-flex:1; flex:1 } .jeg_nav_normal { -webkit-box-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto } .item_wrap { width:100%; display:inline-block; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-flow:row wrap; -ms-flex-flow:row wrap; flex-flow:row wrap; -webkit-align-items:center; -ms-flex-align:center; align-items:center } .jeg_nav_left { margin-right:auto } .jeg_nav_right { margin-left:auto } .jeg_nav_center { margin:0 auto } .jeg_nav_alignleft { justify-content:flex-start } .jeg_nav_alignright { justify-content:flex-end } .jeg_nav_aligncenter { justify-content:center } .jeg_topbar { font-size:12px; color:#757575; position:relative; z-index:11; background:#f5f5f5; border-bottom:1px solid #e0e0e0; -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto } .jeg_topbar .jeg_nav_item { padding:0 12px; border-right:1px solid #e0e0e0 } .jeg_topbar.dark { background:#212121; color:#f5f5f5; border-bottom-width:0 } .jeg_topbar.dark .jeg_search_toggle, .jeg_topbar.dark .jeg_search_wrapper.jeg_search_no_expand .jeg_search_button, .jeg_topbar.dark .jeg_search_wrapper.jeg_search_no_expand .jeg_search_input { color:#f5f5f5 } .jeg_topbar.dark .jeg_top_menu>li>a:hover { color:#fff } .jeg_topbar.dark, .jeg_topbar.dark .jeg_nav_item { border-color:rgba(255,255,255,.15) } .jeg_topbar .jeg_nav_item:last-child { border-right-width:0 } .jeg_topbar .jeg_nav_row { height:34px; line-height:34px } .jeg_midbar { background-color:#fff; height:140px; position:relative; z-index:10; border-bottom:0 solid #e8e8e8 } .jeg_navbar+.jeg_midbar { z-index:9 } .jeg_midbar .jeg_nav_item { padding:0 14px } .jeg_midbar.dark { background-color:#212121; color:#f5f5f5 } .jeg_midbar.dark .jeg_nav_icon .jeg_mobile_toggle, .jeg_midbar.dark .jeg_search_toggle { color:#f5f5f5 } .jeg_navbar { background:#fff; position:relative; border-top:0 solid #e8e8e8; border-bottom:1px solid #e8e8e8; line-height:50px; z-index:9; -webkit-box-sizing:content-box; box-sizing:content-box } .jeg_navbar:first-child, .jeg_topbar+.jeg_navbar { z-index:10 } .jeg_navbar .jeg_nav_item { padding:0 14px } .jeg_nav_item:first-child { padding-left:0 } .jeg_nav_item:last-child { padding-right:0 } .jeg_navbar_dark .jeg_menu>li>a, .jeg_navbar_dark .jeg_search_toggle { color:#fafafa } .jeg_navbar_dark .jeg_menu>li>ul { border-top:0 } .jeg_logo { position:relative } .site-title { margin:0; padding:0; line-height:1; font-size:60px; letter-spacing:-.02em } .jeg_mobile_logo .site-title { font-size:34px } .site-title a { display:block; color:#212121 } .jeg_midbar.dark .site-title a, .jeg_navbar.jeg_navbar_dark .site-title a { color:#f5f5f5 } .jeg_logo img { height:auto; width:auto; image-rendering:optimizeQuality; display:block } .jeg_midbar .jeg_logo_img { max-height:130px } .jeg_bottombar .jeg_logo_img { max-height:50px } .jeg_topbar .jeg_logo_img { max-height:36px } .jeg_nav_left .jeg_logo { margin-right:7px } .jeg_nav_left .jeg_logo:last-child { margin-right:28px } .jeg_midbar .jeg_social_icon_block.nobg a .fa { font-size:18px } .jeg_topbar .jeg_social_icon_block.nobg a .fa { font-size:14px } .jeg_midbar .jeg_social_icon_block.nobg a .jeg-icon svg { height:18px } .jeg_topbar .jeg_social_icon_block.nobg a .jeg-icon svg { height:14px } .btn.round { border-radius:40px } .btn .fa { margin-right:2px; font-size:14px } .jeg_topbar .btn { height:26px; line-height:26px; font-size:11px; letter-spacing:.5px; font-weight:500; padding:0 10px } .jeg_topbar .btn.round { padding:0 14px } .jeg_navbar .btn { height:36px; line-height:36px; font-size:12px; font-weight:500; padding:0 16px } .jeg_nav_icon { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center } .jeg_nav_icon .jeg_mobile_toggle { color:#212121; display:block; position:relative; width:18px; height:14px } .jeg_topbar .jeg_nav_icon { height:34px } .jeg_topbar .jeg_mobile_toggle { color:inherit } .jeg_navbar_dark .jeg_mobile_toggle { color:#fafafa } .jeg_nav_icon .jeg_mobile_toggle span { position:absolute; width:100%; height:2px; left:0; border-top:2px solid; transition:.15s ease } .jeg_nav_icon .jeg_mobile_toggle span:nth-child(1) { top:0 } .jeg_nav_icon .jeg_mobile_toggle:hover span:nth-child(1) { -webkit-transform:translateY(2px); transform:translateY(2px) } .jeg_nav_icon .jeg_mobile_toggle span:nth-child(2) { top:50%; margin-top:-1px } .jeg_nav_icon .jeg_mobile_toggle span:nth-child(3) { bottom:0 } .jeg_nav_icon .jeg_mobile_toggle:hover span:nth-child(3) { -webkit-transform:translateY(-2px); transform:translateY(-2px) } .jeg_topbar .jeg_nav_icon .jeg_mobile_toggle { width:15px; height:12px } .jeg_topbar .socials_widget a { margin:0 5px 0 0 } .jeg_topbar .socials_widget a .fa { width:26px; line-height:26px } .jeg_topbar .socials_widget a .jeg-icon { width:26px; line-height:26px } .jeg_topbar .socials_widget.nobg a { margin-right:14px } .jeg_topbar .socials_widget.nobg a:last-child { margin-right:0 } .jeg_topbar .socials_widget.nobg a .fa { font-size:14px } .jeg_search_wrapper { position:relative } .jeg_search_wrapper .jeg_search_form { display:block; position:relative; line-height:normal; min-width:60% } .jeg_search_toggle { color:#212121; display:block; text-align:center } .jeg_topbar .jeg_search_toggle { font-size:14px; min-width:13px; color:inherit } .jeg_midbar .jeg_search_toggle { font-size:18px; min-width:16px; line-height:50px } .jeg_navbar .jeg_search_toggle { font-size:16px; min-width:15px } .jeg_search_wrapper .jeg_search_input { width:100%; vertical-align:middle; height:40px; padding:.5em 30px .5em 14px } .jeg_search_wrapper .jeg_search_button { color:#212121; background:0 0; border:0; font-size:14px; outline:0; cursor:pointer; position:absolute; height:auto; min-height:unset; line-height:normal; top:0; bottom:0; right:0; padding:0 10px; transition:none } .jeg_search_wrapper .jeg_search_button:hover { color:inherit; box-shadow:none; background:0 0 } .jeg_navbar .jeg_search_wrapper .jeg_search_input { height:36px } .jeg_topbar .jeg_search_wrapper .jeg_search_form { display:block } .jeg_topbar .jeg_search_no_expand .jeg_search_input { line-height:34px; height:auto; padding:0 20px 0 0!important; border:0; background:0 0; box-shadow:none } .jeg_topbar .jeg_search_no_expand .jeg_search_button { color:#757575; width:auto; padding-right:0!important } .jeg_search_no_expand .jeg_search_toggle { display:none } .jeg_search_no_expand.round .jeg_search_input { border-radius:33px; padding:.5em 15px } .jeg_search_no_expand.round .jeg_search_button { padding-right:12px } .jeg_midbar .jeg_search_no_expand .jeg_search_input { font-size:15px; padding:.5em 35px .5em 15px } .jeg_midbar .jeg_search_wrapper .jeg_search_button { padding-right:15px } .jeg_midbar .jeg_search_no_expand.round .jeg_search_input { padding:.5em 35px .5em 20px } .jeg_midbar .jeg_search_no_expand.round .jeg_search_button { padding-right:15px } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input { background:rgba(255,255,255,.1); border-color:transparent } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_button, .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input { color:#fafafa } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input::-webkit-input-placeholder { color:rgba(255,255,255,.75) } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input:-moz-placeholder { color:rgba(255,255,255,.75) } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input::-moz-placeholder { color:rgba(255,255,255,.75) } .jeg_navbar_dark .jeg_search_no_expand .jeg_search_input:-ms-input-placeholder { color:rgba(255,255,255,.75) } .jeg_search_popup_expand .jeg_search_form { display:block; opacity:0; visibility:hidden; position:absolute; top:100%; right:-4px; text-align:center; width:325px; background:#fff; border:1px solid #eee; padding:0; height:0; z-index:12; -webkit-box-shadow:0 1px 4px rgba(0,0,0,.09); box-shadow:0 1px 4px rgba(0,0,0,.09); -webkit-transition:height .1s; -o-transition:height .1s; transition:height .1s } .jeg_search_popup_expand .jeg_search_form:before { color:#fff; border-color:transparent transparent #fff; border-style:solid; border-width:0 8px 8px; content:""; right:16px; position:absolute; top:-8px; z-index:98 } .jeg_search_popup_expand .jeg_search_form:after { color:#fff; border-color:transparent transparent #eaeaea; border-style:solid; border-width:0 9px 9px; content:""; right:15px; position:absolute; top:-9px; z-index:97 } .jeg_topbar .jeg_search_popup_expand .jeg_search_form, .jeg_topbar .jeg_search_popup_expand .jeg_search_result { right:0 } .jeg_topbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form, .jeg_topbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_result { left:0 } .jeg_topbar .jeg_search_popup_expand .jeg_search_form:before { right:11px; top:-6px; border-width:0 6px 6px } .jeg_topbar .jeg_search_popup_expand .jeg_search_form:after { right:10px; top:-8px; border-width:0 7px 7px } .jeg_topbar .jeg_search_popup_expand:last-child .jeg_search_form, .jeg_topbar .jeg_search_popup_expand:last-child .jeg_search_result { right:-12px } .jeg_topbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_form, .jeg_topbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_result { left:-12px } .jeg_topbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:before { right:auto; left:11px } .jeg_topbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:after { right:auto; left:10px } .jeg_search_popup_expand .jeg_search_input { width:100%; -webkit-box-shadow:inset 0 0 15px 0 rgba(0,0,0,.08); box-shadow:inset 0 0 15px 0 rgba(0,0,0,.08) } .jeg_search_popup_expand .jeg_search_button { color:#888; position:absolute; top:0; bottom:0; right:20px } .jeg_midbar .jeg_search_popup_expand:last-child .jeg_search_form, .jeg_midbar .jeg_search_popup_expand:last-child .jeg_search_result { right:-18px } .jeg_midbar .jeg_search_popup_expand .jeg_search_form:before { right:17px } .jeg_midbar .jeg_search_popup_expand .jeg_search_form:after { right:16px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form, .jeg_midbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_result { right:auto; left:-4px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:before { right:auto; left:16px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:after { right:auto; left:15px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_form, .jeg_midbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_result { left:-18px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_form:before { right:auto; left:17px } .jeg_midbar .jeg_nav_left .jeg_search_popup_expand:first-child .jeg_search_form:after { right:auto; left:16px } .jeg_navbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form, .jeg_navbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_result { right:auto; left:-4px } .jeg_navbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:before { right:auto; left:16px } .jeg_navbar .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:after { right:auto; left:15px } .jeg_nav_left .jeg_search_popup_expand .jeg_search_form, .jeg_nav_left .jeg_search_popup_expand .jeg_search_result { right:auto; left:0 } .jeg_nav_center .jeg_search_popup_expand .jeg_search_form, .jeg_nav_center .jeg_search_popup_expand .jeg_search_form:after, .jeg_nav_center .jeg_search_popup_expand .jeg_search_form:before { right:50%!important; -webkit-transform:translateX(50%); transform:translateX(50%) } .jeg_search_hide { display:none } .jeg_search_result { opacity:0; visibility:hidden; position:absolute; top:100%; right:-4px; width:325px; background:#fff; border:1px solid #eee; padding:0; height:0; line-height:1; z-index:9; -webkit-box-shadow:0 1px 4px rgba(0,0,0,.09); box-shadow:0 1px 4px rgba(0,0,0,.09); -webkit-transition:height .1s; -moz-transition:height .1s; transition:height .1s } .jeg_header .jeg_search_result { z-index:10 } .jeg_nav_left .jeg_search_result { right:auto; left:0 } .jeg_search_no_expand .jeg_search_result { margin-top:0; opacity:1; visibility:visible; height:auto; min-width:100%; right:0 } .jeg_search_result.with_result .search-all-button { overflow:hidden } .jeg_search_result .search-link { display:none; text-align:center; font-size:12px; padding:12px 15px; border-top:1px solid #eee } .jeg_search_result .search-link .fa { margin-right:5px } .jeg_search_result.with_result .search-all-button { display:block; cursor:pointer } .jeg_menu>li { position:relative; float:left; text-align:left; padding-right:1.2em } .jeg_menu>li:last-child { padding-right:0 } .jeg_menu>li>a { -webkit-transition:.2s ease; transition:.2s ease } .jeg_midbar.dark .jeg_menu>li>a, .jeg_navbar.jeg_navbar_dark .jeg_menu>li>a { color:#f5f5f5 } .jeg_topbar .jeg_menu>li>a { color:inherit } .jeg_menu li li { position:relative; line-height:20px } .jeg_menu li>ul { background:#fff; position:absolute; display:none; top:100%; left:0; min-width:15em; text-align:left; z-index:11; white-space:nowrap; -webkit-box-shadow:0 0 2px rgba(0,0,0,.1),0 20px 40px rgba(0,0,0,.18); box-shadow:0 0 2px rgba(0,0,0,.1),0 20px 40px rgba(0,0,0,.18) } .jeg_menu li>ul li a { padding:8px 16px; font-size:13px; color:#7b7b7b; border-bottom:1px solid #eee; -webkit-transition:.1s; transition:.1s } .jeg_menu li>ul>li:last-child>a { border-bottom:0 } .jeg_menu li>ul li:hover>a { color:#212121; background:#f5f5f5 } .jeg_menu li:hover>ul { display:block } .jeg_menu a { display:block; position:relative } .jeg_menu ul ul { top:0; left:100% } .jeg_navbar_mobile_wrapper, .jeg_navbar_mobile_wrapper .sticky_blankspace { display:none } .jeg_header_sticky.sticky_blankspace { visibility:hidden; height:0 } .jeg_stickybar { position:fixed; width:100%; top:0; left:auto; width:100%; z-index:9997; margin:0 auto; opacity:0; visibility:hidden; -webkit-transition:opacity .2s ease; transition:opacity .2s ease } .jeg_stickybar[data-mode=fixed] { -webkit-transform:translate3d(0,-130%,0); transform:translate3d(0,-130%,0); -webkit-transition:transform .15s ease-in; transition:transform .15s ease-in } .jeg_stickybar .jeg_logo img { width:auto; max-height:36px } .jeg_topbar .jeg_menu>li { padding-right:12px } .jeg_topbar .jeg_menu>li:last-child { padding-right:0 } .jeg_topbar.dark .jeg_top_menu>li>ul { border-top:0 } .jeg_top_menu li>ul li a { font-size:12px; padding:6px 12px } .jeg_top_menu li>ul { width:auto } .jeg_topbar, .jeg_topbar.dark { border-top-style:solid } .jeg_navbar_mobile { display:none; position:relative; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.1); top:0; transform:translate3d(0,0,0); transition:.2s ease } .jeg_navbar_mobile .container { width:100%; height:100% } .jeg_mobile_bottombar { border-style:solid } .jeg_mobile_bottombar { height:60px; line-height:60px } .jeg_mobile_bottombar .jeg_nav_item { padding:0 10px } .jeg_navbar_mobile .jeg_nav_left .jeg_nav_item:first-child { padding-left:0 } .jeg_navbar_mobile .jeg_nav_right .jeg_nav_item:last-child { padding-right:0 } .jeg_mobile_bottombar.dark { background:#000; color:#212121 } .jeg_mobile_bottombar.dark a { color:#212121 } .jeg_mobile_bottombar.dark .jeg_search_toggle, .jeg_mobile_bottombar.dark .toggle_btn { color:#fff } .jeg_navbar_mobile .jeg_search_toggle, .jeg_navbar_mobile .toggle_btn { color:#212121; font-size:22px; display:block } .jeg_mobile_logo a { display:block } .jeg_mobile_logo img { width:auto; max-height:40px; display:block } .jeg_aside_copyright { font-size:11px; color:#757575; letter-spacing:.5px } .jeg_aside_copyright a { color:inherit; border-bottom:1px solid #aaa } .jeg_aside_copyright p { margin-bottom:1.2em } .jeg_aside_copyright p:last-child { margin-bottom:0 } .jeg_navbar_mobile .jeg_search_wrapper { position:static } .jeg_navbar_mobile .jeg_search_popup_expand { float:none } .jeg_navbar_mobile .jeg_search_popup_expand .jeg_search_form:after, .jeg_navbar_mobile .jeg_search_popup_expand .jeg_search_form:before { display:none!important } .jeg_navbar_mobile .jeg_search_popup_expand .jeg_search_form { width:auto; border-left:0; border-right:0; left:-15px!important; right:-15px!important; padding:20px; -webkit-transform:none; transform:none } .jeg_navbar_mobile .jeg_search_popup_expand .jeg_search_result { margin-top:84px; width:auto; left:-15px!important; right:-15px!important; border:0 } .jeg_navbar_mobile .jeg_search_form .jeg_search_button { font-size:18px } .jeg_navbar_mobile .jeg_search_wrapper .jeg_search_input { font-size:18px; padding:.5em 40px .5em 15px; height:42px } .jeg_navbar_mobile .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:before { right:auto; left:16px } .jeg_navbar_mobile .jeg_nav_left .jeg_search_popup_expand .jeg_search_form:after { right:auto; left:15px } .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input { box-shadow:inset 0 2px 2px rgba(0,0,0,.05) } .jeg_mobile_wrapper .jeg_search_result { width:100%; border-left:0; border-right:0; right:0 } .jeg_bg_overlay { content:''; display:block; position:fixed; width:100%; top:0; bottom:0; background:#000; background:-webkit-linear-gradient(to bottom,#000,#434343); background:linear-gradient(to bottom,#000,#434343); -webkit-transition:.2s ease-out .1s; transition:.2s ease-out .1s; opacity:0; z-index:9998; visibility:hidden } .jeg_mobile_wrapper { opacity:0; display:block; position:fixed; top:0; left:0; background:#fff; width:320px; height:100%; overflow-x:hidden; overflow-y:auto; z-index:9999; -webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0); -webkit-transition:.3s cubic-bezier(.25,.46,.45,.94); -o-transition:.3s cubic-bezier(.25,.46,.45,.94); transition:.3s cubic-bezier(.25,.46,.45,.94) } .jeg_menu_close { position:fixed; top:15px; right:15px; padding:0; font-size:16px; color:#fff; opacity:0; visibility:hidden; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); -webkit-transition:.2s ease; transition:.2s ease; z-index:9999 } @media only screen and (min-width:1023px) { .jeg_menu_close { font-size:20px; padding:20px } } .jeg_menu_close:hover { color:#fff } .jeg_mobile_wrapper .nav_wrap { min-height:100%; display:flex; flex-direction:column; position:relative } .jeg_mobile_wrapper .nav_wrap:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; min-height:100%; z-index:-1 } .jeg_mobile_wrapper .item_main { flex:1 } .jeg_mobile_wrapper .item_bottom { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .jeg_aside_item { display:block; padding:20px; border-bottom:1px solid #eee } .item_bottom .jeg_aside_item { padding:10px 20px; border-bottom:0 } .item_bottom .jeg_aside_item:first-child { padding-top:20px } .item_bottom .jeg_aside_item:last-child { padding-bottom:20px } .jeg_aside_item:last-child { border-bottom:0 } .jeg_aside_item:after { content:""; display:table; clear:both } .jeg_navbar_mobile_wrapper { position:relative; z-index:9 } .jeg_mobile_wrapper .socials_widget { width:100%; display:-webkit-box; display:-ms-flexbox; display:flex } .jeg_mobile_wrapper .socials_widget a { margin-bottom:0!important; display:block } .dark .jeg_bg_overlay { background:#fff } .dark .jeg_mobile_wrapper { background-color:#212121; color:#f5f5f5 } .dark .jeg_mobile_wrapper .jeg_search_result { background:rgba(0,0,0,.9); color:#f5f5f5; border:0 } .dark .jeg_menu_close { color:#212121 } .dark .jeg_aside_copyright, .dark .jeg_mobile_wrapper .jeg_search_result .search-link, .dark .jeg_mobile_wrapper .jeg_search_result a { color:#f5f5f5 } .dark .jeg_aside_copyright a { border-color:rgba(255,255,255,.8) } .dark .jeg_aside_item, .dark .jeg_search_result.with_result .search-all-button { border-color:rgba(255,255,255,.15) } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input { background:rgba(255,255,255,.1); border:0 } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_button, .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input { color:#fafafa } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input::-webkit-input-placeholder { color:rgba(255,255,255,.75) } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input:-moz-placeholder { color:rgba(255,255,255,.75) } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input::-moz-placeholder { color:rgba(255,255,255,.75) } .dark .jeg_mobile_wrapper .jeg_search_no_expand .jeg_search_input:-ms-input-placeholder { color:rgba(255,255,255,.75) } .jeg_ad { text-align:center } .jnews_header_bottom_ads, .jnews_header_top_ads { position:relative; background:#f5f5f5; z-index:8 } .jnews_mobile_sticky_ads>* { position:fixed; bottom:0; width:100%; background:#dbdbdb; text-align:center; line-height:1; z-index:1 } .jnews_mobile_sticky_ads>.ads-wrapper>* { padding:10px } .jeg_ad[class*=jnews_content_inline_parallax] .ads-wrapper { line-height:0; margin:60px auto 50px; position:relative; text-align:center; width:100% } .socials_widget a { display:inline-block; margin:0 10px 10px 0; text-decoration:none!important } .socials_widget a .fa { font-size:1em; display:inline-block; width:38px; line-height:36px; white-space:nowrap; color:#fff; text-align:center; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out } .socials_widget .fa { font-size:16px } .socials_widget a:hover .fa { opacity:.75 } .socials_widget a img:hover { opacity:.75 } .socials_widget span { display:inline-block; margin-left:.5em } .socials_widget.nobg a { margin:0 20px 15px 0 } .socials_widget a:last-child { margin-right:0 } .socials_widget.nobg a .fa { font-size:18px; width:auto; height:auto; line-height:inherit; background:0 0!important } .socials_widget a .jeg-icon { display:inline-block; width:38px; line-height:36px; white-space:nowrap; text-align:center; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out } .socials_widget .jeg-icon svg { height:16px; position:relative; top:2px; fill:#fff } .socials_widget span { display:inline-block; margin-left:.5em } .socials_widget.nobg a { margin:0 20px 15px 0 } .socials_widget a:last-child { margin-right:0 } .socials_widget.nobg a .jeg-icon { width:auto; height:auto; line-height:inherit; background:0 0!important } .socials_widget.nobg a .jeg-icon svg { height:18px } .jeg_social_icon_block.socials_widget a .jeg-icon svg { height:16px } .socials_widget .jeg-icon { margin:0 } .socials_widget .jeg_facebook .fa { background:#45629f } .socials_widget .jeg_twitter .fa { background:#000 } .socials_widget .jeg_instagram .fa { background:#e4405f } .socials_widget .jeg_youtube .fa { background:#c61d23 } .fa-twitter:before { content:none!important } .socials_widget.nobg .jeg_facebook .fa { color:#45629f } .socials_widget.nobg .jeg_instagram .fa { color:#e4405f } .socials_widget.nobg .jeg_youtube .fa { color:#c61d23 } .socials_widget.nobg .jeg_twitter .jeg-icon svg { fill:#000 } .jscroll-to-top { position:fixed; right:30px; bottom:30px; -webkit-backface-visibility:hidden; visibility:hidden; opacity:0; -webkit-transition:.2s ease; transition:.2s ease; -webkit-transform:translate3d(0,30px,0); -ms-transform:translate3d(0,30px,0); transform:translate3d(0,30px,0); z-index:11 } .jscroll-to-top>a { color:#a0a0a0; font-size:30px; display:block; width:46px; border-radius:5px; height:46px; line-height:44px; background:rgba(180,180,180,.15); border:1px solid rgba(0,0,0,.11); -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.1); text-align:center; opacity:.8; -webkit-transition:opacity .2s ease; transition:opacity .2s ease } .jscroll-to-top>a:hover { opacity:1 } @media only screen and (max-width:1024px) { .jscroll-to-top { bottom:50px } } .jeg_social_icon_block.nobg a .fa { font-size:16px } .jeg_social_icon_block a { margin-bottom:0!important } /* ── from /wp-content/themes/jnews/assets/css/single.css ───────────────────────────── */ /* ── from /wp-content/themes/jnews/assets/css/responsive.css ───────────────────────────── */ @media only screen and (max-width:1024px) { .jeg_header { display:none } #jeg_off_canvas, .jeg_navbar_mobile, .jeg_navbar_mobile_wrapper { display:block } .jeg_navbar_mobile_wrapper { display:block } } @media only screen and (max-width:320px) { .jeg_mobile_wrapper { width:275px } .jeg_mobile_wrapper .socials_widget.nobg a .fa { font-size:16px } .jeg_mobile_wrapper .socials_widget.nobg a .jeg-icon svg { height:16px } .jeg_navbar_mobile .jeg_search_wrapper .jeg_search_input { font-size:16px; padding:.5em 35px .5em 12px; height:38px } .jeg_navbar_mobile .jeg_search_popup_expand .jeg_search_result { margin-top:80px } .jeg_navbar_mobile .jeg_search_form .jeg_search_button { font-size:16px } } /* ── from /wp-content/themes/jnews/assets/css/pb-temp.css ───────────────────────────── */ /* ── from /wp-content/themes/jnews/assets/css/woocommerce.css ───────────────────────────── */ /* ── from /wp-content/plugins/woocommerce/assets/client/blocks/wc-blocks.css ───────────────────────────── */ /* ── from /wp-content/plugins/js-composer/assets/css/js_composer_tta.min.css ───────────────────────────── */ /* ── from /wp-content/plugins/js-composer/assets/lib/vendor/node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css ───────────────────────────── */ .fa.fa-facebook, .fa.fa-twitter { font-family:"Font Awesome 6 Brands"; font-weight:400 } .fa.fa-facebook { --fa:"\f39e" } .fa.fa-youtube-play { --fa:"\f167" } .fa.fa-instagram, .fa.fa-youtube-play { font-family:"Font Awesome 6 Brands"; font-weight:400 } /* ── from /wp-content/plugins/js-composer/assets/lib/vendor/node_modules/@fortawesome/fontawesome-free/css/all.min.css ───────────────────────────── */ .fa { font-family:var(--fa-style-family,"Font Awesome 6 Free"); font-weight:var(--fa-style,900) } .fa { -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; display:var(--fa-display,inline-block); font-style:normal; font-variant:normal; line-height:1; text-rendering:auto } .fa:before { content:var(--fa) } .fa-bars { --fa:"\f0c9" } .fa-search { --fa:"\f002" } .fa-angle-up { --fa:"\f106" } :root { --fa-style-family-brands:"Font Awesome 6 Brands"; --fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands" } @font-face {font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")} .fa-instagram { --fa:"\f16d" } .fa-facebook { --fa:"\f09a" } .fa-twitter { --fa:"\f099" } :root { --fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free" } @font-face {font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")} :root { --fa-style-family-classic:"Font Awesome 6 Free"; --fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free" } @font-face {font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")} @font-face {font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")} @font-face {font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")} @font-face {font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")} @font-face {font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")} @font-face {font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")} @font-face {font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc} @font-face {font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} /* ── from /wp-content/themes/jnews/assets/js/tiny-slider/tiny-slider.css ───────────────────────────── */ /* ── from /wp-content/themes/jnews/assets/css/slider/jnewsglobalslider.css ───────────────────────────── */ /* ── from /wp-content/themes/jnews/assets/css/jnewshero.css ───────────────────────────── */ /* ── from /wp-content/uploads/jnews/scheme.css ───────────────────────────── */ .jeg_menu li>ul li a { font-weight:400; text-transform:uppercase; letter-spacing:.5px } .dark .jeg_bg_overlay { background:#000 } input:not([type=submit]) { border-color:#c8c8c8 } /* ── from /assets/css/fonts.css ───────────────────────────── */ @font-face {font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/lato-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/lato-400-italic-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: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/lato-700-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/lato-700-italic-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: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lato-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lato-400-normal-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: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/lato-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/lato-700-normal-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: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/ptserif-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/ptserif-400-italic-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: 'PT Serif'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/ptserif-700-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'PT Serif'; font-style: italic; font-weight: 700; font-display: swap; src: url('/assets/fonts/ptserif-700-italic-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: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ptserif-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ptserif-400-normal-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: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/ptserif-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/ptserif-700-normal-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;} /* ── from /assets/css/tokens.css ───────────────────────────── */ :root { --ink: #101018; --paper: #FFFFFF; --grey-9: #2B2B2B; --grey-5: #70707E; --grey-2: #E4E4E8; --grey-1: #F4F4F6; --black: #000000; --black-strip: #262626; --rule-dark: #2A2A2A; --raised-dark: #0B0B0B; --hover-dark: #171717; --fg-dark: #DDDDDD; --dim-dark: #B9B9C2; --accent: #8A583C; --accent-deep: #6E4429; --accent-light: #D8A87F; --sans: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; --display: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", Georgia, serif; --t-micro: 0.6875rem; --t-sm: 0.8125rem; --prose: "PT Serif", Georgia, "Times New Roman", serif; --prose-size: 1.5rem; --prose-lh: 1.458; --prose-fg: #212121; --prose-ls: -0.01em; --measure: 32em; --container: 1170px; --radius: 0; --bg: var(--paper); --fg: var(--grey-9); --fg-heading: var(--ink); --fg-muted: var(--grey-5); --hairline: var(--grey-2) } /* ── from /assets/css/site.css ───────────────────────────── */ .hkt { border-top: 1px solid var(--hairline); background: var(--bg); font-family: var(--sans) } .hkt ul.hkt__stats, .hkt ul.hkt__logos, .hkt dl.hkt__creds { list-style: none; padding-left: 0; margin-left: 0 } .hkt li.hkt__stat, .hkt li.hkt__logoitem { list-style: none; margin: 0; padding: 0 } .hkt dt.hkt__term, .hkt dd.hkt__names { margin: 0; padding: 0 } .hkt__inner { max-width: var(--container); margin-inline: auto; padding: 3.5rem 1.5rem 3rem } .hkt__eyebrow { margin: 0 0 2.25rem; font-family: var(--sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); text-align: center } .hkt__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem 1rem; list-style: none; margin: 0; padding: 0 0 2.75rem } .hkt__stat { text-align: center } .hkt__num { display: block; font-family: var(--display); font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.015em; color: var(--fg-heading); font-variant-numeric: lining-nums tabular-nums } .hkt__cap { display: block; margin-top: 0.6rem; font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted) } .hkt__credrow { padding: 2.75rem 0; border-top: 1px solid var(--hairline) } .hkt__credrow--photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center } .hkt__photo { margin: 0 } .hkt__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover } .hkt__photo figcaption { margin-top: 0.625rem; font-family: var(--sans); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted) } @media (max-width: 767px) { .hkt__credrow--photo { grid-template-columns: 1fr } .hkt__photo { order: 2 } } .hkt__creds { display: grid; grid-template-columns: max-content 1fr; gap: 0.85rem 2rem; margin: 0; font-size: 0.9375rem } .hkt__term { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.75 } .hkt__names { margin: 0; color: var(--fg); line-height: 1.75 } .hkt__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 4rem; list-style: none; margin: 0; padding: 2.75rem 0 0; border-top: 1px solid var(--hairline) } .hkt__logoitem { display: flex } .hkt__logo { display: block; height: 56px; width: auto; filter: grayscale(1); opacity: 0.7; transition: opacity .15s ease, filter .15s ease } .hkt__logolink:hover .hkt__logo, .hkt__logolink:focus-visible .hkt__logo { filter: grayscale(0); opacity: 1 } .hkt__dl { padding: 2.75rem 0 0; border-top: 1px solid var(--hairline); text-align: center } .hkt a.hkt__dlbtn { display: inline-flex; align-items: center; gap: 0.875rem; padding: 1rem 1.75rem; border: 1px solid var(--fg-heading); border-radius: 0; color: var(--fg-heading); text-align: left; text-decoration: none; transition: background-color .15s ease, color .15s ease } .hkt a.hkt__dlbtn:hover, .hkt a.hkt__dlbtn:focus-visible { background: var(--fg-heading); color: var(--bg); text-decoration: none } .hkt__dlicon { flex: none } .hkt__dllabel { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.077em; text-transform: uppercase } .hkt__dlmeta { display: block; margin-top: 0.3rem; font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-variant-numeric: lining-nums tabular-nums } .hkt a.hkt__dlbtn:hover .hkt__dlmeta, .hkt a.hkt__dlbtn:focus-visible .hkt__dlmeta { color: inherit } .hkt p.hkt__dlnote { margin: 1rem 0 0; font-size: var(--t-micro); letter-spacing: 0.04em; color: var(--fg-muted) } @media (max-width: 900px) { .hkt__inner { padding: 2.5rem 1.5rem 2.25rem } .hkt__stats { grid-template-columns: repeat(2, 1fr) } .hkt__num { font-size: 1.75rem } .hkt__creds { grid-template-columns: 1fr; gap: 0.25rem } .hkt__term { margin-top: 1rem } .hkt__logos { gap: 1.5rem 2.5rem } .hkt__dl { padding-top: 2rem } } @media (max-width: 560px) { .hkt a.hkt__dlbtn { display: flex; width: 100%; padding: 0.9rem 1.1rem } .hkt__dllabel { letter-spacing: 0.05em } } @media (max-width: 380px) { .hkt__stats { grid-template-columns: 1fr } } .jscroll-to-top_link, .jscroll-to-top { border-radius: 0 !important } .jeg_container { overflow-x: clip } .hkt__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1 } /* ── from /assets/css/nav-v2.css ───────────────────────────── */ .hk-nav-v2 { --hkn-ink: var(--ink); --hkn-fg: var(--grey-9); --hkn-muted: var(--grey-5); --hkn-hairline: var(--grey-2); --hkn-paper: var(--paper); --hkn-accent: var(--accent); --hkn-accent-deep: var(--accent-deep); --hkn-sans: var(--sans); --hkn-display: var(--display); --hkn-bg: var(--hkn-paper); --hkn-link: var(--hkn-fg); --hkn-bar-h: 60px } .hk-nav-v2.hk-nav-dark { --hkn-bg: var(--black); --hkn-link: var(--fg-dark); --hkn-muted: var(--dim-dark); --hkn-hairline: var(--rule-dark) } .hk-nav-dark .hkn__sub { background: var(--raised-dark); border-color: var(--rule-dark); box-shadow: 0 14px 30px rgba(0, 0, 0, .55) } .hk-nav-dark .hkn__sublink { color: var(--fg-dark) } .hk-nav-dark .hkn__sublink:hover, .hk-nav-dark .hkn__sublink:focus-visible { background: var(--hover-dark); color: var(--accent-light) } .hk-nav-v2 .jeg_bottombar.jeg_navbar { background: var(--hkn-bg) !important; border-top: 1px solid var(--hkn-hairline); border-bottom: 1px solid var(--hkn-hairline) } .hk-nav-v2 .jeg_midbar, .hk-nav-v2 .jeg_midbar .jeg_nav_row { height: auto !important; min-height: 0 !important } .hk-nav-v2 .jeg_midbar .jeg_nav_row { padding: 1.5rem 0 !important } @media (max-width: 1024px) { .hk-nav-v2 .jeg_midbar .jeg_nav_row { padding: 1rem 0 !important } } .hk-nav-v2 .jeg_header_wrapper { position: sticky; top: calc(-1 * var(--hk-stick, 194px)); z-index: 90 } .hk-nav-v2 .jeg_bottombar .jeg_nav_row { display: block } .hk-nav-v2 .jeg_bottombar .jeg_nav_col:not(.jeg_nav_center) { display: none } .hk-nav-v2 .jeg_bottombar .jeg_nav_col.jeg_nav_center, .hk-nav-v2 .jeg_bottombar .item_wrap, .hk-nav-v2 .jeg_bottombar .jeg_nav_item, .hk-nav-v2 .jeg_bottombar .jeg_mainmenu_wrap { display: block; width: 100%; position: static; text-align: left } .hk-nav-v2 .jeg_header_sticky, .hk-nav-v2 .jeg_navbar_mobile_wrapper, .hk-nav-v2 #jeg_off_canvas { display: none !important } .hk-nav-v2 .jeg_header { display: block !important } @media (max-width: 1024px) { .hk-nav-v2 .jeg_topbar { display: none !important } .hk-nav-v2 .jeg_midbar { padding-block: .5rem } } .hkn { font-family: var(--hkn-sans) } .hkn__panel { display: flex; align-items: center; gap: 1.5rem; min-height: var(--hkn-bar-h) } .hkn__list { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1 1 auto } .hkn__item { position: relative } .hkn__link { display: block; padding: 0 1rem; line-height: var(--hkn-bar-h); font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: var(--hkn-link); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease } .hkn__link:hover, .hkn__item:focus-within > .hkn__link { color: var(--hkn-accent) } .hk-nav-dark .hkn__link:hover { color: var(--accent-light) } .hkn__sub { list-style: none; margin: 0; padding: 0.5rem 0; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--hkn-paper); border: 1px solid var(--hkn-hairline); border-radius: 0; box-shadow: 0 12px 28px rgba(16, 16, 24, .08); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 20 } .hkn__item--sub:hover > .hkn__sub, .hkn__item--sub:focus-within > .hkn__sub { opacity: 1; visibility: visible; transform: none } .hkn__sublink { display: block; padding: 0.55rem 1.25rem; line-height: 1.45; font-size: 0.8125rem; letter-spacing: .04em; color: var(--hkn-fg); text-decoration: none; border-left: 2px solid transparent; transition: color .14s ease, border-color .14s ease } .hkn__sublink:hover, .hkn__sublink:focus-visible { color: var(--hkn-accent); border-left-color: var(--hkn-accent) } .hkn__item--sub > .hkn__link::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .55em; vertical-align: .12em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .65 } .hkn__cta { flex: 0 0 auto; align-self: center; line-height: 1.2; padding: 0.72rem 1.35rem; background: var(--hkn-accent); color: var(--paper); font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transition: background .15s ease } .hkn__cta:hover, .hkn__cta:focus-visible { background: var(--hkn-accent-deep); color: #FFF } .hkn__toggle { display: flex; align-items: center; gap: .6rem; height: var(--hkn-bar-h); padding: 0; background: none; border: 0; cursor: pointer; color: var(--hkn-link); font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase } .hkn__toggle[hidden] { display: none } .hkn__burger { display: block; width: 20px } .hkn__burger i { display: block; height: 1px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg) } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(2) { opacity: 0 } .hkn__toggle[aria-expanded="true"] .hkn__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg) } .hkn__disclose { display: none } @media (max-width: 1024px) { .hk-nav-v2 .jeg_bottombar.jeg_navbar { height: auto } .hk-nav-v2 .jeg_bottombar > .container { max-width: none; width: 100%; margin-inline: 0; padding-inline: 0 } .hkn__panel { display: block; background: var(--hkn-bg); border-top: 1px solid var(--hkn-hairline); padding-block: 0 1rem; max-height: calc(100dvh - var(--hkn-bar-h)); overflow-y: auto; overscroll-behavior: contain } .hkn__panel[hidden] { display: none } .hkn__toggle { padding-inline: 1.25rem } .hkn__list { display: block } .hkn__item { border-bottom: 1px solid var(--hkn-hairline) } .hkn__item:last-child { border-bottom: 0 } .hkn__link { line-height: 1.4; padding: 1rem 3.5rem 1rem 1.25rem; border-bottom: 0 } .hkn__item--sub > .hkn__link::after { display: none } .hkn__disclose { display: block; position: absolute; top: 0; right: .5rem; width: 3rem; height: 3.4rem; background: none; border: 0; cursor: pointer; color: var(--hkn-muted) } .hkn__disclose[hidden] { display: none } .hkn__disclose::after { content: ""; position: absolute; top: 50%; left: 50%; width: .45em; height: .45em; margin: -.35em 0 0 -.25em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s ease } .hkn__disclose[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -.1em } .hkn__sub { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem; background: transparent } .hkn__sub[hidden] { display: none } .hkn__sublink { padding: .7rem 1.25rem .7rem 2.25rem; font-size: .9375rem } .hk-nav-dark .hkn__sublink { color: var(--hkn-link) } .hk-nav-dark .hkn__sublink:hover { background: var(--hover-dark) } .hkn__cta { display: block; margin: 1rem 1.25rem 0; text-align: center } } @media (prefers-reduced-motion: reduce) { .hkn__sub, .hkn__link, .hkn__cta, .hkn__burger i, .hkn__disclose::after { transition: none } } /* ── from /assets/css/footer-v2.css ───────────────────────────── */ .hkf { --hkf-bg: var(--black); --hkf-strip: var(--black-strip); --hkf-rule: var(--rule-dark); --hkf-fg: var(--fg-dark); --hkf-dim: var(--dim-dark); --hkf-head: var(--paper); --hkf-accent: var(--accent-light); --hkf-btn: var(--accent); --hkf-btn-hi: var(--accent-deep); --hkf-sans: var(--sans); --hkf-display: var(--display); background: var(--hkf-bg); color: var(--hkf-fg); font-family: var(--hkf-sans); font-size: 0.9375rem; line-height: 1.7 } .hkf a { color: var(--hkf-fg); text-decoration: none } .hkf a:hover, .hkf a:focus-visible { color: var(--hkf-accent) } .hkf :focus-visible { outline: 2px solid var(--hkf-accent); outline-offset: 3px } .hkf__inner { max-width: var(--container); margin-inline: auto; padding: 4.5rem 1.5rem 3.5rem } .hkf__head { margin: 0 0 1.1rem; font-family: var(--hkf-sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hkf-head) } .hkf__masthead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem 4.5rem; padding-bottom: 3.25rem; border-bottom: 1px solid var(--hkf-rule); align-items: start } .hkf__brand, .hkf__contact { display: flex; flex-direction: column; align-items: flex-start } .hkf__logo { display: block; margin-bottom: 1.75rem } .hkf__logo img { width: 168px; height: auto } .hkf__about { margin: 0 0 2.25rem; max-width: 46ch; color: var(--hkf-dim); font-size: 0.875rem } .hkf__about em { font-family: var(--hkf-display); font-style: italic } .hkf__badges { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap } .hkf__badges img { width: auto } .hkf__badges li:first-child img { height: 42px } .hkf__badges li:last-child img { height: 66px } .hk-nap { font-style: normal; margin: 0 0 1.5rem; font-size: 0.875rem } .hk-nap span, .hk-nap a { display: block } .hk-nap__name { color: var(--hkf-head) } .hk-nap__city { color: var(--hkf-dim) } .hk-nap__tel { margin-top: .6rem } .hkf__nap p { margin: 0 0 1rem; color: var(--hkf-dim); font-size: 0.875rem } .hkf__wa { display: inline-block; margin-bottom: 2rem; padding: 0.8rem 1.5rem; background: var(--hkf-btn); color: var(--paper) !important; font-size: var(--t-sm); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius); transition: background .15s ease } .hkf__wa:hover, .hkf__wa:focus-visible { background: var(--hkf-btn-hi); color: var(--paper) !important } .hkf__map { width: 100%; line-height: 0 } .hkf__map iframe { display: block; width: 100%; height: 165px; border: 0; filter: grayscale(1); transition: filter .25s ease } .hkf__map:hover iframe { filter: none } .hkf__dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; padding-top: 3.25rem } .hkf__list { list-style: none; margin: 0; padding: 0 } .hkf__list li { margin: 0 0 .6rem } .hkf__list a { font-size: 0.875rem } .hkf__legal, .hkf__base { border-top: 1px solid var(--hkf-rule) } .hkf__legal p, .hkf__base p { max-width: var(--container); margin: 0 auto; padding: 1.25rem 1.5rem; color: var(--hkf-dim); font-size: 0.8125rem; line-height: 1.65 } .hkf__base { background: var(--hkf-strip) } .hkf__base p { padding-block: .9rem } .hkf__base .hkf__order { padding-top: 0 } @media (min-width: 900px) { .hkf__base { display: flex; justify-content: space-between; align-items: baseline } .hkf__base p { padding-inline: 0 } .hkf__base > p:first-child { padding-left: 1.5rem } .hkf__base .hkf__order { padding-right: 1.5rem; padding-top: .9rem } } @media (max-width: 860px) { .hkf__masthead { grid-template-columns: 1fr; gap: 2.75rem; padding-bottom: 2.75rem } .hkf__inner { padding-top: 3.25rem } .hkf__dir { padding-top: 2.75rem } } @media (max-width: 600px) { .hkf__badges { gap: 1.25rem } .hkf__dir { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem } } /* ═══════════════════════════════════════════════════════════════════════════ * THE CONTENT LAYER * * Everything above this line was EXTRACTED — the rules measured present on all * 832 routes. Everything below is AUTHORED, and it is the standard every * normalised page is written against. * * WHY IT IS AUTHORED AND NOT EXTRACTED * "Present on every page" is the right test for chrome and the wrong one for * content. The universal element set has p, ul, li, h1, h2, figure, img — it * does NOT have h3, h4, table, td, th, blockquote, code or hr, because no * single one of those appears on all 832 pages. A page stripped to the * extracted layer alone loses its tables and its h3s to browser defaults. * * So the criterion here is different: every element a content band is * ALLOWED to contain, whether or not it happens to be universal. * * WHERE THE VOCABULARY COMES FROM * /reparasi-buku/ — 1,539 clicks at position 1.3, the best page on the site * and already the target state: 151 KB of content, 9,059 words, ZERO inline * styles, and 146 of its 147 classes already .hk*. It has no page.css; its * components live in site.css under page-specific names. This section * generalises those names into a reusable set and nothing more. It invents * no new design; it renames a proven one. * * hkr-lede -> .hk-lede hkency__t/d/s -> .hk-terms__* * hkh-eyebrow -> .hk-eyebrow hke__fig/body -> .hk-entry__* * hkh-step__n/t/b -> .hk-steps__* hklib__card -> .hk-card * hkh-faq__q/a -> .hk-faq__* hkc-client__* -> .hk-people__* * hkg-3 / hkg-4 -> .hk-grid--3/--4 hky__* -> .hk-video__* * * The flagship keeps its own names and is not touched. These are for the * pages being normalised. * * RULES OF THE STANDARD * 1. Every value is a token from tokens.css. No literal colour, no literal * face, no magic number that is not a rhythm step. * 2. Base element styles are bare selectors, so semantic HTML needs no class * at all. A page of h2/p/ul/table is styled correctly with zero classes. * 3. Components are .hk- with BEM children. Two-or-more letters, the * convention since /press/ shipped .hkpr-*. * 4. Corner radius is 0 and buttons are uppercase 13px/1px — the measured * button spec, not a preference. * 5. Nothing here uses !important. If a rule needs it, the markup is wrong. * ═════════════════════════════════════════════════════════════════════════ */ /* ── base: semantic HTML needs no classes ─────────────────────────────────── */ /* The page column, centred — NOT the reading measure. --measure is 32em and is only correct at --prose-size (24px): applied to this box, which inherits the theme's 14px, it computes to 448px. The measure belongs on running text, where the typeset rule in site.css puts it, and a card grid must never inherit it. */ .hk-content { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; /* ONE column for every child of the content band — paragraphs, the intro lede, headings, lists AND tables — so every left and right edge in the article lines up. Operator ruling 2026-08-10: "I want all paragraph, intro, as wide as table." A takes the full band by default, so anything narrower reads as two column widths stacked; that was the unevenness. 100% is therefore the column, and --measure does NOT apply to running text here. This is a deliberate departure from the 45–75 character band in CLAUDE.md — at 1170px the line runs long — and it is the operator's call, made while looking at the page. Change --col alone to revisit it; every prose rule below reads this one value. */ --col: 100%; } /* A link wrapping a card image must be a block. `.hk-card__frame img` sets width:100% and aspect-ratio 4/5; inside an inline the percentage resolves against a shrink-wrapped box, so the ratio never applies and every card in a grid takes a different height. */ .hk-card__frame a { display: block; } /* Full-bleed inside the content column. `.hk-content article, .hk-content section` is (0,1,1) and sets margin:0, which BEAT `.hkh-hero` at (0,1,0) and cancelled the bleed recipe — the hero kept width:100vw while losing its negative margin, so it started at the column's left edge and ran 159px past the viewport. Measured: 159px of horizontal scroll at 1440, 24px at 390. This is the cascade lesson in CLAUDE.md exactly: moving a declaration changes what wins. Fixed by specificity (0,2,1), not !important — rule 5 of this file. The recipe itself is copied unchanged from site.css, already verified at 1440/1024/768/390; there must not be a second one. */ .hk-content > .hkh-hero, .hk-content > .hkh-band { width: 100vw; margin-left: calc(50% - 50vw); } /* Absorbs the scrollbar's worth of 100vw overhang. It lives on .jeg_container for captured pages; a normalised page has no .jeg_container, so the nearest full-width ancestor is .jeg_main. `clip`, never `hidden` — hidden creates a scroll container and kills position: sticky. */ .jeg_main { overflow-x: clip; } .hk-content > * + * { margin-top: 1.25rem; } .hk-content h2 { font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-heading); margin: 3rem 0 1rem; padding-top: 1rem; border-top: 2px solid var(--accent); } .hk-content h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1.3; color: var(--fg-heading); margin: 2rem 0 .5rem; } .hk-content h4 { font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); margin: 1.5rem 0 .5rem; } /* Running text carries THE HOMEPAGE'S type, by operator ruling 2026-08-10. Values copied from .hkh-split__text p in site.css — Lato, 17px, 1.7, --fg — so the article body and the homepage read as one design. NOT the blog's own --prose-size: 24px PT Serif was tried across all 731 rebuilt routes and rejected on sight as too heavy for running text. The measure stays var(--measure): 32em resolves against THIS font-size, so at 17px it is 544px ≈ 64 characters — the same 64 the blog reference sets, and inside the 45–75 readable band. It computed to 448px only because the box was inheriting the theme's 14px. */ .hk-content > p, .hk-content > ul > li, .hk-content > ol > li, .hk-content > dd, .hk-content > blockquote p, .hk-content > blockquote { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--fg); max-width: var(--col); } .hk-content p { margin: 0 0 1.25rem; } /* Figures and images take the column too, so an article has ONE left and right edge. The carries WordPress's intrinsic width attribute (600, 800, 1080…), which without this renders at that size and strands the picture inside a 1122px text column. COST, measured 2026-08-10: 455 of 631 glossary images are narrower than the column and NO larger file exists — not in uploads, not in recovered-assets, not in the capture. The 600px file IS the original, so those upscale ~1.9x and will look softer. That is the same wall as the 540x540 product photos in CLAUDE.md: a photography problem, not a code problem. Revert by deleting this block; nothing else depends on it. */ .hk-content figure { margin-inline: 0; } /* The featured image, full-bleed — glossary and testimonial. On both families the first is already the page's hero AND the source of og:image / twitter:image, so the picture a reader sees first is the same one a shared link shows. Verified: 96/96 and 61/61 have it inside
. Scoped by body class so /blog/ keeps its in-column figure, which was not part of the ask. The bleed recipe is copied unchanged from .hkh-hero in site.css — verified at 1440/1024/768/390; there must not be a second one. object-fit: cover on a fixed band CROPS instead of stretching, which matters because the source files are small: testimonial heroes run 477–1439px (median 831, none reach 1440) and 20 of 96 glossary heroes are under 900. Those upscale and will look soft — the pictures are Instagram-era and no larger file exists. Same wall as the 540x540 product photos: a photography problem, not a code one. */ body.single-post .hk-content > header > figure, body.single-glossary .hk-content > header > figure, body.single-jetpack-testimonial .hk-content > header > figure { width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 2rem; overflow: hidden; } body.single-post .hk-content > header > figure img, body.single-glossary .hk-content > header > figure img, body.single-jetpack-testimonial .hk-content > header > figure img { display: block; width: 100%; height: clamp(240px, 46vh, 560px); object-fit: cover; } /* In-prose pictures are CENTRED and never upscaled — blog and glossary. These are the images inside the article body, not the featured hero above. `width: 100%` would stretch them: 455 of 631 glossary body images are narrower than the column and no larger file exists, so filling it means upscaling ~1.9x and going soft. max-width keeps them at native size when they are small, fills the column when they are big, and the auto margins stop a narrow one from sitting stranded against the left edge. */ .hk-content figure, .hk-content > p:has(> img:only-child) { text-align: center; } /* display:block is what makes margin-inline:auto do anything — an is inline by default, so the auto margins were silently inert and the picture stayed against the left edge. Not scoped to direct children: body figures sit at varying depth. */ .hk-content figure img, .hk-content > p > img { display: block; max-width: 100%; height: auto; margin-inline: auto; } .hk-content figure > a { display: block; } .hk-content figcaption { text-align: center; } /* Headings share the prose column. They were unconstrained, so a 32px heading ran the full 1122px above a 544px paragraph — the article read as two different column widths stacked. DIRECT children only: `.hkh-close h2` and the hero titles live inside full-bleed bands and must stay wide. */ .hk-content > h2, .hk-content > h3, .hk-content > h4, .hk-content > h5, .hk-content > h6 { max-width: var(--col); } .hk-content ul, .hk-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; } .hk-content li { margin: 0 0 .4rem; } .hk-content li::marker { color: var(--accent); } .hk-content a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: .15em; } .hk-content a:hover { color: var(--accent); } .hk-content strong, .hk-content b { font-weight: 700; color: var(--fg-heading); } .hk-content em, .hk-content i { font-style: italic; } .hk-content hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.5rem 0; } .hk-content code, .hk-content kbd, .hk-content samp { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .875em; background: var(--wash, #F4F4F6); padding: .1em .35em; } .hk-content blockquote { margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--accent); font-family: var(--display); font-size: 1.125rem; line-height: 1.5; color: var(--fg-muted); } .hk-content img { max-width: 100%; height: auto; display: block; } .hk-content figure { margin: 2rem 0; } .hk-content figcaption { font-family: var(--sans); font-size: .8125rem; line-height: 1.5; color: var(--fg-muted); margin-top: .5rem; } .hk-content dfn { font-style: normal; font-weight: 700; color: var(--fg-heading); } /* Tables scroll rather than overflow. A wide table is the single most common cause of horizontal scroll on a phone, and 71% of clicks are phones. */ .hk-content table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0 0 1.25rem; display: block; overflow-x: auto; } .hk-content caption { caption-side: bottom; font-family: var(--sans); font-size: .8125rem; color: var(--fg-muted); text-align: left; padding-top: .5rem; } .hk-content th, .hk-content td { border: 1px solid var(--hairline); padding: .6rem .75rem; text-align: left; vertical-align: top; } .hk-content th { font-family: var(--sans); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-heading); background: var(--wash, #F4F4F6); } /* ── layout ───────────────────────────────────────────────────────────────── */ .hk-section { padding: 3rem 0; border-bottom: 1px solid var(--hairline); } .hk-section:last-child { border-bottom: 0; } .hk-wide { max-width: none; } .hk-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .hk-grid--2, .hk-grid--4 { grid-template-columns: repeat(2, 1fr); } .hk-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .hk-grid--3 { grid-template-columns: repeat(3, 1fr); } .hk-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ── type accents ─────────────────────────────────────────────────────────── */ .hk-eyebrow { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; } .hk-lede { font-family: var(--display); font-size: 1.25rem; line-height: 1.5; color: var(--fg-heading); margin: 0 0 1.5rem; max-width: var(--col, none); } /* The SAME class must not render two ways depending on its tag. Measured across the tree: 954 .hk-lede, of which 526 are
and 428 are

— because the source markup was

. `.hk-content > p` is (0,1,1) and beat the (0,1,0) rule above, so the 428 rendered as 17px Lato on a 544px column and the 526 as 20px Palatino at full width, on the same site. (0,2,0) beats (0,1,1), so tag no longer decides. */ .hk-content .hk-lede { font-family: var(--display); font-size: 1.25rem; line-height: 1.5; color: var(--fg-heading); max-width: var(--col); } .hk-note { border-left: 3px solid var(--accent); background: var(--wash, #F4F4F6); padding: 1rem 1.25rem; margin: 2rem 0; font-size: .9375rem; } .hk-note > *:first-child { margin-top: 0; } .hk-note > *:last-child { margin-bottom: 0; } /* ── steps ────────────────────────────────────────────────────────────────── */ .hk-steps { list-style: none; margin: 2rem 0; padding: 0; } .hk-steps__item { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1rem; padding: 1.25rem 0; border-top: 1px solid var(--hairline); } .hk-steps__n { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--accent); } .hk-steps__t { font-weight: 700; color: var(--fg-heading); margin: 0 0 .25rem; } .hk-steps__b { margin: 0; color: var(--fg); } /* ── faq ──────────────────────────────────────────────────────────────────── */ .hk-faq { margin: 2rem 0; } .hk-faq__row { padding: 1.25rem 0; border-top: 1px solid var(--hairline); } .hk-faq__row:last-child { border-bottom: 1px solid var(--hairline); } .hk-faq__q { font-family: var(--display); font-size: 1.0625rem; color: var(--fg-heading); margin: 0 0 .5rem; } .hk-faq__a { margin: 0; } /* ── definition list ──────────────────────────────────────────────────────── */ .hk-deflist { margin: 2rem 0; } .hk-deflist__row { display: grid; grid-template-columns: 1fr; gap: .25rem 1.5rem; padding: .875rem 0; border-top: 1px solid var(--hairline); } @media (min-width: 640px) { .hk-deflist__row { grid-template-columns: 14rem 1fr; } } .hk-deflist dt { font-weight: 700; color: var(--fg-heading); } .hk-deflist dd { margin: 0; } /* ── terms: the compact glossary list ─────────────────────────────────────── */ .hk-terms { margin: 2rem 0; } @media (min-width: 760px) { .hk-terms { column-count: 2; column-gap: 2.5rem; } } .hk-terms__e { break-inside: avoid; padding: .75rem 0; border-bottom: 1px solid var(--hairline); } .hk-terms__t { font-weight: 700; color: var(--fg-heading); } .hk-terms__en { font-style: italic; color: var(--fg-muted); } .hk-terms__d { display: block; font-size: .9375rem; } .hk-terms__s { display: block; font-size: .75rem; color: var(--fg-muted); margin-top: .2rem; } /* ── entry: plate beside text, the dictionary arrangement ─────────────────── */ .hk-entry { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--hairline); } @media (min-width: 760px) { .hk-entry { grid-template-columns: 15rem 1fr; gap: 2rem; } } .hk-entry__fig { margin: 0; } .hk-entry__fig img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .hk-entry__t { font-family: var(--display); font-size: 1.125rem; color: var(--fg-heading); margin: 0 0 .35rem; } .hk-entry__d { margin: 0 0 .5rem; } .hk-entry__ref { font-size: .8125rem; color: var(--fg-muted); } /* ── card ─────────────────────────────────────────────────────────────────── */ .hk-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); } .hk-card__frame { margin: 0; overflow: hidden; } .hk-card__frame img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } .hk-card__body { padding: 1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; } .hk-card__label { font-family: var(--sans); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .35rem; } .hk-card__title { font-family: var(--display); font-size: 1.0625rem; line-height: 1.3; color: var(--fg-heading); margin: 0 0 .35rem; } .hk-card__desc { font-size: .9375rem; color: var(--fg); margin: 0 0 .75rem; } .hk-card__meta { font-size: .8125rem; color: var(--fg-muted); margin: auto 0 0; } /* ── people ───────────────────────────────────────────────────────────────── */ .hk-people__item { text-align: center; } .hk-people__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; } .hk-people__name { font-family: var(--sans); font-size: .875rem; font-weight: 700; color: var(--fg-heading); margin: .6rem 0 0; } .hk-people__role { font-size: .8125rem; color: var(--fg-muted); margin: .1rem 0 0; } /* ── video facade — no third-party request until the click ────────────────── */ .hk-video { margin: 2rem 0; } .hk-video__link { display: block; position: relative; text-decoration: none; } .hk-video__frame { margin: 0; } .hk-video__frame img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } .hk-video--short .hk-video__frame img { aspect-ratio: 9 / 16; } .hk-video__play { position: absolute; inset: 0; display: grid; place-items: center; } .hk-video__play::before { content: ""; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(16,16,24,.72); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .hk-video__play::after { content: ""; position: absolute; width: 0; height: 0; border-left: 1.15rem solid #fff; border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; margin-left: .3rem; } .hk-video__t { font-family: var(--sans); font-size: .9375rem; color: var(--fg-heading); margin: .6rem 0 0; } /* ── button ───────────────────────────────────────────────────────────────── */ .hk-btn { display: inline-block; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.75rem; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: #fff; text-decoration: none; } .hk-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .hk-btn--ghost { background: transparent; color: var(--ink); } .hk-btn--ghost:hover { background: var(--ink); color: #fff; } /* A button in the content band is an , and `.hk-content a` above is (0,1,1) while `.hk-btn` and site.css's `.hkh-btn--solid` are both (0,1,0). Specificity decides regardless of load order, so the link rule won and repainted every button's label to --accent-deep with an underline. On .hkh-btn--solid, whose ground is --accent, that is brown text on brown: the WhatsApp CTA rendered by hk_wa_cta() was very nearly invisible on 24 routes. Every gate passed while it shipped — the markup is valid, nothing 404s, and theme-contrast reads tokens, not the colour a rule actually wins. It took a screenshot. Same lesson as the full-bleed clip in CLAUDE.md: when a change is about what something looks like, render it. Fixed with specificity at (0,2,1), not !important — rule 5 of this file. The ghost variants come after so they win their own colour back. */ .hk-content a.hk-btn, .hk-content a.hkh-btn { color: #fff; text-decoration: none; } .hk-content a.hk-btn--ghost { color: var(--ink); } .hk-content a.hk-btn--ghost:hover { color: #fff; } /* ── base, completed: every allowed tag, no class required ───────────────── * * Measured across all 832 content bands: 74 distinct elements in use. The * allow-list in for-claude/content-vocabulary.json permits 79. Everything the * list permits is styled HERE, so a page written in plain semantic HTML — no * class attribute anywhere — is already correct. * * That is the point of the whole exercise. A

is a

. If a page needs a * class to look right, either the markup is wrong or the standard has a gap, * and both are bugs. * * The forms below are not decoration: 574 of 832 pages carry a comment form * (input, label, textarea) and the content layer had NO rule for any of it. * ------------------------------------------------------------------------- */ /* sectioning — semantic containers carry rhythm, not decoration */ .hk-content main { display: block; } .hk-content article, .hk-content section { margin: 0 0 2rem; } .hk-content header { margin: 0 0 1.5rem; } .hk-content footer { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: .875rem; color: var(--fg-muted); } .hk-content aside { border-left: 3px solid var(--hairline); padding: .25rem 0 .25rem 1.25rem; margin: 2rem 0; color: var(--fg-muted); font-size: .9375rem; } .hk-content nav ul { list-style: none; padding: 0; } .hk-content nav li { display: inline-block; margin: 0 1rem .4rem 0; } /* inline text */ .hk-content small { font-size: .8125rem; color: var(--fg-muted); } .hk-content cite { font-style: normal; color: var(--fg-muted); } .hk-content abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; } .hk-content mark { background: #F4E7C3; color: var(--ink); padding: 0 .15em; } .hk-content sup, .hk-content sub { font-size: .7em; line-height: 0; } .hk-content s, .hk-content del { color: var(--fg-muted); } .hk-content ins { text-decoration: none; } .hk-content u { text-underline-offset: .15em; } .hk-content q { quotes: "\201C" "\201D" "\2018" "\2019"; } .hk-content time { color: var(--fg-muted); } .hk-content br { line-height: inherit; } /* nested lists keep the rhythm rather than doubling it */ .hk-content li > ul, .hk-content li > ol { margin: .4rem 0 0; } .hk-content dl { margin: 0 0 1.25rem; } .hk-content dt { font-weight: 700; color: var(--fg-heading); margin-top: .75rem; } .hk-content dd { margin: 0 0 .25rem; } /* table foot */ .hk-content tfoot td, .hk-content tfoot th { font-size: .8125rem; color: var(--fg-muted); background: transparent; } /* media */ .hk-content picture { display: block; } .hk-content video, .hk-content audio { max-width: 100%; display: block; } .hk-content iframe { max-width: 100%; border: 0; aspect-ratio: 16 / 9; width: 100%; } .hk-content svg { max-width: 100%; height: auto; } /* interactive */ .hk-content details { margin: 1rem 0; } .hk-content summary { cursor: pointer; font-weight: 700; color: var(--fg-heading); } .hk-content button { font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.75rem; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: #fff; cursor: pointer; } .hk-content button:hover { background: var(--accent); border-color: var(--accent); } /* forms — 574 pages carry one and none of it was styled */ .hk-content form { margin: 2rem 0; } .hk-content fieldset { border: 1px solid var(--hairline); padding: 1.25rem; margin: 0 0 1.5rem; } .hk-content legend { font-family: var(--sans); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding: 0 .5rem; } .hk-content label { display: block; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--fg-heading); margin: 0 0 .35rem; } .hk-content input, .hk-content textarea, .hk-content select { font: inherit; width: 100%; max-width: 34rem; padding: .7rem .85rem; border: 1px solid var(--hairline); border-radius: 0; /* the measured button spec */ background: var(--bg); color: var(--fg); margin: 0 0 1.25rem; } .hk-content textarea { min-height: 9rem; resize: vertical; } .hk-content input:focus, .hk-content textarea:focus, .hk-content select:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); } .hk-content input[type="checkbox"], .hk-content input[type="radio"] { width: auto; margin: 0 .5rem 0 0; accent-color: var(--accent); } .hk-content input[type="submit"], .hk-content input[type="button"] { width: auto; font-family: var(--sans); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .85rem 1.75rem; background: var(--ink); color: #fff; border-color: var(--ink); cursor: pointer; } .hk-content input[type="submit"]:hover { background: var(--accent); border-color: var(--accent); } .hk-content input::placeholder, .hk-content textarea::placeholder { color: var(--fg-muted); }