/* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 1A Section Foundation • Variables • Header • Layout Rajat Adhikari ==========================================================*/ /*========================================================== ROOT VARIABLES ==========================================================*/ :root{ /* Primary Colors */ --ra-dbo-primary:#2563eb; --ra-dbo-primary-dark:#1d4ed8; --ra-dbo-primary-light:#60a5fa; /* Accent */ --ra-dbo-accent:#06b6d4; --ra-dbo-success:#22c55e; /* Background */ --ra-dbo-bg:#f8fafc; --ra-dbo-card:#ffffff; --ra-dbo-dark:#0f172a; --ra-dbo-light:#64748b; /* Borders */ --ra-dbo-border:#e2e8f0; /* Radius */ --ra-dbo-radius-xs:10px; --ra-dbo-radius-sm:16px; --ra-dbo-radius-md:22px; --ra-dbo-radius-lg:30px; /* Shadow */ --ra-dbo-shadow-sm: 0 8px 20px rgba(15,23,42,.05); --ra-dbo-shadow-md: 0 18px 45px rgba(15,23,42,.10); --ra-dbo-shadow-lg: 0 35px 80px rgba(15,23,42,.15); /* Transition */ --ra-dbo-transition: all .35s ease; /* Width */ --ra-dbo-max-width:1350px; } /*========================================================== SECTION ==========================================================*/ .ra-dbo-section{ position:relative; width:100%; overflow:hidden; padding:120px 24px; background: linear-gradient( 180deg, #ffffff 0%, #f8fbff 40%, #f1f5f9 100% ); isolation:isolate; } /* Decorative Background */ .ra-dbo-section::before{ content:""; position:absolute; width:520px; height:520px; top:-220px; right:-160px; border-radius:50%; background: radial-gradient( circle, rgba(37,99,235,.08), transparent 72% ); filter:blur(20px); pointer-events:none; } .ra-dbo-section::after{ content:""; position:absolute; width:420px; height:420px; bottom:-180px; left:-160px; border-radius:50%; background: radial-gradient( circle, rgba(6,182,212,.08), transparent 72% ); filter:blur(20px); pointer-events:none; } /*========================================================== MAIN CONTAINER ==========================================================*/ .ra-dbo-container{ position:relative; width:100%; max-width:var(--ra-dbo-max-width); margin:auto; z-index:2; } /*========================================================== HEADER ==========================================================*/ .ra-dbo-header{ text-align:center; max-width:900px; margin:0 auto 80px; opacity:0; transform: translateY(60px); transition: opacity .8s ease, transform .8s ease; } /* Reveal Animation */ .ra-dbo-header.ra-dbo-visible{ opacity:1; transform: translateY(0); } /*========================================================== TAG ==========================================================*/ .ra-dbo-tag{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 22px; margin-bottom:26px; border-radius:100px; background: linear-gradient( 135deg, rgba(37,99,235,.12), rgba(6,182,212,.12) ); color:var(--ra-dbo-primary); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; border: 1px solid rgba(37,99,235,.18); backdrop-filter:blur(12px); transition: var(--ra-dbo-transition); } .ra-dbo-tag:hover{ transform: translateY(-3px); box-shadow: 0 10px 25px rgba(37,99,235,.12); } /*========================================================== TITLE ==========================================================*/ .ra-dbo-title{ margin:0; font-size:clamp( 2.3rem, 5vw, 3.9rem ); line-height:1.15; font-weight:800; color:var(--ra-dbo-dark); letter-spacing:-1px; } .ra-dbo-title span{ color:var(--ra-dbo-primary); } /*========================================================== INTRODUCTION ==========================================================*/ .ra-dbo-introduction{ margin:28px auto 0; max-width:760px; font-size:1.08rem; line-height:1.9; color:var(--ra-dbo-light); } /*========================================================== FRAMEWORK LAYOUT ==========================================================*/ .ra-dbo-framework{ display:grid; grid-template-columns: 360px minmax(0,1fr); gap:42px; align-items:start; } /*========================================================== LEFT WRAPPER ==========================================================*/ .ra-dbo-navigation-wrapper{ position:sticky; top:110px; align-self:start; opacity:0; transform: translateX(-50px); transition: opacity .8s ease, transform .8s ease; } .ra-dbo-navigation-wrapper.ra-dbo-visible{ opacity:1; transform: translateX(0); } /*========================================================== RIGHT WRAPPER ==========================================================*/ .ra-dbo-content-wrapper{ position:relative; min-height:720px; } /*========================================================== SMOOTH SCROLLING ==========================================================*/ html{ scroll-behavior:smooth; } /*========================================================== GLOBAL TRANSITIONS ==========================================================*/ .ra-dbo-section *{ box-sizing:border-box; } /*========================================================== LARGE DESKTOP ==========================================================*/ @media (min-width:1600px){ .ra-dbo-container{ max-width:1500px; } .ra-dbo-framework{ grid-template-columns: 390px minmax(0,1fr); gap:60px; } } /*========================================================== LAPTOP ==========================================================*/ @media (max-width:1280px){ .ra-dbo-framework{ grid-template-columns: 320px minmax(0,1fr); gap:34px; } } /*========================================================== TABLET ==========================================================*/ @media (max-width:992px){ .ra-dbo-section{ padding:90px 20px; } .ra-dbo-framework{ grid-template-columns:1fr; gap:35px; } .ra-dbo-navigation-wrapper{ position:relative; top:auto; } .ra-dbo-content-wrapper{ min-height:auto; } } /*========================================================== MOBILE ==========================================================*/ @media (max-width:768px){ .ra-dbo-header{ margin-bottom:50px; } .ra-dbo-title{ font-size:2.2rem; } .ra-dbo-introduction{ font-size:1rem; line-height:1.8; } } /*========================================================== SMALL MOBILE ==========================================================*/ @media (max-width:480px){ .ra-dbo-section{ padding:70px 16px; } .ra-dbo-tag{ font-size:.72rem; letter-spacing:1.2px; } .ra-dbo-title{ font-size:1.9rem; } } /* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 1B Premium Navigation Rajat Adhikari ==========================================================*/ /*========================================================== LEFT NAVIGATION PANEL ==========================================================*/ .ra-dbo-navigation{ position:relative; display:flex; flex-direction:column; gap:18px; padding:26px; border-radius:32px; background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(248,250,252,.96) ); border:1px solid rgba(37,99,235,.08); box-shadow: 0 20px 60px rgba(15,23,42,.08); backdrop-filter:blur(20px); overflow:hidden; } /* Decorative Glow */ .ra-dbo-navigation::before{ content:""; position:absolute; top:-120px; right:-120px; width:260px; height:260px; border-radius:50%; background: radial-gradient( circle, rgba(37,99,235,.12), transparent 72% ); pointer-events:none; } .ra-dbo-navigation::after{ content:""; position:absolute; bottom:-120px; left:-120px; width:240px; height:240px; border-radius:50%; background: radial-gradient( circle, rgba(6,182,212,.10), transparent 72% ); pointer-events:none; } /*========================================================== NAVIGATION BUTTON ==========================================================*/ .ra-dbo-nav-item{ position:relative; display:flex; align-items:center; gap:18px; width:100%; padding:18px 22px; border:none; outline:none; border-radius:22px; background:#ffffff; cursor:pointer; text-align:left; overflow:hidden; transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease; border:1px solid rgba(37,99,235,.08); box-shadow: 0 10px 24px rgba(15,23,42,.04); } /*========================================================== LEFT ACCENT BAR ==========================================================*/ .ra-dbo-nav-item::before{ content:""; position:absolute; top:0; left:0; width:5px; height:0; border-radius:50px; background: linear-gradient( 180deg, #2563eb, #06b6d4 ); transition:height .35s ease; } /*========================================================== HOVER LIGHT EFFECT ==========================================================*/ .ra-dbo-nav-item::after{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(37,99,235,.06), rgba(6,182,212,.05) ); opacity:0; transition:opacity .35s ease; pointer-events:none; } /*========================================================== NUMBER BADGE ==========================================================*/ .ra-dbo-number{ position:relative; z-index:2; width:52px; height:52px; min-width:52px; display:flex; align-items:center; justify-content:center; border-radius:16px; background: linear-gradient( 135deg, #eff6ff, #ffffff ); color:#2563eb; font-size:15px; font-weight:800; transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease; border:1px solid rgba(37,99,235,.08); } /*========================================================== NAVIGATION TEXT ==========================================================*/ .ra-dbo-nav-text{ position:relative; z-index:2; flex:1; font-size:16px; font-weight:700; line-height:1.6; color:#0f172a; transition: color .35s ease, transform .35s ease; } /*========================================================== HOVER EFFECT ==========================================================*/ .ra-dbo-nav-item:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(37,99,235,.12); border-color: rgba(37,99,235,.18); } .ra-dbo-nav-item:hover::before{ height:100%; } .ra-dbo-nav-item:hover::after{ opacity:1; } .ra-dbo-nav-item:hover .ra-dbo-number{ transform: rotate(-8deg) scale(1.08); background: linear-gradient( 135deg, #2563eb, #3b82f6 ); color:#ffffff; box-shadow: 0 10px 25px rgba(37,99,235,.30); } .ra-dbo-nav-item:hover .ra-dbo-nav-text{ color:#2563eb; transform: translateX(4px); } /*========================================================== CLICK EFFECT ==========================================================*/ .ra-dbo-nav-item:active{ transform: scale(.97); } /*========================================================== ACTIVE STATE ==========================================================*/ .ra-dbo-nav-item.active{ background: linear-gradient( 135deg, #2563eb, #3b82f6 ); color:#ffffff; border-color:transparent; box-shadow: 0 20px 45px rgba(37,99,235,.28); } .ra-dbo-nav-item.active::before{ height:100%; background:#ffffff; } .ra-dbo-nav-item.active::after{ opacity:.08; } .ra-dbo-nav-item.active .ra-dbo-number{ background:#ffffff; color:#2563eb; transform:scale(1.08); } .ra-dbo-nav-item.active .ra-dbo-nav-text{ color:#ffffff; } /*========================================================== KEYBOARD ACCESSIBILITY ==========================================================*/ .ra-dbo-nav-item:focus-visible{ outline:3px solid rgba(37,99,235,.25); outline-offset:5px; } /*========================================================== SUBTLE FLOAT ANIMATION ==========================================================*/ @keyframes raDboFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } 100%{ transform:translateY(0); } } .ra-dbo-nav-item.active .ra-dbo-number{ animation: raDboFloat 3s ease-in-out infinite; } /*========================================================== GLOW PULSE ==========================================================*/ @keyframes raDboGlow{ 0%{ box-shadow: 0 0 0 rgba(37,99,235,0); } 50%{ box-shadow: 0 0 22px rgba(37,99,235,.30); } 100%{ box-shadow: 0 0 0 rgba(37,99,235,0); } } .ra-dbo-nav-item.active{ animation: raDboGlow 3s infinite; } /*========================================================== LARGE DESKTOP ==========================================================*/ @media (min-width:1600px){ .ra-dbo-nav-item{ padding:22px 24px; } .ra-dbo-nav-text{ font-size:17px; } } /*========================================================== 1366px LAPTOP ==========================================================*/ @media (max-width:1366px){ .ra-dbo-navigation{ padding:22px; } } /*========================================================== 1280px ==========================================================*/ @media (max-width:1280px){ .ra-dbo-nav-item{ padding:16px 18px; gap:16px; } .ra-dbo-number{ width:48px; height:48px; min-width:48px; } } /*========================================================== 1024px FIX ==========================================================*/ @media (max-width:1024px){ .ra-dbo-navigation{ padding:20px; gap:14px; } .ra-dbo-nav-text{ font-size:15px; } } /*========================================================== TABLET ==========================================================*/ @media (max-width:992px){ .ra-dbo-navigation{ flex-direction:row; overflow-x:auto; overflow-y:hidden; gap:16px; padding:18px; scrollbar-width:none; } .ra-dbo-navigation::-webkit-scrollbar{ display:none; } .ra-dbo-nav-item{ min-width:280px; flex-shrink:0; } } /*========================================================== 768px ==========================================================*/ @media (max-width:768px){ .ra-dbo-nav-item{ min-width:250px; } } /*========================================================== 480px ==========================================================*/ @media (max-width:480px){ .ra-dbo-navigation{ padding:14px; } .ra-dbo-nav-item{ min-width:220px; padding:15px; } .ra-dbo-number{ width:42px; height:42px; min-width:42px; font-size:13px; } .ra-dbo-nav-text{ font-size:14px; } } /* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 1C Content Cards • Progress Bar • Animations Rajat Adhikari ==========================================================*/ /*========================================================== RIGHT CONTENT WRAPPER ==========================================================*/ .ra-dbo-content-wrapper{ position:relative; display:flex; flex-direction:column; justify-content:flex-start; min-height:720px; } /*========================================================== CONTENT CARD ==========================================================*/ .ra-dbo-content-card{ position:relative; display:none; opacity:0; transform: translateY(35px) scale(.96); padding:50px; border-radius:32px; background: linear-gradient( 180deg, rgba(255,255,255,.98), rgba(248,250,252,.98) ); border:1px solid rgba(37,99,235,.08); box-shadow: 0 25px 70px rgba(15,23,42,.08); overflow:hidden; transition: opacity .55s ease, transform .55s ease, box-shadow .35s ease; } /*========================================================== BACKGROUND EFFECT ==========================================================*/ .ra-dbo-content-card::before{ content:""; position:absolute; top:-120px; right:-120px; width:260px; height:260px; border-radius:50%; background: radial-gradient( circle, rgba(37,99,235,.08), transparent 72% ); pointer-events:none; } .ra-dbo-content-card::after{ content:""; position:absolute; left:0; top:0; width:100%; height:6px; background: linear-gradient( 90deg, #2563eb, #06b6d4 ); } /*========================================================== ACTIVE CONTENT ==========================================================*/ .ra-dbo-content-card.active{ display:block; opacity:1; transform: translateY(0) scale(1); animation: raDboCardEntrance .55s ease; } /*========================================================== CARD HOVER ==========================================================*/ .ra-dbo-content-card:hover{ transform: translateY(-8px); box-shadow: 0 35px 90px rgba(15,23,42,.12); } /*========================================================== ICON BOX ==========================================================*/ .ra-dbo-icon-box{ width:90px; height:90px; display:flex; align-items:center; justify-content:center; margin-bottom:28px; border-radius:24px; font-size:42px; background: linear-gradient( 135deg, #2563eb, #06b6d4 ); color:#ffffff; box-shadow: 0 20px 45px rgba(37,99,235,.28); transition: transform .35s ease; } .ra-dbo-content-card:hover .ra-dbo-icon-box{ transform: rotate(-6deg) scale(1.08); } /*========================================================== TITLE ==========================================================*/ .ra-dbo-content-title{ margin:0 0 20px; font-size:2rem; font-weight:800; line-height:1.3; color:#0f172a; } /*========================================================== TEXT ==========================================================*/ .ra-dbo-content-text{ margin:0; font-size:1.08rem; line-height:1.9; color:#64748b; } /*========================================================== BENEFITS ==========================================================*/ .ra-dbo-benefits{ margin:35px 0 0; padding:0; list-style:none; display:grid; gap:18px; } .ra-dbo-benefits li{ position:relative; padding-left:34px; color:#334155; font-size:1rem; font-weight:500; line-height:1.7; transition: transform .35s ease, color .35s ease; } /*========================================================== CHECK ICON ==========================================================*/ .ra-dbo-benefits li::before{ content:"✓"; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient( 135deg, #2563eb, #06b6d4 ); color:#ffffff; font-size:.72rem; font-weight:700; } .ra-dbo-benefits li:hover{ transform: translateX(8px); color:#2563eb; } /*========================================================== PROGRESS SECTION ==========================================================*/ .ra-dbo-progress{ margin-top:35px; display:flex; flex-direction:column; gap:15px; } /*========================================================== PROGRESS TEXT ==========================================================*/ .ra-dbo-progress-text{ font-size:.95rem; font-weight:700; color:#2563eb; } /*========================================================== PROGRESS LINE ==========================================================*/ .ra-dbo-progress-line{ position:relative; width:100%; height:10px; border-radius:30px; overflow:hidden; background:#e2e8f0; } /*========================================================== PROGRESS FILL ==========================================================*/ .ra-dbo-progress-fill{ position:absolute; left:0; top:0; height:100%; width:16.6%; border-radius:30px; background: linear-gradient( 90deg, #2563eb, #06b6d4 ); transition: width .55s ease; } /*========================================================== SCROLL REVEAL ==========================================================*/ .ra-dbo-content-card{ opacity:0; } .ra-dbo-content-card.ra-dbo-visible{ opacity:1; } /*========================================================== CARD ENTRANCE ==========================================================*/ @keyframes raDboCardEntrance{ from{ opacity:0; transform: translateY(35px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } } /*========================================================== ICON FLOAT ==========================================================*/ @keyframes raDboIconFloat{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } 100%{ transform: translateY(0); } } .ra-dbo-icon-box{ animation: raDboIconFloat 4s ease-in-out infinite; } /*========================================================== PROGRESS SHINE ==========================================================*/ .ra-dbo-progress-fill::after{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.6), transparent ); animation: raDboProgressShine 3s linear infinite; } @keyframes raDboProgressShine{ from{ left:-60%; } to{ left:120%; } } /*========================================================== LARGE DESKTOP ==========================================================*/ @media (min-width:1600px){ .ra-dbo-content-card{ padding:65px; } } /*========================================================== 1366px ==========================================================*/ @media (max-width:1366px){ .ra-dbo-content-card{ padding:45px; } } /*========================================================== 1280px ==========================================================*/ @media (max-width:1280px){ .ra-dbo-content-title{ font-size:1.8rem; } } /*========================================================== 1024px ==========================================================*/ @media (max-width:1024px){ .ra-dbo-content-card{ padding:40px; } } /*========================================================== TABLET ==========================================================*/ @media (max-width:992px){ .ra-dbo-content-wrapper{ min-height:auto; } } /*========================================================== 768px ==========================================================*/ @media (max-width:768px){ .ra-dbo-content-card{ padding:32px; } .ra-dbo-content-title{ font-size:1.6rem; } .ra-dbo-content-text{ font-size:1rem; } .ra-dbo-icon-box{ width:72px; height:72px; font-size:34px; } } /*========================================================== 576px ==========================================================*/ @media (max-width:576px){ .ra-dbo-content-card{ border-radius:24px; padding:26px; } } /*========================================================== 480px ==========================================================*/ @media (max-width:480px){ .ra-dbo-content-card{ padding:22px; } .ra-dbo-content-title{ font-size:1.4rem; } .ra-dbo-benefits{ gap:14px; } .ra-dbo-benefits li{ font-size:.95rem; } } /*========================================================== 360px ==========================================================*/ @media (max-width:360px){ .ra-dbo-content-card{ padding:18px; } .ra-dbo-icon-box{ width:64px; height:64px; font-size:28px; } } /* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 2A Advanced Responsive Optimization Desktop • Laptop • Tablet Rajat Adhikari ==========================================================*/ /*========================================================== DESKTOP ENHANCEMENTS ==========================================================*/ @media (min-width:1441px){ .ra-dbo-framework{ align-items:flex-start; gap:70px; } .ra-dbo-navigation{ padding:30px; } .ra-dbo-content-card{ min-height:700px; } } /*========================================================== 1440px ==========================================================*/ @media (max-width:1440px){ .ra-dbo-framework{ grid-template-columns: 340px minmax(0,1fr); gap:40px; } } /*========================================================== 1366px LAPTOP ==========================================================*/ @media (max-width:1366px){ .ra-dbo-section{ padding:100px 24px; } .ra-dbo-framework{ grid-template-columns: 320px minmax(0,1fr); gap:35px; } .ra-dbo-navigation{ padding:22px; } .ra-dbo-content-card{ padding:42px; } } /*========================================================== 1280px LAPTOP ==========================================================*/ @media (max-width:1280px){ .ra-dbo-framework{ grid-template-columns: 300px minmax(0,1fr); } .ra-dbo-title{ font-size:3rem; } } /*========================================================== 1200px ==========================================================*/ @media (max-width:1200px){ .ra-dbo-framework{ gap:28px; } .ra-dbo-content-card{ padding:36px; } } /*========================================================== IMPORTANT FIX 1024 × 768 ==========================================================*/ @media (max-width:1024px){ .ra-dbo-section{ padding:80px 18px; } .ra-dbo-framework{ grid-template-columns: 280px minmax(0,1fr); gap:24px; } .ra-dbo-navigation-wrapper{ top:90px; } .ra-dbo-navigation{ gap:12px; padding:18px; } .ra-dbo-nav-item{ padding:15px; } .ra-dbo-content-card{ padding:34px; } } /*========================================================== SPECIAL FIX 1024 × 600 ==========================================================*/ @media screen and (max-width:1024px) and (max-height:600px){ .ra-dbo-section{ padding:60px 20px; } .ra-dbo-framework{ align-items:flex-start; } .ra-dbo-navigation-wrapper{ position:sticky; top:20px; } .ra-dbo-navigation{ max-height:520px; overflow-y:auto; padding:16px; } .ra-dbo-navigation::-webkit-scrollbar{ width:6px; } .ra-dbo-navigation::-webkit-scrollbar-thumb{ background:#2563eb; border-radius:20px; } .ra-dbo-content-card{ min-height:auto; } } /*========================================================== 992px ==========================================================*/ @media (max-width:992px){ .ra-dbo-framework{ display:flex; flex-direction:column; gap:35px; } .ra-dbo-navigation-wrapper{ width:100%; } .ra-dbo-navigation{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:8px; } .ra-dbo-nav-item{ scroll-snap-align:start; min-width:280px; flex:0 0 auto; } } /*========================================================== 900px ==========================================================*/ @media (max-width:900px){ .ra-dbo-content-card{ padding:30px; } } /*========================================================== 850px ==========================================================*/ @media (max-width:850px){ .ra-dbo-title{ font-size:2.5rem; } } /*========================================================== 768px ==========================================================*/ @media (max-width:768px){ .ra-dbo-header{ margin-bottom:45px; } .ra-dbo-framework{ gap:28px; } .ra-dbo-navigation{ border-radius:22px; } .ra-dbo-nav-item{ min-width:250px; } } /*========================================================== LANDSCAPE TABLETS ==========================================================*/ @media screen and (max-width:932px) and (orientation:landscape){ .ra-dbo-section{ padding:55px 18px; } .ra-dbo-header{ margin-bottom:35px; } } /*========================================================== ANIMATION PERFORMANCE ==========================================================*/ .ra-dbo-nav-item, .ra-dbo-content-card, .ra-dbo-number, .ra-dbo-icon-box, .ra-dbo-progress-fill{ will-change: transform, opacity; } /*========================================================== SMOOTH SCROLL ==========================================================*/ .ra-dbo-navigation{ scroll-behavior:smooth; } /*========================================================== REDUCE MOTION ==========================================================*/ @media (prefers-reduced-motion:reduce){ .ra-dbo-nav-item, .ra-dbo-content-card, .ra-dbo-progress-fill, .ra-dbo-icon-box, .ra-dbo-number{ transition:none !important; animation:none !important; transform:none !important; } } /*========================================================== HOVER DEVICES ONLY ==========================================================*/ @media (hover:hover){ .ra-dbo-nav-item:hover{ z-index:5; } .ra-dbo-content-card:hover{ z-index:2; } } /*========================================================== TOUCH DEVICES ==========================================================*/ @media (hover:none){ .ra-dbo-nav-item:hover{ transform:none; } .ra-dbo-content-card:hover{ transform:none; } } /*========================================================== IMAGE & EMOJI OPTIMIZATION ==========================================================*/ .ra-dbo-icon-box span{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:1; } /*========================================================== TEXT WRAPPING ==========================================================*/ .ra-dbo-title, .ra-dbo-content-title, .ra-dbo-nav-text{ overflow-wrap:break-word; word-break:normal; } /*========================================================== GPU RENDERING ==========================================================*/ .ra-dbo-navigation, .ra-dbo-content-card{ transform:translateZ(0); backface-visibility:hidden; } /* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 2B Mobile First Optimization 768px → 320px Rajat Adhikari ==========================================================*/ /*========================================================== 768px TABLETS ==========================================================*/ @media (max-width:768px){ .ra-dbo-section{ padding:80px 18px; } .ra-dbo-framework{ display:flex; flex-direction:column; gap:32px; } .ra-dbo-navigation-wrapper{ width:100%; position:relative; top:auto; } .ra-dbo-navigation{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:14px; padding:16px; border-radius:24px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .ra-dbo-navigation::-webkit-scrollbar{ display:none; } .ra-dbo-nav-item{ flex:0 0 260px; min-height:90px; scroll-snap-align:start; } .ra-dbo-content-wrapper{ width:100%; min-height:auto; } .ra-dbo-content-card{ padding:30px; border-radius:24px; } .ra-dbo-title{ font-size:2.3rem; } .ra-dbo-content-title{ font-size:1.7rem; } } /*========================================================== 640px ==========================================================*/ @media (max-width:640px){ .ra-dbo-section{ padding:70px 18px; } .ra-dbo-header{ margin-bottom:40px; } .ra-dbo-tag{ font-size:.72rem; } .ra-dbo-title{ font-size:2rem; } .ra-dbo-introduction{ font-size:1rem; line-height:1.8; } .ra-dbo-nav-item{ flex:0 0 235px; } .ra-dbo-content-card{ padding:26px; } } /*========================================================== 576px ==========================================================*/ @media (max-width:576px){ .ra-dbo-section{ padding:65px 16px; } .ra-dbo-navigation{ padding:14px; gap:12px; } .ra-dbo-nav-item{ flex:0 0 220px; padding:16px; gap:14px; } .ra-dbo-number{ width:46px; height:46px; min-width:46px; font-size:14px; } .ra-dbo-nav-text{ font-size:14px; line-height:1.5; } .ra-dbo-content-card{ padding:24px; } .ra-dbo-icon-box{ width:68px; height:68px; font-size:30px; } .ra-dbo-benefits{ gap:14px; } } /*========================================================== 480px ==========================================================*/ @media (max-width:480px){ .ra-dbo-section{ padding:60px 15px; } .ra-dbo-header{ margin-bottom:35px; } .ra-dbo-title{ font-size:1.85rem; line-height:1.25; } .ra-dbo-introduction{ font-size:.97rem; } .ra-dbo-navigation{ padding:12px; } .ra-dbo-nav-item{ flex:0 0 210px; min-height:82px; border-radius:18px; } .ra-dbo-number{ width:42px; height:42px; min-width:42px; border-radius:14px; } .ra-dbo-content-card{ padding:22px; } .ra-dbo-content-title{ font-size:1.45rem; } .ra-dbo-content-text{ font-size:.97rem; line-height:1.8; } .ra-dbo-benefits li{ font-size:.94rem; } } /*========================================================== 430px ==========================================================*/ @media (max-width:430px){ .ra-dbo-nav-item{ flex:0 0 195px; } .ra-dbo-title{ font-size:1.7rem; } } /*========================================================== 390px ==========================================================*/ @media (max-width:390px){ .ra-dbo-section{ padding:55px 14px; } .ra-dbo-navigation{ gap:10px; } .ra-dbo-nav-item{ flex:0 0 185px; padding:14px; } .ra-dbo-number{ width:40px; height:40px; min-width:40px; font-size:13px; } .ra-dbo-nav-text{ font-size:13px; } .ra-dbo-content-card{ padding:20px; } .ra-dbo-icon-box{ width:60px; height:60px; font-size:26px; } } /*========================================================== 360px ==========================================================*/ @media (max-width:360px){ .ra-dbo-title{ font-size:1.55rem; } .ra-dbo-introduction{ font-size:.92rem; } .ra-dbo-nav-item{ flex:0 0 175px; min-height:76px; } .ra-dbo-content-title{ font-size:1.3rem; } .ra-dbo-content-text{ font-size:.92rem; } .ra-dbo-benefits li{ font-size:.88rem; padding-left:30px; } } /*========================================================== 320px ==========================================================*/ @media (max-width:320px){ .ra-dbo-section{ padding:50px 12px; } .ra-dbo-tag{ padding:8px 14px; font-size:.65rem; } .ra-dbo-title{ font-size:1.4rem; } .ra-dbo-navigation{ padding:10px; } .ra-dbo-nav-item{ flex:0 0 165px; padding:12px; } .ra-dbo-number{ width:36px; height:36px; min-width:36px; font-size:12px; } .ra-dbo-nav-text{ font-size:12px; } .ra-dbo-content-card{ padding:18px; border-radius:20px; } .ra-dbo-icon-box{ width:54px; height:54px; font-size:22px; margin-bottom:20px; } .ra-dbo-content-title{ font-size:1.2rem; } .ra-dbo-content-text{ font-size:.88rem; } .ra-dbo-benefits{ gap:12px; } .ra-dbo-benefits li{ font-size:.84rem; } } /*========================================================== TOUCH IMPROVEMENTS ==========================================================*/ @media (pointer:coarse){ .ra-dbo-nav-item{ min-height:82px; touch-action:manipulation; } .ra-dbo-nav-item:active{ transform:scale(.97); } } /*========================================================== SAFE AREA SUPPORT ==========================================================*/ @supports(padding:max(0px)){ .ra-dbo-section{ padding-left: max(16px,env(safe-area-inset-left)); padding-right: max(16px,env(safe-area-inset-right)); } } /*========================================================== MOBILE PERFORMANCE ==========================================================*/ @media (max-width:768px){ .ra-dbo-navigation, .ra-dbo-content-card, .ra-dbo-nav-item{ transform:translateZ(0); backface-visibility:hidden; -webkit-font-smoothing:antialiased; } } /*========================================================== SMOOTH MOMENTUM SCROLLING ==========================================================*/ .ra-dbo-navigation{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } /*========================================================== LAST MOBILE POLISH ==========================================================*/ .ra-dbo-content-card{ word-break:normal; overflow-wrap:break-word; } .ra-dbo-content-text, .ra-dbo-benefits li{ text-wrap:pretty; } /* ========================================================== Digital Branding & Online Presence Advanced Responsive CSS Part 3 Premium Effects • Accessibility • Performance Rajat Adhikari ==========================================================*/ /*========================================================== CONTENT FADE ANIMATION ==========================================================*/ .ra-dbo-content-card{ animation: raDboContentFade .65s cubic-bezier(.22,.61,.36,1); } @keyframes raDboContentFade{ 0%{ opacity:0; transform: translateY(40px) scale(.96); filter:blur(10px); } 100%{ opacity:1; transform: translateY(0) scale(1); filter:blur(0); } } /*========================================================== HEADING ANIMATION ==========================================================*/ .ra-dbo-content-title{ animation: raDboHeading .8s ease; } @keyframes raDboHeading{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform: translateY(0); } } /*========================================================== PARAGRAPH ANIMATION ==========================================================*/ .ra-dbo-content-text{ animation: raDboParagraph .9s ease; } @keyframes raDboParagraph{ from{ opacity:0; transform: translateY(25px); } to{ opacity:1; transform: translateY(0); } } /*========================================================== BENEFIT STAGGER ==========================================================*/ .ra-dbo-benefits li{ opacity:0; animation: raDboBenefit .5s forwards; } .ra-dbo-benefits li:nth-child(1){ animation-delay:.15s; } .ra-dbo-benefits li:nth-child(2){ animation-delay:.30s; } .ra-dbo-benefits li:nth-child(3){ animation-delay:.45s; } @keyframes raDboBenefit{ from{ opacity:0; transform: translateX(-20px); } to{ opacity:1; transform: translateX(0); } } /*========================================================== ICON GLOW ==========================================================*/ .ra-dbo-icon-box{ position:relative; } .ra-dbo-icon-box::after{ content:""; position:absolute; inset:-8px; border-radius:inherit; background: radial-gradient( circle, rgba(37,99,235,.18), transparent 70% ); z-index:-1; animation: raDboIconGlow 3s ease infinite; } @keyframes raDboIconGlow{ 0%{ transform:scale(.95); opacity:.4; } 50%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(.95); opacity:.4; } } /*========================================================== PROGRESS BAR GLOW ==========================================================*/ .ra-dbo-progress-fill{ box-shadow: 0 0 18px rgba(37,99,235,.35); } /*========================================================== NUMBER BADGE PULSE ==========================================================*/ .ra-dbo-nav-item.active .ra-dbo-number{ position:relative; } .ra-dbo-nav-item.active .ra-dbo-number::after{ content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid rgba(37,99,235,.18); animation: raDboPulse 2.5s infinite; } @keyframes raDboPulse{ from{ opacity:1; transform:scale(.9); } to{ opacity:0; transform:scale(1.35); } } /*========================================================== CARD SHINE ==========================================================*/ .ra-dbo-content-card{ overflow:hidden; } .ra-dbo-content-card::before{ animation: raDboShimmer 7s linear infinite; } @keyframes raDboShimmer{ 0%{ transform: translateX(-200px); } 100%{ transform: translateX(200px); } } /*========================================================== SCROLLBAR ==========================================================*/ .ra-dbo-navigation::-webkit-scrollbar{ width:7px; height:7px; } .ra-dbo-navigation::-webkit-scrollbar-thumb{ background:#2563eb; border-radius:100px; } .ra-dbo-navigation::-webkit-scrollbar-track{ background:#edf2f7; } /*========================================================== SELECTION ==========================================================*/ .ra-dbo-section ::selection{ background:#2563eb; color:#ffffff; } /*========================================================== FOCUS STYLES ==========================================================*/ .ra-dbo-nav-item:focus-visible{ outline:3px solid #2563eb; outline-offset:5px; } .ra-dbo-content-card:focus-within{ box-shadow: 0 0 0 4px rgba(37,99,235,.18); } /*========================================================== SMOOTH LINKS ==========================================================*/ .ra-dbo-content-card a{ color:#2563eb; text-decoration:none; transition:.3s; } .ra-dbo-content-card a:hover{ color:#1d4ed8; } /*========================================================== HOVER DEVICES ==========================================================*/ @media (hover:hover){ .ra-dbo-content-card:hover{ border-color: rgba(37,99,235,.15); } } /*========================================================== REDUCED MOTION ==========================================================*/ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*========================================================== DARK MODE READY ==========================================================*/ @media (prefers-color-scheme:dark){ .ra-dbo-section{ background:#0f172a; } } /*========================================================== PRINT ==========================================================*/ @media print{ .ra-dbo-navigation{ display:none; } .ra-dbo-content-wrapper{ width:100%; } .ra-dbo-content-card{ display:block !important; opacity:1 !important; page-break-inside:avoid; margin-bottom:30px; box-shadow:none; } .ra-dbo-progress{ display:none; } } /*========================================================== GPU OPTIMIZATION ==========================================================*/ .ra-dbo-navigation, .ra-dbo-nav-item, .ra-dbo-content-card, .ra-dbo-icon-box, .ra-dbo-progress-fill{ will-change: transform, opacity; transform: translateZ(0); backface-visibility:hidden; } /*========================================================== ANTI FLICKER ==========================================================*/ .ra-dbo-content-card, .ra-dbo-navigation{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /*========================================================== FINAL POLISH ==========================================================*/ .ra-dbo-section{ isolation:isolate; } .ra-dbo-framework{ position:relative; z-index:2; } .ra-dbo-navigation{ position:relative; z-index:5; } .ra-dbo-content-card{ position:relative; z-index:2; } /*========================================================== END OF DIGITAL BRANDING CSS Version 3.0 Production Ready ==========================================================*/ /* ========================================== 1024 × 600 Laptop Fix ========================================== */ @media screen and (max-width:1024px) and (max-height:600px){ .ra-dbo-framework{ display:grid !important; grid-template-columns:280px minmax(0,1fr); align-items:start; gap:24px; } .ra-dbo-navigation-wrapper{ position:sticky; top:20px; align-self:start; height:calc(100vh - 40px); } .ra-dbo-navigation{ display:flex; flex-direction:column; height:100%; overflow-y:auto; overflow-x:hidden; padding-right:8px; scrollbar-width:thin; } .ra-dbo-nav-item{ flex:0 0 auto; } .ra-dbo-content-wrapper{ min-height:auto; } }