/*=========================================================
ELTC Engineering Guide
Engineering Guide to 4–20mA Signal Isolators

Theme
-----------------------------------------------------------
Background      #0f0f1b
Primary         #239BA7
Highlight       #D4AF37
Text            #E6EAF0
Gray            #6B7280

=========================================================*/


/*=========================================================
RESET
=========================================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:#0f0f1b;

color:#E6EAF0;

line-height:1.8;

font-size:16px;

overflow-x:hidden;

}


/*=========================================================
ROOT VARIABLES
=========================================================*/

:root{

--background:#0f0f1b;

--background2:#17172a;

--card:#1f2336;

--accent:#239BA7;

--gold:#D4AF37;

--text:#E6EAF0;

--gray:#9AA3AF;

--border:#2B3145;

--shadow:0 15px 40px rgba(0,0,0,.35);

--radius:12px;

--transition:.35s;

--container:1280px;

}


/*=========================================================
TYPOGRAPHY
=========================================================*/

h1,
h2,
h3,
h4,
h5{

font-weight:700;

line-height:1.25;

margin-bottom:18px;

color:#ffffff;

}

h1{

font-size:54px;

}

h2{

font-size:40px;

}

h3{

font-size:28px;

}

h4{

font-size:22px;

}

p{

margin-bottom:20px;

color:var(--text);

}

a{

text-decoration:none;

color:inherit;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}


/*=========================================================
LAYOUT
=========================================================*/

.container{

width:92%;

max-width:var(--container);

margin:auto;

}

.section{

padding:110px 0;

position:relative;

}

.dark{

background:var(--background2);

}

.section-title{

margin-bottom:60px;

}

.section-title h2{

margin-top:12px;

}

.section-title p{

max-width:900px;

color:var(--gray);

}

.section-number{

display:inline-block;

padding:6px 18px;

border-radius:100px;

background:rgba(35,155,167,.15);

color:var(--accent);

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}


/*=========================================================
HEADER
=========================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

background:rgba(15,15,27,.95);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.05);

}

header .container{

display:flex;

align-items:center;

justify-content:space-between;

height:86px;

}

.logo img{

height:48px;

width:auto;

}

#main-nav ul{

display:flex;

gap:28px;

list-style:none;

}

#main-nav a{

font-size:15px;

font-weight:600;

color:#c9d2da;

position:relative;

}

#main-nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

#main-nav a:hover::after{

width:100%;

}

#main-nav a:hover{

color:white;

}


/*=========================================================
HEADER BUTTONS
=========================================================*/

.header-right{

display:flex;

gap:15px;

align-items:center;

}

#langToggle{

background:transparent;

border:1px solid var(--accent);

color:var(--accent);

padding:10px 18px;

border-radius:8px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

#langToggle:hover{

background:var(--accent);

color:#fff;

}


/*=========================================================
HERO
=========================================================*/

.hero{

position:relative;

padding-top:170px;

padding-bottom:120px;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(35,155,167,.18),

transparent 45%),

radial-gradient(circle at bottom left,

rgba(212,175,55,.08),

transparent 35%);

pointer-events:none;

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

position:relative;

z-index:2;

}

.hero h1{

margin:25px 0;

}

.hero h1 span{

color:var(--accent);

}

.hero h2{

font-size:24px;

font-weight:500;

color:var(--gray);

margin-bottom:30px;

}

.hero p{

font-size:18px;

color:#d4d8df;

max-width:720px;

}

.badge{

display:inline-block;

padding:8px 18px;

background:rgba(35,155,167,.15);

border:1px solid rgba(35,155,167,.3);

border-radius:100px;

font-size:14px;

font-weight:700;

color:var(--accent);

letter-spacing:1px;

}


/*=========================================================
BUTTONS
=========================================================*/

.hero-buttons{

display:flex;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 30px;

background:var(--accent);

color:#fff;

font-weight:700;

border-radius:8px;

transition:.3s;

box-shadow:0 8px 25px rgba(35,155,167,.3);

}

.primary-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(35,155,167,.45);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 30px;

border:1px solid var(--accent);

color:var(--accent);

border-radius:8px;

font-weight:700;

transition:.3s;

}

.secondary-btn:hover{

background:var(--accent);

color:#fff;

}


/*=========================================================
HERO IMAGE
=========================================================*/

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:100%;

max-width:430px;

filter:drop-shadow(0 25px 60px rgba(0,0,0,.45));

transition:.4s;

}

.hero-image img:hover{

transform:translateY(-10px);

}

/*=========================================================
END PART 1
PART 2 CONTINUES WITH:
Table of Contents
Cards
Callouts
Tables
Product Section
FAQ
Footer
=========================================================*/

/*=========================================================
TABLE OF CONTENTS
=========================================================*/

#toc{

background:var(--background2);

padding:90px 0;

border-top:1px solid rgba(255,255,255,.05);

border-bottom:1px solid rgba(255,255,255,.05);

}

.toc-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:40px;

}

.toc-grid a{

display:flex;

flex-direction:column;

justify-content:center;

gap:10px;

padding:24px;

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

transition:.35s;

font-weight:600;

color:var(--text);

min-height:110px;

}

.toc-grid a:hover{

background:#252b42;

border-color:var(--accent);

transform:translateY(-6px);

box-shadow:var(--shadow);

}

.toc-grid a::before{

content:"";

width:40px;

height:4px;

background:var(--accent);

border-radius:10px;

}


/*=========================================================
GRID SYSTEM
=========================================================*/

.content-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

align-items:start;

}

.two-column{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

margin-top:35px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:28px;

margin-top:50px;

}


/*=========================================================
CARDS
=========================================================*/

.info-card,
.feature-card,
.application-card{

background:var(--card);

padding:30px;

border-radius:var(--radius);

border:1px solid var(--border);

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.info-card:hover,
.feature-card:hover,
.application-card:hover{

transform:translateY(-8px);

border-color:var(--accent);

box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.info-card h3,
.feature-card h3,
.application-card h3{

margin-bottom:18px;

color:white;

}

.info-card ul,
.feature-card ul{

padding-left:20px;

}

.info-card li,
.feature-card li{

margin-bottom:12px;

color:var(--gray);

}


/*=========================================================
ENGINEERING CALLOUTS
=========================================================*/

.callout{

margin:45px 0;

padding:35px;

border-radius:14px;

border-left:6px solid var(--accent);

background:#171d2d;

box-shadow:var(--shadow);

}

.callout h3{

margin-bottom:15px;

}

.callout p:last-child{

margin-bottom:0;

}

.engineering{

border-left-color:#239BA7;

}

.warning{

border-left-color:#D9534F;

background:#241719;

}

.warning h3{

color:#ff8a84;

}

.best-practice{

border-left-color:#D4AF37;

background:#242116;

}

.best-practice h3{

color:#FFD66E;

}


/*=========================================================
TABLES
=========================================================*/

table{

width:100%;

border-collapse:collapse;

margin:40px 0;

overflow:hidden;

border-radius:12px;

}

thead{

background:#20263b;

}

thead th{

padding:18px;

font-weight:700;

text-align:left;

color:white;

border:1px solid var(--border);

}

tbody td{

padding:16px;

border:1px solid var(--border);

color:var(--text);

}

tbody tr{

background:#171b2b;

transition:.25s;

}

tbody tr:nth-child(even){

background:#1c2134;

}

tbody tr:hover{

background:#25304b;

}


/*=========================================================
LISTS
=========================================================*/

ul{

padding-left:22px;

}

li{

margin-bottom:12px;

color:var(--text);

}


/*=========================================================
DIAGRAM PLACEHOLDER
=========================================================*/

.diagram-placeholder{

background:#181d2d;

border:2px dashed rgba(35,155,167,.45);

border-radius:14px;

padding:35px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

min-height:320px;

}

.diagram-placeholder img{

max-width:100%;

margin-bottom:20px;

}

.diagram-placeholder small{

color:var(--gray);

font-size:14px;

}


/*=========================================================
FIGURES
=========================================================*/

figure{

margin:45px auto;

text-align:center;

}

figcaption{

margin-top:15px;

font-size:14px;

color:var(--gray);

}


/*=========================================================
RTL SUPPORT
=========================================================*/

.rtl{

direction:rtl;

text-align:right;

font-family:"Tahoma","Vazirmatn",sans-serif;

}

.rtl ul{

padding-right:24px;

padding-left:0;

}

.rtl .section-title{

text-align:right;

}

.rtl .callout{

border-left:none;

border-right:6px solid var(--accent);

}

.rtl table{

direction:rtl;

}


/*=========================================================
FAQ
=========================================================*/

.faq-item{

background:var(--card);

border:1px solid var(--border);

padding:28px;

margin-bottom:20px;

border-radius:12px;

transition:.3s;

}

.faq-item:hover{

border-color:var(--accent);

transform:translateY(-4px);

}

.faq-item h3{

margin-bottom:14px;

}


/*=========================================================
REFERENCE LIST
=========================================================*/

.reference-list{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:18px;

list-style:none;

padding:0;

margin-top:40px;

}

.reference-list li{

padding:18px 22px;

background:var(--card);

border:1px solid var(--border);

border-radius:10px;

transition:.3s;

}

.reference-list li:hover{

border-color:var(--accent);

background:#232b41;

}


/*=========================================================
END PART 2

PART 3 CONTINUES WITH

Product Section
Footer
Progress Bar
Scroll Button
Animations
Utility Classes
=========================================================*/

/*=========================================================
PRODUCT SECTION
=========================================================*/

.product-section{

background:linear-gradient(135deg,#17172a 0%,#1d2338 100%);

position:relative;

overflow:hidden;

}

.product-section::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:320px;

height:320px;

border-radius:50%;

background:rgba(35,155,167,.08);

filter:blur(80px);

pointer-events:none;

}

.product-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:70px;

align-items:center;

margin-top:50px;

}

.product-image{

display:flex;

justify-content:center;

align-items:center;

}

.product-image img{

max-width:420px;

width:100%;

border-radius:16px;

transition:.4s;

filter:drop-shadow(0 25px 45px rgba(0,0,0,.45));

}

.product-image img:hover{

transform:translateY(-10px) scale(1.03);

}

.product-content h3{

font-size:34px;

margin-bottom:20px;

}

.product-content h4{

margin-top:35px;

margin-bottom:15px;

color:var(--gold);

}

.product-content ul{

margin-bottom:30px;

}

.product-content li{

margin-bottom:12px;

}

.product-content .primary-btn{

margin-top:20px;

}

/*=========================================================
PRODUCT DOCUMENTATION
=========================================================*/

.product-document{

text-align:center;

padding:60px 40px;

background:var(--card);

border:1px solid var(--border);

border-radius:16px;

margin-top:50px;

}

.product-document p{

max-width:700px;

margin:25px auto;

}

/*=========================================================
FOOTER
=========================================================*/

footer{

background:#090913;

padding:80px 0 35px;

border-top:1px solid rgba(255,255,255,.06);

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

margin-bottom:50px;

}

.footer-logo{

height:70px;

width:auto;

margin-bottom:25px;

}

footer h3{

margin-bottom:20px;

color:#fff;

}

footer p{

color:var(--gray);

}

footer a{

color:var(--accent);

}

footer a:hover{

color:white;

}

.copyright{

text-align:center;

padding-top:35px;

border-top:1px solid rgba(255,255,255,.08);

font-size:14px;

color:var(--gray);

}

/*=========================================================
PROGRESS BAR
=========================================================*/

#progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(90deg,var(--accent),var(--gold));

z-index:10000;

transition:.1s;

}

/*=========================================================
BACK TO TOP
=========================================================*/

#scrollTop{

position:fixed;

bottom:30px;

right:30px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:var(--accent);

color:white;

font-size:22px;

cursor:pointer;

box-shadow:0 10px 30px rgba(35,155,167,.4);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#scrollTop.show{

opacity:1;

visibility:visible;

}

#scrollTop:hover{

transform:translateY(-5px);

background:#2cb6c5;

}

/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-40{

margin-top:40px;

}

.mt-60{

margin-top:60px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.hidden{

display:none;

}

/*=========================================================
LINK STYLES
=========================================================*/

a{

transition:all .3s ease;

}

a:hover{

color:var(--accent);

}

/*=========================================================
IMAGE EFFECTS
=========================================================*/

img{

transition:transform .35s ease;

}

img:hover{

transform:scale(1.01);

}

/*=========================================================
SELECTION
=========================================================*/

::selection{

background:var(--accent);

color:#fff;

}

::-moz-selection{

background:var(--accent);

color:#fff;

}

/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#11111b;

}

::-webkit-scrollbar-thumb{

background:#2a324b;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--accent);

}

/*=========================================================
SMOOTH SECTION ANIMATION
=========================================================*/

.section{

opacity:1;

transform:translateY(0);

transition:opacity .6s ease,
transform .6s ease;

}

.fade-up{

opacity:0;

transform:translateY(40px);

}

/*=========================================================
PRINT STYLES
=========================================================*/

@media print{

header,
#scrollTop,
.hero-buttons,
.primary-btn,
.secondary-btn,
#progress-bar{

display:none !important;

}

body{

background:white;

color:black;

}

.section{

padding:40px 0;

}

table{

page-break-inside:avoid;

}

img{

max-width:100%;

}

}

/*=========================================================
END OF style.css

Next files:

responsive.css
animations.css

=========================================================*/

/*=========================================================
ELTC ENGINEERING GUIDE
style.css
PART 4 - FINAL POLISH
=========================================================*/


/*=========================================================
BACKGROUND DECORATION
=========================================================*/

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

background:

radial-gradient(circle at 15% 20%,
rgba(35,155,167,.05),
transparent 25%),

radial-gradient(circle at 85% 75%,
rgba(212,175,55,.04),
transparent 30%);

z-index:-1;

}


/*=========================================================
SECTION DIVIDERS
=========================================================*/

.section::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:120px;

height:2px;

background:linear-gradient(
90deg,
transparent,
var(--accent),
transparent);

opacity:.25;

}


/*=========================================================
HIGHLIGHT TEXT
=========================================================*/

.highlight{

color:var(--accent);

font-weight:700;

}

.gold{

color:var(--gold);

font-weight:700;

}

.small-text{

font-size:.92rem;

color:var(--gray);

}


/*=========================================================
BLOCKQUOTE
=========================================================*/

blockquote{

margin:40px 0;

padding:30px;

background:#181d2d;

border-left:5px solid var(--gold);

font-style:italic;

border-radius:10px;

color:#dfe5ec;

}

.rtl blockquote{

border-left:none;

border-right:5px solid var(--gold);

}


/*=========================================================
CODE STYLE
=========================================================*/

pre{

overflow:auto;

padding:20px;

background:#10141f;

border-radius:10px;

border:1px solid var(--border);

margin:30px 0;

}

code{

font-family:Consolas,
Monaco,
monospace;

color:#86d8ff;

}


/*=========================================================
TABLE HOVER EFFECT
=========================================================*/

tbody tr{

transition:
background .25s,
transform .25s;

}

tbody tr:hover{

transform:scale(1.01);

}


/*=========================================================
IMAGE CAPTION
=========================================================*/

.image-caption{

margin-top:15px;

font-size:14px;

color:var(--gray);

text-align:center;

}


/*=========================================================
SVG DIAGRAMS
=========================================================*/

svg{

max-width:100%;

height:auto;

}

.diagram-placeholder svg{

width:100%;

max-width:700px;

}


/*=========================================================
LIST ICONS
=========================================================*/

.check-list{

list-style:none;

padding:0;

}

.check-list li{

padding-left:34px;

position:relative;

margin-bottom:14px;

}

.check-list li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:bold;

color:var(--accent);

}

.rtl .check-list li{

padding-right:34px;

padding-left:0;

}

.rtl .check-list li::before{

left:auto;

right:0;

}


/*=========================================================
TABLE OF CONTENTS ACTIVE LINK
=========================================================*/

#main-nav a.active{

color:#fff;

}

#main-nav a.active::after{

width:100%;

}


/*=========================================================
LOADING ANIMATION PLACEHOLDER
=========================================================*/

.loading{

display:inline-block;

width:18px;

height:18px;

border-radius:50%;

border:3px solid rgba(255,255,255,.2);

border-top-color:var(--accent);

animation:spin 1s linear infinite;

}

@keyframes spin{

to{

transform:rotate(360deg);

}

}


/*=========================================================
FADE ANIMATIONS
=========================================================*/

.fade-in{

animation:fadeIn .8s ease forwards;

}

.slide-up{

animation:slideUp .7s ease forwards;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=========================================================
HOVER GLOW
=========================================================*/

.glow:hover{

box-shadow:

0 0 25px rgba(35,155,167,.25),

0 0 60px rgba(35,155,167,.15);

}


/*=========================================================
PRODUCT BADGE
=========================================================*/

.product-badge{

display:inline-block;

padding:6px 14px;

border-radius:100px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.4);

color:var(--gold);

font-size:.82rem;

font-weight:700;

letter-spacing:.5px;

margin-bottom:18px;

}


/*=========================================================
SEO HIDDEN TEXT
=========================================================*/

.visually-hidden{

position:absolute;

width:1px;

height:1px;

padding:0;

margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

white-space:nowrap;

border:0;

}


/*=========================================================
FOCUS ACCESSIBILITY
=========================================================*/

a:focus,
button:focus{

outline:2px solid var(--accent);

outline-offset:3px;

}


/*=========================================================
HR
=========================================================*/

hr{

border:none;

height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent);

margin:70px 0;

}


/*=========================================================
PRINT PAGE BREAK HELPERS
=========================================================*/

.page-break{

page-break-after:always;

}


/*=========================================================
END OF FILE
=========================================================*/