/* ═══════════════════════════════════════════ Usul Creative Solutions — Shared Design System Version: 1.0 | Do not edit directly in production Fonts loaded via in each HTML ═══════════════════════════════════════════ */ /* TOKENS */ :root { --gold: #C89B3C; --gold-lt: #ECC95C; --navy: #17324D; --ink: #060D14; --teal: #1F7A8C; --teal-lt: #29A0B8; --ivory: #F7F5F0; --charcoal: #2B2B2B; --slate: #6B7280; --grad-gold: linear-gradient(90deg, #C89B3C 0%, #ECC95C 50%, #C89B3C 100%); --max-w: 1280px; --pad-x: 80px; } /* RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* BASE */ body { font-family: 'Lora', serif; background: var(--ink); color: #fff; overflow-x: hidden; cursor: none; overflow-wrap: break-word; } p { font-family: 'Lora', serif; font-weight: 400; } h1,h2,h3,h4,h5 { font-family: 'Libre Baskerville', serif; } /* SKIP LINK */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--gold); color: var(--ink); padding: 10px 24px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; z-index: 99999; text-decoration: none; } .skip-link:focus { top: 0; } /* GRADIENT TEXT */ .gt { background: linear-gradient(90deg,#A67B20,#C89B3C,#ECC95C,#F8E8B8,#ECC95C,#C89B3C,#A67B20); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 4.5s linear infinite; } @keyframes goldShimmer { to { background-position: 300% center; } } /* PROGRESS BAR */ #pb { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--teal-lt)); z-index: 9998; pointer-events: none; transition: width .08s linear; } /* CURSOR — desktop pointer devices only */ #cr, #cd { display: none; } @media (pointer: fine) { body { cursor: none; } #cr { display: block; position: fixed; width: 32px; height: 32px; border: 1px solid rgba(200,155,60,0.7); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .3s, height .3s, background .3s; opacity: 0; } #cd { display: block; position: fixed; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); opacity: 0; } .hovering #cr { width: 48px; height: 48px; background: rgba(200,155,60,0.1); } } /* ═══ NAV ═══ */ nav#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; padding: 28px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding .5s, background .5s, border-color .5s; } nav#nav.scrolled { padding: 16px var(--pad-x); background: rgba(6,13,20,0.95); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(200,155,60,0.12); } .logo { text-decoration: none; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .logo-img { height: 38px; width: auto; filter: drop-shadow(0 2px 8px rgba(200,155,60,0.22)); transition: filter .3s; } .logo:hover .logo-img { filter: drop-shadow(0 4px 16px rgba(200,155,60,0.42)); } .logo-w { font-family: 'Libre Baskerville', serif; font-size: 15px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; line-height: 1.2; } /* Desktop nav links */ .nav-links { display: flex; gap: 0; list-style: none; align-items: center; flex: 1; justify-content: center; } .nav-links > li { position: relative; } .nav-links > li > a { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); text-decoration: none; padding: 8px 14px; display: block; transition: color .3s; white-space: nowrap; } .nav-links > li > a:hover { color: var(--gold); } .nav-links > li.has-dd > a::after { content: ' \25BE'; font-size: 8px; opacity: 0.55; } /* Dropdown */ .nav-dd { position: absolute; top: calc(100% + 10px); left: 0; background: rgba(6,13,20,0.97); backdrop-filter: blur(24px); border: 1px solid rgba(200,155,60,0.14); min-width: 230px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, visibility .25s, transform .25s; z-index: 100; } .nav-links > li.has-dd:hover .nav-dd, .nav-links > li.has-dd:focus-within .nav-dd { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dd a { display: block; padding: 12px 20px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); text-decoration: none; border-bottom: 1px solid rgba(200,155,60,0.06); transition: background .2s, color .2s; } .nav-dd a:last-child { border-bottom: none; } .nav-dd a:hover { background: rgba(200,155,60,0.07); color: var(--gold); } /* Nav CTA */ .nav-cta { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 12px 26px; text-decoration: none; transition: background .3s, transform .3s; display: inline-block; flex-shrink: 0; white-space: nowrap; } .nav-cta:hover { background: var(--gold-lt); transform: translateY(-1px); } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; z-index: 301; flex-shrink: 0; } .nav-toggle span { display: block; width: 24px; height: 1.5px; background: rgba(255,255,255,0.88); transition: transform .3s, opacity .3s, width .3s; } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile nav overlay */ #nav-mobile { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(6,13,20,0.98); backdrop-filter: blur(24px); flex-direction: column; align-items: flex-start; padding: 100px 48px 48px; gap: 0; overflow-y: auto; } #nav-mobile.open { display: flex; } #nav-mobile a { font-family: 'Libre Baskerville', serif; font-size: 24px; font-weight: 400; color: rgba(255,255,255,0.85); text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(200,155,60,0.1); width: 100%; transition: color .3s; display: block; } #nav-mobile a:hover { color: var(--gold); } .nm-label { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(200,155,60,0.6); margin-top: 24px; margin-bottom: 4px; display: block; } #nav-mobile .nm-cta { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 14px 32px; margin-top: 24px; display: inline-block; text-decoration: none; border-bottom: none; width: auto; } /* ═══ PAGE HERO (inner pages) ═══ */ .page-hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 160px var(--pad-x) 80px; background: linear-gradient(160deg,#040810 0%,#0B1C2A 55%,#17324D 100%); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg,rgba(200,155,60,0.025) 0px,rgba(200,155,60,0.025) 1px,transparent 1px,transparent 80px); pointer-events: none; } .page-hero::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; } .ph-inner { position: relative; z-index: 1; max-width: var(--max-w); } .ph-orb { position: absolute; width: 600px; height: 400px; top: 50%; right: -60px; transform: translateY(-50%); background: radial-gradient(ellipse,rgba(200,155,60,0.1) 0%,rgba(31,122,140,0.05) 40%,transparent 70%); pointer-events: none; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 20px; } .breadcrumb a { color: inherit; text-decoration: none; transition: color .3s; } .breadcrumb a:hover { color: var(--gold); } .breadcrumb .bc-sep { color: rgba(200,155,60,0.4); font-size: 9px; } .breadcrumb .bc-cur { color: rgba(200,155,60,0.7); } .page-hero h1 { font-family: 'Libre Baskerville', serif; font-size: clamp(30px,4vw,60px); font-weight: 400; color: #fff; line-height: 1.1; margin-bottom: 18px; } .page-hero h1 em { font-style: italic; color: var(--gold-lt); } .ph-sub { font-family: 'Lora', serif; font-size: 16px; font-weight: 400; line-height: 1.75; color: rgba(255,255,255,0.7); max-width: 540px; } /* ═══ SECTION CONTAINERS ═══ */ .sec-dark { background: linear-gradient(180deg,#060D14 0%,#0A1A26 100%); padding: 100px var(--pad-x); position: relative; overflow: hidden; } .sec-dark::after, .sec-navy::after, .sec-cta::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.04; mix-blend-mode: overlay; pointer-events: none; } .sec-navy { background: linear-gradient(135deg,#17324D 0%,#1A3F57 40%,#1F7A8C 100%); padding: 100px var(--pad-x); position: relative; overflow: hidden; } .sec-ivory { background: var(--ivory); padding: 100px var(--pad-x); } .sec-cta { background: linear-gradient(135deg,#040810 0%,#0D1E2C 25%,#17324D 50%,#1A3F57 75%,#1F7A8C 100%); padding: 120px var(--pad-x); text-align: center; position: relative; overflow: hidden; } .sec-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; } /* Section headings */ .sec-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .sec-rule { width: 0; height: 1px; background: var(--gold); flex-shrink: 0; transition: width 1s cubic-bezier(.16,1,.3,1) .2s; } .sec-rule.gr { width: 28px; } .sec-rule.dark { background: var(--navy); } .sec-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .sec-label.dark { color: var(--navy); } .sec-hed { font-family: 'Libre Baskerville', serif; font-size: clamp(24px,3vw,44px); font-weight: 400; line-height: 1.1; color: #fff; margin-bottom: 18px; } .sec-hed.dark { color: var(--navy); } .sec-hed em { font-style: italic; } .sec-sub { font-family: 'Lora', serif; font-size: 15px; font-weight: 400; line-height: 1.85; color: rgba(255,255,255,0.8); max-width: 540px; } .sec-sub.dark { color: #3d4a5c; } .sec-sub.wide { max-width: 720px; } /* ═══ EYEBROW (legacy compat) ═══ */ .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .eyebrow-rule { width: 0!important; height: 1px; background: var(--gold); flex-shrink: 0; transition: width 1s cubic-bezier(.16,1,.3,1) .2s; } .eyebrow-rule.gr { width: 28px!important; } .eyebrow-text { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .eyebrow-text.dark { color: var(--navy); } /* ═══ SCROLL ANIMATIONS ═══ */ .fu { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; } .fu.d1{transition-delay:.1s} .fu.d2{transition-delay:.2s} .fu.d3{transition-delay:.3s} .fu.d4{transition-delay:.4s} .fu.in { opacity: 1; transform: none; } .fu-left { opacity: 0; transform: translateX(-28px); transition: opacity .9s ease, transform .9s ease; } .fu-left.in { opacity: 1; transform: none; } .fu-right { opacity: 0; transform: translateX(28px); transition: opacity .9s ease, transform .9s ease; } .fu-right.in { opacity: 1; transform: none; } h2.fu { clip-path: inset(0 0 100% 0); transform: translateY(16px); transition: clip-path 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease; } h2.fu.in { clip-path: inset(0 0 0% 0); transform: translateY(0); opacity: 1; } /* ═══ BUTTONS ═══ */ .btn-gold { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 16px 40px; text-decoration: none; transition: background .3s, transform .3s; display: inline-block; white-space: nowrap; } .btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); } .btn-outline-w { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.88); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(247,245,240,0.22); padding: 15px 30px; transition: border-color .3s, color .3s; white-space: nowrap; } .btn-outline-w:hover { border-color: var(--gold); color: var(--gold); } .btn-outline-d { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(23,50,77,0.3); padding: 15px 30px; transition: border-color .3s, color .3s; white-space: nowrap; } .btn-outline-d:hover { border-color: var(--navy); color: var(--navy); } /* ═══ GRIDS ═══ */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .two-col.center { align-items: center; } .three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .four-col { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; } /* ═══ CARDS ═══ */ /* Gradient-border card */ .g-card { position: relative; background: rgba(13,30,44,0.9); padding: 44px 36px 36px; overflow: hidden; transition: transform .4s ease, box-shadow .4s ease; } .g-card::before { content: ''; position: absolute; inset: 0; padding: 1px; background: linear-gradient(135deg,rgba(200,155,60,0.65) 0%,rgba(31,122,140,0.35) 50%,rgba(200,155,60,0.08) 100%); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; pointer-events: none; animation: borderFlow 5s linear infinite; animation-play-state: paused; } @keyframes borderFlow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .g-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(0,0,0,0.45), 0 0 0 1px rgba(200,155,60,0.18); } .g-card:hover::before { background: linear-gradient(135deg,rgba(200,155,60,1) 0%,rgba(31,122,140,0.6) 50%,rgba(200,155,60,0.3) 100%); background-size:300% 300%; animation: borderFlowFast 2s linear infinite; animation-play-state: running; } @keyframes borderFlowFast { 0%{background-position:0% 50%} 100%{background-position:300% 50%} } .card-sweep { position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent); transform:skewX(-18deg); pointer-events:none; } .g-card:hover .card-sweep { animation: sweepAnim 1s ease forwards; } @keyframes sweepAnim { to { left: 165%; } } .card-num-bg { position:absolute; top:-20px; right:-8px; font-family:'Libre Baskerville',serif; font-size:120px; font-weight:700; color:transparent; -webkit-text-stroke:1px rgba(200,155,60,0.07); line-height:1; user-select:none; pointer-events:none; } .card-num-row { display:flex; align-items:center; gap:14px; margin-bottom:24px; } .card-num { font-family:'Libre Baskerville',serif; font-size:13px; font-weight:500; letter-spacing:0.12em; background:var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .card-num-line { flex:1; height:1px; background:rgba(200,155,60,0.2); } .card-title { font-family:'Libre Baskerville',serif; font-size:20px; font-weight:700; color:#fff; margin-bottom:12px; line-height:1.25; } .card-desc { font-family:'Lora',serif; font-size:14px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.85); margin-bottom:22px; } .card-link { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:gap .3s; } .card-link-bar { display:block; width:22px; height:1px; background:var(--gold); transition:width .35s; } .g-card:hover .card-link { gap: 14px; } .g-card:hover .card-link-bar { width: 38px; } /* Simple border card */ .s-card { background: rgba(13,30,44,0.85); padding: 40px 32px; border: 1px solid rgba(200,155,60,0.2); transition: border-color .3s, transform .35s; } .s-card:hover { border-color: rgba(200,155,60,0.4); transform: translateY(-4px); } /* Ivory cards */ .i-card { background: #fff; padding: 36px 32px; border: 1px solid rgba(23,50,77,0.1); transition: border-color .3s, transform .35s; } .i-card:hover { border-color: rgba(23,50,77,0.25); transform: translateY(-3px); } .i-card .card-title { color: var(--navy); } .i-card .card-desc { color: #3d4a5c; } /* ═══ PRICING CARDS ═══ */ .price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .price-card { background: rgba(13,30,44,0.9); padding: 40px 32px; border: 1px solid rgba(200,155,60,0.22); transition: border-color .3s, transform .35s; position: relative; } .price-card:hover { border-color: rgba(200,155,60,0.4); transform: translateY(-4px); } .price-card.featured { border-color: var(--gold); } .price-card.featured::before { content: 'Recommended'; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 16px; white-space: nowrap; } .pc-name { font-family: 'Libre Baskerville', serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; } .pc-who { font-family: 'Lora', serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.52); margin-bottom: 24px; font-style: italic; } .pc-price { font-family: 'Libre Baskerville', serif; font-size: 40px; font-weight: 400; color: var(--gold); line-height: 1; margin-bottom: 4px; } .pc-price sup { font-size: 18px; vertical-align: super; } .pc-period { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-bottom: 28px; } .pc-rule { width: 28px; height: 1px; background: rgba(200,155,60,0.35); margin-bottom: 24px; } .pc-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 32px; } .pc-features li { font-family: 'Lora', serif; font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,0.82); padding-left: 20px; position: relative; line-height: 1.6; } .pc-features li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); } /* ═══ FAQ ACCORDION ═══ */ .faq-section { margin-bottom: 0; } .faq-cat { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; margin-top: 48px; display: block; } .faq-cat:first-child { margin-top: 0; } .faq-item { border-bottom: 1px solid rgba(200,155,60,0.1); } .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-q { font-family: 'Libre Baskerville', serif; font-size: 17px; font-weight: 400; color: #fff; line-height: 1.35; } .faq-q.dark { color: var(--navy); } .faq-icon { width: 20px; height: 20px; flex-shrink: 0; position: relative; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--gold); transition: transform .35s, opacity .35s; } .faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); } .faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); } details.faq-item[open] .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; } .faq-a { font-family: 'Lora', serif; font-size: 14.5px; font-weight: 400; line-height: 1.85; color: rgba(255,255,255,0.75); padding-bottom: 22px; max-width: 720px; } .faq-a.dark { color: #3d4a5c; } /* ═══ LISTS ═══ */ .incl-list { list-style: none; display: flex; flex-direction: column; gap: 11px; } .incl-list li { font-family: 'Lora', serif; font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,0.88); padding-left: 22px; position: relative; line-height: 1.65; } .incl-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); } .excl-list { list-style: none; display: flex; flex-direction: column; gap: 11px; } .excl-list li { font-family: 'Lora', serif; font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,0.5); padding-left: 22px; position: relative; line-height: 1.65; } .excl-list li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 10px; height: 1px; background: rgba(255,80,80,0.45); } /* ═══ PROCESS STEPS ═══ */ .steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; } .step { background: rgba(6,13,20,0.25); padding: 40px 28px; position: relative; overflow: hidden; transition: background .35s; } .step::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--gold),var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .45s ease; } .step:hover { background: rgba(6,13,20,0.4); } .step:hover::after { transform: scaleX(1); } .step-num { font-family: 'Libre Baskerville', serif; font-size: 40px; font-weight: 400; color: rgba(255,255,255,0.06); line-height: 1; margin-bottom: 12px; } .step-lbl { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .step-title { font-family: 'Libre Baskerville', serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px; } .step-text { font-family: 'Lora', serif; font-size: 13.5px; font-weight: 400; line-height: 1.85; color: rgba(255,255,255,0.82); } /* ═══ NOTICE BOXES ═══ */ .notice { background: rgba(200,155,60,0.08); border-left: 2px solid var(--gold); padding: 20px 24px; margin: 28px 0; } .notice-lbl { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; } .notice p { font-family: 'Lora', serif; font-size: 14px; font-weight: 400; line-height: 1.75; color: rgba(255,255,255,0.78); } .notice.teal { background: rgba(31,122,140,0.1); border-left-color: var(--teal); } .notice.teal p { color: rgba(255,255,255,0.82); } .notice.warn { background: rgba(255,80,80,0.06); border-left-color: rgba(255,80,80,0.45); } .notice.warn p { color: rgba(255,255,255,0.75); } .notice.ivory { background: rgba(23,50,77,0.07); border-left-color: var(--navy); } .notice.ivory p { color: #3d4a5c; } /* ═══ NO-GUARANTEE SECTION ═══ */ .ngu-wrap { max-width: 820px; margin: 0 auto; } .ngu-badge { display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); border: 1px solid rgba(23,50,77,0.22); padding: 8px 16px; margin-bottom: 28px; } .ngu-badge::before { content: ''; width: 8px; height: 8px; background: var(--teal); border-radius: 50%; flex-shrink: 0; } .ngu-stmt { font-family: 'Libre Baskerville', serif; font-size: clamp(18px,2vw,26px); font-weight: 400; font-style: italic; line-height: 1.42; color: var(--navy); margin-bottom: 22px; } .ngu-desc { font-family: 'Lora', serif; font-size: 14.5px; font-weight: 400; line-height: 1.85; color: #3d4a5c; } /* ═══ CTA SECTION ═══ */ .cta-orb { position:absolute; width:900px; height:600px; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(200,155,60,0.14) 0%,rgba(31,122,140,0.07) 40%,transparent 70%); pointer-events:none; animation:ctaOrbPulse 7s ease-in-out infinite; } @keyframes ctaOrbPulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.1)} } .cta-eyebrow { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.38em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; } .cta-hed { font-family:'Libre Baskerville',serif; font-size:clamp(28px,3.6vw,52px); font-weight:400; color:#fff; line-height:1.1; margin-bottom:20px; } .cta-hed em { font-style:italic; } .cta-sub { font-family:'Lora',serif; font-size:15px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.75); max-width:460px; margin:0 auto 44px; } .cta-acts { display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap; } /* ═══ FORM ═══ */ .field { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; } .field label { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.65); } .field input, .field textarea, .field select { font-family:'Lora',serif; font-size:15px; font-weight:400; background:rgba(255,255,255,0.05); border:1px solid rgba(200,155,60,0.2); color:#fff; padding:14px 18px; outline:none; width:100%; transition:border-color .3s; appearance:none; -webkit-appearance:none; } .field input:focus,.field textarea:focus,.field select:focus { border-color:var(--gold); } .field textarea { min-height:130px; resize:vertical; } .field-check { display:flex; align-items:flex-start; gap:12px; margin-bottom:22px; } .field-check input[type="checkbox"] { width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:var(--gold); cursor:pointer; } .field-check label { font-family:'Lora',serif; font-size:14px; font-weight:400; line-height:1.65; color:rgba(255,255,255,0.75); cursor:pointer; } .field-check label a { color:var(--gold); text-decoration:underline; text-decoration-color:rgba(200,155,60,0.4); } /* ═══ CHECKOUT PLACEHOLDER ═══ */ .checkout-page { min-height:100vh; padding:140px var(--pad-x) 80px; background:linear-gradient(180deg,#060D14 0%,#0A1A26 100%); } .checkout-wrap { max-width:640px; margin:0 auto; } .checkout-box { background:rgba(255,255,255,0.04); border:1px solid rgba(200,155,60,0.14); padding:40px; margin-bottom:22px; } .checkout-box h3 { font-family:'Libre Baskerville',serif; font-size:19px; font-weight:700; color:#fff; margin-bottom:18px; } .co-row { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(200,155,60,0.07); } .co-row:last-child { border-bottom:none; } .co-label { font-family:'Lora',serif; font-size:14px; font-weight:400; color:rgba(255,255,255,0.68); } .co-value { font-family:'Libre Baskerville',serif; font-size:16px; font-weight:700; color:#fff; } .co-value.gold { color:var(--gold); } .co-note { font-family:'Lora',serif; font-size:12px; font-weight:400; color:rgba(255,255,255,0.4); font-style:italic; margin-top:10px; } .co-submit { width:100%; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); background:var(--gold); border:none; padding:18px 40px; cursor:not-allowed; opacity:0.5; transition:opacity .3s, background .3s; } .co-submit.active { cursor:pointer; opacity:1; } .co-submit.active:hover { background:var(--gold-lt); } .co-legal-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:18px; } .co-legal-links a { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.38); text-decoration:none; transition:color .3s; } .co-legal-links a:hover { color:var(--gold); } /* Payment status pages */ .pay-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px var(--pad-x); text-align:center; background:linear-gradient(160deg,#040810 0%,#0B1C2A 100%); } .pay-inner { max-width:540px; } .pay-icon { font-size:44px; margin-bottom:28px; cursor:default; } .pay-hed { font-family:'Libre Baskerville',serif; font-size:36px; font-weight:400; color:#fff; margin-bottom:14px; } .pay-sub { font-family:'Lora',serif; font-size:15px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.68); margin-bottom:28px; } .pay-notice { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); background:rgba(200,155,60,0.08); border:1px solid rgba(200,155,60,0.2); padding:14px 20px; margin-bottom:28px; } /* Protected route page */ .protected-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px var(--pad-x); background:var(--ink); text-align:center; } .protected-inner { max-width:520px; } .protected-hed { font-family:'Libre Baskerville',serif; font-size:30px; font-weight:400; color:#fff; margin-bottom:14px; } .protected-sub { font-family:'Lora',serif; font-size:15px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.55); margin-bottom:36px; } .protected-badge { display:inline-flex; align-items:center; gap:8px; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,80,80,0.7); border:1px solid rgba(255,80,80,0.25); padding:8px 16px; margin-bottom:28px; } /* Legal placeholder page */ .legal-page { padding:80px var(--pad-x); background:var(--ivory); } .legal-wrap { max-width:820px; margin:0 auto; } .legal-status { display:inline-flex; align-items:center; gap:10px; font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(200,100,40,0.9); border:1px solid rgba(200,100,40,0.3); padding:8px 16px; margin-bottom:28px; } .legal-status::before { content:''; width:8px; height:8px; background:rgba(200,100,40,0.8); border-radius:50%; flex-shrink:0; } .legal-placeholder-box { background:rgba(23,50,77,0.07); border:1px solid rgba(23,50,77,0.16); padding:28px 32px; margin-bottom:40px; } .legal-placeholder-box p { font-family:'Lora',serif; font-size:15px; font-weight:500; line-height:1.8; color:var(--navy); margin:0; } .legal-page h2 { font-family:'Libre Baskerville',serif; font-size:24px; font-weight:700; color:var(--navy); margin-bottom:18px; margin-top:44px; } .legal-page h2:first-of-type { margin-top:0; } .legal-page p, .legal-page li { font-family:'Lora',serif; font-size:15px; font-weight:400; line-height:1.85; color:#3d4a5c; margin-bottom:16px; } .legal-page ul { padding-left:22px; margin-bottom:16px; } .legal-page ul li { list-style:disc; list-style-color:var(--navy); } /* ═══ FOOTER ═══ */ footer { background:var(--charcoal); padding:88px var(--pad-x) 56px; } .footer-top { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,0.07); } .foot-logo-row { display:flex; align-items:center; gap:12px; margin-bottom:18px; text-decoration:none; } .foot-logo-img { height:36px; width:auto; } .foot-logo-w { font-family:'Libre Baskerville',serif; font-size:14px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; background:var(--grad-gold); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; } .foot-tagline { font-family:'Lora',serif; font-size:13px; font-weight:400; line-height:1.85; color:rgba(255,255,255,0.72); max-width:240px; margin-bottom:18px; } .foot-ngu { font-family:'Lora',serif; font-size:11.5px; font-weight:400; line-height:1.7; color:rgba(255,255,255,0.35); max-width:240px; border-top:1px solid rgba(200,155,60,0.1); padding-top:16px; } .foot-col-title { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; } .foot-links { list-style:none; display:flex; flex-direction:column; gap:12px; } .foot-links a { font-family:'Lora',serif; font-size:13.5px; font-weight:400; color:rgba(255,255,255,0.65); text-decoration:none; transition:color .3s; } .foot-links a:hover { color:#fff; } .footer-bottom { max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding-top:30px; flex-wrap:wrap; gap:12px; } .foot-copy { font-family:'Lora',serif; font-size:12.5px; font-weight:400; color:rgba(255,255,255,0.38); } .foot-mark { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(200,155,60,0.38); } /* ═══ ACCESSIBILITY ═══ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ═══ REDUCED MOTION ═══ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } html { scroll-behavior:auto; } } /* ═══ RESPONSIVE ═══ */ @media (max-width:1200px) { :root { --pad-x:56px; } .footer-top { grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; } .price-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:1024px) { :root { --pad-x:44px; } .four-col { grid-template-columns:repeat(2,1fr); } .three-col { grid-template-columns:repeat(2,1fr); } .price-grid { grid-template-columns:1fr 1fr; } .steps-grid { grid-template-columns:repeat(2,1fr); } .footer-top { grid-template-columns:1fr 1fr; } } @media (max-width:768px) { :root { --pad-x:28px; } .nav-links, .nav-cta { display:none!important; } .nav-toggle { display:flex; } nav#nav { padding:18px var(--pad-x)!important; } .page-hero { padding:120px var(--pad-x) 56px; min-height:40vh; } .page-hero h1 { font-size:clamp(26px,7vw,42px); } .ph-sub { font-size:14.5px; } .ph-orb { display:none; } .sec-dark,.sec-navy,.sec-ivory,.sec-cta,.ngu-section { padding:72px var(--pad-x); } .two-col { grid-template-columns:1fr; gap:40px; } .three-col { grid-template-columns:1fr; } .four-col { grid-template-columns:1fr 1fr; } .steps-grid { grid-template-columns:1fr 1fr; } .price-grid { grid-template-columns:1fr; } footer { padding:60px var(--pad-x) 40px; } .footer-top { grid-template-columns:1fr 1fr; gap:32px; } .footer-bottom { flex-direction:column; align-items:flex-start; } .cta-acts { flex-direction:column; } .checkout-page { padding:100px var(--pad-x) 60px; } .checkout-box { padding:28px 22px; } } @media (max-width:480px) { :root { --pad-x:20px; } .logo-w { font-size:12px; } .four-col { grid-template-columns:1fr; } .steps-grid { grid-template-columns:1fr; } .footer-top { grid-template-columns:1fr; } .page-hero h1 { font-size:clamp(22px,8vw,34px); } .pc-price { font-size:32px; } .btn-gold,.btn-outline-w { padding:14px 26px; font-size:11px; } } @media (max-width:360px) { :root { --pad-x:16px; } .btn-gold,.btn-outline-w { padding:13px 20px; } .logo-w { display:none; } }