/*
Theme Name: Noble Fighter — SVG Neon Reveal
Theme URI: https://www.noblefighter.co.uk/
Author: Noble Fighter
Description: Curiosity-led coming soon theme using the supplied Noble Fighter mark as a traced SVG and CSS neon effects.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: noble-fighter-svg-neon
*/
:root{
 --black:#050505;--white:#f4f1e9;--muted:#9e9991;--red:#d71920;--max:1180px
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--white)}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.nf-page{
 min-height:100svh;position:relative;overflow:hidden;
 display:grid;grid-template-rows:auto 1fr auto;
 background:
 radial-gradient(circle at 70% 45%,rgba(215,25,32,.10),transparent 25%),
 linear-gradient(180deg,#080808 0%,#030303 100%);
}
.nf-page:before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background-image:
 linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
 background-size:56px 56px;
}
.nf-wrap{width:min(calc(100% - 40px),var(--max));margin:auto;position:relative;z-index:2}
.nf-header{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.nf-brand{font-weight:800;font-size:.9rem;letter-spacing:.16em}
.nf-values{margin-top:6px;color:var(--muted);font-size:.64rem;letter-spacing:.18em}
.nf-main{display:grid;align-items:center;padding:58px 0}
.nf-grid{display:grid;grid-template-columns:1fr .82fr;gap:54px;align-items:center}
.nf-copy{max-width:690px}
.nf-eyebrow{color:var(--muted);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
h1{margin:0 0 24px;font-size:clamp(3.5rem,8vw,7.6rem);line-height:.86;letter-spacing:-.055em;text-transform:uppercase}
.nf-rule{width:56px;height:2px;background:var(--red);margin-bottom:24px}
.nf-statement{margin:0 0 8px;text-transform:uppercase;font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.4;letter-spacing:.03em}
.nf-sub{margin:0 0 26px;color:#b7b2aa}
.nf-btn{
 border:1px solid rgba(255,255,255,.75);background:rgba(5,5,5,.55);color:#fff;
 padding:15px 22px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.78rem;cursor:pointer
}
.nf-btn:hover{background:#fff;color:#050505}
.nf-after{margin-top:12px;color:#77726c;font-size:.74rem;letter-spacing:.08em}
.nf-logo-stage{
 display:flex;align-items:center;justify-content:center;min-height:530px;position:relative
}
.nf-logo-stage:before{
 content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle,rgba(215,25,32,.15),rgba(255,255,255,.035) 35%,transparent 70%);
 filter:blur(20px)
}
.nf-logo{
 width:min(100%,480px);height:auto;position:relative;
 filter:
  drop-shadow(0 0 5px rgba(255,255,255,.90))
  drop-shadow(0 0 15px rgba(255,255,255,.35));
 animation:nfPulse 4s ease-in-out infinite
}
/* The SVG is embedded as an image; use masks to give crown red and NF white precisely */
.nf-mark{position:relative;width:min(100%,480px);aspect-ratio:1400/1600}
.nf-mark .base,.nf-mark .crown{
 position:absolute;inset:0;
 -webkit-mask:url('assets/nf-logo.svg') center/contain no-repeat;
 mask:url('assets/nf-logo.svg') center/contain no-repeat;
}
.nf-mark .base{
 background:#f6f0e7;
 filter:drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.35))
}
.nf-mark .crown{
 /* crop the masked full logo so only the crown receives red neon */
 background:linear-gradient(to bottom,var(--red) 0 37.5%,transparent 37.6% 100%);
 filter:drop-shadow(0 0 5px rgba(215,25,32,.95)) drop-shadow(0 0 18px rgba(215,25,32,.70))
}
@keyframes nfPulse{0%,100%{opacity:.92}50%{opacity:1}}
.nf-footer{padding:22px 0 26px;color:#6d6963;font-size:.7rem;letter-spacing:.08em}
.nf-footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.nf-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
.nf-modal.open{display:flex}
.nf-card{width:min(100%,480px);background:#0a0a0a;border:1px solid #292929;padding:28px}
.nf-cardtop{display:flex;justify-content:space-between;gap:16px}.nf-card h2{margin:5px 0 8px;text-transform:uppercase}.nf-card p{color:var(--muted)}
.nf-close{border:0;background:none;color:#fff;font-size:1.8rem;cursor:pointer}.nf-form{display:grid;gap:12px}
.nf-form input{width:100%;background:#050505;color:#fff;border:1px solid #303030;padding:14px}
.nf-form button{border:0;background:#f3f0e8;color:#050505;padding:14px;text-transform:uppercase;font-weight:800;letter-spacing:.12em}
.nf-success{padding:14px;border:1px solid #2f5033;background:#0e1b10;color:#d8ecd9}
@media(max-width:900px){
 .nf-main{padding:42px 0 50px}
 .nf-grid{grid-template-columns:1fr;gap:16px}
 .nf-logo-stage{order:-1;min-height:330px}
 .nf-mark{width:min(78vw,360px)}
 h1{font-size:clamp(3.2rem,14vw,6rem)}
}
@media(max-width:600px){
 .nf-wrap{width:min(calc(100% - 28px),var(--max))}
 .nf-header{padding:19px 0}
 .nf-brand{font-size:.8rem}.nf-values{font-size:.55rem;letter-spacing:.13em}
 .nf-main{padding:24px 0 42px}
 .nf-logo-stage{min-height:295px}
 .nf-mark{width:min(74vw,310px)}
 h1{font-size:clamp(2.9rem,16vw,4.4rem);margin-bottom:18px}
 .nf-eyebrow{font-size:.6rem}.nf-statement{font-size:1.05rem}.nf-sub{font-size:.92rem}
 .nf-btn{width:100%;min-height:49px}
 .nf-footer-row{display:block}.nf-footer-row div+div{margin-top:6px}
}