618 lines
No EOL
36 KiB
CSS
618 lines
No EOL
36 KiB
CSS
/* =============================================================================
|
|
Debrid Services Comparison - Improved Complete CSS
|
|
- Unified card-first design for About, Speed Test, FAQ
|
|
- Accessible header/navigation, hero, buttons
|
|
- Tables, comparisons, search, referral, status, resources, notes
|
|
- Age verification modal, loading states, footer, utilities
|
|
========================================================================== */
|
|
|
|
/* Root variables and theme */
|
|
:root{
|
|
color-scheme: light dark;
|
|
|
|
/* Brand + feedback */
|
|
--primary:#6366f1;
|
|
--primary-hover:#4f46e5;
|
|
--primary-light:#a5b4fc;
|
|
--primary-dark:#3730a3;
|
|
--success:#10b981;
|
|
--warning:#f59e0b;
|
|
--error:#ef4444;
|
|
--info:#3b82f6;
|
|
|
|
/* Grays */
|
|
--gray-50:#f8fafc;
|
|
--gray-100:#f1f5f9;
|
|
--gray-200:#e2e8f0;
|
|
--gray-300:#cbd5e1;
|
|
--gray-400:#94a3b8;
|
|
--gray-500:#64748b;
|
|
--gray-600:#475569;
|
|
--gray-700:#334155;
|
|
--gray-800:#1e293b;
|
|
--gray-900:#0f172a;
|
|
|
|
/* Text and background */
|
|
--text-primary:var(--gray-900);
|
|
--text-secondary:var(--gray-600);
|
|
--text-tertiary:var(--gray-500);
|
|
--text-muted:var(--gray-400);
|
|
--bg-primary:#fff;
|
|
--bg-secondary:var(--gray-50);
|
|
--bg-tertiary:var(--gray-100);
|
|
--bg-elevated:#fff;
|
|
|
|
/* Borders and focus */
|
|
--border-primary:var(--gray-200);
|
|
--border-secondary:var(--gray-300);
|
|
--border-focus:var(--primary);
|
|
|
|
/* Radius */
|
|
--radius-md:.375rem;
|
|
--radius-lg:.5rem;
|
|
--radius-xl:.75rem;
|
|
--radius-2xl:1rem;
|
|
--radius-full:9999px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1);
|
|
--shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
|
|
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
|
|
--shadow-focus:0 0 0 3px rgb(99 102 241 / .15);
|
|
|
|
/* Typography */
|
|
--text-xs:.75rem;
|
|
--text-sm:.875rem;
|
|
--text-base:1rem;
|
|
--text-lg:1.125rem;
|
|
--text-xl:1.25rem;
|
|
--text-2xl:1.5rem;
|
|
--text-3xl:1.875rem;
|
|
--text-4xl:2.25rem;
|
|
--text-5xl:3rem;
|
|
--text-6xl:3.75rem;
|
|
--font-normal:400;
|
|
--font-medium:500;
|
|
--font-semibold:600;
|
|
--font-bold:700;
|
|
--font-extrabold:800;
|
|
|
|
/* Spacing */
|
|
--space-px:1px;
|
|
--space-0-5:.125rem;
|
|
--space-1:.25rem;
|
|
--space-1-5:.375rem;
|
|
--space-2:.5rem;
|
|
--space-2-5:.625rem;
|
|
--space-3:.75rem;
|
|
--space-3-5:.875rem;
|
|
--space-4:1rem;
|
|
--space-5:1.25rem;
|
|
--space-6:1.5rem;
|
|
--space-7:1.75rem;
|
|
--space-8:2rem;
|
|
--space-9:2.25rem;
|
|
--space-10:2.5rem;
|
|
--space-11:2.75rem;
|
|
--space-12:3rem;
|
|
--space-14:3.5rem;
|
|
--space-16:4rem;
|
|
--space-20:5rem;
|
|
--space-24:6rem;
|
|
|
|
/* Layout */
|
|
--container-max-width:1280px;
|
|
--header-height:4.5rem;
|
|
|
|
/* Z-index */
|
|
--z-sticky:1020;
|
|
--z-docked:10;
|
|
}
|
|
[data-theme="dark"]{
|
|
--text-primary:var(--gray-50);
|
|
--text-secondary:var(--gray-300);
|
|
--text-tertiary:var(--gray-400);
|
|
--text-muted:var(--gray-500);
|
|
|
|
--bg-primary:var(--gray-900);
|
|
--bg-secondary:var(--gray-800);
|
|
--bg-tertiary:var(--gray-700);
|
|
--bg-elevated:var(--gray-800);
|
|
|
|
--border-primary:var(--gray-700);
|
|
--border-secondary:var(--gray-600);
|
|
--border-focus:var(--primary-light);
|
|
|
|
--primary:#818cf8;
|
|
--primary-hover:#a5b4fc;
|
|
--primary-light:#c7d2fe;
|
|
--primary-dark:#6366f1;
|
|
|
|
--shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4),0 1px 2px -1px rgb(0 0 0 / .4);
|
|
--shadow-md:0 4px 6px -1px rgb(0 0 0 / .4),0 2px 4px -2px rgb(0 0 0 / .4);
|
|
--shadow-lg:0 10px 15px -3px rgb(0 0 0 / .4),0 4px 6px -4px rgb(0 0 0 / .4);
|
|
--shadow-focus:0 0 0 3px rgb(129 140 248 / .2);
|
|
}
|
|
|
|
/* Base and resets */
|
|
*,::before,::after{box-sizing:border-box}
|
|
html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
|
|
body{
|
|
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
|
font-feature-settings:'cv01','cv03','cv04','cv11';
|
|
background-color:var(--bg-primary);
|
|
color:var(--text-primary);
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
text-rendering:optimizeLegibility;
|
|
min-height:100vh; margin:0; overflow-x:hidden;
|
|
}
|
|
img,svg,video,canvas{max-width:100%;height:auto}
|
|
a{color:var(--primary);text-decoration:none;transition:color .2s cubic-bezier(.4,0,.2,1)}
|
|
a:hover{color:var(--primary-hover);text-decoration:none}
|
|
|
|
/* Focus styles */
|
|
:focus{outline:2px solid var(--border-focus);outline-offset:2px}
|
|
:focus:not(:focus-visible){outline:none}
|
|
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
|
|
|
|
/* Layout wrappers */
|
|
.page-wrapper{min-height:100vh;display:flex;flex-direction:column;position:relative}
|
|
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-6);width:100%}
|
|
.main-content{flex:1;position:relative}
|
|
|
|
/* Skip link */
|
|
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
|
|
.skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;padding:var(--space-2) var(--space-3);background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-focus);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999}
|
|
|
|
/* Header and navigation */
|
|
.site-header{
|
|
position:sticky;top:0;z-index:var(--z-sticky);
|
|
background:rgb(255 255 255 / .8);
|
|
-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
|
|
border-bottom:1px solid var(--border-primary);
|
|
height:var(--header-height);
|
|
transition:background-color .2s,border-color .2s,backdrop-filter .3s,box-shadow .2s;
|
|
}
|
|
@supports not ((backdrop-filter: blur(1px))){.site-header{background:rgb(255 255 255 / .95)}}
|
|
[data-theme="dark"] .site-header{background:rgb(15 23 42 / .8)}
|
|
.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-8)}
|
|
.site-title{
|
|
display:flex;align-items:center;gap:var(--space-2);
|
|
font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);
|
|
text-decoration:none;position:relative;transition:color .2s,transform .2s,text-shadow .2s;
|
|
}
|
|
.site-title:hover{color:var(--primary);transform:translateY(-1px)}
|
|
.site-title:focus-visible{border-radius:var(--radius-md);box-shadow:var(--shadow-focus)}
|
|
.logo-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgb(99 102 241 / .2));transition:transform .2s,filter .2s}
|
|
.site-title:hover .logo-icon{transform:rotate(-5deg) scale(1.1)}
|
|
|
|
.header-nav{display:flex;align-items:center;gap:var(--space-6)}
|
|
.nav-link{
|
|
position:relative;display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3);
|
|
font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap;
|
|
transition:color .2s,background-color .2s,transform .2s,box-shadow .2s,border-color .2s;
|
|
}
|
|
.nav-link::before{
|
|
content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--primary);
|
|
border-radius:var(--radius-full);transition:width .2s,left .2s;transform:translateX(-50%);
|
|
}
|
|
.nav-link:hover{color:var(--primary);background:var(--bg-secondary);transform:translateY(-1px)}
|
|
.nav-link:hover::before{width:70%}
|
|
.nav-link:focus-visible{box-shadow:var(--shadow-focus)}
|
|
.nav-link[aria-current="page"]{color:var(--primary)}
|
|
.nav-link[aria-current="page"]::before{width:70%}
|
|
|
|
/* Dark mode toggle */
|
|
.dark-mode-toggle{
|
|
display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--border-primary);
|
|
border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden;
|
|
transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s; touch-action:manipulation;
|
|
}
|
|
.dark-mode-toggle:hover{background:var(--bg-secondary);border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)}
|
|
.dark-mode-toggle:focus-visible{box-shadow:var(--shadow-focus)}
|
|
.sun-icon,.moon-icon{position:absolute;transition:opacity .2s,transform .2s}
|
|
.moon-icon{display:none;transform:rotate(180deg)}
|
|
[data-theme="dark"] .sun-icon{display:none}
|
|
[data-theme="dark"] .moon-icon{display:block;transform:rotate(0deg)}
|
|
|
|
/* Hero section */
|
|
.hero-section{
|
|
position:relative;padding:var(--space-24) 0 var(--space-20);
|
|
background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);
|
|
overflow:hidden;
|
|
}
|
|
.hero-section::before{
|
|
content:'';position:absolute;inset:0;
|
|
background:radial-gradient(circle at 30% 20%,rgb(99 102 241 / .1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(99 102 241 / .05) 0%,transparent 50%);
|
|
pointer-events:none;
|
|
}
|
|
[data-theme="dark"] .hero-section{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}
|
|
[data-theme="dark"] .hero-section::before{
|
|
background:radial-gradient(circle at 30% 20%,rgb(129 140 248 / .15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(129 140 248 / .08) 0%,transparent 50%)
|
|
}
|
|
.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;animation:fadeInUp .8s ease-out}
|
|
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
|
|
.hero-title{font-size:clamp(var(--text-3xl),8vw,var(--text-6xl));font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}
|
|
.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
[data-theme="dark"] .gradient-text{background:linear-gradient(135deg,var(--primary-light) 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.hero-description{font-size:clamp(var(--text-lg),4vw,var(--text-xl));color:var(--text-secondary);margin:0 0 var(--space-10);max-width:650px;margin-left:auto;margin-right:auto;line-height:1.6}
|
|
.hero-actions{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-16);flex-wrap:wrap}
|
|
.hero-stats{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap}
|
|
.stat-item{text-align:center;position:relative}
|
|
.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-6));top:50%;transform:translateY(-50%);width:1px;height:40px;background:var(--border-primary)}
|
|
.stat-number{display:block;font-size:clamp(var(--text-2xl),6vw,var(--text-4xl));font-weight:var(--font-extrabold);color:var(--primary);margin-bottom:var(--space-1);background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
|
.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-medium)}
|
|
|
|
/* Buttons */
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:var(--space-2);
|
|
padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-xl);
|
|
font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-align:center;min-width:140px;justify-content:center;
|
|
transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;
|
|
touch-action:manipulation;
|
|
}
|
|
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s}
|
|
.btn:hover::before{left:100%}
|
|
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)}
|
|
.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
|
|
.btn-primary:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}
|
|
.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)}
|
|
.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
|
|
.btn-secondary:focus-visible{box-shadow:var(--shadow-focus)}
|
|
input,select,textarea,button{accent-color:var(--primary)}
|
|
|
|
/* Section framework */
|
|
.section{padding:var(--space-24) 0;position:relative;content-visibility:auto;contain-intrinsic-size:1px 800px}
|
|
.section:nth-child(even){background:var(--bg-secondary)}
|
|
.section-header{text-align:center;margin-bottom:var(--space-16)}
|
|
.section-title{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}
|
|
.section-description{font-size:clamp(var(--text-base),3vw,var(--text-xl));color:var(--text-secondary);margin:0;max-width:700px;margin-inline:auto;line-height:1.7}
|
|
.subsection{margin:var(--space-12) 0}
|
|
.subsection-title{margin:0 0 var(--space-4);font-size:var(--text-xl);font-weight:var(--font-bold)}
|
|
|
|
/* Quick navigation cards */
|
|
.quick-nav{padding:var(--space-20) 0;background:var(--bg-primary);position:relative;content-visibility:auto;contain-intrinsic-size:1px 600px}
|
|
.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)}
|
|
.quick-nav-card{
|
|
display:block;padding:var(--space-8);background:var(--bg-elevated);border:2px solid var(--border-primary);border-radius:var(--radius-2xl);
|
|
text-decoration:none;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
|
|
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
|
|
transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,opacity .2s;
|
|
content-visibility:auto;contain:content;
|
|
}
|
|
.quick-nav-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0%,transparent 100%);opacity:0;transition:opacity .2s;z-index:0}
|
|
.quick-nav-card:hover::before{opacity:.08}
|
|
.quick-nav-card:hover{border-color:var(--primary);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
|
|
.quick-nav-card:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}
|
|
.quick-nav-card>*{position:relative;z-index:1}
|
|
.quick-nav-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));transition:transform .2s,filter .2s}
|
|
.quick-nav-card:hover .quick-nav-icon{transform:scale(1.1) rotate(-5deg)}
|
|
.quick-nav-card h3{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}
|
|
.quick-nav-card p{margin:0;color:var(--text-secondary);font-size:var(--text-base);line-height:1.6}
|
|
|
|
/* Unified status cards (also used for speed tiles) */
|
|
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
|
|
.status-card{
|
|
display:block;padding:var(--space-6);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);
|
|
text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;content-visibility:auto;contain:content;
|
|
}
|
|
.status-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
|
|
.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
|
|
.service-status-indicator{width:12px;height:12px;border-radius:var(--radius-full);background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}
|
|
.status-card .status-indicator.online,.service-status-indicator.online{background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}
|
|
.status-card p{margin:0;color:var(--text-secondary);font-size:var(--text-sm)}
|
|
.speed-grid .status-card{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
|
|
.speed-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary)}
|
|
.speed-card .speed-test-label{font-size:var(--text-sm);color:var(--text-secondary)}
|
|
|
|
/* Chips and meta */
|
|
.meta-chips{display:flex;gap:.5rem;justify-content:center;margin-top:var(--space-4);flex-wrap:wrap}
|
|
.chip{
|
|
display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;
|
|
background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary);
|
|
font-size:.75rem;font-weight:var(--font-medium)
|
|
}
|
|
.chip-info{color:var(--primary);background:rgb(99 102 241 / .10);border-color:rgb(99 102 241 / .25)}
|
|
|
|
/* Stepper (ordered guidance) */
|
|
.stepper{counter-reset:step;list-style:none;padding-left:0;margin:var(--space-6) 0}
|
|
.stepper li{position:relative;padding-left:2.25rem;margin-bottom:.75rem}
|
|
.stepper li::before{
|
|
counter-increment:step;content:counter(step);position:absolute;left:0;top:.1rem;width:1.5rem;height:1.5rem;
|
|
display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700
|
|
}
|
|
|
|
/* Accordion (used in FAQ and Speed) */
|
|
.accordion{border:1px solid var(--border-primary);border-radius:var(--radius-xl);background:var(--bg-primary);margin:var(--space-4) 0;overflow:hidden}
|
|
.accordion>summary{
|
|
display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:var(--space-4);
|
|
font-weight:var(--font-semibold);cursor:pointer;list-style:none
|
|
}
|
|
.accordion>summary::-webkit-details-marker{display:none}
|
|
.accordion[open]>summary{background:var(--bg-secondary)}
|
|
.accordion .chevron{transition:transform .2s}
|
|
.accordion[open] .chevron{transform:rotate(180deg)}
|
|
.accordion-content{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary)}
|
|
.bullet-list{padding:var(--space-4) var(--space-6);margin:0}
|
|
.bullet-list li{margin:.25rem 0}
|
|
.accordion>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:.5rem}
|
|
.accordion>summary:hover{background:var(--bg-secondary)}
|
|
|
|
/* Alerts */
|
|
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) 0;border:1px solid var(--border-primary)}
|
|
.alert-info{background:rgb(59 130 246 / .1);border-color:rgb(59 130 246 / .2);color:var(--info)}
|
|
.alert-warning{background:rgb(245 158 11 / .1);border-color:rgb(245 158 11 / .2);color:var(--warning)}
|
|
.alert-icon{flex-shrink:0;margin-top:2px}
|
|
|
|
/* Tables (data + pricing) */
|
|
.data-table-container{
|
|
background:var(--bg-elevated);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);
|
|
margin:var(--space-8) 0;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
|
|
}
|
|
.table-wrapper{overflow-x:auto;overflow-y:visible;border-radius:var(--radius-2xl);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary) var(--bg-secondary)}
|
|
.table-wrapper::-webkit-scrollbar{height:10px}
|
|
.table-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-md)}
|
|
.table-wrapper::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-md);border:2px solid var(--bg-secondary)}
|
|
.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)}
|
|
|
|
table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:600px}
|
|
th,td{padding:var(--space-4) var(--space-6);text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap}
|
|
th{
|
|
background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);
|
|
position:sticky;top:0;z-index:var(--z-sticky)
|
|
}
|
|
th:first-child{position:sticky;left:0;z-index:calc(var(--z-sticky) + 1);background:var(--primary);background-clip:padding-box}
|
|
tr:hover{background:var(--bg-secondary)}
|
|
td{transition:background-color .15s,color .15s}
|
|
td:first-child{
|
|
font-weight:var(--font-medium);position:sticky;left:0;background:var(--bg-primary);z-index:1;background-clip:padding-box;
|
|
box-shadow:inset -1px 0 0 var(--border-primary)
|
|
}
|
|
tr:hover td:first-child{background:var(--bg-secondary)}
|
|
|
|
.status-cell{text-align:center!important}
|
|
.status-indicator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);transition:background-color .15s,color .15s,transform .15s}
|
|
.status-indicator.supported{background:rgb(14 236 162 / .1);color:var(--success)}
|
|
.status-indicator.not-supported{background:rgb(211 29 29 / .1);color:var(--error)}
|
|
.status-indicator svg{width:16px;height:16px}
|
|
|
|
/* Pricing table highlight support */
|
|
.pricing-table th.highlighted,
|
|
.pricing-table td.highlighted{background:var(--bg-secondary)}
|
|
|
|
/* Search */
|
|
.search-section{margin-bottom:var(--space-8)}
|
|
.search-container.enhanced{position:relative;max-width:500px;margin:0 auto}
|
|
.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-tertiary);z-index:1}
|
|
.search-input{
|
|
width:100%;padding:var(--space-4) var(--space-12) var(--space-4) var(--space-12);
|
|
border:2px solid var(--border-primary);border-radius:var(--radius-full);font-size:var(--text-base);background:var(--bg-primary);color:var(--text-primary);outline:none;
|
|
transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s;
|
|
}
|
|
.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}
|
|
.clear-icon{
|
|
position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);
|
|
background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-1);
|
|
border-radius:var(--radius-md);opacity:0;visibility:hidden;transition:opacity .15s,color .15s,background-color .15s,transform .15s;
|
|
}
|
|
.search-input:not(:placeholder-shown) + .clear-icon,.search-input:focus + .clear-icon{opacity:1;visibility:visible}
|
|
.clear-icon:hover{background:var(--bg-secondary);color:var(--text-primary)}
|
|
.search-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)}
|
|
|
|
/* Compare UI */
|
|
.compare-controls{display:flex;align-items:end;gap:var(--space-6);margin-bottom:var(--space-12);flex-wrap:wrap}
|
|
.compare-select-group{flex:1;min-width:200px}
|
|
.compare-select-group label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-medium);color:var(--text-primary)}
|
|
.select-wrapper{position:relative}
|
|
.select-wrapper::after{
|
|
content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);
|
|
width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none;
|
|
}
|
|
select{
|
|
width:100%;padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);
|
|
background:var(--bg-primary);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;appearance:none;
|
|
transition:border-color .15s,box-shadow .15s,color .15s,background-color .15s;
|
|
}
|
|
select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}
|
|
.compare-vs{flex-shrink:0;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--primary);background:var(--bg-secondary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--border-primary);margin-bottom:var(--space-2)}
|
|
|
|
#compare-table-container{position:relative;background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);margin-top:var(--space-6);display:none}
|
|
.comparison-visible{display:block!important;animation:slideIn .3s ease-out}
|
|
.comparison-hiding{animation:slideOut .3s ease-in}
|
|
@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
|
|
@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
|
|
|
|
.comparison-header{padding:var(--space-6);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
|
|
.comparison-header h3{margin:0 0 var(--space-4);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);text-align:center}
|
|
.comparison-stats{display:flex;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-6);flex-wrap:wrap}
|
|
.comparison-stats .stat{text-align:center;background:var(--bg-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-primary);min-width:100px}
|
|
.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}
|
|
.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--primary)}
|
|
.comparison-actions{display:flex;justify-content:center;gap:var(--space-3)}
|
|
|
|
.comparison-filters{padding:var(--space-4) var(--space-6);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}
|
|
.filter-option{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}
|
|
.filter-option input[type="radio"]{margin:0}
|
|
.filter-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}
|
|
|
|
.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:700px}
|
|
.comparison-table th,.comparison-table td{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-primary);text-align:center}
|
|
.comparison-table th:first-child,.comparison-table td:first-child{text-align:left;font-weight:var(--font-medium)}
|
|
.comparison-table th{background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);position:sticky;top:0;z-index:var(--z-sticky)}
|
|
.provider-header{position:relative}
|
|
.comparison-row.both-supported{background:rgb(16 185 129 / .05)}
|
|
.comparison-row.provider1-only{background:rgb(59 130 246 / .05)}
|
|
.comparison-row.provider2-only{background:rgb(168 85 247 / .05)}
|
|
.comparison-row.neither-supported{background:rgb(239 68 68 / .05)}
|
|
.status-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}
|
|
.status-badge.both-supported{background:rgb(16 185 129 / .1);color:var(--success)}
|
|
.status-badge.provider1-only{background:rgb(59 130 246 / .1);color:var(--info)}
|
|
.status-badge.provider2-only{background:rgb(168 85 247 / .1);color:#8b5cf6}
|
|
.status-badge.neither-supported{background:rgb(239 68 68 / .1);color:var(--error)}
|
|
|
|
#close-compare{
|
|
background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
|
|
padding:var(--space-2) var(--space-4);display:flex;align-items:center;gap:var(--space-2);
|
|
cursor:pointer;font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium);
|
|
transition:color .15s,background-color .15s,border-color .15s,transform .15s,box-shadow .15s;
|
|
}
|
|
#close-compare:hover{background:var(--error);color:#fff;border-color:var(--error);transform:translateY(-1px)}
|
|
|
|
.empty-state{text-align:center;padding:var(--space-16)}
|
|
.empty-state-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4)}
|
|
.empty-state h3{margin:0 0 var(--space-2);font-size:var(--text-xl);color:var(--text-primary)}
|
|
.empty-state p{margin:0;color:var(--text-secondary)}
|
|
|
|
.warning-state{text-align:center;padding:var(--space-12);background:rgb(245 158 11 / .05);border-radius:var(--radius-lg);border:1px solid rgb(245 158 11 / .2)}
|
|
.warning-icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)}
|
|
.warning-state h3{margin:0 0 var(--space-2);color:var(--warning)}
|
|
.warning-state p{margin:0;color:var(--text-secondary)}
|
|
|
|
/* Referral section */
|
|
.referral-section{margin-block:var(--space-16);padding:var(--space-8);background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-primary);text-align:center;content-visibility:auto;contain-intrinsic-size:1px 400px}
|
|
.referral-header h3{margin:0 0 var(--space-2);color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-bold)}
|
|
.referral-header p{margin:0 auto var(--space-6);color:var(--text-secondary);max-width:800px}
|
|
.referral-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);justify-items:center}
|
|
.referral-card{
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
|
|
padding:var(--space-4) var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
|
|
text-decoration:none;width:100%;max-width:200px;box-shadow:var(--shadow-sm);
|
|
transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s,color .2s;
|
|
}
|
|
.referral-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
|
|
.referral-card .service-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}
|
|
.referral-badge{font-size:var(--text-xs);color:var(--primary);background:rgb(99 102 241 / .1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-weight:var(--font-medium)}
|
|
|
|
/* Important notes */
|
|
.important-notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6)}
|
|
.note-card{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-6)}
|
|
.note-icon{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
|
|
.note-card h3{margin-bottom:var(--space-3);color:var(--text-primary)}
|
|
.note-card p{margin:0;color:var(--text-secondary)}
|
|
|
|
/* Resources */
|
|
.resources-categories{display:grid;gap:var(--space-12)}
|
|
.resource-category h3{margin-bottom:var(--space-6);color:var(--primary)}
|
|
.resource-list{display:grid;gap:var(--space-4)}
|
|
.resource-item{
|
|
display:block;padding:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);
|
|
text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s;
|
|
}
|
|
.resource-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}
|
|
.resource-item strong{display:block;color:var(--text-primary);margin-bottom:var(--space-1)}
|
|
.resource-item span{color:var(--text-secondary);font-size:var(--text-sm)}
|
|
|
|
/* Age verification modal */
|
|
.age-verification-overlay{
|
|
position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(5px)
|
|
}
|
|
.age-verification-modal{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--space-8);max-width:500px;margin:var(--space-4);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary)}
|
|
.age-verification-content{text-align:center}
|
|
.age-verification-content h3{color:var(--error);margin-bottom:var(--space-4)}
|
|
.age-verification-content p{margin-bottom:var(--space-4);color:var(--text-secondary)}
|
|
.age-verification-actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6)}
|
|
@media (width <=768px){.age-verification-actions{flex-direction:column}}
|
|
|
|
/* Loading states */
|
|
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary)}
|
|
.loading-spinner{width:32px;height:32px;border:3px solid var(--border-primary);border-top:3px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--space-4)}
|
|
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
|
|
|
|
.loading-overlay{position:absolute;inset:0;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;visibility:hidden;transition:opacity .2s}
|
|
[data-theme="dark"] .loading-overlay{background:rgb(15 23 42 / .9)}
|
|
.loading-overlay--visible{opacity:1;visibility:visible}
|
|
.loading-overlay--hiding{opacity:0}
|
|
.loading-content{text-align:center;color:var(--text-primary)}
|
|
.spinner-ring{width:40px;height:40px;border:4px solid var(--border-primary);border-top:4px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-3)}
|
|
.loading-text{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}
|
|
|
|
/* Footer */
|
|
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:var(--space-16) 0 var(--space-8);margin-top:auto;content-visibility:auto;contain-intrinsic-size:1px 500px}
|
|
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}
|
|
.footer-section h4{margin:0 0 var(--space-4);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}
|
|
.footer-section p{margin:0;color:var(--text-secondary)}
|
|
.footer-section ul{list-style:none;padding:0;margin:0}
|
|
.footer-section li{margin-bottom:var(--space-2)}
|
|
.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color .15s}
|
|
.footer-section a:hover{color:var(--primary)}
|
|
.footer-bottom{text-align:center;padding-top:var(--space-8);border-top:1px solid var(--border-primary)}
|
|
.footer-bottom p{margin:0;color:var(--text-tertiary);font-size:var(--text-sm)}
|
|
.footer-bottom a{color:var(--primary);text-decoration:none}
|
|
|
|
/* Back to top button */
|
|
.back-to-top{
|
|
position:fixed;bottom:var(--space-6);right:var(--space-6);width:48px;height:48px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;
|
|
display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
|
|
transition:background-color .2s,transform .2s,box-shadow .2s,opacity .2s,visibility 0s linear .2s;
|
|
opacity:0;visibility:hidden;transform:translateY(20px);z-index:var(--z-docked);
|
|
}
|
|
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
|
|
.back-to-top:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
|
|
|
|
/* Responsive */
|
|
@media (width <=1024px){
|
|
.container{padding:0 var(--space-4)}
|
|
}
|
|
@media (width <= 768px){
|
|
.header-nav{display:none}
|
|
.hero-title{font-size:var(--text-3xl)}
|
|
.hero-description{font-size:var(--text-lg)}
|
|
.hero-actions{flex-direction:column;align-items:center}
|
|
.hero-stats{gap:var(--space-6)}
|
|
|
|
.quick-nav-grid{grid-template-columns:1fr}
|
|
.footer-content{grid-template-columns:1fr;text-align:center}
|
|
|
|
.data-table-container{margin:var(--space-2) calc(-1 * var(--space-4));border-radius:0;border-left:none;border-right:none}
|
|
.table-wrapper{border-radius:0}
|
|
table{font-size:var(--text-xs);min-width:500px}
|
|
th,td{padding:var(--space-2) var(--space-3)}
|
|
th:first-child,td:first-child{min-width:120px;max-width:150px;white-space:normal;word-break:break-word}
|
|
|
|
.comparison-header{padding:var(--space-4)}
|
|
.comparison-header h3{font-size:var(--text-lg)}
|
|
.comparison-stats{flex-direction:column;gap:var(--space-3)}
|
|
.comparison-stats .stat{margin:0 auto;max-width:200px}
|
|
.comparison-filters{flex-direction:column;align-items:center;gap:var(--space-3)}
|
|
.comparison-table{min-width:500px}
|
|
.comparison-table th,.comparison-table td{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
|
|
}
|
|
@media (width <= 640px){
|
|
.btn{width:100%;max-width:280px;padding:var(--space-4) var(--space-6)}
|
|
}
|
|
@media (width <= 480px){
|
|
.section{padding:var(--space-12) 0}
|
|
.stat-item:not(:last-child)::after{display:none}
|
|
.comparison-stats{gap:var(--space-2)}
|
|
.comparison-stats .stat{min-width:60px;padding:var(--space-1) var(--space-2)}
|
|
.stat-value{font-size:var(--text-lg)}
|
|
.stat-label{font-size:10px}
|
|
table{min-width:400px}
|
|
th:first-child,td:first-child{min-width:100px;max-width:120px}
|
|
}
|
|
|
|
/* Motion and contrast preferences */
|
|
@media (prefers-reduced-motion:reduce){
|
|
*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
|
|
html{scroll-behavior:auto}
|
|
}
|
|
@media (prefers-contrast:high){
|
|
:root{--border-primary:#000;--text-secondary:#000}
|
|
[data-theme="dark"]{--border-primary:#fff;--text-secondary:#fff}
|
|
}
|
|
|
|
/* Pointer coarse: disable hover transforms for touch */
|
|
@media (pointer:coarse){
|
|
.nav-link:hover,.btn:hover,.quick-nav-card:hover,.status-card:hover{transform:none;box-shadow:none}
|
|
}
|
|
|
|
/* Print */
|
|
@media print{
|
|
.site-header,.hero-section,.quick-nav,.referral-section,.site-footer,.back-to-top,.dark-mode-toggle,.comparison-filters,.comparison-actions,#close-compare{display:none!important}
|
|
.section{page-break-inside:avoid}
|
|
.data-table-container{box-shadow:none;border:1px solid #000}
|
|
.table-wrapper{overflow:visible}
|
|
table{min-width:auto}
|
|
th,td{border:1px solid #000}
|
|
} |