/* * AtlasMobile - UK Mobile & Broadband Help Blog * Comprehensive Static CSS Stylesheet * Production-ready,AdSense-friendly */ /* ========================================================================== 1. CSS Reset & Base Styles ========================================================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.6;color:#1a1a1a;background-color:#f8f9fa;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}input,button,textarea,select{font:inherit;color:inherit;}button{cursor:pointer;border:none;background:none;}a{color:inherit;text-decoration:none;}ul,ol{list-style:none;}table{border-collapse:collapse;width:100%;}/* ========================================================================== 2. CSS Custom Properties (Variables) ========================================================================== */:root{--color-primary:#0056a6;--color-primary-dark:#004085;--color-primary-light:#0070d4;--color-secondary:#6c757d;--color-secondary-dark:#5a6268;--color-secondary-light:#adb5bd;--color-text:#1a1a1a;--color-text-light:#555555;--color-text-muted:#6c757d;--color-bg:#f8f9fa;--color-bg-white:#ffffff;--color-bg-light:#e9ecef;--color-bg-dark:#333333;--color-bg-darker:#222222;--color-border:#dee2e6;--color-border-light:#e9ecef;--color-info:#17a2b8;--color-info-bg:#d1ecf1;--color-info-border:#bee5eb;--color-warning:#ffc107;--color-warning-bg:#fff3cd;--color-warning-border:#ffeeba;--color-success:#28a745;--color-success-bg:#d4edda;--color-success-border:#c3e6cb;--color-danger:#dc3545;--color-danger-bg:#f8d7da;--color-danger-border:#f5c6cb;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--container-max-width:1200px;--header-height:70px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px rgba(0,0,0,0.15);--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:350ms ease;--z-dropdown:100;--z-sticky:200;--z-header:300;--z-modal:400;--z-tooltip:500;}/* ========================================================================== 3. Typography ========================================================================== */ h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--color-text);margin-bottom:var(--spacing-md);}h1{font-size:var(--font-size-4xl);letter-spacing:-0.025em;}h2{font-size:var(--font-size-3xl);letter-spacing:-0.02em;}h3{font-size:var(--font-size-2xl);}h4{font-size:var(--font-size-xl);}h5{font-size:var(--font-size-lg);}h6{font-size:var(--font-size-base);}p{margin-bottom:var(--spacing-md);color:var(--color-text-light);}.lead{font-size:var(--font-size-lg);font-weight:400;color:var(--color-text-light);}.small{font-size:var(--font-size-sm);}.text-xs{font-size:var(--font-size-xs);}strong,b{font-weight:600;}a{color:var(--color-primary);transition:color var(--transition-fast);}a:hover{color:var(--color-primary-dark);text-decoration:underline;}/* ========================================================================== 4. Layout & Container ========================================================================== */ .container{width:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-md);}.container-narrow{max-width:800px;}.container-wide{max-width:1400px;}.row{display:flex;flex-wrap:wrap;margin:0 calc(-1 * var(--spacing-md));}.col{flex:1;padding:0 var(--spacing-md);}.col-12{flex:0 0 100%;max-width:100%;}.col-6{flex:0 0 50%;max-width:50%;}.col-4{flex:0 0 33.333%;max-width:33.333%;}.col-3{flex:0 0 25%;max-width:25%;}.col-8{flex:0 0 66.666%;max-width:66.666%;}.col-9{flex:0 0 75%;max-width:75%;}.flex{display:flex;}.flex-wrap{flex-wrap:wrap;}.flex-col{flex-direction:column;}.items-center{align-items:center;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.justify-end{justify-content:flex-end;}.gap-sm{gap:var(--spacing-sm);}.gap-md{gap:var(--spacing-md);}.gap-lg{gap:var(--spacing-lg);}.gap-xl{gap:var(--spacing-xl);}/* ========================================================================== 5. Header Component ========================================================================== */ .header{position:sticky;top:0;left:0;right:0;height:var(--header-height);background-color:var(--color-primary);color:#ffffff;z-index:var(--z-header);box-shadow:var(--shadow-md);}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-md);}.logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-xl);font-weight:700;color:#ffffff;text-decoration:none;}.logo:hover{color:#ffffff;text-decoration:none;}.logo-placeholder{width:40px;height:40px;background-color:rgba(255,255,255,0.2);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-lg);}/* ========================================================================== 6. Navigation ========================================================================== */ .nav{display:flex;align-items:center;gap:var(--spacing-xs);}.nav-list{display:flex;align-items:center;gap:var(--spacing-xs);}.nav-item{position:relative;}.nav-link{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);color:rgba(255,255,255,0.9);font-weight:500;border-radius:var(--radius-md);transition:background-color var(--transition-fast),color var(--transition-fast);white-space:nowrap;}.nav-link:hover{background-color:rgba(255,255,255,0.1);color:#ffffff;text-decoration:none;}.nav-link.active{background-color:rgba(255,255,255,0.15);color:#ffffff;}.nav-dropdown{position:absolute;top:100%;left:0;min-width:220px;background-color:var(--color-bg-white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--transition-normal);z-index:var(--z-dropdown);padding:var(--spacing-sm) 0;}.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);}.nav-dropdown-link{display:block;padding:var(--spacing-sm) var(--spacing-md);color:var(--color-text);font-weight:400;transition:background-color var(--transition-fast);}.nav-dropdown-link:hover{background-color:var(--color-bg-light);text-decoration:none;}.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;padding:var(--spacing-sm);cursor:pointer;background:transparent;border:none;}.hamburger-line{width:24px;height:2px;background-color:#ffffff;margin:3px 0;transition:all var(--transition-fast);border-radius:2px;}.hamburger.active .hamburger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px);}.hamburger.active .hamburger-line:nth-child(2){opacity:0;}.hamburger.active .hamburger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-6px);}.mobile-nav{display:none;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background-color:var(--color-bg-white);overflow-y:auto;z-index:var(--z-header);}.mobile-nav.active{display:block;}.mobile-nav-list{padding:var(--spacing-md);}.mobile-nav-link{display:block;padding:var(--spacing-md);color:var(--color-text);font-weight:500;border-bottom:1px solid var(--color-border-light);transition:background-color var(--transition-fast);}.mobile-nav-link:hover{background-color:var(--color-bg-light);text-decoration:none;}/* ========================================================================== 7. Cards ========================================================================== */ .card{background-color:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition-normal),transform var(--transition-normal);}.card:hover{box-shadow:var(--shadow-md);}.card-clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}.card-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-light);}.card-body{padding:var(--spacing-lg);}.card-footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border-light);background-color:var(--color-bg);}.card-title{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text);}.card-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--spacing-md);}.card-text{color:var(--color-text-light);line-height:1.6;}.card-image{width:100%;height:200px;object-fit:cover;}.card-image-placeholder{width:100%;height:200px;background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:600;}.card-horizontal{display:flex;}.card-horizontal .card-image{width:200px;min-width:200px;height:auto;min-height:150px;}.card-horizontal .card-body{flex:1;}/* ========================================================================== 8. Buttons ========================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);font-weight:500;line-height:1.5;text-align:center;white-space:nowrap;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;}.btn:hover{text-decoration:none;}.btn:disabled{opacity:0.65;cursor:not-allowed;}.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#ffffff;}.btn-primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#ffffff;}.btn-secondary{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#ffffff;}.btn-secondary:hover{background-color:var(--color-secondary-dark);border-color:var(--color-secondary-dark);color:#ffffff;}.btn-outline-primary{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary);}.btn-outline-primary:hover{background-color:var(--color-primary);color:#ffffff;}.btn-outline-secondary{background-color:transparent;border-color:var(--color-secondary);color:var(--color-secondary);}.btn-outline-secondary:hover{background-color:var(--color-secondary);color:#ffffff;}.btn-ghost{background-color:transparent;border-color:transparent;color:var(--color-primary);}.btn-ghost:hover{background-color:var(--color-bg-light);}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-lg);}.btn-block{width:100%;}.btn-group{display:inline-flex;}.btn-group .btn{border-radius:0;}.btn-group .btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md);}.btn-group .btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;}/* ========================================================================== 9. Footer ========================================================================== */ .footer{background-color:var(--color-bg-dark);color:#ffffff;padding:var(--spacing-3xl) 0 var(--spacing-xl);margin-top:auto;}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl);}.footer-section{min-width:0;}.footer-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);color:#ffffff;}.footer-list{display:flex;flex-direction:column;gap:var(--spacing-sm);}.footer-link{color:rgba(255,255,255,0.7);font-size:var(--font-size-sm);transition:color var(--transition-fast);}.footer-link:hover{color:#ffffff;text-decoration:none;}.footer-description{color:rgba(255,255,255,0.7);font-size:var(--font-size-sm);line-height:1.7;}.footer-bottom{padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);}.footer-copyright{color:rgba(255,255,255,0.6);font-size:var(--font-size-sm);}.footer-legal{display:flex;gap:var(--spacing-md);}.footer-legal-link{color:rgba(255,255,255,0.6);font-size:var(--font-size-sm);}.footer-legal-link:hover{color:#ffffff;}/* ========================================================================== 10. Badges ========================================================================== */ .badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs);font-weight:600;line-height:1;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.025em;white-space:nowrap;}.badge-primary{background-color:var(--color-primary);color:#ffffff;}.badge-secondary{background-color:var(--color-secondary);color:#ffffff;}.badge-success{background-color:var(--color-success);color:#ffffff;}.badge-warning{background-color:var(--color-warning);color:#1a1a1a;}.badge-danger{background-color:var(--color-danger);color:#ffffff;}.badge-info{background-color:var(--color-info);color:#ffffff;}.badge-light{background-color:var(--color-bg-light);color:var(--color-text);}.badge-dark{background-color:var(--color-bg-dark);color:#ffffff;}.badge-outline-primary{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary);}.badge-outline-secondary{background-color:transparent;border:1px solid var(--color-secondary);color:var(--color-secondary);}/* ========================================================================== 11. Accordion / FAQ ========================================================================== */ .accordion{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}.accordion-item{border-bottom:1px solid var(--color-border);}.accordion-item:last-child{border-bottom:none;}.accordion-header{margin:0;}.accordion-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-base);font-weight:600;text-align:left;color:var(--color-text);background-color:var(--color-bg-white);border:none;cursor:pointer;transition:background-color var(--transition-fast);}.accordion-button:hover{background-color:var(--color-bg);}.accordion-button::after{content:'+';font-size:var(--font-size-xl);font-weight:400;color:var(--color-text-muted);transition:transform var(--transition-fast);}.accordion-button[aria-expanded="true"]::after,.accordion-item.active .accordion-button::after{content:'−';}.accordion-collapse{display:none;overflow:hidden;}.accordion-item.active .accordion-collapse,.accordion-collapse.show{display:block;}.accordion-body{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);color:var(--color-text-light);background-color:var(--color-bg-white);}.faq-section{margin-bottom:var(--spacing-2xl);}.faq-title{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-lg);}/* ========================================================================== 12. Breadcrumbs ========================================================================== */ .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;padding:var(--spacing-md) 0;margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);}.breadcrumb-item{display:flex;align-items:center;color:var(--color-text-muted);}.breadcrumb-item + .breadcrumb-item::before{content:'/';padding:0 var(--spacing-sm);color:var(--color-text-muted);}.breadcrumb-item a{color:var(--color-primary);transition:color var(--transition-fast);}.breadcrumb-item a:hover{color:var(--color-primary-dark);text-decoration:underline;}.breadcrumb-item.active{color:var(--color-text);}/* ========================================================================== 13. Tables ========================================================================== */ .table{width:100%;margin-bottom:var(--spacing-lg);border-collapse:collapse;background-color:var(--color-bg-white);}.table th,.table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border);vertical-align:top;}.table th{font-weight:600;color:var(--color-text);background-color:var(--color-bg);}.table td{color:var(--color-text-light);}.table-striped tbody tr:nth-child(even){background-color:var(--color-bg);}.table-hover tbody tr:hover{background-color:var(--color-bg-light);}.table-bordered{border:1px solid var(--color-border);}.table-bordered th,.table-bordered td{border:1px solid var(--color-border);}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}.table-comparison th:first-child,.table-comparison td:first-child{font-weight:600;background-color:var(--color-bg);}.table-comparison .check{color:var(--color-success);}.table-comparison .cross{color:var(--color-danger);}/* ========================================================================== 14. Alert / Notice Boxes ========================================================================== */ .alert{position:relative;padding:var(--spacing-md) var(--spacing-lg);margin-bottom:var(--spacing-md);border:1px solid transparent;border-radius:var(--radius-md);border-left-width:4px;}.alert-info{background-color:var(--color-info-bg);border-color:var(--color-info-border);border-left-color:var(--color-info);color:#0c5460;}.alert-warning{background-color:var(--color-warning-bg);border-color:var(--color-warning-border);border-left-color:var(--color-warning);color:#856404;}.alert-success{background-color:var(--color-success-bg);border-color:var(--color-success-border);border-left-color:var(--color-success);color:#155724;}.alert-danger{background-color:var(--color-danger-bg);border-color:var(--color-danger-border);border-left-color:var(--color-danger);color:#721c24;}.alert-title{font-weight:600;margin-bottom:var(--spacing-xs);}.alert-text{margin:0;font-size:var(--font-size-sm);}.alert-icon{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);}.alert.has-icon{padding-left:calc(var(--spacing-lg) + 24px);}.notice{padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border-radius:var(--radius-md);background-color:var(--color-bg);border-left:4px solid var(--color-primary);}.notice-info{border-left-color:var(--color-info);}.notice-warning{border-left-color:var(--color-warning);background-color:var(--color-warning-bg);}.notice-title{font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text);}.notice-text{color:var(--color-text-light);margin:0;}/* ========================================================================== 15. Forms ========================================================================== */ .form-group{margin-bottom:var(--spacing-md);}.form-label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--color-text);}.form-input,.form-select,.form-textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);line-height:1.5;color:var(--color-text);background-color:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,86,166,0.1);}.form-input::placeholder{color:var(--color-text-muted);}.form-textarea{resize:vertical;min-height:120px;}.form-help{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--spacing-xs);}/* ========================================================================== 16. Utility Classes ========================================================================== */ .m-0{margin:0;}.m-1{margin:var(--spacing-xs);}.m-2{margin:var(--spacing-sm);}.m-3{margin:var(--spacing-md);}.m-4{margin:var(--spacing-lg);}.m-5{margin:var(--spacing-xl);}.mt-0{margin-top:0;}.mt-1{margin-top:var(--spacing-xs);}.mt-2{margin-top:var(--spacing-sm);}.mt-3{margin-top:var(--spacing-md);}.mt-4{margin-top:var(--spacing-lg);}.mt-5{margin-top:var(--spacing-xl);}.mb-0{margin-bottom:0;}.mb-1{margin-bottom:var(--spacing-xs);}.mb-2{margin-bottom:var(--spacing-sm);}.mb-3{margin-bottom:var(--spacing-md);}.mb-4{margin-bottom:var(--spacing-lg);}.mb-5{margin-bottom:var(--spacing-xl);}.ml-0{margin-left:0;}.ml-1{margin-left:var(--spacing-xs);}.ml-2{margin-left:var(--spacing-sm);}.ml-3{margin-left:var(--spacing-md);}.ml-auto{margin-left:auto;}.mr-0{margin-right:0;}.mr-1{margin-right:var(--spacing-xs);}.mr-2{margin-right:var(--spacing-sm);}.mr-3{margin-right:var(--spacing-md);}.mr-auto{margin-right:auto;}.mx-auto{margin-left:auto;margin-right:auto;}.p-0{padding:0;}.p-1{padding:var(--spacing-xs);}.p-2{padding:var(--spacing-sm);}.p-3{padding:var(--spacing-md);}.p-4{padding:var(--spacing-lg);}.p-5{padding:var(--spacing-xl);}.pt-0{padding-top:0;}.pt-1{padding-top:var(--spacing-xs);}.pt-2{padding-top:var(--spacing-sm);}.pt-3{padding-top:var(--spacing-md);}.pt-4{padding-top:var(--spacing-lg);}.pt-5{padding-top:var(--spacing-xl);}.pb-0{padding-bottom:0;}.pb-1{padding-bottom:var(--spacing-xs);}.pb-2{padding-bottom:var(--spacing-sm);}.pb-3{padding-bottom:var(--spacing-md);}.pb-4{padding-bottom:var(--spacing-lg);}.pb-5{padding-bottom:var(--spacing-xl);}.px-0{padding-left:0;padding-right:0;}.px-1{padding-left:var(--spacing-xs);padding-right:var(--spacing-xs);}.px-2{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);}.px-3{padding-left:var(--spacing-md);padding-right:var(--spacing-md);}.px-4{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg);}.px-5{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl);}.py-0{padding-top:0;padding-bottom:0;}.py-1{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs);}.py-2{padding-top:var(--spacing-sm);padding-bottom:var(--spacing-sm);}.py-3{padding-top:var(--spacing-md);padding-bottom:var(--spacing-md);}.py-4{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg);}.py-5{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl);}.text-left{text-align:left;}.text-center{text-align:center;}.text-right{text-align:right;}.text-primary{color:var(--color-primary);}.text-secondary{color:var(--color-secondary);}.text-muted{color:var(--color-text-muted);}.text-light{color:var(--color-text-light);}.text-dark{color:var(--color-text);}.text-white{color:#ffffff;}.text-success{color:var(--color-success);}.text-warning{color:var(--color-warning);}.text-danger{color:var(--color-danger);}.text-info{color:var(--color-info);}.bg-primary{background-color:var(--color-primary);}.bg-secondary{background-color:var(--color-secondary);}.bg-light{background-color:var(--color-bg);}.bg-white{background-color:var(--color-bg-white);}.bg-dark{background-color:var(--color-bg-dark);}.d-none{display:none;}.d-block{display:block;}.d-inline{display:inline;}.d-inline-block{display:inline-block;}.d-flex{display:flex;}.d-grid{display:grid;}.w-100{width:100%;}.w-auto{width:auto;}.max-w-100{max-width:100%;}.h-100{height:100%;}.h-auto{height:auto;}.min-h-screen{min-height:100vh;}.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}.overflow-hidden{overflow:hidden;}.overflow-auto{overflow:auto;}.overflow-x-auto{overflow-x:auto;}.overflow-y-auto{overflow-y:auto;}.border{border:1px solid var(--color-border);}.border-top{border-top:1px solid var(--color-border);}.border-bottom{border-bottom:1px solid var(--color-border);}.border-0{border:0;}.rounded{border-radius:var(--radius-md);}.rounded-lg{border-radius:var(--radius-lg);}.rounded-full{border-radius:var(--radius-full);}.shadow-sm{box-shadow:var(--shadow-sm);}.shadow{box-shadow:var(--shadow-md);}.shadow-lg{box-shadow:var(--shadow-lg);}.shadow-none{box-shadow:none;}.font-normal{font-weight:400;}.font-medium{font-weight:500;}.font-semibold{font-weight:600;}.font-bold{font-weight:700;}.uppercase{text-transform:uppercase;}.lowercase{text-transform:lowercase;}.capitalize{text-transform:capitalize;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.visible{visibility:visible;}.invisible{visibility:hidden;}.cursor-pointer{cursor:pointer;}.cursor-default{cursor:default;}/* ========================================================================== 17. AdSense-Friendly Spacing ========================================================================== */ .ad-container{margin:var(--spacing-xl) 0;padding:var(--spacing-md);background-color:var(--color-bg);border-radius:var(--radius-md);text-align:center;min-height:100px;}.ad-container-inline{margin:var(--spacing-lg) 0;}.ad-container-sidebar{margin-bottom:var(--spacing-lg);position:sticky;top:calc(var(--header-height) + var(--spacing-md));}.ad-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--spacing-xs);}.content-section{padding:var(--spacing-2xl) 0;}.content-area{margin-bottom:var(--spacing-xl);}.article-content{max-width:800px;}.article-content > * + *{margin-top:var(--spacing-md);}.article-content h2{margin-top:var(--spacing-2xl);}.article-content h3{margin-top:var(--spacing-xl);}/* ========================================================================== 18. Responsive Breakpoints ========================================================================== */ @media (max-width:1024px){:root{--font-size-4xl:2rem;--font-size-3xl:1.75rem;--font-size-2xl:1.375rem;}.footer-grid{grid-template-columns:repeat(2,1fr);}.col-md-12{flex:0 0 100%;max-width:100%;}.col-md-6{flex:0 0 50%;max-width:50%;}.d-md-none{display:none;}.d-md-block{display:block;}.d-md-flex{display:flex;}}@media (max-width:767px){:root{--font-size-4xl:1.75rem;--font-size-3xl:1.5rem;--font-size-2xl:1.25rem;--header-height:60px;}.container{padding:0 var(--spacing-md);}.nav-list{display:none;}.hamburger{display:flex;}.mobile-nav{display:none;}.mobile-nav.active{display:block;}.col-sm-12{flex:0 0 100%;max-width:100%;}.col-6,.col-4,.col-3,.col-8,.col-9{flex:0 0 100%;max-width:100%;}.row{margin:0 calc(-1 * var(--spacing-sm));}.col{padding:0 var(--spacing-sm);}.footer-grid{grid-template-columns:1fr;gap:var(--spacing-lg);}.footer-bottom{flex-direction:column;text-align:center;}.card-horizontal{flex-direction:column;}.card-horizontal .card-image{width:100%;min-width:auto;height:180px;}.table-responsive{margin:0 calc(-1 * var(--spacing-md));padding:0 var(--spacing-md);}.d-sm-none{display:none;}.d-sm-block{display:block;}.d-sm-flex{display:flex;}.text-sm-center{text-align:center;}.text-sm-left{text-align:left;}.py-sm-3{padding-top:var(--spacing-md);padding-bottom:var(--spacing-md);}.mb-sm-3{margin-bottom:var(--spacing-md);}}@media (min-width:1201px){.container{padding:0 var(--spacing-lg);}.d-lg-none{display:none;}.d-lg-block{display:block;}.d-lg-flex{display:flex;}}/* ========================================================================== 19. Print Styles ========================================================================== */ @media print{.header,.footer,.nav,.hamburger,.mobile-nav,.ad-container,.btn{display:none !important;}body{background:#ffffff;color:#000000;font-size:12pt;}.container{max-width:100%;padding:0;}a{color:#000000;text-decoration:underline;}.card{box-shadow:none;border:1px solid #cccccc;}}/* ========================================================================== 20. Animations ========================================================================== */ @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}@keyframes slideUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.animate-fadeIn{animation:fadeIn var(--transition-normal) ease-out;}.animate-slideDown{animation:slideDown var(--transition-normal) ease-out;}.animate-slideUp{animation:slideUp var(--transition-normal) ease-out;}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}html{scroll-behavior:auto;}}/* ========================================================================== 21. Additional Components ========================================================================== */ .pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);margin:var(--spacing-xl) 0;}.pagination-item{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-weight:500;transition:all var(--transition-fast);}.pagination-item:hover{background-color:var(--color-bg-light);border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}.pagination-item.active{background-color:var(--color-primary);border-color:var(--color-primary);color:#ffffff;}.pagination-item.disabled{opacity:0.5;cursor:not-allowed;}.tag{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);background-color:var(--color-bg-light);color:var(--color-text-light);border-radius:var(--radius-sm);transition:background-color var(--transition-fast);}.tag:hover{background-color:var(--color-bg);text-decoration:none;}.tag-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);}.author-box{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--color-bg);border-radius:var(--radius-lg);margin:var(--spacing-xl) 0;}.author-avatar{width:80px;height:80px;border-radius:var(--radius-full);background-color:var(--color-primary);color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-2xl);font-weight:600;flex-shrink:0;}.author-info{flex:1;}.author-name{font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-xs);}.author-bio{font-size:var(--font-size-sm);color:var(--color-text-light);margin:0;}.reading-progress{position:fixed;top:var(--header-height);left:0;width:0;height:3px;background-color:var(--color-primary);z-index:var(--z-sticky);transition:width 50ms linear;}.skip-link{position:absolute;top:-100px;left:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-primary);color:#ffffff;border-radius:var(--radius-md);z-index:9999;}.skip-link:focus{top:var(--spacing-md);}.back-to-top{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:#ffffff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all var(--transition-normal);z-index:var(--z-sticky);}.back-to-top.visible{opacity:1;visibility:visible;}.back-to-top:hover{background-color:var(--color-primary-dark);transform:translateY(-3px);}.divider{height:1px;background-color:var(--color-border);margin:var(--spacing-xl) 0;}.divider-vertical{width:1px;height:100%;background-color:var(--color-border);margin:0 var(--spacing-md);}.list-styled{padding-left:var(--spacing-lg);}.list-styled li{position:relative;margin-bottom:var(--spacing-sm);color:var(--color-text-light);}.list-styled li::before{content:'•';position:absolute;left:calc(-1 * var(--spacing-md));color:var(--color-primary);font-weight:bold;}.list-numbered{padding-left:var(--spacing-lg);counter-reset:list-counter;}.list-numbered li{position:relative;margin-bottom:var(--spacing-sm);color:var(--color-text-light);counter-increment:list-counter;}.list-numbered li::before{content:counter(list-counter) '.';position:absolute;left:calc(-1 * var(--spacing-lg));color:var(--color-primary);font-weight:600;}.blockquote{padding:var(--spacing-lg);margin:var(--spacing-lg) 0;border-left:4px solid var(--color-primary);background-color:var(--color-bg);font-style:italic;color:var(--color-text-light);}.blockquote-footer{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--spacing-sm);font-style:normal;}.code-block{padding:var(--spacing-md);background-color:var(--color-bg-dark);color:#f8f8f2;border-radius:var(--radius-md);overflow-x:auto;font-family:'Menlo','Monaco','Courier New',monospace;font-size:var(--font-size-sm);line-height:1.5;}.inline-code{padding:0.2em 0.4em;background-color:var(--color-bg-light);border-radius:var(--radius-sm);font-family:'Menlo','Monaco','Courier New',monospace;font-size:0.9em;}.search-box{position:relative;max-width:400px;}.search-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-left:calc(var(--spacing-md) + 24px);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,86,166,0.1);}.search-icon{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);}.hero{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#ffffff;padding:var(--spacing-3xl) 0;text-align:center;}.hero-title{color:#ffffff;margin-bottom:var(--spacing-md);}.hero-subtitle{font-size:var(--font-size-lg);opacity:0.9;max-width:600px;margin:0 auto var(--spacing-xl);}.sidebar{position:sticky;top:calc(var(--header-height) + var(--spacing-md));}.sidebar-widget{background-color:var(--color-bg-white);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);}.sidebar-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);}.toc{padding:var(--spacing-md);background-color:var(--color-bg);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);}.toc-title{font-weight:600;margin-bottom:var(--spacing-sm);}.toc-list{font-size:var(--font-size-sm);}.toc-list li{margin-bottom:var(--spacing-xs);}.toc-list a{color:var(--color-text-light);}.toc-list a:hover{color:var(--color-primary);}.social-share{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;}.social-share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:#ffffff;transition:transform var(--transition-fast),opacity var(--transition-fast);}.social-share-btn:hover{transform:translateY(-2px);opacity:0.9;}.social-share-btn.facebook{background-color:#1877f2;}.social-share-btn.twitter{background-color:#1da1f2;}.social-share-btn.linkedin{background-color:#0a66c2;}.social-share-btn.whatsapp{background-color:#25d366;}.social-share-btn.email{background-color:var(--color-secondary);}.tooltip{position:relative;cursor:help;}.tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg-dark);color:#ffffff;font-size:var(--font-size-xs);white-space:nowrap;border-radius:var(--radius-sm);opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:var(--z-tooltip);}.tooltip:hover::after{opacity:1;visibility:visible;}.skeleton{background:linear-gradient(90deg,var(--color-bg-light) 25%,var(--color-bg) 50%,var(--color-bg-light) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:var(--radius-sm);}@keyframes skeleton-loading{0%{background-position:200% 0;}100%{background-position:-200% 0;}}.skeleton-text{height:1em;margin-bottom:var(--spacing-sm);}.skeleton-title{height:1.5em;width:60%;margin-bottom:var(--spacing-md);}.skeleton-image{height:200px;margin-bottom:var(--spacing-md);}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}/* ========================================================================== 22. Hero Section ========================================================================== */ .hero{position:relative;min-height:400px;display:flex;align-items:center;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#ffffff;overflow:hidden;}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0.3),rgba(0,0,0,0.5));z-index:1;}.hero-content{position:relative;z-index:2;text-align:center;padding:var(--spacing-3xl) var(--spacing-md);max-width:800px;margin:0 auto;}.hero-title{font-size:var(--font-size-5xl);font-weight:700;margin-bottom:var(--spacing-md);color:#ffffff;text-shadow:0 2px 4px rgba(0,0,0,0.3);}.hero-subtitle{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl);color:rgba(255,255,255,0.9);line-height:1.6;}.hero-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;}@media (max-width:767px){.hero-title{font-size:var(--font-size-3xl);}.hero-subtitle{font-size:var(--font-size-base);}.hero-buttons{flex-direction:column;align-items:center;}.hero-buttons .btn{width:100%;max-width:280px;}}/* ========================================================================== 23. Feature Banner ========================================================================== */ .feature-banner{background-color:var(--color-bg-white);border-bottom:1px solid var(--color-border-light);padding:var(--spacing-lg) 0;}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);}.feature-item{display:flex;align-items:center;gap:var(--spacing-md);}.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary);color:#ffffff;border-radius:var(--radius-md);flex-shrink:0;}.feature-text{display:flex;flex-direction:column;}.feature-text strong{font-size:var(--font-size-sm);color:var(--color-text);}.feature-text span{font-size:var(--font-size-xs);color:var(--color-text-muted);}@media (max-width:1024px){.feature-grid{grid-template-columns:repeat(2,1fr);}}@media (max-width:767px){.feature-grid{grid-template-columns:1fr;gap:var(--spacing-md);}.feature-item{justify-content:center;text-align:left;}}/* ========================================================================== 24. Section Styles ========================================================================== */ .section{padding:var(--spacing-3xl) 0;}.section-light{background-color:var(--color-bg-white);}.section-alt{background-color:var(--color-bg);}.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);flex-wrap:wrap;}@media (max-width:767px){.section{padding:var(--spacing-2xl) 0;}.section-header{flex-direction:column;align-items:stretch;}}/* ========================================================================== 25. Grid System ========================================================================== */ .grid{display:grid;gap:var(--spacing-lg);}.grid-2{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(4,1fr);}@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr);}}@media (max-width:767px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}/* ========================================================================== 26. Icon Circles ========================================================================== */ .icon-circle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:rgba(0,86,166,0.1);color:var(--color-primary);border-radius:var(--radius-full);flex-shrink:0;}.icon-circle-lg{width:64px;height:64px;}.icon-circle-xl{width:80px;height:80px;}/* ========================================================================== 27. Phone Numbers ========================================================================== */ .phone-number{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-primary);margin:var(--spacing-sm) 0;}.phone-number-sm{font-size:var(--font-size-xl);}/* ========================================================================== 28. Card Link ========================================================================== */ .card-link{display:inline-flex;align-items:center;color:var(--color-primary);font-weight:500;margin-top:var(--spacing-md);transition:color var(--transition-fast);}.card-link:hover{color:var(--color-primary-dark);text-decoration:underline;}
/* Cookie Consent Banner */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  color: #ffffff;
  padding: 1rem;
  z-index: 9999;
  display: none;
}
.cookie-consent.active {
  display: block;
}
.cookie-consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cookie-consent-text {
  flex: 1;
  min-width: 280px;
}
.cookie-consent-text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.cookie-consent-text a {
  color: #60a5fa;
  text-decoration: underline;
}
.cookie-consent-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cookie-consent-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
}
.cookie-consent-btn-accept {
  background: #0056a6;
  color: #ffffff;
}
.cookie-consent-btn-accept:hover {
  background: #004085;
}
.cookie-consent-btn-reject {
  background: #4b5563;
  color: #ffffff;
}
.cookie-consent-btn-reject:hover {
  background: #374151;
}
@media (max-width: 576px) {
  .cookie-consent-buttons {
    width: 100%;
  }
  .cookie-consent-btn {
    flex: 1;
  }
}

/* Related Guides Section */
.related-guides {
  background-color: var(--color-bg);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);
}
.related-guides h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--color-text);
}
.related-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}
.related-guide-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: box-shadow 0.2s, transform 0.2s;
}
.related-guide-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.related-guide-card h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
  font-size: 1.1rem;
}
.related-guide-card p {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin: 0;
}