/* ============================================================ ATF TRAINING GROUP — SITE STYLESHEET ("Steel") Industrial. Charcoal, blaze orange, hard edges. Zero border-radius anywhere in this file. Mobile first. ============================================================ */ :root{ --ink:#0E0E0E; --base:#141414; --panel:#181818; --steel:#1E1E1E; --rule:#2A2A2A; --rule-hi:#3C3C3C; --paper:#EFECE7; --mute:#8D8983; --mute-2:#6B6862; --blaze:#FF5A00; --blaze-hi:#FF7326; --blaze-dk:#C74400; --fd:"Barlow Condensed","Oswald","Archivo Narrow","Arial Narrow","Helvetica Neue Condensed", "Haettenschweiler",Impact,"Franklin Gothic Medium",system-ui,sans-serif; --fb:"Barlow","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",sans-serif; --fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --pad:clamp(18px,5.2vw,56px); --wrap:1280px; /* Two curves, used everywhere. --ease for things you press (short, linear-ish settle); --ease-out for things that arrive on screen (fast in, long settle, no overshoot). Nothing else gets its own curve. */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:dark; } /* sticky nav is ~68px — keep jump-link targets clear of it */ [id]{scroll-margin-top:84px} /* clip, not hidden: overflow-x:hidden makes a scroll container, which silently kills position:sticky on the nav and the hero plate. clip guards against sideways scroll without that side effect (hidden = old-browser fallback). */ html,body{max-width:100%;overflow-x:hidden;overflow-x:clip} body{ margin:0; background:var(--base); color:var(--paper); font-family:var(--fb); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select{font:inherit;color:inherit;border-radius:0;-webkit-appearance:none;appearance:none} h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0} ul{list-style:none;padding:0} ::selection{background:var(--blaze);color:#0E0E0E} :focus-visible{outline:3px solid var(--blaze);outline-offset:2px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip{ position:absolute;left:-9999px;top:0;z-index:1000; background:var(--blaze);color:#0E0E0E;padding:12px 18px; font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.06em; } .skip:focus{left:0} /* ---------- film grain: concrete dust, very subtle ---------- */ .grain{ position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } /* The grain drifts on a 4-step cycle so it flickers like film stock rather than sliding like a texture. inset:-40px means it never exposes an edge. */ .grain{inset:-40px;animation:grain 1.3s steps(4) infinite} @keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-1.4%,1.1%)} 50%{transform:translate(1.1%,-.8%)} 75%{transform:translate(-.7%,-1.4%)} 100%{transform:translate(0,0)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} /* iteration-count, not a near-zero duration: an infinite animation set to .01ms repaints forever instead of stopping. */ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .grain{animation:none;inset:0} } /* ---------- shared bits ---------- */ .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .mono{ font-family:var(--fm); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); } /* mono fine print carries long tokens (emails, record numbers, URLs) — let them break */ .price-note,.hero-fine,.tiers-f,.pnl-f,.comp-facts span,.verify-b p,.foot-bar p,.vstatus span{overflow-wrap:anywhere} .hazard{ height:8px; background:repeating-linear-gradient(115deg,var(--blaze) 0 17px,#0E0E0E 17px 34px); border-top:1px solid #0E0E0E; border-bottom:1px solid #0E0E0E; } .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--fd);font-weight:800; font-size:clamp(16px,4.4vw,19px); letter-spacing:.045em;text-transform:uppercase;line-height:1; padding:18px 24px;border:2px solid transparent; transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease,border-color .12s ease; cursor:pointer;text-align:center; } .btn-primary{background:var(--blaze);border-color:var(--blaze);color:#0E0E0E;box-shadow:7px 7px 0 #000} .btn-primary:hover{background:var(--blaze-hi);border-color:var(--blaze-hi);transform:translate(3px,3px);box-shadow:3px 3px 0 #000} .btn-primary:active{transform:translate(7px,7px);box-shadow:0 0 0 #000} .btn-ghost{background:transparent;border-color:var(--rule-hi);color:var(--paper);box-shadow:7px 7px 0 rgba(0,0,0,.55)} .btn-ghost:hover{border-color:var(--blaze);color:var(--blaze);transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(0,0,0,.55)} .btn-ghost:active{transform:translate(7px,7px);box-shadow:0 0 0 rgba(0,0,0,.55)} /* ---------- section headers ---------- */ .sec{border-top:1px solid var(--rule)} .sec-head{padding-top:clamp(66px,12vw,144px);padding-bottom:clamp(32px,6vw,58px)} .sec-kicker{display:flex;align-items:center;gap:12px;margin-bottom:22px} .sec-kicker .bar{width:34px;height:4px;background:var(--blaze);flex:none} .sec-kicker span{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .sec-head h2{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(36px,10vw,82px);line-height:.88;letter-spacing:-.015em; overflow-wrap:break-word; } .sec-head h2 em{font-style:normal;color:var(--blaze)} .sec-head .lede{ margin-top:20px;max-width:56ch;color:var(--mute); font-size:clamp(15px,4vw,18px);line-height:1.6; } .sec-head .lede b{color:var(--paper);font-weight:600} /* ============================================================ NAV ============================================================ */ .nav{ position:sticky;top:0;z-index:800; background:#121212; border-bottom:2px solid var(--rule); transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease); } /* Charcoal on charcoal at the top of the page; once the bar is genuinely floating over content it earns a harder edge and a shadow to sit on. */ .nav.is-stuck{ background:rgba(14,14,14,.90); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border-bottom-color:var(--rule-hi); box-shadow:0 14px 34px rgba(0,0,0,.55); } /* the open menu must stay readable, so it drops the transparency again */ .nav.is-stuck:has(.nav-panel.open){background:#0E0E0E} .nav-in{ display:flex;align-items:stretch;justify-content:space-between;gap:16px; min-height:66px; } .mark{display:flex;align-items:center;gap:10px;padding:12px 0;flex:none} /* The ATF monogram. Cream artwork — every bar and footer it sits on is dark. The width/height attributes on the carry the true 968×381 ratio, so the browser reserves the right box before the SVG arrives and the nav never jumps. */ .mark-logo{display:block;height:34px;width:auto;flex:none} .mark-word{ font-family:var(--fd);font-weight:700;text-transform:uppercase; font-size:13px;line-height:1.05;letter-spacing:.22em;color:var(--paper); } .mark-word em{display:block;font-style:normal;color:var(--mute);letter-spacing:.19em} .nav-links{display:none} .nav-right{display:flex;align-items:center;gap:10px;flex:none} .nav-toggle{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:48px;background:transparent;border:1px solid var(--rule-hi); align-self:center;height:44px;align-items:center;flex:none;cursor:pointer; } .nav-toggle i{display:block;width:20px;height:2px;background:var(--paper)} .nav-toggle[aria-expanded="true"]{border-color:var(--blaze)} .nav-toggle[aria-expanded="true"] i{background:var(--blaze)} .nav-panel{display:none;border-top:1px solid var(--rule)} .nav-panel.open{display:block} .nav-panel a,.nav-panel .na{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 0;border-bottom:1px solid var(--rule); font-family:var(--fd);font-weight:700;text-transform:uppercase; font-size:19px;letter-spacing:.06em; } .nav-panel .na{color:var(--mute-2)} .nav-panel a span,.nav-panel .na span{font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--mute-2);text-transform:uppercase;text-align:right} .nav-panel a:hover{color:var(--blaze)} /* very small phones (≤359px): the nav bar is the only thing that runs out of room */ @media (max-width:359px){ .nav-in{gap:8px} .mark{gap:7px} .mark-logo{height:28px} .mark-word{font-size:11px;letter-spacing:.14em} .nav-right{gap:7px} .lang b,.lang i{padding:7px 7px;font-size:10px;letter-spacing:.08em} .nav-toggle{width:42px} } .lang{display:flex;flex:none} .lang b,.lang i{ font-family:var(--fm);font-size:11px;letter-spacing:.14em;font-style:normal; padding:8px 11px;border:1px solid var(--rule-hi);text-transform:uppercase; } .lang b{background:var(--paper);color:#0E0E0E;border-color:var(--paper);font-weight:700} .lang i{color:var(--mute-2);border-left:0;cursor:default} @media (min-width:1040px){ .nav-toggle,.nav-panel{display:none !important} .nav-links{display:flex;align-items:stretch;gap:0} .nav-links a{ display:flex;align-items:center;padding:0 20px; font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--mute);border-left:1px solid var(--rule); transition:color .12s ease,background-color .12s ease; } .nav-links a:hover{color:var(--paper);background:var(--steel)} .nav-links a.hot{color:var(--paper)} .nav-links a.hot:hover{color:var(--blaze)} .nav-links a[aria-current="page"]{color:var(--blaze)} .nav-right{align-items:stretch;gap:0} .nav-right .lang{align-self:center;margin-left:20px} } /* ============================================================ PRICE BLOCK (founding rate) ============================================================ */ .price{margin-top:clamp(24px,6vw,32px)} .price-tag{ display:inline-flex;align-items:center;gap:8px; background:var(--blaze);color:#0E0E0E; font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; padding:6px 10px;box-shadow:4px 4px 0 #000; } .price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:14px} .price-now{ font-family:var(--fd);font-weight:800;color:var(--blaze); font-size:clamp(54px,15vw,84px);line-height:.82;letter-spacing:-.025em; } .price-was{font-family:var(--fd);font-weight:700;font-size:clamp(23px,6.5vw,32px);line-height:1;color:var(--mute-2)} .price-was s{text-decoration-line:line-through;text-decoration-thickness:3px;text-decoration-color:var(--blaze-dk)} .price-unit{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)} .price-note{ margin-top:14px;max-width:46ch; font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);line-height:1.85; } .price-note b{color:var(--paper);font-weight:400} /* ============================================================ HERO ============================================================ */ .hero{ position:relative; background:linear-gradient(180deg,#151515 0%,#121212 60%,#101010 100%); overflow:hidden; } .hero::before{ /* faint steel column rules */ content:"";position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 25%); opacity:.55; } .hero-in{position:relative;padding-top:clamp(48px,9.5vw,86px);padding-bottom:clamp(48px,9vw,90px)} .hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(20px,5vw,30px)} .hero-eyebrow .dot{width:9px;height:9px;background:var(--blaze);flex:none} .hero-eyebrow span{font-family:var(--fm);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .hero-eyebrow .sep{color:var(--rule-hi)} .hero h1{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(50px,14.5vw,132px); line-height:.84;letter-spacing:-.022em; overflow-wrap:break-word; } .hero h1 em{font-style:normal;color:var(--blaze)} .hero-sub{ margin-top:clamp(20px,5vw,28px); max-width:50ch; font-size:clamp(16px,4.3vw,20px); line-height:1.5;color:#C9C5BF; } .hero-sub b{color:var(--paper);font-weight:600} .hero-cta{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,6vw,34px)} .hero-cta .btn{width:100%} .hero-fine{margin-top:16px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2);line-height:1.8} /* stats */ .stats{ margin-top:clamp(34px,8vw,54px); display:grid;grid-template-columns:1fr 1fr; border-top:2px solid var(--rule);border-left:1px solid var(--rule); } .stat{ border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); padding:16px 14px 14px;min-width:0; } .stat b{ display:block;font-family:var(--fd);font-weight:800; font-size:clamp(38px,11vw,58px);line-height:.9;letter-spacing:-.02em;color:var(--paper); } .stat b .u{color:var(--blaze)} .stat > span{display:block;margin-top:7px;font-family:var(--fm);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);overflow-wrap:anywhere} /* specimen certificate plate */ .plate{ margin-top:clamp(34px,8vw,44px); background:var(--steel); border:1px solid var(--rule-hi); box-shadow:14px 14px 0 rgba(0,0,0,.55); } .plate-top{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 14px;background:var(--paper);color:#0E0E0E; } .plate-top strong{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px;line-height:1} .plate-top em{ font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.18em; border:1.5px solid #0E0E0E;padding:4px 7px;text-transform:uppercase; } .plate-body{padding:16px 14px 4px} .frow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)} .frow dt{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);flex:none;padding-top:3px} .frow dd{text-align:right;font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.02em;line-height:1.15;min-width:0} .frow dd small{display:block;font-family:var(--fm);font-weight:400;font-size:9.5px;letter-spacing:.12em;color:var(--blaze);margin-top:3px} .plate-verify{display:flex;align-items:center;gap:14px;padding:16px 14px;border-top:1px solid var(--rule-hi);background:#161616} .qr{width:96px;height:96px;flex:none;background:var(--paper);padding:6px} .qr svg{width:100%;height:100%} .plate-verify .vtext strong{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.04em;line-height:1} .plate-verify .vtext span{display:block;margin-top:6px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;color:var(--mute);line-height:1.6;overflow-wrap:anywhere} .plate-sign{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule-hi)} .plate-sign div{padding:22px 14px 10px;border-right:1px solid var(--rule)} .plate-sign div:last-child{border-right:0} .plate-sign i{display:block;height:1px;background:var(--rule-hi);margin-bottom:7px} .plate-sign span{font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)} @media (min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} .hero-cta{flex-direction:row;flex-wrap:wrap} .hero-cta .btn{width:auto} } @media (min-width:1040px){ .hero-in{ display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(32px,5vw,72px);align-items:start; padding-top:84px;padding-bottom:96px; } /* From 1040px the headline lives in a ~47vw column, not the full width. Sized off that column so the longest word ("PROTECTION") always fits on one line — at the full-width scale it split mid-word as "PROTECTI/ON". */ .hero h1{font-size:clamp(68px,9.4vw,124px)} .hero-col-b{position:sticky;top:100px} .plate{margin-top:6px} .stats{grid-column:1 / -1;margin-top:78px} } /* ============================================================ COURSE LIST ============================================================ */ .courses{background:var(--base)} .clist{border-top:2px solid var(--rule-hi);margin-bottom:clamp(66px,12vw,144px)} .crow{ position:relative;display:block; border-bottom:1px solid var(--rule); padding:26px 0 26px 16px; transition:background-color .14s ease; } .crow::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rule-hi); transition:width .14s ease,background-color .14s ease; } a.crow:hover{background:var(--panel)} a.crow:hover::before{width:9px;background:var(--blaze)} .crow.live::before{background:var(--blaze);width:9px} .crow-top{display:flex;align-items:baseline;gap:12px} .cnum{ font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:.06em; color:var(--mute-2);flex:none;padding-top:2px; } .crow.live .cnum,a.crow:hover .cnum{color:var(--blaze)} .crow h3{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(25px,7vw,44px);line-height:.95;letter-spacing:-.01em; min-width:0;overflow-wrap:break-word; } .crow.soon h3{color:#B6B2AC} .cmeta{margin-top:9px;padding-left:27px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .cmeta span{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .cmeta .sep{color:var(--rule-hi)} .crow-end{margin-top:14px;padding-left:27px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tag{ font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; padding:6px 9px;border:1.5px solid var(--rule-hi);color:var(--mute);flex:none; } .tag.on{background:var(--blaze);border-color:var(--blaze);color:#0E0E0E;font-weight:700} .cprice{font-family:var(--fd);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.01em;white-space:nowrap} .cprice s{font-size:18px;color:var(--mute-2);text-decoration-thickness:2px;margin-left:6px;font-weight:700} .cprice sup{font-size:13px;vertical-align:top;color:var(--mute);font-weight:600;letter-spacing:.06em} .crow.soon .cprice{color:#B6B2AC} .cgo{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.08em;color:var(--blaze)} .crow.soon .cgo{color:var(--mute-2)} @media (min-width:880px){ .crow{padding:34px 0 34px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center} .crow-top{grid-column:1;gap:18px} .cmeta{grid-column:1;grid-row:2;margin-top:6px;padding-left:44px} .crow-end{grid-column:2;grid-row:1 / span 2;margin-top:0;padding-left:0;justify-content:flex-end;gap:20px} .cnum{font-size:17px} } /* ============================================================ WHY ATF — 2-up cells ============================================================ */ .why{background:var(--ink)} .wgrid{ border-top:2px solid var(--rule-hi);border-left:1px solid var(--rule); margin-bottom:clamp(66px,12vw,144px); } .wcell{ position:relative;padding:32px 20px 38px; border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); min-width:0;overflow:hidden; } .wcell .idx{ position:absolute;top:6px;right:12px; font-family:var(--fd);font-weight:800;font-size:clamp(64px,17vw,104px);line-height:1; color:#171717;-webkit-text-stroke:1px #2E2E2E;pointer-events:none; } .wcell h3{ position:relative;font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(23px,6.2vw,32px);line-height:1;letter-spacing:-.005em;max-width:16ch; } .wcell h3 .hl{color:var(--blaze)} .wcell .rule{width:44px;height:4px;background:var(--blaze);margin:16px 0} .wcell p{position:relative;color:var(--mute);font-size:15.5px;line-height:1.7;max-width:44ch} .wcell p b{color:var(--paper);font-weight:600} @media (min-width:820px){ .wgrid{display:grid;grid-template-columns:1fr 1fr} .wcell{padding:44px 38px 54px} } /* ============================================================ THE WRONG HALF — two-column comparison ============================================================ */ .half{background:var(--base)} .hcols{ border-top:2px solid var(--rule-hi);border-left:1px solid var(--rule); margin-bottom:clamp(40px,7vw,64px); } .hcol{ padding:32px 20px 38px; border-right:1px solid var(--rule);border-bottom:1px solid var(--rule); min-width:0; } .hcol.ours{background:#171717} .hcol h3{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(22px,5.8vw,28px);line-height:1.02;letter-spacing:.005em; } .hcol.ours h3{color:var(--blaze)} .hcol .stub{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);margin-bottom:14px} .hcol ul{margin-top:26px;border-top:1px solid var(--rule)} .hcol li{ display:flex;gap:12px;align-items:flex-start; padding:16px 0;border-bottom:1px solid var(--rule); font-size:15.5px;line-height:1.6;color:#C9C5BF; } .hcol li i{ flex:none;font-style:normal;font-family:var(--fm);font-size:12px;line-height:1.35; width:18px;text-align:center;color:var(--mute-2); } .hcol.ours li i{color:var(--blaze)} .hcol li b{color:var(--paper);font-weight:600} .half-note{ margin-bottom:clamp(66px,12vw,144px); font-family:var(--fd);font-weight:600; font-size:clamp(19px,5vw,28px);line-height:1.25;max-width:38ch; } .half-note em{font-style:normal;color:var(--blaze)} @media (min-width:820px){ .hcols{display:grid;grid-template-columns:1fr 1fr} .hcol{padding:42px 36px 50px} } /* ============================================================ HOW IT WORKS ============================================================ */ .how{background:var(--base)} .hgrid{border-top:2px solid var(--rule-hi);margin-bottom:clamp(66px,12vw,144px)} .hstep{position:relative;padding:32px 0 38px;border-bottom:1px solid var(--rule)} .hstep-n{display:flex;align-items:center;gap:14px;margin-bottom:14px} .hstep-n b{font-family:var(--fd);font-weight:800;font-size:52px;line-height:.8;color:var(--blaze);letter-spacing:-.03em} .hstep-n i{flex:1;height:1px;background:var(--rule);font-style:normal} .hstep h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(25px,6.6vw,34px);line-height:1} .hstep p{margin-top:14px;color:var(--mute);font-size:15.5px;line-height:1.7;max-width:42ch} @media (min-width:880px){ .hgrid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)} .hstep{border-bottom:0;border-right:1px solid var(--rule);padding:42px 34px 54px} .hstep:first-child{padding-left:0} .hstep:last-child{border-right:0} .hstep-n b{font-size:64px} } /* ============================================================ COMPANIES ============================================================ */ .co{background:var(--ink)} .co-in{padding-top:clamp(60px,11vw,132px);padding-bottom:clamp(60px,11vw,132px)} .co-grid{display:grid;gap:44px} .co h2{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(36px,10vw,74px);line-height:.88;letter-spacing:-.015em; overflow-wrap:break-word; } .co h2 em{font-style:normal;color:var(--blaze)} .co .lede{margin-top:22px;color:var(--mute);font-size:clamp(15px,4vw,18px);line-height:1.7;max-width:48ch} .co ul{margin-top:30px;border-top:1px solid var(--rule)} .co li{ display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule); font-size:15.5px;line-height:1.6;color:#C9C5BF; } .co li b{color:var(--blaze);font-family:var(--fm);font-size:10px;letter-spacing:.1em;flex:none;padding-top:5px} .co .btn{margin-top:36px} .tiers{border:1px solid var(--rule-hi);background:var(--steel);box-shadow:12px 12px 0 rgba(0,0,0,.5)} .tiers-h{padding:14px;background:var(--paper);color:#0E0E0E;display:flex;justify-content:space-between;align-items:center;gap:10px} .tiers-h strong{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px} .tiers-h span{font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase} .tier{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 14px;border-bottom:1px solid var(--rule)} .tier:last-of-type{border-bottom:0} .tier .t-l{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .tier .t-r{font-family:var(--fd);font-weight:800;font-size:29px;line-height:1;letter-spacing:-.01em;white-space:nowrap} .tier .t-r sup{font-size:14px;vertical-align:top;color:var(--mute);font-weight:600;letter-spacing:.06em} .tier.best{background:#1A1A1A} .tier.best .t-l{color:var(--paper)} .tier.best .t-r{color:var(--blaze)} .tiers-f{padding:12px 14px;border-top:1px solid var(--rule-hi);font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2);line-height:1.7} @media (min-width:980px){ .co-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,86px);align-items:start} } /* ============================================================ NOTIFY / LAUNCHING SOON ============================================================ */ .notify{background:var(--base)} .notify-in{padding-top:clamp(64px,12vw,138px);padding-bottom:clamp(64px,12vw,138px)} .nbox{border:1px solid var(--rule-hi);background:var(--steel);box-shadow:14px 14px 0 rgba(0,0,0,.55);max-width:860px} .nbox .hazard{height:8px} .nbox-in{padding:clamp(30px,6.5vw,56px)} .nbox h2{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(32px,9vw,64px);line-height:.9;letter-spacing:-.015em; } .nbox h2 em{font-style:normal;color:var(--blaze)} .nbox p{margin-top:20px;color:#C9C5BF;font-size:clamp(15px,4vw,17px);line-height:1.7;max-width:52ch} .nbox p b{color:var(--paper);font-weight:600} .nbox .btn{margin-top:32px;width:100%} .nbox-fine{ margin-top:18px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--mute-2);line-height:1.9;overflow-wrap:anywhere; } .nbox-fine b{color:var(--mute);font-weight:400} @media (min-width:620px){ .nbox .btn{width:auto} } /* ============================================================ COMPLIANCE STRIP ============================================================ */ .comp{background:var(--base)} .comp-in{padding-top:clamp(54px,10vw,102px);padding-bottom:clamp(54px,10vw,102px)} .comp-facts{display:flex;flex-wrap:wrap;gap:0 6px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:34px} .comp-facts span{ font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute); padding:12px 18px 12px 0;line-height:1.7; } .comp-facts span b{color:var(--paper);font-weight:400} .comp-body{display:grid;gap:26px} .comp-label{display:flex;align-items:center;gap:12px;flex:none} .comp-label .bar{width:34px;height:4px;background:var(--blaze);flex:none} .comp-label span{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blaze)} .comp-text{ font-family:var(--fd);font-weight:600; font-size:clamp(20px,5.2vw,31px);line-height:1.3;letter-spacing:.005em;color:var(--paper);max-width:34ch; } @media (min-width:920px){ .comp-body{grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start} .comp-label{padding-top:10px} .comp-text{max-width:40ch} } /* ============================================================ SUB-PAGE HEADER (course / verify) ============================================================ */ .phead{position:relative;background:linear-gradient(180deg,#151515 0%,#111 100%);overflow:hidden} .phead::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 25%); opacity:.55; } .phead-in{position:relative;padding-top:clamp(28px,6vw,52px);padding-bottom:clamp(40px,8vw,66px)} .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(20px,5vw,28px)} .crumb a,.crumb span{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .crumb a:hover{color:var(--blaze)} .crumb .sep{color:var(--rule-hi)} .crumb .here{color:var(--paper)} .phead h1{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(42px,12vw,104px);line-height:.86;letter-spacing:-.022em; overflow-wrap:break-word; } .phead h1 em{font-style:normal;color:var(--blaze)} .phead .lede{margin-top:clamp(18px,4.5vw,26px);max-width:52ch;font-size:clamp(16px,4.2vw,19px);line-height:1.5;color:#C9C5BF} .phead .lede b{color:var(--paper);font-weight:600} .phead-cta{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,6vw,34px)} .phead-cta .btn{width:100%} /* stacked on phones: keep the side panel clear of the buttons above it */ .phead-in > div + div{margin-top:clamp(30px,7vw,42px)} .phead-in > div + div > .plate{margin-top:0} .note{margin-top:16px;max-width:54ch;color:var(--mute);font-size:15px;line-height:1.6} .note b{color:var(--paper);font-weight:600} @media (min-width:620px){ .phead-cta{flex-direction:row;flex-wrap:wrap} .phead-cta .btn{width:auto} } @media (min-width:1040px){ .phead-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start;padding-bottom:74px} .phead .crumb{grid-column:1 / -1} .phead h1{font-size:clamp(60px,8vw,104px)} .phead-in > div + div{margin-top:0} } /* ============================================================ MODULE LIST ============================================================ */ .mods{border-top:2px solid var(--rule-hi);margin-bottom:clamp(40px,8vw,72px)} .mod{display:flex;gap:14px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--rule)} .mod b{ flex:none;font-family:var(--fd);font-weight:800;font-size:19px;line-height:1.15; color:var(--blaze);min-width:34px;letter-spacing:.02em; } .mod .mtext{min-width:0} .mod h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(19px,5vw,24px);line-height:1.05;letter-spacing:.005em} .mod p{margin-top:6px;color:var(--mute);font-size:15px;line-height:1.55;max-width:62ch} @media (min-width:880px){ .mods{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--rule)} .mod{padding:20px 26px;border-right:1px solid var(--rule)} } /* ============================================================ FEATURE PANELS (included / kit / exercises) ============================================================ */ .pnl{border:1px solid var(--rule-hi);background:var(--steel);margin-bottom:clamp(26px,5vw,34px)} .pnl-h{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 16px;background:var(--paper);color:#0E0E0E; } .pnl-h strong{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:16px;line-height:1.1} .pnl-h em{font-style:normal;font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-align:right} .pnl-b{padding:6px 16px 16px} .pnl-b > p{padding-top:14px;color:#C9C5BF;font-size:15.5px;line-height:1.6;max-width:64ch} .pnl-b > p b{color:var(--paper);font-weight:600} .pnl ul{margin-top:4px} .pnl li{ display:flex;gap:12px;align-items:flex-start; padding:13px 0;border-bottom:1px solid var(--rule); font-size:15.5px;line-height:1.5;color:#C9C5BF; } .pnl li:last-child{border-bottom:0} .pnl li i{flex:none;font-style:normal;width:19px;color:var(--blaze);font-family:var(--fm);font-size:11.5px;line-height:1.4;padding-top:1px} .pnl li b{color:var(--paper);font-weight:600} .pnl-f{ padding:12px 16px;border-top:1px solid var(--rule-hi);background:#161616; font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute-2);line-height:1.8; } @media (min-width:880px){ .pnl-b{padding:6px 24px 20px} .pnl-h{padding:14px 24px} .pnl-f{padding:13px 24px} } .pnl-2{display:grid;gap:clamp(26px,5vw,34px);margin-bottom:clamp(26px,5vw,34px)} .pnl-2 .pnl{margin-bottom:0} @media (min-width:940px){ .pnl-2{grid-template-columns:1fr 1fr;align-items:start} } /* accepted / not-accepted panel */ .acc li{display:block;padding:18px 0} .acc .lbl{ display:inline-block;margin-bottom:11px; font-family:var(--fm);font-size:9px;letter-spacing:.18em;text-transform:uppercase; padding:5px 8px;border:1.5px solid var(--rule-hi);color:var(--mute);line-height:1.2; } .acc .lbl.yes{border-color:var(--blaze);color:var(--blaze)} .acc .lbl.no{border-color:var(--rule-hi);color:var(--mute)} .acc p{color:#C9C5BF;font-size:15.5px;line-height:1.6;max-width:70ch} .acc p b{color:var(--paper);font-weight:600} /* ============================================================ FAQ ============================================================ */ .faq{border-top:2px solid var(--rule-hi);margin-bottom:clamp(48px,10vw,88px)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 0;cursor:pointer;list-style:none; font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(19px,5vw,25px);line-height:1.08;letter-spacing:.01em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:none;font-family:var(--fd);font-weight:800;font-size:26px;line-height:1;color:var(--blaze); } .faq details[open] summary::after{content:"–"} .faq summary:hover{color:var(--blaze)} .faq .ans{padding:0 0 20px;color:var(--mute);font-size:15.5px;line-height:1.65;max-width:66ch} .faq .ans b{color:var(--paper);font-weight:600} .faq .ans p + p{margin-top:12px} /* ============================================================ VERIFY PAGE ============================================================ */ .vstatus{ display:flex;flex-wrap:nowrap;align-items:flex-start;gap:12px; border:1.5px solid var(--blaze);padding:14px 16px;margin-top:clamp(24px,5vw,30px); background:rgba(255,90,0,.06);max-width:60ch; } .vstatus i{width:10px;height:10px;background:var(--blaze);flex:none;margin-top:5px} .vstatus span{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);line-height:1.7} /* ============================================================ FOOTER ============================================================ */ .foot{background:var(--ink);border-top:2px solid var(--rule-hi)} .foot-in{padding-top:clamp(56px,10vw,108px)} .foot-grid{display:grid;gap:44px} .foot-mark{max-width:36ch} .foot-mark .mark{padding:0} .foot-mark p{margin-top:22px;color:var(--mute);font-size:15px;line-height:1.7} .verify{margin-top:30px;border:1px solid var(--rule-hi);background:var(--steel)} .verify-h{padding:11px 13px;border-bottom:1px solid var(--rule);font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blaze)} .verify-b{padding:14px 13px 16px} .verify-b p{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.8} .verify-b .btn{margin-top:14px;width:100%;padding:14px 18px;font-size:15px} .fcol h4{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-2);margin-bottom:14px} .fcol li{border-bottom:1px solid var(--rule)} .fcol li:first-child{border-top:1px solid var(--rule)} .fcol a,.fcol .na{ display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0; font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.06em;color:#C9C5BF; } .fcol .na{color:var(--mute-2)} .fcol a:hover{color:var(--blaze)} .fcol .st{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--mute-2);font-weight:400;flex:none} .foot-bar{ margin-top:clamp(36px,7vw,60px);border-top:1px solid var(--rule); padding:26px 0 36px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between; } .foot-bar p{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute-2);line-height:1.9} .foot-bar a{color:var(--mute)} .foot-bar a:hover{color:var(--blaze)} @media (min-width:920px){ .foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.75fr));gap:clamp(28px,4vw,56px)} } /* ============================================================ ============================================================ DEPTH PASS — photography, layering and motion. Everything below adds craft on top of the Steel design above. It changes no colour, no typeface and no measurement of the original; it gives it somewhere to sit. ============================================================ ============================================================ */ /* ------------------------------------------------------------ SCROLL REVEAL Blocks fade up as they arrive. Only opacity and transform move, so nothing ever reflows and no scrollbar appears mid-animation. The rules are gated behind html.js, which atf.js sets on its first line — with JavaScript off, or if the file never loads, none of this applies and the page simply shows. ------------------------------------------------------------ */ html.js .rv{ opacity:0;transform:translateY(18px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); } html.js .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.06s} .rv-d2{transition-delay:.12s} .rv-d3{transition-delay:.18s} .rv-d4{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ /* has to carry the same weight as the html.js rule or it loses to it */ html.js .rv,.rv{opacity:1 !important;transform:none !important} } /* ------------------------------------------------------------ PHOTOGRAPHIC LAYERS Three planes, always in this order: photo, scrim, content. The photo is graded down hard — desaturated, contrast lifted, darkened — so a colour photograph sits inside a charcoal and blaze palette instead of fighting it. ------------------------------------------------------------ */ .ph{ position:absolute;inset:0;z-index:-2;overflow:hidden; /* a painted steel-and-rust fallback, so a slow or failed image degrades to something on-brand rather than to a hole */ background:linear-gradient(150deg,#1C1A18 0%,#141414 45%,#0E0E0E 100%); } .ph img{ width:100%;height:100%;object-fit:cover; filter:saturate(.58) contrast(1.08) brightness(.66); } .ph-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none} /* ---- hero ---- Not a cinematic fade. This site is built out of stamped steel plates with hard edges and no radius anywhere, so the veil is a PLATE: an opaque charcoal panel laid over the photograph with a machined edge and a blaze hairline down it, the way a data plate is bolted onto a machine. The copy sits on steel; the photograph is what the steel is bolted to. */ .hero{isolation:isolate} /* Phone first — the plate covers the whole frame, because the headline, the price and the buttons all run full width. The photograph survives as structure and a hint of orange behind the type. */ /* These values were set by measuring rendered pixels, not by eye. A phone hero carries the headline, the price, the buttons AND the mono fine print stacked on top of each other, so there is no band where the photograph can be opened up without costing that small type contrast. It was tried: at .70/.62 the steel read beautifully and the fine print fell from 3.0:1 to 2.86:1, so it came back. The picture earns its keep here as texture, and does its real work at 1040px and in the full-bleed bands. */ .hero-scrim{ background: linear-gradient(180deg,rgba(18,18,18,.93) 0%,rgba(18,18,18,.88) 34%,rgba(16,16,16,.94) 70%,#101010 100%), linear-gradient(90deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.84) 55%,rgba(18,18,18,.66) 100%); } .hero .ph img{object-position:52% 34%} /* From 1040px the copy lives in the left column only, so the plate takes its real shape: a hard vertical edge at 47%, solid charcoal to the left of it, open steel to the right where the certificate floats. */ @media (min-width:1040px){ /* 54% is not arbitrary. The text column ends at ~52% of the viewport at every width from 1280 up (the wrap is capped at 1280 and centred, so the column boundary barely moves), which puts the machined edge just clear of the longest line. Measured: every line of copy sits on solid charcoal, so the photograph can never cost the type a point of contrast. */ .hero-scrim{ background: linear-gradient(90deg,#141414 0 54%,rgba(19,19,19,.90) 54% 56%,rgba(19,19,19,.55) 56% 100%), linear-gradient(180deg,rgba(18,18,18,.66) 0%,rgba(18,18,18,.24) 26%,rgba(18,18,18,.52) 60%,rgba(19,19,19,.93) 84%,#141414 100%); } /* the machined edge of the plate */ .hero-scrim::after{ content:"";position:absolute;left:54%;top:0;bottom:0;width:1px; background:linear-gradient(180deg,transparent 0,rgba(255,90,0,.55) 14%,rgba(255,90,0,.55) 76%,transparent 100%); } .hero .ph img{object-position:64% 30%} } /* ------------------------------------------------------------ THE CLEARANCE CHAIN — ATF's own linework Fall protection has one drawing everybody in this trade knows, and it is the only one that decides whether a harness saves you: the vertical clearance check under the anchor. Free fall, then deceleration as the shock pack tears, then harness stretch, then the margin that still has to be left under your boots. It is dimensioned here down the edge of the hero the way it would be pencilled into the margin of a site drawing — architect's ticks rather than arrowheads, mono lettering, no fills. It is the subject of Module 06 and the first thing you are asked to do at the practical. ------------------------------------------------------------ */ .clr{ position:absolute;right:0;top:0;bottom:0;z-index:0; width:clamp(58px,5vw,78px);pointer-events:none;display:none; padding:clamp(74px,9vw,108px) 0 clamp(60px,7vw,88px); } /* Only shown where there is genuinely clear margin beside the layout — below this it would be drawing over the certificate. */ @media (min-width:1280px){.clr{display:flex;flex-direction:column}} .clr-chain{flex:1;min-height:0;display:flex;flex-direction:column;position:relative} /* the dimension line itself */ .clr-chain::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:1px; background:rgba(255,90,0,.42); } /* the whole run, named once, reading up the right-hand side */ .clr-cap{ position:absolute;left:calc(50% + 9px);top:0;bottom:0; writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--fm);font-size:8.5px;font-style:normal;font-weight:400; letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2); display:flex;align-items:center; } /* each length of the drop takes its share of the run — free fall is the longest, harness stretch the shortest, which is how the real check works */ .clr-seg{position:relative;min-height:0;flex:0 1 0} /* architect's tick — a 45° slash across the line, not an arrowhead */ .clr-seg::before,.clr-chain::after{ content:"";position:absolute;left:50%;width:13px;height:1px; background:rgba(255,90,0,.62);transform:translateX(-50%) rotate(45deg); } .clr-seg::before{top:0} .clr-chain::after{bottom:0} /* what each length of the drop is called, reading up the left-hand side */ .clr-seg span{ position:absolute;right:calc(50% + 8px);top:0;bottom:0; writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--mute-2);display:flex;align-items:center;white-space:nowrap; } /* It draws itself in once, top to bottom, at the speed a tape measure runs out — and only when JavaScript confirmed the page is live. */ html.js .clr-chain::before{transform:scaleY(0);transform-origin:top;animation:clrdraw 1.5s var(--ease-out) .3s forwards} html.js .clr-seg,html.js .clr-cap,html.js .clr-chain::after{opacity:0;animation:clrfade .7s var(--ease-out) forwards} html.js .clr-seg:nth-child(1){animation-delay:.55s} html.js .clr-seg:nth-child(2){animation-delay:.75s} html.js .clr-seg:nth-child(3){animation-delay:.95s} html.js .clr-seg:nth-child(4){animation-delay:1.15s} html.js .clr-chain::after{animation-delay:1.35s} html.js .clr-cap{animation-delay:1.5s} @keyframes clrdraw{to{transform:scaleY(1)}} @keyframes clrfade{to{opacity:1}} @media (prefers-reduced-motion:reduce){ html.js .clr-chain::before{transform:none;animation:none} html.js .clr-seg,html.js .clr-cap,html.js .clr-chain::after{opacity:1;animation:none} } /* Sub-pages use the same three planes with their own photograph. */ .phead{isolation:isolate} .phead-scrim{ background: linear-gradient(180deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.86) 40%,rgba(16,16,16,.94) 76%,#111 100%), linear-gradient(90deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.82) 58%,rgba(18,18,18,.62) 100%); } .phead .ph img{object-position:50% 38%} /* Sub-pages get the same plate, one column wider. Their text column runs to ~53.5% of the viewport (the grid is 1.15fr / .85fr rather than the home page's 1.12 / .88), so the machined edge moves out to 56% to stay clear of the longest line. Measured, same as the hero. */ @media (min-width:1040px){ .phead-scrim{ background: linear-gradient(90deg,#141414 0 56%,rgba(19,19,19,.90) 56% 58%,rgba(19,19,19,.52) 58% 100%), linear-gradient(180deg,rgba(18,18,18,.62) 0%,rgba(18,18,18,.24) 30%,rgba(18,18,18,.52) 64%,rgba(19,19,19,.92) 88%,#111 100%); } .phead-scrim::after{ content:"";position:absolute;left:56%;top:0;bottom:0;width:1px; background:linear-gradient(180deg,transparent 0,rgba(255,90,0,.55) 14%,rgba(255,90,0,.55) 76%,transparent 100%); } .phead .ph img{object-position:62% 34%} } /* ---- full-bleed band behind a section ---- */ .band-ph{position:relative;overflow:hidden;isolation:isolate} .band-ph .ph img{filter:saturate(.62) contrast(1.06) brightness(.52)} .band-scrim{ background: linear-gradient(180deg,#141414 0%,rgba(18,18,18,.80) 20%,rgba(18,18,18,.84) 74%,#141414 100%), linear-gradient(92deg,rgba(14,14,14,.93) 0%,rgba(18,18,18,.74) 58%,rgba(18,18,18,.60) 100%); } /* the content plane of a banded section has to be lifted above the scrim */ .band-ph > .wrap{position:relative;z-index:1} /* ------------------------------------------------------------ SURFACE DEPTH The sections were flat single colours. Each dark surface now carries one very low radial wash, so the page has a light source instead of being uniformly lit. Values are deliberately tiny — this should be felt, not seen. ------------------------------------------------------------ */ .courses{background:radial-gradient(120% 76% at 4% 0%,rgba(255,90,0,.055),transparent 58%),var(--base)} .why{background:radial-gradient(96% 70% at 96% 4%,rgba(255,90,0,.05),transparent 60%),var(--ink)} .half{background:radial-gradient(110% 70% at 50% 100%,rgba(255,255,255,.028),transparent 62%),var(--base)} .how{background:radial-gradient(100% 66% at 8% 100%,rgba(255,90,0,.045),transparent 60%),var(--base)} .co{background:radial-gradient(90% 74% at 92% 0%,rgba(255,90,0,.06),transparent 58%),var(--ink)} .comp{background:radial-gradient(120% 100% at 50% 0%,rgba(255,90,0,.035),transparent 64%),var(--base)} /* Painted steel, not a flat CSS stripe: a lit top edge and a shadow under the bottom edge give the hazard tape 1px of thickness. */ .hazard{ box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.6); } /* ------------------------------------------------------------ TAKE IT ANYWHERE — the real course, in steel device frames ------------------------------------------------------------ */ .kit{background:radial-gradient(120% 80% at 50% 0%,rgba(255,90,0,.05),transparent 62%),var(--ink)} .devs{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,4vw,26px);align-items:end; margin-bottom:clamp(26px,4.5vw,36px); } .dev{min-width:0} .dev--desk{grid-column:1 / -1} .dev-scr{ position:relative;background:#0B0B0B;border:1px solid var(--rule-hi); /* a lit top edge inside the bezel, a hard offset shadow outside it — the same shadow language as the plates and the buttons */ box-shadow:inset 0 1px 0 rgba(255,255,255,.09),10px 10px 0 rgba(0,0,0,.5); overflow:hidden; } .dev-scr img{width:100%;height:auto;display:block} .dev-lbl{ display:flex;align-items:center;gap:9px;margin-top:16px; font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute); } .dev-lbl::before{content:"";width:16px;height:3px;background:var(--blaze);flex:none} .dev-cap{ font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--mute-2);line-height:1.8;margin-bottom:clamp(66px,12vw,144px); overflow-wrap:anywhere; } @media (min-width:760px){ /* Desktop, tablet, phone stood side by side and aligned on their feet. 7/3/2 of twelve puts all three screens at very nearly the same height, which is what makes it read as one product rather than three pictures. */ .devs{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)} .dev--desk{grid-column:span 7} .dev--tab{grid-column:span 3} .dev--phone{grid-column:span 2} .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),14px 14px 0 rgba(0,0,0,.5)} /* the two narrow columns can only hold a couple of words a line, so the label steps down a size and the blaze tick moves to the first line */ .dev-lbl{align-items:flex-start;line-height:1.7} .dev-lbl::before{margin-top:6px} .dev--tab .dev-lbl,.dev--phone .dev-lbl{font-size:9px;letter-spacing:.14em} } /* ------------------------------------------------------------ THE DEVICE CLUSTER From 900px the three screens stop being three pictures in a row and become one arrangement: the desktop set back, the tablet offset off its right shoulder, the phone forward on the left across the desktop's corner. There is no glass, no rounded aluminium and no reflection — every frame is the same 1px steel edge, lit along the top, dropping the same hard offset shadow as the plates and the buttons. Three shadow sizes, biggest at the back, are what make it read as depth. The stage is an aspect-ratio box, so every device is placed in percentages of one number and the whole cluster scales without a single extra breakpoint. Each screen keeps its own caption directly beneath it; the desktop's is centred so the phone and the tablet never sit on top of it. ------------------------------------------------------------ */ @media (min-width:900px){ .devs{ display:block;position:relative; width:100%;max-width:1080px; margin:0 auto clamp(28px,3.4vw,44px); aspect-ratio:100 / 63; } .dev{position:absolute} /* left/top are percentages of the stage; width is a percentage of its width, and each image's own width/height attributes give it its height — so nothing here can shift when the pictures arrive. */ .dev--desk {left:13%;top:0; width:71%;z-index:1} .dev--tab {left:78%;top:38.5%; width:22%;z-index:2} .dev--phone{left:3%; top:35.2%; width:16%;z-index:3} .dev--desk .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),16px 16px 0 rgba(0,0,0,.55)} .dev--tab .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),12px 12px 0 rgba(0,0,0,.55)} .dev--phone .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),9px 9px 0 rgba(0,0,0,.6)} /* captions can run to two lines at these widths, so the blaze tick aligns to the first line rather than the middle of the block */ .dev-lbl{align-items:flex-start;margin-top:14px;line-height:1.7} .dev-lbl::before{margin-top:6px} .dev--desk .dev-lbl{justify-content:center} .dev--phone .dev-lbl,.dev--tab .dev-lbl{font-size:9px;letter-spacing:.16em} } /* ------------------------------------------------------------ THE THREE PROMISES What used to be a paragraph under "Take it anywhere". Same three promises, set as data rather than prose — the pictures above them are doing the talking now. ------------------------------------------------------------ */ .promises{ display:grid;gap:14px; margin:0 0 clamp(34px,6vw,58px); padding:22px 0; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); } .promises li{ display:flex;align-items:center;gap:11px;min-width:0; font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);line-height:1.7;overflow-wrap:anywhere; } .promises li::before{content:"";width:16px;height:3px;background:var(--blaze);flex:none} @media (min-width:720px){ .promises{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,34px)} } /* ------------------------------------------------------------ TOOLS YOU CAN DRAG — two teaser cards One is a real frame of the 3D clearance calculator. The other is the rigging geometry drawn in the site's own linework, because that tool is not finished and a picture of a finished thing would be a lie. Both cards go to the notify block until the tools are live, so neither can be a dead link. ------------------------------------------------------------ */ .tools{background:var(--base)} .tgrid{display:grid;gap:clamp(28px,5vw,40px);margin-bottom:clamp(66px,12vw,144px)} .tcard{display:block;min-width:0} .tcard .dev-scr{ box-shadow:inset 0 1px 0 rgba(255,255,255,.09),12px 12px 0 rgba(0,0,0,.5); transition:transform .18s var(--ease),box-shadow .18s var(--ease); } .tcard:hover .dev-scr{ transform:translate(-2px,-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),16px 16px 0 rgba(0,0,0,.55); } /* both frames hold the same shape, so the two cards line up on their headings however different the pictures inside them are */ .tcard .dev-scr{aspect-ratio:1120 / 934} .tcard img{width:100%;height:100%;object-fit:cover} .tfig{background:#111111;padding:clamp(10px,2.4vw,26px);display:flex;align-items:center;justify-content:center} .tfig svg{width:100%;height:100%;display:block} .tcard-b{margin-top:24px;padding-top:20px;border-top:2px solid var(--rule-hi)} .tcard-b h3{ font-family:var(--fd);font-weight:800;text-transform:uppercase; font-size:clamp(21px,5vw,29px);line-height:1.02;letter-spacing:-.005em; overflow-wrap:break-word; } .tcard-b p{margin-top:14px;color:var(--mute);font-size:15.5px;line-height:1.7} .tgo{ display:inline-flex;align-items:center;gap:9px;margin-top:19px; font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blaze); } .tgo i{font-style:normal;transition:transform .3s var(--ease)} .tcard:hover .tgo i{transform:translateX(5px)} @media (min-width:820px){ .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,48px)} } /* ------------------------------------------------------------ WHY ATF — a photograph carrying the first claim The four claims lost three quarters of their words; the picture of a carabiner being checked in front of somebody says the rest. ------------------------------------------------------------ */ .wsplit{margin-bottom:clamp(66px,12vw,144px)} .wgrid{margin-bottom:0} .wshot{margin:0 0 clamp(32px,5.5vw,50px)} .wshot .dev-scr,.co-shot .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),12px 12px 0 rgba(0,0,0,.5)} .wshot img,.co-shot img{width:100%} @media (min-width:980px){ .wsplit{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,4vw,56px);align-items:start; } .wshot{margin-bottom:0} } /* the crew photograph sits above the price tiers in the right column */ .co-side{display:grid;gap:clamp(32px,4.5vw,48px);min-width:0} .co-shot{margin:0} /* ------------------------------------------------------------ INSIDE THE COURSE — the side-scrolling strip of real screens A row of phone shots in the same steel frames as the cluster. overflow-x lives on the row and nowhere else, so the strip scrolls inside itself and the page never moves sideways. On a wide screen all four fit and there is nothing to scroll. ------------------------------------------------------------ */ .strip{margin-top:clamp(40px,7vw,64px)} .strip-lab{display:flex;align-items:center;gap:12px;margin-bottom:18px} .strip-lab .bar{width:34px;height:4px;background:var(--blaze);flex:none} .strip-lab span{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)} .strip-row{ display:flex;align-items:flex-start; gap:clamp(14px,2.4vw,22px); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; /* the frames drop a hard offset shadow — leave it somewhere to land */ padding:0 12px 16px 0; overscroll-behavior-x:contain; scrollbar-width:thin;scrollbar-color:var(--rule-hi) #161616; } .strip-row::-webkit-scrollbar{height:6px} .strip-row::-webkit-scrollbar-track{background:#161616} .strip-row::-webkit-scrollbar-thumb{background:var(--rule-hi)} .strip-row::-webkit-scrollbar-thumb:hover{background:var(--blaze)} .strip-i{flex:0 0 auto;width:clamp(168px,50vw,214px);scroll-snap-align:start} /* wide enough for all four at once — let them share the row instead of leaving a hole on the right. Nothing to scroll at this size. */ @media (min-width:1000px){ .strip-i{flex:1 1 0;width:auto;min-width:0} } .strip-i img{width:100%} .strip-i .dev-scr{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),8px 8px 0 rgba(0,0,0,.55)} .strip-cap{ margin-top:13px;padding-right:6px; font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);line-height:1.75; } .strip-cap::before{content:"";display:block;width:16px;height:3px;background:var(--blaze);margin-bottom:8px} .strip-note{ margin-top:6px; font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--mute-2);line-height:1.8;overflow-wrap:anywhere; } /* ------------------------------------------------------------ HOVER CHOREOGRAPHY The original already moved on hover. This only makes the moves agree with each other — one curve, one direction of travel. ------------------------------------------------------------ */ .crow{transition:background-color .3s var(--ease)} .crow::before{transition:width .3s var(--ease-out),background-color .3s var(--ease)} .cgo{transition:transform .3s var(--ease),color .2s var(--ease);display:inline-block} a.crow:hover .cgo{transform:translateX(5px)} /* a blaze rule wipes across the top of a cell as you enter it */ .wcell::after{ content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--blaze); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out); } .wcell:hover::after{transform:scaleX(1)} .wcell{transition:background-color .35s var(--ease)} .wcell:hover{background:rgba(255,255,255,.018)} .tier{transition:background-color .25s var(--ease)} .tier:hover{background:#1A1A1A} .mod{transition:background-color .25s var(--ease)} .fcol a,.foot-bar a,.crumb a,.nav-panel a{transition:color .2s var(--ease)} .btn{transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)} /* ------------------------------------------------------------ MICRO-DETAILS ------------------------------------------------------------ */ /* Figures never jitter their width — matters most on the price, which sits beside a struck-through second number. */ .stat b,.price-now,.price-was,.cprice,.tier .t-r,.hstep-n b,.cnum,.mod b{ font-variant-numeric:tabular-nums; } /* Machined corners on the specimen plate — two ticks, top-left and bottom-right, the way a real stamped plate is registered. */ .plate{position:relative} .plate::before,.plate::after{ content:"";position:absolute;width:11px;height:11px;pointer-events:none;z-index:2; } .plate::before{top:-1px;left:-1px;border-top:2px solid var(--blaze);border-left:2px solid var(--blaze)} .plate::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--blaze);border-right:2px solid var(--blaze)} /* The QR panel is the thing a super actually points a phone at, so it gets a hairline of blaze to find it by. */ .plate-verify{box-shadow:inset 2px 0 0 var(--blaze)} /* Images never overflow their column, and the browser is told the shape of every one before it loads so nothing shifts on arrival. */ img{height:auto} /* ------------------------------------------------------------ THE PHONE NUMBER A real number, answered by a real person, is the strongest thing a trades business can put on a page — so it is set in the mono "data" voice the rest of the site uses for facts, never as decoration. Tap targets are 44px minimum everywhere. ------------------------------------------------------------ */ .tel{ display:inline-flex;align-items:center;gap:9px;flex:none; min-height:44px;padding:8px 13px; border:1px solid var(--rule-hi);background:transparent; font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;color:var(--paper); white-space:nowrap; transition:color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease); } .tel::before{content:"";width:7px;height:7px;background:var(--blaze);flex:none} .tel:hover{border-color:var(--blaze);color:var(--blaze);background:rgba(255,90,0,.07)} /* In the bar it appears as soon as there is room for it; below that the number lives at the top of the menu instead, where it is a full-width tap. */ .nav .tel{display:none} @media (min-width:600px){.nav .tel{display:inline-flex}} .nav-panel a.tel-row span{color:var(--blaze)} /* Hero / page-head button row: blaze outline, so it reads as its own action beside the solid blaze "join" button rather than competing with it. */ .btn-tel{background:transparent;border-color:var(--blaze);color:var(--blaze);box-shadow:7px 7px 0 rgba(0,0,0,.55)} .btn-tel:hover{background:var(--blaze);border-color:var(--blaze);color:#0E0E0E;transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(0,0,0,.55)} .btn-tel:active{transform:translate(7px,7px);box-shadow:0 0 0 rgba(0,0,0,.55)} /* "or call …" under an email button */ .or-call{ margin-top:16px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--mute); } .or-call a{ color:var(--paper);border-bottom:1px solid var(--blaze);padding-bottom:2px; transition:color .2s var(--ease); } .or-call a:hover{color:var(--blaze)} /* WhatsApp — styled and ready, but every instance in the markup is commented out until Sam confirms the number is actually registered on WhatsApp. A dead wa.me link is worse than no link, so this ships dormant: uncomment the blocks marked "WHATSAPP CTA" and it works, with no CSS change needed. Deliberately NOT WhatsApp green — this palette is charcoal and blaze only, and one imported brand colour would break it. It is told apart from the phone button by a hollow marker rather than a filled one. */ .wa::before{background:transparent;box-shadow:inset 0 0 0 2px var(--blaze)} .btn-wa{background:transparent;border-color:var(--rule-hi);color:var(--paper);box-shadow:7px 7px 0 rgba(0,0,0,.55)} .btn-wa:hover{border-color:var(--blaze);color:var(--blaze);transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(0,0,0,.55)} .btn-wa:active{transform:translate(7px,7px);box-shadow:0 0 0 rgba(0,0,0,.55)} /* Footer contact block */ .foot-contact{ margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px; } .foot-contact .fc-mail{ font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);line-height:1.8;overflow-wrap:anywhere; } .foot-contact .fc-mail a{color:var(--mute)} .foot-contact .fc-mail a:hover{color:var(--blaze)}