:root{
--dr-ci-bg:#0d0b09;
--dr-ci-bg-2:#15110d;
--dr-ci-bg-3:#0f1722;
--dr-ci-sand:#eadcc7;
--dr-ci-cream:#f5efe3;
--dr-ci-gold:#c9a84c;
--dr-ci-bronze:#b07b33;
--dr-ci-olive:#6d6a3f;
--dr-ci-cyan:#63d8e6;
--dr-ci-ink:#2b1f11;
--dr-ci-muted:#a89478;
--dr-ci-line:rgba(201,168,76,0.14);
--dr-ci-line-strong:rgba(201,168,76,0.24);
--dr-ci-glow:rgba(201,168,76,0.12);
--dr-ci-sea-deep:#0a1628;
--dr-ci-sea-mid:#1a3a5c;
--dr-ci-sea-teal:#0e4d5c;
--dr-ci-sea-foam:rgba(99,216,230,0.15);
--dr-ci-sea-wave:#4db8c7;
--dr-ci-sea-storm:#2a5d7a;
--dr-ci-panel:rgba(17,24,33,0.86);
--dr-ci-panel-strong:rgba(12,18,26,0.94);
--dr-ci-text:#e9f1f7;
--dr-ci-soft:#cbbca4;
--dr-ci-muted-ui:#92a3b3;
--dr-ci-shadow:0 24px 64px rgba(0,0,0,0.32);
--dr-ci-shadow-soft:0 16px 36px rgba(0,0,0,0.22);
--dr-ci-radius:20px;
--dr-ci-radius-sm:14px;
--dr-ci-content-width:860px;
--dr-ci-transition:.28s ease;
--dr-scrollY:0px;
} body{
background:
radial-gradient(circle at top right, rgba(201,168,76,0.06), transparent 24%),
radial-gradient(circle at 20% 18%, rgba(99,216,230,0.05), transparent 20%),
linear-gradient(180deg, var(--dr-ci-bg) 0%, var(--dr-ci-bg-2) 58%, var(--dr-ci-bg-3) 100%);
color:var(--dr-ci-text);
}
.dr-theme-ci-main{
position:relative;
padding:40px 20px 80px;
color:var(--dr-ci-text);
}
.dr-theme-ci-shell{
position:relative;
padding:28px 0 0;
}
.dr-theme-ci-shell::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(rgba(201,168,76,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,0.02) 1px, transparent 1px);
background-size:44px 44px;
mask-image:linear-gradient(180deg, rgba(0,0,0,0.82), transparent 75%);
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.82), transparent 75%);
opacity:.45;
}
.dr-theme-ci-title{
margin:0 0 28px;
max-width:980px;
font-family:"Playfair Display", Georgia, serif;
font-size:clamp(2.6rem, 5.4vw, 5rem);
line-height:1.02;
font-weight:800;
letter-spacing:-0.02em;
text-wrap:balance;
color:var(--dr-ci-text);
background:
linear-gradient(
100deg,
#f2f6fa 0%,
#f2f6fa 34%,
rgba(99,216,230,0.82) 46%,
#fff8eb 52%,
rgba(201,168,76,0.92) 58%,
#f2f6fa 72%,
#f2f6fa 100%
);
background-size:240% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:drCiTitleShift 9s ease-in-out infinite;
}
@keyframes drCiTitleShift{
0%,100%{background-position:100% 50%;}
50%{background-position:0% 50%;}
}
.dr-theme-ci-content{
position:relative;
isolation:isolate;
}
.dr-theme-ci-content > *{
position:relative;
z-index:2;
}
.dr-theme-ci-content > .wp-block-group:first-child,
.dr-theme-ci-content > .dr-ci-wrap:first-child,
.dr-theme-ci-content > .alignwide:first-child,
.dr-theme-ci-content > .alignfull:first-child{
margin-top:8px;
}
.dr-theme-ci-content p,
.dr-theme-ci-content li{
color:var(--dr-ci-soft);
line-height:1.85;
}
.dr-theme-ci-content h2,
.dr-theme-ci-content h3,
.dr-theme-ci-content h4,
.dr-theme-ci-content h5{
color:var(--dr-ci-text);
}
.dr-theme-ci-content h2,
.dr-theme-ci-content h3,
.dr-theme-ci-content h4{
font-family:"Playfair Display", Georgia, serif;
}
.dr-theme-ci-content > p,
.dr-theme-ci-content > ul,
.dr-theme-ci-content > ol,
.dr-theme-ci-content > h2,
.dr-theme-ci-content > h3,
.dr-theme-ci-content > h4,
.dr-theme-ci-content > .wp-block-paragraph,
.dr-theme-ci-content > .wp-block-heading,
.dr-theme-ci-content > .wp-block-list{
max-width:var(--dr-ci-content-width);
}
.dr-theme-ci-content strong{ color:#f2e6d2; }
.dr-theme-ci-content em{ color:#d9c8aa; }
.dr-theme-ci-content a{
color:#dceef7;
text-decoration:none;
border-bottom:1px solid rgba(99,216,230,0.25);
transition:border-color .2s ease, color .2s ease, opacity .2s ease;
}
.dr-theme-ci-content a:hover{
color:#ffffff;
border-bottom-color:rgba(99,216,230,0.58);
}
.dr-theme-ci-content img{
display:block;
max-width:100%;
height:auto;
border-radius:14px;
}
.dr-theme-ci-content figure{ margin:0; }
.dr-ci-panel{
background:linear-gradient(180deg, var(--dr-ci-panel), var(--dr-ci-panel-strong));
border:1px solid var(--dr-ci-line);
border-radius:16px;
box-shadow:var(--dr-ci-shadow);
}
.dr-rev{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease, transform .7s ease;
will-change:opacity, transform;
}
.dr-rev.dr-vis{
opacity:1;
transform:translateY(0);
}
.dr-d1{transition-delay:.08s;}
.dr-d2{transition-delay:.16s;}
.dr-d3{transition-delay:.24s;}
.dr-d4{transition-delay:.32s;}
.dr-theme-ci-content .wp-block-group,
.dr-theme-ci-content .wp-block-cover,
.dr-theme-ci-content .wp-block-columns{
position:relative;
}
.dr-theme-ci-content .dr-ci-section{
position:relative;
padding-top:22px;
}
.dr-theme-ci-content .dr-ci-section::before{
content:"";
position:absolute;
top:0;
left:0;
width:min(220px, 28%);
height:1px;
background:linear-gradient(90deg, rgba(201,168,76,0.48), transparent);
}
.dr-theme-ci-content .alignwide{
margin-top:30px;
margin-bottom:30px;
}
.dr-theme-ci-content .alignfull{
margin-top:36px;
margin-bottom:36px;
}
::selection{
background:rgba(99,216,230,0.18);
color:#fff;
} .dr-ci-wrap{
position:relative;
overflow:hidden;
border-radius:16px;
background:
radial-gradient(circle at top right, rgba(201,168,76,0.08), transparent 26%),
radial-gradient(circle at 80% 60%, rgba(10,22,40,0.35), transparent 40%),
radial-gradient(circle at bottom left, rgba(14,77,92,0.12), transparent 30%),
linear-gradient(180deg, var(--dr-ci-bg) 0%, var(--dr-ci-bg-2) 100%);
color:var(--dr-ci-sand);
box-shadow:0 20px 60px rgba(10,7,3,0.34);
margin:0 0 46px 0;
isolation:isolate;
}
.dr-ci-wrap::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
background-size:42px 42px;
pointer-events:none;
opacity:.45;
mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.38));
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.38));
}
.dr-ci-wrap::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0.12) 100%);
} .dr-grain{
position:absolute;
inset:0;
pointer-events:none;
z-index:60;
opacity:.038;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size:180px 180px;
}
.dr-scanline{
position:absolute;
inset:0;
pointer-events:none;
z-index:55;
overflow:hidden;
}
.dr-scanline::before{
content:'';
position:absolute;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(77,184,199,0.12) 20%, rgba(201,168,76,0.10) 50%, rgba(77,184,199,0.12) 80%, transparent);
box-shadow:0 0 24px 4px rgba(77,184,199,0.06);
animation:drScan 8s ease-in-out infinite;
}
@keyframes drScan{
0%{top:-2px;opacity:0;}
8%{opacity:1;}
92%{opacity:1;}
100%{top:100%;opacity:0;}
} .dr-ocean{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
overflow:hidden;
}
.dr-ocean-wave{
position:absolute;
width:200%;
left:-50%;
height:120px;
opacity:.08;
}
.dr-ocean-wave.w1{
bottom:18%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,60 C180,20 360,100 540,60 C720,20 900,100 1080,60 C1260,20 1440,80 1440,60 L1440,120 L0,120Z' fill='rgba(77,184,199,0.3)'/%3E%3C/svg%3E") repeat-x;
background-size:720px 120px;
animation:drWaveDrift 12s linear infinite;
}
.dr-ocean-wave.w2{
bottom:14%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,70 C200,30 400,110 600,70 C800,30 1000,100 1200,70 C1350,45 1440,80 1440,70 L1440,120 L0,120Z' fill='rgba(14,77,92,0.25)'/%3E%3C/svg%3E") repeat-x;
background-size:820px 120px;
animation:drWaveDrift 16s linear infinite reverse;
opacity:.06;
}
.dr-ocean-wave.w3{
bottom:10%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,50 C240,90 480,10 720,50 C960,90 1200,10 1440,50 L1440,120 L0,120Z' fill='rgba(42,93,122,0.2)'/%3E%3C/svg%3E") repeat-x;
background-size:660px 120px;
animation:drWaveDrift 20s linear infinite;
opacity:.05;
}
@keyframes drWaveDrift{
from{transform:translateX(0);}
to{transform:translateX(50%);}
}
.dr-sea-glow{
position:absolute;
width:600px;
height:600px;
border-radius:50%;
background:radial-gradient(circle, rgba(14,77,92,0.14), rgba(77,184,199,0.06), transparent 70%);
pointer-events:none;
z-index:1;
right:-120px;
bottom:20%;
transform:translateY(calc(var(--dr-scrollY) * -0.12));
transition:transform .08s linear;
mix-blend-mode:screen;
}
.dr-scroll-overlay{
position:absolute;
inset:-12% -6%;
pointer-events:none;
z-index:1;
opacity:.55;
transform:translateY(calc(var(--dr-scrollY) * 0.14));
transition:transform .08s linear;
background:
radial-gradient(circle at 18% 24%, rgba(99,216,230,0.06), transparent 18%),
radial-gradient(circle at 78% 16%, rgba(201,168,76,0.06), transparent 20%),
radial-gradient(circle at 70% 72%, rgba(14,77,92,0.08), transparent 20%),
linear-gradient(135deg, transparent 0%, rgba(77,184,199,0.025) 22%, transparent 40%),
linear-gradient(45deg, transparent 0%, rgba(201,168,76,0.02) 28%, transparent 46%);
mix-blend-mode:screen;
} .dr-ambient{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:1;
}
.dr-ambient svg{
position:absolute;
opacity:.32;
filter:drop-shadow(0 0 18px rgba(201,168,76,0.08));
transition:transform .08s linear;
}
.dr-amb-map{top:78px;right:-20px;width:360px;height:360px;transform:translateY(calc(var(--dr-scrollY)*0.10));}
.dr-amb-arch{top:760px;left:-30px;width:320px;height:340px;transform:translateY(calc(var(--dr-scrollY)*0.06));}
.dr-amb-orbit{bottom:150px;right:18px;width:380px;height:260px;transform:translateY(calc(var(--dr-scrollY)*-0.08));}
.dr-amb-net{top:420px;right:8%;width:300px;height:220px;opacity:.22;transform:translateY(calc(var(--dr-scrollY)*0.12));}
.dr-sl{stroke:rgba(201,168,76,0.34);stroke-width:1.8;fill:none;}
.dr-ss{stroke:rgba(201,168,76,0.14);stroke-width:1;fill:none;}
.dr-sc{stroke:rgba(77,184,199,0.22);stroke-width:1.1;fill:none;stroke-dasharray:8 12;animation:drDash 4s linear infinite;}
@keyframes drDash{to{stroke-dashoffset:-40;}}
.dr-sd{fill:var(--dr-ci-gold);filter:drop-shadow(0 0 10px rgba(201,168,76,0.35));}
.dr-sdc{fill:var(--dr-ci-cyan);filter:drop-shadow(0 0 10px rgba(99,216,230,0.28));}
.dr-fd{fill:var(--dr-ci-gold);filter:drop-shadow(0 0 10px rgba(201,168,76,0.35));}
.dr-fd.f1{animation:drM1 5.1s linear infinite;}
.dr-fd.f2{animation:drM2 5.8s linear infinite;}
.dr-fd.f3{animation:drM3 5s linear infinite;}
.dr-fd.fc1{fill:var(--dr-ci-cyan);animation:drM4 4.8s linear infinite;filter:drop-shadow(0 0 10px rgba(99,216,230,0.28));}
@keyframes drM1{0%{transform:translate(0,0);opacity:0;}12%{opacity:1;}55%{transform:translate(60px,-48px);opacity:1;}100%{transform:translate(122px,-92px);opacity:0;}}
@keyframes drM2{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}55%{transform:translate(-76px,0);opacity:1;}100%{transform:translate(-136px,0);opacity:0;}}
@keyframes drM3{0%{transform:translate(0,0);opacity:0;}12%{opacity:1;}55%{transform:translate(0,-56px);opacity:1;}100%{transform:translate(0,-118px);opacity:0;}}
@keyframes drM4{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}55%{transform:translate(80px,24px);opacity:1;}100%{transform:translate(146px,42px);opacity:0;}} .dr-hero{
position:relative;
padding:0;
overflow:hidden;
border-bottom:1px solid rgba(201,168,76,0.08);
z-index:2;
}
.dr-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
align-items:stretch;
min-height:580px;
}
.dr-copy,
.dr-visual,
.dr-vframe{min-width:0;}
.dr-copy{
position:relative;
z-index:2;
padding:74px 38px 60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.dr-copy::after{
content:'';
position:absolute;
top:36px;
bottom:36px;
right:0;
width:1px;
background:linear-gradient(180deg,transparent,rgba(201,168,76,0.16),transparent);
}
.dr-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:4px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:18px;
font-weight:700;
}
.dr-title{
margin:0 0 16px;
font-family:"Playfair Display", Georgia, serif;
font-size:clamp(2.3rem,4.7vw,4rem);
line-height:1.04;
font-weight:800;
max-width:760px;
background:linear-gradient(105deg,var(--dr-ci-sand) 0%,var(--dr-ci-sand) 38%,rgba(77,184,199,0.7) 44%,#f5efe3 50%,rgba(201,168,76,0.92) 56%,var(--dr-ci-sand) 62%,var(--dr-ci-sand) 100%);
background-size:250% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:drShimmer 6s ease-in-out infinite;
}
@keyframes drShimmer{
0%,100%{background-position:100% 50%;}
50%{background-position:0% 50%;}
}
.dr-sub{
max-width:760px;
margin:0 0 22px;
color:#cbbba3;
font-size:1.08rem;
line-height:1.9;
}
.dr-meta{
display:inline-block;
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ci-muted);
padding:10px 14px;
border:1px solid rgba(201,168,76,0.12);
border-radius:999px;
background:rgba(13,11,9,0.56);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.dr-fstrip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:28px;
max-width:780px;
}
.dr-feat{
background:linear-gradient(180deg,rgba(24,18,13,0.88),rgba(17,13,9,0.92));
border:1px solid rgba(201,168,76,0.10);
border-radius:12px;
padding:14px;
box-shadow:0 10px 28px rgba(0,0,0,0.16);
transition:border-color .3s, box-shadow .3s, transform .25s;
}
.dr-feat:hover{
border-color:rgba(77,184,199,0.28);
box-shadow:0 10px 28px rgba(0,0,0,0.16), 0 0 18px rgba(77,184,199,0.08);
transform:translateY(-2px);
}
.dr-feat-label{
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:6px;
}
.dr-feat strong{
display:block;
color:var(--dr-ci-sand);
font-weight:600;
line-height:1.5;
font-size:14px;
} .dr-visual{
position:relative;
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:34px 28px;
overflow:hidden;
}
.dr-visual::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 70% 18%, rgba(201,168,76,0.10), transparent 24%),
radial-gradient(circle at 40% 78%, rgba(14,77,92,0.12), transparent 22%);
pointer-events:none;
}
.dr-vframe{
position:relative;
width:min(100%,520px);
max-width:520px;
aspect-ratio:1/1.08;
border-radius:18px;
background:linear-gradient(180deg,rgba(20,15,11,0.94),rgba(10,22,40,0.60));
border:1px solid rgba(201,168,76,0.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 18px 44px rgba(0,0,0,0.22);
overflow:hidden;
}
.dr-vframe::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(201,168,76,0.05),transparent 42%), radial-gradient(circle at center,rgba(77,184,199,0.04),transparent 55%);
pointer-events:none;
}
.dr-vframe::after{
content:'';
position:absolute;
inset:16px;
border:1px solid rgba(201,168,76,0.07);
border-radius:12px;
pointer-events:none;
} .dr-const{
position:absolute;
inset:0;
pointer-events:none;
}
.dr-const .ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(201,168,76,0.11);
animation:drSpin 30s linear infinite;
}
.dr-const .r1{width:210px;height:210px;top:34px;right:42px;}
.dr-const .r2{width:132px;height:132px;bottom:56px;left:42px;animation-direction:reverse;animation-duration:24s;}
.dr-const .r3{width:168px;height:168px;top:50%;left:50%;transform:translate(-50%,-50%);border-color:rgba(77,184,199,0.08);animation-duration:38s;}
.dr-const .dot{
position:absolute;
width:7px;
height:7px;
border-radius:50%;
background:var(--dr-ci-gold);
box-shadow:0 0 16px var(--dr-ci-glow);
animation:drPulse 2.8s ease-in-out infinite;
}
.dr-const .d1{top:88px;right:148px;}
.dr-const .d2{bottom:108px;left:98px;animation-delay:.9s;}
.dr-const .d3{top:242px;right:90px;animation-delay:1.7s;}
.dr-const .d4{top:50%;left:50%;transform:translate(-50%,-50%);background:var(--dr-ci-cyan);box-shadow:0 0 16px rgba(99,216,230,0.20);animation-delay:2.1s;width:5px;height:5px;}
@keyframes drSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes drPulse{0%,100%{transform:scale(1);opacity:.45;}50%{transform:scale(1.7);opacity:1;}} .dr-pviz{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
gap:46px;
z-index:2;
}
.dr-col{
position:relative;
width:108px;
height:286px;
border-radius:8px 8px 4px 4px;
background:linear-gradient(180deg,#1d150e,#120d08);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), 0 12px 28px rgba(0,0,0,0.22);
}
.dr-col::before{
content:'';
position:absolute;
top:-14px;
left:-8px;
right:-8px;
height:16px;
border-radius:5px 5px 0 0;
background:linear-gradient(180deg,#271d13,#161008);
box-shadow:0 6px 16px rgba(0,0,0,0.2);
}
.dr-col::after{
content:'';
position:absolute;
bottom:0;
left:10px;
right:10px;
top:26px;
border-radius:6px;
border:1px solid rgba(201,168,76,0.08);
}
.dr-pat{
position:absolute;
inset:38px 18px 28px;
border-radius:4px;
background:linear-gradient(135deg,rgba(201,168,76,0.08),transparent 45%);
}
.dr-pat.left::before,
.dr-pat.right::before{
content:'';
position:absolute;
inset:16px;
border:1px solid rgba(201,168,76,0.12);
clip-path:polygon(50% 0%,80% 18%,100% 50%,82% 82%,50% 100%,18% 82%,0% 50%,20% 18%);
}
.dr-pat.left::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:18px;
height:92px;
transform:translate(-50%,-50%);
border:1px solid rgba(201,168,76,0.14);
border-radius:999px;
}
.dr-pat.right::after{
content:'';
position:absolute;
inset:18px;
border:1px solid rgba(201,168,76,0.12);
border-radius:100px 100px 10px 10px;
}
.dr-core{
position:relative;
width:220px;
height:220px;
display:flex;
align-items:center;
justify-content:center;
}
.dr-core::before{
content:'';
position:absolute;
inset:12px;
border:1px solid rgba(201,168,76,0.10);
border-radius:22px;
transform:rotate(45deg);
}
.dr-core::after{
content:'';
position:absolute;
inset:38px;
border:1px solid rgba(201,168,76,0.08);
border-radius:18px;
transform:rotate(45deg);
}
.dr-ln{
position:absolute;
background:linear-gradient(90deg,rgba(201,168,76,0.18),rgba(201,168,76,0.8),rgba(201,168,76,0.18));
box-shadow:0 0 14px rgba(201,168,76,0.16);
}
.dr-ln.h1{width:150px;height:2px;left:35px;top:109px;}
.dr-ln.v1{width:2px;height:150px;top:35px;left:109px;}
.dr-ln.d1{width:120px;height:2px;top:78px;left:50px;transform:rotate(45deg);}
.dr-ln.d2{width:120px;height:2px;top:140px;left:50px;transform:rotate(-45deg);}
.dr-emb{
position:relative;
width:94px;
height:94px;
border-radius:22px;
border:2px solid rgba(201,168,76,0.86);
box-shadow:0 0 24px rgba(201,168,76,0.16), inset 0 0 20px rgba(201,168,76,0.05);
background:linear-gradient(180deg,rgba(20,15,11,0.95),rgba(28,20,13,0.98));
animation:drBreathe 4s ease-in-out infinite;
}
@keyframes drBreathe{
0%,100%{box-shadow:0 0 24px rgba(201,168,76,0.16), inset 0 0 20px rgba(201,168,76,0.05);}
50%{box-shadow:0 0 36px rgba(201,168,76,0.24), inset 0 0 28px rgba(201,168,76,0.08);}
}
.dr-emb::before{
content:'';
position:absolute;
inset:18px;
border:1px solid rgba(201,168,76,0.72);
clip-path:polygon(50% 0%,79% 18%,100% 50%,82% 81%,50% 100%,18% 81%,0% 50%,21% 18%);
}
.dr-emb::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:14px;
height:14px;
transform:translate(-50%,-50%);
border-radius:50%;
background:rgba(201,168,76,0.86);
box-shadow:0 0 14px rgba(201,168,76,0.25);
}
.dr-sn{
position:absolute;
width:14px;
height:14px;
border-radius:50%;
border:1px solid rgba(201,168,76,0.8);
background:rgba(201,168,76,0.06);
box-shadow:0 0 14px rgba(201,168,76,0.12);
}
.dr-sn.n1{top:22px;left:103px;}
.dr-sn.n2{right:22px;top:103px;}
.dr-sn.n3{bottom:22px;left:103px;}
.dr-sn.n4{left:22px;top:103px;}
.dr-sn.n5{top:49px;right:49px;}
.dr-sn.n6{bottom:49px;left:49px;}
.dr-vcap{
position:absolute;
left:20px;
right:20px;
bottom:18px;
z-index:3;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
flex-wrap:wrap;
padding-top:14px;
border-top:1px solid rgba(201,168,76,0.08);
background:linear-gradient(180deg,rgba(12,9,6,0),rgba(12,9,6,0.72) 30%,rgba(12,9,6,0.92));
}
.dr-vcap strong{
display:block;
flex:0 0 100%;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-gold);
}
.dr-vcap span{
display:block;
color:#c3b196;
font-size:13px;
line-height:1.55;
} .dr-ticker{
position:relative;
z-index:3;
overflow:hidden;
border-top:1px solid rgba(77,184,199,0.10);
border-bottom:1px solid rgba(201,168,76,0.08);
background:linear-gradient(90deg,rgba(10,22,40,0.4),rgba(13,11,9,0.6),rgba(10,22,40,0.4));
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:11px 0;
}
.dr-ticker-track{
display:flex;
width:max-content;
animation:drTick 32s linear infinite;
}
.dr-ticker-track span{
flex-shrink:0;
font-family:"Playfair Display", Georgia, serif;
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-muted);
padding:0 28px;
white-space:nowrap;
}
.dr-ticker-track span::after{
content:'◆';
margin-left:28px;
color:var(--dr-ci-sea-wave);
opacity:.35;
font-size:6px;
vertical-align:middle;
}
.dr-ticker:hover .dr-ticker-track{
animation-play-state:paused;
}
@keyframes drTick{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
} .dr-body{
max-width:1180px;
margin:0 auto;
padding:42px 26px 64px;
position:relative;
z-index:2;
}
.dr-intro{
max-width:960px;
margin:0 auto 34px;
text-align:center;
color:#ccb89c;
font-size:1.02rem;
line-height:1.95;
} .dr-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin:0 0 40px;
}
.dr-card{
background:linear-gradient(180deg,rgba(24,18,13,0.94),rgba(18,13,9,0.95));
border:1px solid rgba(201,168,76,0.14);
border-radius:12px;
padding:22px 20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 12px 28px rgba(0,0,0,0.18);
position:relative;
overflow:hidden;
transition:border-color .35s, box-shadow .35s, transform .25s, background .5s;
}
.dr-card:hover{
border-color:rgba(77,184,199,0.30);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 16px 36px rgba(0,0,0,0.22), 0 0 24px rgba(77,184,199,0.06);
transform:translateY(-3px);
background:linear-gradient(180deg,rgba(24,18,13,0.94),rgba(10,22,40,0.35));
}
.dr-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(201,168,76,0.05),transparent 45%);
pointer-events:none;
transition:background .5s;
}
.dr-card:hover::before{
background:linear-gradient(135deg,rgba(77,184,199,0.06),transparent 45%);
}
.dr-card::after{
content:'';
position:absolute;
top:8px;
left:8px;
width:18px;
height:18px;
border-top:1px solid rgba(201,168,76,0.35);
border-left:1px solid rgba(201,168,76,0.35);
pointer-events:none;
opacity:.6;
transition:opacity .3s, border-color .3s;
}
.dr-card:hover::after{
opacity:1;
border-color:rgba(77,184,199,0.5);
}
.dr-card-label{
position:relative;
z-index:2;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:10px;
}
.dr-card h3{
position:relative;
z-index:2;
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.2rem;
line-height:1.35;
color:var(--dr-ci-sand);
}
.dr-card p{
position:relative;
z-index:2;
margin:0;
font-size:15px;
line-height:1.8;
color:#c6b49b;
} .dr-signal{
margin:34px 0 10px;
background:linear-gradient(135deg,rgba(201,168,76,0.08),rgba(14,77,92,0.08));
border:1px solid rgba(201,168,76,0.16);
border-left:3px solid var(--dr-ci-gold);
border-radius:12px;
padding:24px;
position:relative;
overflow:hidden;
}
.dr-signal::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(77,184,199,0.04),transparent);
animation:drSweep 5s ease-in-out infinite;
pointer-events:none;
}
@keyframes drSweep{
0%{left:-100%;}
50%{left:100%;}
100%{left:100%;}
}
.dr-signal strong{
display:block;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:10px;
position:relative;
}
.dr-signal p{
margin:0;
color:#e1d2bf;
font-family:"Playfair Display", Georgia, serif;
font-size:1.08rem;
line-height:1.85;
position:relative;
} .dr-section{margin-top:46px;}
.dr-sec-label{
display:inline-block;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:12px;
border-top:1px solid rgba(201,168,76,0.28);
padding-top:9px;
}
.dr-section h2{
margin:0 0 14px;
font-family:"Playfair Display", Georgia, serif;
font-size:2rem;
line-height:1.25;
color:var(--dr-ci-sand);
}
.dr-sec-intro{
max-width:900px;
color:#c9b59a;
line-height:1.9;
margin-bottom:24px;
} .dr-streams{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:18px;
margin-top:28px;
}
.dr-sbox{
background:linear-gradient(180deg,rgba(22,16,11,0.96),rgba(13,10,7,0.98));
border:1px solid rgba(201,168,76,0.14);
border-radius:12px;
padding:22px;
min-height:100%;
transition:border-color .3s, box-shadow .3s;
}
.dr-sbox:hover{
border-color:rgba(77,184,199,0.22);
box-shadow:0 0 16px rgba(77,184,199,0.04);
}
.dr-sbox h3{
margin:0 0 12px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.28rem;
color:var(--dr-ci-sand);
}
.dr-sbox p{
color:#c6b39a;
line-height:1.85;
margin:0 0 12px;
}
.dr-list{
margin:0;
padding-left:18px;
color:#e8dac6;
}
.dr-list li{
margin:0 0 10px;
line-height:1.75;
}
.dr-list a{
color:var(--dr-ci-sea-wave);
text-decoration:none;
border-bottom:1px solid rgba(77,184,199,0.25);
transition:border-color .2s, color .2s;
}
.dr-list a:hover{
color:var(--dr-ci-cream);
border-color:rgba(77,184,199,0.55);
}
.dr-qwrap{
margin-top:34px;
padding-top:8px;
}
.dr-qhead{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:16px;
margin-bottom:18px;
flex-wrap:wrap;
}
.dr-qhead h3{
margin:0;
font-family:"Playfair Display", Georgia, serif;
font-size:1.5rem;
color:var(--dr-ci-sand);
}
.dr-qhead p{
margin:0;
color:var(--dr-ci-muted);
line-height:1.8;
max-width:640px;
} .dr-rail{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:10px;
}
.dr-archive{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:12px;
}
.dr-alink{
display:block;
text-decoration:none;
color:inherit;
background:linear-gradient(180deg,rgba(22,16,11,0.96),rgba(13,10,7,0.98));
border:1px solid rgba(201,168,76,0.14);
border-radius:12px;
overflow:hidden;
box-shadow:0 14px 30px rgba(0,0,0,0.18);
transition:transform .25s, border-color .25s, box-shadow .25s;
position:relative;
}
.dr-alink:hover{
transform:translateY(-4px);
border-color:rgba(77,184,199,0.32);
box-shadow:0 20px 40px rgba(0,0,0,0.26), 0 0 20px rgba(77,184,199,0.06);
}
.dr-alink-top{
position:relative;
height:220px;
overflow:hidden;
border-bottom:1px solid rgba(201,168,76,0.08);
background:#120d08;
}
.dr-alink-top img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transform:scale(1.01);
transition:transform .45s, filter .45s;
filter:saturate(.95) brightness(.86);
}
.dr-alink:hover .dr-alink-top img{
transform:scale(1.06);
filter:saturate(1.02) brightness(.95);
}
.dr-alink-top::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(12,9,6,0.10),rgba(12,9,6,0.18) 36%,rgba(12,9,6,0.78)), linear-gradient(135deg,rgba(77,184,199,0.06),transparent 46%);
pointer-events:none;
transition:background .4s;
}
.dr-alink:hover .dr-alink-top::after{
background:linear-gradient(180deg,rgba(10,22,40,0.15),rgba(12,9,6,0.18) 36%,rgba(12,9,6,0.78)), linear-gradient(135deg,rgba(77,184,199,0.10),transparent 46%);
}
.dr-alink-badge{
position:absolute;
left:14px;
top:14px;
z-index:2;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#f5efe3;
background:rgba(10,22,40,0.62);
border:1px solid rgba(77,184,199,0.22);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:8px 10px;
border-radius:999px;
}
.dr-alink-body{
padding:18px 18px 20px;
}
.dr-alink-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ci-sea-wave);
margin-bottom:10px;
}
.dr-alink h3{
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.22rem;
line-height:1.35;
color:var(--dr-ci-sand);
}
.dr-alink p{
margin:0;
color:#c1af96;
line-height:1.8;
font-size:14px;
}
.dr-alink-date{
margin-top:14px;
color:var(--dr-ci-muted);
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
} .dr-divider{
display:flex;
align-items:center;
gap:16px;
margin:48px 0 8px;
}
.dr-divider::before,
.dr-divider::after{
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(77,184,199,0.18),transparent);
}
.dr-divider-dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--dr-ci-sea-wave);
box-shadow:0 0 10px rgba(77,184,199,0.25);
}
.dr-footer{
margin-top:34px;
text-align:center;
color:var(--dr-ci-muted);
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
} .dr-clusters{
display:grid;
gap:18px;
margin-top:10px;
}
.dr-cluster{
position:relative;
background:linear-gradient(180deg,rgba(22,16,11,0.96),rgba(12,10,8,0.98));
border:1px solid rgba(201,168,76,0.14);
border-radius:14px;
padding:22px;
box-shadow:0 14px 30px rgba(0,0,0,0.18);
overflow:hidden;
transition:border-color .35s ease, box-shadow .35s ease, transform .25s ease;
}
.dr-cluster:hover{
border-color:rgba(77,184,199,0.22);
box-shadow:0 18px 36px rgba(0,0,0,0.22), 0 0 22px rgba(77,184,199,0.04);
transform:translateY(-2px);
}
.dr-cluster::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(77,184,199,0.04),transparent 45%);
pointer-events:none;
}
.dr-cluster-head{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:12px;
flex-wrap:wrap;
}
.dr-cluster-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ci-cyan);
margin-bottom:8px;
}
.dr-cluster h3{
margin:0;
font-family:"Playfair Display", Georgia, serif;
font-size:1.5rem;
line-height:1.25;
color:var(--dr-ci-text);
}
.dr-cluster-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#f5efe3;
border:1px solid rgba(77,184,199,0.22);
background:rgba(10,22,40,0.44);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.dr-cluster-badge-wip{
border-color:rgba(201,168,76,0.22);
background:rgba(40,26,10,0.34);
}
.dr-cluster-intro{
position:relative;
z-index:2;
color:#c6b39a;
line-height:1.9;
margin-bottom:18px;
max-width:980px;
}
.dr-cluster-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}
.dr-node{
position:relative;
background:linear-gradient(180deg,rgba(18,14,10,0.90),rgba(10,22,40,0.20));
border:1px solid rgba(201,168,76,0.12);
border-radius:12px;
padding:18px;
min-height:150px;
overflow:hidden;
transition:border-color .3s ease, box-shadow .3s ease, transform .25s ease;
}
.dr-node:hover{
border-color:rgba(77,184,199,0.20);
box-shadow:0 0 16px rgba(77,184,199,0.04);
transform:translateY(-2px);
}
.dr-node::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,rgba(77,184,199,0.6),rgba(201,168,76,0.5),transparent);
}
.dr-node-pillar{
border-color:rgba(77,184,199,0.22);
box-shadow:0 0 18px rgba(77,184,199,0.05);
}
.dr-node-planned{
opacity:.92;
}
.dr-node-label{
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2.5px;
text-transform:uppercase;
color:var(--dr-ci-gold);
margin-bottom:10px;
}
.dr-node-title,
.dr-node span.dr-node-title{
display:block;
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.08rem;
line-height:1.35;
color:var(--dr-ci-text);
text-decoration:none;
transition:color .25s ease;
border-bottom:none;
}
a.dr-node-title:hover{
color:#fff8eb;
border-bottom:none;
}
.dr-node p{
margin:0 0 14px;
color:#bea98d;
line-height:1.75;
font-size:14px;
}
.dr-node-status{
display:inline-block;
padding:6px 10px;
border-radius:999px;
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ci-muted-ui);
border:1px solid rgba(201,168,76,0.14);
background:rgba(12,9,6,0.4);
} @media (prefers-reduced-motion: reduce){
.dr-theme-ci-title,
.dr-title,
.dr-rev,
.dr-cluster,
.dr-node,
.dr-ticker-track,
.dr-scanline::before,
.dr-ocean-wave,
.dr-sc,
.dr-fd,
.dr-const .ring,
.dr-const .dot,
.dr-emb{
animation:none !important;
transition:none !important;
transform:none !important;
opacity:1 !important;
}
} @media (max-width:1080px){
.dr-hero-grid{grid-template-columns:1fr;}
.dr-copy::after{display:none;}
.dr-visual{padding:0 24px 30px;}
.dr-vframe{width:min(100%,560px);max-width:560px;}
.dr-fstrip{grid-template-columns:1fr;}
}
@media (max-width:1000px){
.dr-grid{grid-template-columns:1fr;}
.dr-streams{grid-template-columns:1fr;}
.dr-rail,.dr-archive{grid-template-columns:1fr;}
.dr-cluster-grid{grid-template-columns:1fr;}
.dr-amb-map,.dr-amb-arch,.dr-amb-orbit,.dr-amb-net{opacity:.18;transform:scale(.82);}
}
@media (max-width:960px){
.dr-theme-ci-main{padding:28px 16px 64px;}
.dr-theme-ci-title{margin-bottom:20px;}
}
@media (max-width:680px){
.dr-theme-ci-main{padding:20px 12px 54px;}
.dr-theme-ci-shell{padding-top:18px;}
.dr-theme-ci-content > p,
.dr-theme-ci-content > ul,
.dr-theme-ci-content > ol,
.dr-theme-ci-content > h2,
.dr-theme-ci-content > h3,
.dr-theme-ci-content > h4,
.dr-theme-ci-content > .wp-block-paragraph,
.dr-theme-ci-content > .wp-block-heading,
.dr-theme-ci-content > .wp-block-list{
max-width:none;
}
.dr-copy{padding:56px 22px 34px;}
.dr-body{padding:34px 18px 54px;}
.dr-title{font-size:2.15rem;}
.dr-visual{padding:0 18px 24px;}
.dr-vframe{width:100%;max-width:none;aspect-ratio:1/1.08;}
.dr-pviz{gap:22px;}
.dr-col{width:74px;height:220px;}
.dr-core{width:160px;height:160px;}
.dr-ln.h1{width:110px;left:25px;top:79px;}
.dr-ln.v1{height:110px;top:25px;left:79px;}
.dr-ln.d1{width:90px;top:57px;left:34px;}
.dr-ln.d2{width:90px;top:102px;left:34px;}
.dr-emb{width:68px;height:68px;}
.dr-vcap{left:16px;right:16px;bottom:14px;}
.dr-vcap span{font-size:12px;line-height:1.5;}
.dr-alink-top{height:190px;}
.dr-ticker-track span{font-size:11px;letter-spacing:2px;padding:0 18px;}
.dr-cluster{padding:18px;}
.dr-cluster h3{font-size:1.28rem;}
.dr-node{padding:16px;min-height:auto;}
} .dr-atlas-frame{
background:
linear-gradient(180deg, rgba(10,12,16,0.18), rgba(10,12,16,0.72)),
linear-gradient(135deg, rgba(10,22,40,0.82), rgba(22,14,8,0.92));
}
.dr-atlas-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 18% 22%, rgba(201,168,76,0.16), transparent 18%),
radial-gradient(circle at 72% 18%, rgba(99,216,230,0.12), transparent 16%),
radial-gradient(circle at 72% 66%, rgba(201,168,76,0.10), transparent 18%),
radial-gradient(circle at 28% 72%, rgba(99,216,230,0.08), transparent 16%),
linear-gradient(180deg, rgba(6,10,18,0.24), rgba(6,10,18,0.74)),
url(https://darjarihla.com/wp-content/uploads/2026/04/History-of-Tunisia-Featured-Image-%E2%80%93-Carthage-Ruins-at-Sunset-1.png) center/cover no-repeat;
filter:saturate(.82) brightness(.58);
transform:scale(1.03);
}
.dr-atlas-overlay{
position:absolute;
inset:0;
background:
linear-gradient(135deg, rgba(201,168,76,0.06), transparent 28%),
linear-gradient(225deg, rgba(99,216,230,0.08), transparent 34%),
radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,0.24) 100%);
pointer-events:none;
}
.dr-atlas-routes{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:2;
pointer-events:none;
}
.dr-route{
fill:none;
stroke-width:2.2;
stroke-linecap:round;
stroke-dasharray:8 12;
animation:drAtlasFlow 8s linear infinite;
opacity:.9;
}
.dr-route-gold{ stroke:url(#drRouteGold); }
.dr-route-cyan{ stroke:url(#drRouteCyan); animation-duration:10s; }
@keyframes drAtlasFlow{
from{ stroke-dashoffset:0; }
to{ stroke-dashoffset:-120; }
}
.dr-route-pulse{
fill:var(--dr-ci-cyan);
filter:drop-shadow(0 0 10px rgba(99,216,230,0.42));
animation:drAtlasPulse 3.4s ease-in-out infinite;
}
.dr-route-pulse.p2{ animation-delay:.8s; }
.dr-route-pulse.p3{ animation-delay:1.6s; }
@keyframes drAtlasPulse{
0%,100%{ transform:scale(1); opacity:.45; }
50%{ transform:scale(1.85); opacity:1; }
}
.dr-atlas-node{
position:absolute;
z-index:3;
min-width:110px;
max-width:150px;
padding:10px 12px 9px;
border-radius:14px;
background:rgba(10,14,22,0.62);
border:1px solid rgba(201,168,76,0.16);
box-shadow:
0 14px 24px rgba(0,0,0,0.20),
0 0 18px rgba(99,216,230,0.04);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
animation:drAtlasFloat 7s ease-in-out infinite;
}
.dr-atlas-node strong{
display:block;
color:var(--dr-ci-cream);
font-family:"Playfair Display", Georgia, serif;
font-size:14px;
line-height:1.2;
margin-bottom:4px;
}
.dr-atlas-node em{
display:block;
font-style:normal;
color:#c8b799;
font-size:11px;
line-height:1.35;
}
.dr-atlas-node-dot{
position:absolute;
top:-6px;
left:12px;
width:10px;
height:10px;
border-radius:50%;
background:var(--dr-ci-gold);
box-shadow:0 0 14px rgba(201,168,76,0.34);
}
.dr-node-carthage{ top:88px; left:54px; }
.dr-node-kairouan{ top:96px; right:52px; animation-delay:.7s; }
.dr-node-dougga{ bottom:122px; left:90px; animation-delay:1.4s; }
.dr-node-sale{ bottom:86px; right:42px; animation-delay:2s; }
.dr-node-murad{ top:226px; left:50%; transform:translateX(-50%); animation-delay:1.1s; }
@keyframes drAtlasFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-8px); }
}
.dr-node-murad{
animation-name:drAtlasFloatCenter;
}
@keyframes drAtlasFloatCenter{
0%,100%{ transform:translateX(-50%) translateY(0); }
50%{ transform:translateX(-50%) translateY(-8px); }
}
.dr-atlas-tags{
position:absolute;
left:24px;
right:24px;
bottom:84px;
z-index:3;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.dr-atlas-tags span{
display:inline-flex;
align-items:center;
padding:8px 11px;
border-radius:999px;
border:1px solid rgba(99,216,230,0.18);
background:rgba(10,22,40,0.34);
color:#d8ebf5;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:1.6px;
text-transform:uppercase;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.dr-atlas-tags span:nth-child(2n){
border-color:rgba(201,168,76,0.18);
color:#e6d7bf;
}
@media(max-width:680px){
.dr-atlas-node{
min-width:92px;
max-width:112px;
padding:8px 9px 8px;
}
.dr-atlas-node strong{
font-size:12px;
}
.dr-atlas-node em{
font-size:10px;
}
.dr-node-carthage{ top:72px; left:24px; }
.dr-node-kairouan{ top:74px; right:20px; }
.dr-node-dougga{ bottom:128px; left:30px; }
.dr-node-sale{ bottom:96px; right:18px; }
.dr-node-murad{ top:212px; }
.dr-atlas-tags{
left:16px;
right:16px;
bottom:78px;
gap:8px;
}
.dr-atlas-tags span{
font-size:9px;
padding:7px 9px;
}
}