:root {
/* Colors */
}
html, body {
margin: 0 !important;
padding: 0 !important;
background-color: var(--color-void-black) !important;
color: var(--color-pure-white) !important;
overflow-x: hidden;
width: 100%;
}
:root {
/* Colors */
--color-void-black: #040506;
--color-ink: #07080a;
--color-obsidian: #111214;
--color-graphite: #1b1c1e;
--color-smoke: #6a6b6c;
--color-ash: #9c9c9d;
--color-mist: #e6e6e6;
--color-iron: #454647;
--color-slate: #2f3031;
--color-pure-white: #ffffff;
--color-coral-pulse: #ff6363;
--color-ember-hush: #452324;
--color-electric-sky: #63a1ff;
--color-cobalt-edge: #143ca3;
--color-deep-space: #02193b;
--color-info-blue: #56c2ff;
--color-success-green: #59d499;
--color-cyber-yellow: #ffc107;
/* Typography — Font Families */
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-geistmono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
--font-sf-pro-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-sf-pro: 'SF Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-eyebrow: 11px;
--leading-eyebrow: 0.91;
--tracking-eyebrow: 0.8px;
--text-body: 16px;
--leading-body: 1.15;
--text-body-lg: 18px;
--leading-body-lg: 1.15;
--text-subheading: 20px;
--leading-subheading: 1.2;
--tracking-subheading: 0.2px;
--text-heading-sm: 24px;
--leading-heading-sm: 1.15;
--text-heading: 32px;
--leading-heading: 1.15;
--text-heading-lg: 56px;
--leading-heading-lg: 1.17;
--tracking-heading-lg: 0.22px;
--text-display: 64px;
--leading-display: 1.1;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing */
--spacing-unit: 8px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-96: 96px;
--spacing-120: 120px;
--spacing-224: 224px;
/* Layout */
--page-max-width: 1200px;
--section-gap: 80-120px;
--card-padding: 24px;
--element-gap: 8-16px;
/* Border Radius */
--radius-lg: 8px;
--radius-lg-2: 11px;
--radius-2xl: 16px;
--radius-2xl-2: 20px;
--radius-3xl: 31px;
--radius-3xl-2: 36px;
--radius-3xl-3: 43px;
--radius-full: 86px;
--radius-full-2: 1000px;
--radius-full-3: 9999px;
--radius-full-4: 99999px;
/* Named Radii */
--radius-cards: 16px;
--radius-pills: 9999px;
--radius-badges: 6px;
--radius-inputs: 8px;
--radius-buttons: 8px;
--radius-largecards: 20px;
--radius-iconcontainers: 99999px;
/* Shadows */
--shadow-subtle: rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset;
--shadow-subtle-2: rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset;
--shadow-lg: rgba(215, 201, 175, 0.05) 0px 0px 20px 5px, rgba(215, 201, 175, 0.05) 0px 0px 16px -7px;
--shadow-subtle-3: rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset;
--shadow-subtle-4: rgba(0, 0, 0, 0.03) 0px 7px 3px 0px, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
--shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
--shadow-xl: rgba(0, 0, 0, 0.4) 0px 4px 40px 8px, rgba(0, 0, 0, 0.8) 0px 0px 0px 0.5px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;
--shadow-subtle-6: rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset;
--shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
--shadow-subtle-7: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(3, 15, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--shadow-xl-2: rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset;
--shadow-subtle-8: rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset;
--shadow-subtle-9: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.1) 0px 0px 20px 3px, rgba(85, 0, 98, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--shadow-subtle-10: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(51, 3, 129, 0.09) 0px 4px 24px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--shadow-subtle-11: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset, rgba(7, 13, 79, 0.1) 0px 0px 20px 3px, rgba(7, 40, 79, 0.1) 0px 0px 40px 20px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
/* Surfaces */
--surface-canvas: #040506;
--surface-card: #07080a;
--surface-recessed: #111214;
--surface-badge: #1b1c1e;
--surface-accent-tint: #452324;
}
/* ========================================= */
/* CENTRALIZED COCKPIT CSS extracted via script */
/* ========================================= */
/* Extracted from index.blade.php */
/* ==========================================================================
Cockpit Theme - Disney+ Style Hero Carousel
========================================================================== */
.cockpit-hero-carousel {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
background: var(--color-void-black);
border-bottom: 1px solid var(--color-slate);
aspect-ratio: 21/9;
}
.cockpit-carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease-in-out;
pointer-events: none;
z-index: 1;
}
.cockpit-carousel-slide.active {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
.cockpit-carousel-bg {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
transition: transform 9s ease-out; /* Slow cinematic zoom out */
}
.cockpit-carousel-slide.active .cockpit-carousel-bg {
transform: scale(1);
}
.cockpit-carousel-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(4,5,6,1) 0%, rgba(4,5,6,0.6) 50%, transparent 100%),
linear-gradient(0deg, rgba(4,5,6,1) 0%, rgba(4,5,6,0) 40%);
display: flex;
align-items: center;
padding: 0 5%;
}
.cockpit-carousel-content {
max-width: 600px;
margin-top: 20px;
}
.cockpit-carousel-content h2,
.cockpit-carousel-content p,
.cockpit-btn-play {
opacity: 0;
transform: translateY(30px) scale(0.95);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Pop animation */
}
.cockpit-carousel-slide.active .cockpit-carousel-content h2 {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.2s;
}
.cockpit-carousel-slide.active .cockpit-carousel-content p {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.3s;
}
.cockpit-carousel-slide.active .cockpit-btn-play {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 0.4s;
}
.cockpit-carousel-content h2 {
font-family: var(--font-inter);
font-size: 56px;
font-weight: 900;
color: var(--color-pure-white);
margin-bottom: 16px;
line-height: 1.1;
text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.cockpit-carousel-content p {
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
margin-bottom: 32px;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.cockpit-btn-play {
font-family: var(--font-inter);
font-size: 16px;
font-weight: 700;
padding: 16px 40px;
background: var(--color-pure-white);
color: var(--color-void-black);
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.cockpit-btn-play:hover {
background: var(--color-mist);
}
/* THUMBNAILS SLIDER (BOTTOM RIGHT) */
.cockpit-thumb-container {
position: absolute;
bottom: 40px;
right: 5%;
max-width: 45%; /* Keep it strictly on the right */
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
}
.cockpit-thumb-nav {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
width: 36px;
height: 80px;
border-radius: 8px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.cockpit-thumb-nav:hover {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-thumb-track-wrapper {
overflow: hidden;
width: 100%;
}
.cockpit-thumb-track {
display: flex;
gap: 12px;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cockpit-thumb {
width: 140px;
height: 80px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s;
opacity: 0.5;
background: var(--color-ink);
flex-shrink: 0;
}
.cockpit-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cockpit-thumb:hover {
opacity: 0.8;
}
.cockpit-thumb.active {
opacity: 1;
border-color: var(--color-pure-white);
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* PROGRESS BAR TIMER (BOTTOM LEFT) */
.cockpit-carousel-timer {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: var(--color-pure-white);
width: 0%;
z-index: 10;
}
@media(max-width: 991px) {
.cockpit-hero-carousel { aspect-ratio: 16/9; }
.cockpit-carousel-overlay { padding: 40px 24px; background: linear-gradient(0deg, rgba(4,5,6,1) 0%, rgba(4,5,6,0.5) 100%); align-items: flex-start; padding-top: 10%; }
.cockpit-carousel-content { text-align: left; max-width: 100%; }
.cockpit-carousel-content h2 { font-size: 36px; }
.cockpit-carousel-thumbnails { bottom: 20px; right: 24px; gap: 8px; }
.cockpit-thumb { width: 100px; height: 60px; }
}
@media(max-width: 576px) {
.cockpit-carousel-thumbnails { display: none; }
}
/* ==========================================================================
Cockpit Theme - Marquee Stripe
========================================================================== */
.cockpit-marquee-stripe {
background: var(--color-cyber-yellow);
color: var(--color-void-black);
padding: 12px 0;
overflow: hidden;
display: block; /* changed from flex */
width: 100%;
position: relative;
z-index: 10;
white-space: nowrap;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cockpit-marquee-track {
display: inline-block;
animation: scroll-marquee 20s linear infinite;
white-space: nowrap;
}
.cockpit-marquee-item {
font-family: var(--font-geistmono);
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0 40px;
display: inline-flex;
align-items: center;
gap: 40px;
}
@keyframes scroll-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ==========================================================================
Cockpit Theme - Featured Services Grid
========================================================================== */
.cockpit-featured-wrapper {
padding: 80px 16px;
background: var(--color-ink);
border-top: 1px solid var(--color-slate);
}
.cockpit-featured-container {
max-width: var(--page-max-width, 1400px);
margin: 0 auto;
}
.cockpit-featured-header {
margin-bottom: 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.cockpit-featured-header h2 {
font-family: var(--font-inter);
font-size: 32px;
font-weight: 800;
margin: 0;
color: var(--color-pure-white);
}
.cockpit-featured-header p {
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
margin: 8px 0 0 0;
}
.cockpit-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.cockpit-grid-card {
background: var(--color-void-black);
border: 1px solid var(--color-slate);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: all 0.3s;
display: flex;
flex-direction: column;
}
.cockpit-grid-card:hover {
transform: translateY(-4px);
border-color: var(--color-coral-pulse);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cockpit-grid-img {
aspect-ratio: 16/9;
background: var(--color-recessed);
position: relative;
border-bottom: 1px solid var(--color-slate);
}
.cockpit-grid-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cockpit-grid-content {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.cockpit-grid-title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 12px 0;
line-height: 1.3;
}
.cockpit-grid-price {
font-family: var(--font-geistmono);
font-size: 14px;
font-weight: 600;
color: var(--color-cyber-yellow);
margin-top: auto;
background: rgba(255, 193, 7, 0.1);
padding: 6px 12px;
border-radius: 6px;
display: inline-table;
width: fit-content;
}
@media(max-width: 1200px) { .cockpit-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 768px) {
.cockpit-grid { grid-template-columns: repeat(2, 1fr); }
.cockpit-featured-header { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media(max-width: 576px) { .cockpit-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Cockpit Theme - How It Works
========================================================================== */
.cockpit-hiw-wrapper {
position: relative;
padding: 100px 16px;
background-size: cover;
background-position: center;
background-attachment: fixed; /* Parallax effect */
border-top: 1px solid var(--color-slate);
border-bottom: 1px solid var(--color-slate);
}
.cockpit-hiw-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4,5,6,0.95) 0%, rgba(4,5,6,0.6) 50%, rgba(4,5,6,0.95) 100%);
z-index: 1;
}
.cockpit-hiw-container {
position: relative;
z-index: 2;
max-width: var(--page-max-width, 1200px);
margin: 0 auto;
text-align: center;
}
.cockpit-hiw-header h2 {
font-family: var(--font-inter);
font-size: 48px;
font-weight: 900;
color: var(--color-pure-white);
margin-bottom: 16px;
text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.cockpit-hiw-header p {
font-family: var(--font-inter);
font-size: 18px;
color: var(--color-smoke);
max-width: 600px;
margin: 0 auto 60px auto;
}
.cockpit-hiw-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.cockpit-hiw-step {
background: rgba(7, 8, 10, 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 40px 32px;
text-align: left;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy Pop animation */
position: relative;
overflow: hidden;
}
.cockpit-hiw-step:hover {
transform: translateY(-12px) scale(1.02); /* Pop up over it */
border-color: var(--color-cyber-yellow);
background: rgba(7, 8, 10, 0.85);
box-shadow: 0 20px 40px rgba(255, 193, 7, 0.15);
}
.cockpit-hiw-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--color-cyber-yellow);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.cockpit-hiw-step:hover::before {
transform: scaleX(1);
}
.cockpit-hiw-num {
font-family: var(--font-geistmono);
font-size: 80px;
font-weight: 900;
color: rgba(255,255,255,0.03);
position: absolute;
top: -15px;
right: 15px;
line-height: 1;
transition: color 0.4s, transform 0.4s;
}
.cockpit-hiw-step:hover .cockpit-hiw-num {
color: rgba(255, 193, 7, 0.1);
transform: scale(1.1) rotate(5deg);
}
.cockpit-hiw-icon {
font-size: 32px;
color: var(--color-pure-white);
margin-bottom: 24px;
display: inline-block;
transition: color 0.4s, transform 0.4s;
}
.cockpit-hiw-step:hover .cockpit-hiw-icon {
color: var(--color-cyber-yellow);
transform: scale(1.1);
}
.cockpit-hiw-title {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 12px;
}
.cockpit-hiw-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-ash);
line-height: 1.6;
}
@media(max-width: 992px) {
.cockpit-hiw-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ==========================================================================
Cockpit Theme - Video CTA
========================================================================== */
.cockpit-video-cta {
position: relative;
padding: 160px 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-top: 1px solid var(--color-slate);
border-bottom: 1px solid var(--color-slate);
}
.cockpit-video-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
filter: brightness(0.9) contrast(1.1);
}
.cockpit-video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4,5,6,0.9) 0%, rgba(4,5,6,0.1) 50%, rgba(4,5,6,0.9) 100%),
linear-gradient(90deg, rgba(4,5,6,0.6) 0%, transparent 50%, rgba(4,5,6,0.6) 100%);
z-index: 1;
}
.cockpit-video-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
}
.cockpit-video-content h2 {
font-family: var(--font-inter);
font-size: 64px;
font-weight: 900;
color: var(--color-pure-white);
margin-bottom: 24px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.02em;
text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.cockpit-video-content h2 span {
color: var(--color-cyber-yellow);
}
.cockpit-video-content p {
font-family: var(--font-inter);
font-size: 20px;
color: var(--color-mist);
margin-bottom: 40px;
line-height: 1.6;
text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.cockpit-video-btn {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
padding: 18px 48px;
background: var(--color-cyber-yellow);
color: var(--color-void-black);
border: none;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3);
}
.cockpit-video-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 193, 7, 0.5);
background: var(--color-pure-white);
}
@media(max-width: 768px) {
.cockpit-video-content h2 { font-size: 40px; }
.cockpit-video-content p { font-size: 16px; }
}
/* ==========================================================================
Cockpit Theme - Points Terminal
========================================================================== */
.cockpit-pts-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding: 60px 16px;
}
.cockpit-pts-container {
max-width: var(--page-max-width, 1000px); /* Constrain width more */
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: flex-start;
}
/* LEFT: TIER CARDS */
.cockpit-pts-info h2 {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.2;
background: linear-gradient(135deg, var(--color-pure-white) 0%, var(--color-ash) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cockpit-pts-info p {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-smoke);
margin-bottom: 24px;
line-height: 1.5;
}
.cockpit-tier-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.cockpit-tier-card {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: 12px;
padding: 16px;
position: relative;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.cockpit-tier-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.cockpit-tier-card.active {
border-color: var(--color-cyber-yellow);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.1);
}
.cockpit-tier-card.active::before {
opacity: 1;
}
.cockpit-tier-mult {
font-family: var(--font-geistmono);
font-size: 24px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 4px;
transition: color 0.3s;
}
.cockpit-tier-card.active .cockpit-tier-mult {
color: var(--color-cyber-yellow);
}
.cockpit-tier-name {
font-family: var(--font-inter);
font-size: 12px;
font-weight: 600;
color: var(--color-ash);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
}
.cockpit-tier-range {
font-family: var(--font-inter);
font-size: 12px;
color: var(--color-smoke);
background: rgba(255,255,255,0.03);
padding: 6px 10px;
border-radius: 6px;
text-align: center;
border: 1px solid rgba(255,255,255,0.05);
}
/* RIGHT: CALCULATOR TERMINAL */
.cockpit-calc-panel {
background: linear-gradient(180deg, var(--color-recessed) 0%, var(--color-ink) 100%);
border: 1px solid var(--color-slate);
border-radius: 16px;
padding: 24px;
box-shadow: var(--shadow-xl-2);
}
.cockpit-calc-title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.cockpit-calc-title i {
color: var(--color-cyber-yellow);
}
.cockpit-input-hero {
position: relative;
margin-bottom: 24px;
}
.cockpit-input-hero label {
display: block;
font-family: var(--font-geistmono);
font-size: 11px;
font-weight: 600;
color: var(--color-ash);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.cockpit-input-hero-wrapper {
position: relative;
display: flex;
align-items: center;
background: var(--color-void-black);
border: 1px solid var(--color-slate);
border-radius: 8px;
padding: 4px 16px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input-hero-wrapper:focus-within {
border-color: var(--color-cyber-yellow);
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}
.cockpit-input-hero-wrapper .cur {
font-family: var(--font-geistmono);
font-size: 18px;
font-weight: 600;
color: var(--color-ash);
margin-right: 12px;
}
.cockpit-input-hero-wrapper input {
width: 100%;
background: transparent;
border: none;
color: var(--color-pure-white);
font-family: var(--font-geistmono);
font-size: 20px;
font-weight: 700;
outline: none;
padding: 8px 0;
}
.cockpit-input-hero-wrapper input::placeholder {
color: rgba(255,255,255,0.1);
}
.cockpit-readout-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.cockpit-readout-box {
background: rgba(255,255,255,0.02);
border: 1px solid var(--color-slate);
border-radius: 8px;
padding: 12px;
}
.cockpit-readout-lbl {
font-family: var(--font-inter);
font-size: 11px;
font-weight: 500;
color: var(--color-smoke);
margin-bottom: 6px;
display: flex;
justify-content: space-between;
}
.cockpit-readout-val {
font-family: var(--font-geistmono);
font-size: 16px;
font-weight: 700;
color: var(--color-pure-white);
background: transparent;
border: none;
outline: none;
width: 100%;
}
.cockpit-calc-badge {
background: rgba(255, 193, 7, 0.1);
color: var(--color-cyber-yellow);
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
font-family: var(--font-geistmono);
}
.cockpit-total-box {
background: linear-gradient(135deg, rgba(46, 213, 115, 0.1) 0%, rgba(46, 213, 115, 0.02) 100%);
border: 1px solid rgba(46, 213, 115, 0.3);
border-radius: 8px;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.cockpit-total-lbl {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 600;
color: #2ed573;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-total-val-wrapper {
display: flex;
align-items: baseline;
gap: 6px;
}
.cockpit-total-val-wrapper input {
background: transparent;
border: none;
color: #2ed573;
font-family: var(--font-geistmono);
font-size: 24px;
font-weight: 800;
width: 100%;
max-width: 120px;
text-align: right;
outline: none;
}
.cockpit-total-val-wrapper .unit {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 700;
color: rgba(46, 213, 115, 0.6);
}
.cockpit-btn-submit {
width: 100%;
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: 8px;
padding: 14px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
transition: all 0.2s;
}
.cockpit-btn-submit:hover {
background: var(--color-mist);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}
.cockpit-calc-warning {
display: flex;
gap: 10px;
font-family: var(--font-inter);
font-size: 12px;
color: var(--color-ash);
margin-bottom: 20px;
line-height: 1.4;
}
.cockpit-calc-warning i {
color: var(--color-coral-pulse);
font-size: 16px;
}
@media (max-width: 991px) {
.cockpit-pts-container {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 576px) {
.cockpit-tier-grid {
grid-template-columns: 1fr;
}
.cockpit-readout-grid {
grid-template-columns: 1fr;
}
}
/* Extracted from dashboard.blade.php */
/* ==========================================================================
Cockpit Theme - User Dashboard
========================================================================== */
.cockpit-dash-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 120px;
min-height: 100vh;
}
.cockpit-dash-container {
max-width: var(--page-max-width, 1200px);
margin: 60px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-dash-container {
grid-template-columns: 1fr;
}
}
/* SIDEBAR */
.cockpit-dash-sidebar {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
overflow: hidden;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-profile-box {
padding: 40px 24px 32px;
text-align: center;
border-bottom: 1px dashed var(--color-slate);
background: linear-gradient(180deg, rgba(255,99,99,0.02) 0%, transparent 100%);
}
.cockpit-profile-avatar {
width: 80px;
height: 80px;
margin: 0 auto 16px;
background: var(--color-recessed);
border: 2px solid var(--color-slate);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-inter);
font-size: 32px;
font-weight: 700;
color: var(--color-coral-pulse);
box-shadow: 0 0 20px rgba(255, 99, 99, 0.1);
}
.cockpit-profile-name {
font-family: var(--font-inter);
font-size: 20px;
font-weight: 700;
margin: 0 0 4px 0;
}
.cockpit-profile-email {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
margin: 0;
}
.cockpit-dash-nav {
display: flex;
flex-direction: column;
padding: 16px;
gap: 8px;
}
.cockpit-dash-btn {
width: 100%;
text-align: left;
background: transparent;
border: 1px solid transparent;
color: var(--color-smoke);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
padding: 14px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.cockpit-dash-btn i {
font-size: 16px;
width: 20px;
text-align: center;
color: var(--color-ash);
transition: color 0.2s;
}
.cockpit-dash-btn:hover {
background: rgba(255,255,255,0.02);
color: var(--color-pure-white);
}
.cockpit-dash-btn.active {
background: var(--color-recessed);
border-color: var(--color-slate);
color: var(--color-pure-white);
}
.cockpit-dash-btn.active i {
color: var(--color-coral-pulse);
}
.cockpit-dash-logout {
margin-top: 16px;
border-top: 1px dashed var(--color-slate);
border-radius: 0;
padding-top: 24px;
}
.cockpit-dash-logout:hover i {
color: #ff4757;
}
/* MAIN TERMINAL */
.cockpit-dash-main {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 40px;
box-shadow: var(--shadow-subtle-3);
min-height: 500px;
}
.cockpit-tab-pane {
display: none;
animation: cockpit-fade-in 0.4s ease;
}
.cockpit-tab-pane.active {
display: block;
}
@keyframes cockpit-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.cockpit-tab-title {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
margin: 0 0 32px 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-slate);
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-tab-title i {
color: var(--color-coral-pulse);
}
/* Forms (Security Tab) */
.cockpit-form-group {
margin-bottom: 24px;
width: 100%;
}
.cockpit-form-group label {
display: block;
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cockpit-input-wrap i {
position: absolute;
left: 16px;
color: var(--color-smoke);
font-size: 14px;
}
.cockpit-input {
width: 100%;
box-sizing: border-box;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
padding: 12px 16px 12px 42px;
border-radius: var(--radius-inputs, 8px);
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-btn-save {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 14px 32px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.2s;
margin-top: 16px;
}
.cockpit-btn-save:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
/* Validation Styling */
span.error {
display: block;
color: var(--color-coral-pulse);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
margin-top: 6px;
}
input.error {
border-color: var(--color-coral-pulse) !important;
background: rgba(255, 99, 99, 0.02) !important;
}
/* Tables (Orders / Points) */
.cockpit-table-wrap {
overflow-x: auto;
border: 1px solid var(--color-slate);
border-radius: 8px;
background: var(--color-recessed);
}
.cockpit-table {
width: 100%;
border-collapse: collapse;
min-width: 800px; /* Ensure table is wide enough to prevent squeezing */
}
.cockpit-table th {
text-align: left;
padding: 16px;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
color: var(--color-ash);
border-bottom: 1px solid var(--color-slate);
background: rgba(255,255,255,0.02);
white-space: nowrap; /* Prevent headers from splitting into 2 lines */
}
.cockpit-table td {
padding: 16px;
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-pure-white);
border-bottom: 1px solid var(--color-slate);
vertical-align: middle;
white-space: nowrap; /* Prevent data cells from wrapping */
}
.cockpit-table tbody tr:last-child td {
border-bottom: none;
}
.cockpit-table tbody tr:hover {
background: rgba(255,255,255,0.02);
}
.cockpit-order-num {
font-family: var(--font-geistmono);
font-weight: 600;
}
.cockpit-order-date {
font-size: 12px;
color: var(--color-ash);
margin-top: 4px;
}
.cockpit-badge {
display: inline-flex;
padding: 4px 10px;
border-radius: 4px;
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.cockpit-badge.completed, .cockpit-badge.delivered {
background: rgba(46, 213, 115, 0.1);
color: #2ed573;
border: 1px solid rgba(46, 213, 115, 0.2);
}
.cockpit-badge.pending, .cockpit-badge.new {
background: rgba(255, 165, 2, 0.1);
color: #ffa502;
border: 1px solid rgba(255, 165, 2, 0.2);
}
.cockpit-badge.cancel {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border: 1px solid rgba(255, 71, 87, 0.2);
}
.cockpit-btn-action {
background: transparent;
color: var(--color-ash);
border: 1px solid var(--color-slate);
padding: 6px 12px;
border-radius: 6px;
font-family: var(--font-inter);
font-size: 13px;
text-decoration: none;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cockpit-btn-action:hover {
color: var(--color-pure-white);
background: rgba(255,255,255,0.05);
}
/* Empty States */
.cockpit-empty-state {
text-align: center;
padding: 60px 20px;
background: var(--color-recessed);
border-radius: 8px;
border: 1px dashed var(--color-slate);
}
.cockpit-empty-icon i {
font-size: 48px;
color: var(--color-slate);
margin-bottom: 24px;
}
.cockpit-empty-state h3 {
font-family: var(--font-inter);
font-size: 20px;
color: var(--color-smoke);
margin: 0;
}
span.error {
display: block;
font-size: 12px;
margin-top: 6px;
}
input.error {
border-color: #ff4757 !important;
}
/* Extracted from show.blade.php */
/* ==========================================================================
Cockpit Theme - Order Show
========================================================================== */
.cockpit-order-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 120px;
min-height: 100vh;
}
.cockpit-order-container {
max-width: var(--page-max-width, 800px);
margin: 60px auto 0;
padding: 0 16px;
}
.cockpit-order-card {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
overflow: hidden;
box-shadow: var(--shadow-xl-2);
}
.cockpit-order-head {
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
border-bottom: 1px dashed var(--color-slate);
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 600px) {
.cockpit-order-head {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
}
.cockpit-order-head h2 {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-order-head h2 i {
color: var(--color-cyber-yellow, #ffc107);
}
.cockpit-order-actions {
display: flex;
gap: 12px;
}
.cockpit-btn {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.cockpit-btn.primary {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-btn.primary:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-btn.ghost {
background: rgba(255,255,255,0.05);
color: var(--color-pure-white);
border: 1px solid var(--color-slate);
}
.cockpit-btn.ghost:hover {
background: rgba(255,255,255,0.1);
}
.cockpit-order-body {
padding: 32px;
}
.cockpit-summary-box {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: 12px;
padding: 24px;
margin-bottom: 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cockpit-sum-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.cockpit-sum-col.right {
align-items: flex-end;
text-align: right;
}
.cockpit-sum-lbl {
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-ash);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-sum-val {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
color: var(--color-pure-white);
}
.cockpit-sum-val.green {
color: var(--color-cyber-yellow, #ffc107);
}
.cockpit-sum-date {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-smoke);
}
.cockpit-info-title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
margin: 0 0 24px 0;
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-info-title i {
color: var(--color-ash);
}
.cockpit-info-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.cockpit-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
}
.cockpit-info-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cockpit-info-k {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
color: var(--color-smoke);
}
.cockpit-info-v {
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
color: var(--color-pure-white);
text-align: right;
}
.cockpit-info-v.mono {
font-family: var(--font-geistmono);
}
.cockpit-badge {
display: inline-flex;
padding: 6px 12px;
border-radius: 6px;
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.cockpit-badge.completed, .cockpit-badge.delivered, .cockpit-badge.paid {
background: rgba(46, 213, 115, 0.1);
color: #2ed573;
border: 1px solid rgba(46, 213, 115, 0.2);
}
.cockpit-badge.pending, .cockpit-badge.new {
background: rgba(255, 165, 2, 0.1);
color: #ffa502;
border: 1px solid rgba(255, 165, 2, 0.2);
}
.cockpit-badge.cancel, .cockpit-badge.failed, .cockpit-badge.unpaid {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border: 1px solid rgba(255, 71, 87, 0.2);
}
/* Copy button integrated into value */
.cockpit-copy-box {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
padding: 6px 12px;
border-radius: 6px;
}
.cockpit-copy-btn {
background: none;
border: none;
color: var(--color-ash);
cursor: pointer;
font-size: 14px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.cockpit-copy-btn:hover {
color: var(--color-pure-white);
}
/* Extracted from about-us.blade.php */
/* ==========================================================================
Cockpit Theme - About Us (Bento Box Edition)
========================================================================== */
.cockpit-about-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 120px;
overflow-x: hidden;
}
/* 1. SPLIT HERO TERMINAL */
.cockpit-hero-section {
max-width: var(--page-max-width, 1200px);
margin: 80px auto;
padding: 0 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.cockpit-hero-content h2 {
font-family: var(--font-inter);
font-size: 56px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--color-pure-white) 0%, var(--color-ash) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cockpit-hero-content p {
font-family: var(--font-inter);
font-size: 18px;
color: var(--color-smoke);
line-height: 1.6;
margin-bottom: 40px;
}
.cockpit-hero-bullets {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.cockpit-hero-bullets li {
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
display: flex;
align-items: center;
gap: 14px;
}
.cockpit-hero-bullets li i {
color: var(--color-cyan, #00f0ff);
font-size: 12px;
background: rgba(255, 255, 255, 0.05);
padding: 8px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}
.cockpit-hero-actions {
display: flex;
gap: 16px;
}
.cockpit-btn {
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.2s;
}
.cockpit-btn.primary {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-btn.primary:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-btn.ghost {
background: rgba(255,255,255,0.05);
color: var(--color-pure-white);
border: 1px solid var(--color-slate);
}
.cockpit-btn.ghost:hover {
background: rgba(255,255,255,0.1);
}
.cockpit-hero-visual {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--color-slate);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.cockpit-hero-visual img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.cockpit-hero-visual:hover img {
transform: scale(1.03);
}
.cockpit-hero-visual::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4,5,6,0) 50%, rgba(4,5,6,0.8) 100%);
pointer-events: none;
}
/* 2. THE BENTO GRID (SEO & FEATURES) */
.cockpit-bento-section {
max-width: var(--page-max-width, 1200px);
margin: 0 auto 100px;
padding: 0 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 24px;
}
.cockpit-bento-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: 16px;
padding: 32px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.3s, transform 0.3s;
}
.cockpit-bento-box:hover {
border-color: rgba(255,255,255,0.15);
transform: translateY(-4px);
}
.cockpit-bento-icon {
font-size: 32px;
color: var(--color-cyber-yellow);
margin-bottom: 24px;
}
.cockpit-bento-box h3 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 12px 0;
}
.cockpit-bento-box p {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-ash);
line-height: 1.6;
margin: 0;
}
/* Bento Box Sizing Classes */
.bento-large {
grid-column: span 2;
background: linear-gradient(135deg, rgba(255, 99, 99, 0.1) 0%, rgba(255, 99, 99, 0.02) 100%);
border-color: rgba(255, 99, 99, 0.3);
}
.bento-large .cockpit-bento-icon {
color: var(--color-coral-pulse);
}
.bento-tall {
grid-row: span 2;
background: linear-gradient(180deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.02) 100%);
border-color: rgba(255, 193, 7, 0.3);
}
.bento-tall .cockpit-bento-icon {
color: var(--color-cyber-yellow);
}
/* 3. CTA PANEL */
.cockpit-cta-panel {
max-width: var(--page-max-width, 1200px);
margin: 0 auto;
padding: 0 16px;
}
.cockpit-cta-box {
background: url('/assets/media/images/about-cta.webp') center/cover no-repeat;
border-radius: 16px;
border: 1px solid var(--color-slate);
position: relative;
overflow: hidden;
}
.cockpit-cta-overlay {
background: rgba(4, 5, 6, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 80px 40px;
text-align: center;
}
.cockpit-cta-overlay h2 {
font-family: var(--font-inter);
font-size: 40px;
font-weight: 800;
margin: 0 0 16px 0;
}
.cockpit-cta-overlay p {
font-family: var(--font-inter);
font-size: 18px;
color: var(--color-smoke);
max-width: 600px;
margin: 0 auto 32px;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.cockpit-hero-section {
grid-template-columns: 1fr;
text-align: center;
}
.cockpit-hero-actions {
justify-content: center;
}
.cockpit-bento-section {
grid-template-columns: 1fr 1fr;
}
.bento-tall {
grid-row: auto;
}
}
@media (max-width: 768px) {
.cockpit-bento-section {
grid-template-columns: 1fr;
}
.bento-large {
grid-column: span 1;
}
.cockpit-hero-content h2 {
font-size: 40px;
}
}
/* Extracted from header.blade.php */
/* Raycast-Inspired Theme Styles for Navbar & Cart */
.kikin-header {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: var(--page-max-width, 1200px);
z-index: 1000;
border-radius: var(--radius-full-3, 9999px);
background: rgba(4, 5, 6, 0.4);
backdrop-filter: blur(48px);
-webkit-backdrop-filter: blur(48px);
border: 1px solid var(--color-slate, #2f3031);
transition: all 0.3s ease;
padding: 8px 16px;
}
.kikin-header.scrolled {
background: rgba(4, 5, 6, 0.85);
box-shadow: var(--shadow-xl);
border-color: rgba(255,255,255,0.1);
}
.kikin-header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.kikin-logo {
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease;
}
.kikin-logo:hover {
transform: translateY(-2px);
}
.kikin-logo img {
height: 44px;
width: auto;
object-fit: contain;
background: rgba(255, 255, 255, 0.95);
padding: 6px 12px;
border-radius: 6px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.kikin-logo:hover img {
background: #ffffff;
box-shadow: 0 6px 16px rgba(99, 161, 255, 0.2);
}
/* Nav Links */
.kikin-nav-links {
display: flex;
gap: 4px;
align-items: center;
}
.kikin-nav-link {
color: var(--color-ash, #9c9c9d);
font-family: var(--font-inter, sans-serif);
font-weight: 500;
font-size: 13px;
text-decoration: none;
padding: 6px 12px;
border-radius: 9999px;
transition: color 0.2s, background 0.2s;
display: flex;
align-items: center;
gap: 6px;
position: relative;
}
.kikin-nav-link:hover, .kikin-nav-link.active {
color: var(--color-pure-white, #ffffff);
background: rgba(255, 255, 255, 0.05);
}
/* Tools Cluster (Right side) */
.kikin-tools {
display: flex;
align-items: center;
gap: 8px;
}
.kikin-auth-cluster {
display: flex;
align-items: center;
gap: 8px;
}
/* Badges (Points) */
.points-balance {
background: var(--color-graphite, #1b1c1e);
color: var(--color-pure-white);
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-family: var(--font-geistmono);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Dropdowns */
.kikin-dropdown-wrapper {
position: relative;
display: inline-block;
}
.kikin-dropdown-standard, .kikin-mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px) scale(0.95);
opacity: 0;
visibility: hidden;
background: var(--color-ink, #07080a);
border: 1px solid var(--color-slate, #2f3031);
border-radius: var(--radius-lg, 8px);
box-shadow: var(--shadow-subtle-3);
padding: 8px;
min-width: 140px;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 100;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Right-aligned dropdown for auth */
.kikin-dropdown-wrapper.align-right .kikin-dropdown-standard {
left: auto;
right: 0;
transform: translateY(10px) scale(0.95);
}
.kikin-dropdown-wrapper:hover .kikin-dropdown-standard,
.kikin-dropdown-wrapper:hover .kikin-mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(8px) scale(1);
}
.kikin-dropdown-wrapper.align-right:hover .kikin-dropdown-standard {
transform: translateY(8px) scale(1);
}
.kikin-dropdown-standard a, .kikin-mega-menu a {
color: var(--color-ash);
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}
.kikin-dropdown-standard a:hover, .kikin-mega-menu a:hover {
background: rgba(255,255,255,0.05);
color: var(--color-pure-white);
}
/* Buttons */
.kikin-ghost-btn {
color: var(--color-ash);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
text-decoration: none;
padding: 8px 12px;
border-radius: 8px;
transition: color 0.2s, background 0.2s;
}
.kikin-ghost-btn:hover {
color: var(--color-pure-white);
background: rgba(255,255,255,0.05);
}
.kikin-primary-btn {
background: var(--color-mist, #e6e6e6);
color: var(--color-iron, #454647);
font-family: var(--font-inter);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: var(--radius-buttons, 8px);
text-decoration: none;
transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
box-shadow: var(--shadow-sm);
display: inline-flex;
align-items: center;
}
.kikin-primary-btn:hover {
background: #ffffff;
transform: translateY(-1px);
}
.kikin-secondary-btn {
background: rgba(255,255,255,0.05);
color: var(--color-pure-white);
font-family: var(--font-inter);
font-weight: 500;
font-size: 13px;
padding: 8px 16px;
border-radius: var(--radius-buttons, 8px);
text-decoration: none;
transition: all 0.2s;
border: 1px solid var(--color-slate);
display: inline-flex;
align-items: center;
}
.kikin-secondary-btn:hover {
background: rgba(255,255,255,0.1);
}
/* Badges inside links */
.kikin-nav-link .kikin-badge {
background: var(--color-coral-pulse, #ff6363);
color: var(--color-pure-white);
font-family: var(--font-geistmono);
font-size: 10px;
padding: 2px 6px;
border-radius: 6px;
position: absolute;
top: -2px;
right: -6px;
}
/* Sidecart Panel */
.sideCart-wrapper {
position: fixed;
top: 0;
right: -420px;
width: 400px;
height: 100vh;
background: transparent;
z-index: 2000;
transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sideCart-wrapper.active {
right: 16px;
}
.kikin-cart-panel {
position: absolute;
top: 16px;
bottom: 16px;
width: 100%;
background: var(--color-ink, #07080a);
border-radius: var(--radius-largecards, 20px);
border: 1px solid var(--color-slate, #2f3031);
box-shadow: var(--shadow-xl-2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.kikin-cart-header {
padding: 20px 24px;
border-bottom: 1px solid var(--color-slate);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-void-black);
}
.kikin-cart-title {
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.kikin-cart-close {
background: transparent;
border: none;
color: var(--color-ash);
font-size: 16px;
cursor: pointer;
transition: color 0.2s;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.kikin-cart-close:hover {
color: var(--color-coral-pulse);
}
.kikin-cart-content {
flex: 1;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Keyboard key shadow effect for items */
.kikin-cart-item {
background: var(--color-recessed, #111214);
border-radius: var(--radius-cards, 16px);
padding: 16px;
position: relative;
display: flex;
gap: 16px;
box-shadow: var(--shadow-subtle-3); /* the keyboard key shadow stack */
}
.kikin-cart-img-wrapper {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-slate);
}
.kikin-cart-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kikin-cart-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 24px;
}
.kikin-cart-item-title {
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 700;
text-decoration: none;
display: block;
line-height: 1.3;
}
.kikin-hours-box {
display: flex;
flex-direction: column;
gap: 4px;
background: rgba(255, 99, 99, 0.03);
border: 1px dashed rgba(255, 99, 99, 0.3);
border-radius: 6px;
padding: 8px 12px;
margin-top: 6px;
margin-bottom: 4px;
}
.kikin-hours-label {
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-ash);
display: flex;
align-items: center;
gap: 6px;
}
.kikin-hours-calc {
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-smoke);
}
.kikin-cart-meta {
font-family: var(--font-geistmono);
color: var(--color-ash);
font-size: 13px;
margin-top: 2px;
}
.kikin-cart-meta b {
color: var(--color-pure-white);
}
.kikin-cart-actions {
position: absolute;
right: 16px;
top: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.kikin-remove-hours {
color: var(--color-ash);
font-size: 16px;
transition: color 0.2s;
}
.kikin-remove-hours:hover {
color: #ff4757;
}
.kikin-cart-remove {
color: var(--color-ash);
font-size: 14px;
transition: color 0.2s;
}
.kikin-cart-remove:hover {
color: #ff4757;
}
.kikin-cart-footer {
padding: 24px;
background: var(--color-void-black);
border-top: 1px solid var(--color-slate);
}
.kikin-cart-total {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-ash);
font-family: var(--font-inter);
font-size: 13px;
margin-bottom: 16px;
}
.kikin-cart-total span {
color: var(--color-pure-white);
font-family: var(--font-geistmono);
font-size: 18px;
font-weight: 500;
}
.kikin-cart-buttons {
display: flex;
gap: 8px;
}
.kikin-cart-buttons a {
flex: 1;
text-align: center;
justify-content: center;
}
.kikin-cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--color-smoke);
font-family: var(--font-inter);
gap: 12px;
}
.kikin-cart-empty i {
font-size: 32px;
color: var(--color-slate);
}
/* Preloader & Back-to-top specific updates */
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--color-void-black);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
gap: 24px;
}
#preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.cockpit-loader {
position: relative;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.cockpit-loader-spinner {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--color-slate);
border-top-color: var(--color-coral-pulse);
animation: cockpit-spin 1s linear infinite;
box-shadow: 0 0 15px rgba(255, 99, 99, 0.2);
}
.cockpit-loader-icon {
font-size: 24px;
color: var(--color-cyber-yellow, #ffc107);
animation: cockpit-pulse 2s ease-in-out infinite;
}
.cockpit-loader-text {
font-family: var(--font-geistmono);
color: var(--color-ash);
font-size: 12px;
letter-spacing: 0.2em;
animation: cockpit-blink 1.5s step-end infinite;
}
@keyframes cockpit-spin {
to { transform: rotate(360deg); }
}
@keyframes cockpit-pulse {
0%, 100% { opacity: 0.7; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes cockpit-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
#backto-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 40px;
height: 40px;
background: var(--color-ink);
color: var(--color-pure-white);
border: 1px solid var(--color-slate);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 900;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
box-shadow: var(--shadow-subtle-3);
text-decoration: none;
}
#backto-top.show {
opacity: 1;
visibility: visible;
}
#backto-top:hover {
background: var(--color-mist);
color: var(--color-iron);
}
/* Extracted from breadcrumb.blade.php */
/* Raycast-Inspired Cockpit Breadcrumb */
.cockpit-hero-breadcrumb {
position: relative;
width: 100%;
height: 380px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding-bottom: 24px;
background-color: var(--color-void-black);
}
.cockpit-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.5; /* Dim the video slightly to keep text readable */
mix-blend-mode: screen; /* Creates a cool tech integration with the dark background */
}
.cockpit-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
/* Smooth gradient from solid dark void at bottom, to semi-transparent dark at top */
background: linear-gradient(to top, var(--color-void-black) 0%, rgba(4, 5, 6, 0.4) 100%);
}
.cockpit-breadcrumb-container {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--page-max-width, 1200px);
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 24px;
}
.cockpit-breadcrumb-title {
font-family: var(--font-inter);
font-size: 48px;
font-weight: 600;
color: var(--color-pure-white);
margin: 0;
letter-spacing: -0.02em;
text-shadow: 0 4px 24px rgba(0,0,0,0.8);
animation: cockpitFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cockpit-breadcrumb-nav {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(4, 5, 6, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--color-slate);
border-radius: var(--radius-buttons, 8px);
padding: 10px 16px;
box-shadow: var(--shadow-subtle-3);
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-smoke);
animation: cockpitFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
width: fit-content;
}
.cockpit-breadcrumb-item {
color: var(--color-ash);
text-decoration: none;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.cockpit-breadcrumb-item:hover {
color: var(--color-pure-white);
}
.cockpit-breadcrumb-item i {
font-size: 10px;
opacity: 0.8;
}
.cockpit-breadcrumb-sep {
color: var(--color-slate);
font-size: 10px;
font-weight: bold;
user-select: none;
}
.cockpit-breadcrumb-current {
color: var(--color-pure-white);
font-weight: 500;
}
@keyframes cockpitFadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.cockpit-hero-breadcrumb {
height: 280px;
padding-bottom: 32px;
}
.cockpit-breadcrumb-title {
font-size: 32px;
}
.cockpit-breadcrumb-nav {
flex-wrap: wrap;
padding: 8px 12px;
}
}
/* ========================================= */
/* ADDITIONAL CENTRALIZED CSS (Notifications & Cookies) */
/* ========================================= */
/* Extracted from notification.blade.php */
/* ==========================================================================
Cockpit Theme Notifications (Toasts)
========================================================================== */
.cockpit-toast-container {
position: fixed;
top: 90px; /* Just below the glass header */
right: 24px; /* Move to right side for a standard OS/app feel */
display: flex;
flex-direction: column;
gap: 12px;
z-index: 99999; /* Above almost everything */
pointer-events: none;
}
.cockpit-toast {
pointer-events: auto;
background-color: rgba(7, 8, 10, 0.7); /* Deep ink with transparency */
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--color-slate, #2f3031);
border-radius: var(--radius-largecards, 12px);
box-shadow: var(--shadow-xl-2, 0 20px 40px rgba(0,0,0,0.5)), inset 0 1px 0 rgba(255,255,255,0.05);
display: flex;
align-items: flex-start;
min-width: 300px;
max-width: 380px;
position: relative;
overflow: hidden;
padding: 16px;
gap: 14px;
animation: cockpitSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cockpit-toast.fade-out {
animation: cockpitSlideOut 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cockpitSlideIn {
0% { opacity: 0; transform: translateX(40px) scale(0.95); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cockpitSlideOut {
0% { opacity: 1; transform: translateX(0) scale(1); }
100% { opacity: 0; transform: translateX(40px) scale(0.95); }
}
/* Icon Container */
.cockpit-toast-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-top: 2px;
}
/* Status Specific Styles */
.cockpit-toast-success .cockpit-toast-icon {
background: rgba(46, 213, 115, 0.1);
color: #2ed573;
border: 1px solid rgba(46, 213, 115, 0.2);
}
.cockpit-toast-error .cockpit-toast-icon {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border: 1px solid rgba(255, 71, 87, 0.2);
}
.cockpit-toast-warning .cockpit-toast-icon {
background: rgba(255, 165, 2, 0.1);
color: #ffa502;
border: 1px solid rgba(255, 165, 2, 0.2);
}
.cockpit-toast-info .cockpit-toast-icon {
background: rgba(30, 144, 255, 0.1);
color: #1e90ff;
border: 1px solid rgba(30, 144, 255, 0.2);
}
.cockpit-toast-content {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.cockpit-toast-title {
font-family: var(--font-inter, sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--color-pure-white, #ffffff);
margin: 0;
line-height: 1.2;
}
.cockpit-toast-message {
font-family: var(--font-inter, sans-serif);
font-size: 13px;
color: var(--color-smoke, #6b6c6d);
line-height: 1.4;
}
.cockpit-toast-close {
background: none;
border: none;
color: var(--color-smoke, #6b6c6d);
cursor: pointer;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 4px;
}
.cockpit-toast-close:hover {
color: var(--color-pure-white, #ffffff);
background: rgba(255,255,255,0.05);
}
.cockpit-toast-close i {
font-size: 14px;
}
.cockpit-toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: rgba(255,255,255,0.1);
width: 100%;
}
.cockpit-toast-progress-bar {
height: 100%;
width: 100%;
animation: cockpitProgress 4s linear forwards;
}
.cockpit-toast-success .cockpit-toast-progress-bar { background-color: #2ed573; }
.cockpit-toast-error .cockpit-toast-progress-bar { background-color: #ff4757; }
.cockpit-toast-warning .cockpit-toast-progress-bar { background-color: #ffa502; }
.cockpit-toast-info .cockpit-toast-progress-bar { background-color: #1e90ff; }
@keyframes cockpitProgress {
0% { width: 100%; }
100% { width: 0%; }
}
@media (max-width: 576px) {
.cockpit-toast-container {
top: 80px;
left: 16px;
right: 16px;
}
.cockpit-toast {
min-width: 0;
width: 100%;
max-width: none;
}
}
/* Extracted from cookies.blade.php */
/* ==========================================================================
Cockpit Cookie Consent
========================================================================== */
.cockpit-cookies {
position: fixed !important;
bottom: 24px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: calc(100% - 48px) !important;
max-width: 900px !important;
background-color: var(--color-ink, #07080a) !important;
border: 1px solid var(--color-slate, #2f3031) !important;
border-radius: var(--radius-largecards, 16px) !important;
padding: 24px 32px !important;
z-index: 999999 !important;
box-shadow: var(--shadow-xl-2, 0 20px 40px rgba(0,0,0,0.5)) !important;
font-family: var(--font-inter, sans-serif) !important;
animation: cockpitFadeUpCenter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
box-sizing: border-box !important;
color: var(--color-ash, #9c9c9d) !important;
}
@keyframes cockpitFadeUpCenter {
from { opacity: 0; transform: translate(-50%, 20px) scale(0.98); }
to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.cockpit-cookies__wrapper {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
}
.cockpit-cookies__content {
flex: 1 !important;
min-width: 300px !important;
}
.cockpit-cookies__title {
font-family: var(--font-inter, sans-serif) !important;
font-size: 16px !important;
font-weight: 500 !important;
color: var(--color-pure-white, #ffffff) !important;
margin: 0 0 8px 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.cockpit-cookies__title::before {
content: '\f563'; /* fa-cookie-bite */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--color-coral-pulse, #ff6363);
}
.cockpit-cookies__intro p {
font-size: 13px !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.cockpit-cookies__intro a {
color: var(--color-pure-white, #ffffff) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
transition: color 0.2s ease !important;
}
.cockpit-cookies__intro a:hover {
color: var(--color-coral-pulse, #ff6363) !important;
}
.cockpit-cookies__actions {
display: flex !important;
gap: 12px !important;
align-items: center !important;
flex-shrink: 0 !important;
}
/* Buttons */
form.cockpit-cookiesBtn {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: inline-block !important;
}
.cockpit-cookiesBtn button,
button.cockpit-cookiesBtn {
font-family: var(--font-inter, sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 10px 20px !important;
border-radius: var(--radius-buttons, 8px) !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
appearance: none !important;
-webkit-appearance: none !important;
}
form.cockpit-cookiesBtn--accept button,
button.cockpit-cookiesBtn--accept {
background-color: var(--color-mist, #e6e6e6) !important;
color: var(--color-iron, #454647) !important;
border: 1px solid transparent !important;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.1)) !important;
}
form.cockpit-cookiesBtn--accept button:hover,
button.cockpit-cookiesBtn--accept:hover {
background-color: #ffffff !important;
transform: translateY(-1px) !important;
}
form.cockpit-cookiesBtn--essentials button,
button.cockpit-cookiesBtn--essentials {
background-color: rgba(255,255,255,0.05) !important;
color: var(--color-pure-white, #ffffff) !important;
border: 1px solid var(--color-slate, #2f3031) !important;
}
form.cockpit-cookiesBtn--essentials button:hover,
button.cockpit-cookiesBtn--essentials:hover {
background-color: rgba(255,255,255,0.1) !important;
}
.cockpit-cookies__btn--customize {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: var(--font-geistmono, monospace) !important;
font-size: 11px !important;
color: var(--color-smoke, #6b6c6d) !important;
text-decoration: none !important;
margin-top: 16px !important;
transition: color 0.2s ease !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
}
.cockpit-cookies__btn--customize:hover {
color: var(--color-pure-white, #ffffff) !important;
}
.cockpit-cookies__btn--customize svg {
transition: transform 0.3s ease !important;
width: 14px !important;
height: 14px !important;
}
.cockpit-cookies__btn--customize.is-active svg {
transform: rotate(180deg) !important;
}
.cockpit-cookies__expandable { display: none !important; }
.cockpit-cookies__expandable.is-open { display: block !important; }
/* Custom Form */
.cockpit-cookies__customize {
margin-top: 24px !important;
background-color: var(--color-recessed, #111214) !important;
border: 1px solid var(--color-slate, #2f3031) !important;
border-radius: var(--radius-lg, 8px) !important;
padding: 20px !important;
max-height: 40vh !important;
overflow-y: auto !important;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}
.cockpit-cookies__section {
margin-bottom: 16px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--color-slate, #2f3031) !important;
}
.cockpit-cookies__section:last-child {
margin-bottom: 0 !important; border-bottom: none !important; padding-bottom: 0 !important;
}
.cockpit-cookies__category {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
cursor: pointer !important;
position: relative !important;
margin: 0 !important;
}
.cockpit-cookies__category input {
margin-top: 4px !important;
accent-color: var(--color-coral-pulse, #ff6363) !important;
width: 16px !important;
height: 16px !important;
cursor: pointer !important;
}
.cockpit-cookies__box { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.cockpit-cookies__label { font-size: 14px !important; font-weight: 500 !important; color: var(--color-pure-white, #ffffff) !important; }
.cockpit-cookies__info { font-size: 13px !important; color: var(--color-smoke, #6b6c6d) !important; margin: 0 !important; line-height: 1.5 !important; }
.cockpit-cookies__details {
display: inline-block !important;
font-family: var(--font-geistmono, monospace) !important;
font-size: 11px !important;
color: var(--color-smoke, #6b6c6d) !important;
margin: 8px 0 0 28px !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: color 0.2s ease !important;
}
.cockpit-cookies__details:hover { color: var(--color-pure-white, #ffffff) !important; }
.cockpit-cookies__definitions {
list-style: none !important; padding: 16px !important; margin: 12px 0 0 28px !important;
background-color: var(--color-ink, #07080a) !important;
border: 1px solid var(--color-slate, #2f3031) !important;
border-radius: 6px !important;
}
.cockpit-cookies__cookie { margin-bottom: 12px !important; font-size: 12px !important; line-height: 1.5 !important; }
.cockpit-cookies__cookie:last-child { margin-bottom: 0 !important; }
.cockpit-cookies__name { font-weight: 500 !important; color: var(--color-pure-white, #ffffff) !important; margin: 0 0 2px 0 !important; font-family: var(--font-geistmono, monospace) !important; }
.cockpit-cookies__duration { font-style: normal !important; font-size: 11px !important; color: var(--color-smoke, #6b6c6d) !important; margin: 0 0 4px 0 !important; }
.cockpit-cookies__save { margin-top: 16px !important; display: flex !important; justify-content: flex-end !important; }
@media (max-width: 768px) {
.cockpit-cookies {
bottom: 16px !important;
width: calc(100% - 32px) !important;
padding: 24px 20px !important;
}
.cockpit-cookies__wrapper {
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
}
.cockpit-cookies__actions {
width: 100% !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.cockpit-cookiesBtn {
width: 100% !important;
}
}
/* ========================================= */
/* ADDITIONAL CENTRALIZED CSS (Footer) */
/* ========================================= */
/* Extracted from footer.blade.php */
/* Raycast-Inspired Cockpit Footer */
.cockpit-footer {
background-color: var(--color-void-black);
border-top: 1px solid var(--color-slate);
padding: 80px 16px 32px;
position: relative;
font-family: var(--font-inter);
}
.cockpit-footer-container {
max-width: var(--page-max-width, 1200px);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 64px;
}
/* CTA Section */
.cockpit-footer-cta {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-2xl, 16px);
padding: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
box-shadow: var(--shadow-subtle-3); /* The keyboard key stack */
}
.cockpit-footer-cta .cta-text h3 {
font-size: 24px;
color: var(--color-pure-white);
font-weight: 500;
margin: 0 0 8px;
}
.cockpit-footer-cta .cta-text p {
color: var(--color-ash);
font-size: 14px;
margin: 0;
}
.cockpit-footer-cta .cta-form {
display: flex;
gap: 8px;
width: 100%;
max-width: 400px;
position: relative;
}
.cockpit-footer-cta input {
flex: 1;
background: var(--color-recessed);
border: 1px solid transparent;
color: var(--color-pure-white);
padding: 12px 16px;
border-radius: var(--radius-lg, 8px);
font-family: var(--font-inter);
font-size: 14px;
outline: none;
transition: border-color 0.2s;
box-shadow: var(--shadow-subtle-5); /* Inset shadow */
}
.cockpit-footer-cta input:focus {
border-color: var(--color-smoke);
}
.cockpit-footer-cta button {
background: var(--color-mist);
color: var(--color-iron);
border: none;
padding: 12px 24px;
border-radius: var(--radius-lg, 8px);
font-weight: 500;
font-size: 14px;
cursor: pointer;
transition: transform 0.1s, background 0.2s;
white-space: nowrap;
}
.cockpit-footer-cta button:hover {
background: var(--color-pure-white);
transform: translateY(-1px);
}
.success-badge {
position: absolute;
bottom: -32px;
left: 0;
background: var(--color-graphite);
color: var(--color-success-green, #59d499);
font-family: var(--font-geistmono);
font-size: 12px;
padding: 4px 12px;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: all 0.3s;
}
.success-badge.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Grid Layout */
.cockpit-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
}
.cockpit-footer-brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.cockpit-footer-brand .brand-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
text-decoration: none;
color: var(--color-pure-white);
font-size: 22px;
font-weight: 700;
margin-bottom: 16px;
}
.cockpit-footer-brand .brand-logo img {
height: auto;
width: auto;
max-height: 60px;
max-width: 200px;
object-fit: contain;
background: var(--color-pure-white);
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.cockpit-footer-brand .brand-desc {
color: var(--color-smoke);
font-size: 13px;
line-height: 1.6;
margin: 0;
max-width: 320px;
}
.cockpit-footer-brand .brand-contact {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.cockpit-footer-brand .brand-contact a,
.cockpit-footer-brand .brand-contact span {
color: var(--color-ash);
text-decoration: none;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
}
.cockpit-footer-brand .brand-contact a:hover {
color: var(--color-pure-white);
}
.cockpit-footer-links h4 {
color: var(--color-pure-white);
font-size: 14px;
font-weight: 500;
margin: 0 0 16px;
}
.cockpit-footer-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cockpit-footer-links a {
color: var(--color-ash);
text-decoration: none;
font-size: 13px;
transition: color 0.2s;
}
.cockpit-footer-links a:hover {
color: var(--color-pure-white);
}
/* Meta Strip (Terminal style) */
.cockpit-footer-meta {
border-top: 1px solid var(--color-slate);
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.meta-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-smoke);
}
.meta-strip .divider {
color: var(--color-slate);
}
.status-green {
color: var(--color-success-green, #59d499);
}
.meta-payments img {
height: 24px;
opacity: 0.6;
transition: opacity 0.2s;
filter: grayscale(100%) brightness(1.5);
}
.meta-payments img:hover {
opacity: 1;
filter: none;
}
@media (max-width: 900px) {
.cockpit-footer-grid {
grid-template-columns: 1fr 1fr;
}
.cockpit-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.cockpit-footer-cta {
flex-direction: column;
align-items: flex-start;
}
.cockpit-footer-cta .cta-form {
max-width: 100%;
flex-direction: column;
}
.cockpit-footer-grid {
grid-template-columns: 1fr;
}
.meta-strip {
gap: 8px;
}
.meta-strip .divider {
display: none;
}
.meta-strip span {
width: 100%;
}
}
/* ========================================= */
/* ADDITIONAL CENTRALIZED CSS (Frontend Pages) */
/* ========================================= */
/* Extracted from cart.blade.php */
/* ==========================================================================
Cockpit Theme - Shopping Cart (2-Column Layout)
========================================================================== */
.cockpit-cart-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 120px;
min-height: 100vh;
}
.cockpit-cart-container {
max-width: var(--page-max-width, 1200px);
margin: 60px auto 0;
padding: 0 16px;
}
/* TOP HEADER */
.cockpit-cart-topbar {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--color-slate);
padding-bottom: 16px;
margin-bottom: 32px;
}
.cockpit-cart-topbar a {
color: var(--color-ash);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
}
.cockpit-cart-topbar a:hover {
color: var(--color-pure-white);
}
.cockpit-cart-credits {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-smoke);
text-transform: uppercase;
}
.cockpit-cart-credits b {
color: var(--color-pure-white);
font-size: 16px;
}
/* 2-COLUMN GRID */
.cockpit-cart-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-cart-grid {
grid-template-columns: 1fr;
}
}
/* LEFT: CART ITEMS */
.cockpit-cart-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.cockpit-cart-item {
display: flex;
align-items: center;
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-lg, 8px);
padding: 16px 24px;
box-shadow: var(--shadow-subtle-3);
transition: transform 0.2s, border-color 0.2s;
}
.cockpit-cart-item:hover {
transform: translateX(4px);
border-color: rgba(255,255,255,0.1);
}
.cockpit-cart-media {
width: 80px;
height: 60px;
border-radius: 4px;
overflow: hidden;
background: var(--color-recessed);
flex-shrink: 0;
margin-right: 24px;
}
.cockpit-cart-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cockpit-cart-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.cockpit-cart-title {
font-family: var(--font-inter);
font-size: 16px;
font-weight: 600;
color: var(--color-pure-white);
margin: 0;
}
.cockpit-cart-meta {
font-family: var(--font-geistmono);
font-size: 12px;
color: var(--color-coral-pulse);
}
.cockpit-cart-price {
font-family: var(--font-geistmono);
font-size: 18px;
font-weight: 700;
color: var(--color-pure-white);
margin-right: 24px;
}
.cockpit-btn-remove {
background: transparent;
border: 1px solid var(--color-slate);
color: var(--color-ash);
width: 32px;
height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.2s;
}
.cockpit-btn-remove:hover {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border-color: rgba(255, 71, 87, 0.3);
}
/* RIGHT: SIDEBAR SUMMARY */
.cockpit-cart-sidebar {
position: sticky;
top: 100px;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
display: flex;
flex-direction: column;
}
.cockpit-summary-title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 24px 0;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-summary-title i {
color: var(--color-coral-pulse);
}
.cockpit-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-geistmono);
font-size: 14px;
color: var(--color-smoke);
margin-bottom: 16px;
}
.cockpit-summary-row span.val {
color: var(--color-pure-white);
font-weight: 600;
}
.cockpit-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
margin-top: 8px;
padding-top: 24px;
border-top: 1px dashed var(--color-slate);
margin-bottom: 32px;
}
.cockpit-summary-total span.val {
font-size: 28px;
font-weight: 700;
color: var(--color-pure-white);
}
.cockpit-btn-purchase {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 700;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
transition: transform 0.2s, background-color 0.2s;
margin-bottom: 16px;
}
.cockpit-btn-purchase:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-trust {
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-ash);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
/* EMPTY STATE */
.cockpit-empty {
text-align: center;
padding: 100px 20px;
background: var(--color-ink);
border: 1px dashed var(--color-slate);
border-radius: 16px;
color: var(--color-smoke);
}
.cockpit-empty i {
font-size: 64px;
margin-bottom: 24px;
color: var(--color-slate);
}
.cockpit-empty h3 {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 12px;
}
.cockpit-empty p {
font-family: var(--font-inter);
font-size: 15px;
margin-bottom: 32px;
}
.cockpit-empty-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
text-decoration: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-family: var(--font-inter);
transition: all 0.2s;
}
.cockpit-empty-btn:hover {
background: var(--color-mist);
}
@media (max-width: 600px) {
.cockpit-cart-item {
flex-direction: column;
align-items: flex-start;
position: relative;
}
.cockpit-cart-media {
margin-bottom: 16px;
}
.cockpit-cart-price {
margin-top: 16px;
margin-right: 0;
}
.cockpit-btn-remove {
position: absolute;
top: 16px;
right: 16px;
}
}
/* Extracted from checkout.blade.php */
/* ==========================================================================
Cockpit Theme - Checkout Page
========================================================================== */
.cockpit-checkout-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-checkout-container {
max-width: var(--page-max-width, 1200px);
margin: 40px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-checkout-container {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* PANELS */
.cockpit-panel {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 40px;
box-shadow: var(--shadow-subtle-3);
margin-bottom: 32px;
}
.cockpit-panel:last-child {
margin-bottom: 0;
}
.cockpit-panel-title {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 600;
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--color-slate);
padding-bottom: 16px;
}
.cockpit-panel-title i {
color: var(--color-coral-pulse);
font-size: 20px;
}
/* FORM FIELDS */
.cockpit-row {
display: flex;
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.cockpit-row {
flex-direction: column;
gap: 24px;
}
}
.cockpit-field {
flex: 1;
display: flex;
flex-direction: column;
}
.cockpit-field label {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-field label span {
color: var(--color-coral-pulse);
margin-left: 4px;
}
.cockpit-input, .cockpit-select {
box-sizing: border-box;
width: 100%;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 14px 16px;
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
appearance: none; /* for select */
}
.cockpit-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
}
.cockpit-input:focus, .cockpit-select:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-input::placeholder {
color: var(--color-smoke);
}
span.text-danger {
color: var(--color-coral-pulse);
font-size: 12px;
margin-top: 6px;
font-family: var(--font-geistmono);
}
.cockpit-exp-row {
display: flex;
gap: 16px;
}
/* CAPTCHA */
.cockpit-captcha-row {
display: flex;
gap: 16px;
align-items: stretch;
}
.cockpit-captcha-image {
border-radius: var(--radius-inputs, 8px);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cockpit-captcha-image img {
border-radius: 4px;
}
/* CHECKBOXES */
.cockpit-checkbox-group {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--color-slate);
}
.cockpit-checkbox-label {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-ash);
line-height: 1.5;
}
.cockpit-checkbox-label input[type="checkbox"] {
accent-color: var(--color-coral-pulse);
width: 16px;
height: 16px;
cursor: pointer;
background-color: var(--color-recessed);
border: 1px solid var(--color-slate);
flex-shrink: 0;
margin-top: 2px;
}
.cockpit-checkbox-label a {
color: var(--color-pure-white);
text-decoration: none;
font-weight: 500;
}
.cockpit-checkbox-label a:hover {
text-decoration: underline;
color: var(--color-coral-pulse);
}
/* SUMMARY COLUMN */
.cockpit-checkout-right .cockpit-summary-box {
display: block;
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
position: sticky;
top: 100px;
}
.cockpit-oitems {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.cockpit-oitem {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-lg, 8px);
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cockpit-oitem__left {
display: flex;
align-items: center;
gap: 16px;
}
.cockpit-oitem__ico {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-pure-white);
font-size: 16px;
}
.cockpit-oitem__pts {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-pure-white);
font-weight: 600;
margin-bottom: 4px;
}
.cockpit-oitem__meta {
font-family: var(--font-inter);
font-size: 12px;
color: var(--color-smoke);
}
.cockpit-oitem__price {
font-family: var(--font-geistmono);
font-size: 15px;
font-weight: 600;
color: var(--color-pure-white);
}
.cockpit-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
border-top: 1px dashed var(--color-slate);
border-bottom: 1px dashed var(--color-slate);
margin-bottom: 24px;
}
.cockpit-summary-total .label {
font-family: var(--font-inter);
font-size: 16px;
font-weight: 600;
color: var(--color-ash);
text-transform: uppercase;
}
.cockpit-summary-total .value {
font-family: var(--font-geistmono);
font-size: 24px;
font-weight: 700;
color: var(--color-pure-white);
}
.cockpit-btn-purchase {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px 24px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(255,255,255,0.1);
}
.cockpit-btn-purchase:hover {
background: var(--color-mist);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,255,255,0.2);
}
.cockpit-btn-purchase i {
font-size: 16px;
}
.cockpit-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
font-family: var(--font-inter);
font-size: 12px;
color: var(--color-success-green, #59d499);
}
.cockpit-trust i {
font-size: 14px;
}
.cockpit-paylogos {
margin-top: 24px;
text-align: center;
}
.cockpit-paylogos img {
max-width: 100%;
height: auto;
opacity: 0.7;
filter: grayscale(100%);
transition: opacity 0.3s, filter 0.3s;
}
.cockpit-paylogos img:hover {
opacity: 1;
filter: grayscale(0%);
}
.cockpit-select option {
background-color: var(--color-ink);
color: var(--color-pure-white);
}
.cockpit-dba-text {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--color-slate);
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.cockpit-dba-text span {
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-smoke);
line-height: 1.5;
}
.cockpit-dba-text img {
height: 22px;
width: auto;
opacity: 0.8;
}
/* Extracted from contact.blade.php */
/* ==========================================================================
Cockpit Theme - Contact Page
========================================================================== */
.cockpit-contact-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-contact-container {
max-width: var(--page-max-width, 1200px);
margin: 40px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-contact-container {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* LEFT: FORM */
.cockpit-contact-form-col {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 40px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.cockpit-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
line-height: 1.6;
}
.cockpit-row {
display: flex;
gap: 20px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.cockpit-row {
flex-direction: column;
gap: 24px;
}
}
.cockpit-field {
flex: 1;
display: flex;
flex-direction: column;
}
.cockpit-field label {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cockpit-input-wrap i {
position: absolute;
left: 16px;
color: var(--color-smoke);
font-size: 14px;
}
.cockpit-input-wrap input,
.cockpit-input-wrap textarea {
box-sizing: border-box;
width: 100%;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 12px 16px 12px 42px; /* left padding for icon */
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input-wrap textarea {
padding-left: 16px; /* Textarea icon is positioned differently or removed */
min-height: 140px;
resize: vertical;
}
.cockpit-input-wrap input:focus,
.cockpit-input-wrap textarea:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-input-wrap input::placeholder,
.cockpit-input-wrap textarea::placeholder {
color: var(--color-smoke);
}
span.error {
color: var(--color-coral-pulse);
font-size: 12px;
margin-top: 6px;
font-family: var(--font-geistmono);
}
.cockpit-submit-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 14px 28px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
width: 100%;
}
.cockpit-submit-btn:hover {
background: var(--color-mist);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
/* RIGHT: INFO PANEL */
.cockpit-info-panel {
display: flex;
flex-direction: column;
gap: 24px;
}
.cockpit-info-card {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-info-card h3 {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-slate);
padding-bottom: 12px;
color: var(--color-pure-white);
}
.cockpit-detail-item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.cockpit-detail-item:last-child {
margin-bottom: 0;
}
.cockpit-detail-icon {
width: 40px;
height: 40px;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-pure-white);
flex-shrink: 0;
transition: background 0.2s, color 0.2s;
}
.cockpit-detail-item:hover .cockpit-detail-icon {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-detail-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.cockpit-detail-text label {
font-family: var(--font-geistmono);
font-size: 11px;
color: var(--color-smoke);
text-transform: uppercase;
}
.cockpit-detail-text strong,
.cockpit-detail-text a {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
color: var(--color-pure-white);
text-decoration: none;
transition: color 0.2s;
}
.cockpit-detail-text a:hover {
color: var(--color-coral-pulse);
}
.cockpit-support-box {
background: linear-gradient(135deg, var(--color-coral-pulse) 0%, #ff8a8a 100%);
border-radius: var(--radius-largecards, 16px);
padding: 24px;
color: var(--color-void-black);
display: flex;
align-items: center;
gap: 16px;
box-shadow: 0 10px 20px rgba(255,99,99,0.2);
}
.cockpit-support-box i {
font-size: 28px;
}
.cockpit-support-box div {
display: flex;
flex-direction: column;
}
.cockpit-support-box span {
font-family: var(--font-geistmono);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
opacity: 0.8;
}
.cockpit-support-box strong {
font-family: var(--font-inter);
font-size: 16px;
font-weight: 700;
}
.cockpit-captcha-row {
display: flex;
gap: 16px;
align-items: stretch;
}
.cockpit-captcha-image {
border-radius: var(--radius-inputs, 8px);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cockpit-captcha-image img {
border-radius: 4px;
}
/* Extracted from forget-pwd-form.blade.php */
/* ==========================================================================
Cockpit Theme - Forgot Password Page
========================================================================== */
.cockpit-auth-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-auth-container {
max-width: 600px;
margin: 40px auto 0;
padding: 0 16px;
}
.cockpit-auth-form-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
text-align: center;
letter-spacing: -0.01em;
}
.cockpit-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
line-height: 1.6;
text-align: center;
}
.cockpit-field {
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
.cockpit-field label {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cockpit-input-wrap i {
position: absolute;
left: 16px;
color: var(--color-smoke);
font-size: 14px;
}
.cockpit-input-wrap input {
box-sizing: border-box;
width: 100%;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 12px 16px 12px 42px; /* left padding for icon */
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input-wrap input:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-input-wrap input::placeholder {
color: var(--color-smoke);
}
span.error {
color: var(--color-coral-pulse);
font-size: 12px;
margin-top: 6px;
font-family: var(--font-geistmono);
}
.cockpit-captcha-row {
display: flex;
gap: 16px;
align-items: stretch;
}
.cockpit-captcha-image {
border-radius: var(--radius-inputs, 8px);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cockpit-captcha-image img {
border-radius: 4px;
}
.cockpit-submit-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px 28px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
width: 100%;
margin-top: 8px;
}
.cockpit-submit-btn:hover {
background: var(--color-mist);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.cockpit-auth-links {
margin-top: 24px;
display: flex;
justify-content: center;
}
.cockpit-auth-links a {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
text-decoration: none;
transition: color 0.2s;
}
.cockpit-auth-links a:hover {
color: var(--color-pure-white);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Extracted from gamecart.blade.php */
/* ==========================================================================
Cockpit Theme - Game Cart (Points Store)
========================================================================== */
.cockpit-cart-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 120px;
min-height: 100vh;
}
.cockpit-cart-container {
max-width: var(--page-max-width, 1200px);
margin: 60px auto 0;
padding: 0 16px;
}
/* TOP HEADER */
.cockpit-cart-topbar {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--color-slate);
padding-bottom: 16px;
margin-bottom: 32px;
}
.cockpit-cart-topbar > a {
color: var(--color-ash);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s;
}
.cockpit-cart-topbar > a:hover {
color: var(--color-pure-white);
}
.cockpit-cart-credits {
font-family: var(--font-geistmono);
font-size: 14px;
font-weight: 600;
color: var(--color-coral-pulse);
background: rgba(255, 99, 99, 0.1);
padding: 8px 16px;
border-radius: 8px;
border: 1px solid rgba(255, 99, 99, 0.2);
display: flex;
align-items: center;
gap: 8px;
}
.cockpit-cart-credits b {
font-size: 16px;
color: var(--color-pure-white);
}
/* 2-COLUMN GRID */
.cockpit-cart-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-cart-grid {
grid-template-columns: 1fr;
}
}
/* LEFT: CART ITEMS (Horizontal Image Cards) */
.cockpit-cart-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.cockpit-cart-card {
display: flex;
flex-direction: row;
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
overflow: hidden;
box-shadow: var(--shadow-subtle-3);
transition: transform 0.2s, border-color 0.2s;
align-items: center; /* Center to prevent vertical stretching */
}
.cockpit-cart-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.1);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.cockpit-cart-media {
width: 340px; /* Slightly wider to account for padding */
flex-shrink: 0;
position: relative;
border-right: 1px solid var(--color-slate);
padding: 16px; /* Add padding around the image */
box-sizing: border-box;
}
.cockpit-cart-media > a {
display: block;
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px; /* Rounded corners for the image */
overflow: hidden;
}
.cockpit-cart-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cockpit-cargo-badge {
position: absolute;
top: 24px; /* Push in 8px from the 16px padding */
left: 24px;
background: rgba(4, 5, 6, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--color-slate);
color: var(--color-pure-white);
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.cockpit-cart-body {
flex: 1;
padding: 24px;
display: flex;
flex-direction: column;
}
.cockpit-cart-title {
font-family: var(--font-inter);
font-size: 20px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 16px 0;
text-decoration: none;
transition: color 0.2s;
}
.cockpit-cart-title:hover {
color: var(--color-coral-pulse);
}
/* Addon Box */
.cockpit-addon-box {
background: rgba(255,255,255,0.02);
border: 1px dashed var(--color-slate);
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
position: relative;
}
.cockpit-addon-remove {
position: absolute;
top: 16px;
right: 16px;
color: var(--color-ash);
transition: color 0.2s;
}
.cockpit-addon-remove:hover {
color: #ff4757;
}
.cockpit-addon-title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
color: var(--color-pure-white);
margin-bottom: 8px;
}
.cockpit-addon-calc {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-smoke);
margin: 0 0 12px 0;
}
.cockpit-addon-total {
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-ash);
}
.cockpit-addon-total b {
color: var(--color-coral-pulse);
font-weight: 700;
}
.cockpit-cart-foot {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
border-top: 1px solid var(--color-slate);
}
.cockpit-cart-price {
font-family: var(--font-geistmono);
font-size: 14px;
color: var(--color-ash);
display: flex;
align-items: baseline;
gap: 6px;
}
.cockpit-cart-price b {
font-size: 22px;
font-weight: 700;
color: var(--color-pure-white);
}
.cockpit-btn-remove {
background: transparent;
border: 1px solid var(--color-slate);
color: var(--color-ash);
padding: 8px 12px;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.cockpit-btn-remove:hover {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border-color: rgba(255, 71, 87, 0.3);
}
/* RIGHT: SIDEBAR SUMMARY */
.cockpit-cart-sidebar {
position: sticky;
top: 100px;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
display: flex;
flex-direction: column;
}
.cockpit-summary-title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 24px 0;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-summary-title i {
color: var(--color-coral-pulse);
}
.cockpit-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-geistmono);
font-size: 14px;
color: var(--color-smoke);
margin-bottom: 16px;
}
.cockpit-summary-row span.val {
color: var(--color-pure-white);
font-weight: 600;
}
.cockpit-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
margin-top: 8px;
padding-top: 24px;
border-top: 1px dashed var(--color-slate);
margin-bottom: 32px;
}
.cockpit-summary-total span.val {
font-size: 28px;
font-weight: 700;
color: var(--color-coral-pulse);
display: flex;
align-items: baseline;
gap: 6px;
}
.cockpit-summary-total span.val small {
font-size: 14px;
color: var(--color-ash);
}
.cockpit-btn-purchase {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 700;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
transition: transform 0.2s, background-color 0.2s;
margin-bottom: 16px;
}
.cockpit-btn-purchase:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-trust {
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-ash);
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
/* EMPTY STATE */
.cockpit-empty {
text-align: center;
padding: 100px 20px;
background: var(--color-ink);
border: 1px dashed var(--color-slate);
border-radius: 16px;
color: var(--color-smoke);
}
.cockpit-empty i {
font-size: 64px;
margin-bottom: 24px;
color: var(--color-slate);
}
.cockpit-empty h3 {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 12px;
}
.cockpit-empty p {
font-family: var(--font-inter);
font-size: 15px;
margin-bottom: 32px;
}
.cockpit-empty-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
text-decoration: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
font-family: var(--font-inter);
transition: all 0.2s;
}
.cockpit-empty-btn:hover {
background: var(--color-mist);
}
@media (max-width: 768px) {
.cockpit-cart-card {
flex-direction: column;
align-items: stretch;
}
.cockpit-cart-media {
width: 100%;
height: auto;
border-right: none;
border-bottom: 1px solid var(--color-slate);
}
.cockpit-cart-foot {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
/* Extracted from login.blade.php */
/* ==========================================================================
Cockpit Theme - Login Page
========================================================================== */
.cockpit-auth-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-auth-container {
max-width: 600px;
margin: 40px auto 0;
padding: 0 16px;
}
.cockpit-auth-form-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
text-align: center;
letter-spacing: -0.01em;
}
.cockpit-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
line-height: 1.6;
text-align: center;
}
.cockpit-field {
display: flex;
flex-direction: column;
margin-bottom: 24px;
}
.cockpit-field label {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cockpit-input-wrap i:not(.toggle-password) {
position: absolute;
left: 16px;
color: var(--color-smoke);
font-size: 14px;
}
.cockpit-input-wrap .toggle-password {
position: absolute;
right: 16px;
color: var(--color-smoke);
font-size: 14px;
cursor: pointer;
transition: color 0.2s;
z-index: 2;
}
.cockpit-input-wrap .toggle-password:hover {
color: var(--color-pure-white);
}
.cockpit-input-wrap input {
box-sizing: border-box;
width: 100%;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 12px 42px; /* left and right padding for icons */
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input-wrap input:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-input-wrap input::placeholder {
color: var(--color-smoke);
}
span.error {
color: var(--color-coral-pulse);
font-size: 12px;
margin-top: 6px;
font-family: var(--font-geistmono);
}
.cockpit-field-checkbox {
margin-bottom: 32px;
}
.cockpit-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
}
.cockpit-checkbox-label input[type="checkbox"] {
accent-color: var(--color-coral-pulse);
width: 16px;
height: 16px;
cursor: pointer;
background-color: var(--color-recessed);
border: 1px solid var(--color-slate);
}
.cockpit-submit-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px 28px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
width: 100%;
}
.cockpit-submit-btn:hover {
background: var(--color-mist);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.cockpit-auth-links {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cockpit-auth-links a {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
text-decoration: none;
transition: color 0.2s;
}
.cockpit-auth-links a:hover {
color: var(--color-pure-white);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Extracted from order-failed.blade.php */
/* ==========================================================================
Cockpit Theme - Order Failed Page
========================================================================== */
.cockpit-order-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-order-container {
max-width: 600px;
margin: 60px auto 0;
padding: 0 16px;
}
.cockpit-order-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
text-align: center;
}
.cockpit-order-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px;
}
.cockpit-order-icon.fail {
background: rgba(255, 71, 87, 0.1);
color: #ff4757;
border: 1px solid rgba(255, 71, 87, 0.2);
}
.cockpit-order-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
}
.cockpit-order-sub {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
}
.cockpit-order-fields {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-lg, 8px);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
text-align: left;
}
.cockpit-order-field {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
}
.cockpit-order-field:last-child {
padding-bottom: 0;
border-bottom: none;
}
.cockpit-order-field__key {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-ash);
text-transform: uppercase;
}
.cockpit-order-field__right {
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-order-field__val {
font-family: var(--font-geistmono);
font-size: 15px;
font-weight: 600;
color: var(--color-pure-white);
}
.cockpit-copy-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--color-slate);
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-pure-white);
cursor: pointer;
transition: all 0.2s;
}
.cockpit-copy-btn:hover {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-copy-btn i.fa-check {
display: none;
}
.cockpit-copy-btn.copied {
background: rgba(46, 213, 115, 0.1);
border-color: rgba(46, 213, 115, 0.3);
}
.cockpit-copy-btn.copied i.fa-copy {
display: none;
}
.cockpit-copy-btn.copied i.fa-check {
display: inline-block;
color: #2ed573;
}
.cockpit-order-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 32px;
}
.cockpit-btn-primary {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 14px 24px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.2s, background-color 0.2s;
}
.cockpit-btn-primary:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-btn-ghost {
background: transparent;
color: var(--color-pure-white);
border: 1px solid var(--color-slate);
border-radius: var(--radius-buttons, 8px);
padding: 14px 24px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s;
}
.cockpit-btn-ghost:hover {
background: rgba(255,255,255,0.05);
}
.cockpit-order-msg {
background: rgba(255, 71, 87, 0.05);
border: 1px dashed rgba(255, 71, 87, 0.2);
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
text-align: left;
}
.cockpit-order-msg p {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
line-height: 1.6;
margin-bottom: 8px;
}
.cockpit-order-msg p:last-child {
margin-bottom: 0;
}
.cockpit-order-msg a {
color: #ff4757;
text-decoration: none;
}
.cockpit-order-msg a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.cockpit-order-actions {
flex-direction: column;
}
.cockpit-order-field {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Extracted from order-success.blade.php */
/* ==========================================================================
Cockpit Theme - Order Success Page
========================================================================== */
.cockpit-order-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-order-container {
max-width: 600px;
margin: 60px auto 0;
padding: 0 16px;
}
.cockpit-order-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
text-align: center;
}
.cockpit-order-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px;
}
.cockpit-order-icon.success {
background: rgba(46, 213, 115, 0.1);
color: #2ed573;
border: 1px solid rgba(46, 213, 115, 0.2);
}
.cockpit-order-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
}
.cockpit-order-sub {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
}
.cockpit-order-fields {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-lg, 8px);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
text-align: left;
}
.cockpit-order-field {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
}
.cockpit-order-field:last-child {
padding-bottom: 0;
border-bottom: none;
}
.cockpit-order-field__key {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-ash);
text-transform: uppercase;
}
.cockpit-order-field__right {
display: flex;
align-items: center;
gap: 12px;
}
.cockpit-order-field__val {
font-family: var(--font-geistmono);
font-size: 15px;
font-weight: 600;
color: var(--color-pure-white);
}
.cockpit-copy-btn {
background: rgba(255,255,255,0.05);
border: 1px solid var(--color-slate);
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-pure-white);
cursor: pointer;
transition: all 0.2s;
}
.cockpit-copy-btn:hover {
background: var(--color-pure-white);
color: var(--color-void-black);
}
.cockpit-copy-btn i.fa-check {
display: none;
}
.cockpit-copy-btn.copied {
background: rgba(46, 213, 115, 0.1);
border-color: rgba(46, 213, 115, 0.3);
}
.cockpit-copy-btn.copied i.fa-copy {
display: none;
}
.cockpit-copy-btn.copied i.fa-check {
display: inline-block;
color: #2ed573;
}
.cockpit-order-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-top: 32px;
}
.cockpit-btn-primary {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 14px 24px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.2s, background-color 0.2s;
}
.cockpit-btn-primary:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-btn-ghost {
background: transparent;
color: var(--color-pure-white);
border: 1px solid var(--color-slate);
border-radius: var(--radius-buttons, 8px);
padding: 14px 24px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background-color 0.2s;
}
.cockpit-btn-ghost:hover {
background: rgba(255,255,255,0.05);
}
.cockpit-order-msg p {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
line-height: 1.6;
}
@media (max-width: 480px) {
.cockpit-order-actions {
flex-direction: column;
}
.cockpit-order-field {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
/* Extracted from page.blade.php */
/* ==========================================================================
Cockpit Theme - Legal/Dynamic Pages
========================================================================== */
.cockpit-page-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-doc-layout {
max-width: var(--page-max-width, 1200px);
margin: 40px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-doc-layout {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* SIDEBAR */
.cockpit-doc-sidebar {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 24px;
box-shadow: var(--shadow-subtle-3);
position: sticky;
top: 100px;
}
.cockpit-sidebar-title {
display: block;
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
}
.cockpit-nav-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cockpit-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-lg, 8px);
color: var(--color-smoke);
text-decoration: none;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.cockpit-nav-item i {
font-size: 14px;
color: var(--color-ash);
transition: color 0.2s;
}
.cockpit-nav-item:hover {
background: rgba(255,255,255,0.02);
color: var(--color-pure-white);
border-color: var(--color-slate);
}
.cockpit-nav-item:hover i {
color: var(--color-pure-white);
}
.cockpit-nav-item.is-active {
background: var(--color-recessed);
color: var(--color-pure-white);
border: 1px solid var(--color-coral-pulse);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.cockpit-nav-item.is-active i {
color: var(--color-coral-pulse);
}
/* MAIN CONTENT */
.cockpit-doc-main {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-doc-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-slate);
padding-bottom: 24px;
margin-bottom: 32px;
}
.cockpit-doc-header h1 {
font-family: var(--font-inter);
font-size: 32px;
font-weight: 700;
margin: 0;
color: var(--color-pure-white);
}
.cockpit-copy-btn {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-buttons, 8px);
color: var(--color-pure-white);
padding: 10px 16px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.cockpit-copy-btn:hover {
background: var(--color-mist);
}
.cockpit-copy-btn.is-copied {
background: rgba(46, 213, 115, 0.1);
border-color: rgba(46, 213, 115, 0.3);
color: #2ed573;
}
.cockpit-copy-btn.is-copied .legal-copy__ico { display: none; }
.cockpit-copy-btn.is-copied .legal-copy__done { display: inline-block !important; }
.cockpit-copy-btn.is-copied .legal-copy__t1 { display: none; }
.cockpit-copy-btn.is-copied .legal-copy__t2 { display: inline-block !important; }
/* PROSE (WYSIWYG FORMATTING) */
.cockpit-prose {
font-family: var(--font-inter);
color: var(--color-smoke);
font-size: 15px;
line-height: 1.7;
}
.cockpit-prose h1,
.cockpit-prose h2,
.cockpit-prose h3,
.cockpit-prose h4,
.cockpit-prose h5,
.cockpit-prose h6 {
color: var(--color-pure-white);
font-weight: 600;
margin-top: 32px;
margin-bottom: 16px;
}
.cockpit-prose h1 { font-size: 28px; }
.cockpit-prose h2 { font-size: 24px; border-bottom: 1px dashed var(--color-slate); padding-bottom: 8px; }
.cockpit-prose h3 { font-size: 20px; }
.cockpit-prose h4 { font-size: 18px; }
.cockpit-prose h5 { font-size: 16px; }
.cockpit-prose h6 { font-size: 15px; }
.cockpit-prose p {
margin-bottom: 20px;
}
/* Bullet Points and Lists */
.cockpit-prose ul, .cockpit-prose ol {
margin-bottom: 24px;
padding-left: 24px;
}
.cockpit-prose li {
margin-bottom: 10px;
position: relative;
}
.cockpit-prose ul {
list-style-type: none;
}
.cockpit-prose ul li::before {
content: '';
position: absolute;
left: -20px;
top: 8px;
width: 6px;
height: 6px;
background-color: var(--color-coral-pulse);
border-radius: 50%;
}
.cockpit-prose ol {
list-style-type: decimal;
}
.cockpit-prose ol li::marker {
color: var(--color-ash);
font-family: var(--font-geistmono);
font-size: 13px;
font-weight: 600;
}
/* Inline Images */
.cockpit-prose img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: inline-block;
vertical-align: middle; /* Ensures images stay inline with text */
margin: 4px 8px;
}
/* Links */
.cockpit-prose a {
color: var(--color-pure-white);
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.2s;
}
.cockpit-prose a:hover {
color: var(--color-coral-pulse);
}
/* Tables */
.cockpit-prose table {
width: 100%;
border-collapse: collapse;
margin-bottom: 32px;
background: var(--color-recessed);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-slate);
}
.cockpit-prose th, .cockpit-prose td {
padding: 16px;
text-align: left;
border-bottom: 1px solid var(--color-slate);
}
.cockpit-prose th {
background: rgba(255,255,255,0.03);
color: var(--color-pure-white);
font-weight: 600;
font-family: var(--font-geistmono);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-prose td {
font-size: 14px;
}
.cockpit-prose tr:last-child td {
border-bottom: none;
}
.cockpit-prose tr:hover td {
background: rgba(255,255,255,0.01);
}
/* Blockquotes */
.cockpit-prose blockquote {
border-left: 4px solid var(--color-coral-pulse);
background: var(--color-recessed);
padding: 16px 24px;
margin: 24px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
}
.cockpit-prose blockquote p {
margin-bottom: 0;
}
/* Extracted from product-lists.blade.php */
/* ==========================================================================
Cockpit Theme - Product Lists (Horizontal)
========================================================================== */
.cockpit-products-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 100px;
min-height: 100vh;
}
.cockpit-products-container {
max-width: var(--page-max-width, 1200px);
margin: 40px auto 0;
padding: 0 16px;
}
/* Category Hero */
.cockpit-cat-hero {
display: flex;
align-items: center;
gap: 32px;
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
margin-bottom: 48px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-cat-img-wrapper {
width: 240px;
aspect-ratio: 16/9;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--color-slate);
background: var(--color-recessed);
}
.cockpit-cat-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cockpit-cat-info {
flex: 1;
}
.cockpit-cat-title {
font-family: var(--font-inter);
font-size: 32px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 12px 0;
letter-spacing: -0.02em;
}
.cockpit-cat-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin: 0;
line-height: 1.6;
}
/* Global Header */
.cockpit-global-header {
text-align: center;
margin-bottom: 48px;
padding: 24px 0;
}
.cockpit-global-header h2 {
font-family: var(--font-inter);
font-size: 36px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.cockpit-global-header p {
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
}
/* Controls / Search Bar */
.cockpit-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 14px 24px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.cockpit-search {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
max-width: 400px;
}
.cockpit-search i {
color: var(--color-smoke);
}
.cockpit-search input {
background: transparent;
border: none;
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 15px;
width: 100%;
}
.cockpit-search input::placeholder {
color: var(--color-ash);
}
.cockpit-search input:focus {
outline: none;
}
.cockpit-stats {
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-ash);
text-transform: uppercase;
}
.cockpit-stats span {
color: var(--color-pure-white);
font-weight: 700;
}
/* Product List (Horizontal Layout) */
.cockpit-product-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.cockpit-card {
display: flex;
flex-direction: row;
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
overflow: hidden;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: var(--shadow-subtle-3);
align-items: stretch;
}
.cockpit-card:hover {
transform: translateY(-3px);
border-color: var(--color-coral-pulse);
box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255, 99, 99, 0.2);
}
.cockpit-card-img {
width: 380px;
flex-shrink: 0;
position: relative;
border-right: 1px solid var(--color-slate);
background: var(--color-recessed);
}
.cockpit-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cockpit-card-content {
padding: 32px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.cockpit-card-title {
font-family: var(--font-inter);
font-size: 26px;
font-weight: 700;
color: var(--color-pure-white);
margin: 0 0 12px 0;
line-height: 1.3;
}
.cockpit-card-summary {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-smoke);
line-height: 1.6;
margin-bottom: 0;
/* Hover effect */
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.4s ease, margin-bottom 0.4s ease;
word-wrap: break-word;
}
.cockpit-card:hover .cockpit-card-summary {
max-height: 200px;
opacity: 1;
margin-bottom: 24px;
}
.cockpit-card-footer {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px dashed var(--color-slate);
}
.cockpit-card-price {
font-family: var(--font-geistmono);
font-size: 16px;
font-weight: 600;
color: var(--color-coral-pulse);
display: inline-flex;
align-items: baseline;
gap: 4px;
background: rgba(255, 99, 99, 0.1);
padding: 6px 12px;
border-radius: 6px;
border: 1px solid rgba(255, 99, 99, 0.2);
}
.cockpit-card-price span {
font-size: 12px;
color: var(--color-pure-white);
opacity: 0.8;
}
.cockpit-card-btn {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
color: var(--color-ash);
transition: color 0.2s, gap 0.2s;
}
.cockpit-card:hover .cockpit-card-btn {
color: var(--color-pure-white);
gap: 16px;
}
.cockpit-card-btn i {
color: var(--color-coral-pulse);
}
/* Empty State */
.cockpit-empty {
text-align: center;
padding: 80px 20px;
background: var(--color-ink);
border: 1px dashed var(--color-slate);
border-radius: 16px;
color: var(--color-smoke);
}
.cockpit-empty i {
font-size: 48px;
margin-bottom: 24px;
color: var(--color-slate);
}
.cockpit-empty h3 {
font-family: var(--font-inter);
font-size: 20px;
font-weight: 600;
color: var(--color-pure-white);
margin-bottom: 8px;
}
.cockpit-empty p {
font-family: var(--font-inter);
font-size: 14px;
}
/* Responsive */
@media (max-width: 991px) {
.cockpit-cat-hero {
flex-direction: column;
text-align: center;
}
.cockpit-cat-img-wrapper {
width: 100%;
max-width: 400px;
}
}
@media (max-width: 768px) {
.cockpit-card {
flex-direction: column;
}
.cockpit-card-img {
width: 100%;
height: 240px;
border-right: none;
border-bottom: 1px solid var(--color-slate);
}
.cockpit-card-content {
padding: 24px;
}
.cockpit-controls {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.cockpit-search {
max-width: 100%;
width: 100%;
}
}
/* Extracted from product_detail.blade.php */
/* ==========================================================================
Cockpit Theme - Product Detail
========================================================================== */
.cockpit-detail-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 100px;
min-height: 100vh;
}
.cockpit-detail-container {
max-width: var(--page-max-width, 1200px);
margin: 40px auto 0;
padding: 0 16px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: start;
}
@media (max-width: 991px) {
.cockpit-detail-container {
grid-template-columns: 1fr;
}
}
/* MAIN COLUMN (LEFT) */
.cockpit-detail-main {
display: flex;
flex-direction: column;
gap: 40px;
}
.cockpit-detail-header h1 {
font-family: var(--font-inter);
font-size: 40px;
font-weight: 700;
margin: 0 0 16px 0;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--color-pure-white);
}
.cockpit-detail-summary {
font-family: var(--font-inter);
font-size: 16px;
color: var(--color-smoke);
line-height: 1.6;
margin: 0;
padding-left: 20px;
border-left: 4px solid var(--color-coral-pulse);
background: rgba(255, 99, 99, 0.05);
padding: 16px 20px;
border-radius: 0 8px 8px 0;
}
.cockpit-detail-gallery {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
overflow: hidden;
box-shadow: var(--shadow-subtle-3);
padding: 8px;
}
.cockpit-detail-hero {
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px;
overflow: hidden;
position: relative;
background: var(--color-recessed);
}
.cockpit-detail-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cockpit-thumb-strip {
display: flex;
gap: 12px;
margin-top: 12px;
overflow-x: auto;
padding-bottom: 4px;
}
.cockpit-thumb-strip::-webkit-scrollbar { height: 4px; }
.cockpit-thumb-strip::-webkit-scrollbar-thumb { background: var(--color-slate); border-radius: 4px; }
.cockpit-thumb-item {
width: 120px;
aspect-ratio: 16/9;
border-radius: 6px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s;
opacity: 0.5;
flex-shrink: 0;
}
.cockpit-thumb-item:hover { opacity: 0.8; }
.cockpit-thumb-item.active {
border-color: var(--color-coral-pulse);
opacity: 1;
}
.cockpit-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cockpit-detail-section {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-section-title {
font-family: var(--font-inter);
font-size: 20px;
font-weight: 600;
color: var(--color-pure-white);
margin: 0 0 24px 0;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px dashed var(--color-slate);
}
.cockpit-section-title i {
color: var(--color-coral-pulse);
}
.cockpit-prose {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
line-height: 1.7;
}
.cockpit-prose h1, .cockpit-prose h2, .cockpit-prose h3 {
color: var(--color-pure-white);
margin-top: 24px;
margin-bottom: 12px;
}
.cockpit-prose p { margin-bottom: 16px; }
.cockpit-prose ul { padding-left: 20px; margin-bottom: 16px; }
.cockpit-prose li { margin-bottom: 8px; }
.cockpit-prose img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: inline-block;
vertical-align: middle;
}
.cockpit-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 600px) {
.cockpit-info-grid { grid-template-columns: 1fr; }
}
.cockpit-info-card {
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform 0.2s;
}
.cockpit-info-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.1);
}
.cockpit-info-card h4 {
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
color: var(--color-pure-white);
margin: 0;
}
.cockpit-info-card p {
font-family: var(--font-inter);
font-size: 13px;
color: var(--color-ash);
margin: 0;
line-height: 1.5;
}
/* SIDEBAR (RIGHT) */
.cockpit-detail-sidebar {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 24px;
}
.cockpit-terminal {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 32px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-terminal-price {
font-family: var(--font-geistmono);
font-size: 36px;
font-weight: 700;
color: var(--color-pure-white);
margin-bottom: 32px;
display: flex;
align-items: baseline;
gap: 8px;
background: var(--color-recessed);
padding: 16px 24px;
border-radius: 8px;
border: 1px inset var(--color-slate);
}
.cockpit-terminal-price span {
font-size: 16px;
color: var(--color-coral-pulse);
}
.cockpit-terminal-addon {
margin-bottom: 32px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--color-slate);
border-radius: 8px;
padding: 16px;
}
.cockpit-addon-head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
color: var(--color-pure-white);
}
.cockpit-toggle {
position: relative;
width: 44px;
height: 24px;
cursor: pointer;
}
.cockpit-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cockpit-toggle-bg {
position: absolute;
inset: 0;
background: var(--color-slate);
border-radius: 24px;
transition: 0.3s;
}
.cockpit-toggle-dot {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
background: var(--color-pure-white);
border-radius: 50%;
transition: 0.3s;
}
.cockpit-toggle input:checked ~ .cockpit-toggle-bg {
background: var(--color-coral-pulse);
}
.cockpit-toggle input:checked ~ .cockpit-toggle-dot {
transform: translateX(20px);
}
.cockpit-addon-ui {
display: none;
margin-top: 16px;
padding-top: 16px;
border-top: 1px dashed var(--color-slate);
}
.cockpit-range {
width: 100%;
accent-color: var(--color-coral-pulse);
margin-bottom: 12px;
}
.cockpit-addon-vals {
display: flex;
justify-content: space-between;
font-family: var(--font-geistmono);
font-size: 13px;
color: var(--color-ash);
}
.cockpit-addon-vals span span {
color: var(--color-pure-white);
font-weight: 600;
}
.cockpit-btn-submit {
width: 100%;
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px;
font-family: var(--font-inter);
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
transition: all 0.2s;
}
.cockpit-btn-submit:hover {
background: var(--color-mist);
transform: translateY(-2px);
}
.cockpit-btn-submit i {
font-size: 14px;
}
/* Extracted from register.blade.php */
/* ==========================================================================
Cockpit Theme - Register Page
========================================================================== */
.cockpit-auth-wrapper {
background-color: var(--color-void-black);
color: var(--color-pure-white);
padding-bottom: 80px;
min-height: 100vh;
}
.cockpit-auth-container {
max-width: 800px;
margin: 40px auto 0;
padding: 0 16px;
}
.cockpit-auth-form-box {
background: var(--color-ink);
border: 1px solid var(--color-slate);
border-radius: var(--radius-largecards, 16px);
padding: 48px;
box-shadow: var(--shadow-subtle-3);
}
.cockpit-title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
text-align: center;
letter-spacing: -0.01em;
}
.cockpit-desc {
font-family: var(--font-inter);
font-size: 15px;
color: var(--color-smoke);
margin-bottom: 32px;
line-height: 1.6;
}
.cockpit-row {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
@media (max-width: 768px) {
.cockpit-row {
flex-direction: column;
gap: 24px;
}
}
.cockpit-field {
flex: 1;
display: flex;
flex-direction: column;
}
.cockpit-field label {
font-family: var(--font-geistmono);
font-size: 12px;
font-weight: 500;
color: var(--color-ash);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.cockpit-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.cockpit-input-wrap i:not(.toggle-password) {
position: absolute;
left: 16px;
color: var(--color-smoke);
font-size: 14px;
}
.cockpit-input-wrap .toggle-password {
position: absolute;
right: 16px;
color: var(--color-smoke);
font-size: 14px;
cursor: pointer;
transition: color 0.2s;
z-index: 2;
}
.cockpit-input-wrap .toggle-password:hover {
color: var(--color-pure-white);
}
.cockpit-input-wrap input {
box-sizing: border-box;
width: 100%;
background: var(--color-recessed);
border: 1px solid var(--color-slate);
border-radius: var(--radius-inputs, 8px);
padding: 12px 42px; /* left and right padding for icons */
color: var(--color-pure-white);
font-family: var(--font-inter);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cockpit-input-wrap input:focus {
outline: none;
border-color: var(--color-coral-pulse);
box-shadow: 0 0 0 1px rgba(255, 99, 99, 0.5);
}
.cockpit-input-wrap input::placeholder {
color: var(--color-smoke);
}
span.error {
color: var(--color-coral-pulse);
font-size: 12px;
margin-top: 6px;
font-family: var(--font-geistmono);
}
.cockpit-captcha-row {
display: flex;
gap: 16px;
align-items: stretch;
}
.cockpit-captcha-image {
border-radius: var(--radius-inputs, 8px);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cockpit-captcha-image img {
border-radius: 4px;
}
.cockpit-submit-btn {
background: var(--color-pure-white);
color: var(--color-void-black);
border: none;
border-radius: var(--radius-buttons, 8px);
padding: 16px 28px;
font-family: var(--font-inter);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
width: 100%;
margin-top: 16px;
}
.cockpit-submit-btn:hover {
background: var(--color-mist);
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.cockpit-auth-links {
margin-top: 24px;
text-align: center;
}
.cockpit-auth-links a {
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-ash);
text-decoration: none;
transition: color 0.2s;
}
.cockpit-auth-links a:hover {
color: var(--color-pure-white);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ========================================= */
/* MOBILE MENU RESPONSIVE STYLES */
/* ========================================= */
.kikin-mobile-toggle {
display: none;
background: transparent;
border: none;
color: var(--color-pure-white);
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
margin-left: 8px;
transition: color 0.2s;
}
.kikin-mobile-toggle:hover {
color: var(--color-coral-pulse);
}
@media (max-width: 991px) {
.kikin-mobile-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.kikin-header-container {
flex-wrap: wrap;
}
/* Keep Nav Links hidden by default */
.kikin-nav-links {
display: none;
width: 100%;
flex-direction: column;
order: 3;
background: var(--color-ink, #07080a);
padding: 16px;
border-radius: var(--radius-largecards, 12px);
margin-top: 16px;
border: 1px solid var(--color-slate, #2f3031);
gap: 8px;
box-shadow: var(--shadow-xl-2);
}
.kikin-header.menu-open .kikin-nav-links {
display: flex;
animation: cockpitSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.kikin-nav-links .kikin-nav-link {
width: 100%;
padding: 10px 16px;
justify-content: flex-start;
}
/* Reset dropdown positioning inside mobile menu */
.kikin-dropdown-standard, .kikin-mega-menu {
position: static;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
box-shadow: none;
border: none;
background: rgba(255, 255, 255, 0.03);
margin-top: 8px;
display: none;
width: 100%;
}
.kikin-header.menu-open .kikin-dropdown-wrapper:hover .kikin-dropdown-standard,
.kikin-header.menu-open .kikin-dropdown-wrapper:hover .kikin-mega-menu {
display: flex;
}
/*
* TOOLS CLUSTER HANDLING
* We want only Cart and Toggle to show when menu is closed.
* When menu is open, the rest of the items show below nav links.
*/
.kikin-tools {
gap: 4px;
flex-wrap: wrap; /* allow wrapping for expanded menu */
}
/* Hide tools items on mobile (except cart and toggle) */
.kikin-tools > *:not(.sideCartToggler):not(.kikin-mobile-toggle) {
display: none;
}
/* When menu is open, we force the tools container to take 100% width and drop below nav links */
.kikin-header.menu-open .kikin-tools {
width: 100%;
order: 4;
justify-content: flex-start;
background: var(--color-ink, #07080a);
padding: 16px;
border-radius: var(--radius-largecards, 12px);
margin-top: 8px;
border: 1px solid var(--color-slate, #2f3031);
gap: 12px;
display: flex;
animation: cockpitSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Reveal the hidden tools */
.kikin-header.menu-open .kikin-tools > *:not(.sideCartToggler):not(.kikin-mobile-toggle) {
display: flex;
flex: 1 1 100%; /* Force each to full width in the mobile block */
}
/* Since Cart and Toggle should stay at the top-right in the header,
we pull them out of the expanded tools flex flow and position them absolutely at the top */
.kikin-header.menu-open .kikin-tools .sideCartToggler,
.kikin-header.menu-open .kikin-tools .kikin-mobile-toggle {
position: absolute;
top: 14px;
}
.kikin-header.menu-open .kikin-tools .sideCartToggler {
right: 56px; /* offset for toggle button */
}
.kikin-header.menu-open .kikin-tools .kikin-mobile-toggle {
right: 16px;
}
/* Formatting for tools items in mobile view */
.kikin-header.menu-open .points-balance {
justify-content: center;
margin-bottom: 4px;
}
.kikin-header.menu-open .kikin-auth-cluster {
flex-direction: column;
gap: 8px;
}
.kikin-header.menu-open .kikin-auth-cluster a,
.kikin-header.menu-open .kikin-auth-cluster .kikin-dropdown-wrapper {
width: 100%;
text-align: center;
justify-content: center;
}
}
.kikin-header.menu-open .kikin-dropdown-wrapper.align-right .kikin-dropdown-standard {
position: static;
transform: none !important;
}