/* FACTORAHUB — MAIN.CSS | v3.0-STABLE | Organized */ /* ==================================================================== */ /* WARNING: DO NOT EDIT style.min.css. Edit this file only and regenerate. */ /* ==================================================================== */ /* 1. Root Variables & Theme */ :root { --bureau-gold: #d4af37; --bureau-black: #0a0a0a; --bureau-white: #ffffff; --font-main: 'Outfit', sans-serif; } /* 2. Base Layout */ /* FACTORAHUB — MAIN.CSS | v2.2-STABLE | AdSense Ready */ /* ── BASE RESET ───────────────────────────────────────────── */ *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb} html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;scroll-behavior:smooth} body{margin:0;line-height:inherit;background-color:#fafafa;color:#1a1a1a;font-size:18px} /* ── SHIMMER AD ENGINE — Always-On Shimmer (not hover-gated) ── */ .shimmer-ad-hook{ background: linear-gradient(90deg, #fafafa 25%, #fff7e6 50%, #fafafa 75%); background-size: 200% 100%; animation: bloomberg-shimmer 2s infinite linear; border: 1px solid #d4af37; position: relative; overflow: hidden; border-radius: 1rem; } @keyframes bloomberg-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .shimmer-sweep{display:none;} /* Performance: shimmer is paint-heavy; disable on mobile/reduced-motion */ @media (prefers-reduced-motion: reduce), (max-width: 768px) { .shimmer-ad-hook { animation: none !important; } } /* Content cards min-padding */ .adv-card,.editorial-body{min-padding:20px} hr{height:0;color:inherit;border-top-width:1px} a{color:inherit;text-decoration:inherit} b,strong{font-weight:bolder} button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0} button,select{text-transform:none} button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none;cursor:pointer} :-moz-focusring{outline:auto} :-moz-ui-invalid{box-shadow:none} ::placeholder{opacity:1;color:#9ca3af} :disabled{cursor:default} img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle} img,video{max-width:100%;height:auto} [hidden]{display:none} /* ── LAYOUT ───────────────────────────────────────────────── */ .container{width:100%;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem} @media (min-width:768px){.container{max-width:768px}} @media (min-width:1024px){.container{max-width:1024px}} @media (min-width:1280px){.container{max-width:1400px}} @media (min-width:1536px){.container{max-width:1400px}} .mx-auto{margin-left:auto;margin-right:auto} .max-w-4xl{max-width:56rem} .max-w-5xl{max-width:64rem} .max-w-xl{max-width:36rem} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-sm{max-width:24rem} .min-h-screen{min-height:100vh} /* ── FLEX ─────────────────────────────────────────────────── */ .flex{display:flex} .inline-flex{display:inline-flex} .flex-col{flex-direction:column} .flex-row{flex-direction:row} .flex-wrap{flex-wrap:wrap} .items-start{align-items:flex-start} .items-center{align-items:center} .items-end{align-items:flex-end} .items-stretch{align-items:stretch} .justify-start{justify-content:flex-start} .justify-center{justify-content:center} .justify-end{justify-content:flex-end} .justify-between{justify-content:space-between} .justify-around{justify-content:space-around} .flex-1{flex:1 1 0%} .flex-shrink-0{flex-shrink:0} .shrink-0{flex-shrink:0} .grow{flex-grow:1} .flex-grow{flex-grow:1} /* ── GRID ─────────────────────────────────────────────────── */ .grid{display:grid} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1024px){ .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lg\:col-span-3{grid-column:span 3/span 3} .lg\:col-span-4{grid-column:span 4/span 4} .lg\:col-span-6{grid-column:span 6/span 6} .lg\:col-span-8{grid-column:span 8/span 8} .lg\:col-span-12{grid-column:span 12/span 12} .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))} } .col-span-1{grid-column:span 1/span 1} /* ── DISPLAY ──────────────────────────────────────────────── */ .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .hidden{display:none} .overflow-hidden{overflow:hidden} .overflow-x-hidden{overflow-x:hidden} .relative{position:relative} .absolute{position:absolute} .fixed{position:fixed} .sticky{position:sticky} .inset-0{top:0;right:0;bottom:0;left:0} .top-0{top:0} .bottom-0{bottom:0} .left-0{left:0} .right-0{right:0} .top-4{top:1rem} .bottom-4{bottom:1rem} .right-4{right:1rem} .left-1\/2{left:50%} .top-1\/2{top:50%} .top-32{top:8rem} .z-0{z-index:0} .z-10{z-index:10} .z-20{z-index:20} .z-30{z-index:30} .z-50{z-index:50} .z-\[999\]{z-index:999} .z-\[1000\]{z-index:1000} .z-\[9999\]{z-index:9999} .z-\[9999999\]{z-index:9999999} .z-\[10000\]{z-index:10000} .z-\[10001\]{z-index:10001} /* ── SIZING ───────────────────────────────────────────────── */ .w-full{width:100%} .w-1\/2{width:50%} .w-2{width:.5rem} .w-4{width:1rem} .w-8{width:2rem} .w-10{width:2.5rem} .w-12{width:3rem} .w-14{width:3.5rem} .w-16{width:4rem} .w-20{width:5rem} .w-48{width:12rem} .w-\[100vw\]{width:100vw} .w-\[72\%\]{width:72%} .w-\[28\%\]{width:28%} .h-full{height:100%} .h-\[1px\]{height:1px} .h-\[2px\]{height:.125rem} .h-1{height:.25rem} .h-2\.5{height:.625rem} .h-3{height:.75rem} .h-8{height:2rem} .h-10{height:2.5rem} .h-12{height:3rem} .h-14{height:3.5rem} .h-16{height:4rem} .h-20{height:5rem} .h-48{height:12rem} .h-\[70vh\]{height:70vh} .h-\[305px\]{height:305px} .h-\[650px\]{height:650px} .min-h-\[500px\]{min-height:500px} .min-h-\[600px\]{min-height:600px} .min-h-\[70px\]{min-height:70px} .aspect-video{aspect-ratio:16/9} .aspect-\[4\/3\]{aspect-ratio:4/3} .aspect-\[16\/9\]{aspect-ratio:16/9} .max-w-\[200px\]{max-width:200px} .max-w-\[1400px\]{max-width:1400px;margin-left:auto;margin-right:auto} .article-body{font-size:1.1rem;line-height:1.8;color:#333;font-weight:400} .article-body p{margin-bottom:1.5rem} .article-body h2{font-size:1.8rem;font-weight:900;margin-top:2.5rem;margin-bottom:1.2rem;text-transform:uppercase;color:#111;letter-spacing:-0.02em} .article-body h3{font-size:1.5rem;font-weight:900;margin-top:2rem;margin-bottom:1rem;text-transform:uppercase;color:#111} .grid-equal-height{display:grid;grid-auto-rows:1fr} .flex-equal-height{display:flex;align-items:stretch} /* ── SPACING — PADDING ────────────────────────────────────── */ .p-0{padding:0} .p-6{padding:1.5rem} .p-8{padding:2rem} .p-10{padding:2.5rem} .p-12{padding:3rem} .p-16{padding:4rem} .p-24{padding:6rem} .px-3{padding-left:.75rem;padding-right:.75rem} .px-4{padding-left:1rem;padding-right:1rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .px-8{padding-left:2rem;padding-right:2rem} .px-14{padding-left:3.5rem;padding-right:3.5rem} .px-16{padding-left:4rem;padding-right:4rem} .py-1\.5{padding-top:.375rem;padding-bottom:.375rem} .py-2{padding-top:.5rem;padding-bottom:.5rem} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem} .py-3{padding-top:.75rem;padding-bottom:.75rem} .py-4{padding-top:1rem;padding-bottom:1rem} .py-5{padding-top:1.25rem;padding-bottom:1.25rem} .py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2rem;padding-bottom:2rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3rem;padding-bottom:3rem} .py-16{padding-top:4rem;padding-bottom:4rem} .py-24{padding-top:6rem;padding-bottom:6rem} .py-32{padding-top:8rem;padding-bottom:8rem} .py-40{padding-top:10rem;padding-bottom:10rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-8{padding-top:2rem} .pt-10{padding-top:2.5rem} .pt-12{padding-top:3rem} .pt-16{padding-top:4rem} .pt-20{padding-top:5rem} .pt-32{padding-top:8rem} .pb-4{padding-bottom:1rem} .pb-6{padding-bottom:1.5rem} .pb-8{padding-bottom:2rem} .pb-10{padding-bottom:2.5rem} .pb-16{padding-bottom:4rem} .pb-24{padding-bottom:6rem} .pb-40{padding-bottom:10rem} .pr-6{padding-right:1.5rem} .pl-6{padding-left:1.5rem} @media (min-width:768px){ .md\:px-16{padding-left:4rem;padding-right:4rem} .md\:p-16{padding:4rem} .md\:p-24{padding:6rem} .md\:py-32{padding-top:8rem;padding-bottom:8rem} .md\:w-auto{width:auto} } @media (min-width:1024px){ .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem} .lg\:p-24{padding:6rem} .lg\:py-32{padding-top:8rem;padding-bottom:8rem} } /* ── SPACING — MARGIN ─────────────────────────────────────── */ .m-0{margin:0} .mb-0{margin-bottom:0} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .mb-10{margin-bottom:2.5rem} .mb-12{margin-bottom:3rem} .mb-16{margin-bottom:4rem} .mb-20{margin-bottom:5rem} .mb-24{margin-bottom:6rem} .mb-32{margin-bottom:8rem} .mb-40{margin-bottom:10rem} .mt-0{margin-top:0} .mt-2{margin-top:.5rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mt-10{margin-top:2.5rem} .mt-12{margin-top:3rem} .mt-16{margin-top:4rem} .mt-32{margin-top:8rem} .mt-40{margin-top:10rem} .mx-6{margin-left:1.5rem;margin-right:1.5rem} .my-12{margin-top:3rem;margin-bottom:3rem} .-translate-y-1{--tw-translate-y:-0.25rem;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} .-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} .-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} .translate-x-\[-50\%\]{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} .translate-y-\[-50\%\]{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0)) rotate(var(--tw-rotate,0)) skewX(var(--tw-skew-x,0)) skewY(var(--tw-skew-y,0)) scaleX(var(--tw-scale-x,1)) scaleY(var(--tw-scale-y,1))} /* ── GAPS ─────────────────────────────────────────────────── */ .gap-2{gap:.5rem} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-8{gap:2rem} .gap-10{gap:2.5rem} .gap-12{gap:3rem} .gap-16{gap:4rem} .gap-20{gap:5rem} .gap-24{gap:6rem} .space-y-6>*+*{margin-top:1.5rem} .space-y-8>*+*{margin-top:2rem} .space-y-10>*+*{margin-top:2.5rem} .space-y-12>*+*{margin-top:3rem} .space-y-16>*+*{margin-top:4rem} @media (min-width:1024px){ .lg\:gap-20{gap:5rem} .lg\:flex-row{flex-direction:row} .lg\:w-1\/2{width:50%} .lg\:w-\[72\%\]{width:72%} .lg\:w-\[28\%\]{width:28%} .lg\:hidden{display:none} .lg\:flex{display:flex} .lg\:col-span-6{grid-column:span 6/span 6} .lg\:col-span-3{grid-column:span 3/span 3} .lg\:col-span-8{grid-column:span 8/span 8} } @media (min-width:768px){ .md\:flex-row{flex-direction:row} .md\:flex-col{flex-direction:column} .md\:hidden{display:none} .sm\:block{display:block} .md\:mb-0{margin-bottom:0} .md\:text-2xl{font-size:1.5rem;line-height:2rem} .md\:text-7xl{font-size:4.5rem;line-height:1} .md\:text-8xl{font-size:6rem;line-height:1} .md\:text-xl{font-size:1.25rem;line-height:1.75rem} .md\:text-sm{font-size:.875rem;line-height:1.25rem} } /* ── TYPOGRAPHY ───────────────────────────────────────────── */ .text-xs{font-size:.75rem;line-height:1rem} .text-sm{font-size:.875rem;line-height:1.25rem} .text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-xl{font-size:1.25rem;line-height:1.75rem} .text-2xl{font-size:1.5rem;line-height:2rem} .text-3xl{font-size:1.875rem;line-height:2.25rem} .text-4xl{font-size:2.25rem;line-height:2.5rem} .text-5xl{font-size:3rem;line-height:1} .text-6xl{font-size:3.75rem;line-height:1} .text-7xl{font-size:4.5rem;line-height:1} .text-8xl{font-size:6rem;line-height:1} .text-\[8px\]{font-size:8px} .text-\[9px\]{font-size:9px} .text-\[10px\]{font-size:10px} .text-\[11px\]{font-size:11px} .text-\[12px\]{font-size:12px} .text-\[13px\]{font-size:13px} .text-\[14px\]{font-size:14px} .font-medium{font-weight:500} .font-semibold{font-weight:600} .font-bold{font-weight:700} .font-extrabold{font-weight:800} .font-black{font-weight:900} .uppercase{text-transform:uppercase} .lowercase{text-transform:lowercase} .capitalize{text-transform:capitalize} .tracking-tighter{letter-spacing:-.05em} .tracking-tight{letter-spacing:-.025em} .tracking-normal{letter-spacing:0} .tracking-wide{letter-spacing:.025em} .tracking-wider{letter-spacing:.05em} .tracking-widest{letter-spacing:.1em} .tracking-\[0\.2em\]{letter-spacing:.2em} .tracking-\[0\.3em\]{letter-spacing:.3em} .tracking-\[0\.4em\]{letter-spacing:.4em} .tracking-\[0\.5em\]{letter-spacing:.5em} .tracking-\[0\.6em\]{letter-spacing:.6em} .text-center{text-align:center} .text-left{text-align:left} .text-right{text-align:right} .leading-none{line-height:1} .leading-tight{line-height:1.25} .leading-snug{line-height:1.375} .leading-normal{line-height:1.5} .leading-relaxed{line-height:1.625} .leading-loose{line-height:2} .leading-\[1\.05\]{line-height:1.05} .leading-\[1\.1\]{line-height:1.1} .leading-\[1\.2\]{line-height:1.2} .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .whitespace-nowrap{white-space:nowrap} .italic{font-style:italic} .underline{text-decoration-line:underline} .no-underline{text-decoration-line:none} .decoration-\[0\.4\]{text-decoration-opacity:.4} .underline-offset-8{text-underline-offset:8px} .select-none{user-select:none} /* ── COLORS — TEXT ────────────────────────────────────────── */ .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))} .text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))} .text-\[\#1a1a1a\]{color:#1a1a1a} .text-\[\#d4af37\]{color:#d4af37} .text-\[\#B8860B\]{color:#B8860B} .text-\[\#b8962e\]{color:#b8962e} .text-\[\#555555\]{color:#555555} .text-\[\#aaaaaa\]{color:#aaaaaa} .text-gray-400{color:#9ca3af} .text-gray-500{color:#6b7280} .text-emerald-500{color:#10b981} .text-emerald-600{color:#059669} .text-white\/60{color:rgb(255 255 255/.6)} .text-white\/90{color:rgb(255 255 255/.9)} /* ── COLORS — BACKGROUND ──────────────────────────────────── */ .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))} .bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))} .bg-\[\#000000\]{background-color:#000000} .bg-\[\#1a1a1a\]{background-color:#1a1a1a} .bg-\[\#262626\]{background-color:#262626} .bg-\[\#d4af37\]{background-color:#d4af37} .bg-\[\#b8962e\]{background-color:#b8962e} .bg-\[\#f5f5f5\]{background-color:#f5f5f5} .bg-\[\#fafafa\]{background-color:#fafafa} .bg-\[\#0f1115\]{background-color:#0f1115} .bg-\[\#030712\]{background-color:#030712} .bg-emerald-50{background-color:#ecfdf5} .bg-red-50{background-color:#fef2f2} .bg-\[\#d4af37\]\/5{background-color:rgb(212 175 55/.05)} .bg-\[\#d4af37\]\/10{background-color:rgb(212 175 55/.1)} .bg-white\/5{background-color:rgb(255 255 255/.05)} .bg-transparent{background-color:transparent} /* ── COLORS — BORDER ──────────────────────────────────────── */ .border{border-width:1px} .border-2{border-width:2px} .border-4{border-width:4px} .border-b{border-bottom-width:1px} .border-t{border-top-width:1px} .border-l{border-left-width:1px} .border-r{border-right-width:1px} .border-y{border-top-width:1px;border-bottom-width:1px} .border-t-4{border-top-width:4px} .border-l-\[8px\]{border-left-width:8px} .border-l-\[12px\]{border-left-width:12px} .border-\[\#eeeeee\]{border-color:#eeeeee} .border-\[\#d4af37\]{border-color:#d4af37} .border-\[\#B8860B\]{border-color:#B8860B} .border-\[\#1a1a1a\]{border-color:#1a1a1a} .border-\[\#f5f5f5\]{border-color:#f5f5f5} .border-white{border-color:#fff} .border-white\/10{border-color:rgb(255 255 255/.1)} .border-white\/20{border-color:rgb(255 255 255/.2)} .border-\[\#d4af37\]\/10{border-color:rgb(212 175 55/.1)} .border-\[\#d4af37\]\/20{border-color:rgb(212 175 55/.2)} .border-\[\#d4af37\]\/30{border-color:rgb(212 175 55/.3)} .border-dashed{border-style:dashed} .border-emerald-200{border-color:#a7f3d0} .border-red-200{border-color:#fecaca} .divide-y>*+*{border-top-width:1px;border-style:solid;border-color:#e5e7eb} /* ── ROUNDED ──────────────────────────────────────────────── */ .rounded{border-radius:.25rem} .rounded-md{border-radius:.375rem} .rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1rem} .rounded-3xl{border-radius:1.5rem} .rounded-\[2\.5rem\]{border-radius:2.5rem} .rounded-\[3rem\]{border-radius:3rem} .rounded-\[3\.5rem\]{border-radius:3.5rem} .rounded-\[2rem\]{border-radius:2rem} .rounded-\[4px\]{border-radius:4px} .rounded-full{border-radius:9999px} .rounded-r-\[3rem\]{border-radius:0 3rem 3rem 0} /* ── SHADOW ───────────────────────────────────────────────── */ .shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} .shadow{box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1)} .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)} .shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)} .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0/.25)} .shadow-\[0_4px_15px_rgba\(0\,0\,0\,0\.05\)\]{box-shadow:0 4px 15px rgba(0,0,0,.05)} .shadow-\[0_10px_40px_rgba\(212\,175\,55\,0\.12\)\]{box-shadow:0 10px 40px rgba(212,175,55,.12)} .shadow-\[0_20px_60px_rgba\(212\,175\,55\,0\.08\)\,0_4px_20px_rgba\(0\,0\,0\,0\.06\)\]{box-shadow:0 20px 60px rgba(212,175,55,.08),0 4px 20px rgba(0,0,0,.06)} .shadow-\[0_40px_100px_rgba\(0\,0\,0\,0\.04\)\]{box-shadow:0 40px 100px rgba(0,0,0,.04)} .shadow-\[\#d4af37\]\/20{box-shadow:0 10px 15px -3px rgba(212,175,55,.2)} /* ── OBJECT FIT ───────────────────────────────────────────── */ .object-cover{object-fit:cover} .object-contain{object-fit:contain} .object-center{object-position:center} /* ── OPACITY ──────────────────────────────────────────────── */ .opacity-0{opacity:0} .opacity-1{opacity:1} .opacity-10{opacity:.1} .opacity-40{opacity:.4} .opacity-60{opacity:.6} .opacity-80{opacity:.8} .opacity-100{opacity:1} /* ── TRANSITIONS & ANIMATIONS ─────────────────────────────── */ .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .duration-300{transition-duration:300ms} .duration-500{transition-duration:500ms} .duration-700{transition-duration:700ms} .duration-1000{transition-duration:1000ms} .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)} .animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .animate-spin{animation:spin 1s linear infinite} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── HOVER STATES ─────────────────────────────────────────── */ .hover\:text-\[\#d4af37\]:hover{color:#d4af37} .hover\:text-\[\#b8962e\]:hover{color:#b8962e} .hover\:text-white:hover{color:#fff} .hover\:text-black:hover{color:#000} .hover\:bg-\[\#d4af37\]:hover{background-color:#d4af37} .hover\:bg-\[\#b8962e\]:hover{background-color:#b8962e} .hover\:bg-\[\#B8860B\]:hover{background-color:#B8860B} .hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a} .hover\:border-\[\#d4af37\]:hover{border-color:#d4af37} .hover\:border-white:hover{border-color:#fff} .hover\:opacity-100:hover{opacity:1} .hover\:scale-105:hover{transform:scale(1.05)} .hover\:scale-110:hover{transform:scale(1.1)} .hover\:scale-\[1\.02\]:hover{transform:scale(1.02)} .hover\:-translate-y-1:hover{transform:translateY(-.25rem)} .hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)} .hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)} .hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgb(0 0 0/.25)} /* ── GROUP HOVER ──────────────────────────────────────────── */ .group:hover .group-hover\:scale-105{transform:scale(1.05)} .group:hover .group-hover\:scale-110{transform:scale(1.1)} .group:hover .group-hover\:opacity-100{opacity:1} .group:hover .group-hover\:text-white{color:#fff} .group:hover .group-hover\:text-\[\#d4af37\]{color:#d4af37} .group:hover .group-hover\:bg-\[\#d4af37\]{background-color:#d4af37} .group:hover .group-hover\:border-\[\#d4af37\]{border-color:#d4af37} .group:hover .group-hover\:scale-\[1\.02\]{transform:scale(1.02)} .group:hover .group-hover\:scale-110{transform:scale(1.1)} .scale-\[1\.1\]:hover{transform:scale(1.1)} /* ── FOCUS ────────────────────────────────────────────────── */ .focus\:border-\[\#d4af37\]:focus{border-color:#d4af37} .focus\:ring-2:focus{box-shadow:0 0 0 2px var(--ring-color,rgba(212,175,55,.3))} .focus\:ring-\[\#d4af37\]\/30:focus{--ring-color:rgba(212,175,55,.3);box-shadow:0 0 0 2px var(--ring-color)} .outline-none{outline:2px solid transparent;outline-offset:2px} .resize-none{resize:none} /* ── MISC UTILITIES ───────────────────────────────────────── */ .cursor-pointer{cursor:pointer} .pointer-events-none{pointer-events:none} .select-none{user-select:none} .backdrop-filter{backdrop-filter:var(--tw-backdrop-filter)} .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)} .blur-\[120px\]{filter:blur(120px)} .mix-blend-multiply{mix-blend-mode:multiply} .drop-shadow-lg{filter:drop-shadow(0 10px 8px rgb(0 0 0/.04)) drop-shadow(0 4px 3px rgb(0 0 0/.1))} .grayscale{filter:grayscale(100%)} .scroll-mt-24{scroll-margin-top:6rem} .bg-clip-text{-webkit-background-clip:text;background-clip:text} .\!text-fill-transparent{-webkit-text-fill-color:transparent} .selection\:bg-\[\#d4af37\]::selection{background-color:#d4af37} .selection\:text-black::selection{color:#000} .placeholder\:text-\[\#aaaaaa\]::placeholder{color:#aaaaaa} /* ── RESPONSIVE VISIBILITY ────────────────────────────────── */ @media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none}} @media (min-width:768px){.md\:block{display:block}} @media (min-width:1024px){.lg\:hidden{display:none}.lg\:block{display:block}.lg\:flex{display:flex}} @media (min-width:1280px){.xl\:flex{display:flex}.xl\:hidden{display:none}} /* ── SPECIFIC TAILWIND ARBITRARY COMBOS USED IN SITE ─────── */ .from-black\/30{--tw-gradient-from:rgb(0 0 0/.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)} .via-black\/50{--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(0 0 0/.5) var(--tw-gradient-via-position),var(--tw-gradient-to)} .to-black\/80{--tw-gradient-to:rgb(0 0 0/.8) var(--tw-gradient-to-position)} .bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))} .bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))} .from-black\/80{--tw-gradient-from:rgb(0 0 0/.8) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)} /* BUREAU MASTER DESIGN SYSTEM v2 */ :root { --accent: #d4af37; --black: #000000; --white: #ffffff; --text-main: #1a1a1a; --text-muted: rgba(26,26,26,0.6); } * { box-sizing: border-box; } /* UTILITY SHIMS (TAILWIND REPLACEMENTS) */ .max-w-4xl { max-width: 896px; margin-left: auto; margin-right: auto; } .max-w-7xl { max-width: 1280px; margin-left: auto; margin-right: auto; } .bg-black { background-color: var(--black) !important; } .text-white { color: var(--white) !important; } .text-white\/60 { color: rgba(255,255,255,0.6) !important; } .text-[#d4af37] { color: var(--accent) !important; } .font-black { font-weight: 900 !important; } .uppercase { text-transform: uppercase !important; } /* ── COLORS — BACKGROUND ──────────────────────────────────── */ .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))} .bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))} .bg-\[\#000000\]{background-color:#000000} .bg-\[\#1a1a1a\]{background-color:#1a1a1a} .bg-\[\#262626\]{background-color:#262626} .bg-\[\#d4af37\]{background-color:#d4af37} .bg-\[\#b8962e\]{background-color:#b8962e} .bg-\[\#f5f5f5\]{background-color:#f5f5f5} .bg-\[\#fafafa\]{background-color:#fafafa} .bg-\[\#0f1115\]{background-color:#0f1115} .bg-\[\#030712\]{background-color:#030712} .bg-emerald-50{background-color:#ecfdf5} .bg-red-50{background-color:#fef2f2} .bg-\[\#d4af37\]\/5{background-color:rgb(212 175 55/.05)} .bg-\[\#d4af37\]\/10{background-color:rgb(212 175 55/.1)} .bg-white\/5{background-color:rgb(255 255 255/.05)} .bg-transparent{background-color:transparent} /* ── COLORS — BORDER ──────────────────────────────────────── */ .border{border-width:1px} .border-2{border-width:2px} .border-4{border-width:4px} .border-b{border-bottom-width:1px} .border-t{border-top-width:1px} .border-l{border-left-width:1px} .border-r{border-right-width:1px} .border-y{border-top-width:1px;border-bottom-width:1px} .border-t-4{border-top-width:4px} .border-l-\[8px\]{border-left-width:8px} .border-l-\[12px\]{border-left-width:12px} .border-\[\#eeeeee\]{border-color:#eeeeee} .border-\[\#d4af37\]{border-color:#d4af37} .border-\[\#B8860B\]{border-color:#B8860B} .border-\[\#1a1a1a\]{border-color:#1a1a1a} .border-\[\#f5f5f5\]{border-color:#f5f5f5} .border-white{border-color:#fff} .border-white\/10{border-color:rgb(255 255 255/.1)} .border-white\/20{border-color:rgb(255 255 255/.2)} .border-\[\#d4af37\]\/10{border-color:rgb(212 175 55/.1)} .border-\[\#d4af37\]\/20{border-color:rgb(212 175 55/.2)} .border-\[\#d4af37\]\/30{border-color:rgb(212 175 55/.3)} .border-dashed{border-style:dashed} .border-emerald-200{border-color:#a7f3d0} .border-red-200{border-color:#fecaca} .divide-y>*+*{border-top-width:1px;border-style:solid;border-color:#e5e7eb} /* ── ROUNDED ──────────────────────────────────────────────── */ .rounded{border-radius:.25rem} .rounded-md{border-radius:.375rem} .rounded-lg{border-radius:.5rem} .rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1rem} .rounded-3xl{border-radius:1.5rem} .rounded-\[2\.5rem\]{border-radius:2.5rem} .rounded-\[3rem\]{border-radius:3rem} .rounded-\[3\.5rem\]{border-radius:3.5rem} .rounded-\[2rem\]{border-radius:2rem} .rounded-\[4px\]{border-radius:4px} .rounded-full{border-radius:9999px} .rounded-r-\[3rem\]{border-radius:0 3rem 3rem 0} /* ── SHADOW ───────────────────────────────────────────────── */ .shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0/.05)} .shadow{box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1)} .shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1)} .shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)} .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0/.25)} .shadow-\[0_4px_15px_rgba\(0\,0\,0\,0\.05\)\]{box-shadow:0 4px 15px rgba(0,0,0,.05)} .shadow-\[0_10px_40px_rgba\(212\,175\,55\,0\.12\)\]{box-shadow:0 10px 40px rgba(212,175,55,.12)} .shadow-\[0_20px_60px_rgba\(212\,175\,55\,0\.08\)\,0_4px_20px_rgba\(0\,0\,0\,0\.06\)\]{box-shadow:0 20px 60px rgba(212,175,55,.08),0 4px 20px rgba(0,0,0,.06)} .shadow-\[0_40px_100px_rgba\(0\,0\,0\,0\.04\)\]{box-shadow:0 40px 100px rgba(0,0,0,.04)} .shadow-\[\#d4af37\]\/20{box-shadow:0 10px 15px -3px rgba(212,175,55,.2)} /* ── OBJECT FIT ───────────────────────────────────────────── */ .object-cover{object-fit:cover} .object-contain{object-fit:contain} .object-center{object-position:center} /* ── OPACITY ──────────────────────────────────────────────── */ .opacity-0{opacity:0} .opacity-1{opacity:1} .opacity-10{opacity:.1} .opacity-40{opacity:.4} .opacity-60{opacity:.6} .opacity-80{opacity:.8} .opacity-100{opacity:1} /* ── TRANSITIONS & ANIMATIONS ─────────────────────────────── */ .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .duration-300{transition-duration:300ms} .duration-500{transition-duration:500ms} .duration-700{transition-duration:700ms} .duration-1000{transition-duration:1000ms} .ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)} .animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} .animate-spin{animation:spin 1s linear infinite} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── HOVER STATES ─────────────────────────────────────────── */ .hover\:text-\[\#d4af37\]:hover{color:#d4af37} .hover\:text-\[\#b8962e\]:hover{color:#b8962e} .hover\:text-white:hover{color:#fff} .hover\:text-black:hover{color:#000} .hover\:bg-\[\#d4af37\]:hover{background-color:#d4af37} .hover\:bg-\[\#b8962e\]:hover{background-color:#b8962e} .hover\:bg-\[\#B8860B\]:hover{background-color:#B8860B} .hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a} .hover\:border-\[\#d4af37\]:hover{border-color:#d4af37} .hover\:border-white:hover{border-color:#fff} .hover\:opacity-100:hover{opacity:1} .hover\:scale-105:hover{transform:scale(1.05)} .hover\:scale-110:hover{transform:scale(1.1)} .hover\:scale-\[1\.02\]:hover{transform:scale(1.02)} .hover\:-translate-y-1:hover{transform:translateY(-.25rem)} .hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1)} .hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)} .hover\:shadow-2xl:hover{box-shadow:0 25px 50px -12px rgb(0 0 0/.25)} /* ── GROUP HOVER ──────────────────────────────────────────── */ .group:hover .group-hover\:scale-105{transform:scale(1.05)} .group:hover .group-hover\:scale-110{transform:scale(1.1)} .group:hover .group-hover\:opacity-100{opacity:1} .group:hover .group-hover\:text-white{color:#fff} .group:hover .group-hover\:text-\[\#d4af37\]{color:#d4af37} .group:hover .group-hover\:bg-\[\#d4af37\]{background-color:#d4af37} .group:hover .group-hover\:border-\[\#d4af37\]{border-color:#d4af37} .group:hover .group-hover\:scale-\[1\.02\]{transform:scale(1.02)} .group:hover .group-hover\:scale-110{transform:scale(1.1)} .scale-\[1\.1\]:hover{transform:scale(1.1)} /* ── FOCUS ────────────────────────────────────────────────── */ .focus\:border-\[\#d4af37\]:focus{border-color:#d4af37} .focus\:ring-2:focus{box-shadow:0 0 0 2px var(--ring-color,rgba(212,175,55,.3))} .focus\:ring-\[\#d4af37\]\/30:focus{--ring-color:rgba(212,175,55,.3);box-shadow:0 0 0 2px var(--ring-color)} .outline-none{outline:2px solid transparent;outline-offset:2px} .resize-none{resize:none} /* ── MISC UTILITIES ───────────────────────────────────────── */ .cursor-pointer{cursor:pointer} .pointer-events-none{pointer-events-none} .select-none{user-select:none} .backdrop-filter{backdrop-filter:var(--tw-backdrop-filter)} .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)} .blur-\[120px\]{filter:blur(120px)} .mix-blend-multiply{mix-blend-mode:multiply} .drop-shadow-lg{filter:drop-shadow(0 10px 8px rgb(0 0 0/.04)) drop-shadow(0 4px 3px rgb(0 0 0/.1))} .grayscale{filter:grayscale(100%)} .scroll-mt-24{scroll-margin-top:6rem} .bg-clip-text{-webkit-background-clip:text;background-clip:text} .\!text-fill-transparent{-webkit-text-fill-color:transparent} .selection\:bg-\[\#d4af37\]::selection{background-color:#d4af37} .selection\:text-black::selection{color:#000} .placeholder\:text-\[\#aaaaaa\]::placeholder{color:#aaaaaa} /* ── RESPONSIVE VISIBILITY ────────────────────────────────── */ @media (min-width:640px){.sm\:block{display:block}.sm\:hidden{display:none}} @media (min-width:768px){.md\:block{display:block}} @media (min-width:1024px){.lg\:hidden{display:none}.lg\:block{display:block}.lg\:flex{display:flex}} @media (min-width:1280px){.xl\:flex{display:flex}.xl\:hidden{display:none}} /* ── SPECIFIC TAILWIND ARBITRARY COMBOS USED IN SITE ─────── */ .from-black\/30{--tw-gradient-from:rgb(0 0 0/.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)} .via-black\/50{--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgb(0 0 0/.5) var(--tw-gradient-via-position),var(--tw-gradient-to)} .to-black\/80{--tw-gradient-to:rgb(0 0 0/.8) var(--tw-gradient-to-position)} .bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))} .bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))} .from-black\/80{--tw-gradient-from:rgb(0 0 0/.8) var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)} /* BUREAU MASTER DESIGN SYSTEM v2 */ :root { --accent: #d4af37; --black: #000000; --white: #ffffff; --text-main: #1a1a1a; --text-muted: rgba(26,26,26,0.6); } * { box-sizing: border-box; } /* UTILITY SHIMS (TAILWIND REPLACEMENTS) */ .max-w-4xl { max-width: 896px; margin-left: auto; margin-right: auto; } .max-w-7xl { max-width: 1280px; margin-left: auto; margin-right: auto; } .bg-black { background-color: var(--black) !important; } .text-white { color: var(--white) !important; } .text-white\/60 { color: rgba(255,255,255,0.6) !important; } .text-[#d4af37] { color: var(--accent) !important; } .font-black { font-weight: 900 !important; } .uppercase { text-transform: uppercase !important; } .tracking-widest { letter-spacing: 0.1em !important; } .mb-24 { margin-bottom: 6rem !important; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .gap-10 { gap: 2.5rem; } .rounded-2xl { border-radius: 1rem; } .border { border: 1px solid #e5e7eb; } /* LAYOUT FIXES */ .hero-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; position: relative; } .editorial-body { line-height: 1.8; font-size: 1.1rem; color: #333; } /* ── EDITORIAL CONTENT (Category Pages — Admin CKEditor Output) ── */ .editorial-content { line-height: 1.9; font-size: 1.15rem; color: #333; max-width: 1000px; } .editorial-content h2 { font-size: 2.25rem; font-weight: 900; color: #1a1a1a; margin: 4rem 0 1.5rem; padding-left: 1.5rem; border-left: 6px solid #d4af37; text-transform: uppercase; letter-spacing: -0.02em; } .editorial-content h3 { font-size: 1.5rem; font-weight: 800; color: #1a1a1a; margin: 2.5rem 0 1rem; color: #d4af37; text-transform: uppercase; } .editorial-content h4 { font-size: 1.2rem; font-weight: 800; color: #1a1a1a; margin: 2rem 0 0.5rem; } .editorial-content p { margin-bottom: 1.5rem; color: #444; } .editorial-content ul, .editorial-content ol { padding-left: 1.5rem; margin-bottom: 2rem; list-style-position: outside; } .editorial-content li { margin-bottom: 0.75rem; line-height: 1.8; color: #444; } .editorial-content li::marker { color: #d4af37; font-weight: 900; } .editorial-content blockquote { border-left: 4px solid #d4af37; padding: 2.5rem; margin: 3.5rem 0; background: #fcfaf2; font-style: italic; color: #1a1a1a; font-size: 1.25rem; border-radius: 0 16px 16px 0; box-shadow: inset 5px 0 15px rgba(212,175,55,0.05); } .editorial-content a { color: #d4af37; text-decoration: underline; text-underline-offset: 4px; font-weight: 700; } .editorial-content a:hover { color: #1a1a1a; background: #fffbeb; } .editorial-content img { border-radius: 2rem; margin: 3.5rem 0; max-width: 100%; height: auto; box-shadow: 0 30px 60px rgba(0,0,0,0.12); } .editorial-content strong { color: #1a1a1a; font-weight: 800; } .editorial-content table { width: 100%; border-collapse: collapse; margin: 3rem 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px #eeeeee, 0 10px 30px rgba(0,0,0,0.02); } .editorial-content th, .editorial-content td { padding: 1.25rem 1.5rem; border: 1px solid #eeeeee; text-align: left; } .editorial-content th { background: #1a1a1a; font-weight: 800; color: #d4af37; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.12em; } .editorial-content tr:nth-child(even) { background: #fafafa; } .editorial-content hr { border: none; border-top: 4px solid #d4af37; width: 80px; margin: 4.5rem 0; } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* MAGAZINE GRID RECOVERY */ @media (min-width: 1024px) { .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* FOOTER COMPACTOR */ footer { padding-top: 4rem; padding-bottom: 2rem; background: #0a0a0a; color: white; } .footer-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 3rem; } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } footer a { color: rgba(255,255,255,0.6); font-size: 13px; text-decoration: none; transition: 0.3s; } footer a:hover { color: #d4af37; } /* HEADER DESKTOP SEARCH BAR */ .fh-desktop-search { display: flex; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 6px 12px; min-width: 220px; transition: all 0.3s ease; } .fh-desktop-search:focus-within { border-color: #d4af37; background: rgba(255,255,255,0.08); } .fh-desktop-search i { color: #d4af37; font-size: 12px; } .fh-desktop-search input { background: transparent; border: none; outline: none; color: white; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 4px 8px; width: 100%; text-transform: uppercase; } /* ── CATEGORY BAR & TABS ────────────────────────────────── */ .category-bar { background: #f5f5f5; padding: 12px 0; border-bottom: 1px solid #eeeeee; position: relative; z-index: 30; } .container-fh { max-width: 1400px; margin: 0 auto; } .category-tabs-scroll { padding: 4px 24px 12px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; display: flex; gap: 12px; } .category-tabs-scroll::-webkit-scrollbar { display: none; } /* Hide scrollbar */ .category-tab-item { padding: 10px 24px; background: white; border: 1px solid #eeeeee; color: #1a1a1a; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; border-radius: 9999px; text-decoration: none; display: inline-block; transition: all 0.3s ease; } .category-tab-item:hover { border-color: #d4af37; color: #d4af37; } .category-tab-item.active { background: #d4af37; color: #1a1a1a; border-color: #d4af37; } .fh-desktop-search input::placeholder { color: rgba(255,255,255,0.4); } /* Mobile search button — hidden on desktop, shown on mobile */ .fh-mobile-search-btn { display: none; } @media (max-width: 1023px) { .fh-desktop-search { display: none !important; } .fh-mobile-search-btn { display: flex !important; } } /* RESPONSIVE HEIGHT REPAIRS */ @media (max-width: 1023px) { .fh-featured-card { height: 450px !important; } } @media (max-width: 640px) { .fh-featured-card { height: 360px !important; } } /* ── TICKER ANIMATION ────────────────────────────────────── */ @keyframes infinite-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-infinite-scroll { animation: infinite-scroll 40s linear infinite; } .ticker-container { overflow: hidden; } /* ── HERO ANIMATIONS ─────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeZoom { from { transform: scale(1.05); } to { transform: scale(1); } } .animate-fade-in { animation: fadeIn 0.8s ease-out both; } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out both; } .animate-fade-zoom { animation: fadeZoom 12s ease-out both; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } /* ── GOLD CTA BUTTON ─────────────────────────────────────── */ .gold-btn { display: inline-block; padding: 16px 32px; background: #d4af37; color: #1a1a1a; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; transition: all 0.3s ease; border: 1px solid #d4af37; } .gold-btn:hover { background: #b8962e; color: #fff; } /* ── FOOTER GREEN DOT ────────────────────────────────────── */ .bg-green-500 { background-color: #22c55e; } /* ── MISSING RESPONSIVE UTILITIES ────────────────────────── */ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } } @media (min-width: 768px) { .md\:flex { display: flex; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:w-auto { width: auto; } } /* ── ARTICLE BODY CONTENT POLISH ─────────────────────────── */ .article-body blockquote { border-left: 4px solid #d4af37; padding: 1.5rem 2rem; margin: 2rem 0; background: #fafafa; font-style: italic; color: #333; } .article-body ul, .article-body ol { margin: 1.5rem 0; padding-left: 2rem; } .article-body li { margin-bottom: 0.5rem; line-height: 1.8; } .article-body img { border-radius: 1rem; margin: 2rem 0; } .article-body a { color: #d4af37; text-decoration: underline; text-underline-offset: 3px; } .article-body a:hover { color: #b8962e; } /* ── ADSENSE COMPLIANCE: Proper ad slot spacing ──────────── */ .bureau-ad-zone { margin-top: 2rem; margin-bottom: 2rem; text-align: center; } .ad-slot-global, .ad-slot-inpost, .ad-slot-sidebar, .ad-slot-footer { min-height: 90px; display: flex; align-items: center; justify-content: center; } /* ── MOBILE POLISH ───────────────────────────────────────── */ @media (max-width: 767px) { .hero-section, .fh-hero-section { min-height: 70vh !important; } .fh-hero-content { padding-top: 40px !important; padding-bottom: 40px !important; } .text-5xl { font-size: 2rem; line-height: 1.1; } .text-7xl { font-size: 2.5rem; line-height: 1.05; } .md\:text-7xl { font-size: 2.5rem; line-height: 1.05; } .p-12, .md\:p-24 { padding: 1.5rem; } .px-14 { padding-left: 1.5rem; padding-right: 1.5rem; } .mb-24 { margin-bottom: 3rem; } .py-20 { padding-top: 3rem; padding-bottom: 3rem; } .gap-12 { gap: 1.5rem; } } /* FactoraHub Tools Bureau Centralized CSS */ .breadcrumb-nav { padding: 15px 0; margin-bottom: 20px; font-size: 14px; color: #666; } .breadcrumb-nav a { color: #d4af37; text-decoration: none; } .breadcrumb-nav a:hover { text-decoration: underline; } .breadcrumb-separator { margin: 0 8px; color: #999; } .breadcrumb-current { color: #333; font-weight: 500; } .tool-navigation { display: flex; gap: 15px; padding: 20px 0; margin-top: 30px; border-top: 1px solid #e0e0e0; } .nav-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: #f8f9fa; border-radius: 8px; text-decoration: none; color: #333; font-weight: 500; transition: all 0.3s; } .nav-btn:hover { background: #d4af37; color: white; } .powered-by-section { text-align: center; padding: 20px 0; margin-top: 20px; border-top: 1px solid #e0e0e0; } .powered-by-text { color: #666; font-size: 14px; } .powered-by-text a { color: #d4af37; text-decoration: none; font-weight: 600; } .powered-by-text a:hover { text-decoration: underline; } .ranking-content { margin-top: 40px; padding: 30px; background: #f8f9fa; border-radius: 12px; } .ranking-content h2 { color: #d4af37; font-size: 28px; margin-bottom: 20px; } .ranking-content h3 { color: #333; font-size: 22px; margin-top: 30px; margin-bottom: 15px; } .ranking-content p { color: #666; line-height: 1.8; margin-bottom: 15px; font-size: 16px; } .ranking-content ul { color: #666; line-height: 1.8; margin-bottom: 20px; padding-left: 20px; } .ranking-content li { margin-bottom: 10px; } /* Tool Result Styling */ .result-section { margin-bottom: 25px; padding: 20px; background: #f8f9fa; border-radius: 8px; } .result-section h4 { font-size: 1.1rem; color: #d4af37; margin-bottom: 15px; } .result-item { color: #666; line-height: 1.6; } .result-item .good { color: #28a745; font-weight: 600; } .result-item .warning { color: #ffc107; font-weight: 600; } .result-item .error { color: #dc3545; font-weight: 600; } /* FACTORAHUB TOOLS UI SYSTEM */ .bureau-container { max-width: 900px; margin: 40px auto; padding: 0 20px; font-family: 'Inter', sans-serif; } .bureau-header { text-align: center; margin-bottom: 40px; } .tool-icon { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; background: rgba(212,175,55,0.1); border-radius: 20px; margin-bottom: 20px; color: #d4af37; } .bureau-header h1 { font-size: 2.5rem; font-weight: 900; color: #1a1a1a; margin-bottom: 10px; } .bureau-subtitle { font-size: 1.1rem; color: #666; } .bureau-tool-wrapper { background: #fff; padding: 40px; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); margin-bottom: 40px; border: 1px solid #eee; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; font-weight: 700; margin-bottom: 8px; color: #333; font-size: 0.95rem; } .bureau-input { width: 100%; padding: 15px; border: 2px solid #eee; border-radius: 12px; font-size: 1rem; transition: all 0.3s; background: #fafafa; } .bureau-input:focus { border-color: #d4af37; outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(212,175,55,0.1); } .bureau-textarea { width: 100%; min-height: 150px; padding: 15px; border: 2px solid #eee; border-radius: 12px; font-size: 1rem; transition: all 0.3s; background: #fafafa; resize: vertical; } .bureau-textarea:focus { border-color: #d4af37; outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(212,175,55,0.1); } .bureau-btn { padding: 15px 30px; font-size: 1rem; font-weight: 700; border-radius: 12px; cursor: pointer; transition: all 0.3s; border: none; display: inline-block; text-align: center; } .bureau-btn-primary { background: #d4af37; color: #1a1a1a; box-shadow: 0 4px 15px rgba(212,175,55,0.3); } .bureau-btn-primary:hover { background: #b8962e; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212,175,55,0.4); } .bureau-btn-secondary { background: #f5f5f5; color: #333; border: 1px solid #ddd; } .bureau-btn-secondary:hover { background: #e5e5e5; transform: translateY(-2px); } .bureau-btn-danger { background: #ef4444; color: #fff; box-shadow: 0 4px 15px rgba(239,68,68,0.3); } .bureau-btn-danger:hover { background: #dc2626; transform: translateY(-2px); } /* Results Section */ .meta-results, .tool-results, .result-card { background: #fafafa; padding: 30px; border-radius: 16px; border: 1px solid #eee; margin-top: 30px; } .meta-results h3, .tool-results h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 20px; color: #1a1a1a; border-bottom: 2px solid #eee; padding-bottom: 10px; } .result-section { margin-bottom: 25px; } .result-section h4 { font-size: 1rem; font-weight: 700; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .result-item { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #eee; word-break: break-all; font-family: monospace; font-size: 0.95rem; } .result-item .good { color: #10b981; font-weight: bold; } .result-item .warning { color: #f59e0b; font-weight: bold; } .result-item .error { color: #ef4444; font-weight: bold; } /* Code Blocks */ .code-block { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 12px; overflow-x: auto; font-family: 'Consolas', monospace; font-size: 0.9rem; margin-bottom: 20px; border: 1px solid #333; } .code-block pre { margin: 0; white-space: pre-wrap; } /* Grid Inputs */ .calc-inputs { display: grid; gap: 20px; } @media (min-width: 768px) { .calc-inputs { grid-template-columns: 1fr 1fr; } .calc-inputs .input-group.full-width { grid-column: span 2; } } /* Char Count */ .char-count { display: block; font-size: 0.8rem; color: #888; margin-top: 5px; text-align: right; } /* Tool Content Area */ .bureau-content { text-align: left; color: #444; line-height: 1.8; font-size: 1.05rem; } .bureau-content h2 { font-size: 1.8rem; font-weight: 800; color: #1a1a1a; margin: 40px 0 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; } .bureau-content h3 { font-size: 1.3rem; font-weight: 700; color: #333; margin: 30px 0 15px; } .bureau-content p { margin-bottom: 15px; } .bureau-content ul, .bureau-content ol { padding-left: 20px; margin-bottom: 20px; } .bureau-content li { margin-bottom: 10px; } .bureau-content strong { color: #1a1a1a; } /* FAQ Items */ .faq-item { margin-bottom: 25px; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eee; box-shadow: 0 4px 6px rgba(0,0,0,0.02); } .faq-item h4 { font-size: 1.1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; display: flex; align-items: center; } .faq-item h4::before { content: 'Q:'; color: #d4af37; margin-right: 10px; font-weight: 900; } .faq-item p { margin: 0; color: #555; padding-left: 28px; } /* Related Tools */ .related-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .related-tool { background: #fff; padding: 15px 20px; border-radius: 12px; border: 1px solid #eee; color: #1a1a1a; text-decoration: none; font-weight: 600; text-align: center; transition: all 0.3s; display: block; box-shadow: 0 2px 5px rgba(0,0,0,0.02); } .related-tool:hover { border-color: #d4af37; color: #d4af37; transform: translateY(-3px); box-shadow: 0 8px 15px rgba(212,175,55,0.1); } /* --- BUREAU MASTER TARGETED SPACING REDUCTION --- */ /* Reduce Homepage Hero Height */ .fh-hero-section { min-height: 60vh !important; } .fh-hero-content { padding-top: 40px !important; padding-bottom: 40px !important; } /* Reduce Category Hero Spacing */ header.py-24.mb-20 { padding-top: 40px !important; padding-bottom: 40px !important; margin-bottom: 40px !important; } header.py-24.mb-20 h1.text-5xl, header.py-24.mb-20 h1.md\:text-8xl { font-size: 2.5rem !important; margin-bottom: 1.5rem !important; } @media (min-width: 768px) { header.py-24.mb-20 h1.text-5xl, header.py-24.mb-20 h1.md\:text-8xl { font-size: 3rem !important; } } @media (min-width: 1024px) { header.py-24.mb-20 h1.text-5xl, header.py-24.mb-20 h1.md\:text-8xl { font-size: 3.5rem !important; } } /* Reduce Post Hero Spacing */ .post-title-section { margin-bottom: 1rem !important; } .post-title-section h1 { font-size: 2rem !important; margin-bottom: 1rem !important; line-height: 1.2 !important; } @media (min-width: 768px) { .post-title-section h1 { font-size: 2.5rem !important; } } @media (min-width: 1024px) { .post-title-section h1 { font-size: 3rem !important; } } /* Reduce Empty Space on Static Pages/Empty States */ .p-32.text-center { padding: 3rem 1.5rem !important; } /* Normalize Tool/Post Grids Gap */ .grid.gap-16 { gap: 1.5rem !important; } @media (min-width: 1024px) { .grid.gap-16 { gap: 2rem !important; } } /* 3. Header & Navigation */ @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; } /* Tool Icon Styles */ .tool-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .tool-icon svg { flex-shrink: 0; } /* -------------------------------------------- HEADER CORE -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ body { font-family: var(--font-main); margin: 0; padding: 0; background: #fff; overflow-x: hidden; } .fh-header-solid { position: sticky; top: 0; width: 100%; background: rgba(10, 10, 10, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 9999; transition: all 0.3s ease; padding: 8px 0; } .fh-nav-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .fh-logo { font-size: 28px; font-weight: 900; text-transform: uppercase; letter-spacing: -2px; text-decoration: none; color: var(--bureau-white); display: flex; align-items: center; min-height: 70px; flex-shrink: 0; } .fh-logo span { color: var(--bureau-gold); } .fh-logo img { height: 70px; width: auto; max-width: 320px; object-fit: contain; display: block; } /* -------------------------------------------- DESKTOP NAV -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .fh-nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; } .fh-nav-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s ease; white-space: nowrap; } .fh-nav-links a:hover, .fh-nav-links .active-link { color: var(--bureau-gold); } /* -------------------------------------------- NAV RIGHT CLUSTER -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .fh-nav-right { display: flex; align-items: center; gap: 12px; } /* -------------------------------------------- LANGUAGE CONVERTER ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .fh-language-converter { position: relative; } .fh-lang-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(212,175,55,0.3); color: white; padding: 7px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; transition: all 0.3s ease; } .fh-lang-btn:hover { background: rgba(212,175,55,0.15); border-color: #d4af37; } .fh-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #1a1a1a; border: 1px solid rgba(212,175,55,0.25); border-radius: 12px; padding: 8px 0; min-width: 180px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 10000; display: none; } .fh-lang-menu.open { display: block; } .lang-option { padding: 10px 16px; color: #ccc; font-size: 13px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } .lang-option:hover { background: rgba(212,175,55,0.1); color: #d4af37; } .lang-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 0; } /* -------------------------------------------- SEARCH BTN ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ .fh-search-btn { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 16px; cursor: pointer; padding: 8px; transition: color 0.3s ease; display: flex; align-items: center; justify-content: center; } .fh-search-btn:hover { color: var(--bureau-gold); } /* -------------------------------------------- HAMBURGER BUTTON ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ .fh-mobile-btn { display: none; background: none; border: 1px solid rgba(255,255,255,0.15); color: white; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 16px; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; } .fh-mobile-btn:hover { border-color: var(--bureau-gold); color: var(--bureau-gold); } /* -------------------------------------------- MOBILE MENU -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .fh-mob-menu { display: none; background: #0a0a0a; border-bottom: 1px solid rgba(212,175,55,0.15); padding: 20px 24px; } .fh-mob-menu.open { display: block; } .fh-mob-menu a { display: block; color: rgba(255,255,255,0.85); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); transition: color 0.3s ease; } .fh-mob-menu a:last-child { border-bottom: none; } .fh-mob-menu a:hover { color: var(--bureau-gold); } /* -------------------------------------------- SEARCH OVERLAY -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .fh-search-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.97); flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; } .fh-search-overlay.open { display: flex; } .fh-search-close { position: absolute; top: 32px; right: 32px; background: none; border: none; color: rgba(255,255,255,0.4); font-size: 32px; cursor: pointer; transition: color 0.3s ease; line-height: 1; padding: 4px; } .fh-search-close:hover { color: var(--bureau-gold); } .fh-search-inner { width: 100%; max-width: 900px; text-align: center; } .fh-search-label { color: var(--bureau-gold); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.6em; display: block; margin-bottom: 12px; } .fh-search-line { height: 2px; width: 80px; background: var(--bureau-gold); margin: 0 auto 48px; } .fh-search-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.15); padding: 20px 0; font-size: clamp(28px, 6vw, 72px); font-weight: 900; color: white; text-transform: uppercase; outline: none; text-align: center; letter-spacing: -0.03em; transition: border-color 0.3s ease; font-family: inherit; } .fh-search-input:focus { border-bottom-color: var(--bureau-gold); } .fh-search-input::placeholder { color: rgba(255,255,255,0.08); } /* -------------------------------------------- RESPONSIVE ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media (max-width: 1023px) { .fh-nav-links { display: none !important; } .fh-mobile-btn { display: flex !important; } } @media (max-width: 480px) { .fh-logo img { height: 48px; } } .fh-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #0a0a0a; color: #ffffff; padding: 20px; z-index: 9999; border-top: 3px solid #d4af37; max-height: 50vh; overflow: auto; -webkit-overflow-scrolling: touch; } .fh-cookie-content { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .fh-cookie-text h4 { color: #d4af37; font-size: 14px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; } .fh-cookie-text p { font-size: 13px; color: #ffffff; margin: 0; line-height: 1.5; } .fh-cookie-buttons { display: flex; gap: 12px; flex-shrink: 0; } .fh-cookie-btn { padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s ease; } .fh-cookie-accept { background: #d4af37; color: #0a0a0a; } .fh-cookie-accept:hover { background: #ffffff; } .fh-cookie-reject { background: transparent; color: #ffffff; border: 2px solid #ffffff; } .fh-cookie-reject:hover { border-color: #d4af37; color: #d4af37; } .fh-cookie-pref { background: transparent; color: #ffffff; border: 2px solid #d4af37; } .fh-cookie-pref:hover { background: #d4af37; color: #0a0a0a; } @media (max-width: 768px) { .fh-cookie-banner { max-height: none; overflow: visible; } .fh-cookie-content { flex-direction: column; text-align: center; justify-content: flex-start; } .fh-cookie-buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; } .fh-cookie-btn { width: 100%; min-width: 0; } .fh-cookie-pref { grid-column: 1 / -1; } } @media (max-width: 480px) { .fh-cookie-banner { padding: 8px 10px; max-height: none; } .fh-cookie-text p { font-size: 11px; line-height: 1.22; } .fh-cookie-text { margin-bottom: 5px; } .fh-cookie-buttons { gap: 6px; } .fh-cookie-btn { padding: 7px 10px; min-height: 32px; font-size: 11px; } } /* 4. Homepage Sections */ /* â"ۉ"€ HOMEPAGE SPECIFIC STYLES â"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"ۉ"€ */ /* Category tabs scrollable on mobile */ .category-tabs-scroll { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 8px 0; } @media (max-width: 768px) { .category-tabs-scroll { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 8px; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .category-tabs-scroll::-webkit-scrollbar { display: none; } .category-tab-item { flex-shrink: 0; } /* Hero section mobile */ .fh-hero-section { min-height: 85vh !important; } .fh-hero-content { padding-top: 60px !important; padding-bottom: 60px !important; } } /* Featured article card height fix */ @media (max-width: 1023px) { .fh-featured-card { height: 450px !important; } } @media (max-width: 640px) { .fh-featured-card { height: 360px !important; } } /* 5. Page / Category / Post Title Blocks */ .article-body { font-size: 18px; line-height: 1.8; color: #333333; background: #ffffff; max-width: 900px; margin: 0 auto; } .article-body h2 { font-size: 2.2rem; font-weight: 900; color: #1a1a1a; margin: 4rem 0 2rem; text-transform: uppercase; border-left: 8px solid #d4af37; padding-left: 2rem; line-height: 1; position: relative; background: linear-gradient(to right, #fafaf8, transparent); padding-top: 1rem; padding-bottom: 1rem; letter-spacing: -0.5px; } .article-body h3 { font-size: 1.6rem; font-weight: 800; color: #1a1a1a; margin: 3rem 0 1.5rem; line-height: 1.2; } .article-body p { margin-bottom: 2rem; color: #444444; } /* HARD FULL-WIDTH HERO */ .featured-hero-wrapper { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #f5f5f5; } .featured-hero { width: 100%; height: 60vh; min-height: 400px; object-fit: cover; border-radius: 0; display: block; } /* Progress Bar */ #read-progress { position: fixed; top: 0; left: 0; height: 3px; background: #d4af37; z-index: 10000; width: 0%; transition: width 0.1s ease; } @media (max-width:1023px) { .fh-related-grid { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width:640px) { .fh-related-grid { grid-template-columns: 1fr !important; } } @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;900&display=swap'); body { font-family: 'Outfit', sans-serif; } .hero-title { font-size: 3.5rem; line-height: 1.1; } .editorial-content { font-family: 'Outfit', sans-serif; font-size: 1.125rem; line-height: 1.8; color: #444; } .editorial-content h1, .editorial-content h2, .editorial-content h3 { font-weight: 900; color: #1a1a1a; text-transform: uppercase; margin-top: 2rem; margin-bottom: 1rem; } .editorial-content h1 { font-size: 2.5rem; } .editorial-content h2 { font-size: 2rem; } .editorial-content h3 { font-size: 1.5rem; } .editorial-content p { margin-bottom: 1.5rem; } .editorial-content blockquote { border-left: 4px solid #d4af37; padding-left: 1.5rem; font-style: italic; color: #666; margin: 2rem 0; } .editorial-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; } .editorial-content th, .editorial-content td { border: 1px solid #eee; padding: 12px; text-align: left; } .editorial-content th { background: #f9f9f9; font-weight: 900; text-transform: uppercase; font-size: 0.75rem; color: #d4af37; } /* 6. Cards & Grids */ /* Note: Card logic is integrated into Base Layout */ /* 7. Sidebar Widgets */ /* Note: Sidebar logic is integrated into Base Layout */ /* 8. Tools UI */ /* Note: Tools UI logic is integrated into Base Layout */ /* 9. Footer */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;900&display=swap'); body { font-family: 'Outfit', sans-serif; background-color: #fafafa; } .hero-title { font-size: 2rem; line-height: 1.2; } /* Mobile Scrolling Fixes */ @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } /* Mobile Scrolling Fixes */ @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } .content-wrapper { max-width: 1400px; margin: 0 auto; } .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .gold-border { border-left: 4px solid #d4af37; padding-left: 1.5rem; } @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } .content-wrapper { max-width: 1400px; margin: 0 auto; } .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .gold-border { border-left: 4px solid #d4af37; padding-left: 1.5rem; } @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } .content-wrapper { max-width: 1400px; margin: 0 auto; } .section-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } .gold-border { border-left: 4px solid #d4af37; padding-left: 1.5rem; } @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } .content-wrapper { max-width: 1400px; margin: 0 auto; } .stat-box { background: white; border: 1px solid #eeeeee; transition: all 0.3s ease; } @media (max-width: 768px) { body { overflow-x: hidden; width: 100%; position: relative; } html { overflow-x: hidden; width: 100%; } } .content-wrapper { max-width: 1400px; margin: 0 auto; } .gold-border { border-left: 4px solid #d4af37; padding-left: 1.5rem; } .editorial-body { line-height: 1.8; color: #444; font-size: 1.125rem; } .editorial-body h1, .editorial-body h2 { font-weight: 900; text-transform: uppercase; color: #1a1a1a; margin-top: 40px; margin-bottom: 20px; } .editorial-body p { margin-bottom: 25px; } :root { --tree-line: #e5e7eb; --tree-node: #d4af37; --tree-bg: #fafafa; } body { background-color: #ffffff; color: #111827; font-family: 'Inter', system-ui, sans-serif; } .sitemap-header { border-bottom: 1px solid #f3f4f6; padding: 80px 0 60px; background: var(--tree-bg); } .tree-wrapper { max-width: 900px; margin: 40px auto 80px; padding: 0 20px; } /* QUICK NAV */ .quick-nav { background: #fff; border: 1px solid #f3f4f6; border-radius: 12px; padding: 20px; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .nav-chip { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #6b7280; text-decoration: none; padding: 6px 14px; border: 1px solid #eee; border-radius: 20px; transition: all 0.2s; } .nav-chip:hover { border-color: var(--tree-node); color: var(--tree-node); transform: translateY(-2px); } /* THE TREE ARCHITECTURE */ .sitemap-tree, .sitemap-tree ul { list-style: none; padding: 0; margin: 0; } .sitemap-tree ul { margin-left: 30px; position: relative; } /* Vertical line for the branch */ .sitemap-tree ul::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 10px; width: 1.5px; background: var(--tree-line); } .sitemap-tree li { position: relative; margin: 0; padding: 12px 0 12px 20px; } /* Horizontal connector */ .sitemap-tree li::before { content: ""; position: absolute; left: -15px; top: 25px; width: 25px; height: 1.5px; background: var(--tree-line); } /* Node Dot */ .sitemap-tree li::after { content: ""; position: absolute; left: 8px; top: 22px; width: 6px; height: 6px; background: var(--tree-node); border-radius: 50%; opacity: 0; transition: opacity 0.2s; } .sitemap-tree li:hover::after { opacity: 1; } .tree-root-item { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #111; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .tree-root-item i { color: var(--tree-node); } .tree-branch-item { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; cursor: default; display: flex; align-items: center; gap: 8px; } .tree-branch-item i { font-size: 10px; color: #9ca3af; } .tree-leaf-item { font-size: 12px; font-weight: 500; color: #6b7280; text-decoration: none; transition: all 0.2s; } .tree-leaf-item:hover { color: var(--tree-node); padding-left: 5px; } .explore-link { font-size: 10px; font-weight: 900; color: var(--tree-node); text-transform: uppercase; letter-spacing: 1px; text-decoration: none; display: inline-block; margin-top: 10px; transition: all 0.2s; border-bottom: 1px dashed transparent; } .explore-link:hover { border-bottom-color: var(--tree-node); transform: translateX(5px); } .badge { font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 4px; background: #f3f4f6; color: #6b7280; margin-left: 10px; } @media (max-width: 640px) { .sitemap-header h1 { font-size: 2.5rem; } .tree-wrapper { margin: 40px auto; } } body { font-family: 'Inter', sans-serif; } /* 10. Responsive Rules */ /* Note: Responsive Rules are integrated into respective sections */ /* Typography Utilities RULE: Do not use Tailwind text-* classes (e.g. text-4xl) on H1 elements. All H1 sizes must be controlled via .fh-hero-title or dedicated CSS classes to prevent conflicts. */ .fh-hero-title { font-size: clamp(1.8rem, 2.5vw, 2.8rem); } /* ── CKEDITOR CONTENT RENDERING (.fh-content) ────────────────── */ .fh-content { line-height: 1.7; font-size: 16px; color: #333333; /* Adjusted for readability on light background */ } .fh-content h1 { font-size: 28px; margin: 24px 0 16px; font-weight: 900; text-transform: uppercase; color: #1a1a1a; } .fh-content h2 { font-size: 24px; margin: 20px 0 12px; font-weight: 800; text-transform: uppercase; color: #1a1a1a; } .fh-content h3 { font-size: 20px; margin: 18px 0 10px; font-weight: 800; text-transform: uppercase; color: #1a1a1a; } .fh-content p { margin-bottom: 16px; color: #444444; } .fh-content ul, .fh-content ol { padding-left: 24px; margin-bottom: 16px; list-style-position: outside; } .fh-content li { margin-bottom: 8px; line-height: 1.6; } .fh-content strong { font-weight: 800; color: #1a1a1a; } .fh-content a { color: #d4af37; text-decoration: underline; text-underline-offset: 4px; font-weight: 700; } .fh-content a:hover { color: #1a1a1a; } .fh-content blockquote { border-left: 4px solid #d4af37; padding: 1.5rem; margin: 2rem 0; background: #f9f9f9; font-style: italic; } /* MEGA MENU STYLES (moved from header.php body-include for W3C compliance) */ .fh-has-mega { position: static !important; } .fh-mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; border-top: 1px solid #eeeeee; box-shadow: 0 40px 80px rgba(0,0,0,0.15); visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 1000; } .fh-has-mega:hover .fh-mega-menu { visibility: visible; opacity: 1; transform: translateY(0); } .fh-mega-inner { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .fh-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .fh-mega-col { display: flex; flex-direction: column; gap: 12px; } .fh-mega-col a { font-size: 13px; font-weight: 600; color: #444444; text-decoration: none; transition: color 0.2s; text-transform: uppercase; letter-spacing: 0.05em; } .fh-mega-col a:hover { color: #d4af37; } .fh-mega-footer { margin-top: 30px; padding-top: 20px; border-top: 1px solid #f5f5f5; text-align: center; } .fh-mega-footer a { font-size: 11px; font-weight: 900; color: #d4af37; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; } .fh-mega-footer a:hover { text-decoration: underline; } @media (max-width: 991px) { .fh-mega-menu { display: none !important; } } /* ── PERFORMANCE: GPU-Composited Card Animations ───────────────────────── Replaces transition-all (which triggers Layout+Paint) with transform+opacity only (compositor-only, no layout reflow). bureau-card is used on all homepage article cards. ──────────────────────────────────────────────────────────────────────── */ .bureau-card { position: relative; will-change: transform; transform: translateZ(0); /* Force GPU layer */ transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s cubic-bezier(.4,0,.2,1); border: 1px solid #eeeeee; } /* Gold border glow via opacity on ::before — no layout reflow */ .bureau-card::before { content: ''; position: absolute; inset: -1px; border: 1px solid #d4af37; border-radius: inherit; opacity: 0; transition: opacity 0.3s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 1; } .bureau-card:hover::before { opacity: 1; } .bureau-card:hover { transform: translateY(-2px) translateZ(0); } /* Shadow via ::after — opacity transition, NOT box-shadow animation */ .bureau-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 20px 40px rgba(0,0,0,0.12); opacity: 0; transition: opacity 0.3s cubic-bezier(.4,0,.2,1); pointer-events: none; } .bureau-card:hover::after { opacity: 1; } /* ── PERFORMANCE: Contain layout for static sections ─── */ .section-gap { contain: layout style; } /* ── PERFORMANCE: reduce-motion respect ─── */ @media (prefers-reduced-motion: reduce) { .bureau-card, .bureau-card::before, .bureau-card::after, .animate-fade-in, .animate-fade-in-up, .animate-fade-zoom { transition: none !important; animation: none !important; } }