/*
Theme Name: FATALnet CA
Theme URI: https://fatalnet.local/
Author: FATALnet
Author URI: https://fatalexceptionsinc.com/
Description: A premium dark cyber / command-center WooCommerce theme for the FATALnet Tech Toolkit — First Edition USB stick.
Version: 0.9.68
Requires at least: 6.2
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fatalnet
Tags: e-commerce, custom-logo, dark, one-column, two-columns, block-styles, featured-images, responsive-layout, woocommerce
*/
:root {
--fatal-red: #EF4444;
--fatal-red-dark: #991B1B;
--fatal-bg: #0A0A0A;
--fatal-panel: #111113;
--fatal-panel-2: #18181B;
--fatal-border: rgba(239, 68, 68, .38);
--fatal-text: #F8FAFC;
--fatal-muted: #A1A1AA;
--fatal-soft: #D4D4D8;
--fatal-radius: 20px;
--fatal-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 48px rgba(239,68,68,.12);
--fatal-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--fatal-font);
background: radial-gradient(circle at 18% -6%, rgba(239,68,68,.11), transparent 36%), radial-gradient(circle at 88% 2%, rgba(127,29,29,.15), transparent 46%), var(--fatal-bg);
color: var(--fatal-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.fatal-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.fatal-site { min-height: 100vh; overflow-x: hidden; }
.fatal-header {
position: sticky; top: 0; z-index: 50;
background: rgba(10,10,10,.78);
border-bottom: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(18px);
}
.fatal-header__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
.fatal-logo { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.02em; }
.fatal-logo img { max-height:46px; width:auto; }
.fatal-logo__mark { width:44px; height:28px; border-radius:999px; background:linear-gradient(145deg,#ff2b2b,#7f0f0f); box-shadow:0 0 22px rgba(239,68,68,.45); }
.fatal-logo__text { font-size:1.25rem; }
.fatal-logo__text span { color:var(--fatal-red); }
.fatal-nav { display:flex; align-items:center; gap:22px; font-weight:650; color:#E5E7EB; }
.fatal-nav a { opacity:.9; }
.fatal-nav a:hover { color:var(--fatal-red); opacity:1; }
.fatal-cart { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--fatal-border); border-radius:999px; background:rgba(239,68,68,.08); }
.fatal-menu-toggle { display:none; background:transparent; color:#fff; border:1px solid var(--fatal-border); border-radius:12px; padding:9px 12px; }
.fatal-hero { position:relative; padding:92px 0 72px; overflow:hidden; }
.fatal-hero:before { content:""; position:absolute; inset:-2px; background:linear-gradient(90deg, rgba(10,10,10,.92), rgba(10,10,10,.68), rgba(10,10,10,.94)), var(--fatal-hero-image, none); background-size:cover; background-position:center; opacity:.95; z-index:-2; }
.fatal-hero:after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom, #000, transparent 92%); z-index:-1; }
.fatal-hero__grid { display:grid; grid-template-columns: 1.02fr .98fr; gap:50px; align-items:center; }
.fatal-eyebrow { color:var(--fatal-red); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; }
.fatal-hero h1 { margin:12px 0 18px; font-size:clamp(2.6rem, 6vw, 5.8rem); line-height:.94; letter-spacing:-.07em; }
.fatal-hero p { color:var(--fatal-soft); font-size:1.12rem; max-width:650px; }
.fatal-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.fatal-btn, .button, button.single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
display:inline-flex; align-items:center; justify-content:center; gap:10px;
background:linear-gradient(135deg, var(--fatal-red), #B91C1C) !important;
color:white !important; border:0 !important; border-radius:999px !important;
padding:14px 22px !important; font-weight:850 !important; box-shadow:0 10px 34px rgba(239,68,68,.28); cursor:pointer;
}
.fatal-btn--ghost { background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:none; }
.fatal-card { border:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(24,24,27,.9), rgba(10,10,10,.72)); border-radius:var(--fatal-radius); box-shadow:var(--fatal-shadow); overflow:hidden; }
.fatal-product-frame { padding:14px; transform: perspective(900px) rotateY(-6deg) rotateX(3deg); }
.fatal-product-frame img { border-radius:16px; box-shadow:0 0 70px rgba(239,68,68,.15); }
.fatal-section { padding:78px 0; }
.fatal-section__head { max-width:760px; margin-bottom:34px; }
.fatal-section h2 { font-size:clamp(2rem, 4vw, 3.3rem); line-height:1; letter-spacing:-.045em; margin:0 0 14px; }
.fatal-section__head p { color:var(--fatal-muted); }
.fatal-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.fatal-feature { padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:linear-gradient(180deg, rgba(24,24,27,.74), rgba(10,10,10,.58)); position:relative; overflow:hidden; }
.fatal-feature:before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--fatal-red), transparent); opacity:.75; }
.fatal-feature__icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--fatal-border); border-radius:14px; background:rgba(239,68,68,.08); color:var(--fatal-red); margin-bottom:14px; }
.fatal-feature h3 { margin:0 0 8px; font-size:1.05rem; }
.fatal-feature p { color:var(--fatal-muted); margin:0; }
.fatal-split { display:grid; grid-template-columns: .95fr 1.05fr; gap:28px; align-items:center; }
.fatal-panel { padding:28px; border:1px solid rgba(255,255,255,.1); border-radius:var(--fatal-radius); background:rgba(17,17,19,.72); }
.fatal-checks { display:grid; gap:12px; padding:0; list-style:none; margin:20px 0 0; }
.fatal-checks li { display:flex; gap:10px; color:var(--fatal-soft); }
.fatal-checks li:before { content:"✓"; color:var(--fatal-red); font-weight:900; }
.fatal-footer { border-top:1px solid rgba(255,255,255,.08); background:#070707; padding:40px 0; color:var(--fatal-muted); }
.fatal-footer__grid { display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center; }
.fatal-footer nav { display:flex; gap:18px; flex-wrap:wrap; }
.fatal-disclaimer { margin-top:16px; font-size:.85rem; color:#8A8A93; }
/* WooCommerce */
.woocommerce .woocommerce-breadcrumb { color:var(--fatal-muted); margin:26px auto; width:min(1180px, calc(100% - 40px)); }
.woocommerce div.product { width:min(1180px, calc(100% - 40px)); margin:40px auto 80px; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { margin-bottom:0; }
.woocommerce div.product div.images img { border-radius:20px; background:#111; border:1px solid rgba(255,255,255,.08); box-shadow:var(--fatal-shadow); }
.woocommerce div.product .product_title { font-size:clamp(2rem,4vw,4rem); letter-spacing:-.05em; line-height:1; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color:var(--fatal-red); font-size:2rem; font-weight:900; }
.woocommerce div.product form.cart { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.woocommerce .quantity .qty { background:#111; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px; }
.woocommerce-tabs, .related.products, .upsells.products { width:min(1180px, calc(100% - 40px)); margin:50px auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding:0; border-bottom:1px solid rgba(255,255,255,.12); }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background:#111; border:1px solid rgba(255,255,255,.12); border-radius:12px 12px 0 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color:#fff; }
.woocommerce div.product .woocommerce-tabs .panel { background:rgba(17,17,19,.65); border:1px solid rgba(255,255,255,.08); border-radius:0 18px 18px 18px; padding:24px; }
.woocommerce ul.products li.product { background:rgba(17,17,19,.72); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px !important; overflow:hidden; }
.woocommerce ul.products li.product a img { border-radius:14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color:#fff; font-weight:850; }
.woocommerce-message, .woocommerce-info { background:#111 !important; color:#fff !important; border-top-color:var(--fatal-red) !important; }
@media (max-width: 880px) {
.fatal-menu-toggle { display:inline-flex; }
.fatal-nav { display:none; position:absolute; top:74px; left:20px; right:20px; flex-direction:column; align-items:flex-start; background:#111; border:1px solid var(--fatal-border); padding:18px; border-radius:18px; }
.fatal-nav.is-open { display:flex; }
.fatal-hero__grid, .fatal-split { grid-template-columns:1fr; }
.fatal-grid { grid-template-columns:1fr; }
.fatal-product-frame { transform:none; }
.fatal-footer__grid { grid-template-columns:1fr; }
}
/* v0.1.2 bundled branding + product gallery */
.fatal-logo--bundled img{max-height:54px;width:auto;filter:drop-shadow(0 0 16px rgba(239,68,68,.22));}
.fatal-logo--bundled{min-width:190px;}
.fatal-hero-logo{max-width:min(560px,100%);margin:0 0 22px;filter:drop-shadow(0 0 22px rgba(239,68,68,.26));}
.fatal-product-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;}
.fatal-product-gallery__item{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:0 18px 60px rgba(0,0,0,.35);}
.fatal-product-gallery__item img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s ease, filter .25s ease;}
.fatal-product-gallery__item:hover img{transform:scale(1.035);filter:saturate(1.1);}
.fatal-product-gallery__caption{padding:12px 14px;color:#E5E7EB;font-size:.9rem;font-weight:750;border-top:1px solid rgba(255,255,255,.07);}
.fatal-hero .fatal-card .fatal-hero-product{width:100%;height:auto;border-radius:16px;}
@media (max-width:900px){.fatal-product-gallery{grid-template-columns:repeat(2,1fr)}.fatal-logo--bundled img{max-height:42px}.fatal-hero-logo{max-width:380px}}
@media (max-width:560px){.fatal-product-gallery{grid-template-columns:1fr}}
/* v0.1.4 Premium single-page launch polish */
.fatal-header {
background: linear-gradient(180deg, rgba(10,10,10,.88), rgba(10,10,10,.64));
box-shadow: 0 12px 40px rgba(0,0,0,.26);
}
.fatal-header__inner { padding: 14px 0; }
.fatal-logo img { max-height: 50px; filter: drop-shadow(0 0 14px rgba(239,68,68,.14)); }
.fatal-nav a { transition: color .2s ease, opacity .2s ease, transform .2s ease; }
.fatal-nav a:hover { transform: translateY(-1px); }
.fatal-cart { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(239,68,68,.08); }
.fatal-hero--premium {
min-height: 88vh;
display: flex;
align-items: center;
padding: clamp(76px, 9vw, 132px) 0 clamp(70px, 8vw, 118px);
}
.fatal-hero--premium:before {
background:
radial-gradient(circle at 72% 34%, rgba(239,68,68,.20), transparent 28rem),
radial-gradient(circle at 12% 0%, rgba(239,68,68,.11), transparent 26rem),
linear-gradient(90deg, rgba(10,10,10,.96), rgba(10,10,10,.60), rgba(10,10,10,.92)),
var(--fatal-hero-image, none);
background-size: cover;
background-position: center;
}
.fatal-hero--premium .fatal-hero__grid { grid-template-columns: .92fr 1.08fr; gap: clamp(30px, 6vw, 72px); }
.fatal-hero-logo-img { max-width: min(560px, 100%); margin-bottom: 24px; filter: drop-shadow(0 0 20px rgba(239,68,68,.20)); }
.fatal-hero h1 { text-wrap: balance; }
.fatal-hero__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: #D4D4D8; }
.fatal-hero__badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.fatal-badge {
display:inline-flex; align-items:center; gap:8px; padding:9px 12px;
border:1px solid rgba(239,68,68,.24); border-radius:999px;
background:rgba(239,68,68,.055); color:#F4F4F5; font-size:.83rem; font-weight:750;
}
.fatal-badge:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--fatal-red); box-shadow:0 0 12px var(--fatal-red); }
.fatal-hero-stack { position: relative; min-height: 480px; }
.fatal-hero-card {
position:absolute; border:1px solid rgba(255,255,255,.10); border-radius:24px; overflow:hidden;
background:rgba(17,17,19,.72); box-shadow: 0 34px 110px rgba(0,0,0,.55), 0 0 48px rgba(239,68,68,.13);
}
.fatal-hero-card img { width:100%; height:100%; object-fit:cover; }
.fatal-hero-card--main { inset: 7% 0 0 7%; transform: perspective(1100px) rotateY(-7deg) rotateX(3deg); }
.fatal-hero-card--small { width: 44%; right: 3%; top: 0; transform: rotate(3deg); box-shadow:0 22px 70px rgba(0,0,0,.48),0 0 30px rgba(239,68,68,.16); }
.fatal-hero-card--usb { width: 48%; left: 0; bottom: 2%; transform: rotate(-4deg); }
.fatal-hero-glow {
position:absolute; inset:auto 6% 0 8%; height:2px;
background:linear-gradient(90deg,transparent,rgba(239,68,68,.9),transparent);
box-shadow:0 0 55px rgba(239,68,68,.45); opacity:.8;
}
.fatal-gallery-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.fatal-gallery-item {
border:1px solid rgba(255,255,255,.08); border-radius:22px; overflow:hidden; background:#080808;
box-shadow: 0 20px 70px rgba(0,0,0,.38); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.fatal-gallery-item img { width:100%; aspect-ratio: 1/1; object-fit: cover; }
.fatal-gallery-item figcaption { padding:14px 16px; color:#E5E7EB; font-weight:750; border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); }
.fatal-gallery-item:hover { transform:translateY(-5px); border-color:rgba(239,68,68,.28); box-shadow:0 26px 84px rgba(0,0,0,.46),0 0 30px rgba(239,68,68,.12); }
.fatal-feature--premium { min-height: 100%; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.fatal-feature--premium:hover { transform: translateY(-4px); border-color: rgba(239,68,68,.30); box-shadow: var(--fatal-shadow); }
.fatal-feature__icon svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; }
.fatal-steps { display:grid; gap:14px; }
.fatal-step {
display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
padding:20px; border:1px solid rgba(255,255,255,.08); border-radius:18px;
background:linear-gradient(180deg, rgba(24,24,27,.70), rgba(10,10,10,.52));
}
.fatal-step__num { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(239,68,68,.30); background:rgba(239,68,68,.08); color:var(--fatal-red); font-weight:900; }
.fatal-step h3 { margin:0 0 5px; }
.fatal-step p { margin:0; color:var(--fatal-muted); }
.fatal-trust-panel {
text-align:center; border:1px solid rgba(239,68,68,.18); border-radius:24px;
padding: clamp(28px,5vw,54px);
background: radial-gradient(circle at center, rgba(239,68,68,.08), transparent 58%), linear-gradient(180deg, rgba(24,24,27,.70), rgba(10,10,10,.55));
box-shadow:var(--fatal-shadow);
}
.fatal-trust-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; }
.fatal-disclaimer { color:#8A8A93; font-size:.9rem; margin-top:18px; }
.fatal-cta-premium {
text-align:center; border:1px solid rgba(239,68,68,.24); border-radius:28px;
padding: clamp(38px, 6vw, 72px) 24px;
background:
radial-gradient(circle at 50% 0%, rgba(239,68,68,.15), transparent 34rem),
linear-gradient(180deg, rgba(24,24,27,.76), rgba(10,10,10,.64));
box-shadow:0 34px 110px rgba(0,0,0,.48),0 0 55px rgba(239,68,68,.10);
}
.fatal-cta-premium h2 { margin-inline:auto; max-width:850px; }
.fatal-cta-premium p { color:var(--fatal-muted); max-width:720px; margin:12px auto 0; }
@media (max-width: 900px) {
.fatal-hero--premium .fatal-hero__grid, .fatal-split { grid-template-columns:1fr; }
.fatal-hero-stack { min-height: 520px; }
.fatal-gallery-grid, .fatal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.fatal-hero--premium { min-height:auto; padding-top:64px; }
.fatal-hero-stack { min-height: 360px; }
.fatal-hero-card--main { inset: 8% 0 0 0; transform:none; }
.fatal-hero-card--small { width:48%; right:0; }
.fatal-hero-card--usb { width:55%; }
.fatal-gallery-grid, .fatal-grid { grid-template-columns:1fr; }
.fatal-badge { font-size:.78rem; }
}
/* v0.1.5 Clean premium makeover */
body {
background: #050505 !important;
background-image:
radial-gradient(circle at 50% -10%, rgba(239,68,68,.10), transparent 22rem),
radial-gradient(circle at 100% 20%, rgba(239,68,68,.05), transparent 18rem) !important;
}
.fatal-header {
background: rgba(5,5,5,.84) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
}
.fatal-header__inner { padding: 12px 0 !important; }
.fatal-logo img { max-height: 52px !important; }
.fatal-hero,
.fatal-hero--premium {
min-height: auto !important;
padding: clamp(68px, 9vw, 114px) 0 clamp(54px, 7vw, 92px) !important;
overflow: hidden;
}
.fatal-hero:before,
.fatal-hero--premium:before {
background:
linear-gradient(180deg, rgba(5,5,5,.70), rgba(5,5,5,.84)),
radial-gradient(circle at 50% 0%, rgba(239,68,68,.08), transparent 22rem) !important;
background-size: cover !important;
background-position: center !important;
opacity: 1 !important;
}
.fatal-hero:after,
.fatal-hero--premium:after {
display: none !important;
}
.fatal-hero__grid {
grid-template-columns: 1.02fr .98fr !important;
gap: clamp(28px, 5vw, 60px) !important;
align-items: center !important;
}
.fatal-hero__content {
position: relative;
z-index: 2;
}
.fatal-hero-logo-img {
max-width: min(700px, 100%) !important;
width: 100%;
margin-bottom: 22px !important;
filter: drop-shadow(0 0 16px rgba(239,68,68,.12)) !important;
}
.fatal-eyebrow {
letter-spacing: .18em !important;
font-size: .74rem !important;
}
.fatal-hero h1 {
font-size: clamp(2.6rem, 5.8vw, 5.4rem) !important;
line-height: .95 !important;
max-width: 12ch;
margin: 10px 0 18px !important;
}
.fatal-hero__lead {
max-width: 660px !important;
color: #c8c8cf !important;
font-size: clamp(1rem, 1.6vw, 1.16rem) !important;
}
.fatal-hero__badges { margin-top: 20px !important; }
.fatal-badge {
background: rgba(255,255,255,.03) !important;
border-color: rgba(239,68,68,.18) !important;
}
.fatal-actions { margin-top: 28px !important; }
.fatal-hero-clean-visual {
position: relative;
min-height: 470px;
display: flex;
align-items: center;
justify-content: center;
}
.fatal-hero-watermark {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -52%);
width: min(740px, 150%);
opacity: .08;
filter: blur(.2px) drop-shadow(0 0 24px rgba(239,68,68,.10));
pointer-events: none;
}
.fatal-hero-product {
position: relative;
z-index: 2;
width: min(100%, 680px);
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, rgba(20,20,22,.75), rgba(10,10,10,.75));
box-shadow: 0 28px 90px rgba(0,0,0,.42), 0 0 42px rgba(239,68,68,.10);
}
.fatal-hero-product img {
width: 100%;
display: block;
}
.fatal-hero-accent-line {
position: absolute;
left: 12%;
right: 12%;
bottom: 7%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(239,68,68,.82), transparent);
box-shadow: 0 0 40px rgba(239,68,68,.32);
z-index: 1;
}
.fatal-section {
padding: clamp(40px, 6vw, 62px) 0 !important;
}
.fatal-section__head {
margin-bottom: 26px !important;
}
.fatal-section h2 {
font-size: clamp(2rem, 4.2vw, 3.2rem) !important;
}
.fatal-gallery-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
}
.fatal-gallery-item {
background: #0b0b0c !important;
border-radius: 18px !important;
border: 1px solid rgba(255,255,255,.07) !important;
box-shadow: 0 14px 42px rgba(0,0,0,.28) !important;
}
.fatal-gallery-item img {
aspect-ratio: 1 / 1 !important;
}
.fatal-gallery-item figcaption {
font-size: .95rem !important;
padding: 12px 14px !important;
}
.fatal-grid {
gap: 16px !important;
}
.fatal-feature,
.fatal-feature--premium {
background: linear-gradient(180deg, rgba(18,18,20,.86), rgba(10,10,10,.78)) !important;
border-radius: 18px !important;
box-shadow: none !important;
}
.fatal-feature:hover,
.fatal-feature--premium:hover {
box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 0 22px rgba(239,68,68,.08) !important;
}
.fatal-feature:before {
opacity: .58 !important;
}
.fatal-split {
grid-template-columns: .92fr 1.08fr !important;
gap: 24px !important;
}
.fatal-panel,
.fatal-card {
background: linear-gradient(180deg, rgba(18,18,20,.84), rgba(10,10,10,.78)) !important;
border: 1px solid rgba(255,255,255,.08) !important;
box-shadow: 0 18px 54px rgba(0,0,0,.30) !important;
}
.fatal-product-frame {
transform: none !important;
padding: 16px !important;
}
.fatal-steps {
gap: 12px !important;
}
.fatal-step {
padding: 18px !important;
background: linear-gradient(180deg, rgba(18,18,20,.84), rgba(10,10,10,.74)) !important;
}
.fatal-trust-panel,
.fatal-cta-premium {
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.76)) !important;
border: 1px solid rgba(239,68,68,.14) !important;
box-shadow: 0 24px 70px rgba(0,0,0,.30), 0 0 26px rgba(239,68,68,.06) !important;
}
.fatal-cta-premium {
position: relative;
overflow: hidden;
}
.fatal-cta-premium:before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(239,68,68,.09), transparent 44%);
pointer-events: none;
}
@media (max-width: 980px) {
.fatal-hero__grid,
.fatal-split {
grid-template-columns: 1fr !important;
}
.fatal-hero-clean-visual {
min-height: 380px;
}
.fatal-gallery-grid,
.fatal-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
.fatal-gallery-grid,
.fatal-grid {
grid-template-columns: 1fr !important;
}
.fatal-hero-clean-visual {
min-height: 260px;
}
.fatal-hero-watermark {
width: 130%;
}
}
/* v0.1.6 transparent-logo fix + cleaner sticky header */
.fatal-header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
background: rgba(5,5,5,.80) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fatal-header .fatal-logo img {
max-height: 56px !important;
transition: max-height .22s ease, filter .22s ease, opacity .22s ease;
background: transparent !important;
}
.fatal-header--scrolled {
background: rgba(5,5,5,.94) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.32) !important;
border-bottom-color: rgba(239,68,68,.12) !important;
}
.fatal-header--scrolled .fatal-header__inner {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.fatal-header--scrolled .fatal-logo img {
max-height: 38px !important;
filter: drop-shadow(0 0 10px rgba(239,68,68,.12)) !important;
}
.fatal-hero--premium {
background: #050505 !important;
}
.fatal-hero-logo-img,
.fatal-logo img,
.custom-logo {
background: transparent !important;
}
.fatal-hero-clean-visual {
min-height: 440px !important;
}
.fatal-hero-watermark {
display: none !important;
}
.fatal-hero-product {
background: linear-gradient(180deg, rgba(12,12,13,.84), rgba(6,6,7,.84)) !important;
border-color: rgba(255,255,255,.07) !important;
box-shadow: 0 24px 76px rgba(0,0,0,.38), 0 0 34px rgba(239,68,68,.08) !important;
}
.fatal-hero-product img {
opacity: .96;
}
.fatal-section {
background: transparent !important;
}
.fatal-section:nth-of-type(even) {
background: transparent !important;
}
@media (max-width: 720px) {
.fatal-header .fatal-logo img { max-height: 42px !important; }
.fatal-header--scrolled .fatal-logo img { max-height: 34px !important; }
.fatal-hero-logo-img { width: 100% !important; }
.fatal-hero-clean-visual { min-height: 260px !important; }
}
/* v0.1.7 header/logo/cart refinement */
.fatal-header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
background: rgba(5,5,5,.78) !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fatal-header__inner {
min-height: 92px;
padding-top: 18px !important;
padding-bottom: 18px !important;
transition: min-height .22s ease, padding .22s ease;
}
.fatal-logo img {
max-height: 66px !important;
width: auto;
transition: max-height .22s ease, filter .22s ease, opacity .22s ease;
filter: drop-shadow(0 0 10px rgba(239,68,68,.12));
}
.fatal-header--scrolled {
background: rgba(5,5,5,.94) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.34) !important;
border-bottom-color: rgba(239,68,68,.10) !important;
}
.fatal-header--scrolled .fatal-header__inner {
min-height: 68px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.fatal-header--scrolled .fatal-logo img {
max-height: 42px !important;
}
.fatal-nav {
gap: 26px !important;
}
.fatal-nav > a,
.fatal-nav > .menu-item > a,
.fatal-nav li a {
font-weight: 750;
}
.fatal-cart {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #F4F4F5 !important;
font-weight: 750 !important;
}
.fatal-cart:hover {
color: var(--fatal-red) !important;
}
.fatal-cart__icon {
width: 18px;
height: 18px;
display: inline-grid;
place-items: center;
}
.fatal-cart__icon svg {
width: 18px;
height: 18px;
}
.fatal-cart__label {
font-size: .98rem;
}
.fatal-cart-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(239,68,68,.16);
border: 1px solid rgba(239,68,68,.24);
color: #fff;
font-size: .72rem;
font-weight: 800;
line-height: 1;
}
.fatal-hero--premium {
padding-top: clamp(92px, 8vw, 130px) !important;
}
.fatal-hero__content {
max-width: 680px;
}
.fatal-hero h1 {
max-width: 9.2ch;
}
.fatal-hero__lead {
max-width: 620px !important;
}
.fatal-hero-clean-visual {
min-height: 420px !important;
}
.fatal-hero-product {
width: min(100%, 600px) !important;
}
.fatal-hero__badges {
margin-top: 24px !important;
}
@media (max-width: 960px) {
.fatal-header__inner {
min-height: 76px;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.fatal-logo img {
max-height: 54px !important;
}
}
@media (max-width: 720px) {
.fatal-header__inner {
min-height: 70px;
gap: 16px;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.fatal-logo img {
max-height: 44px !important;
}
.fatal-header--scrolled .fatal-logo img {
max-height: 34px !important;
}
.fatal-cart__label {
display: none;
}
.fatal-nav {
gap: 18px !important;
}
}
/* v0.1.8 mobile/header/shop/tools polish */
.fatal-header__inner {
min-height: 112px !important;
}
.fatal-logo img {
max-height: 86px !important;
}
.fatal-header--scrolled .fatal-header__inner {
min-height: 70px !important;
}
.fatal-header--scrolled .fatal-logo img {
max-height: 44px !important;
}
.fatal-menu-toggle {
font-weight: 850 !important;
letter-spacing: .02em;
background: rgba(239,68,68,.08) !important;
border-color: rgba(239,68,68,.28) !important;
}
@media (max-width: 820px) {
.fatal-header__inner {
min-height: 84px !important;
flex-wrap: wrap;
}
.fatal-logo img {
max-height: 58px !important;
}
.fatal-menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.fatal-nav {
width: 100%;
display: none !important;
flex-direction: column;
align-items: stretch !important;
gap: 0 !important;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(10,10,10,.96);
box-shadow: 0 20px 60px rgba(0,0,0,.42), 0 0 24px rgba(239,68,68,.08);
}
.fatal-nav.is-open {
display: flex !important;
}
.fatal-nav a {
padding: 13px 14px;
border-radius: 12px;
}
.fatal-nav a:hover {
background: rgba(239,68,68,.08);
}
.fatal-cart {
justify-content: flex-start !important;
padding: 13px 14px !important;
}
.fatal-cart__label {
display: inline !important;
}
}
@media (max-width: 520px) {
.fatal-header__inner {
min-height: 76px !important;
}
.fatal-logo img {
max-height: 48px !important;
}
.fatal-header--scrolled .fatal-logo img {
max-height: 36px !important;
}
}
.fatal-tools-section {
background: radial-gradient(circle at 50% 0%, rgba(239,68,68,.035), transparent 28rem);
}
.fatal-tools-grid {
display: grid;
gap: 18px;
}
.fatal-tool-category {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
}
.fatal-tool-category h3 {
margin: 0 0 14px;
color: #fff;
font-size: 1.15rem;
}
.fatal-tool-list {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.fatal-tool {
padding: 13px 14px;
border: 1px solid rgba(255,255,255,.065);
border-radius: 14px;
background: rgba(255,255,255,.026);
}
.fatal-tool b {
display: block;
color: #fff;
font-size: .95rem;
margin-bottom: 4px;
}
.fatal-tool span {
display: block;
color: var(--fatal-muted);
font-size: .86rem;
line-height: 1.45;
}
@media (max-width: 760px) {
.fatal-tool-list {
grid-template-columns: 1fr;
}
}
/* Shop/archive polish */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(18,18,20,.86), rgba(10,10,10,.76));
padding: 18px !important;
box-shadow: 0 18px 54px rgba(0,0,0,.28);
}
.woocommerce ul.products li.product img {
border-radius: 16px;
background: #090909;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
color: #fff;
font-weight: 850;
letter-spacing: -.02em;
}
.woocommerce ul.products li.product .price {
color: var(--fatal-red) !important;
font-weight: 900 !important;
}
/* v0.1.9 sticky hero-header, product page, and mobile polish */
.fatal-header {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
background: rgba(5,5,5,.82) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border-bottom: 1px solid rgba(255,255,255,.065) !important;
transition: background .20s ease, box-shadow .20s ease, border-color .20s ease;
will-change: background, box-shadow;
}
.fatal-header__inner {
min-height: 128px !important;
padding-top: 18px !important;
padding-bottom: 18px !important;
transition: min-height .20s ease, padding .20s ease;
}
.fatal-logo {
flex: 0 0 auto !important;
min-width: 0;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 96px !important;
max-height: 96px !important;
width: auto !important;
max-width: min(520px, 44vw) !important;
object-fit: contain;
transition: height .20s ease, max-height .20s ease, max-width .20s ease, filter .20s ease;
filter: drop-shadow(0 0 13px rgba(239,68,68,.12));
transform: translateZ(0);
backface-visibility: hidden;
}
.fatal-header--scrolled {
background: rgba(5,5,5,.96) !important;
box-shadow: 0 14px 38px rgba(0,0,0,.36) !important;
border-bottom-color: rgba(239,68,68,.12) !important;
}
.fatal-header--scrolled .fatal-header__inner {
min-height: 74px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 52px !important;
max-height: 52px !important;
max-width: min(360px, 34vw) !important;
}
.fatal-nav {
gap: 24px !important;
}
.fatal-nav a {
white-space: nowrap;
}
.fatal-cart {
border-radius: 999px !important;
padding: 8px 10px !important;
}
.fatal-cart__label {
display: inline-block;
}
.fatal-cart-count {
margin-left: 2px;
}
.fatal-menu-toggle {
font-weight: 850 !important;
letter-spacing: .02em;
background: rgba(239,68,68,.08) !important;
border-color: rgba(239,68,68,.30) !important;
}
.fatal-hero--premium {
padding-top: clamp(74px, 6vw, 112px) !important;
}
.fatal-hero__grid {
grid-template-columns: .95fr 1.05fr !important;
}
.fatal-hero h1 {
max-width: 10ch !important;
}
.fatal-hero-product {
width: min(100%, 640px) !important;
}
/* Homepage product gallery removed in v0.1.9 */
.fatal-home-gallery-note {
display: none !important;
}
/* Full tool list polish */
.fatal-tools-grid {
display: grid;
gap: 18px;
}
.fatal-tool-category {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
}
.fatal-tool-category h3 {
margin: 0 0 14px;
color: #fff;
font-size: 1.15rem;
}
.fatal-tool-list {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.fatal-tool {
padding: 13px 14px;
border: 1px solid rgba(255,255,255,.065);
border-radius: 14px;
background: rgba(255,255,255,.026);
}
.fatal-tool b {
display: block;
color: #fff;
font-size: .95rem;
margin-bottom: 4px;
}
.fatal-tool span {
display: block;
color: var(--fatal-muted);
font-size: .86rem;
line-height: 1.45;
}
/* WooCommerce product page upgrade */
.woocommerce div.product {
padding-top: 28px;
}
.woocommerce div.product div.images img {
background: #080808;
border-radius: 22px;
}
.woocommerce div.product .product_title {
max-width: 720px;
}
.fatal-product-highlights {
margin-top: 24px;
}
.woocommerce div.product .woocommerce-tabs .panel {
line-height: 1.7;
}
.woocommerce div.product .woocommerce-product-gallery {
position: relative;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 12px !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: auto !important;
float: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs img {
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
opacity: .72;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
opacity: 1;
border-color: rgba(239,68,68,.35);
}
.fatal-product-detail-section {
width: min(1180px, calc(100% - 40px));
margin: 40px auto 80px;
}
.fatal-product-detail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.fatal-product-detail-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
}
.fatal-product-detail-card h3 {
margin: 0 0 8px;
}
.fatal-product-detail-card p {
margin: 0;
color: var(--fatal-muted);
}
@media (max-width: 1040px) {
.fatal-logo img,
.fatal-logo .custom-logo {
height: 72px !important;
max-height: 72px !important;
max-width: min(430px, 46vw) !important;
}
.fatal-header__inner {
min-height: 102px !important;
}
.fatal-nav {
gap: 18px !important;
}
}
@media (max-width: 820px) {
.fatal-header__inner {
min-height: 84px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
flex-wrap: wrap;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 58px !important;
max-height: 58px !important;
max-width: min(360px, 70vw) !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 42px !important;
max-height: 42px !important;
max-width: min(280px, 64vw) !important;
}
.fatal-menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.fatal-nav {
width: 100%;
display: none !important;
flex-direction: column;
align-items: stretch !important;
gap: 0 !important;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(10,10,10,.98);
box-shadow: 0 20px 60px rgba(0,0,0,.42), 0 0 24px rgba(239,68,68,.08);
}
.fatal-nav.is-open {
display: flex !important;
}
.fatal-nav a {
padding: 13px 14px;
border-radius: 12px;
}
.fatal-nav a:hover {
background: rgba(239,68,68,.08);
}
.fatal-cart {
justify-content: flex-start !important;
padding: 13px 14px !important;
}
.fatal-cart__label {
display: inline !important;
}
.fatal-hero__grid,
.fatal-split {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 760px) {
.fatal-tool-list,
.fatal-product-detail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.fatal-logo img,
.fatal-logo .custom-logo {
height: 48px !important;
max-height: 48px !important;
max-width: 72vw !important;
}
.fatal-header__inner {
min-height: 76px !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 36px !important;
max-height: 36px !important;
}
}
/* v0.2.0 single-product landing + fixed header */
.fatal-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 99999 !important;
background: rgba(5,5,5,.88) !important;
border-bottom: 1px solid rgba(255,255,255,.065) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}
.admin-bar .fatal-header { top: 32px !important; }
.fatal-main { padding-top: 132px; }
.fatal-header__inner {
min-height: 118px !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
transition: min-height .22s ease, padding .22s ease;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 92px !important;
max-height: 92px !important;
max-width: min(560px, 45vw) !important;
width: auto !important;
object-fit: contain !important;
transition: height .22s ease, max-height .22s ease, max-width .22s ease;
filter: drop-shadow(0 0 14px rgba(239,68,68,.13));
}
.fatal-header--scrolled .fatal-header__inner {
min-height: 70px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 50px !important;
max-height: 50px !important;
max-width: min(380px, 34vw) !important;
}
.fatal-cart {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 8px 0 !important;
}
.fatal-cart-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(239,68,68,.18);
border: 1px solid rgba(239,68,68,.28);
color: #fff;
font-size: .72rem;
font-weight: 850;
}
.fatal-hero--single-product {
min-height: calc(100vh - 132px);
display: flex;
align-items: center;
padding: clamp(54px, 7vw, 96px) 0 !important;
background: radial-gradient(circle at 78% 30%, rgba(239,68,68,.10), transparent 26rem);
}
.fatal-hero--single-product:before,
.fatal-hero--single-product:after {
display: none !important;
}
.fatal-hero--single-product .fatal-hero__grid {
grid-template-columns: .90fr 1.10fr !important;
gap: clamp(30px, 5vw, 72px) !important;
}
.fatal-buy-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(18,18,20,.86), rgba(8,8,9,.82));
box-shadow: 0 32px 110px rgba(0,0,0,.42), 0 0 42px rgba(239,68,68,.08);
}
.fatal-buy-card__image {
background: #060606;
padding: clamp(14px, 2vw, 24px);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.fatal-buy-card__image img {
width: 100%;
border-radius: 20px;
}
.fatal-buy-card__body {
padding: clamp(22px, 3vw, 34px);
}
.fatal-buy-card__body h2 {
margin: 0 0 10px;
letter-spacing: -.04em;
line-height: 1;
}
.fatal-buy-card__body p {
color: var(--fatal-muted);
margin: 0 0 18px;
}
.fatal-buy-card__price {
color: var(--fatal-red);
font-size: 2.2rem;
font-weight: 950;
line-height: 1;
margin-bottom: 20px;
}
.fatal-tools-grid {
display: grid;
gap: 18px;
}
.fatal-tool-category {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
}
.fatal-tool-category h3 {
margin: 0 0 14px;
color: #fff;
font-size: 1.15rem;
}
.fatal-tool-list {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.fatal-tool {
padding: 13px 14px;
border: 1px solid rgba(255,255,255,.065);
border-radius: 14px;
background: rgba(255,255,255,.026);
}
.fatal-tool b {
display: block;
color: #fff;
font-size: .95rem;
margin-bottom: 4px;
}
.fatal-tool span {
display: block;
color: var(--fatal-muted);
font-size: .86rem;
line-height: 1.45;
}
.fatal-product-detail-section {
width: min(1180px, calc(100% - 40px));
margin: 40px auto 80px;
}
.fatal-product-detail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.fatal-product-detail-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
}
.fatal-product-detail-card h3 { margin: 0 0 8px; }
.fatal-product-detail-card p { margin: 0; color: var(--fatal-muted); }
.woocommerce div.product div.images .flex-control-thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 12px !important;
}
.woocommerce div.product div.images .flex-control-thumbs li {
width: auto !important;
float: none !important;
}
.woocommerce div.product div.images .flex-control-thumbs img {
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
opacity: .72;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
opacity: 1;
border-color: rgba(239,68,68,.35);
}
@media (max-width: 900px) {
.fatal-main { padding-top: 92px; }
.fatal-header__inner {
min-height: 88px !important;
flex-wrap: wrap;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 58px !important;
max-height: 58px !important;
max-width: min(420px, 70vw) !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 42px !important;
max-height: 42px !important;
}
.fatal-menu-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.fatal-nav {
width: 100%;
display: none !important;
flex-direction: column;
align-items: stretch !important;
gap: 0 !important;
padding: 12px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(10,10,10,.98);
box-shadow: 0 20px 60px rgba(0,0,0,.42), 0 0 24px rgba(239,68,68,.08);
}
.fatal-nav.is-open { display: flex !important; }
.fatal-nav a {
padding: 13px 14px;
border-radius: 12px;
}
.fatal-cart {
justify-content: flex-start !important;
padding: 13px 14px !important;
}
.fatal-hero--single-product .fatal-hero__grid,
.fatal-split {
grid-template-columns: 1fr !important;
}
.fatal-product-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.fatal-tool-list { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
.admin-bar .fatal-header { top: 46px !important; }
}
@media (max-width: 520px) {
.fatal-logo img,
.fatal-logo .custom-logo {
height: 48px !important;
max-height: 48px !important;
max-width: 72vw !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 36px !important;
max-height: 36px !important;
}
}
/* v0.2.1 header/product/layout/footer refinement */
.fatal-main {
padding-top: 118px !important;
}
.fatal-header__inner {
min-height: 128px !important;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 104px !important;
max-height: 104px !important;
max-width: min(620px, 48vw) !important;
}
.fatal-header--scrolled .fatal-header__inner {
min-height: 78px !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 58px !important;
max-height: 58px !important;
max-width: min(430px, 36vw) !important;
}
/* Bring hero title closer to header and shrink the right-side product card */
.fatal-hero--single-product {
min-height: auto !important;
align-items: flex-start !important;
padding-top: clamp(28px, 3.5vw, 50px) !important;
padding-bottom: clamp(46px, 5vw, 76px) !important;
}
.fatal-hero--single-product .fatal-hero__grid {
grid-template-columns: 1.05fr .95fr !important;
align-items: center !important;
gap: clamp(24px, 4vw, 54px) !important;
}
.fatal-hero__content {
padding-top: 0 !important;
}
.fatal-hero h1 {
font-size: clamp(3rem, 6vw, 5.7rem) !important;
}
.fatal-buy-card {
width: min(100%, 430px) !important;
margin-left: auto !important;
border-radius: 22px !important;
}
.fatal-buy-card__image {
padding: 12px !important;
}
.fatal-buy-card__image img {
max-height: 265px !important;
object-fit: cover !important;
object-position: center !important;
}
.fatal-buy-card__body {
padding: 20px 22px 24px !important;
}
.fatal-buy-card__body h2 {
font-size: 1.35rem !important;
}
.fatal-buy-card__body p {
font-size: .95rem !important;
}
.fatal-buy-card__price {
font-size: 1.85rem !important;
}
/* Better footer layout */
.fatal-footer {
background: #050505 !important;
border-top: 1px solid rgba(239,68,68,.12) !important;
padding: 48px 0 32px !important;
}
.fatal-footer__grid {
grid-template-columns: 1.3fr .7fr !important;
align-items: start !important;
}
.fatal-footer .fatal-logo img {
max-height: 64px !important;
height: auto !important;
margin-bottom: 12px;
}
.fatal-footer p {
max-width: 720px;
}
.fatal-footer nav {
justify-content: flex-end;
gap: 12px 18px !important;
}
.fatal-footer nav a {
color: #E5E7EB;
font-weight: 700;
}
.fatal-footer nav a:hover {
color: var(--fatal-red);
}
.fatal-disclaimer {
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.06);
}
/* Support/contact pages */
.page .fatal-page,
.fatal-standard-page {
width: min(980px, calc(100% - 40px));
margin: 0 auto;
padding: clamp(44px, 6vw, 78px) 0;
}
.page .fatal-page h1,
.fatal-standard-page h1 {
font-size: clamp(2.4rem, 5vw, 4.6rem);
line-height: .95;
letter-spacing: -.055em;
}
.page .fatal-page h2,
.fatal-standard-page h2 {
margin-top: 34px;
}
.page .fatal-page ul,
.fatal-standard-page ul {
padding-left: 1.2rem;
}
.page .fatal-page li,
.fatal-standard-page li {
margin: 8px 0;
color: var(--fatal-soft);
}
@media (max-width: 1040px) {
.fatal-logo img,
.fatal-logo .custom-logo {
height: 78px !important;
max-height: 78px !important;
max-width: min(470px, 50vw) !important;
}
.fatal-header__inner {
min-height: 104px !important;
}
.fatal-main {
padding-top: 104px !important;
}
}
@media (max-width: 900px) {
.fatal-main {
padding-top: 92px !important;
}
.fatal-hero--single-product .fatal-hero__grid {
grid-template-columns: 1fr !important;
}
.fatal-buy-card {
width: min(100%, 520px) !important;
margin-left: 0 !important;
}
}
@media (max-width: 820px) {
.fatal-header__inner {
min-height: 86px !important;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 60px !important;
max-height: 60px !important;
max-width: min(380px, 70vw) !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 44px !important;
max-height: 44px !important;
}
.fatal-footer__grid {
grid-template-columns: 1fr !important;
}
.fatal-footer nav {
justify-content: flex-start;
}
}
@media (max-width: 520px) {
.fatal-main {
padding-top: 82px !important;
}
.fatal-logo img,
.fatal-logo .custom-logo {
height: 50px !important;
max-height: 50px !important;
max-width: 74vw !important;
}
.fatal-header--scrolled .fatal-logo img,
.fatal-header--scrolled .fatal-logo .custom-logo {
height: 38px !important;
max-height: 38px !important;
}
.fatal-hero h1 {
font-size: clamp(2.55rem, 14vw, 4rem) !important;
}
}
/* v0.2.2 GA/pages/footer polish */
.fatal-footer {
padding: 38px 0 28px !important;
}
.fatal-footer__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr) !important;
gap: 34px !important;
}
.fatal-footer .fatal-logo {
display: inline-flex !important;
margin-bottom: 12px !important;
}
.fatal-footer .fatal-logo img {
height: 42px !important;
max-height: 42px !important;
max-width: 260px !important;
width: auto !important;
}
.fatal-footer nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px 18px !important;
justify-content: stretch !important;
align-content: start !important;
}
.fatal-footer nav a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 10px;
border-radius: 10px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.055);
}
.fatal-footer nav a:hover {
background: rgba(239,68,68,.07);
border-color: rgba(239,68,68,.18);
}
.fatal-disclaimer {
margin-top: 18px !important;
padding-top: 16px !important;
}
.fatal-standard-page .fatal-page-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
padding: 22px;
margin: 18px 0;
}
.fatal-standard-page .fatal-page-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
margin-top: 22px;
}
.fatal-standard-page .fatal-contact-box {
border: 1px solid rgba(239,68,68,.18);
border-radius: 18px;
padding: 22px;
background: rgba(239,68,68,.045);
}
.fatal-standard-page .wpcf7 {
margin-top: 16px;
}
.fatal-standard-page input,
.fatal-standard-page textarea,
.fatal-standard-page select {
max-width: 100%;
}
@media (max-width: 820px) {
.fatal-footer__grid {
grid-template-columns: 1fr !important;
}
.fatal-footer nav {
grid-template-columns: 1fr !important;
}
.fatal-footer .fatal-logo img {
height: 36px !important;
max-height: 36px !important;
max-width: 220px !important;
}
.fatal-standard-page .fatal-page-grid {
grid-template-columns: 1fr;
}
}
/* v0.2.3 shop/contact/support/cart polish */
body.woocommerce-shop .fatal-nav a[href*="shop"],
body.post-type-archive-product .fatal-nav a[href*="shop"],
body.single-product .fatal-nav a[href*="shop"],
body.page-id-support .fatal-nav a[href*="support"],
body.page-id-contact .fatal-nav a[href*="contact"],
.fatal-nav a[aria-current="page"] {
color: var(--fatal-red) !important;
text-shadow: 0 0 16px rgba(239,68,68,.45);
}
.fatal-shop-hero {
padding: clamp(34px, 5vw, 64px) 0 38px;
}
.fatal-shop-hero__top {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.fatal-shop-hero h1 {
margin: 8px 0 0;
font-size: clamp(2.4rem, 5vw, 4.8rem);
line-height: .95;
letter-spacing: -.055em;
}
.fatal-shop-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 240px;
}
.fatal-shop-toolbar select,
.woocommerce-ordering select {
color: #fff;
background: rgba(18,18,20,.92);
border: 1px solid rgba(239,68,68,.22);
border-radius: 12px;
padding: 10px 12px;
}
.fatal-shop-showcase {
display: grid;
grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
gap: clamp(24px, 4vw, 48px);
align-items: center;
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
background:
radial-gradient(circle at 16% 30%, rgba(239,68,68,.10), transparent 22rem),
linear-gradient(180deg, rgba(18,18,20,.86), rgba(8,8,9,.82));
box-shadow: 0 30px 100px rgba(0,0,0,.35), 0 0 42px rgba(239,68,68,.06);
padding: clamp(20px, 3vw, 38px);
}
.fatal-shop-showcase__image img {
border-radius: 22px;
background: #070707;
box-shadow: 0 20px 70px rgba(0,0,0,.36), 0 0 28px rgba(239,68,68,.10);
}
.fatal-shop-showcase__content h2 {
font-size: clamp(2rem, 4.2vw, 4rem);
line-height: .96;
letter-spacing: -.055em;
margin: 0 0 14px;
}
.fatal-shop-showcase__content p {
color: var(--fatal-soft);
max-width: 720px;
font-size: 1.08rem;
}
.fatal-shop-price {
color: var(--fatal-red);
font-size: 2.1rem;
font-weight: 950;
margin: 18px 0 18px;
}
.fatal-shop-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.fatal-shop-actions .button {
margin: 0 !important;
}
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
display: none !important;
}
/* Hide default archive product grid only on shop because the custom showcase is the product */
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products {
display: none !important;
}
/* Cart page cleanup */
.woocommerce-cart .fatal-main,
.woocommerce-checkout .fatal-main {
padding-bottom: 70px;
}
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
overflow: hidden;
background: rgba(18,18,20,.72);
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
border-color: rgba(255,255,255,.08) !important;
color: #F8FAFC;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
padding: 22px;
background: linear-gradient(180deg, rgba(18,18,20,.86), rgba(10,10,10,.76));
}
.woocommerce-cart input.qty {
background: #0A0A0A;
color: #fff;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: 8px;
}
/* Contact Form 7 dark styling */
.wpcf7 form p {
margin: 0 0 14px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
color: #fff;
background: rgba(8,8,9,.9);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 12px 14px;
}
.wpcf7 textarea {
min-height: 150px;
}
.wpcf7 input[type="submit"] {
background: linear-gradient(135deg, var(--fatal-red), #B91C1C);
color: #fff;
border: 0;
border-radius: 999px;
padding: 13px 22px;
font-weight: 850;
cursor: pointer;
}
@media (max-width: 860px) {
.fatal-shop-hero__top {
display: block;
}
.fatal-shop-toolbar {
justify-content: flex-start;
margin-top: 16px;
}
.fatal-shop-showcase {
grid-template-columns: 1fr;
}
}
/* v0.2.4 premium buttons, active nav, anchor spacing, page/cart polish */
/* Smooth anchor offset for fixed/sticky header */
html {
scroll-padding-top: 150px;
}
#features,
#tools,
#how-it-works,
#open-source {
scroll-margin-top: 150px;
}
/* Fancy professional button hover / glow upgrade */
.fatal-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wpcf7 input[type="submit"] {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease,
background .22s ease,
color .22s ease !important;
will-change: transform, box-shadow;
}
.fatal-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before,
.woocommerce #respond input#submit::before,
.wpcf7 input[type="submit"]::before {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
background:
radial-gradient(circle at var(--fatal-mouse-x, 50%) var(--fatal-mouse-y, 50%), rgba(255,255,255,.34), transparent 18%),
linear-gradient(120deg, rgba(239,68,68,.95), rgba(185,28,28,.45), rgba(239,68,68,.95));
opacity: 0;
transition: opacity .22s ease;
}
.fatal-btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after,
.woocommerce #respond input#submit::after,
.wpcf7 input[type="submit"]::after {
content: "";
position: absolute;
top: -80%;
bottom: -80%;
left: -45%;
width: 32%;
transform: rotate(18deg) translateX(-180%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
opacity: 0;
pointer-events: none;
}
.fatal-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wpcf7 input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow:
0 16px 42px rgba(239,68,68,.30),
0 0 28px rgba(239,68,68,.22),
inset 0 1px 0 rgba(255,255,255,.13) !important;
}
.fatal-btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before,
.woocommerce #respond input#submit:hover::before,
.wpcf7 input[type="submit"]:hover::before {
opacity: .45;
}
.fatal-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce input.button:hover::after,
.woocommerce #respond input#submit:hover::after,
.wpcf7 input[type="submit"]:hover::after {
opacity: 1;
animation: fatal-shine .75s ease forwards;
}
.fatal-btn--ghost:hover {
border-color: rgba(239,68,68,.42) !important;
background: rgba(239,68,68,.08) !important;
}
@keyframes fatal-shine {
from { transform: rotate(18deg) translateX(-180%); }
to { transform: rotate(18deg) translateX(520%); }
}
/* Active/current menu state: subtle red glow */
.fatal-nav a {
position: relative;
}
.fatal-nav a::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -9px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--fatal-red), transparent);
opacity: 0;
transform: scaleX(.55);
transition: opacity .2s ease, transform .2s ease;
box-shadow: 0 0 16px rgba(239,68,68,.35);
}
.fatal-nav a:hover,
.fatal-nav a[aria-current="page"],
body.woocommerce-shop .fatal-nav a[href*="shop"],
body.post-type-archive-product .fatal-nav a[href*="shop"],
body.single-product .fatal-nav a[href*="shop"],
body.page-template .fatal-nav a[aria-current="page"],
body.page .fatal-nav a[aria-current="page"] {
color: #fff !important;
text-shadow: 0 0 14px rgba(239,68,68,.40);
}
.fatal-nav a:hover::after,
.fatal-nav a[aria-current="page"]::after,
body.woocommerce-shop .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-nav a[href*="shop"]::after {
opacity: .95;
transform: scaleX(1);
}
/* Better anchor landing spacing for sections under the fixed header */
.fatal-section {
scroll-margin-top: 150px;
}
/* Support/contact pages: remove the giant empty top feel */
.page .fatal-section:first-of-type {
padding-top: clamp(28px, 4vw, 48px) !important;
}
.fatal-page {
padding: clamp(28px, 4vw, 44px) !important;
}
.fatal-standard-page {
padding: 0 !important;
}
.fatal-standard-page h1 {
margin-top: 0 !important;
margin-bottom: 18px !important;
}
.fatal-standard-page > p:first-of-type {
max-width: 900px;
margin-bottom: 26px !important;
}
.fatal-standard-page .fatal-page-grid {
align-items: stretch;
}
.fatal-standard-page .fatal-page-card,
.fatal-standard-page .fatal-contact-box {
box-shadow: 0 18px 54px rgba(0,0,0,.24);
}
/* Cart page full redesign polish */
.woocommerce-cart .fatal-section,
.woocommerce-checkout .fatal-section {
padding-top: clamp(28px, 4vw, 52px) !important;
}
.woocommerce-cart .fatal-panel,
.woocommerce-checkout .fatal-panel {
width: min(1180px, 100%);
margin-inline: auto;
padding: clamp(22px, 3vw, 34px) !important;
border-radius: 24px !important;
background:
radial-gradient(circle at 75% 0%, rgba(239,68,68,.06), transparent 26rem),
linear-gradient(180deg, rgba(18,18,20,.88), rgba(10,10,10,.78)) !important;
}
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr);
gap: clamp(24px, 4vw, 48px);
align-items: start;
}
.woocommerce-cart form.woocommerce-cart-form {
min-width: 0;
}
.woocommerce-cart .cart-collaterals {
width: 100% !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
float: none !important;
width: 100% !important;
position: sticky;
top: 110px;
}
.woocommerce-cart table.shop_table {
margin: 0 !important;
}
.woocommerce-cart table.cart img {
width: 76px !important;
border-radius: 10px;
}
.woocommerce-cart table.cart td.product-name a {
color: #fff;
font-weight: 850;
text-decoration: none;
}
.woocommerce-cart table.cart td.product-name {
line-height: 1.45;
}
.woocommerce-cart .actions {
padding-top: 18px !important;
}
.woocommerce-cart .coupon {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.woocommerce-cart .coupon input.input-text {
min-width: 220px;
color: #fff;
background: rgba(8,8,9,.9);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
padding: 11px 12px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
width: 100%;
text-align: center;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--fatal-red), #B91C1C) !important;
color: #fff !important;
font-weight: 900 !important;
padding: 15px 22px !important;
}
.woocommerce-cart .cart_totals h2 {
font-size: clamp(2.2rem, 4vw, 4rem) !important;
line-height: .95;
letter-spacing: -.055em;
}
@media (max-width: 980px) {
html,
#features,
#tools,
#how-it-works,
#open-source,
.fatal-section {
scroll-margin-top: 120px;
scroll-padding-top: 120px;
}
.woocommerce-cart .woocommerce {
grid-template-columns: 1fr;
}
.woocommerce-cart .cart-collaterals .cart_totals {
position: static;
}
}
@media (max-width: 720px) {
.fatal-nav a::after {
left: 14px;
right: 14px;
bottom: 5px;
}
.woocommerce-cart table.shop_table_responsive tr,
.woocommerce-cart table.shop_table_responsive td {
border-color: rgba(255,255,255,.08) !important;
}
.woocommerce-cart table.cart img {
width: 62px !important;
}
.woocommerce-cart .coupon {
display: grid;
}
.woocommerce-cart .coupon input.input-text {
min-width: 0;
width: 100%;
}
}
/* v0.2.5 metadata, active nav, smoother anchors, subtle logo animation */
html {
scroll-padding-top: 118px !important;
}
#features,
#tools,
#how-it-works,
#open-source,
.fatal-section {
scroll-margin-top: 118px !important;
}
/* Keep current page / section highlighted, not just hover */
.fatal-nav a.is-active,
.fatal-nav a[aria-current="page"],
body.woocommerce-shop .fatal-nav a[href*="shop"],
body.post-type-archive-product .fatal-nav a[href*="shop"],
body.single-product .fatal-nav a[href*="shop"],
body.page-slug-support .fatal-nav a[href*="support"],
body.page-slug-contact .fatal-nav a[href*="contact"] {
color: #fff !important;
text-shadow: 0 0 16px rgba(239,68,68,.50);
}
.fatal-nav a.is-active::after,
.fatal-nav a[aria-current="page"]::after,
body.woocommerce-shop .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-nav a[href*="shop"]::after,
body.page-slug-support .fatal-nav a[href*="support"]::after,
body.page-slug-contact .fatal-nav a[href*="contact"]::after {
opacity: .95 !important;
transform: scaleX(1) !important;
}
/* Subtle premium logo animation: tiny power-on glow only, not tacky */
.fatal-logo img,
.fatal-logo .custom-logo {
animation: fatal-logo-power-on 1.2s ease-out both;
}
@keyframes fatal-logo-power-on {
0% {
opacity: .55;
filter: drop-shadow(0 0 0 rgba(239,68,68,0));
transform: translateZ(0) scale(.985);
}
55% {
opacity: 1;
filter: drop-shadow(0 0 22px rgba(239,68,68,.23));
}
100% {
opacity: 1;
filter: drop-shadow(0 0 13px rgba(239,68,68,.13));
transform: translateZ(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.fatal-logo img,
.fatal-logo .custom-logo {
animation: none !important;
}
}
/* Section fade-in polish while scrolling */
.fatal-section,
.fatal-hero--single-product {
animation: fatal-section-enter .55s ease-out both;
}
@keyframes fatal-section-enter {
from { opacity: .88; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Features section: less awkward anchor landing */
#features {
padding-top: clamp(44px, 5vw, 72px) !important;
}
/* Refine Support/Contact top spacing further */
.page-slug-support .fatal-section:first-of-type,
.page-slug-contact .fatal-section:first-of-type {
padding-top: clamp(18px, 3vw, 34px) !important;
}
.page-slug-support .fatal-page,
.page-slug-contact .fatal-page {
padding-top: clamp(24px, 3vw, 36px) !important;
}
/* Cart final spacing tightening */
.woocommerce-cart .fatal-panel {
margin-top: 0 !important;
}
.woocommerce-cart .woocommerce {
gap: clamp(20px, 3vw, 36px) !important;
}
.woocommerce-cart .cart_totals h2 {
margin-top: 0 !important;
}
@media (max-width: 980px) {
html,
#features,
#tools,
#how-it-works,
#open-source,
.fatal-section {
scroll-margin-top: 98px !important;
scroll-padding-top: 98px !important;
}
}
/* v0.2.6 feature-anchor, active-nav, toned button glow, CAD pricing, footer refinement */
/* Features click/anchor landing: tighter, cleaner, not buried below the sticky header */
html {
scroll-padding-top: 88px !important;
}
#features,
#tools,
#how-it-works,
#open-source,
.fatal-section {
scroll-margin-top: 88px !important;
}
#features {
padding-top: clamp(18px, 2.6vw, 36px) !important;
}
#features .fatal-section__head {
margin-bottom: 20px !important;
}
#features .fatal-eyebrow {
margin-top: 0 !important;
}
/* Active nav: always show the current page/section, not Shop everywhere */
.fatal-nav a.is-active {
color: #fff !important;
text-shadow: 0 0 14px rgba(239,68,68,.42) !important;
}
.fatal-nav a.is-active::after {
opacity: .95 !important;
transform: scaleX(1) !important;
}
body:not(.woocommerce-shop):not(.post-type-archive-product):not(.single-product) .fatal-nav a[href*="shop"]:not(.is-active) {
color: inherit !important;
text-shadow: none !important;
}
body:not(.woocommerce-shop):not(.post-type-archive-product):not(.single-product) .fatal-nav a[href*="shop"]:not(.is-active)::after {
opacity: 0 !important;
transform: scaleX(.55) !important;
}
body.page-slug-support .fatal-nav a[href*="support"],
body.page-slug-contact .fatal-nav a[href*="contact"] {
color: #fff !important;
text-shadow: 0 0 14px rgba(239,68,68,.42) !important;
}
body.page-slug-support .fatal-nav a[href*="support"]::after,
body.page-slug-contact .fatal-nav a[href*="contact"]::after {
opacity: .95 !important;
transform: scaleX(1) !important;
}
/* Button glow toned down: still fancy, less bleed */
.fatal-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wpcf7 input[type="submit"]:hover {
transform: translateY(-1px) !important;
box-shadow:
0 10px 24px rgba(239,68,68,.18),
0 0 15px rgba(239,68,68,.13),
inset 0 1px 0 rgba(255,255,255,.11) !important;
}
.fatal-btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
.woocommerce input.button:hover::before,
.woocommerce #respond input#submit:hover::before,
.wpcf7 input[type="submit"]:hover::before {
opacity: .22 !important;
}
.fatal-btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce input.button:hover::after,
.woocommerce #respond input#submit:hover::after,
.wpcf7 input[type="submit"]:hover::after {
opacity: .55 !important;
}
.fatal-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wpcf7 input[type="submit"] {
box-shadow: 0 8px 20px rgba(239,68,68,.12) !important;
}
/* Price/currency display refinements */
.price,
.fatal-shop-price,
.fatal-buy-card__price,
.woocommerce-Price-amount {
white-space: nowrap;
}
.fatal-shop-price,
.fatal-buy-card__price {
letter-spacing: -.03em;
}
/* Footer: smaller, cleaner, less redundant */
.fatal-footer {
padding: 30px 0 22px !important;
}
.fatal-footer__grid {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 28px !important;
}
.fatal-footer .fatal-logo img {
height: 34px !important;
max-height: 34px !important;
max-width: 210px !important;
}
.fatal-footer p {
font-size: .9rem !important;
line-height: 1.55 !important;
max-width: 620px !important;
margin-bottom: 0 !important;
}
.fatal-footer nav {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 8px 12px !important;
max-width: 520px;
}
.fatal-footer nav a {
min-height: auto !important;
padding: 4px 0 !important;
border: 0 !important;
background: transparent !important;
font-size: .86rem !important;
color: #A1A1AA !important;
}
.fatal-footer nav a:hover {
color: var(--fatal-red) !important;
background: transparent !important;
}
.fatal-disclaimer {
font-size: .78rem !important;
color: #71717A !important;
border-top: 1px solid rgba(255,255,255,.05) !important;
padding-top: 10px !important;
margin-top: 12px !important;
}
/* Slightly smoother section reveal without making anchors feel jumpy */
.fatal-section,
.fatal-hero--single-product {
animation-duration: .32s !important;
animation-timing-function: ease-out !important;
}
@media (max-width: 980px) {
html,
#features,
#tools,
#how-it-works,
#open-source,
.fatal-section {
scroll-margin-top: 78px !important;
scroll-padding-top: 78px !important;
}
}
@media (max-width: 820px) {
.fatal-footer__grid {
grid-template-columns: 1fr !important;
}
.fatal-footer nav {
justify-content: flex-start !important;
max-width: none;
}
.fatal-footer .fatal-logo img {
height: 32px !important;
max-height: 32px !important;
}
}
/* v0.2.7 footer, payment badges, tool icons, PBS section */
.fatal-footer {
padding: 34px 0 24px !important;
}
.fatal-footer__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
text-align: center !important;
justify-items: center !important;
}
.fatal-footer .fatal-logo {
justify-content: center !important;
}
.fatal-footer .fatal-logo img {
height: 36px !important;
max-height: 36px !important;
max-width: 230px !important;
}
.fatal-footer p {
margin-left: auto !important;
margin-right: auto !important;
max-width: 760px !important;
}
.fatal-footer nav {
justify-content: center !important;
max-width: 100% !important;
gap: 10px 18px !important;
padding: 10px 0 !important;
}
.fatal-footer nav a {
font-size: .82rem !important;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 800 !important;
}
.fatal-footer__payments,
.fatal-payment-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
.fatal-footer__payments img,
.fatal-payment-row img {
height: 30px;
width: auto;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(0,0,0,.24);
}
.fatal-payment-note {
color: #8A8A93;
font-size: .82rem;
line-height: 1.5;
text-align: center;
margin-top: 10px;
}
/* Tool category icon polish */
.fatal-tool-category {
position: relative;
overflow: hidden;
}
.fatal-tool-category h3 {
display: flex;
align-items: center;
gap: 11px;
}
.fatal-tool-category h3::before {
content: attr(data-icon);
width: 38px;
height: 38px;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
border-radius: 14px;
background: rgba(239,68,68,.075);
border: 1px solid rgba(239,68,68,.23);
box-shadow: 0 0 20px rgba(239,68,68,.07);
font-size: 19px;
}
.fatal-tool-category::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(239,68,68,.42), transparent);
opacity: .65;
}
/* Proxmox Backup Server feature section */
.fatal-pbs-section {
background: transparent;
}
.fatal-pbs-card {
display: grid;
grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
gap: clamp(24px, 4vw, 46px);
align-items: center;
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(18,18,20,.86), rgba(8,8,9,.78));
padding: clamp(24px, 4vw, 44px);
box-shadow: 0 28px 90px rgba(0,0,0,.30), 0 0 38px rgba(229,112,0,.08);
}
.fatal-pbs-logo {
display: flex;
align-items: center;
justify-content: center;
}
.fatal-pbs-logo img {
width: min(100%, 360px);
height: auto;
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0,0,0,.32);
}
.fatal-pbs-card h2 {
margin: 0 0 12px;
font-size: clamp(2rem, 4.4vw, 4rem);
line-height: .96;
letter-spacing: -.055em;
}
.fatal-pbs-card p {
color: var(--fatal-soft);
max-width: 760px;
}
.fatal-pbs-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.fatal-pbs-point {
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.025);
border-radius: 14px;
padding: 12px 14px;
color: #F8FAFC;
font-weight: 800;
font-size: .92rem;
}
/* Cart/checkout payment badge strip */
.fatal-checkout-payment-strip {
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(255,255,255,.025);
padding: 16px;
margin: 18px 0;
}
.fatal-checkout-payment-strip h3 {
margin: 0 0 10px;
font-size: 1rem;
text-align: center;
}
.fatal-currency-code {
font-size: .48em;
vertical-align: .25em;
opacity: .78;
letter-spacing: .05em;
}
@media (max-width: 900px) {
.fatal-pbs-card,
.fatal-pbs-points {
grid-template-columns: 1fr;
}
.fatal-footer nav {
gap: 8px 12px !important;
}
}
@media (max-width: 560px) {
.fatal-footer__payments img,
.fatal-payment-row img {
height: 26px;
}
.fatal-tool-category h3::before {
width: 34px;
height: 34px;
font-size: 17px;
}
}
/* v0.2.8 admin-bar compatibility + cleaner footer payment logos */
#wpadminbar {
z-index: 1000000 !important;
}
.fatal-header {
z-index: 9990 !important;
}
.admin-bar .fatal-header {
top: 32px !important;
}
/* Prevent WP admin-bar dropdowns/tooltips from being hidden behind the sticky theme header */
#wpadminbar .ab-sub-wrapper,
#wpadminbar .ab-submenu,
#wpadminbar .quicklinks .menupop ul {
z-index: 1000001 !important;
}
/* Clean transparent payment logos: smaller, no white badge boxes */
.fatal-footer__payments,
.fatal-payment-row {
gap: 14px !important;
margin-top: 12px !important;
}
.fatal-footer__payments img,
.fatal-payment-row img {
height: 20px !important;
width: auto !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: .88;
filter: drop-shadow(0 0 8px rgba(239,68,68,.06));
transition: opacity .18s ease, transform .18s ease;
}
.fatal-footer__payments img:hover,
.fatal-payment-row img:hover {
opacity: 1;
transform: translateY(-1px);
}
.fatal-checkout-payment-strip .fatal-payment-row img {
height: 24px !important;
}
.fatal-payment-note {
max-width: 760px;
margin-left: auto;
margin-right: auto;
font-size: .76rem !important;
}
/* Footer: keep it centered but less tall / less cluttered */
.fatal-footer {
padding: 26px 0 20px !important;
}
.fatal-footer nav {
padding: 6px 0 !important;
gap: 8px 14px !important;
}
.fatal-footer nav a {
font-size: .76rem !important;
letter-spacing: .075em !important;
}
.fatal-footer p {
font-size: .84rem !important;
}
.fatal-disclaimer {
margin-top: 10px !important;
padding-top: 9px !important;
}
/* In public preview while maintenance mode is on, keep room below WP admin bar clean */
.admin-bar .fatal-main {
padding-top: 132px;
}
@media (max-width: 782px) {
.admin-bar .fatal-header {
top: 46px !important;
}
}
@media (max-width: 560px) {
.fatal-footer__payments img,
.fatal-payment-row img {
height: 18px !important;
}
.fatal-checkout-payment-strip .fatal-payment-row img {
height: 21px !important;
}
}
/* v0.2.9 tighter footer, higher PBS, pro product page */
.fatal-footer {
padding: 20px 0 16px !important;
}
.fatal-footer__grid {
gap: 8px !important;
}
.fatal-footer .fatal-logo img {
height: 30px !important;
max-height: 30px !important;
max-width: 190px !important;
}
.fatal-footer nav {
padding: 2px 0 !important;
gap: 6px 13px !important;
}
.fatal-footer nav a {
font-size: .72rem !important;
letter-spacing: .07em !important;
opacity: .9;
}
.fatal-footer__payments,
.fatal-payment-row {
margin-top: 5px !important;
gap: 12px !important;
}
.fatal-footer__payments img,
.fatal-payment-row img {
height: 17px !important;
opacity: .88;
}
.fatal-footer .fatal-payment-note,
.fatal-footer .fatal-footer-copy {
display: none !important;
}
.fatal-footer .fatal-disclaimer {
margin-top: 7px !important;
padding-top: 8px !important;
font-size: .72rem !important;
}
/* PBS now appears directly under hero, so keep it premium and compact */
.fatal-pbs-section {
padding-top: clamp(38px, 5vw, 66px) !important;
}
.fatal-pbs-card {
grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr) !important;
padding: clamp(22px, 3vw, 36px) !important;
}
.fatal-pbs-logo img {
width: min(100%, 310px) !important;
}
/* Single product page redesign */
.fatal-product-hero {
padding: clamp(34px, 5vw, 70px) 0 clamp(42px, 6vw, 84px);
background:
radial-gradient(circle at 72% 14%, rgba(239,68,68,.11), transparent 28rem),
radial-gradient(circle at 12% 30%, rgba(239,68,68,.055), transparent 24rem);
}
.fatal-product-shell {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
gap: clamp(28px, 4vw, 58px);
align-items: start;
}
.fatal-product-media {
position: sticky;
top: 120px;
}
.fatal-product-main-image {
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
overflow: hidden;
background: #050505;
box-shadow: 0 30px 100px rgba(0,0,0,.34), 0 0 42px rgba(239,68,68,.07);
}
.fatal-product-main-image img {
display: block;
width: 100%;
height: auto;
}
.fatal-product-thumbs {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.fatal-product-thumbs a {
display: block;
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
overflow: hidden;
background: #080808;
opacity: .72;
transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.fatal-product-thumbs a:hover {
opacity: 1;
transform: translateY(-1px);
border-color: rgba(239,68,68,.36);
}
.fatal-product-thumbs img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.fatal-product-summary {
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
background: linear-gradient(180deg, rgba(18,18,20,.88), rgba(8,8,9,.80));
box-shadow: 0 30px 100px rgba(0,0,0,.32), 0 0 42px rgba(239,68,68,.06);
padding: clamp(24px, 4vw, 42px);
}
.fatal-product-summary h1 {
margin: 8px 0 16px;
font-size: clamp(2.4rem, 5vw, 5rem);
line-height: .94;
letter-spacing: -.06em;
}
.fatal-product-summary .price {
color: var(--fatal-red) !important;
font-size: clamp(2.1rem, 3.2vw, 3rem) !important;
line-height: 1;
font-weight: 950 !important;
margin: 18px 0 !important;
}
.fatal-product-summary .woocommerce-product-details__short-description,
.fatal-product-summary .fatal-product-short {
color: var(--fatal-soft);
font-size: 1.05rem;
line-height: 1.7;
}
.fatal-product-highlights {
display: grid;
gap: 10px;
margin: 22px 0;
}
.fatal-product-highlight {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
background: rgba(255,255,255,.025);
padding: 12px 14px;
color: #F8FAFC;
font-weight: 750;
}
.fatal-product-highlight span {
color: var(--fatal-red);
text-shadow: 0 0 12px rgba(239,68,68,.35);
}
.fatal-product-summary form.cart {
display: flex !important;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-top: 22px !important;
}
.fatal-product-summary form.cart .quantity input.qty {
min-height: 48px;
border-radius: 999px;
background: #080808;
color: #fff;
border: 1px solid rgba(255,255,255,.12);
}
.fatal-product-summary form.cart .single_add_to_cart_button {
min-height: 50px;
border-radius: 999px !important;
padding: 13px 24px !important;
background: linear-gradient(135deg, var(--fatal-red), #B91C1C) !important;
color: #fff !important;
font-weight: 900 !important;
}
.fatal-product-trust-row {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin-top: 18px;
}
.fatal-product-trust-row .fatal-badge {
font-size: .78rem;
}
.fatal-product-content {
padding: 0 0 clamp(48px, 6vw, 90px);
}
.fatal-product-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.fatal-product-section-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 24px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(8,8,9,.76));
padding: clamp(22px, 3vw, 34px);
}
.fatal-product-section-card h2 {
margin: 0 0 12px;
font-size: clamp(1.9rem, 3.5vw, 3.2rem);
line-height: 1;
letter-spacing: -.045em;
}
.fatal-product-section-card p,
.fatal-product-section-card li {
color: var(--fatal-soft);
line-height: 1.72;
}
.fatal-product-detail-grid {
width: 100% !important;
margin: 0 !important;
}
.fatal-product-pbs {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
align-items: center;
}
.fatal-product-pbs img {
width: 100%;
border-radius: 16px;
box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.fatal-product-tool-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.fatal-product-tool-grid div {
border: 1px solid rgba(255,255,255,.07);
border-radius: 14px;
padding: 13px 14px;
background: rgba(255,255,255,.025);
font-weight: 800;
}
.fatal-product-tool-grid span {
color: var(--fatal-red);
margin-right: 7px;
}
@media (max-width: 980px) {
.fatal-product-shell,
.fatal-product-pbs {
grid-template-columns: 1fr;
}
.fatal-product-media {
position: relative;
top: auto;
}
.fatal-product-tool-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fatal-pbs-card {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 620px) {
.fatal-product-thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fatal-product-tool-grid {
grid-template-columns: 1fr;
}
.fatal-footer nav {
gap: 6px 10px !important;
}
}
/* v0.3.0 Privacy/Terms pages + admin cleanup notes + optional logo animation presets */
.fatal-legal-page {
max-width: 980px;
margin: 0 auto;
}
.fatal-legal-page h1 {
margin: 0 0 18px;
font-size: clamp(2.6rem, 5vw, 4.8rem);
line-height: .95;
letter-spacing: -.055em;
}
.fatal-legal-page h2 {
margin-top: 34px;
margin-bottom: 10px;
font-size: clamp(1.35rem, 2.5vw, 2rem);
}
.fatal-legal-page p,
.fatal-legal-page li {
color: var(--fatal-soft);
line-height: 1.75;
}
.fatal-legal-page .fatal-updated {
color: var(--fatal-muted);
font-size: .9rem;
margin-bottom: 26px;
}
.fatal-legal-page .fatal-legal-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(8,8,9,.74));
padding: clamp(20px, 3vw, 30px);
margin: 18px 0;
}
/* Optional logo animation ideas kept very subtle. Currently only power-on animation is active. */
.fatal-logo-animation-hover .fatal-logo img:hover {
animation: fatal-logo-red-scan .9s ease-out both;
}
@keyframes fatal-logo-red-scan {
0% { filter: drop-shadow(0 0 10px rgba(239,68,68,.12)); }
35% { filter: drop-shadow(0 0 28px rgba(239,68,68,.35)); }
100% { filter: drop-shadow(0 0 13px rgba(239,68,68,.13)); }
}
/* Keep footer legal links compact */
.fatal-footer nav a[href*="privacy"],
.fatal-footer nav a[href*="terms"] {
opacity: .72;
}
@media (max-width: 720px) {
.fatal-legal-page .fatal-legal-card {
padding: 18px;
}
}
/* v0.3.1 accuracy/copy revisions from v0.7 USB review */
.fatal-outcome-section {
background: transparent;
}
.fatal-outcome-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
}
.fatal-outcome-card {
border: 1px solid rgba(255,255,255,.08);
border-radius: 22px;
background: linear-gradient(180deg, rgba(18,18,20,.84), rgba(8,8,9,.76));
padding: clamp(20px, 3vw, 28px);
box-shadow: 0 18px 54px rgba(0,0,0,.24);
}
.fatal-outcome-card .fatal-outcome-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 16px;
background: rgba(239,68,68,.075);
border: 1px solid rgba(239,68,68,.22);
margin-bottom: 14px;
font-size: 21px;
}
.fatal-outcome-card h3 {
margin: 0 0 8px;
font-size: clamp(1.25rem, 2vw, 1.65rem);
}
.fatal-outcome-card p {
color: var(--fatal-muted);
line-height: 1.6;
margin: 0;
}
.fatal-ui-menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
margin-top: 22px;
}
.fatal-ui-menu-item {
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
background: rgba(255,255,255,.026);
padding: 14px 15px;
}
.fatal-ui-menu-item b {
display: block;
color: #fff;
margin-bottom: 4px;
}
.fatal-ui-menu-item span {
color: var(--fatal-muted);
font-size: .88rem;
line-height: 1.45;
}
.fatal-included-required {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
.fatal-info-box {
border: 1px solid rgba(255,255,255,.08);
border-radius: 22px;
padding: clamp(20px, 3vw, 28px);
background: linear-gradient(180deg, rgba(18,18,20,.84), rgba(8,8,9,.76));
}
.fatal-info-box--required {
border-color: rgba(239,68,68,.18);
background:
radial-gradient(circle at 12% 0%, rgba(239,68,68,.06), transparent 18rem),
linear-gradient(180deg, rgba(18,18,20,.84), rgba(8,8,9,.76));
}
.fatal-info-box h3 {
margin: 0 0 12px;
font-size: clamp(1.4rem, 2.4vw, 2rem);
}
.fatal-info-box ul {
margin: 0;
padding-left: 1.1rem;
}
.fatal-info-box li {
color: var(--fatal-soft);
line-height: 1.65;
margin: 7px 0;
}
.fatal-license-note {
font-size: .86rem;
color: #8A8A93;
line-height: 1.6;
margin-top: 16px;
}
.fatal-footer .fatal-license-note {
max-width: 780px;
margin-left: auto;
margin-right: auto;
font-size: .70rem;
color: #71717A;
}
.fatal-product-required-box {
margin-top: 18px;
border: 1px solid rgba(239,68,68,.18);
border-radius: 16px;
background: rgba(239,68,68,.045);
padding: 14px 15px;
color: var(--fatal-soft);
line-height: 1.55;
}
.fatal-product-required-box b {
color: #fff;
}
@media (max-width: 900px) {
.fatal-outcome-grid,
.fatal-ui-menu-grid,
.fatal-included-required {
grid-template-columns: 1fr;
}
}
/* v0.3.2 Home "What It Is" redesign */
.fatal-what-section {
position: relative;
overflow: hidden;
background: transparent;
}
.fatal-what-section .fatal-section__head {
max-width: 980px;
margin-bottom: clamp(24px, 3vw, 38px);
}
.fatal-what-section .fatal-section__head h2 {
max-width: 13ch;
}
.fatal-what-section .fatal-section__head p {
max-width: 860px;
}
.fatal-workflow-board {
display: grid;
grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr);
gap: clamp(22px, 4vw, 48px);
align-items: stretch;
margin-bottom: clamp(24px, 4vw, 44px);
}
.fatal-workflow-panel {
position: relative;
border: 1px solid rgba(255,255,255,.08);
border-radius: 28px;
background:
radial-gradient(circle at 20% 15%, rgba(239,68,68,.08), transparent 20rem),
linear-gradient(180deg, rgba(18,18,20,.90), rgba(8,8,9,.78));
box-shadow: 0 28px 90px rgba(0,0,0,.32), 0 0 36px rgba(239,68,68,.045);
padding: clamp(22px, 3vw, 34px);
overflow: hidden;
}
.fatal-workflow-panel:before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(239,68,68,.52), transparent);
}
.fatal-workflow-panel h3 {
margin: 0 0 12px;
font-size: clamp(1.45rem, 2.4vw, 2.1rem);
letter-spacing: -.035em;
}
.fatal-workflow-panel p {
color: var(--fatal-soft);
line-height: 1.7;
margin: 0;
}
.fatal-workflow-meter {
margin-top: 22px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
padding: 16px;
background: rgba(0,0,0,.22);
}
.fatal-workflow-meter__row {
display: flex;
justify-content: space-between;
gap: 14px;
color: #fff;
font-size: .82rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.fatal-workflow-meter__bar {
height: 8px;
margin-top: 10px;
border-radius: 999px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.fatal-workflow-meter__bar span {
display: block;
width: 82%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #7F1D1D, var(--fatal-red));
box-shadow: 0 0 18px rgba(239,68,68,.32);
}
.fatal-workflow-menu {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.fatal-workflow-item {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 13px;
align-items: start;
border: 1px solid rgba(255,255,255,.08);
border-radius: 20px;
background:
linear-gradient(180deg, rgba(18,18,20,.86), rgba(8,8,9,.74));
padding: clamp(15px, 2vw, 20px);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fatal-workflow-item:hover {
transform: translateY(-2px);
border-color: rgba(239,68,68,.24);
box-shadow: 0 18px 48px rgba(0,0,0,.24), 0 0 22px rgba(239,68,68,.06);
background:
radial-gradient(circle at 20% 0%, rgba(239,68,68,.06), transparent 14rem),
linear-gradient(180deg, rgba(20,20,22,.92), rgba(8,8,9,.78));
}
.fatal-workflow-item__icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 15px;
background: rgba(239,68,68,.075);
border: 1px solid rgba(239,68,68,.22);
box-shadow: 0 0 18px rgba(239,68,68,.08);
font-size: 20px;
}
.fatal-workflow-item h3 {
margin: 1px 0 6px;
font-size: 1rem;
letter-spacing: -.01em;
}
.fatal-workflow-item p {
margin: 0;
color: var(--fatal-muted);
font-size: .92rem;
line-height: 1.55;
}
.fatal-proof-strip {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}
.fatal-proof-pill {
border: 1px solid rgba(255,255,255,.08);
border-radius: 18px;
background: rgba(255,255,255,.025);
padding: 14px 16px;
color: var(--fatal-soft);
line-height: 1.5;
}
.fatal-proof-pill b {
display: block;
color: #fff;
margin-bottom: 4px;
}
#features .fatal-grid {
margin-top: 0;
}
/* Hide old menu grid if a cached/front-page copy leaves it in place */
.fatal-what-section .fatal-ui-menu-grid {
display: none !important;
}
@media (max-width: 980px) {
.fatal-workflow-board,
.fatal-workflow-menu {
grid-template-columns: 1fr;
}
.fatal-proof-strip {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.fatal-workflow-item {
grid-template-columns: 1fr;
}
.fatal-workflow-item__icon {
width: 38px;
height: 38px;
}
}
/* v0.3.3 Product page gallery + typography polish */
.fatal-product-hero {
padding-top: clamp(24px, 3.5vw, 46px) !important;
}
.fatal-product-shell {
grid-template-columns: minmax(0, 1.02fr) minmax(330px, .88fr) !important;
gap: clamp(26px, 4vw, 50px) !important;
}
.fatal-product-media {
position: sticky;
top: 112px;
}
.fatal-product-main-image {
border-radius: 24px !important;
max-height: 560px;
display: grid;
place-items: center;
}
.fatal-product-main-image img {
cursor: default !important;
max-height: 560px;
object-fit: contain;
}
.fatal-product-main-image a {
pointer-events: none;
}
.fatal-product-thumbs {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 9px !important;
}
.fatal-product-thumb-button {
display: block;
width: 100%;
padding: 0;
border: 1px solid rgba(255,255,255,.08);
border-radius: 13px;
overflow: hidden;
background: #080808;
opacity: .72;
cursor: pointer;
transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.fatal-product-thumb-button:hover,
.fatal-product-thumb-button.is-active {
opacity: 1;
transform: translateY(-1px);
border-color: rgba(239,68,68,.40);
box-shadow: 0 0 18px rgba(239,68,68,.10);
}
.fatal-product-thumb-button img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.fatal-product-summary {
padding: clamp(22px, 3vw, 34px) !important;
border-radius: 24px !important;
}
.fatal-product-summary h1 {
font-size: clamp(2.05rem, 3.8vw, 3.85rem) !important;
line-height: .98 !important;
letter-spacing: -.052em !important;
margin: 8px 0 14px !important;
max-width: 12ch;
}
.fatal-product-summary .fatal-product-short {
font-size: .98rem !important;
line-height: 1.62 !important;
}
.fatal-product-summary .price {
font-size: clamp(1.65rem, 2.6vw, 2.35rem) !important;
margin: 14px 0 16px !important;
letter-spacing: -.035em;
}
.fatal-product-summary .price .woocommerce-Price-currencySymbol {
font-size: .86em;
}
.fatal-product-summary .fatal-currency-code {
font-size: .38em !important;
letter-spacing: .12em;
vertical-align: .34em;
}
.fatal-product-highlights {
margin: 16px 0 !important;
gap: 8px !important;
}
.fatal-product-highlight {
padding: 10px 12px !important;
font-size: .91rem !important;
line-height: 1.48 !important;
}
.fatal-product-required-box {
padding: 12px 13px !important;
font-size: .88rem !important;
}
.fatal-product-trust-row {
margin-top: 14px !important;
}
.fatal-product-trust-row .fatal-badge {
font-size: .72rem !important;
padding: 7px 9px !important;
}
.fatal-product-summary .fatal-checkout-payment-strip {
margin-top: 14px !important;
padding: 13px !important;
}
.fatal-product-summary .fatal-checkout-payment-strip h3 {
font-size: .92rem !important;
}
.fatal-product-summary .fatal-payment-note {
display: none !important;
}
.fatal-product-content {
padding-top: 0 !important;
}
.fatal-product-section-card {
padding: clamp(20px, 2.5vw, 30px) !important;
}
.fatal-product-section-card h2 {
font-size: clamp(1.6rem, 2.8vw, 2.55rem) !important;
}
.fatal-product-section-card p,
.fatal-product-section-card li {
font-size: .96rem !important;
}
.fatal-product-tool-grid div {
font-size: .9rem;
}
@media (max-width: 980px) {
.fatal-product-shell {
grid-template-columns: 1fr !important;
}
.fatal-product-media {
position: relative;
top: auto;
}
.fatal-product-summary h1 {
max-width: none;
}
}
@media (max-width: 620px) {
.fatal-product-thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.fatal-product-summary h1 {
font-size: clamp(2rem, 11vw, 3rem) !important;
}
}
/* v0.3.4 Legal/support/checkout policy update */
.fatal-product-warning-box {
border-color: rgba(239,68,68,.30) !important;
background:
radial-gradient(circle at 14% 0%, rgba(239,68,68,.09), transparent 18rem),
rgba(239,68,68,.055) !important;
margin: 18px 0 16px !important;
}
.fatal-checkout-ack {
border: 1px solid rgba(239,68,68,.22);
border-radius: 16px;
background: rgba(239,68,68,.045);
padding: 14px 15px;
margin: 18px 0;
color: var(--fatal-soft);
line-height: 1.55;
}
.fatal-checkout-ack label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.fatal-checkout-ack input[type="checkbox"] {
margin-top: 4px;
accent-color: var(--fatal-red);
}
.fatal-checkout-ack strong {
color: #fff;
}
/* v0.3.5 legal page cleanup + SEO/friendly URL prep */
.fatal-legal-page > br,
.fatal-standard-page > br,
.fatal-page > br {
display: none !important;
}
.fatal-legal-page {
max-width: 920px;
}
.fatal-legal-page h1 {
margin-bottom: 10px !important;
}
.fatal-legal-page .fatal-updated {
margin-bottom: 22px !important;
}
.fatal-legal-page .fatal-legal-card {
margin: 18px 0 28px !important;
}
.fatal-legal-page h2 {
padding-top: 4px;
}
.fatal-legal-page ul {
padding-left: 1.15rem;
}
.fatal-legal-page li {
margin: 8px 0;
}
/* v0.3.6 What It Is title formatting + safe URL recovery */
.fatal-what-section .fatal-section__head {
max-width: 1040px !important;
}
.fatal-what-section .fatal-section__head h2 {
max-width: 760px !important;
font-size: clamp(2rem, 3.8vw, 3.6rem) !important;
line-height: .98 !important;
letter-spacing: -.058em !important;
text-wrap: balance;
}
.fatal-what-section .fatal-section__head p {
max-width: 920px !important;
font-size: clamp(1rem, 1.55vw, 1.18rem) !important;
line-height: 1.72 !important;
}
.fatal-workflow-board {
align-items: stretch !important;
}
.fatal-workflow-panel h3 {
max-width: 12ch;
font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
line-height: 1.08 !important;
}
.fatal-workflow-item h3 {
font-size: 1.05rem !important;
}
.fatal-workflow-item p {
font-size: .94rem !important;
}
/* Small admin-facing notice styling when visible */
.fatal-rewrite-admin-note {
border-left-color: #ef4444 !important;
}
.fatal-rewrite-admin-note code {
background: #111;
color: #fff;
}
@media (max-width: 760px) {
.fatal-what-section .fatal-section__head h2 {
max-width: 12ch !important;
font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
}
}
/* v0.3.7 support cleanup + softer footer */
.fatal-standard-page > br,
.fatal-page-card > br,
.fatal-page-grid > br {
display: none !important;
}
.fatal-footer .fatal-disclaimer {
max-width: 760px !important;
font-size: .72rem !important;
opacity: .78;
}
/* v0.3.8: refined Proxmox section / First Edition wording */
.fatal-pbs-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 22px;
}
.fatal-pbs-point {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 76px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(239,68,68,.18);
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.20);
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.fatal-pbs-point:hover {
transform: translateY(-2px);
border-color: rgba(239,68,68,.34);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 34px rgba(239,68,68,.10);
background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(255,255,255,.03));
}
.fatal-pbs-point__icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: radial-gradient(circle at 30% 30%, rgba(239,68,68,.34), rgba(239,68,68,.10));
border: 1px solid rgba(239,68,68,.26);
color: #fff;
font-size: 1.05rem;
box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 8px 20px rgba(239,68,68,.10);
}
.fatal-pbs-point__copy {
display: flex;
flex-direction: column;
gap: 3px;
}
.fatal-pbs-point__title {
color: #F8FAFC;
font-weight: 800;
font-size: .98rem;
line-height: 1.1;
}
.fatal-pbs-point__sub {
color: var(--fatal-muted);
font-size: .82rem;
line-height: 1.25;
}
.fatal-section__head--compact {
max-width: 920px;
}
.fatal-section__head--compact h2 {
max-width: 12.5ch;
margin-bottom: 14px;
line-height: .96;
}
.fatal-section__head--compact p {
max-width: 880px;
font-size: 1.05rem;
line-height: 1.7;
}
@media (max-width: 900px) {
.fatal-pbs-points { grid-template-columns: 1fr; }
.fatal-section__head--compact h2 { max-width: 100%; }
}
/* v0.3.9: remove heavy checkout-expectations section, tighten flow */
#included-required {
display: none !important;
}
.fatal-pbs-section {
padding-bottom: clamp(34px, 5vw, 66px) !important;
}
/* v0.4.0 hero/shop refinement */
.fatal-hero__headline {
display: flex;
flex-direction: column;
gap: .08em;
}
.fatal-hero__headline-line {
display:block;
}
.fatal-hero__headline-line--accent {
color: #F4F4F5;
}
.fatal-hero__content .fatal-eyebrow {
margin-bottom: 10px !important;
}
.fatal-hero h1 {
max-width: 11ch !important;
margin-bottom: 20px !important;
}
.fatal-hero__lead {
max-width: 760px !important;
line-height: 1.75 !important;
}
.fatal-hero__lead strong {
color: #fff;
font-weight: 800;
}
.fatal-shop-hero h1 {
font-size: clamp(2.15rem, 4.5vw, 4.2rem);
max-width: 12ch;
}
.fatal-shop-showcase__content h2 {
font-size: clamp(1.8rem, 3.4vw, 3.2rem);
max-width: 11ch;
}
.fatal-shop-showcase__content p {
max-width: 60ch;
line-height: 1.75;
}
.fatal-shop-price {
font-size: 1.9rem;
}
.fatal-shop-showcase__image {
align-self: center;
}
.fatal-shop-showcase__image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
@media (max-width: 860px) {
.fatal-hero h1 {
max-width: 100% !important;
}
.fatal-shop-hero h1,
.fatal-shop-showcase__content h2 {
max-width: 100%;
}
}
/* v0.4.1 premium visual update */
.fatal-hero--single-product {
padding-top: clamp(28px, 4vw, 56px);
}
.fatal-hero__grid {
align-items: center;
gap: clamp(28px, 4vw, 52px);
}
.fatal-buy-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(18,18,22,.98), rgba(10,10,12,.96));
}
.fatal-buy-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 78% 22%, rgba(239,68,68,.2), transparent 38%);
pointer-events: none;
}
.fatal-buy-card__image img {
object-fit: cover;
}
.fatal-visual-banner-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(239,68,68,.22);
border-radius: 26px;
background: linear-gradient(180deg, rgba(16,16,20,.98), rgba(8,8,10,.98));
box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 38px rgba(239,68,68,.08);
}
.fatal-visual-banner-card img {
display:block;
width:100%;
height:auto;
}
.fatal-visual-banner-card + .fatal-visual-banner-card {
margin-top: 26px;
}
.fatal-pbs-card {
grid-template-columns: minmax(260px, 420px) 1fr;
gap: clamp(22px, 4vw, 44px);
align-items: center;
}
.fatal-pbs-card--visual .fatal-pbs-visual,
.fatal-tools-visual,
.fatal-kit-visual {
overflow:hidden;
border-radius: 24px;
border:1px solid rgba(239,68,68,.22);
background: rgba(10,10,12,.88);
box-shadow: 0 18px 54px rgba(0,0,0,.32), 0 0 32px rgba(239,68,68,.06);
}
.fatal-pbs-card--visual .fatal-pbs-visual img,
.fatal-tools-visual img,
.fatal-kit-visual img {
display:block;
width:100%;
height:auto;
}
.fatal-kit-grid {
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(22px, 4vw, 42px);
align-items: center;
}
.fatal-kit-copy {
background: linear-gradient(180deg, rgba(15,15,18,.96), rgba(9,9,11,.96));
border:1px solid rgba(239,68,68,.18);
border-radius: 24px;
padding: clamp(24px, 3vw, 34px);
box-shadow: 0 16px 44px rgba(0,0,0,.28);
}
.fatal-kit-copy ul {
margin: 16px 0 0;
padding-left: 0;
list-style: none;
display:grid;
gap: 12px;
}
.fatal-kit-copy li {
position: relative;
padding-left: 24px;
color: var(--fatal-soft);
}
.fatal-kit-copy li::before {
content:'✓';
position:absolute;
left:0;
top:0;
color: var(--fatal-red);
font-weight: 800;
}
.fatal-shop-hero h1 {
max-width: none;
}
.fatal-shop-showcase__content h2 {
max-width: 14ch;
font-size: clamp(1.6rem, 3vw, 2.8rem);
line-height: 1.02;
}
.single-product .fatal-product-summary h1 {
font-size: clamp(2rem, 3.3vw, 3.35rem);
line-height: .98;
max-width: 11ch;
}
.single-product .fatal-product-summary .price {
font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}
.single-product .fatal-product-short {
font-size: 1.02rem;
line-height: 1.72;
}
.single-product .fatal-product-highlights {
gap: 14px;
}
.single-product .fatal-product-highlight {
font-size: .98rem;
}
@media (max-width: 960px) {
.fatal-pbs-card,
.fatal-kit-grid {
grid-template-columns: 1fr;
}
}
/* v0.4.2 premium image-led homepage */
.fatal-hero--premium-image {
padding: clamp(18px, 2.4vw, 34px) 0 clamp(32px, 5vw, 70px);
}
.fatal-hero-image-card {
position: relative;
width: min(1540px, calc(100vw - 42px));
margin: 0 auto;
border: 1px solid rgba(239,68,68,.22);
border-radius: 28px;
overflow: hidden;
background: #050505;
box-shadow: 0 30px 96px rgba(0,0,0,.48), 0 0 44px rgba(239,68,68,.07);
}
.fatal-hero-image-card img {
display: block;
width: 100%;
height: auto;
}
.fatal-hero-hotspots {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.fatal-hero-hotspots a {
pointer-events: auto;
position: absolute;
display: block;
border-radius: 14px;
text-indent: -9999px;
overflow: hidden;
transition: box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.fatal-hero-hotspots a:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 0 28px rgba(239,68,68,.42);
background: rgba(239,68,68,.06);
}
/* Coordinates match the embedded buttons in the cropped hero image */
.fatal-hero-hotspot-buy {
left: 3.0%;
top: 61.5%;
width: 15.4%;
height: 8.3%;
}
.fatal-hero-hotspot-features {
left: 20.4%;
top: 61.5%;
width: 14.4%;
height: 8.3%;
}
.fatal-hero-accessible-copy {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.fatal-section--visual-only .fatal-visual-banner-card {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.fatal-visual-banner-card--pbs,
.fatal-visual-banner-card--box {
border-color: rgba(239,68,68,.22);
box-shadow: 0 24px 72px rgba(0,0,0,.36), 0 0 42px rgba(239,68,68,.08);
}
@media (max-width: 760px) {
.fatal-hero-image-card {
width: min(100%, calc(100vw - 20px));
border-radius: 18px;
}
.fatal-hero-hotspots a {
border-radius: 9px;
}
.fatal-hero-hotspot-buy {
left: 3.0%;
top: 61.0%;
width: 16.5%;
height: 8.5%;
}
.fatal-hero-hotspot-features {
left: 20.0%;
top: 61.0%;
width: 15.7%;
height: 8.5%;
}
}
/* v0.4.3 improved premium hero */
.fatal-hero--cinematic {
padding: 8px 0 34px;
}
.fatal-hero-cinematic {
width: min(1560px, calc(100vw - 32px));
margin: 0 auto;
}
.fatal-hero-cinematic__desktop {
position: relative;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(239,68,68,.24);
background: #050505;
box-shadow: 0 26px 88px rgba(0,0,0,.50), 0 0 42px rgba(239,68,68,.08);
}
.fatal-hero-cinematic__desktop img,
.fatal-hero-cinematic__mobile-visual img {
display: block;
width: 100%;
height: auto;
}
.fatal-hero-cinematic__overlay {
position: absolute;
left: 48px;
bottom: 34px;
width: min(47%, 680px);
display: flex;
flex-direction: column;
gap: 22px;
z-index: 3;
}
.fatal-hero-cinematic__actions {
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
}
.fatal-hero-cinematic__actions .fatal-btn {
min-width: 190px;
justify-content: center;
}
.fatal-hero-cinematic__actions .fatal-btn--ghost {
background: rgba(6,6,8,.82);
}
.fatal-hero-cinematic__chips {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.fatal-hero-cinematic__chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
border-radius: 999px;
border: 1px solid rgba(239,68,68,.22);
background: rgba(8,10,14,.88);
color: #f4f4f5;
font-size: 15px;
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.fatal-hero-cinematic__chip span:first-child { color: #ef4444; }
.fatal-hero-cinematic__mobile { display: none; }
.fatal-hero-cinematic__copy { max-width: 720px; margin: 20px auto 0; }
.fatal-hero-cinematic__eyebrow {
color: #ef4444;
text-transform: uppercase;
letter-spacing: .18em;
font-size: 12px;
font-weight: 800;
margin-bottom: 10px;
}
.fatal-hero-cinematic__title {
font-size: clamp(46px, 7vw, 88px);
line-height: .95;
margin: 0 0 16px;
color: #f8fafc;
}
.fatal-hero-cinematic__text {
font-size: clamp(18px, 2vw, 22px);
line-height: 1.65;
color: #d4d4d8;
max-width: 700px;
}
@media (max-width: 1150px) {
.fatal-hero-cinematic__overlay {
left: 34px;
bottom: 26px;
width: min(53%, 620px);
gap: 16px;
}
.fatal-hero-cinematic__actions .fatal-btn { min-width: 168px; }
.fatal-hero-cinematic__chip { padding: 11px 15px; font-size: 14px; }
}
@media (max-width: 880px) {
.fatal-hero-cinematic {
width: min(100%, calc(100vw - 18px));
}
.fatal-hero-cinematic__desktop { display: none; }
.fatal-hero-cinematic__mobile {
display: block;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(239,68,68,.20);
background: linear-gradient(180deg, rgba(12,12,14,.95) 0%, rgba(7,7,9,.98) 100%);
box-shadow: 0 20px 56px rgba(0,0,0,.42);
}
.fatal-hero-cinematic__mobile-visual {
border-bottom: 1px solid rgba(239,68,68,.14);
background: #050505;
}
.fatal-hero-cinematic__mobile-copy {
padding: 22px 16px 18px;
}
.fatal-hero-cinematic__title {
font-size: clamp(36px, 12vw, 58px);
line-height: .95;
}
.fatal-hero-cinematic__text { font-size: 16px; line-height: 1.6; }
.fatal-hero-cinematic__actions { gap: 12px; }
.fatal-hero-cinematic__actions .fatal-btn {
flex: 1 1 100%;
min-width: 0;
}
.fatal-hero-cinematic__chips { gap: 10px; }
.fatal-hero-cinematic__chip {
width: calc(50% - 5px);
justify-content: center;
text-align: center;
font-size: 13px;
padding: 10px 12px;
}
}
@media (max-width: 520px) {
.fatal-hero--cinematic { padding-top: 4px; }
.fatal-hero-cinematic__mobile-copy { padding: 18px 14px 16px; }
.fatal-hero-cinematic__chip { width: 100%; }
}
/* v0.4.4 corrected hero using approved screenshot-2 crop */
.fatal-hero--cleanvisual {
padding: 8px 0 28px;
}
.fatal-hero-clean {
width: min(1570px, calc(100vw - 24px));
margin: 0 auto;
}
.fatal-hero-clean__desktop {
position: relative;
border-radius: 24px;
overflow: hidden;
background: #050505;
box-shadow: 0 28px 72px rgba(0,0,0,.46), 0 0 30px rgba(239,68,68,.07);
}
.fatal-hero-clean__desktop img,
.fatal-hero-clean__mobile-visual img {
display: block;
width: 100%;
height: auto;
}
.fatal-hero-clean__hotspot {
position: absolute;
display: block;
border-radius: 20px;
background: transparent;
z-index: 5;
}
.fatal-hero-clean__hotspot:focus-visible {
outline: 2px solid rgba(255,255,255,.95);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(239,68,68,.5);
}
.fatal-hero-clean__hotspot--buy {
left: 2.0%;
top: 63.5%;
width: 14.6%;
height: 9.2%;
}
.fatal-hero-clean__hotspot--features {
left: 18.6%;
top: 63.5%;
width: 16.2%;
height: 9.2%;
}
.fatal-hero-clean__mobile { display: none; }
.fatal-hero-clean__eyebrow {
color: #ef4444;
text-transform: uppercase;
letter-spacing: .18em;
font-size: 12px;
font-weight: 800;
margin-bottom: 10px;
}
.fatal-hero-clean__title {
font-size: clamp(34px, 10vw, 56px);
line-height: .94;
margin: 0 0 16px;
color: #f8fafc;
}
.fatal-hero-clean__text {
font-size: 16px;
line-height: 1.65;
color: #d4d4d8;
}
.fatal-hero-clean__actions {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 18px;
}
.fatal-hero-clean__actions .fatal-btn {
flex: 1 1 100%;
min-width: 0;
justify-content: center;
}
.fatal-hero-clean__actions .fatal-btn--ghost {
background: rgba(6,6,8,.82);
}
.fatal-hero-clean__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.fatal-hero-clean__chip {
width: calc(50% - 5px);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
border: 1px solid rgba(239,68,68,.22);
background: rgba(8,10,14,.88);
color: #f4f4f5;
font-size: 13px;
font-weight: 600;
text-align: center;
}
.fatal-hero-clean__chip span:first-child { color: #ef4444; }
@media (max-width: 899px) {
.fatal-hero-clean {
width: min(100%, calc(100vw - 18px));
}
.fatal-hero-clean__desktop { display: none; }
.fatal-hero-clean__mobile {
display: block;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(239,68,68,.20);
background: linear-gradient(180deg, rgba(12,12,14,.96) 0%, rgba(6,6,8,.98) 100%);
box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
.fatal-hero-clean__mobile-visual {
background: #050505;
border-bottom: 1px solid rgba(239,68,68,.14);
}
.fatal-hero-clean__mobile-copy {
padding: 20px 16px 16px;
}
}
@media (max-width: 520px) {
.fatal-hero--cleanvisual { padding-top: 4px; }
.fatal-hero-clean__chip { width: 100%; }
.fatal-hero-clean__mobile-copy { padding: 18px 14px 16px; }
}
/* v0.4.5 hero corrections */
.fatal-hero--cleanvisual {
padding: 0 0 28px !important;
margin-top: -6px;
}
.fatal-hero-clean {
width: min(1680px, calc(100vw - 20px));
}
.fatal-hero-clean__desktop {
border-radius: 22px;
border: 1px solid rgba(239,68,68,.12);
}
.fatal-hero-clean__hotspot {
cursor: pointer;
z-index: 8;
}
.fatal-hero-clean__hotspot::before,
.fatal-hero-clean__hotspot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
opacity: 0;
pointer-events: none;
}
.fatal-hero-clean__hotspot::before {
border: 1px solid rgba(255,255,255,.18);
}
.fatal-hero-clean__hotspot--buy { left: 1.95%; top: 63.45%; width: 15.25%; height: 9.35%; }
.fatal-hero-clean__hotspot--features { left: 18.55%; top: 63.45%; width: 16.0%; height: 9.35%; }
.fatal-hero-clean__hotspot--buy::before {
background: linear-gradient(180deg, rgba(255,80,80,.10) 0%, rgba(239,68,68,.24) 100%);
box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.fatal-hero-clean__hotspot--buy::after {
inset: -4px;
border-radius: 22px;
box-shadow: 0 0 26px rgba(239,68,68,.48), 0 8px 22px rgba(239,68,68,.18);
}
.fatal-hero-clean__hotspot--features::before {
background: linear-gradient(180deg, rgba(10,10,14,.12) 0%, rgba(10,10,14,.28) 100%);
border-color: rgba(239,68,68,.22);
box-shadow: 0 0 0 1px rgba(239,68,68,.18) inset;
}
.fatal-hero-clean__hotspot--features::after {
inset: -3px;
border-radius: 22px;
box-shadow: 0 0 18px rgba(239,68,68,.24), 0 6px 18px rgba(0,0,0,.22);
}
.fatal-hero-clean__hotspot:hover::before,
.fatal-hero-clean__hotspot:hover::after,
.fatal-hero-clean__hotspot:focus-visible::before,
.fatal-hero-clean__hotspot:focus-visible::after {
opacity: 1;
transform: translateY(-1px) scale(1.01);
}
@media (max-width: 1280px) {
.fatal-hero-clean { width: min(100%, calc(100vw - 14px)); }
}
@media (max-width: 899px) {
.fatal-hero--cleanvisual {
margin-top: 0;
padding-top: 2px !important;
}
.fatal-hero-clean {
width: min(100%, calc(100vw - 12px));
}
.fatal-hero-clean__mobile-copy {
padding: 20px 16px 18px;
}
.fatal-hero-clean__actions .fatal-btn {
flex: 1 1 calc(50% - 6px);
min-width: 140px;
}
}
@media (max-width: 520px) {
.fatal-hero-clean__actions { gap: 10px; }
.fatal-hero-clean__actions .fatal-btn { flex-basis: 100%; }
}
/* v0.4.6 stable theme folder + corrected SEO-friendly premium hero */
.fatal-hero-seo-copy {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.fatal-hero--cleanvisual {
padding: 0 0 28px !important;
margin-top: -18px !important;
}
.fatal-hero-clean {
width: min(1802px, calc(100vw - 18px)) !important;
}
.fatal-hero-clean__desktop {
border-radius: 20px !important;
border: 1px solid rgba(239,68,68,.10) !important;
box-shadow: 0 20px 62px rgba(0,0,0,.42), 0 0 26px rgba(239,68,68,.06) !important;
}
.fatal-hero-clean__desktop img {
width: 100% !important;
height: auto !important;
}
.fatal-hero-clean__hotspot {
cursor: pointer;
z-index: 10;
border-radius: 18px;
}
/* Corrected to match the actual embedded buttons in the updated crop */
.fatal-hero-clean__hotspot--buy {
left: 3.05% !important;
top: 60.95% !important;
width: 14.18% !important;
height: 9.35% !important;
}
.fatal-hero-clean__hotspot--features {
left: 19.05% !important;
top: 60.95% !important;
width: 13.65% !important;
height: 9.35% !important;
}
.fatal-hero-clean__hotspot::before,
.fatal-hero-clean__hotspot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
opacity: 0;
pointer-events: none;
transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.fatal-hero-clean__hotspot--buy::before {
background: linear-gradient(180deg, rgba(255,80,80,.10), rgba(239,68,68,.22));
border: 1px solid rgba(255,255,255,.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.fatal-hero-clean__hotspot--buy::after {
inset: -4px;
border-radius: 23px;
box-shadow: 0 0 28px rgba(239,68,68,.54), 0 10px 28px rgba(239,68,68,.18);
}
.fatal-hero-clean__hotspot--features::before {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(239,68,68,.08));
border: 1px solid rgba(239,68,68,.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.fatal-hero-clean__hotspot--features::after {
inset: -3px;
border-radius: 22px;
box-shadow: 0 0 22px rgba(239,68,68,.32), 0 8px 20px rgba(0,0,0,.22);
}
.fatal-hero-clean__hotspot:hover::before,
.fatal-hero-clean__hotspot:hover::after,
.fatal-hero-clean__hotspot:focus-visible::before,
.fatal-hero-clean__hotspot:focus-visible::after {
opacity: 1;
transform: translateY(-1px) scale(1.008);
}
.site-nav a[href*="shop"],
.fatal-nav a[href*="shop"],
.fatal-header a[href*="shop"] {
position: relative;
}
.site-nav a[href*="shop"]:hover::after,
.fatal-nav a[href*="shop"]:hover::after,
.fatal-header a[href*="shop"]:hover::after,
body.woocommerce-shop .site-nav a[href*="shop"]::after,
body.woocommerce-shop .fatal-nav a[href*="shop"]::after,
body.woocommerce-shop .fatal-header a[href*="shop"]::after,
body.post-type-archive-product .site-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-header a[href*="shop"]::after,
body.single-product .site-nav a[href*="shop"]::after,
body.single-product .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-header a[href*="shop"]::after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
width: 24px;
height: 2px;
border-radius: 999px;
background: #ef4444;
transform: translateX(-50%);
box-shadow: 0 0 14px rgba(239,68,68,.8), 0 0 28px rgba(239,68,68,.28);
}
@media (max-width: 899px) {
.fatal-hero--cleanvisual {
padding-top: 2px !important;
margin-top: 0 !important;
}
.fatal-hero-clean {
width: min(100%, calc(100vw - 12px)) !important;
}
}
/* v0.4.7 rebuilt premium split hero: coded left, visual right */
.fatal-hero--split {
padding: 4px 0 28px;
}
.fatal-hero-split {
width: min(1660px, calc(100vw - 22px));
margin: 0 auto;
}
.fatal-hero-split__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
gap: 22px;
align-items: center;
overflow: hidden;
padding: 18px 34px 26px;
border-radius: 26px;
border: 1px solid rgba(239,68,68,.12);
background:
radial-gradient(900px 420px at 84% 28%, rgba(140,0,0,.18), rgba(140,0,0,0) 60%),
linear-gradient(180deg, rgba(8,8,10,.98) 0%, rgba(5,5,7,.995) 100%);
box-shadow: 0 22px 72px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.02);
}
.fatal-hero-split__grid::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.015), rgba(255,255,255,0) 35%);
pointer-events: none;
}
.fatal-hero-split__copy {
position: relative;
z-index: 2;
max-width: 720px;
padding: 24px 6px 12px 8px;
}
.fatal-hero-split__eyebrow {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid rgba(239,68,68,.32);
background: rgba(10,10,12,.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(239,68,68,.04);
margin-bottom: 18px;
}
.fatal-hero-split__title {
margin: 0 0 18px;
font-size: clamp(54px, 7.2vw, 94px);
line-height: .92;
letter-spacing: -.04em;
color: #fafafa;
text-wrap: balance;
}
.fatal-hero-split__text {
margin: 0;
max-width: 760px;
color: #d4d4d8;
font-size: clamp(19px, 1.55vw, 29px);
line-height: 1.58;
}
.fatal-hero-split__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 200px;
justify-content: center;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(8,10,14,.90);
}
.fatal-hero-split__chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.fatal-hero-split__chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 999px;
border: 1px solid rgba(239,68,68,.22);
background: rgba(9,10,12,.86);
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
color: #f4f4f5;
font-size: 15px;
font-weight: 600;
}
.fatal-hero-split__chip-icon {
color: #ef4444;
font-size: 16px;
line-height: 1;
}
.fatal-hero-split__visual {
position: relative;
z-index: 1;
min-height: 660px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 12px 0 0;
}
.fatal-hero-split__visual::before {
content: "";
position: absolute;
inset: 5% 0 8% 12%;
border-radius: 34px;
background: radial-gradient(circle at 58% 32%, rgba(239,68,68,.12), rgba(239,68,68,0) 54%);
filter: blur(18px);
pointer-events: none;
}
.fatal-hero-split__visual::after {
content: "";
position: absolute;
left: 0;
top: 2%;
bottom: 4%;
width: 96px;
background: linear-gradient(90deg, rgba(5,5,7,1), rgba(5,5,7,.82) 42%, rgba(5,5,7,0) 100%);
pointer-events: none;
z-index: 2;
}
.fatal-hero-split__image {
position: relative;
z-index: 1;
display: block;
width: min(100%, 920px);
height: auto;
filter: drop-shadow(0 18px 44px rgba(0,0,0,.34));
}
.fatal-hero-split__image--mobile {
display: none;
}
@media (max-width: 1320px) {
.fatal-hero-split__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
padding: 16px 24px 24px;
gap: 16px;
}
.fatal-hero-split__title { font-size: clamp(48px, 6vw, 76px); }
.fatal-hero-split__text { font-size: clamp(17px, 1.45vw, 22px); }
.fatal-hero-split__visual { min-height: 560px; }
}
@media (max-width: 980px) {
.fatal-hero--split { padding-top: 4px; }
.fatal-hero-split {
width: min(100%, calc(100vw - 16px));
}
.fatal-hero-split__grid {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 14px 18px;
border-radius: 22px;
}
.fatal-hero-split__visual {
order: -1;
min-height: 0;
padding: 10px 0 4px;
}
.fatal-hero-split__visual::after {
display: none;
}
.fatal-hero-split__image--desktop {
display: none;
}
.fatal-hero-split__image--mobile {
display: block;
width: 100%;
max-width: none;
}
.fatal-hero-split__copy {
padding: 6px 2px 4px;
max-width: none;
}
.fatal-hero-split__title {
font-size: clamp(40px, 12vw, 64px);
line-height: .94;
margin-bottom: 14px;
}
.fatal-hero-split__text {
font-size: 17px;
line-height: 1.58;
}
.fatal-hero-split__actions {
gap: 12px;
margin-top: 20px;
}
.fatal-hero-split__actions .fatal-btn {
flex: 1 1 calc(50% - 6px);
min-width: 0;
}
.fatal-hero-split__chips {
gap: 10px;
margin-top: 16px;
}
.fatal-hero-split__chip {
width: calc(50% - 5px);
justify-content: center;
padding: 11px 10px;
font-size: 13px;
text-align: center;
}
}
@media (max-width: 620px) {
.fatal-hero-split__eyebrow {
font-size: 11px;
letter-spacing: .16em;
padding: 8px 14px;
margin-bottom: 14px;
}
.fatal-hero-split__actions .fatal-btn {
flex-basis: 100%;
}
.fatal-hero-split__chip {
width: 100%;
}
}
/* v0.4.8 premium hero polish */
.home .fatal-main {
padding-top: 98px !important;
}
.admin-bar.home .fatal-main {
padding-top: 130px !important;
}
.fatal-header .fatal-nav > a,
.fatal-header .fatal-nav .menu-item > a,
.fatal-header .fatal-nav .current-menu-item > a,
.fatal-header .fatal-nav .current_page_item > a {
position: relative;
}
.fatal-header .fatal-nav > a::after,
.fatal-header .fatal-nav .menu-item > a::after {
content: "";
position: absolute;
left: 50%;
bottom: -11px;
width: 24px;
height: 2px;
border-radius: 999px;
background: #ef4444;
box-shadow: 0 0 14px rgba(239,68,68,.82), 0 0 28px rgba(239,68,68,.28);
transform: translateX(-50%) scaleX(.58);
transform-origin: center;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
.fatal-header .fatal-nav > a:hover::after,
.fatal-header .fatal-nav .menu-item > a:hover::after,
.fatal-header .fatal-nav > a:focus-visible::after,
.fatal-header .fatal-nav .menu-item > a:focus-visible::after,
.home .fatal-header .fatal-nav > a[href="/"]::after,
.home .fatal-header .fatal-nav > a[href*="home"]::after,
body.woocommerce-shop .fatal-header .fatal-nav > a[href*="shop"]::after,
body.post-type-archive-product .fatal-header .fatal-nav > a[href*="shop"]::after,
body.single-product .fatal-header .fatal-nav > a[href*="shop"]::after,
body.woocommerce-shop .fatal-header .fatal-nav .current-menu-item > a::after,
body.post-type-archive-product .fatal-header .fatal-nav .current-menu-item > a::after,
body.single-product .fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current_page_item > a::after {
opacity: 1;
transform: translateX(-50%) scaleX(1);
}
.fatal-hero--split {
padding: 0 0 22px !important;
}
.fatal-hero-split {
width: min(1680px, calc(100vw - 16px));
}
.fatal-hero-split__grid {
gap: 18px;
padding: 10px 34px 22px;
border-radius: 28px;
border: 1px solid rgba(239,68,68,.08);
background:
radial-gradient(860px 420px at 80% 26%, rgba(180,18,18,.12), rgba(180,18,18,0) 58%),
radial-gradient(900px 520px at 24% 82%, rgba(75,7,7,.08), rgba(75,7,7,0) 52%),
linear-gradient(180deg, rgba(7,7,9,.965) 0%, rgba(4,4,6,.985) 100%);
box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
}
.fatal-hero-split__grid::before {
background: linear-gradient(90deg, rgba(255,255,255,.012), rgba(255,255,255,0) 32%);
}
.fatal-hero-split__copy {
padding: 18px 4px 8px 6px;
max-width: 700px;
}
.fatal-hero-split__eyebrow {
margin-bottom: 14px;
}
.fatal-hero-split__title {
font-size: clamp(60px, 6.2vw, 92px);
line-height: .93;
margin: 0 0 16px;
}
.fatal-hero-split__text {
max-width: 680px;
font-size: clamp(18px, 1.22vw, 23px);
line-height: 1.58;
}
.fatal-hero-split__actions {
align-items: center;
gap: 14px;
margin-top: 24px;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 196px;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(8,10,14,.78) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.fatal-hero-split__actions .fatal-btn--ghost:not(:hover):not(:focus-visible) {
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.fatal-hero-split__chips {
gap: 10px;
margin-top: 20px;
}
.fatal-hero-split__chip {
padding: 13px 17px;
background: rgba(9,10,12,.78);
border-color: rgba(239,68,68,.18);
}
.fatal-hero-split__visual {
min-height: 620px;
justify-content: center;
align-items: center;
padding: 0 0 0 12px;
}
.fatal-hero-split__visual::before {
inset: 8% 4% 10% 10%;
background: radial-gradient(circle at 58% 36%, rgba(239,68,68,.16), rgba(239,68,68,0) 58%);
filter: blur(28px);
}
.fatal-hero-split__visual::after {
left: -2%;
top: 4%;
bottom: 4%;
width: 92px;
background: linear-gradient(90deg, rgba(5,5,7,.98) 0%, rgba(5,5,7,.72) 42%, rgba(5,5,7,0) 100%);
}
.fatal-hero-split__image {
width: min(100%, 820px);
max-width: 820px;
transform: translateX(-8px);
filter: drop-shadow(0 24px 42px rgba(0,0,0,.28));
mix-blend-mode: lighten;
opacity: .985;
}
@media (max-width: 1320px) {
.fatal-hero-split {
width: min(100%, calc(100vw - 14px));
}
.fatal-hero-split__grid {
padding: 8px 24px 20px;
grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
}
.fatal-hero-split__title { font-size: clamp(52px, 5.4vw, 78px); }
.fatal-hero-split__text { font-size: clamp(17px, 1.2vw, 20px); }
.fatal-hero-split__visual { min-height: 540px; }
.fatal-hero-split__image { width: min(100%, 720px); max-width: 720px; }
}
@media (max-width: 980px) {
.home .fatal-main {
padding-top: 90px !important;
}
.admin-bar.home .fatal-main {
padding-top: 122px !important;
}
.fatal-hero--split {
padding-bottom: 18px !important;
}
.fatal-hero-split {
width: min(100%, calc(100vw - 10px));
}
.fatal-hero-split__grid {
grid-template-columns: 1fr;
gap: 2px;
padding: 10px 12px 16px;
border-radius: 22px;
}
.fatal-hero-split__visual {
order: -1;
min-height: 0;
padding: 6px 0 2px;
}
.fatal-hero-split__visual::before {
inset: 3% 0 10% 0;
}
.fatal-hero-split__image {
transform: none;
width: 100%;
max-width: none;
}
.fatal-hero-split__copy {
padding: 8px 2px 4px;
}
.fatal-hero-split__title {
font-size: clamp(40px, 12vw, 62px);
margin-bottom: 12px;
}
.fatal-hero-split__text {
font-size: 16px;
}
.fatal-hero-split__actions {
gap: 12px;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 0;
flex: 1 1 calc(50% - 6px);
}
}
@media (max-width: 620px) {
.home .fatal-main {
padding-top: 84px !important;
}
.admin-bar.home .fatal-main {
padding-top: 116px !important;
}
.fatal-hero-split__actions .fatal-btn {
flex-basis: 100%;
}
}
/* v0.4.9 premium hero: coded left text/buttons + clean product-only visual */
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-hero--split {
padding: 0 0 22px !important;
margin-top: -14px !important;
}
.fatal-hero-split {
width: min(1700px, calc(100vw - 14px)) !important;
}
.fatal-hero-split__grid {
border: 0 !important;
border-radius: 0 !important;
padding: 4px 28px 18px !important;
gap: clamp(12px, 2vw, 32px) !important;
background:
radial-gradient(900px 480px at 78% 30%, rgba(239,68,68,.13), rgba(239,68,68,0) 58%),
radial-gradient(760px 380px at 18% 70%, rgba(239,68,68,.055), rgba(239,68,68,0) 60%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before {
display: none !important;
}
.fatal-hero-split__copy {
padding: 18px 0 8px 0 !important;
max-width: 745px !important;
}
.fatal-hero-split__eyebrow {
margin-bottom: 16px !important;
background: rgba(7,7,9,.58) !important;
border-color: rgba(239,68,68,.28) !important;
}
.fatal-hero-split__title {
font-size: clamp(58px, 6vw, 92px) !important;
line-height: .92 !important;
margin-bottom: 18px !important;
letter-spacing: -.045em !important;
}
.fatal-hero-split__text {
max-width: 735px !important;
font-size: clamp(18px, 1.18vw, 22px) !important;
line-height: 1.62 !important;
color: rgba(244,244,245,.84) !important;
}
.fatal-hero-split__actions {
margin-top: 26px !important;
gap: 15px !important;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 200px !important;
justify-content: center !important;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(9,10,13,.72) !important;
border-color: rgba(255,255,255,.14) !important;
}
.fatal-hero-split__chips {
margin-top: 22px !important;
gap: 11px !important;
}
.fatal-hero-split__chip {
background: rgba(8,9,12,.66) !important;
border-color: rgba(239,68,68,.20) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.16) !important;
}
.fatal-hero-split__visual {
min-height: 560px !important;
padding: 0 !important;
overflow: visible !important;
justify-content: flex-end !important;
}
.fatal-hero-split__visual::before {
inset: 6% -2% 8% 8% !important;
background: radial-gradient(circle at 58% 38%, rgba(239,68,68,.18), rgba(239,68,68,0) 62%) !important;
filter: blur(34px) !important;
}
.fatal-hero-split__visual::after {
content: "" !important;
position: absolute !important;
left: -8% !important;
top: -2% !important;
bottom: -2% !important;
width: 28% !important;
z-index: 2 !important;
pointer-events: none !important;
background: linear-gradient(90deg, rgba(5,5,7,1) 0%, rgba(5,5,7,.82) 36%, rgba(5,5,7,0) 100%) !important;
}
.fatal-hero-split__image {
width: min(100%, 850px) !important;
max-width: 850px !important;
transform: translateX(0) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 26px 58px rgba(0,0,0,.38)) !important;
mix-blend-mode: screen !important;
opacity: .98 !important;
}
/* reliable nav underline/underglow, including SHOP */
.fatal-nav a,
.fatal-header a[href] {
position: relative;
}
.fatal-nav a::after,
.fatal-header .fatal-nav a::after,
.fatal-header a[href*="/shop"]::after,
.fatal-header a[href*="shop"]::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: -11px !important;
width: 24px !important;
height: 2px !important;
border-radius: 999px !important;
background: #ef4444 !important;
box-shadow: 0 0 14px rgba(239,68,68,.82), 0 0 28px rgba(239,68,68,.30) !important;
transform: translateX(-50%) scaleX(.55) !important;
opacity: 0 !important;
transition: opacity .2s ease, transform .2s ease !important;
}
.fatal-nav a:hover::after,
.fatal-header .fatal-nav a:hover::after,
.fatal-nav a:focus-visible::after,
.fatal-header .fatal-nav a:focus-visible::after,
body.home .fatal-nav a[href="/"]::after,
body.home .fatal-header .fatal-nav a[href="/"]::after,
body.woocommerce-shop .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-nav a[href*="shop"]::after,
body.woocommerce-cart .fatal-nav a[href*="cart"]::after,
body.woocommerce-checkout .fatal-nav a[href*="cart"]::after,
.fatal-nav .current-menu-item > a::after,
.fatal-nav .current_page_item > a::after {
opacity: 1 !important;
transform: translateX(-50%) scaleX(1) !important;
}
@media (max-width: 1320px) {
.fatal-hero-split__grid {
padding: 4px 22px 18px !important;
}
.fatal-hero-split__title {
font-size: clamp(50px, 5.4vw, 78px) !important;
}
.fatal-hero-split__visual {
min-height: 500px !important;
}
.fatal-hero-split__image {
width: min(100%, 760px) !important;
}
}
@media (max-width: 980px) {
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-hero--split {
margin-top: -6px !important;
padding-bottom: 18px !important;
}
.fatal-hero-split {
width: min(100%, calc(100vw - 10px)) !important;
}
.fatal-hero-split__grid {
grid-template-columns: 1fr !important;
padding: 8px 12px 16px !important;
background:
radial-gradient(700px 360px at 64% 16%, rgba(239,68,68,.12), rgba(239,68,68,0) 56%),
linear-gradient(180deg, rgba(7,7,9,.88), rgba(5,5,7,0)) !important;
}
.fatal-hero-split__visual {
min-height: 0 !important;
order: -1 !important;
justify-content: center !important;
}
.fatal-hero-split__visual::after {
display: none !important;
}
.fatal-hero-split__image {
width: 100% !important;
max-width: none !important;
mix-blend-mode: lighten !important;
}
.fatal-hero-split__copy {
padding: 8px 2px 4px !important;
}
.fatal-hero-split__title {
font-size: clamp(40px, 12vw, 62px) !important;
}
.fatal-hero-split__text {
font-size: 16px !important;
}
.fatal-hero-split__actions .fatal-btn {
flex: 1 1 calc(50% - 8px) !important;
min-width: 0 !important;
}
}
@media (max-width: 620px) {
.home .fatal-main {
padding-top: 78px !important;
}
.admin-bar.home .fatal-main {
padding-top: 110px !important;
}
.fatal-hero-split__actions .fatal-btn,
.fatal-hero-split__chip {
flex-basis: 100% !important;
width: 100% !important;
}
}
/* v0.5.1 premium integrated split hero */
.home .fatal-main { padding-top: 123px !important; }
.admin-bar.home .fatal-main { padding-top: 155px !important; }
.fatal-hero--split { margin-top: -28px !important; padding-bottom: 24px !important; }
.fatal-hero-split { width: min(1680px, calc(100vw - 18px)) !important; }
.fatal-hero-split__grid {
grid-template-columns: minmax(0,1.02fr) minmax(460px,.98fr) !important;
align-items: center !important;
gap: clamp(20px, 2vw, 36px) !important;
padding: 8px 20px 18px !important;
border: 0 !important;
border-radius: 0 !important;
background:
radial-gradient(1200px 540px at 78% 28%, rgba(239,68,68,.11), rgba(239,68,68,0) 58%),
radial-gradient(760px 420px at 18% 72%, rgba(239,68,68,.045), rgba(239,68,68,0) 60%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before,
.fatal-hero-split__grid::after { display:none !important; }
.fatal-hero-split__copy { max-width: 760px !important; padding: 10px 0 8px !important; position:relative; z-index:4; }
.fatal-hero-split__eyebrow { margin-bottom: 18px !important; background: rgba(7,7,9,.52) !important; border-color: rgba(239,68,68,.28) !important; }
.fatal-hero-split__title { font-size: clamp(62px, 6.4vw, 94px) !important; line-height: .92 !important; letter-spacing: -.052em !important; margin-bottom: 18px !important; }
.fatal-hero-split__text { max-width: 730px !important; font-size: clamp(18px, 1.15vw, 21px) !important; line-height: 1.62 !important; color: rgba(244,244,245,.84) !important; }
.fatal-hero-split__actions { margin-top: 28px !important; gap: 14px !important; align-items: stretch !important; }
.fatal-hero-split__actions .fatal-btn { min-width: 198px !important; min-height: 62px !important; justify-content:center !important; }
.fatal-hero-split__actions .fatal-btn--ghost { background: rgba(8,10,13,.68) !important; border-color: rgba(255,255,255,.14) !important; }
.fatal-hero-split__actions .fatal-btn--ghost:not(:hover):not(:focus-visible) { box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; }
.fatal-hero-split__chips { margin-top: 20px !important; gap: 10px !important; }
.fatal-hero-split__chip { background: rgba(8,9,12,.55) !important; border-color: rgba(239,68,68,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.16) !important; }
.fatal-hero-split__visual {
min-height: 610px !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding: 0 !important;
background: none !important;
overflow: visible !important;
}
.fatal-hero-split__visual-bg { display:none !important; }
.fatal-hero-split__visual::before,
.fatal-hero-split__visual::after {
content: "" !important;
position: absolute !important;
border-radius: 50% !important;
pointer-events: none !important;
}
/* radar ring cluster */
.fatal-hero-split__visual::before {
width: 540px !important;
height: 540px !important;
right: 90px !important;
top: 18px !important;
border: 2px solid rgba(239,68,68,.24) !important;
box-shadow:
0 0 34px rgba(239,68,68,.22),
inset 0 0 22px rgba(239,68,68,.12),
0 0 0 56px rgba(239,68,68,.05),
0 0 0 112px rgba(239,68,68,.03) !important;
opacity: .95 !important;
}
/* soft red atmospheric glow */
.fatal-hero-split__visual::after {
width: 860px !important;
height: 560px !important;
right: -30px !important;
top: 8px !important;
border-radius: 50% !important;
background: radial-gradient(ellipse at 58% 42%, rgba(239,68,68,.24), rgba(239,68,68,.09) 32%, rgba(239,68,68,0) 68%) !important;
filter: blur(20px) !important;
opacity: .9 !important;
}
.fatal-hero-split__image {
width: min(100%, 890px) !important;
max-width: 890px !important;
height: auto !important;
position: relative !important;
z-index: 3 !important;
border:0 !important;
border-radius:0 !important;
box-shadow:none !important;
mix-blend-mode: screen !important;
filter: drop-shadow(0 26px 50px rgba(0,0,0,.28)) !important;
transform: translateX(8px) translateY(6px) !important;
}
.fatal-hero-split__image--mobile { display:none !important; }
/* ensure no accidental box styling from previous versions */
.fatal-hero-split__visual > img,
.fatal-hero-split__visual > picture,
.fatal-hero-split__visual > div { background: transparent !important; }
/* nav underglow for all items incl. Shop */
.fatal-nav a { position:relative !important; }
.fatal-nav a::after {
content:"" !important; position:absolute !important; left:50% !important; bottom:-11px !important; width:24px !important; height:2px !important; border-radius:999px !important; background:#ef4444 !important; box-shadow:0 0 14px rgba(239,68,68,.8),0 0 26px rgba(239,68,68,.28) !important; transform:translateX(-50%) scaleX(.58) !important; opacity:0 !important; transition:transform .18s ease, opacity .18s ease !important;
}
.fatal-nav a:hover::after,
.fatal-nav a:focus-visible::after,
body.home .fatal-nav a[href="/"]::after,
body.woocommerce-shop .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-nav a[href*="shop"]::after,
body.woocommerce-cart .fatal-nav a[href*="cart"]::after,
body.woocommerce-checkout .fatal-nav a[href*="cart"]::after,
.fatal-nav .current-menu-item > a::after,
.fatal-nav .current_page_item > a::after { opacity:1 !important; transform:translateX(-50%) scaleX(1) !important; }
@media (max-width: 1280px) {
.fatal-hero-split__grid { grid-template-columns: minmax(0,1fr) minmax(420px,.92fr) !important; gap: 18px !important; }
.fatal-hero-split__title { font-size: clamp(56px, 5.9vw, 84px) !important; }
.fatal-hero-split__visual { min-height: 560px !important; }
.fatal-hero-split__visual::before { width: 470px !important; height: 470px !important; right: 70px !important; top: 30px !important; }
.fatal-hero-split__image { width: min(100%, 760px) !important; transform: translateX(0) translateY(4px) !important; }
}
@media (max-width: 980px) {
.home .fatal-main { padding-top: 78px !important; }
.admin-bar.home .fatal-main { padding-top: 110px !important; }
.fatal-hero--split { margin-top: -10px !important; }
.fatal-hero-split { width: min(100%, calc(100vw - 10px)) !important; }
.fatal-hero-split__grid { grid-template-columns:1fr !important; padding: 8px 12px 18px !important; gap: 10px !important; }
.fatal-hero-split__visual { order:-1 !important; justify-content:center !important; min-height: 0 !important; }
.fatal-hero-split__visual::before { width: 360px !important; height: 360px !important; right: calc(50% - 180px) !important; left: auto !important; top: 18px !important; }
.fatal-hero-split__visual::after { width: 100% !important; height: 340px !important; right: auto !important; left: 0 !important; top: 0 !important; }
.fatal-hero-split__image--desktop { display:none !important; }
.fatal-hero-split__image--mobile {
display:block !important;
width: min(100%, 700px) !important;
max-width: 700px !important;
transform:none !important;
}
.fatal-hero-split__copy { max-width:100% !important; padding-top: 2px !important; }
.fatal-hero-split__title { font-size: clamp(42px, 12vw, 62px) !important; }
.fatal-hero-split__text { font-size: 16px !important; }
.fatal-hero-split__actions .fatal-btn { flex: 1 1 calc(50% - 8px) !important; min-width:0 !important; }
}
@media (max-width: 620px) {
.fatal-hero-split__actions .fatal-btn, .fatal-hero-split__chip { width:100% !important; flex-basis:100% !important; }
}
/* v0.5.2 hero lock: coded copy left, screenshot-2 style visual right */
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-header .fatal-nav,
.fatal-header .fatal-nav .menu-item {
overflow: visible !important;
}
.fatal-header .fatal-nav > a:not(.fatal-cart),
.fatal-header .fatal-nav .menu-item > a {
position: relative;
}
.fatal-header .fatal-nav > a:not(.fatal-cart)::after,
.fatal-header .fatal-nav .menu-item > a::after {
content: "";
position: absolute;
left: 50%;
bottom: -11px;
width: 24px;
height: 2px;
border-radius: 999px;
background: #ef4444;
box-shadow: 0 0 14px rgba(239,68,68,.82), 0 0 28px rgba(239,68,68,.28);
transform: translateX(-50%) scaleX(.58);
transform-origin: center;
opacity: 0;
transition: opacity .2s ease, transform .2s ease;
}
.fatal-header .fatal-nav > a:not(.fatal-cart):hover::after,
.fatal-header .fatal-nav .menu-item > a:hover::after,
.fatal-header .fatal-nav > a:not(.fatal-cart):focus-visible::after,
.fatal-header .fatal-nav .menu-item > a:focus-visible::after,
body.woocommerce-shop .fatal-header .fatal-nav .current-menu-item > a::after,
body.post-type-archive-product .fatal-header .fatal-nav .current-menu-item > a::after,
body.single-product .fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current_page_item > a::after {
opacity: 1;
transform: translateX(-50%) scaleX(1);
}
.fatal-hero--split {
padding: 2px 0 20px !important;
}
.fatal-hero-split {
width: min(1680px, calc(100vw - 18px)) !important;
}
.fatal-hero-split__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(540px, .98fr) !important;
gap: 24px !important;
align-items: center !important;
padding: 6px 28px 18px !important;
border: 0 !important;
border-radius: 0 !important;
background: radial-gradient(900px 480px at 74% 20%, rgba(145, 16, 16, .18), rgba(145, 16, 16, 0) 64%),
radial-gradient(740px 520px at 16% 88%, rgba(88, 8, 8, .09), rgba(88, 8, 8, 0) 60%),
linear-gradient(180deg, rgba(6,6,8,.0) 0%, rgba(6,6,8,.0) 100%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before,
.fatal-hero-split__grid::after {
display: none !important;
}
.fatal-hero-split__copy {
position: relative;
z-index: 4;
max-width: 760px !important;
padding: 2px 0 10px !important;
}
.fatal-hero-split__eyebrow {
margin-bottom: 18px !important;
background: rgba(7,7,9,.48) !important;
border-color: rgba(239,68,68,.28) !important;
}
.fatal-hero-split__title {
font-size: clamp(66px, 6.35vw, 96px) !important;
line-height: .92 !important;
letter-spacing: -.055em !important;
margin: 0 0 18px !important;
}
.fatal-hero-split__text {
max-width: 730px !important;
font-size: clamp(18px, 1.18vw, 21px) !important;
line-height: 1.62 !important;
color: rgba(244,244,245,.86) !important;
}
.fatal-hero-split__actions {
gap: 14px !important;
margin-top: 28px !important;
align-items: stretch !important;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 198px !important;
min-height: 62px !important;
justify-content: center !important;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(8,10,13,.62) !important;
border-color: rgba(255,255,255,.14) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.18) !important;
}
.fatal-hero-split__actions .fatal-btn--ghost:not(:hover):not(:focus-visible) {
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.18) !important;
}
.fatal-hero-split__chips {
margin-top: 20px !important;
gap: 10px !important;
}
.fatal-hero-split__chip {
background: rgba(8,9,12,.50) !important;
border-color: rgba(239,68,68,.18) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.14) !important;
}
.fatal-hero-split__visual {
position: relative !important;
min-height: 640px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
overflow: visible !important;
isolation: isolate !important;
background: transparent !important;
}
.fatal-hero-split__visual::before {
content: "";
position: absolute;
inset: auto 30px 44px 80px;
height: 230px;
background: radial-gradient(ellipse at center, rgba(239,68,68,.26) 0%, rgba(239,68,68,.08) 34%, rgba(239,68,68,0) 74%);
filter: blur(24px);
z-index: 0;
pointer-events: none;
}
.fatal-hero-split__visual::after {
content: "";
position: absolute;
top: 28px;
right: 80px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(239,68,68,.14) 0%, rgba(239,68,68,.08) 30%, rgba(239,68,68,0) 60%);
box-shadow: 0 0 0 1px rgba(239,68,68,.06), 0 0 0 36px rgba(239,68,68,.025), 0 0 0 74px rgba(239,68,68,.018);
filter: blur(.2px);
z-index: 0;
pointer-events: none;
}
.fatal-hero-split__image {
position: relative !important;
z-index: 2 !important;
width: min(100%, 860px) !important;
max-width: 860px !important;
margin-left: auto !important;
transform: translateX(16px) translateY(4px) !important;
display: block !important;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.38)) !important;
background: transparent !important;
}
.fatal-hero-split__image--mobile {
display: none !important;
}
@media (max-width: 1420px) {
.fatal-hero-split__grid { grid-template-columns: minmax(0,1fr) minmax(420px,.92fr) !important; gap: 16px !important; }
.fatal-hero-split__title { font-size: clamp(58px, 5.7vw, 84px) !important; }
.fatal-hero-split__visual { min-height: 580px !important; }
.fatal-hero-split__visual::after { width: 460px !important; height: 460px !important; right: 52px !important; }
.fatal-hero-split__image { width: min(100%, 760px) !important; max-width: 760px !important; transform: translateX(10px) translateY(2px) !important; }
}
@media (max-width: 1024px) {
.home .fatal-main { padding-top: 78px !important; }
.fatal-hero-split__grid { grid-template-columns: 1fr !important; padding: 0 14px 12px !important; gap: 4px !important; }
.fatal-hero-split__visual { order: -1 !important; min-height: 0 !important; justify-content: center !important; margin-bottom: 8px !important; }
.fatal-hero-split__visual::before { inset: auto 10% 8px 10% !important; height: 180px !important; }
.fatal-hero-split__visual::after { top: 18px !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: min(84vw, 420px) !important; height: min(84vw, 420px) !important; }
.fatal-hero-split__image--desktop { display: none !important; }
.fatal-hero-split__image--mobile { display: block !important; width: min(100%, 720px) !important; max-width: 720px !important; transform: none !important; }
.fatal-hero-split__copy { max-width: 100% !important; }
.fatal-hero-split__title { font-size: clamp(44px, 11vw, 66px) !important; }
.fatal-hero-split__text { font-size: 16px !important; }
}
@media (max-width: 640px) {
.fatal-hero--split { padding-bottom: 10px !important; }
.fatal-hero-split { width: min(100%, calc(100vw - 8px)) !important; }
.fatal-hero-split__grid { padding: 0 10px 10px !important; }
.fatal-hero-split__title { font-size: clamp(38px, 12.5vw, 56px) !important; }
.fatal-hero-split__actions { gap: 10px !important; }
.fatal-hero-split__actions .fatal-btn { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
}
@media (max-width: 480px) {
.fatal-hero-split__actions .fatal-btn,
.fatal-hero-split__chip { width: 100% !important; flex-basis: 100% !important; }
}
/* v0.5.4 HERO ONLY: constrained, tighter, coded SEO copy + blended right visual */
.home .fatal-main {
padding-top: 76px !important;
}
.admin-bar.home .fatal-main {
padding-top: 108px !important;
}
.fatal-hero--split {
margin-top: -8px !important;
padding: 0 0 18px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1240px, calc(100vw - 44px)) !important;
max-width: 1240px !important;
margin-inline: auto !important;
}
.fatal-hero-split__grid {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr) !important;
align-items: center !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background:
radial-gradient(780px 380px at 72% 24%, rgba(239,68,68,.115), rgba(239,68,68,0) 64%),
radial-gradient(520px 280px at 32% 58%, rgba(95,10,10,.08), rgba(95,10,10,0) 62%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before,
.fatal-hero-split__grid::after {
display: none !important;
}
.fatal-hero-split__copy {
position: relative !important;
z-index: 5 !important;
max-width: 560px !important;
padding: 4px 0 12px !important;
}
.fatal-hero-split__eyebrow {
margin-bottom: 16px !important;
}
.fatal-hero-split__title {
font-size: clamp(52px, 5.3vw, 80px) !important;
line-height: .92 !important;
letter-spacing: -.052em !important;
margin: 0 0 17px !important;
max-width: 9.5ch !important;
}
.fatal-hero-split__text {
max-width: 555px !important;
font-size: clamp(16px, 1.04vw, 18px) !important;
line-height: 1.62 !important;
color: rgba(244,244,245,.84) !important;
}
.fatal-hero-split__actions {
margin-top: 24px !important;
gap: 14px !important;
align-items: stretch !important;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 178px !important;
min-height: 58px !important;
justify-content: center !important;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(8,10,13,.66) !important;
border-color: rgba(255,255,255,.14) !important;
}
.fatal-hero-split__chips {
margin-top: 18px !important;
gap: 10px !important;
}
.fatal-hero-split__chip {
padding: 11px 15px !important;
background: rgba(8,9,12,.55) !important;
border-color: rgba(239,68,68,.18) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.14) !important;
}
.fatal-hero-split__visual {
position: relative !important;
z-index: 1 !important;
min-height: 520px !important;
margin-left: -92px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: visible !important;
background: transparent !important;
isolation: isolate !important;
}
.fatal-hero-split__visual-bg,
.fatal-hero-split__visual::before,
.fatal-hero-split__visual::after {
display: none !important;
}
.fatal-hero-split__image {
position: relative !important;
z-index: 1 !important;
width: min(820px, 68vw) !important;
max-width: none !important;
height: auto !important;
transform: translateX(0) translateY(0) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 26px 48px rgba(0,0,0,.34)) !important;
mix-blend-mode: screen !important;
opacity: .93 !important;
background: transparent !important;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, #000 16%, #000 94%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, #000 16%, #000 94%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%);
mask-composite: intersect;
}
.fatal-hero-split__image--mobile {
display: none !important;
}
/* Keep fancy button hover but reduce uncontrolled bloom */
.fatal-hero-split__actions .fatal-btn:hover,
.fatal-hero-split__actions .fatal-btn:focus-visible {
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(239,68,68,.26), 0 0 20px rgba(239,68,68,.18) !important;
}
.fatal-hero-split__actions .fatal-btn--ghost:hover,
.fatal-hero-split__actions .fatal-btn--ghost:focus-visible {
box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 18px rgba(239,68,68,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
@media (max-width: 1320px) {
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1180px, calc(100vw - 40px)) !important;
max-width: 1180px !important;
}
.fatal-hero-split__copy {
max-width: 530px !important;
}
.fatal-hero-split__title {
font-size: clamp(48px, 5.2vw, 72px) !important;
}
.fatal-hero-split__visual {
margin-left: -78px !important;
min-height: 485px !important;
}
.fatal-hero-split__image {
width: min(760px, 67vw) !important;
}
}
@media (max-width: 980px) {
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-hero--split {
margin-top: -4px !important;
padding-bottom: 14px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(100%, calc(100vw - 22px)) !important;
}
.fatal-hero-split__grid {
grid-template-columns: 1fr !important;
gap: 6px !important;
background: radial-gradient(560px 260px at 56% 12%, rgba(239,68,68,.12), rgba(239,68,68,0) 60%) !important;
}
.fatal-hero-split__visual {
order: -1 !important;
margin-left: 0 !important;
min-height: 0 !important;
justify-content: center !important;
}
.fatal-hero-split__copy {
max-width: none !important;
padding-top: 4px !important;
}
.fatal-hero-split__title {
font-size: clamp(40px, 12vw, 62px) !important;
max-width: 10ch !important;
}
.fatal-hero-split__text {
max-width: 100% !important;
font-size: 16px !important;
}
.fatal-hero-split__image--desktop {
display: none !important;
}
.fatal-hero-split__image--mobile {
display: block !important;
width: min(100%, 720px) !important;
max-width: none !important;
mix-blend-mode: screen !important;
opacity: .95 !important;
}
}
@media (max-width: 520px) {
.fatal-hero-split__actions .fatal-btn,
.fatal-hero-split__chip {
width: 100% !important;
flex-basis: 100% !important;
}
}
/* v0.5.5 hero refinement: tighter, cleaner, blended, constrained */
.home .fatal-main {
padding-top: 88px !important;
}
.admin-bar.home .fatal-main {
padding-top: 120px !important;
}
.fatal-hero--split {
margin-top: 0 !important;
padding: 6px 0 20px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1180px, calc(100% - 40px)) !important;
max-width: 1180px !important;
margin-inline: auto !important;
}
.fatal-hero-split__grid {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
align-items: center !important;
gap: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background:
linear-gradient(90deg, rgba(5,5,7,.98) 0%, rgba(5,5,7,.98) 46%, rgba(5,5,7,.84) 55%, rgba(5,5,7,0) 66%),
radial-gradient(620px 300px at 76% 54%, rgba(239,68,68,.07), rgba(239,68,68,0) 68%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before,
.fatal-hero-split__grid::after {
display: none !important;
}
.fatal-hero-split__copy {
position: relative !important;
z-index: 4 !important;
max-width: 540px !important;
padding: 12px 0 12px !important;
}
.fatal-hero-split__eyebrow {
margin: 0 0 14px !important;
}
.fatal-hero-split__title {
margin: 0 0 14px !important;
max-width: 8.2ch !important;
font-size: clamp(48px, 5.05vw, 78px) !important;
line-height: .93 !important;
letter-spacing: -.052em !important;
}
.fatal-hero-split__text {
max-width: 540px !important;
font-size: clamp(16px, 1.02vw, 18px) !important;
line-height: 1.66 !important;
color: rgba(244,244,245,.84) !important;
}
.fatal-hero-split__actions {
margin-top: 22px !important;
gap: 12px !important;
align-items: center !important;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 170px !important;
min-height: 54px !important;
justify-content: center !important;
}
.fatal-hero-split__chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 16px !important;
max-width: 540px !important;
}
.fatal-hero-split__chip {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 13px !important;
background: rgba(8,9,12,.56) !important;
border-color: rgba(239,68,68,.18) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.12) !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.fatal-hero-split__visual {
position: relative !important;
z-index: 1 !important;
min-height: 520px !important;
margin-left: -118px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: visible !important;
background: transparent !important;
isolation: isolate !important;
}
.fatal-hero-split__visual-bg {
display: none !important;
}
.fatal-hero-split__visual::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 3% !important;
bottom: 6% !important;
width: 180px !important;
background: linear-gradient(90deg, rgba(5,5,7,1) 0%, rgba(5,5,7,.94) 28%, rgba(5,5,7,.62) 68%, rgba(5,5,7,0) 100%) !important;
z-index: 2 !important;
pointer-events: none !important;
}
.fatal-hero-split__visual::after {
content: none !important;
display: none !important;
}
.fatal-hero-split__image {
position: relative !important;
z-index: 1 !important;
width: min(900px, 77vw) !important;
max-width: none !important;
height: auto !important;
transform: translateX(-14px) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 24px 42px rgba(0,0,0,.30)) !important;
mix-blend-mode: screen !important;
opacity: .965 !important;
background: transparent !important;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 10%, #000 22%, #000 95%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%) !important;
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 10%, #000 22%, #000 95%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 6%, #000 92%, transparent 100%) !important;
mask-composite: intersect;
}
.fatal-hero-split__image--mobile {
display: none !important;
}
/* explicit nav hover underline for Shop */
.fatal-header .fatal-nav a[href*="shop"]:hover::after,
.fatal-header .fatal-nav a[href*="shop"]:focus-visible::after {
opacity: 1 !important;
transform: translateX(-50%) scaleX(1) !important;
}
@media (max-width: 1320px) {
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1160px, calc(100% - 36px)) !important;
max-width: 1160px !important;
}
.fatal-hero-split__copy {
max-width: 520px !important;
}
.fatal-hero-split__visual {
margin-left: -96px !important;
min-height: 500px !important;
}
.fatal-hero-split__image {
width: min(820px, 74vw) !important;
}
}
@media (max-width: 980px) {
.home .fatal-main {
padding-top: 84px !important;
}
.admin-bar.home .fatal-main {
padding-top: 116px !important;
}
.fatal-hero--split {
padding: 2px 0 16px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(100%, calc(100vw - 22px)) !important;
}
.fatal-hero-split__grid {
grid-template-columns: 1fr !important;
background: radial-gradient(520px 220px at 58% 16%, rgba(239,68,68,.09), rgba(239,68,68,0) 62%) !important;
}
.fatal-hero-split__visual {
order: -1 !important;
margin-left: 0 !important;
min-height: 0 !important;
justify-content: center !important;
}
.fatal-hero-split__visual::before {
display: none !important;
}
.fatal-hero-split__copy {
max-width: none !important;
padding-top: 6px !important;
}
.fatal-hero-split__title {
font-size: clamp(40px, 12vw, 62px) !important;
max-width: 8.8ch !important;
}
.fatal-hero-split__text {
max-width: 100% !important;
font-size: 16px !important;
}
.fatal-hero-split__image--desktop {
display: none !important;
}
.fatal-hero-split__image--mobile {
display: block !important;
width: min(100%, 760px) !important;
max-width: none !important;
mix-blend-mode: screen !important;
opacity: .97 !important;
}
.fatal-hero-split__chips {
max-width: 100% !important;
}
.fatal-hero-split__chip {
white-space: normal !important;
flex: 1 1 calc(50% - 4px) !important;
justify-content: center !important;
text-align: center !important;
}
}
@media (max-width: 520px) {
.fatal-hero-split__actions .fatal-btn,
.fatal-hero-split__chip {
width: 100% !important;
flex-basis: 100% !important;
}
}
/* v0.5.6 HERO LOCK: balanced coded copy + larger blended USB/radar visual */
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-hero--split {
margin-top: -2px !important;
padding: 0 0 20px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1260px, calc(100vw - 42px)) !important;
max-width: 1260px !important;
margin-inline: auto !important;
}
.fatal-hero-split__grid {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr) !important;
align-items: center !important;
gap: 0 !important;
min-height: 610px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background:
linear-gradient(90deg, rgba(5,5,7,1) 0%, rgba(5,5,7,.98) 36%, rgba(5,5,7,.88) 48%, rgba(5,5,7,0) 62%) !important;
box-shadow: none !important;
overflow: visible !important;
}
.fatal-hero-split__grid::before,
.fatal-hero-split__grid::after {
display: none !important;
}
.fatal-hero-split__copy {
position: relative !important;
z-index: 5 !important;
max-width: 515px !important;
padding: 4px 0 10px !important;
}
.fatal-hero-split__eyebrow {
margin: 0 0 15px !important;
padding: 11px 18px !important;
font-size: 12px !important;
letter-spacing: .18em !important;
background: rgba(8,8,10,.60) !important;
border-color: rgba(239,68,68,.28) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.fatal-hero-split__title {
max-width: 8.6ch !important;
margin: 0 0 16px !important;
font-size: clamp(48px, 4.85vw, 76px) !important;
line-height: .94 !important;
letter-spacing: -.055em !important;
}
.fatal-hero-split__text {
max-width: 515px !important;
margin: 0 !important;
font-size: clamp(16px, 1.02vw, 18px) !important;
line-height: 1.62 !important;
color: rgba(244,244,245,.84) !important;
}
.fatal-hero-split__actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 13px !important;
margin-top: 22px !important;
align-items: center !important;
}
.fatal-hero-split__actions .fatal-btn {
min-width: 172px !important;
min-height: 56px !important;
justify-content: center !important;
border-radius: 999px !important;
}
.fatal-hero-split__actions .fatal-btn:hover,
.fatal-hero-split__actions .fatal-btn:focus-visible {
transform: translateY(-2px) !important;
box-shadow: 0 12px 30px rgba(239,68,68,.26), 0 0 18px rgba(239,68,68,.16) !important;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(8,10,13,.64) !important;
border-color: rgba(255,255,255,.15) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.16) !important;
}
.fatal-hero-split__actions .fatal-btn--ghost:hover,
.fatal-hero-split__actions .fatal-btn--ghost:focus-visible {
box-shadow: 0 12px 28px rgba(0,0,0,.26), 0 0 18px rgba(239,68,68,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.fatal-hero-split__chips {
display: grid !important;
grid-template-columns: repeat(4, max-content) !important;
gap: 9px !important;
margin-top: 17px !important;
max-width: none !important;
}
.fatal-hero-split__chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 9px 13px !important;
white-space: nowrap !important;
border-radius: 999px !important;
background: rgba(8,9,12,.62) !important;
border: 1px solid rgba(239,68,68,.20) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.14) !important;
font-size: 13.5px !important;
line-height: 1 !important;
font-weight: 700 !important;
color: rgba(255,255,255,.90) !important;
}
.fatal-hero-split__chip svg,
.fatal-hero-split__chip .fatal-chip-icon {
width: 15px !important;
height: 15px !important;
flex: 0 0 15px !important;
}
.fatal-hero-split__visual {
position: relative !important;
z-index: 2 !important;
min-height: 610px !important;
margin-left: -145px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
overflow: visible !important;
background: transparent !important;
isolation: isolate !important;
}
.fatal-hero-split__visual-bg,
.fatal-hero-split__visual::before,
.fatal-hero-split__visual::after {
display: none !important;
content: none !important;
}
.fatal-hero-split__image {
position: relative !important;
z-index: 2 !important;
width: min(940px, 76vw) !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
transform: translateX(-2px) translateY(0) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: drop-shadow(0 28px 52px rgba(0,0,0,.34)) !important;
mix-blend-mode: screen !important;
opacity: .98 !important;
background: transparent !important;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 8%, #000 19%, #000 96%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%) !important;
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 8%, #000 19%, #000 96%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%) !important;
mask-composite: intersect;
}
.fatal-hero-split__image--mobile {
display: none !important;
}
/* Stronger guaranteed nav underglow, including Shop */
.fatal-header .fatal-nav a {
position: relative !important;
}
.fatal-header .fatal-nav a::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: -11px !important;
width: 24px !important;
height: 2px !important;
border-radius: 999px !important;
background: #ef4444 !important;
box-shadow: 0 0 14px rgba(239,68,68,.82), 0 0 28px rgba(239,68,68,.28) !important;
transform: translateX(-50%) scaleX(.55) !important;
opacity: 0 !important;
transition: opacity .2s ease, transform .2s ease !important;
}
.fatal-header .fatal-nav a:hover::after,
.fatal-header .fatal-nav a:focus-visible::after,
.fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current_page_item > a::after,
body.woocommerce-shop .fatal-header .fatal-nav a[href*="shop"]::after,
body.single-product .fatal-header .fatal-nav a[href*="shop"]::after,
body.post-type-archive-product .fatal-header .fatal-nav a[href*="shop"]::after {
opacity: 1 !important;
transform: translateX(-50%) scaleX(1) !important;
}
@media (max-width: 1320px) {
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1180px, calc(100vw - 36px)) !important;
max-width: 1180px !important;
}
.fatal-hero-split__grid {
grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr) !important;
}
.fatal-hero-split__copy {
max-width: 500px !important;
}
.fatal-hero-split__title {
font-size: clamp(46px, 4.8vw, 70px) !important;
}
.fatal-hero-split__visual {
margin-left: -126px !important;
min-height: 565px !important;
}
.fatal-hero-split__image {
width: min(860px, 74vw) !important;
}
.fatal-hero-split__chips {
grid-template-columns: repeat(2, max-content) !important;
}
}
@media (max-width: 980px) {
.home .fatal-main {
padding-top: 82px !important;
}
.admin-bar.home .fatal-main {
padding-top: 114px !important;
}
.fatal-hero--split {
margin-top: 0 !important;
padding-bottom: 15px !important;
}
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(100%, calc(100vw - 22px)) !important;
}
.fatal-hero-split__grid {
grid-template-columns: 1fr !important;
min-height: 0 !important;
background: radial-gradient(520px 240px at 58% 14%, rgba(239,68,68,.09), rgba(239,68,68,0) 62%) !important;
}
.fatal-hero-split__visual {
order: -1 !important;
margin-left: 0 !important;
min-height: 0 !important;
justify-content: center !important;
}
.fatal-hero-split__copy {
max-width: none !important;
padding-top: 4px !important;
}
.fatal-hero-split__title {
max-width: 9ch !important;
font-size: clamp(40px, 12vw, 62px) !important;
}
.fatal-hero-split__text {
max-width: 100% !important;
font-size: 16px !important;
}
.fatal-hero-split__image--desktop {
display: none !important;
}
.fatal-hero-split__image--mobile {
display: block !important;
width: min(100%, 760px) !important;
max-width: none !important;
mix-blend-mode: screen !important;
opacity: .98 !important;
}
.fatal-hero-split__chips {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
}
.fatal-hero-split__chip {
white-space: normal !important;
text-align: center !important;
}
}
@media (max-width: 520px) {
.fatal-hero-split__actions .fatal-btn {
flex: 1 1 100% !important;
width: 100% !important;
}
.fatal-hero-split__chips {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
v0.5.10 HERO (screenshot-2, 1180 content width) + NAV (cart + active page)
============================================================ */
/* ---- NAV: gradient underline on ALL items incl. Cart; align cart; fix Shop; active page ---- */
.fatal-header .fatal-nav a::after,
.fatal-nav a::after {
content: "" !important; position: absolute !important;
left: 10px !important; right: 10px !important; width: auto !important;
height: 2px !important; bottom: -10px !important; border-radius: 999px !important;
background: linear-gradient(90deg, transparent, var(--fatal-red), transparent) !important;
box-shadow: 0 0 16px rgba(239,68,68,.45) !important;
transform: scaleX(.5) !important; opacity: 0 !important;
transition: opacity .22s ease, transform .22s ease !important;
}
/* the cart is a taller pill — pull its underline up so it lines up with the text links */
.fatal-header .fatal-nav a.fatal-cart::after,
.fatal-nav a.fatal-cart::after { bottom: -3px !important; left: 8px !important; right: 8px !important; }
/* turn the underline ON: hover/focus, current menu item, and per-page active states */
.fatal-header .fatal-nav a:hover::after,
.fatal-header .fatal-nav a:focus-visible::after,
.fatal-header .fatal-nav .current-menu-item > a::after,
.fatal-header .fatal-nav .current_page_item > a::after,
.fatal-header .fatal-nav a[aria-current="page"]::after,
.fatal-header .fatal-nav a.is-active::after,
body.home .fatal-nav a[href="/"]::after,
body.woocommerce-cart .fatal-nav a.fatal-cart::after,
body.woocommerce-checkout .fatal-nav a.fatal-cart::after {
opacity: 1 !important; transform: scaleX(1) !important;
}
/* Shop: beat the body:not(...) rule that forces its underline off on the home page */
body:not(.woocommerce-shop):not(.post-type-archive-product):not(.single-product) .fatal-header .fatal-nav a[href*="shop"]:hover::after,
body:not(.woocommerce-shop):not(.post-type-archive-product):not(.single-product) .fatal-header .fatal-nav a[href*="shop"]:focus-visible::after {
opacity: 1 !important; transform: scaleX(1) !important;
}
.fatal-header .fatal-nav a:hover,
.fatal-header .fatal-nav a:focus-visible,
.fatal-header .fatal-nav a[aria-current="page"],
.fatal-header .fatal-nav a.is-active {
color: #fff !important; text-shadow: 0 0 14px rgba(239,68,68,.45) !important;
}
/* eyebrow spec highlight (now the USB-A + USB-C connector) */
.fatal-eyebrow__hl { color: #ff5a5a !important; }
/* v0.6.0: eyebrow content is now a single flex item (one continuous run) so the USB-A + USB-C phrase can't split into columns or break mid-token */
.fatal-hero-split__eyebrow .fatal-eyebrow__line { text-align: center !important; white-space: normal !important; line-height: 1.4 !important; }
/* GLOBAL icon sizing so hero button/chip SVGs never balloon */
.fatal-hero-split__actions .fatal-btn svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; }
.fatal-hero-split__chip-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--fatal-red) !important; }
.fatal-hero-split__chip-icon svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; }
/* ---- HERO (desktop only; mobile single-column untouched) ---- */
@media (min-width: 981px) {
.home .fatal-main { padding-top: 123px !important; }
.admin-bar.home .fatal-main { padding-top: 155px !important; }
.fatal-hero.fatal-hero--split { overflow: visible !important; margin-top: 0 !important; padding: 8px 0 24px !important; }
/* SAME width as the logo / nav / every other section */
.fatal-hero--split .fatal-wrap,
.fatal-hero-split {
width: min(1180px, calc(100% - 40px)) !important;
max-width: 1180px !important;
}
.fatal-hero-split__grid {
grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr) !important;
gap: 0 !important;
align-items: start !important;
}
.fatal-hero-split__copy { max-width: 690px !important; padding: 6px 0 0 !important; }
.fatal-hero h1.fatal-hero-split__title,
.fatal-hero-split__title {
max-width: none !important;
font-size: clamp(42px, 3.5vw, 54px) !important;
font-weight: 800 !important;
line-height: 1.0 !important;
letter-spacing: -.045em !important;
margin: 0 0 20px !important;
}
.fatal-hero-split__text { max-width: 600px !important; font-size: clamp(15px, 1.0vw, 17px) !important; }
.fatal-hero-split__actions { gap: 16px !important; margin-top: 24px !important; }
.fatal-hero-split__actions .fatal-btn {
border-radius: 14px !important; padding: 0 26px !important;
min-width: 0 !important; min-height: 56px !important; font-size: 16px !important;
}
.fatal-hero-split__actions .fatal-btn--ghost {
background: rgba(239,68,68,.06) !important; border: 1px solid rgba(239,68,68,.5) !important;
}
.fatal-hero-split__chips {
display: inline-flex !important; flex-wrap: nowrap !important; gap: 0 !important;
width: max-content !important; max-width: 100% !important; margin-top: 24px !important;
padding: 11px 4px !important; border: 1px solid rgba(239,68,68,.18) !important;
border-radius: 14px !important; background: rgba(8,9,12,.5) !important;
}
.fatal-hero-split__chip {
background: transparent !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; padding: 2px 18px !important; white-space: nowrap !important;
border-right: 1px solid rgba(255,255,255,.09) !important; font-size: 13.5px !important; font-weight: 600 !important;
}
.fatal-hero-split__chip:last-child { border-right: 0 !important; }
/* visual: clean square crop (blends cleanly), larger, top-aligned so it never pushes the copy down */
.fatal-hero-split__visual {
margin-left: -95px !important; margin-top: -28px !important; min-height: 0 !important;
align-self: start !important;
justify-content: flex-start !important; align-items: flex-start !important; overflow: visible !important;
}
.fatal-hero-split__visual::before { width: 70px !important; }
.fatal-hero-split__image {
width: clamp(480px, 44vw, 640px) !important; max-width: none !important;
max-height: none !important; height: auto !important;
mix-blend-mode: lighten !important; filter: none !important;
border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
/* feather all four edges to transparent so the rectangular boundary blends into the bg */
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-composite: intersect;
}
}
/* ============================================================
v0.5.12 "Built for the bench" outcome cards redesign
(red command-center cards: SVG icons, glow tiles, index numbers)
============================================================ */
.fatal-outcome-grid { gap: 20px !important; }
.fatal-outcome-card {
position: relative !important; overflow: hidden !important;
border: 1px solid rgba(239,68,68,.16) !important;
border-radius: 20px !important;
background:
radial-gradient(420px 220px at 100% 0%, rgba(239,68,68,.11), rgba(239,68,68,0) 60%),
linear-gradient(180deg, rgba(20,20,23,.92), rgba(9,9,11,.88)) !important;
padding: 30px 28px !important;
box-shadow: 0 20px 50px rgba(0,0,0,.34) !important;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.fatal-outcome-card::before {
content: "" !important; position: absolute !important; left: 28px; right: 28px; top: 0;
height: 2px; border-radius: 999px;
background: linear-gradient(90deg, var(--fatal-red), rgba(239,68,68,0)) !important;
opacity: .45; transition: opacity .25s ease;
}
.fatal-outcome-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(239,68,68,.45) !important;
box-shadow: 0 26px 64px rgba(0,0,0,.46), 0 0 30px rgba(239,68,68,.14) !important;
}
.fatal-outcome-card:hover::before { opacity: 1; }
.fatal-outcome-card__num {
position: absolute; top: 18px; right: 24px;
font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
color: rgba(239,68,68,.13); pointer-events: none;
}
.fatal-outcome-card .fatal-outcome-icon {
width: 52px !important; height: 52px !important; border-radius: 14px !important;
display: grid !important; place-items: center !important; margin-bottom: 18px !important;
color: var(--fatal-red) !important; font-size: 0 !important;
background: radial-gradient(circle at 50% 32%, rgba(239,68,68,.22), rgba(239,68,68,.05)) !important;
border: 1px solid rgba(239,68,68,.4) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(239,68,68,.12) !important;
}
.fatal-outcome-card .fatal-outcome-icon svg { width: 24px !important; height: 24px !important; }
.fatal-outcome-card h3 { margin: 0 0 10px !important; font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important; letter-spacing: -.01em !important; }
.fatal-outcome-card p { color: var(--fatal-muted) !important; line-height: 1.62 !important; margin: 0 !important; }
@media (max-width: 880px) {
.fatal-outcome-grid { grid-template-columns: 1fr !important; }
}
/* ============================================================
v0.5.18 "What It Is" workflow icons (red SVG) + PBS section redesign
============================================================ */
/* --- workflow item icons: render the SVGs in red inside the existing tiles --- */
.fatal-workflow-item__icon { color: var(--fatal-red) !important; font-size: 0 !important; }
.fatal-workflow-item__icon svg { width: 22px !important; height: 22px !important; }
/* --- PBS section: centered header + 3 premium cards --- */
.fatal-pbs-section .fatal-wrap { display: block; }
.fatal-pbs__head { max-width: 760px; margin: 0 auto; text-align: center; }
.fatal-pbs__head h2 {
font-size: clamp(2rem, 3.4vw, 3rem) !important;
line-height: 1.02 !important; letter-spacing: -.03em !important; margin: 12px 0 16px !important;
}
.fatal-pbs__head p { color: var(--fatal-muted); line-height: 1.66; margin: 0 auto; max-width: 620px; }
.fatal-pbs__head .fatal-eyebrow { justify-content: center; }
.fatal-pbs__badge {
display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
padding: 8px 16px 8px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
background: rgba(255,255,255,.02);
}
.fatal-pbs__badge span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fatal-muted); }
.fatal-pbs__badge img { height: 48px; width: auto; display: block; }
.fatal-pbs__cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px;
}
.fatal-pbsfeat {
position: relative; overflow: hidden; padding: 28px 26px;
border: 1px solid rgba(239,68,68,.16); border-radius: 20px;
background:
radial-gradient(420px 220px at 100% 0%, rgba(239,68,68,.10), rgba(239,68,68,0) 60%),
linear-gradient(180deg, rgba(20,20,23,.92), rgba(9,9,11,.88));
box-shadow: 0 20px 50px rgba(0,0,0,.34);
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.fatal-pbsfeat::before {
content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; border-radius: 999px;
background: linear-gradient(90deg, var(--fatal-red), rgba(239,68,68,0)); opacity: .45; transition: opacity .25s ease;
}
.fatal-pbsfeat:hover {
transform: translateY(-4px); border-color: rgba(239,68,68,.45);
box-shadow: 0 26px 64px rgba(0,0,0,.46), 0 0 30px rgba(239,68,68,.14);
}
.fatal-pbsfeat:hover::before { opacity: 1; }
.fatal-pbsfeat__icon {
width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
color: var(--fatal-red);
background: radial-gradient(circle at 50% 32%, rgba(239,68,68,.22), rgba(239,68,68,.05));
border: 1px solid rgba(239,68,68,.4);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(239,68,68,.12);
}
.fatal-pbsfeat__icon svg { width: 24px; height: 24px; }
.fatal-pbsfeat h3 { margin: 0 0 10px; font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -.01em; }
.fatal-pbsfeat p { color: var(--fatal-muted); line-height: 1.62; margin: 0; }
@media (max-width: 880px) {
.fatal-pbs__cards { grid-template-columns: 1fr; }
}
/* v0.5.19 — PBS step numbers (Back up -> Restore -> Resize sequence) */
.fatal-pbsfeat__step {
position: absolute; top: 16px; right: 22px;
font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
color: rgba(239,68,68,.18); pointer-events: none;
}
/* v0.5.21 — footer logo tightened to the menu */
.fatal-footer .fatal-logo img { margin-bottom: 2px !important; }
.fatal-footer nav { padding-top: 0 !important; }
/* v0.5.22 — "What It Is" simplified to a clean 6-up grid (dropped the panel + meaningless meter) */
.fatal-workflow-menu--grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
margin-top: 8px !important;
}
@media (max-width: 900px) { .fatal-workflow-menu--grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .fatal-workflow-menu--grid { grid-template-columns: 1fr !important; } }
/* v0.5.23 — Full Tool List redesign: compact 2-up cards, red SVG icons, bigger heading */
.fatal-tools-section .fatal-section__head h2 { font-size: clamp(2.2rem, 4vw, 3.4rem) !important; }
.fatal-tools-grid { display: block !important; columns: 2; column-gap: 16px; }
.fatal-tool-category { break-inside: avoid !important; margin: 0 0 16px !important; }
.fatal-tool-category { padding: 20px !important; }
.fatal-tool-category h3 { gap: 12px !important; font-size: 1.12rem !important; margin: 0 0 14px !important; align-items: center !important; }
.fatal-tool-category h3::before { content: none !important; display: none !important; }
/* ── #5: compact home tool overview (icons + counts, links to full Guide list) ── */
.fatal-tools-overview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
gap: 14px;
margin-top: 4px;
}
.fatal-tool-cat-card {
display: flex;
align-items: center;
gap: 13px;
padding: 15px 17px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
background: linear-gradient(180deg, rgba(18,18,20,.82), rgba(10,10,10,.72));
}
.fatal-tool-cat-card .fatal-toolcat-ic { width: 36px; height: 36px; }
.fatal-tool-cat-card .fatal-toolcat-ic svg { width: 19px; height: 19px; }
.fatal-tool-cat-card b { color: #fff; font-size: .96rem; font-weight: 700; line-height: 1.25; }
.fatal-tool-cat-card__count { margin-left: auto; color: var(--fatal-muted); font-size: .8rem; white-space: nowrap; padding-left: 8px; }
.fatal-tools-overview__cta { margin-top: 28px; text-align: center; }
/* ── #3: format-aware product highlight (physical vs digital connector line) ── */
.fatal-product-highlight--digital { display: none; }
.fatal-product-summary.is-digital .fatal-product-highlight--physical { display: none; }
.fatal-product-summary.is-digital .fatal-product-highlight--digital { display: flex; }
/* Let the (now span-wrapped) category name shrink and wrap inside the flex h3
instead of overflowing — fixes the clipped heading in narrow columns. */
.fatal-toolcat-name { min-width: 0; }
/* #7 mobile: the fancy tool grid on the Guide page is deeply nested
(page panel → arsenal → category). Trim that padding on phones and shrink the
category icon so headings have room and never clip. Scoped to the guides page. */
@media (max-width: 760px) {
.page-slug-guides .fatal-page { padding: 16px !important; }
.fatal-guides-arsenal { padding: 14px !important; }
.fatal-guides-arsenal .fatal-tool-category { padding: 15px !important; overflow: visible !important; }
.fatal-guides-arsenal .fatal-tool-category h3 { font-size: 1rem !important; gap: 10px !important; }
.fatal-guides-arsenal .fatal-toolcat-ic { width: 32px !important; height: 32px !important; }
.fatal-guides-arsenal .fatal-toolcat-ic svg { width: 17px !important; height: 17px !important; }
}
.fatal-toolcat-ic {
width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
color: var(--fatal-red);
background: radial-gradient(circle at 50% 32%, rgba(239,68,68,.2), rgba(239,68,68,.05));
border: 1px solid rgba(239,68,68,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(239,68,68,.1);
}
.fatal-toolcat-ic svg { width: 21px; height: 21px; }
.fatal-tool-list { grid-template-columns: 1fr !important; gap: 8px !important; }
.fatal-tool { padding: 10px 13px !important; }
.fatal-tool b { font-size: .92rem !important; margin-bottom: 3px !important; }
.fatal-tool span { font-size: .85rem !important; line-height: 1.4 !important; }
@media (max-width: 760px) { .fatal-tools-grid { columns: 1; } }
/* v0.5.24 — buyer-persona additions: centered heads, How-it-works steps, FAQ */
.fatal-section__head--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.fatal-section__head--center .fatal-eyebrow { justify-content: center; }
.fatal-section__head--center p { margin-left: auto; margin-right: auto; }
/* How it works */
.fatal-hsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
.fatal-hstep {
position: relative; padding: 28px 24px; border: 1px solid rgba(239,68,68,.16); border-radius: 20px;
background: linear-gradient(180deg, rgba(20,20,23,.9), rgba(9,9,11,.85));
box-shadow: 0 18px 44px rgba(0,0,0,.3);
}
.fatal-hstep__num { position: absolute; top: 16px; right: 20px; font-size: 30px; font-weight: 800; color: rgba(239,68,68,.18); line-height: 1; }
.fatal-hstep__icon {
width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; color: var(--fatal-red);
background: radial-gradient(circle at 50% 32%, rgba(239,68,68,.2), rgba(239,68,68,.05));
border: 1px solid rgba(239,68,68,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 20px rgba(239,68,68,.1);
}
.fatal-hstep__icon svg { width: 24px; height: 24px; }
.fatal-hstep h3 { margin: 0 0 8px; font-size: 1.2rem; letter-spacing: -.01em; }
.fatal-hstep p { color: var(--fatal-muted); line-height: 1.6; margin: 0; }
.fatal-how-note {
display: flex; align-items: center; gap: 11px; justify-content: center; flex-wrap: wrap;
margin: 26px auto 0; max-width: 760px; text-align: center; color: #B9B9C2; font-size: .95rem;
padding: 14px 20px; border: 1px solid rgba(239,68,68,.16); border-radius: 999px; background: rgba(239,68,68,.04);
}
.fatal-how-note__ic { flex: 0 0 auto; color: var(--fatal-red); display: inline-grid; place-items: center; }
.fatal-how-note__ic svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .fatal-hsteps { grid-template-columns: 1fr; } }
/* FAQ accordion */
.fatal-faq { max-width: 820px; margin: 10px auto 0; display: grid; gap: 12px; }
.fatal-faq__item { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.022); overflow: hidden; transition: border-color .2s ease; }
.fatal-faq__item[open] { border-color: rgba(239,68,68,.32); }
.fatal-faq__item summary {
cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 700; font-size: 1.05rem; color: #fff;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.fatal-faq__item summary::-webkit-details-marker { display: none; }
.fatal-faq__item summary::after { content: "+"; color: var(--fatal-red); font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.fatal-faq__item[open] summary::after { transform: rotate(45deg); }
.fatal-faq__item[open] summary { color: var(--fatal-red); }
.fatal-faq__a { padding: 0 22px 20px; color: var(--fatal-muted); line-height: 1.65; }
/* ============================================================
v0.6.2 — WooCommerce block cart/checkout polish
(the live cart & checkout are Gutenberg blocks, not the classic templates)
============================================================ */
/* Cart line-item image: fit its grid column and show the whole product (no clipping) */
.wc-block-cart-items__row {
column-gap: 18px !important;
}
.wc-block-cart-item__image,
.wc-block-cart-item__image a {
align-self: start !important;
}
.wc-block-cart-item__image img,
.wc-block-cart-item__image a img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
border-radius: 10px !important;
background: #0b0b0b !important;
}
/* Do not truncate the product short description in the cart/checkout summary */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p,
.wc-block-cart-item__description,
.wc-block-components-product-metadata .wc-block-components-product-metadata__description {
display: block !important;
white-space: normal !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: vertical !important;
overflow: visible !important;
max-height: none !important;
text-overflow: clip !important;
}
/* Spacing for the PayPal + CAD strip injected after the block cart/checkout */
.wp-block-woocommerce-checkout .fatal-checkout-payment-strip,
.wp-block-woocommerce-cart .fatal-checkout-payment-strip,
.wc-block-checkout .fatal-checkout-payment-strip,
.wc-block-cart .fatal-checkout-payment-strip {
margin: 24px auto 0;
max-width: 640px;
}
/* ============================================================
v0.6.4 — (cart image spacing now handled by column-gap above)
============================================================ */
/* v0.6.3 — approximate USD shown next to the CAD price for US visitors */
.fatal-usd-price {
font-size: .82em;
color: #8A8A93;
white-space: nowrap;
letter-spacing: .01em;
}
/* ============================================================
v0.6.7 — product image black-to-edge + quantity stepper
============================================================ */
/* #1: drop the faint inner border and fill the frame pure black to the edge
(image size/quality unchanged — object-fit:contain stays). */
.fatal-product-main-image {
border: 0 !important;
background: #000 !important;
}
/* #2: quantity stepper — wrap becomes a pill holding [ - | n | + ] */
.fatal-product-summary form.cart .quantity {
display: inline-flex !important;
align-items: stretch;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
background: #080808;
overflow: hidden;
}
.fatal-product-summary form.cart .quantity input.qty {
width: 54px;
min-height: 48px;
text-align: center;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff;
-moz-appearance: textfield;
appearance: textfield;
}
.fatal-product-summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.fatal-product-summary form.cart .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fatal-qty-btn {
width: 44px;
min-height: 48px;
border: 0;
background: transparent;
color: #fff;
font-size: 1.35rem;
line-height: 1;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s ease, color .15s ease;
-webkit-user-select: none;
user-select: none;
}
.fatal-qty-btn:hover {
background: rgba(239,68,68,.18);
color: var(--fatal-red);
}
.fatal-qty-minus { border-right: 1px solid rgba(255,255,255,.10); }
.fatal-qty-plus { border-left: 1px solid rgba(255,255,255,.10); }
/* ============================================================
v0.7.0 — Updates download button, mobile sticky Buy Now bar,
cookie banner, and 404 / search status pages.
============================================================ */
/* Support: Updates & downloads card */
.fatal-updates-card .fatal-download-btn {
display: inline-flex; align-items: center; gap: 9px;
margin: 4px 0 6px; padding: 12px 24px; border-radius: 12px;
background-image: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff; font-weight: 700; text-decoration: none;
box-shadow: 0 10px 26px rgba(239,68,68,.28);
transition: transform .15s ease, box-shadow .15s ease;
}
.fatal-updates-card .fatal-download-btn::before { content: "\2193"; font-weight: 800; }
.fatal-updates-card .fatal-download-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(239,68,68,.38); }
.fatal-updates-card .fatal-updates-note { margin: 6px 0 0; font-size: .9rem; color: #9a9aa3; }
/* Mobile sticky Buy Now bar */
.fatal-sticky-buy {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
background: rgba(10,10,12,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,.10);
transform: translateY(110%); transition: transform .25s ease;
}
.fatal-sticky-buy.is-visible { transform: translateY(0); }
.fatal-sticky-buy__inner {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
max-width: 1200px; margin: 0 auto;
padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
}
.fatal-sticky-buy__info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fatal-sticky-buy__name { font-size: .78rem; color: #b8b8c0; }
.fatal-sticky-buy__price { font-weight: 800; color: #fff; font-size: 1.05rem; }
.fatal-sticky-buy__price .fatal-currency-code,
.fatal-sticky-buy__price .fatal-usd-price { font-size: .72em; font-weight: 600; }
.fatal-sticky-buy__btn {
flex: none; background-image: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff; border: 0; border-radius: 999px; padding: 13px 30px;
font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap;
}
@media (max-width: 768px) { .fatal-sticky-buy { display: block; } }
/* Cookie consent banner */
.fatal-cookie-bar {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(20px);
z-index: 70; width: calc(100% - 32px); max-width: 660px;
display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
background: rgba(16,16,20,.97); border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 18px 50px rgba(0,0,0,.5); color: #c9c9d2; font-size: .85rem;
opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.fatal-cookie-bar.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.fatal-cookie-bar p { margin: 0; line-height: 1.4; }
.fatal-cookie-bar a { color: var(--fatal-red); text-decoration: none; }
.fatal-cookie-bar a:hover { text-decoration: underline; }
.fatal-cookie-bar__btn {
margin-left: auto; flex: none; background: var(--fatal-red); color: #fff; border: 0;
border-radius: 999px; padding: 9px 22px; font-weight: 700; font-size: .85rem; cursor: pointer;
}
@media (max-width: 560px) {
.fatal-cookie-bar { flex-wrap: wrap; bottom: 10px; }
.fatal-cookie-bar__btn { margin-left: 0; width: 100%; }
}
/* 404 + search status pages */
.fatal-status-section { padding-top: 110px; padding-bottom: 110px; }
.fatal-status { max-width: 720px; text-align: center; margin: 0 auto; }
.fatal-status h1 { margin: 8px 0 14px; }
.fatal-status p { color: #b8b8c0; font-size: 1.05rem; }
.fatal-status__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.fatal-search-results { display: grid; gap: 14px; margin-top: 26px; }
.fatal-search-result {
display: block; padding: 18px 20px; border-radius: 14px;
background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10);
text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.fatal-search-result:hover { border-color: rgba(239,68,68,.45); transform: translateY(-1px); }
.fatal-search-result h2 { margin: 0 0 6px; font-size: 1.15rem; color: #f4f4f6; }
.fatal-search-result p { margin: 0; color: #9a9aa3; font-size: .95rem; }
.fatal-search-empty { color: #b8b8c0; font-size: 1.05rem; margin-top: 22px; }
.fatal-search-empty a { color: var(--fatal-red); }
.fatal-pagination { margin-top: 28px; }
.fatal-pagination .page-numbers {
display: inline-block; padding: 8px 14px; margin: 0 4px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.12); color: #d4d4dc; text-decoration: none;
}
.fatal-pagination .page-numbers.current { background: var(--fatal-red); border-color: var(--fatal-red); color: #fff; }
/* Keep the cookie banner clear of the mobile sticky Buy Now bar on product pages */
@media (max-width: 768px) {
body:has(.fatal-sticky-buy) .fatal-cookie-bar { bottom: 82px; }
}
/* ============================================================
v0.7.1 — WooCommerce block cart & checkout polish
============================================================ */
/* Order-summary quantity badge (was an unreadable white dot on the thumbnail) */
.wc-block-components-order-summary-item__quantity {
background: var(--fatal-red) !important;
color: #fff !important;
border: 2px solid #0a0a0c !important;
font-weight: 700 !important;
box-shadow: none !important;
}
/* "Express Checkout" title: readable, and pushed clear of the PayPal button */
.wc-block-components-express-payment { margin: 6px 0 24px !important; }
.wc-block-components-express-payment__title-container { margin-bottom: 16px !important; }
.wc-block-components-express-payment__title { color: #cfcfd6 !important; background: transparent !important; }
.wc-block-components-express-payment__event-buttons { margin-top: 8px !important; }
.wc-block-components-express-payment-continue-rule { color: #9a9aa3 !important; margin: 20px 0 !important; }
.wc-block-components-express-payment-continue-rule::before,
.wc-block-components-express-payment-continue-rule::after { border-color: rgba(255,255,255,.14) !important; }
/* PayPal "Pay in 4" Pay Later messaging — lift contrast where it is theme HTML.
If PayPal renders it inside an iframe, set the text color in the PayPal plugin's
Pay Later Messaging settings instead. */
.ppcp-messages, [data-pp-message], .wc-block-components-totals-wrapper .ppcp-messages { color: #c9c9d2 !important; }
/* ============================================================
v0.7.2 — One simple, address-first checkout path.
Hides the duplicate PayPal "express" button on the Cart and the
"Express Checkout" area at the top of the Checkout page, so every
order flows through the address form, then pays via PayPal or card.
This targets ONLY the express shortcut buttons — the normal
PayPal/card payment options on the checkout page are unaffected.
Reversible: delete this block (or re-enable express button locations
in the PayPal plugin settings) to bring the express buttons back.
============================================================ */
.wp-block-woocommerce-checkout-express-payment-block,
.wc-block-checkout__express-payment,
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule {
display: none !important;
}
/* ============================================================
v0.7.3 — Cart/checkout primary buttons + cleaner page background
============================================================ */
/* Primary action buttons → red brand button with lift (cart + checkout) */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
background-color: #ef4444 !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
font-weight: 700 !important;
box-shadow: 0 8px 20px rgba(239,68,68,.18) !important;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
transform: translateY(-1px) !important;
box-shadow: 0 10px 24px rgba(239,68,68,.26) !important;
filter: brightness(1.04) !important;
}
/* Remove the red background glow on the cart & checkout pages */
body.woocommerce-cart,
body.woocommerce-checkout {
background-image: none !important;
}
/* ============================================================
v0.7.4 — On-brand checkout: dark form fields, tidier summary,
smaller step titles, trust line, hidden Pay Later msg.
============================================================ */
/* --- Dark form fields (cart + checkout) --- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox input,
.wc-block-checkout .wc-block-components-select select,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout .wc-block-components-select select,
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-totals-coupon__input input {
background: #15151a !important;
color: #f4f4f6 !important;
border: 1px solid rgba(255,255,255,.16) !important;
border-radius: 10px !important;
-webkit-text-fill-color: #f4f4f6 !important;
}
/* Floating labels + placeholders readable on dark */
.wc-block-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wc-block-components-address-form label { color: #9a9aa3 !important; }
.wc-block-checkout .wc-block-components-text-input input::placeholder,
.wp-block-woocommerce-checkout .wc-block-components-text-input input::placeholder { color: #7f7f88 !important; }
/* Focus state — brand red */
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-combobox input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout select:focus,
.wc-block-components-address-form input:focus {
border-color: var(--fatal-red) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(239,68,68,.25) !important;
}
/* Keep validation errors visible */
.wc-block-components-text-input.has-error input { border-color: #e2401c !important; }
/* Browser autofill — keep it dark */
.wc-block-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #15151a inset !important;
-webkit-text-fill-color: #f4f4f6 !important;
}
/* Country/state dropdown panel dark */
.wc-block-components-combobox-control .components-form-token-field__suggestions-list,
.wc-block-components-combobox__suggestions {
background: #15151a !important;
color: #f4f4f6 !important;
border: 1px solid rgba(255,255,255,.16) !important;
}
/* --- Tidier order summary (drop the redundant product blurb) --- */
.wc-block-components-order-summary-item__description { display: none !important; }
/* --- Smaller checkout step titles --- */
.wc-block-components-checkout-step__title { font-size: 1.4rem !important; }
/* --- Hide PayPal "Pay in 4" Pay Later messaging --- */
.ppcp-messages, [data-pp-message], .pcp-messages { display: none !important; }
/* --- Trust line under the place-order button --- */
.wp-block-woocommerce-checkout-actions-block::after {
content: "Secure checkout \00b7 Ships from Canada";
display: block;
text-align: center;
margin-top: 12px;
font-size: .85rem;
color: #9a9aa3;
}
/* ============================================================
v0.7.5 — Remove stray right-edge red glow site-wide; sticky summary
============================================================ */
/* Drop the far-right red radial (kept the subtle top-center glow).
Applies to home, shop, support, contact, terms, privacy, etc.
Cart/checkout stay fully flat via their own rule above. */
body {
background-image: radial-gradient(circle at 50% -10%, rgba(239,68,68,.10), transparent 22rem) !important;
}
/* Keep the order summary (and total) in view while scrolling the checkout form */
@media (min-width: 1000px) {
.wc-block-checkout__sidebar {
position: sticky !important;
top: 24px !important;
align-self: flex-start !important;
}
}
/* ============================================================
v0.8.0 — Antivirus (ClamAV) feature section + checkout dropdown borders
============================================================ */
/* Front-page antivirus feature band */
.fatal-av {
display: flex; gap: 28px; align-items: flex-start;
border: 1px solid rgba(239,68,68,.20); border-radius: 20px;
background: linear-gradient(135deg, rgba(239,68,68,.07), rgba(255,255,255,.02));
padding: 34px 36px;
}
.fatal-av__icon {
flex: none; width: 64px; height: 64px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
background: rgba(239,68,68,.12); color: var(--fatal-red);
}
.fatal-av__icon svg { width: 32px; height: 32px; }
.fatal-av__body h2 { margin: 6px 0 14px; }
.fatal-av__body p { color: #c4c4cc; margin: 0 0 12px; }
.fatal-av__note { color: #9a9aa3 !important; font-size: .92rem; }
@media (max-width: 720px) {
.fatal-av { flex-direction: column; gap: 18px; padding: 26px 22px; }
}
/* Checkout: country/region + province dropdowns — remove the white border/glow.
Cast wide because the rendered class varies by WooCommerce version. */
.wc-block-components-address-form [class*="combobox"],
.wc-block-components-address-form [class*="combobox"] *,
.wc-block-components-address-form [class*="select"],
.wc-block-components-address-form [class*="select"] *,
.wc-block-components-address-form [class*="country"],
.wc-block-components-address-form [class*="country"] *,
.wc-block-components-address-form [class*="state"],
.wc-block-components-address-form [class*="state"] *,
.wc-block-components-address-form .components-base-control,
.wc-block-components-address-form .components-base-control *,
.wc-block-components-address-form button {
border-color: rgba(255,255,255,.16) !important;
box-shadow: none !important;
outline: none !important;
}
.wc-block-components-address-form [class*="combobox"] input,
.wc-block-components-address-form [class*="select"] input,
.wc-block-components-address-form select,
.wc-block-components-address-form button {
background-color: #15151a !important;
color: #f4f4f6 !important;
}
.wc-block-components-address-form [class*="combobox"]:focus-within,
.wc-block-components-address-form [class*="select"]:focus-within {
border-color: var(--fatal-red) !important;
}
/* v0.8.1 — antivirus bullet lists (home section + product card) */
.fatal-av__list, .fatal-av-bullets {
margin: 4px 0 16px; padding: 0; list-style: none;
}
.fatal-av__list li, .fatal-av-bullets li {
position: relative; padding-left: 26px; margin: 0 0 9px;
color: #c4c4cc; line-height: 1.55;
}
.fatal-av__list li::before, .fatal-av-bullets li::before {
content: ""; position: absolute; left: 4px; top: .6em;
width: 7px; height: 7px; border-radius: 50%; background: var(--fatal-red);
}
/* v0.8.3 — hero chips: wrap as individual rounded pills so a 5th chip never clips.
Overrides the earlier single-bar (nowrap, fixed max-width) treatment. */
.fatal-hero-split__chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: auto !important;
max-width: 100% !important;
overflow: visible !important;
border: 0 !important;
padding: 0 !important;
background: transparent !important;
grid-template-columns: none !important;
}
.fatal-hero-split__chip {
background: rgba(8,9,12,.6) !important;
border: 1px solid rgba(239,68,68,.20) !important;
border-right: 1px solid rgba(239,68,68,.20) !important;
border-radius: 999px !important;
padding: 9px 15px !important;
white-space: nowrap !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.fatal-hero-split__chip:last-child { border-right: 1px solid rgba(239,68,68,.20) !important; }
/* v0.8.6 — shipping note (product page + shop card) */
.fatal-product-shipping {
display: flex; align-items: center; gap: 9px;
margin: 8px 0 18px; color: #c4c4cc; font-size: 14.5px; line-height: 1.45;
}
.fatal-product-shipping svg { width: 21px; height: 21px; color: var(--fatal-red); flex: 0 0 auto; }
.fatal-product-shipping b { color: #f4f4f6; font-weight: 600; }
.fatal-shop-shipping { margin: 7px 0 15px; color: #b9b9c2; font-size: 13.5px; }
/* v0.8.7 — Contact page */
.fatal-contact-page { max-width: 940px; }
.fatal-contact-lead { font-size: 17px; line-height: 1.65; color: #c4c4cc; max-width: 700px; margin: 0 0 30px; }
.fatal-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 18px; }
.fatal-contact-card {
background: linear-gradient(180deg, rgba(22,22,27,.92), rgba(14,14,18,.92));
border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 24px 22px;
display: flex; flex-direction: column; align-items: flex-start;
}
.fatal-contact-card--primary {
border-color: rgba(239,68,68,.34);
box-shadow: 0 0 0 1px rgba(239,68,68,.10), 0 20px 44px -30px rgba(239,68,68,.55);
}
.fatal-contact-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(239,68,68,.12); color: var(--fatal-red); margin-bottom: 14px; flex: 0 0 auto;
}
.fatal-contact-ic svg { width: 23px; height: 23px; }
.fatal-contact-ic--sm { width: 38px; height: 38px; border-radius: 10px; margin: 0; }
.fatal-contact-ic--sm svg { width: 20px; height: 20px; }
.fatal-contact-card h2 { font-size: 18px; margin: 0 0 8px; color: #f4f4f6; }
.fatal-contact-card p { font-size: 14.5px; line-height: 1.55; color: #b9b9c2; margin: 0 0 16px; }
.fatal-contact-card p:last-child { margin-bottom: 0; }
.fatal-contact-btn { margin-top: auto; }
.fatal-contact-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 18px 0; }
.fatal-contact-link {
display: flex; align-items: center; gap: 14px; text-decoration: none;
background: rgba(20,20,25,.7); border: 1px solid rgba(255,255,255,.07);
border-radius: 14px; padding: 16px 18px; transition: border-color .15s ease, transform .15s ease;
}
.fatal-contact-link:hover { border-color: rgba(239,68,68,.4); transform: translateY(-2px); }
.fatal-contact-link__text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.fatal-contact-link__text strong { color: #f4f4f6; font-size: 15.5px; }
.fatal-contact-link__text span { color: #9a9aa4; font-size: 13.5px; line-height: 1.45; }
.fatal-contact-link__arrow { color: var(--fatal-red); font-size: 20px; flex: 0 0 auto; }
.fatal-contact-foot {
display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 16px 18px;
border-radius: 12px; background: rgba(20,20,25,.5); border: 1px solid rgba(255,255,255,.05);
}
.fatal-contact-foot p { margin: 0; color: #9a9aa4; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 860px) {
.fatal-contact-grid { grid-template-columns: 1fr; }
.fatal-contact-links { grid-template-columns: 1fr; }
}
/* v0.9.0 — Contact + Support polish: tighter titles/icons, contact form card */
.fatal-contact-page .fatal-contact-card h2,
.fatal-contact-page .fatal-contact-formcard h2,
.fatal-support-page .fatal-contact-card h2 {
font-size: 1.12rem !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
margin: 0 0 8px !important;
color: #f4f4f6;
}
.fatal-contact-ic { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; }
.fatal-contact-ic svg { width: 20px; height: 20px; }
.fatal-contact-ic--sm { width: 34px; height: 34px; margin: 0; }
.fatal-contact-ic--sm svg { width: 18px; height: 18px; }
.fatal-contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; margin: 0 0 18px; }
.fatal-contact-formcard {
background: linear-gradient(180deg, rgba(22,22,27,.92), rgba(14,14,18,.92));
border: 1px solid rgba(239,68,68,.30); border-radius: 16px; padding: 24px 22px;
box-shadow: 0 0 0 1px rgba(239,68,68,.08), 0 20px 44px -30px rgba(239,68,68,.5);
}
.fatal-contact-formcard > p { color: #b9b9c2; font-size: 14.5px; margin: 0 0 14px; }
.fatal-contact-side { display: flex; flex-direction: column; gap: 16px; }
.fatal-contact-side .fatal-contact-card { padding: 20px; }
.fatal-contact-formcard .wpcf7 { margin-top: 4px; }
.fatal-contact-formcard .wpcf7-form p { margin: 0 0 12px; color: #c4c4cc; font-size: 13.5px; }
.fatal-contact-formcard label { display: block; color: #c4c4cc; }
.fatal-contact-formcard input[type="text"],
.fatal-contact-formcard input[type="email"],
.fatal-contact-formcard input[type="tel"],
.fatal-contact-formcard input[type="url"],
.fatal-contact-formcard textarea,
.fatal-contact-formcard select {
width: 100%; background: #15151a; border: 1px solid rgba(255,255,255,.12);
border-radius: 10px; color: #f4f4f6; padding: 11px 13px; font-size: 14.5px; margin-top: 5px;
}
.fatal-contact-formcard textarea { min-height: 120px; resize: vertical; }
.fatal-contact-formcard input:focus,
.fatal-contact-formcard textarea:focus,
.fatal-contact-formcard select:focus { outline: none; border-color: var(--fatal-red); box-shadow: 0 0 0 2px rgba(239,68,68,.18); }
.fatal-contact-formcard input[type="submit"],
.fatal-contact-formcard .wpcf7-submit {
width: auto; background: var(--fatal-red); color: #fff; border: 0; border-radius: 10px;
padding: 12px 26px; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px;
}
.fatal-contact-formcard input[type="submit"]:hover,
.fatal-contact-formcard .wpcf7-submit:hover { filter: brightness(1.08); }
.fatal-hp { display: none !important; }
.fatal-support-grid { grid-template-columns: repeat(3, 1fr); }
.fatal-support-page .fatal-contact-card { padding: 22px 20px; }
.fatal-support-page .fatal-contact-card ul { margin: 0; padding-left: 18px; }
.fatal-support-page .fatal-contact-card li { font-size: 13.8px; line-height: 1.5; color: #b9b9c2; margin: 0 0 7px; }
.fatal-support-page .fatal-contact-card p { font-size: 13.8px; line-height: 1.55; color: #b9b9c2; }
.fatal-link-arrow { color: var(--fatal-red); text-decoration: none; font-weight: 600; font-size: 14px; }
.fatal-link-arrow:hover { text-decoration: underline; }
@media (max-width: 900px) {
.fatal-contact-layout { grid-template-columns: 1fr; }
.fatal-support-grid { grid-template-columns: 1fr; }
}
/* v0.9.2 — glow reductions, support masonry, version lines */
/* Item 1: softer glow on the contact form card */
.fatal-contact-formcard {
box-shadow: 0 14px 34px -28px rgba(0,0,0,.7) !important;
border-color: rgba(239,68,68,.20) !important;
}
/* Item 6: much-reduced glow on the download button */
.fatal-updates-card .fatal-download-btn { box-shadow: 0 3px 10px rgba(0,0,0,.30) !important; }
.fatal-updates-card .fatal-download-btn:hover { box-shadow: 0 5px 14px rgba(239,68,68,.16) !important; }
/* Item 3: Support page — masonry so varied-height cards pack tightly (no ragged gaps) */
.fatal-support-grid {
display: block !important;
column-count: 2;
column-gap: 16px;
}
.fatal-support-grid .fatal-contact-card {
break-inside: avoid;
margin: 0 0 16px;
width: 100%;
}
.fatal-support-page .fatal-contact-card .fatal-btn { margin-top: 6px; align-self: flex-start; }
@media (max-width: 900px) { .fatal-support-grid { column-count: 1; } }
/* Version lines (items 6 + 7) */
.fatal-version-line { font-size: .92rem; color: #c4c4cc; margin: 0 0 10px; }
.fatal-version-line strong { color: var(--fatal-red); }
.fatal-product-version { margin: 2px 0 18px; font-size: .9rem; color: #9a9aa3; }
.fatal-product-version strong { color: #e6e6ea; }
.fatal-footer__version { margin: 8px 0 0; font-size: .74rem; color: #6a6a73; letter-spacing: .02em; }
/* v0.9.4 — hero chips: force a balanced 3+2 instead of an orphaned chip */
.fatal-hero-split__chipbreak { flex-basis: 100% !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
@media (max-width: 760px) { .fatal-hero-split__chipbreak { display: none !important; } }
/* v0.9.5 — hero price + free-shipping line above the CTAs */
.fatal-hero-split__price { margin: 26px 0 0; font-size: 15px; color: #c4c4cc; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fatal-hero-split__price strong { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.fatal-hero-split__price span { color: #9a9aa3; }
.fatal-hero-split__price + .fatal-hero-split__actions { margin-top: 16px !important; }
/* v0.9.6 — align hero price with the button content (matches the 22px button padding) */
.fatal-hero-split__price { padding-left: 22px; }
@media (max-width: 760px) { .fatal-hero-split__price { padding-left: 0; } }
/* v0.9.7 — center the price line over the button row (shrink-to-fit CTA wrapper) */
.fatal-hero-split__cta { width: fit-content; max-width: 100%; margin-top: 26px; }
.fatal-hero-split__price { padding-left: 0 !important; margin: 0 0 16px !important; justify-content: center !important; }
.fatal-hero-split__cta .fatal-hero-split__actions { margin-top: 0 !important; }
@media (max-width: 760px) {
.fatal-hero-split__cta { width: auto; }
.fatal-hero-split__price { justify-content: flex-start !important; }
}
/* v0.9.8 — Getting Started page (boot steps, Secure Boot, BitLocker red flag, brand keys) */
.fatal-gs-page h2 { font-size: 1.3rem !important; line-height: 1.25 !important; margin: 0 0 12px !important; color: #f4f4f6; }
.fatal-gs-page h3 { font-size: 1.02rem; margin: 0 0 5px; color: #f4f4f6; }
.fatal-gs-page p { color: #c4c4cc; line-height: 1.6; }
.fatal-gs-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 30px; }
.fatal-gs-step { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, rgba(22,22,27,.7), rgba(14,14,18,.7)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 18px; }
.fatal-gs-step__num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--fatal-red); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fatal-gs-step__body h3 { margin-top: 2px; }
.fatal-gs-step__body p { font-size: 14px; margin: 0; }
.fatal-gs-block { background: linear-gradient(180deg, rgba(20,20,25,.6), rgba(12,12,16,.6)); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 24px; margin: 0 0 18px; }
.fatal-gs-block > p { margin: 0 0 12px; }
.fatal-gs-howto-label { font-weight: 700; color: #f4f4f6 !important; margin: 18px 0 8px !important; }
.fatal-gs-ol { margin: 0 0 14px; padding-left: 22px; color: #c4c4cc; }
.fatal-gs-ol li { margin: 0 0 9px; line-height: 1.55; }
.fatal-gs-muted { font-size: 13.5px; color: #9a9aa3 !important; }
.fatal-gs-alert { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(239,68,68,.06)); border: 1px solid rgba(239,68,68,.45); border-left: 4px solid var(--fatal-red); border-radius: 12px; padding: 18px; margin: 18px 0; }
.fatal-gs-alert__icon { flex: 0 0 auto; color: var(--fatal-red); }
.fatal-gs-alert__icon svg { width: 30px; height: 30px; display: block; }
.fatal-gs-alert__title { display: block; color: #fff; font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.fatal-gs-alert__body p { font-size: 14px; margin: 0 0 8px; color: #e6cccc; line-height: 1.55; }
.fatal-gs-alert__body p:last-child { margin-bottom: 0; }
.fatal-gs-alert a { color: #ff9090; font-weight: 700; }
.fatal-gs-table-wrap { overflow-x: auto; }
.fatal-gs-table { width: 100%; border-collapse: collapse; margin: 6px 0 2px; font-size: 14px; }
.fatal-gs-table th, .fatal-gs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.fatal-gs-table th { color: #9a9aa3; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.fatal-gs-table td { color: #d6d6dc; }
.fatal-gs-table td:first-child { font-weight: 700; color: #f4f4f6; }
.fatal-gs-table tbody tr:last-child td { border-bottom: 0; }
.fatal-gs-help .fatal-btn { margin-top: 4px; }
@media (max-width: 720px) {
.fatal-gs-steps { grid-template-columns: 1fr; }
.fatal-gs-alert { flex-direction: column; gap: 10px; }
}
/* v0.9.10 — fancier Getting Started step cards (keep the numbers) */
.fatal-gs-steps { gap: 16px !important; margin: 24px 0 32px !important; }
.fatal-gs-step {
position: relative; overflow: hidden;
gap: 16px !important; align-items: flex-start !important;
background: linear-gradient(165deg, rgba(28,28,34,.9), rgba(13,13,17,.92)) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 16px !important; padding: 22px 22px 22px 24px !important;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.fatal-gs-step::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, var(--fatal-red), rgba(239,68,68,0));
opacity: .7; transition: opacity .22s ease;
}
.fatal-gs-step:hover {
transform: translateY(-4px);
border-color: rgba(239,68,68,.42) !important;
box-shadow: 0 18px 40px -24px rgba(239,68,68,.55);
}
.fatal-gs-step:hover::before { opacity: 1; }
.fatal-gs-step__num {
position: relative; width: 40px !important; height: 40px !important; font-size: 17px !important;
background: linear-gradient(145deg, #ff5a5a, #c01d1d) !important;
box-shadow: 0 6px 16px -4px rgba(239,68,68,.6), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.fatal-gs-step__num::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%;
border: 1px solid rgba(239,68,68,.32);
}
.fatal-gs-step__body { position: relative; z-index: 1; }
.fatal-gs-step__body h3 { margin: 4px 0 5px; }
.fatal-gs-step__ic {
position: absolute; right: 14px; bottom: 8px; color: var(--fatal-red);
opacity: .07; pointer-events: none; transition: opacity .22s ease;
}
.fatal-gs-step__ic svg { width: 78px; height: 78px; display: block; }
.fatal-gs-step:hover .fatal-gs-step__ic { opacity: .14; }
/* v0.9.11 — reformat GS step icons as crisp top-right accents (not a faint watermark) */
.fatal-gs-step { padding-right: 48px !important; }
.fatal-gs-step__ic {
position: absolute; top: 20px; right: 18px; bottom: auto;
color: var(--fatal-red); opacity: .5;
transition: opacity .22s ease, transform .22s ease;
}
.fatal-gs-step__ic svg { width: 22px !important; height: 22px !important; }
.fatal-gs-step:hover .fatal-gs-step__ic { opacity: .9; transform: translateY(-1px); }
@media (max-width: 720px) { .fatal-gs-step__ic { top: 16px; right: 16px; } }
/* v0.9.11 — back-to-top button with circular scroll-progress ring */
.fatal-totop {
position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px;
border: 0; border-radius: 50%; padding: 0; cursor: pointer; z-index: 250;
background: rgba(14,14,18,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: #fff; display: grid; place-items: center;
box-shadow: 0 10px 30px -10px rgba(0,0,0,.7);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .25s ease;
}
.fatal-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fatal-totop:hover { box-shadow: 0 14px 36px -8px rgba(239,68,68,.5); }
.fatal-totop:hover .fatal-totop__arrow { transform: translateY(-1px); }
.fatal-totop__ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.fatal-totop__track { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 3; }
.fatal-totop__bar { fill: none; stroke: var(--fatal-red); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.fatal-totop__arrow { position: relative; width: 20px; height: 20px; transition: transform .2s ease; }
@media (max-width: 600px) { .fatal-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; } .fatal-totop__ring { width: 44px; height: 44px; } }
/* v0.9.12 — mobile polish */
/* Hero price: drop the orphaned separator when it wraps on small screens */
@media (max-width: 600px) {
.fatal-price-sep { display: none !important; }
.fatal-hero-split__price { row-gap: 2px; }
}
/* Getting Started steps: roomier, readable single-column cards on phones */
@media (max-width: 600px) {
.fatal-gs-step { padding: 16px 16px 16px 16px !important; gap: 12px !important; }
.fatal-gs-step__ic { display: none !important; }
.fatal-gs-step__num { width: 34px !important; height: 34px !important; font-size: 15px !important; }
.fatal-gs-step__num::after { inset: -3px; }
.fatal-gs-step__body h3 { font-size: 1rem; }
}
/* v0.9.13 — Proxmox Backup Server page (install or connect) + two-path reframe.
Scoped Proxmox-orange accent (--prox) lives only on this page; FATALnet red
stays primary site-wide. Reuses .fatal-gs-step / .fatal-gs-alert / .fatal-faq__item. */
.fatal-bks-page { --prox: #e57000; --prox-soft: #f0a64d; }
/* Co-brand hero */
.fatal-bks-hero { text-align: center; padding: 6px 0 8px; margin: 0 0 22px; }
.fatal-bks-lockup { display: inline-flex; align-items: center; gap: 16px; margin: 0 auto 22px; padding: 10px 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); }
.fatal-bks-lockup__brand { font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--fatal-text); }
.fatal-bks-lockup__brand::first-letter { color: var(--fatal-red); }
.fatal-bks-lockup__x { color: var(--fatal-muted); font-size: 17px; font-weight: 400; }
.fatal-bks-lockup img { height: 38px; width: auto; display: block; }
.fatal-bks-page .fatal-bks-hero h1 { margin: 0 0 14px; }
.fatal-bks-hero .fatal-contact-lead { margin-left: auto; margin-right: auto; text-align: center; max-width: 760px; }
/* Complete-loop diagram */
.fatal-bks-loop { max-width: 660px; margin: 26px auto 4px; padding: 16px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(180deg, rgba(20,20,25,.55), rgba(12,12,16,.55)); }
.fatal-bks-loop svg { display: block; width: 100%; height: auto; }
/* Two-path split */
.fatal-bks-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 22px; }
.fatal-bks-path { position: relative; border-radius: 16px; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(22,22,27,.7), rgba(14,14,18,.7)); }
.fatal-bks-path h3 { margin: 8px 0 8px; font-size: 1.22rem; letter-spacing: -.01em; }
.fatal-bks-path p { color: var(--fatal-muted); line-height: 1.6; margin: 0 0 14px; font-size: 15px; }
.fatal-bks-path__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--fatal-muted); background: rgba(255,255,255,.06); }
.fatal-bks-path--build { border-color: rgba(229,112,0,.5); background: linear-gradient(180deg, rgba(229,112,0,.1), rgba(229,112,0,.03)); }
.fatal-bks-path--build::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--prox); }
.fatal-bks-path--build .fatal-bks-path__tag { color: var(--prox-soft); background: rgba(229,112,0,.16); }
.fatal-bks-path--build .fatal-link-arrow { color: var(--prox-soft); }
/* "What you'll need" checklist */
.fatal-bks-need-label { font-weight: 700; color: var(--fatal-soft); margin: 6px 0 10px !important; }
.fatal-bks-need { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.fatal-bks-need li { display: flex; gap: 12px; align-items: flex-start; padding: 0 !important; }
.fatal-bks-need li::before { content: none !important; }
.fatal-bks-need li svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--prox); margin-top: 1px; }
.fatal-bks-need li span { color: var(--fatal-muted); line-height: 1.55; }
/* Install block: subtle Proxmox-orange top accent to mark "the Proxmox part" */
.fatal-bks-install { border-top: 2px solid rgba(229,112,0,.55); }
.fatal-bks-page code { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 1px 7px; font-size: 13.5px; color: var(--fatal-soft); }
/* Page FAQ + disclaimer */
.fatal-bks-faq { margin: 0 0 18px; }
.fatal-bks-faq h2 { margin: 0 0 14px; }
.fatal-bks-faq .fatal-faq { display: grid; gap: 10px; }
.fatal-bks-disclaimer { font-size: 12.5px; color: #6f6f78; line-height: 1.55; margin: 18px 0 0; }
@media (max-width: 640px) {
.fatal-bks-paths { grid-template-columns: 1fr; }
.fatal-bks-lockup { gap: 12px; padding: 9px 16px; }
.fatal-bks-lockup__brand { font-size: 18px; }
.fatal-bks-lockup img { height: 32px; }
.fatal-bks-loop { padding: 10px 8px; }
}
/* Home #pbs section: CTA spacing under the badge */
.fatal-pbs__cta { margin: 16px 0 0; }
/* v0.9.14 — grouped footer, two-format product, variation selector, flashing page,
source page, My Account version block. High-specificity footer rules override
the accumulated older .fatal-footer declarations above. */
/* Grouped footer (scoped to --v14; !important beats older compaction blocks above) */
.fatal-footer.fatal-footer--v14 { padding: 48px 0 28px !important; }
.fatal-footer--v14 .fatal-footer__grid {
display: grid !important; grid-template-columns: 1.7fr 1fr 1fr !important;
gap: 40px !important; align-items: start !important; text-align: left !important; justify-items: stretch !important;
}
.fatal-footer--v14 .fatal-footer__brand { max-width: 380px; }
.fatal-footer--v14 .fatal-footer__brand .fatal-logo { display: inline-block; justify-content: flex-start !important; margin: 0 0 14px; }
.fatal-footer--v14 .fatal-footer__brand .fatal-logo img { height: 40px !important; max-height: 40px !important; max-width: 230px !important; width: auto; }
.fatal-footer--v14 .fatal-footer__blurb { color: var(--fatal-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px !important; max-width: none !important; }
.fatal-footer--v14 .fatal-footer__shop {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
background: var(--fatal-red); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.fatal-footer--v14 .fatal-footer__shop:hover { background: #f25555; transform: translateY(-1px); }
.fatal-footer--v14 nav.fatal-footer__col {
display: flex !important; flex-direction: column !important; gap: 11px !important;
flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important;
text-align: left !important; padding: 0 !important; max-width: none !important;
}
.fatal-footer--v14 .fatal-footer__h {
font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6f6f78; margin: 0 0 4px;
}
.fatal-footer--v14 nav.fatal-footer__col a {
color: var(--fatal-soft) !important; font-size: 14.5px !important; text-transform: none !important;
font-weight: 500 !important; letter-spacing: 0 !important; text-decoration: none; transition: color .15s ease;
}
.fatal-footer--v14 nav.fatal-footer__col a:hover { color: var(--fatal-red) !important; }
.fatal-footer--v14 .fatal-footer__bottom {
display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07);
}
.fatal-footer--v14 .fatal-footer__bottom .fatal-footer__payments { margin: 0 !important; justify-content: flex-start !important; }
.fatal-footer--v14 .fatal-footer__payments img { height: 22px !important; }
.fatal-footer--v14 .fatal-footer__version { color: #6f6f78 !important; font-size: 13px; margin: 0 !important; max-width: none !important; }
.fatal-footer--v14 nav.fatal-footer__legal { display: flex !important; gap: 18px !important; flex-wrap: wrap; justify-content: flex-end !important; padding: 0 !important; max-width: none !important; }
.fatal-footer--v14 nav.fatal-footer__legal a {
color: var(--fatal-muted) !important; font-size: 13px !important; text-transform: none !important;
font-weight: 500 !important; letter-spacing: 0 !important; text-decoration: none; transition: color .15s ease;
}
.fatal-footer--v14 nav.fatal-footer__legal a:hover { color: var(--fatal-red) !important; }
@media (max-width: 860px) {
.fatal-footer--v14 .fatal-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
.fatal-footer--v14 .fatal-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
.fatal-footer--v14 .fatal-footer__grid { grid-template-columns: 1fr !important; }
.fatal-footer--v14 .fatal-footer__bottom { flex-direction: column !important; align-items: flex-start; }
.fatal-footer--v14 nav.fatal-footer__legal { justify-content: flex-start !important; }
}
/* Product: two delivery formats + trust row */
.fatal-product-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 10px; }
.fatal-product-format { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.025); }
.fatal-product-format__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,.12); }
.fatal-product-format__ic svg { width: 19px; height: 19px; color: var(--fatal-red); }
.fatal-product-format__name { font-weight: 700; color: #f4f4f6; font-size: 14.5px; margin: 1px 0 4px; }
.fatal-product-format p { color: var(--fatal-muted); font-size: 13px; line-height: 1.5; margin: 0; }
.fatal-product-formats__note { color: var(--fatal-soft); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.fatal-product-formats__note strong { color: #f4f4f6; }
.fatal-product-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 18px; }
.fatal-product-trust__item { display: inline-flex; align-items: center; gap: 8px; color: var(--fatal-soft); font-size: 13.5px; }
.fatal-product-trust__item svg { width: 18px; height: 18px; color: var(--fatal-red); flex: 0 0 auto; }
@media (max-width: 560px) { .fatal-product-formats { grid-template-columns: 1fr; } }
/* WooCommerce variation selector (Format) — dark theme */
.fatal-product-summary .variations { width: 100%; margin: 4px 0 12px; border-collapse: collapse; }
.fatal-product-summary .variations tr,
.fatal-product-summary .variations th,
.fatal-product-summary .variations td { display: block; text-align: left; padding: 0; border: 0; }
.fatal-product-summary .variations th { color: var(--fatal-soft); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; }
.fatal-product-summary .variations select {
width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--fatal-panel-2); color: var(--fatal-text);
border: 1px solid rgba(255,255,255,.14); font-size: 15px; -webkit-appearance: none; appearance: none;
}
.fatal-product-summary .variations select:focus { outline: none; border-color: var(--fatal-red); }
.fatal-product-summary .reset_variations { display: inline-block; margin: 6px 0 0; font-size: 13px; color: var(--fatal-muted); }
.fatal-product-summary .single_variation .woocommerce-variation-price,
.fatal-product-summary .single_variation .price { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 4px 0 12px; }
.fatal-product-summary .woocommerce-variation-availability { color: var(--fatal-muted); font-size: 13px; margin-bottom: 8px; }
/* How to flash page */
.fatal-flash-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 0; }
.fatal-flash-tool { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 18px; background: linear-gradient(180deg, rgba(22,22,27,.7), rgba(14,14,18,.7)); }
.fatal-flash-tool--rec { border-color: rgba(239,68,68,.45); }
.fatal-flash-tool__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--fatal-muted); background: rgba(255,255,255,.06); margin: 0 0 10px; }
.fatal-flash-tool--rec .fatal-flash-tool__tag { color: #ff9090; background: rgba(239,68,68,.15); }
.fatal-flash-tool h3 { margin: 0 0 8px; font-size: 1.2rem; }
.fatal-flash-tool p { color: var(--fatal-muted); font-size: 14px; line-height: 1.55; margin: 0 0 8px; }
.fatal-flash-tool__for { color: var(--fatal-soft); font-size: 13px; font-style: italic; margin: 8px 0 0 !important; }
.fatal-flash-page code, .fatal-src-page code { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 1px 7px; font-size: 13.5px; color: var(--fatal-soft); }
.fatal-flash-tool__cmd { margin: 0 0 8px !important; }
.fatal-flash-tool__cmd code { display: block; padding: 9px 11px; font-size: 12.5px; word-break: break-all; line-height: 1.5; }
@media (max-width: 760px) { .fatal-flash-tools { grid-template-columns: 1fr; } }
/* Source code page list */
.fatal-src-page .fatal-gs-ol-plain { margin: 0; padding-left: 20px; }
.fatal-src-page .fatal-gs-ol-plain li { color: var(--fatal-soft); line-height: 1.6; margin: 0 0 10px; }
/* My Account -> Downloads: version + changelog block */
.fatal-account-version { margin: 0 0 22px; padding: 18px 20px; border: 1px solid rgba(239,68,68,.3); border-radius: 14px; background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); }
.fatal-account-version__now { margin: 0 0 10px; color: #f4f4f6; }
.fatal-account-version__log { margin: 0 0 10px; padding-left: 18px; }
.fatal-account-version__log li { color: var(--fatal-muted); font-size: 14px; line-height: 1.5; margin: 0 0 6px; }
.fatal-account-version__flash { margin: 0; font-size: 14px; }
.fatal-account-version a { color: var(--fatal-red); font-weight: 600; }
/* ============================================================
v0.9.15 — format selector, hero pills, toolkit showcase,
digital reassurance, flash links, source affiliation
============================================================ */
/* --- Product page: format selector cards --- */
.fatal-format-select {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 20px 0 12px;
}
.fatal-format-card {
position: relative;
display: block;
width: 100%;
text-align: left;
cursor: pointer;
padding: 16px 44px 15px 16px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.025);
color: var(--fatal-text);
font: inherit;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.fatal-format-card:hover { border-color: rgba(255,255,255,.24); }
.fatal-format-card:focus-visible { outline: 2px solid var(--fatal-red); outline-offset: 2px; }
.fatal-format-card.is-active { border-color: var(--fatal-red); background: rgba(239,68,68,.08); }
.fatal-format-card::before {
content: "";
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.3);
background: transparent;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fatal-format-card.is-active::before {
border-color: var(--fatal-red);
background: var(--fatal-red);
box-shadow: inset 0 0 0 3px var(--fatal-panel);
}
.fatal-format-card__head { display: block; margin-bottom: 6px; }
.fatal-format-card__name {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--fatal-soft);
margin-bottom: 3px;
}
.fatal-format-card__price { display: block; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.fatal-format-card__cur { font-size: 12px; font-weight: 600; color: var(--fatal-muted); }
.fatal-format-card__desc { display: block; color: var(--fatal-muted); font-size: 12.5px; line-height: 1.45; }
/* When the JS switch is active, the cards replace the native dropdown.
Without JS the dropdown stays visible as a working fallback. */
.fatal-product-summary.fatal-has-switch .variations,
.fatal-product-summary.fatal-has-switch .single_variation { display: none !important; }
.fatal-product-summary form.cart .single_variation_wrap { width: 100%; }
.fatal-product-summary form.cart .woocommerce-variation-add-to-cart {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.fatal-product-summary form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; }
.fatal-product-summary .single_add_to_cart_button.disabled,
.fatal-product-summary .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; }
/* --- Digital-format reassurance --- */
.fatal-digital-note {
display: flex;
gap: 12px;
align-items: flex-start;
margin-top: 16px;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.02);
transition: border-color .15s ease, background .15s ease;
}
.fatal-product-summary.is-digital .fatal-digital-note {
border-color: rgba(239,68,68,.4);
background: rgba(239,68,68,.06);
}
.fatal-digital-note__ic { flex: 0 0 auto; width: 22px; height: 22px; color: var(--fatal-red); }
.fatal-digital-note__ic svg { width: 22px; height: 22px; display: block; }
.fatal-digital-note__body { font-size: 13px; line-height: 1.5; color: var(--fatal-soft); }
.fatal-digital-note__body strong { color: #fff; }
.fatal-digital-note__body a { color: var(--fatal-red); font-weight: 600; text-decoration: none; }
.fatal-digital-note__body a:hover { text-decoration: underline; }
/* --- Hero format pills --- */
.fatal-hero-formats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.fatal-hero-format {
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 9px 16px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.03);
color: var(--fatal-text);
font: inherit;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.fatal-hero-format:hover { border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.fatal-hero-format:focus-visible { outline: 2px solid var(--fatal-red); outline-offset: 2px; }
.fatal-hero-format.is-active { border-color: var(--fatal-red); background: rgba(239,68,68,.1); }
.fatal-hero-format__name {
font-size: 11px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--fatal-muted);
}
.fatal-hero-format.is-active .fatal-hero-format__name { color: var(--fatal-soft); }
.fatal-hero-format__price { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.05; }
.fatal-hero-format__cur { font-size: 11px; font-weight: 600; color: var(--fatal-muted); }
/* --- Toolkit showcase ("Inside the toolkit") --- */
.fatal-toolkit-intro { color: var(--fatal-soft); margin-bottom: 16px; }
.fatal-toolkit-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
margin: 8px 0 14px;
}
.fatal-toolkit-cat {
padding: 16px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.09);
background: rgba(255,255,255,.02);
}
.fatal-toolkit-cat__head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.fatal-toolkit-cat__ic {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(239,68,68,.12);
color: var(--fatal-red);
}
.fatal-toolkit-cat__ic svg { width: 18px; height: 18px; }
.fatal-toolkit-cat__head h3 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; }
.fatal-toolkit-cat__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.fatal-toolkit-cat__tools span {
display: inline-block;
padding: 4px 9px;
border-radius: 8px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.07);
font-size: 11.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--fatal-soft);
}
.fatal-toolkit-more { color: var(--fatal-muted); font-size: 13px; margin-top: 4px; }
/* --- How-to-flash download links --- */
.fatal-flash-tool__link { margin: 4px 0 0; }
.fatal-flash-tool__link a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--fatal-red);
font-weight: 700;
font-size: 13.5px;
text-decoration: none;
}
.fatal-flash-tool__link a:hover { text-decoration: underline; }
/* --- Source page affiliation line --- */
.fatal-src-affil { color: var(--fatal-muted); font-size: 12.5px; line-height: 1.55; margin-top: 18px; }
/* --- v0.9.15 responsive --- */
@media (max-width: 560px) {
.fatal-format-select { grid-template-columns: 1fr; }
.fatal-hero-formats { width: 100%; }
.fatal-hero-format { flex: 1 1 auto; }
}
/* ============================================================
v0.9.16 — two-product format selector, switching buy button,
shop pills, header account control, branded login + account
============================================================ */
/* --- Product format card: icon column (grid: icon | name/price/desc) --- */
.fatal-format-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "ic head" "ic desc";
gap: 3px 13px;
align-items: center;
padding: 15px 44px 15px 15px;
}
.fatal-format-card__ic {
grid-area: ic;
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(239,68,68,.12);
color: var(--fatal-red);
}
.fatal-format-card__ic svg { width: 20px; height: 20px; }
.fatal-format-card__head { grid-area: head; margin-bottom: 0; }
.fatal-format-card__desc { grid-area: desc; }
/* --- Switching Add to Cart row --- */
.fatal-buy-row { display: flex; gap: 12px; align-items: stretch; margin: 16px 0 4px; flex-wrap: wrap; }
.fatal-buy-btn {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
font-weight: 900;
font-size: 16px;
}
.fatal-buy-btn svg { width: 19px; height: 19px; }
.fatal-buy-row .fatal-btn--ghost { flex: 0 0 auto; }
/* --- Shop page (archive) format pills --- */
.fatal-shop-formats { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.fatal-shop-format {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 16px;
border-radius: 14px;
border: 1.5px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.03);
color: var(--fatal-text);
font: inherit;
transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.fatal-shop-format:hover { border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.fatal-shop-format:focus-visible { outline: 2px solid var(--fatal-red); outline-offset: 2px; }
.fatal-shop-format.is-active { border-color: var(--fatal-red); background: rgba(239,68,68,.1); }
.fatal-shop-format__ic { flex: 0 0 auto; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--fatal-red); }
.fatal-shop-format__ic svg { width: 19px; height: 19px; }
.fatal-shop-format__name { font-weight: 700; font-size: 13.5px; }
.fatal-shop-format__price { font-weight: 800; font-size: 14px; color: #fff; opacity: .85; }
.fatal-shop-format.is-active .fatal-shop-format__price { opacity: 1; }
/* --- Header account control --- */
.fatal-account-link { display: inline-flex; align-items: center; gap: 7px; color: var(--fatal-soft); text-decoration: none; font-weight: 600; transition: color .15s ease; }
.fatal-account-link:hover { color: #fff; }
.fatal-account-link__icon { display: inline-flex; width: 20px; height: 20px; }
.fatal-account-link__icon svg { width: 20px; height: 20px; }
.fatal-account-logout { margin-left: -14px; color: var(--fatal-muted); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: color .15s ease; }
.fatal-account-logout:hover { color: var(--fatal-red); }
/* --- Branded login / register header --- */
.fatal-account-brand { text-align: center; max-width: 460px; margin: 0 auto 26px; }
.fatal-account-brand__logo { height: 46px; width: auto; margin: 0 auto 14px; display: block; }
.fatal-account-brand__title { font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.fatal-account-brand__sub { color: var(--fatal-muted); font-size: 14px; line-height: 1.5; margin: 0; }
/* --- My Account dashboard panel --- */
.fatal-account-panel { margin: 0 0 22px; padding: 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); }
.fatal-account-panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fatal-account-panel__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; background: rgba(239,68,68,.14); color: var(--fatal-red); font-weight: 800; font-size: 13px; }
.fatal-account-panel__head h3 { margin: 0 0 2px; font-size: 17px; color: #fff; }
.fatal-account-panel__head p { margin: 0; color: var(--fatal-muted); font-size: 13px; }
.fatal-account-panel__log { list-style: none; margin: 0 0 16px; padding: 0; }
.fatal-account-panel__log li { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.07); color: var(--fatal-soft); font-size: 13px; line-height: 1.5; }
.fatal-account-panel__log li strong { color: var(--fatal-red); margin-right: 6px; }
.fatal-account-panel__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fatal-account-panel__actions .fatal-btn { font-size: 14px; }
/* --- Brand the WooCommerce My Account + login/register pages --- */
/* v0.9.19: My Account as a clean 2-column layout — vertical sidebar nav + content. */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 224px 1fr; gap: 22px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 7px; display: flex; flex-direction: column; gap: 3px; background: var(--fatal-panel); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--fatal-soft); text-decoration: none; font-weight: 600; font-size: 14px; transition: background .14s ease, color .14s ease; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: rgba(255,255,255,.05); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: rgba(239,68,68,.14); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { padding: 24px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: var(--fatal-panel); margin: 0; width: auto; float: none; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--fatal-red); }
@media (max-width: 760px) {
.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 14px; }
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register { max-width: 460px; margin: 0 auto; padding: 26px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: var(--fatal-panel); }
.woocommerce-account .woocommerce form .form-row label,
.woocommerce form.woocommerce-form-login label,
.woocommerce form.woocommerce-form-register label { color: var(--fatal-soft); font-weight: 600; font-size: 13.5px; }
.woocommerce-account .woocommerce form .input-text,
.woocommerce form.woocommerce-form-login .input-text,
.woocommerce form.woocommerce-form-register .input-text { width: 100%; padding: 12px 14px; border-radius: 12px; background: #080808; color: #fff; border: 1px solid rgba(255,255,255,.14); }
.woocommerce-account .woocommerce form .input-text:focus { border-color: var(--fatal-red); outline: none; }
.woocommerce-account .woocommerce-form-login__rememberme { color: var(--fatal-muted); font-size: 13px; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--fatal-red); }
/* --- v0.9.16 responsive --- */
@media (max-width: 600px) {
.fatal-buy-row { flex-direction: column; }
.fatal-buy-row .fatal-btn--ghost { flex: 1 1 auto; }
.fatal-account-logout { margin-left: 6px; }
}
/* v0.9.16 polish — give format-card text more room; keep price on one line */
.fatal-format-card { padding: 14px 38px 14px 14px; gap: 2px 11px; }
.fatal-format-card__ic { width: 34px; height: 34px; }
.fatal-format-card__ic svg { width: 18px; height: 18px; }
.fatal-format-card__name { letter-spacing: .04em; }
.fatal-format-card__price { white-space: nowrap; }
/* ============================================================
v0.9.18 — header account dropdown + clean My Account dashboard
============================================================ */
/* --- Header account dropdown --- */
.fatal-account { position: relative; display: inline-flex; align-items: center; }
.fatal-account__trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; padding: 4px 0; color: var(--fatal-soft); font: inherit; line-height: 0; }
.fatal-account__trigger:hover, .fatal-account.is-open .fatal-account__trigger { color: #fff; }
.fatal-account__icon { display: inline-flex; width: 22px; height: 22px; }
.fatal-account__icon svg { width: 22px; height: 22px; }
.fatal-account__chev { display: inline-flex; width: 13px; height: 13px; opacity: .75; transition: transform .18s ease; }
.fatal-account__chev svg { width: 13px; height: 13px; }
.fatal-account:hover .fatal-account__chev, .fatal-account.is-open .fatal-account__chev { transform: rotate(180deg); }
.fatal-account__menu {
position: absolute; top: calc(100% + 12px); right: 0; min-width: 188px;
background: #131316; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 7px;
box-shadow: 0 18px 44px rgba(0,0,0,.5);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 1200;
}
.fatal-account__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.fatal-account:hover .fatal-account__menu, .fatal-account:focus-within .fatal-account__menu, .fatal-account.is-open .fatal-account__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fatal-account__menu a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--fatal-soft); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 1; transition: background .14s ease, color .14s ease; }
.fatal-account__menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.fatal-account__menu-logout { color: var(--fatal-muted) !important; border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px; padding-top: 11px !important; }
.fatal-account__menu-logout:hover { color: var(--fatal-red) !important; background: transparent !important; }
@media (max-width: 880px) {
.fatal-account { width: 100%; align-items: flex-start; }
.fatal-account__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 4px 0 0 30px; min-width: 0; display: none; }
.fatal-account.is-open .fatal-account__menu { display: block; }
.fatal-account__menu a { padding: 8px 0; }
.fatal-account__menu-logout { padding-top: 8px !important; }
}
/* --- My Account dashboard (clean) --- */
.fatal-account-dash__welcome { margin-bottom: 18px; }
.fatal-account-dash__welcome h2 { margin: 0 0 6px; font-size: 23px; color: #fff; }
.fatal-account-dash__welcome p { margin: 0; color: var(--fatal-muted); font-size: 14px; }
.fatal-account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 18px; }
.fatal-account-card { display: block; padding: 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.fatal-account-card:hover { border-color: var(--fatal-red); background: rgba(239,68,68,.06); transform: translateY(-2px); }
.fatal-account-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(239,68,68,.12); color: var(--fatal-red); margin-bottom: 11px; }
.fatal-account-card__ic svg { width: 20px; height: 20px; }
.fatal-account-card__t { display: block; font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 3px; }
.fatal-account-card__d { display: block; color: var(--fatal-muted); font-size: 12.5px; line-height: 1.45; }
/* ============================================================
v0.9.20 — dropdown accent fix + smaller account-page buttons
============================================================ */
/* #2: the account dropdown items inherit .fatal-nav a::after (the red underline),
which sits at bottom:-9px — fine for a top-nav link, but far below a tall
dropdown item. Re-anchor it to sit directly under each item. */
/* #1 (revised): clean, professional dropdown hover — a soft red-tinted rounded
highlight contained to the item (no long under-text line, nothing that extends
past the text). Matches the My Account sidebar's active-item treatment. */
.fatal-account__menu a::after { display: none !important; content: none !important; }
.fatal-account__menu a::before { display: none !important; content: none !important; }
.fatal-account__menu a { text-decoration: none !important; transition: background .14s ease, color .14s ease; }
.fatal-account__menu a:hover { background: rgba(239,68,68,.12) !important; color: #fff !important; }
/* #4 + #6: shrink WooCommerce's utility buttons on the account pages
(e.g. "Browse products" on empty Downloads/Orders) while keeping the red
effect. Does not touch the .fatal-btn panel/CTA buttons. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content a.button {
padding: 9px 18px !important;
font-size: 13.5px !important;
font-weight: 800 !important;
box-shadow: 0 6px 18px rgba(239,68,68,.22) !important;
}
/* ============================================================
v0.9.20 — Guides page
============================================================ */
.fatal-guides-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 30px 0 8px; }
.fatal-guide-card { background: var(--fatal-panel); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.fatal-guide-card__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.fatal-guide-card__num { font-size: 13px; font-weight: 800; color: var(--fatal-red); letter-spacing: .04em; background: rgba(239,68,68,.12); border-radius: 8px; padding: 3px 8px; flex: none; }
/* #1: guide titles were huge on the live page because .page .fatal-page h2
(set by page.php's wrapper) outranks a plain class selector — size them with
!important like the getting-started page does. */
.fatal-guides-page h2 { font-size: clamp(1.45rem, 2.6vw, 1.75rem) !important; line-height: 1.2 !important; }
.fatal-guide-card__head h2 { font-size: 1.18rem !important; line-height: 1.25 !important; margin: 0; color: #fff; letter-spacing: -.01em; }
/* #4 + #6 (revised): put "Browse products" on its own line BELOW the empty-state
text on the Downloads and Orders pages. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
display: block; width: fit-content; margin: 14px 0 0;
}
.fatal-guide-card__intent { color: var(--fatal-muted); font-size: 14.5px; line-height: 1.62; margin: 0 0 16px; }
.fatal-guide-steps { margin: 0 0 20px; padding-left: 0; list-style: none; counter-reset: gstep; }
.fatal-guide-steps li { position: relative; padding-left: 30px; margin-bottom: 13px; color: var(--fatal-soft); font-size: 14.5px; line-height: 1.62; counter-increment: gstep; }
.fatal-guide-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--fatal-soft); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fatal-guide-card__tools { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.fatal-guide-card__tools-label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fatal-muted); margin-bottom: 8px; }
.fatal-guide-tools { display: flex; flex-wrap: wrap; gap: 7px; }
.fatal-guide-tool { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.28); color: #fecaca; font-size: 12.5px; font-weight: 700; }
.fatal-guide-tool--link { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--fatal-soft); text-decoration: none; transition: border-color .14s ease, color .14s ease; }
.fatal-guide-tool--link:hover { border-color: var(--fatal-red); color: #fff; }
.fatal-guides-arsenal { margin: 40px 0 8px; padding: 28px; border-radius: 18px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(24,24,27,.6), rgba(10,10,10,.4)); }
.fatal-guides-arsenal > h2 { margin: 0 0 6px; }
.fatal-guides-arsenal > p { color: var(--fatal-muted); margin: 0 0 20px; }
.fatal-guides-toolcats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.fatal-guides-toolcat h3 { font-size: 14px; color: #fff; margin: 0 0 9px; }
.fatal-guides-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fatal-guides-chips span { display: inline-flex; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--fatal-soft); font-size: 12.5px; font-weight: 600; }
.fatal-guides-arsenal__note { margin: 18px 0 0 !important; color: var(--fatal-muted); font-size: 13px; }
.fatal-guides-arsenal__note a { color: var(--fatal-red); }
.fatal-guides-cta { margin-top: 40px; text-align: center; padding: 34px 24px; border-radius: 18px; border: 1px solid rgba(239,68,68,.25); background: radial-gradient(120% 140% at 50% 0%, rgba(239,68,68,.12), transparent 60%); }
.fatal-guides-cta h2 { margin: 0 0 8px; }
.fatal-guides-cta p { color: var(--fatal-muted); max-width: 540px; margin: 0 auto 18px; }
@media (max-width: 820px) {
.fatal-guides-grid { grid-template-columns: 1fr; }
.fatal-guides-toolcats { grid-template-columns: 1fr; }
}
/* ============================================================
v0.9.22 — mobile polish (account control, guides density)
============================================================ */
.fatal-account__label { display: none; }
@media (max-width: 880px) {
/* Make the account control clear and always-expanded inside the mobile menu
(a bare icon at the bottom of the menu wasn't obviously tappable). */
.fatal-account { flex-direction: column; align-items: flex-start; }
.fatal-account__trigger { padding: 8px 0; gap: 10px; color: var(--fatal-soft); }
.fatal-account__label { display: inline; font-weight: 600; font-size: 15px; }
.fatal-account__chev { display: none; }
.fatal-account__menu { display: block !important; padding: 2px 0 0 32px; }
.fatal-account__menu a::before { display: none !important; }
}
@media (max-width: 820px) {
/* Tighter guides page on phones — less scrolling. */
.fatal-guides-grid { gap: 13px; margin-top: 22px; }
.fatal-guide-card { padding: 18px; }
.fatal-guides-arsenal { padding: 20px; margin: 30px 0 6px; }
.fatal-guides-cta { padding: 28px 18px; margin-top: 30px; }
}
/* ===== PBS scan callout (#2, v0.9.27) ===== */
.fatal-pbs__scannote {
display:flex; align-items:flex-start; gap:14px;
margin-top:24px; padding:18px 20px;
border:1px solid rgba(239,68,68,.22); border-radius:16px;
background:linear-gradient(180deg, rgba(239,68,68,.07), rgba(239,68,68,.02));
}
.fatal-pbs__scannote-ic {
flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
border:1px solid var(--fatal-border); border-radius:12px;
background:rgba(239,68,68,.10); color:var(--fatal-red);
}
.fatal-pbs__scannote-ic svg { width:20px; height:20px; }
.fatal-pbs__scannote p { margin:0; color:var(--fatal-soft); line-height:1.55; }
.fatal-pbs__scannote strong { color:#fff; }
/* ===== Footer disclaimer (moved from open-source section, v0.9.28) ===== */
.fatal-footer__disclaimer { text-align:center; color:var(--fatal-muted); font-size:12px; line-height:1.55; margin:16px auto 0; max-width:780px; opacity:.78; }
/* ===== SEO guide article pages (#5, v0.9.28) ===== */
.fatal-seo-guide { max-width: 760px; margin: 0 auto; }
.fatal-seoguide__back { margin: 0 0 6px; }
.fatal-seoguide__back a { color: var(--fatal-muted); text-decoration: none; font-size: 13px; }
.fatal-seoguide__back a:hover { color: var(--fatal-red); }
.fatal-seo-guide h1 { font-size: clamp(1.85rem, 4.2vw, 2.6rem) !important; line-height: 1.1 !important; letter-spacing: -.02em; margin: 4px 0 18px !important; color: #fff; }
.fatal-seo-guide h2 { font-size: 1.3rem !important; line-height: 1.25 !important; margin: 30px 0 12px !important; color: #fff; }
.fatal-seoguide__intro { font-size: 1.06rem; line-height: 1.66; color: var(--fatal-soft); margin: 0 0 4px; }
.fatal-seoguide__note { font-size: 14px; line-height: 1.6; color: var(--fatal-muted); border-left: 2px solid rgba(239,68,68,.45); padding: 2px 0 2px 15px; margin: 18px 0; }
.fatal-seoguide__results { color: var(--fatal-soft); line-height: 1.66; }
.fatal-seoguide__steps { margin-top: 4px; }
.fatal-seoguide__related { margin: 30px 0 0; padding: 22px 24px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(24,24,27,.4); }
.fatal-seoguide__related h2 { margin: 0 0 12px !important; font-size: 1.05rem !important; }
.fatal-seoguide__related ul { list-style: none; padding: 0; margin: 0; }
.fatal-seoguide__related li { margin: 0 0 9px; }
.fatal-seoguide__related li:last-child { margin-bottom: 0; }
.fatal-seoguide__related a { color: var(--fatal-red); text-decoration: none; font-weight: 600; }
.fatal-seoguide__related a:hover { text-decoration: underline; }
/* ============================================================
v0.9.29 — My Account polish (icons, forms, tables, friendly)
============================================================ */
/* left-nav icons */
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 11px; }
.fatal-acct-nav__ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--fatal-muted); transition: background .14s ease, color .14s ease; }
.fatal-acct-nav__ic svg { width: 17px; height: 17px; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover .fatal-acct-nav__ic { background: rgba(239,68,68,.14); color: var(--fatal-red); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a .fatal-acct-nav__ic { background: rgba(239,68,68,.2); color: var(--fatal-red); }
.fatal-acct-nav__t { line-height: 1.2; }
/* dashboard panel description (replaces the old version changelog list) */
.fatal-account-panel__desc { margin: 0 0 16px; color: var(--fatal-soft); font-size: 14px; line-height: 1.6; }
/* friendly headings + text inside the content panel */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 { margin: 0 0 14px; color: #fff; font-size: 19px; }
.woocommerce-account .woocommerce-MyAccount-content p { color: var(--fatal-soft); }
/* forms: account details + addresses */
.woocommerce-account .woocommerce-MyAccount-content form .form-row { margin: 0 0 16px; }
.woocommerce-account .woocommerce-MyAccount-content label { display: block; margin: 0 0 6px; color: var(--fatal-soft); font-size: 13.5px; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #fff;
font-size: 14px; transition: border-color .14s ease, background .14s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
outline: none; border-color: var(--fatal-red); background: rgba(239,68,68,.04);
}
.woocommerce-account .woocommerce-MyAccount-content input::placeholder,
.woocommerce-account .woocommerce-MyAccount-content textarea::placeholder { color: #6b6b73; }
.woocommerce-account .woocommerce-MyAccount-content fieldset { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 20px; margin: 24px 0 0; }
.woocommerce-account .woocommerce-MyAccount-content fieldset legend { padding: 0 8px; color: #fff; font-weight: 700; font-size: 15px; }
.woocommerce-account .woocommerce-MyAccount-content .form-row .description { color: var(--fatal-muted); font-size: 12.5px; }
/* addresses */
.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; margin-top: 6px; }
.woocommerce-account .woocommerce-Address { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 20px; background: rgba(255,255,255,.02); }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font-size: 15px; margin: 0 0 8px; }
.woocommerce-account .woocommerce-Address address { color: var(--fatal-soft); font-size: 13.5px; line-height: 1.6; font-style: normal; }
/* orders table */
.woocommerce-account .woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.woocommerce-account .woocommerce-orders-table th { background: rgba(255,255,255,.04); color: var(--fatal-muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.1); }
.woocommerce-account .woocommerce-orders-table td { padding: 14px; color: var(--fatal-soft); font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: 0; }
/* friendlier empty-state notice on the dark panel */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { background: rgba(255,255,255,.03); border-top: 2px solid var(--fatal-red); color: var(--fatal-soft); border-radius: 10px; }
/* ===== Dashboard setup path (#1, v0.9.30) ===== */
.fatal-account-setup__label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fatal-muted); margin: 4px 0 9px; }
.fatal-account-setup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fatal-account-setup__step { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); text-decoration: none; transition: border-color .14s ease, background .14s ease, transform .12s ease; }
.fatal-account-setup__step:hover { border-color: var(--fatal-red); background: rgba(239,68,68,.06); transform: translateY(-2px); }
.fatal-account-setup__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(239,68,68,.14); color: var(--fatal-red); font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.fatal-account-setup__t { color: #fff; font-weight: 700; font-size: 14.5px; }
.fatal-account-setup__d { color: var(--fatal-muted); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 560px) { .fatal-account-setup { grid-template-columns: 1fr; } }
/* Disable Microsoft Edge image-hover "Visual Search" button on the decorative hero stick image (image is aria-hidden with no link or hover, so this is safe) */
.fatal-hero-split__image { pointer-events: none; }
/* ============================================================
Feature Requests board (v0.9.38)
============================================================ */
.fatal-fr-page { padding: 48px 0 80px; }
.fatal-fr { max-width: 820px; }
.fatal-fr__head { margin-bottom: 28px; }
.fatal-fr__head h1 { font-size: 2rem; margin: 0 0 .4em; }
.fatal-fr__lead { color: #a1a1aa; line-height: 1.6; margin: 0; }
/* gate */
.fatal-fr__gate { border: 1px solid #27272a; border-radius: 14px; background: #131316; padding: 28px; text-align: center; }
.fatal-fr__gate-title { font-weight: 700; font-size: 1.15rem; margin: 0 0 .5em; color: #fafafa; }
.fatal-fr__gate-body { color: #a1a1aa; margin: 0 0 1.2em; }
.fatal-fr__gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }
.fatal-btn--ghost { background: transparent; border: 1px solid #3f3f46; color: #e4e4e7; }
.fatal-btn--ghost:hover { border-color: #ef4444; color: #fff; }
/* notes */
.fatal-fr__note { border-radius: 10px; padding: 12px 16px; margin: 0 0 20px; font-size: .95rem; }
.fatal-fr__note--ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: #86efac; }
.fatal-fr__note--warn { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; }
/* submit form */
.fatal-fr__form { border: 1px solid #27272a; border-radius: 12px; background: #131316; margin: 0 0 26px; }
.fatal-fr__form > summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: #fafafa; list-style: none; }
.fatal-fr__form > summary::-webkit-details-marker { display: none; }
.fatal-fr__form[open] > summary { border-bottom: 1px solid #27272a; }
.fatal-fr__form form { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.fatal-fr__label { display: block; font-size: .9rem; color: #d4d4d8; font-weight: 600; }
.fatal-fr__opt { color: #71717a; font-weight: 400; }
.fatal-fr__label input, .fatal-fr__label textarea { width: 100%; margin-top: 6px; box-sizing: border-box; background: #0a0a0a; border: 1px solid #3f3f46; border-radius: 8px; color: #fafafa; padding: 10px 12px; font: inherit; }
.fatal-fr__label input:focus, .fatal-fr__label textarea:focus { outline: none; border-color: #ef4444; }
.fatal-fr__form button { align-self: flex-start; }
/* list */
.fatal-fr__list { display: flex; flex-direction: column; gap: 12px; }
.fatal-fr__item { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #27272a; border-radius: 12px; background: #131316; padding: 16px; }
.fatal-fr__vote { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 54px; padding: 8px 6px; background: #0a0a0a; border: 1px solid #3f3f46; border-radius: 10px; color: #d4d4d8; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.fatal-fr__vote:hover { border-color: #71717a; color: #fafafa; }
.fatal-fr__vote.is-voted { background: rgba(239,68,68,.14); border-color: #ef4444; color: #fca5a5; }
.fatal-fr__vote:disabled { opacity: .6; cursor: default; }
.fatal-fr__chev { font-size: .8rem; line-height: 1; }
.fatal-fr__count { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.fatal-fr__body { flex: 1 1 auto; min-width: 0; }
.fatal-fr__title { margin: 0 0 .35em; font-size: 1.08rem; color: #fafafa; }
.fatal-fr__desc { margin: 0 0 .7em; color: #a1a1aa; line-height: 1.55; font-size: .95rem; }
.fatal-fr__empty { color: #71717a; text-align: center; padding: 30px; border: 1px dashed #27272a; border-radius: 12px; }
/* status badges */
.fatal-fr__status { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.fatal-fr__status--open { color: #a1a1aa; border-color: #3f3f46; background: rgba(255,255,255,.03); }
.fatal-fr__status--planned { color: #93c5fd; border-color: rgba(59,130,246,.5); background: rgba(59,130,246,.12); }
.fatal-fr__status--in-progress { color: #fdba74; border-color: rgba(229,112,0,.55); background: rgba(229,112,0,.14); }
.fatal-fr__status--done { color: #86efac; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); }
.fatal-fr__status--declined { color: #71717a; border-color: #3f3f46; background: rgba(255,255,255,.02); }
@media (max-width: 600px) {
.fatal-fr-page { padding: 32px 0 60px; }
.fatal-fr__head h1 { font-size: 1.6rem; }
.fatal-fr__item { padding: 13px; gap: 11px; }
.fatal-fr__vote { min-width: 46px; padding: 7px 4px; }
}
.fatal-fr__formnote { margin: -2px 0 2px; font-size: .82rem; color: #71717a; }
/* Speed-test metric chips (v0.9.40) */
.fatal-speed-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.fatal-speed-metric { display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(239,68,68,.30); background: rgba(239,68,68,.06); }
.fatal-speed-metric__name { font-size: 13px; font-weight: 700; color: #fff; }
.fatal-speed-metric__unit { font-size: 10.5px; font-weight: 600; color: var(--fatal-muted); text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.fatal-speed-by { font-size: 13px; color: var(--fatal-muted); margin: 0; }
@media (max-width: 600px) { .fatal-speed-metric { flex: 1 1 calc(50% - 10px); min-width: 0; } }
/* Speed-test gauge visual (v0.9.41) */
.fatal-speed-section .fatal-av__icon { width: auto; height: auto; background: none; border-radius: 0; padding-top: 6px; }
.fatal-speed-section .fatal-av__icon svg { width: 150px; height: auto; }
@media (max-width: 720px) { .fatal-speed-section .fatal-av__icon svg { width: 168px; } }
/* ============================================================
v0.9.42 — hero beside-pills CTA, lighter chips, source download button
============================================================ */
/* Buy Now sits on the same row as the format pills, matched to their height */
.fatal-hero-buyrow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.fatal-hero-buyrow .fatal-hero-formats { margin: 0; }
.fatal-hero-buyrow .fatal-hero-buy { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
.fatal-hero-buyrow .fatal-hero-buy { flex: 1 0 100%; justify-content: center; padding: 13px; }
}
/* Lighter feature chips — plain text with small red icons, no boxes */
.fatal-hero-split__chips { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.fatal-hero-split__chip { border: 0 !important; background: transparent !important; padding: 0 !important; font-size: 12.5px; color: #9a9aa3; gap: 6px; }
.fatal-hero-split__chip-icon { width: auto !important; height: auto !important; background: transparent !important; padding: 0 !important; color: var(--fatal-red); }
.fatal-hero-split__chip-icon svg { width: 15px; height: 15px; }
.fatal-hero-split__chipbreak { display: none !important; }
/* Source Code page — visible download button */
.fatal-src-dl { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 16px; border-radius: 10px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: var(--fatal-soft); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.fatal-src-dl:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.55); }
.fatal-src-dl svg { flex: none; }
/* ============================================================
v0.9.43 — hero two buy cards (replaces beside-pills) + chip spacing
============================================================ */
.fatal-hero-buycards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.fatal-hero-buycard { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.fatal-hero-buycard:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.fatal-hero-buycard--lead { border: 1.5px solid #ef4444; background: rgba(239,68,68,.1); }
.fatal-hero-buycard--lead:hover { border-color: #ef4444; background: rgba(239,68,68,.15); }
.fatal-hero-buycard__head { display: flex; align-items: center; gap: 8px; }
.fatal-hero-buycard__ic { width: 16px; height: 16px; color: #9a9aa3; flex: none; }
.fatal-hero-buycard--lead .fatal-hero-buycard__ic { color: var(--fatal-red); }
.fatal-hero-buycard__name { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #a1a1aa; }
.fatal-hero-buycard--lead .fatal-hero-buycard__name { color: #e5e5e5; }
.fatal-hero-buycard__price { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.fatal-hero-buycard__cur { font-size: 12px; font-weight: 600; color: #71717a; }
.fatal-hero-buycard__note { font-size: 12.5px; color: #a1a1aa; }
.fatal-hero-buycard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 13px; font-weight: 700; color: #e5e5e5; }
.fatal-hero-buycard--lead .fatal-hero-buycard__go { color: var(--fatal-red); }
.fatal-hero-buycards__foot { font-size: 12.5px; color: #71717a; margin: 0; }
@media (max-width: 600px) { .fatal-hero-buycards { grid-template-columns: 1fr; } }
/* give the feature chips room so they don't crowd the cards */
.fatal-hero-split__chips { gap: 16px 22px; margin-top: 22px; }
/* === v0.9.45 — hero format switcher restored (selectors, card-style, switching ship line) === */
.fatal-hero-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 0 0 13px; }
.fatal-hero-format { align-items: flex-start; text-align: left; gap: 4px; padding: 11px 14px; border-radius: 12px; }
.fatal-hero-format__head { display: flex; align-items: center; gap: 6px; }
.fatal-hero-format__ic { width: 15px; height: 15px; color: var(--fatal-muted); flex: 0 0 auto; }
.fatal-hero-format.is-active .fatal-hero-format__ic { color: var(--fatal-red); }
.fatal-hero-format.is-active .fatal-hero-format__name { color: var(--fatal-red); }
.fatal-hero-format__price { font-size: 20px; }
.fatal-hero-shipline { margin: 0 0 16px; font-size: 13px; color: var(--fatal-soft); line-height: 1.5; }
.fatal-hero-split__cta .fatal-hero-split__actions { margin: 0; }
.fatal-hero-buy__price { font-weight: 700; }
/* ============================================================
v0.9.46 — authoritative overrides (appended last = wins)
============================================================ */
/* #1 — Buy Now must NOT resize when switching format. Pin it to its own
content width (both prices are the same length) so only the line below changes. */
.fatal-hero-split__cta .fatal-hero-buy { width: max-content !important; min-width: 0 !important; flex: 0 0 auto !important; }
/* #2 — feature chips: kill the broken pill grid + borders. Clean borderless
labels with small red icons that wrap naturally. Overrides all ~15 duplicates. */
.fatal-hero-split__chips { display: flex !important; flex-wrap: wrap !important; gap: 9px 18px !important; grid-template-columns: none !important; margin-top: 18px !important; max-width: none !important; }
.fatal-hero-split__chip { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: auto !important; flex: 0 0 auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; white-space: nowrap !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 600 !important; color: rgba(255,255,255,.82) !important; }
.fatal-hero-split__chip svg, .fatal-hero-split__chip .fatal-chip-icon, .fatal-hero-split__chip-icon { width: 15px !important; height: 15px !important; color: #ef4444 !important; flex: 0 0 auto !important; }
.fatal-hero-split__chipbreak { display: none !important; }
/* #4 — account empty states (Orders, Payment methods): remove the red top-bar
and present the notice as a clean bordered card (message + button). */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice {
border: 1px solid rgba(255,255,255,.09) !important;
border-top: 1px solid rgba(255,255,255,.09) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.02) !important;
color: var(--fatal-soft) !important;
padding: 30px 28px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 16px !important;
font-size: 15px !important;
box-shadow: none !important;
margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message::before { display: none !important; }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button { margin: 0 !important; }
/* #3 + #5 — account dashboard: toolkit download panel + foot line */
.fatal-account-download { margin: 0 0 22px; padding: 22px 24px; border: 1px solid rgba(239,68,68,.20); border-radius: 16px; background: linear-gradient(180deg, rgba(239,68,68,.06), rgba(239,68,68,.02)); }
.fatal-account-download__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fatal-muted); margin: 0 0 12px; }
.fatal-account-download__row { display: flex; flex-wrap: wrap; gap: 12px; }
.fatal-account-dl-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: linear-gradient(135deg, var(--fatal-red), #B91C1C); color: #fff !important; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px rgba(239,68,68,.26); transition: transform .12s ease, box-shadow .15s ease; }
.fatal-account-dl-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(239,68,68,.34); }
.fatal-account-dl-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.fatal-account-download__note { margin: 14px 0 0; font-size: 13px; color: var(--fatal-soft); }
.fatal-account-download__note a { color: var(--fatal-red); font-weight: 600; }
.fatal-account-dash__foot { margin: 20px 0 0; font-size: 13px; color: var(--fatal-muted); }
.fatal-account-dash__foot strong { color: var(--fatal-soft); }
/* v0.9.47 — #1 REAL fix. The CTA block was width:fit-content, so it hugged its
widest line. Digital's longer ship line stretched the whole block, and the
1fr/1fr pills tracked it → pills grew on switch. Cap the CTA to a stable width
so the pills hold their size; the ship line wraps inside it instead. */
.fatal-hero-split__cta { width: 100% !important; max-width: 420px !important; }
/* v0.9.50 — center the icon/name and price inside the format pills (was left-aligned in v0.9.45). */
.fatal-hero-format { align-items: center !important; text-align: center !important; }
.fatal-hero-format__head { justify-content: center !important; }
/* v0.9.51 — widen the CTA so the pills line up with the description text and the
ship line fits on one line (was capped at 420px). Still width:100% + max-width
(not fit-content), so the pills stay a fixed size when switching format. */
.fatal-hero-split__cta { width: 100% !important; max-width: 600px !important; }
/* ===========================================================================
v0.9.53 - Restore the format switcher (clicking a pill switches the eyebrow,
ship line, and Buy Now price) plus the separate Buy Now button, reverting the
v0.9.52 buy-pill experiment. KEEP the layout centered and at the compact 420px
width. The centering rules below are generic (copy / title / text / cta /
chips), so they apply to the restored switcher markup. Appended last so it wins
over the duplicated hero blocks - including the v0.9.51 600px rule above. */
/* Center the whole copy block */
.fatal-hero-split__copy { text-align: center !important; }
.fatal-hero-split__title { margin-left: auto !important; margin-right: auto !important; }
.fatal-hero-split__text { margin-left: auto !important; margin-right: auto !important; }
.fatal-hero-split__chips { justify-content: center !important; }
/* CTA back to the compact v0.9.50 width (overrides the v0.9.51 600px) + centered */
.fatal-hero-split__cta { width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; }
/* Center the separate Buy Now button within the centered CTA */
.fatal-hero-split__actions { display: flex !important; justify-content: center !important; }
/* Ship line centered under the pills */
.fatal-hero-shipline { text-align: center !important; }
/* ===========================================================================
v0.9.54 - Clean, professional login page. SCOPED to the logged-OUT account
page only (body.woocommerce-account:not(.logged-in)) so the logged-in
dashboard is untouched. The page panel becomes one compact centered card,
the logo is removed (functions.php), WooCommerce's duplicate "Login" heading
is hidden, the account sidebar-grid and the form's own panel are flattened,
and the card is vertically centered to fit a single screen with no scroll.
=========================================================================== */
/* Vertically center the login card in the viewport (single screen, no scroll) */
body.woocommerce-account:not(.logged-in) .fatal-section {
min-height: calc(100vh - 130px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 24px 0 !important;
}
/* The page panel IS the login card now: compact + centered */
body.woocommerce-account:not(.logged-in) .fatal-page {
width: 100% !important;
max-width: 416px !important;
margin: 0 auto !important;
padding: 34px 32px !important;
}
/* Flatten the account container (kill the 224px/1fr grid + its own panel) */
body.woocommerce-account:not(.logged-in) .woocommerce {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* Header (heading + subtext) inside the card */
body.woocommerce-account:not(.logged-in) .fatal-account-brand { max-width: none !important; margin: 0 0 24px !important; padding: 0 !important; }
body.woocommerce-account:not(.logged-in) .fatal-account-brand__title { font-size: 23px !important; margin: 0 0 9px !important; }
body.woocommerce-account:not(.logged-in) .fatal-account-brand__sub { font-size: 13px !important; line-height: 1.55 !important; }
/* Hide WooCommerce's redundant "Login" (and any "Register") heading */
body.woocommerce-account:not(.logged-in) .woocommerce h2:not(.fatal-account-brand__title) { display: none !important; }
/* Flatten the form's own panel so only the card shows */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login { max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
/* Fields */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .form-row-wide { margin: 0 0 16px !important; }
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login label { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: #d4d4d8 !important; margin: 0 0 6px !important; }
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .input-text { width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; border-radius: 11px !important; background: #08090b !important; border: 1px solid rgba(255,255,255,.12) !important; color: #fff !important; }
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .password-input { display: block !important; position: relative !important; width: 100% !important; }
/* Remember-me on its own line, Log in button full-width below */
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login p.form-row:not(.form-row-wide) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; margin: 4px 0 0 !important; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center !important; gap: 8px !important; align-self: flex-start !important; margin: 0 !important; color: var(--fatal-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input { width: 15px !important; height: 15px !important; margin: 0 !important; accent-color: var(--fatal-red) !important; }
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login button[name="login"],
body.woocommerce-account:not(.logged-in) form.woocommerce-form-login .woocommerce-form-login__submit { width: 100% !important; margin: 0 !important; float: none !important; }
/* Lost password + reassurance line, centered below */
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword { text-align: center !important; margin: 18px 0 0 !important; }
body.woocommerce-account:not(.logged-in) .fatal-login-foot { text-align: center !important; color: var(--fatal-muted) !important; font-size: 12px !important; line-height: 1.5 !important; margin: 20px 0 0 !important; }
/* ===========================================================================
v0.9.56 — MOBILE-ONLY refinements. Desktop is untouched: every rule below
lives inside a max-width media query.
1) Mobile menu (dropdown shows at <=880px): remove the misaligned red
underline; turn the cart pill and the account dropdown into clean,
consistent full-width rows; give the current page a clean highlight.
2) De-cramp inner pages on phones (<=768px): trim the stacked panel/card
padding (contact form card, guide tool cards, and any other panel page)
so content gets real width back.
=========================================================================== */
@media (max-width: 880px) {
/* 1a) Kill the red underline on every mobile-menu link. It's anchored at
left:50% (centered), so in the left-aligned dropdown it floats out in
the middle of the row instead of sitting under the text. */
.fatal-header .fatal-nav a::after,
.fatal-header .fatal-nav > a::after,
.fatal-header .fatal-nav > a:not(.fatal-cart)::after,
.fatal-header .fatal-nav .menu-item > a::after,
.fatal-header .fatal-nav a.fatal-cart::after,
.fatal-nav a::after,
.fatal-nav a.fatal-cart::after { content: none !important; display: none !important; }
/* 1b) Consistent, comfortable rows for every item (links, cart, account). */
.fatal-header .fatal-nav { gap: 2px !important; padding: 12px !important; }
.fatal-header .fatal-nav > a,
.fatal-header .fatal-nav .menu-item > a,
.fatal-header .fatal-nav .fatal-cart,
.fatal-header .fatal-nav .fatal-account__menu a {
display: flex !important; align-items: center !important;
width: 100% !important; box-sizing: border-box !important;
padding: 12px 14px !important; margin: 0 !important;
border-radius: 10px !important;
font-size: 16px !important; font-weight: 650 !important;
opacity: 1 !important; transform: none !important;
}
/* 1c) Current page: a clean contained highlight (replaces the floating line). */
.fatal-header .fatal-nav > a.is-active,
.fatal-header .fatal-nav > a[aria-current="page"],
.fatal-header .fatal-nav .current-menu-item > a,
.fatal-header .fatal-nav .current_page_item > a {
background: rgba(239,68,68,.12) !important; color: #fff !important; text-shadow: none !important;
}
/* 1d) Soft hover/tap feedback. */
.fatal-header .fatal-nav > a:hover,
.fatal-header .fatal-nav .menu-item > a:hover,
.fatal-header .fatal-nav .fatal-account__menu a:hover,
.fatal-header .fatal-nav .fatal-cart:hover { background: rgba(255,255,255,.05) !important; }
/* 1e) Flatten the cart pill into a row (keep the icon + count). */
.fatal-header .fatal-nav .fatal-cart {
background: transparent !important; border: 0 !important; box-shadow: none !important;
gap: 10px !important; margin-top: 6px !important;
}
/* 1f) Flatten the account control: hide the "Account" + chevron trigger and
show its links (Login, or My Account / Orders / Log out) inline as rows. */
.fatal-header .fatal-nav .fatal-account { display: block !important; width: 100% !important; position: static !important; margin-top: 6px !important; }
.fatal-header .fatal-nav .fatal-account__trigger { display: none !important; }
.fatal-header .fatal-nav .fatal-account__menu {
display: block !important; position: static !important;
top: auto !important; left: auto !important; right: auto !important;
background: transparent !important; border: 0 !important; box-shadow: none !important;
padding: 0 !important; margin: 0 !important; min-width: 0 !important;
transform: none !important; opacity: 1 !important; visibility: visible !important;
}
}
@media (max-width: 768px) {
/* v0.9.57 — De-nest inner pages on phones. The page panel, the guide's
"arsenal" section, and the tool cards were frames inside frames inside
frames ("a window inside a window inside a window"). Strip the outer frames
and flatten the innermost tool cards so each page is clean single-level
cards on the page background. Account / checkout / cart keep their panels. */
/* outer page-panel frame off (border + fill + radius + its big padding) */
body.page:not(.woocommerce-account):not(.woocommerce-checkout):not(.woocommerce-cart) .fatal-page {
background: transparent !important; border: 0 !important; border-radius: 0 !important;
padding: 0 !important; box-shadow: none !important;
}
.fatal-standard-page { width: 100% !important; }
/* contact: the form card becomes the single container on the page */
.fatal-contact-lead { font-size: 15.5px !important; line-height: 1.6 !important; margin-bottom: 22px !important; }
.fatal-contact-formcard,
.fatal-contact-card { padding: 20px 17px !important; }
/* guide: drop the "arsenal" frame, slim the guide cards, and flatten the tool
cards into a clean spaced list — the category card is the one box that stays */
.fatal-guides-arsenal {
background: transparent !important; border: 0 !important; border-radius: 0 !important;
padding: 0 !important; margin: 22px 0 8px !important;
}
.fatal-guide-card { padding: 20px 18px !important; }
.fatal-guides-arsenal .fatal-tool-category { padding: 16px !important; }
.fatal-guides-arsenal .fatal-tool-list { grid-template-columns: 1fr !important; gap: 16px !important; }
.fatal-guides-arsenal .fatal-tool {
background: transparent !important; border: 0 !important; border-radius: 0 !important;
padding: 0 !important; margin: 0 !important;
}
}
/* v0.9.58 — Source Code page: dynamic download links (kiosk source + manifest) */
.fatal-src-downloads-block { margin: 16px 0 4px; }
.fatal-src-downloads-block h3 { margin: 0 0 4px; font-size: 16px; color: #f4f4f6; }
.fatal-src-downloads-block > p { margin: 0 0 12px; color: var(--fatal-muted); font-size: 14px; }
.fatal-src-downloads { display: flex; flex-wrap: wrap; gap: 12px; }
.fatal-src-downloads .fatal-src-dl { margin-top: 0; }
/* === v0.9.60 — hero format pills: compact one-line look on phones (mobile only) ===
Desktop and tablet are unchanged. On narrow phones the "DIGITAL DOWNLOAD" label
wrapped to two lines and the two pills grew uneven; trim the label/icon/gap/padding
under 500px so the icon + label hold one line and match the compact, centered
desktop pills. Centering itself is already global (v0.9.50). */
@media (max-width: 500px) {
.fatal-hero-format { padding: 10px 10px !important; }
.fatal-hero-format__head { gap: 5px !important; justify-content: center !important; }
.fatal-hero-format__ic { width: 13px !important; height: 13px !important; }
.fatal-hero-format__name { font-size: 10px !important; letter-spacing: .02em !important; white-space: nowrap !important; }
.fatal-hero-format__price { font-size: 18px !important; }
}
/* === v0.9.61 — Changelog ([fatalnet_changelog] from the licensing plugin) + source pending notes ===
Plugin output is flat: v0.9.x
then a sibling
of - , one h3+ul pair per release. */
.fatalnet-changelog { margin-top: 10px; }
.fatalnet-changelog-version {
margin: 24px 0 10px;
padding-top: 22px;
border-top: 1px solid var(--fatal-border);
color: var(--fatal-soft);
font-size: 18px;
font-weight: 800;
letter-spacing: .01em;
}
.fatalnet-changelog-version:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.fatalnet-changelog-items { margin: 0 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.fatalnet-changelog-items li { line-height: 1.55; color: var(--fatal-text); }
.fatal-changelog-pending, .fatal-src-pending { color: var(--fatal-muted); font-size: 14.5px; line-height: 1.6; }
.fatal-src-pending a, .fatal-changelog-pending a { color: var(--fatal-soft); text-decoration: underline; }